:root { color-scheme: dark; background: #161914; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main { position: fixed; inset: 0; }
.scene-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 45%; }
.soundtrack {
  position: fixed;
  right: clamp(16px, 3vw, 42px);
  bottom: clamp(16px, 3vw, 38px);
  z-index: 1;
}
.audio-toggle { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid #e4dfcd66; background: #151814d9; color: #e4dfcd; cursor: pointer; box-shadow: 0 3px 14px #0002; transition: background 160ms ease, border-color 160ms ease; }
.audio-toggle:hover { background: #151814; border-color: #e4dfcdb3; }
.audio-toggle:focus-visible { outline: 2px solid #e4dfcd; outline-offset: 4px; }
.audio-toggle:disabled { opacity: 0.6; cursor: wait; }
.audio-toggle .pause-icon { display: none; }
.audio-toggle.is-playing .pause-icon { display: block; }
.audio-toggle.is-playing .play-icon { display: none; }
.player-frame { position: fixed; top: 0; left: -10000px; width: 356px; height: 200px; pointer-events: none; }
.player-frame iframe { width: 356px; height: 200px; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .scene-image { object-position: 61% 45%; } }