/* UDAPose page. Fixed color meaning: image cues amber, pose prior teal, UDAPose and links deep blue, baselines gray. */
:root {
  color-scheme: light;
  --ink: #10161f;
  --ink-2: #434d5b;
  --ink-3: #626c79;
  --line: #e3e6eb;
  --line-2: #cdd2d9;
  --bg: #fff;
  --bg-soft: #f5f6f8;
  --blue: #2358b5;
  --blue-deep: #1b4693;
  --blue-soft: #e8eefa;
  --amber: #e08e00;
  --teal: #0fa193;
  --bar: #aeb5bf;
  --bar-strong: #7b8491;
  --lost: #d2452f;
  --stage: #0c0f13;
  --stage-2: #171b21;
  --stage-3: #252b33;
  --stage-ink: #eef1f5;
  --stage-ink-2: #aeb7c3;
  --amber-d: #ffb84d;
  --teal-d: #41d7c9;
  --blue-d: #8fbcff;
  --measure: 68ch;
  --content: 860px;
  --wide: 1120px;
  --gutter: 24px;
  --radius: 10px;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.stage :focus-visible, .on-dark :focus-visible { outline-color: var(--blue-d); }
/* What you read is serif. What you scan or operate is sans. */
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; }
h3, h4 { font-family: var(--sans); font-weight: 600; line-height: 1.25; margin: 0; }
.lede, .measure, .abstract, .tldr, .route p, .st-text p, .qa p, .qa li, .dhf-steps li { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.6; max-width: var(--measure); }
.route p, .qa p, .qa li { font-size: 16.5px; }
.st-text p { font-size: 17px; }
.dhf-steps li { font-size: 16px; }
.dhf-steps li b { font-family: var(--sans); font-size: 15px; }
.route p.num, .qa p.caption, .caption, figcaption, .readout { font-family: var(--sans); }
h2 { font-size: clamp(27px, 3.2vw, 34px); }
h3 { font-size: clamp(20px, 2.2vw, 23px); }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
sub, sup { font-size: .85em; line-height: 0; }
.m { font-family: var(--serif); font-style: italic; white-space: nowrap; }
.m sub { font-style: normal; }
.nobr { white-space: nowrap; }

/* Page frame */
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.measure { max-width: var(--measure); }
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }
section > .wrap > h2 { margin-bottom: 18px; }
h3 { margin: 56px 0 14px; }
.lede { color: var(--ink-2); }
.eyebrow { font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: .02em; margin: 0 0 8px; }
figure { margin: 28px 0 0; }
figcaption, .caption { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; max-width: var(--content); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 54px; gap: 16px; }
.brand { font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-links { display: flex; gap: clamp(12px, 3vw, 28px); font-size: 14.5px; }
.nav-links a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--blue); }
.nav-links a[aria-current="true"] { color: var(--blue); border-bottom-color: var(--blue); }

/* Hero */
.hero { padding: 26px 0 64px; text-align: center; }
.venue { display: inline-block; font-size: 13px; font-weight: 500; color: var(--blue); background: var(--blue-soft); padding: 3px 10px; border-radius: 999px; margin: 0 0 10px; }
h1 { font-size: clamp(30px, 4.1vw, 46px); max-width: 900px; margin: 0 auto; }
.authors { margin: 18px 0 2px; font-size: 17px; }
.authors span { white-space: nowrap; margin: 0 8px; }
.affils { font-size: 14px; color: var(--ink-3); margin: 0 0 18px; }
.affils span { white-space: nowrap; margin: 0 8px; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.btn { display: inline-block; padding: 7px 15px; border-radius: 7px; background: var(--blue); color: #fff; font-size: 14.5px; font-weight: 500; text-decoration: none; border: 1px solid var(--blue); transition: background .15s; }
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn.ghost { background: #fff; color: var(--blue); }
.btn.ghost:hover { background: var(--blue-soft); color: var(--blue-deep); }

/* 104vh * 1.5 keeps each 3 / 2 panel under 52vh. */
.hero-fig { margin: 0 auto; width: min(100%, calc(104vh * 1.5 + 12px)); min-width: min(100%, 560px); text-align: left; }
.stage { position: relative; background: var(--stage); color: var(--stage-ink); border-radius: var(--radius); overflow: hidden; }
.hero-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hero-stage { aspect-ratio: 3 / 2; background: #000; }
.h-fade { position: absolute; inset: 0; }
.hero-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.h-expo { position: absolute; inset: 0; isolation: isolate; background: #000; }
.hero-stage .h-sat { mix-blend-mode: lighten; }
html.js .h-disp { filter: brightness(.012); }
.hero-stage .h-wl { opacity: 0; }
.hero-stage svg.skel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .25s; }
/* Fixed height: a slide change must not move the page. */
.hero-line { min-height: calc(1.4em + 6px); padding-bottom: 6px; color: var(--ink); font-size: 15px; line-height: 1.4; font-weight: 500; }
.hero-line small { margin-left: .2em; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.hero-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.hero-bar output { min-width: 7em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.hero-ticks { position: relative; height: 18px; font-size: 12.5px; color: var(--ink-3); grid-column: 2; }
.hero-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.hero-ticks span:first-child { transform: none; }
.hero-ticks span:last-child:not(:first-child) { transform: translateX(-100%); }
.hero-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 12px; }
/* The active chip is heavier. Reserve that width so the row cannot rewrap when the active chip changes. */
.chiprow .chip::after { content: attr(data-value); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 500; }
.panel-label { margin-top: 6px; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-2); }
/* A round play/pause button before a row of chips (hero, samples). It lines up with the first row of chips; when the chips wrap, later rows run under them, not under the button. */
.chiprow { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.chiprow .chips { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.play-btn { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--blue); display: grid; place-items: center; }
.play-btn:hover { background: var(--blue-soft); }
.play-btn:focus-visible { border-radius: 50%; }
.play-btn[hidden] { display: none; }
.play-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Range input */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #11151b, #7b8491 70%, #dfe3e8); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #11151b, #7b8491 70%, #dfe3e8); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
input.plain[type=range]::-webkit-slider-runnable-track { background: var(--line-2); }
input.plain[type=range]::-moz-range-track { background: var(--line-2); }

/* Chips, segmented controls */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-group { font-size: 13px; color: var(--ink-3); margin: 0 2px 0 8px; }
.chip-group:first-child { margin-left: 0; }
.key-limb, .key-gt { display: inline-block; width: 20px; height: 3px; vertical-align: middle; border-radius: 2px; }
.key-limb { background: linear-gradient(90deg, #5a96f0, #f0a050 50%, #40e6f5); }
.key-gt { height: 0; border-top: 2px dashed var(--ink-3); border-radius: 0; }
.chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; min-height: 32px; transition: background .12s, color .12s, border-color .12s; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip[aria-pressed=true] { background: var(--blue); border-color: var(--blue); color: #fff; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; padding: 2px; background: var(--bg-soft); }
.seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 6px; font-size: 13.5px; color: var(--ink-2); min-height: 30px; }
.chip[aria-pressed=true] { font-weight: 500; }
.seg button[aria-pressed=true] { background: #fff; color: var(--blue); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.check { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.check input { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; }
.ctrl-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 14px 0; }
.ctrl-row .left { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ctrl-label { font-size: 13px; color: var(--ink-3); }

/* Stat tiles */
.tldr { max-width: 68ch; margin: 44px auto 22px; font-size: 19px; line-height: 1.55; text-align: center; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: var(--wide); margin: 44px auto 0; text-align: left; border-top: 1px solid var(--line); }
.tile { padding: 16px 18px 4px; border-left: 1px solid var(--line); }
.tile:first-child { border-left: 0; }
.tile b { display: block; font-family: var(--serif); font-size: clamp(25px, 3vw, 33px); font-weight: 500; line-height: 1.15; color: var(--blue); white-space: nowrap; }
.tile span { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-top: 6px; }

/* Abstract */
.abstract { color: var(--ink-2); }

/* Tabs */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 18px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 8px 0; font-size: 15px; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected=true] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 500; }
.tabs button:hover { color: var(--blue); }

/* Sample gallery. All pages share one frame shape (the tallest page's, set from the data as --frame-ar) so a page change never moves the page below. */
.grid-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#rand-grid { transition: opacity .15s; }
/* Hold the grid's place until the script fills it (two rows of four, four rows of two on narrow screens), so the page below does not jump. */
html.js #rand-grid:empty { aspect-ratio: 2.6; }
.sample { position: relative; padding: 0; border: 0; background: var(--stage); border-radius: 7px; overflow: hidden; display: block; width: 100%; text-align: left; color: var(--stage-ink); }
.sample .frame { position: relative; aspect-ratio: var(--frame-ar, auto); }
.sample img { width: 100%; height: 100%; object-fit: contain; }
.sample svg.skel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sample .meta { display: block; padding: 5px 8px 6px; font-size: 12.5px; line-height: 1.35; color: var(--stage-ink-2); font-variant-numeric: tabular-nums; }
.sample:hover .meta { color: #fff; }
/* Comparison: a header row of method names, then 4 rows of 5 panels. All pages share one frame shape (--frame-ar, set from the data). */
.cmp-grid { display: grid; gap: 6px; transition: opacity .15s; }
.cmp-head, .cmp-row, .cmp-static { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cmp-name { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 0 2px; overflow-wrap: anywhere; }
.cmp-name.ours { color: var(--blue); font-weight: 600; }
/* Each panel is a button that opens the lightbox: reset the button's own box and type so it looks as a plain panel. */
.cmp-panel { min-width: 0; background: var(--stage); border-radius: 6px; overflow: hidden; color: var(--stage-ink); display: block; width: 100%; padding: 0; border: 0; margin: 0; font: inherit; text-align: start; }
.cmp-panel .frame { position: relative; display: block; aspect-ratio: var(--frame-ar, 1.5); }
.cmp-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cmp-panel svg.skel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cmp-panel .meta { display: block; padding: 4px 7px 5px; font-size: 12.5px; line-height: 1.35; color: var(--stage-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-panel .cmp-m { display: none; }
.cmp-static { gap: 4px; }
.cmp-static .cmp-name { font-size: 12.5px; }
.legend { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); align-items: center; }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.legend i.swatch { width: 12px; height: 12px; border-radius: 3px; }
dialog.lightbox { border: 0; padding: 0; background: var(--stage); color: var(--stage-ink); border-radius: var(--radius); width: min(94vw, 1100px); max-height: 94vh; overflow: auto; }
dialog.lightbox::backdrop { background: rgba(5, 7, 10, .82); }
.lb-frame { position: relative; }
.lb-frame img { width: 100%; height: auto; }
.lb-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 14px; }
.lb-bar .check { color: var(--stage-ink); }
.lb-btn { background: var(--stage-3); color: var(--stage-ink); border: 0; border-radius: 6px; padding: 5px 12px; font-size: 14px; }

/* Bar charts: thin marks, data-end rounded, square at the baseline, text in ink tokens */
.bars { display: grid; gap: 6px; }
.bar-group { font-size: 13px; font-weight: 500; color: var(--ink-3); margin: 10px 0 2px; }
.bar-group:first-child { margin-top: 0; }
.bar-row { display: grid; grid-template-columns: minmax(84px, var(--label-w, 124px)) 1fr; gap: 10px; align-items: center; border-radius: 4px; }
.bar-row .label { font-size: 14px; color: var(--ink-2); text-align: right; line-height: 1.2; }
.bar-row .track { position: relative; display: flex; align-items: center; min-width: 0; border-left: 1px solid var(--line-2); }
.bar-row .fill { display: block; height: 18px; width: var(--w, 0); max-width: calc(100% - 72px); background: var(--bar); border-radius: 0 4px 4px 0; transition: width .55s var(--ease), background .2s; min-width: 1px; }
.bar-row .value { padding-left: 7px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bar-row .value small { font-size: 12.5px; color: var(--ink-3); margin-left: 4px; }
.bar-row.best .fill { background: var(--bar-strong); }
.bar-row.ours .fill { background: var(--blue); }
.bar-row.ours .label, .bar-row.ours .value { font-weight: 600; color: var(--ink); }
.bar-row.dim { opacity: .45; }
.bar-row.is-off .fill { width: 0; }
.bar-row:hover .label { color: var(--ink); }
.readout { font-size: 15px; color: var(--ink); margin: 14px 0 0; min-height: 1.6em; }
.readout b { font-weight: 500; }
.readout small { color: var(--ink-3); font-size: 13px; }
/* Hover text can be longer than the resting text. Reserve the height: a readout that grows would move the bars under the pointer and retrigger hover. */
#ex-readout { min-height: 3.1em; }
.chart { max-width: var(--content); }

/* Route columns */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-top: 18px; }
.route h4 { font-size: 16.5px; margin-bottom: 8px; }
.route p { font-size: 15.5px; color: var(--ink-2); }
.route-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.route-imgs figure { margin: 0; position: relative; }
.route-imgs img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 6px; background: var(--stage); }
.route-imgs figcaption { font-size: 12.5px; margin-top: 3px; }
.route .num { font-size: 15px; color: var(--ink); }

/* Lens */
.lens-group { position: relative; outline-offset: 4px; border-radius: var(--radius); }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lens-panel { position: relative; }
.lens-frame { position: relative; overflow: hidden; border-radius: 6px; background: var(--stage); touch-action: pan-y; cursor: crosshair; }
.lens-frame img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: fill; }
.lens { position: absolute; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .5); background-repeat: no-repeat; image-rendering: pixelated; pointer-events: auto; touch-action: none; cursor: grab; }
.lens-label { font-size: 13.5px; font-weight: 500; margin-top: 6px; color: var(--ink); }
.lens-label small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Stat row beside the strip */
.statrow { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: baseline; margin-top: 14px; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.statrow b { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--blue); }
.statrow span { margin-left: 6px; font-size: 13.5px; color: var(--ink-3); }
.statrow p { margin: 0; font-size: 13.5px; color: var(--ink-3); flex: 1 1 280px; }
details.more { margin-top: 6px; border-top: 0; padding-top: 0; font-size: 13.5px; }
details.more summary { font-size: 13.5px; }

/* Fig. 5 grid */
.m-only { display: none; }
.fig5-row-wrap { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.fig5-label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.fig5-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.fig5-cell { margin: 0; }
.fig5-cell img { width: 100%; height: auto; border-radius: 4px; background: var(--stage); }
.fig5-cell figcaption { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.fig7b { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: center; }
.fig7b figcaption { margin: 0; }
.fig7b img { width: 100%; height: auto; }

/* Stepper */
.stepper { max-width: var(--wide); margin: 26px auto 0; scroll-margin-top: 66px; }
.st-head { display: grid; grid-template-columns: 42px 1fr 42px; gap: 14px; align-items: start; }
.st-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--blue); display: grid; place-items: center; margin-top: 4px; }
.st-arrow:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.st-arrow:disabled { opacity: .35; cursor: default; }
.st-arrow svg, .st-play svg { width: 16px; height: 16px; fill: currentColor; }
.st-texts { display: grid; min-width: 0; }
.st-text { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .3s; }
.st-text.active { opacity: 1; visibility: visible; }
.st-text h4 { font-size: 19px; display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.st-num { flex: none; display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 500; transform: translateY(-2px); }
.st-text p { margin: 0 0 6px; font-size: 16px; color: var(--ink-2); max-width: 880px; }
.st-text .src { font-size: 13.5px; color: var(--ink-3); }
.st-stage { display: grid; margin-top: 16px; }
.scene { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .35s; }
.scene.active { opacity: 1; visibility: visible; }
.st-foot { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; margin-top: 14px; }
.st-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--blue); display: grid; place-items: center; }
.st-play:hover { border-color: var(--blue); background: var(--blue-soft); }
.st-bar { display: flex; gap: 4px; min-width: 0; }
.st-part { flex: var(--n) 1 0; min-width: 0; }
.st-part-label { font-size: 12.5px; color: var(--ink-3); margin-bottom: 3px; white-space: nowrap; }
.st-part-segs { display: flex; gap: 4px; }
.st-seg { flex: 1; min-width: 0; height: 22px; padding: 8px 0; background: none; border: 0; }
.st-seg i { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.st-seg i::after { content: ""; display: block; height: 100%; width: var(--fill, 0%); background: var(--blue); border-radius: 3px; }
.st-seg:hover i { background: var(--line-2); }
.st-count { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Pipeline diagram: nodes sit at coordinates in a 1120 x H box on wide screens, and stack on phones */
.pipe { position: relative; aspect-ratio: 1120 / var(--pipe-h, 500); background: var(--stage); color: var(--stage-ink); border-radius: var(--radius); overflow: hidden; font-size: 13px; line-height: 1.35; }
.pipe .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wires path { fill: none; stroke: #6b7583; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: opacity .35s, stroke .25s; }
.wires path.hf { stroke: var(--blue-d); }
.wires .future { opacity: .16; }
.node.future { opacity: .16; pointer-events: none; }
.node.future img, .node.future svg.skel, .node.future .lens { visibility: hidden; }
.node.future.noghost { opacity: 0; }
.node { position: absolute; left: calc(var(--x) / 1120 * 100%); top: calc(var(--y) / var(--pipe-h, 500) * 100%); width: calc(var(--w) / 1120 * 100%); transition: opacity .35s, transform .35s; }
.node.past { opacity: .62; }
.node.gone { opacity: 0; pointer-events: none; }
.node-t { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--stage-ink-2); }
.node-t b { color: var(--stage-ink); font-weight: 500; }
.node.focus .node-t b { color: #fff; }
.tile-img { position: relative; border-radius: 6px; overflow: hidden; background: #000; outline: 1px solid var(--stage-3); }
.node.focus .tile-img, .node.focus .box { outline: 2px solid var(--blue-d); outline-offset: 1px; }
.tile-img img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.tile-img svg.skel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tile-img .inset { position: absolute; right: 5px; bottom: 5px; width: 40%; border-radius: 4px; outline: 1px solid rgba(255, 255, 255, .5); }
.tile-note { display: block; font-size: 12px; color: var(--stage-ink-2); margin-top: 3px; }
.box { background: var(--stage-2); border-radius: 7px; outline: 1px solid var(--stage-3); padding: 9px 11px; }
.box b { font-weight: 500; color: #fff; display: block; }
.box small { display: block; font-size: 12px; color: var(--stage-ink-2); }
.blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 7px; }
.blocks > span { display: flex; align-items: center; justify-content: center; height: 30px; font-size: 12px; border-radius: 4px; background: var(--stage-3); color: var(--stage-ink); }
.blocks > span.hf { background: rgba(143, 188, 255, .18); color: var(--blue-d); }
.blocks > span.empty { background: none; }
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.triple figure { margin: 0; }
.triple figcaption { color: var(--stage-ink-2); font-size: 12px; margin-top: 3px; line-height: 1.3; }
.wire-label { font-size: 12px; color: var(--stage-ink-2); white-space: nowrap; }
.scene-grid { background: var(--stage); color: var(--stage-ink); border-radius: var(--radius); padding: 18px; height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr); gap: 18px; align-items: center; font-size: 13px; }
.scene-grid figure { margin: 0; }
.scene-grid figcaption { color: var(--stage-ink-2); font-size: 12.5px; margin-top: 4px; }
.style-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--stage-ink-2); align-self: center; }
.style-note b { color: var(--stage-ink); font-weight: 500; }
.node-tall { height: calc(var(--h) / var(--pipe-h, 500) * 100%); }
.node-tall .box { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.deck { position: relative; aspect-ratio: 8 / 5; }
.deck img { position: absolute; width: 86%; border-radius: 5px; outline: 1px solid rgba(255, 255, 255, .28); }
.deck img:nth-child(1) { left: 0; top: 0; }
.deck img:nth-child(2) { left: 7%; top: 9%; }
.deck img:nth-child(3) { left: 14%; top: 18%; }
.layer { display: grid; gap: 6px; }
.mini-flow { display: flex; gap: 6px; align-items: stretch; }
.mini-flow > * { flex: 1; }
.tok { display: block; border-radius: 5px; padding: 5px 7px; font-size: 12px; text-align: center; }
.tok.pose { background: rgba(65, 215, 201, .16); color: var(--teal-d); }
.tok.image { background: rgba(255, 184, 77, .16); color: var(--amber-d); }
.tok.dca { background: var(--blue-d); color: #0c1a33; font-weight: 500; }
.tok.plain { background: var(--stage-3); color: var(--stage-ink); }
.row-label { font-size: 12px; letter-spacing: .03em; color: var(--stage-ink-2); text-transform: uppercase; }

/* Histogram */
.dhf-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 16px; }
.hist svg { width: 100%; height: auto; font-family: var(--sans); }
.hist text { font-size: 12.5px; fill: var(--ink-3); }
.hist .tick { stroke: var(--line); }
.big-num { font-family: var(--serif); font-size: clamp(34px, 5vw, 46px); font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.big-num + span { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.dhf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.dhf-steps li { font-size: 15px; color: var(--ink-2); counter-increment: s; }
.dhf-steps li b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.dhf-steps li b::before { content: counter(s) ". "; color: var(--blue); }
.eq { font-size: 17px; text-align: center; margin: 22px 0; color: var(--ink); overflow-x: auto; }
.eq .no { color: var(--ink-3); font-size: 14px; margin-left: 10px; font-style: normal; }
.frame-stage { border-radius: 8px; overflow: hidden; background: var(--stage); position: relative; aspect-ratio: 648 / 408; }
.frame-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }

/* LCIM */
.lcim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; margin-top: 12px; }
.lcim-diagram svg { width: 100%; height: auto; font-family: var(--sans); }
.lcim-diagram text { font-size: 15px; fill: var(--ink-2); }
.lcim-diagram .blk { fill: var(--bg-soft); stroke: var(--line-2); }
.lcim-diagram .inj { transition: opacity .25s; }
.lcim-diagram .inj.off { opacity: .14; }

/* DCA */
.twoup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.twoup figure { margin: 0; }
.twoup img { width: 100%; border-radius: 6px; background: var(--stage); }
.ratio-viz { display: grid; gap: 14px; margin: 18px 0; max-width: 640px; }
.ratio-row { display: grid; grid-template-columns: 158px 1fr; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.ratio-bars { display: grid; gap: 3px; }
.ratio-line { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ratio-line i { display: block; height: 14px; border-radius: 0 3px 3px 0; }
.ratio-line i.pose { background: var(--teal); }
.ratio-line i.image { background: var(--amber); }
.dca-key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin: 0 5px 0 0; vertical-align: -1px; }
.dca-key.pose { background: var(--teal); }
.dca-key.image { background: var(--amber); }
.heat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 14px; }
.heat-case h4 { font-size: 15.5px; margin-bottom: 8px; }
.heat-case-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.heat-img { position: relative; aspect-ratio: 720 / 1161; border-radius: 6px; overflow: hidden; background: var(--stage); }
.heat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.heat-svg svg { width: 100%; height: auto; font-family: var(--sans); }
.heat-svg .limb { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.heat-svg circle.j { stroke: #fff; stroke-width: 2; transition: fill .35s; cursor: pointer; }
.heat-svg circle.j.sel { stroke: var(--ink); }
.heat-svg circle.hit { fill: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.heat-svg circle.hit:focus:not(:focus-visible) { outline: none; }
.heat-svg, .heat-svg svg { -webkit-tap-highlight-color: transparent; }
.heat-svg text { font-size: 15px; fill: var(--ink-3); }
.heat-read { font-size: 14px; color: var(--ink); margin: 6px 0 0; font-variant-numeric: tabular-nums; min-height: 2.8em; }
.heat-read small { display: block; font-size: 12.5px; color: var(--ink-3); }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-top: 16px; font-variant-numeric: tabular-nums; }
.heat-legend { flex-wrap: wrap; }
.heat-legend-t { margin-right: 4px; }
.heat-legend i { display: block; width: min(180px, 34vw); height: 10px; border-radius: 3px; background: linear-gradient(90deg, #fdf0d5, #f0b048 50%, #94510a); }
.dca-svg-h, .dca-svg-v { width: 100%; height: auto; font-family: var(--sans); }
.dca-svg-v { display: none; max-width: 340px; margin: 0 auto; }
.dca-figure { background: var(--stage); border-radius: var(--radius); padding: 18px; }
.dca-figure text { font-size: 14px; fill: var(--stage-ink); }
.dca-figure .note { font-size: 14px; fill: var(--stage-ink-2); }
.dca-figure .b { fill: var(--stage-2); stroke: var(--stage-3); }
.dca-figure .wire { stroke: #6b7583; stroke-width: 1.5; fill: none; }
.dca-figure .teal { stroke: var(--teal-d); }
.dca-figure .amber { stroke: var(--amber-d); }

/* Results */
.dark-lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 14px; }
.lead-col h4 { font-size: 15px; margin-bottom: 8px; font-weight: 600; }
.lead-num { font-size: 14px; color: var(--ink-2); margin-top: 8px; font-variant-numeric: tabular-nums; }
.lead-num b { font-family: var(--serif); font-size: 24px; color: var(--ink); font-weight: 500; margin-right: 3px; }
details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
summary { cursor: pointer; font-size: 14.5px; color: var(--blue); font-weight: 500; padding: 5px 0; }
.table-scroll { overflow-x: auto; margin-top: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink); padding-bottom: 6px; }
th, td { padding: 3px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child { text-align: left; font-weight: 400; }
thead th { font-weight: 500; color: var(--ink-2); }
tr.ours th, tr.ours td { font-weight: 600; }
td.top { color: var(--blue-deep); font-weight: 500; }

/* Questions */
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; margin-top: 8px; }
.qa { min-width: 0; }
.qa h3 { margin: 0 0 8px; font-size: 18px; }
.qa p, .qa li { font-size: 15.5px; color: var(--ink-2); }
.qa ul { margin: 0; padding-left: 18px; }
.qa .bars { margin: 8px 0 6px; }
.qa .caption { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

/* Citation */
.bibtex { position: relative; background: var(--bg-soft); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.copy { position: absolute; top: 8px; right: 8px; font-size: 13px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; color: var(--blue); }

/* Without JavaScript: everything shows, nothing interactive */
.noscript-note { background: var(--blue-soft); color: var(--ink); font-size: 14px; padding: 8px 14px; text-align: center; }
html:not(.js) .js-only { display: none !important; }
html:not(.js) .node.noghost, html:not(.js) .node.wire-label { display: none; }
html:not(.js) .st-text, html:not(.js) .scene { opacity: 1; visibility: visible; grid-area: auto; }
html:not(.js) .st-head { grid-template-columns: 1fr; }
html:not(.js) .st-text { margin-bottom: 14px; }
html:not(.js) .st-stage { gap: 20px; }
html.js .no-js-only { display: none; }
.bar-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Stacked pipeline: under 900 px the nodes are a plain column, and only the current step's nodes show */
@media (max-width: 899px) {
  .pipe { aspect-ratio: auto; display: flex; flex-direction: column; gap: 16px; padding: 14px; font-size: 14px; overflow: visible; }
  .pipe .wires, .pipe .wire-label { display: none; }
  .node, .node-tall { position: static; width: 100%; height: auto; }
  .node.past, .node.future, .node.gone { opacity: 1; }
  html.js .pipe .node:not(.show-m) { display: none; }
  .node-t { font-size: 14px; }
  .box small, .tile-note, .triple figcaption, .scene-grid figcaption { font-size: 13.5px; }
  .blocks > span { font-size: 13.5px; }
  .tok { font-size: 13.5px; }
  .scene { display: none; }
  .scene.active { display: block; }
  html:not(.js) .scene { display: block; }
  .scene-grid { grid-template-columns: 1fr; padding: 14px; font-size: 14px; }
  .st-text { display: none; }
  .st-text.active { display: block; }
  html:not(.js) .st-text { display: block; }
  .st-head { grid-template-columns: 1fr; position: relative; }
  .st-head .st-arrow { display: none; }
  .st-foot { grid-template-columns: 38px 1fr auto; }
  .stepper-m-nav { display: flex !important; }
  .routes, .dhf-grid, .lcim-grid, .heat-grid, .qa-grid { grid-template-columns: 1fr; }
  .dhf-steps { grid-template-columns: 1fr; gap: 10px; }
  .dark-lead { grid-template-columns: 1fr; gap: 20px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.js #rand-grid:empty { aspect-ratio: 0.62; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .tile:nth-child(odd) { border-left: 0; }
  .tile:nth-child(-n+2) { border-top: 0; }
  .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; }
  .st-seg { height: 36px; padding: 15px 0; }
  .st-stage { background: var(--stage); border-radius: var(--radius); }
  /* Comparison on narrow screens: each row scrolls sideways, and each panel names its method because the header row is gone. */
  .cmp-head { display: none; }
  .cmp-grid { gap: 10px; }
  .cmp-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding-bottom: 4px; }
  .cmp-panel { flex: 0 0 min(70vw, 340px); scroll-snap-align: start; }
  .cmp-panel .cmp-m { display: inline; }
  .cmp-panel.ours .cmp-m { color: var(--blue-d); }
  .fig5-row-wrap { display: block; margin-bottom: 14px; }
  .fig5-label { margin-bottom: 4px; }
  .fig5-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding-bottom: 4px; }
  /* Two panels on screen: the input next to UDAPose. The baselines follow, one swipe away. */
  .fig5-cell { flex: 0 0 47%; scroll-snap-align: start; order: 2; }
  .fig5-cell[data-col=input] { order: 0; }
  .fig5-cell[data-col=udapose] { order: 1; }
  .fig5-cell figcaption { font-size: 13.5px; }
  .m-only { display: inline; }
  .st-stage { display: flex; flex-direction: column; justify-content: center; }
  .fig7b { grid-template-columns: 1fr; }
  .dca-svg-h { display: none; }
  .dca-svg-v { display: block; }
  section { padding: 54px 0; }
}
.stepper-m-nav { display: none; gap: 8px; margin-bottom: 10px; align-items: center; }
.stepper-m-nav .st-arrow { display: grid !important; margin: 0; }
@media (max-width: 700px) {
  .hero-line { min-height: calc(2.8em + 6px); }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .hero-panels { grid-template-columns: minmax(0, 1fr); }
  .tldr { font-size: 17.5px; }
  .lede, .measure, .abstract { font-size: 17px; }
  .st-text p { font-size: 16.5px; }
  .authors { font-size: 15.5px; }
  .authors span, .affils span { margin: 0 5px; }
  .affils span { display: block; white-space: normal; }
  .hero-ticks span.mid { display: none; }
  .hero-bar { grid-template-columns: 1fr auto; }
  .hero-bar label { grid-column: 1; }
  .hero-bar input { grid-column: 1 / -1; grid-row: 2; }
  .hero-bar output { grid-column: 2; grid-row: 1; }
  .hero-ticks { grid-column: 1 / -1; }
  .bar-row { grid-template-columns: minmax(70px, var(--label-w-m, 88px)) 1fr; gap: 7px; }
  .bar-row .label { font-size: 13.5px; }
  .heat-case-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ratio-row { grid-template-columns: 1fr; gap: 4px; }
  .nav-links { font-size: 14px; gap: 12px; }
  .brand { font-size: 15px; }
}
@media (max-width: 340px) {
  .hero-line { min-height: calc(4.2em + 6px); }
}
@media print { .nav { position: static; } }