.page-products {
  --tp-rail-w: 232px;
  --tp-soft: #cfe0d7;
  --tp-dim: #b9cec4;
  color: var(--pale);
  background-color: var(--felt);
  background-image:
    radial-gradient(920px 520px at 82% 0%, rgba(200, 162, 74, 0.14), transparent 62%),
    radial-gradient(700px 480px at 8% 34%, rgba(30, 74, 66, 0.55), transparent 70%);
  background-repeat: no-repeat;
}

.page-products .tp-crumbbar {
  padding-top: 20px;
}

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

.page-products .tp-hero {
  position: relative;
  padding-top: clamp(20px, 3vw, 34px);
}

.page-products .tp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-products .tp-hero__copy h1 {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(31px, 6.6vw, 60px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--pale);
}

.page-products .tp-hero__lead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--tp-soft);
}

.page-products .tp-hero__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .tp-hero__art {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--shadow);
}

.page-products .tp-hero__art img,
.page-products .tp-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 数据条 ---------- */

.page-products .tp-strip {
  margin-top: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}

.page-products .tp-strip__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(4, 21, 18, 0.55);
}

.page-products .tp-strip__num {
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.page-products .tp-strip__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sage);
}

/* ---------- 主体两栏 ---------- */

.page-products .tp-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  padding-block: clamp(36px, 5.5vw, 72px);
}

.page-products .tp-rail__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .tp-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .tp-rail__list li {
  flex: 0 0 auto;
}

.page-products .tp-rail__list a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-s);
  border-bottom: 2px solid transparent;
  background: rgba(16, 56, 47, 0.5);
  color: var(--tp-dim);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-products .tp-rail__list a:hover {
  color: var(--pale);
  background: rgba(200, 162, 74, 0.12);
}

.page-products .tp-rail__list a.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(200, 162, 74, 0.14);
}

.page-products .tp-rail__note {
  margin-top: 20px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--glass);
  font-size: 13px;
  line-height: 1.75;
  color: var(--sage);
}

.page-products .tp-rail__note p {
  margin: 0;
}

.page-products .tp-rail__note p + p {
  margin-top: 6px;
}

.page-products .tp-rail__notehead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

/* ---------- 章节 ---------- */

.page-products .tp-section {
  padding-block: clamp(30px, 4.6vw, 56px);
  border-top: 1px solid var(--line-soft);
}

.page-products .tp-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .section-head {
  margin-bottom: clamp(8px, 1.6vw, 16px);
}

.page-products .section-head__index {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.page-products .section-head__lead {
  color: var(--tp-soft);
}

/* ---------- 记录查询 ---------- */

.page-products .tp-query {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 26px;
}

.page-products .tp-query__panel,
.page-products .tp-query__result {
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--glass);
}

.page-products .tp-query__result {
  border-color: rgba(200, 162, 74, 0.44);
  background: linear-gradient(150deg, rgba(200, 162, 74, 0.14), rgba(16, 56, 47, 0.5));
}

.page-products .tp-query__title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-products .tp-query__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .tp-query__fields li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
  line-height: 1.6;
}

.page-products .tp-query__fields li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .tp-key {
  color: var(--sage);
}

.page-products .tp-val {
  color: var(--pale);
}

.page-products .tp-query__hint {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--sage);
}

.page-products .tp-query__code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: rgba(4, 21, 18, 0.6);
}

.page-products .tp-query__codelabel {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .tp-query__codeval {
  font-size: clamp(18px, 2.8vw, 23px);
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-products .tp-query__facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tp-soft);
}

.page-products .tp-query__facts li {
  position: relative;
  padding-left: 20px;
}

.page-products .tp-query__facts li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* ---------- 通用图形容器 ---------- */

.page-products .tp-figure {
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--glass);
}

/* ---------- 段位分数 ---------- */

.page-products .tp-scale {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(20px, 3vw, 32px);
}

.page-products .tp-tablewrap {
  margin-top: clamp(20px, 3vw, 30px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(4, 21, 18, 0.42);
}

.page-products .tp-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .tp-table caption {
  caption-side: top;
  padding: 16px 18px 12px;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

.page-products .tp-table th,
.page-products .tp-table td {
  padding: 13px 18px;
  text-align: left;
  line-height: 1.6;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .tp-table thead th {
  background: var(--slate);
  color: var(--pale);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.page-products .tp-table tbody tr:hover {
  background: rgba(200, 162, 74, 0.07);
}

.page-products .tp-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .tp-rank {
  color: var(--gold);
  font-weight: 600;
}

.page-products .tp-range {
  font-family: var(--font-mono);
  color: var(--amber);
  white-space: nowrap;
}

.page-products .tp-sub {
  color: var(--sage);
}

/* ---------- 牌型对照 ---------- */

.page-products .tp-patterns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

.page-products .tp-pattern {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--glass);
  overflow: hidden;
}

.page-products .tp-pattern > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--pale);
}

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

.page-products .tp-pattern > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--gold);
}

.page-products .tp-pattern[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(200, 162, 74, 0.09);
}

.page-products .tp-pattern[open] > summary::after {
  content: "–";
}

.page-products .tp-pattern__name {
  font-size: 17px;
}

.page-products .tp-pattern__freq {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-products .tp-steps {
  margin: 0;
  padding: 16px 18px 18px 38px;
  display: grid;
  gap: 9px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-steps li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
}

/* ---------- 房间导航 ---------- */

.page-products .tp-rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: clamp(22px, 3vw, 30px);
}

.page-products .tp-room {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border-radius: var(--r-m);
}

.page-products .tp-room__code {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.page-products .tp-room .card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--pale);
}

.page-products .tp-room .card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-room__levels {
  list-style: none;
  margin: auto 0 0;
  padding: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--line-soft);
}

.page-products .tp-room__levels li {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(30, 74, 66, 0.72);
  font-size: 12px;
  color: var(--tp-dim);
}

/* ---------- 新手练习 ---------- */

.page-products .tp-rookie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: clamp(22px, 3vw, 30px);
}

.page-products .tp-rookie__time {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(200, 162, 74, 0.4);
  border-radius: var(--r-m);
  background: linear-gradient(140deg, rgba(200, 162, 74, 0.2), rgba(16, 56, 47, 0.6));
}

.page-products .tp-rookie__day {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(26px, 4.8vw, 40px);
  letter-spacing: 0.02em;
  color: var(--goldsoft);
}

.page-products .tp-rookie__clock {
  margin: 8px 0 0;
  font-size: clamp(20px, 3.6vw, 28px);
  letter-spacing: 0.06em;
  color: var(--amber);
}

.page-products .tp-rookie__time p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #d8e6de;
}

.page-products .tp-rookie__time .btn {
  margin-top: 20px;
}

.page-products .tp-path {
  list-style: none;
  counter-reset: tppath;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .tp-path li {
  counter-increment: tppath;
  position: relative;
  padding: 15px 16px 15px 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  background: var(--glass);
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-path li::before {
  content: counter(tppath, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 15px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
}

/* ---------- 更新与版本 ---------- */

.page-products .tp-versions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--line-soft);
}

.page-products .tp-version {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  background: rgba(4, 21, 18, 0.5);
}

.page-products .tp-version__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .tp-version__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: 0.03em;
  color: var(--gold);
}

.page-products .tp-version__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-links {
  display: grid;
  gap: 18px;
  margin-top: clamp(24px, 4vw, 38px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(135deg, rgba(30, 74, 66, 0.85), rgba(4, 21, 18, 0.92));
}

.page-products .tp-links h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(20px, 2.8vw, 26px);
  letter-spacing: 0.03em;
  color: var(--pale);
}

.page-products .tp-links p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--tp-soft);
}

.page-products .tp-links__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

@media (min-width: 640px) {
  .page-products .tp-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

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

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

@media (min-width: 820px) {
  .page-products .tp-rookie {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-products .tp-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(32px, 5vw, 64px);
  }

  .page-products .tp-body {
    grid-template-columns: var(--tp-rail-w) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 60px);
  }

  .page-products .tp-rail {
    position: sticky;
    top: 96px;
  }

  .page-products .tp-rail__list {
    display: grid;
    gap: 2px;
    overflow: visible;
    border-left: 1px solid var(--line-soft);
  }

  .page-products .tp-rail__list li {
    flex: none;
  }

  .page-products .tp-rail__list a {
    margin-left: -1px;
    padding: 9px 14px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
  }

  .page-products .tp-rail__list a:hover {
    background: rgba(200, 162, 74, 0.08);
  }

  .page-products .tp-rail__list a.is-active {
    border-left-color: var(--gold);
    border-bottom-color: transparent;
    background: rgba(200, 162, 74, 0.1);
  }
}

@media (min-width: 1120px) {
  .page-products .tp-rooms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
<<<END>>>

等等，我不小心在最后加了个 `<<<END>>>`，而且实际内容已经结束了。我应该只输出 MAIN_HTML 和 PAGE_CSS 这两个标记，重复输出整个内容反而是错的。让我重新核对一下输出：标记只有 `` 和 ``，没有 END 标记。需要把末尾多余的 `<<<END>>>` 去掉。

另外检查一下：`.page-products .tp-strip__num` 用了 `.mono` 这个全局类，没问题。CSS 里有没有漏掉 `.page-products .tp-rail` 在移动端的样式？我在 1024px 以上才给它加 sticky，也就是说默认是普通块。

还有 `.tp-rail__list` 在移动端默认是 flex + 横向滚动，在 1024px 以上才改成网格。这个没问题。

关于锚点：`#tools-top` 没有被任何链接引用，不过它作为 `id` 是合法的，没问题。

图片共 5 张，符合要求。首屏那张没有加 `loading="lazy"`，也有 `decoding="async"`，符合规则。

再检查一下有没有“不提供、不设”这类被禁的词。我用了“不需要安装客户端”，这个可以接受，描述的是实际情况。

现在把整个内容重新整理输出，去掉末尾的 `<<<END>>>`。
<main id="main-content" class="page-products">

  <div class="shell tp-crumbbar">
    <nav class="crumbs" aria-label="页面位置">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">工具中心</span>
    </nav>
  </div>

  <section class="tp-hero" data-section id="tools-top">
    <div class="shell tp-hero__grid">
      <div class="tp-hero__copy" data-reveal>
        <p class="eyebrow">工具中心 · 第 6 版</p>
        <h1>牌局记录、段位分数与牌型规则，在同一张工作台上查完</h1>
        <p class="tp-hero__lead">开元棋牌中心把复盘和练习时最常用的四件事集中在这里：调出历史牌局、核对当前段位、对照常见牌型、按玩法找到合适的房间。桌面端和移动浏览器打开就能用，不需要安装客户端。</p>
        <div class="tp-hero__actions">
          <a class="btn btn--gold" href="#query">开始检索记录</a>
          <a class="btn btn--ghost" href="#ranks">查看段位分数</a>
        </div>
      </div>
      <figure class="tp-hero__art media media--tall" data-reveal>
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="抽象筹码堆叠与等宽分数刻度构成的数据工作台" decoding="async">
        <figcaption class="media__caption">四类工具共用一套编号与时间标注，查到的每一条结果都带着它自己的更新时刻。</figcaption>
      </figure>
    </div>

    <div class="shell tp-strip" data-reveal>
      <div class="tp-strip__item">
        <span class="tp-strip__num mono">365</span>
        <span class="tp-strip__label">天回放记录默认保留</span>
      </div>
      <div class="tp-strip__item">
        <span class="tp-strip__num mono">42</span>
        <span class="tp-strip__label">种常见牌型可对照</span>
      </div>
      <div class="tp-strip__item">
        <span class="tp-strip__num mono">27</span>
        <span class="tp-strip__label">个小段位覆盖全赛季</span>
      </div>
      <div class="tp-strip__item">
        <span class="tp-strip__num mono">12</span>
        <span class="tp-strip__label">个房间层级按玩法划分</span>
      </div>
    </div>
  </section>

  <div class="shell tp-body">
    <aside class="tp-rail" data-toc aria-label="工具索引">
      <p class="tp-rail__title">工具索引</p>
      <ol class="tp-rail__list">
        <li><a href="#query">记录查询与回放</a></li>
        <li><a href="#ranks">段位分数表</a></li>
        <li><a href="#patterns">牌型对照</a></li>
        <li><a href="#rooms">四类房间</a></li>
        <li><a href="#rookie">新手练习</a></li>
        <li><a href="#versions">更新与版本</a></li>
      </ol>
      <div class="tp-rail__note">
        <p class="tp-rail__notehead"><span class="statusdot" aria-hidden="true"></span>第 6 版已上线</p>
        <p>四类工具随同一次版本发布更新，桌面端与移动端使用同一套数据。</p>
      </div>
    </aside>

    <div class="tp-main">

      <section class="tp-section" id="query" data-section>
        <header class="section-head">
          <p class="section-head__index mono">01</p>
          <h2 class="section-head__title">记录查询与回放检索</h2>
          <p class="section-head__lead">按时间范围、房间号或玩法类型定位历史牌局。开元棋牌PC端回放牌局的入口已并入这一页，检索和回放不用来回切换。</p>
        </header>

        <div class="tp-query">
          <div class="tp-query__panel" data-reveal>
            <p class="tp-query__title">可用的三类条件</p>
            <ul class="tp-query__fields">
              <li>
                <span class="tp-key">时间范围</span>
                <span class="tp-val mono">近 7 天 / 近 30 天 / 自定义区间</span>
              </li>
              <li>
                <span class="tp-key">房间号</span>
                <span class="tp-val mono">8 位房间编号</span>
              </li>
              <li>
                <span class="tp-key">玩法类型</span>
                <span class="tp-val">经典 / 竞速 / 策略 / 休闲</span>
              </li>
            </ul>
            <p class="tp-query__hint">三种条件可以单独使用，也可以叠加起来把范围收窄到某一桌、某一晚。</p>
          </div>

          <div class="tp-query__result" data-reveal>
            <p class="tp-query__title">检索完成后</p>
            <div class="tp-query__code">
              <span class="tp-query__codelabel">查询编号</span>
              <span class="tp-query__codeval mono">KY2506A03741</span>
            </div>
            <p class="tp-query__hint">每次检索生成一个 12 位查询编号。向客服核对某局数据时提供它，定位速度会快很多。</p>
            <ul class="tp-query__facts">
              <li>平均响应时间低于 800 毫秒</li>
              <li>回放记录默认保留最近 365 天</li>
              <li>重要赛季记录可延长至 18 个月</li>
              <li>桌面端与移动端使用同一套检索条件</li>
            </ul>
          </div>
        </div>

        <figure class="tp-figure media media--wide" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="时间轴与房间号检索面板的抽象界面示意" loading="lazy" decoding="async">
          <figcaption class="media__caption">回放按对局时间轴逐手推进，进度条停在任意位置都能看到当时的牌面与出牌顺序。</figcaption>
        </figure>
      </section>

      <section class="tp-section" id="ranks" data-section>
        <header class="section-head">
          <p class="section-head__index mono">02</p>
          <h2 class="section-head__title">段位分数表</h2>
          <p class="section-head__lead">KY棋牌2025段位分数覆盖 9 个大段位、27 个小段位，分数区间从 0 分延伸到 3600 分。每个大段位下设 3 个小段位，晋级同时看赛季有效对局数、分数阈值和规则测试完成度。</p>
        </header>

        <svg class="tp-scale" viewBox="0 0 900 132" role="img" aria-label="九个段位对应的分数区间刻度条，从零分到三千六百分">
          <rect x="13" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.18"></rect>
          <rect x="111" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.28"></rect>
          <rect x="209" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.38"></rect>
          <rect x="307" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.50"></rect>
          <rect x="405" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.62"></rect>
          <rect x="503" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.72"></rect>
          <rect x="601" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.82"></rect>
          <rect x="699" y="18" width="90" height="46" rx="4" fill="#C8A24A" opacity="0.92"></rect>
          <rect x="797" y="18" width="90" height="46" rx="4" fill="#E8B85C"></rect>

          <text x="58" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">0–400</text>
          <text x="156" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">401–800</text>
          <text x="254" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">801–1200</text>
          <text x="352" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">1201–1600</text>
          <text x="450" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">1601–2000</text>
          <text x="548" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">2001–2400</text>
          <text x="646" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">2401–2800</text>
          <text x="744" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">2801–3200</text>
          <text x="842" y="88" text-anchor="middle" font-size="11" fill="#8FA99B" font-family="monospace">3201–3600</text>

          <text x="58" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">入门</text>
          <text x="156" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">初阶</text>
          <text x="254" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">进阶</text>
          <text x="352" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">熟练</text>
          <text x="450" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">精通</text>
          <text x="548" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">精英</text>
          <text x="646" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">大师</text>
          <text x="744" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">宗师</text>
          <text x="842" y="114" text-anchor="middle" font-size="12" fill="#C8A24A">王者</text>
        </svg>

        <div class="tp-tablewrap" data-reveal>
          <table class="tp-table">
            <caption>大段位与晋级门槛一览，赛季长度为 8 周，赛季结束时按当前分数重新定级。</caption>
            <thead>
              <tr>
                <th scope="col">大段位</th>
                <th scope="col">分数区间</th>
                <th scope="col">小段位</th>
                <th scope="col">晋级门槛</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="tp-rank">入门</td>
                <td class="tp-range">0–400</td>
                <td class="tp-sub">3</td>
                <td>完成基础规则测试</td>
              </tr>
              <tr>
                <td class="tp-rank">初阶</td>
                <td class="tp-range">401–800</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 20 场</td>
              </tr>
              <tr>
                <td class="tp-rank">进阶</td>
                <td class="tp-range">801–1200</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 40 场</td>
              </tr>
              <tr>
                <td class="tp-rank">熟练</td>
                <td class="tp-range">1201–1600</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 60 场</td>
              </tr>
              <tr>
                <td class="tp-rank">精通</td>
                <td class="tp-range">1601–2000</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 80 场并完成进阶规则测试</td>
              </tr>
              <tr>
                <td class="tp-rank">精英</td>
                <td class="tp-range">2001–2400</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 100 场</td>
              </tr>
              <tr>
                <td class="tp-rank">大师</td>
                <td class="tp-range">2401–2800</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 120 场并完成高阶规则测试</td>
              </tr>
              <tr>
                <td class="tp-rank">宗师</td>
                <td class="tp-range">2801–3200</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 140 场</td>
              </tr>
              <tr>
                <td class="tp-rank">王者</td>
                <td class="tp-range">3201–3600</td>
                <td class="tp-sub">3</td>
                <td>赛季有效对局 160 场并完成全规则测试</td>
              </tr>
            </tbody>
          </table>
        </div>

        <figure class="tp-figure media media--wide" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="九段分数区间对应的等宽刻度与色带" loading="lazy" decoding="async">
          <figcaption class="media__caption">分数区间按大段位等宽划分，越靠上的区间在界面上颜色越亮。</figcaption>
        </figure>
      </section>

      <section class="tp-section" id="patterns" data-section>
        <header class="section-head">
          <p class="section-head__index mono">03</p>
          <h2 class="section-head__title">牌型对照与规则解释</h2>
          <p class="section-head__lead">赛季活动常见牌型对照收录 42 种牌型，按出现频率和上手难度分成三组。点开任意一个牌型，就能看到从起手判断到结算的逐步说明。</p>
        </header>

        <figure class="tp-figure media media--square" data-reveal>
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="暗金线条绘制的抽象牌型卡片组合" loading="lazy" decoding="async">
          <figcaption class="media__caption">牌型卡片按出现频率排列，常用的排在最前面，新手可以先从高频组看起。</figcaption>
        </figure>

        <div class="tp-patterns">
          <details class="tp-pattern" open>
            <summary>
              <span class="tp-pattern__name">对子</span>
              <span class="tp-pattern__freq mono">高频</span>
            </summary>
            <ol class="tp-steps">
              <li>起手先确认自己手上同点数的两张牌。</li>
              <li>观察公开牌面里出现过哪些点数，估算还能补到几张。</li>
              <li>结合对手出牌的快慢，判断跟到第几轮更划算。</li>
            </ol>
          </details>

          <details class="tp-pattern">
            <summary>
              <span class="tp-pattern__name">三张同点</span>
              <span class="tp-pattern__freq mono">中频</span>
            </summary>
            <ol class="tp-steps">
              <li>确认三张同点数牌是否已经全部在自己手里。</li>
              <li>核对剩余公共牌里还有没有可能补强的点数。</li>
              <li>对照房间层级，判断这一手在当前玩法里的强度位置。</li>
            </ol>
          </details>

          <details class="tp-pattern">
            <summary>
              <span class="tp-pattern__name">连续五张</span>
              <span class="tp-pattern__freq mono">高频</span>
            </summary>
            <ol class="tp-steps">
              <li>把手上牌按点数排好，找出现有的连续段。</li>
              <li>确定缺哪一张才能把两端接上。</li>
              <li>在转牌和河牌阶段各核对一次，避免漏掉补张。</li>
            </ol>
          </details>

          <details class="tp-pattern">
            <summary>
              <span class="tp-pattern__name">同花色组合</span>
              <span class="tp-pattern__freq mono">中频</span>
            </summary>
            <ol class="tp-steps">
              <li>统计手上同一花色的张数，四张以上才值得继续关注。</li>
              <li>确认公共牌里这一花色的分布情况。</li>
              <li>比较同花与其他路线的成牌难度，再决定主攻方向。</li>
            </ol>
          </details>

          <details class="tp-pattern">
            <summary>
              <span class="tp-pattern__name">三带一对</span>
              <span class="tp-pattern__freq mono">高频</span>
            </summary>
            <ol class="tp-steps">
              <li>先确定三张同点的那一组，它是牌型的主体。</li>
              <li>再挑出点数最大的一对作为辅牌。</li>
              <li>比较不同组合的总体强度，选报分更高的那一种。</li>
            </ol>
          </details>

          <details class="tp-pattern">
            <summary>
              <span class="tp-pattern__name">四张同点</span>
              <span class="tp-pattern__freq mono">低频</span>
            </summary>
            <ol class="tp-steps">
              <li>确认四张同点牌数量足够，缺一张就按三条处理。</li>
              <li>核对规则中对四张同点的加成计算方式。</li>
              <li>留意它与其他牌型叠加时的判定顺序。</li>
            </ol>
          </details>

          <details class="tp-pattern">
            <summary>
              <span class="tp-pattern__name">同花连续</span>
              <span class="tp-pattern__freq mono">低频</span>
            </summary>
            <ol class="tp-steps">
              <li>先按花色筛出手上最集中的一组。</li>
              <li>再在这组里找连续段，两者同时满足才算成立。</li>
              <li>对照难度分组的说明，确认它的判定细则。</li>
            </ol>
          </details>
        </div>
      </section>

      <section class="tp-section" id="rooms" data-section>
        <header class="section-head">
          <p class="section-head__index mono">04</p>
          <h2 class="section-head__title">四类房间导航</h2>
          <p class="section-head__lead">房间导航按玩法分成经典、竞速、策略、休闲四类，每类下设三个层级，从入门层到进阶层一共 12 个房间层级。先选玩法，再选层级，两步就能进到合适的那一桌。</p>
        </header>

        <div class="tp-rooms">
          <article class="card card--glass tp-room" data-reveal>
            <span class="tp-room__code mono">01</span>
            <h3 class="card__title">经典</h3>
            <p class="card__text">按标准流程推进，每局节奏平稳，适合把基础牌型和出牌顺序打熟。</p>
            <ul class="tp-room__levels">
              <li>入门层</li>
              <li>常规层</li>
              <li>进阶层</li>
            </ul>
          </article>

          <article class="card card--glass tp-room" data-reveal>
            <span class="tp-room__code mono">02</span>
            <h3 class="card__title">竞速</h3>
            <p class="card__text">单局用时更短，决策窗口收窄，适合已经熟悉规则、想练反应和算牌的玩家。</p>
            <ul class="tp-room__levels">
              <li>入门层</li>
              <li>常规层</li>
              <li>进阶层</li>
            </ul>
          </article>

          <article class="card card--glass tp-room" data-reveal>
            <span class="tp-room__code mono">03</span>
            <h3 class="card__title">策略</h3>
            <p class="card__text">牌型组合更多变，同一条路线往往有几种打法，适合愿意慢慢推演的玩家。</p>
            <ul class="tp-room__levels">
              <li>入门层</li>
              <li>常规层</li>
              <li>进阶层</li>
            </ul>
          </article>

          <article class="card card--glass tp-room" data-reveal>
            <span class="tp-room__code mono">04</span>
            <h3 class="card__title">休闲</h3>
            <p class="card__text">对局轮次更轻松，适合碎片时间上手，也适合几位朋友约在同一个房间。</p>
            <ul class="tp-room__levels">
              <li>入门层</li>
              <li>常规层</li>
              <li>进阶层</li>
            </ul>
          </article>
        </div>

        <figure class="tp-figure media media--wide" data-reveal>
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="四分区桌面上的抽象房间入口图标" loading="lazy" decoding="async">
          <figcaption class="media__caption">四类玩法各自独立分区，房间层级在界面上以台阶形式排列，越靠右门槛越高。</figcaption>
        </figure>
      </section>

      <section class="tp-section" id="rookie" data-section>
        <header class="section-head">
          <p class="section-head__index mono">05</p>
          <h2 class="section-head__title">新手练习工具</h2>
          <p class="section-head__lead">每周三 20:00–22:00 开放新手练习局，房间里带引导提示和牌型说明。第一次接触规则，或者想找回手感，都可以从这个时段开始。</p>
        </header>

        <div class="tp-rookie">
          <div class="tp-rookie__time" data-reveal>
            <p class="tp-rookie__day">每周三</p>
            <p class="tp-rookie__clock mono">20:00 — 22:00</p>
            <p>练习局围绕熟悉规则和牌型展开，全程有提示指引，出牌前会说明这一步的依据。对局节奏比常规房间更慢，允许反复回看说明再决定。</p>
            <a class="btn btn--ghost btn--sm" href="#versions">看看最近更新了什么</a>
          </div>

          <ol class="tp-path" data-reveal>
            <li>先在牌型对照里挑两个高频牌型，把它们的判定条件读一遍。</li>
            <li>进入新手练习局，跟着引导提示走完一整局，遇到不确定的地方随时停下来看说明。</li>
            <li>练习结束后用记录查询调出这一局，逐手对照牌型说明，看哪一步判断可以更好。</li>
            <li>连续练两到三个周三之后，再考虑转到经典玩法的入门层房间。</li>
          </ol>
        </div>
      </section>

      <section class="tp-section" id="versions" data-section>
        <header class="section-head">
          <p class="section-head__index mono">06</p>
          <h2 class="section-head__title">更新与数据版本</h2>
          <p class="section-head__lead">工具中心每月平均更新 3 次。每次更新后版本号和更新时间会跟着工具一起显示，方便您确认手上看到的是哪一版数据。</p>
        </header>

        <div class="tp-versions" data-reveal>
          <div class="tp-version">
            <span class="tp-version__label">工具中心版本</span>
            <span class="tp-version__value mono">第 6 版</span>
            <p class="tp-version__desc">2025 年完成的大版本迭代，重点优化了记录查询速度和移动端阅读体验。</p>
          </div>
          <div class="tp-version">
            <span class="tp-version__label">发布节奏</span>
            <span class="tp-version__value mono">每月 3 次</span>
            <p class="tp-version__desc">版本日志同步发布在内容笔记里，改动点逐条列出，翻旧账也能查得到。</p>
          </div>
          <div class="tp-version">
            <span class="tp-version__label">段位分数更新</span>
            <span class="tp-version__value mono">每赛季 1 次</span>
            <p class="tp-version__desc">赛季长度 8 周，赛季结束后按新的分数阈值重新定级，晋级条件同步刷新。</p>
          </div>
          <div class="tp-version">
            <span class="tp-version__label">牌型表复核</span>
            <span class="tp-version__value mono">每季度 1 次</span>
            <p class="tp-version__desc">规则有变化时，7 天内会同步到牌型对照页，并在说明里标出改动的部分。</p>
          </div>
        </div>

        <div class="tp-links" data-reveal>
          <div>
            <h3>接下来可以做什么</h3>
            <p>想了解平台整体情况，可以看品牌总览；遇到具体操作问题，使用教程里有分步骤说明；需要核对某局数据，把查询编号一起发给客服，定位会快很多。</p>
          </div>
          <div class="tp-links__row">
            <a class="btn btn--gold" href="/overview/">查看品牌总览</a>
            <a class="btn btn--ghost" href="/notes/">浏览内容笔记</a>
            <a class="btn btn--ghost" href="/tutorial/">打开使用教程</a>
            <a class="btn btn--ghost" href="/contact/">联系客服核对数据</a>
          </div>
        </div>
      </section>

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

.page-products {
  --tp-rail-w: 232px;
  --tp-soft: #cfe0d7;
  --tp-dim: #b9cec4;
  color: var(--pale);
  background-color: var(--felt);
  background-image:
    radial-gradient(920px 520px at 82% 0%, rgba(200, 162, 74, 0.14), transparent 62%),
    radial-gradient(700px 480px at 8% 34%, rgba(30, 74, 66, 0.55), transparent 70%);
  background-repeat: no-repeat;
}

.page-products .tp-crumbbar {
  padding-top: 20px;
}

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

.page-products .tp-hero {
  position: relative;
  padding-top: clamp(20px, 3vw, 34px);
}

.page-products .tp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.page-products .tp-hero__copy h1 {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(31px, 6.6vw, 60px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--pale);
}

.page-products .tp-hero__lead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.85;
  color: var(--tp-soft);
}

.page-products .tp-hero__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-products .tp-hero__art {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--shadow);
}

.page-products .tp-hero__art img,
.page-products .tp-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 数据条 ---------- */

.page-products .tp-strip {
  margin-top: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}

.page-products .tp-strip__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(4, 21, 18, 0.55);
}

.page-products .tp-strip__num {
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.page-products .tp-strip__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sage);
}

/* ---------- 主体两栏 ---------- */

.page-products .tp-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
  padding-block: clamp(36px, 5.5vw, 72px);
}

.page-products .tp-rail__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .tp-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-products .tp-rail__list li {
  flex: 0 0 auto;
}

.page-products .tp-rail__list a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-s);
  border-bottom: 2px solid transparent;
  background: rgba(16, 56, 47, 0.5);
  color: var(--tp-dim);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-products .tp-rail__list a:hover {
  color: var(--pale);
  background: rgba(200, 162, 74, 0.12);
}

.page-products .tp-rail__list a.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(200, 162, 74, 0.14);
}

.page-products .tp-rail__note {
  margin-top: 20px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--glass);
  font-size: 13px;
  line-height: 1.75;
  color: var(--sage);
}

.page-products .tp-rail__note p {
  margin: 0;
}

.page-products .tp-rail__note p + p {
  margin-top: 6px;
}

.page-products .tp-rail__notehead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

/* ---------- 章节 ---------- */

.page-products .tp-section {
  padding-block: clamp(30px, 4.6vw, 56px);
  border-top: 1px solid var(--line-soft);
}

.page-products .tp-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-products .section-head {
  margin-bottom: clamp(8px, 1.6vw, 16px);
}

.page-products .section-head__index {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.page-products .section-head__lead {
  color: var(--tp-soft);
}

/* ---------- 记录查询 ---------- */

.page-products .tp-query {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 26px;
}

.page-products .tp-query__panel,
.page-products .tp-query__result {
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--glass);
}

.page-products .tp-query__result {
  border-color: rgba(200, 162, 74, 0.44);
  background: linear-gradient(150deg, rgba(200, 162, 74, 0.14), rgba(16, 56, 47, 0.5));
}

.page-products .tp-query__title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-products .tp-query__fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .tp-query__fields li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
  line-height: 1.6;
}

.page-products .tp-query__fields li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .tp-key {
  color: var(--sage);
}

.page-products .tp-val {
  color: var(--pale);
}

.page-products .tp-query__hint {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--sage);
}

.page-products .tp-query__code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: rgba(4, 21, 18, 0.6);
}

.page-products .tp-query__codelabel {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .tp-query__codeval {
  font-size: clamp(18px, 2.8vw, 23px);
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-products .tp-query__facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tp-soft);
}

.page-products .tp-query__facts li {
  position: relative;
  padding-left: 20px;
}

.page-products .tp-query__facts li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* ---------- 通用图形容器 ---------- */

.page-products .tp-figure {
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--glass);
}

/* ---------- 段位分数 ---------- */

.page-products .tp-scale {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(20px, 3vw, 32px);
}

.page-products .tp-tablewrap {
  margin-top: clamp(20px, 3vw, 30px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(4, 21, 18, 0.42);
}

.page-products .tp-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-products .tp-table caption {
  caption-side: top;
  padding: 16px 18px 12px;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

.page-products .tp-table th,
.page-products .tp-table td {
  padding: 13px 18px;
  text-align: left;
  line-height: 1.6;
  border-bottom: 1px solid var(--line-soft);
}

.page-products .tp-table thead th {
  background: var(--slate);
  color: var(--pale);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.page-products .tp-table tbody tr:hover {
  background: rgba(200, 162, 74, 0.07);
}

.page-products .tp-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-products .tp-rank {
  color: var(--gold);
  font-weight: 600;
}

.page-products .tp-range {
  font-family: var(--font-mono);
  color: var(--amber);
  white-space: nowrap;
}

.page-products .tp-sub {
  color: var(--sage);
}

/* ---------- 牌型对照 ---------- */

.page-products .tp-patterns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

.page-products .tp-pattern {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--glass);
  overflow: hidden;
}

.page-products .tp-pattern > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--pale);
}

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

.page-products .tp-pattern > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--gold);
}

.page-products .tp-pattern[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(200, 162, 74, 0.09);
}

.page-products .tp-pattern[open] > summary::after {
  content: "–";
}

.page-products .tp-pattern__name {
  font-size: 17px;
}

.page-products .tp-pattern__freq {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-products .tp-steps {
  margin: 0;
  padding: 16px 18px 18px 38px;
  display: grid;
  gap: 9px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-steps li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
}

/* ---------- 房间导航 ---------- */

.page-products .tp-rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: clamp(22px, 3vw, 30px);
}

.page-products .tp-room {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border-radius: var(--r-m);
}

.page-products .tp-room__code {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.page-products .tp-room .card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--pale);
}

.page-products .tp-room .card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-room__levels {
  list-style: none;
  margin: auto 0 0;
  padding: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--line-soft);
}

.page-products .tp-room__levels li {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(30, 74, 66, 0.72);
  font-size: 12px;
  color: var(--tp-dim);
}

/* ---------- 新手练习 ---------- */

.page-products .tp-rookie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: clamp(22px, 3vw, 30px);
}

.page-products .tp-rookie__time {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(200, 162, 74, 0.4);
  border-radius: var(--r-m);
  background: linear-gradient(140deg, rgba(200, 162, 74, 0.2), rgba(16, 56, 47, 0.6));
}

.page-products .tp-rookie__day {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(26px, 4.8vw, 40px);
  letter-spacing: 0.02em;
  color: var(--goldsoft);
}

.page-products .tp-rookie__clock {
  margin: 8px 0 0;
  font-size: clamp(20px, 3.6vw, 28px);
  letter-spacing: 0.06em;
  color: var(--amber);
}

.page-products .tp-rookie__time p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: #d8e6de;
}

.page-products .tp-rookie__time .btn {
  margin-top: 20px;
}

.page-products .tp-path {
  list-style: none;
  counter-reset: tppath;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .tp-path li {
  counter-increment: tppath;
  position: relative;
  padding: 15px 16px 15px 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  background: var(--glass);
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-path li::before {
  content: counter(tppath, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 15px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
}

/* ---------- 更新与版本 ---------- */

.page-products .tp-versions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--line-soft);
}

.page-products .tp-version {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  background: rgba(4, 21, 18, 0.5);
}

.page-products .tp-version__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .tp-version__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: 0.03em;
  color: var(--gold);
}

.page-products .tp-version__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tp-soft);
}

.page-products .tp-links {
  display: grid;
  gap: 18px;
  margin-top: clamp(24px, 4vw, 38px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(135deg, rgba(30, 74, 66, 0.85), rgba(4, 21, 18, 0.92));
}

.page-products .tp-links h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(20px, 2.8vw, 26px);
  letter-spacing: 0.03em;
  color: var(--pale);
}

.page-products .tp-links p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--tp-soft);
}

.page-products .tp-links__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

@media (min-width: 640px) {
  .page-products .tp-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

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

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

@media (min-width: 820px) {
  .page-products .tp-rookie {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-products .tp-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(32px, 5vw, 64px);
  }

  .page-products .tp-body {
    grid-template-columns: var(--tp-rail-w) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 60px);
  }

  .page-products .tp-rail {
    position: sticky;
    top: 96px;
  }

  .page-products .tp-rail__list {
    display: grid;
    gap: 2px;
    overflow: visible;
    border-left: 1px solid var(--line-soft);
  }

  .page-products .tp-rail__list li {
    flex: none;
  }

  .page-products .tp-rail__list a {
    margin-left: -1px;
    padding: 9px 14px;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
  }

  .page-products .tp-rail__list a:hover {
    background: rgba(200, 162, 74, 0.08);
  }

  .page-products .tp-rail__list a.is-active {
    border-left-color: var(--gold);
    border-bottom-color: transparent;
    background: rgba(200, 162, 74, 0.1);
  }
}

@media (min-width: 1120px) {
  .page-products .tp-rooms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}