@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#10071f;--pink:#ff4fc8;--purple:#a66bff;--blue:#5b8cff;--cyan:#63f4ff;--gold:#ffd66b;--white:#fff9ff;--muted:#d4c8e6;--glass:rgba(255,255,255,.065)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif;overflow-x:hidden;min-width:320px}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 18% 18%,#48175e 0,transparent 34%),radial-gradient(ellipse at 83% 34%,#102e59 0,transparent 34%),radial-gradient(ellipse at 55% 90%,#3b124b 0,transparent 42%),#10071f}
button,a,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.orb{position:absolute;width:34vw;height:34vw;min-width:220px;min-height:220px;border-radius:50%;filter:blur(80px);opacity:.19;animation:drift 18s ease-in-out infinite alternate}
.orb-one{background:#ff2bbd;left:-10%;top:14%}.orb-two{background:#247aff;right:-12%;top:30%;animation-delay:-6s}.orb-three{background:#8b3cff;left:35%;bottom:-20%;animation-delay:-10s}
#stars{position:absolute;inset:0}
.star-dot{position:absolute;width:2px;height:2px;background:#fff;box-shadow:0 0 9px #fff;border-radius:50%;animation:twinkle var(--duration,3s) ease-in-out infinite alternate}
#particle-canvas{position:fixed;inset:0;pointer-events:none;z-index:10;width:100%;height:100%}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,70px);position:absolute;top:0;left:0;right:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(12,5,23,.55),transparent)}
.brand{font:700 .82rem 'Space Grotesk',sans-serif;letter-spacing:.18em;display:flex;gap:10px;align-items:center}.brand-mark{color:var(--gold);font-size:1.5rem;text-shadow:0 0 14px var(--gold)}
.top-actions{display:flex;gap:12px;align-items:center}.icon-button{border:1px solid #ffffff26;background:#ffffff0d;border-radius:30px;padding:9px 13px;cursor:pointer;color:#fefaff;font-size:.86rem;backdrop-filter:blur(10px)}.icon-button[aria-pressed=true]{border-color:var(--cyan);box-shadow:0 0 18px #63f4ff30}.volume-control{display:flex;gap:8px;align-items:center;color:#d9c8f5;font-size:1.2rem}.volume-control input{width:75px;accent-color:var(--pink)}
.section{position:relative;padding:110px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;isolation:isolate}
.hero{min-height:100svh;justify-content:center;padding-top:125px;padding-bottom:100px;overflow:hidden}
.eyebrow,.section-kicker{font-size:.72rem;letter-spacing:.23em;font-weight:700;color:#e4d5ff;text-transform:uppercase}
.eyebrow{margin:0 0 22px}
.hero-title{font:700 clamp(3.2rem,10vw,8.4rem)/.88 'Space Grotesk',sans-serif;letter-spacing:-.075em;margin:12px 0 18px;text-shadow:0 0 22px #ff4fc86b,0 0 70px #974bff2e}
.hero-title span{display:block;background:linear-gradient(100deg,#fff 0%,#ffc4f1 24%,#a4caff 55%,#ffe18a 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px #a15dff50)}
.name-title{font:700 clamp(3.2rem,12vw,8.5rem)/1 'Space Grotesk',sans-serif;letter-spacing:.06em;color:#fff;text-shadow:0 0 12px var(--pink),0 0 36px #ff2ecb,0 0 78px #934bff;animation:name-glow 3s ease-in-out infinite alternate}
.heart{font-size:.55em;color:#ff69b9;vertical-align:middle;display:inline-block;animation:heartbeat 1.5s infinite}
.telegram{margin:22px 0 28px;color:#c9e9ff;letter-spacing:.05em}.telegram a,.final-telegram a{border-bottom:1px dashed #63f4ff8c}
.primary-button{border:1px solid #ffffff6b;border-radius:999px;padding:17px 34px;min-width:220px;background:linear-gradient(110deg,#ff3ebd,#a044ff 48%,#377eff 78%,#ffce67);background-size:200% 200%;box-shadow:0 0 18px #ff3ebd78,0 0 40px #8d43ff40,inset 0 1px #ffffff70;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:transform .25s,box-shadow .25s;animation:button-shimmer 4s ease infinite,button-pulse 2.2s ease-in-out infinite}
.primary-button:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 0 28px #ff3ebdba,0 0 65px #8d43ff72}
.hint{color:#d9cbe8;font-size:.88rem;margin-top:19px}.scroll-note{position:absolute;bottom:24px;font-size:.63rem;letter-spacing:.24em;color:#b6a8ce}.scroll-note span{display:block;font-size:1.3rem;margin-top:8px;color:var(--gold);animation:bob 1.3s infinite}
.halo{position:absolute;width:min(65vw,560px);aspect-ratio:1;border:1px solid #c9a2ff18;border-radius:50%;pointer-events:none;box-shadow:0 0 100px #aa42ff0c,inset 0 0 100px #3e9eff0b;animation:spin 50s linear infinite}.halo span{position:absolute;color:#fff;text-shadow:0 0 12px var(--cyan)}.halo span:nth-child(1){top:14%;left:20%}.halo span:nth-child(2){right:10%;top:48%;color:var(--pink)}.halo span:nth-child(3){left:32%;bottom:7%;color:var(--gold)}
.hero-decoration{position:absolute;font-size:clamp(3rem,10vw,8rem);opacity:.24;filter:drop-shadow(0 0 20px var(--pink));animation:float 7s ease-in-out infinite}.decor-left{left:5%;top:28%;color:var(--pink)}.decor-right{right:5%;bottom:22%;color:var(--cyan);animation-delay:-3s}
.reveal{animation:rise-in .9s both}.hero .reveal:nth-child(2){animation-delay:.12s}.hero .reveal:nth-child(5){animation-delay:.3s}
.celebration{min-height:90vh;background:linear-gradient(180deg,transparent,#1d0a31a8 40%,transparent);overflow:hidden}.section-kicker{color:var(--cyan);margin-bottom:15px}.section-title{font:700 clamp(2rem,5vw,4rem)/1.12 'Space Grotesk',sans-serif;letter-spacing:-.045em;margin:0;max-width:900px;text-wrap:balance}.dramatic-title{background:linear-gradient(90deg,#fff,#ff8ee2,#a9c9ff,#ffe49a);color:transparent;background-clip:text;-webkit-background-clip:text;text-shadow:0 0 35px #bb66ff40;opacity:.4;transform:translateY(15px);transition:opacity .8s,transform .8s}.celebration.active .dramatic-title{opacity:1;transform:translateY(0);animation:text-glow 2.5s ease-in-out infinite alternate}
.section-subtitle{color:var(--muted);line-height:1.7;max-width:650px;margin:17px auto 0}
.celebration-scene{position:relative;width:min(100%,600px);height:300px;margin:15px auto 0}
.cake{position:absolute;width:190px;height:155px;left:50%;bottom:35px;transform:translateX(-50%);filter:drop-shadow(0 15px 25px #0008);animation:bob 4s ease-in-out infinite}
.cake-bottom,.cake-middle,.cake-top{position:absolute;left:0;right:0;border-radius:12px 12px 18px 18px}.cake-bottom{bottom:0;height:62px;background:linear-gradient(90deg,#ac43e8,#ff62bb 48%,#923fff);border-bottom:8px solid #ffc3ed}.cake-middle{bottom:51px;left:12px;right:12px;height:45px;background:linear-gradient(90deg,#fff1fb,#ff9edb);border-bottom:6px solid #d84ba8}.cake-top{bottom:86px;left:20px;right:20px;height:20px;background:#ffe6fb;border-radius:50%;box-shadow:0 0 22px #ff8bdc}
.candles{position:absolute;z-index:2;bottom:104px;left:50%;transform:translateX(-50%);display:flex;gap:18px}.candles i{display:block;width:7px;height:28px;background:repeating-linear-gradient(135deg,#fff 0 5px,#73efff 5px 9px);border-radius:4px;position:relative}.candles i::before{content:"";position:absolute;width:11px;height:15px;left:-2px;top:-15px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 75%,#fff 0 20%,#ffe98c 30%,#ff8c3d 70%);filter:drop-shadow(0 0 9px #ffcf55);animation:flicker .4s infinite alternate}
.cake-plate{position:absolute;bottom:-7px;left:-18px;right:-18px;height:12px;border-radius:50%;background:linear-gradient(90deg,#8b6cff,#fff,#ff80d8);box-shadow:0 0 25px #b15dff80}
.balloon{position:absolute;width:57px;height:72px;border-radius:50% 50% 45% 45%;filter:drop-shadow(0 0 14px currentColor);animation:balloon-float 5s ease-in-out infinite}.balloon::before{content:"";position:absolute;bottom:-8px;left:24px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid currentColor}.balloon::after{content:"";position:absolute;top:69px;left:28px;width:1px;height:95px;background:#ffffff6b}.balloon-pink{background:radial-gradient(circle at 30% 25%,#ffd1f2,#ff4fbc 55%,#a21885);color:#ff5dc5;left:16%;top:55px}.balloon-blue{background:radial-gradient(circle at 30% 25%,#d2fbff,#45cfff 55%,#3e54dd);color:#54dfff;right:18%;top:30px;animation-delay:-2s}.balloon-gold{width:44px;height:56px;background:radial-gradient(circle at 30% 25%,#fff3bb,#ffbf4e 60%,#a25a12);color:#ffc85d;right:29%;top:145px;animation-delay:-1s}
.scene-sparkle{position:absolute;color:var(--gold);font-size:2rem;animation:twinkle 1.5s infinite alternate}.sparkle-a{top:50px;left:33%}.sparkle-b{right:10%;top:130px;color:var(--pink)}.sparkle-c{left:14%;bottom:30px;color:var(--cyan)}
.secondary-button{margin-top:10px;border:1px solid #d2a7ff72;border-radius:999px;padding:12px 20px;background:#a34bff18;cursor:pointer;transition:.25s}.secondary-button:hover{background:#a34bff38;box-shadow:0 0 25px #b05aff3c}
.gift-section{background:linear-gradient(180deg,transparent,#150820a8,transparent);min-height:600px}.gift-prompt{font-weight:700;letter-spacing:.06em;margin:25px 0 8px;color:#ffdaf3}.gift-button{position:relative;width:170px;height:170px;border:0;background:transparent;cursor:pointer;margin:12px 0 0;filter:drop-shadow(0 12px 18px #0008);animation:gift-float 3.2s ease-in-out infinite;perspective:700px}.gift-glow{position:absolute;inset:10px;border-radius:50%;background:#ff3fca2c;filter:blur(30px)}.gift-body{position:absolute;width:118px;height:94px;bottom:22px;left:26px;border-radius:8px;background:linear-gradient(135deg,#ff69d0,#a044f8 60%,#662baf);box-shadow:inset 5px 0 10px #fff4,0 0 25px #e444ff58;overflow:hidden}.ribbon-vertical{position:absolute;top:0;bottom:0;left:48px;width:22px;background:linear-gradient(90deg,#ffd76d,#fff3b6,#e6a93c)}.ribbon-horizontal{position:absolute;left:0;right:0;top:36px;height:19px;background:linear-gradient(#fff1a9,#e5a63c,#ffdc75)}.gift-lid{position:absolute;z-index:2;width:140px;height:34px;bottom:110px;left:15px;border-radius:6px;background:linear-gradient(135deg,#ff80dc,#b64bff);box-shadow:inset 0 4px 8px #fff4,0 5px 12px #0004;transform-origin:12% 100%;transition:transform .85s cubic-bezier(.2,.8,.2,1)}.bow{position:absolute;bottom:24px;width:34px;height:27px;border:8px solid #ffd66b;border-radius:80% 20% 80% 20%;filter:drop-shadow(0 0 4px #ffd66b)}.bow-left{left:40px;transform:rotate(25deg)}.bow-right{left:67px;transform:scaleX(-1) rotate(25deg)}.gift-star{position:absolute;bottom:7px;right:10px;color:#ffe99c}.gift-shadow{position:absolute;bottom:8px;left:26px;width:118px;height:16px;border-radius:50%;background:#0008;filter:blur(9px)}.gift-button.open .gift-lid{transform:translate(-14px,-50px) rotate(-22deg)}.gift-button.open{animation:none}.gift-caption{font-size:.86rem;color:#bfb0d3}
.letter-card{width:min(100%,740px);margin-top:32px;text-align:left;border:1px solid #ffffff28;border-radius:24px;background:linear-gradient(135deg,#ffffff12,#ffffff05);backdrop-filter:blur(22px);box-shadow:0 20px 70px #0003,0 0 35px #a044ff18;overflow:hidden;animation:letter-reveal .9s both}.letter-card[hidden]{display:none}.letter-top{text-align:center;padding:20px 15px;background:linear-gradient(90deg,#ff4fc81a,#8d4dff30,#51d9ff16);font-size:.7rem;font-weight:700;letter-spacing:.22em;color:#f4c8ff;border-bottom:1px solid #ffffff15}.letter-content{padding:clamp(22px,5vw,42px);line-height:1.85;color:#f8efff}.letter-content p{margin:0 0 15px}.letter-greeting{font:700 1.4rem 'Space Grotesk',sans-serif;color:#ffb9e9}.letter-signoff{margin-top:30px;display:flex;flex-direction:column;gap:7px;letter-spacing:.13em;font-size:.72rem;color:#d9c6f6}.letter-signoff strong{font-size:.95rem;color:#ffe2f6;letter-spacing:.05em}
.wish-grid{width:min(100%,1040px);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}.wish-card{position:relative;overflow:hidden;min-height:230px;padding:30px 25px;border-radius:24px;border:1px solid #ffffff1d;background:linear-gradient(145deg,#ffffff12,#ffffff04);backdrop-filter:blur(14px);transition:transform .35s,border-color .35s,box-shadow .35s;text-align:left}.wish-card:hover{transform:translateY(-9px);border-color:#ffffff65;box-shadow:0 18px 55px #0004}.dream-card{--card-color:#ffda7b}.happiness-card{--card-color:#ff83d4}.memory-card{--card-color:#70e9ff}.wish-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0,var(--card-color),transparent 55%);opacity:.13;pointer-events:none}.wish-icon{font-size:2rem;margin-bottom:22px;filter:drop-shadow(0 0 12px var(--card-color))}.wish-card h3{font:700 1.05rem 'Space Grotesk',sans-serif;letter-spacing:.08em;margin:0 0 12px;color:var(--card-color)}.wish-card p{line-height:1.75;color:#e4d9ef;margin:0;font-size:.94rem}.card-glint{position:absolute;width:70px;height:240%;background:#ffffff12;top:-60%;left:-100px;transform:rotate(25deg);transition:left .8s}.wish-card:hover .card-glint{left:130%}
.finale{padding-bottom:28px}.finale-frame{position:relative;width:min(100%,1000px);overflow:hidden;padding:clamp(45px,8vw,85px) 22px;border:1px solid #e5a5ff4a;border-radius:32px;background:radial-gradient(ellipse at 50% 0,#8b36a63b,transparent 55%),linear-gradient(145deg,#ffffff0b,#ffffff02);box-shadow:0 0 70px #7d3dff17,inset 0 0 50px #ff4fc80b}.finale-frame::before{content:"";position:absolute;inset:8px;border:1px solid #ffffff14;border-radius:25px;pointer-events:none}.finale h2{font:700 clamp(1.9rem,5vw,3.8rem)/1.15 'Space Grotesk',sans-serif;margin:17px 0;color:#fff0fc;text-shadow:0 0 15px #ff4fc8,0 0 40px #9d50ff;animation:text-glow 3s infinite alternate}.date{display:inline-block;padding:10px 22px;border:1px solid #ffd66b77;border-radius:99px;color:#ffe39a;letter-spacing:.28em;font-weight:700;box-shadow:0 0 25px #ffd66b12}.love-line{font-weight:700;letter-spacing:.14em}.final-telegram{color:#c6efff}.final-cake{font-size:2.5rem;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:4px;filter:drop-shadow(0 0 16px #ff5bc7);animation:bob 3s infinite}.final-cake span:first-child{font-size:1.2rem}.final-cake span:last-child{font-size:1.2rem}.finale-button{margin-top:22px}.finale-flower{position:absolute;font-size:clamp(2rem,6vw,4.5rem);opacity:.45;filter:drop-shadow(0 0 14px var(--pink));animation:float 6s infinite}.flower-one{top:10%;left:5%;color:var(--pink)}.flower-two{right:6%;top:16%;color:var(--cyan);animation-delay:-2s}.flower-three{bottom:7%;left:13%;color:var(--gold);animation-delay:-4s}footer{padding:28px 0 0;color:#c5b4d9;font-size:.68rem;letter-spacing:.2em}footer span{color:#ff64c6;text-shadow:0 0 10px #ff64c6}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;z-index:30;padding:12px 18px;border:1px solid #ffffff30;border-radius:999px;background:#190c2beF;box-shadow:0 0 25px #a044ff30;color:#fff;font-size:.85rem;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
body.celebrating .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,#ff57d22e,transparent 48%);animation:flash-glow 1.3s ease-out both}
@keyframes drift{to{transform:translate(10vw,-7vh) scale(1.15)}}@keyframes twinkle{from{opacity:.15;transform:scale(.7)}to{opacity:1;transform:scale(1.35)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(7deg)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes balloon-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes flicker{from{transform:scale(.9) rotate(-4deg);opacity:.8}to{transform:scale(1.1) rotate(4deg);opacity:1}}@keyframes heartbeat{0%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(1)}}@keyframes name-glow{to{text-shadow:0 0 20px var(--pink),0 0 50px #ff2ecb,0 0 100px #934bff}}@keyframes button-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes button-pulse{0%,100%{box-shadow:0 0 18px #ff3ebd78,0 0 40px #8d43ff40}50%{box-shadow:0 0 30px #ff3ebdba,0 0 65px #8d43ff70}}@keyframes rise-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes text-glow{from{filter:drop-shadow(0 0 8px #ff4fc85c)}to{filter:drop-shadow(0 0 24px #5b8cff80)}}@keyframes gift-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}@keyframes letter-reveal{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes flash-glow{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.topbar{height:62px;padding:0 16px}.brand{font-size:.68rem;letter-spacing:.12em}.icon-button{padding:8px 10px}.volume-control input{width:52px}.section{padding:82px 18px}.hero{padding-top:100px;padding-bottom:90px}.eyebrow{font-size:.6rem;letter-spacing:.15em}.hero-title{letter-spacing:-.07em}.hero-decoration{opacity:.15}.halo{width:90vw}.celebration-scene{height:265px}.cake{transform:translateX(-50%) scale(.87);transform-origin:bottom center}.balloon-pink{left:8%}.balloon-blue{right:9%}.balloon-gold{right:21%}.wish-grid{grid-template-columns:1fr;gap:14px;margin-top:30px}.wish-card{min-height:0;padding:24px}.wish-icon{margin-bottom:12px}.finale-frame{border-radius:24px}.finale-frame::before{border-radius:18px}.date{letter-spacing:.17em}.gift-button{transform:scale(.94)}}
@media(max-width:390px){#music-label{display:none}.top-actions{gap:8px}.volume-control input{width:44px}.primary-button{min-width:205px;padding:15px 24px}.hero-title{font-size:3.05rem}.name-title{font-size:3.25rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}#particle-canvas{display:none}}