/* ==========================================================================
   各章节专用样式：图表里的图形元素、等高线、示意图、表格、首屏小件，以及响应式。
   颜色约定（与 charts.css 开头一致，全课统一）：
     蓝 --fwd = 函数曲线    玫红 --grad = 切线 / 梯度 / 导数    琥珀 --loss = 割线 / 前向差分 / 连乘
     绿 --upd = 往下走（下坡、梯度下降）    青 --accent = 中心差分 / 真实值    靛 --brand = 当前所选的点
   ========================================================================== */

/* ---------- 通用小件 ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.good-text {
  color: var(--good);
}
.bad-text {
  color: var(--bad);
}
.sub-h4 {
  font-size: 17px;
  margin: 34px 0 12px;
}
ul.tight {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
ul.tight li {
  margin-bottom: 4px;
}
/* 双栏：左边宽一点（窄屏时在文件末尾的 900px 断点变成单栏） */
.duo.wide-left {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
/* 算式行右边的小注释 */
.calc .sub.row-note {
  margin-left: 6px;
}
.calc .term sub {
  margin: 0 2px 0 1px;
}
/* 一句话那么长的项（含中文解释）：窄屏上折行，而不是把整个面板撑得左右滚动 */
.calc .term.wrap {
  white-space: normal;
  flex-wrap: wrap;
  max-width: 100%;
}
table.tbl tr.cur td {
  background: var(--brand-soft);
}
/* 只有几列短数字的表：别撑满整行（三五个数字散在 1000 多像素里很难对齐着读） */
.table-wrap.fit {
  width: fit-content;
  max-width: 100%;
}
.table-wrap.fit table.tbl {
  width: auto;
}
@media (min-width: 641px) {
  .table-wrap.fit table.tbl th,
  .table-wrap.fit table.tbl td {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ---------- 首屏 ---------- */
/* 加粗的术语别从中间断行（“梯 / 度”） */
.hero .lead b {
  white-space: nowrap;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 420px;
}
.stat {
  min-width: 0;
}
.hero-cap {
  margin: 8px 0 0;
  min-height: 4.8em;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.hero-cap b {
  color: var(--text);
}
.hero-meter {
  margin-top: 4px;
}

/* ==========================================================================
   Plot（js/ui/plot.js）里的图形元素
   ========================================================================== */
.chart-svg .pt-label {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.chart-svg .pt-label.run {
  fill: var(--brand-ink);
}
.chart-svg .pt-label.rise {
  fill: var(--warn);
}
.chart-svg .pt-label.grad,
.chart-svg .pt-label.tan {
  fill: var(--grad);
}
.chart-svg .pt-label.neg {
  fill: var(--good);
}
.chart-svg .pt-label.ref {
  fill: var(--accent);
}
.chart-svg .pt-label.lim {
  fill: var(--bad);
}

/* 曲线 */
.chart-svg .pc {
  fill: none;
  stroke: var(--fwd);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-svg .pc.dfn {
  stroke: var(--grad);
}
.chart-svg .pc.fwd,
.chart-svg .pc.direct {
  stroke: var(--loss);
}
.chart-svg .pc.cen,
.chart-svg .pc.exact {
  stroke: var(--accent);
}

/* 直线：切线、割线、两种差分的割线（向两端延伸到图的边缘） */
.chart-svg .pl {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.chart-svg .pl.tan {
  stroke: var(--grad);
  opacity: 0.92;
}
.chart-svg .pl.sec,
.chart-svg .pl.fwd {
  stroke: var(--loss);
}
.chart-svg .pl.cen {
  stroke: var(--accent);
  stroke-dasharray: 8 5; /* 中心差分几乎和切线重合，画成虚线才能同时看到两条 */
}

/* 线段 / 箭头 */
.chart-svg .ps line {
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}
.chart-svg .ps polygon {
  fill: var(--muted);
  stroke: none;
}
.chart-svg .ps.run line {
  stroke: var(--brand);
  stroke-width: 2.4;
}
.chart-svg .ps.rise line {
  stroke: var(--loss);
  stroke-width: 2.4;
}
.chart-svg .ps.drop line {
  stroke: var(--muted);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
}
.chart-svg .ps.go line {
  stroke: var(--upd);
  stroke-width: 4;
}
.chart-svg .ps.hop line {
  stroke: var(--upd);
  stroke-width: 2.4;
}
.chart-svg .ps.go polygon,
.chart-svg .ps.hop polygon {
  fill: var(--upd);
}

/* 竖线 / 横线：参考线（竖线 .cursor 的样式在 charts.css） */
.chart-svg .pv {
  stroke: var(--muted);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
}
.chart-svg .pv.cursor {
  stroke: var(--text-2);
  stroke-width: 1.4;
}
.chart-svg .pv.grad {
  stroke: var(--grad);
  stroke-width: 1.6;
}
.chart-svg .pv.neg {
  stroke: var(--upd);
  stroke-width: 1.6;
}
.chart-svg .pv.ref {
  stroke: var(--accent);
  stroke-width: 1.8;
}
.chart-svg .pv.lim {
  stroke: var(--bad);
  stroke-width: 1.5;
}

/* 标记点 */
.chart-svg .pm circle {
  fill: var(--surface);
  stroke: var(--brand);
  stroke-width: 3;
}
.chart-svg .pm.p circle {
  fill: var(--brand);
  stroke: var(--surface);
  stroke-width: 2;
}
.chart-svg .pm.q circle,
.chart-svg .pm.fwd circle {
  fill: var(--loss);
  stroke: var(--surface);
  stroke-width: 2;
}
.chart-svg .pm.cen circle {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}
.chart-svg .pm.d circle {
  fill: var(--grad);
  stroke: var(--surface);
  stroke-width: 2;
}
.chart-svg .pm.now circle {
  fill: var(--surface);
  stroke: var(--brand);
  stroke-width: 3.5;
}
.chart-svg .pm.old circle {
  fill: var(--upd);
  stroke: var(--surface);
  stroke-width: 1.5;
}

/* 图例里的小色块 */
.chart-legend i.lg.fn {
  background: var(--fwd);
}
.chart-legend i.lg.dfn,
.chart-legend i.lg.tan,
.chart-legend i.lg.grad {
  background: var(--grad);
}
.chart-legend i.lg.sec,
.chart-legend i.lg.fwd,
.chart-legend i.lg.direct {
  background: var(--loss);
}
.chart-legend i.lg.cen,
.chart-legend i.lg.exact,
.chart-legend i.lg.ref {
  background: var(--accent);
}
.chart-legend i.lg.go,
.chart-legend i.lg.hop,
.chart-legend i.lg.neg,
.chart-legend i.lg.path {
  background: var(--upd);
}
.chart-legend i.lg.dir {
  background: var(--brand);
}
.chart-legend i.lg.lim {
  background: var(--bad);
}
.chart-legend i.lg.ct-l {
  width: 24px;
  background: linear-gradient(90deg, var(--fwd), var(--loss));
}
.chart-legend i.lg.slice {
  background: repeating-linear-gradient(90deg, var(--text-2) 0 5px, transparent 5px 9px);
}

/* ==========================================================================
   等高线图（js/ui/contour.js）
   ========================================================================== */
.chart-svg.ct.pickable {
  cursor: crosshair;
}
.chart-svg .ct-frame {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.2;
}
/* 线越往外 f 越大：从蓝（低）渐变到琥珀（高） */
.chart-svg .ct-line {
  fill: none;
  stroke: var(--fwd);
  stroke: color-mix(in srgb, var(--fwd) calc((1 - var(--lv, 0)) * 100%), var(--loss));
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-svg .ct-lbl {
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--text-2);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.chart-svg .ct-slice {
  stroke: var(--text-2);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  opacity: 0.75;
  pointer-events: none;
}
.chart-svg .ct-slice-lbl {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text-2);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.chart-svg .ct-path {
  fill: none;
  stroke: var(--upd);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-svg .ct-dot {
  fill: var(--upd);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.chart-svg .ct-now {
  fill: var(--surface);
  stroke: var(--brand);
  stroke-width: 3.5;
}
.chart-svg .ct-pt {
  fill: var(--brand);
  stroke: var(--surface);
  stroke-width: 2.5;
}
.chart-svg .ct-hit {
  fill: transparent;
  cursor: grab;
  touch-action: none; /* 只有按在小圆点上才不让页面滚动，其余地方照常上下滑 */
}
.chart-svg .ct-handle {
  outline: none;
}
.chart-svg .ct-handle.drag:focus-visible .ct-pt {
  stroke: var(--brand-ink);
  stroke-width: 5;
}
.chart-svg .ct-handle:active .ct-hit {
  cursor: grabbing;
}
.chart-svg .ca line {
  stroke-width: 3;
  stroke-linecap: round;
}
.chart-svg .ca polygon {
  stroke: none;
}
.chart-svg .ca.grad line {
  stroke: var(--grad);
}
.chart-svg .ca.grad polygon {
  fill: var(--grad);
}
.chart-svg .ca.neg line {
  stroke: var(--upd);
}
.chart-svg .ca.neg polygon {
  fill: var(--upd);
}
.chart-svg .ca.dir line {
  stroke: var(--brand);
  stroke-dasharray: 1 0;
}
.chart-svg .ca.dir polygon {
  fill: var(--brand);
}

/* ==========================================================================
   示意图（js/ui/diagrams.js）：流水线 / 菱形 / 概率条
   ========================================================================== */
.pipe {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.pipe-node {
  --pn: var(--border-strong);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  border: 1.5px solid var(--pn);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: center;
}
.pipe-node.t-fwd {
  --pn: var(--fwd);
  background: var(--fwd-soft);
}
.pipe-node.t-loss {
  --pn: var(--loss);
  background: var(--loss-soft);
}
.pipe-node.t-grad {
  --pn: var(--grad);
  background: var(--grad-soft);
}
.pipe-node.t-upd {
  --pn: var(--upd);
  background: var(--upd-soft);
}
.pn-name {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
}
.pn-val {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.35;
}
.pn-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.pipe-edge {
  --pe: var(--muted);
  flex: 1.15 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
}
.pipe-edge.t-grad {
  --pe: var(--grad);
}
.pe-lbl {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--pe);
}
.pe-arrow {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--pe);
}
.pe-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -5px;
  border-left: 9px solid var(--pe);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.chart-svg.dg .dg-edge line {
  stroke-width: 2.6;
  stroke-linecap: round;
}
.chart-svg.dg .dg-edge polygon {
  stroke: none;
}
.chart-svg.dg .dg-edge.a line {
  stroke: var(--fwd);
}
.chart-svg.dg .dg-edge.a polygon {
  fill: var(--fwd);
}
.chart-svg.dg .dg-edge.b line {
  stroke: var(--loss);
}
.chart-svg.dg .dg-edge.b polygon {
  fill: var(--loss);
}
.chart-svg.dg .dg-edge.off {
  opacity: 0.2;
}
.chart-svg.dg .dg-lbl {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--text-2);
}
.chart-svg.dg .dg-edge.a .dg-lbl {
  fill: var(--fwd);
}
.chart-svg.dg .dg-edge.b .dg-lbl {
  fill: var(--warn);
}
.chart-svg.dg .dg-node rect {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1.6;
}
.chart-svg.dg .dg-node.n-a rect {
  fill: var(--fwd-soft);
  stroke: var(--fwd);
}
.chart-svg.dg .dg-node.n-b rect {
  fill: var(--loss-soft);
  stroke: var(--loss);
}
.chart-svg.dg .dg-node.n-y rect {
  fill: var(--upd-soft);
  stroke: var(--upd);
}
.chart-svg.dg .dg-name {
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--text);
}
.chart-svg.dg .dg-val {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--text-2);
}

.pbars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pb {
  display: grid;
  grid-template-columns: minmax(92px, 150px) minmax(0, 1fr) 54px;
  align-items: center;
  gap: 2px 10px;
}
.pb-l {
  font-size: 14px;
  line-height: 1.35;
}
.pb-t {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--surface-3);
}
.pb-f {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 7px;
  background: var(--brand);
  transition: width 0.2s ease;
}
.pb-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--text);
}
.pb-v {
  font-family: var(--font-mono);
  font-size: 13.5px;
  text-align: right;
}
.pb-n {
  grid-column: 2 / 4;
  font-size: 12.5px;
  color: var(--muted);
}

/* ==========================================================================
   各节的小件
   ========================================================================== */

/* 梯度下降的“这一组 η 属于哪种行为”提示条 */
.regime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.regime b {
  color: var(--text);
}
.regime.good {
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
}
.regime.warn {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
}
.regime.bad {
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 35%, var(--border));
}

/* 可以点的表格行（点一下，把图和算式切到这一行） */
table.tbl tr.pick {
  cursor: pointer;
}
table.tbl tr.pick:hover td {
  background: var(--surface-2);
}
table.tbl tr.pick.cur td {
  background: var(--brand-soft);
}
table.tbl tr.pick.cur td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}
table.tbl tr.pick:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
table.tbl td.mono {
  font-family: var(--font-mono);
  font-size: 13.5px;
}

/* 抛硬币：一排小方块 */
.flips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.coin {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.coin.h {
  background: var(--brand);
  color: var(--surface);
}
.coin.t {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--muted);
}
.flips-more {
  align-self: center;
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- 总览：五个主题 ---------- */
.topic-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.topic-card {
  --tc: var(--brand);
  --tc-ink: #fff;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--tc);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.topic-card:nth-child(n + 4) {
  grid-column: span 3;
}
.topic-card.tone-fwd {
  --tc: var(--fwd);
}
.topic-card.tone-loss {
  --tc: var(--loss);
  --tc-ink: #2d2000;
}
.topic-card.tone-grad {
  --tc: var(--grad);
}
.topic-card.tone-upd {
  --tc: var(--upd);
  --tc-ink: #04281d;
}
.topic-card.tone-accent {
  --tc: var(--accent);
  --tc-ink: #032a29;
}
.tc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tc-n {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tc);
  color: var(--tc-ink);
  font-size: 14px;
  font-weight: 800;
}
.tc-ic svg {
  width: 24px;
  height: 24px;
  color: var(--tc);
}
.topic-card h4 {
  font-size: 18px;
  margin: 2px 0 0;
}
.tc-tex {
  padding: 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  text-align: center;
  font-size: 15px;
  overflow-x: auto;
}
.topic-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.topic-card p.tc-nn {
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--muted);
}
.topic-card p.tc-nn b {
  color: var(--text-2);
}
.tc-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
}
.tc-link:hover {
  text-decoration: underline;
}
.tc-link svg {
  vertical-align: -2px;
}

/* ---------- 总览：一次训练里的三个动作 ---------- */
.math-loop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ml-step {
  --ml: var(--brand);
  --ml-ink: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--ml);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.ml-step.tone-fwd {
  --ml: var(--fwd);
}
.ml-step.tone-grad {
  --ml: var(--grad);
}
.ml-step.tone-upd {
  --ml: var(--upd);
  --ml-ink: #04281d;
}
.ml-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -17px;
  top: 24px;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.ml-n {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ml);
  color: var(--ml-ink);
  font-size: 14px;
  font-weight: 800;
}
.ml-step h4 {
  font-size: 18px;
  margin: 2px 0 0;
}
.ml-math {
  padding: 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  text-align: center;
  font-size: 15px;
  overflow-x: auto;
}
.ml-step p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}
.loop-back {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}
.loop-back svg {
  flex: none;
  color: var(--upd);
}

/* ---------- 总结：一页纸回顾 / 对账 / 延伸阅读 ---------- */
table.recap td {
  vertical-align: middle;
}
.recap-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--rc, var(--brand));
}
table.recap tr.tone-fwd {
  --rc: var(--fwd);
}
table.recap tr.tone-loss {
  --rc: var(--loss);
}
table.recap tr.tone-grad {
  --rc: var(--grad);
}
table.recap tr.tone-upd {
  --rc: var(--upd);
}
table.recap td.rc-f {
  min-width: 200px;
}
table.audit td.num {
  white-space: nowrap;
}
table.audit .nb {
  display: inline-block;
}
table.audit td.au-f {
  min-width: 150px;
}
.audit-sum {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.audit-sum .badge {
  margin-right: 6px;
}
.reading {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.reading li {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 124px minmax(0, 1.7fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.reading a {
  color: var(--brand-ink);
  text-decoration: none;
}
.reading a:hover {
  text-decoration: underline;
}
.reading a svg {
  margin-left: 4px;
  vertical-align: -2px;
}
.reading .by {
  font-size: 13px;
  color: var(--muted);
}
.reading .note {
  font-size: 14px;
  color: var(--text-2);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1000px) {
  .topic-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topic-card,
  .topic-card:nth-child(n + 4) {
    grid-column: span 1;
  }
  .topic-card:last-child {
    grid-column: span 2;
  }
}
@media (max-width: 900px) {
  .duo.wide-left {
    grid-template-columns: minmax(0, 1fr);
  }
  .math-loop {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 竖着排的时候，箭头改成朝下，放在两张卡片中间 */
  .ml-step:not(:last-child)::after {
    content: '↓';
    right: auto;
    left: 24px;
    top: auto;
    bottom: -17px;
  }
}
@media (max-width: 720px) {
  /* 流水线：节点和箭头改成竖着排，箭头朝下 */
  .pipe {
    flex-direction: column;
    align-items: stretch;
  }
  .pipe-node {
    flex: none;
  }
  .pipe-edge {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 0 6px 18px;
  }
  .pe-lbl {
    text-align: left;
    order: 2;
  }
  .pe-arrow {
    order: 1;
    width: 2px;
    height: 26px;
    flex: none;
  }
  .pe-arrow::after {
    right: auto;
    left: -5px;
    top: auto;
    bottom: -1px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--pe);
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  .panel {
    padding: 14px 14px;
  }
  .topic-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .topic-card:last-child {
    grid-column: span 1;
  }
  .loop-back {
    align-items: flex-start;
    border-radius: var(--radius-sm);
  }
  .reading li {
    grid-template-columns: minmax(0, 1fr);
  }
  .pb {
    grid-template-columns: minmax(0, 1fr) 54px;
  }
  .pb-t {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .pb-n {
    grid-column: 1 / 3;
  }

  /* 表格：窄屏时收紧左右留白，表头和第一列允许折行（别让表格左右滚动）。
   * 下面的 hshrink / lrtab 在此基础上再加细节；recap / audit 会被改成卡片（见后面，选择器同样具体，写在后面的赢）。 */
  table.tbl.compact th,
  table.tbl.compact td {
    padding-left: 6px;
    padding-right: 6px;
  }
  table.tbl.compact thead th {
    white-space: normal;
    line-height: 1.25;
    vertical-align: bottom;
  }
  table.tbl.compact td:first-child {
    white-space: normal;
  }
  /* 梯度检验表第一列的表头只有“参数”两个字，别被拆成上下两行 */
  table.tbl.gc thead th:first-child {
    white-space: nowrap;
  }
  /* 梯度检验表的“结论”小标签：两三个字，别被挤成竖排 */
  table.tbl.gc .badge {
    white-space: nowrap;
    padding: 2px 7px;
  }
  table.tbl.hshrink th,
  table.tbl.hshrink td,
  table.tbl.lrtab th,
  table.tbl.lrtab td {
    padding-left: 6px;
    padding-right: 6px;
  }
  table.tbl.hshrink thead th,
  table.tbl.lrtab thead th {
    white-space: normal;
    line-height: 1.25;
    vertical-align: bottom;
  }
  table.tbl.lrtab td.num {
    white-space: nowrap;
  }
  table.tbl.lrtab td:last-child {
    min-width: 0;
  }

  /* 一页纸回顾 / 对账表：列太多，窄屏改成“每行一张小卡片”，用 data-label 当小标题。
   * 选择器要和上面的规则一样具体，否则盖不掉它们。 */
  table.tbl.recap,
  table.tbl.recap tbody,
  table.tbl.recap tr,
  table.tbl.recap td,
  table.tbl.audit,
  table.tbl.audit tbody,
  table.tbl.audit tr,
  table.tbl.audit td {
    display: block;
    width: 100%;
  }
  table.tbl.recap thead,
  table.tbl.audit thead {
    display: none;
  }
  table.tbl.recap tr,
  table.tbl.audit tr {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
  }
  table.tbl.recap tbody tr:last-child,
  table.tbl.audit tbody tr:last-child {
    border-bottom: 0;
  }
  table.tbl.recap td,
  table.tbl.recap tbody tr:last-child td,
  table.tbl.audit td,
  table.tbl.audit tbody tr:last-child td {
    padding: 2px 0;
    border: 0;
    text-align: left;
  }
  table.tbl.recap td.rc-f,
  table.tbl.audit td.au-f {
    min-width: 0;
    padding: 6px 0 8px;
    overflow-x: auto;
  }
  table.tbl.recap td[data-label]::before,
  table.tbl.audit td[data-label]::before {
    content: attr(data-label) '：';
    color: var(--muted);
    font-size: 12.5px;
    margin-right: 2px;
  }
}
@media (max-width: 520px) {
  .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .stat {
    padding: 8px 10px;
  }
  .stat b {
    font-size: 18px;
  }
  /* 梯度检验表有 6 列：窄屏不显示“相差”（“相对差”已经说明了问题） */
  table.tbl .c-abs {
    display: none;
  }
  /* 公式：窄屏上字号收一点，两行并排的长公式才放得下 */
  .tex-block math {
    font-size: 1.12em;
  }
  .formula {
    padding: 8px 10px;
  }
}
@media (max-width: 380px) {
  table.tbl.hshrink th,
  table.tbl.hshrink td,
  table.tbl.gc th,
  table.tbl.gc td,
  table.tbl.lrtab th,
  table.tbl.lrtab td {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 13px;
  }
  .tex-block math {
    font-size: 1.04em;
  }
}
/* 320 宽的小手机：选择器允许折成两行、算式里的项允许折行、公式再小一点 */
@media (max-width: 340px) {
  .seg {
    flex-wrap: wrap;
    border-radius: 18px;
  }
  .calc .term {
    white-space: normal;
  }
  .tex-block math {
    font-size: 0.96em;
  }
}