/* ==========================================================================
   tutorial.css — 教程页专属样式
   依赖 base.css 的设计令牌，本文件不出现任何硬编码颜色。
   覆盖：步骤面板排列、步骤编号标记、平台小标题、步骤内列表与链接
   ========================================================================== */

/* 步骤面板纵向排列 */
.step-list{display:flex;flex-direction:column;gap:26px;}

/* 锚点跳转时为固定页头留出距离 */
.step-block{scroll-margin-top:104px;}

/* 步骤标题行：编号圆标 + 标题，标题元素自身不设 flex */
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;}

.step-num{
  flex:none;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel2);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  box-shadow:var(--shadow-soft);
}

.step-title{margin:0;}

/* 平台小标题：沿用 eyebrow 的青绿，做成等宽小字 */
.os-label{
  margin:28px 0 12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--success);
}

/* 步骤正文：只作用于面板直接子段落，不影响内部 callout 的排版 */
.step-block > p{font-size:15.5px;line-height:1.9;}

/* 步骤内的要点列表 */
.step-list-ul{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 18px;
  padding:0;
}
.step-list-ul li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.85;
  color:var(--text);
}
.step-list-ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.7em;
  width:6px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--accent);
}

/* 段落内链接沿用 link-quiet 的形态，但跟随正文字号 */
.step-block .link-quiet,
.callout .link-quiet{font-size:inherit;}

/* 页头下方的平台差异说明 */
.page-head .callout{margin-top:30px;}

/* 下一步卡片里的链接行 */
.card-link{margin:16px 0 0;}

@media (max-width:640px){
  .step-list{gap:18px;}
  .step-head{gap:12px;margin-bottom:14px;}
  .step-num{width:36px;height:36px;font-size:14px;}
  .step-block{scroll-margin-top:88px;}
  .step-block > p{font-size:15px;}
  .os-label{margin-top:22px;}
}