:root{--ink:#0b0507;--wine:#5c0f23;--wine2:#8b1a38;--gold:#d8b87a;--gold2:#f4e2b8;--blush:#f7c9d4;--white:#fff8f4}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(120% 80% at 50% 0%,#3a0b1a 0%,var(--ink) 60%);color:var(--white);font-family:Montserrat,system-ui,sans-serif;font-weight:300;line-height:1.7;min-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow-x:hidden}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
main{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:0 18px 60px}
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;pointer-events:none}
.crown{color:var(--gold);font-size:1.6rem;text-shadow:0 0 14px var(--gold)}
.music{pointer-events:auto;background:rgba(11,5,7,.7);color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:6px 14px;font:500 .75rem Montserrat;letter-spacing:.1em;backdrop-filter:blur(6px)}
.hero{text-align:center;padding:64px 0 24px}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;color:var(--gold);margin-bottom:22px;font-weight:500}
.frame{position:relative;margin:0 auto;width:min(86%,380px);padding:10px;border-radius:200px 200px 18px 18px;background:linear-gradient(145deg,var(--gold2),var(--gold) 40%,#8a6a2c 70%,var(--gold2));box-shadow:0 0 50px rgba(216,184,122,.35),0 24px 60px rgba(0,0,0,.7)}
.frame img{display:block;width:100%;height:auto;border-radius:192px 192px 10px 10px;filter:contrast(1.04) saturate(1.05) sepia(.12)}
.frame::after{content:"";position:absolute;inset:10px;border-radius:192px 192px 10px 10px;background:linear-gradient(180deg,rgba(92,15,35,.18),transparent 30%,rgba(11,5,7,.55));pointer-events:none}
.glow{position:absolute;inset:-30px;background:radial-gradient(closest-side,rgba(216,184,122,.28),transparent);animation:pulse 4s ease-in-out infinite;z-index:-1}
.sheen{position:absolute;inset:10px;border-radius:192px 192px 10px 10px;overflow:hidden;pointer-events:none;z-index:2}
.sheen::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-60%}100%{left:140%}}
@keyframes pulse{50%{opacity:.5;transform:scale(1.06)}}
.script{font-family:'Great Vibes',cursive;font-weight:400;color:var(--gold2);text-shadow:0 0 22px rgba(216,184,122,.45)}
h1.script{font-size:clamp(2.2rem,9vw,3.3rem);line-height:1.15;margin:30px 0 14px}
.big{font-size:2.3rem;line-height:1.2;margin-bottom:10px}
.date-badge{display:inline-block;padding:10px 22px;border:1px solid var(--gold);border-radius:99px;color:var(--gold2);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;font-weight:600;background:linear-gradient(135deg,rgba(139,26,56,.6),rgba(92,15,35,.6));box-shadow:0 0 26px rgba(139,26,56,.6)}
.panel{margin:26px 0;padding:30px 20px;text-align:center;border:1px solid rgba(216,184,122,.35);border-radius:22px;background:linear-gradient(160deg,rgba(92,15,35,.45),rgba(11,5,7,.7));backdrop-filter:blur(4px);box-shadow:0 10px 40px rgba(0,0,0,.5);animation:rise .9s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.panel h2{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.55rem;color:var(--gold2);margin-bottom:20px;line-height:1.25}
.panel p{margin-bottom:14px;color:#f3dfe3}
.sub{color:var(--blush);font-size:.9rem}
.timer{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.unit{padding:14px 2px;border-radius:14px;border:1px solid rgba(216,184,122,.45);background:rgba(11,5,7,.65)}
.unit b{display:block;font:700 clamp(1.7rem,8vw,2.6rem) 'Cormorant Garamond',serif;color:var(--gold2);text-shadow:0 0 14px var(--gold);font-variant-numeric:tabular-nums}
.unit span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blush)}
.party{font:700 1.5rem 'Cormorant Garamond',serif;color:var(--gold2);margin-top:20px;animation:pulse 1.5s infinite}
.btn{display:inline-block;margin:6px 4px;padding:13px 22px;border-radius:99px;border:1px solid var(--gold);background:transparent;color:var(--gold2);font:600 .8rem Montserrat;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:.25s}
.btn:hover,.btn:active{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--wine2),var(--wine));border-color:var(--gold);box-shadow:0 0 28px rgba(139,26,56,.8);font-size:.88rem;padding:16px 28px;margin-top:10px;animation:glowbtn 2.5s infinite}
@keyframes glowbtn{50%{box-shadow:0 0 42px rgba(216,184,122,.7)}}
.wa{border-color:#25d366;color:#9ff0bf}.fb{border-color:#6c8cff;color:#c0cfff}.xx{color:#fff;border-color:#aaa}
.toast{min-height:1.4em;color:var(--gold);font-size:.85rem;margin-top:10px}
form{display:grid;gap:10px;margin-bottom:12px}
input,textarea{width:100%;padding:13px 15px;border-radius:12px;border:1px solid rgba(216,184,122,.5);background:rgba(11,5,7,.7);color:var(--white);font:300 16px Montserrat}
input:focus,textarea:focus{outline:2px solid var(--gold)}
.hp{position:absolute;left:-9999px;height:0;opacity:0}
.wishes{list-style:none;padding:0;margin-top:16px;display:grid;gap:12px;text-align:left}
.wishes li{padding:14px 16px;border-left:3px solid var(--gold);background:rgba(255,248,244,.05);border-radius:0 12px 12px 0;overflow-wrap:anywhere}
.wishes strong{display:block;color:var(--gold2);font-family:'Cormorant Garamond',serif;font-size:1.1rem}
.wishes time{display:block;font-size:.7rem;color:var(--blush);opacity:.7;margin-top:4px}
.closing{text-align:center;padding:30px 0 10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}