/* 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}

/* ===== Unfinished Goodbyes overrides ===== */
:root{--bg:#F4F1EA;--panel:#E8E3D8;--card:#FBF9F4;--accent:#1F6670;--teal-soft:#D5E8E8;--rose:#B5566B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0F1520;--panel:#192131;--card:#141B28;--accent:#7CC9CC;--teal-soft:#1D3640}}
:root[data-theme="dark"]{--bg:#0F1520;--panel:#192131;--card:#141B28;--accent:#7CC9CC;--teal-soft:#1D3640}
.hero{background:#0E1A2B}
.hero::after{background:linear-gradient(90deg,rgba(9,16,28,.86) 0%,rgba(9,16,28,.6) 46%,rgba(9,16,28,0) 72%)}
.h-hill{fill:#1B2A40}.h-hill2{fill:#142035}
.h-roof{fill:#2A2F45}.h-wall{fill:#3A3A52}.h-doorway{fill:#F5C66B}.h-door{fill:#5A3E2E}.h-window{fill:#F5C66B;opacity:.85}
.h-light{fill:#F5C66B;opacity:.28}
.h-path{fill:none;stroke:rgba(245,198,107,.35);stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round}
.h-dash{fill:none;stroke:#F4E6C8;stroke-width:2.4;stroke-dasharray:5 5}
.h-ghost{animation:ghost 6s ease-in-out infinite}
@keyframes ghost{0%,100%{opacity:.15}50%{opacity:.9}}
.h-fly{fill:#F7D27A;animation:fly 8s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(0,0);opacity:.2}25%{opacity:1}50%{transform:translate(18px,-22px);opacity:.5}75%{transform:translate(-10px,-10px);opacity:1}}
.ic-dash{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-dasharray:4 4}
.ic-ring2{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:5 5}
.ic-line2{stroke:var(--pp);stroke-width:2.5;fill:none;stroke-linecap:round}
.ic-and{fill:var(--accent);font-family:var(--display);font-style:italic}
.ic-heart{fill:#C9334F}
.a2-swing{transform-origin:60px 10px;animation:swing2 3s ease-in-out infinite}
@keyframes swing2{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
.a2-fade{animation:ghost 5s ease-in-out infinite}
.a2-beat{transform-box:fill-box;transform-origin:center;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}}
.start-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 40px;align-items:start}
.start-text p{font-size:1.15rem;line-height:1.7;margin:0 0 1em}
.kinds{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.kind-tabs{display:flex;gap:8px;margin-bottom:12px}
.kind-tabs button{font-family:var(--ui);font-weight:800;font-size:.85rem;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.kind-tabs button[aria-selected="true"]{background:var(--teal-soft);border-color:var(--accent);color:var(--ink)}
.kind-art{width:110px;height:110px;float:right;margin:0 0 6px 10px}
.kind-panel p{font-family:var(--ui);font-size:.98rem;line-height:1.55;margin:0 0 8px}
.kind-panel ul{font-family:var(--ui);font-size:.95rem;line-height:1.5;padding-left:1.2em;margin:0;clear:none}
.kind-panel li{margin-bottom:4px}
/* figures */
.fig .pp-dash{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-dasharray:5 5}
.fig .heart{fill:#C9334F}
.fig .thought{fill:var(--gold)}
.fig .chip-a{fill:var(--teal-soft);stroke:var(--accent);stroke-width:1.2}
.fig .chip-b{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.2}
.fig .cloud{fill:#C9D3DF}.fig .cloud-dark{fill:#4A5266}
.fig .ink-dark{fill:#1E2333}.fig .ink-light{fill:#F4F1EA}
.fig .hand1{fill:var(--teal-soft);stroke:var(--accent);stroke-width:1.6}.fig .hand2{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.6}
.fig .step{fill:var(--panel);stroke:var(--line)}.fig .step-a{fill:var(--gold-soft);stroke:var(--gold)}
.fig .frame-w{fill:#B07A3A}.fig .photo{fill:#E9E1D2}
.fig .garland{fill:none;stroke:#7A9A5A;stroke-width:2}.fig .marigold{fill:#F29B1D}
.fig .shawl{fill:#8C5A9A}.fig .shawl-f{stroke:#8C5A9A;stroke-width:2}.fig .bg-disc{fill:var(--bg)}
.fig .ring-out{fill:var(--panel);stroke:var(--line);stroke-width:1.5;stroke-dasharray:6 6}.fig .ring-in{fill:#F2C46D}
.fig .dial-bg{fill:none;stroke:var(--panel);stroke-width:22}.fig .dial-lo{fill:none;stroke:#9FB3CF;stroke-width:22}.fig .dial-hi{fill:none;stroke:#C9532A;stroke-width:22}.fig .dial-mid{fill:none;stroke:#6E9C74;stroke-width:22}
.fig .needle{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.fig .role{fill:var(--panel);stroke:var(--line)}.fig .role-new{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.5}
.fig .pack{fill:#B07A3A}
.fig .rod{stroke:var(--ink);stroke-width:2.5}.fig .bob{fill:#E9A23B}
.fig .weight{fill:#8A8F9C}
.fig .rail{stroke:#B07A3A;stroke-width:5;stroke-linecap:round}.fig .rung{stroke:#B07A3A;stroke-width:4;stroke-linecap:round}
.fig .table{fill:#C9A06A}.fig .chair-empty{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:4 3}.fig .dish{fill:#FFFFFF;stroke:#B07A3A}
.fig .doorframe{fill:#5A3E2E}.fig .door{fill:#8E5A2B}.fig .path-l{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:3 8;stroke-linecap:round}
.fig .sofa{fill:#6B7A99}.fig .sofa-b{fill:#56627D}.fig .bottle{fill:#5E8A5A}
.fig .pier{fill:#8A8F9C}.fig .deck{fill:#B07A3A}.fig .deck-ok{fill:#6E9C74}
@keyframes kghost{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes kbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}}
@keyframes kdrift{0%,100%{transform:translate(0,0);opacity:1}50%{transform:translate(8px,-10px);opacity:.3}}
@keyframes kclimb{0%{transform:translate(0,0)}25%{transform:translate(100px,-36px)}50%{transform:translate(200px,-72px)}75%,100%{transform:translate(300px,-108px)}}
@keyframes kneedle2{0%{transform:rotate(80deg)}40%{transform:rotate(-30deg)}70%{transform:rotate(10deg)}100%{transform:rotate(0)}}
@keyframes ksag{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
@keyframes kswing{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}}
@keyframes kpress{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes klift2{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-14px);opacity:.2}}
@keyframes kclimb2{0%{transform:translate(0,0)}100%{transform:translate(0,-240px)}}
@keyframes kglowchair{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes kswingdoor{0%{transform:skewY(0) scaleX(1)}100%{transform:scaleX(.6)}}
@keyframes kfadeout{0%,30%{opacity:1}100%{opacity:0}}
@keyframes kcrack{0%,70%{transform:none}80%{transform:rotate(2deg) translateY(4px)}100%{transform:rotate(3deg) translateY(8px)}}
@keyframes kdropw{0%{opacity:0;transform:translateY(-40px)}100%{opacity:1;transform:none}}
@keyframes kflex{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.5)}}
html.anim .fig .a-ghost{animation:kghost 4s ease-in-out infinite}
html.anim .fig .a-beat{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kbeat 1.6s ease-in-out infinite}
html.anim .fig .a-drift{animation:kdrift 3.4s ease-in-out infinite}
html.anim .fig .a-climb{animation:kclimb 4s ease-in-out .6s infinite both}
html.anim .fig .a-needle2{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation-name:kneedle2;animation-duration:2.6s;animation-timing-function:ease-in-out}
html.anim .fig .a-sag{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:ksag 2.4s ease-in-out infinite}
html.anim .fig .a-swing{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kswing 3.2s ease-in-out infinite}
html.anim .fig .a-press{animation:kpress 2.4s ease-in-out infinite}
html.anim .fig .a-lift2{animation:klift2 2.4s ease-in-out 1s infinite alternate both}
html.anim .fig .a-climb2{animation-name:kclimb2;animation-duration:2.6s;animation-delay:.3s;animation-timing-function:ease-in-out}
html.anim .fig .a-glowchair{animation:kglowchair 2.4s ease-in-out infinite}
html.anim .fig .a-swingdoor{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kswingdoor 3s ease-in-out infinite alternate}
html.anim .fig .a-fadeout{animation-name:kfadeout;animation-duration:3s}
html.anim .fig .a-crack{transform-box:fill-box;transform-origin:left;animation-name:kcrack;animation-duration:2.6s;animation-delay:.3s}
html.anim .fig .a-dropw{animation-name:kdropw;animation-duration:.5s}
html.anim .fig .a-flex{transform-box:view-box;transform-origin:var(--ox) var(--oy);animation:kflex 2.4s ease-in-out infinite}
html.anim .fig.in [class*="a-"]{animation-play-state:running}
html:not(.anim) .fig .a-fadeout{opacity:0}
/* worksheets */
.famwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.famcircle{position:relative;width:100%;aspect-ratio:1/1;max-width:480px;margin:auto}
.fam-ring{position:absolute;inset:16%;border:2.5px dashed var(--accent);border-radius:50%;background:radial-gradient(circle,var(--teal-soft),transparent 70%)}
.fam-me{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--gold);color:#1B1206;display:grid;place-items:center;font-family:var(--ui);font-weight:800}
.famcircle .item{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;padding:4px 4px 4px 9px;font-size:.8rem;transition:left .5s ease,top .5s ease;z-index:1}.famcircle .item:hover{z-index:2}
.famcircle .item.fz0{background:var(--gold-soft);border-color:var(--gold)}
.famcircle .item.fz1{background:var(--teal-soft);border-color:var(--accent)}
.famcircle .item.fz2{background:var(--card);border-style:dashed}
.fam-key .z0{background:var(--gold-soft);border-color:var(--gold)}.fam-key .z1{background:var(--teal-soft);border-color:var(--accent);margin-left:10px}.fam-key .z2{background:var(--card);border-style:dashed;margin-left:10px}
.qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px;margin-bottom:8px}
.both .and{font-family:var(--display);font-style:italic;color:var(--accent);font-size:1.2rem;margin:0 4px}
.chips.roles .chip[data-state="1"]::before{content:"Before · "}
.chips.roles .chip[data-state="2"]::before{content:"New · "}
.ladder{position:relative;padding-left:26px}
.ladder::before,.ladder::after{content:"";position:absolute;top:0;bottom:0;width:6px;border-radius:3px;background:#B07A3A}
.ladder::before{left:0}.ladder::after{left:14px;opacity:.5}
.rung-row{display:grid;grid-template-columns:7em minmax(0,1fr);gap:10px;align-items:center;margin:0 0 12px;position:relative;animation:kfade .6s ease-out both;animation-delay:calc(var(--i)*.15s)}
.rung-row::before{content:"";position:absolute;left:-26px;width:20px;height:5px;background:#B07A3A;border-radius:3px}
.rung-lab{font-family:var(--ui);font-weight:800;font-size:.82rem;color:var(--accent)}
.rung-row:first-child .f{border-color:var(--gold);background:var(--gold-soft)}
@media (max-width:680px){
  .start-grid,.famwrap,.qa{grid-template-columns:minmax(0,1fr)}
  .rung-row{grid-template-columns:minmax(0,1fr)}
  .kind-art{width:80px;height:80px}
}
@media print{.adder,.kind-tabs{display:none!important}}