:root{
  --bg1: #fff5f7;
  --bg2: #fff0f3;
  --card: #ffffff;
  --accent: #f06d8a;
  --muted: #6b6b6b;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg1),var(--bg2));margin:0;color:#222;min-height:100vh;display:flex;align-items:center;justify-content:center}
.container{width:min(880px,94vw);padding:28px}
.hero{text-align:center;margin-bottom:20px}
.hero h1{font-family:Playfair Display,serif;font-size:2.6rem;margin:0;color:var(--accent)}
.subtitle{margin:6px 0 18px;color:var(--muted)}
.open-btn{background:var(--accent);color:#fff;border:0;padding:12px 20px;border-radius:999px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(240,109,138,0.18)}
.card{background:var(--card);border-radius:14px;padding:22px;margin-top:12px;box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.hidden{opacity:0;transform:translateY(10px);pointer-events:none}
.card.show{opacity:1;transform:none;transition:all 420ms cubic-bezier(.2,.9,.3,1)}
.content p{font-size:1.05rem;line-height:1.65;margin:0 0 12px;color:#222}
.actions{display:flex;gap:10px;align-items:center;margin-top:12px}
.ghost{background:transparent;border:1px solid #eee;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}
.foot{text-align:center;margin-top:14px;color:var(--muted);font-size:0.9rem}
code{background:#f7f7f7;padding:4px 6px;border-radius:6px;font-family:monospace}

@media (max-width:520px){.hero h1{font-size:2rem}.container{padding:18px}}