:root {
  --bg: #ffffff;
  --panel: #f7f9fb;
  --ink: #1f2328;
  --ink-2: #4b5563;
  --ink-3: #7d8796;
  --rule: #e5e7eb;
  --rule-2: #d6dbe2;
  /* Teal, coral and iris, at one level of saturation. The palette follows the name: Game
     for the games and environments, their state and progress; 2 for the loop that turns one
     into the other and its reports; Player for the players, their inputs and code. Each has a
     base, a darker ink for text, a mid tone for light rules, a soft fill and a faint wash.
     Everything else is ink and grey. */
  --game: #12a594; --game-ink: #007564; --game-mid: #a7d7ce; --game-soft: #def0ec; --game-wash: #f1f9f7;
  --turn: #e54d2e; --turn-ink: #c9300b; --turn-mid: #fbb4a3; --turn-soft: #ffe3dc; --turn-wash: #fff3f1;
  --player: #5b5bd6; --player-ink: #5b5bd6; --player-mid: #afb7f1; --player-soft: #e0e4fb; --player-wash: #f2f4fd;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1240px;
  --radius: 6px;
  --nav: 52px;
}
* { box-sizing: border-box; }
/* Keep mobile browsers from enlarging individual text blocks after rotation. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { display: block; }
.wrap { width: min(var(--max), 100% - 64px); margin: 0 auto; }
.num { font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* placeholders: a number still to come, a name still to add */
.tbd { color: var(--ink-3); }
.tbd-slot { display: inline-block; min-width: 9em; padding: 1px 14px; border: 1px dashed var(--rule-2); border-radius: 4px; color: var(--ink-3); }

/* links out: a solid rule when it goes somewhere, a dashed one while it is still to come */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border: 1px solid #b7c0ca; border-radius: var(--radius); background: #fff;
  font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: #f3f5f7; border-color: var(--ink-3); }
.btn.sm { height: 32px; padding: 0 12px 0 10px; gap: 6px; font-size: 13.5px; }
.btn.sm svg.i { width: 15px; height: 15px; }
.btn.soon, .btn.soon:hover { border-style: dashed; border-color: var(--rule-2); background: #fff; color: var(--ink-3); cursor: default; }

/* the bar along the top, once the opening is past */
.topnav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--nav); background: #fff; border-bottom: 1px solid var(--rule);
  transform: translateY(-100%); transition: transform .3s ease; }
body.nav-on .topnav { transform: none; }
.topnav .wrap { display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { font: 700 16px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
/* the name in its three colours */
.name .g { color: var(--game); } .name .n { color: var(--turn); } .name .p { color: var(--player); }
.playerbench { color: var(--ink); font-weight: 700; white-space: nowrap; }
.playerbench .pb-player { color: var(--player); fill: var(--player); }
.benchmark-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .16em; }
.benchmark-link:hover { color: var(--player); text-decoration-color: currentColor; }
.topnav .links { flex: 1; display: flex; justify-content: center; gap: 22px; height: 100%; }
.topnav .links a { display: flex; align-items: center; border-bottom: 2px solid transparent; padding-top: 2px;
  font: 500 14px/1 var(--sans); color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .15s; }
.topnav .links a:hover { color: var(--ink); }
.topnav .links a.on { color: var(--ink); border-bottom-color: var(--ink); }
.topnav .acts { display: flex; gap: 8px; }
@media (max-width: 1180px) { .topnav .acts { display: none; } }

/* ---------- opening wall, then the games page ---------- */
#intro { position: relative; height: 390vh; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); }
#wall { position: absolute; inset: 0; width: 100%; height: 100%; }
#wall.over { cursor: pointer; }
/* Tall title cards are revealed by page scrolling before the wall animation starts. */
.title-band {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(clamp(720px, 60vw, 1040px), calc(100% - 32px));
  pointer-events: auto;
  padding: clamp(20px, 3vh, 38px) clamp(24px, 2.5vw, 48px);
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 24px; box-shadow: 0 16px 64px rgba(15, 23, 42, .14);
  text-align: center;
}
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .title-band { background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.76));
    -webkit-backdrop-filter: blur(18px) saturate(.75); backdrop-filter: blur(18px) saturate(.75); }
}
.title-band h1 { font: 700 clamp(36px, min(4.6vw, 8vh), 80px)/1.05 var(--sans); letter-spacing: -.025em; margin: 0; color: var(--ink); }
.title-band .sub { margin: 12px auto 0; max-width: 27em; font: 600 clamp(20px, min(1.9vw, 3.5vh), 32px)/1.3 var(--sans); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.title-band .tldr { margin: 14px auto 0; max-width: 43em; font: 400 clamp(14px, 1.05vw, 17px)/1.5 var(--sans); color: #374151; text-wrap: pretty; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 680px; margin: clamp(16px, 2.2vh, 24px) auto 0; }
.hero-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; }
.hero-stats > div + div { border-left: 1px solid rgba(75, 85, 99, .2); }
.hero-stats dt { order: 1; font: 500 12px/1.4 var(--sans); color: var(--ink-2); }
.hero-stats dd { margin: 0; font: 700 clamp(26px, min(2.2vw, 4vh), 36px)/1.1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--game); }
.hero-stats > div:nth-child(2) dd { color: var(--player); }
.hero-stats > div:nth-child(3) dd { color: var(--turn); }
.hero-stats > div:nth-child(4) dd { color: var(--player); }
.title-band .people { margin: 14px 0 0; font: 500 14px/1.4 var(--sans); }
.affiliations { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 32px); list-style: none; padding: 0; margin: 10px auto 0; }
.affiliations li { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.affiliations img { object-fit: contain; max-width: 100%; height: auto; }
.affiliations .logo-uiuc { width: clamp(118px, 10.4vw, 164px); }
.affiliations .logo-ucsb { width: clamp(142px, 12.6vw, 196px); }
.affiliations .logo-gt { width: clamp(112px, 9.9vw, 156px); }
.affiliations .logo-ibm { width: clamp(58px, 5vw, 80px); }
@media (max-width: 700px) {
  .affiliations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; max-width: 370px; margin-top: 14px; }
  .affiliations li { min-height: 40px; }
  .affiliations .logo-uiuc { width: 138px; }
  .affiliations .logo-ucsb { width: 168px; }
  .affiliations .logo-gt { width: 126px; }
  .affiliations .logo-ibm { width: 68px; }
}
.title-band .links { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.title-band .btn { height: 36px; font-size: 13px; padding: 0 11px; }
@media (max-width: 600px) {
  .title-band { width: calc(100% - 32px); padding: 20px 16px; border-radius: 18px; }
  .title-band .sub { margin-top: 14px; }
  .title-band .tldr { margin-top: 16px; }
  .hero-stats { margin-top: 20px; }
  .hero-stats > div { padding: 0 5px; }
  .hero-stats dd { font-size: 23px; }
  .hero-stats dt { font-size: 10px; }
  .title-band .links { gap: 8px; margin-top: 20px; }
  .title-band .btn { height: 36px; font-size: 13px; padding: 0 11px; }
}
@media (max-height: 700px) {
  .title-band { padding-top: 16px; padding-bottom: 16px; }
  .title-band h1 { font-size: clamp(32px, 7vh, 48px); }
  .title-band .sub { margin-top: 10px; font-size: clamp(18px, 3.2vh, 23px); }
  .title-band .tldr { font-size: 14px; }
  .title-band .tldr, .hero-stats, .title-band .people, .title-band .links { margin-top: 10px; }
  .affiliations { margin-top: 8px; }
}
.games-head { position: absolute; top: 0; left: 0; right: 0; padding-top: calc(var(--nav) + 24px); opacity: 0; pointer-events: none; }
.games-head.live .seg { pointer-events: auto; }
.games-head.live .bignums { pointer-events: auto; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule); padding-top: 16px; }
h2.sec { font: 700 32px/1.15 var(--sans); letter-spacing: -.015em; margin: 0; }
.bignums { display: flex; flex-wrap: nowrap; gap: 40px; margin-top: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; }
.bignums > div { flex: none; white-space: nowrap; }
.bignums b { display: grid; font: 700 44px/1 "Public Sans", var(--sans); letter-spacing: -.025em; color: var(--game); font-variant-numeric: tabular-nums; }
/* The hidden final value reserves the complete width throughout the count-up. */
.bignums b::before { content: attr(data-final); visibility: hidden; grid-area: 1 / 1; }
.bignums .count-value { grid-area: 1 / 1; font-style: normal; }
.bignums span { display: block; margin-top: 4px; font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; font: 500 13px/1 var(--sans); }
.seg button { background: #fff; border: 0; padding: 8px 14px; cursor: pointer; color: var(--ink-2); font: inherit; }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button.on { background: #eef1f4; color: var(--ink); }
/* The hovered tile grows into the preview: the wall's own cell shows at once, the clip
   covers it once it plays, and the name hangs below. Placed by the script every frame. */
.tip { position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; opacity: 0; }
.tip video { display: block; width: 100%; aspect-ratio: 16 / 9; background: transparent; }
.tip .t { padding: 8px 11px 10px; background: #fff; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 8px 20px rgba(31, 35, 40, .14); }
.tip h4 { margin: 0 0 1px; font: 600 14px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip .m { font: 12.5px/1.4 var(--sans); color: var(--ink-3); }

/* Compact component definitions and feedback loop above the diagram. */
.method-summary { max-width: 1080px; margin-top: 14px; }
.method-summary p { margin: 12px 0 0; font: 17px/1.7 var(--sans); color: var(--ink); }
.method-summary strong { font-weight: 600; color: var(--ink); }
.method-summary .hint { margin-top: 8px; font-size: 13px; color: var(--ink-3); }

/* ---------- chapters ---------- */
/* A chapter opens with its heading and a few sentences that scroll by; then its interactive
   part stays put under the top bar for a while (--hold of extra scroll) before the page moves on. */
.intro { margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 16px; }
.intro .lead { margin: 12px 0 0; max-width: 780px; font: 17px/1.6 var(--sans); color: var(--ink-2); }
/* running text: the abstract and the chapters' introductions */
.prose { max-width: 840px; }
#abstract .prose { max-width: 1080px; }
.prose p { margin: 14px 0 0; font: 17px/1.7 var(--sans); color: var(--ink); }
.prose b { font-weight: 600; }
.prose .hint { font-size: 15px; color: var(--ink-3); }
/* what to take away: bold, in colour and a little larger, never black */
.em { color: var(--game); font-size: 1.06em; font-weight: 700; }
.prose .name { font-weight: 700; }
/* a stage named in the text: the loop's button, small; clicking it shows that stage. Its word
   sits on the line's baseline (an inline-block takes the baseline of its text), and the line
   height of the box centres the word in it. */
.sname { position: relative; display: inline-block; height: 1.65em; padding-left: 1.8em; margin: 0 .08em; border: 1.5px solid var(--tone); border-radius: 5px;
  background: #fff; cursor: pointer; font: 500 .9em var(--sans); line-height: calc(1.65em - 3px); color: var(--ink); white-space: nowrap; transition: background .15s; }
.sname .ic { position: absolute; left: 0; top: 0; bottom: 0; display: grid; place-items: center; width: 1.8em; border-right: 1.5px solid var(--tone); color: var(--tone); }
.sname .ic svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sname .t { padding: 0 .55em; }
.sname:hover { background: var(--tint); }
.nobr { white-space: nowrap; }
.prose code, .contrib code, .method-summary code { font: 500 .86em/1 var(--mono); color: var(--player-ink); background: var(--player-wash); padding: .12em .32em; border-radius: 3px; white-space: nowrap; }
/* what the project contributes, one card each, coloured like its part of the loop */
.contrib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.contrib > div { border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 18px 20px 20px; }
.contrib .ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 7px; background: var(--tint); color: var(--tone); }
.contrib .ic svg.i { width: 22px; height: 22px; }
.contrib h4 { margin: 0 0 8px; font: 600 17px/1.35 var(--sans); }
.contrib p { margin: 0; font: 15px/1.6 var(--sans); color: var(--ink-2); }
.contrib p b { font-weight: 600; color: var(--ink); }
/* the four kinds of record in an example, named and explained before the figure */
.signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.signals h4 { margin: 0 0 4px; font: 600 15.5px/1.35 var(--sans); color: var(--game); }
/* the example is one colour throughout: what it shows is what the game records */
#examples .key.down .top { fill: var(--game-soft); stroke: var(--game); }
#examples .key.down .base { fill: var(--game-ink); }
#examples .mbtn.down { fill: var(--game-soft); }
#examples .ripple { border-color: var(--game); }
.signals p { margin: 0; font: 14.5px/1.55 var(--sans); color: var(--ink-2); }
/* a caption under a figure, and what it shows */
.fig-cap { margin: 12px 0 0; max-width: 1040px; font: 14px/1.55 var(--sans); color: var(--ink-2); }

.pin { position: relative; height: calc(100vh - var(--nav) + var(--hold, 55vh)); }
.pin-stage { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); overflow: hidden; padding-top: 22px; }
.stage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.stage-head.end { justify-content: flex-end; }
.tabs { display: flex; gap: 22px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0 6px; font: 500 14px/1.2 var(--sans); color: var(--ink-3); cursor: pointer; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- the loop: outlined boxes on a ring, like a printed diagram ---------- */
/* Flat like the other pages: no shadows, gradients or see-through fills. The single stages
   share one size; the two players are wider, a button each in a dashed frame. Colour marks the
   stage, and the chosen box takes its tint with the icon cell filled in. The drawing is laid out
   at one fixed size and scaled as a whole, so the ring, the boxes and the icons keep their
   proportions. */
.cycle-box { position: relative; margin-bottom: 18px; }
.cycle { position: absolute; left: 50%; top: 0; transform-origin: 50% 0; --nw: 168px; --nh: 56px; }
#cycle-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* what we build in teal, what play gives in iris, what comes back in coral */
.node[data-k=scout], .sname[data-k=scout] { --tone: #4b5563; --tint: #eef1f4; }
.node[data-k=builder], .sname[data-k=builder], .node[data-k=env], .sname[data-k=env], .node[data-k=envs], .sname[data-k=envs] { --tone: var(--game); --tint: var(--game-soft); }
.node[data-k=reports], .sname[data-k=reports] { --tone: var(--turn); --tint: var(--turn-soft); }
.node[data-k=policy], .sname[data-k=policy], .node[data-k=vlm], .sname[data-k=vlm], .node[data-k=data], .sname[data-k=data] { --tone: var(--player); --tint: var(--player-soft); }
.node { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: var(--nw); height: var(--nh);
  background: #fff; border: 1.5px solid var(--tone); border-radius: 7px; overflow: hidden;
  display: grid; grid-template-columns: 46px 1fr; align-items: center; padding: 0; text-align: center; cursor: pointer;
  font: 600 16px/1 var(--sans); color: var(--ink); white-space: nowrap; transition: background .2s; }
.node .node-label { min-width: 0; padding: 0 4px; line-height: 1.2; }
.node[data-k=env] .node-label, .node[data-k=envs] .node-label { font-size: 14px; }
.node .ic { align-self: stretch; display: grid; place-items: center; border-right: 1.5px solid var(--tone); color: var(--tone); transition: background .2s, color .2s; }
.node .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.node.on { background: var(--tint); }
.node.on .ic { background: var(--tone); color: #fff; }
/* the two players play side by side: a button each, framed together */
.pgroup { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: grid; gap: 8px; padding: 10px; border-radius: 10px;
  background: #fff; border: 1.5px dashed var(--player-mid); }
.pgroup .node { position: static; transform: none; width: 192px; }
/* the Builder framed the same way, over its skills: a box, not a stage, with a few of the
   engines it has a skill for; the one for the engine of a game coming in lights up */
.bgroup { border-color: var(--game-mid); }
.skills { display: grid; grid-template-columns: 46px minmax(0, 1fr); height: var(--nh); border: 1px solid var(--game-mid); border-radius: 7px; background: var(--game-wash); }
.skills .lbl { display: grid; place-items: center; border-right: 1px solid var(--game-mid); font: 600 12.5px/1 var(--sans); color: var(--game); }
.skills > div { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 7px 4px; padding: 0 4px 0 8px; }
.skills span[data-engine] { display: flex; align-items: center; gap: 4px; margin: -2px -3px; padding: 2px 3px; border-radius: 4px;
  font: 600 12.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s; }
.skills img { width: 14px; height: 14px; flex: none; }
.skills span.lit { background: var(--game-soft); color: var(--ink); }
.sweep { transform-origin: 12px 12px; animation: sweep 2.8s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
/* where the Scout looks: the sites the games came from, drifting in a loose column */
.logos { position: absolute; inset: 0; pointer-events: none; }
.logo { position: absolute; z-index: 1; animation: driftx var(--dx, 7s) ease-in-out var(--delay, 0s) infinite alternate; }
.logo > div { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 7px; transform: translate(-50%, -50%);
  background: #fff; border: 1px solid #aeb6c0; border-radius: 5px;
  font: 600 13px/1 var(--sans); color: var(--ink-2); white-space: nowrap; animation: drifty var(--dy, 5s) ease-in-out var(--delay, 0s) infinite alternate; }
.logo .mark { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.logo img { width: 18px; height: 18px; object-fit: contain; }
@keyframes driftx { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes drifty { from { transform: translate(-50%, calc(-50% - 4px)) rotate(var(--r0, -2deg)); } to { transform: translate(-50%, calc(-50% + 4px)) rotate(var(--r1, 2deg)); } }

/* what the chosen stage does, below the drawing: its name and purpose on the left; on the
   right a board ruled like the other pages' panels, three numbered steps over three equal cards */
.loop-panel { --tone: #4b5563; --tint: #eef1f4; height: 290px; border-top: 1px solid var(--rule); padding-top: 20px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; overflow: hidden; }
.loop-panel[data-k=builder], .loop-panel[data-k=env], .loop-panel[data-k=envs] { --tone: var(--game); --tint: var(--game-soft); }
.loop-panel[data-k=policy], .loop-panel[data-k=vlm], .loop-panel[data-k=data] { --tone: var(--player); --tint: var(--player-soft); }
.loop-panel[data-k=reports] { --tone: var(--turn); --tint: var(--turn-soft); }
.lp-head { padding-top: 2px; }
.lp-head .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 7px; margin-bottom: 14px; background: var(--tone); color: #fff; }
.lp-head .ic svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lp-head h3 { margin: 0 0 8px; font: 700 22px/1.2 var(--sans); letter-spacing: -.01em; }
.lp-head p { margin: 0; font: 15px/1.6 var(--sans); color: var(--ink-2); }
.board { min-width: 0; border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 13px 15px 15px; background: #fff; }
.rail, .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.rail { list-style: none; margin: 0 0 12px; padding: 0; }
.rail li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rail b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid #b7c0ca; border-radius: 5px; background: #fff;
  font: 700 12.5px/1 var(--sans); color: var(--ink-3); transition: background .3s, color .3s, border-color .3s; }
.rail span { font: 600 14.5px/1.2 var(--sans); color: var(--ink-3); white-space: nowrap; transition: color .3s; }
.rail i { position: relative; flex: 1; min-width: 12px; height: 1.5px; margin-right: -16px; background: #d4dae1; overflow: hidden; }
.rail i::after { content: ""; position: absolute; inset: 0; background: var(--tone); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.rail li.on b { background: var(--tone); border-color: var(--tone); color: #fff; }
.rail li.on span { color: var(--ink); }
.rail li.done i::after { transform: scaleX(1); }
.card { position: relative; height: 196px; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 14px 16px;
  opacity: .3; transition: opacity .45s, box-shadow .3s, border-color .3s; }
.card.in { opacity: 1; }
/* the step running now: its rule in the stage colour, drawn twice as heavy */
.card.now { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone); }
.card.media { padding: 0; background: #0d0f12; }
.card.media video, .card .fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.card.media video, .card img.fill { object-fit: contain; }
.flip { position: absolute; inset: 0; }
.flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.flip img.on { opacity: 1; }
.card.code { padding: 0; background: #f7f9fb; }
.card.chart { display: flex; flex-direction: column; }
.card [data-at] { opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; }
.card [data-at].in { opacity: 1; transform: none; }
.card .api span[data-at] { transform: none; }
.over { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 6px; min-width: 0; }
.chips.col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 10px 0 7px; border: 1px solid #b7c0ca; border-radius: 5px; background: #fff;
  font: 600 13px/1 var(--sans); color: var(--ink-2); white-space: nowrap; min-width: 0; }
.over .chip { flex: 0 1 auto; border-color: #fff; }
.chip img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.chip.dark img { background: #1d2b53; padding: 1px; }
.chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip.call { height: 32px; padding: 0 16px; font-size: 15px; color: var(--turn-ink); border: 1.5px solid var(--turn); background: #fff; }
/* prose in the cards: what is code is set as code, what is a key as a key */
.loop-panel code { font: 500 .88em/1 var(--mono); color: var(--player-ink); background: var(--player-wash); padding: .12em .32em; border-radius: 3px; white-space: nowrap; }
.chip code, .kv code { font: 12.5px var(--mono); color: var(--ink); background: none; padding: 0; }
.loop-panel kbd { display: inline-block; min-width: 1.5em; padding: .08em .35em; border: 1px solid #aeb6c0; border-bottom-width: 2px; border-radius: 4px; background: #fff;
  font: 600 .86em/1.2 var(--sans); color: var(--ink); text-align: center; }
.typed, .say { margin: 0; font: 14px/1.65 var(--sans); color: var(--ink); }
.lead { margin: 10px 0 4px; font: 13px/1.4 var(--sans); color: var(--ink-3); }
.api, .mini { margin: 0; height: 100%; padding: 12px 14px; font: 11.5px/1.55 var(--mono); color: var(--ink); overflow: hidden; white-space: pre; }
.mini { padding: 10px 0; }
.mini span { display: block; padding: 0 14px 0 8px; opacity: .38; transition: background .12s, opacity .12s; }
.mini span.hit { opacity: 1; background: var(--player-soft); }
.mini i { display: inline-block; width: 28px; font-style: normal; color: var(--ink-3); }
.phases { list-style: none; margin: 0; padding: 0; font: 13px/1.5 var(--sans); color: var(--ink); }
.phases li { position: relative; padding: 0 0 8px 26px; }
.phases li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border: 1.5px solid var(--tone); border-radius: 4px; background: var(--tint); }
.phases li::after { content: ""; position: absolute; left: 6px; top: 4.5px; width: 4px; height: 7px; border: solid var(--tone); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }
.phases b { font-weight: 600; margin-right: 5px; }
/* a released game: its tasks, and which of them a policy has solved */
.tasklist { list-style: none; margin: 0; padding: 0; font: 12.5px/1.52 var(--sans); color: var(--ink); }
.tasklist li { display: flex; gap: 8px; min-width: 0; }
.tasklist b { flex: none; font: 600 11.5px/1.65 var(--mono); color: var(--tone); }
.tasklist span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solved { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 16px; }
.solved span { position: relative; display: grid; place-items: center; width: 25px; height: 25px; border: 1.5px solid #b7c0ca; border-radius: 5px;
  font: 600 11.5px/1 var(--mono); color: var(--ink-3); }
.solved i { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 5px; background: var(--tone); color: #fff; font-style: normal; }
.kv b { font-weight: 600; color: var(--ink); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font: 13px/1.5 var(--sans); color: var(--ink-3); }
.meter { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.meter b { font: 700 34px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.meter span { font: 14px var(--sans); color: var(--ink-2); }
.card canvas { display: block; width: 100%; }
.seen { background-color: #0d0f12; background-repeat: no-repeat; }
.seen .paused { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border: 1.5px solid var(--turn); border-radius: 5px; background: #fff; font: 600 12.5px/1.2 var(--sans); color: var(--turn-ink); opacity: 0; transition: opacity .2s; }
.seen.thinking .paused { opacity: 1; }
.press { display: flex; flex-direction: column; gap: 10px; }
.press .act { display: flex; align-items: center; gap: 12px; }
.press .caps { display: flex; align-items: center; gap: 6px; }
.press kbd { min-width: 46px; height: 46px; display: inline-grid; place-items: center; padding: 0 12px; border-bottom-width: 3px; font-size: 17px; }
.press .plus { font: 600 15px var(--sans); color: var(--ink-3); }
.press .hold { font: 13.5px var(--sans); color: var(--ink-2); }
.from { display: inline-block; margin-bottom: 10px; padding: 3px 9px; border: 1.5px solid var(--tone); border-radius: 5px; font: 600 12.5px/1.3 var(--sans); color: var(--tone); }
.verdict { display: grid; place-items: center; height: 100%; }
.badge { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border: 1.5px solid; border-radius: 7px; font: 600 16px/1 var(--sans); background: #fff; }
.badge.ok { color: var(--game-ink); border-color: var(--game); background: var(--game-soft); }
.badge.no { color: #4b5563; border-color: #8b929b; background: #eef1f4; }

/* ---------- examples and policies: one screen each ---------- */
.bench { display: grid; gap: 28px; align-items: start; }
.screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cursor { position: absolute; left: 0; top: 0; width: 18px; height: 24px; pointer-events: none; display: none; margin: -1px 0 0 -1px; }
.ripple { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid var(--player); pointer-events: none; opacity: 0; }
.transport { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 8px; }
.transport button { width: 36px; height: 28px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: #fff; cursor: pointer; font: 12px/1 var(--sans); color: var(--ink); }
/* the clock beside a scrubber: digits of one width (Public Sans) in a box wide enough for
   "999.9 / 999.9", so the scrubber keeps its length as the time changes */
.transport .time { min-width: 7.6em; font: 13px "Public Sans", var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.scrub { height: 28px; border: 1px solid var(--rule-2); border-radius: 4px; cursor: pointer; overflow: hidden; }
.scrub canvas { width: 100%; height: 100%; }
.deck { display: flex; gap: 12px; align-items: flex-end; margin-top: 10px; }
.deck .kb { flex: 1; min-width: 0; }
.deck .ms { flex: none; }
.deck svg { width: 100%; height: auto; }
.key .cap { transition: transform .05s; }
.key.down .cap { transform: translateY(2.5px); }
.key.down .top { fill: var(--player-soft); stroke: var(--player); }
.key.down .base { fill: var(--player-ink); }
.mbtn { transition: fill .05s; }
.mbtn.down { fill: var(--player-soft); }
/* the task exactly as the policy is given it */
.task { margin: 0 0 14px; }
.task span { display: block; margin-bottom: 4px; font: 600 12.5px/1.3 var(--sans); color: var(--ink-3); }
.task p { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--ink); }
.read { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.read div { padding: 8px 10px 8px 0; }
.read b { display: block; font: 600 24px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.read span { font: 12.5px/1.3 var(--sans); color: var(--ink-3); }
.charts .label { display: block; margin-bottom: 6px; font: 600 12.5px/1.3 var(--sans); color: var(--ink-3); }
.charts canvas { width: 100%; }


/* ---------- how a policy plays ---------- */
/* what the policy reads: a small map on the left, the fields that matter on the right */
.probe { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.pmap-box { min-width: 0; border-radius: var(--radius); overflow: hidden; }
#pmap { background: var(--panel); }
.fields { display: grid; grid-auto-rows: minmax(0, 1fr); border-top: 1px solid var(--rule); overflow: hidden; font: 12.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.fields div { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); min-height: 0; }
.fields span { color: var(--ink-3); white-space: nowrap; }
.fields b { font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sized by the left column: the code never makes the row taller */
#pv-bench, #vm-bench { align-items: stretch; }
.code-window { border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); contain: size; }
.code-window .bar { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--rule); font: 12px/1.2 var(--sans); color: var(--ink-3); background: #fafbfc; }
.code-scroll { overflow: auto; background: #fcfcfd; scrollbar-width: thin; }
.code { font: 11.5px/16.5px var(--mono); padding: 6px 0; }
.code .ln { position: relative; display: grid; grid-template-columns: 38px 44px minmax(0, 1fr); align-items: center; white-space: pre; transition: opacity .12s, background .12s; padding-right: 10px; }
.code .no { color: var(--ink-3); text-align: right; padding-right: 8px; }
.code .cov { height: 4px; background: #e8ebef; margin-right: 10px; position: relative; border-radius: 2px; overflow: hidden; }
.code .cov i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rule-2); }
.code .src { color: var(--ink); overflow: hidden; }
.code .val { position: absolute; right: 10px; top: 0; color: var(--turn-ink); background: var(--turn-wash); padding: 0 6px; border-radius: 3px; }
.code .val:empty { display: none; }
.code .ln.off { opacity: .3; }
.code .ln.hit { background: var(--player-wash); }
.code .ln.hit .cov i { background: var(--player); }
.code .ln.last { background: var(--player-soft); }
.code .kw { color: #8a3bc2; } .code .st { color: #238a4b; } .code .cm { color: #9a9a9a; } .code .nu { color: #c94515; }

/* ---------- the two players: a page that turns over ---------- */
/* Both names stay readable; a bar under them follows the page as it slides from one to the other. */
.who { position: relative; display: flex; align-items: center; gap: 32px; padding-bottom: 10px; }
.who::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); }
.who-bar { position: absolute; z-index: 1; left: 0; bottom: 0; height: 2px; background: var(--player); }
.who button { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-3); transition: color .25s; }
.who button .name { font: 700 30px/1.15 var(--sans); letter-spacing: -.015em; }
.who button:hover { color: var(--ink-2); }
.who button.on { color: var(--ink); }
.who button:not(.on) .tag { opacity: .6; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font: 600 12px/1.4 var(--sans); white-space: nowrap; }
.tag.rt { color: var(--player); background: var(--player-soft); }
.tag.rt i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live 1.6s ease-in-out infinite; }
.tag.ps { color: var(--turn-ink); background: var(--turn-wash); }
.tag.ps i { width: 8px; height: 9px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
@keyframes live { 50% { opacity: .25; } }
.slider { overflow: hidden; }
.track { display: grid; grid-template-columns: 100% 100%; will-change: transform; }
.face { min-width: 0; }
/* what the model has seen: the screenshots in its context, newest last */
.ctx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: center; min-width: 0; }
.ctx div { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; background-color: #e8edf2; background-repeat: no-repeat; outline: 1px solid var(--rule); outline-offset: -1px; }
.ctx div.now { outline: 2px solid var(--player); outline-offset: -2px; }
.ctx div span { position: absolute; left: 4px; bottom: 2px; font: 600 10px/1.2 var(--sans); color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .8); }
.screen video { transition: filter .25s; }
.screen.frozen video { filter: saturate(.55) brightness(.8); }
.think { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); font: 13px/1.2 var(--sans); color: var(--ink-2); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.think b { color: var(--turn-ink); font-weight: 600; }
.think i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: dots 1s infinite; }
.think i:nth-of-type(2) { animation-delay: .15s; } .think i:nth-of-type(3) { animation-delay: .3s; }
@keyframes dots { 50% { opacity: .2; transform: translateY(-2px); } }
.screen.frozen .think { opacity: 1; transform: none; }
.shutter { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* the model's turns, one row per step: what it saw, what it said, what it did */
.steps { padding: 4px 0; font: 13px/1.45 var(--sans); }
.turn { display: grid; grid-template-columns: 34px 72px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 12px 7px 0; border-bottom: 1px solid #eef0f3; transition: opacity .15s, background .15s; }
.turn .no { color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; padding-top: 1px; }
.turn .th { width: 72px; aspect-ratio: 16 / 9; border-radius: 3px; background-color: #e8edf2; background-repeat: no-repeat; }
.turn p { margin: 0 0 3px; color: var(--ink); }
.turn .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-3); }
.turn .act { color: var(--turn-ink); background: var(--turn-wash); padding: 0 6px; border-radius: 3px; font-weight: 600; }
.turn.future { opacity: .32; }
.turn.cur { background: var(--player-wash); }

/* ---------- results, release, questions, citation: ordinary pages ---------- */
.flow > .wrap:not(.intro) { padding-bottom: 8px; }
.block { margin-top: 40px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.block h3 { margin: 0; font: 700 22px/1.25 var(--sans); letter-spacing: -.01em; }
.note { margin: 6px 0 18px; max-width: 780px; font: 15px/1.55 var(--sans); color: var(--ink-2); }
figure { margin: 18px 0 0; min-width: 0; }
.tbl { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.tbl th { font: 600 12.5px/1.3 var(--sans); color: var(--ink-3); border-bottom-color: var(--rule-2); }
.tbl .r { text-align: right; }
.tbl tr.ref td { background: var(--panel); }
.tbl tr.split td { border-top: 1px solid var(--rule-2); }
/* the leaderboard: a white card in the middle of the page, medals for the top three */
.lb { max-width: 780px; margin: 30px auto 0; padding: 6px 10px 10px; background: #fff; border: 1px solid #eceef2; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, .05), 0 20px 44px -14px rgba(17, 24, 39, .16); }
.lb table { width: 100%; border-collapse: separate; border-spacing: 0; font: 15.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.lb th { padding: 14px 16px 12px; border-bottom: 1px solid var(--rule); font: 600 12.5px/1.2 var(--sans); color: var(--ink-3); text-align: left; white-space: nowrap; }
.lb th.sort { width: 220px; text-align: right; cursor: pointer; user-select: none; }
.lb th.sort:hover, .lb th.sort.on { color: var(--ink); }
.lb th.sort.on::after { content: " ↓"; }
.lb td { height: 50px; padding: 0 16px; white-space: nowrap; }
.lb tbody tr + tr td { border-top: 1px solid #f1f2f5; }
.lb .rk { width: 40px; padding-right: 4px; text-align: center; }
.lb td.rk { font-weight: 600; color: var(--ink-3); }
.lb .medal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 13px/1 var(--sans); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.lb .medal.m1 { background: #e5b12e; } .lb .medal.m2 { background: #a7b1bd; } .lb .medal.m3 { background: #c4874f; }
.lb td b { font-weight: 600; }
.lb .model-label { display: flex; align-items: center; gap: 9px; }
.lb .model-icon { display: block; flex: 0 0 22px; object-fit: contain; }
.lb .model-copy { min-width: 0; }
.lb .effort { margin-left: 8px; font-size: 13px; color: var(--ink-3); }
.lb td.n { text-align: right; color: var(--ink-2); }
.lb td.n.on { color: var(--ink); }
.lb td.n.on div { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* numbers in Public Sans, Libre Franklin's own descendant: as served, Libre Franklin has no digits
   of one width, so columns of numbers would not line up */
.lb td.n, .tbl.abl td.r { font-family: "Public Sans", var(--sans); font-variant-numeric: tabular-nums; }
.lb td.n.on b { flex: none; width: 3.3em; text-align: right; }
.lb .bar { flex: none; }
.lb .bar { width: 130px; height: 8px; border-radius: 4px; background: #f0f2f5; overflow: hidden; }
.lb .bar i { display: block; height: 100%; border-radius: 4px; background: #b8bfcb; }
.lb tr.row-ours td { background: #f6f6fd; }
.lb tr.row-ours td:first-child { border-radius: 8px 0 0 8px; }
.lb tr.row-ours td:last-child { border-radius: 0 8px 8px 0; }
.lb tr.row-ours .bar i { background: var(--player); }

/* Training data statistics: compact cards in normal document flow. */
.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 12px;
  margin-top: 16px; height: auto; }
.dpanel { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: #fff; }
.dpanel h4 { margin: 0 0 8px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.dbody { position: relative; flex: 1; min-height: 0; }
.dbody svg { position: absolute; inset: 0; }
svg.chart .dtotal { font: 700 19px var(--sans); fill: var(--ink); }
svg.chart .dval { font: 600 12.5px var(--sans); fill: var(--ink-2); }
svg.chart .inbar { font: 600 12.5px var(--sans); fill: #fff; }
svg.chart .num { font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 260px; height: auto; } }

/* two leaderboards side by side, pinned like the examples; a long table scrolls under its fixed header */
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.boards .lb { max-width: none; margin: 0; }
.boards .lb h3 { margin: 0; padding: 12px 16px 6px; font: 700 19px/1.3 var(--sans); letter-spacing: -.01em; }
.boards .lb-scroll { overflow-y: auto; }
.boards .lb thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.boards .lb th.sort { width: 150px; }
.boards .lb td b { display: block; }
.boards .lb .effort { display: block; margin: 2px 0 0; font-size: 12.5px; }
.boards .lb .bar { width: 76px; }
/* GameWorld entries name their harness in its own color */
.lb .harness { font-weight: 600; }
.lb .h-gameworld { color: var(--ink-2); } .lb .h-ours { color: var(--player); }
/* PlayerBench says once, beside its title, that every entry plays through the same harness */
.lb-same { margin-left: 12px; font: 400 14px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 1000px) { .boards { grid-template-columns: 1fr; } }
.trio { display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; gap: 40px; margin-top: 8px; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }

/* results: charts drawn as SVG, the ablation table, and the side-by-side players */
.legend { display: flex; gap: 20px; margin: 12px 0 4px; font: 13.5px/1.3 var(--sans); color: var(--ink-2); }
.legend span { display: flex; align-items: center; gap: 7px; }
.sw { width: 12px; height: 12px; border-radius: 2px; }
.sw.base { background: #c3cad3; } .sw.ours { background: var(--player); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.block.duo.pair { align-items: start; }
.block.duo h3 { margin: 0; }
svg.chart { display: block; width: 100%; overflow: visible; font-family: var(--sans); font-variant-numeric: tabular-nums; }
svg.chart .title { font: 700 16px var(--sans); fill: var(--ink); }
svg.chart .sub { font: 12.5px var(--sans); fill: var(--ink-3); }
svg.chart .tick { font: 12.5px var(--sans); fill: var(--ink-3); }
svg.chart .cat { font: 600 14px var(--sans); fill: var(--ink); }
svg.chart .grid { stroke: var(--rule); }
svg.chart .b-base { fill: #c3cad3; } svg.chart .b-ours { fill: var(--player); }
svg.chart .v-base { font: 12.5px var(--sans); fill: var(--ink-3); }
svg.chart .v-ours { font: 700 13.5px var(--sans); fill: var(--player-ink); }
svg.chart .line { fill: none; stroke-width: 2.5; }
svg.chart .line.s-pb, svg.chart .dot.s-pb { stroke: var(--player); } svg.chart .dot { fill: #fff; stroke-width: 2; }
svg.chart .line.s-gw, svg.chart .dot.s-gw { stroke: #8b939e; }
svg.chart .v { font: 600 12.5px var(--sans); }
svg.chart .v.s-pb { fill: var(--player-ink); } svg.chart .v.s-gw { fill: var(--ink-2); }
.sw.pb { height: 3px; background: var(--player); } .sw.gw { height: 3px; background: #8b939e; }
/* the training steps chart: 4B dashed, 9B solid */
svg.chart .line.dash { stroke-dasharray: 6 4; }
.sw.m4, .sw.m9 { width: 22px; height: 3px; }
.sw.m4 { background: repeating-linear-gradient(90deg, var(--player) 0 6px, transparent 6px 10px); } .sw.m9 { background: var(--player); }
.tbl.abl { margin-top: 12px; }
.tbl.abl th, .tbl.abl td { padding: 6px 14px 6px 0; }
.tbl.abl th.c { text-align: center; }
.tbl.abl tr.grp td { padding-top: 10px; font-weight: 600; color: var(--ink); border-bottom-color: var(--rule-2); }
.tbl.abl b { font-weight: 700; color: var(--player-ink); }
.cmp .tabs { margin-bottom: 16px; }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: stretch; }
.cmp-chart { display: flex; flex-direction: column; min-height: 0; }
.cmp-side .who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cmp-side .who b { font: 600 15px/1.3 var(--sans); }
.cmp-side[data-k="ours"] .who b { color: var(--player-ink); }
.cmp-side .who span { font: 13px/1 var(--sans); color: var(--ink-3); }
.cmp-side .who { white-space: nowrap; }
.cmp-side .who .cur { margin-left: auto; min-width: 6.4em; text-align: right; font: 600 13.5px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-side .screen video { transition: filter .25s; }
.cmp-side .screen.held video { filter: saturate(.5) brightness(.7); }
.cmp-side .live { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(15, 18, 24, .72); font: 600 13px/1.5 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.cmp-side .end { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 5px; background: rgba(255, 255, 255, .94);
  font: 600 13.5px/1.3 var(--sans); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .25s; }
.cmp-side .screen.held .end { opacity: 1; }
.cmp-side[data-k="ours"] .live { background: var(--player); }
.cmp-side .deck { margin-top: 8px; }
.cmp-side .ms { width: 12%; }
.cmp-side[data-k="base"] .key.down .top { fill: #eceff2; stroke: #8b939e; }
.cmp-side[data-k="base"] .key.down .base { fill: #6b7280; }
.cmp-side[data-k="base"] .mbtn.down { fill: #e3e7eb; }
.cmp-side[data-k="base"] .ripple { border-color: #8b939e; }
.cmp-chart .task { margin-bottom: 10px; }
.cmp-chart .task p { font-size: 14.5px; line-height: 1.5; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; font: 13.5px/1.3 var(--sans); color: var(--ink-2); }
.cmp-legend span { display: flex; align-items: center; gap: 7px; }
.cmp-legend i { width: 14px; height: 3px; border-radius: 2px; }
.cmp-legend b { margin-left: 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-plot { position: relative; flex: 1 1 0; min-height: 120px; cursor: pointer; touch-action: none; }
.cmp-plot canvas { position: absolute; left: 0; top: 0; }
.cmp-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 13px "Public Sans", var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp-foot button { width: 36px; height: 28px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: #fff; cursor: pointer; font: 12px/1 var(--sans); color: var(--ink); }
@media (max-width: 1100px) {
  .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-chart { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 28px; }
  .lb th.sort { width: auto; }
  .lb .bar { display: none; }
  .lb .effort { display: block; margin: 2px 0 0; }
}
@media (max-width: 560px) {
  .cmp-grid { grid-template-columns: 1fr; }
}

.bib { position: relative; margin-top: 18px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--panel); }
.bib pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 13px/1.6 var(--mono); color: var(--ink); }
.bib button { position: absolute; top: 10px; right: 10px; height: 28px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: #fff; cursor: pointer; font: 500 12.5px/1 var(--sans); color: var(--ink-2); }
.foot { margin-top: 72px; padding: 18px 0 40px; border-top: 1px solid var(--rule); font: 13px/1.4 var(--sans); color: var(--ink-3); }

/* Keep navigation and text sections readable on smaller screens. */
.topnav .brand { flex-shrink: 0; }
.topnav .links { min-width: 0; }
h2.sec, .contrib h4 { text-wrap: balance; }
.bib pre { padding-top: 48px; }
@media (max-width: 1180px) {
  .topnav .wrap { gap: 20px; }
  .topnav .links { justify-content: flex-start; overflow-x: auto; gap: 18px; }
  .topnav .links a { flex-shrink: 0; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  h2.sec { font-size: 27px; }
  .contrib { grid-template-columns: 1fr; gap: 12px; }
  .contrib > div { padding: 16px; }
  .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .block-head { flex-wrap: wrap; gap: 8px; }
}

/* Results follows the same text measure and rhythm as the method sections. */
#results .block { margin-top: 32px; }   /* figures span the page; the text in them keeps its own measure */
#results .block + .block { padding-top: 28px; border-top: 1px solid var(--rule); }
#results .block-head { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
#results .block h3 { font-weight: 600; line-height: 1.3; text-wrap: balance; }
#results .note { max-width: 1080px; margin: 12px 0 18px; font: 17px/1.7 var(--sans); color: var(--ink); }
#results .fig-cap { max-width: 1080px; margin-top: 12px; }
#results .tbl { font-size: 15px; line-height: 1.5; }
#results .tbl th, #results .tbl td { padding-top: 10px; padding-bottom: 10px; }
#results .tbl.abl th, #results .tbl.abl td { padding-top: 9px; padding-bottom: 9px; }   /* level with the chart beside it */

svg.skel .ax { font: 12px var(--sans); fill: var(--ink-3); }
svg.skel .tick { font: 12.5px var(--sans); fill: var(--ink-2); }
svg.skel .grid { stroke: var(--rule); }
svg.skel .tbd { font: 600 13px var(--sans); fill: var(--ink-3); }
svg.skel .foot { stroke-width: 3; }

/* Compact screens keep content in document flow and turn the loop into a stage grid. */
.compact-hint { display: none; }
.mobile-step-title { display: none; }
.step-group { display: contents; }
@media (max-width: 1100px), (max-height: 760px) {
  :root { --nav: 84px; }
  .wrap { width: min(var(--max), calc(100% - 32px)); }
  .bignums { gap: 28px; }
  .bignums b { font-size: 32px; white-space: nowrap; }
  .desktop-hint { display: none; }
  .compact-hint { display: block; font-size: 14px; color: var(--ink-3); }
  .topnav .wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .topnav .brand { flex: none; font-size: 14px; padding-top: 12px; padding-bottom: 6px; }
  .topnav .links { flex: 1; min-width: 0; justify-content: flex-start; gap: 20px; overflow-x: auto; }
  .topnav .links a { flex: none; min-height: 44px; }
  #intro { height: 230svh; }
  .title-band { width: calc(100% - 32px); padding: 20px 16px; white-space: normal; }
  .title-band h1 { font-size: clamp(32px, 8vw, 60px); }
  .title-band .links { flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .title-band .btn { font-size: 13px; padding: 0 10px; min-height: 44px; }
  .stage { height: 100svh; }
  .title-band .people { margin-top: 12px; }
  .intro { margin-top: 28px; padding-top: 12px; }
  .prose p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
  .contrib, .release { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .contrib > div, .release > div { padding: 14px; }
  .contrib .ic { float: left; width: 30px; height: 30px; margin: 0 10px 6px 0; }
  .contrib .ic svg.i { width: 18px; height: 18px; }
  .contrib h4 { font-size: 15px; margin-bottom: 6px; }
  .contrib p, .release p { font-size: 13px; line-height: 1.55; }
  .release h4 { margin: 8px 0 4px; font-size: 15px; }
  .release p { margin-bottom: 10px; }
  .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 14px; }
  .signals h4 { font-size: 14px; }
  .signals p { font-size: 13px; line-height: 1.5; }
  .pin { height: auto; }
  .pin-stage { position: relative; top: auto; height: auto; overflow: visible; padding-top: 14px; }
  .cycle-box { overflow-x: auto; overflow-y: hidden; margin-bottom: 14px; border: 1px solid var(--rule); border-radius: 8px; scrollbar-width: thin; }
  .cycle { left: 0; transform-origin: 0 0; }
  .loop-panel { height: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; padding-top: 14px; }
  .lp-head .ic { float: left; width: 34px; height: 34px; margin: 0 10px 6px 0; }
  .lp-head h3 { font-size: 19px; margin-bottom: 4px; }
  .lp-head p { font-size: 14px; line-height: 1.5; }
  .board { padding: 12px; }
  .rail { display: none; }
  .cards { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .step-group { display: block; min-width: 0; }
  .mobile-step-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 14px/1.4 var(--sans); }
  .mobile-step-title b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 5px; color: var(--tone); background: var(--tint); font-size: 12px; }
  .cards .card { min-width: 0; height: 220px; }
  .cards .card:not(.media) { overflow: auto; }
  .cards .api, .cards .mini { overflow: auto; }
  .bench { gap: 14px; }
  .bench > * { min-width: 0; }
  .task p { font-size: 14px; line-height: 1.5; }
  .transport button, .scrub { min-height: 44px; }
  .transport button { width: 44px; }
  .read { margin-top: 0; margin-bottom: 0; }
  .read b { font-size: 20px; }
  .probe { margin-top: 2px; }
  .stage-head, .stage-head.end { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 16px; }
  .tabs button { flex: none; min-height: 44px; font-size: 13px; }
  .code-window { height: 300px; }
  .code-window .bar { gap: 12px; overflow-wrap: anywhere; }
  .code .ln { grid-template-columns: 30px 24px minmax(0, 1fr); }
  .code .src { overflow: visible; }
  .code { min-width: max-content; }
  .who { gap: 20px; justify-content: space-between; }
  .who button { min-height: 44px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .who button .name { font-size: clamp(18px, 3.5vw, 26px); }
  .block-head { align-items: flex-start; }
  .soon-tag { flex: none; }
  .bib pre { padding-top: 48px; }
  .fig-cap { margin-top: 8px; font-size: 13px; line-height: 1.5; }
  .block { margin-top: 26px; }
  .note { font-size: 14px; margin-bottom: 12px; }
  svg.skel { height: 210px; }
  .foot { margin-top: 36px; padding-bottom: 24px; }
}

@media (max-width: 540px) {
  .contrib { grid-template-columns: minmax(0, 1fr); }
  .head-row { gap: 12px; }
  h2.sec { font-size: 28px; }
  .bignums { gap: 24px; }
  .bignums b { font-size: 28px; }
  .bignums span { font-size: 13px; }
  .block-head { flex-wrap: wrap; gap: 8px; }
  .turn { grid-template-columns: 24px 52px minmax(0, 1fr); gap: 8px; }
  .turn .th { width: 52px; }
  .turn p { overflow-wrap: anywhere; }
  .think { left: 8px; top: 8px; padding: 6px 8px; gap: 5px; font-size: 11px; }
}

@media (min-width: 800px) and (max-width: 1100px), (min-width: 800px) and (max-height: 760px) {
  #ex-bench, #pv-bench, #vm-bench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .code-window { height: auto; min-height: 340px; }
}

@media (max-width: 900px) and (max-height: 500px) {
  .games-head { padding-top: calc(var(--nav) + 12px); }
  .games-head .head-row { padding-top: 8px; }
  .games-head h2.sec { font-size: 24px; }
  .bignums { margin-top: 6px; padding-bottom: 8px; }
  .bignums b { font-size: clamp(22px, 4vw, 28px); }
  .bignums span { margin-top: 0; font-size: 13px; }
}

/* Keep readable controls and content at intermediate sizes as well as on phones. */
button:focus-visible, a:focus-visible { outline: 3px solid var(--player); outline-offset: 3px; }
@media (max-width: 1100px), (max-height: 760px) {
  .loop-panel .lp-head { max-width: 680px; }
  .track { align-items: start; }
  .face[inert] { visibility: hidden; height: 0; overflow: hidden; }
  .release { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}
@media (min-width: 800px) and (max-width: 1100px), (min-width: 800px) and (max-height: 760px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mobile-step-title { min-height: 40px; }
}
@media (max-width: 380px) {
  .who { gap: 12px; }
  .tag { font-size: 10px; padding-inline: 6px; }
}

/* The current pipeline includes Builder skills and two distinct outputs. */
@media (max-width: 1100px), (max-height: 760px) {
  .title-band .affil { flex-wrap: wrap; justify-content: center; }
  .method-summary p, #results .note { font-size: 15px; line-height: 1.6; }
}

/* Wide result tables scroll within their panels rather than widening the page. */
.duo > *, .cmp-grid > * { min-width: 0; }
.lb, #ablation { overflow-x: auto; }
@media (max-width: 600px) {
  .lb.hide-interfaces .harness-interface { display: none; }
  .lb th, .lb td { padding-left: 8px; padding-right: 8px; }
  .lb table { font-size: 13px; }
  .legend { flex-wrap: wrap; gap: 8px 16px; }
  .cmp-foot { flex-wrap: wrap; }
  .cmp-foot button { min-width: 44px; min-height: 44px; }
}

/* Compact views keep navigation and comparisons close to the content. */
.compact-control { display: none; }
@media (max-width: 1100px), (max-height: 760px) {
  :root { --nav: 56px; }
  .topnav .wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .topnav .brand { padding: 0; }
  .topnav .links { display: none; }
  .compact-control { display: flex; align-items: center; gap: 8px; }
  select, .compact-control button { min-height: 44px; border: 1px solid var(--rule-2); border-radius: 6px; padding: 8px 10px; background: white; color: var(--ink); font: 500 13px/1.3 var(--sans); }
  .section-menu { width: min(52%, 240px); }
  .stage-picker { margin: 12px 0 0; flex-wrap: wrap; font-size: 13px; }
  .stage-picker select { flex: 1; min-width: 0; }
  .stage-picker label { width: 100%; color: var(--ink-2); }
  .loop-panel { gap: 10px; padding-top: 12px; border-top: 0; }
  .lp-head h3 { font-size: 18px; }
  .lp-head p { font-size: 13px; line-height: 1.45; }
  .loop-panel .board { padding: 10px; }
  .step-controls { align-items: stretch; gap: 6px; margin-bottom: 10px; }
  .step-controls button { flex: 1; min-width: 0; padding: 6px; font-size: 12px; }
  .step-controls button[aria-pressed=true] { background: var(--tint); border-color: var(--tone); }
  .loop-panel .cards { display: block; }
  .loop-panel .step-group { display: none; }
  .loop-panel .step-group.selected { display: block; }
  .loop-panel .mobile-step-title { display: none; }
  .loop-panel .cards .card { height: clamp(160px, 30svh, 250px); }
  .board-controls { justify-content: flex-end; font-size: 13px; }
  .lb { margin-top: 16px; }
  .lb table { table-layout: fixed; font-size: 13px; }
  .lb td { height: 48px; }
  .lb th, .lb td { padding-left: 6px; padding-right: 6px; }
  .lb th:first-child { width: 32px; }
  .lb th.sort { width: 82px; }
  .lb td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
  .lb .effort { display: block; margin: 2px 0 0; font-size: 11px; }
  .lb .bar { display: none; }
  .lb[data-metric=progress] tr > :nth-child(4), .lb[data-metric=success] tr > :nth-child(3) { display: none; }
  .suite-picker { margin-top: 12px; font-size: 13px; }
  #ablation .tbl { width: 100%; table-layout: fixed; font-size: 13px; }
  #ablation .tbl th, #ablation .tbl td { white-space: normal; padding: 8px 4px; }
  #ablation[data-suite=PlayerBench] tr:first-child > :nth-child(3),
  #ablation[data-suite=PlayerBench] tr:nth-child(2) > :nth-child(n+3),
  #ablation[data-suite=PlayerBench] tr:not(:first-child):not(:nth-child(2)):not(.grp) > :nth-child(n+4),
  #ablation[data-suite=GameWorld] tr:first-child > :nth-child(2),
  #ablation[data-suite=GameWorld] tr:nth-child(2) > :nth-child(-n+2),
  #ablation[data-suite=GameWorld] tr:not(:first-child):not(:nth-child(2)):not(.grp) > :nth-child(2),
  #ablation[data-suite=GameWorld] tr:not(:first-child):not(:nth-child(2)):not(.grp) > :nth-child(3) { display: none; }
}

/* Consistent compact card alignment and control spacing. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%234b5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
@media (max-width: 1100px), (max-height: 760px) {
  select { padding-right: 40px; }
  .contrib > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; align-items: center; gap: 12px 10px; }
  .contrib .ic { float: none; margin: 0; }
  .contrib h4 { margin: 0; }
  .contrib p { grid-column: 1 / -1; margin: 0; }
  #who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #who button { width: 100%; align-items: center; gap: 6px; padding: 4px 0; }
  #who button .name { font-size: clamp(16px, 3.5vw, 26px); white-space: nowrap; }
}

/* Metric visibility follows the leaderboard's width, independently of page height. */
.lb { container-type: inline-size; }
@container (min-width: 480px) {
  .lb[data-metric=progress] tr > :nth-child(4),
  .lb[data-metric=success] tr > :nth-child(3) { display: table-cell; }
}
@container (min-width: 480px) {
  .board-controls { display: none; }
}
@media (max-width: 1100px), (max-height: 760px) {
  .dash { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 260px; }
  .boards .lb th.sort { width: 82px; }
}
@media (max-width: 600px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) { .dash { grid-template-columns: 1fr; } }

/* Three universities on the first row; Northwestern and IBM on the second. */
.affiliations { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 20px; max-width: 610px; }
.affiliations li { grid-column: span 2; }
.affiliations li:nth-child(4) { grid-column: 2 / 4; }
.affiliations li:last-child { grid-column: 4 / 6; }
.affiliations .logo-northwestern { width: 170px; height: auto; object-fit: contain; }
@media (max-width: 700px) {
  .affiliations { gap: 4px 12px; max-width: 410px; }
  .affiliations li { min-height: 32px; }
}

/* Keep chapter navigation within its available width. */
.topnav .wrap { gap: 22px; }
.topnav .links { justify-content: flex-start; gap: 16px; overflow-x: auto; }
.topnav .links a { flex: 0 0 auto; }
@media (max-width: 1250px) {
  .topnav .wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .topnav .brand { padding: 0; }
  .topnav .links { display: none; }
  .topnav .section-menu { display: block; width: min(52%, 240px); min-height: 40px; border: 1px solid var(--rule-2); border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--ink); font: 500 13px/1.3 var(--sans); }
}

.title-band .people { max-width: 58em; margin-left: auto; margin-right: auto; line-height: 1.7; text-wrap: balance; }
.title-band .people .author { display: inline-block; white-space: nowrap; margin-inline: 2px; }

/* Keep names, contribution credit, and contact information visually distinct. */
.title-band .people { margin-top: 18px; font-size: 14px; line-height: 1.65; }
.author sup { font-size: 10px; margin-left: 2px; }
.title-band .author-note { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.title-band .author-contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 12px; margin: 3px 0 12px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.author-contact a { color: var(--player-ink); text-decoration: none; }
.author-contact a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .title-band .people { font-size: 13px; }
}

/* Compact author details and a single affiliation row on desktop. */
.title-band .author-contact { margin-top: 7px; column-gap: 12px; }
.affiliations { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(12px, 1.4vw, 22px); max-width: 100%; }
.affiliations li { min-width: 0; min-height: 38px; }
.affiliations .logo-uiuc { width: 128px; }
.affiliations .logo-ucsb { width: 148px; }
.affiliations .logo-gt { width: 116px; }
.affiliations .logo-northwestern { width: 140px; }
.affiliations .logo-ibm { width: 60px; }
@media (max-width: 700px) {
  .affiliations { flex-wrap: wrap; gap: 6px 18px; }
  .affiliations li { flex: 0 0 auto; }
}

/* Balance the full author list across the available width. */
.title-band .people { font-size: 13px; }
.affiliation-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; list-style: none; margin: 12px 0 0; padding: 0; color: var(--ink-2); font: 500 13px/1.6 var(--sans); }
.affiliation-names li { white-space: nowrap; }

.affiliation-names sup { font-size: 10px; line-height: 0; vertical-align: super; }

/* Smaller affiliation indices; keep the equal-contribution marker unchanged. */
.author sup:not([aria-label]), .affiliation-names sup { font-size: 8px; line-height: 0; }

/* Each logo has a stable proportional size and an aligned affiliation index. */
.affiliation-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; list-style: none; padding: 0; margin: 14px auto 0; }
.affiliation-logos li { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 40px; padding-left: 10px; }
.affiliation-logos sup { position: absolute; left: 0; top: 3px; font: 400 8px/1 var(--sans); color: var(--ink-2); }
.affiliation-logos img { display: block; flex: none; height: auto; max-height: 34px; object-fit: contain; }
.affiliation-logos .logo-uiuc { width: 116px; }
.affiliation-logos .logo-ucsb { width: 134px; }
.affiliation-logos .logo-gt { width: 94px; }
.affiliation-logos .logo-northwestern { width: 128px; }
.affiliation-logos .logo-ibm { width: 54px; }
@media (max-width: 700px) { .affiliation-logos { gap: 6px 14px; } }