/* AI: two world models at work. Colors, type and panels come from the site shell's --site- tokens; the two model hues
   mark lines, dots, rules, glows and meters only, and text stays ink, soft or muted. Every live number keeps its box while
   it loads, fails or changes, and motion appears only where something is running now. Each text slot the data fills
   reserves, at each width, the lines its longest copy needs (a min-height in its own line heights), so the first
   answer moves nothing (scripts/site-shots.mjs measures it). */
:root{color-scheme:dark;--vjepa:#3c88f5;--cosmos:#c94fae;--vjepa-wash:rgba(60,136,245,.12);--cosmos-wash:rgba(201,79,174,.12);
  --ai-ref:#5b7587;--ai-grid:#1d3141;--ai-track:#1a2b38;--ai-hair:#1b2d3b}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--site-header-h,64px) + 16px)}
body[data-page=ai]{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--site-ink);font:16px/1.6 var(--site-font);
  background:radial-gradient(900px 520px at 12% -10%,rgba(201,79,174,.14),transparent 62%),radial-gradient(1000px 560px at 92% -8%,rgba(60,136,245,.16),transparent 62%),var(--site-bg)}
.ai{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:44px 28px 96px}
.ai-hero{display:block}
.ai a{color:var(--site-mint);text-underline-offset:3px;text-decoration-thickness:1px}
.ai :focus-visible{outline:2px solid var(--site-mint);outline-offset:3px}
.ai .eyebrow{margin:26px 0 12px;color:var(--site-mint);font:700 12px/1.4 var(--site-font);letter-spacing:.16em;text-transform:uppercase}
.ai h1{max-width:18ch;margin:0 0 18px;font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:650;text-wrap:balance}
.ai .title-accent{display:block;color:var(--site-mint)}
.lede{max-width:64ch;margin:0;color:#cddae3;font-size:19px;line-height:1.55}
.archive-demo-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0 0}
.archive-demo-cta a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 14px;border:1px solid #3e7568;border-radius:10px;background:#14302d;color:#c2f7e3;font-size:13px;font-weight:650;text-decoration:none}
.archive-demo-cta a:hover{border-color:var(--site-mint);background:#1a3e39}
.archive-demo-cta span{color:var(--site-muted);font-size:12px}
.num,.kpi-value,.tile-value,table,.run-values,.meter-text{font-variant-numeric:tabular-nums}
.num[data-empty],.text[data-empty]{color:var(--site-muted)}
.num.changed{animation:ai-flash 1.4s ease-out 1}
@keyframes ai-flash{0%{text-shadow:0 0 16px currentColor;filter:brightness(1.4)}100%{text-shadow:0 0 0 transparent;filter:none}}
/* A sample older than five minutes keeps its numbers, dimmed, beside the Delayed chip; so does the machine drawing,
   whose cameras and incidents then light nothing */
.ai[data-freshness=delayed] .num,.ai[data-freshness=old] .num{opacity:.62}
.diagram[data-models=stale] .flow-list :is([data-field=dg-cameras],[data-field=dg-screens],[data-field=dg-flagged],[data-field=dg-confirmed],[data-field=dg-since],[data-field=dg-round],[data-field=dg-pace],[data-field=dg-promote]){opacity:.62}
.diagram[data-models=stale] .diagram-svg :is([data-field=dg-cameras],[data-field=dg-screens],[data-field=dg-flagged],[data-field=dg-confirmed],[data-field=dg-since],[data-field=dg-round],[data-field=dg-pace],[data-field=dg-promote]){fill-opacity:.62}

/* Hero: the freshness chip and the live-version pill, the title, and four live tiles that never change size */
/* The status row holds its height whatever the chip and the version line say, so the title never moves */
.hero-status{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hero-status .freshness{min-height:50px;align-items:flex-start}
.live-pill{display:flex;align-items:flex-start;gap:10px;min-height:40px;margin:0;color:var(--site-soft);font-size:14px;line-height:1.4}
.live-pill-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--site-muted)}
.ai[data-state=ready][data-freshness=live] .live-pill-dot{background:var(--site-mint);box-shadow:0 0 0 3px rgba(126,240,200,.18)}
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:30px 0 0}
.tile{min-width:0;min-height:142px;margin:0;padding:16px 20px 18px;border:1px solid var(--site-border);border-top:3px solid var(--site-mint);border-radius:var(--site-radius);
  background:var(--site-panel-bg)}
.tile[data-tile=cosmos]{border-top-color:var(--cosmos)}
.tile[data-tile=vjepa]{border-top-color:var(--vjepa)}
.tile dt{color:var(--site-soft);font-size:13px;font-weight:600;line-height:1.4}
.tile dd{margin:0}
.tile-value{margin:6px 0 4px!important;font-size:34px;font-weight:650;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:proportional-nums}
.tile-note{color:var(--site-muted);font-size:13px;line-height:1.45}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #23404a;border-radius:999px;color:var(--site-soft);
  font-size:14px;font-weight:500;text-decoration:none}
.toc a:hover{border-color:var(--site-mint);color:var(--site-ink)}
.noscript-note{margin:16px 0 0;color:var(--site-amber);font-size:14px}

/* Sections */
.block{margin-top:80px}
.section-head{margin:0 0 24px}
.section-head h2{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:650}
.section-note{max-width:68ch;margin:10px 0 0;color:var(--site-muted);font-size:15px;line-height:1.55}

/* What each model does live */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.model-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid var(--site-border);border-top:3px solid var(--cosmos);border-radius:var(--site-radius);
  background:var(--site-panel-bg)}
.model-card[data-model=vjepa]{border-top-color:var(--vjepa)}
.kicker{margin:0;color:var(--site-soft);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}
.model-card h3{margin:4px 0 10px;font-size:22px;line-height:1.3;font-weight:650}
.card-text{margin:0;color:#b9cad6;font-size:15px;line-height:1.6}
.rows{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 20px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--ai-hair)}
.rows div{min-width:0}
.rows dt{color:var(--site-muted);font-size:13px;line-height:1.4}
.rows dd{margin:4px 0 0}
.rows .num{display:block;min-height:30px;font-size:24px;font-weight:650;line-height:30px;overflow-wrap:anywhere}
.rows .text{display:block;min-height:26px;font-size:18px;font-weight:650;line-height:26px}
.rows small{display:block;min-height:calc(2 * 1.45em);margin-top:2px;color:var(--site-muted);font-size:13px;line-height:1.45}
.rows [data-field=cosmosIncidents]{min-height:60px}
.rows [data-field=vjepaStatus],.rows [data-field=vjepaChecks]{min-height:52px}
.rows [data-field=cosmosIncidentsLabel]{min-height:calc(2 * 1.4em)}
.card-foot{margin:18px 0 0;color:var(--site-muted);font-size:13px;line-height:1.55}
.card-version{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--ai-hair);color:var(--site-soft);font-size:14px;line-height:1.5}
.card-version p{margin:0}
.card-version [data-field]{min-height:calc(2 * 1.5em)}

/* The machine: an SVG diagram on wide screens and the same nodes as a list, which is also its accessible version */
.diagram{margin:0;padding:16px;border:1px solid var(--site-border);border-radius:var(--site-radius);background:linear-gradient(180deg,rgba(15,30,42,.9),rgba(10,22,31,.9))}
.diagram-svg{display:none}
.diagram-caption{min-height:66px;margin:14px 4px 0;color:var(--site-soft);font-size:14px;line-height:22px}
.machine-note{max-width:72ch;margin:14px 0 0;color:var(--site-muted);font-size:13px;line-height:1.55}
.dg-node,.dg-lane,.flow,.dg-edge{--hue:var(--site-soft);--wash:rgba(195,211,222,.08)}
[data-node=cameras]{--hue:var(--site-mint);--wash:rgba(126,240,200,.08)}
[data-node=gpu0],[data-edge=frames]{--hue:var(--cosmos);--wash:var(--cosmos-wash)}
[data-node=gpu3090],[data-edge=review-crops]{--hue:var(--cosmos);--wash:var(--cosmos-wash)}
[data-node=gpu2],[data-node=day],[data-edge=clips],[data-edge=promote]{--hue:var(--vjepa);--wash:var(--vjepa-wash)}
[data-node=incidents]{--hue:var(--site-alert);--wash:rgba(255,122,107,.06)}
.node-box{fill:#0f1e2a;stroke:#23394a;stroke-width:1;transition:stroke .6s ease,fill .6s ease}
.node-glow{fill:var(--hue);opacity:0;transition:opacity .6s ease}
.dg-node[data-state=active] .node-box{stroke:var(--hue);stroke-width:2;fill:#112434}
.dg-node[data-state=active] .node-glow{opacity:.35}
.dg-node[data-node=incidents][data-state=active] .node-glow{opacity:0}
.dg-node[data-state=unknown] .node-box{stroke:var(--ai-ref);stroke-dasharray:6 5}
.lane-box{fill:rgba(255,255,255,.015);stroke:#1d3040;stroke-width:1;transition:stroke .6s ease,fill .6s ease}
.dg-lane[data-state=active] .lane-box{stroke:var(--hue);stroke-width:2;fill:var(--wash)}
.dg-lane[data-state=unknown] .lane-box{stroke-dasharray:6 5}
.job-mark{fill:transparent;stroke:none}
.dg-job[data-state=active] .job-mark{fill:var(--cosmos-wash);stroke:var(--cosmos);stroke-width:1.5}
.dg-kicker{fill:var(--site-soft);font:600 16px var(--site-font)}
.dg-title{fill:var(--site-ink);font:650 20px var(--site-font)}
.dg-big{fill:var(--site-ink);font:650 28px var(--site-font)}
.dg-unit,.dg-muted{fill:var(--site-muted)}
.dg-unit{font:500 16px var(--site-font)}
.dg-small{fill:var(--site-soft);font:500 16px var(--site-font)}
.dg-small.dg-muted{fill:var(--site-muted)}
.busy-track{fill:var(--ai-track)}
.busy-fill{fill:var(--hue);transition:width .6s ease}
.edge-line{fill:none;stroke:var(--ai-ref);stroke-width:1.5}
.edge-dotted{stroke-dasharray:2 6;stroke-linecap:round}
.edge-dashed{stroke-dasharray:6 5}
.dg-edge[data-state=active] .edge-line{stroke:var(--hue);stroke-width:2;stroke-opacity:.8}
.dg-edge[data-state=live] .edge-line{stroke:var(--hue);stroke-width:2;stroke-dasharray:none}
.edge-chip{fill:#0b1823;stroke:#23394a}
.edge-label{fill:var(--site-muted);font:500 16px var(--site-font)}
.edge-value{fill:var(--site-soft)}
.particle{fill:var(--hue);stroke:#09141d;stroke-width:2}
.dg-edge:not([data-state=active]) .particles{display:none}
.flow-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none}
.flow{min-width:0;padding:14px 16px 14px 18px;border:1px solid #1d3040;border-left:2px solid var(--ai-ref);border-radius:12px;background:rgba(12,26,36,.7);
  transition:border-color .6s ease,background-color .6s ease}
.flow[data-state=active]{border-left-color:var(--hue);background:linear-gradient(90deg,var(--wash),rgba(12,26,36,.7) 70%)}
.flow[data-state=unknown]{border-left-style:dashed}
.flow p{margin:0}
.flow-kicker{color:var(--site-soft);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.6;text-transform:uppercase}
.flow-title{margin-top:2px!important;color:var(--site-ink);font-size:17px;font-weight:650;line-height:1.4}
.flow-main{margin-top:4px!important;color:var(--site-soft);font-size:15px;line-height:1.5}
.flow-num{color:var(--site-ink);font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
/* In a lane the pace has its own line, so its unit never moves when the number arrives */
.lane .flow-num{display:block}
.flow-edge{margin-top:6px!important;color:var(--site-muted);font-size:13px;line-height:1.5}
.flow-promote{min-height:calc(2 * 1.5em);color:var(--site-soft)}
.flow-busy{display:flex;align-items:center;gap:10px;margin-top:8px!important;color:var(--site-soft);font-size:14px}
.busy-bar{display:block;flex:0 1 160px;height:6px;border-radius:3px;background:var(--ai-track);overflow:hidden}
.busy-bar .busy-fill{display:block;width:0;height:100%;background:var(--hue);transition:width .6s ease}
.flow-lanes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.lane{padding:10px 12px;border:1px solid #1d3040;border-radius:10px;transition:border-color .6s ease,background-color .6s ease}
.lane[data-node=night]{--hue:var(--site-soft);--wash:rgba(195,211,222,.06)}
.lane[data-state=active]{border-color:var(--hue);background:var(--wash)}
.lane-when{color:var(--site-muted);font-size:13px;line-height:1.5}
.lane-line{color:var(--site-soft);font-size:14px;line-height:1.6}
.lane-line[data-state=active]{color:var(--site-ink)}

/* Training now */
.train-block{margin-top:24px;padding:28px;border:1px solid var(--site-border);border-top:3px solid var(--vjepa);border-radius:var(--site-radius);background:var(--site-panel-bg)}
.train-block[data-model=cosmos]{border-top-color:var(--cosmos)}
/* The as-of line sits under the title, beside it only where both always fit */
.train-head{display:flex;flex-direction:column;gap:4px}
.train-head h3{margin:0;font-size:22px;line-height:1.3;font-weight:650}
.asof{margin:0;color:var(--site-muted);font-size:13px;line-height:1.5}
.train-line{min-height:calc(2 * 1.6em);margin:12px 0 0;color:var(--site-soft);font-size:16px;line-height:1.6}
[data-field=cosmosLine]{min-height:calc(3 * 1.6em)}
/* The meter and its words: stacked on a phone, side by side from 520 px, never wrapping */
.meter-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:14px 0 0}
.meter{flex:none;width:100%;max-width:420px;height:8px;border-radius:4px;background:var(--ai-track);overflow:hidden}
.meter-fill{display:block;width:0;height:100%;border-radius:4px;background:var(--vjepa);transition:width .6s ease}
.meter-text{margin:0;color:var(--site-muted);font-size:14px;line-height:1.5;white-space:nowrap}
.train-note{max-width:78ch;margin:10px 0 0;color:var(--site-muted);font-size:14px;line-height:1.6}
.kpis,.data-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:24px 0 0}
.kpi{min-width:0;min-height:112px;margin:0;padding:14px 16px;border:1px solid #1d3040;border-radius:12px;background:rgba(10,22,31,.55)}
.kpi dt{color:var(--site-soft);font-size:13px;font-weight:600;line-height:1.4}
.kpi dd{margin:0}
.kpi-value{margin:4px 0 2px!important;font-size:30px;font-weight:650;line-height:1.15;letter-spacing:-.01em}
.kpi-note{min-height:calc(2 * 1.45em);color:var(--site-muted);font-size:13px;line-height:1.45}
.overall{min-height:calc(3 * 1.5em);margin:26px 0 0;padding-left:12px;border-left:3px solid var(--vjepa);color:var(--site-ink);font-size:17px;font-weight:600;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none;color:var(--site-muted);font-size:13px;line-height:1.5}
.legend li{display:inline-flex;align-items:center;gap:8px}
.key{display:inline-block;flex:none;width:22px;height:0}
.key-line{border-top:2px solid var(--vjepa)}
.key-band{height:10px;border-radius:2px;background:rgba(60,136,245,.24)}
.key-chance{border-top:1px solid var(--ai-ref)}
.key-majority{border-top:2px dotted var(--site-soft)}
.charts-note{max-width:78ch;margin:8px 0 0;color:var(--site-muted);font-size:13px;line-height:1.5}
/* The note above a chart names what always giving the most common answer scores; its key ties it to the dotted line */
.puzzle[data-lean=shown] .puzzle-note::before{content:"";display:inline-block;width:18px;margin:0 8px 0 0;vertical-align:middle;border-top:2px dotted var(--site-soft)}
.key-before,.key-after{width:10px;height:10px;border-radius:50%}
.key-before{box-shadow:inset 0 0 0 2px var(--site-soft)}
.key-after{background:var(--cosmos)}
.puzzles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:18px 0 0}
.puzzle{min-width:0;padding:18px 18px 14px;border:1px solid #1d3040;border-radius:14px;background:rgba(10,22,31,.55)}
/* The verdict always has its own line under the puzzle's name, whatever its length */
.puzzle-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.puzzle h4{margin:0;font-size:17px;line-height:1.35;font-weight:650}
.puzzle-question{min-height:44px;margin:6px 0 0;color:#b9cad6;font-size:14px;line-height:1.55}
.puzzle-value{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:8px 0 0}
.puzzle-value .num{min-width:2.4em;font-size:30px;font-weight:650;line-height:1.15}
.puzzle-chance{color:var(--site-soft);font-size:14px}
.puzzle-note{min-height:calc(2 * 1.5em);margin:2px 0 0;color:var(--site-muted);font-size:13px;line-height:1.5}
.puzzle-foot{min-height:calc(2 * 1.5em);margin:6px 0 0;color:var(--site-muted);font-size:12px;line-height:1.5}
.verdict{display:inline-flex;align-items:center;gap:7px;margin:0;padding:2px 10px 2px 8px;border:1px solid var(--site-muted);border-radius:999px;color:var(--site-soft);
  font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.04em;white-space:nowrap}
.verdict-shape{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.verdict[data-verdict-state=better]{border-color:var(--site-mint);color:var(--site-mint)}
.verdict[data-verdict-state=better] .verdict-shape{background:currentColor}
.verdict[data-verdict-state=worse]{border-color:var(--site-amber);color:var(--site-amber)}
.verdict[data-verdict-state=worse] .verdict-shape{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.verdict[data-verdict-state=unmeasured],.verdict[data-verdict-state=pending]{border-style:dashed;color:var(--site-muted)}
.verdict[data-verdict-state=unmeasured] .verdict-shape,.verdict[data-verdict-state=pending] .verdict-shape{box-shadow:none;border:1.5px dashed currentColor}
.chart{position:relative;height:128px;margin:10px 0 0;border-radius:8px}
.chart[data-reading]{background:rgba(255,255,255,.02)}
.chart svg{display:block;overflow:visible}
.chart-message{display:flex;align-items:center;justify-content:center;height:100%;margin:0;padding:0 12px;border:1px dashed #1f3444;border-radius:8px;color:var(--site-muted);
  font-size:13px;line-height:1.45;text-align:center}
.chart-axis text,.chart-mark-tag{fill:var(--site-muted);font:12px var(--site-font)}
.chart-grid{stroke:var(--ai-grid);stroke-width:1}
.chart-chance{stroke:var(--ai-ref);stroke-width:1}
.chart-majority{stroke:var(--site-soft);stroke-width:1;stroke-dasharray:1 3;stroke-linecap:round}
.chart-mark{stroke:#23394a;stroke-width:1}
.chart-band{fill:rgba(60,136,245,.12)}
.chart-line{fill:none;stroke:var(--vjepa);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-point{fill:var(--vjepa);stroke:#101e29;stroke-width:2}
.chart-end{fill:var(--site-ink);font:600 13px var(--site-font)}
.chart-cross{stroke:var(--site-soft);stroke-width:1}
.chart-tip{position:absolute;z-index:2;display:grid;gap:2px;max-width:220px;padding:8px 10px;border:1px solid #2c4556;border-radius:10px;background:#0b1823;
  box-shadow:0 8px 24px rgba(0,0,0,.4);color:var(--site-soft);font-size:13px;line-height:1.4;pointer-events:none}
.chart-tip strong{color:var(--site-ink);font-weight:650;font-variant-numeric:tabular-nums}
.loss-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 24px;margin:18px 0 0}
.loss{min-width:0;padding:18px 18px 14px;border:1px solid #1d3040;border-radius:14px;background:rgba(10,22,31,.55)}
.loss-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.loss h4{margin:0;font-size:17px;line-height:1.35;font-weight:650}
.loss-value{margin:0}
.loss-value .num{font-size:26px;font-weight:650}
.loss-text p{margin:0 0 12px;color:var(--site-soft);font-size:14px;line-height:1.6}
.loss-text .loss-note{min-height:calc(3 * 1.6em)}
.loss-text .mix{min-height:calc(4 * 1.6em)}
.loss-text .asof{color:var(--site-muted);font-size:13px}
.show-table{display:inline-flex;align-items:center;min-height:44px;margin:18px 0 0;padding:0 18px;border:1px solid #3a5466;border-radius:999px;background:transparent;
  color:var(--site-ink);font:500 14px var(--site-font);cursor:pointer}
.show-table:hover{border-color:var(--site-mint);color:var(--site-mint)}
.table-wrap{margin:12px 0 0;overflow-x:auto;border:1px solid #1d3040;border-radius:12px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4}
.table-wrap caption{padding:12px 14px 4px;color:var(--site-muted);font-size:13px;text-align:left}
.table-wrap th,.table-wrap td{padding:9px 14px;border-bottom:1px solid var(--ai-hair);text-align:left;white-space:nowrap}
.table-wrap thead th{color:var(--site-muted);font-size:13px;font-weight:600}
.table-wrap tbody th{color:var(--site-ink);font-weight:600}
.table-wrap td{color:var(--site-soft)}
.table-empty{color:var(--site-muted)!important;white-space:normal!important}
.schedule,.runs-caption,.runs-note{max-width:78ch;color:var(--site-soft);font-size:14px;line-height:1.6}
.schedule{margin:10px 0 0}
.runs-caption{margin:22px 0 0;color:var(--site-muted)}
.pair-key{display:inline-flex;align-items:center;gap:6px;margin-left:10px;color:var(--site-soft);white-space:nowrap}
.runs{position:relative;margin:10px 0 0}
.runs ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--ai-hair)}
.run{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"when values" "plot plot" "meta meta";align-items:center;gap:4px 16px;min-height:64px;padding:10px 0;
  border-bottom:1px solid var(--ai-hair)}
.run p{margin:0}
.run-when{grid-area:when;display:flex;flex-direction:column}
.run-date{color:var(--site-ink);font-size:14px;font-weight:600}
.run-time{color:var(--site-muted);font-size:13px}
.run-plot{grid-area:plot;height:24px;min-width:0}
.run-plot svg{display:block}
.run-values{grid-area:values;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;justify-content:flex-end}
.run-pair{color:var(--site-ink);font-size:14px;font-weight:600}
.run-change{color:var(--site-muted);font-size:13px}
.run-meta{grid-area:meta;color:var(--site-muted);font-size:13px}
/* Until the runs arrive their box holds four rows, the history's size today, with the message in a dashed frame */
.run-empty{display:flex;align-items:center;justify-content:center;min-height:448px;margin:10px 0;padding:0 12px;border:1px dashed #1f3444;border-radius:8px;
  color:var(--site-muted);font-size:14px;text-align:center}
.runs-axis{height:20px}
.pair-link{stroke:var(--site-muted);stroke-opacity:.6;stroke-width:2}
.pair-before{fill:#101e29;stroke:var(--site-soft);stroke-width:2}
.pair-after{fill:var(--cosmos);stroke:#101e29;stroke-width:2}
.runs[data-reading] .chart-tip{right:0}
.runs-note{margin:8px 0 0}
.runs-size{min-height:calc(3 * 1.6em);max-width:78ch;margin:18px 0 0;color:var(--site-soft);font-size:14px;line-height:1.6}
.extras{margin:18px 0 0;padding:14px 16px;border:1px solid #1d3040;border-radius:12px}
.extras h4{margin:0 0 8px;font-size:15px;font-weight:650}
.extras dl{display:grid;gap:8px;margin:0}
.extras dt{color:var(--site-soft);font-size:13px;font-weight:600}
.extras dd{margin:0;color:var(--site-ink);font-size:15px}
.extras small{display:block;color:var(--site-muted);font-size:13px}

/* What these numbers mean */
.meaning{display:grid;grid-template-columns:minmax(0,1fr);column-gap:48px;margin:0}
.meaning div{padding:16px 0;border-top:1px solid var(--ai-hair)}
.meaning dt{color:var(--site-ink);font-size:15px;font-weight:650;line-height:1.4}
.meaning dd{margin:6px 0 0;color:#b9cad6;font-size:15px;line-height:1.6}
.sources{margin:22px 0 0;color:var(--site-muted);font-size:14px;line-height:1.6}
.sources code{color:var(--site-soft);font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

@media(max-width:519px){
  .model-card[data-model=vjepa] .kicker{min-height:calc(2 * 1.5em)}
  .card-version [data-field]{min-height:calc(3 * 1.5em)}
}
@media(min-width:520px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:162px}
  .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis .kpi-note{min-height:calc(3 * 1.45em)}
  .overall{min-height:calc(2 * 1.5em)}
  .puzzle-foot{min-height:1.5em}
  .loss-text .loss-note{min-height:calc(2 * 1.6em)}
  .loss-text .mix{min-height:calc(3 * 1.6em)}
  [data-field=cosmosLine]{min-height:calc(2 * 1.6em)}
  .runs-size{min-height:calc(2 * 1.6em)}
  .meter-row{flex-direction:row;align-items:center;gap:14px}
  .meter{flex:1 1 120px;min-width:120px;width:auto}
  .meter-text{flex:none}
  .run{grid-template-columns:110px minmax(0,1fr) 150px;grid-template-areas:"when plot values" "when meta meta";min-height:56px}
  .run-values{justify-content:flex-start}
  .run-empty{min-height:259px}
  .runs-axis{margin:0 166px 0 126px}
  .flow-promote{min-height:1.5em}
}
@media(min-width:640px){
  .hero-status .freshness{min-height:44px}
  .tile-value{font-size:36px}
  .flow-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-field=vjepaLine]{min-height:1.6em}
  .diagram-caption{min-height:44px}
}
@media(min-width:900px){
  .puzzles,.loss-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:960px){
  .tile{min-height:156px}
  .tile-value{font-size:48px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .data-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .meaning{grid-template-columns:repeat(2,minmax(0,1fr))}
  .runs-size{min-height:1.6em}
}
/* The drawing shows once it is at least 0.8 of its 1120 px viewBox, so its 16 px text stays above 12.8 px */
@media(min-width:1000px){
  .diagram-caption{min-height:22px}
  .diagram-svg{display:block;width:100%;height:auto}
  /* The list stays in the page for assistive technology; the drawing above is the same nodes */
  .flow-list{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media(min-width:1100px){
  .tile{min-height:174px}
  .live-pill{min-height:20px}
  .train-head{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
  .overall{min-height:1.5em}
  [data-field=cosmosLine]{min-height:1.6em}
}
@media(max-width:959px) and (min-width:640px){.ai{padding:32px 20px 80px}}
@media(max-width:639px){
  .ai{padding:24px 16px 64px}
  .lede{font-size:17px}
  .block{margin-top:56px}
  .model-card,.train-block{padding:18px}
  .puzzle,.loss{padding:16px 14px 12px}
}
@media(prefers-reduced-motion:reduce){
  .particles{display:none}
  .ai *,.ai *::before,.ai *::after{animation:none!important;transition:none!important}
}
