/* Enarratio theme: default */
.enarratio, .enarratio-tooltip {
  --enarratio-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --enarratio-font-numeric: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --enarratio-background: #ffffff;
  --enarratio-text: #1b1e23;
  --enarratio-text-muted: #57606a;
  --enarratio-grid: #e3e6ea;
  --enarratio-focus: #0b57d0;
  --enarratio-status-good: #1a7f37;
  --enarratio-status-warning: #9a6700;
  --enarratio-status-bad: #cf222e;
  --enarratio-status-unknown: #8c959f;
  --enarratio-series-1: #084fba;
  --enarratio-series-text-1: #ffffff;
  --enarratio-series-2: #a06f30;
  --enarratio-series-text-2: #000000;
  --enarratio-series-3: #018d87;
  --enarratio-series-text-3: #000000;
  --enarratio-series-4: #811736;
  --enarratio-series-text-4: #ffffff;
  --enarratio-series-5: #653161;
  --enarratio-series-text-5: #ffffff;
  --enarratio-series-6: #6f73b4;
  --enarratio-series-text-6: #000000;
  --enarratio-series-7: #4f5500;
  --enarratio-series-text-7: #ffffff;
  --enarratio-series-8: #595959;
  --enarratio-series-text-8: #ffffff;
  --enarratio-sequential-1: #dbe9f6;
  --enarratio-sequential-text-1: #1b1e23;
  --enarratio-sequential-2: #a6c8ea;
  --enarratio-sequential-text-2: #1b1e23;
  --enarratio-sequential-3: #6aa3d8;
  --enarratio-sequential-text-3: #1b1e23;
  --enarratio-sequential-4: #2f78c0;
  --enarratio-sequential-text-4: #ffffff;
  --enarratio-sequential-5: #0b4a8c;
  --enarratio-sequential-text-5: #ffffff;
}
@supports (color: light-dark(#000, #fff)) {
  .enarratio, .enarratio-tooltip {
    --enarratio-background: light-dark(#ffffff, #16181d);
    --enarratio-text: light-dark(#1b1e23, #e6e8eb);
    --enarratio-text-muted: light-dark(#57606a, #a3aab3);
    --enarratio-grid: light-dark(#e3e6ea, #2f343c);
    --enarratio-focus: light-dark(#0b57d0, #8ab4f8);
    --enarratio-status-good: light-dark(#1a7f37, #3fb950);
    --enarratio-status-warning: light-dark(#9a6700, #d29922);
    --enarratio-status-bad: light-dark(#cf222e, #f85149);
    --enarratio-status-unknown: light-dark(#8c959f, #6e7681);
    --enarratio-series-1: light-dark(#084fba, #4b8efe);
    --enarratio-series-text-1: light-dark(#ffffff, #16181d);
    --enarratio-series-2: light-dark(#a06f30, #e7b375);
    --enarratio-series-text-2: light-dark(#000000, #16181d);
    --enarratio-series-3: light-dark(#018d87, #a1e7e2);
    --enarratio-series-text-3: light-dark(#000000, #16181d);
    --enarratio-series-4: light-dark(#811736, #d96a7e);
    --enarratio-series-text-4: light-dark(#ffffff, #16181d);
    --enarratio-series-5: light-dark(#653161, #b57baf);
    --enarratio-series-text-5: light-dark(#ffffff, #16181d);
    --enarratio-series-6: light-dark(#6f73b4, #b1b7fd);
    --enarratio-series-text-6: light-dark(#000000, #16181d);
    --enarratio-series-7: light-dark(#4f5500, #96984b);
    --enarratio-series-text-7: light-dark(#ffffff, #16181d);
    --enarratio-series-8: light-dark(#595959, #a8a8a8);
    --enarratio-series-text-8: light-dark(#ffffff, #16181d);
    --enarratio-sequential-1: light-dark(#dbe9f6, #1d2d42);
    --enarratio-sequential-text-1: light-dark(#1b1e23, #e6e8eb);
    --enarratio-sequential-2: light-dark(#a6c8ea, #1f4c7a);
    --enarratio-sequential-text-2: light-dark(#1b1e23, #e6e8eb);
    --enarratio-sequential-3: light-dark(#6aa3d8, #2f74b5);
    --enarratio-sequential-text-3: light-dark(#1b1e23, #ffffff);
    --enarratio-sequential-4: light-dark(#2f78c0, #6aa6e0);
    --enarratio-sequential-text-4: light-dark(#ffffff, #16181d);
    --enarratio-sequential-5: light-dark(#0b4a8c, #b8d8f5);
    --enarratio-sequential-text-5: light-dark(#ffffff, #16181d);
  }
}
.enarratio {
  margin: 0;
  color: var(--enarratio-text);
  font-family: var(--enarratio-font);
  font-size: 1rem;
}
.enarratio-frame { overflow-x: auto; }
.enarratio-frame-wide > svg { min-width: 30rem; }
.enarratio svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
  font-family: inherit;
  font-size: 12px;
}
svg.enarratio { display: inline-block; vertical-align: middle; }
.enarratio [data-enarratio-mark$="tick label"],
.enarratio .enarratio-numeric {
  font-family: var(--enarratio-font-numeric);
  font-variant-numeric: tabular-nums;
}
.enarratio [data-enarratio-mark*="axis"] { color: var(--enarratio-text-muted); }
.enarratio [data-enarratio-mark$="grid"] { stroke: var(--enarratio-grid); stroke-opacity: 1; }
.enarratio [data-enarratio-mark="rule"] { stroke: var(--enarratio-text-muted); }
.enarratio-title { margin: 0 0 0.5em; font-weight: 600; }
.enarratio-caption { margin: 0.5em 0 0; color: var(--enarratio-text-muted); font-size: 0.875em; }
.enarratio-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1em;
  margin: 0 0 0.5em;
  padding: 0;
  list-style: none;
  font-size: 0.875em;
}
.enarratio-legend li, .enarratio-legend button { display: inline-flex; align-items: center; gap: 0.4em; }
.enarratio-legend button {
  margin: 0;
  padding: 0.125em 0.25em;
  border: 1px solid transparent;
  border-radius: 0.25em;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.enarratio-legend button[aria-pressed="true"] { border-color: currentColor; font-weight: 600; }
.enarratio-swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.15em;
  forced-color-adjust: none;
}
.enarratio [data-slot="1"] { --enarratio-slot: var(--enarratio-series-1); }
.enarratio [data-slot="2"] { --enarratio-slot: var(--enarratio-series-2); }
.enarratio [data-slot="3"] { --enarratio-slot: var(--enarratio-series-3); }
.enarratio [data-slot="4"] { --enarratio-slot: var(--enarratio-series-4); }
.enarratio [data-slot="5"] { --enarratio-slot: var(--enarratio-series-5); }
.enarratio [data-slot="6"] { --enarratio-slot: var(--enarratio-series-6); }
.enarratio [data-slot="7"] { --enarratio-slot: var(--enarratio-series-7); }
.enarratio [data-slot="8"] { --enarratio-slot: var(--enarratio-series-8); }
.enarratio [data-step="1"] { --enarratio-slot: var(--enarratio-sequential-1); }
.enarratio [data-step="2"] { --enarratio-slot: var(--enarratio-sequential-2); }
.enarratio [data-step="3"] { --enarratio-slot: var(--enarratio-sequential-3); }
.enarratio [data-step="4"] { --enarratio-slot: var(--enarratio-sequential-4); }
.enarratio [data-step="5"] { --enarratio-slot: var(--enarratio-sequential-5); }
.enarratio-swatch { background: var(--enarratio-slot); }
.enarratio-data { margin: 0.5em 0 0; font-size: 0.875em; }
.enarratio-data summary { cursor: pointer; color: var(--enarratio-text-muted); }
.enarratio-data table { border-collapse: collapse; margin-top: 0.5em; }
.enarratio-data th, .enarratio-data td {
  padding: 0.2em 0.75em 0.2em 0;
  border-bottom: 1px solid var(--enarratio-grid);
  text-align: left;
}
.enarratio-data td { font-variant-numeric: tabular-nums; text-align: right; }
.enarratio-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.enarratio-tooltip {
  position: absolute;
  z-index: 10;
  max-width: 18em;
  padding: 0.35em 0.6em;
  border: 1px solid var(--enarratio-grid);
  border-radius: 0.3em;
  background: var(--enarratio-background);
  color: var(--enarratio-text);
  font-family: var(--enarratio-font);
  font-size: 0.8125rem;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}
.enarratio-tooltip[hidden] { display: none; }
.enarratio [data-enarratio-key] { transition: opacity 150ms ease-out; }
.enarratio[data-enarratio-interactive] [data-enarratio-field] { cursor: pointer; }
.enarratio [data-enarratio-dimmed] { opacity: 0.25; }
.enarratio [data-enarratio-key]:focus { outline: none; }
/* The focus ring: a background-colored ring inside a focus-colored one, so one of the two always
   contrasts with whatever mark or background is next to it. */
.enarratio-focus-ring { pointer-events: none; fill: none; }
.enarratio-focus-ring-inner { stroke: var(--enarratio-background); stroke-width: 5px; }
.enarratio-focus-ring-outer { stroke: var(--enarratio-focus); stroke-width: 2.5px; }
/* Invisible targets that make small marks at least 24 CSS pixels to point at. */
.enarratio-hit { fill: transparent; stroke: none; }
.enarratio svg:focus-visible, .enarratio-legend button:focus-visible {
  outline: 3px solid var(--enarratio-focus);
  outline-offset: 2px;
}
.enarratio-brush { fill: var(--enarratio-focus); fill-opacity: 0.15; stroke: var(--enarratio-focus); }
@keyframes enarratio-grow { from { transform: scaleY(0); } }
@keyframes enarratio-grow-x { from { transform: scaleX(0); } }
@keyframes enarratio-draw { from { stroke-dashoffset: var(--enarratio-length); } }
@keyframes enarratio-fade { from { opacity: 0; } }
.enarratio[data-enarratio-entering] [data-enarratio-mark="bar"] > * {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: enarratio-grow 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.enarratio[data-enarratio-entering][data-enarratio-orientation="horizontal"] [data-enarratio-mark="bar"] > * {
  transform-origin: left;
  animation-name: enarratio-grow-x;
}
.enarratio[data-enarratio-entering] [data-enarratio-mark="dot"] > *,
.enarratio[data-enarratio-entering] [data-enarratio-mark="area"] > *,
.enarratio[data-enarratio-entering] [data-enarratio-mark="cell"] > * {
  animation: enarratio-fade 500ms ease-out both;
}
.enarratio[data-enarratio-entering] [data-enarratio-mark="line"] > path {
  stroke-dasharray: var(--enarratio-length);
  animation: enarratio-draw 800ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .enarratio *, .enarratio-tooltip { animation: none !important; transition: none !important; }
}
.enarratio [data-enarratio-mark="x-grid"] { display: none; }
:root {
  --page-bg: light-dark(#ffffff, #16181d);
  --page-text: light-dark(#1b1e23, #e6e8eb);
  --page-rule: light-dark(#e3e6ea, #2f343c);
  --page-code: light-dark(#e3e6ea55, #2f343c55);
}

:root { color-scheme: light dark; }
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--enarratio-font, system-ui, sans-serif);
  line-height: 1.5;
}
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
h1 { margin: 0; font-size: 1.75rem; }
nav a, button.scheme { color: inherit; font: inherit; }
button.scheme { padding: 4px 10px; border: 1px solid currentColor; border-radius: 4px; background: none; cursor: pointer; }
section.example { margin: 40px 0; padding-top: 24px; border-top: 1px solid var(--page-rule); }
section.example h2 { margin: 0 0 16px; font-size: 1.125rem; }
.source { margin-top: 12px; font-size: 0.875rem; }
.source pre { overflow-x: auto; padding: 12px; border-radius: 6px; background: var(--page-code); }
.events { min-height: 1.5em; margin: 8px 0 0; font-family: ui-monospace, monospace; font-size: 0.8125rem; }
.report { font-size: 0.875rem; }
.primitives { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.report li { margin: 2px 0; }