* { box-sizing: border-box; }
:root {
  --bg: #fff7f5;
  --ink: #301c24;
  --muted: #806a70;
  --accent: #d84b70;
  --accent2: #ef7d9b;
  --card: rgba(255,255,255,.72);
}
html, body { margin:0; min-height:100%; }
body {
  font-family:"DM Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,190,207,.35), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(255,220,192,.45), transparent 32%),
    var(--bg);
  overflow:hidden;
}
.app { min-height:100vh; position:relative; z-index:2; }
.screen {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:32px 22px; text-align:center;
  opacity:0; transform:translateY(18px) scale(.985); pointer-events:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.screen.active { opacity:1; transform:none; pointer-events:auto; }
.eyebrow {
  text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; font-weight:700;
  color:var(--accent); margin-bottom:22px;
}
h1,h2 { font-family:"Playfair Display", serif; font-weight:600; line-height:1.02; margin:0; }
h1 { font-size:clamp(3rem, 8vw, 6.6rem); }
h2 { font-size:clamp(3.2rem, 9vw, 7rem); }
em { color:var(--accent); font-style:italic; }
.lead { color:var(--muted); font-size:1rem; margin:22px 0 30px; }
.heart { font-size:4.5rem; color:var(--accent); animation:pulse 1.8s ease-in-out infinite; margin-bottom:15px; }
.big-heart { font-size:4rem; color:var(--accent); animation:pulse 1.5s ease-in-out infinite; margin-bottom:10px; }
button { font:inherit; border:0; cursor:pointer; }
.primary, .yes {
  background:var(--ink); color:white; padding:15px 24px; border-radius:999px;
  font-weight:700; box-shadow:0 12px 28px rgba(48,28,36,.16); transition:.2s;
}
.primary span { margin-left:10px; }
.primary:hover, .yes:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(48,28,36,.22); }
.letter {
  max-width:620px; padding:42px 38px; border:1px solid rgba(216,75,112,.12);
  background:var(--card); backdrop-filter:blur(16px); border-radius:28px;
  box-shadow:0 25px 70px rgba(91,48,61,.10); text-align:left;
}
.letter-top { color:var(--accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700; margin-bottom:25px; }
.letter p { font-family:"Playfair Display",serif; font-size:1.3rem; line-height:1.65; }
.letter .primary { margin-top:10px; }
.buttons { display:flex; gap:14px; align-items:center; justify-content:center; min-height:64px; }
.no {
  color:var(--muted); background:rgba(255,255,255,.65); border:1px solid rgba(48,28,36,.1);
  padding:13px 20px; border-radius:999px; position:relative; transition:left .18s ease, top .18s ease;
}
.tiny { font-size:.75rem; color:#a58f95; margin-top:24px; }
.date-card {
  width:min(520px, 90vw); margin:10px 0 22px; padding:22px; border-radius:22px;
  background:rgba(255,255,255,.68); border:1px solid rgba(216,75,112,.12);
}
.date-card span { display:block; font-size:.65rem; letter-spacing:.18em; color:var(--accent); font-weight:700; margin-bottom:8px; }
.date-card strong { display:block; font-family:"Playfair Display",serif; font-size:1.2rem; }
.date-card small { color:var(--muted); display:block; margin-top:8px; }
.closing { color:var(--muted); }
.success-icon { font-size:4rem; animation:bounce 1s ease-in-out infinite alternate; margin-bottom:15px; }
.ghost { background:transparent; color:var(--muted); margin-top:10px; }
.sound {
  position:fixed; right:20px; bottom:20px; z-index:10; width:44px; height:44px;
  border-radius:50%; background:rgba(255,255,255,.7); border:1px solid rgba(48,28,36,.1);
  color:var(--ink); backdrop-filter:blur(10px);
}
.toast {
  position:fixed; left:50%; bottom:75px; transform:translate(-50%, 12px); opacity:0;
  padding:9px 14px; background:var(--ink); color:#fff; border-radius:999px; font-size:.75rem;
  transition:.3s; z-index:10; pointer-events:none;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.ambient span {
  position:fixed; z-index:1; width:8px; height:8px; border-radius:50%;
  background:rgba(216,75,112,.2); animation:float 12s linear infinite;
}
.ambient span:nth-child(1){left:10%;top:80%;animation-delay:-2s}.ambient span:nth-child(2){left:25%;top:25%;animation-delay:-7s}
.ambient span:nth-child(3){left:40%;top:90%;animation-delay:-5s}.ambient span:nth-child(4){left:60%;top:15%;animation-delay:-9s}
.ambient span:nth-child(5){left:78%;top:75%;animation-delay:-1s}.ambient span:nth-child(6){left:90%;top:35%;animation-delay:-6s}
.ambient span:nth-child(7){left:52%;top:50%;animation-delay:-4s}.ambient span:nth-child(8){left:15%;top:50%;animation-delay:-10s}
@keyframes pulse {50%{transform:scale(1.12)}}
@keyframes bounce {to{transform:translateY(-8px) rotate(3deg)}}
@keyframes float {0%{transform:translateY(20vh) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-120vh) scale(1.4);opacity:0}}
@media(max-width:600px){ .letter{padding:30px 24px}.letter p{font-size:1.12rem} h1{font-size:3.35rem} h2{font-size:3.7rem} }