:root{
  --bg:#f6f4ee; --surface:#ffffff; --surface-2:#efece2; --ink:#242420;
  --muted:#736f63; --line:#dcd8cb; --accent:#2f5c3f; --accent-ink:#f3f8f4;
  --accent-soft:#e3ece4;
  --bar-tint:#cfe0d4;
  --shadow: 0 1px 2px rgba(36,36,32,0.06), 0 6px 20px -8px rgba(36,36,32,0.15);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1c17; --surface:#242620; --surface-2:#2c2e26; --ink:#eeece2;
    --muted:#a7a394; --line:#3a3c32; --accent:#6fbf8b; --accent-ink:#0f1a13;
    --accent-soft:#26362b;
    --bar-tint:#33492f;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -10px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --bg:#1b1c17; --surface:#242620; --surface-2:#2c2e26; --ink:#eeece2;
  --muted:#a7a394; --line:#3a3c32; --accent:#6fbf8b; --accent-ink:#0f1a13;
  --accent-soft:#26362b;
  --bar-tint:#33492f;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -10px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans SC","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
code,kbd,pre{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;}

/* ================= 布局 ================= */
.layout{
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  gap:44px;
  max-width:1180px;
  margin:0 auto;
  padding:36px 24px 96px;
}

/* ================= 左侧导航 ================= */
.sidebar{position:sticky; top:24px; align-self:start;}
.sidebar .brand{
  font-family:"Noto Serif SC",serif; font-weight:700; font-size:16px;
  line-height:1.4; margin-bottom:4px;
}
.sidebar .brand-sub{font-size:11.5px; color:var(--muted); margin-bottom:20px; line-height:1.5;}
.nav{display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--line);}
.nav a{
  display:block; padding:8px 12px; margin-left:-2px;
  border-left:2px solid transparent;
  color:var(--muted); text-decoration:none; font-size:13px;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.nav a:hover{color:var(--ink); background:var(--surface-2);}
.nav a.active{color:var(--accent); border-left-color:var(--accent); font-weight:600; background:var(--accent-soft);}
.nav .nav-group{
  font-size:10.5px; color:var(--muted); letter-spacing:.08em;
  margin:16px 0 6px 12px; text-transform:uppercase;
}
.back{
  display:inline-block; margin-top:24px; font-size:12px; color:var(--muted);
  text-decoration:none; padding:6px 10px; border:1px solid var(--line);
  border-radius:8px; transition:all .12s ease;
}
.back:hover{color:var(--accent); border-color:var(--accent);}

/* ================= 正文 ================= */
main{min-width:0;}
header.page{
  padding-bottom:22px; margin-bottom:34px; border-bottom:1px solid var(--line);
}
header.page h1{
  font-family:"Noto Serif SC",serif; font-weight:700;
  font-size:30px; margin:0 0 10px; line-height:1.3;
}
header.page .sub{color:var(--muted); font-size:13.5px; line-height:1.7;}
header.page .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;}
.tag{
  font-size:11px; padding:3px 9px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid transparent; white-space:nowrap;
}
section{margin-bottom:52px; scroll-margin-top:24px;}
section > h2{
  font-family:"Noto Serif SC",serif; font-weight:700; font-size:21px;
  margin:0 0 6px; display:flex; align-items:baseline; gap:10px;
}
section > h2 .num{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  color:var(--accent); background:var(--accent-soft);
  padding:2px 8px; border-radius:6px;
}
section > .lead{color:var(--muted); font-size:13px; margin:0 0 22px; line-height:1.75;}
h3{
  font-family:"Noto Serif SC",serif; font-weight:700; font-size:16px;
  margin:30px 0 12px; padding-left:11px; border-left:3px solid var(--accent);
}
h4{font-size:13.5px; margin:20px 0 8px; font-weight:600;}
p{font-size:13.5px; line-height:1.85; margin:0 0 12px;}
ul,ol{font-size:13.5px; line-height:1.85; padding-left:22px; margin:0 0 14px;}
li{margin-bottom:5px;}
li::marker{color:var(--accent);}
strong{font-weight:600;}

/* 卡片 */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:22px 22px 18px; box-shadow:var(--shadow); margin-bottom:18px;
}
.card > h3{margin-top:0;}
.card-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-bottom:4px;}
.card-head h3{margin:0; padding:0; border:0; font-size:16.5px;}
.card-head .badge{
  font-size:11px; padding:2px 8px; border-radius:5px;
  background:var(--surface-2); color:var(--muted); font-family:"IBM Plex Mono",monospace;
}
.card .meta-line{font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.6;}

/* 指标格子 */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px; margin:18px 0 26px;
}
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:11px; padding:14px 15px;
}
.stat .v{
  font-family:"IBM Plex Mono",monospace; font-size:21px; font-weight:600;
  color:var(--accent); line-height:1.15;
}
.stat .v small{font-size:12px; font-weight:500;}
.stat .k{font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.45;}

/* 表格 */
.table-scroll{overflow-x:auto; margin:16px 0 10px; border:1px solid var(--line); border-radius:11px; background:var(--surface);}
table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:520px;}
th,td{padding:6px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; line-height:1.5;}
th{
  background:var(--surface-2); font-weight:600; font-size:11px;
  color:var(--muted); letter-spacing:.04em; position:sticky; top:0; z-index:1;
}
tbody tr:last-child td{border-bottom:0;}
tbody tr:nth-child(even){background:rgba(128,128,128,.06);}
tbody tr:hover{background:var(--surface-2);}

/* 数字列: 等宽字体 + 表格数字。默认左对齐(与同列文字保持一致),
   仅基准表需要右对齐做数值比较 */
th.num,td.num{
  font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
#benchTable th.num,#benchTable td.num{text-align:right;}
#benchTable th.num{padding-right:12px;}
td.rank{font-family:"IBM Plex Mono",monospace; color:var(--muted); text-align:right; width:34px; padding-right:4px;}
td.model{font-family:"IBM Plex Mono",monospace; font-size:12px;}

/* 单元格内刻度条: --pct 由生成脚本写入, 不占额外列宽。
   做成单元格底部一条 3px 细条 —— 不压到文字, 方向保持惯例的“越长越好” */
td.bar{
  background-image:linear-gradient(var(--bar-tint), var(--bar-tint));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:var(--pct,0%) 3px;
  padding-bottom:8px;
}

/* 键值参数表(键|值|键|值): 值紧跟键, 表格按内容自适应宽度。
   若像普通表格那样撑满整行, 值会被推到列最右侧, 与标签拉开数百像素的空档。 */
.table-scroll.kv-wrap{display:inline-block; max-width:100%;}
table.kv{width:auto; min-width:0;}
table.kv th,table.kv td{text-align:left;}
table.kv th.num,table.kv td.num{text-align:left;}
table.kv th:nth-child(odd),table.kv td:nth-child(odd){padding-right:26px;}
table.kv th:nth-child(even),table.kv td:nth-child(even){padding-right:46px;}
table.kv th:last-child,table.kv td:last-child{padding-right:12px;}

/* 最佳值: 预留固定宽度标记位, 打标后数字不会左右错位 */
.mark{display:inline-block; width:12px; text-align:left; color:var(--accent); font-size:9px;}
td.best{color:var(--accent); font-weight:600;}
tr.top1 td:first-child{box-shadow:inset 3px 0 0 var(--accent);}

/* 图例 */
.table-legend{font-size:11px; color:var(--muted); margin:0 0 22px; display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
.table-legend .swatch{display:inline-block; width:22px; height:9px; border-radius:3px; margin-right:6px; vertical-align:middle;}
.table-legend .swatch.bar{background:var(--bar-tint); height:3px; width:26px; border-radius:2px; margin-bottom:3px;}
.table-legend .swatch.best{background:var(--accent); width:11px; height:11px; border-radius:50%;}

/* 代码块 */
pre{
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; overflow-x:auto; font-size:12px; line-height:1.7;
  margin:12px 0 16px;
}
pre .c{color:var(--muted);}
code:not(pre code){
  background:var(--surface-2); padding:1.5px 5px; border-radius:4px; font-size:12px;
}

/* 图片 */
figure{margin:20px 0; }
figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:11px; background:var(--surface);
}
figcaption{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.6; text-align:center;}
.fig-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px;}

/* 名词解释: 词典式两栏 —— 术语列固定宽度, 定义列吃掉剩余宽度 */
dl.gloss{
  display:grid; grid-template-columns:minmax(168px, 208px) minmax(0, 1fr);
  gap:0 28px; margin:0 0 10px;
}
dl.gloss dt{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600;
  color:var(--ink); padding-top:11px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:7px;
}
dl.gloss dt .zh{
  font-family:"Noto Sans SC",sans-serif; font-weight:500;
  font-size:12px; color:var(--accent);
}
dl.gloss dd{
  margin:0; padding-top:11px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); line-height:1.8;
}
dl.gloss dt:first-of-type,dl.gloss dd:first-of-type{border-top:0;padding-top:4px;}
@media (max-width:920px){
  dl.gloss{grid-template-columns:1fr; gap:0;}
  dl.gloss dt{padding-top:14px;}
  dl.gloss dd{padding-top:0; border-top:0; margin:4px 0 0;}
  dl.gloss dt:first-of-type{padding-top:4px;}
}
dl.gloss dd code{background:var(--surface-2); padding:1px 4px; border-radius:3px; font-size:11.5px;}
dl.gloss dd b{color:var(--ink); font-weight:600;}


/* 傻瓜式教学: 步骤块 */
.steps{margin:22px 0 10px;}
.step{
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:18px 22px 4px; margin-bottom:14px; box-shadow:var(--shadow);
}
.step-hd{display:flex; align-items:center; gap:11px; margin-bottom:6px;}
.step-hd .n{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600;
  width:27px; height:27px; border-radius:8px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink);
}
.step-hd h4{margin:0; font-size:15px; font-family:"Noto Serif SC",serif;}
.step .goal{font-size:12px; color:var(--muted); margin:0 0 12px 38px; line-height:1.7;}
.step > ul:last-child,.step > ol:last-child,.step > p:last-child{margin-bottom:14px;}

/* 预期输出 */
.expect{
  background:var(--surface-2); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:10px 14px; margin:10px 0 16px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.75;
  color:var(--muted); white-space:pre; overflow-x:auto;
}
.expect::before{
  content:"预期输出"; display:block; font-family:"Noto Sans SC",sans-serif;
  font-size:10.5px; color:var(--accent); letter-spacing:.06em; margin-bottom:6px;
}

/* 勾选清单 */
.checklist{list-style:none; padding-left:0; margin:0 0 14px;}
.checklist li{position:relative; padding-left:24px; margin-bottom:6px;}
.checklist li::before{
  content:""; position:absolute; left:2px; top:.48em;
  width:10px; height:10px; border:1.5px solid var(--accent); border-radius:3px;
}

/* 允许换行的表格(内容较长) —— 只解除不换行限制, 不预设列宽 */
table.wrap td,table.wrap th{white-space:normal; vertical-align:top;}

/* 3 列排查表(报错 | 原因 | 解决)专用的列宽 */
table.trouble td:first-child{width:27%; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink);}
table.trouble td:nth-child(2){width:28%;}

/* 多列内容表: 按 colgroup 固定列宽, 避免浏览器把列挤成逐字换行 */
table.fixed{table-layout:fixed;}
table.fixed td,table.fixed th{white-space:normal; vertical-align:top;}
table.fixed th{overflow-wrap:anywhere;}

/* 提示块 */
.note{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 9px 9px 0; padding:12px 16px; margin:16px 0;
  font-size:12.5px; line-height:1.75;
}
.note.warn{border-left-color:#b8860b; background:rgba(184,134,11,.11);}
.note .t{font-weight:600; display:block; margin-bottom:3px;}

/* 两栏对照 */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:16px 0;}
.mini{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:16px 17px;}
.mini h4{margin:0 0 8px; font-size:13.5px; font-family:"Noto Serif SC",serif;}
.mini ul{padding-left:18px; margin:0; font-size:12.5px;}

footer.page{
  margin-top:60px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:11.5px; line-height:1.8;
}

/* 顶部进度条 */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--accent); z-index:99; transition:width .1s linear;
}
/* 移动端导航开关 */
#navToggle{display:none;}

@media (max-width:920px){
  .layout{grid-template-columns:1fr; gap:20px; padding:20px 18px 72px;}
  .sidebar{position:static; border-bottom:1px solid var(--line); padding-bottom:14px;}
  .sidebar .brand-sub{margin-bottom:12px;}
  #navToggle{
    display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
    font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer;
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    font-family:"Noto Sans SC",sans-serif;
  }
  .nav{flex-direction:row; flex-wrap:wrap; border-left:0; gap:6px;}
  .nav .nav-group{display:none;}
  .nav a{
    border-left:0; border:1px solid var(--line); border-radius:8px;
    padding:6px 11px; margin:0; background:var(--surface); font-size:12px;
  }
  .nav a.active{border-color:var(--accent);}
  .nav.collapsed{display:none;}
  header.page h1{font-size:24px;}
  section > h2{font-size:19px;}
}

/* ===== 子页面与跳转按钮 ===== */
.subpage{max-width:980px; margin:0 auto; padding:36px 24px 90px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px;
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-size:13.5px; font-weight:600;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{transform:translateY(-1px); opacity:.92;}
.backbar{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:22px;
  font-size:12.5px; color:var(--muted); text-decoration:none;
  padding:6px 12px; border:1px solid var(--line); border-radius:9px;
  transition:color .12s ease, border-color .12s ease;
}
.backbar:hover{color:var(--accent); border-color:var(--accent);}

/* ===== 版本 / 阶段徽标 ===== */
.ver{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:11.5px;
  color:var(--accent); background:var(--accent-soft);
  padding:2px 8px; border-radius:5px; white-space:nowrap;
}
.ver.old{color:var(--muted); background:var(--surface-2);}
/* 分类导航小标题行 */
.catbar{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px;}
.catbar a{
  font-size:12px; padding:5px 12px; border-radius:20px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  transition:color .12s ease, border-color .12s ease;
}
.catbar a:hover{color:var(--accent); border-color:var(--accent);}