/* ============================================================
   clashsg.com · 教程页专属样式(tutorial.html)
   依赖 base.css 设计令牌;只补页面级排版件,不复定义共享组件
   ============================================================ */

.tut-h1{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:clamp(28px,4.6vw,40px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--text);
}

.tut-link{
  color:var(--accent-dark);
  text-decoration:underline;
  text-decoration-color:var(--border);
  text-underline-offset:3px;
}
.tut-link:hover{text-decoration-color:var(--accent-dark);}

.tut-toc{margin-top:28px;}

/* —— 步骤头:等宽序号圆片 + 面包屑/标题 —— */
.step-head{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.step-head-body{min-width:0;}
.step-no{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin-top:2px;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg);
  box-shadow:var(--shadow-1);
  font-size:14px;
  font-weight:700;
}
.step-no.s-blue{color:var(--g-blue);}
.step-no.s-red{color:var(--g-red);}
.step-no.s-yellow{color:var(--g-yellow);}
.step-no.s-green{color:var(--g-green);}

.tut-prose{margin-top:22px;}

/* —— 结尾按钮行 —— */
.tut-acts{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}

@media (max-width:600px){
  .step-head{gap:14px;}
  .step-no{
    width:38px;
    height:38px;
    font-size:13px;
  }
  .tut-acts .btn{width:100%;}
}