:root { color-scheme: dark; background: #080808; color: #dedede; font-family: ui-monospace, 'Consolas', monospace; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main { position: fixed; inset: 0; }
#powder { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; touch-action: none; outline: none; }
#powder:focus-visible:not([data-pointer-focus]) { outline: 1px solid #686868; outline-offset: -6px; }
.controls { position: fixed; bottom: 20px; right: 21px; display: flex; gap: 4px; z-index: 2; }
button { width: 40px; height: 40px; display: grid; place-items: center; padding: 11px; color: #7b7b7b; background: transparent; border: 0; border-radius: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:hover:not(:disabled) { color: #eee; }
button:disabled { opacity: .28; cursor: default; }
button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible { outline: 1px solid #aaa; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; padding: 0; margin: -1px; border: 0; }
.fallback { position: fixed; top: 50%; width: 100%; text-align: center; color: #999; font-size: 12px; }
@media (max-width: 600px) { .controls { bottom: 16px; right: 15px; } }