:root { color-scheme: dark; font-family: "Segoe UI", system-ui, Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #17091f; }
body.transparent { background: transparent; }
main { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
canvas { display: block; width: min(100vw, 56.25vh); height: min(100vh, 177.777778vw); touch-action: none; }
.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; }
noscript { position: fixed; inset: 40% 10% auto; padding: 2rem; text-align: center; background: #5a1b62; color: #fff; border-radius: 1rem; }
#audio-unlock { position: fixed; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: 88vw; padding: 15px 22px; border: 1px solid #ff9ab5; border-radius: 22px; background: #3a0a34f5; color: #fff7ea; font: 800 clamp(12px, 2vh, 21px) "Segoe UI", system-ui, Arial, sans-serif; text-align: left; box-shadow: 0 12px 50px #17091f88, 0 0 30px #ff5d7e44; cursor: pointer; }
#audio-unlock[hidden] { display: none; }
#audio-unlock small { display: block; margin-top: 5px; color: #f6c8d6; font-size: .62em; font-weight: 500; }
#audio-unlock .audio-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #ff5d7e; color: #3a0a34; font-size: 22px; }
#audio-unlock:hover { background: #5a1452; }
#audio-unlock:focus-visible { outline: 3px solid #fff7ea; outline-offset: 5px; }