/* ==========================================================================
   VPNYN · tutorial.css
   教程页专属:页首补充 / 步骤节奏 / 步骤序号 / 面板路径 / 平台导入卡
   ========================================================================== */

/* --- 页首 --- */
.tut-head .lede{max-width:800px;}
.tut-head .callout{margin-top:24px;max-width:900px;}
.tut-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}

/* --- 正文列 --- */
.tut-body{position:relative;max-width:920px;}

/* --- 步骤节奏 --- */
.tut-step{padding-top:40px;margin-top:40px;border-top:1px dashed var(--border-strong);}
.tut-step:first-of-type{padding-top:0;margin-top:0;border-top:0;}

.tut-step-head{display:flex;align-items:center;gap:14px;}
.tut-step-head h2{min-width:0;font-size:clamp(22px,2.4vw,28px);}
.tut-step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:var(--r-md);
  background:var(--accent-08);
  border:1px solid var(--accent-16);
  box-shadow:var(--shadow-inner-hi);
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--accent-dark);
}

.tut-path{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
  font-size:12.5px;
  color:var(--muted);
}

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

/* --- 平台导入卡 --- */
.tut-plat{
  margin-top:20px;
  padding:22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
}
.tut-plat h3{margin-top:12px;}

/* --- 响应式 --- */
@media (max-width:640px){
  .tut-step{padding-top:30px;margin-top:30px;}
  .tut-step-head{gap:11px;}
  .tut-step-num{width:36px;height:36px;font-size:12.5px;}
  .tut-plat{padding:18px;}
}