/* ShellElastic project page.
   Colour tokens live on :root; the dark values (selected, not inverted) follow the system's colour scheme.
   Series colours follow the paper's figures, with adjusted steps on the dark surface. */

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f1f0ec;
  --ink: #1f1e1b; /* the warm ink of the page's neutral family */
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.20);
  --link: #1c5cab;
  --danger: #d03b3b;
  --danger-bg: rgba(208, 59, 59, 0.07);
  --badge-edge: transparent; /* a link badge's outline: only where its colour meets a dark page */
  --ours-bg: rgba(235, 104, 52, 0.10);
  --ours-edge: #eb6834;
  --name-ink: #8b4513; /* the method's name in the title, in the paper's colour for ShellElastic */
  /* the title's mark (index.html .title-mark): the core in the name's ink, each shell one step closer to the page
     (an OKLab ramp; the last still 3.2:1 on the page, 3.3:1 in dark) */
  --logo-core: #8b4513;
  --logo-w2: #a05b2b;
  --logo-w3: #ab6636;
  --logo-w4: #b67141;
  --logo-w5: #c17c4c;
  --focus: #2a78d6;
  --hover-bg: rgba(11, 11, 11, 0.045);
  --shadow: 0 2px 8px rgba(11, 11, 11, 0.14);
  --overlay: rgba(11, 11, 11, 0.55);
  --mark-bg: #fde7a8;
  --mark-cur: #f5b642;
  --pin-bg: rgba(42, 120, 214, 0.10);
  --pin-edge: #2a78d6;
  --paper-sheet: #ffffff; /* the sheet under the paper's own crops, and in the lightbox */
  --sheet-ink: #52514e; /* marks drawn on that sheet, which stays light in both themes */
  --field-edge: #898781; /* the edge of text fields and selects: 3:1 on the page and the surface */
  --scroll-shade: rgba(31, 30, 27, 0.2); /* a scroller's edge where more of it is hidden */
  --ph-ink: #b83131; /* the BibTeX placeholder */

  /* series (paper palette) */
  --c-blue: #2a78d6;
  --c-orange: #eb6834;
  --c-aqua: #1baf7a;
  --c-yellow: #eda100;
  --c-magenta: #e87ba4;
  --c-green: #008300;
  --c-violet: #4a3aa7;
  --c-red: #e34948;
  --c-red-2: #e34948;
  --c-ref: #52514e;
  --c-core: #2b2b29;
  --c-neutral: #8b8a84;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* type scale on the 16 px body: one size per heading level */
  --fs-meta: 0.8125rem; /* 13: paper places, card kickers, footnotes, chapter times */
  --fs-small: 0.875rem; /* 14: section links, card footers, chapter titles */
  --fs-lede: 1.0625rem; /* 17: lede, authors, displayed equations */
  --fs-h4: 1.0625rem; /* 17: card titles */
  --fs-h3: 1.25rem; /* 20: every third-level heading */
  --fs-h2: 1.75rem; /* 28: sections */
  --radius: 10px;
  --gutter: 16px;
  --maxw: 1120px;
  --nav-h: 56px; /* the sticky header (in-page links land below it) */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --ink: #ecebe6;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #4a4a46;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --link: #86b6ef;
    --danger: #e66767;
    --danger-bg: rgba(230, 103, 103, 0.10);
    --badge-edge: rgba(255, 255, 255, 0.16);
    --ours-bg: rgba(217, 89, 38, 0.17);
    --ours-edge: #d95926;
    --name-ink: #cf8a59; /* the paper's brown at a lightness that reads on the dark page (6.9:1) */
    --logo-core: #cf8a59;
    --logo-w2: #b97344;
    --logo-w3: #ae6839;
    --logo-w4: #a35d2e;
    --logo-w5: #985223;
    --focus: #86b6ef;
    --hover-bg: rgba(255, 255, 255, 0.06);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    --overlay: rgba(0, 0, 0, 0.7);
    --mark-bg: #5c4a12;
    --mark-cur: #9a6f00;
    --pin-bg: rgba(134, 182, 239, 0.14);
    --pin-edge: #86b6ef;
    --paper-sheet: #e3e2dc;
    --field-edge: #6e6d68;
    --scroll-shade: rgba(0, 0, 0, 0.6);
    --ph-ink: var(--danger);
    --c-blue: #256abf;
    --c-orange: #d95926;
    --c-aqua: #199e70;
    --c-yellow: #c98500;
    --c-magenta: #d55181;
    --c-green: #008300;
    --c-violet: #9085e9;
    --c-red: #e66767;
    --c-red-2: #e34948;
    --c-ref: #c3c2b7;
    --c-core: #e1e0d9;
    --c-neutral: #8b8a84;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* sections receive focus (tabindex -1) after an in-page link; the link itself already showed where focus went */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }
/* Plotly draws a 1px black outline on focused modebar buttons (invisible on the dark surface) */
.js-plotly-plot .plotly .modebar .modebar-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 3px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 16px; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
p { margin: 0 0 12px; }
code, pre, kbd { font-family: var(--mono); }
sup, sub { line-height: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: none; } /* text spans the full content width, like the tables and figures */
.muted { color: var(--ink-2); }
.small { font-size: 0.88rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 6px 10px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }
noscript p { background: var(--danger-bg); color: var(--ink); padding: 10px 14px; border-radius: 8px; }

/* ------------------------------------------------------------------ header */
/* frosted where the browser can blur the page passing under it, except on touch screens: on a phone the blurred
   header was seen covering the title after the first scroll. Never a scroll anchor. */
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: var(--page); border-bottom: 1px solid var(--border);
  overflow-anchor: none;
}
@media (hover: hover) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
      background: color-mix(in srgb, var(--page) 80%, transparent);
      -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
    }
  }
}
.site-header-row { display: flex; align-items: center; gap: 12px; height: 100%; }
/* the title's name and mark in the title's proportions; at 1.625rem the mark is 20 px (2.5 px blocks) */
.brand {
  flex: none; display: inline-flex; align-items: baseline; padding: 8px 0; color: var(--name-ink); text-decoration: none;
  font-size: 1.625rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
}
.brand .title-mark { flex: none; width: 0.77em; height: 0.77em; margin-right: 0.18em; }
/* the link of the section being read is marked (app.js); links that do not fit scroll sideways, and the side with
   more of them fades (data-more) */
.header-nav { display: flex; gap: 2px; min-width: 0; margin-left: auto; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.header-nav::-webkit-scrollbar { display: none; }
.header-nav a {
  flex: none; padding: 8px 15px; border-radius: 999px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 500;
  line-height: 1.4; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) {
  .header-nav a:hover { background: var(--hover-bg); color: var(--ink); }
}
.header-nav a[aria-current="true"] { background: var(--pin-bg); color: var(--link); }
.header-nav[data-more="right"] { -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
.header-nav[data-more="left"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.header-nav[data-more="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* Paper, Ckpts and Code open the addresses of the hero's badges (app.js renderHero) */
.header-links { flex: none; display: flex; gap: 8px; }
.header-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.header-btn.primary { border-color: var(--ink); background: var(--ink); color: var(--page); }
@media (hover: hover) {
  .header-btn:hover { background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--surface); }
  .header-btn.primary:hover { border-color: var(--ink-2); background: var(--ink-2); }
}
@media (forced-colors: active) {
  .header-nav a[aria-current="true"] { text-decoration: underline 2px; text-underline-offset: 4px; }
}
/* narrower windows: closer links, then the mark alone (24 px, 3 px blocks; the name stays for screen readers). Phones
   get two rows: the name with Paper, Ckpts and Code on a line that never wraps (sized in vw to fit from 360 px; below
   that the mark alone), then the section links */
@media (max-width: 1100px) {
  .header-nav a { padding: 8px 11px; }
}
@media (min-width: 641px) and (max-width: 1030px), (max-width: 359px) {
  .brand .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .brand .title-mark { width: 1.5rem; height: 1.5rem; margin-right: 0; }
}
@media (max-width: 640px) {
  :root { --nav-h: 80px; }
  .site-header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0 8px; }
  .brand { grid-area: 1 / 1; min-width: 0; overflow: hidden; padding: 4px 0; font-size: clamp(1.125rem, 5vw, 1.5rem); }
  .header-links { grid-area: 1 / 2; gap: 6px; }
  .header-btn { height: 32px; padding: 0 clamp(8px, 2.4vw, 12px); font-size: clamp(0.75rem, 3.5vw, 0.875rem); }
  .header-nav { grid-area: 2 / 1 / 3 / 3; margin: 0 -4px; }
  .header-nav a { padding: 6px 11px; }
}

/* ------------------------------------------------------------------ hero */
.hero { text-align: center; padding: 44px 0 24px; }
.hero h1 { font-size: 1.5rem; font-weight: 700; max-width: 960px; margin: 0 auto 20px; }
/* the title as the method's name over its subtitle (see renderHero(); the heading's text stays the full title). The
   name and its mark stay on one line: on narrow screens (or with a large root font) the size is capped so that the
   two fit the column, about 7.1em in the widest system font (DejaVu Sans Bold) */
.hero h1 .title-name {
  display: block; font-size: min(clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem), calc((100vw - 2 * var(--gutter)) / 7.2));
  line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; margin-bottom: 0.22em; color: var(--name-ink);
}
/* the mark before the name: the paper's Figure 1(a) staircase (a 4 x 4 dense core of an 8 x 8 grid and shells of 5 to
   8 blocks), about as tall as the name's ascenders, its floor on the baseline; 40 px at the widest title, 5 px per
   block (index.html gives it 40 x 40 for a page without this stylesheet) */
.hero h1 .title-mark { display: inline-block; width: 0.77em; height: 0.77em; margin-right: 0.18em; }
.title-mark .core { fill: var(--logo-core); }
.title-mark .w2 { fill: var(--logo-w2); }
.title-mark .w3 { fill: var(--logo-w3); }
.title-mark .w4 { fill: var(--logo-w4); }
.title-mark .w5 { fill: var(--logo-w5); }
.hero h1 .title-sub {
  display: block; margin: 0 auto; font-size: clamp(1.0625rem, 0.9rem + 0.75vw, 1.5rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance;
}
.hero h1 .title-line { display: block; } /* the subtitle's second line, from 'with' (see renderHero()) */
/* the full title's colon: inside the name and at zero size, so that the heading reads and copies as one title */
.hero h1 .title-colon { font-size: 0; }
.authors { font-size: var(--fs-lede); margin: 0 auto 6px; max-width: 900px; line-height: 1.6; text-wrap: balance; }
.authors .author { white-space: nowrap; }
.authors sup { font-size: 0.72em; margin-left: 1px; }
.affiliations { color: var(--ink-2); margin: 0 0 6px; }
.affiliations span { display: inline-block; margin: 0 10px; }
.footnotes { color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.5; margin: 0 auto 18px; max-width: 760px; text-wrap: balance; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; margin: 8px auto 0; }
/* the links: label | message in the look of shields.io's "for-the-badge" style (its sizes; the letter spacing also
   follows the last letter, hence the smaller right padding) */
.badge {
  display: inline-flex; height: 28px; font: 10px/28px Verdana, Geneva, "DejaVu Sans", sans-serif; letter-spacing: 1.25px;
  text-transform: uppercase; white-space: nowrap; color: #fff; text-decoration: none; box-shadow: 0 0 0 1px var(--badge-edge);
}
.badge > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 10.75px 0 12px; }
.badge .badge-label { background: #555; }
.badge .badge-label.with-logo { padding-left: 9px; }
.badge .badge-msg { font-weight: 700; }
.badge svg { flex: none; }
a.badge[href]:hover { text-decoration: none; filter: brightness(1.15); }
.badge.placeholder { outline: 2px dashed var(--danger); outline-offset: 2px; cursor: not-allowed; }
/* forced colours drop the fills: a box and a divider keep each label | message pair together */
@media (forced-colors: active) {
  .badge { border: 1px solid LinkText; }
  .badge .badge-msg { border-left: 1px solid LinkText; }
}

/* ------------------------------------------------------------------ sections */
.page-section { padding: 56px 0 16px; }
.page-section + .page-section { border-top: 1px solid var(--border); }
/* the Overview: the paper's story in the page's words (index.html), in four numbered parts */
.lede { font-size: var(--fs-lede); line-height: 1.6; }
.story-part { margin-top: 40px; }
.story-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
/* the part numbers, like a paper's section numbers: quiet numerals at the heading's size */
.story-n { flex: none; min-width: 0.7em; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.story-grid { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; gap: 14px; }
.story-grid.problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-grid.answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .story-grid.problems { grid-template-columns: minmax(0, 1fr); }
}
.story-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong); border-radius: var(--radius); padding: 16px 20px 14px;
}
.story-card.answer { border-top-color: var(--ours-edge); }
/* the problem cards share their rows (kicker, title, text, footer), so their titles, texts and footer rules line up;
   a kicker that wraps moves the other kickers down onto their titles */
@supports (grid-template-rows: subgrid) {
  .story-grid.problems > .story-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .story-grid.problems > .story-card > .card-kicker { align-self: end; }
  .story-grid.problems > .story-card > .card-link { margin-top: 0; }
}
.story-card h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; margin: 6px 0 10px; }
.card-kicker { margin: 0; font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.story-card .card-link, .story-card .refs { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.45; }
.card-link { font-size: var(--fs-small); color: var(--ink-2); }
.refs { font-size: var(--fs-small); color: var(--ink-2); }
.findings { margin: 12px 0 14px; padding-left: 1.2em; }
.findings li { margin-bottom: 10px; }
.findings li::marker { color: var(--ours-edge); }
.findings .refs { margin-left: 4px; } /* breaks only at the ' · ' separators: each place is a .nw tie */
.story-next { color: var(--ink-2); }
/* the paper's own text (Method, and each result's reading): its place in the paper, statements and equations */
.paper-loc { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
.method-body > p { margin-bottom: 10px; }
.method-body > .method-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 48px 0 10px;
}
.method-body > .method-h:first-child { margin-top: 4px; }
.method-body > .paper-figure { margin: 18px 0 20px; }
.method-explainer { margin: 18px 0 20px; }
/* the paper's statements as the paper sets them: a plain rule, no box */
.statement { margin: 20px 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--ink-2); }
.statement p { margin: 0 0 6px; }
.statement .paper-loc { display: block; text-align: right; }
/* 'safe': a formula wider than the column starts at its left edge and scrolls, instead of being cut on both sides */
.method-body > .equation {
  display: flex; flex-wrap: wrap; justify-content: center; justify-content: safe center; gap: 4px 2.5em; margin: 4px 0 14px;
  font-size: var(--fs-lede); overflow-x: auto;
  background: /* as .table-wrap, over the page */
    linear-gradient(to right, var(--page) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--page) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right center / 14px 100% no-repeat scroll;
}
.equation > span { white-space: nowrap; }
.result-text { margin: 0 0 6px; }
.result-text p { margin-bottom: 10px; }
/* the paper video (media/), right under the hero with no heading of its own, and its chapters (data/video.json) */
#video { padding: 8px 0 32px; }
/* the fill, shown until the poster has loaded, is the poster's own navy in both themes (so the start control reads on
   it from the first paint); it stops inside the border, which is translucent in dark mode */
.video-frame {
  position: relative; max-width: 960px; margin: 0 auto; line-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: #01040e; background-clip: padding-box;
}
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video-frame:has(> .video-start) > video { cursor: pointer; } /* before the first play, a click on the poster plays */
/* the frame clips the video's own focus outline (rounded corners): draw it on the frame */
.video-frame:has(> video:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.video-frame:has(> video:focus-visible) > video { outline: none; }
/* before the first play: one start control in the poster's empty top band, drawn like the poster's own white outlines
   (see renderVideoStart()) */
.video-start {
  position: absolute; top: 4.5%; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; background: transparent; color: #ffffff;
  font: 600 var(--fs-small)/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer;
}
.video-start svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.video-start:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.video-start:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 999px; }
@media (forced-colors: active) {
  .video-start { border: 1px solid ButtonText; background: ButtonFace; }
  .video-chapters button[aria-current="true"] .chapter-title { text-decoration: underline 2px; text-underline-offset: 3px; }
}
/* the chapters as a bar under the video, one segment per chapter, as long as the chapter (--lengths, in fr: never
   narrower than its title's longest word); a segment fills (--done) as its chapter plays */
.video-chapters {
  max-width: 960px; margin: 14px auto 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: var(--lengths); gap: 12px;
}
.video-chapters button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 10px 0 0; border: 0;
  border-radius: 0; text-align: left; cursor: pointer; color: var(--ink-2);
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--done, 0%) 2px no-repeat,
    linear-gradient(var(--track, var(--axis)), var(--track, var(--axis))) 0 0 / 100% 2px no-repeat;
}
@media (hover: hover) {
  .video-chapters button:hover { --track: var(--ink-2); color: var(--ink); }
}
.video-chapters button[aria-current="true"] { color: var(--ink); }
.chapter-time { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.chapter-title { font-size: var(--fs-small); line-height: 1.35; }
@media (max-width: 640px) {
  .video-start { top: auto; bottom: 5%; min-height: 36px; } /* phones: the poster's empty floor band */
  .video-chapters { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
  .video-chapters button { flex-direction: row; align-items: baseline; gap: 12px; padding: 9px 0 8px; }
  .chapter-time { flex: none; min-width: 2.4em; }
}
/* narrower phones (below 390 px): a smaller control, which stays below the poster's matrix */
@media (max-width: 389px) {
  .video-start { bottom: 3%; min-height: 28px; gap: 6px; padding: 0 12px 0 10px; }
}

figure { margin: 0; }
.paper-figure { margin: 22px 0 8px; }
/* a paper figure (an image that includes its caption) is shown at most --fig-w wide (set per figure from its size;
   see app.js), centred, on a square sheet: the paper's own material */
.paper-figure .img-btn {
  display: block; width: 100%; max-width: var(--fig-w, 706px); margin: 0 auto; padding: 12px; background: var(--paper-sheet);
  border: 1px solid var(--border); border-radius: 2px; cursor: zoom-in; line-height: 0;
}
.paper-figure .img-btn img { width: 100%; height: auto; display: block; aspect-ratio: auto 2.4 / 1; }
/* dark mode: the crops are multiplied into the dimmed sheet, so that their white takes the sheet's tone */
@media (prefers-color-scheme: dark) and (forced-colors: none) {
  .paper-figure .img-btn img, #lightbox .lb-body img { mix-blend-mode: multiply; }
}
/* phones: the crops are too small to read inline, so the sheet shows a magnifier: a click enlarges it */
@media (max-width: 760px) {
  .paper-figure .img-btn { position: relative; padding-bottom: 34px; }
  .paper-figure .img-btn::before, .paper-figure .img-btn::after { content: ""; position: absolute; pointer-events: none; }
  .paper-figure .img-btn::before {
    right: 18px; bottom: 11px; width: 11px; height: 11px; border: 2px solid var(--sheet-ink); border-radius: 50%;
  }
  .paper-figure .img-btn::after {
    right: 13px; bottom: 8px; width: 7px; height: 2px; background: var(--sheet-ink); transform: rotate(45deg);
  }
}
/* several figures in one place (Figure 3 and its appendix companions) */
.gallery-bar { margin: 4px 0 12px; }
.gallery-bar .gallery-pick { display: none; }
/* the pressed button keeps its width (no bold), so the arrows next to the count never move */
.gallery-bar .seg button[aria-pressed="true"] { font-weight: inherit; }
.gallery-step { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; }
.gallery-count { font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3.6em; text-align: center; }
.gallery-stage {
  position: relative;
  touch-action: pan-y; touch-action: pan-y pinch-zoom; /* sideways swipes are ours; keep pinch-zoom where supported */
}
.gallery-frame { display: flex; justify-content: center; }
.gallery-nav {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 0 3px;
}
@media (hover: hover) {
  .gallery-nav:hover { background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--surface); }
}
/* below the width where the first button group fits on one line: one compact list instead of the groups */
@media (max-width: 1040px) {
  .gallery-bar .gallery-group { display: none; }
  .gallery-bar .gallery-pick { display: flex; min-width: 0; }
  .gallery-pick select { max-width: 100%; }
}
/* reserve roughly the built height of lazily built parts, so that only the parts near the viewport are built and
   the page moves little when they are */
.result-body:empty { min-height: var(--ph, 1500px); }
#explore-app:empty { min-height: var(--ph, 900px); }
#main > .result-body { --ph: 1870px; }
#transfer > .result-body { --ph: 1130px; }
#maximal-updates > .result-body { --ph: 1590px; }
#arch > .result-body { --ph: 2000px; }
#ablations > .result-body { --ph: 2030px; }
#ensembles > .result-body { --ph: 2080px; }
#explore-app { --ph: 920px; }
.table-caption { font-size: 0.9rem; color: var(--ink-2); margin-top: 10px; line-height: 1.55; }
.fig-ref { font-weight: 700; color: var(--ink); }
.missing { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 18px; color: var(--ink-2); font-size: 0.9rem; background: var(--surface); }

.result { padding: 40px 0 20px; border-top: 1px solid var(--border); }
.result:first-of-type { border-top: 0; }
/* the heading opens with the paper's reference ("Table 2: ...") */
.result-head { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.result-head .paper-loc { margin-left: auto; }
.data-note {
  border-left: 3px solid var(--border-strong); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px; margin: 4px 0 8px; font-size: 0.93rem; color: var(--ink-2);
}
.data-note strong { color: var(--ink); }
.note-ref { font-size: 0.86rem; color: var(--ink-2); margin: 6px 0 0; }

/* ------------------------------------------------------------------ paper tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); }
/* a scroller (a paper table, or a data table below) shades its side where more columns are hidden: covers that scroll
   with the content over shades that stay at the edges */
.table-wrap, .data-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right center / 14px 100% no-repeat scroll,
    var(--surface);
}
table.paper { border-collapse: collapse; width: 100%; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
table.paper th, table.paper td { padding: 5px 8px; text-align: right; white-space: nowrap; }
table.paper thead th { font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--border-strong); }
table.paper thead tr:first-child th { border-bottom: 1px solid var(--border); }
table.paper thead th.span { text-align: center; }
table.paper th.rowlabel, table.paper td.rowlabel { text-align: left; font-weight: 500; color: var(--ink); }
table.paper th.rowlabel.sub { padding-left: 22px; }
table.paper .gstart { border-left: 10px solid transparent; }
table.paper tr.group th { text-align: left; background: var(--surface-2); color: var(--ink); font-weight: 650; font-size: 0.82rem; letter-spacing: 0.02em; padding: 6px 8px; }
table.paper tbody tr.row { cursor: default; }
table.paper tbody tr.row.linked { cursor: pointer; }
table.paper tbody tr.row:hover, table.paper tbody tr.row.active { background: var(--hover-bg); }
table.paper tbody tr.row.ours { background: var(--ours-bg); }
table.paper tbody tr.row.ours th.rowlabel { box-shadow: inset 3px 0 0 var(--ours-edge); }
table.paper tbody tr.row.ours.active, table.paper tbody tr.row.ours:hover { background: color-mix(in srgb, var(--ours-bg) 100%, var(--hover-bg)); }
/* the row shown in the curves below (pinned): a blue bar and tint, no text mark (it could read as a footnote) */
table.paper tbody tr.row.pinned, table.paper tbody tr.row.ours.pinned { background: var(--pin-bg); }
table.paper tbody tr.row.pinned th.rowlabel { box-shadow: inset 4px 0 0 var(--pin-edge); }
table.paper tbody tr.row.ours.pinned th.rowlabel { box-shadow: inset 4px 0 0 var(--pin-edge), inset 7px 0 0 var(--ours-edge); }
table.paper td strong { font-weight: 700; color: var(--ink); }
table.paper tbody tr.row:focus-visible { outline-offset: -2px; }
/* narrow screens: the row labels (and each group's scale) stay in view while the numbers scroll; a sticky label is
   opaque, so it repeats its row's tint over the surface, and its right edge separates it from the numbers passing
   under it (our and the pinned rows keep their bars) */
@media (max-width: 860px) {
  table.paper th.rowlabel {
    position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--border-strong);
  }
  table.paper tbody tr.row:hover th.rowlabel, table.paper tbody tr.row.active th.rowlabel {
    background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--surface);
  }
  table.paper tbody tr.row.ours th.rowlabel {
    background: linear-gradient(var(--ours-bg), var(--ours-bg)), var(--surface);
    box-shadow: inset 3px 0 0 var(--ours-edge), inset -1px 0 0 var(--border-strong);
  }
  table.paper tbody tr.row.pinned th.rowlabel {
    background: linear-gradient(var(--pin-bg), var(--pin-bg)), var(--surface);
    box-shadow: inset 4px 0 0 var(--pin-edge), inset -1px 0 0 var(--border-strong);
  }
  table.paper tbody tr.row.ours.pinned th.rowlabel {
    box-shadow: inset 4px 0 0 var(--pin-edge), inset 7px 0 0 var(--ours-edge), inset -1px 0 0 var(--border-strong);
  }
  table.paper tr.group .glabel { position: sticky; left: 8px; display: inline-block; }
  /* the label covers its row's focus outline: it continues the outline over itself (in forced colours also the pinned
     row's outline; see the end of the file) */
  table.paper tbody tr.row:focus-visible > th.rowlabel::after {
    content: ""; position: absolute; inset: 0; border: 2px solid var(--focus); border-right: 0; pointer-events: none;
  }
}

/* ------------------------------------------------------------------ explorer chrome */
.explorer { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 10px; }
.explorer > h4 { font-size: 1rem; margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.explorer > h4 .hint { font-weight: 400; font-size: 0.85rem; color: var(--ink-2); }
.explorer .desc { font-size: 0.88rem; color: var(--ink-2); margin-bottom: 10px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin: 6px 0 10px; }
.control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.control > .label { font-size: 0.78rem; color: var(--ink-2); font-weight: 600; letter-spacing: 0.01em; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); max-width: 100%; }
.seg button {
  border: 0; background: transparent; padding: 5px 11px; cursor: pointer; font-size: 0.86rem; color: var(--ink-2);
  border-right: 1px solid var(--border); min-height: 32px; white-space: nowrap;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--hover-bg); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); font-weight: 600; }
/* .seg clips what lies outside its buttons (overflow: hidden): draw the focus outline inside the focused button */
.seg button:focus-visible { position: relative; z-index: 1; outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--surface); }
.seg button:disabled { cursor: not-allowed; opacity: 0.45; }
select.sel, input.inp {
  border: 1px solid var(--field-edge); background: var(--surface); border-radius: 8px; padding: 5px 8px; min-height: 32px;
  font-size: 0.88rem; font-weight: 400; max-width: 100%; color: var(--ink);
}
input.inp::placeholder { color: var(--ink-2); opacity: 0.8; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--ink); min-height: 32px; cursor: pointer; }
.toggle input { width: 16px; height: 16px; accent-color: var(--ink); }
.range-wrap { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 0.86rem; }
.range-wrap input[type="range"] { width: 130px; accent-color: var(--ink); }
.range-wrap output { font-variant-numeric: tabular-nums; min-width: 2.6em; color: var(--ink); }
.btn-small {
  border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; padding: 5px 10px; min-height: 32px;
  font-size: 0.86rem; cursor: pointer; color: var(--ink);
}
.btn-small:hover { background: var(--hover-bg); }
.btn-small:disabled { opacity: 0.5; cursor: not-allowed; }

.chart-box { position: relative; min-height: 120px; }
.chart { width: 100%; }
.chart-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: 0.9rem; pointer-events: none; }
.chart-box.loading .chart { opacity: 0.45; transition: opacity 0.15s; }
.chart-title { font-size: 0.9rem; font-weight: 650; margin: 2px 0 2px; color: var(--ink); }
.chart-sub { font-size: 0.82rem; color: var(--ink-2); margin: 0 0 4px; }
.chart-note { font-size: 0.82rem; color: var(--ink-2); margin: 4px 0 0; }

/* legend: line keys for lines, rect keys for bars; text in text tokens */
.legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 2px 0 4px; padding: 0; list-style: none; }
.legend li { display: contents; }
.legend .item {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 3px 5px; border-radius: 6px;
  font-size: 0.84rem; color: var(--ink); cursor: pointer; text-align: left; line-height: 1.3; max-width: 100%;
}
.legend .item:hover { background: var(--hover-bg); }
.legend .item[aria-pressed="false"] { color: var(--ink-2); }
.legend .item[aria-pressed="false"] .key { opacity: 0.3; }
.legend .item[aria-pressed="false"] .lab { text-decoration: line-through; }
.legend .item.static { cursor: default; }
.legend .item.static:hover { background: none; }
.legend .item.ours .lab { font-weight: 700; }
.legend .key { flex: none; overflow: visible; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.split > * { min-width: 0; }
/* Figure 3: the sweep chart ends with its content and, where the window is tall enough to show it whole, stays beside
   the small multiples while they scroll */
@media (min-width: 761px) { #transfer .split { align-items: start; } }
@media (min-width: 761px) and (min-height: 47em) { #transfer .split > .panel:first-child { position: sticky; top: calc(var(--nav-h) + 12px); } }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid3 > * { min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid2 > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 10px 6px; min-width: 0; } /* nested in a 10 px box */
.panel .chart-title { margin-top: 0; }

/* run cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.card {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--surface); min-width: 0;
  display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem;
}
.card.ours { border-color: var(--ours-edge); border-color: color-mix(in srgb, var(--ours-edge) 55%, var(--border)); }
.card .card-head { display: flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ink); font-size: 0.88rem; }
.card .card-head .key { flex: none; }
.card .rid { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-2); overflow-wrap: anywhere; }
.card .meta { color: var(--ink-2); overflow-wrap: anywhere; }
.links { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.card .links { display: flex; margin-top: 2px; }
.links a, .links button {
  font-size: 0.82rem; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  font-family: var(--font);
}
.links a:hover, .links button:hover { text-decoration-thickness: 2px; }
.mono { font-family: var(--mono); font-size: 0.76rem; }
.nw { white-space: nowrap; } /* what noBreak() keeps on one line: names, numbers, references, places, short formulas */
.card .role { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); text-transform: none; }

/* details / data tables */
details.data-view { margin-top: 8px; font-size: 0.86rem; }
details.data-view > summary { cursor: pointer; color: var(--ink-2); padding: 4px 0; width: fit-content; }
details.data-view > summary:hover { color: var(--ink); }
table.data { border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; width: max-content; min-width: 100%; }
table.data th, table.data td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { color: var(--ink-2); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; }
table.data td.na { color: var(--ink-2); }
table.data tr.group td { text-align: left; font-weight: 600; color: var(--ink); background: var(--surface-2); }
.data-scroll { overflow: auto; max-height: 420px; border: 1px solid var(--border); border-radius: 8px; } /* fill: see .table-wrap */
/* tables shown open in narrow chart panels: fit the panel (headers and labels wrap) instead of hiding columns */
details.data-view table.data { width: 100%; min-width: 0; }
details.data-view table.data th { white-space: normal; vertical-align: bottom; }
details.data-view table.data th, details.data-view table.data td { padding: 4px 6px; }
/* (cells stay on one line: values such as 3.3e-3 and labels such as S = {1, 2, 3, 4, 8} must not break) */

/* sweep chart pieces */
.line-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface);
  padding: 4px 10px; border-radius: 999px; font-size: 0.84rem; cursor: pointer; color: var(--ink); min-height: 30px;
}
.chip > .lab { min-width: 0; } /* the label is one flex item (not one per kept-together name), which can wrap */
.chip:hover { background: var(--hover-bg); }
a.chip { text-decoration: none; color: var(--ink); }
a.chip:hover { text-decoration: underline; }
.chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ all-runs explorer */
.xp-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.xp-side, .xp-main { min-width: 0; }
.xp-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.xp-filters .full { grid-column: 1 / -1; }
.xp-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--ink-2); font-weight: 600; min-width: 0; }
.xp-filters select, .xp-filters input { width: 100%; }
.xp-count { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-2); margin: 6px 0; flex-wrap: wrap; }
.xp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; max-height: 470px; overflow-y: auto; background: var(--surface); }
.xp-list li { border-bottom: 1px solid var(--border); }
.xp-list li:last-child { border-bottom: 0; }
.xp-list label { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr); gap: 6px; align-items: start; padding: 7px 9px; cursor: pointer; font-size: 0.84rem; line-height: 1.35; }
.xp-list label:hover { background: var(--hover-bg); }
.xp-list input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--ink); }
.xp-list .swatch { width: 26px; height: 14px; margin-top: 2px; display: inline-flex; align-items: center; }
.xp-list .t { color: var(--ink); overflow-wrap: anywhere; }
.xp-list .s { display: block; color: var(--ink-2); font-size: 0.76rem; font-family: var(--mono); overflow-wrap: anywhere; }
.xp-list .tag { display: inline-block; font-family: var(--font); font-size: 0.7rem; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px; margin-left: 4px; color: var(--ink-2); }
.xp-list .empty { padding: 14px; color: var(--ink-2); font-size: 0.86rem; }
.xp-selected { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.xp-selected .chip { font-size: 0.8rem; padding: 3px 8px; }
.xp-selected .chip .x { color: var(--ink-2); font-weight: 700; margin-left: 2px; }
.xp-notice { font-size: 0.82rem; color: var(--ink-2); margin: 4px 0; min-height: 1.2em; }
.xp-help { font-size: 0.76rem; color: var(--ink-2); margin: -4px 0 2px; font-weight: 400; }
.xp-cap { font-size: 0.82rem; color: var(--ink); background: var(--danger-bg); border-left: 3px solid var(--danger); border-radius: 0 6px 6px 0; padding: 5px 9px; margin: 0 0 6px; }
.run-notes { margin: 6px 0 0; padding-left: 1.2em; }
.run-notes li { margin: 2px 0; }
div.run-notes { padding-left: 0; }
div.run-notes ul { margin: 6px 0 0; padding-left: 1.2em; }
.finals h5 { font-size: 0.92rem; margin: 14px 0 6px; font-weight: 650; }
/* the run names, with their keys, stay in view while the numbers scroll sideways; separate borders let every cell draw
   its own rule (a collapsed rule would pass under the sticky names), and the names' right edge sets them off */
.finals table.data { border-collapse: separate; border-spacing: 0; }
.finals td.run-name {
  position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 300px; white-space: normal; overflow-wrap: break-word;
  text-align: left; background: var(--surface); box-shadow: inset -1px 0 0 var(--border-strong);
}
.finals thead tr:first-child > th:first-child { left: 0; z-index: 3; box-shadow: inset -1px 0 0 var(--border-strong); } /* sticky at the top already */
.finals td.run-name .key { vertical-align: -1px; margin-right: 4px; }
table.data td .links { justify-content: flex-start; }

/* ------------------------------------------------------------------ bibtex + footer */
.bibtex-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* the lines wrap (Copy copies the text as it is); the top band keeps them clear of the Copy button */
.bibtex-box pre {
  margin: 0; padding: 44px 18px 16px; overflow-x: auto; font-size: 0.84rem; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bibtex-box .copy { position: absolute; top: 8px; right: 8px; }
.bibtex-box .ph { color: var(--ph-ink); background: var(--danger-bg); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.bib-note { font-size: 0.84rem; color: var(--ink-2); margin-top: 8px; }
/* the bottom padding keeps the end of the page clear of the back-to-top button */
footer.site-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 22px 0 76px; color: var(--ink-2); font-size: 0.85rem; }
/* the page's sign-off: the title's mark (3 px blocks at 24 px) and the paper's title */
.footer-brand { display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.footer-brand .title-mark { flex: none; width: 1.5rem; height: 1.5rem; }
.footer-brand .footer-name { color: var(--name-ink); font-weight: 700; }

/* ------------------------------------------------------------------ back to top */
/* shown (.show) once the hero has scrolled out of view; see app.js */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .to-top:hover { background: linear-gradient(var(--hover-bg), var(--hover-bg)), var(--surface); }
}

/* ------------------------------------------------------------------ dialogs */
dialog { border: 1px solid var(--border-strong); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); max-width: calc(100vw - 24px); }
dialog::backdrop { background: var(--overlay); }
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dlg-head h3 { font-size: 1rem; flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.dlg-close { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; min-width: 34px; min-height: 32px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--ink); }
.dlg-close:hover { background: var(--hover-bg); }

#lightbox { width: min(1400px, calc(100vw - 24px)); }
#lightbox .lb-body { padding: 12px; max-height: calc(100vh - 140px); overflow: auto; background: var(--paper-sheet); }
/* phones: the enlarged figure is twice the dialog width; pan it with one finger */
@media (max-width: 760px) { #lightbox .lb-body img { width: 200%; max-width: none; } }
#lightbox img { width: 100%; height: auto; display: block; }

#log-dialog { width: min(1180px, calc(100vw - 24px)); height: min(88vh, 900px); }
#log-dialog[open] { display: flex; flex-direction: column; }
.log-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.log-tools .inp { width: 220px; }
.log-tools .count { color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 6em; }
.log-tools .spacer { flex: 1; }
.log-status { padding: 18px; color: var(--ink-2); font-size: 0.9rem; }
.log-scroll { flex: 1; overflow: auto; position: relative; background: var(--page); font-family: var(--mono); font-size: 12px; min-height: 0; }
.log-sizer { width: 1px; }
.log-lines { position: absolute; top: 0; left: 0; min-width: 100%; }
.log-line { height: 18px; line-height: 18px; white-space: pre; padding-right: 16px; color: var(--ink); }
.log-line .ln {
  display: inline-block; width: 7ch; padding-right: 1.5ch; text-align: right; color: var(--ink-2); user-select: none; -webkit-user-select: none;
  position: sticky; left: 0; z-index: 1; background: var(--page); /* the numbers stay in view when the text scrolls sideways */
}
.log-line.hit { background: var(--hover-bg); }
.log-line.hit .ln { background-image: linear-gradient(var(--hover-bg), var(--hover-bg)); }
.log-line mark { background: var(--mark-bg); color: inherit; border-radius: 2px; }
.log-line mark.cur { background: var(--mark-cur); outline: 1px solid var(--ink-2); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .xp-layout { grid-template-columns: minmax(0, 1fr); }
  .xp-list { max-height: 300px; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main > .result-body { --ph: 1930px; }
  #transfer > .result-body { --ph: 1360px; }
  #maximal-updates > .result-body { --ph: 1510px; }
  #arch > .result-body { --ph: 3070px; }
  #ablations > .result-body { --ph: 1990px; }
  #ensembles > .result-body { --ph: 2860px; }
  #explore-app { --ph: 1550px; }
}
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main > .result-body { --ph: 2050px; } /* measured at 761-860 px */
}
@media (max-width: 760px) {
  table.paper th.rowlabel { white-space: normal; min-width: 7.5rem; max-width: 10rem; } /* phones: labels wrap */
  .split, .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  #main > .result-body { --ph: 2180px; }
  #transfer > .result-body { --ph: 2090px; }
  #maximal-updates > .result-body { --ph: 1650px; }
  #arch > .result-body { --ph: 4120px; }
  #ablations > .result-body { --ph: 2560px; }
  #ensembles > .result-body { --ph: 4290px; }
  #explore-app { --ph: 1680px; }
  .hero { padding: 28px 0 16px; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.125rem; }
  .method-body > .method-h { margin-top: 40px; }
  .explorer { padding: 12px 10px 8px; }
  .story-grid.answers { grid-template-columns: minmax(0, 1fr); }
  .to-top { right: 12px; bottom: 12px; }
}
@media (max-width: 420px) {
  #main > .result-body { --ph: 2850px; }
  #transfer > .result-body { --ph: 2640px; }
  #maximal-updates > .result-body { --ph: 2060px; }
  #arch > .result-body { --ph: 4970px; }
  #ablations > .result-body { --ph: 3150px; }
  #ensembles > .result-body { --ph: 5160px; }
  #explore-app { --ph: 2080px; }
  /* phones: a compact hero, so that the whole video is in the first view */
  .hero h1 { margin-bottom: 14px; }
  .authors { font-size: 1rem; line-height: 1.55; margin-bottom: 4px; }
  .affiliations { margin-bottom: 4px; }
  .footnotes { margin-bottom: 14px; }
  .hero-links { gap: 6px; }
  #video { padding-top: 4px; }
  .xp-filters { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .seg button { padding: 5px 8px; }
  .range-wrap input[type="range"] { width: 100px; }
  .log-tools .inp { width: 150px; }
  .finals td.run-name { width: 8.5rem; min-width: 8.5rem; } /* the names wrap, so numbers stay in view beside them */
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
/* forced colours drop fills and shadows: the table gaps stay blank, our rows and the pinned row keep a mark, and
   pressed buttons and chips an outline */
@media (forced-colors: active) {
  table.paper .gstart { border-left-color: Canvas; }
  table.paper th.rowlabel { border-left: 3px solid Canvas; }
  table.paper tbody tr.row.ours th.rowlabel { border-left-color: CanvasText; }
  table.paper tbody tr.row.pinned { outline: 2px solid Highlight; outline-offset: -2px; }
  .seg button[aria-pressed="true"], .chip[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -4px; }
  .seg button:focus-visible, .chip:focus-visible { outline-color: Highlight; }
  .finals td.run-name, .finals thead tr:first-child > th:first-child { border-right: 1px solid CanvasText; }
}
/* narrow screens: the sticky label also continues the pinned row's outline, and draws both in Highlight, as forced
   colours draw a focus outline */
@media (forced-colors: active) and (max-width: 860px) {
  table.paper tbody tr.row.pinned > th.rowlabel::after, table.paper tbody tr.row:focus-visible > th.rowlabel::after {
    content: ""; position: absolute; inset: 0; border: 2px solid Highlight; border-right: 0; pointer-events: none;
  }
  /* our rows' mark is drawn inside the sticky label: a collapsed border would stay behind as the numbers scroll */
  table.paper th.rowlabel { border-left: 0; padding-left: 11px; }
  table.paper th.rowlabel.sub { padding-left: 25px; }
  /* forced colours drop the label's shadow edge, so ::before draws it (and our rows' mark) */
  table.paper th.rowlabel::before {
    content: ""; position: absolute; inset: 0; border-right: 1px solid CanvasText; pointer-events: none;
  }
  table.paper tbody tr.row.ours > th.rowlabel::before { border-left: 3px solid CanvasText; }
}
@media print {
  .explorer, #explore, .site-header, .video-start, .to-top { display: none !important; }
  #bibtex { min-height: 0 !important; }
}