:root{--bg:#04080b;--panel:#070e13cc;--panel-solid:#0a141a;--line:#78cde129;--line-strong:#78cde157;--text:#e8f2f6;--muted:#93aab4;--accent:#57e0ff;--accent-dim:#2b93ad;--warm:#ffb454;--danger:#ff6474;--ok:#6df0b8;--radius:14px;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}body{overflow:hidden}button,input,select{font:inherit;color:inherit}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.lab{width:100%;height:100dvh;position:relative;overflow:hidden}.stage{position:absolute;inset:0}.stage canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.hud{font-family:var(--mono);color:var(--muted);pointer-events:none;text-shadow:0 1px 6px #000;gap:4px;font-size:12px;display:grid;position:absolute;bottom:calc(30dvh + 74px);left:20px}.hud b{color:var(--text);font-weight:600}.hint{text-align:center;max-width:min(560px,90vw);color:var(--muted);border:1px solid var(--line);pointer-events:none;background:#04090c8c;border-radius:999px;padding:6px 12px;font-size:13px;transition:opacity .6s;position:absolute;top:84px;left:50%;transform:translate(-50%)}.hint.gone{opacity:0}.labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.label{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#d7f3fb;border:1px solid var(--line-strong);will-change:transform;background:#040c109e;border-radius:999px;margin:-9px 0 0 6px;padding:2px 8px 2px 14px;font-size:11.5px;position:absolute;top:0;left:0}.label:before{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 8px var(--accent);border-radius:50%;margin-top:-3px;position:absolute;top:50%;left:4px}.brand{pointer-events:none;position:absolute;top:16px;left:20px}.brand h1{letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 18px #57e0ff59;margin:0;font-size:22px;font-weight:700}.brand p{color:var(--muted);margin:2px 0 0;font-size:13px}.banner{letter-spacing:.04em;color:#ffd9a0;background:#ffb4541a;border:1px solid #ffb4546b;border-radius:999px;margin:0;padding:5px 12px;font-size:12px;position:absolute;top:66px;left:20px}.panel{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;flex-direction:column;gap:12px;width:372px;padding-right:2px;display:flex;position:absolute;top:16px;bottom:46px;right:16px;overflow-y:auto}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px)saturate(1.25);padding:14px 16px;box-shadow:0 10px 40px #00000059}.card h2{letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-size:11px;font-weight:700}.card p{margin:0 0 8px;font-size:14px;line-height:1.5}.card .muted,.muted{color:var(--muted);font-size:12.5px}.btn{appearance:none;cursor:pointer;border:1px solid var(--line-strong);background:#57e0ff0f;border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:600;transition:background .15s,border-color .15s,transform 50ms}.btn:hover{border-color:var(--accent);background:#57e0ff29}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:default}.btn--primary{border-color:var(--accent);color:#eaffff;background:linear-gradient(#57e0ff52,#2b93ad47)}.btn--shock{border-color:var(--warm);color:#fff2dc;background:linear-gradient(#ffb45452,#be6e1e4d)}.btn--shock:hover{background:linear-gradient(#ffb45480,#be6e1e6b);border-color:#ffd08a}.btn--ghost{background:0 0}.btn[aria-pressed=true]{border-color:var(--accent);background:#57e0ff3d}.btn.recording{border-color:var(--danger);color:#ffe3e6;background:#ff647438}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row+.row,.row+.field,.field+.field,p+.row{margin-top:10px}.field label,.field .label{justify-content:space-between;margin-bottom:4px;font-size:13px;display:flex}.field .value{font-family:var(--mono);color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}.seg{border:1px solid var(--line-strong);border-radius:10px;display:inline-flex;overflow:hidden}.seg button{appearance:none;cursor:pointer;color:var(--muted);background:0 0;border:0;padding:7px 12px;font-size:12.5px;font-weight:600}.seg button+button{border-left:1px solid var(--line-strong)}.seg button[aria-pressed=true]{color:var(--text);background:#57e0ff33}.lesson-list{gap:6px;display:grid}.lesson-list button{text-align:left}.lesson-list .num{width:1.6em;color:var(--accent);font-family:var(--mono);display:inline-block}.step-title{margin:0 0 6px;font-size:15px;font-weight:700}.progress{gap:4px;margin:4px 0 12px;display:flex}.progress i{background:var(--line-strong);border-radius:2px;flex:1;height:3px}.progress i.done{background:var(--accent)}.progress i.now{background:var(--warm)}.hintline{color:#ffd9a0;margin-top:8px;font-size:12.5px}.dock{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);flex-direction:column;height:30dvh;min-height:200px;display:flex;position:absolute;bottom:46px;left:16px;right:404px;overflow:hidden;box-shadow:0 10px 40px #0006}.dock-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.dock-title{letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-right:auto;font-size:11px;font-weight:700}.dock canvas{flex:1;width:100%;min-height:0;display:block}.compare{background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--radius);max-height:46dvh;padding:14px 16px;position:absolute;bottom:calc(30dvh + 60px);left:16px;right:404px;overflow:auto;box-shadow:0 14px 50px #0000008c}.foot{color:var(--muted);flex-wrap:wrap;gap:4px 14px;font-size:11px;line-height:1.5;display:flex;position:absolute;bottom:10px;left:16px;right:16px}.foot a{color:var(--muted);-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong)}.foot a:hover{color:var(--text)}.overlay{background:radial-gradient(circle at 50% 40%, #0b1a22, var(--bg) 70%);z-index:20;text-align:center;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.overlay h2{letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-size:20px}.overlay p{max-width:34rem;color:var(--muted);margin:0 auto 6px;line-height:1.55}.spinner{border:3px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;margin:0 auto 16px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.overlay video{border-radius:var(--radius);border:1px solid var(--line);max-width:min(560px,92vw);margin-top:14px}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}.hint{transition:none}}@media (width<=860px){body{overflow:auto}.lab{flex-direction:column;height:auto;min-height:100dvh;display:flex;overflow:visible}.stage{flex:none;order:0;height:52dvh;position:relative;inset:auto}.hud{bottom:10px;left:12px}.brand{top:10px;left:14px}.brand h1{font-size:17px}.brand p{display:none}.banner{font-size:11px;top:38px;left:14px}.hint{font-size:12px;top:70px}.dock{flex:none;order:1;height:250px;min-height:0;margin:10px 12px 0;position:relative;bottom:auto;left:auto;right:auto}.panel{order:3;width:auto;margin:10px 12px 0;position:relative;top:auto;bottom:auto;right:auto;overflow:visible}.compare{order:2;max-height:none;margin:10px 12px 0;position:relative;bottom:auto;left:auto;right:auto}.foot{order:4;padding:14px 14px 20px;position:relative;bottom:auto;left:auto;right:auto}}