/* ============================================================
   Clash入门指南 · clashrumen.com
   tutorial.css —— 教程页(guide.html)专属样式
   仅补充本页布局,颜色/字体一律引用 base.css 设计令牌
   ============================================================ */

/* ---------- 页首图签区 ---------- */
.guide-hero{padding-top:64px;padding-bottom:20px;}
.guide-title{
  margin-top:20px;
  font-size:clamp(30px,3.6vw,46px);
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.3;
}
.guide-lead{
  margin-top:18px;
  max-width:56em;
  font-size:15px;
  line-height:1.95;
  color:var(--chalk-dim);
}
.guide-lead strong{color:var(--chalk);font-weight:700;}
.guide-lead a{color:var(--chalk);border-bottom:1px dashed var(--chalk-dim);}
.guide-lead a:hover{border-bottom-color:var(--chalk);}
.guide-hero .callout{margin-top:26px;}
.guide-hero .toc-strip{margin-top:28px;margin-bottom:0;}

/* ---------- 开工准备清单 ---------- */
.prep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.prep-grid > *{min-width:0;}
.prep-item h3{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.prep-item h3 .mono{font-size:11px;letter-spacing:.12em;border:1px solid var(--rule);padding:2px 8px;flex-shrink:0;}
.prep-item p{font-size:13.5px;line-height:1.85;color:var(--chalk-dim);}
.prep-item a{color:var(--chalk);border-bottom:1px dashed var(--chalk-dim);}
.prep-item a:hover{border-bottom-color:var(--chalk);}
.prep-item code{background:var(--paper-sink);border:1px solid var(--rule);padding:1px 5px;font-size:.9em;color:var(--chalk);}

/* ---------- 步骤间衔接线 ---------- */
.step-next{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
  padding:14px 18px;
  border:1px dashed var(--rule);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  line-height:1.8;
  color:var(--chalk-dim);
}
.step-next a{color:var(--chalk);border-bottom:1px dashed var(--chalk-dim);flex-shrink:0;}
.step-next a:hover{border-bottom-color:var(--chalk);}

/* ---------- 教程页 prose 微调 ---------- */
.prose .cmd-box{margin:14px 0 18px;}

/* ---------- 竣工附录卡 ---------- */
.next-card h3{font-size:16.5px;font-weight:800;letter-spacing:.05em;margin-bottom:10px;}
.next-card p{font-size:13.5px;line-height:1.85;color:var(--chalk-dim);margin-bottom:18px;}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .guide-hero{padding-top:44px;}
  .prep-grid{grid-template-columns:1fr;}
  .step-next{padding:12px 14px;}
}
</style>