:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root,.lab{--font-sans:"Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;--font-mono:"Cascadia Code", "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;--bg:var(--lightningcss-light,#f5f3ee)var(--lightningcss-dark,#12141b);--surface:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1a1d26);--surface-2:var(--lightningcss-light,#ece9e1)var(--lightningcss-dark,#232733);--border:var(--lightningcss-light,#dcd7cb)var(--lightningcss-dark,#2e3342);--text:var(--lightningcss-light,#1d1b16)var(--lightningcss-dark,#e8e9ee);--muted:var(--lightningcss-light,#6b665a)var(--lightningcss-dark,#9095a6);--accent:var(--lightningcss-light,#3b4fd8)var(--lightningcss-dark,#8c9bff);--accent-fg:var(--lightningcss-light,#fff)var(--lightningcss-dark,#10132a);--accent-soft:var(--lightningcss-light,#e4e7fb)var(--lightningcss-dark,#252a4a);--xp:var(--lightningcss-light,#b45309)var(--lightningcss-dark,#f5b454);--xp-soft:var(--lightningcss-light,#fdf0dc)var(--lightningcss-dark,#3a2c14);--pass:var(--lightningcss-light,#15803d)var(--lightningcss-dark,#4ade80);--pass-soft:var(--lightningcss-light,#e3f4e8)var(--lightningcss-dark,#16301f);--fail:var(--lightningcss-light,#b42318)var(--lightningcss-dark,#f87171);--fail-soft:var(--lightningcss-light,#fdecea)var(--lightningcss-dark,#3a1a1a);--code-bg:var(--lightningcss-light,#fbfaf7)var(--lightningcss-dark,#0e1016);--code-fg:var(--lightningcss-light,#1d1b16)var(--lightningcss-dark,#e3e5ec);--code-muted:var(--lightningcss-light,#a39e90)var(--lightningcss-dark,#565c6e);--code-line:var(--lightningcss-light,#f1eee6)var(--lightningcss-dark,#161922);--code-selection:var(--lightningcss-light,#d6dbf8)var(--lightningcss-dark,#2c3460);--syn-keyword:var(--lightningcss-light,#3b4fd8)var(--lightningcss-dark,#8c9bff);--syn-string:var(--lightningcss-light,#0f7a5c)var(--lightningcss-dark,#6ee7b7);--syn-number:var(--lightningcss-light,#b45309)var(--lightningcss-dark,#f5b454);--syn-comment:var(--lightningcss-light,#8a8577)var(--lightningcss-dark,#6b7186);--syn-function:var(--lightningcss-light,#9333ea)var(--lightningcss-dark,#d8b4fe);--syn-punct:var(--lightningcss-light,#57534a)var(--lightningcss-dark,#a3a8b8);--radius:10px;--shadow:0 1px 2px #1d1b160f, 0 4px 16px #1d1b160d}@media (prefers-color-scheme:dark){:root{--shadow:0 1px 2px #0006}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);font:16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;margin:0}h1,h2{letter-spacing:-.01em;margin:0 0 .5em;line-height:1.2}h1{font-size:1.6rem}h2{font-size:1.05rem}p{margin:0 0 .75em}code,kbd,pre{font-family:var(--font-mono);font-size:.9em}code{background:var(--surface-2);border-radius:4px;padding:.1em .35em}kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 .3em;font-size:.75em}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--muted)}.page{max-width:1080px;margin:0 auto;padding:32px 16px}.btn{min-height:40px;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,transform 50ms;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{background:var(--accent);color:var(--accent-fg)}.btn.primary:hover:not(:disabled){filter:brightness(1.08)}.btn.secondary{background:var(--surface);border-color:var(--border);color:var(--text)}.btn.secondary:hover:not(:disabled){border-color:var(--accent)}.btn.ghost{color:var(--accent);border-color:var(--border);background:0 0}.btn.ghost:hover:not(:disabled){background:var(--accent-soft)}.btn.small{min-height:32px;padding:0 12px;font-size:.85rem}.btn.icon{width:40px;padding:0;font-size:1.2rem}.link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:none;padding:0}.brand{letter-spacing:-.02em;margin:0;font-size:1.2rem;font-weight:800;text-decoration:none}.brand span{color:var(--accent)}.topbar{z-index:10;background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;height:56px;padding:0 16px;display:flex;position:sticky;top:0}.topbar-right{align-items:center;gap:12px;display:flex}.xp-badge,.xp{color:var(--xp);font-variant-numeric:tabular-nums;font-weight:700}.xp-badge{background:var(--xp-soft);border-radius:999px;padding:4px 10px;font-size:.9rem}.user{color:var(--muted);font-size:.9rem}.auth{place-items:center;min-height:100vh;padding:16px;display:grid}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:min(400px,100%);box-shadow:var(--shadow);padding:32px}.auth-card .brand{margin-bottom:20px}.auth-card form{gap:14px;margin-bottom:16px;display:grid}label{gap:4px;font-size:.9rem;font-weight:600;display:grid}input{font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:9px 12px;font-weight:400}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.form-error{color:var(--fail);font-weight:600}.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0 0;padding:0;list-style:none;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);height:100%;box-shadow:var(--shadow);flex-direction:column;padding:20px;text-decoration:none;transition:border-color .15s,transform .15s;display:flex}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card h2{flex:1;margin:10px 0 16px}.tag{font:700 .7rem/1 var(--font-mono);letter-spacing:.06em;background:var(--accent-soft);color:var(--accent);border-radius:4px;align-self:flex-start;padding:4px 8px}.progress{background:var(--surface-2);border-radius:999px;height:6px;overflow:hidden}.progress span{background:var(--pass);border-radius:inherit;height:100%;transition:width .4s;display:block}.card-meta{color:var(--muted);justify-content:space-between;margin:10px 0 0;font-size:.85rem;display:flex}.player{flex-direction:column;height:calc(100vh - 56px);display:flex}.steps{border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:16px;padding:8px 16px;display:flex}.back{color:var(--muted);font-size:.9rem;text-decoration:none}.back:hover{color:var(--accent)}.steps ol{gap:6px;margin:0;padding:0;list-style:none;display:flex}.step-pill{border:1px solid var(--border);background:var(--surface);width:30px;height:30px;color:var(--muted);font:700 .85rem var(--font-sans);cursor:pointer;border-radius:999px}.step-pill.passed{background:var(--pass-soft);border-color:var(--pass);color:var(--pass)}.step-pill.current{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);color:var(--accent)}.step-pill:disabled{opacity:.4;cursor:not-allowed}.workspace{flex:1;grid-template-columns:minmax(300px,2fr) 3fr;min-height:0;display:grid}.brief{border-right:1px solid var(--border);background:var(--surface);padding:24px;overflow-y:auto}.video-ref{color:var(--muted);border:1px dashed var(--border);border-radius:6px;padding:4px 10px;font-size:.85rem;display:inline-block}.instruction{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius) var(--radius) 0;margin:20px 0 16px;padding:16px}.instruction-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.instruction p:last-child{margin:0}.hints{background:var(--xp-soft);border-radius:var(--radius);margin:0 0 16px;padding:12px 16px 12px 36px;font-size:.95rem}.hints p{margin:0}.hints li+li{margin-top:6px}.lab{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--code-bg);min-height:0;color:var(--text);grid-template-rows:auto minmax(160px,1fr) minmax(140px,40%);display:grid}.lab-bar{border-bottom:1px solid var(--border);color:var(--muted);justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;font-size:.8rem;display:flex}.file{font-family:var(--font-mono);color:var(--text)}.editor{min-height:0;overflow:hidden}.editor .cm-editor{height:100%}.editor-pane{min-height:0;position:relative}.editor-pane .editor{height:100%}.editor-pane .cm-editor .cm-content{padding-bottom:64px}.lab-actions{z-index:5;gap:8px;display:flex;position:absolute;bottom:16px;right:16px}.lab-actions .btn{box-shadow:0 2px 8px #00000073}.lab-actions .btn.ghost{background:var(--surface)}.console{border-top:1px solid var(--border);background:var(--surface);padding:16px;overflow:auto}.banner{border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:12px 16px;font-weight:600;display:flex}.banner.pass{background:var(--pass-soft);color:var(--pass)}.banner.fail{background:var(--fail-soft);color:var(--fail)}.xp-gain{color:var(--xp);margin-left:.4em;animation:.5s ease-out pop;display:inline-block}@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.run-error,.program-output{white-space:pre-wrap;font:.9rem/1.5 var(--font-mono);margin:0}.run-error{color:var(--fail)}.program-output+.run-error{margin-top:8px}.result table{border-collapse:collapse;font:.9rem var(--font-mono)}.result th,.result td{text-align:left;border-bottom:1px solid var(--border);padding:6px 14px}.result th{color:var(--muted);font-weight:600}.result .null{color:var(--muted);font-style:italic}.result-meta{color:var(--muted);margin:8px 0 0;font-size:.8rem}@media (width<=860px){.player{height:auto}.workspace{grid-template-columns:1fr}.brief{border-right:none;border-bottom:1px solid var(--border)}.lab{grid-template-rows:auto 280px auto}.kbd-help,.user{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}