:root{--bg:#07080d;--bg2:#0e1018;--gold:#e8b86a;--gold-soft:rgba(232,184,106,.35);--text:#efe6d6;--muted:#b9ad98}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15rem;line-height:1.7;
background-image:radial-gradient(ellipse at 50% 100%,rgba(232,150,60,.18),transparent 55%),radial-gradient(ellipse at 20% 0%,#141a30,transparent 60%);
background-attachment:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem;text-align:center}
.script{font-family:'Great Vibes','Dancing Script',cursive;color:var(--gold);font-weight:400;line-height:1.15}
h1.script{font-size:clamp(2.8rem,10vw,5rem)}
h2.script{font-size:clamp(2rem,7vw,3rem);margin-bottom:1rem}
.heart{color:var(--gold);font-size:1.2rem;display:block;margin:.6rem 0}
.sub{letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;max-width:22rem;margin:1.5rem auto;color:var(--text)}
.btn{display:inline-block;margin-top:1.5rem;padding:.9rem 2rem;border:1px solid var(--gold);color:var(--text);text-decoration:none;
letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;background:rgba(0,0,0,.4);cursor:pointer;font-family:inherit;transition:background .3s}
.btn:hover,.btn:focus-visible{background:rgba(232,184,106,.15);outline:none}
.card{border:1px solid var(--gold-soft);background:linear-gradient(180deg,rgba(10,12,22,.85),rgba(5,5,10,.95));padding:2.2rem 1.6rem;max-width:26rem;width:100%;border-radius:6px}
.card p{margin-bottom:.8rem}
.letter{background:#d9c6a3;color:#3b2d1a;max-width:32rem;width:100%;padding:2.2rem 1.8rem;text-align:left;border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:rotate(-1deg)}
.letter p{margin-bottom:1rem}
.letter .script{color:#4a3720;font-size:2rem}
.letter .sign{text-align:right}
.nav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.nav .btn{margin-top:0}
.dots{margin-top:1.5rem;color:var(--gold-soft);font-size:.8rem;letter-spacing:.4em}
.cake{width:min(18rem,80vw);margin:1rem auto}
.flame{transform-origin:50% 100%;animation:flick 1.2s infinite alternate ease-in-out}
.flame.off{opacity:0;animation:none;transition:opacity .6s}
@keyframes flick{from{transform:scale(1) rotate(-2deg)}to{transform:scale(1.15,1.25) rotate(2deg)}}
.player{display:flex;align-items:center;gap:1rem;max-width:22rem;width:100%;margin:1.5rem auto}
.play{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--gold);background:none;color:var(--gold);font-size:1rem;cursor:pointer}
.bar{flex:1;height:2px;background:var(--gold-soft);position:relative}
.bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--gold)}
.time{font-size:.85rem;color:var(--muted);min-width:5.5rem}
.fade{animation:fade 1.6s ease both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
canvas#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}