/* Auto-generated by scripts/bundle-css.py. Do not edit by hand - edit
 * main.css and its @import children, then re-run the bundler. */

/* Source-time entry. Order matters: tokens first (define vars), then prose
 * (typography), then components. At ship time scripts/bundle-css.py inlines
 * every @import into main.bundle.css, which is what main.html actually
 * loads in the browser. */

/* ============================================================================
 * Alloy semantic tokens (OKLCH).
 *
 * Material/Zensical's runtime palette CSS (modern/palette.min.css) sets
 * --md-* vars on `[data-md-color-scheme=...]` selectors. We use the same
 * selectors here AND load after, so equal specificity means we win.
 * Where Material also generates `[data-md-color-primary=...]` rules, we
 * use compound selectors to outrank them.
 * ============================================================================ */

:root {
  --spacing:           0.25rem;
  --radius:            0.625rem;
  --radius-sm:         calc(var(--radius) - 4px);
  --radius-md:         calc(var(--radius) - 2px);
  --radius-lg:         var(--radius);
  --radius-xl:         0.75rem;
  --content-width:     46rem;
  --sidebar-width:     clamp(10rem, 18vw, 14.5rem);
  --toc-width:         clamp(9rem, 15vw, 13rem);
  --header-height:     3.5rem;
  --control-height-xs: 1.5rem;
  --control-height-sm: 1.75rem;
  --control-height:    1.875rem;
  --control-height-lg: 2.125rem;
  --control-radius:    var(--radius-sm);

  --shadow-sm:         0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow:            0 1px 3px 0 oklch(0 0 0 / 0.08),
                       0 1px 2px -1px oklch(0 0 0 / 0.06);
  --shadow-lg:         0 10px 30px -8px oklch(0 0 0 / 0.18);

  /* Defaults match the families Material's font plugin loads via
     mkdocs_theme.yml. To use Geist or another custom family, load the font
     yourself and override --font-sans / --font-mono through
     [project.extra.alloy] in your config. */
  --font-sans:  "Inter", ui-sans-serif, system-ui,
                -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace,
                "SF Mono", Menlo, monospace;

  --brand-accent:       oklch(0.56 0.155 46);
  --brand-accent-soft:  color-mix(in oklch, var(--brand-accent) 12%, transparent);
  --brand-accent-contrast: oklch(0.985 0 0);
}

/* ---------------------------------------------------------------------------
 * Light scheme - alloy neutral.
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --background:        oklch(1 0 0);
  --foreground:        oklch(0.145 0 0);
  --muted:             oklch(0.97 0 0);
  --muted-foreground:  oklch(0.556 0 0);
  --card:              oklch(1 0 0);
  --card-foreground:   var(--foreground);
  --popover:           oklch(1 0 0);
  --popover-foreground:var(--foreground);
  --primary:           oklch(0.205 0 0);
  --primary-foreground:oklch(0.985 0 0);
  --secondary:         oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --accent:            oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive:       oklch(0.577 0.245 27.325);
  --border:            oklch(0.922 0 0);
  --input:             oklch(0.922 0 0);
  --ring:              oklch(0.708 0 0);
  --brand-accent:      oklch(0.56 0.155 46);
  --brand-accent-soft: color-mix(in oklch, var(--brand-accent) 12%, var(--background));
  --brand-accent-contrast: oklch(0.985 0 0);
  --link:              var(--brand-accent);
  --top-nav-hover-bg:  color-mix(in oklch, var(--muted) 72%, transparent);
  --top-nav-active-bg: color-mix(in oklch, var(--muted) 78%, transparent);
  --top-nav-active-fg: var(--foreground);
  --top-nav-active-border: color-mix(in oklch, var(--border) 82%, transparent);
  --surface:           oklch(0.98 0 0);
  --surface-raised:    oklch(0.992 0 0);
  --surface-foreground:var(--foreground);
  --border-subtle:     color-mix(in oklch, var(--border) 58%, transparent);
  --rail:              color-mix(in oklch, var(--border) 68%, transparent);
  --warning:           oklch(0.84 0.16 84);
  --warning-foreground:oklch(0.28 0.07 46);
  --code:              var(--surface);
  --code-foreground:   var(--surface-foreground);
  --code-highlight:    oklch(0.96 0 0);
  --code-number:       oklch(0.56 0 0);
  --selection:         var(--foreground);
  --selection-foreground: var(--background);

  --md-default-bg-color:           var(--background);
  --md-default-bg-color--light:    var(--background);
  --md-default-bg-color--lighter:  color-mix(in oklch, var(--background) 40%, transparent);
  --md-default-bg-color--lightest: color-mix(in oklch, var(--background) 10%, transparent);
  --md-default-fg-color:           var(--foreground);
  --md-default-fg-color--light:    var(--muted-foreground);
  --md-default-fg-color--lighter:  oklch(0.6 0 0);
  --md-default-fg-color--lightest: var(--muted);

  /* Intentionally do not remap --md-primary-*: Material exposes those as the
   * saturated brand color (e.g. teal, deep-purple) for the header / tab bar
   * surfaces. Alloy paints its own header and tabs directly via component
   * CSS, so the remap was never needed for our visual layer - and remapping
   * them to var(--foreground) breaks downstream custom CSS that uses
   * --md-primary-fg-color as a branded background color (the text on the
   * surface then inherits foreground and disappears). Let Material's
   * defaults pass through. */

  --md-accent-fg-color:            var(--brand-accent);
  --md-accent-fg-color--transparent: color-mix(in oklch, var(--brand-accent) 16%, transparent);
  --md-accent-bg-color:            var(--background);

  --md-typeset-color:              var(--foreground);
  --md-typeset-a-color:            var(--link);

  --md-code-bg-color:              var(--code);
  --md-code-fg-color:              var(--code-foreground);

  --md-footer-bg-color:            var(--muted);
  --md-footer-bg-color--dark:      oklch(0.95 0 0);
  --md-footer-fg-color:            var(--foreground);
  --md-footer-fg-color--light:     var(--muted-foreground);
  --md-footer-fg-color--lighter:   oklch(0.6 0 0);
}

/* Outrank Material's `[data-md-color-primary=...]` link-color rules. The
 * --md-primary-* remap was removed deliberately (see comment above); keep
 * the link-color override at the outranking specificity. */
[data-md-color-scheme="default"][data-md-color-primary] {
  --md-typeset-a-color:     var(--link);
}

/* ---------------------------------------------------------------------------
 * Dark scheme - alloy zinc.
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --background:        oklch(0.145 0 0);
  --foreground:        oklch(0.985 0 0);
  --muted:             oklch(0.205 0 0);
  --muted-foreground:  oklch(0.708 0 0);
  --card:              oklch(0.205 0 0);
  --card-foreground:   var(--foreground);
  --popover:           oklch(0.269 0 0);
  --popover-foreground:var(--foreground);
  --primary:           oklch(0.922 0 0);
  --primary-foreground:oklch(0.205 0 0);
  --secondary:         oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --accent:            oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive:       oklch(0.704 0.191 22.216);
  --border:            oklch(1 0 0 / 0.1);
  --input:             oklch(1 0 0 / 0.15);
  --ring:              oklch(0.556 0 0);
  --brand-accent:      oklch(0.72 0.14 56);
  --brand-accent-soft: color-mix(in oklch, var(--brand-accent) 18%, var(--background));
  --brand-accent-contrast: oklch(0.145 0 0);
  --link:              var(--brand-accent);
  --top-nav-hover-bg:  color-mix(in oklch, var(--muted) 72%, transparent);
  --top-nav-active-bg: color-mix(in oklch, var(--muted) 78%, transparent);
  --top-nav-active-fg: var(--foreground);
  --top-nav-active-border: color-mix(in oklch, var(--border) 82%, transparent);
  --surface:           oklch(0.2 0 0);
  --surface-raised:    oklch(0.18 0 0);
  --surface-foreground:oklch(0.708 0 0);
  --border-subtle:     color-mix(in oklch, var(--border) 62%, transparent);
  --rail:              color-mix(in oklch, var(--border) 72%, transparent);
  --warning:           oklch(0.41 0.11 46);
  --warning-foreground:oklch(0.99 0.02 95);
  --code:              var(--surface);
  --code-foreground:   var(--surface-foreground);
  --code-highlight:    oklch(0.27 0 0);
  --code-number:       oklch(0.72 0 0);
  --selection:         var(--foreground);
  --selection-foreground: var(--background);

  --md-default-bg-color:           var(--background);
  --md-default-bg-color--light:    var(--background);
  --md-default-bg-color--lighter:  color-mix(in oklch, var(--background) 40%, transparent);
  --md-default-bg-color--lightest: color-mix(in oklch, var(--background) 10%, transparent);
  --md-default-fg-color:           var(--foreground);
  --md-default-fg-color--light:    var(--muted-foreground);
  --md-default-fg-color--lighter:  oklch(0.5 0 0);
  --md-default-fg-color--lightest: var(--muted);

  /* See light scheme comment - --md-primary-* intentionally not remapped. */

  --md-accent-fg-color:            var(--brand-accent);
  --md-accent-fg-color--transparent: color-mix(in oklch, var(--brand-accent) 22%, transparent);
  --md-accent-bg-color:            var(--background);

  --md-typeset-color:              var(--foreground);
  --md-typeset-a-color:            var(--link);

  --md-code-bg-color:              var(--code);
  --md-code-fg-color:              var(--code-foreground);

  --md-footer-bg-color:            var(--muted);
  --md-footer-bg-color--dark:      oklch(0.18 0 0);
  --md-footer-fg-color:            var(--foreground);
  --md-footer-fg-color--light:     var(--muted-foreground);
}

[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color:     var(--link);
}

/* Prose-scoped muted-foreground bump. Light scheme's chrome value sits right
 * at the WCAG AA threshold against a white background, which is fine for
 * sidebar items and other dense controls but borderline for paragraph-length
 * text. Scoping the darker value to .md-typeset preserves the chrome tone
 * while giving the lead paragraph, blockquotes, list markers, and default
 * callout body text a comfortable contrast margin. Dark scheme already
 * passes AA, so it is left at the chrome value. */
[data-md-color-scheme="default"] .md-typeset {
  --muted-foreground: oklch(0.49 0 0);
}

[data-md-color-accent="red"] {
  --brand-accent: oklch(0.577 0.245 27.325);
}
[data-md-color-accent="pink"] {
  --brand-accent: oklch(0.592 0.249 0.584);
}
[data-md-color-accent="purple"],
[data-md-color-accent="deep-purple"] {
  --brand-accent: oklch(0.558 0.288 302.321);
}
[data-md-color-accent="indigo"] {
  --brand-accent: oklch(0.546 0.245 262.881);
}
[data-md-color-accent="blue"],
[data-md-color-accent="light-blue"] {
  --brand-accent: oklch(0.623 0.214 259.815);
}
[data-md-color-accent="cyan"],
[data-md-color-accent="teal"] {
  --brand-accent: oklch(0.704 0.14 182.503);
}
[data-md-color-accent="green"],
[data-md-color-accent="light-green"] {
  --brand-accent: oklch(0.627 0.194 149.214);
}
/* Warm families - use light-scheme-safe fallbacks, then lift lightness in
 * dark mode. Lime, yellow, amber, orange, and deep-orange stay visually
 * distinct while clearing WCAG AA on prose surfaces. Adopters who need a
 * specific hex can still bypass with extra.alloy.accent_color (escape
 * hatch documented in theming.md). */
[data-md-color-accent="lime"] {
  --brand-accent: oklch(0.55 0.14 130);
}
[data-md-color-accent="yellow"] {
  --brand-accent: oklch(0.55 0.11 102);
}
[data-md-color-accent="amber"] {
  --brand-accent: oklch(0.56 0.11 74);
}
[data-md-color-accent="orange"] {
  --brand-accent: oklch(0.56 0.155 46);
}
[data-md-color-accent="deep-orange"] {
  --brand-accent: oklch(0.55 0.18 35);
}

/* Lime / Yellow / Amber - darker on white for contrast, bright but tempered on dark. */
[data-md-color-scheme="default"][data-md-color-accent="lime"] {
  --brand-accent: oklch(0.55 0.14 130);
}
[data-md-color-scheme="default"][data-md-color-accent="yellow"] {
  --brand-accent: oklch(0.55 0.11 102);
}
[data-md-color-scheme="default"][data-md-color-accent="amber"] {
  --brand-accent: oklch(0.56 0.11 74);
}
[data-md-color-scheme="slate"][data-md-color-accent="lime"] {
  --brand-accent: oklch(0.82 0.14 128);
}
[data-md-color-scheme="slate"][data-md-color-accent="yellow"] {
  --brand-accent: oklch(0.84 0.13 98);
}
[data-md-color-scheme="slate"][data-md-color-accent="amber"] {
  --brand-accent: oklch(0.80 0.14 75);
}

/* Orange family - darker on white for prose links, softened slightly on dark. */
[data-md-color-scheme="default"][data-md-color-accent="orange"] {
  --brand-accent: oklch(0.56 0.155 46);
}
[data-md-color-scheme="default"][data-md-color-accent="deep-orange"] {
  --brand-accent: oklch(0.55 0.18 35);
}
[data-md-color-scheme="slate"][data-md-color-accent="orange"] {
  --brand-accent: oklch(0.72 0.14 56);
}
[data-md-color-scheme="slate"][data-md-color-accent="deep-orange"] {
  --brand-accent: oklch(0.72 0.15 43);
}

/* Remaining hue families - lightness lifted on dark scheme so accents read
 * vibrantly against the near-black background. Light-scheme values stay
 * around L=0.55-0.6 for AA contrast against white. */

/* Red */
[data-md-color-scheme="default"][data-md-color-accent="red"] {
  --brand-accent: oklch(0.55 0.22 27);
}
[data-md-color-scheme="slate"][data-md-color-accent="red"] {
  --brand-accent: oklch(0.78 0.17 22);
}

/* Pink */
[data-md-color-scheme="default"][data-md-color-accent="pink"] {
  --brand-accent: oklch(0.58 0.23 0);
}
[data-md-color-scheme="slate"][data-md-color-accent="pink"] {
  --brand-accent: oklch(0.78 0.18 5);
}

/* Purple family */
[data-md-color-scheme="default"][data-md-color-accent="purple"],
[data-md-color-scheme="default"][data-md-color-accent="deep-purple"] {
  --brand-accent: oklch(0.55 0.22 302);
}
[data-md-color-scheme="slate"][data-md-color-accent="purple"],
[data-md-color-scheme="slate"][data-md-color-accent="deep-purple"] {
  --brand-accent: oklch(0.78 0.16 300);
}

/* Indigo */
[data-md-color-scheme="default"][data-md-color-accent="indigo"] {
  --brand-accent: oklch(0.55 0.18 268);
}
[data-md-color-scheme="slate"][data-md-color-accent="indigo"] {
  --brand-accent: oklch(0.78 0.15 265);
}

/* Blue family */
[data-md-color-scheme="default"][data-md-color-accent="blue"],
[data-md-color-scheme="default"][data-md-color-accent="light-blue"] {
  --brand-accent: oklch(0.58 0.18 245);
}
[data-md-color-scheme="slate"][data-md-color-accent="blue"],
[data-md-color-scheme="slate"][data-md-color-accent="light-blue"] {
  --brand-accent: oklch(0.78 0.14 240);
}

/* Cyan / Teal */
[data-md-color-scheme="default"][data-md-color-accent="cyan"],
[data-md-color-scheme="default"][data-md-color-accent="teal"] {
  --brand-accent: oklch(0.6 0.13 200);
}
[data-md-color-scheme="slate"][data-md-color-accent="cyan"],
[data-md-color-scheme="slate"][data-md-color-accent="teal"] {
  --brand-accent: oklch(0.82 0.13 195);
}

/* Green family */
[data-md-color-scheme="default"][data-md-color-accent="green"],
[data-md-color-scheme="default"][data-md-color-accent="light-green"] {
  --brand-accent: oklch(0.58 0.18 145);
}
[data-md-color-scheme="slate"][data-md-color-accent="green"],
[data-md-color-scheme="slate"][data-md-color-accent="light-green"] {
  --brand-accent: oklch(0.78 0.16 140);
}

/* Font + base body - applies regardless of palette. */
body,
.md-typeset {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-color: var(--background);
  color: var(--foreground);
}

::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}

code, kbd, pre, samp,
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--font-mono);
}
/* ============================================================================
 * Layout proportions - thin header, compact rails, and a centered reading
 * column with quiet structure.
 * ============================================================================ */

.md-grid {
  max-width: 78rem;          /* 1248px */
}

/* Thin header. */
.md-header {
  height: auto;
}
.md-header__inner {
  padding-block: 0;
}

/* Material's "ellipsis" wrapper - center title + balance height. */
.md-header__title {
  font-size: 0.9375rem;
  margin-left: 0.5rem;
}

/* Main content padding & measure. */
.md-main__inner {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
  max-width: min(100%, 78rem);
}

.md-content {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  order: 1;
  position: relative;
}
/* Flush-left next to the sidebar - no auto-centering, otherwise content
 * floats in the middle of its grid column with a fat left gap. */
.md-content__inner {
  max-width: 100%;
  min-width: 0;
  padding: 1.25rem 2rem 4rem 1.5rem;
  margin: 0;
}
.md-content__inner::before {
  display: none;
}

/* Sidebar - narrower, flush. Scoped to desktop so Material's mobile drawer
 * defaults (`position: fixed; width: 12.1rem; height: calc(100% - .8rem)`)
 * win on phones - otherwise our `position: relative` collapses the drawer
 * to the height of its content. */
@media (min-width: 76.25em) {
  .md-sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    padding: 1rem 0;
    position: relative;
  }
  .md-sidebar,
  .md-header--lifted ~ .md-container .md-sidebar {
    align-self: flex-start;
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }
  body:has(.md-tabs) .md-sidebar,
  body:has(.md-tabs) .md-header--lifted ~ .md-container .md-sidebar {
    top: calc(var(--header-height) + 2.75rem);
  }
}
.md-sidebar--secondary {
  flex-basis: var(--toc-width);
  order: 2;
  width: var(--toc-width);
}
.md-sidebar--primary {
  order: 0;
}

.md-sidebar__scrollwrap {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  -webkit-mask-image: none;
  mask-image: none;
}
.md-sidebar--primary
  .md-sidebar__scrollwrap--can-scroll.md-sidebar__scrollwrap--at-top:not(.md-sidebar__scrollwrap--at-bottom) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
}
.md-sidebar--primary
  .md-sidebar__scrollwrap--can-scroll.md-sidebar__scrollwrap--at-bottom:not(.md-sidebar__scrollwrap--at-top) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 1.75rem,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 1.75rem,
    #000 100%
  );
}
.md-sidebar--primary
  .md-sidebar__scrollwrap--can-scroll:not(.md-sidebar__scrollwrap--at-top):not(.md-sidebar__scrollwrap--at-bottom) {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 1.75rem,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 1.75rem,
    #000 calc(100% - 1.75rem),
    transparent 100%
  );
}
.md-sidebar__scrollwrap::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

.md-sidebar--primary {
  border-right: 0;
}
.md-sidebar--secondary {
  border: 0;
}

@media (min-width: 76.25em) {
  .md-sidebar--primary {
    padding-right: 0.625rem;
    min-height: calc(100vh - var(--header-height) - 2rem);
  }

  .md-sidebar--secondary {
    padding-left: 1.125rem;
    min-height: calc(100vh - var(--header-height) - 2rem);
  }

  .md-sidebar--primary::after,
  .md-sidebar--secondary::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 2.5rem;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--rail) 1.5rem,
      var(--rail) calc(100% - 1.5rem),
      transparent 100%
    );
    pointer-events: none;
  }

  .md-sidebar--primary::after {
    right: 0.125rem;
  }

  .md-sidebar--secondary::before {
    left: 0.125rem;
  }
}

/* Footer - quiet single-line meta strip, no dark slab. */
.md-footer {
  background: var(--background);
  color: var(--muted-foreground);
  border-top: 0;
}
.md-footer-meta {
  background: transparent;
  font-size: 0.8125rem;
}
.md-footer-nav {
  background: transparent;
  border-top: 0;
  box-shadow: none;
}
.md-footer__link {
  opacity: 0.85;
}
.md-footer__title {
  color: var(--foreground);
  font-weight: 500;
}

/* Skip-to-content + overlay */
.md-skip {
  background: var(--foreground);
  color: var(--background);
  border-radius: var(--radius);
}
.md-overlay {
  background: oklch(0 0 0 / 0.4);
}
/* ============================================================================
 * Typography & prose - alloy type scale with calm breathing.
 * ============================================================================ */

.md-typeset {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--foreground);
  letter-spacing: 0;
}

/* Heading hierarchy - tighter scale, much heavier weight than Material default. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.md-typeset h1 {
  font-size: 1.875em;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
  margin-block: 0 1em;
}
.md-typeset h2 {
  font-size: 1.5em;
  line-height: 1.4;
  margin-block: 2.35em 0.9em;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none;
}
.md-typeset h2::before,
.md-typeset h2::after {
  content: none;
  display: none;
}
.md-typeset h3 {
  font-size: 1.25em;
  line-height: 1.5;
  margin-block: 1.85em 0.75em;
}
.md-typeset h4 {
  font-size: 1em;
  margin-block: 1em;
}

/* Lead paragraph - first <p> after h1 gets larger size + muted color. */
.md-typeset h1 + p {
  font-size: 1.125em;
  color: var(--muted-foreground);
  line-height: 1.75;
  margin-block: -0.5em 2em;
  max-width: min(100%, var(--content-width));
}

.md-typeset p,
.md-typeset li {
  max-width: min(100%, var(--content-width));
}
.md-typeset p {
  margin-block: 0.8rem;
}

.md-typeset hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 2.5rem;
}

/* Links - animated underline-on-hover, none at rest. */
.md-typeset a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--link) 25%, transparent);
  font-weight: 500;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.md-typeset a:hover {
  border-bottom-color: var(--link);
}

.md-typeset a:has(> code),
.md-typeset a:has(code:only-child) {
  border-bottom: 0;
  text-decoration: none;
}

.md-typeset a > code {
  color: var(--link);
  background: color-mix(in oklch, var(--link) 8%, var(--muted));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--link) 18%, transparent);
}

.md-typeset a:hover > code {
  background: color-mix(in oklch, var(--link) 12%, var(--muted));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--link) 28%, transparent);
}

.md-typeset blockquote {
  border-left: 2px solid var(--rail);
  color: var(--muted-foreground);
  padding-inline-start: 1rem;
  margin-inline-start: 0;
  font-style: normal;
}

/* Lists - tighter bullets, proper indent. */
.md-typeset ul,
.md-typeset ol {
  padding-inline-start: 1.5rem;
}
.md-typeset li::marker {
  color: var(--muted-foreground);
}
.md-typeset li + li {
  margin-block-start: 0.375rem;
}

/* kbd - compact key cap. */
.md-typeset kbd {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 0 var(--border);
  padding: 0.125rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: 0.05em;
}

/* Screenshot previews - framed, but only when authors opt in. */
.md-typeset p:has(> .alloy-screenshot:only-child) {
  max-width: none;
  margin-block: 1.25rem 1.75rem;
}

.md-typeset .alloy-screenshot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 18px 42px -32px oklch(0 0 0 / 0.35), var(--shadow-sm);
}

[data-md-color-scheme="slate"] .md-typeset .alloy-screenshot {
  box-shadow: 0 18px 42px -30px oklch(0 0 0 / 0.72), var(--shadow-sm);
}

.md-typeset .grid > p:has(> .alloy-screenshot:only-child),
.md-typeset .tabbed-block > p:has(> .alloy-screenshot:only-child) {
  margin-block: 0;
}
/* ============================================================================
 * Header - alloy-shaped via partials/header.html override.
 *
 * Layout: [drawer-toggle? logo + sitename] [spacer] [search] [palette] [source]
 * ============================================================================ */

/* Header shell: sticky, quiet, and transparent enough to feel integrated with
 * the page without introducing a visible divider. */
.md-header--alloy {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: auto;
  background: color-mix(in oklch, var(--background) 96%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--foreground);
  border-bottom: 0;
  box-shadow: none;
}

.md-header--alloy.md-header--shadow,
.md-header--alloy.md-header--lifted {
  box-shadow: none;
}

/* Material's header.autohide feature slides the header out of view by setting
 * [hidden] on .md-header and applying transform: translateY(-100%). Scope our
 * transform reset to :not([hidden]) so autohide still works when the user
 * opts in via the feature flag. */
.md-header--alloy:not([hidden]) {
  transform: none;
}

.md-header--alloy .md-header__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--header-height);
  padding: 0 1.5rem;
  max-width: none;
}

/* Brand block: compact logo plus site name. */
.md-header__brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  transition: opacity 150ms ease-out;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  max-width: min(18rem, 42vw);
}
.md-header__brand:hover {
  opacity: 0.85;
}
.md-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
}
.md-header__logo svg,
.md-header__logo img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.md-header__sitename {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  font-size: 0.9375rem;       /* slightly smaller than logo line */
  font-weight: 600;
}

/* Spacer pushes search/actions to the right. */
.md-header__spacer {
  flex: 1;
}

/* Drawer toggle - visible only on small viewports. */
.md-header__drawer-toggle,
.md-header__search-toggle {
  display: none;
  color: var(--muted-foreground);
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.md-header__drawer-toggle:hover,
.md-header__search-toggle:hover {
  color: var(--foreground);
  background: var(--accent);
}

@media (max-width: 60em) {
  .md-header__drawer-toggle,
  .md-header__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
  }

  .md-header--alloy .md-header__inner {
    padding-inline: 0.75rem;
    gap: 0.375rem;
  }

  /* Tablet portrait still has room for the sitename. Keep the logo + name
   * legible by capping the brand at half the viewport. */
  .md-header__brand {
    max-width: min(12rem, 50vw);
  }
}

/* Phone-narrow: collapse the brand to logo-only so search + palette + source
 * controls fit without overlap. */
@media (max-width: 30em) {
  .md-header__sitename {
    display: none;
  }
  .md-header__brand {
    max-width: 2rem;
  }
}

/* Right-side icon buttons (palette toggle, repo source). */
.md-header--alloy .md-header__option,
.md-header--alloy .md-header__source {
  margin-inline: 0;
}

.md-header--alloy .md-header__button:not(.md-header__drawer-toggle):not(.md-header__search-toggle):not([hidden]) {
  color: var(--muted-foreground);
  margin: 0;
  padding: 0.1875rem;
  border-radius: var(--control-radius);
  width: var(--control-height);
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.md-header--alloy .md-header__button:not(.md-header__drawer-toggle):not(.md-header__search-toggle):not([hidden]):hover {
  color: var(--foreground);
  background: var(--accent);
  opacity: 1;
}

/* Respect [hidden] on header buttons - Material toggles palette labels via this. */
.md-header--alloy .md-header__button[hidden] {
  display: none;
}

@media (max-width: 44.984em) {
  .md-header--alloy .md-header__source {
    display: none;
  }

  .md-header--alloy .md-header__button:not(.md-header__drawer-toggle):not(.md-header__search-toggle):not([hidden]) {
    width: 1.75rem;
    height: 1.75rem;
  }
}
/* ============================================================================
 * Sidebar - compact navigation rail for dense documentation.
 * ============================================================================ */

.md-sidebar {
  background: transparent;
}

/* Hide Material's brand-block title in the primary sidebar. It duplicates
 * the header brand on desktop. Same for the in-sidebar source link. */
.md-sidebar--primary .md-nav--primary > .md-nav__title,
.md-sidebar--primary .md-nav--primary > .md-nav__source {
  display: none;
}

/* Wrapper paddings keep the active pill aligned with the rail. */
.md-nav {
  font-size: 0.75rem;
  line-height: 1.35;
}
.md-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  padding: 0 0.5rem;
  margin: 0;
}
.md-nav__item {
  margin: 0;
  padding: 0;
  position: relative;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item {
  margin: 0;
}

.md-sidebar--primary .md-nav__item--section {
  margin-top: 0;
}

/* Top-level section links are already represented by the tab bar on desktop.
 * Material still emits the active section row in the primary sidebar; hide
 * that duplicate so the left rail starts with the section's child pages.
 * Two scoping conditions:
 *   - Only when `.md-tabs` is rendered (navigation.tabs feature on); when
 *     tabs are off the sidebar is the only way to name a section.
 *   - Only at the desktop breakpoint; on mobile the tabs row is below the
 *     header but the open drawer is what users actually navigate from, and
 *     the drawer needs the section labels so the tree is not empty. */
@media (min-width: 76.25em) {
  body:has(.md-tabs)
    .md-sidebar--primary
    .md-nav--primary
    > .md-nav__list
    > .md-nav__item--section
    > label.md-nav__link {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Top-level section group label (rendered when navigation.sections is on).
 * ------------------------------------------------------------------------- */
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__title {
  display: flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.5rem;
  margin: 0.375rem 0 0;
  background: transparent;
  box-shadow: none;
  color: color-mix(in oklch, var(--muted-foreground) 82%, transparent);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: default;
}
.md-sidebar--primary
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--section
  > .md-nav__title
  > .md-nav__icon {
  display: none;          /* section header isn't collapsible */
}

/* ---------------------------------------------------------------------------
 * Menu row - applies to <a class="md-nav__link"> AND nested
 * <label class="md-nav__title"> click-targets. They share visual treatment.
 * ------------------------------------------------------------------------- */
.md-nav__link,
.md-sidebar .md-nav .md-nav label.md-nav__title,
.md-sidebar .md-nav__item--nested > label.md-nav__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
  padding: 0 0.3125rem;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.md-nav__link:hover,
.md-sidebar .md-nav label.md-nav__title:hover {
  background: color-mix(in oklch, var(--muted) 72%, transparent);
  color: var(--foreground);
}

/* Section index rows (`navigation.indexes`) wrap a real link and a disclosure
 * label in a `.md-nav__container`. Treat the wrapper as layout only so the row
 * doesn't look bold, double-padded, or hard to click. */
.md-sidebar--primary .md-nav__container {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-weight: 400;
}

.md-sidebar--primary .md-nav__container:hover {
  background: transparent;
  color: var(--muted-foreground);
}

.md-sidebar--primary .md-nav__container > a.md-nav__link {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
}

/* Material marks this disclosure label hidden in some navigation.indexes
 * structures. Keep the chevron visible so sections can expand in place. */
.md-sidebar--primary .md-nav__container > label.md-nav__link {
  display: flex;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  padding: 0;
  justify-content: center;
}

.md-sidebar--primary .md-nav__container > label.md-nav__link > .md-nav__icon {
  display: none;
}

.md-sidebar--primary .md-nav__container > label.md-nav__link::after {
  content: "";
  width: 0.6875rem;
  height: 0.6875rem;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.72;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none !important;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}

.md-sidebar--primary .md-nav__container > label.md-nav__link:hover::after {
  opacity: 0.95;
}

.md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
  pointer-events: auto;
}

.md-sidebar--primary .md-nav__item--nested > label.md-nav__link > .md-nav__icon {
  order: 99;
  display: block;
  flex: 0 0 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  margin-inline-start: auto;
  color: color-mix(in oklch, var(--muted-foreground) 88%, transparent);
  background: currentColor;
  opacity: 0.88;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none !important;
  transition: opacity 120ms ease-out;
}

.md-sidebar--primary .md-nav__item--nested > label.md-nav__link > .md-nav__icon::before,
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link > .md-nav__icon::after {
  display: none !important;
  content: none !important;
}

.md-sidebar--primary .md-nav__item--nested > label.md-nav__link:hover > .md-nav__icon {
  opacity: 1;
}

.md-sidebar--primary
  .md-nav__item--nested
  > .md-nav__toggle:checked
  ~ .md-nav__container
  > label.md-nav__link::after,
.md-sidebar--primary
  .md-nav__item--nested
  > .md-toggle--indeterminate
  ~ .md-nav__container
  > label.md-nav__link::after {
  transform: rotate(90deg) !important;
}

.md-sidebar--primary
  .md-nav__item--nested
  > .md-nav__toggle:not(:checked):not(.md-toggle--indeterminate)
  ~ .md-nav__container
  > label.md-nav__link::after {
  transform: none !important;
}

.md-sidebar--primary
  .md-nav__item--nested
  > .md-nav__toggle:checked
  ~ label.md-nav__link
  > .md-nav__icon,
.md-sidebar--primary
  .md-nav__item--nested
  > .md-toggle--indeterminate
  ~ label.md-nav__link
  > .md-nav__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.md-sidebar--primary
  .md-nav__item--nested
  > .md-nav__toggle:not(:checked):not(.md-toggle--indeterminate)
  ~ label.md-nav__link
  > .md-nav__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* Active state - outline pill (border + bg). */
.md-sidebar .md-nav__link--active,
.md-sidebar .md-nav__link.md-nav__link--active {
  background: color-mix(in oklch, var(--muted) 78%, transparent);
  border-color: color-mix(in oklch, var(--border) 82%, transparent);
  color: var(--foreground);
  font-weight: 500;
}

/* The text span inside menu items - let it ellipsis instead of wrap. */
.md-nav__link .md-ellipsis,
.md-sidebar .md-nav label.md-nav__title > :not(.md-nav__icon) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Disclosure caret - push to the right of the row regardless of DOM order. */
.md-sidebar .md-nav label.md-nav__title > .md-nav__icon {
  order: 99;
  margin-inline-start: auto;
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  display: inline-block;
  color: color-mix(in oklch, var(--muted-foreground) 72%, transparent);
}

.md-sidebar--primary .md-nav__link svg,
.md-sidebar--primary .md-nav__title svg,
.md-sidebar--primary .md-status svg {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.72;
}

.md-sidebar--primary .md-nav__link:hover svg,
.md-sidebar--primary .md-nav__title:hover svg,
.md-sidebar--primary .md-nav__link--active svg {
  opacity: 0.92;
}

/* ---------------------------------------------------------------------------
 * Nested levels - subtle indent, no extra container border.
 * Nested rows use padding-left only so the active pill remains compact.
 * ------------------------------------------------------------------------- */
.md-nav .md-nav {
  border-left: 0;
  padding: 0;
  margin: 0;
}
.md-nav .md-nav .md-nav__list {
  padding-inline-start: 0.875rem;
  border-left: 0;
  margin: 0.125rem 0 0.25rem 0;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav {
  display: none;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav,
.md-sidebar--primary .md-nav__item--nested > .md-toggle--indeterminate ~ .md-nav {
  display: block;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav > label.md-nav__title,
.md-sidebar--primary .md-nav__item--section > .md-nav > label.md-nav__title {
  /* Upstream emits nested section titles that duplicate the visible row. */
  display: none;
}

/* Material injects the page TOC inside the active primary nav item for mobile.
 * Keep that copy out of the desktop sidebar to avoid duplicate guide rails. */
.md-sidebar--primary .md-nav--secondary,
.md-sidebar--primary .md-nav__link[for="__toc"] {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Right-side TOC ("On this page") - text list with a short active accent bar.
 * The outer page rail lives in layout.css; this component intentionally avoids
 * a second continuous line inside the item list.
 * ------------------------------------------------------------------------- */
.md-nav--secondary,
.md-nav--secondary-alloy,
.md-sidebar--secondary,
.md-sidebar--secondary .md-nav,
.md-sidebar--secondary .md-nav--secondary {
  border: 0;
  background: transparent;
}

.md-sidebar--secondary .md-nav--secondary {
  display: block;
  min-width: 0;
  overflow: hidden;
}

.md-nav--secondary > .md-nav__title,
.md-nav__title--alloy {
  display: flex;
  align-items: center;
  position: relative;
  top: auto;
  z-index: 1;
  width: 100%;
  min-width: 0;
  color: var(--foreground);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.2;
  padding: 0 0 0.4375rem;
  margin: 0 0 0.125rem;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-nav--secondary > .md-nav__title::before,
.md-nav__title--alloy::before {
  display: none;
  content: none;
}
.md-nav--secondary > .md-nav__title > .md-nav__icon {
  display: none;
}

.md-sidebar--secondary .md-nav--secondary .md-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  clear: both;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.md-sidebar--secondary .md-nav--secondary .md-nav__link {
  display: flex;
  align-items: center;
  height: auto;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0.1875rem 0 0.1875rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 400;
  color: color-mix(in oklch, var(--muted-foreground) 68%, transparent);
  background: transparent;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}

.md-sidebar--secondary .md-nav--secondary .md-nav__link .md-ellipsis,
.md-sidebar--secondary .md-nav--secondary .md-nav__link .md-typeset {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.md-sidebar--secondary .md-nav--secondary .md-nav__link:hover {
  color: color-mix(in oklch, var(--foreground) 86%, var(--muted-foreground));
  background: transparent;
}

.md-sidebar--secondary .md-nav--secondary .md-nav__link.md-nav__link--active {
  background: transparent;
  color: var(--foreground);
  font-weight: 600;
  box-shadow: none;
}

.md-sidebar--secondary .md-nav--secondary > .md-nav__list {
  position: relative;
  padding-left: 0;
}

.md-sidebar--secondary .md-nav--secondary .md-nav__list .md-nav__list {
  border-left: 0;
  margin: 0 0 0.125rem;
  padding: 0 0 0 0.75rem;
  background: transparent;
  position: relative;
}
.md-sidebar--secondary .md-nav--secondary .md-nav__link {
  position: relative;
}
.md-sidebar--secondary .md-nav--secondary .md-nav__link::before {
  display: none;
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.34rem;
  bottom: 0.34rem;
  width: 2px;
  border-radius: 999px;
  background: var(--brand-accent);
}
.md-sidebar--secondary .md-nav--secondary .md-nav__link--active::after {
  display: none;
  content: none;
}
.md-sidebar--secondary .md-nav--secondary .md-nav__link--active::before {
  display: block;
}
/* ============================================================================
 * Code - alloy surface, subtle border, soft radius.
 *
 * Three structures Material can render:
 *   1) Plain fenced block:
 *      <div class="highlight"><pre><code>...</code></pre></div>
 *   2) With filename ("title="..."):
 *      <div class="highlight"><span class="filename">...</span><pre><code/></pre></div>
 *   3) With line numbers ("linenums="1""):
 *      <div class="highlight"><table class="highlighttable"><tbody><tr>
 *        <td class="linenos"><div class="linenodiv"><pre>1\n2\n3</pre></div></td>
 *        <td class="code"><div><pre><code>...</code></pre></div></td>
 *      </tr></tbody></table></div>
 *
 * We put the visible border on the outermost wrapper only - never both
 * `.highlight` AND inner pre - otherwise we get nested boxes.
 * ============================================================================ */

/* Inline code */
.md-typeset code {
  background: var(--muted);
  color: var(--foreground);
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.2rem 0.3rem;
  font-size: 0.875em;
  font-weight: 500;
}

/* Code inside any fenced block - strip the inline-code chrome. */
.md-typeset pre > code,
.md-typeset .highlight code {
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 400;
  font-size: 0.875em;
}

/* The bordered card around fenced blocks. Always the outermost `.highlight`. */
.md-typeset .highlight {
  background: var(--code);
  color: var(--code-foreground);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: none;
  max-width: min(100%, var(--content-width));
  min-width: 0;
  overflow: hidden;
  margin-inline: 0;
  margin-block: 1.35rem 1.1rem;
  position: relative;
}

[data-md-color-scheme="default"] .md-typeset .highlight {
  background: color-mix(in oklch, var(--surface) 82%, var(--background));
}

[data-md-color-scheme="slate"] .md-typeset .highlight {
  background: color-mix(in oklch, var(--surface) 86%, var(--background));
}

/* Reset everything inside .highlight that could draw a second border or
 * its own background. */
.md-typeset .highlight pre,
.md-typeset .highlight code,
.md-typeset .highlight .codehilite,
.md-typeset .highlight > pre {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The actual code <pre> gets the padding so the text breathes. */
.md-typeset .highlight > pre,
.md-typeset .highlight > pre > code {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1rem 3rem 1rem 1rem;
  font-size: 0.875em;
  line-height: 1.5;
  border-radius: inherit;
}
.md-typeset .highlight > pre > code {
  padding: 0;        /* code inside pre - pre already has the padding */
  display: block;
  /* max-width: none + width: max-content + min-width: 100% lets the code
   * box grow to its widest line, which is what makes pre's scrollWidth
   * track the actual content and engage in-block horizontal scroll. */
  width: max-content;
  max-width: none;
  min-width: 100%;
}

.md-typeset .highlight pre > span:empty {
  display: none;
}

/* Per-line spans need width: max-content + min-width: 100% so the span box
 * tracks actual content width. Without this, `display: block` makes each
 * span take parent width regardless of content, so the pre's scrollWidth
 * never sees long lines and the in-block horizontal scroll never engages.
 * The visible text then spills past the span and gets clipped by the
 * parent .highlight's overflow: hidden, which looks like a bug. */
.md-typeset .highlight code > span[id^="__span"] {
  display: block;
  width: max-content;
  min-width: 100%;
  min-height: 1.5em;
  line-height: 1.5;
  border-radius: 0;
  padding-inline: 0.375rem 3.5rem;
}

.md-typeset .highlight .hll,
.md-typeset .highlight code > span[id^="__span"].hll {
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in oklch, var(--ring) 12%, transparent);
}

.md-typeset .highlight code > span[id^="__span"].hll {
  padding-inline: 0.375rem 3.5rem;
}

.md-typeset .highlight code[data-md-copying] .hll {
  display: block;
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Variant: line-numbered code block (.highlighttable).
 * Material wraps it in a <table> with linenos column + code column.
 * ------------------------------------------------------------------------- */
.md-typeset .highlight .highlighttable {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-spacing: 0;
  margin: 0;
  width: 100%;
  display: table;
  table-layout: fixed;
}
.md-typeset .highlight .highlighttable tbody,
.md-typeset .highlight .highlighttable tr {
  background: transparent;
  border: 0;
}

.md-typeset .highlight .highlighttable .linenos {
  background: transparent;
  color: var(--muted-foreground);
  border: 0;
  padding: 1rem 0.5rem 1rem 0.875rem;
  user-select: none;
  text-align: right;
  width: 2rem;
  min-width: 2rem;
  vertical-align: top;
  font-size: 0.875em;
  line-height: 1.5;
  white-space: nowrap;
}
.md-typeset .highlight .highlighttable .linenos pre,
.md-typeset .highlight .highlighttable .linenos .linenodiv {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 1em;
  line-height: inherit;
}
.md-typeset .highlight .highlighttable .linenos span,
.md-typeset .highlight .highlighttable .linenos a {
  display: inline;
  min-height: 0;
  line-height: inherit;
  color: inherit;
  border: 0;
  border-bottom: 0;
  box-shadow: none;
  text-decoration: none;
}
.md-typeset .highlight .highlighttable .linenos span:first-child:empty {
  display: none;
}

.md-typeset .highlight .highlighttable .code {
  background: transparent;
  border: 0;
  padding: 0;
  vertical-align: top;
  width: calc(100% - 2rem);
  min-width: 0;
}
.md-typeset .highlight .highlighttable .code > div,
.md-typeset .highlight .highlighttable .code pre {
  background: transparent;
  border: 0;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  padding: 0;
}
.md-typeset .highlight .highlighttable .code pre > code {
  display: block;
  width: max-content;
  max-width: none;
  min-width: 100%;
  padding: 1rem 3.5rem 1rem 0.875rem;
  font-size: 0.875em;
  line-height: 1.5;
}
.md-typeset .highlight .highlighttable .code code > span[id^="__span"] {
  display: block;
  width: max-content;
  min-width: 100%;
  min-height: 1.5em;
  line-height: 1.5;
  border-radius: 0;
  padding-inline: 0.375rem 3.5rem;
}

/* Standalone <pre> with no .highlight wrapper (rare - pure indent block). */
.md-typeset > pre {
  background: var(--code);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1rem;
  margin-block: 1.5rem 1rem;
}

/* ---------------------------------------------------------------------------
 * Filename strip above a block ("title=..."). Sits flush at the top of
 * `.highlight`, separated from the code by a hairline.
 * ------------------------------------------------------------------------- */
.md-typeset .highlight .highlighttable th.filename {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: table-cell;
  padding: 0;
  min-width: 0;
}

.md-typeset .highlight > .filename,
.md-typeset .highlight span.filename,
.md-typeset .highlight .highlighttable th.filename > .filename {
  background: color-mix(in oklch, var(--background) 22%, transparent);
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
  font-size: 0.8125em;
  font-family: var(--font-mono);
  padding: 0.625rem 3.5rem 0.5rem 1.25rem;
  margin: 0;
  display: block;
}

.md-typeset .highlight .highlighttable tr:has(> th.filename) {
  background: transparent;
  border: 0;
}

.md-typeset .highlight .highlighttable tr:has(> th.filename) + tr > :is(td, th) {
  border-top: 0;
}

/* ---------------------------------------------------------------------------
 * Copy button - Material positions it absolute in the top-right corner.
 * ------------------------------------------------------------------------- */
.md-clipboard {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  inset-inline-end: 0.5rem;
  left: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: color-mix(in oklch, var(--code) 82%, var(--background));
  color: var(--muted-foreground);
  opacity: 0;
  transition: opacity 150ms ease-out, color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}

.md-typeset .highlight .md-clipboard,
.md-typeset .highlight [data-md-component="clipboard"] {
  top: 0.5rem;
  right: 0.5rem;
  inset-inline-end: 0.5rem;
  left: auto;
  transform: none;
}

.md-typeset .highlight .md-code__button,
.md-typeset .highlight [data-md-component="clipboard"] {
  z-index: 6;
}
.md-typeset .highlight .md-code__content {
  display: block;
  min-width: 0;
}
.md-typeset .highlight .md-code__nav {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  inset-inline-end: 0.5rem;
  left: auto;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.md-typeset .highlight:hover .md-code__nav,
.md-typeset .highlight .md-code__nav:focus-within,
.md-typeset .highlight .md-code__button--active {
  opacity: 1;
}
.md-typeset .highlight .md-code__nav:hover {
  background: transparent;
  border-color: transparent;
}
.md-typeset .highlight .md-code__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: color-mix(in oklch, var(--code) 82%, var(--background));
  color: var(--muted-foreground);
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}
.md-typeset .highlight .md-code__button:hover,
.md-typeset .highlight .md-code__button--active {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}
.md-typeset .highlight .md-code__button::after {
  margin: 0;
}
.md-clipboard::before,
.md-clipboard::after {
  margin: 0;
  width: 1rem;
  height: 1rem;
}
.md-typeset .highlight:hover .md-clipboard,
.md-typeset .highlight .md-clipboard:focus-visible {
  opacity: 0.85;
}
.md-typeset .highlight .md-clipboard:hover {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
  opacity: 1;
}

/* Horizontal scroll for long lines - keep the scrollbar quiet. */
.md-typeset .highlight pre,
.md-typeset .highlight .highlighttable .code pre {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* ============================================================================
 * Admonitions - semantic accent stripes on restrained surfaces.
 * ============================================================================ */

.md-typeset .admonition,
.md-typeset details {
  --callout-note: oklch(0.66 0.16 238);
  --callout-tip: oklch(0.66 0.16 150);
  --callout-warning: oklch(0.72 0.16 72);
  --callout-danger: oklch(0.64 0.22 25);
  --callout-example: oklch(0.62 0.18 300);
  --callout-color: var(--muted-foreground);
  --callout-bg-mix: 8%;
  --callout-border-mix: 52%;
  --callout-code-border-mix: 26%;
  width: auto;
  margin-block: 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--callout-color) var(--callout-border-mix), transparent);
  border-left-width: 1px;
  border-radius: var(--radius-xl);
  background: color-mix(in oklch, var(--callout-color) var(--callout-bg-mix), var(--background));
  color: color-mix(in oklch, var(--card-foreground) 80%, transparent);
  box-shadow: none;
  font-size: 1em;
  line-height: 1.65;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  --callout-bg-mix: 13%;
  --callout-border-mix: 58%;
  --callout-code-border-mix: 34%;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 1.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  overflow: visible;
  list-style: none;
}

.md-typeset details > summary {
  cursor: pointer;
  padding-inline-start: 0;
  padding-inline-end: 1.75rem;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-indent: 0;
}

[dir="ltr"] .md-typeset details > summary {
  padding-left: 0;
  padding-right: 1.75rem;
}

[dir="rtl"] .md-typeset details > summary {
  padding-right: 0;
  padding-left: 1.75rem;
}

.md-typeset details:not([open]) {
  padding-block: 0.75rem;
}

.md-typeset details:not([open]) > summary {
  margin-bottom: 0;
}

.md-typeset details > summary:focus,
.md-typeset details > summary:focus-visible {
  outline: 0;
  box-shadow: none;
}

.md-typeset details > summary::-webkit-details-marker {
  display: none;
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  content: "";
  position: static;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  background-color: var(--callout-color);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[dir] .md-typeset details > summary::before {
  inset: auto;
  margin: 0;
}

.md-typeset details > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  background-color: currentColor;
  transform: translateY(-50%);
  transform-origin: center;
  color: var(--callout-color);
  opacity: 0.85;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[dir="ltr"] .md-typeset details > summary::after {
  right: 0;
  left: auto;
}

[dir="rtl"] .md-typeset details > summary::after {
  left: 0;
  right: auto;
}

.md-typeset details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.md-typeset .admonition > p:first-child,
.md-typeset .admonition > .admonition-title + p,
.md-typeset details > summary + p {
  margin-top: 0;
}

.md-typeset .admonition > p:last-child,
.md-typeset details > p:last-child {
  margin-bottom: 0;
}

.md-typeset .admonition code,
.md-typeset details code {
  border: 1px solid color-mix(in srgb, var(--callout-color) var(--callout-code-border-mix), transparent);
  background: transparent;
}

.md-typeset .admonition .highlight,
.md-typeset details .highlight {
  background: color-mix(in oklch, var(--background) 40%, transparent);
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  --callout-color: var(--callout-note);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.question,
.md-typeset details.question {
  --callout-color: var(--callout-tip);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.warn,
.md-typeset details.warn,
.md-typeset .admonition.attention,
.md-typeset details.attention,
.md-typeset .admonition.caution,
.md-typeset details.caution {
  --callout-color: var(--callout-warning);
  --callout-bg-mix: 10%;
}

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.bug,
.md-typeset details.bug,
.md-typeset .admonition.error,
.md-typeset details.error {
  --callout-color: var(--callout-danger);
  --callout-bg-mix: 9%;
}

.md-typeset .admonition.example,
.md-typeset details.example,
.md-typeset .admonition.quote,
.md-typeset details.quote {
  --callout-color: var(--muted-foreground);
  --callout-bg-mix: 8%;
}

.md-typeset .admonition.example,
.md-typeset details.example {
  --callout-color: var(--callout-example);
}
/* Tables - quiet row rules instead of boxed table cards. */

.md-typeset table:not([class]) {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: none;
  font-size: 1em;
  margin-block: 1.5rem;
  overflow: hidden;
  background: color-mix(in oklch, var(--surface-raised) 80%, var(--background));
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.5rem;
  text-align: start;
  vertical-align: middle;
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: 0;
}

.md-typeset table:not([class]) th {
  height: 2.5rem;
  background: color-mix(in oklch, var(--muted) 62%, transparent);
  color: var(--foreground);
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0;
  white-space: nowrap;
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color 120ms ease-out;
}
.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
}
/* ============================================================================
 * Search - alloy command-palette button.
 *
 * Zensical's runtime expects a `data-md-component="search"` host with a
 * child button and renders the search overlay itself. Alloy only restyles
 * that trigger.
 * ============================================================================ */

.md-search--alloy {
  display: inline-flex;
  align-items: center;
}

/* Material's default trigger adds its own search icon and shortcut via
 * pseudo-elements. Our partial renders real children, so suppress those. */
.md-search__button--alloy::before,
.md-search__button--alloy::after {
  content: none;
  display: none;
}

/* Search trigger button. */
.md-search__button--alloy {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  width: 12rem;
  /* SVG icon + placeholder + kbd live as real children, so the trigger needs
     its own horizontal padding instead of Material's pseudo-element offsets. */
  padding: 0 0.75rem;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

[dir="ltr"] .md-search__button--alloy,
[dir="rtl"] .md-search__button--alloy {
  padding: 0 0.75rem;
}

@media (min-width: 1024px) {
  .md-search__button--alloy { width: 14rem; }
}

[data-md-color-scheme="slate"] .md-search__button--alloy {
  background: var(--card);
}

.md-search__button--alloy:hover {
  background: color-mix(in oklch, var(--muted) 60%, var(--background));
  color: var(--accent-foreground);
}

.md-search__button--alloy:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.md-search__button--alloy .md-search__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.5;
}

.md-search__button--alloy .md-search__placeholder {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-weight: 400;
}

/* Keyboard hint pill on the right. */
.md-search__button--alloy .md-search__kbd {
  display: none;
  align-items: center;
  gap: 0.125rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted-foreground);
  box-shadow: none;
  flex-shrink: 0;
  margin-inline-start: auto;
}
@media (min-width: 640px) {
  .md-search__button--alloy .md-search__kbd { display: inline-flex; }
}

@media (max-width: 60em) {
  .md-search--alloy {
    display: none;
  }

  .md-search__button--alloy {
    width: auto;
    padding: 0 0.5rem;
  }
  [dir="ltr"] .md-search__button--alloy,
  [dir="rtl"] .md-search__button--alloy {
    padding: 0 0.5rem;
  }
  .md-search__button--alloy .md-search__placeholder,
  .md-search__button--alloy .md-search__kbd {
    display: none;
  }
}
/* ============================================================================
 * Extras - surfaces that only show up on richer sites:
 *   .md-tabs       (navigation.tabs feature - top-level sections as tabs)
 *   .md-path       (navigation.path feature - breadcrumbs above article)
 *   .md-source     (repo link with stars/forks)
 *   .md-content__button (edit/view article actions)
 *   .md-status     (status badges: new, deprecated)
 *   .md-tags       (tag chips)
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * Tabs - sit directly under the header, render top-level nav sections.
 * ------------------------------------------------------------------------- */
/* All .md-tabs* rules in Material live at (0,1,0) or (0,2,0). Our matching
 * selectors load after Material and win by cascade order, so !important is
 * not needed. The previously-duplicate [data-md-color-primary] block was
 * paranoia - Material does not chain primary-attribute selectors to .md-tabs. */
.md-tabs {
  position: relative;
  top: auto;
  z-index: 49;
  background: var(--background);
  color: var(--muted-foreground);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.md-tabs::-webkit-scrollbar { display: none; }

.md-tabs .md-grid {
  max-width: none;
  padding: 0.125rem 1.5rem 0.375rem;
}

.md-tabs__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-tabs__item {
  display: flex;
  align-items: center;
  height: 1.875rem;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.md-tabs__item--active {
  border: 0;
  border-bottom: 0;
  box-shadow: none;
}

.md-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.625rem;
  padding: 0 0.5625rem;
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  margin-block: 0;
  box-shadow: none;
  opacity: 1;
  transition: color 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out;
}
.md-tabs__link::before,
.md-tabs__link::after {
  display: none;
  content: none;
}
.md-tabs__link:hover {
  color: var(--foreground);
  background: var(--top-nav-hover-bg);
}
.md-tabs__item--active > .md-tabs__link,
.md-tabs__link--active {
  color: var(--top-nav-active-fg);
  background: var(--top-nav-active-bg);
  border-color: var(--top-nav-active-border);
}

.md-header--lifted .md-tabs {
  margin-bottom: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Breadcrumbs - quiet path above article title.
 * ------------------------------------------------------------------------- */
.md-path {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding: 1rem 2.5rem 0 2rem;
  margin: 0;
  background: transparent;
}
.md-path__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.md-path__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.md-path__item:not(:last-child)::after {
  content: "/";
  color: var(--muted-foreground);
  opacity: 0.5;
}
.md-path__link {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 120ms ease-out;
}
.md-path__link:hover {
  color: var(--foreground);
}

/* ---------------------------------------------------------------------------
 * Repo source - compact pill in the header.
 * ------------------------------------------------------------------------- */
.md-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: var(--control-height);
  padding: 0 0.625rem 0 0.5625rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: color 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out;
}
.md-source:hover {
  background: var(--background);
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--ring) 50%, var(--border));
}
.md-source__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  flex-shrink: 0;
}
.md-source__icon svg {
  display: none;
}
.md-source__icon::before {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 98 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48.85 0C21.9 0 0 21.9 0 48.85c0 21.6 14 39.9 33.4 46.35 2.45.45 3.35-1.05 3.35-2.35 0-1.15-.05-5-.05-9.05-12.3 2.25-15.5-3-16.5-5.75-.55-1.4-2.95-5.75-5.05-6.9-1.7-.9-4.15-3.15-.05-3.2 3.85-.05 6.6 3.55 7.5 5 4.4 7.4 11.45 5.3 14.25 4.05.45-3.2 1.75-5.35 3.15-6.6-10.85-1.25-22.2-5.45-22.2-24.1 0-5.3 1.9-9.7 5-13.1-.5-1.25-2.15-6.25.5-12.95 0 0 4.05-1.3 13.35 5 3.9-1.1 8-1.65 12.15-1.65s8.25.55 12.15 1.65c9.3-6.35 13.35-5 13.35-5 2.65 6.7 1 11.7.5 12.95 3.1 3.4 5 7.75 5 13.1 0 18.7-11.4 22.85-22.25 24.1 1.8 1.55 3.35 4.55 3.35 9.2 0 6.6-.05 11.9-.05 13.55 0 1.3.9 2.85 3.35 2.35A48.9 48.9 0 0 0 97.7 48.85C97.7 21.9 75.8 0 48.85 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 98 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48.85 0C21.9 0 0 21.9 0 48.85c0 21.6 14 39.9 33.4 46.35 2.45.45 3.35-1.05 3.35-2.35 0-1.15-.05-5-.05-9.05-12.3 2.25-15.5-3-16.5-5.75-.55-1.4-2.95-5.75-5.05-6.9-1.7-.9-4.15-3.15-.05-3.2 3.85-.05 6.6 3.55 7.5 5 4.4 7.4 11.45 5.3 14.25 4.05.45-3.2 1.75-5.35 3.15-6.6-10.85-1.25-22.2-5.45-22.2-24.1 0-5.3 1.9-9.7 5-13.1-.5-1.25-2.15-6.25.5-12.95 0 0 4.05-1.3 13.35 5 3.9-1.1 8-1.65 12.15-1.65s8.25.55 12.15 1.65c9.3-6.35 13.35-5 13.35-5 2.65 6.7 1 11.7.5 12.95 3.1 3.4 5 7.75 5 13.1 0 18.7-11.4 22.85-22.25 24.1 1.8 1.55 3.35 4.55 3.35 9.2 0 6.6-.05 11.9-.05 13.55 0 1.3.9 2.85 3.35 2.35A48.9 48.9 0 0 0 97.7 48.85C97.7 21.9 75.8 0 48.85 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.md-source__repository {
  margin: 0;
  padding: 0;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 12rem;
}
.md-source__facts {
  display: none;          /* hide the noisy stars/forks meta */
}

/* Same look in the sidebar (Material renders source there too on small viewports). */
.md-nav__source {
  background: transparent;
  padding: 0.5rem 0.625rem;
}

/* ---------------------------------------------------------------------------
 * Article action buttons (edit/view).
 * ------------------------------------------------------------------------- */
/* Material owns these as `.md-typeset .md-content__button` at (0,2,0) and
 * (0,2,1) on hover, with hover painting `--md-accent-fg-color--transparent`.
 * Our rules use the same `.md-typeset` chain so we match Material's
 * specificity and win by cascade order without !important. */
.md-typeset .md-content__button {
  margin-block: 0;
  margin-inline: 0.25rem;
  padding: 0;
  border-radius: var(--control-radius);
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--border) 82%, transparent);
  width: var(--control-height);
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  filter: none;
  transition: color 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out;
}
.md-typeset .md-content__button:hover {
  color: var(--foreground);
  background: var(--muted);
  border-color: var(--border);
}
.md-typeset .md-content__button:focus,
.md-typeset .md-content__button:focus-visible,
.md-typeset .md-content__button:active {
  outline: none;
  box-shadow: none;
  filter: none;
}
.md-typeset .md-content__button:focus-visible {
  border-color: var(--muted-foreground);
}
.md-typeset .md-content__button--copied,
.md-typeset .md-content__button--copied:hover {
  color: var(--foreground);
  background: var(--muted);
  border-color: var(--border);
}
.md-typeset .md-content__button--copy-markdown {
  gap: 0.375rem;
  width: auto;
  min-width: 0;
  height: var(--control-height);
  padding-inline: 0.625rem;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.md-typeset .md-content__button--copy-markdown:hover {
  background: var(--muted);
  border-color: var(--border);
}
.md-typeset .md-content__button svg {
  width: 0.875rem;
  height: 0.875rem;
}
.md-typeset .md-content__button--copy-markdown svg {
  width: 0.875rem;
  height: 0.875rem;
}

@media (max-width: 44.984em) {
  .md-typeset .md-content__button--copy-markdown span {
    display: none;
  }

  .md-typeset .md-content__button--copy-markdown {
    width: var(--control-height);
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Status badges + tags.
 * ------------------------------------------------------------------------- */
.md-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted-foreground);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.md-status::before {
  background-color: currentColor;
}

.md-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.5rem 0 1rem;
}
.md-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted-foreground);
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.md-tag:hover {
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--ring) 50%, var(--border));
}
/* ============================================================================
 * Accessibility and focus states shared across Material/Zensical controls.
 * ============================================================================ */

/* Consistent keyboard focus. */
.md-typeset a:focus-visible,
.md-typeset button:focus-visible,
.md-typeset label:focus-visible,
.md-typeset input:focus-visible,
.md-nav__link:focus-visible,
.md-header__button:focus-visible,
.md-source:focus-visible,
.md-top:focus-visible,
.md-footer__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent);
}
/* ============================================================================
 * Prose buttons and heading anchor controls.
 * ============================================================================ */

/* Buttons inside prose. `a.button` and `.md-button` share the same Alloy
 * control system while preserving Material's primary/default class split. */
.md-typeset :is(.button, .md-button, input[type="button"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  gap: 0.375rem;
  padding-inline: 0.625rem;
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, transform 80ms ease-out;
}

.md-typeset a.button {
  border-bottom: 1px solid transparent;
}

.md-typeset :is(.button, input[type="button"]):not(.secondary):not(.outline):not(.destructive):not(.ghost):not(.link),
.md-typeset :is(.button.primary, .md-button--primary) {
  background: var(--primary);
  color: var(--primary-foreground);
}
.md-typeset :is(.button, input[type="button"]):not(.secondary):not(.outline):not(.destructive):not(.ghost):not(.link):hover,
.md-typeset :is(.button.primary, .md-button--primary):hover {
  background: color-mix(in oklch, var(--primary) 80%, transparent);
  color: var(--primary-foreground);
}

.md-typeset .md-button:not(.md-button--primary):not(.secondary):not(.outline):not(.destructive):not(.ghost):not(.link),
.md-typeset :is(.button.outline, .md-button.outline) {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--border);
}
.md-typeset .md-button:not(.md-button--primary):not(.secondary):not(.outline):not(.destructive):not(.ghost):not(.link):hover,
.md-typeset :is(.button.outline, .md-button.outline):hover {
  background: var(--muted);
  color: var(--foreground);
}

.md-typeset :is(.button.secondary, .md-button.secondary) {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.md-typeset :is(.button.secondary, .md-button.secondary):hover {
  background: color-mix(in oklch, var(--secondary) 80%, transparent);
}

.md-typeset :is(.button.ghost, .md-button.ghost) {
  background: transparent;
  color: var(--foreground);
}
.md-typeset :is(.button.ghost, .md-button.ghost):hover {
  background: var(--muted);
}

.md-typeset :is(.button.destructive, .md-button.destructive) {
  background: color-mix(in oklch, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.md-typeset :is(.button.destructive, .md-button.destructive):hover {
  background: color-mix(in oklch, var(--destructive) 20%, transparent);
}

.md-typeset :is(.button.link, .md-button.link) {
  height: auto;
  padding-inline: 0;
  background: transparent;
  color: var(--foreground);
  border-color: transparent;
  border-radius: 0;
  text-underline-offset: 4px;
}
.md-typeset :is(.button.link, .md-button.link):hover {
  text-decoration: underline;
}

.md-typeset :is(.button, .md-button).xs {
  height: var(--control-height-xs);
  gap: 0.25rem;
  border-radius: min(var(--radius-md), 10px);
  padding-inline: 0.5rem;
  font-size: 0.75rem;
}
.md-typeset :is(.button, .md-button).sm {
  height: var(--control-height-sm);
  gap: 0.25rem;
  border-radius: min(var(--radius-md), 12px);
  padding-inline: 0.625rem;
  font-size: 0.8rem;
}
.md-typeset :is(.button, .md-button).lg {
  height: var(--control-height-lg);
  gap: 0.375rem;
  padding-inline: 0.625rem;
}
.md-typeset :is(.button, .md-button).icon {
  aspect-ratio: 1;
  padding: 0;
}
.md-typeset :is(.button, .md-button):active {
  transform: translateY(1px);
}
.md-typeset :is(.button, .md-button):focus-visible,
.md-typeset input[type="button"]:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}
.md-typeset :is(.button, .md-button) svg:not([class*="size-"]) {
  width: 1rem;
  height: 1rem;
}

/* Heading anchors should feel like controls, not stray blue links. */
.md-typeset .headerlink {
  border: 0;
  color: var(--muted-foreground);
  opacity: 0;
  padding-inline-start: 0.25rem;
  transition: opacity 120ms ease-out, color 120ms ease-out;
}
.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.md-typeset .headerlink:focus-visible {
  opacity: 1;
}
.md-typeset .headerlink:hover {
  color: var(--foreground);
}
/* ============================================================================
 * Content tabs and tabbed code/list surfaces.
 *
 * Material's .md-typeset .tabbed-* rules sit at (0,2,0) specificity (or
 * (0,2,1) on pseudo-elements). Our rules use the same prefix and load after,
 * so we win by cascade order without !important. The highest-specificity
 * indicator pseudo-element, which Material paints via `.js .md-typeset
 * .tabbed-labels:before` and recolors on focused inputs, is suppressed by
 * matching those selector shapes and loading after Material.
 * ============================================================================ */

/* Content tabs - compact segmented controls. */
.md-typeset .tabbed-set {
  display: flex;
  flex-flow: wrap;
  margin: 1.25rem 0 1rem;
  background: transparent;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.md-typeset .highlight + .tabbed-set,
.md-typeset .tabbed-set + .highlight {
  margin-top: 1.25rem;
}

.md-typeset .tabbed-block {
  min-width: 0;
}

.md-typeset .tabbed-block > .highlight,
.md-typeset .tabbed-content > .highlight {
  width: 100%;
}
.md-typeset .tabbed-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  width: fit-content;
  max-width: 100%;
  background: color-mix(in oklch, var(--muted) 86%, transparent);
  border: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 0.125rem;
}
.md-typeset .tabbed-labels > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
  font-weight: 500;
  height: 1.625rem;
  line-height: 1.2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0 0.625rem;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}
.md-typeset .tabbed-labels > label:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--brand-accent) 8%, var(--background));
}
.md-typeset .tabbed-content {
  flex-basis: 100%;
  border: 0;
  box-shadow: none;
  padding-top: 0.75rem;
  overflow: visible;
}
.md-typeset .tabbed-content > :first-child {
  margin-top: 0;
}
.md-typeset .tabbed-content > :last-child {
  margin-bottom: 0;
}
.md-typeset .tabbed-block > .highlight:first-child,
.md-typeset .tabbed-content > .highlight:first-child {
  margin-top: 0;
}
.md-typeset .tabbed-block > :first-child {
  margin-top: 0;
}
.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-labels > :first-child,
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6),
.md-typeset .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > :nth-child(7),
.md-typeset .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > :nth-child(8) {
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--background));
  color: var(--brand-accent);
  border-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  border-bottom-color: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  box-shadow: var(--shadow-sm);
}

.md-typeset .tabbed-labels > label code {
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  letter-spacing: 0;
  padding: 0;
}

/* The `content.tabs.link` feature wraps each tab label in an <a>. Our prose
 * link style paints a 1px translucent-accent underline on every <a>, which
 * leaks through as an orange line under each tab. Reset link decoration
 * inside the labels - the active pill already carries the accent. */
.md-typeset .tabbed-labels a {
  border-bottom: 0;
  text-decoration: none;
  color: inherit;
}
.md-typeset .tabbed-labels a:hover {
  border-bottom: 0;
  color: inherit;
}

.md-typeset .tabbed-set > input:checked ~ .tabbed-labels > label,
.md-typeset .tabbed-labels > label,
.md-typeset .tabbed-labels > label:hover {
  border-bottom-color: transparent;
  text-decoration: none;
}

/* Suppress Material's indicator pseudo-elements. Match the upstream rules:
 *   .js .md-typeset .tabbed-labels:before
 *     { display: block; ... }  // (0,3,1)
 *   .md-typeset .tabbed-set > input.focus-visible ~ .tabbed-labels:before
 *     { background-color: var(--md-accent-fg-color) }  // (0,4,2)
 * and the mobile `::after` spacer selectors so Material doesn't paint an
 * underline or reserve extra scroll padding inside Alloy segmented tabs. */
.js .md-typeset .tabbed-labels::before,
.js .md-typeset .tabbed-labels::after,
.js .md-typeset .tabbed-set > input.focus-visible ~ .tabbed-labels::before,
.js .md-typeset .tabbed-set > input.focus-visible ~ .tabbed-labels::after,
.md-content__inner > .tabbed-set .tabbed-labels::after,
[dir="ltr"] .md-content__inner > .tabbed-set .tabbed-labels::after,
[dir="rtl"] .md-content__inner > .tabbed-set .tabbed-labels::after,
.md-typeset .tabbed-labels::before,
.md-typeset .tabbed-labels::after {
  display: none;
  content: none;
  width: 0;
  height: 0;
  padding: 0;
  background: transparent;
}
.md-typeset .tabbed-control,
.md-typeset .tabbed-labels > label::before,
.md-typeset .tabbed-labels > label::after {
  display: none;
  content: none;
}
/* ============================================================================
 * Footnotes and generic tooltip surfaces.
 * ============================================================================ */

/* Footnotes and tooltips. */
.md-typeset .footnote {
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  margin-top: 2.5rem;
}
.md-typeset .footnote-ref {
  border: 0;
  color: var(--link);
  font-weight: 600;
}
.md-typeset .footnote-backref {
  border: 0;
  color: var(--muted-foreground);
}
.md-tooltip,
.md-tooltip__inner {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}
/* ============================================================================
 * Code annotation markers and runtime popover compatibility.
 * ============================================================================ */

/* Code annotations. */
.md-annotation {
  color: var(--link);
}

.md-typeset .highlight:has(.md-annotation),
.md-typeset .highlight:has(.md-annotation__index) {
  overflow: visible;
  margin-bottom: 3.5rem;
}

.md-typeset .highlight:has(.md-annotation) pre,
.md-typeset .highlight:has(.md-annotation__index) pre,
.md-typeset .highlight:has(.md-annotation) code,
.md-typeset .highlight:has(.md-annotation__index) code {
  overflow: visible;
}

.md-typeset .highlight:has(.md-annotation) .highlighttable,
.md-typeset .highlight:has(.md-annotation__index) .highlighttable,
.md-typeset .highlight:has(.md-annotation) .highlighttable :is(tbody, tr, td, th),
.md-typeset .highlight:has(.md-annotation__index) .highlighttable :is(tbody, tr, td, th),
.md-typeset .highlight:has(.md-annotation) .highlighttable .code > div,
.md-typeset .highlight:has(.md-annotation__index) .highlighttable .code > div {
  overflow: visible;
}

.md-typeset .highlight:has(.md-annotation) .highlighttable .code pre,
.md-typeset .highlight:has(.md-annotation__index) .highlighttable .code pre {
  overflow-x: visible;
}

.md-typeset .highlight:has(.md-annotation) + :is(h2, h3, h4, h5, h6),
.md-typeset .highlight:has(.md-annotation__index) + :is(h2, h3, h4, h5, h6) {
  margin-top: 2.5rem;
}

.md-tooltip,
.md-annotation__tooltip,
.md-annotation__content {
  z-index: 30;
  max-width: min(28rem, calc(100vw - 2rem));
  max-height: min(18rem, 60vh);
  overflow: auto;
}

.md-tooltip__inner {
  max-height: inherit;
  overflow: auto;
}

.md-tooltip2 {
  z-index: 30;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.md-tooltip2--active {
  z-index: 40;
}

.md-tooltip2__inner {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  max-width: min(32rem, calc(100vw - 2rem));
  max-height: min(24rem, calc(100vh - 6rem));
  overflow: auto;
}

.md-tooltip2--top::before {
  border-top-color: var(--popover);
}

.md-tooltip2--bottom::before {
  border-bottom-color: var(--popover);
}

.md-annotation__index {
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 9999px;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: visible;
}
.md-annotation__index:hover {
  background: var(--background);
  border-color: color-mix(in oklch, var(--ring) 45%, var(--border));
}
/* ============================================================================
 * Task list checkbox coloring and spacing.
 * ============================================================================ */

/* Task lists. */
.md-typeset .task-list-item {
  margin-block: 0.375rem;
}
.md-typeset .task-list-indicator::before {
  background-color: var(--muted-foreground);
}
.md-typeset [type="checkbox"]:checked + .task-list-indicator::before {
  background-color: var(--link);
}
/* ============================================================================
 * Page navigation footer, copyright, and social links.
 * ============================================================================ */

/* Page nav footer. */
.md-footer .md-footer__inner.md-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 2rem);
  max-width: var(--content-width);
  gap: 0.5rem;
  margin-inline: auto;
  padding: 0.75rem 0;
}
.md-footer .md-footer__link {
  display: inline-flex;
  align-items: center;
  float: none;
  flex: 0 1 13rem;
  width: auto;
  min-height: var(--control-height-lg);
  max-width: min(13rem, 46%);
  margin: 0;
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
  gap: 0.375rem;
  padding: 0.3125rem 0.375rem;
  text-decoration: none;
  transition: border-color 120ms ease-out, color 120ms ease-out, background-color 120ms ease-out;
}
.md-footer .md-footer__link--next {
  justify-content: flex-end;
  margin-inline-start: auto;
  text-align: end;
}
.md-footer .md-footer__link:hover {
  background: var(--muted);
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--border) 72%, transparent);
}
.md-footer .md-footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--muted-foreground);
  background: transparent;
  border-radius: var(--control-radius);
  width: 1rem;
  height: 1rem;
  padding: 0;
}
.md-footer .md-footer__button svg {
  width: 0.8125rem;
  height: 0.8125rem;
}
.md-footer .md-footer__title {
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
}
.md-footer .md-footer__direction {
  color: var(--muted-foreground);
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
}
.md-footer-meta__inner {
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
}
.md-copyright {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.5;
}
.md-copyright__highlight {
  color: var(--foreground);
}
.md-footer-meta .md-typeset a,
.md-footer-meta a {
  border-bottom: 0;
  text-decoration: none;
}
.md-social {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.md-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  border-radius: var(--control-radius);
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.md-social__link svg {
  width: 0.8125rem;
  height: 0.8125rem;
}
.md-social__link:hover {
  background: var(--muted);
  color: var(--foreground);
}
/* ============================================================================
 * Grid and card surfaces, including nested tab/code stress cases.
 * ============================================================================ */

/* Cards and grids from pymdownx.superfences/Material extensions. */
.md-typeset .grid {
  gap: 0.75rem;
}
.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: color-mix(in oklch, var(--card) 64%, var(--background));
  color: var(--card-foreground);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1rem;
}
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover,
.md-typeset .grid.cards > ol > li:focus-within,
.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid > .card:focus-within {
  border-color: color-mix(in oklch, var(--ring) 38%, var(--border));
  box-shadow: var(--shadow-sm);
}

/* Grids - alloy card grid treatment for Material's `grid` extension. */
.md-typeset .result {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-block: 1rem 1.5rem;
}

.md-typeset .result::before,
.md-typeset .result::after {
  display: none;
  content: none;
}

.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  margin-block: 1rem;
  /* align-items defaults to `stretch` so cards in the same row match the
   * tallest cell. Testimonial grids with varying quote lengths used to look
   * ragged because we forced `start`. Card grids with mixed content render
   * the same either way - stretch only equalises within a row. */
}

.md-typeset .grid > *,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card {
  min-width: 0;
}

.md-typeset .grid.cards > ul,
.md-typeset .grid.cards > ol {
  display: contents;
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card {
  display: block;
  margin: 0;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--surface-raised) 84%, var(--background));
  color: var(--card-foreground);
  box-shadow: none;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li,
[data-md-color-scheme="slate"] .md-typeset .grid > .card {
  background: color-mix(in oklch, var(--surface-raised) 58%, var(--background));
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid > .card:hover {
  background: color-mix(in oklch, var(--surface-raised) 94%, var(--background));
  border-color: color-mix(in oklch, var(--ring) 34%, var(--border));
  box-shadow: var(--shadow-sm);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li:hover,
[data-md-color-scheme="slate"] .md-typeset .grid > .card:hover {
  background: color-mix(in oklch, var(--surface-raised) 70%, var(--background));
}

.md-typeset .grid :is(p, ul, ol, blockquote, .admonition, details, .highlight, .tabbed-set) {
  max-width: none;
}

.md-typeset .grid > :is(.tabbed-set, .highlight) {
  align-self: start;
  margin-block: 0;
}

.md-typeset .grid .tabbed-set {
  width: 100%;
}

.md-typeset .grid .tabbed-content {
  padding-top: 0.625rem;
}

.md-typeset .grid .tabbed-block > :is(ul, ol) {
  margin: 0.25rem 0 0;
}

.md-typeset .grid.cards > ul > li > :first-child,
.md-typeset .grid.cards > ol > li > :first-child,
.md-typeset .grid > .card > :first-child {
  margin-top: 0;
}

.md-typeset .grid.cards > ul > li > :last-child,
.md-typeset .grid.cards > ol > li > :last-child,
.md-typeset .grid > .card > :last-child {
  margin-bottom: 0;
}

.md-typeset .grid hr {
  margin-block: 0.75rem;
}

.md-typeset .grid .twemoji,
.md-typeset .grid .twemoji svg {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
}

.md-typeset .grid .twemoji.lg,
.md-typeset .grid .twemoji.lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

.md-typeset .grid > blockquote {
  margin: 0;
  padding: 0.875rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--muted-foreground);
}
/* ============================================================================
 * Runtime UI: progress, top button, dialogs, banners, consent, and feedback.
 * ============================================================================ */

/* Runtime UI: progress, top button, dialogs, announcements and consent. */
.md-progress {
  background: var(--link);
  height: 2px;
}
.md-top {
  background: var(--popover);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.md-top:hover {
  background: var(--accent);
}
.md-dialog {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  padding: 0;
}
.md-dialog__inner:not(:empty) {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.625rem 0.875rem;
}
.md-banner {
  background: var(--muted);
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
}
.md-banner--warning {
  background: color-mix(in oklch, var(--callout-warning) 12%, var(--background));
  border-bottom-color: color-mix(in oklch, var(--callout-warning) 45%, var(--border));
}
.md-banner__button {
  color: var(--muted-foreground);
  border-radius: var(--radius-sm);
}
.md-banner__button:hover {
  background: var(--accent);
  color: var(--foreground);
}
.md-consent__overlay {
  background: oklch(0 0 0 / 0.45);
  backdrop-filter: blur(4px);
}
.md-consent__inner {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Feedback widget hooks from rich docs. */
.md-feedback__note {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}
/* ============================================================================
 * Diagram surfaces (Mermaid, plus generic embedded SVG/figures).
 *
 * Material exposes a small set of CSS variables that the Mermaid runtime
 * reads when laying out a diagram. We map those onto Alloy tokens so node
 * fills, edge colors, label text, and cluster surfaces feel native to the
 * theme in both light and dark schemes. Direct SVG fallbacks below cover
 * anything Mermaid does not pull through the CSS-variable path.
 * ============================================================================ */

:root > * {
  --md-mermaid-font-family: var(--font-sans);
  --md-mermaid-edge-color: var(--muted-foreground);
  --md-mermaid-node-bg-color: var(--muted);
  --md-mermaid-node-fg-color: var(--foreground);
  --md-mermaid-label-bg-color: var(--background);
  --md-mermaid-label-fg-color: var(--foreground);
  --md-mermaid-sequence-actor-bg-color: var(--surface);
  --md-mermaid-sequence-actor-line-color: var(--muted-foreground);
  --md-mermaid-sequence-loopline-color: var(--rail);
}

/* Diagram container - quiet card to separate the figure from prose. */
.mermaid {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1rem;
  margin-block: 1.5rem;
  overflow-x: auto;
}

/* SVG-level fallbacks. Mermaid sometimes inlines fills/strokes ahead of the
 * CSS variables; explicitly mapping these to Alloy tokens keeps unrelated
 * diagrams (sequence, gantt, classDiagram) consistent. */
.mermaid svg {
  background: transparent;
  font-family: var(--font-sans);
  color: var(--foreground);
}
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: var(--muted);
  stroke: var(--border);
}
.mermaid .node .label,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid text {
  fill: var(--foreground);
  color: var(--foreground);
}
.mermaid .edgeLabel rect,
.mermaid .edgeLabel foreignObject {
  background: var(--background);
}
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: var(--muted-foreground);
  fill: none;
}
.mermaid .arrowheadPath {
  fill: var(--muted-foreground);
  stroke: var(--muted-foreground);
}
.mermaid .cluster rect {
  fill: color-mix(in oklch, var(--surface) 60%, var(--background));
  stroke: var(--border-subtle);
}
.mermaid .cluster text {
  fill: var(--muted-foreground);
}

/* Sequence diagram polish. */
.mermaid .actor {
  fill: var(--surface);
  stroke: var(--border);
}
.mermaid .actor-line {
  stroke: var(--rail);
}
.mermaid .messageText,
.mermaid .loopText > tspan,
.mermaid .noteText {
  fill: var(--foreground);
  stroke: none;
}
.mermaid .note {
  fill: color-mix(in oklch, var(--warning) 20%, var(--background));
  stroke: color-mix(in oklch, var(--warning) 45%, transparent);
}

/* First-series highlight uses the brand accent so diagrams pick up the
 * configured theme color without overriding the rest of the palette. */
.mermaid .node.alloy-accent rect,
.mermaid .node.alloy-accent circle,
.mermaid .node.alloy-accent ellipse,
.mermaid .node.alloy-accent polygon,
.mermaid .node.alloy-accent path {
  fill: color-mix(in oklch, var(--brand-accent) 18%, var(--background));
  stroke: color-mix(in oklch, var(--brand-accent) 55%, transparent);
}
/* ============================================================================
 * Optional Apache ECharts blocks rendered from fenced `echarts` JSON.
 * ============================================================================ */

.zensical-alloy-chart {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  margin: 1.5rem 0;
  padding: 0.875rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--surface-raised) 82%, var(--background));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--background) 68%, transparent);
  overflow: hidden;
}

.zensical-alloy-chart__canvas {
  width: 100%;
  min-height: 20rem;
}

.zensical-alloy-chart[data-chart-state="empty"] .zensical-alloy-chart__canvas,
.zensical-alloy-chart[data-chart-state="error"] .zensical-alloy-chart__canvas {
  display: none;
}

.zensical-alloy-chart[data-chart-state="loading"] .zensical-alloy-chart__canvas {
  opacity: 0.18;
}

.zensical-alloy-chart__status {
  display: grid;
  min-height: 12rem;
  place-items: center;
  border: 1px dashed color-mix(in oklch, var(--border) 82%, transparent);
  border-radius: calc(var(--radius-lg) - 0.25rem);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--muted) 52%, transparent),
      color-mix(in oklch, var(--background) 82%, transparent)
    );
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

.zensical-alloy-chart[data-chart-state="loading"] .zensical-alloy-chart__status {
  position: absolute;
  inset: 0.875rem;
  min-height: 0;
  pointer-events: none;
  color: color-mix(in oklch, var(--muted-foreground) 86%, var(--foreground));
}

.zensical-alloy-chart[data-chart-state="error"] .zensical-alloy-chart__status {
  color: var(--destructive);
  font-family: var(--font-mono);
}

@media (max-width: 44.984em) {
  .zensical-alloy-chart {
    padding: 0.5rem;
  }

  .zensical-alloy-chart__canvas {
    min-height: 16rem;
  }

  .zensical-alloy-chart__status {
    min-height: 10rem;
  }

  .zensical-alloy-chart[data-chart-state="loading"] .zensical-alloy-chart__status {
    inset: 0.5rem;
  }
}
/* ============================================================================
 * Steps - numbered procedure component.
 *
 * Opt-in by adding the `alloy-steps` class to an ordered list:
 *
 *   <ol class="alloy-steps" markdown>
 *
 *   1. First step copy
 *   2. Second step copy
 *
 *   </ol>
 *
 * The list renders each item with a numbered circle in a rail and a
 * vertical connector between steps. The pattern fits install guides,
 * setup walkthroughs, and any flow where order is load-bearing.
 * ============================================================================ */

.md-typeset ol.alloy-steps {
  counter-reset: alloy-step;
  list-style: none;
  padding-inline-start: 2.25rem;
  margin-block: 1.5rem;
  position: relative;
}

.md-typeset ol.alloy-steps > li {
  counter-increment: alloy-step;
  position: relative;
  padding-inline-start: 0.5rem;
  padding-block-end: 1.25rem;
  margin: 0;
}

.md-typeset ol.alloy-steps > li::marker {
  content: none;
}

/* Numbered circle in the rail. Slightly raised baseline so it sits visually
 * centered with the first line of step text. */
.md-typeset ol.alloy-steps > li::before {
  content: counter(alloy-step);
  position: absolute;
  left: -2.25rem;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-sizing: border-box;
}

/* Vertical connector between steps. Drops on the last item so the rail does
 * not extend past the final number. */
.md-typeset ol.alloy-steps > li::after {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 1.625rem;
  bottom: 0.25rem;
  width: 1px;
  background: var(--border-subtle);
}
.md-typeset ol.alloy-steps > li:last-child::after {
  display: none;
}
.md-typeset ol.alloy-steps > li:last-child {
  padding-block-end: 0;
}

/* First-child margin reset so the connector lines up with the number. */
.md-typeset ol.alloy-steps > li > :first-child {
  margin-top: 0;
}
.md-typeset ol.alloy-steps > li > :last-child {
  margin-bottom: 0;
}

/* Nested code, callouts, and grids in a step look better with a touch more
 * breathing room from the rail. */
.md-typeset ol.alloy-steps > li > :is(.highlight, .admonition, details, .grid) {
  margin-block: 0.625rem;
}

/* Done state - opt-in via `class="alloy-steps alloy-steps--done"` on the list,
 * or `class="done"` on individual items. Renders the circle in accent. */
.md-typeset ol.alloy-steps.alloy-steps--done > li::before,
.md-typeset ol.alloy-steps > li.done::before {
  background: color-mix(in oklch, var(--brand-accent) 16%, var(--background));
  border-color: color-mix(in oklch, var(--brand-accent) 45%, transparent);
  color: var(--brand-accent);
}
/* ============================================================================
 * Property tables - opinionated table preset for reference docs.
 *
 * Apply by adding the `alloy-properties` class to a regular Markdown table:
 *
 *   <table class="alloy-properties" markdown>
 *
 *   | Name   | Type   | Default | Description           |
 *   | ------ | ------ | ------- | --------------------- |
 *   | size   | int    | 16      | Diameter in pixels    |
 *
 *   </table>
 *
 * The preset tightens the name column, monospaces the type and default
 * columns, lets the description column flow, and uses zebra row tinting so
 * dense reference rows stay scannable.
 * ============================================================================ */

.md-typeset table.alloy-properties:not([class*="not-alloy"]) {
  table-layout: auto;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.875em;
  background: color-mix(in oklch, var(--surface-raised) 80%, var(--background));
  margin-block: 1.5rem;
}

.md-typeset table.alloy-properties th,
.md-typeset table.alloy-properties td {
  padding: 0.5rem 0.75rem;
  text-align: start;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.md-typeset table.alloy-properties thead th {
  background: color-mix(in oklch, var(--muted) 62%, transparent);
  font-weight: 500;
  color: var(--foreground);
  font-size: 0.8125em;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}

.md-typeset table.alloy-properties tbody tr:last-child td {
  border-bottom: 0;
}

.md-typeset table.alloy-properties tbody tr:nth-child(even) td {
  background: color-mix(in oklch, var(--muted) 22%, transparent);
}

.md-typeset table.alloy-properties tbody tr:hover td {
  background: color-mix(in oklch, var(--muted) 40%, transparent);
}

/* First column - the property name. Tighten and emphasize. */
.md-typeset table.alloy-properties tbody td:first-child {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--foreground);
  font-weight: 500;
  white-space: nowrap;
}

/* Second column - the type. Muted monospace. */
.md-typeset table.alloy-properties tbody td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Third column - default value. Same muted mono. If only 3 columns the
 * description takes the third column instead; rule still reads OK because
 * monospace defaults look intentional. */
.md-typeset table.alloy-properties tbody td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Fourth column - description. Flow as normal prose. */
.md-typeset table.alloy-properties tbody td:nth-child(4),
.md-typeset table.alloy-properties tbody td:last-child:nth-child(n+4) {
  font-family: var(--font-sans);
  color: var(--foreground);
  white-space: normal;
  line-height: 1.55;
}

/* Inline code inside descriptions should match the page's prose code style,
 * not the muted mono override. */
.md-typeset table.alloy-properties tbody td code {
  font-size: 0.85em;
}

/* Required / optional pills - opt-in via inline markup like
 *   <span class="alloy-prop-required">required</span>
 * or just bare text in the type column; useful when name + type collapse. */
.alloy-prop-required,
.alloy-prop-optional {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.alloy-prop-required {
  color: var(--callout-danger, oklch(0.64 0.22 25));
  background: color-mix(in oklch, oklch(0.64 0.22 25) 10%, transparent);
  border: 1px solid color-mix(in oklch, oklch(0.64 0.22 25) 35%, transparent);
}
.alloy-prop-optional {
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border-subtle);
}
/* ============================================================================
 * Responsive adjustments for content, sidebars, and footer.
 * ============================================================================ */

@media (max-width: 76.234em) {
  .md-main__inner {
    display: block;
    margin-top: 0.75rem;
  }

  .md-content__inner {
    padding: 1rem 1.25rem 3rem;
  }

  .md-path {
    padding-inline: 1.25rem;
  }

  /* Mobile drawer: Material gives it `border-radius: 0.8rem`, a z3 shadow,
   * `backdrop-filter: blur(.4rem)`, and positions it at `top: .4rem`. We
   * adjust three things:
   *   - Disable the backdrop blur (our background is opaque; the filter
   *     just creates a compositing layer that fuzzes text on some GPUs).
   *   - Push the drawer top below the header (header z-index 50 occludes
   *     drawer z-index 5, so the first nav item was hiding behind it).
   *   - Trim height accordingly so the drawer still floats off the bottom. */
  .md-sidebar--primary {
    background: var(--background);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    top: calc(var(--header-height) + 0.4rem);
    height: calc(100vh - var(--header-height) - 0.8rem);
  }

  .md-sidebar--secondary,
  .md-sidebar-button__wrapper {
    display: none;
  }

  .md-sidebar__scrollwrap {
    background: var(--background);
  }

  /* Touch-friendlier nav rows inside the drawer. Desktop sidebar items sit at
   * 1.5rem (24px) which is fine to hover but tight to tap. Bump to 36px on
   * mobile only; font matches body so labels read at distance. */
  .md-sidebar--primary .md-nav__list {
    padding: 0.25rem 0.625rem;
    gap: 0.125rem;
  }
  .md-sidebar--primary .md-nav__link,
  .md-sidebar--primary .md-nav label.md-nav__title,
  .md-sidebar--primary .md-nav__container {
    height: 2.25rem;
    font-size: 0.8125rem;
    padding-inline: 0.625rem;
  }
  .md-sidebar--primary .md-nav__container > label.md-nav__link {
    flex: 0 0 2.25rem;
    width: 2.25rem;
  }
  .md-sidebar--primary
    .md-nav--primary
    > .md-nav__list
    > .md-nav__item--section
    > .md-nav__title {
    height: 2rem;
    font-size: 0.75rem;
    padding-inline: 0.625rem;
  }

  .md-footer__inner {
    padding-inline: 1rem;
  }
}

@media (max-width: 44.984em) {
  .md-tabs {
    top: var(--header-height);
  }

  .md-tabs .md-grid {
    padding-inline: 0.75rem;
  }

  .md-tabs__list {
    gap: 0.0625rem;
  }

  .md-tabs__link {
    height: 1.5rem;
    padding-inline: 0.5rem;
    /* Match the desktop tabs font (slightly below body) so the hierarchy
     * does not invert on mobile, where body is 0.8125rem. */
    font-size: 0.71875rem;
  }

  .md-content__inner {
    padding-inline: 1rem;
  }

  /* Long unbreakable lines (code, tables) make flex parents grow past the
   * viewport on phones because intrinsic content width wins. Pinning
   * min-width to 0 forces the flex chain to size by available width, then
   * the .highlight's `overflow: hidden` clips and the inner pre's
   * `overflow-x: auto` produces the in-block scroll. */
  .md-content,
  .md-typeset {
    min-width: 0;
    max-width: 100%;
  }

  /* Desktop reserves 3.5rem of right padding per line for the absolute copy
   * button; on phones that gutter eats roughly a quarter of the visible code
   * width and lines get cut mid-token. Reclaim it - the copy button still
   * sits in the highlight's top-right and does not need per-line space. */
  .md-typeset .highlight code > span[id^="__span"],
  .md-typeset .highlight .highlighttable .code code > span[id^="__span"] {
    padding-inline-end: 0.625rem;
  }
  .md-typeset .highlight > pre,
  .md-typeset .highlight > pre > code {
    padding-right: 1rem;
  }
  .md-typeset .highlight .highlighttable .code pre > code {
    padding-right: 1rem;
  }

  .md-footer__inner,
  .md-footer-meta__inner {
    padding-inline: 1rem;
  }

  .md-footer__link {
    padding: 0.75rem;
  }
}
/* ============================================================================
 * Compatibility manifest for rich Material/Zensical surfaces.
 *
 * The implementation was split into focused component files so future fixes land
 * near the surface they affect. Keep this file as a signpost for anyone looking
 * for the old catch-all stylesheet. The actual import order lives in main.css.
 * ============================================================================ */