:root {
  color-scheme: light dark;

  --the-clearing: #ffffff;
  --the-heartwood: #1a1a1a;
  --the-understory: #4a4a4a;
  --the-lichen: #9a9a9a;
  --a-blush: #fce5e9;

  --them: #b3b3b3;
  --us: var(--green);

  --green-below: #102e17;
  --green: #2e713f;
  --green-above: #c4dfb0;
  --green-shade: #f4f6f4;
  --green-ink: var(--green-below);
  --green-bright: var(--green);
  --green-soft: #4c734b;

  --the-voice: "Faustina", Georgia, "Times New Roman", serif;
  --the-machine: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --a-whisper: 12px;
  --a-murmur: 12.5px;
  --speaking-softly: 14px;
  --speaking: 16px;
  --a-call: 18px;
  --a-name: 36px;
  --a-name-in-passing: 20px;
  --room-to-breathe: 1.6;

  --a-seed: 4px;
  --a-sprout: 8px;
  --a-twig: 12px;
  --a-branch: 16px;
  --a-bough: 20px;
  --a-grove: 48px;
  --open-sky: 64px;

  --as-far-as-the-eye-reads: 680px;
  --a-hairline: 1px;
  --attention: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --the-clearing: #121212;
    --the-heartwood: #ececea;
    --the-understory: #b8b8b5;
    --the-lichen: #5a5a58;
    --a-blush: #3a1218;
    --them: #6e6e6c;
    --us: var(--green-above);
    --green-shade: #1a1c1a;
    --green-ink: #dcebd4;
    --green-bright: var(--green-above);
    --green-soft: #adc99d;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--the-clearing);
  color: var(--the-heartwood);
  font-family: var(--the-voice);
  font-size: var(--speaking);
  line-height: var(--room-to-breathe);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

::selection {
  background: var(--a-blush);
  color: var(--the-heartwood);
}

main {
  max-width: calc(var(--as-far-as-the-eye-reads) + 2 * var(--a-bough));
  margin-inline: auto;
  padding: var(--open-sky) var(--a-bough);
}

h1 {
  margin: 0 0 var(--a-bough);
  font-size: var(--a-name);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
}

.rooted {
  display: flex;
  align-items: center;
  gap: var(--a-twig);
}

.rooted > .growth {
  position: relative;
  top: 0.05em;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-twig) var(--a-branch);
  margin-block-end: var(--a-bough);
}

.masthead > .rooted {
  flex: none;
}

.masthead h1 {
  margin: 0;
  font-size: clamp(28px, 9vw, var(--a-name));
}

.trail {
  display: flex;
  align-items: center;
  gap: var(--a-branch);
  white-space: nowrap;
}

.trail [aria-current] {
  font-weight: 500;
  text-decoration: none;
}

@media (max-width: 480px) {
  .masthead {
    flex-wrap: wrap;
  }

  .masthead .rooted {
    gap: var(--a-sprout);
  }

  .trail {
    gap: var(--a-twig);
    font-size: var(--speaking-softly);
  }
}

.deeper {
  margin-block-end: var(--a-grove);
}

.deeper .rooted {
  font-size: var(--a-name-in-passing);
  font-weight: 600;
  gap: var(--a-sprout);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
}

.growth {
  display: block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.growth.still {
  background: url("favicon.png") center / contain no-repeat;
}

h2 {
  margin: var(--a-grove) 0 var(--a-twig);
  padding-block-start: var(--a-bough);
  border-block-start: var(--a-hairline) solid var(--the-heartwood);
  font-size: var(--a-call);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p,
pre {
  margin: 0 0 var(--a-bough);
}

a {
  color: var(--the-heartwood);
  text-decoration: underline;
  text-decoration-color: var(--the-lichen);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--the-heartwood);
}

a[target="_blank"]::after {
  content: " ↗";
  color: var(--the-understory);
  font-size: 11px;
}

:where(a, [tabindex]):focus-visible {
  outline: var(--attention) solid var(--the-heartwood);
  outline-offset: 2px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-sprout);
  margin: 0 0 var(--a-bough);
  padding: 0;
  list-style: none;
  font-size: var(--speaking-softly);
}

.tag-list li {
  padding: var(--a-seed) var(--a-sprout);
  border: var(--a-hairline) solid var(--the-lichen);
}

.tag-list b {
  font-weight: 500;
}

.chart {
  --label-width: clamp(106px, 30vw, 220px);
  margin: 0 0 var(--a-bough);
}


.chart-context {
  margin: 0 0 var(--a-twig);
  color: var(--the-understory);
  font-size: var(--speaking-softly);
}

.chart-plot {
  display: flex;
  flex-direction: column;
}

.bars {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bars li {
  display: grid;
  grid-template-columns: var(--label-width) minmax(0, 1fr) 62px;
  align-items: center;
  gap: var(--a-twig);
  min-block-size: 32px;
  min-inline-size: 0;
}

.bar-label {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--speaking-softly);
  line-height: 1.35;
}

.them {
  --colour-of: var(--them);
}

.us {
  --colour-of: var(--us);
}

.bar-value {
  grid-column: 3;
  grid-row: 1;
  white-space: nowrap;
  text-align: end;
  color: var(--the-understory);
  font-size: var(--speaking-softly);
  line-height: 1.25;
}

.bar-value > span {
  display: inline;
}

.bar-track {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
}

.bar {
  display: block;
  inline-size: calc(var(--elapsed) * 100% / var(--range));
  block-size: 5px;
  background: var(--colour-of);
}

.bar.cuda {
  background: color-mix(in srgb, var(--colour-of) 82%, var(--the-clearing));
}

.bar-scale {
  display: flex;
  order: 1;
  justify-content: space-between;
  margin: var(--a-sprout) calc(62px + var(--a-twig)) 0 calc(var(--label-width) + var(--a-twig));
  padding-block-start: var(--a-sprout);
  border-block-start: var(--a-hairline) solid var(--the-lichen);
  color: var(--the-understory);
  font-size: var(--a-whisper);
  line-height: 1;
}

.benchmark-details > summary {
  min-block-size: var(--a-grove);
  padding-block: var(--a-twig);
  cursor: pointer;
}

.benchmark-details > summary:focus-visible {
  outline: var(--attention) solid var(--the-heartwood);
  outline-offset: var(--attention);
}

pre {
  overflow-x: auto;
  padding: var(--a-twig) var(--a-branch);
  background: var(--green-shade);
  color: var(--green-ink);
  font-family: var(--the-machine);
  font-size: var(--a-murmur);
  font-variant-ligatures: none;
  line-height: 1.6;
}

pre code {
  font: inherit;
}

pre .word {
  color: var(--green-bright);
  font-weight: 500;
}

pre .said {
  color: var(--green-soft);
}

pre ::selection {
  background: var(--green-above);
  color: var(--green-below);
}

@media (max-width: 480px) {
  main {
    padding-block-start: var(--a-grove);
  }
}