/* Generated from index.html by bench/render.sh. Do not edit. */
/* Light palette is the complete set; the dark blocks below redefine only
     tokens, so nothing is ever defined solely behind a media query. */
  :root {
    color-scheme: light;
    --ground:   #f7f8f9;
    --surface:  #ffffff;
    --sunken:   #f1f3f5;
    --hairline: #e3e6ea;
    --grid:     #edf0f3;
    --ink:      #12151a;
    --ink-2:    #5a626d;
    --ink-3:    #868e99;
    --accent:   #2a78d6;
    --good:     #008300;
    --good-bg:  #e6f2e6;
    --crit:     #e34948;
    --crit-bg:  #fbeaea;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ground:   #0f1216;
      --surface:  #171b21;
      --sunken:   #1d2229;
      --hairline: #262c34;
      --grid:     #222831;
      --ink:      #f2f4f7;
      --ink-2:    #a6aeb9;
      --ink-3:    #767e89;
      --accent:   #3987e5;
      --good:     #4caf50;
      --good-bg:  #16281a;
      --crit:     #e66767;
      --crit-bg:  #2b1a1a;
      --series-1: #3987e5;
      --series-2: #d95926;
      --series-3: #199e70;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ground:   #0f1216;
    --surface:  #171b21;
    --sunken:   #1d2229;
    --hairline: #262c34;
    --grid:     #222831;
    --ink:      #f2f4f7;
    --ink-2:    #a6aeb9;
    --ink-3:    #767e89;
    --accent:   #3987e5;
    --good:     #4caf50;
    --good-bg:  #16281a;
    --crit:     #e66767;
    --crit-bg:  #2b1a1a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
  }

  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 2.75rem 1.25rem 5rem;
    background: var(--ground);
    color: var(--ink);
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

  /* Numbers are the content here, so every measured value is set in mono and
     tabular so columns line up. */
  .num { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
         font-variant-numeric: tabular-nums; }

  .eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3);
  }
  header { display: flex; flex-direction: column; gap: .35rem; }
  h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.018em; margin: 0;
       text-wrap: balance; }
  .lede { color: var(--ink-2); margin: 0; max-width: 62ch; }
  .meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center;
          margin-top: .5rem; }

  .chip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--hairline); border-radius: 999px;
    padding: .17rem .6rem; font-size: .75rem; color: var(--ink-2);
    background: var(--surface);
  }
  .chip.ok   { color: var(--good); background: var(--good-bg); border-color: transparent; }
  .chip.bad  { color: var(--crit); background: var(--crit-bg); border-color: transparent; }
  .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

  .readout {
    display: grid; gap: 1px; background: var(--hairline);
    border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  }
  .cell { background: var(--surface); padding: .9rem 1rem 1rem; }
  .cell .k { font-family: "IBM Plex Mono", monospace; font-size: .6875rem;
             letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .cell .v { font-size: 1.55rem; font-weight: 500; line-height: 1.2; margin-top: .3rem;
             font-family: "IBM Plex Mono", ui-monospace, monospace;
             font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .cell .d { font-size: .75rem; color: var(--ink-3); margin-top: .2rem; line-height: 1.4; }

  .card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 12px; padding: 1.15rem 1.15rem .9rem;
    display: flex; flex-direction: column; gap: .1rem;
  }
  .card h2 { font-size: 1.0625rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
  .note { color: var(--ink-2); font-size: .8125rem; margin: .3rem 0 0; max-width: 78ch; }
  .warn { color: var(--crit); font-size: .8125rem; margin: .4rem 0 0; }
  code { font-family: "IBM Plex Mono", monospace; font-size: .95em;
         background: var(--sunken); padding: .05em .3em; border-radius: 4px; }

  .explained { text-decoration: underline dotted var(--ink-3);
    text-underline-offset: 3px; cursor: help; }
  .legend { display: flex; flex-wrap: wrap; gap: .9rem; margin: .75rem 0 .1rem; }
  .legend span { display: inline-flex; align-items: center; gap: .4rem;
                 font-size: .8125rem; color: var(--ink-2); }
  .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

  .plot { position: relative; width: 100%; }
  svg { display: block; width: 100%; height: auto; }
  .tip {
    position: absolute; pointer-events: none; opacity: 0; transition: opacity .08s linear;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
    padding: .5rem .6rem; font-size: .8125rem;
    box-shadow: 0 6px 18px rgb(18 21 26 / 14%); white-space: nowrap; z-index: 5;
  }
  .tip .hd { font-family: "IBM Plex Mono", monospace; font-size: .6875rem;
             letter-spacing: .08em; text-transform: uppercase;
             color: var(--ink-3); margin-bottom: .3rem; }
  .tip .row { display: flex; align-items: center; gap: .4rem; color: var(--ink-2); }
  .tip .row b { color: var(--ink); font-weight: 500;
                font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

  .scroll { overflow-x: auto; margin-top: .75rem; }
  table { border-collapse: collapse; width: 100%; font-size: .8125rem; }
  th, td { text-align: right; padding: .42rem .6rem; white-space: nowrap;
           border-bottom: 1px solid var(--hairline); }
  td { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  th { font-family: "IBM Plex Mono", monospace; font-size: .6875rem; font-weight: 500;
       letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
       position: sticky; top: 0; background: var(--surface); }
  th:first-child, td:first-child { text-align: left; }
  tbody tr:last-child td { border-bottom: none; }

  /* Status is a pill, so it never rests on color alone. */
  .pill { display: inline-block; border-radius: 999px; padding: .05rem .45rem;
          font-size: .75rem; font-weight: 500; }
  .pill.ok  { color: var(--good); background: var(--good-bg); }
  .pill.bad { color: var(--crit); background: var(--crit-bg); }

  details > summary {
    cursor: pointer; color: var(--ink-2); font-size: .875rem;
    padding: .1rem 0; border-radius: 4px;
  }
  details > summary:focus-visible,
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  footer { color: var(--ink-3); font-size: .8125rem; }
  a { color: var(--accent); }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }