/* ==========================================================================
   VPNBF — tutorial.css
   仅 guides.html 使用:首屏光斑、步骤块编号、CTA 居中、窄屏收束
   所有颜色/圆角/阴影一律引用 base.css 的设计令牌
   ========================================================================== */

/* 装饰层与正文的层级关系 */
.deco-host .wrap{position:relative;z-index:1}

.hero-glow{
  position:absolute;pointer-events:none;z-index:0;
  inset:6% 2% 10% 44%;
  background:radial-gradient(closest-side,rgba(217,195,238,.42),rgba(217,195,238,0) 100%);
  filter:blur(26px);
}

/* 首屏 CTA 与事实带居中 */
.cta-center{justify-content:center}
.center .facts-band{margin-left:auto;margin-right:auto;margin-top:24px}
.center .cta-row{margin-top:26px}

.tut-hint{
  margin:14px auto 0;
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:.02em;
  max-width:52ch;
}

/* 步骤块 */
.step{min-width:0;max-width:100%}
.step-head{
  display:flex;align-items:center;gap:14px;
  margin-top:48px;margin-bottom:14px;
  min-width:0;
}
.step-no{
  flex:none;
  width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--accent);color:var(--bg-panel);
  font-family:var(--font-mono);font-size:13px;line-height:1;
  box-shadow:0 10px 18px -10px rgba(var(--ink-rgb),.5);
}
.step-head h2{
  margin:0;
  font-size:clamp(23px,2.6vw,31px);
  line-height:1.24;
}
.step h3{
  margin-top:26px;
  padding-left:12px;
  border-left:3px solid var(--border);
}
.step .cta-row{margin-top:18px}
.step .callout{margin-top:20px}
.step .table-scroll{margin-top:20px}

/* 章节之间的收束线,避免长页只剩文字 */
.step + .step{
  padding-top:8px;
  border-top:1px dashed var(--border);
}

@media (max-width:768px){
  .hero-glow{inset:auto 0 4% 30%;height:46%;filter:blur(20px)}
  .step-head{gap:11px;margin-top:38px}
  .step-no{width:30px;height:30px;font-size:12px}
  .step + .step{padding-top:4px}
}

@media (max-width:400px){
  .step-no{width:28px;height:28px;font-size:11.5px}
}