/* ============================================================
   Clash for Linux — tutorial.css(quickstart.html 专属)
   教程页头部 / 步骤流程条 / 步骤区块 / 收尾卡片
   ============================================================ */

/* ---------- 页面头部 ---------- */
.tut-head{
  padding-top:64px;
  padding-bottom:12px;
}
.tut-head h1{
  margin-top:12px;
  max-width:860px;
}
.tut-lede{
  margin-top:18px;
  max-width:700px;
  font-size:16.5px;
  line-height:1.8;
  color:var(--ink-muted);
}
.tut-lede a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tut-lede a:hover{color:var(--ink);}
.tut-chips{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tut-callout{
  margin-top:28px;
  max-width:860px;
}
.tut-toc{
  margin-top:28px;
}

/* ---------- 步骤流程条(装饰) ---------- */
.flow-strip{
  margin-top:20px;
  max-width:860px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-muted);
}
.fs-step{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.fs-no{
  color:var(--ink);
  font-weight:700;
  flex-shrink:0;
}
.fs-arrow{
  color:var(--ink-muted);
  flex-shrink:0;
}

/* ---------- 锚点定位:避开吸顶页头 ---------- */
main [id]{
  scroll-margin-top:calc(var(--head-h) + 20px);
}

/* ---------- 步骤区块 ---------- */
.step-sec{
  padding-top:56px;
  padding-bottom:8px;
}
.step-sec--last{
  padding-bottom:64px;
}
.step-head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.step-no{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  flex-shrink:0;
}
.step-title{
  font-size:clamp(22px,2.6vw,28px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.3;
  min-width:0;
}
.step-body{
  margin-top:22px;
  max-width:860px;
}
.step-body .callout{
  margin-top:1.4em;
}

/* ---------- 收尾三卡 ---------- */
.after-cards{
  margin-top:32px;
}
.after-cards .card h3{
  font-size:17px;
}
.card-note{
  margin-top:10px;
  font-size:14px;
  line-height:1.75;
  color:var(--ink-muted);
}
.go-link{
  display:inline-block;
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  color:var(--accent-dark);
  transition:color .12s ease;
}
.go-link:hover{color:var(--ink);}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .tut-head{padding-top:44px;}
  .step-sec{padding-top:44px;}
  .step-no{width:38px;height:38px;font-size:12.5px;}
  .step-body{margin-top:18px;}
  .flow-strip{padding:12px 16px;gap:10px;}
}