.page-home {
  --home-pad: clamp(1.25rem, 4vw, 3rem);
  --home-gap: clamp(1.5rem, 4vw, 3.25rem);
  --home-lift: 6px;
}

.page-home a {
  text-decoration: none;
  color: inherit;
}

/* ============ 封面导读 ============ */

.page-home .cover {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(201, 162, 39, .18) 0%, rgba(201, 162, 39, 0) 58%),
    linear-gradient(160deg, var(--emerald-950) 0%, var(--emerald-900) 52%, var(--emerald-700) 100%);
  color: var(--cream);
  padding: clamp(2.75rem, 8vw, 5.5rem) 0 clamp(2.25rem, 6vw, 4rem);
}

.page-home .cover__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(201, 162, 39, .13);
}

.page-home .cover__deco-suit {
  position: absolute;
  width: clamp(180px, 34vw, 420px);
  height: auto;
  right: -6%;
  bottom: -18%;
  transform: rotate(-11deg);
}

.page-home .cover__deco-ring {
  position: absolute;
  left: -70px;
  top: 12%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, .22);
  box-shadow: 0 0 0 14px rgba(201, 162, 39, .06);
}

.page-home .cover__grid {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--home-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  align-items: center;
}

.page-home .cover__eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--gold-soft);
  text-transform: uppercase;
}

.page-home .cover__title {
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: .015em;
}

.page-home .cover__title-main {
  display: block;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 46%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .cover__title-sub {
  display: block;
  margin-top: .25rem;
  font-size: .54em;
  letter-spacing: .06em;
  color: var(--cream);
  opacity: .92;
}

.page-home .cover__lede {
  max-width: 34rem;
  margin: 0 0 1.9rem;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.85;
  color: rgba(245, 239, 226, .86);
}

.page-home .cover__paths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  max-width: 30rem;
}

.page-home .cover__path a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line-gold);
  background: rgba(8, 34, 28, .38);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.page-home .cover__path-num {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--gold-soft);
}

.page-home .cover__path-name {
  font-size: .98rem;
  color: var(--cream);
}

.page-home .cover__path-mark {
  font-size: .95rem;
  color: var(--gold);
  transition: transform var(--t-fast) var(--ease);
}

.page-home .cover__path a:hover,
.page-home .cover__path a:focus-visible {
  background: rgba(44, 122, 102, .42);
  border-color: var(--gold-soft);
  transform: translateX(var(--home-lift));
}

.page-home .cover__path a:hover .cover__path-mark {
  transform: translate(3px, -3px);
}

.page-home .cover__media {
  position: relative;
}

.page-home .cover__figure {
  transform: rotate(-2.4deg);
  box-shadow: 0 24px 60px rgba(4, 18, 14, .55);
}

.page-home .cover__figure .figure__media {
  border: 1px solid var(--line-gold);
}

.page-home .cover__note {
  position: absolute;
  right: -10px;
  top: 8px;
  font-size: 24px;
  letter-spacing: .18em;
  color: rgba(231, 206, 122, .78);
}

/* ============ 极速入口焦点 ============ */

.page-home .entry {
  padding: clamp(2.25rem, 6vw, 3.75rem) 0;
  background: var(--cream);
}

.page-home .entry__panel {
  display: grid;
  gap: 1.6rem;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: linear-gradient(150deg, var(--emerald-900) 0%, var(--emerald-700) 100%);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--cream);
}

.page-home .entry__version {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: .02em;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .entry__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .02em;
  color: var(--cream);
}

.page-home .entry__body {
  margin: 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245, 239, 226, .84);
}

.page-home .entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.page-home .entry__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.7rem;
  border: 1px solid var(--gold);
  background: rgba(201, 162, 39, .12);
  color: var(--gold-soft);
  font-weight: 600;
  letter-spacing: .04em;
  transition: background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}

.page-home .entry__cta-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep));
  box-shadow: inset 0 0 0 2px rgba(8, 34, 28, .55);
  transition: transform var(--t-mid) var(--ease);
}

.page-home .entry__cta:hover,
.page-home .entry__cta:focus-visible {
  background: var(--gold);
  color: var(--emerald-950);
  transform: translateY(-2px);
}

.page-home .entry__cta:hover .entry__cta-chip,
.page-home .entry__cta:focus-visible .entry__cta-chip {
  transform: rotateY(180deg);
}

.page-home .entry__secondary {
  font-size: .95rem;
  color: rgba(245, 239, 226, .8);
  border-bottom: 1px solid rgba(231, 206, 122, .45);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .entry__secondary:hover,
.page-home .entry__secondary:focus-visible {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}

/* ============ 设备横向主题带 ============ */

.page-home .devices {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  background: linear-gradient(180deg, var(--emerald-900) 0%, var(--emerald-950) 100%);
  color: var(--cream);
}

.page-home .devices__head {
  max-width: 46rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}

.page-home .devices__title {
  margin: .5rem 0 .9rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--cream);
}

.page-home .devices__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245, 239, 226, .78);
}

.page-home .devices__figure {
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}

.page-home .devices__figure .figure__media {
  border: 1px solid var(--line-gold);
}

.page-home .devices__figure .figure__caption {
  margin-top: .7rem;
  font-size: .82rem;
  color: rgba(231, 206, 122, .72);
}

.page-home .devices__cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-home .device-card {
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid rgba(201, 162, 39, .34);
  border-top: 3px solid var(--gold);
  background: rgba(8, 34, 28, .34);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.page-home .device-card:hover {
  background: rgba(44, 122, 102, .38);
  border-color: var(--gold-soft);
  transform: translateY(-4px);
}

.page-home .device-card__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--gold-soft);
  margin-bottom: .6rem;
}

.page-home .device-card__name {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: .04em;
  color: var(--cream);
}

.page-home .device-card__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(245, 239, 226, .78);
}

/* ============ 栏目内容地图 ============ */

.page-home .columns {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  background: var(--cream);
  color: var(--ink);
}

.page-home .columns__head {
  max-width: 46rem;
}

.page-home .columns__figure {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0;
  display: flex;
  justify-content: center;
}

.page-home .columns__figure img {
  width: clamp(180px, 30vw, 320px);
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  box-shadow: 0 14px 34px rgba(8, 34, 28, .16);
  object-fit: cover;
}

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

.page-home .columns__row {
  border-bottom: 1px solid var(--line-soft);
}

.page-home .columns__row a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .9rem;
  padding: 1.05rem .2rem;
  position: relative;
  transition: background var(--t-fast) var(--ease);
}

.page-home .columns__cat {
  display: flex;
  align-items: baseline;
  gap: .7rem;
}

.page-home .columns__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold-deep);
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

.page-home .columns__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--emerald-900);
}

.page-home .columns__desc {
  grid-column: 1 / 2;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-home .columns__go {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.page-home .columns__row a:hover,
.page-home .columns__row a:focus-visible {
  background: rgba(232, 223, 201, .55);
}

.page-home .columns__row a:hover .columns__num,
.page-home .columns__row a:focus-visible .columns__num {
  transform: translateX(var(--home-lift));
}

.page-home .columns__row a:hover .columns__go,
.page-home .columns__row a:focus-visible .columns__go {
  color: var(--emerald-700);
  transform: translateX(4px);
}

/* ============ 回访玩家快捷面板 ============ */

.page-home .returning {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  background: var(--cream-2);
  color: var(--ink);
}

.page-home .returning__layout {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.page-home .returning__title {
  margin: .5rem 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--emerald-900);
}

.page-home .returning__lede {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-home .returning__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.page-home .returning__item a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .9rem;
  padding: .95rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.page-home .returning__num {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--gold-deep);
}

.page-home .returning__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--emerald-900);
}

.page-home .returning__hint {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--muted);
}

.page-home .returning__item a:hover,
.page-home .returning__item a:focus-visible {
  border-left-color: var(--red);
  background: var(--paper);
  transform: translateX(var(--home-lift));
}

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

.page-home .returning__figure .figure__media {
  border: 1px solid var(--line-soft);
}

.page-home .returning__figure .figure__caption {
  margin-top: .7rem;
  font-size: .82rem;
  color: var(--muted);
}

/* ============ 近期更新 ============ */

.page-home .recent {
  padding: clamp(2.5rem, 7vw, 4.25rem) 0;
  background: var(--cream);
  color: var(--ink);
}

.page-home .recent__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-home .recent__item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}

.page-home .recent__item:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.page-home .recent__time {
  display: inline-block;
  margin-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--gold-deep);
}

.page-home .recent__title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: .02em;
}

.page-home .recent__title a {
  color: var(--emerald-900);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .recent__title a:hover,
.page-home .recent__title a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
}

.page-home .recent__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ============ 收藏提示条 ============ */

.page-home .bookmark {
  padding: 0 0 clamp(2.5rem, 7vw, 4.5rem);
  background: var(--cream);
}

.page-home .bookmark__panel {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line-gold);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.page-home .bookmark__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--emerald-900);
}

.page-home .bookmark__body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .bookmark__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.page-home .bookmark__links a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line-soft);
  background: var(--cream);
  font-size: .92rem;
  font-weight: 600;
  color: var(--emerald-900);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.page-home .bookmark__chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep));
  box-shadow: inset 0 0 0 2px rgba(8, 34, 28, .35);
  flex: 0 0 auto;
}

.page-home .bookmark__links a:hover,
.page-home .bookmark__links a:focus-visible {
  border-color: var(--gold);
  background: var(--cream-2);
  transform: translateY(-2px);
}

/* ============ 响应式 ============ */

@media (min-width: 700px) {
  .page-home .devices__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-home .bookmark__panel {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }

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

@media (min-width: 900px) {
  .page-home .cover__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-home .cover__media {
    margin-right: calc(-1 * clamp(1rem, 4vw, 2.4rem));
  }

  .page-home .entry__panel {
    grid-template-columns: 1.6fr 1fr;
    align-items: center;
  }

  .page-home .entry__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-home .returning__layout {
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(2rem, 4vw, 3.2rem);
  }

  .page-home .columns__row a {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr) auto;
    gap: 1.2rem;
    padding: 1.15rem .2rem;
  }

  .page-home .columns__desc {
    grid-column: 2 / 3;
    grid-row: 1 / span 1;
    align-self: center;
  }

  .page-home .columns__go {
    grid-row: 1 / span 1;
  }
}

@media (min-width: 1100px) {
  .page-home .devices__cards {
    gap: 1.35rem;
  }

  .page-home .devices__figure img {
    max-height: 460px;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .cover__figure {
    transform: none;
  }

  .page-home .cover__path a,
  .page-home .device-card,
  .page-home .columns__row a,
  .page-home .returning__item a,
  .page-home .bookmark__links a,
  .page-home .entry__cta {
    transition: none;
  }
}
<<<END>>>

等等，输出格式要求用  和  包裹，后面直接跟 <<<END>>> 吗？不太确定。看指令里写的是“严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号”，然后给了  和  两个标记。我就按这个来。
<main id="main-content" class="page-home">

  <section class="cover" aria-labelledby="cover-title">
    <div class="cover__deco" aria-hidden="true">
      <svg viewBox="0 0 120 120" class="cover__deco-suit">
        <path d="M60 14c14 16 26 26 26 40a20 20 0 0 1-33 15 20 20 0 0 1-33-15c0-14 12-24 26-40l7-8z" fill="currentColor"/>
      </svg>
      <span class="cover__deco-ring"></span>
    </div>

    <div class="cover__grid">
      <div class="cover__text">
        <p class="cover__eyebrow">2017 年起持续运营 · 已发布专题与说明 900 余篇</p>
        <h1 class="cover__title" id="cover-title">
          <span class="cover__title-main">万豪斗地主</span>
          <span class="cover__title-sub">官方品牌站 · V3.1</span>
        </h1>
        <p class="cover__lede">
          你手上是什么设备、遇到的是哪一类状况，都能在这里对号入座。入口速度、道具用法、登录排障，团队把这些牌桌上的问题一件件写清楚，电脑端与平板端看到的是同一份内容。
        </p>
        <ul class="cover__paths">
          <li class="cover__path">
            <a href="/download/">
              <span class="cover__path-num">01</span>
              <span class="cover__path-name">进入极速访问入口</span>
              <span class="cover__path-mark" aria-hidden="true">↗</span>
            </a>
          </li>
          <li class="cover__path">
            <a href="#devices">
              <span class="cover__path-num">02</span>
              <span class="cover__path-name">平板端与电脑端有何不同</span>
              <span class="cover__path-mark" aria-hidden="true">↓</span>
            </a>
          </li>
          <li class="cover__path">
            <a href="#recent">
              <span class="cover__path-num">03</span>
              <span class="cover__path-name">最近更新了哪些内容</span>
              <span class="cover__path-mark" aria-hidden="true">↓</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="cover__media">
        <figure class="figure cover__figure">
          <div class="figure__media figure__media--wide">
            <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="深翡翠绿绒布上倾斜叠放的扑克牌与金色筹码特写，侧光勾勒出布料纹理">
          </div>
        </figure>
        <span class="cover__note note-vertical">V3.1 · 极速访问</span>
      </div>
    </div>
  </section>

  <section class="entry" id="entry" aria-labelledby="entry-title" data-reveal>
    <div class="container">
      <div class="entry__panel">
        <div class="entry__copy">
          <p class="eyebrow eyebrow--light">当前版本</p>
          <p class="entry__version" data-reveal>V3.1</p>
          <h2 class="entry__title" id="entry-title">最新的版本，最直接的路</h2>
          <p class="entry__body">
            首屏加载时间比上一版缩短约 35%，进来不用等。电脑端打开即用；平板端横屏之后牌桌区域保持原始比例，看牌不吃力。第一次来的话，跟着三步走完就能上桌。
          </p>
        </div>
        <div class="entry__actions">
          <a class="entry__cta" href="/download/">
            <span class="entry__cta-chip" aria-hidden="true"></span>
            进入极速访问入口
          </a>
          <a class="entry__secondary" href="/help/">首次登录怎么走 <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>
  </section>

  <section class="devices" id="devices" aria-labelledby="devices-title" data-section="devices">
    <div class="container">
      <header class="devices__head">
        <p class="eyebrow eyebrow--light">设备适配</p>
        <h2 class="devices__title" id="devices-title">同一份内容，三种屏幕都放得下</h2>
        <p class="devices__lede">站点已完成 6 类主流浏览器与 5 种常见屏幕尺寸的适配。你在哪块屏上打开，看到的都是同一批栏目与同一批更新。</p>
      </header>

      <figure class="devices__figure">
        <div class="figure__media figure__media--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="平板横屏立在深色桌面上，屏幕显示牌桌界面，旁边放着几枚筹码" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__caption">平板端横屏布局，10 英寸及以上屏幕的牌桌区域按原始比例呈现</figcaption>
      </figure>

      <div class="devices__cards">
        <article class="device-card">
          <span class="device-card__num">01</span>
          <h3 class="device-card__name">电脑端</h3>
          <p class="device-card__desc">
            资讯页面左文右图，正文阅读宽度控制在 720 至 860 像素，一篇长稿读下来眼睛不累。V3.1 在这一端的加载改动最明显。
          </p>
        </article>
        <article class="device-card">
          <span class="device-card__num">02</span>
          <h3 class="device-card__name">平板端</h3>
          <p class="device-card__desc">
            10 英寸及以上屏幕优先走横屏。牌桌区域保持原始比例，道具图标与筹码数量不会因为缩放而看不清。
          </p>
        </article>
        <article class="device-card">
          <span class="device-card__num">03</span>
          <h3 class="device-card__name">移动端</h3>
          <p class="device-card__desc">
            竖屏随手可查。道具说明与常见问题按一屏一段组织，等电梯的工夫就能看完一条。
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="columns" id="columns" aria-labelledby="columns-title">
    <div class="container">
      <header class="section__head columns__head">
        <p class="eyebrow">内容索引</p>
        <h2 class="section__title" id="columns-title">六个常设栏目，各管一件事</h2>
        <p class="lede">不确定从哪看起？按你手上的问题找一行，点进去就是答案。</p>
      </header>

      <figure class="columns__figure">
        <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="俯视视角下整齐堆叠的金色与中国红筹码，边缘有暖金反光" loading="lazy" decoding="async">
      </figure>

      <ol class="columns__map">
        <li class="columns__row">
          <a href="/topics/">
            <span class="columns__cat">
              <span class="columns__num">01</span>
              <span class="columns__name">版本更新</span>
            </span>
            <span class="columns__desc">现在跑的是哪个版本、改动了什么、加载是不是更快</span>
            <span class="columns__go" aria-hidden="true">查看 →</span>
          </a>
        </li>
        <li class="columns__row">
          <a href="/help/">
            <span class="columns__cat">
              <span class="columns__num">02</span>
              <span class="columns__name">道具图鉴</span>
            </span>
            <span class="columns__desc">96 类道具按记分、提示、节奏、装饰四组归类，找起来不绕</span>
            <span class="columns__go" aria-hidden="true">查看 →</span>
          </a>
        </li>
        <li class="columns__row">
          <a href="/topics/">
            <span class="columns__cat">
              <span class="columns__num">03</span>
              <span class="columns__name">玩法拆解</span>
            </span>
            <span class="columns__desc">对局节奏怎么走、什么牌型该压、什么时候该收</span>
            <span class="columns__go" aria-hidden="true">查看 →</span>
          </a>
        </li>
        <li class="columns__row">
          <a href="/topics/">
            <span class="columns__cat">
              <span class="columns__num">04</span>
              <span class="columns__name">赛季记录</span>
            </span>
            <span class="columns__desc">14 个赛季的对局节奏与道具使用偏好，横向看得清</span>
            <span class="columns__go" aria-hidden="true">查看 →</span>
          </a>
        </li>
        <li class="columns__row">
          <a href="/download/">
            <span class="columns__cat">
              <span class="columns__num">05</span>
              <span class="columns__name">设备适配</span>
            </span>
            <span class="columns__desc">电脑端、平板端、移动端各自怎么设，装完直接能玩</span>
            <span class="columns__go" aria-hidden="true">查看 →</span>
          </a>
        </li>
        <li class="columns__row">
          <a href="/help/">
            <span class="columns__cat">
              <span class="columns__num">06</span>
              <span class="columns__name">玩家问答</span>
            </span>
            <span class="columns__desc">68 条常见问题，覆盖登录、道具、设备与账号找回四类</span>
            <span class="columns__go" aria-hidden="true">查看 →</span>
          </a>
        </li>
      </ol>
    </div>
  </section>

  <section class="returning" id="returning" aria-labelledby="returning-title" data-section="returning">
    <div class="container">
      <div class="returning__layout">
        <div class="returning__intro">
          <p class="eyebrow">回访常用</p>
          <h2 class="returning__title" id="returning-title">常来的几件事，集中放在这里</h2>
          <p class="returning__lede">不用每次从头翻。以下四条是回访最多的入口，点开就到了。</p>

          <ul class="returning__list">
            <li class="returning__item">
              <a href="/help/">
                <span class="returning__num">A</span>
                <span class="returning__label">道具怎么用</span>
                <span class="returning__hint">记分、提示、节奏、装饰四组分类速查</span>
              </a>
            </li>
            <li class="returning__item">
              <a href="/help/">
                <span class="returning__num">B</span>
                <span class="returning__label">登录怎么走</span>
                <span class="returning__hint">从打开到上桌的三步说明</span>
              </a>
            </li>
            <li class="returning__item">
              <a href="/history/">
                <span class="returning__num">C</span>
                <span class="returning__label">历史订阅记录</span>
                <span class="returning__hint">按季度归档，已完成 30 个季度</span>
              </a>
            </li>
            <li class="returning__item">
              <a href="/topics/">
                <span class="returning__num">D</span>
                <span class="returning__label">最近更新了哪些内容</span>
                <span class="returning__hint">常规每周 3 至 5 篇，赛季提升到 6 至 8 篇</span>
              </a>
            </li>
          </ul>
        </div>

        <figure class="returning__figure">
          <div class="figure__media figure__media--wide">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="笔记本电脑与平板并排显示同一栏目页面，屏幕反光映在深色桌面上" loading="lazy" decoding="async">
          </div>
          <figcaption class="figure__caption">电脑端与平板端打开的是同一批栏目</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="recent" id="recent" aria-labelledby="recent-title" data-section="recent">
    <div class="container container--read">
      <header class="section__head">
        <p class="eyebrow">近期更新</p>
        <h2 class="section__title" id="recent-title">最近发布的三条</h2>
      </header>

      <ol class="recent__list">
        <li class="recent__item" data-reveal>
          <span class="recent__time">第 14 赛季 · 进行中</span>
          <h3 class="recent__title"><a href="/topics/">V3.1 首屏加载优化说明</a></h3>
          <p class="recent__desc">比上一版缩短约 35%，电脑端与平板端同步生效。对经常回来的玩家，这一项感知最直接。</p>
        </li>
        <li class="recent__item" data-reveal>
          <span class="recent__time">赛季间</span>
          <h3 class="recent__title"><a href="/help/">道具图鉴补充至 96 类</a></h3>
          <p class="recent__desc">新增的条目并入原有的记分、提示、节奏、装饰四组，查起来还是按组找。</p>
        </li>
        <li class="recent__item" data-reveal>
          <span class="recent__time">第三季度</span>
          <h3 class="recent__title"><a href="/history/">本地栏目季度归档完成第 30 期</a></h3>
          <p class="recent__desc">历史订阅记录按季度归好，第一次来的访客也能往前翻到早期内容。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="bookmark" aria-labelledby="bookmark-title">
    <div class="container">
      <div class="bookmark__panel">
        <div class="bookmark__copy">
          <h2 class="bookmark__title" id="bookmark-title">把常看的页面加进收藏，重复加载少一大截</h2>
          <p class="bookmark__body">回访时先收藏下面三个，下一次打开基本不用等。</p>
        </div>
        <ul class="bookmark__links">
          <li><a href="/download/"><span class="bookmark__chip" aria-hidden="true"></span>下载中心</a></li>
          <li><a href="/help/"><span class="bookmark__chip" aria-hidden="true"></span>帮助中心</a></li>
          <li><a href="/topics/"><span class="bookmark__chip" aria-hidden="true"></span>专题中心</a></li>
        </ul>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-pad: clamp(1.25rem, 4vw, 3rem);
  --home-gap: clamp(1.5rem, 4vw, 3.25rem);
  --home-lift: 6px;
}

.page-home a {
  text-decoration: none;
  color: inherit;
}

/* ============ 封面导读 ============ */

.page-home .cover {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(201, 162, 39, .18) 0%, rgba(201, 162, 39, 0) 58%),
    linear-gradient(160deg, var(--emerald-950) 0%, var(--emerald-900) 52%, var(--emerald-700) 100%);
  color: var(--cream);
  padding: clamp(2.75rem, 8vw, 5.5rem) 0 clamp(2.25rem, 6vw, 4rem);
}

.page-home .cover__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(201, 162, 39, .13);
}

.page-home .cover__deco-suit {
  position: absolute;
  width: clamp(180px, 34vw, 420px);
  height: auto;
  right: -6%;
  bottom: -18%;
  transform: rotate(-11deg);
}

.page-home .cover__deco-ring {
  position: absolute;
  left: -70px;
  top: 12%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, .22);
  box-shadow: 0 0 0 14px rgba(201, 162, 39, .06);
}

.page-home .cover__grid {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--home-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  align-items: center;
}

.page-home .cover__eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--gold-soft);
  text-transform: uppercase;
}

.page-home .cover__title {
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: .015em;
}

.page-home .cover__title-main {
  display: block;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 46%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .cover__title-sub {
  display: block;
  margin-top: .25rem;
  font-size: .54em;
  letter-spacing: .06em;
  color: var(--cream);
  opacity: .92;
}

.page-home .cover__lede {
  max-width: 34rem;
  margin: 0 0 1.9rem;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.85;
  color: rgba(245, 239, 226, .86);
}

.page-home .cover__paths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  max-width: 30rem;
}

.page-home .cover__path a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line-gold);
  background: rgba(8, 34, 28, .38);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.page-home .cover__path-num {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--gold-soft);
}

.page-home .cover__path-name {
  font-size: .98rem;
  color: var(--cream);
}

.page-home .cover__path-mark {
  font-size: .95rem;
  color: var(--gold);
  transition: transform var(--t-fast) var(--ease);
}

.page-home .cover__path a:hover,
.page-home .cover__path a:focus-visible {
  background: rgba(44, 122, 102, .42);
  border-color: var(--gold-soft);
  transform: translateX(var(--home-lift));
}

.page-home .cover__path a:hover .cover__path-mark {
  transform: translate(3px, -3px);
}

.page-home .cover__media {
  position: relative;
}

.page-home .cover__figure {
  transform: rotate(-2.4deg);
  box-shadow: 0 24px 60px rgba(4, 18, 14, .55);
}

.page-home .cover__figure .figure__media {
  border: 1px solid var(--line-gold);
}

.page-home .cover__note {
  position: absolute;
  right: -10px;
  top: 8px;
  font-size: 24px;
  letter-spacing: .18em;
  color: rgba(231, 206, 122, .78);
}

/* ============ 极速入口焦点 ============ */

.page-home .entry {
  padding: clamp(2.25rem, 6vw, 3.75rem) 0;
  background: var(--cream);
}

.page-home .entry__panel {
  display: grid;
  gap: 1.6rem;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: linear-gradient(150deg, var(--emerald-900) 0%, var(--emerald-700) 100%);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--cream);
}

.page-home .entry__version {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: .02em;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-home .entry__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .02em;
  color: var(--cream);
}

.page-home .entry__body {
  margin: 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245, 239, 226, .84);
}

.page-home .entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.page-home .entry__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.7rem;
  border: 1px solid var(--gold);
  background: rgba(201, 162, 39, .12);
  color: var(--gold-soft);
  font-weight: 600;
  letter-spacing: .04em;
  transition: background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}

.page-home .entry__cta-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep));
  box-shadow: inset 0 0 0 2px rgba(8, 34, 28, .55);
  transition: transform var(--t-mid) var(--ease);
}

.page-home .entry__cta:hover,
.page-home .entry__cta:focus-visible {
  background: var(--gold);
  color: var(--emerald-950);
  transform: translateY(-2px);
}

.page-home .entry__cta:hover .entry__cta-chip,
.page-home .entry__cta:focus-visible .entry__cta-chip {
  transform: rotateY(180deg);
}

.page-home .entry__secondary {
  font-size: .95rem;
  color: rgba(245, 239, 226, .8);
  border-bottom: 1px solid rgba(231, 206, 122, .45);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .entry__secondary:hover,
.page-home .entry__secondary:focus-visible {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}

/* ============ 设备横向主题带 ============ */

.page-home .devices {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  background: linear-gradient(180deg, var(--emerald-900) 0%, var(--emerald-950) 100%);
  color: var(--cream);
}

.page-home .devices__head {
  max-width: 46rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}

.page-home .devices__title {
  margin: .5rem 0 .9rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--cream);
}

.page-home .devices__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245, 239, 226, .78);
}

.page-home .devices__figure {
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}

.page-home .devices__figure .figure__media {
  border: 1px solid var(--line-gold);
}

.page-home .devices__figure .figure__caption {
  margin-top: .7rem;
  font-size: .82rem;
  color: rgba(231, 206, 122, .72);
}

.page-home .devices__cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.page-home .device-card {
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid rgba(201, 162, 39, .34);
  border-top: 3px solid var(--gold);
  background: rgba(8, 34, 28, .34);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.page-home .device-card:hover {
  background: rgba(44, 122, 102, .38);
  border-color: var(--gold-soft);
  transform: translateY(-4px);
}

.page-home .device-card__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--gold-soft);
  margin-bottom: .6rem;
}

.page-home .device-card__name {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: .04em;
  color: var(--cream);
}

.page-home .device-card__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(245, 239, 226, .78);
}

/* ============ 栏目内容地图 ============ */

.page-home .columns {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  background: var(--cream);
  color: var(--ink);
}

.page-home .columns__head {
  max-width: 46rem;
}

.page-home .columns__figure {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0;
  display: flex;
  justify-content: center;
}

.page-home .columns__figure img {
  width: clamp(180px, 30vw, 320px);
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  box-shadow: 0 14px 34px rgba(8, 34, 28, .16);
  object-fit: cover;
}

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

.page-home .columns__row {
  border-bottom: 1px solid var(--line-soft);
}

.page-home .columns__row a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .9rem;
  padding: 1.05rem .2rem;
  position: relative;
  transition: background var(--t-fast) var(--ease);
}

.page-home .columns__cat {
  display: flex;
  align-items: baseline;
  gap: .7rem;
}

.page-home .columns__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold-deep);
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

.page-home .columns__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--emerald-900);
}

.page-home .columns__desc {
  grid-column: 1 / 2;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-home .columns__go {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.page-home .columns__row a:hover,
.page-home .columns__row a:focus-visible {
  background: rgba(232, 223, 201, .55);
}

.page-home .columns__row a:hover .columns__num,
.page-home .columns__row a:focus-visible .columns__num {
  transform: translateX(var(--home-lift));
}

.page-home .columns__row a:hover .columns__go,
.page-home .columns__row a:focus-visible .columns__go {
  color: var(--emerald-700);
  transform: translateX(4px);
}

/* ============ 回访玩家快捷面板 ============ */

.page-home .returning {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
  background: var(--cream-2);
  color: var(--ink);
}

.page-home .returning__layout {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.page-home .returning__title {
  margin: .5rem 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--emerald-900);
}

.page-home .returning__lede {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.page-home .returning__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.page-home .returning__item a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .9rem;
  padding: .95rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.page-home .returning__num {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--gold-deep);
}

.page-home .returning__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--emerald-900);
}

.page-home .returning__hint {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--muted);
}

.page-home .returning__item a:hover,
.page-home .returning__item a:focus-visible {
  border-left-color: var(--red);
  background: var(--paper);
  transform: translateX(var(--home-lift));
}

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

.page-home .returning__figure .figure__media {
  border: 1px solid var(--line-soft);
}

.page-home .returning__figure .figure__caption {
  margin-top: .7rem;
  font-size: .82rem;
  color: var(--muted);
}

/* ============ 近期更新 ============ */

.page-home .recent {
  padding: clamp(2.5rem, 7vw, 4.25rem) 0;
  background: var(--cream);
  color: var(--ink);
}

.page-home .recent__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-home .recent__item {
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}

.page-home .recent__item:last-child {
  border-bottom: 1px solid var(--line-soft);
}

.page-home .recent__time {
  display: inline-block;
  margin-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--gold-deep);
}

.page-home .recent__title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: .02em;
}

.page-home .recent__title a {
  color: var(--emerald-900);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-home .recent__title a:hover,
.page-home .recent__title a:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
}

.page-home .recent__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ============ 收藏提示条 ============ */

.page-home .bookmark {
  padding: 0 0 clamp(2.5rem, 7vw, 4.5rem);
  background: var(--cream);
}

.page-home .bookmark__panel {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line-gold);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-card);
}

.page-home .bookmark__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--emerald-900);
}

.page-home .bookmark__body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-home .bookmark__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.page-home .bookmark__links a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line-soft);
  background: var(--cream);
  font-size: .92rem;
  font-weight: 600;
  color: var(--emerald-900);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.page-home .bookmark__chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep));
  box-shadow: inset 0 0 0 2px rgba(8, 34, 28, .35);
  flex: 0 0 auto;
}

.page-home .bookmark__links a:hover,
.page-home .bookmark__links a:focus-visible {
  border-color: var(--gold);
  background: var(--cream-2);
  transform: translateY(-2px);
}

/* ============ 响应式 ============ */

@media (min-width: 700px) {
  .page-home .devices__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-home .bookmark__panel {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }

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

@media (min-width: 900px) {
  .page-home .cover__grid {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-home .cover__media {
    margin-right: calc(-1 * clamp(1rem, 4vw, 2.4rem));
  }

  .page-home .entry__panel {
    grid-template-columns: 1.6fr 1fr;
    align-items: center;
  }

  .page-home .entry__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-home .returning__layout {
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(2rem, 4vw, 3.2rem);
  }

  .page-home .columns__row a {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr) auto;
    gap: 1.2rem;
    padding: 1.15rem .2rem;
  }

  .page-home .columns__desc {
    grid-column: 2 / 3;
    grid-row: 1 / span 1;
    align-self: center;
  }

  .page-home .columns__go {
    grid-row: 1 / span 1;
  }
}

@media (min-width: 1100px) {
  .page-home .devices__cards {
    gap: 1.35rem;
  }

  .page-home .devices__figure img {
    max-height: 460px;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .cover__figure {
    transform: none;
  }

  .page-home .cover__path a,
  .page-home .device-card,
  .page-home .columns__row a,
  .page-home .returning__item a,
  .page-home .bookmark__links a,
  .page-home .entry__cta {
    transition: none;
  }
}
<<<END>>>