.page-products{
  --pr-pad: clamp(52px, 7vw, 104px);
  --pr-gap: clamp(18px, 3vw, 36px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  overflow-x: hidden;
}
.page-products .mono-num,
.page-products .score{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.page-products .pr-sec{
  padding: var(--pr-pad) 0;
  position: relative;
}
.page-products .pr-sec--version{ background: var(--night); }
.page-products .pr-sec--library{ background: var(--green-deep); }
.page-products .pr-sec--updates{ background: var(--ink); }
.page-products .pr-sec--devices{ background: var(--night); }
.page-products .pr-sec--table{ background: var(--ink); }
.page-products .pr-sec--rhythm{ background: var(--indigo); }
.page-products .pr-sec--cta{ background: var(--ink); padding-bottom: clamp(64px, 9vw, 120px); }

.page-products .eyebrow{
  display: inline-block;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}
.page-products .label-caps{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- 面包屑 ---------- */
.page-products .pr-crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.page-products .pr-crumbs .breadcrumb__item{ color: var(--mist); text-decoration: none; }
.page-products .pr-crumbs a.breadcrumb__item{ border-bottom: 1px solid transparent; }
.page-products .pr-crumbs a.breadcrumb__item:hover,
.page-products .pr-crumbs a.breadcrumb__item:focus-visible{
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.page-products .pr-crumbs .breadcrumb__item[aria-current="page"]{ color: var(--green); }
.page-products .pr-crumbs__sep{ color: var(--line-strong); }

/* ---------- 首屏 ---------- */
.page-products .pr-hero{
  position: relative;
  padding: clamp(28px, 4vw, 54px) 0 var(--pr-pad);
  background: var(--ink);
  overflow: hidden;
}
.page-products .pr-hero::after{
  content: "";
  position: absolute;
  right: -12%;
  top: 4%;
  width: min(50vw, 440px);
  height: min(50vw, 440px);
  background: var(--green-deep);
  clip-path: polygon(6% 0, 100% 20%, 74% 100%, 0 78%);
  opacity: 0.9;
  pointer-events: none;
}
.page-products .pr-hero .container{ position: relative; z-index: 1; }
.page-products .pr-hero__title{
  margin: 0 0 22px;
  font-size: clamp(38px, 8.4vw, 92px);
  line-height: 1.0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-products .pr-hero__lede{
  margin: 0 0 34px;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--mist);
}
.page-products .pr-facts{
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 2px solid var(--line);
}
.page-products .pr-facts li{
  background: var(--ink);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-products .pr-facts .mono-num{
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
}
.page-products .pr-facts span:last-child{
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mist);
}
.page-products .pr-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 按钮 ---------- */
.page-products .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--cap);
  border: 2px solid var(--line-strong);
  color: var(--paper);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-products .btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hard);
  border-color: var(--lime);
}
.page-products .btn:focus-visible{
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}
.page-products .btn--accent{ background: var(--green); border-color: var(--green); color: var(--ink); }
.page-products .btn--orange{ background: var(--orange); border-color: var(--orange); color: var(--ink); }
.page-products .btn--ghost{ background: transparent; }

/* ---------- 章节标题 ---------- */
.page-products .pr-head{ margin-bottom: var(--pr-gap); }
.page-products .pr-h2{
  margin: 0 0 16px;
  max-width: 24ch;
  font-size: clamp(26px, 4.6vw, 46px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.page-products .pr-h3{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.page-products .pr-lede{
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: var(--mist);
}

/* ---------- 版本切换 ---------- */
.page-products .ver-switch{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--line);
}
.page-products .ver-switch__pill{
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 2px solid var(--line-strong);
  border-radius: var(--cap);
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
    background 0.2s var(--ease), color 0.2s var(--ease);
}
.page-products .ver-switch__pill:hover{ transform: translateY(-2px); border-color: var(--green); }
.page-products .ver-switch__pill:focus-visible{ outline: 3px solid var(--lime); outline-offset: 3px; }
.page-products .ver-switch__pill.is-active{
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.page-products .ver-panel{ display: none; padding-top: 30px; }
.page-products .ver-panel--default{ display: block; }
.page-products .ver-panel:target{ display: block; }
.page-products .ver-body:has(.ver-panel:target) .ver-panel--default:not(:target){ display: none; }
.page-products .ver-panel__kicker{
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}
.page-products .ver-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.page-products .ver-list li{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.page-products .ver-list li:last-child{ border-bottom: 1px solid var(--line); }
.page-products .ver-list .mono-num{
  color: var(--green);
  font-size: 13px;
  padding-top: 4px;
}
.page-products .ver-list strong{
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 800;
}
.page-products .ver-list p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}

/* ---------- 球队库演示 ---------- */
.page-products .lib{ display: grid; gap: var(--pr-gap); }
.page-products .lib__board{
  display: grid;
  border: 2px solid var(--line-strong);
  background: rgba(6, 19, 28, 0.45);
}
.page-products .lib__col{ padding: 20px 18px 24px; }
.page-products .lib__col + .lib__col{ border-top: 2px solid var(--line-strong); }
.page-products .lib__caption{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.page-products .lib__list{ list-style: none; margin: 0; padding: 0; }
.page-products .lib__item{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.page-products .lib__item .mono-num{ color: var(--mist); font-size: 13px; }
.page-products .lib__item.is-active{
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.page-products .lib__item.is-active .mono-num{ color: var(--ink); }
.page-products .lib__hint{
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--mist);
  border-left: 2px solid var(--green);
  padding-left: 12px;
}
.page-products .lib__pin{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 2px solid var(--green);
  background: rgba(22, 224, 122, 0.08);
}
.page-products .lib__pin-label{
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.page-products .lib__pin-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.page-products .lib__pin-list li{
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--cap);
}
.page-products .lib__note{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--line-strong);
}
.page-products .lib__note p{
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--mist);
}
.page-products .lib__note p.mono-num{ color: var(--lime); }

/* ---------- 更新记录 ---------- */
.page-products .timeline{ list-style: none; margin: 0; padding: 0; }
.page-products .timeline__row{
  position: relative;
  padding-left: 84px;
  padding-bottom: 18px;
}
.page-products .timeline__row::before{
  content: "";
  position: absolute;
  left: 60px;
  top: 6px;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}
.page-products .timeline__row:last-child::before{
  background: linear-gradient(var(--line-strong), rgba(242, 246, 241, 0));
}
.page-products .timeline__mark{
  position: absolute;
  left: 0;
  top: 14px;
  width: 48px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--lime);
}
.page-products .timeline__group{
  border: 2px solid var(--line);
  background: rgba(12, 42, 46, 0.55);
  transition: border-color 0.2s var(--ease);
}
.page-products .timeline__group[open]{ border-color: var(--green); }
.page-products .timeline__group summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.page-products .timeline__group summary::-webkit-details-marker{ display: none; }
.page-products .timeline__group summary::after{
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--green);
}
.page-products .timeline__group[open] summary::after{ content: "–"; color: var(--orange); }
.page-products .timeline__group summary:hover{ color: var(--lime); }
.page-products .timeline__group summary:focus-visible{
  outline: 3px solid var(--lime);
  outline-offset: -3px;
}
.page-products .timeline__list{
  list-style: none;
  margin: 0;
  padding: 0 18px 18px;
}
.page-products .timeline__list li{
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist);
}
.page-products .timeline__list strong{ color: var(--paper); font-weight: 700; }

/* ---------- 设备排布 ---------- */
.page-products .device{
  display: grid;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.page-products .device:last-child{ margin-bottom: 0; }
.page-products .device__figure{
  margin: 0;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
  background: var(--ink);
}
.page-products .media__img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .media__caption{
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
  border-top: 2px solid var(--line);
}
.page-products .device__text p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--mist);
  max-width: 52ch;
}
.page-products .device__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .device__list li{
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--paper);
}
.page-products .device__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--green);
}
.page-products .device--phone .device__figure{ max-width: 340px; }

/* ---------- 对照表 ---------- */
.page-products .ct-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.page-products .ct-chip{
  padding: 8px 16px;
  border: 2px solid var(--line-strong);
  border-radius: var(--cap);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--paper);
}
.page-products .ct-chip.is-active{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.page-products .ct-wrap{
  overflow-x: auto;
  border: 2px solid var(--line-strong);
  background: rgba(12, 42, 46, 0.5);
}
.page-products .ct-table{
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}
.page-products .ct-table caption{
  caption-side: top;
  text-align: left;
  padding: 14px 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.page-products .ct-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--green-deep);
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--paper);
  border-bottom: 2px solid var(--green);
}
.page-products .ct-table td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
}
.page-products .ct-table tbody tr:nth-child(odd){ background: rgba(18, 59, 51, 0.55); }
.page-products .ct-table td.num{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.page-products .ct-table .score-cell{ color: var(--orange); }
.page-products .ct-note{
  margin: 16px 0 28px;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--mist);
  border-left: 2px solid var(--orange);
  padding-left: 14px;
}
.page-products .ct-figure{
  margin: 0;
  border: 2px solid var(--line);
}

/* ---------- 版本节奏 ---------- */
.page-products .rhythm{ display: grid; gap: var(--pr-gap); }
.page-products .rhythm__figure{
  margin: 0;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
}
.page-products .rhythm__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border-left: 2px solid var(--line-strong);
}
.page-products .rhythm__list li{
  padding: 16px 0 16px 18px;
  border-bottom: 1px solid var(--line);
}
.page-products .rhythm__list li:last-child{ border-bottom: 0; }
.page-products .rhythm__list strong{
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--lime);
  letter-spacing: 0.04em;
}
.page-products .rhythm__list p{
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--paper);
}

/* ---------- 收束 ---------- */
.page-products .pr-cta{ max-width: 880px; }
.page-products .pr-cta__title{ max-width: 20ch; }
.page-products .pr-cta__lede{
  margin: 0 0 30px;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist);
}
.page-products .pr-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px){
  .page-products .lib__board{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-products .lib__col + .lib__col{ border-top: 0; border-left: 2px solid var(--line-strong); }
  .page-products .pr-facts{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-products .ver-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .page-products .ver-list li:nth-last-child(2){ border-bottom: 1px solid var(--line); }
}

@media (min-width: 900px){
  .page-products .device{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 44px;
  }
  .page-products .device--phone{ grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .page-products .device--phone .device__figure{ order: 1; max-width: 340px; }
  .page-products .rhythm{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 44px;
  }
}

@media (min-width: 1024px){
  .page-products .lib{
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
    gap: 44px;
    align-items: stretch;
  }
  .page-products .lib__note{
    border-top: 0;
    border-left: 2px solid var(--line-strong);
    padding-top: 0;
    padding-left: 20px;
    justify-content: flex-start;
  }
  .page-products .lib__note p{ writing-mode: vertical-rl; letter-spacing: 0.28em; }
  .page-products .lib__note p:last-child{ letter-spacing: 0.2em; color: var(--line-strong); }
  .page-products .timeline__row{ padding-left: 108px; }
  .page-products .timeline__row::before{ left: 76px; }
  .page-products .timeline__mark{ width: 64px; }
}

@media (prefers-reduced-motion: reduce){
  .page-products .btn,
  .page-products .ver-switch__pill,
  .page-products .timeline__group{ transition: none; }
  .page-products .btn:hover,
  .page-products .ver-switch__pill:hover{ transform: none; box-shadow: none; }
}
<<<END>>>