:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050505; }
.key-gate { position: fixed; inset: 0; }
.key-gate__loader { position: fixed; z-index: 10; inset: 0; display: flex; width: 100%; height: 100vh; height: 100dvh; align-items: center; justify-content: center; overflow: hidden; background: #000; opacity: 1; transform: scale(1); transition: opacity .4s ease, transform .4s ease; }
.key-gate__loader-inner { display: flex; align-items: center; justify-content: center; transform: scale(1.2); }
.key-gate__loader-logo { display: block; width: 160px; max-width: 60vw; opacity: .95; }
.key-gate__loader.is-leaving { opacity: 0; transform: scale(1.02); pointer-events: none; }
.key-gate__loader[hidden] { display: none !important; }
.key-gate__media { opacity: 0; }
.key-gate__unavailable { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; background: #050505; }
.key-gate__unavailable[hidden], .key-gate__content[hidden] { display: none !important; }
html[data-key-screen-state=ready] .key-gate__media { opacity: 1; }
.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; }
@media (prefers-reduced-motion: reduce) { .key-gate__loader { transition: none; } }