.page-products {
  --pw-line: 4px;
  --pw-tilt: -2deg;
  background: var(--ink);
  color: var(--chalk);
  padding-bottom: var(--breath);
}

.page-products .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 面包屑 */
.page-products .breadcrumb {
  padding-top: clamp(16px, 3vw, 28px);
}

.page-products .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sage);
}

.page-products .breadcrumb li + li::before {
  content: "/";
  margin: 0 8px;
  color: var(--line);
}

.page-products .breadcrumb a {
  color: var(--sage);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

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

.page-products .breadcrumb li[aria-current="page"] {
  color: var(--chalk);
}

/* 首屏 */
.page-products .tools-intro {
  padding: clamp(32px, 6vw, 72px) 0 clamp(32px, 6vw, 60px);
  border-bottom: var(--edge) solid var(--line);
}

.page-products .tools-intro .h-hero {
  margin: 16px 0 0;
  max-width: min(100%, 14em);
}

.page-products .tools-intro__lead {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 36em;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .tools-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .tools-intro__chips li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  font-size: 14px;
  color: var(--chalk);
}

.page-products .tools-intro__chips .mono {
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.08em;
}

/* 目录 + 内容双栏 */
.page-products .tools-layout {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
  padding-top: clamp(32px, 6vw, 64px);
}

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

.page-products .tools-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
}

.page-products .tools-rail__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
  color: var(--chalk);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}

.page-products .tools-rail__link .mono {
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0.08em;
}

.page-products .tools-rail__link:hover,
.page-products .tools-rail__link:focus-visible {
  border-color: var(--lime);
  background: var(--turf);
  color: var(--lime);
}

/* 工具块 */
.page-products .tools-stream,
.page-products .tools-tail {
  display: flex;
  flex-direction: column;
}

.page-products .tools-tail {
  margin-top: clamp(56px, 9vw, 104px);
}

.page-products .tool-block {
  border-top: var(--edge) solid var(--line);
  padding-top: clamp(20px, 4vw, 32px);
  margin-top: clamp(48px, 8vw, 80px);
}

.page-products .tool-block:first-child {
  margin-top: 0;
}

.page-products .tool-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 3vw, 24px);
}

.page-products .tool-head__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  line-height: 0.9;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.page-products .tool-head .kicker {
  margin: 0 0 6px;
}

.page-products .tool-head h2 {
  margin: 0;
}

.page-products .tool-block__lead {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .tool-block__foot {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

.page-products .tool-block__foot a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
}

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

/* 排名查询台 */
.page-products .rank-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(24px, 4vw, 36px);
}

.page-products .table-scroll {
  overflow-x: auto;
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
}

.page-products .data-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .data-table caption {
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .data-table th {
  padding: 10px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--sage);
  border-bottom: var(--edge) solid var(--line);
  white-space: nowrap;
}

.page-products .data-table td {
  padding: 12px;
  border-bottom: 2px solid var(--line);
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

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

.page-products .data-table tbody tr:nth-child(odd) {
  background: rgba(27, 51, 39, 0.55);
}

.page-products .data-table tbody tr.is-local {
  background: rgba(198, 255, 61, 0.14);
}

.page-products .data-table tr.is-local td:first-child {
  border-left: var(--pw-line) solid var(--orange);
}

.page-products .data-table .cell-score {
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: 700;
}

.page-products .table-note {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sage);
}

/* 图片与说明 */
.page-products .tool-figure {
  margin: 0;
}

.page-products .tool-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
  object-fit: cover;
}

.page-products .tool-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--sage);
}

.page-products .tool-figure--wide {
  margin-top: clamp(24px, 4vw, 36px);
}

/* 周末赛程 */
.page-products .fixtures-copy {
  margin-top: clamp(20px, 3vw, 28px);
  max-width: 36em;
}

.page-products .fixtures-copy p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .fixtures-copy p:last-child {
  margin-bottom: 0;
}

.page-products .slots {
  display: grid;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

.page-products .slot {
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
}

.page-products .slot summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--lime);
}

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

.page-products .slot summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
}

.page-products .slot[open] summary::after {
  content: "−";
}

.page-products .slot[open] summary {
  border-bottom: var(--edge) solid var(--line);
}

.page-products .slot__list {
  margin: 0;
  padding: 0 18px 12px;
  list-style: none;
}

.page-products .slot__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--chalk);
}

.page-products .slot__list li:last-child {
  border-bottom: 0;
}

.page-products .slot__list .mono {
  color: var(--orange);
  font-weight: 700;
}

.page-products .slot__meta {
  display: block;
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sage);
}

/* 正式版下载 */
.page-products .download-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 36px);
}

.page-products .download-panel {
  border: var(--edge) solid var(--lime);
  background: var(--charcoal);
  padding: clamp(20px, 4vw, 36px);
}

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

.page-products .download-panel__version {
  margin: 6px 0 18px;
  font-family: var(--font-mono);
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.page-products .download-panel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .entry-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line);
}

.page-products .entry-list li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 2px solid var(--line);
}

.page-products .entry-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .entry-list .entry-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-products .entry-list li > span:last-child {
  font-size: 15px;
  line-height: 1.7;
  color: var(--chalk);
}

/* 射门统计卡 */
.page-products .shots-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 36px);
}

.page-products .shot-map {
  display: block;
  width: 100%;
  height: auto;
  border: var(--edge) solid var(--line);
  background: var(--ink);
}

.page-products .shot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sage);
}

.page-products .shot-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-products .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.page-products .dot--on {
  background: var(--orange);
}

.page-products .dot--off {
  border: 3px solid var(--sage);
}

.page-products .metrics {
  margin: 0;
}

.page-products .metrics > div {
  padding: 16px 0;
  border-bottom: 2px solid var(--line);
}

.page-products .metrics > div:first-child {
  border-top: 2px solid var(--line);
  padding-top: 18px;
}

.page-products .metrics dt {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-products .metrics dd {
  margin: 6px 0 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--chalk);
}

/* 订阅提醒 */
.page-products .alert-list {
  display: grid;
  gap: 12px;
  margin: clamp(24px, 4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .alert-list li {
  padding: 16px 18px;
  border-left: var(--pw-line) solid var(--orange);
  background: var(--charcoal);
  font-size: 15px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .alert-list strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--orange);
}

/* 版本记录 */
.page-products .timeline {
  margin: clamp(24px, 4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  border-left: 3px solid var(--line);
}

.page-products .timeline li {
  position: relative;
  padding: 0 0 28px 26px;
}

.page-products .timeline li:last-child {
  padding-bottom: 0;
}

.page-products .timeline li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 6px;
  width: 15px;
  height: 15px;
  background: var(--lime);
}

.page-products .timeline__ver {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lime);
}

.page-products .timeline__text {
  margin: 8px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--chalk);
}

/* 适用场景 */
.page-products .roles {
  display: grid;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 32px);
}

.page-products .role {
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
  padding: 20px;
}

.page-products .role:hover {
  border-color: var(--lime);
}

.page-products .role__name {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .role p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .role a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-deep);
}

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

/* 后续入口 */
.page-products .tools-next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(40px, 6vw, 64px);
}

.page-products .tools-next a {
  padding: 14px 18px;
  border: var(--edge) solid var(--line);
  color: var(--chalk);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
}

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

/* 断点 */
@media (min-width: 760px) {
  .page-products .alert-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-products .download-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-products .shots-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

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

  .page-products .rank-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
  }
}

@media (min-width: 1000px) {
  .page-products .tools-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-products .tools-rail {
    position: sticky;
    top: 88px;
  }

  .page-products .tools-rail__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
  }

  .page-products .tools-rail__link {
    display: flex;
    white-space: normal;
    border: 0;
    border-left: var(--pw-line) solid transparent;
    border-bottom: 2px solid var(--line);
    background: transparent;
    padding: 14px 12px;
  }

  .page-products .tools-rail__link:last-child {
    border-bottom: 0;
  }

  .page-products .tools-rail__link:hover,
  .page-products .tools-rail__link:focus-visible {
    border-left-color: var(--lime);
    border-bottom-color: var(--line);
    background: var(--charcoal);
    color: var(--lime);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-products .role,
  .page-products .slot,
  .page-products .tools-rail__link,
  .page-products .tools-next a {
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }
}

<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="tools-intro">
      <p class="kicker">TOOLS / 01 — 04</p>
      <h1 class="h-hero">查排名、约周末、刷战报、比射门，四件事在这一页做完</h1>
      <p class="tools-intro__lead">爱游戏娱乐场把球迷和球队经理最常做的动作集中到一起：看清自己城市球队在湖南 12 个城市联赛里站到哪一级，挑出周六、周日能去看的场次，装好正式版在公司也能刷昨夜比分，再借射门统计判断一场球是怎么赢下来的。四块工具都有下一步可点。</p>
      <ul class="tools-intro__chips">
        <li><span class="mono">01</span> 排名查询</li>
        <li><span class="mono">02</span> 周末赛程</li>
        <li><span class="mono">03</span> 正式版下载</li>
        <li><span class="mono">04</span> 射门统计</li>
      </ul>
    </header>

    <div class="tools-layout">
      <aside class="tools-rail">
        <p class="tools-rail__title">工具目录</p>
        <ol class="tools-rail__list">
          <li><a class="tools-rail__link" href="#tool-rank"><span class="mono">01</span> 排名查询台</a></li>
          <li><a class="tools-rail__link" href="#tool-fixtures"><span class="mono">02</span> 周末赛程与约看</a></li>
          <li><a class="tools-rail__link" href="#tool-app"><span class="mono">03</span> 正式版与刷新</a></li>
          <li><a class="tools-rail__link" href="#tool-shots"><span class="mono">04</span> 射门统计卡</a></li>
        </ol>
      </aside>

      <div class="tools-stream">
        <section id="tool-rank" class="tool-block" aria-labelledby="tool-rank-h" data-reveal>
          <div class="tool-head">
            <span class="tool-head__num" aria-hidden="true">01</span>
            <div>
              <p class="kicker">RANK / 积分榜</p>
              <h2 id="tool-rank-h" class="h-section">排名查询台</h2>
            </div>
          </div>
          <p class="tool-block__lead">想看本地球队站到哪一级，就从爱游戏娱乐查本地联赛排名开始：城市、组别、赛季三层筛下来，积分榜直接摊在眼前。积分、胜场、进球、净胜球四列都能点着排序，湖南本地联赛那一行默认顶在最上面，左边一道暖橙竖条标出来。</p>
          <div class="rank-grid">
            <div>
              <div class="table-scroll">
                <table class="data-table">
                  <caption>超级组 · 当前赛季积分榜</caption>
                  <thead>
                    <tr>
                      <th scope="col">名次</th>
                      <th scope="col">球队</th>
                      <th scope="col">城市</th>
                      <th scope="col">场次</th>
                      <th scope="col">积分</th>
                      <th scope="col">净胜球</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="is-local">
                      <td class="cell-num mono">1</td>
                      <td>长沙麓山夜鹰</td>
                      <td>长沙</td>
                      <td class="mono">14</td>
                      <td class="cell-score mono">31</td>
                      <td class="mono">+18</td>
                    </tr>
                    <tr>
                      <td class="cell-num mono">2</td>
                      <td>湘潭钢城</td>
                      <td>湘潭</td>
                      <td class="mono">14</td>
                      <td class="cell-score mono">29</td>
                      <td class="mono">+13</td>
                    </tr>
                    <tr>
                      <td class="cell-num mono">3</td>
                      <td>株洲湘江航运</td>
                      <td>株洲</td>
                      <td class="mono">14</td>
                      <td class="cell-score mono">26</td>
                      <td class="mono">+9</td>
                    </tr>
                    <tr>
                      <td class="cell-num mono">4</td>
                      <td>岳阳楼区竞技</td>
                      <td>岳阳</td>
                      <td class="mono">14</td>
                      <td class="cell-score mono">22</td>
                      <td class="mono">+4</td>
                    </tr>
                    <tr>
                      <td class="cell-num mono">5</td>
                      <td>衡阳回雁</td>
                      <td>衡阳</td>
                      <td class="mono">14</td>
                      <td class="cell-score mono">19</td>
                      <td class="mono">-2</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p class="table-note mono">每日 11:00 前同步昨夜赛果，排名跟着刷新</p>
            </div>
            <figure class="tool-figure">
              <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="深色界面风格的联赛排名表格，多行数据与上升箭头，本地联赛行高亮" loading="lazy" decoding="async">
              <figcaption>本地球队常驻第一屏，箭头指示排名升降</figcaption>
            </figure>
          </div>
        </section>

        <section id="tool-fixtures" class="tool-block" aria-labelledby="tool-fixtures-h" data-reveal>
          <div class="tool-head">
            <span class="tool-head__num" aria-hidden="true">02</span>
            <div>
              <p class="kicker">FIXTURES / 赛程</p>
              <h2 id="tool-fixtures-h" class="h-section">周末赛程与约看</h2>
            </div>
          </div>
          <figure class="tool-figure tool-figure--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="俯拍的战术板与手写赛程标记，旁置足球与哨子，夜间灯光下的高对比画面" loading="lazy" decoding="async">
            <figcaption>赛程像一块摊开的战术板，两条时间轴对应两天</figcaption>
          </figure>
          <div class="fixtures-copy">
            <p>习惯提前排周末的人，用约爱游戏娱乐看周末足球赛程最省事：周六、周日分成上下两条时间轴，开球时间、场地和组别并排写清楚。想连着看两场，扫一眼就知道哪两场接得上。</p>
            <p>赛程通常在周四 20:00 前锁定，当周和下一周的场次都能约。遇到天气改期，更新会在开赛前 6 小时推到时间轴上，已经约过的场次跟着变，你不必再去翻公告。</p>
          </div>
          <div class="slots">
            <details class="slot">
              <summary>周六场次 · 展开看时间与场地</summary>
              <ul class="slot__list">
                <li><span class="mono">15:00</span> 长沙麓山夜鹰 — 湘潭钢城<span class="slot__meta">岳麓区桐梓坡球场 · 超级组</span></li>
                <li><span class="mono">17:30</span> 株洲湘江航运 — 衡阳回雁<span class="slot__meta">天元区沿江球场 · 甲级组</span></li>
                <li><span class="mono">20:00</span> 岳阳楼区竞技 — 长沙城南<span class="slot__meta">南湖新区球场 · 超级组</span></li>
              </ul>
            </details>
            <details class="slot">
              <summary>周日场次 · 展开看时间与场地</summary>
              <ul class="slot__list">
                <li><span class="mono">14:00</span> 湘潭钢城 — 株洲湘江航运<span class="slot__meta">雨湖区体育公园 · 超级组</span></li>
                <li><span class="mono">16:30</span> 长沙城南 — 衡阳回雁<span class="slot__meta">开福区滨江球场 · 甲级组</span></li>
                <li><span class="mono">19:00</span> 岳阳楼区竞技 — 长沙麓山夜鹰<span class="slot__meta">南湖新区球场 · 超级组</span></li>
              </ul>
            </details>
          </div>
          <p class="tool-block__foot">约好的场次会进到你的日程，开赛前还会再响一次</p>
        </section>

        <section id="tool-app" class="tool-block" aria-labelledby="tool-app-h" data-reveal>
          <div class="tool-head">
            <span class="tool-head__num" aria-hidden="true">03</span>
            <div>
              <p class="kicker">APP / 正式版</p>
              <h2 id="tool-app-h" class="h-section">正式版下载与战报刷新</h2>
            </div>
          </div>
          <div class="download-grid">
            <figure class="tool-figure tool-figure--portrait">
              <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="夜间手持手机查看战报列表的特写，屏幕亮起，背景为球场围栏灯光" loading="lazy" decoding="async">
              <figcaption>散场路上、地铁里，下拉一次看完昨夜比分</figcaption>
            </figure>
            <div class="download-panel">
              <p class="download-panel__label">当前版本</p>
              <p class="download-panel__version">3.6</p>
              <p>下爱游戏娱乐正式版刷战报，是周末结束之后最快的一步：打开应用往下拉一次，昨夜所有场次的比分和射门统计已经在那儿了，每日 11:00 前完成更新。从 3.6 版起，最近 7 天的战报留在本地，球场边信号弱、地铁里没网也照样翻得开。</p>
              <ul class="entry-list">
                <li>
                  <span class="entry-name">iPhone</span>
                  <span>装在手机上，看比分和收提醒最顺手，订阅的球队一有动静就推到手里。</span>
                </li>
                <li>
                  <span class="entry-name">Android</span>
                  <span>同样支持离线读最近 7 天战报，低组别和草根球队一样能查到。</span>
                </li>
                <li>
                  <span class="entry-name">桌面网页</span>
                  <span>用浏览器直接打开，积分榜和统计图表铺得更开，适合赛后慢慢复盘。</span>
                </li>
              </ul>
            </div>
          </div>
        </section>

        <section id="tool-shots" class="tool-block" aria-labelledby="tool-shots-h" data-reveal>
          <div class="tool-head">
            <span class="tool-head__num" aria-hidden="true">04</span>
            <div>
              <p class="kicker">SHOT MAP / 射门分布</p>
              <h2 id="tool-shots-h" class="h-section">射门统计卡</h2>
            </div>
          </div>
          <p class="tool-block__lead">比分只交代结果，射门统计交代过程。四项指标与赛事官方数据同步，把两支球队摆在一起看，谁在乱射、谁在浪费机会，很快就有答案。</p>
          <div class="shots-grid">
            <div>
              <svg class="shot-map" viewBox="0 0 320 240" role="img" aria-label="半场射门分布示意：暖橙实心圆为射正，灰绿空心圆为射偏或封堵">
                <rect x="6" y="6" width="308" height="228" fill="#0A1712" stroke="#2E3B34" stroke-width="4"></rect>
                <rect x="110" y="6" width="100" height="26" fill="none" stroke="#F2F6F3" stroke-width="4"></rect>
                <rect x="62" y="6" width="196" height="88" fill="none" stroke="#2E3B34" stroke-width="3"></rect>
                <rect x="120" y="6" width="80" height="38" fill="none" stroke="#2E3B34" stroke-width="3"></rect>
                <path d="M62 94 Q160 172 258 94" fill="none" stroke="#2E3B34" stroke-width="3"></path>
                <circle cx="150" cy="70" r="7" fill="#FF7A1A"></circle>
                <circle cx="184" cy="58" r="7" fill="#FF7A1A"></circle>
                <circle cx="138" cy="112" r="7" fill="#FF7A1A"></circle>
                <circle cx="200" cy="96" r="7" fill="#FF7A1A"></circle>
                <circle cx="122" cy="132" r="7" fill="#FF7A1A"></circle>
                <circle cx="150" cy="196" r="7" fill="#FF7A1A"></circle>
                <circle cx="88" cy="146" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
                <circle cx="232" cy="138" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
                <circle cx="70" cy="88" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
                <circle cx="252" cy="82" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
                <circle cx="162" cy="172" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
                <circle cx="108" cy="62" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
                <circle cx="212" cy="182" r="7" fill="none" stroke="#8A9A90" stroke-width="3"></circle>
              </svg>
              <ul class="shot-legend">
                <li><span class="dot dot--on" aria-hidden="true"></span> 射正</li>
                <li><span class="dot dot--off" aria-hidden="true"></span> 射偏 / 被封堵</li>
                <li>半场视角，一个圆点是一次射门</li>
              </ul>
            </div>
            <dl class="metrics">
              <div>
                <dt>射正</dt>
                <dd>打在门框范围内的射门，被门将扑出也算。射正多而进球少，多半碰上对面门将状态好。</dd>
              </div>
              <div>
                <dt>射偏</dt>
                <dd>偏出球门范围的射门。位置越远、角度越偏，这类数字越容易堆起来，光数次数会高估进攻。</dd>
              </div>
              <div>
                <dt>被封堵</dt>
                <dd>被防守球员用身体挡下的射门。禁区里人挤人时蹿得最快，也最容易被忽略。</dd>
              </div>
              <div>
                <dt>进球转化</dt>
                <dd>进球数除以射门总数，衡量把握机会的效率。同一场两支球队对着看，比只比分更有说服力。</dd>
              </div>
            </dl>
          </div>
          <figure class="tool-figure tool-figure--wide">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="半场射门点阵信息图风格画面，暖橙与灰绿圆点分布，无文字依赖" loading="lazy" decoding="async">
            <figcaption>点阵越往球门收，射门质量通常越高</figcaption>
          </figure>
          <p class="tool-block__foot">更细的赛后拆解，去 <a href="/journal/">战报日志</a> 每轮都有一篇</p>
        </section>
      </div>
    </div>

    <div class="tools-tail">
      <section id="alerts" class="tool-block" aria-labelledby="alerts-h" data-reveal>
        <div class="tool-head">
          <span class="tool-head__num" aria-hidden="true">05</span>
          <div>
            <p class="kicker">NOTIFY / 提醒</p>
            <h2 id="alerts-h" class="h-section">订阅与提醒</h2>
          </div>
        </div>
        <p class="tool-block__lead">把你常跟的那支球队，或者所在城市的整个联赛订阅下来，比赛就不用自己记。推送只在你关心的事情上响两次，其余时间很安静。</p>
        <ul class="alert-list">
          <li>
            <strong>开赛前 2 小时</strong>
            一次提醒，告诉你对手是谁、在哪块场地、几点开球。临时决定去看，时间也够出门。
          </li>
          <li>
            <strong>战报发布后</strong>
            再推一次赛果，比分和射门统计一起送到，第二天不用专门去翻。
          </li>
        </ul>
        <p class="tool-block__foot">注册后在设置里把本地球队设为默认关注，排名页会先展示该队所在联赛</p>
      </section>

      <section id="versions" class="tool-block" aria-labelledby="versions-h" data-reveal>
        <div class="tool-head">
          <span class="tool-head__num" aria-hidden="true">06</span>
          <div>
            <p class="kicker">CHANGELOG / 版本</p>
            <h2 id="versions-h" class="h-section">版本与更新记录</h2>
          </div>
        </div>
        <figure class="tool-figure tool-figure--wide">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="球场灯光在草皮上的光斑与线条抽象特写" loading="lazy" decoding="async">
          <figcaption>从记分本到数据面板，走了好几个赛季</figcaption>
        </figure>
        <ol class="timeline">
          <li>
            <span class="timeline__ver">2016 · 起点</span>
            <p class="timeline__text">最初只做长沙城区业余联赛的比分记录，一场一场手记，慢慢把周边城市的赛果也收了进来。</p>
          </li>
          <li>
            <span class="timeline__ver">排名上线</span>
            <p class="timeline__text">排名查询覆盖湖南 12 个城市联赛，分超级组与甲级组两个级别，积分榜跟着战报一起走，480 支球队各归其位。</p>
          </li>
          <li>
            <span class="timeline__ver">2023 · 俱乐部主页</span>
            <p class="timeline__text">球队能自己维护阵容、主客场与队徽，比分回传有了固定入口，1.1 万条球员档案一点点长起来。</p>
          </li>
          <li>
            <span class="timeline__ver">3.6 · 现在</span>
            <p class="timeline__text">射门统计做成可视化卡片，正式版支持离线查看最近 7 天战报，下拉刷新昨夜结果。</p>
          </li>
        </ol>
      </section>

      <section id="roles" class="tool-block" aria-labelledby="roles-h" data-reveal>
        <div class="tool-head">
          <span class="tool-head__num" aria-hidden="true">07</span>
          <div>
            <p class="kicker">WHO / 适用场景</p>
            <h2 id="roles-h" class="h-section">谁最适合用</h2>
          </div>
        </div>
        <div class="roles">
          <article class="role">
            <p class="role__name">本地球迷</p>
            <p>先查本城球队这轮排第几，再按时间轴约周末两场，散场后开正式版下拉刷新，比分和射门统计一次看完。</p>
            <a href="/journal/">去看昨夜战报</a>
          </article>
          <article class="role">
            <p class="role__name">球队经理</p>
            <p>把阵容、主客场和队徽放到俱乐部主页，赛后在应用里回传比分，让自己的队出现在城市排名里，被更多人记住。</p>
            <a href="/reach-us/">申请俱乐部主页</a>
          </article>
          <article class="role">
            <p class="role__name">赛事组织方</p>
            <p>赛程一次发布，改期在开赛前 6 小时同步到时间轴，赛后数据沉淀下来，赛季末回顾时有据可依。</p>
            <a href="/overview/">了解合作方式</a>
          </article>
        </div>

        <nav class="tools-next" aria-label="继续使用工具中心">
          <a href="/tutorial/">遇到问题查使用教程</a>
          <a href="/journal/">战报日志看数据解读</a>
          <a href="/reach-us/">赛事数据纠错与联络</a>
          <a href="/">回首页看今夜战报</a>
        </nav>
      </section>
    </div>
  </div>
</main>

.page-products {
  --pw-line: 4px;
  --pw-tilt: -2deg;
  background: var(--ink);
  color: var(--chalk);
  padding-bottom: var(--breath);
}

.page-products .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 面包屑 */
.page-products .breadcrumb {
  padding-top: clamp(16px, 3vw, 28px);
}

.page-products .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--sage);
}

.page-products .breadcrumb li + li::before {
  content: "/";
  margin: 0 8px;
  color: var(--line);
}

.page-products .breadcrumb a {
  color: var(--sage);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

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

.page-products .breadcrumb li[aria-current="page"] {
  color: var(--chalk);
}

/* 首屏 */
.page-products .tools-intro {
  padding: clamp(32px, 6vw, 72px) 0 clamp(32px, 6vw, 60px);
  border-bottom: var(--edge) solid var(--line);
}

.page-products .tools-intro .h-hero {
  margin: 16px 0 0;
  max-width: min(100%, 15em);
}

.page-products .tools-intro__lead {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 36em;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .tools-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .tools-intro__chips li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  font-size: 14px;
  color: var(--chalk);
}

.page-products .tools-intro__chips .mono {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lime);
}

/* 目录 + 内容双栏 */
.page-products .tools-layout {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
  padding-top: clamp(32px, 6vw, 64px);
}

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

.page-products .tools-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
}

.page-products .tools-rail__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
  color: var(--chalk);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}

.page-products .tools-rail__link .mono {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lime);
}

.page-products .tools-rail__link:hover,
.page-products .tools-rail__link:focus-visible {
  border-color: var(--lime);
  background: var(--turf);
  color: var(--lime);
}

/* 工具块结构 */
.page-products .tools-stream,
.page-products .tools-tail {
  display: flex;
  flex-direction: column;
}

.page-products .tools-tail {
  margin-top: clamp(56px, 9vw, 104px);
}

.page-products .tool-block {
  border-top: var(--edge) solid var(--line);
  padding-top: clamp(20px, 4vw, 32px);
  margin-top: clamp(48px, 8vw, 80px);
}

.page-products .tool-block:first-child {
  margin-top: 0;
}

.page-products .tool-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 3vw, 24px);
}

.page-products .tool-head__num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  line-height: 0.9;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.page-products .tool-head .kicker {
  margin: 0 0 6px;
}

.page-products .tool-head h2 {
  margin: 0;
}

.page-products .tool-block__lead {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .tool-block__foot {
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--sage);
}

.page-products .tool-block__foot a {
  color: var(--lime);
  text-decoration: none;
  border-bottom: 2px solid var(--lime);
}

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

/* 排名查询台 */
.page-products .rank-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(24px, 4vw, 36px);
}

.page-products .table-scroll {
  overflow-x: auto;
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
}

.page-products .data-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 15px;
}

.page-products .data-table caption {
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.page-products .data-table th {
  padding: 10px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sage);
  border-bottom: var(--edge) solid var(--line);
  white-space: nowrap;
}

.page-products .data-table td {
  padding: 12px;
  border-bottom: 2px solid var(--line);
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

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

.page-products .data-table tbody tr:nth-child(odd) {
  background: rgba(27, 51, 39, 0.55);
}

.page-products .data-table tbody tr.is-local {
  background: rgba(198, 255, 61, 0.14);
}

.page-products .data-table tr.is-local td:first-child {
  border-left: var(--pw-line) solid var(--orange);
}

.page-products .data-table .cell-score {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--orange);
}

.page-products .table-note {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sage);
}

/* 图片 */
.page-products .tool-figure {
  margin: 0;
}

.page-products .tool-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
  object-fit: cover;
}

.page-products .tool-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--sage);
}

.page-products .tool-figure--wide {
  margin-top: clamp(24px, 4vw, 36px);
}

/* 周末赛程 */
.page-products .fixtures-copy {
  margin-top: clamp(20px, 3vw, 28px);
  max-width: 36em;
}

.page-products .fixtures-copy p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .fixtures-copy p:last-child {
  margin-bottom: 0;
}

.page-products .slots {
  display: grid;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

.page-products .slot {
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
}

.page-products .slot summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--lime);
}

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

.page-products .slot summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
}

.page-products .slot[open] summary {
  border-bottom: var(--edge) solid var(--line);
}

.page-products .slot[open] summary::after {
  content: "−";
}

.page-products .slot__list {
  margin: 0;
  padding: 0 18px 12px;
  list-style: none;
}

.page-products .slot__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--chalk);
}

.page-products .slot__list li:last-child {
  border-bottom: 0;
}

.page-products .slot__list .mono {
  font-weight: 700;
  color: var(--orange);
}

.page-products .slot__meta {
  display: block;
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sage);
}

/* 正式版下载 */
.page-products .download-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 36px);
}

.page-products .download-panel {
  border: var(--edge) solid var(--lime);
  background: var(--charcoal);
  padding: clamp(20px, 4vw, 36px);
}

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

.page-products .download-panel__version {
  margin: 6px 0 18px;
  font-family: var(--font-mono);
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.page-products .download-panel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .entry-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line);
}

.page-products .entry-list li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 2px solid var(--line);
}

.page-products .entry-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-products .entry-list .entry-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.page-products .entry-list li > span:last-child {
  font-size: 15px;
  line-height: 1.7;
  color: var(--chalk);
}

/* 射门统计卡 */
.page-products .shots-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 36px);
}

.page-products .shot-map {
  display: block;
  width: 100%;
  height: auto;
  border: var(--edge) solid var(--line);
  background: var(--ink);
}

.page-products .shot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sage);
}

.page-products .shot-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-products .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.page-products .dot--on {
  background: var(--orange);
}

.page-products .dot--off {
  border: 3px solid var(--sage);
}

.page-products .metrics {
  margin: 0;
}

.page-products .metrics > div {
  padding: 16px 0;
  border-bottom: 2px solid var(--line);
}

.page-products .metrics > div:first-child {
  padding-top: 18px;
  border-top: 2px solid var(--line);
}

.page-products .metrics dt {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--lime);
}

.page-products .metrics dd {
  margin: 6px 0 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--chalk);
}

/* 订阅与提醒 */
.page-products .alert-list {
  display: grid;
  gap: 12px;
  margin: clamp(24px, 4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .alert-list li {
  padding: 16px 18px;
  border-left: var(--pw-line) solid var(--orange);
  background: var(--charcoal);
  font-size: 15px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .alert-list strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
}

/* 版本记录 */
.page-products .timeline {
  margin: clamp(24px, 4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  border-left: 3px solid var(--line);
}

.page-products .timeline li {
  position: relative;
  padding: 0 0 28px 26px;
}

.page-products .timeline li:last-child {
  padding-bottom: 0;
}

.page-products .timeline li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 6px;
  width: 15px;
  height: 15px;
  background: var(--lime);
}

.page-products .timeline__ver {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lime);
}

.page-products .timeline__text {
  margin: 8px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--chalk);
}

/* 适用场景 */
.page-products .roles {
  display: grid;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 32px);
}

.page-products .role {
  border: var(--edge) solid var(--line);
  background: var(--charcoal);
  padding: 20px;
}

.page-products .role:hover {
  border-color: var(--lime);
}

.page-products .role__name {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--lime);
}

.page-products .role p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--chalk);
}

.page-products .role a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-deep);
}

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

/* 后续入口 */
.page-products .tools-next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(40px, 6vw, 64px);
}

.page-products .tools-next a {
  padding: 14px 18px;
  border: var(--edge) solid var(--line);
  color: var(--chalk);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
}

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

@media (min-width: 760px) {
  .page-products .alert-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-products .rank-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
  }

  .page-products .download-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-products .shots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

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

@media (min-width: 1000px) {
  .page-products .tools-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-products .tools-rail {
    position: sticky;
    top: 88px;
  }

  .page-products .tools-rail__list {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding: 0;
  }

  .page-products .tools-rail__link {
    display: flex;
    white-space: normal;
    padding: 14px 12px;
    border: 0;
    border-left: var(--pw-line) solid transparent;
    border-bottom: 2px solid var(--line);
    background: transparent;
  }

  .page-products .tools-rail__link:last-child {
    border-bottom: 0;
  }

  .page-products .tools-rail__link:hover,
  .page-products .tools-rail__link:focus-visible {
    border-left-color: var(--lime);
    border-bottom-color: var(--line);
    background: var(--charcoal);
    color: var(--lime);
  }

  .page-products .tool-figure--wide img {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-products .role,
  .page-products .slot,
  .page-products .tools-rail__link,
  .page-products .tools-next a,
  .page-products .data-table tbody tr {
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  }
}