/* ===========================================================
   课程页动效 / 翻页感导航 / 阅读进度（继承主页设计语言）
   通过 <link> 引入，零侵入式升级；不改动任何现有课程页 HTML 结构。
   =========================================================== */

/* ---- 入场揭示：继承主页 .anim-reveal 语汇（克制：透明度 + 轻位移） ---- */
.anim-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s cubic-bezier(.25, .1, .25, 1),
              transform .3s cubic-bezier(.25, .1, .25, 1);
  will-change: opacity, transform;
}
.anim-reveal.visible { opacity: 1; transform: none; }

/* 编辑式暖橙选区：课程页与首页一致（零新辉光、reduced-motion 无关） */
::selection { background: var(--accent-warm-soft); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .anim-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- 编辑式孤行控制：课程页正文段落避免寡行/孤行 ---- */
p { text-wrap: pretty; overflow-wrap: break-word; }

/* 编辑式列表标记：项目符号 / 编号统一为暖橙单 accent，与全站编辑式系统收口
   （借鉴 Are.na 暖纸单 accent、Klim 衬线排版系统；来源：外部审美吸收第 94/95 轮）。
   纯 CSS、零新 UI、无移动端断点；仅作用于可见列表标记，refs 列表用 ::before
   自定义标记（list-style:none）不受影响。 */
li::marker { color: var(--accent-warm); }
li { overflow-wrap: break-word; }

/* ---- 顶部阅读进度条（与主页一致） ---- */
.lesson-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 200; pointer-events: none;
}
.lesson-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-warm-soft), var(--accent-warm));
  transition: width .08s linear;
}

/* ---- 正文内联术语锚点 + 悬停释义 ----
   外部审美借鉴：Klim / Nouvelle Noire「等宽技术词作单一 accent 锚点」；
   GitHub 机制：ibelick/motion-primitives tooltip.tsx（opacity + 2px Y + scale .95→1，
   hover/focus 触发，零辉光、克制）。为零基础用户把 jargon 当场翻译成大白话。 */
/* term tooltip removed */

.lesson-nav a,
.lesson-nav .disabled {
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--card, #fbf9f6);
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform var(--transition, .25s), border-color var(--transition, .25s),
              box-shadow var(--transition, .25s), color var(--transition, .25s);
}
.lesson-nav a { color: var(--accent-warm-ink); }
.lesson-nav a:hover {
  transform: translateY(-3px);
  border-color: var(--accent-warm-soft);
  box-shadow: var(--shadow-card-hover, 0 14px 34px rgba(44, 43, 40, .12));
}
.lesson-nav a:active {
  transform: translateY(1px) scale(.99);
  transition-duration: .08s;
}
.lesson-nav .disabled {
  color: var(--text-soft, #a09b95);
  opacity: .6; pointer-events: none;
  background: var(--panel-2, #f0eae3);
}
/* 翻页折角：hover 时右上角轻微折起（纯 CSS，无新增辉光） */
.lesson-nav a::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 18px 18px 0;
  border-style: solid;
  border-color: transparent var(--bg, #f4f1ed) transparent transparent;
  transition: border-width var(--transition, .25s);
}
.lesson-nav a:hover::after { border-width: 0 26px 26px 0; }
.lesson-nav .nav-dir {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-warm);
}
.lesson-nav .nav-title {
  font-family: var(--font-serif, serif);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-nav a:hover,
  .lesson-nav a:active { transform: none; }
}

/* ===========================================================
   本轮新增：页内目录 TOC / 回到顶部 / 相关课程交叉引用
   元素均由 js/lesson-anim.js 零侵入注入，此处仅定义样式。
   设计语言：暖橙 mono 标签 (.22em)、克制位移、玻璃感、无新增辉光。
   =========================================================== */

/* 锚点跳转不被固定导航遮挡 */
.lesson-h { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- 回到顶部 ---- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 160;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-warm, #c97b5a);
  color: #fffaf6; border: none; cursor: pointer;
  box-shadow: 0 10px 28px rgba(201,123,90,0.32);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease),
              box-shadow .3s var(--ease, ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 0 14px 34px rgba(201,123,90,0.46); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .2s; transform: none !important; }
}

/* ---- 页内目录 TOC ---- */
.toc-fab {
  position: fixed; left: 24px; bottom: 24px; z-index: 160;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--panel, #fbf9f6); color: var(--accent-warm-ink, #ad5f3f);
  border: 1px solid var(--border, #d9d4ce); cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 12px;
  letter-spacing: var(--label-track, .22em); text-transform: uppercase;
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,.06));
  transition: transform .3s var(--ease, ease), border-color .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.toc-fab:hover { transform: translateY(-2px); border-color: var(--accent-warm-soft, #e7b9a4); }
.toc-fab svg { width: 16px; height: 16px; }

.lesson-toc {
  position: fixed; top: 0; right: 0; z-index: 165;
  width: 300px; max-width: 86vw; height: 100vh;
  background: var(--panel, #fbf9f6);
  border-left: 1px solid var(--border-light, rgba(0,0,0,.06));
  box-shadow: -20px 0 50px rgba(44,43,40,0.10);
  padding: 92px 26px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .42s var(--ease, cubic-bezier(.22,1,.36,1));
}
.lesson-toc.is-open { transform: translateX(0); }
.lesson-toc__close {
  position: absolute; top: 26px; right: 22px;
  background: none; border: none; cursor: pointer;
  color: var(--muted, #8b7e74); font-size: 24px; line-height: 1;
}
.lesson-toc__label {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--accent-warm, #c97b5a);
  margin-bottom: 18px;
}
.lesson-toc ul { list-style: none; padding: 0; margin: 0; }
.lesson-toc li { margin: 0; }
.lesson-toc a {
  display: block; padding: 9px 12px 9px 14px;
  border-left: 2px solid transparent;
  color: var(--text-muted, #7a7671); text-decoration: none;
  font-size: 14px; line-height: 1.5;
  transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease), background .2s var(--ease, ease), padding-left .2s var(--ease, ease);
}
/* 果粒姐站编辑式微交互落地：hover 时条目轻微右移(≤8px)并编号染深暖，呼应「目录/盖章」母题；纯 hover 发声、零辉光、零移动端断点 */
.lesson-toc a:hover { color: var(--text, #2c2b28); background: var(--panel-2, #f0eae3); padding-left: 22px; }
.lesson-toc a.active {
  color: var(--accent-warm-ink, #ad5f3f);
  border-left-color: var(--accent-warm, #c97b5a);
  background: var(--accent-warm-bg, #f6e7dd);
  font-weight: 600;
}
/* 次级「本节大纲」浮钮：堆叠在「目录」上方，弱化配色 */
.toc-fab--local {
  bottom: 74px;
  background: var(--panel, #fbf9f6);
  color: var(--text-muted, #7a7671);
  border-color: var(--border, #d9d4ce);
}
.toc-fab--local:hover {
  transform: translateY(-2px);
  border-color: var(--accent-warm-soft, #e7b9a4);
  color: var(--accent-warm-ink, #ad5f3f);
}

/* 课程目录：模块分组标题 + 编号 + 在读标记 */
.lesson-toc__group {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--muted, #8b7e74);
  margin: 22px 0 8px; padding-left: 14px;
}
.lesson-toc__group:first-of-type { margin-top: 2px; }
.lesson-toc .toc-link {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 12px 7px 14px; border-left: 2px solid transparent;
  color: var(--text-muted, #7a7671); text-decoration: none;
  font-size: 13.5px; line-height: 1.45;
  transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease), background .2s var(--ease, ease), padding-left .2s var(--ease, ease);
}
.lesson-toc .toc-link:hover { color: var(--text, #2c2b28); background: var(--panel-2, #f0eae3); padding-left: 22px; }
.lesson-toc .toc-link:hover .toc-num { color: var(--accent-warm-ink, #ad5f3f); }
.lesson-toc .toc-link.active {
  color: var(--accent-warm-ink, #ad5f3f);
  border-left-color: var(--accent-warm, #c97b5a);
  background: var(--accent-warm-bg, #f6e7dd);
  font-weight: 600;
}
.lesson-toc .toc-num {
  font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--accent-warm, #c97b5a); min-width: 22px; letter-spacing: .04em;
}
.lesson-toc .toc-link.active .toc-num { color: var(--accent-warm-ink, #ad5f3f); }
.lesson-toc .toc-title { flex: 1; }
.lesson-toc__cur {
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .18em; color: var(--accent-warm, #c97b5a); opacity: .85;
  margin-left: 4px; white-space: nowrap;
}

/* 宽屏（>=1600px）：课程总目录转为常驻右侧细栏（无遮罩），「目录」浮钮隐藏 */
@media (min-width: 1600px) {
  .toc-fab--course { display: none; }
  .lesson-toc--course {
    transform: none; width: 250px; height: auto;
    max-height: calc(100vh - 140px); top: 110px; right: 24px;
    background: transparent; border-left: 1px solid var(--divider, #e3ddd3);
    box-shadow: none; padding: 0 0 0 18px;
  }
  .lesson-toc--course .lesson-toc__close { display: none; }
  .toc-fab--local { bottom: 24px; }
}

/* ===========================================================
   大陆网络坑注脚 .cn-note：全站统一编辑式暖纸注脚
   原 chat/1、context/2（.pro-tip 内轻量 mono 文本）、context/4（独立盒子）三处样式不一致，
   本轮统一为单一规则（已删除三处局部定义）。单一暖橙锚点、零辉光、零动效、桌面 only。
   =========================================================== */
.cn-note {
  display: block;
  margin: 14px 0 0;
  padding: 11px 15px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--accent-warm-ink, #ad5f3f);
  background: var(--accent-warm-bg, #f6e7dd);
  border-left: 2px solid var(--accent-warm, #c97b5a);
  border-radius: var(--radius-sm, 8px);
}
.cn-note p { margin: 0; }

/* ---- 相关课程交叉引用 ---- */
.lesson-related {
  margin-top: 64px; padding-top: 36px;
  border-top: 1px solid var(--border, #d9d4ce);
}
.lesson-related__kicker {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--accent-warm, #c97b5a);
  margin-bottom: 6px;
}
.lesson-related__title {
  font-family: var(--font-serif, serif);
  font-size: 1.3rem; font-weight: 600; margin: 0 0 22px;
  letter-spacing: .01em; color: var(--text, #2c2b28);
}
.related-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.related-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 20px; border-radius: var(--radius, 12px);
  background: var(--card, #fbf9f6);
  border: 1px solid var(--border, #d9d4ce);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease, ease), border-color .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-warm-soft, #e7b9a4);
  box-shadow: var(--shadow-card-hover, 0 14px 34px rgba(44,43,40,.12));
}
.related-card__tag {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--accent-warm, #c97b5a);
}
.related-card__title {
  font-family: var(--font-serif, serif);
  font-size: 1.02rem; font-weight: 600; color: var(--text, #2c2b28);
  line-height: 1.35;
}
.related-card__why {
  font-size: 13px; color: var(--text-muted, #7a7671); line-height: 1.6;
}

/* ===========================================================
   第 74 轮新增（P1 微交互 · 落地 Klim / Pangram「卡片即主角」克制发声）
   全站最高频组件 .compare-card（bad/good/info 对比卡）此前为静态；
   加与 .related-card 同源的克制 hover：极轻上浮(≤3px) + 卡片阴影，
   不碰语义边框色（bad/good/info 各自配色保留）、零辉光、零新动效类别、
   桌面 only、reduced-motion 关过渡；与本站"克制动效 / 单 accent"红线一致；
   零 HTML 改动，全 20+ 课经本文件一次性生效。
   =========================================================== */
.compare-card {
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.compare-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover, 0 14px 34px rgba(44,43,40,.12));
}
@media (prefers-reduced-motion: reduce) {
  .compare-card { transition: none; }
  .compare-card:hover { transform: none; }
}

/* ===========================================================
   第 43 轮新增：阅读版心 + 模块化间距（借鉴 Every Layout / Standard Ebooks
   「限定阅读版心 + 模块化尺度」——把课程长文/区块约束到 --measure，
   英雄头图/价值网格/翻页导航/目录保持全宽，形成「全宽头图 → 限宽正文」编辑式节奏）
   纯静态排版，零动效、零辉光、无移动端断点；仅启用 tokens.css 中已定义但此前未启用的令牌。
   =========================================================== */
/* 正文段落靠 body max-width:1040px 自然限宽；
   callout/info 框不再额外缩窄，与正文同宽、撑满整行 */
.lesson-h {
  max-width: var(--measure, 72ch);
}
.try-it,
.insight-box,
.pro-tip,
.compare,
.insight-strip,
.lesson-faq,
.lesson-refs {
  max-width: none;
}

/* ===========================================================
   第 47 轮新增（落地本轮外部审美令牌，零新辉光 / 无移动端断点）
   1) 编辑式标题 kerning（type-together 真实字体特性：启用字距/连字/上下文替代，
      让衬线大标题的拉丁字形更精密；typ.io 印证「衬线 display + 几何 sans body」分层）
   2) 正文链接 hover 渐绘暖橙下划线 —— 与首页 a:hover 同源实现，统一全站链接语言
      （解决长期遗留：课程页静态 border-bottom 与首页 background-size 渐绘两风格不一致）
   =========================================================== */
.lesson-h,
.lesson-refs__title,
.lesson-related__title,
.related-card__title,
.toc-fab {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* 统一课程页正文链接 hover 与首页一致：渐绘暖橙下划线（零新辉光、reduced-motion 安全） */
p a, li a, td a, .callout a, .insight-box a, .story-box a, .footnote a, .quiz-box a {
  background-image: linear-gradient(var(--accent-warm), var(--accent-warm));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: color var(--transition), border-color var(--transition), background-size var(--transition);
}
p a:hover, li a:hover, td a:hover, .callout a:hover, .insight-box a:hover,
.story-box a:hover, .footnote a:hover, .quiz-box a:hover {
  color: var(--accent-warm-deep);
  background-size: 100% 1.5px;
  border-bottom-color: transparent;
}
/* 键盘可达性（P1 微交互·落地 agents-ui/agents-kit「focus 暖橙环」令牌）：
   课程页正文链接统一暖橙焦点环，与首页 a:focus-visible 同源、全站键盘语言一致；
   仅焦点态发声、零辉光、无移动端断点、reduced-motion 安全 */
p a:focus-visible, li a:focus-visible, td a:focus-visible, .callout a:focus-visible,
.insight-box a:focus-visible, .story-box a:focus-visible, .footnote a:focus-visible,
.quiz-box a:focus-visible {
  outline: 2px solid var(--accent-warm-deep, #9e4b2e);
  outline-offset: 2px;
  border-radius: 3px;
  background-size: 100% 1.5px;
}

/* ===========================================================
   阅读体验收口：统一补齐小屏布局、触控尺寸和键盘焦点。
   所有课程页都加载本文件，因此不需要逐页复制修复。
   =========================================================== */
:focus-visible {
  outline: 3px solid var(--accent-warm-deep, #9e4b2e);
  outline-offset: 3px;
}

/* 印章保留为静态识别点，移除每节课重复的扫描和呼吸，阅读更安静。 */
.lesson-seal,
.lesson-seal::before,
.lesson-hero:hover::after {
  animation: none !important;
}

.lesson-hero:hover::after { opacity: 0 !important; }



/* ===== animated-group 交错淡入（GitHub ibelick/motion-primitives animated-group fade preset · vanilla 移植，纯透明度零位移，守克制红线） ===== */
[data-ag] > .ag-i { opacity: 0; transition: opacity 0.55s var(--ease, cubic-bezier(.22,1,.36,1)); }
[data-ag].in > .ag-i { opacity: 1; transition-delay: calc(var(--i, 0) * 0.09s); }
@media (prefers-reduced-motion: reduce) {
  [data-ag] > .ag-i { opacity: 1; transition: none; }
}

/* 编辑式屏幕排版精炼（源自 editorial typography 共识：防孤行 + 悬挂标点，提升中文长文可读性；纯排版、零动效、零新辉光） */
p { text-wrap: pretty; hanging-punctuation: allow-end; }

/* 编辑式列表标记（外部借鉴 ModernCSS「Totally Custom List Styles」::marker 手法；呼应 The Type 衬线书卷克制——单一暖橙 accent 作列表锚点，替代默认灰黑圆点。全 20 课经本文件一次性生效；零 HTML、零动效、零新辉光、无移动端断点） */
ul li::marker {
  color: var(--accent-warm);
  content: "—  ";
  font-weight: 600;
}

/* ===========================================================
   中文强调正统解法：着重号（text-emphasis）替代难看的伪斜体
   —— 中文没有真正的斜体，浏览器默认对 <em> 施加 font-style:italic
      会把方块汉字机械倾斜成"伪斜体（faux oblique）"，是经典中文排版坑。
      W3C clreq / The Type 权威做法：中文强调用「着重号」（字下小圆点，
      等价于拉丁文的 italic）。改后全 20 课的中文 <em> 强调更地道、更书卷。
   · 单一暖橙作稀有强调锚点（着重号本就是稀有强调，不破单 accent 克制原则）
   · 纯 CSS、零 HTML、零动效、零新辉光、无移动端断点、reduced-motion 无关
   =========================================================== */
em {
  font-style: normal;
  font-weight: inherit;
  text-emphasis: filled dot var(--accent-warm-ink, #9e4b2e);
  -webkit-text-emphasis: filled dot var(--accent-warm-ink, #9e4b2e);
  text-emphasis-position: under right;
  -webkit-text-emphasis-position: under;
}
/* 拉丁书名/引文（如 What Is ChatGPT Doing…）仍用传统斜体——着重号点在
   每个拉丁字母下会显杂乱，故对页脚推荐阅读里的拉丁书名恢复 italic、去点。 */
.footnote em, cite {
  font-style: italic;
  font-weight: inherit;
  text-emphasis: none;
  -webkit-text-emphasis: none;
}

/* ===========================================================
   内联代码芯片：全站课程页统一（长期缺口——10 页正文有内联 <code>
   如 skills_list() / skill_view(...)，此前只有 practical/codex-notes.html
   一处本地规则，其余课程页的内联 <code> 是浏览器默认无样式，与全站
   编辑式贵感割裂）。
   令牌来源（真实抓取）：
   · @tailwindcss/typography 权威 prose —— inline `code` 与 `pre code`
     的作用域隔离手法（内联加芯片、块级代码重置回退，避免 <pre><code>
     被套上错误的芯片边框/内边距）。
   · ibelick/prompt-kit globals.css —— code{font-family:var(--font-mono);
     font-feature-settings} 的等宽技术字形处理。
   · tailwindcss.com —— 内联码浅底芯片 + 相对正文略小字号。
   落地为莫兰迪中性浅底 + 细边 + 暖橙墨技术字，克制无辉光、纯 CSS、
   零 HTML、零动效、无移动端断点；全 20+ 课经本文件一次性生效。
   =========================================================== */
code {
  font-family: var(--font-mono);
  font-feature-settings: "kern" 1, "calt" 1;
  font-size: 0.88em;
  background: var(--panel-2, #f0eae3);
  border: 1px solid var(--border-light, rgba(0,0,0,0.06));
  border-radius: 5px;
  padding: 0.1em 0.4em;
  color: var(--accent-warm-ink, #9e4b2e);
  word-break: break-word;
}
/* 块级代码（<pre><code>）显式重置回退——不套内联芯片
   （@tailwindcss/typography 权威 'pre code' 重置手法逐字移植）。 */
pre code {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

/* 块级代码面板：统一为全站暖纸编辑式（覆盖各课遗留的深色 #2c2c2c / #2c2b28 块，
   守住「浅莫兰迪+暖橙、不整体改深色」红线；与上方内联 code 芯片同语系）。
   令牌来源（真实抓取）：
   · @tailwindcss/typography 权威 prose —— pre 面板范式：浅底 + 细边 + 圆角 + 横向滚动，
     pre code 内部重置透明（见上），避免把块级代码误套成内联芯片边框。
   · ABC Dinamo 官网（abcdinamo.com）—— Tabular Numbers / Slashed Zero 等宽数字对齐；
     font-variant-numeric: tabular-nums 让代码与数字列对齐，编辑式精确感。
   · 本站 --panel-2 暖纸底 / --border 细边 / --radius 圆角 / --font-mono。
   单 accent、零辉光、零动效、无移动端断点；本文件在各页内联 <style> 之后加载，
   !important 覆盖遗留深色 pre 与 .exp-out pre 等同级/类级规则，全课程页一次性生效。 */
pre {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.86rem !important;
  line-height: 1.72 !important;
  color: var(--text) !important;
  background: var(--panel-2, #f0eae3) !important;
  border: 1px solid var(--border, #d9d4ce) !important;
  border-radius: var(--radius, 12px) !important;
  padding: 18px 20px !important;
  overflow-x: auto !important;
  margin: 1.4em 0 !important;
  white-space: pre-wrap !important;
}

/* ===========================================================
   第 71 轮新增：编辑式数据表格（全站课程页统一）
   现状缺口：11 课含 <table>，其中 2 课（context/1、agent/2）完全无表格
   样式（浏览器默认渲染，与全站割裂）；其余 9 课仅最简 table+th,td，
   且表头 th 与正文 td 样式完全相同、毫无层级——数据表读起来笨重。
   本文件在各页内联 <style> 之后加载，同特异性元素选择器覆盖并统一之。

   参考（真实拆解）：
   · A List Apart《Web Typography: Designing Tables to be Read》(Richard Rutter)
     —— 去底色 / 去斑马纹（会扭曲数据、分散注意力）、发丝线代替网格、
        留白代边框、文本左对齐、数字用 tabular-nums 纵向对齐。
   · @tailwindcss/typography styles.js（GitHub 真源）—— 表头加粗 + 更强底边、
     首尾列 padding 归零使表格内容与正文列边缘齐平（去"电子表格框感"）。
   单一暖橙锚点仅落在「表头下边线」一处，不破单 accent 红线；
   纯静态排版，零辉光、零移动端断点。 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 0.94rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;   /* 数字纵向可比 */
}
th, td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--divider, #e3ddd3);  /* 发丝线，比 --border 更轻 */
}
/* 表头：不用底色块，靠字重 + 单一暖橙下边线区分（编辑式，非电子表格风） */
thead th,
tr:first-child th {
  font-weight: 600;
  color: var(--text, #2c2b28);
  border-bottom: 1.5px solid var(--accent-warm, #c97b5a);
  letter-spacing: .01em;
}
/* 首尾列与正文列边缘齐平 */
th:first-child, td:first-child { padding-inline-start: 0; }
th:last-child,  td:last-child  { padding-inline-end: 0; }
/* 末行去线，收干净底边 */
tbody tr:last-child td,
tr:last-child td { border-bottom: none; }
/* 克制行 hover：唯一的背景用途，极浅中性底，助读密表；非持久斑马纹 */
tr:hover td { background: var(--panel-2, #f0eae3); }
td { transition: background var(--transition, .25s); }
@media (prefers-reduced-motion: reduce) {
  td { transition: none; }
}

/* ===========================================================
   第 76 轮新增（P1 中文排版一致性 · 编辑式有序列表统一）
   落点：全站课程页正文「步骤类」裸 <ol>（43 处，此前浏览器默认编号，与
   已精修的表格/卡片割裂）。仅改 CSS（lesson-anim.css 全站课程页注入），
   不动任何 HTML 结构。天然排除 .lesson-refs__list / .check-list（带 class）。
   借鉴：
     ① ibelick/prompt-kit globals.css `@utility step` —— counter-increment +
        `:before{content:counter(step)}` 生成圆形序号徽章（font-mono + border ring）；
     ② 果粒姐站「等宽 + 暖橙 + 疏字距」标签语言 + 全站等宽标签 .22em 红线；
     ③ Laws of UX / Pentagram「序号即锚点、克制中性」编辑式气质；
     ④ Dinamo「calm / slow / considered」——无任何发光、位移≤8px、仅入场发声。
   执行红线自检：零新增辉光（徽章无 box-shadow 光晕，仅 border 发丝）、
   单 accent（暖橙仅用于序号字，与等宽标签同源）、无新 UI、无移动端断点。
   =========================================================== */
ol:not([class]) {
  list-style: none;
  counter-reset: lessonStep;
  margin: 26px 0;
  padding: 0;
  max-width: var(--measure, 62ch);
}
ol:not([class]) > li {
  counter-increment: lessonStep;
  position: relative;
  padding: 7px 0 7px 50px;
  line-height: 1.74;
  color: var(--text, #2c2b28);
}
ol:not([class]) > li::before {
  content: counter(lessonStep, decimal);
  position: absolute;
  top: 9px;
  left: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--panel, #fbf9f6);
  border: 1px solid var(--border, #d9d4ce);
  color: var(--accent-warm, #c97b5a);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--label-track, .22em);
  text-indent: var(--label-track, .22em); /* 等宽序号视觉居中：右移让字号视觉平衡 */
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
  transition: border-color var(--transition, .42s var(--ease, ease)),
              color var(--transition, .42s var(--ease, ease)),
              transform var(--transition, .42s var(--ease, ease));
}
/* 入场/悬停发声：仅色彩与≤8px 位移，无光晕、无新增辉光位 */
ol:not([class]) > li:hover::before {
  border-color: var(--accent-warm-soft, #e7b9a4);
  color: var(--accent-warm-deep, #9e4b2e);
  transform: translateY(-2px);
}
/* 行内平铺高亮（移植果粒姐站 .hl 渐变高亮令牌 rgba(193,39,45,.18) → 本站暖橙 rgba(201,123,90,.22)）
   编辑式「贵感」细节：平铺暖橙而非实心底，单 accent、零辉光、reduced-motion 安全（纯静态无动效）。
   用途：在课程正文高亮一个关键词——比 <strong> 更轻、比实心底更莫兰迪，呼应本站克制语。 */
.hl {
  background: linear-gradient(180deg, transparent 60%, rgba(201, 123, 90, 0.22) 60%);
  padding: 0 0.12em;
  border-radius: 2px;
  color: var(--text, #2c2b28);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-reduced-motion: reduce) {
  ol:not([class]) > li::before { transition: none; }
  ol:not([class]) > li:hover::before { transform: none; }
}

/* ---- 本轮新增：文末来源链接编辑式暖橙下划线揭示（P1 微交互 / 可达性）----
   外部审美借鉴：社群星港 eyebrow 等宽前导细线（行172 mono .26em + 22px 细线）
   + 外部编辑站（Klim / Craig Mod / Pangram）通用的「链接 hover 暖橙下划线生长」范式；
   本站克制语：单 accent、零辉光、reduced-motion 安全；仅覆盖 .lesson-refs__list 链接，
   不新增 UI 元素、不写移动端断点；因 lesson-anim.css 在各课内联 <style> 之后加载，
   可正确覆盖默认 a 样式。 */
.lesson-refs__list a {
  position: relative;
  color: var(--text-soft, #6f6a64);
  text-decoration: none;
  background: linear-gradient(var(--accent-warm, #c97b5a), var(--accent-warm, #c97b5a)) no-repeat 0 100% / 0% 1.5px;
  transition: background-size var(--transition, .42s var(--ease, ease)),
              color var(--transition, .42s var(--ease, ease));
}
.lesson-refs__list a:hover,
.lesson-refs__list a:focus-visible {
  color: var(--accent-warm-ink, #ad5f3f);
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  .lesson-refs__list a { transition: none; }
}

/* ===========================================================
   大陆网络坑内联注 .ref-note 全站统一（P1 系统一致性 / 编辑式收口）
   问题：`.lesson-refs .ref-note` 仅在 chat/context 6 课的内联 <style> 里定义，
   但 agent/lesson-1、code/lesson-1、practical/lesson-1·3·4 等页也用了 .ref-note，
   却无样式 → 大陆坑提示与「来源」正文视觉不分（编辑式系统语不统一）。
   对策：把同一套样式收进 lesson-anim.css（在各课内联 <style> 之后加载，值与既有 6 页
   完全一致 → 已定义页零变化、缺失页补齐）。区分「来源」与「大陆坑」的编辑式母题；
   单 accent 暖橙墨、零辉光、零动效、无移动端断点。 */
.lesson-refs .ref-note {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.65;
  color: var(--accent-warm-ink, #ad5f3f);
}

/* ===========================================================
   编辑式引文 blockquote 书卷化（P1 中文排版 / 书卷感）
   外部审美借鉴：社群星港 面板 border-left + 角标「确定性」左规语言；果粒姐站
   serif/brush/mono 三层字体栈与朱红印章母题（本站以暖橙锚点替代朱红，守单 accent）；
   craigmod.com 双色+单强调、近黑墨衬线范式；prompt-kit 避纯黑 foreground；Klim 字体即主角。
   落地：全课程页经本文件一次性生效，仅复用既有暖橙锚点，零新增辉光、零动效、
   无移动端断点、reduced-motion 无关（纯静态排版）。
   新增 UI 红线论证：此为编辑式引文（pull-quote），服务零基础用户「一眼识别金句/原则」
   的可读性，非 SaaS 营销 CTA、非自我增殖元素；课程未使用时不会渲染任何东西。 */
blockquote {
  position: relative;
  margin: 2.6rem 0;
  padding: .4rem 0 .4rem 2.6rem;
  border-left: 3px solid var(--accent-warm, #c97b5a);
  font-family: var(--font-serif, serif);
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.72;
  color: var(--text, #2c2b28);
  letter-spacing: -.01em;
  text-wrap: balance;
}
blockquote p { margin: 0; }
blockquote::before {
  content: "\201C";   /* 左双引号 “ —— 悬挂引号，取暖橙 */
  position: absolute;
  left: -.05rem; top: -.18em;
  font-family: var(--font-serif, serif);
  font-size: 3.4rem; line-height: 1;
  color: var(--accent-warm, #c97b5a);
}
blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  letter-spacing: var(--label-track, .22em);
  text-transform: uppercase;
  color: var(--text-soft, #a09b95);
}

/* ===========================================================
   第 65 轮新增：极克制纸纹噪点（全站课程页统一）
   落地果粒姐站「纸纹噪点」技法（标杆社群星港亦用噪点层）；
   内联 SVG feTurbulence 数据 URI，黑噪点 α≤6%、180px 平铺，
   强化莫兰迪温暖质感、去数字扁平。纯 CSS 背景层、零 HTML、
   零新 UI、零辉光、无移动端断点、reduced-motion 无关（静态）。
   本文件在各课内联 <style> 之后加载，故可正确叠加噪点层。 */
body {
  background-color: var(--bg, #f4f1ed);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* ===========================================================
   课程页手机端统一适配
   所有课程页都在各自的内联样式之后加载本文件，因此在这里
   收口可以同时修复桌面多栏在小屏上的挤压、裁切和浮层遮挡。
   =========================================================== */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 72px 18px 104px;
    font-size: 16px;
    line-height: 1.82;
  }

  body > * { min-width: 0; }
  img, video, canvas, iframe, svg { max-width: 100%; }
  p, li, dd, td, th, code, a { overflow-wrap: anywhere; }

  /* 少数新版课程使用 <main> 另设桌面端 96px 留白，手机改回全宽正文。 */
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 42px !important;
    padding-bottom: 72px !important;
  }

  /* 顶部导航：保留一行，同时给返回入口足够的触控面积。 */
  .nav-inner {
    width: 100%;
    max-width: 100%;
    height: 56px;
    padding: 0 18px;
    gap: 14px;
  }
  .nav-logo,
  .nav-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-logo { flex: 0 0 auto; font-size: 15px; }
  .nav-back {
    min-width: 0;
    max-width: 58vw;
    justify-content: flex-end;
    white-space: nowrap;
    font-size: 13px;
  }

  /* 课程封面：满屏宽、稳定内边距，去掉会和标题争宽度的印章。 */
  .lesson-hero {
    margin: 0 -18px 38px;
    padding: 40px 0 34px;
  }
  .lesson-hero__inner {
    width: 100%;
    max-width: 100%;
    padding: 0 22px;
  }
  .lesson-hero__inner::before { left: 10px; }
  .lesson-hero__inner::after { right: 10px; }
  .lesson-hero .lesson-seal { display: none; }
  .lesson-kicker {
    gap: 9px;
    margin-bottom: 14px;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: .15em;
  }
  .lesson-kicker::before { width: 22px; flex: 0 0 22px; }
  .lesson-hero h1 {
    max-width: 100%;
    margin-bottom: 12px;
    font-size: clamp(28px, 8.5vw, 36px);
    line-height: 1.2;
    letter-spacing: -.015em;
    text-wrap: pretty;
  }
  .lesson-hero .lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: .08em;
  }

  h2, .lesson-h {
    font-size: clamp(25px, 7.2vw, 32px);
    line-height: 1.2;
  }
  .lesson-h {
    max-width: 100%;
    margin: 58px 0 20px;
    padding-top: 24px;
    scroll-margin-top: 72px;
  }
  h3 { line-height: 1.38; }
  p { margin-bottom: 18px; line-height: 1.82; }
  ul, ol { margin-left: 20px; }

  /* 首屏三列价值卡、对比卡、流程和模板统一收成单列。 */
  .value-grid,
  .compare,
  .dos-donts,
  .grow-line,
  .quad-grid,
  .template-grid,
  .rag-flow {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .value-card,
  .compare-card,
  .dos-donts-card,
  .grow-stage,
  .template-card {
    min-width: 0;
    padding: 22px 20px;
  }
  .lesson-value { margin-top: 34px; }
  .lesson-value__title {
    margin-bottom: 22px;
    font-size: clamp(25px, 7.2vw, 31px);
    line-height: 1.18;
  }

  /* 截图中的主问题：桌面左栏的固定 234px 会将正文压成一字一行。 */
  .insight-strip {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: 32px 0;
    padding: 20px 0;
  }
  .insight-strip .strip-head,
  .insight-strip .strip-body {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }
  .insight-strip .strip-title { font-size: 1.16rem; }
  .insight-strip .strip-body p,
  .insight-strip .strip-body li { font-size: 15px; }

  .tool-id {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px 18px !important;
  }
  .tool-id__badge { width: 48px; height: 48px; }
  .tool-id__name { line-height: 1.35; }

  .flow-step {
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
  }
  .flow-step .content { min-width: 0; }
  .flow-step .num { flex: 0 0 32px; }
  .rag-flow .flow-step + .flow-step::before {
    left: 50%;
    top: -15px;
    transform: translateX(-50%) rotate(90deg);
  }

  /* 手机上保留表格列宽，在表格内横向滑动，不再挤碎汉字。 */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
  }
  th, td {
    min-width: 7em;
    padding: 10px 12px;
  }
  pre {
    max-width: 100%;
    padding: 15px 16px !important;
    font-size: 12.5px !important;
    white-space: pre !important;
    overflow-x: auto !important;
  }

  .insight-box,
  .callout,
  .try-it,
  .quiz-box,
  .pro-tip,
  .story-box,
  .takeaway,
  .analogy,
  .highlight,
  .highlight-box,
  .exp-card {
    min-width: 0;
    padding: 20px 18px;
  }
  blockquote {
    margin: 2rem 0;
    padding-left: 1.7rem;
    font-size: 1.08rem;
    text-wrap: pretty;
  }
  .lesson-refs__list li { padding-left: 34px; }
  .related-grid { grid-template-columns: minmax(0, 1fr); }

  .quiz .options,
  .qa-list,
  .tag-list,
  .exp-actions,
  .prompt-card__head,
  .part-content h4 {
    flex-wrap: wrap;
  }
  .quiz .options { flex-direction: column; }
  .quiz .options > * { width: 100%; min-height: 44px; }
  .part { align-items: flex-start; }

  /* 上一课 / 下一课改为竖排大按钮，避免长课名对挤。 */
  .lesson-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 48px;
    padding-top: 22px;
  }
  .lesson-nav a,
  .lesson-nav .disabled {
    width: 100%;
    min-height: 64px;
    padding: 17px 18px;
  }

  /* 目录与回顶部按钮收成 44px 图标，同排放在底部，并预留正文底边。 */
  .toc-fab {
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
    font-size: 0;
    letter-spacing: 0;
  }
  .toc-fab svg { width: 18px; height: 18px; }
  .toc-fab--local { left: 68px; bottom: 16px; }
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  .lesson-toc {
    width: min(88vw, 340px);
    max-width: 88vw;
    height: 100vh;
    height: 100dvh;
    padding: 72px 20px 28px;
  }
  .lesson-toc__close {
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  /* 触控面积：不改变视觉大小，但保证链接和按钮好点。 */
  button,
  input,
  textarea,
  select { font-size: 16px; }
  .copy-btn,
  .exp-gen,
  .progress-reset { min-height: 44px; }
}

@media (max-width: 390px) {
  body { padding-left: 15px; padding-right: 15px; }
  .nav-inner { padding-left: 15px; padding-right: 15px; }
  .nav-back { max-width: 56vw; }
  .lesson-hero { margin-left: -15px; margin-right: -15px; }
  .lesson-hero__inner { padding-left: 19px; padding-right: 19px; }
  .lesson-hero h1 { font-size: 28px; }
  .value-card,
  .compare-card,
  .dos-donts-card,
  .grow-stage,
  .template-card { padding: 20px 17px; }
}