/* ============================================================
   《人工智能辅助的数字媒体创作》· 教材样式表
   —— 原理图解 · 案例教学 · 参数实操
   设计语言：屏幕与打印共用一套。屏幕偏"创作工作台"的现代感，
   打印（PDF 书）走学术排版：A4、10.5pt、章节强制分页。
   二次编辑约定见 README.md：颜色只用类或 style=""，SVG 内禁 HTML 标签。
   ============================================================ */

:root {
  /* —— 主色系：靛紫（创造）+ 品红（影像）+ 青（信号） —— */
  --primary:    #5b21b6;   /* 主色 · 靛紫 */
  --primary-2:  #7c3aed;   /* 主色浅阶 */
  --primary-sf: #ede9fe;   /* 主色浅底 */
  --accent:     #e11d48;   /* 强调 · 品红（影像） */
  --accent-sf:  #ffe4e6;
  --cyan:       #0891b2;   /* 次强调 · 青（信号/参数） */
  --cyan-sf:    #cffafe;

  /* —— 内容轨道色（四条线：原理/案例/实操/思政） —— */
  --track-theory: #1d4ed8;  /* 原理 = 蓝 */
  --track-theory-sf: #dbeafe;
  --track-case:   #7c3aed;  /* 案例 = 紫 */
  --track-case-sf:#ede9fe;
  --track-lab:    #0891b2;  /* 实操 = 青 */
  --track-lab-sf: #cffafe;
  --track-civics: #b45309;  /* 思政 = 金 */
  --track-civics-sf: #fef3c7;

  /* —— 语义色 —— */
  --red: #dc2626;  --red-sf: #fee2e2;
  --green: #15803d; --green-sf: #dcfce7;
  --amber: #b45309; --amber-sf: #fef3c7;
  --blue: #1d4ed8;  --blue-sf: #dbeafe;

  /* —— 墨色与底色 —— */
  --ink:        #17151f;   /* 正文墨色 */
  --ink-soft:   #3f3b4d;   /* 次级文字 */
  --ink-faint:  #7a7488;   /* 弱化文字 */
  --bg:         #fbfaf8;
  --panel:      #ffffff;
  --border:     #e9e6ef;
  --border-dark:#d8d3e0;

  /* —— 字体栈（只用系统内可用字体，不依赖外网） —— */
  --sans: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "WenQuanYi Zen Hei", sans-serif;
  --serif: Georgia, "Times New Roman", SimSun, serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
}

/* ============================================================
   0. 基础排版
   ============================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 26px 90px;
}
@media (min-width: 1100px) {
  .shell { max-width: 920px; }
}

p { margin: 0 0 1em; }

a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary-sf); }
a:hover { border-bottom-color: var(--primary); }

mark {
  background: linear-gradient(transparent 58%, #fde68a 58%);
  padding: 0 2px;
}

em { font-style: normal; color: var(--accent); font-weight: 700; }

b, strong { font-weight: 700; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: #f4f2f8;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--primary);
  white-space: nowrap;
}

/* 英文/术语对照片段 */
.en { font-family: var(--serif); color: var(--ink-soft); font-size: 0.94em; }

.sr {           /* 屏幕阅读器专用 */
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

hr.soft { border: 0; border-top: 1px dashed var(--border-dark); margin: 26px 0; }

/* ============================================================
   1. 顶栏与翻页（屏幕专用）
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 920px; margin: 0 auto;
  padding: 9px 26px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  font-size: 13.5px; color: var(--ink-faint);
}
.crumb a { color: var(--ink-soft); border: 0; }
.crumb a:hover { color: var(--primary); }
.pageflip { white-space: nowrap; }
.pageflip a { border: 0; color: var(--ink-soft); }
.pageflip a:hover { color: var(--accent); }

/* ============================================================
   2. 章节扉页 hero
   ============================================================ */

.hero {
  position: relative;
  margin: 10px 0 30px;
  padding: 34px 30px 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0) 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(8, 145, 178, 0.08) 0%, rgba(8, 145, 178, 0) 50%),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}
.hero .watermark {
  position: absolute; right: 18px; top: -26px;
  font-family: var(--serif);
  font-size: 150px; font-weight: 700; line-height: 1;
  color: var(--primary-sf);
  opacity: .75;
  user-select: none;
}
.kicker {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--primary);
  background: var(--primary-sf);
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 14px;
}
.hero h1 {
  font-size: 34px; line-height: 1.32;
  margin: 0 0 10px;
  letter-spacing: .01em;
  position: relative;
}
.hero .sub {
  font-size: 16px; color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 640px;
  position: relative;
}

/* 学习目标卡 */
.goals {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  border: 1px dashed var(--border-dark);
  border-radius: 12px;
  padding: 14px 18px 12px;
  font-size: 14.5px;
}
.goals .g-title {
  font-weight: 700; color: var(--primary);
  font-size: 13px; letter-spacing: .1em;
  margin-bottom: 6px;
}
.goals ol { margin: 0; padding-left: 1.3em; }
.goals li { margin: 2px 0; color: var(--ink-soft); }
.goals li b { color: var(--ink); }

/* 学时/节拍徽标行 */
.hero .meta {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
  font-size: 12.5px; color: var(--ink-faint);
}
.hero .meta span {
  background: #f5f3f9;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 12px;
}

.lead {
  font-size: 17.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  border-left: 4px solid var(--primary);
  padding-left: 16px;
  margin: 0 0 30px;
}

/* ============================================================
   3. 标题层级
   ============================================================ */

h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 64px 0 20px;
  padding-top: 16px;
  border-top: 3px solid var(--ink);
  letter-spacing: .01em;
}
h2 .no {
  display: inline-block;
  font-family: var(--serif);
  color: var(--primary);
  margin-right: 10px;
  font-size: 0.86em;
  letter-spacing: .02em;
}

h3 {
  font-size: 19.5px;
  margin: 38px 0 14px;
  color: var(--ink);
}
h3::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 2px;
  margin-right: 10px;
  transform: rotate(45deg) translateY(-1.5px);
}

h4 { font-size: 17px; margin: 26px 0 10px; }

h2 + p, h3 + p, h4 + p { margin-top: 0; }

/* ============================================================
   4. 内容块（callout 家族）
   ============================================================ */

.callout {
  margin: 22px 0;
  border-radius: 14px;
  padding: 16px 20px 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-left-width: 5px;
}
.callout .title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.callout .caseid {
  font-weight: 400; font-size: 13.5px; color: var(--ink-faint);
}

.callout.tip   { border-left-color: var(--green);  background: linear-gradient(0deg, #fff, var(--green-sf) 380%); }
.callout.tip .title   { color: var(--green); }
.callout.info  { border-left-color: var(--track-theory); background: linear-gradient(0deg, #fff, var(--track-theory-sf) 380%); }
.callout.info .title  { color: var(--track-theory); }
.callout.note  { border-left-color: var(--track-lab); background: linear-gradient(0deg, #fff, var(--track-lab-sf) 380%); }
.callout.note .title  { color: var(--track-lab); }
.callout.warn  { border-left-color: var(--red); background: linear-gradient(0deg, #fff, var(--red-sf) 380%); }
.callout.warn .title  { color: var(--red); }

/* 案例框（紫轨） */
.callout.case {
  border-left-color: var(--track-case);
  background: linear-gradient(0deg, #fff, var(--track-case-sf) 420%);
}
.callout.case .title { color: var(--track-case); }
.callout.case .caseid::before { content: " § "; color: var(--ink-faint); }

/* 失败案例诊所（红轨，虚边） */
.callout.failcase {
  border-left-color: var(--accent);
  border-style: solid solid solid dashed;
  background: linear-gradient(0deg, #fff, var(--accent-sf) 420%);
}
.callout.failcase .title { color: var(--accent); }
.callout.failcase p b { color: var(--accent); }

/* 课程思政（金轨，双线顶） */
.callout.civics {
  border-left-color: var(--track-civics);
  border-top: 4px double var(--track-civics);
  background: linear-gradient(0deg, #fff, var(--track-civics-sf) 460%);
}
.callout.civics .title { color: var(--track-civics); letter-spacing: .04em; }

/* 深入一格（数学/原理选学，紫蓝） */
.deep-dive {
  margin: 24px 0;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background:
    repeating-linear-gradient(-45deg, rgba(124,58,237,.028) 0 10px, transparent 10px 20px),
    var(--panel);
  padding: 16px 20px 8px;
}
.deep-dive .dd-head {
  font-weight: 700; font-size: 14.5px; color: var(--primary);
  letter-spacing: .03em;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.deep-dive .dd-head::before {
  content: "∫";
  font-family: var(--serif); font-size: 19px; line-height: 1;
  color: var(--accent);
  font-weight: 700;
}
.deep-dive .dd-tag {
  font-size: 12px; font-weight: 400; color: var(--ink-faint);
  border: 1px solid var(--border-dark); border-radius: 999px;
  padding: 1px 10px;
}

/* ============================================================
   5. 提示词卡 / 参数对照 / 操作路径（本书新组件）
   ============================================================ */

.prompt-card {
  margin: 20px 0;
  border: 1.5px dashed var(--cyan);
  border-radius: 14px;
  background: #f8feff;
  overflow: hidden;
}
.prompt-card .pc-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--track-lab-sf);
  font-size: 13.5px; font-weight: 700; color: #155e75;
}
.prompt-card .pc-tag::before { content: "✎ "; }
.prompt-card .pc-body {
  padding: 13px 18px 8px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
}
.prompt-card .pc-body .ph {    /* 提示词中的占位符 */
  color: var(--accent); font-weight: 700;
}
.prompt-card .pc-params {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 8px 18px 13px;
  font-size: 13px; color: var(--ink-soft);
  border-top: 1px dashed #bae6fd;
  margin-top: 6px;
}
.prompt-card .pc-params .pk { color: var(--ink-faint); margin-right: 5px; }
.prompt-card .pc-params .pv { font-family: var(--mono); color: #155e75; }

.copy-btn {
  font-family: var(--sans);
  font-size: 12.5px; color: #155e75;
  background: #fff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  padding: 3px 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.copy-btn:hover { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.copy-btn.done { background: var(--green); color: #fff; border-color: var(--green); }

/* A/B 参数对照双列 */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.compare .cmp-col {
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.compare .cmp-head {
  padding: 8px 15px;
  font-size: 14px; font-weight: 700;
  background: #f5f3f9; color: var(--primary);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.compare .cmp-col.b .cmp-head { background: var(--accent-sf); color: var(--accent); }
.compare .cmp-body { padding: 12px 15px 4px; font-size: 14.5px; line-height: 1.75; }
.compare .cmp-body p:last-child { margin-bottom: 8px; }

/* 网页工具操作路径（面包屑） */
code.path {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9em;
  background: var(--track-lab-sf);
  border: 1px solid #bae6fd;
  color: #155e75;
  border-radius: 7px;
  padding: 1px 9px;
  white-space: nowrap;
}

/* 资产清单 */
ul.asset-list { list-style: none; margin: 16px 0; padding: 0; }
ul.asset-list li {
  padding: 7px 14px 7px 38px;
  position: relative;
  border-bottom: 1px dashed var(--border);
  font-size: 15px;
}
ul.asset-list li::before {
  content: "▢";
  position: absolute; left: 14px;
  color: var(--cyan);
}
ul.asset-list li.ok::before { content: "▣"; color: var(--green); }
ul.asset-list li .al-tag {
  font-size: 12.5px; color: var(--ink-faint);
  border: 1px solid var(--border-dark); border-radius: 999px;
  padding: 0 9px; margin-left: 8px;
  white-space: nowrap;
}

/* ============================================================
   6. 小结 / 练习 / 步骤 / 卡片 / 表格 / 公式
   ============================================================ */

.keypoints {
  margin: 34px 0;
  border-radius: 16px;
  padding: 20px 26px 14px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 55%, #ecfeff 100%);
  border: 1px solid #ddd6fe;
}
.keypoints h3 { margin-top: 6px; }
.keypoints h3::before { background: var(--primary); }
.keypoints ol { padding-left: 1.4em; margin-bottom: 8px; }
.keypoints li { margin: 5px 0; }

.drill {
  margin: 26px 0;
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  padding: 16px 20px 10px;
  background: var(--panel);
}
.drill h3 { margin-top: 2px; }
.drill h3::before { background: var(--cyan); }
.drill .task { margin: 14px 0; }
.level {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  border-radius: 6px;
  padding: 1px 10px;
  margin-right: 8px;
  vertical-align: 1px;
  white-space: nowrap;
}
.level.lv1 { background: var(--green-sf); color: var(--green); }
.level.lv2 { background: var(--blue-sf);  color: var(--blue); }
.level.lv3 { background: var(--accent-sf); color: var(--accent); }
.level.lv-group { background: var(--track-civics-sf); color: var(--track-civics); }

ol.steps { list-style: none; counter-reset: st; padding: 0; margin: 18px 0; }
ol.steps > li {
  counter-increment: st;
  position: relative;
  padding: 0 0 16px 46px;
  margin: 0;
}
ol.steps > li::before {
  content: counter(st);
  position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
}
ol.steps > li::after {
  content: "";
  position: absolute; left: 14.5px; top: 34px; bottom: 2px;
  border-left: 2px dashed #ddd6fe;
}
ol.steps > li:last-child::after { display: none; }
ol.steps > li b:first-child { color: var(--primary); }

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary-2);
  border-radius: 12px;
  background: var(--panel);
  padding: 14px 17px 6px;
}
.card h4 { margin: 0 0 8px; color: var(--primary); font-size: 15.5px; }
.card p { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.card.danger { border-top-color: var(--accent); }
.card.danger h4 { color: var(--accent); }
.card.ok { border-top-color: var(--green); }
.card.ok h4 { color: var(--green); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14.5px;
  line-height: 1.65;
  background: var(--panel);
}
caption {
  caption-side: top;
  text-align: left;
  font-size: 14px; font-weight: 700;
  color: var(--ink-soft);
  padding-bottom: 8px;
}
caption::before { content: "▍"; color: var(--primary); margin-right: 6px; }
th {
  background: #f5f3f9;
  text-align: left;
  font-size: 13.5px;
  padding: 8px 12px;
  border: 1px solid var(--border-dark);
  /* 注意：不要 nowrap——打印页宽 170mm，长表头会撑破版心；窄表头自然不换行 */
}
td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}
th.num, td.num { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
tbody tr:nth-child(even) { background: #faf9fc; }

.formula {
  font-family: var(--serif);
  font-style: italic;
  background: var(--primary-sf);
  border-radius: 7px;
  padding: 1px 9px;
  white-space: nowrap;
}
.formula-block {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  text-align: center;
  background: #faf9fc;
  border: 1px dashed var(--border-dark);
  border-radius: 10px;
  padding: 13px 18px;
  margin: 16px 0;
  letter-spacing: .02em;
}
.formula-block .fnote {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* ============================================================
   7. 图与图注
   ============================================================ */

figure {
  margin: 26px 0;
  padding: 18px 18px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}
figure svg { max-width: 100%; height: auto; }
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}
/* 视频：网页版可播放；PDF（打印）只出海报帧 */
figure video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  background: #0b0d12;
}
figure .vid-poster { display: none; }
figure .vid-hint { display: none; }   /* 屏幕上视频能放，不需要提示；打印时由 @media print 显示 */

/* 多图并排（分镜组、对照实验组） */
figure .fig-row {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
}
figure .fig-row.c2 { grid-template-columns: 1fr 1fr; }
figure .fig-row.c3 { grid-template-columns: repeat(3, 1fr); }
figure .fig-row.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  figure .fig-row.c3, figure .fig-row.c4 { grid-template-columns: 1fr 1fr; }
}
figure .fig-row img { width: 100%; border-radius: 8px; }
figure .fig-row .cap {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 4px;
}
/* AI 生成标注 */
.ai-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #0891b2;
  background: var(--cyan-sf);
  border: 1px solid #a5f3fc;
  border-radius: 5px;
  padding: 0 6px;
  margin-left: 6px;
  white-space: nowrap;
}
figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-faint);
  text-align: left;
}
figcaption b { color: var(--ink-soft); }

/* 纯展示型图（无边框卡片） */
figure.plain { border: 0; background: transparent; padding: 10px 0; }

/* ============================================================
   8. 自测与折叠
   ============================================================ */

details.quiz {
  margin: 14px 0;
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
details.quiz summary {
  cursor: pointer;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  background: #f7f5fb;
  list-style: none;
}
details.quiz summary::-webkit-details-marker { display: none; }
details.quiz summary::before { content: "❓ "; }
details.quiz[open] summary { border-bottom: 1px solid var(--border); }
details.quiz .ans {
  padding: 12px 18px 4px;
  font-size: 15px;
  color: var(--ink-soft);
}
details.quiz .ans b { color: var(--green); }

/* ============================================================
   9. 章节导航与页脚
   ============================================================ */

.chapter-nav {
  display: flex; justify-content: space-between; gap: 14px;
  margin: 56px 0 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.chapter-nav a {
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 10px 18px;
  color: var(--ink-soft);
  background: var(--panel);
  max-width: 46%;
}
.chapter-nav a:hover { border-color: var(--primary); color: var(--primary); }
.chapter-nav .next { text-align: right; }

.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint);
  border-top: 1px dashed var(--border-dark);
  padding-top: 14px;
  margin-top: 10px;
}

/* ============================================================
   10. 站点门户（index.html）
   ============================================================ */

.portal-hero {
  text-align: center;
  padding: 34px 20px 10px;
}
.portal-hero .book-title {
  font-size: 40px; font-weight: 700; line-height: 1.3;
  margin: 12px 0 6px;
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portal-hero .book-sub { font-size: 17px; color: var(--ink-soft); }
.portal-hero .book-meta { font-size: 14px; color: var(--ink-faint); margin-top: 10px; }

ul.toc-list { list-style: none; padding: 0; margin: 22px 0; }
ul.toc-list li { margin: 0; border-bottom: 1px solid var(--border); }
ul.toc-list a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 10px;
  border: 0;
  color: var(--ink);
}
ul.toc-list a:hover { background: #f7f5fb; }
ul.toc-list .t-no {
  font-family: var(--serif);
  color: var(--primary);
  font-weight: 700;
  min-width: 3.4em;
  white-space: nowrap;
}
ul.toc-list .t-name { font-weight: 700; }
ul.toc-list .t-desc { color: var(--ink-faint); font-size: 13.5px; margin-left: auto; text-align: right; }
@media (max-width: 640px) {
  ul.toc-list .t-desc { display: none; }
}

/* ============================================================
   11. 书的模式（book.html：封面页 + 目录页 + 章节）
   ============================================================ */

.book { background: #fff; }

.cover-page {
  /* 注意：Chromium 打印时不会为超出页面碎片的 flex 容器应用 height，
     故封面不用 "height + justify-content:center"，改用显式留白定位。 */
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  break-after: page;
  padding: 70px 10mm 10mm;
}
.cover-kicker {
  font-size: 15px; letter-spacing: .3em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 4px 22px 4px 26px;  /* 视觉平衡字距 */
  margin-bottom: 26px;
}
.cover-title {
  font-size: 44px; font-weight: 700; line-height: 1.35;
  margin: 0 0 12px;
  letter-spacing: .02em;
}
.cover-sub { font-size: 19px; color: var(--ink-soft); margin-bottom: 8px; }
.cover-rule {
  width: 120px; border: 0; border-top: 3px solid var(--primary);
  margin: 22px auto;
}
.cover-art {
  display: block;
  width: 142mm;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 2px auto;
}
.cover-desc {
  max-width: 128mm;
  font-size: 14.5px; line-height: 2;
  color: var(--ink-soft);
  margin-top: 6px;
}
.cover-meta {
  margin-top: 34px;
  font-size: 14px; color: var(--ink-faint);
  line-height: 2;
}
.cover-meta b { color: var(--ink-soft); }

.toc-page { break-after: page; padding-top: 6mm; }
.toc-page .toc-h {
  text-align: center;
  font-size: 26px; letter-spacing: .5em; text-indent: .5em;
  margin: 0 0 22px;
  padding-top: 0; border-top: 0;
}
.toc-cols { column-count: 2; column-gap: 13mm; column-rule: 1px solid var(--border); }
.toc-chapter {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 700; font-size: 14.5px;
  margin: 10px 0 4px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ink);
  break-after: avoid;
}
.toc-sec {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; color: var(--ink-soft);
  margin: 2px 0;
  break-inside: avoid;
}
.toc-fill { flex: 1; border-bottom: 1px dotted var(--border-dark); transform: translateY(-3px); }
.toc-pg { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

.book section.chapter { break-before: page; }
.book .topbar, .book .chapter-nav, .book .foot { display: none; }
.book h2 { break-after: avoid; }

/* ============================================================
   12. SVG 绘图工具类（教材全部插图的公共语言）
   铁律：① 颜色/线宽只能通过类或 style="" 指定；
         ② <svg> 内禁出现 HTML 标签（<b>/<sub>…），粗体用
            <tspan font-weight="700">，下标用 baseline-shift。
   ============================================================ */

/* —— 线条 .w：默认 1.8 / #3f3b4d / 无填充 / 圆头 —— */
.w {
  stroke: #3f3b4d; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.w.th   { stroke-width: 1.1; }   /* 细 */
.w.md   { stroke-width: 2.3; }   /* 中 */
.w.bold { stroke-width: 2.8; }   /* 粗 */
.w.lg   { stroke-width: 3.4; }   /* 特粗 */

.w.hot  { stroke: var(--accent); }     /* 品红 · 影像/错误/强调 */
.w.sig  { stroke: var(--cyan); }       /* 青 · 信号/参数 */
.w.pri  { stroke: var(--primary); }    /* 紫 · 主流程 */
.w.ok   { stroke: var(--green); }      /* 绿 · 正确/通过 */
.w.hl   { stroke: #f59e0b; }           /* 橙 · 高亮 */
.w.mut  { stroke: var(--ink-faint); }  /* 灰 */
.w.dot  { stroke-dasharray: 3 5; stroke: var(--ink-faint); }
.w.dash { stroke-dasharray: 8 6; }
.w.lt   { stroke: #e9e6ef; }

/* —— 箭头：marker 用类挂接，defs 见各页顶部隐藏层 —— */
.w.ar,   .w.ar-r, .w.ar-b, .w.ar-g, .w.ar-a, .w.ar-m, .w.ar-p, .w.ar-c { }
.w.ar   { marker-end: url(#ar);   }
.w.ar-r { marker-end: url(#ar-r); }
.w.ar-b { marker-end: url(#ar-b); }
.w.ar-g { marker-end: url(#ar-g); }
.w.ar-a { marker-end: url(#ar-a); }
.w.ar-m { marker-end: url(#ar-m); }
.w.ar-p { marker-end: url(#ar-p); }
.w.ar-c { marker-end: url(#ar-c); }

/* —— 文本 .t：默认 13px / 墨色 —— */
.t  { fill: #17151f; font-size: 13px; font-family: var(--sans); }
.t.sm   { font-size: 11px; }
.t.md   { font-size: 15px; }
.t.lg   { font-size: 17px; }
.t.xl   { font-size: 21px; }
.t.mono { font-family: var(--mono); }
.t.serif{ font-family: var(--serif); }
.t.b    { font-weight: 700; }
.t.c    { text-anchor: middle; }
.t.r    { text-anchor: end; }

.t.mut  { fill: var(--ink-faint); }
.t.soft { fill: var(--ink-soft); }
.t.pri  { fill: var(--primary); }
.t.acc  { fill: var(--accent); }
.t.cy   { fill: #0891b2; }
.t.grn  { fill: var(--green); }
.t.red  { fill: var(--red); }
.t.amb  { fill: var(--amber); }
.t.pur  { fill: #7c3aed; }
.t.wht  { fill: #ffffff; }

/* —— 形状填充 —— */
.fill-panel  { fill: #f8f7fb; stroke: #c9c3d6; stroke-width: 1.2; }
.fill-dim    { fill: #f1f0f5; stroke: #d8d3e0; stroke-width: 1.2; }
.fill-blue   { fill: var(--blue-sf);   stroke: #93c5fd; stroke-width: 1.2; }
.fill-purple { fill: var(--primary-sf);stroke: #c4b5fd; stroke-width: 1.2; }
.fill-pink   { fill: var(--accent-sf); stroke: #fda4af; stroke-width: 1.2; }
.fill-cyan   { fill: var(--cyan-sf);   stroke: #67e8f9; stroke-width: 1.2; }
.fill-green  { fill: var(--green-sf);  stroke: #86efac; stroke-width: 1.2; }
.fill-amber  { fill: var(--amber-sf);  stroke: #fcd34d; stroke-width: 1.2; }
.fill-red    { fill: var(--red-sf);    stroke: #fca5a5; stroke-width: 1.2; }
.fill-ink    { fill: #17151f; }
.fill-white  { fill: #ffffff; stroke: #d8d3e0; stroke-width: 1.2; }
.dotn        { fill: #3f3b4d; }                     /* 结点 */
.dotn.pri    { fill: var(--primary); }
.dotn.acc    { fill: var(--accent); }
.dotn.cy     { fill: var(--cyan); }

/* —— SVG 数字标注徽章 —— */
.badge     { fill: var(--primary); }
.badge-t   { fill: #ffffff; font-size: 11px; font-weight: 700; font-family: var(--serif); }

/* —— 纯 CSS 动画演示（HTML 版轻交互；打印时静止于首帧） —— */
@media screen {
  .anim-pulse { animation: bk-pulse 2.2s ease-in-out infinite; }
  @keyframes bk-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }
  .anim-slide {
    animation: bk-slide 3.2s ease-in-out infinite alternate;
  }
  @keyframes bk-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--slide-x, 60px)); }
  }
  .anim-fadein { animation: bk-fadein 1.6s ease-in both; }
  .anim-fadein.d2 { animation-delay: .5s; }
  .anim-fadein.d3 { animation-delay: 1s; }
  @keyframes bk-fadein {
    from { opacity: 0; translate: 0 6px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ============================================================
   13. 打印契约（Chromium → PDF）
   ============================================================ */

@media print {
  @page { size: A4; margin: 19mm 20mm 21mm; }

  body {
    font-size: 10.5pt;
    background: #fff;
    line-height: 1.78;
  }
  .shell { max-width: none; padding: 0; }
  .topbar, .chapter-nav, .no-print { display: none !important; }
  .copy-btn { display: none !important; }

  h2, h3, h4 { break-after: avoid; }
  h2 { margin-top: 40px; padding-top: 12px; }
  figure, table, .callout, .drill, .keypoints, details.quiz,
  .prompt-card, .compare, .deep-dive, ol.steps > li, .card {
    break-inside: avoid;
  }
  details.quiz { open: true; }
  details.quiz > .ans { display: block !important; }
  details.quiz summary { background: #f7f5fb; }

  a { color: inherit; text-decoration: none; border: 0; }

  mark { background: #fde68a; }
  .hero { border-radius: 0; break-inside: avoid; margin-bottom: 18px; }

  /* 视频在纸上无法播放：隐藏播放器，改出海报帧 + 提示 */
  figure video { display: none !important; }
  figure .vid-poster { display: block; width: 100%; border-radius: 10px; }
  figure .vid-hint { display: inline-block; font-size: 11px; font-weight: 700;
    color: #44403c; background: #f5f3f9; border: 1px solid #d8d3e0;
    border-radius: 5px; padding: 0 6px; margin-left: 6px; }
  figure .vid-hint::before { content: "网页版可播放"; }

  /* 封面与目录只由 book 模式使用 */
  .cover-page { padding: 52mm 10mm 0; }
}