:root{color-scheme:dark;--night:#100a1d;--ink:#171022;--rose:#f59abb;--rose-light:#ffd5e5;--lavender:#c8b5f0;--gold:#f5d5a0;--muted:#d6c9da;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',sans-serif;--script:'Parisienne',cursive}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-height:100svh;background:var(--night);color:#fff8fb;font-family:var(--sans);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}.sky{position:fixed;inset:0;z-index:-3;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#341b37 0,transparent 48%),radial-gradient(ellipse at 12% 26%,#302046 0,transparent 36%),radial-gradient(ellipse at 83% 62%,#2b1538 0,transparent 34%),linear-gradient(155deg,#0d0918,#171025 58%,#21132a)}.moon{position:absolute;width:clamp(72px,10vw,122px);aspect-ratio:1;border-radius:50%;right:12%;top:12%;background:radial-gradient(circle at 35% 35%,#fff8db,#f8dbb6 67%,#f4caa7);box-shadow:0 0 25px #ffe6c866,0 0 90px #f1c4d22b;opacity:.88}.moon:after{content:"";position:absolute;inset:-15px;border:1px solid #f6e4d35c;border-radius:50%;box-shadow:0 0 35px #eecfca28}.stars,.stars:after{position:absolute;inset:0;content:"";background-image:radial-gradient(1.5px 1.5px at 18% 22%,#fff 50%,transparent 60%),radial-gradient(1px 1px at 73% 17%,#f9d8e7 50%,transparent 60%),radial-gradient(1.7px 1.7px at 85% 70%,#fff 50%,transparent 60%),radial-gradient(1px 1px at 41% 76%,#fff 50%,transparent 60%),radial-gradient(1px 1px at 54% 39%,#dfc7ff 50%,transparent 60%),radial-gradient(1px 1px at 29% 62%,#ffe4bd 50%,transparent 60%);background-size:320px 280px;animation:twinkle 5s ease-in-out infinite alternate;opacity:.8}.stars:after{background-position:130px 77px;opacity:.55;animation-delay:2.2s}.topbar{position:fixed;z-index:10;left:0;right:0;top:0;padding:25px clamp(20px,6vw,86px);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;color:var(--rose-light);font-size:1.05rem}.brand span{font-size:.66rem;letter-spacing:.2em}.sound-toggle{border:1px solid #fff3;background:#ffffff0a;border-radius:99px;padding:9px 15px;color:#f9eaf3;font-size:.77rem;cursor:pointer;backdrop-filter:blur(12px);transition:background .25s,border-color .25s}.sound-toggle:hover{background:#ffffff18;border-color:#fff6}.sound-toggle span{margin-left:7px}
main{height:100svh;position:relative}.chapter{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:98px 24px 76px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px) scale(.985);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),visibility .75s}.chapter.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}.welcome-content,.response-content{text-align:center;position:relative;z-index:2;width:min(900px,100%)}.eyebrow{text-transform:uppercase;letter-spacing:.26em;font-size:.64rem;color:var(--lavender);font-weight:500;margin:0 0 22px}.display{font-family:var(--serif);font-size:clamp(3rem,7.4vw,6.6rem);font-weight:400;line-height:.96;letter-spacing:-.025em;margin:0;text-shadow:0 8px 40px #09030c77}.display em{font-weight:500;color:var(--rose-light);font-style:italic;text-shadow:0 0 32px #f59abb49}.intro-copy{color:var(--muted);font-weight:300;line-height:1.85;font-size:clamp(.9rem,1.5vw,1.06rem);margin:27px auto 22px}.intro-copy span{color:var(--gold)}.date-pill{display:inline-block;border:1px solid #efb1cf5d;background:#ffffff08;border-radius:99px;padding:9px 17px;color:#ffe1ed;letter-spacing:.16em;font-size:.7rem;margin:2px 0 27px;box-shadow:inset 0 0 18px #fff1}.primary-btn{border:1px solid #ffffff50;border-radius:99px;background:linear-gradient(110deg,#f4a0c0,#d7bafa 65%,#f4d39e);color:#26152e;padding:14px 25px;font-weight:600;cursor:pointer;box-shadow:0 12px 40px #df89b431,inset 0 1px #fff8;transition:transform .25s,box-shadow .25s,filter .25s}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 17px 48px #df89b45c;filter:brightness(1.06)}.primary-btn:focus-visible,.answer-btn:focus-visible,.text-btn:focus-visible,.back-btn:focus-visible,.sound-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.primary-btn span{margin-left:10px}.made-by{margin:38px 0 0;color:#c8b8ce;font-size:.72rem;letter-spacing:.04em}.made-by span{color:#f4d9e5}.welcome-orbit{position:absolute;width:min(64vw,690px);aspect-ratio:1;border:1px solid #ffc8e00d;border-radius:50%;left:50%;top:54%;transform:translate(-50%,-50%);pointer-events:none}.welcome-orbit:before,.welcome-orbit:after{content:"";position:absolute;border:1px solid #ffc8e00a;border-radius:50%;inset:9%}.welcome-orbit:after{inset:19%}.welcome-orbit span{position:absolute;right:8%;top:23%;color:#ffc7dc38;font-size:1.3rem;animation:orbitPulse 3s ease-in-out infinite}
.chapter-card{position:relative;width:min(790px,100%);max-height:100%;overflow:auto;text-align:center;padding:clamp(25px,4.2vh,48px) clamp(22px,5vw,62px);border:1px solid #f8d3e326;border-radius:30px;background:linear-gradient(145deg,#fff1fa11,#ffffff05 55%,#f4d6a00a);box-shadow:0 30px 110px #05030c5e,inset 0 1px #fff1;backdrop-filter:blur(18px);scrollbar-width:thin;scrollbar-color:#d39abd55 transparent}.chapter-card .display{font-size:clamp(2.5rem,5.8vw,4.8rem)}.chapter-copy{max-width:620px;margin:18px auto 0;color:var(--muted);font-size:.96rem;font-weight:300;line-height:1.9}.birthday-art{height:145px;max-width:350px;margin:-5px auto 14px;position:relative}.cake{position:absolute;width:155px;height:120px;bottom:1px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 9px 16px #f296be27)}.cake-plate{position:absolute;bottom:0;left:3px;width:149px;height:13px;border-radius:50%;background:linear-gradient(#ffdded,#cf90ba)}.cake-bottom{position:absolute;bottom:11px;left:12px;width:132px;height:51px;border-radius:6px 6px 15px 15px;background:linear-gradient(100deg,#bfa9ea,#f2aed0 53%,#d9b4ee);box-shadow:inset 0 -8px #9969ae55}.cake-top{position:absolute;bottom:58px;left:22px;width:112px;height:38px;border-radius:12px 12px 6px 6px;background:linear-gradient(100deg,#f5b8d1,#ffe1e9 52%,#f3afd1);box-shadow:inset 0 -6px #dc83b1}.cake-top:before{content:"";position:absolute;top:0;left:0;right:0;height:12px;border-radius:50%;background:#fff1e7}.candle{position:absolute;bottom:95px;left:74px;width:8px;height:31px;border-radius:4px;background:repeating-linear-gradient(135deg,#fff2c5 0 5px,#e995ba 5px 9px);z-index:2}.flame{position:absolute;z-index:3;bottom:125px;left:72px;width:13px;height:19px;border-radius:90% 10% 90% 10%;background:linear-gradient(#fff9bd,#ffb665);transform:rotate(-40deg);filter:drop-shadow(0 0 12px #ffcb75);animation:flicker .75s ease-in-out infinite alternate}.balloon{position:absolute;display:grid;place-items:center;width:35px;height:44px;border-radius:55% 55% 48% 48%;font-size:1.05rem;color:#fff9;box-shadow:inset -7px -6px 15px #7b3f6b37,0 0 20px #e87fab31;animation:float 4s ease-in-out infinite}.balloon:after{content:"";position:absolute;width:1px;height:44px;top:44px;background:#f7d7e255}.balloon-one{left:38px;top:27px;background:linear-gradient(135deg,#f7a7c9,#a882dc)}.balloon-two{right:38px;top:17px;background:linear-gradient(135deg,#ffe3ae,#ed8cae);animation-delay:.7s}.balloon-three{right:82px;top:56px;width:28px;height:36px;background:linear-gradient(135deg,#b5a7ec,#e2a2cb);animation-delay:1.3s}.flower{position:absolute;color:#f7c8de;text-shadow:0 0 18px #f59abb75;animation:float 4s ease-in-out infinite}.flower-one{left:0;bottom:8px;font-size:1.4rem}.flower-two{right:4px;bottom:19px;font-size:1.15rem;animation-delay:1s}.cake-sparkle{position:absolute;color:var(--gold);animation:twinkle 1.6s ease-in-out infinite alternate}.sparkle-one{left:80px;top:24px}.sparkle-two{right:73px;top:73px}.date-caption{font-size:.56rem;margin:0 0 14px;color:#e6bfd7}.script-line{font-family:var(--script);font-size:1.8rem;color:var(--rose-light);margin:12px auto 15px}.chapter-actions{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:22px}.back-btn{border:0;background:none;color:#d7c9dc;font-size:.83rem;cursor:pointer;padding:12px 5px;opacity:.82;transition:opacity .2s,color .2s}.back-btn:hover{opacity:1;color:#fff}.back-btn span{margin-left:5px}.chapter-actions .primary-btn{padding:12px 21px}
.letter-wrap{width:min(780px,100%);text-align:center}.letter-wrap>.display{font-size:clamp(2.8rem,6vw,5.1rem);margin-bottom:24px}.letter-paper{position:relative;text-align:left;margin:0 auto 15px;width:100%;min-height:285px;padding:clamp(25px,4.5vw,48px);border:1px solid #f4bcd844;border-radius:5px 25px 25px 25px;background:linear-gradient(135deg,#fffafc14,#fff8fc06);box-shadow:12px 13px 0 #f2b9d40b,0 20px 75px #05030b4f;backdrop-filter:blur(14px);overflow:hidden}.letter-paper:before{content:"";position:absolute;inset:12px;border:1px solid #ffe0ed12;border-radius:3px 17px 17px 17px;pointer-events:none}.letter-text{position:relative;z-index:1;max-width:660px;color:#f0e5ef;font-family:var(--serif);font-size:clamp(1.05rem,1.8vw,1.24rem);line-height:1.72;white-space:pre-wrap}.letter-text p{margin:0 0 14px}.letter-text .salutation{font-size:1.5rem;color:var(--rose-light);font-style:italic}.letter-text .letter-sign{margin:20px 0 0;font-style:italic}.letter-text .letter-sign strong{font-family:var(--script);font-size:1.9rem;color:var(--rose-light);font-weight:400}.letter-heart{position:absolute;z-index:0;color:#f6b5d844}.heart-a{right:35px;top:20px;font-size:1.9rem}.heart-b{right:70px;bottom:23px;color:#f4d6a089}.type-cursor{display:inline-block;width:1px;height:1em;vertical-align:-.15em;background:var(--rose-light);animation:blink .8s steps(1) infinite}.type-cursor.done{display:none}.letter-wrap .chapter-actions{margin-top:15px}
.proposal-card{width:min(790px,100%);padding-top:clamp(24px,3.5vh,42px);padding-bottom:clamp(20px,3vh,32px)}.heart-orbit{width:65px;height:65px;border-radius:50%;border:1px solid #ffbad86c;display:grid;place-items:center;margin:0 auto 17px;color:var(--rose-light);font-size:2rem;box-shadow:0 0 32px #ed8db333;animation:pulse 2.2s ease-in-out infinite}.proposal-copy{max-width:600px;margin-top:15px}.question-wrap{margin:20px auto 0;padding:17px 15px 12px;max-width:600px;border-top:1px solid #fff2}.question{font-family:var(--serif);font-size:clamp(1.45rem,3.5vw,2.35rem);line-height:1.15;color:#ffe6f0;margin:0}.gentle-note{color:#c1b3cb;font-size:.75rem;margin:12px 0 0}.answer-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px 0 0}.answer-btn{border:1px solid #fff3;border-radius:99px;padding:12px 17px;background:#ffffff09;color:#fff1f7;font-size:.71rem;letter-spacing:.045em;font-weight:600;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}.answer-btn:hover{transform:translateY(-2px);background:#ffffff16;border-color:#fff7;box-shadow:0 8px 24px #0003}.answer-btn span{margin-left:5px}.answer-btn.yes{border:1px solid #f8c6e399;background:linear-gradient(110deg,#f1a0c1,#cfb6f5);color:#28172d;box-shadow:0 7px 25px #e895ba36}.answer-btn.yes:hover{box-shadow:0 10px 35px #e895ba5b}.single-back{justify-content:center;margin-top:7px}
.response-content{max-width:760px}.response-art{font-size:4.5rem;line-height:1;color:var(--rose-light);text-shadow:0 0 45px #f59abb7a;margin-bottom:28px;animation:pulse 2s infinite}.response-content .display{font-size:clamp(3rem,7vw,5.8rem)}.response-content .chapter-copy{font-size:1.04rem;margin:22px auto}.text-btn{border:0;background:transparent;color:var(--rose-light);padding:14px 9px;cursor:pointer;font-size:.88rem}.text-btn span{margin-left:8px}.text-btn:hover{text-shadow:0 0 20px #f59abb80}.response-chapter:has(.celebration) .response-art{color:#ffcae0}.confetti-layer{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-25px;animation:confettiFall 4.5s linear forwards;filter:drop-shadow(0 0 5px currentColor)}.ambient-hearts{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.ambient-heart{position:absolute;bottom:-35px;color:#ffbcd622;text-shadow:0 0 15px #f59abb33;animation:floatUp linear forwards}.progress{position:fixed;z-index:11;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;width:min(225px,55vw);opacity:.75}.progress-track{height:2px;background:#ffffff22;flex:1;overflow:hidden;border-radius:3px}.progress-track span{display:block;width:25%;height:100%;background:linear-gradient(90deg,var(--rose),var(--lavender),var(--gold));box-shadow:0 0 10px #ffc2dc;transition:width .65s ease}.progress-label{font-size:.6rem;letter-spacing:.14em;color:#e8d9e7}.progress-label span{color:#897b91;padding:0 3px}.entrance{animation:enter .95s both}.entrance:nth-child(2){animation-delay:.12s}.entrance:nth-child(3){animation-delay:.23s}.entrance:nth-child(4){animation-delay:.33s}.entrance:nth-child(5){animation-delay:.44s}.entrance:nth-child(6){animation-delay:.54s}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes twinkle{from{opacity:.35}to{opacity:.95}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes flicker{from{transform:rotate(-40deg) scale(.91)}to{transform:rotate(-32deg) scale(1.08)}}@keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px #f59abb27)}50%{transform:scale(1.07);filter:drop-shadow(0 0 22px #f59abb70)}}@keyframes orbitPulse{0%,100%{transform:scale(.85);opacity:.45}50%{transform:scale(1.18);opacity:1}}@keyframes blink{50%{opacity:0}}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.8}90%{opacity:.65}100%{transform:translateY(-110vh) rotate(260deg);opacity:0}}@keyframes confettiFall{to{transform:translateY(112vh) rotate(720deg);opacity:0}}
@media(max-width:700px){.topbar{padding:18px 18px}.brand span{font-size:.57rem;letter-spacing:.16em}.sound-toggle{padding:8px 11px}.chapter{padding:82px 17px 70px}.moon{right:10%;top:13%;width:68px}.welcome-orbit{width:110vw;top:52%}.display{font-size:clamp(2.8rem,12vw,5rem)}.chapter-card{border-radius:23px;padding:23px 20px}.chapter-card .display{font-size:clamp(2.55rem,10vw,4rem)}.chapter-copy{font-size:.9rem;line-height:1.75}.birthday-art{height:125px;transform:scale(.9);margin-top:-4px;margin-bottom:5px}.date-caption{font-size:.5rem}.script-line{font-size:1.65rem}.chapter-actions{margin-top:14px}.chapter-actions .primary-btn{padding:12px 16px;font-size:.82rem}.letter-wrap>.display{font-size:clamp(2.65rem,10vw,4rem);margin-bottom:18px}.letter-paper{min-height:300px;padding:24px 22px}.letter-text{font-size:1.05rem;line-height:1.64}.letter-text p{margin-bottom:10px}.letter-text .salutation{font-size:1.35rem}.letter-text .letter-sign strong{font-size:1.7rem}.proposal-card{padding:22px 19px 17px}.heart-orbit{width:55px;height:55px;font-size:1.8rem;margin-bottom:14px}.proposal-copy{font-size:.88rem;line-height:1.7;margin-top:12px}.question-wrap{margin-top:15px;padding-top:13px}.question{font-size:1.55rem}.answer-buttons{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px}.answer-btn{width:100%;padding:12px}.single-back{margin-top:4px}.progress{bottom:17px}.response-content .display{font-size:clamp(2.9rem,12vw,4.6rem)}}
@media(max-height:760px) and (min-width:701px){.chapter{padding-top:78px;padding-bottom:55px}.chapter-card{padding-top:21px;padding-bottom:20px}.birthday-art{height:119px;transform:scale(.82);margin:-12px auto 0}.chapter-card .display{font-size:clamp(2.4rem,5vw,4rem)}.chapter-copy{margin-top:12px}.proposal-card{padding-top:19px;padding-bottom:12px}.heart-orbit{width:53px;height:53px;margin-bottom:10px}.proposal-copy{margin-top:10px}.question-wrap{margin-top:14px;padding-top:12px}.answer-buttons{margin-top:16px}.letter-paper{min-height:230px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Viewport-safe chapter layout: navigation always has its own reserved row. */
.chapter{padding-top:calc(78px + env(safe-area-inset-top));padding-bottom:calc(82px + env(safe-area-inset-bottom));}
.chapter-card,.letter-wrap{min-height:0;max-height:100%;}
.letter-wrap{display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.letter-wrap>.eyebrow{flex:none;margin-bottom:clamp(8px,1.5vh,18px);}
.letter-wrap>.display{flex:none;font-size:clamp(2rem,5vw,4.5rem);margin-bottom:clamp(8px,1.5vh,18px);}
.letter-paper{flex:1 1 auto;min-height:0;max-height:min(52vh,440px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(16px,3vh,34px) clamp(18px,4vw,42px);scrollbar-width:thin;scrollbar-color:#d39abd66 transparent;}
.letter-text{font-size:clamp(.88rem,1.45vw,1.15rem);line-height:1.52;}
.letter-text p{margin-bottom:clamp(7px,1vh,12px);}
.letter-wrap>.chapter-actions{flex:none;margin-top:clamp(7px,1.4vh,14px);padding-bottom:2px;}
.chapter-actions .primary-btn{white-space:nowrap;}
.progress{bottom:calc(12px + env(safe-area-inset-bottom));}
.analytics-notice{position:fixed;z-index:11;bottom:calc(3px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:92vw;text-align:center;color:#c8b8ce88;font-size:.54rem;letter-spacing:.025em;pointer-events:none;}
@media(max-width:700px){.analytics-notice{font-size:.49rem;bottom:calc(2px + env(safe-area-inset-bottom));}}
@media(max-width:700px){
 .chapter{padding-top:calc(72px + env(safe-area-inset-top));padding-bottom:calc(74px + env(safe-area-inset-bottom));}
 .letter-wrap{justify-content:flex-start;padding-top:1vh;}
 .letter-wrap>.eyebrow{font-size:.54rem;letter-spacing:.19em;margin-bottom:8px;}
 .letter-wrap>.display{font-size:clamp(2rem,8.2vw,3.3rem);margin-bottom:9px;}
 .letter-paper{max-height:none;height:auto;flex:1 1 0;min-height:0;padding:16px 17px;}
 .letter-text{font-size:clamp(.84rem,3.5vw,1rem);line-height:1.45;}
 .letter-text .salutation{font-size:1.22rem;}
 .letter-text .letter-sign strong{font-size:1.55rem;}
 .letter-wrap>.chapter-actions{margin-top:7px;}
 .chapter-actions .primary-btn{padding:11px 14px;font-size:.78rem;}
}
@media(max-height:650px){
 .chapter{padding-top:62px;padding-bottom:64px;}
 .letter-wrap>.display{font-size:clamp(1.8rem,4vw,3.2rem);}
 .letter-paper{max-height:46vh;padding-top:12px;padding-bottom:12px;}
 .letter-text{font-size:.9rem;line-height:1.38;}
 .chapter-card{overflow-y:auto;}
}