:root{
  --bg1:#ffdfec;
  --bg2:#e9d6ff;
  --accent:#ff6fa3;
  --text:#3b0a2a;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
body{background:linear-gradient(135deg,var(--bg1),var(--bg2));display:flex;align-items:center;justify-content:center;color:var(--text);overflow:hidden;}
.wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;}
.stage{width:100%;max-width:900px;height:100%;display:flex;align-items:center;justify-content:center;}

/* card */
.card{width:100%;height:80vh;background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);border-radius:24px;box-shadow:0 8px 30px rgba(0,0,0,0.08);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;}
h1{font-size:40px;margin:0 0 16px;}
h2{font-size:28px;margin:0 0 12px;}
p{font-size:18px;margin:0 0 18px;color:rgba(0,0,0,0.65);max-width:760px;}
.btn{background:white;padding:12px 28px;border-radius:14px;border:none;font-weight:600;color:var(--accent);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.08);transition:transform .14s ease;}
.btn:active{transform:translateY(2px);}
.img-spot{width:240px;height:240px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.12);background:#fff;display:flex;align-items:center;justify-content:center;}
.small{font-size:16px;color:#4b1640}

/* responsive */
@media (max-width:640px){
  h1{font-size:28px}h2{font-size:20px} .card{height:86vh;padding:18px;}
  .img-spot{width:180px;height:180px}
}