*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #09090b;--surface: rgba(9, 9, 11, .85);--surface-border: rgba(255,255,255,.08);--text: #fafafa;--text-muted: #71717a;--accent: #06b6d4;--accent-violet: #7c3aed;--accent-warm: #f59e0b;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}html,body{height:100%;overflow:hidden;font-family:var(--font-body);background:var(--bg);color:var(--text)}#canvas{position:fixed;inset:0;width:100%;height:100%;cursor:crosshair;display:block}#controls{position:fixed;top:16px;right:16px;width:220px;background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:100;user-select:none}.fps-display{display:flex;align-items:baseline;gap:8px}.fps-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}.fps-value{font-family:var(--font-mono);font-size:28px;font-weight:500;color:var(--accent);line-height:1;min-width:3ch}.divider{height:1px;background:var(--surface-border)}.control-group{display:flex;flex-direction:column;gap:6px}.control-group label{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}.slider-row{display:flex;align-items:center;gap:8px}input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:#ffffff1a;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .15s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}.mono{font-family:var(--font-mono);font-size:12px;color:var(--text);min-width:36px;text-align:right}.button-row{display:flex;gap:6px}.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;border-radius:6px;border:1px solid var(--surface-border);background:transparent;color:var(--text-muted);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.mode-btn:hover{border-color:var(--accent);color:var(--accent)}.mode-btn.active{border-color:var(--accent);background:#06b6d41f;color:var(--accent)}.action-btn{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--surface-border);background:#ffffff0d;color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center}.action-btn:hover{background:#ffffff1a;border-color:#fff3}.action-btn.secondary{color:var(--text-muted);font-size:12px}.action-btn.secondary:hover{color:var(--text)}.hint{font-size:11px;color:var(--text-muted);line-height:1.6}.hint .accent{color:var(--accent);font-weight:600}