换成
![]()
，位置、间距、最大宽度都和占位框一致）：
块级、宽 100%、最宽 820px、高度按图片自己的比例（不强制 16:10），同一条细线边框和 10px 圆角，没有阴影。
带图注时外面包
， 是 12px 次亮小字，图下 8px；figure 本身不加边距（和 img 一样占位） */
.g-shot-img { display: block; width: 100%; max-width: 820px; height: auto; border: 1px solid var(--g-line); border-radius: 10px; }
.g-shot-fig { margin: 0; max-width: 820px; }
.g-shot-fig figcaption { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.g-step .g-shot-img, .g-step .g-shot-fig { margin-top: 14px; }
.g-step .g-shot-img + p, .g-step .g-shot-fig + p { margin-top: 0; }
/* 动作链接（第一次使用 · 购买授权、下载站、绑定做法）：次按钮写法——透明底、细线、40px 高、10px 圆角；
悬停时线和字各提一级；外链带 ↗。一节里几个并排，窄屏自动折行。紧跟节头时往上收一截：导语和链接是同一段话，不该隔着一整个节头下边距 */
.g-acts { display: flex; flex-wrap: wrap; gap: 12px 16px; }
/* 紧跟节头的动作链接或提示块（04 的「先备份」）往上收一截：它们和导语是同一段话，不该隔着一整个节头下边距 */
.g-sec-head + .g-acts, .g-sec-head + .g-tip { margin-top: calc(-1 * clamp(8px, 1.6vw, 24px)); }
.g-sec-head + .g-tip { max-width: 48em; }
.g-act {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border: 1px solid var(--g-line-hover);
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: var(--text-2);
white-space: nowrap;
transition: var(--g-fade);
}
.g-act:hover { border-color: var(--g-line-on); color: var(--text); }
.g-act i { font-style: normal; font-size: .86em; color: var(--text-3); transition: color .18s var(--ease); }
.g-act:hover i { color: var(--text-2); }
/* ======================================================================
* 演示控件统一按钮 .mx-btn（主线 11-11 统一规范 v3；Owner：「这按钮返工，文字丑死了，毫无质感，之前的同理」）
* 用在：BIOS 分步演示（bios.*）、操作演示动画（flow.*）、U 盘视频的重播 / 播放（guide.*）、首屏转台的复位（topology.*）。
* 各组件只给按钮加 mx-btn 和自己的定位类，外观一律在这里，不在组件里改字号、边线和高度——同一套按钮在四处长得一样。
*
* 为什么这样写：
* - 图标和文字同一行（inline-flex、垂直居中、间距 8px），图标画在 ::before 上，靠 data-ic 选图：
* 图标是 CSS 蒙版（mask）里的一段 SVG，颜色取 currentColor，悬停时和字一起变亮；组件 JS 里不再塞