/* ================= DESIGN TOKENS =================
   Type (rem, so browser text size scales it) · spacing on a 4/8 grid · radii · elevation · motion.
   Colour tokens follow in the :root blocks below (dark default, light via prefers-color-scheme or data-theme). */
:root{
  --fs-caption:.6875rem; --fs-footnote:.8125rem; --fs-sub:.9375rem; --fs-body:1.0625rem;
  --fs-title3:1.25rem; --fs-title2:1.375rem; --fs-title1:1.75rem; --fs-large:2.125rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:30px; --r-pill:999px;
  --e-1:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.08);
  --e-2:0 10px 34px rgba(0,0,0,.18);
  --t-fast:150ms; --t-med:240ms; --t-slow:350ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --hit:44px;
}
/* ---- type: Instrument Serif for display, Outfit for everything you read and tap (both SIL OFL, self-hosted) ---- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/outfit.woff2) format('woff2')}

/* ---- colour. Dark is the default; light follows the system or the Appearance switch.
   Paper and ink: warm paper, near-black ink, one ember accent used sparingly. ---- */
:root{
  color-scheme:dark;
  --bg:#0E0C0B; --bg2:#151210;
  --solid:#1A1715; --solid2:#221E1B;
  --glass:#191614; --glass2:rgba(244,239,233,.06); --glass3:rgba(244,239,233,.075);
  --edge:rgba(244,239,233,.10); --edgeHi:rgba(244,239,233,0);
  --line:rgba(244,239,233,.16); --line2:rgba(244,239,233,.30);
  --label:#F4EFE9; --label2:rgba(244,239,233,.66); --label3:rgba(244,239,233,.44);
  --sep:rgba(244,239,233,.09);
  --ink:#F4EFE9; --onInk:#141110;
  --tint:#FF7A45; --tint2:#FFA27A; --accent:#FF7A45;
  --red:#FF6B5E; --green:#5CC98E; --water:#5FB0F0; --sleep:#A29EF7; --waterInk:#0B1620;
  /* fixed colours: the same in both themes (art, the hearth’s glass, the day’s-end paper) */
  --white:#fff; --black:#000; --paper:#fff6ea; --gold:#ffd27a; --emberOrange:#ff7a2e; --emberBrown:#5a3521; --mint:#7fe3ae; --scanHit:#34c759; --warnEdge:rgba(255,80,60,.5); --shade35:rgba(0,0,0,.35); --shade10:rgba(0,0,0,.1); --shade08:rgba(0,0,0,.08); --shade50:rgba(0,0,0,.5);
  --hearthGlass:rgba(18,14,12,.46); --hearthInk:#F4EFE9; --hearthEdge:rgba(255,240,230,.14); --hearthDot:rgba(244,239,233,.38); --hearthPress:rgba(255,255,255,.12);
  --glow:0;
  --shadow:0 1px 0 rgba(0,0,0,.35),0 18px 40px -22px rgba(0,0,0,.8);
  --lift:0 1px 2px rgba(0,0,0,.4),0 24px 60px -24px rgba(0,0,0,.85);
  --blur:blur(24px) saturate(160%);
  --serif:'Instrument Serif','Iowan Old Style','New York',Georgia,serif;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    color-scheme:light;
    --bg:#F2EDE7; --bg2:#EBE4DC;
    --solid:#FBF8F4; --solid2:#F5F0EA;
    --glass:#FBF8F4; --glass2:rgba(27,23,20,.045); --glass3:rgba(27,23,20,.055);
    --edge:rgba(27,23,20,.10); --edgeHi:rgba(255,255,255,0);
    --line:rgba(27,23,20,.15); --line2:rgba(27,23,20,.30);
    --label:#1B1714; --label2:rgba(27,23,20,.64); --label3:rgba(27,23,20,.44);
    --sep:rgba(27,23,20,.10);
    --ink:#1B1714; --onInk:#FBF8F4;
    --tint:#B8481C; --tint2:#93360F; --accent:#B8481C;
    --red:#B42318; --green:#2E6B4A; --water:#2F7DC4; --sleep:#4F4AB8; --waterInk:#FFFFFF;
    --shadow:0 1px 1px rgba(27,23,20,.04),0 14px 34px -20px rgba(27,23,20,.30);
    --lift:0 1px 2px rgba(27,23,20,.06),0 24px 60px -26px rgba(27,23,20,.42);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F2EDE7; --bg2:#EBE4DC;
  --solid:#FBF8F4; --solid2:#F5F0EA;
  --glass:#FBF8F4; --glass2:rgba(27,23,20,.045); --glass3:rgba(27,23,20,.055);
  --edge:rgba(27,23,20,.10); --edgeHi:rgba(255,255,255,0);
  --line:rgba(27,23,20,.15); --line2:rgba(27,23,20,.30);
  --label:#1B1714; --label2:rgba(27,23,20,.64); --label3:rgba(27,23,20,.44);
  --sep:rgba(27,23,20,.10);
  --ink:#1B1714; --onInk:#FBF8F4;
  --tint:#B8481C; --tint2:#93360F; --accent:#B8481C;
  --red:#B42318; --green:#2E6B4A; --water:#2F7DC4; --sleep:#4F4AB8; --waterInk:#FFFFFF;
  --shadow:0 1px 1px rgba(27,23,20,.04),0 14px 34px -20px rgba(27,23,20,.30);
  --lift:0 1px 2px rgba(27,23,20,.06),0 24px 60px -26px rgba(27,23,20,.42);
}
/* Fast only: pure black and white. Holiday themes still play, in monochrome. */
:root[data-mode="simple"]{
  --bg:#000000; --bg2:#0A0A0A; --solid:#0F0F0F; --solid2:#171717;
  --glass:#0C0C0C; --glass2:rgba(255,255,255,.06); --glass3:rgba(255,255,255,.07);
  --edge:rgba(255,255,255,.14); --line:rgba(255,255,255,.2); --line2:rgba(255,255,255,.4);
  --label:#FFFFFF; --label2:rgba(255,255,255,.62); --label3:rgba(255,255,255,.42); --sep:rgba(255,255,255,.12);
  --ink:#FFFFFF; --onInk:#000000; --tint:#FFFFFF; --tint2:#D4D4D4; --accent:#FFFFFF;
  --red:#FFFFFF; --green:#FFFFFF; --water:#FFFFFF; --sleep:#FFFFFF; --waterInk:#000000;
  --tintGrad:linear-gradient(#FFFFFF,#FFFFFF);
  --shadow:none; --lift:0 20px 50px -24px rgba(0,0,0,.9);
}
@media (prefers-color-scheme:light){
  :root[data-mode="simple"]:not([data-theme]){
    --bg:#FFFFFF; --bg2:#F7F7F7; --solid:#FFFFFF; --solid2:#F5F5F5;
    --glass:#FFFFFF; --glass2:rgba(0,0,0,.04); --glass3:rgba(0,0,0,.05);
    --edge:rgba(0,0,0,.12); --line:rgba(0,0,0,.16); --line2:rgba(0,0,0,.34);
    --label:#0A0A0A; --label2:rgba(0,0,0,.6); --label3:rgba(0,0,0,.42); --sep:rgba(0,0,0,.1);
    --ink:#0A0A0A; --onInk:#FFFFFF; --tint:#0A0A0A; --tint2:#2A2A2A; --accent:#0A0A0A;
    --red:#0A0A0A; --green:#0A0A0A; --water:#0A0A0A; --sleep:#0A0A0A; --waterInk:#FFFFFF;
    --tintGrad:linear-gradient(#0A0A0A,#0A0A0A);
    --shadow:none; --lift:0 20px 50px -26px rgba(0,0,0,.35);
  }
}
:root[data-mode="simple"][data-theme="light"]{
  --bg:#FFFFFF; --bg2:#F7F7F7; --solid:#FFFFFF; --solid2:#F5F5F5;
  --glass:#FFFFFF; --glass2:rgba(0,0,0,.04); --glass3:rgba(0,0,0,.05);
  --edge:rgba(0,0,0,.12); --line:rgba(0,0,0,.16); --line2:rgba(0,0,0,.34);
  --label:#0A0A0A; --label2:rgba(0,0,0,.6); --label3:rgba(0,0,0,.42); --sep:rgba(0,0,0,.1);
  --ink:#0A0A0A; --onInk:#FFFFFF; --tint:#0A0A0A; --tint2:#2A2A2A; --accent:#0A0A0A;
  --red:#0A0A0A; --green:#0A0A0A; --water:#0A0A0A; --sleep:#0A0A0A; --waterInk:#FFFFFF;
  --tintGrad:linear-gradient(#0A0A0A,#0A0A0A);
  --shadow:none; --lift:0 20px 50px -26px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--label);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;letter-spacing:inherit}
.sheet:focus,.gameWrap:focus{outline:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .14s linear;
  background:
    radial-gradient(135% 56% at 50% -6%, rgba(255,104,48,.34) 0%, rgba(206,44,12,.14) 38%, transparent 74%),
    radial-gradient(86% 32% at 50% 104%, rgba(255,74,28,.16) 0%, transparent 70%)}
header.bar,main{position:relative;z-index:2}

/* ---------- glass primitives ---------- */
.g{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 0 0 .5px var(--edge),inset 0 1px 0 var(--edgeHi),var(--shadow)}

header.bar{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;background:transparent}
.bar .sub{font-size:0.8125rem;color:var(--label2);font-variant-numeric:tabular-nums;font-weight:600}
main{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pane{display:none;padding:0 16px 132px;max-width:620px;margin:0 auto}
.pane.on{display:block}
.pane:not(#p-now){padding-top:6px}
p.lede{margin:0 0 18px}

nav.tabs{position:fixed;left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  z-index:30;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 4px 6px;
  background:var(--glass)}
nav.tabs button{border:0;padding:5px 2px;display:flex;flex-direction:column;align-items:center;gap:3px}
nav.tabs button svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hearth ---------- */
.hearth{position:relative;margin:0 -16px;height:min(47vh,352px);touch-action:none}
#fire{display:block;width:100%;height:100%}
.tiltbtn{position:absolute;top:8px;right:14px;border:0;border-radius:99px;padding:7px 13px;
  font-size:0.75rem}
.hint{position:absolute;bottom:6px;left:0;right:0;text-align:center;pointer-events:none;transition:opacity .5s}
.since{font-size:0.8125rem;color:var(--label2);min-height:18px;font-weight:600}
.phase-now.idle{font-weight:500}
.nextup{min-height:19px}
.goalchip,.pill{border-radius:99px}
.goalpick{margin-top:11px}
.goalpick.hidden{display:none}

.rowbtns{display:flex;gap:10px;margin:18px 0 2px;flex-wrap:wrap}
.btn{border:0;flex:1;min-width:140px}
.btn.ghost{
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn.sm{flex:0 0 auto;min-width:0}
.btn:active{opacity:.75;transform:scale(.985)}

/* ---------- cards ---------- */
.card p{font-size:0.9375rem;line-height:1.5;margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.card ul{margin:0;padding-left:20px;font-size:0.9375rem;line-height:1.5;color:var(--label2)}
.card li{margin-bottom:8px}
label.f{display:block;font-size:0.8125rem;margin:0 0 6px}
input.f,select.f,textarea.f{width:100%;border:0;
  padding:13px 14px;color:var(--label);font:inherit;font-size:1.0625rem}
.fieldrow{margin-bottom:14px}
.fieldrow:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{line-height:1.45;color:var(--label2);margin:10px 0 0}
.note.warn{color:var(--red)}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;
  border-bottom:.5px solid var(--sep)}
.stat:last-child{border-bottom:0}
.stat .k{font-size:0.9375rem;color:var(--label2)}
.stat .v{font-variant-numeric:tabular-nums}
.hist{font-size:0.9375rem;display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:.5px solid var(--sep);font-variant-numeric:tabular-nums;
  width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;color:var(--label)}
.hist span:last-child{color:var(--label2)}
.empty{font-size:0.9375rem;padding:14px 0}

/* ---------- checkpoints ---------- */
.tl{margin:26px 0 0;display:flex;flex-direction:column}
.stage{position:relative;overflow:hidden}
.stage>button.head{width:100%;background:none;border:0;padding:15px 16px;text-align:left;color:inherit;
  display:flex;flex-direction:column;align-items:stretch;gap:0}
.stage .row1{display:flex;align-items:center;gap:12px;min-height:22px}
.stage .now{flex:0 0 auto;font-size:0.6875rem;font-weight:800;letter-spacing:.04em;
  border-radius:99px;padding:3px 8px}
.stage .chev{flex:0 0 auto;width:18px;height:18px;stroke:var(--label3);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.3,.8,.3,1)}
.stage.open .chev{transform:rotate(180deg)}
.stage.sealed .chev{display:none}
.stage .sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:7px 0 0 21px;font-size:0.9062rem;line-height:1.45;color:var(--label2)}
.stage.open .sum{-webkit-line-clamp:unset;display:block;color:var(--label)}
.stage .prog{display:block;height:3px;border-radius:2px;margin:11px 0 0 21px;background:var(--glass3);overflow:hidden}
.stage .prog i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:2px}
.stage.fresh{animation:stFresh 1.4s ease-out}
.stage.fresh .sum{animation:sumIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes stFresh{0%{box-shadow:inset 0 0 0 .5px var(--edge),0 0 0 0 rgba(var(--skGlowRGB,255,110,50),.0)}
  25%{box-shadow:inset 0 0 0 1px rgba(var(--skGlowRGB,255,110,50),.7),0 0 34px 2px rgba(var(--skGlowRGB,255,110,50),.35)}}
@keyframes sumIn{from{opacity:0;transform:translateY(-4px)}}
.stage .dot{width:9px;height:9px;border-radius:50%;background:var(--glass3);flex:0 0 auto;
  box-shadow:inset 0 0 0 .5px var(--edge)}
.stage.live .dot{box-shadow:0 0 0 4px rgba(255,90,44,.24)}
.stage .hrs{font-size:0.8438rem;font-weight:700;color:var(--label3);min-width:60px;flex:0 0 auto}
.stage .nm{font-size:1rem;flex:1;color:var(--label2);letter-spacing:-.015em}
.stage.done .nm,.stage.live .nm{color:var(--label)}
.stage.sealed .nm{color:var(--label2)}
.seal{position:absolute;inset:0;z-index:4;border:0;padding:0;width:100%;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:0.875rem;font-weight:700;color:#5B4630;letter-spacing:.01em}
.seal canvas{position:absolute;inset:0;width:100%;height:100%}
.seal .sl{text-transform:uppercase;letter-spacing:.09em;font-size:0.7188rem;color:#4A3522;text-shadow:0 1px 0 rgba(255,246,226,.55);display:flex;align-items:center;gap:9px}
.stage .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.3,.8,.3,1)}
.stage.open .body{grid-template-rows:1fr}
.stage .bodyIn{overflow:hidden;min-height:0;padding:0 16px 0 37px;opacity:0;transition:opacity .3s,padding .38s}
.stage.open .bodyIn{opacity:1;padding:4px 16px 18px 37px}
.stage .foot{margin-top:4px}
.stage .bodyIn p{font-size:0.9375rem;line-height:1.56;margin:0 0 12px;color:var(--label2)}
.short{font-size:0.9688rem;line-height:1.52;margin:0 0 13px;color:var(--label2)}
.more p{font-size:0.9688rem;line-height:1.55;margin:0 0 12px;color:var(--label2)}
.moreBtn{background:none;border:0;padding:2px 0;font-size:0.9375rem}
.refs{margin-top:16px;padding-top:13px;border-top:.5px solid var(--sep)}
.refs h4{margin:0 0 9px}
.refs ul{margin:0;padding-left:16px}
.refs li{font-size:0.8125rem;line-height:1.45;color:var(--label2);margin-bottom:9px}
.refs a{color:var(--label2);text-decoration:underline;text-underline-offset:2px;padding:5px 0}   /* taller to tap; inline padding leaves the layout as it was */
.tag{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:0.75rem;
  font-weight:600;color:var(--label2);background:var(--glass3);border-radius:10px;padding:6px 11px;
  box-shadow:inset 0 0 0 .5px var(--edge)}
.tag .sq{width:7px;height:7px;border-radius:2px}
.sq.t3{background:var(--green)}.sq.t2{background:var(--tint)}.sq.t1{background:var(--red)}
.care{margin-top:14px;padding:13px 15px;border-radius:15px;background:rgba(255,80,60,.13);
  box-shadow:inset 0 0 0 .5px rgba(255,80,60,.25);font-size:0.9062rem;line-height:1.5;color:var(--label)}

.unlockBar{
  bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:29;border-radius:20px;padding:14px 16px;align-items:center;gap:12px;text-align:left;border:0;color:var(--label)}
.unlockBar .ub1{font-size:0.9375rem;font-weight:700;letter-spacing:-.015em}
.unlockBar .ub2{font-size:0.8125rem;color:var(--label2);margin-top:1px}
.unlockBar .uarrow{margin-left:auto;color:var(--tint);font-size:1.1875rem}

/* ---------- quotes / board / facts ---------- */
.qcard{margin:8px 0 16px;min-height:238px;
  display:flex;flex-direction:column;justify-content:space-between}
.qtext{margin:0 0 20px}
.qwho{display:flex;align-items:flex-start;gap:12px}
.qwho .qn{font-size:0.9375rem;font-weight:700;letter-spacing:-.012em}
.qwho .qr{font-size:0.8438rem;color:var(--label2);line-height:1.38;margin-top:2px}
.qdisp{font-size:0.75rem;color:var(--label3);margin-top:7px}
.heart{border:0;border-radius:99px;width:48px;height:48px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.heart svg{width:22px;height:22px;stroke:var(--label);fill:none;stroke-width:1.8}
.heart.on{background:rgba(255,90,80,.2)}
.heart.on svg{stroke:var(--red);fill:var(--red)}
.seg{display:flex;margin:4px 0 16px}
.seg button{flex:1;background:none;border:0;padding:9px 6px;
  font-size:0.875rem}
.seg3{grid-template-columns:repeat(3,1fr)}
.qsrc{font-size:0.8125rem;color:var(--label3);margin-top:3px;font-style:italic}
.chips.qFilt{margin:0 0 4px;padding-top:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
.qFilt::-webkit-scrollbar{display:none}
#fQ+.fCats{margin-top:10px}
.chips.qFilt button{flex:0 0 auto;padding:8px 13px}
.vLede{margin:2px 0 14px;font-size:0.9375rem;color:var(--label2);line-height:1.45}
.vList{display:flex;flex-direction:column;gap:12px}
.vCard{border-radius:22px;overflow:hidden}
.vPlay{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:16px 16px 6px;color:var(--label)}
.vBtn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.vBtn svg{width:20px;height:20px;margin-left:3px}
.vTxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.vTxt b{font-size:1rem;letter-spacing:-.012em;line-height:1.3}
.vBy{font-size:0.8125rem;color:var(--label2)}
.vW{font-size:0.875rem;color:var(--label2);line-height:1.4;margin-top:2px}
.vYt{display:block;padding:4px 16px 14px 76px;font-size:0.8125rem;color:var(--label3);font-weight:600;text-decoration:none}
.vFrame{display:block;width:100%;aspect-ratio:16/9;border:0;background:var(--black)}
.vErr{margin:0;padding:2px 16px 8px 76px;font-size:0.8125rem;color:var(--label2);line-height:1.4}
.vErr a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.vCard.on .vBtn{opacity:.4}
.favrow{border-radius:20px;padding:16px;margin-bottom:11px}
.favrow .fn{font-size:0.8125rem;color:var(--label2);margin-top:7px}
.favrow button{background:none;border:0;color:var(--label3);font-size:0.8125rem;padding:9px 0 0;font-weight:600}
.boardGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.bi{position:relative;border-radius:24px;overflow:hidden;border:0;display:flex;
  flex-direction:column;justify-content:flex-end;padding:0;text-align:left;color:var(--label);
  width:100%}
.bi.s{grid-column:span 1;aspect-ratio:1/1}
.bi.m{grid-column:span 2;aspect-ratio:16/10}
.bi.l{grid-column:span 2;aspect-ratio:4/5}
.bi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bi .cap{position:relative;z-index:2;padding:14px 15px;font-size:0.9062rem;font-weight:600;
  line-height:1.35;background:linear-gradient(to top,rgba(0,0,0,.78),var(--shade10) 70%,transparent);color:var(--white)}
.bi.txt{justify-content:center;padding:18px}
.bi.l.txt .tq,.bi.m.txt .tq{line-height:1.32}
.bi.txt .tn{font-size:0.8125rem;color:var(--label2);margin-top:10px;line-height:1.35}
.fab{position:fixed;right:20px;bottom:calc(92px + env(safe-area-inset-bottom,0px));
  width:58px;height:58px;border-radius:50%;border:0;
  font-size:1.9375rem;line-height:1;z-index:25}
.fab.hidden{display:none}
.factCard{margin:6px 0 16px}
.fcat{display:inline-block;margin-bottom:12px}
.ftitle{margin:0 0 14px}
.fbody{color:var(--label2);white-space:pre-wrap;margin:0}

/* ---------- ask ---------- */
.chat{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.msg{font-size:1rem;line-height:1.5;white-space:pre-wrap}
.msg.you{border-radius:20px;
  padding:13px 16px;align-self:flex-end;max-width:86%}
.askbox{display:flex;gap:9px;align-items:flex-end}
/* the message box stays in reach: once the chat is longer than the screen it rides just above the tab bar, and messages slide under a soft fade */
#p-ask .askbox{position:sticky;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:3;margin:0 -16px;padding:14px 16px 8px;
  background:linear-gradient(to top,var(--bg) 82%,color-mix(in srgb,var(--bg) 0%,transparent))}
#chat .msg{scroll-margin-bottom:172px}
#p-ask .askbox::after{content:"";position:absolute;left:0;right:0;top:100%;height:140px;background:var(--bg);pointer-events:none}   /* nothing peeks out under the tab bar */
.askNote{margin:2px 0 4px}
.askbox textarea{flex:1;border:0;padding:13px 17px;
  color:var(--label);font:inherit;font-size:1.0625rem;resize:none;min-height:48px;max-height:140px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-end;justify-content:center}
.scrim.hidden{display:none}
.sheet{width:100%;max-width:560px;
  padding:10px 20px calc(26px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow-y:auto;-webkit-backdrop-filter:blur(40px) saturate(190%);
  backdrop-filter:blur(40px) saturate(190%)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.grab{border-radius:3px;margin:0 auto 16px}
.sheet p{font-size:0.9688rem;line-height:1.5;margin:0 0 12px}
.sheet ul{font-size:0.9375rem;line-height:1.5;color:var(--label2);padding-left:20px;margin:0 0 14px}
.sheet li{margin-bottom:8px}
.sheetbtns{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.sheetbtns .btn{width:100%;flex:none}
.bigopt{display:flex;align-items:center;gap:14px;background:var(--glass3);border:0;
  border-radius:20px;padding:16px;text-align:left;width:100%;box-shadow:inset 0 0 0 .5px var(--edge)}
.bigopt .ico{width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:0.9375rem;font-weight:700}
.bigopt .bt{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em}
.bigopt .bs{font-size:0.8438rem;color:var(--label2);line-height:1.35}
.achrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:.5px solid var(--sep)}
.achrow:last-child{border-bottom:0}
.achrow .ah{font-size:0.8438rem;font-weight:700;color:var(--tint);min-width:56px;
  font-variant-numeric:tabular-nums}
.achrow .an{font-size:0.9688rem;font-weight:600;letter-spacing:-.012em}
.achrow .as{font-size:0.8438rem;color:var(--label2);margin-top:2px;line-height:1.38}

.gate{position:fixed;inset:0;z-index:60;overflow-y:auto;
  padding:calc(28px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px))}
.gate .in{max-width:560px;margin:0 auto}
.gate p{line-height:1.5;color:var(--label2);margin:0 0 14px}
.gate ul{font-size:0.9688rem;line-height:1.5;color:var(--label2);padding-left:20px;margin:0 0 18px}
.gate li{margin-bottom:10px}
.gate .btn{width:100%}
.hidden{display:none!important}

.gameWrap{position:fixed;inset:0;z-index:60;background:var(--black);display:flex;
  flex-direction:column;touch-action:none}
#game{flex:1;display:block;width:100%}
.gameTop,.pzTop{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;padding:0 18px;z-index:3;
  pointer-events:none}
.gameTop .hud,.pzTop .hud{font-size:0.875rem;color:rgba(245,230,225,.6);font-weight:600}
.gameTop .hud b,.pzTop .hud b{color:#FF9366;font-weight:700}
.gameTop button,.pzTop button{pointer-events:auto;background:rgba(120,90,80,.34);border:0;
  border-radius:99px;padding:9px 17px;font-size:0.875rem;font-weight:700;color:var(--white);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.gameOver{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:30px;z-index:4;background:rgba(0,0,0,.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gameOver.on{display:flex}
.gameOver h2{margin:0 0 10px;color:var(--white)}
.gameOver p{line-height:1.45;color:rgba(245,230,225,.62);margin:0 0 8px;max-width:340px}
.gameOver .row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.wave{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:0;right:0;
  text-align:center;font-size:0.9375rem;color:rgba(245,230,225,.45);padding:0 30px;z-index:3;
  pointer-events:none;transition:opacity .6s}
.pzBody{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 22px;
  max-width:520px;margin:0 auto;width:100%}
.pzQ{font-size:0.9375rem;font-weight:700;color:var(--label2);text-align:center;
  text-transform:uppercase;letter-spacing:.06em}
.pzSub{font-size:clamp(26px,8vw,38px);text-align:center;
  margin:20px 0 30px;font-variant-numeric:tabular-nums;line-height:1.24}
.pzOpts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pzo{background:var(--glass);border:0;border-radius:22px;padding:22px 10px;font-size:1.25rem;
  font-weight:700;color:var(--label);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 .5px var(--edge);transition:background .18s,color .18s}
.pzo.ok{background:var(--green);color:#04150C}
.pzo.no{background:var(--red);color:#1A0604}
.pzo:disabled{opacity:1}
.pzWhy{text-align:center;font-size:0.9062rem;color:var(--label2);margin-top:20px;min-height:40px;
  line-height:1.45}
.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(98px + env(safe-area-inset-bottom,0px));
  font-size:0.9375rem;z-index:45;opacity:0;pointer-events:none;max-width:84vw;
  text-align:center;
  transition:opacity .3s,transform .3s}
.toast.on{opacity:1}

/* ===== refinement pass ===== */
.barR{display:flex;align-items:center}
.status{display:inline-flex;align-items:center;gap:7px;border-radius:99px;transition:color .4s}
.status .sdot{width:7px;height:7px;border-radius:50%}
.status.on .sdot{box-shadow:0 0 10px rgba(255,90,44,.9);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;transform:scale(.78)}}
.chatBtn{border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;color:var(--label)}
.chatBtn svg{stroke:currentColor;fill:none;stroke-linejoin:round}
nav.tabs button{border-radius:21px;transition:background .25s,color .25s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.seal{background:#CDB690}
.seal .sl{position:relative;z-index:2}
#pzWrap{background:var(--bg)}
#pzWrap .pzTop .hud{color:var(--label2)}
#pzWrap .pzTop .hud b{color:var(--tint)}
#pzWrap .pzTop button{background:var(--glass3);color:var(--label);box-shadow:inset 0 0 0 .5px var(--edge)}
#pzWrap .wave{color:var(--label3)}
.pzSub.long{font-size:1.3125rem;letter-spacing:-.012em;line-height:1.36;font-weight:600;margin:16px 0 26px}
.pzType{display:flex;flex-direction:column;gap:12px}
.pzType input{width:100%;text-align:center;font-size:1.625rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:16px;border:0;color:var(--label)}
.pzType input.ok{box-shadow:inset 0 0 0 2px var(--green)}
.pzType input.no{animation:shake .36s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pzType .rowbtns{margin:4px 0 0;justify-content:center}
.pzHint{text-align:center;font-size:0.875rem;color:var(--label2)}
.pzTopR{display:flex;gap:8px}
.pzTimer{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:18px;right:18px;height:4px;border-radius:4px;
  background:var(--glass3);overflow:hidden;display:none;z-index:3}
.pzTimer i{display:block;height:100%;background:var(--tint);transform-origin:left;transition:transform .1s linear}
#pzWrap.blitz .pzTimer{display:block}
.pzLvl{align-self:center;display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:99px;margin-bottom:16px;
  background:var(--glass2);box-shadow:inset 0 0 0 .5px var(--edge);font-size:0.8125rem;font-weight:700;color:var(--label2)}
.pzLvl .pips{display:inline-flex;gap:4px}
.pzLvl .pips i{width:6px;height:6px;border-radius:50%;background:var(--label3);opacity:.45}
.pzLvl .pips i.on{background:var(--tint);opacity:1}
.pzLvl.bump{animation:pzBump .6s}
@keyframes pzBump{40%{transform:scale(1.12)}}
#pzWrap.blitz .pzLvl{opacity:.55}
.pzSub{white-space:pre-line}
.pzSub.mid{font-size:clamp(22px,6.6vw,30px)}
.pzOpts.wide{grid-template-columns:1fr}
.pzOpts.veil{visibility:hidden}
.pzSub.memo{position:relative;letter-spacing:.08em}
.pzSub.memo::after{content:"";position:absolute;left:25%;right:25%;bottom:-14px;height:3px;border-radius:3px;background:var(--tint);
  transform-origin:left;animation:pzMemo var(--ms,4s) linear forwards}
@keyframes pzMemo{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.pzLvl.bump{animation:none}.pzSub.memo::after{animation:none;opacity:.5}}

/* ===== water, recap ===== */
.whead{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.whead h3{margin:0}
.wrow{display:flex;align-items:center;gap:6px}
#wCan{flex:0 0 auto;width:170px;height:240px;margin-left:-10px}
.wside{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.wamt span{font-size:0.9375rem;color:var(--label2);font-weight:600}
.wchips{display:flex;gap:6px;flex-wrap:wrap}
.wbtns{display:flex;gap:8px}
.wbtns .btn{flex:1;min-width:0}
.recap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.rc{background:var(--glass3);border-radius:16px;padding:12px 4px;text-align:center;box-shadow:inset 0 0 0 .5px var(--edge)}
.rc b{display:block}
.rc span{display:block;font-size:0.6875rem;color:var(--label2);line-height:1.25;margin-top:2px;font-weight:600}

.toast{top:calc(58px + env(safe-area-inset-top,0px));bottom:auto;padding:12px 18px;line-height:1.35}
.toast.on{transform:translateX(-50%) translateY(6px)}

.unlockBar .ub1,.unlockBar .ub2{display:block}
.wchips{margin-top:12px}

#wMinus{flex:0 0 54px;padding-left:0;padding-right:0;font-size:1.375rem}
#wPlus{white-space:nowrap}

/* ===== refeed card, electrolytes ===== */
.rfNow{margin-top:14px}
.rfNow h3{font-size:1.25rem;margin:0 0 10px}
.rfNow #rfBody .card{background:none;box-shadow:none;padding:0;margin:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.rfNow #rfBody h3{font-size:1rem;color:var(--tint);margin:0 0 8px}
.rfNow .rowbtns{margin-top:12px}
.rfNow.lit{animation:emberlit 2.8s ease-out 1}
@keyframes emberlit{
  0%{box-shadow:inset 0 0 0 .5px var(--edge),0 0 0 0 rgba(255,90,44,0)}
  18%{box-shadow:inset 0 0 0 1.5px rgba(255,120,60,.9),0 0 46px 6px rgba(255,90,44,.55)}
  100%{box-shadow:inset 0 0 0 .5px var(--edge),inset 0 1px 0 var(--edgeHi),var(--shadow)}}
.elec{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:13px 14px;border:0;
  border-radius:18px;text-align:left;color:var(--label);background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge)}
.elec .eicon{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFD34E,#FF9A3C);font-size:1rem}
.elec .etxt b{display:block;font-size:0.9375rem;font-weight:700;letter-spacing:-.012em}
.elec .etxt span{display:block;font-size:0.8125rem;color:var(--label2);line-height:1.35;margin-top:2px}
.elec .earr{margin-left:auto;color:var(--label3);font-size:1.375rem}
h4.eh{font-size:1rem;font-weight:700;margin:20px 0 8px;letter-spacing:-.012em}
.sheet ul b{color:var(--label)}
.mix{display:block;padding:13px 15px;border-radius:16px;background:var(--glass3);margin-bottom:9px;text-decoration:none;
  color:var(--label);box-shadow:inset 0 0 0 .5px var(--edge)}
.mix b{display:block;font-size:0.9375rem}.mix span{display:block;font-size:0.8125rem;color:var(--label2)}
.sheet{background:color-mix(in srgb,var(--solid) 90%,transparent)}
#gameBtn{white-space:nowrap;padding-left:14px;padding-right:14px}

/* checkpoint bar lives in the page now */
.unlockBar,.unlockBar.on{position:static;left:auto;right:auto;bottom:auto;transform:none;transition:none;
  width:100%;margin:14px 0 0;opacity:1;pointer-events:auto}
.unlockBar{display:none}
.unlockBar.on{display:flex;animation:emberlit 2.8s ease-out 1}
.unlockBar .ufire{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:rgba(255,90,44,.18);font-size:1.0625rem}
nav.tabs button.badge::after{content:"";position:absolute;top:5px;right:calc(50% - 17px);width:8px;height:8px;
  border-radius:50%;background:var(--tint)}

.ack{display:flex;gap:12px;align-items:flex-start;margin:16px 0 4px;padding:14px;border-radius:16px;
  background:rgba(255,80,60,.12);box-shadow:inset 0 0 0 .5px rgba(255,80,60,.3);font-size:0.9062rem;line-height:1.45;cursor:pointer}
.ack input{width:22px;height:22px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--tint)}
.sheet p.heavy{color:var(--red);font-weight:700;font-size:1.0312rem}
.btn.danger{box-shadow:inset 0 0 0 1px rgba(255,80,60,.4)}
.btn.danger:disabled{opacity:.4}
.goalWarn{display:block;margin-top:10px;border:0;background:none;padding:0;text-align:left;color:var(--red)}
.goalWarn.hidden{display:none}

/* ===== polish pass ===== */
.scrim{animation:scrimIn .26s ease-out}
.scrim.closing{animation:scrimOut .24s ease-in forwards}
.scrim.closing .sheet{animation:sheetOut .24s cubic-bezier(.4,0,1,1) forwards}
@keyframes scrimIn{from{background:transparent}}
@keyframes scrimOut{to{background:transparent}}
@keyframes sheetOut{to{transform:translateY(100%)}}
.sheet{animation:up .42s cubic-bezier(.2,.9,.25,1.02)}
.pane.on{animation:paneIn .34s cubic-bezier(.2,.8,.2,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}}
button{transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s,opacity .2s,box-shadow .25s}
button:active:not(:disabled){transform:scale(.965)}
nav.tabs button:active{transform:scale(.92)}
.card,.stage,.qcard,.factCard,.bi{transition:box-shadow .3s}
.clock{transition:text-shadow .8s}
@media (prefers-reduced-motion:reduce){.pane.on,.sheet,.scrim{animation:none!important}}

.bigopt .bt,.bigopt .bs{display:block}
.bigopt .bs{margin-top:3px}

/* ================= WORLD-CLASS PASS ================= */
header.bar{transition:background .3s,box-shadow .3s}
header.bar.scrolled{background:color-mix(in srgb,var(--bg) 70%,transparent);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
/* rolling digits */
.rl{display:inline-flex;line-height:1}
.rl .dg{display:inline-block;height:1em;overflow:hidden}
.rl .col{display:block;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.rl .sep{display:inline-block}
.clock .sec{padding-bottom:.08em;margin-left:.04em}
#wNow{display:inline-flex}
/* tab indicator */
nav.tabs .tabInd{position:absolute;top:7px;bottom:6px;left:0;width:0;border-radius:21px;z-index:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1.1,.36,1),width .5s cubic-bezier(.22,1,.36,1)}
nav.tabs button,nav.tabs button[aria-selected="true"]{position:relative;z-index:1;background:none;box-shadow:none}
nav.tabs button svg{transition:transform .35s cubic-bezier(.22,1.2,.36,1)}
nav.tabs button[aria-selected="true"] svg{transform:translateY(-1px) scale(1.06)}
/* icons */
.bigopt .ico svg,.elec .eicon svg,.unlockBar .ufire svg,.gateMark svg{width:22px;height:22px;fill:none;stroke:var(--white);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.elec .eicon svg{width:18px;height:18px}
.unlockBar .ufire svg{stroke:var(--tint);width:18px;height:18px}
/* editorial type for reading */
/* onboarding */
.gateMark{width:64px;height:64px;border-radius:20px;background:var(--tintGrad);display:flex;align-items:center;justify-content:center;
  margin:8px 0 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px rgba(255,90,44,.4)}
.gateMark svg{width:32px;height:32px;stroke-width:1.8}
.gate li{padding-left:4px}
/* hero entrance */
.hero>*{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
.hero>*:nth-child(2){animation-delay:.05s}.hero>*:nth-child(3){animation-delay:.1s}
.hero>*:nth-child(4){animation-delay:.14s}.hero>*:nth-child(5){animation-delay:.18s}.hero>*:nth-child(6){animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
/* charts */
.chartHead{display:flex;flex-direction:column;margin:6px 0 4px;min-height:48px}
.chartHead .chv span{font-size:0.9375rem;color:var(--label2);font-weight:600;margin-left:4px}
.chartHead .chs{font-size:0.8125rem;color:var(--label2);font-weight:600}
.chartHead em{font-style:normal}
.chartHead em.dn{color:var(--green)}.chartHead em.up{color:var(--tint)}
.chart{margin:6px -4px 4px}
.chartEmpty{font-size:0.875rem;padding:18px 0}
.drawIn{stroke-dasharray:1;stroke-dashoffset:1;animation:drawIn 1.1s cubic-bezier(.22,1,.36,1) .1s forwards}
@keyframes drawIn{to{stroke-dashoffset:0}}
.fadeIn{opacity:0;animation:fadeIn .9s ease .35s forwards}
@keyframes fadeIn{to{opacity:1}}
.bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow .7s cubic-bezier(.22,1.2,.36,1) both}
@keyframes grow{from{transform:scaleY(0)}}
/* game over */
.gameOver h2{font-size:2rem}
.gameOver p{font-size:1.0312rem}
@media (prefers-reduced-motion:reduce){.hero>*,.bar,.drawIn,.fadeIn,.rl .col{animation:none!important;transition:none!important;opacity:1;stroke-dashoffset:0}}

.bdChips{margin-top:4px}
input[type="datetime-local"].f{min-height:50px;-webkit-appearance:none;appearance:none}
#bdErr b{color:var(--label)}




/* ================= PLAN: segmented + GLUTTON FOR PUNISHMENT ================= */
.plSeg{margin:14px 0 6px}
.plSeg button{white-space:nowrap;font-size:0.875rem}
.gHead h1{margin-bottom:2px}
.gTop{display:flex;gap:10px;align-items:center;margin:4px 0 16px}
.gTop .btn{flex:1}
.gNext{margin-bottom:14px}
.gEmpty b{display:block;font-size:1.0625rem;margin-bottom:3px}
.gEmpty span{display:block;font-size:0.9062rem;color:var(--label2);line-height:1.45}
.gNextIn{display:flex;gap:14px;align-items:center;cursor:pointer}
.gNextIn .t{flex:1;min-width:0}
.gNextIn .lbl{display:block}
.gNextIn b{display:block;font-size:1.25rem;line-height:1.2;margin:1px 0 3px}
.gNextIn .t>span:last-child{display:block;font-size:0.8438rem;color:var(--label2)}
.gWarn{margin:12px 0 0!important;padding:11px 13px;border-radius:14px;font-size:0.875rem!important;line-height:1.45;
  background:rgba(245,184,46,.13);color:var(--label)!important;box-shadow:inset 0 0 0 .5px rgba(245,184,46,.35)}
.gPlate{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--a),var(--b))}
.gPlate .rim{position:absolute;inset:5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.gPlate .em{font-size:1.75rem;line-height:1;filter:drop-shadow(0 2px 3px var(--shade35))}
.gPlate.big{width:74px;height:74px}.gPlate.big .em{font-size:2.25rem}
.gChips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 12px}
.gChips::-webkit-scrollbar{display:none}
.gChips button{flex:0 0 auto}
.gGrid{display:flex;flex-direction:column;gap:10px}
.gCard{display:flex;gap:14px;align-items:center;width:100%;text-align:left;border:0;color:var(--label);padding:12px 14px;border-radius:22px}
.gCard .t{flex:1;min-width:0}
.gCard b{display:block;font-size:1rem;letter-spacing:-.015em}
.gCard .t>span{display:block;font-size:0.8438rem;color:var(--label2);line-height:1.38;margin-top:2px}
.gCard .meta{display:flex!important;gap:8px;margin-top:6px!important;font-size:0.75rem!important;font-weight:650}
.gCard .meta .ok{color:var(--green)}.gCard .meta .fav{color:var(--tint)}
.gWeek{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:2px 16px 4px}
.gWeek::-webkit-scrollbar{display:none}
.gDay{border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:118px}
.gDay .dh{display:flex;justify-content:space-between;font-size:0.8125rem}
.gDay .dh span{color:var(--label3);font-weight:700}
.gSlot{border:0;border-radius:11px;padding:7px 8px;text-align:left;font-size:0.7812rem;font-weight:600;color:var(--label);background:var(--glass3);
  display:flex;gap:5px;align-items:center}
.gSlot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gAdd{border:1px dashed var(--sep);border-radius:11px;background:none;color:var(--label3);font-size:1.125rem;padding:4px;margin-top:auto}
.gChef{display:flex;gap:8px}
.gChef input{flex:1;min-width:0}
.proTag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 7px;border-radius:7px;font-size:0.6875rem;font-weight:800;letter-spacing:.04em}
.gmHero{margin:2px 0 6px}
.gmHero h3{margin:0 0 3px!important}
.gmHero p{margin:0!important;font-size:0.9062rem!important}
.gTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gTags span{font-size:0.75rem;font-weight:650;padding:4px 9px;border-radius:99px;background:var(--glass3);color:var(--label2)}
.gTags span.ok{color:var(--green)}
.gWhy{margin:14px 0 4px!important}
#mealBody h4{margin:18px 0 8px}
.gIng{display:flex;flex-direction:column;border-radius:16px;background:var(--glass3);padding:2px 14px}
.gIng label{display:flex;gap:12px;align-items:center;min-height:46px;border-bottom:.5px solid var(--sep);font-size:0.9375rem}
.gIng label:last-child{border-bottom:0}
.gIng input{width:21px;height:21px;accent-color:var(--tint);flex:0 0 auto}
.gIng input:checked+span{color:var(--label3);text-decoration:line-through}
.gIng small{display:block;font-size:0.75rem;color:var(--label3);text-decoration:none}
.gSteps{margin:0;padding-left:22px;font-size:0.9375rem;line-height:1.55;color:var(--label2)}
.gSteps li{margin-bottom:8px;padding-left:4px}
.breakChip{display:inline-flex;align-items:center;gap:8px}
.breakChip b{color:var(--label);font-weight:650}
.breakChip .em{font-size:1.125rem}

/* ================= BODY CHECK ================= */
.bodyCard{padding:16px 16px 14px}
.bodyCard .bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.bodyCard .bh h3{margin:0}
.bodyCard .bh span{font-size:0.7812rem;color:var(--label3)}
.bodyGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bix{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;border-radius:16px;padding:12px 6px 10px;text-align:center;color:var(--label);
  background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge);min-width:0}
.bix svg{width:40px;height:40px;flex:0 0 auto}
.bix .fe{font-size:1.75rem;height:40px;line-height:40px;text-align:center;flex:0 0 auto}
.bix b{display:block;font-size:0.9062rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bix span span{display:block;font-size:0.7188rem;color:var(--label2);white-space:nowrap}
.bix>span:last-child{min-width:0;max-width:100%}
.bodyIns{margin:12px 0 0;padding:11px 13px;border-radius:14px;font-size:0.875rem;line-height:1.45}
.bodyIns.lvl1{background:rgba(245,184,46,.12);box-shadow:inset 0 0 0 .5px rgba(245,184,46,.35)}
.bodyIns.lvl2{background:rgba(255,80,60,.16);box-shadow:inset 0 0 0 1px var(--warnEdge);font-weight:650}
#bcExtra{display:contents}
#bodySub{margin:10px 0 0!important;font-size:0.7812rem!important;color:var(--label3)!important}
.elecRow{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.elecT{display:flex;flex-direction:column;align-items:flex-start;border:0;border-radius:16px;padding:13px 15px;text-align:left;color:var(--label);
  background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge)}
.elecT b{font-size:1rem}.elecT span{font-size:0.8125rem;color:var(--label2);margin-top:2px}
.elecT[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--tint)}
.elecT[aria-pressed="true"] b::after{content:" \2713";color:var(--tint)}
.feelGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.feelT{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:16px;padding:12px 6px;font-size:0.7812rem;font-weight:650;
  color:var(--label);background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge);text-align:center;line-height:1.25}
.feelT .fe{font-size:1.625rem}
.feelT.lvl2{box-shadow:inset 0 0 0 .5px var(--warnEdge)}
.feelT[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--tint)}
.feelAns{padding:13px 15px;border-radius:15px;font-size:0.9375rem;line-height:1.5;background:var(--glass3)}
.feelAns.lvl1{background:rgba(245,184,46,.12)}
.feelAns.lvl2{background:rgba(255,80,60,.16);box-shadow:inset 0 0 0 1px var(--warnEdge);font-weight:650}

/* ================= FRIENDS, ENCOURAGEMENT, INVITES ================= */
:root[data-skin] .status.on .sdot{box-shadow:0 0 10px rgba(var(--skGlowRGB),.9)}
.card p.note{margin-top:10px}
.frBtn{position:relative}
.frBadge{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;border-radius:9px;padding:0 5px;font-size:0.6875rem;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--bg)}
.av{display:inline-block;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--glass3)}

/* notes drifting in the fire */
#frNotes{position:absolute;inset:0;z-index:3;pointer-events:none}
.frNote{position:absolute;pointer-events:auto;border:0;background:none;padding:6px;margin:-6px;
  animation:frRise 2.4s cubic-bezier(.2,.8,.3,1) both;touch-action:manipulation}
.frNote .bob{display:block;animation:frBob var(--bd,3.6s) ease-in-out infinite alternate}
.frNote svg{display:block;width:68px;height:48px;overflow:visible;
  filter:drop-shadow(0 0 7px rgba(255,130,50,.75)) drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.frNote .seal{animation:frSeal 1.8s ease-in-out infinite alternate}
.frNote:active svg{transform:scale(.94)}
.frNote.burn{animation:frBurn .55s ease-in forwards}
@keyframes frRise{from{transform:translateY(120px) scale(.4) rotate(-8deg);opacity:0}
  to{transform:translateY(0) scale(1) rotate(0);opacity:1}}
@keyframes frBob{from{transform:translateY(-5px) rotate(var(--r0,-4deg))}to{transform:translateY(5px) rotate(var(--r1,4deg))}}
@keyframes frSeal{from{opacity:.72}to{opacity:1}}
@keyframes frBurn{0%{transform:scale(1);opacity:1;filter:brightness(1)}
  60%{transform:scale(1.18) translateY(-10px);opacity:.9;filter:brightness(1.9) saturate(1.4)}
  100%{transform:scale(.3) translateY(-60px);opacity:0;filter:brightness(2.4)}}
.frMore{position:absolute;right:14px;bottom:30px;pointer-events:auto;border:0;border-radius:99px;
  padding:6px 12px;font-size:0.75rem}
@media (prefers-reduced-motion:reduce){.frNote,.frNote .bob,.frNote .seal{animation:none!important}}

/* friends strip on the fire screen */
.frStrip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;color:var(--label);font:inherit;padding:14px 16px}
.frStrip.hidden{display:none}
.frStack{display:flex;flex:0 0 auto}
.frStack .ring{position:relative;width:38px;height:38px;margin-left:-9px;border-radius:50%;box-shadow:0 0 0 2.5px var(--solid)}
.frStack .ring:first-child{margin-left:0}
.frStack .ring svg{position:absolute;inset:-3px;width:44px;height:44px;transform:rotate(-90deg)}
.frStack .ring img{width:38px;height:38px}
.frStrip .t{flex:1;min-width:0}
.frStrip .t b{display:block;font-size:0.9375rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frStrip .t span{display:block;font-size:0.8125rem;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frStrip .go{color:var(--label3);font-size:1.375rem}

/* friends sheet */
.frInv{position:relative;overflow:hidden;border-radius:22px;padding:18px;margin:6px 0 12px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(var(--skGlowRGB,255,110,50),.28),transparent 60%),var(--glass3);
  box-shadow:inset 0 0 0 .5px var(--edge)}
.frInv .lbl{font-size:0.8125rem;font-weight:650;color:var(--label2)}
.frCode{font-family:ui-rounded,'SF Pro Rounded',var(--sans);font-size:2.125rem;font-weight:800;letter-spacing:.06em;margin:2px 0 6px;
  font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
.frInv p{margin:0 0 14px!important;font-size:0.9062rem!important}
.frInv .rowbtns{margin:0}
.frPro{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 14px;margin:0 0 12px;background:var(--glass3);
  box-shadow:inset 0 0 0 .5px var(--edge);font-size:0.875rem;color:var(--label2)}
.frPro b{color:var(--label)}
.frPro .tag{flex:0 0 auto;padding:3px 8px;border-radius:8px;font-size:0.6875rem;font-weight:800;letter-spacing:.04em}
.frRedeem{display:flex;gap:8px;margin:0 0 6px}
.frRedeem input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.frRedeem input::placeholder{text-transform:none;letter-spacing:0;font-weight:500}
.frSec{font-size:1.0625rem;font-weight:700;margin:20px 0 6px;display:flex;align-items:baseline;justify-content:space-between}
.frSec span{font-size:0.8125rem;font-weight:600;color:var(--label2)}
.frList{background:var(--glass3);border-radius:18px;padding:2px 14px;box-shadow:inset 0 0 0 .5px var(--edge)}
.frRow{display:flex;align-items:center;gap:12px;min-height:66px;border-bottom:.5px solid var(--sep)}
.frRow:last-child{border-bottom:0}
.frRow .av{width:40px;height:40px}
.frRow .t{flex:1;min-width:0}
.frRow .t b{display:block;font-size:0.9688rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frRow .t span{display:block;font-size:0.7812rem;color:var(--label2)}
.frRow .t span.live{color:var(--tint);font-weight:650}
.frBar{height:4px;border-radius:2px;background:var(--glass2);margin-top:6px;overflow:hidden}
.frBar i{display:block;height:100%;border-radius:2px}
.frRow .cheer{flex:0 0 auto;border:0;border-radius:99px;padding:8px 12px;font-size:0.8125rem;font-weight:700;
  color:var(--label);background:var(--glass2);box-shadow:inset 0 0 0 .5px var(--edge)}
.frRow .more{flex:0 0 auto;border:0;background:none;color:var(--label3);width:24px;margin-left:-6px;height:36px;font-size:1.125rem;padding:0}
.frEmpty{padding:16px 2px;font-size:0.9062rem;line-height:1.5}
.frInbox .frRow{min-height:60px}
.frInbox .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tint);margin-left:7px;vertical-align:middle}
.frInbox .msg{display:block;font-size:0.875rem;color:var(--label);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frInbox button.frRow{width:100%;border:0;border-bottom:.5px solid var(--sep);background:none;text-align:left;color:inherit;font:inherit;padding:0}
.frInbox button.frRow:last-child{border-bottom:0}
.frShare{display:flex;align-items:center;gap:12px;padding:12px 0}
.frShare .t{flex:1}
.frShare b{display:block;font-size:0.9688rem}
.frShare span{display:block;font-size:0.8125rem;color:var(--label2);margin-top:2px;line-height:1.4}
.frOff{border-radius:18px;padding:18px;background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge);margin:6px 0 12px}
.frOff b{display:block;font-size:1rem;margin-bottom:6px}
.frOff p b{display:inline;font-size:inherit;margin:0}
.frOff p{margin:0!important}

/* compose + read */
.chTo{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.chTo .av{width:34px;height:34px}
.chTo b{font-size:1rem}
.chChips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chCount{text-align:right;font-size:0.75rem;color:var(--label3);margin-top:4px}
.nvHead{display:flex;flex-direction:column;align-items:center;text-align:center;margin:4px 0 14px}
.nvHead .av{width:64px;height:64px;box-shadow:0 0 0 3px var(--solid),0 0 0 5px var(--tint),0 0 28px rgba(var(--skGlowRGB,255,110,50),.6)}
.nvHead b{font-size:1.1875rem;margin-top:12px}
.nvHead span{font-size:0.8125rem;color:var(--label2);margin-top:2px}
.nvMsg{position:relative;border-radius:18px;padding:18px 18px 18px 20px;margin:0 0 6px;
  background:linear-gradient(170deg,#F6E9CC,#E9D2A2);color:#3A2414;font-size:1.125rem;line-height:1.45;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(90,50,20,.18),inset 0 0 26px rgba(150,80,20,.22),0 10px 28px var(--shade35);
  white-space:pre-wrap;overflow-wrap:anywhere;animation:nvIn .5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes nvIn{from{transform:scale(.92) rotate(-2deg);opacity:0}}

/* board empty state */
.bEmpty{grid-column:span 2;text-align:center;padding:34px 18px 26px;border-radius:24px}
.bEmpty svg{width:54px;height:54px;stroke:var(--tint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.bEmpty h3{font-size:1.25rem;margin:0 0 6px}
.bEmpty p{font-size:0.9375rem;color:var(--label2);line-height:1.5;margin:0 auto 16px;max-width:300px}
.bEmpty .rowbtns{justify-content:center}

/* ================= THEMES (holiday + everyday skins) ================= */
body{transition:background-color .6s ease}
#skinGlow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:
    radial-gradient(120% 46% at 50% -8%, var(--skG1,transparent) 0%, transparent 72%),
    radial-gradient(90% 34% at 50% 108%, var(--skG2,transparent) 0%, transparent 70%)}
:root[data-skin] #skinGlow{opacity:1}
:root[data-skin] #ambient{background:
    radial-gradient(135% 56% at 50% -6%, rgba(var(--skGlowRGB),.34) 0%, rgba(var(--skGlowRGB),.12) 38%, transparent 74%),
    radial-gradient(86% 32% at 50% 104%, rgba(var(--skGlow2RGB),.18) 0%, transparent 70%)}
:root[data-skin] .clock{text-shadow:0 0 calc(var(--glow)*34px) rgba(var(--skGlowRGB),calc(var(--glow)*.55))}

/* hearth overlay: particles + holiday pill */
.hearth .tiltbtn,.hearth .hint{z-index:3}
#skinFx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.skPill{position:absolute;top:8px;left:14px;z-index:3;display:flex;align-items:center;gap:8px;
  border-radius:99px;padding:4px 5px 4px 12px}
.skPill.hidden{display:none}
.skPill .lbl{border:0;background:none;font-size:0.75rem;
  display:flex;align-items:center;gap:6px}
.skPill .lbl .em{font-size:0.875rem;line-height:1}
.skPill .x{border:0;width:24px;height:24px;border-radius:12px;
  font-size:0.8125rem;line-height:24px;padding:0}

/* switches */
.skSw{flex:0 0 auto;width:51px;height:31px;border-radius:16px;border:0;padding:0;
  background:var(--glass3);transition:background-color .22s}
.skSw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;
  background:var(--white);transition:transform .24s cubic-bezier(.3,.8,.3,1.15)}
.skSw[aria-checked="true"]::after{transform:translateX(20px)}
.skSw.sm{width:38px;height:23px;border-radius:12px}
.skSw.sm::after{width:19px;height:19px;top:2px;left:2px}
.skSw.sm[aria-checked="true"]::after{transform:translateX(15px)}
.skSw:disabled{opacity:.4}

/* now-screen holiday card */
.skCard{padding:16px 16px 14px}
.skCard.hidden{display:none}
.skCard .eye{margin:0 0 2px}
.skCard h3{font-size:1.5rem;margin:0 0 2px;line-height:1.15}
.skCard .sub{font-size:0.9062rem;color:var(--label2);margin:0 0 12px}
.skArt svg{display:block;width:100%;height:auto}

/* theme sheet */
.skHead{display:flex;align-items:center;gap:12px;background:var(--glass3);border-radius:18px;padding:14px 14px 14px 16px;margin:6px 0 10px}
.skHead .t{flex:1}
.skHead b{display:block;font-size:1rem}
.skHead span{display:block;font-size:0.8438rem;line-height:1.4;color:var(--label2);margin-top:2px}
.skList{background:var(--glass3);border-radius:18px;padding:2px 14px;margin:0 0 6px;transition:opacity .2s}
.skList.dim{opacity:.45}
.skRow{display:flex;align-items:center;gap:11px;min-height:58px;border-bottom:.5px solid var(--sep)}
.skRow:last-child{border-bottom:0}
.skRow .em{font-size:1.25rem;width:26px;text-align:center}
.skRow .t{flex:1;min-width:0}
.skRow .t b{display:block;font-size:0.9688rem;font-weight:600}
.skRow .t span{display:block;font-size:0.7812rem;color:var(--label2)}
.skRow .t span.now{color:var(--tint);font-weight:700}
.skRow .pv,#skPro .pv{border:0;background:var(--glass2);border-radius:99px;padding:6px 11px;font-size:0.7812rem;font-weight:600;color:var(--label)}
.skSec{font-size:1.0625rem;font-weight:700;margin:22px 0 2px}
.skGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 4px}
.skTile{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.skTile .sw{position:relative;display:block;height:74px;border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 .5px var(--hearthPress)}
.skTile .sw svg{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:26px;height:38px}
.skTile .sw .fxm{position:absolute;top:6px;right:8px;font-size:0.75rem;opacity:.9}
.skTile .nm{font-size:0.7812rem;font-weight:600;color:var(--label2)}
.skTile[aria-pressed="true"] .nm{color:var(--label)}
.skBlurb{min-height:42px}

/* holiday arrival sheet */
.holArt{margin:4px 0 14px}
.holArt svg{display:block;width:100%;height:auto;animation:holPop .6s cubic-bezier(.2,1.3,.4,1) .1s both}
@keyframes holPop{from{transform:scale(.9) translateY(8px);opacity:0}}
.sheet .holEye{margin:0 0 4px}

/* ================= HEALTH: food, activity, energy balance ================= */
.hRowH{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.hRowH h3{margin:0}
.hRowH .swLbl{margin:0 10px 0 auto;font-size:.8125rem;font-weight:600;color:var(--label2)}
.hProf b{color:var(--label)}
.enCard{padding:18px}
.enEmpty b{display:block;font-size:1rem;margin-bottom:3px}.enEmpty span{display:block;font-size:0.875rem;color:var(--label2);line-height:1.45}
.enHead .lbl{display:block}
.enHead .st{display:block;margin:2px 0 4px}
.enHead .st.deficit{color:var(--water)}.enHead .st.maintenance{color:var(--green)}.enHead .st.surplus{color:var(--tint)}
.enHead .sub{display:block;font-size:0.875rem;color:var(--label2);line-height:1.45}
.enBars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:120px;margin:16px 0 6px}
.eb{display:flex;flex-direction:column;align-items:center;gap:4px}
.eb .col{position:relative;flex:1;width:100%;border-radius:8px;background:var(--glass3);overflow:hidden}
.eb .zero{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sep)}
/* a day with nothing logged: a quiet dashed outline instead of a filled box */
.eb .col.nodata{background:transparent;box-shadow:inset 0 0 0 1px var(--line);background-image:repeating-linear-gradient(180deg,transparent 0 5px,color-mix(in srgb,var(--label) 4%,transparent) 5px 6px)}
.eb.today .col.nodata{box-shadow:inset 0 0 0 1px var(--edgeHi)}
.enHead .st.empty{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--label2);margin:4px 0 2px}
.eb i{position:absolute;left:18%;right:18%;border-radius:4px}
.eb i.neg{top:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--water) 80%,var(--white)),var(--water))}
.eb i.pos{bottom:50%;background:var(--tintGrad)}
.eb i.fast{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--water) 70%,var(--white)) 0 4px,var(--water) 4px 8px)}
.eb .d{font-size:0.6875rem;font-weight:650;color:var(--label3)}.eb.today .d{color:var(--label)}
.eb.today .col{box-shadow:inset 0 0 0 1px var(--edgeHi)}
.enToday{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.enToday div{border-radius:14px;background:var(--glass3);padding:10px 12px}
.enToday span{display:block;font-size:0.75rem;color:var(--label2)}
.enToday b{display:block;font-variant-numeric:tabular-nums}
.enToday b.neg{color:var(--water)}.enToday b.pos{color:var(--tint)}
.eb[data-day]{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Health: which day it shows (arrows, or tap the date for a picker) and a past day at a glance */
.dayNav{display:flex;align-items:center;gap:4px;margin:0 0 var(--sp-3);padding:3px;border-radius:var(--r-pill);background:var(--glass3)}
.dayNav.past{box-shadow:inset 0 0 0 1px var(--edgeHi)}
.dnArr{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:none;color:var(--label);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dnArr svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dnArr:active{background:var(--glass2)}.dnArr:disabled{opacity:.28;cursor:default;background:none}
.dnMid{position:relative;flex:1;min-width:0;text-align:center;line-height:1.25;border-radius:14px}
.dnMid b{display:block;font-size:1rem;font-weight:700}.dayNav.past .dnMid b{color:var(--tint)}
.dnMid span{display:block;font-size:.75rem;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dnMid input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;font-size:16px}
.dnMid:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.dsHead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.dsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:430px){.dsGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dsT{min-width:0;border:0;margin:0;font:inherit;color:inherit;text-align:left;border-radius:14px;background:var(--glass3);padding:10px 12px}
.dsT span{display:block;font-size:.75rem;color:var(--label2)}
.dsT b{display:block;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsT small{display:block;margin-top:2px;font-size:.6875rem;line-height:1.3;color:var(--label3)}
button.dsT{cursor:pointer;-webkit-tap-highlight-color:transparent}button.dsT:active{background:var(--glass2)}
.fDayNote{margin:-6px 0 12px;text-align:center;font-size:.8125rem;font-weight:650;color:var(--tint)}
/* your layout: cards switched off in Customize, and the sheet's rows */
.lyOff{display:none!important}
.btn.text.custLink{display:block;margin:6px auto 10px;color:var(--label2)}
.cuH{margin:22px 0 4px}
.cuRow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:.5px solid var(--sep)}
.cuT{flex:1;min-width:0}.cuT b{display:block;font-size:.9375rem;font-weight:600}
.cuT span{display:block;margin-top:1px;font-size:.8125rem;line-height:1.35;color:var(--label2)}
.cuBtns{display:flex;align-items:center;gap:6px;flex:none}
.cuAdd{margin-top:12px}
:root[data-mode="simple"] .custLink,:root[data-mode="simple"] #custCard,:root[data-mode="simple"] #hmCust{display:none!important}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.mc{border-radius:14px;padding:10px 12px;background:var(--glass3);box-shadow:inset 3px 0 0 var(--mc)}
.mc.p{--mc:#F07A5A}.mc.c{--mc:#F5B82E}.mc.f{--mc:#7FB6F0}
.mc b{display:block}.mc b small{font-size:0.75rem;color:var(--label2);margin-left:1px}
.mc span{font-size:0.75rem;color:var(--label2)}.mc em{display:block;font-style:normal;font-size:0.7188rem;color:var(--label3);margin-top:2px}
.fm{margin-bottom:10px}.fmH{display:flex;justify-content:space-between;font-size:0.8125rem;color:var(--label2);margin:8px 0 2px}.fmH b{color:var(--label)}
.fi{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:.5px solid var(--sep)}
.fi .t{flex:1;min-width:0}.fi .t b{display:block;font-size:0.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi .t span{display:block;font-size:0.7812rem;color:var(--label2)}.fi .v{font-size:0.9062rem;font-weight:650;font-variant-numeric:tabular-nums}
.fi .x,.fr .x{border:0;background:none;color:var(--label3);font-size:1.25rem;width:30px;height:36px;padding:0}
.hBtns{flex-wrap:wrap;margin-top:12px}
.acRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.ac{border-radius:14px;padding:10px 12px;background:var(--glass3)}.ac b{display:block}.ac span{font-size:0.75rem;color:var(--label2)}
.hConn{margin-top:12px;padding-top:12px;border-top:.5px solid var(--sep)}
.seg4{display:grid;grid-template-columns:repeat(4,1fr)}
.seg5{display:grid;grid-template-columns:repeat(5,1fr)}
.fRes h4{margin:14px 0 4px}
.fRes h4.fMoreH{border-top:1px solid var(--sep);padding-top:12px;margin-top:4px}
.fr{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;border:0;border-bottom:.5px solid var(--sep);background:none;color:var(--label);text-align:left;padding:0 2px}
.fr .t{flex:1;min-width:0}.fr .t b{display:block;font-size:0.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr .t span{display:block;font-size:0.7812rem;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fr .v{font-weight:650;color:var(--label2)}
.qty{display:flex;align-items:center;margin:4px 0 12px}
.qty button{width:44px;height:44px;border-radius:50%;border:0;color:var(--label);font-size:1.375rem}
.qty b{font-size:1.625rem;min-width:44px;text-align:center}.qty span{color:var(--label2)}
.macRow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.macRow div{border-radius:12px;background:var(--glass3);padding:9px;text-align:center}.macRow b{display:block;font-size:1.0625rem}.macRow span{font-size:0.7188rem;color:var(--label2)}
.scanBox{margin-top:4px}
.scanLine{position:absolute;left:12%;right:12%;top:50%;height:2px;background:var(--tint);box-shadow:0 0 12px var(--tint);animation:scanL 1.6s ease-in-out infinite alternate}
@keyframes scanL{from{transform:translateY(-40px)}to{transform:translateY(40px)}}
.phBox{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 10px 10px}
.phBox .em{font-size:2.75rem}.phBox b{font-size:1.125rem;margin-top:6px}.phBox>span{font-size:0.875rem;color:var(--label2);margin-top:4px;max-width:300px}
label.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-align:center}.phBox label.btn{flex:none}
.phItem{border-radius:16px;background:var(--glass3);padding:12px;margin-top:10px}
.phItem .nm{font-weight:650;margin-bottom:8px}
.phN{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.phN label{display:flex;flex-direction:column;gap:2px;font-size:0.6875rem;color:var(--label2);text-align:center}
.phN input{padding:9px 6px;text-align:center;font-size:0.9375rem}

/* diagnostics */
.diag{margin:10px 0 0;font-size:0.8125rem}
.diag div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:.5px solid var(--sep)}
.diag div:first-child{border-top:0}
.diag dt{color:var(--label2)}
.diag dd{margin:0;text-align:right;overflow-wrap:anywhere;font-weight:600}

/* ================= LAUNCH DESIGN PASS =================
   Uses the tokens at the top. Brand mark, one button hierarchy, 44pt targets, calmer layout fixes. */

/* brand */
.wordmark{display:inline-flex;align-items:center;flex:0 0 auto}
.wordmark img{flex:0 0 auto}
.gate .gateMark{display:block}

/* buttons: primary (filled) · secondary (.ghost) · tertiary (.text) · destructive (.danger) */
:root{--tintGrad:linear-gradient(180deg,#E2521D 0%,#B8350C 100%)}
.btn{
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast),box-shadow var(--t-med),background-color var(--t-med)}
.btn.ghost,.btn.text{text-shadow:none}
.btn.sm{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.text{-webkit-backdrop-filter:none;backdrop-filter:none;min-width:0}
.btn.danger{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 45%,transparent)}
.btn .ic,.pill .ic{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 44pt touch targets without changing how things look */
.chatBtn{position:relative}
.chatBtn::before{content:"";position:absolute;inset:-2px}
.chatBtn svg{width:20px;height:20px}
header.bar{gap:var(--sp-3)}
.barR{min-width:0;gap:var(--sp-2)}
.status{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.skSw{position:relative}
.tiltbtn::after{content:"";position:absolute;inset:-7px -4px}
.skSw::before{content:"";position:absolute;inset:-10px -6px}
#hShowKcal{width:51px;height:31px;border-radius:16px}
#hShowKcal::after{width:27px;height:27px}
#hShowKcal[aria-checked="true"]::after{transform:translateX(20px)}

/* even button rows instead of ragged wrapping */
.hBtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.hBtns .btn{min-width:0;padding-left:8px;padding-right:8px;white-space:nowrap}
.hBtns:has(> .btn:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.rowbtns.even{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--sp-2)}
.rowbtns.even .btn{min-width:0;padding-left:10px;padding-right:10px}

/* Now screen: no dead space when there's no "next checkpoint" line */
.nextup:empty{min-height:0;margin:0}
.phase-now.idle{font-size:var(--fs-title3)}

/* keep text legible where content scrolls under the floating tab bar */
.tabFade{position:fixed;left:0;right:0;bottom:0;height:calc(96px + env(safe-area-inset-bottom,0px));z-index:29;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 45%,transparent 100%)}

/* cards, sheets, fields share one radius + spacing scale */
.card{margin-bottom:var(--sp-3)}
input.f,select.f,textarea.f{min-height:var(--hit)}
.note{font-size:var(--fs-footnote)}

/* inline icons that replaced UI emoji */
.ic{display:inline-block;vertical-align:-3px;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.phBox .ic{width:44px;height:44px;stroke:var(--tint);stroke-width:1.5}
.frPro .ic{width:22px;height:22px;stroke:var(--tint)}
.gCard .fav .ic{width:14px;height:14px;fill:var(--tint);stroke:none;vertical-align:-2px}

/* calmer empty + loading states */
.empty,.chartEmpty,.frEmpty{color:var(--label2)}
.skel{display:block;height:14px;border-radius:7px;margin:10px 0;background:linear-gradient(90deg,var(--glass3) 0%,var(--glass2) 50%,var(--glass3) 100%);
  background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.hint{color:var(--label2)}
.gate .btn.text{width:100%}
.gateLegal{text-align:center;margin-top:14px}
.acctConfirm{margin-top:14px;padding:14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--red) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 35%,transparent)}
.acctConfirm b{display:block;margin-bottom:4px}
.acctConfirm .btn:not(.ghost){box-shadow:none}
.legalLinks{text-align:center;font-size:var(--fs-footnote);color:var(--label2);margin:6px 0 24px}
.legalLinks a{color:var(--label2);text-decoration:underline;text-underline-offset:2px}

/* ================= ASHY ================= */
.ashyAv{width:32px;height:32px;flex:0 0 auto;animation:smolder 3.4s ease-in-out infinite}
.ashyAv.big{width:76px;height:76px;animation-duration:4s}
@keyframes smolder{0%,100%{filter:drop-shadow(0 0 2px rgba(255,110,40,.3));transform:translateY(0)}50%{filter:drop-shadow(0 0 8px rgba(255,120,40,.65));transform:translateY(-1.5px)}}
.ashyBtn{background:transparent!important}
.ashyBtn .ashyAv{width:34px;height:34px}
.ashyHead{display:flex;align-items:center;gap:var(--sp-3);margin:10px 0 14px}
.ashyHead h1.lg{margin:0 0 2px}
.ashyHead .lede{margin:0}
.ashyLive{width:76px;height:84px;flex:0 0 auto;margin:-8px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.msg.ai{display:flex;gap:10px;align-items:flex-start;color:var(--label);white-space:normal}
.msg.ai .bub{border-radius:6px 20px 20px 20px;padding:11px 15px;
  white-space:pre-wrap;min-width:0;max-width:calc(100% - 42px);animation:bubIn var(--t-med) var(--ease-out)}
.msg.you{animation:bubIn var(--t-med) var(--ease-out)}
@keyframes bubIn{from{opacity:0;transform:translateY(6px) scale(.98)}}
.dots{display:inline-flex;gap:4px;padding:4px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--tint);opacity:.35;animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ashyAv,.dots i,.msg.ai .bub,.msg.you{animation:none}}

/* ================= ARCADE ================= */
.gameTop #gPause{margin-left:auto;margin-right:8px;width:44px;height:38px;padding:0;display:flex;align-items:center;justify-content:center}
.gameTop #gPause .ic{width:18px;height:18px;stroke-width:2.4}
.gMenu{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;overflow-y:auto;color:var(--white);
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,90,44,.3),transparent 60%),#0B0706;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.gMenu.on{display:flex}
.gmTop{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:10px}
.gmTop h2{flex:1;margin:0;font-size:1.5rem;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmBack,.gmX{border:0;color:var(--white);border-radius:99px;padding:10px 16px;min-height:44px;font-weight:600}
.gmBody{max-width:560px;width:100%;margin:0 auto}
.gmLede,.gmHero p{color:rgba(245,230,225,.72);font-size:.9375rem;line-height:1.5;margin:0 0 14px}
.gmHint{font-size:.8125rem!important;color:rgba(255,190,150,.85)!important}
.gmHero{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:10px}
.gmHero .gmArt{width:100%;border-radius:20px;margin-bottom:8px}
.gmGame{display:flex;align-items:center;gap:14px;width:100%;text-align:left;color:var(--white);border:0;
  border-radius:20px;padding:12px;margin-bottom:10px}
.gmGame .gmArt{flex:0 0 auto}
.gmGame .t{flex:1;display:flex;flex-direction:column}.gmGame .t b{font-size:1.0625rem}.gmGame .t span{font-size:.8125rem}
.gmGame .go{font-size:1.6rem}
.gmLevels{display:flex;flex-direction:column;gap:8px}
.gmLv{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;text-align:left;color:var(--white);border:0;border-radius:16px;
  padding:10px 14px}
.gmLv .n{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(255,255,255,.1);flex:0 0 auto}
.gmLv .t{flex:1;display:flex;flex-direction:column}.gmLv .t span{font-size:.8125rem}
.gmLv .s{font-weight:700;font-size:.875rem;color:#FF9366}.gmLv .s .ic{width:20px;height:20px}
.gmLv.done .n{background:rgba(76,201,138,.25);color:var(--mint)}.gmLv.done .s{color:var(--mint)}
.gmLv.inf .n{background:rgba(124,92,255,.3);color:#CBBEFF}
.gmArt{display:block}
.gmArt-run{background:radial-gradient(14px 18px at 30% 62%,var(--gold),var(--emberOrange) 60%,transparent 62%),linear-gradient(180deg,#1B1033,#5A2748 60%,#C4563A 62%,#2B1B14 64%)}
.gmArt-up{background:radial-gradient(12px 16px at 50% 40%,var(--gold),var(--emberOrange) 60%,transparent 62%),linear-gradient(90deg,transparent 18%,var(--emberBrown) 18%,var(--emberBrown) 44%,transparent 44%) 0 76%/100% 8px no-repeat,
  linear-gradient(90deg,transparent 56%,var(--emberBrown) 56%,var(--emberBrown) 86%,transparent 86%) 0 58%/100% 8px no-repeat,linear-gradient(180deg,#050A1E,#12224A 60%,#2B2F6E)}
.gmArt-keep{background:radial-gradient(12px 16px at 26% 66%,var(--gold),var(--emberOrange) 60%,transparent 62%),radial-gradient(10px 12px at 74% 64%,#5AA8F0 70%,transparent 72%),
  repeating-linear-gradient(0deg,var(--shade35) 0 2px,transparent 2px 22px),linear-gradient(180deg,#0B0710,#1E1224 60%,#3A1A1A 74%,#3A2A2A 76%)}
.cravGames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cgTile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:18px;padding:8px 8px 10px;text-align:left;
  background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge);color:var(--label)}
.cgTile .gmArt{width:100%;aspect-ratio:1.25;border-radius:12px;margin-bottom:6px}
.cgTile b{font-size:.875rem;letter-spacing:-.01em}.cgTile span:last-child{font-size:.75rem;color:var(--label2)}
.cgNote{font-size:var(--fs-footnote)!important;margin:2px 0 6px!important}

/* ===== craving tools grid + breathe ===== */
.cravGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cOpt{display:flex;align-items:center;gap:11px;border:0;border-radius:18px;padding:12px;text-align:left;color:var(--label);
  background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge);min-height:64px}
.cOpt.wide{grid-column:1/-1;padding:14px}
.cOpt .ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cOpt.wide .ico{width:44px;height:44px}
.cOpt .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cOpt b{display:block;font-size:0.9375rem;letter-spacing:-.012em}
.cOpt b+span{display:block;font-size:0.75rem;color:var(--label2);line-height:1.3;margin-top:1px}
.cOpt.wide b{font-size:1.0625rem}.cOpt.wide b+span{font-size:0.8125rem}
.cOpt:active{transform:scale(.98)}
#brWrap{background:radial-gradient(120% 70% at 50% 40%,rgba(80,150,210,.18),transparent 70%),var(--bg)}
#brWrap .pzTop .hud{color:var(--label2);font-variant-numeric:tabular-nums}
#brWrap .pzTop button{background:var(--glass3);color:var(--label);box-shadow:inset 0 0 0 .5px var(--edge)}
.brBody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;text-align:center}
.brStage{position:relative;width:min(72vw,300px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.brOrb{position:absolute;inset:0;border-radius:50%;transform:scale(.55);opacity:.75;
  background:radial-gradient(circle at 50% 42%,rgba(160,215,255,.9),rgba(90,160,225,.55) 55%,rgba(60,120,200,.15) 72%,transparent 73%);
  box-shadow:0 0 60px rgba(90,160,225,.35);transition:transform 4s cubic-bezier(.45,0,.55,1),opacity 4s}
.brOrb.in{transform:scale(1);opacity:1}
.brOrb.out{transform:scale(.55);opacity:.7;transition-duration:6s}
.brOrb.rest{transform:scale(.7);transition-duration:1.2s}
.brCue{position:relative;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--label)}
.brSub{font-size:1rem;color:var(--label2);line-height:1.45;max-width:320px;margin:28px 0 18px;min-height:46px}
.brBtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media (prefers-reduced-motion:reduce){.brOrb,.brOrb.in,.brOrb.out,.brOrb.rest{transform:scale(.8)}}
.skPill .lbl{min-height:44px;margin:-10px 0;padding:0 6px 0 2px}   /* a comfortable tap target without changing the look */

/* =====================================================================
   CINDER — EDITORIAL SYSTEM
   Paper and ink. One serif for moments, one sans for everything else, hairlines instead of glass,
   and the fire is the only thing allowed to glow. Everything above this line is layout; this layer
   owns the look. Uses the tokens at the top of the file.
   ===================================================================== */
:root{--tintGrad:linear-gradient(180deg,color-mix(in srgb,var(--tint) 88%,#fff),var(--tint));--r-card:22px}
body{font-family:var(--sans);font-size:1rem;line-height:1.5;letter-spacing:0;font-weight:400;
  font-feature-settings:"ss01" 0;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--tint) 28%,transparent)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:10px}
body::after{opacity:.035;mix-blend-mode:multiply}
:root[data-theme="dark"] body::after{opacity:.05;mix-blend-mode:overlay}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{opacity:.05;mix-blend-mode:overlay}}
:root[data-mode="simple"] body::after{display:none}

/* ---- type ---- */
h1.lg,h2.sec,.display,.card h3,.sheet h3,.gate h1,.ftitle,.qtext,.bEmpty h3,.gameOver h2,.gmTop h2,.skCard h3,.enHead .st,
.gNextIn b,.rfNow h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
h1.lg{font-size:2.75rem;line-height:1.02;margin:14px 0 8px}
h2.sec{font-size:2rem;line-height:1.05;margin:34px 0 12px}
p.lede{font-size:1rem;line-height:1.55;color:var(--label2)}
.card h3{font-size:1.5rem;line-height:1.12;margin:0 0 10px}
.sheet h3{font-size:2rem;line-height:1.05;margin:0 0 10px}
.eyebrow,.fcat,.refs h4,.enHead .lbl,.dsHead .lbl,.cuH,.gNextIn .lbl,.skCard .eye,.sheet .holEye,#mealBody h4,.fRes h4{
  font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{display:block;margin:22px 0 10px}
.qtext{font-size:1.875rem;line-height:1.16;font-weight:400}
.ftitle{font-size:2.125rem;line-height:1.06}
.fbody{font-family:var(--sans);font-size:1.0625rem;line-height:1.62}
.favrow .fq,.bi.txt .tq{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.25;letter-spacing:0}
.bi.l.txt .tq,.bi.m.txt .tq{font-size:1.625rem}
.stat .v,.rc b,.chartHead .chv b,.enToday b,.mc b,.ac b,.qty b,.wamt b,.macRow b{font-family:var(--serif);font-weight:400;letter-spacing:0}
.rc b{font-size:1.875rem}.stat .v{font-size:1.5rem}.chartHead .chv b{font-size:2.5rem}.enToday b,.ac b{font-size:1.5rem}.mc b{font-size:1.625rem}
.enHead .st{font-size:2rem;line-height:1.08}
.pzSub{font-family:var(--serif);font-weight:400;letter-spacing:0}
.pzSub.long{font-family:var(--sans)}
.gameTop .hud,.pzTop .hud,.stage .hrs{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* ---- header ---- */
header.bar{padding:12px 16px 8px 20px}
.wordmark{font-family:var(--serif);font-size:1.875rem;font-weight:400;letter-spacing:-.015em;gap:8px;line-height:1}
.wordmark img{width:30px;height:30px;margin:-4px 0 0 -4px}
.status{background:none;box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;
  font-weight:500;font-size:.8125rem;padding:7px 13px 7px 11px;color:var(--label2)}
.status .sdot{background:var(--label3)}
.status.on{color:var(--label)}
.status.on .sdot{background:var(--tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 22%,transparent)}
.chatBtn{background:none;box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.chatBtn svg{stroke-width:1.6}
.ashyBtn{box-shadow:none!important}
header.bar.scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent);box-shadow:0 1px 0 var(--sep)}

/* ---- hearth chrome sits on the dark firebox in every theme ---- */
.tiltbtn,.skPill,.frMore{color:var(--hearthInk);box-shadow:inset 0 0 0 1px rgba(255,240,230,.14);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);font-weight:500}
.skPill .lbl{color:var(--hearthInk);font-weight:500}
.skPill.off .lbl{color:rgba(244,239,233,.6)}
.skPill .x{background:var(--hearthPress);color:var(--white)}
.skPill .skSw{background:rgba(255,255,255,.16);box-shadow:none}
.skPill .skSw[aria-checked="true"]{background:var(--hearthInk)}
.skPill .skSw[aria-checked="true"]::after{background:#1B1714}
.hint{font-size:.75rem;letter-spacing:.02em}

/* ---- the Now screen ---- */
.hero{padding:10px 4px 0}
.hero.idle .liveP,.hero:not(.idle) .idleP{display:none}
.hero.idle #backdate{display:none}
.display{font-size:clamp(2.6rem,11.4vw,3.6rem);line-height:.98;margin:8px 0 12px}
.lede2{font-size:1.0625rem;line-height:1.5;color:var(--label2);margin:0;max-width:34ch}
.pchips,.goalpick{display:flex;flex-wrap:wrap;gap:8px}
.pchips button,.goalpick button,.chips button,.gChips button,.bdChips button,.chChips button,.qFilt button,.wchips button,.breakChip,.pill{
  border:0;border-radius:99px;min-height:40px;padding:0 16px;background:none;color:var(--label);font-family:var(--sans);
  font-size:.9375rem;font-weight:500;letter-spacing:0;box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;font-variant-numeric:tabular-nums;
  transition:background-color .18s,color .18s,box-shadow .18s,transform .16s cubic-bezier(.2,.8,.2,1)}
.pchips button[aria-checked="true"],.goalpick button.sel,.bdChips button.sel,.chips button[aria-pressed="true"],.gChips button[aria-pressed="true"],
.qFilt button[aria-pressed="true"],.chChips button[aria-pressed="true"],.gfWd button[aria-pressed="true"]{background:var(--ink);color:var(--onInk);box-shadow:inset 0 0 0 1px var(--ink)}
.wchips button.sel{background:var(--water);color:var(--waterInk);box-shadow:none}
.idleNote{font-size:.875rem;line-height:1.45;color:var(--label2);margin:18px 0 0;min-height:1.45em}
.liveP .since{margin:16px 0 0;min-height:0}
.clock{font-family:var(--serif);font-weight:400;font-size:clamp(78px,25vw,116px);line-height:1;letter-spacing:0;
  margin:6px 0 0 -2px;display:flex;align-items:flex-end;color:var(--label);font-variant-numeric:lining-nums}
.clock .rl .dg{width:.46em;text-align:center}
.rl .col{line-height:1em}
.clock .rl .sep{width:.22em;text-align:center;transform:translateY(-.05em)}
.clock .sec{font-size:.3em;font-weight:400;color:var(--label3);letter-spacing:0;margin:0 0 .37em .12em;padding:0}
.clock .sec .rl .sep{width:.3em}
.clock{filter:none!important;text-shadow:none!important}
:root[data-theme="dark"] .clock{filter:drop-shadow(0 0 calc(var(--glow)*18px) rgba(255,110,50,calc(var(--glow)*.45)))!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .clock{filter:drop-shadow(0 0 calc(var(--glow)*18px) rgba(255,110,50,calc(var(--glow)*.45)))!important}}
:root[data-mode="simple"] .clock{filter:none!important}
.phase-now{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.875rem;line-height:1.1;letter-spacing:-.005em;color:var(--tint);margin:8px 0 0}
.phase-now.idle{color:var(--label2)}
.nextup{font-size:.9375rem;color:var(--label2);margin-top:6px}
.nextup b{font-weight:500;color:var(--label)}
.goalMeter{position:relative;height:2px;border-radius:2px;background:var(--line);margin:22px 0 0;overflow:hidden}
.goalMeter i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.goalMeter.met i{background:var(--tint)}
.goalrow{margin-top:4px}
.goalchip{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;background:none;box-shadow:none;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;font-size:.9375rem;font-weight:400;color:var(--label2);text-align:left}
.goalchip b{color:var(--label);font-weight:600}
.goalchip .gcm{color:var(--label2)}
.goalchip .gcm::before{content:"\00B7";margin:0 8px 0 0;color:var(--label3)}
.goalchip .gcc{margin-left:auto;color:var(--label);font-weight:500;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.goalpick{margin:4px 0 6px}
.goalWarn{font-size:.8438rem;font-weight:500}
.breakChip{min-height:36px;padding:0 14px 0 10px;margin:6px 0 0;font-size:.8438rem;color:var(--label2)}
.rowbtns.heroBtns{display:grid;margin:26px 0 6px}
.heroBtns #toggle{grid-column:1/-1}
.hero.idle .heroBtns #gameBtn{
  text-decoration-color:var(--line2);text-underline-offset:4px}
.heroBtns .btn{min-width:0;width:100%}
.heroBtns #backdate{min-height:52px;font-size:1rem}
#gameBtn{min-height:52px;font-size:1rem;padding:0 12px;overflow:hidden}
.cravT{display:inline-block;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}
.cravT.out{opacity:0;transform:translateY(-6px)}

/* ---- buttons: ink primary, hairline secondary, text tertiary ---- */
.btn{background:var(--ink);color:var(--onInk);border-radius:99px;min-height:56px;padding:0 24px;font-family:var(--sans);
  font-size:1.0625rem;font-weight:500;letter-spacing:0;box-shadow:none;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.sm{min-height:44px;padding:0 18px;font-size:.9375rem;border-radius:99px;box-shadow:none}
.btn.ghost,.btn.sm.ghost{background:none;color:var(--label);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.text{background:none;color:var(--label);box-shadow:none;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.btn.danger{background:none;color:var(--red);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 50%,transparent)}
.btn:active:not(:disabled){transform:scale(.98);opacity:.86}
.btn:disabled{opacity:.32}
@media (hover:hover){.btn:hover:not(:disabled){filter:brightness(1.08)}.btn.ghost:hover:not(:disabled){background:var(--glass2)}}
#wPlus{background:var(--water);color:var(--waterInk);box-shadow:none}
.acctConfirm .btn:not(.ghost){background:var(--red);color:var(--white)}
.fab{background:var(--ink);color:var(--onInk);box-shadow:var(--lift);font-weight:300}

/* ---- surfaces: solid paper, a hairline, a shadow you only notice when it's gone ---- */
.card,.stage,.qcard,.factCard,.bi,.vCard,.favrow,.gCard,.unlockBar,.bEmpty,.gDay,.toast{
  background:var(--solid);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--edge),var(--shadow)}
.card{border-radius:var(--r-card);padding:20px}
.stage{border-radius:20px}
.card p,.sheet p{color:var(--label2)}
.wcard{margin-top:26px}
.qcard,.factCard{border-radius:26px;padding:26px 24px}
input.f,select.f,textarea.f,.askbox textarea,.pzType input{background:var(--glass3);box-shadow:inset 0 0 0 1px var(--edge);border-radius:14px;
  font-family:var(--sans);-webkit-backdrop-filter:none;backdrop-filter:none}
input.f:focus,select.f:focus,textarea.f:focus,.askbox textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
label.f{font-weight:500;color:var(--label2)}
.msg.you{background:var(--ink);color:var(--onInk);box-shadow:none}
.msg.ai .bub{background:var(--solid);box-shadow:inset 0 0 0 1px var(--edge)}

/* segmented controls read like the chips: ink marks the choice */
.seg{background:var(--glass3);box-shadow:none;border-radius:99px;padding:3px}
.seg button{border-radius:99px;font-weight:500;color:var(--label2)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--onInk);box-shadow:none;font-weight:500}

/* ---- tab bar ---- */
nav.tabs{background:color-mix(in srgb,var(--solid) 84%,transparent);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--edge),var(--lift);border-radius:30px}
nav.tabs button{color:var(--label3);font-size:.6875rem;font-weight:500;letter-spacing:.01em}
nav.tabs button[aria-selected="true"]{color:var(--label)}
nav.tabs button svg{stroke-width:1.6}
nav.tabs .tabInd{background:var(--glass3);box-shadow:none}
nav.tabs button.badge::after{box-shadow:0 0 0 2px var(--solid)}

/* ---- sheets, toasts ---- */
.scrim{background:rgba(12,10,9,.44);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes scrimIn{from{background:rgba(12,10,9,0)}}
@keyframes scrimOut{to{background:rgba(12,10,9,0)}}
.sheet,:root[data-theme="light"] .sheet{background:var(--solid);border-radius:28px 28px 0 0;
  box-shadow:inset 0 1px 0 var(--edge),0 -30px 80px -20px var(--shade35)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .sheet{background:var(--solid)}}
.grab{width:36px;height:4px;background:var(--line2);opacity:1;margin-bottom:18px}
.toast{background:var(--ink);color:var(--onInk);box-shadow:var(--lift);border-radius:18px;font-weight:500}

/* ---- details ---- */
.stage .now,.proTag,.frPro .tag,.frBadge{background:var(--ink);color:var(--onInk)}
.stage.live .dot{background:var(--tint);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 20%,transparent)}
.stage.done .dot{background:var(--label)}
.stage .prog i,.frBar i{background:var(--ink)}
.stage.live .nm{font-weight:600}
.stage.live .hrs{color:var(--tint)}
.unlockBar .ufire{background:color-mix(in srgb,var(--tint) 14%,transparent)}
.bigopt .ico,.cOpt .ico,.vBtn{background:var(--ink);color:var(--onInk);box-shadow:none}
.bigopt .ico svg,.vBtn svg{stroke:var(--onInk)}
.vBtn svg{fill:var(--onInk);stroke:none}
.cOpt.wide .ico{background:var(--water);color:var(--waterInk)}
.elec .eicon{background:color-mix(in srgb,#E9A21E 22%,transparent);color:var(--label)}
.elec .eicon svg{stroke:currentColor}
.wamt b{color:var(--water);font-size:3rem;line-height:1}
.moreBtn,a{color:var(--label);text-decoration-color:var(--line2)}
.moreBtn{text-decoration:underline;text-underline-offset:4px;font-weight:500}
.heart{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.gPlate{box-shadow:inset 0 -6px 12px rgba(0,0,0,.18),inset 0 3px 6px rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.14)}
.skTile[aria-pressed="true"] .sw{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.skSw[aria-checked="true"]{background:var(--ink)}
.skSw[aria-checked="true"]::after{background:var(--onInk)}
.skSw::after{box-shadow:0 1px 3px rgba(0,0,0,.25)}
.care,.ack,.bodyIns.lvl2,.feelAns.lvl2{background:color-mix(in srgb,var(--red) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 32%,transparent)}
.tl{gap:10px}

/* ---- onboarding ---- */
.gate{background:var(--bg)}
.gate h1{font-size:2.75rem;line-height:1.02;margin:0 0 16px}
.gate p{font-size:1rem}
.gate li::marker{color:var(--label3)}
.gate .gateMark{width:76px;height:76px;margin:6px 0 20px -6px;filter:none;background:none;box-shadow:none;border-radius:0}

@media (prefers-reduced-motion:reduce){.cravT,.goalMeter i{transition:none}}

/* ---- the clock's seconds roll quickly so they rest most of the second ---- */
.clock .sec .col{transition-duration:.32s}
/* firelight on paper: present, never a wash */
:root[data-theme="light"] #ambient{background:radial-gradient(130% 46% at 50% -6%,rgba(255,128,68,.16) 0%,rgba(224,88,34,.05) 40%,transparent 72%)}
@media (prefers-color-scheme:light){:root:not([data-theme]) #ambient{background:radial-gradient(130% 46% at 50% -6%,rgba(255,128,68,.16) 0%,rgba(224,88,34,.05) 40%,transparent 72%)}}

/* ---- onboarding: choose a style ---- */
.modeOpt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:0;border-radius:22px;padding:16px;margin:0 0 12px;
  color:var(--label);background:var(--solid);box-shadow:inset 0 0 0 1px var(--edge),var(--shadow)}
.modeOpt .t b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;margin-bottom:4px}
.modeOpt .t span{display:block;font-size:.9062rem;line-height:1.45;color:var(--label2)}
.mPrev{position:relative;flex:0 0 auto;width:66px;height:92px;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  gap:4px;padding:0 8px 9px;background:#F2EDE7;box-shadow:inset 0 0 0 1px var(--shade08)}
.mPrev i{position:absolute;left:0;right:0;top:0;height:44px;background:radial-gradient(14px 18px at 50% 78%,var(--gold),var(--emberOrange) 55%,transparent 60%),
  repeating-linear-gradient(0deg,var(--shade35) 0 1px,transparent 1px 7px),linear-gradient(#4A2C1C,#2A1810)}
.mPrev b{display:block;height:5px;border-radius:3px;background:rgba(27,23,20,.18)}
.mPrev b:first-of-type{width:80%;height:8px;background:#1B1714}
.mSimple{background:var(--white)}
.mSimple i{filter:grayscale(1) contrast(1.15);height:54px}
.mSimple b:first-of-type{width:70%;background:var(--black)}

/* =================== FAST ONLY =================== */
:root[data-mode="simple"] #waterCard,:root[data-mode="simple"] #bodyCard,:root[data-mode="simple"] #frStrip,:root[data-mode="simple"] #skCard,
:root[data-mode="simple"] #frBtn,:root[data-mode="simple"] #chatBtn,:root[data-mode="simple"] #frNotes,:root[data-mode="simple"] #hSeg,
:root[data-mode="simple"] nav.tabs button[data-p="board"],:root[data-mode="simple"] nav.tabs button[data-p="ask"],
:root[data-mode="simple"] #plSeg,:root[data-mode="simple"] #breakChip{display:none!important}
:root[data-mode="simple"] nav.tabs{grid-template-columns:repeat(3,1fr);left:50%;right:auto;width:min(300px,calc(100% - 28px));transform:translateX(-50%)}
:root[data-mode="simple"] #fire,:root[data-mode="simple"] #skinFx,:root[data-mode="simple"] .wordmark img,:root[data-mode="simple"] .gateMark,
:root[data-mode="simple"] .seal,:root[data-mode="simple"] .ashyAv,:root[data-mode="simple"] .skPill .em,:root[data-mode="simple"] .skRow .em,
:root[data-mode="simple"] .skTile .sw,:root[data-mode="simple"] .holArt,:root[data-mode="simple"] #wCan,:root[data-mode="simple"] .gmArt{filter:grayscale(1) contrast(1.08)}
:root[data-mode="simple"] #ambient,:root[data-mode="simple"] #skinGlow{display:none}
:root[data-mode="simple"] #wChart,:root[data-mode="simple"] #fChart{filter:grayscale(1)}
:root[data-mode="simple"] .hearth{height:min(40vh,320px)}
:root[data-mode="simple"] .status.on .sdot{box-shadow:none;animation:none}
:root[data-mode="simple"] .phase-now{color:var(--label)}
:root[data-mode="simple"] .stage.live .dot{box-shadow:0 0 0 4px var(--glass3)}
:root[data-mode="simple"] .tiltbtn,:root[data-mode="simple"] .skPill{background:var(--shade50)}
:root[data-mode="simple"] .card,:root[data-mode="simple"] .stage{box-shadow:inset 0 0 0 1px var(--line)}
:root[data-mode="simple"] .unlockBar .ufire{background:var(--glass3)}
:root[data-mode="simple"] .elec .eicon{background:var(--glass3)}
:root[data-mode="simple"] .wordmark{letter-spacing:-.02em}

/* hearth decorations canvas */
#skinFx .hfx{position:absolute;inset:0;width:100%;height:100%;display:block}

/* games and the hearth are for tapping, never for selecting text or opening the long-press menu */
.gameWrap,.gameWrap *,#pzWrap,#brWrap,.hearth,nav.tabs,.heroBtns,.pchips{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#pzWrap input,#pzWrap textarea{-webkit-user-select:text;user-select:text}
#game{touch-action:none}

/* food amounts: by serving or by weight */
.fUnit{margin:2px 0 12px}
.fUnit button:disabled{opacity:.35}
.qty{gap:10px}
.qty .qIn{width:96px;min-height:48px;border:0;border-radius:14px;text-align:center;font-family:var(--serif);font-size:1.75rem;color:var(--label);
  background:var(--glass3);box-shadow:inset 0 0 0 1px var(--edge);font-variant-numeric:tabular-nums}
.qty .qIn:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.qty span{min-width:62px}
.qty button{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.skSw{box-shadow:inset 0 0 0 1px var(--line)}
.skSw[aria-checked="true"]{box-shadow:none}
.vig{display:block;width:100%;height:auto;aspect-ratio:342/160;border-radius:16px}
.holArt .vig{animation:holPop .6s cubic-bezier(.2,1.3,.4,1) .1s both}
:root[data-mode="simple"] .holEye,:root[data-mode="simple"] .breakChip .em{filter:grayscale(1)}

/* accessibility: 44pt targets everywhere, labels that clear 4.5:1 */
.pchips button,.goalpick button,.chips button,.gChips button,.bdChips button,.chChips button,.qFilt button{min-height:44px}
.seg button{min-height:44px}
.chatBtn{width:44px;height:44px}
.eyebrow,.fcat,.refs h4,.enHead .lbl,.dsHead .lbl,.cuH,.gNextIn .lbl,.skCard .eye,.sheet .holEye,#mealBody h4,.fRes h4{color:var(--label2)}
.tiltbtn,.skPill,.frMore{background:rgba(14,11,9,.58)}

/* ---- the Now screen, decluttered: one goal row, one button, choices in sheets ---- */
.goalRow{display:flex;align-items:center;gap:12px;width:100%;margin:22px 0 0;padding:14px 16px;border:0;border-radius:18px;text-align:left;color:var(--label);
  background:var(--solid);box-shadow:inset 0 0 0 1px var(--edge),var(--shadow)}
.goalRow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.goalRow .eyebrow{margin:0}
.goalRow b{font-family:var(--serif);font-weight:400;font-size:1.625rem;line-height:1.1}
.goalRow .idleNote{margin:0;min-height:0;font-size:.8438rem}
.goalRow .chev,.adjLink+.chev{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--label3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.adjLink{display:block;border:0;background:none;padding:0;margin:0;min-height:36px;font-size:.8438rem;color:var(--label2);text-align:left;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.rowbtns.heroBtns{grid-template-columns:1fr;margin-top:22px;gap:10px}
.heroBtns #gameBtn,.hero.idle .heroBtns #gameBtn{grid-column:auto;width:100%;min-height:52px;color:var(--label);font-weight:500;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line2);white-space:normal}
.hero.idle .heroBtns #gameBtn{justify-self:center;width:auto;min-height:44px;padding:0 20px;font-size:.9375rem}
#gameBtn .cravT{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
#gameBtn::before{content:"";display:inline-block;width:16px;height:16px;margin:0 8px -2px 0;flex:0 0 auto;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.8L18.6 9.6 13.8 11.4 12 16.2 10.2 11.4 5.4 9.6 10.2 7.8Z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.8L18.6 9.6 13.8 11.4 12 16.2 10.2 11.4 5.4 9.6 10.2 7.8Z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8Z'/%3E%3C/svg%3E") center/contain no-repeat}
.gsChips{margin:4px 0 2px}
#startScrim .bigopt{background:var(--glass3);box-shadow:inset 0 0 0 1px var(--edge)}
#startScrim .bigopt .bt{font-size:1.0625rem;font-weight:600}

/* barcode scanner */
.scanBox{position:relative;border-radius:22px;overflow:hidden;background:var(--black);aspect-ratio:4/3}
.scanBox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanFrame{position:absolute;left:7%;right:7%;top:29%;bottom:29%;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.38);transition:box-shadow .3s}
.scanFrame i{position:absolute;width:26px;height:26px;border:3px solid var(--white);border-radius:3px}
.scanFrame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.scanFrame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0;border-top-right-radius:14px}
.scanFrame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0;border-bottom-left-radius:14px}
.scanFrame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.scanFrame .scanLine{position:absolute;left:6%;right:6%;top:50%;height:2px;border-radius:2px;background:#FF5A3C;box-shadow:0 0 12px #FF5A3C;animation:scanL 1.4s ease-in-out infinite alternate}
@keyframes scanL{from{transform:translateY(-34px)}to{transform:translateY(34px)}}
.scanBox.hit .scanFrame{box-shadow:0 0 0 999px rgba(0,0,0,.38),inset 0 0 0 3px var(--scanHit)}
.scanBox.hit .scanLine{background:var(--scanHit);box-shadow:0 0 12px var(--scanHit);animation:none}
.scanTorch{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:0;background:var(--shade50);color:var(--white);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center}
.scanTorch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.scanTorch[aria-pressed="true"]{background:var(--white);color:var(--black)}
@media (prefers-reduced-motion:reduce){.scanFrame .scanLine{animation:none}}

/* ===== arcade: real game frames and boss tiles in the menus, and buttons that read on the black game screen ===== */
#gameWrap{--gHot:#FF7A3D;--gHotInk:#1A0A04;--gFill:rgba(255,255,255,.13);--gFill2:rgba(255,255,255,.2);--gLine:rgba(255,255,255,.24);
  --gText2:rgba(250,238,232,.8);--gGood:#2FA56A;--gArtBg:#1B1033;--gScrim:rgba(0,0,0,.6);--gWarm:rgba(255,190,150,.88)}
.gmGame,.gmLv{background:var(--gFill);box-shadow:inset 0 0 0 1px var(--gLine)}
.gmGame:active,.gmLv:not(:disabled):active{background:var(--gFill2)}
.gmGame .go{color:var(--gText2)}
.gmGame .t span,.gmLv .t span{color:var(--gText2)}
.gmArt{background-color:var(--gArtBg);background-size:cover;background-position:center}
.gmHero .gmArt{height:auto;aspect-ratio:1.6;box-shadow:inset 0 0 0 1px var(--gLine)}
.gmGame .gmArt{width:96px;height:60px;border-radius:12px}
.lvArt{position:relative;flex:0 0 auto;width:72px;height:50px;border-radius:12px;background-color:var(--gArtBg);background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px var(--gLine)}
.lvArt i{position:absolute;left:4px;top:4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--gScrim);color:var(--white);font-style:normal;
  font-size:.6875rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.gmLv.done .lvArt i{background:var(--gGood)}
.gmLv .s{flex:0 0 auto;min-width:64px;text-align:center;display:flex;justify-content:center}
.gmLv:not(:disabled):not(.done) .s{background:var(--gHot);color:var(--gHotInk);border-radius:99px;padding:8px 14px}
.gmLv.next{background:linear-gradient(180deg,rgba(255,122,61,.32),rgba(184,53,12,.22));box-shadow:inset 0 0 0 1.5px var(--gHot)}
.gmLv:disabled{opacity:.7}.gmLv:disabled .lvArt{filter:grayscale(.75) brightness(.7)}
.gmLv:disabled .s{color:var(--gText2)}
.gmLv.inf .n{width:72px;height:50px;border-radius:12px;font-size:1.4rem}
.gmSplit{margin:12px 2px 0;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gWarm)}
.gmBack,.gmX{background:var(--gFill2);box-shadow:inset 0 0 0 1px var(--gLine)}
#gameWrap .btn{background:var(--gHot);color:var(--gHotInk);box-shadow:none;text-shadow:none}
#gameWrap .btn.ghost{background:var(--gFill);color:var(--white);box-shadow:inset 0 0 0 1px var(--gLine)}
#gameWrap .gameTop button{background:var(--gScrim);box-shadow:inset 0 0 0 1px var(--gLine)}

/* ===== Health: daily target ring, macro bars, the one-at-a-time warning card ===== */
.tgt{display:flex;align-items:center;gap:16px;padding-bottom:14px;margin-bottom:14px;border-bottom:.5px solid var(--sep)}
.tgtRing{position:relative;width:104px;height:104px;flex:0 0 auto}
.tgtRing svg{width:100%;height:100%;transform:rotate(-90deg)}
.tgtRing circle{fill:none;stroke-width:4;stroke-linecap:round}
.tgtRing .bg{stroke:var(--glass3)}.tgtRing .fg{stroke:var(--tint);transition:stroke-dasharray .6s ease}
.tgtRing.over .fg{stroke:var(--label2)}
.tgtRing>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tgtRing b{font-family:ui-rounded,'SF Pro Rounded',var(--sans);font-size:1.25rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.tgtRing small{font-size:.75rem;color:var(--label2)}
.tgtTxt{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.tgtTxt .lbl{font-size:.7812rem;font-weight:700;color:var(--label2)}
.tgtTxt b{font-size:1.375rem;letter-spacing:-.02em;line-height:1.2}
.tgtTxt .sub{font-size:.875rem;color:var(--label2);line-height:1.4;margin:2px 0 2px}
.tgtTxt .btn.text{padding:0;min-height:44px}
.tgtSet{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:.5px solid var(--sep)}
.tgtSet div{flex:1;min-width:0}.tgtSet b{display:block;font-size:1rem}.tgtSet span{display:block;font-size:.8125rem;color:var(--label2);line-height:1.4}
.mbar{display:block;height:4px;border-radius:99px;background:var(--glass2);margin-top:7px;overflow:hidden}
.mbar i{display:block;height:100%;border-radius:99px;background:var(--mc)}
.ngOut{margin:14px 0 4px}
.ngNums{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:6px}
.ngNums div{border-radius:14px;background:var(--glass3);padding:10px}
.ngNums b{display:block;font-family:ui-rounded,'SF Pro Rounded',var(--sans);font-size:1.0625rem;font-variant-numeric:tabular-nums}
.ngNums span{font-size:.75rem;color:var(--label2)}
/* macros: suggested, or your own grams */
.ngMac{margin:12px 0 4px;padding:12px 12px 4px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.ngMacHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ngMacHead b{font-size:.9375rem}
.seg.segSm{min-width:0;flex:0 0 auto}.seg.segSm button{padding:7px 12px;font-size:.8125rem;min-height:36px}
.ngMacIn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ngMacIn label{display:flex;flex-direction:column;gap:4px;position:relative}
.ngMacIn label span{font-size:.75rem;font-weight:600;color:var(--label2)}
.ngMacIn input.f{padding-right:26px;text-transform:none;letter-spacing:0;font-weight:600;font-variant-numeric:tabular-nums}
.ngMacIn em{position:absolute;right:11px;bottom:13px;font-style:normal;font-size:.8125rem;color:var(--label3);pointer-events:none}
#ngMacNote{margin-top:10px}
.guard{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 35%,transparent)}
.gdTop{display:flex;align-items:center;gap:10px;margin-bottom:6px}.gdTop h3{margin:0}
.gdIc{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.875rem;
  background:color-mix(in srgb,var(--tint) 16%,transparent);color:var(--tint)}
.guard p{margin:0 0 8px;font-size:.9375rem;line-height:1.5;color:var(--label)}
.guard .refs{margin:0 0 4px;padding-left:18px;font-size:.75rem;color:var(--label3)}
.guard .refs a{color:var(--label2)}
.guard .rowbtns{margin-top:8px}
@media (prefers-reduced-motion:reduce){.tgtRing .fg{transition:none}}

/* ===== toasts with an action, directional tab changes ===== */
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:14px;text-align:left;padding:8px 8px 8px 18px;width:min(calc(100vw - 32px),440px);max-width:none}
.toast.act span{flex:1;min-width:0}
.toast .tAct{flex:0 0 auto;min-height:36px;padding:0 14px;border:0;border-radius:99px;font:inherit;font-weight:700;
  background:color-mix(in srgb,var(--onInk) 16%,transparent);color:var(--onInk)}
main[data-dir="r"] .pane.on{animation-name:paneInR}
main[data-dir="l"] .pane.on{animation-name:paneInL}
@keyframes paneInR{from{opacity:0;transform:translateX(22px)}}
@keyframes paneInL{from{opacity:0;transform:translateX(-22px)}}

/* ===== fast notes, craving insight ===== */
.fnote{margin:14px 0 4px}.fnote .frRedeem{margin-top:6px}
.hist.hasNote{flex-wrap:wrap;row-gap:2px}
.hist .hn{flex-basis:100%;text-align:left;font-size:.8125rem;color:var(--label2);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cravIns{margin:6px 0 14px;padding:12px 14px;border-radius:16px;background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge)}
.cravIns b{display:block;font-size:.9375rem;margin-bottom:3px}
.cravIns span{display:block;font-size:.875rem;color:var(--label2);line-height:1.45}
#cList .cravIns{margin:12px 0 0}

/* ===== the warm layer: Ashy's corner, wardrobe, celebrations, tips ===== */
.ashyCorner{padding-top:14px}
.acTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.acTop .lbl{display:block;font-size:.7812rem;font-weight:700;color:var(--label2)}
.acTop b{display:block;font-size:1.25rem;letter-spacing:-.02em}
.wardBtn{display:flex;align-items:center;gap:6px;border:0;border-radius:99px;padding:4px 14px 4px 6px;min-height:44px;font:inherit;font-weight:650;font-size:.875rem;
  color:var(--label);background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge)}
.wardBtn img{width:34px;height:34px}
.winRow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.win{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:4px 0;min-height:56px;color:var(--label3);font:inherit}
.win svg{width:40px;height:40px;padding:9px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  background:var(--glass3);box-shadow:inset 0 0 0 1px var(--line)}
.win span{font-size:.6875rem;font-weight:650;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.win.on{color:var(--onInk)}
.win.on svg{background:var(--tint);box-shadow:none;animation:winPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes winPop{from{transform:scale(.6)}}
.warmth{height:6px;border-radius:99px;background:var(--glass3);margin:12px 0 6px;overflow:hidden}
.warmth i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--tint2),var(--tint));transition:width .6s ease}
.ashyCorner .note{margin:0}
.wdGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:6px}
#wardBody h4{margin:16px 0 8px;font-size:.7812rem;font-weight:700;color:var(--label2)}
.wd{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:18px;padding:10px 6px;font:inherit;color:var(--label);
  background:var(--glass3);box-shadow:inset 0 0 0 .5px var(--edge);min-height:118px}
.wd img{width:60px;height:60px}
.wd b{font-size:.8125rem;line-height:1.2;text-align:center}
.wd span{font-size:.6875rem;color:var(--label2);text-align:center;line-height:1.25}
.wd.on{box-shadow:inset 0 0 0 2px var(--tint)}
.wd.locked img{filter:grayscale(1) brightness(.35) contrast(.8);opacity:.55}
.wd.locked b{color:var(--label2)}
.celeb{text-align:center;position:relative;overflow:hidden}
.celebFx{position:absolute;left:0;right:0;top:0;width:100%;height:260px;pointer-events:none}
.celebArt{display:block;width:160px;height:160px;margin:4px auto 6px;position:relative}
.celebAshy{display:block;width:240px;height:200px;margin:-36px auto 0;position:relative;pointer-events:none}   /* Ash-ly performing (js/ashly-anim.js) */
.celeb .fcat{display:block;position:relative}
.celeb h3{position:relative;font-size:1.75rem;margin:4px 0 8px}
.celeb p{position:relative;max-width:420px;margin:0 auto 6px}
.celeb .sheetbtns{position:relative}
.tipPop{position:fixed;z-index:70;display:flex;gap:12px;align-items:flex-start;padding:14px 40px 14px 14px;border-radius:20px;
  background:var(--solid);color:var(--label);box-shadow:var(--lift),inset 0 0 0 .5px var(--edge);animation:tipIn .32s cubic-bezier(.2,1.2,.4,1)}
.tipPop img{width:52px;height:52px;flex:0 0 auto}
.tipPop .tx b{display:block;font-size:1rem;margin-bottom:2px}
.tipPop .tx span{display:block;font-size:.875rem;color:var(--label2);line-height:1.45}
.tipPop .btn{margin-top:10px}
.tipX{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:none;font-size:1.3rem;color:var(--label3)}
.tipPop .arw{position:absolute;top:-7px;width:14px;height:14px;background:var(--solid);transform:rotate(45deg);box-shadow:-1px -1px 0 0 var(--edge)}
.tipPop.out{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
@keyframes tipIn{from{opacity:0;transform:translateY(-8px) scale(.96)}}
#chatBtn.glow img{animation:ashyGlow 1.1s ease-out}
@keyframes ashyGlow{40%{transform:scale(1.22);filter:drop-shadow(0 0 10px var(--tint))}}
nav.tabs button.badge{position:relative}
@media (prefers-reduced-motion:reduce){.win.on svg,.tipPop,#chatBtn.glow img{animation:none}}
.fsLine{display:flex;flex-wrap:wrap;gap:4px 16px;margin:-4px 0 12px;font-size:.8125rem;color:var(--label2)}
.fsLine b{color:var(--label);font-weight:650}.fsLine em{font-style:normal;color:var(--label3)}
.fsLine small{flex-basis:100%;font-size:.75rem;color:var(--label3)}
.fFs{margin:8px 0 0}
.ngPin{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 14px;border-radius:16px;background:var(--glass3)}
.ngPin div{flex:1;min-width:0}.ngPin b{display:block;font-size:.9375rem}.ngPin span{display:block;font-size:.8125rem;color:var(--label2);line-height:1.4}
.gmRelax{display:flex;align-items:center;gap:12px;margin:6px 0 10px;padding:12px 14px;border-radius:18px;background:var(--gFill);box-shadow:inset 0 0 0 1px var(--gLine)}
.gmRelax div{flex:1;min-width:0}.gmRelax b{display:block}.gmRelax span{display:block;font-size:.8125rem;color:var(--gText2);line-height:1.4}
.gmSeason{color:var(--gWarm)!important;font-weight:600}
#gameWrap .skSw{background:var(--gFill2);box-shadow:inset 0 0 0 1px var(--gLine)}
#gameWrap .skSw[aria-checked="true"]{background:var(--gHot);box-shadow:none}
.chTrend{margin:8px 0 0;font-size:.8125rem;color:var(--label2);line-height:1.45}
.chTrend b{color:var(--label);font-weight:650}
.chTrend .dot{display:inline-block;width:14px;height:0;border-top:2px dotted var(--label);vertical-align:middle;margin-right:6px;opacity:.7}

/* ===== tally up my day ===== */
.tallyBtn{margin-top:4px}
.tlFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 10px}
.tlFacts div{border-radius:14px;background:var(--glass3);padding:9px 10px}
.tlFacts span{display:block;font-size:.75rem;color:var(--label2)}.tlFacts b{font-size:.9375rem;font-variant-numeric:tabular-nums}
.tlBal{margin:0 0 8px}
#tlBody h4{margin:14px 0 6px;font-size:.7812rem;font-weight:700;color:var(--label2)}
.tlRow{display:flex;align-items:baseline;gap:10px;padding:10px 2px;border-bottom:.5px solid var(--sep)}
.tlRow span{flex:1;color:var(--label2)}.tlRow b{font-variant-numeric:tabular-nums}
.tlRow em{font-style:normal;font-size:.8125rem;color:var(--label3);min-width:96px;text-align:right}
.tlRow em.dn{color:var(--green)}.tlRow em.up{color:var(--tint)}

/* ================= FIRE SOUNDS: the speaker under Tilt ================= */
.sndbtn{position:absolute;top:48px;right:14px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--hearthInk);background:rgba(18,14,12,.42);
  box-shadow:inset 0 0 0 1px rgba(255,240,230,.14);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:background var(--t-fast,.15s) ease,box-shadow var(--t-fast,.15s) ease}
.sndbtn::after{content:"";position:absolute;inset:-6px}
.sndbtn .ic{width:17px;height:17px;stroke-width:1.8}
.sndbtn .onI,.sndbtn.on .off{display:none}.sndbtn.on .onI{display:block}
.sndbtn.on{background:rgba(255,128,48,.34);box-shadow:inset 0 0 0 1px rgba(255,196,150,.4)}
.sndbtn.on .onI path:last-child{animation:sndWave 2.4s ease-in-out infinite}
@keyframes sndWave{50%{opacity:.35}}
:root[data-mode="simple"] .sndbtn{background:var(--shade50)}
:root[data-mode="simple"] .sndbtn.on{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
@media (prefers-reduced-motion:reduce){.sndbtn.on .onI path:last-child{animation:none}}
.arcSnd{display:flex;align-items:center;justify-content:center;padding:0!important;width:44px;height:38px;flex:0 0 auto}
.gmTop .arcSnd{width:44px;height:44px;border-radius:50%}
.gameTop .arcSnd{margin-left:auto;margin-right:8px}.gameTop .arcSnd+#gPause{margin-left:0}
.arcSnd .ic{width:18px;height:18px;stroke-width:1.9}.arcSnd .onI,.arcSnd.on .off{display:none}.arcSnd.on .onI{display:block}

/* ================= YOUR MONTH ================= */
.mbNav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 2px}
.mbNav .fcat{margin:0;text-align:center;flex:1}
.mbArrow{width:40px;height:40px;border:0;border-radius:50%;background:var(--glass3);color:var(--label);font-size:1.5rem;line-height:1;padding:0 0 3px}
.mbArrow:disabled{opacity:.25}
.mbSheet h3{text-align:center}
.mbHero{display:flex;flex-direction:column;align-items:center;margin:4px 0 10px}
.mbHero b{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:4rem;line-height:1;font-variant-numeric:tabular-nums}
.mbHero span{color:var(--label2);font-size:.9375rem;margin-top:2px}
.mbCal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:340px;margin:0 auto}
.mbCal em{font-style:normal;text-align:center;font-size:.6875rem;font-weight:700;color:var(--label3,var(--label2));letter-spacing:.06em;padding-bottom:2px}
.mbCal i{aspect-ratio:1;border-radius:9px;background:var(--glass3);display:flex;align-items:center;justify-content:center;font-style:normal;position:relative}
.mbCal i span{font-size:.6875rem;color:var(--label2);font-variant-numeric:tabular-nums}
.mbCal i.pad{background:none}
.mbCal i.fut{background:none;box-shadow:inset 0 0 0 1px var(--sep,var(--shade08))}
.mbCal i.fut span{opacity:.45}
.mbCal i.on::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tint);opacity:.26}
.mbCal i.on.lv2::before{opacity:.55}.mbCal i.on.lv3::before{opacity:1}
.mbCal i span{position:relative}
.mbCal i.on.lv2 span{color:var(--label);font-weight:700}.mbCal i.on.lv3 span{color:var(--onInk);font-weight:700}
.mbCal i.now{box-shadow:inset 0 0 0 2px var(--ink,var(--label))}
.mbKey{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;color:var(--label2);margin:8px 0 12px}
.mbKey i{width:11px;height:11px;border-radius:3px;display:inline-block;background:var(--tint);opacity:.3;margin-left:8px}
.mbKey i.lv3{opacity:1}
.mbTiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
.mbTiles div{border-radius:16px;background:var(--glass3);padding:11px 12px}
.mbTiles b{display:block;font-size:1.375rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mbTiles span{font-size:.8125rem;color:var(--label2)}
.mbLines{margin:0 0 12px;padding:0 0 0 18px;display:grid;gap:6px}
.mbLines li{font-size:.9375rem;line-height:1.4}
.mbAshy{display:flex;gap:10px;align-items:flex-start;border-radius:16px;background:var(--glass3);padding:10px 12px;margin-bottom:6px}
.mbAshy img{flex:0 0 auto;width:44px;height:44px}
.mbAshy p{margin:0;font-size:.9375rem;line-height:1.45}

/* ================= ARCADE: boss guide ================= */
.gmBossArt{background-color:#140c0a;background-repeat:no-repeat;background-position:center;background-size:84%,cover}
.bgCard{display:flex;gap:12px;align-items:flex-start;border-radius:18px;padding:12px;margin-bottom:10px;background:var(--gFill,rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px var(--gLine,var(--hearthPress))}
.bgArt{flex:0 0 auto;width:84px;height:84px;border-radius:14px;background-color:#120a08;background-repeat:no-repeat;background-position:center;background-size:90%,cover}
.bgCard.unmet .bgArt{background-color:#1a1412}
.bgTx{flex:1;min-width:0;color:var(--white)}
.bgLv{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,200,170,.7)}
.bgTx>b{display:block;font-size:1.0625rem;margin:2px 0 4px}
.bgTx p{margin:0 0 6px;font-size:.875rem;line-height:1.4;color:rgba(245,230,225,.8)}
.bgTx ul{margin:0 0 6px;padding-left:18px;font-size:.8125rem;line-height:1.45;color:rgba(245,230,225,.72)}
.bgTip{font-size:.8125rem!important}.bgTip b{color:#FFB48A;margin-right:4px}
.bgState{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:700;color:rgba(255,190,150,.85)}
.bgCard.down .bgState{color:var(--mint)}.bgState .ic{width:15px;height:15px}
.bgCard.unmet .bgTx>b{color:rgba(255,255,255,.55);letter-spacing:.1em}

/* ================= YOUR RHYTHM ================= */
.rhRow{margin-top:16px;padding-top:14px;border-top:.5px solid var(--sep,var(--shade10));align-items:flex-start;gap:12px}
.rhRow>div{display:flex;flex-direction:column;gap:2px;min-width:0}.rhRow b{font-size:.9375rem}.rhRow span{font-size:.8125rem;color:var(--label2);line-height:1.35}
.rhTime{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.rhTime label.f{margin:0}
.rhTime input{font:inherit;font-variant-numeric:tabular-nums;padding:9px 12px;border-radius:12px;border:0;background:var(--glass3);color:var(--label);min-width:120px}

/* ================= ASHY'S NOTEBOOK ================= */
.bub .nbWhy{display:block;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--label2);margin-bottom:6px}
.bub p{margin:0 0 8px}.bub p:last-of-type{margin-bottom:4px}
.nbSrc{margin-top:6px;font-size:.8125rem}.nbSrc summary{cursor:pointer;color:var(--label2);font-weight:600}
.nbSrc ul{margin:6px 0 0;padding-left:18px}.nbSrc a{color:var(--label2)}
.bub .nbGo{margin-top:8px;display:inline-flex}
.nbList{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.nbList button{border:0;border-radius:99px;padding:8px 12px;font:inherit;font-size:.8125rem;background:var(--glass3);color:var(--label);text-align:left}
#chips .nbChip{font-weight:600}
.status #barTxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status .sdot{flex:0 0 auto}

/* ================= ASH-LY'S BRAIN ================= */
.bub.brain p{margin:0 0 8px;white-space:pre-line}
.brQ{display:block;font-weight:700;margin:0 0 6px}
.brAct{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.brAct .btn{flex:0 0 auto}
.brLinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:.8125rem}
.brLinks a,.brLive{color:var(--label2);font-weight:600;text-decoration:none;border:0;background:none;padding:6px 0;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer}
.brLinks a:hover,.brLive:hover{color:var(--label)}
.bub li a{padding:12px 0}   /* source links: a bigger tap area without moving the text */
.brLive{color:var(--tint)}
.brLocal{display:block;margin-top:8px;font-size:.6875rem;letter-spacing:.02em;color:var(--label3,var(--label2))}
.brMore{width:100%;font-size:.75rem;font-weight:700;color:var(--label2);margin-bottom:2px}
.brTbl{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:.8125rem;font-variant-numeric:tabular-nums}
.brTbl th,.brTbl td{padding:6px 4px;text-align:right;border-bottom:.5px solid var(--sep,var(--shade10))}
.brTbl tr>th:first-child{text-align:left;font-weight:600;color:var(--label2)}
.brTbl tr:first-child th{font-weight:700;color:var(--label);vertical-align:bottom}
.brCats button{display:inline-flex;align-items:center;gap:8px}
.brCats button i{font-style:normal;font-size:.6875rem;font-weight:700;color:var(--label2);background:var(--glass2);border-radius:99px;padding:1px 7px}
.brSug{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.brSug button{border:0;border-radius:14px;padding:8px 12px;font:inherit;font-size:.8125rem;background:var(--glass3);color:var(--label);text-align:left;box-shadow:inset 0 0 0 .5px var(--edge,var(--shade08))}
.brSug button::before{content:"\2726  ";color:var(--tint)}

/* ---- holiday hellos ---- */
.greet{position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px 16px 14px;transition:opacity .25s,transform .25s}
.greet.hidden{display:none}
.greet.bye{opacity:0;transform:translateY(-6px) scale(.98)}
.grArt{flex:0 0 72px;width:72px;height:72px;margin:-6px -2px 0 -8px}
.grCan{display:block;width:72px;height:72px}
.grTxt{flex:1;min-width:0;padding-right:22px}
.greet .grEye{font-size:0.75rem;font-weight:700;color:var(--tint);margin:0 0 3px}
.greet h3{font-size:1.25rem;letter-spacing:-.022em;line-height:1.2;margin:0 0 6px}
.greet .grBody{font-size:0.9062rem;line-height:1.5;margin:0 0 8px}
.greet .grNote{font-size:0.8438rem;line-height:1.45;color:var(--label2);background:var(--glass3);border-radius:12px;padding:8px 10px;margin:0 0 8px}
.greet .grNote.hidden{display:none}
.grMore{display:inline-block;font-size:0.875rem;font-weight:600;color:var(--tint);text-decoration:none;padding:4px 0}
.grX{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--label3);font-size:1.375rem;line-height:1;cursor:pointer}
.grX::before{content:"";position:absolute;inset:-6px}
.grX:active{background:var(--glass3)}
@media (prefers-reduced-motion:reduce){.greet{transition:none}}

/* ---- day's end ---- */
.finCard{display:flex;align-items:center;gap:12px;padding:14px 16px}
.finCard.hidden{display:none}
.fcTxt{flex:1;min-width:0}
.finCard .fcEye{font-size:0.75rem;font-weight:700;color:var(--tint);margin:0 0 2px}
.finCard .fcSub{font-size:0.9062rem;margin:0;color:var(--label)}
.finale{position:fixed;inset:0;z-index:300;background:#05060F;opacity:0;transition:opacity .32s ease}
.finale.on{opacity:1}
.finale.hidden{display:none}
.finale canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fnTop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) 16px 0}
.fnDate{margin:0;font-size:0.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,240,220,.78)}
.fnX{width:40px;height:40px;border-radius:50%;border:0;background:var(--hearthPress);color:var(--paper);font-size:1.5rem;line-height:1}
.fnCard{position:absolute;left:0;right:0;bottom:0;padding:22px 20px calc(env(safe-area-inset-bottom) + 18px);color:var(--paper);
  background:linear-gradient(180deg,rgba(5,6,15,0),rgba(5,6,15,.82) 22%,rgba(5,6,15,.94));transform:translateY(24px);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1) .9s,opacity .6s ease .9s}
.finale.on .fnCard{transform:none;opacity:1}
.fnKick{margin:0 0 4px;font-size:0.8125rem;font-weight:700;color:#FFB36A}
.fnCard h2{margin:0 0 6px;font-size:1.75rem;line-height:1.12;letter-spacing:-.02em;color:var(--paper)}
.fnBody{margin:0 0 12px;font-size:0.9688rem;line-height:1.5;color:rgba(255,246,234,.82)}
.fnDay{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.fnDay span{font-size:0.8125rem;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,246,234,.9)}
.fnBtns{display:flex;gap:10px}
.fnBtns .btn{flex:1}
.fnBtns .btn:not(.ghost){background:#FFB36A;color:#2B1408;box-shadow:0 6px 20px rgba(255,150,70,.35)}
.fnBtns .btn.ghost{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.fnNote{margin:10px 0 0;font-size:0.8125rem;color:rgba(255,246,234,.6);text-align:center}
@media (prefers-reduced-motion:reduce){.finale,.fnCard{transition:none}}

/* food editor: tap any logged food */
:root{--mP:#E2664B;--mC:#E7B04A;--mF:#5E9BD6}
:root[data-mode="simple"]{--mP:#222;--mC:#777;--mF:#BBB}
.fi[data-edit]{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;transition:background .15s}
.fi[data-edit]:active{background:var(--glass3)}
.fi[data-edit]:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.feKick{margin:2px 0 6px;font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--label2)}
.feName{font-size:1.25rem!important;font-weight:650}
.feTop{display:flex;align-items:center;gap:18px;margin:14px 0 6px}
.feDonut{--pp:33%;--pc:66%;flex:none;width:118px;height:118px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--mP) 0 var(--pp),var(--mC) 0 var(--pc),var(--mF) 0 100%);transition:background .3s}
.feDonut.empty{background:var(--glass3)}
.feDonut::before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--bg2,var(--bg));box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.feDonut>div{position:relative;text-align:center}.feDonut b{display:block;font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1}
.feDonut span{font-size:0.7188rem;color:var(--label2)}
.feLeg{flex:1;min-width:0;display:grid;gap:7px}
.feLeg .l{display:grid;grid-template-columns:10px 1fr auto 38px;align-items:center;gap:8px;font-size:0.875rem}
.feLeg .l i{width:10px;height:10px;border-radius:3px}.feLeg .p i{background:var(--mP)}.feLeg .c i{background:var(--mC)}.feLeg .f i{background:var(--mF)}
.feLeg .l b{font-variant-numeric:tabular-nums;font-weight:650}.feLeg .l em{font-style:normal;color:var(--label2);text-align:right;font-variant-numeric:tabular-nums;font-size:0.8125rem}
.feLeg .s{grid-template-columns:1fr;color:var(--label2);font-size:0.8125rem}
.feHint{background:var(--glass3);border-radius:12px;padding:10px 12px}.feHint .feUse{padding:0 4px;min-height:0;height:auto;font-size:inherit}
.feSv{font-weight:400;color:var(--label2);text-transform:none;letter-spacing:0}
.feGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.feF{display:flex;flex-direction:column;gap:3px;border-radius:12px;background:var(--glass3);padding:8px 10px 6px;position:relative}
.feF span{font-size:0.7188rem;color:var(--label2)}
.feF input{border:0;background:none;color:var(--label);font:inherit;font-size:1.0625rem;font-weight:650;width:100%;padding:0;font-variant-numeric:tabular-nums;outline:none}
.feF i{position:absolute;right:10px;bottom:8px;font-style:normal;font-size:0.75rem;color:var(--label3)}
.feF:focus-within{box-shadow:inset 0 0 0 1.5px var(--tint)}
.feKeep{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 0;border-top:.5px solid var(--sep)}
.feKeep>span{flex:1;min-width:0}.feKeep b{display:block;font-size:0.9375rem}.feKeep>span>span{display:block;font-size:0.7812rem;color:var(--label2)}
.mineTag{font-style:normal;font-size:0.6875rem;font-weight:650;color:var(--tint);background:var(--glass3);border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
@media (prefers-reduced-motion:reduce){.feDonut{transition:none}}

/* Ash-ly reacts: little avatar moves, quick-reply chips, a confetti layer */
.msg .ashyAv{transform-origin:50% 90%}
.ashyAv.fx-hop{animation:acHop .7s cubic-bezier(.3,1.6,.5,1) 2}
.ashyAv.fx-spin{animation:acSpin .9s cubic-bezier(.5,0,.3,1)}
.ashyAv.fx-flip{animation:acFlip .8s ease-in-out}
.ashyAv.fx-shake{animation:acShake .5s ease-in-out 2}
.ashyAv.fx-dim{animation:acDim 1.6s ease-in-out}
.ashyAv.fx-confetti{animation:acHop .7s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes acHop{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-9px) scale(1.06,.94)}60%{transform:translateY(0) scale(1.08,.9)}}
@keyframes acSpin{to{transform:rotate(360deg)}}
@keyframes acFlip{50%{transform:scaleX(-1) translateY(-6px)}100%{transform:scaleX(1)}}
@keyframes acShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes acDim{50%{filter:brightness(.55) saturate(.6)}}
.msg.dimmed .bub{opacity:.82}
.brChips{margin-top:10px}
.acBurst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}
@media (prefers-reduced-motion:reduce){.ashyAv[class*="fx-"]{animation:none!important}}
.wordmark.acSpin img{animation:acSpin .8s cubic-bezier(.5,0,.3,1)}
@media (prefers-reduced-motion:reduce){.wordmark.acSpin img{animation:none}}
/* small switches keep their look but get a full 44px tap area */
.skSw.sm::before{content:"";position:absolute;inset:-11px -4px}
/* bottom-of-page mode switch */
.modeFoot{margin:28px 4px 8px;padding:18px 16px;border-top:.5px solid var(--sep);text-align:center}
.modeFoot p{margin:0 0 10px;font-size:0.8438rem;color:var(--label2);line-height:1.45}

/* artist-made 3D emoji (Fluent Emoji) sit where the system emoji did */
.e3d{width:1.15em;height:1.15em;vertical-align:-.2em;object-fit:contain;-webkit-user-drag:none;user-select:none}
.gPlate .em .e3d,.bix .fe .e3d,.feelT .fe .e3d{width:1.2em;height:1.2em;vertical-align:middle}
.gSlot .e3d{width:1.35em;height:1.35em;vertical-align:-.35em;margin-right:2px}

/* holiday covers: the label sits on a little tag so it reads on any paper */
.seal[data-cov]:not([data-cov="paper"]) .sl{background:rgba(255,250,242,.9);color:#3A2A1A;text-shadow:none;padding:5px 11px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.seal[data-cov="halloween"]:not([data-cov="paper"]) .sl,.seal[data-cov="newyear"]:not([data-cov="paper"]) .sl{background:rgba(18,12,24,.78);color:#F3E6D0}

/* challenges & awards */
.chCard{padding-top:14px}
.chBtns{display:flex;gap:6px;flex:0 0 auto}
#chAwN:not(:empty){display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--onAccent,var(--white));font-size:.6875rem;margin-left:4px;padding:0 5px}
.chRow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:var(--glass3);border-radius:14px;padding:8px 10px;margin-top:8px;color:var(--label);position:relative}
.chRing{width:44px;height:44px;flex:0 0 44px;transform:rotate(-90deg)}
.chRing circle{fill:none;stroke-width:5;stroke-linecap:round}
.chRing .tr{stroke:var(--glass2,rgba(127,127,127,.18))}
.chRing .fg{stroke:var(--chc,var(--accent));transition:stroke-dasharray .6s cubic-bezier(.2,.8,.3,1)}
.chEm{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;font-size:1rem}
.chEm .e3d{width:20px;height:20px}
.chTx{display:flex;flex-direction:column;gap:2px;min-width:0}
.chTx b{font-size:.875rem;line-height:1.25}
.chTx span{font-size:.75rem;color:var(--label2)}
.ch-water{--chc:#2F8FD8}.ch-check{--chc:#E9B949}.ch-protein{--chc:#E0603F}.ch-move{--chc:#4DB255}.ch-log{--chc:#8CC63F}.ch-craving{--chc:#8B6CE0}.ch-planned{--chc:#F08A2E}.ch-wins{--chc:#F2C54B}
.chSugC{display:flex;gap:12px;align-items:flex-start;background:var(--glass3);border-radius:16px;padding:10px 12px;margin-bottom:8px}
.chSugC p{margin:4px 0 8px;font-size:.8125rem;color:var(--label2)}
.chSugC .medal{flex:0 0 56px}
.chTypes button .e3d{width:1.1em;height:1.1em}
.chMake{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.chMake b{min-width:84px;text-align:center}
.chdTop{display:flex;gap:14px;align-items:center}
.chDots{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.chDots i{width:14px;height:14px;border-radius:50%;background:var(--glass2,rgba(127,127,127,.18))}
.chDots i.on{background:var(--accent)}
.chDots i.fut{background:transparent;box-shadow:inset 0 0 0 1.5px var(--glass2,rgba(127,127,127,.3))}
.awH{margin:16px 0 8px;font-size:.8125rem;color:var(--label2);text-transform:uppercase;letter-spacing:.06em}
.awGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aw{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 4px;border-radius:14px;background:var(--glass3)}
.aw b{font-size:.75rem}.aw span{font-size:.6875rem;color:var(--label2)}
.aw.locked .medal{filter:grayscale(1) brightness(.75) opacity(.45)}
@media (prefers-reduced-motion:reduce){.chRing .fg{transition:none}}

.brWeb{margin:8px 0;padding-left:10px;border-left:2px solid var(--sep,rgba(127,127,127,.3))}
.brSrcs{font-size:.75rem;color:var(--label2)}
.brSrcs a{color:var(--label2);font-weight:600}

/* a new award is struck: it drops in, lands with a thud, and brightens as it settles */
.celebArt.stamp{animation:medalStamp .9s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes medalStamp{0%{transform:scale(1.9) rotate(-16deg);opacity:0;filter:brightness(1.6)}55%{transform:scale(.9) rotate(3deg);opacity:1}75%{transform:scale(1.05) rotate(-1deg);filter:brightness(1.25)}100%{transform:scale(1) rotate(0);filter:brightness(1)}}
button.aw{border:0;color:var(--label);font:inherit;cursor:pointer}
/* Ash-ly's quick questions: one swipeable row, so the chat sits higher */
#chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:0 16px;scroll-snap-type:x proximity;scroll-padding-inline:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,currentColor 16px,currentColor calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,currentColor 16px,currentColor calc(100% - 28px),transparent)}   /* chips fade at the edges instead of being cut off */
#chips::-webkit-scrollbar{display:none}
#chips button{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}

/* a typed-out meal, ready to log in one go */
.fMeal{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;background:var(--glass3);border-radius:14px;padding:10px 12px;margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--edge)}
.fMeal b{grid-column:1;font-size:.875rem}.fMeal span{grid-column:1;font-size:.8125rem;color:var(--label2)}.fMeal .v{color:var(--label)}
.fMeal .btn{grid-column:2;grid-row:1/4}

/* one-tap re-log, and yesterday's meals */
.frWrap{display:flex;align-items:stretch;gap:6px}.frWrap .fr{flex:1;min-width:0}
.frAdd{flex:0 0 44px;border:0;border-radius:12px;background:var(--glass3);color:var(--label);font-size:1.25rem;font-weight:700;margin:3px 0}
.frAdd:disabled{color:var(--tint)}
.fRepeat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}.fRepeat span{font-size:.75rem;color:var(--label2);margin-right:4px}

/* ================= Train (js/train.js) ================= */
.trGoalT{margin:4px 0 6px;font-size:.9375rem;line-height:1.45;color:var(--label2)}
.trGoalT b{color:var(--label)}
.trBest{margin:6px 0 4px;font-size:1rem;color:var(--label2)}
.trBest b{font-size:1.25rem;color:var(--label);font-weight:700}
.trDay{position:relative;height:16px;border-radius:8px;background:var(--glass2);margin:14px 0 4px;overflow:hidden}
.trDay i{position:absolute;top:0;bottom:0}
.trDay i.eat{background:color-mix(in srgb,var(--green) 30%,transparent)}
.trDay i.slot{background:var(--tint);border-radius:6px;top:3px;bottom:3px}
.trDay i.slot.alt{opacity:.45}
.trDay i.nowM{width:2px;background:var(--label);margin-left:-1px}
.trDayL{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--label3)}
.trLeg{font-size:.75rem;color:var(--label2);margin:8px 0 2px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.trLeg .k{display:inline-block;width:12px;height:8px;border-radius:3px;margin-right:4px;vertical-align:middle}
.trLeg .k.eat{background:color-mix(in srgb,var(--green) 40%,transparent)}.trLeg .k.slot{background:var(--tint)}.trLeg .k.nowK{width:2px;background:var(--label)}
.trWhy{margin:10px 0 6px;padding-left:18px;font-size:.875rem;line-height:1.45;color:var(--label2)}
.trWhy li{margin-bottom:6px}
.trSrc{font-size:.75rem;color:var(--label3);line-height:1.5;margin:4px 0 0}
.trSrc a{color:var(--label2)}
.trMin{font-size:.8125rem;color:var(--label2)}
.trTitle{font-size:1.125rem;font-weight:700;margin:2px 0 8px}
.trDone{font-size:.8125rem;font-weight:600;color:var(--green)}
.warnNote{background:var(--glass2);border-radius:12px;padding:10px 12px}
.trFocus,.trFilt,.trOpts{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.trOpts{flex-wrap:wrap;overflow:visible}
.trFocus::-webkit-scrollbar,.trFilt::-webkit-scrollbar{display:none}
.trFocus button,.trFilt button,.trOpts button{flex:0 0 auto;border:0;border-radius:99px;padding:8px 13px;min-height:36px;font:inherit;font-size:.8438rem;font-weight:600;color:var(--label);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line)}
.trFocus button[aria-pressed="true"],.trFilt button[aria-pressed="true"],.trOpts button[aria-pressed="true"]{background:var(--ink);color:var(--onInk);box-shadow:none}
.trList{list-style:none;margin:0 0 12px;padding:0}
.trList li+li{border-top:1px solid var(--sep)}
.trList button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:6px 0;text-align:left;color:var(--label);font:inherit;cursor:pointer}
/* a soft studio light behind the exercise figures */
.trList canvas,.trCard canvas,.trStr canvas,.trExCan{--trStage:radial-gradient(120% 95% at 50% 30%,color-mix(in srgb,var(--accent) 9%,var(--glass2)) 0%,var(--glass2) 62%,color-mix(in srgb,var(--label) 4%,var(--glass2)) 100%)}
.trList canvas{flex:0 0 auto;border-radius:10px;background:var(--trStage)}
.trList b{display:block;font-size:.9375rem}.trList small{display:block;font-size:.8125rem;color:var(--label2)}
.trWk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:6px 0 8px}
.trWk div{border-radius:10px;padding:7px 2px;text-align:center;background:var(--glass2)}
.trWk span{display:block;font-size:.6875rem;color:var(--label3);font-weight:600}
.trWk b{display:block;font-size:.6875rem;font-weight:600;color:var(--label2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trWk .on{box-shadow:inset 0 0 0 1.5px var(--tint)}
.trWk .done b{color:var(--green);font-size:.875rem}
.trWk .rest{opacity:.7}
.trLib{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:0 0 14px}
.trCard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:16px;padding:8px 8px 10px;background:var(--solid);box-shadow:inset 0 0 0 1px var(--edge),var(--shadow);text-align:left;color:var(--label);font:inherit;cursor:pointer}
.trCard canvas{width:100%;height:auto;aspect-ratio:132/96;border-radius:10px;background:var(--trStage)}
.trCard b{font-size:.875rem;line-height:1.25;margin-top:4px}.trCard small{font-size:.75rem;color:var(--label3)}
.trExCan{display:block;width:100%;height:220px;border-radius:16px;background:var(--trStage);margin:8px 0 12px;box-shadow:inset 0 0 0 .5px var(--line)}
.trCues{padding-left:20px;margin:0 0 10px;font-size:.9375rem;line-height:1.5;color:var(--label2)}
#trExBody h4{margin:10px 0 6px}
#trVid{display:flex;align-items:center;justify-content:center;text-align:center;margin-top:10px;text-decoration:none}
a.btn{text-decoration:none}
.trPlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top,0px)) 18px calc(16px + env(safe-area-inset-bottom,0px));color:var(--label)}
.tpTop{display:flex;align-items:center;gap:8px}
.tpTop span{flex:1;font-size:.875rem;color:var(--label2);font-variant-numeric:tabular-nums}
.tpBar{height:4px;border-radius:2px;background:var(--glass2);margin:10px 0 4px;overflow:hidden}
.tpBar i{display:block;height:100%;width:0;background:var(--tint);transition:width .3s}
#tpCan{flex:1 1 auto;min-height:180px;width:100%}
.tpInfo{text-align:center}
.tpInfo h2{font-family:var(--serif);font-weight:400;font-size:2rem;margin:4px 0 0}
.tpBig{font-size:3rem;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tpCue{min-height:2.8em;font-size:1rem;color:var(--label2);margin:0 auto 10px;max-width:30ch;line-height:1.4}
.tpBtns{display:grid;grid-template-columns:1fr 2fr 1fr;gap:10px}
.tpNext{text-align:center;font-size:.8125rem;color:var(--label3);margin:10px 0 0}
.trPlay.resting .tpBig{color:var(--tint)}
.trPlay.resting #tpCan{opacity:.55}
body.noScroll{overflow:hidden}
.tpBtns .btn{min-width:0;padding-left:8px;padding-right:8px}

/* ================= Keto (js/keto.js) ================= */
.ketoL{margin:4px 0 8px;font-size:.9375rem;color:var(--label2)}.ketoL b{font-size:1.125rem;color:var(--label)}
.ketoMeter{height:10px;border-radius:5px;background:var(--glass2);overflow:hidden;margin:0 0 12px}
.ketoMeter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--tint2),var(--tint));transition:width .6s}
.ketoRow{display:flex;justify-content:space-between;font-size:.875rem;color:var(--label2)}.ketoRow b{color:var(--label)}.ketoRow b.over{color:var(--red)}
.ketoBar{height:6px;border-radius:3px;background:var(--glass2);overflow:hidden;margin:4px 0 8px}
.ketoBar i{display:block;height:100%;background:var(--green)}.ketoBar i.over{background:var(--red)}
.ketoTip{background:var(--glass2);border-radius:12px;padding:10px 12px}
.ketoFact{font-size:.875rem;line-height:1.45;color:var(--label2);border-left:3px solid var(--tint);padding-left:10px;margin:10px 0}
.ketoFact a{color:var(--label3);font-size:.8125rem}
.trSrc a{display:inline-block;padding:12px 2px;margin:-8px 0}
.trQ{margin:18px 0 4px;font-size:1rem}
.trStr{display:grid;gap:8px}
.trStr button{display:flex;align-items:center;gap:12px;border:0;border-radius:14px;padding:8px 10px;background:var(--glass2);color:var(--label);font:inherit;text-align:left;cursor:pointer}
.trStr canvas{border-radius:8px;background:var(--trStage);flex:0 0 auto}
.trStr b{display:block;font-size:.9375rem}.trStr small{display:block;font-size:.8125rem;color:var(--label2)}
.trLiftRow{padding:8px 0;border-top:1px solid var(--sep)}.trLiftRow b{display:block;font-size:.9375rem}.trLiftRow span{font-size:.8125rem;color:var(--label2)}
.tpAsh{position:absolute;right:14px;top:calc(64px + env(safe-area-inset-top,0px));width:64px;height:70px;pointer-events:none}
.tpVoice .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tpVoice[aria-pressed="false"]{opacity:.55}
.tpLog{display:flex;justify-content:center;gap:14px;margin:0 0 8px;font-size:.875rem;color:var(--label2)}
.tpLog input{width:72px;margin-left:4px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--glass2);color:var(--label);font:inherit;font-size:1rem;text-align:center}
.tpTip{min-height:1.2em;text-align:center;font-size:.8125rem;color:var(--tint);margin:0 auto 8px;max-width:34ch}
.pgList{display:grid;gap:8px}
.pgList button{display:block;border:0;border-radius:14px;padding:12px 14px;background:var(--glass2);color:var(--label);font:inherit;text-align:left;cursor:pointer}
.pgList b{display:block;font-size:1rem}.pgList small{display:block;font-size:.8125rem;line-height:1.4;color:var(--label2);margin:2px 0 6px}
.pgList span i{display:inline-block;font-style:normal;font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--glass3);color:var(--label2);margin:0 4px 0 0}
.pgList .pgAi{box-shadow:inset 0 0 0 1.5px var(--tint)}
/* the program list shows three that fit your goal until you ask for all of them */
.pgList:not(.all)>button[data-pg].more{display:none}
.pgMore{margin-top:8px}
/* folded sections on the Plan tab: the title stays, the long part opens on a tap */
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary>:first-child{flex:1;margin:0}
details.fold>summary::after{content:'';flex:none;width:9px;height:9px;margin:0 4px 4px 0;border:solid var(--label2);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
details.fold[open]>summary::after{transform:rotate(225deg);margin:4px 4px 0 0}
details.fold[open]>summary{margin-bottom:10px}
.foldN{font-size:.875rem;color:var(--label2)}
.trLibBox>summary{margin-top:34px}.trLibBox>summary h2.sec{margin:0}
@media (prefers-reduced-motion:reduce){details.fold>summary::after{transition:none}}
.pgWeek{list-style:none;margin:8px 0 0;padding:0}
.pgWeek li+li{border-top:1px solid var(--sep)}
.pgWeek button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 0;color:var(--label);font:inherit;text-align:left;cursor:pointer}
.pgD{flex:0 0 38px;font-size:.8125rem;font-weight:700;color:var(--label3)}
.pgT{flex:1;font-size:.9375rem}.pgT small{display:block;font-size:.75rem;color:var(--label3)}
.pgK{color:var(--label3)}.pgWeek .done .pgK{color:var(--green);font-weight:700}
.pgWeek .on .pgD{color:var(--tint)}.pgWeek .on .pgT{font-weight:700}
.slHours{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0 12px}
.slHours b{font-size:1.75rem;font-variant-numeric:tabular-nums;min-width:4ch;text-align:center}
.slHours button{width:44px;height:44px;border-radius:50%;border:0;background:var(--glass2);color:var(--label);font-size:1.4rem;box-shadow:inset 0 0 0 1px var(--line)}
.slRec{margin:4px 0 10px}.slRec b{font-size:1.0625rem}
.slBars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:84px;align-items:end;margin:6px 0 6px}
.slBars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.slBars i{display:block;width:70%;min-height:2px;border-radius:5px 5px 2px 2px;background:var(--sleep)}
.slBars i.low{background:color-mix(in srgb,var(--sleep) 45%,transparent)}
.slLab{display:block;font-size:var(--fs-caption,.8125rem);color:var(--label2);font-weight:600;margin:10px 0 6px}
.slBars span{font-size:.6875rem;color:var(--label3);margin-top:4px}
/* fasting switched off (js/focus.js): the fasting controls step aside and Ash-ly's tab comes first */
:root[data-nofast] #toggle,:root[data-nofast] #idleGoalBtn,:root[data-nofast] #backdate,:root[data-nofast] #endEarlier,:root[data-nofast] #breakChip,:root[data-nofast] #refeedNow,:root[data-nofast] #goalChip{display:none!important}
:root[data-nofast] nav.tabs button[data-p="ask"]{order:-1}
.focusOpts{display:grid;gap:8px;margin-top:6px}
.focusOpts button{border:0;border-radius:14px;padding:12px 14px;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line);color:var(--label);font:inherit;text-align:left;cursor:pointer}
.focusOpts b{display:block;font-size:1rem}.focusOpts span{display:block;font-size:.8125rem;color:var(--label2);margin-top:2px;line-height:1.4}
#hSleep .note a,#aiScrim .note a,.ketoFact a,#aiCard .note a{display:inline-block;padding:12px 4px;margin:-12px 0}

/* + / − amount buttons repeat while held: no text selection or callout on a long press */
.qty button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
/* arcade: a soft shade behind the top bar, so the score and buttons stay readable over logs and sky */
#gameWrap::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(104px + env(safe-area-inset-top,0px));background:linear-gradient(rgba(0,0,0,.46),rgba(0,0,0,.18) 60%,transparent);pointer-events:none;z-index:1}
.gameTop{z-index:2}.gameTop .hud{text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* Sleep check-in: the feel and soreness choices sit as even rows instead of wrapping one chip onto its own line */
#slQ,#slSore{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#slSore{grid-template-columns:repeat(3,minmax(0,1fr))}
#slQ button,#slSore button{padding:8px 4px;white-space:nowrap}
.appVer{text-align:center;font-size:var(--fs-caption,.75rem);color:var(--label3,var(--label2));margin:-18px 0 24px;font-variant-numeric:tabular-nums}
.appVer:empty{display:none}
/* Food card: today's calories, big, with what's left of the target */
.kcHero{border-radius:16px;padding:14px 16px 12px;background:var(--glass3);margin:0 0 10px}
.kcTop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.kcNum b{display:block;font-family:var(--serif);font-weight:400;font-size:2.75rem;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kcNum span,.kcSide span,.kcCap{font-size:var(--fs-footnote,.8125rem);color:var(--label2)}
.kcNum span{display:block;margin-top:4px}
.kcSide{text-align:right}.kcSide b{display:block;font-family:var(--serif);font-weight:400;font-size:1.625rem;line-height:1;font-variant-numeric:tabular-nums}
.kcSide span{display:block;margin-top:4px}
.kcBar{display:block;height:6px;border-radius:99px;background:var(--glass2);margin:12px 0 8px;overflow:hidden}
.kcBar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s cubic-bezier(.22,1,.36,1)}
.kcBar.over i{background:var(--label2)}
.kcCap{display:block}
@media (prefers-reduced-motion:reduce){.kcBar i{transition:none}}
/* food sheet: a barcode nobody has scanned yet */
.fNew{border-radius:14px;padding:12px 14px;background:var(--glass3);margin:0 0 14px}
.fNew b{display:block;font-size:var(--fs-subhead,.9375rem)}.fNew span{display:block;margin-top:4px;font-size:var(--fs-footnote,.8125rem);color:var(--label2)}
.fBusy{text-align:center;margin:10px 0 0}
/* Food card: goals footer and this week against your goals */
.kcFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.kcFoot .btn.text{padding:4px 0;min-height:0}
.goalWk{border-radius:16px;padding:12px 14px;background:var(--glass3);margin:0 0 12px}
.gwHead{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.gwHead b{font-size:var(--fs-subhead,.9375rem)}.gwHead span{font-size:var(--fs-footnote,.8125rem);color:var(--label2)}
.gwGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.gwDay{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0;border-radius:10px}
.gwDay.today{background:var(--glass2)}
.gwDay span{font-size:.6875rem;color:var(--label2);white-space:nowrap}
.gwK,.gwP{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2,var(--line))}
.gwP{width:10px;height:10px}
.gwK.off,.gwP.off{box-shadow:inset 0 0 0 1.5px var(--label3)}
.gwK.on{background:var(--accent);box-shadow:none}.gwP.on{background:var(--green);box-shadow:none}
.gwKey{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.75rem;color:var(--label2)}
.gwKey span{display:inline-flex;align-items:center;gap:6px}.gwKey i{width:10px;height:10px}
/* target sheet: the details a recommendation needs */
.ngBody{border-radius:16px;padding:12px 14px;background:var(--glass3);margin:0 0 14px}
.ngBody>b{display:block;font-size:var(--fs-subhead,.9375rem)}.ngBody>span{display:block;margin:3px 0 4px;font-size:var(--fs-footnote,.8125rem);color:var(--label2)}
.ngBGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ngBGrid label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-footnote,.8125rem);color:var(--label2);font-weight:600}
.ngBGrid label:first-child{grid-column:1/-1}
.ngHt{display:flex;align-items:center;gap:6px}.ngHt .f{min-width:0;flex:1}.ngHt em{font-style:normal;color:var(--label2);font-weight:500}

/* a small quick link to log food, on the Now screen */
.qFoodRow{display:flex;margin:0 0 12px}
.qFood{flex:1;display:flex;justify-content:center;align-items:center;gap:7px;min-height:46px;padding:11px 16px;border:0;border-radius:16px;background:var(--glass3);
  color:var(--label);font:inherit;font-size:.9375rem;font-weight:600;box-shadow:inset 0 0 0 .5px var(--edge);cursor:pointer}
.qFood svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.qFood:active{transform:scale(.97)}
:root[data-mode="simple"] .qFoodRow{display:none}

/* ---- your fires (js/fires.js): the name over the fire, the words under it, and the sheets ---- */
.firePager{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:0;padding:1px;border-radius:var(--r-pill);
  background:var(--hearthGlass);color:var(--hearthInk);box-shadow:inset 0 0 0 1px var(--hearthEdge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);max-width:calc(100% - 172px)}
.firePager.hidden{display:none}
.firePager button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.fpArr,.fpAdd{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}
.fpArr::after,.fpAdd::after{content:"";position:absolute;inset:-6px -2px}
.fpArr svg,.fpAdd svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fpArr:active,.fpAdd:active{background:var(--hearthPress)}
.fpAdd{border-left:1px solid var(--hearthEdge)!important;border-radius:0 16px 16px 0;width:34px}
.firePager.one .fpArr{display:none}
.firePager.one .fpLbl{padding-left:14px}
.fpLbl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:32px;padding:3px 6px 4px}
.fpName{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.1}
.fpDots{display:flex;gap:4px;line-height:0}.fpDots:empty{display:none}
.fpDots i{width:5px;height:5px;border-radius:3px;background:var(--hearthDot);transition:width var(--t-med) var(--ease),background var(--t-med) var(--ease)}
.fpDots i.on{background:var(--hearthInk);width:12px}
/* switching fires: the old one slides away, the next one slides in */
#fire.fsOut{animation:fsOut .17s ease-in forwards}
#fire.fsIn{animation:fsIn .34s var(--ease-out)}
@keyframes fsOut{to{opacity:0;transform:translateX(calc(var(--fsd,1) * 18%)) scale(.97)}}
@keyframes fsIn{from{opacity:0;transform:translateX(calc(var(--fsd,1) * 18%)) scale(.97)}}
#fire.kKeto{filter:hue-rotate(178deg) saturate(.72) brightness(1.06)}            /* the keto fire burns a cooler blue */
/* the words and buttons under a fire that isn't the fasting one */
.fireP{display:none}
.hero[data-fk]:not([data-fk="fast"]) .fireP{display:block}
.hero[data-fk]:not([data-fk="fast"]) :is(.idleP,.liveP,.heroBtns){display:none!important}
.fireP.fpIn{animation:fpIn .34s var(--ease-out)}
@keyframes fpIn{from{opacity:0;transform:translateY(6px)}}
.fpEye{margin:22px 0 10px}
.fireP .display{overflow-wrap:anywhere}
.fpAct{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;align-items:center}
.fpAct .btn{flex:0 1 auto}
.fpChk{flex:1 1 100%;display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 16px;border:0;border-radius:var(--r-md);background:var(--glass3);
  box-shadow:inset 0 0 0 1px var(--edge);color:var(--label);font:inherit;text-align:left;cursor:pointer;transition:transform var(--t-fast) var(--ease)}
.fpChk:active{transform:scale(.98)}
.fpChk .bx{flex:none;width:28px;height:28px;border-radius:9px;box-shadow:inset 0 0 0 2px var(--line2);display:grid;place-items:center;transition:background var(--t-med) var(--ease)}
.fpChk[aria-checked="true"] .bx{background:var(--tint);box-shadow:none}
.fpChk[aria-checked="true"] .bx::after{content:"";width:12px;height:7px;border:solid var(--onInk);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.fpChk .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fpChk .t b{font-size:1.0625rem}.fpChk .t span{font-size:.8125rem;color:var(--label2)}
.fsList{display:grid;gap:8px;margin:10px 0 4px}
.fsRow{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.fsRow.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fsGo{flex:1;min-width:0;border:0;background:none;color:var(--label);font:inherit;text-align:left;padding:10px 12px;cursor:pointer;min-height:var(--hit)}
.fsGo b{display:block;font-size:1rem}.fsGo span{display:block;font-size:.8125rem;color:var(--label2);margin-top:2px;line-height:1.4}
.fsX{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--glass3);color:var(--label);font-size:1.25rem;line-height:1;cursor:pointer}
.fsAddH{margin:18px 0 6px;font-size:.9375rem}
.gfIdeas{margin:10px 0 2px}.gfIdeas:empty{display:none}
.gfIdeas button{font-size:.8125rem}
.gfL{margin-top:18px}
.gfWd{margin-top:10px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.gfWd.hidden{display:none}
.gfWd button{min-width:0;padding:0;justify-content:center}
.gfTimes{display:grid;gap:8px}
.gfTime{display:flex;gap:8px;align-items:center}
.gfTime input{flex:1;min-height:var(--hit);border:0;border-radius:var(--r-md);background:var(--glass3);box-shadow:inset 0 0 0 1px var(--edge);color:var(--label);font:inherit;padding:0 14px}
.gfAddT{margin-top:10px}.gfAddT.hidden{display:none}
:root[data-mode="simple"] .firePager{display:none}
@media (prefers-reduced-motion:reduce){#fire.fsOut,#fire.fsIn,.fireP.fpIn{animation:none}}

/* ---- small one-off spacing and type tweaks (were inline styles in index.html, so they win like inline styles did) ---- */
.em106{font-size:1.06em!important}
.em112{font-size:1.12em!important}
.errTxt{color:var(--red)!important}
.fadeSlow{transition:opacity .6s!important}
.m0{margin:0!important}
.mTop10{margin:10px 0 0!important}
.mTop12{margin:12px 0 0!important}
.mTop6{margin:6px 0 0!important}
.mTop8{margin:8px 0 0!important}
.mTopBot{margin:4px 0 6px!important}
.mb16{margin-bottom:16px!important}
.mt0{margin-top:0!important}
.mt12{margin-top:12px!important}
.mt14{margin-top:14px!important}
.mt16{margin-top:16px!important}
.mt18{margin-top:18px!important}
.mt2{margin-top:2px!important}
.mt20{margin-top:20px!important}
.mt28{margin-top:28px!important}
.mt6{margin-top:6px!important}
.mt8{margin-top:8px!important}
.noResize{resize:none!important}
.plainLbl{text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
.rowEnd{display:flex!important;align-items:flex-end!important}
.tCenter{text-align:center!important}
.wFull{width:100%!important}

/* ---- the Now screen, tidier ---- */
.hmBtn{position:absolute;top:8px;right:14px;z-index:4;width:34px;height:34px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;
  background:var(--hearthGlass);color:var(--hearthInk);box-shadow:inset 0 0 0 1px var(--hearthEdge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);cursor:pointer}
.hmBtn::after{content:"";position:absolute;inset:-6px}
.hmBtn svg{width:18px;height:18px;fill:currentColor}
.hearthMenu{position:absolute;top:48px;right:14px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hearthMenu.hidden{display:none}
.hearthMenu>.tiltbtn,.hearthMenu>.sndbtn,.hearthMenu>.skPill{position:static}
.firePager{max-width:calc(100% - 120px)}
#greetCard:not(.hidden)~#skCard{display:none}                       /* one holiday card at a time */
.greet .grBody{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bodyGrid{grid-template-columns:repeat(2,1fr)}
#tl:not(.all) .stage.later{display:none}
.tlMore{display:block;margin:4px auto 18px}.tlMore.hidden{display:none}
.hero[data-fk]:not([data-fk="fast"])~:is(#unlockBar,#tl,#tlMore,#refeedNow){display:none!important}   /* fasting cards stay with the fasting fire */
.gDots{flex:1 1 100%;display:flex;gap:6px;align-items:center;margin-top:2px}
.gDots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2)}
.gDots i.y{background:var(--tint);box-shadow:none}
.gDots i.n{background:var(--line)}
.gdSrc{margin:4px 0 2px}.gdSrc summary{cursor:pointer;font-size:.8125rem;color:var(--label2);min-height:32px;display:flex;align-items:center}
.gdSrc .refs{margin-top:6px}

/* recipes (js/recipes.js) */
.rcLede{margin:0 0 12px}
.rcH{margin:16px 0 4px}
.rcBack{border:0;background:none;color:var(--tint);font-weight:650;padding:4px 0;margin-bottom:6px}
#rcQ{margin-top:10px}
.rcOwn{margin-top:10px;padding:12px;border-radius:14px;background:var(--glass3)}
.rcOwn .btn{margin-top:8px}
.rcWt{display:flex;gap:8px;align-items:center}.rcWt .f{flex:1;min-width:0}.rcWt .seg{flex:0 0 132px}
.opt{font-weight:400;color:var(--label2)}
.rcTot{margin-top:12px}
.rcPer{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 2px;border-top:.5px solid var(--sep)}
.rcPer .lbl{min-width:84px;color:var(--label2);font-size:.8125rem}.rcPer b{font-size:1rem}.rcPer span:last-child{color:var(--label2);font-size:.8125rem}
.rcImp{margin-top:8px}.rcImp .btn{flex:1}
.rcPasteBox{margin-top:10px}.rcPasteBox textarea{width:100%;min-height:150px;resize:vertical;font:inherit;line-height:1.4}.rcPasteBox .btn{margin-top:8px}
.rcImpNote{padding:10px 12px;border-radius:14px;background:var(--glass3);margin:4px 0 12px}.rcImpNote b{display:block}.rcImpNote span{font-size:.8125rem;color:var(--label2)}
.rcMiss{margin:6px 0 4px}.rcMiss b{display:block;font-size:.875rem;margin-bottom:6px}.rcMiss .chips{margin-bottom:6px}
.rcUnits{margin:2px 0 12px}.rcUnits button:disabled{opacity:.35}