:root{color-scheme:dark;--gold:#ffe75c;--cream:#fff9df;--muted:#bebaa3;--sans:'DM Sans',Arial,sans-serif;--script:'Caveat','Segoe Print',cursive}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020203;color:var(--cream);font-family:var(--sans)}
body{overflow-x:hidden}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid #fff5b0;outline-offset:5px}
[hidden]{display:none!important}
#experience{position:relative;min-height:100svh;isolation:isolate}
#galaxy{position:fixed;inset:0;width:100%;height:100%;touch-action:none;opacity:.32;transition:opacity 1.8s;z-index:-1}
body.started #galaxy{opacity:1;cursor:grab}
body.started #galaxy:active{cursor:grabbing}
.welcome{min-height:100svh;display:grid;place-items:center;padding:3rem 1.5rem;text-align:center;background:radial-gradient(ellipse at center,rgba(2,2,3,.92),rgba(2,2,3,.3))}
.welcome-inner{max-width:42rem}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.2em;color:#d7c66f;line-height:1.7;margin:0 0 1rem}
.tiny-star{display:block;color:var(--gold);font-size:2.4rem;margin:1.5rem auto;text-shadow:0 0 22px #e9cb46}
h1{font-family:var(--script);font-weight:500;line-height:1.04;font-size:clamp(3.5rem,8vw,6.5rem);margin:0 0 1.4rem;letter-spacing:-.035em}
h1 em{color:var(--gold);font-style:normal;text-shadow:0 0 28px #eed64760}
.intro-copy{font-size:1rem;color:var(--muted);line-height:1.7;margin:0 0 2rem}
.gold-button{border:1px solid #fff4a1;background:linear-gradient(120deg,#fff1a5,#f7d655);border-radius:999px;color:#29200b;padding:.9rem 1.9rem;min-height:48px;box-shadow:0 0 30px #ffd83c20;transition:box-shadow .2s,transform .2s}
.gold-button:hover{box-shadow:0 0 34px #ffd83c50;transform:translateY(-2px)}
.hint{color:#aaa591;font-size:.8125rem;margin-top:1.1rem}
.universe-ui{min-height:100svh;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;animation:appear 1.6s ease both}
.galaxy-title{text-align:center;padding:calc(1.75rem + env(safe-area-inset-top)) 1rem 2.5rem;background:linear-gradient(#020203 0%,#020203e8 65%,transparent)}
.galaxy-title .eyebrow{font-size:.75rem;margin-bottom:.65rem;letter-spacing:.24em}
.galaxy-title h2{font-family:var(--script);font-weight:500;font-size:clamp(2.9rem,5vw,4.8rem);line-height:1.02;letter-spacing:.015em;margin:0;color:#fff4ad;text-shadow:0 0 5px #f8e15e,0 0 22px #ffd8009c,0 0 65px #d6a91366}
.galaxy-title h2 span{color:#fff188}
.subtitle{font-family:var(--script);font-size:1.4rem;color:#d4cda8;margin:.7rem 0 0}
.scene-footer{text-align:center;padding:3.5rem 1rem calc(1.1rem + env(safe-area-inset-bottom));background:linear-gradient(transparent,#020203df 50%,#020203);display:flex;flex-direction:column;align-items:center;gap:.65rem}
.gesture-hint{font-size:.8125rem;color:#bcb59a;margin:0 0 .2rem;transition:opacity 1s}
.letter-button{pointer-events:auto;border:1px solid #9f883b80;border-radius:999px;background:#171407c9;color:#fff0a5;padding:.8rem 1.5rem;min-height:48px;font-size:.9375rem;backdrop-filter:blur(10px)}
.letter-button:hover{border-color:#ffe75c;background:#29210c}
.letter-button span{margin-left:.75rem;font-size:1.15rem}
.controls{display:flex;align-items:center;gap:.45rem;color:#77735e;flex-wrap:wrap;justify-content:center}
.controls button{pointer-events:auto;background:transparent;border:0;color:#c9c4aa;padding:.65rem .5rem;min-height:44px;font-size:.8125rem}
dialog{max-width:min(90vw,460px);width:460px;max-height:90svh;overflow:auto;text-align:center;background:radial-gradient(ellipse at 50% 25%,#29200f,#0f0e0b 65%);border:1px solid #8f743e80;border-radius:26px;padding:1.25rem 1.6rem 1.8rem;color:var(--cream);box-shadow:0 0 90px #c59b1620}
dialog[open]{animation:letter-in .65s ease both}
dialog::backdrop{background:#000a;backdrop-filter:blur(7px)}
.close-button{position:absolute;right:.5rem;top:.5rem;width:44px;height:44px;background:transparent;border:0;color:#c9bd92;font-size:1.8rem;border-radius:50%}
.final-bouquet{display:block;width:min(60vw,230px);height:auto;margin:0 auto .5rem;filter:drop-shadow(0 0 25px #ffe06922)}
dialog .eyebrow{font-size:.75rem;margin:.5rem 0}
dialog h2{font:500 clamp(2.5rem,6vw,3.3rem)/1.05 var(--script);color:#ffe981;margin:.5rem 0 1rem}
#final-message{font-size:1rem;line-height:1.75;color:#ded7bd;white-space:pre-line}
.signature{font:400 1.6rem/1.2 var(--script);color:#e3cc7e;margin:1rem 0 1.3rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{position:fixed;bottom:1rem;padding:1rem;background:#1d190e;color:#fff}
@keyframes appear{from{opacity:0}to{opacity:1}}
@keyframes letter-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:480px){.galaxy-title{padding-top:calc(1.25rem + env(safe-area-inset-top))}.galaxy-title h2{font-size:clamp(2.5rem,10.8vw,3.35rem)}.subtitle{font-size:1.2rem}.scene-footer{padding-top:2rem}.galaxy-title .eyebrow{font-size:.75rem;letter-spacing:.14em}}
@media(max-height:580px) and (min-width:600px){.galaxy-title{padding-top:.6rem}.galaxy-title h2{font-size:2.3rem}.galaxy-title .eyebrow,.subtitle{display:none}.scene-footer{padding-bottom:.25rem;padding-top:.5rem}.gesture-hint{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}