:root{--bg:#0e0f12;--panel:#16181d;--border:#262a32;--text:#e7e9ee;--muted:#9aa1ad;--accent:#6ea8fe}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);flex-direction:column;height:100vh;font:13px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}header{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:flex-end;gap:18px 24px;padding:12px 16px;display:flex}h1{letter-spacing:.2px;margin:0;font-size:14px;font-weight:600}h1 small{color:var(--muted);font-weight:400}.field{flex-direction:column;gap:4px;display:flex}.field>label{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:11px}.badge{text-transform:none;letter-spacing:0;color:var(--accent);opacity:.9;font-size:10px}.slider-val{font-variant-numeric:tabular-nums;min-width:2.4em}input[type=range]{width:150px;accent-color:var(--accent);cursor:ew-resize;height:30px}select{background:var(--panel);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:6px;min-width:170px;padding:6px 8px}.btns{gap:4px;display:flex}.btns button{background:var(--panel);color:var(--muted);border:1px solid var(--border);font:inherit;cursor:pointer;border-radius:6px;padding:6px 10px}.btns button:hover{color:var(--text)}.btns button.active{background:var(--accent);color:#0b1220;border-color:var(--accent);font-weight:600}.hint{text-transform:none;letter-spacing:0;color:var(--muted);opacity:.7}.colorctl{align-items:center;gap:8px;display:flex}.swatches{gap:6px;display:flex}.swatch{border:1px solid var(--border);cursor:pointer;border-radius:6px;justify-content:center;align-items:flex-end;width:64px;height:36px;transition:border-color .12s;display:flex;overflow:hidden}.swatch:hover{border-color:var(--accent)}.swatch.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.swatch span{color:#fff;text-align:center;backdrop-filter:blur(2px);background:#00000073;width:100%;padding:1px 0;font-size:9px}.nameinput{background:var(--panel);color:var(--text);border:1px solid var(--border);font:inherit;border-radius:6px;width:92px;padding:6px 8px}.minibtn{background:var(--panel);color:var(--muted);border:1px solid var(--border);font:inherit;cursor:pointer;border-radius:6px;padding:6px 10px}.minibtn:hover{color:var(--text)}.cpick{z-index:60;background:var(--panel);border:1px solid var(--border);user-select:none;touch-action:none;border-radius:10px;width:204px;padding:12px;display:none;position:absolute;box-shadow:0 12px 40px #0000008c}.cpick.open{display:block}.cpick-sv{cursor:crosshair;border-radius:6px;width:180px;height:120px;position:relative;overflow:hidden}.cpick-sv-sat,.cpick-sv-val{position:absolute;inset:0}.cpick-sv-sat{background:linear-gradient(90deg,#fff,#fff0)}.cpick-sv-val{background:linear-gradient(#0000,#000)}.cpick-svthumb{pointer-events:none;border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0009}.cpick-hue{cursor:ew-resize;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:7px;height:14px;margin-top:10px;position:relative}.cpick-huethumb{pointer-events:none;background:#fff;border-radius:3px;width:6px;height:18px;position:absolute;top:-2px;transform:translate(-3px);box-shadow:0 0 0 1px #00000080}.cpick-foot{align-items:center;gap:8px;margin-top:10px;display:flex}.cpick-prev{border:1px solid var(--border);border-radius:5px;flex:none;width:26px;height:26px}.cpick-hex{background:var(--bg);min-width:0;color:var(--text);border:1px solid var(--border);font:inherit;font-variant-numeric:tabular-nums;text-transform:lowercase;border-radius:6px;flex:1;padding:6px 8px}.spacer{flex:1}#fps{color:var(--muted);font-variant-numeric:tabular-nums}#meta{color:var(--muted);width:100%;font-size:12px}#fxbar{border-bottom:1px solid var(--border);background:#ffffff04;flex-wrap:wrap;align-items:center;gap:16px;padding:8px 16px;display:flex}#fxbar .check{color:var(--text);cursor:pointer;user-select:none;align-items:center;gap:6px;display:flex}#fxbar .check input{accent-color:var(--accent)}.fxfield{align-items:center;gap:8px;display:flex}.fxfield>label{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:11px}.fxfield input[type=range]{width:110px}.fxfield select{min-width:120px}.fxsep{background:var(--border);align-self:stretch;width:1px;margin:-2px 0}.fxhint{color:var(--muted);margin-left:auto;font-size:11px}.mut{color:var(--muted);font-size:11px}main{flex:1;min-height:0;padding:14px}#stage{border:1px solid var(--border);background:#000;border-radius:10px;width:100%;height:100%;position:relative;overflow:hidden}#stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}#stage[data-mode=split] #handle{display:flex}#stage[data-mode=side] #canvasOld{width:50%}#stage[data-mode=side] #canvasNew{width:50%;left:50%;clip-path:none!important}#stage[data-mode=side] .tag.new{left:auto;right:10px}#stage[data-mode=side] #divider{display:block}#stage[data-mode=old] #canvasNew,#stage[data-mode=old] .tag.new,#stage[data-mode=new] #canvasOld{display:none}#stage[data-mode=new] #canvasNew{clip-path:none!important}#stage[data-mode=new] .tag.old{display:none}.tag{z-index:5;pointer-events:none;color:#fff;letter-spacing:.3px;background:#0000008c;border-radius:6px;padding:4px 9px;font-size:11px;font-weight:600;position:absolute;top:10px}.tag.old{left:10px}.tag.new{left:calc(var(--split,50%))}#stage[data-mode=split] .tag.new{left:auto;right:10px}.tag small{opacity:.8;font-weight:400}#handle{z-index:6;cursor:ew-resize;background:#ffffffe6;justify-content:center;align-items:center;width:2px;display:none;position:absolute;top:0;bottom:0;left:50%;transform:translate(-1px);box-shadow:0 0 0 1px #0000004d}#handle:before{content:"⇄";color:#000;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 6px #0006}#divider{z-index:6;background:var(--border);width:1px;display:none;position:absolute;top:0;bottom:0;left:50%}footer{border-top:1px solid var(--border);color:var(--muted);padding:8px 16px;font-size:11px}footer b{color:var(--text);font-weight:600}#benchPanel{z-index:20;border:1px solid var(--border);backdrop-filter:blur(8px);background:#101217f5;border-radius:10px;width:460px;max-width:calc(100% - 52px);padding:12px 14px;display:none;position:absolute;bottom:26px;right:26px;box-shadow:0 12px 40px #00000080}#benchPanel.open{display:block}.bench-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.bench-head strong{font-size:13px}#benchStatus{color:var(--muted);text-align:right;font-size:11px}#benchTable{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:12px}#benchTable th{text-align:right;color:var(--muted);border-bottom:1px solid var(--border);padding:3px 6px;font-size:11px;font-weight:500}#benchTable th:first-child,#benchTable td:first-child{text-align:left}#benchTable td{border-bottom:1px solid #ffffff0a;padding:3px 6px}#benchTable tr.win td{color:#7ee2a8}#benchTable tr.ok td{color:#d6e27e}#benchTable td.err{color:#e2867e}