/* Center on both X & Y axes, responsive, with light/dark support */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569; --card:#f8fafc; --accent:#2563eb;
  --border:#e2e8f0;
}

@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --card:#0f172a; --accent:#60a5fa; --border:#1f2937; }
}

*{ box-sizing:border-box }
html, body { height:100% }
body{
  margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg); color: var(--fg);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display:grid; place-items:center;
  padding: 2rem;
}

.card{
  width: min(720px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(1.25rem, 2vw + 1rem, 2rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.content{ text-align:center }
h1{
  margin:0;
  font-size: clamp(64px, 18vw, 144px);
  line-height:1;
  letter-spacing: .02em;
}
h2{
  margin:.2rem 0 .75rem;
  font-size: clamp(20px, 4.2vw, 36px);
  font-weight: 650;
}
p{ color:var(--muted); margin: 0 0 1rem }

.actions{ display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; margin-top:1rem }
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius: 12px; font-weight:600;
  background: var(--accent); color:white;
  transition: transform .06s ease, opacity .2s ease, background .2s ease;
}
.btn.secondary{ background: transparent; color: var(--fg); border:1px solid var(--border) }
.btn:active{ transform: translateY(1px) }

.note{ margin-top:1rem; color:var(--muted); font-size:.9rem }
code{ background: color-mix(in srgb, var(--border) 50%, transparent); padding:.1rem .35rem; border-radius:6px }