@font-face {
  font-family: "Jost Deck";
  src: url("assets/jost-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* ground and ink */
  --bg: #f4f7f6;
  --surface: #e5ecea;
  --ink: #06525c;
  --muted: #2f737d;
  --accent: #06525c;
  --accent-ink: #f4f7f6;

  /* the deep field the board sits on */
  --deep: #043f47;
  --deep-2: #0a5a63;
  --deep-3: #0c5c65;
  --deep-ink: #e2f0ee;
  --deep-muted: #c8e0dd;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --step-display: clamp(2.75rem, 1rem + 6.4vw, 6.25rem);

  --margin: clamp(1.25rem, 2.4vw, 2.25rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 260ms;
  --t-reveal: 800ms;

  /* the motif: a square with a square hole, and a square with one shoulder cut */
  --hole: 31%;
  --shoulder: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost Deck", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: var(--step-body);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* 视觉隐藏：给读屏用的表 caption。taste-skill-ignore */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.deep :focus-visible { outline-color: var(--deep-ink); }

.wrap { padding-inline: var(--margin); }

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

/* ── the motif ───────────────────────────────────────────────────────── */

.caret {
  position: relative;
  display: block;
  background: var(--accent);
  flex: none;
}.caret::after {
  content: "";
  position: absolute;
  inset: var(--hole);
  background: var(--bg);
}
.caret--lg { width: 1.05em; height: 1.05em; }
.caret--sm { width: 0.62em; height: 0.62em; --hole: 33%; }
.caret--xs { width: 0.44em; height: 0.44em; --hole: 36%; }

/* state: one colour, four values */
.caret[data-state="run"] { background: var(--ink); }
.caret[data-state="run"]::after { background: var(--bg); }
.caret[data-state="wait"] { background: var(--accent); }
.caret[data-state="wait"]::after { background: var(--bg); }
.caret[data-state="done"] { background: var(--surface); }
.caret[data-state="done"]::after { background: var(--bg); }
.caret[data-state="stuck"] { background: var(--deep); }
.caret[data-state="stuck"]::after { background: var(--bg); }

.deep .caret[data-state="run"] { background: var(--deep-3); }
.deep .caret[data-state="run"]::after,
.deep .caret[data-state="wait"]::after,
.deep .caret[data-state="done"]::after,
.deep .caret[data-state="stuck"]::after { background: var(--deep); }
.deep .caret[data-state="wait"] { background: var(--deep-ink); }
.deep .caret[data-state="done"] { background: #12555e; }
.deep .caret[data-state="stuck"] { background: var(--bg); }

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  min-height: 48px;
  padding: 0.7em 1.5em;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--deep); }
}

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.07em;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}

.navlink {
  color: inherit;
  text-decoration: none;
  font-size: var(--step-body);
  transition: opacity var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .navlink:hover { opacity: 0.62; }
}

/* ── hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.hero__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: 1.6rem;
  flex-wrap: wrap;
}

.mark {
  font-size: var(--step-lead);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mark a { text-decoration: none; }
.mark span {
  font-size: var(--step-small);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-left: 0.5em;
  color: var(--muted);
}

.hero__nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }

.hero__shape {
  position: absolute;
  left: 62vw;
  top: 50%;
  transform: translateY(-50%);
  width: 112vh;
  height: 112vh;
  background: var(--accent);
  /* 一个角切掉：和组标签那个缺口是同一套几何 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
  z-index: 0;
}

.hero__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  align-content: center;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-block: clamp(2rem, 6vh, 5rem);
}

.hero h1 {
  grid-column: 1 / 8;
  font-size: var(--step-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-left: -0.04em;
  max-width: 12ch;
  text-wrap: balance;
}

.hero__lead {
  grid-column: 1 / 7;
  margin-top: 1.8rem;
  font-size: var(--step-lead);
  line-height: 1.4;
  max-width: 30ch;
  color: var(--muted);
  text-wrap: pretty;
}

.hero__act { grid-column: 1 / 7; margin-top: 2.4rem; }

.hero__tally {
  grid-column: 1 / 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.4rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}
.tally {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-top: 2px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.tally b {
  font-size: var(--step-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.tally span {
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.45;
  max-width: 24ch;
}

/* ── stepped figure tiles ────────────────────────────────────────────── */

.tiles { padding-block: clamp(5rem, 11vh, 9rem); }

.tiles__head {
  grid-column: 7 / 11;
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  align-self: start;
  margin-bottom: 0.9rem;
}

.tile {
  position: relative;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.tile__fig {
  font-size: clamp(3.5rem, 5.4vw, 5.75rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.tile__cap {
  font-size: var(--step-body);
  line-height: 1.45;
  max-width: 26ch;
}

.tile--a {
  grid-column: 1 / 7;
  min-height: 0;
  background: var(--accent);
  color: var(--accent-ink);
}
.tile--a .tile__cap { color: var(--accent-ink); opacity: 0.9; }

.tile__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tile__list li {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: var(--gutter);
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 2px solid color-mix(in srgb, var(--accent-ink) 26%, transparent);
}
.tile__list b {
  font-weight: 500;
  font-size: var(--step-body);
}
.tile__list span {
  font-size: var(--step-small);
  opacity: 0.82;
  line-height: 1.45;
}

.tile--b {
  grid-column: 7 / 10;
  min-height: 0;
  margin-top: 8vh;
  background: var(--deep);
  color: var(--deep-ink);
}
.tile--b .tile__cap { color: var(--deep-ink); opacity: 0.88; }

.tile--c {
  grid-column: 10 / 13;
  min-height: 0;
  margin-top: 17vh;
  background: var(--surface);
  color: var(--ink);
}
.tile--c .tile__cap { color: var(--muted); }

.tile__state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-small);
  margin-bottom: 0.7rem;
}
.tile--a .tile__state { color: var(--accent-ink); }
.tile--b .tile__state { color: var(--deep-ink); }

/* ── the board: stacked project bands ────────────────────────────────── */

.board {
  background: var(--deep);
  color: var(--deep-ink);
  padding-top: clamp(5rem, 12vh, 10rem);
}

.board__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-bottom: clamp(3rem, 7vh, 6rem);
}
.board__head h2 {
  grid-column: 1 / 8;
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
.board__head p {
  grid-column: 9 / 13;
  align-self: end;
  color: var(--deep-muted);
  max-width: 30ch;
  font-size: var(--step-body);
}

/* 每一组是一块整幅色场，组名那一行吸顶。
   原本整组都吸顶、逐层叠起来（方向表的 stacked folders），
   但组内 agent 条数不等，整组吸顶会把上一组的行埋掉，
   所以只有标签行吸顶，内容照常滚。 */
.band {
  position: relative;
  background: var(--band-bg, var(--deep-2));
  color: var(--deep-ink);
  padding: 0 var(--margin) clamp(2.5rem, 6vh, 4rem);
}

.band__tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 10px 0 14px;
  background: var(--band-bg, var(--deep-2));
}

.tab {
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 44px;
  padding: 0 1.4rem;
  min-width: 200px;
  background: var(--bg);
  color: var(--deep);
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  clip-path: var(--shoulder);
}

.tab small {
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.band__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 5vh, 3.5rem);
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
  align-items: start;
}

.band__list { grid-column: 1 / 8; }

.band__aside {
  grid-column: 8 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.band__figure {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
}

.band__media {
  position: relative;
  background: var(--deep);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.band__media img,
.band__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band__media figcaption {
  margin-top: 0.7rem;
  font-size: var(--step-small);
  color: var(--deep-muted);
  line-height: 1.4;
  max-width: 32ch;
}

.band__note {
  font-size: var(--step-body);
  color: var(--deep-muted);
  line-height: 1.5;
}

/* 组内 agent 的分布：谁在哪台机器上，一眼看完 */
.band__spread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.band__spread li {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.5rem 0;
  font-size: var(--step-small);
  color: var(--deep-ink);
  border-top: 2px solid color-mix(in srgb, var(--deep-ink) 24%, transparent);
}
.band__spread li b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.band__spread li span { color: var(--deep-muted); }
.band__spread li em { font-style: normal; margin-left: auto; color: var(--deep-muted); }

/* ── showcase: one card, blown up ───────────────────────────────────── */

.showcase {
  background: var(--field, var(--deep-2));
  color: var(--deep-ink);
  padding-block: clamp(4rem, 10vh, 8rem);
  transition: background-color var(--t-ui) ease;
}
/* showcase 展开时整块换色：状态挂在内部的 .agent 上（由通用处理器切换），
   所以选择器要走到子元素，不能只看 section 自身。 */
.showcase:has(.agent--big.is-open) { --field: var(--accent); }
.showcase:has(.agent--big.is-open) .showcase__sub { color: var(--accent-ink); opacity: 0.88; }

.showcase h2 {
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.showcase__sub {
  margin-top: 1rem;
  font-size: var(--step-body);
  color: var(--deep-muted);
  max-width: 42ch;
}

.showcase__stage {
  margin-top: clamp(2.5rem, 7vh, 5rem);
}

.agent--big .agent__btn { padding: 1.4rem 0; cursor: pointer; }
.agent--big .agent__task { font-size: var(--step-head); margin-top: 0.4rem; }
.agent--big .agent__caret { width: 30px; height: 30px; }
.agent--big .steps { gap: 7px; margin-top: 1.1rem; }
.agent--big .step { width: 17px; height: 17px; }
.agent--big .agent__inner { padding-bottom: 2.6rem; }
.agent--big .report { font-size: var(--step-lead); line-height: 1.5; max-width: 34ch; }

/* agent rows */

.agent {
  border-top: 2px solid color-mix(in srgb, var(--deep-ink) 24%, transparent);
}
.agent:last-child {
  border-bottom: 2px solid color-mix(in srgb, var(--deep-ink) 24%, transparent);
}

.agent__btn {
  display: grid;
  grid-template-columns: 1.35em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 0.85em;
  width: 100%;
  padding: 1.05rem 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--t-hover) ease;
}
.agent__btn:hover { opacity: 0.78; }
.agent__btn:active { opacity: 0.6; }

.agent__caret { align-self: center; }
.agent__who { font-size: var(--step-body); font-weight: 500; }
.agent__who span { font-weight: 400; color: var(--deep-muted); margin-left: 0.5em; }
.agent__task {
  grid-column: 2 / 4;
  font-size: var(--step-lead);
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin-top: 0.25rem;
}
.agent__right {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  font-size: var(--step-small);
  color: var(--deep-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agent__state { display: block; color: var(--deep-ink); }

.steps { display: flex; gap: 5px; margin-top: 0.7rem; grid-column: 2 / 4; }
.step {
  width: 15px;
  height: 15px;
  background: color-mix(in srgb, var(--deep-ink) 34%, transparent);
  position: relative;
}
.step::after {
  content: "";
  position: absolute;
  inset: 34%;
  background: var(--deep-2);
}
.step.is-done { background: var(--deep-ink); }
.step.is-done::after { background: var(--band-bg, var(--deep-2)); }
.step.is-stuck { background: var(--bg); }

.agent__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out);
}
.agent__panel > div { overflow: hidden; }
/* 收起时把内容移出渲染与朗读树：否则它虽然被裁掉，
   仍占着布局位置，下一节的标题会压在它上面。 */
.agent__panel > div > div { visibility: hidden; }
.agent.is-open .agent__panel { grid-template-rows: 1fr; }
.agent.is-open .agent__panel > div > div { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .agent.is-open .agent__panel > div > div {
    transition: visibility 0s linear 200ms;
  }
}

.agent__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.4rem;
  padding: 0.4rem 0 2rem;
}

.kv { grid-column: span 3; }
.kv dt {
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.35;
}
.deep .kv dt { color: var(--deep-muted); }

.kv dd {
  margin: 0.2rem 0 0;
  font-size: var(--step-body);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.report {
  grid-column: 1 / 9;
  padding-left: 1.1rem;
  border-left: 4px solid var(--deep-ink);
  font-size: var(--step-body);
  line-height: 1.55;
  color: var(--deep-ink);
  max-width: 62ch;
}
.report p { margin: 0 0 1.1rem; }
.report p:last-child { margin-bottom: 0; }
.report b {
  display: block;
  font-weight: 400;
  font-size: var(--step-small);
  color: var(--deep-muted);
  margin-bottom: 0.25rem;
}

.next { grid-column: 9 / 13; }
.next dt { font-size: var(--step-small); color: var(--deep-muted); }
.next dd { margin: 0.3rem 0 0; font-size: var(--step-body); line-height: 1.5; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.1rem; grid-column: 1 / 13; }
.tag {
  padding: 0.3em 0.75em;
  background: color-mix(in srgb, var(--deep-ink) 18%, transparent);
  color: var(--deep-ink);
  font-size: var(--step-small);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}

/* ── ledger: statement + table pushed right ──────────────────────────── */

.ledger { padding-block: clamp(5rem, 12vh, 10rem); }

.ledger h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 16ch;
  text-wrap: balance;
}
.ledger h2 em { font-style: normal; color: var(--muted); }

.ledger__shot {
  grid-column: 1 / 5;
  align-self: start;
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
}
.ledger__shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface); }
.ledger__shot figcaption {
  margin-top: 0.7rem;
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.4;
  max-width: 26ch;
}

.ledger__table { grid-column: 6 / 13; margin-top: clamp(2.5rem, 6vh, 4.5rem); }

.ledger__name {
  font-size: var(--step-small);
  color: var(--muted);
  margin-bottom: 1.1rem;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--muted);
  padding: 0 0 0.7rem;
}

td {
  font-size: var(--step-body);
  padding: 0.85rem 1.2rem 0.85rem 0;
  vertical-align: baseline;
  border-top: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}
td:first-child { width: 8.5em; }
td .sid { font-weight: 500; letter-spacing: 0.01em; }
td .sid span { display: block; font-weight: 400; color: var(--muted); font-size: var(--step-small); }
td.num { text-align: right; white-space: nowrap; color: var(--muted); }
td.state { white-space: nowrap; }
.state__in { display: inline-flex; align-items: center; gap: 0.5em; }

/* ── scrubber: the live thing ────────────────────────────────────────── */

.scrub {
  background: var(--surface);
  padding-block: clamp(5rem, 12vh, 10rem);
  min-height: 86svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2.5rem, 6vh, 4rem);
  grid-template-rows: auto auto 1fr;
  align-content: space-between;
}

.scrub__q {
  grid-column: 1 / 8;
  grid-row: 1;
  align-self: end;
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

.scrub__ctl { grid-column: 1 / 8; grid-row: 2; max-width: 460px; align-self: start; }

.scrub__peakwrap { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; }
.scrub__peaklabel {
  font-size: var(--step-body);
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.scrub__peak {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scrub__peak li {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: 0.75rem 0;
  border-top: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.scrub__peak li:last-child { border-bottom: 2px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.scrub__peak b {
  font-size: var(--step-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  min-width: 5.5em;
}
.scrub__peak span { font-size: var(--step-body); color: var(--muted); line-height: 1.4; }

[data-ui] .ctl__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step-body);
  margin-bottom: 0.8rem;
}
[data-ui] .ctl__val { font-variant-numeric: tabular-nums; font-weight: 500; }

[data-ui] input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  display: block;
}
[data-ui] input[type="range"]::-webkit-slider-runnable-track {
  height: 14px;
  background: var(--bg);
}
[data-ui] input[type="range"]::-moz-range-track {
  height: 14px;
  background: var(--bg);
}
[data-ui] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -7px;
  background: var(--accent);
  border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
[data-ui] input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: var(--accent);
  border: 0;
}
[data-ui] input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.scrub__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--step-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 0.4rem;
}

.scrub__fig {
  grid-column: 1 / 8;
  grid-row: 3;
  align-self: end;
  font-size: clamp(5.5rem, 17vw, 17rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  margin-left: -0.05em;
}
.scrub__fig small {
  font-size: var(--step-body);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.6em;
  color: var(--muted);
  display: inline-block;
  transform: translateY(-0.15em);
}

.scrub__side {
  grid-column: 9 / 13;
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.scrub__how { font-size: var(--step-body); color: var(--muted); max-width: 38ch; line-height: 1.5; }

.scrub__list { list-style: none; margin: 0; padding: 0; }
.scrub__list li {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) auto;
  gap: 0.9em;
  align-items: baseline;
  padding: 0.6rem 0;
  font-size: var(--step-small);
  border-top: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.scrub__list li:last-child { border-bottom: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.scrub__list b { font-weight: 500; color: var(--ink); }
.scrub__list span { color: var(--muted); }
.scrub__list em { font-style: normal; color: var(--muted); }
.scrub__list .is-empty { display: block; color: var(--muted); }

/* ── agenda: day tabs + banded rows ──────────────────────────────────── */

.agenda { padding-block: clamp(5rem, 12vh, 10rem); }

.agenda h2 {
  grid-column: 1 / 10;
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.agenda h2 em { font-style: normal; color: var(--muted); }

.daytabs {
  grid-column: 11 / 13;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.daytab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-height: 64px;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.daytab b { font-size: var(--step-body); font-weight: 500; }
.daytab span { font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.daytab[aria-selected="true"] { background: var(--deep); color: var(--deep-ink); }
.daytab[aria-selected="true"] span { color: var(--deep-muted); }

.bands { grid-column: 1 / 13; margin-top: clamp(2.5rem, 6vh, 4.5rem); display: grid; gap: 4px; }

.slot {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) minmax(0, 0.9fr) 14em;
  align-items: center;
  gap: var(--gutter);
  min-height: 76px;
  padding: 0.9rem 1.2rem;
  background: var(--surface);
  transition: background-color var(--t-hover) ease;
}
.slot:nth-child(even) { background: #dbe4e2; }

.slot__time {
  font-size: var(--step-lead);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.slot__title { font-size: var(--step-body); font-weight: 500; line-height: 1.35; }
.slot__note { font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
.slot__who { font-size: var(--step-small); text-align: right; color: var(--muted); line-height: 1.4; }
.slot__who b { display: block; font-weight: 500; color: var(--ink); }

/* ── footer ──────────────────────────────────────────────────────────── */

.foot {
  background: var(--deep);
  color: var(--deep-ink);
  padding: clamp(3rem, 7vh, 5rem) var(--margin) 2.5rem;
}

.foot__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 2rem;
  align-items: end;
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.foot__close {
  grid-column: 1 / 7;
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.foot__close em { font-style: normal; color: var(--deep-muted); }

.foot__now {
  grid-column: 8 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.2rem;
}
.foot__now div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.8rem;
  border-top: 2px solid color-mix(in srgb, var(--deep-ink) 26%, transparent);
}
.foot__now b {
  font-size: var(--step-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.foot__now span { font-size: var(--step-small); color: var(--deep-muted); line-height: 1.4; }

.wordmark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: clamp(150px, 26svh, 300px);
}
.wordmark span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--deep);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.02em;
  height: var(--h);
  padding-inline: 0.1em;
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 2rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-size: var(--step-body);
}
.foot__cols h3 {
  grid-column: 1 / 13;
  font-size: var(--step-body);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.foot__col { grid-column: span 2; display: flex; flex-direction: column; gap: 0.35rem; }
.foot__col--wide { grid-column: 9 / 13; }
.foot__col p { color: var(--deep-muted); line-height: 1.5; }

.credits {
  grid-column: 1 / 13;
  margin-top: 1rem;
  font-size: var(--step-body);
  color: var(--deep-muted);
  line-height: 1.5;
  max-width: 92ch;
}
.credits a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }

.foot__last {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  margin-top: clamp(3rem, 6vh, 4.5rem);
  font-size: var(--step-small);
  color: var(--deep-muted);
}

/* ── motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(20px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter > img,
  .js .shutter > video { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in > img,
  .js .shutter.is-in > video { transform: none; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── phone ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* 手机上图形退到首屏底部当压舱物，文字全部在上半屏，
     否则正文会落在同一块青色上，变成青字压青底。 */
  .hero { min-height: 100svh; }
  .hero__shape {
    left: 50%;
    top: auto;
    bottom: -34vw;
    transform: none;
    width: 96vw;
    height: 96vw;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%, 0 76%);
  }
  .hero__body {
    align-content: start;
    padding-top: clamp(1.5rem, 6svh, 3rem);
    padding-bottom: 46svh;
  }
  .hero h1 { grid-column: 1 / 13; max-width: 11ch; }
  .hero__lead { grid-column: 1 / 13; max-width: 32ch; }
  .hero__act { grid-column: 1 / 13; }

  .hero__tally {
    grid-column: 1 / 13;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.9rem;
    margin-top: 2.4rem;
  }
  .tally b { font-size: var(--step-lead); }
  .tally span { font-size: var(--step-small); max-width: 18ch; }

  .tiles__head { grid-column: 1 / 13; }
  .tile--a { grid-column: 1 / 13; min-height: 52vw; }
  .tile--b { grid-column: 1 / 7; min-height: 34vw; margin-top: 3rem; }
  .tile--c { grid-column: 7 / 13; min-height: 28vw; margin-top: 5rem; }
  .tile__fig { font-size: clamp(3rem, 13vw, 4rem); }
  .tile { padding: 1.1rem; }

  .board__head h2 { grid-column: 1 / 13; }
  .board__head p { grid-column: 1 / 13; margin-top: 1.2rem; }

  .band { position: static; }
  .band__tabs { flex-wrap: wrap; }
  .tab { min-width: 0; height: 40px; font-size: var(--step-body); padding: 0 1rem; }
  .band__list { grid-column: 1 / 13; }
  .band__aside { grid-column: 1 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band__figure { grid-column: 1 / 3; }
  .band__media { aspect-ratio: 3 / 2; }
  .agent__btn { grid-template-columns: 1.35em minmax(0, 1fr); }
  .agent__right { grid-column: 2; grid-row: auto; text-align: left; margin-top: 0.3rem; }
  .agent__right .state__in { display: inline-flex; }
  .agent__task { grid-column: 2 / 3; }
  .steps { grid-column: 2 / 3; }
  .agent__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv { grid-column: span 1; }
  .report { grid-column: 1 / 13; }
  .next { grid-column: 1 / 13; }
  .tags { grid-column: 1 / 13; }

  .ledger__shot { grid-column: 1 / 13; }
  .ledger__shot img { aspect-ratio: 3 / 2; }
  .ledger__table { grid-column: 1 / 13; overflow-x: auto; }
  td { padding-right: 0.9rem; }
  td.opt { display: none; }

  .scrub {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    row-gap: 2.2rem;
    min-height: 0;
  }
  .scrub__q,
  .scrub__ctl,
  .scrub__peakwrap,
  .scrub__fig,
  .scrub__side { grid-column: 1 / -1; grid-row: auto; }
  .scrub__q { max-width: 100%; }
  .scrub__ctl { max-width: none; }
  .scrub__fig { font-size: 30vw; }
  .scrub__side { gap: 1.4rem; }

  .agenda h2 { grid-column: 1 / 13; }
  .daytabs {
    grid-column: 1 / 13;
    flex-direction: row;
    margin-top: 1.6rem;
  }
  .daytab { flex: 1; min-height: 56px; }
  .slot {
    grid-template-columns: 4.5em minmax(0, 1fr);
    row-gap: 0.3rem;
    padding: 0.9rem 1rem;
  }
  .slot__note, .slot__who { grid-column: 2 / 3; text-align: left; }

  .wordmark { height: 22svh; gap: 4px; }
  .wordmark span { font-size: 10vw; }
  .foot__top { row-gap: 2.5rem; }
  .foot__close { grid-column: 1 / 13; }
  .foot__now { grid-column: 1 / 13; }
  .foot__col { grid-column: span 1; }
  .foot__col--wide { grid-column: span 2; }
}

/* ── 顶栏（两个页面共用）─────────────────────────────────────────────── */

.topbar {
  position: relative;
  z-index: 3;
  background: var(--bg);
}
.topbar__in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: 1.5rem;
  flex-wrap: wrap;
}
.topbar__nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.navlink.is-current {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 0.07em;
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  padding: 0.45em 1em;
  min-height: 40px;
  font-size: var(--step-body);
  clip-path: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--quiet:hover { background: var(--surface); }
}

/* 主看板的 hero 里也有个顶栏，样式对齐 */
.hero .topbar {
  position: absolute;
  inset: 0 0 auto;
  background: none;
}
.hero .topbar__in { width: 100%; }
.hero .btn--quiet { color: var(--ink); }

/* ── 历史页 ──────────────────────────────────────────────────────────── */

.ahead {
  padding-block: clamp(3rem, 9vh, 7rem) clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2.5rem, 6vh, 4rem);
  align-items: end;
}

.ahead__kicker {
  grid-column: 1 / 13;
  font-size: var(--step-lead);
  line-height: 1.4;
  max-width: 42ch;
  color: var(--muted);
}

.ahead h1 {
  grid-column: 1 / 7;
  font-size: var(--step-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-left: -0.04em;
  max-width: 12ch;
}

.ahead__counts {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.acount {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 4px solid var(--surface);
}
.acount b {
  font-size: var(--step-head);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.acount span {
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.45;
}
.acount[data-closed="completed"] { border-top-color: var(--accent); }
.acount[data-closed="expired"] { border-top-color: var(--muted); }
.acount[data-closed="abandoned"] { border-top-color: var(--deep-2); }

/* 筛选条：一条通栏的浅色带，与主看板的深色色场区分开 */
.arch__bar {
  background: var(--surface);
  padding-block: 1rem;
}
.arch__barin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
}
.afilter { display: flex; gap: 6px; flex-wrap: wrap; }
.afilter__btn {
  padding: 0.5em 1.1em;
  min-height: 44px;
  background: var(--bg);
  color: var(--ink);
  border: 0;
  font: inherit;
  font-size: var(--step-body);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.afilter__btn span {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-left: 0.4em;
}
.afilter__btn:hover { background: var(--surface); }
.afilter__btn.is-on { background: var(--accent); color: var(--accent-ink); }
.afilter__btn.is-on span { color: var(--accent-ink); opacity: 0.85; }
.afilter__btn[hidden] { display: none; }

.arch__hint { font-size: var(--step-small); color: var(--muted); }

.arch__body { padding-block: clamp(3rem, 7vh, 5rem); }

.arch__group + .arch__group { margin-top: clamp(3rem, 7vh, 5.5rem); }

.arch__proj {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin-bottom: 1.4rem;
}
.arch__proj small {
  font-size: var(--step-small);
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.7em;
  letter-spacing: 0;
}

.arch { border-top: 2px solid var(--surface); }
.arch[hidden] { display: none; }
.arch__group[hidden] { display: none; }

.arch__btn {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: baseline;
  gap: 0 1.2rem;
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--t-hover) ease;
}
.arch__btn:hover { opacity: 0.75; }
.arch__btn:active { opacity: 0.6; }

/* 归档标记：一个小方块，和主看板的状态方块同源 */
.arch__mark {
  width: 12px;
  height: 12px;
  background: var(--muted);
  align-self: center;
}
.arch[data-closed="completed"] .arch__mark { background: var(--accent); }
.arch[data-closed="expired"] .arch__mark { background: var(--surface); }
.arch[data-closed="abandoned"] .arch__mark { background: var(--deep-2); }

.arch__who { font-size: var(--step-body); font-weight: 500; }
.arch__who span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: var(--step-small);
  margin-top: 0.15rem;
}
.arch__task {
  font-size: var(--step-body);
  line-height: 1.4;
  color: var(--ink);
}
.arch__right {
  text-align: right;
  font-size: var(--step-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: flex-end;
}

.ctag {
  display: inline-block;
  padding: 0.25em 0.7em;
  font-size: var(--step-small);
  color: var(--accent-ink);
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.ctag[data-closed="expired"] { background: var(--muted); }
.ctag[data-closed="abandoned"] { background: var(--deep-2); }

.arch__inner { padding: 0 0 1.6rem 26px; }
.arch__inner .report {
  border-left: 0;
  padding-left: 0;
  max-width: 66ch;
}
.arch__inner .report p {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.arch__inner .report b { margin-bottom: 0; }
.arch__inner .tags { margin-top: 1rem; }

.arch__empty { padding-block: clamp(4rem, 10vh, 8rem); text-align: left; }
.arch__empty[hidden] { display: none; }
.arch__empty-t {
  font-size: var(--step-head);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 0.8rem;
}
.arch__empty-s { font-size: var(--step-body); color: var(--muted); }
.arch__empty-s code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--surface);
  padding: 0.1em 0.4em;
}

.foot--slim { padding-top: clamp(3rem, 7vh, 5rem); }
.wordmark--slim { height: clamp(120px, 18svh, 200px); }

@media (max-width: 900px) {
  .ahead { row-gap: 2.2rem; }
  .ahead__kicker { grid-column: 1 / 13; }
  .ahead h1 { grid-column: 1 / 13; }
  .ahead__counts { grid-column: 1 / 13; }
  .acount b { font-size: var(--step-lead); }

  .arch__barin { gap: 0.8rem; }
  .afilter { width: 100%; }
  .afilter__btn { flex: 1; padding: 0.5em 0.6em; text-align: center; }

  .arch__btn {
    grid-template-columns: 12px minmax(0, 1fr);
    row-gap: 0.45rem;
  }
  .arch__task { grid-column: 2 / 3; }
  .arch__right {
    grid-column: 2 / 3;
    text-align: left;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .arch__inner { padding-left: 0; }
  .arch__inner .report p { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* 历史页里的一张图：跟主看板的色场不同，这里是一张安静的照片带 */
.ashot { background: var(--surface); padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.ashot__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 2rem;
  align-items: start;
}
.ashot__fig {
  grid-column: 1 / 5;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg);
}
.ashot__fig--tall { grid-column: 5 / 8; aspect-ratio: 4 / 5; }
.ashot__fig img { width: 100%; height: 100%; object-fit: cover; }
.ashot__fig figcaption {
  margin-top: 0.7rem;
  font-size: var(--step-small);
  color: var(--muted);
  line-height: 1.4;
}

.ashot__side { grid-column: 8 / 13; }
.ashot__lead {
  font-size: var(--step-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
  max-width: 30ch;
}
.ashot__machines { list-style: none; margin: 0; padding: 0; }
.ashot__machines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-top: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: var(--step-small);
}
.ashot__machines b { font-weight: 500; color: var(--ink); }
.ashot__machines span { color: var(--muted); font-variant-numeric: tabular-nums; }
.ashot__machines em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
  text-align: right;
}
.ashot__note { margin-top: 1.2rem; font-size: var(--step-small); color: var(--muted); max-width: 40ch; }

@media (max-width: 900px) {
  .ashot__in { row-gap: 1.6rem; }
  .ashot__fig { grid-column: 1 / 7; }
  .ashot__fig--tall { grid-column: 7 / 13; }
  .ashot__side { grid-column: 1 / 13; }
}

/* 归档流水：一个界面片段（data-ui），是这个页面真正的主内容 ——
   一份能读的清单，而不是拿照片凑版面。 */
.aread {
  margin-top: clamp(2rem, 4.5vh, 3rem);
  padding: 1.2rem 1.5rem 1rem;
  background: var(--bg);
  border-top: 2px solid var(--ink);
}
.aread__cap {
  font-size: var(--step-small);
  color: var(--muted);
  margin-bottom: 1rem;
}
.aread__grid { display: flex; flex-direction: column; }
[data-ui] .aread__row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr) 7em 5em;
  gap: 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
  font-size: var(--step-small);
  border-bottom: 1px solid var(--surface);
}
.aread__row--head {
  color: var(--muted);
  border-bottom-color: var(--ink);
  font-size: var(--step-small);
}
.aread__row b { font-weight: 500; }
.aread__row span { color: var(--muted); font-variant-numeric: tabular-nums; }
.aread__row .aread__c { color: var(--accent); font-weight: 500; }
.aread__row .aread__c[data-c="expired"] { color: var(--muted); }
.aread__row .aread__c[data-c="abandoned"] { color: var(--deep-2); }
.aread__foot {
  margin-top: 1rem;
  font-size: var(--step-small);
  color: var(--muted);
}

@media (max-width: 900px) {
  .aread { padding: 1.1rem 1rem; }
  .aread__row { grid-template-columns: 5.5em minmax(0, 1fr) 5em; }
  .aread__row > :nth-child(2) { display: none; }
}

/* 机器分布：第二个界面片段。归档页的内容本来就是清单，
   所以用两个可读的读数面板，而不是拿照片凑版面。 */
.awhere {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem 1.2rem;
  background: var(--surface);
}
.awhere__cap {
  font-size: var(--step-small);
  color: var(--muted);
  margin-bottom: 1rem;
}
.awhere__grid { display: flex; flex-direction: column; }
[data-ui] .awhere__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9em auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0;
  font-size: var(--step-small);
  border-bottom: 1px solid var(--bg);
}
.awhere__row:last-child { border-bottom: 0; }
.awhere__name { font-weight: 500; color: var(--ink); }
.awhere__name span { display: block; font-weight: 400; color: var(--muted); }
.awhere__bar { display: flex; gap: 3px; height: 12px; align-items: stretch; }
.awhere__bar i { width: 14px; height: 100%; display: block; }
.awhere__bar i[data-c="completed"] { background: var(--accent); }
.awhere__bar i[data-c="expired"] { background: var(--muted); }
.awhere__bar i[data-c="abandoned"] { background: var(--deep-2); }
.awhere__n {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.4em;
  text-align: right;
}
.awhere__note {
  margin-top: 1rem;
  font-size: var(--step-small);
  color: var(--muted);
  max-width: 52ch;
}

@media (max-width: 900px) {
  .awhere { padding: 1.1rem 1rem; }
  .awhere__row { grid-template-columns: minmax(0, 1fr) auto; }
  .awhere__bar { display: none; }
}

/* 一张如实标注来源的照片：这个页面的内容确实发生在这些机器上 */
.aphoto {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.aphoto img {
  grid-column: 1 / 8;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: var(--surface);
}
.aphoto figcaption {
  grid-column: 8 / 13;
  font-size: var(--step-body);
  line-height: 1.55;
  color: var(--ink);
}
.aphoto figcaption span {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--step-small);
  color: var(--muted);
}

/* 第三个读数片段：哪个 agent 收工最多 */
.aagent {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem 1.3rem;
  background: var(--surface);
}
.aagent__cap {
  font-size: var(--step-small);
  color: var(--muted);
  margin-bottom: 1rem;
}
.aagent__grid { display: flex; flex-direction: column; }
[data-ui] .aagent__row {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem 0;
  font-size: var(--step-small);
  border-bottom: 1px solid var(--bg);
}
.aagent__row:last-child { border-bottom: 0; }
.aagent__name { font-weight: 500; color: var(--ink); }
.aagent__bar { display: flex; gap: 3px; height: 12px; }
.aagent__bar i { width: 16px; height: 100%; background: var(--muted); display: block; }
.aagent__n {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 3em;
  text-align: right;
}

@media (max-width: 900px) {
  .aphoto { row-gap: 1.2rem; }
  .aphoto img { grid-column: 1 / 13; aspect-ratio: 3 / 2; }
  .aphoto figcaption { grid-column: 1 / 13; }
  .aagent { padding: 1.1rem 1rem; }
  .aagent__row { grid-template-columns: 7em minmax(0, 1fr) auto; }
}