@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --sky:#FDF3E7;--halo:#FFEBD6;--sun:#FFE0C4;--cloud:#FFFFFF;--h1:#F5E3D1;--h2:#E7EDDA;--h3:#D9E7CC;--tree:#CFE0BF;--trunk:#D2BCA5;--flower:#F4C3CD;--star:0;
  --card:#FFFFFFF0;--line:#EFDFCC;--bubble:#F6EDE2;--ink:#1F1D2B;--onInk:#FFFFFF;--muted:#55525F;--coral:#C2451F;--dot:#F2694A;--good:#2F9E6A;--err:#B3261E;--moon:#E9A23B;
  --shadow:0 18px 40px -28px #5A3A1A99;
  --glow:#000000;--glow2:#000000;--glow-on:0;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --sky:#1A1735;--halo:#2C285A;--sun:#EFE3C4;--cloud:#2E2A58;--h1:#2A2352;--h2:#1D3A40;--h3:#1F4636;--tree:#2E7A5A;--trunk:#5E4A3A;--flower:#FF8FB1;--star:.9;
  --card:#24213FF2;--line:#3C3764;--bubble:#2F2B52;--ink:#F3EFE8;--onInk:#1C1A22;--muted:#C6C1DC;--coral:#FF9B80;--dot:#FF8A6B;--good:#8FE0B0;--err:#FF9C85;--moon:#F3E6C9;
  --shadow:0 18px 40px -24px #000000B3;
}
}
:root[data-theme="dark"]{
  --sky:#1A1735;--halo:#2C285A;--sun:#EFE3C4;--cloud:#2E2A58;--h1:#2A2352;--h2:#1D3A40;--h3:#1F4636;--tree:#2E7A5A;--trunk:#5E4A3A;--flower:#FF8FB1;--star:.9;
  --card:#24213FF2;--line:#3C3764;--bubble:#2F2B52;--ink:#F3EFE8;--onInk:#1C1A22;--muted:#C6C1DC;--coral:#FF9B80;--dot:#FF8A6B;--good:#8FE0B0;--err:#FF9C85;--moon:#F3E6C9;
  --shadow:0 18px 40px -24px #000000B3;
}
*{box-sizing:border-box}
html,.tabs{touch-action:manipulation} /* tapping quickly through the cards or the platform pills never zooms the page on a phone; pinching still can (the pills' row scrolls sideways, and iPhones start afresh inside anything that scrolls, so it's named too) */
html{-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{background:var(--sky);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
.scene{position:fixed;inset:0;z-index:0;pointer-events:none}
.scene svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
main{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* one screen at a time */
.screen{display:none}
body[data-screen="loading"] #s-loading,
body[data-screen="welcome"] #s-welcome,
body[data-screen="sent"] #s-sent,
body[data-screen="terms"] #s-terms,
body[data-screen="home"] #s-home,
body[data-screen="oops"] #s-oops{display:block;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
#s-loading{padding-top:30vh;text-align:center}
/* the spinner only shows if loading takes a while, so a quick start goes straight to the greeting */
.spinner{width:34px;height:34px;margin:0 auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--dot);opacity:0;animation:spin .8s linear infinite,appear .3s ease .7s forwards}
@keyframes appear{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.spinner{opacity:1}}

.brand{display:flex;justify-content:center;margin:8px 0 22px;color:var(--ink)}
.brand .logo{width:min(230px,62vw);height:auto;overflow:visible}
.brand.small{margin:0}
.brand.small .logo{width:118px}

.card{background:var(--card);border-radius:26px;padding:24px 22px 22px;box-shadow:var(--shadow);margin-bottom:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card.centre{text-align:center}
h1{margin:0 0 6px;font-size:27px;line-height:1.15;letter-spacing:-.02em}
h2{margin:0 0 12px;font-size:17px}
.lede{margin:0 0 18px;color:var(--muted);font-size:16.5px}
.fine{margin:14px 6px 0;text-align:center;font-size:13px;color:var(--muted)}
.fine-in{margin:-6px 0 16px;font-size:14px;color:var(--muted)}
a{color:var(--coral);text-underline-offset:3px}

/* terms checkbox */
.agree{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--bubble);cursor:pointer;font-size:15px;line-height:1.45;margin-bottom:16px;transition:box-shadow .25s ease}
.agree-input{position:absolute;opacity:0;width:1px;height:1px}
.agree .box{flex-shrink:0;width:24px;height:24px;border-radius:8px;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;color:transparent;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s cubic-bezier(.3,1.6,.5,1)}
.agree .box svg{width:16px;height:16px}
.agree-input:checked + .box{background:var(--dot);border-color:var(--dot);color:#FFFFFF;transform:scale(1.08)}
.agree-input:focus-visible + .box{outline:3px solid var(--dot);outline-offset:3px}
.agree.want{box-shadow:0 0 0 3px var(--dot);animation:shake .4s ease}
.nudge{margin:-8px 0 12px;min-height:0;font-size:14px;color:var(--coral);font-weight:700}
.nudge:empty{display:none}

/* buttons */
.btn{width:100%;min-height:52px;border:none;border-radius:999px;font:inherit;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .15s ease,filter .15s ease,opacity .2s ease}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.link:focus-visible,input:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.btn-ink{background:var(--ink);color:var(--onInk)}
.btn-google{background:#FFFFFF;color:#1F1F1F;border:1px solid #DADCE0}
.btn-soft{background:var(--bubble);color:var(--ink)}
.btn[aria-disabled="true"]{opacity:.5}
.btn.busy{pointer-events:none;opacity:.7}
.google-wrap{position:relative}
#gis-slot{display:flex;justify-content:center;min-height:44px}
#gis-slot[hidden],.gis-guard[hidden]{display:none}
.gis-guard{position:absolute;inset:0;border:none;background:transparent;cursor:pointer;border-radius:999px}
.link{display:block;margin:14px auto 0;border:none;background:none;color:var(--muted);font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}

.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.field-label{display:block;font-size:14px;font-weight:700;margin:0 0 6px}
input[type=email],input.code{width:100%;min-height:52px;border-radius:16px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:0 16px;margin-bottom:12px}
input[type=email]::placeholder,input.code::placeholder{color:var(--muted);opacity:.7}
input.code{text-align:center;font-size:20px;letter-spacing:.25em}
#code-form{text-align:left}
.error{margin:12px 0 0;color:var(--err);font-size:14.5px;font-weight:700}
.changes{margin:-6px 0 16px;padding:12px 14px;border-radius:16px;border:1.5px dashed var(--line);font-size:14.5px;line-height:1.45}
.error:empty{display:none}

.mail-art{width:76px;height:76px;margin:4px auto 10px}

/* home */
/* the home screen's header (scoped to header, so it never touches the best-day bar, which is also .top) */
header.top{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px}
.chip{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--card);box-shadow:var(--shadow)}
.hi{font-size:32px;margin-bottom:6px}
.accts{list-style:none;margin:0;padding:0}
.acct{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.acct:first-child{border-top:none;padding-top:2px}
.badge{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#FFFFFF}
.acct-name{flex:1;font-weight:700;display:flex;flex-direction:column;line-height:1.3}
.acct-sub{font-weight:400;font-size:13.5px;color:var(--muted)}
.soon{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--bubble);padding:5px 10px;border-radius:999px;white-space:nowrap}
.who{margin:0 0 14px;display:flex;flex-direction:column;font-weight:700;word-break:break-all}
.who small{font-weight:400;color:var(--muted);font-size:14px}
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:20px;font-size:14px}
.legal a{color:var(--ink);font-weight:700;text-decoration:none;padding:6px 0}

.toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:440px;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateY(20px);opacity:0;z-index:5;background:var(--ink);color:var(--onInk);padding:12px 18px;border-radius:18px;font-weight:700;font-size:14.5px;line-height:1.4;transition:opacity .25s ease,transform .25s ease;pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:none}
/* hidden for real between messages (not just see-through): iPhone Safari colours its bottom bar from a pinned element's background */
.toast{visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.toast.on{visibility:visible;transition-delay:0s}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* logo: draw, pop, three pulses, redraw */
.brand:not(.small) .l{opacity:0;transform:translateY(10px);animation:logoRise .6s cubic-bezier(.2,.7,.2,1) forwards}.brand:not(.small) .trace{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.8s cubic-bezier(.65,0,.35,1) .8s forwards,traceLoop 10s linear 3s infinite}.brand:not(.small) .dot{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pop .45s cubic-bezier(.3,1.6,.5,1) 2.5s forwards,dotLoop 10s ease-in-out 3s infinite}.brand:not(.small) .ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:ringLoop 10s cubic-bezier(.2,.6,.3,1) 3s infinite}@keyframes draw{to{stroke-dashoffset:0}}@keyframes pop{to{transform:scale(1)}}@keyframes traceLoop{0%,74%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.75,0)}80%,82%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{stroke-dashoffset:0}}@keyframes dotLoop{0%,14%,24%,38%,48%,62%,74%{transform:scale(1)}6%,30%,54%{transform:scale(1.3)}79%,95%{transform:scale(0)}98.5%{transform:scale(1.22)}100%{transform:scale(1)}}@keyframes ringLoop{0%,24%,48%{transform:scale(1);opacity:.75}20%,23.9%,44%,47.9%,68%,100%{transform:scale(2.75);opacity:0}}@keyframes logoRise{to{opacity:1;transform:none}}.brand.small .ring{display:none}@media (prefers-reduced-motion: reduce){.brand:not(.small) .l{opacity:1;transform:none}.brand:not(.small) .trace{stroke-dashoffset:0}.brand:not(.small) .dot{transform:none}.brand:not(.small) .ring{opacity:0}}

/* linking accounts */
body[data-screen="delete"] #s-delete{display:block;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.acct-name{min-width:0}
.acct-name .h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-sub.warn{color:var(--coral);font-weight:700}
.mini{flex-shrink:0;min-height:36px;padding:0 14px;border-radius:999px;border:none;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;background:var(--ink);color:var(--onInk);white-space:nowrap}
.mini.soft{background:var(--bubble);color:var(--ink)}
.mini.sure{background:#C2451F;color:#FFFFFF}
.mini.busy{opacity:.6;pointer-events:none}
.mini:focus-visible{outline:3px solid var(--dot);outline-offset:2px}
.accts-note{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.badge.photo{overflow:hidden;background:var(--bubble)}
.badge.photo img{display:block;width:100%;height:100%;object-fit:cover}
.acct-btns{flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.btn-danger{background:#C2451F;color:#FFFFFF}
.btn.gap{margin-top:10px}
.link.danger{color:var(--coral)}
.acct.loading .acct-sub{opacity:.6}
/* ---------- the weekly deck ---------- */
.wcard[data-platform="all"]{--p-sky:#FFF3E6;--p-sun:#FFC46B;--p-far:#CFE8C3;--p-mid:#B7DDB0;--p-near:#A3D39C;--p-deep:#6FB38A;--p-trunk:#B5835A;--p-water:#BFE3F2;--p-water2:#A6D6EC;--p-flower:#F7A1B5;--p-flower2:#FFFFFF;--p-bar:#F2694A;--p-barSoft:#FFFFFFB3;--p-white:#FFFFFF}
.wcard[data-platform="tiktok"]{--p-sky:#FFE9E1;--p-sun:#FF9D76;--p-far:#F8C9B8;--p-mid:#F2B3A0;--p-near:#E9A08E;--p-deep:#C9786B;--p-trunk:#9E6A55;--p-water:#FFD3C4;--p-water2:#F9BCA8;--p-flower:#FFF1A8;--p-flower2:#FFFFFF;--p-bar:#E5395F;--p-barSoft:#FFFFFFB3;--p-white:#FFFFFF}
.wcard[data-platform="youtube"]{--p-sky:#E6F2FF;--p-sun:#FFD56A;--p-far:#CDE6C3;--p-mid:#B5DBA9;--p-near:#9ECF92;--p-deep:#5FA877;--p-trunk:#A77B55;--p-water:#B8DBF7;--p-water2:#9CCBF2;--p-flower:#FF9FB0;--p-flower2:#FFFFFF;--p-bar:#3F7FD1;--p-barSoft:#FFFFFFB3;--p-white:#FFFFFF}
.wcard[data-platform="instagram"]{--p-sky:#F1EAFF;--p-sun:#FFCF8F;--p-far:#DCD0F7;--p-mid:#CBBDF2;--p-near:#B8A8EA;--p-deep:#8E7CCB;--p-trunk:#8A6E9E;--p-water:#D9D2FA;--p-water2:#C6BCF5;--p-flower:#FFB7C9;--p-flower2:#FFE08A;--p-bar:#7B63C9;--p-barSoft:#FFFFFFB3;--p-white:#FFFFFF}
.wcard[data-platform="website"]{--p-sky:#E7F7EF;--p-sun:#FFE08A;--p-far:#C3EBD5;--p-mid:#A9E0C3;--p-near:#90D4B0;--p-deep:#4FA982;--p-trunk:#8F7355;--p-water:#BDE9E2;--p-water2:#A2DDD4;--p-flower:#FFB3A1;--p-flower2:#FFFFFF;--p-bar:#2E9A6E;--p-barSoft:#FFFFFFB3;--p-white:#FFFFFF}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .wcard[data-platform="all"]{--p-sky:#2B1C45;--p-sun:#FFD27A;--p-far:#2A513D;--p-mid:#2F6047;--p-near:#346F52;--p-deep:#3EA370;--p-trunk:#8A6A4E;--p-water:#293D65;--p-water2:#2F4879;--p-flower:#FF8FB1;--p-flower2:#FFE08A;--p-bar:#FF8A6B;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root:not([data-theme="light"]) .wcard[data-platform="tiktok"]{--p-sky:#471A28;--p-sun:#FFC7A8;--p-far:#642B3C;--p-mid:#742F44;--p-near:#84334C;--p-deep:#C8416A;--p-trunk:#8A5A4E;--p-water:#592636;--p-water2:#6D2C40;--p-flower:#FFD166;--p-flower2:#FFE9DD;--p-bar:#FF7A98;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root:not([data-theme="light"]) .wcard[data-platform="youtube"]{--p-sky:#162B46;--p-sun:#E9F1FF;--p-far:#264164;--p-mid:#2A4A74;--p-near:#2E5484;--p-deep:#359773;--p-trunk:#7A6250;--p-water:#1E4867;--p-water2:#24567B;--p-flower:#FF9FB0;--p-flower2:#E6ECFF;--p-bar:#6FA8F5;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root:not([data-theme="light"]) .wcard[data-platform="instagram"]{--p-sky:#311C4A;--p-sun:#F3E8FF;--p-far:#482C68;--p-mid:#523177;--p-near:#5C3588;--p-deep:#9059CF;--p-trunk:#7A5E86;--p-water:#41285D;--p-water2:#4D2E70;--p-flower:#FF9FC6;--p-flower2:#FFE08A;--p-bar:#B69BFF;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root:not([data-theme="light"]) .wcard[data-platform="website"]{--p-sky:#13352B;--p-sun:#E6FFF2;--p-far:#1F4C3F;--p-mid:#245C4B;--p-near:#286C58;--p-deep:#33A374;--p-trunk:#7A6450;--p-water:#1D5351;--p-water2:#246664;--p-flower:#FFA98F;--p-flower2:#E6FFF2;--p-bar:#5FD3A2;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
}
:root[data-theme="dark"] .wcard[data-platform="all"]{--p-sky:#2B1C45;--p-sun:#FFD27A;--p-far:#2A513D;--p-mid:#2F6047;--p-near:#346F52;--p-deep:#3EA370;--p-trunk:#8A6A4E;--p-water:#293D65;--p-water2:#2F4879;--p-flower:#FF8FB1;--p-flower2:#FFE08A;--p-bar:#FF8A6B;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root[data-theme="dark"] .wcard[data-platform="tiktok"]{--p-sky:#471A28;--p-sun:#FFC7A8;--p-far:#642B3C;--p-mid:#742F44;--p-near:#84334C;--p-deep:#C8416A;--p-trunk:#8A5A4E;--p-water:#592636;--p-water2:#6D2C40;--p-flower:#FFD166;--p-flower2:#FFE9DD;--p-bar:#FF7A98;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root[data-theme="dark"] .wcard[data-platform="youtube"]{--p-sky:#162B46;--p-sun:#E9F1FF;--p-far:#264164;--p-mid:#2A4A74;--p-near:#2E5484;--p-deep:#359773;--p-trunk:#7A6250;--p-water:#1E4867;--p-water2:#24567B;--p-flower:#FF9FB0;--p-flower2:#E6ECFF;--p-bar:#6FA8F5;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root[data-theme="dark"] .wcard[data-platform="instagram"]{--p-sky:#311C4A;--p-sun:#F3E8FF;--p-far:#482C68;--p-mid:#523177;--p-near:#5C3588;--p-deep:#9059CF;--p-trunk:#7A5E86;--p-water:#41285D;--p-water2:#4D2E70;--p-flower:#FF9FC6;--p-flower2:#FFE08A;--p-bar:#B69BFF;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
:root[data-theme="dark"] .wcard[data-platform="website"]{--p-sky:#13352B;--p-sun:#E6FFF2;--p-far:#1F4C3F;--p-mid:#245C4B;--p-near:#286C58;--p-deep:#33A374;--p-trunk:#7A6450;--p-water:#1D5351;--p-water2:#246664;--p-flower:#FFA98F;--p-flower2:#E6FFF2;--p-bar:#5FD3A2;--p-barSoft:#FFFFFF33;--p-white:#FFFFFF40}
.wcard{--chip:#FFFFFFB8;--chip-solid:#FFFFFF;--item:#FFFFFFA6;--card-text:#4A4757}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wcard{--chip:#FFFFFF1C;--chip-solid:#FFFFFF26;--item:#FFFFFF14;--card-text:#D9D4EC}}
:root[data-theme="dark"] .wcard{--chip:#FFFFFF1C;--chip-solid:#FFFFFF26;--item:#FFFFFF14;--card-text:#D9D4EC}
body[data-screen="home"] .scene{opacity:.45}
.week{margin-top:-6px}
.week-title{text-align:center;font-size:clamp(25px,7.4vw,31px);margin:0 0 2px}
.week-sub{text-align:center;color:var(--muted);font-size:14.5px;margin:0 0 14px}
.tabs{display:flex;justify-content:center;gap:9px;margin:0 0 16px;flex-wrap:wrap}
.tab{position:relative;width:52px;height:52px;border-radius:17px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .25s ease,color .25s ease}
.tab.on{background:var(--ink);color:var(--onInk);border-color:var(--ink);transform:scale(1.08)}
.tab:focus-visible,.round:focus-visible,.tap:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.tone{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--sky);background:#A9A5B3}
.tone.t-great{background:#3BA776}.tone.t-care{background:#F2694A}.tone.t-new{background:#A9A5B3}
.deck{position:relative;margin:0 0 6px}
.deck-stack span{position:absolute;left:14px;right:14px;bottom:-9px;height:40px;border-radius:30px;background:var(--card);opacity:.7;z-index:0}
.deck-stack span+span{left:28px;right:28px;bottom:-18px;opacity:.4}
.wcard{position:relative;z-index:1;min-height:clamp(470px,64vh,540px);border-radius:32px;background:var(--p-sky);box-shadow:var(--shadow);overflow:hidden;color:var(--ink);transition:background-color .5s ease;display:flex;flex-direction:column}
.wcard-scene{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;pointer-events:none}
.scene-art{display:block;width:100%;height:150px}
.tap{position:absolute;top:0;bottom:0;z-index:1;border:none;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tap-prev{left:0;width:38%}.tap-next{right:0;width:62%}
.wcard-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 20px 142px;pointer-events:none} /* the words stop above the sun, clouds and birds in the picture, so a long card grows instead */
.wcard-body a,.wcard-body button{pointer-events:auto}
.wcard-body.in-next{animation:cardIn .42s cubic-bezier(.2,.7,.2,1) both}
.wcard-body.in-prev{animation:cardBack .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes cardBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--chip-solid);font-size:14px;font-weight:700;margin-bottom:6px}
.c-main{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-top:8px}
.c-title{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.02em;max-width:300px}
.c-title.big{font-size:31px}.c-title.md{font-size:25px;line-height:1.2}.c-title.sm{font-size:22px}
.c-body{margin:0;color:var(--card-text);font-size:15.5px;line-height:1.45;max-width:300px}
.c-body.lg{font-size:17px}
.c-note{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--card-text)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:310px}
.chip-s{padding:6px 11px;border-radius:999px;background:var(--chip);font-size:13.5px;color:var(--card-text);white-space:nowrap}
.chip-s b{color:var(--ink)}.chip-s b.up,.pill.up{color:var(--good)}
.pill{padding:7px 14px;border-radius:999px;background:var(--chip-solid);font-size:15px;font-weight:700}
.pill.down,.pill.flat{color:var(--ink)}
.num-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-top:8px}
.glow{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:radial-gradient(circle,var(--p-sun) 0%,transparent 62%);opacity:.75;animation:glow 2.6s ease-in-out infinite alternate}
.num{position:relative;font-size:clamp(58px,18vw,74px);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.unit{font-size:15px;color:var(--card-text);margin-top:-4px}
@keyframes glow{from{transform:scale(.92);opacity:.6}to{transform:scale(1.06);opacity:.9}}
.chart{width:100%;max-width:290px;display:flex;flex-direction:column;gap:6px}
.bars{position:relative;display:flex;align-items:flex-end;gap:8px;height:128px}
.bar-col{flex:1 1 0;height:128px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.bar{width:100%;height:var(--h);border-radius:10px 10px 4px 4px;background:var(--p-barSoft);animation:barUp .65s cubic-bezier(.2,.7,.2,1) var(--d) both}
.bar.top{background:var(--p-bar)}
@keyframes barUp{from{height:0}}
/* the best day's number floats above its bar, so every column (and its day label) stays the same width */
.bar-col{position:relative;min-width:0}
.peak{position:absolute;left:-16px;right:-16px;bottom:calc(var(--h) + 5px);text-align:center;font-size:14px;font-weight:700;white-space:nowrap}
.normal{position:absolute;left:-6px;right:-6px;z-index:1;border-top:2px dashed var(--card-text);opacity:.7}
.normal span{position:absolute;right:0;bottom:3px;padding:1px 7px;border-radius:999px;background:var(--chip-solid);font-size:11px;font-weight:700;color:var(--card-text)}
.bar-labels{display:flex;gap:8px}.bar-labels span{flex:1 1 0;font-size:12px;color:var(--card-text)}.bar-labels .on{font-weight:700;color:var(--ink)}
.star-wrap{position:relative;width:88px;height:84px;display:flex;align-items:center;justify-content:center;margin-top:6px}
.star{animation:starIn .7s cubic-bezier(.3,1.9,.4,1) .1s both}
.sparkles{position:absolute;left:50%;top:50%;margin:-60px 0 0 -75px;overflow:visible}
.star-wrap.party .star{animation:starIn .7s cubic-bezier(.3,1.9,.4,1) .1s both,bob 3s ease-in-out 1s infinite}
@keyframes starIn{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-5px)}}
.watch{font-size:14px;font-weight:700;color:var(--ink);background:var(--chip);padding:7px 14px;border-radius:999px;text-decoration:none}
.list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.list li{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:18px;background:var(--item);animation:itemIn .42s cubic-bezier(.3,1.3,.5,1) var(--d) both}
.list li>span:last-child{display:flex;flex-direction:column;gap:2px}
.list b{font-size:15px;line-height:1.3}.list small{font-size:13px;line-height:1.4;color:var(--card-text)}
.list .n{flex-shrink:0;width:32px;height:32px;border-radius:11px;background:var(--chip-solid);display:flex;align-items:center;justify-content:center;font-weight:700}
.fixes .n{background:#F2694A;color:#FFFFFF}
@keyframes itemIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.tips li{align-items:center}
.tick{flex-shrink:0;width:44px;height:44px;margin:-6px;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:transparent}
.tick span{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--card-text);display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1)}
.tips li.done .tick{color:#FFFFFF}
.tips li.done .tick span{background:var(--good);border-color:var(--good);transform:scale(1.08)}
.tips li.done b{text-decoration:line-through;text-decoration-thickness:2px;opacity:.65}
.tick:focus-visible{outline:3px solid var(--dot);outline-offset:-2px;border-radius:50%}
.days{display:flex;gap:8px;margin-top:6px}
.days .d{width:32px;height:32px;border-radius:50%;border:2px solid var(--p-barSoft);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--card-text);animation:itemIn .38s cubic-bezier(.3,1.5,.5,1) var(--d) both}
.days .d.done{background:var(--p-bar);border-color:var(--p-bar);color:#FFFFFF}
.days .d.today{border-color:var(--p-bar);color:var(--ink)}
.btn-fix{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border:none;border-radius:999px;background:var(--ink);color:var(--onInk);font:inherit;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;box-shadow:0 10px 22px -12px #0008}
.btn-fix:focus-visible,.flip-back:focus-visible,.watch:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.flip-back{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:none;background:var(--chip-solid);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.note-icon{width:72px;height:72px;border-radius:50%;background:var(--chip-solid);display:flex;align-items:center;justify-content:center}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px}
.round{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.round:disabled{visibility:hidden}
.dots{display:flex;gap:6px;align-items:center}
.dots span{width:7px;height:7px;border-radius:999px;background:var(--line);transition:width .25s ease,background .25s ease}
.dots span.on{width:22px;background:var(--ink)}
.deck-next{text-align:center;color:var(--muted);font-size:14px;margin:12px 0 22px}
.deck-source{margin:12px 8px 0;text-align:center;font-size:12.5px;line-height:1.4;color:var(--muted)}
.deck-source + .deck-next{margin-top:8px}
@media (prefers-reduced-motion: reduce){.bar,.list li,.days .d,.star,.glow{animation:none!important}}
@media (min-width:700px){.wcard{min-height:520px}}
/* ---------- bounce: each card's pieces pop in, one after another ---------- */
.wcard{will-change:transform;transform-origin:50% 60%}
.wcard-body:not(.still) .kicker{animation:pop .42s cubic-bezier(.3,1.5,.5,1) both}
.wcard-body:not(.still) .c-title{animation:zoomIn .62s cubic-bezier(.2,1.25,.4,1) .08s both}
.wcard-body:not(.still) .c-body,.wcard-body:not(.still) .unit,.wcard-body:not(.still) .c-note{animation:fadeUp .5s ease .22s both}
.wcard-body:not(.still) .chip-s{animation:pop .44s cubic-bezier(.3,1.45,.5,1) both}
.wcard-body:not(.still) .chip-s:nth-child(1){animation-delay:.3s}.wcard-body:not(.still) .chip-s:nth-child(2){animation-delay:.38s}
.wcard-body:not(.still) .chip-s:nth-child(3){animation-delay:.46s}.wcard-body:not(.still) .chip-s:nth-child(4){animation-delay:.54s}
.wcard-body:not(.still) .pill{animation:pop .46s cubic-bezier(.3,1.6,.5,1) .72s both}
.wcard-body:not(.still) .watch,.wcard-body:not(.still) .btn-fix{animation:pop .46s cubic-bezier(.3,1.5,.5,1) .5s both}
.wcard-body:not(.still) .num{animation:zoomIn .7s cubic-bezier(.2,1.3,.4,1) .05s both}
.wcard-body:not(.still) .note-icon{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.wcard-body.still *{animation:none!important}
.list li{background-image:linear-gradient(100deg,transparent 30%,#FFFFFF8C 50%,transparent 70%);background-size:220% 100%;background-repeat:no-repeat;background-position:-30% 0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .list li{background-image:linear-gradient(100deg,transparent 30%,#FFFFFF1F 50%,transparent 70%)}}
:root[data-theme="dark"] .list li{background-image:linear-gradient(100deg,transparent 30%,#FFFFFF1F 50%,transparent 70%)}
.wcard-body:not(.still) .list li{animation:itemIn .44s cubic-bezier(.3,1.35,.5,1) var(--d) both,sweep .9s ease-out calc(var(--d) + .35s) both}
.bar{animation:barUp .75s cubic-bezier(.3,1.35,.5,1) var(--d) both}
.wcard-body:not(.still) .peak{animation:pop .4s cubic-bezier(.3,1.6,.5,1) .55s both,bob 2.2s ease-in-out 1.2s infinite}
.star-wrap{border:none;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.star-wrap:focus-visible{outline:3px solid var(--dot);outline-offset:4px;border-radius:50%}
.star-wrap .bit{position:absolute;left:50%;top:50%;width:11px;height:11px;pointer-events:none;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.star-wrap .ring{position:absolute;left:50%;top:50%;width:80px;height:80px;border-radius:50%;border:3px solid #FFC940;pointer-events:none}
.star-wrap .ring.two{border:2px solid #FF8FB1}
.tab:active,.round:active{transform:scale(.92)}
.tab{transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .25s ease,color .25s ease}
.dots span.on{transition:width .35s cubic-bezier(.3,1.6,.5,1),background .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.88)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sweep{from{background-position:130% 0}to{background-position:-30% 0}}
@media (prefers-reduced-motion: reduce){.wcard-body *{animation:none!important}}
/* weekly email switch */
.switch-row{display:flex;align-items:center;gap:14px;cursor:pointer;position:relative}
.switch-row>span:first-child{flex:1;display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.35}
.switch-row small{color:var(--muted);font-size:13.5px}
.switch-input{position:absolute;opacity:0;width:1px;height:1px}
.switch{flex-shrink:0;width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;transition:background .25s ease}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px #0003;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.switch-input:checked + .switch{background:var(--good)}
.switch-input:checked + .switch::after{transform:translateX(20px)}
.switch-input:focus-visible + .switch{outline:3px solid var(--dot);outline-offset:3px}
.switch-row + .link{margin-top:10px}
.link.busy{opacity:.6;pointer-events:none}
[hidden]{display:none!important}
/* ---------- the greeting when the app opens ---------- */
.scene{transition:opacity .6s ease}
body[data-screen="greet"] #s-greet{display:flex}
#s-greet{position:fixed;inset:0;z-index:2;align-items:center;justify-content:center;padding:24px 24px calc(12vh + env(safe-area-inset-bottom));cursor:default;-webkit-tap-highlight-color:transparent}
.greet{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:420px;transition:opacity .38s ease,transform .38s cubic-bezier(.4,0,.2,1)}
#s-greet.leave .greet{opacity:0;transform:translateY(-16px) scale(.98)}
.greet-art{width:92px;height:92px;margin-bottom:8px;overflow:visible;animation:artIn .75s cubic-bezier(.3,1.5,.5,1) both}
.greet-art[data-time="day"] .moon,.greet-art[data-time="night"] .sun{display:none}
.greet-art .halo{fill:#FFC46B;opacity:.3;transform-box:fill-box;transform-origin:center;animation:breathe 2.6s ease-in-out infinite alternate}
.greet-art .rays{fill:none;stroke:#F7A531;stroke-width:5;stroke-linecap:round;transform-box:view-box;transform-origin:48px 48px;animation:turn 26s linear infinite}
.greet-art .core{fill:#F7A531}
.greet-art .moon-face,.greet-art .spark{fill:var(--moon)}
.greet-art .moon{transform-box:view-box;transform-origin:48px 48px;animation:sway 5s ease-in-out infinite alternate}
.greet-art .spark{transform-box:fill-box;transform-origin:center;animation:twinkle 1.6s ease-in-out infinite alternate}
.greet-art .s2{animation-delay:.8s}
.greet-title{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%}
.greet-hello{font-size:24px;line-height:1.25;letter-spacing:-.015em;animation:rise .55s cubic-bezier(.2,.7,.2,1) .12s both}
.greet-big{max-width:100%;font-size:clamp(44px,13vw,58px);line-height:1.05;letter-spacing:-.035em;overflow-wrap:anywhere;animation:nameIn .75s cubic-bezier(.2,1.25,.4,1) .26s both}
.greet-name{color:var(--coral)}
#greet-mark{color:var(--ink)}
.greet-line{margin:14px 0 0;min-height:1.5em;font-size:17px;color:var(--muted);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
#s-greet.ready .greet-line{opacity:1;transform:none}
.greet-trace{width:150px;height:auto;margin-top:22px;overflow:visible}
.greet-trace path{fill:none;stroke:var(--dot);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 101;stroke-dashoffset:100;transition:stroke-dashoffset 1.7s cubic-bezier(.25,.7,.3,1) .3s}
#s-greet.go .greet-trace path{stroke-dashoffset:24}
#s-greet.ready .greet-trace path{stroke-dashoffset:0;transition-duration:.45s;transition-delay:0s}
.greet-trace circle{fill:var(--dot);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .3s}
#s-greet.ready .greet-trace circle{transform:scale(1)}
@keyframes artIn{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes nameIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes breathe{from{transform:scale(.9)}to{transform:scale(1.1)}}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(4deg)}}
@keyframes twinkle{from{opacity:.3;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
/* coming in from the greeting: the home screen arrives piece by piece */
body.arrive[data-screen="home"] #s-home{animation:none}
body.arrive[data-screen="home"] #s-home > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
body.arrive #s-home > :nth-child(2){animation-delay:.07s}
body.arrive #s-home > :nth-child(3){animation-delay:.14s}
body.arrive #s-home > :nth-child(4){animation-delay:.21s}
body.arrive #s-home > :nth-child(5){animation-delay:.28s}
body.arrive #s-home > :nth-child(n+6){animation-delay:.34s}
@media (prefers-reduced-motion: reduce){.greet-art *,.greet-art{animation:none!important}}
/* ---------- a bit more pop ---------- */
/* each deck's colour (its --p-bar, passed up as --accent) colours the tabs and dots */
.tab.on{background:var(--accent,var(--ink));border-color:var(--accent,var(--ink));color:#FFFFFF;box-shadow:0 10px 22px -12px var(--accent,#0006)}
.dots span.on{background:var(--accent,var(--ink))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tab.on{color:#1C1A22}}
:root[data-theme="dark"] .tab.on{color:#1C1A22}
/* the card: a soft light from above, and a glow underneath in the deck's colour */
.wcard{--hl:#FFFFFFA6;background:radial-gradient(130% 70% at 50% -10%,var(--hl) 0%,transparent 62%),var(--p-sky);box-shadow:0 30px 60px -34px color-mix(in srgb,var(--p-bar) 80%,transparent),var(--shadow)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wcard{--hl:#FFFFFF14}}
:root[data-theme="dark"] .wcard{--hl:#FFFFFF14}
/* a quick shine across each card as it arrives */
.wcard::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#FFFFFF73 48%,#FFFFFF1A 56%,transparent 70%);transform:translateX(-130%)}
.wcard.shine::after{animation:shine 1s cubic-bezier(.3,.6,.3,1) .15s}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wcard::after{background:linear-gradient(100deg,transparent 30%,#FFFFFF1F 48%,#FFFFFF08 56%,transparent 70%)}}
:root[data-theme="dark"] .wcard::after{background:linear-gradient(100deg,transparent 30%,#FFFFFF1F 48%,#FFFFFF08 56%,transparent 70%)}
@keyframes shine{to{transform:translateX(130%)}}
/* the label at the top of each card gets a dot in the deck's colour */
.kicker::before{content:"";display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--p-bar);vertical-align:middle}
.c-title{font-size:32px;letter-spacing:-.025em}.c-title.big{font-size:33px}
/* ups in green, downs in coral, each with a little arrow */
.chip-s.up{background:color-mix(in srgb,var(--good) 16%,var(--chip-solid))}
.chip-s.down{background:color-mix(in srgb,#F2694A 14%,var(--chip-solid))}
.chip-s b.down{color:#C2451F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip-s b.down{color:#FF9B80}}
:root[data-theme="dark"] .chip-s b.down{color:#FF9B80}
.chip-s b.up::before,.chip-s b.down::before{content:"";display:inline-block;width:.6em;height:.5em;margin:0 .3em .08em 0;background:currentColor}
.chip-s b.up::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.chip-s b.down::before{clip-path:polygon(0 0,100% 0,50% 100%)}
.pill{box-shadow:0 8px 18px -12px #0005}
/* home: your initial in the corner, and an icon on each settings card */
.me{width:42px;height:42px;border-radius:50%;border:0;padding:0;cursor:pointer;background:linear-gradient(135deg,#F2694A,#FFB547);color:#1F1D2B;font:inherit;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -12px #C2451F;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.me:active{transform:scale(.92)}
.me:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.card h2{display:flex;align-items:center;gap:10px}
.h-ico{flex:none;width:32px;height:32px;border-radius:11px;background:var(--bubble);color:var(--coral);display:flex;align-items:center;justify-content:center}
.card.flash{animation:flash 1.2s ease}
@keyframes flash{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 3px var(--dot),var(--shadow)}}
@media (prefers-reduced-motion: reduce){.wcard.shine::after{animation:none}}
/* the mood picture above a text card's title */
.mark{display:block;overflow:visible;filter:drop-shadow(0 8px 12px #0000001A)}
.wcard-body:not(.still) .mark{animation:pop .55s cubic-bezier(.3,1.6,.5,1) both}
.m-sun .rays{transform-box:view-box;transform-origin:0 0;animation:turn 20s linear infinite}
.m-care .heart{transform-box:fill-box;transform-origin:center;animation:beat 1.8s ease-in-out .7s infinite}
.mark .disc{fill:var(--chip-solid)}
.m-good .line{stroke-dasharray:100 101}
.wcard-body:not(.still) .m-good .line{animation:markDraw .7s cubic-bezier(.3,.7,.3,1) .25s both}
.wcard-body:not(.still) .m-good .end{transform-box:fill-box;transform-origin:center;animation:pop .4s cubic-bezier(.3,1.6,.5,1) .85s both}
@keyframes markDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.m-good .tw{transform-box:fill-box;transform-origin:center;animation:twinkle 1.3s ease-in-out infinite alternate}
.m-good .t2{animation-delay:.65s}
@keyframes beat{0%,60%,100%{transform:scale(1)}12%{transform:scale(1.12)}26%{transform:scale(1)}40%{transform:scale(1.07)}}
/* a little squeeze when you tap a card */
.wcard{transition:background-color .5s ease,transform .18s ease}
.wcard:active{transform:scale(.985)}
@media (prefers-reduced-motion: reduce){.mark,.mark *{animation:none!important}}
/* ---------- the app's three tabs: your week, your accounts and settings ---------- */
#s-home .panel{display:none}
#s-home[data-tab="week"] #p-week,#s-home[data-tab="accounts"] #p-accounts,#s-home[data-tab="settings"] #p-settings{display:block;animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
body[data-screen="home"] main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.panel-title{font-size:30px;margin:0 0 4px}
.panel-lede{margin:0 0 16px;color:var(--muted);font-size:15.5px}
#intro .btn{margin-top:4px}
/* the bar along the bottom, like any app (outside the screens, so it stays put while they slide in) */
.tabbar{display:none;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:4;max-width:436px;margin:0 auto;gap:4px;padding:6px;border-radius:26px;background:var(--card);box-shadow:0 18px 40px -18px #3A231266,0 0 0 1px var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body[data-screen="home"] .tabbar{display:flex;animation:rise .5s cubic-bezier(.2,.7,.2,1) .2s both}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:6px 4px;border:0;border-radius:20px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s ease,color .25s ease,transform .2s cubic-bezier(.3,1.6,.5,1)}
.tb svg{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tb[aria-current="page"]{background:var(--bubble);color:var(--ink)}
.tb[aria-current="page"] svg{color:var(--coral);transform:translateY(-1px) scale(1.1)}
.tb:active{transform:scale(.95)}
.tb:focus-visible{outline:3px solid var(--dot);outline-offset:-3px}
body[data-screen="home"] .toast{bottom:calc(94px + env(safe-area-inset-bottom))}
/* settings: a name box, picks for the day and the colours, and plain words */
.card-text{margin:0 0 14px;font-size:15px;line-height:1.45}
.field-row{margin:0 0 16px}
.field-line{display:flex;gap:8px;align-items:center}
.field-line input{flex:1;min-width:0;min-height:48px;border-radius:14px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:0 14px}
.field-line input::placeholder{color:var(--muted);opacity:.7}
.field-line .mini{min-height:44px}
.mini:disabled{opacity:.35;cursor:default}
.field-help{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.4}
.seg-set{border:0;margin:0 0 18px;padding:0;min-width:0}
.seg-set:last-child{margin-bottom:0}
legend.field-label{padding:0;margin-bottom:8px}
.seg{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--bubble)}
.seg label{flex:1;position:relative;min-width:0}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 4px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1)}
.seg input:checked + span{background:var(--ink);color:var(--onInk);box-shadow:0 6px 14px -8px #0007}
.seg input:focus-visible + span{outline:3px solid var(--dot);outline-offset:1px}
.seg label:active span{transform:scale(.95)}
#me-card .who{margin:0}
.card .btn + .accts-note{margin-top:14px}
/* your past weeks: step back through the last 8 */
.week-when{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px}
.week-when .week-sub{margin:0}
.round.sm{width:34px;height:34px;flex:none}
.back-now{display:block;margin:-6px auto 14px;border:0;background:var(--bubble);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer}
.back-now:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.week.loading .deck,.week.loading .tabs{opacity:.5;transition:opacity .2s ease}
/* ---------- dark mode follows the time of day (theme.js sets data-time), and stays dark ----------
   morning: a soft dawn glow and a warm sun rising; afternoon: a deep blue day; evening: a dusky glow and the
   first stars; night: the starry sky above. (Written twice, for automatic and for a chosen dark) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"])[data-time="morning"]{--sky:#1D1D3F;--halo:#4A3358;--sun:#FFB98A;--cloud:#3B3463;--h1:#2C2650;--h2:#1F3C44;--h3:#21483A;--star:.3;--glow:#FF9A7A;--glow2:#FFC98B;--glow-on:.42}
:root:not([data-theme="light"])[data-time="afternoon"]{--sky:#14223A;--halo:#22385A;--sun:#FFE6A6;--cloud:#2B3D61;--h1:#1E3152;--h2:#1A3F49;--h3:#1C4A3B;--star:0;--glow:#3D6E9E;--glow2:#5A8FB8;--glow-on:.24}
:root:not([data-theme="light"])[data-time="evening"]{--sky:#211737;--halo:#45284F;--sun:#FF9E70;--cloud:#3A2B57;--h1:#2E2250;--h2:#213845;--h3:#224434;--star:.55;--glow:#FF6F6B;--glow2:#FFA36B;--glow-on:.36}
}
:root[data-theme="dark"][data-time="morning"]{--sky:#1D1D3F;--halo:#4A3358;--sun:#FFB98A;--cloud:#3B3463;--h1:#2C2650;--h2:#1F3C44;--h3:#21483A;--star:.3;--glow:#FF9A7A;--glow2:#FFC98B;--glow-on:.42}
:root[data-theme="dark"][data-time="afternoon"]{--sky:#14223A;--halo:#22385A;--sun:#FFE6A6;--cloud:#2B3D61;--h1:#1E3152;--h2:#1A3F49;--h3:#1C4A3B;--star:0;--glow:#3D6E9E;--glow2:#5A8FB8;--glow-on:.24}
:root[data-theme="dark"][data-time="evening"]{--sky:#211737;--halo:#45284F;--sun:#FF9E70;--cloud:#3A2B57;--h1:#2E2250;--h2:#213845;--h3:#224434;--star:.55;--glow:#FF6F6B;--glow2:#FFA36B;--glow-on:.36}
.scene .horizon{opacity:var(--glow-on);transition:opacity 1s ease}
/* (no fade on the page colour: iPhone Safari takes the colour for the strip behind its clock the moment it changes, so a fade left it on the old one) */
/* ---------- the welcome screen: choose, then sign up (with the terms box) or log in ---------- */
#welcome-card[data-mode="choose"] .auth,#welcome-card:not([data-mode="choose"]) .choose{display:none}
#welcome-card[data-mode="login"] .agree,#welcome-card[data-mode="login"] .nudge{display:none}
#welcome-card .auth,#welcome-card .choose{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.mode-note{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.mode-switch{margin:16px 0 0;text-align:center;font-size:15px;color:var(--muted)}
.link-in{border:0;background:none;padding:4px 2px;font:inherit;font-weight:700;color:var(--coral);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-in:focus-visible{outline:3px solid var(--dot);outline-offset:2px;border-radius:6px}
/* ---------- which platform you're reading: named tabs, a header on every card ---------- */
.tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:6px 16px 8px;scroll-padding-inline:16px;gap:7px}
.tabs::-webkit-scrollbar{display:none}
.tabs>:first-child{margin-left:auto}.tabs>:last-child{margin-right:auto}
.tab{flex:none;width:auto;height:44px;padding:0 15px 0 12px;gap:7px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:700;white-space:nowrap}
.tab.on{transform:scale(1.04)}
.tab .tone{top:-3px;right:-2px}
/* the header: whose numbers these are, and how far through that platform's cards you are */
.c-plat{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px -4px 12px;font-size:13px;line-height:1.2;color:var(--card-text)}
.c-plat-name{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 10px 5px 8px;border-radius:999px;background:color-mix(in srgb,var(--p-bar) 16%,var(--chip-solid))}
.c-plat-name svg{flex:none;color:var(--p-bar)}
.c-plat-name b{color:var(--ink);white-space:nowrap}
.c-plat-name small{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-count{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.wcard-body:not(.still) .c-plat-name{animation:pop .4s cubic-bezier(.3,1.5,.5,1) both}
.tabs.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.tabs.more-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
.tabs.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
/* ---------- moving to another platform: the whole card moves (see switchDeck in deck.js), and the screen takes on that platform's colour ---------- */
.wcard.deck-old{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none}
/* each platform's one colour (the same as its cards'), for the wash behind the week, the list beside it, and its badge on Accounts */
:root[data-deck="all"],[data-platform="all"]{--plat:#F2694A}
:root[data-deck="tiktok"],[data-platform="tiktok"]{--plat:#E5395F}
:root[data-deck="youtube"],[data-platform="youtube"]{--plat:#3F7FD1}
:root[data-deck="instagram"],[data-platform="instagram"]{--plat:#7B63C9}
:root[data-deck="website"],[data-platform="website"]{--plat:#2E9A6E}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"])[data-deck="all"],:root:not([data-theme="light"]) [data-platform="all"]{--plat:#FF8A6B}
:root:not([data-theme="light"])[data-deck="tiktok"],:root:not([data-theme="light"]) [data-platform="tiktok"]{--plat:#FF7A98}
:root:not([data-theme="light"])[data-deck="youtube"],:root:not([data-theme="light"]) [data-platform="youtube"]{--plat:#6FA8F5}
:root:not([data-theme="light"])[data-deck="instagram"],:root:not([data-theme="light"]) [data-platform="instagram"]{--plat:#B69BFF}
:root:not([data-theme="light"])[data-deck="website"],:root:not([data-theme="light"]) [data-platform="website"]{--plat:#5FD3A2}
}
:root[data-theme="dark"][data-deck="all"],:root[data-theme="dark"] [data-platform="all"]{--plat:#FF8A6B}
:root[data-theme="dark"][data-deck="tiktok"],:root[data-theme="dark"] [data-platform="tiktok"]{--plat:#FF7A98}
:root[data-theme="dark"][data-deck="youtube"],:root[data-theme="dark"] [data-platform="youtube"]{--plat:#6FA8F5}
:root[data-theme="dark"][data-deck="instagram"],:root[data-theme="dark"] [data-platform="instagram"]{--plat:#B69BFF}
:root[data-theme="dark"][data-deck="website"],:root[data-theme="dark"] [data-platform="website"]{--plat:#5FD3A2}
/* the wash: a lighter shade of the platform's colour, over the landscape and under everything else, only while your week is on screen.
   The colour is on the layer's ::before, never the fixed layer itself: iPhone Safari (iOS 26) paints the strip behind the clock and
   battery with the background colour of a pinned element at the top, at full strength, which made a harsh orange bar. So the
   layer has no background, Safari uses the page's own sky up there, and the wash fades in from the top to meet it */
:root[data-deck="all"]{--wash:#FF8A6B}:root[data-deck="tiktok"]{--wash:#FF7A98}:root[data-deck="youtube"]{--wash:#6FA8F5}:root[data-deck="instagram"]{--wash:#B69BFF}:root[data-deck="website"]{--wash:#5FD3A2}
.tint{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.tint::before{content:"";position:absolute;inset:0;background-color:var(--wash,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%);mask-image:linear-gradient(to bottom,transparent,#000 28%);transition:background-color .8s ease}
body[data-screen="home"]:has(#s-home[data-tab="week"] #week:not([hidden])) .tint,body.demo .tint{opacity:.17}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-screen="home"]:has(#s-home[data-tab="week"] #week:not([hidden])) .tint,:root:not([data-theme="light"]) body.demo .tint{opacity:.12}}
:root[data-theme="dark"] body[data-screen="home"]:has(#s-home[data-tab="week"] #week:not([hidden])) .tint,:root[data-theme="dark"] body.demo .tint{opacity:.12}
/* the cards peeking out under the deck carry the colour too */
.deck-stack span{background:color-mix(in srgb,var(--accent,var(--card)) 28%,var(--card));transition:background-color .6s ease}
/* ---------- on a computer: a sidebar, and your week laid out side by side ---------- */
.tabbar .tb-brand,.tb-me,.week-side,.deck-nav .on-desk{display:none}
@media (min-width:1000px){
  :root{--side:236px}
  body[data-screen="home"] main{max-width:none;margin:0;padding:40px 40px 56px calc(var(--side) + 48px)}
  #s-home{max-width:980px;margin:0 auto}
  #s-home header.top{display:none}
  /* the tab bar becomes a sidebar down the left: the logo, the three tabs, and who's signed in */
  .tabbar{top:16px;bottom:16px;left:16px;right:auto;width:var(--side);max-width:none;margin:0;flex-direction:column;gap:4px;padding:24px 12px 12px;border-radius:28px}
  .tabbar .tb-brand{display:flex;justify-content:flex-start;margin:0 0 24px;padding:0 14px}
  .tabbar .tb-brand .logo{width:122px}
  .tb{flex:none;flex-direction:row;justify-content:flex-start;gap:13px;min-height:50px;padding:0 16px;border-radius:17px;font-size:15.5px}
  .tb[aria-current="page"] svg{transform:none}
  .tb:hover:not([aria-current]){background:color-mix(in srgb,var(--bubble) 60%,transparent);color:var(--ink)}
  .tb-me{display:flex;align-items:center;gap:12px;margin-top:auto;padding:10px;border:0;border-radius:18px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-width:0;transition:background .2s ease}
  .tb-me:hover{background:color-mix(in srgb,var(--bubble) 60%,transparent)}
  .tb-me:focus-visible{outline:3px solid var(--dot);outline-offset:-3px}
  .tb-me .me{flex:none;width:40px;height:40px;font-size:16px;cursor:inherit;box-shadow:none}
  .tb-me-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
  .tb-me-text b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-me-text small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-screen="home"] .toast{bottom:28px;left:calc(var(--side) + 32px)}
  .panel-title{font-size:34px;margin-bottom:6px}
  .panel-lede{max-width:620px}
  #intro{max-width:560px}
  /* your week: the title and the week you're on at the top, then the card and every account side by side */
  .week{margin-top:0}
  .week-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 22px}
  .week-title{text-align:left;font-size:34px;margin:0}
  .week-when{margin:0 0 0 -4px;justify-content:flex-start}
  .back-now{margin:0}
  .week-body{display:grid;grid-template-columns:minmax(0,540px) minmax(300px,1fr);gap:36px;align-items:start}
  .week-main .tabs{display:none}
  .deck-nav .on-phone{display:none}
  .deck-nav .on-desk{display:flex}
  .deck-nav{margin-top:28px}
  .c-title,.c-body{max-width:380px}
  .chips{max-width:400px}
  /* the wider card shows its whole picture (a little taller, so the sun isn't cut in half), with the words kept above it */
  .wcard{min-height:560px}
  .wcard-scene,.scene-art{height:190px}
  .wcard-body{padding-bottom:192px}
  /* the cards answer the mouse: arrows appear on the side you're pointing at */
  .tap::after{content:"";position:absolute;top:50%;width:11px;height:11px;margin-top:-6px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);opacity:0;transition:opacity .2s ease,transform .2s ease}
  .tap-prev::after{left:22px;transform:rotate(135deg)}
  .tap-next::after{right:22px;transform:rotate(-45deg)}
  .tap:hover::after{opacity:.55}
  .tap-prev:hover::after{transform:translateX(-3px) rotate(135deg)}
  .tap-next:hover::after{transform:translateX(3px) rotate(-45deg)}
  /* every account at a glance; the one you're reading lit up in its colour, with how far through it you are */
  .week-col{position:sticky;top:40px;display:flex;flex-direction:column;gap:16px}
  .week-side{display:block;padding:20px 12px 14px;border-radius:26px;background:var(--card);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .ws-head{margin:0 10px 12px;font-size:15px;color:var(--muted)}
  .ws-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
  .ws-row{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:center;padding:11px 12px;border:0;border-radius:18px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .25s ease,box-shadow .25s ease}
  .ws-row:hover{background:color-mix(in srgb,var(--plat) 8%,transparent)}
  .ws-row:focus-visible{outline:3px solid var(--dot);outline-offset:-3px}
  .ws-row.on{background:color-mix(in srgb,var(--plat) 13%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--plat) 60%,transparent)}
  .ws-ico{grid-row:1/span 2;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--plat) 16%,transparent);color:var(--plat);transition:background .25s ease,color .25s ease}
  .ws-row.on .ws-ico{background:var(--plat);color:#FFFFFF}
  .ws-name{min-width:0;display:flex;align-items:baseline;gap:6px;font-size:15.5px;white-space:nowrap}
  .ws-name b{overflow:hidden;text-overflow:ellipsis}
  .ws-name small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  .ws-n{grid-column:3;grid-row:1;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
  .ws-mood{grid-column:2/span 2;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ws-tone{flex:none;width:8px;height:8px;border-radius:50%;background:#A9A5B3}
  .ws-tone.t-great{background:#3BA776}.ws-tone.t-care{background:#F2694A}
  .ws-body{grid-column:2/span 2;margin-top:3px;font-size:13px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ws-bar{grid-column:1/-1;display:block;height:4px;margin-top:10px;border-radius:99px;background:color-mix(in srgb,var(--plat) 18%,transparent);overflow:hidden;opacity:0;transition:opacity .25s ease}
  .ws-bar span{display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:var(--plat);transition:width .45s cubic-bezier(.3,1.2,.4,1)}
  .ws-row.on .ws-bar{opacity:1}
  .ws-keys{margin:12px 10px 2px;font-size:12.5px;color:var(--muted)}
  kbd{display:inline-block;min-width:22px;padding:1px 6px;border-radius:7px;background:var(--bubble);color:var(--ink);font:inherit;font-weight:700;text-align:center;box-shadow:inset 0 -1.5px 0 var(--line)}
  /* accounts: one tidy column; settings: two */
  #p-accounts .card{max-width:640px}
  #p-settings{columns:2;column-gap:20px}
  #p-settings .panel-title,#p-settings .legal{column-span:all}
  #p-settings .card{break-inside:avoid;margin:0 0 20px}
  #p-settings .panel-title{margin-bottom:18px}
}
@media (min-width:1000px) and (prefers-reduced-motion: reduce){.tap::after{transition:none}}
/* a platform's badge on Accounts: its icon, in its colour */
.badge:not(.photo){background:var(--plat,var(--ink));color:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .badge:not(.photo){color:#1C1A22}}
:root[data-theme="dark"] .badge:not(.photo){color:#1C1A22}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ws-row.on .ws-ico{color:#1C1A22}}
:root[data-theme="dark"] .ws-row.on .ws-ico{color:#1C1A22}
/* ---------- the plain-English cards: when to post, best length, how people find you, your audience, one that went quiet ---------- */
.wcard[data-kind="bars"] .c-main{gap:10px;justify-content:flex-start;padding-top:14px}
.hbars{width:100%;max-width:320px;display:flex;flex-direction:column;gap:7px;text-align:left}
.hbar{display:grid;grid-template-columns:minmax(66px,max-content) 1fr auto;align-items:center;gap:9px;font-size:13.5px;line-height:1.2}
.hbar .lab{font-weight:700;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.hbar .track{height:11px;border-radius:99px;background:var(--p-barSoft);overflow:hidden}
.hbar .fill{display:block;width:var(--w);height:100%;border-radius:inherit;background:color-mix(in srgb,var(--p-bar) 45%,var(--p-barSoft))}
.hbar.top .fill{background:var(--p-bar)}
.hbar .val{font-size:12.5px;color:var(--card-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar.top .val{font-weight:700;color:var(--ink)}
.wcard-body:not(.still) .hbar{animation:itemIn .42s cubic-bezier(.3,1.3,.5,1) var(--d) both}
.wcard-body:not(.still) .hbar .fill{animation:grow .8s cubic-bezier(.2,.8,.2,1) calc(var(--d) + .15s) both}
@keyframes grow{from{width:0}}
.c-lead{margin:0 0 2px;font-size:15.5px;line-height:1.45;font-weight:700;max-width:320px}
.wcard-body:not(.still) .c-lead{animation:fadeUp .5s ease .1s both}
@media (min-width:1000px){.hbars,.c-lead{max-width:400px}}
@media (prefers-reduced-motion: reduce){.hbar,.hbar .fill,.c-lead{animation:none!important}}
/* ---------- the strip behind the phone's clock follows light and dark straight away ----------
   iPhone Safari (iOS 26) colours that strip from a pinned element's background at the top, so this one says exactly which colour:
   the sky's, updated the moment the colours change. And the logo's letters take their colour straight from the colours too
   (not through currentColor, which Safari can leave on the old mode after a switch) */
.sky-top{position:fixed;left:0;right:0;top:0;height:max(2px,env(safe-area-inset-top,0px));z-index:0;pointer-events:none;background-color:var(--sky)}
.logo > g{fill:var(--ink)}
/* ---------- the countdown to the next summary: its own place on the screen, not a card ---------- */
.countdown{position:relative;display:flex;align-items:center;gap:16px;margin:22px 0 4px;padding:18px 18px 18px 16px;border-radius:26px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--dot) 13%,var(--card)) 0%,var(--card) 58%,color-mix(in srgb,#FFC46B 16%,var(--card)) 100%);
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rise .6s cubic-bezier(.2,.7,.2,1) .15s both}
.countdown::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#FFC46B 30%,transparent),transparent 70%);pointer-events:none}
.cd-ring{position:relative;flex:none;width:86px;height:86px}
.cd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cd-ring circle{fill:none;stroke-width:7}
.cd-track{stroke:color-mix(in srgb,var(--dot) 16%,transparent)}
.cd-fill{stroke:var(--dot);stroke-linecap:round;stroke-dasharray:var(--done) 100;animation:ringFill 1.2s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes ringFill{from{stroke-dasharray:0 100}}
.cd-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cd-num b{font-size:29px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd-num small{margin-top:3px;font-size:12px;font-weight:700;color:var(--muted)}
.cd-text{position:relative;min-width:0;flex:1}
.cd-kicker{margin:0;font-size:13px;font-weight:700;color:var(--coral)}
.cd-when{margin:1px 0 9px;font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.cd-days{margin:0 0 9px;gap:6px}
.countdown .days .d{width:27px;height:27px;font-size:11.5px;border-color:color-mix(in srgb,var(--dot) 35%,transparent);color:var(--muted)}
.countdown .days .d.done{background:var(--dot);border-color:var(--dot);color:#FFFFFF}
.countdown .days .d.today{border-color:var(--dot);color:var(--ink);box-shadow:0 0 0 0 color-mix(in srgb,var(--dot) 45%,transparent);animation:itemIn .38s cubic-bezier(.3,1.5,.5,1) var(--d) both,today 2.4s ease-in-out 1s infinite}
.countdown .days .d svg{width:13px;height:13px}
@keyframes today{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dot) 45%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--dot) 0%,transparent)}}
.cd-sub{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
@media (max-width:360px){.countdown{gap:12px;padding:16px 14px}.cd-ring{width:72px;height:72px}.countdown .days .d{width:24px;height:24px}}
@media (min-width:1000px){.countdown{margin:0;flex-direction:column;align-items:flex-start;text-align:left}.countdown .cd-ring{width:78px;height:78px}}
@media (prefers-reduced-motion: reduce){.countdown,.cd-fill,.countdown .days .d{animation:none!important}}
/* your picture: an animal you've chosen, or your initial */
.me.has-av{background:none;overflow:hidden}
.me.has-av > span{display:block;width:100%;height:100%}
.me.has-av svg,.me svg{display:block;width:100%;height:100%;border-radius:50%}
.av-set{margin:16px 0 14px;padding:0;border:0;min-width:0}
.av-pick{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px}
.av-opt{position:relative;cursor:pointer}
.av-opt input{position:absolute;opacity:0;pointer-events:none}
.av-opt .me{width:46px;height:46px;font-size:18px;cursor:pointer;box-shadow:none;outline:3px solid transparent;outline-offset:2px;transition:transform .2s cubic-bezier(.3,1.6,.5,1),outline-color .2s ease}
.av-opt:hover .me{transform:scale(1.06)}
.av-opt input:checked + .me{outline-color:var(--dot);transform:scale(1.08)}
.av-opt input:focus-visible + .me{outline-color:var(--ink)}
/* your posting rhythm: a section of its own under the cards, a row of 12 weeks for each account */
.rhythm{position:relative;margin:16px 0 4px;padding:18px 18px 14px;border-radius:26px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rise .6s cubic-bezier(.2,.7,.2,1) .25s both}
.rh-kicker{margin:0;font-size:13px;font-weight:700;color:var(--coral)}
.rh-title{margin:1px 0 12px;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.rh-row{padding:12px 0;border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.rh-name{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:14.5px;color:var(--plat)}
.rh-name b{color:var(--ink)}
.rh-name small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-weeks{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:end;height:46px}
.rh-w{position:relative;height:100%;border-radius:7px;background:color-mix(in srgb,var(--plat) 11%,transparent)}
.rh-w i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * 100%);border-radius:7px;background:var(--plat);transform-origin:bottom;animation:rhGrow .7s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--d)) both}
.rh-w.none{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 9%,transparent) 0 3px,transparent 3px 7px)}
.rh-w.now{box-shadow:0 0 0 2px color-mix(in srgb,var(--plat) 45%,transparent)}
@keyframes rhGrow{from{transform:scaleY(0)}}
.rh-line{margin:9px 0 0;font-size:14px;line-height:1.45;color:var(--ink)}
.lv-intro,.lv-wait{margin:0 0 12px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.history .mini{margin-bottom:4px}
.lv-months{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}
.lv-m{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.lv-m b{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.lv-m.top b{color:var(--ink)}
.lv-bar{position:relative;display:block;width:100%;height:64px;border-radius:9px;background:color-mix(in srgb,var(--plat) 9%,transparent);overflow:hidden}
.lv-bar i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * 100%);border-radius:9px;background:color-mix(in srgb,var(--plat) 45%,transparent);transform-origin:bottom;animation:rhGrow .7s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--d)) both}
.lv-m.top .lv-bar i{background:var(--plat)}
.lv-m.part .lv-bar i{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--plat) 40%,transparent) 0 4px,color-mix(in srgb,var(--plat) 18%,transparent) 4px 8px)}
.lv-m small{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.lv-q{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.lv-bar i{animation:none!important}}
.rh-ends{display:flex;justify-content:space-between;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--muted)}
@media (min-width:1000px){.rhythm{margin:22px 0 4px;padding:22px 24px 16px}.rh-weeks{height:54px;gap:8px}}
@media (prefers-reduced-motion: reduce){.rhythm,.rh-w i{animation:none!important}}
.c-plat .flip-back{position:static;flex:none;width:36px;height:36px;margin:-6px -2px -6px 0}
/* ---------- your next milestone: a flag, a bar from the last milestone to the next, and one push to get there sooner ---------- */
.m-goal .flag{transform-origin:-5.5px -9px;animation:flutter 2.8s ease-in-out .8s infinite}
@keyframes flutter{0%,100%{transform:none}50%{transform:scaleX(.9) skewY(-4deg)}}
.goal{width:100%;max-width:300px}
.goal-track{position:relative;height:16px;border-radius:999px;background:var(--chip);box-shadow:inset 0 1px 3px #0000001A;overflow:hidden}
.goal-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p);min-width:16px;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--p-bar) 70%,#FFFFFF),var(--p-bar));box-shadow:0 0 14px color-mix(in srgb,var(--p-bar) 55%,transparent)}
.wcard-body:not(.still) .goal-fill{animation:goalGrow 1.1s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes goalGrow{from{width:16px}}
.goal-ends{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--card-text)}
.goal-now{display:flex;justify-content:center;gap:20px;margin:0;font-size:14.5px;color:var(--card-text)}
.goal-now b{color:var(--ink);font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.goal-push{display:flex;align-items:center;gap:10px;max-width:310px;margin:2px 0 0;padding:11px 14px;border-radius:16px;background:var(--chip-solid);color:var(--ink);font-size:14.5px;font-weight:700;line-height:1.35;text-align:left;box-shadow:0 6px 16px -10px color-mix(in srgb,var(--p-bar) 70%,transparent)}
.goal-push svg{flex:none;color:var(--p-bar)}
.wcard-body:not(.still) .goal-push{animation:pop .46s cubic-bezier(.3,1.5,.5,1) .6s both}
@media (min-width:1000px){.goal{max-width:380px}.goal-push{max-width:400px}}
@media (prefers-reduced-motion: reduce){.goal-fill,.goal-push,.m-goal .flag{animation:none!important}}
/* ---------- the platform tabs: one track, with a highlight in the platform's colour that slides to the one you're reading ---------- */
.tabs>:first-child,.tabs>:last-child{margin-left:0;margin-right:0}
.tabs-track{position:relative;flex:none;display:flex;gap:2px;margin:0 auto;padding:4px;border-radius:999px;background:var(--card);box-shadow:0 12px 28px -20px #3A231280,0 0 0 1px var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tabs-track .tab{z-index:1;height:40px;padding:0 14px 0 11px;border:0;background:transparent;color:var(--muted);box-shadow:none;transform:none;transition:color .35s ease,transform .25s cubic-bezier(.3,1.4,.5,1)}
.tabs-track .tab.on{background:transparent;border:0;color:#FFFFFF;box-shadow:none;transform:none}
.tabs-track .tab:not(.on):hover{color:var(--ink)}
.tabs-track .tab:active{transform:scale(.95)}
.tabs-track .tab .tone{top:1px;right:3px;width:11px;height:11px;border:2px solid var(--card)}
.tab-ind{position:absolute;left:0;top:4px;z-index:0;width:0;height:40px;border-radius:999px;background:var(--accent,var(--ink));box-shadow:0 8px 18px -10px var(--accent,#0006),inset 0 1px 0 #FFFFFF40}
.tab-ind.set{transition:transform .55s cubic-bezier(.32,.72,0,1),width .55s cubic-bezier(.32,.72,0,1),background-color .22s ease .16s} /* (the colour changes quickly, mid-slide, so it never passes through a muddy mix of the two) */
/* a card moving off to the side never widens the page (on phones that pushed the bar along the bottom off the screen mid-move) */
main{overflow-x:clip}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabs-track .tab.on{color:#1C1A22}}
:root[data-theme="dark"] .tabs-track .tab.on{color:#1C1A22}
@media (prefers-reduced-motion: reduce){.tab-ind.set{transition:none}}
/* ---------- the cards, refined: a stories-style bar for each card, a quiet label, a fine edge, and one way on to the next platform ---------- */
.c-prog{align-self:stretch;display:flex;gap:4px;margin:-6px -6px 12px}
.c-prog i{position:relative;flex:1;height:3px;border-radius:99px;background:color-mix(in srgb,var(--ink) 11%,transparent);overflow:hidden}
.c-prog i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--p-bar);transform:scaleX(0);transform-origin:left}
.c-prog i.done::after,.c-prog i.on::after{transform:none}
.wcard-body:not(.still) .c-prog i.on::after{animation:segFill .55s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes segFill{from{transform:scaleX(0)}}
.c-count{display:none}
.c-plat{margin-top:0}
.kicker{display:block;padding:0;border-radius:0;background:none;margin:2px 0 4px;font-size:12px;line-height:1.3;letter-spacing:.11em;text-transform:uppercase;color:color-mix(in srgb,var(--p-bar) 72%,var(--ink))}
.kicker::before{display:none}
/* a fine light edge, so each card looks cut from one piece */
.wcard::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,#FFFFFF 55%,transparent),inset 0 1.5px 0 color-mix(in srgb,#FFFFFF 85%,transparent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wcard::before{box-shadow:inset 0 0 0 1px #FFFFFF14,inset 0 1px 0 #FFFFFF26}}
:root[data-theme="dark"] .wcard::before{box-shadow:inset 0 0 0 1px #FFFFFF14,inset 0 1px 0 #FFFFFF26}
/* under the card: the next platform, in its colour (the dots and up and down arrows are gone: the bars on the card show where you are) */
.deck-nav .dots{display:none}
.next-deck{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px 0 20px;border:0;border-radius:999px;background:var(--card);color:var(--muted);font:inherit;font-size:14.5px;cursor:pointer;box-shadow:0 12px 26px -20px #3A231280,0 0 0 1px var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.next-deck b{color:var(--ink)}
.next-deck svg{color:var(--plat,var(--ink));transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.next-deck:hover svg{transform:translateX(3px)}
.next-deck:active{transform:scale(.96)}
.next-deck:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.next-deck:disabled{display:none}
.deck-nav{margin-top:26px}
body.demo .deck-nav{display:none}
@media (prefers-reduced-motion: reduce){.c-prog i.on::after{animation:none!important}}
/* ---------- the welcome screen: a peek at three cards, then the way in on a sheet below ---------- */
#s-welcome .brand{margin:2px 0 0}
#s-welcome .brand .logo{width:min(160px,44vw)}
.w-hero{position:relative;height:clamp(214px,30vh,252px);margin:6px -16px 8px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);transition:height .55s cubic-bezier(.32,.72,0,1),opacity .35s ease,margin .55s cubic-bezier(.32,.72,0,1)}
/* a slow, endless row of sample cards (the row is doubled by app.js, so it loops without a jump) */
.w-track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:14px;padding:0 7px;width:max-content;animation:wRoll 42s linear infinite}
@keyframes wRoll{to{transform:translateX(-50%)}}
.w-card.wcard{position:relative;flex:none;display:block;width:188px;min-height:0;height:178px;padding:13px 14px 15px;border-radius:24px;text-align:left;overflow:hidden;box-shadow:0 22px 40px -28px color-mix(in srgb,var(--p-bar) 75%,transparent),var(--shadow)}
.w-card.wcard:nth-child(odd){rotate:-2.5deg;translate:0 -9px}
.w-card.wcard:nth-child(even){rotate:2.5deg;translate:0 9px}
.w-card.wcard::after{display:none}
.w-hero{animation:rise .8s cubic-bezier(.2,.8,.2,1) .1s both}
.w-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;background:color-mix(in srgb,var(--p-bar) 16%,var(--chip-solid));font-size:11px;font-weight:700;line-height:1.2;color:var(--ink)}
.w-chip svg{color:var(--p-bar)}
.w-eye{margin:10px 0 2px;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:color-mix(in srgb,var(--p-bar) 72%,var(--ink))}
.w-title{margin:0 0 9px;font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.w-title.big{font-size:22px}
.w-body{margin:0 0 9px;font-size:11.5px;line-height:1.4;color:var(--card-text)}
.w-bars{display:flex;flex-direction:column;gap:6px}
.w-cols{display:flex;align-items:flex-end;gap:5px;height:56px}
.w-cols i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--p-barSoft)}
.w-cols i.on{background:var(--p-bar)}
.w-bars span{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:6px;font-size:10.5px;color:var(--card-text)}
.w-bars b{font-weight:700}
.w-bars i{height:7px;border-radius:99px;background:linear-gradient(color-mix(in srgb,var(--p-bar) 45%,var(--p-barSoft)),color-mix(in srgb,var(--p-bar) 45%,var(--p-barSoft))) 0 0/var(--w) 100% no-repeat,var(--p-barSoft)}
.w-bars .on b{color:var(--ink)}
.w-bars .on i{background:linear-gradient(var(--p-bar),var(--p-bar)) 0 0/var(--w) 100% no-repeat,var(--p-barSoft)}
.w-goal{height:10px;border-radius:99px;background:var(--chip);box-shadow:inset 0 1px 2px #0000001A;overflow:hidden}
.w-goal i{display:block;width:var(--p);height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--p-bar) 70%,#FFFFFF),var(--p-bar))}
.w-sub{margin:7px 0 0;font-size:11px;line-height:1.35;color:var(--card-text)}
.w-sub b{color:var(--ink)}
.w-chips{display:flex;flex-wrap:wrap;gap:5px}
.w-chips span{padding:4px 8px;border-radius:999px;font-size:10.5px;font-weight:700;background:var(--chip-solid);color:var(--ink)}
.w-chips span.up{background:color-mix(in srgb,var(--good) 16%,var(--chip-solid));color:var(--good)}
/* the sheet: centred to start with; signing up or logging in folds the cards away to make room, with a way back */
#welcome-card{position:relative;border-radius:30px;padding:26px 22px 22px;box-shadow:0 30px 60px -36px #5A3A1A80,0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#welcome-card[data-mode="choose"]{text-align:center}
#welcome-card[data-mode="choose"] h1{font-size:29px;letter-spacing:-.03em}
.sheet-back{display:none;width:38px;height:38px;margin:-8px 0 10px -6px;border:0;border-radius:50%;background:var(--bubble);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sheet-back:active{transform:scale(.92)}
.sheet-back:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
#welcome-card:not([data-mode="choose"]) .sheet-back{display:flex}
@media (prefers-reduced-motion: reduce){.w-track{animation:none!important;left:50%;transform:translateX(-50%)}.w-hero{transition:none}}
@media (min-width:1000px){
  body[data-screen="welcome"] main{max-width:1080px;padding-top:max(7vh,36px)}
  body[data-screen="welcome"] #s-welcome{display:grid;grid-template-columns:minmax(0,1fr) 430px;column-gap:56px;align-items:center}
  #s-welcome .brand{grid-column:1/-1;justify-content:flex-start;margin:0 0 8px}
  #s-welcome .w-hero{grid-column:1;grid-row:2/span 3;height:330px;margin:0;opacity:1}
  .w-track{gap:20px}
  .w-card.wcard{width:224px;height:212px;padding:16px 17px 18px;border-radius:28px}
  .w-card .w-title{font-size:20px}.w-card .w-title.big{font-size:25px}.w-card .w-body{font-size:13px}
  #welcome-card{grid-column:2;grid-row:2}
  #s-welcome .fine{grid-column:2;grid-row:3}
  #s-welcome .legal{grid-column:2;grid-row:4}
}
/* in Overall's "Try this next", which platform each tip is for */
.tip-on{display:inline-flex;align-items:center;gap:4px;margin:0 0 2px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--plat)}
/* ---------- Today: the first screen (your week in one look, Guru's pick, your next post, your goals) ---------- */
#s-home[data-tab="today"] #p-today,#s-home[data-tab="guru"] #p-guru{display:block;animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.td-eye{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--coral)}
.td-head{margin:-4px 0 16px}
.td-date{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.td-hello{margin:2px 0 0;font-size:clamp(28px,8.4vw,36px);letter-spacing:-.03em;line-height:1.1}
.td-hello span{color:var(--coral)}
.td-hero{position:relative;margin:0 0 14px;padding:22px 22px 20px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--h-a) 34%,transparent),transparent 60%),radial-gradient(120% 90% at 0% 100%,color-mix(in srgb,var(--h-b) 26%,transparent),transparent 62%),var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.td-hero.tone-great{--h-a:#FFC46B;--h-b:#F2694A}.td-hero.tone-okay,.td-hero.tone-new{--h-a:#8FC7FF;--h-b:#FFC46B}.td-hero.tone-care{--h-a:#FF9FB0;--h-b:#F2694A}
.td-hero .mark{width:54px;height:54px;margin:2px 0 8px}
.td-hero h2{margin:0 0 6px;font-size:28px;line-height:1.12;letter-spacing:-.03em}
.td-hero p{margin:0 0 12px;font-size:15.5px;line-height:1.45;color:var(--muted)}
.td-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.td-chips span{padding:6px 11px;border-radius:999px;background:var(--bubble);font-size:13.5px;color:var(--muted)}
.td-chips b{color:var(--ink)}.td-chips .up b{color:var(--good)}.td-chips .down b{color:var(--coral)}
.td-cta{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px 0 20px;border:0;border-radius:999px;background:var(--ink);color:var(--onInk);font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 12px 24px -16px #0009;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.td-cta:active{transform:scale(.96)}
.td-cta:disabled{opacity:.42;cursor:default;box-shadow:none;transform:none}
.td-cta:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.td-cta.light{background:#FFFFFF;color:#1F1D2B}
.td-next{margin:12px 0 0!important;font-size:13px!important}
/* Guru's pick: the one dark card on the screen, so it stands out */
.td-guru{position:relative;margin:0 0 14px;padding:20px 20px 20px;border-radius:30px;overflow:hidden;color:#F6F2EA;
  background:radial-gradient(90% 80% at 100% 0%,#F2694A55,transparent 60%),radial-gradient(90% 90% at 0% 100%,#7B63C955,transparent 60%),#1F1B33;box-shadow:0 24px 50px -30px #1F1B33,0 0 0 1px #FFFFFF14 inset}
.td-guru .td-eye{color:#FFB59F}
.td-guru h2{margin:4px 0 6px;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.td-guru p{margin:0 0 14px;font-size:15px;line-height:1.45;color:#D9D3E8}
.g-plat{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;background:color-mix(in srgb,var(--plat,#888) 22%,transparent);color:var(--plat);font-size:12px;font-weight:700}
.td-guru .g-plat{background:#FFFFFF1A;color:#FFFFFF}
.td-grid{display:grid;gap:14px}
.td-tile{padding:18px 18px 16px;border-radius:26px;background:var(--card);box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.td-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.td-row:first-of-type{border-top:0;padding-top:4px}
.td-row>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.td-row b{font-size:15px}.td-row small{font-size:13.5px;color:var(--muted)}
.td-ico{flex:none;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--plat) 15%,transparent);color:var(--plat)}
.td-foot{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.td-goal{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.td-goal:first-of-type{border-top:0;padding-top:4px}
.td-goal-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.td-goal-top b{flex:1;font-size:15px}
.td-goal-top small{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.td-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--plat) 14%,transparent);overflow:hidden}
.td-bar i{display:block;width:var(--p);min-width:8px;height:100%;border-radius:inherit;background:var(--plat);animation:goalGrow 1.1s cubic-bezier(.2,.8,.2,1) .3s both}
.td-when{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
/* ---------- Guru ---------- */
.g-head{margin:0 0 16px}
.g-head .td-eye{color:var(--coral)}
.g-change{border:0;background:var(--bubble);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer}
.g-change:focus-visible,.g-btn:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.g-card{position:relative;margin:0 0 12px;padding:18px 18px 16px;border-radius:26px;background:var(--card);box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.g-card.big{padding:22px 20px 18px;border-radius:30px;color:#F6F2EA;background:radial-gradient(90% 80% at 100% 0%,#F2694A55,transparent 60%),radial-gradient(90% 90% at 0% 100%,#7B63C955,transparent 60%),#1F1B33;box-shadow:0 24px 50px -30px #1F1B33,0 0 0 1px #FFFFFF14 inset}
.g-card.big .g-plat{background:#FFFFFF1A;color:#FFFFFF}
.g-eye{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#FFB59F}
.g-card h2{margin:10px 0 6px;font-size:19px;line-height:1.25;letter-spacing:-.015em}
.g-card.big h2{font-size:24px;letter-spacing:-.02em}
.g-card p{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--muted)}
.g-card.big p{color:#D9D3E8}
.g-card.tried{opacity:.7}
.g-why{margin:0 0 12px;font-size:14px}
.g-why summary{cursor:pointer;font-weight:700;color:var(--coral);list-style:none}
.g-why summary::-webkit-details-marker{display:none}
.g-why summary::after{content:" ›";display:inline-block;transition:transform .2s ease}
.g-why[open] summary::after{transform:rotate(90deg)}
.g-card.big .g-why summary{color:#FFB59F}
.g-why p{margin:8px 0 0!important;font-size:14px!important}
.g-src{font-size:12.5px!important}
.g-src a{color:inherit}
.g-acts{display:flex;gap:8px;flex-wrap:wrap}
.g-btn{min-height:40px;padding:0 15px;border:0;border-radius:999px;background:var(--ink);color:var(--onInk);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.g-btn.soft{background:var(--bubble);color:var(--ink)}
.g-btn.on{background:var(--good);color:#FFFFFF}
.g-card.big .g-btn{background:#FFFFFF;color:#1F1D2B}
.g-card.big .g-btn.soft{background:#FFFFFF1F;color:#FFFFFF}
.g-card.big .g-btn.on{background:var(--good);color:#FFFFFF}
.g-more{margin:22px 4px 10px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g-note{margin:14px 6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.g-empty{padding:22px 20px;border-radius:26px;background:var(--card);box-shadow:var(--shadow);margin:0 0 14px}
.g-empty h2{margin:0 0 6px;font-size:21px}.g-empty p{margin:0 0 14px;color:var(--muted)}
.g-ask{margin:18px 0 6px;padding:20px;border-radius:26px;border:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.g-ask h2{margin:2px 0 6px;font-size:20px}.g-ask p{margin:0 0 12px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.g-ask-box{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border-radius:16px;background:var(--bubble);color:var(--muted);font-size:15px}
/* the niche picker, on Guru and in Settings */
.niche-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.niche-opt{position:relative;cursor:pointer}
.niche-opt input{position:absolute;opacity:0;pointer-events:none}
.niche-opt span{display:flex;align-items:center;gap:9px;min-height:52px;padding:8px 12px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1.5px var(--line);font-size:14px;font-weight:700;line-height:1.25;transition:box-shadow .2s ease,background .2s ease,transform .2s cubic-bezier(.3,1.4,.5,1)}
.niche-opt i{font-style:normal;font-size:20px}
.niche-opt input:checked+span{box-shadow:0 0 0 2.5px var(--dot);background:color-mix(in srgb,var(--dot) 10%,var(--card))}
.niche-opt input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.niche-opt:active span{transform:scale(.97)}
.niche-set{margin:0 0 16px;padding:0;border:0;min-width:0}
#me-card .niche-opt span{background:var(--bubble);box-shadow:none;min-height:46px}
#me-card .niche-opt input:checked+span{box-shadow:0 0 0 2.5px var(--dot)}
/* ---------- Before you post: the check sheet, rising from the bottom (a centred box on a computer) ----------
   (the page behind is dimmed with the sheet's own shadow, not the backdrop: iPhone Safari would paint the strip behind
   the clock in a fixed layer's background colour, at full strength) */
.ck-open{width:100%;justify-content:center;gap:10px;margin:12px 0 2px;padding:0 18px}
body.ck-on{overflow:hidden}
.ck-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:520px;max-height:min(90dvh,820px);margin:0 auto;padding:8px 18px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:28px 28px 0 0;background:var(--sky);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 0 0 100vmax #120E2266,0 -24px 50px -30px #000}
.ck-sheet::backdrop{background:transparent}
.ck-sheet[open]{animation:ckUp .44s cubic-bezier(.32,.72,0,1) both}
@keyframes ckUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes ckIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ck-grab{width:40px;height:5px;margin:2px auto 12px;border-radius:99px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.ck-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
.ck-head .td-eye{margin-bottom:4px}
.ck-head h2{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.025em}
.ck-x{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--bubble);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ck-x:active{transform:scale(.92)}
.ck-x:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.ck-accts{display:flex;gap:8px;margin:0 0 14px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}
.ck-acct{position:relative}
.ck-acct input{position:absolute;opacity:0;pointer-events:none}
.ck-acct span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--bubble);color:var(--muted);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.ck-acct span svg{color:var(--plat);transition:color .2s}
.ck-acct input:checked+span{background:var(--plat);color:#FFFFFF}
.ck-acct input:checked+span svg{color:#FFFFFF}
.ck-acct input:focus-visible+span{outline:3px solid var(--dot);outline-offset:2px}
.ck-field{display:block;min-width:0;margin:0 0 12px;padding:0;border:0}
.ck-field>span:not(.ck-dur),.ck-field legend{display:block;margin:0 0 6px;padding:0;font-size:13px;font-weight:700;color:var(--muted)}
.ck-field textarea,.ck-field input{display:block;width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.ck-field textarea{min-height:76px;line-height:1.4;resize:none}
.ck-field textarea::placeholder,.ck-field input::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.ck-field textarea:focus,.ck-field input:focus{border-color:var(--dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 22%,transparent)}
.ck-pair{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
.ck-dur{display:flex;align-items:center;gap:6px}
.ck-dur input{flex:1 1 0;width:0;min-width:0;padding:12px 4px;text-align:center;-moz-appearance:textfield}
.ck-dur input::-webkit-inner-spin-button,.ck-dur input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ck-dur i{font-style:normal;font-size:13px;color:var(--muted)}
.ck-out{margin:4px 0 0}
.ck-verdict{--v:var(--muted);display:block;margin:0 0 10px;padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--v) 12%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v) 28%,transparent)}
.ck-verdict.tone-great{--v:var(--good)}.ck-verdict.tone-okay{--v:var(--dot)}
.ck-verdict b{display:block;font-size:17px;letter-spacing:-.01em}
.ck-verdict small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.ck-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ck-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
.ck-list li>span:last-child{display:flex;flex-direction:column;line-height:1.35}
.ck-list b{font-size:15px}
.ck-list small{margin-top:2px;font-size:13.5px;color:var(--muted)}
.ck-ico{flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--muted);color:var(--onInk)}
.ck-good .ck-ico{background:var(--good)}.ck-idea .ck-ico{background:var(--dot)}.ck-care .ck-ico{background:var(--coral)}
.ck-foot{margin:12px 4px 0;font-size:12px;line-height:1.4;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion: reduce){.ck-sheet[open]{animation:none!important}}
/* ---------- Plus: the small tag on Plus cards and screens, the founding tester line, the plan card, the price questions ---------- */
.plus-tag{display:inline-block;margin-left:8px;padding:2px 7px 1px;border-radius:999px;background:linear-gradient(135deg,#F2694A,#E5395F);color:#FFFFFF;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;vertical-align:2px}
.kicker .plus-tag{margin-left:7px}
.td-tester{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:7px 13px 7px 10px;border:0;border-radius:999px;background:color-mix(in srgb,var(--dot) 13%,var(--card));color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dot) 30%,transparent);-webkit-tap-highlight-color:transparent}
.td-tester svg{color:var(--coral)}
.td-tester:active{transform:scale(.97)}
.td-tester:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.td-ask{margin:0 0 14px}
.td-ask h2{margin:2px 0 6px;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.td-ask p{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--muted)}
.plan-now{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-size:17px}
.plan-now svg{color:var(--coral)}
.plan-text{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--muted)}
.plan-done{margin:0;font-size:14px;font-weight:700;color:var(--good)}
.pq-lede{margin:-4px 0 14px;font-size:15px;line-height:1.5;color:var(--muted)}
.pq{display:grid;gap:12px}
.pq-q{display:block;padding:14px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
.pq-q>span:first-child{display:block;margin:0 0 10px;font-size:15px;font-weight:700;line-height:1.35}
.pq-in{display:flex;align-items:center;gap:8px}
.pq-in i{font-style:normal;font-size:15px;color:var(--muted)}
.pq-in input{width:110px;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--sky);color:var(--ink);font:inherit;font-size:17px;font-weight:700;outline:none;-webkit-appearance:none;appearance:none}
.pq-in input::placeholder{color:color-mix(in srgb,var(--muted) 45%,transparent);font-weight:500}
.pq-in input:focus{border-color:var(--dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 22%,transparent)}
.pq-note{min-height:1.4em;margin:0;font-size:14px;color:var(--coral)}
.pq-note:empty{min-height:0}
.pq-send{justify-content:center;width:100%}
/* ---------- Your plan with payments on: the two prices, and managing Plus ---------- */
.pay-test{margin:0 0 12px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,#E9A23B 18%,var(--card));font-size:13px;line-height:1.4;color:var(--ink)}
.pay-opts{display:grid;gap:10px;margin:2px 0 10px}
.pay-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:14px 16px;border:0;border-radius:18px;background:var(--bubble);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .2s cubic-bezier(.3,1.4,.5,1),box-shadow .2s;-webkit-tap-highlight-color:transparent}
.pay-opt.best{box-shadow:inset 0 0 0 2px var(--dot)}
.pay-opt:active{transform:scale(.98)}
.pay-opt:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.pay-opt.busy{opacity:.6;pointer-events:none}
.po-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--muted)}
.po-tag{padding:2px 8px;border-radius:999px;background:var(--dot);color:#FFFFFF;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em}
.po-tag.save{background:var(--good);color:var(--onInk)}
.po-price{font-size:15px;color:var(--muted)}
.po-price b{font-size:22px;color:var(--ink);letter-spacing:-.02em}
.po-each{font-size:13px;color:var(--muted)}
.pay-small{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.pay-do{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pay-do .link{margin:0;padding:8px 0}
.pay-wait{color:var(--muted)}
/* ---------- Send feedback: the sheet (shares the check sheet's look), the thanks, and the tile on Today ---------- */
.fb-kinds{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0 0 12px;padding:0;border:0}
.fb-kind{--plat:var(--dot)}
.fb-field textarea{min-height:140px}
.fb-done{padding:6px 4px 8px;text-align:center}
.fb-done .mark{width:62px;height:62px;margin:0 auto 10px}
.fb-done h2{margin:0 0 6px;font-size:24px;letter-spacing:-.025em}
.fb-done p{margin:0 auto 18px;max-width:30ch;font-size:15px;line-height:1.5;color:var(--muted)}
.td-tell-do{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.td-later{min-height:44px;padding:0 6px;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.td-later:focus-visible{outline:3px solid var(--dot);outline-offset:2px;border-radius:8px}
@media (min-width:1000px){
  #p-today{max-width:980px}
  .td-grid{grid-template-columns:1fr 1fr}
  .td-hero,.td-guru{display:block}
  #p-today .td-hero{padding:28px 30px}
  #p-guru{max-width:720px}
  .niche-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #me-card .niche-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck-sheet{inset:0;max-height:min(86vh,820px);margin:auto;padding:22px 26px 24px;border-radius:28px}
  .ck-sheet[open]{animation:ckIn .28s cubic-bezier(.2,.8,.2,1) both}
  .ck-grab{display:none}
  .lv-months{max-width:560px}
}
@media (prefers-reduced-motion: reduce){.td-bar i,.g-card{animation:none!important}}
/* five tabs along the bottom on a phone: the names stay on one line */
@media (max-width:999px){.tb{padding:6px 2px;font-size:11.5px;letter-spacing:-.01em;white-space:nowrap}}