/* Enarratio theme: dustinedwards.info */
.enarratio, .enarratio-tooltip {
  --enarratio-font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --enarratio-font-numeric: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --enarratio-background: #f4efe6;
  --enarratio-text: #241f1b;
  --enarratio-text-muted: #5b5349;
  --enarratio-grid: #c9c0b4;
  --enarratio-focus: #4f2d7f;
  --enarratio-status-good: #375445;
  --enarratio-status-warning: #8a4f1e;
  --enarratio-status-bad: #8e1024;
  --enarratio-status-unknown: #a89d8d;
  --enarratio-series-1: #142b42;
  --enarratio-series-text-1: #f4efe6;
  --enarratio-series-2: #4f2d7f;
  --enarratio-series-text-2: #f4efe6;
  --enarratio-series-3: #9b3268;
  --enarratio-series-text-3: #f4efe6;
  --enarratio-series-4: #55684a;
  --enarratio-series-text-4: #f4efe6;
  --enarratio-series-5: #9a7a0e;
  --enarratio-series-text-5: #000000;
  --enarratio-series-6: #8a4a1b;
  --enarratio-series-text-6: #f4efe6;
  --enarratio-series-7: #7d7263;
  --enarratio-series-text-7: #ffffff;
  --enarratio-series-8: #6b4a9b;
  --enarratio-series-text-8: #f4efe6;
  --enarratio-sequential-1: #e3dcf0;
  --enarratio-sequential-text-1: #241f1b;
  --enarratio-sequential-2: #9279b9;
  --enarratio-sequential-text-2: #000000;
  --enarratio-sequential-3: #6b4a9b;
  --enarratio-sequential-text-3: #f4efe6;
  --enarratio-sequential-4: #4f2d7f;
  --enarratio-sequential-text-4: #f4efe6;
  --enarratio-sequential-5: #3a1f5e;
  --enarratio-sequential-text-5: #f4efe6;
}
@supports (color: light-dark(#000, #fff)) {
  .enarratio, .enarratio-tooltip {
    --enarratio-background: light-dark(#f4efe6, #1c1916);
    --enarratio-text: light-dark(#241f1b, #e9e1d6);
    --enarratio-text-muted: light-dark(#5b5349, #b2a898);
    --enarratio-grid: light-dark(#c9c0b4, #6f675c);
    --enarratio-focus: light-dark(#4f2d7f, #b7a5e0);
    --enarratio-status-good: light-dark(#375445, #79baa8);
    --enarratio-status-warning: light-dark(#8a4f1e, #cf9f5e);
    --enarratio-status-bad: light-dark(#8e1024, #f0a9b4);
    --enarratio-status-unknown: light-dark(#a89d8d, #6f675c);
    --enarratio-series-1: light-dark(#142b42, #5887b5);
    --enarratio-series-text-1: light-dark(#f4efe6, #1c1916);
    --enarratio-series-2: light-dark(#4f2d7f, #c0b0e6);
    --enarratio-series-text-2: light-dark(#f4efe6, #1c1916);
    --enarratio-series-3: light-dark(#9b3268, #c9699e);
    --enarratio-series-text-3: light-dark(#f4efe6, #1c1916);
    --enarratio-series-4: light-dark(#55684a, #93b29b);
    --enarratio-series-text-4: light-dark(#f4efe6, #1c1916);
    --enarratio-series-5: light-dark(#9a7a0e, #efd99c);
    --enarratio-series-text-5: light-dark(#000000, #1c1916);
    --enarratio-series-6: light-dark(#8a4a1b, #ce7f44);
    --enarratio-series-text-6: light-dark(#f4efe6, #1c1916);
    --enarratio-series-7: light-dark(#7d7263, #ab9f8f);
    --enarratio-series-text-7: light-dark(#ffffff, #1c1916);
    --enarratio-series-8: light-dark(#6b4a9b, #a48fd0);
    --enarratio-series-text-8: light-dark(#f4efe6, #1c1916);
    --enarratio-sequential-1: light-dark(#e3dcf0, #5a4479);
    --enarratio-sequential-text-1: light-dark(#241f1b, #e9e1d6);
    --enarratio-sequential-2: light-dark(#9279b9, #7f66a8);
    --enarratio-sequential-text-2: light-dark(#000000, #ffffff);
    --enarratio-sequential-3: light-dark(#6b4a9b, #a48fd0);
    --enarratio-sequential-text-3: light-dark(#f4efe6, #1c1916);
    --enarratio-sequential-4: light-dark(#4f2d7f, #c0aee6);
    --enarratio-sequential-text-4: light-dark(#f4efe6, #1c1916);
    --enarratio-sequential-5: light-dark(#3a1f5e, #e0d7f2);
    --enarratio-sequential-text-5: light-dark(#f4efe6, #1c1916);
  }
}
.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(#f4efe6, #1c1916);
  --page-text: light-dark(#241f1b, #e9e1d6);
  --page-rule: light-dark(#c9c0b4, #6f675c);
  --page-code: light-dark(#c9c0b455, #6f675c55);
}

: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; }