:root { color-scheme: light dark; --bg:#fff; --fg:#16181d; --mut:#666c78;
        --line:#e3e6ea; --card:#f7f8fa; --ok:#128a4d; --bad:#c0392b; --acc:#2f6fd0;
        --cs:#2a78d6; --en:#eb6834; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#e6e8ec; --mut:#98a0ad; --line:#2a2e36;
          --card:#1b1e24; --ok:#3fbc7b; --bad:#e8705f; --acc:#6aa6f5;
          --cs:#3987e5; --en:#d95926; } }
* { box-sizing:border-box; }
body { margin:0; padding:0 1.4rem 3rem; background:var(--bg); color:var(--fg);
       font:14px/1.5 ui-sans-serif,-apple-system,Segoe UI,Roboto,sans-serif; }
h1 { font-size:1.3rem; margin:0 0 .2rem; }
h2 { font-size:1rem; margin:1.8rem 0 .5rem; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
.sub { color:var(--mut); margin-bottom:1rem; }
.sub.small { font-size:.82rem; margin:.4rem 0 0; }
.dim { color:var(--mut); }
.empty { color:var(--mut); font-style:italic; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }

/* Header + tabs. The tab strip sticks: the benchmark browsers are long, and
   having to scroll back up to change benchmark is the one navigation cost that
   would be paid on every single comparison. */
header { position:sticky; top:0; z-index:5; background:var(--bg);
         padding:1.2rem 0 0; border-bottom:1px solid var(--line); }
nav.tabs { display:flex; flex-wrap:wrap; gap:.15rem; margin-top:.7rem; }
.tabbtn { appearance:none; border:0; background:none; cursor:pointer; color:var(--mut);
          font:inherit; font-size:.86rem; padding:.45rem .7rem; border-radius:6px 6px 0 0;
          border-bottom:2px solid transparent; }
.tabbtn:hover { color:var(--fg); background:var(--card); }
.tabbtn.on { color:var(--fg); font-weight:600; border-bottom-color:var(--acc); }
.tabpane { display:none; padding-top:1rem; } .tabpane.on { display:block; }

/* Dense by default: with both reasoning conditions plus the published
   baselines a comparison row carries a dozen-odd numbers, and the table only
   works if a whole row is readable without horizontal scrolling. */
table { border-collapse:collapse; width:100%; margin-bottom:.6rem; }
th,td { text-align:left; padding:.2rem .42rem; border-bottom:1px solid var(--line);
        vertical-align:top; }
th { color:var(--mut); font-weight:600; font-size:.7rem; white-space:nowrap; }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
.wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px;
        background:var(--card); padding:.2rem .45rem; font-size:.92rem; }
.ok { color:var(--ok); font-weight:600; } .bad { color:var(--bad); font-weight:600; }
pre { white-space:pre-wrap; word-break:break-word; margin:.3rem 0;
      font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
.pill { display:inline-block; padding:.05rem .45rem; border-radius:999px;
        background:var(--line); color:var(--mut); font-size:.75rem; }
.notes { color:var(--mut); font-size:.82rem; margin:.2rem 0 1rem; padding-left:1.1rem; }
.notes li { margin-bottom:.2rem; }

/* Published-baseline columns. Shading separates "we measured this" from "the
   paper reported this", but never carries the distinction alone -- the column
   header names the model and a rule marks where our columns end. */
td.ref,th.ref { background:var(--card); color:var(--mut); }
td.refstart,th.refstart { border-left:2px solid var(--line); }
td.think { font-weight:600; }
td.nothink,th.nothink { color:var(--mut); font-weight:400; }
td.pairstart,th.pairstart { border-left:1px solid var(--line); }
th.grp { text-align:center; color:var(--fg); font-size:.8rem; }
.mutedkey { color:var(--mut); font-weight:600; }

/* Reasoning-length charts. Two categorical slots of the validated default
   palette (blue/orange: adjacent CVD dE 9.1, normal-vision 19.6) carrying
   language, which is the only thing colour encodes here -- the model is named
   in the row and the condition is named in the pane. Every bar is
   direct-labelled and the table under <details> repeats all of it. */
.viz { margin-bottom:1rem; }
.legend { display:flex; flex-wrap:wrap; gap:1rem; margin:.2rem 0 .9rem;
          font-size:.82rem; color:var(--mut); }
.sw { display:inline-block; width:10px; height:10px; border-radius:2px;
      margin-right:.35rem; }
.sw.cs,.bar.cs { background:var(--cs); } .sw.en,.bar.en { background:var(--en); }
.chartgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));
             gap:.7rem; }
.chartblock { border:1px solid var(--line); border-radius:8px; background:var(--card);
              padding:.5rem .7rem .6rem; }
.chartblock.wide { margin-bottom:.7rem; }
.chartblock h3 { font-size:.78rem; margin:0 0 .5rem; color:var(--fg); font-weight:600;
                 text-transform:uppercase; letter-spacing:.03em;
                 display:flex; justify-content:space-between; gap:1rem; }
.chartblock h3 .scale { color:var(--mut); font-weight:400; text-transform:none;
                        letter-spacing:0; font-variant-numeric:tabular-nums; }
.panes { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.pane h4 { font-size:.72rem; margin:0 0 .35rem; color:var(--mut); font-weight:600; }
.pane.nothink { opacity:.92; }
.mgrp { margin-bottom:.45rem; }
.mgrp .nm { font-size:.76rem; color:var(--mut); overflow:hidden; white-space:nowrap;
            text-overflow:ellipsis; }
.brow { display:grid; grid-template-columns:1.3rem 1fr 3.4rem; align-items:center;
        gap:.35rem; margin-top:2px; }
.brow .lg { font-size:.68rem; color:var(--mut); }
.track { background:var(--line); border-radius:3px; height:9px; display:block; }
.bar { height:9px; border-radius:0 4px 4px 0; min-width:2px; display:block; }
.bval { font-variant-numeric:tabular-nums; font-size:.72rem; text-align:right;
        color:var(--fg); }
details.tele { margin-top:1.2rem; } details.tele summary { cursor:pointer; color:var(--mut); }

/* Sample browser. */
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
            margin:.2rem 0 .9rem; }
.ctl { display:flex; align-items:center; gap:.35rem; }
.ctl > .lbl { font-size:.72rem; color:var(--mut); text-transform:uppercase;
              letter-spacing:.03em; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px;
       overflow:hidden; }
.seg button { appearance:none; border:0; background:var(--bg); color:var(--mut);
              font:inherit; font-size:.8rem; padding:.2rem .6rem; cursor:pointer; }
.seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--acc); color:#fff; }
.chip { appearance:none; font:inherit; font-size:.8rem; padding:.15rem .55rem;
        border-radius:999px; border:1px solid var(--line); background:var(--bg);
        color:var(--mut); cursor:pointer; }
.chip.on { border-color:var(--acc); color:var(--fg); background:var(--card); }
.chip .dotk { display:inline-block; width:7px; height:7px; border-radius:999px;
              background:var(--mut); margin-right:.35rem; }
.chip.lite { border-style:dashed; font-size:.75rem; }
.chip.lite:hover { color:var(--fg); }
.chip.on .dotk { background:var(--acc); }
.chip.nothink { font-style:italic; }
input.q { font:inherit; font-size:.82rem; padding:.2rem .5rem; border-radius:6px;
          border:1px solid var(--line); background:var(--bg); color:var(--fg);
          min-width:14rem; }
.pager { display:flex; align-items:center; gap:.6rem; margin:.6rem 0;
         font-size:.82rem; color:var(--mut); }
.pager button { appearance:none; font:inherit; font-size:.82rem; padding:.15rem .6rem;
                border:1px solid var(--line); border-radius:6px; background:var(--bg);
                color:var(--fg); cursor:pointer; }
.pager button[disabled] { opacity:.4; cursor:default; }
.card { border:1px solid var(--line); border-radius:10px; background:var(--card);
        padding:.6rem .8rem .8rem; margin-bottom:.9rem; }
.chead { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem;
         font-size:.78rem; color:var(--mut); }
.chead .idx { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.lbl { font-size:.68rem; color:var(--mut); text-transform:uppercase;
       letter-spacing:.04em; margin-bottom:.1rem; }
.qbox,.tbox { border-left:2px solid var(--line); padding-left:.6rem; margin-bottom:.5rem; }
.outs { display:grid; gap:.6rem;
        grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); }
.out { border:1px solid var(--line); border-radius:8px; background:var(--bg);
       padding:.4rem .55rem; min-width:0; }
.out.nothink { border-style:dashed; }
.ohead { display:flex; align-items:center; gap:.4rem; font-size:.78rem;
         margin-bottom:.2rem; }
.ohead .tag { font-weight:600; }
.ohead .cond { color:var(--mut); font-size:.72rem; }
.ox { font-size:.72rem; color:var(--mut); margin-top:.25rem;
      font-variant-numeric:tabular-nums; }
.clamp { max-height:15rem; overflow:hidden; position:relative; }
.clamp::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2.4rem;
                background:linear-gradient(transparent,var(--bg)); }
.out .clamp::after { background:linear-gradient(transparent,var(--bg)); }
.qbox .clamp::after,.tbox .clamp::after { background:linear-gradient(transparent,var(--card)); }
.clamp.open { max-height:none; } .clamp.open::after { display:none; }
.more { appearance:none; border:0; background:none; color:var(--acc); font:inherit;
        font-size:.75rem; cursor:pointer; padding:.1rem 0; }
.strip { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; }
.stat { border:1px solid var(--line); border-radius:8px; background:var(--card);
        padding:.35rem .6rem; flex:1 1 15rem; max-width:24rem; }
.stat .t { font-size:.74rem; color:var(--mut); }
.stat .v { font-size:1.05rem; font-variant-numeric:tabular-nums; }
.stat .m { font-size:.7rem; color:var(--mut); }
.loading { color:var(--mut); padding:1rem 0; }

/* --- static build ------------------------------------------------------- */
.skel { border:1px solid var(--line); border-radius:10px; background:var(--card);
        height:9rem; margin-bottom:.9rem; opacity:.5;
        animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.35; } 50% { opacity:.6; } }
.clipnote { color:var(--mut); font-size:.72rem; font-style:italic; margin-top:.25rem; }
footer { color:var(--mut); font-size:.8rem; margin-top:2.5rem;
         border-top:1px solid var(--line); padding-top:.8rem; }