: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;transition:grid-template-columns .2s ease}#app.sidebar-hidden{grid-template-columns:0 1fr}#sidebar-toggle{position:fixed;top:16px;left:220px;z-index:30;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:var(--bg-elev2);color:var(--fg-dim);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:left .2s ease,color .15s ease}#sidebar-toggle:hover{color:var(--fg)}#app.sidebar-hidden #sidebar-toggle{left:12px}.sidebar-toggle-chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(1px) rotate(135deg);transition:transform .15s ease}#app.sidebar-hidden .sidebar-toggle-chevron{transform:translate(-1px) rotate(-45deg)}#sidebar{background:var(--bg-elev);border-right:1px solid var(--border);overflow-y:auto;padding:24px 0}#app.sidebar-hidden #sidebar{overflow:hidden;border-right: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,.chapter-lessons{list-style:none;padding:0;margin:0}.chapter-header{display:flex;align-items:center;gap:6px;width:100%;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim);background:transparent;border:0;border-top:1px solid var(--border);margin:0;padding:12px 20px 8px;font-family:var(--sans);text-align:left;cursor:pointer;transition:color .12s}.chapter-header:hover{color:var(--fg)}.chapter:first-child .chapter-header{border-top:none}.chapter-chevron{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s ease;flex-shrink:0;margin:0 2px 2px 0}.chapter.collapsed .chapter-chevron{transform:rotate(-45deg)}.chapter-lessons{overflow:hidden;max-height:2000px;transition:max-height .2s ease}.chapter.collapsed .chapter-lessons{max-height: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{display:flex;flex-direction:column;overflow:hidden;min-height:0}.lesson-topbar{flex:0 0 auto;padding:12px 40px;border-bottom:1px solid var(--border)}.lesson-main{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 40px}.lesson-left-col{display:flex;flex-direction:column;min-height:0}.lesson-body{flex:1 1 auto;min-height:0;overflow-y:auto}.editor-dock{flex:0 0 auto;margin-top:12px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--code-bg)}.editor-dock .editor-wrap{margin:0;border:0;border-radius:0}.editor-dock{transition:height .3s ease}.editor-dock .cm-editor{max-height:34vh}.lesson-left-col.editor-maximized .lesson-body{display:none}.lesson-left-col.editor-maximized .editor-dock{flex:1 1 auto;min-height:0}.lesson-left-col.editor-animating .editor-dock{flex:0 0 auto}.lesson-left-col.editor-animating .lesson-body{display:block;overflow:hidden}.lesson-left-col.editor-maximized .editor-dock,.lesson-left-col.editor-animating .editor-dock{display:flex;flex-direction:column}.lesson-left-col.editor-maximized .editor-wrap,.lesson-left-col.editor-animating .editor-wrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.lesson-left-col.editor-maximized .editor-host,.lesson-left-col.editor-animating .editor-host{flex:1 1 auto;min-height:0;display:flex}.lesson-left-col.editor-maximized .cm-editor,.lesson-left-col.editor-animating .cm-editor{max-height:none;flex:1 1 auto;min-height:0}.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}.canvas-column{display:flex;flex-direction:column;min-height:0}.mode-body{min-height:0}.mode-experiment:not([hidden]){flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.experiment-canvas-area{flex:1 1 auto;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}.experiment-canvas-area .canvas-wrap{width:100cqmin;height:100cqmin;max-width:none;aspect-ratio:auto}.mode-experiment>.controls,.mode-experiment>.image-picker-host{flex:0 0 auto}.mode-experiment>.controls{margin-top:16px}.mode-exercise:not([hidden]){flex:1 1 auto;display:flex;flex-direction:column;min-height:0}.exercise-text{flex:0 1 auto;min-height:0;max-height:50%;overflow-y:auto}.exercise-canvases{flex:1 1 0;min-height:0}.exercise-controls-slot{flex:0 0 auto}@media (max-width: 1100px){#lesson{overflow-y:auto}.lesson-main{display:block;padding:16px 24px}.lesson-left-col,.canvas-column{display:block;min-height:0}.lesson-body,.mode-experiment:not([hidden]),.exercise-text{overflow:visible;min-height:0}.mode-experiment:not([hidden]){display:block}.experiment-canvas-area{display:block;container-type:normal}.experiment-canvas-area .canvas-wrap{width:100%;height:auto;aspect-ratio:1 / 1}.exercise-text{max-height:none}.exercise-canvas-col{container-type:normal;display:block}.exercise-canvas-col .solution-canvas-wrap{width:100%;height:auto;aspect-ratio:1 / 1}.editor-dock .cm-editor{max-height:50vh}}.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}.lesson-prose a{color:var(--accent);text-decoration:underline}.lesson-prose a:hover{opacity:.85}.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)}.panel-header{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;flex:0 0 auto;margin-bottom:16px}.panel-mode-toggle{display:flex;flex:0 0 auto;border:1px solid var(--border);border-radius:4px;overflow:hidden;width:fit-content}.panel-mode-toggle button{background:transparent;color:var(--fg-dim);border:0;border-right:1px solid var(--border);padding:5px 14px;font-family:var(--sans);font-size:12px;cursor:pointer}.panel-mode-toggle button:last-child{border-right:0}.panel-mode-toggle button:hover{color:var(--fg)}.panel-mode-toggle button.active{background:var(--accent);color:#1a1006;font-weight:600}.mode-body[hidden]{display:none}.exercise-pills{display:flex;flex-wrap:wrap;gap:6px}.exercise-pills:empty,.exercise-pills[hidden]{display:none}.exercise-pill{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg-dim);font-family:var(--sans);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}.exercise-pill:hover{color:var(--fg);border-color:var(--accent-dim)}.exercise-pill.is-active{background:var(--accent);color:#1a1006;border-color:var(--accent);font-weight:600}.exercise-text{margin-bottom:14px}.exercise-prompt{font-size:14px}.exercise-prompt p{margin:0}.exercise-canvases{display:flex;gap:12px;justify-content:center}.exercise-canvas-col{flex:1 1 0;min-width:0;min-height:0;container-type:size;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.exercise-canvas-col .solution-label{flex:0 0 auto;margin-top:0;text-align:center}.exercise-canvas-col .solution-canvas-wrap{flex:0 0 auto;width:min(100cqw,calc(100cqh - 26px));height:min(100cqw,calc(100cqh - 26px))}.mode-exercise.is-ready .solution-canvas-wrap{transition:width .15s ease,height .15s ease}.exercise-controls-slot{margin-top:4px}.mode-exercise .solution-label,.mode-exercise .goal-canvas-wrap,.mode-exercise .exercise-text,.exercise-pill{opacity:0;transition:opacity .2s ease}.mode-exercise.is-ready .solution-label,.mode-exercise.is-ready .goal-canvas-wrap,.mode-exercise.is-ready .exercise-text,.exercise-pills.is-ready .exercise-pill{opacity:1}.mode-exercise.is-ready .goal-canvas-wrap{transition:width .15s ease,height .15s ease,opacity .2s ease}@media (max-width: 700px){.exercise-canvases{flex-direction:column}}.exercise-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}.exercise-actions button{background:transparent;color:var(--fg-dim);border:1px solid var(--border);padding:4px 12px;border-radius:4px;font-family:var(--sans);font-size:12px;cursor:pointer}.exercise-actions button:hover{color:var(--fg);border-color:var(--accent-dim)}.exercise-actions .reveal-btn{border-color:var(--accent-dim);color:var(--accent)}.exercise-hint{display:none;margin-top:12px;padding:10px 14px;background:var(--code-bg);border-left:3px solid #6ea8fe;border-radius:4px;font-size:13px;color:var(--fg-dim)}.exercise-hint.is-open{display:block}.exercise-hint strong{color:#6ea8fe}.exercise-hint code{background:var(--code-bg);padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:.92em}.exercise-answer{display:none}.exercise-answer.is-open{display:block;margin-top:14px}.exercise-explanation{font-size:14px}.exercise-solution-code{margin:14px 0;padding:12px 14px;background:var(--code-bg);border:1px solid var(--border);border-radius:6px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.5}.exercise-solution-code code{font-family:var(--mono)}.solution-label{font-size:12px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.04em;margin-top:14px;margin-bottom:6px}.solution-canvas-wrap{position:relative;width:100%;aspect-ratio:1 / 1;background:#000;border-radius:6px;overflow:hidden;border:1px solid var(--border)}.solution-canvas-wrap canvas{width:100%;height:100%;display:block}.your-canvas-wrap{z-index:1}.solution-error{display:none;margin-top:8px;padding:10px 14px;background:#1a1217;color:var(--error);font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;border-radius:4px}.solution-error.is-visible{display:block}.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-actions{display:flex;gap:8px}.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-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}.image-picker{display:grid;grid-template-columns:110px 1fr 64px;align-items:center;gap:12px;font-size:13px;padding-bottom:8px;border-bottom:1px solid var(--border)}.image-picker>label{color:var(--fg-dim);font-family:var(--mono)}.image-picker-controls{display:flex;align-items:center;gap:8px;min-width:0}.image-picker-controls input[type=file]{flex:1;min-width:0;font-size:12px;color:var(--fg-dim)}.image-picker-controls button{font-size:12px;padding:4px 10px;background:transparent;color:var(--fg-dim);border:1px solid var(--border);border-radius:4px;cursor:pointer}.image-picker-controls button:hover{color:var(--accent);border-color:var(--accent)}.image-picker-name{font-family:var(--mono);color:var(--fg-dim);text-align:right;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lesson-nav-top{margin:0}.lesson-footer{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--border);color:var(--fg-dim);font-size:12px;line-height:1.5}.lesson-footer a{color:var(--accent)}.lesson-disclaimer{background:#3a1f24;border:1px solid #6b2f38;border-radius:6px;padding:12px 16px;margin:0 0 24px;font-size:14px}.lesson-disclaimer a{color:var(--accent)}.lesson-nav-btn{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;color:var(--fg);font-family:var(--sans);cursor:pointer;transition:border-color .12s,background .12s,color .12s;min-width:0}.lesson-nav-btn:hover:not(:disabled){border-color:var(--accent-dim);background:var(--bg-elev2)}.lesson-nav-btn:disabled{opacity:.4;cursor:default}.lesson-nav-btn.next{justify-content:flex-end;text-align:right}.lesson-nav-btn .nav-arrow{font-size:18px;color:var(--accent);flex-shrink:0}.lesson-nav-btn:disabled .nav-arrow{color:var(--fg-dim)}.lesson-nav-btn .nav-meta{display:flex;flex-direction:column;min-width:0}.lesson-nav-btn .nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim)}.lesson-nav-btn .nav-title{font-size:14px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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)}