.page-products{
  --p-rule:clamp(1.4rem,3vw,2.5rem);
  --p-radius:2px;
  --accent:var(--cyan);
  background-color:var(--ink);
  background-image:
    radial-gradient(760px 420px at 92% -6%, rgba(61,242,214,.10), transparent 62%),
    radial-gradient(680px 380px at -12% 52%, rgba(166,107,255,.08), transparent 66%);
  background-repeat:no-repeat;
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.85;
}

.page-products .crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:1rem 0 .2rem;
  font-size:var(--fs-small);
  letter-spacing:.08em;
  color:var(--muted);
}
.page-products .crumbs a{
  color:var(--muted);
  text-decoration:none;
}
.page-products .crumbs a:hover{color:var(--cyan);}
.page-products .crumbs [aria-current="page"]{color:var(--text);}

/* 首屏 */
.page-products .p-hero{
  padding:clamp(1rem,3vw,2rem) 0 clamp(2rem,5vw,3.4rem);
}
.page-products .p-hero__grid{
  display:grid;
  gap:var(--p-rule);
}
.page-products .p-hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-hero);
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:800;
  margin:.35rem 0 0;
}
.page-products .p-hero__lead{
  margin:1rem 0 0;
  max-width:36em;
  font-size:var(--fs-lead);
  line-height:1.75;
  color:var(--muted);
}
.page-products .p-hero__facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem;
  margin:1.6rem 0 0;
  padding:0;
}
.page-products .p-hero__facts > div{
  background:var(--panel);
  border:var(--edge);
  border-radius:var(--p-radius);
  box-shadow:var(--hard-sm);
  padding:.55rem .7rem .6rem;
}
.page-products .p-hero__facts dt{
  font-size:.72rem;
  letter-spacing:.12em;
  line-height:1.4;
  color:var(--muted);
}
.page-products .p-hero__facts dd{
  margin:.15rem 0 0;
  font-family:var(--font-mono);
  font-size:1.45rem;
  font-weight:700;
  line-height:1.15;
  color:var(--text);
}
.page-products .p-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.6rem;
}

.page-products .p-hero__board{
  position:relative;
  overflow:hidden;
  border:var(--edge);
  border-radius:var(--p-radius);
  box-shadow:var(--hard);
  background:linear-gradient(155deg, var(--raised) 0%, var(--panel) 62%);
  padding:clamp(1rem,2.4vw,1.5rem);
}
.page-products .p-hero__board::after{
  content:"";
  position:absolute;
  inset:auto -18% -42% auto;
  width:70%;
  aspect-ratio:1;
  background:radial-gradient(circle, rgba(61,242,214,.20), transparent 68%);
  pointer-events:none;
}
.page-products .p-board{
  position:relative;
  z-index:1;
}
.page-products .p-board__row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.page-products .p-board__bars{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
}
.page-products .p-board__bars li{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr);
  gap:.6rem;
  align-items:center;
}
.page-products .p-board__bars span{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--muted);
}
.page-products .p-board__bars i{
  display:block;
  height:10px;
  border:2px solid var(--line);
  border-radius:2px;
  background:linear-gradient(90deg, var(--cyan), rgba(61,242,214,.14));
}
.page-products .p-board__bars li:nth-child(1) i{width:82%;}
.page-products .p-board__bars li:nth-child(2) i{width:64%;}
.page-products .p-board__bars li:nth-child(3) i{width:91%;}
.page-products .p-board__bars li:nth-child(4) i{width:47%;}
.page-products .p-board__spark{
  display:block;
  width:100%;
  height:62px;
  margin-top:1rem;
}
.page-products .p-board__spark polyline{
  fill:none;
  stroke:var(--orange);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-products .p-board__foot{
  margin:.55rem 0 0;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.16em;
  color:var(--muted);
}

/* 目录与主体 */
.page-products .p-body{
  padding-bottom:clamp(2rem,5vw,4rem);
}
.page-products .p-toc{
  border:var(--edge);
  border-radius:var(--p-radius);
  background:var(--panel);
  box-shadow:var(--hard-sm);
  padding:.9rem 1rem 1rem;
  margin-bottom:var(--p-rule);
}
.page-products .p-toc__title{
  margin:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--muted);
}
.page-products .p-toc__list{
  list-style:none;
  margin:.55rem 0 0;
  padding:0;
  display:grid;
  gap:.1rem;
}
.page-products .p-toc__list a{
  display:flex;
  gap:.6rem;
  align-items:baseline;
  padding:.42rem .5rem;
  border-left:3px solid transparent;
  color:var(--muted);
  text-decoration:none;
  font-size:.92rem;
  line-height:1.6;
}
.page-products .p-toc__list a:hover{color:var(--text);}
.page-products .p-toc__list a[aria-current="true"]{
  color:var(--text);
  background:var(--raised);
  border-left-color:var(--lime);
}
.page-products .p-toc__n{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--accent);
}

.page-products .p-sec{
  padding:clamp(2rem,5vw,3.2rem) 0;
  border-top:var(--edge);
  scroll-margin-top:1.5rem;
}
.page-products .p-flow > .p-sec:first-child{
  border-top:0;
  padding-top:0;
}
.page-products .p-sec__head{
  display:grid;
  gap:.55rem;
}
.page-products .p-sec__idx{
  justify-self:start;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  line-height:1.6;
  color:var(--accent);
  border:3px solid var(--accent);
  border-radius:var(--p-radius);
  padding:.02rem .45rem;
}
.page-products .p-sec__title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-section);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.02em;
}
.page-products .p-sec__lead{
  margin:0;
  max-width:38em;
  font-size:var(--fs-lead);
  line-height:1.7;
  color:var(--muted);
}
.page-products .p-sec__grid{
  display:grid;
  gap:var(--p-rule);
  margin-top:1.6rem;
}
.page-products .p-sec__note{
  margin:0 0 1rem;
  padding-left:.9rem;
  border-left:3px solid var(--accent);
  font-size:.95rem;
  line-height:1.75;
  color:var(--muted);
}

.page-products .p-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.5rem;
}
.page-products .p-steps li{
  display:grid;
  grid-template-columns:1.7rem minmax(0,1fr);
  gap:.65rem;
  align-items:start;
  background:var(--panel);
  border:var(--edge);
  border-radius:var(--p-radius);
  padding:.5rem .7rem;
  font-size:.92rem;
  line-height:1.6;
}
.page-products .p-steps__n{
  display:grid;
  place-items:center;
  width:1.7rem;
  height:1.7rem;
  border-radius:2px;
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.8rem;
  font-weight:700;
  line-height:1;
}
.page-products .p-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.45rem;
}
.page-products .p-points li{
  position:relative;
  padding-left:1.05rem;
  font-size:.95rem;
  line-height:1.7;
  color:var(--muted);
}
.page-products .p-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:.5rem;
  height:.5rem;
  background:var(--accent);
  border-radius:1px;
  transform:rotate(45deg);
}

.page-products .p-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.page-products .p-chip{
  border:3px solid var(--line);
  border-radius:var(--p-radius);
  background:var(--panel);
  color:var(--muted);
  padding:.22rem .68rem;
  font-size:.88rem;
  line-height:1.6;
}
.page-products .p-chip--on{
  border-color:var(--cyan);
  background:var(--cyan);
  color:var(--ink);
  font-weight:700;
}
.page-products .p-chips__hint{
  margin:.7rem 0 0;
  font-size:var(--fs-small);
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--muted);
}

.page-products .p-cards{
  list-style:none;
  margin:1.1rem 0 0;
  padding:0;
  display:grid;
  gap:.6rem;
}
.page-products .p-card{
  background:var(--panel);
  border:var(--edge);
  border-radius:var(--p-radius);
  box-shadow:var(--hard-sm);
  padding:.7rem .8rem;
}
.page-products .p-card__meta{
  margin:.5rem 0 0;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--muted);
}
.page-products .p-card__time{
  margin:.1rem 0 0;
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
}

.page-products .p-fig{
  margin:1.2rem 0 0;
  border:var(--edge);
  border-radius:var(--p-radius);
  box-shadow:var(--hard);
  background:var(--raised);
  overflow:hidden;
}
.page-products .p-fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .p-fig figcaption{
  padding:.55rem .8rem .65rem;
  border-top:var(--edge);
  background:var(--panel);
  font-size:var(--fs-small);
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--muted);
}

.page-products .p-refresh{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.9rem;
  padding:.5rem .8rem;
  border:3px solid var(--orange);
  border-radius:var(--p-radius);
  background:var(--panel);
  font-size:.88rem;
  color:var(--muted);
}
.page-products .p-refresh strong{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:1.1rem;
  color:var(--orange);
}
.page-products .p-refresh__dot{
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,122,47,.18);
}

.page-products .p-track{
  margin-bottom:.2rem;
}
.page-products .p-track__rail{
  height:12px;
  border:3px solid var(--line);
  border-radius:2px;
  background:var(--panel);
  overflow:hidden;
}
.page-products .p-track__fill{
  display:block;
  height:100%;
  width:68%;
  background:linear-gradient(90deg, var(--purple), rgba(166,107,255,.32));
}
.page-products .p-track__marks{
  list-style:none;
  margin:.8rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.4rem;
}
.page-products .p-track__marks li{
  text-align:center;
  font-size:.72rem;
  letter-spacing:.06em;
  line-height:1.6;
  color:var(--muted);
}
.page-products .p-track__dot{
  display:block;
  width:.55rem;
  height:.55rem;
  margin:0 auto .4rem;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 0 3px rgba(166,107,255,.22);
}

.page-products .p-files{
  list-style:none;
  margin:0 0 1rem;
  padding:0;
  display:grid;
  gap:.5rem;
}
.page-products .p-file{
  display:flex;
  align-items:center;
  gap:.65rem;
  border:var(--edge);
  border-radius:var(--p-radius);
  background:var(--panel);
  padding:.5rem .7rem;
  font-size:.9rem;
  line-height:1.6;
}
.page-products .p-file__tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  padding:.05rem .4rem;
  border-radius:2px;
  background:var(--orange);
  color:var(--ink);
}
.page-products .p-file--sheet .p-file__tag{
  background:var(--purple);
  color:var(--ink);
}
.page-products .p-sec__more{
  margin:0;
  font-size:.9rem;
}
.page-products .p-sec__more a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:3px solid var(--line);
}
.page-products .p-sec__more a:hover{
  border-bottom-color:var(--cyan);
}

.page-products .p-tree{
  list-style:none;
  position:relative;
  margin:1.8rem 0 0;
  padding:0 0 0 3.2rem;
  display:grid;
  gap:1rem;
}
.page-products .p-tree::before{
  content:"";
  position:absolute;
  left:calc(1.4rem - 1.5px);
  top:.5rem;
  bottom:.5rem;
  width:3px;
  background:linear-gradient(180deg, var(--lime), var(--cyan) 46%, var(--purple));
}
.page-products .p-node{
  position:relative;
  background:var(--panel);
  border:var(--edge);
  border-radius:var(--p-radius);
  box-shadow:var(--hard-sm);
  padding:.8rem .9rem;
}
.page-products .p-node__dot{
  position:absolute;
  left:-2.9rem;
  top:.65rem;
  display:grid;
  place-items:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  border:3px solid var(--ink);
  background:var(--raised);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  line-height:1;
}
.page-products .p-node__title{
  margin:0 0 .2rem;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:700;
  line-height:1.4;
}
.page-products .p-node__body p{
  margin:0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
}

.page-products .p-cta{
  border-top:var(--edge);
  border-bottom:var(--edge);
  background:linear-gradient(120deg, var(--raised), var(--panel));
  padding:clamp(2rem,5vw,3.4rem) 0;
}
.page-products .p-cta__inner{
  display:grid;
  gap:1.4rem;
}
.page-products .p-cta__eyebrow{
  margin:0 0 .4rem;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.18em;
  color:var(--lime);
}
.page-products .p-cta h2{
  margin:0 0 .5rem;
  font-family:var(--font-display);
  font-size:var(--fs-section);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
}
.page-products .p-cta p{
  margin:0;
  max-width:40em;
  font-size:.98rem;
  line-height:1.8;
  color:var(--muted);
}
.page-products .p-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

@media (min-width:560px){
  .page-products .p-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:620px){
  .page-products .p-hero__facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:820px){
  .page-products .p-sec__grid{
    grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    align-items:start;
  }
  .page-products .p-sec:nth-of-type(even) .p-sec__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  }
  .page-products .p-sec:nth-of-type(even) .p-sec__side{
    order:2;
  }
  .page-products .p-tree{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-left:3.2rem;
    column-gap:1.6rem;
  }
}

@media (min-width:900px){
  .page-products .p-hero__grid{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:center;
  }
  .page-products .p-cta__inner{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
    align-items:center;
  }
}

@media (min-width:980px){
  .page-products .p-body{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:clamp(1.5rem,3vw,3rem);
    align-items:start;
  }
  .page-products .p-toc{
    position:sticky;
    top:1.25rem;
    margin-bottom:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .p-toc__list a,
  .page-products .p-fig img{
    transition:none;
  }
}
<<<END>>>
```