*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  display:grid;place-items:center;padding:24px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(160deg,#0b2a4a,#0e4d6b 60%,#127a7a);
  color:#0f2233;
}
.card{
  width:100%;max-width:440px;text-align:center;
  background:#fdfbf7;border-radius:20px;padding:36px 28px 32px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.emoji{font-size:56px;line-height:1;margin-bottom:8px}
h1{font-size:1.5rem;letter-spacing:.01em;margin-bottom:18px;color:#7a2e5c}
.fact{
  min-height:6.5em;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;line-height:1.55;margin-bottom:24px;
  transition:opacity .2s ease;
}
.fact.fade{opacity:0}
button{
  font:inherit;font-weight:600;font-size:1rem;cursor:pointer;
  border:0;border-radius:999px;padding:12px 28px;
  background:#c2477f;color:#fff;
  box-shadow:0 4px 0 #8f2f5c;transition:transform .08s,box-shadow .08s,background .15s;
}
button:hover{background:#d4528d}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #8f2f5c}
button:focus-visible{outline:3px solid #ffd166;outline-offset:3px}