:root{color-scheme:dark;--bg: #0f0f10;--panel: #17171a;--border: #2a2a30;--ink: #e8e8ea;--ink-dim: #9a9aa0;--accent: #ffd477;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:13px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden}#app{display:grid;grid-template-columns:280px 1fr;height:100vh}#controls{background:var(--panel);border-right:1px solid var(--border);padding:16px;overflow-y:auto}#controls h1{font-size:15px;margin:0 0 6px;letter-spacing:.04em}.hint{color:var(--ink-dim);font-size:11px;margin-bottom:14px;line-height:1.4}section{border-top:1px solid var(--border);padding:12px 0}section.status{color:var(--ink-dim);font-size:11px}footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);color:var(--ink-dim);font-size:11px;line-height:1.5}footer a{color:var(--accent);text-decoration:none}footer a:hover{text-decoration:underline}footer strong{color:var(--ink);font-weight:600}section h2{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);margin:0 0 8px;font-weight:600}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.row label{color:var(--ink-dim);min-width:70px}.row input,.row select{flex:1;min-width:0;background:#101013;color:var(--ink);border:1px solid var(--border);border-radius:3px;padding:4px 6px;font:inherit}.row input:disabled{color:var(--ink-dim);opacity:.5}.row input[type=range]{padding:0}.note{color:var(--ink-dim);font-size:11px;margin:4px 0 6px}button{width:100%;padding:6px 10px;background:#202024;color:var(--ink);border:1px solid var(--border);border-radius:3px;font:inherit;cursor:pointer;margin-top:4px}button:hover{background:#2a2a30;border-color:#3a3a42}button:disabled{opacity:.5;cursor:default}#stage{position:relative;display:flex;align-items:center;justify-content:center;padding:16px;background:#0a0a0b;overflow:hidden}#canvas,#gpu-canvas{display:block;max-width:100%;max-height:100%;image-rendering:auto;cursor:grab;box-shadow:0 10px 40px #00000080;background:#000}#canvas.grabbing,#gpu-canvas.grabbing{cursor:grabbing}#overlay{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--accent);background:#0a0a0c8c;backdrop-filter:blur(2px);pointer-events:none;opacity:0;transition:opacity .12s}#overlay.show{opacity:1}#overlay.idle{display:none}#spinner{position:absolute;top:24px;right:24px;width:16px;height:16px;border:2px solid rgba(255,212,119,.15);border-top-color:var(--accent);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .14s;animation:spin .8s linear infinite}#spinner.show{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}