:root{--color-bg: #0f1620;--color-bg-panel: #18222e;--color-ink: #e8eef5;--color-muted: #8aa0b5;--color-accent: #ffb627;--color-accent-2: #38bdf8;--color-ok: #4ade80;--color-err: #f87171;--font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--radius: 14px;--gap: 1rem}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(circle at 50% 0%,#1b2838,var(--color-bg) 70%);color:var(--color-ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}#app{height:100%}#splash,#stage{display:none}#app[data-phase=loading] #splash,#app[data-phase=error] #splash{display:flex}#app[data-phase=ready] #stage{display:flex;flex-direction:column;height:100%}#splash{flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.6rem;text-align:center;padding:2rem}.splash__robot{font-size:5rem;line-height:1;animation:bob 2.2s ease-in-out infinite}.splash__title{margin:0;font-size:2.6rem;letter-spacing:.04em}.splash__tagline{margin:0;color:var(--color-muted)}.splash__spinner{margin-top:1.2rem;width:42px;height:42px;border:4px solid rgba(255,255,255,.12);border-top-color:var(--color-accent);border-radius:50%;animation:spin .9s linear infinite}.splash__status{margin:.4rem 0 0;color:var(--color-muted);font-family:var(--font-mono);font-size:.9rem}#app[data-phase=error] .splash__spinner{border-top-color:var(--color-err);animation-play-state:paused}#app[data-phase=error] .splash__status{color:var(--color-err)}.stage__header{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;background:var(--color-bg-panel);border-bottom:1px solid rgba(255,255,255,.06);flex:none}.stage-switcher{margin-left:auto;display:inline-flex;gap:.25rem;background:#00000040;padding:.25rem;border-radius:999px}.stage-switcher__btn{border:0;background:transparent;color:var(--color-muted);font:inherit;font-size:.85rem;padding:.3rem .85rem;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease}.stage-switcher__btn:hover{color:var(--color-ink)}.stage-switcher__btn[data-active=true]{background:var(--color-accent);color:#1a1205;font-weight:600}.layout{flex:1 1 auto;min-height:0;display:flex;padding:var(--gap);gap:0}.split{display:flex;flex:1 1 0;min-width:0;min-height:0}.split[data-orientation=horizontal]{flex-direction:column}.split[data-orientation=vertical]{flex-direction:row}.layout>.split,.layout>.pane{flex:1 1 auto}.split__resizer{flex:0 0 auto;position:relative;background:transparent;z-index:1}.split[data-orientation=vertical]>.split__resizer{width:10px;margin:0 -3px;cursor:col-resize}.split[data-orientation=horizontal]>.split__resizer{height:10px;margin:-3px 0;cursor:row-resize}.split__resizer:after{content:"";position:absolute;inset:0;margin:auto;background:#ffffff14;border-radius:999px;transition:background .15s ease}.split[data-orientation=vertical]>.split__resizer:after{width:2px;height:36px}.split[data-orientation=horizontal]>.split__resizer:after{height:2px;width:36px}.split__resizer:hover:after{background:var(--color-accent-2)}.pane{display:flex;flex-direction:column;min-width:0;min-height:0;margin:4px;background:var(--color-bg-panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden}.pane__label{flex:none;padding:.5rem .85rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-2);background:#38bdf814;border-bottom:1px solid rgba(255,255,255,.05)}.pane__body{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:1rem;color:var(--color-muted);font-family:var(--font-mono);font-size:.85rem}.pane__body:empty:after{content:"“" attr(data-slot) "” mounts here";opacity:.55}.pane__body:not(:empty){display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;place-items:stretch;text-align:left;overflow:auto;color:var(--color-ink)}@media (max-width: 720px){.layout{padding:.5rem;overflow-y:auto}.split{flex-direction:column!important}.split__resizer{display:none}.pane{flex:1 1 auto;min-height:160px}}.stage__logo{font-size:1.6rem}.stage__title{margin:0;font-size:1.3rem;letter-spacing:.03em}.proof{flex:none;margin:0 var(--gap) var(--gap);padding:.8rem 1.1rem;background:var(--color-bg-panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius)}.proof__heading{margin-top:0;color:var(--color-accent-2);cursor:pointer;font-size:.9rem}.proof__label code{font-family:var(--font-mono);background:#38bdf81f;padding:.1rem .4rem;border-radius:6px}.proof__output{font-family:var(--font-mono);font-size:1.1rem;color:var(--color-ok);background:#0b1117;border:1px solid rgba(74,222,128,.25);border-radius:10px;padding:.9rem 1.1rem;margin:.6rem 0 1rem}.proof__note{color:var(--color-muted);margin:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (prefers-reduced-motion: reduce){.splash__robot,.splash__spinner{animation:none}}.lessons{display:flex;flex-direction:column;gap:.75rem;height:100%;overflow-y:auto;padding:.25rem;color:var(--color-ink)}.lessons__title{margin:0;font-size:1.05rem;letter-spacing:.02em;color:var(--color-accent)}.lessons__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.lessons__chapter{display:grid;grid-template-columns:1.4rem 1fr auto;align-items:center;gap:.6rem;width:100%;padding:.7rem .9rem;text-align:left;font:inherit;color:var(--color-ink);background:var(--color-bg-panel);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);cursor:pointer;transition:border-color .15s ease,transform .1s ease}.lessons__chapter:hover{border-color:var(--color-accent-2);transform:translateY(-1px)}.lessons__chapter[data-complete=true]{border-color:#4ade8080}.lessons__marker{font-family:var(--font-mono);font-size:1.2rem;text-align:center;color:var(--color-muted)}.lessons__chapter[data-complete=true] .lessons__marker{color:var(--color-ok)}.lessons__chapter-title{font-weight:600}.lessons__count{font-family:var(--font-mono);font-size:.8rem;color:var(--color-muted)}.lessons__step-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}.lessons__back{font:inherit;color:var(--color-accent-2);background:transparent;border:1px solid rgba(56,189,248,.3);border-radius:8px;padding:.25rem .6rem;cursor:pointer}.lessons__progress{margin:0;font-family:var(--font-mono);font-size:.8rem;color:var(--color-muted)}.lessons__story{margin:0;font-style:italic;color:var(--color-muted)}.lessons__goal{margin:0;color:var(--color-accent)}.lessons__explanation{margin:0;line-height:1.5}.lessons__tryit{background:#0b1117;border:1px solid rgba(255,182,39,.3);border-radius:10px;padding:.7rem .9rem}.lessons__tryit-label{margin:0 0 .3rem;font-size:.85rem;color:var(--color-accent)}.lessons__tryit-prompt{margin:0;font-family:var(--font-mono);font-size:.95rem}.lessons__done-flag{margin:0;color:var(--color-ok);font-weight:600}.lessons__nav{display:flex;gap:.5rem;margin-top:auto;padding-top:.5rem}.lessons__nav-btn{flex:1;font:inherit;color:var(--color-ink);background:var(--color-bg-panel);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.5rem .7rem;cursor:pointer;transition:border-color .15s ease}.lessons__nav-btn:hover:not([disabled]){border-color:var(--color-accent-2)}.lessons__nav-btn[disabled]{opacity:.4;cursor:not-allowed}.lessons__nav-btn--done{color:#0b1117;background:var(--color-accent);border-color:var(--color-accent);font-weight:600}.lessons__payoff{margin:0;color:var(--color-ok);font-weight:600}.repl{display:flex;flex-direction:column;height:100%;min-height:0;gap:.5rem;font-family:var(--font-mono);font-size:1.05rem;line-height:1.5}.repl__log{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:.25rem .1rem}.repl__entry{display:flex;flex-direction:column;gap:.15rem}.repl__echo-line{display:flex;gap:.5rem;align-items:baseline}.repl__prompt{color:var(--color-accent);font-weight:700;user-select:none;flex:none}.repl__echo-text{color:var(--color-ink);white-space:pre-wrap;word-break:break-word}.repl__out,.repl__result{margin:0;padding:0 0 0 1.9rem;white-space:pre-wrap;word-break:break-word;font-family:inherit}.repl__out[data-stream=stderr]{color:var(--color-err)}.repl__result{color:var(--color-accent-2)}.repl__error{margin:.1rem 0 0 1.9rem;padding:.7rem .9rem;background:#f8717114;border:1px solid rgba(248,113,113,.35);border-left:4px solid var(--color-err);border-radius:10px}.repl__error-title{margin:0 0 .25rem;font-weight:700;font-family:var(--font-ui);color:var(--color-err)}.repl__error-detail{margin:0;font-family:var(--font-ui);color:var(--color-ink)}.repl__error-raw{margin-top:.5rem}.repl__error-summary{cursor:pointer;color:var(--color-muted);font-family:var(--font-ui);font-size:.85rem}.repl__error-trace{margin:.4rem 0 0;padding:.5rem;background:#0000004d;border-radius:8px;color:var(--color-muted);font-size:.85rem;white-space:pre-wrap;word-break:break-word;overflow-x:auto}.repl__lesson-pass{margin:.2rem 0 0 1.9rem;color:var(--color-ok);font-weight:700;font-family:var(--font-ui)}.repl__inputrow{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .6rem;background:var(--color-bg-panel);border:1px solid rgba(255,255,255,.1);border-radius:10px}.repl__prompt--live{padding-top:.15rem}.repl__input{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--color-ink);font-family:inherit;font-size:inherit;line-height:1.5;min-height:1.5em;field-sizing:content}.repl__input::placeholder{color:var(--color-muted)}.repl__hint{margin:0;color:var(--color-muted);font-family:var(--font-ui);font-size:.8rem;text-align:center}