:root{
  --bg1:#ffe6ee;
  --bg2:#f4a2b6;

  --card:#fff6f9cc;

  --ink:#1f1f24;

  --accent:#ff3d6e;
  --accentDark:#c6355e;

  --stroke: rgba(255,255,255,.55);
  --shadow: 0 30px 85px rgba(0,0,0,.20);
}

*{
  box-sizing:border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

body{
  margin:0;
  min-height:100vh;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding: 170px 0 90px;

  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at top, var(--bg1), var(--bg2));

  overflow-x:hidden;
  overflow-y:auto;
}


/* Banner title */
.top-banner{
  position:fixed;
  top: 80px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  z-index:5;
  pointer-events:none;
}

.banner-pill{
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  color: var(--accentDark);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align:center;
  font-size: clamp(18px, 2.6vw, 34px);
  text-shadow: 0 2px 10px rgba(255,255,255,.35);
}

/* Falling petals layer */
#petals{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.petal{
  position: absolute;
  top: -12vh;
  left: 0;
  width: 18px;
  height: 22px;

  opacity: .9;
  border-radius: 65% 35% 70% 30% / 55% 45% 55% 45%;

  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.98),
      rgba(255,61,110,.62) 52%,
      rgba(255,61,110,.36) 72%,
      transparent 79%
    ),
    radial-gradient(circle at 70% 80%,
      rgba(255,255,255,.38),
      transparent 58%
    );

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.10))
    drop-shadow(0 10px 18px rgba(255,61,110,.14));

  transform: translate3d(0,0,0) rotate(0deg);
  animation: petalFall linear forwards;
  will-change: transform, opacity;
}

@keyframes petalFall{
  from{
    transform: translate3d(0, -12vh, 0) rotate(0deg);
    opacity: 0;
  }
  10%{
    opacity: var(--op, .65);
  }
  to{
    transform: translate3d(var(--drift, 0px), 112vh, 0) rotate(var(--rot, 360deg));
    opacity: 0;
  }
}

/* Main card */
.card{
  width: min(680px, 92vw);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 28px;
  padding: 22px 20px 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 2;

  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 220ms ease;
}

.card.tilting{ transition:none; }

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 28px;
  pointer-events:none;
  background: radial-gradient(600px 240px at 20% 10%, rgba(255,255,255,.55), transparent 55%);
  opacity: .75;
}

/* Top chrome */
.chrome{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 8px 16px;
  position:relative;
  z-index:1;
}

.chip-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.62);
  font-weight:700;
  font-size:12px;
}

/* Step dots */
.step-dots{
  display:flex;
  gap:8px;
  align-items:center;
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  opacity:.55;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.dot.active{
  background: var(--accent);
  opacity: 1;
  transform: scale(1.15);
  box-shadow:
    0 8px 18px rgba(255,61,110,.35),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

/* Typography */
.headline{
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  position:relative;
  z-index:1;
}

.mail{ display:inline-block; transform: translateY(1px); }

.msg{
  margin: 0 0 12px;
  color: rgba(0,0,0,.70);
  font-size: 16px;
  line-height: 1.5;
  position:relative;
  z-index:1;
}

.big-question{
  margin: 6px 0 16px;
  text-align: center;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.25vw, 26px);
  color: rgba(0,0,0,.78);
  line-height: 1.25;
  position:relative;
  z-index:1;
}

.tiny{
  font-size: 12px;
  opacity: .75;
  margin-top: 10px;
  position:relative;
  z-index:1;
}

.hidden{ display:none; }

/* Screen reveal animation */
.screen.reveal{
  animation: reveal 520ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes reveal{
  from{ opacity:0; transform: translateY(10px) scale(.985); filter: blur(2px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Letter box */
.letter{
  text-align:left;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px 14px;
  margin: 10px 0 16px;
  color: rgba(0,0,0,.72);
  line-height: 1.55;
  position:relative;
  z-index:1;
}

.letter-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 8px;
}

.letter-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
}

.letter p{ margin:0; }

/* Buttons */
.btns{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 10px;
  position:relative;
  z-index:1;
}

.btn{
  border:0;
  border-radius:999px;
  padding: 12px 18px;
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  position:relative;
  overflow:hidden;
}

.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  color:white;
  background: linear-gradient(135deg, var(--accent), #ff6b8f);
  box-shadow: 0 16px 40px rgba(255,61,110,.30);
}

.btn-primary:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.btn-ghost{
  background: rgba(255,255,255,.70);
  color: var(--accentDark);
  border: 1px solid rgba(255,61,110,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* Win screen */
.win-title{
  margin: 6px 0 8px;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 1000;
  letter-spacing: -0.02em;
  color: var(--ink);
  position:relative;
  z-index:1;
}

.win-sub{
  margin: 0 0 16px;
  color: rgba(0,0,0,.62);
  position:relative;
  z-index:1;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  background: rgba(255,255,255,.70);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 800;
  color: rgba(0,0,0,.66);
  position:relative;
  z-index:1;
}

.chip.big{
  padding: 12px 16px;
  width: min(560px, 92%);
}

/* Floating hearts */
.heart{
  position:absolute;
  width:14px;
  height:14px;
  transform: rotate(45deg);
  background: var(--accent);
  opacity:.75;
  animation: floatUp linear forwards;
}

.heart::before,
.heart::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--accent);
}

.heart::before{ left:-7px; top:0; }
.heart::after{ left:0; top:-7px; }

@keyframes floatUp{
  from{ transform: translateY(0) rotate(45deg); }
  to{ transform: translateY(-120vh) rotate(45deg); opacity:0; }
}

/* Typewriter caret */
.typing-caret::after{
  content:" |";
  opacity:1;
  animation: blink .9s infinite;
}

@keyframes blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* Sparkles */
.sparkle{
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:10px;
  border-radius:999px;
  pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 35%, rgba(255,61,110,.25) 60%, transparent 70%);
  filter: drop-shadow(0 10px 16px rgba(255,61,110,.25));
  transform: translate(-50%,-50%);
  animation: sparkle 650ms ease-out forwards;
}

@keyframes sparkle{
  from{ opacity:1; transform: translate(-50%,-50%) scale(.35); }
  to{ opacity:0; transform: translate(-50%,-95%) scale(1.5); }
}

@media (max-width: 680px){
  .banner-pill{ letter-spacing:.12em; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .typing-caret::after, .heart, .screen.reveal { animation:none !important; }
  .petal{ animation:none !important; display:none !important; }
  .card{ transform:none !important; transition:none !important; }
}