/* 方案 A 的开放展廊布局；品牌标题用龙藏体，其他界面保留 Noto 系列。
 * 不使用生成效果图作为古文字素材，保留六张真实馆藏背景与原图浓度。
 */
/* 子集字体，理由同 src/workbench.css 顶部那两条。原件 LongCang-Regular.ttf
   也原封不动留在 assets/fonts/。 */
@font-face {
  font-family:"ZQ Long Cang"; src:url("../assets/fonts/LongCang-Subset.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
:root {
  --font-title:"ZQ Long Cang","ZQ Display","Songti SC",serif;
  --font-reading:"ZQ Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --font-brand:"ZQ Display","Noto Serif SC","Songti SC",serif;
  --text:#202d28; --text-muted:#40534a; --text-faint:#52645a;
  --glyph-ink:#253a30; --gallery-line:rgba(44,70,55,.24);
}
body { font-synthesis:none; }
/* 连续的全屏光场，不给说明区加矩形底板；字纹主要留在两侧。 */
body:has(.is-workbench)::after {
  background:linear-gradient(180deg,rgba(248,249,246,.55),transparent 22%,transparent 76%,rgba(248,249,246,.55)),
    linear-gradient(90deg,rgba(248,249,246,.52),rgba(248,249,246,.90) 19%,rgba(248,249,246,.92) 68%,rgba(248,249,246,.75) 87%,rgba(248,249,246,.48));
}
.zc-brand { border:0; padding-left:0; gap:5px; }
.zc-title { font:400 clamp(42px,3.6vw,52px)/1.2 var(--font-title); letter-spacing:.02em; gap:0; color:#21382e; }
.zc-title span { font-weight:400; }
.zc-brand-caption { font:400 10px/1.5 "ZQ Sans",sans-serif; color:#52665a; letter-spacing:.15em; }
.zc-subtitle { color:#40584a; font:400 14px/1.6 var(--font-reading); letter-spacing:.04em; }
.zc-modbar { border-color:var(--gallery-line); }
.zc-modtabs button { font:400 17px/1.5 var(--font-reading); color:#374c40; padding:8px 12px; border:0; border-bottom:2px solid transparent; border-radius:0; gap:6px; }
.zc-modtabs button.is-active { background:transparent; color:#224d37; border:0; border-bottom:2px solid #315d43; box-shadow:none; }
.zc-module-number { font:400 12px/1.5 "ZQ Sans",sans-serif; opacity:1; color:inherit; }
.zc-module-indicator { color:#52665a; }
.zc-help-trigger { background:transparent; border-color:var(--gallery-line); font:400 14px/1.5 var(--font-reading); color:#395442; }
.is-workbench .zc-btn,.is-workbench .zc-seg button { font-family:var(--font-reading); font-weight:400; font-size:16px; line-height:1.4; letter-spacing:0; }
.is-workbench .zc-btn { min-height:36px; padding:6px 12px; border-radius:5px; background:rgba(255,255,255,.14); color:#294b38; border-color:rgba(43,75,52,.36); }
.is-workbench .zc-btn.is-primary { color:#fffef7; background:#2b503b; border-color:#2b503b; }
.is-workbench .zc-btn.is-primary:hover:not(:disabled) { color:#fffef7; background:#1d3b2a; }
.is-workbench .zc-btn[aria-pressed="true"]:not(.is-primary) { background:#e0eadd; border-color:#4a7053; }
.is-workbench .zc-controls { gap:7px; }
.is-workbench .zc-seg:not(.zc-modtabs) { background:transparent; border-radius:0; gap:6px; border-bottom:1px solid var(--gallery-line); }
.is-workbench .zc-seg:not(.zc-modtabs) button { color:#3f5848; border-radius:0; border-bottom:2px solid transparent; background:transparent; padding:7px 9px; box-shadow:none; }
.is-workbench .zc-seg:not(.zc-modtabs) button.is-active { color:#214a32; border-bottom-color:#416c4b; background:transparent; }
.is-workbench .zc-panel,.is-workbench .zc-character-detail,.is-workbench .zc-edit-controls,
.is-workbench .zc-compose-palette,.is-workbench .zc-mine-intro,.is-workbench .zc-evo-tools {
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.is-workbench .zc-panel { padding:14px 0; border-top:1px solid var(--gallery-line); }
.is-workbench .zc-panel-title { font:400 16px/1.6 var(--font-reading); color:#345642; letter-spacing:.03em; }
.is-workbench .zc-canvas-wrap { background:rgba(255,255,255,.22); border:1px solid rgba(63,89,68,.22); border-radius:0; box-shadow:none; }
.zc-gallery-heading { margin-bottom:16px; }
/* 模块眉标（`02 / EVOLUTION` 这一行）的字只有这一段。01/03/04/06 把它写在
   .zc-gallery-heading 里，02/05 的标题各有各的排法（02 上置、05 与标题同行，
   见 evolution-exhibit.css 与下面 05 那条），所以直接挂 .zc-gallery-kicker。
   两处**共用同一段声明**是故意的：写成两条就会各改各的，字号字距悄悄分叉。 */
.zc-gallery-kicker,.zc-gallery-heading > span { padding-bottom:8px; border-bottom:1px solid var(--gallery-line); color:#375e48; font:400 11px/1.5 "ZQ Sans",sans-serif; letter-spacing:.13em; }
.zc-gallery-heading > span { display:block; margin-bottom:9px; }
.zc-gallery-heading h2 { margin:0; font:400 clamp(28px,2.7vw,40px)/1.3 var(--font-brand); letter-spacing:.025em; color:#243c2e; }
.is-workbench .zc-note,.is-workbench .zc-character-detail > p,.is-workbench .zc-stageinfo-note,
.is-workbench .zc-origin-note,.is-workbench .zc-lab-hint,.is-workbench .zc-compose-hint,
.is-workbench .zc-quiz-guide,.is-workbench .zc-quiz-explain,.is-workbench .zc-review-explain {
  font:400 16px/1.8 var(--font-reading); color:#344e40;
}
.is-workbench .zc-detail-facts { padding:12px 0; margin:12px 0; border-top:1px solid var(--gallery-line); border-bottom:1px solid var(--gallery-line); gap:6px 16px; }
.is-workbench .zc-detail-facts span { background:none; padding:0; color:#405947; font:400 15px/1.7 var(--font-reading); }
.is-workbench .zc-detail-title strong { font-family:var(--font-brand); font-weight:400; color:#283f30; }
.is-workbench .zc-detail-title p { color:#496750; font-size:20px; }
.is-workbench .zc-detail-title h2 { font:400 23px/1.5 var(--font-reading); color:#233c2d; }
.is-workbench .zc-stageinfo-period,.is-workbench .zc-stageinfo-src,.is-workbench .zc-origin-cap,.is-workbench .zc-origin-credit { color:#4d6155; font:400 14px/1.8 var(--font-reading); }
.is-workbench .zc-stageinfo-name { font:400 30px/1.4 var(--font-brand); }
.is-workbench .zc-text-btn,.is-workbench .zc-picker-more summary,.is-workbench .zc-edit-controls label,.is-workbench .zc-mine-form label,.is-workbench .zc-mine-summary { font:400 16px/1.6 var(--font-reading); color:#365240; }
.is-workbench .zc-picker { padding:12px 0; }
.is-workbench .zc-picker-label { font:400 16px/1.5 var(--font-reading); }
.is-workbench .zc-search-input,.is-workbench .zc-picker-select,.is-workbench .zc-mine-form input { font:400 16px/1.5 var(--font-reading); background:rgba(255,255,255,.45); color:#273e30; border-color:var(--gallery-line); }
.is-workbench .zc-evidence-entry { padding:12px 0; margin:0; border-bottom:1px solid var(--gallery-line); }
.is-workbench .zc-compinfo { background:transparent; border:0; border-top:1px solid var(--gallery-line); padding:12px 0; }
.is-workbench .zc-compose-palette { padding:8px 0; }
.is-workbench .zc-compbtn { background:transparent; border-color:var(--gallery-line); }
.is-workbench .zc-quiz-card { background:transparent; border:0; border-top:1px solid var(--gallery-line); box-shadow:none; padding:20px 0; }
.is-workbench .zc-quiz-modes p { color:#34503e; font:400 16px/1.8 var(--font-reading); }
.is-workbench .zc-quiz-modes > small,.is-workbench .zc-quiz-hints > small { color:#4e6253; font-size:13px; }
.is-workbench .zc-quiz-ask { font:400 23px/1.5 var(--font-brand); color:#253c2d; }
.is-workbench .zc-quiz-opt-text { font:400 16px/1.7 var(--font-reading); }
.is-workbench .zc-quiz-guide { background:transparent; padding:8px 0; border:0; }
.is-workbench .zc-quiz-hints > p { font-size:16px; }
.is-workbench .zc-statusbar { background:transparent; border:0; border-top:1px solid var(--gallery-line); border-radius:0; box-shadow:none; }
.is-workbench .zc-status-story p,.is-workbench .zc-status-metrics { font:400 14px/1.5 var(--font-reading); color:#36503e; }
.is-workbench .zc-status-eyebrow { color:#4e6253; }
.is-workbench .zc-statusbar > .zc-btn { font-size:14px; }
.zc-evo-playback { display:grid; gap:5px; padding-top:10px; }
.zc-page-evo .zc-evo-playback .zc-timeline { width:100%; height:18px; margin:0; }
.zc-page-evo .zc-evo-playback .zc-evostrip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; margin:0; }
.zc-page-evo .zc-evo-playback .zc-evostage { padding:2px 0; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; }
/* 跳转仍由真实资料阶段驱动，缩略图藏起而非伪造缺失的隶书。 */
.zc-page-evo .zc-evo-playback .zc-evostage svg { display:none; }
.zc-page-evo .zc-evo-playback .zc-evostage-name { display:block; font:400 14px/1.5 var(--font-reading); color:#3c5845; }
.zc-page-evo .zc-evo-playback .zc-evostage.is-active { border-bottom-color:#315e42; }
.zc-page-evo .zc-evo-playback .zc-evostage.is-next { border-bottom:2px dashed #986d4b; }
.zc-page-evo .zc-evo-playback .zc-evostage.is-absent { opacity:1; }
.zc-page-evo .zc-evo-playback .zc-evostage.is-absent .zc-evostage-name { color:#5c6a4e; }
.zc-page-evo .zc-evo-playback .zc-controls { flex-wrap:wrap; margin:0; gap:5px; }
.zc-page-evo .zc-evo-playback .zc-btn { font-size:14px; padding:5px 8px; min-height:32px; }
/* 02 的轴外资料横跨两栏，长说明不再撑高右侧、留空左下方。 */
.zc-page-evo .zc-evo-layout { height:auto; min-height:0; row-gap:24px; }
.zc-page-evo .zc-evo-context {
  grid-column:1 / -1; display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:16px 32px; margin:0; padding:20px 0 0;
  border-top:1px solid var(--gallery-line); align-items:start;
}
.zc-page-evo .zc-evo-context h3 { margin:0; font:400 22px/1.4 var(--font-brand); color:#243c2e; }
.zc-page-evo .zc-evo-context .zc-stageinfo-note { margin:8px 0 0; }
.zc-page-evo .zc-evo-context .zc-note { margin:0; }
.zc-page-evo .zc-evo-context .zc-li-chars { gap:8px; margin-top:12px; }
.zc-page-evo .zc-evo-context .zc-li-chip { min-width:36px; min-height:36px; padding:6px 8px; color:#345642; }
.zc-page-evo .zc-evo-context .zc-li-chip:hover,
.zc-page-evo .zc-evo-context .zc-li-chip.is-active { color:#214a32; border-color:#416c4b; background:#e0eadd; }
.zc-page-evo .zc-evo-context .zc-li-chip:focus-visible { outline-color:#416c4b; }
.is-reading-large .zc-note,.is-reading-large .zc-panel p,.is-reading-large .zc-character-detail > p,.is-reading-large .zc-stageinfo-note { font-size:18px; }
.is-reading-large .zc-btn,.is-reading-large .zc-seg button { font-size:17px; }
/* 左侧展台自成一列，画布下方的内容不再等待右侧长展签的行高。 */
.zc-origin-exhibit { min-width:0; }
.zc-origin-exhibit > .zc-stage { display:block; min-height:0; }
.zc-origin-exhibit .zc-writing-tools { margin-top:14px; }
.zc-exhibit-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding:13px 0; border-bottom:1px solid var(--gallery-line); color:#48624e; font:400 14px/1.6 var(--font-reading); }
.zc-origin-exhibit .zc-origin-picker { margin:0; padding:14px 0 0; border:0; }
.zc-lab-exhibit { min-width:0; }
.zc-lab-exhibit > .zc-lab-hint { margin:0; padding:0; }
.zc-lab-exhibit .zc-lab-hint > p { margin:12px 0; }
.zc-lab-exhibit .zc-lab-create-link { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; border-top:1px solid var(--gallery-line); padding:12px 0; }
.zc-lab-exhibit .zc-lab-create-link > span { font:400 14px/1.6 var(--font-reading); color:#4e6654; }
.zc-lab-exhibit .zc-lab-create-link small { grid-column:1/-1; font:400 13px/1.6 var(--font-reading); color:#526956; }

/* 03 右栏的包装层：桌面上它是 .zc-lab 网格的第 2 列，标题与 aside 同属这一列
   （落位见下面那个 ≥1050×600 的媒体块）。窄屏 .zc-stage 收成一列时要整层拆掉 ——
   不拆的话「构形实验室 / ① 认识构形 / ② 目标拼合」会跟着 aside 一起掉到画布下面，
   模块标题埋在页面中部。拆成 display:contents 之后标题用 order 拎回最前面，
   画布与展签仍是紧接其后的第二块。 */
.zc-lab-side { min-width:0; }
@media(max-width:780px) {
  .zc-page-lab .zc-lab > .zc-stage > .zc-lab-side { display:contents; }
  .zc-page-lab .zc-lab-tabs { order:-1; }
}

@media(min-width:1050px) and (min-height:600px) {
  body:has(.is-workbench) .zc-title { font-size:48px; }
  .is-workbench .zc-modtabs button { font-size:17px; padding:8px 12px; }
  .zc-page-origin .zc-origin-view { grid-template-rows:auto auto; gap:16px 32px; align-content:start; }
  .zc-page-origin .zc-origin-exhibit { grid-column:1; grid-row:1/3; }
  .zc-page-origin .zc-origin-exhibit > .zc-stage { display:block; min-height:0; }
  .zc-page-origin .zc-origin-exhibit .zc-origin-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
  .zc-page-origin .zc-origin-exhibit .zc-picker-more { margin-bottom:10px; font-size:14px; white-space:nowrap; }
  .zc-page-origin .zc-origin-exhibit .zc-writing-tools { grid-column:auto; grid-row:auto; }
  .zc-page-origin .zc-character-detail { padding:0; }
  /* 03：左栏是画布与展签，右栏是**一条竖列** —— 标题、玩法页签、操作面板依次
     往下排，两列都从同一个顶端开始。整块只有一行，没有任何跨行项。
     这一行是必须的：以前页签与右栏面板各占一行、展台跨这两行，跨行项的高度
     按网格规范只能**平分**给两条自动轨道（auto/1fr、max-content、min-content
     三种写法实测逐位相同，硬调轨道治不了），展台 656px 于是把页签那行从
     138px 撑到 240.7px —— 页签下面白出 119px 空洞。画布顶到 560px 上限时
     更糟：另一条只把画布与展签拆成两个网格项、仍让画布跨两行的写法，在
     1174×1244 下实测还剩 63px。
     所以页签由 lab-shell 从 #side-head 整块并进右栏，展台只占一行 ——
     洞在任何窗口尺寸下都出不来（verify/test-lab-shell.mjs ⑦ 量真几何）。

     右栏这一列是 .zc-lab-side（title + aside 一层包装），不是 aside 本身：
     窄屏 .zc-stage 收成一列时，没有这层就没办法把标题拎回画布前面，
     它只能跟着 aside 沉到页面中部。包装层的窄屏写法见本文件上面那段
     `@media(max-width:780px)`。
     workbench.css 里 .zc-lab-hint 与 .zc-canvas-wrap 的 grid-row 原本是照
     「展台不再多包一层」写的，包上之后那两条一直匹配不到，已删。 */
  .zc-page-lab .zc-lab { grid-template-rows:auto; gap:16px 32px; align-content:start; }
  .zc-page-lab .zc-lab-exhibit { grid-column:1; }
  .zc-page-lab .zc-lab > .zc-stage > .zc-lab-side { grid-column:2; min-width:0; }
  .zc-page-lab .zc-lab-hint { font-size:16px; }
  .zc-page-lab .zc-lab-create-link { gap:8px; padding:12px 0; }
  /* 01 / 02 / 03 使用同一个尺寸预算，包含 02 下方播放工具的空间。 */
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab) { --canvas-edge:min(560px,calc(100dvh - 365px),calc(100vw - 505px)); }
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab) .zc-canvas-wrap { width:var(--canvas-edge); height:var(--canvas-edge); }
  /* 01 / 02 / 03 / 04 / 06 回到正常页面流，不用 fixed / sticky 吸附。
     02 在桌面媒体查询里原本是 position:fixed（把整块演示钉在屏幕上）；
     2026-09 改为随文档滚动，理由是画布与底部栏在投影/矮视口下会被
     fixed 截断或挡在正文上方，改成流式更稳。 */
  /* 06 不在下面 canvas-wrap 这一条里：它的 .zc-canvas-wrap 要 relative
     （空态那句话得压在图上），而这里的选择器和 workbench.css 里那条特异性打平
     （都是 0,3,0），本文件在后就会把 relative 覆盖成 static，空态于是跑到画布外面去。 */
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab,.zc-page-quiz) .zc-canvas-wrap {
    position:static; inset:auto; transform:none; z-index:auto; align-self:start;
  }
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab,.zc-page-quiz,.zc-page-graph,.zc-page-stats) .zc-journey-next {
    position:static; inset:auto; transform:none; width:auto; margin:24px 0 0;
  }
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab,.zc-page-quiz,.zc-page-graph,.zc-page-stats) .zc-module-content { min-height:0; padding-bottom:0; }
  .zc-page-origin .zc-origin-view,.zc-page-lab .zc-lab { min-height:var(--canvas-edge); }
  .zc-page-quiz .zc-quiz { min-height:0; }
  body:has(.zc-page-origin,.zc-page-evo,.zc-page-lab,.zc-page-quiz,.zc-page-graph,.zc-page-stats) .zc-footer {
    position:static; inset:auto; margin:18px 0 0; padding:0;
  }
  .zc-page-evo .zc-evo-main {
    position:static; inset:auto; transform:none; width:auto; height:auto; z-index:auto;
    display:grid; grid-template-rows:var(--canvas-edge) auto; align-content:start;
  }
  .zc-page-evo .zc-evo-main .zc-canvas-wrap { position:static; width:100%; height:var(--canvas-edge); }
  .zc-page-evo .zc-evo-tools { grid-column:2; }
  .zc-page-evo .zc-evo-layout { --canvas-edge:min(500px,calc(100dvh - 365px),calc(100vw - 505px)); }
  .zc-page-evo .zc-evo-compare { position:static; width:100%; height:var(--canvas-edge); }
  .zc-page-evo .zc-evo-compare-cell { background:transparent; border-radius:0; padding:10px; }
  .zc-page-evo .zc-evo-compare-cell .zc-note { font-size:14px; }
  .zc-page-evo .zc-evo-tools > .zc-panel { margin-top:18px; }
  .zc-page-evo .zc-evo-tools .zc-note { color:#344e40; }
  .zc-page-quiz .zc-quiz { grid-template-rows:auto auto auto 4px auto; }
  .zc-page-quiz .zc-gallery-heading { margin-bottom:0; }
  .zc-page-quiz .zc-quiz-feedback p { font-size:16px; line-height:1.8; }
  .zc-page-mine .zc-mine-intro { padding:0 0 12px; border-bottom:1px solid var(--gallery-line); }
  .zc-page-mine .zc-mine-intro h2 { font:400 30px/1.4 var(--font-brand); }
  /* 05 的标题行在桌面上是固定 50px（workbench.css 的 .zc-mine grid-template-rows:50px），
     实测 .zc-mine-intro 正好 50px、下面 12px 就是画布，眉标上置会顶进画布区，
     所以这一档里让它与标题同行；窄屏没有那 50px 的限制，回到上置，与 01/03/04 相同。
     只改「并排」这一件事，字的样式仍由 .zc-gallery-kicker 那一处给。 */
  .zc-page-mine .zc-mine-intro > div { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
  /* 上置时那条细线是用来把眉标与下面的大标题分开的；并排时它没有对象可分，
     留 8px 下内边距就成了一条吊在标题下沿外面的游离短线。收回到基线上，
     读作「带下划线的标签」，字形字号仍是同一段声明给的。 */
  .zc-page-mine .zc-mine-intro .zc-gallery-kicker { padding-bottom:0; }
  .zc-page-mine .zc-mine-form { padding:12px 0; }
  .zc-page-mine .zc-mine-summary,.zc-page-mine .zc-mine-form label { font-size:16px; }
  .zc-page-mine .zc-compose-palette { padding:10px 0; }
}
/* 宽屏把品牌与导航合成一行；较窄屏继续自然换行，避免挤小字号。 */
@media(min-width:1280px) and (min-height:700px) {
  body:has(.is-workbench) .zc-app { position:relative; }
  body:has(.is-workbench) .zc-header { min-height:98px; padding:0; margin:0; align-items:flex-start; padding-top:12px; }
  body:has(.is-workbench) .zc-subtitle { display:none; }
  .is-workbench .zc-modbar { position:absolute; left:280px; right:28px; top:28px; padding-bottom:12px; gap:12px; }
  .is-workbench .zc-module-indicator { display:none; }
}
@media(max-width:1049px),(max-height:599px) {
  /* 小屏三个模块都使用同宽单列，避免被不同的侧栏宽度挤出不同尺寸。 */
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab) .zc-stage,
  .zc-page-origin .zc-origin { grid-template-columns:minmax(0,1fr); }
  .is-workbench:is(.zc-page-origin,.zc-page-evo,.zc-page-lab) .zc-canvas-wrap {
    width:min(520px,100%); height:auto; aspect-ratio:1 / 1; padding:12px; margin-inline:auto;
  }
  .zc-gallery-heading { margin-top:16px; }
  /* 06 在窄屏/矮屏回到单列：画布跟着栏宽走，侧栏落到图纸下面。 */
  .zc-page-graph .zc-graph-stage { grid-template-columns:minmax(0,1fr); }
  .zc-page-graph .zc-graph-main .zc-canvas-wrap { width:min(520px,100%); height:auto; aspect-ratio:1 / 1; padding:12px; margin-inline:auto; }
  .zc-page-evo .zc-evo-main { position:static; width:100%; height:auto; }
  .zc-page-evo .zc-evo-playback { max-width:560px; margin:0 auto 22px; }
  .zc-page-evo .zc-evo-playback .zc-controls { justify-content:center; }
}
@media(min-width:1050px) and (min-height:600px) and (max-height:729px) {
  .zc-page-evo .zc-evo-playback .zc-btn { padding:5px; font-size:13px; }
  .zc-page-evo .zc-evo-playback .zc-btn[aria-label="上一期"] span,
  .zc-page-evo .zc-evo-playback .zc-btn[aria-label="下一期"] span { display:none; }
}
@media(max-width:620px) {
  .zc-title { font-size:40px; }
  .zc-modtabs button,.is-workbench .zc-modtabs button { font-size:16px; padding:8px; }
  .zc-gallery-heading h2 { font-size:30px; }
  .zc-page-evo .zc-evo-playback .zc-evostage-name { font-size:12px; }
  .zc-page-evo .zc-evo-context { grid-template-columns:minmax(0,1fr); gap:16px; }
  .is-workbench .zc-status-story p,.is-workbench .zc-status-metrics { font-size:13px; }
}

/* ── 主题字包（首页）：与字形故事同源的展览风格 ───────────── */
.zc-home-themes { margin-top:var(--sp-5); }
.zc-theme-selector { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 18px; }
.zc-theme-selector button { display:flex; align-items:center; gap:8px; padding:8px 15px; border:1px solid transparent; border-radius:8px; background:transparent; color:#6a7b69; cursor:pointer; font:400 14px/1.2 var(--font-reading); }
.zc-theme-selector button small { font-size:10px; color:var(--text-faint); }
.zc-theme-selector button:hover,.zc-theme-selector button.is-active { background:#e4ebdc; color:#285640; border-color:#d0dcc8; }
.zc-theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.zc-theme-char { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; background:#fffefa; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-family:var(--font-reading); }
.zc-theme-char b { font:400 22px/1.3 var(--font-serif); color:#285640; }
.zc-theme-char span { font-size:11px; color:#7b857a; }
.zc-theme-char:hover,.zc-theme-char.is-active { border-color:#c4d2b8; background:#eff4ea; }

/* ── 作品墙：卡片改海报缩略 + 操作行 ────────────────────── */
.zc-mine-card { grid-template-columns:84px minmax(0,1fr); }
.zc-mine-card-thumb { width:84px; height:118px; object-fit:cover; border-radius:6px; border:1px solid var(--border); background:#faf8f0; }
.zc-mine-card-glyph { width:100%; max-width:180px; height:auto; }
.zc-mine-card-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.zc-mine-card-actions .zc-btn { padding:4px 9px; font-size:12px; }

/* ── 语言切换（顶部导航内的小开关） ────────────────────── */
.zc-lang-toggle { padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text-muted); font:400 12px/1.4 var(--font-reading); cursor:pointer; }
.zc-lang-toggle:hover,.zc-lang-toggle[aria-pressed="true"] { color:#285640; border-color:#c4d2b8; background:#eff4ea; }

/* ═══════════════════════════════════════════════════════════════
   06 打磨：四个元素的设计完成度（手机与桌面同质）。
   放在本文件末尾就是为了压过 workbench.css 媒体块里的
   .zc-graph-path 规则（≥1050px 的透明直角按钮）和本文件早前的
   .is-workbench .zc-seg 下划线页签样式 —— 同特异性、后加载者胜。
   ═══════════════════════════════════════════════════════════════ */

/* 1 层 / 2 层展开页签：药丸分段控件；激活态实心墨绿 + 白字，
   徽标给实时邻域字数（数字由组件 computed 喂，活的）。 */
.zc-page-graph .zc-graph-hops { display:inline-flex; gap:8px; background:transparent; border:0; border-radius:999px; overflow:visible; }
.zc-page-graph .zc-graph-hops button {
  display:inline-flex; align-items:baseline; gap:6px;
  min-width:64px; padding:7px 14px;
  border:1px solid rgba(43,75,52,.3); border-radius:999px;
  background:rgba(255,255,255,.55); color:#3f5848;
  font:400 15px/1.4 var(--font-reading); box-shadow:none;
}
.zc-page-graph .zc-graph-hops button .zc-hop-count { font:400 12px/1.4 var(--font-reading); color:#5c6a4e; }
.zc-page-graph .zc-graph-hops button:hover { background:#eef3e9; border-color:#4a7053; }
/* 选中态要盖过早前那条 `.is-workbench .zc-seg:not(.zc-modtabs) button.is-active`
   （下划线方案，特异性 0,4,1）：多加一层类 + aria-pressed 属性，特异性压它一头。 */
.zc-page-graph .zc-graph-hops button.is-active[aria-pressed="true"] { background:#2b503b; border-color:#2b503b; color:#fffef7; }
.zc-page-graph .zc-graph-hops button.is-active[aria-pressed="true"] .zc-hop-count { color:rgba(255,254,247,.72); }

/* 推荐探索路径：白纸卡片 —— 上排书法字形链（构形思路一眼可见），
   下排标题 + 说明；激活态浅绿底 + 左侧青铜竖条。 */
.zc-page-graph .zc-graph-path {
  display:grid; gap:6px; width:100%; margin-top:10px; padding:12px 14px;
  text-align:left; cursor:pointer;
  border:1px solid rgba(44,70,55,.22); border-radius:10px;
  background:#fffefa; box-shadow:0 1px 3px rgba(35,60,45,.08);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.zc-page-graph .zc-graph-path:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(35,60,45,.14); border-color:#4a7053; }
.zc-page-graph .zc-graph-path.is-active { background:#eaf1e4; border-color:#4a7053; box-shadow:inset 3px 0 0 var(--bronze-500); }
.zc-page-graph .zc-graph-path-chain { display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; }
.zc-page-graph .zc-graph-path-glyph { font:400 24px/1.2 var(--font-brand); color:#283f30; }
/* 路径链里的分隔号：原来的 #b8935a 在白卡上只有 2.83:1，箭头虽小，但它是「谁接谁」
   的唯一提示。这里**不能**用 var(--bronze-400) —— 工作台那套令牌把它是浅茶色
   #c8b49b，只会更淡；所以写深一档的青铜字面量 #7f6540（≈5.4:1）。is-plus 那支同理，
   回到与其余小字同一个灰绿。 */
.zc-page-graph .zc-graph-path-sep { font:400 14px/1.2 var(--font-reading); color:#7f6540; font-style:normal; }
.zc-page-graph .zc-graph-path-sep.is-plus { color:#5c6a4e; }
.zc-page-graph .zc-graph-path-title { display:block; font:400 16px/1.5 var(--font-brand); color:#2b4634; letter-spacing:.03em; }
.zc-page-graph .zc-graph-path small { display:block; font:400 13px/1.6 var(--font-reading); color:#4e6253; }
.zc-page-graph .zc-graph-path.is-active .zc-graph-path-title { color:#1d3b2a; }

/* ── 5 右栏：中心字卡 / 本字的关系清单 / 空态 ──────────────────────────
   原先这几条写在 workbench.css 的 `≥1050×600` 桌面块里，等于只发给大窗口：
   ≤1049 宽或 ≤599 高时右栏一条规则都没有 —— 清单退回浏览器默认按钮、
   组标题「构形关系 · 实线」不换行地挤在第一个字上。而 01–05 的侧栏造型都在
   基础层（.zc-panel 见 styles.css:340），任何宽度下都自带外观，06 是唯一的例外。

   造型只有一份，桌面与手机共用，所以放在这个**没有媒体查询**的层里；
   断点差异由各自的 media 负责（手机端的工具条收纳在 workbench.css:408 那块）。
   放 gallery.css 末尾是因为它最后加载、同特异性时它说了算 —— 谁要是把其中
   一条抄回 workbench 的桌面块，两端就会静默分歧，verify/test-gallery.mjs
   有静态守卫专门钉这件事。 */
.zc-page-graph .zc-graph-tools { display:grid; gap:10px; align-content:start; min-width:0; }
.zc-page-graph .zc-graph-center-head { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; }
.zc-page-graph .zc-graph-center-char { font:400 62px/1 var(--font-brand); color:#283f30; }
.zc-page-graph .zc-graph-center-head b { display:block; font:400 20px/1.4 var(--font-reading); color:#3a5a45; }
.zc-page-graph .zc-graph-center-head small { display:block; margin-top:2px; font:400 14px/1.7 var(--font-reading); color:#4d6155; }
.zc-page-graph .zc-graph-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.zc-page-graph .zc-chip { padding:3px 9px; border:1px solid var(--gallery-line); border-radius:999px; color:#40604c; font:400 12px/1.6 var(--font-reading); }
.zc-page-graph .zc-graph-group + .zc-graph-group { margin-top:12px; }
.zc-page-graph .zc-graph-group-label { display:block; padding-bottom:4px; border-bottom:1px solid var(--gallery-line); font:400 12px/1.6 var(--font-reading); color:#4e6253; letter-spacing:.06em; }
.zc-page-graph .zc-graph-link { display:flex; align-items:baseline; gap:10px; width:100%; padding:6px 0; text-align:left; border:0; border-bottom:1px solid var(--gallery-line); background:transparent; cursor:pointer; }
.zc-page-graph .zc-graph-link b { flex:none; font:400 26px/1.2 var(--font-brand); color:#283f30; }
.zc-page-graph .zc-graph-link small { font:400 13px/1.6 var(--font-reading); color:#4d6155; }
.zc-page-graph .zc-graph-link:hover b { color:#8a6746; }
.zc-page-graph .zc-graph-empty { position:absolute; left:0; right:0; bottom:16px; margin:0; text-align:center; font:400 16px/1.8 var(--font-reading); color:#4d6155; }

@media(max-width:620px) {
  .zc-page-graph .zc-graph-path { padding:10px 12px; }
  .zc-page-graph .zc-graph-path-glyph { font-size:20px; }
  .zc-page-graph .zc-graph-hops button { min-width:58px; padding:6px 11px; font-size:14px; }
}