/*! chromokit 0.1.0 · MIT · https://github.com/js2264/chromokit · generated by scripts/build.mjs — do not edit; put local changes in your own stylesheet */
/* Tokens. Light and dark palettes from chromosomix (70e566a), syntax colours
   from Vitesse, page measures from chromokit. Every name is `--cx-<name>`. */

:root {
  --cx-rem: 1rem;
  --cx-sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --cx-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --cx-radius: 6px;
  --cx-step--2: calc(0.72 * var(--cx-rem));
  --cx-step--1: calc(0.78 * var(--cx-rem));
  --cx-step-0: calc(0.875 * var(--cx-rem));
  --cx-step-1: calc(1 * var(--cx-rem));
  --cx-step-2: calc(1.25 * var(--cx-rem));
  --cx-step-3: calc(1.6 * var(--cx-rem));
  --cx-label: calc(0.6875 * var(--cx-rem));
  --cx-header-h: 53px;
  --cx-sidebar-w: 300px;
  --cx-toc-w: 300px;
  --cx-content-w: 720px;
  --cx-pad-x: 36px;
  --cx-grain: 10px;
  --cx-prose-size: calc(1 * var(--cx-rem));
  --cx-prose-line: 1.75;
  --cx-prose-h1: calc(1.8125 * var(--cx-rem));
  --cx-prose-h2: calc(1.5 * var(--cx-rem));
  --cx-prose-h3: calc(1.25 * var(--cx-rem));
  --cx-prose-h4: calc(1.0625 * var(--cx-rem));
  --cx-prose-h5: calc(0.9375 * var(--cx-rem));
  --cx-icon-chevron: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --cx-icon-link: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
  --cx-terminal-dots: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'><circle cx='8' cy='8' r='8'/><circle cx='30' cy='8' r='8'/><circle cx='52' cy='8' r='8'/></svg>");
}

:root,
::backdrop,
.cx-light,
.cx-paper,
:root[data-theme='light'],
body[data-theme='light'],
[data-md-color-scheme='default'],
:root[data-bs-theme='light'],
body.quarto-light {
  color-scheme: light;
  --cx-bg: #ffffff;
  --cx-bg-sunken: #f5f6f8;
  --cx-bg-raised: #ffffff;
  --cx-bg-muted: #e9eaec;
  --cx-border: #d2d3d6;
  --cx-border-strong: #8d8f93;
  --cx-text: #17181a;
  --cx-text-dim: #54565a;
  --cx-text-faint: #68696d;
  --cx-accent: #1f5fa9;
  --cx-accent-soft: #dce8f7;
  --cx-on-accent: #ffffff;
  --cx-danger: #a32020;
  --cx-danger-soft: #fbe2e2;
  --cx-ok: #1d6b3f;
  --cx-warn: #8a5200;
  --cx-warn-soft: #fbeeda;
  --cx-tab-rest: #eaebed;
  --cx-shadow-1: 0 1px 2px #18181a12, 0 1px 1px #18181a0a;
  --cx-shadow-2: 0 6px 18px -10px #18181a4d, 0 2px 5px -3px #18181a29;
  --cx-shadow-up: 0 -6px 18px -10px #18181a4d, 0 -2px 5px -3px #18181a29;
  --cx-code-bg: #ffffff;
  --cx-code-fg: #393a34;
  --cx-code-dots: #4e4f4738;
  --cx-hl-comment: #6f7a6f;
  --cx-hl-keyword: #1e754f;
  --cx-hl-string: #9c5a4c;
  --cx-hl-function: #4b7231;
  --cx-hl-constant: #995728;
  --cx-hl-number: #2b6f7e;
  --cx-hl-variable: #8f6136;
  --cx-hl-operator: #9a4d4d;
  --cx-hl-punctuation: #6e6e6e;
  --cx-hl-special: #995728;
  --cx-series-1: #1f5fa9;
  --cx-series-2: #e44a72;
  --cx-series-3: #2c6e5c;
  --cx-series-4: #898329;
  --cx-series-5: #a953e3;
  --cx-series-6: #4a5704;
  --cx-series-7: #7c1870;
  --cx-family-reads: #2c6e5c;
  --cx-family-alignments: #34469d;
  --cx-family-genome: #898329;
  --cx-family-index: #594722;
  --cx-family-fragments: #7c1870;
  --cx-family-pairs: #712d46;
  --cx-family-track: #007999;
  --cx-family-peaks: #e44a72;
  --cx-family-value: #4a5704;
  --cx-family-report: #a953e3;
  --cx-state-running: #7108dc;
  --cx-state-done: var(--cx-ok);
  --cx-state-cached: var(--cx-ok);
  --cx-state-stale: var(--cx-warn);
  --cx-state-failed: var(--cx-danger);
  --cx-state-queued: var(--cx-text-dim);
  --cx-state-never: var(--cx-border-strong);
  --cx-state-bypassed: var(--cx-text-faint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-bs-theme='light']),
  :root:not([data-theme='light']):not([data-bs-theme='light']) ::backdrop {
    color-scheme: dark;
    --cx-bg: #191a1c;
    --cx-bg-sunken: #131416;
    --cx-bg-raised: #232529;
    --cx-bg-muted: #161719;
    --cx-border: #3e4044;
    --cx-border-strong: #727478;
    --cx-text: #eeeff1;
    --cx-text-dim: #b3b5b9;
    --cx-text-faint: #8a8c90;
    --cx-accent: #6ba4e8;
    --cx-accent-soft: #203657;
    --cx-on-accent: #131416;
    --cx-danger: #ef8a8a;
    --cx-danger-soft: #3b2020;
    --cx-ok: #6cc48f;
    --cx-warn: #e3a857;
    --cx-warn-soft: #3b2d15;
    --cx-tab-rest: #2a2b2e;
    --cx-shadow-1: 0 1px 2px #00000066, 0 1px 1px #00000047;
    --cx-shadow-2: 0 8px 22px -10px #000000a8, 0 2px 6px -3px #00000070;
    --cx-shadow-up: 0 -8px 22px -10px #000000a8, 0 -2px 6px -3px #00000070;
    --cx-code-bg: #121212;
    --cx-code-fg: #dbd7caee;
    --cx-code-dots: #bfbaaa2e;
    --cx-hl-comment: #869686;
    --cx-hl-keyword: #5ea38a;
    --cx-hl-string: #c98a7d;
    --cx-hl-function: #80a665;
    --cx-hl-constant: #c99076;
    --cx-hl-number: #4c9a91;
    --cx-hl-variable: #bd976a;
    --cx-hl-operator: #cb7676;
    --cx-hl-punctuation: #8a8a8a;
    --cx-hl-special: #c99076;
    --cx-series-1: #6ba4e8;
    --cx-series-2: #fe7ca1;
    --cx-series-3: #4ccdc7;
    --cx-series-4: #e4e482;
    --cx-series-5: #b067fa;
    --cx-series-6: #879304;
    --cx-series-7: #d26fb7;
    --cx-family-reads: #4ccdc7;
    --cx-family-alignments: #a39be9;
    --cx-family-genome: #e4e482;
    --cx-family-index: #f8d795;
    --cx-family-fragments: #d26fb7;
    --cx-family-pairs: #f5c2dd;
    --cx-family-track: #0e9fc3;
    --cx-family-peaks: #fe7ca1;
    --cx-family-value: #879304;
    --cx-family-report: #b067fa;
    --cx-state-running: #9575e2;
    --cx-state-done: var(--cx-ok);
    --cx-state-cached: var(--cx-ok);
    --cx-state-stale: var(--cx-warn);
    --cx-state-failed: var(--cx-danger);
    --cx-state-queued: var(--cx-text-dim);
    --cx-state-never: var(--cx-border-strong);
    --cx-state-bypassed: var(--cx-text-faint);
  }
}

:root[data-theme='dark'],
:root[data-theme='dark'] ::backdrop,
body[data-theme='dark'],
.cx-dark,
[data-md-color-scheme='slate'],
:root[data-bs-theme='dark'],
body.quarto-dark {
  color-scheme: dark;
  --cx-bg: #191a1c;
  --cx-bg-sunken: #131416;
  --cx-bg-raised: #232529;
  --cx-bg-muted: #161719;
  --cx-border: #3e4044;
  --cx-border-strong: #727478;
  --cx-text: #eeeff1;
  --cx-text-dim: #b3b5b9;
  --cx-text-faint: #8a8c90;
  --cx-accent: #6ba4e8;
  --cx-accent-soft: #203657;
  --cx-on-accent: #131416;
  --cx-danger: #ef8a8a;
  --cx-danger-soft: #3b2020;
  --cx-ok: #6cc48f;
  --cx-warn: #e3a857;
  --cx-warn-soft: #3b2d15;
  --cx-tab-rest: #2a2b2e;
  --cx-shadow-1: 0 1px 2px #00000066, 0 1px 1px #00000047;
  --cx-shadow-2: 0 8px 22px -10px #000000a8, 0 2px 6px -3px #00000070;
  --cx-shadow-up: 0 -8px 22px -10px #000000a8, 0 -2px 6px -3px #00000070;
  --cx-code-bg: #121212;
  --cx-code-fg: #dbd7caee;
  --cx-code-dots: #bfbaaa2e;
  --cx-hl-comment: #869686;
  --cx-hl-keyword: #5ea38a;
  --cx-hl-string: #c98a7d;
  --cx-hl-function: #80a665;
  --cx-hl-constant: #c99076;
  --cx-hl-number: #4c9a91;
  --cx-hl-variable: #bd976a;
  --cx-hl-operator: #cb7676;
  --cx-hl-punctuation: #8a8a8a;
  --cx-hl-special: #c99076;
  --cx-series-1: #6ba4e8;
  --cx-series-2: #fe7ca1;
  --cx-series-3: #4ccdc7;
  --cx-series-4: #e4e482;
  --cx-series-5: #b067fa;
  --cx-series-6: #879304;
  --cx-series-7: #d26fb7;
  --cx-family-reads: #4ccdc7;
  --cx-family-alignments: #a39be9;
  --cx-family-genome: #e4e482;
  --cx-family-index: #f8d795;
  --cx-family-fragments: #d26fb7;
  --cx-family-pairs: #f5c2dd;
  --cx-family-track: #0e9fc3;
  --cx-family-peaks: #fe7ca1;
  --cx-family-value: #879304;
  --cx-family-report: #b067fa;
  --cx-state-running: #9575e2;
  --cx-state-done: var(--cx-ok);
  --cx-state-cached: var(--cx-ok);
  --cx-state-stale: var(--cx-warn);
  --cx-state-failed: var(--cx-danger);
  --cx-state-queued: var(--cx-text-dim);
  --cx-state-never: var(--cx-border-strong);
  --cx-state-bypassed: var(--cx-text-faint);
}

.cx-light,
.cx-paper {
  color-scheme: light;
  --cx-bg: #ffffff;
  --cx-bg-sunken: #f5f6f8;
  --cx-bg-raised: #ffffff;
  --cx-bg-muted: #e9eaec;
  --cx-border: #d2d3d6;
  --cx-border-strong: #8d8f93;
  --cx-text: #17181a;
  --cx-text-dim: #54565a;
  --cx-text-faint: #68696d;
  --cx-accent: #1f5fa9;
  --cx-accent-soft: #dce8f7;
  --cx-on-accent: #ffffff;
  --cx-danger: #a32020;
  --cx-danger-soft: #fbe2e2;
  --cx-ok: #1d6b3f;
  --cx-warn: #8a5200;
  --cx-warn-soft: #fbeeda;
  --cx-tab-rest: #eaebed;
  --cx-shadow-1: 0 1px 2px #18181a12, 0 1px 1px #18181a0a;
  --cx-shadow-2: 0 6px 18px -10px #18181a4d, 0 2px 5px -3px #18181a29;
  --cx-shadow-up: 0 -6px 18px -10px #18181a4d, 0 -2px 5px -3px #18181a29;
  --cx-code-bg: #ffffff;
  --cx-code-fg: #393a34;
  --cx-code-dots: #4e4f4738;
  --cx-hl-comment: #6f7a6f;
  --cx-hl-keyword: #1e754f;
  --cx-hl-string: #9c5a4c;
  --cx-hl-function: #4b7231;
  --cx-hl-constant: #995728;
  --cx-hl-number: #2b6f7e;
  --cx-hl-variable: #8f6136;
  --cx-hl-operator: #9a4d4d;
  --cx-hl-punctuation: #6e6e6e;
  --cx-hl-special: #995728;
  --cx-series-1: #1f5fa9;
  --cx-series-2: #e44a72;
  --cx-series-3: #2c6e5c;
  --cx-series-4: #898329;
  --cx-series-5: #a953e3;
  --cx-series-6: #4a5704;
  --cx-series-7: #7c1870;
  --cx-family-reads: #2c6e5c;
  --cx-family-alignments: #34469d;
  --cx-family-genome: #898329;
  --cx-family-index: #594722;
  --cx-family-fragments: #7c1870;
  --cx-family-pairs: #712d46;
  --cx-family-track: #007999;
  --cx-family-peaks: #e44a72;
  --cx-family-value: #4a5704;
  --cx-family-report: #a953e3;
  --cx-state-running: #7108dc;
  --cx-state-done: var(--cx-ok);
  --cx-state-cached: var(--cx-ok);
  --cx-state-stale: var(--cx-warn);
  --cx-state-failed: var(--cx-danger);
  --cx-state-queued: var(--cx-text-dim);
  --cx-state-never: var(--cx-border-strong);
  --cx-state-bypassed: var(--cx-text-faint);
}

/*
 * Surfaces and helpers.
 *
 * Nothing in the core styles a bare element: every rule is on a `cx-` class,
 * so the core can be dropped into any framework (Zensical, Starlight, pkgdown,
 * Quarto) without touching what the framework draws. Element defaults for a
 * page with no framework at all are in `page.css`.
 */

/* The ground: a sub-pixel dot every 10px, behind content and never behind
   furniture. The furniture (header, sidebars, status bar) is solid. */
.cx-ground {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cx-border) 50%, transparent) 0.8px, transparent 1px);
  background-size: var(--cx-grain) var(--cx-grain);
}

/* The same grain inside a sunken well, for a picture sitting on the ground. */
.cx-well {
  background-color: var(--cx-bg-sunken);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--cx-border-strong) 45%, transparent) 0.8px, transparent 1px);
  background-size: var(--cx-grain) var(--cx-grain);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
}

.cx-surface {
  color: var(--cx-text);
  background-color: var(--cx-bg);
}

.cx-raised {
  background-color: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
}

.cx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Shown on narrow screens only (where the header drops its `__wide` items). */
.cx-narrow {
  display: none;
}

@media (max-width: 60rem) {
  .cx-narrow {
    display: revert;
  }
}

.cx-mono {
  font-family: var(--cx-mono);
  font-variant-numeric: slashed-zero tabular-nums;
}

.cx-dim {
  color: var(--cx-text-dim);
}

.cx-faint {
  color: var(--cx-text-faint);
}

/* An icon drawn inline: Lucide's geometry, one stroke, the colour of the text. */
.cx-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cx-icon--filled {
  fill: currentcolor;
  stroke: none;
}

/*
 * Controls: the compact button, the call to action, fields and keys.
 *
 * One gesture for every control that has a border of its own: on hover the
 * border and the word take the accent and the control rises a pixel and casts.
 * Pressed, it comes back down. The quiet variants, with no border to raise,
 * opt out of the lift.
 */

/* ---- the compact control (the app's `.btn`, the header's buttons) ------- */
.cx-control,
a.cx-control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.35 * var(--cx-rem));
  margin: 0;
  padding: calc(0.3 * var(--cx-rem)) calc(0.65 * var(--cx-rem));
  font: 400 var(--cx-step--1) / calc(1 * var(--cx-rem)) var(--cx-sans);
  white-space: nowrap;
  color: var(--cx-text);
  text-decoration: none;
  cursor: pointer;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius);
  box-shadow: none;
  transition:
    border-color 120ms,
    color 120ms,
    background 120ms,
    box-shadow 120ms,
    transform 120ms;
}

.cx-control:hover:not(:disabled),
a.cx-control:hover {
  color: var(--cx-accent);
  border-color: var(--cx-accent);
  box-shadow: var(--cx-shadow-2);
  transform: translateY(-1px);
}

.cx-control:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--cx-shadow-1);
}

.cx-control:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

.cx-control:disabled {
  cursor: default;
  opacity: 0.45;
}

.cx-control svg,
.cx-control .cx-icon {
  width: 16px;
  height: 16px;
}

/* A control that is only an icon: one height with a control that has a word. */
.cx-control--icon {
  padding-inline: calc(0.45 * var(--cx-rem));
}

.cx-control--quiet,
a.cx-control--quiet {
  background: transparent;
  border-color: transparent;
}

.cx-control--quiet:hover:not(:disabled),
a.cx-control--quiet:hover {
  background: var(--cx-bg-sunken);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* Selected, in a group of toggles: the soft accent, as the app's tool buttons. */
.cx-control[aria-pressed='true'],
.cx-control.is-active {
  color: var(--cx-accent);
  background: var(--cx-accent-soft);
  border-color: var(--cx-accent);
}

/* ---- the call to action (a landing page's buttons) ---------------------- */
.cx-button,
a.cx-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: calc(0.45 * var(--cx-rem));
  margin: 0;
  padding: calc(0.65 * var(--cx-rem)) calc(0.95 * var(--cx-rem));
  font: 500 var(--cx-step-0) / 1 var(--cx-sans);
  color: var(--cx-text);
  text-decoration: none;
  cursor: pointer;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
  transition:
    border-color 120ms,
    box-shadow 120ms,
    filter 120ms,
    transform 120ms;
}

.cx-button:hover,
a.cx-button:hover,
a.cx-button:focus {
  color: var(--cx-text);
  border-color: var(--cx-border-strong);
  box-shadow: var(--cx-shadow-2);
}

.cx-button:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

.cx-button--filled,
a.cx-button--filled,
a.cx-button--filled:hover,
a.cx-button--filled:focus {
  color: var(--cx-on-accent);
  background: var(--cx-accent);
  border-color: var(--cx-accent);
}

.cx-button--filled:hover,
a.cx-button--filled:hover {
  filter: brightness(1.08);
}

.cx-button svg,
.cx-button .cx-icon {
  width: 15px;
  height: 15px;
}

/* ---- fields ------------------------------------------------------------- */
.cx-input,
.cx-select,
.cx-textarea {
  box-sizing: border-box;
  min-width: 0;
  padding: calc(0.28 * var(--cx-rem)) calc(0.45 * var(--cx-rem));
  font: 400 var(--cx-step--1) / 1.35 var(--cx-sans);
  color: var(--cx-text);
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius);
}

.cx-input::placeholder,
.cx-textarea::placeholder {
  color: var(--cx-text-faint);
}

.cx-input:focus,
.cx-select:focus,
.cx-textarea:focus {
  outline: 2px solid var(--cx-accent);
  outline-offset: -1px;
}

.cx-input--mono {
  font-family: var(--cx-mono);
}

.cx-input[aria-invalid='true'] {
  border-color: var(--cx-danger);
  background: var(--cx-danger-soft);
}

.cx-field {
  display: grid;
  gap: calc(0.25 * var(--cx-rem));
  font-size: var(--cx-step--1);
  color: var(--cx-text-dim);
}

/* ---- the search well: words on the left, its key on the right ----------- */
.cx-search,
button.cx-search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.5 * var(--cx-rem));
  width: 100%;
  margin: 0;
  padding: calc(0.3 * var(--cx-rem)) calc(0.5 * var(--cx-rem)) calc(0.3 * var(--cx-rem)) calc(0.7 * var(--cx-rem));
  font: 400 var(--cx-step--1) / 1.45 var(--cx-sans);
  color: var(--cx-text-dim);
  text-align: left;
  cursor: pointer;
  background: var(--cx-bg-sunken);
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius);
  transition:
    border-color 120ms,
    color 120ms;
}

.cx-search:hover,
.cx-search:focus-within,
button.cx-search:focus-visible {
  color: var(--cx-text);
  border-color: var(--cx-accent);
  outline: none;
}

.cx-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: var(--cx-text);
  background: none;
  border: 0;
  outline: none;
}

.cx-search input::placeholder {
  color: var(--cx-text-dim);
}

.cx-search:focus-within .cx-kbd {
  display: none;
}

/* ---- a key, drawn as a key ---------------------------------------------- */
.cx-kbd,
kbd.cx-kbd {
  display: inline-block;
  padding: calc(0.05 * var(--cx-rem)) calc(0.35 * var(--cx-rem));
  font: 400 var(--cx-step--2) / 1.45 var(--cx-mono);
  font-variant-numeric: slashed-zero tabular-nums;
  color: var(--cx-text-dim);
  white-space: nowrap;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: none;
}

/* ---- the theme toggle: one button, three icons, one shown --------------- */
.cx-theme-toggle .cx-theme-icon {
  display: none;
}

:root:not([data-cx-theme]) .cx-theme-toggle .cx-theme-icon--system,
:root[data-cx-theme='system'] .cx-theme-toggle .cx-theme-icon--system,
:root[data-cx-theme='light'] .cx-theme-toggle .cx-theme-icon--light,
:root[data-cx-theme='dark'] .cx-theme-toggle .cx-theme-icon--dark {
  display: inline-block;
}

/*
 * Small words: the kicker over a group, the chip that names a version, the
 * badge that states an outcome.
 */

/* Small accented capitals: "NEW HERE?", "GET STARTED", a sidebar group. */
.cx-kicker {
  display: block;
  margin: 0;
  font: 600 var(--cx-label) / 1.2 var(--cx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cx-accent);
}

/* A version, a size, a count: the mono face in a hairline box. */
.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.3 * var(--cx-rem));
  padding: calc(0.18 * var(--cx-rem)) calc(0.42 * var(--cx-rem));
  font: 400 var(--cx-step--2) / calc(1 * var(--cx-rem)) var(--cx-mono);
  font-variant-numeric: slashed-zero tabular-nums;
  color: var(--cx-text-dim);
  white-space: nowrap;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius);
}

/* A count beside a heading, as on the app's side panels. */
.cx-count {
  display: inline-grid;
  place-items: center;
  min-width: calc(1.2 * var(--cx-rem));
  height: calc(1.2 * var(--cx-rem));
  padding: 0 calc(0.25 * var(--cx-rem));
  box-sizing: border-box;
  font: 400 var(--cx-step--2) / 1 var(--cx-mono);
  color: var(--cx-text-dim);
  border: 1px solid var(--cx-border-strong);
  border-radius: 4px;
}

/* An outcome: a dot and a few words in a pill. Colour for meaning only. */
.cx-badge,
a.cx-badge {
  --cx-badge: var(--cx-text-dim);
  display: inline-flex;
  align-items: center;
  gap: calc(0.4 * var(--cx-rem));
  padding: calc(0.35 * var(--cx-rem)) calc(0.6 * var(--cx-rem));
  font: 500 var(--cx-step--1) / 1 var(--cx-sans);
  color: var(--cx-badge);
  text-decoration: none;
  white-space: nowrap;
  background: color-mix(in srgb, var(--cx-badge) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cx-badge) 55%, transparent);
  border-radius: 999px;
}

.cx-badge::before {
  flex: none;
  width: calc(0.5 * var(--cx-rem));
  height: calc(0.5 * var(--cx-rem));
  content: '';
  background: currentcolor;
  border-radius: 50%;
}

.cx-badge--plain::before {
  display: none;
}

.cx-badge--accent {
  --cx-badge: var(--cx-accent);
}

.cx-badge--ok {
  --cx-badge: var(--cx-ok);
}

.cx-badge--warn {
  --cx-badge: var(--cx-warn);
}

.cx-badge--danger {
  --cx-badge: var(--cx-danger);
}

a.cx-badge:hover {
  filter: brightness(1.1);
}

/*
 * Things that rest on the page: cards, tiles, collapsible panels.
 *
 * All on the raised surface with the hairline, the 6px corner and the resting
 * shadow; a hover lifts them to the second elevation.
 */

.cx-card,
a.cx-card {
  display: block;
  padding: 14px 16px;
  color: var(--cx-text);
  text-decoration: none;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
  transition:
    border-color 120ms,
    box-shadow 120ms,
    transform 120ms;
}

a.cx-card:hover,
.cx-card--link:hover {
  color: var(--cx-text);
  border-color: var(--cx-border-strong);
  box-shadow: var(--cx-shadow-2);
  transform: translateY(-1px);
}

.cx-card > :first-child {
  margin-top: 0;
}

.cx-card > :last-child {
  margin-bottom: 0;
}

.cx-card__title {
  display: block;
  margin: 0 0 calc(0.25 * var(--cx-rem));
  font-size: var(--cx-step-0);
  font-weight: 600;
  color: var(--cx-text);
}

.cx-card__text {
  display: block;
  font-size: var(--cx-step--1);
  line-height: 1.45;
  color: var(--cx-text-dim);
}

.cx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(14 * var(--cx-rem)), 1fr));
  gap: calc(0.6 * var(--cx-rem));
}

/* ---- tiles: a glyph, a name and a line, centred ------------------------- */
.cx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(11.5 * var(--cx-rem)), 1fr));
  gap: calc(0.55 * var(--cx-rem));
  margin: 0;
}

.cx-tile,
a.cx-tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.35 * var(--cx-rem));
  margin: 0;
  padding: calc(1 * var(--cx-rem)) calc(0.8 * var(--cx-rem)) calc(0.9 * var(--cx-rem));
  text-align: center;
  color: var(--cx-text);
  text-decoration: none;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
  transition:
    border-color 120ms,
    box-shadow 120ms,
    transform 120ms;
}

a.cx-tile:hover,
a.cx-tile:focus {
  color: var(--cx-text);
  border-color: var(--cx-border-strong);
  box-shadow: var(--cx-shadow-2);
  transform: translateY(-1px);
}

/* A tile for something that is not there yet, or must be added by hand. */
.cx-tile--dashed,
a.cx-tile--dashed {
  border-style: dashed;
  box-shadow: none;
}

.cx-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(2.6 * var(--cx-rem));
  height: calc(2.6 * var(--cx-rem));
  margin-bottom: calc(0.25 * var(--cx-rem));
  color: var(--cx-accent);
  background: var(--cx-accent-soft);
  border-radius: 8px;
}

.cx-glyph svg,
.cx-glyph .cx-icon,
.cx-glyph img {
  width: 18px;
  height: 18px;
  max-height: none;
}

.cx-tile__title,
.cx-tile strong {
  font-size: calc(0.92 * var(--cx-rem));
  font-weight: 600;
  line-height: 1.4;
  color: var(--cx-text);
}

.cx-tile__text,
.cx-tile-text {
  font-size: var(--cx-step--1);
  line-height: 1.35;
  color: var(--cx-text-faint);
}

.cx-tile-text code,
.cx-tile__text code {
  font-size: 0.92em;
  color: inherit;
}

/* ---- the app's side-panel card: an uppercase head that folds it --------- */
.cx-panel {
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
}

.cx-panel > summary,
.cx-panel__head {
  display: flex;
  align-items: center;
  gap: calc(0.45 * var(--cx-rem));
  padding: calc(0.55 * var(--cx-rem)) calc(0.75 * var(--cx-rem));
  font: 600 var(--cx-step--1) / 1.2 var(--cx-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cx-text-dim);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.cx-panel > summary::-webkit-details-marker {
  display: none;
}

.cx-panel > summary::after {
  width: 13px;
  height: 13px;
  margin-left: auto;
  content: '';
  background-color: var(--cx-text-dim);
  -webkit-mask: var(--cx-icon-chevron) center / contain no-repeat;
  mask: var(--cx-icon-chevron) center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 150ms;
}

.cx-panel[open] > summary::after {
  transform: none;
}

.cx-panel > summary:hover {
  color: var(--cx-text);
}

.cx-panel__body,
.cx-panel > :not(summary) {
  padding: 0 calc(0.75 * var(--cx-rem)) calc(0.75 * var(--cx-rem));
}

/* A key and its value, row after row, as the app's FILE card. */
.cx-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(0.15 * var(--cx-rem)) calc(1 * var(--cx-rem));
  margin: 0;
  font-size: var(--cx-step--1);
}

.cx-kv dt {
  margin: 0;
  color: var(--cx-text-dim);
}

.cx-kv dd {
  margin: 0;
  overflow: hidden;
  font-family: var(--cx-mono);
  color: var(--cx-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- facts: a page's summary, uppercase keys on the left ---------------- */
.cx-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(0.3 * var(--cx-rem)) calc(1 * var(--cx-rem));
  margin: calc(1 * var(--cx-rem)) 0;
  padding: calc(0.75 * var(--cx-rem)) calc(1 * var(--cx-rem));
  font-size: calc(0.88 * var(--cx-rem));
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
}

.cx-facts dt {
  margin: 0;
  font: 600 var(--cx-label) / 1.9 var(--cx-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cx-text-faint);
}

.cx-facts dd {
  margin: 0;
  color: var(--cx-text);
}

@media (max-width: 30rem) {
  .cx-facts {
    grid-template-columns: 1fr;
  }

  .cx-facts dd {
    margin-bottom: calc(0.4 * var(--cx-rem));
  }
}

/* ---- a drop zone: dashed, sunken, a line and a hint --------------------- */
.cx-dropzone {
  display: grid;
  place-items: center;
  gap: calc(0.2 * var(--cx-rem));
  padding: calc(1.4 * var(--cx-rem)) calc(1 * var(--cx-rem));
  text-align: center;
  color: var(--cx-text);
  cursor: pointer;
  background: var(--cx-bg-sunken);
  border: 2px dashed var(--cx-border-strong);
  border-radius: var(--cx-radius);
  transition:
    border-color 120ms,
    background 120ms;
}

.cx-dropzone:hover,
.cx-dropzone.is-over {
  background: var(--cx-accent-soft);
  border-color: var(--cx-accent);
}

.cx-dropzone__title {
  font-size: var(--cx-step-1);
  font-weight: 600;
}

.cx-dropzone__hint {
  font-size: var(--cx-step--1);
  color: var(--cx-text-dim);
}

/* ---- a picture of an app, framed as a card ------------------------------ */
.cx-screen,
img.cx-screen {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
}

.cx-figure {
  margin: calc(1.5 * var(--cx-rem)) 0;
}

.cx-figure figcaption {
  margin-top: calc(0.5 * var(--cx-rem));
  font-size: var(--cx-step--1);
  color: var(--cx-text-dim);
}

/*
 * A landing page: the mark beside the name, a tagline, an install line, two
 * buttons, a row of badges, then groups of tiles under their kickers.
 */

.cx-landing {
  box-sizing: border-box;
  max-width: calc(52 * var(--cx-rem));
  margin: 0 auto;
  padding: calc(3 * var(--cx-rem)) 0 calc(4 * var(--cx-rem));
}

.cx-masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  font-size: clamp(calc(2 * var(--cx-rem)), 8vw, calc(3.6 * var(--cx-rem)));
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cx-text);
  border: 0;
}

.cx-masthead img,
.cx-masthead svg {
  flex: none;
  width: 0.92em;
  height: 0.92em;
  border-radius: 0.2em;
}

.cx-tagline {
  max-width: calc(36 * var(--cx-rem));
  margin: calc(1.1 * var(--cx-rem)) auto 0;
  font-size: calc(1.19 * var(--cx-rem));
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--cx-text);
}

.cx-lede {
  max-width: 600px;
  margin: calc(0.6 * var(--cx-rem)) auto 0;
  font-size: calc(0.97 * var(--cx-rem));
  line-height: 1.65;
  text-align: center;
  color: var(--cx-text-dim);
}

.cx-lede strong {
  color: inherit;
}

.cx-install {
  max-width: 340px;
  margin: calc(1.4 * var(--cx-rem)) auto 0;
}

.cx-install .cx-code,
.cx-install pre {
  margin: 0;
}

.cx-actions,
.cx-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cx-actions {
  gap: calc(0.6 * var(--cx-rem));
  margin-top: calc(1.5 * var(--cx-rem));
}

.cx-badges {
  gap: 6px;
  margin-top: calc(1.4 * var(--cx-rem));
}

.cx-badges img {
  display: block;
  height: 20px;
  border-radius: 0;
}

/* Zensical and Starlight put a Markdown paragraph between the wrapper and the
   links: the paragraph becomes the row. */
.cx-actions > p,
.cx-badges > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: inherit;
  margin: 0;
}

.cx-tiles > p {
  display: contents;
}

.cx-landing .cx-kicker {
  margin: calc(3 * var(--cx-rem)) 0 calc(0.6 * var(--cx-rem));
}

/*
 * Content blocks: callouts, tables, framed code.
 */

/* ---- callouts: tinted, a coloured bar on the left, the title in colour --- */
.cx-callout {
  --cx-callout: var(--cx-accent);
  margin: calc(1.5 * var(--cx-rem)) 0;
  padding: calc(0.75 * var(--cx-rem)) calc(1 * var(--cx-rem));
  font-size: calc(0.94 * var(--cx-rem));
  line-height: 1.7;
  color: var(--cx-text);
  background: color-mix(in srgb, var(--cx-callout) 8%, var(--cx-bg-raised));
  border: 1px solid var(--cx-border);
  border-left: 3px solid var(--cx-callout);
  border-radius: var(--cx-radius);
}

.cx-callout > :first-child {
  margin-top: 0;
}

.cx-callout > :last-child {
  margin-bottom: 0;
}

.cx-callout__title {
  display: flex;
  align-items: center;
  gap: calc(0.45 * var(--cx-rem));
  margin: 0 0 calc(0.25 * var(--cx-rem));
  font-weight: 600;
  color: var(--cx-callout);
}

.cx-callout__title svg,
.cx-callout__title .cx-icon {
  width: 18px;
  height: 18px;
}

.cx-callout--ok {
  --cx-callout: var(--cx-ok);
}

.cx-callout--warn {
  --cx-callout: var(--cx-warn);
}

.cx-callout--danger {
  --cx-callout: var(--cx-danger);
}

.cx-callout--quiet {
  --cx-callout: var(--cx-text-dim);
}

/* ---- tables: raised, rounded, small capitals on a sunken head ----------- */
.cx-table-wrap {
  max-width: 100%;
  margin: calc(1.25 * var(--cx-rem)) 0;
  overflow-x: auto;
  border-radius: var(--cx-radius);
}

.cx-table-wrap .cx-table {
  margin: 0;
}

.cx-table {
  width: 100%;
  margin: calc(1.25 * var(--cx-rem)) 0;
  font-size: calc(0.85 * var(--cx-rem));
  line-height: 1.6;
  color: var(--cx-text);
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
  border-collapse: separate;
  border-spacing: 0;
}

.cx-table th {
  padding: 8px 11px;
  font: 600 var(--cx-label) / 1.4 var(--cx-sans);
  letter-spacing: 0.1em;
  text-align: start;
  text-transform: uppercase;
  color: var(--cx-text-dim);
  background: var(--cx-bg-sunken);
  border-bottom: 1px solid var(--cx-border);
}

.cx-table thead th:first-child {
  border-top-left-radius: var(--cx-radius);
}

.cx-table thead th:last-child {
  border-top-right-radius: var(--cx-radius);
}

.cx-table td {
  padding: 7px 11px;
  vertical-align: top;
  border-bottom: 1px solid var(--cx-border);
}

.cx-table tbody tr:last-child td {
  border-bottom: 0;
}

.cx-table tbody tr:hover {
  background: color-mix(in srgb, var(--cx-bg-sunken) 70%, transparent);
}

.cx-table td:first-child code {
  white-space: nowrap;
}

.cx-table--numeric td:not(:first-child) {
  font-family: var(--cx-mono);
  font-variant-numeric: slashed-zero tabular-nums;
  text-align: end;
}

/* ---- framed code; a shell block gets a terminal bar -------------------- */
.cx-code {
  position: relative;
  margin: calc(1 * var(--cx-rem)) 0;
  overflow: hidden;
  color: var(--cx-code-fg);
  background: var(--cx-code-bg);
  border: 1px solid var(--cx-border);
  border-radius: 8px;
  box-shadow: var(--cx-shadow-1);
}

.cx-code pre {
  margin: 0;
  padding: 12px 16px;
  overflow-x: auto;
  font: 400 var(--cx-step-0) / 1.65 var(--cx-mono);
  font-variant-ligatures: none;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.cx-code pre code {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

.cx-code__title {
  display: block;
  padding: 6px 16px;
  font: 500 calc(0.81 * var(--cx-rem)) / 1.5 var(--cx-sans);
  color: var(--cx-text-dim);
  border-bottom: 1px solid var(--cx-border);
}

.cx-code--terminal {
  padding-top: 34px;
}

.cx-code--terminal::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 34px;
  content: '';
  border-bottom: 1px solid color-mix(in srgb, var(--cx-border) 55%, transparent);
}

.cx-code--terminal::after {
  position: absolute;
  top: 12.5px;
  left: 16px;
  width: 34px;
  height: 9px;
  content: '';
  background-color: var(--cx-code-dots);
  -webkit-mask: var(--cx-terminal-dots) left center / contain no-repeat;
  mask: var(--cx-terminal-dots) left center / contain no-repeat;
}

/* The copy button: shown on hover, in the title bar of a terminal. */
.cx-code__copy {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--cx-text-faint);
  cursor: pointer;
  background: var(--cx-code-bg);
  border: 1px solid var(--cx-border);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 150ms;
}

.cx-code:hover .cx-code__copy,
.cx-code__copy:focus-visible {
  opacity: 1;
}

.cx-code__copy:hover {
  color: var(--cx-text);
  border-color: var(--cx-border-strong);
}

.cx-code__copy svg {
  width: 15px;
  height: 15px;
}

.cx-code__copy.is-done {
  color: var(--cx-ok);
}

/* Syntax colours, for a highlighter that writes these classes. */
.cx-code .c,
.cx-hl-comment {
  color: var(--cx-hl-comment);
}

.cx-code .k,
.cx-hl-keyword {
  color: var(--cx-hl-keyword);
}

.cx-code .s,
.cx-hl-string {
  color: var(--cx-hl-string);
}

.cx-code .f,
.cx-hl-function {
  color: var(--cx-hl-function);
}

.cx-code .n,
.cx-hl-number {
  color: var(--cx-hl-number);
}

.cx-code .p,
.cx-hl-punctuation {
  color: var(--cx-hl-punctuation);
}

/*
 * A site's furniture: the header, the previous/next cards and the build line.
 *
 * The header is chromosomix's toolbar: 53px on the raised surface with a
 * hairline under it, solid rather than frosted. The mark, the name, a small
 * accented "docs" and the version on the left; the search well in the middle;
 * bordered buttons on the right.
 */

.cx-header {
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--cx-header-h);
  padding: 0 16px;
  color: var(--cx-text);
  background-color: var(--cx-bg-raised);
  border-bottom: 1px solid var(--cx-border);
}

.cx-header__brand,
.cx-header__actions {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
}

.cx-header__brand {
  gap: 10px;
}

.cx-header__actions {
  justify-content: flex-end;
  gap: 6px;
}

.cx-header__search {
  flex: 0 1 352px;
  min-width: 0;
}

.cx-header__title,
a.cx-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font: 650 var(--cx-step-1) / 1.2 var(--cx-sans);
  letter-spacing: -0.015em;
  color: var(--cx-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms;
}

a.cx-header__title:hover {
  color: var(--cx-accent);
}

.cx-header__mark,
.cx-header__title img,
.cx-header__title svg {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 0.22em;
}

/* "docs", in the small accented capitals, beside the name. */
.cx-header__kicker {
  font: 600 var(--cx-label) / 1.2 var(--cx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cx-accent);
}

.cx-header__version {
  padding: 4px 7px;
  font: 400 var(--cx-step--2) / calc(1 * var(--cx-rem)) var(--cx-mono);
  color: var(--cx-text-dim);
  white-space: nowrap;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius);
}

select.cx-header__version {
  max-width: calc(11 * var(--cx-rem));
  padding: calc(0.3 * var(--cx-rem)) calc(0.4 * var(--cx-rem));
  cursor: pointer;
}

select.cx-header__version:hover {
  color: var(--cx-text);
  border-color: var(--cx-accent);
}

.cx-header__menu {
  display: none;
}

@media (max-width: 60rem) {
  .cx-header .cx-header__kicker,
  .cx-header .cx-header__version,
  .cx-header .cx-header__search,
  .cx-header .cx-header__wide {
    display: none;
  }

  .cx-header {
    gap: 12px;
  }

  .cx-header__brand {
    flex: 1 1 auto;
  }

  .cx-header__actions {
    flex: none;
  }

  .cx-header__menu {
    display: inline-flex;
  }

  /* No sidebar on the page, no drawer to open */
  body:not(:has(.cx-sidebar)) .cx-header__menu {
    display: none;
  }
}

/* ---- the foot of a page: previous / next cards, then the build line ----- */
.cx-page-footer {
  margin-top: 56px;
}

.cx-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cx-pagination[hidden] {
  display: none;
}

.cx-pagination__link,
a.cx-pagination__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  color: var(--cx-text-dim);
  text-decoration: none;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
  transition:
    border-color 120ms,
    box-shadow 120ms;
}

a.cx-pagination__link:hover,
a.cx-pagination__link:focus {
  color: var(--cx-text-dim);
  border-color: var(--cx-border-strong);
  box-shadow: var(--cx-shadow-2);
}

.cx-pagination__link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

.cx-pagination__link svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
}

.cx-pagination__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cx-pagination__direction {
  font-size: var(--cx-step--1);
  line-height: 1.4;
  color: var(--cx-text-faint);
}

.cx-pagination__title {
  overflow: hidden;
  font-size: calc(1.06 * var(--cx-rem));
  font-weight: 600;
  line-height: 1.35;
  color: var(--cx-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-build {
  margin: 28px 0 0;
  font-size: var(--cx-step--1);
  line-height: 1.6;
  color: var(--cx-text-faint);
}

.cx-build a {
  color: inherit;
}

/* ---- the app's status bar: one line of quiet readouts ------------------- */
.cx-statusbar {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(1.2 * var(--cx-rem));
  padding: calc(0.3 * var(--cx-rem)) calc(1 * var(--cx-rem));
  overflow: hidden;
  font-size: var(--cx-step--1);
  color: var(--cx-text-faint);
  background: var(--cx-bg-raised);
  border-top: 1px solid var(--cx-border);
}

.cx-status-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: calc(0.35 * var(--cx-rem));
  white-space: nowrap;
}

.cx-status-item__label {
  font-size: var(--cx-step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cx-status-item__value {
  font-family: var(--cx-mono);
  font-variant-numeric: slashed-zero tabular-nums;
  color: var(--cx-text-dim);
}

/* ---- tabs: words with an accent rule under the chosen one --------------- */
.cx-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  box-shadow: 0 -1px var(--cx-border) inset;
}

.cx-tab,
button.cx-tab {
  padding: 8px 16px 7px;
  font: 400 var(--cx-step-0) / 1.4 var(--cx-sans);
  color: var(--cx-text-dim);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}

.cx-tab:hover {
  color: var(--cx-text);
}

.cx-tab[aria-selected='true'],
.cx-tab.is-active {
  color: var(--cx-text);
  border-bottom-color: var(--cx-accent);
}

.cx-tabpanel[hidden] {
  display: none;
}

/* A segmented control: two to five choices that share one frame. */
.cx-segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--cx-bg-sunken);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
}

.cx-segmented > button,
.cx-segmented > label {
  padding: calc(0.22 * var(--cx-rem)) calc(0.6 * var(--cx-rem));
  font: 400 var(--cx-step--1) / 1.2 var(--cx-sans);
  color: var(--cx-text-dim);
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.cx-segmented > [aria-pressed='true'],
.cx-segmented > .is-active,
.cx-segmented > :has(input:checked) {
  color: var(--cx-accent);
  background: var(--cx-bg-raised);
  border-color: var(--cx-border);
  box-shadow: var(--cx-shadow-1);
}

.cx-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---- a note in the corner, with an optional progress bar ---------------- */
.cx-toast {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: calc(0.5 * var(--cx-rem));
  width: calc(24 * var(--cx-rem));
  max-width: calc(100vw - calc(2 * var(--cx-rem)));
  padding: calc(0.55 * var(--cx-rem)) calc(0.6 * var(--cx-rem)) calc(0.6 * var(--cx-rem));
  font-size: var(--cx-step--1);
  color: var(--cx-text);
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-2);
}

.cx-toast__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(0.35 * var(--cx-rem));
  min-width: 0;
}

.cx-toasts {
  position: fixed;
  right: calc(1 * var(--cx-rem));
  bottom: calc(1 * var(--cx-rem));
  z-index: 50;
  display: grid;
  gap: calc(0.5 * var(--cx-rem));
}

.cx-progress {
  height: calc(0.3 * var(--cx-rem));
  overflow: hidden;
  background: var(--cx-bg-sunken);
  border-radius: 999px;
}

.cx-progress__fill {
  height: 100%;
  background: var(--cx-accent);
  border-radius: inherit;
  transition: width 200ms;
}

.cx-progress--indeterminate .cx-progress__fill {
  width: 35%;
  animation: cx-progress 1.2s ease-in-out infinite;
}

@keyframes cx-progress {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(300%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-progress--indeterminate .cx-progress__fill {
    animation: none;
  }

  .cx-control,
  .cx-tile,
  .cx-card {
    transition: none;
  }
}

/*
 * Data and state: from chromomap (js2264/chromomap, docs/ui.md §4, specs/63).
 *
 * Each colour means one thing. `--cx-family-*` is the kind of data a thing
 * carries (reads, alignments, a genome, a track, peaks…); `--cx-state-*` is
 * what a job is doing. Neither is ever the only cue: a family dot is drawn
 * beside its name, and its shape says one (●) or many (◆); a state has its
 * ring's shape and its word.
 */

/* An element says its family once, `data-family="reads"`, and its rules read
   `var(--cx-family)`. `any` is no family: the text colour, drawn hollow. */
[data-family='reads'] {
  --cx-family: var(--cx-family-reads);
}

[data-family='alignments'] {
  --cx-family: var(--cx-family-alignments);
}

[data-family='genome'] {
  --cx-family: var(--cx-family-genome);
}

[data-family='index'] {
  --cx-family: var(--cx-family-index);
}

[data-family='fragments'] {
  --cx-family: var(--cx-family-fragments);
}

[data-family='pairs'] {
  --cx-family: var(--cx-family-pairs);
}

[data-family='track'] {
  --cx-family: var(--cx-family-track);
}

[data-family='peaks'] {
  --cx-family: var(--cx-family-peaks);
}

[data-family='value'] {
  --cx-family: var(--cx-family-value);
}

[data-family='report'] {
  --cx-family: var(--cx-family-report);
}

[data-family='any'] {
  --cx-family: var(--cx-text);
}

/* ---- a family dot: ● one item, ◆ a collection, ○ any family ------------- */
.cx-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  vertical-align: 0.05em;
  background: var(--cx-family, var(--cx-text-dim));
  border-radius: 50%;
}

.cx-dot--many {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.cx-dot--any,
[data-family='any'].cx-dot,
[data-family='any'] > .cx-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cx-family, var(--cx-text));
}

/* A family named in words, its dot before it. */
.cx-family {
  display: inline-flex;
  align-items: center;
  gap: calc(0.35 * var(--cx-rem));
  font-size: var(--cx-step--1);
  white-space: nowrap;
}

/* ---- a state: a ring, and a chip with the word ------------------------- */
[data-state='running'] {
  --cx-state: var(--cx-state-running);
}

[data-state='done'] {
  --cx-state: var(--cx-state-done);
}

[data-state='cached'] {
  --cx-state: var(--cx-state-cached);
}

[data-state='stale'] {
  --cx-state: var(--cx-state-stale);
}

[data-state='failed'] {
  --cx-state: var(--cx-state-failed);
}

[data-state='queued'] {
  --cx-state: var(--cx-state-queued);
}

[data-state='never'] {
  --cx-state: var(--cx-state-never);
}

[data-state='bypassed'] {
  --cx-state: var(--cx-state-bypassed);
}

/* The ring says the state by its shape as well as its colour: done is a
   filled disc, cached a hollow ring, stale a dashed one, running an open arc
   that turns, failed a ring with a bar through it, queued a dotted ring. */
.cx-ring {
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  vertical-align: -0.1em;
  border: 2px solid var(--cx-state, var(--cx-text-dim));
  border-radius: 50%;
}

.cx-ring[data-state='done'] {
  background: var(--cx-state);
}

.cx-ring[data-state='stale'] {
  border-style: dashed;
}

.cx-ring[data-state='queued'],
.cx-ring[data-state='never'] {
  border-style: dotted;
}

.cx-ring[data-state='bypassed'] {
  border-width: 1.5px;
  opacity: 0.8;
}

.cx-ring[data-state='failed']::after {
  position: absolute;
  top: 50%;
  left: -2px;
  width: 12px;
  height: 2px;
  content: '';
  background: var(--cx-state);
  transform: translateY(-50%) rotate(-45deg);
}

.cx-ring[data-state='running'] {
  border-right-color: transparent;
  animation: cx-spin 0.9s linear infinite;
}

@keyframes cx-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-ring[data-state='running'] {
    animation: none;
  }
}

/* The chip: the state's word in a pill. Running's violet is a colour for
   graphics (3:1), short of the 4.5:1 a small word needs, so the running chip
   keeps it for its border and writes its word in the text colour. */
.cx-state {
  display: inline-flex;
  align-items: center;
  gap: calc(0.35 * var(--cx-rem));
  padding: calc(0.05 * var(--cx-rem)) calc(0.45 * var(--cx-rem)) calc(0.05 * var(--cx-rem)) calc(0.35 * var(--cx-rem));
  font: 500 var(--cx-step--2) / 1.5 var(--cx-sans);
  color: var(--cx-state, var(--cx-text-dim));
  white-space: nowrap;
  border: 1px solid var(--cx-state, var(--cx-border));
  border-radius: 999px;
}

.cx-state[data-state='running'],
.cx-state[data-state='queued'],
.cx-state[data-state='never'],
.cx-state[data-state='bypassed'] {
  color: var(--cx-text-dim);
}

.cx-state[data-state='running'] {
  color: var(--cx-text);
}

.cx-state .cx-ring {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

/* ---- numbers: never broken from their unit ----------------------------- */
/* Pair with the formatter (dist/js/format.mjs), which joins a number and its
   unit with a no-break space; this keeps a whole readout on one line and its
   digits in columns. */
.cx-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- a focus ring for a box that cannot draw its own ------------------- */
/* A box that fades its edges with `mask-image` hides its own outline; its
   wrapper draws the ring while the keyboard is inside. */
.cx-focus-ring {
  min-width: 0;
  border-radius: var(--cx-radius);
}

.cx-focus-ring:has(> :focus-visible) {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

.cx-focus-ring > :focus-visible {
  outline: none;
}

/* ---- a resize edge the keyboard can move ------------------------------- */
/* WCAG 2.5.7: every drag has a keyboard alternative. A splitter is a
   focusable `role="separator"` the arrow keys move; this is its look. */
.cx-splitter {
  position: relative;
  flex: none;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}

.cx-splitter[aria-orientation='horizontal'] {
  width: auto;
  height: 6px;
  cursor: row-resize;
}

.cx-splitter::after {
  position: absolute;
  inset: 0 2px;
  content: '';
  background: var(--cx-border);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 120ms;
}

.cx-splitter[aria-orientation='horizontal']::after {
  inset: 2px 0;
}

.cx-splitter:hover::after,
.cx-splitter:focus-visible::after,
.cx-splitter.is-dragging::after {
  background: var(--cx-accent);
  opacity: 1;
}

.cx-splitter:focus-visible {
  outline: none;
}

/*
 * A whole page with no framework under it: plain HTML, Hugo, an app's own
 * about page. Element defaults live here, scoped under `.cx-page` (on <body>)
 * and `.cx-prose` (on the column of text), so nothing leaks into a host that
 * did not ask for it.
 *
 * Layout: a sticky `.cx-header`, then `.cx-layout` — the navigation sidebar,
 * the content column and the "On this page" list — which folds to one column,
 * the sidebar becoming a drawer, on narrow screens.
 */

html:has(> body.cx-page) {
  color-scheme: light dark;
  background-color: var(--cx-bg);
  scroll-padding-top: calc(var(--cx-header-h) + 24px);
}

body.cx-page {
  margin: 0;
  font: 400 var(--cx-prose-size) / var(--cx-prose-line) var(--cx-sans);
  color: var(--cx-text);
  background-color: var(--cx-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

.cx-page ::selection {
  background: color-mix(in srgb, var(--cx-accent) 26%, transparent);
}

.cx-page *,
.cx-page *::before,
.cx-page *::after {
  box-sizing: border-box;
}

/* ---- the three columns ------------------------------------------------- */
.cx-layout {
  display: grid;
  grid-template-columns: var(--cx-sidebar-w) minmax(0, 1fr) minmax(0, var(--cx-toc-w));
  min-height: calc(100vh - var(--cx-header-h));
}

.cx-layout--no-toc {
  grid-template-columns: var(--cx-sidebar-w) minmax(0, 1fr);
}

.cx-layout--wide {
  grid-template-columns: minmax(0, 1fr);
}

.cx-sidebar {
  position: sticky;
  top: var(--cx-header-h);
  align-self: start;
  height: calc(100vh - var(--cx-header-h));
  padding: 22px 16px 32px 18px;
  overflow-y: auto;
  scrollbar-color: var(--cx-border) transparent;
}

/* The sidebar's band is painted on the layout, which is as tall as the page,
   so it does not stop at the window's height on a long page. */
.cx-layout:has(> .cx-sidebar) {
  background-image: linear-gradient(
    to right,
    var(--cx-bg-raised) calc(var(--cx-sidebar-w) - 1px),
    var(--cx-border) calc(var(--cx-sidebar-w) - 1px),
    var(--cx-border) var(--cx-sidebar-w),
    transparent var(--cx-sidebar-w)
  );
}

.cx-main {
  min-width: 0;
}

.cx-content {
  max-width: calc(var(--cx-content-w) + 2 * var(--cx-pad-x));
  margin: 0 auto;
  padding: 32px var(--cx-pad-x) 48px;
}

.cx-toc {
  position: sticky;
  top: var(--cx-header-h);
  align-self: start;
  max-height: calc(100vh - var(--cx-header-h));
  padding: 30px 16px 32px;
  overflow-y: auto;
}

/* ---- the navigation: groups under kickers, items on a hairline --------- */
.cx-nav {
  font-size: calc(0.86 * var(--cx-rem));
  line-height: 1.4;
}

.cx-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-nav a {
  display: block;
  padding: 5px 8px 5px 4px;
  color: var(--cx-text-dim);
  text-decoration: none;
  transition: color 120ms;
}

.cx-nav a:hover {
  color: var(--cx-text);
}

.cx-nav a[aria-current] {
  font-weight: 600;
  color: var(--cx-text);
}

.cx-nav__group {
  margin-top: 14px;
}

.cx-nav__group:first-child {
  margin-top: 0;
}

.cx-nav__group > details > summary,
.cx-nav__label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 4px;
  font: 600 var(--cx-label) / 1.2 var(--cx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cx-accent);
  list-style: none;
  cursor: pointer;
}

.cx-nav__group > details > summary::-webkit-details-marker {
  display: none;
}

.cx-nav__group > details > summary::before {
  flex: none;
  order: -1;
  width: 13px;
  height: 13px;
  content: '';
  background-color: var(--cx-text-dim);
  -webkit-mask: var(--cx-icon-chevron) center / contain no-repeat;
  mask: var(--cx-icon-chevron) center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 150ms;
}

.cx-nav__group > details[open] > summary::before {
  transform: none;
}

.cx-nav__group ul {
  margin: 2px 0 2px 10px;
  border-left: 1px solid var(--cx-border);
}

.cx-nav__group ul a {
  margin-left: -1px;
  padding-left: 18px;
  border-left: 1px solid transparent;
}

.cx-nav__group ul a[aria-current] {
  border-left-color: var(--cx-accent);
}

/* ---- "On this page" ----------------------------------------------------- */
.cx-toc__title {
  margin: 0 0 12px;
  font-size: var(--cx-step-1);
  font-weight: 600;
  color: var(--cx-text);
}

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

.cx-toc > ul,
.cx-toc nav > ul {
  border-left: 1px solid var(--cx-border);
}

.cx-toc a {
  display: block;
  margin-left: -1px;
  padding: 3px 0 3px 14px;
  font-size: calc(0.81 * var(--cx-rem));
  line-height: 1.4;
  color: var(--cx-text-dim);
  text-decoration: none;
  border-left: 1px solid transparent;
}

.cx-toc ul ul a {
  padding-left: 26px;
}

.cx-toc a:hover {
  color: var(--cx-text);
}

.cx-toc a.is-active {
  color: var(--cx-accent);
  border-left-color: var(--cx-accent);
}

/* ---- narrow screens: no TOC, then the sidebar as a drawer --------------- */
@media (max-width: 76rem) {
  .cx-layout {
    grid-template-columns: var(--cx-sidebar-w) minmax(0, 1fr);
  }

  .cx-toc {
    display: none;
  }
}

.cx-drawer-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---- no header (`.cx-page--no-header` on <body>): the sidebar is the chrome,
   with the brand at its top and the links and the theme toggle at its foot. */
.cx-page--no-header {
  --cx-header-h: 0px;
}

html:has(> body.cx-page--no-header) {
  scroll-padding-top: 24px;
}

.cx-page--no-header .cx-sidebar {
  display: flex;
  flex-direction: column;
}

.cx-sidebar__brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 2px 4px;
  font-size: var(--cx-step-1);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cx-text);
  text-decoration: none;
}

.cx-sidebar__brand img {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.cx-sidebar__kicker {
  margin: 8px 0 0;
  padding: 0 4px;
  font: 600 var(--cx-label) / 1.45 var(--cx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cx-accent);
}

.cx-page--no-header .cx-nav {
  margin-top: 26px;
}

.cx-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding: 24px 4px 0;
}

/* Square and small, so five fit across a thin sidebar */
.cx-sidebar__actions .cx-control--icon {
  width: 28px;
  height: 28px;
  padding: 0;
}

/* The drawer's button, where there is no header to hold it */
.cx-drawer-button {
  display: none;
}

@media (max-width: 60rem) {
  .cx-layout,
  .cx-layout--no-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .cx-layout:has(> .cx-sidebar) {
    background-image: none;
  }

  .cx-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    background: var(--cx-bg-raised);
    border-right: 1px solid var(--cx-border);
    width: var(--cx-sidebar-w);
    max-width: 85vw;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 200ms;
  }

  .cx-drawer-toggle:checked ~ .cx-layout .cx-sidebar {
    transform: none;
    box-shadow: var(--cx-shadow-2);
  }

  .cx-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: none;
    background: color-mix(in srgb, var(--cx-bg-sunken) 60%, transparent);
  }

  .cx-drawer-toggle:checked ~ .cx-drawer-scrim {
    display: block;
  }

  .cx-page--no-header .cx-drawer-button {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 14;
    display: inline-flex;
    box-shadow: var(--cx-shadow-2);
  }

  body.cx-page--no-header:not(:has(.cx-sidebar)) .cx-drawer-button {
    display: none;
  }

  /* Room for the drawer's button above the title */
  .cx-page--no-header .cx-content {
    padding-top: 64px;
  }

  .cx-content {
    padding: 24px 16px 40px;
  }
}

/* ---- prose: the column of text ------------------------------------------ */
.cx-prose {
  font-size: var(--cx-prose-size);
  line-height: var(--cx-prose-line);
  color: color-mix(in srgb, var(--cx-text) 86%, var(--cx-text-dim));
}

.cx-prose :is(h1, h2, h3, h4, h5, h6):where(:not([class*='cx-'])) {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cx-text);
}

.cx-prose h1:where(:not([class*='cx-'])) {
  margin: 0 0 24px;
  font-size: var(--cx-prose-h1);
  line-height: 1.2;
}

.cx-prose h2:where(:not([class*='cx-'])) {
  margin: 44px 0 14px;
  font-size: var(--cx-prose-h2);
  line-height: 1.25;
}

.cx-prose h3:where(:not([class*='cx-'])) {
  margin: 32px 0 10px;
  font-size: var(--cx-prose-h3);
  line-height: 1.3;
}

.cx-prose h2 + h3 {
  margin-top: 16px;
}

.cx-prose h4:where(:not([class*='cx-'])) {
  margin: 26px 0 8px;
  font-size: var(--cx-prose-h4);
  line-height: 1.35;
}

.cx-prose :is(h5, h6):where(:not([class*='cx-'])) {
  margin: 22px 0 8px;
  font-size: var(--cx-prose-h5);
}

.cx-prose :is(p, ul, ol, dl, blockquote):where(:not([class*='cx-'])) {
  margin: 16px 0;
}

.cx-prose li + li {
  margin-top: 4px;
}

.cx-prose a:where(:not([class*='cx-'])) {
  color: var(--cx-accent);
  text-underline-offset: 0.2em;
}

.cx-prose a:where(:not([class*='cx-'])):hover {
  color: color-mix(in srgb, var(--cx-accent) 78%, var(--cx-text));
}

.cx-prose strong {
  font-weight: 600;
  color: var(--cx-text);
}

.cx-prose hr {
  margin: 32px 0;
  border: 0;
  border-bottom: 1px solid var(--cx-border);
}

.cx-prose blockquote {
  margin-left: 0;
  padding-left: calc(1 * var(--cx-rem));
  color: var(--cx-text-dim);
  border-left: 3px solid var(--cx-border);
}

.cx-prose img:where(:not([class*='cx-'])) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.cx-prose :not(pre) > code {
  padding: 0.05em 0.3em;
  font-family: var(--cx-mono);
  font-size: 0.85em;
  font-variant-ligatures: none;
  color: var(--cx-text);
  background-color: var(--cx-bg-sunken);
  border: 1px solid var(--cx-border);
  border-radius: 4px;
}

.cx-prose a :is(code, strong) {
  color: inherit;
}

.cx-prose kbd {
  padding: 0.16em 0.42em;
  font: 500 0.78em / 1 var(--cx-mono);
  color: var(--cx-text);
  white-space: nowrap;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* A bare <pre> gets the code frame; a terminal one opts in with a class. */
.cx-prose pre {
  margin: 16px 0;
  padding: 12px 16px;
  overflow-x: auto;
  font: 400 var(--cx-step-0) / 1.65 var(--cx-mono);
  font-variant-ligatures: none;
  color: var(--cx-code-fg);
  background: var(--cx-code-bg);
  border: 1px solid var(--cx-border);
  border-radius: 8px;
  box-shadow: var(--cx-shadow-1);
}

.cx-prose .cx-code pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cx-prose pre code {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

.cx-prose table:not([class]) {
  width: 100%;
  margin: 20px 0;
  font-size: calc(0.85 * var(--cx-rem));
  line-height: 1.6;
  background: var(--cx-bg-raised);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-1);
  border-collapse: separate;
  border-spacing: 0;
}

.cx-prose table:not([class]) th {
  padding: 8px 11px;
  font: 600 var(--cx-label) / 1.4 var(--cx-sans);
  letter-spacing: 0.1em;
  text-align: start;
  text-transform: uppercase;
  color: var(--cx-text-dim);
  background: var(--cx-bg-sunken);
  border-bottom: 1px solid var(--cx-border);
}

.cx-prose table:not([class]) thead th:first-child {
  border-top-left-radius: var(--cx-radius);
}

.cx-prose table:not([class]) thead th:last-child {
  border-top-right-radius: var(--cx-radius);
}

.cx-prose table:not([class]) td {
  padding: 7px 11px;
  vertical-align: top;
  border-bottom: 1px solid var(--cx-border);
}

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

/* A heading's anchor: a link glyph on hover rather than a pilcrow. */
.cx-prose .cx-anchor {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
  color: var(--cx-text-faint);
  background-color: currentcolor;
  opacity: 0;
  -webkit-mask: var(--cx-icon-link) center / contain no-repeat;
  mask: var(--cx-icon-link) center / contain no-repeat;
}

.cx-prose :is(h2, h3, h4):hover .cx-anchor,
.cx-prose .cx-anchor:focus {
  opacity: 1;
}

/*
 * chromokit for Hugo: Chroma's classes (`markup.highlight.noClasses = false`)
 * coloured from the tokens, in both palettes.
 */
.cx-code .highlight,
.cx-code pre.chroma {
  margin: 0;
  background: transparent;
}

.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
  color: var(--cx-hl-comment);
}

.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt {
  color: var(--cx-hl-keyword);
}

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .sd,
.chroma .s1,
.chroma .s2,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr,
.chroma .ss {
  color: var(--cx-hl-string);
}

.chroma .nf,
.chroma .fm,
.chroma .nb,
.chroma .bp {
  color: var(--cx-hl-function);
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
  color: var(--cx-hl-number);
}

.chroma .kc,
.chroma .no {
  color: var(--cx-hl-constant);
}

.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi {
  color: var(--cx-hl-variable);
}

.chroma .o,
.chroma .ow {
  color: var(--cx-hl-operator);
}

.chroma .p {
  color: var(--cx-hl-punctuation);
}

.chroma .nc,
.chroma .nd,
.chroma .nn,
.chroma .na,
.chroma .nt {
  color: var(--cx-hl-special);
}

.chroma .line,
.chroma .cl {
  display: inline;
}