:root{--px: 4px;--ground: oklch(.18 .012 60);--ground-d: oklch(.12 .01 60);--panel: oklch(.24 .012 60);--raised: oklch(.285 .013 60);--raised-2: oklch(.32 .013 60);--raised-3: oklch(.36 .013 60);--hairline: oklch(.34 .014 60);--text: oklch(.91 .012 85);--muted: oklch(.66 .012 75);--dim: oklch(.46 .012 70);--shadow: oklch(.1 .01 60);--inset-hi: oklch(.4 .013 60);--inset-lo: oklch(.14 .01 60);--accent: rgb(255, 110, 30);--accent-dk: rgb(150, 58, 12);--accent-lt: rgb(255, 170, 90);--acid: rgb(120, 214, 70);color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{min-height:100%}body{background-color:var(--ground-d);color:var(--text);font-family:JetBrains Mono,ui-monospace,monospace;background-image:linear-gradient(45deg,oklch(.1 .01 60) 25%,transparent 25% 75%,oklch(.1 .01 60) 75%),linear-gradient(45deg,oklch(.1 .01 60) 25%,transparent 25% 75%,oklch(.1 .01 60) 75%);background-size:8px 8px;background-position:0 0,4px 4px;-webkit-font-smoothing:none;font-smooth:never}#root{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--px) * 6)}.app{width:100%;max-width:1180px;background:var(--panel);border:var(--px) solid var(--hairline);box-shadow:calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--shadow)}.titlebar{display:flex;align-items:center;gap:calc(var(--px) * 2);height:calc(var(--px) * 10);padding:0 calc(var(--px) * 4);background:var(--raised);border-bottom:var(--px) solid var(--hairline)}.titlebar .wordmark{font-family:"Press Start 2P",monospace;font-size:15px;color:var(--text);text-shadow:2px 2px 0 var(--accent-dk);line-height:1;letter-spacing:1px;flex:1}.titlebar .wordmark b{color:var(--accent)}.winctl{display:flex;gap:calc(var(--px) * 1.5)}.winctl button{width:calc(var(--px) * 6);height:calc(var(--px) * 5);background:var(--raised-2);border:1px solid var(--hairline);cursor:pointer;display:grid;place-items:center;color:var(--muted);box-shadow:inset 1px 1px 0 var(--inset-hi);transition:background .1s ease-out,color .1s ease-out}.winctl button:hover{background:var(--accent-dk);color:var(--text)}.winctl button:active{box-shadow:inset 1px 1px 0 var(--inset-lo);transform:translate(1px,1px)}.winctl button svg{display:block}.body{display:grid;grid-template-columns:calc(var(--px) * 66) 1fr}.rail{background:var(--panel);border-right:var(--px) solid var(--hairline);padding:calc(var(--px) * 4);display:flex;flex-direction:column;gap:calc(var(--px) * 4)}.group{display:flex;flex-direction:column;gap:calc(var(--px) * 2)}.group>.ghead{font-family:Silkscreen,monospace;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);display:flex;align-items:center;gap:calc(var(--px) * 2)}.group>.ghead:after{content:"";flex:1;height:2px;background-image:repeating-linear-gradient(to right,var(--hairline) 0 4px,transparent 4px 8px)}.swatch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--px) * 2)}.tile{position:relative;display:flex;align-items:center;gap:calc(var(--px) * 2);padding:calc(var(--px) * 2);background:var(--raised);border:1px solid var(--hairline);color:var(--text);cursor:pointer;text-align:left;box-shadow:inset 1px 1px 0 var(--inset-hi);transition:background .1s ease-out}.tile:hover{background:var(--raised-2)}.tile .chip{width:calc(var(--px) * 6);height:calc(var(--px) * 6);flex:0 0 auto;border:1px solid var(--inset-lo);box-shadow:inset 1px 1px #fff3}.tile .meta{display:flex;flex-direction:column;gap:var(--px);min-width:0;flex:1}.tile .mname{font-family:Silkscreen,monospace;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1}kbd{font-family:Silkscreen,monospace;font-size:9px;color:var(--muted);background:var(--ground-d);border:1px solid var(--hairline);padding:2px 4px;align-self:flex-start;line-height:1;box-shadow:1px 1px 0 var(--inset-lo)}.tile.active{background:var(--accent-dk);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-lt),2px 2px 0 var(--shadow)}.tile.active .mname{color:var(--accent-lt)}.tile.active kbd{color:var(--accent-lt);border-color:var(--accent);background:var(--accent-dk)}.tile.active:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--accent-lt) 0 3px,transparent 3px 6px) top / 100% 1px no-repeat,repeating-linear-gradient(90deg,var(--accent-lt) 0 3px,transparent 3px 6px) bottom / 100% 1px no-repeat,repeating-linear-gradient(0deg,var(--accent-lt) 0 3px,transparent 3px 6px) left / 1px 100% no-repeat,repeating-linear-gradient(0deg,var(--accent-lt) 0 3px,transparent 3px 6px) right / 1px 100% no-repeat;animation:march .5s steps(6) infinite}@keyframes march{to{background-position:top 0 left 6px,bottom 0 right 6px,left 0 top 6px,right 0 bottom 6px}}.stage{display:flex;flex-direction:column;background:var(--ground);min-width:0}.mat{flex:1;position:relative;padding:calc(var(--px) * 8);display:flex;flex-direction:column;align-items:center;gap:calc(var(--px) * 3);background-color:#1d1815;background-image:linear-gradient(45deg,oklch(.265 .01 60) 25%,transparent 25% 75%,oklch(.265 .01 60) 75%),linear-gradient(45deg,oklch(.265 .01 60) 25%,transparent 25% 75%,oklch(.265 .01 60) 75%);background-size:20px 20px;background-position:0 0,10px 10px}.hud{align-self:stretch;display:flex;align-items:center;gap:calc(var(--px) * 2);font-family:Silkscreen,monospace;font-size:11px}.hud .stat{background:var(--raised);border:1px solid var(--hairline);padding:calc(var(--px) * 1.5) calc(var(--px) * 2.5);color:var(--text);box-shadow:1px 1px 0 var(--inset-lo);line-height:1}.hud .stat b{font-family:JetBrains Mono,monospace;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}.hud .stat.fps b{color:var(--acid)}.canvas-frame{width:100%;max-width:880px;border:var(--px) solid var(--hairline);box-shadow:inset 1px 1px 0 var(--raised-3),calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--shadow);background:#000;line-height:0}.sim{display:block;width:100%;max-width:880px;aspect-ratio:4 / 3;image-rendering:pixelated;touch-action:none;cursor:crosshair}.hint{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--muted);text-align:center}.hint b{color:var(--text);font-weight:600}.toolbar{display:flex;align-items:center;gap:calc(var(--px) * 5);padding:calc(var(--px) * 4);background:var(--raised);border-top:var(--px) solid var(--hairline);flex-wrap:wrap}.cluster{display:flex;align-items:center;gap:calc(var(--px) * 2)}.divider{width:2px;align-self:stretch;margin:0 var(--px);background-image:repeating-linear-gradient(to bottom,var(--hairline) 0 4px,transparent 4px 8px)}.btn{display:inline-flex;align-items:center;gap:calc(var(--px) * 2);height:calc(var(--px) * 10);padding:0 calc(var(--px) * 4);background:var(--raised-2);border:1px solid var(--hairline);color:var(--text);cursor:pointer;font-family:Silkscreen,monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;box-shadow:inset 2px 2px 0 var(--inset-hi),inset -2px -2px 0 var(--inset-lo),2px 2px 0 var(--shadow)}.btn:hover:not(:disabled){background:var(--raised-3)}.btn:active:not(:disabled){box-shadow:inset -2px -2px 0 var(--inset-hi),inset 2px 2px 0 var(--inset-lo);transform:translate(1px,1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn svg{display:block}.btn.icon-only{padding:0;width:calc(var(--px) * 10);justify-content:center}.btn.primary{background:var(--accent);color:#190f0a;border-color:var(--accent-lt);box-shadow:inset 2px 2px 0 var(--accent-lt),inset -2px -2px 0 var(--accent-dk),2px 2px 0 var(--shadow)}.btn.primary:hover{background:var(--accent-lt)}.btn.primary:active{box-shadow:inset -2px -2px 0 var(--accent-lt),inset 2px 2px 0 var(--accent-dk);transform:translate(1px,1px)}.meter{display:flex;flex-direction:column;gap:calc(var(--px) * 1.5);min-width:calc(var(--px) * 40)}.meter-head{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--px) * 2);font-family:Silkscreen,monospace;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.meter-head .lbl{display:inline-flex;align-items:center;gap:calc(var(--px) * 1.5)}.meter-head .lbl svg{display:block;fill:var(--muted)}.meter-head .val{font-family:JetBrains Mono,monospace;font-weight:600;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}.bars-wrap{position:relative}.bars{display:flex;gap:2px;height:calc(var(--px) * 5);padding:2px;background:var(--ground-d);border:1px solid var(--hairline);box-shadow:inset 1px 1px 0 var(--inset-lo)}.bars i{flex:1;background:var(--raised);box-shadow:inset 1px 1px 0 var(--inset-lo)}.bars i.on{background:var(--accent-dk);background-image:repeating-linear-gradient(to bottom,var(--accent) 0 2px,var(--accent-dk) 2px 4px);box-shadow:inset 1px 1px 0 var(--accent-lt)}.bars.speed i.on{background:#3a6e1e;background-image:repeating-linear-gradient(to bottom,var(--acid) 0 2px,rgb(58,110,30) 2px 4px);box-shadow:inset 1px 1px #beff8c}.bars-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.bars-input:disabled{cursor:not-allowed}.scale{display:flex;justify-content:space-between;font-family:Silkscreen,monospace;font-size:8px;color:var(--dim)}.toggle{display:flex;align-items:center;gap:calc(var(--px) * 2);height:calc(var(--px) * 10);padding:0 calc(var(--px) * 3);background:var(--raised-2);border:1px solid var(--hairline);cursor:pointer;box-shadow:inset 2px 2px 0 var(--inset-hi),inset -2px -2px 0 var(--inset-lo)}.toggle .led{width:calc(var(--px) * 3);height:calc(var(--px) * 3);flex:none;background:var(--dim);box-shadow:inset 1px 1px 0 var(--inset-lo)}.toggle .tname{font-family:Silkscreen,monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text)}.switch{margin-left:var(--px);width:calc(var(--px) * 8);height:calc(var(--px) * 4);flex:none;position:relative;background:var(--ground-d);border:1px solid var(--hairline);box-shadow:inset 1px 1px 0 var(--inset-lo)}.switch:after{content:"";position:absolute;top:0;left:0;width:calc(var(--px) * 4 - 2px);height:100%;background:var(--raised-3);box-shadow:inset 1px 1px 0 var(--inset-hi),inset -1px -1px 0 var(--inset-lo);transition:left .1s ease-out}.toggle.on{background:var(--accent-dk);border-color:var(--accent)}.toggle.on .led{background:var(--accent);box-shadow:inset 1px 1px 0 var(--accent-lt)}.toggle.on .tname{color:var(--accent-lt)}.toggle.on .switch{background:var(--accent-dk);border-color:var(--accent)}.toggle.on .switch:after{left:calc(var(--px) * 4);background:var(--accent);box-shadow:inset 1px 1px 0 var(--accent-lt),inset -1px -1px 0 var(--accent-dk)}.meter.disabled{opacity:.4;filter:saturate(.25)}.meter.disabled .val{color:var(--muted)}.meter.disabled .bars i.on{background:var(--dim);background-image:none;box-shadow:inset 1px 1px 0 var(--inset-lo)}.disabled-note{font-family:Silkscreen,monospace;font-size:8px;color:var(--dim);letter-spacing:1px}@media (max-width: 900px){#root{padding:calc(var(--px) * 3)}.body{grid-template-columns:1fr}.rail{border-right:none;border-bottom:var(--px) solid var(--hairline);flex-direction:row;flex-wrap:wrap;gap:calc(var(--px) * 3)}.group{flex:1 1 calc(var(--px) * 40)}.mat{padding:calc(var(--px) * 4)}}@media (prefers-reduced-motion: reduce){.tile,.btn,.winctl button,.switch:after{transition:none}.tile.active:after{animation:none}}