:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #0A0A0F; color: #F8FAFC;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }
header.hero {
  background: linear-gradient(135deg, #A855F7, #EC4899);
  padding: 48px 20px 40px; text-align: center; margin-bottom: 8px;
}
header.hero .brand { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; opacity: .85; }
header.hero h1 { margin: 8px 0 4px; font-size: 30px; }
header.hero .updated { font-size: 13px; opacity: .8; }
a { color: #22D3EE; }
h2 { margin-top: 36px; font-size: 21px; border-bottom: 1px solid #2D2D4A; padding-bottom: 8px; }
h3 { margin-top: 24px; font-size: 16px; color: #A855F7; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.card {
  background: #1A1A2E; border: 1px solid #2D2D4A; border-radius: 14px;
  padding: 20px 24px; margin-top: 24px;
}
.nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.nav a {
  background: #1A1A2E; border: 1px solid #2D2D4A; border-radius: 999px;
  padding: 8px 18px; text-decoration: none; color: #F8FAFC; font-size: 14px;
}
.muted { color: #94A3B8; }
footer { text-align: center; color: #94A3B8; font-size: 13px; margin-top: 48px; }