:root{
  --bg:#0a0e14;--surf:#0f1722;--surf2:#142139;--ln:rgba(255,255,255,.08);
  --text:#f0f6ff;--mut:#94a3b8;--accent:#22d3ee;--ok:#34d399;--warn:#fbbf24;--bad:#f87171;--info:#a855f7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at top,#0e1530 0%,#050814 60%);color:var(--text);font:16px/1.65 'DM Sans',system-ui,sans-serif;min-height:100vh}
a{color:var(--accent)}
a:hover{color:#fff}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-bottom:1px solid var(--ln);background:rgba(5,8,20,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--surf);border:1px solid var(--ln);border-radius:8px;color:var(--accent);font-weight:800;font-size:14px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-title{font-size:14px;font-weight:800}
.brand-sub{font-size:11px;color:var(--mut);font-weight:500}
.topbar-nav a{color:var(--mut);text-decoration:none;margin-left:18px;font-size:14px;font-weight:500}
.topbar-nav a:hover,.topbar-nav a.active{color:var(--text)}
main{max-width:1100px;margin:0 auto;padding:32px 28px 80px}
.eyebrow{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin:0 0 8px}
h1{font-size:36px;line-height:1.2;margin:0 0 14px;font-weight:800;background:linear-gradient(180deg,#fff,#a3d4e8 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:24px;margin:36px 0 12px;font-weight:700;color:#fff}
h3{font-size:18px;margin:24px 0 8px;font-weight:700;color:#cbe6ff}
p{color:#d8e7ff;margin:0 0 14px}
.lead{font-size:18px;color:var(--text);margin:0 0 22px}
.muted{color:var(--mut)}
.card{background:linear-gradient(180deg,rgba(20,33,57,.6),rgba(15,27,45,.4));border:1px solid var(--ln);border-radius:12px;padding:20px;margin:0 0 16px}
.card h3{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.kpi{padding:18px;background:rgba(20,33,57,.5);border:1px solid var(--ln);border-radius:12px}
.kpi .num{font-size:28px;font-weight:800;color:#fff;line-height:1.1}
.kpi .lbl{color:var(--mut);font-size:12.5px;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0 24px}
table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14px}
table th{text-align:left;padding:10px 12px;background:rgba(34,211,238,.08);border-bottom:1px solid var(--ln);color:#67e8f9;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);color:#d8e7ff}
table tr:hover td{background:rgba(34,211,238,.04)}
table.compact td{padding:7px 10px;font-size:13.5px}
ul,ol{color:#d8e7ff;padding-left:22px}
ul li,ol li{margin-bottom:6px}
.callout{background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(168,85,247,.04));border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0}
.callout p{margin:0;font-size:14.5px}
.callout-warn{background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(248,113,113,.04));border-left-color:var(--warn)}
.callout-bad{background:linear-gradient(135deg,rgba(248,113,113,.10),rgba(251,146,60,.04));border-left-color:var(--bad)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pill.cyan{background:rgba(34,211,238,.15);color:#67e8f9}
.pill.amber{background:rgba(251,191,36,.15);color:var(--warn)}
.pill.purple{background:rgba(168,85,247,.15);color:var(--info)}
.pill.green{background:rgba(52,211,153,.15);color:var(--ok)}
.pill.red{background:rgba(248,113,113,.15);color:var(--bad)}
.btn{display:inline-block;padding:13px 26px;background:linear-gradient(135deg,#22d3ee,#a855f7);color:#050814;font-weight:800;border-radius:10px;text-decoration:none;font-size:15px;letter-spacing:.02em}
.btn:hover{filter:brightness(1.1);color:#050814}
.btn-2{background:transparent;color:var(--accent);border:1px solid rgba(34,211,238,.45);padding:12px 25px}
.btn-2:hover{background:rgba(34,211,238,.06);color:var(--accent)}
.cta-row{display:flex;gap:12px;margin:24px 0;flex-wrap:wrap}
.section{margin:32px 0}
.scroll-x{overflow-x:auto}
code,pre{font-family:Consolas,'Courier New',monospace;background:rgba(34,211,238,.08);padding:2px 6px;border-radius:4px;font-size:13.5px;color:#67e8f9}
pre{padding:14px 16px;border-radius:8px;overflow-x:auto;line-height:1.5}
.source-list a{display:block;padding:10px 14px;background:rgba(20,33,57,.4);border:1px solid var(--ln);border-radius:8px;color:var(--text);text-decoration:none;margin:8px 0;font-size:14px}
.source-list a:hover{border-color:var(--accent)}
.source-list .src-meta{color:var(--mut);font-size:12px;margin-top:2px}
footer{padding:28px;border-top:1px solid var(--ln);text-align:center;color:var(--mut);font-size:13px;margin-top:60px}
footer a{color:var(--accent);text-decoration:none}
@media(max-width:720px){
  h1{font-size:28px}
  h2{font-size:20px}
  .topbar{padding:14px 18px;flex-wrap:wrap;gap:10px}
  .topbar-nav a{margin-left:0;margin-right:14px}
}