:root{--bg: #0f1115;--bg-elev: #161922;--bg-elev2: #1d2230;--fg: #e6e8ee;--fg-dim: #9aa3b2;--accent: #ffb86b;--accent-dim: #b07a44;--error: #ff6b6b;--border: #262b38;--code-bg: #11141b;--mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased}#app{display:grid;grid-template-columns:260px 1fr;height:100vh;min-height:100vh}#sidebar{background:var(--bg-elev);border-right:1px solid var(--border);overflow-y:auto;padding:24px 0}.sidebar-header{padding:0 20px 16px;border-bottom:1px solid var(--border);margin-bottom:12px}.sidebar-header h1{font-size:16px;margin:0 0 4px;letter-spacing:.02em}.sidebar-header p{margin:0 0 12px;font-size:12px;color:var(--fg-dim)}.lang-toggle{display:flex;gap:0;border:1px solid var(--border);border-radius:4px;overflow:hidden;width:fit-content}.lang-toggle button{background:transparent;color:var(--fg-dim);border:0;padding:4px 12px;font-family:var(--sans);font-size:12px;cursor:pointer;border-right:1px solid var(--border)}.lang-toggle button:last-child{border-right:0}.lang-toggle button:hover{color:var(--fg)}.lang-toggle button.active{background:var(--accent);color:#1a1006;font-weight:600}.lesson-list{list-style:none;padding:0;margin:0}.lesson-list li button{display:flex;width:100%;gap:10px;align-items:baseline;padding:8px 20px;background:transparent;border:0;text-align:left;color:var(--fg-dim);font-family:var(--sans);font-size:13px;cursor:pointer;border-left:2px solid transparent;transition:background .12s,color .12s}.lesson-list li button:hover{background:var(--bg-elev2);color:var(--fg)}.lesson-list li.active button{background:var(--bg-elev2);color:var(--fg);border-left-color:var(--accent)}.lesson-num{color:var(--accent-dim);font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px;min-width:22px}#lesson{overflow-y:auto;padding:32px 40px 60px}.lesson-header h2{margin:0 0 4px;font-size:28px;letter-spacing:-.01em}.lesson-header .lesson-subtitle{color:var(--fg-dim);margin:0 0 24px;font-size:14px}.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}@media (max-width: 1100px){.lesson-grid{grid-template-columns:1fr}}.lesson-prose{font-size:15px}.lesson-prose h3{margin-top:24px;font-size:16px;color:var(--accent)}.lesson-prose p{margin:0 0 12px}.lesson-prose code{background:var(--code-bg);padding:1px 6px;border-radius:4px;font-family:var(--mono);font-size:.92em;color:var(--accent)}.lesson-prose pre{background:var(--code-bg);padding:12px 14px;border-radius:6px;overflow-x:auto;font-size:13px}.lesson-prose pre code{background:transparent;padding:0;color:var(--fg)}.lesson-prose ul{padding-left:22px}.challenge{margin:16px 0;padding:12px 14px;background:var(--bg-elev);border-left:3px solid var(--accent);border-radius:4px;font-size:14px}.challenge strong{color:var(--accent)}.variant-note{margin:16px 0;padding:10px 14px;background:var(--bg-elev);border-left:3px solid #6ea8fe;border-radius:4px;font-size:13px;color:var(--fg-dim)}.variant-note strong{color:#6ea8fe}.variant-note code{background:var(--code-bg);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:.92em;color:#6ea8fe}.editor-wrap{margin-top:24px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--code-bg)}.editor-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-elev);border-bottom:1px solid var(--border);font-size:12px;color:var(--fg-dim)}.editor-toolbar button{background:transparent;border:1px solid var(--border);color:var(--fg-dim);border-radius:4px;padding:4px 10px;font-family:var(--sans);font-size:12px;cursor:pointer}.editor-toolbar button:hover{color:var(--fg);border-color:var(--accent-dim)}.cm-editor{font-family:var(--mono);font-size:13px;max-height:50vh}.cm-editor .cm-scroller{font-family:var(--mono)}.cm-editor.cm-focused{outline:none}.cm-editor .cm-gutters{background:var(--code-bg);border-right:1px solid var(--border);color:var(--fg-dim)}.error-panel{background:#1a1217;color:var(--error);font-family:var(--mono);font-size:12px;padding:0;max-height:0;overflow:hidden;transition:max-height .2s ease;border-top:1px solid transparent}.error-panel.visible{padding:10px 14px;max-height:200px;overflow-y:auto;border-top:1px solid #3a1d28}.error-panel pre{margin:0;white-space:pre-wrap;word-break:break-word}.canvas-column{position:sticky;top:32px}.canvas-wrap{position:relative;width:100%;aspect-ratio:1 / 1;background:#000;border-radius:6px;overflow:hidden;border:1px solid var(--border)}.canvas-wrap canvas{width:100%;height:100%;display:block}.controls{margin-top:16px;display:flex;flex-direction:column;gap:12px}.control{display:grid;grid-template-columns:110px 1fr 64px;align-items:center;gap:12px;font-size:13px}.control label{color:var(--fg-dim);font-family:var(--mono)}.control input[type=range]{width:100%;accent-color:var(--accent)}.control input[type=color]{width:100%;height:28px;background:transparent;border:1px solid var(--border);border-radius:4px;padding:2px;cursor:pointer}.control .control-value{font-family:var(--mono);color:var(--accent);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}.preset-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}.preset-row button{background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);padding:4px 10px;border-radius:4px;font-size:12px;cursor:pointer}.preset-row button:hover{border-color:var(--accent-dim)}