:root{--bg: #0c0c10;--panel: #14141c;--panel-2: #1b1b26;--border: #2a2a38;--text: #e6e6ee;--muted: #9a9ab0;--accent: #6ca8ff;--accent-2: #3cf;--topbar-h: 56px}*{box-sizing:border-box}html,body,#app{margin:0}body{background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:var(--accent)}.app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:20;min-height:var(--topbar-h)}.brand{font-weight:700;font-size:17px}.tagline{color:var(--muted);font-size:14px}@media (max-width: 640px){.tagline{display:none}}.toplinks{margin-left:auto;display:flex;gap:16px}.toplinks a{color:var(--muted);text-decoration:none}.toplinks a:hover{color:var(--text)}.trackswitch{margin-left:auto;display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:3px}.track-tab{font:13px inherit;color:var(--muted);background:none;border:none;border-radius:7px;padding:5px 12px;cursor:pointer;white-space:nowrap}.track-tab:hover{color:var(--text)}.track-tab.active{background:var(--accent);color:#04101f;font-weight:600}@media (max-width: 720px){.track-tab{padding:5px 8px;font-size:12px}}.learn-hint{flex:0 0 auto;margin:0;padding:8px 12px;border-top:1px solid var(--border);background:#ffb4501a;color:#ffd28a;font-size:13px}.learn-aux{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}.learn-collapse{flex:1 1 280px;min-width:0;align-self:flex-start;border:1px solid var(--border);border-radius:10px;background:var(--panel);overflow:hidden}.learn-collapse.target{border-color:var(--accent);background:#6ca8ff14}.learn-collapse>summary{cursor:pointer;padding:8px 12px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.03em;-webkit-user-select:none;user-select:none}.learn-collapse.target>summary{color:var(--accent)}.learn-collapse pre{margin:0;max-height:22vh;overflow:auto;padding:10px 12px;border-top:1px solid var(--border);color:#eaf2ff;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}.learn-waiting{color:var(--muted);text-align:center}.learn-waiting p{max-width:320px;margin:0;padding:0 20px}.learn-final{flex:1;min-height:0;overflow:auto;margin:0;padding:12px;background:var(--panel);color:#d7e0ee;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}.body{display:flex;flex:1}.sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);background:var(--panel);padding:16px 12px;display:flex;flex-direction:column;overflow:hidden;transition:width .15s ease;position:sticky;top:var(--topbar-h);align-self:flex-start;height:calc(100vh - var(--topbar-h))}.sidebar h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:4px 8px 12px}.steplist{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-y:auto;min-height:0}.steplist .step{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit}.steplist .step:hover,.steplist .step.active{background:var(--panel-2);color:var(--text)}.steplist .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--border);color:var(--text);font-size:12px;flex-shrink:0}.steplist .step.active .num{background:var(--accent);color:#04101f}.steplist .step.done .num{background:#36c46a;color:#04101f}.step-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-foot{color:var(--muted);font-size:12px;margin:14px 10px 0}.sidebar-toggle{margin-top:10px;flex-shrink:0;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--muted);cursor:pointer;font:inherit;font-size:13px}.sidebar-toggle:hover{color:var(--text);border-color:var(--accent)}.sidebar-toggle-icon{font-size:15px;line-height:1}.sidebar.collapsed{width:60px;padding-left:8px;padding-right:8px}.sidebar.collapsed h2,.sidebar.collapsed .sidebar-foot,.sidebar.collapsed .step-label,.sidebar.collapsed .sidebar-toggle-label{display:none}.sidebar.collapsed .steplist .step{justify-content:center;padding:8px;gap:0}.sidebar.collapsed .sidebar-toggle{justify-content:center;padding:8px}.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:20px clamp(16px,4vw,48px) 24px;max-width:1100px;margin:0 auto;width:100%}.prose{flex:0 0 auto}.prose h1{font-size:26px;margin:0 0 8px}.prose h2{font-size:19px;margin:24px 0 6px}.prose p{color:#cfcfdd}.prose code{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}.prose pre{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:12px;overflow-x:auto}.prose pre code{background:none;border:none;padding:0}.mission{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin:4px 0 0;padding:10px 14px;border:1px dashed var(--accent);border-radius:12px;background:#6ca8ff14}.mission.won{border-style:solid;border-color:#36c46a;background:#36c46a1f}.mission-badge{font-size:20px;line-height:1}.mission-text{font-weight:600}.mission-next{margin-left:auto}.celebrate{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:start center;padding-top:12vh;pointer-events:none;z-index:50}.celebrate-card{text-align:center;background:var(--panel);border:2px solid #36c46a;border-radius:16px;padding:18px 26px;box-shadow:0 12px 40px #00000080;animation:pop .4s cubic-bezier(.2,1.4,.4,1) both}.celebrate-emoji{font-size:44px;animation:bounce .7s ease .2s 2}.celebrate-text{font-size:18px;font-weight:700;margin-top:6px}@keyframes pop{0%{transform:scale(.6) translateY(-12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (prefers-reduced-motion: reduce){.celebrate-card,.celebrate-emoji{animation:none}}.workbench{flex:0 0 auto;height:clamp(320px,44vh,420px);display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 12px}.editor-pane,.preview-pane{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel);min-height:0}.pane-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.pane-bar .spacer{flex:1}.pane-bar .hint{text-transform:none;letter-spacing:0}.btn{font:13px inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:4px 10px;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);color:#04101f;border-color:var(--accent);font-weight:600}.editor{flex:1;min-height:0;overflow:auto}.editor .cm-editor{height:100%}.editor .cm-scroller{font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.preview{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px;background:#0e0e14;overflow:hidden}.preview-frame{width:480px;max-width:100%;aspect-ratio:480 / 360;max-height:100%;border:0;display:block;background:#0e0e14;box-shadow:0 0 0 1px var(--border)}.preview-error{position:absolute;left:0;right:0;bottom:0;margin:0;max-height:50%;overflow:auto;padding:10px 12px;background:#3c0c10f5;color:#ffd7d7;border-top:1px solid #7a2a2a;font:12px ui-monospace,Menlo,monospace;white-space:pre-wrap}.stepnav{flex:0 0 auto;display:flex;align-items:center;gap:14px;margin-top:8px}@media (max-width: 860px){.sidebar{position:static;height:auto;max-height:none}.workbench{grid-template-columns:1fr;height:auto}.editor-pane{height:340px}.preview-pane{height:300px}}.stepnav .progress{color:var(--muted);font-size:13px}.stepnav .btn:last-child{margin-left:auto}