:root { color-scheme: dark; }
html, body { height: 100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0b0f14; color:#e6edf3; overflow:hidden; }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
button {
  background:#111827; color:#e6edf3; border:1px solid #243244; padding:8px 10px; border-radius:10px;
  cursor:pointer; font-weight:600;
}
button:hover { background:#0f172a; }
.toggle[aria-pressed="true"] { background:#0f172a; }
.toggle[aria-pressed="false"] { opacity:.85; }
.chip { border:1px solid #243244; border-radius:999px; padding:6px 10px; background:#0f172a; font-size:12px; opacity:.95; }
label { font-size: 12px; opacity:.9; display:flex; gap:8px; align-items:center; }
input[type="range"] { width: 160px; }
.stage { position: relative; width: 100vw; height: 100vh; }
canvas { display:block; width:100%; height:100%; background:#05070a; border:0; border-radius:0; image-rendering: pixelated; cursor: crosshair; }
.hud { position:absolute; top: 12px; right: 12px; left: auto; z-index: 10; pointer-events:none; width: fit-content; max-width: calc(100vw - 24px); }
.hud .controls { pointer-events:auto; justify-content:flex-end; }
code { background:#0f172a; padding:2px 6px; border-radius:8px; border:1px solid #243244; }