:root {
  color-scheme: dark;
  --bg: #070914;
  --panel: rgba(20, 24, 52, 0.78);
  --line: #29315e;
  --text: #f3f5ff;
  --muted: #a9b0d3;
  --subtle: #747ca4;
  --cyan: #22d3ee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(900px 500px at 80% -10%, rgba(139, 92, 246, .17), transparent 65%), var(--bg); color: var(--text); line-height: 1.58; }
a { color: var(--cyan); }
header, main, footer { width: min(100% - 32px, 840px); margin: 0 auto; }
header { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid rgba(41, 49, 94, .65); }
.brand { color: var(--text); text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .22em; }
main { padding: 58px 0 70px; }
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .24em; }
h1 { margin: 8px 0 2px; font-size: clamp(36px, 7vw, 58px); line-height: 1.05; letter-spacing: -.035em; }
.updated { color: var(--subtle); margin-bottom: 34px; }
section { margin: 0 0 16px; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
h2 { margin: 0 0 10px; font-size: 20px; }
p, ul { color: var(--muted); }
li + li { margin-top: 7px; }
footer { min-height: 80px; display: flex; align-items: center; border-top: 1px solid rgba(41, 49, 94, .65); color: var(--subtle); font-size: 12px; }
:focus-visible { outline: 3px solid rgba(34, 211, 238, .5); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }