/* ============================================================
   Clash for iOS — tutorial.css(教程页 quickstart.html 专属)
   步骤面板节奏 / 锚点定位偏移 / 步骤编号胶囊 / 目标行
   ============================================================ */

/* 步骤区整体:上方 hero 区已有 .sec 下边距,这里收紧顶部 */
.guide-body{
  padding-top:0;
}

/* 前置提示区:两条 callout 之间留呼吸 */
.guide-pre{
  margin-top:1.4rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

/* 步骤面板纵向流 */
.guide-flow{
  display:flex;
  flex-direction:column;
  gap:clamp(1.4rem,3vw,2.2rem);
}

/* 锚点跳转时给顶部导航留出空间 */
.guide-step{
  scroll-margin-top:96px;
}

/* 等宽步骤编号胶囊 */
.guide-no{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent-dark);
  background:var(--accent-tint);
  border-radius:var(--radius-pill);
  padding:.32rem .9rem;
  margin-bottom:.9rem;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}

.guide-no::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

/* 步骤目标行:紧跟 h2 的一句结果描述 */
.guide-goal{
  margin-top:.55rem;
  margin-bottom:1.2rem;
  color:var(--text-muted);
  font-size:.94rem;
  line-height:1.8;
}

/* 收尾面板按钮行 */
.guide-next-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:1.5rem;
}

@media (max-width:640px){
  .guide-step{scroll-margin-top:80px;}
  .guide-no{font-size:.7rem;padding:.28rem .78rem;}
}