/* ============================================================
   PIXELFANTASIA · 功能详解
   ============================================================ */
.gd-head{padding:var(--sp8) 0 var(--sp6);position:relative;overflow:hidden}
.gd-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 85% 0%,rgba(107,168,255,.12),transparent 70%),
    linear-gradient(90deg,rgba(108,255,181,.05) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(rgba(108,255,181,.04) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(110% 80% at 30% 0%,#000,transparent 72%);
  mask-image:radial-gradient(110% 80% at 30% 0%,#000,transparent 72%);
}
.gd-head__h{max-width:18em}
.gd-head__lead{max-width:60ch;margin-top:var(--sp3)}

/* 分类吸顶条 */
.gd-sub{position:sticky;top:56px;z-index:12;background:rgba(9,12,20,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gd-sub__in{display:flex;gap:6px;overflow-x:auto;padding:8px 0}
.gd-sub__a{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;white-space:nowrap;
  font-size:13px;color:var(--text-muted);border:1px solid transparent;text-decoration:none;
  transition:color .12s,border-color .12s,background .12s;
}
.gd-sub__a b{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);font-weight:600}
.gd-sub__a:hover{color:var(--text);border-color:var(--line)}
.gd-sub__a.is-on{color:var(--mint);border-color:var(--mint-line);background:var(--mint-dim)}
.gd-sub__a.is-on b{color:var(--mint)}

/* 分区 */
.gd-sec{padding:var(--sp8) 0;scroll-margin-top:110px}
.gd-sec--band{background:linear-gradient(180deg,rgba(20,26,41,.55),transparent 70%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gd-sec__hd{max-width:74ch;margin-bottom:var(--sp6)}
.gd-sec__no{font-size:11.5px;letter-spacing:.2em;color:var(--mint);margin-bottom:10px}
.gd-sec__lead{font-size:15px;line-height:1.85;color:var(--text-muted);margin-top:12px}

/* 特色格 */
.gd-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:var(--sp6)}
.gd-feats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gd-feat{border:1px solid var(--line);background:rgba(20,26,41,.62);padding:16px 16px 18px}
.gd-feat p.mono{font-size:11.5px;letter-spacing:.16em;color:var(--text-faint);margin-bottom:8px}
.gd-feat h3{margin-bottom:8px}
.gd-feat p:not(.mono){font-size:13.5px;line-height:1.8;color:var(--text-muted)}

/* 案例 */
.gd-case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp5);align-items:center;margin-top:var(--sp5)}
.gd-case--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.gd-case__fig{margin:0;border:1px solid var(--line);background:var(--panel-sunken);padding:10px}
.gd-case__fig img{display:block;width:100%;height:auto;image-rendering:pixelated}
.gd-case__fig figcaption{margin-top:8px;font-size:12px;color:var(--text-faint);font-family:var(--font-mono)}
.gd-case__side p.mono{font-size:11.5px;letter-spacing:.16em;color:var(--text-faint)}
.gd-steps{list-style:none;counter-reset:gd;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
.gd-steps li{counter-increment:gd;position:relative;padding-left:38px;font-size:13.5px;color:var(--text-muted);line-height:1.7}
.gd-steps li::before{
  content:counter(gd,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:11px;color:var(--mint);
  border:1px solid var(--mint-line);width:26px;height:22px;display:grid;place-items:center;
}
.gd-steps b{display:block;color:var(--text);font-size:13.5px;margin-bottom:2px}
.gd-steps span{display:block}

/* 接缝对比 */
.gd-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:var(--sp6)}
.gd-compare__fig{margin:0;border:1px solid var(--line);padding:8px;background:var(--panel-sunken)}
.gd-compare__fig img{display:block;width:100%;height:auto;image-rendering:pixelated}
.gd-compare__fig figcaption{margin-top:8px;font-size:12.5px;color:var(--text-muted);line-height:1.6}
.gd-compare__fig figcaption b{color:var(--text)}
.gd-compare__fig--bad{border-color:rgba(255,107,157,.35)}
.gd-badge{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  padding:1px 6px;margin-right:6px;border:1px solid var(--line-strong)}
.gd-badge--bad{color:var(--rose);border-color:rgba(255,107,157,.5)}
.gd-badge--ok{color:var(--mint);border-color:var(--mint-line)}

/* 素材包 */
.gd-pack{display:grid;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:var(--sp6)}
.gd-pack__fig{margin:0}
.gd-pack__fig img{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line);
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/16px 16px}
.gd-pack__fig figcaption{margin-top:8px;font-size:12px;color:var(--text-faint)}
.gd-pack__fig .mono,.gd-pack__cap{font-family:var(--font-mono);letter-spacing:.12em}
.gd-pack__arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-faint)}
.gd-pack__arrow .ico{width:22px;height:22px}
.gd-pack__arrow span{font-size:10.5px;letter-spacing:.2em}
.gd-pack__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gd-pack__grid img{display:block;width:100%;height:auto;image-rendering:pixelated;
  border:1px solid var(--line);background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/12px 12px}
.gd-pack__cap{margin-top:10px;font-size:12px;color:var(--text-faint)}

/* 拆解 */
.gd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:center;margin-bottom:var(--sp6)}
.gd-split__fig{margin:0}
.gd-split__fig img{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line)}
.gd-split__fig figcaption{margin-top:8px;font-size:12px;color:var(--text-faint)}
.gd-split__fig .mono{font-family:var(--font-mono);letter-spacing:.12em}
.gd-split__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gd-split__grid img{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line);
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/12px 12px}
.gd-split__cap{margin-top:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-faint)}

/* 提示块 */
.gd-note{border-left:3px solid var(--mint);background:rgba(108,255,181,.06);padding:14px 16px;margin-top:var(--sp5)}
.gd-note p{font-size:13.5px;line-height:1.8;color:var(--text-muted);margin:0}
.gd-note b{color:var(--mint)}

@media (max-width:1023px){
  .gd-feats,.gd-feats--3,.gd-feats--4{grid-template-columns:1fr 1fr}
  .gd-case,.gd-case--rev{grid-template-columns:1fr}
  .gd-compare{grid-template-columns:1fr}
  .gd-pack{grid-template-columns:1fr}
  .gd-pack__arrow{flex-direction:row;justify-content:center;transform:rotate(90deg);padding:6px 0}
  .gd-split{grid-template-columns:1fr}
  .gd-sub{top:52px}
}
@media (max-width:639px){
  .gd-feats,.gd-feats--3{grid-template-columns:1fr}
}