.page-about {
  --about-line: rgba(185, 167, 255, 0.22);
  color: var(--ink-soft);
  padding-bottom: 0;
}

.page-about .breadcrumb {
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

.page-about .breadcrumb a {
  color: var(--lavender-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.page-about .breadcrumb a:hover,
.page-about .breadcrumb a:focus-visible {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}

.page-about .breadcrumb-sep {
  margin: 0 0.5rem;
  color: var(--ink-dim);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: 1.5rem 0 2.75rem;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7.4vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--paper-100);
  margin: 0.6rem 0 1rem;
  max-width: 16em;
  text-shadow: 2px 2px 0 rgba(255, 63, 164, 0.28);
}

.page-about .about-lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  max-width: 34em;
  color: var(--ink-soft);
}

.page-about .about-hstats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1.75rem 0 0;
  padding: 0;
  background: var(--about-line);
  border: 1px solid var(--about-line);
}

.page-about .about-hstats li {
  background: var(--night-900);
  padding: 0.9rem 1rem;
  min-width: 0;
}

.page-about .about-hstats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--cyan-400);
}

.page-about .about-hstats span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

/* ---------- 通用区块 ---------- */
.page-about .about-band {
  position: relative;
  padding-block: 2.75rem;
  border-top: 1px solid var(--about-line);
}

.page-about .about-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vw, 2.35rem);
  line-height: 1.3;
  color: var(--paper-100);
  margin: 0.5rem 0 0.9rem;
}

.page-about .about-intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 38em;
}

.page-about .about-figure {
  margin: 1.6rem 0 0;
  padding: 0.4rem;
  background: var(--night-700);
  border: 1px solid var(--line-cyan);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-road {
  background: linear-gradient(180deg, rgba(23, 20, 61, 0.72), rgba(8, 7, 27, 0));
}

/* ---------- 时间线 ---------- */
.page-about .about-nodes {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}

.page-about .about-node {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding-left: 1.5rem;
  min-width: 0;
}

.page-about .about-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--magenta-500), rgba(255, 63, 164, 0.06));
}

.page-about .about-year {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--magenta-500);
}

.page-about .about-paper {
  position: relative;
  background: var(--paper-100);
  color: var(--ink-900);
  padding: 1.2rem 1.15rem 1.3rem;
  border-top: 4px solid var(--cyan-400);
  box-shadow: var(--shadow-paper);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
}

.page-about .about-paper::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(36, 26, 46, 0.16);
  pointer-events: none;
}

.page-about .about-paper > * {
  position: relative;
  z-index: 1;
}

.page-about .about-paper h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-900);
}

.page-about .about-paper p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: rgba(36, 26, 46, 0.84);
}

.page-about .about-node:hover .about-paper {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 rgba(47, 243, 224, 0.5);
}

/* ---------- 三道工序 ---------- */
.page-about .about-desks {
  background: linear-gradient(180deg, rgba(255, 63, 164, 0.06), rgba(8, 7, 27, 0));
}

.page-about .about-steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-about .about-step {
  padding: 1.3rem 1.1rem 1.25rem;
  background: linear-gradient(180deg, rgba(47, 243, 224, 0.09), rgba(23, 20, 61, 0.92) 46%);
  border: 1px solid var(--about-line);
  border-top: 2px solid var(--orange-500);
  min-width: 0;
}

.page-about .about-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--orange-500);
  margin-bottom: 0.55rem;
}

.page-about .about-step h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--paper-100);
}

.page-about .about-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
}

.page-about .about-role {
  padding: 1.1rem 1.05rem 1.15rem;
  background: rgba(23, 20, 61, 0.78);
  border: 1px solid var(--about-line);
  border-left: 3px solid var(--lavender-300);
  transition: border-color 0.16s ease, background 0.16s ease;
  min-width: 0;
}

.page-about .about-role:hover,
.page-about .about-role:focus-within {
  border-left-color: var(--cyan-400);
  background: rgba(47, 243, 224, 0.07);
}

.page-about .about-role h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--paper-100);
}

.page-about .about-role-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cyan-400);
}

.page-about .about-role p {
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-dim);
}

.page-about .about-role-meter {
  height: 6px;
  background: rgba(185, 167, 255, 0.16);
  overflow: hidden;
}

.page-about .about-role-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-400), var(--magenta-500));
}

/* ---------- 内容地图 ---------- */
.page-about .about-map {
  background: linear-gradient(180deg, rgba(23, 20, 61, 0.66), rgba(8, 7, 27, 0));
}

.page-about .about-map-grid {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-about .about-map-card {
  position: relative;
  padding: 1.1rem 1.05rem 1.15rem 1.15rem;
  background: rgba(23, 20, 61, 0.72);
  border: 1px solid var(--about-line);
  min-width: 0;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.page-about .about-map-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--magenta-500);
  transition: width 0.16s ease;
}

.page-about .about-map-card:hover {
  border-color: var(--line-cyan);
  transform: translateY(-2px);
}

.page-about .about-map-card:hover::before {
  width: 6px;
  background: var(--cyan-400);
}

.page-about .about-map-no {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--magenta-500);
  margin-bottom: 0.4rem;
}

.page-about .about-map-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--paper-100);
}

.page-about .about-map-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ---------- 合作与认可 ---------- */
.page-about .about-partner {
  background: linear-gradient(180deg, rgba(255, 63, 164, 0.08), rgba(8, 7, 27, 0));
}

.page-about .about-partner-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.page-about .about-partner-main p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

.page-about .about-partner-main a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.page-about .about-partner-main a:hover,
.page-about .about-partner-main a:focus-visible {
  color: var(--orange-500);
  border-bottom-color: var(--orange-500);
}

.page-about .about-partner-link {
  padding-top: 0.25rem;
  border-top: 1px solid var(--about-line);
  padding-top: 0.9rem;
  font-size: 0.9375rem;
}

.page-about .about-partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--about-line);
  border: 1px solid var(--about-line);
  align-self: start;
}

.page-about .about-partner-list li {
  background: var(--night-900);
  padding: 0.85rem 1rem;
}

.page-about .about-partner-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--lime-300);
  margin-bottom: 0.15rem;
}

.page-about .about-partner-list span {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- 更新节奏 ---------- */
.page-about .about-cadence {
  background: linear-gradient(160deg, rgba(23, 20, 61, 0.95), rgba(8, 7, 27, 1) 70%);
}

.page-about .about-cadence-stats {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-about .about-cadence-stats li {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--orange-500);
  background: rgba(255, 154, 61, 0.08);
}

.page-about .about-cadence-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--paper-100);
  margin-bottom: 0.2rem;
}

.page-about .about-cadence-stats span {
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

.page-about .about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

.page-about .about-cta .btn {
  flex: 1 1 auto;
  min-width: 9.5rem;
  justify-content: center;
}

.page-about .about-backlink {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-dim);
}

.page-about .about-backlink a {
  color: var(--lavender-300);
  text-decoration: none;
  border-bottom: 1px solid var(--about-line);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.page-about .about-backlink a:hover,
.page-about .about-backlink a:focus-visible {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-hstats strong {
    font-size: 1.9rem;
  }

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

  .page-about .about-cadence-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-about .about-hero {
    padding: 2rem 0 3.25rem;
  }

  .page-about .about-band {
    padding-block: 3.5rem;
  }

  .page-about .about-hstats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .page-about .about-node {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 2rem;
    padding-left: 0;
    align-items: start;
  }

  .page-about .about-node::before {
    left: 140px;
    top: 0.2rem;
    bottom: 0.2rem;
  }

  .page-about .about-year {
    font-size: 2.9rem;
    text-align: right;
    padding-right: 1rem;
  }

  .page-about .about-partner-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.25rem;
  }

  .page-about .about-backlink {
    margin-top: 1.35rem;
  }
}

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

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

  .page-about .about-node:nth-child(odd) .about-paper {
    transform: rotate(-0.35deg);
  }

  .page-about .about-node:nth-child(even) .about-paper {
    transform: rotate(0.35deg);
  }

  .page-about .about-node:hover .about-paper {
    transform: translateY(-3px) rotate(0deg);
  }

  .page-about .about-year {
    font-size: 3.4rem;
  }

  .page-about .about-lede {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-node:hover .about-paper,
  .page-about .about-map-card:hover {
    transform: none;
  }

  .page-about .about-node:nth-child(odd) .about-paper,
  .page-about .about-node:nth-child(even) .about-paper {
    transform: none;
  }
}


<main id="main-content" class="page-about">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑">
      <a href="/">坐标首页</a>
      <span class="breadcrumb-sep" aria-hidden="true">/</span>
      <span aria-current="page">品牌侧写</span>
    </nav>

    <header class="about-hero">
      <p class="eyebrow">品牌侧写</p>
      <h1>八年编辑桌，只想让入口和版本都说得清</h1>
      <p class="about-lede">
        想找微乐游戏的焕新入口，或者手里还留着上个版本想先比一比，玩家最怕的是绕一圈还落不到实处。
        微乐游戏攻略从 2018 年起就在补这一环：把入口、版本对照和按品类分好的攻略放在顺手的位置，
        让来查的人两三步就能用上。
      </p>
      <ul class="about-hstats">
        <li><strong>2018</strong><span>开始持续运营</span></li>
        <li><strong>18</strong><span>人内容团队在岗</span></li>
        <li><strong>8.6 万</strong><span>位注册用户</span></li>
        <li><strong>31</strong><span>个省级行政区有访问</span></li>
      </ul>
    </header>
  </div>

  <section class="about-band about-road" aria-labelledby="road-title">
    <div class="container">
      <p class="eyebrow">历程</p>
      <h2 id="road-title">一条从 2018 年展开的长卷</h2>
      <p class="about-intro">
        每一年留下的东西不一样：先是攻略条目，后来加了评测栏目，再往后是能直接切换的版本对照卡，
        最后是小屏上重做的入口。把这些年份排在一起，就是你今天打开的那一屏。
      </p>

      <figure class="about-figure">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="多层奶油色纸页与品红时间轴线交叠，带印刷纹理的长卷视觉">
      </figure>

      <ol class="about-nodes">
        <li class="about-node">
          <div class="about-year">2018</div>
          <div class="about-paper">
            <h3>先把品类攻略建起来</h3>
            <p>站点从这一年开始持续运营，最早做的事是品类攻略整理。休闲闯关、棋牌对局、益智解谜这些玩法各自成栏，玩家按类型点进去，不用在杂项里一条条翻。</p>
          </div>
        </li>
        <li class="about-node">
          <div class="about-year">2021</div>
          <div class="about-paper">
            <h3>评测栏目开张</h3>
            <p>开始围绕同类新游戏平台做横向观察：入口摆在什么位置、版本多久走一轮、攻略生态跟不跟得上。栏目一期讲一个侧面，后来一直延续下来，如今已收录 12 期。</p>
          </div>
        </li>
        <li class="about-node">
          <div class="about-year">2023</div>
          <div class="about-paper">
            <h3>新旧版本放上同一张卡</h3>
            <p>版本对照卡上线，焕新版和旧版能在同一张卡里切换，界面差别和入口位置一眼看出来。想找旧版本比一比的人，不必再去翻零散的存档。</p>
          </div>
        </li>
        <li class="about-node">
          <div class="about-year">2024</div>
          <div class="about-paper">
            <h3>小屏入口重做一遍</h3>
            <p>移动端把入口按钮的触控高度做到不低于 48 像素，底部常驻双入口条，对照卡在小屏上直接点开就能看，单手也够得着。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-band about-desks" aria-labelledby="desks-title">
    <div class="container">
      <p class="eyebrow">编校</p>
      <h2 id="desks-title">一篇稿子要过三道手</h2>
      <p class="about-intro">
        攻略写出来只是开始。从选题到上线，中间要过编辑、版本校对和上线复核，每一步都有人签字才往下走。
      </p>

      <figure class="about-figure about-figure--desk">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="深色桌面上的校对标记、版本标签与纸稿分层，无真人出镜" loading="lazy" decoding="async">
      </figure>

      <ol class="about-steps">
        <li class="about-step">
          <span class="about-step-num">01</span>
          <h3>编辑初校</h3>
          <p>编辑先通读，把操作步骤拆成能照着做的短句，入口位置写清楚在第几栏，确保玩家读完就能点。</p>
        </li>
        <li class="about-step">
          <span class="about-step-num">02</span>
          <h3>版本校对</h3>
          <p>对照版本档案确认界面、入口和玩法标签跟当前版本对得上；写旧版的部分会标明属于哪个节点，免得张冠李戴。</p>
        </li>
        <li class="about-step">
          <span class="about-step-num">03</span>
          <h3>上线复核</h3>
          <p>发布前再走一遍，检查链接去向、图片说明和分栏归属，确认没问题才推到前台。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="about-band about-crew" aria-labelledby="crew-title">
    <div class="container">
      <p class="eyebrow">团队</p>
      <h2 id="crew-title">18 个人，四条工位</h2>
      <p class="about-intro">
        四个工位互相咬合：有人负责把复杂玩法写成人话，有人盯着界面和入口的变化，有人做横向观察，
        也有人专门管按钮点起来顺不顺手。你读到的每一条攻略，都是这几条工位接力出来的。
      </p>

      <div class="about-team">
        <article class="about-role">
          <h3>攻略编辑<span class="about-role-num">9 人</span></h3>
          <p>按六大品类分线，负责选题、撰稿和每周更新排期。</p>
          <div class="about-role-meter" aria-hidden="true"><span style="width:50%"></span></div>
        </article>
        <article class="about-role">
          <h3>版本校对<span class="about-role-num">4 人</span></h3>
          <p>守着版本档案里的 48 个历史节点，逐个比对界面、入口与玩法标签的变化。</p>
          <div class="about-role-meter" aria-hidden="true"><span style="width:22%"></span></div>
        </article>
        <article class="about-role">
          <h3>评测与栏目<span class="about-role-num">3 人</span></h3>
          <p>做同类平台的横向观察，维护评测索引与专题标签，跟住版本节奏。</p>
          <div class="about-role-meter" aria-hidden="true"><span style="width:17%"></span></div>
        </article>
        <article class="about-role">
          <h3>技术与体验<span class="about-role-num">2 人</span></h3>
          <p>管入口按钮、版本对照卡和小屏布局，触控高度、横滑手感和加载速度都归这条线。</p>
          <div class="about-role-meter" aria-hidden="true"><span style="width:11%"></span></div>
        </article>
      </div>
    </div>
  </section>

  <section class="about-band about-map" aria-labelledby="map-title">
    <div class="container">
      <p class="eyebrow">内容地图</p>
      <h2 id="map-title">六条内容线，各有各的更新重点</h2>
      <p class="about-intro">
        攻略按品类分栏存放，每周固定更新 3 次。你在玩哪一类，就从哪一栏进去，看到的都是这一类真正会卡住的地方。
      </p>

      <figure class="about-figure about-figure--map">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="六个品类节点由霓虹线路连接成地图，每个节点带编号" loading="lazy" decoding="async">
      </figure>

      <ul class="about-map-grid">
        <li class="about-map-card"><span class="about-map-no">01</span><h3>休闲闯关</h3><p>关卡节奏、限时关过法与跳关路线，适合刚上手想稳推进度的人。</p></li>
        <li class="about-map-card"><span class="about-map-no">02</span><h3>棋牌对局</h3><p>牌型判断、出牌顺序与对局复盘，把一手牌拆开讲清楚为什么这么走。</p></li>
        <li class="about-map-card"><span class="about-map-no">03</span><h3>益智解谜</h3><p>线索拆解、多解路径与卡关提示，卡住时能直接找到下一步往哪看。</p></li>
        <li class="about-map-card"><span class="about-map-no">04</span><h3>消除合成</h3><p>连消路线、合成顺序与道具时机，讲的是怎么把有限的步数用在关键处。</p></li>
        <li class="about-map-card"><span class="about-map-no">05</span><h3>竞技挑战</h3><p>赛季节奏、阵容搭配与对抗细节，换了赛季也不用重新摸索一遍。</p></li>
        <li class="about-map-card"><span class="about-map-no">06</span><h3>模拟经营</h3><p>资源调度、阶段目标与长线规划，告诉你前期该把资源压在哪一处。</p></li>
      </ul>
    </div>
  </section>

  <section class="about-band about-partner" aria-labelledby="partner-title">
    <div class="container">
      <p class="eyebrow">合作与认可</p>
      <h2 id="partner-title">内容不是关起门来写的</h2>
      <div class="about-partner-grid">
        <div class="about-partner-main">
          <p>
            站点与 12 家区域内容团队保持选题共建，按季度交换版本观察与品类选题。不同地区玩家遇到的问题，
            能比较快地进到栏目里，而不是等某一个编辑碰巧遇上。
          </p>
          <p>
            这些年下来，团队获评区域数字内容服务优秀案例，也持续参与本地的数字内容交流活动，
            把版本观察和品类选题拿出来跟同行交换意见。
          </p>
          <p class="about-partner-link">
            想了解某一期的观察结论，可以到
            <a href="/trends/">趋势与评测</a>
            翻一翻；需要确认入口或对照旧版，<a href="/download/">入口与版本</a> 那一页能直接点开。
          </p>
        </div>
        <ul class="about-partner-list">
          <li><strong>12 家</strong><span>区域内容团队按季度共建选题</span></li>
          <li><strong>31 个</strong><span>省级行政区的玩家访问过站点</span></li>
          <li><strong>优秀案例</strong><span>区域数字内容服务评选</span></li>
          <li><strong>持续参与</strong><span>本地数字内容交流活动</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="about-band about-cadence" aria-labelledby="cadence-title">
    <div class="container">
      <p class="eyebrow">更新节奏</p>
      <h2 id="cadence-title">更新不是喊口号</h2>
      <p class="about-intro">
        攻略库累计 3,200 余篇条目，每周固定更新 3 次。赶上大版本，24 小时内把对照说明和攻略索引补上，
        让急着换版本的人先看到变化落在哪儿。
      </p>
      <ul class="about-cadence-stats">
        <li><strong>3,200 余篇</strong><span>攻略库累计条目</span></li>
        <li><strong>每周 3 次</strong><span>固定更新频率</span></li>
        <li><strong>24 小时内</strong><span>大版本后补对照说明</span></li>
      </ul>
      <div class="about-cta">
        <a class="btn btn-primary" href="/download/">查看入口与版本</a>
        <a class="btn btn-ghost" href="/trends/">翻看平台评测</a>
        <a class="btn btn-ghost" href="/connect/">联系内容团队</a>
      </div>
      <p class="about-backlink"><a href="/">回到坐标首页</a>，从入口重新出发。</p>
    </div>
  </section>
</main>

.page-about {
  --about-line: rgba(185, 167, 255, 0.22);
  color: var(--ink-soft);
  padding-bottom: 0;
}

.page-about .breadcrumb {
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

.page-about .breadcrumb a {
  color: var(--lavender-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.page-about .breadcrumb a:hover,
.page-about .breadcrumb a:focus-visible {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}

.page-about .breadcrumb-sep {
  margin: 0 0.5rem;
  color: var(--ink-dim);
}

/* ---------- 首屏 ---------- */
.page-about .about-hero {
  padding: 1.5rem 0 2.75rem;
}

.page-about .about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7.4vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--paper-100);
  margin: 0.6rem 0 1rem;
  max-width: 16em;
  text-shadow: 2px 2px 0 rgba(255, 63, 164, 0.28);
}

.page-about .about-lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  max-width: 34em;
  color: var(--ink-soft);
}

.page-about .about-hstats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1.75rem 0 0;
  padding: 0;
  background: var(--about-line);
  border: 1px solid var(--about-line);
}

.page-about .about-hstats li {
  background: var(--night-900);
  padding: 0.9rem 1rem;
  min-width: 0;
}

.page-about .about-hstats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--cyan-400);
}

.page-about .about-hstats span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

/* ---------- 通用区块 ---------- */
.page-about .about-band {
  position: relative;
  padding-block: 2.75rem;
  border-top: 1px solid var(--about-line);
}

.page-about .about-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vw, 2.35rem);
  line-height: 1.3;
  color: var(--paper-100);
  margin: 0.5rem 0 0.9rem;
}

.page-about .about-intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 38em;
}

.page-about .about-figure {
  margin: 1.6rem 0 0;
  padding: 0.4rem;
  background: var(--night-700);
  border: 1px solid var(--line-cyan);
}

.page-about .about-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-about .about-road {
  background: linear-gradient(180deg, rgba(23, 20, 61, 0.72), rgba(8, 7, 27, 0));
}

/* ---------- 时间线 ---------- */
.page-about .about-nodes {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}

.page-about .about-node {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding-left: 1.5rem;
  min-width: 0;
}

.page-about .about-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--magenta-500), rgba(255, 63, 164, 0.06));
}

.page-about .about-year {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--magenta-500);
}

.page-about .about-paper {
  position: relative;
  background: var(--paper-100);
  color: var(--ink-900);
  padding: 1.2rem 1.15rem 1.3rem;
  border-top: 4px solid var(--cyan-400);
  box-shadow: var(--shadow-paper);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
}

.page-about .about-paper::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(36, 26, 46, 0.16);
  pointer-events: none;
}

.page-about .about-paper > * {
  position: relative;
  z-index: 1;
}

.page-about .about-paper h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-900);
}

.page-about .about-paper p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: rgba(36, 26, 46, 0.84);
}

.page-about .about-node:hover .about-paper {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 rgba(47, 243, 224, 0.5);
}

/* ---------- 三道工序 ---------- */
.page-about .about-desks {
  background: linear-gradient(180deg, rgba(255, 63, 164, 0.06), rgba(8, 7, 27, 0));
}

.page-about .about-steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-about .about-step {
  padding: 1.3rem 1.1rem 1.25rem;
  background: linear-gradient(180deg, rgba(47, 243, 224, 0.09), rgba(23, 20, 61, 0.92) 46%);
  border: 1px solid var(--about-line);
  border-top: 2px solid var(--orange-500);
  min-width: 0;
}

.page-about .about-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--orange-500);
  margin-bottom: 0.55rem;
}

.page-about .about-step h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--paper-100);
}

.page-about .about-step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ---------- 团队 ---------- */
.page-about .about-team {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
}

.page-about .about-role {
  padding: 1.1rem 1.05rem 1.15rem;
  background: rgba(23, 20, 61, 0.78);
  border: 1px solid var(--about-line);
  border-left: 3px solid var(--lavender-300);
  transition: border-color 0.16s ease, background 0.16s ease;
  min-width: 0;
}

.page-about .about-role:hover,
.page-about .about-role:focus-within {
  border-left-color: var(--cyan-400);
  background: rgba(47, 243, 224, 0.07);
}

.page-about .about-role h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--paper-100);
}

.page-about .about-role-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cyan-400);
}

.page-about .about-role p {
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-dim);
}

.page-about .about-role-meter {
  height: 6px;
  background: rgba(185, 167, 255, 0.16);
  overflow: hidden;
}

.page-about .about-role-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-400), var(--magenta-500));
}

/* ---------- 内容地图 ---------- */
.page-about .about-map {
  background: linear-gradient(180deg, rgba(23, 20, 61, 0.66), rgba(8, 7, 27, 0));
}

.page-about .about-map-grid {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-about .about-map-card {
  position: relative;
  padding: 1.1rem 1.05rem 1.15rem 1.15rem;
  background: rgba(23, 20, 61, 0.72);
  border: 1px solid var(--about-line);
  min-width: 0;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.page-about .about-map-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--magenta-500);
  transition: width 0.16s ease;
}

.page-about .about-map-card:hover {
  border-color: var(--line-cyan);
  transform: translateY(-2px);
}

.page-about .about-map-card:hover::before {
  width: 6px;
  background: var(--cyan-400);
}

.page-about .about-map-no {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--magenta-500);
  margin-bottom: 0.4rem;
}

.page-about .about-map-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--paper-100);
}

.page-about .about-map-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-dim);
}

/* ---------- 合作与认可 ---------- */
.page-about .about-partner {
  background: linear-gradient(180deg, rgba(255, 63, 164, 0.08), rgba(8, 7, 27, 0));
}

.page-about .about-partner-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.page-about .about-partner-main p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

.page-about .about-partner-main a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid var(--line-cyan);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.page-about .about-partner-main a:hover,
.page-about .about-partner-main a:focus-visible {
  color: var(--orange-500);
  border-bottom-color: var(--orange-500);
}

.page-about .about-partner-link {
  padding-top: 0.9rem;
  border-top: 1px solid var(--about-line);
  font-size: 0.9375rem;
}

.page-about .about-partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--about-line);
  border: 1px solid var(--about-line);
  align-self: start;
}

.page-about .about-partner-list li {
  background: var(--night-900);
  padding: 0.85rem 1rem;
}

.page-about .about-partner-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--lime-300);
  margin-bottom: 0.15rem;
}

.page-about .about-partner-list span {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ---------- 更新节奏 ---------- */
.page-about .about-cadence {
  background: linear-gradient(160deg, rgba(23, 20, 61, 0.95), rgba(8, 7, 27, 1) 70%);
}

.page-about .about-cadence-stats {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-about .about-cadence-stats li {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--orange-500);
  background: rgba(255, 154, 61, 0.08);
}

.page-about .about-cadence-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--paper-100);
  margin-bottom: 0.2rem;
}

.page-about .about-cadence-stats span {
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

.page-about .about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

.page-about .about-cta .btn {
  flex: 1 1 auto;
  min-width: 9.5rem;
  justify-content: center;
}

.page-about .about-backlink {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-dim);
}

.page-about .about-backlink a {
  color: var(--lavender-300);
  text-decoration: none;
  border-bottom: 1px solid var(--about-line);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.page-about .about-backlink a:hover,
.page-about .about-backlink a:focus-visible {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-about .about-hstats strong {
    font-size: 1.9rem;
  }

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

  .page-about .about-cadence-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 780px) {
  .page-about .about-hero {
    padding: 2rem 0 3.25rem;
  }

  .page-about .about-band {
    padding-block: 3.5rem;
  }

  .page-about .about-hstats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .page-about .about-node {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 2rem;
    padding-left: 0;
    align-items: start;
  }

  .page-about .about-node::before {
    left: 140px;
    top: 0.2rem;
    bottom: 0.2rem;
  }

  .page-about .about-year {
    font-size: 2.9rem;
    text-align: right;
    padding-right: 1rem;
  }

  .page-about .about-partner-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.25rem;
  }
}

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

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

  .page-about .about-node:nth-child(odd) .about-paper {
    transform: rotate(-0.35deg);
  }

  .page-about .about-node:nth-child(even) .about-paper {
    transform: rotate(0.35deg);
  }

  .page-about .about-node:hover .about-paper {
    transform: translateY(-3px) rotate(0deg);
  }

  .page-about .about-year {
    font-size: 3.4rem;
  }

  .page-about .about-lede {
    font-size: 1.0625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-about .about-node:hover .about-paper,
  .page-about .about-map-card:hover {
    transform: none;
  }

  .page-about .about-node:nth-child(odd) .about-paper,
  .page-about .about-node:nth-child(even) .about-paper {
    transform: none;
  }
}