@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap";body{font-family:Poppins,sans-serif;margin:0;min-height:100vh;overflow-x:hidden}#root{min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}.app{position:relative;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);overflow:hidden;display:flex;justify-content:center;align-items:center;padding:20px;cursor:pointer}.stars,.stars2,.stars3{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}.stars{background:transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="10" cy="10" r="1" fill="white" opacity="0.8"/><circle cx="60" cy="30" r="1" fill="white" opacity="0.6"/><circle cx="30" cy="70" r="1" fill="white" opacity="0.9"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.7"/></svg>') repeat;animation:twinkle 3s infinite}.stars2{background:transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><circle cx="20" cy="50" r="1.5" fill="white" opacity="0.7"/><circle cx="100" cy="20" r="1.5" fill="white" opacity="0.5"/><circle cx="70" cy="100" r="1.5" fill="white" opacity="0.8"/></svg>') repeat;animation:twinkle 4s infinite 1s}.stars3{background:transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><circle cx="50" cy="100" r="2" fill="white" opacity="0.6"/><circle cx="150" cy="50" r="2" fill="white" opacity="0.8"/><circle cx="100" cy="150" r="2" fill="white" opacity="0.7"/></svg>') repeat;animation:twinkle 5s infinite 2s}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.3}}.hearts-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.heart{position:absolute;bottom:-50px;font-size:30px;animation:float-up 5s ease-in infinite;opacity:0;filter:drop-shadow(0 0 10px rgba(255,105,180,.8))}@keyframes float-up{0%{bottom:-50px;opacity:0;transform:translate(0) rotate(0) scale(1)}10%{opacity:1}90%{opacity:1}to{bottom:110vh;opacity:0;transform:translate(100px) rotate(360deg) scale(.5)}}.envelope-container{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:40px}.envelope{position:relative;width:300px;height:200px;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.envelope-body{position:absolute;bottom:0;width:300px;height:150px;background:linear-gradient(135deg,#fff,#f0f0f0);border-radius:0 0 10px 10px;box-shadow:0 10px 40px #0000004d;z-index:2}.envelope-body:before{content:"";position:absolute;bottom:0;left:0;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent;border-bottom:100px solid #e8e8e8;z-index:-1}.envelope-flap{position:absolute;top:0;left:0;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent;border-top:100px solid #ff6b9d;transform-origin:top center;transition:transform 1s ease-in-out;z-index:3;filter:drop-shadow(0 5px 20px rgba(255,107,157,.5))}.envelope-container.opened .envelope-flap{transform:rotateX(180deg)}.letter{position:absolute;top:20px;left:30px;width:240px;height:300px;background:linear-gradient(135deg,#fff9f9,#ffe8f0);border-radius:10px;box-shadow:0 5px 30px #0003;z-index:1;transition:transform 1s ease-in-out,top 1s ease-in-out;padding:30px;text-align:center}.envelope-container.opened .letter{top:-100px;transform:translateY(-20px) scale(1.05)}.letter-content h2{font-size:2rem;color:#ff1493;margin-bottom:20px;text-shadow:0 2px 10px rgba(255,20,147,.3)}.letter-content p{font-size:1.5rem;color:#ff69b4;font-style:italic}.instruction{text-align:center}.instruction p{font-size:1.3rem;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,182,193,.8);font-weight:600}.message-container{position:relative;z-index:10;width:100%;max-width:750px;animation:fadeIn 1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.8) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}.card-entrance{animation:cardFlip .8s ease-out}@keyframes cardFlip{0%{transform:perspective(1000px) rotateY(90deg);opacity:0}to{transform:perspective(1000px) rotateY(0);opacity:1}}.birthday-card{background:linear-gradient(145deg,#fff,#fff5f8);border-radius:40px;padding:60px 50px;box-shadow:0 30px 90px #0006,0 0 60px #ff69b480,inset 0 1px #ffffffe6,inset 0 -1px #ffc0cb4d;border:5px solid transparent;background-image:linear-gradient(145deg,#fff,#fff5f8),linear-gradient(135deg,#ff69b4,#ff1493,gold,#ff69b4);background-origin:border-box;background-clip:padding-box,border-box;position:relative;overflow:visible}.birthday-card:before{content:"💖";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:60px;animation:heartBeat 1.5s ease-in-out infinite;filter:drop-shadow(0 5px 15px rgba(255,20,147,.6))}@keyframes heartBeat{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.2)}}.birthday-card:after{content:"";position:absolute;inset:-5px;background:linear-gradient(135deg,#ff69b4,#ff1493,gold,#ff69b4);border-radius:40px;z-index:-1;opacity:.6;filter:blur(20px);animation:borderGlow 3s ease-in-out infinite}@keyframes borderGlow{0%,to{opacity:.6}50%{opacity:.9}}.card-header{margin-bottom:35px;position:relative;z-index:1;padding:20px;background:linear-gradient(135deg,#ffb6c126,#ff69b426);border-radius:25px;border:2px solid rgba(255,105,180,.3);box-shadow:0 10px 30px #ff69b433}.card-header:before{content:"✨";position:absolute;top:-15px;left:20px;font-size:30px;animation:twinkleRotate 3s ease-in-out infinite}.card-header:after{content:"✨";position:absolute;top:-15px;right:20px;font-size:30px;animation:twinkleRotate 3s ease-in-out infinite 1.5s}@keyframes twinkleRotate{0%,to{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(180deg) scale(1.3);opacity:.7}}.card-title{font-size:3rem;font-weight:700;background:linear-gradient(135deg,#ff1493,#ff69b4,gold,#ff1493);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;animation:gradientShift 3s ease-in-out infinite,titleGlow 2s ease-in-out infinite alternate;filter:drop-shadow(0 0 15px rgba(255,20,147,.4));letter-spacing:1px}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes titleGlow{0%{filter:drop-shadow(0 0 10px rgba(255,20,147,.4))}to{filter:drop-shadow(0 0 25px rgba(255,20,147,.7))}}.card-body{position:relative;z-index:1;background:linear-gradient(135deg,#fff9,#fff5f899);padding:40px 35px;border-radius:30px;border:3px solid rgba(255,182,193,.4);box-shadow:0 15px 40px #ff69b426,inset 0 2px 10px #fffc}.card-body:before{content:"🌹";position:absolute;top:15px;left:15px;font-size:35px;opacity:.3;animation:float 3s ease-in-out infinite}.card-body:after{content:"🌹";position:absolute;bottom:15px;right:15px;font-size:35px;opacity:.3;animation:float 3s ease-in-out infinite 1.5s}.card-message{font-size:1.6rem;color:#333;line-height:2.2;text-align:center;animation:textReveal .8s ease-out;font-weight:500;text-shadow:0 1px 2px rgba(255,182,193,.3)}@keyframes textReveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.signature{margin-top:45px;text-align:center;font-style:italic;animation:signatureAppear 1s ease-out .5s both;padding:25px;background:linear-gradient(135deg,#ffc0cb33,#ffb6c133);border-radius:20px;border:2px dashed rgba(255,105,180,.4)}.signature p{font-size:1.4rem;color:#666;margin:10px 0}.signature-name{font-size:1.8rem!important;color:#ff1493!important;font-weight:700;background:linear-gradient(135deg,#ff1493,#ff69b4,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(255,20,147,.4))}@keyframes signatureAppear{0%{opacity:0;transform:scale(.8) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}.continue-hint{margin-top:35px;text-align:center;animation:fadeIn .5s ease-out;padding:15px;background:linear-gradient(135deg,#ffd70033,#ff69b433);border-radius:15px;border:2px solid rgba(255,105,180,.3)}.continue-hint p{font-size:1.2rem;color:#ff1493;font-weight:700}.final-message{margin-top:45px;text-align:center;animation:finalEnter 1s ease-out;padding:30px;background:linear-gradient(135deg,#ffd70026,#ff69b426);border-radius:25px;border:3px solid rgba(255,215,0,.4);box-shadow:0 10px 40px #ffd7004d}@keyframes finalEnter{0%{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.balloons{margin-bottom:25px;font-size:55px}.balloons .balloon{display:inline-block;margin:0 10px;animation:balloonFloat 2s ease-in-out infinite;filter:drop-shadow(0 5px 15px rgba(255,105,180,.5))}.balloons .balloon:nth-child(1){animation-delay:0s}.balloons .balloon:nth-child(2){animation-delay:.3s}.balloons .balloon:nth-child(3){animation-delay:.6s}@keyframes balloonFloat{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-25px) rotate(5deg)}}.forever-text{font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,#ff1493,#ff69b4,gold,#ff1493);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite,rainbowPulse 2s ease-in-out infinite;filter:drop-shadow(0 3px 10px rgba(255,215,0,.5))}@keyframes rainbowPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.sparkles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.sparkle{position:absolute;font-size:35px;animation:sparkle-anim 3s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,215,0,.8))}.sparkle:nth-child(1){top:10%;left:10%;animation-delay:0s}.sparkle:nth-child(2){top:20%;right:15%;animation-delay:.5s}.sparkle:nth-child(3){top:60%;left:5%;animation-delay:1s}.sparkle:nth-child(4){bottom:30%;right:10%;animation-delay:1.5s}.sparkle:nth-child(5){bottom:15%;left:20%;animation-delay:2s}.sparkle:nth-child(6){top:50%;right:25%;animation-delay:2.5s}@keyframes sparkle-anim{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1.5) rotate(180deg)}}@media(max-width:768px){.envelope{width:250px;height:170px}.envelope-body{width:250px;height:125px}.envelope-body:before{border-left:125px solid transparent;border-right:125px solid transparent;border-bottom:85px solid #e8e8e8}.envelope-flap{border-left:125px solid transparent;border-right:125px solid transparent;border-top:85px solid #ff6b9d}.letter{width:200px;height:250px;left:25px;padding:20px}.letter-content h2{font-size:1.5rem}.letter-content p{font-size:1.2rem}.instruction p{font-size:1.1rem}.card-title{font-size:2.2rem}.card-message{font-size:1.3rem}.birthday-card{padding:45px 30px}.card-body{padding:30px 25px}}@media(max-width:480px){.envelope{width:200px;height:140px}.envelope-body{width:200px;height:100px}.envelope-body:before{border-left:100px solid transparent;border-right:100px solid transparent;border-bottom:70px solid #e8e8e8}.envelope-flap{border-left:100px solid transparent;border-right:100px solid transparent;border-top:70px solid #ff6b9d}.letter{width:160px;height:200px;left:20px;padding:15px}.letter-content h2{font-size:1.3rem}.letter-content p{font-size:1rem}.card-title{font-size:1.8rem}.card-message{font-size:1.15rem}.birthday-card{padding:35px 25px}.card-body{padding:25px 20px}.instruction p{font-size:1rem}}