/**
 * MythosX Anvil 使用教程 · 操作演示动画样式（F 组件，gf- 前缀）。
 *
 * 业务定位：第二章 04、07–11 的模拟画面（应用窗口、文件夹、目标机控制台屏、云端、键帽）和播放器的分段进度；
 * 播放器按钮的外观在 guide.css 的统一按钮 .mx-btn（按钮规范 v3），这里只管间距。
 *
 * 为什么这样写：
 *   - 11-11 返工后的标准（Owner：质感差、意义不明）：一段只讲一个动作；软件界面画成真的应用窗口，只画草稿给了原文的元素并放大做精，
 *     不用灰条和空框凑界面（第一版那套抽象主机、占位条的样式已删）；
 *     画面里的线比页面细线亮一档（--gf-ink），黑底上才看得清；界面里的「选中」用中性的 --text 色，暖金留给演示标注；
 *   - 演示标注（高亮框、点击扩散圈、下沿指示线、对勾、光标）和 bios.css 同一种画法，两个演示在同一页上看起来是一套；
 *   - 尺寸写成 calc(N * var(--u))，--u = 画框宽 / 设计宽（宽屏 800、窄屏 420），文字用 max(11px, …) 兜住最小字号；
 *     宽于 560px 画面 16:10、并排；窄于 560px 画面 4:5、上下叠放；
 *   - 动效只用无回弹的减速曲线；脚本画终态时给画布加 is-instant，过渡和动画一律关掉（减少动态效果、暂停、换屏）。
 */

.gf {
  --gf-ease: var(--ease, cubic-bezier(.2, 0, 0, 1));
  /* 控件规范 v2 的令牌：细线、悬停线、选中线；过渡只动颜色、边线和透明度 */
  --gf-line: rgba(240, 238, 233, .09);
  --gf-hover: rgba(240, 238, 233, .2);
  --gf-pick: rgba(240, 238, 233, .55);
  --gf-trans: color .18s var(--gf-ease), border-color .18s var(--gf-ease), opacity .18s var(--gf-ease);
  /* 画面里的线：黑底上比页面细线亮一档（--gf-ink 轮廓、--gf-ink2 接口和强调轮廓） */
  --gf-ink: rgba(240, 238, 233, .2);
  --gf-ink2: rgba(240, 238, 233, .34);
  container-type: inline-size;
  max-width: 820px;
}
/* 焦点环：播放器按钮都是 .mx-btn，用 guide.css 的统一焦点环（2px 暖金、外扩 2px）；这里不再写 button 规则 */

/* 画框：一条细线围住画面，没有投影 -------------------------------------- */
.gf-frame { container-type: inline-size; position: relative; overflow: hidden; border: 1px solid var(--gf-line); border-radius: 10px; background: #070708; }
.gf-stage { --u: calc(100cqw / 800); position: relative; aspect-ratio: 16 / 10; }
@container (width < 560px) {
  .gf-stage { --u: calc(100cqw / 420); aspect-ratio: 4 / 5; }
}

/* 画布：整块铺满画框，内容居中；默认字号、字色 */
.gf-cv {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: calc(var(--u) * 30) calc(var(--u) * 36);
  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) { .gf-cv { padding: calc(var(--u) * 22) calc(var(--u) * 20); } }
/* 演示标注的高亮框（::after）以目标自身为参照，所以能当目标的部件都要 position: relative；第二版部件各自在下面声明 */
.gf-box, .gf-pane, .gf-pane-in, .gf-cloud { position: relative; min-width: 0; }

/* 版式：单台（solo）· 两台并排（duo）· 云端—调试机—目标机（trio） */
.gf-l-solo > .gf-pane { width: 88%; }
.gf-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) calc(var(--u) * 56) minmax(0, 1fr); align-items: end; width: 100%; }
.gf-trio { display: grid; grid-template-columns: minmax(0, .46fr) calc(var(--u) * 36) minmax(0, 1.5fr) calc(var(--u) * 36) minmax(0, 1fr); align-items: end; width: 100%; }
@container (width < 560px) {
  .gf-l-solo > .gf-pane { width: 100%; }
  .gf-duo, .gf-trio { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-items: stretch; }
  /* 叠放时目标机缩小一档、靠左，和上面的调试机左边对齐 */
  .gf-duo > .gf-pane:last-child, .gf-trio > .gf-pane:last-child { width: 70%; }
  .gf-trio > .gf-pane:nth-child(3) { width: 86%; }
}

/* 机器 ------------------------------------------------------------------- */
/* 一栏：上面等宽小字写机器名，下面是这台机器上的画面 */
.gf-pane { display: flex; flex-direction: column; }
.gf-pane-l { margin-bottom: calc(var(--u) * 8); font: 500 max(11px, calc(var(--u) * 12)) / 1.3 var(--mono); letter-spacing: .04em; color: var(--text-3); white-space: nowrap; }

/* 图标：线宽固定，颜色跟字色 */
.gf-ic { display: inline-flex; flex: none; }
.gf-ic svg { width: 100%; height: 100%; overflow: visible; }
.gf-ic-screen { width: calc(var(--u) * 16); height: calc(var(--u) * 13); }
.gf-ic-usb { width: calc(var(--u) * 26); height: calc(var(--u) * 10); }
.gf-ic-cloud { width: calc(var(--u) * 20); height: calc(var(--u) * 13); }
/* 小对勾：1.5px 线宽，--text 色；平时不占眼，is-ticked 时出现 */
.gf-tk { width: max(10px, calc(var(--u) * 11)); height: max(10px, calc(var(--u) * 11)); margin-left: auto; color: var(--text); opacity: 0; transition: opacity .2s var(--gf-ease); }
.gf-tk svg { stroke-width: 1.5; }
.is-ticked > .gf-tk { opacity: 1; }

/* 依次落进来（04 文件夹里的三个文件）：从上方淡入落位 */
.gf-drop { opacity: 0; transform: translateY(calc(var(--u) * -10)); transition: opacity .3s var(--gf-ease), transform .3s var(--gf-ease); }
.gf-drop.is-in { opacity: 1; transform: none; }

/* 输入框里的插入点（字段逐字改时闪；控制台屏的方块光标也用同一个闪烁节奏） */
.gf-caret { display: none; flex: none; width: 1px; height: 1.15em; margin-left: 1px; background: var(--text); animation: gf-blink .8s steps(1) infinite; }
@keyframes gf-blink { 50% { opacity: 0; } }

/* 云端 */
.gf-cloud { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6); color: var(--text-2); transition: color .3s var(--gf-ease); }
.gf-cloud .gf-ic-cloud { width: calc(var(--u) * 56); height: calc(var(--u) * 36); }
.gf-cloud.is-on { color: var(--text); }
.gf-cloud .gf-tk { margin: 0; }
.gf-pane:has(> .gf-pane-in > .gf-cloud) { align-self: center; }

/* 连线：宽屏是横线，窄屏叠放时是竖线；没连上是虚线，连上是实线。
   必须自己 position:relative，否则里面绝对定位的线和跑动的亮点会以画布为参照、横贯整个画面（踩过一次） */
.gf-link { position: relative; align-self: end; height: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 78); }
.gf-link-l { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: 0; border-top: 1px dashed var(--gf-ink2); }
.gf-link.is-on .gf-link-l { border-top-style: solid; }
/* 连线上跑的一小段亮线（数据在两台机器之间走） */
.gf-pk { position: absolute; top: -1px; left: calc(var(--u) * 6); width: calc(var(--u) * 16); height: 3px; background: var(--text); animation: gf-pk .9s var(--gf-ease) both; }
.gf-pk.is-back { animation-direction: reverse; }
@keyframes gf-pk { 0% { left: calc(var(--u) * 6); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - var(--u) * 22); opacity: 0; } }
/* 竖向那一版（窄屏叠放时用，见下面的容器查询）：@keyframes 放在查询外面，查询里只切动画名 */
@keyframes gf-pk-v { 0% { top: calc(var(--u) * 4); opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - var(--u) * 14); opacity: 0; } }
.gf-trio .gf-link { margin-bottom: calc(var(--u) * 66); }
@container (width < 560px) {
  .gf-link, .gf-trio .gf-link { align-self: stretch; height: calc(var(--u) * 30); margin: 0; }
  .gf-link-l { left: calc(var(--u) * 40); right: auto; top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); border-top: 0; border-left: 1px dashed var(--gf-ink2); }
  .gf-link.is-on .gf-link-l { border-left-style: solid; }
  .gf-pk { top: calc(var(--u) * 4); left: calc(var(--u) * 40 - 1px); width: 3px; height: calc(var(--u) * 10); animation-name: gf-pk-v; }
  /* 云端一栏叠放时横排：图标在机器名右边，省一行高度 */
  .gf-trio > .gf-pane:first-child { flex-direction: row; align-items: center; gap: calc(var(--u) * 12); }
  .gf-trio > .gf-pane:first-child .gf-pane-l { margin: 0; }
  .gf-trio .gf-cloud { flex-direction: row; padding: 0; }
  .gf-trio .gf-cloud .gf-ic-cloud { width: calc(var(--u) * 40); height: calc(var(--u) * 26); }
}

/* 08-e：目标机这边两台显示器共用一个位置，轮流接上（从右边滑进、滑出） */
.gf-swap { opacity: 0; transform: translateX(calc(var(--u) * 24)); transition: opacity .45s var(--gf-ease), transform .5s var(--gf-ease); }
.gf-swap.is-in { opacity: 1; transform: none; }

/* ======================================================================
 * 第二版部件（07–11，11-11 返工；Owner：「7-11 动画现在太劣质了，质感很差意义不明」）
 * 标准：一眼看懂、像真的应用窗口、文字屏用控制台质感、按键画真实键帽；不用灰条和空框凑界面。
 * 画面里只有草稿给了原文的元素，所以每个元素都放大、做精：窗口有标题栏和窗口按钮，卡片和按钮有悬停、按下、完成三种真实状态。
 * 画面里的「选中」「完成」用中性的亮色，暖金只留给演示标注（高亮框、对勾、指示线）。
 * ==================================================================== */

/* 单台的版式宽度：窗口七成宽、控制台屏六成宽、键帽按自身大小；窄屏一律铺满 */
.gf-l-solo > .gf-pane:has(.gf-win) { width: 70%; }
.gf-l-solo > .gf-pane-con { width: 58%; }
.gf-l-solo > .gf-pane:has(.gf-keycap) { width: auto; }
@container (width < 560px) {
  .gf-l-solo > .gf-pane:has(.gf-win), .gf-l-solo > .gf-pane-con { width: 100%; }
}

/* 应用窗口：细线外框、10 单位圆角；标题栏一行程序名 + 右侧三个窗口按钮字形；内容区留足内边距 */
.gf-win { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(240, 238, 233, .16); border-radius: calc(var(--u) * 10); background: #0d0d10; }
.gf-win-bar { display: flex; align-items: center; justify-content: space-between; height: max(26px, calc(var(--u) * 34)); padding: 0 calc(var(--u) * 14); border-bottom: 1px solid rgba(240, 238, 233, .07); border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0; background: #121216; }
.gf-win-t { font: 500 max(11px, calc(var(--u) * 12.5)) / 1 var(--sans); letter-spacing: .02em; color: var(--text-2); }
.gf-win-ctl { display: inline-flex; width: max(32px, calc(var(--u) * 42)); height: max(8px, calc(var(--u) * 10)); color: var(--text-3); }
.gf-win-ctl svg { width: 100%; height: 100%; }
.gf-win-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 14); min-height: calc(var(--u) * 150); padding: calc(var(--u) * 24) calc(var(--u) * 26); }
/* 窗口里的小节名（例如 SMBIOS）：等宽小字，退到附属层 */
.gf-win-h { font: 600 max(11px, calc(var(--u) * 13)) / 1 var(--mono); letter-spacing: .08em; color: var(--text-3); }
.gf-row-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.gf-row-end { display: flex; justify-content: flex-end; }
@container (width < 560px) {
  .gf-win-body { padding: calc(var(--u) * 16) calc(var(--u) * 14); }
}

/* 选项卡片：大号标题；悬停线提亮加一层极淡的底，按下压暗下沉 1px，选中线最亮（不另画对勾徽标，演示标注会打对勾） */
.gf-cards { display: grid; gap: calc(var(--u) * 14); }
.gf-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gf-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 10); }
.gf-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 8);
  min-height: max(56px, calc(var(--u) * 100)); padding: calc(var(--u) * 16) calc(var(--u) * 20);
  border: 1px solid rgba(240, 238, 233, .16); border-radius: calc(var(--u) * 8); background: rgba(240, 238, 233, .015); color: var(--text-2);
  transition: border-color .2s var(--gf-ease), background-color .2s var(--gf-ease), color .2s var(--gf-ease), transform .12s var(--gf-ease);
}
.gf-card-t { font: 600 max(15px, calc(var(--u) * 26)) / 1 var(--mono); letter-spacing: .02em; }
.gf-cards-3 .gf-card { min-height: max(48px, calc(var(--u) * 72)); padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.gf-cards-3 .gf-card-t { font: 500 max(12px, calc(var(--u) * 15)) / 1.3 var(--sans); letter-spacing: 0; }
.gf-card-s { font: 500 max(11px, calc(var(--u) * 12)) / 1 var(--mono); letter-spacing: .08em; color: var(--text-3); }
.gf-card.is-hover { border-color: rgba(240, 238, 233, .34); background: rgba(240, 238, 233, .04); color: var(--text); }
.gf-card.is-down { background: rgba(240, 238, 233, .08); transform: translateY(1px); }
.gf-card.is-on { border-color: rgba(240, 238, 233, .72); background: rgba(240, 238, 233, .05); color: var(--text); }

/* 窗口里的主按钮：实心浅底深字；悬停全白，按下压暗下沉 1px，忙时左边转圈，完成后左边打勾（is-finished；不能叫 is-done——那是演示标注「已打勾」的类名，会让高亮框清不掉） */
.gf-pbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 9);
  height: max(30px, calc(var(--u) * 44)); padding: 0 calc(var(--u) * 24); border-radius: calc(var(--u) * 7);
  background: #e9e6df; color: #121214; font: 600 max(12px, calc(var(--u) * 15)) / 1 var(--sans); letter-spacing: .03em; white-space: nowrap;
  transition: background-color .15s var(--gf-ease), transform .12s var(--gf-ease);
}
.gf-pbtn.is-hover { background: #fff; }
.gf-pbtn.is-down { background: #cfccc5; transform: translateY(1px); }
.gf-spin { display: none; flex: none; width: max(11px, calc(var(--u) * 15)); height: max(11px, calc(var(--u) * 15)); border: 2px solid rgba(18, 18, 20, .22); border-top-color: #121214; border-radius: 50%; animation: gf-spin .8s linear infinite; }
.gf-pbtn.is-busy .gf-spin { display: block; }
.gf-pbtn-ok { display: none; width: max(12px, calc(var(--u) * 15)); height: max(12px, calc(var(--u) * 15)); color: #121214; }
.gf-pbtn-ok svg { stroke-width: 2.2; }
.gf-pbtn.is-finished .gf-pbtn-ok { display: inline-flex; }
@keyframes gf-spin { to { transform: rotate(360deg); } }

/* 带标签的字段：标签小字在上；只读值是一块很淡的底、没有输入框边；输入框悬停线提亮、聚焦线最亮，改字时有插入点 */
.gf-f2 { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.gf-f2-l { font: 500 max(11px, calc(var(--u) * 12)) / 1 var(--sans); letter-spacing: .04em; color: var(--text-3); }
/* 字段被高亮时框外多留一点（标签在框里，默认 5 单位会贴着标签字），云端那栏的机器名和云图标居中对齐 */
.gf-cv .gf-f2.is-target::after { inset: calc(var(--u) * -10) calc(var(--u) * -8); }
.gf-pane:has(> .gf-pane-in > .gf-cloud) .gf-pane-l { text-align: center; }
.gf-f2-box { display: flex; align-items: center; height: max(28px, calc(var(--u) * 42)); padding: 0 calc(var(--u) * 14); border: 1px solid rgba(240, 238, 233, .2); border-radius: calc(var(--u) * 6); background: #09090b; font: 500 max(11px, calc(var(--u) * 15)) / 1 var(--mono); letter-spacing: .02em; color: var(--text); white-space: nowrap; overflow: hidden; transition: border-color .2s var(--gf-ease); }
.gf-f2-box.is-ro { border-color: transparent; background: rgba(240, 238, 233, .04); color: var(--text-2); }
.gf-f2.is-hover .gf-f2-box { border-color: rgba(240, 238, 233, .38); }
.gf-f2.is-focus .gf-f2-box { border-color: rgba(240, 238, 233, .72); }
.gf-f2.is-edit .gf-caret { display: block; }
@container (width < 560px) {
  .gf-f2-box { padding: 0 calc(var(--u) * 8); letter-spacing: 0; }
}
/* 合法规则那一行：通过前对勾很淡，通过后整行变亮 */
.gf-check { display: flex; align-items: center; gap: calc(var(--u) * 8); font: 400 max(11px, calc(var(--u) * 12.5)) / 1.3 var(--sans); color: var(--text-3); transition: color .25s var(--gf-ease); }
.gf-check-ok { width: max(11px, calc(var(--u) * 14)); height: max(11px, calc(var(--u) * 14)); opacity: .3; }
.gf-check-ok svg { stroke-width: 2; }
.gf-check.is-on { color: var(--text); }
.gf-check.is-on .gf-check-ok { opacity: 1; }

/* 目标机的控制台屏：显示器（细线边框 + 支架），屏幕纯黑，等宽字一行一行；之前的行压暗，当前行最亮、末尾方块光标在闪 */
.gf-mon2 { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.gf-mon2-bezel { position: relative; width: 100%; padding: calc(var(--u) * 7); border: 1px solid rgba(240, 238, 233, .18); border-radius: calc(var(--u) * 9); background: #0b0b0d; }
.gf-mon2-neck { width: 1px; height: calc(var(--u) * 14); background: rgba(240, 238, 233, .18); }
.gf-mon2-base { width: 30%; height: max(2px, calc(var(--u) * 3)); border-radius: 2px; background: rgba(240, 238, 233, .14); }
.gf-con-scr {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 9);
  aspect-ratio: 16 / 10; padding: calc(var(--u) * 20) calc(var(--u) * 22); border-radius: calc(var(--u) * 3); background: #000; overflow: hidden;
  font: 500 max(11px, calc(var(--u) * 16)) / 1.35 var(--mono); letter-spacing: .02em;
}
/* 还没有当前行时（07 刚进 U 盘环境），左上角只有一个闪烁的光标 */
.gf-con-scr:not(:has(.is-cur))::before { content: ""; width: .6em; height: 1.15em; background: var(--text); animation: gf-blink 1s steps(1) infinite; }
.gf-con-l { position: relative; display: flex; align-items: baseline; gap: calc(var(--u) * 10); white-space: nowrap; color: rgba(240, 238, 233, .36); }
.gf-con-l.is-next { display: none; }
.gf-con-p { color: rgba(240, 238, 233, .3); }
.gf-con-l.is-cur { color: #f4f1ea; }
.gf-con-l.is-cur .gf-con-p { color: var(--text-2); }
.gf-con-l.is-cur .gf-con-t::after { content: ""; display: inline-block; width: .6em; height: 1.1em; margin-left: .2em; vertical-align: -.2em; background: currentColor; animation: gf-blink 1s steps(1) infinite; }

/* 08-e：两台小显示器共用一个位置轮流接上；屏幕中间写它是谁（DONER / 显示设备） */
.gf-duo-edid .gf-slot { display: grid; }
.gf-duo-edid .gf-slot > * { grid-area: 1 / 1; }
.gf-mon3 { position: relative; display: flex; flex-direction: column; align-items: center; }
.gf-mon3-scr { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border: 1px solid rgba(240, 238, 233, .2); border-radius: calc(var(--u) * 6); background: #050506; }
.gf-mon3-plate { position: absolute; top: 0; left: 0; right: 0; display: grid; place-items: center; aspect-ratio: 16 / 10; font: 600 max(11px, calc(var(--u) * 15)) / 1 var(--mono); letter-spacing: .06em; color: var(--text); }
.gf-mon3-neck { width: 1px; height: calc(var(--u) * 10); background: rgba(240, 238, 233, .2); }
.gf-mon3-base { width: 30%; height: max(2px, calc(var(--u) * 3)); border-radius: 2px; background: rgba(240, 238, 233, .14); }
/* 采集记录：出现时淡入上移，后面小对勾 */
.gf-recs { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.gf-rec { display: flex; align-items: center; gap: calc(var(--u) * 10); height: max(26px, calc(var(--u) * 38)); padding: 0 calc(var(--u) * 12); border: 1px solid rgba(240, 238, 233, .12); border-radius: calc(var(--u) * 6); font: 500 max(11px, calc(var(--u) * 14)) / 1 var(--mono); color: var(--text); opacity: 0; transform: translateY(calc(var(--u) * 4)); transition: opacity .35s var(--gf-ease), transform .35s var(--gf-ease); }
.gf-rec.is-on { opacity: 1; transform: none; }
.gf-rec .gf-ic-screen { color: var(--text-2); }
/* Guest 一栏：Guest 看到的是谁 */
.gf-guest2 { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 14); border: 1px solid rgba(240, 238, 233, .16); border-radius: calc(var(--u) * 6); opacity: 0; transition: opacity .45s var(--gf-ease); }
.gf-guest2.is-in { opacity: 1; }
.gf-guest2-l { font: 600 max(11px, calc(var(--u) * 12)) / 1 var(--mono); letter-spacing: .08em; color: var(--text-3); }
.gf-guest2-v { font: 600 max(11px, calc(var(--u) * 14)) / 1 var(--mono); color: var(--text); }
.gf-guest2 .gf-ic-screen { color: var(--text-2); }
.gf-guest2-tpm { gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 16) calc(var(--u) * 20); }

/* 08-f：TPM 芯片（大号）：原样是实线芯片；可改外观右上角一枚笔形徽标；隐藏时整颗变淡、轮廓变虚线 */
.gf-chip2 { position: relative; display: grid; place-items: center; width: max(56px, calc(var(--u) * 84)); height: max(56px, calc(var(--u) * 84)); color: var(--text); transition: opacity .45s var(--gf-ease); }
.gf-chip2-art { position: absolute; inset: 0; }
.gf-chip2-art svg { width: 100%; height: 100%; }
.gf-chip2-l { position: relative; font: 700 max(10px, calc(var(--u) * 14)) / 1 var(--mono); letter-spacing: .06em; }
.gf-chip2-pen { position: absolute; right: calc(var(--u) * -6); top: calc(var(--u) * -6); width: max(16px, calc(var(--u) * 24)); height: max(16px, calc(var(--u) * 24)); padding: max(3px, calc(var(--u) * 5)); border-radius: 50%; background: var(--text); color: #0d0d10; opacity: 0; transform: scale(.6); transition: opacity .25s var(--gf-ease), transform .28s var(--gf-ease); }
.gf-chip2-pen svg { width: 100%; height: 100%; }
.gf-chip2.is-custom .gf-chip2-pen { opacity: 1; transform: none; }
.gf-chip2.is-gone { opacity: .22; }
.gf-chip2.is-gone .gf-chip2-art svg * { stroke-dasharray: 3 3; }

/*
 * 窄屏（画面 4:5、上下叠放）：
 *   - 08-e 上面窗口、下面目标机，再加 Guest 一栏会超出画面：目标机这边改成显示器和 Guest 左右并排，窗口内容区也收矮；
 *   - 08-f 三张卡片并排时每张只有 80 来像素宽，「自由配置外观」要折两行：改成上下三行；
 *   - 字段里的 UUID 在 298px 宽的画面里刚好贴边：字距收一点。
 */
@container (width < 560px) {
  .gf-duo-edid .gf-win-body { min-height: 0; }
  .gf-duo-edid > .gf-pane:last-child > .gf-pane-in { display: flex; align-items: center; gap: calc(var(--u) * 14); }
  .gf-duo-edid .gf-slot { flex: 0 0 52%; }
  .gf-duo-edid .gf-guest2 { flex: 1; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 8); margin-top: 0; }
  .gf-cards-3 { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 6); }
  .gf-cards-3 .gf-card { min-height: max(34px, calc(var(--u) * 44)); }
  .gf-f2-box { letter-spacing: -.02em; }
}

/* 04（11-11 返工，和 07–11 同一套标准）--------------------------------- */
/* 窗口里的小节名（制作区）也可能被高亮、打勾，要能当演示标注的参照 */
.gf-txt { position: relative; }
/* 文件夹窗口：标题栏只有文件夹图标（文件夹名草稿没写，不编）；内容区三个文件居中排一行 */
.gf-fwin-ic { width: max(14px, calc(var(--u) * 18)); height: max(12px, calc(var(--u) * 15)); color: var(--text-2); }
.gf-fwin-body { min-height: calc(var(--u) * 190); justify-content: center; }
.gf-ftiles { display: flex; justify-content: center; gap: calc(var(--u) * 30); }
/* 文件：大号文档图标，图标上印类型（实心浅底深字的小签），下面是名字；悬停一层极淡的底，按下压暗下沉，选中边线提亮 */
.gf-ftile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10);
  width: max(76px, calc(var(--u) * 124)); padding: calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 12);
  border: 1px solid transparent; border-radius: calc(var(--u) * 8); color: var(--text-2);
  transition: opacity .3s var(--gf-ease), transform .3s var(--gf-ease), background-color .15s var(--gf-ease), border-color .15s var(--gf-ease);
}
.gf-ftile-art { position: relative; display: block; width: max(34px, calc(var(--u) * 56)); height: max(41px, calc(var(--u) * 67)); }
.gf-ftile-art svg { width: 100%; height: 100%; }
.gf-ftile-ty { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); padding: max(2px, calc(var(--u) * 3)) max(4px, calc(var(--u) * 6)); border-radius: 3px; background: var(--text); color: #0d0d10; font: 700 max(9px, calc(var(--u) * 11)) / 1 var(--mono); letter-spacing: .04em; }
.gf-ftile-n { font: 500 max(11px, calc(var(--u) * 13)) / 1.25 var(--sans); color: var(--text); text-align: center; white-space: nowrap; }
.gf-ftile.is-hover { border-color: rgba(240, 238, 233, .14); background: rgba(240, 238, 233, .04); }
.gf-ftile.is-down { background: rgba(240, 238, 233, .09); transform: translateY(1px); }
.gf-ftile.is-on { border-color: rgba(240, 238, 233, .42); background: rgba(240, 238, 233, .07); color: var(--text); }
/* 制作区：入口卡片和制作区画面叠在同一格，点进去时交叉淡入淡出 */
.gf-zone2 { position: relative; display: grid; min-height: calc(var(--u) * 176); }
.gf-zhome, .gf-zview { grid-area: 1 / 1; display: flex; flex-direction: column; gap: calc(var(--u) * 14); transition: opacity .35s var(--gf-ease); }
.gf-zhome { align-items: center; justify-content: center; }
.gf-zview { opacity: 0; }
.gf-zone2.is-in .gf-zhome { opacity: 0; }
.gf-zone2.is-in .gf-zview { opacity: 1; }
/* 制作区的小节名是「进入制作区」这一屏的结果，会被高亮、打勾：只包住字，不撑满整行 */
.gf-zview > .gf-win-h { align-self: flex-start; }
/* 两行进度一起被高亮时框外多留一点，不贴着「写入 / 校验」两个字 */
.gf-cv .gf-progs.is-target::after { inset: calc(var(--u) * -10) calc(var(--u) * -12); }
.gf-zcard { flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 18); width: 72%; min-height: max(56px, calc(var(--u) * 96)); }
.gf-zcard-ic { width: calc(var(--u) * 46); height: calc(var(--u) * 18); }
.gf-zcard .gf-card-t { font: 500 max(14px, calc(var(--u) * 20)) / 1 var(--sans); letter-spacing: .02em; }
/* U 盘一行：图标 + 名字；悬停、按下同卡片；选中边线最亮、左侧一条亮线（界面里的选中用中性色，暖金留给演示标注） */
.gf-drive {
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * 14);
  height: max(36px, calc(var(--u) * 54)); padding: 0 calc(var(--u) * 18);
  border: 1px solid rgba(240, 238, 233, .16); border-left-width: 2px; border-radius: calc(var(--u) * 7);
  font: 500 max(12px, calc(var(--u) * 15)) / 1 var(--sans); color: var(--text-2);
  transition: border-color .2s var(--gf-ease), background-color .2s var(--gf-ease), color .2s var(--gf-ease);
}
.gf-drive-ic { width: calc(var(--u) * 40); height: calc(var(--u) * 15); }
.gf-drive.is-hover { border-color: rgba(240, 238, 233, .34); background: rgba(240, 238, 233, .04); color: var(--text); }
.gf-drive.is-down { background: rgba(240, 238, 233, .08); }
.gf-drive.is-on { border-color: rgba(240, 238, 233, .72); border-left-color: var(--text); background: rgba(240, 238, 233, .05); color: var(--text); }
/* 主按钮不可点（还没选 U 盘）：压暗，选中 U 盘后过渡到正常 */
.gf-pbtn.is-off { background: rgba(233, 230, 223, .18); color: rgba(240, 238, 233, .45); }
/* 写入 / 校验：标签、细轨道、等宽百分比；走完后百分比换成对勾、整行变亮 */
.gf-progs { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 6); }
.gf-prog2 { display: grid; grid-template-columns: calc(var(--u) * 44) minmax(0, 1fr) calc(var(--u) * 48); align-items: center; gap: calc(var(--u) * 14); font: 500 max(11px, calc(var(--u) * 13)) / 1 var(--sans); color: var(--text-2); transition: color .2s var(--gf-ease); }
.gf-prog2-t { position: relative; display: block; height: max(3px, calc(var(--u) * 4)); overflow: hidden; border-radius: 2px; background: rgba(240, 238, 233, .1); }
.gf-prog2-f { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 1s linear; }
.gf-prog2.is-full .gf-prog2-f { transform: none; }
.gf-prog2-n { grid-column: 3; grid-row: 1; justify-self: end; font: 500 max(11px, calc(var(--u) * 13)) / 1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.gf-prog2-ok { grid-column: 3; grid-row: 1; justify-self: end; width: max(12px, calc(var(--u) * 15)); height: max(12px, calc(var(--u) * 15)); opacity: 0; color: var(--text); }
.gf-prog2-ok svg { stroke-width: 2; }
.gf-prog2.is-fin { color: var(--text); }
.gf-prog2.is-fin .gf-prog2-n { opacity: 0; }
.gf-prog2.is-fin .gf-prog2-ok { opacity: 1; }
@container (width < 560px) {
  .gf-ftiles { gap: calc(var(--u) * 10); }
  .gf-zcard { width: 100%; }
}

/* 09：云端大一号，握手回来后变亮、打小对勾 */
.gf-trio .gf-cloud .gf-ic-cloud { width: calc(var(--u) * 66); height: calc(var(--u) * 42); }
.gf-trio .gf-cloud .gf-tk { width: max(12px, calc(var(--u) * 15)); height: max(12px, calc(var(--u) * 15)); }

/* 11：真实键帽——底座（深）+ 顶面（浅一档）两层平色，底座露出的一截就是键的侧壁；按下时顶面下沉 8 单位再弹起 */
.gf-key-stage { padding: calc(var(--u) * 26) calc(var(--u) * 40); }
.gf-keycap { position: relative; width: max(132px, calc(var(--u) * 230)); height: max(84px, calc(var(--u) * 146)); border: 1px solid rgba(240, 238, 233, .16); border-radius: calc(var(--u) * 18); background: #08080a; }
.gf-keycap-top {
  position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 7); bottom: calc(var(--u) * 20);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 16) calc(var(--u) * 20);
  border: 1px solid rgba(240, 238, 233, .14); border-radius: calc(var(--u) * 13); background: #1d1d22;
}
.gf-keycap-t { font: 500 max(13px, calc(var(--u) * 21)) / 1 var(--sans); letter-spacing: .02em; color: var(--text); }
.gf-keycap-g { align-self: flex-end; font: 400 max(14px, calc(var(--u) * 26)) / 1 var(--sans); color: var(--text-2); }
.gf-keycap.is-press .gf-keycap-top { animation: gf-keypress .46s var(--gf-ease) var(--n, 1); }
@keyframes gf-keypress { 0%, 100% { transform: none; } 30%, 55% { transform: translateY(calc(var(--u) * 9)); } }

/* 演示标注（站点强调色，和 bios.css 同一种画法）---------------------------- */
/* 高亮框：目标外面一圈 2px 暖金，再外一圈 1px 深色描边；没有投影和光晕 */
.gf-cv .is-target::after {
  content: ""; position: absolute; z-index: 4; inset: calc(var(--u) * -5); pointer-events: none;
  border: 2px solid var(--accent); border-radius: calc(var(--u) * 7);
  outline: 1px solid rgba(0, 0, 0, .55);
  animation: gf-fade .3s var(--gf-ease) both;
}
/* 对勾：目标右下角一个暖金实心圆加深色勾（这一屏的终点） */
.gf-ok {
  --ok: clamp(12px, calc(var(--u) * 18), 20px);
  position: absolute; z-index: 7; right: calc(var(--ok) / -2 - var(--u) * 5); bottom: calc(var(--ok) / -2 - var(--u) * 5);
  width: var(--ok); height: var(--ok); border-radius: 50%; background: var(--accent);
  animation: gf-pop .28s var(--gf-ease) both;
}
.gf-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 gf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* 光标：指尖坐标由脚本给，移动时长按节拍；箭头外一圈 1px 深色只为在亮处也看得见 */
.gf-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(--gf-ease);
}
.gf-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%); }
/* 点击提示：一圈细线从光标处向外扩散后淡出 */
.gf-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: gf-ripple .35s var(--gf-ease) both;
}
@keyframes gf-ripple { 0% { opacity: 1; transform: scale(.25); } 55% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } }
/* 值变了以后下沿一条 2px 暖金指示线闪一下 */
.gf-uline { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--u) * -4); height: 2px; background: var(--accent); pointer-events: none; animation: gf-uline .45s var(--gf-ease) both; }
@keyframes gf-uline { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gf-fade { from { opacity: 0; } to { opacity: 1; } }
/* 终态（减少动态效果、暂停、换屏）：过渡和动画一律关掉，直接是结果 */
.gf-cv.is-instant *, .gf-cv.is-instant *::before, .gf-cv.is-instant *::after { animation: none !important; transition: none !important; }

/* 播放器控件（按钮规范 v3）------------------------------------------------ */
/* 按钮外观、控制条与步数的版式都在 guide.css（.mx-btn / .mx-ctl / .mx-step），和 BIOS 演示同一套；这里只管分段进度和间距。
   播放器的类名一律 gf-cb- 前缀（control bar），不和画面里的部件重名 */
/* 分段进度：每屏一段，段间 3px；当前段里一条暖金从左往右匀速填满（演示 + 停留），可暂停 */
.gf-prog { display: flex; gap: 3px; margin-top: 12px; }
.gf-prog i { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--gf-line); }
.gf-prog i b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* 减少动态效果：不续播、不画进度动画，当前段直接是满的，作为静态的当前指示 */
.gf.is-static .gf-prog i.is-on b { transform: none; }
/* 控制条：画框（或分段进度）下面 14px */
.gf-cb { margin-top: 14px; }

/* 英文版的演示标签比中文长：窄屏下 nowrap 会把文字撑出窗口，这里允许换行，并把 ID 类字符串收紧字距（只在英文页生效） */
html[lang="en-US"] .gf-ftile-n, html[lang="en-US"] .gf-drive-n { white-space: normal; text-wrap: balance; }
html[lang="en-US"] .gf-f2-box, html[lang="en-US"] .gf-field-v { letter-spacing: -.02em; }
/* 英文版的进度标签（写入 / 校验）比中文长：宽度随文字，不压在进度条上（只在英文页生效） */
html[lang="en-US"] .gf-prog2-l { width: auto; min-width: max-content; }
/* 英文版的控制台屏：英文状态行比中文长，nowrap 下会被屏幕右边裁掉；允许行内折行（必要时在长串中间断开），
   提示符与文字仍是一行的两栏（只在英文页生效） */
html[lang="en-US"] .gf-con-l { white-space: normal; max-width: 100%; }
html[lang="en-US"] .gf-con-t { min-width: 0; overflow-wrap: anywhere; }
/* 折行后行数变多：英文屏内行高与行距略收，让行数不多的屏在 360 宽也放得下（屏幕比例不变；
   第二章双显示器那段的小屏仍放不下，要靠缩短英文，见 work/E3/BREAKPOINT.md） */
html[lang="en-US"] .gf-con-scr { line-height: 1.25; row-gap: calc(var(--u) * 5); }