@import url("../tokens.css?v=0c0f1954c9a6fc95");

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--fg); font-family: var(--mono); }
#performance { width: 960px; max-width: 100%; margin: 0 auto; }
#performance svg { display: block; width: 100%; height: auto; font-family: var(--mono); fill: var(--fg); }
.canvas { fill: var(--page); }
.heading { font-size: 25px; font-weight: 500; }
.subtitle { font-size: 14px; }
.legend { font-size: 13px; }
.model { font-size: 13px; }
.test-time { font-size: 10px; }
.value { font-size: 15px; }
.best { font-weight: 700; }
.advantage { fill: var(--chart-accent); }
.loss { fill: var(--del); }
.delta { font-size: 18px; font-weight: 700; }
.bar-evot { fill: var(--chart-accent); }
.bar-pi { fill: #6c777c; }
.bar-dsh { fill: #414c52; }
.tick, .small { font-size: 12px; }
.footnote { font-size: 11px; }
.muted { fill: var(--muted); }
.grid { stroke: var(--muted); stroke-opacity: .18; }
.divider { stroke: var(--border); }
svg a { cursor: pointer; }
svg a:hover text, svg a:focus text { fill: var(--fg); text-decoration: underline; }
svg a:focus-visible { outline: 1px solid var(--fg); }
.status { min-height: 520px; padding: 40px; font-size: 14px; line-height: 1.8; }
.status p { color: var(--muted); }
.status button { font: inherit; background: var(--btn); color: var(--btn-ink); border: 0; padding: 8px 16px; cursor: pointer; }
.status button:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }