:root{
  color-scheme:dark;
  --board:#22332D; --board-deep:#1A2823;
  --chalk:#EEF0E6; --chalk-dim:#A8B7AD; --chalk-faint:#5E7268;
  --crystal:#7FD3E8; --amber:#F2B45A; --rose:#EE8F8F;
  --line:rgba(238,240,230,.18);
  --display:"Cabin Sketch","Chalkboard SE","Comic Sans MS",cursive;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
/* Matrix theme: green on black terminal. Applied with data-theme on the root element. */
:root[data-theme="matrix"]{
  --board:#050A06; --board-deep:#020603;
  --chalk:#B8F5C4; --chalk-dim:#7FBF8E; --chalk-faint:#2F6B3E;
  --crystal:#3CFF6B; --amber:#E8FF7A; --rose:#FF6B6B;
  --line:rgba(60,255,107,.24);
  --display:"Share Tech Mono","JetBrains Mono",ui-monospace,Consolas,monospace;
}
:root[data-theme="matrix"] body{background:radial-gradient(1000px 500px at 15% -10%,rgba(60,255,107,.07),transparent 60%),radial-gradient(900px 600px at 110% 50%,rgba(60,255,107,.04),transparent 60%),var(--board)}
:root[data-theme="matrix"] h1,:root[data-theme="matrix"] .panel h2,:root[data-theme="matrix"] .ending h2,:root[data-theme="matrix"] .mapbox h3,:root[data-theme="matrix"] .donate h3,:root[data-theme="matrix"] .fanlinks h3,:root[data-theme="matrix"] .choice b{font-weight:400}
:root[data-theme="matrix"] .choice b{font-size:18px}
:root[data-theme="matrix"] .stage{border-color:rgba(60,255,107,.35);box-shadow:0 0 24px rgba(60,255,107,.08)}
:root[data-theme="matrix"] .btn{color:#03110A}
#rain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.2;z-index:0}
:root:not([data-theme="matrix"]) #rain{display:none}
.wrap{position:relative;z-index:1}
.sharerow{gap:8px}
.sharerow .btn.ghost{padding:8px 12px;font-size:14px}
[hidden]{display:none!important}
html{background:var(--board-deep)}
body{
  background:
    radial-gradient(1100px 480px at 18% -8%,rgba(238,240,230,.06),transparent 60%),
    radial-gradient(900px 600px at 110% 45%,rgba(127,211,232,.05),transparent 60%),
    var(--board);
  color:var(--chalk);font:16px/1.55 var(--body);padding-inline:16px;
}
.wrap{max-width:1040px;margin:0 auto;padding-block:28px 40px;display:grid;gap:24px}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--crystal)}
h1{font:700 clamp(36px,6.4vw,60px)/1 var(--display);margin:10px 0 8px;text-wrap:balance;letter-spacing:.01em}
.lede{max-width:60ch;color:var(--chalk-dim);margin:0}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pick-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 14px;border:2px solid rgba(238,240,230,.28);border-radius:999px;font:600 13px/1.2 var(--mono);color:var(--chalk-dim);transition:border-color .15s,color .15s}
.pick-btn:hover{border-color:var(--crystal);color:var(--chalk)}
.pick-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(242,180,90,.08)}
.gallery-chip{padding:6px 12px;border-radius:999px;border:2px solid rgba(238,240,230,.28);font:600 12.5px/1.2 var(--mono);color:var(--chalk-dim)}
.gallery-chip.found{border-color:var(--crystal);color:var(--chalk);background:rgba(127,211,232,.08)}
.gallery-chip.badge.earned{border-color:var(--amber);color:var(--amber);background:rgba(242,180,90,.08)}
.pathlist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--chalk-dim)}
.pathlist b{color:var(--chalk)}
.scorebars{display:grid;gap:10px}
.resume-note{border:2px dashed var(--line);border-radius:6px;padding:10px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--chalk-dim)}
.main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.main{grid-template-columns:1fr}}
.stage{margin:0;background:var(--board-deep);border:2px solid var(--line);border-radius:6px;overflow:hidden}
.stage svg{display:block;width:100%;height:auto}
.caption{padding:10px 14px;font:13px/1.4 var(--mono);color:var(--chalk-dim);border-top:1px dashed var(--line)}
.panel{display:grid;gap:14px;align-content:start}
.kicker{font:600 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.panel p{margin:0;max-width:62ch}
.panel h2{font:700 30px/1.1 var(--display);margin:0;text-wrap:balance}
.choices{display:grid;gap:10px}
.choice{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:12px 14px;border:2px solid rgba(238,240,230,.28);border-radius:6px;background:rgba(238,240,230,.03);transition:border-color .15s,background .15s,transform .15s}
.choice:hover{border-color:var(--crystal);background:rgba(127,211,232,.08);transform:translateX(3px)}
.choice b{font:700 21px/1.15 var(--display)}
.choice span{font-size:14px;color:var(--chalk-dim)}
.choice:focus-visible,.btn:focus-visible,.pick-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 16px;border-radius:6px;background:var(--chalk);color:var(--board-deep);font:700 15px/1 var(--body)}
.btn:hover{background:var(--crystal)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{background:var(--chalk)}
.btn.ghost{background:transparent;color:var(--chalk);border:2px solid rgba(238,240,230,.35);padding:9px 14px}
.btn.ghost:hover{border-color:var(--crystal);color:var(--crystal)}
.steps{display:flex;gap:6px}
.steps i{width:28px;height:4px;border-radius:2px;background:var(--chalk-faint)}
.steps i.on{background:var(--amber)}
.ending{border:2px solid var(--chalk);border-radius:6px;padding:16px;display:grid;gap:12px;background:rgba(238,240,230,.04)}
.ending h2{font-size:40px}
.meter{display:grid;gap:6px}
.meter .lab{display:flex;justify-content:space-between;gap:8px;font:12px/1.2 var(--mono);color:var(--chalk-dim)}
.bar{position:relative;height:12px;border-radius:6px;background:rgba(238,240,230,.12)}
.bar .fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--crystal),var(--amber) 70%,var(--rose));transition:width .8s ease}
.toast{font:12px/1.4 var(--mono);color:var(--crystal);min-height:1em}
.sharebox{width:100%;min-height:70px;background:var(--board-deep);color:var(--chalk);border:1px solid var(--line);border-radius:6px;padding:8px;font:13px/1.4 var(--mono)}
.mapbox{border-top:2px dashed var(--line);padding-top:16px;display:grid;gap:12px}
.mapbox h3{margin:0;font:700 24px/1 var(--display)}
.mapbox p{margin:0;color:var(--chalk-dim);font-size:14px;max-width:70ch}
.mapscroll{overflow-x:auto}
.mapscroll svg{display:block;width:100%;min-width:820px;height:auto}
.donate{border-top:2px dashed var(--line);padding-top:16px;display:grid;gap:10px}
.donate h3{margin:0;font:700 24px/1 var(--display)}
.donate p{margin:0;color:var(--chalk-dim);max-width:60ch}
.donate-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donate-row img{width:140px;height:140px;border-radius:6px;background:#fff;padding:6px;display:block}
.qr-cap{font:12px/1.3 var(--mono);color:var(--chalk-faint);text-align:center;margin:6px 0 0}
.fanlinks{border-top:1px solid rgba(238,240,230,.1);padding-top:14px;display:grid;gap:10px}
.fanlinks h3{margin:0;font:700 20px/1 var(--display)}
.fanlinks ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fanlinks li{font-size:14px;line-height:1.45;color:var(--chalk-dim)}
.fanlinks a{color:var(--crystal);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.fanlinks a:hover{color:var(--chalk)}
footer{font-size:12.5px;color:var(--chalk-faint);border-top:1px solid rgba(238,240,230,.1);padding-top:12px}
/* scene + map */
.branch{fill:none;stroke-width:3;stroke-linecap:round}
.branch.aired{stroke:var(--chalk)}
.branch.active{stroke:var(--crystal);stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.breathe{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}}
.zz{animation:zz 2.6s ease-out infinite}
.zz.d2{animation-delay:1.3s}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-18px)}}
.siren{animation:siren .9s steps(1) infinite;opacity:.6}
@keyframes siren{0%,49%{fill:#E0474C}50%,100%{fill:#3D7BE0}}
.siren-edge{animation:sirenEdge .9s steps(1) infinite;opacity:.55}
@keyframes sirenEdge{0%,49%{stroke:#E0474C}50%,100%{stroke:#3D7BE0}}
.plane{animation:fly 9s linear infinite}
@keyframes fly{from{transform:translateX(-140px)}to{transform:translateX(600px)}}
.teddy{transform-box:fill-box;transform-origin:center;animation:fall 4s ease-in infinite}
@keyframes fall{0%{transform:translateY(-50px) rotate(0)}100%{transform:translateY(150px) rotate(200deg)}}
.drop{animation:drip 1.1s ease-in infinite}
.drop.d2{animation-delay:.4s}.drop.d3{animation-delay:.75s}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(24px);opacity:0}}
.shake{animation:shake .25s linear infinite}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1.5px,0)}75%{transform:translate(1.5px,0)}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
.bubble{transform-box:fill-box;transform-origin:center;animation:bubble 3.4s ease-in infinite;opacity:0}
.bubble.d1{animation-delay:.6s}.bubble.d2{animation-delay:1.3s}.bubble.d3{animation-delay:2s}
@keyframes bubble{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-70px);opacity:0}}
.pin{transform-box:fill-box;transform-origin:center;animation:pinpop .5s ease-out both}
.pin.d1{animation-delay:.15s}.pin.d2{animation-delay:.3s}.pin.d3{animation-delay:.45s}.pin.d4{animation-delay:.6s}
@keyframes pinpop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.confetti{transform-box:fill-box;transform-origin:center;animation:confetti 2.6s linear infinite}
.confetti.d1{animation-delay:.6s}.confetti.d2{animation-delay:1.2s}
@keyframes confetti{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(320px) rotate(360deg)}}
.alarm{animation:alarm .8s steps(1) infinite}
@keyframes alarm{0%,49%{opacity:.9}50%,100%{opacity:.1}}
.codefall{animation:codefall 5s linear infinite}
.codefall.d2{animation-duration:7s}
@keyframes codefall{from{transform:translateY(-60px);opacity:.2}50%{opacity:1}to{transform:translateY(90px);opacity:.2}}
.rainfall{animation:rainfall .7s linear infinite}
@keyframes rainfall{from{transform:translate(0,0)}to{transform:translate(-6px,22px)}}
.flashwin{animation:flashwin 1.6s ease-out infinite}
@keyframes flashwin{0%{opacity:.95}70%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.branch.active{stroke-dashoffset:0}}
.fanlinks h4{font:600 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:18px 0 6px}

/* static pages */
.crumbs{font:600 12px/1.4 var(--mono);color:var(--chalk-dim);display:flex;flex-wrap:wrap;gap:4px 8px;margin:0}
.crumbs a{color:var(--crystal);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-hidden]{color:var(--chalk-faint)}
.page{display:grid;gap:22px;max-width:760px}
.page h1{margin:6px 0 4px}
.page h2{font:700 28px/1.15 var(--display);margin:0}
.page p{margin:0;max-width:64ch}
.playbig{display:inline-block;justify-self:start;padding:18px 28px;border-radius:8px;background:var(--amber);color:var(--board-deep);font:700 24px/1 var(--display);text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.playbig:hover{background:var(--crystal)}
.playbig:focus-visible,.crumbs a:focus-visible,.chaplist a:focus-visible,.staticchoices a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.staticchoices{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.staticchoices li{border:2px solid rgba(238,240,230,.28);border-radius:6px;padding:12px 14px;display:grid;gap:2px;background:rgba(238,240,230,.03)}
.staticchoices b{font:700 21px/1.15 var(--display)}
.staticchoices span{font-size:14px;color:var(--chalk-dim)}
.chaplist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chaplist li{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.chaplist a{color:var(--chalk);text-decoration:underline;text-underline-offset:3px}
.chaplist code{font:600 12px var(--mono);color:var(--amber)}
.pillrow{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pillrow a{display:inline-block;padding:6px 12px;border-radius:999px;border:2px solid rgba(238,240,230,.28);font:600 12.5px/1.2 var(--mono);color:var(--chalk-dim);text-decoration:none}
.pillrow a:hover{border-color:var(--crystal);color:var(--chalk)}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.pager a{color:var(--crystal)}
.staticnav{border-top:2px dashed var(--line);padding-top:16px;display:grid;gap:12px}
.staticnav h3{margin:0;font:700 24px/1 var(--display)}