/* ============================================================
 * style.css —— AI智能体互动教学系统 样式
 * 四大组件配色：感知器=蓝 / 规划器=橙 / 记忆器=绿 / 执行器=红
 * 大脑=金。整体风格：圆润、明亮、适合小学生课堂大屏。
 * ============================================================ */

:root {
  /* ---------- 组件语义色（四大组件 + 大脑 + 起源）：教学语义，不随主题变 ---------- */
  --c-per: #3E9BFF;
  --c-per-deep: #1f7ae0;
  --c-plan: #FF9F2E;
  --c-plan-deep: #e07e0a;
  --c-mem: #2FBF71;
  --c-mem-deep: #179a55;
  --c-exe: #FF5A5F;
  --c-exe-deep: #e23c41;
  --c-brain: #F6B93B;
  --c-brain-deep: #c98a12;
  --c-ori: #8E44AD;
  --c-ori-deep: #6C3483;

  /* ---------- 底色 / 文字 / 线条 ---------- */
  --c-bg: #FBF7EE;
  --c-card: #FFFFFF;
  --c-ink: #2B2B33;
  /* 次要文字：原来是 #8A8A99（对比度仅 3.2~3.4:1，投屏看不清），
     改为 #6A6A78（白底 5.3:1 / 米白底 5.0:1），同色系更深一档。 */
  --c-sub: #6A6A78;
  --c-line: #E8E2D5;
  /* 交互控件（输入框 / 选项按钮）的边框色：需 ≥3:1 才有可点击的暗示 */
  --c-line-strong: #968C79;

  /* ---------- 圆角阶梯 ---------- */
  --radius: 18px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---------- 间距阶梯（4/8 体系） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ---------- 阴影阶梯 ---------- */
  --shadow: 0 6px 20px rgba(70, 55, 20, .10);
  --shadow-1: 0 2px 8px rgba(70, 55, 20, .08);
  --shadow-2: 0 10px 30px rgba(70, 55, 20, .14);

  /* ---------- 字号阶梯 ---------- */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-h1: 26px;

  /* ---------- 动效时长 ---------- */
  --t-fast: .15s;
  --t-base: .2s;
  --t-slow: .3s;

  /* ---------- 层级 ---------- */
  --z-topbar: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* ---------- 吸顶导航高度（锚点跳转要留出这段空间） ---------- */
  --topbar-h: 64px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- 顶部导航 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--c-line);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; cursor: pointer; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brain), #ffd66b);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(246,185,59,.5);
}
.brand small { display: block; font-weight: 500; font-size: 12px; color: var(--c-sub); line-height: 1.2; }

.nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.nav-tab {
  border: none; cursor: pointer; font-size: 15px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; background: #f2ede2; color: #5a5548;
  transition: all .18s; display: inline-flex; align-items: center; gap: 6px;
}
.nav-tab:hover { transform: translateY(-1px); background: #ece5d5; }
.nav-tab.active { color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.nav-tab[data-sec="home"].active { background: linear-gradient(135deg, var(--c-brain), #e8a020); }
.nav-tab[data-sec="perception"].active { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.nav-tab[data-sec="planner"].active { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.nav-tab[data-sec="memory"].active { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)); }
.nav-tab[data-sec="executor"].active { background: linear-gradient(135deg, var(--c-exe), var(--c-exe-deep)); }
.nav-tab[data-sec="origin"].active { background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep)); }
.nav-tab[data-sec="playground"].active { background: linear-gradient(135deg, #8a5cf6, #6b3fd1); }
.nav-tab[data-sec="works"].active { background: linear-gradient(135deg, var(--c-works), var(--c-works-deep)); }

.icon-btn {
  border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  background: #f2ede2; color: #5a5548; display: inline-flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.icon-btn:hover { background: #ece5d5; transform: rotate(30deg); }

/* ---------- 页面主体 ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 80px; }

.section { display: none; }
.section.active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--c-card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 22px;
  border: 2px solid transparent;
}
.card h2 { font-size: 21px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.card h2 .chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: #fff; font-weight: 700; }
.card .sub { color: var(--c-sub); margin-bottom: 14px; font-size: 14.5px; }
.card p { margin-bottom: 10px; }
.card .tip {
  background: #F4F1E8; border-radius: 12px; padding: 10px 14px; font-size: 14px;
  border-left: 4px solid var(--c-brain); color: #6b5b2e; margin: 12px 0;
}

.btn {
  border: none; cursor: pointer; font-weight: 700; font-size: 15.5px;
  padding: 11px 22px; border-radius: 999px; color: #fff; transition: all .18s;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-per { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.btn-plan { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.btn-mem { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)); }
.btn-exe { background: linear-gradient(135deg, var(--c-exe), var(--c-exe-deep)); }
.btn-brain { background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep)); }
.btn-ori { background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep)); }
.btn-gray { background: #8f8a7e; }
.btn-ghost { background: #f2ede2; color: #5a5548; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }

/* ---------- 输入框 ---------- */
input[type="text"], input[type="password"], textarea, select {
  font-family: inherit; font-size: 15px; color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 12px; padding: 10px 14px;
  background: #fff; outline: none; width: 100%; transition: border .18s;
}
input:focus, textarea:focus, select:focus { border-color: var(--c-per); }
textarea { resize: vertical; min-height: 70px; }
label.field { display: block; margin-bottom: 12px; font-weight: 600; font-size: 14.5px; }
label.field small { font-weight: 400; color: var(--c-sub); display: block; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ============================================================
 * 首页：智能体总装图
 * ============================================================ */
.hero {
  text-align: center; padding: 26px 16px 8px;
}
.hero h1 { font-size: 34px; font-weight: 900; letter-spacing: 1px; }
.hero h1 .grad {
  background: linear-gradient(90deg, var(--c-per), var(--c-brain), var(--c-exe));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { color: var(--c-sub); font-size: 16px; margin-top: 8px; }

/* 现代智能体核心公式条（参考 ai-agent-book） */
.formula-strip {
  max-width: 860px; margin: 16px auto 4px; padding: 14px 18px;
  background: linear-gradient(120deg, #fffdf6, #fff7e6);
  border: 2px dashed var(--c-brain); border-radius: var(--radius);
  text-align: center;
}
.formula-title { font-size: 12.5px; font-weight: 600; color: var(--c-sub); margin-bottom: 12px; }
.formula-line { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
/* 公式项：浅底深字（原先 4 种饱和渐变并列，色噪大、白字对比度也不达标） */
.f-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 12px; font-size: 15px; font-weight: 700;
  background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-ink);
}
.f-item .icon { flex-shrink: 0; }
.f-brain { background: var(--brain-tint); color: var(--brain-ink); border-color: var(--brain-line); }
.f-mem { background: var(--mem-tint); color: var(--mem-ink); border-color: var(--mem-line); }
.f-exe { background: var(--exe-tint); color: var(--exe-ink); border-color: var(--exe-line); }
/* 结果项：与主题色同源的实心暖黄 + 深字（醒目但不再用黑底），作为唯一视觉重点 */
.f-gold {
  background: var(--c-brain); color: #1D1D1F; border-color: var(--c-brain-deep);
  box-shadow: 0 6px 16px rgba(246, 185, 59, .28);
}
.f-op { font-size: 15px; font-weight: 600; color: var(--c-sub); }
.formula-note { font-size: 13px; color: var(--c-sub); margin-top: 8px; }

.assembly {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 14px;
  max-width: 860px; margin: 18px auto;
  padding: 8px;
}
.assembly svg.lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.assembly svg.lines path {
  stroke: var(--c-line-strong); stroke-width: 2; fill: none;
  stroke-dasharray: 6 6;
}

/* 总装图节点：浅底深字 + 人体类比徽章（去掉饱和渐变与动画噪音） */
.node {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: 18px;
  padding: 18px 16px; min-height: 168px; text-align: center; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.node:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--nb-c, var(--c-line-strong)); }
.node:focus-visible { outline: 2px solid var(--nb-c, var(--c-accent)); outline-offset: 2px; }
.node .nicon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--nb-tint, var(--c-bg-alt)); color: var(--nb-ink, var(--c-ink-2));
}
.node .nhead { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.node .nname { font-weight: 700; font-size: 15.5px; color: var(--c-ink); }
.node .nanalogy {
  font-size: 11.5px; font-weight: 600; color: var(--c-sub);
  background: var(--c-bg-alt); border-radius: var(--r-pill); padding: 2px 9px;
}
.node .nen { font-size: 11.5px; color: var(--c-sub); margin-top: 3px; }
.node .njob {
  width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line);
  font-size: 13px; color: var(--c-ink-2); line-height: 1.65;
}
.node .go { margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--nb-ink, var(--c-accent)); }

/* 语义色只管「图标底色 + 链接文字」，节点本体保持中性浅底 */
.node-per   { --nb-c: var(--c-per);   --nb-tint: var(--per-tint);   --nb-ink: var(--per-ink); }
.node-plan  { --nb-c: var(--c-plan);  --nb-tint: var(--plan-tint);  --nb-ink: var(--plan-ink); }
.node-mem   { --nb-c: var(--c-mem);   --nb-tint: var(--mem-tint);   --nb-ink: var(--mem-ink); }
.node-exe   { --nb-c: var(--c-exe);   --nb-tint: var(--exe-tint);   --nb-ink: var(--exe-ink); }
.node-brain { --nb-c: var(--c-brain); --nb-tint: var(--brain-tint); --nb-ink: var(--brain-ink); }

/* 布局：大脑居中、四大组件环绕（定位放在 CSS 里，窄屏才能整体改为纵向堆叠） */
.node-per   { grid-area: 1 / 2; }
.node-mem   { grid-area: 2 / 1; }
.node-brain { grid-area: 2 / 2; }
.node-exe   { grid-area: 2 / 3; }
.node-plan  { grid-area: 3 / 2; }

/* 中心大脑：淡黄重点卡（与其他节点同一套浅底视觉语言，用描边与色调阴影体现中心地位） */
.node-brain {
  background: linear-gradient(180deg, #FFFDF6, var(--brain-tint));
  border: 2px solid var(--brain-line);
  box-shadow: var(--shadow-1), 0 10px 26px rgba(246, 185, 59, .18);
}
.node-brain:hover {
  border-color: var(--c-brain);
  box-shadow: var(--shadow-2), 0 12px 30px rgba(246, 185, 59, .26);
}
.node-brain .nicon { background: #FFF; color: var(--brain-ink); border: 1px solid var(--brain-line); }
.node-brain .nanalogy { background: #FFF; color: var(--brain-ink); }

@media (prefers-reduced-motion: reduce) {
  .node { transition: none; }
  .node:hover { transform: none; }
}

/* 作品横幅 */
.works { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 20px auto 8px; }
.work-tag {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 10px 18px;
  box-shadow: var(--shadow); border: 2px dashed var(--c-line); font-weight: 700;
}
.work-tag .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-mem { background: var(--c-mem); }
.dot-exe { background: var(--c-exe); }

.cta-row { text-align: center; margin: 18px 0 8px; }
.cta-big {
  font-size: 19px; padding: 16px 38px; border-radius: 999px;
  background: linear-gradient(135deg, #8a5cf6, #6b3fd1); color: #fff;
  border: none; cursor: pointer; font-weight: 800; box-shadow: 0 8px 22px rgba(107,63,209,.35);
  transition: all .2s; display: inline-flex; align-items: center; gap: 10px;
}
.cta-big:hover { transform: translateY(-3px) scale(1.02); }

/* ============================================================
 * 实验室页头
 * ============================================================ */
.lab-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.lab-icon {
  width: 56px; height: 56px; border-radius: 18px; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.lab-head h1 { font-size: 26px; font-weight: 900; }
.lab-head .meta { color: var(--c-sub); font-size: 14px; }
.lab-head .btn { margin-left: auto; }

/* 阶段徽章 */
.stage-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; margin: 2px 4px 2px 0;
}
.pill-per { background: #E4F1FF; color: var(--c-per-deep); }
.pill-plan { background: #FFF0DC; color: var(--c-plan-deep); }
.pill-mem { background: #DFF7E9; color: var(--c-mem-deep); }
.pill-exe { background: #FFE5E6; color: var(--c-exe-deep); }
.pill-brain { background: #FFF4D6; color: var(--c-brain-deep); }
.pill-ori { background: #F0E6F6; color: var(--c-ori-deep); }

/* ============================================================
 * 游戏组件
 * ============================================================ */
.game-box {
  border: 2px dashed var(--c-line); border-radius: 16px; padding: 18px;
  background: #fdfbf5; margin-top: 12px;
}
.game-q { font-weight: 700; font-size: 16.5px; margin-bottom: 12px; }
.game-q .qno {
  background: var(--c-brain); color: #fff; width: 26px; height: 26px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; margin-right: 8px;
}
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  border: 2.5px solid var(--c-line); background: #fff; border-radius: 14px;
  padding: 10px 18px; font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: all .15s; display: inline-flex; align-items: center; gap: 8px;
}
.opt:hover { border-color: #bbb; transform: translateY(-1px); }
.opt.correct { border-color: var(--c-mem); background: #E9F9F0; color: var(--c-mem-deep); animation: popIn .3s; }
.opt.wrong { border-color: var(--c-exe); background: #FFECEC; animation: shake .4s; }
.opt:disabled { cursor: default; opacity: .75; }
.opt.sel { border-color: var(--c-per); background: #EAF4FF; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes popIn { 0%{transform:scale(.92)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} }

.quiz-feedback { margin-top: 12px; font-weight: 700; min-height: 24px; }
.fb-ok { color: var(--c-mem-deep); }
.fb-no { color: var(--c-exe-deep); }
.score-line { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.score-badge {
  background: linear-gradient(135deg, #ffd76b, #f5a623); color: #7a4d00;
  font-weight: 900; border-radius: 999px; padding: 6px 16px; font-size: 16px;
}
.score-badge.pop { animation: popIn .35s; }

/* 排序游戏 */
.order-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-height: 40px; }
.order-item {
  background: #fff; border: 2.5px solid var(--c-plan); color: var(--c-plan-deep);
  border-radius: 12px; padding: 9px 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 10px; transition: all .15s;
}
.order-item:hover { transform: translateX(4px); }
.order-item.done { border-color: var(--c-mem); background: #E9F9F0; color: var(--c-mem-deep); cursor: default; }
.order-item .num { background: var(--c-plan); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.order-item.done .num { background: var(--c-mem); }
.pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pool-chip {
  background: #fff; border: 2.5px dashed #c9bfa4; border-radius: 12px; padding: 8px 14px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.pool-chip:hover { border-color: var(--c-plan); transform: translateY(-2px); }
.pool-chip.picked { opacity: .35; pointer-events: none; }

/* ============================================================
 * 执行器：工具调用演示
 * ============================================================ */
.tool-stage {
  background: #0f1420; border-radius: 16px; padding: 18px; color: #d6e2ff;
  font-family: Consolas, "Courier New", monospace; font-size: 14.5px; margin-top: 12px;
  min-height: 120px; line-height: 2;
}
.tool-stage .ok { color: #6cf09a; }
.tool-stage .dim { color: #7f8db0; }
.tool-stage .warn { color: #ffb86b; }

.cmp-box { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cmp-col { flex: 1 1 280px; background: #fdfbf5; border: 2px dashed var(--c-line); border-radius: 16px; padding: 16px; }
.cmp-col h4 { font-size: 15.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
/* 标签胶囊不参与收缩、内部不换行，避免“清晰版”被压成“清晰 / 版”两行 */
.cmp-col h4 .stage-pill { flex-shrink: 0; white-space: nowrap; }
.cmp-col .ans { background: #fff; border-radius: 12px; padding: 12px; min-height: 80px; font-size: 14.5px; border: 2px solid var(--c-line); }
/* 思维链实验：当前模型说明条（绿色=小模型，黄色=回退到 DeepSeek 大模型） */
.cot-model { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--c-line); background: var(--c-bg-alt); font-size: 13.5px; line-height: 1.75; }
.cot-model .icon { flex-shrink: 0; margin-top: 3px; }
.cot-model.ok { background: #effaf2; border-color: #b9e4c6; color: #1c6b3a; }
.cot-model.warn { background: #fff8ec; border-color: #ecd9a8; color: #7a5a10; }
.cot-model code { background: rgba(0, 0, 0, .07); border-radius: 5px; padding: 1px 6px; font-size: 12.5px; }
.cot-model .dim { color: var(--c-sub); }

/* 思维链实验：两栏共用的“题干”框（虚线，和下面的回答框区分开） */
.cot-q { background: #fff; border: 2px dashed var(--c-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14.5px; line-height: 1.7; color: var(--c-ink); }

/* ---------- 大模型输出的 Markdown 渲染（U.md 生成的 .md-body） ---------- */
.md-body { line-height: 1.75; word-break: break-word; }
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }
.md-body p { margin: 0 0 8px; }
.md-body h1, .md-body h2, .md-body h3,
.md-body h4, .md-body h5, .md-body h6 { font-size: 15.5px; font-weight: 700; margin: 12px 0 6px; color: var(--c-ink); }
.md-body ul, .md-body ol { margin: 6px 0 8px; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--c-per); background: #f7f5ff; border-radius: 0 8px 8px 0; color: #55524b; }
.md-body code { background: #f0ece1; border-radius: 5px; padding: 1px 5px; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 13.5px; }
.md-body pre.md-pre { background: #2f2b26; color: #f5f2ea; border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; font-size: 13px; line-height: 1.6; }
.md-body pre.md-pre code { background: none; color: inherit; padding: 0; font-size: 13px; }
/* Markdown 表格（模型按要求输出表格时用）：外层可横向滚动，窄屏不撑破卡片 */
.md-body .md-table-wrap { overflow-x: auto; margin: 8px 0 10px; }
.md-body table.md-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md-body table.md-table th, .md-body table.md-table td {
  border: 1px solid var(--c-line); padding: 6px 10px; text-align: left; vertical-align: top;
  /* keep-all：中文单元格不在字与字之间断行——否则「周一」「7:30」这类短单元格
   * 会被挤成「周/一」，看起来很糟；内容确实很宽时由外层 .md-table-wrap 横向滚动。 */
  word-break: keep-all;
}
.md-body table.md-table th { background: var(--c-bg-alt); font-weight: 700; white-space: nowrap; }
.md-body table.md-table tbody tr:nth-child(even) { background: #fafaf7; }
.md-body hr { border: none; border-top: 1px solid var(--c-line); margin: 12px 0; }
.md-body a { color: #8a5cf6; text-decoration: underline; }

/* ---------- 数学公式（U.tex 生成的 LaTeX 渲染） ---------- */
.md-body .tex-inline, .md-body .tex-display { font-family: "Cambria Math", Cambria, "Times New Roman", Georgia, serif; }
.md-body .tex-display { display: block; text-align: center; margin: 10px 0; font-size: 16px; line-height: 2; }
.md-body .tex-text { font-family: inherit; }
.md-body .tex-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; line-height: 1.2; font-size: .94em; }
.md-body .tex-frac .tex-num { border-bottom: 1.4px solid currentColor; padding: 0 4px 1px; }
.md-body .tex-frac .tex-den { padding: 1px 4px 0; }
.md-body .tex-sqrt { white-space: nowrap; }
.md-body .tex-sqrt .tex-rootidx { font-size: .62em; margin-right: -2px; }
.md-body .tex-radicand { border-top: 1.4px solid currentColor; padding: 0 3px; }
.md-body .tex-overline { border-top: 1.4px solid currentColor; padding-top: 1px; }
.md-body .tex-vec { position: relative; padding-top: 2px; }
.md-body .tex-vec::before { content: "→"; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); font-size: .7em; }
.md-body .tex-thin { display: inline-block; width: .22em; }
.md-body sup, .md-body sub { font-size: .72em; }

/* ============================================================
 * 智能体实验室（对话 + 管线）
 * ============================================================ */
.play-wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .play-wrap { grid-template-columns: 1fr; } }

.chat-card { display: flex; flex-direction: column; height: 660px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--c-line); margin-bottom: 12px; }
.chat-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #8a5cf6, #6b3fd1); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.chat-msgs { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 85%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: #fff; border: 2px solid var(--c-line); border-bottom-left-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.msg .who { font-size: 11.5px; font-weight: 700; opacity: .65; margin-bottom: 3px; display: block; }
/* .msg 本身是 white-space: pre-wrap（让用户打的多行原样换行）；
   但 Markdown 渲染出的 HTML 自带块结构，pre-wrap 会把标签之间的换行也留成空隙，
   所以 md-body 内部恢复普通折叠。 */
.msg .md-body { white-space: normal; }
.msg.tool-note {
  align-self: flex-start; background: #F4F1E8; border: 2px dashed #d9cfb8; color: #6b5b2e;
  font-size: 13.5px; font-family: Consolas, monospace;
}
.msg.typing { color: var(--c-sub); font-style: italic; }

.msg.timer-bar { border: 2px solid #e0b64a; background: #fffaf0; width: 100%; max-width: 100%; }
.timer-num { font-size: 30px; font-weight: 800; font-family: Consolas, monospace; letter-spacing: 1px; color: #b8860b; margin: 4px 0 2px; }
.timer-desc { font-size: 12.5px; color: var(--c-sub); }
.msg.timer-bar.timer-done { border-color: #e07a3a; background: #fff3ea; }
.msg.timer-bar.timer-done .timer-num { color: #d35400; }

.chat-input { display: flex; gap: 10px; padding-top: 12px; border-top: 2px solid var(--c-line); }
.chat-input input { flex: 1; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
.chip-suggest {
  background: #f2ede2; border: none; border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; cursor: pointer; font-weight: 600; color: #5a5548; transition: all .15s;
}
.chip-suggest:hover { background: #ece5d5; transform: translateY(-1px); }

/* 管线面板 */
.pipe-card { position: sticky; top: 76px; }
.pipe {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
}
.pipe-stage {
  display: flex; align-items: center; gap: 12px; background: #f7f3e9;
  border-radius: 14px; padding: 10px 14px; border: 2.5px solid transparent;
  transition: all .25s; opacity: .55; filter: saturate(.5);
}
.pipe-stage .picon {
  width: 40px; height: 40px; border-radius: 12px; color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.pipe-stage .ptitle { font-weight: 800; font-size: 15px; }
.pipe-stage .pstatus { font-size: 12.5px; color: var(--c-sub); line-height: 1.4; }
.pipe-stage.on {
  opacity: 1; filter: none; transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.pipe-stage.on .pstatus { color: #444; font-weight: 600; }
.pipe-arrow { text-align: center; color: #c9bfa4; font-size: 18px; line-height: .6; }

.pipe-per { border-color: var(--c-per); } .pipe-per .picon { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.pipe-plan { border-color: var(--c-plan); } .pipe-plan .picon { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.pipe-mem { border-color: var(--c-mem); } .pipe-mem .picon { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)); }
.pipe-exe { border-color: var(--c-exe); } .pipe-exe .picon { background: linear-gradient(135deg, var(--c-exe), var(--c-exe-deep)); }
.pipe-brain { border-color: var(--c-brain); } .pipe-brain .picon { background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep)); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--c-line); }

/* 进阶原理卡（知识密集，面向高年级） */
.deep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 6px; }
.deep-item {
  background: #faf7f0; border: 1.5px solid var(--c-line); border-radius: 14px; padding: 12px 14px;
}
.deep-item .deep-term { font-weight: 800; font-size: 14.5px; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.deep-item .deep-term::before { content: "◆"; font-size: 11px; color: var(--c-brain); }
.deep-item .deep-desc { font-size: 13.5px; color: #555; line-height: 1.6; }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .t-label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 999px; background: #d5cebe; cursor: pointer; transition: .2s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.switch input:checked + .slider { background: var(--c-mem); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ============================================================
 * 记忆器：小本子样式 / 表单
 * ============================================================ */
.notebook {
  background: linear-gradient(180deg, #fffdf4 0%, #fff8e4 100%);
  border: 2px solid #e8d9a8; border-radius: 14px; padding: 18px 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 14px rgba(200,170,60,.15);
  position: relative;
}
.notebook::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(180deg, transparent 0 22px, #f2e3b4 22px 24px);
}
.notebook h4 { font-size: 15px; color: #a07c1e; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.notebook .line { font-size: 14px; padding: 2px 0 2px 18px; border-bottom: 1px dashed #f0e5c4; }
.notebook .line b { color: #7a5c10; }
.notebook .empty { color: #b9a876; font-size: 13.5px; padding-left: 18px; }

/* ============================================================
 * 感知器：转化演示
 * ============================================================ */
.transform-flow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.tf-node {
  background: #fff; border: 2.5px solid var(--c-line); border-radius: 14px; padding: 10px 16px;
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px;
}
.tf-arrow { font-size: 22px; color: var(--c-per); animation: pulseArrow 1s ease-in-out infinite; }
@keyframes pulseArrow { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(5px); opacity: 1; } }
.tf-out {
  background: linear-gradient(135deg, #22262e, #333a48); color: #8fe3ff; border-radius: 14px;
  padding: 12px 18px; font-family: Consolas, monospace; font-size: 13.5px; min-width: 220px;
  border: none;
}

/* 语音按钮 */
.mic-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: all .2s;
}
.mic-btn.recording { animation: micPulse 1s infinite; background: linear-gradient(135deg, var(--c-exe), var(--c-exe-deep)); }
@keyframes micPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ============================================================
 * 弹窗 / 提示
 * ============================================================ */
.toast-box { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 300; pointer-events: none; }
.toast {
  background: #333a48; color: #fff; padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-12px); transition: all .3s;
}
.toast-box.show .toast { opacity: 1; transform: none; }
.toast.error { background: var(--c-exe-deep); }
.toast.success { background: var(--c-mem-deep); }

.modal-mask {
  position: fixed; inset: 0; background: rgba(30,25,15,.45); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 86vh; overflow-y: auto;
}
.modal h3 { font-size: 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.modal .m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- 页脚 ---------- */
footer {
  text-align: center; color: var(--c-sub); font-size: 13px; padding: 18px 20px 40px;
  border-top: 2px solid var(--c-line); background: #fff;
}
footer b { color: #6b5b2e; }

/* ---------- 感知器：消息四角色 ---------- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.role-box { background: #fdfbf5; border: 2px dashed var(--c-line); border-radius: 14px; padding: 12px; min-height: 120px; cursor: pointer; transition: all .2s; }
.role-box:hover { border-color: var(--c-per); background: #f5faf5; transform: translateY(-2px); }
.role-box.wrong { animation: shake .4s; border-color: var(--c-exe-deep); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.role-head { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.role-desc { font-size: 12.5px; color: var(--c-sub); margin-bottom: 8px; }
.role-items { display: flex; flex-direction: column; gap: 6px; }
.role-item-chip { background: #fff; border: 2px solid var(--c-per); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.5; }
.role-msg.selected { border-color: var(--c-per) !important; background: #e8f5e9 !important; box-shadow: 0 0 0 3px rgba(46,164,79,.2); }
.role-msg.used { opacity: .4; pointer-events: none; }

/* ---------- 感知器：Token 展示 ---------- */
.token-display { font-family: Consolas, monospace; }

/* ---------- 响应式 ---------- */
@media (max-width: 700px) {
  .hero h1 { font-size: 26px; }
  /* 总装图：窄屏改为纵向堆叠（大脑 → 感知器 → 记忆器 → 规划器 → 执行器） */
  .assembly { grid-template-columns: 1fr; }
  .node-per, .node-mem, .node-plan, .node-exe, .node-brain { grid-area: auto; }
  .assembly svg.lines { display: none; }
  .chat-card { height: 560px; }
}

/* ============================================================
 * 课次 Tab 切换 + 学习路径进度条 + 学习目标/课堂小结
 * ============================================================ */
.lesson-tabs {
  display: flex; gap: 0; margin: 0 0 14px 0;
  background: #f0f0f0; border-radius: 12px; padding: 4px;
  position: sticky; top: 60px; z-index: 50;
}
.lesson-tab {
  flex: 1; padding: 12px 16px; border: none; background: transparent;
  border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--c-sub); transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.lesson-tab:hover { color: var(--c-text); background: rgba(255,255,255,.6); }
.lesson-tab.active {
  background: #fff; color: var(--c-per);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* 学习路径进度条 */
.lesson-progress {
  margin-bottom: 20px; padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa, #eef2f7);
  border-radius: 12px; border: 1px solid #e8e8e8;
}
.lp-track {
  background: #e0e0e0; border-radius: 6px; height: 8px; overflow: hidden; margin-bottom: 8px;
}
.lp-bar {
  height: 100%; background: linear-gradient(90deg, var(--c-per), var(--c-per-deep));
  border-radius: 6px; transition: width .5s ease; width: 0%;
}
.lp-stages {
  display: flex; justify-content: space-between; gap: 8px;
}
.lp-stage {
  font-size: 12px; color: var(--c-sub); font-weight: 500;
  display: flex; align-items: center; gap: 4px; transition: color .3s;
}
.lp-stage.active { color: var(--c-per); font-weight: 700; }

/* 课次内容容器 */
.lesson-content { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 学习目标卡片 */
.lesson-goal {
  border-left: 5px solid var(--c-per);
  background: linear-gradient(135deg, #f0faf0, #e8f5e9);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(46,164,79,.08);
}
.lesson-goal h3 {
  margin: 0 0 14px 0; font-size: 18px; color: var(--c-per-deep);
  display: flex; align-items: center; gap: 8px;
}
.goal-list { display: flex; flex-direction: column; gap: 10px; }
.goal-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.7; color: var(--c-text);
}
.goal-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-per); color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* 课堂小结卡片 */
.lesson-summary {
  border-left: 5px solid var(--c-plan);
  background: linear-gradient(135deg, #fff8f0, #fff3e0);
  border-radius: 12px; padding: 20px 24px; margin: 20px 0;
  box-shadow: 0 2px 12px rgba(224,122,58,.08);
}
.lesson-summary h3 {
  margin: 0 0 14px 0; font-size: 18px; color: var(--c-ori-deep);
  display: flex; align-items: center; gap: 8px;
}
.summary-core {
  font-size: 15px; line-height: 1.8; margin-bottom: 14px;
  padding: 10px 14px; background: rgba(255,255,255,.7); border-radius: 8px;
}
.summary-points { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sp-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.7;
}
.sp-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  background: var(--c-plan); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.summary-think {
  font-size: 14px; line-height: 1.7; padding: 10px 14px;
  background: rgba(255,255,255,.7); border-radius: 8px; border-left: 3px solid var(--c-plan);
}
.summary-think b { color: var(--c-plan-deep); }

/* ============================================================
 * 架构实验室（首页）新增样式
 * ============================================================ */

/* 买早餐四步动画 */
.buy-breakfast {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin: 10px 0;
}
.bb-step {
  flex: 1; min-width: 130px; max-width: 170px;
  background: linear-gradient(135deg, var(--c-brain-light), #fff);
  border: 1.5px solid var(--c-brain); border-radius: 12px;
  padding: 12px 10px; text-align: center;
}
.bb-icon {
  width: 44px; height: 44px; margin: 0 auto 8px;
  background: var(--c-brain); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.bb-text { font-size: 12.5px; line-height: 1.6; color: var(--c-text); }
.bb-arrow { font-size: 22px; color: var(--c-brain); font-weight: 700; }

/* 人体类比对照表 */
.analogy-table {
  border: 1.5px solid var(--c-brain); border-radius: 10px; overflow: hidden;
}
.at-row {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr;
  padding: 8px 10px; font-size: 13px; align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.at-row:last-child { border-bottom: none; }
.at-head {
  background: var(--c-brain); color: #fff; font-weight: 700; font-size: 13px;
}
.at-row span { display: flex; align-items: center; gap: 5px; }

/* Model-Harness 结构图 */
.harness-diagram { display: flex; flex-direction: column; gap: 12px; }
.hd-outer {
  border: 2px dashed var(--c-brain); border-radius: 14px; padding: 12px;
  background: rgba(124,92,255,.04);
}
.hd-label {
  font-size: 12px; font-weight: 700; color: var(--c-brain-deep);
  margin-bottom: 8px; letter-spacing: 1px;
}
.hd-harness {
  border: 2px solid var(--c-plan); border-radius: 12px; padding: 12px;
  background: rgba(255,159,64,.06);
}
.hd-harness-label {
  font-size: 13px; font-weight: 700; color: var(--c-plan-deep);
  margin-bottom: 10px; text-align: center;
}
.hd-row { display: flex; gap: 8px; margin-bottom: 8px; }
.hd-row:last-child { margin-bottom: 0; }
.hd-box {
  flex: 1; background: #fff; border: 1.5px solid var(--c-plan);
  border-radius: 10px; padding: 10px 8px; text-align: center;
  font-size: 12px; line-height: 1.5;
}
.hd-box small { color: var(--c-sub); font-size: 11px; }
.hd-model {
  border-color: var(--c-brain); background: linear-gradient(135deg, var(--c-brain-light), #fff);
  font-weight: 700;
}
.hd-ctx { border-color: var(--c-per); }
.hd-tool { border-color: var(--c-exe); }
.hd-loop { border-color: var(--c-mem); }
.hd-guard { border-color: var(--c-exe-deep); }
.hd-env {
  border: 2px solid var(--c-mem); border-radius: 14px; padding: 12px;
  background: rgba(46,204,113,.04);
}
.hd-env-items { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-env-item {
  background: var(--c-mem); color: #fff; padding: 4px 10px;
  border-radius: 20px; font-size: 12px;
}

/* 总装图拼装游戏 */
.assemble-game { display: flex; flex-direction: column; gap: 14px; }
.ag-board {
  position: relative; width: 100%; max-width: 420px; margin: 0 auto;
  aspect-ratio: 1; display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}
.ag-slot {
  border: 2px dashed var(--c-brain); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,92,255,.03); transition: all .2s;
  min-height: 70px;
}
.ag-slot.drag-over {
  border-color: var(--c-per); background: rgba(46,204,113,.1);
  transform: scale(1.03);
}
.ag-slot.correct {
  border-style: solid; border-color: var(--c-per);
  background: rgba(46,204,113,.08);
}
.ag-slot.wrong {
  border-color: var(--c-exe-deep); background: rgba(231,76,60,.08);
  animation: shake .3s;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.ag-slot-label { font-size: 11px; color: var(--c-sub); text-align: center; }
.ag-center {
  grid-column: 2; grid-row: 2;
  border-color: var(--c-brain); background: rgba(124,92,255,.08);
}
.ag-pieces {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 10px; background: rgba(0,0,0,.02); border-radius: 10px;
}
.ag-piece {
  background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep));
  color: #fff; padding: 8px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600; cursor: grab;
  display: flex; align-items: center; gap: 6px;
  user-select: none; transition: transform .15s;
}
.ag-piece:hover { transform: translateY(-2px); }
.ag-piece:active { cursor: grabbing; }
.ag-brain {
  background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep));
}
.ag-slot .ag-piece { cursor: default; }

/* 拆解四问 */
.four-questions { display: flex; flex-direction: column; gap: 8px; }
.fq-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px; border-left: 4px solid;
  background: rgba(255,255,255,.7);
}
.fq-per { border-left-color: var(--c-per); }
.fq-plan { border-left-color: var(--c-plan); }
.fq-mem { border-left-color: var(--c-mem); }
.fq-exe { border-left-color: var(--c-exe); }
.fq-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-brain); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.fq-item > div { font-size: 13px; line-height: 1.6; }
.fq-item small { color: var(--c-sub); }

/* 组件定位表 */
.locate-table {
  border: 1.5px solid var(--c-brain); border-radius: 10px; overflow: hidden;
}
.lt-row {
  display: grid; grid-template-columns: 2fr 1fr;
  padding: 8px 10px; font-size: 13px; align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.lt-row:last-child { border-bottom: none; }
.lt-head {
  background: var(--c-brain); color: #fff; font-weight: 700;
}

/* 智能客服示范拆解流程 */
.demo-flow {
  max-height: 430px; overflow-y: auto; padding: 16px 14px;
  background: var(--c-bg-alt, #F5F5F7); border: 1px solid var(--c-line);
  border-radius: var(--r-md, 14px);
  display: flex; flex-direction: column; gap: 12px;
}
.df-step {
  display: flex; gap: 12px; align-items: flex-start;
  position: relative;
  animation: fadeInUp .3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 时间线：竖线连接相邻步骤的圆点（颜色跟随步骤组件的语义色） */
.df-step:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 40px; bottom: -14px;
  width: 2px; border-radius: 2px; background: var(--c-line);
}
.df-step-per:not(:last-child)::after { background: var(--per-line); }
.df-step-plan:not(:last-child)::after { background: var(--plan-line); }
.df-step-mem:not(:last-child)::after { background: var(--mem-line); }
.df-step-exe:not(:last-child)::after { background: var(--exe-line); }
.df-step-brain:not(:last-child)::after { background: var(--brain-line); }
.df-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-brain); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 4px var(--c-bg-alt, #F5F5F7);
}
.df-step-user .df-num { background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep)); }
.df-step-per .df-num { background: var(--c-per); }
.df-step-plan .df-num { background: var(--c-plan); }
.df-step-mem .df-num { background: var(--c-mem); }
.df-step-exe .df-num { background: var(--c-exe); }
.df-step-brain .df-num { background: var(--c-brain-deep); }
.df-content {
  flex: 1; min-width: 0;
  background: #fff; border-radius: var(--r-sm, 10px); padding: 12px 14px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1, 0 2px 8px rgba(70,55,20,.06));
}
.df-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 组件标签：淡染底 + 描边 + 深色字（苹果风派生色） */
.df-comp-tag {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  padding: 2.5px 10px; border-radius: 999px; white-space: nowrap;
}
.df-comp-per { background: var(--per-tint); color: var(--per-ink); border: 1px solid var(--per-line); }
.df-comp-plan { background: var(--plan-tint); color: var(--plan-ink); border: 1px solid var(--plan-line); }
.df-comp-mem { background: var(--mem-tint); color: var(--mem-ink); border: 1px solid var(--mem-line); }
.df-comp-exe { background: var(--exe-tint); color: var(--exe-ink); border: 1px solid var(--exe-line); }
.df-comp-brain { background: var(--brain-tint); color: var(--brain-ink); border: 1px solid var(--brain-line); }
/* 「拆解四问」标注：引文式左侧色条 */
.df-q {
  font-size: 12px; color: var(--c-sub); line-height: 1.5;
  margin: 0 0 8px; padding: 2px 0 2px 9px;
  border-left: 2.5px solid var(--c-line);
}
.df-step-per .df-q { border-left-color: var(--c-per); }
.df-step-plan .df-q { border-left-color: var(--c-plan); }
.df-step-mem .df-q { border-left-color: var(--c-mem); }
.df-step-exe .df-q { border-left-color: var(--c-exe); }
.df-step-brain .df-q { border-left-color: var(--c-brain); }
.df-desc { font-size: 13px; color: var(--c-sub); margin-bottom: 8px; line-height: 1.6; }
/* 模拟消息：颜色跟随所在步骤的组件语义色 */
.df-msg {
  padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6;
}
.user-msg { background: var(--brain-tint); color: var(--brain-ink); border: 1px solid var(--brain-line); }
.ai-msg { background: #F7F8FA; color: var(--c-ink-2); border: 1px solid var(--c-line); border-left: 3px solid var(--c-line); }
.df-step-per .ai-msg { background: var(--per-tint); color: var(--per-ink); border-color: var(--per-line); border-left: 3px solid var(--c-per); }
.df-step-plan .ai-msg { background: var(--plan-tint); color: var(--plan-ink); border-color: var(--plan-line); border-left: 3px solid var(--c-plan); }
.df-step-mem .ai-msg { background: var(--mem-tint); color: var(--mem-ink); border-color: var(--mem-line); border-left: 3px solid var(--c-mem); }
.df-step-exe .ai-msg { background: var(--exe-tint); color: var(--exe-ink); border-color: var(--exe-line); border-left: 3px solid var(--c-exe); }
.df-step-brain .ai-msg { background: var(--brain-tint); color: var(--brain-ink); border-color: var(--brain-line); border-left: 3px solid var(--c-brain); }
/* 工具条：按钮 + 进度点 + 状态文字 */
.df-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; flex-wrap: wrap;
}
.df-progress { display: inline-flex; gap: 5px; margin-left: 4px; }
.df-pdot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-line); transition: background .25s, transform .25s;
}
.df-pdot.is-done { transform: scale(1.15); }
.df-pdot-per { background: var(--c-per); }
.df-pdot-plan { background: var(--c-plan); }
.df-pdot-mem { background: var(--c-mem); }
.df-pdot-exe { background: var(--c-exe); }
.df-pdot-brain { background: var(--c-brain); }
.df-status { color: var(--c-sub); font-size: 13.5px; }
.df-done { color: var(--mem-ink); font-weight: 700; }
/* 完成后的组件定位表 */
.df-locate { margin-top: 14px; animation: fadeInUp .4s ease; }
.df-locate-head {
  font-weight: 700; font-size: 13.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px; color: var(--c-ink);
}

/* 真实案例拆解库 */
.case-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.case-tab {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1.5px solid var(--c-line); background: #fff;
  color: var(--c-ink-2); cursor: pointer; transition: all .18s;
  display: flex; align-items: center; gap: 5px;
}
.case-tab:hover {
  border-color: var(--c-brain); background: var(--brain-tint); color: var(--brain-ink);
  transform: translateY(-1px);
}
.case-tab.active {
  background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep));
  color: #fff; border-color: var(--c-brain);
  box-shadow: 0 4px 12px rgba(201,138,18,.25);
}
.case-content {
  background: #fff; border-radius: var(--r-md, 14px); padding: 16px;
  border: 1px solid var(--c-line);
}
.case-content.is-swap { animation: fadeInUp .25s ease; }
.case-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.case-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep));
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(201,138,18,.22);
}
.case-head-txt { flex: 1; min-width: 0; }
.case-name { font-weight: 700; font-size: 16px; color: var(--c-ink); }
.case-desc { font-size: 13px; color: var(--c-sub); margin-top: 4px; line-height: 1.6; }
.case-components {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.cc-item {
  border-radius: 12px; padding: 12px 14px; border: 1.5px solid;
  transition: transform .15s, box-shadow .15s;
}
.cc-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(70,55,20,.08); }
.cc-per { border-color: var(--c-per); background: var(--per-tint); }
.cc-plan { border-color: var(--c-plan); background: var(--plan-tint); }
.cc-mem { border-color: var(--c-mem); background: var(--mem-tint); }
.cc-exe { border-color: var(--c-exe); background: var(--exe-tint); }
.cc-head {
  font-weight: 700; font-size: 13.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cc-ico { display: inline-flex; }
.cc-q {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--c-dim, #86868B);
}
.cc-per .cc-head { color: var(--per-ink); }
.cc-plan .cc-head { color: var(--plan-ink); }
.cc-mem .cc-head { color: var(--mem-ink); }
.cc-exe .cc-head { color: var(--exe-ink); }
.cc-list {
  margin: 0; padding: 0; list-style: none;
  font-size: 12.5px; line-height: 1.65; color: var(--c-ink-2);
}
.cc-list li {
  position: relative; padding-left: 14px; margin-bottom: 4px;
}
.cc-list li:last-child { margin-bottom: 0; }
.cc-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  opacity: .6; background: var(--c-line-strong, #8E8E93);
}
.cc-per .cc-list li::before { background: var(--c-per); opacity: .9; }
.cc-plan .cc-list li::before { background: var(--c-plan); opacity: .9; }
.cc-mem .cc-list li::before { background: var(--c-mem); opacity: .9; }
.cc-exe .cc-list li::before { background: var(--c-exe); opacity: .9; }
.case-ref {
  font-size: 12px; color: var(--c-sub); padding: 10px 12px;
  background: var(--c-bg-alt, #F5F5F7); border-radius: 8px; line-height: 1.7;
  border-left: 3px solid var(--c-brain);
  display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap;
}
.case-ref svg { flex-shrink: 0; margin-top: 3px; }
.case-ref-src {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  background: var(--brain-tint); color: var(--brain-ink);
  border: 1px solid var(--brain-line);
  padding: 1px 8px; border-radius: 6px; white-space: nowrap;
}
.case-ref-txt { flex: 1; min-width: 200px; }

/* 五种 Agent 对比表 */
.agent-compare-table {
  border: 1.5px solid var(--c-brain); border-radius: 10px; overflow: hidden;
  font-size: 12.5px;
}
.act-row {
  display: grid; grid-template-columns: 1.2fr 1.3fr 1.3fr 1.5fr;
  padding: 8px 10px; align-items: start;
  border-bottom: 1px solid rgba(0,0,0,.06);
  line-height: 1.6;
}
.act-row:last-child { border-bottom: none; }
.act-row:nth-child(even) { background: rgba(124,92,255,.02); }
.act-head {
  background: var(--c-brain); color: #fff; font-weight: 700; font-size: 13px;
}

/* 响应式：小屏调整 */
@media (max-width: 640px) {
  .bb-arrow { display: none; }
  .hd-row { flex-direction: column; }
  .case-components { grid-template-columns: 1fr; }
  .act-row { grid-template-columns: 1fr; gap: 4px; }
  .at-row { grid-template-columns: 1fr 1fr; }
  .at-row span:last-child { grid-column: 1 / -1; }
  .mem-layers .ml-row { flex-direction: column; gap: 4px; }
  .storage-formats { grid-template-columns: 1fr; }
  .rag-flow { flex-direction: column; }
  .rag-arrow { transform: rotate(90deg); }
  .cog-mem { grid-template-columns: 1fr; }
  .privacy-grid { grid-template-columns: 1fr; }
  .tool-categories { grid-template-columns: 1fr; }
  .fc-flow { flex-direction: column; }
  .fc-arrow { transform: rotate(90deg); }
  .mcp-diagram { flex-direction: column; }
  .mcp-arrows { flex-direction: row; }
  .multi-tool-flow .mt-arrow { transform: rotate(90deg); }
}

/* ============================================================
 * 记忆器实验室新增样式
 * ============================================================ */

/* 记忆层次结构 */
.mem-layers { display: flex; flex-direction: column; gap: 8px; }
.ml-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: rgba(255,255,255,.7);
  border-radius: 10px; border-left: 4px solid var(--c-mem);
}
.ml-tag {
  flex-shrink: 0; padding: 4px 12px; border-radius: 20px;
  font-weight: 700; font-size: 12px; color: #fff; min-width: 90px; text-align: center;
}
.ml-traj { background: var(--c-mem); }
.ml-long { background: var(--c-mem-deep); }
.ml-state { background: var(--c-plan); }
.ml-row > span:last-child { font-size: 13px; line-height: 1.6; }

/* 记忆三层次评估 */
.mem-levels { display: flex; flex-direction: column; gap: 10px; }
.mlevel {
  border-radius: 12px; padding: 14px; border: 2px solid;
}
.mlevel-1 { border-color: var(--c-mem); background: rgba(52,152,219,.04); }
.mlevel-2 { border-color: var(--c-plan); background: rgba(255,159,64,.04); }
.mlevel-3 { border-color: var(--c-exe-deep); background: rgba(231,76,60,.04); }
.mlevel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.mlevel-num {
  width: 32px; height: 32px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.mlevel-1 .mlevel-num { background: var(--c-mem); }
.mlevel-2 .mlevel-num { background: var(--c-plan); }
.mlevel-3 .mlevel-num { background: var(--c-exe-deep); }
.mlevel-desc { font-size: 13px; line-height: 1.7; margin-bottom: 6px; }
.mlevel-example {
  font-size: 12.5px; padding: 8px 10px; background: rgba(255,255,255,.8);
  border-radius: 8px; line-height: 1.6;
}

/* 四种存储格式 */
.storage-formats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.sf-item {
  border-radius: 12px; padding: 12px; border: 2px solid;
}
.sf-simple { border-color: var(--c-mem); background: rgba(52,152,219,.04); }
.sf-enhanced { border-color: var(--c-per); background: rgba(46,204,113,.04); }
.sf-json { border-color: var(--c-plan); background: rgba(255,159,64,.04); }
.sf-advanced { border-color: var(--c-exe-deep); background: rgba(231,76,60,.04); }
.sf-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sf-head b { font-size: 14px; }
.sf-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--c-brain); color: #fff;
}
.sf-desc { font-size: 12.5px; line-height: 1.6; margin-bottom: 6px; }
.sf-eg {
  font-size: 12px; padding: 6px 8px; background: rgba(255,255,255,.8);
  border-radius: 6px; margin-bottom: 6px; line-height: 1.5;
}
.sf-pro, .sf-con { font-size: 12px; line-height: 1.5; }

/* RAG 流程图 */
.rag-flow {
  display: flex; align-items: stretch; gap: 8px; justify-content: center;
}
.rag-step {
  flex: 1; border-radius: 12px; padding: 12px; text-align: center;
  border: 2px solid; min-width: 0;
}
.rag-1 { border-color: var(--c-per); background: rgba(46,204,113,.06); }
.rag-2 { border-color: var(--c-brain); background: rgba(124,92,255,.06); }
.rag-3 { border-color: var(--c-exe); background: rgba(231,76,60,.06); }
.rag-num {
  width: 28px; height: 28px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; margin: 0 auto 6px;
}
.rag-1 .rag-num { background: var(--c-per); }
.rag-2 .rag-num { background: var(--c-brain); }
.rag-3 .rag-num { background: var(--c-exe); }
.rag-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rag-desc { font-size: 11.5px; line-height: 1.5; color: var(--c-sub); margin-bottom: 6px; }
.rag-eg {
  font-size: 11px; padding: 6px 8px; background: rgba(255,255,255,.8);
  border-radius: 6px; line-height: 1.5; text-align: left;
}
.rag-arrow {
  display: flex; align-items: center; font-size: 20px; color: var(--c-brain);
  font-weight: 700;
}

/* 认知科学三种记忆 */
.cog-mem {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.cm-item {
  border-radius: 12px; padding: 12px; text-align: center;
  border: 2px solid;
}
.cm-episodic { border-color: var(--c-mem); background: rgba(52,152,219,.04); }
.cm-semantic { border-color: var(--c-per); background: rgba(46,204,113,.04); }
.cm-procedural { border-color: var(--c-plan); background: rgba(255,159,64,.04); }
.cm-icon {
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.cm-episodic .cm-icon { background: var(--c-mem); }
.cm-semantic .cm-icon { background: var(--c-per); }
.cm-procedural .cm-icon { background: var(--c-plan); }
.cm-name { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.cm-name small { display: block; font-size: 11px; font-weight: 400; color: var(--c-sub); }
.cm-human, .cm-agent {
  font-size: 11.5px; line-height: 1.5; padding: 6px 8px;
  background: rgba(255,255,255,.8); border-radius: 6px; margin-bottom: 4px;
  text-align: left;
}
.cm-human b, .cm-agent b { color: var(--c-brain-deep); }

/* 隐私与记忆边界 */
.privacy-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.priv-item {
  border-radius: 12px; padding: 14px; border: 2px solid;
}
.priv-ok { border-color: var(--c-per); background: rgba(46,204,113,.04); }
.priv-no { border-color: var(--c-exe-deep); background: rgba(231,76,60,.04); }
.priv-head {
  display: flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: 14px; margin-bottom: 10px;
}
.priv-ok .priv-head { color: var(--c-per-deep); }
.priv-no .priv-head { color: var(--c-exe-deep); }
.priv-item ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }
.priv-practices { margin-top: 14px; }
.pp-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: rgba(255,255,255,.7); border-radius: 8px; margin-bottom: 6px;
}
.pp-tag {
  flex-shrink: 0; padding: 3px 10px; border-radius: 12px;
  background: var(--c-mem); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 70px; text-align: center;
}
.pp-row > span:last-child { font-size: 12.5px; line-height: 1.6; }

/* ============================================================
 * 执行器实验室新增样式
 * ============================================================ */

/* 工具五分类 */
.tool-categories {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tc-item {
  border-radius: 12px; padding: 12px; border: 2px solid;
}
.tc-perception { border-color: var(--c-per); background: rgba(46,204,113,.04); }
.tc-execution { border-color: var(--c-exe); background: rgba(231,76,60,.04); }
.tc-collab { border-color: var(--c-brain); background: rgba(124,92,255,.04); }
.tc-event { border-color: var(--c-plan); background: rgba(255,159,64,.04); }
.tc-user { border-color: var(--c-mem); background: rgba(52,152,219,.04); grid-column: 1 / -1; }
.tc-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.tc-icon {
  width: 32px; height: 32px; border-radius: 8px; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tc-perception .tc-icon { background: var(--c-per); }
.tc-execution .tc-icon { background: var(--c-exe); }
.tc-collab .tc-icon { background: var(--c-brain); }
.tc-event .tc-icon { background: var(--c-plan); }
.tc-user .tc-icon { background: var(--c-mem); }
.tc-head b { font-size: 14px; }
.tc-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--c-sub); color: #fff; margin-left: auto;
}
.tc-desc { font-size: 12.5px; line-height: 1.6; margin-bottom: 6px; color: var(--c-sub); }
.tc-tools {
  font-size: 12px; padding: 8px 10px; background: rgba(255,255,255,.8);
  border-radius: 8px; line-height: 1.6;
}

/* Function Calling 流程 */
.fc-flow {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.fc-step {
  width: 100%; max-width: 560px; border-radius: 12px; padding: 12px;
  border: 2px solid;
}
.fc-1 { border-color: var(--c-per); background: rgba(46,204,113,.04); }
.fc-2 { border-color: var(--c-brain); background: rgba(124,92,255,.04); }
.fc-3 { border-color: var(--c-exe); background: rgba(231,76,60,.04); }
.fc-4 { border-color: var(--c-plan); background: rgba(255,159,64,.04); }
.fc-num {
  width: 28px; height: 28px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; margin-bottom: 6px;
}
.fc-1 .fc-num { background: var(--c-per); }
.fc-2 .fc-num { background: var(--c-brain); }
.fc-3 .fc-num { background: var(--c-exe); }
.fc-4 .fc-num { background: var(--c-plan); }
.fc-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.fc-desc { font-size: 12.5px; line-height: 1.6; color: var(--c-sub); margin-bottom: 8px; }
.fc-msg {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6;
}
.fc-json {
  padding: 10px 12px; background: #1e1e2e; color: #a6e3a1;
  border-radius: 8px; font-family: monospace; font-size: 12px; line-height: 1.7;
  overflow-x: auto;
}
.fc-arrow { font-size: 18px; color: var(--c-brain); font-weight: 700; }

/* 工具描述演示：两张工具卡并列且高度一致（默认 stretch 等高，窄屏自动回落为单列） */
.tool-desc-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.td-item {
  border-radius: 12px; padding: 12px; border: 2px solid var(--c-exe);
  background: rgba(231,76,60,.03);
}
.td-name {
  font-weight: 700; font-size: 14px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px; color: var(--c-exe-deep);
}
.td-field {
  font-size: 12.5px; line-height: 1.6; padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.td-field:last-child { border-bottom: none; }
.td-field b { color: var(--c-brain-deep); }

/* MCP 协议图 */
.mcp-diagram {
  display: flex; align-items: center; gap: 16px; justify-content: center;
  padding: 16px;
}
.mcp-center { text-align: center; }
.mcp-agent {
  width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep));
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; margin: 0 auto 8px;
}
.mcp-label { font-size: 12px; color: var(--c-sub); font-weight: 700; }
.mcp-arrows {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 12px; color: var(--c-brain); font-weight: 700;
}
.mcp-arrow { padding: 4px 8px; background: rgba(124,92,255,.1); border-radius: 6px; }
.mcp-servers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mcp-server {
  width: 90px; padding: 10px 8px; border-radius: 10px;
  background: #fff; border: 2px solid var(--c-exe);
  text-align: center; font-size: 12px;
}
.mcp-server b { display: block; margin: 4px 0; font-size: 12px; }
.mcp-server small { color: var(--c-sub); font-size: 10px; }

/* 工具幻觉与约束 */
.hallucination-demo { display: flex; flex-direction: column; gap: 12px; }
.hd-scenario {
  border-radius: 12px; padding: 14px; border: 2px solid var(--c-exe-deep);
  background: rgba(231,76,60,.04);
}
.hd-title {
  font-weight: 700; font-size: 14px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px; color: var(--c-exe-deep);
}
.hd-msg {
  padding: 8px 12px; background: #1e1e2e; color: #f38ba8;
  border-radius: 8px; font-family: monospace; font-size: 12px;
  margin-bottom: 8px;
}
.hd-result { font-size: 13px; font-weight: 600; }
.hd-defenses {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.hd-defense {
  border-radius: 10px; padding: 12px; border: 2px solid var(--c-per);
  background: rgba(46,204,113,.04); text-align: center;
}
.hd-dnum {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c-per);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; margin: 0 auto 6px;
}
.hd-defense b { font-size: 13px; display: block; margin-bottom: 4px; }
.hd-defense small { font-size: 11px; color: var(--c-sub); line-height: 1.5; }

/* 多工具协作流程 */
.multi-tool-flow { display: flex; flex-direction: column; gap: 4px; }
.mt-step {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; border: 2px solid;
}
.mt-perception { border-color: var(--c-per); background: rgba(46,204,113,.04); }
.mt-execution { border-color: var(--c-exe); background: rgba(231,76,60,.04); }
.mt-final { border-color: var(--c-brain); background: rgba(124,92,255,.06); }
.mt-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.mt-perception .mt-icon { background: var(--c-per); }
.mt-execution .mt-icon { background: var(--c-exe); }
.mt-final .mt-icon { background: var(--c-brain); }
.mt-content { font-size: 13px; line-height: 1.6; }
.mt-content b { display: block; margin-bottom: 2px; }
.mt-arrow {
  text-align: center; font-size: 12px; color: var(--c-brain);
  font-weight: 700; padding: 2px 0;
}

/* ============================================================
 * 排版优化 v2 —— 统一视觉层次、提升可读性、精细化组件
 * ============================================================ */

/* --- 全局排版基线 --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 段落与文本节奏 */
.card p { line-height: 1.75; margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }
.card li { line-height: 1.7; margin-bottom: 4px; }
.card ul, .card ol { padding-left: 22px; margin-bottom: 12px; }
.card ul:last-child, .card ol:last-child { margin-bottom: 0; }

/* 标题层级精细化 */
.card h2 {
  font-size: 22px; font-weight: 800; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 2px solid var(--c-line);
  letter-spacing: .3px;
}
.card h2 .chip { font-size: 12.5px; padding: 4px 12px; }
.card h3 {
  font-size: 17px; font-weight: 700; margin: 18px 0 10px;
  padding-left: 12px; border-left: 4px solid var(--c-brain);
  line-height: 1.4;
}
.card h4 {
  font-size: 15px; font-weight: 700; margin: 14px 0 8px;
  color: var(--c-brain-deep);
}

/* 卡片精细化 */
.card {
  padding: 26px 28px; margin-bottom: 24px;
  border: 2px solid rgba(0,0,0,.04);
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: 0 10px 30px rgba(70, 55, 20, .14);
}
.card .sub { font-size: 14.5px; line-height: 1.7; margin-bottom: 16px; }

/* 提示框统一优化 */
.card .tip {
  padding: 12px 16px; font-size: 14px; line-height: 1.7;
  border-radius: 12px; margin: 14px 0;
}
.tip-info {
  background: #EAF4FF; border-left-color: var(--c-per); color: #1a5276;
}
.tip-warn {
  background: #FFF5E6; border-left-color: var(--c-plan); color: #7d4e0a;
}
.tip-ok {
  background: #E8F8EF; border-left-color: var(--c-mem); color: #145a32;
}
.tip-danger {
  background: #FDEDEC; border-left-color: var(--c-exe); color: #7b241c;
}

/* 术语折叠解释（U.term）：虚线术语 + 就地展开
 * 目的：正文遇到超纲术语不再另起长段落，而是"想深究就点开"——保证阅读节奏不被打断。 */
.termq-wrap { display: inline; }
.termq {
  display: inline; border: 0; background: none; padding: 0 1px; margin: 0;
  font: inherit; color: inherit; cursor: pointer; line-height: inherit;
  border-bottom: 1.5px dashed currentColor;
}
.termq:hover { color: var(--c-plan-deep); }
.termq.on { border-bottom-style: solid; }
.termq-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 3px; border-radius: 50%;
  background: var(--c-plan); color: #fff; font-size: 9px; font-weight: 700;
  vertical-align: 1px; line-height: 1;
}
.termq-box {
  display: block; margin: 8px 0 4px; padding: 10px 14px;
  background: #FFFBF0; border-left: 4px solid var(--c-plan);
  border-radius: 10px; font-size: 13.5px; line-height: 1.75; color: #6b4a12;
}
.termq-box[hidden] { display: none; }
.termq-box code { background: #f6efe0; }

/* 代码块统一优化 */
code, pre {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
}
code {
  background: #f0ede4; padding: 2px 7px; border-radius: 6px;
  font-size: 13.5px; color: #c0392b;
}
pre {
  background: #1e1e2e; color: #cdd6f4; padding: 16px 18px;
  border-radius: 12px; overflow-x: auto; font-size: 13px;
  line-height: 1.7; margin: 12px 0;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.fc-json, .hd-msg {
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 12.5px; line-height: 1.75; padding: 14px 16px;
  border-radius: 12px; overflow-x: auto;
}

/* 表格统一优化 */
table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  font-size: 13.5px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
thead { background: linear-gradient(135deg, #f8f5ed, #f0ebe0); }
th {
  padding: 12px 14px; text-align: left; font-weight: 700;
  font-size: 13px; color: #5a5548; border-bottom: 2px solid var(--c-line);
  letter-spacing: .3px;
}
td {
  padding: 11px 14px; border-bottom: 1px solid #f0ece2;
  line-height: 1.65; vertical-align: top;
}
tbody tr { transition: background .15s; }
tbody tr:hover { background: #faf7f0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: #fdfbf6; }
tbody tr:nth-child(even):hover { background: #faf7f0; }

/* 标签/徽章统一 */
.chip, .tag, .badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
}
.chip-per { background: var(--c-per); color: #fff; }
.chip-plan { background: var(--c-plan); color: #fff; }
.chip-mem { background: var(--c-mem); color: #fff; }
.chip-exe { background: var(--c-exe); color: #fff; }
.chip-brain { background: var(--c-brain); color: #fff; }
.chip-ori { background: var(--c-ori); color: #fff; }
.chip-gray { background: #e8e4da; color: #6b6658; }

/* 按钮精细化 */
.btn {
  font-size: 15px; padding: 12px 24px; border-radius: 999px;
  letter-spacing: .3px; box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn-lg { padding: 14px 30px; font-size: 16.5px; }

/* 输入框精细化 */
input[type="text"], input[type="password"], textarea, select {
  font-size: 14.5px; padding: 11px 15px; border-radius: 12px;
  border: 2px solid var(--c-line); transition: all .18s;
  background: #fff;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--c-per);
  box-shadow: 0 0 0 3px rgba(62,155,255,.15);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #b5b0a3; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f5f2ea; border-radius: 5px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #d4cfc2, #bfb9a9);
  border-radius: 5px; border: 2px solid #f5f2ea;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #bfb9a9, #a8a292); }

/* 内容区块视觉层次 —— 模块分隔 */
.module-divider {
  height: 2px; background: linear-gradient(90deg, transparent, var(--c-line), transparent);
  margin: 28px 0; border: none;
}

/* 强调文本 */
.hl {
  background: linear-gradient(120deg, #fff3cd 0%, #ffeaa7 100%);
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.hl-per { background: linear-gradient(120deg, #d6eaf8, #aed6f1); }
.hl-plan { background: linear-gradient(120deg, #fdebd0, #f9e79f); }
.hl-mem { background: linear-gradient(120deg, #d5f5e3, #abebc6); }
.hl-exe { background: linear-gradient(120deg, #fadbd8, #f5b7b1); }

/* 引用块 */
blockquote {
  margin: 14px 0; padding: 12px 18px;
  background: #f8f5ed; border-left: 4px solid var(--c-brain);
  border-radius: 0 12px 12px 0; font-style: italic; color: #6b5b2e;
  line-height: 1.7;
}

/* 键盘按键样式 */
kbd {
  display: inline-block; padding: 3px 9px;
  background: #fff; border: 1.5px solid var(--c-line);
  border-bottom-width: 3px; border-radius: 7px;
  font-family: monospace; font-size: 12.5px; font-weight: 600;
  color: #5a5548; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* 响应式断点优化 */
@media (max-width: 1024px) {
  main { padding: 20px 16px 60px; }
  .card { padding: 22px 20px; }
  .hero h1 { font-size: 28px; }
}
@media (max-width: 768px) {
  .topbar-inner { padding: 8px 14px; gap: 8px; }
  .brand { font-size: 16px; }
  .brand .logo { width: 36px; height: 36px; }
  .nav-tab { font-size: 13.5px; padding: 7px 11px; }
  main { padding: 16px 12px 50px; }
  .card { padding: 18px 16px; margin-bottom: 18px; }
  .card h2 { font-size: 19px; }
  .card h3 { font-size: 15.5px; }
  .hero h1 { font-size: 24px; }
  .hero .sub { font-size: 14px; }
  .btn { font-size: 14px; padding: 10px 18px; }
  pre { font-size: 12px; padding: 12px 14px; }
  table { font-size: 12.5px; }
  th, td { padding: 8px 10px; }
}
@media (max-width: 480px) {
  .card { padding: 16px 14px; }
  .card h2 { font-size: 17px; }
  .hero h1 { font-size: 21px; }
  .nav { gap: 4px; }
  .nav-tab { font-size: 12.5px; padding: 6px 9px; }
}

/* 打印优化 */
@media print {
  .topbar, .icon-btn, .btn { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body { background: #fff; }
  main { max-width: 100%; padding: 0; }
}

/* 选中文字样式 */
::selection { background: rgba(246,185,59,.35); color: inherit; }
::-moz-selection { background: rgba(246,185,59,.35); }

/* ============================================================
 * 总装图模块排版优化 v2
 * ============================================================ */

/* --- 核心公式卡片优化 --- */
.formula-center {
  margin: 0 auto 20px !important;
  max-width: 800px;
  text-align: center;
}
.formula-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.formula-card {
  margin: 0 !important;
  padding: 18px 16px !important;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.formula-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.formula-card h4 {
  justify-content: center;
  margin-bottom: 12px !important;
  font-size: 16px !important;
}
.formula-card .line {
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.formula-card .line:last-child { border-bottom: none; }
/* 说明卡统一结构：定位一句 +「有什么 / 做什么」两行（可横向对照） */
.formula-card h4 { justify-content: flex-start; }
.formula-card::before { display: none; }        /* 去掉小本子竖线，避免与正文相撞 */
.formula-card .fc-tag {
  font-size: 13px; line-height: 1.65; color: var(--c-sub);
  text-align: left; padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}
.formula-card .fc-tag b { color: var(--c-ink); }
.formula-card .fc-item {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 13px; line-height: 1.65; color: var(--c-sub);
  text-align: left; padding: 3px 0;
}
.formula-card .fc-item .icon { flex-shrink: 0; margin-top: 3px; color: var(--c-dim); }
.formula-card .fc-item b { flex-shrink: 0; font-weight: 700; color: var(--c-ink-2); }
.formula-card .fc-item span { min-width: 0; }
@media (max-width: 768px) {
  .formula-cards { grid-template-columns: 1fr; }
}

/* --- 人体类比卡片优化 --- */
.analogy-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}
.analogy-left, .analogy-right {
  min-width: 0;
}
.analogy-center {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.analogy-center .section-subtitle {
  text-align: center;
}
.section-subtitle {
  font-weight: 800;
  font-size: 15.5px;
  color: var(--c-brain-deep);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.analogy-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ac-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid;
  transition: transform .15s, box-shadow .15s;
}
.ac-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.ac-per { border-color: var(--c-per); }
.ac-brain { border-color: var(--c-brain); }
.ac-mem { border-color: var(--c-mem); }
.ac-exe { border-color: var(--c-exe); }
.ac-plan { border-color: var(--c-plan); }
.ac-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ac-per .ac-icon { background: var(--c-per); }
.ac-brain .ac-icon { background: var(--c-brain); }
.ac-mem .ac-icon { background: var(--c-mem); }
.ac-exe .ac-icon { background: var(--c-exe); }
.ac-plan .ac-icon { background: var(--c-plan); }
.ac-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ac-human {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
}
.ac-arrow {
  color: var(--c-sub);
  font-weight: 700;
  font-size: 14px;
}
.ac-agent {
  font-weight: 800;
  font-size: 14px;
}
.ac-per .ac-agent { color: var(--c-per-deep); }
.ac-brain .ac-agent { color: var(--c-brain-deep); }
.ac-mem .ac-agent { color: var(--c-mem-deep); }
.ac-exe .ac-agent { color: var(--c-exe-deep); }
.ac-plan .ac-agent { color: var(--c-plan-deep); }
.ac-duty {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--c-sub);
  text-align: right;
  max-width: 140px;
  line-height: 1.5;
}
.assembly-hint {
  text-align: center;
  color: var(--c-sub);
  font-size: 13px;
  margin-top: 10px;
  padding: 6px;
  background: rgba(0,0,0,.02);
  border-radius: 8px;
}
@media (max-width: 900px) {
  .analogy-layout { grid-template-columns: 1fr; }
  .ac-duty { max-width: 100%; text-align: left; margin-left: 0; }
}

/* --- 总装图拼装：十字形布局 + 点击式 --- */
.ag-cross {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto 20px;
  aspect-ratio: 1;
  min-height: 360px;
}
.ag-cross .ag-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 2px dashed var(--c-line);
  background: rgba(255,255,255,.6);
  min-height: 90px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  padding: 8px;
}
.ag-cross .ag-slot:hover {
  border-color: var(--c-brain);
  background: rgba(246,185,59,.06);
  transform: scale(1.02);
}
.ag-slot-top { grid-column: 2; grid-row: 1; }
.ag-slot-left { grid-column: 1; grid-row: 2; }
.ag-slot-center { grid-column: 2; grid-row: 2; border-style: solid !important; border-color: var(--c-brain) !important; background: rgba(246,185,59,.08) !important; }
.ag-slot-right { grid-column: 3; grid-row: 2; }
.ag-slot-bottom { grid-column: 2; grid-row: 3; }
.ag-slot-label {
  font-size: 12px;
  color: var(--c-sub);
  font-weight: 600;
  line-height: 1.4;
}
.ag-slot.correct {
  border-style: solid !important;
  border-color: var(--c-mem) !important;
  background: rgba(47,191,113,.08) !important;
}
.ag-slot.wrong {
  border-color: var(--c-exe) !important;
  background: rgba(255,90,95,.1) !important;
  animation: shake .4s;
}
.ag-slot.pulse {
  animation: pulse-glow .6s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246,185,59,.4); }
  50% { box-shadow: 0 0 0 10px rgba(246,185,59,0); }
}
.ag-pieces-wrap {
  margin-top: 16px;
}
.ag-pieces-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-brain-deep);
  margin-bottom: 10px;
  text-align: center;
  padding: 8px;
  background: rgba(246,185,59,.08);
  border-radius: 8px;
}
.ag-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ag-piece {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--ag-line, var(--c-line));
  color: var(--c-ink);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .18s;
  user-select: none;
  --ag-tint: var(--c-bg-alt); --ag-ink: var(--c-ink-2); --ag-line: var(--c-line);
}
/* 组件图标徽章：淡色块 + 深色图标（对齐深度拆解模块的条目卡语言） */
.ag-ico {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ag-tint); color: var(--ag-ink);
}
.ag-piece[data-comp="perception"] { --ag-tint: var(--per-tint); --ag-ink: var(--per-ink); --ag-line: var(--per-line); }
.ag-piece[data-comp="memory"]     { --ag-tint: var(--mem-tint); --ag-ink: var(--mem-ink); --ag-line: var(--mem-line); }
.ag-piece[data-comp="planner"]    { --ag-tint: var(--plan-tint); --ag-ink: var(--plan-ink); --ag-line: var(--plan-line); }
.ag-piece[data-comp="executor"]   { --ag-tint: var(--exe-tint); --ag-ink: var(--exe-ink); --ag-line: var(--exe-line); }
.ag-piece[data-comp="brain"]      { --ag-tint: var(--brain-tint); --ag-ink: var(--brain-ink); --ag-line: var(--brain-line); }
.ag-piece:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.ag-piece.selected {
  border-color: var(--c-brain);
  background: linear-gradient(135deg, #fff8e6, #ffefc2);
  box-shadow: 0 0 0 3px rgba(246,185,59,.3), 0 4px 14px rgba(246,185,59,.3);
  transform: scale(1.05);
}
.ag-piece.placed {
  opacity: 1;
  cursor: default;
  border-color: var(--c-mem);
  background: rgba(47,191,113,.1);
}
.ag-piece.placed .ag-ico { background: var(--mem-tint); color: var(--mem-ink); }
.ag-brain {
  background: linear-gradient(135deg, #fff8e6, #ffefc2);
  border-color: var(--c-brain);
}
.ag-status-text {
  color: var(--c-sub);
  font-size: 14px;
  align-self: center;
  font-weight: 600;
}
.ag-status-selected { color: var(--c-brain-deep); font-weight: 700; }
.ag-status-ok { color: var(--c-mem-deep); font-weight: 700; }
.ag-status-err { color: var(--c-exe-deep); font-weight: 700; }
.ag-status-warn { color: var(--c-plan-deep); font-weight: 700; }
.ag-status-done { color: var(--c-mem-deep); font-weight: 800; font-size: 15px; }

/* --- Coding Agent 深度拆解：三级层次（白大卡 > 浅灰子卡 > 白色小卡） --- */
.cb-deep {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cb-section {
  display: flex; flex-direction: column;
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 18px 20px;
}
.cb-section[id] { scroll-margin-top: 84px; }
/* 子卡内的条目回到白色，与浅灰子卡形成层次 */
.cb-section .tx-chip,
.cb-section .tx-fact {
  background: var(--c-card); border: 1px solid var(--c-line);
}

/* 模块内导览 */
.cb-toc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 14px; padding: 12px 14px;
}
.cb-toc-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--c-sub);
}
.cb-toc-label .icon { color: var(--brain-ink); }
.cb-toc-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  background: var(--c-bg-alt); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2);
  transition: transform var(--t-fast), border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.cb-toc-chip b { font-weight: 800; color: var(--brain-ink); }
.cb-toc-chip:hover { transform: translateY(-1px); border-color: var(--c-brain); color: var(--c-ink); }
.cb-toc-chip:focus-visible { outline: 2px solid var(--c-brain); outline-offset: 2px; }

/* 组标题（四大组件拆解） */
.cb-group-head { display: flex; align-items: center; gap: 12px; }
.cb-group-head::before, .cb-group-head::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.cb-group-head span { font-size: 12.5px; font-weight: 700; color: var(--c-sub); white-space: nowrap; letter-spacing: .02em; }

/* 块标题：语义色图标徽章 + 标题 + 计数 */
.cb-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cb-sec-head .cb-ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cb-tint, var(--c-bg-alt)); color: var(--cb-ink, var(--c-ink-2));
}
.cb-sec-head .cb-title { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.cb-sec-head .cb-count {
  margin-left: auto; flex: 0 0 auto;
  font-size: 12px; font-weight: 600; color: var(--c-dim);
  background: var(--c-bg-alt); border-radius: var(--r-pill); padding: 3px 10px;
}
.cb-sec-head[data-color="brain"] { --cb-tint: var(--brain-tint); --cb-ink: var(--brain-ink); }
.cb-sec-head[data-color="per"]   { --cb-tint: var(--per-tint);   --cb-ink: var(--per-ink); }
.cb-sec-head[data-color="plan"]  { --cb-tint: var(--plan-tint);  --cb-ink: var(--plan-ink); }
.cb-sec-head[data-color="mem"]   { --cb-tint: var(--mem-tint);   --cb-ink: var(--mem-ink); }
.cb-sec-head[data-color="exe"]   { --cb-tint: var(--exe-tint);   --cb-ink: var(--exe-ink); }

@media (max-width: 560px) {
  .cb-deep { gap: 24px; }
  .cb-sec-head .cb-title { font-size: 14.5px; }
}

/* ---------- 深度拆解：步骤时间线（规划器 6 步 / 真实工作流程 7 步） ----------
 * 替代原先「chip + 字符箭头 ↓」的纵向堆叠：左侧一条连接线串联步骤，
 * 节点用语义色图标，序号/阶段徽章与标题同行，说明另起一行左对齐。
 * is-phased 变体的连接线按 感知→规划→记忆→执行 渐变，直观表达组件轮转。 */
/* 桌面：横向步骤流程（顺序一目了然） */
.cb-steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-top: 6px;
}
.cb-step {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 0 10px;
}
/* 连接线颜色跟随该步的语义色（组件轮转可视化） */
.cb-step.is-per  { --cb-c: var(--c-per); }
.cb-step.is-plan { --cb-c: var(--c-plan); }
.cb-step.is-mem  { --cb-c: var(--c-mem); }
.cb-step.is-exe  { --cb-c: var(--c-exe); }
.cb-step.is-done { --cb-c: var(--c-brain); }
/* 步骤之间的连接线：由本节点右侧接到下一节点左侧；颜色跟随该步语义色 */
.cb-step:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; height: 2px; border-radius: 2px;
  left: calc(50% + 22px); right: calc(-50% + 22px);
  background: var(--cb-c, var(--c-line)); opacity: .5;
}
.cb-step-dot {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cb-tint, var(--c-bg-alt)); color: var(--cb-ink, var(--c-ink-2));
  box-shadow: 0 0 0 4px var(--c-bg-alt);
}
.cb-step-dot.is-per  { --cb-tint: var(--per-tint);  --cb-ink: var(--per-ink); }
.cb-step-dot.is-plan { --cb-tint: var(--plan-tint); --cb-ink: var(--plan-ink); }
.cb-step-dot.is-mem  { --cb-tint: var(--mem-tint);  --cb-ink: var(--mem-ink); }
.cb-step-dot.is-exe  { --cb-tint: var(--exe-tint);  --cb-ink: var(--exe-ink); }
.cb-step-dot.is-done { --cb-tint: var(--brain-tint); --cb-ink: var(--brain-ink); }
.cb-step-body { margin-top: 10px; min-width: 0; }
.cb-step-top { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.cb-step-top > b { font-size: 14px; font-weight: 700; color: var(--c-ink); }
.cb-step-no {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800;
  color: var(--c-sub);            /* --c-dim 在白底仅 3.6:1，改用 --c-sub（6.0:1） */
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.cb-step-body > i {
  display: block; font-style: normal; margin-top: 4px;
  font-size: 12.5px; line-height: 1.6; color: var(--c-sub);
}

/* 循环回环：虚线带 + 左向箭头，表示「失败 → 回到第 3 步」 */
.cb-loop {
  display: flex; align-items: center; gap: 8px;
  width: 50%; margin: 16px 0 0 auto; padding: 9px 12px;
  border: 1px dashed var(--plan-line); border-radius: 12px;
  background: var(--plan-tint); color: var(--plan-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1.6;
}
.cb-loop .icon { flex-shrink: 0; }
.cb-loop code {
  background: #fff; color: var(--plan-ink);
  border-radius: 5px; padding: 1px 6px; font-size: 11.5px;
}

/* 窄屏：横向流程降级为纵向时间线 */
@media (max-width: 900px) {
  .cb-steps { display: flex; flex-direction: column; position: relative; }
  .cb-steps::before {
    content: ""; position: absolute; left: 17px; top: 26px; bottom: 26px; width: 2px;
    border-radius: 2px; opacity: .45; background: var(--c-line);
  }
  .cb-steps.is-phased::before {
    background: linear-gradient(180deg,
      var(--c-per) 0%, var(--c-plan) 30%, var(--c-mem) 55%, var(--c-exe) 80%, var(--c-mem-deep) 100%);
  }
  .cb-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; padding: 9px 0; }
  .cb-step:not(:last-child)::after { display: none; }
  .cb-step-body { margin-top: 0; padding-top: 4px; }
  .cb-step-top { justify-content: flex-start; }
  .cb-step-body > i { font-size: 13px; }
  .cb-loop { width: 100%; margin-left: 0; }
}
@media (max-width: 560px) {
  .cb-step { gap: 10px; }
  .cb-step-body > i { font-size: 12.5px; }
}

.cb-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.cb-pro-item {
  padding: 12px 14px;
  background: rgba(246,185,59,.05);
  border-radius: 10px;
  border: 1px solid rgba(246,185,59,.2);
}
.cb-pro-item b {
  display: block;
  font-size: 12px;
  color: var(--c-brain-deep);
  margin-bottom: 4px;
}
.cb-pro-item span {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .cb-product-grid { grid-template-columns: 1fr; }
}

.cb-perception-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cb-per-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(62,155,255,.04);
  border-radius: 10px;
  border: 1px solid rgba(62,155,255,.15);
}
.cb-per-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-per);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.cb-per-item b {
  font-size: 13.5px;
  display: block;
  margin-bottom: 3px;
}
.cb-per-item p {
  font-size: 12.5px;
  color: var(--c-sub);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .cb-perception-list { grid-template-columns: 1fr; }
}

.cb-plan-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cb-pf-step {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,159,46,.04);
  border-radius: 10px;
  border: 1px solid rgba(255,159,46,.15);
}
.cb-pf-final {
  background: rgba(255,159,46,.1);
  border-color: var(--c-plan);
}
.cb-pf-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-plan);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.cb-pf-step b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.cb-pf-step p { font-size: 12.5px; color: var(--c-sub); line-height: 1.6; margin: 0; }
.cb-pf-arrow {
  text-align: center;
  color: var(--c-plan);
  font-weight: 700;
  font-size: 14px;
  padding: 2px 0;
}
.cb-tip {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(246,185,59,.08);
  border-left: 4px solid var(--c-brain);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #6b5b2e;
}

.cb-memory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cb-mem-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(47,191,113,.04);
  border-radius: 10px;
  border: 1px solid rgba(47,191,113,.15);
}
.cb-mem-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--c-mem);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-mem-item b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.cb-mem-item p { font-size: 12.5px; color: var(--c-sub); line-height: 1.6; margin: 0; }
@media (max-width: 768px) {
  .cb-memory-grid { grid-template-columns: 1fr; }
}

.cb-executor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cb-exe-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,90,95,.04);
  border-radius: 10px;
  border: 1px solid rgba(255,90,95,.15);
}
.cb-exe-tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--c-exe);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  height: fit-content;
  white-space: nowrap;
}
.cb-exe-item b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.cb-exe-item p { font-size: 12.5px; color: var(--c-sub); line-height: 1.6; margin: 0; }
@media (max-width: 768px) {
  .cb-executor-grid { grid-template-columns: 1fr; }
}

.cb-workflow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-wf-step {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(246,185,59,.04);
  border-radius: 10px;
  border: 1px solid rgba(246,185,59,.15);
  align-items: flex-start;
}
.cb-wf-done {
  background: rgba(47,191,113,.08);
  border-color: var(--c-mem);
}
.cb-wf-phase {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  height: fit-content;
  margin-top: 2px;
}
.cb-wf-step:nth-child(1) .cb-wf-phase, .cb-wf-step:nth-child(6) .cb-wf-phase { background: var(--c-per); }
.cb-wf-step:nth-child(2) .cb-wf-phase { background: var(--c-plan); }
.cb-wf-step:nth-child(3) .cb-wf-phase { background: var(--c-mem); }
.cb-wf-step:nth-child(4) .cb-wf-phase, .cb-wf-step:nth-child(5) .cb-wf-phase { background: var(--c-exe); }
.cb-wf-done .cb-wf-phase { background: var(--c-mem-deep) !important; }
.cb-wf-step b { font-size: 13.5px; display: block; margin-bottom: 3px; }
.cb-wf-step p { font-size: 12.5px; color: var(--c-sub); line-height: 1.6; margin: 0; }

.cb-ref-box {
  padding: 16px 20px;
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
  border: 2px dashed var(--c-brain);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.7;
}
.cb-ref-box ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.cb-ref-box li {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.7;
}

/* ============================================================
 * 组件抢答游戏优化
 * ============================================================ */
.quick-game {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 顶部进度条区域 */
.qg-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qg-progress {
  width: 100%;
  height: 8px;
  background: #f0ede4;
  border-radius: 999px;
  overflow: hidden;
}
.qg-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-brain), #ffd66b);
  border-radius: 999px;
  transition: width .4s ease;
  width: 0%;
}
.qg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qg-count {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-sub);
  background: rgba(0,0,0,.03);
  padding: 4px 12px;
  border-radius: 999px;
}
.qg-score {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-brain-deep);
  background: linear-gradient(135deg, #fff8e6, #ffefc2);
  padding: 5px 16px;
  border-radius: 999px;
  border: 2px solid var(--c-brain);
}

/* 题目区域 */
.qg-body {
  min-height: 280px;
}
.qg-question {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
  border: 2px solid var(--c-brain);
  border-radius: 14px;
  margin-bottom: 16px;
  animation: qgSlideIn .3s ease;
}
@keyframes qgSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.qg-q-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-brain), #ffd66b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qg-q-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
}

/* 选项区域 2x2 网格 */
.qg-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.qg-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 2px solid var(--c-line);
  background: #fff;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
  text-align: left;
}
.qg-opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.qg-opt:active {
  transform: translateY(0);
}
.qg-opt-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.qg-opt-per { border-color: rgba(62,155,255,.3); }
.qg-opt-per .qg-opt-icon { background: var(--c-per); }
.qg-opt-per:hover { border-color: var(--c-per); background: rgba(62,155,255,.04); }

.qg-opt-plan { border-color: rgba(255,159,46,.3); }
.qg-opt-plan .qg-opt-icon { background: var(--c-plan); }
.qg-opt-plan:hover { border-color: var(--c-plan); background: rgba(255,159,46,.04); }

.qg-opt-mem { border-color: rgba(47,191,113,.3); }
.qg-opt-mem .qg-opt-icon { background: var(--c-mem); }
.qg-opt-mem:hover { border-color: var(--c-mem); background: rgba(47,191,113,.04); }

.qg-opt-exe { border-color: rgba(255,90,95,.3); }
.qg-opt-exe .qg-opt-icon { background: var(--c-exe); }
.qg-opt-exe:hover { border-color: var(--c-exe); background: rgba(255,90,95,.04); }

.qg-opt-text {
  font-size: 15.5px;
  font-weight: 700;
}

/* 选项正确/错误状态 */
.qg-opt.correct {
  border-color: var(--c-mem) !important;
  background: rgba(47,191,113,.1) !important;
  box-shadow: 0 0 0 3px rgba(47,191,113,.2);
  animation: qgPulse .5s ease;
}
.qg-opt.wrong {
  border-color: var(--c-exe) !important;
  background: rgba(255,90,95,.08) !important;
  animation: qgShake .4s ease;
}
@keyframes qgPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes qgShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* 反馈区域 */
.qg-feedback {
  min-height: 60px;
}
.qg-fb {
  padding: 14px 18px;
  border-radius: 12px;
  animation: qgFadeIn .3s ease;
}
@keyframes qgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.qg-fb-ok {
  background: rgba(47,191,113,.08);
  border: 2px solid var(--c-mem);
  border-left-width: 5px;
}
.qg-fb-no {
  background: rgba(255,90,95,.06);
  border: 2px solid var(--c-exe);
  border-left-width: 5px;
}
.qg-fb-head {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qg-fb-ok .qg-fb-head { color: var(--c-mem-deep); }
.qg-fb-no .qg-fb-head { color: var(--c-exe-deep); }
.qg-fb-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-ink);
}

/* 完成页面 */
.qg-complete {
  text-align: center;
  padding: 30px 20px;
  animation: qgFadeIn .4s ease;
}
.qg-complete-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brain), #ffd66b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(246,185,59,.4);
}
.qg-complete-title {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 20px;
  color: var(--c-ink);
}
.qg-complete-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}
.qg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qg-stat-num {
  font-size: 28px;
  font-weight: 900;
}
.qg-stat:nth-child(1) .qg-stat-num { color: var(--c-mem-deep); }
.qg-stat:nth-child(2) .qg-stat-num { color: var(--c-exe-deep); }
.qg-stat:nth-child(3) .qg-stat-num { color: var(--c-brain-deep); }
.qg-stat-label {
  font-size: 12.5px;
  color: var(--c-sub);
  font-weight: 600;
}
.qg-complete-rank {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 24px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #fff8e6, #ffefc2);
  border-radius: 999px;
  display: inline-block;
  border: 2px solid var(--c-brain);
}

/* 响应式 */
@media (max-width: 640px) {
  .qg-opts { grid-template-columns: 1fr; }
  .qg-q-text { font-size: 15px; }
  .qg-complete-stats { gap: 16px; }
  .qg-stat-num { font-size: 24px; }
}

/* 抢答游戏常驻按钮 */
.qg-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qg-restart {
  white-space: nowrap;
}

/* ============================================================
 * 小测验优化
 * ============================================================ */
.quiz-game {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 顶部进度条区域 */
.qz-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 70px;
  z-index: 10;
  background: var(--c-card);
  padding: 12px 0 8px;
  border-bottom: 2px solid var(--c-line);
}
.qz-progress {
  width: 100%;
  height: 8px;
  background: #f0ede4;
  border-radius: 999px;
  overflow: hidden;
}
.qz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-brain), #ffd66b);
  border-radius: 999px;
  transition: width .4s ease;
  width: 0%;
}
.qz-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qz-count {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-sub);
  background: rgba(0,0,0,.03);
  padding: 4px 12px;
  border-radius: 999px;
}
.qz-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qz-score {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-brain-deep);
  background: linear-gradient(135deg, #fff8e6, #ffefc2);
  padding: 5px 16px;
  border-radius: 999px;
  border: 2px solid var(--c-brain);
}

/* 题目列表 */
.qz-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.qz-question {
  padding: 18px 20px;
  background: #fff;
  border: 2px solid var(--c-line);
  border-radius: 14px;
  transition: all .2s;
}
.qz-question.qz-correct {
  border-color: var(--c-mem);
  background: rgba(47,191,113,.03);
}
.qz-question.qz-wrong {
  border-color: var(--c-exe);
  background: rgba(255,90,95,.02);
}
.qz-q-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.qz-q-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brain), #ffd66b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.qz-q-text {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  padding-top: 4px;
}

/* 选项 2x2 网格 */
.qz-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.qz-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--c-line);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}
.qz-opt:hover:not(:disabled) {
  border-color: var(--c-brain);
  background: rgba(246,185,59,.04);
  transform: translateY(-1px);
}
.qz-opt:disabled {
  cursor: default;
  opacity: 1;
}
.qz-opt-letter {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f0ede4;
  color: var(--c-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.qz-opt:hover:not(:disabled) .qz-opt-letter {
  background: var(--c-brain);
  color: #fff;
}
.qz-opt.correct {
  border-color: var(--c-mem) !important;
  background: rgba(47,191,113,.08) !important;
}
.qz-opt.correct .qz-opt-letter {
  background: var(--c-mem) !important;
  color: #fff !important;
}
.qz-opt.wrong {
  border-color: var(--c-exe) !important;
  background: rgba(255,90,95,.06) !important;
}
.qz-opt.wrong .qz-opt-letter {
  background: var(--c-exe) !important;
  color: #fff !important;
}

/* 反馈区域 */
.qz-feedback {
  min-height: 0;
}
.qz-fb {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  animation: qzFadeIn .25s ease;
}
@keyframes qzFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.qz-fb-ok {
  background: rgba(47,191,113,.08);
  border: 1px solid var(--c-mem);
  border-left-width: 4px;
  color: #145a32;
}
.qz-fb-no {
  background: rgba(255,90,95,.05);
  border: 1px solid var(--c-exe);
  border-left-width: 4px;
  color: #7b241c;
}

/* 结果区域 */
.qz-result {
  margin-top: 8px;
}
.qz-result-box {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
  border: 2px solid var(--c-brain);
  border-radius: 16px;
  animation: qzFadeIn .4s ease;
}
.qz-result-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brain), #ffd66b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(246,185,59,.4);
}
.qz-result-title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 18px;
}
.qz-result-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 18px;
}
.qz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qz-stat-num {
  font-size: 26px;
  font-weight: 900;
}
.qz-stat:nth-child(1) .qz-stat-num { color: var(--c-mem-deep); }
.qz-stat:nth-child(2) .qz-stat-num { color: var(--c-exe-deep); }
.qz-stat:nth-child(3) .qz-stat-num { color: var(--c-brain-deep); }
.qz-stat-label {
  font-size: 12px;
  color: var(--c-sub);
  font-weight: 600;
}
.qz-result-rank {
  font-size: 17px;
  font-weight: 800;
  padding: 8px 24px;
  background: #fff;
  border-radius: 999px;
  display: inline-block;
  border: 2px solid var(--c-brain);
}

/* 响应式 */
@media (max-width: 640px) {
  .qz-opts { grid-template-columns: 1fr; }
  .qz-q-text { font-size: 14.5px; }
  .qz-result-stats { gap: 18px; }
  .qz-stat-num { font-size: 22px; }
  .qz-header { top: 60px; }
}

/* ============================================================
 * 其他教学模块卡片优化
 * ============================================================ */

/* --- 情境导入：买早餐优化 --- */
.bb-enhanced {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.bb-enhanced .bb-step {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px 16px;
  border-radius: 14px;
  border: 2px solid;
  background: #fff;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.bb-enhanced .bb-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.bb-enhanced .bb-per { border-color: var(--c-per); background: linear-gradient(180deg, #fff 58%, var(--per-tint)); }
.bb-enhanced .bb-plan { border-color: var(--c-plan); background: linear-gradient(180deg, #fff 58%, var(--plan-tint)); }
.bb-enhanced .bb-mem { border-color: var(--c-mem); background: linear-gradient(180deg, #fff 58%, var(--mem-tint)); }
.bb-enhanced .bb-exe { border-color: var(--c-exe); background: linear-gradient(180deg, #fff 58%, var(--exe-tint)); }
.bb-step-num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  z-index: 2;
  box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.14);
}
.bb-per .bb-step-num { background: var(--c-per); }
.bb-plan .bb-step-num { background: var(--c-plan); }
.bb-mem .bb-step-num { background: var(--c-mem); }
.bb-exe .bb-step-num { background: var(--c-exe); }
.bb-enhanced .bb-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 10px;
  margin-top: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.bb-per .bb-icon { background: var(--c-per); }
.bb-plan .bb-icon { background: var(--c-plan); }
.bb-mem .bb-icon { background: var(--c-mem); }
.bb-exe .bb-icon { background: var(--c-exe); }
.bb-enhanced .bb-text {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.bb-enhanced .bb-text b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.bb-enhanced .bb-text span { color: var(--c-sub); font-size: 12.5px; }
.bb-comp-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  margin-top: auto;
}
.bb-per .bb-comp-tag { background: var(--c-per); }
.bb-plan .bb-comp-tag { background: var(--c-plan); }
.bb-mem .bb-comp-tag { background: var(--c-mem); }
.bb-exe .bb-comp-tag { background: var(--c-exe); }
.bb-enhanced .bb-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brain-tint);
  border: 1px solid var(--brain-line);
  color: var(--brain-ink);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.bb-conclusion {
  margin-top: 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
  border: 2px solid var(--c-brain);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: #6b5b2e;
}
@media (max-width: 768px) {
  .bb-enhanced { flex-direction: column; align-items: center; }
  .bb-enhanced .bb-step { max-width: 100%; width: 100%; }
  .bb-enhanced .bb-arrow { transform: rotate(90deg); }
}

/* --- 拆解四问与组件定位表优化 --- */
.fq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.fq-left, .fq-right { min-width: 0; }
.fq-enhanced .fq-item {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 2px solid;
  transition: transform .15s;
}
.fq-enhanced .fq-item:hover { transform: translateX(4px); }
.fq-enhanced .fq-per { border-color: var(--c-per); background: rgba(62,155,255,.04); }
.fq-enhanced .fq-plan { border-color: var(--c-plan); background: rgba(255,159,46,.04); }
.fq-enhanced .fq-mem { border-color: var(--c-mem); background: rgba(47,191,113,.04); }
.fq-enhanced .fq-exe { border-color: var(--c-exe); background: rgba(255,90,95,.04); }
.lt-enhanced .lt-row {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid var(--c-line);
  transition: background .15s;
}
.lt-enhanced .lt-row:hover { background: #faf7f0; }
.lt-enhanced .lt-head {
  background: linear-gradient(135deg, #f8f5ed, #f0ebe0);
  font-weight: 700;
  border: none;
  color: var(--c-ink, #1D1D1F);
}
.lt-comp {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
}
/* 定位表右列的胶囊只占内容宽度（grid 子项默认会被拉伸成整列宽） */
.lt-row .lt-comp { justify-self: start; align-self: center; }
.lt-per { background: var(--c-per); }
.lt-plan { background: var(--c-plan); }
.lt-mem { background: var(--c-mem); }
.lt-exe { background: var(--c-exe); }
.lt-brain { background: var(--c-brain); }
.fq-tip {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(246,185,59,.08);
  border-left: 4px solid var(--c-brain);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #6b5b2e;
}
@media (max-width: 900px) {
  .fq-layout { grid-template-columns: 1fr; }
}

/* --- 五种 Agent 产品对比优化 --- */
.agent-compare-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
/* 共 5 张卡：最后一张跨两列，避免末行只有半张的残缺感 */
.acc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.acc-card {
  border-radius: 14px;
  border: 2px solid;
  overflow: hidden;
  background: #fff;
  transition: transform .2s, box-shadow .2s;
}
.acc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.acc-per { border-color: var(--c-per); }
.acc-plan { border-color: var(--c-plan); }
.acc-mem { border-color: var(--c-mem); }
.acc-exe { border-color: var(--c-exe); }
.acc-brain { border-color: var(--c-brain); }
.acc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
}
.acc-per .acc-head { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.acc-plan .acc-head { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.acc-mem .acc-head { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)); }
.acc-exe .acc-head { background: linear-gradient(135deg, var(--c-exe), var(--c-exe-deep)); }
.acc-brain .acc-head { background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep)); }
.acc-no {
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  opacity: .8;
}
.acc-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acc-name { flex: 1; min-width: 0; }
.acc-kind {
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.4);
  padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
.acc-body {
  padding: 12px 16px;
}
.acc-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.acc-row:last-child { border-bottom: none; }
.acc-label {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  height: fit-content;
  white-space: nowrap;
}
.acc-eye { background: var(--per-tint); color: var(--per-ink); border: 1px solid var(--per-line); }
.acc-hand { background: var(--exe-tint); color: var(--exe-ink); border: 1px solid var(--exe-line); }
.acc-strategy { background: var(--plan-tint); color: var(--plan-ink); border: 1px solid var(--plan-line); }
.acc-value {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-ink);
}
/* 策略流程链：箭头独立成小标记 */
.acc-arrow {
  color: var(--c-dim, #86868B);
  font-weight: 700;
  margin: 0 3px;
}
.acc-conclusion {
  padding: 14px 18px;
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
  border: 2px solid var(--c-brain);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #6b5b2e;
}
@media (max-width: 768px) {
  .agent-compare-cards { grid-template-columns: 1fr; }
  .acc-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* ============================================================
 * 四大实验室通用卡片增强（感知/规划/记忆/执行）
 * ============================================================ */
.card-enhanced {
  position: relative;
  padding: 24px 26px 26px;
  margin-bottom: 24px;
  border-radius: 16px;
  border: 2px solid rgba(0,0,0,.05);
  background: linear-gradient(180deg, #ffffff 0%, #fefcf7 100%);
  box-shadow: 0 4px 16px rgba(70, 55, 20, .08);
  transition: box-shadow .25s, transform .25s, border-color .25s;
  overflow: hidden;
}
.card-enhanced:hover {
  box-shadow: 0 10px 30px rgba(70, 55, 20, .14);
  transform: translateY(-2px);
}
.card-enhanced .card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 16px 0 0 16px;
}
/* 大卡片外框不带颜色：隐藏左侧色条（语义色只保留在卡内小卡片 / 按钮上） */
.card-enhanced .card-accent { display: none; }

.card-enhanced h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .2px;
}
.card-enhanced h2 .chip {
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
/* 卡片序号徽章：由 LabPerception.numberCards() 统一注入，七个栏目连续编号 */
.card-enhanced h2 .card-num {
  flex: 0 0 auto;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; line-height: 1;
  color: var(--c-sub);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.card-enhanced .sub {
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-sub);
  margin-bottom: 16px;
}
.card-enhanced .card-body {
  position: relative;
  z-index: 1;
}

/* 进阶原理卡优化 */
.card-enhanced .deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card-enhanced .deep-item {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(0,0,0,.02);
  border: 1px solid var(--c-line);
  transition: background .15s, border-color .15s;
}
.card-enhanced .deep-item:hover {
  background: rgba(246,185,59,.06);
  border-color: var(--c-brain);
}
.card-enhanced .deep-term {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--c-brain-deep);
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-enhanced .deep-term::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-brain);
  flex-shrink: 0;
}
.card-enhanced .deep-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-ink);
}

/* 实验室头部优化 */
.lab-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
  border-radius: 16px;
  border: 2px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.lab-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(246,185,59,.15) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(30%, -30%);
}
.lab-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  position: relative;
  z-index: 1;
}
.lab-head h1 {
  font-size: 26px;
  font-weight: 900;
  margin: 0;
  letter-spacing: .5px;
}
.lab-head .meta {
  font-size: 13.5px;
  color: var(--c-sub);
  margin-top: 4px;
  font-weight: 600;
}
.lab-head .btn {
  margin-left: auto;
  position: relative;
  z-index: 1;
}

/* 学习目标卡片优化 */
.lesson-goal {
  padding: 20px 24px;
  margin-bottom: 24px;
  border-radius: 14px;
  border-left: 5px solid var(--c-brain);
  background: linear-gradient(135deg, #fffdf6, #fff8e6);
}
.lesson-goal h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--c-brain-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.goal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 目标行必须是「普通文本流」，不能是 flex：
 * flex 会把行内每一段文字、每一个 <b> 都当成独立子项排成一行，
 * 长目标（如「理解规划的质量控制与边界：…」）就会被切成竖排的“假表格列”，
 * 行内还会多出一堆 gap。这里改成块级 + 左侧预留给数字球。 */
.goal-item {
  display: block;
  position: relative;
  padding: 10px 14px 10px 46px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  font-size: 13.5px;
  line-height: 1.7;
  transition: border-color .15s;
}
.goal-item:hover {
  border-color: var(--c-brain);
}
.goal-num {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-brain);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  margin: 0;
}

/* 课堂小结优化 */
.lesson-summary {
  padding: 22px 26px;
  margin-top: 24px;
  border-radius: 16px;
  border: 2px solid var(--c-line);
  background: linear-gradient(135deg, #fffdf6, #fef8e8);
}
.lesson-summary h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--c-brain-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.summary-core {
  padding: 12px 16px;
  background: #fff;
  border-radius: 10px;
  border-left: 4px solid var(--c-brain);
  font-size: 13.5px;
  line-height: 1.8;
  margin-bottom: 14px;
}
.summary-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.sp-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  font-size: 12.5px;
  line-height: 1.7;
  transition: border-color .15s;
}
.sp-item:hover {
  border-color: var(--c-brain);
}
.sp-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-brain);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary-think {
  padding: 12px 16px;
  background: rgba(246,185,59,.1);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: #6b5b2e;
}

/* 响应式 */
@media (max-width: 768px) {
  .card-enhanced { padding: 18px 18px 20px; }
  .card-enhanced h2 { font-size: 17px; }
  .card-enhanced .deep-grid { grid-template-columns: 1fr; }
  .lab-head { flex-wrap: wrap; padding: 16px; }
  .lab-head h1 { font-size: 20px; }
  .lab-head .btn { margin-left: 0; width: 100%; }
  .summary-points { grid-template-columns: 1fr; }
}

/* ============================================================
 * 智能体实验室（playground）卡片优化
 * ============================================================ */
.play-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: stretch;
  height: 82vh;
  min-height: 600px;
}

/* 对话卡片 */
.chat-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #8a5cf6, #6b3fd1);
  color: #fff;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-head .btn-ghost {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.chat-head .btn-ghost:hover {
  background: rgba(255,255,255,.3);
}

/* ---- 运行模式：自动 / 规划 / 问答 ----
 * 三个按钮 = 三种"自主程度"。选中态用该模式自己的强调色，
 * 让"现在这一轮它有多大自主权"一眼可辨。 */
.mode-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin-left: 4px;
  flex-shrink: 0;
}
.mode-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.mode-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.mode-btn.is-on { background: #fff; color: #6b3fd1; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.mode-btn.is-on[data-mode="plan"] { color: var(--c-plan-deep); }
.mode-btn.is-on[data-mode="ask"] { color: var(--c-per-deep); }

/* ---- 模式说明气泡（悬浮出现）----
 * 以前是一条常驻的说明条（.mode-tip）：切模式时文字底色都跟着变，
 * 好处是不会漏看，代价是永久占掉对话区上方一整行。
 * 改成鼠标停在「自动/规划/问答」上、或键盘 Tab 聚焦时才浮出来，读完即走。
 *
 * 必须用 position: fixed + JS 定位：.chat-card 是 overflow: hidden，
 * 挂在卡片内部做绝对定位的气泡会被裁掉。
 * pointer-events: none 让气泡不吃鼠标事件——否则指针从按钮移向气泡的途中
 * 会先触发按钮的 mouseleave，气泡刚出来就闪没了。 */
.mode-pop {
  position: fixed;
  left: 0; top: 0;
  z-index: calc(var(--z-modal) - 1);   /* 压在卡片之上、弹窗之下 */
  max-width: 290px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(29, 29, 31, .95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.62;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
  pointer-events: none;
}
.mode-pop.is-on { opacity: 1; visibility: visible; transform: none; }
/* 小三角：指向被悬浮的那颗按钮，和原生 tooltip 一样能看出"我讲的是它"。
   left 用 --arrow-x：气泡会被视口边缘挤开（见 showModePop 的钳制），
   写死 50% 时三角就指偏了，所以由 JS 按按钮中心算出偏移量。 */
.mode-pop::before {
  content: ""; position: absolute; top: -5px; left: var(--arrow-x, 50%); margin-left: -5px;
  border: 5px solid transparent; border-top: 0; border-bottom-color: rgba(29, 29, 31, .95);
}
.mode-pop.is-above::before { top: auto; bottom: -5px; border-top: 5px solid rgba(29, 29, 31, .95); border-bottom: 0; }
.mode-pop .mp-head { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.mode-pop .mp-head i { font-style: normal; font-weight: 600; font-size: 11px; opacity: .68; margin-left: 6px; }
.mode-pop b { color: #ffd9a0; font-weight: 800; }   /* 气泡里的关键词用暖色提一下 */
.mode-pop .mp-foot {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 11.5px; opacity: .8;
}

/* ---- 规划模式的计划卡 ----
 * 它不是"回答"，是"待确认的动作"，所以外观要明显区别于普通气泡：
 * 规划器的橙色 + 虚线边 + 两颗按钮。
 * 选择器写成 .msg.ai.plan-card：后面的 `.msg.ai` 与本规则权重相同、位置更靠后，
 * 只用 .msg.plan-card 会被它把底色和边框盖掉。 */
.msg.ai.plan-card {
  max-width: 100%;
  width: 100%;
  background: #fffaf2;
  border: 1.5px dashed var(--c-plan);
  border-bottom-left-radius: 4px;
}
.msg.ai.plan-card .who {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--c-plan-deep);
  opacity: 1;
}
.plan-lead { font-weight: 700; color: var(--c-plan-deep); margin-bottom: 8px; }
.plan-steps {
  margin: 0 0 8px;
  padding-left: 0;
  list-style: none;
  counter-reset: pstep;
}
.plan-steps li {
  counter-increment: pstep;
  position: relative;
  padding: 7px 10px 7px 32px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #f2dcbb;
  font-size: 13px;
  line-height: 1.6;
}
.plan-steps li::before {
  content: counter(pstep);
  position: absolute;
  left: 9px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-plan);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-steps li b { color: var(--c-ink); }
.plan-args { display: block; margin-top: 3px; color: #8a8172; font-size: 12px; word-break: break-all; }
.plan-args i { font-style: normal; color: var(--c-plan-deep); font-weight: 700; }
.plan-note {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border-left: 3px solid var(--c-plan);
  color: #6b6152;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.plan-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plan-confirmed,
.plan-dropped { font-size: 12.5px; color: #8a8172; display: inline-flex; align-items: center; gap: 5px; }
.plan-confirmed { color: var(--c-mem-deep); font-weight: 700; }

@media (max-width: 620px) {
  .chat-head { flex-wrap: wrap; }
  .mode-seg { margin-left: 0; order: 3; }
}
.chat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #faf8f3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  position: relative;
  animation: msgIn .25s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #8a5cf6, #7c4fe8);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.ai {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--c-line);
  border-bottom-left-radius: 4px;
}
.msg .who {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: .7;
}
.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid var(--c-line);
}
.chat-input input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--c-line);
  border-radius: 999px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.chat-input input:focus {
  border-color: #8a5cf6;
}

/* 管线面板卡片 */
.pipe-card {
  padding: 20px 22px !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  top: auto;
}
.pipe-card h2 {
  font-size: 17px !important;
  font-weight: 800;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pipe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.pipe-arrow {
  text-align: center;
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1;
}
.pipe-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--c-line);
  background: #fff;
  transition: all .25s;
  opacity: .55;
}
.pipe-stage.on {
  opacity: 1;
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.pipe-stage .picon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.pipe-per .picon { background: var(--c-per); }
.pipe-plan .picon { background: var(--c-plan); }
.pipe-mem .picon { background: var(--c-mem); }
.pipe-exe .picon { background: var(--c-exe); }
.pipe-ans .picon { background: var(--c-brain); }
.pipe-stage.on.pipe-per { border-color: var(--c-per); background: rgba(62,155,255,.06); }
.pipe-stage.on.pipe-plan { border-color: var(--c-plan); background: rgba(255,159,46,.06); }
.pipe-stage.on.pipe-mem { border-color: var(--c-mem); background: rgba(47,191,113,.06); }
.pipe-stage.on.pipe-exe { border-color: var(--c-exe); background: rgba(255,90,95,.06); }
.pipe-stage.on.pipe-ans { border-color: var(--c-brain); background: rgba(246,185,59,.08); }
.pipe-stage .ptitle {
  font-weight: 800;
  font-size: 14px;
}
.pipe-stage .pstatus {
  font-size: 11.5px;
  color: var(--c-sub);
  margin-top: 2px;
}

/* 上下文检查框 */
.inspect-box {
  margin-top: 12px;
  padding: 12px;
  background: #faf8f3;
  border-radius: 10px;
  border: 1px solid var(--c-line);
}

/* 组件开关 */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  margin-bottom: 8px;
  transition: border-color .15s;
}
.toggle-row:hover {
  border-color: #8a5cf6;
}
.t-label {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .25s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.switch input:checked + .slider {
  background-color: #8a5cf6;
}
.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* 响应式 */
@media (max-width: 900px) {
  .play-wrap { grid-template-columns: 1fr; }
  .chat-msgs { min-height: 240px; max-height: 320px; }
}

/* ============================================================
 * 起源实验室（L01 / L02）专用样式
 * ============================================================ */

/* 课程分隔条 */
.lesson-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 18px;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--c-ori), var(--c-ori-deep));
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(142,68,173,.25);
}
.ld-num {
  background: rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
}
.ld-title { font-size: 20px; font-weight: 800; }
.ld-desc { font-size: 13px; opacity: .9; margin-left: auto; }

/* 金色提示框 */
.gold-box {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF8E7, #FFF3D6);
  border-left: 4px solid var(--c-brain);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #6b5b2e;
}
.gold-box b { color: var(--c-brain-deep); }

/* ============================================================
 * 起源 · ① 小明的一天 —— 一日 AI 时间轴
 * 横向时间轨道（光线渐变）+ 详情面板：点时间点，看那一刻 AI 在做什么
 * ============================================================ */
.dayrail { display: flex; flex-direction: column; gap: 12px; }
.dayrail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #5a5548; }
.drh-count { background: #f6f1fb; border-radius: 999px; padding: 5px 14px; display: inline-flex; align-items: center; gap: 6px; }
.drh-count b { color: var(--c-ori-deep); font-size: 15px; }
.drh-hint { margin-left: auto; color: var(--c-sub); font-weight: 600; }
.dayrail-track { position: relative; display: flex; gap: 4px; padding: 6px 2px 2px; overflow-x: auto; }
.dayrail-track::before {
  content: ''; position: absolute; left: 30px; right: 30px; top: 46px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #9fd0ff 0%, #ffd479 42%, #ff9f6e 68%, #8a5cf6 100%);
  opacity: .5;
}
.daystop {
  position: relative; z-index: 1; flex: 1 0 104px; min-width: 104px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 2px 2px 4px; font-family: inherit; cursor: pointer; border-radius: 12px;
}
.ds-time { font-size: 12.5px; font-weight: 800; color: #7a6a45; letter-spacing: .3px; }
.ds-dot {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--c-ori); border: 2px solid #e3d9ef; transition: all var(--t-fast, .15s);
}
.ds-name { font-size: 12.5px; font-weight: 700; color: #6a6a78; text-align: center; line-height: 1.3; }
.daystop:hover .ds-dot { border-color: var(--c-ori); transform: translateY(-2px); }
.daystop:focus-visible { outline: 3px solid rgba(142,68,173,.35); outline-offset: 2px; }
.daystop.is-on .ds-dot { background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep)); color: #fff; border-color: var(--c-ori-deep); box-shadow: 0 4px 12px rgba(142,68,173,.28); }
.daystop.is-on .ds-name, .daystop.is-on .ds-time { color: var(--c-ori-deep); }
.scene-panel { background: linear-gradient(135deg, #faf6ff, #fff); border: 2px solid #e9dff5; border-radius: 14px; padding: 14px 16px; min-height: 98px; }
.scene-panel.sp-in { animation: flowIn .22s ease; }
.sp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-time { background: var(--c-ori); color: #fff; border-radius: 8px; padding: 2px 10px; font-size: 13px; font-weight: 800; }
.sp-title { font-size: 17px; font-weight: 900; color: var(--c-ink, #2B2B33); }
.sp-tag { background: #fff3d6; color: #a8762a; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; }
.sp-desc { margin-top: 9px; font-size: 14.5px; line-height: 1.85; color: #4a4a55; }
.dayrail-foot { font-size: 13px; font-weight: 700; color: #5a5548; background: #f7f9ff; border-radius: 10px; padding: 9px 14px; line-height: 1.75; }
.dayrail-foot b { color: var(--c-ori-deep); }

/* ============================================================
 * 起源 · ② AI 发展史 —— 四幕时间轴
 * 事件卡统一形态：白底卡片，只靠「年份徽章颜色」区分热潮/寒冬/基石
 * （与图例三色一一对应）；每幕按卡数定列，避免“N+1”孤行；
 * 详情点击展开（不依赖 hover）
 * ============================================================ */
.era-stack { display: flex; flex-direction: column; gap: 14px; }
.era-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; }
.el-item { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 12px; }
.el-rise { background: #fff1e2; color: #b5651d; }
.el-fall { background: #eef1f5; color: #5b6b7c; }
.el-base { background: #f3eefb; color: var(--c-ori-deep); }
.el-hint { margin-left: auto; color: var(--c-sub); font-weight: 600; }
.era { border: 1.5px solid var(--c-line); border-radius: 14px; padding: 12px 14px; background: var(--c-card); }
.era-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.era-no { background: var(--c-ori); color: #fff; border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 800; }
.era-title { font-size: 16px; font-weight: 900; color: var(--c-ink, #2B2B33); }
.era-range { font-size: 12.5px; font-weight: 800; color: var(--c-ori-deep); background: rgba(142,68,173,.1); border-radius: 999px; padding: 3px 11px; }
.era-note { font-size: 12.5px; color: var(--c-sub); font-weight: 600; }
.era-row { display: flex; gap: 9px; flex-wrap: wrap; }   /* 案例手风琴仍在用 */
/* 事件卡行：2 卡 → 2 列，3/6 卡 → 3 列（第四幕 6 张排成整齐的 3×2） */
.mile-row {
  display: grid; gap: 9px;
  grid-template-columns: repeat(3, 1fr);
}
.mile-row[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.mile-row[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
.mile {
  text-align: left; font-family: inherit; cursor: pointer;
  border: 1.5px solid var(--c-line); background: var(--c-card); border-radius: 12px;
  padding: 11px 12px 10px;
  display: flex; flex-direction: column; gap: 6px; transition: all var(--t-fast, .15s);
}
/* 年份徽章：统一形态，三种颜色对应图例 */
.mile-year {
  align-self: flex-start; font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 2px 10px;
  background: #f3eefb; color: var(--c-ori-deep);
}
.mile.tone-rise .mile-year { background: #fff1e2; color: #b5651d; }
.mile.tone-fall .mile-year { background: #eef1f5; color: #5b6b7c; }
.mile-title { font-size: 14px; font-weight: 800; color: var(--c-ink, #2B2B33); display: flex; align-items: flex-start; gap: 6px; line-height: 1.45; }
.mile-title svg { flex-shrink: 0; margin-top: 1px; color: var(--c-ori-deep); }
.mile.tone-fall .mile-title svg { color: #5b6b7c; }
.mile-key { font-size: 12px; color: #6a6a78; line-height: 1.55; }
.mile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); border-color: #cdbfe6; }
.mile:focus-visible { outline: 3px solid rgba(142,68,173,.35); outline-offset: 2px; }
.mile.is-on { border-color: var(--c-ori); background: #faf7ff; box-shadow: 0 0 0 3px rgba(142,68,173,.12); }
.era-detail { display: none; }
.era-detail.is-open { display: block; margin-top: 11px; }
.ed-inner { background: #faf7ff; border-left: 4px solid var(--c-ori); border-radius: 10px; padding: 11px 14px; }
.ed-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14.5px; color: var(--c-ink, #2B2B33); }
.ed-key { background: var(--c-brain); color: var(--c-brain-deep); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; }
.ed-desc { margin-top: 7px; font-size: 13.5px; line-height: 1.85; color: #4a4a55; }

@media (max-width: 900px) {
  .dayrail-track::before { left: 22px; right: 22px; top: 44px; }
  .daystop { flex: 0 0 92px; min-width: 92px; }
  .drh-hint { margin-left: 0; flex-basis: 100%; }
  .mile-row { grid-template-columns: repeat(2, 1fr); }
  .era-note { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .mile-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-panel.sp-in { animation: none; }
  .mile:hover, .daystop:hover .ds-dot { transform: none; }
}

/* ============================================================
 * 起源 · ③ 三大支柱 / ⑦ 职业四阶段 / ⑨ 案例手风琴 / ⑯ 思辨切换
 * 统一的「选择器 + 详情面板」交互：点谁看谁，避免整版文字墙与超长平铺
 * ============================================================ */
.pillar-pick { display: flex; flex-direction: column; gap: 12px; }
.pillar-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pillar-stop {
  flex: 1 1 200px; min-width: 178px; display: flex; align-items: center; gap: 11px;
  text-align: left; font-family: inherit; cursor: pointer;
  background: #fff; border: 2px solid var(--c-line); border-radius: 14px; padding: 11px 13px;
  transition: all var(--t-fast, .15s);
}
.ps-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pp-per .ps-icon, .ps-mini.pp-per { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.pp-plan .ps-icon, .ps-mini.pp-plan { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.pp-exe .ps-icon, .ps-mini.pp-exe { background: linear-gradient(135deg, var(--c-exe), var(--c-exe-deep)); }
.ps-text { min-width: 0; }
.ps-title { display: block; font-weight: 900; font-size: 14.5px; color: var(--c-ink, #2B2B33); }
.ps-analogy { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--c-sub); }
.pillar-stop:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.pillar-stop:focus-visible { outline: 3px solid rgba(142,68,173,.35); outline-offset: 2px; }
.pillar-stop.is-on { border-color: var(--c-ori); box-shadow: 0 0 0 3px rgba(142,68,173,.13); }
.pillar-stop.is-on .ps-title { color: var(--c-ori-deep); }
.ps-mini { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pp-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pp-label { font-size: 12.5px; font-weight: 800; color: var(--c-ori-deep); background: #f3eefb; border-radius: 999px; padding: 4px 12px; }
.pp-item { background: #fff; border: 1.5px solid var(--c-line); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: #4a4a55; }
.pp-num { margin-top: 10px; font-size: 13px; font-weight: 600; color: #5a5548; background: #fdf8ec; border-radius: 10px; padding: 8px 12px; line-height: 1.75; }
.pp-num b { color: var(--c-brain-deep); }

.stage-tabs { display: flex; gap: 9px; flex-wrap: wrap; }
.stage-tab {
  flex: 1 1 160px; min-width: 150px; display: flex; align-items: center; gap: 9px;
  font-family: inherit; cursor: pointer; text-align: left;
  background: #fff; border: 2px solid var(--c-line); border-radius: 12px; padding: 9px 12px;
  transition: all var(--t-fast, .15s);
}
.stt-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; background: var(--c-ori); }
.st-gone .stt-icon { background: linear-gradient(135deg, #8b93a3, #5b6b7c); }
.st-going .stt-icon { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.st-new .stt-icon { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)); }
.st-future .stt-icon { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
/* 职业演变阶段标签：名称 + 数量两级信息 */
#jobs-tabs .stt-name { font-size: var(--fs-base); }
#jobs-tabs .stt-count { font-size: var(--fs-xs); font-weight: 600; color: var(--c-dim); }
.ttab-movie .stt-icon { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.ttab-pred .stt-icon { background: linear-gradient(135deg, var(--c-brain), var(--c-brain-deep)); }
.ttab-real .stt-icon { background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep)); }
.stt-text { min-width: 0; }
.stt-name { display: block; font-weight: 800; font-size: 13.5px; color: var(--c-ink, #2B2B33); }
.stt-count { display: block; font-size: 11.5px; font-weight: 700; color: var(--c-sub); }
.stage-tab:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.stage-tab:focus-visible { outline: 3px solid rgba(142,68,173,.35); outline-offset: 2px; }
.stage-tab.is-on { border-color: var(--c-ori); box-shadow: 0 0 0 3px rgba(142,68,173,.13); }
.stage-tab.is-on .stt-name { color: var(--c-ori-deep); }
.stage-panel { margin-top: 12px; }
.stage-panel.sp-in { animation: flowIn .22s ease; }

/* ============================================================
 * ⑨ 深度思考：精简版案例手风琴（大字号 · 标签行式详情）
 * 案例卡只留三行信息；详情是「标签 + 大字」的清单行，投屏可读
 * ============================================================ */
.case-row { gap: 10px; }
.case-chip {
  flex: 1 1 200px; min-width: 180px; display: flex; align-items: center; gap: 11px;
  font-family: inherit; cursor: pointer; text-align: left;
  background: #fff; border: 2px solid var(--c-line); border-radius: 14px; padding: 11px 13px;
  transition: all var(--t-fast, .15s);
}
.cc-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-text { min-width: 0; }
.cc-meta { display: block; font-size: 12px; font-weight: 800; color: var(--c-ori-deep); letter-spacing: .3px; }
.cc-title { display: block; margin-top: 2px; font-size: 15.5px; font-weight: 900; color: var(--c-ink, #2B2B33); line-height: 1.4; }
.case-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(142,68,173,.12); }
.case-chip:focus-visible { outline: 3px solid rgba(142,68,173,.35); outline-offset: 2px; }
.case-chip.is-on { border-color: var(--c-ori); box-shadow: 0 0 0 3px rgba(142,68,173,.14); }
.case-chip.is-on .cc-title { color: var(--c-ori-deep); }

.case-detail { background: #fff; border: 2px solid #e9dff5; border-radius: 14px; padding: 4px 18px; }
.case-detail.sp-in { animation: flowIn .22s ease; }
.cd-row { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; }
.cd-row + .cd-row { border-top: 1px dashed var(--c-line); }
.cd-label {
  flex-shrink: 0; width: 122px; text-align: center; margin-top: 2px;
  font-size: 13px; font-weight: 800; border-radius: 999px; padding: 6px 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.cd-good .cd-label { background: #e5f6ec; color: var(--c-mem-deep); }
.cd-worry .cd-label { background: #fdeaea; color: var(--c-exe-deep); }
.cd-reply .cd-label { background: #fdf3d8; color: var(--c-brain-deep); }
.cd-think .cd-label { background: #f3eefb; color: var(--c-ori-deep); }
.cd-row p { margin: 0; font-size: 15.5px; line-height: 1.9; color: #3c3c46; }
.cd-reply p { color: #6b5b2e; }
.cd-think p { font-weight: 800; color: var(--c-ink, #2B2B33); }

/* 汇总两列清单：字号同步提升 */
.face-summary .fs-title { font-size: 16px; }
.face-summary .fs-item { font-size: 14.5px; line-height: 1.95; }

@media (max-width: 900px) {
  .case-chip { flex: 1 1 100%; }
  .cd-row { flex-direction: column; gap: 7px; padding: 13px 0; }
  .cd-label { width: auto; align-self: flex-start; padding: 5px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-detail.sp-in { animation: none; }
  .case-chip:hover { transform: none; }
}
.case-acc .era-row { margin-bottom: 11px; }
.ed-dilemma { background: #fff4f4; border-left: 3px solid var(--c-exe); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.ed-think { background: #f5f0ff; border-left: 3px solid var(--c-ori); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }

/* ⑯ 现实卡：原 11px 小字投屏看不清，提到 13.5px */
.reality-card .rc-detail { font-size: 13.5px; line-height: 1.85; color: #4a4a55; }

@media (max-width: 900px) {
  .pillar-stop { flex: 1 1 100%; }
  .stage-tab { flex: 1 1 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-panel.sp-in { animation: none; }
  .pillar-stop:hover, .stage-tab:hover { transform: none; }
}



/* 图灵测试 */
.turing-question {
  background: rgba(142,68,173,.06);
  border: 1.5px dashed var(--c-ori);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ori-deep);
  margin-bottom: 14px;
}
.turing-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.turing-opt {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 14px;
  transition: all .2s;
}
.turing-opt:hover { border-color: var(--c-ori); }
.to-label {
  font-weight: 800;
  color: var(--c-ori-deep);
  font-size: 14px;
  margin-bottom: 8px;
  background: rgba(142,68,173,.1);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
}
.to-text {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 10px;
  min-height: 80px;
}
.to-feedback { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.turing-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.turing-hint { font-size: 13px; color: var(--c-sub); }

/* 对比表格 */
.compare-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #eee;
}
.ct-head, .ct-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
}
.ct-head {
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  color: #fff;
  font-weight: 700;
}
.ct-head > div { padding: 10px 14px; text-align: center; }
.ct-row { border-top: 1px solid #eee; }
.ct-row > div { padding: 10px 14px; font-size: 13.5px; line-height: 1.6; }
.ct-dim {
  font-weight: 700;
  color: var(--c-ori-deep);
  background: rgba(142,68,173,.05);
  display: flex;
  align-items: center;
}
.ct-chat { background: rgba(62,155,255,.03); }
.ct-agent { background: rgba(246,185,59,.05); }

/* 新职业网格 */
.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.job-card {
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all .2s;
}
.job-card:hover {
  border-color: var(--c-ori);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(142,68,173,.15);
}
.job-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  margin: 0 auto 10px;
}
.job-title { font-weight: 800; font-size: 15px; color: var(--c-ori-deep); margin-bottom: 6px; }
.job-desc { font-size: 12.5px; color: #666; line-height: 1.6; margin-bottom: 8px; }
.job-salary { font-size: 12px; font-weight: 700; color: var(--c-brain-deep); background: rgba(246,185,59,.15); padding: 3px 8px; border-radius: 6px; display: inline-block; }

/* AI 伦理讨论 */
.ethics-list { display: flex; flex-direction: column; gap: 12px; }
.ethics-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #eee;
  border-left: 4px solid var(--c-exe);
  border-radius: 0 10px 10px 0;
}
.ethics-num {
  width: 28px; height: 28px;
  background: var(--c-exe);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.ethics-q { font-weight: 700; font-size: 14.5px; color: var(--c-ink); margin-bottom: 4px; line-height: 1.6; }
.ethics-hint { font-size: 12.5px; color: var(--c-sub); line-height: 1.5; }

/* 6 大领域卡片 */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.domain-card {
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  padding: 16px;
  transition: all .2s;
}
.domain-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.dc-head {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-per .dc-head { color: var(--c-per-deep); border-color: var(--c-per); }
.dc-plan .dc-head { color: var(--c-plan-deep); border-color: var(--c-plan); }
.dc-mem .dc-head { color: var(--c-mem-deep); border-color: var(--c-mem); }
.dc-exe .dc-head { color: var(--c-exe-deep); border-color: var(--c-exe); }
.dc-brain .dc-head { color: var(--c-brain-deep); border-color: var(--c-brain); }
.dc-ori .dc-head { color: var(--c-ori-deep); border-color: var(--c-ori); }
.dc-products, .dc-example, .dc-ability { font-size: 13px; line-height: 1.6; margin-bottom: 6px; color: #555; }
.dc-products b, .dc-example b, .dc-ability b { color: var(--c-ink); }

/* 观察空间 vs 动作空间 */
.space-compare {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}
.space-box {
  flex: 1;
  border-radius: 12px;
  padding: 16px;
  border: 2px solid;
}
.sb-obs { border-color: var(--c-per); background: rgba(62,155,255,.04); }
.sb-act { border-color: var(--c-exe); background: rgba(255,90,95,.04); }
.sb-title { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.sb-obs .sb-title { color: var(--c-per-deep); }
.sb-act .sb-title { color: var(--c-exe-deep); }
.sb-desc { font-size: 13px; line-height: 1.7; color: #555; margin-bottom: 10px; }
.sb-examples { font-size: 13px; line-height: 1.8; color: #444; background: rgba(255,255,255,.7); padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; }
.sb-note { font-size: 12px; color: var(--c-sub); font-style: italic; line-height: 1.5; }
.space-arrow {
  display: flex;
  align-items: center;
  font-size: 28px;
  color: var(--c-brain);
  font-weight: 800;
}

/* 推荐算法演示 */
.rec-demo { background: #fff; border: 1.5px solid #eee; border-radius: 12px; padding: 16px; }
.rec-title { font-weight: 700; font-size: 14px; color: var(--c-ori-deep); margin-bottom: 12px; }
.rec-table { border-radius: 8px; overflow: hidden; border: 1px solid #eee; margin-bottom: 14px; }
.rec-row { display: grid; grid-template-columns: 90px repeat(5, 1fr); }
.rec-head { background: var(--c-ori); color: #fff; font-weight: 700; }
.rec-cell { padding: 8px 6px; text-align: center; font-size: 12.5px; border-top: 1px solid #eee; }
.rec-head .rec-cell { border-top: none; }
.rec-user { font-weight: 700; color: var(--c-ori-deep); background: rgba(142,68,173,.05); text-align: left; padding-left: 10px; }
.rec-high { background: rgba(47,191,113,.15); color: var(--c-mem-deep); font-weight: 700; }
.rec-low { background: rgba(255,90,95,.1); color: var(--c-exe-deep); }
.rec-mid { background: rgba(246,185,59,.1); }
.rec-analysis { display: flex; flex-direction: column; gap: 8px; }
.ra-step {
  padding: 10px 14px;
  background: rgba(142,68,173,.04);
  border-left: 3px solid var(--c-ori);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.7;
}
.ra-step b { color: var(--c-ori-deep); }

/* 信息茧房 */
.cocoon-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cocoon-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 10px;
}
.cocoon-num {
  width: 26px; height: 26px;
  background: var(--c-exe);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.cocoon-title { font-weight: 700; font-size: 14.5px; color: var(--c-exe-deep); margin-bottom: 4px; }
.cocoon-desc { font-size: 13px; color: #555; line-height: 1.6; }
.privacy-tips {
  background: linear-gradient(135deg, rgba(47,191,113,.06), rgba(47,191,113,.03));
  border: 1.5px solid var(--c-mem);
  border-radius: 12px;
  padding: 14px 16px;
}
.pt-title { font-weight: 800; color: var(--c-mem-deep); font-size: 15px; margin-bottom: 10px; }
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.pt-item { font-size: 13px; line-height: 1.6; color: #444; padding: 4px 0; }

/* 能力圈游戏 */
.ability-agent {
  text-align: center;
  font-size: 18px;
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(142,68,173,.06);
  border-radius: 10px;
}
.ability-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.ability-col {
  border-radius: 12px;
  padding: 14px;
  border: 2px solid;
}
.ac-can { border-color: var(--c-mem); background: rgba(47,191,113,.04); }
.ac-cannot { border-color: var(--c-exe); background: rgba(255,90,95,.04); }
/* 标题：图标徽章 + 文字（✅❌ emoji 换成 U.icon 矢量徽章） */
.ac-title {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-weight: 800; font-size: 15px; margin-bottom: 10px;
}
.ac-can .ac-title { color: var(--c-mem-deep); }
.ac-cannot .ac-title { color: var(--c-exe-deep); }
.ac-tbadge {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.ac-can .ac-tbadge { background: linear-gradient(140deg, var(--c-mem), var(--c-mem-deep)); box-shadow: 0 3px 8px rgba(47,191,113,.3); }
.ac-cannot .ac-tbadge { background: linear-gradient(140deg, var(--c-exe), var(--c-exe-deep)); box-shadow: 0 3px 8px rgba(255,90,95,.3); }
/* 条目：check/xmark 小图标 + 文字（替代左侧色条，图标即表意） */
.ac-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.ac-item .icon { flex-shrink: 0; margin-top: 2.5px; }
.ac-can .ac-item .icon { color: var(--c-mem-deep); }
.ac-cannot .ac-item .icon { color: var(--c-exe-deep); }
.ability-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.ability-hint { font-size: 13px; color: var(--c-sub); }

/* 拆解工作坊 */
.disassemble-steps { display: flex; flex-direction: column; gap: 12px; }
.ds-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
}
.ds-num {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.ds-content { flex: 1; }
.ds-title { font-weight: 800; font-size: 15px; color: var(--c-ori-deep); margin-bottom: 4px; }
.ds-desc { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 8px; }
.ds-input {
  min-height: 50px;
  padding: 8px 12px;
  border: 1.5px dashed var(--c-ori);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink);
  outline: none;
  transition: border-color .2s;
}
.ds-input:focus { border-color: var(--c-ori-deep); border-style: solid; }
.ds-input:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
}

/* 小测验 */
.quiz-box {
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  padding: 16px;
}
.quiz-score {
  font-weight: 800;
  font-size: 16px;
  color: var(--c-ori-deep);
  margin-bottom: 8px;
}
.quiz-progress {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.quiz-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-ori), var(--c-brain));
  border-radius: 3px;
  transition: width .3s;
}
.quiz-q {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--c-ink);
}
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  text-align: left;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.5;
}
.quiz-opt:hover { border-color: var(--c-ori); background: rgba(142,68,173,.04); }
.quiz-opt.correct { border-color: var(--c-mem); background: rgba(47,191,113,.1); color: var(--c-mem-deep); font-weight: 700; }
.quiz-opt.wrong { border-color: var(--c-exe); background: rgba(255,90,95,.08); animation: shake .4s; }
.quiz-feedback { margin-top: 12px; font-size: 13.5px; line-height: 1.7; }
.quiz-result { text-align: center; padding: 20px; }
.qr-score { font-size: 36px; font-weight: 800; color: var(--c-ori-deep); }
.qr-pct { font-size: 20px; font-weight: 700; color: var(--c-brain-deep); margin: 6px 0; }
.qr-msg { font-size: 15px; color: #666; margin-bottom: 16px; }

/* 课堂小结（外框中性；标题颜色随所在实验室的语义色，见文末 §11） */
.lesson-summary {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
}
.ls-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-ori-deep);
  margin-bottom: 12px;
}
.ls-content { display: flex; flex-direction: column; gap: 10px; }
.ls-item {
  font-size: 13.5px;
  line-height: 1.7;
  color: #444;
  padding: 8px 12px;
  background: rgba(255,255,255,.7);
  border-radius: 8px;
  border-left: 3px solid var(--c-ori);
}
.ls-item b { color: var(--c-ori-deep); }

/* 起源实验室响应式 */
@media (max-width: 900px) {
  .turing-options { grid-template-columns: 1fr; }
  .space-compare { flex-direction: column; }
  .space-arrow { transform: rotate(90deg); justify-content: center; }
  .ability-columns { grid-template-columns: 1fr; }
  .pt-grid { grid-template-columns: 1fr; }
  .ct-head, .ct-row { grid-template-columns: 80px 1fr 1fr; }
  .ld-desc { display: none; }
  .rec-row { grid-template-columns: 70px repeat(5, 1fr); }
  .rec-cell { font-size: 11px; padding: 6px 2px; }
}

/* ===== 起源实验室：新增卡片样式 ===== */

/* --- ③ AI 三大支柱 --- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 16px 0;
}
.pillar-card {
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  border: 2px solid #e8e8e8;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.pillar-card.pc-per { border-top: 4px solid var(--c-per); }
.pillar-card.pc-plan { border-top: 4px solid var(--c-plan); }
.pillar-card.pc-exe { border-top: 4px solid var(--c-exe); }
.pc-head {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-analogy {
  font-size: 13px;
  color: #666;
  background: #f8f8f8;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.pc-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #333;
}
.pc-examples {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  background: #fafafa;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.pc-numbers {
  font-size: 12px;
  color: var(--c-sub);
  border-top: 1px dashed #ddd;
  padding-top: 8px;
}

/* --- ④ 大模型工作原理 6步流程 --- */
.llm-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.llm-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  transition: transform 0.2s;
}
.llm-step:hover {
  transform: translateX(4px);
  border-color: var(--c-ori);
}
.llm-step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  bottom: -14px;
  left: 28px;
  color: var(--c-ori);
  font-size: 16px;
  font-weight: bold;
  z-index: 1;
}
.ls-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.ls-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ori);
}
.ls-content {
  flex: 1;
}
.ls-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}
.ls-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 4px;
}
.ls-analogy {
  font-size: 12px;
  color: var(--c-sub);
  background: #f8f8f8;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* --- ⑪ AI 产品全景 --- */
.product-categories {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 16px 0;
}
.prod-cat {
  border-radius: 12px;
  padding: 16px;
  background: #fafafa;
  border-left: 4px solid #ccc;
}
.prod-cat.pc-per { border-left-color: var(--c-per); }
.prod-cat.pc-plan { border-left-color: var(--c-plan); }
.prod-cat.pc-mem { border-left-color: var(--c-mem); }
.prod-cat.pc-exe { border-left-color: var(--c-exe); }
.prod-cat.pc-brain { border-left-color: var(--c-brain); }
.prod-cat.pc-ori { border-left-color: var(--c-ori); }
.pcat-head {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pcat-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}
.pcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.prod-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 10px 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.prod-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.prod-name {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}
.prod-company {
  font-size: 11px;
  color: var(--c-sub);
  margin-bottom: 4px;
}
.prod-feature {
  font-size: 12px;
  line-height: 1.5;
  color: #555;
}

/* --- ⑫ AI 四代进化 --- */
.evolution-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.evo-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: transform 0.2s;
}
.evo-card:hover {
  transform: translateY(-3px);
}
.evo-card.evo-l1 { border-top: 4px solid #bbb; }
.evo-card.evo-l2 { border-top: 4px solid var(--c-per); }
.evo-card.evo-l3 { border-top: 4px solid var(--c-plan); }
.evo-card.evo-l4 { border-top: 4px solid var(--c-ori); background: linear-gradient(180deg, #faf5ff 0%, #fff 40%); }
.evo-level {
  position: absolute;
  top: -12px;
  right: 12px;
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}
.evo-card.evo-l4 .evo-level {
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
}
.evo-icon {
  text-align: center;
  margin-bottom: 6px;
  color: #666;
}
.evo-card.evo-l4 .evo-icon { color: var(--c-ori); }
.evo-title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
  color: #222;
}
.evo-era {
  font-size: 11px;
  color: var(--c-sub);
  text-align: center;
  margin-bottom: 10px;
}
.evo-ability, .evo-examples, .evo-tech, .evo-limit {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 6px;
  color: #444;
}
.evo-limit {
  color: #c0392b;
  background: #fdf0ef;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 0;
}

/* --- 响应式 --- */
@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .evolution-timeline { grid-template-columns: repeat(2, 1fr); }
  .pcat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .evolution-timeline { grid-template-columns: 1fr; }
}

/* ===== 起源实验室：深度思辨卡片样式 ===== */

/* --- ⑩ 人类该如何面对 AI --- */
.face-cases {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}
.face-case {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid var(--c-ori);
}
.fc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fc-num {
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.fc-icon { color: var(--c-ori); display: flex; }
.fc-title { font-size: 16px; font-weight: 700; color: #222; }
.fc-field {
  font-size: 11px;
  background: #f0e6f7;
  color: var(--c-ori-deep);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.fc-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 8px;
}
.fc-dilemma {
  font-size: 13px;
  line-height: 1.7;
  color: #8B0000;
  background: #fff5f5;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.fc-think {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  background: #f8f8f8;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #ccc;
}
.face-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
.fs-col {
  background: #fafafa;
  border-radius: 10px;
  padding: 14px;
}
.fs-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--c-ori-deep);
}
.fs-list { display: flex; flex-direction: column; gap: 4px; }
.fs-item { font-size: 12px; line-height: 1.6; color: #555; }

/* --- ⑲ AI 有意识吗？终极思辨 --- */
.consciousness-section {
  margin: 18px 0;
}
.cs-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ori-deep);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #f0e6f7;
}
.movie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.movie-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 12px;
  transition: transform 0.15s;
}
.movie-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.mc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}
.mc-year {
  font-size: 10px;
  color: var(--c-sub);
  background: #f5f5f5;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: auto;
}
.mc-plot {
  font-size: 11px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 6px;
}
.mc-lesson {
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-ori-deep);
  background: #faf5ff;
  padding: 6px 8px;
  border-radius: 6px;
}
.prediction-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pred-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 12px 14px;
}
.pc-person {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}
.pc-role {
  font-size: 11px;
  color: var(--c-sub);
  font-weight: 400;
}
.pc-quote {
  font-size: 13px;
  line-height: 1.7;
  color: #333;
  font-style: italic;
  padding: 6px 10px;
  background: #fafafa;
  border-left: 3px solid var(--c-ori);
  border-radius: 0 6px 6px 0;
  margin-bottom: 6px;
}
.pc-stance {
  font-size: 11px;
  color: #666;
  font-weight: 600;
}
.reality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.reality-card {
  background: linear-gradient(180deg, #faf5ff 0%, #fff 50%);
  border: 1px solid #e8d5f5;
  border-radius: 10px;
  padding: 14px;
}
.rc-q {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ori-deep);
  margin-bottom: 6px;
}
.rc-a {
  font-size: 15px;
  color: #222;
  margin-bottom: 8px;
}
.rc-detail {
  font-size: 11px;
  line-height: 1.7;
  color: #555;
}
.final-question {
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 16px;
  text-align: center;
}

/* --- 响应式 --- */
@media (max-width: 900px) {
  .face-summary { grid-template-columns: 1fr; }
  .movie-grid { grid-template-columns: repeat(2, 1fr); }
  .reality-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .movie-grid { grid-template-columns: 1fr; }
}

/* ===== 起源实验室：大模型原理卡片优化版样式 ===== */

/* 覆盖旧的垂直流程样式 */
.llm-flow { display: none; }

/* --- 顶部总览条 --- */
.llm-overview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}
.llm-ov-box {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.llm-ov-input { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.llm-ov-understand { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.llm-ov-generate { background: #f3e5f5; color: #7b1fa2; border: 1px solid #ce93d8; }
.llm-ov-output { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.llm-ov-arrow {
  color: var(--c-sub);
  font-size: 18px;
  font-weight: bold;
}

/* --- 两列流程图布局 --- */
.llm-two-col {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 14px;
  margin: 16px 0;
  align-items: start;
}
.llm-col {
  border-radius: 14px;
  padding: 16px;
}
.llm-col-understand {
  background: linear-gradient(180deg, #f0f7ff 0%, #fff 100%);
  border: 2px solid #bbdefb;
}
.llm-col-generate {
  background: linear-gradient(180deg, #faf5ff 0%, #fff 100%);
  border: 2px solid #e1bee7;
}
.llm-col-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.llm-col-understand .llm-col-title { color: #1565c0; }
.llm-col-generate .llm-col-title { color: #7b1fa2; }
.llm-col-desc {
  font-size: 12px;
  color: var(--c-sub);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
}
.llm-col-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
}
.llm-arrow-big {
  font-size: 32px;
  color: var(--c-ori);
  font-weight: bold;
}
.llm-arrow-text {
  font-size: 10px;
  color: var(--c-sub);
  text-align: center;
  margin-top: 4px;
  writing-mode: vertical-rl;
}

/* --- 步骤卡片（覆盖旧样式） --- */
.llm-two-col .llm-step {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
  position: static;
}
.llm-two-col .llm-step:last-child { margin-bottom: 0; }
.llm-two-col .llm-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.llm-two-col .llm-step-understand { border-left: 3px solid #2196f3; }
.llm-two-col .llm-step-generate { border-left: 3px solid #9c27b0; }
.llm-two-col .llm-step::after { display: none; }

.ls-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.llm-two-col .ls-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.llm-step-understand .ls-num { background: linear-gradient(135deg, #2196f3, #1565c0); }
.llm-step-generate .ls-num { background: linear-gradient(135deg, #9c27b0, #7b1fa2); }
.llm-two-col .ls-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.llm-step-understand .ls-icon { color: #2196f3; }
.llm-step-generate .ls-icon { color: #9c27b0; }
.ls-title-wrap { flex: 1; min-width: 0; }
.llm-two-col .ls-title {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin-bottom: 2px;
}
.ls-keyterm {
  font-size: 10px;
  color: var(--c-sub);
  background: #f5f5f5;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}
.llm-two-col .ls-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 6px;
}
.ls-example {
  font-size: 11px;
  line-height: 1.6;
  color: #555;
  background: #f8f9fa;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  border-left: 2px solid #ddd;
}
.llm-step-understand .ls-example { border-left-color: #90caf9; }
.llm-step-generate .ls-example { border-left-color: #ce93d8; }
.llm-two-col .ls-analogy {
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-sub);
  background: #fafafa;
  padding: 4px 8px;
  border-radius: 4px;
  display: block;
}

/* --- 底部完整演示区 --- */
.llm-demo {
  background: linear-gradient(135deg, #faf5ff 0%, #f0f7ff 100%);
  border: 2px solid #e1bee7;
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
}
.llm-demo-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ori-deep);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.llm-demo-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.ld-step {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ld-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep));
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}
.ld-content {
  font-size: 12px;
  line-height: 1.7;
  color: #444;
  flex: 1;
}
.ld-arrow {
  color: var(--c-ori);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  margin: 2px 0;
}
.ld-final {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border: 2px solid #81c784;
}
.ld-final .ld-label {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
}

/* --- 响应式 --- */
@media (max-width: 900px) {
  .llm-two-col {
    grid-template-columns: 1fr;
  }
  .llm-col-arrow {
    padding-top: 0;
    flex-direction: row;
    padding: 8px 0;
  }
  .llm-arrow-text {
    writing-mode: horizontal-tb;
  }
  .llm-overview {
    gap: 4px;
  }
  .llm-ov-box {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ===== 起源实验室：职业演变四阶段样式 ===== */

/* --- 顶部总览条 --- */
.jobs-overview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}
.jo-stage {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.jo-gone { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.jo-going { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.jo-new { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.jo-future { background: #f3e5f5; color: #7b1fa2; border: 1px solid #ce93d8; }
.jo-arrow { color: var(--c-sub); font-size: 16px; font-weight: bold; }

/* --- 两行布局 --- */
.jobs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.jobs-row:last-child { margin-bottom: 0; }
.jobs-block {
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}
.jobs-block-gone { border: 2px solid #ef9a9a; background: linear-gradient(180deg, #fff5f5 0%, #fff 100%); }
.jobs-block-going { border: 2px solid #ffcc80; background: linear-gradient(180deg, #fffaf0 0%, #fff 100%); }
.jobs-block-new { border: 2px solid #a5d6a7; background: linear-gradient(180deg, #f5fff5 0%, #fff 100%); }
.jobs-block-future { border: 2px solid #ce93d8; background: linear-gradient(180deg, #faf5ff 0%, #fff 100%); }

/* --- 区块头部 --- */
.jb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.jb-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.jb-icon-gone { background: linear-gradient(135deg, #ef5350, #c62828); }
.jb-icon-going { background: linear-gradient(135deg, #ff9800, #e65100); }
.jb-icon-new { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.jb-icon-future { background: linear-gradient(135deg, #ab47bc, #7b1fa2); }
.jb-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  flex: 1;
}
.jb-count {
  font-size: 11px;
  background: #f5f5f5;
  color: #666;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.jb-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e0e0e0;
}

/* --- 职业列表 --- */
.jb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jb-item {
  background: #fafafa;
  border-radius: 8px;
  padding: 8px 12px;
  border-left: 3px solid #ddd;
}
.jb-item-gone { border-left-color: #ef5350; background: #fff8f8; }
.jb-item-going { border-left-color: #ff9800; background: #fffbf5; }
.jb-item-future { border-left-color: #ab47bc; background: #faf5ff; }
.jbi-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.jbi-name {
  font-size: 13px;
  font-weight: 700;
  color: #222;
}
.jbi-era {
  font-size: 10px;
  color: var(--c-sub);
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 4px;
}
.jbi-risk {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 4px;
  color: #fff;
}
.jbi-risk-高 { background: #e53935; }
.jbi-risk-中高 { background: #fb8c00; }
.jbi-future-tag {
  font-size: 10px;
  font-weight: 700;
  color: #7b1fa2;
  background: #f3e5f5;
  padding: 1px 8px;
  border-radius: 4px;
}
.jbi-reason {
  font-size: 11px;
  line-height: 1.6;
  color: #555;
}

/* --- 响应式 --- */
@media (max-width: 900px) {
  .jobs-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .jo-stage {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ===== 起源实验室：大模型原理卡片（纵向版 + Transformer架构图） ===== */

/* 隐藏旧的两列布局 */
.llm-two-col { display: none; }

/* --- 纵向流程 --- */
.llm-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 20px;
}
.llm-vertical .llm-step {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.llm-vertical .llm-step:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.llm-vertical .llm-step-understand { border-left: 4px solid #2196f3; }
.llm-vertical .llm-step-generate { border-left: 4px solid #9c27b0; }
.llm-vertical .llm-step::after { display: none; }
.llm-vertical .ls-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.llm-vertical .llm-step-understand .ls-num { background: linear-gradient(135deg, #2196f3, #1565c0); }
.llm-vertical .llm-step-generate .ls-num { background: linear-gradient(135deg, #9c27b0, #7b1fa2); }
.llm-vertical .ls-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.llm-vertical .llm-step-understand .ls-icon { color: #2196f3; }
.llm-vertical .llm-step-generate .ls-icon { color: #9c27b0; }
.llm-vertical .ls-title { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 2px; }
.llm-vertical .ls-desc { font-size: 13px; line-height: 1.7; color: #444; margin-bottom: 8px; }
.llm-vertical .ls-example {
  font-size: 12px;
  line-height: 1.7;
  color: #555;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  border-left: 3px solid #ddd;
}
.llm-vertical .llm-step-understand .ls-example { border-left-color: #90caf9; }
.llm-vertical .llm-step-generate .ls-example { border-left-color: #ce93d8; }
.llm-vertical .ls-analogy {
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-sub);
  background: #fafafa;
  padding: 6px 10px;
  border-radius: 4px;
  display: block;
}

/* --- 阶段分隔条 --- */
.llm-stage-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  margin: 16px 0 10px;
}
.llm-stage-understand {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1565c0;
  border-left: 4px solid #2196f3;
}
.llm-stage-generate {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  color: #7b1fa2;
  border-left: 4px solid #9c27b0;
}

/* --- Transformer 架构图 --- */
.transformer-arch {
  background: linear-gradient(135deg, #fafbff 0%, #f5f0ff 100%);
  border: 2px solid #d1c4e9;
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
}
.ta-title {
  font-size: 16px;
  font-weight: 700;
  color: #4527a0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ta-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
}
.ta-diagram {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.ta-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ta-side-title {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.ta-encoder .ta-side-title { background: #e3f2fd; color: #1565c0; }
.ta-decoder .ta-side-title { background: #f3e5f5; color: #7b1fa2; }
.ta-block {
  width: 100%;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.ta-block-input { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.ta-block-pos { background: #fce4ec; color: #c2185b; border: 1px solid #f48fb1; }
.ta-block-attn { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.ta-block-masked { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
.ta-block-cross { background: #e0f7fa; color: #00838f; border: 1px solid #80deea; }
.ta-block-addnorm { background: #f5f5f5; color: #616161; border: 1px solid #e0e0e0; font-size: 10px; }
.ta-block-ffn { background: #ede7f6; color: #4527a0; border: 1px solid #b39ddb; }
.ta-block-linear { background: linear-gradient(135deg, #4527a0, #7b1fa2); color: #fff; max-width: 400px; margin: 0 auto; }
.ta-sub { font-weight: 400; font-size: 9px; opacity: 0.8; }
.ta-tip { font-weight: 400; font-size: 9px; color: #e65100; display: block; margin-top: 2px; }
.ta-note {
  font-size: 10px;
  color: var(--c-sub);
  font-style: italic;
  margin-top: 2px;
}
.ta-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 80px;
}
.ta-arrow-right { font-size: 24px; color: #7b1fa2; font-weight: bold; }
.ta-cross-label {
  font-size: 10px;
  text-align: center;
  color: #00838f;
  background: #e0f7fa;
  padding: 6px 4px;
  border-radius: 6px;
  line-height: 1.5;
  font-weight: 600;
}
.ta-output-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 8px 0 14px;
}
.ta-arrow-down { font-size: 20px; color: #4527a0; font-weight: bold; }
.ta-key-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}
.tk-item {
  font-size: 12px;
  line-height: 1.6;
  color: #444;
  padding: 4px 0;
  border-bottom: 1px dashed #eee;
}
.tk-item:last-child { border-bottom: none; }

/* --- 响应式 --- */
@media (max-width: 900px) {
  .ta-diagram {
    grid-template-columns: 1fr;
  }
  .ta-connector {
    padding-top: 0;
    flex-direction: row;
    padding: 8px 0;
  }
  .ta-cross-label {
    writing-mode: horizontal-tb;
  }
}

/* ===== 起源实验室：Transformer 图片展示 + 图灵测试体验站 ===== */

/* --- Transformer 图片展示 --- */
.ta-image-wrap {
  text-align: center;
  margin: 16px 0;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}
.ta-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ta-source {
  font-size: 11px;
  color: var(--c-sub);
  margin-top: 8px;
  font-style: italic;
}
.ta-explain {
  margin-top: 16px;
}
.te-title {
  font-size: 15px;
  font-weight: 700;
  color: #4527a0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d1c4e9;
}
.te-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.te-item {
  display: flex;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #eee;
  transition: transform 0.15s, box-shadow 0.15s;
}
.te-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.te-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7b1fa2, #4527a0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.te-content { flex: 1; }
.te-name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 3px;
}
.te-desc {
  font-size: 11px;
  line-height: 1.6;
  color: #666;
}

/* --- 图灵测试体验站 --- */
.turing-station {
  background: linear-gradient(135deg, #fafbff 0%, #f5f0ff 100%);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #d1c4e9;
}
.ts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.ts-scenario {
  font-size: 14px;
  font-weight: 700;
  color: #4527a0;
  background: #ede7f6;
  padding: 4px 12px;
  border-radius: 16px;
}
.ts-progress {
  font-size: 12px;
  color: #777;
}
.ts-question {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 4px solid #7b1fa2;
}
.ts-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.ts-opt {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  border: 2px solid #e0e0e0;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.ts-opt:hover {
  border-color: #b39ddb;
  box-shadow: 0 2px 8px rgba(123,31,162,0.1);
}
.ts-opt.ts-chosen {
  border-color: #7b1fa2;
  background: #f3e5f5;
}
.ts-opt.ts-correct {
  border-color: #4caf50;
  background: #e8f5e9;
}
.ts-opt.ts-wrong {
  border-color: #f44336;
  background: #ffebee;
}
.ts-opt-label {
  font-size: 13px;
  font-weight: 700;
  color: #7b1fa2;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e0e0e0;
}
.ts-opt-text {
  font-size: 13px;
  line-height: 1.8;
  color: #444;
  flex: 1;
  margin-bottom: 10px;
}
.ts-result {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  margin-top: auto;
}
.ts-correct .ts-result { background: #c8e6c9; color: #2e7d32; }
.ts-wrong .ts-result { background: #ffcdd2; color: #c62828; }
.ts-feedback {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #e0e0e0;
  margin-top: 8px;
}
.ts-fb-title {
  font-size: 14px;
  font-weight: 700;
  color: #4527a0;
  margin-bottom: 8px;
}
.ts-fb-ai-label {
  font-size: 12px;
  font-weight: 600;
  color: #7b1fa2;
  margin-bottom: 6px;
}
.ts-fb-trait {
  font-size: 12px;
  line-height: 1.7;
  color: #555;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  border-left: 3px solid #b39ddb;
}
/* 总结页 */
.ts-summary {
  text-align: center;
  margin-bottom: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #ede7f6, #d1c4e9);
  border-radius: 12px;
}
.ts-score-big {
  font-size: 42px;
  font-weight: 800;
  color: #4527a0;
  margin-bottom: 6px;
}
.ts-rating {
  font-size: 15px;
  font-weight: 600;
  color: #6a1b9a;
}
.ts-traits {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #e0e0e0;
}
.ts-traits-title {
  font-size: 14px;
  font-weight: 700;
  color: #4527a0;
  margin-bottom: 10px;
}
.ts-traits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ts-trait-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  background: #f8f9fa;
  padding: 8px 10px;
  border-radius: 6px;
}
.ts-trait-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7b1fa2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.ts-chinese-room {
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #ffe082;
}
.ts-cr-title {
  font-size: 14px;
  font-weight: 700;
  color: #e65100;
  margin-bottom: 8px;
}
.ts-cr-desc {
  font-size: 12px;
  line-height: 1.8;
  color: #5d4037;
  margin-bottom: 8px;
}
.ts-cr-question {
  font-size: 13px;
  font-weight: 600;
  color: #bf360c;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  border-left: 3px solid #ff9800;
}
.ts-cr-strong-weak {
  font-size: 12px;
  line-height: 1.8;
  color: #4e342e;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
}
.ts-actions {
  text-align: center;
}

/* 响应式 */
@media (max-width: 700px) {
  .te-grid { grid-template-columns: 1fr; }
  .ts-options { grid-template-columns: 1fr; }
  .ts-traits-grid { grid-template-columns: 1fr; }
}

/* ===== 职业演变四阶段卡片统一样式（参考正在兴起的卡片网格） ===== */

/* 已消失的职业卡片 - 灰色主题 */
.job-card-gone {
  background: linear-gradient(135deg, #fafafa, #f5f5f5);
  border: 1.5px solid #e0e0e0;
}
.job-card-gone:hover {
  border-color: #9e9e9e;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.job-icon-gone {
  background: linear-gradient(135deg, #9e9e9e, #616161) !important;
}
.job-card-gone .job-title { color: #424242 !important; }
.job-tag-gone {
  font-size: 11px;
  font-weight: 700;
  color: #616161;
  background: rgba(158,158,158,0.15);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* 正在消失的职业卡片 - 橙色警告主题 */
.job-card-going {
  background: linear-gradient(135deg, #fff8e1, #fff3e0);
  border: 1.5px solid #ffe0b2;
}
.job-card-going:hover {
  border-color: #ff9800;
  box-shadow: 0 6px 18px rgba(255,152,0,0.15);
}
.job-icon-going {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important;
}
.job-card-going .job-title { color: #e65100 !important; }
.job-tag-risk {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
}
.job-tag-risk-高 {
  color: #c62828;
  background: rgba(244,67,54,0.15);
}
.job-tag-risk-中高 {
  color: #e65100;
  background: rgba(255,152,0,0.15);
}
.job-tag-risk-中 {
  color: #f57f17;
  background: rgba(255,193,7,0.15);
}

/* 未来职业卡片 - 蓝色科技主题 */
.job-card-future {
  background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
  border: 1.5px solid #bbdefb;
}
.job-card-future:hover {
  border-color: #2196f3;
  box-shadow: 0 6px 18px rgba(33,150,243,0.15);
}
.job-icon-future {
  background: linear-gradient(135deg, #2196f3, #1565c0) !important;
}
.job-card-future .job-title { color: #0d47a1 !important; }
.job-tag-future {
  font-size: 11px;
  font-weight: 700;
  color: #1565c0;
  background: rgba(33,150,243,0.15);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* 通用 job-tag 基础样式 */
.job-tag {
  margin-top: auto;
}

/* 确保四个区块的 job-grid 都有一致的最小高度 */
.jobs-block .job-grid {
  min-height: 100px;
}

/* ===== 职业卡片高度一致优化 ===== */
.job-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 240px;
}
.job-card .job-desc {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.job-card .job-tag,
.job-card .job-salary {
  margin-top: auto;
  flex-shrink: 0;
}

/* 确保四个区块的卡片网格在同一行内高度一致 */
.jobs-block .job-grid {
  align-items: stretch;
}
.jobs-block .job-grid .job-card {
  height: 100%;
}

/* ============================================================
 * 感知器实验室：云端能力状态与配置引导
 * ============================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.cap-item {
  border: 2px solid var(--c-line);
  border-radius: 14px;
  padding: 11px 14px;
  background: #fff;
}
.cap-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 5px;
}
.cap-head .icon { color: var(--c-per-deep); flex-shrink: 0; }
.cap-tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.cap-ok { background: #DFF7E9; color: var(--c-mem-deep); }
.cap-mid { background: #FFF0DC; color: var(--c-plan-deep); }
.cap-demo { background: #EEF1F5; color: #6b7280; }
.cap-line {
  font-size: 13.5px;
  line-height: 1.8;
  color: #555;
}
.cap-line b { color: #333; }

/* 三级降级链：两种能力共用一条——同一套降级说明只讲一遍 */
.cap-chain {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f7f9ff;
  border-radius: 12px;
}
.cap-chain-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--c-sub);
}
.cap-chain-label .icon { color: var(--c-per-deep); }
.cap-node {
  flex: 1 1 148px;
  /* min-width 与 flex-basis 取同一个值：宽屏时三块等宽，窄屏时整块换行（而不是压窄） */
  min-width: 148px;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
}
.cap-node small { display: block; font-weight: 500; font-size: 11.5px; color: var(--c-sub); }
.cap-node-1 { border-color: var(--c-per); background: var(--per-tint); }
.cap-arrow { align-self: center; flex: 0 0 auto; color: #b9c2d0; font-weight: 800; }

/* 步骤块用描边卡片（而不是与降级链同色的实心面板），两块视觉层级才分得开 */
.cap-steps {
  margin: 12px 0 0;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 2;
  color: #555;
}
.cap-step { display: block; }
.cap-steps a { color: var(--c-per-deep); font-weight: 700; }
.cap-steps code {
  background: #e8ecf6;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12.5px;
}
@media (max-width: 720px) {
  /* 窄屏：箭头去掉，三块降级链各自占满一行——比挤成“1 + 2”更好读 */
  .cap-arrow { display: none; }
  .cap-chain-label { flex: 1 1 100%; margin-bottom: 2px; }
  .cap-node { flex: 1 1 100%; min-width: 0; }
}

/* ============================================================
 * 感知器 · 进阶原理互动课堂（8 个真实 AI 概念）
 * 左：概念导航　右：讲解 + 动手实验 + 自检一问 + 跳转对应实验
 * ============================================================ */
.adv-wrap { display: grid; grid-template-columns: 252px 1fr; gap: 16px; align-items: start; }
.adv-nav { display: flex; flex-direction: column; gap: 8px; }
.adv-nav-btn {
  display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  border: 2px solid var(--c-line); background: #fff; border-radius: 12px;
  padding: 9px 12px; font-size: 13.5px; font-weight: 800; color: #4a4a55;
  cursor: pointer; transition: all .16s; line-height: 1.3; font-family: inherit;
}
.adv-nav-btn:hover { border-color: var(--c-brain); background: #FFFAF0; transform: translateX(2px); }
.adv-nav-btn.active { border-color: var(--c-brain); background: #FFF6E0; color: #7a4d00; box-shadow: 0 3px 10px rgba(246,185,59,.22); }
.adv-nav-btn .adv-no {
  width: 21px; height: 21px; border-radius: 50%; background: #f0ece0; color: #7a6a45;
  font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.adv-nav-btn.active .adv-no { background: var(--c-brain); color: #fff; }
.adv-nav-btn span.adv-name { flex: 1; }
.adv-nav-btn small { display: block; font-weight: 600; font-size: 11px; color: var(--c-sub); letter-spacing: .2px; }

.adv-panel {
  border: 2px solid var(--c-line); border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fffdf7 100%);
  padding: 18px 20px; min-height: 320px;
}
.adv-title { font-size: 19px; font-weight: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.adv-title .adv-en {
  font-size: 11.5px; font-weight: 700; color: var(--c-sub);
  background: #f2ede2; border-radius: 999px; padding: 3px 10px; letter-spacing: .3px;
}
.adv-tagline {
  background: #FFF7E3; border-left: 4px solid var(--c-brain); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0 14px; font-weight: 700; color: #6b5b2e; font-size: 14.5px; line-height: 1.75;
}
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adv-block {
  background: rgba(0,0,0,.02); border: 1px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.8; color: #4a4a55;
}
.adv-block h5 { font-size: 13px; font-weight: 800; color: var(--c-per-deep); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.adv-block code, .adv-out code {
  background: #eef2fa; border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
  font-family: Consolas, "Courier New", monospace; color: #33507a;
}

.adv-demo { margin-top: 14px; border: 2px dashed var(--c-line); border-radius: 14px; padding: 14px 16px; background: #fdfbf5; }
.adv-demo-head { font-weight: 800; font-size: 14.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; color: #3a3a44; flex-wrap: wrap; }
.adv-demo-sub { font-size: 13px; color: var(--c-sub); margin: 10px 0 8px; font-weight: 700; }
.adv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.adv-chip {
  border: 2px solid var(--c-line); background: #fff; border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: all .15s; font-family: inherit; color: #4a4a55;
  display: inline-flex; align-items: center; gap: 6px;
}
.adv-chip:hover { border-color: var(--c-per); transform: translateY(-1px); }
.adv-chip.on { border-color: var(--c-per); background: #EAF4FF; color: var(--c-per-deep); }
.adv-chip.off { border-style: dashed; color: #9a958a; }
.adv-chip.hot { border-color: var(--c-brain); background: #FFF6E0; color: #7a4d00; }

.adv-out {
  background: #fff; border: 2px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.85; margin-top: 10px; min-height: 56px;
}
.adv-out .ok { color: var(--c-mem-deep); font-weight: 700; }
.adv-out .no { color: var(--c-exe-deep); font-weight: 700; }
.adv-out .dim { color: var(--c-sub); }
.adv-out .hl { background: #FFF6E0; border-radius: 5px; padding: 1px 6px; font-weight: 700; }

.adv-pre {
  background: #0f1420; color: #d6e2ff; font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.75; border-radius: 12px; padding: 12px 14px; margin-top: 10px;
  white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow: auto;
}

.adv-msg {
  display: flex; gap: 8px; align-items: flex-start; background: #fff;
  border: 2px solid var(--c-line); border-radius: 10px; padding: 8px 12px;
  font-size: 13px; line-height: 1.65; margin-bottom: 6px; transition: all .2s;
}
.adv-msg .role { font-weight: 800; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.adv-role-system { background: #F0E6F6; color: var(--c-ori-deep); }
.adv-role-user { background: #DFF7E9; color: var(--c-mem-deep); }
.adv-role-assistant { background: #FFF0DC; color: var(--c-plan-deep); }
.adv-role-tool { background: #FFE5E6; color: var(--c-exe-deep); }
.adv-msg.squeezed { opacity: .45; border-style: dashed; }
.adv-msg.squeezed .adv-msg-txt { text-decoration: line-through; }
.adv-msg.key { border-color: var(--c-exe); background: #FFF3F3; }
.adv-msg.key.squeezed { animation: shake .5s; }

.adv-bar { background: #eee; border-radius: 999px; height: 22px; overflow: hidden; }
.adv-bar-fill {
  height: 100%; border-radius: 999px; transition: width .25s;
  background: linear-gradient(90deg, var(--c-mem), var(--c-plan));
}
.adv-bar-fill.danger { background: linear-gradient(90deg, var(--c-plan), var(--c-exe)); }

.adv-map {
  position: relative; height: 250px; background-color: #fff; border: 2px solid var(--c-line);
  border-radius: 12px; margin-top: 10px;
  background-image: linear-gradient(#f2eee4 1px, transparent 1px), linear-gradient(90deg, #f2eee4 1px, transparent 1px);
  background-size: 42px 42px;
}
.adv-dot {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  background: #fff; border: 2px solid var(--c-brain); color: #7a4d00;
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.adv-dot:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 3; }
.adv-dot.active { background: var(--c-brain); color: #fff; border-color: var(--c-brain-deep); z-index: 4; }
.adv-dot.linked { border-color: var(--c-per); background: #EAF4FF; color: var(--c-per-deep); z-index: 2; }
.adv-axis { position: absolute; font-size: 11px; color: var(--c-sub); font-weight: 700; }

.adv-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: #555; }
.adv-steps .arw { color: var(--c-sub); }
.adv-step { background: #fff; border: 2px solid var(--c-line); border-radius: 10px; padding: 5px 10px; }

.adv-quiz { margin-top: 14px; border: 2px solid var(--c-line); border-radius: 12px; background: #fff; padding: 12px 14px; }
.adv-quiz .adv-q { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #3a3a44; }
.adv-quiz .adv-q .adv-q-tip { margin-left: auto; font-size: 12px; color: var(--c-sub); font-weight: 600; }
.adv-quiz .adv-a { display: none; margin-top: 9px; font-size: 13.5px; line-height: 1.85; color: #4a4a55; background: #f7f9ff; border-radius: 10px; padding: 10px 12px; }
.adv-quiz.open .adv-a { display: block; }

.adv-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adv-links .adv-links-label { font-size: 13px; color: var(--c-sub); font-weight: 700; }
.adv-jump {
  border: 2px solid var(--c-per); background: #fff; color: var(--c-per-deep);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.adv-jump:hover { background: #EAF4FF; transform: translateY(-1px); }

.adv-flash { animation: advFlash 1.5s ease; }
@keyframes advFlash {
  0% { box-shadow: 0 0 0 0 rgba(62,155,255,.55); }
  55% { box-shadow: 0 0 0 14px rgba(62,155,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,155,255,0); }
}

@media (max-width: 900px) {
  .adv-wrap { grid-template-columns: 1fr; }
  .adv-nav { flex-direction: row; flex-wrap: wrap; }
  .adv-nav-btn { flex: 1 1 140px; }
  .adv-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * 感知器 · ④ 提示词清晰度对比（模糊版 vs 清晰版）
 * ============================================================ */
.cmp-req { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cmp-req-btn {
  border: 2px dashed var(--c-line); background: #fff; border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: #4a4a55; font-family: inherit; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.cmp-req-btn:hover { border-color: var(--c-per); transform: translateY(-1px); }
.cmp-req-btn.on { border-style: solid; border-color: var(--c-per); background: #EAF4FF; color: var(--c-per-deep); }
.cmp-pre {
  background: #0f1420; color: #d6e2ff; font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.7; border-radius: 10px; padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 10px; min-height: 70px;
}
.cmp-pre .tag { color: #f6b93b; }
#pc-ans-vague, #pc-ans-clear { max-height: 320px; overflow: auto; }

/* 回答展示：题目单独一行 + 每段带"第 N 段"标记，段落数一眼可数 */
.cmp-ans-head { font-weight: 800; color: var(--c-per-deep); margin-bottom: 10px; }
.cmp-ans-title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFF7E3; border: 1px dashed var(--c-brain); border-radius: var(--r-sm);
  padding: 6px 10px; margin-bottom: 12px; font-weight: 800; text-align: center;
}
.cmp-ans-tag {
  font-size: 11px; font-weight: 700; color: #8a6d1f; background: #fff;
  border-radius: var(--r-pill); padding: 1px 9px; white-space: nowrap;
}
.cmp-ans-p { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.cmp-ans-p:last-child { margin-bottom: 0; }
.cmp-ans-no {
  flex: 0 0 auto; margin-top: 3px; white-space: nowrap;
  font-size: 11px; font-weight: 800; color: var(--c-sub);
  background: #f5f1e6; border-radius: var(--r-pill); padding: 2px 9px;
}
.cmp-ans-txt { flex: 1; line-height: 1.85; word-break: break-word; }

/* ============================================================
 * 进阶课堂 · 新增交互类型（pipeline / sorter / tuner）
 * 复用既有设计 token 与 .adv-* 视觉语言，不新增色板
 * ============================================================ */

/* ---------- pipeline：多阶段管线（先猜 → 逐步揭示） ---------- */
.adv-pipe-node {
  flex: 1 1 120px; min-width: 106px;
  border: 2px solid var(--c-line); border-radius: var(--r-md);
  background: #fff; padding: 10px 12px; text-align: center;
  font-size: 13.5px; font-weight: 800; color: #4a4a55;
  transition: all var(--t-base);
}
.adv-pipe-node small { display: block; margin-top: 2px; font-size: 11px; }
.adv-pipe-node.done { border-color: var(--c-mem); background: #F2FBF6; color: var(--c-mem-deep); }
.adv-pipe-node.on {
  border-color: var(--c-brain); background: #FFF6E0; color: #7a4d00;
  box-shadow: 0 0 0 4px rgba(246, 185, 59, .20);
  animation: advPulse 1.4s ease-in-out infinite;
}
@keyframes advPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.pipe-line { align-self: center; color: var(--c-sub); font-size: 12px; }

/* ---------- sorter：步骤排序与依赖判定 ---------- */
.adv-demo .order-list { min-height: 42px; }
.adv-demo .order-item { cursor: default; }
.adv-demo .order-item:hover { transform: none; }

/* ---------- picker：多选判定（选出所有正确项） ---------- */
.adv-chip.correct { border-color: var(--c-mem); background: #E9F9F0; color: var(--c-mem-deep); border-style: solid; }
.adv-chip.wrong { border-color: var(--c-exe); background: #FFECEC; color: var(--c-exe-deep); border-style: solid; }
.adv-chip:disabled { cursor: default; opacity: .92; }

/* ---------- tuner：滑条调参 ---------- */
.adv-demo input[type="range"] { accent-color: var(--c-per); height: 22px; }

/* ---------- annotator：在真实材料上点选目标片段 ---------- */
.adv-anno {
  background: #fff; border: 2px solid var(--c-line); border-radius: 12px;
  padding: 12px 14px; line-height: 2.3; font-size: 13.5px; color: #4a4a55;
}
.adv-seg {
  border: 2px solid transparent; background: #f7f4ec; border-radius: 8px;
  padding: 3px 7px; margin: 2px 2px; font-family: inherit; font-size: 13.5px;
  color: #4a4a55; cursor: pointer; transition: all var(--t-base); line-height: 1.6;
}
.adv-seg:hover { border-color: var(--c-per); background: #EAF4FF; }
.adv-seg.sel { border-color: var(--c-brain); background: #FFF6E0; color: #7a4d00; font-weight: 700; }
.adv-seg.hit { border-color: var(--c-mem); background: #E9F9F0; color: var(--c-mem-deep); font-weight: 700; }
.adv-seg.miss { border-color: var(--c-plan); border-style: dashed; background: #FFF6E0; color: var(--c-plan-deep); }
.adv-seg.wrong { border-color: var(--c-exe); background: #FFECEC; color: var(--c-exe-deep); text-decoration: line-through; }
.adv-seg:disabled { cursor: default; }
.adv-seg:focus-visible { outline: 3px solid var(--c-brain-deep); outline-offset: 2px; }

/* ---------- matcher：左右两列配对 ---------- */
.adv-demo .adv-chip.sel { border-color: var(--c-brain); background: #FFF6E0; color: #7a4d00; }
.adv-demo .adv-chip[data-l], .adv-demo .adv-chip[data-r] { max-width: 100%; text-align: left; }

/* ---------- budget：上下文预算分配器 ---------- */
.adv-budget-bar {
  display: flex; height: 24px; margin-top: 10px;
  border: 2px solid var(--c-line); border-radius: 999px; overflow: hidden; background: #eee;
}
.adv-budget-seg { position: relative; height: 100%; background: var(--c-per); border-right: 2px solid #fff; transition: width var(--t-base); overflow: hidden; }
.adv-budget-cut {
  position: absolute; right: 0; top: 0; height: 100%;
  background: repeating-linear-gradient(45deg, var(--c-exe) 0 5px, #ffd0d1 5px 10px);
}
.adv-budget-seg[data-p]:nth-child(1) { background: var(--c-ori); }
.adv-budget-seg[data-p]:nth-child(2) { background: var(--c-plan); }
.adv-budget-seg[data-p]:nth-child(3) { background: var(--c-mem); }
.adv-budget-seg[data-p]:nth-child(4) { background: var(--c-brain); }
.adv-budget-bar.over { border-color: var(--c-exe); }
.adv-budget-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--c-sub); }
.adv-budget-legend .adv-budget-key.cut { color: var(--c-exe-deep); }
.adv-budget-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.adv-budget-name { min-width: 148px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #4a4a55; }
.adv-budget-val { min-width: 56px; text-align: right; font-size: 13px; }
.adv-budget-hint { flex: 1 1 100%; font-size: 12px; color: var(--c-sub); }

/* ---------- apiCall：请求 ↔ 响应 左右对照 ---------- */
.adv-io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
/* 两列等高：列本身拉伸到同一高度，里面的卡片再用 flex:1 撑满，
   于是「用户输入 / 最终结果」「请求 JSON / 响应 JSON」两对卡片始终齐平。 */
.adv-io-col { min-width: 0; display: flex; flex-direction: column; }
.adv-io-head {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 800; color: var(--c-sub); margin-bottom: 6px;
}
/* 进阶入口：顶在标题行最右，虚线细框 + 小字，视觉上退到次要层级——
 * 学生先读参数，真的想深挖再点开官方文档，不打断「对比请求/响应」这条主线。 */
.adv-head-link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  color: var(--c-sub); text-decoration: none;
  border: 1px dashed var(--c-line-strong); border-radius: 999px;
  padding: 4px 9px; background: #fff; cursor: pointer;
  white-space: nowrap; transition: all var(--t-fast) var(--ease);
}
.adv-head-link:hover {
  border-style: solid; border-color: var(--c-per);
  color: var(--c-per-deep); background: #EAF4FF; transform: translateY(-1px);
}
.adv-head-link:focus-visible { outline: 2px solid var(--c-per); outline-offset: 2px; }
.adv-head-link svg { flex: 0 0 auto; }
.adv-io .adv-pre {
  margin: 0;
  flex: 1 1 auto;
  min-height: 130px;      /* 短内容时也不会塌成一条 */
  max-height: 250px;      /* 内容过长时自己滚动，不把整行撑得过高 */
  overflow: auto;
}
.adv-api-meta { font-size: 12.5px; font-weight: 700; color: var(--c-sub); }
@media (max-width: 780px) {
  .adv-io { grid-template-columns: 1fr; }
}

/* ---------- apiCall：「人看到的」两个对话框 ----------
 * 和下面的原始 JSON 对照区上下排开，形成两个视角：
 *   上排 = 人怎么问、怎么读答案（聊天框）
 *   下排 = 程序真正发出去 / 收回来的（原始 JSON）
 * 学生一眼就能对上：同一个响应，程序看 JSON，人看结论。 */
.adv-io .adv-chat {
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 10px;
  background: var(--c-bg);
  min-height: 112px;
  flex: 1 1 auto;   /* 与同一行另一张卡片等高 */
}
/* 结果卡：高度完全跟随左边那张（flex-basis:0 = 不按内容撑高），
   内容长了就在卡内滚动，不会把整行越顶越高——两张卡片因此永远齐平。 */
.adv-io .adv-chat[data-a="human"] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.adv-io .adv-chat[data-a="human"]::-webkit-scrollbar { width: 9px; }
.adv-io .adv-chat[data-a="human"]::-webkit-scrollbar-track { background: transparent; }
.adv-io .adv-chat[data-a="human"]::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 140, .30);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.adv-io .adv-chat[data-a="human"]::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 120, 140, .50);
  background-clip: content-box;
}
.adv-bubble {
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 14px;
  /* 气泡自己的行距与 .md-body 保持一致（.md-body 那里按 1.62 收过），
   * 否则同一个框里"正文"和"委托单"两种气泡的行距会不一样。 */
  line-height: 1.62;
  word-break: break-word;
  white-space: pre-wrap;
}
.adv-bubble.is-user { background: rgba(62, 155, 255, .10); border: 1px solid rgba(62, 155, 255, .22); }
.adv-bubble.is-ai   { background: rgba(52, 199, 89, .09);  border: 1px solid rgba(52, 199, 89, .22); }
/* 气泡里的 Markdown：
 * ① .adv-bubble 本身是 white-space: pre-wrap（为了原样保留模型输出里的换行），
 *    但 U.md 生成的块与块之间本身带着换行（out.join("\n")），pre-wrap 会把它
 *    渲染成实打实的一行空白——看起来就像"每段之间空了一行"。所以内部恢复普通折叠
 *    （和 .msg .md-body 是同一处修法）。
 * ② 行距与段距按气泡收一收：卡片正文用的是 .card p（1.75 / 12px），
 *    套在窄列的气泡里偏松，这里按气泡自己的尺度给值（并盖过 .card p）。 */
.adv-bubble .md-body { white-space: normal; line-height: 1.62; }
.adv-bubble .md-body p { margin: 0 0 6px; line-height: 1.62; }
/* 列表也要一起收：.card li / .card ul（1.7 / 12px）比 .md-body 那几条更晚出现，
 * 不覆盖的话同一个气泡里段落紧、列表松，看着像两套排版。 */
.adv-bubble .md-body ul, .adv-bubble .md-body ol { margin: 6px 0; padding-left: 20px; }
.adv-bubble .md-body li { line-height: 1.62; margin: 2px 0; }
.adv-bubble .md-body > *:last-child { margin-bottom: 0; }
.adv-bubble.is-tool {
  background: rgba(255, 149, 0, .10);
  border: 1px solid rgba(255, 149, 0, .30);
  border-left: 3px solid #FF9500;
}
/* 思考模式：模型先推理再回答，思考过程单独占一块，和正文区分开 */
.adv-bubble.is-think {
  background: rgba(120, 120, 140, .08);
  border: 1px solid var(--c-line);
  border-left: 3px solid #8a8a99;
  margin-bottom: 8px;
}
.adv-bubble.is-think > b {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; color: var(--c-sub);
}
.adv-sysline {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--c-line);
  font-size: 12px; color: var(--c-sub); line-height: 1.65;
}
.adv-sysline .adv-tag { display: inline-block; font-weight: 800; color: var(--c-per-deep); margin-right: 5px; }
.adv-hr {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--c-sub);
  margin: 16px 0 0;
}
/* 结构化结果：把 JSON 字段排成一行行的「键：值」 */
.adv-kv { margin-top: 2px; }
.adv-kv-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px dashed var(--c-line);
  font-size: 13px; line-height: 1.6;
}
.adv-kv-row:last-child { border-bottom: none; }
.adv-kv-k { flex: 0 0 auto; font-weight: 800; color: var(--c-sub); min-width: 68px; }
.adv-kv-v { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.adv-kv-v code { background: rgba(62, 155, 255, .10); border-radius: 5px; padding: 1px 6px; font-size: 12px; }
.adv-note-line { margin-top: 9px; font-size: 12px; color: var(--c-sub); line-height: 1.65; }

/* ---------- apiCall：「更多参数」可调参数区 ----------
 * 开关是"有没有"，参数是"是多少"——两套控件分开摆，视觉上也分开：
 * 参数区一行一张小卡片（名字 + 状态钮 + 滑条/下拉 + 实时取值），
 * 写入请求体的那张卡片整张点亮，一眼看出"这次带了什么"。
 * 宽屏自动两列、窄屏自动一列（auto-fit，不写死列数）。 */
.adv-params { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
/* 「其他参数」= 五个开关之后那一排的第六个按钮：虚线边框表示"这里还能展开"，
   角标显示已写入几项（折叠着也知道自己动过手），箭头展开时翻上来。 */
.adv-chip.adv-chip-more { border-style: dashed; color: var(--per-ink); }
.adv-chip.adv-chip-more:hover { border-style: solid; }
.adv-chip.adv-chip-more.is-open {
  border-style: solid; border-color: var(--c-per);
  background: var(--per-tint); color: var(--c-per-deep);
}
.adv-chip.adv-chip-more.has-on { border-color: var(--per-line); }
.adv-chip-badge {
  font-size: 11px; font-weight: 800; color: var(--c-per-deep);
  background: rgba(62, 155, 255, .16); border-radius: 999px; padding: 1px 7px;
}
.adv-chip-badge:empty { display: none; }
.adv-chip-caret { display: inline-flex; transform: rotate(-90deg); transition: transform .18s ease; }
.adv-chip.adv-chip-more.is-open .adv-chip-caret { transform: rotate(90deg); }
/* 参数区默认折叠——折叠的只是面板，参数值照旧留在请求体里 */
.adv-params-wrap { display: none; }
.adv-params-wrap.open { display: block; animation: advParamsIn .18s ease; }
@keyframes advParamsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.adv-pgroup-name {
  display: inline-block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 800; color: var(--per-ink);
  background: var(--per-tint); border: 1px solid var(--per-line);
  border-radius: var(--r-pill, 999px); padding: 1px 10px;
}
.adv-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.adv-param {
  background: #fff; border: 2px solid var(--c-line); border-radius: 12px;
  padding: 9px 11px 10px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.adv-param.on { border-color: var(--per-line); background: var(--per-tint); }
.adv-param:focus-within { box-shadow: 0 0 0 3px rgba(62, 155, 255, .14); }
.adv-param-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adv-param-ic { display: inline-flex; color: var(--c-dim); }
.adv-param.on .adv-param-ic { color: var(--c-per); }
/* 参数名是代码字段名，但这里按"名字"用，不要像正文里那样染成红色 */
.adv-param-k {
  background: none; padding: 0; border-radius: 0; font-size: 12.5px; font-weight: 800;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace; color: var(--c-ink-2);
}
.adv-param.on .adv-param-k { color: var(--per-ink); }
.adv-param-cn { font-size: 11.5px; color: var(--c-sub); white-space: nowrap; }
/* 写入状态钮：显示的是"当前状态"，点一下切换（不是"已启用/已禁用"那种开关感） */
.adv-param-sw {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  border: 1.5px solid var(--c-line); background: #fff; color: var(--c-dim);
  border-radius: var(--r-pill, 999px); padding: 2px 8px;
  font-size: 11px; font-weight: 800; font-family: inherit; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.adv-param-sw:hover { border-color: var(--c-per); transform: translateY(-1px); }
.adv-param-sw.on { border-color: var(--c-per); background: #fff; color: var(--c-per-deep); }
.adv-param-body { display: flex; align-items: center; gap: 9px; margin-top: 8px; min-height: 26px; }
.adv-param-range { flex: 1 1 auto; min-width: 0; accent-color: var(--c-per); height: 20px; }
.adv-param-select {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 12.5px;
  border: 1.5px solid var(--c-line); border-radius: 8px; padding: 3px 6px;
  background: #fff; color: inherit; cursor: pointer;
}
.adv-param-select:focus-visible { outline: 2px solid var(--c-per); outline-offset: 1px; }
.adv-param-val {
  flex: 0 0 auto; font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 12px; font-weight: 800; color: var(--per-ink);
  background: rgba(62, 155, 255, .10); border-radius: 6px; padding: 2px 8px;
}
.adv-param:not(.on) .adv-param-val { color: var(--c-dim); background: rgba(120, 120, 140, .10); }
.adv-param:not(.on) .adv-param-range { opacity: .72; }
.adv-param-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--c-sub); }
/* 手动输入的数字框（max_tokens / seed）：和滑条共用同一条取值链路 */
.adv-param-num {
  width: 96px; font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 12.5px; font-weight: 700; color: var(--per-ink);
  border: 1.5px solid var(--c-line); border-radius: 8px; padding: 3px 7px;
  background: #fff; text-align: right;
}
.adv-param-num:focus { outline: 2px solid var(--c-per); outline-offset: 1px; border-color: var(--c-per); }
.adv-param:not(.on) .adv-param-num { color: var(--c-dim); }
/* max_tokens：档位（0 到上限几个常用档）+ 手动输入兜底任意值 */
.adv-tok { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.adv-tok-presets { display: flex; gap: 5px; flex-wrap: wrap; }
.adv-tok-p {
  border: 1.5px solid var(--c-line); background: #fff; color: var(--c-sub);
  border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 800;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.adv-tok-p:hover { border-color: var(--c-per); color: var(--c-per-deep); }
.adv-tok-p.on { border-color: var(--c-per); background: var(--per-tint); color: var(--c-per-deep); }
.adv-tok-row { display: flex; align-items: center; gap: 6px; }
.adv-tok-unit { font-size: 11.5px; color: var(--c-sub); }
.adv-tok-cap {
  font-size: 11px; color: var(--c-dim); margin-left: auto;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
}
/* 这个开关开着时，本参数会被服务端忽略（例：思考模式下的 temperature）
   ——整张卡片压暗 + 一行说明；照旧能拖，但一眼知道"现在发过去不算数" */
.adv-param.is-muted { background: #FBFAF6; border-color: var(--c-line); border-style: dashed; }
.adv-param.is-muted .adv-param-body { opacity: .5; }
.adv-param.is-muted .adv-param-ic { color: var(--c-dim); }
/* 注意：这里不能用 flex——说明文字里夹着 <code> 标签，
 * flex 会把每个行内子节点（文本段、code）都变成独立 flex item，
 * 文字被拆成几块、还会和相邻字重叠。 */
.adv-param-muted {
  margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #8a6a00; line-height: 1.55;
}
.adv-param-muted .icon { vertical-align: -2px; margin-right: 2px; }
.adv-param-muted code { font-size: 11px; background: rgba(246, 185, 59, .18); }

/* 「已写入 n / m」计数 + 「恢复默认」：都挂在参数区标题行右端 */
.adv-pcount {
  margin-left: auto; font-size: 11.5px; font-weight: 800;
  color: var(--per-ink); background: var(--per-tint);
  border: 1px solid var(--per-line); border-radius: var(--r-pill, 999px); padding: 1px 9px;
}
.adv-pcount.is-none { color: var(--c-dim); background: var(--c-bg-alt); border-color: var(--c-line); }
.adv-mini-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid var(--c-line); background: #fff; color: var(--c-sub);
  border-radius: var(--r-pill, 999px); padding: 2px 10px;
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .15s;
}
.adv-mini-btn:hover { border-color: var(--c-per); color: var(--c-per-deep); transform: translateY(-1px); }
.adv-mini-btn:focus-visible { outline: 2px solid var(--c-per); outline-offset: 2px; }
@media (max-width: 780px) {
  .adv-pgrid { grid-template-columns: 1fr; }
  .adv-hr[data-a="phead"] { align-items: flex-start; flex-wrap: wrap; }
  .adv-pcount { margin-left: 0; }
}

/* ---------- apiCall：可手改的「用户输入」区 ---------- */
.adv-chat-form { display: flex; flex-direction: column; gap: 7px; }
.adv-sysblock {
  background: rgba(120, 120, 140, .07);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-per);
  border-radius: 10px;
  padding: 4px 10px;
}
.adv-sysblock .adv-tag {
  font-size: 12px; font-weight: 800; color: var(--c-per-deep);
  margin-right: 6px;
}
/* 标签与提示词排在同一行，不另起一行，整体收紧 */
.adv-sysblock .adv-sysline {
  display: inline;
  margin: 0; padding: 0;
  border-top: none;
  font-size: 12.5px; line-height: 1.65;
}
/* 开关关掉：整块褪成灰，边框和竖条一起变虚，让学生一眼看出"这次没带规则" */
.adv-sysblock.is-off {
  background: rgba(120, 120, 140, .05);
  border-color: var(--c-line);
  border-left-color: var(--c-line);
  border-style: dashed;
  opacity: .78;
}
.adv-sysblock.is-off .adv-tag { color: var(--c-sub); }
/* 输入框 + 「发送」合成一个整体（聊天产品的输入区观感） */
.adv-composer {
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  padding: 4px 4px 5px;
  transition: border-color .15s, box-shadow .15s;
}
.adv-composer:focus-within {
  border-color: var(--c-per);
  box-shadow: 0 0 0 3px rgba(62, 155, 255, .15);
}
.adv-composer .adv-qinput {
  display: block; width: 100%; box-sizing: border-box;
  resize: vertical; min-height: 44px;
  border: none; background: transparent; padding: 6px 9px 3px;
  font-family: inherit; font-size: 14px; line-height: 1.65; color: inherit;
}
.adv-composer .adv-qinput:focus { outline: none; }
.adv-composer-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 0 5px;
}
.adv-composer-bar .adv-api-meta { margin-right: auto; }
.adv-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adv-presets-label {
  font-size: 11.5px; font-weight: 800; color: var(--c-sub);
  margin-right: 2px; white-space: nowrap;
}
/* 只放简短说明的小按钮：视觉上比主按钮轻一档，别抢「发送」的注意力。
   min-width + 居中：即使以后文案改了长短，按钮也始终等宽、排成整齐的网格。 */
.adv-presets .adv-chip {
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-width: 1.5px;
  min-width: 70px; justify-content: center;
  background: rgba(62, 155, 255, .06);
}
.adv-presets .adv-chip:hover { background: rgba(62, 155, 255, .15); }
.adv-presets .adv-chip.on {
  background: rgba(62, 155, 255, .18);
  border-color: var(--c-per);
  color: var(--c-per-deep);
}
@media (max-width: 780px) {
  .adv-kv-row { flex-direction: column; gap: 2px; }
  .adv-kv-k { min-width: 0; }
  /* 单列时左右不再并排，结果卡恢复按内容取高、但封顶后内部滚动 */
  .adv-io .adv-chat[data-a="human"] { flex: 0 0 auto; max-height: 320px; }
}

/* ---------- race：双轨推进（同一件事，两种做法并排走） ---------- */
.adv-race { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 12px; margin-top: 10px; }
.adv-race-col {
  background: #fff; border: 2px solid var(--c-line); border-radius: 12px;
  padding: 10px 12px; min-width: 0; transition: border-color var(--t-base), background var(--t-base);
}
.adv-race-col.win { border-color: var(--c-mem); background: #F7FDFA; }
.adv-race-col.lose { border-color: var(--c-exe); background: #FFF9F9; }
.adv-race-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 800; color: #3a3a44; margin-bottom: 8px;
}
.adv-race-prog { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--c-sub); }
.adv-race-step {
  font-size: 13px; line-height: 1.7; padding: 6px 9px; border-radius: 8px;
  background: #f7f7f7; margin-bottom: 6px; word-break: break-word;
}
.adv-race-step.ok { background: #E9F9F0; color: var(--c-mem-deep); }
.adv-race-step.no { background: #FFECEC; color: var(--c-exe-deep); }
.adv-race-step.warn { background: #FFF6E0; color: #7a4d00; }
.adv-race-step.dim { background: #f7f7f7; color: var(--c-sub); }
.adv-race-empty { font-size: 12.5px; color: var(--c-sub); }
.adv-race-tail {
  margin-top: 2px; padding-top: 7px; border-top: 1px dashed var(--c-line);
  font-size: 12.5px; font-weight: 700; color: var(--c-sub);
}
.adv-race-tail.win { color: var(--c-mem-deep); }
.adv-race-col.lose .adv-race-tail { color: var(--c-exe-deep); }

/* ---------- ranker：打分排名（谁会被想起来） ---------- */
.adv-rank { display: flex; flex-direction: column; gap: 8px; }
.adv-rank-item {
  position: relative; display: block; width: 100%; text-align: left; font-family: inherit;
  background: #fff; border: 2px solid var(--c-line); border-radius: 12px; padding: 9px 54px 9px 12px;
  cursor: pointer; transition: all var(--t-base);
}
.adv-rank-item:hover { border-color: var(--c-mem); }
.adv-rank-item.picked { border-color: var(--c-brain); background: #FFF6E0; }
.adv-rank-item.show { cursor: default; padding-right: 56px; }
.adv-rank-item.top { border-color: var(--c-mem); background: #F2FBF6; }
.adv-rank-item.picked.right { box-shadow: 0 0 0 3px rgba(46, 160, 67, .16); }
.adv-rank-item.picked.wrong { border-color: var(--c-exe); background: #FFF9F9; }
.adv-rank-item.picked.wrong .adv-rank-name { text-decoration: line-through; text-decoration-color: var(--c-exe); }
.adv-rank-name { display: block; font-size: 13.5px; font-weight: 800; color: #3a3a44; line-height: 1.5; }
.adv-rank-meta { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--c-sub); }
.adv-rank-bar { display: block; height: 8px; margin-top: 7px; border-radius: 999px; background: #eee; overflow: hidden; }
.adv-rank-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-mem), var(--c-brain)); transition: width var(--t-base); }
.adv-rank-pts { position: absolute; right: 12px; top: 10px; font-size: 13px; color: var(--c-mem-deep); }

/* vectorMap 相关度门槛：没达到门槛的邻居灰掉 */
.adv-dot.unlinked { opacity: .35; border-style: dashed; }

@media (max-width: 900px) {
  .adv-pipe-node { flex: 1 1 100%; }
  .pipe-line { transform: rotate(90deg); }
  .adv-budget-name { min-width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .adv-pipe-node.on { animation: none; }
}
.cmp-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.cmp-table th, .cmp-table td { border: 1px solid var(--c-line); padding: 8px 10px; text-align: left; }
.cmp-table thead th { background: #f7f4ec; font-weight: 800; color: #5a5548; }
.cmp-table td.yes { color: var(--c-mem-deep); font-weight: 700; }
.cmp-table td.no { color: var(--c-exe-deep); font-weight: 700; }
.cmp-score { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-weight: 800; }
.cmp-score span { background: #f7f4ec; border-radius: 999px; padding: 6px 16px; color: #5a5548; }
/* 达标检查表：一句话结论（最直白的一行）+ 表头 */
.cmp-verdict { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #effaf2; border: 2px solid #b9e4c6; color: #1c6b3a; font-size: 14.5px; line-height: 1.75; }
.cmp-verdict .icon { flex-shrink: 0; margin-top: 3px; }
.cmp-verdict b { color: #14572e; }
.cmp-chead { font-weight: 800; margin-top: 14px; font-size: 15px; }
.cmp-chead-tip { font-weight: 400; color: var(--c-sub); font-size: 12.5px; margin-left: 8px; }

/* ============================================================
 * 全站通用「单题闯关」答题引擎（AgentLab.Quiz）
 * 一题一题出现 · 即时判定加星 · 全部答完给点评与鼓励
 * 语义色由容器上的 data-color 驱动（per/plan/mem/exe/brain/ori）
 * ============================================================ */
.flow { --flow-c: var(--c-per); --flow-deep: var(--c-per-deep); }
.flow[data-color="plan"], .flow-card-wrap[data-color="plan"] { --flow-c: var(--c-plan); --flow-deep: var(--c-plan-deep); }
[data-color="plan"] .flow-no { background: var(--c-plan); }
[data-color="mem"] .flow-no { background: var(--c-mem); }
[data-color="exe"] .flow-no { background: var(--c-exe); }
[data-color="brain"] .flow-no { background: var(--c-brain); }
[data-color="ori"] .flow-no { background: var(--c-ori); }

.flow-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.flow-bar { flex: 1; min-width: 120px; height: 10px; background: #ece6d9; border-radius: 999px; overflow: hidden; }
.flow-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-per), var(--c-plan)); transition: width var(--t-base, .25s) ease; }
.flow-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: #5a5548; }
.flow-count { background: #f7f4ec; border-radius: 999px; padding: 4px 13px; }

.flow-card { background: #fff; border: 2px solid var(--c-line); border-radius: 14px; padding: 14px 16px; animation: flowIn .22s ease; }
.flow-pre { background: #fdfbf5; border: 1px dashed var(--c-line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; line-height: 1.75; color: #4a4a55; margin-bottom: 10px; }
.flow-pre b { color: #7a6a45; }
.flow-q { font-size: 15.5px; font-weight: 800; line-height: 1.75; display: flex; gap: 9px; align-items: flex-start; color: var(--c-ink, #2B2B33); }
.flow-no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--c-per); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; }
.flow-opts { margin-top: 10px; }
.flow-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; min-height: 34px; }
.flow-next { border: 2px solid var(--c-per); background: #fff; color: var(--c-per-deep); font-weight: 800; }
.flow-next:hover { background: #EAF4FF; }

.flow-result { text-align: center; border: 2px solid var(--c-line); border-radius: 16px; background: linear-gradient(180deg, #fff 0%, #fffdf7 100%); padding: 20px 18px; animation: flowIn .26s ease; }
.fr-icon { color: var(--c-brain); line-height: 0; }
.fr-title { font-size: 19px; font-weight: 900; margin-top: 6px; color: var(--c-ink, #2B2B33); }
.fr-score { font-size: 15px; font-weight: 700; color: #4a4a55; margin-top: 8px; }
.fr-score b { font-size: 19px; color: var(--c-per-deep); }
.fr-bar { max-width: 420px; margin: 10px auto 0; height: 12px; background: #ece6d9; border-radius: 999px; overflow: hidden; }
.fr-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-mem), var(--c-per)); transition: width .5s ease; }
.fr-msg { font-size: 14.5px; line-height: 1.85; color: #4a4a55; margin: 14px auto 0; max-width: 620px; }
.fr-msg b { color: var(--c-per-deep); }
.fr-tips { text-align: left; max-width: 620px; margin: 12px auto 0; background: #f7f9ff; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; line-height: 1.85; color: #4a4a55; }
.fr-tips b { color: var(--c-ori-deep); }
.fr-tip-item { padding: 1px 0; }
.fr-tag { display: inline-block; margin-left: 6px; background: #fdf1e0; color: #a8762a; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; }
.opt.flow-tried { opacity: .5; }
.fr-actions { margin-top: 16px; }
[data-color="mem"] .fr-score b { color: var(--c-mem-deep); }
[data-color="exe"] .fr-score b { color: var(--c-exe-deep); }
[data-color="brain"] .fr-score b { color: var(--c-brain-deep); }
[data-color="ori"] .fr-score b { color: var(--c-ori-deep); }

@keyframes flowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 答对庆祝：此前 .celebrate 只有 JS 没有样式，这里补上 */
.celebrate { animation: celebratePop .65s ease; }
@keyframes celebratePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.12) rotate(-1.6deg); }
  60% { transform: scale(.97) rotate(1deg); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-card, .flow-result { animation: none; }
  .celebrate { animation: none; }
  .flow-bar > i, .fr-bar > i { transition: none; }
}

@media (max-width: 900px) {
  .flow-opts .opt { width: 100%; text-align: left; }
  .flow-q { font-size: 15px; }
  .fr-title { font-size: 17px; }
}

/* ============================================================
 * 统一优化层（跨 7 个栏目通用，叠加在原样式之上）
 * 目标：① 投屏可读性 ② 键盘 / 动效可达性 ③ 组件层级与编号统一
 * 原则：不改信息架构、不改组件配色语义，只做统一与增强。
 * ============================================================ */

/* ---------- 1. 锚点跳转不再被吸顶导航盖住 ---------- */
html { scroll-padding-top: calc(var(--topbar-h) + 14px); }
.card, section[id], [id^="pc-"] { scroll-margin-top: calc(var(--topbar-h) + 14px); }

/* ---------- 2. 键盘可达：统一可见焦点环 ---------- */
:focus-visible { outline: 3px solid var(--c-brain-deep); outline-offset: 2px; }
.btn:focus-visible, .opt:focus-visible, .nav-tab:focus-visible, .icon-btn:focus-visible,
.adv-chip:focus-visible, .cmp-req-btn:focus-visible, .adv-nav-btn:focus-visible,
.adv-dot:focus-visible, .adv-jump:focus-visible, .role-msg:focus-visible, .mic-btn:focus-visible {
  outline: 3px solid var(--c-brain-deep); outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(246, 185, 59, .22);
}

/* ---------- 3. 交互控件边框对比度 ≥3:1（原来 1.29:1，投屏上几乎看不见） ---------- */
input[type="text"], input[type="password"], input[type="number"], textarea, select,
.opt, .adv-chip, .cmp-req-btn { border-color: var(--c-line-strong); }
input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover,
textarea:hover, select:hover, .opt:hover, .adv-chip:hover, .cmp-req-btn:hover { border-color: var(--c-per); }

/* ---------- 4. 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 5. 卡片序号徽章（取代每张卡都重复的组件胶囊） ---------- */
.card-no {
  flex: 0 0 auto; min-width: 34px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: 15px; font-weight: 900; letter-spacing: .5px;
}
/* 卡片编号徽章：中性灰（不带语义色） */
.card-enhanced .card-no { background: var(--c-bg-alt); color: var(--c-ink-2); }
/* 固定徽章（“准备”“③b”这类）：不占课次编号，样式做得更轻，避免被误读成课次号 */
.card-enhanced .card-no[data-fixed="1"] {
  background: #fff; border: 1px dashed var(--c-line-strong);
  color: var(--c-sub); font-size: 13px; letter-spacing: 0; min-width: 28px;
}

/* 卡片来源注：把「（ai-agent-book chapter4:7）」这类书内位置从标题移到脚注 */
.card-src {
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs); color: var(--c-sub);
  display: flex; align-items: center; gap: 6px;
}

/* ---------- 6. 进阶原理术语卡统一（编号 / 中英分排 / 悬停抬升） ---------- */
.deep-count { font-size: var(--fs-sm); color: var(--c-sub); margin: 0 0 var(--sp-3); }
.card-enhanced .deep-item {
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.card-enhanced .deep-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.card-enhanced .deep-term::before { display: none; }   /* 用编号徽章替代原来的圆点 */
.card-enhanced .deep-term { gap: 7px; }
.card-enhanced .deep-term .deep-no {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: #f3efe4; color: #7a6a45; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.card-enhanced .deep-en { font-size: 11.5px; font-weight: 600; color: var(--c-sub); letter-spacing: .2px; }

/* ---------- 7. 页头 meta 统一为胶囊 ---------- */
.lab-head-txt { flex: 1; min-width: 0; }
.meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.meta-pill {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-sub);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); padding: 2px 10px;
}

/* ---------- 8. 交互过渡时长统一 ---------- */
.btn, .opt, .adv-chip, .cmp-req-btn, .nav-tab, .icon-btn, .adv-nav-btn, .adv-dot, .adv-jump {
  transition-duration: var(--t-base);
}

/* ---------- 9. 窄屏：导航横滑不挤压，页头自动换行 ---------- */
@media (max-width: 768px) {
  /* 窄屏顶栏会折成两行，锚点预留高度同步变大 */
  :root { --topbar-h: 108px; }
  .nav {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-tab { flex: 0 0 auto; }
  .lab-head { flex-wrap: wrap; }
  .lab-head .btn { margin-left: 0; }
  .card h2 { font-size: var(--fs-lg); }
}

/* ============================================================
 * 苹果风统一层 §1 —— 设计令牌（覆盖文件头部 :root，同特异性后者胜）
 * 说明：中性底 + 保留四大组件语义色（仅作强调，不再大面积铺色）。
 * 原语义色相不变，只新增「淡染 / 描边 / 可读深字」三档派生色。
 * ============================================================ */
:root {
  /* ---------- 中性底色（苹果式） ---------- */
  --c-bg: #FFFFFF;          /* 页面底：纯白 */
  --c-bg-alt: #F5F5F7;      /* 浅灰分带：页头 / 页脚 / 面板 */
  --c-elev: #FAFAFA;        /* 内嵌面板：表格斑马纹 / 内嵌块 */
  --c-card: #FFFFFF;

  /* ---------- 文字阶梯（对比度均 ≥ 4.5:1，保证投屏可读） ---------- */
  --c-ink: #1D1D1F;         /* 主文字 */
  --c-ink-2: #3C3C43;       /* 次级标题 */
  --c-sub: #5C5C64;         /* 正文辅助 */
  --c-dim: #86868B;         /* 元信息 / 脚注（仅用于非关键小字） */

  /* ---------- 线条 ---------- */
  --c-line: #E3E3E6;            /* 分隔线 / 卡片描边 */
  --c-line-strong: #8E8E93;     /* 交互控件描边（白底 3.1:1，可点击暗示） */

  /* ---------- 系统强调色 ---------- */
  --c-accent: #0071E3;
  --c-accent-deep: #0058B0;

  /* ---------- 组件语义色（教学语义，色相保持原样） ---------- */
  --c-per: #3E9BFF;    --c-per-deep: #1F7AE0;
  --c-plan: #FF9F2E;   --c-plan-deep: #E07E0A;
  --c-mem: #2FBF71;    --c-mem-deep: #179A55;
  --c-exe: #FF5A5F;    --c-exe-deep: #E23C41;
  --c-brain: #F6B93B;  --c-brain-deep: #C98A12;
  --c-ori: #8E44AD;    --c-ori-deep: #6C3483;
  --c-pg: #8A5CF6;     --c-pg-deep: #6B3FD1;   /* 智能体实验室（综合实战，与页头图标同紫） */
  --c-works: #0E9F87;  --c-works-deep: #0B7A68; /* 作品展示（作品集，青绿——与七个实验室区分） */

  /* ---------- 语义色派生：淡染 / 描边 / 可读深字 ---------- */
  --per-tint: #EDF5FF;   --per-line: #B9D9FF;   --per-ink: #14629E;
  --plan-tint: #FFF4E5;  --plan-line: #FFDCA8;  --plan-ink: #98550A;
  --mem-tint: #E6F7EE;   --mem-line: #A8E5C6;   --mem-ink: #106B3D;
  --exe-tint: #FFECEC;   --exe-line: #FFBFC2;   --exe-ink: #A32026;
  --brain-tint: #FFF6E0; --brain-line: #F5DCA0; --brain-ink: #8A5C00;
  --ori-tint: #F4EAFB;   --ori-line: #DCC0F0;   --ori-ink: #5B2C7A;
  --pg-tint: #F2ECFE;    --pg-line: #D6C5F8;    --pg-ink: #5B2FB8;
  --works-tint: #E4F5F1; --works-line: #A6DDD1; --works-ink: #0A5C4F;

  /* ---------- 圆角阶梯 ---------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --radius: 20px;
  --r-lg: 28px;
  --r-pill: 980px;

  /* ---------- 间距阶梯（沿用 4/8 体系，避免既有布局跳动） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ---------- 阴影阶梯（苹果式低饱和多层，替代原来的暖棕阴影） ---------- */
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .10);
  --shadow-hover: 0 18px 44px rgba(0, 0, 0, .13);

  /* ---------- 字号阶梯 ---------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-h2: 28px;
  --fs-h1: 34px;

  /* ---------- 行高阶梯 ---------- */
  --lh-tight: 1.2;
  --lh-base: 1.65;
  --lh-loose: 1.75;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .15s;
  --t-base: .24s;
  --t-slow: .4s;

  /* ---------- 层级与顶栏 ---------- */
  --z-topbar: 100;
  --z-modal: 200;
  --z-toast: 300;
  --topbar-h: 64px;   /* 窄屏 108px 的覆写在原 §9 媒体查询内，位于本块之前 → 仍生效 */
}

/* ============================================================
 * 苹果风统一层 §2 —— 全局排版基线与页面节奏
 * ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
               "PingFang SC", "Helvetica Neue", "Microsoft YaHei",
               "Hiragino Sans GB", system-ui, sans-serif;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 中文正文不做负字距（会挤成一团），仅大标题收紧 */
h1, h2, h3, .hero h1, .lab-head h1, .lh-title, .ld-title {
  letter-spacing: -.01em;
}
p { line-height: var(--lh-loose); }

a { color: var(--c-accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-accent-deep); text-decoration: underline; }

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}
.section.active { animation: appleFadeUp .45s var(--ease-out) both; }
@keyframes appleFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 首页主视觉：苹果式大标题 */
.hero { padding: 40px 16px 12px; }
.hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: var(--lh-tight); }
.hero h1 .grad {
  background: linear-gradient(92deg, var(--c-per) 0%, var(--c-brain) 50%, var(--c-exe) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { font-size: var(--fs-md); color: var(--c-sub); margin-top: 12px; }

/* 核心公式条：由米黄底改为浅灰分带 */
.formula-strip {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: none;
}
.formula-title { color: var(--c-sub); font-size: var(--fs-xs); }
.formula-note { color: var(--c-sub); }
.f-op { color: var(--c-sub); }

/* 总装图连接线：由暖灰改为中性 */
.assembly svg.lines path { stroke: var(--c-line-strong); }

/* 代码块 / 表格：统一为中性 */
code { background: var(--c-bg-alt); color: var(--exe-ink); border-radius: var(--r-xs); }
pre { background: #1D1D1F; color: #E8E8ED; }
thead { background: var(--c-bg-alt); }
th { color: var(--c-ink-2); border-bottom: 1px solid var(--c-line); }
td { border-bottom: 1px solid var(--c-line); }
tbody tr:hover { background: var(--c-bg-alt); }
tbody tr:nth-child(even) { background: var(--c-elev); }
tbody tr:nth-child(even):hover { background: var(--c-bg-alt); }

/* 徽章 */
.chip, .tag, .badge { font-size: var(--fs-xs); }
.chip-gray { background: var(--c-bg-alt); color: var(--c-sub); }

/* 滚动条中性化 */
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #C7C7CC; border: 2px solid #fff; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #AEAEB2; }

/* ============================================================
 * 苹果风统一层 §3 —— 组件统一（导航 / 卡片 / 按钮 / 表单 / 提示框 / 页头）
 * ============================================================ */

/* ---------- 3.1 顶部导航：毛玻璃 + 细分隔线 ---------- */
.topbar {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  box-shadow: none;
  z-index: var(--z-topbar);
}
.topbar-inner { max-width: 1200px; padding: 10px 24px; gap: 16px; }

.brand { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--c-accent) 0%, #41A3FF 100%);
  box-shadow: 0 2px 8px rgba(0, 113, 227, .3);
}
.brand small { font-size: var(--fs-xs); font-weight: 400; color: var(--c-dim); }

.nav { gap: 2px; margin-left: auto; }
.nav-tab {
  background: transparent;
  color: var(--c-ink-2);
  font-size: 15px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-base) var(--ease);
}
.nav-tab:hover { background: rgba(0, 0, 0, .05); color: var(--c-ink); transform: none; }
.nav-tab:active { transform: scale(.97); }
/* 激活态：语义淡染底 + 语义深字 + 圆点（与头部 :root 同特异性，后置生效） */
.nav-tab.active {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
  font-weight: 600;
}
.nav-tab.active::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .9; flex: 0 0 auto;
}
.nav-tab[data-sec="home"].active       { background: var(--brain-tint); color: var(--brain-ink); }
.nav-tab[data-sec="perception"].active { background: var(--per-tint);   color: var(--per-ink); }
.nav-tab[data-sec="planner"].active    { background: var(--plan-tint);  color: var(--plan-ink); }
.nav-tab[data-sec="memory"].active     { background: var(--mem-tint);   color: var(--mem-ink); }
.nav-tab[data-sec="executor"].active   { background: var(--exe-tint);   color: var(--exe-ink); }
.nav-tab[data-sec="origin"].active     { background: var(--ori-tint);   color: var(--ori-ink); }
.nav-tab[data-sec="playground"].active { background: var(--ori-tint);   color: var(--ori-ink); }

.icon-btn {
  width: 36px; height: 36px; background: transparent; color: var(--c-ink-2);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: rgba(0, 0, 0, .05); color: var(--c-ink); transform: scale(1.06); }
.icon-btn:active { transform: scale(.94); }

/* ---------- 3.2 卡片：细描边 + 柔和阴影 ---------- */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 28px 30px;
  margin-bottom: var(--sp-5);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0, 0, 0, .10);
}

/* 语义色脊：保留组件辨识度，收窄为 4px 并跟随卡片圆角 */
.card-enhanced .card-accent { width: 4px; border-radius: 20px 0 0 20px; opacity: .9; }

/* 卡片标题 / 副标题 / 小标题 */
.card h2, .card-enhanced h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  letter-spacing: -.01em;
}
.card h2 .chip, .card-enhanced h2 .chip { font-size: var(--fs-xs); padding: 4px 12px; border-radius: var(--r-pill); }
.card .sub, .card-enhanced .sub { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--c-sub); }
.card h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  border-left: 3px solid var(--c-accent);
  padding-left: 12px;
  margin: 20px 0 12px;
  color: var(--c-ink);
}
.card h4 { font-size: var(--fs-base); color: var(--c-ink-2); }

/* 小标题左边框：中性灰（不带语义色） */
.card-enhanced h3 { border-left-color: var(--c-line-strong); }

/* 编号徽章 / 出处脚注（徽章颜色已在 §2 统一为起源紫） */
.card-src { color: var(--c-dim); border-top: 1px dashed var(--c-line); }

/* ---------- 3.3 提示框：中性底 + 语义左边框 ---------- */
.card .tip {
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-accent);
  color: var(--c-ink-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 18px;
  font-size: 14px;
  line-height: var(--lh-loose);
}
/* 用 .card .tip-x 保证特异性与 .card .tip 相同，后置生效（原 .tip-x 特异性不足，背景其实一直没生效） */
.card .tip-info   { background: var(--per-tint);   border-left-color: var(--c-per);   color: var(--per-ink); }
.card .tip-warn   { background: var(--plan-tint);  border-left-color: var(--c-plan);  color: var(--plan-ink); }
.card .tip-ok     { background: var(--mem-tint);   border-left-color: var(--c-mem);   color: var(--mem-ink); }
.card .tip-danger { background: var(--exe-tint);   border-left-color: var(--c-exe);   color: var(--exe-ink); }

/* 金句框（起源实验室高频）：由米黄渐变改为淡金淡染 */
.gold-box, .cb-tip, .fq-tip, .bb-conclusion, .acc-conclusion, .summary-think, .adv-tagline {
  background: var(--brain-tint);
  border: 1px solid var(--brain-line);
  border-left: 3px solid var(--c-brain);
  border-radius: var(--r-sm);
  color: var(--brain-ink);
  line-height: var(--lh-loose);
}
.gold-box b, .cb-tip b, .fq-tip b, .bb-conclusion b,
.acc-conclusion b, .summary-think b, .adv-tagline b { color: var(--brain-ink); }

/* ---------- 3.4 按钮 ---------- */
.btn {
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              opacity var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-1); }
.btn:disabled { opacity: .45; transform: none; box-shadow: none; }
.btn-gray  { background: var(--c-line-strong); }
.btn-ghost { background: var(--c-bg-alt); color: var(--c-ink-2); }
.btn-ghost:hover { background: #EBEBEF; }
.btn-sm { padding: 7px 15px; font-size: var(--fs-sm); }

/* ---------- 3.5 表单控件 ---------- */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  font-size: var(--fs-base);
  padding: 11px 15px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: var(--c-dim); }
input:focus, textarea:focus, select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .15);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #AEAEB2; }
label.field { font-size: var(--fs-base); font-weight: 600; }
label.field small { color: var(--c-sub); font-size: var(--fs-sm); line-height: var(--lh-loose); }

/* ---------- 3.6 选项 / 交互胶囊 ---------- */
.opt, .adv-chip, .cmp-req-btn {
  border: 1.5px solid var(--c-line-strong);
  background: #fff;
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-weight: 600;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.opt:hover, .adv-chip:hover, .cmp-req-btn:hover {
  border-color: var(--c-accent);
  background: var(--c-elev);
  transform: translateY(-1px);
}
.opt:active, .adv-chip:active, .cmp-req-btn:active { transform: translateY(0) scale(.985); }
.opt.sel, .adv-chip.sel, .adv-chip.active, .cmp-req-btn.active {
  border-color: var(--c-accent);
  background: rgba(0, 113, 227, .08);
  color: var(--c-accent-deep);
}

/* 答题反馈：统一为语义淡染（原规则带 !important，此处同样加 !important 才能覆盖） */
.opt.correct, .qg-opt.correct, .qz-opt.correct, .ag-slot.correct {
  border-color: var(--c-mem) !important;
  background: var(--mem-tint) !important;
  color: var(--mem-ink) !important;
}
.opt.wrong, .qg-opt.wrong, .qz-opt.wrong, .ag-slot.wrong {
  border-color: var(--c-exe) !important;
  background: var(--exe-tint) !important;
  color: var(--exe-ink) !important;
}
.qz-opt.correct .qz-opt-letter, .qg-opt.correct .qg-opt-letter {
  background: var(--c-mem) !important;
  color: #fff !important;
}
.qz-opt.wrong .qz-opt-letter, .qg-opt.wrong .qg-opt-letter {
  background: var(--c-exe) !important;
  color: #fff !important;
}
.role-msg.selected {
  border-color: var(--c-per) !important;
  background: var(--per-tint) !important;
  box-shadow: 0 0 0 3px rgba(62, 155, 255, .18);
}
.cb-wf-done .cb-wf-phase { background: var(--mem-tint) !important; color: var(--mem-ink) !important; }

/* ---------- 3.7 游戏 / 内嵌面板 ---------- */
.game-box {
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  padding: 18px;
}
.game-q { font-size: var(--fs-md); font-weight: 700; }
.game-q .qno {
  background: var(--c-brain); color: #fff; width: 26px; height: 26px;
  border-radius: 50%; font-size: var(--fs-sm);
}
.quiz-feedback { font-size: var(--fs-base); }

/* ---------- 3.8 实验室页头：浅灰分带 ---------- */
.lab-head {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lab-head h1, .lab-head .lh-title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); color: var(--c-ink); }
.lab-head .meta, .lab-head .lh-sub { font-size: var(--fs-sm); color: var(--c-sub); line-height: var(--lh-loose); }
.lab-icon { width: 56px; height: 56px; border-radius: 16px; box-shadow: var(--shadow-2); }
.lab-head .btn { margin-left: auto; }

/* 课次分隔条：保留语义渐变（作为视觉分带），强化排版 */
.lesson-divider {
  background: linear-gradient(92deg, var(--c-ori) 0%, var(--c-ori-deep) 100%);
  border-radius: var(--r-md);
  padding: 16px 22px;
  margin: var(--sp-6) 0 var(--sp-5);
  box-shadow: var(--shadow-2);
  gap: 14px;
}
.ld-num { background: rgba(255, 255, 255, .22); border-radius: var(--r-pill); font-size: var(--fs-sm); padding: 4px 12px; }
.ld-title { font-size: var(--fs-xl); font-weight: 700; }
.ld-desc { font-size: var(--fs-sm); }

/* 学习目标卡：外框中性（去掉左侧语义色条，仅保留中性描边），语义色收敛到「标题 + 序号球」 */
.lesson-goal {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin-bottom: var(--sp-5);
  box-shadow: none;
}
.lesson-goal h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); margin-bottom: 12px; }
/* 标题随所在页语义色 */
.lesson-goal.card-per   h3 { color: var(--per-ink); }
.lesson-goal.card-plan  h3 { color: var(--plan-ink); }
.lesson-goal.card-mem   h3 { color: var(--mem-ink); }
.lesson-goal.card-exe   h3 { color: var(--exe-ink); }
.lesson-goal.card-brain h3 { color: var(--brain-ink); }
.lesson-goal.card-ori   h3 { color: var(--ori-ink); }
.lesson-goal.card-pg    h3 { color: var(--pg-ink); }
/* 序号球：改随所在页语义色（tint 底 + ink 字 + line 描边），替换原来统一的蓝色 */
.lesson-goal.card-per   .goal-num { background: var(--per-tint);   color: var(--per-ink);   border: 1px solid var(--per-line); }
.lesson-goal.card-plan  .goal-num { background: var(--plan-tint);  color: var(--plan-ink);  border: 1px solid var(--plan-line); }
.lesson-goal.card-mem   .goal-num { background: var(--mem-tint);   color: var(--mem-ink);   border: 1px solid var(--mem-line); }
.lesson-goal.card-exe   .goal-num { background: var(--exe-tint);   color: var(--exe-ink);   border: 1px solid var(--exe-line); }
.lesson-goal.card-brain .goal-num { background: var(--brain-tint); color: var(--brain-ink); border: 1px solid var(--brain-line); }
.lesson-goal.card-ori   .goal-num { background: var(--ori-tint);   color: var(--ori-ink);   border: 1px solid var(--ori-line); }
.lesson-goal.card-pg    .goal-num { background: var(--pg-tint);    color: var(--pg-ink);    border: 1px solid var(--pg-line); }

/* 阶段胶囊 / meta 胶囊 */
.pill-per   { background: var(--per-tint);   color: var(--per-ink); }
.pill-plan  { background: var(--plan-tint);  color: var(--plan-ink); }
.pill-mem   { background: var(--mem-tint);   color: var(--mem-ink); }
.pill-exe   { background: var(--exe-tint);   color: var(--exe-ink); }
.pill-brain { background: var(--brain-tint); color: var(--brain-ink); }
.pill-ori   { background: var(--ori-tint);   color: var(--ori-ink); }
.meta-pill {
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 3px 11px;
}

/* 阶段徽章 / 数字序号（进阶原理卡） */
.card-enhanced .deep-term .deep-no { background: var(--c-bg-alt); color: var(--c-ink-2); }
.card-enhanced .deep-en { color: var(--c-dim); }
/* 进阶原理卡：图标徽章（有待替代编号，视觉更轻） */
.card-enhanced .deep-term .deep-ico {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: var(--brain-tint); color: var(--c-brain-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.deep-count { color: var(--c-sub); }
/* ===== END §3 ===== */

/* ============================================================
 * 苹果风统一层 §4 —— 弹窗 / Toast / 页脚
 * ============================================================ */
.modal-mask {
  background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  padding: 24px;
}
.modal {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 28px 30px;
  max-width: 520px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24);
  max-height: 86vh;
  overflow-y: auto;
  animation: appleModalIn .32s var(--ease-out) both;
}
@keyframes appleModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal h3 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 16px; color: var(--c-ink); }
.modal .m-actions { gap: var(--sp-3); margin-top: 22px; }

/* 弹窗正文：由内联紫色改为系统强调色 */
.modal-welcome-tip {
  background: var(--c-bg-alt);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: var(--lh-loose);
}
.modal-link { color: var(--c-accent); font-weight: 600; }
.modal-link:hover { color: var(--c-accent-deep); }
.modal-key-input { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

/* Toast：底部居中深色胶囊 */
.toast-box {
  top: auto;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  background: rgba(29, 29, 31, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: var(--fs-base);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.toast-box.show .toast { opacity: 1; transform: none; }
.toast.error { background: rgba(226, 60, 65, .95); }
.toast.success { background: rgba(23, 154, 85, .95); }

/* 页脚：浅灰分带 */
footer {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
  color: var(--c-sub);
  font-size: var(--fs-sm);
  padding: 14px 24px 24px;
  line-height: var(--lh-loose);
}
footer b { color: var(--c-ink); font-weight: 600; }
.footer-sub { color: var(--c-dim); margin-top: 3px; }

/* ============================================================
 * 苹果风统一层 §5 —— 各栏目图表容器收口 + 残留米白色替换
 * 原则：只换「底/描边/文字」三属性，布局（grid/flex）一律不动。
 * ============================================================ */

/* ---------- 感知器 ---------- */
.role-box {
  background: var(--c-elev);
  border: 1.5px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  padding: 14px;
  transition: transform var(--t-base) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.role-box:hover {
  border-color: var(--c-per);
  background: var(--per-tint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.role-item-chip {
  background: #fff;
  border: 1.5px solid var(--per-line);
  color: var(--per-ink);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  font-size: var(--fs-sm);
}
.role-head { font-weight: 700; color: var(--c-ink); }
.role-desc { color: var(--c-sub); }

/* 拓展卡：各厂商「消息角色」对照（role-vendor）
 * 角色徽章颜色由 JS 按角色语义色注入（system→ori / user→mem / assistant→plan / tool→exe） */
/* 双类提升优先级：.pf-demo-grid 的基础定义在文件中位置更靠后，单类会覆盖失效 */
.pf-demo-grid.role-vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rv-role {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  padding: 2.5px 9px; border-radius: 6px; border: 1px solid;
}
.rv-note { font-size: 12.5px; color: var(--c-sub); line-height: 1.65; }
@media (max-width: 720px) {
  .pf-demo-grid.role-vendor-grid { grid-template-columns: 1fr; }
}

/* ---------- 记忆器 ---------- */
.ml-row { background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.notebook {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: none;
}
.notebook::before {
  background: repeating-linear-gradient(180deg, transparent 0 22px, var(--c-line) 22px 24px);
}
.notebook h4 { color: var(--c-ink-2); }
.notebook .line { border-bottom: 1px dashed var(--c-line); color: var(--c-ink-2); }
.notebook .line b { color: var(--c-ink); }
.notebook .empty { color: var(--c-dim); }

/* ---------- 总装图 / Harness ---------- */
.hd-outer {
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
}
.hd-msg, .fc-json {
  background: #F5F5F7;
  color: var(--c-ink);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
}

/* ---------- 起源实验室：Transformer 架构图（原米紫底 + 8 色糖果块收口） ---------- */
.transformer-arch {
  background: var(--c-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.ta-title { color: var(--c-ink); font-size: var(--fs-md); font-weight: 700; }
.ta-desc { color: var(--c-sub); font-size: var(--fs-sm); }
.ta-encoder .ta-side-title { background: var(--per-tint);  color: var(--per-ink);  border-radius: var(--r-xs); }
.ta-decoder .ta-side-title { background: var(--ori-tint);  color: var(--ori-ink);  border-radius: var(--r-xs); }
.ta-block {
  border-radius: var(--r-xs);
  font-weight: 600;
  padding: 9px 11px;
  font-size: 11px;
}
.ta-block-input    { background: var(--plan-tint);  color: var(--plan-ink);  border: 1px solid var(--plan-line); }
.ta-block-pos      { background: var(--exe-tint);   color: var(--exe-ink);   border: 1px solid var(--exe-line); }
.ta-block-attn     { background: var(--mem-tint);   color: var(--mem-ink);   border: 1px solid var(--mem-line); }
.ta-block-masked   { background: var(--brain-tint); color: var(--brain-ink); border: 1px solid var(--brain-line); }
.ta-block-cross    { background: var(--per-tint);   color: var(--per-ink);   border: 1px solid var(--per-line); }
.ta-block-addnorm  { background: var(--c-bg-alt);   color: var(--c-sub);     border: 1px solid var(--c-line); }
.ta-block-ffn      { background: var(--ori-tint);   color: var(--ori-ink);   border: 1px solid var(--ori-line); }
.ta-block-linear   { background: linear-gradient(135deg, var(--c-ori), var(--c-ori-deep)); color: #fff; border: none; }
.ta-tip { color: var(--plan-ink); }
.ta-note { color: var(--c-dim); }

/* --- 左图右解：论文原图卡片 ⇄ 逐部分解读卡片，两张卡片水平并列 --- */
.ta-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.ta-duo .ta-image-wrap,
.ta-duo .ta-explain {
  margin: 0;
  padding: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.ta-duo .ta-image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ta-duo .ta-image {
  max-height: 515px;
  width: auto;
}
/* 架构图切换：中文重绘版 ⇄ 论文英文原图（两图比例接近，切换不跳动） */
.ta-fig-switch { display: flex; gap: 6px; margin-bottom: 10px; }
.ta-fig-btn {
  font-family: inherit; cursor: pointer;
  font-size: var(--fs-xs, 12.5px); font-weight: 600;
  padding: 5px 14px; border-radius: 999px;
  background: var(--c-bg-alt); color: var(--c-sub);
  border: 1.5px solid var(--c-line);
  transition: color var(--t-fast, .15s), border-color var(--t-fast, .15s), background var(--t-fast, .15s);
}
.ta-fig-btn:hover { color: var(--ori-ink); border-color: var(--ori-line); }
.ta-fig-btn.is-on {
  background: var(--ori-tint); color: var(--ori-ink); border-color: var(--c-ori);
}
/* 架构图点击放大：全屏浮层（点图打开，点浮层任意处或按 Esc 关闭） */
.transformer-arch .ta-image { cursor: zoom-in; }
.fig-zoom {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(18, 14, 26, .9);
  cursor: zoom-out;
  animation: figZoomIn .18s ease-out;
}
.fig-zoom[hidden] { display: none; }
@keyframes figZoomIn { from { opacity: 0; } to { opacity: 1; } }
.fig-zoom img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.fig-zoom-close {
  position: absolute; top: 14px; right: 18px;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 26px; line-height: 1;
  transition: background var(--t-fast, .15s);
}
.fig-zoom-close:hover { background: rgba(255, 255, 255, .32); }
body.is-zoomed { overflow: hidden; }
@media (max-width: 560px) { .fig-zoom { padding: 12px; } }
.ta-duo .ta-source { margin-top: 0; }
.ta-duo .ta-explain .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ta-duo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 职业演变：Material 色 → 语义色 ---------- */
.job-card-going,
.job-card-future,
.job-card-gone {
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
}
.job-card-going:hover  { border-color: var(--c-plan); box-shadow: var(--shadow-2); }
.job-card-future:hover { border-color: var(--c-per);  box-shadow: var(--shadow-2); }
.job-icon-gone   { background: linear-gradient(135deg, #B0B0B6, #7C7C82) !important; }
.job-icon-going  { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)) !important; }
.job-icon-future { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)) !important; }
.job-card-gone .job-title   { color: var(--c-sub) !important; }
.job-card-going .job-title  { color: var(--plan-ink) !important; }
.job-card-future .job-title { color: var(--per-ink) !important; }
.job-tag-gone   { color: var(--c-sub); background: var(--c-bg-alt); border-radius: var(--r-xs); }
.job-tag-risk-高   { color: var(--exe-ink);  background: var(--exe-tint);  border-radius: var(--r-xs); }
.job-tag-risk-中高 { color: var(--plan-ink); background: var(--plan-tint); border-radius: var(--r-xs); }
.job-tag-risk-中   { color: var(--brain-ink); background: var(--brain-tint); border-radius: var(--r-xs); }
.job-tag-future { color: var(--per-ink); background: var(--per-tint); border-radius: var(--r-xs); }

/* ---------- 职业演变：阶段容器淡语义底色 + 子卡片瘦身（原 240px 高改自适应紧凑卡） ---------- */
.jobs-block { border-radius: var(--r-lg); padding: 18px; }
.jobs-block-gone   { background: var(--c-bg-alt);  border: 1px solid var(--c-line); }
.jobs-block-going  { background: var(--plan-tint); border: 1px solid var(--plan-line); }
.jobs-block-new    { background: var(--mem-tint);  border: 1px solid var(--mem-line); }
.jobs-block-future { background: var(--per-tint);  border: 1px solid var(--per-line); }

.jb-icon { width: 30px; height: 30px; border-radius: 9px; }
.jb-icon-gone   { background: linear-gradient(135deg, #B0B0B6, #7C7C82); }
.jb-icon-going  { background: linear-gradient(135deg, var(--c-plan), var(--c-plan-deep)); }
.jb-icon-new    { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)); }
.jb-icon-future { background: linear-gradient(135deg, var(--c-per), var(--c-per-deep)); }
.jb-title { color: var(--c-ink); font-size: var(--fs-md); }
.jb-desc {
  color: var(--c-sub); font-size: var(--fs-sm);
  margin-bottom: 14px; padding-bottom: 0; border-bottom: none;
}

/* 网格：自适应 4 列，间距收紧（原 200px/14px 偏松） */
.jobs-block .job-grid {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
  min-height: 0;
}

/* 子卡片：图标与名称同行、左对齐、高度由内容决定 */
.jobs-block .job-card {
  min-height: 0;
  padding: 13px 14px;
  text-align: left;
  align-items: stretch;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.jobs-block .job-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-2);
}
.job-card .jc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.job-card .jc-head .job-icon { width: 30px; height: 30px; border-radius: 9px; margin: 0; flex-shrink: 0; }
.job-card .jc-head .job-title { flex: 1; min-width: 0; margin-bottom: 0; font-size: var(--fs-base); line-height: 1.35; }
.job-card .jc-head .job-tag { margin: 0 0 0 auto; flex-shrink: 0; white-space: nowrap; }
.job-card .job-desc {
  display: block; text-align: left; margin-bottom: 0;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--c-sub);
}
.job-card .job-advice {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 9px;
  padding: 7px 10px; border-radius: var(--r-xs);
  background: var(--c-bg-alt); color: var(--c-ink-2);
  font-size: var(--fs-sm); line-height: 1.55;
}
.job-card .job-advice .icon { flex-shrink: 0; margin-top: 2px; color: var(--plan-ink); }
.job-card .job-tag,
.job-card .job-salary {
  align-self: flex-start;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-xs);
}
.jobs-block .job-icon-new { background: linear-gradient(135deg, var(--c-mem), var(--c-mem-deep)) !important; }
.jobs-block .job-card-new .job-title { color: var(--mem-ink) !important; }
.jobs-block .job-salary { color: var(--brain-ink); background: var(--brain-tint); }

/* ---------- 残留米白硬编码统一替换 ---------- */
.chip-suggest { background: var(--c-bg-alt); color: var(--c-ink-2); border: 1px solid var(--c-line); border-radius: var(--r-pill); }
.chip-suggest:hover { background: #EBEBEF; }
.cmp-table thead th { background: var(--c-bg-alt); color: var(--c-ink-2); }
.cmp-score span { background: var(--c-bg-alt); color: var(--c-ink-2); border-radius: var(--r-xs); }
.flow-bar, .fr-bar { background: var(--c-line); }
.flow-count { background: var(--c-bg-alt); color: var(--c-ink-2); border-radius: var(--r-xs); }
.flow-meta { color: var(--c-sub); }
.msg.tool-note { background: var(--c-bg-alt); color: var(--c-ink-2); border-left-color: var(--c-brain); }
blockquote { background: var(--c-bg-alt); border-left: 3px solid var(--c-brain); color: var(--c-ink-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.adv-tagline { color: var(--brain-ink); }
/* ===== END §5 ===== */

/* ============================================================
 * 苹果风统一层 §6 —— 起源实验室「大模型工作原理」流程图
 * 由 js/lab-origin.js 的内联样式迁移而来（文本节点一字未改）
 * ============================================================ */
.llmx-phase-head {
  margin: 22px 0 10px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: .5px;
}
.llmx-phase-head.is-understand { color: var(--per-ink); }
.llmx-phase-head.is-generate   { color: var(--plan-ink); }

.llmx-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
  flex-wrap: wrap;
}
.llmx-step {
  flex: 1 1 240px;
  min-width: 0;
  padding: 16px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.llmx-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.llmx-step.is-understand { background: var(--per-tint);  border: 1px solid var(--per-line); }
.llmx-step.is-generate   { background: var(--plan-tint); border: 1px solid var(--plan-line); }

.llmx-step-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.llmx-step-no {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; color: #fff; font-weight: 700; font-size: var(--fs-base);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
}
.llmx-step.is-understand .llmx-step-no { background: linear-gradient(140deg, var(--c-per), var(--c-per-deep)); }
.llmx-step.is-generate   .llmx-step-no { background: linear-gradient(140deg, var(--c-plan), var(--c-plan-deep)); }
.llmx-step-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
  line-height: 1.35;
}

.llmx-step-key {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
}
.llmx-step.is-understand .llmx-step-key { color: var(--per-ink);  background: rgba(62, 155, 255, .12); }
.llmx-step.is-generate   .llmx-step-key { color: var(--plan-ink); background: rgba(255, 159, 46, .14); }

.llmx-step-desc { font-size: var(--fs-sm); color: var(--c-sub); line-height: var(--lh-base); }

.llmx-arrow {
  display: flex; align-items: center; flex: 0 0 auto; padding: 0 2px;
  font-size: 22px; font-weight: 700; color: var(--c-line-strong);
}
.llmx-flow.is-understand .llmx-arrow { color: var(--c-per); }
.llmx-flow.is-generate   .llmx-arrow { color: var(--c-plan); }

.llmx-bridge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 26px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--shadow-2);
}
.llmx-bridge.is-mid  { background: linear-gradient(92deg, var(--c-per), var(--c-ori)); }
.llmx-bridge.is-out  { background: linear-gradient(92deg, var(--c-mem), var(--c-mem-deep)); }
.llmx-bridge-wrap { text-align: center; margin: 10px 0 22px; }

/* ============================================================
 * 苹果风统一层 §7 —— 动效规范 + 响应式收口
 * ============================================================ */

/* ---------- 7.1 统一焦点环 ---------- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.btn:focus-visible, .opt:focus-visible, .nav-tab:focus-visible, .icon-btn:focus-visible,
.adv-chip:focus-visible, .cmp-req-btn:focus-visible, .adv-nav-btn:focus-visible,
.adv-dot:focus-visible, .adv-jump:focus-visible, .role-msg:focus-visible, .mic-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 113, 227, .18);
}

/* ---------- 7.2 滚动进场（js/reveal.js 给 <html> 加 .js-reveal 后才隐藏，禁用 JS 不会白屏） ---------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* ---------- 7.3 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal,
  .js-reveal .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .section.active, .modal { animation: none; }
  .btn:hover, .card:hover, .opt:hover, .role-box:hover, .llmx-step:hover { transform: none; }
}

/* ---------- 7.4 统一断点：1068 / 734 ---------- */
@media (max-width: 1068px) {
  main { padding: 28px 20px 80px; }
  .topbar-inner { padding: 10px 20px; }
  .card { padding: 24px 22px; }
  .hero h1 { font-size: 34px; }
  .lab-head h1, .lab-head .lh-title { font-size: var(--fs-xl); }
}

@media (max-width: 734px) {
  main { padding: 20px 16px 72px; }
  .card { padding: 20px 18px; margin-bottom: var(--sp-4); border-radius: var(--r-md); }
  .card h2, .card-enhanced h2 { font-size: var(--fs-lg); }
  .hero { padding: 24px 12px 8px; }
  .hero h1 { font-size: 28px; letter-spacing: -.5px; }
  .lab-head { padding: 18px; border-radius: var(--r-md); }
  .lab-head h1, .lab-head .lh-title { font-size: var(--fs-lg); }
  .lesson-divider { flex-wrap: wrap; padding: 14px 16px; }
  .ld-desc { margin-left: 0; flex-basis: 100%; }
  .ld-title { font-size: var(--fs-lg); }
  .modal { padding: 22px 20px; border-radius: var(--r-md); }
  footer { padding: 10px 18px 18px; }

  /* 起源实验室流程图：窄屏改为纵向单列，隐藏横向箭头 */
  .llmx-flow { flex-direction: column; }
  .llmx-arrow { display: none; }
  .llmx-step { flex: 1 1 auto; }
  .llmx-bridge { padding: 9px 18px; font-size: var(--fs-xs); }

  /* Transformer 架构图窄屏降级 */
  .ta-diagram { grid-template-columns: 1fr; }
}

/* ============================================================
 * 苹果风统一层 §8 —— 页头图标语义色（由 lab-perception.js 内联渐变迁移）
 * ============================================================ */
.lab-icon[data-color="per"]   { background: linear-gradient(140deg, var(--c-per),   var(--c-per-deep)); }
.lab-icon[data-color="plan"]  { background: linear-gradient(140deg, var(--c-plan),  var(--c-plan-deep)); }
.lab-icon[data-color="mem"]   { background: linear-gradient(140deg, var(--c-mem),   var(--c-mem-deep)); }
.lab-icon[data-color="exe"]   { background: linear-gradient(140deg, var(--c-exe),   var(--c-exe-deep)); }
.lab-icon[data-color="brain"] { background: linear-gradient(140deg, var(--c-brain), var(--c-brain-deep)); }
.lab-icon[data-color="ori"]   { background: linear-gradient(140deg, var(--c-ori),   var(--c-ori-deep)); }
/* 智能体实验室（L13 综合实战）：与封面第 7 张导览卡同紫。
 * 补上这一条之后，七个板块的页头都走同一套 labHead()，不再有内联样式硬编码。 */
.lab-icon[data-color="pg"]    { background: linear-gradient(140deg, var(--c-pg),    var(--c-pg-deep)); }
/* 作品展示（作品集）：青绿，与七个实验室的页头同走一套 labHead()。 */
.lab-icon[data-color="works"] { background: linear-gradient(140deg, var(--c-works), var(--c-works-deep)); }

/* ============================================================
 * 苹果风统一层 §9 —— 封面页（Apple 官网极简风 · 纯白作用域）
 * 结构：主视觉（徽章+超大标题+主按钮+标签）→ 导览区（公式过渡句
 * + 七实验室卡片网格，第 7 张深色收尾）→ 页脚一行提示。
 * 纯白背景只作用于 #sec-cover，其余页面仍是暖米白主题。
 * ============================================================ */

/* 导航：封面页签的激活配色 */
.nav-tab[data-sec="cover"].active { background: linear-gradient(135deg, #7a5af5, #b14ce0); }

/* ---------- 9.1 主视觉 ---------- */
/* 公式分组：运算符与后一项绑定，避免折行时运算符（+ / =）被孤立在行尾 */
.formula-line .f-grp { display: inline-flex; align-items: center; gap: 10px; }
/* ---------- 9.0 封面画布（排版专属的“通栏纯白”） ----------
 * 站内令牌 --c-bg 本就是苹果式纯白，封面与全站底色一致；
 * 这里只负责在封面激活时放开 main 的宽度限制，让主视觉与导览区通栏。
 * （:has 选择器，Edge/Chrome 105+ 支持；旧浏览器退化为“容器内白底”，版式不受影响） */
#sec-cover { background: var(--c-bg); }
main:has(#sec-cover.active) { max-width: none; padding: 0; background: var(--c-bg); }

/* ---------- 9.1 主视觉 ---------- */
.cv-hero { text-align: center; padding: clamp(80px, 13vh, 120px) 24px 104px; }
.cv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-card); color: var(--c-sub);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.cv-title {
  margin-top: 24px; color: var(--c-ink);
  font-size: clamp(40px, 6.5vw, 68px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1;
}
.cv-grad {
  background: linear-gradient(94deg, var(--c-accent) 8%, #41a3ff 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cv-lead {
  max-width: 620px; margin: 20px auto 0;
  font-size: clamp(16px, 2vw, 20px); line-height: 1.65; color: var(--c-sub);
}
.cv-cta { margin-top: 36px; }
.cv-go {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-accent); color: #fff;
  font-size: 16.5px; font-weight: 600; padding: 14px 30px; border-radius: var(--r-pill);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cv-go:hover { background: var(--c-accent-deep); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 113, 227, .28); }
.cv-go:active { transform: translateY(0) scale(.985); }
.cv-go:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 2px; }
.cv-go .icon { transform: rotate(180deg); }

/* ---------- 9.2 功能标签行 ---------- */
.cv-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.cv-tags span {
  font-size: 12.5px; color: var(--c-sub); font-weight: 500;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); padding: 5px 14px;
}

/* ---------- 9.3 导览区（浅灰分区 + 白卡网格） ---------- */
.cv-nav { background: var(--c-bg-alt); padding: clamp(64px, 10vh, 96px) 24px; }
.cv-eyebrow {
  text-align: center; font-size: 14px; font-weight: 600;
  color: var(--c-sub); letter-spacing: .03em;
}
.cv-h2 {
  margin-top: 12px; text-align: center; color: var(--c-ink);
  font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.02em;
}
.cv-navsub {
  max-width: 560px; margin: 14px auto 0; text-align: center;
  font-size: 15.5px; color: var(--c-sub); line-height: 1.7;
}
.cv-grid {
  max-width: 1000px; margin: 52px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cv-card {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--c-card); border: none; border-radius: 20px; padding: 24px 26px;
  font-family: inherit; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: cvRise .5s ease-out backwards;
  animation-delay: calc(var(--i) * 55ms);
}
.cv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .09); }
.cv-card:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 2px; }
.cv-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.cv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-top b { font-size: 16.5px; color: var(--c-ink); letter-spacing: -.01em; }
.cv-course {
  font-size: 11.5px; font-weight: 600; color: var(--c-sub);
  background: var(--c-bg-alt); border-radius: var(--r-pill); padding: 2px 9px;
}
.cv-desc { font-size: 13.5px; color: var(--c-sub); line-height: 1.55; }
.cv-arrow {
  flex-shrink: 0; color: var(--c-dim); transform: rotate(180deg);
  transition: color .2s ease, transform .2s ease;
}
.cv-card:hover .cv-arrow { color: var(--c-accent); transform: rotate(180deg) translateX(-3px); }
@keyframes cvRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* 收尾卡（可选）：整行居中。
 * 新增「作品展示」后导览共 8 张卡，正好 2×4 铺满；本规则保留给将来
 * 需要单独居中的卡片使用，当前没有卡片用到 is-finale。 */
.cv-card.is-finale { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }

/* ---------- 9.4 页脚一行提示 ---------- */
.cv-foot {
  max-width: 720px; margin: 0 auto; padding: 44px 24px 64px;
  text-align: center; font-size: 12px; color: var(--c-sub); line-height: 1.8;
}

/* ---------- 9.5 响应式与动效偏好 ---------- */
@media (max-width: 900px) {
  .cv-grid { grid-template-columns: 1fr; gap: 14px; }
  .cv-card.is-finale { grid-column: auto; width: auto; }
  .cv-hero { padding: 72px 20px 80px; }
  .cv-nav { padding: 64px 20px; }
}
@media (max-width: 560px) {
  .cv-title { font-size: clamp(32px, 10vw, 44px); }
  .cv-card { padding: 20px; }
  .cv-foot { padding: 36px 20px 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-card { animation: none; }
  .cv-go, .cv-card, .cv-arrow { transition: none; }
}
/* ===== END §9 ===== */

/* ============================================================
 * 苹果风统一层 §10 —— 起源实验室三卡美化（图标化、低密度）
 * 取代旧 .fs-* / .domain-* / .prod-* / .evo-* 的呈现
 * （旧规则仍留在前文，但标记已不再引用它们）
 *   ① 深度思考：AI 替代不了的能力 / 应对策略 → 图标小卡两列
 *   ② 6 大领域智能体案例 → 色块图标 + 产品胶囊 + 图标行
 *   ③ AI 产品全景 → 类别色块 + 产品首字头像 + 一句话短卡
 *   ④ AI 四代进化 → 四色代际卡（代表 / 靠什么 / 还不会）
 * ============================================================ */

/* ---------- 10.1 深度思考：能力与策略 ---------- */
.fsx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fsx-col {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 18px 18px 14px;
}
.fsx-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 700; color: var(--c-ink); margin-bottom: 12px;
}
.fsx-ability .fsx-title .icon { color: var(--c-ori); }
.fsx-plan .fsx-title .icon { color: var(--c-accent); }
.fsx-list { display: flex; flex-direction: column; gap: 8px; }
.fsx-chip {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--c-bg-alt); border-radius: 12px; padding: 10px 12px;
}
.fsc-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--c-ori), var(--c-ori-deep));
}
.fsx-plan .fsc-ico { background: linear-gradient(140deg, var(--c-accent), var(--c-accent-deep)); }
.fsc-txt b { display: block; font-size: 14px; color: var(--c-ink); }
.fsc-txt i {
  display: block; font-style: normal; margin-top: 2px;
  font-size: 12.5px; color: var(--c-sub); line-height: 1.5;
}

/* ---------- 10.2 六大领域智能体案例 ---------- */
.dcx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dcx-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dcx-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.dc-per  .dcx-ico { background: linear-gradient(140deg, var(--c-per),  var(--c-per-deep)); }
.dc-exe  .dcx-ico { background: linear-gradient(140deg, var(--c-exe),  var(--c-exe-deep)); }
.dc-plan .dcx-ico { background: linear-gradient(140deg, var(--c-plan), var(--c-plan-deep)); }
.dc-mem  .dcx-ico { background: linear-gradient(140deg, var(--c-mem),  var(--c-mem-deep)); }
.dc-brain .dcx-ico { background: linear-gradient(140deg, var(--c-brain), var(--c-brain-deep)); }
.dc-ori  .dcx-ico { background: linear-gradient(140deg, var(--c-ori),  var(--c-ori-deep)); }
.dcx-head { display: flex; align-items: center; gap: 10px; }
.dcx-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.dcx-name { font-size: 15.5px; font-weight: 700; color: var(--c-ink); }
.dcx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dcx-pill {
  font-size: 12px; font-weight: 600; color: var(--c-ink-2);
  background: var(--c-bg-alt); border-radius: var(--r-pill); padding: 3px 10px;
}
.dcx-row { display: flex; gap: 7px; align-items: flex-start; }
.dcx-k {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; margin-top: 1px;
  font-size: 12px; font-weight: 700; color: var(--c-dim);
}
.dcx-v { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.55; }

/* ---------- 10.3 AI 产品全景 ---------- */
.pcx-list { display: flex; flex-direction: column; gap: 14px; }
.pcx-cat {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 18px; padding: 18px;
}
.pcx-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pcx-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.pc-per  .pcx-ico { background: linear-gradient(140deg, var(--c-per),  var(--c-per-deep)); }
.pc-plan .pcx-ico { background: linear-gradient(140deg, var(--c-plan), var(--c-plan-deep)); }
.pc-mem  .pcx-ico { background: linear-gradient(140deg, var(--c-mem),  var(--c-mem-deep)); }
.pc-exe  .pcx-ico { background: linear-gradient(140deg, var(--c-exe),  var(--c-exe-deep)); }
.pc-brain .pcx-ico { background: linear-gradient(140deg, var(--c-brain), var(--c-brain-deep)); }
.pc-ori  .pcx-ico { background: linear-gradient(140deg, var(--c-ori),  var(--c-ori-deep)); }
.pcx-txt b { display: block; font-size: 16px; color: var(--c-ink); }
.pcx-txt > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--c-sub); }
.pcx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pcx-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--c-bg-alt); border-radius: 12px; padding: 10px 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcx-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.pcx-ava {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.pc-per  .pcx-ava { background: linear-gradient(140deg, var(--c-per),  var(--c-per-deep)); }
.pc-plan .pcx-ava { background: linear-gradient(140deg, var(--c-plan), var(--c-plan-deep)); }
.pc-mem  .pcx-ava { background: linear-gradient(140deg, var(--c-mem),  var(--c-mem-deep)); }
.pc-exe  .pcx-ava { background: linear-gradient(140deg, var(--c-exe),  var(--c-exe-deep)); }
.pc-brain .pcx-ava { background: linear-gradient(140deg, var(--c-brain), var(--c-brain-deep)); }
.pc-ori  .pcx-ava { background: linear-gradient(140deg, var(--c-ori),  var(--c-ori-deep)); }
.pcx-info { flex: 1; min-width: 0; }
.pcx-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pcx-line b { font-size: 13.5px; color: var(--c-ink); }
.pcx-co {
  font-size: 10.5px; font-weight: 600; color: var(--c-dim);
  background: var(--c-card); border-radius: var(--r-pill); padding: 1px 7px;
}
.pcx-feat { display: block; margin-top: 3px; font-size: 12px; color: var(--c-sub); line-height: 1.5; }

/* ---------- 10.4 AI 四代进化 ---------- */
.evx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.evx-card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 18px; padding: 15px 14px;
  animation: evxRise .45s ease-out backwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes evxRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.evx-head { display: flex; align-items: center; justify-content: space-between; }
/* 配色收敛：四代统一紫色系（origin 主色），L1→L4 靠编号与图标区分，不靠颜色 */
.evx-level { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ori-deep); }
.evx-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--c-ori), var(--c-ori-deep));
  box-shadow: 0 4px 10px rgba(142, 68, 173, .25);
}
.evx-title { font-size: 16px; font-weight: 700; color: var(--c-ink); }
.evx-era { font-size: 11.5px; font-weight: 600; color: var(--c-dim); margin-top: -5px; }
.evx-ability {
  font-size: 13px; color: var(--c-ink-2); line-height: 1.6;
  background: var(--c-bg-alt); border-radius: 10px; padding: 8px 10px;
}
.evx-meta { display: flex; gap: 6px; align-items: flex-start; }
.evx-k {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; margin-top: 1px;
  font-size: 11.5px; font-weight: 700; color: var(--c-dim);
}
.evx-v { font-size: 12px; color: var(--c-sub); line-height: 1.55; }

/* ---------- 10.5 响应式 ---------- */
@media (max-width: 980px) {
  .dcx-grid { grid-template-columns: repeat(2, 1fr); }
  .pcx-grid { grid-template-columns: repeat(2, 1fr); }
  .evx-grid { grid-template-columns: repeat(2, 1fr); }
  .fsx-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dcx-grid, .pcx-grid, .evx-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .evx-card { animation: none; }
  .dcx-card, .pcx-card { transition: none; }
}

/* ============================================================
 * 苹果风统一层 §11 —— 大卡片外框去色后的语义色收口
 * 规则（按需求确认）：
 *   ① 主内容大卡片外框不带颜色（左色条隐藏、编号徽章 / 小标题色条中性灰）；
 *   ② 「本课学习目标」卡是唯一保留语义色的外框（左色条 + 标题随 .card-*）；
 *   ③ 卡内小卡片 / 按钮 / 游戏盒 / 答题组件等保留所在页面的语义色；
 *   ④ 课堂小结卡：外框中性，标题随所在页面的语义色（下方分页规则）。
 * ============================================================ */
.lesson-summary.card-per h3   { color: var(--per-ink); }
.lesson-summary.card-plan h3  { color: var(--plan-ink); }
.lesson-summary.card-mem h3   { color: var(--mem-ink); }
.lesson-summary.card-exe h3   { color: var(--exe-ink); }
.lesson-summary.card-brain h3 { color: var(--brain-ink); }
.lesson-summary.card-ori h3   { color: var(--ori-ink); }

/* ============================================================
 * 苹果风统一层 §12 —— 感知 · 内置语音兜底（麦克风失效时手动选段演示）
 * 选段 chip + 播放 / 识别按钮 + 收音波形动画；样式跟随感知器语义色
 * ============================================================ */
.voice-clips {
  margin-top: 12px; padding: 12px 14px;
  background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: 12px;
}
.vc-head { font-size: 13px; color: var(--c-ink-2); margin-bottom: 9px; line-height: 1.6; }
.vc-head b { color: var(--per-ink); }
.vc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .vc-list { grid-template-columns: 1fr; } }
.vc-chip {
  display: flex; align-items: center; gap: 11px; width: 100%;
  font-family: inherit; cursor: pointer; text-align: left;
  background: var(--c-card); border: 1.5px solid var(--c-line); border-radius: 12px;
  padding: 11px 13px;
  transition: border-color var(--t-fast, .15s), transform var(--t-fast, .15s), box-shadow var(--t-fast, .15s), background var(--t-fast, .15s);
}
.vc-chip:hover { transform: translateY(-2px); border-color: var(--c-per); box-shadow: var(--shadow-1); }
.vc-chip.is-on {
  border-color: var(--c-per); background: var(--per-tint);
  box-shadow: 0 0 0 3px rgba(62, 155, 255, .14);
}
.vcc-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-per), var(--c-per-deep));
}
.vcc-txt { min-width: 0; flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vcc-txt b { font-size: 14px; color: var(--c-ink); font-weight: 600; }
.vcc-txt i {
  flex-shrink: 0; font-style: normal; font-size: 11px; color: var(--c-sub);
  background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: 20px; padding: 1px 8px;
}
.vc-preview {
  margin-top: 12px; padding: 10px 13px;
  background: var(--c-bg-alt); border: 1px solid var(--c-line); border-left: 3px solid var(--c-per);
  border-radius: 8px;
}
.vc-preview-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-sub); margin-bottom: 5px; }
.vc-preview-label .icon { color: var(--c-per); }
.vc-preview-text { font-size: 13.5px; line-height: 1.7; color: var(--c-ink-2); word-break: break-word; }
.vc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-line); }
.vc-status { margin-left: auto; font-size: 12.5px; color: var(--c-sub); }
/* 收音波形动画（播放内置语音时跳动） */
.vc-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.vc-wave i {
  width: 4px; border-radius: 2px; background: var(--c-per);
  animation: vcBounce .9s ease-in-out infinite;
  transform-origin: bottom;
}
.vc-wave i:nth-child(1) { height: 8px;  animation-delay: 0s; }
.vc-wave i:nth-child(2) { height: 16px; animation-delay: .12s; }
.vc-wave i:nth-child(3) { height: 12px; animation-delay: .24s; }
.vc-wave i:nth-child(4) { height: 20px; animation-delay: .06s; }
.vc-wave i:nth-child(5) { height: 10px; animation-delay: .18s; }
.vc-wave i:nth-child(6) { height: 15px; animation-delay: .3s; }
.vc-wave i:nth-child(7) { height: 7px;  animation-delay: .09s; }
@keyframes vcBounce {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vc-wave i { animation: none; height: 12px; }
}

/* 语音演示输入框：textarea 高度随内容自适应（长文本换行不截断） */
#pc-input {
  flex: 1 1 auto; width: auto; min-width: 0;
  min-height: 44px; max-height: 150px; overflow-y: auto;
  line-height: 1.5; resize: none;
}
#pc-tf-stage { word-break: break-word; }

/* 内置语音兜底入口：默认只显示一个不显眼的灰色虚线小按钮 */
.vc-toggle-row { margin-top: 12px; }
.vc-toggle-row .btn-sm {
  color: var(--c-sub); background: var(--c-card);
  border: 1px dashed var(--c-line);
}
.vc-toggle-row .btn-sm:hover {
  color: var(--per-ink); border-color: var(--c-per);
  background: var(--per-tint);
}
/* ③b 折叠说明：展开前与下方「选择图片」按钮留间距，展开后内容也留间距 */
.ocr-notes-toggle { margin-top: 6px; margin-bottom: 14px; }
.ocr-notes { margin-top: 0; margin-bottom: 14px; padding: 4px 0; }
/* 消息四角色卡：两个 FAQ 折叠入口并排（各自的内容区在按钮行下方折叠） */
.role-faq-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
 * 苹果风统一层 §13 —— 低密度图标卡（密集文字卡片重构专用）
 * 参照 §10.1「深度思考」样板：两栏 + 图标小卡 + 大字号 + 低密度
 * 语义色由容器修饰类（.tx-per/.tx-plan/.tx-mem/.tx-exe/.tx-brain/.tx-ori）
 * 输出的 --tx-* 变量参数化，同一套样式跨实验室复用
 *   ① 两栏结构   .tx-cols / .tx-col / .tx-title / .tx-list
 *   ② 图标小卡   .tx-chip / .tx-ico / .tx-txt
 *   ③ 多列与键值 .tx-grid / .tx-card / .tx-num / .tx-facts / .tx-kv / .tx-eg
 *   ④ 流程元素   .tx-flow / .tx-arrow / .tx-phase / .tx-tag
 *   ⑤ 说明性文字 .tx-points / .tx-point（轻量行内说明，无底色不做卡片）
 *   ⑥ 正反标签   .tx-flag / .tx-ok / .tx-no
 * ============================================================ */

/* ---------- 13.0 语义色参数（容器修饰类） ---------- */
.tx-per   { --tx-c: var(--c-per);   --tx-c-deep: var(--c-per-deep);   --tx-tint: var(--per-tint);   --tx-line: var(--per-line);   --tx-ink: var(--per-ink); }
.tx-plan  { --tx-c: var(--c-plan);  --tx-c-deep: var(--c-plan-deep);  --tx-tint: var(--plan-tint);  --tx-line: var(--plan-line);  --tx-ink: var(--plan-ink); }
.tx-mem   { --tx-c: var(--c-mem);   --tx-c-deep: var(--c-mem-deep);   --tx-tint: var(--mem-tint);   --tx-line: var(--mem-line);   --tx-ink: var(--mem-ink); }
.tx-exe   { --tx-c: var(--c-exe);   --tx-c-deep: var(--c-exe-deep);   --tx-tint: var(--exe-tint);   --tx-line: var(--exe-line);   --tx-ink: var(--exe-ink); }
.tx-brain { --tx-c: var(--c-brain); --tx-c-deep: var(--c-brain-deep); --tx-tint: var(--brain-tint); --tx-line: var(--brain-line); --tx-ink: var(--brain-ink); }
.tx-ori   { --tx-c: var(--c-ori);   --tx-c-deep: var(--c-ori-deep);   --tx-tint: var(--ori-tint);   --tx-line: var(--ori-line);   --tx-ink: var(--ori-ink); }

/* ---------- 13.1 两栏结构 ---------- */
.tx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tx-col {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 18px 18px 14px;
}
.tx-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 700; color: var(--c-ink); margin-bottom: 12px;
}
.tx-title .icon { flex-shrink: 0; color: var(--tx-c, var(--c-accent)); }
.tx-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 13.2 图标小卡 ---------- */
.tx-chip {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--c-bg-alt); border-radius: 14px; padding: 13px 14px;
}
.tx-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tx-tint, var(--c-bg-alt));
  color: var(--tx-c-deep, var(--c-accent-deep));
}
.tx-ico.sm { width: 28px; height: 28px; border-radius: 8px; }
.tx-ico.is-num { font-size: 14px; font-weight: 800; }
.tx-txt { flex: 1 1 auto; min-width: 0; }   /* 修复：不设 flex-grow 会让宽度塌缩到 min-content，文字被挤成多行 */
.tx-txt b { display: block; font-size: 14.5px; color: var(--c-ink); }
.tx-txt i {
  display: block; font-style: normal; margin-top: 3px;
  font-size: 13px; color: var(--c-sub); line-height: 1.6;
}

/* ---------- 13.3 多列小卡 / 事实速览 / 键值行 ---------- */
.tx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.tx-card {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 16px 18px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.tx-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tx-card-head { display: flex; align-items: center; gap: 10px; }
.tx-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  background: var(--tx-tint, var(--c-bg-alt)); color: var(--tx-c-deep, var(--c-accent-deep));
}
.tx-card-head b { font-size: 14.5px; color: var(--c-ink); }
.tx-card-head .tx-sub { font-size: 12px; font-weight: 600; color: var(--c-dim); }
.tx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tx-fact {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-bg-alt); border-radius: 12px; padding: 10px 12px;
}
.tx-fact-txt { min-width: 0; }
.tx-fact-txt b { display: block; font-size: 12px; font-weight: 600; color: var(--c-dim); }
.tx-fact-txt span {
  display: block; margin-top: 1px; line-height: 1.5;
  font-size: 13.5px; font-weight: 600; color: var(--c-ink);
}
.tx-kv { display: flex; gap: 8px; align-items: flex-start; }
.tx-kv-k {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; margin-top: 1px;
  font-size: 12.5px; font-weight: 700; color: var(--c-dim);
}
.tx-kv-v { font-size: 13px; color: var(--c-ink-2); line-height: 1.65; }
.tx-eg {
  font-size: 13px; color: var(--c-ink-2); line-height: 1.6;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 9px; padding: 8px 11px;
}
.tx-eg b { color: var(--c-dim); font-size: 12.5px; }

/* ---------- 13.4 流程元素 ---------- */
.tx-phase {
  flex-shrink: 0; height: fit-content; margin-top: 1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 8px; color: #fff;
  font-size: 11.5px; font-weight: 700;
}
.tx-phase .icon, .tx-tag .icon { flex-shrink: 0; }
/* 阶段徽章：浅底深字（实心色 + 白字对比度仅 2.0–3.4:1，不满足 WCAG AA） */
.tx-phase.is-per   { background: var(--per-tint);   color: var(--per-ink); }
.tx-phase.is-plan  { background: var(--plan-tint);  color: var(--plan-ink); }
.tx-phase.is-mem   { background: var(--mem-tint);   color: var(--mem-ink); }
.tx-phase.is-exe   { background: var(--exe-tint);   color: var(--exe-ink); }
.tx-phase.is-done  { background: var(--brain-tint); color: var(--brain-ink); }
.tx-phase.is-brain { background: var(--brain-tint); color: var(--brain-ink); }
.tx-tag {
  flex-shrink: 0; height: fit-content; margin-top: 1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 8px;
  background: var(--tx-tint, var(--c-bg-alt)); color: var(--tx-ink, var(--c-ink-2));
  border: 1px solid var(--tx-line, var(--c-line));
  font-size: 11.5px; font-weight: 700;
}

/* ---------- 13.5 说明性文字（轻量行内说明，不做卡片） ---------- */
.tx-points { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.tx-point { display: flex; gap: 7px; align-items: flex-start; }
.tx-point > .icon { flex-shrink: 0; margin-top: 4px; color: var(--c-dim); }
.tx-point-txt { font-size: 13px; line-height: 1.7; color: var(--c-sub); }
.tx-point-txt b { font-weight: 600; color: var(--c-ink-2); }
.tx-point-txt code {
  font-size: 12px; color: var(--c-sub);
  background: var(--c-bg-alt); border-radius: 5px; padding: 1px 6px;
}

/* ---------- 13.6 正反标签 ---------- */
.tx-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
  border-radius: var(--r-pill); padding: 3px 10px;
}
.tx-flag .icon { flex-shrink: 0; }
.tx-kv-k .icon { color: var(--tx-c-deep, var(--c-dim)); }
.tx-ok { background: var(--mem-tint); color: var(--mem-ink); }
.tx-no { background: var(--exe-tint); color: var(--exe-ink); }
.tx-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* ---------- 13.7 响应式 ---------- */
@media (max-width: 900px) {
  .tx-cols { grid-template-columns: 1fr; gap: 12px; }
  .tx-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tx-grid { grid-template-columns: 1fr; }
  .tx-facts { grid-template-columns: 1fr; }
  .tx-col { padding: 14px 14px 12px; }
  .tx-txt b { font-size: 13.5px; }
  .tx-txt i { font-size: 12.5px; }
  .tx-point-txt { font-size: 13px; }
}

/* ============================================================
 * 苹果风统一层 §14 —— 架构实验室页尾：作品主线预告 + 主 CTA
 * ============================================================ */

/* ---------- 14.1 页尾：作品主线预告 + 主 CTA（仅架构实验室使用） ---------- */
.works-label {
  flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-sub);
}
.works-label .icon { color: var(--c-brain); }
/* 每件作品两行：作品名 + 点亮路径。两块等宽（而不是各自撑成不同宽度的药丸），窄屏各占一行 */
.work-tag { flex: 1 1 320px; min-width: 320px; }
.wk-body { display: block; line-height: 1.5; }
.wk-path {
  display: block; margin-top: 3px;
  font-style: normal; font-weight: 600; font-size: var(--fs-xs); color: var(--c-sub);
}
.cta-big {
  background: linear-gradient(135deg, #B87D0A, #7A5200);   /* brain 深琥珀，白字 ≥3.5:1 */
  box-shadow: 0 8px 22px rgba(122, 82, 0, .28);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.cta-big:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 26px rgba(122, 82, 0, .34); }
.cta-big:focus-visible { outline: 2px solid var(--brain-ink); outline-offset: 3px; }

/* ============================================================
 * 苹果风统一层 §15 —— 感知器实验室：「感知故障急救台」
 * 用于 ⑨ 感知失败与纠错：失真实录（.pf-card 三格失真流）
 * → 诊断闯关（复用 AgentLab.Quiz）→ 急救工具箱（.pf-kit）
 * 语义色：per = 通道/结构标识；exe = 失真高亮（“这里出错了”）
 * 无障碍：失真同时用 颜色 + 加粗 + 下划线 三重编码，不以色传意
 * ============================================================ */

/* ---------- 15.1 失真实录 ---------- */
.pf-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 12px; }
/* 偏好 2×2：四张卡片的演示区（如执行器「幻觉三连 + 坏数据」），窄屏回落为单列 */
.pf-demo-grid.pf-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-card {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.pf-card-head {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2);
  margin-bottom: 12px;
}
.pf-card-head .icon { color: var(--per-ink); flex-shrink: 0; }
.pf-chan {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--per-tint); color: var(--per-ink);
}
.pf-flow { display: flex; flex-direction: column; }
.pf-step {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); padding: 9px 12px;
  font-size: var(--fs-sm); line-height: 1.65; color: var(--c-ink-2);
}
.pf-step.is-bad { background: var(--exe-tint); border-color: var(--exe-line); color: var(--c-ink); }
.pf-step-tag {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-sub); margin-bottom: 3px; letter-spacing: .2px;
}
.pf-step.is-bad .pf-step-tag { color: var(--exe-ink); }
.pf-arrow { text-align: center; line-height: 1; padding: 4px 0; color: var(--c-dim); font-size: 13px; }
.pf-arrow::before { content: "↓"; }
.pf-bad {
  color: var(--exe-ink); font-weight: 700;
  border-bottom: 2px solid var(--c-exe);
}
.pf-note {
  margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs); line-height: 1.65; color: var(--c-sub);
}
.pf-note .icon { color: var(--c-dim); vertical-align: -2px; margin-right: 2px; }

/* ---------- 15.2 急救工具箱 ---------- */
.pf-kit-head {
  display: flex; align-items: center; gap: 7px;
  margin: 18px 0 10px; font-size: var(--fs-base); font-weight: 700; color: var(--c-ink);
}
.pf-kit-head .icon { color: var(--c-mem); flex-shrink: 0; }
.pf-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.pf-kit-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); padding: 11px 13px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.pf-kit-item:hover { border-color: var(--per-line); transform: translateY(-1px); }
.pf-kit-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--per-tint); color: var(--per-ink);
}
.pf-kit-txt { min-width: 0; }
.pf-kit-txt b { display: block; font-size: 13.5px; font-weight: 700; color: var(--c-ink); margin-bottom: 2px; }
.pf-kit-txt span { display: block; font-size: var(--fs-xs); line-height: 1.6; color: var(--c-sub); }
.pf-principle { margin-top: 14px; }

@media (max-width: 560px) {
  .pf-demo-grid, .pf-demo-grid.pf-cols-2 { grid-template-columns: 1fr; }
}

/* ---------- 15.3 多模态三路径：Token 对比条（⑧ 算账区） ----------
 * 条形只承载“长度”信息；数值 / 成本一律用深色文字放在条外，
 * 避免“白字压在浅色填充上”的对比度不达标问题（不以色传意 + WCAG AA）。 */
.mm-bar { margin-bottom: 12px; }
.mm-bar:last-child { margin-bottom: 0; }
.mm-bar-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: var(--fs-sm); }
.mm-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mm-dot[data-c="native"],  .mm-bar-fill[data-c="native"]  { background: var(--c-plan); }
.mm-dot[data-c="extract"], .mm-bar-fill[data-c="extract"] { background: var(--c-mem); }
.mm-dot[data-c="tool"],    .mm-bar-fill[data-c="tool"]    { background: var(--c-per); }
.mm-bar-name { font-weight: 700; color: var(--c-ink); }
.mm-bar-val { font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.mm-bar-cost { margin-left: auto; font-size: var(--fs-xs); color: var(--c-sub); }
.mm-bar-track { height: 14px; border-radius: var(--r-pill); background: var(--c-bg-alt); border: 1px solid var(--c-line); overflow: hidden; }
.mm-bar-fill { height: 100%; border-radius: var(--r-pill); min-width: 4px; transition: width .5s var(--ease-out); }
.mm-bar-note { margin-top: 5px; font-size: var(--fs-xs); line-height: 1.6; color: var(--c-sub); }

/* ---------- 15.4 消息四角色：真实形态（Chat Template，⑥ 真实形态区） ----------
 * 以“代码块”形式展示模型真正看到的文本：每条消息被 <|im_start|>…<|im_end|> 标记包裹，
 * 标记按角色着色（system=紫 / user=绿 / assistant=橙 / tool=红），与对照卡、分类框同一套 token。
 * 注意：这里刻意用 div + white-space:pre-wrap，而不是 <pre>——避免被全局 pre 的深色底样式覆盖。 */
.role-tpl {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-per);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--fs-xs);
  line-height: 1.85;
  color: var(--c-ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.role-tpl-tag { font-weight: 700; }
.role-tpl-tag[data-c="system"]    { color: var(--ori-ink); }
.role-tpl-tag[data-c="user"]      { color: var(--mem-ink); }
.role-tpl-tag[data-c="assistant"] { color: var(--plan-ink); }
.role-tpl-tag[data-c="tool"]      { color: var(--exe-ink); }
.role-tpl-end { color: var(--c-dim); }

/* ---------- 15.5 认识感知器：模态选择卡（① 三模态转化区） ----------
 * 三个等宽"选项卡"（grid 三列），横向单行排布：24px 图标 + 名称同排居中对齐，
 * 整体更矮（约 50px），不占纵向空间。名称后的“手来打/嘴巴说/眼睛看”已删——
 * 这句口诀在卡片底部与 ② 模态连连看里都已出现，属于重复。 */
.per-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 4px 0 14px;
}
.per-tab {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--c-card);
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font: inherit; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.per-tab .icon { flex-shrink: 0; color: var(--c-dim); transition: color var(--t-fast); }
.per-tab-name { font-size: var(--fs-base); font-weight: 700; color: var(--c-ink-2); transition: color var(--t-fast); }
.per-tab:hover { border-color: var(--per-line); background: var(--per-tint); }
.per-tab:active { transform: scale(.985); }
.per-tab:focus-visible { outline: 2px solid var(--c-per); outline-offset: 2px; }
.per-tab.on {
  border-color: var(--c-per);
  background: var(--per-tint);
  box-shadow: 0 4px 14px rgba(62, 155, 255, .18);
}
.per-tab.on .icon { color: var(--per-ink); }
.per-tab.on .per-tab-name { color: var(--per-ink); }
@media (max-width: 700px) {
  .per-tabs { grid-template-columns: 1fr; }
}

/* ---------- 15.6 认识感知器：翻译步骤时间线（① 三模态转化区） ----------
 * 用「编号圆点 + 连接竖线」的纵向时间线替代原来的“全宽大格子 + 小箭头”：
 * 更紧凑（高度约减半）、递进关系更清楚；最后一步用 per 蓝作“终点”，
 * 不再用警示红（那一步是“成功到达 AI”，不是出错）。 */
.per-steps { display: flex; flex-direction: column; }
.per-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; }
.per-step:last-child { padding-bottom: 0; }
.per-step:not(:last-child)::before {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 2px; background: var(--c-line);
}
.per-step-no {
  flex-shrink: 0; position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: var(--c-card); color: var(--c-ink-2);
  border: 1.5px solid var(--c-line-strong);
}
.per-step-body {
  flex: 1; min-width: 0;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); padding: 7px 12px;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--c-ink-2);
}
.per-step-body .icon { vertical-align: -2px; color: var(--per-ink); }
.per-step.is-final .per-step-no {
  background: var(--c-per); border-color: var(--c-per); color: #fff;
}
.per-step.is-final .per-step-body {
  background: var(--per-tint); border-color: var(--c-per);
  color: var(--per-ink); font-weight: 700;
}

/* ---------- 15.7 消息四角色：待分类消息池（⑥ 分类实验） ----------
 * 原实现直接复用 Quiz 的 .opt（inline-flex + 按内容定宽），8 条长短不一的
 * 按钮宽度参差、编号挤在文字里。此处改为「两列等高卡片 + 序号徽章」：
 * 宽度统一、右边缘对齐，长文本自动换行且不与序号错位。 */
#pc-role-pool {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.role-msg {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; height: 100%;
  text-align: left;
  background: var(--c-card);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-ink-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.role-msg-no {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-bg-alt); color: var(--c-sub);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.role-msg-txt { flex: 1; min-width: 0; word-break: break-word; }
.role-msg:hover { border-color: var(--per-line); background: var(--per-tint); }
.role-msg:active { transform: scale(.99); }
.role-msg.selected {
  border-color: var(--c-per) !important;
  background: var(--per-tint) !important;
  box-shadow: 0 0 0 3px rgba(62, 155, 255, .18);
}
.role-msg.selected .role-msg-no { background: var(--c-per); color: #fff; }
.role-msg.used { opacity: .35; pointer-events: none; }
@media (max-width: 900px) {
  #pc-role-pool { grid-template-columns: 1fr; }
}

/* ---------- 15.8 认识感知器：分支说明（① 转化链路里的“两条路”） ----------
 * 在白色步骤格内用浅灰小条呈现“提取为文本 / 原生编码”两条分支，
 * 与 .per-step-body 形成两级层次。 */
.per-branch { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.per-branch-item {
  background: var(--c-bg-alt);
  border-left: 3px solid var(--per-line);
  border-radius: var(--r-xs);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  font-weight: 500;
  color: var(--c-sub);
}
.per-branch-item b { color: var(--per-ink); font-weight: 700; margin-right: 4px; }

/* ---------- 15.9 模态家族（② 三种模态卡片） ----------
 * 三列不等宽：图像内容最多，给更宽的列；每条 = 蓝点 + 「名称：说明」，
 * 说明与名称同排（不另起一行），用字号与颜色做弱化，兼顾紧凑与层次。 */
.mode-family {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .mode-family { grid-template-columns: 1fr; }
}
.mode-items { display: flex; flex-direction: column; gap: 9px; }
.mode-item { display: flex; gap: 9px; align-items: flex-start; }
.mode-item-dot {
  flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-per); margin-top: 7px;
}
.mode-item-txt { min-width: 0; line-height: 1.7; }
.mode-item-txt b { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2); }
.mode-item-txt span { font-size: var(--fs-xs); color: var(--c-sub); }
.mode-item-txt span::before { content: "："; }

/* ---------- 15.10 原理图解读条点亮（③ ASR / ③b OCR） ----------
 * 原“5 步流水线”已并入原理图卡（图 + 解读条），演示进行中由 playPipe()
 * 把右侧解读条（.tx-chip）一条条点亮：转淡蓝底 + 蓝描边 + 光晕，
 * 让学生“看到”机器一步步跑过，而不只是等结果。 */
.per-arch .tx-chip {
  border: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.per-arch .tx-chip.is-run {
  background: var(--per-tint); border-color: var(--per-line);
  box-shadow: 0 0 0 3px rgba(31, 122, 224, .10);
}

/* ---------- 15.10b 解读条：点击展开详细解释（③ ASR / ③b OCR） ----------
 * 每条默认只显示“术语 + 一句话”（低门槛、不吓人）；
 * 点一下才展开给五六年级学生看的详解：一句话概括 → 大白话解释 → 打个比方。
 * 展开态：条目转淡蓝底、右侧小箭头翻向上，详解以左侧蓝色竖条卡片接在下方。 */
/* 解读条改为单列：详情要撑满整列才读得舒服；
 * 两列时（.ta-duo .ta-explain .tx-grid）展开一条会把邻格留出半屏空白，很难看 */
.per-arch .ta-explain .tx-grid { grid-template-columns: minmax(0, 1fr); }
.tx-item { display: flex; flex-direction: column; }
.tx-chip-btn {
  width: 100%; text-align: left; font: inherit; color: inherit;
  align-items: center; cursor: pointer;
  background: var(--c-bg-alt); border: 1px solid transparent;
}
.tx-chip-btn:hover { border-color: var(--per-line); }
.tx-chip-btn:focus-visible { outline: 2px solid var(--c-per); outline-offset: 2px; }
.tx-caret {
  flex-shrink: 0; width: 8px; height: 8px; margin-left: 4px;
  border-right: 2.2px solid var(--c-dim);
  border-bottom: 2.2px solid var(--c-dim);
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s;
}
.tx-item.is-open > .tx-chip-btn {
  background: var(--per-tint); border-color: var(--per-line);
}
.tx-item.is-open .tx-caret { transform: rotate(225deg) translate(1px, 1px); }
.tx-detail {
  display: none;
  margin: 8px 0 2px;
  padding: 12px 15px 13px;
  background: var(--c-card);
  border: 1px solid var(--per-line); border-left: 3px solid var(--c-per);
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.85; color: var(--c-sub);
}
.tx-item.is-open .tx-detail { display: block; animation: txDetailIn .18s ease-out; }
@keyframes txDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.tx-detail p { margin: 0 0 8px; }
.tx-detail p:last-child { margin-bottom: 0; }
.tx-detail b { font-weight: 700; color: var(--per-ink); }
.tx-detail .tx-eg {
  margin-top: 9px; padding: 8px 11px;
  background: var(--per-tint); border-radius: 9px; color: var(--per-ink);
}
@media (max-width: 560px) {
  .tx-detail { font-size: 13px; padding: 11px 12px 12px; }
}

/* ---------- 15.10c 解读条：起源实验室（Transformer 架构图）复用同一交互 ----------
 * 与 ③ ASR / ④ OCR 的解读条同构，只是配色改走 .tx-ori 的紫色语义变量（--tx-*）；
 * 同样改单列：详解要撑满整列才读得舒服，两列时展开一条会把邻格留出大片空白。 */
/* 左图列略宽、右解读列略窄：图能占更大面积，解读条也不需要那么宽 */
.transformer-arch .ta-duo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.transformer-arch .ta-duo .ta-image { max-height: 600px; }
.transformer-arch .ta-explain .tx-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* 8 条术语要一屏看完：收紧条目高度，让折叠态整列高度与左图相当 */
.transformer-arch .tx-chip { gap: 10px; padding: 8px 12px; border-radius: 11px; }
.transformer-arch .tx-chip .tx-ico { width: 26px; height: 26px; border-radius: 8px; }
.transformer-arch .tx-txt b { font-size: 13px; }
.transformer-arch .tx-txt i { font-size: 11.5px; line-height: 1.5; margin-top: 2px; }
.transformer-arch .tx-chip-btn:hover { border-color: var(--tx-line, var(--ori-line)); }
.transformer-arch .tx-item.is-open > .tx-chip-btn {
  background: var(--tx-tint, var(--ori-tint));
  border-color: var(--tx-line, var(--ori-line));
}
.transformer-arch .tx-detail {
  border-color: var(--tx-line, var(--ori-line));
  border-left-color: var(--tx-c, var(--c-ori));
}
.transformer-arch .tx-detail b { color: var(--tx-ink, var(--ori-ink)); }
.transformer-arch .tx-detail .tx-eg {
  background: var(--tx-tint, var(--ori-tint));
  color: var(--tx-ink, var(--ori-ink));
}

/* ---------- 15.11 提示词清晰度实验：选题切换（④ 对比实验） ----------
 * 三个选题（春天的作文 / 生日祝福 / 活动通知）共用同一套玩法：
 * 点选题 = 换任务 + 清空已选要求与上一次结果，避免旧内容串场。
 * 选中态用感知器蓝（淡蓝底 + 实线描边），与「加要求」按钮的虚线胶囊形态区分。 */
.cmp-task-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cmp-task-label {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-2);
}
.cmp-task-label .icon { color: var(--c-dim); }
.cmp-tasks { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-task-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px dashed var(--c-line-strong); background: #fff;
  border-radius: var(--r-pill); padding: 6px 14px;
  font-size: var(--fs-sm); font-weight: 700; font-family: inherit;
  color: var(--c-ink-2); cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.cmp-task-btn .icon { flex-shrink: 0; color: var(--c-dim); }
.cmp-task-btn:hover { border-color: var(--c-per); color: var(--c-per-deep); transform: translateY(-1px); }
.cmp-task-btn.on {
  border-style: solid; border-color: var(--c-per);
  background: var(--per-tint); color: var(--per-ink);
}
.cmp-task-btn.on .icon { color: var(--per-ink); }
/* 模型选择按钮里的“未配置 Key”角标（思维链实验：小模型 / 大模型各自要一把 Key） */
.cmp-task-btn .cot-nokey {
  margin-left: 6px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  border-radius: var(--r-pill);
  background: var(--exe-tint); color: var(--exe-ink);
}

/* ============================================================
 * 苹果风统一层 §16 —— 执行器实验室：Function Calling 角色接力
 * 用于 ④ Function Calling：两个角色（AI 大脑 / 程序 Harness）左右交替，
 * 分步揭示四步接力。角色色走语义 token：brain = 决策方、exe = 执行方；
 * 箭头标注双向数据流（指令向下传、结果向上回）。
 * 不以色传意：每步同时有「角色徽章文字 + 编号 + 左右位置」三重编码。
 * ============================================================ */
.fcr-flow { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.fcr-step {
  display: none; width: 88%; max-width: 660px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 11px 14px; background: var(--c-card);
}
.fcr-step.is-on { display: block; animation: fcr-in .3s var(--ease-out); }
@keyframes fcr-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.fcr-step.is-user { align-self: center; width: 100%; background: var(--c-bg-alt); }
.fcr-step.is-ai { align-self: flex-start; border-color: var(--brain-line); background: var(--brain-tint); }
.fcr-step.is-prog { align-self: flex-end; border-color: var(--exe-line); background: var(--exe-tint); }
.fcr-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; flex-wrap: wrap; }
.fcr-badge {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.fcr-step.is-user .fcr-badge { background: var(--c-sub); }
.fcr-step.is-ai .fcr-badge   { background: var(--c-brain); }
.fcr-step.is-prog .fcr-badge { background: var(--c-exe); }
.fcr-who { font-size: 13.5px; font-weight: 700; color: var(--c-ink); }
.fcr-role {
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .78);
}
.fcr-step.is-ai .fcr-role   { color: var(--brain-ink); }
.fcr-step.is-prog .fcr-role { color: var(--exe-ink); }
.fcr-desc { font-size: var(--fs-xs); line-height: 1.6; color: var(--c-sub); margin-bottom: 7px; }
.fcr-msg, .fcr-json, .fcr-term {
  border-radius: var(--r-sm); padding: 8px 11px;
  background: var(--c-card); border: 1px solid var(--c-line);
  font-size: 13px; line-height: 1.65; color: var(--c-ink-2);
}
.fcr-json, .fcr-term {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.7;
}
.fcr-link {
  display: none; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--c-sub); padding: 3px 0;
}
.fcr-link.is-on { display: flex; animation: fcr-in .3s var(--ease-out); }
.fcr-link span { color: var(--c-brain); font-weight: 700; font-size: 13px; }
.fcr-link b { font-weight: 600; }
.fcr-link.is-flow span { color: var(--c-per); }
@media (max-width: 620px) {
  .fcr-step { width: 100%; }
}

/* ============================================================
 * 苹果风统一层 §17 —— 执行器实验室：MCP 协议连线对比（N×M → N+M）
 * 并排两图：左「没有统一标准」连线交叉、右「有 MCP」连线向中间收拢。
 * 颜色走语义 token + currentColor（exe = 问题侧、mem = 解决侧）；
 * 不以色传意：两侧同时有文字标题 + “× / +”算式标注差异。
 * ============================================================ */
.mcp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .mcp-cmp { grid-template-columns: 1fr; } }
.mcp-pane {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--c-bg-alt);
}
.mcp-pane.is-bad { border-color: var(--exe-line); background: var(--exe-tint); }
.mcp-pane.is-ok  { border-color: var(--mem-line); background: var(--mem-tint); }
.mcp-pane-head {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 700; margin-bottom: 8px;
}
.mcp-pane-head .icon { flex-shrink: 0; }
.mcp-pane.is-bad .mcp-pane-head { color: var(--exe-ink); }
.mcp-pane.is-ok  .mcp-pane-head { color: var(--mem-ink); }
.mcp-svg { width: 100%; height: auto; display: block; color: var(--c-dim); }
/* 图形与文字一律用 ink 深色（c-exe/c-mem 是亮色，仅适合做填充，
 * 描边/文字压在 tint 底上对比度不足——实测 2.7:1 / 2.2:1，不达 WCAG）。 */
.mcp-pane.is-bad .mcp-svg { color: var(--exe-ink); }
.mcp-pane.is-ok  .mcp-svg { color: var(--mem-ink); }
.mcp-svg .ln { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.mcp-pane.is-ok .mcp-svg .ln { opacity: .72; }   /* 解决侧连线少而清晰：不靠“密”制造压迫感 */
.mcp-svg .nd { fill: #fff; stroke: currentColor; stroke-width: 2; }
.mcp-svg .tx { font-size: 10.5px; font-weight: 700; text-anchor: middle; fill: currentColor; }
/* 列标题：两栏（模型 / 应用 ↔ 工具）在图上直接标出，不必回头猜 A/B/C 和 1/2/3 是什么 */
.mcp-svg .tx-cap {
  font-size: 9.5px; font-weight: 700; text-anchor: middle;
  fill: currentColor; opacity: .72; letter-spacing: .02em;
}
.mcp-svg .bar { fill: currentColor; opacity: .15; stroke: currentColor; stroke-opacity: .35; stroke-width: 1; }
.mcp-svg .tx-bar { font-size: 10.5px; font-weight: 800; text-anchor: middle; fill: currentColor; }
/* 表头算式胶囊（N × M / N + M）：与 .pf-chan 同一语言，颜色随本栏语义色 */
.mcp-chan {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--c-card); border: 1px solid currentColor;
}
.mcp-pane-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs); color: var(--c-sub);
}
.mcp-pane-foot span { flex: 1 1 auto; min-width: 0; }
.mcp-pane-foot b { flex: 0 0 auto; font-size: var(--fs-sm); }
.mcp-pane.is-bad .mcp-pane-foot b { color: var(--exe-ink); }
.mcp-pane.is-ok  .mcp-pane-foot b { color: var(--mem-ink); }

/* 结论条：把左右两图压成一条能记住的算式（N × M → N + M） */
.mcp-concl {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 12px 16px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg-alt);
}
.mcp-concl .mc-tag {
  flex: 0 0 auto;
  font-size: var(--fs-md); font-weight: 800; letter-spacing: .02em;
  padding: 3px 13px; border-radius: var(--r-pill);
}
.mcp-concl .mc-tag.is-mul { background: var(--exe-tint);  color: var(--exe-ink);  border: 1px solid var(--exe-line); }
.mcp-concl .mc-tag.is-add { background: var(--mem-tint);  color: var(--mem-ink);  border: 1px solid var(--mem-line); }
.mcp-concl .mc-to { flex: 0 0 auto; font-size: var(--fs-md); font-weight: 800; color: var(--c-dim); }
.mcp-concl .mc-txt { flex: 1 1 260px; min-width: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--c-sub); }

/* ============================================================
 * 苹果风统一层 §18 —— 执行器实验室：多工具协作（工具链 + 上下文）
 * 左：工具链逐步揭示（exe 红左边线 = 工具调用）；
 * 右：上下文同步增长（mem 绿角色标 = 轨迹条目）——
 * 把“工具结果追加到上下文”这一核心机制直接可视化。
 * 不以色传意：工具类型用文字标签（感知 / 计算 / 提醒），不只靠颜色。
 * ============================================================ */
.mtc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mtc-progress { margin-left: auto; font-size: 13px; color: var(--c-sub); }
.mtc-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .mtc-wrap { grid-template-columns: 1fr; } }
.mtc-chain { display: flex; flex-direction: column; gap: 8px; }
.mtc-step, .mtc-final {
  display: none; align-items: flex-start; gap: 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-card); padding: 9px 12px;
}
.mtc-step.is-on, .mtc-final.is-on { display: flex; animation: fcr-in .3s var(--ease-out); }
.mtc-step { border-left: 3px solid var(--c-exe); }
.mtc-final { border-left: 3px solid var(--c-brain); background: var(--brain-tint); border-color: var(--brain-line); }
.mtc-ic { flex-shrink: 0; margin-top: 1px; color: var(--exe-ink); }
.mtc-final .mtc-ic { color: var(--brain-ink); }
.mtc-body { flex: 1; min-width: 0; }
.mtc-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.mtc-line b { font-size: 13.5px; color: var(--c-ink); }
.mtc-tag { font-size: var(--fs-xs); font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); }
.mtc-tag.is-sense { background: var(--per-tint); color: var(--per-ink); }
.mtc-tag.is-do    { background: var(--exe-tint); color: var(--exe-ink); }
.mtc-dep { font-size: var(--fs-xs); color: var(--c-dim); }
.mtc-dep::before { content: "· "; }
.mtc-out { font-size: var(--fs-xs); color: var(--c-sub); line-height: 1.6; }
.mtc-ctx {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg-alt); padding: 10px 12px;
}
.mtc-ctx-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-ink-2); margin-bottom: 8px; }
.mtc-ctx-head .icon { color: var(--c-dim); flex-shrink: 0; }
.mtc-ctx-list { display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.mtc-ctx-item {
  display: none;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-xs); padding: 6px 9px;
  font-size: var(--fs-xs); line-height: 1.55; color: var(--c-ink-2);
}
.mtc-ctx-item.is-on { display: block; animation: fcr-in .3s var(--ease-out); }
.mtc-role { font-weight: 700; color: var(--mem-ink); margin-right: 5px; }

/* ============================================================
 * 苹果风统一层 §19 —— 执行器实验室：工具地图 / 双栏对比 / 百宝箱分组
 * ② 工具地图：.tc-chip 点击 → .tc-item.is-hit 高亮（边框 + 光晕 + 提示文字三重编码）
 * ③ 有工具 vs 没工具：.tvs-* 左右并排，两栏各自独立滚动
 * ⑧ 工具百宝箱：.tbx-* 按五分类分组 + 能力计数条
 * 全部走语义 token，无硬编码色值。
 * ============================================================ */

/* --- ② 工具地图 --- */
.tc-map { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--c-line-strong); background: var(--c-card);
  border-radius: var(--r-pill); padding: 6px 13px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.tc-chip .icon { color: var(--c-dim); flex-shrink: 0; transition: color var(--t-fast); }
.tc-chip:hover { border-color: var(--c-exe); color: var(--exe-ink); transform: translateY(-1px); }
.tc-chip:hover .icon { color: var(--exe-ink); }
.tc-chip:focus-visible { outline: 2px solid var(--c-exe); outline-offset: 2px; }
.tc-tipline {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: var(--fs-xs); color: var(--c-sub); line-height: 1.6;
}
.tc-tipline .icon { color: var(--c-dim); flex-shrink: 0; }
.tc-item { transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.tc-item.is-hit {
  border-color: var(--c-exe) !important;
  box-shadow: 0 0 0 3px var(--exe-tint);
}

/* --- ③ 有工具 vs 没工具：双栏 --- */
.tvs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .tvs-wrap { grid-template-columns: 1fr; } }
.tvs-col { min-width: 0; }
.tvs-head {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 700; margin-bottom: 7px;
}
.tvs-col.is-no .tvs-head { color: var(--c-sub); }
.tvs-col.is-yes .tvs-head { color: var(--exe-ink); }
.tvs-stage { min-height: 150px; max-height: 280px; overflow-y: auto; margin: 0; }

/* --- ⑧ 工具百宝箱 --- */
.tbx-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 9px 13px;
  background: var(--exe-tint); border: 1px solid var(--exe-line);
  border-radius: var(--r-sm);
}
.tbx-count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--exe-ink); }
.tbx-count .icon { flex-shrink: 0; }
.tbx-note { margin-left: auto; font-size: var(--fs-xs); color: var(--c-sub); }
.tbx-group { margin-bottom: 14px; }
.tbx-group:last-child { margin-bottom: 0; }
/* 工具百宝箱：感知 / 执行两组并列放置（窄屏自动回落为单列） */
.tbx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.tbx-grid .tbx-group { margin-bottom: 0; }
/* 并列后列变窄：名称独占一行、说明在下方折行（不再把“工具”两字挤到下一行） */
.tbx-grid .t-label { align-items: flex-start; }
.tbx-grid .t-txt { min-width: 0; }
.tbx-grid .t-txt b { display: block; white-space: nowrap; }
.tbx-grid .t-txt small { display: block; margin-top: 2px; line-height: 1.55; }
.tbx-group-head {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.tbx-group-head .icon { color: var(--c-dim); flex-shrink: 0; }
.tbx-group-head b { font-weight: 700; }
.tbx-group-head span { font-size: var(--fs-xs); color: var(--c-sub); }

/* ============================================================
 * 智能体实验室（L13）：工作台可视化 + 配套实验
 * 1) 工作台：三态（run 进行中 / done 已完成 / skip 本轮未参与）+ 本轮轨迹 + 重放
 * 2) 实验①：管线阶段预测（预测图 → 逐条讲解 → 真实跑）
 * 3) 实验②：组件开关（与工作台开关双向联动）
 * 4) 进阶课堂：探索进度
 * ============================================================ */

/* --- 语义色小工具：给元素挂上所属模块的四色，其余样式用 --node* 取用 --- */
.c-per   { --node: var(--c-per);   --node-tint: var(--per-tint);   --node-line: var(--per-line);   --node-ink: var(--per-ink); }
.c-plan  { --node: var(--c-plan);  --node-tint: var(--plan-tint);  --node-line: var(--plan-line);  --node-ink: var(--plan-ink); }
.c-mem   { --node: var(--c-mem);   --node-tint: var(--mem-tint);   --node-line: var(--mem-line);   --node-ink: var(--mem-ink); }
.c-exe   { --node: var(--c-exe);   --node-tint: var(--exe-tint);   --node-line: var(--exe-line);   --node-ink: var(--exe-ink); }
.c-brain { --node: var(--c-brain); --node-tint: var(--brain-tint); --node-line: var(--brain-line); --node-ink: var(--brain-ink); }

@keyframes pgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@keyframes pgSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- 工作台状态条 --- */
.pipe-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.pipe-bar .btn { margin-left: auto; }
.pipe-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--c-bg-alt); color: var(--c-sub); border: 1px solid var(--c-line);
}
.pipe-state.is-running { background: var(--brain-tint); color: var(--brain-ink); border-color: var(--brain-line); }
.pipe-state.is-running::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-brain); animation: pgPulse 1s ease-in-out infinite;
}
.pipe-state.is-done { background: var(--mem-tint); color: var(--mem-ink); border-color: var(--mem-line); }
.pipe-state.is-error { background: var(--exe-tint); color: var(--exe-ink); border-color: var(--exe-line); }

.pipe-legend { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--c-dim); }
.pipe-legend .lg { width: 10px; height: 10px; border-radius: 3px; margin-left: 7px; display: inline-block; background: var(--c-line); }
/* 两种状态都用「线型」区分，不用色块填充：
   本轮参与 = 白底 + 实线描边（和图上节点的 done 态同形），本轮未参与 = 白底 + 虚线。 */
.pipe-legend .lg-done { background: #fff; border: 1.5px solid var(--c-mem); }
.pipe-legend .lg-skip { background: #fff; border: 1.5px dashed var(--c-line-strong); }

/* ==========================================================================
   智能体内部工作台 · 信息流动图
   为什么单独一块：真实智能体不是「感知→规划→记忆→执行」走一遍就完事——
   工具结果拼回上下文后，大脑还要再看一遍才给得出最终答案。
   这里画两样东西把“回路”和“角色”讲清楚：
     ① 轮次（几个 ↻ = 大脑重新规划了几次）
     ② 每一轮真正发给大脑的消息和它们各自的角色
   ========================================================================== */
.pg-flow {
  margin: var(--sp-3) 0 var(--sp-2);
  padding: 12px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-elev);
}

/* --- 引擎状态条：先说清“这一轮到底是谁在做决定” --- */
.pg-engine {
  font-size: 12.5px; line-height: 1.75;
  color: var(--c-ink-2);
  padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-bg-alt);
  display: flex; flex-direction: column; gap: 2px;
}
.pg-engine > svg { flex: 0 0 auto; }
.pg-engine .dim { color: var(--c-sub); }
.pg-engine.is-llm { border-color: var(--mem-line); background: var(--mem-tint); }
.pg-engine.is-llm > svg { color: var(--mem-ink); }
.pg-engine.is-rules { border-color: var(--exe-line); background: var(--exe-tint); }
.pg-engine.is-rules > svg { color: var(--exe-ink); }

/* --- 轮次时间轴 --- */
.pg-rounds { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.pg-flow-empty {
  font-size: 11.5px; color: var(--c-dim); line-height: 1.7;
  padding: 8px 2px;
}
.pg-round {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-dim);
  font-size: 12px; line-height: 1.6;
}
.pg-round.is-now { border-left-color: var(--c-brain); background: var(--brain-tint); }
.pg-round.is-done { border-left-color: var(--c-mem); }
.pg-round .pgn {
  flex: 0 0 auto; font-weight: 900; color: var(--c-sub);
  letter-spacing: .2px;
}
.pg-round.is-now .pgn { color: var(--brain-ink); }
.pg-round .pgw { flex: 1 1 auto; min-width: 0; color: var(--c-ink-2); }
.pg-round .pgc {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  color: var(--c-sub); background: var(--c-elev);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 1px 8px;
}

/* 轮与轮之间的回路：这一行就是整个卡片要讲的那件事 */
.pg-loop {
  align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--c-brain);
  padding: 2px 0 2px 14px;
  position: relative;
}
.pg-loop::before {          /* 折角连线：从上一轮绕回大脑 */
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0;
  border-left: 2px dotted var(--c-line-strong);
}
.pg-loop code {
  background: var(--exe-tint); color: var(--exe-ink);
  border-radius: 4px; padding: 0 5px; font-size: 11px;
}

/* --- 上下文角色链 --- */
.pg-chainwrap { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.pg-chainlabel {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 800; color: var(--c-sub); margin-bottom: 7px;
}
.pg-chainlabel .dim { font-weight: 600; color: var(--c-dim); }
.pg-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pg-chain-arrow { color: var(--c-dim); font-size: 12px; }
.pg-chain-empty { font-size: 11.5px; color: var(--c-dim); }
.pg-msg {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
  padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-bg-alt); color: var(--c-sub);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-msg.r-system { border-color: var(--brain-line); background: var(--brain-tint); color: var(--brain-ink); }
.pg-msg.r-user   { border-color: var(--per-line);   background: var(--per-tint);   color: var(--per-ink); }
.pg-msg.r-assistant.r-call { border-color: var(--plan-line); background: var(--plan-tint); color: var(--plan-ink); }
.pg-msg.r-assistant { border-color: var(--mem-line); background: var(--mem-tint); color: var(--mem-ink); }
.pg-msg.r-tool   { border-color: var(--exe-line);   background: var(--exe-tint);   color: var(--exe-ink); }
.pg-msg.is-last { box-shadow: 0 0 0 2px var(--c-elev), 0 0 0 3.5px var(--c-brain); }

/* --- 角色链上的“所属空间”小标签 ---
   观察空间 = 信息进来（system / user / tool）；动作空间 = 决定要做的事（assistant）。
   配色沿用全站的空间语义色：观察 = 蓝（感知器）、动作 = 红（执行器），和感知器实验室一致。 */
.pg-sp {
  font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 4px; margin-left: 5px;
}
.pg-sp.sp-observe { background: var(--per-tint); color: var(--per-ink); border: 1px solid var(--per-line); }
.pg-sp.sp-act     { background: var(--exe-tint); color: var(--exe-ink); border: 1px solid var(--exe-line); }
.pg-chainlabel .sp-obs-t { color: var(--per-ink); }
.pg-chainlabel .sp-act-t { color: var(--exe-ink); }

/* --- 引擎条新增两态：关掉规划器（有 Key，规则代劳）/ 离线演示（内置轨迹） --- */
.pg-engine.is-plan-off { border-color: var(--plan-line); background: var(--plan-tint); }
.pg-engine.is-plan-off > svg { color: var(--plan-ink); }
.pg-engine.is-demo { border-color: var(--brain-line); background: var(--brain-tint); }
.pg-engine.is-demo > svg { color: var(--brain-ink); }
/* 问答模式：请求里没有工具，用蓝色和"降级/演示"的橙黄区分开，免得看混 */
.pg-engine.is-ask { border-color: var(--per-line); background: var(--per-tint); }
.pg-engine.is-ask > svg { color: var(--per-ink); }

/* --- 思考模式：不是第五个组件，单独一块，用虚线框 + 蓝底和上面四组件区分开 --- */
.pg-thinkbox {
  margin-top: 9px; padding: 9px 11px;
  border: 1px dashed var(--per-line); border-radius: var(--r-sm);
  background: var(--per-tint);
}
.pg-think-tag {
  font-size: 9.5px; font-weight: 800; margin-left: 6px; padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--c-elev); color: var(--per-ink); border: 1px solid var(--per-line);
}
.pg-think-note { margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: var(--c-sub); }
.pg-think-note code {
  background: var(--c-elev); color: var(--per-ink);
  border-radius: 4px; padding: 0 4px; font-size: 11px;
}
.pg-think-note b { color: var(--c-ink); }

/* --- 对话区那颗「多步」芯片：一眼能挑出来 --- */
.pg-chips .chip-suggest.is-multi {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border-color: var(--plan-line); background: var(--plan-tint); color: var(--plan-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-chips .chip-suggest.is-multi:hover { background: var(--plan-tint); filter: brightness(.97); }
.chip-tag {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 900; padding: 2px 6px;
  border-radius: var(--r-pill); background: var(--c-plan); color: #fff;
}

/* ==========================================================================
   实验：多步任务 —— 规划器是怎么拆步的
   离线逐步演示：一步点亮一个组件 + 一条轨迹，学生跟着数“规划器出手了几次”。
   ========================================================================== */
.pg-multi-task {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--plan-line); background: var(--plan-tint);
  color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.75;
}
.pg-multi-task svg { flex: 0 0 auto; margin-top: 3px; color: var(--plan-ink); }
.pg-multi-task b { color: var(--plan-ink); }

.pg-multi-steps { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pg-ms-empty {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--c-dim); line-height: 1.7;
}
.pg-ms {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--c-line); background: var(--c-elev);
  animation: pgMsIn .28s ease both;
}
/* 当前这一步：橙描边 + 柔光外环，视线自然落上去 */
.pg-ms.is-cur { border-color: var(--c-plan); box-shadow: 0 0 0 3px var(--plan-tint); }
@keyframes pgMsIn { from { opacity: 0; transform: translateY(6px); } }

.pg-ms-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
  background: var(--node, var(--c-dim));     /* --node 由同元素的 .c-* 提供 */
}
.pg-ms-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-ms-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-ms-who { font-size: var(--fs-xs); font-weight: 800; color: var(--node-ink, var(--c-sub)); }
.pg-ms-role {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--c-bg-alt); color: var(--c-sub); border: 1px solid var(--c-line);
}
.pg-ms-t { font-size: var(--fs-sm); line-height: 1.7; color: var(--c-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .pg-ms { animation: none; }
}

/* ==========================================================================
   智能体内部工作台 · 总装图（大脑居中，四组件环绕）
   为什么不用竖排的「感知→规划→记忆→执行」链条：那条链的箭头只有向下一种方向，
   在结构上就画不出「执行器 → 大脑」的回流——而真实智能体恰恰靠这个回流工作。
   放射状才画得出：每条边方向明确，亮起即“本轮走过这条边”。
   ========================================================================== */
.pg-hub {
  /* 节点是正方形（图标在上、名称在下）。
   * 宽高必须写死成同一个 px 值，不能沿用 clamp(60px, 22%, 88px)：
   * --nh 参与了 --rowc / --rowh 这些纵向计算，而百分比在 top/height 里是按
   * 【容器高度】解析的——一旦 --nh 里带 %，整张图的纵向坐标就全错位。 */
  --nw: 84px;                      /* 节点宽 */
  --nh: 84px;                      /* 节点高 = 宽（正方形） */
  --gapv: 34px;                    /* 三行之间的纵向间距；同时也是上下两条竖边的长度 */
  --side: 10%;                     /* 左右两个节点距容器边缘的水平内缩（免得图形被拉得太扁） */
  /* 中间行的垂直中心。三行分别是：感知器 / 记忆器·大脑·执行器 / 规划器，
   * 所以中心 = 一行高 + 行距 + 半行高。
   * 记忆器、执行器、大脑三者的 top 都锚在这一行上，横向连线才对得准——
   * 之前记忆器/执行器用的是 --gapv，比大脑高了一整行，两条横线悬在方块下方连不上。 */
  --rowc: calc(var(--nh) + var(--gapv) + var(--nh) / 2);
  position: relative;
  height: calc(3 * var(--nh) + 2 * var(--gapv));
  margin: 12px 0 4px;
  /* 关键：.pipe-card 是 flex 纵向容器，而这里的子节点全是 absolute，
     内容高度天然是 0 —— 不加这句就会被 flex 收缩压成 0 高度，
     节点整体溢出、压住下面的内容。 */
  flex: 0 0 auto;
}

/* --- 连线：绝对定位的 div，不用 SVG。
   L03 那套 svg + preserveAspectRatio="none" 在这个宽高比下会拉伸虚线和箭头，
   所以改用 div + repeating-linear-gradient：动画方向 = 信息方向，完全不依赖 viewBox。
   端点取节点中心、箭头取连线中点——中点必然落在两节点之间的空隙里，
   所以箭头不会被节点遮住，也不用随栏宽变化去重调百分比。 --- */
.pg-hub-edge {
  position: absolute; z-index: 0; pointer-events: none;
  --edge-c: var(--c-line-strong);
}
.pg-hub-edge.h {
  height: 2px; margin-top: -1px;
  background-image: repeating-linear-gradient(90deg, var(--edge-c) 0 5px, transparent 5px 11px);
  background-size: 11px 100%;
}
.pg-hub-edge.v {
  width: 2px; margin-left: -1px;
  background-image: repeating-linear-gradient(180deg, var(--edge-c) 0 5px, transparent 5px 11px);
  background-size: 100% 11px;
}

/* 竖向：x 固定在正中，起点与长度都由节点尺寸算出。
   大脑 ⇄ 规划器是一对反向边，用 ±7px 错开（和横向那两组同理）。
   ——规划器是独立组件：大脑把上下文交给它、它把决策交回大脑，
     这一进一出【都只连大脑】，所以它没有通往执行器的线（决定 ≠ 执行）。 */
.pg-hub-edge[data-edge="per-brain"]  { left: 50%; top: calc(var(--nh) / 2); height: calc(var(--nh) + var(--gapv)); }
.pg-hub-edge[data-edge="brain-plan"] { left: calc(50% - 7px); top: var(--rowc); height: calc(var(--nh) + var(--gapv)); }
.pg-hub-edge[data-edge="plan-brain"] { left: calc(50% + 7px); top: var(--rowc); height: calc(var(--nh) + var(--gapv)); }

/* 横向：记忆器中心 ⇄ 大脑中心 / 大脑中心 ⇄ 执行器中心。
   起点 = 内缩量 + 半个节点宽（即侧边节点的中心），终点 = 50%（大脑中心）。
   每一组的两条反向线用 ±7px 错开，避免叠在一起看不清：
     左组（记忆器）上行 = 大脑 → 记忆器，下行 = 记忆器 → 大脑；
     右组（执行器）上行 = 大脑 → 执行器（① 按接口写参数），
                   下行 = 执行器 → 大脑（② 结果回传）。 */
.pg-hub-edge[data-edge="brain-mem-out"] { top: calc(var(--rowc) - 7px); left: calc(var(--side) + var(--nw) / 2); width: calc(50% - var(--side) - var(--nw) / 2); }
.pg-hub-edge[data-edge="brain-mem-in"]  { top: calc(var(--rowc) + 7px); left: calc(var(--side) + var(--nw) / 2); width: calc(50% - var(--side) - var(--nw) / 2); }
.pg-hub-edge[data-edge="brain-exe-out"] { top: calc(var(--rowc) - 7px); left: 50%; width: calc(50% - var(--side) - var(--nw) / 2); }
.pg-hub-edge[data-edge="brain-exe-in"]  { top: calc(var(--rowc) + 7px); left: 50%; width: calc(50% - var(--side) - var(--nw) / 2); }

/* ① ② 两枚步骤标签：坐落在【大脑右边缘 → 执行器左边缘】这段空隙里。
   宽度必须按“空隙”算，不能照抄连线的宽度——连线是中心对中心（两端被节点盖住，
   所以能用 50% - side - nw/2），而标签必须完整落在空隙内，否则会压在执行器卡片上：
     空隙 = 100% - side - nw（执行器左边缘） - (50% + nw/2)（大脑右边缘）
          = 50% - side - 1.5 * nw
   文字居中；上标挂在【上行线外侧】（线上方），下标挂在【下行线外侧】（线下方），
   所以两枚标签永远不会和连线、箭头、节点打架。
   translateY(±100%) 让标签贴着自己那条线，不用写死行数。 */
.pg-hub-tag {
  position: absolute; z-index: 2;
  left: calc(50% + var(--nw) / 2);
  width: calc(50% - var(--side) - var(--nw) * 1.5);
  font-size: 9.5px; font-weight: 800; line-height: 1.25;
  text-align: center; color: var(--exe-ink);
  /* 默认压暗：这一步只是"这条边是什么意思"的说明。
   * 本轮真的走过这条边时（.is-on）才提亮——否则会出现
   *「执行器：本轮未参与」和亮着的「① 按接口写参数」同时挂在屏上的自相矛盾。 */
  opacity: .42;
  transition: opacity .22s ease;
}
.pg-hub-tag.is-on { opacity: 1; }
.pg-hub-tag[data-tag="exe-out"] { top: calc(var(--rowc) - 13px); transform: translateY(-100%); }
.pg-hub-tag[data-tag="exe-in"]  { top: calc(var(--rowc) + 13px); }

.pg-hub-edge[data-edge="per-brain"] { --edge-c-on: var(--c-per); }
.pg-hub-edge[data-edge="brain-mem-out"],
.pg-hub-edge[data-edge="brain-mem-in"] { --edge-c-on: var(--c-mem); }
.pg-hub-edge[data-edge="brain-exe-out"],
.pg-hub-edge[data-edge="brain-exe-in"] { --edge-c-on: var(--c-exe); }
.pg-hub-edge[data-edge="brain-plan"],
.pg-hub-edge[data-edge="plan-brain"] { --edge-c-on: var(--c-plan); }
.pg-hub-edge.is-on { --edge-c: var(--edge-c-on); }

/* 箭头：border 三角，染哪一边就朝哪个方向；固定落在连线中点 */
.pg-hub-edge::after {
  content: ""; position: absolute;
  left: 50%; top: 50%; margin: -5px 0 0 -5px;
  width: 0; height: 0; border: 5px solid transparent;
}
.pg-hub-edge.to-left::after  { border-color: transparent transparent transparent var(--edge-c); }
.pg-hub-edge.to-right::after { border-color: transparent var(--edge-c) transparent transparent; }
.pg-hub-edge.to-down::after  { border-color: var(--edge-c) transparent transparent transparent; }
.pg-hub-edge.to-up::after    { border-color: transparent transparent var(--edge-c) transparent; }

.pg-hub-edge.is-on.h.to-right { animation: hubFlowR .9s linear infinite; }
.pg-hub-edge.is-on.h.to-left  { animation: hubFlowL .9s linear infinite; }
.pg-hub-edge.is-on.v.to-down  { animation: hubFlowD .9s linear infinite; }
.pg-hub-edge.is-on.v.to-up    { animation: hubFlowU .9s linear infinite; }
@keyframes hubFlowR { to { background-position: 11px 0; } }
@keyframes hubFlowL { to { background-position: -11px 0; } }
@keyframes hubFlowD { to { background-position: 0 11px; } }
@keyframes hubFlowU { to { background-position: 0 -11px; } }

/* --- 节点：正方形，图标在上、名称在下。
   卡里放的是短名（STAGES.short），全称与配色仍由图例行给出对照。
   竖排用 flex-direction: column；宽高由 --nw / --nh 给出同一个值，所以必然是正方形。 --- */
.pg-hub-node {
  position: absolute; z-index: 1;      /* 高于连线，节点自然遮住线头，不用算精确端点 */
  width: var(--nw); height: var(--nh);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;                            /* 图标与名称之间的间距 */
  padding: 6px 5px;
  border-radius: 14px;
  border: 1.5px solid var(--c-line);
  background: var(--c-card);           /* 必须不透明：卡片要挡住下面的连线 */
  /* 未点亮只用「去饱和」表达，绝不用整体 opacity——
     卡片一半透明，底下的虚线就会从卡面上穿过去，非常难看。 */
  filter: saturate(.35);
  box-shadow: 0 1px 2px rgba(43, 43, 51, .05);
  transition: filter .22s ease, transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.pg-hub-node svg { width: 22px; height: 22px; }
/* 名称：正方形里空间有限，"大语言模型大脑"这种长名会换行——
   所以给它两行 + 居中 + 稍紧的行高，不压缩字号到看不清。 */
.pg-hub-node .pg-hub-name {
  display: block; max-width: 100%;
  font-size: 10px; font-weight: 800; line-height: 1.15;
  text-align: center; letter-spacing: -.2px;
  color: var(--c-sub);
}
/* 大脑是中心：默认就填色 + 深描边，不用改变尺寸也能立住 */
.pg-hub-node.n-brain {
  border-width: 2px; border-color: var(--nc-line);
  background: var(--nc-tint); color: var(--nc-ink);
  box-shadow: 0 0 0 4px var(--nc-tint);
}
.pg-hub-node.n-brain svg { width: 24px; height: 24px; }
/* 定位：三行三列的放射状 ——
     第 1 行：感知器            （中列）
     第 2 行：记忆器 · 大脑 · 执行器（左 / 中 / 右）
     第 3 行：规划器            （中列）
   第 2 行的三个节点必须共用同一个 top（= 一行高 + 行距），
   否则横向连线会像以前那样悬在方块外面。
   顶部与左侧两行绝不能漏——漏掉的话节点会按 DOM 顺序自动流进网格，
   变成「感知器左上、大脑右上」，和下面的连线完全对不上。
   居中用 margin-left 而不是 transform：否则 .is-run 的 scale(1.05)
   会把 translateX(-50%) 整体顶掉，节点一点亮就横跳半个身位。 */
.pg-hub-node.n-per   { left: 50%; top: 0; margin-left: calc(var(--nw) / -2); }
.pg-hub-node.n-mem   { left: var(--side); top: var(--rowc); margin-top: calc(var(--nh) / -2); }
.pg-hub-node.n-brain { left: 50%; top: var(--rowc); margin-left: calc(var(--nw) / -2); margin-top: calc(var(--nh) / -2); }
.pg-hub-node.n-exe   { right: var(--side); top: var(--rowc); margin-top: calc(var(--nh) / -2); }
.pg-hub-node.n-plan  { left: 50%; top: calc(2 * var(--gapv) + 2 * var(--nh)); margin-left: calc(var(--nw) / -2); }
.pg-hub-node.n-per   { --nc: var(--c-per);   --nc-tint: var(--per-tint);   --nc-ink: var(--per-ink);   --nc-line: var(--per-line); }
.pg-hub-node.n-plan  { --nc: var(--c-plan);  --nc-tint: var(--plan-tint);  --nc-ink: var(--plan-ink);  --nc-line: var(--plan-line); }
.pg-hub-node.n-mem   { --nc: var(--c-mem);   --nc-tint: var(--mem-tint);   --nc-ink: var(--mem-ink);   --nc-line: var(--mem-line); }
.pg-hub-node.n-exe   { --nc: var(--c-exe);   --nc-tint: var(--exe-tint);   --nc-ink: var(--exe-ink);   --nc-line: var(--exe-line); }
.pg-hub-node.n-brain { --nc: var(--c-brain); --nc-tint: var(--brain-tint); --nc-ink: var(--brain-ink); --nc-line: var(--brain-line); }

/* 节点里的图标底板。正方形卡片里要留出名称那一行的位置，
   所以底板从 46px 收到 38px（22 + 5 + 11 ≈ 38 的视觉重量刚好压得住 84px 的方卡）。 */
.pg-hub-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--nc-tint); color: var(--nc-ink);
}
.pg-hub-mark {
  position: absolute; top: 5px; left: 7px;
  font-size: 11px; font-weight: 900; line-height: 1; color: var(--nc-ink);
}
.pg-hub-round {
  position: absolute; top: -7px; right: -5px;
  font-size: 9.5px; font-weight: 900; line-height: 1;
  padding: 2px 6px; border-radius: 999px;
  background: var(--nc-ink); color: #fff;
}

/* 三态：进行中放大发光 / 已完成描边 / 未参与虚线+灰底。
   三态一律不透明——淡化只靠饱和度与底色，避免连线透出卡面。 */
.pg-hub-node.is-run {
  filter: none; transform: scale(1.08);
  border-color: var(--nc); background: var(--nc-tint);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
.pg-hub-node.is-done { filter: none; border-color: var(--nc-line); }
.pg-hub-node.is-skip { filter: saturate(.12); border-style: dashed; background: var(--c-bg-alt); }
.pg-hub-node.is-skip .pg-hub-ico { background: var(--c-bg-alt); color: var(--c-dim); }

/* --- 轨迹区：按轮次分组（总装图管拓扑，这里管顺序） --- */
.pg-log-round { margin-bottom: 9px; }
.pg-log-round:last-child { margin-bottom: 0; }
.pg-log-round > .pglr {
  display: inline-block; margin: 0 0 5px;
  font-size: 11px; font-weight: 900; letter-spacing: .3px;
  color: var(--c-sub); background: var(--c-bg-alt);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 2px 9px;
}
.pg-log-row.is-skip { opacity: .55; }
.pg-log-row.is-skip .pg-log-body { font-style: italic; }

/* ---------- ReAct 三步（思考 / 行动 / 观察） ----------
 * 口径与规划器实验室「核心演示：ReAct 循环」那张卡完全一致，
 * 学生在两页看到的是同一套语言：Thought / Action / Observation。 */
.pg-log-row.react { border-left-width: 4px; }
.pg-log-row.react.r-plan  { --node: var(--c-plan); }
.pg-log-row.react.r-per   { --node: var(--c-per); }
.pg-log-row.react.r-mem   { --node: var(--c-mem); }
.pg-log-row.react.r-brain { --node: var(--c-brain); }
.pg-log-row.react.r-exe   { --node: var(--c-exe); }
.pg-log-row.react .react-tag {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-right: 6px; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 900; color: var(--node, var(--c-sub));
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
}
.pg-log-row.react .react-tag i {
  font-style: normal; font-weight: 600; font-size: 10px;
  color: var(--c-dim); letter-spacing: .2px;
}

/* 「规划器为什么选它」的三步依据：默认折叠，主线保持清爽 */
.pg-pick { margin-top: 7px; }
.pg-pick > summary {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--c-sub);
  cursor: pointer; list-style: none; padding: 2px 0;
}
.pg-pick > summary::-webkit-details-marker { display: none; }
.pg-pick > summary:hover { color: var(--c-per-deep); }
.pg-pick-body {
  margin-top: 6px; padding: 8px 10px;
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-bg-alt);
}
.pg-pick-fn {
  font-size: 11px; color: var(--c-sub); margin-bottom: 5px;
}
.pg-pick-fn code {
  background: var(--per-tint); color: var(--per-ink);
  border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700;
}
.pg-pick-step {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11.5px; line-height: 1.65; padding: 2px 0;
}
.pg-pick-k {
  flex: 0 0 auto; font-weight: 900; color: var(--c-plan);
  min-width: 62px;
}
.pg-pick-v { flex: 1 1 auto; min-width: 0; color: var(--c-ink-2); word-break: break-word; }

/* --- 窄屏：方卡与行距一起收 ---
   节点尺寸不再是 clamp(百分比)，所以这里必须显式把 --nw / --nh 一起改小，
   只压 --gapv 是不够的（方卡不会自己缩）。 --side 也要收：10% 在 300px 宽的容器里
   会占掉 60px，三个方卡就挤不下了。 */
@media (max-width: 430px) {
  .pg-hub { --nw: 68px; --nh: 68px; --gapv: 20px; --side: 6%; }
  .pg-hub-node { gap: 4px; padding: 5px 4px; border-radius: 11px; }
  .pg-hub-ico { width: 32px; height: 32px; border-radius: 9px; }
  .pg-hub-node svg { width: 19px; height: 19px; }
  .pg-hub-node.n-brain svg { width: 21px; height: 21px; }
  .pg-hub-node .pg-hub-name { font-size: 9.5px; }
  .pg-hub-round { right: -2px; padding: 2px 4px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-hub-edge.is-on { animation: none !important; }
}

/* 以下 .pipe-stage / .pipe-arrow 规则已随「竖排五步卡 → 放射状总装图」改造停用，
   暂予保留以免波及其他页面；确认无引用后可整段移除。 */
.pipe-stage .pmain { flex: 1; min-width: 0; }
.pipe-stage .pdur { margin-left: 7px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-dim); letter-spacing: .2px; }
.pipe-stage .pmark { flex: 0 0 auto; width: 20px; text-align: center; font-size: 15px; font-weight: 900; color: var(--c-dim); }
.pipe-stage.done { opacity: 1; filter: none; background: var(--c-elev); }
.pipe-stage.done .pmark { color: var(--c-mem); }
.pipe-stage.skip { opacity: .5; background: #fff; border-style: dashed; }
.pipe-stage.skip .pmark { color: var(--c-dim); }
.pipe-stage.skip .pstatus { font-style: italic; }
.pipe-stage.on { z-index: 1; }
.pipe-stage.on .pmark { color: var(--c-brain); animation: pgPulse 1.1s ease-in-out infinite; }

/* --- 本轮轨迹 --- */
.pipe-log-head {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--sp-2); padding-top: var(--sp-3); margin-bottom: 7px;
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-sm); font-weight: 800; color: var(--c-ink-2);
}
.pipe-log-head span { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--c-dim); }
.pipe-log { display: flex; flex-direction: column; gap: 6px; }
.pg-log-empty { font-size: var(--fs-xs); color: var(--c-dim); line-height: 1.7; }
.pg-log-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--c-elev); border-left: 3px solid var(--node, var(--c-line));
  animation: pgSlideIn .3s ease;
}
.pg-log-dot { flex: 0 0 auto; margin-top: 2px; color: var(--node, var(--c-sub)); }
.pg-log-body { flex: 1; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-ink-2); }
.pg-log-body b { margin-right: 6px; font-weight: 800; color: var(--node-ink, var(--c-ink)); }
.pg-log-ms { font-size: var(--fs-xs); color: var(--c-dim); }
.pg-log-skip {
  margin-top: 2px; padding: 8px 10px; border-radius: var(--r-sm);
  background: #fff; border: 1px dashed var(--c-line-strong);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--c-dim);
}
.pg-log-skip b { margin-right: 8px; color: var(--c-sub); }
.pg-log-skip b + b { margin-left: 10px; }

/* --- 执行器工具消息：调用 / 结果 两段 --- */
.tool-note { border-left: 3px solid var(--c-exe); }
.tool-call, .tool-result {
  margin-top: 5px; padding: 7px 10px; border-radius: var(--r-xs);
  background: var(--c-elev); font-size: var(--fs-xs); line-height: 1.6;
}
.tool-call b, .tool-result b {
  margin-right: 6px; padding: 1px 6px; border-radius: 5px;
  background: var(--exe-tint); color: var(--exe-ink); font-weight: 800;
}

/* --- 工作台底部：用当前开关真实跑一句 --- */
.pg-flag-try { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pg-flag-tip { flex: 1; min-width: 140px; font-size: var(--fs-xs); color: var(--c-dim); }
/* 关掉规划器时的提醒：这是最容易产生误解的一个开关，必须显式说清 */
.pg-flag-tip .pg-flag-warn {
  display: block; margin-top: 5px; padding: 7px 9px;
  border-left: 3px solid var(--c-plan); border-radius: var(--r-sm);
  background: var(--plan-tint); color: var(--plan-ink);
  font-size: var(--fs-xs); line-height: 1.7;
}

/* --- 实验①：管线阶段预测 --- */
.pg-case {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--brain-tint); border: 1px solid var(--brain-line);
}
.pg-case-say { flex: 1; font-size: var(--fs-sm); line-height: 1.6; color: var(--brain-ink); }
.pg-case-note { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--c-sub); }

.pg-map { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: var(--sp-3) 0 6px; }
.pg-map-arrow { align-self: center; font-weight: 800; color: var(--c-dim); }
.pg-map-node {
  flex: 1 1 0; min-width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; border-radius: var(--r-md);
  background: #fff; border: 2px dashed var(--c-line);
  transition: all .2s;
}
.pg-map-ico { display: flex; color: var(--c-dim); }
.pg-map-name { font-size: var(--fs-xs); font-weight: 800; color: var(--c-sub); }
.pg-map-tag { min-height: 14px; font-size: 10.5px; color: var(--c-dim); }
.pg-map-node.is-picked { border-style: solid; border-color: var(--node); background: var(--node-tint); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.pg-map-node.is-picked .pg-map-ico, .pg-map-node.is-picked .pg-map-name { color: var(--node-ink); }
.pg-map-node.is-picked .pg-map-tag { color: var(--node-ink); font-weight: 700; }
.pg-map-node.is-ok { border-style: solid; border-color: var(--c-mem); background: var(--mem-tint); }
.pg-map-node.is-ok .pg-map-ico, .pg-map-node.is-ok .pg-map-name, .pg-map-node.is-ok .pg-map-tag { color: var(--mem-ink); }
.pg-map-node.is-part, .pg-map-node.is-miss { border-style: solid; border-color: var(--c-plan); background: var(--plan-tint); }
.pg-map-node.is-part .pg-map-ico, .pg-map-node.is-part .pg-map-name, .pg-map-node.is-part .pg-map-tag,
.pg-map-node.is-miss .pg-map-ico, .pg-map-node.is-miss .pg-map-name, .pg-map-node.is-miss .pg-map-tag { color: var(--plan-ink); }
.pg-map-node.is-extra { border-style: solid; border-color: var(--c-exe); background: var(--exe-tint); }
.pg-map-node.is-extra .pg-map-ico, .pg-map-node.is-extra .pg-map-name, .pg-map-node.is-extra .pg-map-tag { color: var(--exe-ink); }
.pg-map-hint { margin-bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--c-dim); }

.pg-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.pg-pick {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md); cursor: pointer;
  background: #fff; border: 2px solid var(--c-line);
  font-family: inherit; font-size: var(--fs-sm); color: var(--c-ink-2);
  transition: all .15s;
}
.pg-pick:hover { border-color: var(--c-line-strong); transform: translateY(-1px); }
.pg-pick.on { border-color: var(--c-brain); background: var(--brain-tint); box-shadow: 0 3px 10px rgba(246, 185, 59, .18); }
.pg-pick-box {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 2px solid var(--c-line-strong);
  font-size: 13px; font-weight: 900; color: #fff;
}
.pg-pick.on .pg-pick-box { background: var(--c-brain); border-color: var(--c-brain); }
.pg-pick.r-hit { border-color: var(--c-mem); background: var(--mem-tint); }
.pg-pick.r-hit .pg-pick-box { background: var(--c-mem); border-color: var(--c-mem); }
.pg-pick.r-miss { border-color: var(--c-plan); background: var(--plan-tint); }
.pg-pick.r-miss .pg-pick-box { background: var(--c-plan); border-color: var(--c-plan); }
.pg-pick.r-over { border-color: var(--c-exe); background: var(--exe-tint); }
.pg-pick.r-over .pg-pick-box { background: var(--c-exe); border-color: var(--c-exe); }
.pg-pick-text { flex: 1; line-height: 1.5; }
.pg-pick-stage {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: var(--r-pill); background: var(--node-tint); color: var(--node-ink);
  font-size: 10.5px; font-weight: 800; font-style: normal;
}
.pg-phase-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--sp-3) 0; }
.pg-outs { max-height: 340px; overflow-y: auto; }
.pg-outs .bad { color: var(--exe-ink); font-weight: 700; }
.pg-outs .good { color: var(--mem-ink); font-weight: 700; }
.pg-why { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.pg-why-row { display: flex; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1.6; }
.pg-why-row.is-ok { background: var(--mem-tint); color: var(--mem-ink); }
.pg-why-row.is-no { background: var(--exe-tint); color: var(--exe-ink); }
.pg-why-row .icon { flex: 0 0 auto; margin-top: 2px; }
.pg-why-row b { margin-right: 6px; }

/* --- 通用“真实跑一遍” --- */
.pg-try { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pg-try-tip { font-size: var(--fs-xs); color: var(--c-dim); }

/* --- 进阶课堂：探索进度 --- */
.pg-adv-progress {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: var(--sp-3); padding: 9px 13px;
  border-radius: var(--r-md); background: var(--c-elev); border: 1px dashed var(--c-line-strong);
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.pg-adv-progress b { font-size: var(--fs-md); color: var(--brain-ink); }
.pg-adv-progress.all { background: var(--mem-tint); border-style: solid; border-color: var(--mem-line); color: var(--mem-ink); }
.pg-adv-progress.all b { color: var(--mem-ink); }
.adv-nav-btn.seen::after { content: "✓"; color: var(--c-mem); font-weight: 900; }

/* ============================================================
 * 智能体实验室（L13）· 第二轮增强
 * 1) 全栏目字号加大一号（投屏 / 五年级学生可读性）
 * 2) 导入卡：五步管线速览（苹果式低色彩：只有图标与环节名取语义色）
 * 3) 对话区“试试这样问”芯片
 * 4) 实验：上下文工程（对照真实请求）
 * 5) 实验：评估“体检”（固定题集 + 指标表）
 * 6) 实验：读轨迹找故障（Trace）
 * ============================================================ */

/* --- 1) 字号加大：只作用于智能体实验室，不影响其他栏目 --- */
#sec-playground {
  --fs-xs: 14px;
  --fs-sm: 15px;
  --fs-base: 16.5px;
  --fs-md: 18px;
  --fs-lg: 21px;
}
/* 该栏目内仍写死字号的小字一并抬到可读区间 */
#sec-playground .pipe-state,
#sec-playground .pipe-legend,
#sec-playground .pg-eval-group,
#sec-playground .pg-eval-ms,
#sec-playground .pg-trace-ms,
#sec-playground .pg-log-ms { font-size: 13px; }
#sec-playground .pipe-stage .ptitle { font-size: 16.5px; }
#sec-playground .pipe-stage .pstatus { font-size: 13.5px; line-height: 1.5; }
#sec-playground .pg-map-tag,
#sec-playground .pg-pick-stage { font-size: 12.5px; }
#sec-playground .chat-msgs .msg { font-size: 15.5px; }
#sec-playground .chat-msgs .msg .who { font-size: 12.5px; }
#sec-playground .chat-msgs .msg,
#sec-playground .pg-log-body { line-height: 1.7; }
#sec-playground .goal-item { font-size: var(--fs-sm); }
#sec-playground .summary-core { font-size: var(--fs-base); }
#sec-playground .sp-item,
#sec-playground .summary-think { font-size: var(--fs-sm); }

/* --- 2) 导入卡已删除 ---
 * 原「本课导航」卡（五步管线速览）的活已由两处承担：页头副标题讲承接关系、
 * 「内部工作台」现场点亮五步。配套的 .pg-intro / .pg-flow* / .pg-intro-foot
 * 样式（含 620px 断点）随之移除，这里不再占位。 */

/* --- 3) 对话区“试试这样问”芯片（一键填入：字号更小、前置用途标签，整齐且不抢视觉） --- */
.pg-chips { gap: 6px; align-content: flex-start; }
/* 窄屏才需要限高滚动；宽屏让 8 条芯片全部铺开，一眼看全、也不用滚动 */
@media (max-width: 620px) { .pg-chips { max-height: 132px; overflow-y: auto; } }
.pg-chips .chip-suggest {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  padding: 3px 9px 3px 4px;
}
/* 用途标签：一眼看出这句在考哪一环。
 * 「多步」那条仍走高亮橙（见 .pg-chips .chip-suggest.is-multi），两者互不干扰。 */
.pg-chips .chip-tag.is-ask {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; padding: 2px 6px;
  border-radius: var(--r-pill); background: #fff; color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}

/* --- 4) 实验：上下文工程 --- */
.pg-inspect-note { margin-bottom: 8px; font-size: var(--fs-sm); line-height: 1.75; color: var(--c-sub); }
.pg-pre {
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.7;
  background: #1e1e28; color: #d8d8e8; border-radius: var(--r-md);
  padding: 14px; max-height: 320px; overflow: auto;
}

/* --- 5) 实验：评估“体检” --- */
.pg-eval-task {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 15px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--c-line);
  font-size: var(--fs-base); line-height: 1.75; color: var(--c-ink-2);
}
.pg-eval-task .icon { flex: 0 0 auto; margin-top: 3px; color: var(--c-brain-deep); }
.pg-eval-task b { color: var(--c-ink); }
.pg-eval-steps { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-3) 0; }
.pg-eval-step {
  padding: 8px 13px; border-radius: var(--r-sm); background: var(--c-elev);
  border-left: 2px solid var(--c-line); font-size: var(--fs-sm); line-height: 1.65; color: var(--c-sub);
}
.pg-eval-guess {
  margin: var(--sp-3) 0; padding: 13px 15px; border-radius: var(--r-md);
  background: #fff; border: 1.5px dashed var(--c-line-strong);
  font-size: var(--fs-base); color: var(--c-ink-2);
}
.pg-eval-guessfb { margin-top: 10px; font-size: var(--fs-sm); color: var(--c-sub); }
.pg-eval-hint { margin: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--c-dim); }

.pg-eval-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.pg-eval-table th {
  text-align: left; padding: 10px 12px; font-weight: 700; color: var(--c-sub);
  background: var(--c-bg-alt); border-bottom: 1.5px solid var(--c-line);
}
.pg-eval-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); color: var(--c-ink-2); vertical-align: top; line-height: 1.6; }
.pg-eval-table td.yes { color: var(--mem-ink); font-weight: 700; background: var(--mem-tint); }
.pg-eval-table td.no { color: var(--exe-ink); font-weight: 700; background: var(--exe-tint); }
.pg-eval-table td.up { color: var(--mem-ink); font-weight: 800; }
.pg-eval-table td.down { color: var(--plan-ink); font-weight: 800; }
.pg-eval-table td.flat { color: var(--c-dim); font-weight: 700; }
.pg-eval-ms { display: block; margin-top: 3px; font-weight: 500; font-style: normal; color: var(--c-dim); }
.pg-eval-group {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--c-bg-alt); color: var(--c-sub);
  font-size: 12.5px; font-weight: 600; font-style: normal;
}
.pg-eval-metrics { margin-top: var(--sp-4); }
.pg-eval-mtitle {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink);
}
.pg-eval-mtitle .icon { color: var(--c-brain-deep); }
.pg-eval-concl {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: var(--sp-3); padding: 14px 16px; border-radius: var(--r-md);
  background: var(--c-elev); border: 1px solid var(--c-line);
  font-size: var(--fs-base); line-height: 1.8; color: var(--c-ink-2);
}
.pg-eval-concl .icon { flex: 0 0 auto; margin-top: 3px; color: var(--c-mem-deep); }
.pg-eval-concl b { color: var(--c-ink); }
.pg-eval-concl .ok { color: var(--mem-ink); font-weight: 700; }
.pg-eval-concl .no { color: var(--exe-ink); font-weight: 700; }
.pg-eval-concl .dim { color: var(--c-sub); }

/* --- 6) 实验：读轨迹找故障（Trace） --- */
.pg-trace { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-3) 0; }
.pg-trace-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--c-elev); border-left: 3px solid var(--node, var(--c-line));
  font-size: var(--fs-sm); line-height: 1.7;
}
.pg-trace-row.is-bad { background: var(--exe-tint); border-left-width: 5px; }
.pg-trace-who {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-width: 88px; font-weight: 700; color: var(--node-ink, var(--c-sub));
}
.pg-trace-txt { flex: 1; min-width: 0; color: var(--c-ink-2); }
.pg-trace-ms { flex: 0 0 auto; color: var(--c-dim); font-variant-numeric: tabular-nums; }
.pg-trace-q {
  display: flex; align-items: center; gap: 7px; margin: var(--sp-4) 0 10px;
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink);
}
.pg-trace-q .icon { color: var(--c-brain-deep); }
.pg-trace-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pg-trace-opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; border-radius: var(--r-md); cursor: pointer;
  background: #fff; border: 2px solid var(--c-line);
  transition: transform .15s, border-color .15s, background .15s;
}
.pg-trace-opt:hover { transform: translateY(-1px); border-color: var(--c-line-strong); }
.pg-trace-opt b { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); }
.pg-trace-opt small { font-size: 13.5px; line-height: 1.55; color: var(--c-sub); }
.pg-trace-opt.on { border-color: var(--c-ink-2); background: var(--c-bg-alt); }
.pg-trace-opt.r-hit { border-color: var(--c-mem); background: var(--mem-tint); }
.pg-trace-opt.r-over { border-color: var(--c-exe); background: var(--exe-tint); }
.pg-trace-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-3); }
.pg-trace-note { margin-top: var(--sp-3); font-size: var(--fs-sm); }

/* --- 7) 进阶课堂 / 组合交互：本栏目内字号与选中态统一（低色彩） --- */
#sec-playground .adv-chip { font-size: 15px; padding: 8px 16px; }
#sec-playground .adv-chip.on:not(.correct):not(.wrong) {
  border-color: var(--c-ink-2); background: var(--c-bg-alt); color: var(--c-ink);
}
#sec-playground .adv-msg { font-size: 14.5px; line-height: 1.7; padding: 10px 14px; }
#sec-playground .adv-msg .role { font-size: 12.5px; padding: 3px 10px; }
#sec-playground .adv-demo-sub { font-size: 14.5px; margin: 14px 0 10px; }
#sec-playground .adv-pre { font-size: 13.5px; line-height: 1.8; max-height: 320px; }
#sec-playground .adv-out { font-size: var(--fs-sm); line-height: 1.75; }
#sec-playground .adv-nav-btn { font-size: var(--fs-sm); }

/* ============================================================
 * §16 架构实验室风格对齐层 —— 参照「⑩ 深度拆解：腾讯 CodeBuddy」模块
 * 设计语言：白大卡 > 灰底子卡 > 白条目（三级层次）；
 *   节标题 = 语义色 tint 图标徽章 + 标题 + 计数胶囊（.cb-sec-head）；
 *   徽章/序号一律「淡色块 + 深色字」（实色+白字对比度不足，WCAG 考虑）。
 * 全部以 #sec-home 限定，保证不影响其它实验室。
 * ============================================================ */

/* ---------- 16.1 学习目标 / 课堂小结：节标题尺寸适配 ---------- */
/* （节标题已统一为 <h3>，与组件实验室一致；原 cb-sec-head 适配规则已随 cbHead 调用移除） */

/* 小结图标：实色金 → 金色 tint 徽章（目标序号球已并入 .lesson-goal.card-* .goal-num 统一管理） */
#sec-home .sp-icon {
  background: var(--brain-tint); color: var(--brain-ink);
}

/* ---------- 16.2 ② 核心公式卡：卡头徽章 + 白卡条目 ---------- */
#sec-home .formula-card h4 .fc-hd-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#sec-home .fc-hd-brain .fc-hd-ico { background: var(--brain-tint); color: var(--brain-ink); }
#sec-home .fc-hd-per   .fc-hd-ico { background: var(--per-tint);   color: var(--per-ink); }
#sec-home .fc-hd-exe   .fc-hd-ico { background: var(--exe-tint);   color: var(--exe-ink); }
/* 灰底卡内的「有什么 / 做什么」条目回到白卡（三级层次） */
#sec-home .formula-card .fc-item {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 10px; padding: 8px 11px; margin-bottom: 6px;
}
#sec-home .formula-card .fc-item:last-child { margin-bottom: 0; }

/* ---------- 16.3 ③ 总装图节点：类比徽章 tint 化 ---------- */
#sec-home .node .nanalogy {
  background: var(--nb-tint, var(--c-bg-alt));
  color: var(--nb-ink, var(--c-sub));
}
#sec-home .node-brain .nanalogy { background: var(--brain-tint); }

/* ---------- 16.4 ④ Model-Harness：清理历史色、统一 tint ---------- */
#sec-home .hd-harness { background: var(--plan-tint); }
#sec-home .hd-box { border-radius: 12px; background: var(--c-card); border-color: var(--c-line); }
#sec-home .hd-ctx   { background: var(--per-tint);   border-color: var(--per-line); }
#sec-home .hd-model { background: var(--brain-tint); border-color: var(--brain-line); }
#sec-home .hd-tool  { background: var(--exe-tint);   border-color: var(--exe-line); }
#sec-home .hd-loop  { background: var(--mem-tint);   border-color: var(--mem-line); }
#sec-home .hd-guard { background: var(--exe-tint);   border-color: var(--exe-line); }
#sec-home .hd-env { background: var(--mem-tint); }
#sec-home .hd-env-item {
  background: var(--c-card); color: var(--mem-ink);
  border: 1px solid var(--mem-line);
}

/* ---------- 16.6 ⑥ 组件抢答：选项图标 tint 化，hover 转实色 ---------- */
#sec-home .qg-opt-plan  { border-color: var(--plan-line); }
#sec-home .qg-opt-mem   { border-color: var(--mem-line); }
#sec-home .qg-opt-exe   { border-color: var(--exe-line); }
#sec-home .qg-opt-per   { border-color: var(--per-line); }
#sec-home .qg-opt-per  .qg-opt-icon { background: var(--per-tint);  color: var(--per-ink); }
#sec-home .qg-opt-plan .qg-opt-icon { background: var(--plan-tint); color: var(--plan-ink); }
#sec-home .qg-opt-mem  .qg-opt-icon { background: var(--mem-tint);  color: var(--mem-ink); }
#sec-home .qg-opt-exe  .qg-opt-icon { background: var(--exe-tint);  color: var(--exe-ink); }
#sec-home .qg-opt-per:hover:not(:disabled)  .qg-opt-icon { background: var(--c-per);  color: #fff; }
#sec-home .qg-opt-plan:hover:not(:disabled) .qg-opt-icon { background: var(--c-plan); color: #fff; }
#sec-home .qg-opt-mem:hover:not(:disabled)  .qg-opt-icon { background: var(--c-mem);  color: #fff; }
#sec-home .qg-opt-exe:hover:not(:disabled)  .qg-opt-icon { background: var(--c-exe);  color: #fff; }
#sec-home .qg-opt-per:hover:not(:disabled)  { background: var(--per-tint); }
#sec-home .qg-opt-plan:hover:not(:disabled) { background: var(--plan-tint); }
#sec-home .qg-opt-mem:hover:not(:disabled)  { background: var(--mem-tint); }
#sec-home .qg-opt-exe:hover:not(:disabled)  { background: var(--exe-tint); }

/* ---------- 16.7 ⑦ 拆解四问：tint 卡 + tint 序号 ---------- */
#sec-home .fq-enhanced .fq-item { border-width: 1.5px; padding: 13px 15px; }
#sec-home .fq-enhanced .fq-per  { border-color: var(--per-line);  background: var(--per-tint); }
#sec-home .fq-enhanced .fq-plan { border-color: var(--plan-line); background: var(--plan-tint); }
#sec-home .fq-enhanced .fq-mem  { border-color: var(--mem-line);  background: var(--mem-tint); }
#sec-home .fq-enhanced .fq-exe  { border-color: var(--exe-line);  background: var(--exe-tint); }
#sec-home .fq-per  .fq-num { background: var(--per-tint);  color: var(--per-ink);  border: 1px solid var(--per-line); }
#sec-home .fq-plan .fq-num { background: var(--plan-tint); color: var(--plan-ink); border: 1px solid var(--plan-line); }
#sec-home .fq-mem  .fq-num { background: var(--mem-tint);  color: var(--mem-ink);  border: 1px solid var(--mem-line); }
#sec-home .fq-exe  .fq-num { background: var(--exe-tint);  color: var(--exe-ink);  border: 1px solid var(--exe-line); }

/* ---------- 16.8 ⑫ 小测验：字母徽章 tint 化（正确/错误态仍由原规则接管） ---------- */
#sec-home .qz-opt-letter { background: var(--brain-tint); color: var(--brain-ink); }
#sec-home .qz-opt:hover:not(:disabled) .qz-opt-letter { background: var(--c-brain); color: #fff; }

/* ============================================================
 * §20 起源实验室 ⑬ 推荐系统桥接卡 —— 图标化三步 / 两坑 / 三招
 * 设计语言对齐 evx-card / pcx-card：图标徽章 + 短句卡片网格。
 * 配色收敛（仅两色）：紫 = 讲原理 / 给对策（origin 主色），
 *                     红 = 警示坑（全卡唯一红，起强调不花哨）。
 * 步骤区分靠「第 N 步」编号，不靠颜色。限定 #sec-origin。
 * ============================================================ */

/* --- 节标题：tint 徽章 + 文字 + 延伸线 --- */
#sec-origin .rs-sec {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 10px; font-size: 14.5px; font-weight: 800; color: var(--c-ori-deep);
}
#sec-origin .rs-sec:first-child { margin-top: 2px; }
#sec-origin .rs-sec-ico {
  width: 27px; height: 27px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ori-tint); color: var(--ori-ink); border: 1px solid var(--ori-line);
}
#sec-origin .rs-sec::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* --- 三步卡：图标徽章 + 步骤词 + 一句话 + tint 胶囊 --- */
#sec-origin .rs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#sec-origin .rs-step {
  --rs-c: linear-gradient(135deg, var(--c-ori), #A55BC4);
  --rs-tint: var(--ori-tint); --rs-ink: var(--ori-ink);
  --rs-line: var(--ori-line); --rs-glow: rgba(142, 68, 173, .22);
  background: linear-gradient(180deg, #fff 55%, var(--rs-tint));
  border: 1.5px solid var(--rs-line); border-radius: var(--r-md);
  padding: 14px 12px 12px; text-align: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
#sec-origin .rs-step:hover { transform: translateY(-2px); box-shadow: 0 8px 18px var(--rs-glow); }
#sec-origin .rs-ico {
  width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--rs-c); box-shadow: 0 4px 10px var(--rs-glow);
}
#sec-origin .rs-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--rs-ink); opacity: .75; }
#sec-origin .rs-name { font-size: 17px; font-weight: 800; color: var(--rs-ink); margin: 1px 0 6px; }
#sec-origin .rs-text { font-size: 12.8px; line-height: 1.55; color: var(--c-ink-2); min-height: 40px; }
#sec-origin .rs-tag {
  display: inline-block; margin-top: 8px; padding: 3px 11px;
  font-size: 11.5px; font-weight: 700; border-radius: var(--r-pill);
  background: #fff; color: var(--rs-ink); border: 1px solid var(--rs-line);
}

/* --- 两坑卡：白底图标块 + tint 面板（统一警示红） --- */
#sec-origin .rs-pits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#sec-origin .rs-pit {
  --rs-tint: var(--exe-tint); --rs-ink: var(--exe-ink); --rs-line: var(--exe-line);
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--rs-tint); border: 1.5px solid var(--rs-line);
  border-radius: var(--r-md); padding: 12px 14px;
}
#sec-origin .rs-pit-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--rs-ink); border: 1.5px solid var(--rs-line);
}
#sec-origin .rs-pit-title { font-size: 14.5px; font-weight: 800; color: var(--rs-ink); margin-bottom: 3px; }
#sec-origin .rs-pit-text { font-size: 12.8px; line-height: 1.6; color: var(--c-ink-2); }

/* --- 三招卡：紫 tint 横条（与三步同色系，形态区分：横条 vs 立卡） --- */
#sec-origin .rs-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#sec-origin .rs-tip {
  display: flex; align-items: center; gap: 9px;
  background: var(--ori-tint); border: 1.5px solid var(--ori-line);
  border-radius: var(--r-md); padding: 10px 12px;
  font-size: 12.8px; font-weight: 600; line-height: 1.5; color: var(--ori-ink);
}
#sec-origin .rs-tip .icon { flex-shrink: 0; }

@media (max-width: 860px) {
  #sec-origin .rs-steps, #sec-origin .rs-tips, #sec-origin .rs-pits { grid-template-columns: 1fr; }
  #sec-origin .rs-text { min-height: 0; }
}

/* ============================================================
 * §21 感知器实验室 ③ 语音 / ③b 图像 —— 原理图图文双栏
 * 复用 Transformer 模块的 .transformer-arch / .ta-duo / .tx-chip，
 * 仅微调：图列稍宽（自制 SVG 为 620 设计宽，显示面要更大）、
 *        图片宽度撑满、标题图标用感知蓝。限定 .per-arch。
 * ============================================================ */
.per-arch { border-color: var(--per-line); }
.per-arch .ta-title { display: flex; align-items: center; gap: 8px; }
.per-arch .ta-title .icon { color: var(--c-per); flex-shrink: 0; }
.per-arch .ta-desc { margin-bottom: 14px; line-height: 1.75; }
.per-arch .ta-duo { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
.per-arch .ta-image { width: 100%; max-height: none; }
@media (max-width: 900px) {
  .per-arch .ta-duo { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * 本节地图（七个板块开篇的「认知地图 + 页内导航」）
 * 依据 ai-agent-book 每章开篇的「本章知识脉络图」：先给地图、再讲细节。
 * 结构：标题行（图标 + 标题 + 一句话导读）→ 分组（组号 + 组名 + 可点节点）→ 底部提示。
 * 语义色跟随所属板块（data-color 与 labHead 同口径）。
 * 失败降级：纯 CSS 布局，脚本不参与渲染；即使 JS 失效也只是节点不能点，不会隐没。
 * ============================================================ */
.sec-map {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--sm-c, var(--c-per));
  border-radius: var(--r-md);
  padding: 16px 20px 12px;
  margin: 0 0 var(--sp-5);
  box-shadow: var(--shadow-1);
}
.sec-map-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sec-map-head .icon { flex-shrink: 0; color: var(--sm-c, var(--c-per)); }
/* 表头恒定写「本课学习地图」，与「本课学习目标」成一对；标题取语义色，与目标卡口径一致 */
.sec-map-head b { font-size: var(--fs-md); font-weight: 800; color: var(--sm-i, var(--c-ink)); flex-shrink: 0; }
.sec-map-body { display: flex; flex-direction: column; gap: 9px; }
/* 折叠区顶部：这张地图叫什么（lead-t）+ 规模小字（lead-m）。
 * 两句原先挂在表头上，折叠后只留一行干净的栏目名，它们就收进这里。 */
.sec-map-lead { display: flex; flex-direction: column; gap: 2px; }
.sec-map-lead-t { font-size: 13.5px; line-height: 1.65; font-weight: 700; color: var(--c-ink); }
.sec-map-lead-m { font-size: var(--fs-xs); line-height: 1.6; color: var(--c-dim); }
/* 分组：序号+组名独占一行，下面的格子按钮另起一行（纵向两段） */
.sec-map-group { display: flex; flex-direction: column; gap: 7px; }
/* 组标签行：序号球 + 组名 + 一条铺满剩余宽度的虚线（视觉上把下面的格子归到这一组） */
.sec-map-glabel {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-sub);
  min-width: 0;
}
.sec-map-glabel::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 12px;
  background: repeating-linear-gradient(to right, var(--c-line) 0 5px, transparent 5px 11px);
}
/* 序号球与「本课学习目标」卡的 .goal-num 同规格（24px 圆 / 语义色 tint 底 + ink 字 + line 描边） */
.sec-map-glabel i {
  font-style: normal; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: var(--sm-t, var(--per-tint));
  border: 1px solid var(--sm-l, var(--per-line));
  color: var(--sm-i, var(--per-ink));
}
/* 格子按钮行：轻微左缩进，读起来明确"属于上面这一组" */
.sec-map-items { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 3px; }
/* 节点与「本课学习目标」卡的 .goal-item 同规格：白底 + 中性描边 + 10px 圆角；
 * 字号也一并取值 15px，与「本课学习目标」正文（.brief-card[data-brief-kind="goal"] .goal-item）保持一致 */
.sec-map-node {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: inherit; font-size: 15px; line-height: 1.7; text-align: left;
  padding: 8px 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--c-line);
  color: var(--c-ink-2); cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.sec-map-node .sec-map-t { font-weight: 700; }
/* 节点里的灰色说明小字（.sec-map-note）已按需求整体去掉，样式随之移除 */
/* 不可点的节点：只作展示，视觉上明显"更轻"，避免学生反复点空 */
.sec-map-node.is-plain {
  cursor: default;
  background: transparent;
  border-style: dashed;
  border-color: var(--c-line);
  color: var(--c-dim);
}
.sec-map-node:not(.is-plain):hover {
  transform: translateY(-2px);
  background: var(--sm-t, var(--per-tint));
  border-color: var(--sm-l, var(--per-line));
  color: var(--sm-i, var(--per-ink));
}
.sec-map-foot {
  margin-top: 12px; padding-top: 9px; border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs); color: var(--c-dim);
}
.sec-map-foot .icon { vertical-align: -2px; margin-right: 4px; }

/* 语义色：七套色各自把 --sm-c/t/l/i 映射到本板块的语义色。
 * .lab-brief 是「本节地图 + 本课学习目标」并排后的外层容器——语义色提到它上面，
 * 两块就共用同一套色，标题与序号球自动一致。 */
.sec-map[data-color="per"],   .lab-brief[data-color="per"]   { --sm-c: var(--c-per);   --sm-t: var(--per-tint);   --sm-l: var(--per-line);   --sm-i: var(--per-ink); }
.sec-map[data-color="plan"],  .lab-brief[data-color="plan"]  { --sm-c: var(--c-plan);  --sm-t: var(--plan-tint);  --sm-l: var(--plan-line);  --sm-i: var(--plan-ink); }
.sec-map[data-color="mem"],   .lab-brief[data-color="mem"]   { --sm-c: var(--c-mem);   --sm-t: var(--mem-tint);   --sm-l: var(--mem-line);   --sm-i: var(--mem-ink); }
.sec-map[data-color="exe"],   .lab-brief[data-color="exe"]   { --sm-c: var(--c-exe);   --sm-t: var(--exe-tint);   --sm-l: var(--exe-line);   --sm-i: var(--exe-ink); }
.sec-map[data-color="brain"], .lab-brief[data-color="brain"] { --sm-c: var(--c-brain); --sm-t: var(--brain-tint); --sm-l: var(--brain-line); --sm-i: var(--brain-ink); }
.sec-map[data-color="ori"],   .lab-brief[data-color="ori"]   { --sm-c: var(--c-ori);   --sm-t: var(--ori-tint);   --sm-l: var(--ori-line);   --sm-i: var(--ori-ink); }
.sec-map[data-color="pg"],    .lab-brief[data-color="pg"]    { --sm-c: var(--c-pg);    --sm-t: var(--pg-tint);    --sm-l: var(--pg-line);    --sm-i: var(--pg-ink); }
.sec-map[data-color="works"], .lab-brief[data-color="works"] { --sm-c: var(--c-works); --sm-t: var(--works-tint); --sm-l: var(--works-line); --sm-i: var(--works-ink); }

/* ============================================================
 * 栏目导览组（本节地图 + 本课学习目标）
 * 各栏目开篇的两块并排成一行，各自可折叠、默认折叠。
 * 风格与「本课学习目标」卡完全一致：中性外框 + 语义色标题 + 语义色序号球；
 * 语义色由容器上的 data-color 统一派发，两块自动同色。
 * 失败降级：JS 未执行 / 结构不符时两块保持原来的纵向排布与样式，页面上看不出异常。
 * ============================================================ */
.lab-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin: 0 0 var(--sp-5);
}
/* 两张卡都展开时，用 grid 的 stretch 让它们在同行内自动等高（取较高的那张为准）；
 * 只要有任一张仍是折叠状态，就退回 start——折叠卡只占表头那一行，不会被撑出空白。 */
.lab-brief:not(:has(.brief-card.is-folded)) { align-items: stretch; }
.lab-brief .brief-card {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0;
  margin: 0;
  box-shadow: none;
  overflow: hidden;
}
/* 折叠表头：整行可点。
 * 表头只留「图标 + 栏目名 + 箭头」三件：两张卡的栏目名统一是「本课学习○○」四个字
 * （学习地图 / 学习目标），两栏并排各占半屏也放得下；原来的说明小字已移进折叠区。 */
.brief-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 20px;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.brief-head:hover { background: var(--c-elev); }
.brief-head:focus-visible { outline: 2px solid var(--sm-c, var(--c-per)); outline-offset: -2px; }
.brief-head .icon { flex: 0 0 auto; color: var(--sm-c, var(--c-per)); }
.brief-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--sm-i, var(--c-ink));
}
/* 箭头：纯 CSS 画，折叠时朝下、展开时朝上 */
.brief-chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: 2px;
  border-right: 2px solid var(--c-dim);
  border-bottom: 2px solid var(--c-dim);
  transform: rotate(45deg);
  transition: transform .22s var(--ease);
}
.brief-card:not(.is-folded) .brief-chev { transform: rotate(-135deg); }

/* 可折叠内容区 */
.brief-body { padding: 4px 20px 18px; border-top: 1px dashed var(--c-line); }
.brief-body[hidden] { display: none; }
.brief-card[data-brief-kind="map"] .sec-map-body { gap: 10px; }
.brief-card[data-brief-kind="map"] .sec-map-foot { margin-top: 14px; }
.brief-card .goal-list { margin-top: 12px; }
/* 「本课学习目标」正文与智能体实验室（该栏目 --fs-sm: 15px）口径一致。
 * 其他栏目的 --fs-sm 只有 13.5px，若沿用变量会与智能体实验室不一致，
 * 故在此写死 15px，保证七页的目标卡文字大小统一。 */
.brief-card[data-brief-kind="goal"] .goal-item { font-size: 15px; }

@media (max-width: 1068px) {
  .lab-brief { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}

@media (max-width: 734px) {
  .sec-map { padding: 14px 16px 11px; }
  .sec-map-glabel { width: 100%; }
}

/* ============================================================
 * 预测条（先猜 → 再跑 → 看是否猜中）
 * 依据 ai-agent-book 课件对每个演示的硬规则：「先说出预测，再说清什么样的
 * 观察会推翻它」——预测→验证是科学思维的基本动作，也让实验有悬念。
 * 视觉沿用全站的胶囊 + 反馈语言（与 .adv-chip / .fb-ok / .fb-no 同源）。
 * 三种终态：is-right（猜中）/ is-wrong（没猜中）/ is-skip（没下注）。
 * ============================================================ */
.predict-bar {
  margin: 0 0 14px;
  padding: 12px 15px 11px;
  border: 1.4px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-elev);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.predict-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.predict-head .icon { flex-shrink: 0; align-self: center; color: var(--sm-c, var(--c-per)); }
.predict-head b { font-size: var(--fs-sm); font-weight: 800; color: var(--c-ink); flex-shrink: 0; }
.predict-q { font-size: var(--fs-sm); color: var(--c-ink-2); flex: 1 1 240px; }
.predict-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.predict-opt {
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.55; text-align: left;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--c-card); border: 1.4px solid var(--c-line);
  color: var(--c-ink-2); cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.predict-opt:hover { transform: translateY(-1px); border-color: var(--c-line-strong); }
.predict-opt.on {
  border-color: var(--sm-c, var(--c-per));
  background: var(--sm-t, var(--per-tint));
  color: var(--sm-i, var(--per-ink));
  font-weight: 700;
}
.predict-fb {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs); line-height: 1.75; color: var(--c-sub);
}
.predict-fb .icon { vertical-align: -2px; margin-right: 4px; }
.predict-hint { color: var(--c-dim); }

/* 跑完之后的三种终态 */
.predict-bar.is-right { border-style: solid; border-color: var(--mem-line); background: var(--mem-tint); }
.predict-bar.is-right .predict-head .icon { color: var(--c-mem-deep); }
.predict-bar.is-right .predict-opt.on { border-color: var(--c-mem-deep); background: var(--c-card); color: var(--mem-ink); }
.predict-bar.is-wrong { border-style: solid; border-color: var(--exe-line); background: var(--exe-tint); }
.predict-bar.is-wrong .predict-head .icon { color: var(--c-exe-deep); }
.predict-bar.is-wrong .predict-opt.on { border-color: var(--c-exe-deep); background: var(--c-card); color: var(--exe-ink); }
.predict-bar.is-skip { border-style: solid; border-color: var(--c-line-strong); }
.predict-bar.is-done .predict-opt { cursor: default; }
.predict-bar.is-done .predict-opt:not(.on) { opacity: .5; }
.predict-bar.is-done .predict-opt:hover { transform: none; border-color: var(--c-line); }

.predict-bar[data-color="per"]   { --sm-c: var(--c-per);   --sm-t: var(--per-tint);   --sm-l: var(--per-line);   --sm-i: var(--per-ink); }
.predict-bar[data-color="plan"]  { --sm-c: var(--c-plan);  --sm-t: var(--plan-tint);  --sm-l: var(--plan-line);  --sm-i: var(--plan-ink); }
.predict-bar[data-color="mem"]   { --sm-c: var(--c-mem);   --sm-t: var(--mem-tint);   --sm-l: var(--mem-line);   --sm-i: var(--mem-ink); }
.predict-bar[data-color="exe"]   { --sm-c: var(--c-exe);   --sm-t: var(--exe-tint);   --sm-l: var(--exe-line);   --sm-i: var(--exe-ink); }
.predict-bar[data-color="brain"] { --sm-c: var(--c-brain); --sm-t: var(--brain-tint); --sm-l: var(--brain-line); --sm-i: var(--brain-ink); }
.predict-bar[data-color="ori"]   { --sm-c: var(--c-ori);   --sm-t: var(--ori-tint);   --sm-l: var(--ori-line);   --sm-i: var(--ori-ink); }
.predict-bar[data-color="pg"]    { --sm-c: var(--c-pg);    --sm-t: var(--pg-tint);    --sm-l: var(--pg-line);    --sm-i: var(--pg-ink); }
.predict-bar[data-color="works"] { --sm-c: var(--c-works); --sm-t: var(--works-tint); --sm-l: var(--works-line); --sm-i: var(--works-ink); }

@media (max-width: 734px) {
  .predict-bar { padding: 11px 13px 10px; }
  .predict-opt { width: 100%; }
}

/* ============================================================
 * §22 作品展示（第 8 个栏目）—— 作品集
 * 两个真实智能体作品：班级小助手 / 出行小管家。
 * 设计语言：沿用全站苹果风卡片系统；语义色取青绿（--c-works），与七个实验室区分。
 * 全部规则以 .works-* / #sec-works 限定，不影响其它栏目。
 * 失败降级：纯 CSS 布局；JS 失效时只是对话不可用，页面照常可读、不白屏。
 * ============================================================ */

/* ---------- 22.1 学习目标卡：作品展示语义色 ---------- */
.lesson-goal.card-works h3 { color: var(--works-ink); }
.lesson-goal.card-works .goal-num {
  background: var(--works-tint); color: var(--works-ink); border: 1px solid var(--works-line);
}
.btn-works { background: linear-gradient(135deg, var(--c-works), var(--c-works-deep)); }

/* ---------- 22.2 作品头横幅（作品集仪式感，非编号卡） ---------- */
.works-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 28px 0 18px; padding: 20px 24px;
  border-radius: var(--r-lg, 18px);
  background: linear-gradient(135deg, var(--works-tint) 0%, #fff 65%);
  border: 1.5px solid var(--works-line);
  box-shadow: var(--shadow-1, 0 2px 10px rgba(0,0,0,.05));
}
#sec-works .works-hero:first-of-type { margin-top: 8px; }
.works-hero-ico {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(140deg, var(--c-works), var(--c-works-deep));
  box-shadow: 0 8px 18px rgba(14, 159, 135, .26);
}
.works-hero-txt { min-width: 0; }
.works-hero-badge {
  display: inline-block; padding: 2px 10px; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  border-radius: var(--r-pill, 999px);
  background: #fff; color: var(--works-ink); border: 1px solid var(--works-line);
}
.works-hero-name { margin: 0; font-size: 24px; font-weight: 800; color: var(--c-ink); line-height: 1.25; }
.works-hero-tag { margin-top: 4px; font-size: 13.5px; color: var(--c-sub); }
.works-hero-tools { margin-left: auto; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.works-tools-label { font-size: 12px; font-weight: 700; color: var(--works-ink); display: inline-flex; align-items: center; gap: 5px; }
.works-tools-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.works-tool {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill, 999px);
  background: #fff; color: var(--works-ink); border: 1px solid var(--works-line);
}

/* ---------- 22.3 简介卡 ---------- */
.works-intro-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.85; color: var(--c-ink-2); }
.works-intro-for {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--r-md, 12px);
  background: var(--works-tint); border: 1px solid var(--works-line);
  font-size: 14px; line-height: 1.7; color: var(--works-ink);
}
.works-intro-for .wi-label { flex-shrink: 0; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.works-can { margin-top: 16px; }
.works-can-title { font-size: 14px; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.works-can-title .icon { color: var(--c-works); }
.works-can-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.works-can-list li {
  position: relative; padding: 9px 13px 9px 30px;
  background: var(--c-elev, #fafafa); border: 1px solid var(--c-line); border-radius: 10px;
  font-size: 13.5px; line-height: 1.6; color: var(--c-ink-2);
}
.works-can-list li::before {
  content: ""; position: absolute; left: 13px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-works); box-shadow: 0 0 0 3px var(--works-tint);
}

/* ---------- 22.4 制作过程：分步骤图解（六步一屏看全 + 可逐步点亮） ----------
 * 原来是横向滚动条（每张 196px，第 5 张永远被切一半，读起来像没做完）。
 * 改成网格：宽屏 3 列 × 2 行、中屏 2 列、窄屏 1 列——六步永远一屏看完。
 * 步骤之间的虚线箭头只画在「同一行内」的位置上，行尾不画（三套断点各写一条）。 */
.works-steps-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.works-steps-hint { flex: 1 1 240px; font-size: 12.5px; line-height: 1.6; color: var(--c-sub); display: inline-flex; align-items: flex-start; gap: 6px; }
.works-steps-hint .icon { flex-shrink: 0; margin-top: 3px; color: var(--c-works); }
.works-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px; row-gap: 28px;      /* 行距要留够：序号圆点是 -11px 上浮的 */
}
.works-step {
  position: relative;
  padding: 15px 14px 13px; border-radius: var(--r-md, 12px);
  background: #fff; border: 1.5px solid var(--c-line);
  transition: transform .18s var(--ease, ease), box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
/* 行内箭头（默认画），行尾那两格（第 3、6 格）不画 */
.works-step::after {
  content: ""; position: absolute; right: -16px; top: 46px; width: 12px; height: 2px;
  background: repeating-linear-gradient(to right, var(--works-line) 0 4px, transparent 4px 7px);
}
.works-step:nth-child(3n)::after { content: none; }
.works-step:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.07); }
.works-step.lit {
  border-color: var(--c-works);
  background: linear-gradient(180deg, #fff 30%, var(--works-tint));
  box-shadow: 0 10px 22px rgba(14, 159, 135, .16);
}
.ws-no {
  position: absolute; top: -11px; left: 14px;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: var(--works-tint); color: var(--works-ink); border: 1px solid var(--works-line);
  transition: background .18s ease, color .18s ease;
}
.works-step.lit .ws-no { background: var(--c-works); color: #fff; border-color: var(--c-works); }
.ws-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; margin: 6px 0 9px;
  background: var(--works-tint); color: var(--works-ink);
}
.ws-title { font-size: 15px; font-weight: 800; color: var(--c-ink); margin-bottom: 5px; }
.ws-text { font-size: 12.8px; line-height: 1.65; color: var(--c-sub); }

/* ---------- 22.5 原理拆解：四大组件 ---------- */
.works-prin { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.works-prin-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 15px; border-radius: var(--r-md, 12px);
  background: var(--c-elev, #fafafa); border: 1px solid var(--c-line);
  border-left-width: 4px; border-left-color: var(--wp-c, var(--c-works));
}
.works-prin-item[data-color="per"]  { --wp-c: var(--c-per);  --wp-t: var(--per-tint);  --wp-i: var(--per-ink); }
.works-prin-item[data-color="plan"] { --wp-c: var(--c-plan); --wp-t: var(--plan-tint); --wp-i: var(--plan-ink); }
.works-prin-item[data-color="mem"]  { --wp-c: var(--c-mem);  --wp-t: var(--mem-tint);  --wp-i: var(--mem-ink); }
.works-prin-item[data-color="exe"]  { --wp-c: var(--c-exe);  --wp-t: var(--exe-tint);  --wp-i: var(--exe-ink); }
.wp-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wp-t, var(--works-tint)); color: var(--wp-i, var(--works-ink));
}
.wp-comp { font-size: 14.5px; font-weight: 800; color: var(--wp-i, var(--c-ink)); margin-bottom: 3px; }
.wp-text { font-size: 13px; line-height: 1.65; color: var(--c-ink-2); }
.works-prin-note {
  margin-top: 16px; padding: 12px 15px; border-radius: var(--r-md, 12px);
  background: var(--works-tint); border: 1px dashed var(--works-line);
  font-size: 13px; line-height: 1.75; color: var(--works-ink);
  display: flex; align-items: flex-start; gap: 7px;
}
.works-prin-note .icon { flex-shrink: 0; margin-top: 3px; }

/* ---------- 22.6 岗位说明书（真实系统提示词） ----------
 * 先说清「这份提示词由哪几段组成」，再让学生按需展开看原文——
 * 一上来就摊一大段文字，学生只会跳过。 */
.works-prompt-lead {
  margin: 0 0 14px; padding: 12px 15px; border-radius: var(--r-md, 12px);
  background: var(--works-tint); border: 1px dashed var(--works-line);
  font-size: 13.5px; line-height: 1.8; color: var(--works-ink);
}
.works-prompt-lead .icon { vertical-align: -3px; margin-right: 4px; }
.works-prompt-segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 10px; }
.wps-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md, 12px);
  background: var(--c-elev, #fafafa); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-works);
}
/* 本作品不带的那一段（例如出行小管家没有班级知识库）：整格压暗，说明"为什么没有" */
.wps-item.is-off { border-left-color: var(--c-line); background: #fff; }
.wps-item.is-off .wps-k { background: #fff; color: var(--c-dim); border-color: var(--c-line); }
.wps-item.is-off .wps-t { color: var(--c-sub); }
.wps-k {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--works-tint); color: var(--works-ink); border: 1px solid var(--works-line);
}
.wps-body { min-width: 0; }
.wps-t { font-size: 13.8px; font-weight: 800; color: var(--c-ink); margin-bottom: 3px; }
.wps-d { font-size: 12.6px; line-height: 1.7; color: var(--c-ink-2); word-break: break-word; }
.works-prompt-box {
  margin-top: 14px; border: 1px solid var(--c-line); border-radius: var(--r-md, 12px);
  background: #fff; overflow: hidden;
}
.works-prompt-box > summary {
  cursor: pointer; padding: 12px 15px; list-style: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--works-ink);
  background: var(--c-elev, #fafafa);
}
.works-prompt-box > summary::-webkit-details-marker { display: none; }
.works-prompt-box > summary::after { content: "▾"; margin-left: auto; color: var(--c-dim); transition: transform .18s ease; }
.works-prompt-box[open] > summary { border-bottom: 1px solid var(--c-line); }
.works-prompt-box[open] > summary::after { transform: rotate(180deg); }
.works-prompt-pre {
  margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 12.2px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
  color: var(--c-ink-2); background: #fff;
}
.works-prompt-foot {
  padding: 11px 15px; border-top: 1px dashed var(--c-line);
  font-size: 12.4px; line-height: 1.7; color: var(--c-sub); background: var(--c-elev, #fafafa);
}
.works-prompt-foot .icon { vertical-align: -2px; margin-right: 3px; }

/* ---------- 22.7 可交互演示区 ---------- */
/* 两列等宽 + 等高（stretch）：左边对话，右边「内部工作台」。
 * 等宽的理由：右栏才是这一节的主角（总装图 + 状态 + 本轮轨迹），
 * 左栏只负责"提一句问"——它不需要更宽，也不该宽出一片空白。 */
.works-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.works-chat {
  display: flex; flex-direction: column;
  height: clamp(560px, 72vh, 700px);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md, 14px);
  overflow: hidden; box-shadow: var(--shadow-1, 0 2px 10px rgba(0,0,0,.05));
}
.works-chat .chat-head { padding: 14px 16px; flex: 0 0 auto; }
.works-chat .chat-msgs { padding: 16px; flex: 1 1 auto; min-height: 200px; background: #fbfdfc; }
.works-chat .chat-input { padding: 10px 12px; flex: 0 0 auto; }
.works-chat-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.works-chat-id b { font-size: 15px; font-weight: 800; }
.works-chat-id span { font-size: 11.5px; opacity: .82; }
/* 演示区内的语义色改为作品青绿（覆盖全局的紫） */
#sec-works .works-chat .chat-head { background: linear-gradient(135deg, var(--c-works), var(--c-works-deep)); }
#sec-works .works-chat .msg.user { background: linear-gradient(135deg, var(--c-works), var(--c-works-deep)); }
#sec-works .works-chat .chat-input input:focus { border-color: var(--c-works); box-shadow: 0 0 0 3px var(--works-tint); }
#sec-works .works-chat .chat-msgs .msg { font-size: 15px; line-height: 1.72; }
#sec-works .works-chat .chat-msgs .msg .who { font-size: 12.5px; }
/* 示例问题：单行横向滚动 —— 把纵向空间全留给对话本身 */
.works-chat .chip-row {
  flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  padding: 10px 16px 2px; gap: 8px; scrollbar-width: thin;
}
.works-chat .chip-row::-webkit-scrollbar { height: 6px; }
.works-chat .chip-row::-webkit-scrollbar-thumb { background: var(--works-line); border-radius: 999px; }
.works-chat .chip-suggest { font-size: 12.5px; padding: 7px 13px; white-space: nowrap; flex: 0 0 auto; }
.works-chat .chip-suggest:hover { border-color: var(--c-works); background: var(--works-tint); color: var(--works-ink); }
.works-chat .msg.tool-note {
  align-self: flex-start; max-width: 92%;
  background: var(--works-tint); border: 1px dashed var(--works-line);
  color: var(--works-ink); font-size: 12.5px; padding: 7px 12px; border-radius: 10px;
}
.works-chat .msg.tool-note .icon { vertical-align: -2px; margin-right: 4px; }
.works-keyhint {
  margin: 10px 16px 0; padding: 10px 13px; border-radius: 10px; flex: 0 0 auto;
  background: var(--plan-tint); border: 1px solid var(--plan-line);
  color: var(--plan-ink); font-size: 12.5px; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 7px;
}
.works-keyhint .icon { flex-shrink: 0; margin-top: 2px; }
.works-keyhint .wk-txt { flex: 1 1 auto; min-width: 0; }

/* ---- 右栏：它的内部工作台 ----
 * 与「智能体实验室 · 智能体内部工作台」同一套语言（学生两页看到的是同一张图）：
 *   ① 状态牌 + 图例 ② 放射状总装图（大脑居中、四组件环绕）
 *   ③ 统计胶囊（轮次 / 工具 / 用时）④ 本轮轨迹（按轮次分组）⑤ 原理注解。
 * 总装图直接复用 .pg-hub 系列（样式定义在智能体实验室那一节），这里只调尺寸与字号。 */
.works-live {
  display: flex; flex-direction: column; min-height: 0;
  /* 与左侧对话区同高（同一套 clamp），两栏齐平才不显得"一高一矮" */
  height: clamp(560px, 72vh, 700px);
  padding: 14px 16px; border-radius: var(--r-md, 14px);
  background: linear-gradient(180deg, #fbfdfc, var(--c-elev, #fafafa));
  border: 1px solid var(--c-line);
  overflow-y: auto; scrollbar-width: thin;      /* 工作台内容比对话长：整栏可滚 */
}
.works-live::-webkit-scrollbar { width: 6px; }
.works-live::-webkit-scrollbar-thumb { background: var(--works-line); border-radius: 999px; }
.works-live-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.works-live-title { font-size: 14.5px; font-weight: 800; color: var(--c-ink); display: flex; align-items: center; gap: 6px; }
.works-live-title .icon { color: var(--c-works); }
.works-live-title .wl-sub {
  font-size: 11.5px; font-weight: 600; color: var(--c-sub);
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 2px 8px;
}
.works-live-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-meta {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: #fff; border: 1px solid var(--c-line); font-size: 11.5px;
}
.wl-meta i { font-style: normal; color: var(--c-sub); }
.wl-meta b { font-weight: 800; color: var(--works-ink); font-variant-numeric: tabular-nums; }

/* 总装图：比智能体实验室那版小一号——等宽后右栏只有四百来像素，84px 的节点会顶到边。
 * --side 也从 10% 收到 4%：①②两枚步骤标签是撑在两节点中间的空隙里的，
 * 侧边内缩越多、这段空隙越窄，标签就会挤成竖排。 */
#sec-works .pg-hub { --nw: 70px; --nh: 70px; --gapv: 26px; --side: 4%; margin: 8px 0 2px; }
#sec-works .pg-hub-node svg { width: 19px; height: 19px; }
#sec-works .pg-hub-node.n-brain svg { width: 21px; height: 21px; }
#sec-works .pg-hub-ico { width: 32px; height: 32px; border-radius: 10px; }
#sec-works .pg-hub-node .pg-hub-name { font-size: 9.5px; }
#sec-works .pg-hub-tag { font-size: 9px; line-height: 1.2; }

/* 轨迹行：字号跟着本页走（工作台那一节的字号是给 #sec-playground 单独调过的） */
#sec-works .pipe-log-head { margin-top: 12px; padding-top: 10px; }
#sec-works .pg-log-row { padding: 7px 9px; }
#sec-works .pg-log-body { font-size: 12.5px; line-height: 1.6; }
#sec-works .pg-log-ms { font-size: 11.5px; white-space: nowrap; }
/* 「工具调用 / 收尾 / 出错」三类专用行色（四组件的 .c-* 是全站通用的，这两个只在本页用） */
#sec-works .pg-log-row.c-stop { --node: var(--c-works); --node-ink: var(--works-ink); }
#sec-works .pg-log-row.c-err  { --node: #E2574C;      --node-ink: #8A2B22; }

.works-note {
  flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--c-line);
  font-size: 12.6px; line-height: 1.7; color: var(--c-sub);
}
.works-note b { color: var(--works-ink); }

/* ---------- 22.8 收尾对比小结 ---------- */
#sec-works .summary-core { border-left-color: var(--c-works); }
/* 对比表：整块包圆角边框；窄屏横向滚动时首列吸住（sticky），
 * 否则左右滑动后"比一比"那一列会跑出屏外，学生不知道每行在比什么。 */
.works-cmp-wrap {
  overflow-x: auto; margin-bottom: 16px;
  border: 1px solid var(--c-line); border-radius: var(--r-md, 12px);
}
.works-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 560px; }
.works-cmp th, .works-cmp td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; line-height: 1.65; }
.works-cmp thead th { font-size: 13.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c-works), var(--c-works-deep)); border-bottom: 0; }
.works-cmp tbody th {
  position: sticky; left: 0; z-index: 1;
  font-weight: 800; color: var(--c-ink); background: var(--c-elev, #fafafa); white-space: nowrap;
}
.works-cmp tbody tr:nth-child(even) td { background: #fcfdfd; }
.works-cmp tbody tr:hover td { background: var(--works-tint); }
.works-cmp tbody tr:last-child th, .works-cmp tbody tr:last-child td { border-bottom: 0; }
.works-cmp td { color: var(--c-ink-2); }
.works-formula {
  margin-top: 4px; padding: 16px 18px; border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--works-tint), #fff 78%);
  border: 1.5px solid var(--works-line);
}
.works-formula-title { font-size: 14.5px; font-weight: 800; color: var(--works-ink); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.works-formula-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wf-step {
  padding: 6px 13px; border-radius: var(--r-pill, 999px);
  background: #fff; border: 1px solid var(--works-line);
  font-size: 13px; font-weight: 700; color: var(--works-ink);
}
.wf-arrow { color: var(--c-works); font-style: normal; font-weight: 800; }
.works-formula-note { margin-top: 12px; font-size: 12.8px; line-height: 1.7; color: var(--c-sub); }

/* ---------- 22.9 响应式 ---------- */
@media (max-width: 900px) {
  .works-demo { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .works-live { height: auto; overflow: visible; }
  .works-hero-tools { margin-left: 0; align-items: flex-start; width: 100%; }
  .works-tools-row { justify-content: flex-start; }
  /* 六步改两列：行尾变成第 2、4、6 格，箭头跟着重算 */
  .works-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-step:nth-child(3n)::after {
    content: ""; position: absolute; right: -16px; top: 46px; width: 12px; height: 2px;
    background: repeating-linear-gradient(to right, var(--works-line) 0 4px, transparent 4px 7px);
  }
  .works-step:nth-child(2n)::after { content: none; }
}
@media (max-width: 640px) {
  .works-hero { padding: 16px 18px; gap: 14px; }
  .works-hero-name { font-size: 20px; }
  /* 六步改单列：一列里不需要横向箭头 */
  .works-steps { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .works-step:nth-child(2n)::after, .works-step:nth-child(2n+1)::after { content: none; }
  .works-cmp { min-width: 480px; }
  .works-chat { height: clamp(500px, 80vh, 600px); }
  #sec-works .pg-hub { --nw: 66px; --nh: 66px; --gapv: 24px; }
  #sec-works .pg-hub-node .pg-hub-name { font-size: 9px; }
}

/* ---------- 22.10 减少动态效果：关掉动画，元素保持可见 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-hub-edge.is-on { animation: none; }
  .works-step, .works-step:hover { transform: none; }
}