:root{--pink: #ff3d8b;--pink-soft: #ffd1e1;--blue: #3da9ff;--blue-soft: #cfe7ff;--ink: #0b0b14;--paper: #ffffff;font-family:Fredoka,Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--ink)}button{font-family:inherit}.page{position:relative;min-height:100%;display:grid;place-items:center;padding:2rem 1rem;overflow:hidden;background:radial-gradient(900px 600px at 15% 10%,var(--pink-soft),transparent 60%),radial-gradient(900px 600px at 85% 90%,var(--blue-soft),transparent 60%),repeating-linear-gradient(45deg,#fff 0,#fff 22px,#fff7fb 22px,#fff7fb 44px)}.page:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(var(--pink) 2px,transparent 2.5px),radial-gradient(var(--blue) 2px,transparent 2.5px);background-size:60px 60px,60px 60px;background-position:0 0,30px 30px;opacity:.18;pointer-events:none;z-index:0}.balloons{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.balloon{position:absolute;bottom:-100px;animation:rise 14s linear infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}@keyframes rise{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-55vh) rotate(3deg)}to{transform:translateY(-115vh) rotate(-3deg)}}.sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.sparkle{position:absolute;font-size:18px;color:var(--pink);animation:twinkle 3s ease-in-out infinite;opacity:0}.sparkle:nth-child(2n){color:var(--blue)}.sparkle:nth-child(3n){color:var(--ink);font-size:14px}@keyframes twinkle{0%,to{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}.card{position:relative;z-index:3;width:100%;max-width:580px;padding:2.6rem 2rem;text-align:center;background:var(--paper);border:3px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink),10px 10px 0 4px var(--pink),18px 18px 60px #0000002e;transform:rotate(-.6deg)}.card.big{max-width:700px;padding:2rem 1.6rem;transform:rotate(0)}.kicker{margin:0 0 .4rem;font-family:Caveat,cursive;font-size:1.6rem;color:var(--blue);transform:rotate(-2deg)}.cake{font-size:3.2rem;margin-bottom:.4rem;display:inline-block;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}@keyframes bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.title{margin:.4rem 0 1.4rem;display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:700}.title .line{display:block}.title .happy{font-size:clamp(2.4rem,9vw,4rem);letter-spacing:.06em;color:var(--ink);-webkit-text-stroke:1px var(--ink)}.title .birthday{font-size:clamp(2.6rem,10vw,4.4rem);letter-spacing:.04em;background:linear-gradient(180deg,var(--pink) 0%,var(--pink) 50%,var(--blue) 50%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);margin:.1em 0}.title .name{font-family:Caveat,cursive;font-size:clamp(3.4rem,13vw,5.6rem);color:var(--pink);font-weight:700;text-shadow:3px 3px 0 var(--ink);margin-top:.2em;transform:rotate(-3deg)}.title.small{margin-bottom:1rem}.title.small .happy{font-size:clamp(1.4rem,4.5vw,2rem);letter-spacing:.12em}.title.small .name{font-size:clamp(2.6rem,9vw,4rem);margin-top:.05em}.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--pink);color:#fff;border:3px solid var(--ink);padding:.85rem 1.6rem;border-radius:999px;font-size:1.05rem;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.btn.ghost{background:var(--blue);color:#fff}.actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}.gallery{position:relative;width:100%;aspect-ratio:4 / 5;max-height:520px;margin:0 auto;background:var(--ink);border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:6px 6px 0 var(--pink),12px 12px 0 var(--blue)}.slide-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.slide-wrap img,.slide-wrap video{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none}.tape{position:absolute;width:70px;height:22px;background:#ffffffb3;border:1px solid rgba(0,0,0,.15);z-index:4;pointer-events:none}.tape-tl{top:10px;left:-18px;transform:rotate(-35deg)}.tape-tr{top:10px;right:-18px;transform:rotate(35deg)}.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:3px solid var(--ink);background:#fff;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:5;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}.nav:hover{transform:translateY(-50%) translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.nav.prev{left:12px}.nav.next{right:12px}.dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:5}.dot{width:12px;height:12px;border-radius:999px;border:2px solid var(--ink);background:#fff;cursor:pointer;padding:0;transition:background .2s,transform .2s}.dot.active{background:var(--pink);transform:scale(1.25)}.message-box{position:relative;margin-top:1.6rem;min-height:3em;display:grid;place-items:center}.message{margin:0;font-size:1.3rem;font-weight:500;line-height:1.4;color:var(--ink);max-width:32ch}.signoff{margin:1.4rem 0 0;font-family:Caveat,cursive;font-size:1.6rem;color:var(--blue);transform:rotate(-1deg)}.mute-btn{position:fixed;top:18px;right:18px;width:46px;height:46px;border-radius:999px;border:3px solid var(--ink);background:#fff;font-size:1.3rem;cursor:pointer;z-index:20;box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;transition:transform .15s,box-shadow .15s}.mute-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.mute-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}@media (max-width: 480px){.card{padding:2rem 1.2rem}.gallery{aspect-ratio:3 / 4}.nav{width:38px;height:38px;font-size:1.3rem}.message{font-size:1.1rem}.tape{width:50px}}