:root{--bg:#05050a;--panel:#10111cd1;--panel-border:#ffffff14;--text:#eef0f8;--text-dim:#9096b0;--accent:#6e8bff;--control:#ffffff12;--control-hover:#ffffff21;--positive:102, 224, 180;--negative:255, 99, 132;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:fixed;inset:0}.panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(14px);border-radius:18px;flex-direction:column;gap:18px;width:300px;padding:18px;transition:transform .25s,opacity .25s;display:flex;position:fixed;top:16px;bottom:16px;right:16px;overflow-y:auto}.panel.collapsed{opacity:0;pointer-events:none;transform:translate(calc(100% + 24px))}.panel-toggle{z-index:2;position:fixed;top:16px;left:16px}.panel-header{justify-content:space-between;gap:12px;display:flex}h1{letter-spacing:-.01em;margin:0;font-size:20px}h2{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;font-size:12px;font-weight:600}.subtitle{color:var(--text-dim);margin:2px 0 0;font-size:12px}.stats{font-variant-numeric:tabular-nums;color:var(--text-dim);white-space:nowrap;flex-direction:column;align-items:flex-end;font-size:12px;display:flex}#fps{color:var(--text);font-weight:600}section{flex-direction:column;gap:10px;display:flex}.button-row{flex-wrap:wrap;gap:6px;display:flex}button{appearance:none;border:1px solid var(--panel-border);background:var(--control);color:var(--text);font:inherit;cursor:pointer;border-radius:10px;padding:7px 11px;font-size:13px;transition:background .15s}button:hover{background:var(--control-hover)}button:focus-visible,input:focus-visible,.cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button[aria-pressed=true]{background:var(--accent);border-color:#0000}.slider{flex-direction:column;gap:4px;font-size:13px;display:flex}.slider span{color:var(--text-dim);justify-content:space-between;display:flex}.slider output{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent)}.matrix{-webkit-user-select:none;user-select:none;gap:3px;max-width:240px;display:grid}.cell,.swatch{aspect-ratio:1;border-radius:5px}.cell{cursor:pointer;border:0;min-width:0;padding:0;transition:transform .1s}.cell:hover{background-clip:padding-box;transform:scale(1.12)}.swatch{place-items:center;display:grid}.swatch:after{content:"";background:var(--c);width:55%;height:55%;box-shadow:0 0 8px var(--c);border-radius:50%}.hint,.panel-footer p{color:var(--text-dim);margin:6px 0 0;font-size:12px}.panel-footer{margin-top:auto}kbd{background:var(--control);border:1px solid var(--panel-border);border-radius:4px;padding:1px 5px;font:11px ui-monospace,monospace}.toast{background:var(--panel);border:1px solid var(--panel-border);opacity:0;pointer-events:none;border-radius:999px;padding:9px 16px;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px)}.toast.visible{opacity:1;transform:translate(-50%)}.unsupported{text-align:center;place-content:center;max-width:560px;margin:0 auto;padding:24px;display:grid;position:fixed;inset:0}.unsupported[hidden]{display:none}.unsupported .error{color:var(--text-dim);font:12px ui-monospace,monospace}@media (max-width:720px){.panel{width:auto;max-height:55vh;inset:auto 16px 16px}.panel.collapsed{transform:translateY(calc(100% + 24px))}}@media (prefers-reduced-motion:reduce){.panel,.toast,.cell{transition:none}}