@font-face {
  src: url("fonts/Gestura-Text-Roman-VF.df84a4ef.woff2") format("woff2");
  font-family: Gestura;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  src: url("fonts/Gestura-Text-Italic-VF.f52277d4.woff2") format("woff2");
  font-family: Gestura;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  src: url("fonts/IBM-Plex-Sans-Var-Roman.187d66cc.woff2") format("woff2");
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  src: url("fonts/IBM-Plex-Sans-Var-Italic.6f36af08.woff2") format("woff2");
  font-family: IBM Plex Sans;
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  src: url("fonts/Monaspace-Argon-Var.5db15a03.woff2") format("woff2");
  font-family: Monaspace Argon;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  size-adjust: 90%;
}

@font-face {
  src: url("fonts/Monaspace-Neon-Var.179ef27b.woff2") format("woff2");
  font-family: Monaspace Neon;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  size-adjust: 85%;
}

:root {
  --color-text: #2e2e2e;
  --color-muted: #6b7280;
  --color-soft: #9ca3af;
  --color-bg: #fff;
  --color-bg-alt: #f9fafb;
  --color-border: #d1d5db;
  --color-border-light: #e5e7eb;
  --color-label-bg: #00000005;
  --color-callout-bg: #eef4ff;
  --color-callout-border: #3b82f6;
  --color-callout-text: #000;
  --color-kbd-bg: #0000000a;
  --color-kbd-border: #00000026;
  --color-kbd-text: var(--color-text);
  --font-size-root: 1.125em;
  --font-size-xs: .875rem;
  --font-size-sm: .925rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.25rem;
  --font-size-body: var(--font-size-base);
  --font-size-title: var(--font-size-3xl);
  --font-size-heading: var(--font-size-xl);
  --font-size-subheading: var(--font-size-lg);
  --font-size-caption: var(--font-size-sm);
  --font-size-interface: var(--font-size-sm);
  --font-size-data: var(--font-size-sm);
  --font-size-body-small: var(--font-size-sm);
  --font-size-body-micro: var(--font-size-xs);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "Gestura", ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria,
    serif;
  --font-mono: ui-monospace, monospace;
  --font-mono-prose: "Monaspace Argon", ui-monospace, monospace;
  --font-mono-sans: "Monaspace Neon", ui-monospace, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --space-3xs: .125rem;
  --space-2xs: .25rem;
  --space-xs: .375rem;
  --space-s: .5rem;
  --space-m: .75rem;
  --space-l: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 6rem;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: 1rem;
  --sidebar-width: 320px;
  --content-max-width: 54rem;
  --size-icon: 1.25rem;
  --size-icon-sm: 1rem;
  --chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --chalk-mobile: 768px;
}

@media (max-width: 768px) {
  :root {
    --font-size-root: 1.0625rem;
    --font-size-title: var(--font-size-2xl);
  }
}

:root[data-theme="dark"] {
  --color-text: #e5e7eb;
  --color-muted: #9da4b1;
  --color-soft: #7b828f;
  --color-bg: #141618;
  --color-bg-alt: #0e0f10;
  --color-border: #3b3f45;
  --color-border-light: #262a2e;
  --color-label-bg: #ffffff0d;
  --color-callout-bg: #14348d;
  --color-callout-border: #114eb0;
  --color-callout-text: #fff;
  --color-kbd-bg: #ffffff1a;
  --color-kbd-border: #fff3;
  --color-kbd-text: var(--color-text);
  --chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239da4b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

body[data-sidebar-theme="dark"] > nav {
  --color-bg-alt: #0e0f10;
  --color-text: #e5e7eb;
  --color-muted: #9da4b1;
  --color-soft: #7b828f;
  --color-border: #3b3f45;
  --color-border-light: #262a2e;
  --color-label-bg: #ffffff0d;
  --color-kbd-bg: #ffffff1a;
  --color-kbd-border: #fff3;
  --chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239da4b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

body[data-sidebar-theme="light"] > nav {
  --color-bg-alt: #f9fafb;
  --color-text: #2e2e2e;
  --color-muted: #6b7280;
  --color-soft: #9ca3af;
  --color-border: #d1d5db;
  --color-border-light: #e5e7eb;
  --color-label-bg: #00000005;
  --color-kbd-bg: #0000000a;
  --color-kbd-border: #00000026;
  --chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

body {
  font-family: var(--font-serif);
  font-size: var(--font-size-root);
  color: var(--color-text);
  background: var(--color-bg);
  height: 100vh;
  grid-template-areas: "nav main"
                       "nav main"
                       "footer footer";
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  display: grid;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: .1em;
}

a:hover {
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-weight: var(--font-weight-bold);
  margin-top: 1.5em;
  margin-bottom: .5em;
  line-height: 1.2;
}

h2, h3, h4 {
  font-family: var(--font-sans);
}

p {
  margin-bottom: 1lh;
}

body > main {
  box-sizing: border-box;
  grid-area: main;
  grid-template-rows: subgrid;
  display: grid;
  overflow-y: auto;
}

body > footer {
  grid-area: footer;
}

.content-layout {
  grid-template-columns: 1fr var(--sidebar-width);
  grid-row: 2;
  gap: 0;
  min-height: 0;
  display: grid;
  overflow-y: auto;
}

.content-layout:not(:has(.inspector-sidebar)) {
  grid-template-columns: 1fr;
}

body.inspector-collapsed .content-layout {
  grid-template-columns: 1fr;
}

body.inspector-collapsed .inspector-sidebar {
  display: none;
}

.content-container {
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .content-container {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  .content-container article {
    padding-inline: var(--space-l);
  }
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

body > nav {
  box-sizing: border-box;
  font-family: var(--font-sans);
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border-light);
  font-size: var(--font-size-interface);
  grid-area: nav;
  grid-template-rows: subgrid;
  display: grid;
  overflow-y: auto;
}

body > nav a {
  display: block;
}

body > nav li[aria-current="page"] > a, body > nav a[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

body.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

body.sidebar-collapsed > nav {
  display: none;
}

.nav-home {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-alt);
  padding: var(--space-s) var(--space-xl);
  z-index: 10;
  box-sizing: border-box;
  align-items: center;
  display: flex;
}

.nav-home a {
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.nav-home a:hover {
  text-decoration: underline;
}

.nav-tree {
  padding: var(--space-s) var(--space-l) var(--space-l);
  line-height: 1.4;
  overflow-y: auto;
}

body > nav, body > nav * {
  font-size: var(--font-size-interface);
}

body > nav summary {
  cursor: pointer;
  padding-left: 1.1em;
  list-style: none;
  position: relative;
}

body > nav summary::-webkit-details-marker {
  display: none;
}

body > nav summary::marker {
  display: none;
}

body > nav summary:before {
  content: "";
  color: var(--color-muted);
  background-image: var(--chevron-svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: .85em;
  height: .85em;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

body > nav details[open] > summary:before {
  transform: translateY(-50%)rotate(90deg);
}

body > nav summary:hover {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

body > nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body > nav .nav-footer {
  display: none;
}

body > nav ul ul {
  border-left: 1px solid var(--color-border);
  margin-top: .25em;
  margin-left: .425em;
  padding-left: .85em;
}

body > nav li {
  margin: var(--space-s) 0;
}

body > nav li a {
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  text-decoration: none;
}

body > nav li a:hover {
  color: var(--color-text);
}

body > nav summary a {
  display: inline;
}

body > nav li:not(summary) > a {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  padding-left: 1.1em;
  display: block;
  overflow: hidden;
}

body > nav li a:hover {
  text-decoration: underline;
}

body > nav li small {
  color: var(--color-muted);
  font-size: var(--font-size-interface);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  display: block;
}

@media (max-width: 768px) {
  body.is-mobile.sidebar-collapsed {
    grid-template-columns: 0 1fr;
  }

  body.is-mobile.sidebar-collapsed > nav {
    display: none;
  }

  body.is-mobile:not(.sidebar-collapsed) {
    grid-template-columns: min(var(--sidebar-width), 85vw) 1fr;
  }

  body.is-mobile:not(.sidebar-collapsed) > nav {
    display: grid;
  }

  body.is-mobile:not(.sidebar-collapsed) {
    overflow: hidden;
  }

  body > nav {
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  body > nav .nav-tree {
    min-height: 0;
  }

  body > nav .nav-footer {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-l);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-alt);
    flex-wrap: nowrap;
    flex-shrink: 0;
    display: flex !important;
  }

  .nav-footer-source.source-info-icons {
    align-items: center;
    gap: var(--space-2xs);
    flex-shrink: 0;
    display: flex;
  }

  .nav-footer-theme {
    flex-shrink: 0;
    margin-left: auto;
  }

  .nav-footer-source .source-file-icon {
    padding: var(--space-xs);
    color: var(--color-muted);
    border-radius: var(--radius-md);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  .nav-footer-source .source-file-icon:hover {
    color: var(--color-text);
  }

  .nav-footer-source .source-file-icon svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  .nav-footer-theme .theme-option svg {
    width: var(--size-icon);
    height: var(--size-icon);
  }
}

menu {
  gap: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
  box-sizing: border-box;
  align-items: center;
  margin: 0;
  list-style: none;
  display: flex;
  position: sticky;
  top: 0;
}

menu li {
  margin: 0;
}

menu:not(:has(.breadcrumb-container)) {
  justify-content: space-between;
}

#sidebar-toggle {
  color: var(--color-muted);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-s);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

#sidebar-toggle:hover {
  color: var(--color-text);
}

#sidebar-toggle svg {
  width: var(--size-icon);
  height: var(--size-icon);
}

.toolbar-actions {
  align-items: center;
  gap: var(--space-s);
  display: flex;
}

#search-toggle {
  color: var(--color-muted);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xs);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

#search-toggle:hover {
  color: var(--color-text);
  background: var(--color-bg);
}

#search-toggle svg {
  width: var(--size-icon);
  height: var(--size-icon);
}

.theme-selector {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-3xs);
  gap: var(--space-3xs);
  display: flex;
}

.theme-option {
  color: var(--color-muted);
  border-radius: var(--radius-md);
  padding: var(--space-s);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.theme-option:hover {
  color: var(--color-text);
  background: var(--color-bg);
}

.theme-option.active {
  color: var(--color-text);
  background: var(--color-bg);
  box-shadow: 0 1px 2px #0000001a;
}

.theme-option svg {
  width: var(--size-icon);
  height: var(--size-icon);
}

@media (max-width: 768px) {
  menu {
    min-width: 0;
  }

  menu .toolbar-actions .theme-selector {
    display: none;
  }
}

.breadcrumb-container {
  font-family: var(--font-sans);
  flex: 1;
}

.breadcrumb {
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-interface);
  color: var(--color-muted);
  flex-wrap: wrap;
  display: flex;
}

.breadcrumb-link {
  color: var(--color-muted);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.breadcrumb-separator {
  color: var(--color-soft);
  margin: 0 var(--space-2xs);
}

.breadcrumb-mobile {
  display: none;
}

.breadcrumb-dropdown {
  position: relative;
}

.breadcrumb-trigger {
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--font-size-interface);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-s);
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  display: flex;
}

.breadcrumb-trigger:hover {
  border-color: var(--color-border);
}

.breadcrumb-trigger-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
}

.breadcrumb-chevron {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
  transition: transform .2s;
}

.breadcrumb-trigger[aria-expanded="true"] .breadcrumb-chevron {
  transform: rotate(180deg);
}

.breadcrumb-dropdown-menu {
  margin-top: var(--space-2xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  z-index: 200;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px #00000026;
}

.breadcrumb-dropdown-menu[hidden] {
  display: none;
}

.breadcrumb-dropdown-link {
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--font-size-interface);
  color: var(--color-muted);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.breadcrumb-dropdown-link:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}

.breadcrumb-dropdown-link[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 768px) {
  menu .breadcrumb-desktop, menu li.breadcrumb-container.breadcrumb-desktop {
    display: none !important;
  }

  menu .breadcrumb-mobile, menu li.breadcrumb-mobile {
    flex: 1;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    display: flex !important;
  }

  .breadcrumb-dropdown {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .breadcrumb-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .breadcrumb-trigger .breadcrumb-trigger-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .breadcrumb-trigger .breadcrumb-chevron {
    flex-shrink: 0;
  }

  .breadcrumb-dropdown-menu {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100vw - 3rem);
    left: 0;
    right: 0;
  }
}

#search-modal[aria-hidden="true"] {
  display: none;
}

#search-modal {
  z-index: 1000;
  font-family: var(--font-sans);
  position: fixed;
  inset: 0;
}

#search-modal .search-overlay {
  background: #00000059;
  position: absolute;
  inset: 0;
}

#search-modal .search-dialog {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  max-width: 720px;
  margin: 10vh auto 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #0003;
}

#search-modal .search-header {
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
  display: flex;
}

#search-modal #search-input {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: inherit;
  flex: 1;
  font-family: inherit;
}

#search-modal #search-input:focus {
  outline: solid 2px var(--color-callout-border);
  border-color: var(--color-border);
}

#search-modal #search-close {
  color: var(--color-muted);
  width: var(--size-icon);
  height: var(--size-icon);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 1;
  display: flex;
}

#search-modal #search-close svg {
  width: 100%;
  height: 100%;
}

#search-modal #search-results {
  border-top: 1px solid var(--color-border-light);
  max-height: 60vh;
  max-height: 60dvh;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

#search-modal #search-results:empty {
  display: none;
}

#search-modal .search-status {
  padding: var(--space-l) var(--space-xl);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  border-top: 1px solid var(--color-border-light);
}

#search-modal .search-status:empty {
  display: none;
}

#search-modal #search-results li {
  cursor: pointer;
  padding: var(--space-l) var(--space-xl);
  border-bottom: 1px solid var(--color-border-light);
  margin: 0;
}

#search-modal #search-results li:last-child {
  border-bottom: none;
}

#search-modal #search-results li:before {
  display: none;
}

#search-modal #search-results li[aria-selected="true"] {
  background: var(--color-callout-bg);
  color: var(--color-callout-text);
}

#search-modal .result-breadcrumbs {
  color: var(--color-muted);
  font-size: var(--font-size-body-micro);
  margin-bottom: var(--space-2xs);
}

#search-modal .result-title {
  font-weight: var(--font-weight-semibold);
}

#search-modal .result-preview {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

@media (max-width: 768px) {
  body.search-drawer-open #search-modal .search-dialog {
    width: min(var(--sidebar-width), 85vw);
    border-left: 1px solid var(--color-border-light);
    border-radius: 0;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
  }
}

.source-info {
  font-family: var(--font-sans);
  font-size: var(--font-size-interface);
  color: var(--color-muted);
  align-items: center;
  gap: 0;
  display: flex;
}

.page-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-2xs) var(--space-s);
  z-index: 100;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-l);
  display: flex;
}

.inspector-toggles {
  align-items: center;
  gap: var(--space-s);
  display: flex;
}

.embeds-toggle, .issues-toggle {
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--font-size-interface);
  color: var(--color-muted);
  display: flex;
}

.embeds-toggle a, .issues-toggle a {
  align-items: center;
  gap: var(--space-xs);
  color: inherit;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-md);
  text-decoration: none;
  display: flex;
}

.embeds-toggle a:hover, .issues-toggle a:hover {
  color: var(--color-text);
}

.embeds-toggle svg, .issues-toggle svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
}

.git-branch, .source-file {
  align-items: center;
  gap: var(--space-xs);
  display: flex;
}

.git-branch svg, .source-file svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
}

.git-branch a, .source-file a {
  align-items: center;
  gap: var(--space-xs);
  color: inherit;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-md);
  text-decoration: none;
  display: flex;
}

.git-branch a:hover, .source-file a:hover {
  color: var(--color-text);
}

.source-file a span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.inspector-sidebar {
  border-left: 1px solid var(--color-border-light);
  min-height: 0;
  padding: var(--space-l);
  font-size: var(--font-size-interface);
  font-family: var(--font-sans);
  overflow-y: auto;
}

.inspector-sidebar h3 {
  margin-top: 0;
  margin-bottom: var(--space-l);
  font-size: var(--font-size-interface);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.embeds-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.embeds-list li {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--color-border-light);
  margin: 0;
}

.embeds-list li:before {
  display: none;
}

.embeds-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.embeds-list dl {
  margin: 0;
}

.embeds-list dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  margin-bottom: var(--space-2xs);
}

.embeds-list dd {
  margin: 0 0 var(--space-s) 0;
  color: var(--color-text);
  line-height: 1.4;
}

.embeds-list dd:last-child {
  margin-bottom: 0;
}

.issues-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.issues-list li {
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--color-border-light);
  margin: 0;
}

.issues-list li:before {
  display: none;
}

.issues-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.issue {
  gap: var(--space-2xs);
  flex-direction: column;
  display: flex;
}

.issue-field {
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  font-size: var(--font-size-interface);
}

.issue-message {
  color: var(--color-text);
  line-height: 1.4;
}

.issue-error .issue-field, .issue-error .issue-message {
  color: var(--color-error, #dc2626);
}

.issue-warning .issue-field, .issue-warning .issue-message {
  color: var(--color-warning, #d97706);
}

@media (max-width: 768px) {
  .page-footer {
    background: none;
    border: none;
    height: 0;
    padding: 0;
    position: relative;
    overflow: visible;
  }

  .page-footer .source-info {
    display: none;
  }

  .page-footer .inspector-toggles {
    bottom: var(--space-l);
    right: var(--space-l);
    z-index: 90;
    gap: var(--space-2xs);
    flex-direction: column;
    display: flex;
    position: fixed;
  }

  .page-footer .inspector-toggles .embeds-toggle span, .page-footer .inspector-toggles .issues-toggle span {
    display: none;
  }

  .page-footer .inspector-toggles .embeds-toggle a, .page-footer .inspector-toggles .issues-toggle a {
    padding: var(--space-s);
  }
}

.next-previous {
  font-family: var(--font-sans);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-l);
  margin: var(--space-2xl) 0 0;
  padding: var(--space-xl);
  border-top: 1px solid var(--color-border-light);
  display: flex;
}

.nav-link {
  gap: var(--space-2xs);
  padding: var(--space-l);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  flex-direction: column;
  flex: 1;
  max-width: 50%;
  text-decoration: none;
  display: flex;
}

.nav-link:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  text-decoration: none;
  box-shadow: 0 2px 8px #0000001a;
}

.nav-link.disabled {
  opacity: 0;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-link.previous {
  text-align: left;
}

.nav-link.next {
  text-align: right;
}

.nav-direction {
  font-size: var(--font-size-interface);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .025em;
}

.nav-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .next-previous {
    gap: var(--space-m);
    margin-top: var(--space-2xl);
    padding: var(--space-xl) var(--space-l);
    box-sizing: border-box;
    flex-direction: column-reverse;
    min-width: 0;
    max-width: 100%;
  }

  .next-previous .nav-link {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--space-l);
    box-sizing: border-box;
    text-align: left !important;
  }

  .next-previous .nav-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .nav-link.next {
    text-align: left !important;
  }
}

dl.meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  gap: 0 var(--space-xl);
  grid-template-rows: auto auto;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  margin-bottom: 2lh;
  display: grid;
}

dl.meta dt {
  color: var(--color-muted);
  grid-row: 1;
}

dl.meta dd {
  grid-row: 2;
  margin: 0;
}

kbd {
  background-color: var(--color-kbd-bg);
  border: 1px solid var(--color-kbd-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-bg);
  font-size: var(--font-size-interface);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  color: var(--color-kbd-text);
  margin: 0 .125em;
  padding: .25em .5em;
}

.label {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}

main ul, main ol {
  margin: 1lh 0;
  padding-left: 0;
  list-style: none;
}

main ul ul, main ul ol, main ol ul, main ol ol {
  margin-block: .25lh;
}

main ul li, main ol li {
  margin-bottom: .25lh;
  padding-left: 2em;
  position: relative;
}

main ul li li, main ol li li {
  margin-bottom: .125lh;
}

main li p {
  margin-block: 0;
}

main li p + p {
  margin-top: .5lh;
}

main ul li:before {
  content: "→";
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  line-height: 1.2;
  position: absolute;
  top: .125em;
  left: .25em;
}

main ol {
  counter-reset: step;
  margin-bottom: 2.5em;
}

main ol > li {
  counter-increment: step;
}

main ol > li:before {
  content: counter(step);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  width: 1.5em;
  height: 1.5em;
  color: var(--color-text);
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-data);
  font-family: var(--font-sans);
  border-radius: 50%;
  line-height: 1.5em;
  position: absolute;
  top: 0;
  left: 0;
}

main li:has( > [type="checkbox"]) {
  align-items: center;
  gap: .5lh;
  margin-bottom: .5lh;
  padding-left: 0;
  display: flex;
}

main li:has( > [type="checkbox"]):before {
  content: none;
}

main :is(fieldset, ul, ol) input[type="checkbox"] {
  appearance: none;
  font-size: inherit;
  line-height: inherit;
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  place-content: center;
  width: 1lh;
  height: 1lh;
  margin: 0;
  transition: all .2s;
  display: inline-grid;
}

main :is(fieldset, ul, ol) input[type="checkbox"]:checked:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 1lh;
  height: 1lh;
}

main :is(fieldset, ul, ol) input[type="checkbox"]:disabled {
  cursor: default;
}

main {
  flex-grow: 1;
}

article {
  padding: var(--space-5xl) var(--space-2xl) var(--space-2xl);
  max-inline-size: 75ch;
  max-inline-size: var(--content-max-width);
  margin-inline: auto;
}

article h1 {
  font-size: var(--font-size-title);
  margin-block-start: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2em 0;
}

blockquote {
  border-left: 4px solid var(--color-border);
  font-family: var(--font-sans);
  margin: 2em 0;
  padding: 0 0 0 1em;
}

pre {
  background: var(--color-bg-alt);
  padding: var(--space-l);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono-sans);
  overflow-x: auto;
}

pre:has(code) {
  border-left: 4px solid var(--color-border-light);
}

code {
  background-color: var(--color-bg-alt);
  font-family: var(--font-mono-prose);
  font-weight: var(--font-weight-normal);
  font-feature-settings: "calt" 1;
  border-radius: var(--radius-sm);
  padding: .1em .25em;
}

pre code {
  font-family: var(--font-mono-sans);
  background: none;
  border-radius: 0;
  padding: 0;
}

.code-block-wrapper {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  display: grid;
}

.code-block-wrapper pre {
  padding: var(--space-2xl) var(--space-4xl) var(--space-2xl) var(--space-2xl);
  white-space: pre-wrap;
  grid-area: 1 / 1;
  margin: 0;
}

.code-block-wrapper .code-copy {
  top: var(--space-s);
  z-index: 1;
  margin: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--font-size-interface);
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  grid-area: 1 / 1;
  place-self: start end;
  position: sticky;
}

.code-block-wrapper .code-copy:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

figure {
  font-family: var(--font-sans);
  margin: 1lh 0;
}

figure img, figure video, figure audio {
  max-block-size: 60vh;
  max-inline-size: 100%;
  object-fit: contain;
  background: var(--color-bg-alt);
  max-block-size: 60dvh;
  display: block;
}

figure audio {
  inline-size: 100%;
}

.embed-video {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.embed-video iframe {
  border: 0;
  block-size: 100%;
  inline-size: 100%;
  display: block;
}

figure :first-child {
  margin-top: 0;
}

figure :last-child {
  margin-bottom: 0;
}

figure:not(:has(img, video, audio, .embed-video, [data-chalk-island])) {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 1em;
}

figcaption {
  font-family: var(--font-sans);
  font-size: var(--font-size-caption);
  color: var(--color-muted);
}

figure > * + figcaption {
  margin-top: .5em;
}

figcaption :is(p, ul, ol) {
  margin-block: .5lh;
}

figcaption :is(li, ul li, ol li) {
  margin-block: 0;
}

figcaption :first-child {
  margin-top: 0;
}

figcaption :last-child {
  margin-bottom: 0;
}

aside {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  margin: 1em 0;
  padding: 1em;
}

table {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
  width: 100%;
  margin: 2em 0;
}

th, td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-s);
  text-align: left;
  vertical-align: top;
  font-size: var(--font-size-data);
}

th {
  background: var(--color-bg-alt);
}

:is(th, td) > :first-child {
  margin-top: 0;
}

:is(th, td) > :last-child {
  margin-bottom: 0;
}

:is(th, td) > :is(p, ul, ol) {
  margin-block: .5lh;
}

:is(th, td) :is(ul li, ol li) {
  margin-block: 0;
}

table.index {
  border: none;
}

table.index th {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
}

table.index td {
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-s);
}

table.index tr:last-child td {
  border-bottom: none;
}

table.index :is(td, th):first-child {
  padding-left: 0;
}

table.index :is(td, th):last-child {
  padding-right: 0;
}

.csv-table-container {
  border: 1px solid var(--color-border-light);
  margin: 1em 0;
  overflow-x: auto;
}

.csv-table {
  font-family: var(--font-sans);
  border-collapse: collapse;
  width: 100%;
  min-width: 100%;
  font-size: var(--font-size-data);
}

.csv-table th {
  background: var(--color-bg-alt);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-m) var(--space-s);
  text-align: left;
  z-index: 1;
  position: sticky;
  top: 0;
}

.csv-table td {
  padding: var(--space-s);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
  word-wrap: break-word;
  max-width: 200px;
}

.csv-table tbody tr:hover {
  background: var(--color-bg-alt);
}

.csv-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .csv-table {
    font-size: var(--font-size-body-micro);
  }

  .csv-table th, .csv-table td {
    padding: var(--space-xs) var(--space-2xs);
  }

  .csv-table td {
    max-width: 150px;
  }
}

aside.callout {
  --color-label-bg: #3b82f608;
  --color-border-light: #3b82f61a;
  --color-kbd-bg: #3b82f60d;
  --color-kbd-border: #3b82f633;
  background-color: var(--color-callout-bg);
  border-left: 4px solid var(--color-callout-border);
  color: var(--color-callout-text);
  border-radius: var(--radius-sm);
  margin: 1lh 0;
  padding: 1lh;
}

aside.callout :first-child {
  margin-top: 0;
}

aside.callout :last-child {
  margin-bottom: 0;
}

aside.callout h4 {
  font-size: var(--font-size-subheading);
  margin-top: 0;
}

aside.callout kbd {
  box-shadow: inset 0 0 0 1px var(--color-callout-bg);
  background-color: #3b82f626;
  border-color: #3b82f666;
}

aside.callout ol > li:before {
  background-color: var(--color-callout-bg);
  border-color: #3b82f640;
}

section.prompt {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  border: none;
  border-left: .25em solid var(--color-border);
  font-family: var(--font-sans);
  margin: 1lh 0;
  padding: 1lh;
  position: relative;
}

section.prompt:before {
  content: "";
  border-style: solid;
  border-width: .375em 0 .375em .375em;
  border-color: transparent transparent transparent var(--color-border);
  width: 0;
  height: 0;
  position: absolute;
  top: 1.5lh;
  left: 0;
  transform: translateY(-50%);
}

section.prompt > :first-child {
  font-weight: var(--font-weight-medium);
  margin-top: 0;
}

section.prompt > :last-child {
  margin-bottom: 0;
}

fieldset.quiz {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  border: none;
  border-left: .25em solid var(--color-border);
  font-family: var(--font-sans);
  margin: 1lh 0;
  padding: 1lh;
  position: relative;
}

fieldset.quiz:before {
  content: "";
  border-style: solid;
  border-width: .375em 0 .375em .375em;
  border-color: transparent transparent transparent var(--color-border);
  width: 0;
  height: 0;
  position: absolute;
  top: 1.5lh;
  left: 0;
  transform: translateY(-50%);
}

fieldset.quiz legend {
  font-weight: var(--font-weight-medium);
  float: left;
  margin-bottom: 1em;
  margin-left: -.5em;
  padding: 0 .5em;
}

fieldset.quiz > * {
  clear: left;
}

fieldset.quiz label {
  cursor: pointer;
  clear: left;
  margin: .5lh 0;
  display: block;
}

fieldset.quiz label:has(input[type="radio"]) {
  align-items: center;
  gap: .25lh;
  display: flex;
}

fieldset.quiz input[type="radio"] {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
  position: relative;
}

fieldset.quiz input[type="radio"]:checked {
  border-color: var(--color-callout-border);
}

fieldset.quiz input[type="radio"]:checked:after {
  content: "";
  background-color: var(--color-callout-border);
  border-radius: 50%;
  width: .75em;
  height: .75em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

fieldset.quiz label:has(input[type="checkbox"]) {
  align-items: center;
  gap: .25lh;
  display: flex;
}

fieldset.quiz input[type="checkbox"] {
  appearance: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
  position: relative;
}

fieldset.quiz input[type="checkbox"]:checked {
  border-color: var(--color-text);
}

fieldset.quiz input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

aside.internal {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-border) 40%, white);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  padding: 1lh;
  position: relative;
  overflow: hidden;
}

aside.internal:before {
  content: "";
  background-image: repeating-linear-gradient(135deg,
    var(--color-border),
    var(--color-border) .2em,
    transparent .2em,
    transparent .35em);
  z-index: 0;
  background-position: 0 0;
  width: .2em;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

aside.internal > * {
  z-index: 1;
  position: relative;
}

aside.internal :first-child {
  margin-top: 0;
}

aside.internal :last-child {
  margin-bottom: 0;
}

sup:has(a) {
  vertical-align: text-bottom;
  font-size: var(--font-size-body-micro);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}

sup a {
  color: var(--color-text);
  background-color: var(--color-kbd-bg);
  border: 1px solid var(--color-kbd-border);
  padding: 0 var(--space-s);
  margin: 0 var(--space-2xs);
  text-align: center;
  border-radius: 1em;
  text-decoration: none;
  transition: background-color .2s;
  display: inline-block;
}

sup a:hover {
  background-color: var(--color-border-light);
  text-decoration: none;
}

.footnotes {
  border-top: 1px solid var(--color-border-light);
  font-size: var(--font-size-caption);
  font-family: var(--font-sans);
  color: var(--color-muted);
  margin-top: 2lh;
  padding-top: 1lh;
}

.footnotes ol {
  counter-reset: footnote;
  padding-left: 0;
  list-style: none;
}

.footnotes li {
  counter-increment: footnote;
  margin-bottom: .5lh;
  padding-left: 2em;
  position: relative;
}

.footnotes li:before {
  content: counter(footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  position: absolute;
  top: 0;
  left: 0;
}

.footnotes p {
  margin: 0;
  line-height: 1.6;
}

.footnotes a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

.footnotes a:hover {
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}