:root{
  --bg1: #fff0f6;
  --bg2: #ffeef8;
  --accent: #d95f88;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 10% 10%, rgba(255,238,245,0.8), transparent 20%), linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex;align-items:center;justify-content:center;
}
.stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:3rem}
.card{
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(217,95,136,0.12), 0 2px 6px rgba(0,0,0,0.04);
  border: 1px solid rgba(217,95,136,0.12);
  max-width: 92vw;
  max-height: 92vh;
  display:flex;align-items:center;justify-content:center;
}
.center-image{
  display:block;
  max-width: min(80vw,700px);
  max-height: min(70vh,700px);
  width:auto;height:auto;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 400ms cubic-bezier(.2,.9,.3,1), box-shadow 400ms;
  border: 6px solid rgba(255,255,255,0.7);
}
.center-image:hover{transform: translateY(-6px) scale(1.01);box-shadow:0 18px 40px rgba(217,95,136,0.18)}

/* subtle decorative hearts */
.card::before{
  content: "❤";
  position: absolute;
  font-size: 5rem;
  color: rgba(217,95,136,0.06);
  transform: rotate(-20deg);
  pointer-events:none;
}

@media (max-width:520px){
  .center-image{max-width:86vw;max-height:60vh;border-radius:12px}
  .card{padding:1rem;border-radius:16px}
}