.page-home {
  --home-aside-w: 200px;
  --home-rail-card: 78vw;
  --home-card-h: 340px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home .num {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0.04em;
  color: var(--amber-soft);
}

.page-home .sec {
  position: relative;
  padding: 28px 22px 26px;
}

.page-home .sec__head {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.page-home .sec__head--rail {
  align-items: end;
  margin-bottom: 20px;
}

.page-home .sec h2,
.page-home .mini h2,
.page-home .room h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(24px, 5.2vw, 36px);
  margin: 10px 0 0;
}

.page-home .sec__lead,
.page-home .mini__lead,
.page-home .room p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mist);
  margin: 10px 0 0;
  max-width: 60ch;
}

.page-home .sec__hint {
  color: var(--mist);
  letter-spacing: 0.04em;
  font-size: var(--fs-note);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  isolation: isolate;
  padding: 32px 0 44px;
  overflow: hidden;
}

.page-home .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: 0.34;
  z-index: -2;
}

.page-home .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 31, 26, 0.94) 0%, rgba(11, 31, 26, 0.86) 55%, var(--ink) 100%),
    radial-gradient(120% 80% at 85% 20%, rgba(242, 169, 59, 0.16), transparent 70%);
}

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

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.16em;
  color: var(--amber);
  text-transform: uppercase;
  margin: 0;
}

.page-home .hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: var(--fs-display);
  margin: 14px 0 0;
  max-width: 16ch;
}

.page-home .hero__lead {
  margin-top: 18px;
  max-width: 52ch;
  color: var(--paper);
  opacity: 0.86;
}

.page-home .hero__cta {
  margin-top: 24px;
}

.page-home .hero__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 2px solid var(--line);
  padding-left: 14px;
}

.page-home .hero__note {
  writing-mode: horizontal-tb;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.08em;
  color: var(--mist);
  margin: 0;
  line-height: 1.9;
}

.page-home .hero__aside-line {
  font-size: var(--fs-note);
  color: var(--amber-soft);
  margin: 0;
}

/* 章节预览：压叠画板 */
.page-home .chapter-preview {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-home .chapter-preview__item {
  position: relative;
}

.page-home .chapter-preview__item + .chapter-preview__item {
  margin-top: -6px;
}

.page-home .chapter-preview__item:nth-child(1) { z-index: 4; }
.page-home .chapter-preview__item:nth-child(2) { z-index: 3; margin-left: 10px; }
.page-home .chapter-preview__item:nth-child(3) { z-index: 2; margin-left: 20px; }
.page-home .chapter-preview__item:nth-child(4) { z-index: 1; margin-left: 30px; }

.page-home .chapter-preview__item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  color: var(--paper);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 260ms var(--ease), border-color 200ms var(--ease);
}

.page-home .chapter-preview__item a:hover,
.page-home .chapter-preview__item a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--amber);
}

.page-home .chapter-preview__no {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--amber);
  flex: 0 0 auto;
}

.page-home .chapter-preview__text {
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- 横向规则牌组 ---------- */
.page-home .rule-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .rule-card {
  flex: 0 0 var(--home-rail-card);
  scroll-snap-align: start;
  perspective: 1200px;
  min-width: 0;
}

.page-home .rule-card__inner {
  position: relative;
  display: block;
  height: var(--home-card-h);
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transition: transform 260ms var(--ease);
  cursor: pointer;
}

.page-home .rule-card__toggle:checked + .rule-card__inner {
  transform: rotateY(180deg);
}

.page-home .rule-card__toggle:focus-visible + .rule-card__inner {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.page-home .rule-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
}

.page-home .rule-card__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(242, 169, 59, 0.14), var(--panel-3) 70%);
  border-color: rgba(242, 169, 59, 0.42);
}

.page-home .rule-card__no {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--amber);
  position: relative;
  z-index: 1;
}

.page-home .rule-card__claim {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper);
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.page-home .rule-card__hint {
  font-size: var(--fs-note);
  color: var(--mist);
  position: relative;
  z-index: 1;
}

.page-home .rule-card__face--back p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--paper);
  margin: 0;
}

.page-home .rule-card--photo .rule-card__face--front {
  justify-content: flex-end;
  padding: 0;
}

.page-home .rule-card--photo .rule-card__face--front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.85);
}

.page-home .rule-card--photo .rule-card__no,
.page-home .rule-card--photo .rule-card__claim,
.page-home .rule-card--photo .rule-card__hint {
  margin-left: 20px;
  margin-right: 20px;
}

.page-home .rule-card--photo .rule-card__hint {
  margin-bottom: 20px;
}

/* ---------- 小屏预览 ---------- */
.page-home .mini {
  display: grid;
  gap: 30px;
  align-items: center;
}

.page-home .mini__copy {
  position: relative;
  padding-top: 8px;
}

.page-home .steps {
  list-style: none;
  counter-reset: step;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
}

.page-home .steps__no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: rgba(242, 169, 59, 0.16);
  border: 1px solid rgba(242, 169, 59, 0.5);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-home .mini__fit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}

.page-home .mini__device {
  margin: 0;
  justify-self: center;
  width: min(280px, 100%);
}

.page-home .mini__frame {
  border-radius: 34px;
  border: 2px solid var(--line);
  padding: 12px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel-3));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.page-home .mini__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
}

.page-home .mini__cap {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* ---------- 两条路径 ---------- */
.page-home .path-switch {
  margin-top: 4px;
}

.page-home .path-switch__tabs {
  width: 100%;
  max-width: 360px;
}

.page-home .path-switch__tabs .segmented__btn {
  flex: 1 1 0;
  text-align: center;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-home #path-table:checked ~ .path-switch__tabs label[for="path-table"],
.page-home #path-arcade:checked ~ .path-switch__tabs label[for="path-arcade"] {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}

.page-home .path-switch__radio:focus-visible ~ .path-switch__tabs {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.page-home .path-switch__panel {
  display: none;
  margin-top: 22px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
}

.page-home #path-table:checked ~ [data-panel="table"],
.page-home #path-arcade:checked ~ [data-panel="arcade"] {
  display: block;
}

.page-home .path-switch__panel h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.4;
  margin: 0 0 16px;
  color: var(--paper);
}

.page-home .facts {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}

.page-home .facts__row {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.page-home .facts__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-home .facts dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
}

.page-home .path-switch__remind {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper);
}

/* ---------- 房间人数 ---------- */
.page-home .room {
  display: grid;
  gap: 30px;
  align-items: center;
}

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

.page-home .room__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .room__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
}

.page-home .room__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.page-home .room__badge {
  justify-self: center;
  width: min(260px, 100%);
  text-align: center;
}

.page-home .room__badge svg {
  width: 100%;
  height: auto;
  display: block;
}

.page-home .room__badge-cap {
  margin: 8px 0 0;
}

/* ---------- 目录与记录 ---------- */
.page-home .dir__grid {
  display: grid;
  gap: 18px;
}

.page-home .dir__block {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
}

.page-home .dir__block--time {
  border-color: rgba(56, 225, 214, 0.34);
}

.page-home .dir__block h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--paper);
}

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

.page-home .dir__filters li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper);
}

.page-home .dir__big {
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 1;
  color: var(--cyan);
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}

.page-home .dir__block p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mist);
  margin: 0;
}

.page-home .dir__foot {
  margin-top: 14px !important;
  font-size: 15px !important;
  color: var(--paper) !important;
  opacity: 0.82;
}

.page-home .dir__figure {
  margin: 22px 0 0;
}

.page-home .dir__cta {
  margin-top: 20px;
}

/* ---------- 专题带 ---------- */
.page-home .topic-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .topic-card {
  flex: 0 0 var(--home-rail-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
  min-width: 0;
}

.page-home .topic-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.4;
  margin: 0;
  color: var(--paper);
}

.page-home .topic-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .topic-card__meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--amber-soft);
}

/* ---------- 中等屏幕 ---------- */
@media (min-width: 720px) {
  .page-home {
    --home-rail-card: 320px;
    --home-card-h: 360px;
  }

  .page-home .sec {
    padding: 36px 30px 34px;
  }

  .page-home .sec__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
  }

  .page-home .sec__head--rail {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-home .dir__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 20px;
  }

  .page-home .chapter-preview__item:nth-child(2) { margin-left: 24px; }
  .page-home .chapter-preview__item:nth-child(3) { margin-left: 48px; }
  .page-home .chapter-preview__item:nth-child(4) { margin-left: 72px; }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-home .hero {
    padding: 56px 0 72px;
  }

  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--home-aside-w);
    gap: 40px;
    align-items: start;
  }

  .page-home .hero__aside {
    margin-top: 56px;
    padding-left: 16px;
  }

  .page-home .hero__note {
    writing-mode: vertical-rl;
    font-size: var(--fs-note);
    letter-spacing: 0.14em;
    line-height: 2.2;
    max-height: 420px;
  }

  .page-home .hero h1 {
    max-width: 14ch;
  }

  .page-home .mini {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
  }

  .page-home .mini__device {
    justify-self: end;
    width: min(300px, 100%);
  }

  .page-home .room {
    grid-template-columns: 1fr 0.72fr;
    gap: 48px;
  }

  .page-home .room__badge {
    justify-self: end;
    width: min(300px, 100%);
  }

  .page-home .path-switch__panel {
    padding: 26px 28px;
  }

  .page-home .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .page-home .facts__row {
    border-bottom: 0;
    padding-bottom: 0;
    border-left: 2px solid var(--line);
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .rule-card__inner,
  .page-home .chapter-preview__item a {
    transition: none;
  }
}


<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <img class="hero__bg" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="牌桌局部特写，暖光只照亮桌面一角与散开的牌背，其余退入暗处">
    <div class="hero__scrim" aria-hidden="true"></div>
    <div class="wrap hero__grid">
      <div class="hero__main">
        <p class="eyebrow">a8棋牌局 · 中文主页</p>
        <h1 id="hero-title">牌桌上的规矩，<br>用大白话讲给你听</h1>
        <p class="lead hero__lead">
          规则原文绕来绕去的时候，最想要的是旁边有人把话说明白。a8棋牌局 从 2021 年起就在做这件事：一条一条改写成人话，编好号，随时翻得到。手机竖着握，拇指够得着的地方就是操作区；第一次坐下来，跟着两条起步路径走一遍，心里就有底了。
        </p>
        <div class="cluster hero__cta">
          <a class="btn btn--accent" href="/answers/">看新手两步</a>
          <a class="btn btn--ghost" href="/solutions/">查规则目录</a>
          <a class="btn btn--ghost" href="/profile/">了解团队</a>
        </div>

        <ol class="chapter-preview">
          <li class="chapter-preview__item">
            <a href="#rules-cards">
              <span class="chapter-preview__no">01</span>
              <span class="chapter-preview__text">六条最常被问到的规则，翻一下就懂</span>
            </a>
          </li>
          <li class="chapter-preview__item">
            <a href="#mini-screen">
              <span class="chapter-preview__no">02</span>
              <span class="chapter-preview__text">手机上竖着用，单手就能翻</span>
            </a>
          </li>
          <li class="chapter-preview__item">
            <a href="#starter-paths">
              <span class="chapter-preview__no">03</span>
              <span class="chapter-preview__text">练新手局与电玩新手指引，两条路各走一遍</span>
            </a>
          </li>
          <li class="chapter-preview__item">
            <a href="#directory">
              <span class="chapter-preview__no">04</span>
              <span class="chapter-preview__text">目录筛得细，记录翻得到</span>
            </a>
          </li>
        </ol>
      </div>

      <aside class="hero__aside">
        <p class="hero__note note-vertical">规则库 <span class="num">320</span> 条 · 覆盖 <span class="num">18</span> 类玩法 · 已复读 <span class="num">286</span> 条</p>
        <p class="hero__aside-line">每周三、周六补新条目</p>
      </aside>
    </div>
  </section>

  <div class="wave-divider" aria-hidden="true"></div>

  <section class="section" id="rules-cards" aria-labelledby="rules-title">
    <div class="wrap">
      <div class="board board--raised sec">
        <span class="board__marker">01</span>
        <div class="sec__head">
          <div>
            <h2 id="rules-title">先尝一口：六张牌，正面是结论，背面是补充</h2>
            <p class="sec__lead">左右拖动，或者点一下卡片翻面。你在这儿看到的读法，就是全站每一条规则的写法。</p>
          </div>
          <p class="note sec__hint" aria-hidden="true">R-014 · T-088 · R-102 · R-176 · R-201 · R-233</p>
        </div>

        <ul class="card-rail rule-rail">
          <li class="rule-card rule-card--photo">
            <input class="rule-card__toggle sr-only" type="checkbox" id="rule-flip-1">
            <label class="rule-card__inner" for="rule-flip-1">
              <span class="rule-card__face rule-card__face--front">
                <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="一只手正在翻开一张牌的瞬间，手指与牌边清晰，背景虚化" loading="lazy" decoding="async">
                <span class="rule-card__no">R-014</span>
                <strong class="rule-card__claim">房间人数按局算，进桌前就能看到</strong>
                <span class="rule-card__hint">翻一下看补充</span>
              </span>
              <span class="rule-card__face rule-card__face--back">
                <span class="rule-card__no">R-014</span>
                <p>数字约每 3 秒刷新一次，人满了会马上显示出来，你不用先坐下才发现没位置。</p>
              </span>
            </label>
          </li>

          <li class="rule-card">
            <input class="rule-card__toggle sr-only" type="checkbox" id="rule-flip-2">
            <label class="rule-card__inner" for="rule-flip-2">
              <span class="rule-card__face rule-card__face--front">
                <span class="rule-card__no">T-088</span>
                <strong class="rule-card__claim">术语看不懂，紧跟着就有一句人话</strong>
                <span class="rule-card__hint">翻一下看补充</span>
              </span>
              <span class="rule-card__face rule-card__face--back">
                <span class="rule-card__no">T-088</span>
                <p>术语对照表里 <span class="num">240</span> 个词，每个配一句不超过 20 字的白话，点到就能看。</p>
              </span>
            </label>
          </li>

          <li class="rule-card">
            <input class="rule-card__toggle sr-only" type="checkbox" id="rule-flip-3">
            <label class="rule-card__inner" for="rule-flip-3">
              <span class="rule-card__face rule-card__face--front">
                <span class="rule-card__no">R-102</span>
                <strong class="rule-card__claim">局制写在卡片最上面，先看这一行</strong>
                <span class="rule-card__hint">翻一下看补充</span>
              </span>
              <span class="rule-card__face rule-card__face--back">
                <span class="rule-card__no">R-102</span>
                <p>先认准局制再往下读，后面的说明才对得上号，顺序反了最容易看糊涂。</p>
              </span>
            </label>
          </li>

          <li class="rule-card">
            <input class="rule-card__toggle sr-only" type="checkbox" id="rule-flip-4">
            <label class="rule-card__inner" for="rule-flip-4">
              <span class="rule-card__face rule-card__face--front">
                <span class="rule-card__no">R-176</span>
                <strong class="rule-card__claim">结算方式只讲三行，多了不写</strong>
                <span class="rule-card__hint">翻一下看补充</span>
              </span>
              <span class="rule-card__face rule-card__face--back">
                <span class="rule-card__no">R-176</span>
                <p>先看结算，再看细则更快；我们把这部分压在三条短句里，坐下前扫一眼就够。</p>
              </span>
            </label>
          </li>

          <li class="rule-card">
            <input class="rule-card__toggle sr-only" type="checkbox" id="rule-flip-5">
            <label class="rule-card__inner" for="rule-flip-5">
              <span class="rule-card__face rule-card__face--front">
                <span class="rule-card__no">R-201</span>
                <strong class="rule-card__claim">读不通就报编号，我们照着改</strong>
                <span class="rule-card__hint">翻一下看补充</span>
              </span>
              <span class="rule-card__face rule-card__face--back">
                <span class="rule-card__no">R-201</span>
                <p>每条都有固定编号，来信写明编号，处理的人一眼就能翻到那一页。</p>
              </span>
            </label>
          </li>

          <li class="rule-card">
            <input class="rule-card__toggle sr-only" type="checkbox" id="rule-flip-6">
            <label class="rule-card__inner" for="rule-flip-6">
              <span class="rule-card__face rule-card__face--front">
                <span class="rule-card__no">R-233</span>
                <strong class="rule-card__claim">条目更新后，目录里就是新的说法</strong>
                <span class="rule-card__hint">翻一下看补充</span>
              </span>
              <span class="rule-card__face rule-card__face--back">
                <span class="rule-card__no">R-233</span>
                <p>每周三、周六补一轮，过时的写法会同步换掉，你翻到的和当期用的是同一份。</p>
              </span>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section" id="mini-screen" aria-labelledby="mini-title">
    <div class="wrap">
      <div class="mini">
        <div class="mini__copy">
          <span class="board__marker">02</span>
          <h2 id="mini-title">拇指够得到的地方，才是操作区</h2>
          <p class="mini__lead">A8玩法中心 小屏 版专为竖着拿手机的人做调整：规则卡排在上半屏，滑动与翻面都压在下半屏，单手就能走完全程。</p>
          <ol class="steps">
            <li><span class="steps__no">1</span>用手机浏览器打开站点，进玩法中心，页面会自动按竖屏排版。</li>
            <li><span class="steps__no">2</span>上半屏读规则，下半屏是操作区，拇指不用往上够。</li>
            <li><span class="steps__no">3</span>左右滑动翻卡，点一下看背面补充，退出后回到原位置。</li>
          </ol>
          <p class="mini__fit"><span class="tag">适配 <span class="num">5.0</span>–<span class="num">6.9</span> 英寸竖屏</span> <span class="tag">正文字号 <span class="num">18</span>px</span></p>
        </div>
        <figure class="mini__device">
          <div class="mini__frame">
            <img src="{zhanqunpic:h:1280w:720}" width="720" height="1280" alt="手机竖屏握持视角，屏幕区域留白，仅表现单手拇指可达范围" loading="lazy" decoding="async">
          </div>
          <figcaption class="mini__cap">单手可及区 · 竖屏握持</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section" id="starter-paths" aria-labelledby="paths-title">
    <div class="wrap">
      <div class="board sec">
        <span class="board__marker">03</span>
        <h2 id="paths-title">两条起步路，走完再坐下去</h2>
        <p class="sec__lead">新手指引一共 <span class="num">12</span> 节，分成两段。没碰过牌的从练新手局开始；从牌桌转去电玩屏的，直接看第二段。</p>

        <div class="path-switch">
          <input class="path-switch__radio sr-only" type="radio" name="starter-path" id="path-table" checked>
          <input class="path-switch__radio sr-only" type="radio" name="starter-path" id="path-arcade">

          <div class="segmented path-switch__tabs">
            <label class="segmented__btn" for="path-table">练新手局</label>
            <label class="segmented__btn" for="path-arcade">电玩新手指引</label>
          </div>

          <div class="path-switch__panel" data-panel="table">
            <h3>第一次坐下来，先把一局从头到尾看一遍</h3>
            <dl class="facts">
              <div class="facts__row"><dt>适合谁</dt><dd>没打过、或者打过几次但一直没弄明白结算的人。</dd></div>
              <div class="facts__row"><dt>要花多久</dt><dd>分几次看也行，每节都是短句，中途走开不丢进度。</dd></div>
              <div class="facts__row"><dt>看完得到</dt><dd>知道一局怎么起、怎么走、怎么收，桌上别人说话你听得懂。</dd></div>
            </dl>
            <a class="btn btn--accent btn--small" href="/answers/">去练新手局</a>
          </div>

          <div class="path-switch__panel" data-panel="arcade">
            <h3>从牌桌换到电玩屏，先认界面再谈玩法</h3>
            <dl class="facts">
              <div class="facts__row"><dt>适合谁</dt><dd>棋牌打得顺，但一打开电玩屏就不知道该看哪块的人。</dd></div>
              <div class="facts__row"><dt>要花多久</dt><dd>界面与按钮的位置先认一遍，比读玩法条目省时间。</dd></div>
              <div class="facts__row"><dt>看完得到</dt><dd>分得清哪些提示是状态、哪些是规则，按错键的次数会少很多。</dd></div>
            </dl>
            <a class="btn btn--accent btn--small" href="/topics/">去电玩指引</a>
          </div>

          <p class="path-switch__remind"><span class="tag tag--warn">提醒</span> 第一次坐到桌前，把对应的那一段再翻一遍，看完再动第一手。</p>
        </div>
      </div>
    </div>
  </section>

  <div class="wave-divider" aria-hidden="true"></div>

  <section class="section" id="room-count" aria-labelledby="room-title">
    <div class="wrap">
      <div class="room">
        <div class="room__copy">
          <span class="board__marker">04</span>
          <h2 id="room-title">这局人够不够，进门之前就知道</h2>
          <p>8棋牌娱乐房间人数按局实时显示，不用先进去再退出来。数字大约每 <span class="num">3</span> 秒更新一次，人走人留都会跟着变。</p>
          <ul class="room__list">
            <li>看数字之前先看局制，不同的局人数上限不一样。</li>
            <li>数字在跳说明这一局正在进人，稍等一会儿再决定。</li>
            <li>房间还没满又不想等，换一局看看更省事。</li>
          </ul>
        </div>
        <div class="room__badge">
          <svg viewBox="0 0 220 220" role="img" aria-labelledby="room-svg-title">
            <title id="room-svg-title">房间人数徽标示意：一个圆点加数字读数</title>
            <circle cx="110" cy="110" r="96" fill="none" stroke="var(--line)" stroke-width="2"></circle>
            <circle cx="110" cy="110" r="72" fill="none" stroke="var(--line)" stroke-width="1.5" stroke-dasharray="6 8"></circle>
            <circle cx="72" cy="86" r="9" fill="var(--cyan)"></circle>
            <circle cx="148" cy="82" r="7" fill="var(--amber)"></circle>
            <circle cx="86" cy="146" r="7" fill="var(--amber)"></circle>
            <circle cx="144" cy="142" r="9" fill="var(--cyan)"></circle>
            <text x="110" y="104" text-anchor="middle" fill="var(--paper)" font-family="var(--font-mono)" font-size="34">12</text>
            <text x="110" y="128" text-anchor="middle" fill="var(--mist)" font-family="var(--font-mono)" font-size="12">本局人数</text>
          </svg>
          <p class="room__badge-cap"><span class="tag tag--live">每 3 秒刷新</span></p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="directory" aria-labelledby="dir-title">
    <div class="wrap">
      <div class="board sec dir">
        <span class="board__marker">05</span>
        <div class="sec__head">
          <div>
            <h2 id="dir-title">事后想翻回来，目录和记录都在原处</h2>
            <p class="sec__lead">会员中心里有两样东西最常用：一个能把条目筛到只剩几条的目录，一份能往回翻的对局记录。</p>
          </div>
        </div>

        <div class="dir__grid">
          <div class="dir__block">
            <h3>三个条件一起筛</h3>
            <ul class="dir__filters">
              <li><span class="tag">玩法</span>先圈定你要找的那一类。</li>
              <li><span class="tag">局制</span>再收到具体的局，条目会跟着缩。</li>
              <li><span class="tag">结算方式</span>最后一层，只留下算账方式对得上的。</li>
            </ul>
            <p class="dir__foot">三个条件可以叠加，也可以只用一个，筛完直接点进去看全文。</p>
          </div>
          <div class="dir__block dir__block--time">
            <h3>记录能往回翻多久</h3>
            <p class="dir__big"><span class="num">180</span> 天</p>
            <p>最近半年的对局记录都在，按玩法挑，也可以按时间倒序看，最近的一局排在最前面。</p>
            <p class="dir__foot">想不起哪天玩的，就从最近的往前翻，比翻聊天记录快。</p>
          </div>
        </div>

        <figure class="dir__figure">
          <div class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="筹码与印有编号的规则卡片平铺在深色桌面上，俯拍构图，留白充足" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">每条都有编号 · 来信报编号即可定位</figcaption>
          </div>
        </figure>
        <div class="cluster dir__cta">
          <a class="btn btn--accent" href="/solutions/">看怎么进</a>
          <a class="btn btn--ghost" href="/reach-us/">来信纠错</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="topics-rail" aria-labelledby="topics-title">
    <div class="wrap">
      <div class="sec__head sec__head--rail">
        <div>
          <h2 id="topics-title">最近在连载什么</h2>
          <p class="sec__lead">专题中心累计 <span class="num">146</span> 篇，每周三、周六各更新一次，一篇平均读 <span class="num">3</span> 分 <span class="num">40</span> 秒。</p>
        </div>
        <a class="btn btn--ghost btn--small" href="/topics/">看全部</a>
      </div>

      <ul class="card-rail topic-rail">
        <li class="topic-card">
          <span class="tag tag--warn">新手连载</span>
          <h3>第一次坐下之前，先把这三件事看一遍</h3>
          <p>从认局制到看懂结算，把最容易卡住的地方挑出来讲。</p>
          <span class="topic-card__meta">阅读约 4 分钟</span>
        </li>
        <li class="topic-card">
          <span class="tag tag--warn">术语拆解</span>
          <h3>「按局结算」到底按的是什么</h3>
          <p>拆开一个最常被问到的词，配两种常见场景对照讲。</p>
          <span class="topic-card__meta">阅读约 3 分钟</span>
        </li>
        <li class="topic-card">
          <span class="tag tag--warn">小屏习惯</span>
          <h3>竖着握手机翻规则的三个顺手动作</h3>
          <p>拇指怎么放、卡片往哪边滑、看背面补充的时机。</p>
          <span class="topic-card__meta">阅读约 4 分钟</span>
        </li>
      </ul>
    </div>
  </section>

</main>

.page-home {
  --home-aside-w: 200px;
  --home-rail-card: 78vw;
  --home-card-h: 340px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home .num {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0.04em;
  color: var(--amber-soft);
}

.page-home .sec {
  position: relative;
  padding: 28px 22px 26px;
}

.page-home .sec__head {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.page-home .sec__head--rail {
  align-items: end;
  margin-bottom: 20px;
}

.page-home .sec h2,
.page-home .mini h2,
.page-home .room h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(24px, 5.2vw, 36px);
  margin: 10px 0 0;
}

.page-home .sec__lead,
.page-home .mini__lead,
.page-home .room p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mist);
  margin: 10px 0 0;
  max-width: 60ch;
}

.page-home .sec__hint {
  color: var(--mist);
  letter-spacing: 0.04em;
  font-size: var(--fs-note);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  isolation: isolate;
  padding: 32px 0 44px;
  overflow: hidden;
}

.page-home .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: 0.34;
  z-index: -2;
}

.page-home .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 31, 26, 0.94) 0%, rgba(11, 31, 26, 0.86) 55%, var(--ink) 100%),
    radial-gradient(120% 80% at 85% 20%, rgba(242, 169, 59, 0.16), transparent 70%);
}

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

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.16em;
  color: var(--amber);
  margin: 0;
}

.page-home .hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: var(--fs-display);
  margin: 14px 0 0;
  max-width: 16ch;
}

.page-home .hero__lead {
  margin-top: 18px;
  max-width: 52ch;
  color: var(--paper);
  opacity: 0.86;
}

.page-home .hero__cta {
  margin-top: 24px;
}

.page-home .hero__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 2px solid var(--line);
  padding-left: 14px;
}

.page-home .hero__note {
  writing-mode: horizontal-tb;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.08em;
  color: var(--mist);
  margin: 0;
  line-height: 1.9;
}

.page-home .hero__aside-line {
  font-size: var(--fs-note);
  color: var(--amber-soft);
  margin: 0;
}

/* 章节预览：压叠画板 */
.page-home .chapter-preview {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-home .chapter-preview__item {
  position: relative;
}

.page-home .chapter-preview__item + .chapter-preview__item {
  margin-top: -6px;
}

.page-home .chapter-preview__item:nth-child(1) { z-index: 4; }
.page-home .chapter-preview__item:nth-child(2) { z-index: 3; margin-left: 10px; }
.page-home .chapter-preview__item:nth-child(3) { z-index: 2; margin-left: 20px; }
.page-home .chapter-preview__item:nth-child(4) { z-index: 1; margin-left: 30px; }

.page-home .chapter-preview__item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  color: var(--paper);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 260ms var(--ease), border-color 200ms var(--ease);
}

.page-home .chapter-preview__item a:hover,
.page-home .chapter-preview__item a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--amber);
}

.page-home .chapter-preview__no {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--amber);
  flex: 0 0 auto;
}

.page-home .chapter-preview__text {
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- 横向规则牌组 ---------- */
.page-home .rule-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .rule-card {
  flex: 0 0 var(--home-rail-card);
  scroll-snap-align: start;
  perspective: 1200px;
  min-width: 0;
}

.page-home .rule-card__inner {
  position: relative;
  display: block;
  height: var(--home-card-h);
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transition: transform 260ms var(--ease);
  cursor: pointer;
}

.page-home .rule-card__toggle:checked + .rule-card__inner {
  transform: rotateY(180deg);
}

.page-home .rule-card__toggle:focus-visible + .rule-card__inner {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.page-home .rule-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
}

.page-home .rule-card__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(242, 169, 59, 0.14), var(--panel-3) 70%);
  border-color: rgba(242, 169, 59, 0.42);
}

.page-home .rule-card__no {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--amber);
  position: relative;
  z-index: 1;
}

.page-home .rule-card__claim {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper);
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.page-home .rule-card__hint {
  font-size: var(--fs-note);
  color: var(--mist);
  position: relative;
  z-index: 1;
}

.page-home .rule-card__face--back p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--paper);
  margin: 0;
}

.page-home .rule-card--photo .rule-card__face--front {
  justify-content: flex-end;
  padding: 0;
}

.page-home .rule-card--photo .rule-card__face--front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.85);
}

.page-home .rule-card--photo .rule-card__no,
.page-home .rule-card--photo .rule-card__claim,
.page-home .rule-card--photo .rule-card__hint {
  margin-left: 20px;
  margin-right: 20px;
}

.page-home .rule-card--photo .rule-card__hint {
  margin-bottom: 20px;
}

/* ---------- 小屏预览 ---------- */
.page-home .mini {
  display: grid;
  gap: 30px;
  align-items: center;
}

.page-home .mini__copy {
  position: relative;
  padding-top: 8px;
}

.page-home .steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
}

.page-home .steps__no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: rgba(242, 169, 59, 0.16);
  border: 1px solid rgba(242, 169, 59, 0.5);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13px;
}

.page-home .mini__fit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}

.page-home .mini__device {
  margin: 0;
  justify-self: center;
  width: min(280px, 100%);
}

.page-home .mini__frame {
  border-radius: 34px;
  border: 2px solid var(--line);
  padding: 12px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel-3));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.page-home .mini__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
}

.page-home .mini__cap {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* ---------- 两条路径 ---------- */
.page-home .path-switch {
  margin-top: 4px;
}

.page-home .path-switch__tabs {
  width: 100%;
  max-width: 360px;
}

.page-home .path-switch__tabs .segmented__btn {
  flex: 1 1 0;
  text-align: center;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-home #path-table:checked ~ .path-switch__tabs label[for="path-table"],
.page-home #path-arcade:checked ~ .path-switch__tabs label[for="path-arcade"] {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}

.page-home .path-switch__radio:focus-visible ~ .path-switch__tabs {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.page-home .path-switch__panel {
  display: none;
  margin-top: 22px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
}

.page-home #path-table:checked ~ [data-panel="table"],
.page-home #path-arcade:checked ~ [data-panel="arcade"] {
  display: block;
}

.page-home .path-switch__panel h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.4;
  margin: 0 0 16px;
  color: var(--paper);
}

.page-home .facts {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}

.page-home .facts__row {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.page-home .facts__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.page-home .facts dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
}

.page-home .path-switch__remind {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper);
}

/* ---------- 房间人数 ---------- */
.page-home .room {
  display: grid;
  gap: 30px;
  align-items: center;
}

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

.page-home .room__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .room__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
}

.page-home .room__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.page-home .room__badge {
  justify-self: center;
  width: min(260px, 100%);
  text-align: center;
}

.page-home .room__badge svg {
  width: 100%;
  height: auto;
  display: block;
}

.page-home .room__badge-cap {
  margin: 8px 0 0;
}

/* ---------- 目录与记录 ---------- */
.page-home .dir__grid {
  display: grid;
  gap: 18px;
}

.page-home .dir__block {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
}

.page-home .dir__block--time {
  border-color: rgba(56, 225, 214, 0.34);
}

.page-home .dir__block h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--paper);
}

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

.page-home .dir__filters li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper);
}

.page-home .dir__big {
  font-family: var(--font-mono);
  font-size: 42px;
  line-height: 1;
  color: var(--cyan);
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}

.page-home .dir__block p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--mist);
  margin: 0;
}

.page-home .dir__foot {
  margin-top: 14px;
  font-size: 15px;
  color: var(--paper);
  opacity: 0.82;
}

.page-home .dir__figure {
  margin: 22px 0 0;
}

.page-home .dir__cta {
  margin-top: 20px;
}

/* ---------- 专题带 ---------- */
.page-home .topic-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .topic-card {
  flex: 0 0 var(--home-rail-card);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--panel-3));
  min-width: 0;
}

.page-home .topic-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.4;
  margin: 0;
  color: var(--paper);
}

.page-home .topic-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .topic-card__meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: var(--amber-soft);
}

/* ---------- 中等屏幕 ---------- */
@media (min-width: 720px) {
  .page-home {
    --home-rail-card: 320px;
    --home-card-h: 360px;
  }

  .page-home .sec {
    padding: 36px 30px 34px;
  }

  .page-home .sec__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
  }

  .page-home .sec__head--rail {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-home .dir__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 20px;
  }

  .page-home .chapter-preview__item:nth-child(2) { margin-left: 24px; }
  .page-home .chapter-preview__item:nth-child(3) { margin-left: 48px; }
  .page-home .chapter-preview__item:nth-child(4) { margin-left: 72px; }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px) {
  .page-home .hero {
    padding: 56px 0 72px;
  }

  .page-home .hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--home-aside-w);
    gap: 40px;
    align-items: start;
  }

  .page-home .hero__aside {
    margin-top: 56px;
    padding-left: 16px;
  }

  .page-home .hero__note {
    writing-mode: vertical-rl;
    letter-spacing: 0.14em;
    line-height: 2.2;
    max-height: 420px;
  }

  .page-home .hero h1 {
    max-width: 14ch;
  }

  .page-home .mini {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
  }

  .page-home .mini__device {
    justify-self: end;
    width: min(300px, 100%);
  }

  .page-home .room {
    grid-template-columns: 1fr 0.72fr;
    gap: 48px;
  }

  .page-home .room__badge {
    justify-self: end;
    width: min(300px, 100%);
  }

  .page-home .path-switch__panel {
    padding: 26px 28px;
  }

  .page-home .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .page-home .facts__row {
    border-bottom: 0;
    padding-bottom: 0;
    border-left: 2px solid var(--line);
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .rule-card__inner,
  .page-home .chapter-preview__item a {
    transition: none;
  }
}