:root{--surface: #1e1f24;--surface-2: #2a2b32;--surface-3: #34353d;--line: #3a3b44;--text: #ececee;--text-dim: #9a9ba4;--accent: #ff6a45;--accent-ink: #1a1206;--axis-x: #ff5a5a;--axis-y: #5ad07a;--axis-z: #5a9dff;--radius: 6px;--radius-sm: 4px;--t: .15s ease;--shadow: 0 6px 20px rgba(0, 0, 0, .28);--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#e8e8e8;font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased}#app-canvas{display:block;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#ui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.hidden{display:none!important}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}#toolbar{position:absolute;top:50%;left:14px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 7px;pointer-events:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.tool-sep{width:22px;height:1px;background:var(--line);margin:3px 0}.icon-btn{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--text-dim);cursor:pointer;transition:background var(--t),color var(--t),transform var(--t),border-color var(--t)}.icon-btn svg{width:21px;height:21px}.icon-btn:hover{background:var(--surface-2);color:var(--text);transform:translateY(-1px)}.icon-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.icon-btn:disabled{opacity:.35;cursor:default;transform:none;background:transparent;color:var(--text-dim)}.icon-btn .tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.96);white-space:nowrap;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:600;padding:4px 8px;border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t);z-index:5}.icon-btn .tip kbd{color:var(--text-dim);font-family:var(--font);margin-left:4px}.icon-btn:hover .tip{opacity:1;transform:translateY(-50%) scale(1)}.ind-chip{width:38px;min-height:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-3);color:var(--text);cursor:pointer;font-size:11px;font-weight:700;line-height:1.1;transition:background var(--t),transform var(--t)}.ind-chip:hover{background:var(--surface-2);transform:translateY(-1px)}.ind-chip .ind-sub{font-size:9px;font-weight:600;color:var(--text-dim)}.mode-chip.axis-x{color:var(--axis-x)}.mode-chip.axis-y{color:var(--axis-y)}.mode-chip.axis-z{color:var(--axis-z)}.popover{position:absolute;left:calc(100% + 10px);display:flex;gap:4px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);z-index:6}.popover button{min-width:26px;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background var(--t),color var(--t)}.popover button:hover{background:var(--surface-2)}.popover button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}#hud{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center}.hud-prompt{font-size:20px;font-weight:700;letter-spacing:.2px;padding:7px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.hud-timer{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.25)}.hud-timer.warn{color:var(--accent)}.hud-timer.pulse{animation:hud-pulse 1s ease-in-out infinite}@keyframes hud-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.16);opacity:.72}}.hud-boxdims{padding:3px 12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:700;border-radius:999px;font-variant-numeric:tabular-nums}#palette-bar{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);pointer-events:auto}.pal-head{display:flex;align-items:center;gap:8px}.pal-chip{width:22px;height:22px;border-radius:var(--radius-sm);border:2px solid var(--line);flex:none}.pal-label{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--text-dim)}.pal-collapse{margin-left:auto;width:22px;height:22px;padding:0;border:none;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-dim);font-size:12px;line-height:1;cursor:pointer;transition:background var(--t),color var(--t)}.pal-collapse:hover{background:var(--surface-3);color:var(--text)}.pal-body{display:flex;flex-direction:column;gap:8px}#palette-bar.collapsed .pal-body{display:none}.pal-ramp{display:grid;grid-template-columns:repeat(8,18px);grid-auto-rows:18px;gap:3px}.pal-customs{display:flex;flex-wrap:wrap;gap:3px;max-width:165px;max-height:90px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.pal-customs::-webkit-scrollbar{width:6px}.pal-customs::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}.swatch{width:18px;height:18px;padding:0;border:1.5px solid transparent;border-radius:3px;cursor:pointer;transition:transform var(--t)}.swatch:hover{transform:scale(1.12)}.swatch.selected{border-color:#fff;outline:1.5px solid #000}.pal-add{width:18px;height:18px;padding:0;border:1.5px dashed var(--line);border-radius:3px;background:var(--surface-2);color:var(--text-dim);font-size:14px;line-height:1;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}.pal-add:hover{background:var(--surface-3);color:var(--accent);border-color:var(--accent)}.color-picker{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);width:180px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.color-picker.hidden{display:none}.cp-sv{position:relative;width:160px;height:120px;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none}.cp-sv-cursor{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000080;transform:translate(-50%,-50%);pointer-events:none}.cp-hue{position:relative;width:160px;height:14px;border-radius:999px;cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cp-hue-thumb{position:absolute;top:50%;width:6px;height:20px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #00000080;transform:translate(-50%,-50%);pointer-events:none}.cp-row{display:flex;align-items:center;gap:6px}.cp-preview{width:24px;height:24px;flex:none;border-radius:var(--radius-sm);border:1px solid var(--line)}.cp-hex{flex:1;min-width:0;padding:5px 6px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.cp-hex:focus{outline:none;border-color:var(--accent)}.cp-add{padding:5px 10px;border:none;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600;cursor:pointer;transition:filter var(--t)}.cp-add:hover{filter:brightness(1.08)}.cp-add:disabled{background:var(--surface-3);color:var(--text-dim);cursor:not-allowed}.cp-msg{min-height:14px;font-size:11px;color:var(--accent)}.cp-msg:empty{display:none}#top-right{position:absolute;top:14px;right:14px;z-index:40;pointer-events:auto}.overflow-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;display:flex;flex-direction:column;padding:6px;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.overflow-menu button{text-align:left;padding:8px 10px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--t)}.overflow-menu button:hover{background:var(--surface-2)}.overflow-menu button:disabled{color:var(--text-dim);cursor:default;background:transparent}#legend{position:absolute;bottom:14px;right:14px;z-index:15;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto}.legend-panel{max-width:300px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);font-size:12px;line-height:1.7;color:var(--text-dim)}.legend-panel h4{color:var(--text);font-size:12px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}.legend-panel b{color:var(--text);font-weight:700}.legend-toggle{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-size:16px;font-weight:800;cursor:pointer;box-shadow:var(--shadow);transition:background var(--t),color var(--t),transform var(--t)}.legend-toggle:hover{background:var(--surface-2);color:var(--text);transform:translateY(-1px)}#hint{position:absolute;bottom:128px;left:50%;transform:translate(-50%);padding:7px 16px;border-radius:999px;background:#1e1f24b3;border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .5s ease}#hint.show{opacity:1}.overlay-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;background:#101114d1;color:var(--text);pointer-events:auto}.overlay-screen h1{font-size:46px;font-weight:800;letter-spacing:-.5px}.overlay-screen .tagline{font-size:17px;color:var(--text-dim)}.overlay-screen .btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.big-btn{font:inherit;font-size:17px;font-weight:700;padding:12px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--text);cursor:pointer;transition:background var(--t),transform var(--t),border-color var(--t)}.big-btn:hover{transform:translateY(-1px);background:var(--surface-3)}.big-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.start-legend{font-size:13px;color:var(--text-dim);line-height:1.9}#countdown{position:absolute;top:0;right:0;bottom:0;left:0;z-index:29;display:none;align-items:center;justify-content:center;background:#10111480;color:#fff;font-size:132px;font-weight:900;letter-spacing:2px;text-shadow:0 6px 24px rgba(0,0,0,.5);pointer-events:none}#countdown.active{display:flex}@media (max-width: 1100px){.pal-ramp{grid-template-columns:repeat(8,16px);grid-auto-rows:16px}.pal-customs{max-width:147px}.swatch,.pal-add{width:16px;height:16px}}