:root {
  --ink: #1a1a1a;
  --muted: #5f5f5f;
  --faint: #737373;
  --rule: #dddddd;
  --hair: #eeeeee;
  --link: #1f5fa8;
  --paper: #ffffff;
  --qwen: #3B8ED0;
  --smol: #E4572E;
  --off: #dedede;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 48px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

img { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 50; background: #fff; padding: 6px 10px; }

.masthead, main, footer, .topnav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

section[id], header[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* ---------- Top nav ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.topnav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav-h);
}
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.topnav-links {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  height: 100%;
  align-items: stretch;
}
.topnav-links::-webkit-scrollbar { display: none; }
@media (max-width: 860px) { .topnav-links { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; } }
.topnav-links a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.topnav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.topnav-links a:hover { color: var(--ink); }
.topnav-links a.is-active { color: var(--ink); }
.topnav-links a.is-active::after { transform: scaleX(1); }

/* ---------- Masthead ---------- */
.masthead { padding-top: 56px; padding-bottom: 36px; }

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  max-width: 860px;
}

.byline { margin: 0 0 26px; font-size: 16px; }
.byline .author { font-weight: 600; }
.byline .affil { color: var(--muted); }
.byline .affil::before { content: ""; display: inline-block; width: 1px; height: 0.95em; background: var(--rule); margin: 0 12px; vertical-align: -0.1em; }

.links { display: flex; flex-wrap: wrap; gap: 10px; }
.links a, .links .disabled {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #c9c9c9;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}
.links a:hover { border-color: var(--link); color: var(--link); }
.links .disabled { color: var(--faint); border-color: var(--rule); cursor: default; }
.links .note { font-weight: 400; font-size: 12.5px; margin-left: 4px; font-style: italic; }

/* ---------- Sections ---------- */
section { padding: 44px 0 8px; border-top: 1px solid var(--rule); }

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 18px;
}

h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19.5px;
  line-height: 1.3;
  margin: 0 0 8px;
}

p { margin: 0 0 18px; }

.sec-lead { max-width: 720px; color: #333; }

#abstract p { font-family: var(--serif); font-size: 18px; line-height: 1.68; hyphens: auto; }

h2.label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 4px 0 12px;
}

/* ---------- Segmented controls ---------- */
.demo-controls, .chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.seg {
  appearance: none;
  background: #fff;
  border: 1px solid #c9c9c9;
  margin-left: -1px;
  padding: 6px 13px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.seg:first-child { margin-left: 0; }
.seg:hover { color: var(--ink); }
.seg.is-on { background: var(--ink); border-color: var(--ink); color: #fff; position: relative; z-index: 1; }
.play {
  appearance: none;
  background: none;
  border: 0;
  margin-left: 14px;
  padding: 6px 2px;
  font-size: 13.5px;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.chart-controls { margin: 0 0 22px; }

/* ---------- Demo ---------- */
.demo-section { border-top: 0; padding-top: 8px; }
.demo-prompt { max-width: 760px; font-size: 16.5px; color: #333; }
.demo-prompt q { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); quotes: "\201C" "\201D"; }

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
  margin: 26px 0 22px;
}
.demo-stage { --gap: 18px; min-width: 0; }
.slot-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.slot-labels .is-pick { color: var(--ink); font-weight: 600; }
.slot-labels em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 6px; }

.slot-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.cand {
  grid-area: 1 / 1;
  margin: 0;
  transform: translateX(calc(var(--i) * (100% + var(--gap))));
  transition: transform .75s var(--ease), opacity .4s;
  will-change: transform;
}
.cand img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f2f2f2; }
.cand figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cand .rt { color: var(--faint); }
.cand.is-picked figcaption { color: var(--ink); }
.cand.is-picked .rt { color: var(--ink); font-weight: 600; }
.cand { opacity: 0.6; }
.cand.is-picked, .demo.is-moving .cand { opacity: 1; }

.pick-frame {
  position: absolute;
  z-index: 2;
  left: -6px;
  top: -6px;
  width: calc((100% - 2 * var(--gap)) / 3 + 12px);
  aspect-ratio: 1 / 1;
  border: 2px solid var(--ink);
  pointer-events: none;
  transition: opacity .25s;
}
.demo.is-moving .pick-frame { opacity: 0.15; }

.demo-readout { padding-top: 26px; }
.big {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.big-cap { font-size: 14px; color: var(--muted); margin: 10px 0 22px; line-height: 1.45; max-width: 220px; }

.scale { position: relative; height: 46px; margin: 0 0 26px; }
.scale-line { position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: var(--ink); }
.scale-tick { position: absolute; top: 13px; width: 1px; height: 11px; background: var(--faint); }
.scale-mean { position: absolute; top: 8px; height: 21px; border-left: 1px dashed var(--muted); }
.scale-mean span { position: absolute; top: 24px; left: 0; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.scale-dot {
  position: absolute; top: 12px; width: 13px; height: 13px; margin-left: -6.5px;
  border-radius: 50%; background: var(--ink);
  transition: left .5s var(--ease);
}
.scale-end { position: absolute; top: 24px; font-size: 11.5px; color: var(--faint); }
.scale-end.l { left: 0; } .scale-end.r { right: 0; }

.demo-note { max-width: 760px; color: #333; }
.demo-note b { font-weight: 600; }

/* ---------- Findings row ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .frow .reveal:nth-child(2) { transition-delay: .1s; }
.js .frow .reveal:nth-child(3) { transition-delay: .2s; }

.findings { padding-top: 34px; }
.findings h2.label { margin-bottom: 18px; }
.frow { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.frow li { padding: 18px 26px 6px 0; display: flex; flex-direction: column; }
.frow li > a { margin-top: auto; align-self: flex-start; }
.frow li + li { padding-left: 26px; border-left: 1px solid var(--rule); }
.frow .fk { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.015em; margin: 0 0 14px; font-variant-numeric: tabular-nums lining-nums; }
.frow h3 { font-size: 18px; margin: 0 0 6px; }
.frow p { font-size: 14.5px; line-height: 1.55; color: #333; margin: 0 0 10px; }
.frow a { font-size: 13.5px; }

/* ---------- Method: scrollytelling ---------- */
.scrolly {
  --sq: #3B8ED0; --ss: #E4572E; --good: #2EAD5B; --bad: #E04848; --agree: #8E6CC7;
  --fly: cubic-bezier(.22, 1, .36, 1);
  --snap: cubic-bezier(.34, 1.5, .64, 1);
  position: relative;
  width: min(1180px, calc(100vw - 48px));
  margin: 18px 0 18px calc(50% - min(590px, 50vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  gap: 44px;
}
.st-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 14px);
  align-self: start;
  height: min(720px, calc(100vh - var(--nav-h) - 28px));
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.st-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.st-stage > *, .st-cells > * {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  opacity: 0;
  transition: transform .9s var(--fly), opacity .45s ease, width .9s var(--fly), height .9s var(--fly), background-color .45s ease, border-color .45s ease;
}
.st-stage > .st-cells { position: absolute; inset: 0; opacity: 1; transition: none; }
.st-stage.instant *, .st-stage.instant { transition: none !important; }
.st-cell { background: #dadada; transition-duration: .8s, .4s, .8s, .8s, .45s; }
.st-cell.alt { background: #e9e9e9; }
.ex-on .st-cell.ex { background: var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; }
.mini .st-cell { background: #e4e4e4; }
.mini .st-cell.kept { background: var(--agree); }
.mini .st-cell.ex { background: var(--ink); }

.st-cap, .st-colh, .st-ccap { font: 500 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st-lab { font: 400 11px/14px var(--sans); color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; }
.st-lab .ln { display: none; }
.narrow .st-lab .lw { display: none; }
.narrow .st-lab .ln { display: inline; font-size: 9px; letter-spacing: .02em; }
.st-lead { background: var(--ink); width: 1px; }
.st-prompt { text-align: center; }
.st-meta { display: block; font: 500 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.st-prompt q { font: italic 400 18px/1.35 var(--serif); color: var(--ink); quotes: "\201C" "\201D"; }
.st-gen { font: 400 12px/1.3 var(--sans); color: var(--muted); text-align: center; white-space: nowrap; }

.st-im { z-index: 2; overflow: hidden; background: #f0f0f0; }
.st-im.clone { z-index: 1; }
.st-im img { width: 100%; height: 100%; object-fit: cover; }
.st-tag { position: absolute; left: 0; top: 0; padding: 1px 5px; background: rgba(255,255,255,.92); font: 600 10.5px/1.5 var(--sans); color: var(--ink); transition: opacity .4s; }
.s0 .st-tag, .s1 .st-tag { opacity: 0; }
.st-rt {
  position: absolute; left: 0; bottom: 0; padding: 2px 7px 1px; background: var(--paper);
  font: 600 14px/1.35 var(--sans); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-16px);
  transition: opacity .35s ease, transform .55s var(--snap);
}
.rated .st-rt { opacity: 1; transform: none; }
.st-rt.good { color: #1f8a45; } .st-rt.bad { color: var(--bad); } .st-rt.mid { color: var(--ink); }

.st-colh { text-align: center; }
.st-rowl { font: 600 12.5px/18px var(--sans); color: var(--ink); white-space: nowrap; }

.st-fr { z-index: 3; border: 2.5px solid var(--sq); transform-origin: 50% 50%; pointer-events: none;
  transition: transform .5s var(--snap), opacity .3s ease, width .9s var(--fly), height .9s var(--fly), border-color .45s; }
.st-fr span { position: absolute; right: 0; bottom: 0; padding: 0 5px 1px; font: 600 10.5px/1.5 var(--sans); color: #fff; background: var(--sq); transition: background-color .45s; }
.st-fr.s { border-color: var(--ss); border-style: dashed; }
.st-fr.s span { background: var(--ss); bottom: auto; top: 0; }
.st-fr.dim { border-color: #9a9a9a; }
.st-fr.dim span { background: #9a9a9a; }

.st-legend p { margin: 0 0 10px; padding-left: 20px; text-indent: -20px; font-size: 13.5px; line-height: 1.45; color: #333; }
.st-legend .sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2.5px solid var(--sq); }
.st-legend .sw.s { border-color: var(--ss); border-style: dashed; }
.st-legend b { font-weight: 600; }
.c-q { color: #2a76b6; } .c-s { color: #c4441f; }
.st-mute { color: var(--faint); }

.st-th { z-index: 3; overflow: hidden; background: #f0f0f0; outline: 1px solid var(--ink); outline-offset: 2px; }
.st-th img { width: 100%; height: 100%; object-fit: cover; }
.st-ne { font: 400 22px/20px var(--serif); color: var(--muted); text-align: center; }
.st-stamp {
  z-index: 4; transform-origin: 50% 50%;
  padding: 5px 11px 4px; border: 2px solid currentColor; color: #b54646; background: rgba(255,255,255,.92);
  font: 700 13px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transition: transform .45s var(--snap), opacity .25s ease;
}
.st-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: #333; }
.st-ctr-n { display: block; font-size: 13.5px; color: #333; font-variant-numeric: tabular-nums; }
.st-ctr-n b { font: 600 26px/1 var(--serif); color: var(--ink); margin-right: 2px; }
.st-ctr-k { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.st-ctr-k i { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 0; vertical-align: 0; }
.st-ctr-k i.kp { background: var(--agree); }
.st-ctr-k i.me { background: var(--ink); margin-left: 12px; }

.st-rbox { z-index: 3; padding: 10px 12px; border: 1.5px dashed var(--muted); background: var(--paper); }
.st-rbox b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.st-rbox span { display: block; font-size: 12.5px; line-height: 1.45; color: #333; }
.st-rbox .st-mute { color: var(--faint); }
.st-stage > .st-ln { width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; transition: opacity .3s; }
.st-ln.on { opacity: 1; }
.st-lp { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 5 4; }
.st-ln marker path { fill: var(--muted); }
.st-lm { transition: stroke-dashoffset 1s var(--fly); }

.st-axis { height: 1px; background: var(--ink); }
.st-dot { width: 13px; height: 13px; margin: -6px 0 0 -6.5px; border-radius: 50%; background: var(--sq); z-index: 3; border: 2px solid var(--paper); box-sizing: content-box; margin: -8px 0 0 -8.5px;
  transition: transform 1.1s var(--fly), opacity .3s ease; }
.st-br { height: 7px; border: 1px solid var(--ink); border-top: 0; }
.st-br.zero { border: 0; }
.st-brl { font: 400 11.5px/1.3 var(--sans); color: var(--muted); white-space: nowrap; padding: 0 4px; background: var(--paper); z-index: 2; }
.st-v { width: 0; border-left: 1px dashed var(--muted); }
.st-v.best { border-left: 1.5px solid var(--good); }
.st-vl { font: 500 11px/1.3 var(--sans); white-space: nowrap; color: var(--muted); }
.st-vl.best { color: #1f8a45; font-weight: 600; }
.st-end { font: 400 10.5px/1 var(--sans); color: var(--faint); }
.st-take { margin: 0; font: 400 18px/1.4 var(--serif); color: var(--ink); }

.st-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; border-top: 1px solid var(--hair); }
.st-btn {
  appearance: none; background: var(--paper); border: 1px solid #c9c9c9; padding: 4px 11px;
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer;
}
.st-btn:hover { border-color: var(--ink); }
.st-count { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 84px; text-align: center; }
.st-all {
  appearance: none; background: none; border: 0; padding: 4px 0; margin-left: auto; cursor: pointer;
  font-size: 13px; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.st-all-top { display: none; grid-column: 1 / -1; justify-self: start; margin: 0 0 8px; }

.st-steps { list-style: none; margin: 0; padding: 0; }
.st-step { min-height: 78vh; display: flex; align-items: center; }
.st-step:first-child { min-height: 64vh; align-items: flex-start; padding-top: 18vh; }
.st-step:last-child { min-height: 92vh; }
.st-card { padding: 4px 0 4px 18px; border-left: 2px solid var(--hair); transition: border-color .4s, opacity .4s; opacity: .35; }
.st-step.is-active .st-card { border-left-color: var(--ink); opacity: 1; }
.st-k { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-card h3 { font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
.st-card p:last-child { margin: 0; font-size: 16px; line-height: 1.6; color: #333; }
.st-static { display: none; }

.st-full { font-size: 13.5px; color: var(--muted); margin: 6px 0 32px; }

/* No JS: plain numbered text */
html:not(.js) .scrolly { display: block; width: auto; margin: 0; }
html:not(.js) .st-sticky { display: none; }
html:not(.js) .st-step, html:not(.js) .st-step:first-child, html:not(.js) .st-step:last-child { min-height: 0; padding: 0 0 20px; }
html:not(.js) .st-card { opacity: 1; }

/* Show all: every step drawn in its final state */
.scrolly.is-static { display: block; width: auto; margin: 18px 0; }
.is-static .st-sticky { display: none; }
.is-static .st-all-top { display: inline-block; }
.is-static .st-step, .is-static .st-step:first-child, .is-static .st-step:last-child { display: block; min-height: 0; padding: 0 0 40px; }
.is-static .st-card { opacity: 1; border-left-color: var(--ink); max-width: 720px; }
.is-static .st-static { display: block; flex: none; height: 520px; max-width: 820px; margin-top: 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

@media (max-width: 860px) {
  .scrolly { display: block; width: auto; margin: 14px 0; }
  .st-sticky { top: var(--nav-h); height: 58vh; height: 58svh; z-index: 4; border-top: 0; }
  .st-bar { height: 40px; gap: 8px; }
  .st-steps { position: relative; z-index: 3; }
  .st-step, .st-step:first-child, .st-step:last-child { display: block; min-height: 0; padding: 0 0 26vh; }
  .st-step:first-child { padding-top: 6vh; }
  .st-step:last-child { padding-bottom: 34vh; }
  .st-card { opacity: 1; background: var(--paper); border: 0; border-left: 2px solid var(--rule); padding: 2px 0 2px 14px; }
  .st-step.is-active .st-card { border-left-color: var(--ink); }
  .st-card h3 { font-size: 18.5px; margin-bottom: 6px; }
  .st-card p:last-child { font-size: 15px; line-height: 1.5; }
  .st-prompt q { font-size: 15px; }
  .st-take { font-size: 14.5px; }
  .st-rowl { font-size: 11.5px; }
  .st-legend p { font-size: 12.5px; margin-bottom: 3px; }
  .st-legend br { display: none; }
  .st-legend b::after { content: " "; }
  .st-rt { font-size: 12px; padding: 1px 5px; }
  .st-stamp { font-size: 11.5px; padding: 4px 8px 3px; }
  .st-ctr-n b { font-size: 21px; }
  .st-ctr-k i.me { margin-left: 8px; }
  .is-static .st-static { height: 490px; }
}
@media (max-width: 600px) {
  .st-btn { padding: 4px 8px; }
  .st-count { min-width: 0; font-size: 11.5px; }
  .st-all { font-size: 12.5px; }
}

/* ---------- Charts ---------- */
.chart-fig { margin: 0 0 36px; }
.chart { width: 100%; max-width: 760px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { stroke: var(--ink); stroke-width: 1; }
.chart .grid { stroke: var(--hair); stroke-width: 1; }
.chart .tick { font: 400 11.5px var(--sans); fill: var(--faint); font-variant-numeric: tabular-nums; }
.chart .xl { font: 500 13px var(--sans); fill: var(--ink); text-anchor: middle; }
.chart .xs { font: 400 11.5px var(--sans); fill: var(--muted); text-anchor: middle; }
.chart .val { font: 600 12px var(--sans); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; font-variant-numeric: tabular-nums; transition: opacity .4s .5s; }
.chart.is-narrow .val { font-size: 10.5px; stroke-width: 3px; }
.chart.is-narrow .xl { font-size: 12px; }
.chart .uni { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; transition: opacity .4s .4s; }
.chart .leg { font: 500 12.5px var(--sans); }
.chart .bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform .8s var(--ease);
}
.chart.in .bar { transform: scaleY(1); }
.chart .val, .chart .uni { opacity: 0; }
.chart.in .val, .chart.in .uni { opacity: 1; }
.chart .q { fill: var(--qwen); } .chart .s { fill: var(--smol); } .chart .v { fill: var(--qwen); }
.chart .qt { fill: var(--qwen); } .chart .st { fill: var(--smol); }
.chart-note { font-size: 12.5px; color: var(--faint); }

/* ---------- Scale small multiples ---------- */
.sm-fig { margin: 8px 0 26px; }
.sm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.smp { padding: 14px 24px 4px 0; min-width: 0; }
.smp + .smp { padding-left: 24px; border-left: 1px solid var(--rule); }
.smp-h { margin: 0 0 14px; line-height: 1.2; }
.smp-h b { display: block; font: 600 30px/1 var(--serif); letter-spacing: -0.01em; }
.smp-h span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.smp-k { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.smp-sub { margin: 4px 0 18px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.smf { display: grid; grid-template-columns: minmax(0, 1fr) 50px; align-items: center; gap: 10px; }
.smf-track { position: relative; height: 18px; background: #f3f3f3; }
.smf-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--qwen); transform-origin: 0 50%; }
.smf-uni { position: absolute; top: -4px; bottom: -4px; border-left: 1.5px dashed var(--ink); }
.smf-val { font: 600 17px/1 var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.smg { position: relative; padding: 16px 0 22px; }
.smg-axis { position: absolute; left: 0; right: 56px; top: 0; bottom: 0; pointer-events: none; }
.smg-axis .gl, .smg-axis .zl, .smg-axis .clip { position: absolute; top: 14px; bottom: 18px; width: 1px; }
.smg-axis .gl { background: var(--hair); }
.smg-axis .zl { background: var(--ink); }
.smg-axis .clip { width: 0; border-left: 1.5px dashed #8a8a8a; }
.smg-axis .tl { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 11px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.smg-axis .tl.z { color: var(--ink); }
.smg-axis .clip-l { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.smg-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px; grid-template-rows: auto 22px; align-items: center; margin-bottom: 4px; }
.smg-lab { grid-column: 1 / -1; justify-self: start; font-size: 12px; line-height: 1.3; color: #333; white-space: nowrap; padding: 0 6px 0 0; background: var(--paper); position: relative; z-index: 1; }
.smg-lab i { font-style: normal; color: var(--faint); margin-left: 3px; font-variant-numeric: tabular-nums; }
.smg-track { position: relative; height: 100%; }
.smg-bar { position: absolute; top: 50%; margin-top: -6px; height: 12px; background: var(--ink); }
.smg-row.a .smg-bar { background: var(--qwen); }
.smg-row.r .smg-bar { background: #9b9b9b; }
.smg-ci { position: absolute; top: 50%; margin-top: -.75px; height: 1.5px; background: var(--ink); }
.smg-ci::before, .smg-ci::after { content: ""; position: absolute; top: -4px; width: 1.5px; height: 9.5px; background: var(--ink); }
.smg-ci::before { left: 0; } .smg-ci::after { right: 0; }
.smg-val { font: 600 15px/1 var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.take { max-width: 760px; font: 400 19px/1.5 var(--serif); color: var(--ink); margin: 0 0 30px; padding-left: 16px; border-left: 2px solid var(--ink); }
.cult-note { max-width: 760px; font-size: 14.5px; line-height: 1.6; color: #333; margin: -18px 0 40px; }

.js .sm .smf-bar, .js .sm .smg-bar { transform: scaleX(0); transition: transform .8s var(--ease); }
.js .sm .smf-bar { transition-delay: calc(var(--p) * 220ms); }
.js .sm .smg-bar { transition-delay: calc(var(--p) * 220ms + 350ms + var(--r) * 110ms); }
.js .sm .smg-ci, .js .sm .smf-uni, .js .sm .smf-val, .js .sm .smg-val, .js .sm .smp-sub { opacity: 0; transition: opacity .45s ease; }
.js .sm .smf-uni { transition-delay: calc(var(--p) * 220ms + 500ms); }
.js .sm .smf-val, .js .sm .smp-sub { transition-delay: calc(var(--p) * 220ms + 600ms); }
.js .sm .smg-ci, .js .sm .smg-val { transition-delay: calc(var(--p) * 220ms + 900ms + var(--r) * 110ms); }
.js .sm.in .smf-bar, .js .sm.in .smg-bar { transform: none; }
.js .sm.in .smg-ci, .js .sm.in .smf-uni, .js .sm.in .smf-val, .js .sm.in .smg-val, .js .sm.in .smp-sub { opacity: 1; }
@media (max-width: 860px) {
  .sm { grid-template-columns: 1fr; }
  .smp, .smp + .smp { padding: 14px 0 6px; border-left: 0; }
  .smp + .smp { border-top: 1px solid var(--rule); }
  .smp-h { display: flex; align-items: baseline; gap: 10px; }
  .smp-h b { font-size: 24px; }
  .smp-h span { margin: 0; }
  .take { font-size: 17px; }
}

/* ---------- Gates ---------- */
.gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 30px;
}
.gate-count { font-size: 15px; margin: 0 0 12px; font-variant-numeric: tabular-nums; color: #333; }
.gate-count b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.dotgrid { display: grid; grid-template-columns: 84px repeat(30, minmax(0, 1fr)); gap: 4px 3px; align-items: center; }
.dotgrid .cn { font-size: 11.5px; color: var(--muted); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--off);
  transition: background-color .45s ease;
}
.dot.on { background: var(--ink); }
.dot-key { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.dot-key .k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 6px 0 0; vertical-align: -0.02em; }
.dot-key .k.kept { background: var(--ink); } .dot-key .k.rej { background: var(--off); margin-left: 14px; }

.gate-axis-title { font-size: 13px; color: var(--muted); margin: 6px 0 16px; }
.gbars { position: relative; padding-bottom: 30px; }
.grow { display: grid; grid-template-columns: 84px minmax(0, 1fr) 58px; align-items: center; gap: 12px; height: 52px; }
.glab { font-size: 14px; font-weight: 500; }
.glab .gn { display: block; color: var(--faint); font-weight: 400; font-size: 12.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gtrack { position: relative; height: 100%; }
.gbar {
  position: absolute; top: 50%; height: 16px; margin-top: -8px;
  background: var(--ink);
  transition: left .6s var(--ease), width .6s var(--ease), background-color .3s;
}
.grow[data-row="rejected"] .gbar { background: #9b9b9b; }
.gci {
  position: absolute; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink);
  transition: left .6s var(--ease), width .6s var(--ease), opacity .3s;
}
.gci::before, .gci::after { content: ""; position: absolute; top: -5px; width: 1.5px; height: 11px; background: var(--ink); }
.gci::before { left: 0; } .gci::after { right: 0; }
.gval { font-family: var(--serif); font-size: 17px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.grow.is-empty .gbar, .grow.is-empty .gci { opacity: 0; }
.grow.is-empty .gval { color: var(--faint); font-family: var(--sans); font-size: 12.5px; font-weight: 400; }
.gaxis { position: absolute; left: 96px; right: 70px; top: 0; bottom: 0; pointer-events: none; }
.gaxis .zero { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--ink); }
.gaxis .gl { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--hair); }
.gaxis .tl { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gaxis .tl.z { color: var(--ink); }
.gbars .grow { position: relative; z-index: 1; }
.gate-text { font-size: 14.5px; color: #333; margin-top: 16px; min-height: 4.6em; }

/* ---------- Figures ---------- */
figure { margin: 0 0 36px; }
figure.wide { margin: 8px 0 40px; }
figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
figcaption b { color: var(--ink); font-weight: 600; }
figure a { display: block; }
.shot img { border: 1px solid var(--rule); }
figure.narrow img { max-width: min(100%, 760px); margin: 0 auto; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 8px; }
.pair > * { min-width: 0; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
.results-table { max-width: 760px; margin: 0 0 40px; }
figure.cult img { max-width: min(100%, 540px); margin: 0; }
figure.cult figcaption { max-width: 760px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
caption { caption-side: top; text-align: left; font-size: 13.5px; color: var(--muted); padding-bottom: 10px; line-height: 1.5; }
caption b { color: var(--ink); font-weight: 600; }
th, td { padding: 6px 6px; text-align: left; white-space: nowrap; }
th { font-weight: 600; border-bottom: 1px solid var(--ink); }
td.r, th.r { text-align: right; }
tbody tr + tr td { border-top: 1px solid var(--hair); }
tr.sub td { color: var(--muted); }
tr.sub td:first-child { padding-left: 20px; font-style: italic; }
.ci { color: var(--faint); font-size: 12.5px; margin-left: 4px; }
.tnote { font-size: 12.5px; color: var(--faint); margin-top: 10px; line-height: 1.5; }

/* ---------- BibTeX ---------- */
.bib { position: relative; }
.copy {
  position: absolute; top: 10px; right: 10px;
  appearance: none; background: #fff; border: 1px solid #c9c9c9;
  padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--muted);
}
.copy:hover { color: var(--ink); border-color: var(--ink); }
pre {
  margin: 0 0 32px;
  padding: 18px 20px;
  background: #f7f7f5;
  border: 1px solid var(--rule);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
}

footer { padding-bottom: 56px; }
footer p { margin: 0; padding-top: 28px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 13.5px; }
footer a { color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; gap: 18px; }
  .demo-readout { padding-top: 6px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
  .demo-readout .big { grid-column: 1; }
  .demo-readout .big-cap { grid-column: 2; margin: 0 0 4px; }
  .demo-readout .scale { grid-column: 1 / -1; margin: 18px 0 22px; }
  .demo-readout .demo-controls { grid-column: 1 / -1; }
  .frow { grid-template-columns: 1fr; }
  .frow li, .frow li + li { padding: 16px 0 4px; border-left: 0; }
  .frow li + li { border-top: 1px solid var(--rule); }
  .frow .fk { font-size: 36px; margin-bottom: 10px; }
  .gate { grid-template-columns: 1fr; gap: 28px; }
  .pair { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .masthead, main, footer, .topnav-inner { padding: 0 16px; }
  .topnav-inner { gap: 18px; }
  .topnav-links { gap: 18px; }
  .masthead { padding-top: 34px; padding-bottom: 28px; }
  footer { padding-bottom: 40px; }
  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  .links a, .links .disabled { padding: 6px 11px; font-size: 14px; }
  .demo-stage { --gap: 10px; }
  .slot-labels { font-size: 11px; letter-spacing: 0.05em; }
  .slot-labels em { display: block; margin: 1px 0 0; }
  .cand figcaption { flex-direction: column; gap: 0; font-size: 12px; line-height: 1.4; }
  .pick-frame { left: -4px; top: -4px; width: calc((100% - 2 * var(--gap)) / 3 + 8px); }
  .big { font-size: 60px; }
  #abstract p { font-size: 17px; }
  .byline .affil { display: block; }
  .byline .affil::before { display: none; }
  .seg { padding: 6px 10px; font-size: 13px; }
  .seg .long { display: none; }
  .dotgrid { grid-template-columns: 62px repeat(30, minmax(0, 1fr)); gap: 3px 2px; }
  .dotgrid .cn { font-size: 10.5px; }
  .grow { grid-template-columns: 78px minmax(0, 1fr) 52px; gap: 8px; }
  .glab { font-size: 13px; }
  .gaxis { left: 86px; right: 60px; }
  .gval { font-size: 15.5px; }
  th, td { white-space: normal; }
  .ci { display: block; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}