: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: #0f1b2d; }
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: #0f1b2d; 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 #ffc94d; border-radius: 22px; background: #0f1b2df5; color: #fff7ea; font: 800 clamp(12px, 2vh, 21px) "Segoe UI", system-ui, Arial, sans-serif; text-align: left; box-shadow: 0 12px 50px #00000088, 0 0 30px #ff4d6d44; cursor: pointer; }
#audio-unlock[hidden] { display: none; }
#audio-unlock small { display: block; margin-top: 5px; color: #ffe2b0; 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: #ff4d6d; color: #fff; font-size: 22px; }
#audio-unlock:hover { background: #16263f; }
#audio-unlock:focus-visible { outline: 3px solid #fff7ea; outline-offset: 5px; }