:root{
  --bg:#080b10; --bg2:#0d1219; --card:#111823; --card2:#151f2c;
  --line:#1e2b3a; --line2:#2a3d52;
  --fg:#dfe8f2; --fg2:#9db0c6; --fg3:#6b7f96;
  --a:#3fe0b0;   /* 控制面 / 主强调 */
  --b:#5aa9ff;   /* 数据 */
  --c:#ffb454;   /* Worker */
  --d:#ff6b8a;   /* 风险 / 出口 */
  --e:#b98cff;   /* 证据 / 交付 */
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:var(--a);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family:var(--mono);font-size:.88em}

/* ---------- 顶栏 ---------- */
header.top{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(8,11,16,.86);border-bottom:1px solid var(--line);
}
.top-in{max-width:1240px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--a);box-shadow:0 0 12px var(--a)}
nav.top-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
nav.top-nav::-webkit-scrollbar{display:none}
nav.top-nav a{
  color:var(--fg2);font-size:13px;padding:6px 10px;border-radius:7px;white-space:nowrap;
}
nav.top-nav a:hover{color:var(--fg);background:var(--card2);text-decoration:none}
nav.top-nav a.on{color:var(--a);background:rgba(63,224,176,.09)}

/* ---------- 布局 ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
section{padding:64px 0 8px;border-top:1px solid transparent}
h1{font-size:clamp(28px,4.6vw,46px);line-height:1.22;margin:0 0 14px;letter-spacing:-.5px}
h2{font-size:clamp(21px,2.6vw,28px);margin:0 0 6px;letter-spacing:-.3px;display:flex;align-items:center;gap:11px}
h2 .num{
  font-family:var(--mono);font-size:12px;color:var(--bg);background:var(--a);
  padding:2px 8px;border-radius:6px;font-weight:700;letter-spacing:0;
}
h3{font-size:16.5px;margin:30px 0 8px;color:var(--fg)}
h4{font-size:14px;margin:18px 0 6px;color:var(--fg2);font-weight:600}
p{margin:9px 0;color:var(--fg2)}
p strong,li strong{color:var(--fg);font-weight:600}
.lead{font-size:16px;color:var(--fg2);max-width:78ch}
ul{padding-left:20px;color:var(--fg2)}li{margin:5px 0}
.muted{color:var(--fg3);font-size:13px}
.sec-desc{color:var(--fg3);font-size:13.5px;margin:0 0 18px}

/* ---------- Hero ---------- */
.hero{padding:66px 0 30px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:520px;pointer-events:none;
  background:radial-gradient(60% 60% at 22% 0%,rgba(63,224,176,.12),transparent 70%),
             radial-gradient(50% 60% at 78% 10%,rgba(90,169,255,.10),transparent 70%);
}
.hero>*{position:relative}
.kicker{font-family:var(--mono);font-size:12px;color:var(--a);letter-spacing:2.4px;text-transform:uppercase;margin-bottom:14px}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:30px 0 8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat b{display:block;font-size:24px;font-family:var(--mono);color:var(--fg);line-height:1.25}
.stat span{font-size:12px;color:var(--fg3)}

/* ---------- 卡片 / 栅格 ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:17px 19px}
.card h4{margin-top:0}
.card.accent-a{border-left:3px solid var(--a)}
.card.accent-b{border-left:3px solid var(--b)}
.card.accent-c{border-left:3px solid var(--c)}
.card.accent-d{border-left:3px solid var(--d)}
.card.accent-e{border-left:3px solid var(--e)}
.tag{
  display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:5px;
  background:var(--card2);color:var(--fg2);border:1px solid var(--line2);margin:2px 4px 2px 0;
}
.tag.a{color:var(--a);border-color:rgba(63,224,176,.35);background:rgba(63,224,176,.08)}
.tag.b{color:var(--b);border-color:rgba(90,169,255,.35);background:rgba(90,169,255,.08)}
.tag.c{color:var(--c);border-color:rgba(255,180,84,.35);background:rgba(255,180,84,.08)}
.tag.d{color:var(--d);border-color:rgba(255,107,138,.35);background:rgba(255,107,138,.08)}
.tag.e{color:var(--e);border-color:rgba(185,140,255,.35);background:rgba(185,140,255,.08)}

/* ---------- 图 ---------- */
.figure{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0;overflow-x:auto}
.figure svg{display:block;min-width:680px;width:100%;height:auto}
.figcap{font-size:12.5px;color:var(--fg3);margin-top:8px;padding-left:2px}
svg text{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
svg .mono{font-family:var(--mono)}
.node{cursor:default;transition:opacity .18s}
.figure.dim .node{opacity:.32}
.figure.dim .node.hit{opacity:1}

/* ---------- 表 ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:14px 0;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--card2);color:var(--fg2);font-weight:600;font-size:12.5px;white-space:nowrap}
tr:last-child td{border-bottom:none}
td code{color:var(--a);background:rgba(63,224,176,.07);padding:1px 5px;border-radius:4px}
td.m{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.mth{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px}
.mth.get{color:var(--b);background:rgba(90,169,255,.12)}
.mth.post{color:var(--a);background:rgba(63,224,176,.12)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0}
.tabs button{
  font:inherit;font-size:13px;color:var(--fg2);background:var(--card);border:1px solid var(--line);
  padding:7px 14px;border-radius:9px;cursor:pointer;transition:.15s;
}
.tabs button:hover{color:var(--fg);border-color:var(--line2)}
.tabs button.on{color:var(--bg);background:var(--a);border-color:var(--a);font-weight:600}
.panel[hidden]{display:none}

/* ---------- 代码 ---------- */
pre{
  background:#070a0e;border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:#c6d6e6;margin:12px 0;
}
pre .c{color:#5c7186}          /* 注释 */
pre .k{color:#ff8fb0}          /* 关键字 */
pre .s{color:#7ee0b8}          /* 字符串 */
pre .n{color:#ffc37a}          /* 数字/常量 */
pre .f{color:#7cc0ff}          /* 函数 */

/* ---------- 提示块 ---------- */
.note{border-left:3px solid var(--b);background:rgba(90,169,255,.06);padding:12px 16px;border-radius:0 10px 10px 0;margin:14px 0;font-size:13.5px;color:var(--fg2)}
.warn{border-left:3px solid var(--d);background:rgba(255,107,138,.06);padding:12px 16px;border-radius:0 10px 10px 0;margin:14px 0;font-size:13.5px;color:var(--fg2)}
.note b,.warn b{color:var(--fg)}

/* ---------- 时间线 ---------- */
.timeline{position:relative;margin:20px 0 0;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line2)}
.tl{position:relative;padding:0 0 20px}
.tl::before{
  content:"";position:absolute;left:-23px;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--a);
}
.tl b{color:var(--fg);font-size:14.5px}
.tl .who{font-family:var(--mono);font-size:11px;color:var(--fg3);margin-left:8px}
.tl p{margin:3px 0 0;font-size:13.5px}

footer{margin-top:70px;padding:26px 0 46px;border-top:1px solid var(--line);color:var(--fg3);font-size:13px}
@media(max-width:640px){
  .top-in{padding:9px 14px}.wrap{padding:0 14px}
  section{padding:46px 0 4px}
  nav.top-nav{display:none}
}