:root{
  --pink-1:#fff5f9;
  --pink-2:#ffe6f3;
  --pink-3:#ffd6e8;
  --accent:#ff9fc2;
  --accent-dark:#ff6f9a;
  --text:var(--accent);
}
*{box-sizing:border-box}
html,body{height:100%}
.body-bg{
  background:var(--pink-1);
}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--pink-1);
  color:var(--text);
  display:flex;
  align-items:flex-start; /* allow vertical scrolling and show top/bottom borders */
  justify-content:center;
  padding:32px 24px; /* add some vertical padding so frame isn't flush to viewport */
  min-height:100vh;
}
.stage{width:100%;max-width:900px;text-align:center;padding:48px 16px;margin:24px auto}

body{
  background-color: var(--pink-1);
  background-image: radial-gradient(120px 80px at 8% 18%, rgba(255,159,194,0.22), transparent 40%),
                    radial-gradient(160px 100px at 88% 78%, rgba(255,214,233,0.16), transparent 35%),
                    radial-gradient(90px 60px at 52% 42%, rgba(255,182,202,0.10), transparent 35%);
  background-repeat: no-repeat;
}
.to-line{margin:0;font-size:3rem;color:var(--accent);font-weight:700;font-family:'Dancing Script', cursive}
.question{font-size:1.9rem;margin:12px 0 20px;font-family:'Dancing Script', cursive;color:var(--accent-dark)}
.emoji{margin-left:8px}

.buttons{position:relative;height:180px;max-width:780px;margin:24px auto}
.btn{
  border:0;padding:18px 26px;border-radius:14px;font-weight:700;cursor:pointer;
  box-shadow: 0 8px 24px rgba(200,80,140,0.12);font-size:1.05rem;min-width:140px
}
.btn:hover{transform:translateY(-4px) scale(1.02);transition:transform .18s ease}
.btn:focus{outline:3px solid rgba(255,95,168,0.18)}
.yes{background:var(--accent);color:white;position:absolute;left:calc(50% - 140px);top:20px;z-index:2;border:2px solid var(--accent-dark)}
.no{background:transparent;border:2px solid var(--accent);color:var(--accent);position:absolute;left:calc(50% + 20px);top:20px;z-index:1}

.stage:hover{transform:translateY(-3px);transition:transform .25s ease}

.letter-frame{
  background: linear-gradient(180deg, #fff 0%, #fffafc 100%);
  border: 8px solid var(--pink-2);
  box-shadow: 0 18px 40px rgba(255,140,180,0.12);
  padding:36px; border-radius:8px; max-width:760px; margin:0 auto; text-align:left;
}

.letter-frame h1{font-family:'Lora', 'Quintessential', 'Playfair Display', serif; color:var(--accent); font-size:2.6rem; margin-top:0}
.letter-frame p{font-family:'Lora', 'Quintessential', 'Playfair Display', serif; color:var(--accent-dark); font-size:1.18rem; line-height:1.7}

.letter-frame{position:relative}

@media (max-width:520px){
  .to-line{font-size:2.2rem}
  .question{font-size:1.3rem}
  .buttons{height:140px}
  .yes{left:16px}
  .no{right:16px;left:auto}
  .btn{padding:14px 18px;min-width:100px}
}