/* Text-first, editorial CSS — clean, accessible, no external deps */
:root{
  --bg: #0c1118;
  --surface: #121826;
  --ink: #e6eefc;
  --ink-muted: #a7b4cb;
  --brand: #9b8cff;
  --accent: #c2b8ff;
  --line: #1f2a3a;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --w: 920px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 900px at 12% 8%, #0f1726, var(--bg)) fixed;
  color: var(--ink);
  font: 16px/1.7 system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  text-rendering: optimizeLegibility;
}
.container{max-width: var(--w); margin: 0 auto; padding: 28px 18px 48px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:12px}
.brand-badge{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:12px; font-weight:900; letter-spacing:.2px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #0b0f14; box-shadow: var(--shadow);
}
.brand-name{font-weight:900; font-size:18px; letter-spacing:.3px}
.badge{background:#0f1626; border:1px solid var(--line); padding:8px 12px; border-radius:999px; color:var(--ink-muted); font-weight:700}

.hero{margin-top:22px; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow)}
h1{font-size: clamp(28px,3.2vw,48px); line-height:1.06; margin: 0 0 6px; font-weight:900; letter-spacing:.2px}
.lead{color:var(--ink-muted); margin:8px 0 12px}
.small{color:var(--ink-muted); font-size:12px}

.toc{margin: 18px 0 6px; padding: 14px 16px; border:1px dashed var(--line); border-radius: 12px; background:#0e1524}
.toc strong{display:block; margin-bottom:6px}
.toc a{color: var(--ink); text-decoration: none}
.toc a:hover{text-decoration: underline; text-underline-offset: 3px}

.section{margin: 18px 0; padding: 16px 18px; background: #0f1626; border:1px solid var(--line); border-radius: var(--radius)}
.section h2{font-size:22px; margin: 4px 0 8px}
.section h3{font-size:18px; margin: 10px 0 6px}
ul{margin:0; padding-left: 18px}
li{margin:4px 0}
.note{border-left:3px solid var(--brand); padding:10px 12px; background:#0e1524; color:var(--ink-muted); border-radius: 6px}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width: 860px){ .grid2, .grid3{ grid-template-columns: 1fr } }

hr{border:none; border-top:1px solid var(--line); margin: 20px 0}
footer{margin-top: 28px; padding-top: 12px; border-top:1px solid var(--line); color: var(--ink-muted); display:flex; align-items:center; justify-content:space-between}
footer nav a{color:inherit; text-decoration: underline; text-underline-offset: 3px}