*{box-sizing:border-box}
:root{
 --bg:#08060d;--panel:#120b16;--panel2:#1b0d19;--text:#fff8fc;--muted:#c7aebd;
 --pink:#ff3f83;--pink2:#ff72a8;--purple:#b783ff;--gold:#ffd38c;
}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:#08060d;font-family:"Segoe UI",Arial,sans-serif;overflow-x:hidden} body,h1,h2,h3,p,button,input{letter-spacing:.01em}
button,input{font:inherit}button{cursor:pointer}
.hidden{display:none!important}.locked{display:none!important}
.ambient{position:fixed;inset:0;z-index:-3;background:
 radial-gradient(circle at 18% 12%,rgba(255,43,119,.16),transparent 27%),
 radial-gradient(circle at 82% 18%,rgba(158,99,255,.14),transparent 28%),
 radial-gradient(circle at 50% 100%,rgba(255,180,100,.08),transparent 32%),
 linear-gradient(145deg,#08060d,#150914 48%,#09070e)}
.ambient:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:85px 85px;opacity:.07}
.hearts span{position:fixed;bottom:-40px;color:#ff5a96;opacity:.7;animation:floatUp linear forwards;z-index:2}
@keyframes floatUp{to{transform:translateY(-115vh) rotate(20deg);opacity:0}}
.screen,.section{min-height:100svh;display:grid;place-items:center;padding:30px 18px;position:relative;overflow:hidden}
.screen:before,.section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,65,132,.08),transparent 45%)}
.glass{background:linear-gradient(145deg,rgba(37,17,34,.90),rgba(13,9,17,.80));border:1px solid rgba(255,151,193,.18);box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(18px)}
.login-card{width:min(430px,100%);padding:40px 28px;border-radius:28px;text-align:center}
.icon{font-size:38px;margin-bottom:5px}.eyebrow{font-family:Georgia,serif;font-size:11px;letter-spacing:.28em;color:#d6a7ba;margin:0 0 14px;text-transform:uppercase}
h1,h2,h3,.pink-btn,.eyebrow{font-family:"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif} h1,h2,h3{letter-spacing:-.025em}
h1{font-size:clamp(46px,10vw,70px);margin:0 0 8px;line-height:.95}
h1 span,h2 span{color:#ff7da9}
.muted{color:var(--muted);line-height:1.6}.tiny{font-size:12px;line-height:1.6;color:#8f7585;margin:22px 0 0}
input{display:block;width:100%;margin:10px 0;padding:15px 16px;border-radius:12px;border:1px solid rgba(255,151,193,.18);background:rgba(0,0,0,.38);color:#fff;outline:none}
input:focus{border-color:rgba(255,91,148,.8);box-shadow:0 0 0 4px rgba(255,91,148,.08)}
.pink-btn{border:0;border-radius:8px;padding:14px 30px;min-width:150px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;box-shadow:0 10px 32px rgba(255,47,124,.28);transition:.25s}
.pink-btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(255,47,124,.42)}
.login-card .pink-btn{width:100%;margin-top:7px}.login-msg{color:#ff9ebf;min-height:20px;font-size:13px}
#loader{background:#07050b}.loader-wrap{text-align:center;width:min(430px,90vw)}
.hanging-hearts{letter-spacing:18px;color:#ff7ca9;font-size:20px;margin-bottom:35px;animation:sparkle 2s infinite}
.loader-heart{font-size:92px;color:#ff4c91;text-shadow:0 0 45px rgba(255,64,136,.55);animation:heartPulse 1.2s infinite}
@keyframes heartPulse{50%{transform:scale(1.1)}}
@keyframes sparkle{50%{opacity:.45}}
.progress{height:5px;background:#2b1727;border-radius:99px;overflow:hidden;margin:18px 0 8px}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple));transition:.15s}
.loader-wrap small{color:#8f7785}
.opening{background:linear-gradient(145deg,#0b0710,#120b20 55%,#08070e)}
.opening .moon{position:absolute;top:14%;font-size:80px;color:#d7c4ff;text-shadow:0 0 35px rgba(170,125,255,.3)}
.opening .eyebrow{margin-top:70px}
.opening h2{font-size:clamp(52px,11vw,96px);font-style:italic;margin:0 0 18px;line-height:.95}
.opening-sub{font-family:Georgia,serif;font-size:20px;line-height:1.5;color:#dbc4d1}
.section-head{text-align:center;margin-bottom:28px}.section-head h2{font-size:clamp(44px,8vw,70px);font-style:italic;margin:0}
.memories{background:linear-gradient(145deg,#0b0710,#170c19 55%,#09070d)}
.memory-stage{width:min(850px,100%);display:flex;align-items:center;justify-content:center;gap:12px}
.photo-frame{width:min(760px,78vw);aspect-ratio:16/9;border-radius:18px;position:relative;overflow:hidden;border:1px solid rgba(255,184,211,.25);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(255,70,140,.1);background:#100a11}
.photo-frame:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.15);z-index:2;pointer-events:none}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center;background:#130b13;display:block;transition:.45s}
.photo-frame.changing{opacity:.55;transform:scale(.985);transition:.18s ease}.photo-frame{transition:.28s ease}
.photo-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 40%)}
.photo-counter{position:absolute;right:16px;bottom:13px;font-size:11px;letter-spacing:.18em;z-index:3}
.nav{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,145,188,.25);background:#170c16;color:#fff;font-size:34px;line-height:1}.dots{display:flex;gap:6px;margin:17px 0}.dot{width:6px;height:6px;border-radius:50%;background:#49333f}.dot.active{width:22px;background:var(--pink)}
.memory-caption{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:18px;line-height:1.5;color:#d8bdcb}
.cake-section{background:linear-gradient(145deg,#0b0710,#1a0b16 55%,#0b070e)}
.cake-card{text-align:center;padding:45px 28px;border-radius:28px;width:min(620px,100%)}
.cake-card h2,.birthday-card h2{font-size:clamp(45px,9vw,72px);font-style:italic;margin:0}
.cake-art{font-size:145px;line-height:1.1;margin:24px 0;filter:drop-shadow(0 15px 22px rgba(0,0,0,.35));animation:cakeFloat 3s ease-in-out infinite}
@keyframes cakeFloat{50%{transform:translateY(-7px)}}
.cake-note{color:#d5bdc9;font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:18px}
.cut-section{background:linear-gradient(145deg,#0c0710,#210d1a 50%,#0a070d)}
.cut-card{text-align:center;position:relative;z-index:4}.cut-card h2{font-size:clamp(42px,8vw,70px);font-style:italic;margin:0}.cut-cake{margin:18px 0}.cut-msg{color:#ff9ebd;min-height:25px}
.flower-rain{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.flower{position:absolute;top:-50px;animation:fall linear forwards;filter:drop-shadow(0 0 7px rgba(255,105,160,.4))}
@keyframes fall{to{transform:translateY(115vh) rotate(540deg);opacity:.1}}
.birthday-section{background:linear-gradient(145deg,#0b0710,#160d1b 50%,#09070e)}
.birthday-card{width:min(820px,100%);padding:48px 28px;border-radius:30px;text-align:center}.message-box{min-height:250px;display:grid;place-items:center;padding:28px;margin:25px 0;background:rgba(0,0,0,.22);border:1px solid rgba(255,150,192,.13);border-radius:20px}
.message-line{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(22px,4vw,34px);line-height:1.45;color:#f4dce7;animation:lineIn .7s both}
@keyframes lineIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.message-progress{height:3px;background:#2a1725;border-radius:99px;overflow:hidden;margin-top:22px}.message-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple))}
.romantic-section{background:linear-gradient(145deg,#100811,#220d1b 52%,#0b070e)}
.romantic-card{width:min(800px,100%);padding:48px 30px;border-radius:30px;text-align:center}
.romantic-card h2{font-size:clamp(44px,8vw,70px);font-style:italic;margin:0 0 28px}
.from-hasnain{margin:-14px 0 24px;font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:18px;color:#ff9fbe;letter-spacing:.04em}.romantic-lines p{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(19px,3.5vw,29px);line-height:1.5;color:#ead3df;margin:17px 0}
.romantic-lines .ti-amo{color:#ff8fb6;font-size:clamp(25px,4vw,38px);text-shadow:0 0 25px rgba(255,71,137,.25)}
.final-section{background:radial-gradient(circle at 50% 42%,rgba(255,61,132,.13),transparent 25%),linear-gradient(145deg,#07050b,#160914 55%,#08060c)}
.final-card{text-align:center}.final-heart{font-size:145px;color:#ff4f92;text-shadow:0 0 45px rgba(255,64,136,.4);animation:heartPulse 1.4s infinite}
.final-card h2{font-size:clamp(52px,10vw,90px);font-style:italic;line-height:.95;margin:0}.final-card h2 span{color:#ff8eb6}.final-line{color:#ff7fae;margin:28px 0;font-size:20px}.signature{font-family:"Palatino Linotype",Palatino,Georgia,serif;color:#cdb5c3;line-height:1.7;font-size:17px}
@media(max-width:650px){.section{padding:70px 15px}.memory-stage{gap:5px}.nav{width:38px;height:38px;font-size:28px}.photo-frame{width:82vw}.cake-art{font-size:110px}.login-card{padding:32px 20px}}