:root>* {
  --md-primary-fg-color: #d55a38;
  --md-primary-fg-color--light: #ff9b7d;
  --md-primary-fg-color--dark: #a94329;
  --md-accent-fg-color: #d55a38;
  --md-typeset-a-color: #4051b5;
  --catalyst-sidebar-active-bg: rgba(213, 90, 56, 0.1);
  --catalyst-sidebar-active-bg--hover: rgba(213, 90, 56, 0.15);
  --catalyst-sidebar-active-bg--pressed: rgba(213, 90, 56, 0.2);
  --catalyst-sidebar-active-fg: #a94329;
}

[data-md-color-scheme="slate"] {
  --md-hue: 200;
  --md-typeset-a-color: #5488e8;
  --catalyst-sidebar-active-bg: rgba(213, 90, 56, 0.13);
  --catalyst-sidebar-active-bg--hover: rgba(213, 90, 56, 0.18);
  --catalyst-sidebar-active-bg--pressed: rgba(213, 90, 56, 0.24);
  --catalyst-sidebar-active-fg: #ff9b7d;
}

.md-sidebar__scrollwrap {
  scrollbar-color: rgba(92, 99, 106, 0.42) transparent;
}

.md-sidebar__scrollwrap:hover {
  scrollbar-color: rgba(92, 99, 106, 0.42) transparent;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: rgba(92, 99, 106, 0.42);
}

.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(92, 99, 106, 0.42);
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: rgba(92, 99, 106, 0.66);
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:active {
  background-color: rgba(70, 76, 82, 0.82);
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
  scrollbar-color: rgba(146, 154, 163, 0.34) transparent;
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap:hover {
  scrollbar-color: rgba(146, 154, 163, 0.34) transparent;
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: rgba(146, 154, 163, 0.34);
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(146, 154, 163, 0.34);
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: rgba(176, 184, 193, 0.58);
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:active {
  background-color: rgba(190, 197, 205, 0.72);
}

.md-sidebar--primary .md-nav__link {
  border-radius: 0.35rem;
}

.md-sidebar--primary .md-nav__item--active>.md-nav__link--active,
.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active) {
  background: var(--catalyst-sidebar-active-bg);
  color: var(--catalyst-sidebar-active-fg);
  font-weight: 600;
}

.md-sidebar--primary .md-nav__item--active>.md-nav__link--active:hover,
.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active):hover {
  background: var(--catalyst-sidebar-active-bg--hover);
  color: var(--catalyst-sidebar-active-fg);
}

.md-sidebar--primary .md-nav__item--active>.md-nav__link--active:active,
.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active):active {
  background: var(--catalyst-sidebar-active-bg--pressed);
  color: var(--catalyst-sidebar-active-fg);
}

.md-sidebar--primary .md-nav__item--active>.md-nav__link--active:focus-visible,
.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active):focus-within {
  outline: 0.08rem solid color-mix(in srgb, var(--catalyst-sidebar-active-fg) 35%, transparent);
  outline-offset: 0.08rem;
}

.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active)>.md-nav__link {
  margin: 0;
  background: transparent;
  color: inherit;
}

.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active)>.md-nav__link:hover,
.md-sidebar--primary .md-nav__item--active>.md-nav__container:has(> .md-nav__link--active)>.md-nav__link:focus {
  background: transparent;
  color: inherit;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  letter-spacing: 0;
}

.md-typeset a:focus,
.md-typeset a:hover {
  color: #526cfe;
}

.md-typeset a code {
  color: inherit;
}

.md-typeset .admonition.status {
  --catalyst-status-border: color-mix(in srgb, var(--md-default-fg-color--light) 60%, transparent);
  --catalyst-status-bg: transparent;
  --catalyst-status-fg: var(--md-default-fg-color);
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-block: -0.35rem 1rem;
  padding: 0.55rem 0.75rem 0.6rem;
  border-left: 4px solid var(--catalyst-status-border);
  /*border-radius: 0.3rem;*/
  border-radius: 0;
  box-sizing: border-box;
  background: var(--catalyst-status-bg);
  box-shadow: none;
  font-size: 0.66rem;
}

.md-typeset .admonition.status>.admonition-title {
  display: flex;
  gap: 0.36rem;
  align-items: baseline;
  min-height: 0;
  margin: 0 0 0.32rem;
  padding: 0;
  background: transparent;
  color: var(--catalyst-status-fg);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.35;
}

.md-typeset .admonition.status>.admonition-title::before {
  position: static;
  order: -2;
  flex: 0 0 auto;
  align-self: center;
  width: 0.72rem;
  height: 0.72rem;
  background-color: currentColor;
  mask-image: var(--md-admonition-icon--status);
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: var(--md-admonition-icon--status);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  transform: none;
}

.md-typeset .admonition.status>.admonition-title::after {
  content: "Status:";
  order: -1;
  color: var(--md-default-fg-color--light);
  font-weight: 700;
  font-size: inherit;
  line-height: 1.35;
}

.md-typeset .admonition.status>p:not(.admonition-title) {
  margin: 0;
  color: var(--md-default-fg-color--light);
  line-height: 1.35;
  text-align: left;
}

/* ==========================================================================
   Landing page — Build-inspired: black canvas, monospace headings,
   coral as the lead accent, hard-edged color-block strips, pixel art — no gradients.
   ========================================================================== */

:root {
  /* Cross-scheme constants. */
  --catalyst-coral: #d55a38;
  --catalyst-coral-light: #ff9b7d;
  --catalyst-mono: ui-monospace, "Cascadia Code", "JetBrains Mono",
    "SF Mono", "Roboto Mono", "Consolas", "Liberation Mono", monospace;

  /* Landing palette — LIGHT mode (default scheme). Dark overrides live under
     [data-md-color-scheme="slate"] below. */
  --catalyst-on-ink: #18181b;          /* primary text */
  --catalyst-on-ink-dim: #52525b;      /* secondary text */
  --catalyst-ink: #fbfbfa;             /* inverted text (e.g. on coral buttons) */
  --catalyst-surface: #f1efe9;         /* card / code panel */
  --catalyst-surface-2: #f1efe9;       /* glitch-tear "into" colour (= panel) */
  --catalyst-scatter: rgba(40, 44, 52, 0.12);  /* bg ascii marks */
  --catalyst-hairline: rgba(24, 24, 27, 0.28); /* secondary button border */
}

[data-md-color-scheme="slate"] {
  /* Landing palette — DARK mode. */
  --catalyst-on-ink: #f4f4f5;
  --catalyst-on-ink-dim: #b6b7ba;
  --catalyst-ink: #0a0a0b;
  --catalyst-surface: #1d1d22;
  --catalyst-surface-2: #141416;
  --catalyst-scatter: rgba(180, 188, 196, 0.13);
  --catalyst-hairline: rgba(244, 244, 245, 0.3);
}

/* Logo outline/shadow — dark-mode values (grounded against black). */
[data-md-color-scheme="slate"] .md-typeset .catalyst-wordmark__pixels {
  --logo-outline: #401408;
  --logo-shadow: #240c05;
}

.md-typeset .catalyst-landing {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) -1.5rem;
  color: var(--catalyst-on-ink);
  overflow: hidden; /* clip the scatter layer to the landing bounds */
}

/* Page-wide box-drawing scatter — randomized gray line-art marks behind all
   content, spanning the full landing height (scrolls with the page).
   Built by catalyst-wordmark.js. */
.md-typeset .catalyst-bg-ascii {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  font-family: var(--md-text-font-family, system-ui, sans-serif);
  line-height: 1;
}

/* Outer span: positioned mark, carries the scroll-parallax transform.
   Inner .ctwm-drift: the glyph text, carries the ambient drift transform.
   Two elements so the two transforms compose instead of overwriting. */
.md-typeset .catalyst-bg-ascii span {
  position: absolute;
  color: var(--catalyst-scatter);
}

.md-typeset .catalyst-bg-ascii .ctwm-drift {
  display: inline-block;
  white-space: pre;
}

/* Pixel-based parallax — driven by catalyst-wordmark.js from scrollY instead
   of scroll-progress, so content height changes do not shift the scatter. */
@media (prefers-reduced-motion: no-preference) {
  .md-typeset .catalyst-bg-ascii span {
    transform: translateY(var(--catalyst-bg-parallax, 0px));
    will-change: transform;
  }
}

/* Ambient drift — each glyph slowly floats to a random offset and back, on a
   per-glyph duration/delay so the field shimmers out of sync. Composes with the
   parent's scroll parallax. Disabled for reduced-motion. */
@keyframes catalyst-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--dx), calc(var(--dy) * -0.6)); }
  50%  { transform: translate(calc(var(--dx) * -0.5), var(--dy)); }
  75%  { transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.5)); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .md-typeset .catalyst-bg-ascii .ctwm-drift {
    will-change: transform;
    animation: catalyst-drift var(--dur, 32s) ease-in-out var(--delay, 0s)
      infinite;
  }
}

/* Shared section paddings — sit above the scatter layer. */
.md-typeset .catalyst-hero,
.md-typeset .catalyst-band,
.md-typeset .catalyst-section,
.md-typeset .catalyst-cta-band {
  position: relative;
  z-index: 1;
  padding: 3.5rem max(1.5rem, calc((100vw - 60rem) / 2));
  background: transparent; /* let the scatter show through the gaps */
  color: var(--catalyst-on-ink);
}

/* Section headings — regular (sans) display type, not monospace. */
.md-typeset .catalyst-mono-heading {
  margin: 0 0 1.6rem;
  color: var(--catalyst-coral);
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.md-typeset .catalyst-mono-heading--light {
  color: var(--catalyst-on-ink);
}

/* Hero -------------------------------------------------------------------- */
.md-typeset .catalyst-hero {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  overflow: hidden;
  text-align: center;
}

.md-typeset .catalyst-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin-inline: auto;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Demo-scene pixel logo — coral letters with a 3D-bevelled, gritty face, a
   dark grounding outline and an offset drop-shadow slab. Built by
   catalyst-wordmark.js. */
.md-typeset .catalyst-wordmark {
  margin: 0 0 1.4rem;
}

.md-typeset .catalyst-wordmark__pixels {
  /* One exact integer pixel grid for the whole word. --logo-cols/--logo-rows
     are set by the JS from the composed bitmap; --px-size is sized so the grid
     fits the hero width. Every face/outline/shadow pixel is a real grid cell. */
  --px-size: min(calc(94cqw / var(--logo-cols, 90)), 0.42rem);
  /* Coral face ramp — gentle bevel/grit, low contrast so it's easy on the eyes.
     The face works on either background; only the outline/shadow flip per scheme
     (LIGHT values here, dark overrides under [data-md-color-scheme="slate"]). */
  --logo-hi:  #f07a4a;       /* top/left lit edges (subtle) */
  --logo-mid: #df5f33;       /* body */
  --logo-lo:  #c64e28;       /* bottom/right shaded edges (subtle) */
  --logo-dim: #b0461f;       /* faint gritty flecks */
  --logo-outline: #5a1e0c;   /* dark burnt-coral edge — clear contrast vs the face, still warm */
  --logo-shadow: #e7a98f;    /* soft warm drop-shadow on light */
  display: grid;
  grid-template-columns: repeat(var(--logo-cols, 60), var(--px-size));
  grid-auto-rows: var(--px-size);
  gap: 0;
  width: max-content;
  font-size: 0;
  image-rendering: pixelated;
}

.md-typeset .catalyst-wordmark__pixels .ctwm-px {
  width: var(--px-size);
  height: var(--px-size);
  background: transparent;
}

.md-typeset .catalyst-wordmark__pixels .ctwm-px.is-face-hi  { background: var(--logo-hi); }
.md-typeset .catalyst-wordmark__pixels .ctwm-px.is-face-mid { background: var(--logo-mid); }
.md-typeset .catalyst-wordmark__pixels .ctwm-px.is-face-lo  { background: var(--logo-lo); }
.md-typeset .catalyst-wordmark__pixels .ctwm-px.is-face-dim { background: var(--logo-dim); }

.md-typeset .catalyst-wordmark__pixels .ctwm-px.is-outline {
  background: var(--logo-outline);
}

.md-typeset .catalyst-wordmark__pixels .ctwm-px.is-shadow {
  background: var(--logo-shadow);
}

.md-typeset .catalyst-hero__eyebrow {
  margin: 0 0 0.85rem;
  color: var(--catalyst-coral-light);
  font-family: var(--catalyst-mono);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.md-typeset .catalyst-hero__title {
  margin: 0 0 1.1rem;
  color: var(--catalyst-on-ink);
  font-size: clamp(2.2rem, 1rem + 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.md-typeset .catalyst-hero__lede {
  margin: 0;
  max-width: 36rem;
  color: var(--catalyst-on-ink-dim);
  font-size: 1.15rem;
  line-height: 1.5;
}

/* Buttons — solid coral with a chevron ------------------------------------ */
.catalyst-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.md-typeset .catalyst-landing .md-button.catalyst-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 1.3rem;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  white-space: nowrap;
}

.md-typeset .catalyst-landing .md-button.catalyst-cta::after {
  content: "›";
  font-size: 1.25em;
  line-height: 0;
  transition: transform 120ms ease;
}

.md-typeset .catalyst-landing .md-button.catalyst-cta:hover::after,
.md-typeset .catalyst-landing .md-button.catalyst-cta:focus::after {
  transform: translateX(0.2rem);
}

.md-typeset .catalyst-landing .md-button--primary.catalyst-cta {
  color: var(--catalyst-ink);
  background: var(--catalyst-coral);
}

.md-typeset .catalyst-landing .md-button--primary.catalyst-cta:hover,
.md-typeset .catalyst-landing .md-button--primary.catalyst-cta:focus {
  background: var(--catalyst-coral-light);
  color: var(--catalyst-ink);
}

.md-typeset .catalyst-landing .md-button.catalyst-cta:not(.md-button--primary) {
  color: var(--catalyst-on-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--catalyst-hairline);
}

.md-typeset .catalyst-landing .md-button.catalyst-cta:not(.md-button--primary):hover,
.md-typeset .catalyst-landing .md-button.catalyst-cta:not(.md-button--primary):focus {
  box-shadow: inset 0 0 0 1px var(--catalyst-coral-light);
  color: var(--catalyst-coral-light);
}

/* Code band --------------------------------------------------------------- */
.md-typeset .catalyst-band__grid {
  display: grid;
  /* Copy takes the bulk; the short code block is ~1/3 with a sensible min so
     it never gets cramped, and tops out so it doesn't sprawl with empty space. */
  grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
  gap: 3rem;
  align-items: center;
}

.md-typeset .catalyst-band__copy {
  margin: 0;
  color: var(--catalyst-on-ink-dim);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* Taste section ----------------------------------------------------------- */
.md-typeset .catalyst-taste {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.md-typeset .catalyst-taste__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(23rem, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.md-typeset .catalyst-taste__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.md-typeset .catalyst-taste__copy .catalyst-mono-heading {
  margin-bottom: 0.85rem;
}

.md-typeset .catalyst-taste__lead {
  max-width: 37rem;
  margin: 0 0 1.45rem;
  color: var(--catalyst-on-ink-dim);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.55;
}

.md-typeset .catalyst-taste__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

.md-typeset .catalyst-taste__point {
  position: relative;
  padding-top: 0.9rem;
  border-top: 0.16rem solid color-mix(in srgb, var(--catalyst-coral) 72%, transparent);
}

.md-typeset .catalyst-taste__point span {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--catalyst-coral-light);
  font-family: var(--catalyst-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.md-typeset .catalyst-taste__point h3 {
  margin: 0 0 0.35rem;
  color: var(--catalyst-on-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.md-typeset .catalyst-taste__point p {
  margin: 0;
  color: var(--catalyst-on-ink-dim);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Code block — same borderless raised panel as the cards (square corners,
   --catalyst surface) so it feels part of the landing, not a stock code box. */
.md-typeset .catalyst-code {
  position: relative;
  z-index: 1;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-block-size: var(--catalyst-code-max-block-size, none);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--catalyst-surface);
  text-align: left;
  overflow-anchor: none;
}

/* A coral "pixel" tab on the panel's top edge, echoing the card strips. */
.md-typeset .catalyst-code::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.32rem;
  background: var(--catalyst-coral);
}

.md-typeset .catalyst-code__caption {
  display: block;
  margin: 0;
  padding: 0.95rem 8.5rem 0.7rem 1.6rem;
  color: var(--catalyst-coral-light);
  font-family: var(--catalyst-mono);
  font-size: 0.69rem;
  line-height: 1.4;
}

.md-typeset .catalyst-code__filename,
.md-typeset .catalyst-code__random {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-height: 1.35rem;
  padding: 0.25rem 0.55rem;
  border: 0.06rem solid transparent;
  border-radius: 0;
  background: color-mix(in srgb, var(--catalyst-coral) 12%, transparent);
  color: var(--catalyst-coral);
  font: inherit;
  line-height: 1;
}

.md-typeset .catalyst-code__random {
  position: absolute;
  top: 0.86rem;
  right: 1.6rem;
  z-index: 2;
  min-height: 1.42rem;
  padding: 0.25rem 0.58rem;
  border-color: color-mix(in srgb, var(--catalyst-coral) 48%, transparent);
  background: transparent;
  color: var(--catalyst-coral);
  cursor: pointer;
  font-family: var(--md-text-font-family, system-ui, sans-serif);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.md-typeset .catalyst-code__random:hover,
.md-typeset .catalyst-code__random:focus {
  border-color: var(--catalyst-coral-light);
  background: var(--catalyst-coral-light);
  color: var(--catalyst-ink);
}

.md-typeset .catalyst-code__random-icon {
  font-family: var(--catalyst-mono);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.md-typeset .catalyst-code__random:disabled {
  cursor: wait;
  opacity: 0.62;
}

/* Inner code surfaces inherit the single panel background — kill any theme
   code background so there's one consistent surface (no box-in-a-box). */
.md-typeset .catalyst-code pre,
.md-typeset .catalyst-code pre > code,
.md-typeset .catalyst-code .highlight,
.md-typeset .catalyst-code .highlighttable,
.md-typeset .catalyst-code [class*="highlight"] {
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

.md-typeset .catalyst-code pre {
  flex: 1 1 auto;
  min-block-size: 0;
  margin: 0;
  overflow: auto;
  padding: 1.5rem 1.6rem 1.4rem;
  color: var(--catalyst-on-ink);
  font-size: 0.84rem;
  line-height: 1.55;
  text-align: left;
}

.md-typeset .catalyst-code pre > code {
  padding: 0;
}

/* Card grids -------------------------------------------------------------- */
.md-typeset .catalyst-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.md-typeset .catalyst-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 11rem;
  padding: 2.1rem 1.3rem 1.3rem;
  border: 0;
  /* No outline — separation comes from a raised surface that contrasts with
     the page background (lighter in dark mode, darker panel in light mode). */
  background: var(--catalyst-surface);
  color: var(--catalyst-on-ink-dim);
}

/* Card top-strip — 2 rows of solid color "pixels" with CP437 shade chars
   overlaid on top for a gently corrupted look. Built by catalyst-wordmark.js.
   --strip-cols is set per strip from the number of palette colors. */
.md-typeset .catalyst-card__strip {
  --strip-row-h: 0.62rem;
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--strip-row-h) * 2);
  overflow: hidden; /* clip stretched glyphs that bleed past the strip edges */
}

/* Solid pixel grid: 2 rows x N cols. */
.md-typeset .catalyst-card__solid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--strip-cols, 5), 1fr);
  grid-auto-rows: var(--strip-row-h);
}

.md-typeset .catalyst-card__block {
  width: 100%;
  height: 100%;
}

/* Edge-glitch overlay: full-cell shade glyphs in the canvas color, so the
   colored pixels appear to dissolve into black toward the right edge. The
   glyphs are stretched to fill each cell so they read as pixels, not chars. */
.md-typeset .catalyst-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--strip-cols, 5), 1fr);
  grid-auto-rows: var(--strip-row-h);
  overflow: hidden; /* clips the stretched glyphs to the strip bounds */
  color: var(--tear-color, var(--catalyst-surface-2)); /* dissolve target */
  font-family: var(--catalyst-mono);
  line-height: var(--strip-row-h);
  pointer-events: none;
}

.md-typeset .catalyst-card__ox {
  font-size: calc(var(--strip-row-h) * 1.2);
  line-height: var(--strip-row-h);
  text-align: center;
}

/* Stretch each block glyph horizontally to overfill its cell so ░▒▓█ tile
   seamlessly — no coral showing between cells (kills the picket-fence). */
.md-typeset .catalyst-card__ox:not(:empty) {
  transform: scaleX(3);
}

.md-typeset .catalyst-card h3 {
  margin: 0 0 0.55rem;
  color: var(--catalyst-on-ink);
  font-size: 1.2rem;
  font-weight: 700;
}

.md-typeset .catalyst-card p {
  margin: 0;
  line-height: 1.5;
}

.md-typeset .catalyst-card__link {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--catalyst-coral-light);
  font-family: var(--catalyst-mono);
  font-size: 0.85rem;
}

.md-typeset .catalyst-card__link::after {
  content: " ›";
}

/* Closing CTA band with stepped pixel graphic ----------------------------- */
.md-typeset .catalyst-cta-band {
  position: relative;
  overflow: hidden;
}

.md-typeset .catalyst-cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
}

.md-typeset .catalyst-cta-band__copy {
  max-width: 34rem;
}

.md-typeset .catalyst-cta-band__copy p {
  margin: 0 0 1.4rem;
  color: var(--catalyst-on-ink-dim);
  font-size: 1.1rem;
  line-height: 1.55;
}

.md-typeset .catalyst-stairs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 7rem;
}

.md-typeset .catalyst-stairs span {
  width: 2rem;
  background: var(--c, var(--catalyst-coral));
}

.md-typeset .catalyst-stairs span:nth-child(1) { height: 1.4rem; }
.md-typeset .catalyst-stairs span:nth-child(2) { height: 2.8rem; }
.md-typeset .catalyst-stairs span:nth-child(3) { height: 4.2rem; }
.md-typeset .catalyst-stairs span:nth-child(4) { height: 5.6rem; }
.md-typeset .catalyst-stairs span:nth-child(5) { height: 7rem; }

.md-typeset pre.catalyst-highlighted,
.md-typeset pre>code.catalyst-highlighted {
  color: var(--md-code-fg-color);
}

.md-typeset pre.invalid-example {
  position: relative;
  padding-right: 2.5rem;
}

.md-typeset pre.invalid-example::after {
  content: "!";
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border: 0.08rem solid #ff6b5f;
  border-radius: 50%;
  color: #ff8f84;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.md-typeset pre.invalid-example::before {
  content: "Invalid example";
  position: absolute;
  top: 0.43rem;
  right: 1.95rem;
  z-index: 1;
  padding: 0.18rem 0.38rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, #ff6b5f 18%, var(--md-code-bg-color));
  color: #ffd0cb;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.2rem);
  transition: opacity 125ms, transform 125ms;
  white-space: nowrap;
}

.md-typeset pre.invalid-example:hover::before,
.md-typeset pre.invalid-example:focus-within::before {
  opacity: 1;
  transform: translateX(0);
}

.md-typeset .ctok-keyword {
  color: #b36bff;
  font-weight: 600;
}

.md-typeset .ctok-type {
  color: #168f7a;
}

.md-typeset .ctok-function {
  color: #1d75b9;
}

.md-typeset .ctok-string {
  color: #b36b00;
}

.md-typeset .ctok-number,
.md-typeset .ctok-constant {
  color: #d55a38;
}

.md-typeset .ctok-comment {
  color: #6f7f89;
  font-style: italic;
}

.md-typeset .ctok-attribute {
  color: #8a6f00;
}

.md-typeset .ctok-operator {
  color: #52636f;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-keyword {
  color: #c9a7ff;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-type {
  color: #44d7b6;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-function {
  color: #7fb8ff;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-string {
  color: #f4c542;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-number,
[data-md-color-scheme="slate"] .md-typeset .ctok-constant {
  color: #ff9b7d;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-comment {
  color: #8fa2ad;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-attribute {
  color: #f0d26a;
}

[data-md-color-scheme="slate"] .md-typeset .ctok-operator {
  color: #a7b7c2;
}

@media screen and (max-width: 820px) {
  .md-typeset .catalyst-cards {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 760px) {
  .md-typeset .catalyst-hero,
  .md-typeset .catalyst-band,
  .md-typeset .catalyst-section,
  .md-typeset .catalyst-cta-band {
    padding-block: 3.2rem;
  }

  .md-typeset .catalyst-band__grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .md-typeset .catalyst-taste__grid,
  .md-typeset .catalyst-taste__points {
    grid-template-columns: 1fr;
  }

  .md-typeset .catalyst-taste__lead {
    font-size: 1rem;
  }

  .md-typeset .catalyst-code__caption {
    padding-right: 1.6rem;
  }

  .md-typeset .catalyst-code__random {
    position: static;
    margin-top: 0.65rem;
  }

  .md-typeset .catalyst-cta-band__inner {
    grid-template-columns: 1fr;
  }

  .md-typeset .catalyst-stairs {
    height: 5rem;
  }

  .md-typeset .catalyst-stairs span {
    width: 1.5rem;
  }

  .md-typeset .catalyst-stairs span:nth-child(1) { height: 1rem; }
  .md-typeset .catalyst-stairs span:nth-child(2) { height: 2rem; }
  .md-typeset .catalyst-stairs span:nth-child(3) { height: 3rem; }
  .md-typeset .catalyst-stairs span:nth-child(4) { height: 4rem; }
  .md-typeset .catalyst-stairs span:nth-child(5) { height: 5rem; }
}

/* ==========================================================================
   Mermaid diagram category colors  (light / dark safe)
   --------------------------------------------------------------------------
   The compiler diagrams in language-design/* tag nodes with semantic classes
   (phase, artifact, verified, backend, deferred, demand, execution, result,
   start) via mermaid `classDef NAME` carrying NO colors — the markdown stays
   style-free.

   Zensical/Material renders mermaid into a CLOSED shadow root, so these
   selectors cannot be written as normal page CSS (they would never match).
   Instead javascripts/catalyst-mermaid.js injects, via mermaid `themeCSS`,
   rules like `.artifact > * { fill: var(--catalyst-mermaid-artifact-fill) }`
   into the SVG's own <style> inside the shadow root. CSS custom properties
   inherit across the shadow boundary, so the `--catalyst-mermaid-*` values
   defined HERE drive the colors — and because they are redefined under the
   slate palette below, the same diagram adapts to light and dark with no
   per-diagram overrides.

   Each category fill is its hue washed onto the page background (a soft tint
   in light mode, a deeper-but-legible tint in dark mode); the stroke is the
   same hue at higher strength for a crisp edge. Tune a category by editing
   only the base hue and the two strength knobs.
   ========================================================================== */
:root {
  /* Base hues (light palette). */
  --catalyst-mermaid-phase-hue:     #3973ac;  /* blue   — linear pipeline phases */
  --catalyst-mermaid-artifact-hue:  #3973ac;  /* blue   — pipeline artifacts     */
  --catalyst-mermaid-verified-hue:  #2f7d68;  /* teal   — verified IR            */
  --catalyst-mermaid-backend-hue:   #3c7a3c;  /* green  — backend consumers      */
  --catalyst-mermaid-deferred-hue:  #b3760f;  /* amber  — deferred / later work  */
  --catalyst-mermaid-demand-hue:    #b3760f;  /* amber  — comptime demand        */
  --catalyst-mermaid-execution-hue: #3c7a3c;  /* green  — interpreter execution  */
  --catalyst-mermaid-result-hue:    #6d5bd0;  /* violet — comptime result        */
  --catalyst-mermaid-start-hue:     #6b7280;  /* neutral grey — loop start       */

  /* Wash strengths over the page background. */
  --catalyst-mermaid-fill-strength: 14%;
  --catalyst-mermaid-stroke-strength: 70%;
}

[data-md-color-scheme="slate"] {
  /* Lift hues and deepen the wash so tints don't muddy into the slate bg. */
  --catalyst-mermaid-phase-hue:     #5aa0d8;
  --catalyst-mermaid-artifact-hue:  #5aa0d8;
  --catalyst-mermaid-verified-hue:  #4fbf9f;
  --catalyst-mermaid-backend-hue:   #5fbf6f;
  --catalyst-mermaid-deferred-hue:  #e0a23c;
  --catalyst-mermaid-demand-hue:    #e0a23c;
  --catalyst-mermaid-execution-hue: #5fbf6f;
  --catalyst-mermaid-result-hue:    #9d8cff;
  --catalyst-mermaid-start-hue:     #9aa4ad;
  --catalyst-mermaid-fill-strength: 24%;
  --catalyst-mermaid-stroke-strength: 88%;
}

/* Resolved fill/stroke per category — consumed by the injected themeCSS.
   Defined on <body> (NOT :root) because Material sets data-md-color-scheme on
   <body>, so the per-palette hue overrides above only take effect from <body>
   downward. These then inherit into the mermaid host and across the closed
   shadow boundary, where the injected themeCSS reads them via var(). */
body {
  --catalyst-mermaid-phase-fill:     color-mix(in srgb, var(--catalyst-mermaid-phase-hue)     var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-phase-stroke:   color-mix(in srgb, var(--catalyst-mermaid-phase-hue)     var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-artifact-fill:  color-mix(in srgb, var(--catalyst-mermaid-artifact-hue)  var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-artifact-stroke:color-mix(in srgb, var(--catalyst-mermaid-artifact-hue)  var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-verified-fill:  color-mix(in srgb, var(--catalyst-mermaid-verified-hue)  var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-verified-stroke:color-mix(in srgb, var(--catalyst-mermaid-verified-hue)  var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-backend-fill:   color-mix(in srgb, var(--catalyst-mermaid-backend-hue)   var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-backend-stroke: color-mix(in srgb, var(--catalyst-mermaid-backend-hue)   var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-deferred-fill:  color-mix(in srgb, var(--catalyst-mermaid-deferred-hue)  var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-deferred-stroke:color-mix(in srgb, var(--catalyst-mermaid-deferred-hue)  var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-demand-fill:    color-mix(in srgb, var(--catalyst-mermaid-demand-hue)    var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-demand-stroke:  color-mix(in srgb, var(--catalyst-mermaid-demand-hue)    var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-execution-fill: color-mix(in srgb, var(--catalyst-mermaid-execution-hue) var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-execution-stroke:color-mix(in srgb, var(--catalyst-mermaid-execution-hue) var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-result-fill:    color-mix(in srgb, var(--catalyst-mermaid-result-hue)    var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-result-stroke:  color-mix(in srgb, var(--catalyst-mermaid-result-hue)    var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
  --catalyst-mermaid-start-fill:     color-mix(in srgb, var(--catalyst-mermaid-start-hue)     var(--catalyst-mermaid-fill-strength),   var(--md-default-bg-color));
  --catalyst-mermaid-start-stroke:   color-mix(in srgb, var(--catalyst-mermaid-start-hue)     var(--catalyst-mermaid-stroke-strength), var(--md-default-bg-color));
}