/* Write-up site. Colours are tokens. Always light: the page stays white regardless of the OS theme. */
:root {
  color-scheme: only light;
  --bg: #ffffff;
  --fg: #2b2b29;
  --fg-2: #52514e;
  --muted: #898781;
  --rule: #e6e5df;
  --axis: #c3c2b7;
  --panel: #f7f6f2;
  --code-bg: #f4f3ef;
  --link: #1c5cab;
  --accent: #2a78d6;
  --viz-blue: #2a78d6;   /* false success, positive valence */
  --viz-red: #e34948;    /* not possible, negative valence  */
  --viz-mid: #f0efec;
  --viz-c1: #2a78d6; --viz-c2: #eb6834; --viz-c3: #1baf7a;
  --th-bg: #edf3fb;      /* table header: a light step of the blue ramp */
  --band: #fafaf8;       /* alternate table rows */
  --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 18px/1.55 var(--serif);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { max-width: 720px; margin: 0 auto; padding: 44px 16px 72px; }
p { margin: 0 0 14px; }

/* Title block */
.hero h1 { font: 500 2.2rem/1.15 var(--serif); letter-spacing: -0.01em; margin: 0 0 10px; color: #1a1a18; }
/* Authorship: a floating card that shrinks to a row of faces */
.people { position: fixed; top: 64px; right: 24px; z-index: 25; font-family: "Nunito", -apple-system, "Segoe UI", sans-serif; }
.people-card { width: 252px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; padding: 16px 18px 14px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px;
               box-shadow: 0 10px 30px rgba(20, 20, 18, .08), 0 1px 3px rgba(20, 20, 18, .05); font-size: 0.84rem;
               transform-origin: top right; transition: opacity .18s ease, transform .18s ease; }
.people-card section + section { margin-top: 14px; }
.people-close { position: sticky; top: 0; float: right; margin: -8px -10px 0 0; width: 24px; height: 24px; border: 0; border-radius: 6px;
                background: transparent; color: var(--muted); font: 700 16px/1 "Nunito", sans-serif; cursor: pointer; }
.people-close:hover { background: var(--panel); color: var(--fg); }
.people .thanks { color: var(--fg-2); line-height: 1.55; }
.people .thanks p { margin: 0 0 6px; }
.people .thanks ul { margin: 0; padding-left: 1.05em; }
.people .thanks li { margin: 0 0 6px; padding-left: 2px; }
.people .thanks li::marker { color: var(--accent); }
.people .thanks strong { font-weight: 700; color: var(--fg); }
.people .sprint { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); line-height: 1.4; font-size: 0.72rem; }
.people .sprint p { margin: 5px 0 0; }
.people .sprint a { color: var(--link); }
.sprint-logo { display: inline-block; line-height: 0; }
.sprint-logo img { width: 96px; height: auto; opacity: .85; }
.side-head { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
             margin: 0 0 7px; }
.person { display: flex; align-items: center; gap: 10px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.person-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--fg); }
.author-links { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.icon-link { display: inline-flex; padding: 2px; border-radius: 6px; line-height: 0; }
.icon-link svg { width: 18px; height: 18px; }
.icon-link:hover { background: var(--panel); }
.hf-icon { font-size: 18px; line-height: 18px; }
.people-mini { display: none; align-items: center; padding: 4px 8px 4px 4px; border: 1px solid var(--rule); border-radius: 999px;
               background: #ffffff; box-shadow: 0 4px 14px rgba(20, 20, 18, .08); cursor: pointer; }
.people-mini img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #ffffff; object-fit: cover; }
.people-mini img + img { margin-left: -10px; }
.people-mini::after { content: "+"; margin-left: 6px; font: 700 14px/1 "Nunito", sans-serif; color: var(--muted); }
.people-mini:hover { border-color: var(--accent); }
.people[data-state="min"] .people-card { display: none; }
.people[data-state="min"] .people-mini { display: inline-flex; }
@media (max-width: 900px) {
  .people { top: auto; bottom: 16px; right: 16px; }
  .people-card { transform-origin: bottom right; }
}
.hero .meta { font-size: 0.86rem; color: var(--muted); margin: 0 0 24px; }
.hero .meta a { color: var(--muted); }
.watch { font-size: 0.86rem; }

/* Headings: serif, tight */
h2, h3 { font-family: var(--serif); letter-spacing: -0.005em; scroll-margin-top: 20px; }
h2 { font-size: 1.5rem; font-weight: 500; color: #1a1a18; line-height: 1.25; margin: 38px 0 10px; padding-bottom: 6px;
     border-bottom: 1px solid var(--rule); }
h3 { font-size: 1.18rem; font-weight: 600; color: #1a1a18; line-height: 1.3; margin: 26px 0 8px; }

p, li { overflow-wrap: anywhere; }
a { color: var(--link); text-underline-offset: 2px; }
ul, ol { padding-left: 1.25em; margin: 0 0 14px; }
li + li { margin-top: 5px; }
strong { font-weight: 600; }

blockquote { margin: 12px 0; padding: 10px 16px; background: var(--panel); border-left: 3px solid var(--axis);
             border-radius: 0 8px 8px 0; color: var(--fg-2); }
blockquote p { margin: 4px 0; }

/* Code */
code { font: 0.84em/1.5 var(--mono); background: var(--code-bg); padding: 1px 4px; border-radius: 4px; }
pre { background: var(--code-bg); padding: 12px 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0 18px; }
pre code { background: none; padding: 0; font-size: 0.8rem; line-height: 1.5; }

/* Figures: images, tables and charts share one frame */
figure { margin: 18px 0 22px; }
figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; }
figcaption { margin-top: 8px; font-size: 0.86rem; line-height: 1.45; color: var(--muted); }
figcaption em { font-style: normal; }
figure.chart svg:not(.robot) { display: block; width: 100%; height: auto; }
.robot { width: 68px; height: 68px; display: block; }

/* Tables: compact, tinted header, banded rows */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; line-height: 1.38; font-variant-numeric: tabular-nums; }
th, td { padding: 5px 10px; text-align: left; vertical-align: top; }
th { background: var(--th-bg); color: #184f95; font-weight: 600; border-bottom: 1px solid #cde2fb; white-space: nowrap; }
tbody tr:nth-child(even) td { background: var(--band); }
td { border-bottom: 1px solid var(--rule); }
tbody tr:last-child td { border-bottom: 0; }
tr:has(> td > strong:only-child) td { background: var(--panel) !important; color: var(--fg-2); font-size: 0.8rem;
                                      letter-spacing: 0.02em; padding-top: 7px; }
td code { font-size: 0.8rem; }

/* Chat bubbles: shared by the opening illustration and the transcript panels */
.bubble { font: 0.8rem/1.5 var(--mono); padding: 8px 12px; border-radius: 10px; border: 1.5px solid #2b2b29;
          background: #ffffff; margin: 0 0 8px; }
.bubble .role { font-weight: 700; margin-right: 4px; }
.bubble code { background: none; padding: 0; font-size: inherit; }
.bubble.user { background: #eeede9; border-color: #b9b8b0; }
.bubble.tinted { background: color-mix(in srgb, var(--tint) 12%, #ffffff); border-color: var(--tint); }

/* Opening illustration */
.hero-fig { border: 1px solid var(--rule); border-radius: 12px; padding: 16px; background: #fcfcfb; }
.hero-fig .chat { max-width: 560px; margin: 0 auto 6px; }
.hero-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.hero-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-col .robot { margin: 6px 0 2px; }
.hero-name { font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.hero-col .bubble { text-align: left; width: 100%; flex: 1; }
.hero-stat { font-size: 0.82rem; color: var(--fg-2); line-height: 1.35; }
.hero-stat b { color: var(--tint); }
@media (max-width: 640px) { .hero-cols { grid-template-columns: 1fr; } }

/* Transcript panels (collapsible, in the style of Zhuang et al.'s write-up) */
details.transcript { border: 1px solid var(--rule); border-left: 4px solid var(--tint); border-radius: 8px;
                     background: #fcfcfb; margin: 10px 0; }
details.transcript summary { cursor: pointer; list-style: none; padding: 8px 12px; display: flex; flex-wrap: wrap;
                             gap: 4px 10px; align-items: baseline; font-size: 0.92rem; }
details.transcript summary::-webkit-details-marker { display: none; }
details.transcript summary::before { content: "▸"; color: var(--tint); font-size: 0.8rem; }
details.transcript[open] summary::before { content: "▾"; }
details.transcript[open] summary { border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--tint) 6%, #ffffff); }
.t-id { font: 700 0.78rem/1 var(--mono); color: #fff; background: var(--tint); padding: 3px 6px; border-radius: 4px; }
.t-label { font-weight: 600; }
.t-sum { color: var(--fg-2); }
.t-body { padding: 12px 14px 4px; }
.t-note { font-size: 0.84rem; color: var(--muted); margin: 2px 0 10px; }

/* "Browse the eval logs" links */
p.browse { margin: -8px 0 20px; }
p.browse a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
             border: 1px solid var(--rule); background: var(--panel); color: var(--fg); text-decoration: none;
             font-size: 0.84rem; font-weight: 600; }
p.browse a::before { content: "▸"; color: var(--accent); }
p.browse a:hover { border-color: var(--accent); }

/* Contents: a floating card on the left, folding to a small pill */
.toc { position: fixed; top: 64px; left: 24px; width: 232px; max-height: calc(100vh - 88px); overflow-y: auto; z-index: 20;
       padding: 12px 10px 12px 12px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px;
       box-shadow: 0 10px 30px rgba(20, 20, 18, .08), 0 1px 3px rgba(20, 20, 18, .05);
       font-size: 0.82rem; line-height: 1.35; scrollbar-width: thin; display: none; }
.toc-open .toc { display: block; }
.toc-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px 8px;
            font-family: "Nunito", -apple-system, sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--muted); }
.toc-close { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted);
             font: 700 16px/1 "Nunito", sans-serif; cursor: pointer; }
.toc-close:hover { background: var(--panel); color: var(--fg); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc li + li { margin-top: 1px; }
.toc a { display: block; padding: 3px 8px; border-left: 2px solid transparent; color: var(--fg-2); text-decoration: none;
         border-radius: 0 4px 4px 0; }
.toc a:hover { color: var(--fg); background: var(--panel); }
.toc li.l2 > a { font-weight: 600; color: var(--fg); margin-top: 3px; }
.toc li.l3 > a { padding-left: 18px; font-size: 0.78rem; }
.toc li.l2 > ol { display: none; }
.toc li.l2.current > ol, .toc li.l2:hover > ol { display: block; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); background: var(--th-bg); }
.toc-toggle { position: fixed; top: 64px; left: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
              padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: #ffffff; cursor: pointer;
              font: 700 0.76rem/1 "Nunito", -apple-system, sans-serif; color: var(--fg-2); box-shadow: 0 4px 14px rgba(20,20,18,.08); }
.toc-toggle:hover { border-color: var(--accent); color: var(--fg); }
.toc-open .toc-toggle { display: none; }
@media (max-width: 900px) { .toc-toggle, .toc { top: 12px; left: 12px; } }

/* References */
#references + ol { font-size: 0.9rem; }

footer { max-width: 720px; margin: 0 auto; padding: 18px 16px 44px; border-top: 1px solid var(--rule);
         font-size: 0.84rem; color: var(--muted); }
footer a { color: var(--muted); }

@media (max-width: 560px) {
  body { font-size: 17.5px; }
  main { padding-top: 28px; }
  .hero h1 { font-size: 1.65rem; }
}