/* ─────────────────────────────────────────────────────────────
   MACU website — flat, paper-figure aesthetic.
   Palette pulled from Fig. 1: deep navy ink, brick red accent,
   slate grey, sage green, pale blue-grey surfaces.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg:        #ffffff;
  --bg-card:   #ffffff;
  --bg-alt:    #f3f6f9;       /* very pale blue-grey, like the DAG panel */
  --bg-panel:  #eef2f6;
  --bg-tint-green: #e8f5e9;   /* VM pool */
  --bg-tint-red:   #fceee9;   /* Follow-up loop */

  /* Ink */
  --ink:       #0f1f3d;       /* deep navy, like Fig.1 Input/Output */
  --ink-soft:  #324a6e;
  --ink-muted: #6b7d96;
  --ink-faint: #98a3b3;

  /* Rules */
  --rule:        #d5dde5;
  --rule-strong: #b0bcc8;
  --rule-dash:   #b8c5d2;

  /* Accent: brick red, like the Manager node */
  --accent:        #b23a2e;
  --accent-soft:   #fceee9;
  --accent-deep:   #8a2a20;

  /* Status tokens (from Fig.1 legend) */
  --status-done-fill: #e7f4ea;
  --status-done-stroke: #2f9c52;
  --status-done-text: #1e6432;

  --status-ready-fill: #ffffff;
  --status-ready-stroke: #546e7a;
  --status-ready-text: #1c2a3a;

  --status-pending-fill: #ffffff;
  --status-pending-stroke: #b0bcc8;
  --status-pending-text: #5e6c80;

  --status-running-fill: #ffffff;
  --status-running-stroke: #b23a2e;
  --status-running-text: #8a2a20;

  --status-offpath-fill: #f0f3f6;
  --status-offpath-stroke: #6b7d96;
  --status-offpath-text: #4a5b73;

  --status-cancelled-fill: #fafbfc;
  --status-cancelled-stroke: #b0bcc8;

  --status-mgr-fill: #b23a2e;       /* solid red, like Fig.1 Manager box */
  --status-mgr-stroke: #8a2a20;
  --status-mgr-text: #ffffff;

  --status-io-fill: #0f1f3d;        /* solid navy, like Fig.1 Input/Output */
  --status-io-stroke: #0f1f3d;
  --status-io-text: #ffffff;

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s, color .12s;
}
a:hover { border-bottom-color: var(--accent); }

button { font-family: inherit; }

/* ─────────────────────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; }

section { padding: 56px 0; }
section + section { border-top: 1px solid var(--rule); }

.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: none;
}
.section-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: none;
}

/* Tab strip above the example player. Each tab shows a benchmark eyebrow
   (uppercase mono) over a short task hint. Tabs are full buttons so the
   whole rectangle is clickable. */
.example-tabs__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.example-tabs__hint-arrow {
  font-family: var(--sans);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0;
  animation: example-tabs-arrow-bob 1.6s ease-in-out infinite;
}
@keyframes example-tabs-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .example-tabs__hint-arrow { animation: none; }
}
.example-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  /* Leave a little vertical room so the hover lift (translateY -1px) isn't
     clipped by the scroll container. */
  padding: 2px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.example-tabs::-webkit-scrollbar { height: 6px; }
.example-tabs::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
.example-tabs::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
.example-tabs::-webkit-scrollbar-track { background: transparent; }
.example-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  white-space: nowrap;
  flex: 0 0 auto;
  box-shadow: 0 1px 0 rgba(15, 31, 61, 0.03);
  transition: background .12s, border-color .12s, color .12s, transform .12s, box-shadow .12s;
}
.example-tab:hover {
  border-color: var(--ink-muted);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 31, 61, 0.08);
}
.example-tab:hover .example-tab__hint { color: var(--ink); }
.example-tab:hover .example-tab__benchmark { color: var(--ink-soft); }
.example-tab:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(15, 31, 61, 0.03); }
.example-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.example-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(178, 58, 46, 0.08);
}
.example-tab.active:hover {
  border-color: var(--accent-deep);
  box-shadow: 0 3px 8px rgba(178, 58, 46, 0.18);
}
.example-tab__benchmark {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.example-tab.active .example-tab__benchmark { color: var(--accent); }
.example-tab__hint {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.example-tab.active .example-tab__hint { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 760px) {
  .example-tab { padding: 8px 12px; }
  .example-tab__hint { font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────────
   Top nav — fixed; slides in once the hero scrolls off-screen.
   ───────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .18s ease;
}
.site-nav.is-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 52px;
}
.site-nav__brand {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
.site-nav__brand .accent { color: var(--accent); }
.site-nav__external {
  display: flex;
  gap: 4px;
}
.site-nav__external a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .12s, background .12s;
}
.site-nav__external a:hover {
  color: var(--accent);
  background: var(--bg-alt);
}
.site-nav__external svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */
.site-header {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--rule);
}
.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.site-header__meta { color: var(--ink-muted); }
.site-header__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px;
}
.site-header__title .accent { color: var(--accent); }
.accent { color: var(--accent); }
.site-header__subtitle {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 820px;
  margin: 20px 0 22px;
}
.site-header__subtitle strong { color: var(--ink); font-weight: 600; }
.site-header__subtitle .metric {
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.site-header__authors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-size: 15px;
  color: var(--ink-soft);
}
.site-header__authors strong { font-weight: 600; color: var(--ink); }
.site-header__author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.site-header__email {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.site-header__affil {
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.site-link {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.site-link:hover { background: var(--accent); border-color: var(--accent); color: white; }
.site-link.secondary {
  background: transparent;
  color: var(--ink);
}
.site-link.secondary:hover {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.site-link svg { width: 14px; height: 14px; }

/* TL;DR card row */
.tldr {
  margin-top: 30px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 20px 24px;
  border-radius: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.tldr-item .num {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.tldr-item .num .small {
  font-size: 16px;
  color: var(--ink-muted);
  font-weight: 600;
  margin-left: 2px;
}
.tldr-item .label {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 8px;
}
.tldr-item .label .delta {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .tldr { grid-template-columns: 1fr; gap: 18px; }
}

/* ─────────────────────────────────────────────────────────────
   Animated example player
   ───────────────────────────────────────────────────────────── */
.player {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.player__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
}
.player__benchmark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  padding: 4px 8px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.player__task {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}
.player__task-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.player__expand {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: white;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.player__expand:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Replan / milestone markers on the Manager row.
   Dot sits ON the track itself; the text label sits just below the track. */
.mgr-marker, .mgr-marker-label {
  position: absolute;
  transform: translateX(-50%);
  cursor: pointer;
  user-select: none;
  z-index: 2;
}
.mgr-marker {
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;            /* generous click target */
}
.mgr-marker__stem { display: none; }
.mgr-marker__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--rule-strong);
  transition: transform .12s;
  box-shadow: 0 0 0 1px white;     /* small white halo so the dot reads on top of the track */
}
.mgr-marker:hover .mgr-marker__dot { transform: scale(1.2); }
.mgr-marker.is-reached .mgr-marker__dot { background: var(--rule-strong); }
/* Replan markers intentionally reuse the default grey dot (same as Initial). */
/* Initial marker sits at t=0, so left-anchor it (and its label) instead of
   centering — otherwise it overflows past the left edge of the track. */
.mgr-marker--initial { transform: translateX(0); }
.mgr-marker-label--initial { transform: translateX(0); text-align: left; align-items: flex-start; }
/* Finalize sits at the aggregator slot near the right edge — keep its dot
   neutral and right-anchor its label so it extends left without overflowing. */
.mgr-marker--finalize .mgr-marker__dot { border-color: var(--ink-muted); }
.mgr-marker--finalize.is-reached .mgr-marker__dot { background: var(--ink-muted); }
.mgr-marker-label--finalize { transform: translateX(-100%); text-align: right; align-items: flex-end; }
.mgr-marker-label--finalize .mgr-marker-label__short { color: var(--ink-muted); }

.mgr-marker-label {
  top: calc(100% + 4px);  /* directly below the track */
  white-space: nowrap;
  font-family: var(--mono);
  line-height: 1.1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 4px;
}
.mgr-marker-label__short {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.mgr-marker-label__long {
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.mgr-marker-label:hover .mgr-marker-label__short { color: var(--ink); }

/* Gantt timeline */
.gantt {
  position: relative;
  padding: 10px 18px 4px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-card);
}
.gantt__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gantt__row {
  display: grid;
  grid-template-columns: 160px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 3px 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .1s;
}
.gantt__row:hover { background: var(--bg-alt); }
.gantt__row.active { background: var(--accent-soft); }
.gantt__label {
  font-size: 11px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.gantt__row.active .gantt__label { color: var(--ink); font-weight: 600; }
.gantt__row--pending .gantt__label { color: var(--ink-faint); }
.gantt__track {
  position: relative;
  height: 14px;            /* taller hit area so it's easy to click-scrub */
  background: var(--bg-alt);
  border-radius: 1px;
  cursor: pointer;
}
.gantt__track:hover { background: #eaeef3; }
.gantt__bar { pointer-events: none; }   /* let clicks fall through to the track */
.gantt__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 1px;
  overflow: hidden;
}
.gantt__bar--pending {
  background: transparent;
  border: 1px dashed var(--status-pending-stroke);
}
.gantt__bar--running {
  background: var(--status-running-fill);
  border: 1px solid var(--status-running-stroke);
}
.gantt__bar--done {
  background: var(--status-done-fill);
  border: 1px solid var(--status-done-stroke);
}
.gantt__bar--done_offpath {
  background: var(--status-offpath-fill);
  border: 1px solid var(--status-offpath-stroke);
}
.gantt__bar-progress {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  opacity: 0.7;
}
.gantt__dur {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gantt__playhead {
  position: absolute;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: var(--accent);
  pointer-events: none;
}
.gantt__playhead::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -2.5px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Stage */
.player__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Fixed-height content area with the row filling it, so the graph (left)
     doesn't resize when the right panel's content height changes — the panel
     bounds itself instead (image scales, caption scrolls). The recorder
     overrides the height via the locked player height. */
  grid-template-rows: minmax(0, 1fr);
  height: 600px;
}
.stage-graph {
  border-right: 1px solid var(--rule);
  background: #e6ecf2;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;   /* fill the fixed stage row, don't force it taller */
}
.stage-graph__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stage-graph__label .replan-badge {
  color: var(--accent);
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s;
}
.stage-graph__label .replan-badge.visible { opacity: 1; }
.stage-graph__svg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.stage-graph__svg svg { max-width: 100%; max-height: 100%; }
.stage-graph__svg svg g[role="button"] { outline: none; }
.stage-graph__svg svg g[role="button"]:focus-visible rect:nth-of-type(2) {
  /* When keyboard-focused (not just clicked), thicken our own blue ring
     to provide a clear focus cue without stacking the browser default. */
  stroke-width: 4;
}
.stage-graph__legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  letter-spacing: 0.04em;
}
.stage-graph__legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-chip {
  display: inline-block;
  width: 14px;
  height: 10px;
  border: 1.5px solid;
}
.legend-chip.dashed { border-style: dashed; }

/* Right: screenshots */
.stage-screens {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #e6ecf2;
}
.stage-screens__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 6px;
  /* Allow up to four rows of tabs; tab row is ~38px, so 4 × 38 ≈ 156.
     If more rows are needed, the strip scrolls vertically. */
  max-height: 168px;
  overflow-y: auto;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-card);
  scrollbar-width: thin;
}
.stage-screens__tab {
  border: 1px solid #e8ecf1;
  border-bottom: 2px solid #e8ecf1;
  border-radius: 3px;
  background: var(--bg-card);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .12s, border-color .12s, background .12s;
}
.stage-screens__tab:hover { color: var(--ink); }
.stage-screens__tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.stage-screens__tab .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-pending-stroke);
}
.stage-screens__tab .status-dot.running {
  background: var(--status-running-stroke);
  box-shadow: 0 0 0 0 rgba(178,58,46,0.6);
  animation: pulse 1.6s ease-out infinite;
}
.stage-screens__tab .status-dot.done { background: var(--status-done-stroke); }
.stage-screens__tab .status-dot.done-offpath { background: var(--status-offpath-stroke); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(178,58,46,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(178,58,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(178,58,46,0); }
}

.stage-screens__viewport {
  flex: 1;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6ecf2;
  position: relative;
  min-height: 0;
}
.stage-screens__frame {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 2px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.stage-screens__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
}
.stage-screens__chrome .pill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.stage-screens__chrome .url {
  flex: 1;
  margin-left: 8px;
  padding: 2px 8px;
  background: white;
  border-radius: 2px;
  font-size: 10px;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-screens__chrome .step-counter {
  font-size: 10px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.stage-screens__img {
  display: block;
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  background: white;
}
/* Sub-agent thought + action caption shown beneath each screenshot. Sits
   inside the white frame so it visually pairs with the screen above it. */
.stage-screens__caption {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--rule);
  background: #fafbfc;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 12px;
  line-height: 1.45;
  max-height: 38%;
  overflow-y: auto;
}
.stage-screens__caption-row {
  display: contents;
}
.stage-screens__caption-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  padding-top: 2px;
  white-space: nowrap;
}
.stage-screens__caption-text {
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.stage-screens__caption-text--action {
  color: var(--ink);
  font-weight: 500;
}
.stage-screens__empty {
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
  padding: 24px;
}
/* Pending placeholder for nodes that haven't started yet. Fills the entire
   available space of its parent (whether that's the stage viewport directly
   or the aggregator frame) so it looks consistent with the screenshot /
   response panels around it. */
.stage-screens__pending {
  background: white;
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
}
.stage-screens__pending strong { color: var(--ink); font-weight: 600; }
.stage-screens__pending-icon {
  font-size: 32px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.stage-screens__pending .muted { font-size: 12px; line-height: 1.5; max-width: 480px; }

/* Aggregator response panel (replaces the screenshot frame when the
   aggregator tab is selected). Same outer dimensions as a screenshot
   frame — fills the viewport — but the response body scrolls inside.
   width:100% + min-height:0 lets the inner agg-response take the
   correct flex height so overflow:auto actually scrolls. */
.agg-frame {
  background: white;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.agg-chrome {
  background: var(--accent) !important;
  border-bottom: 1px solid var(--accent-deep) !important;
  color: white !important;
}
.agg-chrome .url {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: white !important;
  font-weight: 500;
}
.agg-chrome .step-counter { color: rgba(255,255,255,0.85) !important; font-weight: 500; }
.agg-chrome__pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 3px 8px;
  background: white;
  color: var(--accent);
  border-radius: 2px;
}
.agg-response {
  flex: 1 1 0;
  min-height: 0;          /* allow the flex item to shrink so overflow scrolls */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: white;
}
.agg-response h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 6px;
}
.agg-response h2:first-child { margin-top: 0; }
.agg-response strong { color: var(--ink); font-weight: 600; }
.agg-response p { margin: 6px 0; }
.agg-response table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.agg-response th, .agg-response td {
  border: 1px solid var(--rule);
  padding: 5px 9px;
  text-align: left;
}
.agg-response th { background: var(--bg-alt); font-weight: 600; color: var(--ink); }
.agg-response ul, .agg-response ol { padding-left: 20px; margin: 6px 0 10px; }
.agg-response li { margin: 3px 0; }

/* Aggregator tab uses the same colors as regular subtask tabs — its status
   dot reflects its actual state (pending → grey, running → red, done → green)
   so the strip stays visually consistent. */

/* Manager row: keep the regular thin grey track + small accent rectangle
   for the aggregator step. The only difference is space below the bar to
   show marker text labels — padding-bottom is set inline (4px + 14px per
   stacked label row) so the row's hover/active highlight extends just past
   the labels without leaving a large gap above the controls. */
.gantt__row--agg {
  margin-top: 4px;
  padding-top: 8px;
  padding-bottom: 4px;   /* base (level-0); JS bumps it per stacked label row */
  border-top: 1px dashed var(--rule);
}
.gantt__row--agg { align-items: start; }
.gantt__row--agg .gantt__label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: normal; }
.gantt__row--agg .gantt__track--agg { margin-top: 1px; }
.gantt__row--agg .gantt__dur { margin-top: 2px; }
.gantt__agg-label-text { line-height: 1.1; }
.gantt__agg-pill {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--accent);
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
}
.gantt__track--agg {
  /* Same height/look as other rows; just let marker labels overflow below. */
  overflow: visible;
}
.gantt__bar--agg-done {
  background: var(--accent);
  border: 1px solid var(--accent-deep);
}
.gantt__bar--agg-running {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.gantt__bar--agg-pending {
  background: transparent;
  border: 1px dashed var(--accent);
}

.player__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 12px;
  border-top: 1px solid var(--rule);
  background: var(--bg-card);
}
.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  color: var(--ink);
  width: 24px;
  height: 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.player__btn:hover { border-color: var(--ink); }
.player__btn.primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  width: 28px;
  height: 24px;
}
.player__btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.player__btn svg { width: 12px; height: 12px; }

.player__time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.player__time .muted { color: var(--ink-faint); }
.player__hint {
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: auto;
}
.player__speeds {
  display: flex;
  gap: 4px;
  margin-left: -8px;
}
.player__speed {
  font-family: var(--mono);
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.player__speed.active { background: var(--ink); color: white; border-color: var(--ink); }
@media (max-width: 760px) {
  .player__hint { display: none; }
}

.player__caption {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
  padding: 10px 18px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.player__caption strong { color: var(--ink); font-weight: 600; }
.player__caption-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--status-done-stroke);
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: 1px;
}
.player__caption-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.player__caption-link:hover { color: var(--accent-deep); }

@media (max-width: 880px) {
  .player__stage { grid-template-columns: 1fr; }
  .stage-graph { border-right: none; border-bottom: 1px solid var(--rule); min-height: 320px; }
}

/* Task description drawer */
.task-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  border-bottom: 1px solid transparent;
}
.task-drawer.open {
  max-height: 600px;
  border-bottom-color: var(--rule);
}
.task-drawer__inner {
  padding: 14px 18px;
  background: var(--bg-alt);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.task-drawer__inner strong { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────
   Aggregator response block
   ───────────────────────────────────────────────────────────── */
.final-response {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 22px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.final-response h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 18px 0 8px;
}
.final-response h2:first-child { margin-top: 0; }
.final-response strong { color: var(--ink); font-weight: 600; }
.final-response p { margin: 6px 0; }
.final-response table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.final-response th, .final-response td {
  border: 1px solid var(--rule);
  padding: 6px 10px;
  text-align: left;
}
.final-response th { background: var(--bg-alt); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Results table
   ───────────────────────────────────────────────────────────── */
.results-table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
}
.results-table thead th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  background: var(--bg-alt);
}
.results-table tbody tr {
  border-bottom: 1px solid var(--rule);
}
.results-table tbody tr:last-child { border-bottom: none; }
.results-table tbody tr.expandable { cursor: pointer; transition: background .1s; }
.results-table tbody tr.expandable:hover { background: var(--bg-alt); }
.results-table td {
  padding: 14px 18px;
  vertical-align: top;
}
.results-table .benchmark-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.results-table .benchmark-desc {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 3px;
}
.results-table .setup {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.results-table .cell-row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 35px;
}
.results-table .cell-row + .cell-row {
  margin-top: 10px;
}
.results-table .cell-row .bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
}
.results-table .metric {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}
.results-table .metric.macu {
  font-weight: 700;
  color: var(--ink);
}
.results-table .delta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.results-table .delta.improve, .results-table .delta.up { background: var(--status-done-fill); color: var(--status-done-text); }
.results-table .delta.worsen, .results-table .delta.down { background: var(--accent-soft); color: var(--accent-deep); }

.results-table .bar {
  position: relative;
  height: 4px;
  background: var(--bg-alt);
  margin-top: 6px;
  overflow: hidden;
  border-radius: 1px;
}
.results-table .bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--status-offpath-stroke);
}
.results-table .bar__fill.macu { background: var(--accent); }

.results-table .row-toggle {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.results-detail {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
}
.results-detail td {
  padding: 18px 24px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   Results column chart
   ───────────────────────────────────────────────────────────── */
.results-chart-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 18px 20px 8px;
}
.results-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 7px;
}
.results-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-weight: 600;
}
.results-chart__swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 1px;
}
.results-chart__swatch.single {
  background-color: var(--ink-faint);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 2px,
    #fff 2px,
    #fff 3.2px
  );
}
.results-chart__swatch.macu { background: var(--ink-faint); }
.results-chart__brand { letter-spacing: 0; }

.results-chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 820px) {
  .results-chart { grid-template-columns: 1fr; gap: 12px; }
}

.chart-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chart-panel__title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.chart-panel__arrow {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0;
}
.chart-panel__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart-bar.single { fill: var(--ink-faint); }
.chart-bar.macu   { fill: var(--accent); }
.chart-tick {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink-muted);
}
.chart-axis-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}
.chart-val {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.chart-val.single { fill: var(--ink-soft); }
.chart-val.macu   { fill: var(--ink); }
.chart-group-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
}
.chart-group-delta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.chart-group-delta.improve { fill: var(--status-done-text); }
.chart-group-delta.worsen  { fill: var(--accent-deep); }

/* The parallelism chart is a wide 3-panel SVG that renders scaled DOWN (~0.95×),
   while the results plot's panels render scaled UP (~1.22× from a 460 viewBox).
   These authored sizes are tuned so each element lands at the SAME on-screen size
   as the matching results-plot text (tick/axis ≈ 11px, value/delta ≈ 12px,
   group label ≈ 14.6px rendered). */
.parallelism-chart .chart-tick        { font-size: 11.6px; }
.parallelism-chart .chart-axis-title  { font-size: 11.6px; }
.parallelism-chart .chart-val         { font-size: 12.9px; }
.parallelism-chart .chart-group-label { font-size: 15.5px; }
.parallelism-chart .chart-group-delta { font-size: 12.9px; }

/* Panel title (benchmark name) sitting above a sub-plot. */
.chart-panel-title {
  font-family: var(--sans);
  font-weight: 600;
  fill: var(--ink);
}

/* Difficulty chart: two benchmark panels with grouped single/multi bars. */
.difficulty-chart .chart-tick        { font-size: 12px; }
.difficulty-chart .chart-axis-title  { font-size: 12px; }
.difficulty-chart .chart-val         { font-size: 12px; }
.difficulty-chart .chart-group-label { font-size: 14px; }
.difficulty-chart .chart-panel-title { font-size: 15px; }

/* Pass@k line chart: one stroked polyline + markers per series, sized to
   match the parallelism chart so they pair visually in the same row. */
.passk-chart .chart-tick        { font-size: 13px; }
.passk-chart .chart-axis-title  { font-size: 13px; }
.passk-chart .chart-group-label { font-size: 14px; }
.passk-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.passk-line--macu     { stroke: var(--accent); }
.passk-line--passk    { stroke: #4A6FA5; }
.passk-line--baseline { stroke: var(--ink-faint); }
.passk-marker--macu     { fill: var(--accent); }
.passk-marker--passk    { fill: #4A6FA5; }
.passk-marker--baseline { fill: var(--ink-faint); }
.passk-legend {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--ink-soft);
}
/* Shared tooltip for inline SVG charts (passk + scaling). */
.chart-tooltip__bg {
  fill: var(--ink);
  fill-opacity: 0.94;
}
.chart-tooltip__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  fill: #fff;
}
.chart-tooltip__value {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: #fff;
  fill-opacity: 0.85;
}
/* Larger tooltip variant (used by the pass@k chart where the multi-series
   readout needs a few more pixels of breathing room). */
.chart-tooltip__label--lg { font-size: 13px; }
.chart-tooltip__value--lg { font-size: 13px; }
/* Extra-large variant: the per-benchmark scaling chart's tooltip runs 4px
   bigger again so the single/multi readout is legible at panel scale. */
.chart-tooltip__label--xl { font-size: 17px; }
.chart-tooltip__value--xl { font-size: 17px; }
/* Row showing the series the cursor is over: brighter + bolder so it
   stands out from the other rows in the multi-series tooltip. */
.chart-tooltip__row--hovered {
  fill-opacity: 1;
  font-weight: 600;
}
/* Vertical guideline drawn at the hovered x in interactive line charts. */
.chart-hover-guide {
  stroke: var(--ink-muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  stroke-opacity: 0.7;
}

/* Scaling chart (success rate vs. CUA actions, 4 panels side-by-side). It renders
   scaled DOWN (~0.75× from a 1524 viewBox), so authored sizes are bumped to match
   the results plot's on-screen text: numeric ticks/axis titles ≈ 11px and the
   benchmark panel title ≈ 14.6px rendered (same as the results benchmark labels). */
.scaling-chart .chart-tick        { font-size: 14.6px; }
.scaling-chart .chart-axis-title  { font-size: 14.6px; }
.scaling-chart__title             { font-size: 19.5px; fill: var(--ink); }
.scaling-chart__xtick             { font-size: 14.6px; }
.scaling-chart__placeholder {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 12px;
}

/* Per-benchmark notes accordion below the chart */
.results-notes {
  margin-top: 22px;
  border-top: 1px solid var(--rule);
}
.results-note {
  border-bottom: 1px solid var(--rule);
}
.results-note:last-child { border-bottom: none; }
.results-note__header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.2fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: 12px 4px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .12s;
}
.results-note__header:hover { background: var(--bg-alt); }
.results-note.is-open .results-note__header { background: var(--bg-alt); }
.results-note__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.results-note__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.results-note__citation {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.results-note__desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.results-note__toggle {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.results-note__body {
  padding: 4px 4px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
@media (max-width: 720px) {
  .results-note__header {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .results-note__toggle { justify-self: start; }
}

/* ─────────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px 22px;
}
.card__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.card__title code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-alt);
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 500;
}
.card__body {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   Figures
   ───────────────────────────────────────────────────────────── */
.figure {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 18px 20px 20px;
}
.figure__caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.figure__caption strong { color: var(--ink); font-weight: 600; }
.figure__img {
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────
   Paper preview (above citation)
   ───────────────────────────────────────────────────────────── */
.paper-preview {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 24px 28px 44px;
}
.paper-preview__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.paper-preview__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.paper-preview__title .accent { color: var(--accent); }
.paper-preview__authors {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.paper-preview__authors strong { color: var(--ink); font-weight: 600; }
.paper-preview__row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 48px;
  align-items: start;
}
.paper-preview__stack {
  position: relative;
  isolation: isolate;
  display: block;
}
.paper-preview__stack::before,
.paper-preview__stack::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  border: 1px solid var(--rule);
  z-index: -1;
  pointer-events: none;
  transition: transform .15s, border-color .15s;
}
.paper-preview__stack::before {
  transform: translate(8px, 8px);
}
.paper-preview__stack::after {
  transform: translate(16px, 16px);
  z-index: -2;
}
.paper-preview__stack:hover::before { transform: translate(10px, 10px); }
.paper-preview__stack:hover::after  { transform: translate(20px, 20px); }
.paper-preview__thumb {
  display: block;
  border: 1px solid var(--rule);
  background: white;
  transition: border-color .15s, transform .15s;
}
.paper-preview__thumb:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.paper-preview__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.paper-preview__body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.paper-preview__body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .paper-preview__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .paper-preview__stack { max-width: 240px; margin: 0 auto; }
}

/* DAG gallery */
.dag-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1000px) {
  .dag-gallery {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.dag-tile {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}
.dag-tile__bench {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 14px 2px;
  font-weight: 700;
}
.dag-tile__title {
  font-size: 13px;
  color: var(--ink);
  padding: 0 14px 6px;
  line-height: 1.35;
  font-weight: 500;
}
.dag-tile__pattern {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 14px 8px;
}
.dag-tile__img {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  padding: 14px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.dag-tile__img img,
.dag-tile__img .mini-dag {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.dag-tile__desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 12px 14px 14px;
  border-top: 1px solid var(--rule);
}

/* ─────────────────────────────────────────────────────────────
   Ablations
   ───────────────────────────────────────────────────────────── */
.ablation-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 1.1fr 1.1fr;
  gap: 16px;
  margin-top: 8px;
}
.ablation-grid--tables {
  grid-template-columns: 0.8fr 1.1fr 1.1fr;
  margin-top: 16px;
}
.ablation-grid--charts {
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 1100px) {
  .ablation-grid,
  .ablation-grid--tables,
  .ablation-grid--charts {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
.ablation {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px 22px;
}
.ablation__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.25;
}
.ablation__lede {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.ablation__rows {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
}
.ablation__cell {
  font-size: 12px;
  color: var(--ink-soft);
}
.ablation__metric {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
  font-weight: 600;
}
.ablation__bar-container {
  width: 90px;
  height: 4px;
  background: var(--bg-alt);
  overflow: hidden;
  border-radius: 1px;
}
.ablation__bar {
  height: 100%;
  background: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
.site-footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  letter-spacing: 0.04em;
}
/* BibTeX block — used in the citation section. */
.bibtex {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 22px 26px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  white-space: pre-wrap;
  position: relative;
  overflow-x: auto;
}
.bibtex__copy {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bibtex__copy:hover { color: var(--ink); border-color: var(--ink-muted); }

/* ─────────────────────────────────────────────────────────────
   Misc
   ───────────────────────────────────────────────────────────── */
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); }
.spacer-32 { height: 32px; }
.spacer-48 { height: 40px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}