.page-home {
  --reveal-delay: 0s;
  --home-line: rgba(16, 24, 32, .1);
  --home-line-strong: rgba(16, 24, 32, .16);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.75;
  padding-bottom: 72px;
}

.page-home *,
.page-home *::before,
.page-home *::after {
  box-sizing: border-box;
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home .section__head {
  margin-bottom: 26px;
}

.page-home .section__head > p {
  margin: 0;
  max-width: 62ch;
  color: var(--sage);
  font-size: 1rem;
}

.page-home .section__head h2 {
  margin: 6px 0 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--ink-green);
}

/* ---------- 页面上下文 ---------- */

.page-home .home-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 24px;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--sage);
}

.page-home .home-kicker__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--cinnabar);
}

/* ---------- 首屏拼贴 ---------- */

.page-home .hero {
  padding-top: 4px;
}

.page-home .hero__grid {
  display: grid;
  gap: 34px;
}

.page-home .hero__title {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(2.15rem, 8vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink-green);
}

.page-home .hero__lede {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 1.0625rem;
  color: var(--ink);
  opacity: .86;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-home .hero__collage {
  display: grid;
  gap: 14px;
}

.page-home .hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ink-green);
  box-shadow: var(--shadow-card);
}

.page-home .hero__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-home .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(18, 60, 50, 0) 40%, rgba(18, 60, 50, .58) 100%),
    radial-gradient(120% 90% at 86% 6%, rgba(201, 138, 43, .24), transparent 62%);
}

.page-home .hero__chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-radius: var(--radius-m);
  background: var(--cream);
  border: 1px solid var(--home-line);
  box-shadow: var(--shadow-card);
}

.page-home .hero__chip-label {
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--sage);
}

.page-home .hero__chip-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-green);
  white-space: nowrap;
}

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

.page-home .scale {
  margin-top: 46px;
  padding: 22px 18px 20px;
  border-radius: var(--radius-l);
  background: var(--ink-green);
  color: var(--paper);
  box-shadow: var(--shadow-glass);
}

.page-home .scale__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 18px;
}

.page-home .scale__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.page-home .scale__note {
  margin: 0;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--amber-soft);
  opacity: .85;
}

.page-home .scale__bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.page-home .scale__seg {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 8px;
  border-radius: 6px;
  background: rgba(79, 124, 130, .38);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.page-home .scale__seg-name {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.page-home .scale__seg-range {
  font-size: .6875rem;
  color: var(--amber-soft);
  opacity: .82;
  white-space: nowrap;
}

.page-home .scale__seg:hover,
.page-home .scale__seg:focus-within {
  background: var(--amber);
  transform: translateY(-4px);
}

.page-home .scale__seg:hover .scale__seg-name,
.page-home .scale__seg:focus-within .scale__seg-name {
  color: var(--ink-green);
}

.page-home .scale__seg:hover .scale__seg-range,
.page-home .scale__seg:focus-within .scale__seg-range {
  color: var(--ink-green);
  opacity: 1;
}

/* ---------- 九段位区间 ---------- */

.page-home .ranks {
  margin-top: 76px;
}

.page-home .ranks__grid {
  display: grid;
  gap: 34px;
}

.page-home .ranks__aside {
  order: 2;
}

.page-home .ranks__main {
  order: 1;
}

.page-home .ranks__media {
  margin: 0 0 20px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ink-green);
  box-shadow: var(--shadow-card);
}

.page-home .ranks__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .ranks__note {
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .ranks__note p {
  margin: 0 0 12px;
}

.page-home .ranks__intro {
  margin: 0;
}

.page-home .link-arrow {
  display: inline-block;
  padding-bottom: 2px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-green);
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.page-home .link-arrow:hover {
  color: var(--amber-ink);
  border-color: var(--ink-green);
}

.page-home .rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
}

.page-home .rank-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--home-line);
}

.page-home .rank-row__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .rank-row__range {
  justify-self: start;
  font-size: .8125rem;
  color: var(--celadon-deep);
}

.page-home .rank-row__desc {
  grid-column: 1 / -1;
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .rank-row:last-child .rank-row__name {
  color: var(--amber-ink);
}

/* ---------- 六类玩法 ---------- */

.page-home .games {
  margin-top: 84px;
}

.page-home .games__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.page-home .games__tab {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--home-line-strong);
  font-size: .8125rem;
  color: var(--ink-green);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.page-home .games__tab:hover {
  background: var(--ink-green);
  color: var(--amber-soft);
  transform: translateY(-2px);
}

.page-home .games__grid {
  display: grid;
  gap: 16px;
}

.page-home .game-card {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: var(--radius-m);
  background: var(--cream);
  border: 1px solid var(--home-line);
  scroll-margin-top: 130px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.page-home .game-card::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--amber);
}

.page-home .game-card:nth-child(2)::before { background: var(--celadon); }
.page-home .game-card:nth-child(3)::before { background: var(--cinnabar); }
.page-home .game-card:nth-child(4)::before { background: var(--ink-green-lift); }
.page-home .game-card:nth-child(5)::before { background: var(--amber-ink); }
.page-home .game-card:nth-child(6)::before { background: var(--sage); }

.page-home .game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: rgba(201, 138, 43, .5);
}

.page-home .game-card__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .game-card__desc {
  margin: 0 0 14px;
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .game-card__meta {
  margin: 0;
}

/* ---------- 结算明细 ---------- */

.page-home .settle {
  margin-top: 84px;
}

.page-home .settle__grid {
  display: grid;
  gap: 20px;
}

.page-home .settle__media {
  margin: 0;
  min-height: 240px;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ink-green);
  box-shadow: var(--shadow-card);
}

.page-home .settle__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.page-home .settle__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 20px 24px;
  border-radius: var(--radius-l);
  background: var(--ink-green);
  color: var(--paper);
  box-shadow: var(--shadow-glass);
}

.page-home .settle__caption {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--amber-soft);
}

.page-home .settle__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.page-home .settle__table th,
.page-home .settle__table td {
  padding: 11px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(246, 241, 231, .16);
}

.page-home .settle__table thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(246, 241, 231, .62);
  border-bottom-color: rgba(246, 241, 231, .3);
}

.page-home .settle__table tbody th {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--amber-soft);
}

.page-home .settle__table td {
  color: var(--paper);
}

.page-home .settle__table tbody tr:last-child th,
.page-home .settle__table tbody tr:last-child td {
  border-bottom: none;
}

.page-home .settle__foot {
  margin: 0;
  font-size: .8125rem;
  color: rgba(246, 241, 231, .68);
}

.page-home .settle__panel .btn {
  align-self: flex-start;
}

/* ---------- 托管与会员中心 ---------- */

.page-home .hub {
  margin-top: 84px;
}

.page-home .hub__grid {
  display: grid;
  gap: 18px;
}

.page-home .hub-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px 20px;
  border-radius: var(--radius-l);
}

.page-home .hub-card > * {
  margin: 0;
}

.page-home .hub-card--tutor {
  background: var(--amber-soft);
  border: 1px solid rgba(138, 90, 18, .22);
}

.page-home .hub-card--member {
  background: var(--cream);
  border: 1px solid var(--home-line-strong);
}

.page-home .hub-card__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .hub-card__desc {
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .hub-card--tutor .hub-card__desc {
  color: rgba(16, 24, 32, .74);
}

.page-home .hub__limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-home .hub__limits li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: rgba(255, 253, 248, .66);
}

.page-home .hub__limit-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .hub__limit-unit {
  font-size: .8125rem;
  color: var(--amber-ink);
}

.page-home .hub__limit-note {
  font-size: .8125rem;
  color: rgba(16, 24, 32, .7);
}

.page-home .hub__media {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ink-green);
}

.page-home .hub__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-home .hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .hub__list li {
  position: relative;
  padding-left: 17px;
}

.page-home .hub__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--celadon);
}

.page-home .hub-card .btn {
  align-self: flex-start;
  margin-top: 2px;
}

/* ---------- 最近批次 ---------- */

.page-home .log {
  margin-top: 84px;
}

.page-home .log__grid {
  display: grid;
  gap: 16px;
}

.page-home .log-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border-radius: var(--radius-m);
  background: var(--cream);
  border: 1px solid var(--home-line);
  border-left: 3px solid var(--celadon);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-left-color .3s var(--ease);
}

.page-home .log-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-left-color: var(--amber);
}

.page-home .log-card__batch {
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--celadon-deep);
}

.page-home .log-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-green);
}

.page-home .log-card__desc {
  margin: 0;
  font-size: .875rem;
  color: var(--sage);
}

.page-home .log-card .tag {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- 收尾 ---------- */

.page-home .closing {
  margin-top: 84px;
}

.page-home .closing__inner {
  display: grid;
  gap: 20px;
  padding: 30px 22px;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--ink-green) 0%, #0B2822 100%);
  color: var(--paper);
}

.page-home .closing__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--paper);
}

.page-home .closing__desc {
  margin: 0;
  max-width: 56ch;
  font-size: .9375rem;
  color: rgba(246, 241, 231, .74);
}

/* ---------- 滚动显现 ---------- */

.page-home .reveal.is-visible {
  animation: home-rise .72s var(--ease) both;
  animation-delay: var(--reveal-delay);
}

@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (min-width: 640px) {
  .page-home .games__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .log__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .page-home .rank-row {
    grid-template-columns: 4.6rem 8rem minmax(0, 1fr);
    align-items: center;
  }

  .page-home .rank-row__desc {
    grid-column: auto;
    text-align: right;
  }
}

@media (min-width: 780px) {
  .page-home .scale {
    padding: 26px 26px 24px;
  }

  .page-home .scale__bar {
    display: flex;
    gap: 4px;
  }

  .page-home .scale__seg {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0;
    min-height: 84px;
    padding: 12px 10px;
  }

  .page-home .scale__seg:nth-child(1) { flex-grow: 200; }
  .page-home .scale__seg:nth-child(2) { flex-grow: 250; }
  .page-home .scale__seg:nth-child(3) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(4) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(5) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(6) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(7) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(8) { flex-grow: 250; }
  .page-home .scale__seg:nth-child(9) { flex-grow: 200; }
}

@media (min-width: 840px) {
  .page-home .hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .page-home .hub-card {
    padding: 30px 26px;
  }
}

@media (min-width: 880px) {
  .page-home .settle__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 30px;
    align-items: stretch;
  }
}

@media (min-width: 900px) {
  .page-home .ranks__grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .page-home .ranks__aside {
    order: 1;
  }

  .page-home .ranks__main {
    order: 2;
  }
}

@media (min-width: 980px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
  }

  .page-home .hero__collage {
    position: relative;
    padding-bottom: 46px;
  }

  .page-home .hero__chip--score {
    position: absolute;
    right: 3%;
    bottom: 62px;
    width: min(58%, 252px);
  }

  .page-home .hero__chip--batch {
    position: absolute;
    left: 6%;
    bottom: 0;
    width: min(52%, 232px);
  }
}

@media (min-width: 1040px) {
  .page-home .log__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1060px) {
  .page-home .games__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-home .closing__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 38px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .reveal.is-visible {
    animation: none;
  }

  .page-home .scale__seg:hover,
  .page-home .scale__seg:focus-within,
  .page-home .game-card:hover,
  .page-home .log-card:hover,
  .page-home .games__tab:hover {
    transform: none;
  }
}
<<<END>>>

等等，最后那个 `<<<END>>>` 不是标记，得去掉。再仔细检查一下分界标记。标题里是 `` 和 ``，后面没有别的了。

另外确认一下 `.page-home .closing__title` 放在 `min-width: 760px` 的条件之后——不对，它其实是写在前面的。没问题。

再查一下媒体查询的顺序——我把 `780px` 放在了 `840px` 前面，`980px` 又放在了 `1040px`/`1060px` 前面，顺序有点乱，但都是独立的查询。没问题。

还有一点：在 `720px` 的媒体查询里我把 `rank-row__desc` 设成了 `text-align: right`。嗯，三栏布局下右对齐的段落描述确实挺好看的。

最后再过一遍整体。可以。
<main id="main-content" class="page-home">

  <div class="wrap">
    <p class="home-kicker">
      <span class="home-kicker__dot" aria-hidden="true"></span>
      首页 · 当前批次 第 9 赛季 v3.2
    </p>
  </div>

  <section class="hero" aria-labelledby="hero-title">
    <div class="wrap hero__grid">
      <div class="hero__lead reveal">
        <p class="eyebrow">中文棋牌电玩计分校订</p>
        <h1 id="hero-title" class="hero__title">先算清楚，<br>再坐下来打</h1>
        <p class="hero__lede">
          易发棋牌中心把六类玩法的计分规则、常见牌型的番数倍数与新手托管时限，整理成能逐局回看的版本。
          你坐在牌桌前就知道分数怎么来，结束后也查得到当时的算法。
        </p>
        <div class="hero__actions">
          <a class="btn btn--amber" href="/product/">看玩法与结算</a>
          <a class="btn btn--ghost" href="/tutorial/">新手上手路径</a>
        </div>
      </div>

      <div class="hero__collage">
        <figure class="hero__media reveal">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900"
               alt="云南老茶馆俯拍牌桌，麻将牌与墨绿绒布桌面在压低灯光下形成暖色反光">
        </figure>
        <div class="hero__chip hero__chip--score reveal">
          <span class="hero__chip-label">段位总分上限</span>
          <span class="mono hero__chip-value">2400</span>
        </div>
        <div class="hero__chip hero__chip--batch reveal">
          <span class="hero__chip-label">本季校订批次</span>
          <span class="mono hero__chip-value">v3.2</span>
        </div>
      </div>
    </div>

    <div class="wrap">
      <div class="scale reveal">
        <div class="scale__head">
          <h2 class="scale__title">段位分数轴</h2>
          <p class="scale__note mono">0 – 2400 分 · 九段 · 第 9 赛季 v3.2</p>
        </div>
        <ol class="scale__bar">
          <li class="scale__seg"><span class="scale__seg-name">入门</span><span class="scale__seg-range">0–199</span></li>
          <li class="scale__seg"><span class="scale__seg-name">初学</span><span class="scale__seg-range">200–449</span></li>
          <li class="scale__seg"><span class="scale__seg-name">熟练</span><span class="scale__seg-range">450–749</span></li>
          <li class="scale__seg"><span class="scale__seg-name">精进</span><span class="scale__seg-range">750–1049</span></li>
          <li class="scale__seg"><span class="scale__seg-name">好手</span><span class="scale__seg-range">1050–1349</span></li>
          <li class="scale__seg"><span class="scale__seg-name">高手</span><span class="scale__seg-range">1350–1649</span></li>
          <li class="scale__seg"><span class="scale__seg-name">名家</span><span class="scale__seg-range">1650–1949</span></li>
          <li class="scale__seg"><span class="scale__seg-name">宗匠</span><span class="scale__seg-range">1950–2199</span></li>
          <li class="scale__seg"><span class="scale__seg-name">大师</span><span class="scale__seg-range">2200–2400</span></li>
        </ol>
      </div>
    </div>
  </section>

  <section class="ranks" aria-labelledby="ranks-title">
    <div class="wrap ranks__grid">
      <div class="ranks__aside">
        <figure class="ranks__media reveal">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async"
               alt="牌九牌面低角度特写，深色木质桌面与琥珀色边线，画面沉静">
        </figure>
        <div class="ranks__note reveal">
          <p class="eyebrow">段位记录</p>
          <p>每一段的起止分数都带着赛季与版本号。你在会员中心看到的晋级节点，可以顺着批次号一直往上翻。</p>
          <a class="link-arrow" href="/mission/">进入品牌校订室</a>
        </div>
      </div>

      <div class="ranks__main">
        <div class="section__head reveal">
          <p class="eyebrow">九段位体系</p>
          <h2 id="ranks-title">从入门到大师，2400 分划成九段</h2>
          <p class="ranks__intro">总分区间固定为 0 到 2400 分，每一段的起止分数按赛季逐项整理。不知道自己落在哪一段，对照下表找到名字就清楚了。</p>
        </div>

        <ol class="rank-list">
          <li class="rank-row reveal">
            <span class="rank-row__name">入门</span>
            <span class="mono rank-row__range">0–199</span>
            <span class="rank-row__desc">第一局从零开始记录，先熟悉出牌计时和自动结算。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">初学</span>
            <span class="mono rank-row__range">200–449</span>
            <span class="rank-row__desc">能分清几种常见牌型的番数差别，结算数字开始看得懂。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">熟练</span>
            <span class="mono rank-row__range">450–749</span>
            <span class="rank-row__desc">开始留意倍数叠加的先后顺序，知道哪一步会翻倍。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">精进</span>
            <span class="mono rank-row__range">750–1049</span>
            <span class="rank-row__desc">会对着版本号回看某一局，把当时的得分依据找出来。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">好手</span>
            <span class="mono rank-row__range">1050–1349</span>
            <span class="rank-row__desc">在几类玩法之间切换时，也能很快定位到相应条目。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">高手</span>
            <span class="mono rank-row__range">1350–1649</span>
            <span class="rank-row__desc">会主动比对不同赛季里段位分数的调整，心里有本账。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">名家</span>
            <span class="mono rank-row__range">1650–1949</span>
            <span class="rank-row__desc">对番数与倍数的组合形成习惯打法，出手前就大致有数。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">宗匠</span>
            <span class="mono rank-row__range">1950–2199</span>
            <span class="rank-row__desc">能看出条款里的细节差异，也愿意把发现整理出来反馈。</span>
          </li>
          <li class="rank-row reveal">
            <span class="rank-row__name">大师</span>
            <span class="mono rank-row__range">2200–2400</span>
            <span class="rank-row__desc">长期参与玩法测试，很多校订建议就来自这一段玩家。</span>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="games" aria-labelledby="games-title">
    <div class="wrap">
      <div class="section__head reveal">
        <p class="eyebrow">六类玩法</p>
        <h2 id="games-title">麻将、牌九、十三张，各有各的算法</h2>
        <p>六类玩法的易发棋牌计分条目各自成组，常见牌型的番数与倍数在玩法与结算页逐条列出。先点标签跳到你要找的那一类。</p>
      </div>

      <div class="games__tabs reveal">
        <a class="games__tab" href="#game-mahjong">麻将</a>
        <a class="games__tab" href="#game-paijiu">牌九</a>
        <a class="games__tab" href="#game-shisan">十三张</a>
        <a class="games__tab" href="#game-doudizhu">斗地主</a>
        <a class="games__tab" href="#game-paodekuai">跑得快</a>
        <a class="games__tab" href="#game-shengji">升级</a>
      </div>

      <div class="games__grid">
        <article class="game-card reveal" id="game-mahjong">
          <h3 class="game-card__title">麻将</h3>
          <p class="game-card__desc">牌型先分档，再按番数叠倍数。门清、碰碰胡、清一色的算法各有一条独立条目，结算顺序写在同一条里。</p>
          <p class="game-card__meta"><span class="tag tag--celadon">番数分档</span></p>
        </article>

        <article class="game-card reveal" id="game-paijiu">
          <h3 class="game-card__title">牌九</h3>
          <p class="game-card__desc">点数大小与牌型组合分开计算，庄家与闲家的结算先后有固定次序，配牌情况另做说明。</p>
          <p class="game-card__meta"><span class="tag tag--ink">点数与组合</span></p>
        </article>

        <article class="game-card reveal" id="game-shisan">
          <h3 class="game-card__title">十三张</h3>
          <p class="game-card__desc">头道、中道、尾道三道分别比牌，每一道的倍数各有上限，摆牌犯规的判定单独列出。</p>
          <p class="game-card__meta"><span class="tag tag--celadon">三道分别比</span></p>
        </article>

        <article class="game-card reveal" id="game-doudizhu">
          <h3 class="game-card__title">斗地主</h3>
          <p class="game-card__desc">底分、叫分倍数与春天加成共同决定一局得分，炸弹与火箭的叠加方式写在同一条条目下。</p>
          <p class="game-card__meta"><span class="tag tag--ink">底分与倍数</span></p>
        </article>

        <article class="game-card reveal" id="game-paodekuai">
          <h3 class="game-card__title">跑得快</h3>
          <p class="game-card__desc">先出完牌的名次与手中剩余的牌数一起计入得分，包牌与关牌的结算方式另外列明。</p>
          <p class="game-card__meta"><span class="tag tag--celadon">名次与剩牌</span></p>
        </article>

        <article class="game-card reveal" id="game-shengji">
          <h3 class="game-card__title">升级</h3>
          <p class="game-card__desc">级牌、主牌与分牌的权重各不相同，跨级升级与守住级数的算法分开成条。</p>
          <p class="game-card__meta"><span class="tag tag--ink">级差与权重</span></p>
        </article>
      </div>
    </div>
  </section>

  <section class="settle" aria-labelledby="settle-title">
    <div class="wrap">
      <div class="section__head reveal">
        <p class="eyebrow">结算明细</p>
        <h2 id="settle-title">牌型的番数与倍数，跟着版本一起更新</h2>
        <p>常见牌型的番数、倍数与实得分数会在每个赛季批次里同步刷新。下面是麻将的几条常见条目，完整的对照表在玩法与结算页。</p>
      </div>

      <div class="settle__grid">
        <figure class="settle__media reveal">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async"
               alt="十三张牌面俯拍排列，牌与牌之间留有均匀间隙，像一份待整理的清单">
        </figure>

        <div class="settle__panel reveal">
          <p class="settle__caption mono">麻将常见牌型 · 第 9 赛季 v3.2</p>
          <table class="settle__table">
            <thead>
              <tr>
                <th scope="col">牌型</th>
                <th scope="col">番数</th>
                <th scope="col">倍数</th>
                <th scope="col">实得</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">平胡</th>
                <td class="mono">1</td>
                <td class="mono">×1</td>
                <td class="mono">1 分</td>
              </tr>
              <tr>
                <th scope="row">碰碰胡</th>
                <td class="mono">2</td>
                <td class="mono">×2</td>
                <td class="mono">2 分</td>
              </tr>
              <tr>
                <th scope="row">七对</th>
                <td class="mono">3</td>
                <td class="mono">×3</td>
                <td class="mono">3 分</td>
              </tr>
              <tr>
                <th scope="row">清一色</th>
                <td class="mono">4</td>
                <td class="mono">×4</td>
                <td class="mono">4 分</td>
              </tr>
            </tbody>
          </table>
          <p class="settle__foot">上表按底分 1 分计算。倍数叠加的先后顺序与包牌情况，在玩法与结算页另列。</p>
          <a class="btn btn--amber btn--small" href="/product/">查看全部结算明细</a>
        </div>
      </div>
    </div>
  </section>

  <section class="hub" aria-labelledby="hub-title">
    <div class="wrap">
      <div class="section__head reveal">
        <p class="eyebrow">上手与记录</p>
        <h2 id="hub-title">刚坐下不知道怎么办，托管和记录都替你想好了</h2>
      </div>

      <div class="hub__grid">
        <article class="hub-card hub-card--tutor reveal">
          <h3 class="hub-card__title">刚上手时的托管时限</h3>
          <p class="hub-card__desc">第一次进牌桌，出牌计时会按你的熟练程度分三档，到点自动结算，不需要你手动确认。新手托管与自动结算的完整说明在帮助中心。</p>
          <ul class="hub__limits">
            <li>
              <span class="mono hub__limit-num">30</span>
              <span class="hub__limit-unit">秒</span>
              <span class="hub__limit-note">默认档，第一次上手用这一档最稳</span>
            </li>
            <li>
              <span class="mono hub__limit-num">60</span>
              <span class="hub__limit-unit">秒</span>
              <span class="hub__limit-note">认得清牌型之后，大多数玩法用这一档</span>
            </li>
            <li>
              <span class="mono hub__limit-num">90</span>
              <span class="hub__limit-unit">秒</span>
              <span class="hub__limit-note">牌面复杂、需要慢慢看的局面</span>
            </li>
          </ul>
          <a class="btn btn--ink btn--small" href="/tutorial/">看新手指南</a>
        </article>

        <article class="hub-card hub-card--member reveal">
          <h3 class="hub-card__title">会员中心里能查到什么</h3>
          <p class="hub-card__desc">段位记录与计分历史可以按玩法、版本批次和时间段筛着看，最近 36 个月记录都留着。对某一段分数有疑问，随时从申诉入口提交。</p>
          <figure class="hub__media">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" loading="lazy" decoding="async"
                 alt="半透明玻璃层与墨绿绒布纹理叠加，隐约可见记录刻度线">
          </figure>
          <ul class="hub__list">
            <li>段位记录与晋级节点</li>
            <li>36 个月内的计分历史</li>
            <li>会员权益说明</li>
            <li>版本校订日志</li>
          </ul>
          <a class="btn btn--ghost btn--small" href="/mission/">进入品牌校订室</a>
        </article>
      </div>
    </div>
  </section>

  <section class="log" aria-labelledby="log-title">
    <div class="wrap">
      <div class="section__head reveal">
        <p class="eyebrow">版本动态</p>
        <h2 id="log-title">最近几个校订批次改了什么</h2>
      </div>

      <div class="log__grid">
        <a class="log-card reveal" href="/updates/">
          <span class="log-card__batch mono">第 9 赛季 · v3.2</span>
          <h3 class="log-card__title">麻将牌型番数复校</h3>
          <p class="log-card__desc">七对与清一色的倍数关系重新排了一遍，结算顺序保持原样。</p>
          <span class="tag tag--celadon">计分</span>
        </a>

        <a class="log-card reveal" href="/updates/">
          <span class="log-card__batch mono">第 9 赛季 · v3.1</span>
          <h3 class="log-card__title">托管时限档位说明补充</h3>
          <p class="log-card__desc">30 秒、60 秒、90 秒三档的适用场景写得更具体，自动结算条目同步调整。</p>
          <span class="tag tag--ink">托管</span>
        </a>

        <a class="log-card reveal" href="/updates/">
          <span class="log-card__batch mono">第 9 赛季 · v3.0</span>
          <h3 class="log-card__title">计分历史筛选上线</h3>
          <p class="log-card__desc">会员中心可按玩法与版本批次筛记录，时间段检索一并开放。</p>
          <span class="tag tag--celadon">会员中心</span>
        </a>

        <a class="log-card reveal" href="/updates/">
          <span class="log-card__batch mono">第 8 赛季 · v2.9</span>
          <h3 class="log-card__title">十三张三道倍数整理</h3>
          <p class="log-card__desc">头道、中道、尾道的倍数上限各成一条，摆牌犯规的判定单独列出。</p>
          <span class="tag tag--ink">玩法</span>
        </a>
      </div>
    </div>
  </section>

  <section class="closing" aria-labelledby="closing-title">
    <div class="wrap closing__inner reveal">
      <div>
        <h2 class="closing__title" id="closing-title">还有没弄明白的地方？</h2>
        <p class="closing__desc">计分规则、段位分数、会员权益的问题都可以直接问。客服邮箱在工作日 48 小时内回复，咨询时带上版本号和玩法名称，我们能更快找到对应批次。</p>
      </div>
      <a class="btn btn--cinnabar" href="/connect/">联系与申诉</a>
    </div>
  </section>

</main>

.page-home {
  --reveal-delay: 0s;
  --home-line: rgba(16, 24, 32, .1);
  --home-line-strong: rgba(16, 24, 32, .16);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.75;
  padding-bottom: 72px;
}

.page-home *,
.page-home *::before,
.page-home *::after {
  box-sizing: border-box;
}

.page-home img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-home .section__head {
  margin-bottom: 26px;
}

.page-home .section__head > p {
  margin: 0;
  max-width: 62ch;
  color: var(--sage);
  font-size: 1rem;
}

.page-home .section__head h2 {
  margin: 6px 0 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--ink-green);
}

/* ---------- 页面上下文 ---------- */

.page-home .home-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0 0 24px;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--sage);
}

.page-home .home-kicker__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--cinnabar);
}

/* ---------- 首屏拼贴 ---------- */

.page-home .hero {
  padding-top: 4px;
}

.page-home .hero__grid {
  display: grid;
  gap: 34px;
}

.page-home .hero__title {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(2.15rem, 8vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink-green);
}

.page-home .hero__lede {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 1.0625rem;
  color: var(--ink);
  opacity: .86;
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-home .hero__collage {
  display: grid;
  gap: 14px;
}

.page-home .hero__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ink-green);
  box-shadow: var(--shadow-card);
}

.page-home .hero__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.page-home .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(18, 60, 50, 0) 40%, rgba(18, 60, 50, .58) 100%),
    radial-gradient(120% 90% at 86% 6%, rgba(201, 138, 43, .24), transparent 62%);
}

.page-home .hero__chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-radius: var(--radius-m);
  background: var(--cream);
  border: 1px solid var(--home-line);
  box-shadow: var(--shadow-card);
}

.page-home .hero__chip-label {
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--sage);
}

.page-home .hero__chip-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-green);
  white-space: nowrap;
}

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

.page-home .scale {
  margin-top: 46px;
  padding: 22px 18px 20px;
  border-radius: var(--radius-l);
  background: var(--ink-green);
  color: var(--paper);
  box-shadow: var(--shadow-glass);
}

.page-home .scale__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin-bottom: 18px;
}

.page-home .scale__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.page-home .scale__note {
  margin: 0;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--amber-soft);
  opacity: .85;
}

.page-home .scale__bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.page-home .scale__seg {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 8px;
  border-radius: 6px;
  background: rgba(79, 124, 130, .38);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.page-home .scale__seg-name {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.page-home .scale__seg-range {
  font-size: .6875rem;
  color: var(--amber-soft);
  opacity: .82;
  white-space: nowrap;
}

.page-home .scale__seg:hover,
.page-home .scale__seg:focus-within {
  background: var(--amber);
  transform: translateY(-4px);
}

.page-home .scale__seg:hover .scale__seg-name,
.page-home .scale__seg:focus-within .scale__seg-name {
  color: var(--ink-green);
}

.page-home .scale__seg:hover .scale__seg-range,
.page-home .scale__seg:focus-within .scale__seg-range {
  color: var(--ink-green);
  opacity: 1;
}

/* ---------- 九段位区间 ---------- */

.page-home .ranks {
  margin-top: 76px;
}

.page-home .ranks__grid {
  display: grid;
  gap: 34px;
}

.page-home .ranks__aside {
  order: 2;
}

.page-home .ranks__main {
  order: 1;
}

.page-home .ranks__media {
  margin: 0 0 20px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ink-green);
  box-shadow: var(--shadow-card);
}

.page-home .ranks__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .ranks__note {
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .ranks__note p {
  margin: 0 0 12px;
}

.page-home .ranks__intro {
  margin: 0;
}

.page-home .link-arrow {
  display: inline-block;
  padding-bottom: 2px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-green);
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.page-home .link-arrow:hover {
  color: var(--amber-ink);
  border-color: var(--ink-green);
}

.page-home .rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-line);
}

.page-home .rank-row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--home-line);
}

.page-home .rank-row__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .rank-row__range {
  justify-self: start;
  font-size: .8125rem;
  color: var(--celadon-deep);
}

.page-home .rank-row__desc {
  grid-column: 1 / -1;
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .rank-row:last-child .rank-row__name {
  color: var(--amber-ink);
}

/* ---------- 六类玩法 ---------- */

.page-home .games {
  margin-top: 84px;
}

.page-home .games__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.page-home .games__tab {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--home-line-strong);
  font-size: .8125rem;
  color: var(--ink-green);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.page-home .games__tab:hover {
  background: var(--ink-green);
  color: var(--amber-soft);
  transform: translateY(-2px);
}

.page-home .games__grid {
  display: grid;
  gap: 16px;
}

.page-home .game-card {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: var(--radius-m);
  background: var(--cream);
  border: 1px solid var(--home-line);
  scroll-margin-top: 130px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.page-home .game-card::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--amber);
}

.page-home .game-card:nth-child(2)::before { background: var(--celadon); }
.page-home .game-card:nth-child(3)::before { background: var(--cinnabar); }
.page-home .game-card:nth-child(4)::before { background: var(--ink-green-lift); }
.page-home .game-card:nth-child(5)::before { background: var(--amber-ink); }
.page-home .game-card:nth-child(6)::before { background: var(--sage); }

.page-home .game-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: rgba(201, 138, 43, .5);
}

.page-home .game-card__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .game-card__desc {
  margin: 0 0 14px;
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .game-card__meta {
  margin: 0;
}

/* ---------- 结算明细 ---------- */

.page-home .settle {
  margin-top: 84px;
}

.page-home .settle__grid {
  display: grid;
  gap: 20px;
}

.page-home .settle__media {
  margin: 0;
  min-height: 240px;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--ink-green);
  box-shadow: var(--shadow-card);
}

.page-home .settle__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.page-home .settle__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 20px 24px;
  border-radius: var(--radius-l);
  background: var(--ink-green);
  color: var(--paper);
  box-shadow: var(--shadow-glass);
}

.page-home .settle__caption {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--amber-soft);
}

.page-home .settle__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.page-home .settle__table th,
.page-home .settle__table td {
  padding: 11px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(246, 241, 231, .16);
}

.page-home .settle__table thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(246, 241, 231, .62);
  border-bottom-color: rgba(246, 241, 231, .3);
}

.page-home .settle__table tbody th {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--amber-soft);
}

.page-home .settle__table td {
  color: var(--paper);
}

.page-home .settle__table tbody tr:last-child th,
.page-home .settle__table tbody tr:last-child td {
  border-bottom: none;
}

.page-home .settle__foot {
  margin: 0;
  font-size: .8125rem;
  color: rgba(246, 241, 231, .68);
}

.page-home .settle__panel .btn {
  align-self: flex-start;
}

/* ---------- 托管与会员中心 ---------- */

.page-home .hub {
  margin-top: 84px;
}

.page-home .hub__grid {
  display: grid;
  gap: 18px;
}

.page-home .hub-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px 20px;
  border-radius: var(--radius-l);
}

.page-home .hub-card > * {
  margin: 0;
}

.page-home .hub-card--tutor {
  background: var(--amber-soft);
  border: 1px solid rgba(138, 90, 18, .22);
}

.page-home .hub-card--member {
  background: var(--cream);
  border: 1px solid var(--home-line-strong);
}

.page-home .hub-card__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .hub-card__desc {
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .hub-card--tutor .hub-card__desc {
  color: rgba(16, 24, 32, .74);
}

.page-home .hub__limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-home .hub__limits li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: rgba(255, 253, 248, .66);
}

.page-home .hub__limit-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-green);
}

.page-home .hub__limit-unit {
  font-size: .8125rem;
  color: var(--amber-ink);
}

.page-home .hub__limit-note {
  font-size: .8125rem;
  color: rgba(16, 24, 32, .7);
}

.page-home .hub__media {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ink-green);
}

.page-home .hub__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-home .hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: .9375rem;
  color: var(--sage);
}

.page-home .hub__list li {
  position: relative;
  padding-left: 17px;
}

.page-home .hub__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--celadon);
}

.page-home .hub-card .btn {
  align-self: flex-start;
  margin-top: 2px;
}

/* ---------- 最近批次 ---------- */

.page-home .log {
  margin-top: 84px;
}

.page-home .log__grid {
  display: grid;
  gap: 16px;
}

.page-home .log-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border-radius: var(--radius-m);
  background: var(--cream);
  border: 1px solid var(--home-line);
  border-left: 3px solid var(--celadon);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-left-color .3s var(--ease);
}

.page-home .log-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-left-color: var(--amber);
}

.page-home .log-card__batch {
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--celadon-deep);
}

.page-home .log-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-green);
}

.page-home .log-card__desc {
  margin: 0;
  font-size: .875rem;
  color: var(--sage);
}

.page-home .log-card .tag {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- 收尾 ---------- */

.page-home .closing {
  margin-top: 84px;
}

.page-home .closing__inner {
  display: grid;
  gap: 20px;
  padding: 30px 22px;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--ink-green) 0%, #0B2822 100%);
  color: var(--paper);
}

.page-home .closing__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--paper);
}

.page-home .closing__desc {
  margin: 0;
  max-width: 56ch;
  font-size: .9375rem;
  color: rgba(246, 241, 231, .74);
}

/* ---------- 滚动显现 ---------- */

.page-home .reveal.is-visible {
  animation: home-rise .72s var(--ease) both;
  animation-delay: var(--reveal-delay);
}

@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (min-width: 640px) {
  .page-home .games__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .log__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .page-home .rank-row {
    grid-template-columns: 4.6rem 8rem minmax(0, 1fr);
    align-items: center;
  }

  .page-home .rank-row__desc {
    grid-column: auto;
    text-align: right;
  }
}

@media (min-width: 780px) {
  .page-home .scale {
    padding: 26px 26px 24px;
  }

  .page-home .scale__bar {
    display: flex;
    gap: 4px;
  }

  .page-home .scale__seg {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0;
    min-height: 84px;
    padding: 12px 10px;
  }

  .page-home .scale__seg:nth-child(1) { flex-grow: 200; }
  .page-home .scale__seg:nth-child(2) { flex-grow: 250; }
  .page-home .scale__seg:nth-child(3) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(4) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(5) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(6) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(7) { flex-grow: 300; }
  .page-home .scale__seg:nth-child(8) { flex-grow: 250; }
  .page-home .scale__seg:nth-child(9) { flex-grow: 200; }
}

@media (min-width: 760px) {
  .page-home .closing__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 38px 34px;
  }
}

@media (min-width: 840px) {
  .page-home .hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .page-home .hub-card {
    padding: 30px 26px;
  }
}

@media (min-width: 880px) {
  .page-home .settle__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 30px;
    align-items: stretch;
  }
}

@media (min-width: 900px) {
  .page-home .ranks__grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .page-home .ranks__aside {
    order: 1;
  }

  .page-home .ranks__main {
    order: 2;
  }
}

@media (min-width: 980px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
  }

  .page-home .hero__collage {
    position: relative;
    padding-bottom: 46px;
  }

  .page-home .hero__chip--score {
    position: absolute;
    right: 3%;
    bottom: 62px;
    width: min(58%, 252px);
  }

  .page-home .hero__chip--batch {
    position: absolute;
    left: 6%;
    bottom: 0;
    width: min(52%, 232px);
  }
}

@media (min-width: 1040px) {
  .page-home .log__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1060px) {
  .page-home .games__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .reveal.is-visible {
    animation: none;
  }

  .page-home .scale__seg:hover,
  .page-home .scale__seg:focus-within,
  .page-home .game-card:hover,
  .page-home .log-card:hover,
  .page-home .games__tab:hover {
    transform: none;
  }
}
<<<END>>>