:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #000; color: #a4abb6; }
* { box-sizing: border-box; }
html, body, main { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
main { position: fixed; inset: 0; isolation: isolate; }
main.near-orbit { cursor: grab; }
main.dragging { cursor: grabbing; }
body.paused main.near-orbit { cursor: default; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#heavens { position: absolute; z-index: -1; inset: -12%; pointer-events: none; opacity: 0; transition: opacity 3.8s ease; background: radial-gradient(ellipse at 38% 48%, rgb(29 48 87 / .46), rgb(13 23 46 / .21) 32%, transparent 65%), radial-gradient(ellipse at 64% 36%, rgb(53 34 81 / .34), transparent 54%), radial-gradient(ellipse at 50% 51%, rgb(135 103 58 / .10), transparent 27%); }
body.cloud-started #heavens { opacity: 1; }
body[data-phase="arrival"] #heavens { opacity: 0; transition: none; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, transparent 28%, rgb(0 0 0 / .35) 100%); }
.arrival { position: absolute; left: 50%; top: 50%; width: 140px; height: 60px; transform: translate(-50%, -2px); display: flex; flex-direction: column; align-items: center; gap: 23px; pointer-events: none; opacity: 1; transition: opacity 1.8s ease; }
.arrival-light { display: block; width: 3px; height: 3px; border-radius: 50%; background: #c5beaa; box-shadow: 0 0 13px 3px #b8a17025, 0 0 38px 8px #ad976a0c; animation: arrive 2.7s ease-in-out infinite; }
.arrival-name { color: #788391; font-size: 8px; line-height: 1; letter-spacing: .46em; padding-left: .46em; }
body.cloud-started .arrival { opacity: 0; }
@keyframes arrive { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
footer { position: absolute; inset: auto 32px max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; opacity: 0; transition: opacity 3s ease; pointer-events: none; }
body.revealed footer { opacity: 1; }
body[data-phase="arrival"] footer { opacity: 0; transition: none; }
.wordmark { width: auto; height: 40px; padding: 0; border-radius: 0; font: inherit; font-size: 10px; font-weight: 400; letter-spacing: .42em; color: #69727f; user-select: none; pointer-events: auto; opacity: 1; }
.controls { display: flex; gap: 4px; pointer-events: auto; }
button { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; border: 1px solid transparent; background: transparent; border-radius: 50%; color: #687281; cursor: pointer; opacity: .72; transition: color .3s, opacity .3s, border-color .3s; -webkit-tap-highlight-color: transparent; }
button:hover { color: #d1dce7; opacity: 1; }
button:focus-visible { outline: 1px solid #91a3b9; outline-offset: 3px; color: #e0e8f0; opacity: 1; }
button svg { width: 21px; height: 21px; }
.play-icon { display: none; }
body.paused .pause-icon { display: none; }
body.paused .play-icon { display: block; }
#hint { position: absolute; inset: auto 0 43px; margin: 0; color: #656e7c; text-align: center; font-size: 10px; letter-spacing: .18em; pointer-events: none; opacity: 0; transition: opacity 2s ease; }
body.show-hint #hint { opacity: .8; }
#discovery { position: absolute; left: 50%; top: 63%; transform: translateX(-50%); margin: 0; width: max-content; max-width: 80vw; font-size: 11px; line-height: 2; font-weight: 300; letter-spacing: .12em; color: #b9b4a5; text-align: center; opacity: 0; pointer-events: none; transition: opacity 2.5s ease; }
#discovery .signal-title { display: block; margin-bottom: 10px; font-size: 8px; letter-spacing: .35em; color: #6f8596; text-transform: uppercase; }
#discovery .signal-message { display: block; }
#discovery .signal-code { display: block; margin-top: 9px; color: #81939c; letter-spacing: .55em; font-size: 10px; }
body.discovered #discovery { opacity: .85; }
.signal { position: absolute; z-index: 1; left: 50%; top: 50%; width: 36px; height: 36px; padding: 0; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: none; }
.signal span { display: block; width: 2px; height: 2px; border-radius: 50%; background: #b1cbdc; box-shadow: 0 0 8px 1px #7398ad55; }
.signal.is-visible { pointer-events: auto; }
.signal:focus-visible { opacity: .9 !important; border-color: #526d8055; }
.signal:hover { color: inherit; }
#depth { position: absolute; inset: auto 0 34px; display: flex; align-items: center; flex-direction: column; gap: 11px; opacity: 0; transition: opacity 1.8s; pointer-events: none; }
#depth-label { color: #77838e; font-size: 9px; letter-spacing: .22em; }
.depth-track { display: block; width: 38px; height: 1px; background: #262d34; }
#depth-progress { display: block; height: 1px; width: 100%; transform: scaleX(0); transform-origin: left; background: #9aafbd; }
body.show-depth #depth { opacity: .85; }
body.show-depth #hint, body[data-phase="arrival"] #hint, body[data-phase="arrival"] #depth, body[data-phase="arrival"] #discovery, body[data-phase="arrival"] .signal { opacity: 0 !important; transition: none; }
body[data-phase="arrival"] .signal { pointer-events: none; }
body[data-phase="arrival"] .arrival { opacity: 1; transition: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.no-script { position: absolute; top: 45%; width: 100%; padding: 24px; text-align: center; font-size: 13px; line-height: 1.8; }
@media (max-width: 600px) { footer { left: 22px; right: 17px; bottom: max(18px, env(safe-area-inset-bottom)); } #hint { bottom: 89px; font-size: 9px; } #depth { bottom: 83px; } .wordmark { font-size: 9px; letter-spacing: .3em; } #discovery { font-size: 10px; max-width: 85vw; } }
@media (prefers-reduced-motion: reduce) { footer, #hint, #depth, #discovery, #heavens, button { transition: none; } .arrival { display: none; } }