:root{
  --ink:#fff4f6; --soft:#f6cfd9; --rose:#ff8fab; --gold:#ffd98a;
  --glass:rgba(255,255,255,.1); --edge:rgba(255,255,255,.24);
  --serif:"Noto Serif Display",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,sans-serif; --script:"Dancing Script",cursive;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--sans);color:var(--ink);overflow-x:hidden;
  background:linear-gradient(160deg,#2a0c25 0%,#5b1a43 45%,#8a2c52 80%,#a8415f 100%) fixed;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#hearts{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.glow{position:fixed;left:50%;top:-10%;width:90vmax;height:70vmax;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,143,171,.28),transparent);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:28px 16px 40px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--glass);border:1px solid var(--edge);border-radius:28px;padding:32px 20px 28px;text-align:center;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(20,0,20,.35)}
.names{font-family:var(--script);font-weight:600;font-size:clamp(2rem,9vw,2.8rem);margin:0 0 18px;line-height:1.2;overflow-wrap:anywhere}
.heart{display:inline-block;color:var(--rose);animation:beat 1.6s ease-in-out infinite}
.label{margin:0;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.big{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(4.5rem,26vw,8rem);line-height:1.05;
  background:linear-gradient(180deg,#fff,#ffb3c6);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise 1s ease-out both;font-variant-numeric:tabular-nums}
.since{margin:6px 0 14px;font-family:var(--serif);font-size:1.15rem}
.clock{margin:0;font-size:1.05rem;font-weight:500;font-variant-numeric:tabular-nums}
.stats{margin:8px 0 20px;font-size:.88rem;color:var(--soft);font-variant-numeric:tabular-nums}
.milestone{margin:6px 0;font-size:.98rem;line-height:1.5}
.milestone:empty{display:none}
.milestone.gold{color:var(--gold);font-family:var(--serif);font-weight:700;font-size:1.2rem;text-shadow:0 0 18px rgba(255,217,138,.55)}
.card.celebrate{border-color:rgba(255,217,138,.6);box-shadow:0 20px 60px rgba(20,0,20,.35),0 0 40px rgba(255,217,138,.25)}
.kiss{margin-top:20px;min-height:48px;padding:12px 26px;border:0;border-radius:999px;font:600 1rem var(--sans);color:#4a0f2f;
  background:linear-gradient(135deg,#ffd0dc,#ff9fb8);cursor:pointer;box-shadow:0 8px 24px rgba(255,120,160,.35);transition:transform .15s}
.kiss:active{transform:scale(.96)}
.kiss:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.quote{text-align:center;padding:8px 8px 0}
.today{margin:0 0 12px;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.q{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.25rem,5.4vw,1.6rem);line-height:1.6;
  opacity:0;transition:opacity 1.8s ease;text-wrap:balance}
.q.show{opacity:1}
.q::before,.q::after{color:var(--rose);font-style:normal}
.q::before{content:"“ "}
.q::after{content:" ”"}
.foot{text-align:center;font-size:.85rem;color:var(--soft)}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media (min-width:700px){.wrap{padding-top:64px;gap:32px}.card{padding:44px 40px 36px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #hearts{display:none}
}