:root {
  --theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --theme-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='2' fill='currentColor' height='12' rx='0.5' width='2'/%3E%3C/svg%3E");
  --theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E");
  --observablehq-max-width: 1440px;
  --observablehq-header-height: 2.2rem;
  scroll-padding-top: 2.5rem;
}
:root:has(#observablehq-header) {
  scroll-padding-top: calc(var(--observablehq-header-height) + 2.5rem);
}
body {
  max-width: var(--observablehq-max-width);
  margin: auto;
}
#observablehq-main,
#observablehq-header,
#observablehq-footer {
  margin: 1rem auto;
}
#observablehq-header {
  position: fixed;
  top: 0;
  left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + var(--observablehq-inset-left) + 2rem);
  right: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2) + var(--observablehq-inset-right) + 2rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--observablehq-header-height);
  margin: 0 -2rem 2rem -2rem;
  padding: 1rem 2rem 0.5rem 2rem;
  background: var(--theme-background);
  border-bottom: solid 1px var(--theme-foreground-faintest);
  font: 500 16px var(--sans-serif);
}
#observablehq-main {
  min-height: calc(100vh - 20rem);
  position: relative;
  z-index: 0;
}
#observablehq-header ~ #observablehq-main {
  margin-top: calc(var(--observablehq-header-height) + 1.5rem + 2rem);
}
#observablehq-footer {
  display: block;
  margin-top: 10rem;
  font: 12px var(--sans-serif);
  color: var(--theme-foreground-faint);
}
#observablehq-footer nav {
  display: grid;
  max-width: 640px;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  margin-bottom: 1rem;
}
#observablehq-footer nav a {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--theme-foreground-fainter);
  border-radius: 8px;
  padding: 1rem;
  line-height: 1rem;
  text-decoration: none;
}
#observablehq-footer nav a span {
  font-size: 14px;
}
#observablehq-footer nav a:hover span {
  text-decoration: underline;
}
#observablehq-footer nav a:hover {
  border-color: var(--theme-foreground-focus);
}
#observablehq-footer nav a[rel=prev] {
  grid-column: 1;
  align-items: start;
}
#observablehq-footer nav a[rel=next] {
  grid-column: 2;
  align-items: end;
}
#observablehq-footer nav a::before {
  color: var(--theme-foreground-faint);
}
#observablehq-footer nav a[rel=prev]::before {
  content: "Previous page";
}
#observablehq-footer nav a[rel=next]::before {
  content: "Next page";
}
#observablehq-center {
  margin: 2rem;
  --observablehq-inset-left: 0rem;
  --observablehq-inset-right: 0rem;
}
#observablehq-sidebar {
  --observablehq-sidebar-padding-left: calc(max(0rem, (100vw - var(--observablehq-max-width)) / 2));
  position: fixed;
  background: var(--theme-background-alt);
  color: var(--theme-foreground-muted);
  font: 14px var(--sans-serif);
  visibility: hidden;
  font-weight: 500;
  width: calc(272px + var(--observablehq-sidebar-padding-left));
  z-index: 3;
  top: 0;
  bottom: 0;
  left: -272px;
  box-sizing: border-box;
  padding: 0 0.5rem 1rem calc(var(--observablehq-sidebar-padding-left) + 0.5rem);
  overflow-y: auto;
}
#observablehq-sidebar ol,
#observablehq-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#observablehq-sidebar > ol,
#observablehq-sidebar > details,
#observablehq-sidebar > section {
  position: relative;
  padding-bottom: 0.5rem;
  margin: 0.5rem 0;
  border-bottom: solid 1px var(--theme-foreground-faintest);
}
#observablehq-sidebar > ol:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 16px;
  font-weight: 700;
  padding-top: 1rem;
  margin: 0;
  color: var(--theme-foreground);
}
#observablehq-sidebar > ol:first-child::before {
  content: "";
  position: absolute;
  inset: 0 -0.5rem;
  background: var(--theme-background-alt);
}
#observablehq-sidebar > ol:first-child > li {
  position: relative;
}
#observablehq-sidebar > ol:first-child > li > a {
  height: calc(var(--observablehq-header-height) - 1rem);
}
#observablehq-sidebar > ol:last-child,
#observablehq-sidebar > details:last-child,
#observablehq-sidebar > section:last-child {
  border-bottom: none;
}
#observablehq-sidebar summary {
  font-weight: 700;
  color: var(--theme-foreground);
  cursor: default;
}
#observablehq-sidebar summary::-webkit-details-marker,
#observablehq-sidebar summary::marker {
  display: none;
}
#observablehq-sidebar details summary::after {
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: var(--theme-foreground-muted);
  content: "";
  -webkit-mask: var(--theme-caret);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask: var(--theme-caret);
  mask-repeat: no-repeat;
  mask-position: center;
  padding: 0.5rem;
  transition: transform 250ms ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
#observablehq-sidebar details summary:hover::after {
  color: var(--theme-foreground);
}
#observablehq-sidebar details[open] summary::after {
  transform: rotate(0deg);
}
#observablehq-sidebar-toggle {
  position: fixed;
  appearance: none;
  background: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: e-resize;
  margin: 0;
  color: var(--theme-foreground-muted);
  z-index: 1;
}
#observablehq-sidebar-close {
  position: absolute;
  top: 1rem;
  right: 0;
  width: 2rem;
  height: var(--observablehq-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-foreground-muted);
  cursor: w-resize;
  z-index: 2;
}
#observablehq-sidebar-toggle::before,
#observablehq-sidebar-close::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--theme-toggle);
  mask: var(--theme-toggle);
}
#observablehq-sidebar-close::before {
  transform: scaleX(-1);
}
#observablehq-sidebar summary,
.observablehq-link a {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  margin-left: -0.5rem;
  align-items: center;
}
#observablehq-sidebar summary a {
  flex-grow: 1;
  color: inherit;
}
#observablehq-sidebar summary.observablehq-link {
  padding: 0;
  margin-left: 0;
}
#observablehq-sidebar details summary:hover,
.observablehq-link-active a,
.observablehq-link a:hover {
  background: var(--theme-background);
}
.observablehq-link a:hover {
  color: var(--theme-foreground-focus);
}
#observablehq-toc {
  display: none;
  position: fixed;
  color: var(--theme-foreground-muted);
  font: 400 14px var(--sans-serif);
  z-index: 1;
  top: 0;
  right: calc(max(0rem, (100% - var(--observablehq-max-width)) / 2) + 1rem);
  bottom: 0;
  overflow-y: auto;
}
#observablehq-header ~ #observablehq-toc {
  top: calc(var(--observablehq-header-height) + 1.5rem);
}
#observablehq-toc nav {
  width: 192px;
  margin: 2rem 0;
  padding: 0 1rem;
  box-sizing: border-box;
  border-left: solid 1px var(--theme-foreground-faintest);
}
#observablehq-toc div {
  font-weight: 700;
  color: var(--theme-foreground);
  margin-bottom: 0.5rem;
}
.observablehq-secondary-link a {
  display: block;
  padding: 0.25rem 0;
}
.observablehq-link:not(.observablehq-link-active) a[href]:not(:hover),
.observablehq-secondary-link:not(.observablehq-secondary-link-active) a[href]:not(:hover) {
  color: inherit;
}
.observablehq-link-active,
.observablehq-secondary-link-active {
  position: relative;
}
.observablehq-link-active::before,
.observablehq-secondary-link-highlight {
  content: "";
  position: absolute;
  width: 3px;
  background: var(--theme-foreground-focus);
}
.observablehq-link-active::before {
  top: 0;
  bottom: 0;
  left: -0.5rem;
}
.observablehq-secondary-link-highlight {
  left: 1px;
  top: 2rem;
  height: 0;
  transition: top 150ms ease, height 150ms ease;
}
#observablehq-sidebar {
  transition: visibility 150ms 0ms, left 150ms 0ms ease;
}
#observablehq-sidebar:focus-within,
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar {
  left: 0;
  visibility: initial;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
  transition: visibility 0ms 0ms, left 150ms 0ms ease;
}
#observablehq-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
#observablehq-sidebar-backdrop:has(~ #observablehq-sidebar:focus-within),
#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop {
  display: initial;
}
@media (prefers-color-scheme: dark) {
  #observablehq-sidebar:focus-within,
  #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar {
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5);
  }
}
@media (min-width: calc(640px + 6rem + 272px)) {
  #observablehq-sidebar {
    transition: none !important;
  }
  #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop {
    display: none;
  }
  #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-sidebar {
    left: 0;
    visibility: initial;
    box-shadow: none;
  }
  #observablehq-sidebar-toggle:checked ~ #observablehq-center,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center {
    --observablehq-inset-left: calc(272px + 1rem);
    --observablehq-inset-right: 1rem;
    padding-left: var(--observablehq-inset-left);
    padding-right: 1rem;
  }
}
@media (min-width: calc(640px + 5rem + 192px)) {
  #observablehq-toc ~ #observablehq-main {
    padding-right: calc(192px + 1rem);
  }
  #observablehq-toc {
    display: block;
  }
}
@media (min-width: calc(640px + 6rem + 272px)) {
  #observablehq-sidebar-toggle:checked ~ #observablehq-center #observablehq-toc,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center #observablehq-toc {
    display: none;
  }
  #observablehq-sidebar-toggle:checked ~ #observablehq-center #observablehq-toc ~ #observablehq-main,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center #observablehq-toc ~ #observablehq-main {
    padding-right: 0;
  }
}
@media (min-width: calc(640px + 7rem + 272px + 192px)) {
  #observablehq-sidebar-toggle:checked ~ #observablehq-center #observablehq-toc,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center #observablehq-toc,
  #observablehq-toc {
    display: block;
  }
  #observablehq-sidebar-toggle:checked ~ #observablehq-center #observablehq-toc ~ #observablehq-main,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center #observablehq-toc ~ #observablehq-main {
    padding-right: calc(192px + 1rem);
  }
}
.observablehq-pre-container {
  position: relative;
  margin: 1rem -1rem;
  max-width: 960px;
}
.observablehq-pre-container::after {
  position: absolute;
  top: 0;
  right: 0;
  height: 21px;
  font: 12px var(--sans-serif);
  color: var(--theme-foreground-muted);
  background:
    linear-gradient(
      to right,
      transparent,
      var(--theme-background-alt) 40%);
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}
.observablehq-pre-container[data-language]::after {
  content: attr(data-language);
}
.observablehq-pre-container pre {
  padding-right: 4rem;
  margin: 0;
  max-width: none;
}
.observablehq-pre-copy {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  color: transparent;
  border: none;
  border-radius: 4px;
  padding: 0 8px;
  margin: 4px;
  height: 29px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
}
.observablehq-pre-copied::before {
  content: "Copied!";
  position: absolute;
  right: calc(100% + 0.25rem);
  background:
    linear-gradient(
      to right,
      transparent,
      var(--theme-background-alt) 10%);
  color: var(--theme-green);
  font: var(--font-small);
  padding: 4px 8px 4px 16px;
  pointer-events: none;
  animation-name: observablehq-pre-copied;
  animation-duration: 250ms;
  animation-direction: alternate;
  animation-iteration-count: 2;
}
@keyframes observablehq-pre-copied {
  0% {
    opacity: 0;
    transform: translateX(0.5rem);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
}
.observablehq-pre-container[data-copy] .observablehq-pre-copy,
.observablehq-pre-container:hover .observablehq-pre-copy,
.observablehq-pre-container .observablehq-pre-copy:focus {
  background: var(--theme-background-alt);
  color: var(--theme-foreground-faint);
}
.observablehq-pre-container .observablehq-pre-copy:hover {
  color: var(--theme-foreground-muted);
}
.observablehq-pre-container .observablehq-pre-copy:active {
  color: var(--theme-foreground);
  background: var(--theme-foreground-faintest);
}
#observablehq-sidebar.observablehq-search-results > ol:not(:first-child),
#observablehq-sidebar.observablehq-search-results > details,
#observablehq-sidebar.observablehq-search-results > section {
  display: none;
}
#observablehq-search {
  position: relative;
  padding: 0.5rem 0 0 0;
  display: flex;
  align-items: center;
}
#observablehq-search input {
  padding: 6px 4px 6px 2.2em;
  width: 100%;
  border: none;
  border-radius: 4px;
  background-color: var(--theme-background);
  font-size: 13.3px;
  height: 28px;
}
#observablehq-search input::placeholder {
  color: var(--theme-foreground-faint);
}
#observablehq-search::before {
  position: absolute;
  left: 0.5rem;
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--theme-magnifier);
  mask: var(--theme-magnifier);
  pointer-events: none;
}
#observablehq-search::after {
  position: absolute;
  right: 6px;
  content: attr(data-shortcut);
  pointer-events: none;
}
#observablehq-search:focus-within::after {
  content: "";
}
#observablehq-search-results {
  --relevance-width: 32px;
  position: absolute;
  overflow-y: auto;
  top: 6.5rem;
  left: var(--observablehq-sidebar-padding-left);
  right: 0.5rem;
  bottom: 0;
}
#observablehq-search-results a span {
  max-width: 184px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#observablehq-search-results div {
  text-align: right;
  font-size: 10px;
  margin: 0.5em;
}
#observablehq-search-results li {
  position: relative;
  display: flex;
  align-items: center;
}
#observablehq-search-results a {
  flex-grow: 1;
}
#observablehq-search-results li:after,
#observablehq-search-results a span:after {
  content: "";
  width: var(--relevance-width);
  height: 4px;
  position: absolute;
  top: 14px;
  right: 0.5em;
  border-radius: 2px;
  background: var(--theme-foreground-muted);
}
#observablehq-search-results li.observablehq-link-active:after {
  background: var(--theme-foreground-focus);
}
#observablehq-search-results a span:after {
  background: var(--theme-foreground-faintest);
}
#observablehq-search-results li[data-score="0"]:after {
  width: calc(var(--relevance-width) * 0.125);
}
#observablehq-search-results li[data-score="1"]:after {
  width: calc(var(--relevance-width) * 0.25);
}
#observablehq-search-results li[data-score="2"]:after {
  width: calc(var(--relevance-width) * 0.4375);
}
#observablehq-search-results li[data-score="3"]:after {
  width: calc(var(--relevance-width) * 0.625);
}
#observablehq-search-results li[data-score="4"]:after {
  width: calc(var(--relevance-width) * 0.8125);
}
@media print {
  #observablehq-center {
    padding-left: 1em !important;
  }
  #observablehq-sidebar,
  #observablehq-footer {
    display: none !important;
  }
}