:root{color-scheme:dark;--ink:#f2f1ff;--muted:#a5a8c7;--blue:#93c7ff;--violet:#b49aff;--line:rgba(190,205,255,.22);--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#050611;color:var(--ink);font-family:var(--sans);font-weight:300}body{min-height:100svh;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}#cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:radial-gradient(ellipse at 70% 48%,#11162e 0%,#090b1b 35%,#050611 72%)}.film-grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:2}.film-grain{opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.vignette{background:radial-gradient(ellipse at center,transparent 34%,rgba(2,3,12,.34) 100%)}.topbar{position:fixed;z-index:10;top:0;left:0;right:0;height:84px;padding:0 clamp(22px,5.4vw,84px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(180,194,255,.07);transition:opacity .5s,transform .5s}.wordmark{text-decoration:none;color:#e9eaff;font-size:10px;letter-spacing:.23em;font-weight:500;display:flex;gap:12px;align-items:center}.mark-star{font-size:15px;color:#b6a5ff}.top-actions{display:flex;gap:28px;align-items:center}.chapter-label,.sound-state,.scroll-hint,.eyebrow{font-size:9px;letter-spacing:.22em;color:#9fa7c9}.icon-button{background:none;border:0;display:flex;gap:9px;align-items:center;cursor:pointer;color:#aeb4d4;font-size:13px;padding:12px 0}.sound-state{font-size:8px;letter-spacing:.15em}.scene{position:fixed;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:110px 7vw 76px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease,visibility 1s}.scene.active{opacity:1;visibility:visible;pointer-events:auto}.intro{justify-content:flex-start;padding-left:clamp(28px,13vw,200px)}.intro-copy{position:relative;max-width:720px;margin-top:-1vh}.eyebrow{margin:0 0 27px;color:#aeb7db}.hero-title,.scene h2{font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:1.12;margin:0}.hero-title{font-size:clamp(42px,6.5vw,92px)}em{font-weight:400;color:#b9b0ff}.intro-sub{font-size:clamp(13px,1.15vw,16px);line-height:1.9;color:#b1b6d0;margin:28px 0 34px;letter-spacing:.015em}.text-button{display:inline-flex;align-items:center;gap:24px;border:0;border-bottom:1px solid rgba(187,198,255,.48);background:none;padding:13px 0;color:#e4e7ff;font-size:11px;letter-spacing:.08em;cursor:pointer;transition:gap .35s,color .35s,border-color .35s}.text-button:hover,.text-button:focus-visible{gap:34px;color:white;border-color:#c2b8ff;outline:none}.arrow{font-size:16px;color:#b4a6ff}.scroll-hint{position:absolute;bottom:48px;left:clamp(28px,13vw,200px);display:flex;align-items:center;gap:13px;font-size:8px}.scroll-line{width:38px;height:1px;background:linear-gradient(90deg,#b6a4ff,transparent)}.scene-heading{position:absolute;top:18%;left:clamp(28px,10vw,150px);max-width:610px}.scene h2{font-size:clamp(34px,4.6vw,62px)}.scene-description{font-size:13px;line-height:1.85;color:#aab1d1;margin-top:23px}.star-instruction{position:absolute;left:clamp(28px,10vw,150px);bottom:18%;font-size:10px;letter-spacing:.06em;color:#b5bad6;display:flex;align-items:center;gap:10px}.pulse-dot{width:5px;height:5px;border-radius:50%;background:#c2b4ff;box-shadow:0 0 14px #a997ff;animation:pulse 2.4s infinite}.fragment-card{position:absolute;right:clamp(24px,10vw,150px);top:37%;width:min(340px,calc(100vw - 48px));padding:27px 28px 25px;background:linear-gradient(140deg,rgba(18,23,48,.82),rgba(9,11,29,.68));border:1px solid rgba(173,188,255,.2);backdrop-filter:blur(18px);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s;pointer-events:none}.fragment-card.open{opacity:1;transform:translateY(0);pointer-events:auto}.close-fragment{position:absolute;right:15px;top:12px;border:0;background:none;color:#aeb6d6;font-size:22px;cursor:pointer}.fragment-card .eyebrow{font-size:8px;margin-bottom:18px}.fragment-text{font-family:var(--serif);font-size:20px;line-height:1.65;color:#e5e5f9;margin:0}.fragment-rule{display:block;margin-top:22px;width:35px;height:1px;background:#a99bff}.continue-button{position:absolute;right:clamp(28px,10vw,150px);bottom:12%;opacity:.45;transition:opacity .3s}.continue-button:not(:disabled){opacity:1}.continue-button:disabled{cursor:not-allowed}.supernova-copy{position:absolute;left:clamp(28px,12vw,180px);top:34%;z-index:1;transition:opacity .7s}.supernova-copy h2{font-size:clamp(36px,4.7vw,64px)}.nova-core{position:absolute;left:72%;top:52%;width:14px;height:14px;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.nova-core .nova-flare{position:absolute;inset:-5px;border-radius:50%;background:#fff;box-shadow:0 0 20px 8px #b8caff,0 0 55px 22px #8c87ff,0 0 110px 45px rgba(111,137,255,.65)}.nova-ring{position:absolute;inset:-10px;border:1px solid rgba(210,220,255,.8);border-radius:50%;opacity:0}.supernova-scene.exploding .nova-core{opacity:1}.supernova-scene.exploding .nova-ring{animation:shockwave 3.2s cubic-bezier(.1,.45,.2,1) forwards}.supernova-scene.exploding .ring-two{animation-delay:.32s}.supernova-scene.exploding .nova-flare{animation:flare .9s ease-out forwards}.supernova-scene.exploding .supernova-copy{opacity:0}.after-nova{position:absolute;left:clamp(28px,12vw,180px);top:66%;opacity:0;pointer-events:none}.supernova-scene.nova-done .after-nova{opacity:1;pointer-events:auto;transition:opacity 1.5s 1s}.poem-wrap{width:min(760px,100%);max-height:100%;overflow:auto;scrollbar-width:none;text-align:center;padding:8px 10px 20px}.poem-wrap::-webkit-scrollbar{display:none}.poem-wrap .eyebrow{margin-bottom:18px}.poem-wrap h2{font-size:clamp(30px,3.7vw,48px);margin-bottom:32px}.poem-lines{font-family:var(--serif);font-size:clamp(17px,2vw,24px);line-height:1.75;color:#dfe3fb}.stanza{margin:0 0 25px;opacity:0;transform:translateY(12px);animation:verse-in 1.2s forwards}.stanza span{display:block}.stanza span+span{color:#bfc8ee}.poem-next{margin-top:8px;opacity:0;pointer-events:none}.poem-next.ready{opacity:1;pointer-events:auto;transition:opacity 1s}.final-scene{overflow:hidden}.final-orbit{position:absolute;width:min(48vw,560px);aspect-ratio:1;left:72%;top:50%;transform:translate(-50%,-50%);opacity:.8}.orbit{position:absolute;inset:0;border:1px solid rgba(163,181,255,.15);border-radius:50%;transform:rotate(-28deg) scaleY(.28)}.orbit-b{inset:12%;transform:rotate(35deg) scaleY(.42);border-color:rgba(183,151,255,.18)}.final-star{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:white;box-shadow:0 0 18px 6px #a5bfff,0 0 70px 28px rgba(130,130,255,.5);animation:star-breathe 4s ease-in-out infinite}.final-copy{position:relative;z-index:1;width:min(550px,60vw);margin-left:-30vw}.final-copy .eyebrow{margin-bottom:20px}.final-copy h2{font-size:clamp(44px,6vw,78px);margin-bottom:24px}.letter-body{font-size:13px;line-height:1.95;color:#c2c8e1;white-space:pre-line}.letter-body p{margin:0 0 15px}.signature{white-space:pre-line;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;color:#c2b7ff;margin:24px 0 0}.restart-button{margin-top:30px}.endnote{position:absolute;bottom:37px;right:clamp(25px,5vw,80px);font-family:var(--serif);font-style:italic;font-size:12px;color:#777fa5}.progress-track{position:fixed;z-index:12;bottom:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.06)}.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#778eff,#c5b1ff);transition:width 1s}.audio-note{position:fixed;z-index:20;right:22px;bottom:20px;font-size:10px;letter-spacing:.04em;color:#a8afcf;background:rgba(8,10,26,.82);padding:10px 13px;border:1px solid rgba(170,185,255,.14);opacity:0;transform:translateY(5px);pointer-events:none;transition:opacity .3s,transform .3s}.audio-note.show{opacity:1;transform:translateY(0)}.reveal-delay{animation:fade-up 1.5s .45s both}.hero-title{animation:fade-up 1.5s .15s both}.intro-sub{animation:fade-up 1.5s .75s both}.intro .text-button{animation:fade-up 1.5s 1s both}@keyframes fade-up{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}@keyframes shockwave{0%{opacity:.8;transform:scale(.2)}70%{opacity:.45}100%{opacity:0;transform:scale(95)}}@keyframes flare{0%{transform:scale(.5);opacity:.4}30%{transform:scale(2.8);opacity:1}100%{transform:scale(.7);opacity:.9}}@keyframes verse-in{to{opacity:1;transform:translateY(0)}}@keyframes star-breathe{0%,100%{opacity:.7;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@media(max-width:700px){.topbar{height:68px;padding:0 22px}.top-actions{gap:15px}.chapter-label{font-size:7px;letter-spacing:.14em}.sound-state{font-size:7px}.scene{padding:94px 25px 65px}.intro{padding-left:28px;justify-content:flex-start}.intro-copy{margin-top:2vh}.hero-title{font-size:clamp(43px,11.5vw,67px)}.intro-sub{font-size:13px}.scroll-hint{left:28px;bottom:29px}.scene-heading{top:17%;left:28px;right:24px}.scene h2{font-size:clamp(33px,8.7vw,47px)}.scene-description{font-size:12px}.star-instruction{left:28px;right:24px;bottom:14%;font-size:9px}.fragment-card{top:auto;bottom:22%;right:22px;width:calc(100% - 44px);padding:22px 23px}.fragment-text{font-size:18px}.continue-button{left:28px;right:auto;bottom:8%;font-size:10px}.supernova-copy{left:28px;right:22px;top:29%}.supernova-copy h2{font-size:clamp(36px,9vw,48px)}.nova-core{left:70%;top:67%}.after-nova{left:28px;top:73%}.poem-wrap{padding:0 2px 20px}.poem-wrap h2{font-size:30px;margin-bottom:25px}.poem-lines{font-size:18px;line-height:1.7}.stanza{margin-bottom:19px}.final-orbit{width:90vw;left:83%;top:26%;opacity:.52}.final-copy{width:100%;margin:0;align-self:flex-end;padding-bottom:6px}.final-copy h2{font-size:53px}.letter-body{font-size:12px;line-height:1.8}.signature{font-size:17px;margin-top:17px}.restart-button{margin-top:20px}.endnote{right:24px;bottom:20px;font-size:10px}.audio-note{right:12px;bottom:12px;max-width:calc(100vw - 24px)}}
@media(max-height:700px) and (min-width:701px){.scene{padding-top:92px;padding-bottom:55px}.scene-heading{top:14%}.star-instruction{bottom:10%}.fragment-card{top:31%}.supernova-copy{top:27%}.poem-wrap{max-height:80vh}.final-copy{max-height:78vh;overflow:auto}.hero-title{font-size:clamp(40px,5.5vw,70px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}#cosmos{opacity:.7}}