@font-face{font-family:Manrope;src:url('manrope-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('manrope-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Cormorant;src:url('cormorant-cyrillic.woff2') format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Cormorant;src:url('cormorant-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}
:root{--night:#180a15;--ink:#fff5f1;--petal:#ffd5df;--pink:#ec6595;--muted:#ba929f;--line:rgba(255,213,223,.18);--sans:Manrope,'Segoe UI',sans-serif;--display:Cormorant,'Times New Roman',serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--night);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--petal);outline-offset:6px}button{touch-action:manipulation}button:disabled{cursor:wait}button,svg{flex-shrink:0}[hidden]{display:none!important}button svg{pointer-events:none}::selection{background:#ac3c6a;color:#fff}#universe,.ambient,.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.ambient{background:radial-gradient(ellipse at 72% 47%,#53172e66,transparent 54%),radial-gradient(ellipse at 18% 95%,#40132d44,transparent 60%);transition:background 1.4s}body[data-scene="1"] .ambient{background:radial-gradient(ellipse at 50% 20%,#782d3e66,transparent 70%)}body[data-scene="3"] .ambient{background:radial-gradient(ellipse at 50% 48%,#7a164a77,transparent 65%)}.grain{z-index:2;opacity:.035;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%3Cpath fill='white' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.topbar{position:fixed;z-index:10;top:0;left:0;width:100%;height:108px;padding:24px 5.3vw;display:flex;align-items:center;justify-content:space-between;padding-top:max(24px,env(safe-area-inset-top))}.dedication{font-size:13px;display:flex;gap:6px;align-items:center;color:var(--petal)}.dedication svg{width:13px;height:13px;fill:none;stroke:var(--petal);stroke-width:1.3;margin-left:7px}.progress{display:flex;gap:7px;position:absolute;left:50%;transform:translateX(-50%)}.progress button{border:0;background:none;display:flex;align-items:center;justify-content:center;width:33px;height:44px;padding:0 2px}.progress span{display:block;height:2px;width:100%;background:#ffd5df30;border-radius:5px;transition:background .5s,box-shadow .5s}.progress button[aria-current] span{background:var(--petal);box-shadow:0 0 12px #ffb0c766}.progress button.visited span{background:#ffd5df80}.icon-button{background:transparent;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;transition:background .2s}.icon-button:hover{background:#ffffff0c}.sound-icon{width:18px;height:18px;fill:none;stroke:var(--petal);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.sound-icon .waves{display:none}#sound[aria-pressed="true"] .waves{display:block}#sound[aria-pressed="true"] .mute{display:none}.scene{position:absolute;inset:0;min-height:100%;opacity:0;z-index:3;transition:opacity .65s ease;pointer-events:none}.scene.active{opacity:1;pointer-events:auto}.scene-copy{width:100%;position:relative}.intro{display:flex;align-items:center;padding:100px 9.7vw}.intro-copy{max-width:630px;margin-top:-18px}.quiet-note{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 28px}.display{font-family:var(--display);font-weight:400;letter-spacing:-.046em;line-height:.88;margin:0;text-wrap:balance}.intro .display{font-size:clamp(90px,8.9vw,158px)}.intro-description{font-size:13px;line-height:1.9;color:#d4adb8;margin:32px 0 29px;max-width:380px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:var(--petal);color:#381326;border:1px solid transparent;border-radius:60px;min-height:54px;padding:15px 25px;font-size:12px;font-weight:600;line-height:1.4;box-shadow:0 8px 40px #ef78a012;transition:background .2s,transform .2s,box-shadow .2s}.primary:hover{background:#ffe6ec;box-shadow:0 8px 50px #ef78a026}.primary:active{transform:scale(.97)}.button-heart{font-family:serif;font-size:23px;font-weight:400;line-height:.8}.intro-whisper{position:absolute;right:8%;bottom:20%;font-family:var(--display);font-size:25px;line-height:1.15;color:#edb7c6b3;transform:rotate(-7deg)}.touch-hint{position:absolute;right:23.5%;bottom:13%;font-size:10px;color:#b37d9166}.bottomline{position:fixed;z-index:5;bottom:0;width:100%;padding:23px 5.3vw max(23px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;color:#a375886e;font-size:10px;pointer-events:none;transition:opacity .5s}.birthday,.wishes,.love{display:flex;align-items:center;justify-content:center;padding:110px 24px 100px}.centered{text-align:center;max-width:920px;margin:auto}.centered .display{font-size:clamp(70px,7.5vw,126px)}.centered .quiet-note{margin-bottom:30px}.body-copy{font-size:13px;line-height:1.95;color:#dfb9c6;margin:32px 0}.birthday .display{line-height:.92}.birthday .primary{margin-top:6px}.wishes .display{font-size:clamp(64px,6.5vw,105px);line-height:.95}.wish-choices{display:flex;justify-content:center;gap:44px;margin:35px auto 21px}.wish-choice{border:0;background:transparent;padding:8px 0;color:#9c7085;min-width:95px;display:flex;align-items:center;flex-direction:column;gap:10px;transition:color .3s,transform .3s}.wish-choice svg{width:58px;height:42px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.wish-choice span{font-size:10px}.wish-choice.selected{color:var(--petal);transform:translateY(-3px)}.wish-choice:hover{color:var(--petal)}.wish-message{font-size:12px;line-height:1.9;color:#d5aebb;min-height:64px;max-width:520px;margin:0 auto 20px;text-wrap:balance;transition:opacity .2s}.text-button{background:none;border:0;border-bottom:1px solid #ecb6c145;border-radius:0;padding:12px 0;font-size:11px;line-height:1.7;color:var(--petal);display:inline-flex;gap:16px;align-items:center}.text-button:hover{border-color:var(--petal)}.love .quiet-note{font-size:11px}.love .love-title{font-size:clamp(110px,12vw,190px);line-height:.83;letter-spacing:-.055em;color:#ffe1e8;text-shadow:0 0 80px #f088ac26}.love .body-copy{margin:35px 0 25px}.love-last{display:inline-block;margin-top:10px}.finale-scroll{height:100%;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:130px 24px 60px;scrollbar-width:thin;scrollbar-color:#8d4962 transparent}.letter-heading{text-align:center;margin-bottom:40px}.letter-heading .quiet-note{margin-bottom:15px}.letter-heading .display{font-size:clamp(48px,5.4vw,80px)}.letter{position:relative;max-width:610px;margin:0 auto;background:var(--ink);color:#4c2f3c;padding:46px 52px 40px;border-radius:3px;box-shadow:0 15px 100px #08010644;transform:rotate(-.6deg);background-image:linear-gradient(120deg,#fff8f4,#f9e9e6)}.letter::before{content:'';position:absolute;inset:7px;border:1px solid #be879522;pointer-events:none}.letter-salutation{display:flex;align-items:center;justify-content:space-between;font-family:var(--display);font-size:36px;color:#7d3b54;line-height:1.2;margin-bottom:24px}.letter-salutation svg{width:26px;fill:none;stroke:#ac6179;stroke-width:1}.letter p{font-size:13px;line-height:2;margin:0 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}#our-photo{width:185px;margin:30px auto 34px;padding:7px 7px 17px;background:#fffcf7;box-shadow:0 4px 14px #7f45521a;transform:rotate(4deg)}#our-photo img{display:block;width:100%;max-height:220px;object-fit:cover}#our-photo figcaption{font-size:9px;text-align:center;line-height:1.6;margin:12px 2px 0;color:#967482}.letter-signature{display:flex;flex-direction:column;gap:5px;margin-top:28px}.letter-signature>span{font-size:11px;color:#946b7b}.letter-signature strong{font-family:var(--display);font-size:30px;font-weight:500;color:#7d3b54;overflow-wrap:anywhere}.closing{margin:35px 0 15px;text-align:center;font-size:11px;color:var(--muted);line-height:1.8}.finale-scroll>#replay{display:flex;margin:0 auto}.final-heart{font-family:serif;color:#bc6d8c88;font-size:38px;display:block;text-align:center;margin:34px 0 8px}body[data-scene="4"] .bottomline{opacity:0}body[data-scene="4"] .topbar{background:linear-gradient(var(--night) 40%,transparent)}.toast{position:fixed;z-index:20;left:50%;bottom:75px;transform:translate(-50%,12px);padding:10px 18px;background:#351526f2;border:1px solid var(--line);border-radius:30px;font-size:11px;color:var(--petal);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.noscript{position:fixed;inset:0;z-index:99;background:var(--night);padding:30vh 12vw;font-size:24px;line-height:1.6}.scene.entering .scene-copy{animation:arrive .85s cubic-bezier(.2,.65,.3,1) both}.scene.entering .letter-heading{animation:arrive .85s both}.scene.entering .letter{animation:letter-arrive 1.1s .12s both}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes letter-arrive{from{opacity:0;transform:translateY(25px) rotate(1deg)}to{opacity:1;transform:translateY(0) rotate(-.6deg)}}
@media(min-width:1500px){.intro-copy{margin-left:4vw}}@media(max-width:700px){.topbar{height:86px;padding-left:23px;padding-right:23px}.dedication{font-size:11px;gap:4px}.dedication svg{width:11px;margin-left:3px}.progress{gap:3px}.progress button{width:21px}.icon-button{width:38px;height:38px}.sound-icon{width:16px;height:16px}.intro{padding:110px 30px 85px;align-items:flex-end}.intro-copy{margin:0;max-width:100%;padding-bottom:0}.intro .display{font-size:clamp(81px,23.5vw,106px);line-height:.87;letter-spacing:-.043em}.intro .quiet-note{margin:0 0 22px;font-size:10px}.intro-description{font-size:11px;margin:24px 0 24px;line-height:1.9;max-width:270px}.primary{font-size:11px;min-height:52px;padding:15px 22px;gap:18px}.intro-whisper{right:24px;bottom:auto;top:22%;font-size:19px}.touch-hint{display:none}.bottomline{padding:18px 23px max(18px,env(safe-area-inset-bottom));font-size:8px}.birthday,.wishes,.love{padding:103px 22px 80px}.centered .quiet-note{font-size:10px;line-height:1.8;margin-bottom:29px}.centered .display{font-size:clamp(69px,19.5vw,88px)}.body-copy{font-size:11px;margin:28px 0;line-height:2}.wishes .display{font-size:clamp(55px,16.2vw,73px);line-height:.98}.wish-choices{gap:18px;margin:31px auto 20px}.wish-choice{min-width:88px}.wish-choice svg{width:51px;height:36px}.wish-choice span{font-size:9px}.wish-message{font-size:10px;min-height:64px;max-width:330px;margin-bottom:19px}.text-button{font-size:10px;gap:10px}.love .love-title{font-size:clamp(106px,30vw,140px)}.love .quiet-note{font-size:9px;max-width:280px;margin:0 auto 36px}.love .body-copy{margin:35px 0 27px}.love .primary{font-size:10px;gap:12px;padding:15px 18px}.finale-scroll{padding:115px 19px 35px}.letter-heading{margin-bottom:30px}.letter-heading .quiet-note{font-size:9px}.letter-heading .display{font-size:48px}.letter{padding:32px 28px}.letter-salutation{font-size:32px;margin-bottom:22px}.letter p{font-size:12px;line-height:1.95}.closing{font-size:10px;max-width:270px;margin:28px auto 10px}.toast{font-size:10px;max-width:90vw;white-space:normal;text-align:center}.desktop-break{display:none}}
@media(max-height:740px) and (max-width:700px){.intro{padding-bottom:65px;padding-top:90px}.intro .display{font-size:75px}.intro .quiet-note{margin-bottom:18px}.intro-description{margin:18px 0}.intro-whisper{top:20%;font-size:17px}.birthday,.wishes,.love{padding-top:85px;padding-bottom:55px}.centered .display{font-size:65px}.centered .quiet-note{margin-bottom:20px}.wishes .display{font-size:55px}.wish-choices{margin-top:22px;margin-bottom:10px}.wish-message{margin-bottom:8px}.love .love-title{font-size:105px}.love .body-copy{margin:25px 0 20px}.body-copy{margin:22px 0}.topbar{height:75px}.bottomline{padding-bottom:14px}}
@media(max-height:590px) and (min-width:701px){.scene:not(.finale){overflow-y:auto;padding-top:100px;padding-bottom:70px;align-items:flex-start}.intro .display{font-size:80px}.centered .display{font-size:75px}.love .love-title{font-size:110px}.intro-copy{margin:0}.topbar{height:80px}.wish-choices{margin:24px auto 15px}.body-copy{margin:20px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.touch-hint{display:none}}
/* Reserve the status bar and home indicator when opened full-screen on iPhone. */
body{position:relative;height:100dvh}#story{position:absolute;inset:0}.topbar{height:calc(108px + env(safe-area-inset-top));padding-top:calc(24px + env(safe-area-inset-top))}
@media(max-width:700px){.topbar{height:calc(86px + env(safe-area-inset-top))}.birthday,.wishes,.love{padding-top:calc(103px + env(safe-area-inset-top));padding-bottom:calc(80px + env(safe-area-inset-bottom))}.finale-scroll{padding-top:calc(115px + env(safe-area-inset-top));padding-bottom:calc(35px + env(safe-area-inset-bottom))}.intro{padding-bottom:calc(85px + env(safe-area-inset-bottom))}}
@media(max-height:740px) and (max-width:700px){.topbar{height:calc(75px + env(safe-area-inset-top))}.birthday,.wishes,.love{padding-top:calc(85px + env(safe-area-inset-top));padding-bottom:calc(55px + env(safe-area-inset-bottom))}.intro{padding-bottom:calc(65px + env(safe-area-inset-bottom))}}
@media(max-height:640px) and (max-width:700px){.love .love-title{font-size:90px}.love .quiet-note{margin-bottom:20px}.love .body-copy{margin:23px 0 18px}}