@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--bg:#060817;--ink:#f8f4ff;--muted:#b9b7cc;--pink:#ff9dbd;--gold:#ffd98c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif}body{overflow:hidden}button{font:inherit;color:inherit;border:0;cursor:pointer}.scene{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 16%,rgba(96,78,166,.25),transparent 28%),radial-gradient(circle at 20% 75%,rgba(226,73,130,.1),transparent 30%),linear-gradient(160deg,#050716,#0a0c25 48%,#130c22);z-index:0}.scene:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.46));pointer-events:none}.stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,218,151,.8) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(190,190,255,.7) 0 1px,transparent 1.5px);background-size:83px 97px,131px 149px,191px 173px;background-position:7px 11px,31px 48px,83px 21px;opacity:.55;animation:twinkle 6s ease-in-out infinite alternate}.aurora{position:absolute;width:85vw;height:40vh;filter:blur(50px);opacity:.16;border-radius:50%;transform:rotate(-18deg)}.aurora-a{left:-30vw;bottom:4vh;background:#ff4f9a}.aurora-b{right:-35vw;top:18vh;background:#7060ff}.moon{position:absolute;top:8vh;right:11vw;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#fffef4,#fff7d4 43%,#d9d1b7);box-shadow:0 0 25px rgba(255,244,192,.5),0 0 100px rgba(255,232,154,.17)}.moon i{position:absolute;background:rgba(173,162,134,.12);border-radius:50%}.c1{width:24px;height:14px;left:22px;top:25px}.c2{width:18px;height:18px;right:20px;top:42px}.c3{width:13px;height:9px;left:48px;bottom:20px}.c4{width:12px;height:12px;left:73px;top:20px}.lantern{position:absolute;font-size:44px;filter:drop-shadow(0 0 14px rgba(255,91,130,.35));opacity:.8;animation:sway 5s ease-in-out infinite}.lantern-left{left:4vw;top:22vh}.lantern-right{right:5vw;top:42vh;animation-delay:-2.2s}.shooting-star{position:absolute;width:75px;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:rotate(-28deg);opacity:0}.s1{top:23%;left:12%;animation:shoot 8s 1s infinite}.s2{top:39%;right:5%;animation:shoot 11s 5s infinite}.fireflies:before,.fireflies:after{content:'✦  ·  ✧  ·  ✦  ·  ✧  ·  ✦';position:absolute;color:rgba(255,215,150,.5);letter-spacing:20px;font-size:10px;bottom:13%;left:7%;animation:float 7s ease-in-out infinite}.fireflies:after{left:auto;right:8%;bottom:26%;animation-delay:-3s}.progress{position:fixed;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.05);z-index:20}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--gold));transition:width .7s}.music-btn{position:fixed;right:18px;top:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);z-index:30;opacity:0;pointer-events:none;transition:.3s}.music-btn.show{opacity:1;pointer-events:auto}.music-btn.playing{box-shadow:0 0 0 5px rgba(255,157,189,.08),0 0 25px rgba(255,157,189,.25);animation:pulse 1.8s infinite}#app{position:relative;z-index:5;height:100svh}.screen{position:absolute;inset:0;padding:max(26px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transform:scale(.985) translateY(12px);transition:opacity .55s,transform .7s cubic-bezier(.2,.8,.2,1),visibility .55s}.screen.active{opacity:1;visibility:visible;transform:none}.glass{background:linear-gradient(145deg,rgba(22,24,58,.72),rgba(10,12,32,.56));border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(20px)}.intro-card{width:min(92vw,520px);padding:34px 25px 27px;border-radius:32px;position:relative;overflow:hidden}.intro-card:before{content:'';position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,128,176,.09);filter:blur(20px);top:-130px;left:50%;transform:translateX(-50%)}.tiny-label,.section-kicker{font-size:10px;letter-spacing:.26em;color:#c7c1da;font-weight:600}.moon-orbit{width:80px;height:80px;border-radius:50%;margin:6px auto 16px;display:grid;place-items:center;border:1px solid rgba(255,218,140,.35);box-shadow:0 0 30px rgba(255,218,140,.08);position:relative}.moon-orbit:before{content:'';position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fffde9,#e3d8b5 70%,#a99b78);box-shadow:0 0 28px rgba(255,235,175,.34)}.moon-orbit span{position:relative;color:#8e3c60;font-size:15px}.pretitle{color:var(--pink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 9px}h1,h2,p{margin-top:0}h1{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(42px,12vw,68px);line-height:.94;letter-spacing:-.04em;margin:0 0 18px}h1 em,h2 em{font-weight:500;color:#ffc0d2}h1 span{font-family:'Be Vietnam Pro';font-size:.34em;vertical-align:top;color:#ff9dbd}.intro-copy{color:#d1cfe0;line-height:1.8;font-size:13px;margin:0 auto 25px;max-width:340px}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:15px 19px;border-radius:999px;background:linear-gradient(100deg,#ff7da9,#a89aff);box-shadow:0 12px 32px rgba(196,91,145,.25);font-weight:600;font-size:13px;transition:.25s}.primary-btn:active{transform:scale(.97)}.primary-btn b{font-size:17px;font-weight:400}.swipe-note{font-size:9px;color:#89879e;margin-top:15px;letter-spacing:.08em}.section-kicker{margin-bottom:10px}section h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(31px,8vw,48px);line-height:1.08;margin:0 0 10px;letter-spacing:-.025em}.section-sub{color:#aaa7bd;font-size:12px}.envelope-wrap{position:relative;width:min(78vw,340px);height:220px;margin:28px auto 18px;perspective:1000px;cursor:pointer}.envelope{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 25px 30px rgba(0,0,0,.35))}.envelope-wrap:hover .envelope{transform:translateY(-5px)}.env-back,.env-front{position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,#8e3459,#572344);border:1px solid rgba(255,255,255,.12)}.env-front{clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#9f4168,#6d294e);z-index:4}.env-flap{position:absolute;left:0;right:0;top:0;height:64%;background:linear-gradient(145deg,#a8476f,#692748);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .9s cubic-bezier(.2,.8,.2,1);z-index:5;border-radius:15px 15px 0 0}.env-letter{position:absolute;left:11%;right:11%;top:10%;height:82%;background:#fff8e9;border-radius:9px;color:#9a6070;z-index:2;transition:transform .9s .1s cubic-bezier(.2,.8,.2,1);padding:35px 25px;text-align:left}.letter-line{height:2px;background:#dcbfc1;margin-bottom:12px;width:80%}.letter-line.short{width:52%}.wax{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#f6a3bd,#9f2d59);box-shadow:0 4px 12px rgba(0,0,0,.3);transition:opacity .3s}.envelope-wrap.open .env-flap{transform:rotateX(180deg);z-index:1}.envelope-wrap.open .env-letter{transform:translateY(-85px);z-index:6}.envelope-wrap.open .wax{opacity:0}.tap-pulse{font-size:10px;letter-spacing:.22em;color:#bdb7ca;animation:softpulse 2s infinite}.letter-layout{width:min(94vw,620px);max-height:92svh;display:flex;flex-direction:column;align-items:center}.letter-heading{display:flex;align-items:center;gap:14px;text-align:left;width:100%;margin-bottom:14px}.paper-stamp{width:49px;height:49px;flex:none;border:1px solid rgba(255,202,135,.38);display:grid;place-items:center;font-family:serif;font-size:9px;line-height:1.1;color:#e8c782;transform:rotate(-7deg)}.letter-heading h2{font-size:clamp(24px,6vw,36px);margin:0}.letter-heading h2 span{color:var(--pink)}.letter-paper{width:100%;max-height:67svh;overflow:auto;text-align:left;background:linear-gradient(145deg,#fff9ee,#f1dfcf);color:#4e3940;border-radius:5px 18px 10px 18px;padding:45px 24px 30px;position:relative;box-shadow:0 25px 70px rgba(0,0,0,.4);transform:rotate(-.5deg)}.letter-paper:before{content:'';position:absolute;inset:10px;border:1px solid rgba(130,77,83,.14);pointer-events:none}.paper-ribbon{position:absolute;right:17px;top:13px;font-size:8px;letter-spacing:.15em;color:#a5746f;text-transform:uppercase}.letter-text{font-family:'Playfair Display',serif;font-size:clamp(16px,4.4vw,21px);line-height:1.62;transition:opacity .3s}.letter-text p{margin:0 0 13px}.letter-text p:last-child{margin-bottom:0}.paper-doodle{margin-top:20px;text-align:center;color:#a67478;letter-spacing:.2em}.letter-progress{font-size:10px;color:#8f8ba1;margin:13px 0}.ghost-btn{padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:12px;backdrop-filter:blur(12px)}.gallery-top{width:min(92vw,620px);display:flex;justify-content:space-between;align-items:end;text-align:left;margin-bottom:5px}.gallery-top h2{font-size:clamp(29px,8vw,43px);max-width:310px}.gallery-count{font-family:'Playfair Display';font-size:19px;color:#8f8ca1}.gallery-count strong{font-size:32px;color:#fff}.memory-stage{width:min(86vw,430px);height:min(57vh,490px);position:relative;margin:2vh auto 1vh}.photo-card{position:absolute;left:50%;top:50%;width:min(72vw,330px);height:min(52vh,430px);padding:10px 10px 36px;background:#fff;box-shadow:0 25px 55px rgba(0,0,0,.45);transform-origin:center;transition:transform .75s cubic-bezier(.18,.85,.22,1),opacity .55s;will-change:transform}.photo-card img{display:block;width:100%;height:100%;object-fit:cover}.photo-card.current{transform:translate(-50%,-50%) rotate(-1deg) scale(1);z-index:12;animation:photoIn .75s cubic-bezier(.18,.85,.22,1)}.photo-card.old{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s));z-index:calc(10 - var(--depth));opacity:.88}.photo-card:after{content:'';position:absolute;left:10px;right:10px;bottom:10px;height:17px;background:linear-gradient(90deg,rgba(100,70,60,.08),transparent);opacity:.5}.memory-caption{display:flex;align-items:center;gap:8px;max-width:350px;color:#a9a6b9;font-size:14px;line-height:1.5;margin-bottom:12px}.caption-dot{width:5px;height:5px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}.memory-caption p{margin:0}.photo-btn{padding:13px 18px}.ending-stars{color:#e9c888;letter-spacing:.1em;margin-bottom:15px}.big-moon{width:135px;height:135px;border-radius:50%;display:grid;place-items:center;margin-bottom:28px;background:radial-gradient(circle at 35% 30%,#fffef1,#ffeab1 55%,#c3ad7e);box-shadow:0 0 45px rgba(255,227,151,.3),0 0 110px rgba(255,213,116,.13);color:#a75570;font-size:22px;position:relative}.big-moon:after{content:'';position:absolute;inset:-16px;border:1px solid rgba(255,226,156,.18);border-radius:50%}#ending h2{font-size:clamp(34px,9vw,58px);margin-bottom:20px}.ending-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--pink),transparent);margin:0 auto 17px}.love{font-family:'Playfair Display';font-size:22px;font-style:italic;color:#ffd0dd}.signature{font-size:12px;line-height:1.8;color:#a9a5b7;margin-top:17px}.signature strong{font-family:'Playfair Display';font-size:22px;color:#fff}.secret-btn{margin-top:27px;background:none;color:#89859c;font-size:10px;text-decoration:underline;text-underline-offset:4px}.secret-card{width:min(88vw,420px);padding:45px 25px;border-radius:28px}.heart-burst{font-size:54px;color:#ff86ad;text-shadow:0 0 30px rgba(255,120,165,.45);animation:heartBeat 1.4s infinite}.secret-card h2{margin-top:18px}.secret-card p{color:#c5c1d1}.secret-small{font-size:11px;color:#8d8a9d!important}.secret-card .ghost-btn{margin-top:10px}@keyframes twinkle{from{opacity:.32}to{opacity:.7}}@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}@keyframes shoot{0%,78%{opacity:0;transform:translate(0,0) rotate(-28deg)}82%{opacity:1}92%{opacity:0;transform:translate(160px,80px) rotate(-28deg)}100%{opacity:0}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{50%{transform:scale(1.06)}}@keyframes softpulse{50%{opacity:.45}}@keyframes photoIn{0%{opacity:0;transform:translate(-50%,-46%) rotate(7deg) scale(.86)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-1deg) scale(1)}}@keyframes heartBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}@media(max-width:430px){.moon{width:85px;height:85px;top:7vh;right:8vw}.lantern{font-size:34px}.intro-card{padding:30px 20px 24px}.letter-paper{max-height:53svh;padding:40px 19px 25px}.letter-text{font-size:16px;line-height:1.62}.memory-stage{height:53vh}.photo-card{width:70vw;height:47vh}}@media(min-width:700px){.screen{padding-left:30px;padding-right:30px}.memory-stage{height:55vh}.photo-card{width:300px;height:420px}}

.letter-next-btn{margin-top:10px;padding:13px 20px}.letter-next-btn b{font-size:18px;font-weight:400}
@media(max-height:700px){.letter-paper{max-height:58svh}.letter-text{font-size:15px;line-height:1.5}.letter-text p{margin-bottom:9px}.letter-heading{margin-bottom:8px}}