:root{--ink:#f9f3e8;--muted:#a9a5b5;--navy:#0b1026;--blue:#151a3a;--rose:#f26a6d;--gold:#f3c777;--line:rgba(255,255,255,.14);}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ink);font-family:'Noto Serif SC',serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:10;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:250px;height:250px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(242,106,109,.13),transparent 67%);transform:translate(-50%,-50%);mix-blend-mode:screen}.reading-progress{height:3px;width:0;background:linear-gradient(90deg,var(--rose),var(--gold));position:fixed;z-index:30;top:0;left:0;box-shadow:0 0 12px var(--rose)}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;position:absolute;top:0;left:0;right:0;z-index:5}.brand{display:flex;align-items:center;gap:10px}.brand-dot{width:8px;height:8px;background:var(--rose);border-radius:50%;box-shadow:0 0 14px var(--rose);animation:pulse 2s infinite}.music{color:var(--ink);background:none;border:1px solid var(--line);padding:10px 14px;font:inherit;letter-spacing:.1em;cursor:pointer;transition:.3s}.music:hover{border-color:var(--gold);transform:translateY(-2px)}.music span{color:var(--rose);font-size:17px;vertical-align:-2px}.music.active span{animation:spin 2.5s linear infinite;display:inline-block}.hero{min-height:100vh;display:grid;grid-template-columns:48% 52%;align-items:center;padding:120px 5vw 70px;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 50%,#23254e 0,#101535 34%,var(--navy) 68%)}.hero-copy{position:relative;z-index:2;max-width:600px;animation:fadeUp .9s .1s both}.eyebrow,.small-kicker,.section-label,.scroll-cue{font:500 11px 'DM Mono',monospace;letter-spacing:.2em;color:var(--gold)}h1{font-size:clamp(52px,8vw,115px);font-weight:900;line-height:1.08;margin:22px 0 26px;letter-spacing:-.06em}h1 em,h2 span{color:var(--rose);font-style:normal}.spark{font-size:.25em;color:var(--gold);vertical-align:top;margin-left:12px;animation:twinkle 2.1s infinite}.intro{font-size:18px;line-height:2;color:#c5c2cc;margin-bottom:36px}.primary{background:var(--rose);color:white;border:0;padding:16px 21px;font-family:'DM Mono',monospace;letter-spacing:.08em;font-size:12px;cursor:pointer;transition:.3s;box-shadow:0 12px 34px rgba(242,106,109,.2)}.primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 40px rgba(242,106,109,.35)}.primary span{font-size:17px;margin-left:17px}.hero-art{height:650px;position:relative;animation:fadeIn 1.2s .3s both}.hero-image{position:absolute;inset:4% 0 0 10%;background:linear-gradient(90deg,rgba(11,16,38,.8),transparent 40%),url('hero-generated.png') center/cover;border-radius:48% 48% 0 0;mix-blend-mode:screen;opacity:.9;transition:transform .6s ease}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-a{width:100px;height:100px;background:var(--rose);opacity:.72;top:13%;right:12%;box-shadow:0 0 80px 30px rgba(242,106,109,.38);animation:float 5s ease-in-out infinite}.orb-b{width:28px;height:28px;background:var(--gold);top:35%;left:8%;box-shadow:0 0 30px 12px rgba(243,199,119,.45);animation:float 4s 1s ease-in-out infinite}.orbit{position:absolute;border:1px solid rgba(243,199,119,.4);border-radius:50%;transform:rotate(-24deg)}.orbit-one{width:76%;height:55%;top:20%;left:10%;animation:orbitShift 9s linear infinite}.orbit-two{width:95%;height:26%;top:42%;left:-2%;border-color:rgba(242,106,109,.3);animation:orbitShift 14s linear reverse infinite}.date-stamp{position:absolute;right:2%;bottom:12%;font:500 26px 'DM Mono',monospace;line-height:.85;text-align:center;color:var(--gold)}.date-stamp small{font-size:11px;letter-spacing:.2em}.side-note{position:absolute;left:-2%;bottom:23%;font:11px 'DM Mono',monospace;line-height:1.8;letter-spacing:.15em;color:var(--gold);transform:rotate(-90deg);transform-origin:left bottom}.side-note span{color:var(--muted)}.scroll-cue{position:absolute;bottom:34px;left:5vw;color:var(--muted);animation:bob 1.7s infinite}.scroll-cue span{color:var(--rose);font-size:22px;margin-left:13px}.letter,.moments{padding:140px 10vw;max-width:1500px;margin:auto}.section-label{display:flex;gap:24px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}.section-label span:first-child{color:var(--rose)}.letter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center;margin-top:80px}.letter-image{height:590px;background:linear-gradient(0deg,rgba(11,16,38,.8),transparent 60%),url('https://images.unsplash.com/photo-1613025801198-24e7a4616265?auto=format&fit=crop&w=1200&q=80') center/cover;position:relative;filter:saturate(.8);transition:transform .7s,filter .7s}.letter-image:hover{transform:rotate(-1deg) scale(1.02);filter:saturate(1)}.image-caption{position:absolute;bottom:28px;left:30px;color:#fff;font-size:14px;line-height:1.8}.letter-copy h2,.moments h2,.ending h2{font-size:clamp(36px,5vw,70px);line-height:1.26;letter-spacing:-.06em;margin:18px 0 28px}.letter-copy p{font-size:16px;line-height:2.1;color:#bbb8c5;max-width:480px}.signature{margin-top:32px;color:var(--gold);font-style:italic}.moments{background:var(--blue);max-width:none;padding-left:10vw;padding-right:10vw}.moments-head{display:flex;justify-content:space-between;align-items:end;margin:70px 0 38px}.moments-head p{color:var(--muted);font-size:14px}.constellation{height:440px;max-width:1000px;margin:auto;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(242,106,109,.1),transparent 32%)}.star{position:absolute;color:var(--gold);font-size:28px;cursor:pointer;transition:.35s;text-shadow:0 0 12px var(--gold);z-index:2;animation:twinkle 2.5s infinite}.star:nth-child(2){animation-delay:.5s}.star:nth-child(3){animation-delay:1s}.star:nth-child(4){animation-delay:1.5s}.star:nth-child(5){animation-delay:2s}.star:hover,.star.active{color:var(--rose);transform:scale(1.5) rotate(25deg);text-shadow:0 0 25px var(--rose)}.s1{left:12%;top:24%}.s2{left:34%;top:12%}.s3{right:22%;top:28%}.s4{right:9%;bottom:18%}.s5{left:38%;bottom:20%}.constellation-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--muted);font-size:12px;line-height:1.7;letter-spacing:.15em}.constellation-center b{font-size:22px;color:var(--rose);letter-spacing:0}.constellation-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;transform-origin:left}.l1{width:38%;left:15%;top:30%;transform:rotate(-12deg)}.l2{width:31%;left:39%;top:24%;transform:rotate(21deg)}.l3{width:34%;left:42%;top:48%;transform:rotate(38deg)}.message-box{min-height:58px;text-align:center;padding:20px;color:var(--gold);font-size:16px}.ending{min-height:90vh;display:grid;place-content:center;text-align:center;position:relative;overflow:hidden;padding:100px 20px}.ending-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,109,.22),transparent 65%);filter:blur(10px);left:50%;top:50%;transform:translate(-50%,-50%);animation:breathe 4s ease-in-out infinite}.ending>*:not(.ending-glow){position:relative}.ending h2{margin:25px 0 36px}.light{background:var(--gold);color:var(--navy)}.footer-note{margin-top:130px;color:var(--muted);font-size:14px;line-height:2}.footer-note span{font:10px 'DM Mono',monospace;letter-spacing:.16em;color:var(--gold)}.modal{position:fixed;inset:0;background:rgba(4,6,18,.85);backdrop-filter:blur(14px);z-index:20;display:grid;place-content:center;opacity:0;pointer-events:none;transition:.35s}.modal.open{opacity:1;pointer-events:auto}.modal-card{background:#f7eee1;color:#201c31;padding:58px 7vw;max-width:650px;min-height:450px;position:relative;box-shadow:0 30px 100px #0008;animation:cardIn .5s both}.modal-card .small-kicker{color:#9b5360}.modal-card h2{font-size:clamp(36px,5vw,62px);line-height:1.3;margin:24px 0}.modal-card h2 em{color:var(--rose);font-style:normal}.modal-card p:not(.small-kicker){color:#675b66;line-height:2;font-size:16px}.handwrite{margin-top:35px;color:#b16b78;font-size:19px;font-style:italic}.close{position:absolute;top:13px;right:18px;border:0;background:none;font-size:30px;color:#9b5360;cursor:pointer}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--gold);color:var(--navy);padding:12px 18px;font-size:14px;opacity:0;transition:.3s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes float{50%{transform:translateY(-16px)}}@keyframes orbitShift{50%{opacity:.55}}@keyframes twinkle{50%{opacity:.42;filter:brightness(1.6)}}@keyframes pulse{50%{transform:scale(1.55);opacity:.5}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(8px)}}@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.16);opacity:.65}}@keyframes cardIn{from{opacity:0;transform:translateY(16px) rotate(1deg)}to{opacity:1;transform:none}}
@media(max-width:800px){.topbar{padding:0 6vw}.brand{font-size:10px}.music{padding:8px;font-size:9px}.hero{display:block;padding:140px 7vw 70px;min-height:900px}.hero-art{height:420px;margin-top:28px}.hero-image{inset:0 -16% 0 0}.side-note{left:0;bottom:28%}.date-stamp{right:8%;bottom:4%}.letter,.moments{padding:90px 7vw}.letter-grid{grid-template-columns:1fr;gap:50px;margin-top:52px}.letter-image{height:420px}.moments-head{display:block;margin:52px 0 25px}.moments-head p{margin-top:28px}.constellation{height:360px}.ending{min-height:720px}.footer-note{margin-top:90px}}