.gift{min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;background:radial-gradient(1200px 700px at 50% -10%,#5a2433 0%,transparent 55%),radial-gradient(800px 500px at 100% 100%,#3d1822 0%,transparent 50%),linear-gradient(180deg,#1c0c11 0%,var(--wine) 40%,#1a0b10 100%)}.gift:before{content:"";pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:0}.petals{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:1}.petal{position:absolute;top:-12%;width:10px;height:14px;border-radius:70% 10%;background:linear-gradient(135deg,var(--petal),var(--rose));opacity:.45;animation:fall var(--dur) linear infinite;animation-delay:var(--delay);left:var(--x)}@keyframes fall{0%{transform:translateY(0) rotate(12deg)}to{transform:translateY(115vh) rotate(240deg)}}.stage{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(1.5rem,env(safe-area-inset-top)) 1.15rem max(2rem,env(safe-area-inset-bottom));text-align:center}.kicker{letter-spacing:.32em;text-transform:uppercase;font-size:.64rem;font-weight:400;color:var(--blush);margin:0 0 .75rem}.occasion{font-family:var(--serif);font-size:clamp(2rem,8vw,3.4rem);font-weight:500;font-style:italic;margin:0 0 .5rem;line-height:1.15}.for-her{margin:0 0 2rem;color:var(--petal);font-weight:300;font-size:1.02rem}.envelope-wrap{perspective:900px;margin-bottom:1.5rem}.envelope{width:min(300px,84vw);height:188px;position:relative;transform-style:preserve-3d}.envelope.open .flap{transform:rotateX(180deg)}.pocket{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#f6e6df 0%,#ead3c8 100%);border-radius:6px 6px 10px 10px;box-shadow:0 18px 50px #00000059,inset 0 0 0 1px #ffffff59}.pocket:after{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(180deg,#e8cfc4 0%,#d9b5a8 100%);clip-path:polygon(0 28%,50% 0,100% 28%,100% 100%,0 100%)}.flap{position:absolute;top:0;left:0;right:0;height:58%;background:linear-gradient(180deg,#f4ddd4 0%,#e2c0b4 100%);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .9s ease;z-index:2}.seal{position:absolute;left:50%;top:46%;z-index:3;width:64px;height:64px;margin:0;border:0;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;color:var(--ivory);background:radial-gradient(circle at 35% 30%,#c45c6a,#7a2d3a 62%,#5c1f2a);box-shadow:0 8px 18px #5a141e73,inset 0 1px #ffffff40}.seal:focus-visible{outline:none;box-shadow:0 0 0 3px #c9a27a8c}.seal svg{width:22px;height:22px}.hint{max-width:22rem;margin:0;color:#fbf4efb8;font-weight:300;font-size:.92rem;line-height:1.55}.letter-page{position:relative;z-index:2;width:min(44rem,100%);margin:0 auto;padding:max(3.6rem,calc(env(safe-area-inset-top) + 3rem)) .7rem max(3.5rem,env(safe-area-inset-bottom))}.letter-card{background:linear-gradient(180deg,#fffaf6 0%,var(--ivory) 100%);color:var(--ink);border-radius:18px;padding:1.45rem 1.05rem 2.1rem;box-shadow:0 24px 60px #00000052}.fade-in{animation:rise .8s ease both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}.letter-card .kicker{color:var(--rose)}.letter-card h1{font-family:var(--serif);font-size:clamp(1.85rem,8vw,2.8rem);font-weight:500;font-style:italic;margin:0 0 1.2rem;line-height:1.2}.greeting{font-family:var(--serif);font-size:1.4rem;font-style:italic;margin:0 0 .9rem}.letter-card p{font-weight:300;line-height:1.7;margin:0 0 1rem;font-size:1.02rem}.section{margin-top:2.2rem}.hint-inline{margin:0 0 .8rem!important;font-size:.88rem!important;color:#3b24289e}.then-now-frame{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3 / 4;touch-action:none;-webkit-user-select:none;user-select:none;background:#ead8d2}.then-now-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.then-now-frame>.then-now-img{position:absolute;top:0;right:0;bottom:0;left:0}.then-now-before{position:absolute;inset:0 auto 0 0;width:calc(var(--split) * 1%);overflow:hidden}.then-now-before .then-now-img{position:absolute;inset:0 auto 0 0;width:calc(100% * 100 / var(--split));height:100%;max-width:none}.then-now-handle{position:absolute;top:0;bottom:0;left:calc(var(--split) * 1%);width:3px;background:#fff;transform:translate(-50%);box-shadow:0 0 0 4px #8b3a4a40}.then-now-handle:after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;background:var(--rose);transform:translate(-50%,-50%);box-shadow:0 4px 10px #00000040}.then-now-tag{position:absolute;bottom:.7rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}.then-now-tag.left{left:.7rem}.then-now-tag.right{right:.7rem}.swipe-deck{overflow:hidden}.swipe-track{display:flex;touch-action:pan-y}.swipe-slide{min-width:100%;margin:0}.swipe-slide img{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center top;border-radius:14px;background:#ead8d2}.swipe-copy{display:grid;gap:.2rem;padding:.85rem .15rem .4rem}.swipe-copy strong{font-family:var(--serif);font-size:1.25rem;color:var(--rose)}.swipe-copy span{font-size:.92rem;font-weight:300;line-height:1.5}.swipe-nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.35rem}.ghost-btn{min-height:44px;min-width:64px;border:1px solid rgba(139,58,74,.22);background:transparent;color:var(--rose);border-radius:999px;padding:0 .9rem;font-size:.82rem}.ghost-btn:disabled{opacity:.35}.dots{display:flex;gap:.35rem}.dot{width:6px;height:6px;border-radius:50%;background:rgba(139,58,74,.22)}.dot.on{background:var(--rose)}.wish-photo{position:relative;display:block;width:100%;padding:0;border:0;background:none;border-radius:14px;overflow:hidden;cursor:pointer}.wish-photo img{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:center}.candles{position:absolute;left:50%;top:18%;transform:translate(-50%);display:flex;gap:1.1rem}.flame{width:10px;height:16px;border-radius:50% 50% 40% 40%;background:transparent;opacity:0}.flame.on{opacity:1;background:radial-gradient(circle at 50% 70%,#fff6c8,#ff9a3c 55%,transparent 72%);animation:flicker .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px #ffb347)}@keyframes flicker{0%{transform:scale(.9) translateY(1px)}to{transform:scale(1.08) translateY(-1px)}}.wish-photo.blown .flame{opacity:0}.hold-btn{position:relative;overflow:hidden;width:100%;min-height:48px;margin-top:.85rem;border:0;border-radius:999px;background:var(--rose);color:var(--ivory);font-size:.92rem;touch-action:none}.hold-fill{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.22)}.hold-label{position:relative}.wish-message{font-family:var(--serif)!important;font-style:italic;font-size:1.25rem!important;margin:.9rem 0 0!important;color:var(--rose)}.timeline{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:1px solid rgba(139,58,74,.22);display:grid;gap:1.2rem}.timeline-item{position:relative;padding-left:1.05rem}.timeline-item:before{content:"";position:absolute;left:-1.28rem;top:.35rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px #8b3a4a1f}.timeline-date{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#3b24288c;margin-bottom:.2rem}.timeline-item h2,.reason h2{font-family:var(--serif);font-size:1.28rem;font-weight:600;margin:0 0 .3rem;color:var(--rose)}.timeline-item p,.reason p{margin:0;font-size:.96rem}.reasons{display:grid;gap:.85rem}.reason{padding:1rem 1.05rem;border-radius:14px;background:rgba(139,58,74,.06);border:1px solid rgba(139,58,74,.12)}.closing{font-family:var(--serif);font-size:1.5rem;font-style:italic;margin:2.2rem 0 .35rem!important}.signoff{margin:0!important}.signature{font-family:var(--serif);font-size:1.35rem;font-style:italic;margin:.15rem 0 0}.music-toggle{position:fixed;z-index:5;top:max(.7rem,env(safe-area-inset-top));right:.75rem;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(251,244,239,.18);border-radius:999px;padding:0;background:rgba(42,18,24,.72);color:var(--ivory);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.music-toggle svg{width:1rem;height:1rem}.music-toggle.on,.music-toggle:focus-visible{background:rgba(139,58,74,.85);outline:none}@media (min-width: 720px){.letter-card{padding:2.4rem 2.2rem 2.8rem}.reasons{grid-template-columns:repeat(3,1fr)}.then-now-frame,.swipe-slide img,.wish-photo img{aspect-ratio:4 / 5}}:root{--wine: #2a1218;--rose: #8b3a4a;--blush: #e8b4bc;--petal: #f3d5d8;--ivory: #fbf4ef;--ink: #3b2428;--gold: #c9a27a;--serif: "Cormorant Garamond", "Times New Roman", serif;--sans: "Outfit", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}html{-webkit-text-size-adjust:100%}body{font-family:var(--sans);color:var(--ivory);background:var(--wine);-webkit-font-smoothing:antialiased}button{font-family:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}