/**
 * MythosX · Janus 使用教程 · 本页样式（jg- 版式、jx- 演示动画）
 *
 * 业务定位：Janus 教程页 11-11 改用 Anvil 教程的版式系统（guide.css 的教程条、页头、节头、分步、截图、按钮），
 * 并在同一页加入 Janus Pro 一条路线。guide.css 是几章共用的，Anvil 教程在另一个工作树里同时改它，所以本页的差异全部放在这里，
 * 只由 janus-guide.html 加载，不往共用文件里写。
 *
 * 为什么需要这些：
 *   - Janus 的真截图都是竖版（720×1080、484×760），照 guide.css 的 .g-shot-img 铺满 820 宽会有一千多像素高，
 *     这里限定在本页内改成并排的定宽小图（同一行只放同一比例的图，底边才齐），整体压暗、悬停或放大时恢复原色（Owner 11-02 定的截图写法）；
 *   - 现有教程里有「模式两栏」「策略规则表」「问答」几种块，Anvil 版式里没有对应组件，这里按控件规范 v2「去油」补：
 *     只用发丝细线、字重和字色分层，没有底色卡片、渐变和阴影；暖金只用于当前步骤的指示线、进度条和焦点环；
 *   - Janus Pro 的两段操作演示（jx-）是页面里的模拟界面：步骤列表就是字幕，画面只画草稿点到的东西，按钮和选择框画成中性的样子。
 *
 * 字体：标题字体只用 guide.css 里已有的类（g-title、g-sec-title、g-stp-title、g-sg-title、g-route-name、g-next-name），
 * 本文件不新写 var(--display) 的规则——补字脚本只按那几个类收字，自己起的新类会静默漏字。
 */

/* 页头路线入口里的步数小字和「Start Here」这类等宽小标，与 guide.css 的 .g-route-meta 同一层级 */
.jg-kicker { margin: 0 0 16px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }

/* Start Here 三栏（复用 .g-grid3 / .g-sg）：紧跟路线节头，和下面第一步之间留出一步的间距 */
.jg-start { margin-bottom: clamp(44px, 4.6vw, 64px); }
.jg-start .g-sg-say { font-size: 15px; }

/* 一块带标签的内容：等宽小标签 + 小标题 + 正文；块与块之间 28–36px */
.jg-block + .jg-block, .jg-block + .g-tip, .jg-shots + .g-tip, .jg-pair + .g-tip, .jg-cols + .g-tip,
.jg-block + .jg-shots, .jg-pair + .jg-shots { margin-top: clamp(28px, 3vw, 36px); }
.jg-tag { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.jg-h { margin: 8px 0 0; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--text); }
.jg-h + .g-steps, .jg-h + .jg-list, .jg-h + .jg-rules { margin-top: 18px; }

/* 正文里的强调：只提字色和字重，不换字体、不加底色 */
.jg strong, .jg-faq strong { font-weight: 500; color: var(--text); }

/* 短横线列表（同 guide.css .g-pts 的写法，字号放大到正文） */
.jg-list { display: grid; gap: 10px; max-width: 48em; }
.jg-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.75; color: var(--text-2); text-wrap: pretty; }
.jg-list li::before { content: ""; position: absolute; left: 0; top: .9em; width: 8px; height: 1px; background: var(--text-3); }

/* 标准 / 高级两栏：每栏顶上一条细线，没有底色卡片；窄屏上下排 */
.jg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.jg-col { min-width: 0; padding-top: 16px; border-top: 1px solid var(--g-line); }
.jg-col-name { margin: 8px 0 0; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--text); }
.jg-col p:not(.jg-tag) { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--text-2); text-wrap: pretty; }

/* 策略规则表：左栏是策略名（原文里的加粗串），右栏是规则；行间细线，上下各一条收口 */
.jg-rules { max-width: 62em; border-bottom: 1px solid var(--g-line); }
.jg-rules li { display: grid; grid-template-columns: 13em minmax(0, 1fr); column-gap: 28px; padding: 13px 0; border-top: 1px solid var(--g-line); font-size: 15px; line-height: 1.75; color: var(--text-2); }

/* 分步列表在本页的字号：比第二章小一档（本页步骤多是带按钮名的短句，和右侧截图并排） */
.jg .g-step p { font-size: 16px; line-height: 1.7; }

/* 步骤 + 一张竖版截图并排：左边步骤，右边定宽截图，顶边对齐；窄屏截图落到步骤下面 */
.jg-pair { display: grid; grid-template-columns: minmax(0, 600px) 260px; column-gap: clamp(32px, 5vw, 80px); align-items: start; }

/* 截图组：定宽 260 的竖版图并排，间距 24；同一组只放同一比例的图 */
.jg-shots { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 260px)); gap: 24px; }
.jg-shots.is-3 { --n: 3; }
.jg-shot { margin: 0; min-width: 0; }
.jg-shot .g-shot-img { width: 100%; max-width: none; filter: brightness(.7); cursor: zoom-in; transition: filter .3s var(--ease), border-color .18s var(--ease); }
.jg-shot .g-shot-img:hover, .jg-shot .g-shot-img:focus-visible { filter: none; border-color: var(--g-line-hover); }
.jg-shot figcaption { display: flex; gap: 10px; align-items: baseline; }
/* 图注名在窄屏（两列 156px）会折行，英文末行只剩一个词：按行平衡 */
.jg-shot figcaption span:last-child { text-wrap: balance; }
.jg-fig-no { flex: none; font: 500 11px/1.6 var(--mono); letter-spacing: .04em; color: var(--text-3); }

/* 截图放大层：页面底色铺满，原图按视口收；没有阴影。Esc、点任意处关闭，焦点还给原图 */
.jg-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(6, 6, 7, .95); opacity: 0; visibility: hidden; cursor: zoom-out; transition: opacity .22s var(--ease), visibility 0s linear .22s; }
.jg-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .22s var(--ease), visibility 0s; }
.jg-lightbox img { max-width: 100%; max-height: 92vh; width: auto; height: auto; border: 1px solid var(--g-line); border-radius: 10px; }

/* 提示块在本页的位置：跟在正文块后面；需要注意的那种左线提一级（不用暖金） */
.g-stp-body > .g-tip { max-width: 48em; }
.jg-tip.is-warn { border-left-color: var(--g-line-on); }
.g-tip p + p { margin-top: 6px; }

/* 常见问题：一问一行，左问右答，行间细线；窄屏问上答下 */
.jg-faq { border-bottom: 1px solid var(--g-line); }
.jg-q { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 64px); padding: 22px 0 24px; border-top: 1px solid var(--g-line); }
/* 问题是 h3：mx.css 给 h3 的是标题字体，这里明确改回正文无衬线（问题是一句话，不是标题；而且补字子集只收已有标题类的字，h3 走标题字会漏字） */
.jg-q-h { margin: 0; font: 500 17px/1.6 var(--sans); color: var(--text); text-wrap: pretty; word-break: normal; }
.jg-q-a p { font-size: 15px; line-height: 1.8; color: var(--text-2); text-wrap: pretty; }
.jg-q-a p + p { margin-top: 8px; }

/* 结语：一行标题字 + 等宽落款，左对齐到版心（不居中，和上面的节头同一列） */
.jg-closing { margin: clamp(48px, 5vw, 72px) 0 0; }
.jg-closing blockquote { margin: 0; }
.jg-closing .g-stp-title { margin: 0; }
.jg-closing figcaption { margin-top: 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }

/* 前后页：上下两条细线夹一行两格，中间一条竖细线；下一页靠右，顶线左端一段 2px 暖金（同 .g-next） */
.jg-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); }
.jg-pager a { position: relative; display: block; min-width: 0; padding: 22px 24px 24px 0; color: var(--text); transition: var(--g-fade); }
.jg-pager a.is-next { padding: 22px 0 24px 24px; border-left: 1px solid var(--g-line); text-align: right; }
.jg-pager a.is-next::before { content: ""; position: absolute; top: -1px; right: 0; width: 40px; height: 2px; background: var(--accent); }
.jg-pager a:hover .g-next-name { color: #fff; }
.jg-pager .g-next-name { transition: color .18s var(--ease); }

/* 路线说明里提到另一条路线的入口（PRO 04 → Janus 05）：用 guide.css 的 .g-act，这里只给间距 */
.jg-acts { margin-top: 20px; }

/* 英文模式：PRO 04 标题里用 .g-nw 绑住的半句，中文只有七个字，英文有五个词，窄屏一行放不下，放开折行 */
html[lang="en-US"] .jg .g-nw { white-space: normal; }

/* =======================================================================
 * Janus Pro 操作演示（jx-）
 * 结构：左边是这一步的分步列表（也是演示的字幕，当前段提亮、左侧一条 2px 暖金指示线），右边是画面和控制条；窄屏上下排。
 * 画面是容器查询的容器：宽 ≥560 用 16:10，窄于 560 用 4:5；里面的尺寸都按 --jx（画面宽度的百分之一）缩放，任何宽度下字都是原生排版。
 * 节拍由 janus.js 驱动：先高亮目标、光标缓动过去、按下有反馈、再出结果；每段 3.5–5 秒，自动续播，可重播；
 * 减少动态效果时不画光标和高亮，直接给每段的终态，不自动续播。
 * ===================================================================== */
.jx { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.jx-steps .g-step { padding-bottom: 24px; }
.jx-steps .g-step:last-child { padding-bottom: 0; }
.jx-steps .g-step > div { position: relative; }
/* 脚本接管后：当前段提亮，其余退到次级；指示线画在编号和文字之间的空隙里 */
.jx.is-live .jx-steps .g-step p { color: var(--text-3); transition: color .18s var(--ease); }
.jx.is-live .jx-steps .g-step-num { transition: border-color .18s var(--ease), color .18s var(--ease); }
.jx.is-live .jx-steps .g-step.is-on p { color: var(--text); }
.jx.is-live .jx-steps .g-step.is-on .g-step-num { border-color: var(--g-line-on); color: var(--text); }
.jx.is-live .jx-steps .g-step > div::before { content: ""; position: absolute; left: -12px; top: 9px; height: 22px; width: 2px; background: var(--accent); opacity: 0; transition: opacity .18s var(--ease); }
.jx.is-live .jx-steps .g-step.is-on > div::before { opacity: 1; }

.jx-stage { min-width: 0; container-type: inline-size; }
.jx-canvas {
  --jx: 1cqw;
  --jx-fs: max(11px, calc(var(--jx) * 2.3));
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--g-line);
  border-radius: 10px;
  background: #0b0b0d;
  font-size: var(--jx-fs);
  line-height: 1.4;
  color: var(--text-2);
}
@container (width < 560px) {
  .jx-canvas { aspect-ratio: 4 / 5; --jx-fs: max(11px, calc(var(--jx) * 3.4)); }
}
/* 画面本体一层铺满画布：跳段时脚本整层复原，高亮框、光标、点击圈压在它上面 */
.jx-scene { position: absolute; inset: 0; }
/* 跳段、重播、减少动态效果时瞬间到位：关掉画面里所有过渡 */
.jx-canvas.is-instant, .jx-canvas.is-instant * { transition: none !important; }
.jx .mx-ctl { margin-top: 14px; }

/* 应用窗口：细线框、页面底色稍亮一级，标题栏一条细线；窗口按钮是三个细线小符号 */
.jx-win { position: absolute; left: 50%; top: 50%; width: 72%; transform: translate(-50%, -50%); border: 1px solid rgba(240, 238, 233, .16); border-radius: calc(var(--jx-fs) * .55); background: #141416; }
@container (width < 560px) { .jx-win { width: 90%; } }
.jx-tbar { display: flex; align-items: center; justify-content: space-between; height: 2.4em; padding: 0 .9em; border-bottom: 1px solid var(--g-line); font-size: .86em; color: var(--text-3); }
.jx-tname { font-weight: 500; letter-spacing: .02em; color: var(--text-2); }
.jx-tctl { display: flex; gap: 1em; }
.jx-tctl i { display: block; width: .75em; height: .75em; border: 1px solid rgba(240, 238, 233, .28); border-radius: 2px; }
.jx-tctl i:first-child { height: 0; border-width: 1px 0 0; align-self: center; }
.jx-body { padding: 1.6em 1.6em 1.7em; }

/* 画面里的按钮：中性细线方块，只有图标（草稿没写按钮名），按下时一块很浅的底色闪一下 */
.jx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-width: 3.2em; height: 2.3em; padding: 0 1em; border: 1px solid rgba(240, 238, 233, .3); border-radius: .45em; color: var(--text); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.jx-btn svg, .jx-ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jx .is-press { background-color: rgba(240, 238, 233, .1); }

/* 演示一：烤 U 盘 ------------------------------------------------------- */
.jx-app-head { display: flex; align-items: center; gap: .8em; }
.jx-app-mark { display: grid; place-items: center; width: 2.6em; height: 2.6em; border: 1px solid var(--g-line-hover); border-radius: .5em; color: var(--text-2); }
.jx-app-mark .jx-ico { width: 1.4em; height: 1.4em; }
.jx-app-name { font-size: 1.25em; font-weight: 500; color: var(--text); letter-spacing: .01em; }
.jx-app-foot { display: flex; justify-content: flex-end; margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid var(--g-line); }

/* U 盘选择框：盖在应用窗口上，出现时只做淡入；页面底色铺一层暗幕压住后面的窗口 */
.jx-veil { position: absolute; inset: 0; background: rgba(6, 6, 7, .55); opacity: 0; transition: opacity .3s var(--ease); }
.jx-dlg { position: absolute; left: 50%; top: 50%; width: 54%; transform: translate(-50%, -46%); opacity: 0; visibility: hidden; border: 1px solid rgba(240, 238, 233, .22); border-radius: calc(var(--jx-fs) * .55); background: #18181a; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .3s; }
@container (width < 560px) { .jx-dlg { width: 82%; } }
.jx-canvas[data-dlg="open"] .jx-veil { opacity: 1; }
.jx-canvas[data-dlg="open"] .jx-dlg { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s; }
.jx-dlg-head { display: flex; align-items: center; gap: .6em; height: 2.4em; padding: 0 .9em; border-bottom: 1px solid var(--g-line); color: var(--text-3); }
.jx-dlg-body { padding: 1em .9em 1.1em; }
.jx-drive { position: relative; display: flex; align-items: center; gap: .7em; padding: .75em .8em; border: 1px solid var(--g-line-hover); border-radius: .45em; color: var(--text-2); transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); }
.jx-drive::before { content: ""; position: absolute; left: -1px; top: .55em; bottom: .55em; width: 2px; background: var(--accent); opacity: 0; transition: opacity .2s var(--ease); }
.jx-drive b { font: 500 1em/1 var(--mono); color: var(--text); }
.jx-canvas[data-drive="on"] .jx-drive { border-color: var(--g-line-on); color: var(--text); }
.jx-canvas[data-drive="on"] .jx-drive::before { opacity: 1; }
.jx-dlg-foot { display: flex; align-items: center; justify-content: flex-end; gap: .8em; margin-top: 1em; }
/* 烤录进度：细轨道 + 暖金填充（进度是指示线的一种），右边等宽百分比；完成后换成对勾 */
.jx-prog { flex: 1; display: flex; align-items: center; gap: .7em; opacity: 0; transition: opacity .25s var(--ease); }
.jx-track { position: relative; flex: 1; height: 2px; background: rgba(240, 238, 233, .12); }
.jx-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 1.6s cubic-bezier(.45, 0, .55, 1); }
.jx-pct { min-width: 3.2em; font: 500 .9em/1 var(--mono); text-align: right; color: var(--text-2); }
.jx-done { width: 1.2em; height: 1.2em; color: var(--text); opacity: 0; transition: opacity .25s var(--ease); }
.jx-canvas[data-prog="run"] .jx-prog, .jx-canvas[data-prog="done"] .jx-prog { opacity: 1; }
.jx-canvas[data-prog="run"] .jx-fill, .jx-canvas[data-prog="done"] .jx-fill { width: 100%; }
.jx-canvas[data-prog="done"] .jx-done { opacity: 1; }
.jx-canvas[data-prog="done"] .jx-go { border-color: var(--g-line); color: var(--text-3); }

/* 演示二：BIOS -------------------------------------------------------- */
/* 不画任何厂商的界面：一张中性的设置表，只有草稿点名的四项；值在右边，点开弹出可选值 */
.jx-bios { font-family: var(--mono); }
.jx-bios .jx-body { padding: .6em 1.2em 1em; }
.jx-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .85em 0; border-bottom: 1px solid var(--g-line); }
.jx-row:last-child { border-bottom: 0; }
.jx-row-k { font-family: var(--sans); color: var(--text-2); }
.jx-val { position: relative; min-width: 6.6em; padding: .35em .7em; border: 1px solid var(--g-line-hover); border-radius: .4em; text-align: center; color: var(--text); transition: border-color .2s var(--ease), color .2s var(--ease); }
.jx-val.is-set { border-color: var(--g-line-on); }
.jx-val.is-set::after { content: ""; position: absolute; left: .7em; right: .7em; bottom: -1px; height: 2px; background: var(--accent); }
.jx-val.is-empty { color: var(--text-3); }
/* 可选值弹层：贴在值的下方右对齐，细线框，选中项左侧暖金短线 */
.jx-pop { position: absolute; right: 0; top: calc(100% + .4em); z-index: 2; min-width: 9em; padding: .35em 0; border: 1px solid rgba(240, 238, 233, .26); border-radius: .45em; background: #1a1a1c; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; font-family: var(--sans); }
/* 下面两行（启动项）的弹层往上开：三个可选值往下开会被画布下沿裁掉 */
.jx-row:nth-child(n + 3) .jx-pop { top: auto; bottom: calc(100% + .4em); }
.jx-pop.is-open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s; }
.jx-opt { position: relative; display: block; padding: .5em 1em; color: var(--text-2); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
.jx-opt.is-on { color: var(--text); }
.jx-opt.is-on::before { content: ""; position: absolute; left: 0; top: .45em; bottom: .45em; width: 2px; background: var(--accent); }

/* 高亮框与光标：高亮是一圈中性亮线（不用暖金，暖金留给指示线），光标是细线箭头；点击时箭头尖端扩散一圈细线 */
.jx-hl { position: absolute; z-index: 5; border: 1.5px solid rgba(240, 238, 233, .75); border-radius: .5em; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease); }
.jx-hl.is-on { opacity: 1; }
.jx-cur { position: absolute; z-index: 6; width: calc(var(--jx-fs) * 1.5); height: calc(var(--jx-fs) * 1.5); margin: -1px 0 0 -1px; opacity: 0; pointer-events: none; transition-property: left, top, opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 1.1s, 1.1s, .3s; }
.jx-cur.is-on { opacity: 1; }
.jx-cur svg { display: block; width: 100%; height: 100%; fill: #f0eee9; stroke: #0b0b0d; stroke-width: 1.4; stroke-linejoin: round; }
.jx-tap { position: absolute; z-index: 5; width: calc(var(--jx-fs) * 2.4); height: calc(var(--jx-fs) * 2.4); margin: calc(var(--jx-fs) * -1.2) 0 0 calc(var(--jx-fs) * -1.2); border: 1.5px solid rgba(240, 238, 233, .8); border-radius: 50%; opacity: 0; pointer-events: none; }
.jx-tap.is-go { animation: jx-tap .55s var(--ease) forwards; }
@keyframes jx-tap { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(1); } }

/* 断点 ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .jx { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .jx-steps { max-width: 820px; }
}
@media (max-width: 899px) {
  .jg-q { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
@media (max-width: 767px) {
  .jg-pair { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .jg-pair .jg-shot { max-width: 260px; }
  .jg-rules li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .jg-pager { grid-template-columns: minmax(0, 1fr); }
  .jg-pager a, .jg-pager a.is-next { padding: 20px 0 22px; border-left: 0; text-align: left; }
  .jg-pager a.is-next { border-top: 1px solid var(--g-line); }
  .jg-pager a.is-next::before { right: auto; left: 0; }
}
@media (max-width: 640px) {
  .jg-cols { grid-template-columns: minmax(0, 1fr); }
  .jg-shots, .jg-shots.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 599px) {
  .jg .g-step p { font-size: 15px; }
}
/* 减少动态效果：mx.css 已把过渡压到近乎 0；这里再停掉点击扩散的关键帧，光标和高亮由脚本直接不画 */
@media (prefers-reduced-motion: reduce) {
  .jx-tap.is-go { animation: none; }
}