/* ============================================================
   《撞墙》 WALL — 一本排队与拥塞的小书

   设计系统：那面墙（the wall）

   母题只有一张图。横轴是「你把机器用得多满」，纵轴是「要等多久」：

        等待 │                                    ┊
             │                                   ╱┊
             │                              ╱╱╱╱  ┊
     ── 能忍 ─┼──────────────╳╱────────────────────┊──
             │        ╱╱╱╱╱                       ┊
             └──────────┴─────────────────────────┴──
                        ρ★                        100%
                     你真正的天花板              那面墙

   三样东西，全书每一章都会再出现一次：
     1. 那条上翘的曲线   —— ρ/(1−ρ)，在 100% 处竖直起飞
     2. 一条水平的「能忍」线 —— 你的 SLA
     3. 交点 ρ★          —— 你真正能跑到的利用率，不是 100%

   而这本书真正要教的是：**曲线的高度不由速度决定，由「不齐」决定。**
   不齐一大，整条曲线被乘高，交点就往左搬 —— 墙提前了。

   ★ 三条视觉规则：

     1. 语义配色，全书含义不变：
          到达 λ   靛蓝    活从哪来
          服务 μ   松绿    你手上那台机器有多快
          等待 W   琥珀    ← 这是账单，是钱
          不齐 c²  品红    ← 第二个成因，全书的暗线
          余量     青      ← 解法：你买的不是速度，是它
          墙 ρ→1   朱红    ← 唯一的红线，只给「满」用
        琥珀（等待）和青（余量）是一对：**你付的每一分等待，都是没留够的余量。**

     2. 队列一律画成一排方块 ▮▮▮，服务台一律画成一个圆 ◉。
        方块是琥珀色（在排队 = 在花钱），圆是松绿色。

     3. 纸底是一张时间刻度纸：极淡的竖线，每 24px 一根，每六根加深。
        因为这本书从头到尾，横轴都是时间。

   六卷 = 六色，每一卷用它讲的那个概念的颜色：
     I 排起来(琥珀·等待)  II 不齐(品红·变异)   III 那面墙(朱红·利用率)
     IV 加人(靛蓝·到达)   V 插队(松绿·服务)    VI 留余(青·余量)

   亮色 only（用户眼睛受不了暗色）。零依赖，系统字体栈，全 SVG 零 canvas。
   ============================================================ */

:root {
  /* —— 纸与墨 —— */
  --paper: #FCFBF7;
  --paper-deep: #F4F2EA;
  --paper-dim: #E7E4D8;
  --ink: #191814;
  --ink-body: #383530;
  --ink-faint: #837D71;
  --line: #E2DFD1;
  --rule: rgba(44, 75, 160, 0.055);        /* 时间刻度纸的细线 */
  --rule-strong: rgba(44, 75, 160, 0.10);

  /* —— 语义配色：全书不变 —— */
  --arr:   #2C4BA0;    /* 到达 λ    靛蓝 */
  --srv:   #1E6B4E;    /* 服务 μ    松绿 */
  --wait:  #A96A00;    /* 等待 W    琥珀 —— 账单 */
  --vary:  #A31B6E;    /* 不齐 c²   品红 —— 暗线 */
  --slack: #147C8C;    /* 余量      青   —— 解法 */
  --wall:  #C0392B;    /* 墙 ρ→1    朱红 —— 唯一的红线 */
  --edge:  #57534E;

  --arr-mist:   #E6EBF7;
  --srv-mist:   #E3F0E9;
  --wait-mist:  #F9EEDA;
  --vary-mist:  #F9E4F0;
  --slack-mist: #E0EFF2;
  --wall-mist:  #FBE9E6;

  --arr-deep:   #1F3878;
  --srv-deep:   #145039;
  --wait-deep:  #855400;
  --vary-deep:  #7C1453;
  --slack-deep: #0E5F6C;
  --wall-deep:  #9A2C20;

  /* —— 六卷 —— */
  --v0: #A96A00;   /* I   排起来  QUEUE   琥珀 */
  --v1: #A31B6E;   /* II  不齐    JITTER  品红 */
  --v2: #C0392B;   /* III 那面墙  WALL    朱红 */
  --v3: #2C4BA0;   /* IV  加人    SCALE   靛蓝 */
  --v4: #1E6B4E;   /* V   插队    ORDER   松绿 */
  --v5: #147C8C;   /* VI  留余    SLACK   青   */

  --v0-mist: #F9EEDA; --v1-mist: #F9E4F0; --v2-mist: #FBE9E6;
  --v3-mist: #E6EBF7; --v4-mist: #E3F0E9; --v5-mist: #E0EFF2;

  --v0-deep: #855400; --v1-deep: #7C1453; --v2-deep: #9A2C20;
  --v3-deep: #1F3878; --v4-deep: #145039; --v5-deep: #0E5F6C;

  /* 当前卷色：章节页在 body[data-vol="N"] 上重绑 */
  --vol: var(--v0);
  --vol-deep: var(--v0-deep);
  --vol-mist: var(--v0-mist);

  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --topbar-h: 56px;
  --maxw: 800px;
}

body[data-vol="1"] { --vol: var(--v0); --vol-deep: var(--v0-deep); --vol-mist: var(--v0-mist); }
body[data-vol="2"] { --vol: var(--v1); --vol-deep: var(--v1-deep); --vol-mist: var(--v1-mist); }
body[data-vol="3"] { --vol: var(--v2); --vol-deep: var(--v2-deep); --vol-mist: var(--v2-mist); }
body[data-vol="4"] { --vol: var(--v3); --vol-deep: var(--v3-deep); --vol-mist: var(--v3-mist); }
body[data-vol="5"] { --vol: var(--v4); --vol-deep: var(--v4-deep); --vol-mist: var(--v4-mist); }
body[data-vol="6"] { --vol: var(--v5); --vol-deep: var(--v5-deep); --vol-mist: var(--v5-mist); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  font-family: var(--sans);
  background-color: var(--paper);
  /* 纸底 = 时间刻度纸：极淡的竖线，每 24px 一根，每六根加深 */
  background-image:
    repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 144px),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 24px);
  color: var(--ink-body);
  line-height: 1.9;
  font-size: 16.5px;
  padding-top: var(--topbar-h);
}

::selection { background: rgba(192, 57, 43, 0.14); }

a { color: var(--vol-deep); }

/* ============================================================
   代码块 / 算式块
   ============================================================ */
pre {
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.78;
  background: #FFFEFA;
  border: 1px solid var(--line);
  border-left: 3px solid var(--vol);
  border-radius: 3px;
  padding: 15px 17px 15px 16px;
  margin: 20px 0;
  overflow-x: auto;
  white-space: pre;
  color: #2E2B26;
  tab-size: 2;
}
pre .tag-corner {
  position: absolute; top: 0; right: 0;
  font-size: 9.5px; letter-spacing: 0.12em;
  padding: 2px 7px;
  color: var(--ink-faint);
  background: var(--paper-deep);
  border-bottom-left-radius: 3px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
pre.calc { border-left-color: var(--arr); background: #FCFDFF; }
pre.q    { border-left-color: var(--wait); background: #FFFDF7; }
pre.tbl  { border-left-color: var(--slack); background: #FAFDFE; }
pre.out  { border-left-color: var(--srv); background: #FBFEFC; }
pre.js   { border-left-color: var(--vary); background: #FEFCFE; }
pre.log  { border-left-color: var(--edge); background: #FBFAF6; }

/* 高亮 token */
.tk-co { color: #948D7E; font-style: italic; }
.tk-nu { color: var(--arr-deep); font-variant-numeric: tabular-nums; font-weight: 600; }
.tk-arrow { color: var(--edge); font-weight: 700; }
/* ★ 本书特产：ρ（和它后面的数）永远是朱红加底色 —— 全书的主角 */
.tk-rho { color: var(--wall); font-weight: 700; background: var(--wall-mist);
          padding: 0 3px; border-radius: 2px; }
.tk-sym { color: var(--vary-deep); font-weight: 700; }      /* λ μ c² 这些记号 */
.tk-w   { color: var(--wait-deep); font-weight: 700; }      /* W Wq L Lq */
.tk-box { color: var(--wait); }                              /* ▮ 排队的人 */
.tk-srv { color: var(--srv); font-weight: 700; }             /* ◉ 服务台 */
.tk-hi  { color: var(--wait-deep); font-weight: 700; }
.tk-fn  { color: var(--slack-deep); }
.tk-kw  { color: var(--vary-deep); font-weight: 600; }
.tk-st  { color: var(--srv-deep); }
.tk-gl  { color: var(--line); }
.oerr { color: var(--wall-deep); }
.ook  { color: var(--srv-deep); }
.odim { color: var(--ink-faint); }
.ohot { color: var(--wait-deep); font-weight: 600; }
.onum { color: var(--arr-deep); font-variant-numeric: tabular-nums; }

code {
  font-family: var(--mono);
  font-size: 0.885em;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.5px 4px;
  color: var(--ink);
  white-space: nowrap;
}
pre code { background: none; border: none; padding: 0; font-size: 1em; white-space: pre; }

/* 行内的语义标记：正文里点名一个量时用 */
.qt {
  font-family: var(--mono); font-weight: 700; font-size: 0.92em;
  padding: 0.5px 5px; border-radius: 9px; border: 1.2px solid currentColor;
  white-space: nowrap;
}
.qt.a { color: var(--arr-deep);   background: var(--arr-mist); }
.qt.s { color: var(--srv-deep);   background: var(--srv-mist); }
.qt.w { color: var(--wait-deep);  background: var(--wait-mist); }
.qt.v { color: var(--vary-deep);  background: var(--vary-mist); }
.qt.k { color: var(--slack-deep); background: var(--slack-mist); }
.qt.r { color: var(--wall-deep);  background: var(--wall-mist); }

/* ============================================================
   顶栏 + 进度
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  background: rgba(252, 251, 247, 0.94);
  backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid var(--line);
  z-index: 60;
}
.topbar .brand {
  font-family: var(--serif); font-size: 17.5px; font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.topbar .brand:hover { color: var(--vol-deep); }
.topbar .brand .mark { color: var(--wall); font-size: 15px; font-weight: 700; }
.pipe-wrap { flex: 1; position: relative; min-width: 70px; height: 34px; }
.pipe-wrap svg { display: block; }
.pipe-rail { stroke: var(--paper-dim); stroke-width: 3; stroke-linecap: round; }
.pipe-fill { stroke-width: 3; stroke-linecap: round; }
.pipe-tick { fill: var(--paper-dim); }
.pipe-label {
  position: absolute; top: 21px; font-size: 9.5px;
  color: var(--ink-faint); letter-spacing: 0.1em; font-family: var(--mono);
}
.pipe-label.start { left: 0; }
.pipe-label.end { right: 0; }
.ch-pos {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
  letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
}
.ch-pos b { color: var(--vol-deep); }
.toc-btn {
  font-family: var(--sans); font-size: 12.5px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  color: var(--ink-body); cursor: pointer; flex-shrink: 0;
}
.toc-btn:hover { background: var(--vol-mist); border-color: var(--vol); color: var(--vol-deep); }

/* ============================================================
   目录覆盖层
   ============================================================ */
.toc-overlay {
  position: fixed; inset: 0; background: rgba(252, 251, 247, 0.985);
  z-index: 70; overflow-y: auto; padding: 34px 20px 70px;
  opacity: 0; pointer-events: none; transition: opacity 0.16s;
}
.toc-overlay.open { opacity: 1; pointer-events: auto; }
.toc-inner { max-width: 760px; margin: 0 auto; }
.toc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.toc-head h2 { font-family: var(--serif); font-size: 25px; color: var(--ink); letter-spacing: 0.12em; }
.toc-head .close {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
  background: none; border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 10px; cursor: pointer;
}
.toc-head .close:hover { color: var(--wall); border-color: var(--wall); }
.toc-sub { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 22px; line-height: 1.7; }
.toc-vol { margin-bottom: 20px; padding-left: 13px; border-left: 3px solid var(--vc); }
.toc-vol .vol-name {
  font-family: var(--serif); font-size: 14.5px; font-weight: 700;
  color: var(--vc); letter-spacing: 0.1em; margin-bottom: 2px;
}
.toc-vol .vol-desc { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 7px; line-height: 1.65; }
.toc-vol ol { list-style: none; }
.toc-vol li { margin: 1px 0; }
.toc-vol a {
  display: flex; align-items: baseline; gap: 9px; text-decoration: none;
  padding: 5px 9px; border-radius: 4px; color: var(--ink-body); font-size: 14px;
}
.toc-vol a:hover { background: var(--paper-deep); color: var(--ink); }
.toc-vol a.cur { background: var(--vc); color: #fff; }
.toc-vol a.cur .no, .toc-vol a.cur .demo-tag { color: rgba(255, 255, 255, 0.84); }
.toc-vol .no {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  flex-shrink: 0; width: 20px;
}
.toc-vol .demo-tag {
  margin-left: auto; font-size: 11px; color: var(--ink-faint);
  font-family: var(--mono); white-space: nowrap; flex-shrink: 0;
}

/* ============================================================
   正文
   ============================================================ */
.content { padding: 0 20px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

.chapter-head { padding: 46px 0 8px; }
.chapter-head .kicker {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.chapter-head .kicker .vol { color: var(--vol-deep); font-weight: 700; }
.chapter-head .kicker .sep { width: 12px; height: 1px; background: var(--line); }
.chapter-head .kicker .depth { margin-left: auto; }
.chapter-head h1 {
  font-family: var(--serif); font-size: 31px; line-height: 1.42;
  color: var(--ink); font-weight: 700; margin-top: 15px; letter-spacing: 0.01em;
}
.chapter-head h1 em { color: var(--vol-deep); font-style: normal; }
.chapter-head .lede { font-size: 16.5px; color: var(--ink-body); margin-top: 16px; line-height: 1.92; }
.chapter-head .tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.chapter-head .tags span {
  font-family: var(--mono); font-size: 10.5px; color: var(--vol-deep);
  background: var(--vol-mist); border: 1px solid var(--vol);
  border-radius: 20px; padding: 2px 10px; letter-spacing: 0.04em;
}
.headrule { border: none; border-top: 1px solid var(--line); margin: 26px 0 0; }

.prose { padding: 12px 0 30px; }
.prose h2 {
  font-family: var(--serif); font-size: 22px; color: var(--ink); font-weight: 700;
  margin: 46px 0 14px; line-height: 1.5; letter-spacing: 0.02em;
  padding-left: 13px; border-left: 4px solid var(--vol);
}
.prose h3 { font-size: 17px; color: var(--ink); font-weight: 700; margin: 32px 0 11px; line-height: 1.6; }
.prose h3::before { content: '▮'; color: var(--vol); margin-right: 7px; font-size: 0.72em; }
.prose p { margin: 15px 0; }
.prose ul, .prose ol { margin: 15px 0 15px 22px; }
.prose li { margin: 7px 0; }
.prose ul li::marker { color: var(--vol); }
.prose ol li::marker { color: var(--vol); font-family: var(--mono); font-size: 0.9em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
  margin: 20px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--paper-dim);
  color: var(--ink-faint); font-size: 15.4px;
}
.prose table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px;
  display: block; overflow-x: auto;
}
.prose th, .prose td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
}
.prose th { background: var(--paper-deep); font-weight: 700; color: var(--ink); white-space: nowrap; }
.prose td.num, .prose th.num { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose tr.hot td { background: var(--wall-mist); }
.prose tr.cool td { background: var(--slack-mist); }

/* ============================================================
   贯穿组件（.co = callout）
   ============================================================ */
.co {
  margin: 24px 0; padding: 15px 17px;
  border-radius: 4px; font-size: 15.2px; line-height: 1.85;
}
.co .co-t {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  margin-bottom: 9px; font-weight: 700;
}
.co p { margin: 9px 0; }
.co p:first-of-type { margin-top: 0; }
.co ul, .co ol { margin: 9px 0 9px 20px; }
.co li { margin: 5px 0; }
.co pre { margin: 12px 0; font-size: 12.6px; }

/* ◆ 核心：一章里必须记住的那句话 */
.co.core {
  background: var(--vol-mist); border: 1px solid var(--vol);
  border-left-width: 4px;
}
.co.core .co-t { color: var(--vol-deep); }

/* ▷ 先估一个数：章首的自测（贯穿组件 1／2）
   这一栏是自指的 —— 你每章都会亲身体验一次「线性直觉在非线性世界里偏得多离谱」，
   而那正好是这本书的主题。 */
.co.guess {
  background: #FFFDF6; border: 1px dashed var(--wait);
}
.co.guess .co-t { color: var(--wait-deep); }
.co.guess .opts { display: grid; gap: 6px; margin: 11px 0 6px; }
.co.guess .opts span {
  font-size: 14.2px; padding: 7px 12px; border-radius: 4px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-body);
}

/* ◇ 结算：章末揭晓（贯穿组件 2／2） */
.co.settle {
  background: var(--vol-mist); border: 1px solid var(--vol);
}
.co.settle .co-t { color: var(--vol-deep); }
.co.settle .ans {
  display: inline-block; font-weight: 700; color: #fff; background: var(--vol);
  padding: 1px 11px; border-radius: 12px; font-size: 13.5px; margin-right: 7px;
}
.co.settle .why { display: block; margin: 7px 0; padding-left: 20px; text-indent: -20px;
  font-size: 14.4px; color: var(--ink-body); }
.co.settle .why b { font-family: var(--mono); color: var(--wall-deep); }
.co.settle .off {
  display: inline-block; font-family: var(--mono); font-size: 12.5px;
  color: var(--wall-deep); background: var(--wall-mist);
  border: 1px solid var(--wall); border-radius: 3px; padding: 1px 8px; margin-left: 4px;
}

/* ✗ 这个直觉是错的（规格第 7 条，验证器强制每章一个） */
.co.wrong {
  background: var(--wall-mist); border: 1px solid var(--wall); border-left-width: 4px;
}
.co.wrong .co-t { color: var(--wall-deep); }
.co.wrong .bad {
  display: block; padding-left: 18px; text-indent: -18px;
  margin: 8px 0; color: var(--wall-deep); font-weight: 600;
}
.co.wrong .bad::before { content: '✗ '; }
.co.wrong .good { display: block; padding-left: 18px; text-indent: -18px; margin: 8px 0; }
.co.wrong .good::before { content: '✓ '; color: var(--srv-deep); font-weight: 700; }

/* ▸ 在现实里（规格第 5 条） */
.co.real {
  background: #FFFEF9; border: 1px solid var(--line); border-left: 4px solid var(--wait);
}
.co.real .co-t { color: var(--wait-deep); }

/* ⇄ 和书架上其他书的关系（规格第 6 条） */
.co.link {
  background: var(--paper-deep); border: 1px solid var(--line);
}
.co.link .co-t { color: var(--ink-faint); }

/* ✎ 术语正名（规格第 3 条：被用坏的词） */
.co.term {
  background: var(--slack-mist); border: 1px solid var(--slack);
}
.co.term .co-t { color: var(--slack-deep); }

/* ⊞ 墙搬到哪了：把这一章落回母题 */
.co.moved {
  background: var(--wall-mist); border: 1px solid var(--wall);
}
.co.moved .co-t { color: var(--wall-deep); }

/* ∑ 算一遍：推导 */
.co.math {
  background: var(--vary-mist); border: 1px solid var(--vary);
}
.co.math .co-t { color: var(--vary-deep); }

/* ============================================================
   Demo
   ============================================================ */
.demo {
  margin: 26px 0; border: 1px solid var(--line); border-radius: 5px;
  background: #FFFEFA; overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.demo-head .lamp {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vol); flex-shrink: 0;
}
.demo-head .d-hint {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); font-weight: 400; letter-spacing: 0.05em;
}
.demo-body { padding: 15px 14px; }
.demo-body > *:first-child { margin-top: 0; }

.d-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.d-btn {
  font-family: var(--sans); font-size: 12.5px; padding: 5px 13px;
  border: 1px solid var(--vol); border-radius: 4px;
  background: #fff; color: var(--vol-deep); cursor: pointer; white-space: nowrap;
}
.d-btn:hover { background: var(--vol-mist); }
.d-btn.hot { background: var(--vol); color: #fff; }
.d-btn.hot:hover { background: var(--vol-deep); }
.d-btn:disabled { opacity: 0.42; cursor: default; }

.d-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.d-chip {
  font-family: var(--sans); font-size: 12px; padding: 4px 11px;
  border: 1px solid var(--line); border-radius: 20px;
  background: #fff; color: var(--ink-body); cursor: pointer; white-space: nowrap;
}
.d-chip:hover { border-color: var(--vol); color: var(--vol-deep); }
.d-chip.on { background: var(--vol); border-color: var(--vol); color: #fff; }

.d-slider { display: flex; align-items: center; gap: 10px; margin: 9px 0; font-size: 12.5px; }
.d-slider .sl-l { color: var(--ink-faint); min-width: 96px; flex-shrink: 0; }
.d-slider input[type=range] { flex: 1; min-width: 90px; accent-color: var(--vol); }
.d-slider .sl-v {
  font-family: var(--mono); font-size: 12px; color: var(--vol-deep);
  min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
/* 三个因子的滑杆用它自己的语义色，因为它们贯穿全书 */
.d-slider[data-f=util]  input[type=range] { accent-color: var(--wall); }
.d-slider[data-f=util]  .sl-v { color: var(--wall-deep); }
.d-slider[data-f=vary]  input[type=range] { accent-color: var(--vary); }
.d-slider[data-f=vary]  .sl-v { color: var(--vary-deep); }
.d-slider[data-f=time]  input[type=range] { accent-color: var(--srv); }
.d-slider[data-f=time]  .sl-v { color: var(--srv-deep); }

.d-input {
  font-family: var(--mono); font-size: 12.5px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  color: var(--ink); width: 100%;
}
.d-input:focus { outline: none; border-color: var(--vol); }

.d-switches { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0; }
.d-sw {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; padding: 5px 11px;
  border: 1.4px solid var(--line); border-radius: 5px; background: #fff;
  color: var(--ink-body); cursor: pointer; white-space: nowrap;
}
.d-sw .box {
  width: 11px; height: 11px; border: 1.4px solid currentColor; border-radius: 2px;
  flex-shrink: 0; position: relative;
}
.d-sw.on .box::after {
  content: ''; position: absolute; inset: 1.5px; background: currentColor; border-radius: 1px;
}
.d-sw[data-role=arr]   { color: var(--arr-deep); }
.d-sw[data-role=srv]   { color: var(--srv-deep); }
.d-sw[data-role=wait]  { color: var(--wait-deep); }
.d-sw[data-role=vary]  { color: var(--vary-deep); }
.d-sw[data-role=slack] { color: var(--slack-deep); }
.d-sw.on { border-color: currentColor; }
.d-sw.on[data-role=arr]   { background: var(--arr-mist); }
.d-sw.on[data-role=srv]   { background: var(--srv-mist); }
.d-sw.on[data-role=wait]  { background: var(--wait-mist); }
.d-sw.on[data-role=vary]  { background: var(--vary-mist); }
.d-sw.on[data-role=slack] { background: var(--slack-mist); }

.d-stats { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; }
.d-stat {
  flex: 1 1 108px; padding: 8px 11px; border-radius: 4px;
  background: var(--paper-deep); border: 1px solid var(--line);
}
.d-stat .k { font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono);
  letter-spacing: 0.05em; display: block; }
.d-stat .v {
  font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block; line-height: 1.36;
}
.d-stat.good  { background: var(--srv-mist);   border-color: var(--srv); }
.d-stat.good .v  { color: var(--srv-deep); }
.d-stat.bad   { background: var(--wall-mist);  border-color: var(--wall); }
.d-stat.bad .v   { color: var(--wall-deep); }
.d-stat.warn  { background: var(--wait-mist);  border-color: var(--wait); }
.d-stat.warn .v  { color: var(--wait-deep); }
.d-stat.vary  { background: var(--vary-mist);  border-color: var(--vary); }
.d-stat.vary .v  { color: var(--vary-deep); }
.d-stat.slack { background: var(--slack-mist); border-color: var(--slack); }
.d-stat.slack .v { color: var(--slack-deep); }

.d-note {
  font-size: 12.6px; color: var(--ink-faint); line-height: 1.75;
  margin: 11px 0 0; padding-top: 9px; border-top: 1px dashed var(--line);
}
.d-note b { color: var(--ink-body); }
.d-cap { font-size: 12px; color: var(--ink-faint); margin: 7px 0 0; line-height: 1.7; }
.d-err {
  font-family: var(--mono); font-size: 12px; color: var(--wall-deep);
  background: var(--wall-mist); border: 1px solid var(--wall);
  border-radius: 4px; padding: 9px 11px; white-space: pre-wrap;
}

/* ============================================================
   ★ 母题 SVG：那面墙
   ============================================================ */
.wallfig { width: 100%; display: block; margin: 6px 0; }
.wallfig .ax { stroke: var(--paper-dim); stroke-width: 1.2; }
.wallfig .axlb { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-faint); }
.wallfig .gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
/* 那条上翘的曲线 */
.wallfig .curve { stroke: var(--wait); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.wallfig .curve.alt { stroke: var(--vary); stroke-dasharray: 5 3; stroke-width: 2; }
.wallfig .curve.ghost { stroke: var(--paper-dim); stroke-width: 2; }
.wallfig .curvefill { fill: var(--wait); opacity: 0.08; }
/* ρ=1 那道竖线：全书唯一的红线 */
.wallfig .wallline { stroke: var(--wall); stroke-width: 2.4; stroke-dasharray: 5 3; }
.wallfig .walllb { font-family: var(--mono); font-size: 10px; fill: var(--wall);
  font-weight: 700; }
/* 「我能忍多久」那条水平线 */
.wallfig .sla { stroke: var(--slack); stroke-width: 1.8; stroke-dasharray: 4 3; }
.wallfig .slalb { font-family: var(--mono); font-size: 10px; fill: var(--slack-deep); }
/* 交点：你真正的天花板 */
.wallfig .star { fill: var(--slack); stroke: #fff; stroke-width: 1.6; }
.wallfig .starlb { font-family: var(--mono); font-size: 10.5px; fill: var(--slack-deep);
  font-weight: 700; }
/* 你现在站的位置 */
.wallfig .here { fill: var(--wall); stroke: #fff; stroke-width: 1.8; }
.wallfig .herelb { font-family: var(--mono); font-size: 10.5px; fill: var(--wall-deep);
  font-weight: 700; }
.wallfig .drop { stroke: var(--wall); stroke-width: 1.2; stroke-dasharray: 2 2; }
.wallfig .headroom { fill: var(--slack); opacity: 0.12; }
.wallfig .headlb { font-family: var(--mono); font-size: 9.5px; fill: var(--slack-deep); }

/* ============================================================
   队列 SVG：一排方块 + 一个圆
   ============================================================ */
.qfig { width: 100%; display: block; margin: 6px 0; }
.qfig .slot { fill: var(--wait); }
.qfig .slot.dim { fill: var(--paper-dim); }
.qfig .slot.hot { fill: var(--wall); }
.qfig .server { fill: var(--srv-mist); stroke: var(--srv); stroke-width: 2; }
.qfig .server.idle { fill: #fff; stroke: var(--paper-dim); }
.qfig .server.busy { fill: var(--srv-mist); stroke: var(--srv); }
.qfig .arrow { stroke: var(--arr); stroke-width: 1.6; fill: none; }
.qfig .lb { font-family: var(--mono); font-size: 10px; fill: var(--ink-faint); }
.qfig .lb.big { font-size: 12px; fill: var(--ink); font-weight: 700; }
.qfig .lane { stroke: var(--line); stroke-width: 1; }

/* 通用图表 */
.plot { width: 100%; display: block; margin: 4px 0; }
.plot .ax { stroke: var(--paper-dim); stroke-width: 1; }
.plot .axlb { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-faint); }
.plot .gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.plot .bar { fill: var(--wait); }
.plot .bar.b { fill: var(--vary); }
.plot .bar.c { fill: var(--slack); }
.plot .bar.dim { fill: var(--paper-dim); }
.plot .line { stroke: var(--arr); stroke-width: 2; fill: none; }
.plot .line.b { stroke: var(--wall); stroke-width: 2; fill: none; }
.plot .line.c { stroke: var(--srv); stroke-width: 2; fill: none; stroke-dasharray: 5 3; }
.plot .pt { r: 2.6; fill: var(--arr); }
.plot .pt.b { fill: var(--wall); }
.plot .mark { stroke: var(--wall); stroke-width: 1.6; stroke-dasharray: 3 2; }
.plot .marklb { font-family: var(--mono); font-size: 9.5px; fill: var(--wall-deep); }
.plot .barlb { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-faint);
  text-anchor: middle; }
.plot .area { opacity: 0.13; }

/* 一条横向的时间带：画等待/服务的分段 */
.tl { width: 100%; display: block; margin: 6px 0; }
.tl .seg-wait { fill: var(--wait); opacity: 0.85; }
.tl .seg-srv  { fill: var(--srv); opacity: 0.85; }
.tl .seg-idle { fill: var(--paper-dim); }
.tl .rowlb { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-faint); }
.tl .tick { stroke: var(--line); stroke-width: 1; }

/* 图例 */
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0;
  font-size: 11.5px; color: var(--ink-faint); }
.legend i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; }
.legend i::before {
  content: ''; width: 9px; height: 9px; border-radius: 2px; background: currentColor;
}
.legend i.arr   { color: var(--arr); }
.legend i.srv   { color: var(--srv); }
.legend i.wait  { color: var(--wait); }
.legend i.vary  { color: var(--vary); }
.legend i.slack { color: var(--slack); }
.legend i.wall  { color: var(--wall); }

/* ============================================================
   首页
   ============================================================ */
.hero { padding: 54px 0 20px; }
.hero .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  color: var(--ink-faint); text-transform: uppercase;
}
.hero h1 {
  font-family: var(--serif); font-size: 46px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.06em; margin: 12px 0 6px; line-height: 1.28;
}
.hero h1 em { font-style: normal; color: var(--wall); }
.hero .sub { font-size: 17px; color: var(--ink-body); line-height: 1.85; margin: 14px 0 0; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.hero .meta span {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px;
}
.hero-fig { margin: 30px 0 6px; }

.vol-block { margin-bottom: 34px; }
.vol-block .vh { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 4px; }
.vol-block .vno {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: #fff; background: var(--vc); border-radius: 3px; padding: 1px 8px;
}
.vol-block h2 { font-size: 21px; color: var(--ink); font-weight: 700;
  font-family: var(--serif); letter-spacing: 0.08em; }
.vol-block .ven { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-faint); }
.vol-block .vd { font-size: 14.2px; color: var(--ink-faint); margin-bottom: 12px; line-height: 1.7; }
.chs { list-style: none; margin: 0; }
.chs li { margin: 0 0 6px; }
.chs a {
  display: flex; gap: 12px; align-items: baseline; text-decoration: none;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 5px;
  background: #FFFEFA;
}
.chs a:hover { border-color: var(--vc); background: color-mix(in srgb, var(--vc) 6%, #FFFEF8); }
.chs .no {
  font-family: var(--mono); font-size: 12px; color: var(--vc); font-weight: 700;
  flex-shrink: 0; width: 22px;
}
.chs .ct { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chs .ct b { font-size: 15.2px; color: var(--ink); font-weight: 700; line-height: 1.55; }
.chs .ct em { font-style: normal; font-size: 13.4px; color: var(--ink-faint); line-height: 1.68; }
.chs .demo-tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  flex-shrink: 0; white-space: nowrap; align-self: center;
}

.panel {
  border: 1px solid var(--line); border-radius: 5px; padding: 17px 19px;
  margin: 22px 0; background: #FFFEFA;
}
.panel h3 { font-size: 16px; color: var(--ink); margin-bottom: 9px; font-weight: 700; }
.panel h3::before { content: none; }
.panel ul { margin: 9px 0 9px 20px; }
.panel li { margin: 6px 0; font-size: 14.6px; }
.panel.warn { background: var(--wall-mist); border-color: var(--wall); }
.panel.warn h3 { color: var(--wall-deep); }
.panel.cool { background: var(--slack-mist); border-color: var(--slack); }
.panel.cool h3 { color: var(--slack-deep); }

/* ============================================================
   翻页 / 页脚
   ============================================================ */
.pager { display: flex; gap: 12px; margin: 40px 0 20px; }
.pager a {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 5px;
  text-decoration: none; background: #FFFEFA; min-width: 0;
}
.pager a:hover { border-color: var(--vol); background: var(--vol-mist); }
.pager .next { text-align: right; }
.pager .dir { font-family: var(--mono); font-size: 11.5px; color: var(--vol-deep); }
.pager .t { font-size: 13.6px; color: var(--ink); line-height: 1.5; }
.pager .none { visibility: hidden; }
.foot {
  border-top: 1px solid var(--line); padding: 20px 0 44px;
  font-size: 12.5px; color: var(--ink-faint); text-align: center;
}
.foot a { color: var(--ink-faint); }
.foot a:hover { color: var(--vol-deep); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .chapter-head h1 { font-size: 25px; }
  .hero h1 { font-size: 34px; }
  .prose h2 { font-size: 19px; }
  .pager { flex-direction: column; }
  .d-slider .sl-l { min-width: 70px; }
  .ch-pos { display: none; }
}