:root { color-scheme: dark; background: #020305; color: #f2be54; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; font-family: system-ui, sans-serif; background: #020305; }
.waiting-screen { position: fixed; inset: 0; overflow: hidden; background: #020305; }
.space-poster, .space-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.space-poster { display: block; }
.space-video { opacity: 0; background: #020305; }
.space-video.is-visible { opacity: 1; }
.sound-toggle, .stockereum-link { position: fixed; z-index: 3; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #cda759; -webkit-tap-highlight-color: transparent; }
.sound-toggle { left: max(16px, env(safe-area-inset-left)); padding: 0; cursor: pointer; opacity: .62; transition: opacity 180ms ease, background 180ms ease; }
.sound-toggle svg { width: 19px; height: 19px; }
.sound-toggle[aria-pressed="true"] { opacity: .82; }
.sound-toggle .sound-waves, .sound-toggle[aria-pressed="true"] .sound-off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-waves { display: inline; }
.sound-toggle:hover, .stockereum-link:hover { opacity: 1; background: #cda7590b; }
.sound-toggle:disabled { cursor: default; opacity: .3; }
.sound-toggle:focus-visible, .stockereum-link:focus-visible { outline: 1px solid #f2be54; outline-offset: 3px; opacity: 1; }
.stockereum-link { right: max(16px, env(safe-area-inset-right)); opacity: .72; transition: opacity 180ms ease, background 180ms ease; }
.stockereum-link svg { width: 25px; height: 25px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .sound-toggle, .stockereum-link { transition: none; } }