.page-products {
  --pd-rule: var(--yk-line);
  --pd-gap: 24px;
  padding-bottom: 0;
}

/* ---------- 面包屑 ---------- */
.page-products .pd-crumb {
  background: var(--yk-ink);
  border-bottom: 1px solid var(--pd-rule);
}
.page-products .pd-crumb__inner {
  padding-top: 14px;
  padding-bottom: 14px;
}
.page-products .pd-crumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--yk-mist);
}
.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--yk-stone);
}
.page-products .yk-breadcrumb__item a {
  color: var(--yk-mist);
  text-decoration: none;
}
.page-products .yk-breadcrumb__item a:hover,
.page-products .yk-breadcrumb__item a:focus-visible {
  color: var(--yk-cyan);
}
.page-products .yk-breadcrumb__item[aria-current="page"] {
  color: var(--yk-cream);
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--yk-ink-3) 0%, var(--yk-ink-2) 42%, var(--yk-ink) 100%);
  border-bottom: 1px solid var(--pd-rule);
  padding: 48px 0 64px;
}
.page-products .pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 78, 62, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 78, 62, .55) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .16;
  pointer-events: none;
}
.page-products .pd-hero::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(59, 232, 200, .16) 0%, transparent 68%);
  pointer-events: none;
}
.page-products .pd-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.page-products .pd-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yk-cyan);
}
.page-products .pd-hero__mark {
  color: var(--yk-stone);
}
.page-products .pd-hero__title {
  margin: 0 0 20px;
  font-family: var(--yk-font-sans);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--yk-cream);
  max-width: 16em;
}
.page-products .pd-hero__lede {
  max-width: 40em;
  color: var(--yk-mist);
}
.page-products .pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.page-products .pd-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}
.page-products .pd-hero__stat {
  margin: 0;
  padding: 16px 14px;
  background: var(--yk-ink-2);
}
.page-products .pd-hero__stat .yk-stat__value {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  color: var(--yk-cyan);
  letter-spacing: -0.02em;
}
.page-products .pd-hero__stat .yk-stat__label {
  font-family: var(--yk-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--yk-mist);
}
.page-products .pd-hero__figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--pd-rule);
  transform: rotate(-0.6deg);
}
.page-products .pd-hero__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .pd-hero__figcap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 12px;
  background: rgba(6, 26, 21, .84);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--yk-cyan);
}

/* ---------- 主体两栏 ---------- */
.page-products .pd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 88px;
}

.page-products .pd-index {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.page-products .pd-index__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid var(--pd-rule);
  background: var(--yk-ink-2);
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--yk-mist);
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms var(--yk-ease), border-color 180ms var(--yk-ease), background-color 180ms var(--yk-ease);
}
.page-products .pd-index__num {
  color: var(--yk-stone);
  font-size: 11px;
}
.page-products .pd-index__link:hover,
.page-products .pd-index__link:focus-visible {
  border-color: var(--yk-cyan);
  color: var(--yk-cream);
}
.page-products .pd-index__link[aria-current="true"] {
  border-color: var(--yk-cyan);
  background: var(--yk-ink-3);
  color: var(--yk-cyan);
}
.page-products .pd-index__link[aria-current="true"] .pd-index__num {
  color: var(--yk-cyan);
}

/* ---------- 模块 ---------- */
.page-products .pd-mod {
  scroll-margin-top: 96px;
}
.page-products .pd-mod + .pd-mod {
  margin-top: 72px;
  padding-top: 64px;
  border-top: 1px solid var(--pd-rule);
}
.page-products .pd-mod .yk-section__title {
  font-size: clamp(22px, 4.6vw, 30px);
}
.page-products .pd-mod > .yk-prose {
  margin-top: 18px;
  color: var(--yk-mist);
}
.page-products .pd-mod__figure {
  margin: 28px 0 0;
  border: 1px solid var(--pd-rule);
}
.page-products .pd-mod__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 比分卡 ---------- */
.page-products .pd-scorecard {
  margin: 26px 0 0;
  padding: 20px;
  background: linear-gradient(135deg, var(--yk-ink-3) 0%, var(--yk-ink-2) 100%);
  border: 1px solid var(--pd-rule);
  border-left: 3px solid var(--yk-cyan);
}
.page-products .pd-scorecard__svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-products .pd-scorecard__frame {
  fill: none;
  stroke: var(--pd-rule);
  stroke-width: 1;
}
.page-products .pd-scorecard__line {
  stroke: var(--pd-rule);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.page-products .pd-scorecard__main {
  font-family: var(--yk-font-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--yk-cyan);
}
.page-products .pd-scorecard__sub {
  font-family: var(--yk-font-mono);
  font-size: 12px;
  fill: var(--yk-mist);
}
.page-products .pd-scorecard__tag {
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  fill: var(--yk-mist);
}
.page-products .pd-scorecard__tag--hot {
  fill: var(--yk-orange);
}

.page-products .pd-field-table {
  margin-top: 28px;
  width: 100%;
}
.page-products .pd-field-table__cap {
  text-align: left;
  padding-bottom: 10px;
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--yk-stone);
}

/* ---------- 球队分区 ---------- */
.page-products .pd-squad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 20px;
}
.page-products .pd-squad__text > .yk-prose {
  color: var(--yk-mist);
}
.page-products .pd-squad__list {
  margin-top: 20px;
}
.page-products .pd-squad__link {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--yk-ink-2);
  border-left: 3px solid var(--yk-moss);
  font-size: 15px;
  line-height: 1.7;
  color: var(--yk-mist);
}
.page-products .pd-squad__link a {
  color: var(--yk-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 232, 200, .4);
}
.page-products .pd-squad__link a:hover,
.page-products .pd-squad__link a:focus-visible {
  border-bottom-color: var(--yk-cyan);
}
.page-products .pd-squad__figure {
  margin: 0;
  border: 1px solid var(--pd-rule);
  border-top: 3px solid var(--yk-moss);
}
.page-products .pd-squad__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 球员档案 ---------- */
.page-products .pd-player {
  position: relative;
  margin-top: 26px;
}
.page-products .pd-player__figure {
  margin: 0 0 -32px;
  border: 1px solid var(--pd-rule);
  opacity: .5;
}
.page-products .pd-player__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .pd-player__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 12px;
}
.page-products .pd-player__card {
  padding: 20px 18px;
  background: var(--yk-ink-2);
  border: 1px solid var(--pd-rule);
  border-top: 3px solid var(--yk-cyan);
  box-shadow: 0 18px 32px rgba(0, 0, 0, .35);
}
.page-products .pd-player__code {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--yk-stone);
}
.page-products .pd-player__cardtitle {
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--yk-cream);
  letter-spacing: -0.01em;
}
.page-products .pd-player__cardtext {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--yk-mist);
}
.page-products .pd-player__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--pd-rule);
  color: var(--yk-cyan);
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color 180ms var(--yk-ease), background-color 180ms var(--yk-ease);
}
.page-products .pd-player__trigger:hover,
.page-products .pd-player__trigger:focus-visible {
  border-color: var(--yk-cyan);
  background: var(--yk-ink-3);
}
.page-products .pd-player__trigger[aria-expanded="true"] .yk-disclosure__icon {
  transform: rotate(45deg);
}
.page-products .pd-player__trigger .yk-disclosure__icon {
  display: inline-block;
  transition: transform 180ms var(--yk-ease);
}
.page-products .pd-player__card .yk-disclosure__panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--pd-rule);
  font-size: 14px;
  line-height: 1.75;
  color: var(--yk-mist);
}
.page-products .pd-player__card .yk-disclosure__panel p {
  margin: 0;
}

/* ---------- 版本对照 ---------- */
.page-products .pd-mod--version .pd-ver {
  margin-top: 26px;
}
.page-products .pd-ver__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.page-products .pd-vergrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}
.page-products .pd-vercol {
  padding: 22px 18px 24px;
  background: var(--yk-ink-2);
}
.page-products .pd-vercol--old {
  border-top: 3px solid var(--yk-clay);
}
.page-products .pd-vercol--new {
  border-top: 3px solid var(--yk-cyan);
  background: linear-gradient(180deg, var(--yk-ink-3) 0%, var(--yk-ink-2) 70%);
}
.page-products .pd-vercol__title {
  margin: 14px 0 16px;
  font-size: 19px;
  font-weight: 700;
  color: var(--yk-cream);
}
.page-products .pd-vercol__rows {
  margin: 0;
  padding: 0;
}
.page-products .pd-vercol__rows > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--pd-rule);
}
.page-products .pd-vercol__rows dt {
  flex: 0 0 auto;
  min-width: 5.5em;
  font-size: 13px;
  color: var(--yk-stone);
}
.page-products .pd-vercol__rows dd {
  margin: 0;
  font-size: 15px;
  color: var(--yk-cream);
}
.page-products .pd-vercol--new .pd-vercol__rows dd {
  color: var(--yk-cyan);
}
.page-products .pd-vercol__note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.72;
  color: var(--yk-mist);
}
.page-products .pd-ver__table {
  width: 100%;
}
.page-products .pd-ver__link {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--yk-mist);
}
.page-products .pd-ver__link a,
.page-products .pd-rec__link a,
.page-products .pd-api__link a {
  color: var(--yk-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 232, 200, .4);
}
.page-products .pd-ver__link a:hover,
.page-products .pd-rec__link a:hover,
.page-products .pd-api__link a:hover,
.page-products .pd-ver__link a:focus-visible,
.page-products .pd-rec__link a:focus-visible,
.page-products .pd-api__link a:focus-visible {
  border-bottom-color: var(--yk-cyan);
}

/* ---------- 记录中心 ---------- */
.page-products .pd-rec__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 6px;
}
.page-products .pd-rec__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pd-rule);
}
.page-products .pd-rec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--pd-rule);
  align-items: center;
}
.page-products .pd-rec__when {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--yk-orange);
}
.page-products .pd-rec__what {
  font-size: 15px;
  color: var(--yk-cream);
}
.page-products .pd-rec__row .yk-tag {
  justify-self: start;
}
.page-products .pd-rec__link {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--yk-mist);
}

/* ---------- 接口服务 ---------- */
.page-products .pd-api {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 26px;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}
.page-products .pd-api__card {
  padding: 22px 18px 24px;
  background: var(--yk-ink-2);
  position: relative;
}
.page-products .pd-api__card::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 24px;
  height: 24px;
  border-right: 1px solid var(--yk-cyan);
  border-bottom: 1px solid var(--yk-cyan);
  opacity: .5;
}
.page-products .pd-api__code {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--yk-stone);
}
.page-products .pd-api__title {
  margin: 12px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--yk-cyan);
}
.page-products .pd-api__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.74;
  color: var(--yk-mist);
}
.page-products .pd-api__foot {
  margin-top: 32px;
  gap: 28px;
}
.page-products .pd-api__subtitle {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pd-rule);
  font-size: 16px;
  font-weight: 700;
  color: var(--yk-cream);
}
.page-products .pd-api__link {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--yk-mist);
}
.page-products .pd-api__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 560px) {
  .page-products .pd-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pd-rec__row {
    grid-template-columns: 8.5em minmax(0, 1fr) auto;
  }
  .page-products .pd-vergrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 760px) {
  .page-products .pd-hero {
    padding: 64px 0 84px;
  }
  .page-products .pd-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 48px;
  }
  .page-products .pd-hero__figure {
    margin-top: 12px;
  }
  .page-products .pd-squad {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: start;
  }
  .page-products .pd-api {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .pd-player__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0 20px;
  }
  .page-products .pd-player__grid > *:nth-child(1) {
    transform: translateY(0) rotate(-1deg);
  }
  .page-products .pd-player__grid > *:nth-child(2) {
    transform: translateY(22px) rotate(1deg);
  }
  .page-products .pd-player__grid > *:nth-child(3) {
    transform: translateY(-10px) rotate(-0.6deg);
  }
}

@media (min-width: 1000px) {
  .page-products .pd-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding-top: 72px;
    padding-bottom: 104px;
  }
  .page-products .pd-layout__side {
    position: sticky;
    top: 96px;
  }
  .page-products .pd-index {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--pd-rule);
  }
  .page-products .pd-index__link {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    padding: 10px 12px 10px 14px;
  }
  .page-products .pd-index__link[aria-current="true"] {
    border-left-color: var(--yk-cyan);
    background: var(--yk-ink-2);
  }
  .page-products .pd-scorecard {
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-hero__figure,
  .page-products .pd-player__grid > *,
  .page-products .yk-disclosure__icon,
  .page-products .pd-index__link {
    transform: none !important;
    transition: none !important;
  }
}
<<<END>>>

稍等——标记顺序不对，我把 `` 和 `<<<END>>>` 搞混了。重新输出正确顺序，CSS 结束就用输出终止，不需要额外的结束标记。

重新检查：输出应严格按 `` → main 内容 → `` → CSS 的顺序，每个标记只出现一次。末尾不该有 `<<<END>>>`。

另外还有几个问题要修：

1. 首屏标题里“六类数据模块，一场比赛从开哨查到赛季末”——没问题。
2. `.yk-breadcrumb__item + .yk-breadcrumb__item::before` —— 我写的是 `.yk-breadcrumb__item + .yk-breadcrumb__item::before`，但在选择器里写成了 `.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before`。等一下，我写的是 `.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before` 吗？让我看看……实际写的是 `.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before`。嗯，在代码里我写的是 `.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before` —— 不，我写的是 `.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before`，这没问题。
3. 球队分区那一段：“进入任意联赛分区后，队内再按位置与号码两级排序，前锋排在前、后卫排在后”——位置排序这个说法应该没问题。
4. 记录那一段：“系统会留下使用云开使用记录”——关键词已经覆盖。
5. 版本对照那句：“旧版云开内地补时时长只给出一个数字”——已经覆盖。

好，按正确的标记顺序重新输出。

另外注意：`pd-mod--version .pd-ver`——版本区块本身是 `.pd-mod` 加 `.pd-mod--version`。没问题。

再检查一下 `yk-media--tall`、`yk-media--wide`、`yk-media--square` 这些共享类是否使用正确。是的。

还有 `.yk-media__img` 在作用域里加了 `display: block; width: 100%; height: auto`——共享 CSS 应该已经处理了，但重复一下也无妨。

好，现在输出最终答案。
<main id="main-content" class="page-products">

  <nav class="yk-breadcrumb pd-crumb" aria-label="当前位置">
    <div class="yk-shell pd-crumb__inner">
      <ol class="pd-crumb__list">
        <li class="yk-breadcrumb__item"><a href="/">首页</a></li>
        <li class="yk-breadcrumb__item" aria-current="page">数据服务台</li>
      </ol>
    </div>
  </nav>

  <section class="pd-hero">
    <div class="yk-shell pd-hero__inner">
      <div class="pd-hero__copy">
        <p class="yk-mono pd-hero__eyebrow">数据服务 <span class="pd-hero__mark">/projects/</span></p>
        <h1 class="pd-hero__title">六类数据模块，一场比赛从开哨查到赛季末</h1>
        <p class="yk-lede pd-hero__lede">云开赛场把每场比赛拆成可以单独取用的字段。比分卡记下开哨到终场的每一次变化，球队分区把伤停名单与球衣号码分开排列，球员档案把出场数据和号码变更串成一条时间线。你可以按联赛、球队或球员三个方向取数，也能翻回最近 12 个月的历史记录。</p>
        <div class="pd-hero__actions">
          <a class="yk-btn yk-btn--cyan" href="#mod-score">看比分卡字段</a>
          <a class="yk-btn yk-btn--ghost" href="#mod-api">了解接入方式</a>
        </div>
        <dl class="pd-hero__stats">
          <div class="yk-stat pd-hero__stat"><dt class="yk-stat__label">覆盖联赛</dt><dd class="yk-stat__value yk-mono">6</dd></div>
          <div class="yk-stat pd-hero__stat"><dt class="yk-stat__label">球队档案</dt><dd class="yk-stat__value yk-mono">20</dd></div>
          <div class="yk-stat pd-hero__stat"><dt class="yk-stat__label">球员档案</dt><dd class="yk-stat__value yk-mono">520</dd></div>
          <div class="yk-stat pd-hero__stat"><dt class="yk-stat__label">记录保留</dt><dd class="yk-stat__value yk-mono">12 个月</dd></div>
        </dl>
      </div>

      <figure class="yk-media pd-hero__figure">
        <img class="yk-media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="教练席战术板特写，磁贴与手写线条交错排布在深绿色板面上">
        <figcaption class="pd-hero__figcap yk-mono">PLAYBOOK · 模块总览</figcaption>
      </figure>
    </div>
  </section>

  <div class="yk-shell pd-layout">

    <aside class="pd-layout__side">
      <nav class="yk-index-nav pd-index" aria-label="模块索引">
        <a class="yk-index-nav__link pd-index__link" data-index-link href="#mod-score"><span class="pd-index__num yk-mono">01</span>比分卡</a>
        <a class="yk-index-nav__link pd-index__link" data-index-link href="#mod-squad"><span class="pd-index__num yk-mono">02</span>球队分区</a>
        <a class="yk-index-nav__link pd-index__link" data-index-link href="#mod-player"><span class="pd-index__num yk-mono">03</span>球员档案</a>
        <a class="yk-index-nav__link pd-index__link" data-index-link href="#mod-version"><span class="pd-index__num yk-mono">04</span>版本对照</a>
        <a class="yk-index-nav__link pd-index__link" data-index-link href="#mod-record"><span class="pd-index__num yk-mono">05</span>记录中心</a>
        <a class="yk-index-nav__link pd-index__link" data-index-link href="#mod-api"><span class="pd-index__num yk-mono">06</span>接口服务</a>
      </nav>
    </aside>

    <div class="pd-layout__main">

      <section class="pd-mod" id="mod-score" data-section>
        <header class="yk-section__head">
          <span class="yk-section__num yk-mono">01</span>
          <h2 class="yk-section__title">比分卡：从开哨到终场</h2>
        </header>

        <p class="yk-prose">一张比分卡覆盖开哨到终场的全部关键节点。半场结束、比分改写、补时公布，每一次变化都会落到对应字段上，晚场班在比赛结束后 30 分钟内完成首次发布。</p>

        <div class="pd-scorecard">
          <svg class="pd-scorecard__svg" viewBox="0 0 360 150" role="img" aria-label="比分卡示意图，包含比分、半场结果、补时时长、射门与控球五项字段">
            <rect class="pd-scorecard__frame" x="0.5" y="0.5" width="359" height="149"/>
            <text class="pd-scorecard__main" x="22" y="66">2 – 1</text>
            <text class="pd-scorecard__sub" x="22" y="90">半场 1 – 0</text>
            <text class="pd-scorecard__tag pd-scorecard__tag--hot" x="272" y="42">+90+6</text>
            <line class="pd-scorecard__line" x1="22" y1="108" x2="338" y2="108"/>
            <text class="pd-scorecard__tag" x="22" y="132">射门 14 / 9</text>
            <text class="pd-scorecard__tag" x="238" y="132">控球 58%</text>
          </svg>
        </div>

        <figure class="yk-media yk-media--wide pd-mod__figure">
          <img class="yk-media__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜场灯光下的记分牌局部，只看到发光数字与看台暗部" loading="lazy" decoding="async">
        </figure>

        <table class="yk-table pd-field-table">
          <caption class="pd-field-table__cap">比分卡字段与刷新节奏</caption>
          <thead>
            <tr><th scope="col">字段</th><th scope="col">更新时机</th><th scope="col">取用什么</th></tr>
          </thead>
          <tbody>
            <tr><td class="yk-mono">比分</td><td>进球后 60 秒内</td><td>主客队当前比分，附带改写时间点</td></tr>
            <tr><td class="yk-mono">半场结果</td><td>中场哨响后</td><td>半场结束时的比分快照</td></tr>
            <tr><td class="yk-mono">补时时长</td><td>第四官员举牌后</td><td>本场补足的分钟数</td></tr>
            <tr><td class="yk-mono">射门</td><td>每 5 分钟汇总</td><td>两队射门次数与射正次数</td></tr>
            <tr><td class="yk-mono">控球</td><td>每 5 分钟汇总</td><td>控球比例，按百分比呈现</td></tr>
          </tbody>
        </table>
      </section>

      <section class="pd-mod" id="mod-squad" data-section>
        <header class="yk-section__head">
          <span class="yk-section__num yk-mono">02</span>
          <h2 class="yk-section__title">球队分区：伤停与球衣号码</h2>
        </header>

        <div class="pd-squad">
          <div class="pd-squad__text">
            <p class="yk-prose">二十支球队的伤停名单与球衣号码按联赛分开排列，互不混排。进入任意联赛分区后，队内再按位置与号码两级排序，前锋排在前、后卫排在后，同位置按号码从小到大。</p>
            <ul class="yk-list pd-squad__list">
              <li>联赛分区独立编号，跨区查找时用球队名或号码直接定位</li>
              <li>伤停名单标注缺阵范围与预计回归轮次</li>
              <li>球衣号码记录每次变更的生效轮次，旧号码一并留存</li>
              <li>分区内支持按位置、按号码两种排列切换</li>
            </ul>
            <p class="pd-squad__link">想确认某支球队的缺阵情况怎么读，可以到<a href="/help-center/">帮助中心</a>按问题找答案。</p>
          </div>

          <figure class="yk-media yk-media--tall pd-squad__figure">
            <img class="yk-media__img" src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="球衣背面号码剪影，只见轮廓与织物褶皱纹理" loading="lazy" decoding="async">
          </figure>
        </div>
      </section>

      <section class="pd-mod" id="mod-player" data-section>
        <header class="yk-section__head">
          <span class="yk-section__num yk-mono">03</span>
          <h2 class="yk-section__title">球员档案卡片</h2>
        </header>

        <p class="yk-prose">一名球员的全部可查信息收在几张卡片里。出场数据、号码变更与伤停区间各自成卡，互相之间用同一条编号串起来，长期跟踪一名球员时不用来回翻页。</p>

        <div class="pd-player">
          <figure class="yk-media yk-media--square pd-player__figure">
            <img class="yk-media__img" src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="球员跑动剪影与档案卡片光影叠压的抽象画面" loading="lazy" decoding="async">
          </figure>

          <div class="pd-player__grid">
            <article class="pd-player__card">
              <span class="yk-mono pd-player__code">档案 01</span>
              <h3 class="pd-player__cardtitle">出场数据</h3>
              <p class="pd-player__cardtext">按轮次累计，主客场分开统计，缺阵与替补登场各自标注清楚。</p>
              <button type="button" class="yk-disclosure__trigger pd-player__trigger" data-disclosure-trigger aria-expanded="false" aria-controls="pd-panel-1">
                <span>看字段细节</span><span class="yk-disclosure__icon" aria-hidden="true">＋</span>
              </button>
              <div class="yk-disclosure__panel" id="pd-panel-1" hidden>
                <p>每轮更新一次，包含上场时间、位置、进球与助攻四组数值，跨赛季数据在同一张卡里按赛季分段。</p>
              </div>
            </article>

            <article class="pd-player__card">
              <span class="yk-mono pd-player__code">档案 02</span>
              <h3 class="pd-player__cardtitle">号码变更</h3>
              <p class="pd-player__cardtext">球衣号码每换一次就多一条记录，标注生效轮次，旧号码继续保留可查。</p>
              <button type="button" class="yk-disclosure__trigger pd-player__trigger" data-disclosure-trigger aria-expanded="false" aria-controls="pd-panel-2">
                <span>看字段细节</span><span class="yk-disclosure__icon" aria-hidden="true">＋</span>
              </button>
              <div class="yk-disclosure__panel" id="pd-panel-2" hidden>
                <p>换号记录与球队分区里的号码字段同源，两边看到的数字始终一致，按赛季倒序排列。</p>
              </div>
            </article>

            <article class="pd-player__card">
              <span class="yk-mono pd-player__code">档案 03</span>
              <h3 class="pd-player__cardtitle">伤停区间</h3>
              <p class="pd-player__cardtext">一次伤停记一条起止区间，缺阵轮次与回归场次都能翻回去看。</p>
              <button type="button" class="yk-disclosure__trigger pd-player__trigger" data-disclosure-trigger aria-expanded="false" aria-controls="pd-panel-3">
                <span>看字段细节</span><span class="yk-disclosure__icon" aria-hidden="true">＋</span>
              </button>
              <div class="yk-disclosure__panel" id="pd-panel-3" hidden>
                <p>区间跨越的轮次会逐条列出，和球队分区中的伤停名单共用同一编号，方便互相引证。</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section class="pd-mod pd-mod--version" id="mod-version" data-section>
        <header class="yk-section__head">
          <span class="yk-section__num yk-mono">04</span>
          <h2 class="yk-section__title">版本对照：新旧展示并排</h2>
        </header>

        <p class="yk-prose">内地赛事的补时时长在旧版和新版里读法不一样。旧版云开内地补时时长只给出一个数字，新版把它拆成常规补时与追加补时两段。两套记录都在，切换回来就能对上历史比赛。</p>

        <div class="yk-tabs pd-ver" data-tabs>
          <div class="yk-tabs__list pd-ver__tabs" role="tablist" aria-label="版本对照显示方式">
            <button type="button" class="yk-tab" role="tab" id="pd-tab-side" data-tab="side" aria-selected="true" aria-controls="pd-panel-side">并排对照</button>
            <button type="button" class="yk-tab" role="tab" id="pd-tab-stack" data-tab="stack" aria-selected="false" aria-controls="pd-panel-stack">叠加对照</button>
          </div>

          <div class="yk-tabpanel" id="pd-panel-side" data-tabpanel="side" role="tabpanel" aria-labelledby="pd-tab-side">
            <div class="pd-vergrid">
              <div class="pd-vercol pd-vercol--old">
                <span class="yk-tag yk-tag--clay">旧版</span>
                <h3 class="pd-vercol__title">一个数字读完</h3>
                <dl class="pd-vercol__rows">
                  <div><dt>补时展示</dt><dd class="yk-mono">+6</dd></div>
                  <div><dt>记录内容</dt><dd>主裁最终举牌值</dd></div>
                  <div><dt>适用页面</dt><dd>旧版比赛页与历史列表</dd></div>
                </dl>
                <p class="pd-vercol__note">旧版页面保留至今，随时可以切回去比对上赛季的记录。</p>
              </div>

              <div class="pd-vercol pd-vercol--new">
                <span class="yk-tag yk-tag--cyan">新版</span>
                <h3 class="pd-vercol__title">拆成两段</h3>
                <dl class="pd-vercol__rows">
                  <div><dt>常规补时</dt><dd class="yk-mono">+4</dd></div>
                  <div><dt>追加补时</dt><dd class="yk-mono">+2</dd></div>
                  <div><dt>合计</dt><dd class="yk-mono">+6</dd></div>
                </dl>
                <p class="pd-vercol__note">两段相加等于旧版的单一数字，对不上的时候以版本为单位回看。</p>
              </div>
            </div>
          </div>

          <div class="yk-tabpanel" id="pd-panel-stack" data-tabpanel="stack" role="tabpanel" aria-labelledby="pd-tab-stack" hidden>
            <table class="yk-table pd-ver__table">
              <caption class="pd-field-table__cap">同一场补时的两种读法</caption>
              <thead>
                <tr><th scope="col">字段</th><th scope="col">旧版</th><th scope="col">新版</th></tr>
              </thead>
              <tbody>
                <tr><td class="yk-mono">常规补时</td><td>不单列</td><td class="yk-mono">+4</td></tr>
                <tr><td class="yk-mono">追加补时</td><td>不单列</td><td class="yk-mono">+2</td></tr>
                <tr><td class="yk-mono">总计</td><td class="yk-mono">+6</td><td class="yk-mono">+6</td></tr>
                <tr><td class="yk-mono">历史回溯</td><td>可查</td><td>可查</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <p class="pd-ver__link">每次改动的原因与影响范围，会同步写进<a href="/information/">赛场资讯</a>的版本更新条目里。</p>
      </section>

      <section class="pd-mod" id="mod-record" data-section>
        <header class="yk-section__head">
          <span class="yk-section__num yk-mono">05</span>
          <h2 class="yk-section__title">记录中心：翻回你的最近 12 个月</h2>
        </header>

        <p class="yk-prose">系统会留下使用云开使用记录，默认保留最近 12 个月。想找自己上周看过哪场比赛、哪个号码，按联赛、球队和时间三个条件筛一下就能定位。</p>

        <div class="yk-chips pd-rec__filters" role="group" aria-label="记录筛选条件">
          <button type="button" class="yk-chip" aria-pressed="true">全部</button>
          <button type="button" class="yk-chip" aria-pressed="false">按联赛</button>
          <button type="button" class="yk-chip" aria-pressed="false">按球队</button>
          <button type="button" class="yk-chip" aria-pressed="false">按时间</button>
        </div>

        <ul class="pd-rec__list">
          <li class="pd-rec__row">
            <span class="pd-rec__when yk-mono">最近 2 天</span>
            <span class="pd-rec__what">联赛 03 · 比分与伤停字段更新</span>
            <span class="yk-tag yk-tag--moss">已归档</span>
          </li>
          <li class="pd-rec__row">
            <span class="pd-rec__when yk-mono">最近 5 天</span>
            <span class="pd-rec__what">联赛 01 · 球衣号码变更记录</span>
            <span class="yk-tag yk-tag--moss">已归档</span>
          </li>
          <li class="pd-rec__row">
            <span class="pd-rec__when yk-mono">最近 9 天</span>
            <span class="pd-rec__what">联赛 05 · 新旧补时对照查看</span>
            <span class="yk-tag yk-tag--clay">旧版</span>
          </li>
          <li class="pd-rec__row">
            <span class="pd-rec__when yk-mono">本赛季中段</span>
            <span class="pd-rec__what">联赛 02 · 球员档案卡片浏览</span>
            <span class="yk-tag yk-tag--cyan">新版</span>
          </li>
          <li class="pd-rec__row">
            <span class="pd-rec__when yk-mono">上赛季收官阶段</span>
            <span class="pd-rec__what">联赛 04 · 历史比赛数据回溯</span>
            <span class="yk-tag yk-tag--moss">已归档</span>
          </li>
        </ul>

        <p class="pd-rec__link">找不到某条记录时，先看<a href="/help-center/">帮助中心</a>里记录与版本一类的说明，多数情况当场就能解决。</p>
      </section>

      <section class="pd-mod" id="mod-api" data-section>
        <header class="yk-section__head">
          <span class="yk-section__num yk-mono">06</span>
          <h2 class="yk-section__title">接口服务：三个维度接入</h2>
        </header>

        <p class="yk-prose">数据接口按联赛、球队、球员三种维度订阅。赛区服务商通常整联赛接入，体育媒体偏爱按球队订阅，球迷社区则常从球员维度起步。三种维度可以叠加，取到的字段与页面上看到的一致。</p>

        <div class="pd-api">
          <article class="pd-api__card">
            <span class="yk-mono pd-api__code">维度 01</span>
            <h3 class="pd-api__title">按联赛</h3>
            <p class="pd-api__text">整联赛的比赛数据一次接入，含比分、半场结果、补时与射门控球。</p>
          </article>
          <article class="pd-api__card">
            <span class="yk-mono pd-api__code">维度 02</span>
            <h3 class="pd-api__title">按球队</h3>
            <p class="pd-api__text">锁定单支球队，拿到它的赛程、伤停名单与球衣号码变动。</p>
          </article>
          <article class="pd-api__card">
            <span class="yk-mono pd-api__code">维度 03</span>
            <h3 class="pd-api__title">按球员</h3>
            <p class="pd-api__text">跟随一名球员的全部记录卡片，出场、号码与伤停区间一起给出。</p>
          </article>
        </div>

        <div class="yk-grid yk-grid--halves pd-api__foot">
          <div class="pd-api__block">
            <h3 class="pd-api__subtitle">对接需要准备什么</h3>
            <ul class="yk-list">
              <li>接入用途与预计调用量，便于我们安排字段范围</li>
              <li>需要覆盖的联赛编号与球队名称</li>
              <li>一位技术联系人，方便在接入阶段直接沟通</li>
            </ul>
          </div>
          <div class="pd-api__block">
            <h3 class="pd-api__subtitle">人工对接的节奏</h3>
            <ul class="yk-list">
              <li>收到需求后我们先回一轮字段清单，确认能覆盖</li>
              <li>确认无误后安排接口开通与试跑</li>
              <li>试跑阶段数据工程组全程跟进，直到正式上线</li>
            </ul>
            <p class="pd-api__link">维护班组与采集流程，可以看<a href="/culture/">赛场背后</a>；直接谈合作走<a href="/inquiry/">咨询通道</a>。</p>
          </div>
        </div>

        <div class="pd-api__actions">
          <a class="yk-btn yk-btn--orange" href="/inquiry/">提交接入需求</a>
          <a class="yk-btn yk-btn--ghost" href="/help-center/">查看接入常见问题</a>
        </div>

        <figure class="yk-media yk-media--wide pd-mod__figure">
          <img class="yk-media__img" src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="球场边线低机位视角，草皮纹理与看台灯光在夜色中拉出斜线" loading="lazy" decoding="async">
        </figure>
      </section>

    </div>
  </div>
</main>

.page-products {
  --pd-rule: var(--yk-line);
  padding-bottom: 0;
}

/* ---------- 面包屑 ---------- */
.page-products .pd-crumb {
  background: var(--yk-ink);
  border-bottom: 1px solid var(--pd-rule);
}
.page-products .pd-crumb__inner {
  padding-top: 14px;
  padding-bottom: 14px;
}
.page-products .pd-crumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--yk-mist);
}
.page-products .yk-breadcrumb__item + .yk-breadcrumb__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--yk-stone);
}
.page-products .yk-breadcrumb__item a {
  color: var(--yk-mist);
  text-decoration: none;
}
.page-products .yk-breadcrumb__item a:hover,
.page-products .yk-breadcrumb__item a:focus-visible {
  color: var(--yk-cyan);
}
.page-products .yk-breadcrumb__item[aria-current="page"] {
  color: var(--yk-cream);
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--yk-ink-3) 0%, var(--yk-ink-2) 42%, var(--yk-ink) 100%);
  border-bottom: 1px solid var(--pd-rule);
  padding: 48px 0 64px;
}
.page-products .pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 78, 62, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 78, 62, .55) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .16;
  pointer-events: none;
}
.page-products .pd-hero::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(59, 232, 200, .16) 0%, transparent 68%);
  pointer-events: none;
}
.page-products .pd-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.page-products .pd-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yk-cyan);
}
.page-products .pd-hero__mark {
  color: var(--yk-stone);
}
.page-products .pd-hero__title {
  margin: 0 0 20px;
  font-family: var(--yk-font-sans);
  font-weight: 900;
  font-size: clamp(30px, 7.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--yk-cream);
  max-width: 16em;
}
.page-products .pd-hero__lede {
  max-width: 40em;
  color: var(--yk-mist);
}
.page-products .pd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.page-products .pd-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}
.page-products .pd-hero__stat {
  margin: 0;
  padding: 16px 14px;
  background: var(--yk-ink-2);
}
.page-products .pd-hero__stat .yk-stat__value {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  color: var(--yk-cyan);
  letter-spacing: -0.02em;
}
.page-products .pd-hero__stat .yk-stat__label {
  font-family: var(--yk-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--yk-mist);
}
.page-products .pd-hero__figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--pd-rule);
  transform: rotate(-0.6deg);
}
.page-products .pd-hero__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .pd-hero__figcap {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 12px;
  background: rgba(6, 26, 21, .84);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--yk-cyan);
}

/* ---------- 主体两栏 ---------- */
.page-products .pd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 88px;
}

.page-products .pd-index {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.page-products .pd-index__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid var(--pd-rule);
  background: var(--yk-ink-2);
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--yk-mist);
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms var(--yk-ease), border-color 180ms var(--yk-ease), background-color 180ms var(--yk-ease);
}
.page-products .pd-index__num {
  color: var(--yk-stone);
  font-size: 11px;
}
.page-products .pd-index__link:hover,
.page-products .pd-index__link:focus-visible {
  border-color: var(--yk-cyan);
  color: var(--yk-cream);
}
.page-products .pd-index__link[aria-current="true"] {
  border-color: var(--yk-cyan);
  background: var(--yk-ink-3);
  color: var(--yk-cyan);
}
.page-products .pd-index__link[aria-current="true"] .pd-index__num {
  color: var(--yk-cyan);
}

/* ---------- 模块 ---------- */
.page-products .pd-mod {
  scroll-margin-top: 96px;
}
.page-products .pd-mod + .pd-mod {
  margin-top: 72px;
  padding-top: 64px;
  border-top: 1px solid var(--pd-rule);
}
.page-products .pd-mod .yk-section__title {
  font-size: clamp(22px, 4.6vw, 30px);
}
.page-products .pd-mod > .yk-prose {
  margin-top: 18px;
  color: var(--yk-mist);
}
.page-products .pd-mod__figure {
  margin: 28px 0 0;
  border: 1px solid var(--pd-rule);
}
.page-products .pd-mod__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 比分卡 ---------- */
.page-products .pd-scorecard {
  margin: 26px 0 0;
  padding: 20px;
  background: linear-gradient(135deg, var(--yk-ink-3) 0%, var(--yk-ink-2) 100%);
  border: 1px solid var(--pd-rule);
  border-left: 3px solid var(--yk-cyan);
}
.page-products .pd-scorecard__svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-products .pd-scorecard__frame {
  fill: none;
  stroke: var(--pd-rule);
  stroke-width: 1;
}
.page-products .pd-scorecard__line {
  stroke: var(--pd-rule);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.page-products .pd-scorecard__main {
  font-family: var(--yk-font-mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--yk-cyan);
}
.page-products .pd-scorecard__sub {
  font-family: var(--yk-font-mono);
  font-size: 12px;
  fill: var(--yk-mist);
}
.page-products .pd-scorecard__tag {
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  fill: var(--yk-mist);
}
.page-products .pd-scorecard__tag--hot {
  fill: var(--yk-orange);
}

.page-products .pd-field-table {
  margin-top: 28px;
  width: 100%;
}
.page-products .pd-field-table__cap {
  text-align: left;
  padding-bottom: 10px;
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--yk-stone);
}

/* ---------- 球队分区 ---------- */
.page-products .pd-squad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 20px;
}
.page-products .pd-squad__text > .yk-prose {
  color: var(--yk-mist);
}
.page-products .pd-squad__list {
  margin-top: 20px;
}
.page-products .pd-squad__link {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--yk-ink-2);
  border-left: 3px solid var(--yk-moss);
  font-size: 15px;
  line-height: 1.7;
  color: var(--yk-mist);
}
.page-products .pd-squad__link a {
  color: var(--yk-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 232, 200, .4);
}
.page-products .pd-squad__link a:hover,
.page-products .pd-squad__link a:focus-visible {
  border-bottom-color: var(--yk-cyan);
}
.page-products .pd-squad__figure {
  margin: 0;
  border: 1px solid var(--pd-rule);
  border-top: 3px solid var(--yk-moss);
}
.page-products .pd-squad__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 球员档案 ---------- */
.page-products .pd-player {
  position: relative;
  margin-top: 26px;
}
.page-products .pd-player__figure {
  margin: 0 0 -32px;
  border: 1px solid var(--pd-rule);
  opacity: .5;
}
.page-products .pd-player__figure .yk-media__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-products .pd-player__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 12px;
}
.page-products .pd-player__card {
  padding: 20px 18px;
  background: var(--yk-ink-2);
  border: 1px solid var(--pd-rule);
  border-top: 3px solid var(--yk-cyan);
  box-shadow: 0 18px 32px rgba(0, 0, 0, .35);
}
.page-products .pd-player__code {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--yk-stone);
}
.page-products .pd-player__cardtitle {
  margin: 10px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--yk-cream);
  letter-spacing: -0.01em;
}
.page-products .pd-player__cardtext {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--yk-mist);
}
.page-products .pd-player__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--pd-rule);
  color: var(--yk-cyan);
  font-family: var(--yk-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color 180ms var(--yk-ease), background-color 180ms var(--yk-ease);
}
.page-products .pd-player__trigger:hover,
.page-products .pd-player__trigger:focus-visible {
  border-color: var(--yk-cyan);
  background: var(--yk-ink-3);
}
.page-products .pd-player__trigger .yk-disclosure__icon {
  display: inline-block;
  transition: transform 180ms var(--yk-ease);
}
.page-products .pd-player__trigger[aria-expanded="true"] .yk-disclosure__icon {
  transform: rotate(45deg);
}
.page-products .pd-player__card .yk-disclosure__panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--pd-rule);
  font-size: 14px;
  line-height: 1.75;
  color: var(--yk-mist);
}
.page-products .pd-player__card .yk-disclosure__panel p {
  margin: 0;
}

/* ---------- 版本对照 ---------- */
.page-products .pd-mod--version .pd-ver {
  margin-top: 26px;
}
.page-products .pd-ver__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.page-products .pd-vergrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}
.page-products .pd-vercol {
  padding: 22px 18px 24px;
  background: var(--yk-ink-2);
}
.page-products .pd-vercol--old {
  border-top: 3px solid var(--yk-clay);
}
.page-products .pd-vercol--new {
  border-top: 3px solid var(--yk-cyan);
  background: linear-gradient(180deg, var(--yk-ink-3) 0%, var(--yk-ink-2) 70%);
}
.page-products .pd-vercol__title {
  margin: 14px 0 16px;
  font-size: 19px;
  font-weight: 700;
  color: var(--yk-cream);
}
.page-products .pd-vercol__rows {
  margin: 0;
  padding: 0;
}
.page-products .pd-vercol__rows > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--pd-rule);
}
.page-products .pd-vercol__rows dt {
  flex: 0 0 auto;
  min-width: 5.5em;
  font-size: 13px;
  color: var(--yk-stone);
}
.page-products .pd-vercol__rows dd {
  margin: 0;
  font-size: 15px;
  color: var(--yk-cream);
}
.page-products .pd-vercol--new .pd-vercol__rows dd {
  color: var(--yk-cyan);
}
.page-products .pd-vercol__note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.72;
  color: var(--yk-mist);
}
.page-products .pd-ver__table {
  width: 100%;
}
.page-products .pd-ver__link {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--yk-mist);
}
.page-products .pd-ver__link a,
.page-products .pd-rec__link a,
.page-products .pd-api__link a {
  color: var(--yk-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(59, 232, 200, .4);
}
.page-products .pd-ver__link a:hover,
.page-products .pd-rec__link a:hover,
.page-products .pd-api__link a:hover,
.page-products .pd-ver__link a:focus-visible,
.page-products .pd-rec__link a:focus-visible,
.page-products .pd-api__link a:focus-visible {
  border-bottom-color: var(--yk-cyan);
}

/* ---------- 记录中心 ---------- */
.page-products .pd-rec__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 6px;
}
.page-products .pd-rec__list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pd-rule);
}
.page-products .pd-rec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--pd-rule);
  align-items: center;
}
.page-products .pd-rec__when {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--yk-orange);
}
.page-products .pd-rec__what {
  font-size: 15px;
  color: var(--yk-cream);
}
.page-products .pd-rec__row .yk-tag {
  justify-self: start;
}
.page-products .pd-rec__link {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--yk-mist);
}

/* ---------- 接口服务 ---------- */
.page-products .pd-api {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 26px;
  background: var(--pd-rule);
  border: 1px solid var(--pd-rule);
}
.page-products .pd-api__card {
  position: relative;
  padding: 22px 18px 24px;
  background: var(--yk-ink-2);
}
.page-products .pd-api__card::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  border-right: 1px solid var(--yk-cyan);
  border-bottom: 1px solid var(--yk-cyan);
  opacity: .5;
}
.page-products .pd-api__code {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--yk-stone);
}
.page-products .pd-api__title {
  margin: 12px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--yk-cyan);
}
.page-products .pd-api__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.74;
  color: var(--yk-mist);
}
.page-products .pd-api__foot {
  margin-top: 32px;
  gap: 28px;
}
.page-products .pd-api__subtitle {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pd-rule);
  font-size: 16px;
  font-weight: 700;
  color: var(--yk-cream);
}
.page-products .pd-api__link {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--yk-mist);
}
.page-products .pd-api__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 560px) {
  .page-products .pd-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .pd-rec__row {
    grid-template-columns: 8.5em minmax(0, 1fr) auto;
  }
  .page-products .pd-vergrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 760px) {
  .page-products .pd-hero {
    padding: 64px 0 84px;
  }
  .page-products .pd-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 48px;
  }
  .page-products .pd-hero__figure {
    margin-top: 12px;
  }
  .page-products .pd-squad {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: start;
  }
  .page-products .pd-api {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .pd-player__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0 20px;
  }
  .page-products .pd-player__grid > *:nth-child(1) {
    transform: translateY(0) rotate(-1deg);
  }
  .page-products .pd-player__grid > *:nth-child(2) {
    transform: translateY(22px) rotate(1deg);
  }
  .page-products .pd-player__grid > *:nth-child(3) {
    transform: translateY(-10px) rotate(-0.6deg);
  }
}

@media (min-width: 1000px) {
  .page-products .pd-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding-top: 72px;
    padding-bottom: 104px;
  }
  .page-products .pd-layout__side {
    position: sticky;
    top: 96px;
  }
  .page-products .pd-index {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
    border-left: 1px solid var(--pd-rule);
  }
  .page-products .pd-index__link {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    padding: 10px 12px 10px 14px;
  }
  .page-products .pd-index__link[aria-current="true"] {
    border-left-color: var(--yk-cyan);
    background: var(--yk-ink-2);
  }
  .page-products .pd-scorecard {
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-hero__figure,
  .page-products .pd-player__grid > *,
  .page-products .yk-disclosure__icon,
  .page-products .pd-index__link {
    transform: none !important;
    transition: none !important;
  }
}