/**
 * MythosX Anvil 使用教程 · 第三章「使用指南」页专用样式（U 组件，mu- 前缀）。
 *
 * 业务定位：第三章整页的三类页面专属样式——
 *   1) 页头两块路线入口（.g-routes / .g-route*）：第三章专用，原来放在 guide.css，现在跟着「页面自带自己的样式」归到本文件，
 *      第三章撤下又恢复期间 guide.css 里可能还留着同名规则，本文件在 guide.css 之后加载，取值完全一致，谁在都显示一样；
 *   2) 两档处理的 A / B 小标题、能力清单（13 组）、接入方式子节这些排版；
 *   3) 本章演示动画（替换 LEECHCORE.DLL、接入流程）的模拟画面与播放器，mu- 前缀，独立于第二章的 flow.*（gf- 前缀）。
 *
 * 为什么这样写：
 *   - 控件与画面都按「教程页控件规范 v2」（work/briefs/controls-v2.md）：平、细、准、留白——透明底、发丝细线、没有渐变和投影；
 *     暖金只用在演示标注（高亮框、点击扩散、下沿指示线、对勾）、当前段进度指示线和焦点环；
 *   - 画面是抽象的示意、不是哪个软件的截图：窗口只画标题栏、路径条和草稿给了原文的文件名与标签，没写名字的画压低透明度的占位条；
 *   - 演示标注、光标、节拍节奏和第一、二章的 BIOS / flow 演示同一套画法，放在一页上看起来是一套；
 *   - 尺寸写成 calc(N * var(--u))，--u = 画框宽 / 设计宽（宽屏 800、窄屏 420），文字 max(11px, …) 兜最小字号；宽于 560px 16:10，窄于 560px 4:5。
 */

/* ====== 页头两块路线入口（第三章专用，取值与 guide.css 旧版一致） ====== */
.g-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 40px); }
.g-route {
  --tile-on: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 20px;
  border: 1px solid var(--g-line);
  border-radius: 10px;
  color: var(--text);
  transition: var(--g-fade);
}
.g-route::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; background: var(--accent); opacity: var(--tile-on); transition: opacity .18s var(--ease); }
.g-route:hover, .g-route:focus-visible { --tile-on: 1; border-color: var(--g-line-on); }
.g-route-name { font: 500 clamp(22px, 2vw, 28px) / 1.3 var(--display); letter-spacing: .005em; color: var(--text); }
.g-route-say { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.g-route-meta { margin-top: auto; padding-top: 18px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
@media (max-width: 599px) { .g-routes { grid-template-columns: minmax(0, 1fr); } }

/* ====== 两档处理（A / B）：分步正文里的小标题、等宽文件名 ====== */
/* 分步正文容器：编号圈右侧那一列。小标题比正文重一档（500、--text），和正文之间留一点 */
.mu-step-c { padding-top: 6px; }
.mu-step-h { margin: 0 0 4px; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--text); }
.mu-step-c > p + p { margin-top: 2px; }
/* A / B 这一列的段落沿用 .g-step p 的字号；.mu-step-h 已是 p，这里只去掉它自己的 padding-top（标题贴着编号圈顶对齐） */
.g-step .mu-step-c > .mu-step-h { padding-top: 0; }
/* 等宽文件名、命令：不加底色和方框，只换等宽字体，和正文区分开（规范 v2：层级靠字体不靠框） */
.mu-code { font: 400 .92em/1.4 var(--mono); color: var(--text); word-break: break-word; }

/* ====== 能力清单（13 组） ====== */
.mu-caps { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--g-line); }
.mu-caps-kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--text-3); }
/* 宽屏两列、窄屏一列；每组自成一块，组间靠一条发丝细线分隔，不加底色和圆角框 */
.mu-caps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 56px); margin-top: clamp(18px, 2vw, 26px); }
.mu-cap { min-width: 0; padding: clamp(18px, 2vw, 24px) 0; border-top: 1px solid var(--g-line); }
/* 前两块在各自列的顶部：去掉上细线，和 .mu-caps 的那条分隔线并到一起，不重线 */
.mu-caps-grid > .mu-cap:nth-child(1), .mu-caps-grid > .mu-cap:nth-child(2) { border-top: 0; padding-top: clamp(2px, 1vw, 8px); }
.mu-cap-title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--text); text-wrap: balance; }
.mu-cap-list { margin: 14px 0 0; padding: 0; list-style: none; }
/* 要点：左边一条发丝短线当项目符号（不用圆点，规范 v2），字是次级色。
   text-wrap 用 balance（11-11 A6 全面对齐）：要点多是一两行的短句，pretty 管不住两行时末行只剩一两个字（390 / 768 / 1024 下量到 6 处），
   balance 把各行排成差不多长；超过 6 行浏览器自动退回普通换行 */
.mu-cap-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.75; color: var(--text-2); text-wrap: balance; }
.mu-cap-list li + li { margin-top: 9px; }
.mu-cap-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: var(--g-line-on); }
@media (max-width: 719px) {
  .mu-caps-grid { grid-template-columns: minmax(0, 1fr); }
  /* 单列时只有第一块在顶部去线 */
  .mu-caps-grid > .mu-cap:nth-child(2) { border-top: 1px solid var(--g-line); padding-top: clamp(18px, 2vw, 24px); }
  .mu-caps-grid > .mu-cap:nth-child(1) { padding-top: clamp(2px, 1vw, 8px); }
}

/* ====== 接入方式子节：沿用 .g-sub（一条细线分隔 + 节头），这里只管演示挂载点上方的间距 ====== */
.mu-onboard .g-sub-say { max-width: 48em; }

/* ====== 演示动画挂载点：全宽（画面自己收到 820px），脚本没跑时不占高度 ====== */
.mu-mount { margin-top: clamp(22px, 2.4vw, 30px); }
.mu-mount:empty { margin-top: 0; }
/* 分步正文里（B 档下面）的挂载点：和上一段正文之间留一截 */
.g-step .mu-mount { margin-top: 16px; }

/* ====== 演示动画：画框与画布 ====== */
.mu {
  --mu-ease: var(--ease, cubic-bezier(.2, 0, 0, 1));
  --mu-line: rgba(240, 238, 233, .09);
  --mu-ink: rgba(240, 238, 233, .2);
  --mu-ink2: rgba(240, 238, 233, .34);
  --mu-pick: rgba(240, 238, 233, .55);
  container-type: inline-size;
  max-width: 820px;
}
.mu-frame { container-type: inline-size; position: relative; overflow: hidden; border: 1px solid var(--mu-line); border-radius: 10px; background: #070708; }
.mu-stage { --u: calc(100cqw / 800); position: relative; aspect-ratio: 16 / 10; }
@container (width < 560px) { .mu-stage { --u: calc(100cqw / 420); aspect-ratio: 4 / 5; } }
.mu-cv {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: calc(var(--u) * 34) calc(var(--u) * 40);
  font-size: max(11px, calc(var(--u) * 14)); line-height: 1.4; color: var(--text-2);
  -webkit-user-select: none; user-select: none;
}
@container (width < 560px) { .mu-cv { padding: calc(var(--u) * 24) calc(var(--u) * 22); } }
.mu-box, .mu-win, .mu-file, .mu-node, .mu-chip, .mu-path, .mu-slot, .mu-join { position: relative; min-width: 0; }

/* ====== 模拟窗口（文件管理器 / 接入流程都用它当外壳） ====== */
.mu-win { display: flex; flex-direction: column; width: 100%; max-height: 100%; border: 1px solid var(--mu-ink); border-radius: calc(var(--u) * 7); background: #030304; overflow: hidden; }
.mu-l-win > .mu-win { width: 92%; }
@container (width < 560px) { .mu-l-win > .mu-win { width: 100%; } }
/* 标题栏：一条细线，左边画占位条（不编窗口名），右边三个窗口按钮小点压暗 */
.mu-win-bar { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 12); border-bottom: 1px solid var(--mu-line); }
.mu-win-bar .mu-ph { width: calc(var(--u) * 120); height: max(3px, calc(var(--u) * 5)); }
.mu-win-dots { margin-left: auto; display: flex; gap: calc(var(--u) * 6); }
.mu-win-dots i { width: max(4px, calc(var(--u) * 6)); height: max(4px, calc(var(--u) * 6)); border-radius: 50%; border: 1px solid var(--mu-ink); }
.mu-win-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16); }

/* 路径条：文件夹图标 + 一段占位条（不编具体目录名）+ 末尾可带一个等宽标签 */
.mu-path { display: flex; align-items: center; gap: calc(var(--u) * 9); height: max(16px, calc(var(--u) * 22)); padding: 0 calc(var(--u) * 10); border: 1px solid var(--mu-line); border-radius: calc(var(--u) * 5); color: var(--text-3); }
.mu-path .mu-ic { width: calc(var(--u) * 17); height: calc(var(--u) * 15); color: var(--text-2); }
.mu-path .mu-ph { width: calc(var(--u) * 150); }
.mu-path-l { font: 500 max(11px, calc(var(--u) * 12)) / 1 var(--mono); letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }

/* ====== 文件夹里的文件（图标 + 名字 + 副名），横排居中 ====== */
.mu-files { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: calc(var(--u) * 20) calc(var(--u) * 26); flex: 1; margin: 0; }
.mu-file { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); width: calc(var(--u) * 118); padding: calc(var(--u) * 10) calc(var(--u) * 6); border-radius: calc(var(--u) * 6); }
.mu-file .mu-ic { width: calc(var(--u) * 30); height: calc(var(--u) * 36); color: var(--text-2); }
.mu-file > .mu-ph { width: calc(var(--u) * 72); }
.mu-file-n { font: 500 max(11px, calc(var(--u) * 13)) / 1.25 var(--mono); color: var(--text); text-align: center; word-break: break-word; }
.mu-file-s { font-size: max(11px, calc(var(--u) * 12)); line-height: 1.2; color: var(--text-3); text-align: center; }
/* 替换 LEECHCORE.DLL：一个槽位里叠着旧、新两个同名文件（grid 同格），一次只显示一个。
   旧的（is-fade）先在上面，覆盖时淡出；新的（is-swap）从上方淡入下落到位 */
.mu-slot { display: grid; width: calc(var(--u) * 118); }
.mu-slot > .mu-file { grid-area: 1 / 1; width: 100%; }
.mu-file.is-swap { opacity: 0; transform: translateY(calc(var(--u) * -12)); transition: opacity .34s var(--mu-ease), transform .4s var(--mu-ease); }
.mu-file.is-swap.is-in { opacity: 1; transform: none; }
.mu-file.is-fade { transition: opacity .3s var(--mu-ease); }
.mu-file.is-fade.is-out { opacity: 0; }

/* ====== 接入流程：四段卡片，横排（宽屏）/ 竖排（窄屏），段间一条连线 ====== */
.mu-flow { display: flex; align-items: stretch; justify-content: center; gap: 0; width: 100%; }
.mu-node { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) calc(var(--u) * 8); border: 1px solid var(--mu-line); border-radius: calc(var(--u) * 8); color: var(--text-2); transition: border-color .25s var(--mu-ease), color .25s var(--mu-ease); }
/* 已点亮的段：边线提一级、字变亮、顶边内侧一条暖金指示线 */
.mu-node::before { content: ""; position: absolute; top: 0; left: calc(var(--u) * 14); right: calc(var(--u) * 14); height: 2px; background: var(--accent); opacity: 0; transition: opacity .25s var(--mu-ease); }
.mu-node.is-on { border-color: var(--mu-pick); color: var(--text); }
.mu-node.is-on::before { opacity: 1; }
.mu-node .mu-ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: currentColor; }
.mu-node-l { font: 500 max(11px, calc(var(--u) * 14)) / 1.3 var(--sans); color: inherit; }
.mu-node-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 5); }
.mu-chip { padding: calc(var(--u) * 3) calc(var(--u) * 7); border: 1px solid var(--mu-line); border-radius: calc(var(--u) * 4); font: 500 max(10px, calc(var(--u) * 11)) / 1.3 var(--mono); color: var(--text-3); white-space: nowrap; }
.mu-node.is-on .mu-chip { border-color: var(--mu-ink); color: var(--text-2); }
/* 段间连线：宽屏横、窄屏竖；没点亮是虚线，点亮是实线 */
.mu-join { flex: 0 0 auto; align-self: center; width: calc(var(--u) * 30); height: 0; border-top: 1px dashed var(--mu-ink2); position: relative; }
.mu-join.is-on { border-top-style: solid; }
@container (width < 560px) {
  .mu-flow { flex-direction: column; align-items: stretch; }
  .mu-node { flex-direction: row; text-align: left; justify-content: flex-start; gap: calc(var(--u) * 14); }
  .mu-node::before { top: calc(var(--u) * 14); bottom: calc(var(--u) * 14); left: 0; right: auto; width: 2px; height: auto; }
  .mu-node-chips { justify-content: flex-start; }
  .mu-join { width: 0; height: calc(var(--u) * 20); border-top: 0; border-left: 1px dashed var(--mu-ink2); margin-left: calc(var(--u) * 22); }
  .mu-join.is-on { border-left-style: solid; }
}
/* 连线上跑的一小段亮线（接入包往下一段走） */
.mu-pk { position: absolute; top: -1px; left: 0; width: calc(var(--u) * 14); height: 2px; background: var(--text); animation: mu-pk .7s var(--mu-ease) both; }
@keyframes mu-pk { 0% { left: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: calc(100% - var(--u) * 14); opacity: 0; } }
@keyframes mu-pk-v { 0% { top: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: calc(100% - var(--u) * 14); opacity: 0; } }
@container (width < 560px) { .mu-pk { top: 0; left: -1px; width: 2px; height: calc(var(--u) * 10); animation-name: mu-pk-v; } }

/* ====== 占位条、图标、对勾 ====== */
.mu-ph { display: block; flex: none; width: calc(100% * var(--pw, 1)); height: max(4px, calc(var(--u) * 6)); border-radius: 2px; background: currentColor; opacity: .16; }
.mu-ic { display: inline-flex; flex: none; }
.mu-ic svg { width: 100%; height: 100%; overflow: visible; }
.mu-tk { width: max(10px, calc(var(--u) * 12)); height: max(10px, calc(var(--u) * 12)); color: var(--text); opacity: 0; transition: opacity .2s var(--mu-ease); }
.mu-tk svg { stroke-width: 1.5; }
.is-ticked > .mu-tk { opacity: 1; }

/* ====== 演示标注（和 flow.css / bios.css 同一种画法）====== */
/* 高亮框：目标外面一圈 2px 暖金，再外一圈 1px 深色描边；没有投影和光晕 */
.mu-cv .is-target::after {
  content: ""; position: absolute; z-index: 4; inset: calc(var(--u) * -6); pointer-events: none;
  border: 2px solid var(--accent); border-radius: calc(var(--u) * 8);
  outline: 1px solid rgba(0, 0, 0, .55);
  animation: mu-fade .3s var(--mu-ease) both;
}
/* 对勾：目标右下角一个暖金实心圆加深色勾（这一步的终点） */
.mu-ok {
  --ok: clamp(12px, calc(var(--u) * 18), 20px);
  position: absolute; z-index: 7; right: calc(var(--ok) / -2 - var(--u) * 6); bottom: calc(var(--ok) / -2 - var(--u) * 6);
  width: var(--ok); height: var(--ok); border-radius: 50%; background: var(--accent);
  animation: mu-pop .28s var(--mu-ease) both;
}
.mu-ok::before { content: ""; position: absolute; left: 35%; top: 20%; width: 28%; height: 46%; border: solid #17140f; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes mu-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* 光标 */
.mu-mouse {
  position: absolute; z-index: 8; left: 0; top: 0;
  width: clamp(11px, calc(var(--u) * 15), 17px); height: clamp(14px, calc(var(--u) * 20), 22px);
  pointer-events: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95));
  transition-property: left, top; transition-timing-function: var(--mu-ease);
}
.mu-mouse::before { content: ""; position: absolute; inset: 0; background: #f4f2ee; clip-path: polygon(0 0, 0 80%, 24% 61%, 41% 98%, 57% 91%, 41% 56%, 74% 56%); }
/* 点击提示：一圈细线扩散后淡出 */
.mu-ripple {
  --rp: clamp(22px, calc(var(--u) * 34), 40px);
  position: absolute; z-index: 8; width: var(--rp); height: var(--rp); margin: calc(var(--rp) / -2) 0 0 calc(var(--rp) / -2);
  border: 1.5px solid rgba(244, 242, 238, .9); border-radius: 50%; pointer-events: none;
  animation: mu-ripple .35s var(--mu-ease) both;
}
@keyframes mu-ripple { 0% { opacity: 1; transform: scale(.25); } 55% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } }
/* 值变了以后下沿一条 2px 暖金指示线闪一下 */
.mu-uline { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--u) * -4); height: 2px; background: var(--accent); pointer-events: none; animation: mu-uline .5s var(--mu-ease) both; }
@keyframes mu-uline { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mu-fade { from { opacity: 0; } to { opacity: 1; } }
/* 终态（减少动态效果、重播前画终态）：过渡和动画一律关掉，直接是结果 */
.mu-cv.is-instant *, .mu-cv.is-instant *::before, .mu-cv.is-instant *::after { animation: none !important; transition: none !important; }

/* ====== 播放器控件：按钮复用 guide.css 的 .mx-btn / .mx-ctl（和 BIOS、flow 同一套），这里只管分段进度和间距 ====== */
.mu-prog { display: flex; gap: 3px; margin-top: 12px; }
.mu-prog i { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--mu-line); }
.mu-prog i b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.mu.is-static .mu-prog i.is-on b { transform: none; }
.mu-cb { margin-top: 14px; }

/* 英文版的节点小标签：英文比中文长，最长的一个在 768 及以上比节点内容宽 5–8px。不让它折行（折行会把同组标签撑得不一样高），
   而是收左右内边距、略收字距，保持一行（768 宽约省 14px，大于原来的 8px 溢出；只在英文页生效） */
html[lang="en-US"] .mu-chip { padding-inline: calc(var(--u) * 3); letter-spacing: -.04em; }