:root { color-scheme: light; background: #f5f5f2; color: #748096; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #f5f5f2; }
#scene { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage { position: absolute; left: 50%; top: 47%; width: min(78vw, 1080px); transform: translate(-50%, -50%); opacity: 0; transition: opacity 180ms ease; }
body.ready #stage { opacity: 1; }
#game { position: relative; transform-origin: top left; }
.runner-container { position: relative; width: 100%; height: 150px; outline: none; }
.runner-canvas { display: block; width: 100%; height: 150px; }
.runner-container:focus-visible::after { content: ''; position: absolute; inset: -10px; border: 1px solid #8c96a64d; border-radius: 3px; pointer-events: none; }
#entrance { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hidden, [hidden] { display: none !important; }
.slow-speed-option, .offline-runner-live-region, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  #stage { width: calc(100vw - 40px); top: 46%; }
}
@media (max-height: 420px) {
  #stage { top: 43%; width: min(78vw, 780px); }
}
@media (prefers-reduced-motion: reduce) {
  #stage { transition: none; }
}