.page-products{
  --pp-gap:clamp(14px,2vw,22px);
  --pp-pad:clamp(16px,2.6vw,26px);
  --pp-line:var(--gold-a10);
  color:var(--mist);
  background:
    radial-gradient(120% 70% at 88% 0%,var(--gold-a10),transparent 62%),
    var(--ink-900);
  padding-bottom:clamp(48px,7vw,96px);
  overflow-x:clip;
}
.page-products img{max-width:100%;height:auto;display:block}
.page-products h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,5.6vw,54px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:16px 0 0;
  color:var(--mist);
}
.page-products h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(18px,2.2vw,22px);
  margin:10px 0 8px;
  letter-spacing:-.01em;
}
.page-products p{margin:0 0 12px;line-height:1.8}

/* 顶部上下文 */
.page-products .pp-topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
  padding-top:clamp(18px,3vw,32px);
  font-size:14px;
}
.page-products .pp-backlink{
  color:var(--gold-bright);
  text-decoration:none;
  border-bottom:1px solid var(--gold-a30);
  padding-bottom:2px;
}
.page-products .pp-backlink:hover{border-color:var(--gold)}

/* 首屏 */
.page-products .pp-hero{
  display:grid;
  gap:clamp(22px,3.4vw,44px);
  padding-top:clamp(20px,3vw,36px);
  align-items:start;
}
.page-products .pp-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}
.page-products .pp-kicker__text{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--mist-a55);
}
.page-products .pp-lead{
  margin-top:16px;
  font-size:clamp(16px,1.4vw,18px);
  line-height:1.8;
  color:var(--mist-a70);
  max-width:36em;
}
.page-products .pp-facts{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--pp-line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.page-products .pp-facts li{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  background:var(--ink-800);
}
.page-products .pp-facts__k{font-size:12px;color:var(--mist-a38);letter-spacing:.04em}
.page-products .pp-facts__v{font-size:15px;font-weight:600;color:var(--gold-bright)}

/* 下载卡 */
.page-products .pp-download{
  position:relative;
  overflow:hidden;
  border:1px solid var(--gold-a18);
  border-radius:var(--r-xl);
  border-bottom-left-radius:var(--r-md);
  background:linear-gradient(158deg,var(--ink-800),var(--ink-900) 66%);
  box-shadow:var(--shadow-1);
}
.page-products .pp-download::after{
  content:"";
  position:absolute;
  inset:-10% -30%;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,var(--gold-a18) 48%,transparent 62%);
  transform:translateX(-120%);
  animation:pp-scan 7s linear infinite;
}
@keyframes pp-scan{
  0%{transform:translateX(-120%)}
  58%,100%{transform:translateX(120%)}
}
.page-products .pp-download__visual{
  border-radius:0;
  border-bottom:1px solid var(--gold-a18);
}
.page-products .pp-download__visual img{aspect-ratio:3/2;object-fit:cover}
.page-products .pp-download__body{padding:var(--pp-pad);position:relative;z-index:1}
.page-products .pp-download__title{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,26px);
  font-weight:800;
  margin:0 0 8px;
}
.page-products .pp-download__text{font-size:15px;color:var(--mist-a70)}
.page-products .pp-specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:18px 0 20px;
}
.page-products .pp-specs div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border:1px solid var(--pp-line);
  border-radius:var(--r-md);
  background:var(--ink-900);
}
.page-products .pp-specs__k{font-size:12px;color:var(--mist-a38)}
.page-products .pp-specs__v{font-size:15px;color:var(--mist);font-weight:600}
.page-products .pp-download__actions{display:flex;flex-wrap:wrap;gap:10px}

/* 章节 */
.page-products .pp-section{padding-top:clamp(42px,6vw,82px)}
.page-products .pp-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px clamp(10px,1.8vw,20px);
  padding-bottom:14px;
  margin-bottom:clamp(18px,2.6vw,28px);
  border-bottom:1px solid var(--pp-line);
}
.page-products .pp-head--tight{margin-bottom:14px}
.page-products .pp-head__num{
  font-family:var(--font-mono);
  font-size:clamp(20px,3vw,32px);
  font-weight:700;
  color:var(--gold);
  line-height:1;
}
.page-products .pp-head__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(21px,3.1vw,30px);
  letter-spacing:-.01em;
  margin:0;
}
.page-products .pp-head__desc{
  flex:1 1 280px;
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--mist-a55);
}
.page-products .pp-subtitle{
  font-family:var(--font-display);
  font-size:clamp(17px,2vw,20px);
  margin:clamp(24px,3vw,34px) 0 14px;
  color:var(--gold-bright);
}
.page-products .pp-note{
  margin-top:16px;
  font-size:14px;
  line-height:1.75;
  color:var(--mist-a55);
  border-left:2px solid var(--gold-a30);
  padding-left:12px;
}
.page-products .pp-link{
  color:var(--gold-bright);
  text-decoration:none;
  border-bottom:1px solid var(--cyan-a45);
  font-weight:600;
}
.page-products .pp-link:hover{border-color:var(--gold)}

/* 配置对照 */
.page-products .pp-config{display:grid;gap:var(--pp-gap);align-items:start}
.page-products .pp-scroll{
  overflow-x:auto;
  border-radius:var(--r-lg);
  border:1px solid var(--pp-line);
  background:var(--ink-800);
  -webkit-overflow-scrolling:touch;
}
.page-products .pp-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:14px;
}
.page-products .pp-table th,
.page-products .pp-table td{
  padding:11px 14px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--pp-line);
}
.page-products .pp-table thead th{
  background:var(--ink-900);
  color:var(--mist-a55);
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  white-space:nowrap;
}
.page-products .pp-table tbody th{color:var(--mist-a55);font-weight:500}
.page-products .pp-table tbody tr:nth-child(even){background:var(--gold-a06)}
.page-products .pp-table tbody tr:last-child th,
.page-products .pp-table tbody tr:last-child td{border-bottom:0}
.page-products .pp-table .mono{color:var(--mist);font-size:13px;white-space:nowrap}
.page-products .pp-table .tag{font-size:12px;padding:2px 10px}
.page-products .pp-config__art img{aspect-ratio:5/3;object-fit:cover}

/* Bento 服务矩阵 */
.page-products .pp-bento{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pp-gap);
}
.page-products .pp-bento__cell{
  padding:var(--pp-pad);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.page-products .pp-bento__cell p{font-size:15px;color:var(--mist-a70);margin:0 0 12px}
.page-products .pp-bento__cell .pp-link{margin-top:auto;font-size:14px}
.page-products .pp-bento__cell--lead{
  background:linear-gradient(150deg,var(--gold-a18),var(--ink-800) 58%);
  border-color:var(--gold-a30);
}
.page-products .pp-bento__cell--models{
  background:linear-gradient(150deg,var(--alert-a16),var(--ink-800) 62%);
}
.page-products .pp-guide{
  display:grid;
  gap:var(--pp-gap);
  width:100%;
}
.page-products .pp-guide__art{margin:0;width:100%;max-width:220px}
.page-products .pp-guide__art img{aspect-ratio:5/6;object-fit:cover}

/* 开服同步 */
.page-products .pp-sync{display:grid;gap:clamp(20px,3vw,40px);align-items:start}
.page-products .pp-sync__art img{aspect-ratio:3/2;object-fit:cover}
.page-products .pp-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .pp-list li{
  position:relative;
  padding-left:16px;
  font-size:15px;
  line-height:1.75;
  color:var(--mist-a70);
}
.page-products .pp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--cyan);
  transform:rotate(45deg);
}
.page-products .pp-list strong{color:var(--gold-bright);font-weight:600}

/* 机型适配 */
.page-products .pp-models__art img{aspect-ratio:16/9;object-fit:cover}
.page-products .pp-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0;
}
.page-products .pp-table--models{min-width:700px}
.page-products .pp-checklist{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
.page-products .pp-check{
  display:flex;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--r-md);
  background:var(--ink-800);
  border:1px solid var(--pp-line);
}
.page-products .pp-check__k{
  color:var(--gold);
  font-size:13px;
  font-weight:700;
  line-height:1.7;
}
.page-products .pp-check p{margin:0;font-size:14.5px;line-height:1.75;color:var(--mist-a70)}
.page-products .pp-check strong{color:var(--mist);font-weight:600}

/* 安装步骤 */
.page-products .pp-steps{
  list-style:none;
  margin:0 0 clamp(22px,3vw,32px);
  padding:0;
  display:grid;
  gap:var(--pp-gap);
  counter-reset:pp-step;
}
.page-products .pp-step{
  position:relative;
  padding:var(--pp-pad);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--ink-800),var(--ink-900));
  border:1px solid var(--pp-line);
  border-top:2px solid var(--gold-a50);
}
.page-products .pp-step__num{
  display:block;
  font-size:26px;
  font-weight:700;
  color:var(--gold);
  line-height:1;
}
.page-products .pp-step h3{margin:10px 0 6px}
.page-products .pp-step p{margin:0;font-size:15px;color:var(--mist-a70)}

.page-products .pp-trouble{
  display:grid;
  gap:10px;
  margin-bottom:clamp(24px,3vw,34px);
}
.page-products .pp-trouble__item{
  border:1px solid var(--pp-line);
  border-radius:var(--r-md);
  background:var(--ink-800);
  padding:0 16px;
}
.page-products .pp-trouble__item summary{
  cursor:pointer;
  list-style:none;
  padding:14px 26px 14px 0;
  position:relative;
  font-weight:600;
  font-size:15px;
  color:var(--mist);
}
.page-products .pp-trouble__item summary::-webkit-details-marker{display:none}
.page-products .pp-trouble__item summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  color:var(--gold);
  font-size:18px;
}
.page-products .pp-trouble__item[open] summary::after{content:"–"}
.page-products .pp-trouble__item[open] summary{border-bottom:1px solid var(--pp-line)}
.page-products .pp-trouble__item p{
  margin:12px 0 14px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--mist-a70);
}

.page-products .pp-help{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:var(--pp-pad);
  border-radius:var(--r-lg);
  border:1px solid var(--gold-a30);
  background:linear-gradient(120deg,var(--sand-a14),var(--ink-800) 60%);
}
.page-products .pp-help h3{margin:0 0 6px}
.page-products .pp-help p{margin:0;font-size:14.5px;color:var(--mist-a70);max-width:52em}

/* 后续入口 */
.page-products .pp-next{padding-top:clamp(38px,5vw,68px)}
.page-products .pp-next__grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
  margin-top:16px;
}
.page-products .pp-next__link{
  display:block;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--pp-line);
  background:var(--ink-800);
  color:var(--mist-a70);
  text-decoration:none;
  font-size:14.5px;
  line-height:1.6;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.page-products .pp-next__link:hover{
  color:var(--mist);
  border-color:var(--gold-a50);
  background:var(--gold-a10);
}

@media (min-width:640px){
  .page-products .pp-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-products .pp-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .pp-next__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .pp-guide{grid-template-columns:1fr 200px;align-items:start}
}

@media (min-width:900px){
  .page-products .pp-hero{grid-template-columns:1.02fr .98fr}
  .page-products .pp-config{grid-template-columns:1.15fr .85fr}
  .page-products .pp-sync{grid-template-columns:1.05fr .95fr}
  .page-products .pp-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .page-products .pp-bento__cell--lead{grid-column:span 4}
  .page-products .pp-bento__cell--stories{grid-column:span 2}
  .page-products .pp-bento__cell--guide{grid-column:span 3}
  .page-products .pp-bento__cell--models{grid-column:span 3}
  .page-products .pp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-products .pp-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .pp-next__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1200px){
  .page-products .pp-lead{font-size:18px}
  .page-products .pp-guide{grid-template-columns:1fr 240px}
}

@media (prefers-reduced-motion:reduce){
  .page-products .pp-download::after{animation:none;opacity:0}
  .page-products .pp-next__link{transition:none}
}
<<<END>>>