/* ============================================================
   《九个九》设计系统 — 生命体征监护风
   亮色临床白 + Elixir 紫;心电图进度条;进程=生命体征。
   全书严格亮色。零依赖,无外部字体。
   ============================================================ */

:root {
  --bg: #F6F8F9;
  --card: #FFFFFF;
  --ink: #212733;
  --sub: #5F6B76;
  --faint: #8B96A0;
  --line: #DFE5EA;
  --line-soft: #EAEFF3;

  --pur: #6D4FA0;
  --pur-deep: #432B6F;
  --pur-mid: #8A6FC0;
  --pur-wash: #F4F1FA;
  --pur-line: #D9CFEC;

  --grn: #0CA678;
  --grn-deep: #087F5B;
  --grn-wash: #E9FAF3;
  --grn-line: #B8E8D8;

  --red: #E8590C;
  --red-deep: #C43C00;
  --red-wash: #FFF0E6;
  --red-line: #FFD3B5;

  --blu: #1971C2;
  --blu-wash: #EAF3FC;
  --blu-line: #C4DDF5;

  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  --wrap: 780px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #E4DAF6; color: var(--pur-deep); }

a { color: var(--pur); }

/* ============================================================
   顶部监护条
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 52px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}

.topbar .brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .12em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.topbar .brand em { font-style: normal; color: var(--pur); }
.topbar .brand .blip { flex: none; }

.blip { display: inline-block; }
.blip polyline {
  fill: none;
  stroke: var(--grn);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: blipdraw 2.4s linear infinite;
}
@keyframes blipdraw {
  0%   { stroke-dashoffset: 90; opacity: 1; }
  55%  { stroke-dashoffset: 0;  opacity: 1; }
  75%  { stroke-dashoffset: 0;  opacity: .25; }
  100% { stroke-dashoffset: 0;  opacity: 0; }
}

.topbar .ch {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--sub);
  letter-spacing: .02em;
}

.topbar .vitals {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grn-deep);
  background: var(--grn-wash);
  border: 1px solid var(--grn-line);
  border-radius: 4px;
  padding: 2px 9px;
  white-space: nowrap;
}
.topbar .vitals b { color: var(--grn-deep); font-weight: 700; }

.topbar .toc-btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--pur-deep);
  background: var(--pur-wash);
  border: 1px solid var(--pur-line);
  border-radius: 4px;
  padding: 5px 13px;
  cursor: pointer;
}
.topbar .toc-btn:hover { background: #ECE4F8; }

/* ---------- 心电式阅读进度条 ---------- */
.ecg {
  position: fixed;
  top: 52px; left: 0; right: 0;
  z-index: 59;
  height: 16px;
  background: #FDFEFE;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ecg .base, .ecg .fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background-repeat: repeat-x;
  background-size: 120px 16px;
  background-position: 0 center;
}
.ecg .base { right: 0; opacity: .55; }
.ecg .fill { width: 0; }
.ecg .tip {
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grn);
  box-shadow: 0 0 0 3px rgba(12, 166, 120, .18);
  transform: translate(-50%, -50%);
  transition: left .12s linear;
}

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

/* index 页无 topbar 注入时的容器 */
body.cover .content { padding-top: 40px; }

/* ============================================================
   章节头 — 入院单风
   ============================================================ */
.chapter-head { margin-bottom: 34px; }

.kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--sub);
  margin-bottom: 18px;
}
.kicker .vol {
  color: var(--pur-deep);
  background: var(--pur-wash);
  border: 1px solid var(--pur-line);
  border-radius: 3px;
  padding: 1px 8px;
}
.kicker .vital {
  color: var(--grn-deep);
  background: var(--grn-wash);
  border: 1px solid var(--grn-line);
  border-radius: 3px;
  padding: 1px 8px;
}
.kicker .sep {
  width: 22px; height: 1px;
  background: var(--line);
}

.chapter-head h1 {
  font-size: clamp(30px, 5.4vw, 40px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .015em;
  color: var(--ink);
}
.chapter-head h1 em { font-style: normal; color: var(--pur); }

.chapter-head .lede {
  margin-top: 18px;
  font-size: 17.5px;
  color: #3A424D;
  border-left: 3px solid var(--pur-line);
  padding-left: 18px;
}
.chapter-head .lede strong { color: var(--pur-deep); }

.chapter-head .tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapter-head .tags span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--sub);
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 2px 12px;
}

.headrule {
  margin-top: 26px;
  border: 0;
  height: 10px;
  background:
    linear-gradient(to right, var(--pur) 0 42px, transparent 42px 100%) 0 4.5px / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 4.5px / 100% 1px no-repeat;
}

/* ============================================================
   正文排版
   ============================================================ */
.prose { counter-reset: sec; }

.prose > p { margin: 0 0 22px; }

.prose h2 {
  counter-increment: sec;
  margin: 52px 0 20px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  padding-left: 15px;
  border-left: 4px solid var(--pur);
  position: relative;
}
.prose h2::before {
  content: "SEC." counter(sec, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--pur-mid);
  margin-bottom: 2px;
}

.prose h3 {
  margin: 36px 0 14px;
  font-size: 19px;
  font-weight: 700;
  color: var(--pur-deep);
}
.prose h3::before { content: "▸ "; color: var(--pur-mid); }

.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: normal; background: linear-gradient(transparent 68%, #E4DAF6 68%); }

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 26px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--pur); font-family: var(--mono); }

.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 40px 0;
}

/* 行内 code */
.prose code {
  font-family: var(--mono);
  font-size: .86em;
  color: var(--pur-deep);
  background: var(--pur-wash);
  border: 1px solid #E7DFF4;
  border-radius: 4px;
  padding: .08em .38em;
  word-break: break-word;
}

/* 表格 — 体征对照表 */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
  background: var(--card);
  border: 1px solid var(--line);
}
.prose th {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-align: left;
  color: var(--pur-deep);
  background: var(--pur-wash);
  border-bottom: 1px solid var(--pur-line);
  padding: 8px 12px;
  white-space: nowrap;
}
.prose td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.prose tr:last-child td { border-bottom: 0; }
.prose td code { white-space: nowrap; }
.tbl-scroll { overflow-x: auto; margin: 0 0 24px; }
.tbl-scroll table { margin: 0; min-width: 560px; }

/* ============================================================
   代码块
   .code = 文件代码(白底紫边)  .iex = 床旁终端会话
   ============================================================ */
pre.code, pre.iex {
  position: relative;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 24px;
  padding: 40px 18px 16px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

pre.code, pre.iex { counter-reset: none; }

pre[data-t]::before {
  content: attr(data-t);
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  line-height: 28px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: .16em;
  border-bottom: 1px solid;
}

pre.code {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pur);
  color: #2B3240;
}
pre.code[data-t]::before {
  color: var(--sub);
  background: #FAFBFC;
  border-color: var(--line-soft);
}

pre.iex {
  background: #FBFAFE;
  border: 1px solid var(--pur-line);
  color: #2B3240;
  box-shadow: 0 1px 0 var(--pur-line);
}
pre.iex[data-t]::before {
  color: var(--pur-deep);
  background: var(--pur-wash);
  border-color: var(--pur-line);
}
pre.iex[data-t]::after {
  content: "● LIVE";
  position: absolute;
  top: 0; right: 12px;
  height: 28px;
  line-height: 28px;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--grn);
}
pre.iex:not([data-t]) { padding-top: 16px; }
pre.code:not([data-t]) { padding-top: 16px; }

/* 语法高亮 token(book.js 注入) */
.tk-k  { color: var(--pur); font-weight: 700; }          /* 关键字 */
.tk-a  { color: var(--grn-deep); }                        /* 原子/:atom */
.tk-s  { color: #B0571C; }                                /* 字符串 */
.tk-c  { color: var(--faint); font-style: italic; }       /* 注释 */
.tk-m  { color: var(--blu); }                             /* 模块名/大写 */
.tk-n  { color: #0B7285; }                                /* 数字 */
.tk-v  { color: #A61E4D; }                                /* @属性/变量特型 */
.tk-p  { color: var(--pur); font-weight: 700; user-select: none; } /* iex> 提示符 */
.tk-o  { color: var(--sub); }                             /* iex 输出行 */
.tk-hl { background: #FFF3BF; border-radius: 3px; padding: 0 2px; } /* 手动强调 */
.tk-err{ color: var(--red-deep); }                        /* 错误输出 */

/* ============================================================
   Callout — 病历卡体系
   ============================================================ */
.callout {
  position: relative;
  margin: 0 0 24px;
  padding: 16px 18px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  font-size: 15.5px;
}
.callout p { margin: 0 0 10px; }
.callout p:last-child { margin: 0; }
.callout .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 8px;
  padding: 1px 9px;
  border-radius: 3px;
  border: 1px solid;
}

.callout.ward  { border-left-color: var(--pur); background: linear-gradient(var(--pur-wash), var(--card) 42px); }
.callout.ward .tag  { color: var(--pur-deep); border-color: var(--pur-line); background: var(--card); }

.callout.droid { border-left-color: var(--blu); background: linear-gradient(var(--blu-wash), var(--card) 42px); }
.callout.droid .tag { color: var(--blu); border-color: var(--blu-line); background: var(--card); }

.callout.warn  { border-left-color: var(--red); background: linear-gradient(var(--red-wash), var(--card) 42px); }
.callout.warn .tag  { color: var(--red-deep); border-color: var(--red-line); background: var(--card); }

.callout.lab {
  border-left-color: var(--faint);
  border-style: solid solid solid solid;
  background:
    linear-gradient(#F8F9FA, #F8F9FA) padding-box;
  font-family: var(--mono);
  font-size: 13.5px;
}
.callout.lab .tag { color: var(--sub); border-color: var(--line); background: var(--card); }

.callout.self  { border-left-color: var(--grn); background: linear-gradient(var(--grn-wash), var(--card) 42px); }
.callout.self .tag  { color: var(--grn-deep); border-color: var(--grn-line); background: var(--card); }
.callout.self ol, .callout.self ul { margin: 0 0 6px; padding-left: 22px; }

/* ============================================================
   DEMO 面板 — 监护仪
   ============================================================ */
.demo {
  margin: 30px 0;
  background: var(--card);
  border: 1px solid var(--pur-line);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(67, 43, 111, .06);
  overflow: hidden;
}
.demo .dhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: var(--pur-wash);
  border-bottom: 1px solid var(--pur-line);
}
.demo .dhead .dtag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  color: #fff;
  background: var(--pur);
  border-radius: 3px;
  padding: 2px 8px;
}
.demo .dhead b { font-size: 15px; color: var(--pur-deep); }
.demo .dhead .dnote { font-size: 12.5px; color: var(--sub); }
.demo .dbody { padding: 16px; }

/* demo 内部通用控件 */
.demo button, .dbtn {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--pur-deep);
  background: var(--card);
  border: 1.5px solid var(--pur-line);
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.demo button:hover { background: var(--pur-wash); }
.demo button:active { transform: translateY(1px); }
.demo button.primary { background: var(--pur); border-color: var(--pur); color: #fff; }
.demo button.primary:hover { background: var(--pur-deep); }
.demo button.danger { color: var(--red-deep); border-color: var(--red-line); }
.demo button.danger:hover { background: var(--red-wash); }
.demo button:disabled { opacity: .45; cursor: not-allowed; }

.demo input[type="text"], .demo textarea, .demo select {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 5px;
  padding: 7px 10px;
}
.demo input[type="text"]:focus, .demo textarea:focus, .demo select:focus {
  outline: none;
  border-color: var(--pur-mid);
}
.demo input[type="range"] { accent-color: var(--pur); }

/* 心电纸网格背景(demo 模拟区用) */
.ecg-paper {
  background:
    linear-gradient(rgba(109, 79, 160, .07) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(90deg, rgba(109, 79, 160, .07) 1px, transparent 1px) 0 0 / 8px 100%,
    #FDFDFF;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

/* demo 日志区 */
.dlog {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  background: #FAFBFC;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px 12px;
  max-height: 190px;
  overflow-y: auto;
}
.dlog .t { color: var(--faint); }
.dlog .ok { color: var(--grn-deep); }
.dlog .bad { color: var(--red-deep); }
.dlog .pu { color: var(--pur-deep); }

/* 读数块 */
.readout {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--sub);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 11px;
  white-space: nowrap;
}
.readout b { color: var(--grn-deep); font-size: 15px; }
.readout.alert b { color: var(--red-deep); }

/* ============================================================
   翻页条 + 页脚
   ============================================================ */
.pager {
  display: flex;
  gap: 14px;
  margin: 52px 0 0;
}
.pager a {
  flex: 1;
  min-width: 0;
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.pager a:hover {
  border-color: var(--pur-mid);
  box-shadow: 0 3px 12px rgba(67, 43, 111, .08);
}
.pager a.next { text-align: right; border-left: 4px solid var(--pur); }
.pager a:not(.next) { border-right: 4px solid var(--line); }
.pager .dir {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--pur);
  margin-bottom: 4px;
}
.pager .pt {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foot {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--faint);
}

/* ---------- 浮动翻页 ---------- */
.navfab {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 55;
  display: flex;
  gap: 8px;
}
.navfab a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--pur-line);
  color: var(--pur-deep);
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(33, 39, 51, .10);
  transition: background .15s, border-color .15s;
}
.navfab a:hover { background: var(--pur-wash); border-color: var(--pur-mid); }
.navfab a::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: 50px;
  font-size: 12px;
  color: #fff;
  background: var(--pur-deep);
  border-radius: 5px;
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.navfab a:hover::after { opacity: 1; }

/* ============================================================
   全屏目录 — 值班表
   ============================================================ */
.tocov {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(246, 248, 249, .97);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  display: none;
}
body.toc-open { overflow: hidden; }
body.toc-open .tocov { display: block; }

.toc-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 22px 70px;
}
.toc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.toc-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .1em;
}
.toc-title em { font-style: normal; color: var(--pur); }
.toc-close {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sub);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 13px;
  cursor: pointer;
}
.toc-close:hover { color: var(--red-deep); border-color: var(--red-line); }

.toc-home {
  display: inline-block;
  font-size: 13.5px;
  color: var(--pur-deep);
  text-decoration: none;
  border: 1px solid var(--pur-line);
  background: var(--card);
  border-radius: 5px;
  padding: 5px 14px;
  margin: 0 8px 18px 0;
}
.toc-home:hover { background: var(--pur-wash); }

.toc-vol { margin-bottom: 24px; }
.toc-vol .vh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 800;
  font-size: 15.5px;
  padding: 7px 4px;
  border-bottom: 2px solid var(--pur-line);
  margin-bottom: 6px;
}
.toc-vol .vh .vno {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: #fff;
  background: var(--pur);
  border-radius: 3px;
  padding: 1px 8px;
}
.toc-vol .vh .vd {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--faint);
  margin-left: auto;
}

.toc-vol a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  padding: 7px 8px;
  border-radius: 5px;
  border-bottom: 1px dashed var(--line-soft);
}
.toc-vol a:hover { background: var(--card); }
.toc-vol a.on { background: var(--pur-wash); color: var(--pur-deep); font-weight: 700; }
.toc-vol a .no {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--pur);
  flex: none;
}
.toc-vol a .dm {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--grn-deep);
  border: 1px solid var(--grn-line);
  background: var(--grn-wash);
  border-radius: 3px;
  padding: 0 6px;
}

/* ============================================================
   总览页(index)
   ============================================================ */
.cover-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 42px 36px 34px;
  margin-bottom: 34px;
  position: relative;
  overflow: hidden;
}
.cover-hero .boot {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--grn-deep);
  margin-bottom: 18px;
}
.cover-hero .boot::before { content: "● "; color: var(--grn); }
.cover-hero h1 {
  font-size: clamp(44px, 9vw, 72px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.15;
  color: var(--ink);
}
.cover-hero h1 em { font-style: normal; color: var(--pur); }
.cover-hero .sub {
  margin-top: 12px;
  font-size: 17px;
  color: var(--sub);
}
.cover-hero .sub b { color: var(--pur-deep); }

.cover-hero .strip {
  margin: 26px -36px 22px;
  height: 44px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  position: relative;
}
.cover-hero .strip .wave {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 240px 44px;
  background-position: 0 center;
  animation: stripmove 6s linear infinite;
}
@keyframes stripmove {
  from { background-position-x: 0; }
  to   { background-position-x: -240px; }
}

.vit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.vit-row .vt {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #FDFDFE;
}
.vit-row .vt .l {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--faint);
  display: block;
  margin-bottom: 4px;
}
.vit-row .vt .v {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--grn-deep);
}
.vit-row .vt .v small { font-size: 12px; color: var(--sub); font-weight: 400; }
.vit-row .vt.pu .v { color: var(--pur-deep); }

.cover-note {
  font-size: 15.5px;
  color: #3A424D;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--grn);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 40px;
}
.cover-note p { margin: 0 0 12px; }
.cover-note p:last-child { margin: 0; }

.vol-sec { margin-bottom: 36px; }
.vol-sec .vhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pur-line);
}
.vol-sec .vhead .vno {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: #fff;
  background: var(--pur);
  border-radius: 3px;
  padding: 2px 9px;
}
.vol-sec .vhead h2 { font-size: 21px; font-weight: 800; }
.vol-sec .vhead .vd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--faint);
}

.vol-sec .chs { display: flex; flex-direction: column; gap: 8px; }
.vol-sec .chs a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 18px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.vol-sec .chs a:hover {
  border-color: var(--pur-mid);
  box-shadow: 0 3px 14px rgba(67, 43, 111, .09);
  transform: translateY(-1px);
}
.vol-sec .chs .no {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--pur);
  flex: none;
  width: 30px;
}
.vol-sec .chs .ti {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
.vol-sec .chs .ds {
  font-size: 13px;
  color: var(--sub);
  display: block;
  font-weight: 400;
  margin-top: 2px;
}
.vol-sec .chs .dm {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--grn-deep);
  border: 1px solid var(--grn-line);
  background: var(--grn-wash);
  border-radius: 3px;
  padding: 1px 7px;
}

/* ============================================================
   Demo 专用部件
   ============================================================ */
.dsec {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--pur-deep);
  margin: 4px 0 12px;
}
.dsec:not(:first-child) { margin-top: 26px; }

.dfoot {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--sub);
}
.dfoot code {
  font-family: var(--mono);
  font-size: .9em;
  color: var(--pur-deep);
  background: var(--pur-wash);
  border-radius: 3px;
  padding: 0 4px;
}

/* ---------- 终端(iexterm / wardround 共用) ---------- */
.term {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  background: #FDFDFF;
  border: 1px solid var(--pur-line);
  border-radius: 6px;
  padding: 10px 12px;
  height: 230px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.term .tline.ok { color: var(--ink); }
.term .tline.bad { color: var(--red-deep); }

.term-in {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.term-in .tprompt {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--pur);
  flex: none;
}
.term-in input { flex: 1; min-width: 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.chips button { font-size: 12px; padding: 4px 10px; }

/* ---------- matchlab ---------- */
.ml-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.ml-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--sub);
}
.ml-grid label:last-child { grid-column: 1 / -1; }
.ml-run {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ml-run .dnote { font-size: 12.5px; color: var(--sub); }

.ml-res {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 14px;
  background: var(--card);
}
.ml-res.ok { border-color: var(--grn-line); background: var(--grn-wash); }
.ml-res.bad { border-color: var(--red-line); background: var(--red-wash); }
.ml-verdict {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 8px;
}
.ml-res.ok .ml-verdict { color: var(--grn-deep); }
.ml-res.bad .ml-verdict { color: var(--red-deep); }
.ml-res pre {
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--red-deep);
  margin: 0 0 8px;
}
.ml-res p { margin: 0; font-size: 13.5px; color: var(--sub); }
.ml-binds {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--card);
  border: 1px solid var(--grn-line);
  width: 100%;
}
.ml-binds th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--grn-deep);
  background: #F2FBF7;
  padding: 5px 12px;
  border-bottom: 1px solid var(--grn-line);
}
.ml-binds td { padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }

/* ---------- beat ---------- */
.qrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.qctl { display: flex; flex-direction: column; gap: 4px; }
.qctl label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sub);
}
.qctl label b { color: var(--pur-deep); }
.qctl input[type=range] { width: 190px; }

.qbar {
  position: relative;
  height: 34px;
  overflow: hidden;
}
.qfill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(12,166,120,.25), rgba(12,166,120,.5));
  transition: width .25s;
}
.qfill.mid { background: linear-gradient(90deg, rgba(232,89,12,.22), rgba(232,89,12,.45)); }
.qfill.bad { background: linear-gradient(90deg, rgba(201,42,42,.3), rgba(201,42,42,.55)); }
.qstat {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.qstat.ok { color: var(--grn-deep); }
.qstat.mid { color: var(--red); }
.qstat.bad { color: var(--red-deep); }

.duel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.lane {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.lane .lh {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pur-deep);
  background: var(--pur-wash);
  border-bottom: 1px solid var(--pur-line);
  padding: 6px 12px;
}
.lane .tasks { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.task {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 6px 10px;
  background: #FDFDFE;
}
.task .tn { font-weight: 700; }
.task .tc { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--sub); }
.task .tc b { color: var(--grn-deep); }
.task.loop { border-color: var(--pur-line); }
.task.loop .tc b { color: var(--pur-deep); }
.task.dead { background: var(--red-wash); border-color: var(--red-line); }
.flatline { color: var(--red-deep); font-weight: 700; }

.beatdot {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--grn);
  animation: beatpulse 1.1s ease-out infinite;
}
@keyframes beatpulse {
  0% { box-shadow: 0 0 0 0 rgba(12,166,120,.45); }
  70% { box-shadow: 0 0 0 8px rgba(12,166,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(12,166,120,0); }
}
.beatdot.spin { background: var(--pur); animation: none; }
.task.dead .beatdot, .kid.dead .beatdot, .proc-card.dead .beatdot, .crashed .beatdot {
  background: var(--red-deep);
  animation: none;
}

/* ---------- supervisor ---------- */
.sup-ctl {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sup-ctl label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sub);
  display: flex;
  align-items: center;
  gap: 8px;
}

.suptree {
  padding: 16px;
  margin-bottom: 12px;
  transition: background .3s;
}
.suptree.crashed { background: var(--red-wash); border-color: var(--red-line); }
.supnode {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  font-weight: 700;
  font-size: 14.5px;
  background: var(--card);
  border: 1.5px solid var(--pur-line);
  border-radius: 8px;
  padding: 9px 16px;
  width: fit-content;
  margin: 0 auto;
}
.supnode code { font-family: var(--mono); font-size: 12px; color: var(--sub); font-weight: 400; }
.crashed .supnode { border-color: var(--red-line); color: var(--red-deep); }
.suplink {
  width: 2px; height: 18px;
  background: var(--pur-line);
  margin: 0 auto;
}
.kids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.kid {
  background: var(--card);
  border: 1.5px solid var(--grn-line);
  border-top: 3px solid var(--grn);
  border-radius: 8px;
  padding: 10px 12px;
  transition: transform .15s;
}
.kid.dead {
  border-color: var(--red-line);
  border-top-color: var(--red-deep);
  background: var(--red-wash);
}
.kid .kh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.kid code { font-family: var(--mono); font-size: 11.5px; color: var(--sub); }
.kid .kfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.kid .kfoot button { font-size: 11px; padding: 3px 9px; }

/* ---------- wardround ---------- */
.ward-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 14px;
}
.node-card, .shell-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 14px;
}
.node-card { border-top: 3px solid var(--grn); }
.shell-card { border-top: 3px solid var(--pur); }
.nh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.nh code { font-family: var(--mono); font-size: 12px; color: var(--pur-deep); font-weight: 400; }
.nrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fog {
  margin-top: 12px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, #FAFBFC 0 10px, #F3F5F7 10px 20px);
  color: var(--sub);
  font-size: 13px;
  text-align: center;
  padding: 22px 14px;
  line-height: 1.8;
}
.fog b { color: var(--red-deep); }
.shell-card .term { height: 250px; }

/* ---------- hotswap ---------- */
.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hs-side { min-width: 0; }
.hs-code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  background: #FDFDFF;
  border: 1px solid var(--pur-line);
  border-radius: 6px;
  padding: 12px 14px;
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 10px;
}
.vbadge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  border-radius: 3px;
  padding: 2px 8px;
}
.vbadge.v1 { color: var(--red-deep); background: var(--red-wash); border: 1px solid var(--red-line); }
.vbadge.v2 { color: var(--grn-deep); background: var(--grn-wash); border: 1px solid var(--grn-line); }
.proc-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.proc-card.hot { border-top: 3px solid var(--grn); }
.proc-card.cold { border-top: 3px solid var(--faint); }
.proc-card.dead { background: var(--red-wash); border-color: var(--red-line); }
.proc-card .pid { font-family: var(--mono); font-size: 11.5px; color: var(--sub); display: block; margin-bottom: 8px; }
.proc-card .nh { margin-bottom: 6px; }

@media (max-width: 700px) {
  .ml-grid, .duel, .ward-grid, .hs-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { padding: 0 12px; gap: 9px; }
  .topbar .ch { display: none; }
  .content { padding: 90px 14px 46px; }
  .cover-hero { padding: 30px 20px 26px; }
  .cover-hero .strip { margin-left: -20px; margin-right: -20px; }
  .pager { flex-direction: column; }
  .pager a.next { text-align: left; }
  pre.code, pre.iex { font-size: 13px; }
  .navfab { right: 12px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .blip polyline, .cover-hero .strip .wave { animation: none; }
  html { scroll-behavior: auto; }
}