.page-products {
  --tree-line: rgba(56, 225, 208, 0.34);
  --node-bd: rgba(192, 132, 71, 0.42);
  --apps-gap: clamp(3rem, 8vw, 6rem);
  background: var(--c-deep);
  color: var(--c-paper);
  overflow-x: hidden;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.page-products section {
  margin-top: var(--apps-gap);
}

.page-products h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0.6rem 0 0.9rem;
}

.page-products h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.45rem;
}

.page-products p {
  color: var(--c-steel);
  line-height: 1.8;
  max-width: 720px;
}

.page-products .plate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 0.2rem 0.55rem;
}

/* ---------- 首屏 ---------- */

.page-products .apps-head {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hair);
}

.page-products .apps-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  color: var(--c-cyan);
  margin: 0 0 0.9rem;
}

.page-products .apps-head h1 {
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 1rem;
  max-width: 16em;
}

.page-products .apps-head__lead {
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  color: var(--c-paper);
  opacity: 0.82;
  max-width: 660px;
}

.page-products .apps-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--hair-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--c-steel);
}

.page-products .apps-head__meta span {
  position: relative;
  padding-left: 0.9rem;
}

.page-products .apps-head__meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
}

/* ---------- 技能树 ---------- */

.page-products .tree__head {
  max-width: 640px;
}

.page-products .tree__head p {
  margin: 0;
}

.page-products .tree__root {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
}

.page-products .tree__root .breath-ring {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 14px rgba(56, 225, 208, 0.45);
  animation: apps-breathe 4s ease-in-out infinite;
}

.page-products .tree__root-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
}

@keyframes apps-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.14); opacity: 1; }
}

.page-products .tree__lines {
  display: none;
  width: 100%;
  height: 72px;
  color: var(--tree-line);
}

.page-products .tree__lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
}

.page-products .tree__nodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}

.page-products .node {
  border: 1px solid var(--node-bd);
  border-top: 3px solid var(--c-wood);
  background: linear-gradient(180deg, rgba(192, 132, 71, 0.09), rgba(10, 26, 47, 0.2));
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .node > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.1rem 1.15rem;
  display: block;
}

.page-products .node > summary::-webkit-details-marker {
  display: none;
}

.page-products .node > summary::after {
  content: "＋";
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--c-cyan);
}

.page-products .node[open] > summary::after {
  content: "－";
  color: var(--c-orange);
}

.page-products .node__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-wood-soft);
  margin-bottom: 0.6rem;
}

.page-products .node__title {
  display: block;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-paper);
}

.page-products .node__desc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--c-steel);
}

.page-products .node__body {
  padding: 0 1.1rem 1.25rem;
  border-top: 1px dashed var(--hair-strong);
}

.page-products .node__body ol {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  color: var(--c-steel);
  line-height: 1.75;
  font-size: 0.9rem;
}

.page-products .node__body li + li {
  margin-top: 0.5rem;
}

/* ---------- 实时追比分 ---------- */

.page-products .live__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
}

.page-products .live__visual .frame {
  position: relative;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-night);
}

.page-products .live__visual img,
.page-products .archive__bg img,
.page-products .clips img,
.page-products .find__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .live__scorecard {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: min(58%, 230px);
  padding: 0.9rem 1rem 1rem;
  background: rgba(5, 13, 24, 0.86);
  backdrop-filter: blur(3px);
  border-left: 3px solid var(--c-orange);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.page-products .live__scorecard-label,
.page-products .live__scorecard-unit,
.page-products .live__scorecard-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--c-steel);
}

.page-products .live__scorecard .stat {
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  line-height: 1;
  font-weight: 800;
}

.page-products .live__scorecard-note {
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-wood-soft);
}

.page-products .ticks {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.62rem;
  max-width: 640px;
}

.page-products .ticks li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--c-steel);
}

.page-products .ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--c-cyan);
}

.page-products .ticks strong {
  color: var(--c-paper);
  font-weight: 600;
}

.page-products .live__foot {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--hair-strong);
  font-size: 0.92rem;
}

/* ---------- 赛季档案 ---------- */

.page-products .archive {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hair-strong);
}

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

.page-products .archive__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(5, 13, 24, 0.94) 18%, rgba(10, 26, 47, 0.82) 62%, rgba(5, 13, 24, 0.96));
}

.page-products .archive__bg img {
  height: 100%;
  filter: saturate(0.6) brightness(0.55);
}

.page-products .archive__inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 5vw, 3rem);
}

.page-products .archive__lead {
  max-width: 660px;
}

.page-products .archive__strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 1.8rem 0 1.6rem;
  border-bottom: 1px solid var(--line-wood);
  padding-bottom: 0.8rem;
}

.page-products .archive__seg {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.75rem 0.1rem;
  color: var(--c-wood-soft);
  background: rgba(192, 132, 71, 0.16);
  border-top: 2px solid var(--c-wood);
}

.page-products .archive__seg--now {
  color: var(--c-night);
  background: var(--c-cyan);
  border-top-color: var(--c-cyan);
  font-weight: 700;
}

.page-products .archive__views {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 860px;
}

.page-products .archive__view {
  padding: 1.1rem 1.15rem 1.2rem;
  background: rgba(5, 13, 24, 0.72);
  border-radius: var(--radius);
  border-left: 4px solid var(--c-cyan);
}

.page-products .archive__view--wood {
  border-left-color: var(--c-wood);
}

.page-products .archive__view p {
  font-size: 0.92rem;
  margin: 0 0 0.8rem;
}

.page-products .archive__view-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.6rem;
  color: var(--c-cyan);
  border: 1px solid var(--line-cyan);
  border-radius: 999px;
}

.page-products .archive__view--wood .archive__view-tag {
  color: var(--c-wood-soft);
  border-color: var(--line-wood);
}

.page-products .archive__foot {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--c-wood-soft);
}

/* ---------- 传球成功率 ---------- */

.page-products .pct__board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.7rem 0 1.5rem;
}

.page-products .pct__lane {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem 1.25rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--c-cyan);
  background: linear-gradient(180deg, rgba(56, 225, 208, 0.1), rgba(10, 26, 47, 0.35));
}

.page-products .pct__lane--wood {
  border-top-color: var(--c-wood);
  background: linear-gradient(180deg, rgba(192, 132, 71, 0.14), rgba(10, 26, 47, 0.35));
}

.page-products .pct__lane-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-paper);
  margin-bottom: 0.35rem;
}

.page-products .pct__lane-cell {
  display: block;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  color: var(--c-wood-soft);
  background: rgba(5, 13, 24, 0.55);
  border-left: 2px solid var(--line-cyan);
  border-radius: 2px;
}

.page-products .pct__lane--wood .pct__lane-cell {
  border-left-color: var(--line-wood);
}

.page-products .pct__notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.4rem;
}

.page-products .pct__note-key {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--c-paper);
  margin-bottom: 0.4rem;
}

.page-products .pct__note p {
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- 集锦 ---------- */

.page-products .clips__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.page-products .clips__player {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: var(--c-night);
  padding: 0.7rem 0.7rem 0;
  overflow: hidden;
}

.page-products .clips__player .frame {
  border-radius: 2px;
  overflow: hidden;
}

.page-products .clips__wave {
  display: block;
  width: 100%;
  height: 56px;
  color: var(--c-cyan);
  opacity: 0.75;
  margin-top: 0.3rem;
}

.page-products .clips__wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.page-products .clips__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem 0 0.85rem;
}

.page-products .clips__control {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.26rem 0.6rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--c-steel);
}

.page-products .clips__control--on {
  color: var(--c-night);
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  font-weight: 700;
}

.page-products .clips__control--ghost {
  color: var(--c-wood-soft);
  border-color: var(--line-wood);
}

.page-products .clips__kinds {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.page-products .clips__kind {
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--c-orange);
  border-radius: var(--radius);
  background: rgba(5, 13, 24, 0.5);
}

.page-products .clips__kind-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-orange);
  margin-bottom: 0.5rem;
}

.page-products .clips__kind p {
  font-size: 0.88rem;
  margin: 0;
}

.page-products .clips__mobile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--hair);
}

.page-products .clips__mobile-shot .frame {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 340px;
  background: var(--c-night);
}

.page-products .ticks--tight li {
  font-size: 0.88rem;
}

.page-products .clips__mobile-link {
  margin-top: 1.1rem;
  font-size: 0.9rem;
}

.page-products .clips a,
.page-products .find a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
}

/* ---------- 搜索与收藏 ---------- */

.page-products .find__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

.page-products .find__modes {
  display: grid;
  gap: 0.7rem;
  margin: 1.4rem 0 1.8rem;
}

.page-products .find__mode {
  padding: 0.85rem 1rem 1rem;
  border-left: 3px solid var(--c-cyan);
  background: rgba(56, 225, 208, 0.07);
  border-radius: 2px;
}

.page-products .find__mode-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
  margin-bottom: 0.35rem;
}

.page-products .find__mode p {
  font-size: 0.89rem;
  margin: 0;
}

.page-products .find__save,
.page-products .find__api {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--hair-strong);
}

.page-products .find__save p,
.page-products .find__api p {
  font-size: 0.92rem;
  margin: 0;
}

.page-products .find__visual .frame {
  border: 1px solid var(--line-wood);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-night);
}

/* ---------- 会员 ---------- */

.page-products .tiers__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.7rem;
}

.page-products .tiers__card {
  position: relative;
  padding: 1.4rem 1.3rem 1.5rem;
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--radius);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.page-products .tiers__card--plain {
  box-shadow: 6px 6px 0 rgba(192, 132, 71, 0.35);
}

.page-products .tiers__card--plus {
  box-shadow: 6px 6px 0 rgba(56, 225, 208, 0.4);
  border-top: 4px solid var(--c-cyan);
}

.page-products .tiers__card-head h3 {
  color: var(--c-ink);
  font-size: 1.3rem;
  margin: 0 0 0.2rem;
}

.page-products .tiers__card-head p {
  color: #5c6b7d;
  font-size: 0.82rem;
  margin: 0;
}

.page-products .tiers__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page-products .tiers__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--c-ink);
}

.page-products .tiers__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-wood);
}

.page-products .tiers__card--plus .tiers__list li::before {
  background: var(--c-cyan);
}

.page-products .tiers__card-note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: #5c6b7d;
}

.page-products .tiers__foot {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--c-wood-soft);
}

/* ---------- 响应式 ---------- */

@media (min-width: 700px) {
  .page-products .live__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
  }

  .page-products .archive__views {
    grid-template-columns: 1fr 1fr;
  }

  .page-products .pct__board {
    grid-template-columns: 1fr 1fr;
  }

  .page-products .pct__notes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }

  .page-products .clips__kinds {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .clips__mobile {
    grid-template-columns: 0.7fr 1.3fr;
    gap: 2.4rem;
  }

  .page-products .find__grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2.2rem;
    align-items: start;
  }

  .page-products .tiers__cards {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
}

@media (min-width: 980px) {
  .page-products .tree__lines {
    display: block;
  }

  .page-products .tree__nodes {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    margin-top: 0;
  }

  .page-products .node > summary {
    padding: 1.15rem 1.15rem 1.25rem;
    min-height: 168px;
  }

  .page-products .clips__stage {
    grid-template-columns: 1.4fr 1fr;
    gap: 1.6rem;
    align-items: start;
  }

  .page-products .clips__kinds {
    grid-template-columns: 1fr;
  }

  .page-products .live__visual .frame {
    margin-left: calc(-1 * var(--gutter) * 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tree__root .breath-ring {
    animation: none;
  }
}
</style>
<<<END>>>

等等，我不该包含 </style> 或 <style>。让我修正——PAGE_CSS 应该只是原始 CSS，没有 style 标签。移除最后的 </style>。

让我重新检查一下结尾部分。对，去掉 `</style>`。还有 `<<<END>>>` 不应该出现。只保留两个标记。

让我只重新输出正确的结尾。
<main id="main-content" class="page-products">

  <div class="shell">
    <nav class="breadcrumb" aria-label="所在位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">应用中心</li>
      </ol>
    </nav>

    <header class="apps-head" data-reveal>
      <p class="apps-head__eyebrow">应用中心</p>
      <h1>四件工具，把一场比赛读到终场哨之后</h1>
      <p class="apps-head__lead">你在比赛进行中盯着分差，还是在赛季结束后翻出旧账做纵向对照？华体汇国际把看实时、查历史、看集锦、做检索四条路径收在同一个入口，你按自己此刻的习惯挑一条走就行，不用来回换地方。</p>
      <div class="apps-head__meta">
        <span>实时刷新约 3 秒一次</span>
        <span>归档 6 个完整赛季</span>
        <span>1280 场逐节数据</span>
      </div>
    </header>
  </div>

  <section class="shell tree" data-chapter data-reveal aria-labelledby="tree-title">
    <div class="tree__head">
      <span class="plate plate--cyan">01</span>
      <h2 id="tree-title">四条路径，从你此刻想看的东西出发</h2>
      <p>同一场比赛可以有很多种用法。下面每张卡片都能展开，里面写了走到结果的三步。</p>
    </div>

    <div class="tree__root">
      <span class="breath-ring" aria-hidden="true"></span>
      <span class="tree__root-label">一场比赛</span>
    </div>

    <svg class="tree__lines" viewBox="0 0 1000 90" preserveAspectRatio="none" aria-hidden="true">
      <path d="M500 0 V34" />
      <path d="M125 34 H875" />
      <path d="M125 34 V90" />
      <path d="M375 34 V90" />
      <path d="M625 34 V90" />
      <path d="M875 34 V90" />
    </svg>

    <div class="tree__nodes">

      <details class="node">
        <summary>
          <span class="node__num">01</span>
          <span class="node__title">看实时</span>
          <span class="node__desc">追比分 · 逐节分差</span>
        </summary>
        <div class="node__body">
          <ol>
            <li>打开一场正在进行的比赛，画面默认停在你进来的那一节。</li>
            <li>点节次条上任意一节，分差轨迹切换到那一段，每节最大分差单独标出来。</li>
            <li>关键转折点用呼吸橙标出，展开就能看到那一回合前后分差怎么变。</li>
          </ol>
        </div>
      </details>

      <details class="node">
        <summary>
          <span class="node__num">02</span>
          <span class="node__title">查历史</span>
          <span class="node__desc">赛季档案 · 纵向对照</span>
        </summary>
        <div class="node__body">
          <ol>
            <li>从球队或球员任意一个入口进赛季档案。</li>
            <li>选择赛季内视图看逐场走势，或者切到跨赛季视图看位置变化。</li>
            <li>把两个赛季并排放在一起，传球效率的起落一眼看得出。</li>
          </ol>
        </div>
      </details>

      <details class="node">
        <summary>
          <span class="node__num">03</span>
          <span class="node__title">看集锦</span>
          <span class="node__desc">集锦切片 · 逐帧回看</span>
        </summary>
        <div class="node__body">
          <ol>
            <li>按单节高光、关键回合、终场片段三类挑你想要的片段。</li>
            <li>播放时用 0.5x 到 2x 之间切换速度，慢下来看脚步，快进看结果。</li>
            <li>遇到想反复看的回合，逐帧回退到起手那一下。</li>
          </ol>
        </div>
      </details>

      <details class="node">
        <summary>
          <span class="node__num">04</span>
          <span class="node__title">做检索</span>
          <span class="node__desc">搜索 · 收藏 · 数据接口</span>
        </summary>
        <div class="node__body">
          <ol>
            <li>在搜索框里输入球队名、球员名或者赛季编号，直接落到对应页面。</li>
            <li>把常看的球队和球员加进关注列表，下次打开就在最上面。</li>
            <li>媒体与研究者可以走开放数据接口申请通道，调取历史赛季数据。</li>
          </ol>
        </div>
      </details>

    </div>
  </section>

  <section class="shell live" data-chapter data-reveal aria-labelledby="live-title">
    <div class="live__grid">

      <div class="live__visual">
        <div class="frame frame--wide">
          <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="暗场聚光的篮球场上记分牌微光与地板反光，画面右侧留出数据卡叠放的位置">
          <span class="frame__overlay"></span>
          <div class="live__scorecard">
            <span class="live__scorecard-label">刷新间隔</span>
            <span class="stat stat--xl stat--cyan is-pulsing">3</span>
            <span class="live__scorecard-unit">秒 / 次</span>
            <span class="live__scorecard-note">赛事高峰支持约 12 万用户同时在线</span>
          </div>
        </div>
      </div>

      <div class="live__copy">
        <span class="plate plate--cyan">02</span>
        <h2 id="live-title">比分不是一条线，是四段节奏</h2>
        <p>一场球被拆成第一节到第四节，每一节都有自己的分差轨迹。你不用盯着一个不断跳动的总分判断局势，而是可以看清楚分差是在哪一节被拉开的、又是从哪一节开始被追回来的。</p>
        <ul class="ticks">
          <li><strong>逐节分差</strong>：四节各自一条轨迹，节奏快慢一眼分明。</li>
          <li><strong>每节最大分差</strong>：单独标出这一节最悬的那一刻。</li>
          <li><strong>关键转折点</strong>：用呼吸橙打在时间轴上，点开看那一回合。</li>
          <li><strong>节次条跳转</strong>：点第四节就直接落到第四节，不用拖进度。</li>
        </ul>
        <p class="live__foot">比分与分差在比赛进行中平均每 3 秒刷新一次，节间休息也不会断。正在剪片子的创作者可以直接按节抓取，省掉反复回拖的时间。</p>
      </div>

    </div>
  </section>

  <section class="shell archive" data-chapter data-reveal aria-labelledby="archive-title">
    <div class="archive__bg" aria-hidden="true">
      <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="球场边线由近及远的透视构图，冷色光打在木质地板上" loading="lazy" decoding="async">
    </div>

    <div class="archive__inner">
      <span class="plate plate--solid">03</span>
      <h2 id="archive-title">六个赛季摆在一起，变化才看得出来</h2>
      <p class="archive__lead">单看一场比赛的数据，很多变化会被噪声盖住。把六个完整赛季、1280 场比赛的逐节数据放到同一套坐标里，一支球队的传球效率是稳步上台阶还是中途掉下来，纵向线条会自己说话。</p>

      <div class="archive__strip" role="img" aria-label="赛季档案覆盖六个完整赛季的归档区间示意">
        <span class="archive__seg">赛季 01</span>
        <span class="archive__seg">赛季 02</span>
        <span class="archive__seg">赛季 03</span>
        <span class="archive__seg">赛季 04</span>
        <span class="archive__seg">赛季 05</span>
        <span class="archive__seg archive__seg--now">当季</span>
      </div>

      <div class="archive__views">
        <article class="archive__view archive__view--cyan">
          <h3>球队维度</h3>
          <p>看一支球队在赛季内的逐场波动，也看它在多个赛季之间的位置移动。对比两支队伍的传球效率时，两条线共用一套刻度。</p>
          <span class="archive__view-tag">赛季内对照 · 跨赛季对照</span>
        </article>
        <article class="archive__view archive__view--wood">
          <h3>球员维度</h3>
          <p>看单个球员的赛季内表现，再把他放进多个赛季的纵向坐标里。球员换队之后数据怎么变，切一个视图就看得出来。</p>
          <span class="archive__view-tag">赛季内对照 · 跨赛季对照</span>
        </article>
      </div>

      <p class="archive__foot">翻赛季档案老用户会习惯把两个赛季并排放着看。赛季内视图随时可查，跨赛季完整对照在呼吸会员权益里解锁。</p>
    </div>
  </section>

  <section class="shell pct" data-chapter data-reveal aria-labelledby="pct-title">
    <span class="plate plate--cyan">04</span>
    <h2 id="pct-title">一个百分比，两层信息分开读</h2>
    <p>中文版传球成功率在界面上做了一次刻意的拆分：数字用等宽粗体放大，中文标签保持紧凑，下面再补一行常规字重的说明。你的眼睛先抓住量级，再决定要不要读细节，不用在一堆同样粗细的文字里找重点。</p>

    <div class="pct__board">
      <div class="pct__lane pct__lane--cyan">
        <span class="pct__lane-name">球队维度</span>
        <span class="pct__lane-cell">赛季内逐场走势</span>
        <span class="pct__lane-cell">跨赛季位置比较</span>
      </div>
      <div class="pct__lane pct__lane--wood">
        <span class="pct__lane-name">球员维度</span>
        <span class="pct__lane-cell">赛季内逐场走势</span>
        <span class="pct__lane-cell">跨赛季位置比较</span>
      </div>
    </div>

    <div class="pct__notes">
      <div class="pct__note">
        <span class="pct__note-key">与分差并列</span>
        <p>传球成功率和分差轨迹排在同一屏：上面看比分怎么走，下面看传导质量怎么变，两个问题一次看完。</p>
      </div>
      <div class="pct__note">
        <span class="pct__note-key">球队与球员分开统计</span>
        <p>球队和球员各自成线，互不混算。你要看的是整体传导体系，还是某个人的出球稳定性，换一个入口就行。</p>
      </div>
      <div class="pct__note">
        <span class="pct__note-key">赛季内与跨赛季</span>
        <p>赛季内视图回答“最近怎么样”，跨赛季视图回答“和过去比怎么样”，两种问题各有一套坐标。</p>
      </div>
    </div>
  </section>

  <section class="shell clips" data-chapter data-reveal aria-labelledby="clips-title">
    <span class="plate plate--cyan">05</span>
    <h2 id="clips-title">90 秒看清一节球</h2>
    <p>集锦按单节高光、关键回合、终场片段三类切开，平均每条 90 秒。等电梯的工夫能看完一节，午休能追完整场的关键部分。</p>

    <div class="clips__stage">
      <div class="clips__player">
        <div class="frame frame--scene">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="球在传球瞬间的手部与球面近景，动作带有虚化，横向构图预留进度条位置" loading="lazy" decoding="async">
          <span class="frame__overlay"></span>
        </div>
        <svg class="clips__wave" viewBox="0 0 600 80" preserveAspectRatio="none" aria-hidden="true">
          <path d="M0 40 L60 40 L60 18 L140 18 L140 58 L210 58 L210 28 L300 28 L300 48 L380 48 L380 14 L460 14 L460 52 L540 52 L540 34 L600 34" />
        </svg>
        <div class="clips__controls">
          <span class="clips__control">0.5x</span>
          <span class="clips__control clips__control--on">1x</span>
          <span class="clips__control">1.5x</span>
          <span class="clips__control">2x</span>
          <span class="clips__control clips__control--ghost">逐帧回看</span>
          <span class="clips__control clips__control--ghost">标清 / 高清</span>
        </div>
      </div>

      <div class="clips__kinds">
        <article class="clips__kind">
          <span class="clips__kind-num">A</span>
          <h3>单节高光</h3>
          <p>把一整节里最连贯的攻防剪到一条，比分走势和画面同步。</p>
        </article>
        <article class="clips__kind">
          <span class="clips__kind-num">B</span>
          <h3>关键回合</h3>
          <p>只保留分差跳变的那几个回合，适合复盘和做解说素材。</p>
        </article>
        <article class="clips__kind">
          <span class="clips__kind-num">C</span>
          <h3>终场片段</h3>
          <p>最后两分钟加终场哨，一场球的情绪落点都在这里。</p>
        </article>
      </div>
    </div>

    <div class="clips__mobile">
      <div class="clips__mobile-shot">
        <div class="frame frame--tall">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="竖构图的球场地板与虚化座椅，安静的赛后场景，顶部与底部留出界面叠放空间" loading="lazy" decoding="async">
        </div>
      </div>
      <div class="clips__mobile-copy">
        <h3>手机上看，不该输给电脑</h3>
        <p>中文版已经在 42 款主流移动机型上完成适配，覆盖 5.8 至 7.2 英寸屏幕。测试版移动端集锦首帧加载控制在 0.8 秒以内，连续播放 10 条也保持顺畅，通勤路上刷片段不用等缓冲。</p>
        <ul class="ticks ticks--tight">
          <li>标清与高清两档可选，流量紧张时切到标清，画面照样看得清战术。</li>
          <li>数据流量节省模式单独开关，和清晰度选择互不影响。</li>
          <li>倍速与逐帧回看在手机上同样可用，慢放脚步不用另找设备。</li>
        </ul>
        <p class="clips__mobile-link">想看版本迭代的进展，可以去<a href="/topics/">专题中心</a>翻更新记录。</p>
      </div>
    </div>
  </section>

  <section class="shell find" data-chapter data-reveal aria-labelledby="find-title">
    <div class="find__grid">
      <div class="find__copy">
        <span class="plate plate--solid">06</span>
        <h2 id="find-title">找不到的时候，三种输入都能落到地方</h2>
        <p>搜索框接受球队名、球员名与赛季编号三种输入，不用先想清楚该去哪个栏目。输入之后直接落到对应的赛季档案或者比赛页面，省掉一层层点进去的过程。</p>

        <div class="find__modes">
          <div class="find__mode">
            <span class="find__mode-key">球队名</span>
            <p>落到这支球队的赛季档案，先看当季，再往上翻历史。</p>
          </div>
          <div class="find__mode">
            <span class="find__mode-key">球员名</span>
            <p>落到个人页，赛季内走势和跨赛季位置并排给出。</p>
          </div>
          <div class="find__mode">
            <span class="find__mode-key">赛季编号</span>
            <p>落到整季概览，1280 场归档里的任意一季都能直接打开。</p>
          </div>
        </div>

        <div class="find__save">
          <h3>把常看的存下来</h3>
          <p>注册用户可以在个人主页保存 20 个关注球队和 30 名关注球员，下次打开就在列表最上层，不用重新搜一遍。常用页面也可以收进收藏，追比分、赛季档案与集锦入口各留一个位置。</p>
        </div>

        <div class="find__api">
          <h3>给媒体与研究者的通道</h3>
          <p>站点设有开放数据接口申请通道，面向媒体与研究者开放历史赛季数据。需要批量取数做图表、做长期追踪的团队，可以从<a href="/reach-us/">联系入口</a>说明用途和范围。取数过程中对字段含义有疑问，<a href="/answers/">答疑中心</a>里能查到具体解释。</p>
        </div>
      </div>

      <div class="find__visual">
        <div class="frame frame--square">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="整洁排列的纸质索引卡与标签特写，木色标签与纸白卡片形成对比" loading="lazy" decoding="async">
        </div>
      </div>
    </div>
  </section>

  <section class="shell tiers" data-chapter data-reveal aria-labelledby="tiers-title">
    <span class="plate plate--cyan">07</span>
    <h2 id="tiers-title">两档权益，看你要不要往回翻</h2>
    <p>如果你只看当季、看直播和集锦，普通用户这一档已经够用。如果你习惯把今年和往年摆在一起比，呼吸会员那一档才是你要的。</p>

    <div class="tiers__cards">

      <article class="tiers__card tiers__card--plain">
        <header class="tiers__card-head">
          <h3>普通用户</h3>
          <p>注册即可使用</p>
        </header>
        <ul class="tiers__list">
          <li>实时追比分：逐节分差、每节最大分差、关键转折点</li>
          <li>赛季档案赛季内视图</li>
          <li>集锦三类切片与 0.5x 至 2x 倍速播放</li>
          <li>三种方式搜索，20 个关注球队、30 名关注球员</li>
          <li>常用页面收藏与节次条跳转</li>
        </ul>
      </article>

      <article class="tiers__card tiers__card--plus">
        <header class="tiers__card-head">
          <h3>呼吸会员</h3>
          <p>在普通用户基础上叠加</p>
        </header>
        <ul class="tiers__list">
          <li>跨赛季完整对照，球队与球员两个维度都开放</li>
          <li>无广告集锦，连续播放不被打断</li>
          <li>个人主页里的关注列表与收藏一并保留</li>
        </ul>
        <p class="tiers__card-note">升级入口在个人主页，赛季中随时可以切换。</p>
      </article>

    </div>

    <p class="tiers__foot">把这一页收好，下次打开直接落回你要用的那条工具线。</p>
  </section>

</main>


.page-products {
  --tree-line: rgba(56, 225, 208, 0.34);
  --node-bd: rgba(192, 132, 71, 0.42);
  --apps-gap: clamp(3rem, 8vw, 6rem);
  background: var(--c-deep);
  color: var(--c-paper);
  overflow-x: hidden;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.page-products section {
  margin-top: var(--apps-gap);
}

.page-products h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0.6rem 0 0.9rem;
}

.page-products h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.45rem;
}

.page-products p {
  color: var(--c-steel);
  line-height: 1.8;
  max-width: 720px;
}

.page-products .plate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 0.2rem 0.55rem;
}

/* ---------- 首屏 ---------- */

.page-products .apps-head {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hair);
}

.page-products .apps-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  color: var(--c-cyan);
  margin: 0 0 0.9rem;
}

.page-products .apps-head h1 {
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 1rem;
  max-width: 16em;
}

.page-products .apps-head__lead {
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  color: var(--c-paper);
  opacity: 0.82;
  max-width: 660px;
}

.page-products .apps-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--hair-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--c-steel);
}

.page-products .apps-head__meta span {
  position: relative;
  padding-left: 0.9rem;
}

.page-products .apps-head__meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
}

/* ---------- 技能树 ---------- */

.page-products .tree__head {
  max-width: 640px;
}

.page-products .tree__head p {
  margin: 0;
}

.page-products .tree__root {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
}

.page-products .tree__root .breath-ring {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 14px rgba(56, 225, 208, 0.45);
  animation: apps-breathe 4s ease-in-out infinite;
}

.page-products .tree__root-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
}

@keyframes apps-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.14); opacity: 1; }
}

.page-products .tree__lines {
  display: none;
  width: 100%;
  height: 72px;
  color: var(--tree-line);
}

.page-products .tree__lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
}

.page-products .tree__nodes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}

.page-products .node {
  border: 1px solid var(--node-bd);
  border-top: 3px solid var(--c-wood);
  background: linear-gradient(180deg, rgba(192, 132, 71, 0.09), rgba(10, 26, 47, 0.2));
  border-radius: var(--radius);
  overflow: hidden;
}

.page-products .node > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.1rem 1.15rem;
  display: block;
}

.page-products .node > summary::-webkit-details-marker {
  display: none;
}

.page-products .node > summary::after {
  content: "＋";
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--c-cyan);
}

.page-products .node[open] > summary::after {
  content: "－";
  color: var(--c-orange);
}

.page-products .node__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-wood-soft);
  margin-bottom: 0.6rem;
}

.page-products .node__title {
  display: block;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-paper);
}

.page-products .node__desc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--c-steel);
}

.page-products .node__body {
  padding: 0 1.1rem 1.25rem;
  border-top: 1px dashed var(--hair-strong);
}

.page-products .node__body ol {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  color: var(--c-steel);
  line-height: 1.75;
  font-size: 0.9rem;
}

.page-products .node__body li + li {
  margin-top: 0.5rem;
}

/* ---------- 实时追比分 ---------- */

.page-products .live__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
}

.page-products .live__visual .frame {
  position: relative;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-night);
}

.page-products .live__visual img,
.page-products .archive__bg img,
.page-products .clips img,
.page-products .find__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .live__scorecard {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: min(58%, 230px);
  padding: 0.9rem 1rem 1rem;
  background: rgba(5, 13, 24, 0.86);
  backdrop-filter: blur(3px);
  border-left: 3px solid var(--c-orange);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.page-products .live__scorecard-label,
.page-products .live__scorecard-unit,
.page-products .live__scorecard-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--c-steel);
}

.page-products .live__scorecard .stat {
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  line-height: 1;
  font-weight: 800;
}

.page-products .live__scorecard-note {
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-wood-soft);
}

.page-products .ticks {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.62rem;
  max-width: 640px;
}

.page-products .ticks li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--c-steel);
}

.page-products .ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--c-cyan);
}

.page-products .ticks strong {
  color: var(--c-paper);
  font-weight: 600;
}

.page-products .live__foot {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--hair-strong);
  font-size: 0.92rem;
}

/* ---------- 赛季档案 ---------- */

.page-products .archive {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hair-strong);
}

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

.page-products .archive__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(5, 13, 24, 0.94) 18%, rgba(10, 26, 47, 0.82) 62%, rgba(5, 13, 24, 0.96));
}

.page-products .archive__bg img {
  height: 100%;
  filter: saturate(0.6) brightness(0.55);
}

.page-products .archive__inner {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 5vw, 3rem);
}

.page-products .archive__lead {
  max-width: 660px;
}

.page-products .archive__strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 1.8rem 0 1.6rem;
  border-bottom: 1px solid var(--line-wood);
  padding-bottom: 0.8rem;
}

.page-products .archive__seg {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.75rem 0.1rem;
  color: var(--c-wood-soft);
  background: rgba(192, 132, 71, 0.16);
  border-top: 2px solid var(--c-wood);
}

.page-products .archive__seg--now {
  color: var(--c-night);
  background: var(--c-cyan);
  border-top-color: var(--c-cyan);
  font-weight: 700;
}

.page-products .archive__views {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 860px;
}

.page-products .archive__view {
  padding: 1.1rem 1.15rem 1.2rem;
  background: rgba(5, 13, 24, 0.72);
  border-radius: var(--radius);
  border-left: 4px solid var(--c-cyan);
}

.page-products .archive__view--wood {
  border-left-color: var(--c-wood);
}

.page-products .archive__view p {
  font-size: 0.92rem;
  margin: 0 0 0.8rem;
}

.page-products .archive__view-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.6rem;
  color: var(--c-cyan);
  border: 1px solid var(--line-cyan);
  border-radius: 999px;
}

.page-products .archive__view--wood .archive__view-tag {
  color: var(--c-wood-soft);
  border-color: var(--line-wood);
}

.page-products .archive__foot {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--c-wood-soft);
}

/* ---------- 传球成功率 ---------- */

.page-products .pct__board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.7rem 0 1.5rem;
}

.page-products .pct__lane {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem 1.25rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--c-cyan);
  background: linear-gradient(180deg, rgba(56, 225, 208, 0.1), rgba(10, 26, 47, 0.35));
}

.page-products .pct__lane--wood {
  border-top-color: var(--c-wood);
  background: linear-gradient(180deg, rgba(192, 132, 71, 0.14), rgba(10, 26, 47, 0.35));
}

.page-products .pct__lane-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-paper);
  margin-bottom: 0.35rem;
}

.page-products .pct__lane-cell {
  display: block;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  color: var(--c-wood-soft);
  background: rgba(5, 13, 24, 0.55);
  border-left: 2px solid var(--line-cyan);
  border-radius: 2px;
}

.page-products .pct__lane--wood .pct__lane-cell {
  border-left-color: var(--line-wood);
}

.page-products .pct__notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.4rem;
}

.page-products .pct__note-key {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--c-paper);
  margin-bottom: 0.4rem;
}

.page-products .pct__note p {
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- 集锦 ---------- */

.page-products .clips__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.page-products .clips__player {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  background: var(--c-night);
  padding: 0.7rem 0.7rem 0;
  overflow: hidden;
}

.page-products .clips__player .frame {
  border-radius: 2px;
  overflow: hidden;
}

.page-products .clips__wave {
  display: block;
  width: 100%;
  height: 56px;
  color: var(--c-cyan);
  opacity: 0.75;
  margin-top: 0.3rem;
}

.page-products .clips__wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.page-products .clips__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem 0 0.85rem;
}

.page-products .clips__control {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.26rem 0.6rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--c-steel);
}

.page-products .clips__control--on {
  color: var(--c-night);
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  font-weight: 700;
}

.page-products .clips__control--ghost {
  color: var(--c-wood-soft);
  border-color: var(--line-wood);
}

.page-products .clips__kinds {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.page-products .clips__kind {
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--c-orange);
  border-radius: var(--radius);
  background: rgba(5, 13, 24, 0.5);
}

.page-products .clips__kind-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-orange);
  margin-bottom: 0.5rem;
}

.page-products .clips__kind p {
  font-size: 0.88rem;
  margin: 0;
}

.page-products .clips__mobile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--hair);
}

.page-products .clips__mobile-shot .frame {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 340px;
  background: var(--c-night);
}

.page-products .ticks--tight li {
  font-size: 0.88rem;
}

.page-products .clips__mobile-link {
  margin-top: 1.1rem;
  font-size: 0.9rem;
}

.page-products .clips a,
.page-products .find a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
}

/* ---------- 搜索与收藏 ---------- */

.page-products .find__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

.page-products .find__modes {
  display: grid;
  gap: 0.7rem;
  margin: 1.4rem 0 1.8rem;
}

.page-products .find__mode {
  padding: 0.85rem 1rem 1rem;
  border-left: 3px solid var(--c-cyan);
  background: rgba(56, 225, 208, 0.07);
  border-radius: 2px;
}

.page-products .find__mode-key {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
  margin-bottom: 0.35rem;
}

.page-products .find__mode p {
  font-size: 0.89rem;
  margin: 0;
}

.page-products .find__save,
.page-products .find__api {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--hair-strong);
}

.page-products .find__save p,
.page-products .find__api p {
  font-size: 0.92rem;
  margin: 0;
}

.page-products .find__visual .frame {
  border: 1px solid var(--line-wood);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-night);
}

/* ---------- 会员 ---------- */

.page-products .tiers__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 1.7rem;
}

.page-products .tiers__card {
  position: relative;
  padding: 1.4rem 1.3rem 1.5rem;
  background: var(--c-paper);
  color: var(--c-ink);
  border-radius: var(--radius);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.page-products .tiers__card--plain {
  box-shadow: 6px 6px 0 rgba(192, 132, 71, 0.35);
}

.page-products .tiers__card--plus {
  box-shadow: 6px 6px 0 rgba(56, 225, 208, 0.4);
  border-top: 4px solid var(--c-cyan);
}

.page-products .tiers__card-head h3 {
  color: var(--c-ink);
  font-size: 1.3rem;
  margin: 0 0 0.2rem;
}

.page-products .tiers__card-head p {
  color: #5c6b7d;
  font-size: 0.82rem;
  margin: 0;
}

.page-products .tiers__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.page-products .tiers__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--c-ink);
}

.page-products .tiers__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-wood);
}

.page-products .tiers__card--plus .tiers__list li::before {
  background: var(--c-cyan);
}

.page-products .tiers__card-note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: #5c6b7d;
}

.page-products .tiers__foot {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--c-wood-soft);
}

/* ---------- 响应式 ---------- */

@media (min-width: 700px) {
  .page-products .live__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
  }

  .page-products .archive__views {
    grid-template-columns: 1fr 1fr;
  }

  .page-products .pct__board {
    grid-template-columns: 1fr 1fr;
  }

  .page-products .pct__notes {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }

  .page-products .clips__kinds {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .clips__mobile {
    grid-template-columns: 0.7fr 1.3fr;
    gap: 2.4rem;
  }

  .page-products .find__grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2.2rem;
    align-items: start;
  }

  .page-products .tiers__cards {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
}

@media (min-width: 980px) {
  .page-products .tree__lines {
    display: block;
  }

  .page-products .tree__nodes {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    margin-top: 0;
  }

  .page-products .node > summary {
    padding: 1.15rem 1.15rem 1.25rem;
    min-height: 168px;
  }

  .page-products .clips__stage {
    grid-template-columns: 1.4fr 1fr;
    gap: 1.6rem;
    align-items: start;
  }

  .page-products .clips__kinds {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .tree__root .breath-ring {
    animation: none;
  }
}