:root{
  --pink:#ff3b6b;
  --bg1: #ffd1dc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:hidden;
  background: radial-gradient(circle at top, var(--bg1), #ffffff);
  color:#222;
}
/* Floating hearts "stickers" */
.hearts span{
  position:absolute;
  bottom:-70px;
  font-size:24px;
  animation: floatUp 9s linear infinite;
  opacity:.75;
  user-select:none;
  pointer-events:none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.08));
}
@keyframes floatUp{
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   { transform: tran  to   rgb  to   { transform: tr: 2px solid rgba(255,59,107,.08);
  text-align:center;
}
.sticker{
  position:absolute;
  top:-18px;
  right:-18px;
  background:white;
  border-radius: 18px;
  padding:10px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  border: 2px solid rgba(255, 59, 107, 0.14);
  transform: rotate(8deg);
  font-weight:800;
}
h1{margin:8px 0 8px;font-size:30px;line-height:1.15}
.sub{margin:0 0 18px;color:#444;font-size:15px}
.buttons{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
button{border:none;padding:12px 18px;border-radius:14px;font-size:16px;cursor:pointer;font-weight:800}
.yes{background:var(--pink);color:white}
.no{background:#f1f1f1;color:#222}
#msg{margin-top:14px;font-weight:800;min-height:22px}
.footer{margin-top:14px;font-size:12px;color:#777'}
/* focus styles for accessibility */
button:focus{outline:3px solid rgba(255,59,107,.16);outline-offset:3px}
/* confetti canvas sits above background but below card content */
#confetti{position:fixed;left:0;top:0;pointer-events:none;z-index:5}
/* motion sensitivity */
@media (prefers-reduced-motion: reduce){
  .hearts span{animation:none}
  #confetti{display:none}
}
/* playful shy behavior for pointer users only */
@media (hover: hover) and (pointer: fine){
  .no:hover{transform:translateY(-6px);transition:transform .18s ease}
}