:root {
  /* Palettes created with: https://www.tints.dev/?output=oklch&version=4 */
  --neutral-50: oklch(0.958 0.004 315.23);
  --neutral-100: oklch(0.915 0.009 314.98);
  --neutral-200: oklch(0.83 0.018 311.64);
  --neutral-300: oklch(0.735 0.027 308.1);
  --neutral-400: oklch(0.65 0.036 305.11);
  --neutral-500: oklch(0.564 0.043 301.96);
  --neutral-600: oklch(0.478 0.042 298.9);
  --neutral-700: oklch(0.381 0.036 295.59);
  --neutral-800: oklch(0.295 0.029 293.15);
  --neutral-900: oklch(0.207 0.022 288.52);
  --neutral-950: oklch(0.144 0.015 284.33);

  --purple-50: oklch(0.974 0.011 297.77);
  --purple-100: oklch(0.95 0.02 295.26);
  --purple-200: oklch(0.899 0.045 291.06);
  --purple-300: oklch(0.858 0.066 288.75);
  --purple-400: oklch(0.807 0.094 284.78);
  --purple-500: oklch(0.757 0.127 280.94);
  --purple-600: oklch(0.643 0.18 281.15);
  --purple-700: oklch(0.533 0.231 281.62);
  --purple-800: oklch(0.402 0.196 285.08);
  --purple-900: oklch(0.272 0.121 290.44);
  --purple-950: oklch(0.207 0.084 293.71);

  --orange-50: oklch(0.983 0.011 84.53);
  --orange-100: oklch(0.965 0.024 77.45);
  --orange-200: oklch(0.94 0.044 77.22);
  --orange-300: oklch(0.907 0.074 77.91);
  --orange-400: oklch(0.882 0.098 76.87);
  --orange-500: oklch(0.85 0.139 78.45);
  --orange-600: oklch(0.71 0.134 81.98);
  --orange-700: oklch(0.562 0.101 83.56);
  --orange-800: oklch(0.425 0.071 85.35);
  --orange-900: oklch(0.275 0.042 85.54);
  --orange-950: oklch(0.207 0.03 89.51);

  --primary-50: var(--purple-50);
  --primary-100: var(--purple-100);
  --primary-200: var(--purple-200);
  --primary-300: var(--purple-300);
  --primary-400: var(--purple-400);
  --primary-500: var(--purple-500);
  --primary-600: var(--purple-600);
  --primary-700: var(--purple-700);
  --primary-800: var(--purple-800);
  --primary-900: var(--purple-900);
  --primary-950: var(--purple-950);

  --accent-50: var(--orange-50);
  --accent-100: var(--orange-100);
  --accent-200: var(--orange-200);
  --accent-300: var(--orange-300);
  --accent-400: var(--orange-400);
  --accent-500: var(--orange-500);
  --accent-600: var(--orange-600);
  --accent-700: var(--orange-700);
  --accent-800: var(--orange-800);
  --accent-900: var(--orange-900);
  --accent-950: var(--orange-950);

  /* Light Mode Colors */
  --bg-color: #ffffff;
  --bg-surface: #f8fafc;
  --bg-surface-2: #f1f5f9;
  --text-color: #334155;
  --text-muted: #64748b;
  --heading-color: #0f172a;
  --link-color: #3b82f6;
  --link-hover-color: #2563eb;

  /* Accent */
  --brand: var(--link-color);
  --brand-hover: var(--link-hover-color);
  --focus-ring: rgba(59, 130, 246, 0.35);
  --border-strong: #cbd5e1;

  --border-color: #e2e8f0;
  --table-border-color: #cbd5e1;
  --code-bg: #f1f5f9;
  --header-bg: rgba(255, 255, 255, 0.8);
  --header-text: #1e293b;
  --header-muted: #64748b;
  --header-border: #e2e8f0;
  --sidebar-bg: #f8fafc;
  --sidebar-hover: #eef1f6;
  --sidebar-active: #e6eaf1;
  --footer-bg: #f1f5f9;
  --shadow-color: rgba(15, 23, 42, 0.08);
  --shadow-color-darker: rgba(15, 23, 42, 0.12);

  /* Admonition colors */
  --admonition-note-color: #3b82f6;
  --admonition-tip-color: #10b981;
  --admonition-warning-color: #f59e0b;
  --admonition-danger-color: #ef4444;
  --admonition-info-color: #6366f1;
  --admonition-important-color: #8b5cf6;
  --admonition-example-color: #06b6d4;
  --admonition-caution-color: #f97316;

  /* Spacing  */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --header-height: calc(var(--space-4) * 4);

  /* UI Elements  */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md:
    0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
  --shadow-lg:
    0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts */
  --font-mono: "JetBrains Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark Mode Colors  */
    --bg-color: var(--neutral-950);
    --bg-surface: var(--neutral-900);
    --bg-surface-2: #334155;
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --heading-color: var(--neutral-100);
    --link-color: #60a5fa;
    --link-hover-color: #93c5fd;

    --brand: var(--link-color);
    --brand-hover: var(--link-hover-color);
    --focus-ring: rgba(96, 165, 250, 0.4);
    --border-strong: var(--neutral-700);

    --border-color: var(--neutral-800);
    --code-bg: #111827;
    --code-border: var(--neutral-800);
    --header-bg: color-mix(in oklch, var(--neutral-950) 80%, transparent);
    --header-text: var(--neutral-100);
    --header-muted: var(--neutral-400);
    --header-border: var(--neutral-800);
    --sidebar-bg: var(--neutral-900);
    --sidebar-hover: var(--neutral-800);
    --sidebar-active: var(--neutral-700);
    --footer-bg: var(--neutral-900);
    --shadow-color: rgba(0, 0, 0, 0.25);
    --shadow-color-darker: rgba(0, 0, 0, 0.35);

    /* Admonition Colors */
    --admonition-note-color: #3b82f6;
    --admonition-tip-color: #10b981;
    --admonition-warning-color: #f59e0b;
    --admonition-danger-color: #ef4444;
    --admonition-info-color: #6366f1;
    --admonition-important-color: #8b5cf6;
    --admonition-example-color: #06b6d4;
    --admonition-caution-color: #f97316;
  }
}

:root[data-theme="dark"] {
  /* Dark Mode Colors  */
  --bg-color: var(--neutral-950);
  --bg-surface: var(--neutral-900);
  --bg-surface-2: #334155;
  --text-color: #e2e8f0;
  --text-muted: #94a3b8;
  --heading-color: var(--neutral-100);
  --link-color: #60a5fa;
  --link-hover-color: #93c5fd;

  --brand: var(--link-color);
  --brand-hover: var(--link-hover-color);
  --focus-ring: rgba(96, 165, 250, 0.4);
  --border-strong: var(--neutral-700);

  --border-color: var(--neutral-800);
  --code-bg: #111827;
  --code-border: var(--neutral-800);
  --header-bg: color-mix(in oklch, var(--neutral-950) 80%, transparent);
  --header-text: var(--neutral-100);
  --header-muted: var(--neutral-400);
  --header-border: var(--neutral-800);
  --sidebar-bg: var(--neutral-900);
  --sidebar-hover: var(--neutral-800);
  --sidebar-active: var(--neutral-700);
  --footer-bg: var(--neutral-900);
  --shadow-color: rgba(0, 0, 0, 0.25);
  --shadow-color-darker: rgba(0, 0, 0, 0.35);

  /* Admonition Colors */
  --admonition-note-color: #3b82f6;
  --admonition-tip-color: #10b981;
  --admonition-warning-color: #f59e0b;
  --admonition-danger-color: #ef4444;
  --admonition-info-color: #6366f1;
  --admonition-important-color: #8b5cf6;
  --admonition-example-color: #06b6d4;
  --admonition-caution-color: #f97316;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0s;
}

/* Core Layout */
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
  transition:
    background-color var(--transition),
    color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Footnotes */
section.footnotes {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--border-color, #e2e8f0);
  font-size: 0.95em;
  color: var(--text-muted, #64748b);
}
section.footnotes ol {
  padding-left: 1.5em;
  margin: 0;
}
section.footnotes li {
  margin-bottom: 0.5em;
  position: relative;
}
section.footnotes p {
  display: inline;
}
.footnote-ref {
  vertical-align: super;
  font-size: 0.8em;
  line-height: 1;
  margin-left: 0.1em;
}
.footnote-backref {
  text-decoration: none;
  margin-left: 0.25em;
  font-size: 0.8em;
  color: var(--link-color, #3b82f6);
}
.footnote-backref:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Header Styling */
header {
  background-color: var(--header-bg);
  padding-inline: var(--space-6);
  position: sticky;
  display: flex;
  gap: var(--space-6);
  align-items: center;
  border-bottom: 1px solid var(--header-border);
  z-index: 100;
  top: 0px;
  transition:
    background-color var(--transition),
    border-color var(--transition);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  height: var(--header-height);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-bottom: none;

  a {
    color: var(--header-text);
    text-decoration: none;
    transition: opacity var(--transition-fast);
  }

  a:hover {
    opacity: 0.9;
    text-decoration: none;
  }
}

/* Header navigation styling */
.header-nav {
  position: sticky;
  top: 0;
  background-color: var(--header-bg);
  z-index: 101;

  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-4);
  }

  li {
    position: relative;
  }

  a {
    color: var(--header-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: var(--space-2) 0;
    transition: color var(--transition-fast);
    display: block;
  }

  a:hover {
    color: var(--header-text);
    text-decoration: none;
  }

  /* Active item, highlighted */
  li.active a {
    color: var(--link-color);
    font-weight: 600;
  }
}

/* Layout  */
.layout {
  display: flex;
  flex: 1;
}

.no-js .js-only {
  display: none !important;
}

.noscript-message {
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--sidebar-bg);
  color: var(--text-muted);
}

/* The content width follows the free space between the sidebar toggle and
  the page-toc, from 800px to 1100px. The free space keeps room for the side
  arrows: 44px wide, at least 24px from the sidebar toggle and the page-toc.
  The content is centered in the viewport, thus the larger side sets the
  width. The sidebar toggle ends at 328px, or at 28px when the sidebar is
  collapsed. The page-toc starts at 268px from the right. */
:root {
  --content-width: 800px;
}

@media (min-width: 1000px) {
  :root.sidebar-collapsed {
    --content-width: clamp(800px, 100vw - 148px, 1100px);
  }
}

@media (min-width: 1536px) {
  :root:not(.sidebar-collapsed) {
    --content-width: clamp(800px, 100vw - 748px, 1100px);
  }
}

@media (min-width: 1600px) {
  :root.sidebar-collapsed {
    --content-width: clamp(800px, 100vw - 628px, 1100px);
  }
}

/* Content container  */
.content {
  max-width: var(--content-width);
  width: 100%;
  padding: var(--space-8);
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Sidebar  */
.sidebar {
  position: fixed;
  left: 0;
  top: var(--header-height);
  width: 300px;
  height: calc(100vh - var(--header-height));
  background-color: var(--sidebar-bg);
  padding: var(--space-4);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  z-index: 10;
  box-sizing: border-box;
  /* `visibility` changes at the end of the transition to hide the sidebar,
     and at the start to show it. */
  transition:
    transform var(--transition),
    visibility var(--transition);
  font-size: 0.875rem;
  scrollbar-gutter: stable;

  h2 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-weight: 600;
    transition: color var(--transition);
  }

  ul {
    padding-left: 0;
    list-style-type: none;
    margin: var(--space-3) 0;
  }

  ul.sidebar-subchapters {
    padding-inline-start: var(--space-4);
    margin: var(--space-1) 0;
  }

  li {
    margin-bottom: var(--space-1);
  }

  a {
    color: var(--text-color);
    text-decoration: none;
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast);
    font-size: 0.875rem;

    &:hover {
      color: var(--heading-color);
      background-color: var(--sidebar-hover);
    }

    &.active {
      color: var(--link-color);
      background-color: var(--sidebar-active);
      font-weight: 600;
    }
  }

  /* `visibility` removes the hidden sidebar from the tab order and from the
     accessibility tree. */
  .sidebar-collapsed &,
  .sidebar-collapsed-init & {
    transform: translateX(-100%);
    visibility: hidden;
  }
}

.no-js .sidebar {
  position: sticky;
  flex: 0 0 300px;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  transform: none !important;
  z-index: 1;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  position: fixed;
  left: 300px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 48px;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
  z-index: 20;
  transition: left var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;

  .sidebar-collapsed & {
    left: 0;
  }

  .sidebar-collapsed & svg {
    transform: rotate(180deg);
  }

  &:hover {
    background-color: var(--sidebar-hover);
  }

  svg {
    width: 16px;
    height: 16px;
    fill: var(--text-color);
    transition: transform var(--transition);
  }

  .sidebar-collapsed &,
  .sidebar-collapsed-init & {
    left: 0;
  }

  .sidebar-collapsed & svg,
  .sidebar-collapsed-init & svg {
    transform: rotate(180deg);
  }
}

/* Footer */
footer {
  background-color: var(--footer-bg);
  padding: var(--space-6);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--heading-color);
    line-height: 1.3;
    margin-top: 1.75em;
    margin-bottom: 0.75em;
    position: relative;
    cursor: pointer;
    font-weight: 600;
    transition: color var(--transition);
    letter-spacing: -0.015em;
  }

  h1:hover,
  h2:hover,
  h3:hover,
  h4:hover,
  h5:hover,
  h6:hover {
    color: var(--link-color);
  }

  h1 {
    font-size: 2.25rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-top: 1em;
    transition: border-color var(--transition);
  }

  h2 {
    font-size: 1.75rem;
    transition: border-color var(--transition);
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.25rem;
  }

  /* Add scroll margin to headings */
  h1[id],
  h2[id],
  h3[id],
  h4[id],
  h5[id],
  h6[id] {
    scroll-margin-top: 80px;
  }

  p {
    margin: 1.25em 0;
    line-height: 1.8;
  }
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

/* Visible keyboard focus everywhere interactive. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
.copy-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Code Styling */
code {
  font-family: var(--font-mono);
  background-color: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.4em;
  font-size: 0.875em;
  transition: background-color var(--transition);
  letter-spacing: -0.025em;
  border: 1px solid var(--code-border);
}

pre {
  background-color: var(--code-bg);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border-color);
  transition:
    background-color var(--transition),
    border-color var(--transition);
  line-height: 1.6;
  position: relative;
}

pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.9em;
  border: none;
}

pre:hover::before {
  opacity: 0.7;
}

/* Quotes  */
blockquote {
  border-left: 4px solid var(--link-color);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background-color: var(--sidebar-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-color);
  font-style: italic;
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

blockquote p:first-of-type {
  margin-top: 0;
}

blockquote p:last-of-type {
  margin-bottom: 0;
}

/* Tables  */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-6) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* A table is not wider than the content. A table that does not fit scrolls. */
.content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

th,
td {
  border: 1px solid var(--border-color);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  transition: border-color var(--transition);
}

th {
  background-color: var(--sidebar-bg);
  font-weight: 600;
  transition: background-color var(--transition);
  border-bottom-width: 2px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --table-border-color: #cbd5e1;
  }

  :where(:root:not([data-theme="dark"])) th,
  :where(:root:not([data-theme="dark"])) td {
    border-color: var(--table-border-color);
  }
}

:root[data-theme="light"] {
  --table-border-color: #cbd5e1;
}

:where(:root[data-theme="light"]) th,
:where(:root[data-theme="light"]) td {
  border-color: var(--table-border-color);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --table-border-color: var(--neutral-800);
  }

  :where(:root:not([data-theme="light"])) th,
  :where(:root:not([data-theme="light"])) td {
    border-color: var(--table-border-color);
  }
}

:root[data-theme="dark"] {
  --table-border-color: var(--neutral-800);
}

:where(:root[data-theme="dark"]) th,
:where(:root[data-theme="dark"]) td {
  border-color: var(--table-border-color);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: var(--space-6) auto;
  box-shadow: var(--shadow-md);
}

/* Search */
.search-container {
  position: relative;
  margin-left: auto;
}

/* Theme toggle */
.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  color: var(--header-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);

  &:hover {
    color: var(--header-text);
    border-color: var(--border-color);
  }

  &:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The icon shows the theme that a click selects. */
  .theme-icon-sun {
    display: none;
  }
}

.search-container ~ .theme-toggle {
  margin-left: 0;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .theme-toggle {
    .theme-icon-moon {
      display: none;
    }

    .theme-icon-sun {
      display: block;
    }
  }
}

:where(:root[data-theme="dark"]) .theme-toggle {
  .theme-icon-moon {
    display: none;
  }

  .theme-icon-sun {
    display: block;
  }
}

/* Desktop search input */
#search-input {
  padding: var(--space-2) var(--space-3);
  padding-left: 2.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 240px;
  font-size: 0.875rem;
  background-color: var(--bg-surface);
  color: var(--text-color);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    width var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
  background-size: 1rem;
  cursor: text;
}

#search-input::placeholder {
  color: var(--text-muted);
}

/* Expand input when focused OR when results are visible */
.search-container:focus-within #search-input,
.search-container.has-results #search-input {
  outline: none;
  background-color: var(--bg-color);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
  width: 320px;
}

.search-results {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 350px;
  max-height: 500px;
  overflow-y: auto;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1000;
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.search-result-item {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  transition: border-color var(--transition);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item a {
  color: var(--text-color);
  text-decoration: none;
  display: block;
  flex-grow: 1;
}

.search-result-item:hover {
  background-color: var(--sidebar-hover);
}

.search-result-item.search-result-active {
  background-color: var(--sidebar-active);
  border-left: 3px solid var(--link-color);
}

.search-result-title {
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--heading-color);
}

.search-result-preview {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Mobile Search Popup */
.mobile-search-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  backdrop-filter: blur(4px);
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .mobile-search-popup {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

:where(:root[data-theme="dark"]) .mobile-search-popup {
  background-color: rgba(0, 0, 0, 0.7);
}

.mobile-search-popup.active {
  display: flex;
}

.mobile-search-container {
  background-color: var(--sidebar-bg);
  padding: 1rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 20px var(--shadow-color-darker);
  display: flex;
  flex-direction: column;
}

.mobile-search-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

#mobile-search-input {
  flex-grow: 1;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  font-size: 1.1em;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-color);
  color: var(--text-color);
}

#mobile-search-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.close-mobile-search {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-mobile-search:hover {
  color: var(--text-color);
}

.mobile-search-results {
  max-height: 60vh;
  overflow-y: auto;
}

/* Reuse desktop search result styling */
.mobile-search-results .search-result-item {
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.mobile-search-results .search-result-item:last-child {
  border-bottom: none;
}

.mobile-search-results .search-result-item a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
  min-height: 44px;
  flex-grow: 1;
}

.mobile-search-results .search-result-item:hover {
  background-color: var(--sidebar-hover);
}

/* Touch feedback for mobile devices */
@media (hover: none) and (pointer: coarse) {
  .mobile-search-results .search-result-item:active {
    background-color: var(--sidebar-active);
  }
}

.mobile-search-results .search-result-title {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
}

.mobile-search-results .search-result-preview {
  font-size: 0.9em;
  color: var(--text-muted);
}

/* Search Page Styling */
.search-page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

#search-page-input {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) 3rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--sidebar-bg);
  color: var(--text-color);
  font-size: 1rem;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition);
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) #search-page-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  }
}

:where(:root[data-theme="dark"]) #search-page-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

#search-page-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.search-keyboard-hints {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--sidebar-bg);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.search-keyboard-hints .hint-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.search-keyboard-hints kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  background-color: var(--code-bg);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .search-keyboard-hints kbd {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
}

:where(:root[data-theme="dark"]) .search-keyboard-hints kbd {
  background-color: var(--sidebar-bg);
  border-color: var(--border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 800px) {
  .search-keyboard-hints {
    display: none;
  }
}

.search-page-results {
  margin-top: var(--space-6);
}

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

.search-page-results .search-result-item {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--sidebar-bg);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.search-page-results .search-result-item:hover {
  transform: translateY(-2px);
  border-color: var(--link-color);
  box-shadow: var(--shadow-md);
}

.search-page-results .search-result-item a {
  text-decoration: none;
  color: var(--text-color);
  display: block;
}

.search-page-results .search-result-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--heading-color);
}

.search-page-results .search-result-preview {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Search highlighting */
mark {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--link-color);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) mark {
    background-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
  }
}

:where(:root[data-theme="dark"]) mark {
  background-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

@media (max-width: 800px) {
  .search-page-results {
    margin-top: var(--space-4);
  }

  .search-page-results .search-result-item {
    padding: var(--space-3);
  }
}

/* Admonition styling */
.admonition {
  margin: var(--space-6) 0;
  border-radius: var(--radius-md);
  background-color: var(--sidebar-bg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    background-color var(--transition),
    box-shadow var(--transition);
  border: 1px solid var(--border-color);
}

.admonition-title {
  margin: 0 !important;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  display: flex;
  align-items: center;
  font-size: 1rem !important;
  border-bottom: 1px solid var(--border-color);
  transition: border-color var(--transition);
}

.admonition > :not(.admonition-title) {
  padding: var(--space-4);
  margin: 0;
}

.admonition ul,
.admonition ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-8);
  margin-left: var(--space-8);
  list-style-position: inside;
}

.admonition li {
  margin: var(--space-2) 0;
  line-height: 1.6;
  text-indent: -1em;
  padding-left: 1em;
}

.admonition li p {
  display: inline;
  margin: 0;
}

.admonition ul ul,
.admonition ol ol,
.admonition ul ol,
.admonition ol ul {
  margin: var(--space-1) 0;
  padding-left: var(--space-8);
  margin-left: 0;
  list-style-position: outside;
}

.admonition p {
  margin: var(--space-3) 0;
}

.admonition p:first-child {
  margin-top: 0;
}

.admonition p:last-child {
  margin-bottom: 0;
}

.admonition.note {
  border-top: 4px solid var(--admonition-note-color);
}

.admonition.note .admonition-title {
  color: var(--admonition-note-color);
}

.admonition.tip {
  border-top: 4px solid var(--admonition-tip-color);
}

.admonition.tip .admonition-title {
  color: var(--admonition-tip-color);
}

.admonition.warning {
  border-top: 4px solid var(--admonition-warning-color);
}

.admonition.warning .admonition-title {
  color: var(--admonition-warning-color);
}

.admonition.danger {
  border-top: 4px solid var(--admonition-danger-color);
}

.admonition.danger .admonition-title {
  color: var(--admonition-danger-color);
}

.admonition.info {
  border-top: 4px solid var(--admonition-info-color);
}

.admonition.info .admonition-title {
  color: var(--admonition-info-color);
}

.admonition.important {
  border-top: 4px solid var(--admonition-important-color);
}

.admonition.important .admonition-title {
  color: var(--admonition-important-color);
}

.admonition.example {
  border-top: 4px solid var(--admonition-example-color);
}

.admonition.example .admonition-title {
  color: var(--admonition-example-color);
}

.admonition.caution {
  border-top: 4px solid var(--admonition-caution-color);
}

.admonition.caution .admonition-title {
  color: var(--admonition-caution-color);
}

/* Admonition icons */
.admonition .admonition-title::before {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-3);
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Dark mode SVG icon adjustments */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"]))
    .admonition.note
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.tip
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.warning
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.danger
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.info
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.important
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.example
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="light"]))
    .admonition.caution
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23fb923c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
  }
}

:where(:root[data-theme="dark"]) .admonition.note .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.tip .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.warning .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.danger .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.info .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"])
  .admonition.important
  .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.example .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.caution .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23fb923c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}

/* Light mode SVG icon adjustments */
@media (prefers-color-scheme: light) {
  :where(:root:not([data-theme="dark"]))
    .admonition.note
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.tip
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.warning
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.danger
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.info
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.important
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.example
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
  }

  :where(:root:not([data-theme="dark"]))
    .admonition.caution
    .admonition-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
  }
}

:where(:root[data-theme="light"]) .admonition.note .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.tip .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root[data-theme="light"])
  .admonition.warning
  .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.danger .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.info .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="light"])
  .admonition.important
  .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="light"])
  .admonition.example
  .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root[data-theme="light"])
  .admonition.caution
  .admonition-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}

@keyframes highlight-pulse {
  0% {
    background-color: rgba(59, 130, 246, 0.1);
  }

  70% {
    background-color: rgba(59, 130, 246, 0.05);
  }

  100% {
    background-color: var(--sidebar-bg);
  }
}

/* Copy Link Styling  */
.copy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: var(--space-2);
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast);
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .copy-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
  }
}

:where(:root[data-theme="dark"]) .copy-link {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}

h1:hover .copy-link,
h2:hover .copy-link,
h3:hover .copy-link,
h4:hover .copy-link,
h5:hover .copy-link,
h6:hover .copy-link {
  opacity: 1;
}

.copy-link:hover {
  opacity: 1;
  background-color: var(--sidebar-hover);
}

.copy-feedback {
  display: none;
  margin-left: var(--space-2);
  font-size: 0.75rem;
  color: var(--admonition-tip-color);
  font-weight: normal;
  background-color: var(--sidebar-bg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar styling  */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
  transition: background-color var(--transition);
  border: 2px solid var(--bg-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 800px) {
  .layout,
  .js .layout {
    display: block;
    padding-left: 0;
  }

  .sidebar {
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 90;
    box-shadow: 2px 0 10px var(--shadow-color-darker);
    transform: translateX(-100%);
  }

  html:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
  }

  .sidebar-toggle {
    position: fixed;
    top: 70px;
    left: 0;
    background-color: var(--header-bg);
    color: var(--header-text);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-2);
    width: 32px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-toggle svg {
    fill: var(--header-text);
  }

  html:not(.sidebar-collapsed) .sidebar-toggle {
    left: 300px;
  }

  header {
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.16);
  }

  .site-title {
    font-size: 1.125rem;
  }

  .content {
    padding: var(--space-6) var(--space-4);
    width: 100%;
    max-width: 100%;
  }

  header {
    gap: var(--space-3);
  }

  .header-left {
    min-width: 0;
  }

  .header-nav ul {
    gap: var(--space-3);
  }

  .header-nav {
    display: none;
  }

  .option,
  .lib-entry {
    padding: var(--space-4);
  }

  .option-details {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .option-details dd + dt {
    margin-top: var(--space-2);
  }

  /* Mobile search styles */
  .search-container {
    position: relative;
  }

  .search-container #search-input {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.1);
    color: transparent;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-position: center;
    background-size: 18px;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .search-container #search-input::placeholder {
    color: transparent;
  }

  .search-container #search-input:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .search-container #search-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    width: 36px;
    /* Don't expand on mobile */
  }

  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }
}

/* Between these widths, the open sidebar covers the content. The `<head>`
   script sets the class on `<html>` before the first paint, thus use it and
   not the class on `<body>`. */
@media (max-width: 1399px) and (min-width: 801px) {
  html:not(.sidebar-collapsed) .sidebar {
    box-shadow: 2px 0 10px var(--shadow-color-darker);
  }
}

/* Medium screen adjustments for sidebar toggle */
@media (max-width: 1000px) and (min-width: 801px) {
  .sidebar-toggle {
    left: min(300px, 100vw - 50px);
  }

  .sidebar-collapsed .sidebar-toggle {
    left: 0;
  }
}

/* Print styles */
@media print {
  .sidebar,
  .sidebar-toggle,
  .search-container,
  .theme-toggle,
  footer,
  .copy-link,
  .page-nav,
  .page-nav-side {
    display: none !important;
  }

  .layout {
    display: block !important;
    padding-left: 0 !important;
  }

  .option {
    content-visibility: visible;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt !important;
  }

  a {
    color: black !important;
    text-decoration: underline !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: black !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  pre,
  blockquote,
  table {
    page-break-inside: avoid !important;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid !important;
  }

  article {
    page-break-before: always !important;
  }
}

/* Options TOC styling */
.toc-list {
  list-style-type: none;
  padding-left: 0;
  margin: var(--space-6) 0;
  transition: border-color var(--transition);
  background-color: transparent;
  padding: var(--space-2) 0;
}

.toc-list ul {
  list-style-type: none;
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-color);
}

.toc-list li {
  position: relative;
  margin-bottom: var(--space-1);
  padding-left: 0;
}

.toc-list ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4));
  top: 1.05rem;
  width: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.toc-list a {
  color: var(--text-color);
  text-decoration: none;
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.toc-list a:hover,
.toc-list a.active {
  color: var(--link-color);
  background-color: var(--sidebar-hover);
}

.toc-list a.active {
  background-color: var(--sidebar-active);
  font-weight: 500;
}

/* Details and summary styling */
.toc-list details {
  margin: 0;
}

.toc-list details summary {
  cursor: pointer;
  gap: var(--space-2);
  padding: var(--space-2);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--text-color);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  list-style: none;
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.toc-list details summary:hover {
  background-color: var(--sidebar-hover);
  color: var(--link-color);
}

.toc-list details summary::-webkit-details-marker {
  display: none;
}

.toc-list details summary::before {
  content: "▶";
  font-size: 0.65rem;
  flex-shrink: 0;
  color: var(--text-muted);
  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
}

.toc-list details summary span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-list details[open] > summary::before {
  transform: rotate(90deg);
  color: var(--link-color);
}

/* Count badge */
.toc-count {
  background-color: var(--primary-600);
  color: white;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0 var(--space-2);
  min-width: 20px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Status badges */
.toc-internal,
.toc-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  margin-left: var(--space-2);
  font-weight: 500;
  text-transform: uppercase;
  flex-shrink: 0;
  height: 16px;
}

.toc-internal {
  background-color: var(--admonition-info-color);
  color: white;
}

.toc-readonly {
  background-color: var(--admonition-warning-color);
  color: white;
}

.option[hidden] {
  display: none;
}

.options-page .content {
  max-width: max(960px, var(--content-width));
}

.option {
  content-visibility: auto;
  contain-intrinsic-size: auto 20rem;
  scroll-margin-top: 80px;
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
  background-color: var(--bg-surface);
  transition:
    background-color var(--transition),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.options-container.options-revealed .option {
  content-visibility: visible;
}

@media (hover: hover) {
  .option:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
  }
}

.option:target,
.option.highlight {
  border-color: var(--link-color);
  box-shadow: 0 0 0 2px var(--focus-ring);
  animation: highlight-pulse 1.5s ease;
}

.content .option-name {
  margin-top: 0;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}

.option-anchor {
  color: var(--heading-color);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.035em;
}

.option-anchor:hover {
  color: var(--link-color);
  text-decoration: none;
}

.option-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.option-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.option-details {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  margin: 0;
  max-width: 100%;
}

.option-details dt,
.option-details dd {
  margin: 0;
}

.option-details dt,
.option-related-title {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.option-description {
  margin-block-end: var(--space-4);
}

.option-description > :first-child,
.option-related > :first-child {
  margin-top: 0;
}

.option-description > :last-child,
.option-related > :last-child {
  margin-bottom: 0;
}

.option-value {
  min-width: 0;
}

.option-value > code,
.option-source-list code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  letter-spacing: normal;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.option-value pre {
  margin: 0;
  max-width: 100%;
}

.option-source-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.option-sources {
  margin-top: var(--space-5, 1.25rem);
}

.option-related {
  margin-top: var(--space-5, 1.25rem);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.option-related-title {
  margin: 0 0 var(--space-2);
}

.no-js .copy-link,
.no-js .copy-feedback {
  display: none;
}

/* Lib entry specific styling */
.lib-entry {
  scroll-margin-top: 80px;
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin: var(--space-6) 0;
  background-color: var(--sidebar-bg);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition),
    border-color var(--transition);
  box-shadow: var(--shadow-sm);
}

.lib-entry:target,
.lib-entry.highlight {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
  animation: highlight-pulse 1.5s ease;
}

.content .lib-entry-name {
  margin-top: 0;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
}

.lib-entry-anchor {
  color: var(--heading-color);
  text-decoration: none;
}

.lib-entry-anchor:hover {
  color: var(--link-color);
  text-decoration: none;
}

.lib-entry-declared {
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-3);
}

.lib-entry-type {
  margin-bottom: var(--space-3);
}

.lib-entry-description {
  margin-bottom: var(--space-4);
}

.lib-entry-arguments h3,
.lib-entry-examples h3,
.lib-entry-notes h3,
.lib-entry-warnings h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: var(--space-4) 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lib-entry-arguments dl {
  margin: 0;
}

.lib-entry-arguments dt {
  font-weight: 600;
}

.lib-entry-arguments dd {
  margin-left: var(--space-6);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
}

.lib-entry-examples pre {
  margin: var(--space-2) 0;
  padding: var(--space-3);
  background-color: var(--code-bg);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.lib-entry-examples code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.lib-entry-deprecated {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background-color: color-mix(
    in srgb,
    var(--admonition-warning-color) 10%,
    transparent
  );
  border-left: 3px solid var(--admonition-warning-color);
  border-radius: var(--radius-sm);
}

.lib-entry-deprecated p {
  margin: 0;
  color: var(--admonition-warning-color);
}

.lib-entry-notes ul,
.lib-entry-warnings ul {
  margin: 0;
  padding-left: var(--space-6);
}

.lib-entry-notes li,
.lib-entry-warnings li {
  margin-bottom: var(--space-1);
}

.lib-entry-warnings {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background-color: color-mix(
    in srgb,
    var(--admonition-danger-color) 10%,
    transparent
  );
  border-left: 3px solid var(--admonition-danger-color);
  border-radius: var(--radius-sm);
}

.lib-entry-warnings h3 {
  color: var(--admonition-danger-color);
}

/* Lib container */
.lib-container {
  position: relative;
  overflow: visible;
  min-height: 0;
  height: auto;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Filter styling */
.search-form {
  margin: var(--space-4) 0;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

#lib-filter,
#options-filter {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--sidebar-bg);
  color: var(--text-color);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

#lib-filter:focus,
#options-filter:focus {
  outline: none;
  border-color: var(--link-color);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.filter-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-results {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Animation */
@keyframes highlight-pulse {
  0% {
    background-color: rgba(59, 130, 246, 0.1);
  }

  70% {
    background-color: rgba(59, 130, 246, 0.05);
  }

  100% {
    background-color: var(--sidebar-bg);
  }
}

/* Parent option styling */
.parent-option {
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 800px) {
  .sidebar,
  .sidebar-toggle {
    display: none;
  }

  .no-js .sidebar {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    transform: none !important;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
  }

  .content {
    margin-left: 0;
    padding: 20px;
  }
}

/* Options Container */
.options-container {
  position: relative;
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.options-chunk-status,
.options-chunk-noscript,
.options-chunk-error {
  color: var(--text-muted);
  padding: var(--space-4) 0;
  text-align: center;
}

.options-chunk-error {
  color: var(--admonition-danger-color);
}

/* Search result styles */
.search-result-page {
  font-weight: 600;
}

.search-result-anchor {
  padding-left: calc(var(--space-4) + var(--space-6));
  font-size: 0.9em;
  position: relative;
}

.search-result-anchor::before {
  content: "↳";
  position: absolute;
  left: var(--space-4);
  color: var(--text-muted);
  font-size: 1em;
}

.search-result-anchor a {
  color: var(--text-muted);
}

.search-result-anchor:hover::before {
  color: var(--link-color);
}

/* Search page specific styling */
.search-page-results .search-result-page {
  font-weight: 700;
}

.search-page-results .search-result-anchor {
  padding-left: calc(var(--space-6) + var(--space-6));
}

.search-page-results .search-result-anchor::before {
  left: var(--space-6);
}

/* Mobile search anchor styling */
.mobile-search-results .search-result-anchor {
  padding-left: calc(var(--space-4) + var(--space-4));
  font-size: 0.875em;
}

.mobile-search-results .search-result-anchor::before {
  left: var(--space-3);
}

/* Sidebar Sections */
.sidebar-section {
  margin-bottom: var(--space-4);
}

.sidebar-section + .sidebar-section {
  margin-top: 0;
}

/* Only target direct child summary (section headers like "Documents", "Contents") */
.sidebar-section > summary {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.sidebar-section > summary:hover {
  background-color: var(--sidebar-hover);
  color: var(--text-color);
}

.sidebar-section[open] > summary {
  color: var(--heading-color);
}

.sidebar-section > summary::before {
  content: "▶";
  font-size: 0.625rem;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-section[open] > summary::before {
  transform: rotate(90deg);
}

/* Hide default marker */
.sidebar-section > summary::-webkit-details-marker {
  display: none;
}

/* Animated content wrapper using CSS Grid */
.sidebar-section-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--transition);
}

.sidebar-section[open] .sidebar-section-content {
  grid-template-rows: 1fr;
}

.sidebar-section-content > * {
  min-height: 0;
  overflow: hidden;
}

.sidebar-section-content > ul {
  margin: var(--space-1) 0 0;
}

.sidebar-section-content > .toc-list {
  border-left: 0;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

.sidebar-section-content > .toc-list ul {
  margin: 0;
  padding-left: var(--space-3);
}

.sidebar-section-content > .toc-list li {
  margin-bottom: var(--space-1);
  padding-left: 0;
}

/* Right-side Page Table of Contents */
.page-toc {
  position: fixed;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-8));
  width: 220px;
  overflow-y: auto;
  padding: var(--space-4);
  font-size: 0.8125rem;
  display: none;

  /* Position to the right of centered content
    Content is max 800px, centered. Sidebar is 300px fixed left.
    Calculate: sidebar (300px) + half remaining + half content (400px) + gap
  */
  right: var(--space-4);
}

.no-js .page-toc {
  display: none !important;
}

.page-toc-nav h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-3);
  font-weight: 600;
}

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

.page-toc-list ul {
  list-style: none;
  padding-left: var(--space-3);
  margin: 0;
}

.page-toc-list li {
  margin: 0;
}

.page-toc-list a {
  display: block;
  padding: var(--space-1) var(--space-3);
  color: var(--text-muted);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
  border-left: 2px solid transparent;
}

.page-toc-list a:hover {
  color: var(--link-color);
}

.page-toc-list a.active {
  color: var(--link-color);
  border-left-color: var(--link-color);
  font-weight: 500;
}

/* Previous and next page navigation */
.page-nav {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-color);
}

.page-nav-link {
  flex: 0 1 calc(50% - var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-color);
  box-sizing: border-box;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);

  &:hover {
    border-color: var(--brand);
    background-color: var(--bg-surface);
    text-decoration: none;
  }

  svg {
    flex: none;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

.page-nav-next {
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}

.page-nav-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-nav-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.page-nav-title {
  color: var(--link-color);
  font-weight: 600;
  overflow-wrap: break-word;
}

/* Stack the links on narrow screens, so that titles do not break inside words. */
@media (max-width: 480px) {
  .page-nav {
    flex-direction: column;
  }

  .page-nav-link {
    flex-basis: auto;
  }

  .page-nav-next {
    margin-left: 0;
  }
}

/* The side arrows follow the viewport center next to the content. They show
  only when the space next to the content is wide enough to keep them clear of
  the sidebar toggle. When there is more space, `--page-nav-side-offset` moves
  them out to the center of the space between the content and the sidebar
  toggle, but not nearer than 24px to the sidebar toggle or the page-toc. */
.page-nav-side {
  --page-nav-side-offset: 0px;
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-nav-side-track {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
}

.page-nav-side-prev {
  left: calc(-22px - var(--page-nav-side-offset));
}

.page-nav-side-next {
  right: calc(-22px - var(--page-nav-side-offset));
}

.page-nav-side-track a {
  position: sticky;
  top: calc(50vh - 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

  &:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
  }

  svg {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--transition-fast);
  }

  &:hover svg {
    stroke: var(--brand);
  }
}

/* The content is `--content-width` wide and centered in the viewport. The
  arrows are 44px wide. The sidebar toggle ends at 328px, or at 28px when the
  sidebar is collapsed. The page-toc starts at 268px from the right. */
@media (min-width: 1536px) {
  .page-nav-side {
    --page-nav-side-offset: clamp(
      0px,
      min(
        50vw - var(--content-width) / 2 - 374px,
        (50vw - var(--content-width) / 2 - 328px) / 2
      ),
      160px
    );
    display: block;
  }
}

@media (min-width: 1000px) {
  .sidebar-collapsed .page-nav-side {
    --page-nav-side-offset: clamp(
      0px,
      min(
        50vw - var(--content-width) / 2 - 74px,
        (50vw - var(--content-width) / 2 - 28px) / 2
      ),
      160px
    );
    display: block;
  }
}

@media (min-width: 1600px) {
  .sidebar-collapsed .page-nav-side {
    --page-nav-side-offset: clamp(
      0px,
      min(
        50vw - var(--content-width) / 2 - 314px,
        (50vw - var(--content-width) / 2 - 28px) / 2
      ),
      160px
    );
  }
}

/* Show page-toc only on wide screens */
@media (min-width: 1600px) {
  .page-toc {
    display: block;
  }
}

/* Hide page-toc on mobile */
@media (max-width: 800px) {
  .page-toc {
    display: none !important;
  }
}

/* Keyboard navigation active state */
.search-result-item.search-result-active {
  background-color: var(--sidebar-active);
  border-left: 3px solid var(--link-color);
}

/* Search error styling */
.search-error {
  padding: var(--space-4);
  border: 1px solid var(--admonition-danger-color);
  border-radius: var(--radius-md);
  background-color: var(--sidebar-bg);
  color: var(--text-color);
}

.search-error p {
  margin: 0 0 var(--space-3) 0;
}

.search-error button,
.search-error a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background-color: var(--link-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background-color var(--transition-fast);
}

.search-error button:hover,
.search-error a:hover {
  background-color: var(--link-hover-color);
}

.search-result-item.search-result-active a {
  color: var(--link-color);
}

/* Search result highlighting on target pages */
.search-highlight {
  background-color: rgba(255, 235, 59, 0.4);
  color: inherit;
  font-weight: inherit;
  padding: 2px 0;
  border-radius: 2px;
  animation: highlight-fade 3s ease-out forwards;
}

.search-highlight-active {
  background-color: rgba(255, 193, 7, 0.6);
  animation: highlight-pulse-active 1s ease-in-out infinite alternate;
}

@keyframes highlight-fade {
  0% {
    background-color: rgba(255, 235, 59, 0.6);
  }
  100% {
    background-color: rgba(255, 235, 59, 0.2);
  }
}

@keyframes highlight-pulse-active {
  0% {
    background-color: rgba(255, 193, 7, 0.5);
  }
  100% {
    background-color: rgba(255, 193, 7, 0.7);
  }
}

@keyframes highlight-fade-dark {
  0% {
    background-color: rgba(255, 193, 7, 0.4);
  }
  100% {
    background-color: rgba(255, 193, 7, 0.15);
  }
}

@keyframes highlight-pulse-active-dark {
  0% {
    background-color: rgba(255, 152, 0, 0.4);
  }
  100% {
    background-color: rgba(255, 152, 0, 0.6);
  }
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .search-highlight {
    background-color: rgba(255, 193, 7, 0.3);
    animation: highlight-fade-dark 3s ease-out forwards;
  }

  :where(:root:not([data-theme="light"])) .search-highlight-active {
    background-color: rgba(255, 152, 0, 0.5);
    animation: highlight-pulse-active-dark 1s ease-in-out infinite alternate;
  }
}

:where(:root[data-theme="dark"]) .search-highlight {
  background-color: rgba(255, 193, 7, 0.3);
  animation: highlight-fade-dark 3s ease-out forwards;
}

:where(:root[data-theme="dark"]) .search-highlight-active {
  background-color: rgba(255, 152, 0, 0.5);
  animation: highlight-pulse-active-dark 1s ease-in-out infinite alternate;
}

/* Sidebar chapters that fold their sub-chapters */
.sidebar-chapter > details > summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;

  &::-webkit-details-marker {
    display: none;
  }

  > a {
    flex: 1;
    min-width: 0;
  }

  &::after {
    content: "\25B6";
    font-size: 0.625rem;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
  }
}

.sidebar-chapter > details[open] > summary::after {
  transform: rotate(90deg);
}

/* Sidebar directory groups */
.sidebar-dir-group {
  list-style: none;
  margin-bottom: var(--space-1);

  > details {
    > summary {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-md);
      cursor: pointer;
      user-select: none;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      list-style: none;
      transition:
        background-color var(--transition-fast),
        color var(--transition-fast);

      &::-webkit-details-marker {
        display: none;
      }

      &::before {
        content: "▶";
        font-size: 0.625rem;
        transition: transform var(--transition-fast);
        flex-shrink: 0;
      }

      &:hover {
        background-color: var(--sidebar-hover);
        color: var(--text-color);
      }
    }

    &[open] > summary::before {
      transform: rotate(90deg);
    }

    > ul {
      margin: var(--space-1) 0 var(--space-1) var(--space-4);
      padding-left: var(--space-2);
      border-left: 2px solid var(--border-color);
    }
  }

  .sidebar-dir-count {
    font-size: 0.7rem;
    font-weight: 500;
    background-color: var(--sidebar-active);
    color: var(--text-muted);
    border-radius: 9999px;
    padding: 0 var(--space-2);
    line-height: 1.6;
    margin-left: auto;
  }

  .sidebar-dir-label {
    flex: 1;
  }
}

/* Mobile Sidebar */
.mobile-sidebar-toggle {
  display: none;
}

.mobile-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: rgba(15, 23, 42, 0.4);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mobile-sidebar-backdrop.active {
  opacity: 1;
}

.mobile-sidebar-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, calc(100vw - var(--space-8)));
  height: 100dvh;
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border-color);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform var(--transition);
  flex-direction: column;
}

.mobile-sidebar-container.active {
  transform: translateX(0);
}

.mobile-sidebar-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--sidebar-bg);
}

.mobile-sidebar-header h2 {
  margin: 0;
  color: var(--heading-color);
  font-size: 1rem;
  font-weight: 600;
}

.mobile-sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  color: var(--text-color);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-sidebar-close:hover {
  background-color: var(--sidebar-hover);
  color: var(--link-color);
}

.mobile-sidebar-site-nav {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--sidebar-bg);
}

.mobile-sidebar-site-nav ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-sidebar-site-nav a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--text-color);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.mobile-sidebar-site-nav a:hover,
.mobile-sidebar-site-nav .active a {
  border-color: var(--border-color);
  background-color: var(--sidebar-hover);
  color: var(--link-color);
}

.mobile-sidebar-site-nav .active a {
  border-color: var(--border-color);
  background-color: var(--sidebar-active);
}

.mobile-sidebar-content {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-3) var(--space-4) var(--space-6);
}

.mobile-sidebar-content .sidebar-section-content > ul:not(.toc-list) {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.mobile-sidebar-content .sidebar-section-content > ul:not(.toc-list) > li {
  margin-bottom: var(--space-1);
}

.mobile-sidebar-content .sidebar-section-content > ul:not(.toc-list) > li > a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-color);
  text-decoration: none;
}

.mobile-sidebar-content
  .sidebar-section-content
  > ul:not(.toc-list)
  > li
  > a:hover,
.mobile-sidebar-content
  .sidebar-section-content
  > ul:not(.toc-list)
  > li
  > a.active {
  background-color: var(--sidebar-hover);
  color: var(--link-color);
}

body.mobile-sidebar-open {
  overflow: hidden;
}

@media (max-width: 800px) {
  .mobile-sidebar-container {
    display: flex;
  }

  .mobile-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    color: var(--header-text);
    font: inherit;
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .mobile-sidebar-toggle:hover {
    background-color: var(--sidebar-hover);
    border-color: var(--border-strong);
  }

  .mobile-sidebar-toggle[aria-expanded="true"] {
    background-color: var(--sidebar-active);
    border-color: var(--border-strong);
  }

  .no-js .mobile-sidebar-container {
    display: none;
  }

  .no-js .mobile-sidebar-toggle,
  .no-js .mobile-sidebar-backdrop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sidebar-backdrop,
  .mobile-sidebar-container {
    transition: none;
  }
}

/* Option page index and pagination */
.options-index {
  margin-top: var(--space-4);
}

.options-index-summary {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.options-index-summary strong {
  color: var(--heading-color);
}

.options-index-list {
  display: block;
  border-top: 1px solid var(--border-color);
}

.option-page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
  text-decoration: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.filter-entering,
.filter-leaving {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .filter-entering,
  .filter-leaving {
    transform: none;
  }
}

.option-page-row:hover {
  color: var(--link-color);
}

.option-page-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.option-page-title {
  font-weight: 600;
}

.option-page-row code {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  color: var(--text-muted);
  background: transparent;
  padding: 0;
}

.option-page-count {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.options-index-empty {
  color: var(--text-muted);
}

.option-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.option-page-breadcrumb a {
  color: var(--link-color);
  text-decoration: none;
}

.option-page-breadcrumb a:hover {
  text-decoration: underline;
}

.option-page-breadcrumb span::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--text-muted);
}

.option-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.option-page-meta code {
  color: var(--text-color);
  background-color: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.option-page-sidebar-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}

.option-page-sidebar-link {
  min-width: 0;
  color: var(--text-color);
  text-decoration: none;
}

.option-page-sidebar-next {
  text-align: right;
}

.option-page-sidebar-link span {
  display: block;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.option-page-sidebar-link strong {
  display: block;
  overflow: hidden;
  color: var(--link-color);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.option-page-sidebar-link:hover strong {
  text-decoration: underline;
}

.option-page-sidebar-disabled {
  visibility: hidden;
}


/* Custom Stylesheet 1: /nix/store/vh0cc1618xrmhpxwvhndpy00cvp4gc2r-docs-zoom.css */
/*
 * Click-to-enlarge for the images on a documentation site, handed to `ndg` as an
 * extra stylesheet by `mkSite` (see `docs.nix`). A page opts an image in with:
 *
 *   <label class="zoom"><input class="zoom-toggle" type="checkbox" /><img
 *     src="assets/example.png" alt="..." /></label>
 *
 * The `img` can also be in a `picture`, to show a dark version of the image
 * when the reader prefers a dark color scheme.
 *
 * On a site with `mermaid = true`, `docs-zoom-mermaid.js` puts each Mermaid
 * diagram (a `pre.mermaid`) in the same markup, thus a page does not opt in.
 *
 * The trigger is a checkbox in a `label`, not a link to a fragment, for two
 * reasons. `ndg` appends humanized text to an anchor that has an empty text and
 * an `href` that starts with `#`, which is what a link around an image alone is.
 * And a checkbox leaves the browser history and the scroll position as they are.
 */

.zoom {
  display: block;
}

.zoom img,
.zoom > pre.mermaid {
  cursor: zoom-in;
}

/* A diagram fits the width of the page, as an image does. */
.zoom > pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

/*
 * Hidden, but still in the tab order: the checkbox holds the open state, and
 * takes its accessible name from the image in the `label` around it.
 */
.zoom > .zoom-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/*
 * Open: the `label` becomes the backdrop over the full window, so a click
 * anywhere on it closes the image again. The backdrop scrolls when its content
 * is larger than the window. `safe` keeps the start of such content in view.
 * `docs-zoom-mermaid.js` then scrolls the backdrop to the center of a diagram.
 */
.zoom:has(> .zoom-toggle:checked) {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  background: rgb(0 0 0 / 80%);
  cursor: zoom-out;
}

/*
 * The `z-index` of the backdrop applies only in its stacking context. ndg
 * gives `.content` the stacking context `z-index: 1`, below the header and the
 * sidebar. Thus, while a backdrop is open, `.content` goes above them.
 */
.content:has(.zoom-toggle:checked) {
  z-index: 101;
}

.zoom:has(> .zoom-toggle:checked) img {
  max-width: 95vw;
  max-height: 95vh;
  cursor: zoom-out;
}

/*
 * An open diagram has its natural size, so that its text has the size that
 * Mermaid gives it. Mermaid puts a `max-width` in the `style` attribute of the
 * `svg`, thus only `!important` can remove it.
 */
.zoom:has(> .zoom-toggle:checked) > pre.mermaid {
  flex: none;
  margin: 0;
  overflow: visible;
  cursor: zoom-out;
}

.zoom:has(> .zoom-toggle:checked) > pre.mermaid svg {
  width: var(--zoom-width, auto);
  max-width: none !important;
}

/* The checkbox is invisible, so show the keyboard focus on the image. */
.zoom:has(> .zoom-toggle:focus-visible) img,
.zoom:has(> .zoom-toggle:focus-visible) > pre.mermaid {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}