@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --ff-background: oklch(0.17 0.004 255); --ff-card: oklch(0.19 0.004 255); --ff-popover: oklch(0.245 0.008 255);
  --ff-muted: oklch(0.3 0.008 255); --ff-border: oklch(1 0 0 / 9%); --ff-foreground: oklch(0.93 0.006 255);
  --ff-muted-foreground: oklch(0.66 0.012 255); --ff-primary: oklch(0.9 0.2 160); --ff-primary-foreground: oklch(0.18 0.02 172);
  --ff-destructive-ink: oklch(0.72 0.2 23.19); --ff-good: oklch(61% 0.2 141.6); --ff-warning: oklch(85.393% 0.17136 100.916);
  --ff-serious: oklch(61% 0.16 50.6); --ff-critical: oklch(61% 0.2 22.2); --ff-chart-1: oklch(61% 0.2 261.9);
  --ff-chart-3: oklch(61% 0.121 170); --ff-chart-5: oklch(61% 0.2 336.3); --ff-radius: 0.375rem;
  --md-text-font: "IBM Plex Sans"; --md-code-font: "IBM Plex Mono";
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --md-hue: 214deg;
  --md-default-bg-color: var(--ff-background);
  --md-default-bg-color--light: oklch(0.17 0.004 255 / 54%);
  --md-default-bg-color--lighter: oklch(0.17 0.004 255 / 26%);
  --md-default-bg-color--lightest: oklch(0.17 0.004 255 / 7%);
  --md-default-fg-color: var(--ff-foreground);
  --md-default-fg-color--light: var(--ff-muted-foreground);
  --md-default-fg-color--lighter: oklch(0.66 0.012 255 / 50%);
  --md-default-fg-color--lightest: var(--ff-border);
  --md-primary-fg-color: var(--ff-card);
  --md-primary-fg-color--light: var(--ff-popover);
  --md-primary-fg-color--dark: var(--ff-background);
  --md-primary-bg-color: var(--ff-foreground);
  --md-primary-bg-color--light: var(--ff-muted-foreground);
  --md-accent-fg-color: var(--ff-primary);
  --md-accent-fg-color--transparent: oklch(0.9 0.2 160 / 10%);
  --md-accent-bg-color: var(--ff-primary-foreground);
  --md-accent-bg-color--light: oklch(0.18 0.02 172 / 70%);
  --md-typeset-color: var(--ff-foreground);
  --md-typeset-a-color: var(--ff-foreground);
  --md-typeset-mark-color: oklch(0.9 0.2 160 / 20%);
  --md-typeset-table-color: var(--ff-border);
  --md-typeset-table-color--light: oklch(1 0 0 / 3.5%);
  --md-typeset-kbd-color: var(--ff-muted);
  --md-typeset-kbd-accent-color: var(--ff-popover);
  --md-typeset-kbd-border-color: var(--ff-background);
  --md-code-fg-color: var(--ff-foreground);
  --md-code-bg-color: var(--ff-card);
  --md-code-bg-color--light: oklch(0.19 0.004 255 / 90%);
  --md-code-bg-color--lighter: oklch(0.19 0.004 255 / 54%);
  --md-code-hl-color: var(--ff-primary);
  --md-code-hl-color--light: oklch(0.9 0.2 160 / 10%);
  --md-code-hl-keyword-color: var(--ff-chart-1);
  --md-code-hl-string-color: var(--ff-chart-3);
  --md-code-hl-number-color: var(--ff-serious);
  --md-code-hl-function-color: var(--ff-chart-5);
  --md-code-hl-constant-color: var(--ff-warning);
  --md-code-hl-special-color: var(--ff-destructive-ink);
  --md-code-hl-name-color: var(--ff-foreground);
  --md-code-hl-variable-color: var(--ff-foreground);
  --md-code-hl-comment-color: var(--ff-muted-foreground);
  --md-code-hl-generic-color: var(--ff-muted-foreground);
  --md-code-hl-operator-color: var(--ff-muted-foreground);
  --md-code-hl-punctuation-color: var(--ff-muted-foreground);
  --md-admonition-fg-color: var(--ff-foreground);
  --md-admonition-bg-color: var(--ff-card);
  --md-warning-fg-color: var(--ff-foreground);
  --md-warning-bg-color: oklch(85.393% 0.17136 100.916 / 12%);
  --md-footer-fg-color: var(--ff-foreground);
  --md-footer-fg-color--light: var(--ff-muted-foreground);
  --md-footer-fg-color--lighter: oklch(0.66 0.012 255 / 60%);
  --md-footer-bg-color: var(--ff-card);
  --md-footer-bg-color--dark: var(--ff-background);
  --md-shadow-z1: none;
}

.md-header, .md-header--shadow { box-shadow: none; border-bottom: 1px solid var(--ff-border); }
.md-tabs { border-bottom: 1px solid var(--ff-border); }
.md-typeset :is(pre > code, .highlight, .admonition, details, .tabbed-set, table:not([class])) { border-radius: var(--ff-radius); }

.md-typeset :is(h1, h2, h3, h4) { color: var(--ff-foreground); font-weight: 600; letter-spacing: 0; }
.md-typeset :is(table, code) { font-variant-numeric: tabular-nums; }
.md-nav--primary .md-nav__item--section > .md-nav__link { color: var(--ff-muted-foreground); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.md-typeset a { text-decoration: underline 1px var(--ff-muted-foreground); text-underline-offset: 0.2em; }
.md-typeset a:is(:hover, :focus-visible) { color: var(--ff-primary); text-decoration-color: currentcolor; }
.md-typeset .headerlink { text-decoration: none; }
.md-nav--primary .md-nav__link--active { color: var(--ff-foreground); box-shadow: inset 2px 0 0 var(--ff-primary); }
:focus-visible { outline: 2px solid oklch(0.9 0.2 160 / 50%); outline-offset: 2px; }

.md-typeset :is(.admonition, details)[class] { --ff-tone: var(--ff-chart-1); border: 1px solid var(--ff-border); border-left: 2px solid var(--ff-tone); box-shadow: none; }
.md-typeset :is(.admonition, details):is(.tip, .hint, .success, .check, .done) { --ff-tone: var(--ff-good); }
.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) { --ff-tone: var(--ff-warning); }
.md-typeset :is(.admonition, details):is(.danger, .error, .failure, .fail, .missing, .bug) { --ff-tone: var(--ff-critical); }
.md-typeset :is(.admonition, details):is(.question, .help, .faq) { --ff-tone: var(--ff-chart-3); }
.md-typeset :is(.admonition, details):is(.example) { --ff-tone: var(--ff-chart-5); }
.md-typeset :is(.admonition, details):is(.quote, .cite) { --ff-tone: var(--ff-muted-foreground); }
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary) { background-color: color-mix(in oklch, var(--ff-tone) 10%, transparent); }
.md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before { background-color: var(--ff-tone); }

.md-grid { max-width: 72rem; }
.md-nav--primary .md-nav__link--active { position: relative; box-shadow: none; }
.md-nav--primary .md-nav__link--active::before { content: ""; position: absolute; inset: 0 auto 0 -0.6rem; width: 2px; background: var(--ff-primary); }
.md-typeset table:not([class]) th { white-space: nowrap; }
.md-typeset table:not([class]) td > code { white-space: nowrap; }