@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#ff6b9d;--secondary:#fc0;--accent:#ff9500;--purple:#a855f7;--teal:#00d4ff;--green:#22c55e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#333;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#fff5f7 0%,#fff9e6 50%,#e6f7ff 100%);font-family:Fredoka,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}body{min-height:100vh;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}button{font-family:inherit}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;padding:2rem;display:flex;position:relative}.hero-title{background:linear-gradient(135deg,#ff6b9d 0%,#fc0 50%,#ff9500 100%);-webkit-text-fill-color:transparent;text-shadow:none;-webkit-background-clip:text;background-clip:text;flex-wrap:wrap;justify-content:center;margin-bottom:1rem;font-size:clamp(2rem,8vw,4rem);font-weight:800;display:flex}.hero-title span{display:inline-block}.hero-name{flex-wrap:wrap;justify-content:center;gap:.2rem;margin-bottom:1.5rem;display:flex}.name-letter{color:#ff6b9d;text-shadow:3px 3px #e55a87,6px 6px #0000001a;font-size:clamp(3rem,15vw,8rem);font-weight:900;animation:2s ease-in-out infinite bounce}.name-letter:nth-child(2){animation-delay:.1s}.name-letter:nth-child(3){animation-delay:.2s}.name-letter:nth-child(4){animation-delay:.3s}.name-letter:nth-child(5){animation-delay:.4s}.hero-age{align-items:baseline;gap:.5rem;margin-bottom:1.5rem;display:flex}.age-number{background:linear-gradient(#fc0 0%,#ff9500 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(4rem,20vw,10rem);font-weight:900;line-height:1}.age-label{color:#ff6b9d;font-size:clamp(1.5rem,5vw,2.5rem);font-weight:600}.hero-subtitle{color:#666;margin-top:1rem;font-size:clamp(1rem,3vw,1.5rem)}.sparkles{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.sparkle{font-size:2rem;position:absolute}.sparkle:first-child{top:10%;left:10%}.sparkle:nth-child(2){top:20%;right:15%}.sparkle:nth-child(3){top:60%;left:5%}.sparkle:nth-child(4){top:70%;right:10%}.sparkle:nth-child(5){top:40%;left:20%}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (width<=480px){.hero{padding:1rem}.name-letter{text-shadow:2px 2px #e55a87,4px 4px #0000001a}}.cake-container{flex-direction:column;align-items:center;gap:2rem;padding:2rem;display:flex}.cake{flex-direction:column;align-items:center;display:flex;position:relative}.cake-top{z-index:2;justify-content:center;gap:1.5rem;padding:0 2rem;display:flex;position:relative}.candle-wrapper{cursor:pointer;position:relative}.candle{flex-direction:column;align-items:center;display:flex;position:relative}.candle-body{background:linear-gradient(90deg,#ff6b9d,#ffa8c5);border-radius:2px;width:8px;height:35px;position:relative}.candle-body:before{content:"";background:#ff6b9d;border-radius:50% 50% 0 0;width:12px;height:8px;position:absolute;top:0;left:50%;transform:translate(-50%)}.flame{background:linear-gradient(#fff,#fc0,#ff9500);border-radius:50%/60% 60% 40% 40%;width:12px;height:20px;position:absolute;top:-20px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #ff9500,0 0 20px #fc0,0 0 30px #ff9500}.smoke-particle{background:#c8c8c899;border-radius:50%;width:8px;height:8px;position:absolute;top:-10px;left:50%}.cake-layer{border-radius:10px;position:relative}.cake-layer-1{background:linear-gradient(#ff85a2 0%,#ff6b9d 50%,#e55a87 100%);width:200px;height:60px;margin-top:-5px;box-shadow:inset 0 -10px 20px #0000001a}.cake-layer-1:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);border-radius:5px;height:15px;position:absolute;top:10px;left:10px;right:10px}.cake-layer-2{background:linear-gradient(#ffa8c5 0%,#ff85a2 50%,#e55a87 100%);width:240px;height:50px;margin-top:-5px;box-shadow:inset 0 -10px 20px #0000001a}.cake-base{background:linear-gradient(#d4a574 0%,#c4956a 50%,#b8895e 100%);border-radius:0 0 10px 10px;width:260px;height:25px;box-shadow:0 5px 15px #0003}.cake-decoration{background:#ff6b9d;border-radius:5px;width:30px;height:40px;position:absolute;bottom:0}.cake-decoration.left{left:-15px;transform:rotate(-5deg)}.cake-decoration.right{right:-15px;transform:rotate(5deg)}.blow-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b9d,#ff85a2);border:none;border-radius:50px;padding:1rem 2rem;font-size:1.2rem;font-weight:700;transition:all .3s;box-shadow:0 4px 15px #ff6b9d66}.blow-button:hover{box-shadow:0 6px 20px #ff6b9d99}.candle.blown .flame{display:none}@media (width<=480px){.cake-top{gap:.8rem;padding:0 1rem}.candle-body{width:6px;height:28px}.flame{width:10px;height:16px;top:-16px}.cake-layer-1{width:160px;height:50px}.cake-layer-2{width:200px;height:45px}.cake-base{width:220px;height:20px}}.confetti-container{pointer-events:none;z-index:100;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.confetti-piece{border-radius:2px;position:absolute;top:-20px}.balloons-container{pointer-events:none;z-index:50;width:100%;height:100%;position:fixed;bottom:0;left:0;overflow:hidden}.balloon-wrapper{position:absolute;bottom:-150px}.balloon{border-radius:50%;position:relative;box-shadow:inset -10px -10px 30px #00000026}.balloon-shine{background:#fff6;border-radius:50%;width:30%;height:40%;position:absolute;top:15%;left:20%;transform:rotate(-30deg)}.balloon-string{background:linear-gradient(#888,#ccc);width:2px;height:60px;position:absolute;bottom:-60px;left:50%;transform:translate(-50%)}.balloon-string:before{content:"";background:#888;border-radius:50%;width:8px;height:8px;position:absolute;top:0;left:-3px}@media (width<=768px){.balloons-container{display:none}}.app{flex-direction:column;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.main-content{z-index:10;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2rem 1rem;display:flex;position:relative}.footer{text-align:center;color:#fff;background:linear-gradient(135deg,#ff6b9d 0%,#ff85a2 100%);padding:1.5rem;font-size:1rem}.footer p{margin:0}@media (width<=768px){.main-content{padding:1rem .5rem}}
