/* ============================================================
   setup.html 专属样式(教程页)
   步骤编号小注 / 页头信息胶囊行 / 锚点偏移 / 目录滚动高亮
   颜色一律引用 base.css 的设计令牌,不新增色值
   ============================================================ */

/* 主列底部留白(页头自带顶部间距,此处只补底部) */
.tut-main{padding-bottom:80px}

/* 页头信息胶囊行(耗时/难度/适用平台) */
.tut-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* 步骤编号小注:等宽赭石,与 kicker 同族,压在 h2 上方 */
.step-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--ochre);
  margin:2.4em 0 .55em;
}
.prose .step-kicker+h2{margin-top:0}

/* 锚点跳转预留偏移,避免标题贴顶 */
.prose section[id]{scroll-margin-top:24px}

/* 目录当前章节高亮(tutorial.js 滚动监听驱动) */
.toc-tabs a{position:relative}
.toc-tabs a.on{color:var(--cinnabar);background:var(--paper-panel-2)}
.toc-tabs a.on::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--cinnabar);
}

/* 首个章节与上方目录的衔接 */
.tut-intro{margin-bottom:1.6em}

@media (prefers-reduced-motion:reduce){
  .toc-tabs a{transition:none}
}