* { box-sizing: border-box; }
html, body { margin: 0; background: #0c1918; overflow: hidden; }
canvas { display: block; }
.canvas-button { position: absolute; border: 0; background: transparent; color: transparent; cursor: pointer; border-radius: 12px; }
.canvas-button:focus-visible { outline: 3px solid #fff0b3; outline-offset: 5px; }
.canvas-button:disabled { cursor: default; }
[hidden] { display: none !important; }
#controls { position: absolute; left: 24px; right: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
input[type=range] { width: 100%; height: 24px; margin: 0; accent-color: #bafd72; cursor: pointer; }
input:focus-visible { outline: 2px solid #fff0b3; border-radius: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 699px) { #controls { grid-template-columns: 1fr; gap: 20px; } }