:root {
  --ink: #4e2945;
  --pink: #ff668a;
  --pink-dark: #e83e6d;
  --cream: #fff9f1;
  --yellow: #ffc94d;
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 11%, #fff4aa 0 6%, transparent 6.3%),
    radial-gradient(circle at 90% 9%, #ffc3d3 0 9%, transparent 9.3%),
    linear-gradient(145deg, #ffcad8 0%, #ffd8b4 50%, #fff0a5 100%);
}

.page-shell {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px 18px;
  isolation: isolate;
}

.page-shell::before,
.page-shell::after {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  content: "";
  border: 3px dashed rgb(255 255 255 / 55%);
  border-radius: 50%;
}

.page-shell::before { top: -112px; left: -100px; }
.page-shell::after { right: -125px; bottom: -100px; width: 250px; height: 250px; }

.card {
  width: min(100%, 440px);
  padding: clamp(28px, 7vw, 42px) clamp(22px, 7vw, 40px) 28px;
  text-align: center;
  background: rgb(255 255 255 / 89%);
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 32px;
  box-shadow: 0 18px 0 rgb(170 74 100 / 9%), 0 28px 55px rgb(151 55 85 / 22%);
  backdrop-filter: blur(8px);
}

.eyebrow {
  margin: 0 0 13px;
  color: var(--pink-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.illustration { position: relative; width: 164px; height: 133px; margin: 0 auto 12px; }

.envelope {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 145px;
  height: 91px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 8px 8px 17px 17px;
  background: #ff88a5;
  box-shadow: 6px 7px 0 #f2d75e;
}

.envelope::before,
.envelope::after {
  position: absolute;
  z-index: 2;
  top: 24px;
  width: 101px;
  height: 80px;
  content: "";
  background: #ff9db5;
  border-top: 4px solid var(--ink);
}

.envelope::before { left: -36px; transform: rotate(34deg); }
.envelope::after { right: -36px; transform: rotate(-34deg); }

.letter {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 28px;
  display: grid;
  width: 88px;
  height: 80px;
  place-content: center;
  border: 3px solid var(--ink);
  border-radius: 5px;
  color: var(--ink);
  line-height: 1;
  background: #fffdf8;
  transform: rotate(3deg);
}

.letter span { font-size: .62rem; }
.letter b { font-family: Pacifico, cursive; font-size: 1.15rem; font-weight: 400; }
.letter em { color: var(--pink-dark); font-size: 1.08rem; font-style: normal; }

.heart { position: absolute; color: var(--pink-dark); font-size: 27px; filter: drop-shadow(0 3px 0 #fff); animation: bob 2.4s ease-in-out infinite; }
.heart-one { top: 12px; left: 5px; transform: rotate(-18deg); }
.heart-two { top: 0; right: 12px; font-size: 21px; animation-delay: .45s; }
.heart-three { top: 49px; left: 10px; color: var(--yellow); font-size: 17px; animation-delay: .9s; }

h1 { max-width: 355px; margin: 0 auto; font-size: clamp(1.78rem, 7vw, 2.45rem); line-height: 1.12; letter-spacing: -.045em; }
.subtitle { max-width: 350px; margin: 16px auto 24px; font-size: .96rem; line-height: 1.52; }

.answer-area {
  --yes-scale: 1;
  --no-scale: 1;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.button {
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, 1.3, .5, 1), box-shadow .2s ease, background .2s ease;
}

.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.button-yes { z-index: 1; color: white; background: var(--pink-dark); box-shadow: 0 5px 0 #b92754; transform: scale(var(--yes-scale)); }
.button-yes:hover { background: #f04979; box-shadow: 0 7px 0 #b92754; }
.button-no { color: var(--ink); background: #ffe4a5; box-shadow: 0 5px 0 #e2ad40; transform: scale(var(--no-scale)); }
.button-no:hover { background: #ffefc7; }
.button:active { box-shadow: 0 2px 0 transparent; translate: 0 3px; }
.button span { padding-left: 3px; }

.tiny-note { min-height: 20px; margin: 23px 0 0; color: #9d6680; font-size: .76rem; }

.sparkles i { position: absolute; z-index: -1; width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / 70%); animation: twinkle 3.4s ease-in-out infinite; }
.sparkles i:nth-child(1) { top: 19%; left: 11%; }
.sparkles i:nth-child(2) { top: 73%; left: 9%; width: 7px; height: 7px; animation-delay: .5s; }
.sparkles i:nth-child(3) { top: 26%; right: 9%; width: 7px; height: 7px; animation-delay: 1.2s; }
.sparkles i:nth-child(4) { right: 19%; bottom: 12%; animation-delay: 1.7s; }
.sparkles i:nth-child(5) { top: 8%; left: 40%; width: 6px; height: 6px; animation-delay: 2.1s; }
.sparkles i:nth-child(6) { bottom: 8%; left: 31%; width: 8px; height: 8px; animation-delay: 2.6s; }

@keyframes bob { 50% { translate: 0 -7px; } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.35); } }

@media (min-width: 650px) { .page-shell { padding: 40px; } .card { border-radius: 38px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }