/* =========================================================
   从高中数学到代数几何 · 全局样式 (ATLAS Editorial Subpage)
   设计取向：编辑学术风（editorial-academic），克制留白、
   规则线节奏与可变字重排版；与 index.html 风格保持一致。
   ========================================================= */

/* ---------- 字体（Google Fonts） ---------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700;9..144,900&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@400;500&family=Public+Sans:wght@300;400;500;600&display=swap");

/* ---------- CSS 变量 ---------- */
:root {
  /* 墨色阶梯 */
  --ink: #0b1b2d;
  --ink-mid: #3d4a5c;
  --ink-mute: #6a7585;
  --ink-soft: #9aa3b1;

  /* 纸张层 */
  --paper: #ffffff;
  --paper-2: #fafaf7;
  --paper-3: #f4f3ee;

  /* 规则线 */
  --rule: #e7e5df;
  --rule-strong: #cfccc2;

  /* 强调（琥珀） */
  --accent: #b45309;
  --accent-2: #d97706;
  --accent-soft: #fbeed5;

  /* Part 调色（与首页一致） */
  --p1: #2e5c8a;
  --p1-soft: #eef3f9;
  --p2: #9a6914;
  --p2-soft: #f7f1e6;
  --p3: #3f6f4a;
  --p3-soft: #eef4ef;
  --p4: #8a3838;
  --p4-soft: #f7ecec;
  --p5: #5b4794;
  --p5-soft: #efebf6;

  /* math-block 调色板 · Manuscript Tints
     设计原则：accent 拉至 30–45% 亮度低饱和墨色调，
     bg 限于 95–98% 亮度的极淡 tint，在纸白上“自然涌现”。 */
  --c-definition: #3a6390;
  --c-definition-bg: #eef3f8;
  --c-theorem: #a85a1c;
  --c-theorem-bg: #fbf3e8;
  --c-lemma: #557b62;
  --c-lemma-bg: #eff4f0;
  --c-example: #705184;
  --c-example-bg: #f3eff7;
  --c-exercise: #9c4d4d;
  --c-exercise-bg: #f8efef;
  --c-corollary: #a26721;
  --c-corollary-bg: #fbf4e6;
  --c-proposition: #7d6328;
  --c-proposition-bg: #f7f1e1;
  --c-remark: #5d6b7a;
  --c-remark-bg: #f1f3f5;
  --c-proof: #4a5566;
  --c-proof-bg: #eef0f2;

  /* 难度色（保留旧变量名供兼容） */
  --color-difficulty-easy: #3f6f4a;
  --color-difficulty-medium: #b45309;
  --color-difficulty-hard: #8a3838;

  /* 旧变量兼容映射（防止子页内联样式断裂） */
  --color-primary: var(--p1);
  --color-primary-light: #5a7fa0;
  --color-primary-dark: var(--ink);
  --color-bg: var(--paper);
  --color-bg-secondary: var(--paper-2);
  --color-bg-tint: var(--paper-2);
  --color-border: var(--rule);
  --color-border-strong: var(--rule-strong);
  --color-text: var(--ink);
  --color-text-light: var(--ink-mid);
  --color-text-muted: var(--ink-mute);
  --color-gold: var(--accent);
  --color-sage: var(--p3);
  --color-rose: var(--p4);
  --color-definition: var(--c-definition);
  --color-theorem: var(--c-theorem);
  --color-lemma: var(--c-lemma);
  --color-example: var(--c-example);
  --color-exercise: var(--c-exercise);

  /* SVG 节点蓝色阶梯（保留兼容） */
  --svg-node-stage0: #e3edf7;
  --svg-node-stage1: #c8d9ea;
  --svg-node-stage2: #9cbbd6;
  --svg-node-stage3: #6b9ab8;
  --svg-node-stage35: #4a7c96;
  --svg-node-stage4: #345e75;
  --svg-node-stage5: #254a5c;
  --svg-node-stage6: #1e3a4d;
  --svg-node-stage7: #152838;

  /* 几何 */
  --max-width: 980px;
  --max-width-wide: 1240px;
  --line-height: 1.72;

  /* 字体栈 */
  --f-display:
    "Fraunces", "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC",
    Georgia, serif;
  --f-italic: "EB Garamond", "Songti SC", "Source Han Serif SC", serif;
  --f-body:
    "Public Sans", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", sans-serif;
  --f-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;

  /* 旧字体变量映射 */
  --font-body: var(--f-body);
  --font-heading: var(--f-display);
  --font-display: var(--f-display);
  --font-mono: var(--f-mono);

  /* 阴影 / 圆角 / 缓动 */
  --shadow-xs: 0 1px 2px rgba(11, 27, 45, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 27, 45, 0.05);
  --shadow-md: 0 4px 16px rgba(11, 27, 45, 0.06);
  --shadow-lg: 0 8px 32px rgba(11, 27, 45, 0.08);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- 重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  /* CSS counter 初始化——为 math-block 各类型提供独立计数器 */
  counter-reset: h2-c def-c thm-c lem-c ex-c exer-c cor-c prop-c rem-c note-c;
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 16.5px;
  line-height: var(--line-height);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 28px 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.tutorial-index {
  max-width: var(--max-width-wide);
  padding: 0;
}

/* 入场动画 */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body > * {
  animation: rise 0.55s var(--easing) both;
}
body > *:nth-child(2) {
  animation-delay: 0.05s;
}
body > *:nth-child(3) {
  animation-delay: 0.1s;
}
body > *:nth-child(4) {
  animation-delay: 0.15s;
}
body > *:nth-child(n + 5) {
  animation-delay: 0.2s;
}

/* ---------- 标题 ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-display);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 144;
}
h1 {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin: 0.2em 0 0.35em;
  letter-spacing: -0.025em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30;
}
h2 {
  font-weight: 500;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  margin: 2.4em 0 0.7em;
  /* 节内 counter 重置：每个 h2 下一部 math-block 重新从 1 开始计数 */
  counter-increment: h2-c;
  counter-reset: def-c thm-c lem-c ex-c exer-c cor-c prop-c rem-c note-c;
  padding-bottom: 0.45em;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -0.01em;
  position: relative;
}
h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 1px;
  background: var(--ink);
}
h3 {
  font-weight: 500;
  font-size: 1.2rem;
  margin: 1.7em 0 0.5em;
  color: var(--ink);
}
h4 {
  font-weight: 500;
  font-size: 1.02rem;
  margin: 1.3em 0 0.4em;
  color: var(--ink-mid);
  font-family: var(--f-italic);
  font-style: italic;
}

p {
  margin: 0.85em 0;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition:
    color 0.2s var(--easing),
    border-color 0.2s var(--easing);
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

strong {
  font-weight: 600;
  color: var(--ink);
  /* 中西混排：与汉字之间保留微小气口，避免黏连 */
  margin: 0 0.12em;
}
em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--ink-mid);
  /* 中西/正斜混排：斜体本身右倾，与汉字距离更需要撑开 */
  margin: 0 0.18em;
  /* 关闭可能造成断行时多余空白的折行 */
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
}

ul,
ol {
  padding-left: 1.5em;
}
li {
  margin: 0.3em 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4em 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* ---------- header / 章节元信息 ---------- */
header {
  margin: 18px 0 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink);
  position: relative;
}
header h1 {
  margin-bottom: 0.4em;
}
/* meta chip：mono 小字 + 琥珀左规则线 + 米白底，emoji 在小字号下自然降级 */
.chapter-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 14px 0 0;
  padding: 7px 14px 7px 12px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  word-spacing: 0.18em;
  color: var(--ink-mute);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  position: relative;
}
.chapter-meta::before {
  content: "META";
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-weight: 500;
  margin-right: 6px;
  padding-right: 10px;
  border-right: 1px solid var(--rule);
}
.chapter-meta strong {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* emoji 用 OpenType 调整在小字号下视觉权重 */
.chapter-meta {
  --emoji-scale: 0.92;
}

/* =========================================================
   面包屑（breadcrumb）
   ========================================================= */
.breadcrumb {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 4px 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.breadcrumb a {
  color: var(--ink-mute);
  border-bottom: none;
  transition: color 0.18s var(--easing);
}
.breadcrumb a:hover {
  color: var(--accent);
  border-bottom: none;
}
.breadcrumb__sep {
  margin: 0 8px;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* =========================================================
   prerequisites（前置知识）
   ========================================================= */
.prerequisites {
  margin: 28px 0 36px;
  padding: 18px 22px 16px;
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}
.prerequisites::before {
  content: "Prerequisites";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 10px;
  border: 1px solid var(--rule);
  border-radius: 100px;
}
.prerequisites h3 {
  display: none;
}
.prerequisites p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-mid);
  line-height: 1.65;
}

/* =========================================================
   math-block 系列 + CSS counter 自动编号
   ========================================================= */
.math-block {
  background: var(--paper-2);
  border-left: 3px solid var(--ink);
  padding: 22px 26px 18px;
  margin: 28px 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.25s var(--easing);
}
.math-block:hover {
  box-shadow: var(--shadow-sm);
}

/* 徽章（chip）共同骨架 —— 贴合卡片左边规则线，胶囊外形 */
.math-block::before {
  content: attr(data-label);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 10px;
  margin: 0 0 12px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--paper);
  border: 1px solid currentColor;
  border-radius: 100px;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.math-block h4 {
  margin: 0 0 0.4em;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.math-block p:last-child {
  margin-bottom: 0;
}
.math-block ul,
.math-block ol {
  margin: 0.5em 0;
}

/* --- 各类型：counter 递增 + 徽章文字 + 主配色（Manuscript Tints） --- */
.math-block.definition {
  border-left-color: var(--c-definition);
  background: var(--c-definition-bg);
  counter-increment: def-c;
}
.math-block.definition::before {
  content: "Definition \B7 定义 " counter(h2-c) "." counter(def-c);
  color: var(--c-definition);
  border-color: var(--c-definition);
}

.math-block.theorem {
  border-left-color: var(--c-theorem);
  background: var(--c-theorem-bg);
  counter-increment: thm-c;
}
.math-block.theorem::before {
  content: "Theorem \B7 定理 " counter(h2-c) "." counter(thm-c);
  color: var(--c-theorem);
  border-color: var(--c-theorem);
}

.math-block.lemma {
  border-left-color: var(--c-lemma);
  background: var(--c-lemma-bg);
  counter-increment: lem-c;
}
.math-block.lemma::before {
  content: "Lemma \B7 引理 " counter(h2-c) "." counter(lem-c);
  color: var(--c-lemma);
  border-color: var(--c-lemma);
}

.math-block.example {
  border-left-color: var(--c-example);
  background: var(--c-example-bg);
  counter-increment: ex-c;
}
.math-block.example::before {
  content: "Example \B7 例 " counter(h2-c) "." counter(ex-c);
  color: var(--c-example);
  border-color: var(--c-example);
}

.math-block.exercise {
  border-left-color: var(--c-exercise);
  background: var(--c-exercise-bg);
  counter-increment: exer-c;
}
.math-block.exercise::before {
  content: "Exercise \B7 练习 " counter(h2-c) "." counter(exer-c);
  color: var(--c-exercise);
  border-color: var(--c-exercise);
}

.math-block.corollary {
  border-left-color: var(--c-corollary);
  background: var(--c-corollary-bg);
  counter-increment: cor-c;
}
.math-block.corollary::before {
  content: "Corollary \B7 推论 " counter(h2-c) "." counter(cor-c);
  color: var(--c-corollary);
  border-color: var(--c-corollary);
}

.math-block.proposition {
  border-left-color: var(--c-proposition);
  background: var(--c-proposition-bg);
  counter-increment: prop-c;
}
.math-block.proposition::before {
  content: "Proposition \B7 命题 " counter(h2-c) "." counter(prop-c);
  color: var(--c-proposition);
  border-color: var(--c-proposition);
}

.math-block.remark {
  border-left-color: var(--c-remark);
  background: var(--c-remark-bg);
  counter-increment: rem-c;
}
.math-block.remark::before {
  content: "Remark \B7 注 " counter(h2-c) "." counter(rem-c);
  color: var(--c-remark);
  border-color: var(--c-remark);
}

.math-block.note {
  border-left-color: var(--c-remark);
  background: var(--c-remark-bg);
  counter-increment: note-c;
}
.math-block.note::before {
  content: "Note \B7 笔记 " counter(h2-c) "." counter(note-c);
  color: var(--c-remark);
  border-color: var(--c-remark);
}

/* proof 按数学习惯不编号，但保留 □ 结束符 */
.math-block.proof {
  border-left-color: var(--c-proof);
  background: var(--c-proof-bg);
}
.math-block.proof::before {
  content: "Proof \B7 证明";
  color: var(--c-proof);
  border-color: var(--c-proof);
}
.math-block.proof::after {
  content: "□";
  display: block;
  text-align: right;
  font-size: 1.2em;
  color: var(--c-proof);
  margin-top: 6px;
}

/* =========================================================
   章节导航（上下章）
   ========================================================= */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 64px 0 24px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.chapter-nav a {
  flex: 1;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--rule);
  transition:
    border-color 0.25s var(--easing),
    transform 0.25s var(--easing),
    box-shadow 0.25s var(--easing);
  position: relative;
  overflow: hidden;
}
.chapter-nav a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 24px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 0.25s var(--easing);
}
.chapter-nav a.next::before {
  left: auto;
  right: -1px;
  border-left: 0;
  border-right: 1px solid var(--accent);
}
.chapter-nav a:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 var(--ink);
}
.chapter-nav a:hover::before {
  opacity: 1;
}
.chapter-nav a small {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.chapter-nav a.next {
  text-align: right;
  align-items: flex-end;
}

/* =========================================================
   折叠（details / summary）
   ========================================================= */
details {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0;
  margin: 22px 0;
  background: var(--paper-2);
  overflow: hidden;
  transition: border-color 0.2s var(--easing);
}
details[open] {
  border-color: var(--rule-strong);
}
details > summary {
  cursor: pointer;
  padding: 14px 20px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  color: var(--ink);
  transition: background 0.2s var(--easing);
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::before {
  content: "+";
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--accent);
  width: 14px;
  text-align: center;
  font-weight: 500;
}
details[open] > summary::before {
  content: "−";
}
details > summary:hover {
  background: var(--paper-3);
}
details > .details-body,
details > div {
  padding: 4px 20px 18px;
  border-top: 1px dashed var(--rule);
  color: var(--ink-mid);
  font-size: 0.95rem;
}

/* =========================================================
   代码块 / 行内代码
   ========================================================= */
code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  background: var(--paper-3);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink);
  border: 1px solid var(--rule);
}
pre {
  font-family: var(--f-mono);
  background: var(--paper-3);
  padding: 18px 20px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.65;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  margin: 22px 0;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
  border: 0;
  font-size: inherit;
}

/* =========================================================
   按钮
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  transition: all 0.2s var(--easing);
  cursor: pointer;
}
.btn:hover {
  border-color: var(--ink);
  color: var(--accent);
}
.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* =========================================================
   引用块（blockquote）
   ========================================================= */
blockquote {
  margin: 22px 0;
  padding: 6px 22px;
  border-left: 2px solid var(--accent);
  color: var(--ink-mid);
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 1.02rem;
}
blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* =========================================================
   表格
   ========================================================= */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
th,
td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-2);
}
tbody tr:hover {
  background: var(--paper-2);
}

/* =========================================================
   图片 / SVG（子页内联 SVG 图解）
   ========================================================= */
img,
svg.figure,
svg[viewBox] {
  max-width: 100%;
  height: auto;
}
figure {
  margin: 28px 0;
  text-align: center;
}
figcaption {
  margin-top: 10px;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-mute);
}

/* SVG 内嵌图解的容器（子页常见模式：直接 <svg> 在文档流） */
/* =========================================================
   SVG 图解 · ATLAS Editorial 全局适配
   - 画框：纸白底 + 微光顶部 + 规则边框 + hover 浮起
   - 角标：左上/右下隐藏的 dashed 小规则线（与 Stage 卡片呼应）
   - 文字：mono + 墨中色，与正文 caption 骨架一致
   - 属性选择器：接管旧硬编码色，让老 SVG 纳入新主题
   ========================================================= */
main > svg,
section > svg,
.math-block > svg,
.svg-figure {
  display: block;
  margin: 32px auto;
  padding: 18px 18px 14px;
  background:
    radial-gradient(ellipse at top, rgba(11, 27, 45, 0.02), transparent 70%),
    rgba(11, 27, 45, 0.035); /* 高透明度浅灰：与纸白正文形成柔和区分，便于阅读 */
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  position: relative;
  max-width: 100%;
  height: auto;
  transition:
    border-color 0.3s var(--easing),
    box-shadow 0.3s var(--easing),
    transform 0.3s var(--easing);
}
main > svg:hover,
section > svg:hover,
.math-block > svg:hover,
.svg-figure:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
}

/* SVG 内文本默认：mono + 墨中色 */
svg text {
  font-family: var(--f-mono), "Songti SC", serif;
  fill: var(--ink-mid);
}
svg text[font-style="italic"],
svg text.italic {
  font-family: var(--f-italic), "Songti SC", serif;
  font-style: italic;
}

/* foreignObject 内 KaTeX 公式色调 */
svg foreignObject .katex,
svg foreignObject div {
  color: var(--ink);
}

/* --- 属性选择器：接管旧 SVG 中的硬编码色 ---
   不需修改 HTML，仅靠 CSS 映射到新主题变量 */

/* 墨色系（坐标轴、箭头、辅助线） */
svg [stroke="#2C3E50"],
svg [stroke="#2c3e50"] {
  stroke: var(--ink-mid);
}
svg [fill="#2C3E50"],
svg [fill="#2c3e50"] {
  fill: var(--ink-mid);
}
svg [stroke="#1E3A5F"],
svg [stroke="#1e3a5f"] {
  stroke: var(--ink);
}
svg [fill="#1E3A5F"],
svg [fill="#1e3a5f"] {
  fill: var(--ink);
}

/* 学院蓝调（原 --color-primary 硬编码） → c-definition */
svg [stroke="#3D5A80"],
svg [stroke="#3d5a80"],
svg [stroke="#5A7FA0"],
svg [stroke="#5a7fa0"] {
  stroke: var(--c-definition);
}
svg [fill="#3D5A80"],
svg [fill="#3d5a80"],
svg [fill="#5A7FA0"],
svg [fill="#5a7fa0"] {
  fill: var(--c-definition);
}

/* 规则线 / 网格线（原 --color-border 硬编码） */
svg [stroke="#E8E0D4"],
svg [stroke="#e8e0d4"],
svg [stroke="#E7E5DF"],
svg [stroke="#e7e5df"] {
  stroke: var(--rule);
}

/* 透明填充（原 rgba 硬编码）→ Manuscript Tints */
svg [fill^="rgba(74, 144, 217"],
svg [fill^="rgba(74,144,217"] {
  fill: rgba(58, 99, 144, 0.08); /* 新 c-definition 透明 */
}
svg [fill^="rgba(231, 76, 60"],
svg [fill^="rgba(231,76,60"] {
  fill: rgba(156, 77, 77, 0.08); /* 新 c-exercise 透明 */
}
svg [fill^="rgba(184, 134, 11"],
svg [fill^="rgba(184,134,11"] {
  fill: rgba(168, 90, 28, 0.1); /* 新 琥珀 透明 */
}
svg [fill^="rgba(74, 124, 89"],
svg [fill^="rgba(74,124,89"] {
  fill: rgba(85, 123, 98, 0.08); /* 新 c-lemma 透明 */
}
svg [fill^="rgba(160, 82, 45"],
svg [fill^="rgba(160,82,45"] {
  fill: rgba(156, 77, 77, 0.08); /* 新 c-exercise 透明 */
}
svg [fill^="rgba(142, 68, 173"],
svg [fill^="rgba(142,68,173"] {
  fill: rgba(112, 81, 132, 0.08); /* 新 c-example 透明 */
}

/* 主题调色：让不同表现色调逆向接管（颜色名同但 hex 略饰） */
svg [stroke="#2E5C8A"] {
  stroke: var(--c-definition);
}
svg [fill="#2E5C8A"] {
  fill: var(--c-definition);
}
svg [stroke="#B45309"] {
  stroke: var(--accent);
}
svg [fill="#B45309"] {
  fill: var(--accent);
}
svg [stroke="#3F6F4A"] {
  stroke: var(--c-lemma);
}
svg [fill="#3F6F4A"] {
  fill: var(--c-lemma);
}
svg [stroke="#5B4794"] {
  stroke: var(--c-example);
}
svg [fill="#5B4794"] {
  fill: var(--c-example);
}
svg [stroke="#8A3838"] {
  stroke: var(--c-exercise);
}
svg [fill="#8A3838"] {
  fill: var(--c-exercise);
}
svg [stroke="#9A6914"] {
  stroke: var(--c-proposition);
}
svg [fill="#9A6914"] {
  fill: var(--c-proposition);
}
svg [stroke="#0B1B2D"] {
  stroke: var(--ink);
}
svg [fill="#0B1B2D"] {
  fill: var(--ink);
}
svg [stroke="#6A7585"] {
  stroke: var(--ink-mute);
}
svg [fill="#6A7585"] {
  fill: var(--ink-mute);
}

/* 在 math-block 内部的 SVG：背景与卡片饰面融合，去除额外边框 */
.math-block > svg {
  background: rgba(11, 27, 45, 0.03); /* 极淡灰，与卡片色调叠加成柔和低营区分 */
  border-color: var(--rule);
  margin: 18px 0;
}

/* =========================================================
   SVG 图解标题 (figcaption)
   由 common.js 在运行时从 <h3>图解：xx</h3> 转换而来，
   置于 SVG 下方居中，编号格式 “图 X.Y · xx”。
   ========================================================= */
.svg-caption {
  display: block;
  margin: 14px auto 36px; /* 与 SVG 拉开呼吸间距，下方更宽留白 */
  padding: 6px 16px 0;
  max-width: 90%;
  text-align: center;
  line-height: 1.55;
  color: var(--ink-mute);
}
.svg-caption__num {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
.svg-caption__title {
  display: inline-block;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-mid);
  vertical-align: baseline;
}
@media (max-width: 540px) {
  .svg-caption {
    margin: 10px auto 24px;
    padding: 6px 4px 0;
    max-width: 100%;
  }
  .svg-caption__num {
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 4px;
    margin: 0 0 4px;
  }
  .svg-caption__title {
    font-size: 0.78rem;
  }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  main > svg,
  section > svg,
  .math-block > svg,
  .svg-figure {
    transition: none;
  }
}

/* =========================================================
   KaTeX 微调（与 Fraunces 视觉协调）
   ========================================================= */
.katex {
  font-size: 1.04em;
}
.katex-display {
  margin: 1.3em 0;
}
.katex-display > .katex {
  font-size: 1.12em;
}

/* =========================================================
   旧首页类（兼容遗留页面，不再为新首页生效）
   ========================================================= */
.hero,
.hero__title,
.hero__sub,
.hero__meta,
.roadmap,
.phase-groups,
.phase-group,
.phase-card,
.katex-probe,
.progress,
.progress__bar {
  /* 这些 class 仅在旧首页/遗留模板使用；新首页 index.html 已自包含覆盖 */
  font-family: inherit;
}

/* =========================================================
   站点页脚
   ========================================================= */
.site-footer {
  margin-top: 80px;
  padding: 28px 0 8px;
  border-top: 1px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer strong {
  color: var(--ink);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

/* =========================================================
   响应式断点
   ========================================================= */
@media (max-width: 900px) {
  body {
    padding: 22px 22px 64px;
    font-size: 16px;
  }
  body.tutorial-index {
    padding: 0;
  }
  h1 {
    font-size: clamp(1.9rem, 6vw, 2.6rem);
  }
  h2 {
    font-size: 1.35rem;
    margin-top: 2em;
  }
  .chapter-nav {
    gap: 12px;
  }
  .chapter-nav a {
    padding: 14px 16px;
  }
  .math-block {
    padding: 18px 20px 16px;
  }
}
@media (max-width: 540px) {
  body {
    padding: 16px 16px 56px;
  }
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1.05rem;
  }
  .chapter-nav {
    flex-direction: column;
  }
  .chapter-nav a {
    text-align: left;
    align-items: flex-start;
  }
  .chapter-nav a.next {
    text-align: left;
    align-items: flex-start;
  }
  .math-block {
    padding: 16px 18px 14px;
  }
  pre {
    padding: 14px 16px;
    font-size: 0.78rem;
  }
  .breadcrumb {
    font-size: 0.66rem;
  }
}

/* =========================================================
   减少动效偏好
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* =========================================================
   打印样式
   ========================================================= */
@media print {
  body {
    max-width: none;
    background: var(--paper);
    background-image: none;
    color: #000;
    padding: 0;
    font-size: 11pt;
  }
  .breadcrumb,
  .chapter-nav,
  details > summary::before {
    display: none;
  }
  details {
    border: none;
    background: none;
  }
  details > .details-body {
    border-top: 1px solid var(--rule);
    padding: 0;
  }
  a {
    color: #000;
    border-bottom: none;
  }
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }
  .math-block {
    page-break-inside: avoid;
  }
}