/* ==========================================================================
   Clash免费下载 · 教程页专属样式(tutorial.css)
   依赖 base.css / components.css 的设计令牌;本文件不新增颜色值。
   ========================================================================== */

/* ============ 页头氛围 ============ */
.tut-hero{
  position:relative;overflow:hidden;
  padding-top:74px;padding-bottom:56px;
}
.tut-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(780px 340px at 84% -12%,var(--accent-10),transparent 70%),
    radial-gradient(620px 300px at 8% 116%,var(--peach-20),transparent 72%);
}
.tut-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-28),transparent);
}
.tut-hero .wrap{position:relative}
.tut-hero .sec-head{margin-bottom:24px}
.tut-hero h1{
  margin:0 0 16px;max-width:860px;
  font-size:clamp(30px,4.2vw,46px);font-weight:900;line-height:1.22;
}
.tut-hero .facts{margin-top:0;animation:none}
.tut-cta{margin-top:26px}

/* ============ 正文区节奏 ============ */
.tut-main{padding-top:6px;padding-bottom:70px}
.tut-main .callout{margin-top:6px}

/* ============ 步骤章节(里程标式) ============ */
.tut-step{scroll-margin-top:calc(var(--header-h) + 76px)}
.tut-step + .tut-step{
  margin-top:36px;padding-top:40px;
  border-top:1px dashed var(--border-soft);
}
.step-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.step-line h2{margin:0}
.step-line .mile-tag{flex:none}
.step-hint{
  font:500 11px/1.5 var(--font-mono);letter-spacing:.16em;color:var(--text-muted);
}

/* ============ 结尾去向卡 ============ */
.next-grid{align-items:stretch}
.next-card{display:flex;flex-direction:column}
.next-card h3{margin:10px 0 8px;font-size:18px}
.next-card p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.85}
.next-card .post-more{margin-top:auto;padding-top:16px}

/* ============ 响应式 ============ */
@media (max-width:640px){
  .tut-hero{padding-top:56px;padding-bottom:44px}
  .tut-main{padding-bottom:52px}
  .tut-step + .tut-step{margin-top:28px;padding-top:30px}
  .tut-step{scroll-margin-top:calc(var(--header-h) + 66px)}
}