/* ============================================================
   快速上手页(quickstart.html)专属样式
   依赖 base.css / components.css 的设计令牌,不出现硬编码颜色
   ============================================================ */

/* ---------- 页首介绍区 ---------- */
.qs-intro{
  padding-top:64px;
  padding-bottom:36px;
}
.qs-intro h1{margin-bottom:18px}
.qs-lede{
  max-width:760px;
  color:var(--ink-mute);
  margin-bottom:28px;
}
.qs-lede strong{color:var(--ink)}

/* 准备事项面板 */
.qs-ready{margin-bottom:20px}
.qs-ready-title{
  font-size:15px;
  font-family:var(--font-mono);
  letter-spacing:0.05em;
  color:var(--ink);
  margin-bottom:12px;
}
.qs-ready-list{
  list-style:none;
  padding-left:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.qs-ready-list li{
  font-size:14.5px;
  color:var(--ink-mute);
  line-height:1.85;
}
.qs-ready-list li strong{color:var(--ink)}
.qs-ready-idx{
  font-size:12px;
  color:var(--lava);
  margin-right:10px;
}

.qs-intro .toc-tabs{margin-top:26px}

/* ---------- 步骤区 ---------- */
.qs-steps{
  padding-top:0;
  padding-bottom:24px;
}
.step-block{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:40px;
  padding-top:52px;
  padding-bottom:52px;
  border-bottom:1px solid var(--rule);
  scroll-margin-top:calc(var(--hd-h) + 18px);
}
.step-block > *{min-width:0}
.step-block:last-child{border-bottom:0}

.step-no{
  display:block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--lava);
  margin-bottom:8px;
}
.step-side h2{
  font-size:clamp(20px,2.6vw,24px);
  margin-bottom:12px;
}
.step-goal{
  font-size:13.5px;
  color:var(--ink-mute);
  line-height:1.8;
  border-left:3px solid var(--rule);
  padding-left:12px;
}

.step-body h3{
  font-size:16px;
  margin-top:26px;
  margin-bottom:10px;
}
.step-body h3:first-child{margin-top:0}
.step-body p{
  font-size:14.5px;
  color:var(--ink-mute);
  line-height:1.9;
}
.step-body p strong{color:var(--ink)}
.step-body ul{
  margin-top:10px;
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.step-body ul li{
  font-size:14.5px;
  color:var(--ink-mute);
  line-height:1.85;
}
.step-body ul li strong{color:var(--ink)}
.step-body pre{
  margin-top:12px;
  margin-bottom:14px;
}

/* 本步完成标志 */
.step-done{
  border:1px solid var(--rule);
  border-left:3px solid var(--ok);
  border-radius:var(--r);
  background:var(--sheet);
  padding-left:16px;
  padding-right:16px;
  padding-top:12px;
  padding-bottom:12px;
  font-size:14px;
  color:var(--ink-mute);
  line-height:1.8;
  margin-top:26px;
}
.step-done b{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ok);
  margin-bottom:4px;
}

/* ---------- 页尾「下一步」三格 ---------- */
.qs-next-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.qs-next-grid > *{min-width:0}
.qs-next-grid .panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.qs-next-title{font-size:16px}
.qs-next-desc{
  font-size:13.5px;
  color:var(--ink-mute);
  line-height:1.85;
  margin-bottom:4px;
}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .step-block{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:38px;
    padding-bottom:38px;
  }
  .step-side h2{margin-bottom:8px}
}
@media (max-width:640px){
  .qs-intro{padding-top:44px;padding-bottom:28px}
  .step-block{padding-top:32px;padding-bottom:32px}
}