/* ==========================================================================
   VPNDM — deepdoc.css
   深度指南页(reference.html)专属样式:页头氛围、正文长文档节奏、迷你窗口卡
   ========================================================================== */

html{scroll-padding-top:calc(var(--header-h) + 88px)}

/* ---------- 页头 ---------- */
.dd-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:64px;
  padding-bottom:46px;
  background:
    radial-gradient(circle at 82% 10%,var(--accent-glow),transparent 34%),
    radial-gradient(circle at 10% 90%,var(--coral-glow),transparent 30%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
}
.dd-hero .wrap{position:relative;z-index:1}
.dd-hero .stardust{position:absolute;inset:0;width:100%;height:100%}
.dd-hero h1{
  margin-top:14px;
  font-size:clamp(34px,5vw,60px);
  font-weight:900;
  line-height:1.14;
  letter-spacing:-.03em;
}
.dd-hero h1 .kw-i{
  display:inline-block;
  color:var(--accent);
  font-style:italic;
  transform:skewX(-4deg);
}
.dd-lede{
  max-width:840px;
  margin-top:18px;
  font-size:16px;
  line-height:1.82;
  color:var(--muted);
}
.dd-lede strong{color:var(--ink)}
.dd-lede a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.dd-facts{margin-top:22px}
.dd-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--muted-2);
}

/* ---------- 长文档主体 ---------- */
.dd-doc{max-width:900px}
.dd-doc > section{padding-top:6px;padding-bottom:22px}
.dd-doc > section + section{
  margin-top:24px;
  border-top:1px solid var(--border);
}
.dd-doc h2{margin-top:26px}
.dd-doc h3{margin-top:24px}
.dd-doc .table-scroll{margin:18px 0}
.dd-doc pre{margin:18px 0}

/* 迷你窗口卡阵(两格,首格错落) */
.dd-tools{margin:26px 0 8px}
.dd-tools .win-cell{padding-bottom:24px;margin-bottom:0;border-bottom:0}
.dd-tool .win-text{font-size:13px}
.dd-tool .route-path{margin-top:12px}
/* 覆盖 .prose ul li 的圆点,迷你卡内是路径行 */
.dd-doc .route-path li{padding-left:0;font-size:11.5px}
.dd-doc .route-path li::before{display:none}

/* FAQ 与正文衔接 */
.dd-doc .faq-list{margin:18px 0}
.dd-doc .faq-item + .faq-item{margin-top:10px}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .dd-tools .win-cell.offset-lg{margin-top:0}
}
@media (max-width:768px){
  .dd-hero{padding-top:44px;padding-bottom:32px}
  .dd-hero h1{font-size:clamp(28px,8.4vw,40px)}
  .dd-lede{font-size:15px;line-height:1.78}
  .dd-meta{font-size:11px}
}
@media (max-width:640px){
  .dd-doc > section{padding-bottom:16px}
  .dd-doc h2{margin-top:22px}
}