/* Carrying It: warm paper by day, night sky by night; marigold and lamp-light as the accent. */
:root{
  --bg:#F6F1E7; --panel:#ECE3D2; --card:#FBF8F2; --ink:#1E2333; --muted:#5B5F6E; --line:#D8CDB8;
  --accent:#9A4A10; --on-accent:#FFFFFF; --gold:#E9A23B; --gold-soft:#F7E2BC; --night:#1D2740; --sky:#D7E0EE; --leaf:#5C7E60;
  --life:#DDE6F1; --life-s:#9FB3CF; --pp:#2D3A57;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Source Serif 4",Georgia,serif;
  --ui:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1120px; --col:42rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10141E; --panel:#1A2030; --card:#151A27; --ink:#ECE6DA; --muted:#A4A7B4; --line:#2D3447;
  --accent:#F2B45A; --on-accent:#1B1206; --gold-soft:#3A3020; --night:#0B0F1A; --sky:#33415E; --leaf:#88AA8B;
  --life:#1F2B43; --life-s:#3E5070; --pp:#B8C4DA; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#10141E; --panel:#1A2030; --card:#151A27; --ink:#ECE6DA; --muted:#A4A7B4; --line:#2D3447;
  --accent:#F2B45A; --on-accent:#1B1206; --gold-soft:#3A3020; --night:#0B0F1A; --sky:#33415E; --leaf:#88AA8B;
  --life:#1F2B43; --life-s:#3E5070; --pp:#B8C4DA; color-scheme:dark;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-family:var(--ui);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.eyebrow a{text-decoration:none}.eyebrow a:hover{color:var(--accent)}
.eyebrow.light{color:#E9C98F}

/* masthead */
.mast{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.glyph{width:30px;height:30px}
.brand b{font-family:var(--display);font-weight:500;font-style:italic;font-size:1.5rem}
.mast nav{display:flex;gap:6px 24px;font-family:var(--ui);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mast nav a{text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.mast nav a:hover{color:var(--accent);border-bottom-color:var(--gold)}

/* hero */
.hero{position:relative;overflow:hidden;background:#0F1729;color:#F4EEE2;min-height:min(78vh,620px);display:flex;align-items:center}
.hero-scene{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,28,.82) 0%,rgba(10,15,28,.55) 48%,rgba(10,15,28,0) 75%)}
.hero-in{position:relative;z-index:1;padding-block:clamp(48px,9vw,110px);width:100%}
.hero h1{font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.06;letter-spacing:-.01em;margin:14px 0 22px;max-width:15ch;text-wrap:balance}
.hero .lede{max-width:34rem;font-size:1.15rem;color:#D9D3C6;margin:0 0 28px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.cta{display:inline-block;font-family:var(--ui);font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:#E9A23B;color:#1B1206;padding:14px 20px;border-radius:999px}
.cta:hover{filter:brightness(1.08)}
.cta.ghost{background:transparent;color:#F4EEE2;box-shadow:inset 0 0 0 1.5px rgba(244,238,226,.55)}
.h-star{fill:#FFF4D6;animation:twinkle 4s ease-in-out infinite}
.h-moon{fill:#F6E7C1}
.h-rip{fill:none;stroke:rgba(233,162,59,.22);stroke-width:1.4;animation:ripple 7s linear infinite}
.h-bob{animation:bob 5s ease-in-out infinite}
.h-glow{fill:url(#hglow);animation:glowp 3s ease-in-out infinite}
.h-bowl,.diyab{fill:#C0632B}.h-rim,.diyar{fill:#8E4220}
.h-refl{fill:#F2B13E;opacity:.18}
.h-fl,.flame{fill:#F7B538}.h-core,.flamec{fill:#FFF1C9}
.h-flame{animation:flicker 1.6s ease-in-out infinite}
.h-petal{animation:drift 14s linear infinite}
.pet1{fill:#F29B1D}.pet2{fill:#F5C33B}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ripple{from{transform:translateX(0)}to{transform:translateX(60px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glowp{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(.94,1.06) rotate(-2deg)}50%{transform:scale(1.04,.95) rotate(1.5deg)}75%{transform:scale(.97,1.04) rotate(-1deg)}}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-420px,600px) rotate(540deg)}}

/* how */
.how{border-bottom:1px solid var(--line)}
.how3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;padding-block:28px;font-family:var(--ui);font-size:.95rem;line-height:1.5}
.how3 b{font-family:var(--display);font-size:1.25rem;font-weight:500;display:block;margin-bottom:2px}
.how3 p{margin:0;color:var(--muted)}

/* sections */
.sec{scroll-margin-top:70px;padding-block:clamp(36px,6vw,64px);border-top:1px solid var(--line)}
.sech{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.15;margin:8px 0 26px}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gcard{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px 22px;transition:transform .25s ease,box-shadow .25s ease;min-width:0}
.gcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.gcard h3{font-family:var(--display);font-weight:500;font-size:1.45rem;line-height:1.15;margin:0;text-wrap:balance}
.gcard:hover h3{color:var(--accent)}
.gcard p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.5}
.gcard .more{font-family:var(--ui);font-weight:800;font-size:.8rem;letter-spacing:.05em;margin-top:auto;padding-top:6px}
.gcard .more span{color:var(--muted);font-weight:600}
.gicon{width:120px;height:80px;margin-bottom:4px}
.ic-fill{fill:var(--pp)}.ic-gold{fill:var(--gold)}.ic-acc{fill:var(--accent)}
.ic-line{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.ic-ring{fill:none;stroke:var(--gold);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ripple2 2.6s ease-out infinite}
.ic-steam{fill:none;stroke:var(--muted);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:steam 2s ease-out infinite}
.ic-life{fill:var(--life);stroke:var(--life-s);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:grow2 4s ease-in-out infinite}
.a2-float{animation:float2 3.2s ease-in-out infinite}
.a2-bob{animation:bob 3.4s ease-in-out infinite}
@keyframes ripple2{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes grow2{0%,100%{transform:scale(.8)}50%{transform:scale(1.1)}}

.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sgrid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.scard{display:flex;gap:14px;align-items:center;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0;transition:border-color .2s}
.scard:hover{border-color:var(--gold)}
.snum{flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-size:1.2rem;font-weight:600}
.sbody{display:flex;flex-direction:column;min-width:0}
.stitle{font-family:var(--display);font-size:1.12rem;line-height:1.2}
.scard:hover .stitle{color:var(--accent)}
.smeta{font-family:var(--ui);font-size:.78rem;color:var(--muted);margin-top:2px}

.about .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px}
.about h2{font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.18;margin:8px 0 0;text-wrap:balance}
.about p{margin:0 0 14px;max-width:34rem}

/* guide + sheet */
.col{max-width:var(--col);margin-inline:auto}
.ghead,.shead{padding-block:clamp(30px,5vw,56px) 6px}
.ghead h1,.shead h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5.6vw,3.6rem);line-height:1.05;letter-spacing:-.01em;margin:12px 0 14px;text-wrap:balance}
.dek{font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--muted);margin:0 0 12px}
.meta{font-family:var(--ui);font-size:.82rem;color:var(--muted);margin:0 0 12px}
.meta a{color:var(--accent)}
.prose{font-size:1.1875rem;line-height:1.75;padding-block:18px 8px}
.prose p{margin:0 0 1.1em}
.prose h2{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.4vw,1.95rem);line-height:1.2;margin:1.8em 0 .55em}
.prose ul{padding-left:1.2em;margin:0 0 1.2em}.prose li{margin-bottom:.5em}
.prose strong{font-weight:600}
.scene{font-size:1.25rem;line-height:1.7;border-left:3px solid var(--gold);padding-left:20px;font-style:italic}
.care{font-family:var(--ui);font-size:.95rem;line-height:1.55;background:var(--panel);border-radius:14px;padding:18px 20px 6px;margin-top:2.2em}
.care ul{padding-left:1.2em}.care li{margin-bottom:.4em}
.forthis{border-top:1px solid var(--line);margin-top:34px;padding-top:24px}
.forthis .eyebrow{margin-bottom:14px}
.nextnav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:30px;padding-block:22px 40px;font-family:var(--display);font-size:1.1rem}
.nextnav a{text-decoration:none;max-width:48%}
.nextnav a span{display:block;font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nextnav a:hover{color:var(--accent)}
.nextnav .r{text-align:right;margin-left:auto}

/* figures */
.fig{margin:1.8em 0 2em}
.fig svg{display:block;width:100%;max-width:540px;height:auto;margin-inline:auto;overflow:visible;font-family:var(--ui)}
.fig figcaption{font-family:var(--ui);font-size:.88rem;line-height:1.5;color:var(--muted);max-width:540px;margin:12px auto 0}
.flabel{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:1px 7px;margin-right:8px;vertical-align:1px}
.fig .t{fill:var(--ink)}.fig .m{fill:var(--muted)}.fig .ac{fill:var(--accent)}.fig .ink-on-gold{fill:#2A1A05}
.fig .bx{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.fig .bxa{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.4}
.fig .bxp{fill:var(--panel);stroke:var(--line);stroke-width:1}
.fig .ln{stroke:var(--line);stroke-width:1.6;fill:none}
.fig .lnm{stroke:var(--muted);stroke-width:1.4;fill:none}
.fig .lna{stroke:var(--gold);stroke-width:3.5;fill:none;stroke-linecap:round}
.fig .ar{stroke:var(--muted);stroke-width:1.6;fill:none}.fig .ara{stroke:var(--accent);stroke-width:2;fill:none}
.fig .mk{fill:var(--muted)}.fig .mka{fill:var(--accent)}
.fig .pp{fill:var(--pp)}.fig .ppa{fill:var(--accent)}
.fig .star{fill:var(--gold)}
.fig .ring{fill:none;stroke:var(--gold);stroke-width:2}
.fig .glow{fill:var(--gold);opacity:.18}
.fig .flamed{fill:#E9A23B;opacity:.5}
.fig .donutbg{fill:none;stroke:var(--panel);stroke-width:26}
.fig .donut{fill:none;stroke:#E9A23B;stroke-width:26}
.fig .donuta{fill:none;stroke:#C9532A;stroke-width:26}
.fig .sw-gold{fill:#E9A23B}.fig .sw-acc{fill:#C9532A}
.fig .stone-pain{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.6}
.fig .stone{fill:var(--panel);stroke:var(--line);stroke-width:1.4}
.fig .pill{fill:var(--gold-soft)}.fig .pilld{fill:var(--panel)}
.fig .ring-soft{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 6}
.fig .breath{fill:var(--gold-soft);stroke:var(--gold);stroke-width:2}
.fig .frame-dark{fill:#1A2236}.fig .pulse-line{fill:none;stroke:#86D3BE;stroke-width:2.2;stroke-linejoin:round}
.fig .frame-sky{fill:#F4C98C}.fig .sun{fill:#F7B538}.fig .hill{fill:#6E8F6F}.fig .courtyard{fill:#C0632B}.fig .tree{fill:#3F6B45}.fig .bird{fill:none;stroke:#5A4636;stroke-width:1.6}
.fig .cook{fill:#A7AFBA}.fig .cooklid{fill:#7C8592}.fig .cookh,.fig .cookw{fill:#2F3138}
.fig .steam{fill:none;stroke:var(--muted);stroke-width:2}
.fig .m0{fill:#6E9C74}.fig .m1{fill:#9DB06A}.fig .m2{fill:#C9B04F}.fig .m3{fill:#E9A23B}.fig .m4{fill:#E07B2E}.fig .m5{fill:#C9532A}.fig .m6{fill:#A8321F}
.fig .hopring{fill:none;stroke:var(--ink);stroke-width:2.2}
.fig .chev{fill:#F2C46D}.fig .chev-a{fill:#E9A23B}
.fig .icf{fill:var(--gold)}.fig .icl{stroke:var(--gold);stroke-width:2.4;fill:none;stroke-linecap:round}
.fig .life{fill:var(--life);stroke:var(--life-s);stroke-width:1.5}
.fig .griefc{fill:#E9A23B}

/* figure animation: plays when scrolled into view; nothing is hidden without JS */
@keyframes kfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes kpop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes kdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kdrop{0%{opacity:0;transform:translateY(-40px)}70%{opacity:1;transform:translateY(3px)}100%{opacity:1;transform:none}}
@keyframes kaway{0%{opacity:1;transform:none}100%{opacity:.14;transform:translate(36px,-10px) rotate(3deg)}}
@keyframes kripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes kglow{0%,100%{opacity:.12}50%{opacity:.3}}
@keyframes kbreathe{0%{transform:scale(1)}40%{transform:scale(1.85)}100%{transform:scale(1)}}
@keyframes kin{0%,38%{opacity:1}42%,96%{opacity:0}100%{opacity:1}}
@keyframes kout{0%,38%{opacity:0}42%,96%{opacity:1}100%{opacity:0}}
@keyframes kdim{from{opacity:1}to{opacity:.35}}
@keyframes kbright{from{opacity:.3}to{opacity:1}}
@keyframes kshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-1.6deg)}40%{transform:rotate(1.6deg)}60%{transform:rotate(-1deg)}80%{transform:rotate(1deg)}}
@keyframes ksteam{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-46px) scale(1.6)}}
@keyframes khop{0%,100%{transform:translateX(-58px)}33%{transform:translateX(116px)}66%{transform:translateX(0)}}
@keyframes ktype{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes kpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}
html.anim .fig [class*="a-"]{transform-box:fill-box;transform-origin:center;animation-fill-mode:both;animation-delay:var(--d,0s);animation-play-state:paused}
html.anim .fig .a-fade{animation-name:kfade;animation-duration:.7s;animation-timing-function:ease-out}
html.anim .fig .a-pop{animation-name:kpop;animation-duration:.5s;animation-timing-function:cubic-bezier(.3,1.5,.6,1)}
html.anim .fig .a-draw{stroke-dasharray:1;animation-name:kdraw;animation-duration:var(--dur,.8s);animation-timing-function:ease-in-out}
html.anim .fig .a-dropaway{animation-name:kdrop,kaway;animation-duration:.6s,1.4s;animation-delay:var(--d),var(--away);animation-timing-function:ease-out,ease-in-out}
html.anim .fig .a-ripple{animation:kripple 2.8s ease-out infinite}
html.anim .fig .a-glow{animation:kglow 3s ease-in-out infinite}
html.anim .fig .a-flicker{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:flicker 1.6s ease-in-out infinite}
html.anim .fig .a-breathe{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kbreathe 10s ease-in-out infinite}
html.anim .fig .a-in-txt{animation:kin 10s linear infinite}
html.anim .fig .a-out-txt{animation:kout 10s linear infinite}
html.anim .fig .a-dim{animation-name:kdim;animation-duration:1.4s}
html.anim .fig .a-brighten{animation-name:kbright;animation-duration:1.4s}
html.anim .fig .a-shake{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kshake .5s linear infinite}
html.anim .fig .a-steam{animation:ksteam 2.7s ease-out var(--d) infinite both}
html.anim .fig .a-hop{animation:khop 6s ease-in-out infinite}
html.anim .fig .a-type{animation-name:ktype;animation-duration:.8s;animation-timing-function:steps(18)}
html.anim .fig .a-pulse{animation:kpulse 1.6s ease-in-out infinite}
html.anim .fig.in [class*="a-"]{animation-play-state:running}
html:not(.anim) .fig .a-in-txt{display:none}
html:not(.anim) .fig .a-out-txt{display:none}
html.anim .fig .static-txt{display:none}

/* worksheets */
.intro{font-size:1.2rem;line-height:1.6;margin:0 0 12px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:14px 0 6px}
.btn{font-family:var(--ui);font-weight:800;font-size:.82rem;letter-spacing:.04em;border:0;border-radius:999px;padding:10px 16px;background:var(--gold);color:#1B1206;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.remember{font-family:var(--ui);font-size:.85rem;display:flex;gap:8px;align-items:center;cursor:pointer}
.remember input{width:18px;height:18px;accent-color:var(--gold)}
.privacy{font-family:var(--ui);font-size:.8rem;color:var(--muted);margin:4px 0 10px}
.part{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px 22px;margin:18px 0}
.part h2{font-family:var(--display);font-weight:500;font-size:1.45rem;line-height:1.2;margin:0 0 8px;display:flex;gap:12px;align-items:center}
.pn{flex:none;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1B1206;font-family:var(--ui);font-size:.95rem;font-weight:800;display:grid;place-items:center}
.hint{font-family:var(--ui);font-size:.9rem;color:var(--muted);margin:0 0 12px}
.fl{display:block;font-family:var(--ui);font-size:.85rem;font-weight:700;margin:12px 0 6px}
.f{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;transition:border-color .2s,background .2s}
.f:focus{border-color:var(--gold);outline:none;background:var(--card)}
textarea.f{resize:vertical;min-height:3.2em;line-height:1.55}
.f::placeholder{color:var(--muted);opacity:.75}
.f.in{display:inline-block;width:auto;min-width:9em;max-width:100%;padding:4px 10px;margin:2px 4px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 18px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{font-family:var(--ui);font-size:.88rem;font-weight:600;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .2s ease}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"],.chip[data-state="1"]{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.chip[aria-pressed="true"]::before{content:"✓ ";color:var(--accent)}
.chip[data-state="2"]{background:transparent;border-style:dashed;border-color:var(--accent)}
.chip[data-state="1"]::before{content:"✓ ";color:var(--accent)}
.chip[data-state="2"]::before{content:"? ";color:var(--accent)}
.chip.mini{font-size:.8rem;padding:5px 10px;color:var(--muted)}
.chip.bump{animation:bump .35s ease}
@keyframes bump{50%{transform:scale(1.08)}}
.legend{font-family:var(--ui);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.legend-key{font-family:var(--ui);font-size:.8rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.legend-key span{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--gold);background:var(--gold-soft)}
.legend-key .k2{background:transparent;border-style:dashed;border-color:var(--accent);margin-left:10px}
.readout{font-family:var(--ui);font-size:.92rem;color:var(--accent);font-weight:700;margin:8px 0}
.warn{font-family:var(--ui);font-size:.9rem;background:var(--panel);border-radius:12px;padding:12px 16px}
.closing{font-family:var(--display);font-style:italic;font-size:1.35rem;line-height:1.4;text-align:center;margin:30px auto 10px;max-width:32rem;color:var(--accent)}

/* pie */
.pie-wrap{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px 24px;align-items:center}
.pie{width:180px;height:180px}
.pie-bg{fill:none;stroke:#C9532A;stroke-width:30}
.pie-fg{fill:none;stroke:#E9A23B;stroke-width:30;stroke-dasharray:90 100;transition:stroke-dasharray .6s ease}
.pie-n{font-family:var(--display);font-size:38px;fill:var(--ink)}
.pie-l{font-family:var(--ui);font-size:12px;fill:var(--muted)}
.range{padding:0;border:0;background:none;accent-color:#E9A23B;height:28px}
.awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.award{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg);border-radius:14px;padding:8px}
.award-i{width:60px;height:60px}
.award-i .flame{fill:#F7B538}.award-i .flamec{fill:#FFF1C9}.award-i .glow{fill:#E9A23B;opacity:.2}
.award-i .a-flicker{transform-box:view-box;transform-origin:30px 44px;animation:flicker 1.6s ease-in-out infinite}
.award .f{text-align:center}
.fillers{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* body map */
.bodymap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 24px;align-items:center}
.bodymap svg{width:200px;height:auto}
.zone{fill:var(--panel);stroke:var(--line);stroke-width:1.5;cursor:pointer;transition:fill .3s}
.zone:hover{fill:var(--gold-soft)}
.zone.on{fill:#E9A23B;stroke:var(--accent);animation:zp 2.4s ease-in-out infinite}
@keyframes zp{0%,100%{opacity:1}50%{opacity:.7}}

/* tables */
.tbl-wrap{overflow-x:auto}
table.log{width:100%;border-collapse:separate;border-spacing:0 6px;font-family:var(--ui);font-size:.85rem}
table.log th{text-align:left;color:var(--muted);font-weight:700;padding:0 6px}
table.log td{padding:0 4px}
table.log .f{padding:7px 8px;font-size:.92rem}
table.log .num{width:4.6em;text-align:center}
.delta{min-width:6.5em;font-weight:800;font-size:.8rem;white-space:nowrap}
.delta .up{color:#B23A1E}.delta .dn{color:var(--leaf)}.delta .eq{color:var(--muted)}
.delta span{display:inline-block;animation:kpop .4s ease both}
.five{padding-left:1.4em;margin:0}.five li{margin-bottom:8px}

/* flows */
.flow{display:grid;gap:6px;margin:10px 0 18px;position:relative}
.flowrow{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:10px;align-items:center;position:relative}
.flowlab{font-family:var(--ui);font-weight:800;font-size:.82rem;background:#E9A23B;color:#1B1206;border-radius:999px;padding:7px 10px;text-align:center}
.flowrow + .flowrow::before{content:"";position:absolute;left:4.25em;top:-9px;width:2px;height:12px;background:var(--gold)}

/* pacer */
.pacer{display:flex;flex-direction:column;align-items:center;gap:14px}
.pacer-stage{position:relative;width:220px;height:220px;display:grid;place-items:center}
.pacer-stage::before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--line);border-radius:50%}
.pacer-dot{width:90px;height:90px;border-radius:50%;background:var(--gold-soft);border:2px solid var(--gold);transition:transform 4s ease-in-out}
.pacer-dot.in{transform:scale(2.2);transition-duration:4s}
.pacer-dot.out{transform:scale(1);transition-duration:6s}
.pacer-say{position:absolute;font-family:var(--ui);font-weight:800;font-size:1rem;text-align:center;margin:0}

/* anger meter */
.meter-week{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:6px;max-width:520px}
.mlegend{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--ui);font-size:.72rem;font-weight:800;color:var(--muted);padding:6px 4px 30px 0;text-align:right}
.mlegend span:first-child{color:#A8321F}.mlegend span:last-child{color:var(--leaf)}
.mdot.l6{border-color:#A8321F66}.mdot.l5{border-color:#C9532A55}.mdot.l4{border-color:#E07B2E55}.mdot.l3{border-color:#E9A23B66}.mdot.l2{border-color:#C9B04F66}.mdot.l1{border-color:#9DB06A66}.mdot.l0{border-color:#6E9C7466}
.mcol{display:flex;flex-direction:column;align-items:center;gap:5px}
.mday{font-family:var(--ui);font-size:.75rem;font-weight:800;color:var(--muted);order:9}
.mdot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);cursor:pointer;transition:all .25s}
.mdot.fill.l0{background:#6E9C74}.mdot.fill.l1{background:#9DB06A}.mdot.fill.l2{background:#C9B04F}.mdot.fill.l3{background:#E9A23B}.mdot.fill.l4{background:#E07B2E}.mdot.fill.l5{background:#C9532A}.mdot.fill.l6{background:#A8321F}
.mdot.fill{border-color:transparent;transform:scale(1.04)}
.mdot.top{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.pledge p{font-size:1.1rem;line-height:2.2;margin:0}

/* sorter */
.adder{display:flex;gap:10px;align-items:center}
.adder .f{flex:1}
.sorter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scol{background:var(--bg);border-radius:14px;padding:12px;min-height:150px}
.scol h3{font-family:var(--display);font-weight:500;font-size:1.15rem;margin:0}
.scol p{font-family:var(--ui);font-size:.78rem;color:var(--muted);margin:0 0 8px}
.scol[data-c="0"]{box-shadow:inset 0 3px 0 #C9532A}.scol[data-c="1"]{box-shadow:inset 0 3px 0 #E9A23B}.scol[data-c="2"]{box-shadow:inset 0 3px 0 #6E9C74}
.sbin{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--ui);font-size:.86rem;font-weight:600;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:7px 8px 7px 10px;cursor:pointer;animation:kpop .35s ease both;text-align:left;color:var(--ink)}
.item:hover{border-color:var(--gold)}
.item .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 4px}

/* note card */
.notecard,.blesscard{position:relative;background:linear-gradient(160deg,#FFF6E4,#F8E2B8);color:#2A1A05;border-radius:16px;padding:20px 22px;font-family:var(--body);box-shadow:0 8px 24px rgba(120,70,10,.15);overflow:hidden}
.notecard p{margin:0 0 8px}.notecard ul{margin:0 0 8px;padding-left:1.2em}
.nc-h,.bc-h{font-family:var(--display);font-style:italic;font-size:1.3rem;margin-bottom:12px!important}
.nc-f{font-style:italic;margin-top:12px!important}
[data-bind]{transition:color .3s}
.coderow{display:grid;grid-template-columns:2.4em minmax(0,1fr) 9em;gap:10px;align-items:center;margin:8px 0}
.codeicon{font-size:1.6rem;text-align:center}
.codelab{font-family:var(--ui);font-weight:700;font-size:.92rem}

/* platitude */
.plat-out{font-family:var(--display);font-size:1.45rem;line-height:1.35;margin:14px 0 4px}
.plat-end{display:block;color:var(--accent);font-style:italic}
.plat-end.go{animation:ktype .9s steps(20) both}
.script{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--accent);margin:12px 0 0}

/* feelings strips */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 16px;position:relative}
.panel{background:var(--bg);border-radius:14px;padding:4px 12px 12px;border:1.5px solid var(--line)}
.panel.p3{border-color:var(--gold);background:var(--gold-soft)}
.both{font-size:1.1rem;line-height:2.2;margin:0}

/* treasure */
.chest-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:12px}
.chest{width:220px}
.chest-body{fill:#8E5A2B}.chest-band{fill:#6E4220}.chest-lid{fill:#A86C34}.chest-lock{fill:#E9A23B}
.lid{transform-box:fill-box;transform-origin:0% 100%;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.lid.open{transform:rotate(-24deg) translateY(-6px)}
.spark circle{fill:#F7B538;opacity:0}
.spark.go circle{animation:spk 1s ease-out both}
.spark.go circle:nth-child(2){animation-delay:.15s}.spark.go circle:nth-child(3){animation-delay:.3s}
@keyframes spk{0%{opacity:0;transform:translateY(10px)}40%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
.treasures{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;min-height:60px}
.treasures .item{background:var(--gold-soft);border-color:var(--gold)}
.thread{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative;margin-bottom:6px}
.thread::before{content:"";position:absolute;left:4%;right:4%;top:15px;height:3px;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:2px;transform-origin:left;animation:growx 1.6s ease-out both}
@keyframes growx{from{transform:scaleX(0)}to{transform:none}}
.knot{position:relative;padding-top:28px}
.kdot{position:absolute;top:8px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--card)}
.knot .fl{text-align:center;margin-top:4px}
.bc-stars{position:absolute;inset:0;pointer-events:none}
.bc-stars i{position:absolute;width:6px;height:6px;border-radius:50%;background:#E9A23B;animation:twinkle 3s ease-in-out infinite}
.bc-stars i:nth-child(1){top:12%;right:10%}.bc-stars i:nth-child(2){top:30%;right:22%;animation-delay:.6s}.bc-stars i:nth-child(3){bottom:16%;right:8%;animation-delay:1.2s}.bc-stars i:nth-child(4){bottom:30%;left:6%;animation-delay:1.8s}.bc-stars i:nth-child(5){top:8%;left:40%;animation-delay:2.4s}
.blesscard p{margin:0 0 8px;font-size:1.08rem}

footer.site{border-top:1px solid var(--line)}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;padding-block:24px 34px;font-family:var(--ui);font-size:.82rem;color:var(--muted)}

@media (max-width:960px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}.sgrid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){
  .ggrid,.sgrid,.sgrid.wide,.how3,.about .cols,.two,.three,.strip,.sorter,.awards{grid-template-columns:minmax(0,1fr)}
  .pie-wrap,.bodymap,.chest-wrap{grid-template-columns:minmax(0,1fr);justify-items:center}
  .thread{grid-template-columns:repeat(2,minmax(0,1fr))}.thread::before{display:none}
  .coderow{grid-template-columns:2em minmax(0,1fr)}.coderow .f{grid-column:1 / -1}
  .hero::after{background:linear-gradient(180deg,rgba(10,15,28,.55),rgba(10,15,28,.85))}
  .prose{font-size:1.09rem}.scene{font-size:1.13rem}
  .part{padding:16px 14px 18px}
  .mast nav{gap:6px 16px}
  .flowrow{grid-template-columns:7em minmax(0,1fr)}
  .flowrow + .flowrow::before{left:3.5em}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .mast,footer.site,.toolbar,.privacy,.nextnav,.hero,.fillers,.forthis,.adder .btn,#pacerBtn{display:none!important}
  body{background:#fff;color:#000}
  .view[hidden]{display:none!important}
  .part{break-inside:avoid;border-color:#bbb}
  .f{border-color:#999;background:#fff}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* v2 additions: story guides */
.takeaway{position:relative;margin:2.4em 0 1.4em;padding:22px 24px 10px;border-radius:18px;background:linear-gradient(160deg,#FFF5E1,#F7DDA9);color:#2A1A05;font-family:var(--ui);overflow:hidden;box-shadow:0 10px 30px rgba(140,80,10,.14)}
.takeaway::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(245,181,63,.45),rgba(245,181,63,0) 70%);animation:glowp 3.5s ease-in-out infinite}
.tw-head{display:flex;align-items:center;gap:8px}
.tw-lamp{width:44px;height:44px}
.tw-lamp .glow{fill:#E9A23B;opacity:.25}.tw-lamp .flame{fill:#F7B538}.tw-lamp .flamec{fill:#FFF1C9}
.tw-lamp .a-flicker{transform-box:view-box;transform-origin:30px 44px;animation:flicker 1.6s ease-in-out infinite}
.tw-label{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A4A10;margin:0}
.tw-big{font-family:var(--display);font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.3;margin:10px 0 12px!important;color:#2A1A05}
.takeaway ul{list-style:none;padding:0;margin:0 0 10px}
.takeaway li{position:relative;padding-left:28px;margin-bottom:10px;font-size:1rem;line-height:1.5}
.takeaway li::before{content:"";position:absolute;left:4px;top:.35em;width:12px;height:12px;border-radius:50%;background:#E9A23B;box-shadow:0 0 0 4px rgba(233,162,59,.25)}
.fig .fridge{fill:var(--card);stroke:var(--line);stroke-width:2}.fig .fridge-l{stroke:var(--line);stroke-width:2}.fig .fridge-h{fill:var(--line)}
.fig .note{fill:#FFE38A}.fig .note-t{fill:#3A2A05}
.fig .bar-before{fill:var(--life-s)}.fig .bar-worse{fill:#C9532A}.fig .bar-better{fill:#6E9C74}.fig .bar-same{fill:#C9B04F}
.fig .up{fill:#C9532A}.fig .dn{fill:#4F8A58}
.fig .wave{fill:none;stroke:#C9532A;stroke-width:2.4;stroke-linecap:round}
.fig .alarm{fill:var(--card);stroke:var(--muted);stroke-width:2}.fig .alarm-l{fill:#C9532A}
.fig .fire{fill:#F08A24}.fig .toast{fill:#D9A86C}.fig .toast-burn{fill:#4A2E1A}
.fig .kwin{fill:#FFF2D6;stroke:#B07A3A;stroke-width:2}.fig .kbar{stroke:#B07A3A;stroke-width:2}.fig .ktable{fill:#B07A3A}
.fig .kcup{fill:#FFFFFF;stroke:#B07A3A;stroke-width:1.5}.fig .kcupl{fill:none;stroke:#B07A3A;stroke-width:2}
.fig .ksteam,.fig .knote{fill:none;stroke:#7A5530;stroke-width:1.8;stroke-linecap:round}
.fig .kradio{fill:#7A4B2A}.fig .kdial{fill:#F7B538}
.fig .heart{fill:#C9334F}
.fig .way-c{fill:#F2C46D}
.fig .tray-no{fill:var(--panel);stroke:#C9532A;stroke-width:1.5;stroke-dasharray:5 4}.fig .tray-yes{fill:var(--panel);stroke:#6E9C74;stroke-width:1.5;stroke-dasharray:5 4}
.fig .dcard{fill:var(--card);stroke:var(--gold);stroke-width:1.5}
.fig .vc1{fill:#9FB3CF;fill-opacity:.45;stroke:#7F96B8;stroke-width:1.5}.fig .vc2{fill:#F2C46D;fill-opacity:.55;stroke:#E9A23B;stroke-width:1.5}
.fig .mi{fill:none;stroke:var(--ink);stroke-width:2}.fig .mi-card{fill:var(--card);stroke:var(--ink);stroke-width:1.5}.fig .petal{fill:#FFFFFF;stroke:#D9C9A0;stroke-width:1}
.fig .mbox{fill:#A86C34}.fig .mbox-lid{fill:#8E5A2B}.fig .mbox-t{fill:#FFF1D6}
@keyframes kstick{0%{opacity:0;transform:scale(1.4) rotate(-8deg)}60%{opacity:1;transform:scale(.95)}100%{opacity:1;transform:none}}
@keyframes klight{0%{opacity:.25;filter:grayscale(1)}100%{opacity:1;filter:none}}
@keyframes kgrow{from{transform:scaleY(0)}to{transform:none}}
@keyframes kring{0%{opacity:0;transform:scale(.7)}40%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes kflick2{0%,100%{transform:scale(1,1)}30%{transform:scale(.95,1.06)}60%{transform:scale(1.04,.96)}}
@keyframes ksteam2{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes krise2{0%{opacity:0;transform:translateY(24px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes ksort{0%{opacity:0;transform:translate(calc(-1*var(--dx)),calc(-1*var(--dy)))}25%{opacity:1;transform:translate(calc(-1*var(--dx)),calc(-1*var(--dy)))}100%{opacity:1;transform:none}}
@keyframes kfloat3{0%{opacity:0;transform:translateY(50px)}100%{opacity:1;transform:none}}
html.anim .fig .a-stick{animation-name:kstick;animation-duration:.5s;animation-timing-function:ease-out}
html.anim .fig .a-light{animation-name:klight;animation-duration:.9s}
html.anim .fig .a-grow{transform-origin:bottom;animation-name:kgrow;animation-duration:.8s;animation-timing-function:ease-out}
html.anim .fig .a-ring{animation:kring 1.4s ease-out var(--d) infinite both}
html.anim .fig .a-flick2{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kflick2 1.2s ease-in-out infinite}
html.anim .fig .a-steam2{animation:ksteam2 2.4s ease-out var(--d,0s) infinite both}
html.anim .fig .a-rise2{animation-name:krise2;animation-duration:1s;animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
html.anim .fig .a-sort{transform-box:view-box;transform-origin:0 0;animation-name:ksort;animation-duration:1.4s;animation-timing-function:ease-in-out}
html.anim .fig .a-float3{animation-name:kfloat3;animation-duration:.9s;animation-timing-function:ease-out}
html.anim .fig.in [class*="a-"]{animation-play-state:running}