.page-products{
  --pp-line:rgba(42,51,80,.18);
  --pp-line-strong:rgba(42,51,80,.4);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  overflow-x:hidden;
}
.page-products .eyebrow{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 10px;
}
.page-products .serif-index{
  font-family:var(--font-serif);
  font-size:var(--t-22);
  color:var(--rust);
  letter-spacing:.18em;
  margin:0 0 8px;
}
.page-products .sec__head{
  max-width:64ch;
  margin-bottom:clamp(22px,4vw,40px);
}
.page-products .sec__head h2{
  font-size:clamp(24px,4vw,40px);
  line-height:1.16;
  letter-spacing:-.015em;
  margin:0 0 12px;
}
.page-products .sec__lede{
  font-size:var(--t-16);
  line-height:1.75;
  color:rgba(16,27,60,.78);
  margin:0;
}
.page-products h3{
  font-size:var(--t-18);
  line-height:1.4;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
.page-products .prose{
  font-size:var(--t-16);
  line-height:1.8;
  color:rgba(16,27,60,.82);
  margin:0 0 16px;
}
.page-products .num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ---------- 面包屑 ---------- */
.page-products .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:20px 0 0;
  font-family:var(--font-mono);
  font-size:var(--t-12);
  letter-spacing:.05em;
  color:var(--mist);
}
.page-products .breadcrumb a{
  color:var(--mist);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.page-products .breadcrumb a:hover,
.page-products .breadcrumb a:focus-visible{
  color:var(--turq);
  border-bottom-color:var(--turq);
}
.page-products .breadcrumb__sep{ color:rgba(201,207,221,.5); }

/* ---------- 首屏 ---------- */
.page-products .hero{
  position:relative;
  background:var(--ink-deep);
  color:var(--paper);
  padding-bottom:clamp(36px,6vw,72px);
  overflow:hidden;
}
.page-products .hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:var(--flag-band);
}
.page-products .hero__grid{
  display:grid;
  gap:clamp(26px,5vw,48px);
  padding-top:clamp(28px,5vw,52px);
  align-items:start;
}
.page-products .hero h1{
  font-size:clamp(34px,7vw,64px);
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 16px;
  color:var(--paper);
}
.page-products .hero .eyebrow{ color:var(--gold); }
.page-products .lede{
  font-size:var(--t-16);
  line-height:1.8;
  color:rgba(246,242,233,.82);
  margin:0 0 24px;
  max-width:52ch;
}
.page-products .hero__act{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:26px;
}
.page-products .hero__meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding-top:18px;
  border-top:1px solid var(--pp-line-strong);
}
.page-products .hero__metaItem dt{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  letter-spacing:.06em;
  color:var(--mist);
  margin-bottom:6px;
}
.page-products .hero__metaItem dd{
  margin:0;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-22);
  color:var(--gold);
  line-height:1.2;
}
.page-products .hero__panel{
  position:relative;
  background:var(--ink);
  border:1px solid var(--line);
  padding:16px;
  box-shadow:10px 10px 0 rgba(0,0,0,.32);
}
.page-products .hero__panel::after{
  content:"";
  position:absolute;
  top:-1px;
  right:-1px;
  width:24px;
  height:24px;
  background:var(--gold);
  clip-path:polygon(100% 0,0 0,100% 100%);
}
.page-products .wire{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- 章节骨架 ---------- */
.page-products .sec{
  padding:clamp(40px,7vw,88px) 0;
  border-top:1px solid var(--pp-line);
}
.page-products .sec--mods{ border-top:0; }

/* ---------- 通用小件 ---------- */
.page-products .tag{
  display:inline-block;
  padding:2px 8px;
  font-family:var(--font-mono);
  font-size:var(--t-12);
  letter-spacing:.04em;
  border:1px solid currentColor;
  flex:0 0 auto;
}
.page-products .tag--turq{ color:#0E7D71; background:rgba(23,179,163,.16); }
.page-products .tag--gold{ color:#8A5F14; background:rgba(233,180,92,.22); }
.page-products .tag--rust{ color:#8E3524; background:rgba(178,70,46,.14); }
.page-products .tag--outline{ color:var(--ink); }

.page-products .ticks{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.page-products .ticks li{
  position:relative;
  padding-left:18px;
  font-size:var(--t-14);
  line-height:1.7;
  color:rgba(16,27,60,.8);
}
.page-products .ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  background:var(--turq);
  clip-path:polygon(0 0,100% 50%,0 100%);
}

.page-products .steps{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .steps li{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:var(--t-14);
  line-height:1.6;
  color:rgba(16,27,60,.85);
  padding-bottom:10px;
  border-bottom:1px dashed var(--pp-line);
}
.page-products .steps__no{
  color:var(--rust);
  font-size:var(--t-12);
  letter-spacing:.08em;
}
.page-products .steps--tight li{ padding-bottom:6px; }

.page-products .shot{
  margin:0;
  border:1px solid var(--line);
  background:var(--ink-deep);
  position:relative;
  overflow:hidden;
}
.page-products .shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-products .shot--phone img{ aspect-ratio:9/16; }
.page-products .shot--wide img{ aspect-ratio:16/9; }
.page-products .shot--switch img{ aspect-ratio:10/7; }
.page-products .shot--chart img{ aspect-ratio:4/3; }
.page-products .shot--perf img{ aspect-ratio:3/2; }
.page-products .shot__cap{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  line-height:1.6;
  color:var(--mist);
  padding:10px 12px;
  border-top:1px solid var(--line);
}

/* ---------- 折叠组 ---------- */
.page-products .acc__item{
  position:relative;
  background:#FBF8F1;
  border:1px solid var(--pp-line-strong);
  margin-bottom:12px;
}
.page-products .acc__trigger{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:14px 16px;
  background:none;
  border:0;
  font-family:var(--font-display);
  font-size:var(--t-16);
  font-weight:700;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.page-products .acc__trigger:focus-visible{
  outline:2px solid var(--turq);
  outline-offset:-2px;
}
.page-products .acc__trigger:hover .acc__sign{ border-color:var(--gold); }
.page-products .acc__sign{
  position:relative;
  flex:0 0 12px;
  width:12px;
  height:12px;
  border:1px solid var(--rust);
  transition:border-color .2s ease;
}
.page-products .acc__sign::before,
.page-products .acc__sign::after{
  content:"";
  position:absolute;
  background:var(--rust);
}
.page-products .acc__sign::before{ left:50%; top:2px; bottom:2px; width:1px; transform:translateX(-50%); }
.page-products .acc__sign::after{ top:50%; left:2px; right:2px; height:1px; transform:translateY(-50%); }
.page-products .acc__item[data-open="true"] .acc__sign::before{ display:none; }
.page-products .acc__inner{
  padding:0 16px 16px;
}
.page-products .acc__inner p{
  margin:0 0 10px;
  font-size:var(--t-14);
  line-height:1.75;
  color:rgba(16,27,60,.8);
}

/* ---------- 壹 · 模块拼贴 ---------- */
.page-products .mods{
  display:grid;
  gap:24px;
}
.page-products .mods__visual .shot{ margin-bottom:0; }
.page-products .mods__cap,
.page-products .shot__cap{ margin:0; }

/* ---------- 贰 · 老用户 ---------- */
.page-products .legacy{
  display:grid;
  gap:26px;
}
.page-products .legacy__note{
  font-size:var(--t-14);
  line-height:1.7;
  color:#5A6480;
  margin:0 0 18px;
}
.page-products .legacy__card{
  background:#FBF8F1;
  border:1px solid var(--pp-line-strong);
  box-shadow:8px 8px 0 rgba(42,51,80,.1);
  padding:16px;
  align-self:start;
}
.page-products .panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--pp-line);
}
.page-products .panel__tag{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  letter-spacing:.06em;
  padding:2px 8px;
  border:1px solid currentColor;
}
.page-products .panel__tag--turq{ color:#0E7D71; background:rgba(23,179,163,.16); }
.page-products .panel__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-14);
  color:var(--rust);
}
.page-products .facts{
  margin:0;
  display:grid;
  gap:12px;
}
.page-products .facts__row{
  display:grid;
  gap:3px;
}
.page-products .facts__row dt{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  letter-spacing:.08em;
  color:var(--rust);
}
.page-products .facts__row dd{
  margin:0;
  font-size:var(--t-14);
  line-height:1.65;
  color:rgba(16,27,60,.85);
}

/* ---------- 叁 · 轮次与联赛 ---------- */
.page-products .sec--rounds .shot--wide{
  margin-bottom:clamp(24px,4vw,40px);
}
.page-products .rounds{
  display:grid;
  gap:28px;
}
.page-products .rounds__demo .shot{ margin-bottom:14px; }
.page-products .chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.page-products .chip{
  font-family:var(--font-mono);
  font-size:var(--t-14);
  padding:6px 12px;
  border:1px solid var(--pp-line-strong);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.page-products .chip .num{ font-size:var(--t-12); opacity:.7; }
.page-products .chip[aria-pressed="true"]{
  background:var(--turq);
  border-color:var(--turq);
  color:var(--ink-deep);
  font-weight:700;
}
.page-products .chip[aria-pressed="true"] .num{ opacity:.85; }
.page-products .chip:hover{ border-color:var(--gold); }
.page-products .chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.page-products .cmp{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .cmp__row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  font-size:var(--t-14);
}
.page-products .cmp__label{ color:rgba(16,27,60,.75); }
.page-products .cmp__bars{ display:grid; gap:4px; }
.page-products .cmp__val{
  font-size:var(--t-12);
  color:#5A6480;
}
.page-products .bar{
  display:block;
  height:7px;
  background:rgba(42,51,80,.14);
}
.page-products .bar__fill{
  display:block;
  height:100%;
  background:var(--cyan);
}
.page-products .bar--amber .bar__fill{ background:var(--amber); }
.page-products .rounds__hint{
  font-size:var(--t-12);
  line-height:1.6;
  color:#5A6480;
  margin:0;
}

/* ---------- 肆 · 指标 ---------- */
.page-products .stats{
  display:grid;
  gap:26px;
}
.page-products .metrics{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
}
.page-products .metrics li{
  font-size:var(--t-14);
  line-height:1.6;
  color:rgba(16,27,60,.85);
  padding-left:12px;
  position:relative;
}
.page-products .metrics li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:5px;
  height:5px;
  background:var(--gold);
}
.page-products .stats__side .shot{ margin-bottom:16px; }
.page-products .stats__note{
  font-size:var(--t-12);
  line-height:1.65;
  color:#5A6480;
  margin:10px 0 0;
}

/* ---------- 伍 · 性能 ---------- */
.page-products .perf{
  display:grid;
  gap:26px;
}
.page-products .perf__side .shot{ margin-bottom:16px; }
.page-products .perf__stats{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products .perf__stats li{
  display:grid;
  gap:2px;
  padding:12px 14px;
  background:var(--ink);
  color:var(--paper);
  border-left:3px solid var(--turq);
}
.page-products .perf__stats li:nth-child(2){ border-left-color:var(--gold); }
.page-products .perf__stats li:nth-child(3){ border-left-color:var(--rust); }
.page-products .perf__num{
  font-size:var(--t-22);
  color:var(--cyan);
}
.page-products .perf__stats li:nth-child(2) .perf__num{ color:var(--gold); }
.page-products .perf__stats li:nth-child(3) .perf__num{ color:var(--paper); }
.page-products .perf__label{
  font-size:var(--t-12);
  letter-spacing:.05em;
  color:var(--mist);
}

/* ---------- 陆 · 版本 ---------- */
.page-products .vers{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border-left:1px solid var(--pp-line-strong);
}
.page-products .vers__item{
  position:relative;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:baseline;
  gap:10px 14px;
  padding:16px 0 16px 20px;
  border-bottom:1px solid var(--pp-line);
}
.page-products .vers__item::before{
  content:"";
  position:absolute;
  left:-5px;
  top:22px;
  width:9px;
  height:9px;
  background:var(--paper);
  border:1px solid var(--rust);
  transform:rotate(45deg);
}
.page-products .vers__item--now::before{
  background:var(--turq);
  border-color:var(--turq);
}
.page-products .vers__no{
  font-size:var(--t-18);
  color:var(--ink);
  letter-spacing:.02em;
}
.page-products .vers__year{
  font-size:var(--t-12);
  color:var(--rust);
  letter-spacing:.08em;
}
.page-products .vers__body{
  grid-column:1 / -1;
  margin:0;
  font-size:var(--t-14);
  line-height:1.75;
  color:rgba(16,27,60,.8);
}

/* ---------- 尾段导航 ---------- */
.page-products .sec--next{
  background:var(--ink);
  color:var(--paper);
  border-top:0;
}
.page-products .sec--next h2{
  font-size:clamp(22px,3.4vw,32px);
  letter-spacing:-.01em;
  margin:0 0 20px;
  color:var(--paper);
}
.page-products .next{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.page-products .next__item a{
  display:grid;
  gap:4px;
  padding:16px 18px;
  background:var(--ink);
  text-decoration:none;
  color:inherit;
  border-left:3px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.page-products .next__item a:hover,
.page-products .next__item a:focus-visible{
  background:var(--ink-deep);
  border-left-color:var(--turq);
}
.page-products .next__t{
  font-weight:700;
  font-size:var(--t-16);
  color:var(--paper);
}
.page-products .next__d{
  font-size:var(--t-14);
  line-height:1.6;
  color:var(--mist);
}

/* ---------- 响应式 ---------- */
@media (min-width:720px){
  .page-products .metrics{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .page-products .perf__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .page-products .next{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-products .cmp__row{ grid-template-columns:80px minmax(0,1fr) 72px; }
}

@media (min-width:900px){
  .page-products .hero__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  }
  .page-products .legacy{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:40px;
  }
  .page-products .rounds{
    grid-template-columns:minmax(0,6fr) minmax(0,6fr);
    gap:40px;
  }
  .page-products .stats{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:36px;
  }
  .page-products .perf{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:40px;
    align-items:start;
  }
  .page-products .next{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:1024px){
  .page-products .mods{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:26px 28px;
    align-items:start;
  }
  .page-products .mods__visual{ grid-column:1 / span 4; }
  .page-products .mods__list{ grid-column:5 / span 8; }
  .page-products .mods__list .acc__item:nth-child(2){ margin-left:7%; }
  .page-products .mods__list .acc__item:nth-child(3){ margin-right:9%; }
  .page-products .mods__list .acc__item:nth-child(4){ margin-left:3%; }
  .page-products .vers__item{
    grid-template-columns:92px 92px minmax(0,1fr);
    align-items:center;
    padding:18px 0 18px 24px;
  }
  .page-products .vers__body{ grid-column:auto; }
}

@media (prefers-reduced-motion:reduce){
  .page-products *{
    transition:none !important;
    animation:none !important;
  }
}
<<<END>>>