/* Austin Avian — Deep II, live. Fullscreen stage; everything else is quiet chrome that fades out of the way. */
:root { color-scheme: dark; --fg: #fff; --fg-dim: rgba(255, 255, 255, 0.55); --ui-bg: rgba(255, 255, 255, 0.08); --ui-bg-hover: rgba(255, 255, 255, 0.16); }
html, body { margin: 0; height: 100%; background: #000; color: var(--fg); overflow: hidden; overscroll-behavior: none; }
body { font: 14px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; background: #000; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
#sky:active { cursor: grabbing; }

#loading { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(260px, 60vw); text-align: center; color: var(--fg-dim); font-size: 12px; letter-spacing: 0.04em; transition: opacity 0.6s; }
#loading.done { opacity: 0; }
#loading .bar { height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 1px; overflow: hidden; margin-bottom: 10px; }
#loading .bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0.03); transition: transform 0.2s; }

#ui { position: absolute; inset: 0; pointer-events: none; }
.hint { position: absolute; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 10px)); transform: translateX(-50%); margin: 0; color: var(--fg-dim); font-size: 12px; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.8s; white-space: nowrap; }
.hint.on { opacity: 1; }
.controls { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); display: flex; gap: 8px; pointer-events: auto; opacity: 0.85; transition: opacity 0.6s; }
#ui.idle .controls { opacity: 0; }
#ui.idle .controls:hover, #ui.idle .controls:focus-within { opacity: 0.85; }
.controls button { appearance: none; border: 0; border-radius: 999px; padding: 7px 13px; background: var(--ui-bg); color: var(--fg); font: inherit; font-size: 12px; letter-spacing: 0.03em; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.controls button:hover { background: var(--ui-bg-hover); }
.controls button:disabled { opacity: 0.6; cursor: default; }
.controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; text-align: center; color: var(--fg-dim); padding: 24px; }
.fallback img { margin: 0 auto; width: 166px; height: auto; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { #loading, .hint, .controls { transition: none; } }