@charset "UTF-8";
/* ==========================================================================
   VPNWY · tutorial.css
   使用教程页专属:页头装置 / 步骤分节 / 平台小节 / 文末延伸导航
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头
   -------------------------------------------------------------------------- */
.guide-head{
  position:relative;
  padding-bottom:var(--sp-7);
  min-width:0;
}
.guide-head .head-decor{
  position:absolute;
  right:0;
  top:16px;
  width:min(320px,44%);
  height:216px;
  border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-a10),transparent 74%);
  pointer-events:none;
  z-index:0;
}
.guide-head .head-decor::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background-image:radial-gradient(circle,var(--accent-a12) 1.05px,transparent 1.05px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(closest-side,var(--text) 18%,transparent 72%);
  mask-image:radial-gradient(closest-side,var(--text) 18%,transparent 72%);
}
.guide-head .sec-h,
.guide-head h1,
.guide-head .sec-lead,
.guide-head .guide-facts,
.guide-head .callout{
  position:relative;
  z-index:1;
}
.guide-head h1{
  margin-top:var(--sp-4);
  max-width:15em;
}
.guide-facts{
  margin-top:var(--sp-5);
}
.guide-facts li{
  display:flex;
  min-width:0;
}
.guide-head .callout{
  margin-top:var(--sp-6);
  max-width:54em;
}

/* --------------------------------------------------------------------------
   2. 步骤分节
   -------------------------------------------------------------------------- */
.guide-step{
  padding-top:var(--sp-8);
  margin-top:var(--sp-8);
  border-top:1px solid var(--border);
  min-width:0;
}
.guide-step:first-of-type{
  padding-top:0;
  margin-top:0;
  border-top:0;
}
.step-head{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.step-head h2{
  min-width:0;
}
.step-body{
  margin-top:var(--sp-5);
  max-width:46em;
}
.step-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px var(--sp-5);
  margin-top:var(--sp-6);
}
.step-ico{
  display:inline-block;
  vertical-align:-3px;
  margin-right:9px;
  color:var(--accent);
}

/* --------------------------------------------------------------------------
   3. 步骤跳转目录条（直接父元素为本页整篇 article，保证吸顶行程）
   -------------------------------------------------------------------------- */
.guide .toc-tabs{
  padding-inline:8px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  margin-bottom:var(--sp-8);
}

/* --------------------------------------------------------------------------
   4. 文末延伸导航
   -------------------------------------------------------------------------- */
.guide-foot{
  margin-top:var(--sp-9);
  padding-top:var(--sp-8);
  border-top:1px solid var(--border);
  min-width:0;
}
.next-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:var(--sp-6);
}
.next-grid .card{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.next-grid .link-more{
  margin-top:auto;
  padding-top:var(--sp-5);
}

/* --------------------------------------------------------------------------
   5. 响应式
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .guide-head .head-decor{width:min(260px,38%);}
}

@media (max-width:768px){
  .guide-head .head-decor{display:none;}
  .next-grid{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .guide-step{
    padding-top:var(--sp-7);
    margin-top:var(--sp-7);
  }
  .guide .toc-tabs{margin-bottom:var(--sp-7);}
  .step-head{align-items:flex-start;}
}