:root{color-scheme:dark;--bg:#101211;--panel:#181b19;--border:#303630;--text:#eff3ed;--muted:#98a396;--accent:#d5f888;--radius:12px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}button,select,input{font:inherit}button,.button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:7px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover,.button:hover{border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--accent);color:#18210f;border-color:var(--accent);font-weight:650}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{height:76px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;gap:20px}.brand{font-size:20px;font-weight:750;letter-spacing:1px}.brand span{color:var(--accent)}.small,.eyebrow{font:12px/1.5 ui-monospace,monospace;letter-spacing:1.5px;color:var(--muted)}.wrap{max-width:1240px;margin:auto;padding:48px 32px}h1{font-size:clamp(30px,4vw,52px);letter-spacing:-1.5px;line-height:1.2;margin:16px 0}h2{font-size:22px;margin:0 0 10px}p{color:var(--muted)}.intro{max-width:680px}.module{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:44px}.module-copy{padding:36px}.demo-art{min-height:280px;background:#050605;position:relative;display:grid;place-items:center}.orbit{width:210px;height:155px;border:1px solid #30362a;border-radius:50%;transform:rotate(-25deg)}.dot{width:22px;height:22px;border-radius:50%;background:#ff6a16;position:absolute;top:37%;left:65%}.cross{position:absolute;color:#5e6c54;font:36px monospace}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.tag{border:1px solid var(--border);padding:3px 10px;border-radius:4px;font-size:12px;color:var(--muted)}footer{color:var(--muted);font-size:12px;margin-top:32px}.workspace{max-width:1580px;margin:auto;padding:28px 32px}.title-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.title-row h1{font-size:30px;margin:4px 0}.title-row p{margin:0;font-size:13px}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px}.side{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.side-label{font-size:12px;color:var(--muted);margin:0 0 12px}.lesson{width:100%;justify-content:flex-start;text-align:left;border-color:transparent;background:transparent;padding:9px 10px;font-size:13px;margin:2px 0}.lesson.active{background:#2a3321;border-color:#465636;color:var(--accent)}.lesson b{font:12px monospace;color:var(--muted);width:22px}.lesson small{margin-left:auto;color:var(--muted)}.settings{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}.settings label{display:block;margin:10px 0;font-size:12px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent)}select{width:100%;padding:8px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px}.stage{height:clamp(320px,46vw,590px);background:#000;position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.stage canvas{width:100%;height:100%;display:block}.hud{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;font:12px ui-monospace,monospace;color:#b0b9ac;pointer-events:none}.hud strong{color:var(--accent)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:#0009;padding:30px}.overlay[hidden]{display:none}.overlay h2{font-size:28px}.overlay p{max-width:420px}.cue{position:absolute;bottom:25px;left:12px;right:12px;text-align:center;color:#ddd;font-size:14px;pointer-events:none}.fullscreen{position:absolute;right:16px;bottom:14px;padding:7px 11px;background:#171b17b0;font-size:12px;z-index:2}.stage:fullscreen,.stage.expanded{width:100vw;height:100dvh;border:0;border-radius:0}.stage.expanded{position:fixed;inset:0;z-index:100}.bar{height:3px;background:var(--border);margin-top:12px}.bar div{height:100%;background:var(--accent);width:0}.controls{display:flex;justify-content:space-between;gap:10px;margin:18px 0;flex-wrap:wrap}.controls>div{display:flex;gap:8px;flex-wrap:wrap}.note{border-top:1px solid var(--border);padding-top:16px;font-size:12px;color:var(--muted)}.note p{margin:6px 0}.status{font:12px monospace;align-self:center;color:var(--muted)}kbd{border:1px solid var(--border);border-radius:3px;padding:1px 5px}#notice{color:var(--accent)}@media(max-width:760px){header{height:62px;padding:0 20px}.wrap,.workspace{padding:24px 16px}.module{grid-template-columns:1fr}.module-copy{padding:24px}.demo-art{min-height:210px}.layout{grid-template-columns:1fr}.side{order:2}.lessons{display:grid;grid-template-columns:1fr 1fr;gap:3px}.title-row{align-items:flex-start}.title-row h1{font-size:25px}.title-row .small{display:none}.stage{height:400px}.hud{left:12px;right:12px;font-size:11px}.cue{bottom:65px}.overlay{padding:18px}.overlay h2{font-size:23px}.controls button{padding:9px 12px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:16px}.settings label{margin:0}.note{font-size:12px}}
.stage-pause{position:absolute;bottom:14px;left:16px;background:#171b17b0;padding:7px 11px;font-size:12px;z-index:2}.stage-pause[hidden]{display:none}