:root{
  --bg1: #fff0f6;
  --bg2: #ffe7f3;
  --pinky: #ff7bb3;
  --pinky-dark: #e85aa0;
  --accent: #ffd1e8;
  --glass: rgba(255,255,255,0.55);
  --shadow: rgba(232, 90, 160, 0.15);
  --text: #3b2a33;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(circle at 10% 10%, var(--bg2), var(--bg1) 40%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  color:var(--text);
}

.stage{
  width:100%;
  max-width:520px;
  position:relative;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,249,252,0.9));
  border-radius:22px;
  padding:26px;
  box-shadow: 0 10px 30px var(--shadow);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(6px) saturate(120%);
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* soft pink header */
.title{
  font-family: 'Great Vibes', cursive;
  font-size:42px;
  color:var(--pinky-dark);
  margin:6px 0 6px;
  letter-spacing:0.5px;
  text-shadow: 0 2px 8px rgba(255,123,179,0.08);
}

.subtitle{
  font-weight:500;
  color:#9b627b;
  margin:0 0 18px;
}

.message{
  font-size:18px;
  line-height:1.6;
  color:#5f3d46;
  margin:8px 18px 20px;
  min-height:72px;
  opacity:0.98;
}

.message .name{font-weight:700;color:var(--pinky)}

.controls{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}

.btn{
  background: linear-gradient(180deg,var(--pinky),var(--pinky-dark));
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(232,90,160,0.18);
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn:active{transform:translateY(2px)}

.muted{
  background:transparent;
  color:var(--pinky-dark);
  box-shadow:none;
  border:1px solid rgba(232,90,160,0.12);
}

/* floating hearts */
.hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.heart{
  position:absolute;
  width:18px;height:18px;
  transform-origin:center;
  opacity:0.95;
}
.heart svg{width:100%;height:100%;display:block}

/* cute avatar circle */
.avatar{
  width:120px;height:120px;border-radius:999px;margin:8px auto;background:linear-gradient(180deg,var(--accent),#fff);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -6px 18px rgba(255,255,255,0.6),0 8px 20px rgba(233,120,160,0.08);
  border:6px solid var(--glass);
}
.avatar h3{margin:0;color:var(--pinky-dark);font-family: 'Great Vibes', cursive;font-size:26px}

/* small flourish */
.flower{
  width:12px;height:12px;border-radius:50%;background:var(--pinky);display:inline-block;margin-left:6px;box-shadow:0 2px 8px rgba(255,123,179,0.12)
}

/* reveal animation for message */
.reveal{opacity:1;transform:translateY(0);transition:opacity .6s ease, transform .6s ease}
.hidden{opacity:0;transform:translateY(12px)}

/* responsive */
@media (max-width:480px){
  .title{font-size:34px}
  .message{font-size:16px}
  .avatar{width:96px;height:96px}
}

/* nice footer note */
.note{font-size:12px;color:#b07b97;margin-top:14px}
.heart-beat {
  text-align: front;
  font-size: 35px;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.sticker {
  position: fixed;
  font-size: 32px;
  animation: pop 1s ease forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes pop {
  0% {
    transform: scale(0.5) translateY(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) translateY(-30px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(-80px);
    opacity: 0;
  }
}