:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#02040a;color:#edf3ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}main{position:relative;z-index:1}#journey{height:1260svh;position:relative}#flight{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:90px 24px 70px;text-align:center}.invitation{opacity:0;transform:translateY(30px);transition:opacity 1.2s,transform 1.2s;max-width:600px}.invitation.visible{opacity:1;transform:none}.eyebrow{font-size:10px;letter-spacing:.32em;color:#9dadc6}h1,h2{font-weight:400;font-size:clamp(40px,6vw,76px);line-height:1.05;letter-spacing:-.055em;margin:25px 0}p{font-size:15px;line-height:1.8;color:#aab5c8;margin:0 0 30px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #dce5ff;outline-offset:6px}.primary{background:#e7edfa;color:#0a1323;border:1px solid #e7edfa;border-radius:99px;padding:17px 28px;font-size:13px;letter-spacing:.015em;transition:box-shadow .3s,transform .3s}.primary span{margin-left:30px}.primary:hover{box-shadow:0 0 35px #7fa7ff40;transform:translateY(-2px)}.instructions{font-size:11px;line-height:1.8;color:#738199;margin:26px 0 18px}.best{font-size:11px;color:#b6c8e5;min-height:16px;margin-bottom:24px}.credits{color:#65718a;text-decoration:none;font-size:10px}.credits:hover{color:#cddcff}#scroll-cue{position:absolute;top:calc(100svh - 75px);left:calc(50% - 10px);opacity:.35;transition:opacity .4s}#scroll-cue svg{stroke:#b6c8e5;stroke-width:1;fill:none;animation:float 3s ease-in-out infinite}#hud{position:fixed;inset:0;z-index:3;pointer-events:none}.hud-top{position:absolute;top:max(28px,env(safe-area-inset-top));left:30px;right:30px;display:flex;justify-content:space-between;align-items:flex-start}.hud-score{text-align:center;position:absolute;left:50%;transform:translateX(-50%)}.hud-score>span,.clock>span{font-size:28px;font-weight:300;letter-spacing:-.04em}.hud-top small{display:block;color:#7387a9;font-size:8px;letter-spacing:.2em;margin-top:8px}.clock{text-align:right}#exit,#pause{background:transparent;border:0;color:#a1b0c8;font-size:12px;padding:10px;pointer-events:auto}#exit span{margin-left:8px}#pause{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));right:30px}.reticle{width:5px;height:5px;border:1px solid #cce7ff70;border-radius:50%;position:absolute;left:calc(50% - 2px);top:calc(50% - 2px)}.flight-hint{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.18em;color:#8297b5;transition:opacity 2s;white-space:nowrap}#pause-overlay,#result{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;background:#02050cd9;backdrop-filter:blur(14px)}#result>div{max-width:600px}#result-text{margin:24px 0 30px}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.secondary{background:none;border:1px solid #54637a;border-radius:99px;color:#c6d4ec;padding:17px 25px;font-size:12px}[hidden]{display:none!important}.loading{position:fixed;inset:0;background:#02040a;z-index:5;display:grid;place-items:center;transition:opacity 1s}.loading span{height:3px;width:3px;background:#d6e6ff;border-radius:50%;box-shadow:0 0 20px #c5ddff;animation:pulse 2s infinite}.noscript{position:fixed;top:40%;left:20%;z-index:6}body.playing{overflow:hidden;touch-action:none}body.playing main{visibility:hidden}@keyframes float{50%{transform:translateY(6px)}}@keyframes pulse{50%{opacity:.15}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#scroll-cue svg,.loading span{animation:none}.invitation{transition:none}}@media(max-width:600px){.hud-top{left:16px;right:16px}#exit span{display:none}#pause{right:16px}.flight-hint{bottom:75px}h1{font-size:48px}#result h2{font-size:45px}}.birth-reveal{margin:28px 0 35px!important;padding-top:25px;border-top:1px solid #9db9e51c;font-size:12px!important;color:#b0bed4}.birth-reveal span{display:block;font-size:11px;color:#75849d;margin-top:12px}@media(max-width:600px){}

/* Phone composition and usable touch targets. */
@media(max-width:700px),(pointer:coarse){
 #flight{padding:72px 24px 48px;min-height:100svh}.invitation{width:min(100%,440px)}
 h1{font-size:clamp(36px,10vw,46px);margin:22px 0}p{font-size:14px;line-height:1.75}
 .instructions{font-size:12px;margin-top:23px}.eyebrow{font-size:10px;letter-spacing:.25em}
 .primary,.secondary{min-height:48px}.credits{min-height:44px;display:block;align-content:center}.credits{font-size:11px}.best{margin-bottom:12px}
 #exit,#pause{min-height:44px;min-width:44px;font-size:13px}
 .hud-top{top:max(16px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
 .hud-top small{font-size:9px;letter-spacing:.12em}.hud-score>span,.clock>span{font-size:30px}
 .flight-hint{bottom:max(86px,calc(env(safe-area-inset-bottom) + 66px));font-size:10px;letter-spacing:.12em}
 #pause{bottom:max(18px,env(safe-area-inset-bottom))}.reticle{width:6px;height:6px}
 #pause-overlay,#result{overflow-y:auto;padding:max(30px,env(safe-area-inset-top)) 24px max(30px,env(safe-area-inset-bottom))}
 #pause-overlay>div,#result>div{margin:auto;width:min(100%,480px)}#result h2{font-size:clamp(32px,9vw,44px)}
 .birth-reveal{font-size:12px!important;line-height:1.8}.result-actions{gap:10px}
}
@media(max-height:500px){
 #result h2,#pause-overlay h2{font-size:32px;margin:12px 0}.birth-reveal{margin:14px 0!important;padding-top:12px}.birth-reveal span{margin-top:5px}#result-text{margin:12px 0!important}
}

@media(max-width:700px),(pointer:coarse){#pause-overlay,#result{backdrop-filter:none;-webkit-backdrop-filter:none}#pause-overlay,#result{background:#02050cf2}}

.touch-help{display:none}@media(pointer:coarse){.desktop-help{display:none}.touch-help{display:inline}}

/* Keep the star camera fixed while Safari animates its address and tab bars. */
@media(max-width:699px),(pointer:coarse){
 #universe{height:100vh;height:100lvh;bottom:auto}
 .reticle{top:calc(var(--sky-height,100svh)/2 - 3px)}
}

#landing-note{position:fixed;z-index:3;bottom:max(9%,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center}#landing-note p{font-size:12px;color:#a4b7d2;letter-spacing:.04em;margin:0 0 10px}#skip-ending{min-height:44px;min-width:44px;background:none;border:0;color:#7f91af;font-size:11px}
#flight-map{display:block;width:min(100%,560px);height:140px;margin:0 auto 10px}#flight-map-caption{font-size:10px;letter-spacing:.04em;color:#7d94b4;margin:0 0 15px}#result h2{font-size:clamp(32px,4vw,48px);margin:18px 0}#result:not([hidden]){animation:arrival-reveal .7s ease both}#result:not([hidden]) .birth-reveal{animation:arrival-reveal .9s .65s both}
@keyframes arrival-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:700px),(pointer:coarse){#flight-map{height:115px}#flight-map-caption{font-size:10px}#result h2{font-size:34px;margin:15px 0}#result-text{margin:14px 0 20px}.birth-reveal{margin:20px 0!important}}
@media(max-height:500px){#flight-map{height:80px}#result h2{font-size:29px;margin:12px 0}}
@media(prefers-reduced-motion:reduce){#result:not([hidden]),#result:not([hidden]) .birth-reveal{animation:none}}

/* Let the star field show through the flight invitation. */
#invitation h1{color:rgba(237,243,255,.6)}
#invitation>p:not(.instructions){color:rgba(170,181,200,.68)}
#invitation .eyebrow{color:rgba(157,173,198,.65)}
#invitation .instructions{color:rgba(115,129,153,.8)}
#invitation .best{color:rgba(182,200,229,.7)}
#launch{background:rgba(231,237,250,.055);border-color:rgba(231,237,250,.3);color:rgba(231,237,250,.72);transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s}
#launch:hover,#launch:focus-visible{background:rgba(231,237,250,.1);border-color:rgba(231,237,250,.5);color:rgba(231,237,250,.9)}

/* Fade the invitation while the star field builds flight speed. */
body.playing.launching main{visibility:visible;pointer-events:none}
body.launching #invitation{opacity:0;transform:translateY(-12px);transition:opacity .7s ease,transform 1.2s ease}
body.launching #scroll-cue{opacity:0}

#return-veil{position:fixed;inset:0;z-index:6;background:#02040a;opacity:0;touch-action:none}
body.returning #hud,body.returning #result,body.returning #pause-overlay,body.returning #landing-note{opacity:0!important;transition:opacity .35s ease;pointer-events:none}

/* A scroll-paced, lingering arrival on phones; use the stable sky height. */
body.mobile-arrival #flight{display:block;min-height:180svh;padding:var(--invitation-top,25svh) 24px}
body.mobile-arrival #invitation{position:sticky;top:var(--invitation-top,25svh);margin:0 auto;opacity:var(--invitation-opacity,0);transform:translateY(var(--invitation-shift,18px));transition:none}
body.mobile-arrival.launching #invitation{opacity:0;transform:translateY(-12px);transition:opacity .7s ease,transform 1.2s ease}

/* A visible, gently staggered fade once the flight heading reaches the viewport. */
#invitation.text-fade-ready>:not(script){opacity:0;visibility:hidden;transition:opacity 1.6s ease;transition-delay:0s}
#invitation.text-fade-ready.text-revealed>:not(script){opacity:1;visibility:visible}
#invitation.text-fade-ready.text-revealed h1{transition-delay:.1s}
#invitation.text-fade-ready.text-revealed #launch{transition:opacity 1.6s ease .28s,background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
#invitation.text-fade-ready.text-revealed .instructions{transition-delay:.42s}
#invitation.text-fade-ready.text-revealed .best,#invitation.text-fade-ready.text-revealed .credits{transition-delay:.5s}
@media(prefers-reduced-motion:reduce){#invitation.text-fade-ready>:not(script){opacity:1;visibility:visible;transition:none;transition-delay:0s}}

/* Revealed children must not override the hidden invitation during flight. */
body.playing:not(.launching) #invitation,body.playing:not(.launching) #invitation *{visibility:hidden!important}

/* An uninterrupted stellar passage, isolated from the original sky renderer. */
body.stellar-active{overflow:hidden;touch-action:none}body.stellar-active main{visibility:hidden}#best{display:none}#stellar-journey{position:fixed;inset:0;z-index:8;background:#02040a;color:#d5deed;touch-action:none;overscroll-behavior:none}#stellar-surface,#stellar-dust{position:absolute;inset:0;width:100%;height:100lvh;pointer-events:none}#stellar-dust{z-index:1}.stellar-top{position:absolute;z-index:2;top:max(24px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.stellar-top button{background:#02040a30;border:1px solid #d5deed20;border-radius:24px;color:#d5deedb0;padding:11px 17px;min-height:44px;font-size:11px;backdrop-filter:blur(10px)}#stellar-phase{font-size:8px;letter-spacing:.24em;color:#c4d5ec70;text-shadow:0 1px 12px #000}#stellar-note{position:absolute;z-index:2;bottom:12%;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.08em;pointer-events:none}#stellar-end{position:absolute;z-index:2;bottom:16%;left:20px;right:20px;text-align:center}#stellar-end p{font-size:12px;line-height:1.9;margin:18px 0 25px;color:#bfcee4aa}#stellar-end .secondary{font-size:11px;padding:12px 18px;margin:4px;background:#02040a35;border-color:#a9c4e630;color:#bfcee4aa}.stellar-track{position:absolute;z-index:3;left:10%;right:10%;bottom:max(30px,env(safe-area-inset-bottom));height:30px;display:flex;align-items:center}.stellar-track input{appearance:none;-webkit-appearance:none;width:100%;height:1px;background:#abc6ee30;cursor:pointer;outline-offset:10px}.stellar-track input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:6px;height:6px;background:#d5e6ffb0;border-radius:50%;box-shadow:0 0 12px #d5e6ff60}.stellar-track input::-moz-range-thumb{width:6px;height:6px;border:0;background:#d5e6ffb0;border-radius:50%}.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}#stellar-error{position:absolute;z-index:5;top:40%;left:10%;right:10%;text-align:center;font-size:12px}@media(max-width:699px),(pointer:coarse){.stellar-top{left:16px;right:16px;top:max(16px,env(safe-area-inset-top))}#stellar-phase{font-size:7px;letter-spacing:.12em}#stellar-end{bottom:18%}#stellar-end .eyebrow{font-size:8px}}
#stellar-fallback{position:absolute;inset:0;width:100%;height:100lvh;z-index:0;pointer-events:none}
#stellar-journey:not([hidden]){animation:stellar-enter 1s ease both;transition:opacity .7s ease}#stellar-journey.stellar-leaving{animation:none;opacity:0;pointer-events:none}@keyframes stellar-enter{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){#stellar-journey:not([hidden]){animation:none;transition:none}}

/* The stellar passage belongs to the page scroll, with no launch gate or scroll lock. */
#flight,body.mobile-arrival #flight{display:block;height:1000svh;min-height:0;padding:0;position:relative}#flight #invitation{display:none!important}#stellar-journey{pointer-events:none;touch-action:pan-y;overscroll-behavior:auto}#stellar-journey:not([hidden]){animation:none;transition:none}#stellar-journey .stellar-top button,#stellar-journey #stellar-end button,#stellar-journey #stellar-end a,#stellar-progress{pointer-events:auto;touch-action:manipulation}.stellar-track{pointer-events:none}.stellar-about{display:block;margin:22px auto 0;width:fit-content;min-height:44px;align-content:center;font-size:10px;color:#8da0bf99;text-decoration:none}@media(max-width:699px),(pointer:coarse){#flight,body.mobile-arrival #flight{height:1100svh}}

/* The star is rendered into the original universe canvas, never a replacement scene. */
#stellar-journey{background:transparent!important}#stellar-surface,#stellar-dust,#stellar-fallback{display:none!important}