:root{--ground:#0a0d16;--surface:#11162a;--surface-2:#151b31;--border:#232b46;--border-soft:#1b2138;--text:#dbe1f4;--muted:#8c95b4;--faint:#616a8a;--violet:#8b6dff;--magenta:#ff5d9e;--render:#41a9ff;--good:#4ad6a0;--bad:#ff6b7d;--amber:#ffab5e;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--ground);color:var(--text);font-family:var(--sans);overflow:hidden}#app{--stage-w:32%;grid-template-rows:auto 1fr auto;height:100vh;display:grid}#topbar{border-bottom:1px solid var(--border);align-items:center;gap:20px;padding:11px 18px;display:flex}.brand{font-family:var(--mono);letter-spacing:.14em;white-space:nowrap;font-size:14px;font-weight:600}.brand .tag{color:var(--violet);letter-spacing:.2em;text-transform:uppercase;margin-left:8px;font-size:11px}.crumb{color:var(--faint);font-size:13px;font-family:var(--mono)}.readout{color:var(--muted);align-items:center;gap:16px;margin-left:auto;font-size:13px;display:flex}.stat b{color:var(--text);font-variant-numeric:tabular-nums}#work{grid-template-columns:var(--stage-w) 8px 1fr;min-height:0;display:grid}#stage{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative}#scene{touch-action:none;cursor:crosshair;flex:1;width:100%;min-height:0;display:block}#targetBadge{border:1px solid var(--violet);color:#d8ccff;font-size:12px;font-family:var(--mono);letter-spacing:.02em;background:#8b6dff29;border-radius:8px;padding:6px 11px;position:absolute;top:12px;left:12px}#canvasbar{border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;display:flex}.chk{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}.rng{color:var(--muted);flex:100%;align-items:center;gap:8px;font-size:13px;display:flex}.rng input[type=range]{flex:1;min-width:90px}#vdrag{cursor:col-resize;background:var(--border);touch-action:none;position:relative}#vdrag:after{content:"";background:var(--muted);opacity:.5;border-radius:2px;width:2px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#vdrag:hover:after{background:var(--violet);opacity:1}#side{flex-direction:column;min-width:0;min-height:0;display:flex}#tabs{border-bottom:1px solid var(--border);background:var(--surface);display:flex}.tab{appearance:none;color:var(--muted);font-family:var(--sans);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:12px 18px;font-size:13.5px}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--violet)}.tab:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}#testBadge{font-variant-numeric:tabular-nums;margin-left:7px;font-size:12px}.tabbody{flex:1;min-height:0;position:relative}.pane{display:none;position:absolute;inset:0;overflow:auto}.pane.active{display:block}#pane-code.active{flex-direction:column;display:flex;overflow:hidden}#pane-lesson{max-width:760px;padding:22px 26px 40px;line-height:1.65}#pane-lesson h2{margin:0 0 12px;font-size:22px}#pane-lesson h3{color:var(--text);margin:26px 0 8px;font-size:15px}#pane-lesson p{color:#c7cde6;margin:0 0 12px}#pane-lesson ol{margin:0 0 12px;padding-left:22px}#pane-lesson li{color:#c7cde6;margin:6px 0}#pane-lesson code{font-family:var(--mono);border:1px solid var(--border-soft);color:#cdd6f6;background:#1b2138;border-radius:5px;padding:1px 6px;font-size:.86em}#pane-lesson .obj{background:var(--surface-2);border:1px solid var(--border);border-left:2px solid var(--magenta);border-radius:8px;padding:12px 14px}#pane-lesson .callout{border:1px solid var(--border-soft);border-left:2px solid var(--violet);background:linear-gradient(90deg,#8b6dff1f,#0000);border-radius:8px;margin:6px 0 4px;padding:12px 14px}#hints{flex-direction:column;gap:8px;display:flex}.hint-btn{color:var(--amber);cursor:pointer;background:0 0;border:1px dashed #4a3d2a;border-radius:8px;align-self:flex-start;padding:8px 12px;font-size:13px}.hint-btn:hover{border-color:var(--amber)}.hint-text{background:var(--surface-2);border:1px solid var(--border-soft);color:#d7ddf2;border-radius:8px;padding:10px 13px;font-size:13.5px}.hint-text code{background:#232b46}.code-body{height:100%;min-height:0;display:flex}#filelist{border-right:1px solid var(--border);background:var(--surface);flex:none;width:168px;padding:8px 0;overflow-y:auto}.fl-group{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:10px 14px 4px;font-size:10.5px}.fl-item{font-family:var(--mono);color:var(--muted);cursor:pointer;border-left:2px solid #0000;align-items:center;gap:8px;padding:6px 14px;font-size:13px;display:flex}.fl-item:hover{color:var(--text);background:var(--surface-2)}.fl-item.active{color:var(--text);background:var(--surface-2);border-left-color:var(--violet)}.fl-item .dot{color:var(--faint);font-size:11px}.fl-item.edit .dot{color:var(--magenta)}.fl-item .lock{opacity:.5;margin-left:auto;font-size:11px}.editor-col{flex-direction:column;flex:1;min-width:0;display:flex}.code-head{border-bottom:1px solid var(--border);font-family:var(--mono);color:var(--muted);background:var(--surface);align-items:center;gap:10px;padding:8px 12px;font-size:12px;display:flex}.code-head #resetCode{margin-left:auto}.ro-tag,.saved-tag{letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:1px 7px;font-size:10.5px}.ro-tag{color:var(--amber);border:1px solid #4a3d2a}.saved-tag{color:var(--good);border:1px solid #234a3a}button.ghost{color:var(--muted);background:0 0;border-color:#0000;padding:6px 8px}button.ghost:hover{color:var(--text);border-color:var(--border)}#code{flex:1;width:100%;min-height:0}.tests-head{border-bottom:1px solid var(--border);background:var(--ground);justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}#testsSummary{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}#testList{flex-direction:column;gap:6px;margin:0;padding:8px 12px;list-style:none;display:flex}#testList li{border:1px solid var(--border-soft);background:var(--surface);border-radius:8px;align-items:baseline;gap:10px;padding:10px 12px;font-size:13.5px;display:flex}#testList .mark{font-size:14px}#testList li.pass .mark{color:var(--good)}#testList li.fail .mark{color:var(--bad)}#testList .detail{color:var(--faint);font-family:var(--mono);margin-left:auto;font-size:12px}button{font-family:var(--sans);color:var(--text);background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:8px 12px;font-size:13px;transition:border-color .15s,background .15s}button:hover{border-color:var(--violet)}button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}#apply,#runTests{color:#0a0d16;background:var(--violet);border-color:var(--violet);font-weight:600}#apply:hover,#runTests:hover{filter:brightness(1.08)}#target[data-on=true]{border-color:var(--violet);color:#d8ccff;background:#8b6dff2e}input[type=range]{accent-color:var(--violet)}input[type=checkbox]{accent-color:var(--violet);width:15px;height:15px}label span{color:var(--text)}#statusbar{border-top:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;gap:16px;padding:8px 16px;font-size:12.5px;display:flex}#status{font-family:var(--mono);word-break:break-word}#status[data-kind=ok]{color:var(--good)}#status[data-kind=error]{color:var(--bad)}#status[data-kind=info]{color:var(--muted)}#progress{color:var(--faint);white-space:nowrap}@media (width<=820px){#work{grid-template-rows:40vh 8px 1fr;grid-template-columns:1fr}#vdrag{cursor:row-resize}.crumb{display:none}}