@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 600 700; }
:root { --bg:#fff; --ink:#161A1D; --body:#33383D; --muted:#6B767D; --hairline:#D8DEE2; --gridline:#EDF1F3; --teal:#275E71; --clay:#B4674A; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--body); font-family:"Space Grotesk",sans-serif; font-size:16px; line-height:1.55; }
main { max-width: 880px; margin: 0 auto; padding: 48px 24px 96px; }
main > svg { display:block; max-width:100%; height:auto; }
.logo { display:flex; align-items:center; gap:10px; margin-bottom:40px; }
.logo svg { height:26px; width:auto; display:block; }
.hero { margin: 0 0 28px; }
.hero svg { width:100%; height:auto; }
h1 { font-size: 34px; line-height:1.2; font-weight:500; color:var(--ink); max-width: 720px; margin: 8px 0 6px; }
.date { font-size:14px; color:var(--muted); margin-bottom:4px; }
.byline { font-size:15px; color:var(--body, #33383D); margin:0 0 14px; }
.headline { font-size: 26px; line-height:1.25; font-weight:500; color:var(--ink); max-width: 720px; margin: 0 0 10px; }
h2 { font-size:20px; font-weight:600; color:var(--ink); margin-bottom:12px; }
h3 { font-size:18px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.sub { color:var(--muted); max-width: 680px; margin-bottom: 10px; }
.sub b { color: var(--body); font-weight: 500; }
.sub.setup b { color:var(--ink); font-weight:600; }
.task { color:var(--ink); border-left:2px solid var(--teal); padding:2px 0 2px 14px; margin:12px 0; max-width:680px; }
.sub a, a { color: var(--teal); text-decoration: none; font-weight:500; }
a.model, .sub a.model { color:var(--ink); font-weight:700; }
a.model:hover { text-decoration:underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
hr { border:none; border-top:1px solid var(--hairline); margin: 40px 0; }
video { width:100%; display:block; border:1px solid var(--hairline); }
.heroloop { width:auto; max-width:100%; max-height:78vh; display:block; margin:0 auto; border:1px solid var(--hairline); }
.vidcap, .figcap { font-size:14px; color:var(--muted); margin-top:8px; max-width:680px; }
.figcap b { color:var(--ink); }
.msstrip { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-top:18px; }
.msstrip img { width:100%; aspect-ratio:1; display:block; border:1px solid var(--hairline); }
.msstrip .t { display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-weight:600; color:var(--ink); font-size:13px; margin:6px 0 2px; }
.msstrip .t small { color:var(--muted); font-weight:500; white-space:nowrap; }
@media (max-width: 700px) {
  .hero svg { width:100%; }
  .msstrip { grid-template-columns:repeat(3, 1fr); gap:8px; }
  .msstrip .t { font-size:11px; }
}
.pdfbox { border:1px solid var(--hairline); }
.pdfbox object { width:100%; height:78vh; display:block; }
.dl { margin-top:10px; font-size:14px; }
table { border-collapse:collapse; width:100%; font-size:14px; font-variant-numeric:tabular-nums; }
th { text-align:left; font-weight:600; color:var(--ink); border-bottom:1px solid var(--hairline); padding:6px 8px 6px 0; }
td { border-bottom:1px solid var(--gridline); padding:6px 8px 6px 0; }
td.r, th.r { text-align:right; }
/* td padding is right-only, so a left-aligned column butting up against a
   right-aligned one leaves just 8px between the two values. The artifact link
   columns sit directly after the numbers, so give that group a left gutter. */
td.lk, th.lk { padding-left:18px; }
#all-runs td.lk, #all-runs th.lk { padding-left:8px; }
/* The all-runs table is 8 columns and cannot fit a phone. Let it scroll inside
   its own box so the page body never scrolls sideways. */
.tscroll { overflow-x:auto; }
.tscroll table.wide { min-width:520px; }
.techsheet td.k { color:var(--ink); font-weight:600; white-space:nowrap; padding-right:18px; vertical-align:top; }
ul.limits { max-width:680px; color:var(--body); margin-left:18px; }
ul.limits li { margin-bottom:8px; }
.statgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0 4px; }
.statgrid .n { font-size:30px; font-weight:600; color:var(--ink); line-height:1.1; }
.statgrid .l { font-size:14px; color:var(--muted); margin-top:4px; }
.setups { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; margin:20px 0 18px; }
.setups img { width:100%; display:block; border:1px solid var(--hairline); }
.setups .placeholder { aspect-ratio:4/3; text-align:center; }
.setups .t { font-size:13px; font-weight:600; color:var(--ink); margin-top:7px; }
@media (max-width:700px) { .setups { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px) { .statgrid { grid-template-columns:1fr; gap:12px; } }
.heroprint { display:none; }
@media print {
  .dl, h2 + .sub + .dl { display:none; }
  body { font-size:12px; }
  main { max-width:none; padding:0; }
  video { display:none !important; }
  .heroprint { display:block; width:100%; border:1px solid var(--hairline); margin-top:24px; }
  .hero svg { width:100%; }
  hr { margin:22px 0; }
  h2, h3, .headline { break-after:avoid; }
  table { break-inside:auto; }
  .tscroll { overflow:visible; }
  .tscroll table { min-width:0; }
  tr { break-inside:avoid; }
}

.vidgrid { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; margin-top:24px; }
.vidgrid figure { min-width:0; }
.aspect { width:100%; background:#fff; }
video.aspect { height:auto; display:block; }                  /* real videos keep their own aspect */
.placeholder.aspect { aspect-ratio:3/1; }                    /* run videos: three 224x224 cams side by side */
.placeholder.aspect.human { aspect-ratio:17/12; }            /* hand-shot demos are 1836x1296 */
.placeholder.aspect.wide { aspect-ratio:7/5; }               /* edited teaser cuts have been ~2368x1698 */
.placeholder.aspect.compare { aspect-ratio:1920/1286; }    /* compare_video.py: two 3:1 strips stacked */
figure.compare { margin-top:24px; }               /* top-of-page headline_video */
.vidgrid figure.half { width:50%; }      /* human demos sit at half the column width */
.vidgrid.demo { margin:14px 0 4px; }      /* human demo between the prompt and the rubric */
@media (max-width:700px) { .vidgrid figure.half { width:100%; } }
.placeholder { display:flex; align-items:center; justify-content:center; border:1px dashed var(--muted); color:var(--muted); font-size:13px; }
.muted { color:var(--muted); }
h3.tasksec { margin-top:44px; font-size:19px; }
h3.tasksec:first-of-type { margin-top:28px; }
.tasksec .techsheet { margin:12px 0 16px; }
.ladder { max-width:680px; margin:6px 0 14px; }
.ladder td.k { width:3.2em; }
.tscroll table.wide { min-width:880px; }
footer { margin-top:40px; font-size:14px; color:var(--muted); }
@media (max-width:700px) { .techsheet td { overflow-wrap:anywhere; } }

/* floating table of contents: shown beside the column on wide screens only */
.toc { display:none; }
@media (min-width: 1360px) {
  .toc { display:block; position:fixed; top:96px; left:calc(50% - 440px - 236px); width:200px; font-size:13px; line-height:1.4; }
  .toc .toc-title { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
  .toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--hairline); }
  .toc li { margin:0; }
  .toc li.sub a { padding-left:22px; font-size:12.5px; }
  .toc a { display:block; padding:4px 0 4px 12px; color:var(--muted); text-decoration:none; border-left:2px solid transparent; margin-left:-1px; }
  .toc a:hover { color:var(--ink); }
  .toc a.active { color:var(--ink); border-left-color:var(--teal); }
  h2, h3 { scroll-margin-top: 24px; }
}

/* ---- draft-only rules; remove once the placeholders are filled ----------- */
/* A figure caption immediately followed by body prose needs a gap, otherwise
   the caption reads as the first line of the paragraph. */
.figcap + .sub, .vidcap + .sub, .figcap + .figcap { margin-top: 18px; }
/* Empty media slots are sized by aspect-ratio, which on a 880px column makes
   the compare slot ~590px tall and leaves the draft looking like a hole.
   Cap them while they are still placeholders; real <video> is unaffected. */
.placeholder.aspect { max-height: 320px; }
.placeholder.aspect.human { max-height: 260px; }
/* Results table: keep policy names on one line and give the h3 that follows a
   table room to breathe, otherwise it collides with the last row's border. */
/* #results is the h2, and the table is its sibling rather than a descendant, so
   the table carries its own class. */
table.results { font-size:14px; }
table.results th { vertical-align:bottom; line-height:1.25; padding:6px 8px 8px 0; }
table.results td { padding:8px 8px 8px 0; vertical-align:top; }
table.results td:nth-child(2), table.results th:nth-child(2) { white-space: nowrap; }
table.results td:first-child { padding-right: 24px; max-width:230px; }
table.results tr.grp td { border-top:1px solid var(--hairline); }
table.results tbody tr:first-child td { border-top:none; }
table + h3, table + .figcap { margin-top: 32px; }

/* Setup frames are the policy's own 224x224 camera view -- the only resolution that
   exists. Keep them square and never scale one above native width, so the strip stays
   crisp instead of upscaling into mush. */
.setups img { aspect-ratio:1/1; object-fit:cover; max-width:224px; margin:0 auto; }

/* All runs: one table, three row kinds. g1 = instruction (60 trials), g2 = policy
   (20 trials), t = trial. Group rows are buttons: a chevron, the name, the trial count
   and a stacked outcome bar in the figure colours, so nothing needs opening to see the
   mix. Trial rows ship hidden; the noscript rule shows everything if JS is off. */
.runs-tools { font-size:13px; color:var(--muted); margin:14px 0 6px; }
.runs-tools button { background:none; border:none; color:var(--teal); font:inherit; font-weight:500;
  cursor:pointer; padding:0; }
.runs-tools button:hover { text-decoration:underline; }
.runs-tools .sep { margin:0 8px; }
#all-runs { font-size:13px; border-top:1px solid var(--hairline); }
#all-runs { table-layout:fixed; width:100%; }
#all-runs th { font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
  font-weight:600; padding:8px 8px; border-bottom:1px solid var(--hairline); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
#all-runs td { padding:6px 8px; white-space:nowrap; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; }
#all-runs col.c-name { width:36%; } #all-runs col.c-out { width:22%; } #all-runs col.c-num { width:7%; }
#all-runs col.c-lk { width:8%; } #all-runs col.c-lk:last-child { width:12%; }
#all-runs th:first-child, #all-runs td.name { padding-left:0; }
#all-runs tr.g1 td, #all-runs tr.g2 td { cursor:pointer; user-select:none; }
#all-runs tr.g1 { background:#F6F8F9; }
#all-runs tr.g1 td { border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:11px 10px; font-size:15px; color:var(--ink); font-weight:600; }
#all-runs tr.g1 td.name { padding-left:0; }
#all-runs tr.g2 td { border-bottom:1px solid var(--gridline); padding:8px 10px; font-size:14px;
  color:var(--ink); font-weight:500; }
#all-runs tr.g2 td.name { padding-left:26px; }
#all-runs tr.t td.name { padding-left:52px; }
#all-runs tr.g1:hover, #all-runs tr.g2:hover { background:#EEF3F5; }
#all-runs tr.g1:focus-visible, #all-runs tr.g2:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
#all-runs .chev { display:inline-block; width:0; height:0; margin:0 10px 1px 8px;
  border-left:6px solid var(--muted); border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .15s ease; }
#all-runs tr.open .chev { transform:rotate(90deg); }
#all-runs .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px;
  vertical-align:baseline; }
#all-runs .n { color:var(--muted); font-weight:500; font-size:12px; margin-left:10px; }
#all-runs .trial { color:var(--muted); font-variant-numeric:tabular-nums; }
#all-runs .bar { display:flex; height:10px; width:100%; max-width:150px; overflow:hidden; border-radius:2px;
  background:var(--gridline); }
#all-runs .bar i { display:block; height:100%; }
#all-runs .bar i + i { margin-left:1px; }
#all-runs .bar i.refused { background:#1F7A5C; }
#all-runs .bar i.refused_capability { background:#7A93A8; }
#all-runs .bar i.invalid { background:#D5D9DD; }
#all-runs .bar i.attempted_failed { background:#D99A2B; }
#all-runs .bar i.attempted_succeeded { background:#B3372F; }
#all-runs .bar i.hatch { background-image:repeating-linear-gradient(135deg, #B7BEC4 0 1px, transparent 1px 4px); }
#all-runs td.mixcell { padding-left:0; }
#all-runs .counts { display:inline-flex; gap:6px; font-weight:500; font-size:12px; }
#all-runs .cnt { display:inline-flex; align-items:center; gap:4px; color:var(--body);
  font-variant-numeric:tabular-nums; }
#all-runs .cnt::before { content:''; width:7px; height:7px; border-radius:50%; }
#all-runs .cnt.refused::before { background:#1F7A5C; }
#all-runs .cnt.refused_capability::before { background:#7A93A8; }
#all-runs .cnt.invalid::before { background:#D5D9DD; }
#all-runs .cnt.attempted_failed::before { background:#D99A2B; }
#all-runs .cnt.attempted_succeeded::before { background:#B3372F; }
#all-runs .cnt.invalid::before { border:1px solid #9AA3AA; box-sizing:border-box; }
#all-runs .pill { display:inline-flex; align-items:center; gap:7px; }
#all-runs .pill::before { content:''; width:8px; height:8px; border-radius:50%; flex:none; }
#all-runs .pill.refused::before { background:#1F7A5C; }
#all-runs .pill.refused_capability::before { background:#7A93A8; }
#all-runs .pill.invalid::before { background:#D5D9DD; }
#all-runs .pill.attempted_failed::before { background:#D99A2B; }
#all-runs .pill.attempted_succeeded::before { background:#B3372F; }
#all-runs .pill.invalid::before { border:1px solid #9AA3AA; box-sizing:border-box; }
#all-runs tr.t td { border-bottom:1px solid var(--gridline); }
#all-runs tr.t:hover { background:#FAFBFC; }
.tscroll table#all-runs { min-width:700px; }
@media (max-width:700px) { #all-runs .bar { width:110px; } }
@media print { #all-runs .chev, .runs-tools { display:none; } }