*{box-sizing:border-box}
:root{
  --bg:#fff7f8;
  --paper:#fffdfc;
  --ink:#5b4b50;
  --muted:#9b858d;
  --accent:#d98298;
  --accent-dark:#bd6179;
  --line:#f1dfe3;
}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;color:var(--ink)}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 15%, #ffe8ee 0 7%, transparent 28%),
    radial-gradient(circle at 88% 85%, #f9e9e0 0 6%, transparent 25%),
    var(--bg);
}
.page{
  min-height:100vh;display:grid;place-items:center;padding:28px 16px;position:relative;z-index:2;
}
.card{
  width:min(100%,520px);padding:36px 28px 30px;background:var(--paper);
  border:1px solid var(--line);border-radius:28px;
  box-shadow:0 18px 45px rgba(130,91,103,.10);
  text-align:center;animation:appear 1s cubic-bezier(.2,.8,.2,1) both;
}
.heart{
  width:54px;height:54px;margin:0 auto 10px;border-radius:50%;
  display:grid;place-items:center;background:#fff0f3;color:var(--accent);
  font-size:31px;animation:float 3.5s ease-in-out infinite;
}
.eyebrow{margin:0 0 8px;color:var(--accent-dark);font-size:14px;letter-spacing:2px}
h1{margin:0 0 24px;font-size:30px;line-height:1.2;font-weight:600;color:#57474d}
.letter{text-align:left;line-height:1.85;font-size:16px}
.letter p{margin:0 0 14px}
.final-line{text-align:center!important;color:var(--accent-dark);font-weight:bold;font-size:18px;margin-top:22px!important}
button{
  margin-top:12px;border:0;border-radius:999px;padding:14px 25px;
  background:#d98298;color:white;font:600 15px Georgia,serif;
  box-shadow:0 8px 18px rgba(217,130,152,.22);
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
button:active{transform:scale(.96)}
button:hover{transform:translateY(-2px);box-shadow:0 11px 23px rgba(217,130,152,.28);background:var(--accent-dark)}
.hint{margin:12px 0 0;color:var(--muted);font-size:11px;font-style:italic}
.success{
  position:fixed;inset:0;display:grid;place-items:center;align-content:center;
  text-align:center;padding:28px;opacity:0;transform:translateY(18px) scale(.98);
  pointer-events:none;transition:opacity .7s ease,transform .7s ease;
}
.success.show{opacity:1;transform:none;pointer-events:auto}
.success-heart{
  font-size:72px;color:var(--accent);animation:heartbeat 1.5s ease-in-out infinite;
}
.success h2{font-size:29px;margin:10px 0 8px}
.success p{font-size:16px;line-height:1.7;margin:0;max-width:420px}
.mini-hearts{margin-top:22px;color:var(--accent);letter-spacing:5px}
.petals{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petal{position:absolute;top:-20px;color:#e8a8b8;opacity:.35;animation:fall linear infinite}
.burst-heart{
  position:fixed;left:50%;top:50%;z-index:10;color:var(--accent);font-size:18px;
  pointer-events:none;animation:burst 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
.leave{animation:leave .65s ease forwards!important}
@keyframes appear{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes leave{to{opacity:0;transform:translateY(-20px) scale(.97)}}
@keyframes float{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}}
@keyframes fall{to{transform:translateY(110vh) rotate(180deg);opacity:0}}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:1}
to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1.2);opacity:0}}
@media(max-width:430px){
  .page{padding:18px 12px}.card{padding:30px 21px 26px;border-radius:24px}
  h1{font-size:26px}.letter{font-size:15px;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}