.page-products {
  background: var(--court);
  color: var(--cream);
  font-family: var(--sans);
}

/* ---------- 面包屑 ---------- */
.page-products .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  padding: 18px 0 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .crumbs a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-products .crumbs a:hover,
.page-products .crumbs a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  position: relative;
  padding: clamp(24px, 4.4vw, 58px) 0 clamp(20px, 3.4vw, 44px);
}

.page-products .cat-hero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 900px) {
  .page-products .cat-hero__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }
}

.page-products .cat-hero__lead {
  position: relative;
}

.page-products .cat-hero__lead::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  width: 6px;
  height: 58px;
  background: linear-gradient(180deg, var(--lime), var(--orange));
  transform: skewX(-13deg);
}

.page-products .eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-products .cat-hero h1 {
  margin: 12px 0 18px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(32px, 5.8vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.page-products .cat-hero__sub {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 46px);
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.page-products .cat-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .cat-hero__facts .num {
  font-family: var(--mono);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lime);
}

.page-products .cat-fact__k {
  font-size: 0.84rem;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.page-products .cat-hero__figure {
  margin: 0;
  position: relative;
}

.page-products .cat-hero__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%);
}

.page-products .cat-hero__figure::after {
  content: "CN / CATALOG";
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: var(--court);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--mist);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* ---------- 栏目卡片流 ---------- */
.page-products .cat-flow {
  padding: clamp(18px, 3vw, 40px) 0 clamp(30px, 5vw, 62px);
}

.page-products .cat-flow__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-products .cat-flow__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.01em;
  color: var(--cream);
}

.page-products .cat-flow__hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .cat-flow__track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 22px;
}

.page-products .cat-flow__track:focus-visible {
  outline: 2px solid var(--lime-hi);
  outline-offset: -2px;
}

.page-products .cat-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(238px, 26vw, 296px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  background: var(--char);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.page-products .cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 255, 77, 0.5);
}

.page-products .cat-card__no {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-products .cat-card__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-products .cat-card__text {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-card__link {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.4);
}

.page-products .cat-card__link:hover,
.page-products .cat-card__link:focus-visible {
  color: var(--lime-hi);
  border-bottom-color: var(--lime-hi);
}

/* ---------- 主体两栏 ---------- */
.page-products .cat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: start;
}

@media (min-width: 1000px) {
  .page-products .cat-layout {
    grid-template-columns: 196px minmax(0, 1fr);
  }
}

.page-products .rail {
  position: static;
}

.page-products .rail__label {
  margin: 0;
  padding: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-products .rail__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 10px;
  list-style: none;
  overflow-x: auto;
  background: rgba(18, 58, 49, 0.7);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-products .rail__list a {
  display: block;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--mist);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.page-products .rail__list a:hover,
.page-products .rail__list a:focus-visible {
  color: var(--cream);
  background: rgba(242, 234, 216, 0.05);
}

.page-products .rail__list a[aria-current="true"] {
  color: var(--lime);
  border-bottom-color: var(--lime);
  background: rgba(200, 255, 77, 0.08);
}

@media (min-width: 1000px) {
  .page-products .rail {
    position: sticky;
    top: calc(var(--header-h) + 22px);
  }

  .page-products .rail__list {
    display: block;
    overflow: visible;
    padding: 6px 0;
    background: transparent;
    border: none;
    border-left: 2px solid var(--line);
    clip-path: none;
  }

  .page-products .rail__list li + li {
    margin-top: 2px;
  }

  .page-products .rail__list a {
    padding: 9px 14px;
    white-space: normal;
    font-size: 0.86rem;
    border-bottom: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
  }

  .page-products .rail__list a[aria-current="true"] {
    border-bottom: none;
    border-left-color: var(--lime);
  }
}

/* ---------- 区块通用 ---------- */
.page-products .cat-sec {
  padding: clamp(38px, 5.4vw, 72px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 26px);
}

.page-products .cat-body > .cat-sec:first-child {
  border-top: none;
  padding-top: clamp(18px, 3vw, 34px);
}

.page-products .cat-sec__head {
  margin-bottom: clamp(20px, 3vw, 36px);
}

.page-products .cat-sec__head h2 {
  margin: 10px 0 14px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(25px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.page-products .cat-sec__lede {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products a {
  color: var(--lime);
}

.page-products a:hover,
.page-products a:focus-visible {
  color: var(--lime-hi);
}

/* ---------- 编号解剖 ---------- */
.page-products .cat-anatomy {
  display: grid;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(20px, 3vw, 36px);
  background: linear-gradient(158deg, var(--deep), var(--char) 78%);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

@media (min-width: 780px) {
  .page-products .cat-anatomy {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }
}

.page-products .cat-anatomy__code {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(26px, 4.4vw, 52px);
  letter-spacing: 0.04em;
  color: var(--lime);
  word-break: break-word;
}

.page-products .cat-anatomy__legend {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-anatomy__legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
  line-height: 1.72;
  color: rgba(242, 234, 216, 0.8);
}

.page-products .cat-anatomy__legend li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .cat-anatomy__legend b {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
}

/* ---------- 三条信息带 ---------- */
.page-products .cat-bands {
  display: grid;
  gap: var(--gap);
  margin: clamp(20px, 2.8vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .cat-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .cat-band .panel__no {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.page-products .cat-band .panel__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--cream);
}

.page-products .cat-band__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.74;
  color: var(--mist);
}

/* ---------- 读数带 ---------- */
.page-products .cat-readout {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  margin: 0 0 clamp(24px, 3.4vw, 40px);
  padding: 0;
  list-style: none;
}

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

.page-products .cat-readout__item {
  padding: 6px 0 6px 18px;
  border-left: 2px solid var(--lime);
}

.page-products .cat-readout__item .num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.page-products .cat-readout__item .num--lime {
  color: var(--lime);
}

.page-products .cat-readout__item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--mist);
}

.page-products .cat-compare {
  padding: clamp(20px, 2.8vw, 32px);
  background: var(--char);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .cat-compare__title {
  margin: 0 0 12px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--cream);
}

.page-products .cat-compare p {
  margin: 0;
  max-width: 66ch;
  font-size: 0.94rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-compare__link {
  margin-top: 14px !important;
}

.page-products .cat-compare__link a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

/* ---------- 十二章规则 ---------- */
.page-products .cat-rules {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .page-products .cat-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3.4vw, 48px);
  }
}

.page-products .cat-rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-rules__no {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.page-products .cat-rules__name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
}

.page-products .cat-rules__desc {
  display: block;
  margin-top: 5px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-rules__note {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--orange);
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.76;
  color: rgba(242, 234, 216, 0.74);
}

/* ---------- 赛事日历 ---------- */
.page-products .cat-cal {
  display: grid;
  gap: clamp(22px, 3.4vw, 46px);
}

@media (min-width: 900px) {
  .page-products .cat-cal {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    align-items: start;
  }
}

.page-products .cat-switch {
  position: relative;
}

.page-products .cat-switch__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .cat-switch__bar {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--char);
  border: 1px solid var(--line);
}

.page-products .cat-switch__bar label {
  padding: 9px 18px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.page-products .cat-switch__bar label:hover {
  color: var(--cream);
}

#cal-list:checked ~ .cat-switch__bar label[for="cal-list"],
#cal-timeline:checked ~ .cat-switch__bar label[for="cal-timeline"] {
  background: var(--orange);
  color: var(--court);
  font-weight: 700;
}

#cal-list:focus-visible ~ .cat-switch__bar label[for="cal-list"],
#cal-timeline:focus-visible ~ .cat-switch__bar label[for="cal-timeline"] {
  outline: 2px solid var(--lime-hi);
  outline-offset: 2px;
}

.page-products .cat-switch__panes {
  padding: clamp(16px, 2.4vw, 26px);
  background: var(--char);
  border: 1px solid var(--line);
}

.page-products .cat-switch__pane {
  display: none;
}

#cal-list:checked ~ .cat-switch__panes .cat-switch__pane--list,
#cal-timeline:checked ~ .cat-switch__panes .cat-switch__pane--timeline {
  display: block;
}

.page-products .cat-switch__note {
  margin: 16px 0 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-cal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-cal-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-cal-list li:last-child {
  border-bottom: none;
}

.page-products .cat-cal-list__k {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--lime);
  white-space: nowrap;
}

.page-products .cat-cal-list__v {
  font-size: 0.88rem;
  color: rgba(242, 234, 216, 0.82);
}

.page-products .cat-cal-tl {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.page-products .cat-cal-tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line);
}

.page-products .cat-cal-tl li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
}

.page-products .cat-cal-tl li::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 18px;
  width: 9px;
  height: 9px;
  background: var(--lime);
}

.page-products .cat-cal-tl__t {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--orange);
  letter-spacing: 0.06em;
}

.page-products .cat-cal-tl__m {
  font-size: 0.88rem;
  color: rgba(242, 234, 216, 0.82);
}

.page-products .cat-cal__meta {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-cal__meta li {
  padding-left: 16px;
  border-left: 2px solid var(--deep);
  font-size: 0.88rem;
  line-height: 1.74;
  color: var(--mist);
}

.page-products .cat-cal__meta b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--cream);
}

.page-products .cat-cal__figure {
  margin: 0 auto;
  max-width: 320px;
}

.page-products .cat-cal__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- 两版阵容 ---------- */
.page-products .cat-lineup {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

@media (min-width: 840px) {
  .page-products .cat-lineup {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
}

.page-products .cat-lineup__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--orange);
  transform: rotate(90deg);
}

@media (min-width: 840px) {
  .page-products .cat-lineup__arrow {
    transform: none;
    padding: 0 4px;
  }
}

.page-products .cat-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.8vw, 30px);
  background: var(--char);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .cat-plan--prev {
  border-color: rgba(126, 150, 145, 0.42);
}

.page-products .cat-plan--live {
  border-color: rgba(255, 122, 47, 0.56);
  background: linear-gradient(155deg, rgba(255, 122, 47, 0.12), var(--char) 62%);
}

.page-products .cat-plan__no {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-products .cat-plan--prev .cat-plan__no {
  color: var(--mist);
}

.page-products .cat-plan__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--cream);
}

.page-products .cat-plan__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.76;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-plan__list {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-plan__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--mist);
}

.page-products .cat-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--orange);
}

.page-products .cat-plan--prev .cat-plan__list li::before {
  background: var(--mist);
}

.page-products .cat-lineup__figure {
  margin: clamp(22px, 3.2vw, 34px) 0 0;
}

.page-products .cat-lineup__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.page-products .cat-changes {
  margin-top: clamp(20px, 3vw, 32px);
}

.page-products .cat-changes__k {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-products .cat-changes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-products .cat-changes__text {
  margin: 0;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

/* ---------- 视频集锦 ---------- */
.page-products .cat-video {
  display: grid;
  gap: clamp(22px, 3.4vw, 46px);
}

@media (min-width: 900px) {
  .page-products .cat-video {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.page-products .cat-video__figure {
  margin: 0;
}

.page-products .cat-video__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}

.page-products .cat-video__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-products .cat-video__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-video__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-video__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .cat-video__list .num {
  font-family: var(--mono);
  font-size: clamp(18px, 2.3vw, 26px);
  line-height: 1.1;
  color: var(--cream);
}

.page-products .cat-video__list .num--lime {
  color: var(--lime);
}

.page-products .cat-video__list span:last-child {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-video__note {
  margin: 20px 0 0;
  font-size: 0.9rem;
  line-height: 1.76;
  color: rgba(242, 234, 216, 0.76);
}

.page-products .cat-video__note a {
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

/* ---------- 场景对照表 ---------- */
.page-products .cat-pick__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.page-products .cat-pick {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.page-products .cat-pick__cap {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--mist);
  background: var(--court);
  border-bottom: 1px solid var(--line);
}

.page-products .cat-pick th,
.page-products .cat-pick td {
  text-align: left;
  vertical-align: top;
  padding: 16px;
  line-height: 1.72;
}

.page-products .cat-pick thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--lime);
  background: var(--char);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.page-products .cat-pick tbody th {
  font-weight: 600;
  color: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-pick tbody td {
  color: rgba(242, 234, 216, 0.76);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-pick tbody tr:last-child th,
.page-products .cat-pick tbody tr:last-child td {
  border-bottom: none;
}

.page-products .cat-pick tbody tr {
  transition: background 0.18s ease;
}

.page-products .cat-pick tbody tr:hover,
.page-products .cat-pick tbody tr:focus-within {
  background: rgba(200, 255, 77, 0.07);
}

.page-products .cat-pick tbody tr:hover th,
.page-products .cat-pick tbody tr:focus-within th {
  box-shadow: inset 3px 0 0 var(--lime);
}

.page-products .cat-pick a {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

.page-products .cat-pick__more {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.76);
}

.page-products .cat-pick__more a {
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

/* ---------- 功能演进 ---------- */
.page-products .cat-era {
  position: relative;
  overflow: hidden;
  margin-top: clamp(30px, 5vw, 64px);
  padding: clamp(42px, 6vw, 82px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}

.page-products .cat-era__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-products .cat-era__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
}

.page-products .cat-era__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--court) 6%, rgba(11, 31, 26, 0.4) 58%, var(--court) 100%);
}

.page-products .cat-era__inner {
  position: relative;
  z-index: 1;
}

.page-products .cat-era__title {
  margin: 10px 0 clamp(24px, 3.4vw, 40px);
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.page-products .cat-era__list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-era__list li {
  position: relative;
  padding-left: 26px;
}

.page-products .cat-era__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--lime);
}

.page-products .cat-era__y {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-products .cat-era__list p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: rgba(242, 234, 216, 0.8);
}

@media (min-width: 860px) {
  .page-products .cat-era__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .page-products .cat-era__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: var(--line);
  }

  .page-products .cat-era__list {
    position: relative;
  }

  .page-products .cat-era__list li {
    padding: 28px 20px 0 0;
  }

  .page-products .cat-era__list li::before {
    top: 0;
  }
}

/* ---------- 收尾 ---------- */
.page-products .cat-final {
  padding: clamp(34px, 5vw, 64px) 0 clamp(48px, 7vw, 92px);
}

.page-products .cat-cta {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(24px, 3.8vw, 50px);
  background: linear-gradient(142deg, var(--deep), var(--char) 74%);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

@media (min-width: 800px) {
  .page-products .cat-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.page-products .cat-cta__title {
  margin: 0 0 14px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.page-products .cat-cta__text {
  margin: 0;
  max-width: 60ch;
  font-size: 0.94rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cat-card {
    transition: none;
  }

  .page-products .cat-card:hover {
    transform: none;
  }
}
</style>
<<<END>>>= = = = = = = = = = = = = = = = = = = = = =
不，等等——我犯了个错误。标记是 ``，应该写 `<style>` 吗？不对——指令说“page_css 当前页面专属 CSS”，但没有说一定要包在 `<style>` 里。规则 13 说“不要用 Markdown 代码围栏，不要输出标记以外的说明”。

嗯，那我是该输出裸 CSS，还是包在 `<style>` 里？规则 2 说 main_html 不应该重复生成 style——这暗示 page_css 应该是 `<style>` 内容。为了避免歧义，我会把 CSS 裸着写，不加 `<style>` 标签，因为标记 `` 本身就是包装器。

其实我上面已经写了一个 `</style>`，那不一致。让我重新输出干净的。

另外我还需要检查一下横向滚动的 `padding-inline` 用的是 100vw——`calc((100vw - var(--wrap)) / 2)`。因为 `--wrap:1220px`，所以当视口 `>= 1220 + 2*gutter` 时，这个值就是正的。没问题。

但要注意：`max(var(--gutter), calc(...))`——如果 `calc` 是负的，`max` 会选 `gutter`。没问题。

让我把完整的 CSS 不带 style 标签重新输出一遍。

另外：我写了 `.page-products .cat-era__list::before`，但没把它设成 `position:relative`——我后面确实给 `.cat-era__list` 设了 `position: relative`，顺序有点乱但没关系。

其实我把 `position: relative` 放在媒体查询里 `::before` 之后了——CSS 优先级不受顺序影响，所以没关系。

让我把最终答案整理干净。
<main id="main-content" class="page-products">
  <div class="wrap">
    <nav class="crumbs" aria-label="页面位置">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span>档案目录</span>
    </nav>
  </div>

  <section class="cat-hero">
    <div class="wrap cat-hero__inner">
      <div class="cat-hero__lead">
        <p class="eyebrow">档案目录 · 五大栏目</p>
        <h1>查球队、查规则、确认首发——入口都在档案目录</h1>
        <p class="cat-hero__sub">易倍体育CN频道把每个赛季的资料编成一套能长期翻查的目录：一支球队当季谁在进球、今晚首发有没有临时变动、某个判罚该翻哪一章，都能顺着入口直接找到。要横向比较两三支球队，或者只是想赛后回看一个进球，也各有各的位置。</p>
        <ul class="cat-hero__facts">
          <li>
            <span class="num">1,284</span>
            <span class="cat-fact__k">支球队档案</span>
          </li>
          <li>
            <span class="num">46</span>
            <span class="cat-fact__k">个联赛与杯赛</span>
          </li>
          <li>
            <span class="num">8,600</span>
            <span class="cat-fact__k">条视频集锦</span>
          </li>
        </ul>
      </div>
      <figure class="cat-hero__figure">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="多层档案卡片错位排列的抽象渲染，卡片带编号标签与切角">
      </figure>
    </div>
  </section>

  <section class="cat-flow" aria-labelledby="flow-title">
    <div class="wrap cat-flow__head">
      <h2 id="flow-title" class="cat-flow__title">五个栏目，先认个门</h2>
      <p class="cat-flow__hint">横向滑动查看，键盘左右方向键同样可用</p>
    </div>
    <ul class="cat-flow__track" tabindex="0" aria-label="五大栏目入口卡片">
      <li class="cat-card">
        <p class="cat-card__no">01</p>
        <h3 class="cat-card__title">球队档案</h3>
        <p class="cat-card__text">一支球队的射手榜、近期战绩与阵容变更收在同一个条目里。</p>
        <a class="cat-card__link" href="#sec-squad">进入球队档案库</a>
      </li>
      <li class="cat-card">
        <p class="cat-card__no">02</p>
        <h3 class="cat-card__title">赛事日历</h3>
        <p class="cat-card__text">按联赛、轮次、开赛时间三档归类，球队和状态都能筛。</p>
        <a class="cat-card__link" href="#sec-calendar">查看赛事日历</a>
      </li>
      <li class="cat-card">
        <p class="cat-card__no">03</p>
        <h3 class="cat-card__title">阵容对照</h3>
        <p class="cat-card__text">预告版与临场确认版并排，四类变化逐项标出来。</p>
        <a class="cat-card__link" href="#sec-lineup">看两版对照</a>
      </li>
      <li class="cat-card">
        <p class="cat-card__no">04</p>
        <h3 class="cat-card__title">视频集锦</h3>
        <p class="cat-card__text">3 到 6 分钟一条，关键片段可以在进度条上直接跳。</p>
        <a class="cat-card__link" href="#sec-video">翻视频集锦</a>
      </li>
      <li class="cat-card">
        <p class="cat-card__no">05</p>
        <h3 class="cat-card__title">规则说明</h3>
        <p class="cat-card__text">十二章赛制与判罚条款，每章配一条常见判例解读。</p>
        <a class="cat-card__link" href="#sec-rules">读规则说明</a>
      </li>
    </ul>
  </section>

  <div class="wrap cat-layout">
    <aside class="rail" data-rail>
      <p class="rail__label">本页索引</p>
      <ul class="rail__list">
        <li><a href="#sec-squad">球队档案库</a></li>
        <li><a href="#sec-scorers">射手榜与数据带</a></li>
        <li><a href="#sec-rules">规则说明十二章</a></li>
        <li><a href="#sec-calendar">赛事日历</a></li>
        <li><a href="#sec-lineup">两版阵容对照</a></li>
        <li><a href="#sec-video">视频集锦</a></li>
        <li><a href="#sec-pick">按场景选入口</a></li>
      </ul>
    </aside>

    <div class="cat-body">
      <section class="section cat-sec" id="sec-squad" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">01 / 球队档案</p>
          <h2>球队档案库</h2>
          <p class="cat-sec__lede">易倍体育CN频道球队档案目前收录 1,284 支球队，横跨 46 个联赛与杯赛。每支球队占一条独立编号，队名调整、联赛归属变化，编号里对应的那一段跟着改，找起来的路子不变。</p>
        </header>

        <div class="cat-anatomy" data-reveal>
          <p class="cat-anatomy__code">PL · 0142 · 25</p>
          <ul class="cat-anatomy__legend">
            <li><b>PL</b><span>联赛代码，46 个联赛与杯赛各占一段</span></li>
            <li><b>0142</b><span>球队序号，同一支球队长期沿用</span></li>
            <li><b>25</b><span>赛季标记，进入新赛季只改这一段</span></li>
          </ul>
        </div>

        <ul class="cat-bands" data-reveal>
          <li class="panel cat-band">
            <p class="panel__no">BAND 01</p>
            <h3 class="panel__title">当赛季射手榜</h3>
            <p class="cat-band__text">排到前 20 名，每人带出场与进球两项读数，进球多是因为出场多还是效率高，放在一起就能分清。</p>
          </li>
          <li class="panel cat-band">
            <p class="panel__no">BAND 02</p>
            <h3 class="panel__title">近期战绩</h3>
            <p class="cat-band__text">最近的比赛结果按时间排开，胜负走势与对手强弱摆在同一屏，看状态不用来回翻日历。</p>
          </li>
          <li class="panel cat-band">
            <p class="panel__no">BAND 03</p>
            <h3 class="panel__title">阵容变更</h3>
            <p class="cat-band__text">谁进名单、谁离队、号码有没有动，按变更时间倒序排，跟阵容对照里的标注能对上。</p>
          </li>
        </ul>
      </section>

      <section class="section cat-sec" id="sec-scorers" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">02 / 排名与读数</p>
          <h2>射手榜怎么读，多久刷新一次</h2>
          <p class="cat-sec__lede">射手榜跟着球队档案一起走：北京时间每天 09:00 与 21:00 各刷新一轮，赛程密集的时候加开一轮凌晨更新。榜上不只有进球总数，出场数摆在旁边，短期爆发和长期稳定能分开判断。</p>
        </header>

        <ul class="cat-readout" data-reveal>
          <li class="cat-readout__item">
            <span class="num num--lime">20</span>
            <p>榜单前 20 名，按当赛季进球数从高到低排列。</p>
          </li>
          <li class="cat-readout__item">
            <span class="num">09:00 · 21:00</span>
            <p>北京时间两轮刷新，赛程密集期加开凌晨一轮。</p>
          </li>
          <li class="cat-readout__item">
            <span class="num num--lime">3</span>
            <p>射手榜、近期战绩、阵容变更三条信息带并列在同一页。</p>
          </li>
        </ul>

        <div class="cat-compare" data-reveal>
          <h3 class="cat-compare__title">几支球队摆在一起看</h3>
          <p>想比较两名射手，或者想看清楚两支球队近况的差别，可以同时选两到三支球队，射手榜与近期战绩会并排铺开，纵向对齐同一列，横向对到同一轮次。比完想只留一支继续往下看，随时可以收回来。</p>
          <p class="cat-compare__link"><a href="/stories/">看近期赛事前瞻与阵容变化 →</a></p>
        </div>
      </section>

      <section class="section cat-sec" id="sec-rules" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">03 / 规则说明</p>
          <h2>十二章规则说明，从赛制查到伤停补时</h2>
          <p class="cat-sec__lede">规则说明分成十二章，每章只讲一件事，末尾附一条常见判例。刚开始看球的人可以从头顺着读，看了多年的球迷遇到争议判罚直接翻对应章节，读的是同一份内容。</p>
        </header>

        <ol class="cat-rules" data-reveal>
          <li><span class="cat-rules__no">01</span><span><span class="cat-rules__name">赛制</span><span class="cat-rules__desc">联赛与杯赛的基本框架，赛季怎么分段、参赛队伍怎么来。</span></span></li>
          <li><span class="cat-rules__no">02</span><span><span class="cat-rules__name">积分与排名</span><span class="cat-rules__desc">胜平负各计几分，同分时依次比哪些指标。</span></span></li>
          <li><span class="cat-rules__no">03</span><span><span class="cat-rules__name">判罚</span><span class="cat-rules__desc">直接任意球、间接任意球与罚球区内的判罚区别。</span></span></li>
          <li><span class="cat-rules__no">04</span><span><span class="cat-rules__name">越位</span><span class="cat-rules__desc">判断的关键位置在哪儿，传球瞬间与触球瞬间的区别。</span></span></li>
          <li><span class="cat-rules__no">05</span><span><span class="cat-rules__name">犯规与红黄牌</span><span class="cat-rules__desc">哪些动作给黄牌、哪些直接红牌，两黄变一红怎么算。</span></span></li>
          <li><span class="cat-rules__no">06</span><span><span class="cat-rules__name">换人</span><span class="cat-rules__desc">可换人数、换人次数与中场、加时阶段的处理方式。</span></span></li>
          <li><span class="cat-rules__no">07</span><span><span class="cat-rules__name">伤停补时</span><span class="cat-rules__desc">补时时间怎么定，补时阶段还能不能继续补。</span></span></li>
          <li><span class="cat-rules__no">08</span><span><span class="cat-rules__name">点球</span><span class="cat-rules__desc">判罚条件、主罚流程与门将可移动的时点。</span></span></li>
          <li><span class="cat-rules__no">09</span><span><span class="cat-rules__name">加时与点球决胜</span><span class="cat-rules__desc">什么时候进入加时，加时未分胜负后的决胜流程。</span></span></li>
          <li><span class="cat-rules__no">10</span><span><span class="cat-rules__name">赛事阶段与晋级</span><span class="cat-rules__desc">小组赛、淘汰赛的分界，同分与净胜球影响的晋级结果。</span></span></li>
          <li><span class="cat-rules__no">11</span><span><span class="cat-rules__name">纪律与停赛</span><span class="cat-rules__desc">累计到几张牌停赛，停赛会不会跨赛事延续。</span></span></li>
          <li><span class="cat-rules__no">12</span><span><span class="cat-rules__name">赛程与延期</span><span class="cat-rules__desc">比赛推迟或中断后如何补赛，赛程调整对轮次的影响。</span></span></li>
        </ol>
        <p class="cat-rules__note">每章末的判例会写明这条规则在什么情形下被触发、当时判成什么结果，看完能对上刚才那场球的争议点。</p>
      </section>

      <section class="section cat-sec" id="sec-calendar" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">04 / 赛事日历</p>
          <h2>易倍体育iOS旧版赛事日历</h2>
          <p class="cat-sec__lede">支持 iOS 12 及以上系统，安装包约 38 MB，用得久一些的设备也装得上。日历按联赛、轮次与开赛时间三档归类，球队、日期、比赛状态都能拿来筛一遍。换手机之后重新登录，收藏的球队和筛好的条件还留在原处，不用重新设一遍。</p>
        </header>

        <div class="cat-cal">
          <div class="cat-cal__main" data-reveal>
            <div class="cat-switch">
              <input type="radio" name="calview" id="cal-list" class="cat-switch__in" checked>
              <input type="radio" name="calview" id="cal-timeline" class="cat-switch__in">
              <div class="cat-switch__bar">
                <label for="cal-list">列表视图</label>
                <label for="cal-timeline">时间轴视图</label>
              </div>
              <div class="cat-switch__panes">
                <div class="cat-switch__pane cat-switch__pane--list">
                  <ul class="cat-cal-list">
                    <li>
                      <span class="cat-cal-list__k">第 12 轮</span>
                      <span class="cat-cal-list__v">周六 20:00 开赛</span>
                      <span class="tag tag--orange">未开始</span>
                    </li>
                    <li>
                      <span class="cat-cal-list__k">第 12 轮</span>
                      <span class="cat-cal-list__v">周六 22:30 开赛</span>
                      <span class="tag tag--orange">未开始</span>
                    </li>
                    <li>
                      <span class="cat-cal-list__k">第 11 轮</span>
                      <span class="cat-cal-list__v">周日 19:00 开赛</span>
                      <span class="tag tag--cream">已结束</span>
                    </li>
                    <li>
                      <span class="cat-cal-list__k">第 11 轮</span>
                      <span class="cat-cal-list__v">周日 21:15 开赛</span>
                      <span class="tag tag--cream">已结束</span>
                    </li>
                  </ul>
                  <p class="cat-switch__note">按联赛分组之后，同一轮的场次会挨在一起，翻起来是一条直线。</p>
                </div>
                <div class="cat-switch__pane cat-switch__pane--timeline">
                  <ul class="cat-cal-tl">
                    <li><span class="cat-cal-tl__t">19:00</span><span class="cat-cal-tl__m">第 11 轮 · 已结束</span></li>
                    <li><span class="cat-cal-tl__t">21:15</span><span class="cat-cal-tl__m">第 11 轮 · 已结束</span></li>
                    <li><span class="cat-cal-tl__t">20:00</span><span class="cat-cal-tl__m">第 12 轮 · 未开始</span></li>
                    <li><span class="cat-cal-tl__t">22:30</span><span class="cat-cal-tl__m">第 12 轮 · 未开始</span></li>
                  </ul>
                  <p class="cat-switch__note">同一份收藏和筛选条件，换成时间轴看的是开赛先后顺序。</p>
                </div>
              </div>
            </div>

            <ul class="cat-cal__meta">
              <li><b>每赛季约 3,600 场</b>赛事按轮次编入日历，条目提前 14 天录入，开赛前 24 小时再复核一次。</li>
              <li><b>两种视图共用一套设置</b>，在列表里筛好的球队，切到时间轴还是那几支。</li>
              <li><b>收藏跟着账号走</b>，换设备重新登录后继续看，历史筛选用不着重建。</li>
            </ul>
          </div>

          <figure class="cat-cal__figure">
            <img src="{zhanqunpic:h:1280w:720}" width="720" height="1280" alt="手机轮廓内以线框表示的赛事列表与时间轴视图，无品牌标识" loading="lazy" decoding="async">
          </figure>
        </div>
      </section>

      <section class="section cat-sec" id="sec-lineup" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">05 / 阵容对照</p>
          <h2>开赛前十分钟，两个版本一起看</h2>
          <p class="cat-sec__lede">名单从来不是一次成型的。先是赛前预告版，按伤停情况与随队消息给出预判；到了开赛前十分钟再推一版临场确认版，按正式提交的名单逐位核对。两版并排摆在同一屏里，哪几个位置动过，扫一眼就清楚。</p>
        </header>

        <div class="cat-lineup" data-reveal>
          <article class="cat-plan cat-plan--prev">
            <p class="cat-plan__no">预告版</p>
            <h3 class="cat-plan__title">赛前发布</h3>
            <p class="cat-plan__text">按伤停与轮换消息给出的预计名单，适合提前安排观赛，也方便和朋友聊一聊谁该首发。</p>
            <ul class="cat-plan__list">
              <li>按位置排布的首发预判</li>
              <li>替补席与伤停情况一并标注</li>
              <li>赛前更新一次，随消息变化调整</li>
            </ul>
          </article>
          <div class="cat-lineup__arrow" aria-hidden="true">→</div>
          <article class="cat-plan cat-plan--live">
            <p class="cat-plan__no">确认版</p>
            <h3 class="cat-plan__title">开赛前十分钟</h3>
            <p class="cat-plan__text">按提交名单核对后的最终版本，读阵容先看这一版，再回头对预告版找差异。</p>
            <ul class="cat-plan__list">
              <li>推送时点固定在开赛前十分钟</li>
              <li>与预告版并排，差异逐项标出</li>
              <li>赛后仍保留在赛事记录里</li>
            </ul>
          </article>
        </div>

        <figure class="cat-lineup__figure" data-reveal>
          <img src="{zhanqunpic:h:720w:1200}" width="1200" height="720" alt="左右并列的两块阵容面板，中间以暖橙箭头与变化标记连接" loading="lazy" decoding="async">
        </figure>

        <div class="cat-changes" data-reveal>
          <p class="cat-changes__k">两版之间的差异按四类标出</p>
          <ul class="cat-changes__list">
            <li class="tag tag--orange">首发替换</li>
            <li class="tag tag--orange">位置调整</li>
            <li class="tag tag--orange">伤停补位</li>
            <li class="tag tag--orange">号码更正</li>
          </ul>
          <p class="cat-changes__text">每条标注都能看到变动前后的两个位置。赛前十分钟内出现的临时调整，一样会落进确认版里，所以读阵容的次序是先确认版、后预告版。</p>
        </div>
      </section>

      <section class="section cat-sec" id="sec-video" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">06 / 视频集锦</p>
          <h2>回看一个进球，直接跳到那一分钟</h2>
          <p class="cat-sec__lede">集锦库累计 8,600 条，比赛结束后 90 分钟内上线，单条 3 到 6 分钟，不拖时长。2024 年起支持 1080P 播放，进度条上直接标出关键片段的节点，点一下就能跳到该看的那几秒。</p>
        </header>

        <div class="cat-video">
          <figure class="cat-video__figure" data-reveal>
            <img src="{zhanqunpic:h:720w:1280}" width="1280" height="720" alt="视频播放界面的抽象示意，进度条上标出关键片段节点" loading="lazy" decoding="async">
          </figure>
          <div class="cat-video__body" data-reveal>
            <ul class="cat-video__tags">
              <li class="tag tag--lime">关键进球</li>
              <li class="tag">战术回放</li>
              <li class="tag">门将扑救</li>
              <li class="tag">全场精华</li>
            </ul>
            <ul class="cat-video__list">
              <li><span class="num num--lime">90</span><span>分钟内上线，赛后不用等太久</span></li>
              <li><span class="num num--lime">3–6</span><span>分钟一条，一场球的重点都在里面</span></li>
              <li><span class="num num--lime">1080P</span><span>播放，关键片段支持直接定位</span></li>
            </ul>
            <p class="cat-video__note">集锦页面可以把两版阵容调到同一屏，一边看回放一边确认当时站在场上的都有谁。相关入口整理在 <a href="/stories/">赛场记录</a> 中。</p>
          </div>
        </div>
      </section>

      <section class="section cat-sec" id="sec-pick" data-section>
        <header class="cat-sec__head" data-reveal>
          <p class="eyebrow">07 / 找到你的入口</p>
          <h2>四类需求，四条走法</h2>
          <p class="cat-sec__lede">多数人来的时候心里只有一个问题。下面这张表把常见需求对到具体栏目，照着走就行。</p>
        </header>

        <div class="cat-pick__scroll" data-reveal>
          <table class="cat-pick">
            <caption class="cat-pick__cap">按需求选择栏目，表格可横向滚动</caption>
            <thead>
              <tr>
                <th scope="col">你的需求</th>
                <th scope="col">去哪个栏目</th>
                <th scope="col">具体怎么走</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">想知道一支球队当季谁在进球</th>
                <td><a href="#sec-squad">球队档案库</a></td>
                <td>按队名或编号找到条目，第一条信息带就是射手榜前 20 名，右边并排给出出场与进球。</td>
              </tr>
              <tr>
                <th scope="row">想弄清一次判罚凭什么这么吹</th>
                <td><a href="#sec-rules">规则说明</a></td>
                <td>先看对应章节的条文，再读章末的常见判例，两段连着看就能对上刚才那一幕。</td>
              </tr>
              <tr>
                <th scope="row">想在开球前确认首发有没有变</th>
                <td><a href="#sec-lineup">阵容对照</a></td>
                <td>开赛前十分钟打开确认版，与预告版并排比对，四类变化会直接标在位置上。</td>
              </tr>
              <tr>
                <th scope="row">想回看某个进球的完整过程</th>
                <td><a href="#sec-video">视频集锦</a></td>
                <td>按标签筛出关键进球，拖动进度条上的节点跳到那一分钟，1080P 直接看。</td>
              </tr>
            </tbody>
          </table>
        </div>

        <p class="cat-pick__more">表里没写到的情况，可以先去 <a href="/faqs/">常见问答</a> 看看换设备、日历兼容与两版阵容的读法，或者直接 <a href="/consult/">联系咨询</a> 把事情说清楚，工作日内有人接。</p>
      </section>
    </div>
  </div>

  <section class="cat-era" aria-labelledby="era-title">
    <div class="cat-era__bg">
      <img src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="深色背景上的横向刻度时间轴，节点以青柠圆点标记" loading="lazy" decoding="async">
    </div>
    <div class="wrap cat-era__inner">
      <p class="eyebrow">功能介绍</p>
      <h2 id="era-title" class="cat-era__title">从第一批记录到两版对照</h2>
      <ol class="cat-era__list" data-reveal>
        <li>
          <span class="cat-era__y">2016</span>
          <p>建立第一批赛事记录，从那时起每场比赛都留下条目。</p>
        </li>
        <li>
          <span class="cat-era__y">2018</span>
          <p>球队档案模块成型，射手榜与战绩开始按队归集。</p>
        </li>
        <li>
          <span class="cat-era__y">2020</span>
          <p>赛事日历上线，赛程从纸面搬进可以筛选的列表。</p>
        </li>
        <li>
          <span class="cat-era__y">2022</span>
          <p>两版阵容对照推出，赛前预告与临场确认并排出现。</p>
        </li>
        <li>
          <span class="cat-era__y">2024</span>
          <p>CN 频道改版，集锦支持 1080P 与关键片段直接跳转。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="cat-final">
    <div class="wrap cat-cta" data-reveal>
      <div class="cat-cta__lead">
        <h2 class="cat-cta__title">先拿一支你在意的球队试一遍</h2>
        <p class="cat-cta__text">挑一支常看的球队，把它的档案、接下来几轮的日历和上一场的两版阵容连着过一遍，这套资料合不合用基本就有答案了。用得顺手，再慢慢铺到其他球队。</p>
      </div>
      <div class="cat-cta__acts">
        <a class="btn btn--primary" href="/consult/">联系咨询</a>
        <a class="btn btn--ghost" href="/faqs/">常见问答</a>
        <a class="btn btn--ghost" href="/story/">品牌档案</a>
      </div>
    </div>
  </section>
</main>

.page-products {
  background: var(--court);
  color: var(--cream);
  font-family: var(--sans);
}

/* ---------- 面包屑 ---------- */
.page-products .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  padding: 18px 0 4px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .crumbs a {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-products .crumbs a:hover,
.page-products .crumbs a:focus-visible {
  color: var(--lime);
  border-bottom-color: var(--lime);
}

/* ---------- 首屏 ---------- */
.page-products .cat-hero {
  position: relative;
  padding: clamp(24px, 4.4vw, 58px) 0 clamp(20px, 3.4vw, 44px);
}

.page-products .cat-hero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 900px) {
  .page-products .cat-hero__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }
}

.page-products .cat-hero__lead {
  position: relative;
}

.page-products .cat-hero__lead::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  width: 6px;
  height: 58px;
  background: linear-gradient(180deg, var(--lime), var(--orange));
  transform: skewX(-13deg);
}

.page-products .eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-products .cat-hero h1 {
  margin: 12px 0 18px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(32px, 5.8vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.page-products .cat-hero__sub {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 46px);
  margin: 30px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.page-products .cat-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-products .cat-hero__facts .num {
  font-family: var(--mono);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lime);
}

.page-products .cat-fact__k {
  font-size: 0.84rem;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.page-products .cat-hero__figure {
  margin: 0;
  position: relative;
}

.page-products .cat-hero__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%);
}

.page-products .cat-hero__figure::after {
  content: "CN / CATALOG";
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 14px;
  background: var(--court);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--mist);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* ---------- 栏目卡片流 ---------- */
.page-products .cat-flow {
  padding: clamp(18px, 3vw, 40px) 0 clamp(30px, 5vw, 62px);
}

.page-products .cat-flow__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-products .cat-flow__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.01em;
  color: var(--cream);
}

.page-products .cat-flow__hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-products .cat-flow__track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 22px;
}

.page-products .cat-flow__track:focus-visible {
  outline: 2px solid var(--lime-hi);
  outline-offset: -2px;
}

.page-products .cat-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(238px, 26vw, 296px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  background: var(--char);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.page-products .cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 255, 77, 0.5);
}

.page-products .cat-card__no {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-products .cat-card__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.page-products .cat-card__text {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-card__link {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--lime);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.4);
}

.page-products .cat-card__link:hover,
.page-products .cat-card__link:focus-visible {
  color: var(--lime-hi);
  border-bottom-color: var(--lime-hi);
}

/* ---------- 主体两栏 ---------- */
.page-products .cat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: start;
}

@media (min-width: 1000px) {
  .page-products .cat-layout {
    grid-template-columns: 196px minmax(0, 1fr);
  }
}

.page-products .rail {
  position: static;
}

.page-products .rail__label {
  margin: 0;
  padding: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-products .rail__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 10px;
  list-style: none;
  overflow-x: auto;
  background: rgba(18, 58, 49, 0.7);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-products .rail__list a {
  display: block;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--mist);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.page-products .rail__list a:hover,
.page-products .rail__list a:focus-visible {
  color: var(--cream);
  background: rgba(242, 234, 216, 0.05);
}

.page-products .rail__list a[aria-current="true"] {
  color: var(--lime);
  border-bottom-color: var(--lime);
  background: rgba(200, 255, 77, 0.08);
}

@media (min-width: 1000px) {
  .page-products .rail {
    position: sticky;
    top: calc(var(--header-h) + 22px);
  }

  .page-products .rail__list {
    display: block;
    overflow: visible;
    padding: 6px 0;
    background: transparent;
    border: none;
    border-left: 2px solid var(--line);
    clip-path: none;
  }

  .page-products .rail__list li + li {
    margin-top: 2px;
  }

  .page-products .rail__list a {
    padding: 9px 14px;
    white-space: normal;
    font-size: 0.86rem;
    border-bottom: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
  }

  .page-products .rail__list a[aria-current="true"] {
    border-bottom: none;
    border-left-color: var(--lime);
  }
}

/* ---------- 区块通用 ---------- */
.page-products .cat-sec {
  padding: clamp(38px, 5.4vw, 72px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 26px);
}

.page-products .cat-body > .cat-sec:first-child {
  border-top: none;
  padding-top: clamp(18px, 3vw, 34px);
}

.page-products .cat-sec__head {
  margin-bottom: clamp(20px, 3vw, 36px);
}

.page-products .cat-sec__head h2 {
  margin: 10px 0 14px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(25px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.page-products .cat-sec__lede {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products a {
  color: var(--lime);
}

.page-products a:hover,
.page-products a:focus-visible {
  color: var(--lime-hi);
}

/* ---------- 编号解剖 ---------- */
.page-products .cat-anatomy {
  display: grid;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(20px, 3vw, 36px);
  background: linear-gradient(158deg, var(--deep), var(--char) 78%);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

@media (min-width: 780px) {
  .page-products .cat-anatomy {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }
}

.page-products .cat-anatomy__code {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(26px, 4.4vw, 52px);
  letter-spacing: 0.04em;
  color: var(--lime);
  word-break: break-word;
}

.page-products .cat-anatomy__legend {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-anatomy__legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
  line-height: 1.72;
  color: rgba(242, 234, 216, 0.8);
}

.page-products .cat-anatomy__legend li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .cat-anatomy__legend b {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
}

/* ---------- 三条信息带 ---------- */
.page-products .cat-bands {
  display: grid;
  gap: var(--gap);
  margin: clamp(20px, 2.8vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

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

.page-products .cat-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-products .cat-band .panel__no {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--orange);
}

.page-products .cat-band .panel__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--cream);
}

.page-products .cat-band__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.74;
  color: var(--mist);
}

/* ---------- 读数带 ---------- */
.page-products .cat-readout {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  margin: 0 0 clamp(24px, 3.4vw, 40px);
  padding: 0;
  list-style: none;
}

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

.page-products .cat-readout__item {
  padding: 6px 0 6px 18px;
  border-left: 2px solid var(--lime);
}

.page-products .cat-readout__item .num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.page-products .cat-readout__item .num--lime {
  color: var(--lime);
}

.page-products .cat-readout__item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--mist);
}

.page-products .cat-compare {
  padding: clamp(20px, 2.8vw, 32px);
  background: var(--char);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .cat-compare__title {
  margin: 0 0 12px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--cream);
}

.page-products .cat-compare p {
  margin: 0;
  max-width: 66ch;
  font-size: 0.94rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-compare__link {
  margin-top: 14px;
}

.page-products .cat-compare__link a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

/* ---------- 十二章规则 ---------- */
.page-products .cat-rules {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .page-products .cat-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3.4vw, 48px);
  }
}

.page-products .cat-rules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-rules__no {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--orange);
}

.page-products .cat-rules__name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
}

.page-products .cat-rules__desc {
  display: block;
  margin-top: 5px;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-rules__note {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--orange);
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.76;
  color: rgba(242, 234, 216, 0.74);
}

/* ---------- 赛事日历 ---------- */
.page-products .cat-cal {
  display: grid;
  gap: clamp(22px, 3.4vw, 46px);
}

@media (min-width: 900px) {
  .page-products .cat-cal {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
    align-items: start;
  }
}

.page-products .cat-switch {
  position: relative;
}

.page-products .cat-switch__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .cat-switch__bar {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--char);
  border: 1px solid var(--line);
}

.page-products .cat-switch__bar label {
  padding: 9px 18px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--mist);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.page-products .cat-switch__bar label:hover {
  color: var(--cream);
}

.page-products #cal-list:checked ~ .cat-switch__bar label[for="cal-list"],
.page-products #cal-timeline:checked ~ .cat-switch__bar label[for="cal-timeline"] {
  background: var(--orange);
  color: var(--court);
  font-weight: 700;
}

.page-products #cal-list:focus-visible ~ .cat-switch__bar label[for="cal-list"],
.page-products #cal-timeline:focus-visible ~ .cat-switch__bar label[for="cal-timeline"] {
  outline: 2px solid var(--lime-hi);
  outline-offset: 2px;
}

.page-products .cat-switch__panes {
  padding: clamp(16px, 2.4vw, 26px);
  background: var(--char);
  border: 1px solid var(--line);
}

.page-products .cat-switch__pane {
  display: none;
}

.page-products #cal-list:checked ~ .cat-switch__panes .cat-switch__pane--list,
.page-products #cal-timeline:checked ~ .cat-switch__panes .cat-switch__pane--timeline {
  display: block;
}

.page-products .cat-switch__note {
  margin: 16px 0 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-cal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-cal-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-cal-list li:last-child {
  border-bottom: none;
}

.page-products .cat-cal-list__k {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--lime);
  white-space: nowrap;
}

.page-products .cat-cal-list__v {
  font-size: 0.88rem;
  color: rgba(242, 234, 216, 0.82);
}

.page-products .cat-cal-tl {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.page-products .cat-cal-tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line);
}

.page-products .cat-cal-tl li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
}

.page-products .cat-cal-tl li::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 18px;
  width: 9px;
  height: 9px;
  background: var(--lime);
}

.page-products .cat-cal-tl__t {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--orange);
  letter-spacing: 0.06em;
}

.page-products .cat-cal-tl__m {
  font-size: 0.88rem;
  color: rgba(242, 234, 216, 0.82);
}

.page-products .cat-cal__meta {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-cal__meta li {
  padding-left: 16px;
  border-left: 2px solid var(--deep);
  font-size: 0.88rem;
  line-height: 1.74;
  color: var(--mist);
}

.page-products .cat-cal__meta b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--cream);
}

.page-products .cat-cal__figure {
  margin: 0 auto;
  max-width: 320px;
}

.page-products .cat-cal__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- 两版阵容 ---------- */
.page-products .cat-lineup {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

@media (min-width: 840px) {
  .page-products .cat-lineup {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
}

.page-products .cat-lineup__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--orange);
  transform: rotate(90deg);
}

@media (min-width: 840px) {
  .page-products .cat-lineup__arrow {
    transform: none;
    padding: 0 4px;
  }
}

.page-products .cat-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.8vw, 30px);
  background: var(--char);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .cat-plan--prev {
  border-color: rgba(126, 150, 145, 0.42);
}

.page-products .cat-plan--live {
  border-color: rgba(255, 122, 47, 0.56);
  background: linear-gradient(155deg, rgba(255, 122, 47, 0.12), var(--char) 62%);
}

.page-products .cat-plan__no {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--orange);
}

.page-products .cat-plan--prev .cat-plan__no {
  color: var(--mist);
}

.page-products .cat-plan__title {
  margin: 0;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--cream);
}

.page-products .cat-plan__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.76;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-plan__list {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-plan__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--mist);
}

.page-products .cat-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--orange);
}

.page-products .cat-plan--prev .cat-plan__list li::before {
  background: var(--mist);
}

.page-products .cat-lineup__figure {
  margin: clamp(22px, 3.2vw, 34px) 0 0;
}

.page-products .cat-lineup__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.page-products .cat-changes {
  margin-top: clamp(20px, 3vw, 32px);
}

.page-products .cat-changes__k {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-products .cat-changes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-products .cat-changes__text {
  margin: 0;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

/* ---------- 视频集锦 ---------- */
.page-products .cat-video {
  display: grid;
  gap: clamp(22px, 3.4vw, 46px);
}

@media (min-width: 900px) {
  .page-products .cat-video {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.page-products .cat-video__figure {
  margin: 0;
}

.page-products .cat-video__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}

.page-products .cat-video__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-products .cat-video__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-video__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-video__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-products .cat-video__list .num {
  font-family: var(--mono);
  font-size: clamp(18px, 2.3vw, 26px);
  line-height: 1.1;
  color: var(--cream);
}

.page-products .cat-video__list .num--lime {
  color: var(--lime);
}

.page-products .cat-video__list span:last-child {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .cat-video__note {
  margin: 20px 0 0;
  font-size: 0.9rem;
  line-height: 1.76;
  color: rgba(242, 234, 216, 0.76);
}

.page-products .cat-video__note a {
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

/* ---------- 场景对照表 ---------- */
.page-products .cat-pick__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.page-products .cat-pick {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.page-products .cat-pick__cap {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--mist);
  background: var(--court);
  border-bottom: 1px solid var(--line);
}

.page-products .cat-pick th,
.page-products .cat-pick td {
  text-align: left;
  vertical-align: top;
  padding: 16px;
  line-height: 1.72;
}

.page-products .cat-pick thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--lime);
  background: var(--char);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.page-products .cat-pick tbody th {
  font-weight: 600;
  color: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-pick tbody td {
  color: rgba(242, 234, 216, 0.76);
  border-bottom: 1px solid var(--line-soft);
}

.page-products .cat-pick tbody tr:last-child th,
.page-products .cat-pick tbody tr:last-child td {
  border-bottom: none;
}

.page-products .cat-pick tbody tr {
  transition: background 0.18s ease;
}

.page-products .cat-pick tbody tr:hover,
.page-products .cat-pick tbody tr:focus-within {
  background: rgba(200, 255, 77, 0.07);
}

.page-products .cat-pick tbody tr:hover th,
.page-products .cat-pick tbody tr:focus-within th {
  box-shadow: inset 3px 0 0 var(--lime);
}

.page-products .cat-pick a {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

.page-products .cat-pick__more {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.76);
}

.page-products .cat-pick__more a {
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 255, 77, 0.42);
}

/* ---------- 功能演进 ---------- */
.page-products .cat-era {
  position: relative;
  overflow: hidden;
  margin-top: clamp(30px, 5vw, 64px);
  padding: clamp(42px, 6vw, 82px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}

.page-products .cat-era__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-products .cat-era__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
}

.page-products .cat-era__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--court) 6%, rgba(11, 31, 26, 0.42) 58%, var(--court) 100%);
}

.page-products .cat-era__inner {
  position: relative;
  z-index: 1;
}

.page-products .cat-era__title {
  margin: 10px 0 clamp(24px, 3.4vw, 40px);
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.page-products .cat-era__list {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .cat-era__list li {
  position: relative;
  padding-left: 26px;
}

.page-products .cat-era__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--lime);
}

.page-products .cat-era__y {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-products .cat-era__list p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.72;
  color: rgba(242, 234, 216, 0.8);
}

@media (min-width: 860px) {
  .page-products .cat-era__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .page-products .cat-era__list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: var(--line);
  }

  .page-products .cat-era__list li {
    padding: 28px 20px 0 0;
  }

  .page-products .cat-era__list li::before {
    top: 0;
  }
}

/* ---------- 收尾 ---------- */
.page-products .cat-final {
  padding: clamp(34px, 5vw, 64px) 0 clamp(48px, 7vw, 92px);
}

.page-products .cat-cta {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(24px, 3.8vw, 50px);
  background: linear-gradient(142deg, var(--deep), var(--char) 74%);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

@media (min-width: 800px) {
  .page-products .cat-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.page-products .cat-cta__title {
  margin: 0 0 14px;
  font-family: var(--hei);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--cream);
}

.page-products .cat-cta__text {
  margin: 0;
  max-width: 60ch;
  font-size: 0.94rem;
  line-height: 1.78;
  color: rgba(242, 234, 216, 0.78);
}

.page-products .cat-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cat-card {
    transition: none;
  }

  .page-products .cat-card:hover {
    transform: none;
  }
}