:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #f2f2f7;
  background: #0d0f1a;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 80% 0, #30136d 0, #0d0f1a 32rem); }
main { width: min(760px, calc(100% - 32px)); margin: auto; padding: 56px 0 80px; }
a { color: #c6ff3d; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 42px; text-decoration: none; color: inherit; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand strong { display: block; font-size: 21px; text-transform: uppercase; }
.brand span { color: #c6ff3d; font-size: 13px; }
h1 { margin: 0 0 10px; font-size: clamp(34px, 8vw, 58px); line-height: .98; }
h2 { color: #c6ff3d; margin-top: 34px; }
p, li { color: #d8d7e4; line-height: 1.7; }
dl { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 12px 20px; margin: 24px 0; }
dt { color: #9f9bb4; font-weight: 700; }
dd { margin: 0; color: #f2f2f7; overflow-wrap: anywhere; }
.updated, .card small { color: #9f9bb4; }
.card { margin-top: 28px; padding: 22px; border: 1px solid #5c37aa; border-radius: 18px; background: #151423; box-shadow: 0 18px 50px #0008; }
.nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.nav a { font-weight: 800; }
@media (max-width: 520px) { dl { grid-template-columns: 1fr; gap: 4px; } dd { margin-bottom: 12px; } }