.page-rankings .crumbs {
  padding-block: var(--space-3) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.page-rankings .crumbs a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-rankings .crumbs a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.page-rankings .crumbs span[aria-hidden] {
  margin-inline: var(--space-1);
}

/* ---------- 首屏数据墙 ---------- */

.page-rankings .rank-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-rankings .rank-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-rankings .rank-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-scrim);
}

.page-rankings .rank-hero__inner {
  padding-block: var(--space-6) var(--section-y);
}

.page-rankings .rank-hero .eyebrow {
  color: var(--color-contrast-ink);
}

.page-rankings .rank-hero__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 0.95;
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

.page-rankings .rank-hero__lede {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-contrast-ink);
}

.page-rankings .wall {
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-rankings .wall__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-rankings .wall__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-contrast-ink);
}

.page-rankings .wall__num--word {
  font-size: var(--text-2xl);
  letter-spacing: 0.02em;
}

.page-rankings .wall__label {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 72%, transparent);
}

.page-rankings .chips--board {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.page-rankings .chips--board .chip {
  padding: 5px var(--space-2);
  background: transparent;
  border: var(--border-thin) solid var(--color-contrast-line);
  color: var(--color-contrast-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.page-rankings .chips--board .chip:hover {
  border-color: var(--color-contrast-accent);
}

.page-rankings .chips--board .chip[aria-pressed="true"] {
  background: var(--color-contrast-accent);
  border-color: var(--color-contrast-accent);
  color: var(--color-contrast-surface);
}

/* ---------- 通用段落标题 ---------- */

.page-rankings .section-title {
  margin: var(--space-2) 0 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.page-rankings .section-lede {
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 五类榜单说明 ---------- */

.page-rankings .board-index {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-2);
}

.page-rankings .board-index__item {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-rankings .board-index__item:nth-child(2n) {
  background: var(--color-primary-soft);
}

.page-rankings .board-index__item:nth-child(3) {
  border-top-color: var(--color-accent);
}

.page-rankings .board-index__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

.page-rankings .board-index__name {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
}

.page-rankings .board-index__look {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.page-rankings .board-index__who {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  border-top: var(--border-thin) solid var(--color-line);
  padding-top: var(--space-1);
}

/* ---------- 类别跳转 ---------- */

.page-rankings .board-jump {
  margin-top: var(--space-6);
  padding-block: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  border-top: var(--border-thick) solid var(--color-primary);
  border-bottom: var(--border-thin) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.page-rankings .board-jump__label {
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
}

.page-rankings .board-jump a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-rankings .board-jump a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ---------- 赛况流水 ---------- */

.page-rankings .flow {
  margin-top: var(--space-6);
}

.page-rankings .flow__group + .flow__group {
  margin-top: var(--section-y-lg);
}

.page-rankings .flow__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thick) solid var(--color-primary);
}

.page-rankings .flow__no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.page-rankings .flow__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.page-rankings .flow__what {
  grid-column: 1 / -1;
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-rankings .run {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.page-rankings .run__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-rankings .run__item:first-child {
  border-top: var(--border-thin) solid var(--color-line);
}

.page-rankings .run__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.page-rankings .run__no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}

.page-rankings .run__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
}

.page-rankings .run__line {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-rankings .run__line b {
  font-weight: 700;
  color: var(--color-accent);
}

.page-rankings .run__brief {
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.page-rankings .run__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.page-rankings .delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-1);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.page-rankings .delta--up {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-rankings .delta--down {
  background: var(--color-highlight);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.page-rankings .delta--hold {
  border-style: dashed;
}

.page-rankings .delta--cup {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-rankings .delta--out {
  background: var(--color-surface-deep);
  border-color: var(--color-line);
  color: var(--color-ink-soft);
}

.page-rankings .delta__arrow {
  font-size: var(--text-xs);
  line-height: 1;
}

.page-rankings .delta__was {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-rankings .run__delta:hover .delta__was {
  color: var(--color-ink);
}

.page-rankings .run--dense .run__item {
  padding-block: var(--space-2);
}

.page-rankings .run--dense .run__title {
  font-size: var(--text-lg);
}

.page-rankings .run--dense .run__brief {
  line-height: 1.6;
}

.page-rankings .run__item--note .run__title {
  font-size: var(--text-lg);
}

.page-rankings .flow__figure {
  margin: var(--space-4) 0 0;
}

.page-rankings .flow__figure.media {
  border: var(--border-thin) solid var(--color-line);
}

/* ---------- 升降标记读法 ---------- */

.page-rankings .legend__text {
  margin: var(--space-3) 0 var(--space-4);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-rankings .legend__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.page-rankings .legend__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-rankings .legend__item:last-child {
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-rankings .legend__item .delta {
  justify-self: start;
}

.page-rankings .legend__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
}

.page-rankings .legend__desc p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 更新节奏 ---------- */

.page-rankings .section--deep .section-title {
  color: var(--color-contrast-ink);
}

.page-rankings .section--deep .section-lede {
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

.page-rankings .cadence .eyebrow {
  color: var(--color-contrast-ink);
}

.page-rankings .cadence__figure {
  margin: var(--space-6) 0 0;
}

.page-rankings .cadence__figure.media {
  border: var(--border-thin) solid var(--color-contrast-line);
}

.page-rankings .cadence__figure .media__caption {
  color: color-mix(in srgb, var(--color-contrast-ink) 72%, transparent);
}

.page-rankings .timeline {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0 0 0 var(--space-4);
  border-left: var(--border-thin) solid var(--color-contrast-line);
}

.page-rankings .timeline__item {
  position: relative;
  padding-bottom: var(--space-4);
}

.page-rankings .timeline__item:last-child {
  padding-bottom: 0;
}

.page-rankings .timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) - 3px);
  top: 0.5em;
  width: var(--space-1);
  height: var(--space-1);
  background: var(--color-contrast-accent);
}

.page-rankings .timeline__day {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-contrast-accent);
}

.page-rankings .timeline__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-contrast-ink);
}

.page-rankings .timeline__text {
  margin: var(--space-1) 0 0;
  max-width: 56ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

.page-rankings .cadence__aside {
  margin-top: var(--space-4);
}

.page-rankings .section--deep .collapse__trigger {
  color: var(--color-contrast-ink);
  border-color: var(--color-contrast-line);
}

.page-rankings .section--deep .collapse__panel p {
  margin: var(--space-2) 0 0;
  max-width: 56ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 82%, transparent);
}

.page-rankings .cadence__foot {
  margin: var(--space-6) 0 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 80%, transparent);
}

.page-rankings .cadence__foot a {
  color: var(--color-contrast-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-contrast-accent);
}

/* ---------- 做完之后 ---------- */

.page-rankings .next {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-2);
}

.page-rankings .next__card {
  display: block;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-top: var(--border-thick) solid var(--color-primary);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 160ms linear;
}

.page-rankings .next__card:nth-child(3) {
  border-top-color: var(--color-accent);
}

.page-rankings .next__card:hover {
  background: var(--color-primary-soft);
}

.page-rankings .next__card:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

.page-rankings .next__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

.page-rankings .next__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
}

.page-rankings .next__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-rankings .next__go {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary);
  border-bottom: var(--border-thin) solid var(--color-primary);
}

/* ---------- 窄屏到宽屏 ---------- */

@media (min-width: 760px) {
  .page-rankings .wall {
    grid-template-columns: 1.3fr 1fr 0.82fr 1.05fr 1fr;
    gap: 0;
  }

  .page-rankings .wall__cell {
    padding: var(--space-3) var(--space-3) 0 0;
    border-right: var(--border-thin) solid var(--color-contrast-line);
  }

  .page-rankings .wall__cell:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .page-rankings .board-index {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .page-rankings .board-index__item:nth-child(1) {
    grid-column: 1 / span 7;
  }

  .page-rankings .board-index__item:nth-child(2) {
    grid-column: 8 / span 5;
  }

  .page-rankings .board-index__item:nth-child(3) {
    grid-column: 1 / span 4;
  }

  .page-rankings .board-index__item:nth-child(4) {
    grid-column: 5 / span 4;
  }

  .page-rankings .board-index__item:nth-child(5) {
    grid-column: 9 / span 4;
  }

  .page-rankings .legend__item {
    grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  .page-rankings .next {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .page-rankings .next__card:nth-child(1) {
    grid-column: 1 / span 5;
  }

  .page-rankings .next__card:nth-child(2) {
    grid-column: 6 / span 4;
  }

  .page-rankings .next__card:nth-child(3) {
    grid-column: 10 / span 3;
  }
}

@media (min-width: 900px) {
  .page-rankings .run__item {
    grid-template-columns: 132px minmax(0, 1fr) 152px;
    column-gap: var(--space-3);
    align-items: start;
  }

  .page-rankings .run__item--note {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .page-rankings .run__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .page-rankings .run__delta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .page-rankings .flow__head {
    grid-template-columns: 64px minmax(0, 22ch) minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: baseline;
  }

  .page-rankings .flow__what {
    grid-column: 3;
  }

  .page-rankings .legend {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .page-rankings .legend__intro {
    grid-column: 1 / span 5;
  }

  .page-rankings .legend__list {
    grid-column: 6 / span 7;
    margin-top: 0;
  }

  .page-rankings .cadence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }

  .page-rankings .cadence__lead {
    grid-column: 1 / -1;
  }

  .page-rankings .cadence__figure {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin-top: var(--space-4);
  }

  .page-rankings .timeline {
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--space-4);
  }

  .page-rankings .cadence__aside {
    grid-column: 1;
    grid-row: 3;
  }

  .page-rankings .cadence__foot {
    grid-column: 1 / -1;
  }
}
<<<END>>>