@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap";:root{font-family:DM Sans,sans-serif;color:#fff;background:#0d0b12;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#0d0b12}.birthday-page{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 20px;background:radial-gradient(circle at 50% 35%,rgba(151,54,139,.2),transparent 30%),radial-gradient(circle at 15% 80%,rgba(104,42,116,.12),transparent 25%),#0d0b12}.hero{position:relative;z-index:2;width:min(900px,100%);text-align:center}.heart{width:58px;height:58px;margin:0 auto 24px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#f5b8e9;font-size:30px;box-shadow:0 0 40px #e15dc926;animation:pulse 2.8s ease-in-out infinite}.eyebrow{margin:0 0 16px;color:#cfa9c9;font-size:11px;font-weight:600;letter-spacing:.32em}h1{margin:0;font-family:Playfair Display,serif;font-size:clamp(42px,7vw,76px);line-height:1.05;font-weight:500;letter-spacing:-.035em}.subtitle{margin:24px auto 0;max-width:580px;color:#ffffff9e;font-size:15px;line-height:1.8}.date{margin-top:30px;color:#f2c7eb;font-size:13px;letter-spacing:.3em;font-weight:600}.countdown{margin:36px auto 0;display:flex;align-items:center;justify-content:center;gap:clamp(7px,1.7vw,18px)}.time-box{min-width:clamp(54px,11vw,110px)}.time-box span{display:block;font-size:clamp(30px,5vw,48px);line-height:1;font-variant-numeric:tabular-nums;font-weight:500}.time-box small{display:block;margin-top:10px;color:#fff6;font-size:9px;letter-spacing:.18em;text-transform:uppercase}.separator{margin-bottom:18px;color:#fff3;font-size:24px}.message{margin:32px 0 0;color:#ffffff61;font-size:12px;letter-spacing:.08em}footer{position:absolute;z-index:2;bottom:22px;color:#ffffff40;font-size:11px}footer span{color:#d77bc9}.stars,.stars:before,.stars:after{position:absolute;inset:0;pointer-events:none}.stars{opacity:.35;background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px);background-size:120px 120px;animation:drift 25s linear infinite}.stars:before{content:"";background-image:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1px);background-size:190px 190px;transform:translate(30px,50px)}.stars:after{content:"";background-image:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1px);background-size:260px 260px;transform:translate(-40px,20px)}.music-toggle{position:fixed;top:20px;right:20px;z-index:999;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,184,233,.3);background:#97368b26;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f5b8e9;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #e15dc91f;transition:background .2s ease,transform .2s ease}.music-toggle:hover{background:#97368b4d;transform:scale(1.05)}.music-toggle:active{transform:scale(.95)}@media(max-width:480px){.music-toggle{top:16px;right:16px;width:38px;height:38px;font-size:15px}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-120px)}}@media(max-width:480px){.birthday-page{padding:24px 16px 50px}.heart{width:50px;height:50px;margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:.24em}.subtitle{font-size:13px}.countdown{gap:4px}.separator{font-size:16px;margin-bottom:15px}.time-box{min-width:49px}.time-box small{font-size:7px;letter-spacing:.1em}}.gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(151,54,139,.22),transparent 32%),#0d0b12;cursor:pointer;transition:opacity .5s ease}.gate-out{opacity:0}.gate-content{position:relative;z-index:2;text-align:center}.gate .heart{width:64px;height:64px;font-size:32px;margin:0 auto 22px}.gate-text{margin:0;color:#ffffff80;font-size:12px;letter-spacing:.28em;text-transform:uppercase;animation:fadeBlink 2s ease-in-out infinite}@keyframes fadeBlink{0%,to{opacity:.35}50%{opacity:1}}.hidden{display:none}.fade-in{animation:fadeIn .6s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}