/* ===========================================================================
   House style: a structural replica of an openai.com research post
   (openai.com/index/navier-stokes-solution/, tokens read off its shipped
   CSS on 9 Sep 2026). One ink at a few alphas, a 12-column grid with a
   6-column reading rail, one fluid type scale. No accent colour.
   =========================================================================== */
:root{
  --paper:#fff;
  --ink:#080808;
  --ink-60:color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-44:color-mix(in srgb, var(--ink) 44%, transparent);
  --ink-12:color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-4: color-mix(in srgb, var(--ink) 4%, transparent);
  --on-ink:#fff;

  /* type scale, verbatim */
  --t-h1:clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
  --t-h3:clamp(1.5rem, calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem);
  --t-h4:clamp(1.25rem, calc(1.25rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.375rem);
  --t-h5:clamp(1rem, calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
  --l-h5:clamp(1.25rem, calc(1.25rem + .235 * ((100vw - 23.4375rem) / 66.5625)), 1.485rem);
  --t-p1:1.0625rem; --l-p1:1.75rem;
  --t-p2:.875rem;   --l-p2:1.435rem;
  --t-cta:.875rem;
  --t-nav:clamp(.875rem, calc(.875rem + .125 * ((90rem - 100vw) / 66.5625)), 1rem);

  --container:90rem;
  --pad:24px;
  --gap:8px;
  --header-h:3.375rem;
  --r-md:.5rem; --r-xl:.75rem; --r-pill:2.5rem;
  --ease:cubic-bezier(.25,.1,.25,1);
  --dur:250ms;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Consolas,"Liberation Mono",ui-monospace,monospace;
  --t-code:clamp(.8125rem, calc(.8125rem + .0625 * ((100vw - 23.4375rem) / 66.5625)), .875rem);
  --l-code:clamp(1.3325rem, calc(1.3325rem + .1025 * ((100vw - 23.4375rem) / 66.5625)), 1.435rem);

  /* syntax palette, verbatim from their --color-syntax-* tokens */
  --syn-keyword:#1e60e4; --syn-string:#027f41; --syn-data:#1d7899; --syn-function:#7a4ff5;
  --syn-variable:#8a6e07; --syn-operator:#c93b00; --syn-const:#d6008d; --syn-error:#e80d2f;
  --syn-comment:var(--ink-44);
  color-scheme:light;
}
@media (min-width:768px){ :root{ --gap:16px; --pad:32px; --header-h:4rem } }
@media (min-width:1024px){ :root{ --gap:24px } }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#000; --ink:#fff; --on-ink:#000;
    --ink-4:color-mix(in srgb, var(--ink) 12%, transparent);
    --ink-12:color-mix(in srgb, var(--ink) 20%, transparent);
    --syn-keyword:#4080ff; --syn-string:#03a354; --syn-data:#2392ba; --syn-function:#916bff;
    --syn-variable:#ac8601; --syn-operator:#ed4b00; --syn-const:#ff00a8; --syn-error:#f22f4d;
    color-scheme:dark
  }
}
:root[data-theme="dark"]{
    --paper:#000; --ink:#fff; --on-ink:#000;
    --ink-4:color-mix(in srgb, var(--ink) 12%, transparent);
    --ink-12:color-mix(in srgb, var(--ink) 20%, transparent);
    --syn-keyword:#4080ff; --syn-string:#03a354; --syn-data:#2392ba; --syn-function:#916bff;
    --syn-variable:#ac8601; --syn-operator:#ed4b00; --syn-const:#ff00a8; --syn-error:#f22f4d;
    color-scheme:dark
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--t-p1);line-height:var(--l-p1);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ol,ul{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink-44);outline-offset:2px;border-radius:4px}

/* --- grid: 12 columns, article rail is 6 of them starting at 4 ----------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.rail{grid-column:1 / -1}
.lockup{grid-column:1 / -1}
@media (min-width:768px){ .rail{grid-column:4 / 10} .lockup{grid-column:2 / 12} }
@media (min-width:1024px){ .lockup{grid-column:3 / 11} }

/* --- header ------------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 78%, transparent);backdrop-filter:blur(20px) saturate(160%)}
.masthead .bar{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;text-decoration:none}
.logo svg{display:block}
.masthead nav{display:none;gap:1.5rem;margin-inline-start:1.5rem}
@media (min-width:1024px){ .masthead nav{display:flex} }
.navlink{font-size:var(--t-nav);font-weight:500;letter-spacing:0;text-decoration:none;color:var(--ink);transition:color var(--dur) var(--ease)}
.navlink:hover{color:var(--ink-60)}
.masthead .end{margin-inline-start:auto;display:flex;align-items:center;gap:1rem}

/* --- buttons / links ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3em;height:2.5rem;min-height:2rem;
  padding-inline:1.25rem;border:0;border-radius:var(--r-pill);background:var(--ink-4);color:var(--ink);
  font-family:inherit;font-size:var(--t-cta);font-weight:500;line-height:.875rem;letter-spacing:0;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{background:var(--ink-12)}
.btn-solid{background:var(--ink);color:var(--on-ink)}
.btn-solid:hover{background:var(--ink-60)}
.btn-plain{background:transparent;padding-inline:0}
.btn-plain:hover{background:transparent;color:var(--ink-60)}
.btn-round{width:2rem;height:2rem;padding:0;border-radius:50%;background:var(--ink-4);flex:0 0 auto}
.btn-round:hover{background:var(--ink-12)}
.btn svg{transition:transform var(--dur) var(--ease)}
.btn-plain:hover svg{transform:translateX(2px)}
.a-body{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25rem;transition:color var(--dur) var(--ease)}
.a-body:hover{color:var(--ink-60)}
.a-quiet{color:var(--ink-60);text-decoration:none;transition:color var(--dur) var(--ease)}
.a-quiet:hover{color:var(--ink)}
sup.cite{font-size:.625rem;line-height:0;vertical-align:super}
sup.cite a{text-decoration:none;padding-inline:.15em}
sup.cite a:hover{color:var(--ink-60)}

/* --- article ------------------------------------------------------------ */
article{display:flex;flex-direction:column;gap:3rem;margin-top:2.5rem}
@media (min-width:768px){ article{gap:4rem} }
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2rem;
  font-size:var(--t-p2);line-height:1.225rem;letter-spacing:0;font-weight:500}
h1.title{font-size:var(--t-h1);line-height:1.2;letter-spacing:-.03em;font-weight:500;max-width:62.5rem;text-wrap:balance}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem;margin-top:2rem;min-height:1.5rem}

/* the rule + utility bar under the lockup */
.utility{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--ink-4);padding-top:.75rem}
.utility .listen{display:flex;align-items:center;gap:.625rem;font-size:var(--t-p2);color:var(--ink-60)}

/* table of contents button */
.toc{border-top:1px solid var(--ink-4);margin-top:.75rem}
.toc summary{display:flex;align-items:center;gap:.4rem;height:2.75rem;cursor:pointer;list-style:none;
  font-size:.75rem;line-height:1;color:var(--ink-60);transition:color var(--dur) var(--ease)}
.toc summary::-webkit-details-marker{display:none}
.toc summary:hover{color:var(--ink)}
.toc summary svg{transition:transform var(--dur) var(--ease)}
.toc[open] summary svg{transform:rotate(180deg)}
.toc ul{display:flex;flex-direction:column;list-style:none;padding:0 0 .75rem}
.toc a{display:block;padding:.375rem 0;font-size:.75rem;line-height:1.25;color:var(--ink-60);text-decoration:none;transition:color var(--dur) var(--ease)}
.toc a:hover{color:var(--ink)}

/* body copy: 24px between paragraphs, 64px before a section heading */
.body > * + *{margin-top:1.5rem}
.body h2{font-size:var(--t-h3);line-height:1.32;letter-spacing:-.01em;font-weight:500;margin-top:4rem;text-wrap:pretty}
.body h2 + *{margin-top:1.5rem}
.body ul{padding-left:1.125rem;display:flex;flex-direction:column;gap:.75rem}
.body li::marker{color:var(--ink-44)}
.body figure{margin-top:4rem;margin-bottom:4rem;display:flex;flex-direction:column;gap:1.5rem}
.body figure .frame{overflow:hidden;border-radius:var(--r-md);background:var(--ink-4)}
.body figcaption{font-size:var(--t-p2);line-height:var(--l-p2);letter-spacing:0;color:var(--ink-60);text-wrap:pretty}
.body figure img,.body figure video{width:100%;height:auto}
/* light/dark art pairs: CSS, not <picture media>, so the theme toggle wins too */
.art-dark{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .art-light{display:none} :root:not([data-theme="light"]) .art-dark{display:block} }
:root[data-theme="dark"] .art-light{display:none}
:root[data-theme="dark"] .art-dark{display:block}
/* a grayscale clip needs no second encode: invert it for the dark theme */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .invert-dark{filter:invert(1)} }
:root[data-theme="dark"] .invert-dark{filter:invert(1)}

/* --- math: KaTeX in MathML mode, so no stylesheet or webfont is needed --- */
math{font-size:1.06em}
.m:not([data-rendered]){font-family:var(--mono);font-size:.9em;color:var(--ink-60)}
.eq{display:flex;align-items:center;gap:1rem;margin-top:2rem;margin-bottom:2rem}
.eq .m{flex:1;text-align:center;overflow-x:auto;overflow-y:hidden;padding-block:.25rem}
.eq .eqno{flex:0 0 auto;font-size:var(--t-p2);color:var(--ink-60);font-variant-numeric:tabular-nums}

/* --- boxed aside: their panel treatment, 8px radius on a 4% ink fill ----- */
code{font-family:var(--mono);font-size:.86em;
  background:var(--ink-4);border-radius:.25rem;padding:.1em .35em}
.callout{border-radius:var(--r-md);background:var(--ink-4);padding:1.25rem 1.5rem;
  font-size:var(--t-p2);line-height:var(--l-p2)}
.callout p + p{margin-top:.75rem}

/* --- code block: 8px radius on the 4% fill, language label + copy -------- */
.code{border-radius:var(--r-md);background:var(--ink-4);overflow:hidden}
.body .code{margin-top:2rem;margin-bottom:2rem}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.375rem .375rem 0 1.25rem}
.code-lang{font-size:.75rem;line-height:1;color:var(--ink-60);letter-spacing:0}
.code-copy{height:1.75rem;padding-inline:.75rem;border:0;border-radius:var(--r-pill);background:transparent;
  font-family:inherit;font-size:.75rem;font-weight:500;letter-spacing:0;color:var(--ink-60);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.code-copy:hover{background:var(--ink-4);color:var(--ink)}
.code pre{margin:0;padding:.75rem 1.25rem 1.125rem;overflow-x:auto;tab-size:4;
  font-family:var(--mono);font-size:var(--t-code);line-height:var(--l-code);letter-spacing:0;color:var(--ink)}
.code pre code{background:none;padding:0;border-radius:0;font-size:inherit}
/* highlight.js classes -> their syntax roles (same mapping as their CodeBlock module) */
.hljs-keyword,.hljs-selector-tag{color:var(--syn-keyword)}
.hljs-string,.hljs-params,.hljs-regexp{color:var(--syn-string)}
.hljs-number{color:var(--syn-data)}
.hljs-title.function_,.hljs-built_in,.hljs-title.class_{color:var(--syn-function)}
.hljs-variable,.hljs-attr,.hljs-property,.hljs-template-variable{color:var(--syn-variable)}
.hljs-punctuation,.hljs-operator{color:var(--syn-operator)}
.hljs-literal,.hljs-symbol,.hljs-type{color:var(--syn-const)}
.hljs-comment,.hljs-quote,.hljs-meta{color:var(--syn-comment)}
.hljs-deletion{color:var(--syn-error)}

/* --- author + footnotes panel ------------------------------------------- */
.panel{border-radius:var(--r-md);background:var(--ink-4);padding-block:2rem}
@media (min-width:768px){ .panel{padding-block:4rem} }
.panel .inner{display:flex;flex-direction:column;gap:3rem}
.tags{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;padding:0}
.tag{display:block;border-radius:var(--r-xl);background:var(--ink-4);padding:.5rem .75rem;
  font-size:var(--t-nav);font-weight:500;letter-spacing:0;line-height:1.25;text-decoration:none;
  transition:background var(--dur) var(--ease)}
.tag:hover{background:var(--ink-12)}
.panel h2{font-size:var(--t-p2);line-height:var(--l-p2);font-weight:400;color:var(--ink-60);margin-bottom:.75rem}
.panel .who{font-size:var(--t-p2);line-height:var(--l-p2)}
.notes{list-style:none;padding:0;display:grid;gap:.75rem;font-size:var(--t-p2);line-height:var(--l-p2)}
.notes li{display:grid;grid-template-columns:auto 1fr;gap:.5rem}
.notes .n{color:var(--ink-60)}

/* --- keep reading ------------------------------------------------------- */
.more-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}
.more-head h2{font-size:var(--t-h4);line-height:1.26;letter-spacing:-.01em;font-weight:500}
.more{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:768px){ .more{grid-template-columns:repeat(3,1fr);gap:1.5rem} }
.item{text-decoration:none;display:block}
.item .frame{overflow:hidden;border-radius:var(--r-md);background:var(--ink-12);aspect-ratio:1/1}
.item img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.item:hover img{transform:scale(1.025)}
.item .t{display:block;padding-top:1rem;font-size:var(--t-h5);line-height:var(--l-h5);letter-spacing:-.01em;font-weight:500;
  transition:color var(--dur) var(--ease)}
.item:hover .t{color:var(--ink-60)}
.item .d{display:block;margin-top:.5rem;font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-60)}

/* --- table: hairline rows, tabular figures ------------------------------ */
.table-wrap{overflow-x:auto}
.body .table-wrap{margin-top:2rem;margin-bottom:2rem}
table{border-collapse:collapse;width:100%;font-size:var(--t-p2);line-height:var(--l-p2)}
th,td{text-align:left;padding:.625rem 1rem .625rem 0;border-bottom:1px solid var(--ink-12);vertical-align:top}
th{font-weight:500;color:var(--ink-60)}
th:last-child,td:last-child{padding-right:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* two-up variant of the card grid, for galleries with larger media */
@media (min-width:768px){ .more.two{grid-template-columns:repeat(2,1fr)} }

/* --- footer ------------------------------------------------------------- */
footer{margin-top:6rem;padding-top:3rem;border-top:1px solid var(--ink-12)}
.fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 1.5rem}
@media (min-width:768px){ .fcols{grid-template-columns:repeat(4,1fr)} }
.fcols h3{font-size:var(--t-p2);line-height:var(--l-p2);font-weight:500;margin-bottom:1rem}
.fcols ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.625rem}
.fcols a{font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-60);text-decoration:none;transition:color var(--dur) var(--ease)}
.fcols a:hover{color:var(--ink)}
.fbottom{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:3rem;padding-block:1.5rem 2.5rem;font-size:.75rem;color:var(--ink-44)}

@media (prefers-reduced-motion:reduce){ *{transition-duration:.001ms!important} }

[hidden]{display:none!important}

/* ===========================================================================
   Benchmark gallery (this page)
   =========================================================================== */
/* the demo, big, on top; the page scrolls past it */
/* capped so the gallery heading peeks in at the bottom of the first screen */
.demo{max-width:min(var(--container), 118vh);margin:0 auto;padding:clamp(12px,2vw,28px) var(--pad) 0}
.demo-box{position:relative}
.demo iframe{display:block;width:100%;height:62vh;border:0;background:#fff}
.demo-cover{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:#fff}
.demo-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(.2)}
.demo-dim{position:absolute;inset:0;background:rgba(8,8,8,.52);transition:background var(--dur) var(--ease)}
.demo-cover:hover .demo-dim{background:rgba(8,8,8,.42)}
.demo-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:#fff}
.demo-btn{display:inline-flex;align-items:center;gap:.6rem;height:3.5rem;padding-inline:1.75rem 2rem;border-radius:var(--r-pill);
  background:#fff;color:#080808;font-size:1.125rem;font-weight:500;letter-spacing:-.01em;transition:transform var(--dur) var(--ease)}
.demo-cover:hover .demo-btn{transform:scale(1.03)}
.demo-note{font-size:var(--t-p2);color:rgba(255,255,255,.8)}
.demo-cover:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.to-gallery{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:20;
  display:inline-flex;align-items:center;gap:.45rem;height:2.5rem;padding-inline:1.1rem;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font-size:var(--t-cta);font-weight:500;text-decoration:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.to-gallery.gone{opacity:0;pointer-events:none;transform:translate(-50%,8px)}
.scroll-hint{display:flex;justify-content:center;margin-top:.5rem}
.scroll-hint a{font-size:var(--t-p2);color:var(--ink-60);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.scroll-hint a:hover{color:var(--ink)}

.sub{margin-top:1.25rem;font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-60);letter-spacing:0;max-width:40rem}
.btn-small{height:1.75rem;padding-inline:.875rem;font-size:.8125rem}
.tabs{display:inline-flex;gap:.4rem}
.tab[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}

/* thumbnails only */
.gallery{grid-column:1 / -1;display:flex;flex-direction:column;gap:1.5rem}
.gallery-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem}
.gallery-head h2{font-size:clamp(1.75rem, calc(1.75rem + .75 * ((100vw - 23.4375rem) / 66.5625)), 2.5rem);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--gap)}
.thumb{display:block;padding:0;border:0;background:var(--ink-4);border-radius:var(--r-md);overflow:hidden;cursor:pointer;aspect-ratio:16/9;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.thumb:hover img{transform:scale(1.025)}
.thumb[aria-current="true"]{outline:2px solid var(--ink);outline-offset:3px}

/* the scene: reference large on the left, every model on the right */
.stage{grid-column:1 / -1;display:flex;flex-direction:column;gap:1.25rem;scroll-margin-top:1.5rem}
.stage-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem}
.stage-head h2{font-size:var(--t-h3);line-height:1.32;letter-spacing:-.01em;font-weight:500;overflow-wrap:anywhere;max-width:48rem}
.stage-head .facts{font-size:var(--t-p2);color:var(--ink-60);font-variant-numeric:tabular-nums;letter-spacing:0}
.stage-head .end{display:flex;align-items:center;gap:1rem}
.controls{display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:5;background:var(--paper);padding-block:.5rem}
.controls input[type=range]{flex:1;min-width:0;accent-color:var(--ink);height:1.5rem;cursor:pointer}
.fnum{font-size:var(--t-p2);color:var(--ink-60);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:7.5rem;text-align:right}
.cmp{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:960px){ .cmp{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start} }
.ref{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--gap)}
.pane{margin:0;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.frame.media{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:var(--r-md);background:var(--ink-4)}
.frame.media video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.pane figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-60);letter-spacing:0}
.pane .lbl{font-weight:500;color:var(--ink)}
.pane .rk{font-variant-numeric:tabular-nums;color:var(--ink-44);min-width:1.5rem}
.ref figcaption .lbl{font-size:var(--t-p1)}
footer{margin-top:6rem}

/* what the scene is: the ontology, under the reference */
.info{display:flex;flex-direction:column;gap:1rem;padding-top:.25rem}
.info .note{font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-60);letter-spacing:0;max-width:40rem}
.info dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.25rem;font-size:var(--t-p2);line-height:1.35;letter-spacing:0}
.info dt{color:var(--ink-60)}
.info dd{margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.tagp{display:inline-flex;align-items:center;height:1.5rem;padding-inline:.6rem;border-radius:var(--r-pill);background:var(--ink-4);
  font-size:.8125rem;font-weight:500;color:var(--ink);cursor:default}

/* --- wipe: geometry on the left of the divider, the input video on the right --- */
#ref-frame{position:relative}
.wipe{position:absolute;inset:0;cursor:ew-resize;touch-action:none;user-select:none}
.wipe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.wipe-rule{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.28);pointer-events:none}
.wipe-grip{position:absolute;top:50%;left:50%;width:2.25rem;height:2.25rem;margin:-1.125rem 0 0 -1.125rem;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.28);display:grid;place-items:center;color:#2a2a2e}
.wipe-set{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.625rem}
.wipe-set button{font:500 .8125rem/1 var(--sans);padding:.45rem .7rem;border-radius:var(--r-pill);border:1px solid var(--ink-12);
  background:transparent;color:var(--ink-60);cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.wipe-set button:hover{color:var(--ink)}
.wipe-set button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* predicted geometry over each model's render, one divider shared by every pane */

.mgrid .frame.media{position:relative}
.mgrid .wipe video{clip-path:inset(0 calc(100% - var(--mx,50%)) 0 0)}
.mgrid .wipe-rule{left:var(--mx,50%)}
.mgrid .wipe-grip{width:.625rem;height:.625rem;margin:-.3125rem 0 0 -.3125rem}
/* when a prediction's geometry cannot be wiped over its render, say so plainly */
.mgrid .geo-full{position:absolute;inset:0;background:#fff}
.mgrid .geo-full video{width:100%;height:100%;object-fit:cover;display:block}
.mgrid .flag{position:absolute;left:.5rem;top:.5rem;display:inline-flex;align-items:center;gap:.3rem;
  font:600 .75rem/1 var(--sans);letter-spacing:0;padding:.35rem .55rem .35rem .45rem;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);cursor:help}
.mgrid .nogeo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  background:rgba(255,255,255,.82);backdrop-filter:grayscale(1) blur(1px);color:var(--ink);text-align:center;padding:1rem}
.mgrid .nogeo strong{font:600 .875rem/1.2 var(--sans)}
.mgrid .nogeo span{font-size:.75rem;line-height:1.3;color:var(--ink-60);max-width:16rem}

/* gallery groups: scenes with geometry first */
.thumbs-head{grid-column:1 / -1;font-size:var(--t-p2);font-weight:500;color:var(--ink);margin:1rem 0 -.25rem}
.thumbs-head:first-child{margin-top:0}
.thumbs-head span{color:var(--ink-44);font-weight:400;margin-left:.35rem}
.thumb{position:relative}
.thumb .geo-mark{position:absolute;right:.4rem;top:.4rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;
  border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--ink-12)}

/* ?curate */
.thumb .pick{position:absolute;left:.4rem;top:.4rem;width:1.6rem;height:1.6rem;border-radius:.35rem;border:1.5px solid var(--ink);
  background:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--on-ink)}
.thumb .pick[aria-pressed="true"]{background:var(--ink)}
.thumb .pick svg{display:none}
.thumb .pick[aria-pressed="true"] svg{display:block}
.thumb .chip{position:absolute;left:.4rem;bottom:.4rem;font:500 .6875rem/1 var(--sans);padding:.3rem .5rem;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink-60);box-shadow:0 0 0 1px var(--ink-12)}
.thumb .chip.ready{background:var(--ink);color:var(--on-ink);box-shadow:none}
.curate-bar{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.1rem;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:0 0 0 1px var(--ink-12),0 6px 24px rgba(0,0,0,.08);font-size:var(--t-p2);white-space:nowrap}
.curate-bar .cur-note{color:var(--ink-60)}

/* the agents' column: a heading and the geometry switch above the grid */
.mcol{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.mhead{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;min-height:2.5rem}
.mhead h3{font-size:var(--t-h5);font-weight:500;margin:0;margin-right:auto}
.mhead h3 span{color:var(--ink-44);font-weight:400;font-size:var(--t-p2);margin-left:.35rem}
.geo-hint{font-size:var(--t-p2);color:var(--ink-60)}
.geo-btn{background:var(--ink);color:var(--on-ink);height:2.5rem;padding-inline:1.1rem;gap:.5rem}
.geo-btn:hover{background:var(--ink-60)}
.geo-btn[aria-pressed="true"]{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.geo-btn[aria-pressed="true"]:hover{background:var(--ink-4)}
.controls .wipe-set{margin-top:0;flex-wrap:nowrap}

/* the way back to the gallery, in the sticky bar so it is always in reach */
.back-btn{background:var(--ink);color:var(--on-ink);gap:.35rem;flex:0 0 auto}
.back-btn:hover{background:var(--ink-60)}
.fnum.loading{color:var(--ink-44)}

/* the gallery in two groups, each split real | synthetic */
.thumbs.grouped{display:block}
.tgroup + .tgroup{margin-top:3.5rem}
.tgroup-head{margin-bottom:1.25rem;max-width:46rem}
.tgroup-head h3{font-size:var(--t-h3);line-height:1.3;font-weight:500;letter-spacing:-.01em;margin:0}
.tgroup-head p{font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-60);margin:.4rem 0 0}
.tsplit{display:grid;grid-template-columns:1fr;gap:2rem var(--gap)}
@media (min-width:900px){ .tsplit.two{grid-template-columns:1fr 1fr;column-gap:2rem} }
.tcol h4{font-size:var(--t-p2);font-weight:500;margin:0 0 .75rem}
.tcol h4 span{color:var(--ink-44);font-weight:400;margin-left:.3rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:var(--gap)}

/* the page's lockup above the demo; the gallery title below keeps the same size as an h2 */
.top-lockup{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(20px,3vw,36px)}
.top-lockup .lede{max-width:40rem;margin-top:1rem;font-size:var(--t-h5);line-height:var(--l-h5);color:var(--ink-60);text-wrap:balance}
h2.title{font-size:var(--t-h1);line-height:1.2;letter-spacing:-.03em;font-weight:500;max-width:62.5rem;text-wrap:balance}

/* the row of jumps under the title, and the metrics section */
.page-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem}
/* the switch: the two halves of the page side by side, the one in view underlined */
.switch{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:.5rem;border-bottom:1px solid var(--ink-12);scroll-margin-top:1rem}
@media (min-width:860px){ .switch{grid-template-columns:1fr 1fr;gap:2rem} }
.sw{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;
  padding:1.25rem 1rem 1.5rem;border-bottom:3px solid transparent;margin-bottom:-1px;transition:border-color var(--dur) var(--ease)}
.sw-title{font-size:clamp(1.75rem, calc(1.75rem + 1.25 * ((100vw - 23.4375rem) / 66.5625)), 3rem);line-height:1.15;letter-spacing:-.03em;font-weight:500;
  color:var(--ink-44);transition:color var(--dur) var(--ease);text-wrap:balance}
.sw-sub{font-size:var(--t-p2);line-height:var(--l-p2);color:var(--ink-44);max-width:32rem;text-wrap:pretty;transition:color var(--dur) var(--ease)}
.sw:hover .sw-title{color:var(--ink-60)}
.sw[aria-selected="true"]{border-bottom-color:var(--ink)}
.sw[aria-selected="true"] .sw-title{color:var(--ink)}
.sw[aria-selected="true"] .sw-sub{color:var(--ink-60)}
.sw:focus-visible{outline:2px solid var(--ink-44);outline-offset:4px;border-radius:4px}
.pane-gallery,.pane-metrics{grid-column:1 / -1}
.pane-gallery{display:flex;flex-direction:column;gap:3rem}
#metrics-frame{display:block;width:100%;height:1100px;border:0;background:var(--paper)}