/* ==========================================================================
   教程页(guide.html)专属样式
   步骤编号牌 / 步骤交接行 / 吸顶 toc 的锚点偏移 / callout 内链接
   ========================================================================== */

/* 锚点偏移:避开吸顶的步骤跳转条 */
.prose h2[id]{scroll-margin-top:72px}

/* 页头事实带间距 */
.page-head .band-strip{margin-top:32px}

/* 步骤编号牌:等宽字体细描边,与 h2 前置方块并列 */
.step-no{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  font-weight:400;
  color:var(--text-muted);
  border:1px solid var(--border);
  padding:4px 9px;
  flex:none;
}

/* 步骤交接行:每步末尾指向下一步 */
.step-next{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  padding:13px 16px;
  margin:24px 0 0;
  min-width:0;
}
.step-next .nx-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--text-muted);
  border:1px solid var(--border);
  padding:3px 8px;
  flex:none;
}
.step-next a{
  font-size:13.5px;
  min-width:0;
}

/* callout 内链接:与 prose 链接同一套虚线下划线语言 */
.callout a{
  color:var(--text);
  border-bottom:1px dashed rgba(var(--rgb-muted),.6);
  padding-bottom:1px;
}
.callout a:hover{border-bottom-color:var(--text)}

@media (max-width:640px){
  .step-next{align-items:flex-start;flex-direction:column;gap:8px}
}