.page-about {
  --ab-body-max: 780px;
  color: var(--c-ivory);
}

/* ============ 首屏 ============ */
.page-about .ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 6vw, 56px) 0 clamp(32px, 6vw, 68px);
  border-bottom: 2px solid var(--c-line);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(48% 58% at 16% 8%, rgba(168, 85, 247, 0.3), transparent 70%),
    radial-gradient(44% 54% at 86% 26%, rgba(34, 211, 238, 0.22), transparent 72%),
    radial-gradient(40% 40% at 60% 100%, rgba(122, 30, 60, 0.34), transparent 70%);
}

.page-about .ab-hero .arc-wrap {
  position: relative;
  z-index: 1;
}

.page-about .ab-hero .arc-crumbs {
  font-size: 13px;
  color: var(--c-mist);
}

.page-about .ab-hero .arc-crumbs__item a {
  color: var(--c-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.page-about .ab-hero .arc-crumbs__item a:hover,
.page-about .ab-hero .arc-crumbs__item a:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: var(--c-cyan);
}

.page-about .ab-hero__eyebrow {
  margin: 22px 0 14px;
  font-family: var(--f-index);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.page-about .ab-hero__title {
  margin: 0 0 22px;
  max-width: 20ch;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 7.6vw, 68px);
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.page-about .ab-hl {
  color: var(--c-violet);
  text-shadow: 0 0 22px rgba(168, 85, 247, 0.55);
}

.page-about .ab-hero__lead {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.78;
  color: #D8DEF4;
}

.page-about .ab-stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-about .ab-stats__item {
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  padding: 16px 18px 18px;
  box-shadow: var(--hard-violet);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.page-about .ab-stats__item:nth-child(2n) {
  box-shadow: var(--hard-cyan);
}

.page-about .ab-stats__item:hover {
  border-color: var(--c-lilac);
  transform: translateY(-2px);
}

.page-about .ab-stats__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1;
  color: var(--c-gold);
}

.page-about .ab-stats__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--c-mist);
}

@media (min-width: 720px) {
  .page-about .ab-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============ 坐标索引条 ============ */
.page-about .ab-coordbar-wrap {
  overflow-x: auto;
  border-bottom: 2px solid var(--c-line);
  background: linear-gradient(180deg, rgba(11, 26, 34, 0.96), rgba(7, 11, 24, 0.96));
}

.page-about .ab-coordbar-wrap .arc-coordbar {
  display: flex;
  align-items: stretch;
  padding: 8px 0;
  white-space: nowrap;
}

.page-about .ab-coordbar-wrap .arc-coordbar__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-right: 1px solid var(--c-line-soft);
  text-decoration: none;
  font-size: 13.5px;
  color: var(--c-mist);
  transition: color var(--t-fast), background var(--t-fast);
}

.page-about .ab-coordbar-wrap .arc-coordbar__item:last-child {
  border-right: 0;
}

.page-about .ab-coordbar-wrap .arc-coordbar__item:hover,
.page-about .ab-coordbar-wrap .arc-coordbar__item:focus-visible {
  color: var(--c-ivory);
  background: rgba(168, 85, 247, 0.16);
}

.page-about .ab-coordbar-wrap .arc-coordbar__code {
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
}

/* ============ 主布局 ============ */
.page-about .ab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-top: clamp(30px, 5vw, 58px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-about .ab-body {
  min-width: 0;
  max-width: var(--ab-body-max);
}

.page-about .ab-rail {
  display: none;
}

@media (min-width: 980px) {
  .page-about .ab-layout {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-about .ab-rail {
    display: block;
    position: sticky;
    top: 96px;
    border-left: 2px solid var(--c-line);
    padding-left: 16px;
  }
}

.page-about .ab-rail__title {
  margin: 0 0 14px;
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.page-about .ab-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-about .ab-rail__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 9px 4px 9px 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--c-mist);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), padding-left var(--t-fast);
}

.page-about .ab-rail__item:hover,
.page-about .ab-rail__item:focus-visible {
  color: var(--c-ivory);
  padding-left: 4px;
  border-bottom-color: var(--c-violet);
}

.page-about .ab-rail__code {
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
}

.page-about:has(#ab-stage:target) .ab-rail__item[href="#ab-stage"],
.page-about:has(#ab-team:target) .ab-rail__item[href="#ab-team"],
.page-about:has(#ab-content:target) .ab-rail__item[href="#ab-content"],
.page-about:has(#ab-review:target) .ab-rail__item[href="#ab-review"],
.page-about:has(#ab-partner:target) .ab-rail__item[href="#ab-partner"],
.page-about:has(#ab-loop:target) .ab-rail__item[href="#ab-loop"] {
  color: var(--c-ivory);
  padding-left: 4px;
  border-bottom-color: var(--c-violet);
}

/* ============ 章节通用 ============ */
.page-about .ab-sec {
  scroll-margin-top: 24px;
  padding: clamp(8px, 2vw, 14px) 0 clamp(26px, 4vw, 40px);
}

.page-about .ab-sec__head {
  margin-bottom: 18px;
}

.page-about .ab-sec__code {
  margin: 0 0 10px;
  font-family: var(--f-index);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
}

.page-about .ab-sec__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.16;
  letter-spacing: 0.01em;
}

.page-about .ab-prose {
  max-width: 62ch;
}

.page-about .ab-prose p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.78;
  color: #D8DEF4;
}

.page-about .ab-prose p:last-child {
  margin-bottom: 0;
}

.page-about .ab-inline-link {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.5);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.page-about .ab-inline-link:hover,
.page-about .ab-inline-link:focus-visible {
  color: var(--c-lilac);
  border-bottom-color: var(--c-lilac);
}

.page-about .ab-rule {
  height: 12px;
  margin: clamp(28px, 5vw, 46px) 0 0;
  background: linear-gradient(90deg,
    var(--c-violet) 0 26%,
    var(--c-cyan) 26% 52%,
    var(--c-gold) 52% 74%,
    var(--c-red) 74% 100%);
  opacity: 0.85;
}

.page-about .ab-quote {
  margin: 26px 0 0;
  padding: 18px 20px;
  border: 2px solid var(--c-violet);
  border-left-width: 8px;
  background: var(--c-deep);
  box-shadow: var(--hard-cyan);
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--c-ivory);
}

/* ============ 图片容器 ============ */
.page-about .ab-figure {
  margin: 24px 0 0;
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  box-shadow: var(--hard-violet);
  overflow: hidden;
}

.page-about .ab-figure .arc-frame__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-about .ab-figure .arc-frame__cap {
  display: block;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-mist);
  border-top: 1px solid var(--c-line-soft);
}

/* ============ 历程折线 ============ */
.page-about .ab-chart {
  margin: 24px 0 0;
  border: 2px solid var(--c-line);
  background: linear-gradient(180deg, rgba(11, 26, 34, 0.92), rgba(7, 11, 24, 0.92));
  box-shadow: var(--hard-violet);
  padding: 16px 12px 6px;
}

.page-about .ab-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-about .ab-chart__grid line {
  stroke: rgba(147, 162, 196, 0.16);
  stroke-width: 1;
}

.page-about .ab-chart__line {
  fill: none;
  stroke: var(--c-cyan);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.page-about .ab-chart__dots circle {
  fill: var(--c-void);
  stroke: var(--c-violet);
  stroke-width: 3;
}

.page-about .ab-chart__labels text {
  fill: var(--c-mist);
  font-family: var(--f-index);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.page-about .ab-chart__cap {
  margin: 6px 4px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-mist);
}

/* ============ 阶段折叠 ============ */
.page-about .ab-stages {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.page-about .ab-stages .arc-fold {
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.page-about .ab-stages .arc-fold:hover,
.page-about .ab-stages .arc-fold:focus-within {
  border-color: var(--c-lilac);
  transform: translateY(-2px);
}

.page-about .ab-stages .arc-fold__btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-ivory);
}

.page-about .ab-stages .arc-fold__panel {
  padding: 0 18px 18px;
}

.page-about .ab-stages .arc-fold__panel p {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--c-mist);
  max-width: 58ch;
}

.page-about .ab-stages .arc-fold__panel p:last-child {
  margin-bottom: 0;
}

.page-about .ab-fold__idx {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-gold);
  vertical-align: 2px;
}

/* ============ 团队花名册 ============ */
.page-about .ab-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 22px;
}

@media (min-width: 900px) {
  .page-about .ab-grid-2 {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
}

.page-about .ab-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-line);
}

.page-about .ab-roster__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num desc";
  gap: 4px 14px;
  padding: 15px 4px;
  border-bottom: 2px solid var(--c-line);
  transition: background var(--t-fast);
}

.page-about .ab-roster__row:hover {
  background: rgba(168, 85, 247, 0.09);
}

.page-about .ab-roster__num {
  grid-area: num;
  align-self: center;
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  color: var(--c-gold);
}

.page-about .ab-roster__name {
  grid-area: name;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ivory);
}

.page-about .ab-roster__desc {
  grid-area: desc;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-mist);
}

.page-about .ab-grid-2 .ab-figure {
  margin-top: 0;
}

/* ============ 五类内容占比 ============ */
.page-about .ab-bars {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .ab-bar {
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  padding: 13px 15px 14px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.page-about .ab-bar:hover,
.page-about .ab-bar:focus-within {
  border-color: var(--c-lilac);
  transform: translateY(-2px);
}

.page-about .ab-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-about .ab-bar__name {
  font-size: 16.5px;
  color: var(--c-ivory);
}

.page-about .ab-bar__num {
  font-family: var(--f-index);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
}

.page-about .ab-bar__track {
  display: block;
  height: 10px;
  background: rgba(147, 162, 196, 0.14);
  border: 1px solid var(--c-line-soft);
}

.page-about .ab-bar__fill {
  display: block;
  height: 100%;
  transition: filter var(--t-fast);
}

.page-about .ab-bar:hover .ab-bar__fill {
  filter: brightness(1.25);
}

.page-about .ab-bar:nth-child(1) .ab-bar__fill {
  width: 30%;
  background: linear-gradient(90deg, var(--c-violet), var(--c-lilac));
}

.page-about .ab-bar:nth-child(2) .ab-bar__fill {
  width: 24%;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-mint));
}

.page-about .ab-bar:nth-child(3) .ab-bar__fill {
  width: 20%;
  background: linear-gradient(90deg, var(--c-gold), #FFD98A);
}

.page-about .ab-bar:nth-child(4) .ab-bar__fill {
  width: 15%;
  background: linear-gradient(90deg, var(--c-red), #FF8AA0);
}

.page-about .ab-bar:nth-child(5) .ab-bar__fill {
  width: 11%;
  background: linear-gradient(90deg, var(--c-ruby), #C2416B);
}

.page-about .ab-bar__sample {
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-mist);
  opacity: 0.68;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.page-about .ab-bar:hover .ab-bar__sample,
.page-about .ab-bar:focus-within .ab-bar__sample {
  opacity: 1;
  color: var(--c-ivory);
}

/* ============ 上线流程 ============ */
.page-about .ab-flow {
  list-style: none;
  margin: 24px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--c-line);
}

.page-about .ab-flow__step {
  position: relative;
  padding: 0 0 24px;
}

.page-about .ab-flow__step:last-child {
  padding-bottom: 0;
}

.page-about .ab-flow__step::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--c-void);
  border: 2px solid var(--c-violet);
}

.page-about .ab-flow__no {
  font-family: var(--f-index);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
}

.page-about .ab-flow__title {
  margin: 6px 0 7px;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ivory);
}

.page-about .ab-flow__text {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-mist);
}

/* ============ 合作方式 ============ */
.page-about .ab-ways {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .ab-ways__item {
  border: 2px solid var(--c-line);
  border-left: 8px solid var(--c-violet);
  background: var(--c-deep);
  padding: 16px 18px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.page-about .ab-ways__item:nth-child(2) {
  border-left-color: var(--c-cyan);
}

.page-about .ab-ways__item:nth-child(3) {
  border-left-color: var(--c-gold);
}

.page-about .ab-ways__item:hover {
  transform: translateY(-2px);
  border-color: var(--c-lilac);
  border-left-color: var(--c-lilac);
}

.page-about .ab-ways__item h3 {
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ivory);
}

.page-about .ab-ways__item p {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-mist);
}

/* ============ 下一站 ============ */
.page-about .ab-next {
  margin-top: clamp(36px, 6vw, 60px);
  padding-top: 22px;
  border-top: 2px solid var(--c-line);
  display: grid;
  gap: 10px;
}

.page-about .ab-next .arc-next__link {
  display: block;
  padding: 14px 16px;
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  text-decoration: none;
  font-size: 15.5px;
  color: var(--c-ivory);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}

.page-about .ab-next .arc-next__link:hover,
.page-about .ab-next .arc-next__link:focus-visible {
  border-color: var(--c-violet);
  background: rgba(168, 85, 247, 0.1);
  transform: translateY(-2px);
}

.page-about .ab-next .arc-next__code {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
}

@media (min-width: 760px) {
  .page-about .ab-next {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============ 无障碍与动效偏好 ============ */
.page-about .arc-rail__item:focus-visible,
.page-about .ab-coordbar-wrap .arc-coordbar__item:focus-visible,
.page-about .ab-next .arc-next__link:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page-about * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}
<<<END>>>

等一下，检查一下有没有问题。

`@media (prefers-reduced-motion)` 里的 `.page-about *` 作用域限定没问题。

删掉 `.page-about .arc-rail__item:focus-visible`——这个“arc-rail”类根本不存在，是个笔误。应该改成 `.ab-rail__item`。得修正。

另外 `.page-about .arc-rail__item...` 这个写错的规则要不要修？它不会造成什么危害，只是条死 CSS 而已，但最好还是干净点。我重新输出一遍，换成正确的。

再核对一下规则 15：所有数字都直接放在文本里了，没问题。

再检查一遍：用到的变量——`--c-void`、`--c-deep`、`--c-violet`、`--c-cyan`、`--c-red`、`--c-gold`、`--c-ruby`、`--c-ivory`、`--c-mist`、`--c-lilac`、`--c-mint`、`--c-line`、`--c-line-soft`、`--f-display`、`--f-body`、`--f-index`、`--t-fast`、`--hard-violet`、`--hard-cyan`，这些全都在 css_variables 列表里，没问题。

我在 `.page-about` 作用域里自己定义了一个 `--ab-body-max`，也合法。

HTML 里用到的 `.arc-crumbs__item`、`.arc-coordbar__item`，估计共享 CSS 里已经有了，问题不大。

接下来输出最终版本，把那处错误修掉。
<main id="main-content" class="page-about">

  <section class="ab-hero" aria-labelledby="ab-hero-title">
    <div class="arc-wrap">
      <nav class="arc-crumbs" aria-label="所在位置">
        <span class="arc-crumbs__item"><a href="/">大厅首页</a></span>
        <span class="arc-crumbs__item">平台档案</span>
      </nav>
      <p class="ab-hero__eyebrow">档案索引 A0 · 平台档案</p>
      <h1 class="ab-hero__title" id="ab-hero-title">一间内容小组，长成了双端运营的<span class="ab-hl">电玩城游戏厅</span></h1>
      <p class="ab-hero__lead">你在站里查到的入口、牌型组合和版本更新，都是这支团队一条一条整理出来的。从最早归档街机玩法，到现在同时维护安卓与 iOS 两条客户端线，站内长期保持 260 余款内容在线，注册用户累计 480 万。想判断值不值得长期留下，看看下面这几条线各自是谁在做、怎么做的。</p>
      <ul class="ab-stats">
        <li class="ab-stats__item">
          <span class="ab-stats__num">68</span>
          <span class="ab-stats__label">运营与内容团队人数</span>
        </li>
        <li class="ab-stats__item">
          <span class="ab-stats__num">12</span>
          <span class="ab-stats__label">名客服在工作日响应</span>
        </li>
        <li class="ab-stats__item">
          <span class="ab-stats__num">900+</span>
          <span class="ab-stats__label">轮已执行的入口指引</span>
        </li>
        <li class="ab-stats__item">
          <span class="ab-stats__num">18</span>
          <span class="ab-stats__label">家长期供稿的工作室</span>
        </li>
      </ul>
    </div>
  </section>

  <div class="ab-coordbar-wrap">
    <div class="arc-wrap">
      <nav class="arc-coordbar" aria-label="本页区块索引">
        <a class="arc-coordbar__item" href="#ab-stage"><span class="arc-coordbar__code">A1</span><span class="arc-coordbar__label">运营历程</span></a>
        <a class="arc-coordbar__item" href="#ab-team"><span class="arc-coordbar__code">A2</span><span class="arc-coordbar__label">团队分工</span></a>
        <a class="arc-coordbar__item" href="#ab-content"><span class="arc-coordbar__code">A3</span><span class="arc-coordbar__label">内容分类</span></a>
        <a class="arc-coordbar__item" href="#ab-review"><span class="arc-coordbar__code">A4</span><span class="arc-coordbar__label">上线流程</span></a>
        <a class="arc-coordbar__item" href="#ab-partner"><span class="arc-coordbar__code">A5</span><span class="arc-coordbar__label">内容来源</span></a>
        <a class="arc-coordbar__item" href="#ab-loop"><span class="arc-coordbar__code">A6</span><span class="arc-coordbar__label">版本迭代</span></a>
      </nav>
    </div>
  </div>

  <div class="arc-wrap ab-layout">

    <aside class="ab-rail" aria-label="档案章节">
      <p class="ab-rail__title">档案索引</p>
      <ul class="ab-rail__list">
        <li><a class="ab-rail__item" href="#ab-stage"><span class="ab-rail__code">A1</span><span class="ab-rail__label">运营历程</span></a></li>
        <li><a class="ab-rail__item" href="#ab-team"><span class="ab-rail__code">A2</span><span class="ab-rail__label">团队分工</span></a></li>
        <li><a class="ab-rail__item" href="#ab-content"><span class="ab-rail__code">A3</span><span class="ab-rail__label">内容分类</span></a></li>
        <li><a class="ab-rail__item" href="#ab-review"><span class="ab-rail__code">A4</span><span class="ab-rail__label">上线流程</span></a></li>
        <li><a class="ab-rail__item" href="#ab-partner"><span class="ab-rail__code">A5</span><span class="ab-rail__label">内容来源</span></a></li>
        <li><a class="ab-rail__item" href="#ab-loop"><span class="ab-rail__code">A6</span><span class="ab-rail__label">版本迭代</span></a></li>
      </ul>
    </aside>

    <div class="ab-body">

      <section class="ab-sec" id="ab-stage" aria-labelledby="ab-stage-h">
        <header class="ab-sec__head">
          <p class="ab-sec__code">A1 / 运营历程</p>
          <h2 class="ab-sec__title" id="ab-stage-h">三个阶段，把街机厅的热闹搬到线上</h2>
        </header>
        <div class="ab-prose">
          <p>平台不是一夜之间冒出来的。最早只有一台测试机、两块拆下来的街机面板和一堆没归好类的玩法资料，做的是最笨的活：把玩家在论坛里反复问的问题，整理成能直接查的条目。从那时候走到今天的双端大厅，中间跨了三个阶段。</p>
        </div>

        <figure class="ab-chart">
          <svg class="ab-chart__svg" viewBox="0 0 640 220" role="img" aria-label="三个阶段内容规模增长示意折线图，起步、成长、现在依次抬升">
            <defs>
              <linearGradient id="abGlow" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#22D3EE" stop-opacity="0.34"></stop>
                <stop offset="100%" stop-color="#22D3EE" stop-opacity="0"></stop>
              </linearGradient>
            </defs>
            <g class="ab-chart__grid">
              <line x1="40" y1="66" x2="600" y2="66"></line>
              <line x1="40" y1="112" x2="600" y2="112"></line>
              <line x1="40" y1="158" x2="600" y2="158"></line>
            </g>
            <path class="ab-chart__area" d="M80 168 L320 112 L560 56 L560 190 L80 190 Z" fill="url(#abGlow)"></path>
            <polyline class="ab-chart__line" points="80,168 320,112 560,56"></polyline>
            <g class="ab-chart__dots">
              <circle cx="80" cy="168" r="6"></circle>
              <circle cx="320" cy="112" r="6"></circle>
              <circle cx="560" cy="56" r="6"></circle>
            </g>
            <g class="ab-chart__labels">
              <text x="80" y="206">起步阶段</text>
              <text x="320" y="206">成长阶段</text>
              <text x="560" y="206">现在</text>
            </g>
          </svg>
          <figcaption class="ab-chart__cap">三个阶段的内容规模走势：从玩法条目的零散归档，到覆盖五大类的常态化运营。</figcaption>
        </figure>

        <div class="ab-stages">
          <div class="arc-fold">
            <button class="arc-fold__btn" type="button" aria-expanded="false">
              <span><span class="ab-fold__idx">阶段一 · 起步</span>把散落的玩法整理成能查的条目</span>
            </button>
            <div class="arc-fold__panel" hidden>
              <p>最初的一批内容全是街机玩法的整理与归档。每条条目都要求写清玩法规则、上手难点和最容易踩的坑，不做一句话的敷衍条目。这批内容靠玩家之间口口相传，带来了最早一批常来的用户。</p>
              <p>这个阶段定下的写法一直沿用到今天：先说清楚怎么玩，再说清楚什么时候用得上。</p>
            </div>
          </div>

          <div class="arc-fold">
            <button class="arc-fold__btn" type="button" aria-expanded="false">
              <span><span class="ab-fold__idx">阶段二 · 成长</span>从街机扩到棋牌、休闲与竞速</span>
            </button>
            <div class="arc-fold__panel" hidden>
              <p>内容从街机一类扩开到棋牌、休闲和竞速，安卓与 iOS 两条客户端线同步上线，同一个版本号两端一起发。也是从这时起，入口指引开始按固定节奏更新，什么时候来都能拿到当轮有效的路径，不用再靠别人转告。</p>
              <p>团队从几个人扩到几十人，内容组、技术组和客服组第一次分开建制。</p>
            </div>
          </div>

          <div class="arc-fold">
            <button class="arc-fold__btn" type="button" aria-expanded="false">
              <span><span class="ab-fold__idx">阶段三 · 现在</span>五大类内容常态化在线</span>
            </button>
            <div class="arc-fold__panel" hidden>
              <p>站内长期保持 260 余款内容在线，街机、棋牌、休闲、竞速、音乐节奏五类各自有稳定的更新线。入口指引的 48 小时一轮已经连续执行 900 多轮，成为一条不用提醒也会自己往前走的节奏线。</p>
              <p>客户端保持每月大约一次版本迭代，用户规模累计到 480 万。</p>
            </div>
          </div>
        </div>
      </section>

      <div class="ab-rule" aria-hidden="true"></div>

      <section class="ab-sec" id="ab-team" aria-labelledby="ab-team-h">
        <header class="ab-sec__head">
          <p class="ab-sec__code">A2 / 团队分工</p>
          <h2 class="ab-sec__title" id="ab-team-h">68 个人分四个组，各盯一段流程</h2>
        </header>
        <div class="ab-prose">
          <p>团队总人数 68，按活儿分成四个组。这样的好处是出了问题能直接找到人：内容写得对不对找内容组，客户端装不上找技术组，入口路径有变化找调度那边，而内容里的错漏，审核组会在上线之前先拦下来。</p>
        </div>

        <div class="ab-grid-2">
          <ul class="ab-roster">
            <li class="ab-roster__row">
              <span class="ab-roster__num">30</span>
              <span class="ab-roster__name">内容组</span>
              <span class="ab-roster__desc">选题、玩法梳理、专题撰写与资讯归档，站内所有文字内容的第一道产出方。</span>
            </li>
            <li class="ab-roster__row">
              <span class="ab-roster__num">14</span>
              <span class="ab-roster__name">技术组</span>
              <span class="ab-roster__desc">双端客户端迭代、入口指引调度与记录查询的筛选功能，让同一个版本在两端一起发。</span>
            </li>
            <li class="ab-roster__row">
              <span class="ab-roster__num">12</span>
              <span class="ab-roster__name">客服组</span>
              <span class="ab-roster__desc">工作日 9:00-18:00 在线，处理下载卡住、入口找不到、牌型查不到这一类具体问题。</span>
            </li>
            <li class="ab-roster__row">
              <span class="ab-roster__num">12</span>
              <span class="ab-roster__name">审核组</span>
              <span class="ab-roster__desc">不参与创作，只负责挑毛病，是三人复核与两轮校对机制的主要执行方。</span>
            </li>
          </ul>

          <figure class="arc-frame ab-figure">
            <img class="arc-frame__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="摆满街机面板与测试手机的工作台一角，暖色灯光下堆着记录用的纸稿" loading="lazy" decoding="async">
            <figcaption class="arc-frame__cap">内容组与审核组共用的工作台，街机面板和两台测试机常年摆在这里。</figcaption>
          </figure>
        </div>

        <p class="ab-quote">内容组人数最多，因为它同时管着写和归档；审核组人数和技术组持平，是因为每一条内容上线前都要有三个人独立看过。</p>
      </section>

      <div class="ab-rule" aria-hidden="true"></div>

      <section class="ab-sec" id="ab-content" aria-labelledby="ab-content-h">
        <header class="ab-sec__head">
          <p class="ab-sec__code">A3 / 内容分类</p>
          <h2 class="ab-sec__title" id="ab-content-h">260 余款内容，按玩法气质分成五类</h2>
        </header>
        <div class="ab-prose">
          <p>分类的依据不是上线时间，而是玩起来需要投入多少注意力。街机和棋牌要动脑、能坐得住，休闲和竞速适合碎片时间，音乐节奏偏手感与节奏感。每类的更新节奏也不一样，你可以按自己常玩的时段去挑。</p>
        </div>

        <ul class="ab-bars">
          <li class="ab-bar">
            <div class="ab-bar__head"><span class="ab-bar__name">街机</span><span class="ab-bar__num">78 款 · 30%</span></div>
            <div class="ab-bar__track"><span class="ab-bar__fill"></span></div>
            <p class="ab-bar__sample">格斗对战 · 飞行射击 · 经典闯关</p>
          </li>
          <li class="ab-bar">
            <div class="ab-bar__head"><span class="ab-bar__name">棋牌</span><span class="ab-bar__num">62 款 · 24%</span></div>
            <div class="ab-bar__track"><span class="ab-bar__fill"></span></div>
            <p class="ab-bar__sample">对牌型查询 · 12 类牌型 · 58 种组合示例</p>
          </li>
          <li class="ab-bar">
            <div class="ab-bar__head"><span class="ab-bar__name">休闲</span><span class="ab-bar__num">52 款 · 20%</span></div>
            <div class="ab-bar__track"><span class="ab-bar__fill"></span></div>
            <p class="ab-bar__sample">消除连消 · 益智解谜 · 轻量闯关</p>
          </li>
          <li class="ab-bar">
            <div class="ab-bar__head"><span class="ab-bar__name">竞速</span><span class="ab-bar__num">38 款 · 15%</span></div>
            <div class="ab-bar__track"><span class="ab-bar__fill"></span></div>
            <p class="ab-bar__sample">赛道计时 · 漂移手感 · 短局对抗</p>
          </li>
          <li class="ab-bar">
            <div class="ab-bar__head"><span class="ab-bar__name">音乐节奏</span><span class="ab-bar__num">30 款 · 11%</span></div>
            <div class="ab-bar__track"><span class="ab-bar__fill"></span></div>
            <p class="ab-bar__sample">节拍连击 · 曲目挑战 · 手感校准</p>
          </li>
        </ul>

        <figure class="arc-frame arc-frame--wide ab-figure">
          <img class="arc-frame__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="五类电玩内容的图标与棋牌牌面拼贴示意图，五组颜色区分明确" loading="lazy" decoding="async">
          <figcaption class="arc-frame__cap">五大类内容的图标与牌面拼贴，颜色对应站内的分类标签。</figcaption>
        </figure>

        <div class="ab-prose">
          <p>街机类是体量最大的一类，格斗对战、飞行射击和经典闯关是三个长期有人在玩的入口；棋牌类围绕对牌型查询展开，把 12 类牌型整理成 58 种常见组合示例，开局前花两分钟就能把牌面理清楚；音乐节奏类更新最慢，但每次上新的内容都偏硬核，留给愿意反复练手感的人。</p>
        </div>
      </section>

      <div class="ab-rule" aria-hidden="true"></div>

      <section class="ab-sec" id="ab-review" aria-labelledby="ab-review-h">
        <header class="ab-sec__head">
          <p class="ab-sec__code">A4 / 上线流程</p>
          <h2 class="ab-sec__title" id="ab-review-h">一条内容出现在站内之前，要走完五步</h2>
        </header>
        <div class="ab-prose">
          <p>你随手点开的一条资讯，背后是一套固定的流程。从想法到上线平均三天，中间有三个不同组的人分别看过一遍，还有两轮专门的校对。</p>
        </div>

        <ol class="ab-flow">
          <li class="ab-flow__step">
            <span class="ab-flow__no">STEP 01</span>
            <h3 class="ab-flow__title">选题排期</h3>
            <p class="ab-flow__text">每周一次选题会，按入口指引、牌型查询、版本迭代、赛季专题四个方向排期，避免同一类内容在同一周堆在一起。</p>
          </li>
          <li class="ab-flow__step">
            <span class="ab-flow__no">STEP 02</span>
            <h3 class="ab-flow__title">初稿与实操记录</h3>
            <p class="ab-flow__text">内容组完成初稿，玩法类内容必须附上实际试玩记录，写到的每一个数值都要能在客户端里复现。</p>
          </li>
          <li class="ab-flow__step">
            <span class="ab-flow__no">STEP 03</span>
            <h3 class="ab-flow__title">三人独立复核</h3>
            <p class="ab-flow__text">内容组、审核组、技术组各出一人，各看各的角度，分别标注问题后并到一张表上，不合并意见、不互相参考。</p>
          </li>
          <li class="ab-flow__step">
            <span class="ab-flow__no">STEP 04</span>
            <h3 class="ab-flow__title">两轮校对</h3>
            <p class="ab-flow__text">第一轮核事实与数字，第二轮看表述与错别字。两轮都过了才进发布队列，任何一轮打回都要重走。</p>
          </li>
          <li class="ab-flow__step">
            <span class="ab-flow__no">STEP 05</span>
            <h3 class="ab-flow__title">上线与轮次刷新</h3>
            <p class="ab-flow__text">内容上线后进入当期入口指引，48 小时后随下一轮一起刷新，过期路径会被替换而不是继续挂着。</p>
          </li>
        </ol>

        <figure class="arc-frame ab-figure">
          <img class="arc-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="白板上画着三人复核与两轮校对的流程草图，旁边贴着几张标注过的打印稿" loading="lazy" decoding="async">
          <figcaption class="arc-frame__cap">审核组白板上的流程草图，每一步旁边都标着回头重做的条件。</figcaption>
        </figure>
      </section>

      <div class="ab-rule" aria-hidden="true"></div>

      <section class="ab-sec" id="ab-partner" aria-labelledby="ab-partner-h">
        <header class="ab-sec__head">
          <p class="ab-sec__code">A5 / 内容来源</p>
          <h2 class="ab-sec__title" id="ab-partner-h">18 家工作室，撑起站内约六成新增玩法</h2>
        </header>
        <div class="ab-prose">
          <p>站内的玩法内容不是全部由自己人写。18 家长期合作的工作室分布在街机、棋牌、竞速和音乐节奏几条线上，合计承担了约六成的新增玩法内容，其余由内容组自制。这些工作室多数从平台早期就开始供稿，最久的一批已经跟了好几年。</p>
        </div>

        <ul class="ab-ways">
          <li class="ab-ways__item">
            <h3>内容供给</h3>
            <p>工作室按季度交付玩法内容与实测记录，站内负责复核、归档与上线，供稿方的署名会保留在内容页里。</p>
          </li>
          <li class="ab-ways__item">
            <h3>联合选题</h3>
            <p>围绕赛季专题一起定方向，工作室出玩法，内容组出结构和阅读顺序，双方在同一个排期表上推进。</p>
          </li>
          <li class="ab-ways__item">
            <h3>节奏共建</h3>
            <p>把工作室自己的更新节奏接进站内的版本迭代排期，两边同步发版，避免玩家在两处看到不一致的说明。</p>
          </li>
        </ul>

        <div class="ab-prose">
          <p>如果你手上也有稳定的内容产出能力，想谈稿件、专题或渠道层面的合作，可以从<a class="ab-inline-link" href="/cooperation/">合作联系页</a>开始，那边写清了对接方式和需要的材料。</p>
        </div>
      </section>

      <div class="ab-rule" aria-hidden="true"></div>

      <section class="ab-sec" id="ab-loop" aria-labelledby="ab-loop-h">
        <header class="ab-sec__head">
          <p class="ab-sec__code">A6 / 版本迭代</p>
          <h2 class="ab-sec__title" id="ab-loop-h">每月一次迭代，把你提的意见排进计划</h2>
        </header>
        <div class="ab-prose">
          <p>客户端保持每月大约一次版本迭代，当前主版本为 4.2。排进迭代计划的需求里，有相当一部分来自用户的直接反馈：客服邮箱收到的具体问题、站内反馈入口提交的建议，以及与合作工作室每周例会上提到的手感问题，都会被汇总到同一份清单里。</p>
        </div>

        <ul class="ab-ways">
          <li class="ab-ways__item">
            <h3>谁在收</h3>
            <p>客服组把重复出现的问题挑出来单独标记，同一条问题被多人提到会优先处理，不会因为表述不同被当成新问题。</p>
          </li>
          <li class="ab-ways__item">
            <h3>谁来判</h3>
            <p>内容组判断是内容写得不清楚还是体验本身的问题，技术组评估改动范围，能在当月解决的直接进排期，改动大的排到下一版。</p>
          </li>
          <li class="ab-ways__item">
            <h3>怎么告诉你</h3>
            <p>每个版本上线后都会发布更新说明，逐条写清新增了什么、调整了什么，可以在<a class="ab-inline-link" href="/press/">资讯时间轴</a>里按版本翻回去看。</p>
          </li>
        </ul>

        <p class="ab-quote">单条资讯发布前经过两轮校对，这条规矩从平台起步阶段一直延续到现在，没有因为更新节奏加快而省掉。</p>
      </section>

      <nav class="arc-next ab-next" aria-label="继续浏览">
        <a class="arc-next__link" href="/guide/"><span class="arc-next__code">B1</span>新手指引 · 第一次找入口怎么走</a>
        <a class="arc-next__link" href="/catalog/"><span class="arc-next__code">B2</span>下载与目录 · 双端安装与内容清单</a>
        <a class="arc-next__link" href="/press/"><span class="arc-next__code">B3</span>资讯时间轴 · 入口指引与版本更新</a>
      </nav>

    </div>
  </div>

</main>

.page-about {
  --ab-body-max: 780px;
  color: var(--c-ivory);
}

/* ============ 首屏 ============ */
.page-about .ab-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 6vw, 56px) 0 clamp(32px, 6vw, 68px);
  border-bottom: 2px solid var(--c-line);
}

.page-about .ab-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(48% 58% at 16% 8%, rgba(168, 85, 247, 0.3), transparent 70%),
    radial-gradient(44% 54% at 86% 26%, rgba(34, 211, 238, 0.22), transparent 72%),
    radial-gradient(40% 40% at 60% 100%, rgba(122, 30, 60, 0.34), transparent 70%);
}

.page-about .ab-hero .arc-wrap {
  position: relative;
  z-index: 1;
}

.page-about .ab-hero .arc-crumbs {
  font-size: 13px;
  color: var(--c-mist);
}

.page-about .ab-hero .arc-crumbs__item a {
  color: var(--c-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.page-about .ab-hero .arc-crumbs__item a:hover,
.page-about .ab-hero .arc-crumbs__item a:focus-visible {
  color: var(--c-cyan);
  border-bottom-color: var(--c-cyan);
}

.page-about .ab-hero__eyebrow {
  margin: 22px 0 14px;
  font-family: var(--f-index);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.page-about .ab-hero__title {
  margin: 0 0 22px;
  max-width: 20ch;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 7.6vw, 68px);
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.page-about .ab-hl {
  color: var(--c-violet);
  text-shadow: 0 0 22px rgba(168, 85, 247, 0.55);
}

.page-about .ab-hero__lead {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.78;
  color: #D8DEF4;
}

.page-about .ab-stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-about .ab-stats__item {
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  padding: 16px 18px 18px;
  box-shadow: var(--hard-violet);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.page-about .ab-stats__item:nth-child(2n) {
  box-shadow: var(--hard-cyan);
}

.page-about .ab-stats__item:hover {
  border-color: var(--c-lilac);
  transform: translateY(-2px);
}

.page-about .ab-stats__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1;
  color: var(--c-gold);
}

.page-about .ab-stats__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--c-mist);
}

@media (min-width: 720px) {
  .page-about .ab-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============ 坐标索引条 ============ */
.page-about .ab-coordbar-wrap {
  overflow-x: auto;
  border-bottom: 2px solid var(--c-line);
  background: linear-gradient(180deg, rgba(11, 26, 34, 0.96), rgba(7, 11, 24, 0.96));
}

.page-about .ab-coordbar-wrap .arc-coordbar {
  display: flex;
  align-items: stretch;
  padding: 8px 0;
  white-space: nowrap;
}

.page-about .ab-coordbar-wrap .arc-coordbar__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-right: 1px solid var(--c-line-soft);
  text-decoration: none;
  font-size: 13.5px;
  color: var(--c-mist);
  transition: color var(--t-fast), background var(--t-fast);
}

.page-about .ab-coordbar-wrap .arc-coordbar__item:last-child {
  border-right: 0;
}

.page-about .ab-coordbar-wrap .arc-coordbar__item:hover,
.page-about .ab-coordbar-wrap .arc-coordbar__item:focus-visible {
  color: var(--c-ivory);
  background: rgba(168, 85, 247, 0.16);
}

.page-about .ab-coordbar-wrap .arc-coordbar__code {
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
}

/* ============ 主布局 ============ */
.page-about .ab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-top: clamp(30px, 5vw, 58px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

.page-about .ab-body {
  min-width: 0;
  max-width: var(--ab-body-max);
}

.page-about .ab-rail {
  display: none;
}

@media (min-width: 980px) {
  .page-about .ab-layout {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .page-about .ab-rail {
    display: block;
    position: sticky;
    top: 96px;
    border-left: 2px solid var(--c-line);
    padding-left: 16px;
  }
}

.page-about .ab-rail__title {
  margin: 0 0 14px;
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.page-about .ab-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-about .ab-rail__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 9px 4px 9px 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--c-mist);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), padding-left var(--t-fast);
}

.page-about .ab-rail__item:hover,
.page-about .ab-rail__item:focus-visible {
  color: var(--c-ivory);
  padding-left: 4px;
  border-bottom-color: var(--c-violet);
}

.page-about .ab-rail__code {
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-cyan);
}

.page-about:has(#ab-stage:target) .ab-rail__item[href="#ab-stage"],
.page-about:has(#ab-team:target) .ab-rail__item[href="#ab-team"],
.page-about:has(#ab-content:target) .ab-rail__item[href="#ab-content"],
.page-about:has(#ab-review:target) .ab-rail__item[href="#ab-review"],
.page-about:has(#ab-partner:target) .ab-rail__item[href="#ab-partner"],
.page-about:has(#ab-loop:target) .ab-rail__item[href="#ab-loop"] {
  color: var(--c-ivory);
  padding-left: 4px;
  border-bottom-color: var(--c-violet);
}

/* ============ 章节通用 ============ */
.page-about .ab-sec {
  scroll-margin-top: 24px;
  padding: clamp(8px, 2vw, 14px) 0 clamp(26px, 4vw, 40px);
}

.page-about .ab-sec__head {
  margin-bottom: 18px;
}

.page-about .ab-sec__code {
  margin: 0 0 10px;
  font-family: var(--f-index);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
}

.page-about .ab-sec__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 4.6vw, 40px);
  line-height: 1.16;
  letter-spacing: 0.01em;
}

.page-about .ab-prose {
  max-width: 62ch;
}

.page-about .ab-prose p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.78;
  color: #D8DEF4;
}

.page-about .ab-prose p:last-child {
  margin-bottom: 0;
}

.page-about .ab-inline-link {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.5);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.page-about .ab-inline-link:hover,
.page-about .ab-inline-link:focus-visible {
  color: var(--c-lilac);
  border-bottom-color: var(--c-lilac);
}

.page-about .ab-rule {
  height: 12px;
  margin: clamp(28px, 5vw, 46px) 0 0;
  background: linear-gradient(90deg,
    var(--c-violet) 0 26%,
    var(--c-cyan) 26% 52%,
    var(--c-gold) 52% 74%,
    var(--c-red) 74% 100%);
  opacity: 0.85;
}

.page-about .ab-quote {
  margin: 26px 0 0;
  padding: 18px 20px;
  border: 2px solid var(--c-violet);
  border-left-width: 8px;
  background: var(--c-deep);
  box-shadow: var(--hard-cyan);
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--c-ivory);
}

/* ============ 图片容器 ============ */
.page-about .ab-figure {
  margin: 24px 0 0;
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  box-shadow: var(--hard-violet);
  overflow: hidden;
}

.page-about .ab-figure .arc-frame__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-about .ab-figure .arc-frame__cap {
  display: block;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-mist);
  border-top: 1px solid var(--c-line-soft);
}

/* ============ 历程折线 ============ */
.page-about .ab-chart {
  margin: 24px 0 0;
  border: 2px solid var(--c-line);
  background: linear-gradient(180deg, rgba(11, 26, 34, 0.92), rgba(7, 11, 24, 0.92));
  box-shadow: var(--hard-violet);
  padding: 16px 12px 6px;
}

.page-about .ab-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-about .ab-chart__grid line {
  stroke: rgba(147, 162, 196, 0.16);
  stroke-width: 1;
}

.page-about .ab-chart__line {
  fill: none;
  stroke: var(--c-cyan);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.page-about .ab-chart__dots circle {
  fill: var(--c-void);
  stroke: var(--c-violet);
  stroke-width: 3;
}

.page-about .ab-chart__labels text {
  fill: var(--c-mist);
  font-family: var(--f-index);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.page-about .ab-chart__cap {
  margin: 6px 4px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-mist);
}

/* ============ 阶段折叠 ============ */
.page-about .ab-stages {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.page-about .ab-stages .arc-fold {
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.page-about .ab-stages .arc-fold:hover,
.page-about .ab-stages .arc-fold:focus-within {
  border-color: var(--c-lilac);
  transform: translateY(-2px);
}

.page-about .ab-stages .arc-fold__btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-ivory);
}

.page-about .ab-stages .arc-fold__panel {
  padding: 0 18px 18px;
}

.page-about .ab-stages .arc-fold__panel p {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--c-mist);
  max-width: 58ch;
}

.page-about .ab-stages .arc-fold__panel p:last-child {
  margin-bottom: 0;
}

.page-about .ab-fold__idx {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-gold);
  vertical-align: 2px;
}

/* ============ 团队花名册 ============ */
.page-about .ab-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 22px;
}

@media (min-width: 900px) {
  .page-about .ab-grid-2 {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
}

.page-about .ab-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-line);
}

.page-about .ab-roster__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "num name"
    "num desc";
  gap: 4px 14px;
  padding: 15px 4px;
  border-bottom: 2px solid var(--c-line);
  transition: background var(--t-fast);
}

.page-about .ab-roster__row:hover {
  background: rgba(168, 85, 247, 0.09);
}

.page-about .ab-roster__num {
  grid-area: num;
  align-self: center;
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  color: var(--c-gold);
}

.page-about .ab-roster__name {
  grid-area: name;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ivory);
}

.page-about .ab-roster__desc {
  grid-area: desc;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-mist);
}

.page-about .ab-grid-2 .ab-figure {
  margin-top: 0;
}

/* ============ 五类内容占比 ============ */
.page-about .ab-bars {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .ab-bar {
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  padding: 13px 15px 14px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.page-about .ab-bar:hover,
.page-about .ab-bar:focus-within {
  border-color: var(--c-lilac);
  transform: translateY(-2px);
}

.page-about .ab-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-about .ab-bar__name {
  font-size: 16.5px;
  color: var(--c-ivory);
}

.page-about .ab-bar__num {
  font-family: var(--f-index);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
}

.page-about .ab-bar__track {
  display: block;
  height: 10px;
  background: rgba(147, 162, 196, 0.14);
  border: 1px solid var(--c-line-soft);
}

.page-about .ab-bar__fill {
  display: block;
  height: 100%;
  transition: filter var(--t-fast);
}

.page-about .ab-bar:hover .ab-bar__fill {
  filter: brightness(1.25);
}

.page-about .ab-bar:nth-child(1) .ab-bar__fill {
  width: 30%;
  background: linear-gradient(90deg, var(--c-violet), var(--c-lilac));
}

.page-about .ab-bar:nth-child(2) .ab-bar__fill {
  width: 24%;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-mint));
}

.page-about .ab-bar:nth-child(3) .ab-bar__fill {
  width: 20%;
  background: linear-gradient(90deg, var(--c-gold), #FFD98A);
}

.page-about .ab-bar:nth-child(4) .ab-bar__fill {
  width: 15%;
  background: linear-gradient(90deg, var(--c-red), #FF8AA0);
}

.page-about .ab-bar:nth-child(5) .ab-bar__fill {
  width: 11%;
  background: linear-gradient(90deg, var(--c-ruby), #C2416B);
}

.page-about .ab-bar__sample {
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-mist);
  opacity: 0.68;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.page-about .ab-bar:hover .ab-bar__sample,
.page-about .ab-bar:focus-within .ab-bar__sample {
  opacity: 1;
  color: var(--c-ivory);
}

/* ============ 上线流程 ============ */
.page-about .ab-flow {
  list-style: none;
  margin: 24px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--c-line);
}

.page-about .ab-flow__step {
  position: relative;
  padding: 0 0 24px;
}

.page-about .ab-flow__step:last-child {
  padding-bottom: 0;
}

.page-about .ab-flow__step::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--c-void);
  border: 2px solid var(--c-violet);
}

.page-about .ab-flow__no {
  font-family: var(--f-index);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
}

.page-about .ab-flow__title {
  margin: 6px 0 7px;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ivory);
}

.page-about .ab-flow__text {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-mist);
}

/* ============ 合作方式 ============ */
.page-about .ab-ways {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-about .ab-ways__item {
  border: 2px solid var(--c-line);
  border-left: 8px solid var(--c-violet);
  background: var(--c-deep);
  padding: 16px 18px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}

.page-about .ab-ways__item:nth-child(2) {
  border-left-color: var(--c-cyan);
}

.page-about .ab-ways__item:nth-child(3) {
  border-left-color: var(--c-gold);
}

.page-about .ab-ways__item:hover {
  transform: translateY(-2px);
  border-color: var(--c-lilac);
  border-left-color: var(--c-lilac);
}

.page-about .ab-ways__item h3 {
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ivory);
}

.page-about .ab-ways__item p {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-mist);
}

/* ============ 下一站 ============ */
.page-about .ab-next {
  margin-top: clamp(36px, 6vw, 60px);
  padding-top: 22px;
  border-top: 2px solid var(--c-line);
  display: grid;
  gap: 10px;
}

.page-about .ab-next .arc-next__link {
  display: block;
  padding: 14px 16px;
  border: 2px solid var(--c-line);
  background: var(--c-deep);
  text-decoration: none;
  font-size: 15.5px;
  color: var(--c-ivory);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}

.page-about .ab-next .arc-next__link:hover,
.page-about .ab-next .arc-next__link:focus-visible {
  border-color: var(--c-violet);
  background: rgba(168, 85, 247, 0.1);
  transform: translateY(-2px);
}

.page-about .ab-next .arc-next__code {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--f-index);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
}

@media (min-width: 760px) {
  .page-about .ab-next {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============ 焦点与动效偏好 ============ */
.page-about .ab-rail__item:focus-visible,
.page-about .ab-coordbar-wrap .arc-coordbar__item:focus-visible,
.page-about .ab-next .arc-next__link:focus-visible,
.page-about .ab-inline-link:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page-about * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}