/* Love Life Magic — member app.
   The one bold idea: a living Himalayan sky. The hero landscape and the whole interface follow the real time of day.
   8 AM–8 PM (Value Creation) is bright porcelain and ink; 8 PM–8 AM (Wellbeing) is a calm night with gold.
   Everything else stays quiet: one reading serif, one clean sans, generous space, ink buttons, thin rules. */
:root{
  --bg:#F2F4F7; --surface:#FFFFFF; --raise:#FAFBFC; --ink:#18202F; --muted:#5C6577; --faint:#8A92A3; --line:#E3E7EE;
  --gold:#B27A12; --gold-soft:#F6EBD3;
  --btn:#18202F; --btn-ink:#FFFFFF;
  --basics:#C2700E; --awareness:#0D8077; --leadership:#B33A62; --acceptance:#6A4FC4;
  --basics-soft:#FBF1E2; --awareness-soft:#E2F2F0; --leadership-soft:#F9E7EE; --acceptance-soft:#EEEAFB;
  --good:#1D7F51; --good-soft:#E3F3EA; --bad:#B42318; --bad-soft:#FDECEA;
  --shadow:0 1px 1px rgba(16,24,40,.04),0 12px 32px -14px rgba(16,24,40,.18);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0E1324; --surface:#151B30; --raise:#121831; --ink:#ECEEF5; --muted:#A3ABBF; --faint:#7B849B; --line:#252D47;
  --gold:#E4B866; --gold-soft:#2D2617;
  --btn:#E4B866; --btn-ink:#16120A;
  --basics:#EFA55A; --awareness:#55C9BE; --leadership:#F28AAE; --acceptance:#AD98FF;
  --basics-soft:#2B2113; --awareness-soft:#112B2B; --leadership-soft:#2E1724; --acceptance-soft:#221C40;
  --good:#5CCB92; --good-soft:#12291F; --bad:#FF8F85; --bad-soft:#341716;
  --shadow:0 1px 1px rgba(0,0,0,.25),0 14px 34px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);transition:background-color .6s ease,color .6s ease;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a{color:inherit}
svg{width:1em;height:1em;flex:none}
.boot{text-align:center;margin-top:30vh;color:var(--muted)}
.wrap{max-width:680px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
h1,h2{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(40px,10vw,60px);line-height:1.02}
h2{font-size:26px;line-height:1.15}
h3{font-size:18px;font-weight:600;margin:0;line-height:1.3}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:14px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}

/* ---------- The living sky ---------- */
:root{--sky1:#9FCDEB;--sky2:#EAF4FA;--r1:#B9CAD9;--r2:#97AEC4;--hero-ink:#18202F;--hero-muted:#3E4A5E;--star:0;--orb-x:50%;--orb-y:30%}
:root[data-sky="dusk"]{--sky1:#34306A;--sky2:#F0A46A;--r1:#6E5D8E;--r2:#4D4274;--hero-ink:#FFF7EC;--hero-muted:#F3DCCB;--star:.25}
:root[data-sky="dawn"]{--sky1:#1E2652;--sky2:#E39A7C;--r1:#3E3E6A;--r2:#2A2C55;--hero-ink:#FFF4EA;--hero-muted:#E8D2D0;--star:.45}
:root[data-sky="night"]{--sky1:#070C24;--sky2:#1E2A57;--r1:#1C2549;--r2:#141B3A;--hero-ink:#F4F1FF;--hero-muted:#C2C3E0;--star:1}
.hero{position:relative;overflow:hidden;color:var(--hero-ink);isolation:isolate}
.sky{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%);transition:background .8s ease}
.sky .stars{position:absolute;inset:0;opacity:var(--star);transition:opacity 1s ease;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 44%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 55% 28%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 71% 10%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 86% 34%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 7% 56%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 47% 50%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 64% 46%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 93% 58%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 64%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 79% 22%,#fff 50%,transparent 51%)}
.sky .orb{position:absolute;left:var(--orb-x);top:var(--orb-y);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFF6D8,#F6C35B 60%,#E59A2E);box-shadow:0 0 0 14px rgba(255,214,120,.16),0 0 80px 20px rgba(255,196,90,.35);
  animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
:root[data-sky="night"] .sky .orb,:root[data-sky="dawn"] .sky .orb{width:46px;height:46px;margin:-23px 0 0 -23px;
  background:radial-gradient(circle at 62% 40%,transparent 0 46%,#F1EEDF 47%) ,radial-gradient(circle at 40% 40%,#FBF9EF,#DCD8C6);
  -webkit-mask:radial-gradient(circle at 70% 36%,transparent 0 44%,#000 46%);mask:radial-gradient(circle at 70% 36%,transparent 0 44%,#000 46%);
  box-shadow:0 0 50px 8px rgba(220,220,255,.22)}
@keyframes rise{from{transform:translateY(90px);opacity:0}to{transform:none;opacity:1}}
.sky .range{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:150px}
.range .r1{fill:var(--r1);transition:fill .8s ease}
.range .r2{fill:var(--r2);transition:fill .8s ease}
.range .r3{fill:var(--bg);transition:fill .6s ease}
.heroIn{position:relative;padding-top:calc(30px + env(safe-area-inset-top));padding-bottom:150px;display:flex;flex-direction:column;gap:10px}
.kicker{font-size:15px;font-weight:500;color:var(--hero-muted)}
.hero h1{color:var(--hero-ink);margin-top:6px}
.dayno{display:block;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--hero-muted);margin-bottom:4px}
.hero .law{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;color:var(--hero-ink);opacity:.9;max-width:30ch;margin-top:4px}
.hero .meta{font-size:15px;color:var(--hero-muted);margin-top:8px}
.unlock{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;text-decoration:none;font-size:14px;font-weight:600;
  padding:8px 14px 8px 10px;border-radius:999px;background:color-mix(in srgb,var(--hero-ink) 12%,transparent);color:var(--hero-ink);
  border:1px solid color-mix(in srgb,var(--hero-ink) 18%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.unlock .spark{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#FFE6A3,#E9A93A);box-shadow:0 0 12px rgba(240,180,70,.7)}
.trail{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;margin-top:14px;max-width:440px}
.trail i{height:4px;border-radius:2px;background:color-mix(in srgb,var(--hero-ink) 20%,transparent)}
.trail i.done{background:var(--c)}
.trail i.now{background:var(--hero-ink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--hero-muted);margin-top:4px}
.legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:6px}

main{padding:0 0 24px;margin-top:-56px;position:relative}

/* ---------- Floating tab bar ---------- */
.tabbar{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;gap:2px;
  width:min(440px,calc(100% - 24px));padding:6px;border-radius:22px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(10,15,35,.45)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--faint);
  font-size:12px;font-weight:600;padding:8px 4px;border-radius:16px;min-height:54px}
.tabbar a svg{font-size:22px}
.tabbar a[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.basics{--c:var(--basics);--soft:var(--basics-soft)}
.awareness{--c:var(--awareness);--soft:var(--awareness-soft)}
.leadership{--c:var(--leadership);--soft:var(--leadership-soft)}
.acceptance{--c:var(--acceptance);--soft:var(--acceptance-soft)}
.neutral{--c:var(--gold);--soft:var(--gold-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--c,var(--muted))}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted))}

/* Morning / Evening headers */
.phase{display:flex;align-items:baseline;gap:12px;margin:22px 4px 2px;flex-wrap:wrap}
.phase .picon{align-self:center;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--gold);background:var(--gold-soft);font-size:17px}
.phase h2{font-size:28px}
.phase .muted{font-size:14px}

/* The open step */
.step{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px 22px 24px;box-shadow:var(--shadow);scroll-margin-top:16px}
.stephead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:16px}
.stephead h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;padding:6px 11px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap}
.chip.good{background:var(--good-soft);color:var(--good)}

/* Finished and upcoming steps: quiet rows */
.steprow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 6px;min-height:62px;scroll-margin-top:16px}
button.steprow{cursor:pointer;border-radius:0}
button.steprow:hover .stxt b{text-decoration:underline;text-underline-offset:3px}
.steprow .sdot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px}
.steprow.done .sdot{background:var(--good);color:#fff}
.steprow.locked{color:var(--faint)}
.steprow.locked .sdot{border:1px solid var(--line);color:var(--faint);font-size:14px}
.steprow .stxt{display:flex;flex-direction:column;min-width:0}
.steprow .stxt small{font-size:13px;font-weight:600;color:var(--c)}
.steprow.locked .stxt small{color:var(--faint)}
.steprow .stxt b{font-weight:500;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steprow .sgo{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:500;color:var(--muted)}

/* Reading */
.article h2{font-size:30px;margin:6px 0 14px}
.article p{margin:0 0 16px;font-family:var(--serif);font-size:20px;line-height:1.7;max-width:62ch}
.quote{font-family:var(--serif);font-size:24px;line-height:1.35}
.prev{background:var(--raise);border-radius:14px;padding:12px 16px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line)}
.prev b{display:block;font-size:13px;color:var(--muted);margin-bottom:2px;font-weight:600}

/* Forms */
label.f{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:17px;line-height:1.4}
.src{font-size:13px;font-weight:500;color:var(--faint);font-style:italic;font-family:var(--serif)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],textarea,select{
  width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--line);background:var(--raise);font-weight:400;font-size:16px;min-width:0;min-height:50px;
  transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{border-color:var(--c,var(--gold));background:var(--surface);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--gold)) 16%,transparent)}
textarea{resize:vertical;min-height:120px;line-height:1.6;font-family:var(--serif);font-size:18px}
textarea.letter{min-height:360px;font-size:19px}
.counter{font-size:13px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.counter.ok{color:var(--good);font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  cursor:pointer;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);min-height:50px;line-height:1.2;transition:transform .15s ease,filter .2s}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn.primary:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none;transform:none}
.btn.sm{padding:9px 16px;font-size:15px;min-height:42px}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px}
.tick{font-size:14px;font-weight:600;color:var(--good)}

/* Questions */
.q{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid var(--line)}
.q:first-child{border-top:0;padding-top:0}
.q .qt{font-weight:600;font-size:18px;line-height:1.4}
.q .src{margin-left:8px}
.opt{display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  cursor:pointer;width:100%;font-size:16px;min-height:54px;transition:border-color .15s,background .15s}
.opt::before{content:"";width:20px;height:20px;border-radius:50%;border:1.5px solid var(--faint);flex:none}
.opt b{display:none}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--c);background:var(--soft)}
.opt[aria-pressed="true"]::before{border-color:var(--c);background:radial-gradient(circle,var(--c) 42%,transparent 47%)}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.right::before{border-color:var(--good);background:radial-gradient(circle,var(--good) 42%,transparent 47%)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong::before{border-color:var(--bad)}
.opt:disabled{cursor:default;color:var(--ink)}
.insight{font-family:var(--serif);font-size:18px;line-height:1.5;padding:4px 0 4px 16px;border-left:2px solid var(--c);color:var(--ink)}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
input[type=range]{width:100%;accent-color:var(--c);min-height:32px}
.listin{display:flex;flex-direction:column;gap:8px}
.listin .li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center}
.listin .li span{font-family:var(--serif);font-style:italic;color:var(--faint);text-align:right;font-size:18px}
.listin input{font-family:var(--serif);font-size:18px}

/* Reveal */
.reveal .answer{font-family:var(--serif);font-size:30px;line-height:1.2;margin-top:2px;color:var(--ink)}

/* Rituals */
.ritual{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.ritual:first-child{border-top:0;padding-top:0}
.ritual .ck{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--faint);display:grid;place-items:center;font-size:14px;font-weight:700;color:transparent}
.ritual.ok .ck{background:var(--good);border-color:var(--good);color:#fff}
.ritual .rn{font-weight:600;font-size:17px}
.ritual .rd{font-size:14px;color:var(--muted)}
.ritual .ctl{display:flex;gap:6px;align-items:center}
.ritual .ctl input{width:92px;min-height:42px;padding:8px 12px;font-family:var(--sans);font-size:16px}
.affirmbox{border-radius:22px;padding:24px 18px;text-align:center;color:var(--hero-ink);position:relative;overflow:hidden;
  background:linear-gradient(170deg,var(--sky1),var(--sky2))}
.affirmbox .eyebrow{color:var(--hero-muted)} .affirmbox .eyebrow::before{background:var(--hero-muted)}
.affirmbox .muted{color:var(--hero-muted)}
.affirmbox .tick{color:var(--hero-ink)}
.affirmbox .btn.primary{background:var(--hero-ink);border-color:var(--hero-ink);color:var(--sky1)}
.affirmbox input{background:color-mix(in srgb,#fff 85%,transparent);color:#18202F}
.affirm{font-family:var(--serif);font-size:30px;line-height:1.25;text-align:center;padding:12px 6px}
.minday{font-size:14px;padding:12px 16px;border-radius:14px;background:var(--raise);color:var(--muted);border:1px solid var(--line)}

/* Day status */
.status{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:18px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.status b{font-size:17px;font-weight:600}
.status p{font-size:15px;color:var(--muted)}
.status .sicon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:22px;background:var(--gold-soft);color:var(--gold)}
.status.good{background:var(--good-soft);border-color:transparent;box-shadow:none}
.status.good .sicon{background:var(--good);color:#fff;font-size:20px}
.status.wait .sicon{background:var(--acceptance-soft);color:var(--acceptance);font-size:20px}
.prog{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;border-radius:2px;background:var(--gold);transition:width .6s ease}

/* Overlays: Still & Chill timer and day complete, painted with tonight's (or today's) sky */
.overlay{position:fixed;inset:0;z-index:60;color:var(--hero-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));text-align:center;
  background:linear-gradient(180deg,var(--sky1),var(--sky2))}
.overlay .kicker{color:var(--hero-muted)}
.breath{width:min(64vw,280px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative}
.breath::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,226,160,.6),transparent 70%);animation:breathe 8s ease-in-out infinite}
.breath b{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(52px,13vw,72px);font-variant-numeric:tabular-nums}
@keyframes breathe{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1);opacity:1}}
.overlay .btn{background:transparent;color:var(--hero-ink);border-color:color-mix(in srgb,var(--hero-ink) 40%,transparent)}
.overlay p{color:var(--hero-muted);max-width:36ch}
.celebrate h1{color:var(--hero-ink);font-size:clamp(40px,10vw,56px)}
.celebrate .seal{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:40px;color:#3A2A08;
  background:radial-gradient(circle at 38% 32%,#FFF2CC,#EDB54A 70%);box-shadow:0 0 0 12px rgba(240,190,90,.18),0 0 70px 10px rgba(240,190,90,.4);animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.celebrate .pill{font-size:14px;padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--hero-ink) 30%,transparent);color:var(--hero-ink)}
.celebrate .affirm{color:var(--hero-ink)}

/* My life */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:var(--shadow);position:relative}
.tile > b:first-child,.tile > .new + b{font-size:14px;font-weight:600;color:var(--muted)}
.tile.fresh{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.tile .new{position:absolute;top:16px;right:16px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold)}
.tile.lockedtile{background:transparent;border-style:dashed;color:var(--faint);box-shadow:none}
.tile .big{font-family:var(--serif);font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.tile .big .small{font-family:var(--sans)}
.tile ul{margin:0;padding-left:18px;font-family:var(--serif);font-size:18px}
.tile .quote{font-size:21px}
.bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 10px;text-align:center;box-shadow:var(--shadow)}
.kpi b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.05}
.kpi span{font-size:13px;color:var(--muted)}

/* Journey */
.weekh{font-family:var(--serif);font-size:28px;margin:18px 0 2px;display:flex;align-items:center;gap:10px}
.weekh::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dayt{border:1px solid var(--line);border-radius:18px;padding:12px 14px;background:var(--surface);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px;min-width:0;min-height:84px}
.dayt small{font-size:13px;color:var(--muted)}
.dayt b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2}
.dayt.done{background:var(--good-soft);border-color:transparent}
.dayt.now{border-color:var(--ink);box-shadow:var(--shadow)}
.dayt.locked{color:var(--faint);pointer-events:none;background:transparent;border-style:dashed}
.dayt.locked b{color:var(--faint)}

/* Journal */
.entry{border-top:1px solid var(--line);padding:14px 0}
.entry:first-of-type{border-top:0}
.entry .p{font-size:14px;color:var(--muted);font-weight:600}
.entry .a{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--serif);font-size:18px}
.card h3{font-family:var(--serif);font-weight:400;font-size:24px}

/* Sign-in */
.auth{max-width:440px;margin:0 auto}
.err{color:var(--bad);font-size:14px;min-height:1em}
.privacy{background:var(--surface);border-radius:22px;padding:22px;border:1px solid var(--line);box-shadow:var(--shadow)}
.privacy h2{margin-bottom:4px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--raise);padding:4px;border-radius:999px;border:1px solid var(--line)}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg button{border:0;background:none;padding:10px 8px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted);font-size:15px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px -2px rgba(16,24,40,.2)}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:11px 20px;border-radius:999px;font-weight:600;z-index:70;max-width:calc(100% - 32px);text-align:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:12px 8px;border-top:1px solid var(--line);text-align:left;font-size:15px}
th{font-size:13px;color:var(--muted);border-top:0;font-weight:600}
@media (max-width:560px){
  .ritual{grid-template-columns:30px minmax(0,1fr)}
  .ritual .ctl{grid-column:2;flex-wrap:wrap}
  .ritual .ctl input[type=text]{flex:1;min-width:120px;width:auto!important}
  .kpi b{font-size:30px}
  .article p{font-size:19px}
  .step{padding:22px 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Merged steps: sub-parts inside one card */
.sub{padding-top:22px;margin-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.sub:first-child{padding-top:0;margin-top:0;border-top:0}
.sub h4{margin:0;font-size:15px;font-weight:600;color:var(--c)}
.recap{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--raise);border:1px solid var(--line)}
.rlabel{font-size:14px;font-weight:600;color:var(--muted)}
.recap .quote{font-size:21px}
.revealwrap{margin-top:6px;padding:20px;border-radius:18px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line))}
.revealwrap .muted{color:var(--muted)}

/* ---------- Story-card illustrations ---------- */
:root{--il-sky1:#DCEBF6;--il-sky2:#F7F9FB;--il-dusk1:#4D447E;--il-dusk2:#F1A877;--il-hill1:#C9D6E3;--il-hill2:#AEC0D2;--il-ink:#2B3550;--il-dark:#56627C;
  --il-gold:#E6A93A;--il-grey:#9AA6B8;--il-soft:#FFFFFF;--il-rose:#D98A7A;--il-green:#79AE93;--il-water:#8FC3DD;--il-line:#BCC6D4;--il-onsoft:#2B3550;--il-onink:#FFFFFF}
:root[data-theme="dark"]{--il-sky1:#141C3D;--il-sky2:#26305C;--il-dusk1:#231E48;--il-dusk2:#8E5C6F;--il-hill1:#2C3663;--il-hill2:#212A50;--il-ink:#EDE6D6;--il-dark:#3A4573;
  --il-gold:#F2C066;--il-grey:#7D87A6;--il-soft:#F4F1E8;--il-rose:#E39A8C;--il-green:#5F9A80;--il-water:#5B8DB0;--il-line:#4A5584;--il-onsoft:#2B3550;--il-onink:#1B2238}
.ill{display:block;width:100%;height:100%}
.ill .fear{filter:saturate(.25) brightness(.7)}

/* ---------- Story cards ---------- */
.ctitle{font-size:30px;margin:2px 0 2px}
.cards{display:flex;flex-direction:column;gap:12px;margin:0 -6px}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:20px;outline-offset:4px}
.track::-webkit-scrollbar{display:none}
.scard{flex:0 0 100%;scroll-snap-align:center;margin:0;padding:0 6px;display:flex;flex-direction:column;gap:14px}
.scard .art{position:relative;aspect-ratio:3/2;border-radius:18px;overflow:hidden;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
.scard .art img{width:100%;height:100%;object-fit:cover;display:block}
.scard .art svg{width:100%;height:100%;display:block}
.scard .art img.photo{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.scard .art img.photo.on{opacity:1}
.scard figcaption{font-family:var(--serif);font-size:20px;line-height:1.7;padding:0 4px;min-height:10.2em;text-align:left;max-width:62ch;text-wrap:pretty}
.cardnav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px}
.navb{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;font-size:20px;color:var(--ink)}
.navb:first-child svg{transform:rotate(180deg)}
.navb:disabled{opacity:.3;cursor:default}
.navb.next:not(:disabled){background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.cdots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.cdots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .25s,background .25s}
.cdots i.on{width:22px;background:var(--gold)}
.fullch{border-top:1px solid var(--line);padding-top:12px}
.fullch summary{cursor:pointer;color:var(--muted);font-size:15px;font-weight:600}
.fullch .article{margin-top:14px}
@media (max-width:560px){.scard figcaption{font-size:19px;line-height:1.65}}
/* Language switch */
.langsw{max-width:240px;margin-top:12px}
.hero .langsw{background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(6px)}
.hero .langsw button{padding:7px 8px;font-size:14px}

/* Day complete: the page clears to one calm summary */
.donecard{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 22px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -24px rgba(16,24,40,.35)}
.donecard .seal{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--good,#1f7a4d);color:#fff}
.donecard .seal svg{width:34px;height:34px}
.donecard h2{font-size:30px;max-width:18ch}
.donecard .lead{font-size:18px;max-width:34ch;margin:0}
.donecard .pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.donecard .dquote{margin:6px 0 0;padding:18px 20px;border-radius:18px;background:var(--raise);max-width:40ch}
.donecard .dquote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45}
.donecard .dquote figcaption{margin-top:8px;font-size:13px;font-weight:600;color:var(--muted)}
.donecard .affirm{margin:0}
.donecard.fresh{animation:donein .7s ease both}
.donecard.fresh .seal{animation:sealpop .6s .2s cubic-bezier(.2,1.6,.4,1) both}
@keyframes donein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sealpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.donecard.fresh,.donecard.fresh .seal{animation:none}}

/* Morning workout video */
.workout{border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px;background:var(--surface)}
.workout.ok{border-color:var(--good)}
.workout .rn{font-weight:600}.workout .rd{font-size:14px;color:var(--muted)}
.ytwrap{position:relative;aspect-ratio:16/9;margin-top:10px;border-radius:12px;overflow:hidden;background:#000}
.ytwrap iframe,.ytwrap>div{position:absolute;inset:0;width:100%;height:100%}
.workoutov .ytwrap{width:min(92vw,960px);margin:12px auto}
.wlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.witem{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--raise);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.witem .ck{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;border:1px solid var(--line);color:transparent}
.witem.on{border-color:var(--good);background:var(--good-soft)}.witem.on .ck{background:var(--good);border-color:var(--good);color:#fff}
.rintro{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--gold-soft,var(--raise));font-size:14px;line-height:1.5}
.rintro b{color:var(--gold,inherit);margin-right:4px}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:4px}
.avatar{width:26px;height:26px;border-radius:50%;vertical-align:middle;margin-right:8px;object-fit:cover}
.invite{border:1px solid var(--line,rgba(127,127,127,.25))}
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.moods .opt{flex-direction:column;gap:4px;padding:10px 4px;text-align:center;font-size:13px;line-height:1.2}.moods .opt::before{display:none}.moods .opt span{font-size:26px}
.erow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.erow>span{min-width:90px}
.erow .seg button[aria-pressed="true"]{background:var(--accent,#e6b65c);color:#1a1a1a}
.feelrow{display:flex;gap:10px;align-items:flex-end;margin:10px 0 4px}.feel{display:flex;flex-direction:column;align-items:center;gap:4px}.feel .fe{font-size:20px}.feel i{display:block;width:14px;min-height:3px;border-radius:6px;background:var(--accent,#e6b65c)}