Starlight

/*
 * The Starlight theme for a Gx docs site.
 *
 * It holds the tokens, the page layout, the prose and the component looks of
 * the default Starlight theme. The values come from @astrojs/starlight 0.42:
 * Copyright (c) 2023 Astro contributors, MIT licence.
 *
 * Use: put this file next to app/theme.css and add
 *   @import "./starlight.css";
 * after the tailwindcss import. The `starlight-shell` block writes the
 * markup that the layout rules style; the `docs` kit writes the components.
 *
 * The rules are outside the Tailwind layers, so they win over the utility
 * classes of the docs kit. The theme class is `.dark` or `.light` on the
 * html element; with no class the page follows the system.
 */

/* ---------- Tokens ---------- */

:root,
::backdrop {
  /* Colours, light mode. */
  --sl-color-white: hsl(224, 10%, 10%);
  --sl-color-gray-1: hsl(224, 14%, 16%);
  --sl-color-gray-2: hsl(224, 10%, 23%);
  --sl-color-gray-3: hsl(224, 7%, 36%);
  --sl-color-gray-4: hsl(224, 6%, 56%);
  --sl-color-gray-5: hsl(224, 6%, 77%);
  --sl-color-gray-6: hsl(224, 20%, 94%);
  --sl-color-gray-7: hsl(224, 19%, 97%);
  --sl-color-black: hsl(0, 0%, 100%);

  --sl-hue-orange: 41;
  --sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%);
  --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%);
  --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
  --sl-hue-green: 101;
  --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%);
  --sl-color-green: hsl(var(--sl-hue-green), 90%, 46%);
  --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%);
  --sl-hue-blue: 234;
  --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%);
  --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%);
  --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%);
  --sl-hue-purple: 281;
  --sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%);
  --sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%);
  --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%);
  --sl-hue-red: 339;
  --sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%);
  --sl-color-red: hsl(var(--sl-hue-red), 90%, 60%);
  --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%);

  --sl-color-accent-high: hsl(234, 80%, 30%);
  --sl-color-accent: hsl(234, 90%, 60%);
  --sl-color-accent-low: hsl(234, 88%, 90%);

  --sl-color-text: var(--sl-color-gray-2);
  --sl-color-text-accent: var(--sl-color-accent);
  --sl-color-text-invert: var(--sl-color-black);
  --sl-color-bg: var(--sl-color-black);
  --sl-color-bg-nav: var(--sl-color-gray-7);
  --sl-color-bg-sidebar: var(--sl-color-bg);
  --sl-color-bg-inline-code: var(--sl-color-gray-6);
  --sl-color-bg-accent: var(--sl-color-accent);
  --sl-color-hairline-light: var(--sl-color-gray-6);
  --sl-color-hairline: var(--sl-color-gray-6);
  --sl-color-hairline-shade: var(--sl-color-gray-6);
  --sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);

  --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06);
  --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03), 0px 5px 2px hsla(0, 0%, 0%, 0.03),
    0px 3px 2px hsla(0, 0%, 0%, 0.06), 0px 1px 1px hsla(0, 0%, 0%, 0.06);
  --sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01), 0px 16px 6px hsla(0, 0%, 0%, 0.03),
    0px 9px 5px hsla(223, 13%, 10%, 0.08), 0px 4px 4px hsla(0, 0%, 0%, 0.16),
    0px 4px 2px hsla(0, 0%, 0%, 0.04);

  --sl-badge-default-bg: var(--sl-color-accent-high);
  --sl-code-bg: var(--sl-color-gray-7);
  --sl-code-bar-bg: var(--sl-color-gray-6);

  /* Text sizes and line heights. */
  --sl-text-2xs: 0.75rem;
  --sl-text-xs: 0.8125rem;
  --sl-text-sm: 0.875rem;
  --sl-text-base: 1rem;
  --sl-text-lg: 1.125rem;
  --sl-text-xl: 1.25rem;
  --sl-text-2xl: 1.5rem;
  --sl-text-3xl: 1.8125rem;
  --sl-text-4xl: 2.1875rem;
  --sl-text-5xl: 2.625rem;
  --sl-text-6xl: 4rem;

  --sl-text-body: var(--sl-text-base);
  --sl-text-body-sm: var(--sl-text-xs);
  --sl-text-code: var(--sl-text-sm);
  --sl-text-code-sm: var(--sl-text-xs);
  --sl-text-h1: var(--sl-text-4xl);
  --sl-text-h2: var(--sl-text-3xl);
  --sl-text-h3: var(--sl-text-2xl);
  --sl-text-h4: var(--sl-text-xl);
  --sl-text-h5: var(--sl-text-lg);

  --sl-line-height: 1.75;
  --sl-line-height-headings: 1.2;

  --sl-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  --__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);
  --__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)), var(--sl-font-system-mono);

  /* Layout. */
  --sl-nav-height: 3.5rem;
  --sl-nav-pad-x: 1rem;
  --sl-nav-pad-y: 0.75rem;
  --sl-mobile-toc-height: 3rem;
  --sl-sidebar-width: 18.75rem;
  --sl-sidebar-pad-x: 1rem;
  --sl-content-width: 45rem;
  --sl-content-pad-x: 1rem;
  --sl-content-gap-y: 1rem;
  --sl-main-pad: 0 0 3vh 0;
  --sl-menu-button-size: 2rem;
  --sl-nav-gap: var(--sl-content-pad-x);
  --sl-outline-offset-inside: -0.1875rem;

  --sl-z-index-toc: 4;
  --sl-z-index-menu: 5;
  --sl-z-index-navbar: 10;
  --sl-z-index-skiplink: 20;

  /* The shadcn token names, for the registry components (REQ-STY-03). */
  --radius: 0.5rem;
  --background: var(--sl-color-bg);
  --foreground: var(--sl-color-text);
  --card: var(--sl-color-black);
  --card-foreground: var(--sl-color-text);
  --popover: var(--sl-color-gray-6);
  --popover-foreground: var(--sl-color-text);
  --primary: var(--sl-color-text-accent);
  --primary-foreground: var(--sl-color-text-invert);
  --secondary: var(--sl-color-gray-6);
  --secondary-foreground: var(--sl-color-white);
  --muted: var(--sl-color-gray-6);
  --muted-foreground: var(--sl-color-gray-3);
  --accent: var(--sl-color-gray-6);
  --accent-foreground: var(--sl-color-white);
  --destructive: var(--sl-color-red);
  --destructive-foreground: var(--sl-color-black);
  --border: var(--sl-color-gray-5);
  --input: var(--sl-color-gray-5);
  --ring: var(--sl-color-accent);
  --sidebar: var(--sl-color-bg-sidebar);
  --sidebar-foreground: var(--sl-color-text);
  --sidebar-primary: var(--sl-color-text-accent);
  --sidebar-primary-foreground: var(--sl-color-text-invert);
  --sidebar-accent: var(--sl-color-gray-6);
  --sidebar-accent-foreground: var(--sl-color-white);
  --sidebar-border: var(--sl-color-hairline-shade);
  --sidebar-ring: var(--sl-color-accent);
}

/* Colours, dark mode: the class, then the system setting. */
:root.dark,
.dark ::backdrop {
  --sl-color-white: hsl(0, 0%, 100%);
  --sl-color-gray-1: hsl(224, 20%, 94%);
  --sl-color-gray-2: hsl(224, 6%, 77%);
  --sl-color-gray-3: hsl(224, 6%, 56%);
  --sl-color-gray-4: hsl(224, 7%, 36%);
  --sl-color-gray-5: hsl(224, 10%, 23%);
  --sl-color-gray-6: hsl(224, 14%, 16%);
  --sl-color-gray-7: hsl(224, 14%, 16%);
  --sl-color-black: hsl(224, 10%, 10%);

  --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);
  --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);
  --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);
  --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);
  --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);
  --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);
  --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);
  --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);
  --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);
  --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);
  --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);
  --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);
  --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);
  --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);
  --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);

  --sl-color-accent-low: hsl(224, 54%, 20%);
  --sl-color-accent: hsl(224, 100%, 60%);
  --sl-color-accent-high: hsl(224, 100%, 85%);

  --sl-color-text-accent: var(--sl-color-accent-high);
  --sl-color-text-invert: var(--sl-color-accent-low);
  --sl-color-bg-nav: var(--sl-color-gray-6);
  --sl-color-bg-sidebar: var(--sl-color-gray-6);
  --sl-color-bg-inline-code: var(--sl-color-gray-5);
  --sl-color-bg-accent: var(--sl-color-accent-high);
  --sl-color-hairline-light: var(--sl-color-gray-5);
  --sl-color-hairline: var(--sl-color-gray-6);
  --sl-color-hairline-shade: var(--sl-color-black);
  --sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);

  --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);
  --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08),
    0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);
  --sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1),
    0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75),
    0px 4px 2px hsla(0, 0%, 0%, 0.25);

  --sl-badge-default-bg: var(--sl-color-accent-low);
  --sl-code-bg: var(--sl-color-gray-6);
  --sl-code-bar-bg: var(--sl-color-black);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light),
  :root:not(.light) ::backdrop {
    --sl-color-white: hsl(0, 0%, 100%);
    --sl-color-gray-1: hsl(224, 20%, 94%);
    --sl-color-gray-2: hsl(224, 6%, 77%);
    --sl-color-gray-3: hsl(224, 6%, 56%);
    --sl-color-gray-4: hsl(224, 7%, 36%);
    --sl-color-gray-5: hsl(224, 10%, 23%);
    --sl-color-gray-6: hsl(224, 14%, 16%);
    --sl-color-gray-7: hsl(224, 14%, 16%);
    --sl-color-black: hsl(224, 10%, 10%);

    --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);
    --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);
    --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);
    --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);
    --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);
    --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);
    --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);
    --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);
    --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);
    --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);
    --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);
    --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);
    --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);
    --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);
    --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);

    --sl-color-accent-low: hsl(224, 54%, 20%);
    --sl-color-accent: hsl(224, 100%, 60%);
    --sl-color-accent-high: hsl(224, 100%, 85%);

    --sl-color-text-accent: var(--sl-color-accent-high);
    --sl-color-text-invert: var(--sl-color-accent-low);
    --sl-color-bg-nav: var(--sl-color-gray-6);
    --sl-color-bg-sidebar: var(--sl-color-gray-6);
    --sl-color-bg-inline-code: var(--sl-color-gray-5);
    --sl-color-bg-accent: var(--sl-color-accent-high);
    --sl-color-hairline-light: var(--sl-color-gray-5);
    --sl-color-hairline: var(--sl-color-gray-6);
    --sl-color-hairline-shade: var(--sl-color-black);
    --sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);

    --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);
    --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08),
      0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15);
    --sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1),
      0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75),
      0px 4px 2px hsla(0, 0%, 0%, 0.25);

    --sl-badge-default-bg: var(--sl-color-accent-low);
    --sl-code-bg: var(--sl-color-gray-6);
    --sl-code-bar-bg: var(--sl-color-black);
  }
}

@media (min-width: 50em) {
  :root {
    --sl-nav-height: 4rem;
    --sl-nav-pad-x: 1.5rem;
    --sl-text-h1: var(--sl-text-5xl);
    --sl-text-h2: var(--sl-text-4xl);
    --sl-text-h3: var(--sl-text-3xl);
    --sl-text-h4: var(--sl-text-2xl);
  }
  :root.sl-has-sidebar {
    --sl-content-inline-start: var(--sl-sidebar-width);
  }
}

@media (min-width: 72rem) {
  :root {
    --sl-content-pad-x: 1.5rem;
    --sl-mobile-toc-height: 0rem;
  }
}

:root:not(.sl-has-toc) {
  --sl-mobile-toc-height: 0rem;
}
:root:not(.sl-has-sidebar) {
  --sl-content-width: 67.5rem;
}

/* ---------- Document ---------- */

html {
  color-scheme: light;
  accent-color: var(--sl-color-accent);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A heading that a link targets stays below the header. */
  scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
}
html.dark {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    color-scheme: dark;
  }
}
@media (min-width: 72em) {
  html {
    scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
  }
}

body {
  font-family: var(--__sl-font);
  line-height: var(--sl-line-height);
  -webkit-font-smoothing: antialiased;
  color: var(--sl-color-text);
  background-color: var(--sl-color-bg);
}

code,
kbd,
samp,
pre {
  font-family: var(--__sl-font-mono);
}

.sl-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ---------- Page frame ---------- */

.sl-skip-link {
  clip: rect(0, 0, 0, 0);
  position: fixed;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
}
.sl-skip-link:focus {
  clip: unset;
  z-index: var(--sl-z-index-skiplink);
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--sl-color-text-invert);
  background-color: var(--sl-color-text-accent);
  box-shadow: var(--sl-shadow-lg);
}

.sl-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sl-header {
  z-index: var(--sl-z-index-navbar);
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: var(--sl-nav-height);
  border-bottom: 1px solid var(--sl-color-hairline-shade);
  padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
  background-color: var(--sl-color-bg-nav);
}
.sl-has-sidebar .sl-header {
  padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
}

.sl-header-inner {
  display: flex;
  gap: var(--sl-nav-gap);
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.sl-title-wrapper {
  display: flex;
  overflow: clip;
  padding: 0.25rem;
  margin: -0.25rem;
  min-width: 0;
}
.sl-header-search {
  display: flex;
}
.sl-right-group {
  display: none;
}
.sl-right-group,
.sl-social-icons {
  gap: 1rem;
  align-items: center;
}
.sl-social-icons {
  display: flex;
}
.sl-right-group .sl-social-icons::after {
  content: '';
  height: 2rem;
  border-inline-end: 1px solid var(--sl-color-gray-5);
}
.sl-social-icons:empty {
  display: none;
}
.sl-social-link {
  display: flex;
  color: var(--sl-color-text-accent);
  padding: 0.5em;
  margin: -0.5em;
}
.sl-social-link:hover {
  color: var(--sl-color-white);
}

/* The site title and the version control. */
.sl-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sl-site-title {
  display: flex;
  align-items: center;
  gap: var(--sl-nav-gap);
  font-size: var(--sl-text-h4);
  font-weight: 600;
  color: var(--sl-color-text-accent);
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
}
.sl-site-title span {
  overflow: hidden;
}
.sl-version {
  font-size: var(--sl-text-xs);
  color: var(--sl-color-gray-3);
}
.sl-version-select {
  font-size: var(--sl-text-xs);
  background: transparent;
  color: inherit;
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.25rem;
}

/* The search button. */
.sl-search-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1px 6px;
  border: 0;
  background-color: transparent;
  color: var(--sl-color-gray-1);
  cursor: pointer;
  height: 2.5rem;
  font-size: var(--sl-text-xl);
}
.sl-search-button > span,
.sl-search-button > kbd {
  display: none;
}
.sl-search-button > kbd {
  border-radius: 0.25rem;
  font-family: var(--__sl-font);
  font-size: var(--sl-text-2xs);
  gap: 0.25em;
  padding-inline: 0.375rem;
  background-color: var(--sl-color-gray-6);
}
.sl-search-button kbd kbd {
  font-family: var(--__sl-font);
}

/* The theme select. */
.sl-select {
  --sl-label-icon-size: 0.875rem;
  --sl-caret-size: 1.25rem;
  --sl-inline-padding: 0.5rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--sl-color-gray-2);
}
.sl-select:hover {
  color: var(--sl-color-white);
}
.sl-select .sl-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.sl-select select {
  border: 0;
  padding-block: 0.625rem;
  padding-inline: calc(var(--sl-label-icon-size) + var(--sl-inline-padding) + 0.25rem)
    calc(var(--sl-caret-size) + var(--sl-inline-padding) + 0.25rem);
  margin-inline: calc(var(--sl-inline-padding) * -1);
  width: calc(6.25em + var(--sl-inline-padding) * 2);
  background-color: transparent;
  text-overflow: ellipsis;
  color: inherit;
  cursor: pointer;
  appearance: none;
}
.sl-select option {
  background-color: var(--sl-color-bg-nav);
  color: var(--sl-color-gray-1);
}
.sl-select .sl-select-icon {
  font-size: var(--sl-label-icon-size);
  inset-inline-start: 0;
}
.sl-select .sl-select-caret {
  font-size: var(--sl-caret-size);
  inset-inline-end: 0;
}

/* The mobile menu button. */
.sl-menu-button {
  display: flex;
  position: fixed;
  top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
  inset-inline-end: var(--sl-nav-pad-x);
  z-index: var(--sl-z-index-navbar);
  border: 0;
  border-radius: 50%;
  width: var(--sl-menu-button-size);
  height: var(--sl-menu-button-size);
  padding: 0.5rem;
  background-color: var(--sl-color-black);
  color: var(--sl-color-white);
  box-shadow: var(--sl-shadow-md);
  cursor: pointer;
}
.sl-menu-button[aria-expanded='true'] {
  background-color: var(--sl-color-gray-5);
  box-shadow: none;
}
.dark .sl-menu-button {
  background-color: var(--sl-color-white);
  color: var(--sl-color-black);
}
.dark .sl-menu-button[aria-expanded='true'] {
  background-color: var(--sl-color-gray-2);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .sl-menu-button {
    background-color: var(--sl-color-white);
    color: var(--sl-color-black);
  }
  :root:not(.light) .sl-menu-button[aria-expanded='true'] {
    background-color: var(--sl-color-gray-2);
  }
}
.sl-menu-button[aria-expanded='true'] .sl-open-menu,
.sl-menu-button:not([aria-expanded='true']) .sl-close-menu {
  display: none;
}

/* The sidebar. */
.sl-sidebar-pane {
  position: fixed;
  z-index: var(--sl-z-index-menu);
  inset-block: var(--sl-nav-height) 0;
  inset-inline-start: 0;
  width: 100%;
  background-color: var(--sl-color-black);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.sl-sidebar-content {
  display: flex;
  height: 100%;
  min-height: max-content;
  padding: 1rem var(--sl-sidebar-pad-x) 0;
  flex-direction: column;
  gap: 1rem;
}
.sl-sidebar-content ul {
  --sl-sidebar-item-padding-inline: 0.5rem;
  list-style: none;
  padding: 0;
}
.sl-sidebar-content li {
  overflow-wrap: anywhere;
}
.sl-sidebar-content ul ul li {
  margin-inline-start: var(--sl-sidebar-item-padding-inline);
  border-inline-start: 1px solid var(--sl-color-hairline-light);
  padding-inline-start: var(--sl-sidebar-item-padding-inline);
}
.sl-sidebar-content .sl-large {
  font-size: var(--sl-text-lg);
  font-weight: 600;
  color: var(--sl-color-white);
}
.sl-top-level > li + li {
  margin-top: 0.75rem;
}
.sl-sidebar-content summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2em var(--sl-sidebar-item-padding-inline);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.sl-sidebar-content summary::marker,
.sl-sidebar-content summary::-webkit-details-marker {
  display: none;
}
.sl-sidebar-content .sl-caret {
  font-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
  flex-shrink: 0;
}
.sl-sidebar-content [open] > summary .sl-caret {
  transform: rotateZ(90deg);
}
.sl-sidebar-content a.sl-nav-link {
  display: block;
  border-radius: 0.25rem;
  text-decoration: none;
  color: var(--sl-color-gray-2);
  padding: 0.3em var(--sl-sidebar-item-padding-inline);
  line-height: 1.4;
}
.sl-sidebar-content a.sl-nav-link:hover,
.sl-sidebar-content a.sl-nav-link:focus {
  color: var(--sl-color-white);
}
.sl-sidebar-content a.sl-nav-link[aria-current='page'],
.sl-sidebar-content a.sl-nav-link[aria-current='page']:hover,
.sl-sidebar-content a.sl-nav-link[aria-current='page']:focus {
  font-weight: 600;
  color: var(--sl-color-text-invert);
  background-color: var(--sl-color-text-accent);
}
.sl-sidebar-content a.sl-nav-link > *:not(:last-child),
.sl-sidebar-content .sl-group-label > *:not(:last-child) {
  margin-inline-end: 0.25em;
}

.sl-badge {
  display: inline-block;
  border: 1px solid var(--sl-color-accent);
  border-radius: 0.25rem;
  font-family: var(--sl-font-system-mono);
  line-height: normal;
  color: #fff;
  background-color: var(--sl-badge-default-bg);
  overflow-wrap: anywhere;
  font-size: var(--sl-text-xs);
  padding: 0.125rem 0.25rem;
}
.sl-sidebar-content .sl-badge {
  line-height: 1;
  font-size: var(--sl-text-xs);
  padding: 0.125rem 0.375rem;
}
.sl-sidebar-content a[aria-current='page'] > .sl-badge {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
}

.sl-mobile-preferences {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid var(--sl-color-gray-6);
  column-gap: 1rem;
  padding: 0.5rem 0;
}
.sl-mobile-preferences .sl-social-icons {
  margin-inline-end: auto;
  padding-block: 1rem;
}

/* The main frame and its two columns. */
.sl-main-frame {
  padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
  padding-inline-start: var(--sl-content-inline-start);
}
.sl-main-pane {
  isolation: isolate;
}
.sl-main {
  padding: var(--sl-main-pad);
}
.sl-content-panel {
  padding: 1.5rem var(--sl-content-pad-x);
}
.sl-content-panel + .sl-content-panel {
  border-top: 1px solid var(--sl-color-hairline);
}
.sl-container {
  max-width: var(--sl-content-width);
}
.sl-container > * + * {
  margin-top: 1.5rem;
}
.sl-page-title {
  margin-top: 1rem;
  font-size: var(--sl-text-h1);
  line-height: var(--sl-line-height-headings);
  font-weight: 600;
  color: var(--sl-color-white);
}

/* The table of contents. */
.sl-right-sidebar-panel {
  display: none;
  padding: 1rem var(--sl-sidebar-pad-x);
}
.sl-toc-container {
  width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
}
.sl-right-sidebar-panel h2 {
  color: var(--sl-color-white);
  font-size: var(--sl-text-h5);
  font-weight: 600;
  line-height: var(--sl-line-height-headings);
  margin-bottom: 0.5rem;
}
.sl-right-sidebar-panel a {
  display: block;
  font-size: var(--sl-text-xs);
  text-decoration: none;
  color: var(--sl-color-gray-3);
  overflow-wrap: anywhere;
}
.sl-right-sidebar-panel a:hover {
  color: var(--sl-color-white);
}
.sl-toc-list {
  padding: 0;
  list-style: none;
}
.sl-toc-list a {
  --pad-inline: 0.5rem;
  display: block;
  border-radius: 0.25rem;
  padding-block: 0.25rem;
  padding-inline: calc(1rem * var(--depth, 0) + var(--pad-inline)) var(--pad-inline);
  line-height: 1.25;
}
.sl-toc-list a[data-level='3'] {
  --depth: 1;
}
.sl-toc-list a[data-level='4'] {
  --depth: 2;
}
.sl-toc-list a[data-level='5'] {
  --depth: 3;
}
.sl-toc-list a[data-level='6'] {
  --depth: 4;
}
/* The runtime marks the entry of the heading in view. Before the first
   heading, the current entry is the first one: the top of the page. */
.sl-right-sidebar-panel .sl-toc-list a[aria-current='location'],
.sl-right-sidebar-panel .sl-toc-list:not(:has([aria-current='location'])) > li:first-child > a {
  color: var(--sl-color-text-accent);
}

.sl-mobile-toc nav {
  position: fixed;
  z-index: var(--sl-z-index-toc);
  top: calc(var(--sl-nav-height) - 1px);
  inset-inline: 0;
  border-top: 1px solid var(--sl-color-gray-5);
  background-color: var(--sl-color-bg-nav);
}
.sl-mobile-toc summary {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  height: var(--sl-mobile-toc-height);
  border-bottom: 1px solid var(--sl-color-hairline-shade);
  padding: 0.5rem 1rem;
  font-size: var(--sl-text-xs);
  outline-offset: var(--sl-outline-offset-inside);
}
.sl-mobile-toc summary::marker,
.sl-mobile-toc summary::-webkit-details-marker {
  display: none;
}
.sl-mobile-toc .sl-toggle {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.5rem;
  padding-block: 0.5rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.5rem;
  line-height: 1;
  background-color: var(--sl-color-black);
  user-select: none;
  cursor: pointer;
}
.sl-mobile-toc details[open] .sl-toggle {
  color: var(--sl-color-white);
  border-color: var(--sl-color-accent);
}
.sl-mobile-toc details .sl-toggle:hover {
  color: var(--sl-color-white);
  border-color: var(--sl-color-gray-2);
}
.sl-mobile-toc .sl-caret {
  font-size: 1rem;
}
.sl-mobile-toc details[open] .sl-caret {
  transform: rotateZ(90deg);
}
.sl-mobile-toc .sl-display-current {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--sl-color-white);
}
.sl-mobile-toc .sl-dropdown {
  --border-top: 1px;
  margin-top: calc(-1 * var(--border-top));
  border: var(--border-top) solid var(--sl-color-gray-6);
  border-top-color: var(--sl-color-hairline-shade);
  max-height: calc(85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height));
  overflow-y: auto;
  background-color: var(--sl-color-black);
  box-shadow: var(--sl-shadow-md);
  overscroll-behavior: contain;
}
.sl-mobile-toc .sl-toc-list a {
  --pad-inline: 1rem;
  display: flex;
  justify-content: space-between;
  gap: var(--pad-inline);
  border-top: 1px solid var(--sl-color-gray-6);
  border-radius: 0;
  padding-block: 0.5rem;
  color: var(--sl-color-text);
  font-size: var(--sl-text-sm);
  text-decoration: none;
  outline-offset: var(--sl-outline-offset-inside);
}
.sl-mobile-toc .sl-toc-list > li:first-child > a {
  border-top: 0;
}
.sl-mobile-toc .sl-display-current:empty::before {
  content: 'Overview';
}
.sl-mobile-toc .sl-toc-list a[aria-current='location'],
.sl-mobile-toc .sl-toc-list:not(:has([aria-current='location'])) > li:first-child > a {
  color: var(--sl-color-white);
}
.sl-mobile-toc .sl-toc-list a[aria-current='location']::after,
.sl-mobile-toc .sl-toc-list:not(:has([aria-current='location'])) > li:first-child > a::after {
  content: '';
  width: 1rem;
  background-color: var(--sl-color-text-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.914 4.206a.583.583 0 0 0-.828 0L5.74 8.557 3.914 6.726a.596.596 0 0 0-.828.857l2.24 2.24a.583.583 0 0 0 .828 0l4.76-4.76a.583.583 0 0 0 0-.857Z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M10.914 4.206a.583.583 0 0 0-.828 0L5.74 8.557 3.914 6.726a.596.596 0 0 0-.828.857l2.24 2.24a.583.583 0 0 0 .828 0l4.76-4.76a.583.583 0 0 0 0-.857Z'/%3E%3C/svg%3E") no-repeat;
  flex-shrink: 0;
}

/* The page footer: the edit link, the date and the page links. */
.sl-footer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sl-meta {
  display: flex;
  gap: 0.75rem 3rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 3rem;
  font-size: var(--sl-text-sm);
  color: var(--sl-color-gray-3);
}
.sl-meta > p:only-child {
  margin-inline-start: auto;
}
.sl-edit-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  text-decoration: none;
  color: var(--sl-color-gray-3);
}
.sl-edit-link .sl-icon {
  font-size: 1.2em;
}
.sl-edit-link:hover {
  color: var(--sl-color-white);
}
.sl-pagination {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
}
.sl-pagination a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  flex-basis: calc(50% - 0.5rem);
  flex-grow: 1;
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.5rem;
  padding: 1rem;
  text-decoration: none;
  color: var(--sl-color-gray-2);
  box-shadow: var(--sl-shadow-md);
  overflow-wrap: anywhere;
}
.sl-pagination a[rel='next'] {
  justify-content: end;
  text-align: end;
  flex-direction: row-reverse;
}
.sl-pagination a:hover {
  border-color: var(--sl-color-gray-2);
}
.sl-pagination .sl-link-title {
  color: var(--sl-color-white);
  font-size: var(--sl-text-2xl);
  line-height: var(--sl-line-height-headings);
}
.sl-pagination .sl-icon {
  font-size: 1.5rem;
}

/* The hero of a splash page. */
.sl-hero {
  display: grid;
  grid-template-columns: 100%;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}
.sl-hero > img,
.sl-hero > .sl-hero-image {
  object-fit: contain;
  width: min(70%, 20rem);
  height: auto;
  margin-inline: auto;
}
.sl-hero .sl-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
  text-align: center;
}
.sl-hero .sl-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.sl-hero .sl-copy > * {
  max-width: 50ch;
}
.sl-hero h1 {
  font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
  line-height: var(--sl-line-height-headings);
  font-weight: 600;
  color: var(--sl-color-white);
}
.sl-hero .sl-tagline {
  font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
  color: var(--sl-color-gray-2);
}
.sl-hero .sl-actions {
  display: flex;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* The search dialog. */
.sl-search-dialog {
  margin: 0;
  padding: 0;
  color: var(--sl-color-text);
  background-color: var(--sl-color-gray-6);
  border: 1px solid var(--sl-color-gray-5);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  box-shadow: var(--sl-shadow-lg);
}
.sl-search-dialog[open] {
  display: flex;
}
.sl-search-dialog::backdrop {
  background-color: var(--sl-color-backdrop-overlay);
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
}
.sl-search-frame {
  position: relative;
  display: flex;
  overflow: auto;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  padding: 1rem;
}
.sl-search-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sl-search-field {
  position: relative;
  display: flex;
  flex-grow: 1;
  align-items: center;
}
.sl-search-field .sl-icon {
  position: absolute;
  inset-inline-start: 1.25rem;
  font-size: 1.25rem;
  color: var(--sl-color-text);
  pointer-events: none;
}
.sl-search-input {
  width: 100%;
  height: 4rem;
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.5rem;
  padding-inline: 3.375rem 1rem;
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--sl-color-gray-2);
  background-color: var(--sl-color-black);
}
.sl-search-input::placeholder {
  color: var(--sl-color-gray-2);
  opacity: 0.2;
}
.sl-search-input:focus {
  outline: none;
  border-color: var(--sl-color-accent);
}
.sl-search-close {
  flex-shrink: 0;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--sl-color-text-accent);
}
.sl-search-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--sl-color-gray-2);
}
.sl-search-results .gx-search-result {
  display: block;
  border: 0;
  border-radius: 0.3125rem;
  padding: 0.9375rem 1.25rem;
  text-decoration: none;
  background-color: var(--sl-color-black);
  outline: 1px solid var(--sl-color-gray-5);
}
.sl-search-results .gx-search-result:hover,
.sl-search-results .gx-search-result:focus {
  outline-color: var(--sl-color-accent);
  background-color: var(--sl-color-gray-6);
}
.sl-search-results .gx-search-result > span:first-child {
  color: var(--sl-color-white);
  font-size: var(--sl-text-xl);
  font-weight: 600;
  line-height: var(--sl-line-height-headings);
}
.sl-search-results .gx-search-result > span + span {
  margin-top: 0.25rem;
  font-size: var(--sl-text-sm);
  color: var(--sl-color-gray-2);
}
.sl-search-results mark {
  color: var(--sl-color-gray-2);
  background-color: transparent;
  font-weight: 600;
}

/* ---------- Prose ---------- */

.sl-markdown-content
  :not(a, strong, em, del, span, input, code, br)
  + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
  margin-top: var(--sl-content-gap-y);
}
.sl-markdown-content
  :not(h1, h2, h3, h4, h5, h6)
  + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
  margin-top: 1.5em;
}
.sl-markdown-content :is(ul, ol):not(:where(.not-content *)) {
  padding-inline-start: 2.5rem;
}
.sl-markdown-content ul:not(:where(.not-content *)) {
  list-style: disc;
}
.sl-markdown-content ul ul:not(:where(.not-content *)) {
  list-style: circle;
}
.sl-markdown-content ol:not(:where(.not-content *)) {
  list-style: decimal;
}
.sl-markdown-content li + li:not(:where(.not-content *)),
.sl-markdown-content dt + dt:not(:where(.not-content *)),
.sl-markdown-content dt + dd:not(:where(.not-content *)),
.sl-markdown-content dd + dd:not(:where(.not-content *)) {
  margin-top: 0.25rem;
}
.sl-markdown-content li:not(:where(.not-content *)) {
  overflow-wrap: anywhere;
}
.sl-markdown-content
  :is(ol, ul):has(> li > :not(a, strong, em, del, span, input, code, br, script, ol, ul))
  > li
  > :last-child:not(a, strong, em, del, span, input, code, br, script, :where(.not-content *)) {
  margin-bottom: 1.25rem;
}
.sl-markdown-content dt:not(:where(.not-content *)) {
  font-weight: 700;
}
.sl-markdown-content dd:not(:where(.not-content *)) {
  padding-inline-start: 1rem;
}
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
  color: var(--sl-color-white);
  line-height: var(--sl-line-height-headings);
  font-weight: 600;
}
.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
  display: block;
  max-width: 100%;
  height: auto;
}
.sl-markdown-content h1:not(:where(.not-content *)) {
  font-size: var(--sl-text-h1);
}
.sl-markdown-content h2:not(:where(.not-content *)) {
  font-size: var(--sl-text-h2);
}
.sl-markdown-content h3:not(:where(.not-content *)) {
  font-size: var(--sl-text-h3);
}
.sl-markdown-content h4:not(:where(.not-content *)) {
  font-size: var(--sl-text-h4);
}
.sl-markdown-content h5:not(:where(.not-content *)) {
  font-size: var(--sl-text-h5);
}
.sl-markdown-content a:not(:where(.not-content *)) {
  color: var(--sl-color-text-accent);
  text-decoration: underline;
}
.sl-markdown-content a:hover:not(:where(.not-content *)) {
  color: var(--sl-color-white);
}
.sl-markdown-content code:not(:where(.not-content *)) {
  background-color: var(--sl-color-bg-inline-code);
  margin-block: -0.125rem;
  padding: 0.125rem 0.375rem;
  font-size: var(--sl-text-code-sm);
}
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
  font-size: inherit;
}
.sl-markdown-content blockquote:not(:where(.not-content *)) {
  border-inline-start: 1px solid var(--sl-color-gray-5);
  padding-inline-start: 1rem;
}
.sl-markdown-content table:not(:where(.not-content *)) {
  display: block;
  overflow: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
  border-bottom: 1px solid var(--sl-color-gray-5);
  padding: 0.5rem 1rem;
  vertical-align: baseline;
}
.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
  padding-inline-start: 0;
}
.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
  padding-inline-end: 0;
}
.sl-markdown-content th:not(:where(.not-content *)) {
  color: var(--sl-color-white);
  font-weight: 600;
}
.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
  text-align: start;
}
.sl-markdown-content hr:not(:where(.not-content *)) {
  border: 0;
  border-bottom: 1px solid var(--sl-color-hairline);
}
.sl-markdown-content details:not(:where(.not-content *)) {
  border-inline-start: 2px solid var(--sl-color-gray-5);
  padding-inline-start: 1rem;
}
.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
  border-color: var(--sl-color-text-accent);
}
.sl-markdown-content summary:not(:where(.not-content *)) {
  color: var(--sl-color-white);
  cursor: pointer;
  font-weight: 600;
}
.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
  margin-bottom: 1rem;
}

/* The heading anchor: a link icon after the heading text. It shows when
   the pointer is on the heading or the link has focus. */
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a.anchor {
  display: inline-block;
  width: 0.8275em;
  height: 0.8275em;
  margin-inline-start: 0.25em;
  overflow: hidden;
  vertical-align: middle;
  color: transparent;
  user-select: none;
  background-color: var(--sl-color-text-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a.anchor:hover {
  background-color: var(--sl-color-white);
}
@media (hover: hover) {
  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a.anchor {
    opacity: 0;
  }
  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a.anchor:focus,
  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):hover > a.anchor {
    opacity: 1;
  }
}

/* ---------- Code frames ---------- */

/* The prose rules set the space above a code frame. This rule is weaker
   than they are and stronger than the code stylesheet of Gx. */
figure.gx-code {
  margin-top: 0;
}

/* The token colours: Night Owl, as the code blocks of Starlight use. The
   selectors are stronger than those of the code stylesheet of Gx. */
:root:root {
  --gx-code-bg: var(--sl-code-bg);
  --gx-code-border: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);
  --sl-tok-fg: #403f53;
  --sl-tok-keyword: #8844ae;
  --sl-tok-function: #3b61b0;
  --sl-tok-string: #984e4d;
  --sl-tok-number: #aa0982;
  --sl-tok-type: #096e72;
  --sl-tok-class: #3b61b0;
  --sl-tok-builtin: #3b61b0;
  --sl-tok-comment: #5d6376;
  --sl-tok-variable: #3b61b0;
  --sl-tok-constant: #a24848;
}
:root.dark:root {
  --sl-tok-fg: #d6deeb;
  --sl-tok-keyword: #c792ea;
  --sl-tok-function: #82aaff;
  --sl-tok-string: #ecc48d;
  --sl-tok-number: #f78c6c;
  --sl-tok-type: #7fdbca;
  --sl-tok-class: #ffcb8b;
  --sl-tok-builtin: #c5e478;
  --sl-tok-comment: #919f9f;
  --sl-tok-variable: #b2ccd6;
  --sl-tok-constant: #ff6a83;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light):root {
    --sl-tok-fg: #d6deeb;
    --sl-tok-keyword: #c792ea;
    --sl-tok-function: #82aaff;
    --sl-tok-string: #ecc48d;
    --sl-tok-number: #f78c6c;
    --sl-tok-type: #7fdbca;
    --sl-tok-class: #ffcb8b;
    --sl-tok-builtin: #c5e478;
    --sl-tok-comment: #919f9f;
    --sl-tok-variable: #b2ccd6;
    --sl-tok-constant: #ff6a83;
  }
}
:root:root,
:root.dark:root,
:root:not(.light):root {
  --gx-code-text: var(--sl-tok-fg);
  --gx-code-text-whitespace: var(--sl-tok-fg);
  --gx-code-error: var(--sl-tok-constant);
  --gx-code-other: var(--sl-tok-fg);
  --gx-code-punctuation: var(--sl-tok-fg);
  --gx-code-operator: var(--sl-tok-keyword);
  --gx-code-operator-word: var(--sl-tok-keyword);
  --gx-code-keyword: var(--sl-tok-keyword);
  --gx-code-keyword-constant: var(--sl-tok-constant);
  --gx-code-keyword-declaration: var(--sl-tok-keyword);
  --gx-code-keyword-namespace: var(--sl-tok-keyword);
  --gx-code-keyword-pseudo: var(--sl-tok-keyword);
  --gx-code-keyword-reserved: var(--sl-tok-keyword);
  --gx-code-keyword-type: var(--sl-tok-keyword);
  --gx-code-name: var(--sl-tok-fg);
  --gx-code-name-attribute: var(--sl-tok-builtin);
  --gx-code-name-builtin: var(--sl-tok-builtin);
  --gx-code-name-builtin-pseudo: var(--sl-tok-builtin);
  --gx-code-name-class: var(--sl-tok-class);
  --gx-code-name-constant: var(--sl-tok-function);
  --gx-code-name-decorator: var(--sl-tok-builtin);
  --gx-code-name-entity: var(--sl-tok-class);
  --gx-code-name-exception: var(--sl-tok-class);
  --gx-code-name-function: var(--sl-tok-function);
  --gx-code-name-function-magic: var(--sl-tok-function);
  --gx-code-name-label: var(--sl-tok-fg);
  --gx-code-name-namespace: var(--sl-tok-fg);
  --gx-code-name-other: var(--sl-tok-fg);
  --gx-code-name-property: var(--sl-tok-type);
  --gx-code-name-tag: var(--sl-tok-type);
  --gx-code-name-variable: var(--sl-tok-variable);
  --gx-code-name-variable-class: var(--sl-tok-variable);
  --gx-code-name-variable-global: var(--sl-tok-variable);
  --gx-code-name-variable-instance: var(--sl-tok-variable);
  --gx-code-name-variable-magic: var(--sl-tok-variable);
  --gx-code-literal: var(--sl-tok-string);
  --gx-code-literal-date: var(--sl-tok-string);
  --gx-code-literal-string: var(--sl-tok-string);
  --gx-code-literal-string-affix: var(--sl-tok-string);
  --gx-code-literal-string-backtick: var(--sl-tok-string);
  --gx-code-literal-string-char: var(--sl-tok-string);
  --gx-code-literal-string-delimiter: var(--sl-tok-string);
  --gx-code-literal-string-doc: var(--sl-tok-comment);
  --gx-code-literal-string-double: var(--sl-tok-string);
  --gx-code-literal-string-escape: var(--sl-tok-number);
  --gx-code-literal-string-heredoc: var(--sl-tok-string);
  --gx-code-literal-string-interpol: var(--sl-tok-variable);
  --gx-code-literal-string-other: var(--sl-tok-string);
  --gx-code-literal-string-regex: var(--sl-tok-type);
  --gx-code-literal-string-single: var(--sl-tok-string);
  --gx-code-literal-string-symbol: var(--sl-tok-string);
  --gx-code-literal-number: var(--sl-tok-number);
  --gx-code-literal-number-bin: var(--sl-tok-number);
  --gx-code-literal-number-float: var(--sl-tok-number);
  --gx-code-literal-number-hex: var(--sl-tok-number);
  --gx-code-literal-number-integer: var(--sl-tok-number);
  --gx-code-literal-number-integer-long: var(--sl-tok-number);
  --gx-code-literal-number-oct: var(--sl-tok-number);
  --gx-code-comment: var(--sl-tok-comment);
  --gx-code-comment-hashbang: var(--sl-tok-comment);
  --gx-code-comment-multiline: var(--sl-tok-comment);
  --gx-code-comment-preproc: var(--sl-tok-keyword);
  --gx-code-comment-preproc-file: var(--sl-tok-string);
  --gx-code-comment-single: var(--sl-tok-comment);
  --gx-code-comment-special: var(--sl-tok-comment);
  --gx-code-generic-deleted: var(--sl-tok-constant);
  --gx-code-generic-inserted: var(--sl-tok-builtin);
  --gx-code-generic-heading: var(--sl-tok-function);
  --gx-code-generic-subheading: var(--sl-tok-function);
}

:root .gx-code {
  position: relative;
  margin-inline: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  color: var(--sl-tok-fg);
  font-family: var(--__sl-font);
  font-size: 0.9rem;
  line-height: 1.65;
}
:root .gx-code [class^='tok-'] {
  font-weight: inherit;
  font-style: normal;
}
:root .gx-code-pre {
  margin: 0;
  /* The code of Starlight starts half a pixel before the padding. */
  padding: 0.75rem 1rem 0.75rem calc(1rem - 0.5px);
  border: 1px solid var(--gx-code-border);
  border-radius: 0;
  overflow-x: auto;
  background: var(--sl-code-bg);
  color: var(--sl-tok-fg);
  font-family: var(--__sl-font-mono);
  font-size: var(--sl-text-code);
  line-height: var(--sl-line-height);
  max-height: none;
}
:root .gx-code-pre > code {
  all: unset;
  display: block;
  font-family: var(--__sl-font-mono);
}
:root .gx-code-pre .line {
  display: inline;
  min-height: 0;
}
:root .gx-code-pre .line.mark,
:root .gx-code-pre .line.ins,
:root .gx-code-pre .line.del {
  display: inline-block;
  width: 100%;
}
:root .gx-code-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: calc(1.65em + 0.5rem + 2px);
  padding: 0.25rem 1rem calc(0.25rem + 1px);
  position: relative;
  border: 1px solid var(--gx-code-border);
  border-bottom: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.025ch;
  color: var(--sl-color-text);
  background: var(--sl-code-bar-bg);
}
:root .gx-code-bar::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-bottom: 1px solid var(--gx-code-border);
}
:root .gx-code-bar .gx-dot {
  display: none;
}
:root .gx-code.terminal .gx-code-bar::before {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 1rem;
  width: 2.1rem;
  height: 0.56rem;
  line-height: 0;
  background-color: var(--gx-code-border);
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E") no-repeat;
}
:root .gx-code-bar .gx-code-title {
  margin: 0;
  opacity: 1;
}
/* A file frame: the title is a tab at the left of the bar. */
:root .gx-code:not(.terminal) .gx-code-bar {
  justify-content: flex-start;
  padding: 0;
  background: var(--sl-code-bar-bg);
}
:root .gx-code:not(.terminal) .gx-code-bar .gx-code-title {
  padding: calc(0.25rem + 1px) 1rem;
  border-top: 1px solid var(--sl-color-text-accent);
  color: var(--sl-color-text);
  background: var(--sl-code-bg);
}
:root .gx-code-bar + .gx-code-pre {
  border-top: 0;
}
/* The copy button: an icon at the top right of the code. */
:root .gx-copy {
  position: absolute;
  top: calc(1px + 0.4rem);
  right: calc(1px + 0.5rem);
  z-index: 1;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sl-color-text), transparent 60%);
  border-radius: 0.2rem;
  font-size: 0;
  color: transparent;
  background: var(--sl-code-bg);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, background 0.2s;
}
:root .gx-code-bar > .gx-copy {
  top: calc(1.9rem + 2px + 0.5rem);
}
:root .gx-copy::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: 0.475rem;
  background-color: var(--sl-color-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
:root .gx-copy:hover,
:root .gx-copy:focus-visible {
  opacity: 1;
}
@media (hover: hover) {
  :root .gx-copy {
    opacity: 0;
  }
  :root .gx-code:hover .gx-copy:not(:hover),
  :root .gx-code:focus-within .gx-copy:not(:hover) {
    opacity: 0.75;
  }
}

/* ---------- Docs kit ---------- */

/* Aside. */
.gx-aside {
  --sl-color-asides-text-accent: var(--sl-color-blue-high);
  --sl-color-asides-border: var(--sl-color-blue);
  margin-block: 0;
  padding: 1rem;
  border: 0;
  border-inline-start: 0.25rem solid var(--sl-color-asides-border);
  border-radius: 0;
  font-size: inherit;
  color: var(--sl-color-white);
  background-color: var(--sl-color-blue-low);
}
.gx-aside[data-kind='tip'] {
  --sl-color-asides-text-accent: var(--sl-color-purple-high);
  --sl-color-asides-border: var(--sl-color-purple);
  background-color: var(--sl-color-purple-low);
}
.gx-aside[data-kind='caution'] {
  --sl-color-asides-text-accent: var(--sl-color-orange-high);
  --sl-color-asides-border: var(--sl-color-orange);
  background-color: var(--sl-color-orange-low);
}
.gx-aside[data-kind='danger'] {
  --sl-color-asides-text-accent: var(--sl-color-red-high);
  --sl-color-asides-border: var(--sl-color-red);
  background-color: var(--sl-color-red-low);
}
.gx-aside .gx-aside-title {
  margin: 0;
  font-size: var(--sl-text-h5);
  font-weight: 600;
  line-height: var(--sl-line-height-headings);
  color: var(--sl-color-asides-text-accent);
}
.gx-aside .gx-aside-icon {
  width: 1.333em;
  height: 1.333em;
}
.gx-aside .gx-aside-title + .gx-aside-body {
  margin-top: 0.5rem;
}
.gx-aside .gx-aside-body a {
  color: var(--sl-color-asides-text-accent);
}
.sl-markdown-content .gx-aside code {
  background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
}

/* Tabs. The tab buttons form one row above the selected panel. */
.gx-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-block: 0;
}
/* The line below the tab buttons goes to the end of the row. */
.gx-tabs::after {
  content: '';
  flex: 1 1 0;
  box-shadow: 0 2px 0 var(--sl-color-gray-5);
}
.gx-tabs > .gx-tab {
  display: contents;
}
.gx-tabs > .gx-tab > .gx-tab-button {
  margin: 0;
  padding: 0.275rem 1.25rem;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: var(--sl-line-height-headings);
  color: var(--sl-color-gray-3);
  background: transparent;
  box-shadow: 0 2px 0 var(--sl-color-gray-5);
  outline-offset: var(--sl-outline-offset-inside);
  cursor: pointer;
}
.gx-tabs > .gx-tab > .gx-tab-button[data-selected='true'] {
  color: var(--sl-color-white);
  font-weight: 600;
  box-shadow: 0 2px 0 var(--sl-color-text-accent);
}
.gx-tabs > .gx-tab > .gx-tab-panel {
  order: 1;
  min-width: 0;
  flex-basis: 100%;
  margin-top: 2px;
  padding-top: 1rem;
  border: 0;
  background-color: var(--sl-color-bg);
}
@media (scripting: enabled) {
  .gx-tabs:not([data-gx-tabs-ready='true']) > .gx-tab ~ .gx-tab > .gx-tab-panel {
    display: none;
  }
}

/* Steps: a numbered bullet for each step and a line between the bullets. */
.gx-steps {
  margin-block: 0;
}
.sl-markdown-content .gx-steps > ol {
  --bullet-size: calc(var(--sl-line-height) * 1rem);
  --bullet-margin: 0.375rem;
  list-style: none;
  counter-reset: steps-counter;
  margin: 0;
  padding-inline-start: 0;
}
.sl-markdown-content .gx-steps > ol > li {
  counter-increment: steps-counter;
  position: relative;
  margin: 0;
  border: 0;
  padding-inline-start: calc(var(--bullet-size) + 1rem);
  padding-bottom: 1px;
  min-height: calc(var(--bullet-size) + var(--bullet-margin));
}
.sl-markdown-content .gx-steps > ol > li + li {
  margin-top: 0;
}
.sl-markdown-content .gx-steps > ol > li::before {
  content: counter(steps-counter);
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: var(--bullet-size);
  height: var(--bullet-size);
  line-height: var(--bullet-size);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  text-align: center;
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-6);
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px var(--sl-color-gray-5);
}
.sl-markdown-content .gx-steps > ol > li::after {
  --guide-width: 1px;
  content: '';
  position: absolute;
  top: calc(var(--bullet-size) + var(--bullet-margin));
  bottom: var(--bullet-margin);
  inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
  width: var(--guide-width);
  background-color: var(--sl-color-hairline-light);
}
.sl-markdown-content .gx-steps > ol > li > :first-child {
  --lh: 1lh;
  --shift-y: calc(0.5 * (var(--bullet-size) - var(--lh)));
  transform: translateY(var(--shift-y));
  margin-bottom: var(--shift-y);
}

/* Card and card grid. */
.gx-card {
  --sl-card-border: var(--sl-color-purple);
  --sl-card-bg: var(--sl-color-purple-low);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
  margin-block: 0;
  padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  background-color: var(--sl-color-black);
}
.gx-card:nth-child(4n + 1) {
  --sl-card-border: var(--sl-color-orange);
  --sl-card-bg: var(--sl-color-orange-low);
}
.gx-card:nth-child(4n + 3) {
  --sl-card-border: var(--sl-color-green);
  --sl-card-bg: var(--sl-color-green-low);
}
.gx-card:nth-child(4n + 4) {
  --sl-card-border: var(--sl-color-red);
  --sl-card-bg: var(--sl-color-red-low);
}
.gx-card:nth-child(4n + 5) {
  --sl-card-border: var(--sl-color-blue);
  --sl-card-bg: var(--sl-color-blue-low);
}
.gx-card .gx-card-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-weight: 600;
  font-size: var(--sl-text-h4);
  letter-spacing: normal;
  color: var(--sl-color-white);
  line-height: var(--sl-line-height-headings);
}
.gx-card .gx-card-icon {
  font-size: 1.333em;
  width: 1em;
  height: 1em;
  border: 1px solid var(--sl-card-border);
  background-color: var(--sl-card-bg);
  padding: 0.2em;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.gx-card .gx-card-body {
  margin: 0;
  font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
}
.gx-card-grid {
  display: grid;
  grid-template-columns: 100%;
  gap: 1rem;
  margin-block: 0;
}
.sl-markdown-content .gx-card-grid > * {
  margin-top: 0;
}

/* Link card. */
.gx-link-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin-block: 0;
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: var(--sl-shadow-sm);
  position: relative;
  text-decoration: none;
  line-height: var(--sl-line-height-headings);
}
.sl-markdown-content a.gx-link-card {
  text-decoration: none;
}
.gx-link-card > span {
  grid-column: 1;
}
.gx-link-card > span:first-child {
  color: var(--sl-color-white);
  font-weight: 600;
  font-size: var(--sl-text-lg);
}
.gx-link-card > span + span {
  margin-top: 0;
  font-size: inherit;
  color: var(--sl-color-gray-3);
  line-height: 1.5;
}
.gx-link-card::after {
  content: '';
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  width: 1.333em;
  height: 1.333em;
  background-color: var(--sl-color-gray-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gx-link-card:hover {
  background: var(--sl-color-gray-7, var(--sl-color-gray-6));
  border-color: var(--sl-color-gray-2);
}
.gx-link-card:hover::after {
  background-color: var(--sl-color-white);
}

/* Link button. */
.gx-link-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999rem;
  display: inline-flex;
  font-size: var(--sl-text-sm);
  font-weight: inherit;
  gap: 0.5em;
  line-height: 1.1875;
  margin-block: 0;
  outline-offset: 0.25rem;
  padding: 0.4375rem 1.125rem;
  text-decoration: none;
}
.gx-link-button:is([data-variant='primary'], [data-variant='']),
.gx-link-button:is([data-variant='primary'], [data-variant='']):hover {
  background: var(--sl-color-text-accent);
  border-color: var(--sl-color-text-accent);
  color: var(--sl-color-black);
}
.gx-link-button[data-variant='secondary'],
.gx-link-button[data-variant='outline'],
.gx-link-button[data-variant='ghost'] {
  background: transparent;
  border-color: inherit;
  color: var(--sl-color-white);
}
.gx-link-button[data-variant='ghost'] {
  border-color: transparent;
}
.gx-link-button[data-variant='minimal'] {
  background: transparent;
  color: var(--sl-color-white);
  padding-inline: 0;
  text-decoration: none;
}
.gx-link-button .gx-link-button-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.sl-markdown-content .gx-link-button {
  margin-inline-end: 1rem;
  margin-block: 1rem;
  text-decoration: none;
}

/* File tree. */
.gx-file-tree {
  display: block;
  margin-block: 0;
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0;
  padding: 1rem;
  background-color: var(--sl-color-gray-6);
  font-size: var(--sl-text-xs);
  font-family: var(--__sl-font-mono);
  overflow-x: auto;
}

/* ---------- Wide screens ---------- */

@media (min-width: 50rem) {
  .sl-has-sidebar .sl-header {
    padding-inline-end: var(--sl-nav-pad-x);
  }
  :root.sl-has-sidebar {
    --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
  }
  :root:not(.sl-has-toc) {
    --__toc-width: 0rem;
  }
  .sl-header-inner {
    --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
    --__main-column-fr: calc(
      (
          100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
            (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
            var(--sl-content-width)
        ) / 2
    );
    display: grid;
    grid-template-columns:
      minmax(
        calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
        auto
      )
      1fr
      auto;
    align-content: center;
  }
  .sl-right-group {
    display: flex;
  }
  .sl-search-button {
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.5rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.5rem;
    background-color: var(--sl-color-black);
    color: var(--sl-color-gray-2);
    font-size: var(--sl-text-sm);
    width: 100%;
    max-width: 22rem;
  }
  .sl-search-button:hover {
    border-color: var(--sl-color-gray-2);
    color: var(--sl-color-white);
  }
  .sl-search-button > :last-child {
    margin-inline-start: auto;
  }
  .sl-search-button > span {
    display: block;
  }
  .sl-search-button > kbd {
    display: flex;
  }
  .sl-select select {
    font-size: var(--sl-text-sm);
  }
  .sl-menu-button,
  .sl-mobile-preferences {
    display: none;
  }
  .sl-sidebar-pane {
    display: block;
    width: var(--sl-sidebar-width);
    background-color: var(--sl-color-bg-sidebar);
    border-inline-end: 1px solid var(--sl-color-hairline-shade);
  }
  .sl-sidebar-content::after {
    content: '';
    padding-bottom: 1px;
  }
  .sl-top-level > li + li {
    margin-top: 0.5rem;
  }
  .sl-sidebar-content .sl-large {
    font-size: var(--sl-text-base);
  }
  .sl-sidebar-content a.sl-nav-link {
    font-size: var(--sl-text-sm);
  }
  .sl-mobile-toc nav {
    inset-inline-start: var(--sl-content-inline-start, 0);
  }
  .sl-hero {
    grid-template-columns: 7fr 4fr;
    gap: 3%;
    padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
  }
  .sl-hero > img,
  .sl-hero > .sl-hero-image {
    order: 2;
    width: min(100%, 25rem);
  }
  .sl-hero .sl-stack {
    text-align: start;
  }
  .sl-hero .sl-copy {
    align-items: flex-start;
  }
  .sl-hero .sl-actions {
    justify-content: flex-start;
  }
  .sl-search-dialog {
    margin: 4rem auto auto;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 40rem;
    height: max-content;
    min-height: 15rem;
    max-height: calc(100% - 8rem);
  }
  .sl-search-frame {
    padding: 1.5rem;
  }
  .sl-search-close {
    display: none;
  }
  .gx-card-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .gx-link-button {
    font-size: var(--sl-text-base);
    padding: 0.9375rem 1.25rem;
  }
}

/* The mobile menu: the sidebar shows when the menu is open. */
@media (max-width: 49.99rem) {
  .sl-sidebar-pane:not([data-open]) {
    display: none;
  }
  body:has(.sl-sidebar-pane[data-open]) {
    overflow: hidden;
  }
}

@media (min-width: 72rem) {
  .sl-two-column {
    display: flex;
  }
  .sl-mobile-toc {
    display: none;
  }
  .sl-right-sidebar-panel {
    display: block;
  }
  .sl-right-sidebar-container {
    order: 2;
    position: relative;
    width: max(
      var(--sl-sidebar-width),
      calc(var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2)
    );
  }
  .sl-right-sidebar {
    position: fixed;
    top: 0;
    border-inline-start: 1px solid var(--sl-color-hairline);
    padding-top: var(--sl-nav-height);
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .sl-main-pane {
    width: 100%;
  }
  .sl-has-sidebar.sl-has-toc .sl-main-pane {
    --sl-content-margin-inline: auto 0;
    order: 1;
    width: min(
      calc(100% - var(--sl-sidebar-width)),
      calc(var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2)
    );
  }
  .sl-container {
    margin-inline: var(--sl-content-margin-inline, auto);
  }
  .sl-toc-container {
    max-width: calc(
      (100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 * var(--sl-sidebar-pad-x)) *
        0.25
    );
  }
}

@media print {
  .sl-header,
  .sl-sidebar,
  .sl-right-sidebar-container,
  .sl-pagination,
  .sl-edit-link,
  .gx-copy {
    display: none;
  }
  .sl-main-frame {
    padding: 0;
  }
}