/* Embedded research figures: match the article without sharing chart IDs or globals. */
:root { color-scheme: light; --bg:#edf1f7; --surface:#edf1f7; --ink:#0E2F7E; --ink-2:#405a83; --muted:#61728c; --line:#ccd5e2; --grid:#dce3ed; --pos:#36756b; --axis:#b4c1d4; --tile:#f7f9fc; --tip-bg:#fff; --base:#7098c4; --best:#0E2F7E; --ref:#929cad; --e-kimi:#0E2F7E; --e-glm:#b17b46; --e-deepseek:#448a84; --e-qwen38:#996c8e; --e-qwen36:#8472ab; --e-nemotron:#84956c; }
* { box-sizing:border-box; }
/* iOS enlarges text it judges too small for the screen; the figures set their own sizes. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { padding:0; margin:0; background:var(--bg); font-family:'Inter Tight',system-ui,sans-serif; }
.wrap { max-width:none; gap:20px; }
header { display:flex; flex-direction:column; gap:8px; }
h1 { font-size:22px; font-weight:500; line-height:1.3; margin:0; letter-spacing:-.015em; text-wrap:initial; }
.eyebrow { font:13px/1.6 'Inter Tight',system-ui,sans-serif; letter-spacing:0; text-transform:none; color:var(--ink-2); }
.card { border:0; border-radius:0; background:transparent; padding:0 0 8px; min-width:0; }
.scroll { overflow:visible; padding:8px 0 12px; }
.scroll:focus-visible { outline:2px solid var(--base); outline-offset:-2px; }
#chart { min-width:0; width:100%; height:auto; display:block; }
.legend { padding-left:0 !important; gap:8px 18px; margin-bottom:12px; }
.tip { max-width:min(340px, calc(100vw - 16px)); border-radius:6px; box-shadow:0 4px 16px #0e2f7e18; }
/* Matches the article's figure notes (.quality-note): 13px, its --ink-2, 8px below the chart. */
.chart-note { margin:-12px 0 0; font-size:13px; line-height:1.6; color:#1f3f8e; }
.scroll-hint { display:none; font-size:12px; color:var(--muted); margin:0 0 8px; }
body[data-chart="arcwise-rl-growth"] #chart { min-width:0; transform-origin:0 0; }  /* embed.js scales it from the top left */
body[data-chart="arcwise-rl-growth"] .row { grid-template-columns:184px minmax(250px,1fr) 48px 60px; column-gap:12px; }
body[data-chart="arcwise-rl-growth"] .head { font-size:10px; }
body[data-chart="arcwise-rl-growth"] .name { font-size:13px; gap:7px; }
/* One line per model name (Scott 2026-10-07): "Nemotron 3.5 Lightning" and its logo need 170px of the 184px column. */
body[data-chart="arcwise-rl-growth"] .nm { white-space:nowrap; }
body[data-chart="arcwise-rl-growth"] .num { font-size:12px; }
body[data-chart="arcwise-rl-growth"] .legend { font-size:12px; gap:6px 12px; }
body[data-chart="arcwise-rl-growth"] .val { font-size:11px; }
@media(max-width:759px) { h1 { font-size:20px; } }

/* Keep token usage in hover details, out of the Arcwise comparison columns. */
body[data-chart="arcwise-rl-growth"] .token-column,
body[data-chart="arcwise-rl-growth"] .row:not(.head) > :nth-child(n+5) { display:none; }
/* Gain and the gap to the human proxy are in every row's hover details (Scott 2026-10-02: drop those columns). */
body[data-chart="arcwise-rl-growth"] .row { grid-template-columns:184px minmax(250px,1fr) 18px; }  /* the empty 18px track keeps the 100 axis label inside */
body[data-chart="arcwise-rl-growth"] .row.head > :nth-child(n+2),
body[data-chart="arcwise-rl-growth"] .row:not(.head) > :nth-child(n+3) { display:none; }

/* In a switchable card (?card): the card supplies the title, and the chart takes the card's background. */
body.in-card { --bg:#f3f6fa; --surface:#f3f6fa; }
body.in-card header h1 { display:none; }