:root{--primary:#0178d4;--secondary:#004578;--accent:#ffa62b;--warning:#ffa62b;--error:#ba3c5b;--success:#4ebf71;--foreground:#e0e0e0;--background:#121212;--surface:#1e1e1e;--panel:#262626;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--mono);background:var(--background);color:var(--foreground);grid-template-rows:auto auto minmax(0, 1fr) 6px var(--bottom-h,32vh) auto;height:100vh;font-size:14px;display:grid}#header{background:var(--surface);align-items:baseline;gap:1.5rem;padding:.4rem 1rem;display:flex}.brand{color:var(--primary);font-weight:700}.dim{opacity:.6}#status{margin-left:auto}#toolbar{background:var(--panel);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.4rem 1rem;display:flex}#toolbar select{flex:12rem;min-width:10rem}button,select,input{font:inherit;color:var(--foreground);background:var(--surface);border:1px solid color-mix(in srgb, var(--primary) 60%, transparent);cursor:pointer;border-radius:4px;padding:.3rem .7rem}button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}button.danger{border-color:var(--error);color:var(--error)}button:disabled{opacity:.5;cursor:default}#body{grid-template-columns:minmax(12rem, var(--lesson-w,50%)) 6px minmax(12rem, 1fr);gap:0 .25rem;min-height:0;padding:.5rem 1rem 0;display:grid}#bottom{grid-template-columns:minmax(0,1fr) 20rem;gap:.5rem;min-height:0;padding:0 1rem .5rem;display:grid}.pane{border:1px solid color-mix(in srgb, var(--primary) 55%, transparent);background:var(--surface);border-radius:6px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.pane-title{color:var(--foreground);background:color-mix(in srgb, var(--primary) 18%, var(--surface));border-bottom:1px solid color-mix(in srgb, var(--primary) 35%, transparent);flex:none;padding:.25rem .8rem;font-size:12px}#lesson-md{min-height:0;padding:.4rem 1rem .8rem;overflow:auto}#results{min-height:0;padding:.6rem 1rem;overflow:auto}#lesson-md{font-family:system-ui,sans-serif;line-height:1.5}#lesson-md h1{color:var(--primary);font-size:1.25rem}#lesson-md h2{color:var(--success);margin-top:1.4em;font-size:1.05rem}#lesson-md code{font-family:var(--mono);background:var(--panel);border-radius:3px;padding:0 .25em}#lesson-md pre{background:var(--panel);border-radius:4px;padding:.6rem;overflow:auto}#lesson-md pre code{background:0 0;padding:0}#lesson-md table{border-collapse:collapse}#lesson-md th,#lesson-md td{border:1px solid color-mix(in srgb, var(--foreground) 25%, transparent);padding:.2rem .5rem}#editor{height:100%;min-height:0}#editor .cm-editor{height:100%}#results ul{margin:.3rem 0;padding:0;list-style:none}#results li{margin:.15rem 0}#results li.passed{color:var(--foreground)}#results li.failed,#results li.error{color:#ff7b7b}#results li.skipped{color:var(--warning)}#results pre{color:color-mix(in srgb, var(--foreground) 70%, transparent);white-space:pre-wrap;margin:.2rem 0 .5rem 1.5rem;font-size:12px}#results .summary{font-weight:700}#results .summary.passed{color:var(--success)}#results .summary.failed,#results .summary.error,#results .summary.timeout{color:#ff7b7b}#results .running{color:var(--warning);font-weight:700}#mascot{border:1px solid color-mix(in srgb, var(--primary) 55%, transparent);background:var(--surface);cursor:pointer;border-radius:6px;grid-template-rows:auto 1fr;gap:.4rem;padding:.6rem .8rem;display:grid;position:relative;overflow:hidden}#mascot .bubble{min-height:3.2em;font-size:13px;font-style:italic}#mascot .emote{font-weight:700;position:absolute;bottom:4.6rem;right:.8rem}#mascot .art{image-rendering:pixelated;place-self:end center;max-width:100%}#footer{opacity:.7;background:var(--surface);padding:.3rem 1rem;font-size:12px}#footer a{color:var(--primary)}#toasts{z-index:50;gap:.4rem;display:grid;position:fixed;top:3rem;right:1rem}.toast{background:var(--panel);border-left:3px solid var(--accent);border-radius:4px;max-width:24rem;padding:.5rem .8rem;box-shadow:0 4px 16px #00000080}#loading{z-index:60;background:#000000b3;place-items:center;display:grid;position:fixed;inset:0}#loading[hidden]{display:none}#loading-box{background:var(--surface);text-align:center;border-radius:8px;max-width:28rem;padding:1.5rem 2rem}.spinner{border:3px solid var(--panel);border-top-color:var(--primary);border-radius:50%;width:2rem;height:2rem;margin:0 auto .8rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}dialog{background:var(--surface);color:var(--foreground);border:2px solid var(--primary);border-radius:8px;width:min(90vw,28rem);padding:1.2rem 1.6rem}dialog::backdrop{background:#0009}dialog label{justify-content:space-between;align-items:center;gap:1rem;margin:.6rem 0;display:flex}dialog .buttons{justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.splitter{background:0 0;position:relative}.splitter:after{content:"";background:color-mix(in srgb, var(--primary) 35%, transparent);border-radius:3px;margin:auto;position:absolute;inset:0}.splitter.vertical{cursor:col-resize}.splitter.vertical:after{width:2px}.splitter.horizontal{cursor:row-resize;margin:0 1rem}.splitter.horizontal:after{height:2px}.splitter:hover:after,.splitter.dragging:after{background:var(--primary)}body.dragging{-webkit-user-select:none;user-select:none;cursor:inherit}@media (max-width:900px){.splitter{display:none}body{grid-template-rows:auto auto auto auto auto;height:auto;min-height:100vh}#body{grid-template-columns:1fr}#lesson-pane{max-height:50vh}#editor-pane{height:50vh}#bottom{grid-template-columns:1fr}#mascot{min-height:12rem}}#lesson-md .hint{border-radius:6px;margin:.4rem -.6rem;padding:.2rem .6rem;transition:background .6s}#lesson-md .hint.flash{background:color-mix(in srgb, var(--accent) 22%, transparent)}.tour{z-index:70;outline:none;position:fixed;inset:0}.tour-spot{border:2px solid var(--accent);pointer-events:none;border-radius:8px;transition:all .25s;position:fixed;box-shadow:0 0 0 9999px #0000009e}.tour-card{background:var(--surface);width:min(92vw,24rem);color:var(--foreground);border:1px solid var(--accent);border-radius:8px;padding:.9rem 1.1rem;position:fixed;box-shadow:0 10px 30px #0009}.tour-card h3{color:var(--accent);margin:0 0 .4rem;font-size:1rem}.tour-card p{margin:0 0 .8rem;font-family:system-ui,sans-serif;line-height:1.45}.tour-nav{align-items:center;gap:.4rem;display:flex}.tour-nav .dim{margin-right:auto}.intro{z-index:80;cursor:pointer;background:#0b0f14;place-items:end center;transition:background .3s;display:grid;position:fixed;inset:0;overflow:hidden}.intro.shedding{background:0 0}.intro-canvas{position:absolute;inset:0}.intro-content{text-align:center;max-width:44rem;padding:0 2rem 9vh;transition:opacity .5s;position:relative}.intro.plain{place-items:center}.intro.plain .intro-content{padding-bottom:0}.intro.shedding .intro-content{opacity:0}.intro-title{letter-spacing:.12em;color:var(--primary);opacity:0;text-shadow:0 2px 12px #000000e6;margin:0 0 1.2rem;font-size:clamp(2.6rem,9vw,5.5rem);transition:opacity 1s,transform 1s;transform:translateY(.4em)}.intro.engine .intro-title{margin:0;font-size:clamp(1.8rem,5vw,3rem);position:fixed;top:7vh;left:0;right:0}.intro.show-title .intro-title{opacity:1;transform:none}.intro-line{opacity:0;color:#e8eef5;text-shadow:0 1px 8px #000000e6,0 0 24px #000c;margin:.3rem 0;font-family:system-ui,sans-serif;font-size:clamp(1rem,2.4vw,1.3rem);transition:opacity .8s}.intro.show-lines .intro-line{opacity:1}.intro.show-lines .intro-line:nth-of-type(2){transition-delay:.5s}.intro-skip{opacity:0;text-shadow:0 1px 6px #000000e6;cursor:pointer;margin-top:1.6rem;padding:.4rem 1rem;font-size:12px;transition:opacity .8s 1s}.intro.show-lines .intro-skip{opacity:.5}@media (prefers-reduced-motion:reduce){.intro{transition:opacity .4s}.intro.shedding{opacity:0;background:#0b0f14}.intro-title,.intro-line{transition-duration:.3s;transform:none}}