:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#e6dcc5;--card:#fffcf4;--panel:#dccfb2;--ink:#1f3433;--muted:#535f5b;--line:#ddd3bc;--line-strong:#bfb08c;--brand:#2f7f77;--brand-soft:#dcece6;--brand-ink:#1f5a54;--brand-shadow:#1f5a54;--on-brand:#fffcf4;--good:#2f8a55;--good-bg:#e2f2e6;--good-ink:#23683f;--good-shadow:#20623b;--bad:#d0683f;--bad-bg:#f9e6da;--bad-ink:#8f3f1f;--amber:#f2a03d;--why-bg:#fcefd8;--why-line:#efcf98;--why-ink:#8a5a10;--btn-off:#ddd4c0;--btn-off-shadow:#c6bba2;--code-bg:#1b2a29;--code-ink:#c9f7dd;--phosphor:#7ef0b2;--grain-opacity:.05;--boop-ink:#173b39;--boop-shell:#3f8f86;--boop-cream:#efe6cf;--boop-screen:#1b2a29;--boop-face:#7ef0b2;--boop-amber:#f2a03d;--boop-vent:#d3c6a4;--radius:10px;--font-display:"Press Start 2P", "IBM Plex Mono", monospace;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--font-body:"IBM Plex Sans", system-ui, sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a100f;--card:#182322;--panel:#121b1a;--ink:#ece6d6;--muted:#9fb0aa;--line:#2b3b39;--line-strong:#2c3d3a;--brand:#5fb8ad;--brand-soft:#1d3633;--brand-ink:#a9e3da;--brand-shadow:#3b8178;--on-brand:#0f1918;--good:#66d491;--good-bg:#163024;--good-ink:#a6f0c3;--good-shadow:#3a9a62;--bad:#ec8a62;--bad-bg:#33201a;--bad-ink:#f6bfa6;--amber:#f5b45a;--why-bg:#2b2416;--why-line:#4f4020;--why-ink:#f6cd84;--btn-off:#263432;--btn-off-shadow:#172120;--code-bg:#0c1413;--grain-opacity:.03;--boop-ink:#0a1e1d;--boop-cream:#e6dcc2}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a100f;--card:#182322;--panel:#121b1a;--ink:#ece6d6;--muted:#9fb0aa;--line:#2b3b39;--line-strong:#2c3d3a;--brand:#5fb8ad;--brand-soft:#1d3633;--brand-ink:#a9e3da;--brand-shadow:#3b8178;--on-brand:#0f1918;--good:#66d491;--good-bg:#163024;--good-ink:#a6f0c3;--good-shadow:#3a9a62;--bad:#ec8a62;--bad-bg:#33201a;--bad-ink:#f6bfa6;--amber:#f5b45a;--why-bg:#2b2416;--why-line:#4f4020;--why-ink:#f6cd84;--btn-off:#263432;--btn-off-shadow:#172120;--code-bg:#0c1413;--grain-opacity:.03;--boop-ink:#0a1e1d;--boop-cream:#e6dcc2}*{box-sizing:border-box}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);margin:0;font-size:16px;line-height:1.5;transition:background .2s,color .2s}body:before{content:"";pointer-events:none;z-index:100;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}button{font:inherit;cursor:pointer}h2,h3,h4{font-family:var(--font-mono);letter-spacing:-.01em;font-weight:600}.topbar{background:var(--panel);border-bottom:2px solid var(--line-strong);z-index:5;justify-content:space-between;align-items:center;padding:10px 24px;display:flex;position:sticky;top:0}.brand{font-family:var(--font-display);color:var(--ink);letter-spacing:.02em;align-items:center;gap:10px;font-size:1rem;display:flex}.brand .boop{margin-top:-2px}.stats{align-items:center;gap:8px;display:flex}.pill,.pill-btn,.theme-btn{font-family:var(--font-mono);border:2px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:8px;padding:5px 12px;font-size:.85rem;font-weight:600}.pill-btn:hover,.theme-btn:hover{border-color:var(--brand)}#xp{color:var(--why-ink);background:var(--why-bg);border-color:var(--why-line);font-variant-numeric:tabular-nums}.pill-btn.upgrade,.pill.premium{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}.pill.demo{background:var(--why-bg);color:var(--why-ink);border-color:var(--why-line);letter-spacing:.1em;font-size:.7rem}.layout{grid-template-columns:280px 1fr;min-height:calc(100vh - 62px);display:grid}.map{background:var(--panel);border-right:2px solid var(--line-strong);padding:20px 14px;overflow-y:auto}.unit{margin-bottom:22px}.unit-title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);align-items:center;gap:8px;margin-bottom:8px;font-size:.75rem;font-weight:600;display:flex}.unit-dot{width:10px;height:10px}.lesson-btn{text-align:left;width:100%;color:var(--ink);background:0 0;border:2px solid #0000;border-radius:8px;align-items:flex-start;gap:10px;margin-bottom:4px;padding:9px 10px;display:flex}.lesson-btn:hover:not(:disabled){background:var(--card)}.lesson-btn.active{border-color:var(--brand);background:var(--card);box-shadow:0 3px 0 var(--line-strong)}.lesson-btn:disabled{opacity:.5;cursor:default}.lesson-icon{font-family:var(--font-mono);text-align:center;width:1.1em;font-weight:600;line-height:1.4}.lesson-icon.play{color:var(--brand)}.lesson-icon.done{color:var(--good)}.lesson-icon.premium{color:var(--amber)}.lesson-icon.soon{color:var(--muted)}.lesson-name{font-weight:600}.lesson-goal{color:var(--muted);font-size:.82rem;line-height:1.35}.stage{width:100%;min-width:0;max-width:920px;padding:28px clamp(16px,4vw,48px)}.progress{gap:4px;margin-bottom:20px;display:flex}.progress span{background:color-mix(in srgb, var(--line-strong) 60%, transparent);border-radius:2px;flex:1;height:12px}.progress span.done{background:var(--good)}.progress span.current{background:var(--brand)}.problem{background:var(--card);border:2px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 4px 0 var(--line-strong);margin-bottom:20px;overflow:hidden}.problem summary{background:var(--panel);border-bottom:2px solid var(--line-strong);font-family:var(--font-mono);color:var(--muted);cursor:pointer;align-items:center;gap:6px;padding:6px 12px;font-size:.75rem;list-style:none;display:flex}.problem summary::-webkit-details-marker{display:none}.problem:not([open]) summary{border-bottom:0}.problem summary:focus-visible{outline-offset:-3px}.problem summary:before{content:"● ● ●";content:"● ● ●" / "";letter-spacing:.1em;color:var(--line-strong);flex:none;margin-right:6px}.problem summary:after{content:"▾";content:"▾" / "";color:var(--muted);flex:none;margin-left:auto;padding-left:8px}.problem:not([open]) summary:after{content:"▸";content:"▸" / ""}.problem p{margin:0;padding:14px 18px;font-size:1.05rem}.card{background:var(--card);border-radius:var(--radius);border:2px solid var(--line-strong);box-shadow:0 4px 0 var(--line-strong);padding:24px}.step-kind{font-family:var(--font-mono);color:var(--brand);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:600}.card h2{margin:4px 0 6px;font-size:1.55rem;line-height:1.25}.instructions{color:var(--muted);margin:0 0 18px;font-size:1.05rem}.choices{gap:10px;display:grid}.choices.cols-3{grid-template-columns:repeat(3,1fr)}.choice{text-align:left;background:var(--card);border:2px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong);color:var(--ink);border-radius:8px;padding:13px 16px;font-size:1rem;transition:transform 80ms steps(2,end),border-color .1s,opacity .25s}.choice:hover:not(:disabled){border-color:var(--brand);box-shadow:0 5px 0 var(--line-strong);transform:translateY(-2px)}.choice:active:not(:disabled){box-shadow:0 1px 0 var(--line-strong);transform:translateY(2px)}.choice.selected{border-color:var(--brand);background:var(--brand-soft)}.choice.right{border-color:var(--good);background:var(--good-bg);box-shadow:0 3px 0 var(--good)}.choice.wrong{border-color:var(--bad);background:var(--bad-bg);box-shadow:0 3px 0 var(--bad)}.choice:disabled{cursor:default}.choice.dimmed{opacity:.3;box-shadow:none;transform:scale(.98)}.choice.settled{opacity:.45}.choice .label{font-family:var(--font-mono);color:var(--brand);margin-right:10px;font-weight:600}.prompt-text{font-family:var(--font-mono);font-size:.9rem}.tool{text-align:center}.tool .big{font-size:2rem;display:block}.tool strong{margin:4px 0;display:block}.tool small{color:var(--muted)}.boop{flex-shrink:0;display:block;overflow:visible}.boop .b-ink{fill:var(--boop-ink)}.boop .b-shell{fill:var(--boop-shell)}.boop .b-cream{fill:var(--boop-cream)}.boop .b-screen{fill:var(--boop-screen)}.boop .b-face{fill:var(--boop-face);filter:drop-shadow(0 0 .6px var(--boop-face))}.boop .b-amber{fill:var(--boop-amber)}.boop .b-vent{fill:var(--boop-vent)}.boop g{transform-box:fill-box}.boop-eyes{transform-origin:50%;animation:5s step-end infinite boop-blink}.boop-antenna{transform-origin:50% 100%;animation:6s steps(3,end) infinite boop-wiggle}.mood-happy .boop-bounce,.mood-excited .boop-bounce{animation:.5s steps(3,end) boop-hop}.mood-thinking .boop-head{transform-origin:50% 100%;animation:.6s steps(3,end) forwards boop-tilt}.mood-thinking .boop-bulb{animation:1.2s steps(2,end) infinite boop-glow}.mood-celebrating .boop-bounce{animation:.6s steps(3,end) 3 boop-hop}.mood-celebrating .boop-confetti{animation:.8s steps(2,end) infinite boop-twinkle}.mood-listening .boop-z{animation:2.4s steps(4,end) infinite boop-float}.mood-listening .boop-eyes,.mood-happy .boop-eyes,.mood-celebrating .boop-eyes,.mood-excited .boop-eyes{animation:none}@keyframes boop-blink{0%,94%,to{transform:scaleY(1)}96%{transform:scaleY(.15)}}@keyframes boop-wiggle{0%,88%,to{transform:rotate(0)}92%{transform:rotate(-12deg)}96%{transform:rotate(12deg)}}@keyframes boop-hop{50%{transform:translateY(-2px)}}@keyframes boop-tilt{to{transform:rotate(-6deg)}}@keyframes boop-glow{50%{opacity:.35}}@keyframes boop-twinkle{50%{opacity:.2}}@keyframes boop-float{0%{opacity:.3;transform:translateY(1px)}50%{opacity:1}to{opacity:.3;transform:translateY(-1px)}}.boop-says{align-items:flex-end;gap:12px;margin-top:16px;display:flex}.boop-says .bubble{background:var(--card);border:2px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong);border-radius:12px;flex:1;padding:12px 16px;position:relative}.boop-says .bubble:before{content:"";background:inherit;border-bottom:2px solid;border-left:2px solid;border-color:inherit;width:12px;height:12px;position:absolute;bottom:14px;left:-9px;transform:rotate(45deg)}.boop-says.mood-happy .bubble,.boop-says.mood-excited .bubble{background:var(--good-bg);border-color:var(--good);color:var(--good-ink)}.boop-says.mood-thinking .bubble{background:var(--why-bg);border-color:var(--why-line)}.boop-says.mood-helpful .bubble,.boop-says.mood-idle .bubble{background:var(--brand-soft);border-color:var(--brand)}.quip{font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted);margin:0 0 2px;font-size:.78rem;font-weight:600;display:block}.boop-says .quip{color:inherit;opacity:.8}.boop-says.earlier .boop{opacity:.35;filter:grayscale()}.boop-says.earlier .boop,.boop-says.earlier .boop *{animation:none}.boop-says.earlier .bubble{background:var(--card);border-color:var(--line);box-shadow:0 3px 0 var(--line);color:var(--muted)}.boop-says.earlier .quip{opacity:1}.boop-says+.choices{margin-top:10px}.hero-boop{justify-content:center;margin-bottom:8px;display:flex}.picker-head{align-items:center;gap:16px;display:flex}.picker-head h2{margin:0}.actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.btn{font-family:var(--font-mono);letter-spacing:.01em;background:var(--brand);color:var(--on-brand);box-shadow:0 4px 0 var(--brand-shadow);border:none;border-radius:8px;padding:11px 22px;font-size:1rem;font-weight:600}.btn:active{box-shadow:0 1px 0 var(--brand-shadow);transform:translateY(3px)}.btn:disabled{background:var(--btn-off);color:var(--muted);box-shadow:0 4px 0 var(--btn-off-shadow);cursor:default;transform:none}.btn.good{background:var(--good);color:var(--on-brand);box-shadow:0 4px 0 var(--good-shadow)}.btn.good:active{box-shadow:0 1px 0 var(--good-shadow)}.btn.ghost{color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);background:0 0}.code{background:var(--code-bg);color:var(--code-ink);border-radius:var(--radius);border:2px solid var(--boop-ink);box-shadow:0 4px 0 var(--line-strong), inset 0 0 32px #00000073;font-family:var(--font-mono);text-shadow:0 0 6px #7ef0b240;margin:0 0 14px;padding:0 0 12px;font-size:.95rem;position:relative;overflow-x:auto}.code:after{content:"";pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,#0000002e 0 1px,#0000 1px 3px);position:absolute;inset:0}.code-bar{border-bottom:1px solid #ffffff14;gap:6px;margin-bottom:8px;padding:8px 12px;display:flex}.code-bar i{background:#ffffff2e;width:8px;height:8px}.code-bar i:first-child{background:var(--boop-amber)}.code-line{white-space:pre;border-left:4px solid #0000;padding:2px 16px;display:flex}.code-line .ln{color:#557570;-webkit-user-select:none;user-select:none;flex-shrink:0;width:2.2em}.code.clickable .code-line{cursor:pointer}.code.clickable .code-line:hover{background:#7ef0b212}.code-line.note{border-left-color:var(--boop-amber)}.code-line.note.seen{border-left-color:var(--phosphor)}.code-line.active{background:#7ef0b221}.code-line.bug{background:#ec8a6233;border-left-color:#ec8a62}.code-line.fixed{border-left-color:var(--phosphor);background:#7ef0b229}.code-line.miss{background:#ffffff0d}.tok-kw{color:#7fd3c9}.tok-str{color:#f2c66d}.tok-num{color:#f4a261}.tok-com{color:#6f8f88;font-style:italic}.tok-fn{color:#a8f0c6}.typing{font-family:var(--font-mono);font-weight:600}.typing:after{content:"▍";animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.compare{grid-template-columns:1fr 1fr;gap:14px;display:grid}.compare>div{min-width:0}.compare h4{margin:0 0 6px}.done-card{text-align:center;padding:36px 24px}.done-card .quip{margin-bottom:0}.done-card h2{margin-top:0}.recap{text-align:left;max-width:460px;margin:16px auto;padding:0;list-style:none}.recap li{margin:8px 0;padding-left:1.5em;position:relative}.recap li:before{content:"►";color:var(--brand);font-family:var(--font-mono);position:absolute;left:0}.profiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:16px 0 24px;display:grid}.profile{background:var(--card);color:var(--ink);border:2px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong);border-radius:var(--radius);flex-direction:column;align-items:center;gap:4px;padding:16px 8px;display:flex}.profile:hover,.profile.selected{border-color:var(--brand)}.profile .big{font-size:2.6rem}.profile small{color:var(--muted);font-family:var(--font-mono)}.add-profile{border-top:2px dashed var(--line-strong);padding-top:8px}.avatars{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.avatar{background:var(--bg);border:2px solid var(--line);border-radius:8px;width:52px;height:52px;font-size:1.6rem}.avatar.selected{border-color:var(--brand);background:var(--brand-soft)}.row{gap:10px;display:flex}.row input{min-width:0;font:inherit;border:2px solid var(--line-strong);background:var(--bg);color:var(--ink);border-radius:8px;flex:1;padding:10px 14px;font-size:1rem}.row input:focus{border-color:var(--brand);outline:none}.hint{color:var(--muted);margin-top:8px;display:block}.account-footer{color:var(--muted);margin-top:24px;font-size:.9rem}.link{color:var(--brand);background:0 0;border:none;padding:0;font-weight:600;text-decoration:underline}.parent-gate{text-align:left;grid-template-columns:minmax(0,1fr);gap:10px;max-width:460px;margin:0 auto;display:grid}.parent-gate .row input{flex:0 0 5.5em}.feedback{border:2px solid;border-radius:8px;padding:10px 14px;font-weight:600}.feedback.bad{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad)}.feedback.info{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}.toast{z-index:10;background:var(--code-bg);color:var(--phosphor);border:2px solid var(--boop-ink);font-family:var(--font-mono);box-shadow:0 4px 0 var(--line-strong);border-radius:10px;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 18px 10px 12px;font-weight:600;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}:focus-visible{outline:3px solid var(--amber);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.menu-btn,.scrim,.drawer-head{display:none}@media (width<=760px){.topbar{gap:10px;padding:8px 12px}.menu-btn{width:44px;height:44px;color:var(--ink);background:var(--card);border:2px solid var(--line-strong);box-shadow:0 3px 0 var(--line-strong);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.2rem;display:inline-flex}.menu-btn:active{box-shadow:0 1px 0 var(--line-strong);transform:translateY(2px)}.brand{flex:1;gap:8px;min-width:0;font-size:.72rem}.wordmark-tail{display:none}#xp{padding:5px 9px}.xp-label{display:none}.wordmark{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout{grid-template-columns:1fr}.map{z-index:20;border-right:2px solid var(--line-strong);width:min(320px,86vw);box-shadow:4px 0 0 var(--line-strong);padding:12px 14px 32px;transition:transform .2s steps(5,end);position:fixed;inset:0 auto 0 0;overflow-y:auto;transform:translate(-110%)}body.menu-open .map{transform:none}body.menu-open{overflow:hidden}.scrim{z-index:15;opacity:0;pointer-events:none;background:#0a100f73;transition:opacity .2s;display:block;position:fixed;inset:0}body.menu-open .scrim{opacity:1;pointer-events:auto}.drawer-head{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.8rem;font-weight:600;display:flex}#drawer-controls #controls{border-bottom:2px dashed var(--line-strong);flex-wrap:wrap;gap:8px;margin-bottom:20px;padding-bottom:16px}#drawer-controls #account{flex-wrap:wrap}.stage{padding:16px 14px 32px}.card{padding:18px 16px}.card h2{font-size:1.3rem}.done-card{padding:28px 16px}.choices.cols-3,.compare{grid-template-columns:1fr}.boop-says{gap:8px}.boop-says .boop{width:44px;height:auto}.picker-head .boop{width:48px;height:auto}.actions .btn{flex:1}.code{font-size:.85rem}}
