.page-products{
  --pg-band-pad:clamp(44px,6vw,88px);
  --pg-edge:rgba(16,20,19,.14);
  --pg-edge-strong:rgba(16,20,19,.26);
  --pg-sub:rgba(242,239,230,.74);
  --pg-sub-dark:#4a4f4c;
  --pg-card:rgba(62,92,75,.28);
  color:var(--paper);
}

.page-products .pg-band{padding-block:var(--pg-band-pad);}
.page-products .pg-band--paper{background:var(--paper);color:var(--char);--pg-sub:var(--pg-sub-dark);}
.page-products .pg-band--night{background:var(--night);}
.page-products .pg-band--ink{background:var(--ink);}
.page-products .pg-band--moss{background:linear-gradient(155deg,var(--moss) 0%,#2c463a 60%,#22392f 100%);}

/* 首屏 */
.page-products .pg-hero{padding-block:clamp(24px,4vw,40px) clamp(48px,7vw,96px);background:
  radial-gradient(120% 90% at 82% 8%,rgba(200,247,81,.09) 0%,rgba(200,247,81,0) 55%),
  var(--ink);}
.page-products .breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vw,44px);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--rock);}
.page-products .breadcrumbs a{color:var(--silver);text-decoration:none;}
.page-products .breadcrumbs a:hover{color:var(--lime);}
.page-products .breadcrumbs [aria-current="page"]{color:var(--lime);}

.page-products .pg-hero__grid{display:grid;gap:clamp(28px,4vw,52px);}
.page-products .pg-hero__copy h1{margin:14px 0 18px;max-width:20ch;}
.page-products .pg-hero__copy .lede{margin:0;max-width:36em;color:var(--pg-sub);font-size:16px;line-height:1.78;}

.page-products .pg-quick{display:grid;gap:10px;margin-top:clamp(24px,3vw,34px);}
.page-products .pg-quick__item{display:flex;align-items:center;gap:14px;padding:13px 20px;border:1px solid var(--line);border-radius:var(--pill);color:var(--paper);text-decoration:none;font-size:15px;transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);}
.page-products .pg-quick__item .mono{font-size:12px;color:var(--lime);letter-spacing:.06em;}
.page-products .pg-quick__item:hover,.page-products .pg-quick__item:focus-visible{border-color:var(--lime);color:var(--lime);background:rgba(200,247,81,.06);}

.page-products .pg-hero__media{margin:0;}
.page-products .pg-frame{position:relative;padding:8px;}
.page-products .pg-hero__media img{display:block;width:100%;height:auto;aspect-ratio:14/9;object-fit:cover;border-radius:var(--r-lg);}
.page-products .pg-hero__media figcaption{margin-top:12px;font-size:12px;color:var(--clay);letter-spacing:.05em;}

/* 区块标题 */
.page-products .pg-head{max-width:64ch;}
.page-products .pg-head h2{margin:12px 0 14px;}
.page-products .pg-head p{margin:0;color:var(--pg-sub);font-size:16px;line-height:1.78;}
.page-products .eyebrow{color:var(--lime);}
.page-products .pg-band--paper .eyebrow{color:var(--clay);}

/* 四象限 */
.page-products .pg-matrix{display:grid;gap:14px;margin-top:clamp(26px,4vw,40px);}
.page-products .pg-quad{position:relative;padding:24px 22px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--pg-card);overflow:hidden;}
.page-products .pg-quad--a{border-color:rgba(200,247,81,.55);background:linear-gradient(160deg,rgba(200,247,81,.12),rgba(62,92,75,.24) 60%);}
.page-products .pg-quad__num{display:inline-block;font-size:13px;letter-spacing:.12em;color:var(--lime);}
.page-products .pg-quad__title{margin:10px 0 10px;font-family:var(--narrow);font-size:26px;line-height:1.1;letter-spacing:.01em;color:var(--paper);}
.page-products .pg-quad__text{margin:0 0 18px;font-size:15px;line-height:1.75;color:var(--pg-sub);}
.page-products .pg-quad__meta{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:var(--pill);font-size:11.5px;letter-spacing:.06em;color:var(--silver);}

/* 二级索引清单 */
.page-products .pg-filter{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,3vw,32px) 0 18px;}
.page-products .pg-filter__btn{font:inherit;font-size:14px;padding:9px 20px;border-radius:var(--pill);border:1px solid var(--pg-edge-strong);background:transparent;color:var(--char);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);}
.page-products .pg-filter__btn:hover{border-color:var(--moss);}
.page-products .pg-filter__btn[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--char);font-weight:600;}
.page-products .pg-filter__btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

.page-products .pg-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--pg-edge);}
.page-products .pg-index__item{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num name" "desc desc" "chip chip";gap:4px 14px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--pg-edge);}
.page-products .pg-index__item[hidden]{display:none;}
.page-products .pg-index__num{grid-area:num;font-size:12px;letter-spacing:.06em;color:var(--clay);}
.page-products .pg-index__name{grid-area:name;font-size:16px;font-weight:600;color:var(--char);}
.page-products .pg-index__desc{grid-area:desc;font-size:14px;line-height:1.6;color:var(--pg-sub);}
.page-products .pg-chip{grid-area:chip;justify-self:start;margin-top:4px;padding:3px 12px;border:1px solid var(--pg-edge-strong);border-radius:var(--pill);font-size:11.5px;letter-spacing:.08em;color:var(--moss);}

/* 三步 */
.page-products .pg-steps{list-style:none;margin:clamp(26px,4vw,40px) 0 0;padding:0;display:grid;gap:14px;}
.page-products .pg-step{position:relative;padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(11,43,36,.34);}
.page-products .pg-step__num{font-size:13px;letter-spacing:.14em;color:var(--lime);}
.page-products .pg-step h3{margin:10px 0 10px;font-size:20px;line-height:1.3;color:var(--paper);}
.page-products .pg-step p{margin:0;font-size:15px;line-height:1.75;color:var(--pg-sub);}

.page-products .pg-round-demo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:clamp(22px,3vw,30px);padding:20px 22px;border:1px solid rgba(200,247,81,.4);border-radius:var(--r-md);background:rgba(11,43,36,.42);}
.page-products .pg-round-demo__label{font-size:11.5px;letter-spacing:.1em;color:var(--silver);}
.page-products .pg-round-demo__code{padding:6px 16px;border-radius:var(--pill);background:rgba(200,247,81,.14);color:var(--lime);font-size:17px;letter-spacing:.06em;}
.page-products .pg-round-demo__hint{flex:1 1 220px;font-size:13.5px;line-height:1.6;color:var(--pg-sub);}
.page-products .pg-copy{font:inherit;font-size:13px;padding:8px 18px;border-radius:var(--pill);border:1px solid var(--line-strong);background:transparent;color:var(--paper);cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease);}
.page-products .pg-copy:hover{border-color:var(--lime);color:var(--lime);}
.page-products .pg-copy:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

/* 图文分栏 */
.page-products .pg-split{display:grid;gap:clamp(24px,4vw,44px);}
.page-products .pg-fav-media,.page-products .pg-data-media{margin:0;}
.page-products .pg-fav-media img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg);}
.page-products .pg-fav-media figcaption{display:block;margin-top:12px;font-size:12px;color:var(--clay);letter-spacing:.05em;}
.page-products .pg-fav-body h2,.page-products .pg-data-body h2{margin:12px 0 16px;}
.page-products .pg-lead{margin:0 0 18px;font-size:16.5px;line-height:1.78;color:var(--pg-sub);}
.page-products .pg-sub{margin:clamp(20px,3vw,28px) 0 10px;font-size:18px;line-height:1.45;color:var(--lime);}
.page-products .pg-text{margin:0;font-size:15px;line-height:1.8;color:var(--pg-sub);}

.page-products .pg-facts{list-style:none;display:grid;gap:10px;margin:clamp(22px,3vw,30px) 0 0;padding:0;}
.page-products .pg-facts li{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.page-products .pg-facts__v{font-size:19px;letter-spacing:.02em;color:var(--lime);white-space:nowrap;}
.page-products .pg-facts__l{font-size:14px;color:var(--pg-sub);}

/* 数据面板 */
.page-products .pg-data-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);}
.page-products .pg-data-media figcaption{display:block;margin-top:12px;font-size:12px;color:var(--clay);letter-spacing:.05em;}

.page-products .pg-details{margin-top:clamp(20px,3vw,26px);padding:0 18px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(11,43,36,.42);}
.page-products .pg-details summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--lime);}
.page-products .pg-details summary::-webkit-details-marker{display:none;}
.page-products .pg-details summary::after{content:"+";font-family:var(--mono);font-size:17px;color:var(--silver);}
.page-products .pg-details[open] summary::after{content:"–";}
.page-products .pg-details summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

.page-products .pg-fields{margin:0 0 4px;padding:0;}
.page-products .pg-fields__row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);}
.page-products .pg-fields__row dt{font-size:14.5px;color:var(--paper);}
.page-products .pg-fields__row dd{margin:0;font-size:13.5px;color:var(--silver);}
.page-products .pg-fields__note{margin:14px 0 18px;font-size:13.5px;line-height:1.7;color:var(--pg-sub);}

/* 导出 */
.page-products .pg-formats{display:grid;gap:12px;margin-top:clamp(24px,4vw,34px);}
.page-products .pg-format{padding:20px;border:1px solid var(--pg-edge);border-radius:var(--r-md);background:rgba(255,255,255,.55);}
.page-products .pg-format__name{margin:0 0 8px;font-size:20px;letter-spacing:.08em;color:var(--moss);}
.page-products .pg-format__desc{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--pg-sub);}
.page-products .pg-format__file{display:block;padding:9px 12px;border:1px dashed var(--pg-edge-strong);border-radius:var(--r-sm);font-size:12px;line-height:1.5;color:var(--char);overflow-wrap:anywhere;}

.page-products .pg-export-grid{display:grid;gap:clamp(22px,4vw,40px);margin-top:clamp(26px,4vw,40px);}
.page-products .pg-export-media{margin:0;}
.page-products .pg-export-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);}
.page-products .pg-export-media figcaption{display:block;margin-top:12px;font-size:12px;color:var(--clay);letter-spacing:.05em;}

.page-products .pg-export-rules{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.page-products .pg-export-rules li{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--pg-edge);}
.page-products .pg-export-rules__k{font-size:20px;letter-spacing:.02em;color:var(--moss);}
.page-products .pg-export-rules__v{font-size:14.5px;line-height:1.7;color:var(--pg-sub);}

/* 场景 */
.page-products .pg-banner{position:relative;margin:0 0 clamp(30px,5vw,52px);border-radius:var(--r-lg);overflow:hidden;}
.page-products .pg-banner img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;}
.page-products .pg-banner::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(to top,rgba(11,43,36,.92),rgba(11,43,36,0));pointer-events:none;}
.page-products .pg-banner figcaption{position:absolute;left:22px;bottom:18px;z-index:1;font-size:12px;letter-spacing:.05em;color:var(--lime);}

.page-products .pg-scenes{display:grid;gap:14px;margin-top:clamp(24px,4vw,34px);}
.page-products .pg-scene{padding:22px;border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:var(--r-md);background:rgba(62,92,75,.2);}
.page-products .pg-scene h3{margin:0 0 10px;font-size:19px;line-height:1.35;color:var(--paper);}
.page-products .pg-scene p{margin:0;font-size:14.5px;line-height:1.75;color:var(--pg-sub);}
.page-products .pg-scene__path{margin-top:14px !important;font-size:12px;letter-spacing:.03em;color:var(--lime);overflow-wrap:anywhere;}

/* 下一步 */
.page-products .pg-next{display:grid;gap:12px;margin-top:clamp(24px,4vw,34px);}
.page-products .pg-next__item{display:grid;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--paper);transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);}
.page-products .pg-next__item .mono{font-size:11.5px;letter-spacing:.12em;color:var(--lime);}
.page-products .pg-next__item strong{font-size:17px;}
.page-products .pg-next__item em{font-style:normal;font-size:13.5px;line-height:1.6;color:var(--pg-sub);}
.page-products .pg-next__item:hover,.page-products .pg-next__item:focus-visible{border-color:var(--lime);background:rgba(200,247,81,.07);transform:translateY(-2px);}

/* 响应式 */
@media (min-width:600px){
  .page-products .pg-index__item{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"num name chip" ". desc .";align-items:baseline;}
  .page-products .pg-chip{justify-self:end;margin-top:0;}
  .page-products .pg-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .page-products .pg-facts li{flex-direction:column;align-items:flex-start;gap:6px;border-bottom:0;padding-bottom:0;}
  .page-products .pg-formats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .pg-export-rules{grid-template-columns:1fr 1fr;}
  .page-products .pg-next{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:820px){
  .page-products .pg-steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .pg-matrix{grid-template-columns:1.12fr .88fr;}
  .page-products .pg-quad--a{padding:30px 26px;}
  .page-products .pg-quad--a .pg-quad__title{font-size:32px;}
  .page-products .pg-scenes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .pg-next{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:960px){
  .page-products .pg-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;}
  .page-products .pg-quick{grid-template-columns:1fr 1fr;}
  .page-products .pg-split--fav{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;}
  .page-products .pg-split--data{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}
  .page-products .pg-export-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;}
  .page-products .pg-index__item{grid-template-columns:64px minmax(0,240px) minmax(0,1fr) auto;grid-template-areas:"num name desc chip";gap:16px;padding:16px 4px;}
  .page-products .pg-index__desc{align-self:center;}
}

@media (min-width:1100px){
  .page-products .pg-quad--a{grid-row:span 1;}
  .page-products .pg-hero__copy h1{font-size:clamp(44px,5vw,72px);line-height:1.02;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .pg-next__item:hover{transform:none;}
}