:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #020617;
  --panel: rgba(15, 23, 42, 0.96);
  --panel-soft: rgba(15, 23, 42, 0.92);
  --accent: #8b5cf6;
  --border: rgba(148, 163, 184, 0.35);
  --muted: #94a3b8;
  --radius: 18px;
  --shadow: 0 20px 40px rgba(15, 23, 42, 0.8);
}

body {
  margin: 0;
  padding: 24px 16px;
  background:
    radial-gradient(circle at top, #1e293b 0%, #020617 60%),
    radial-gradient(circle at bottom, #0b1120 0%, #020617 35%);
  color: #e2e8f0;
  min-height: 100vh;
}

.card {
  max-width: 800px;
  margin: 20px auto;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--panel), var(--panel-soft));
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: var(--shadow);
  padding: 22px 32px;
  backdrop-filter: blur(14px);
}

h2 { font-size: 2em; margin-top: 0; }
h3 { font-size: 1.5em; margin-top: 1.5em; }
p, li { line-height: 1.6; color: var(--muted); }
strong { font-weight: bold; color: #e2e8f0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 20px; }

footer { text-align: center; margin-top: 40px; }
footer a { font-size: 14px; }