:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.sound-controls { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 12px; padding: 4px 10px; background: #08060de6; border: 1px solid #49335d; }
button { min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: #bba0ca; font: 12px monospace; cursor: pointer; }
button:hover, button:focus-visible { color: #b4d776; }
button:focus-visible, input:focus-visible { outline: 2px solid #b4d776; outline-offset: 2px; }
input[type="range"] { width: 72px; height: 36px; accent-color: #8daf4c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }