/* Layout: one 680px serif reading column, sticky contents rail on the left, figures may break out to 920px. */
:root {
  --bg: #ffffff; --bg2: #f4f4f1; --fg: #22231f; --fg2: #4a4b45; --fg3: #75766f; --fg4: #7c7d76;
  --rule: #e3e3de; --grid: #ededea; --accent: #1e8a47; --accent-ink: #13633a;
  --none: #8d8d86; --react: #b59c80; --react-fill: #e9dfd2; --env: #f1f1ee;
  --p1: #c6e39f; --p2: #a9d67a; --p3: #84c45a; --p4: #5bae47; --p5: #2e9447; --p6: #1f7a3e; --p7: #145f33; --p8: #0b4426;
  --o1: #a9d67a; --o2: #2e9447; --o3: #0b4426;
  --rag: #e0603a; --rlm: #7b3fa0; --warn: #b8461b;
  --f-math: #1f7a3e; --f-ind: #16818c; --f-repo: #b9731f; --f-law: #8a4f9e;
  --serif: 'Literata', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --measure: 680px; --wide: 920px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #131412; --bg2: #1c1d1a; --fg: #e9e9e4; --fg2: #c4c5bd; --fg3: #95968e; --fg4: #8a8b84;
  --rule: #2c2d29; --grid: #242522; --accent: #4cc477; --accent-ink: #7fd89c; --none: #9a9a93; --react: #c4ab8e; --react-fill: #3a332b; --env: #1e1f1c;
  --p1: #2d4a22; --p2: #3c6a2c; --p3: #4e8a37; --p4: #5fa744; --p5: #74c158; --p6: #8fd474; --p7: #b0e597; --p8: #d2f4bf;
  --o1: #4e8a37; --o2: #74c158; --o3: #c4efab; --rag: #f08a62; --rlm: #b98bd8; --warn: #f0875a; --f-math: #74c158; --f-ind: #4fc3cc; --f-repo: #e8a24e; --f-law: #c493d6; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #131412; --bg2: #1c1d1a; --fg: #e9e9e4; --fg2: #c4c5bd; --fg3: #95968e; --fg4: #8a8b84;
  --rule: #2c2d29; --grid: #242522; --accent: #4cc477; --accent-ink: #7fd89c; --none: #9a9a93; --react: #c4ab8e; --react-fill: #3a332b; --env: #1e1f1c;
  --p1: #2d4a22; --p2: #3c6a2c; --p3: #4e8a37; --p4: #5fa744; --p5: #74c158; --p6: #8fd474; --p7: #b0e597; --p8: #d2f4bf;
  --o1: #4e8a37; --o2: #74c158; --o3: #c4efab; --rag: #f08a62; --rlm: #b98bd8; --warn: #f0875a; --f-math: #74c158; --f-ind: #4fc3cc; --f-repo: #e8a24e; --f-law: #c493d6; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--serif); font-size: 17.5px; line-height: 1.65;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-x: clip; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--fg3) 45%, transparent); text-underline-offset: 2px; }
.ai { color: #2f6fd6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai { color: #8ab4ff; } }
:root[data-theme="dark"] .ai { color: #8ab4ff; }

header.hero { max-width: 760px; margin: 0 auto; padding: 56px 0 8px; text-align: center; }
.hero h1 { font-weight: 600; font-size: clamp(30px, 5vw, 42px); line-height: 1.18; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.hero .sub { font-style: italic; color: var(--fg3); font-size: 19px; margin: 14px auto 0; max-width: 620px; text-wrap: balance; }
.hero .meta { font-family: var(--sans); font-size: 14px; color: var(--fg3); margin-top: 18px; }
.tldr { max-width: var(--measure); margin: 30px auto 0; padding: 18px 22px 20px; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--bg)); border-radius: 10px; text-align: left; font-size: 16.5px; line-height: 1.6; }
.tldr b { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; color: var(--accent-ink); margin-right: 6px; }
.legend-note { max-width: var(--measure); margin: 12px auto 0; font-family: var(--sans); font-size: 13px; color: var(--fg3); text-align: left; }

.shell { display: grid; grid-template-columns: 1fr minmax(0, var(--measure)) 1fr; max-width: 1180px; margin: 28px auto 80px; }
nav.toc { grid-column: 1; justify-self: end; position: sticky; top: 28px; align-self: start; width: 150px; margin-right: 156px; font-family: var(--sans); font-size: 13px; line-height: 1.4; }
nav.toc ol { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0 0 10px; }
nav.toc a { color: var(--fg4); text-decoration: none; transition: color .2s; }
nav.toc a:hover, nav.toc a.on { color: var(--fg); }
nav.toc a.on { font-weight: 600; }
@media (max-width: 1599px) { nav.toc { display: none; } }
main { grid-column: 2; min-width: 0; }
main p { margin: 0 0 1.25em; }
main h2 { font-weight: 600; font-size: 25px; line-height: 1.3; margin: 2.4em 0 .6em; text-wrap: balance; scroll-margin-top: 20px; }
main h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em; margin: 1.8em 0 .4em; }
blockquote { margin: 1.4em 0; padding: 0 0 0 18px; border-left: 2px solid var(--rule); font-style: italic; font-size: 19px; color: var(--fg2); }
.cite { color: var(--fg3); font-size: .92em; }
.cite a { white-space: nowrap; }
.cite a { text-decoration: none; }
.cite a:hover { text-decoration: underline; }
.katex-ish { font-style: italic; }

/* figures */
figure.fig { margin: 2.2em 0 2.4em; }
figure.wide { margin-left: calc((var(--measure) - min(var(--wide), 100vw - 32px)) / 2); margin-right: calc((var(--measure) - min(var(--wide), 100vw - 32px)) / 2); }
@media (max-width: 712px) { figure.wide { margin-left: 0; margin-right: 0; } }
figure.fig svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
figure.fig figcaption { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin-top: 10px; max-width: var(--measure); }
figure.wide figcaption { margin-left: auto; margin-right: auto; }
figcaption b { color: var(--fg); font-weight: 600; }
.ctl { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-family: var(--sans); font-size: 13px; color: var(--fg3); flex-wrap: wrap; }
.ctl button { font: inherit; color: var(--fg2); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; cursor: pointer; min-width: 34px; }
.ctl button:hover { border-color: var(--fg4); color: var(--fg); }
.ctl button:focus-visible, .ctl input:focus-visible, .ctl select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctl button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ctl input[type=range] { flex: 1 1 160px; accent-color: var(--accent); min-width: 120px; }
.ctl select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 6px; }
.ctl .grow { flex: 1; }
.ctl .ro { font-family: var(--mono); font-size: 12.5px; color: var(--fg2); min-width: 7em; text-align: right; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* figures follow the paper's figure style: Avenir LT Pro, white panel, light grid */
@font-face { font-family: 'Avenir LT Pro'; src: url('fig/fonts/AvenirLTProLight.otf') format('opentype'); font-weight: 300; }
@font-face { font-family: 'Avenir LT Pro'; src: url('fig/fonts/AvenirLTProRoman.otf') format('opentype'); font-weight: 400; }
@font-face { font-family: 'Avenir LT Pro'; src: url('fig/fonts/AvenirLTProOblique.otf') format('opentype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Avenir LT Pro'; src: url('fig/fonts/AvenirLTProMedium.otf') format('opentype'); font-weight: 500; }
@font-face { font-family: 'Avenir LT Pro'; src: url('fig/fonts/AvenirLTProMediumOblique.otf') format('opentype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Avenir LT Pro'; src: url('fig/fonts/AvenirLTProHeavy.otf') format('opentype'); font-weight: 800; }
figure.fig { overflow-anchor: none; }   /* animated figures replace nodes every frame; as scroll anchors they jerk the page */
.stage { background: transparent; border-radius: 6px; }
figure.fig svg { font-family: 'Avenir LT Pro', 'Avenir Next', 'Avenir', 'Nunito Sans', sans-serif; }
svg text { fill: #444444; font-size: 12.5px; font-weight: 400; }
svg .t-title { fill: #111111; font-size: 16px; font-weight: 800; }
svg .t-big { fill: #111111; font-size: 24px; font-style: italic; font-weight: 400; }
svg .t-sub { fill: #555555; font-size: 14px; font-style: italic; font-weight: 400; }
svg .t-note { fill: #6E6D66; font-size: 12px; font-weight: 300; }
svg .t-gain { fill: #1E9E4A; font-size: 15px; font-weight: 800; }
svg .t-ax { fill: #555555; font-size: 13.5px; font-weight: 300; }
svg .t-lab { fill: #444444; font-size: 15px; font-weight: 400; }
svg .t-leg { fill: #222222; font-size: 14.5px; font-weight: 500; }
svg .t-legt { fill: #555555; font-size: 14.5px; font-weight: 500; font-style: italic; }
svg .t-strong { fill: #111111; font-weight: 800; }
svg .t-mono { font-family: var(--mono); font-size: 11.5px; fill: #444444; }
svg .grid { stroke: #E6E6E6; stroke-width: 1; }
svg .axis { stroke: #9A9A9A; stroke-width: 1.2; }
svg .t-halo { paint-order: stroke; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; }

.refs { font-family: var(--sans); font-size: 13px; color: var(--fg2); line-height: 1.5; }
.refs li { margin-bottom: 6px; }
footer { font-family: var(--sans); font-size: 12.5px; color: var(--fg4); text-align: center; margin: 40px 0 30px; }
.stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 712px) {
  .stage { overflow-x: visible; }
}

.hero .logo { display: block; margin: 0 auto 14px; width: 112px; height: auto; image-rendering: pixelated; }

/* publish copy: no review marking; authors line */
.ai, :root .ai { color: inherit !important; }
.hero .authors { font-family: var(--sans); font-size: 16px; color: var(--fg); margin-top: 16px; line-height: 1.6; text-wrap: balance; }
.hero .authors sup, .hero .meta sup { font-size: .7em; }
.hero .meta { margin-top: 6px; line-height: 1.6; }
.hero .au { white-space: nowrap; }

/* Project-page layout (after grafting.stanford.edu / Nerfies): hero + pills, grey teaser band, short results, full write-up, BibTeX. */
:root { --page: 'Noto Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --link: #034780; --pill: #363636; --pill-fg: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: #8ab4ff; --pill: #e9e9e4; --pill-fg: #131412; } }
:root[data-theme="dark"] { --link: #8ab4ff; --pill: #e9e9e4; --pill-fg: #131412; }
body { font-family: var(--page); font-size: 16.5px; line-height: 1.7; }
header.hero { max-width: 980px; padding: 44px 0 30px; }
.hero h1 { font-family: var(--page); font-weight: 600; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.2; letter-spacing: -0.01em; }
.hero .authors { font-size: 19px; margin-top: 18px; color: var(--link); }
.hero .affil { font-size: 17px; margin-top: 6px; }
.hero .affil span { display: inline-block; margin: 0 .45em; }
.hero .eq { font-size: 14px; color: var(--fg3); margin-top: 6px; }
.pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--pill); color: var(--pill-fg); text-decoration: none; font-size: 15px; }
.pill:hover { opacity: .85; }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill svg { width: 16px; height: 16px; }
.band { background: var(--bg2); margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 26px 16px 14px; }
.band-in { max-width: var(--wide); margin: 0 auto; }
.band figure.wide { margin: 0; }
.band figure.wide figcaption { max-width: var(--wide); }
.brief, .bib { max-width: var(--measure); margin: 0 auto; }
h2.c, h3.c { text-align: center; text-wrap: balance; }
.brief h2.c, .full h2.c, .bib h2.c { font-weight: 600; font-size: 30px; line-height: 1.25; margin: 1.5em 0 .7em; }
.brief h3.c { font-weight: 600; font-size: 22px; line-height: 1.3; margin: 0 0 .7em; }
.brief p { margin: 0 0 1.1em; }
.brief hr { border: none; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.brief figure.fig { margin-bottom: 0; }
.more { text-align: center; font-weight: 600; margin-top: 2.4em !important; }
.more a { color: var(--link); text-decoration: none; }
.full { border-top: 1px solid var(--rule); margin: 3.2em calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: .4em 16px 0; }
.full .tldr { text-align: justify; hyphens: auto; }
main h2 { font-family: var(--page); }
.bib { border-top: 1px solid var(--rule); }
.bib pre { background: var(--bg2); padding: 14px 16px; border-radius: 6px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
footer a { color: inherit; }
@media (max-width: 712px) { .brief h2.c, .full h2.c, .bib h2.c { font-size: 25px; } .brief h3.c { font-size: 19.5px; } .hero .authors { font-size: 17px; } .hero .affil { font-size: 15.5px; } }
@media print { .ctl, nav.toc, .pills { display: none; } figure { break-inside: avoid; } .band { background: none; } }
.ctl .ro:empty { display: none; }
@media (pointer: coarse) { .ctl select { padding: 8px 10px; min-height: 36px; } }
/* page font: Notion's system stack */
:root { --page: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --fg: #37352f; }
body { font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.hero h1, h2.c, main h2 { font-weight: 700; }
main > .tldr:first-child, main > .readtime + .tldr { margin-top: 0; }
.ctl { justify-content: center; }
.ctl .seg { flex-basis: 100%; justify-content: center; }
.tldr { font: inherit; }
/* TL;DR: a light green box with an even border all round (no side bar), small label over the text */
.tldr b { display: block; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--accent-ink); margin: 0 0 4px; }
/* examples picker: ARC grids, MIR pairs, repository trees */
figure.fig .ex-in .ex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; }
figure.fig .ex-in .ag { display: inline-grid; gap: 1px; background: #CCCCCC; border: 1px solid #CCCCCC; vertical-align: middle; }
figure.fig .ex-in .ag i { display: block; width: 7px; height: 7px; }
figure.fig .ex-in .ar { color: #999999; }
figure.fig .ex-in pre, figure.fig .ex-in code { font: 12px/1.45 'JetBrains Mono', ui-monospace, Menlo, monospace; }
figure.fig .ex-in pre { margin: 4px 0 8px; white-space: pre; overflow-x: auto; color: #4a4a46; }
figure.fig .ex-in .mut { color: #999999; }
figure.fig .ex-in { height: auto; }
/* captions: centred, smaller and grey so they read apart from the body text */
figure.fig figcaption { text-align: center; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: #787774; max-width: 640px; margin: 12px auto 0; text-wrap: pretty; }
figure.fig figcaption b { color: #4a4a46; }
/* dark mode: the figures keep the paper's light palette on a light card, so the budget ramp keeps its order
   (light = small, dark = large) and the captions name colours that are on screen */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) figure.fig .stage, :root:not([data-theme="light"]) figure.fig .ex { background: #FAFAF7; border-radius: 10px; }
  :root:not([data-theme="light"]) figure.fig .stage { padding: 10px; } :root:not([data-theme="light"]) figure.fig .ex { color: #37352f; }
  :root:not([data-theme="light"]) figure.fig figcaption { color: var(--fg3); } :root:not([data-theme="light"]) figure.fig figcaption b { color: var(--fg2); } }
:root[data-theme="dark"] figure.fig .stage, :root[data-theme="dark"] figure.fig .ex { background: #FAFAF7; border-radius: 10px; color: #37352f; }
:root[data-theme="dark"] figure.fig .stage { padding: 10px; }
/* phones: figures without a narrow layout keep a readable size and scroll sideways */
@media (max-width: 600px) { figure.fig[data-fig="online"] .stage, figure.fig[data-fig="harvey"] .stage { overflow-x: auto; }
  figure.fig[data-fig="online"] .stage svg, figure.fig[data-fig="harvey"] .stage svg { min-width: 680px; } }
/* example context and task under the benchmark picker */
figure.fig .ex-in { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: #4a4a46; padding: 8px 12px; border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF; height: 100%; box-sizing: border-box; overflow: hidden; }
@media (max-width: 600px) { figure.fig .ex-in { font-size: 13px; } }
figure.fig .stage.err { font-family: var(--sans); font-size: 14px; color: var(--fg3); padding: 24px; text-align: center; }

/* per-method tint on the Harvey picker */
.ctl button[style*="--mc"] { color: var(--mc); border-color: color-mix(in srgb, var(--mc) 55%, transparent); }
.ctl button.on[style*="--mc"] { background: var(--mc); border-color: var(--mc); color: #fff; }
.readtime { margin: 0 0 8px; font-size: 13.5px; color: var(--fg3, #787774); }
/* hero: title block on the left, the methodology figure on the right */
header.hero { max-width: 1280px; padding: 44px 24px 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 44px; align-items: center; text-align: left; }
.hero h1 { font-size: clamp(28px, 3.4vw, 42px); text-wrap: balance; }
.hero .affil span { margin: 0 .9em 0 0; }
.hero .pills { justify-content: flex-start; }
.hero-fig figure.fig { margin: 0; }
.hero-fig figure.fig figcaption { font-size: 12.5px; text-align: left; max-width: none; }
@media (max-width: 900px) { header.hero { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.ctl.player { justify-content: flex-start; gap: 8px; margin: 10px 0 0; }
.ctl.player input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
.ctl.player input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--v, 100%), #DDDDDD var(--v, 100%)); }
.ctl.player input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--v, 100%), #DDDDDD var(--v, 100%)); }
.ctl.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; border: 0; background: var(--accent); }
.ctl.player input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--accent); }
/* paused: a larger thumb carrying a pause mark */
.ctl.player input[type=range].paused::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='7' width='3' height='10' rx='1' fill='white'/%3E%3Crect x='13' y='7' width='3' height='10' rx='1' fill='white'/%3E%3C/svg%3E") center/24px no-repeat; }
.ctl.player input[type=range].paused::-moz-range-thumb { width: 24px; height: 24px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='7' width='3' height='10' rx='1' fill='white'/%3E%3Crect x='13' y='7' width='3' height='10' rx='1' fill='white'/%3E%3C/svg%3E") center/24px no-repeat; }
details.more { margin: -1.2em 0 2.4em; font-family: var(--sans); }
details.more > summary { cursor: pointer; font-size: 14px; color: var(--accent-ink, #0B6B3A); text-align: center; list-style: none; }
details.more > summary::before { content: '▸ '; } details.more[open] > summary::before { content: '▾ '; }
details.more > summary::-webkit-details-marker { display: none; }
figure.closing img { display: block; width: 100%; height: auto; border-radius: 12px; image-rendering: pixelated; }

/* authors: plain text; only the authors with homepages are links */
.hero .authors { color: var(--fg); }
.hero .authors a { color: var(--link); text-decoration: none; }
.hero .authors a:hover { text-decoration: underline; }
/* the play/scrub bar is as wide as the caption text, not the full figure */
.ctl.player { max-width: 640px; margin-left: auto; margin-right: auto; }

/* example context and task under the offline figure: fixed height, scrolls inside, so switching benchmarks doesn't move the page */
figure.fig .exbox { margin: 10px 0 6px; }
figure.fig .exbox .ex-in { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
figure.fig .exbox .ex-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999999; }
figure.fig .exbox pre { max-height: none; }
@media (max-width: 600px) { figure.fig .exbox .ex-in { height: 300px; } }
/* keep the task visible: the context scrolls inside the box, the task stays pinned at the bottom */
figure.fig .exbox .ex-in { overflow: hidden; }
figure.fig .exbox .ex-c { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
figure.fig .exbox .ex-q { flex: 0 0 auto; border-top: 1px solid #EEEEEE; padding-top: 6px; }
/* collapsible definition of the metric E, above the offline figure */
details.metric { margin: 0 0 1.6em; font-family: var(--sans); border: 1px solid #DDDDDD; border-radius: 8px; padding: 8px 14px; }
details.metric > summary { cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; }
details.metric > summary::-webkit-details-marker { display: none; }
details.metric > summary::before { content: '▸ '; color: #999999; } details.metric[open] > summary::before { content: '▾ '; }
details.metric p { margin: 8px 0 2px; font-size: 15px; line-height: 1.55; }
@media (prefers-color-scheme: dark) { details.metric { border-color: #333333; } }
/* larger ARC cells, a taller box so each benchmark's context fills it, and the ARC task grid centred on its sentence */
figure.fig .ex-in .ag i { width: 10px; height: 10px; }
figure.fig .exbox .ex-in { height: 330px; }
figure.fig .exbox .ex-task { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
@media (max-width: 600px) { figure.fig .exbox .ex-in { height: 360px; } }
figure.fig .ex-in .ag i { width: 14px; height: 14px; }
figure.fig .exbox .ex-q .ag i { width: 12px; height: 12px; }
details.metric .eqn { overflow-x: auto; margin: 6px 0 0; font-size: 15px; }
details.metric .eqn-note { margin-top: 0; font-size: 14px; }
/* affiliation logos under the affiliation line (as on the Distill to Detect page); on a light pill in dark mode so the red and dark marks stay visible */
.logo-row { display: inline-flex; align-items: center; gap: 22px; margin-top: 14px; padding: 6px 14px 6px 4px; border-radius: 10px; }
.logo-row img { display: block; opacity: .9; }
.logo-row .lg-stanford { height: 46px; }
.logo-row .lg-meta { height: 20px; }
.logo-row .lg-sil { height: 36px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-row { background: #F3F3EE; padding-left: 12px; } }
:root[data-theme="dark"] .logo-row { background: #F3F3EE; padding-left: 12px; }
@media (max-width: 640px) { .logo-row { gap: 14px; } .logo-row .lg-stanford { height: 38px; } .logo-row .lg-meta { height: 17px; } .logo-row .lg-sil { height: 30px; } }
/* play / pause / replay button in front of each animated figure's scrubber */
.ctl.player .pp { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--accent); color: #FFFFFF; font-size: 14px; line-height: 32px; text-align: center; cursor: pointer; padding: 0; }
.ctl.player .pp:hover { filter: brightness(1.1); }
.ctl.player .pp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }