/* Built by specimen/build.mjs: Capsomer's fonts, tokens, the specimen's family, base, prose and manual styles, Enarratio's chart styles in Capsomer's theme, and specimen/site.css. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/martian-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
}

/* Capsomer's tokens: the color palette (generated by tokens/palette.mjs) and every other
   scale (generated by tokens/scale.mjs), inside the cap.tokens layer. Import this once,
   before any component CSS: `import "capsomer/tokens.css"`. */
/* The one layer order. Every Capsomer rule sits in one of these layers, and an app's own
   CSS stays unlayered, so an app's rule always wins without !important (design 1.4).

   An app still on Tailwind v4 declares its own order before importing anything, so its
   utilities keep winning while screens move over:
     @layer cap, theme, base, components, utilities;
   Nested names (cap.tokens and the rest) then sort inside "cap". */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

@layer cap.tokens {
/* Generated by tokens/palette.mjs: step 9 #8c5fd2 (oklch 0.587 0.172 299.1), step 11 anchored at #4f2d7f.
   Do not edit: change the script and run `npm run tokens`. `npm run check` refuses a file
   that differs from what the script writes, and any pair below WCAG 2.2's bar. */
:root {
  --ground: #fbf9ff;
  --surface: #fdfdfe;
  --raised: #f7f6fc;
  --sunken: #e9e6ef;
  --line: #dfdce5;
  --line-strong: #918e96;
  --text: #1c1727;
  --muted: #686471;
  --dim: #696571;
  --accent: #8c5fd2;
  --accent-hover: #1d162c;
  --accent-text: #4f2d7f;
  --accent-soft: #ece5ff;
  --accent-line: #9780c3;
  --sel: #f4efff;
  --primary: #7d50c1;
  --primary-hover: #4f2d7f;
  --primary-fg: #fdfdfe;
  --on: #7d50c1;
  --on-hover: #4f2d7f;
  --ring: #8c5fd2;
  --ok: #047735;
  --ok-soft: #d6f7dc;
  --warn: #8a5f01;
  --warn-soft: #ffeaca;
  --crit: #ae453f;
  --crit-soft: #fee7e4;
  --info: #2668b6;
  --info-soft: #e2eeff;
  --nodata: #696571;
  --nodata-soft: #ebeaef;
  --accent-1: #fdfcff;
  --accent-2: #faf8fe;
  --accent-3: #f4efff;
  --accent-4: #ece5ff;
  --accent-5: #e4d9fe;
  --accent-6: #d8caf6;
  --accent-7: #c8b6ed;
  --accent-8: #b29ae3;
  --accent-9: #8c5fd2;
  --accent-10: #7d50c1;
  --accent-11: #4f2d7f;
  --accent-12: #1d162c;
  --series-1: #8c5fd2;
  --series-2: #cc4f0c;
  --series-3: #008489;
  --series-4: #749455;
  --series-5: #505ca1;
  --series-6: #046d5e;
  --series-7: #c564a1;
  --series-8: #98445b;
  --series-text-1: #000000;
  --series-text-2: #000000;
  --series-text-3: #000000;
  --series-text-4: #1c1727;
  --series-text-5: #fdfdfe;
  --series-text-6: #fdfdfe;
  --series-text-7: #1c1727;
  --series-text-8: #fdfdfe;
  --ramp-1: #e4dcf8;
  --ramp-2: #c7b6ec;
  --ramp-3: #a98dde;
  --ramp-4: #865cc8;
  --ramp-5: #5d3497;
  --ramp-text-1: #1c1727;
  --ramp-text-2: #1c1727;
  --ramp-text-3: #1c1727;
  --ramp-text-4: #fdfdfe;
  --ramp-text-5: #fdfdfe;
  --shadow-xs: 0 1px 2px 0 rgba(28, 23, 39, 0.05);
  --shadow-s: 0 1px 3px 0 rgba(28, 23, 39, 0.1), 0 1px 2px -1px rgba(28, 23, 39, 0.1);
  --shadow-m: 0 4px 6px -1px rgba(28, 23, 39, 0.1), 0 2px 4px -2px rgba(28, 23, 39, 0.1);
  --shadow-l: 0 10px 15px -3px rgba(28, 23, 39, 0.1), 0 4px 6px -4px rgba(28, 23, 39, 0.1);
  --ring-soft: rgba(140, 95, 210, 0.5);
  --shadow-ring: 0 0 0 var(--ring-width) rgba(140, 95, 210, 0.5);
  --shadow: var(--shadow-l);
  --scrim: rgba(28, 23, 39, 0.28);
  color-scheme: light;
  --ui: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0e0c12;
    --surface: #18161c;
    --raised: #211f25;
    --sunken: #09070c;
    --line: #343238;
    --line-strong: #6b6970;
    --text: #efedf3;
    --muted: #96949e;
    --dim: #898790;
    --accent: #8c5fd2;
    --accent-hover: #ede8f7;
    --accent-text: #c6b1f2;
    --accent-soft: #2c243c;
    --accent-line: #745e9d;
    --sel: #211c2c;
    --primary: #9b6ee3;
    --primary-hover: #c6b1f2;
    --primary-fg: #0e0c12;
    --on: #9b6ee3;
    --on-hover: #c6b1f2;
    --ring: #8c5fd2;
    --ok: #4aa462;
    --ok-soft: #15301b;
    --warn: #bc861a;
    --warn-soft: #362508;
    --crit: #d97269;
    --crit-soft: #3e1e1c;
    --info: #5793df;
    --info-soft: #172a41;
    --nodata: #898790;
    --nodata-soft: #272629;
    --accent-1: #0e0c11;
    --accent-2: #151219;
    --accent-3: #211c2c;
    --accent-4: #2c243c;
    --accent-5: #372c4b;
    --accent-6: #44385c;
    --accent-7: #584976;
    --accent-8: #745d9f;
    --accent-9: #8c5fd2;
    --accent-10: #9b6ee3;
    --accent-11: #c6b1f2;
    --accent-12: #ede8f7;
    --series-1: #8c5fd2;
    --series-2: #cc4f0c;
    --series-3: #008489;
    --series-4: #a3c584;
    --series-5: #a4b5ff;
    --series-6: #65cbb6;
    --series-7: #c3629f;
    --series-8: #e4889e;
    --series-text-1: #000000;
    --series-text-2: #000000;
    --series-text-3: #000000;
    --series-text-4: #18161c;
    --series-text-5: #18161c;
    --series-text-6: #18161c;
    --series-text-7: #18161c;
    --series-text-8: #18161c;
    --ramp-1: #33254b;
    --ramp-2: #553e7d;
    --ramp-3: #7b59b2;
    --ramp-4: #a582e5;
    --ramp-5: #cdb5ff;
    --ramp-text-1: #efedf3;
    --ramp-text-2: #efedf3;
    --ramp-text-3: #efedf3;
    --ramp-text-4: #18161c;
    --ramp-text-5: #18161c;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
    --shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
    --ring-soft: rgba(140, 95, 210, 0.5);
    --shadow-ring: 0 0 0 var(--ring-width) rgba(140, 95, 210, 0.5);
    --shadow: var(--shadow-l);
    --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0e0c12;
  --surface: #18161c;
  --raised: #211f25;
  --sunken: #09070c;
  --line: #343238;
  --line-strong: #6b6970;
  --text: #efedf3;
  --muted: #96949e;
  --dim: #898790;
  --accent: #8c5fd2;
  --accent-hover: #ede8f7;
  --accent-text: #c6b1f2;
  --accent-soft: #2c243c;
  --accent-line: #745e9d;
  --sel: #211c2c;
  --primary: #9b6ee3;
  --primary-hover: #c6b1f2;
  --primary-fg: #0e0c12;
  --on: #9b6ee3;
  --on-hover: #c6b1f2;
  --ring: #8c5fd2;
  --ok: #4aa462;
  --ok-soft: #15301b;
  --warn: #bc861a;
  --warn-soft: #362508;
  --crit: #d97269;
  --crit-soft: #3e1e1c;
  --info: #5793df;
  --info-soft: #172a41;
  --nodata: #898790;
  --nodata-soft: #272629;
  --accent-1: #0e0c11;
  --accent-2: #151219;
  --accent-3: #211c2c;
  --accent-4: #2c243c;
  --accent-5: #372c4b;
  --accent-6: #44385c;
  --accent-7: #584976;
  --accent-8: #745d9f;
  --accent-9: #8c5fd2;
  --accent-10: #9b6ee3;
  --accent-11: #c6b1f2;
  --accent-12: #ede8f7;
  --series-1: #8c5fd2;
  --series-2: #cc4f0c;
  --series-3: #008489;
  --series-4: #a3c584;
  --series-5: #a4b5ff;
  --series-6: #65cbb6;
  --series-7: #c3629f;
  --series-8: #e4889e;
  --series-text-1: #000000;
  --series-text-2: #000000;
  --series-text-3: #000000;
  --series-text-4: #18161c;
  --series-text-5: #18161c;
  --series-text-6: #18161c;
  --series-text-7: #18161c;
  --series-text-8: #18161c;
  --ramp-1: #33254b;
  --ramp-2: #553e7d;
  --ramp-3: #7b59b2;
  --ramp-4: #a582e5;
  --ramp-5: #cdb5ff;
  --ramp-text-1: #efedf3;
  --ramp-text-2: #efedf3;
  --ramp-text-3: #efedf3;
  --ramp-text-4: #18161c;
  --ramp-text-5: #18161c;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
  --ring-soft: rgba(140, 95, 210, 0.5);
  --shadow-ring: 0 0 0 var(--ring-width) rgba(140, 95, 210, 0.5);
  --shadow: var(--shadow-l);
  --scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

}
@layer cap.tokens {
/* Generated by tokens/scale.mjs (space, radius, type, density, motion, layers, focus, layout). Do not edit: change the script and run
   `npm run tokens`. `npm run check` refuses a file that differs from what it writes. */
:root {
  /* space */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  /* radius */
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;
  /* type */
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-prose: clamp(17px, 1rem + 0.25vw, 19px);
  --fs-prose-h2: clamp(22px, 1.2rem + 1.2vw, 30px);
  --fs-input-coarse: 16px;
  --prose: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --display: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* motion */
  --dur-fast: 100ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.005 1%, 0.028 2.5%, 0.117 5.5%, 0.572 16%, 0.77 21.5%, 0.839 24%, 0.906 27%, 0.956 30%, 0.992 33%, 1.012 35.5%, 1.026 38%, 1.035 41%, 1.038 44.5%, 1.035 49.5%, 1.012 63.5%, 1.003 72.5%, 0.999 84.5%, 1);
  /* layer */
  --z-base: 0;
  --z-sticky: 20;
  --z-tabbar: 30;
  --z-overlay: 40;
  --z-message: 70;
  --z-tip: 80;
  /* focus */
  --focus-width: 2px;
  --focus-offset: 2px;
  --ring-width: 3px;
  /* layout */
  --measure: 66ch;
  --rail-w: 208px;
  --rail-w-collapsed: 56px;
  --top-h: 44px;
  --header-h: 3.5rem;
  /* touch */
  --link-rule: 0px;
  --icon-radius: 6px;
  --icon-border: 0px;
  --theme-turn: 0deg;
  --arrow-rest: 1;
  --arrow-shift: 0px;
  --card-lift: 0px;
  --card-edge: 0;
  --card-shadow: none;
  --btn-sweep: 0;
  --control-h-coarse: 44px;
  --face: var(--ui);
}
/* Density: compact is the default, on the root or on any element; comfortable on any element
   changes its subtree. Literals in every block, so a wrapper never inherits a stale value. */
:root,
[data-density="compact"] {
  --control: 34px;
  --control-h: 34px;
  --target: 24px;
  --pad-x: 12px;
  --pad-y: 7px;
  --pad-card: 20px;
  --fs-label: 11px;
  --fs-detail: 13px;
  --fs-body: 14px;
  --fs-lead: 15px;
  --gap: 14px;
  --row-h: 40px;
  --text-size: var(--fs-body);
  --leading: 1.5;
}
[data-density="comfortable"] {
  --control: 36px;
  --control-h: 36px;
  --target: 28px;
  --pad-x: 12px;
  --pad-y: 8px;
  --pad-card: 24px;
  --fs-label: 12px;
  --fs-detail: 13px;
  --fs-body: 14px;
  --fs-lead: 16px;
  --gap: 16px;
  --row-h: 44px;
  --text-size: var(--fs-body);
  --leading: 1.5;
}
[data-context="prose"] {
  --text-size: var(--fs-prose);
  --leading: 1.6;
  --gap: var(--space-6);
  --control: 40px;
  --face: var(--prose);
}
@media (pointer: coarse) {
  :root,
  [data-density] {
    --control: var(--control-h-coarse);
    --control-h: var(--control-h-coarse);
    --target: 44px;
    --row-h: 44px;
  }
  [data-context="prose"] {
    --control: var(--control-h-coarse);
  }
}

}
/* Every family's one color, so a page can mark the others (tokens/family-marks.css). */
@layer cap.tokens {
/* Generated by tokens/palette.mjs: each family's color (its --on), on every page.
   Do not edit: change the script and run `npm run tokens`. */
:root {
  --family-purple: #7d50c1;
  --family-fox: #b64404;
  --family-teal: #077478;
  --family-amber: #b68508;
  --family-navy: #2a68cf;
  --family-forest: #028445;
  --family-magenta: #a53d96;
  --family-cerulean: #0478a0;
  --family-olive: #687603;
  --family-rose: #b83466;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --family-purple: #9b6ee3;
    --family-fox: #dd5f25;
    --family-teal: #249398;
    --family-amber: #f0b429;
    --family-navy: #4888f1;
    --family-forest: #28a55e;
    --family-magenta: #c75db6;
    --family-cerulean: #2797c4;
    --family-olive: #859522;
    --family-rose: #db5583;
  }
}
:root[data-theme="dark"],
[data-cap-theme="dark"] {
  --family-purple: #9b6ee3;
  --family-fox: #dd5f25;
  --family-teal: #249398;
  --family-amber: #f0b429;
  --family-navy: #4888f1;
  --family-forest: #28a55e;
  --family-magenta: #c75db6;
  --family-cerulean: #2797c4;
  --family-olive: #859522;
  --family-rose: #db5583;
}

}
/* Enarratio's custom properties, mapped onto the tokens above (css/enarratio.css). */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

/* Enarratio's charts in the family's look. Enarratio (https://github.com/DrDustinEdwards/enarratio)
   reads every color, font, size and timing from --enarratio-* custom properties and never
   imports Capsomer; this section maps each onto a Capsomer token, so an app that loads
   Capsomer's tokens gets charts in the family's look, a change to a token reaches every chart,
   and both themes, every family and both densities follow with no chart code. Load it with
   `capsomer/tokens.css` (which imports it) and Enarratio's `enarratio/base.css`, or draw the
   charts with `stylesheet(capsomerTheme)` from `capsomer/enarratio-theme` instead; the two give
   the same look (the theme's values are generated from the same tokens, tokens/palette.mjs).
   The selector list re-resolves the chain on a wrapper that sets data-family or data-density,
   because a custom property that names another is substituted where it is declared. */
@layer cap.tokens {
  :root,
  [data-family],
  [data-density] {
    /* colors */
    --enarratio-background: var(--surface);
    --enarratio-text: var(--text);
    --enarratio-text-muted: var(--muted);
    --enarratio-grid: var(--line);
    --enarratio-focus: var(--ring);

    /* the eight series, then the label that reads best on each */
    --enarratio-series-1: var(--series-1);
    --enarratio-series-2: var(--series-2);
    --enarratio-series-3: var(--series-3);
    --enarratio-series-4: var(--series-4);
    --enarratio-series-5: var(--series-5);
    --enarratio-series-6: var(--series-6);
    --enarratio-series-7: var(--series-7);
    --enarratio-series-8: var(--series-8);
    --enarratio-series-text-1: var(--series-text-1);
    --enarratio-series-text-2: var(--series-text-2);
    --enarratio-series-text-3: var(--series-text-3);
    --enarratio-series-text-4: var(--series-text-4);
    --enarratio-series-text-5: var(--series-text-5);
    --enarratio-series-text-6: var(--series-text-6);
    --enarratio-series-text-7: var(--series-text-7);
    --enarratio-series-text-8: var(--series-text-8);

    /* the five-step ramp, least to most, in the family's hue */
    --enarratio-sequential-1: var(--ramp-1);
    --enarratio-sequential-2: var(--ramp-2);
    --enarratio-sequential-3: var(--ramp-3);
    --enarratio-sequential-4: var(--ramp-4);
    --enarratio-sequential-5: var(--ramp-5);
    --enarratio-sequential-text-1: var(--ramp-text-1);
    --enarratio-sequential-text-2: var(--ramp-text-2);
    --enarratio-sequential-text-3: var(--ramp-text-3);
    --enarratio-sequential-text-4: var(--ramp-text-4);
    --enarratio-sequential-text-5: var(--ramp-text-5);

    /* status: the same colors as the status component, never the series */
    --enarratio-status-good: var(--ok);
    --enarratio-status-warning: var(--warn);
    --enarratio-status-bad: var(--crit);
    --enarratio-status-unknown: var(--nodata);

    /* fonts: figures are tabular in the interface face */
    --enarratio-font: var(--ui);
    --enarratio-font-numeric: var(--ui);

    /* sizes follow density */
    --enarratio-font-size: var(--text-size);
    --enarratio-font-size-mark: var(--fs-detail);
    --enarratio-font-size-small: var(--fs-detail);
    --enarratio-font-size-tooltip: var(--fs-body);
    --enarratio-line-height-tooltip: var(--leading);

    /* spacing and shape */
    --enarratio-space: var(--space-3);
    --enarratio-gap: var(--space-5);
    --enarratio-gap-row: var(--space-2);
    --enarratio-gap-inline: calc(var(--space-2) + var(--space-1));
    --enarratio-padding-button: var(--space-1) var(--space-2);
    --enarratio-cell-padding: var(--space-2) var(--space-4) var(--space-2) 0;
    --enarratio-radius: var(--radius-s);
    --enarratio-radius-swatch: var(--radius-s);
    --enarratio-radius-tooltip: var(--radius-m);
    --enarratio-swatch-size: var(--space-4);
    --enarratio-tooltip-padding: var(--space-2) var(--space-3);
    --enarratio-tooltip-shadow: var(--shadow-m);
    --enarratio-z-tooltip: var(--z-tip);

    /* focus: the shared ring's width and offset on a focused chart or legend button */
    --enarratio-focus-outline-width: var(--ring-width);
    --enarratio-focus-outline-offset: var(--focus-offset);

    /* timings: 100 and 400 ms, the family's motion; Enarratio stops them under reduced motion */
    --enarratio-duration-hover: var(--dur-fast);
    --enarratio-duration-grow: var(--dur-slow);
    --enarratio-duration-fade: var(--dur-slow);
    --enarratio-duration-draw: var(--dur-slow);
    --enarratio-ease-grow: var(--ease-out);
    --enarratio-ease-out: var(--ease-out);
  }
}



/* The layer order, repeated so this file is safe whatever order an app imports it in: the first statement a browser reads fixes it (css/layers.css has the full note). */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

/* The utility classes (.cap-sr-only and friends), also exported alone as capsomer/utilities.css. */
/* Capsomer's utility classes, alone: for an app that keeps its own reset and body styles and does
   not load capsomer/base.css (which imports this file), but still wants .cap-sr-only and the rest.
   `import "capsomer/utilities.css"`. The layer order is repeated so it is safe in any order (css/layers.css). */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

@layer cap.utilities {
  /* Text a screen reader announces and the eye does not see. */
  .cap-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Identifiers only: ids, shas, commands, paths. Times and counts are .cap-num. */
  .cap-mono {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: -0.01em;
  }
  .cap-num {
    font-variant-numeric: tabular-nums;
  }
  .cap-muted {
    color: var(--muted);
  }
  .cap-label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
  }
}


/* Element defaults every component assumes. Layered, so an app that keeps its own body
   or link styles wins without a fight. */
@layer cap.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  [hidden] {
    display: none !important;
  }
}

@layer cap.base {
  body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font: 400 var(--text-size) / var(--leading) var(--face);
    -webkit-font-smoothing: antialiased;
  }
  /* The reading context sets its own face and size where it is declared, not only on body. */
  /* A density wrapper sets its own reading size (the root keeps rem sizing). */
  [data-density]:where(:not(:root)) {
    font-size: var(--text-size);
    line-height: var(--leading);
  }
  [data-context] {
    font-family: var(--face);
    font-size: var(--text-size);
    line-height: var(--leading);
  }
  a {
    color: var(--accent-text);
    text-underline-offset: 2px;
    &:hover {
      color: var(--accent-hover);
    }
    @media (prefers-reduced-motion: no-preference) {
      transition: color var(--dur-fast) var(--ease-out);
    }
  }
  /* A trailing arrow in a link or button. A site's --arrow-rest and --arrow-shift (shown and in place
     by default) can hide it until the pointer or focus arrives, when it slides in. */
  .cap-arrow {
    inline-size: 1.1em;
    block-size: 1.1em;
    flex: none;
    opacity: var(--arrow-rest);
    translate: var(--arrow-shift) 0;
    :is(a, button):is(:hover, :focus-visible) > & {
      opacity: 1;
      translate: 0 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      transition:
        opacity var(--dur-base) var(--ease-out),
        translate var(--dur-base) var(--ease-out);
    }
  }
  button {
    cursor: pointer;
  }
  :focus-visible {
    /* The shared focus indicator: a 2 px solid --ring outline, 3:1 against every surface
       (palette.mjs checks it). A field may add --shadow-ring, the soft 3 px glow, beside it. */
    outline: var(--focus-width) solid var(--ring);
    outline-offset: var(--focus-offset);
  }
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }
  /* A touch screen gets 16 px inputs, so iOS does not zoom into the field (decision 5). */
  @media (pointer: coarse) {
    input,
    select,
    textarea {
      font-size: max(var(--fs-input-coarse), 1em);
    }
  }
  /* Still by default (design 4.1): a component's motion is written inside
     prefers-reduced-motion: no-preference, and this catches anything that is not. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Between pages, and when the theme changes, the old view fades into the new one in 200 ms
   instead of cutting (a view transition; the browser keeps whatever is the same on both still).
   Same-origin page loads take part on their own (cross-document view transitions); a client-side
   router or theme-switch.ts starts one itself. A page change, typed cap-page, also lets the main
   content rise 6 px into place while the header and menus stay put (Arc's dialog rise, applied to
   the page). Only with motion allowed; a browser without view transitions just shows the new
   page, as before. An app that wants none writes `@view-transition { navigation: none; }`. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    types: cap-page;
  }
  ::view-transition-group(root) {
    animation-duration: var(--dur-base);
    animation-timing-function: var(--ease-out);
  }
  :active-view-transition-type(cap-page) main {
    view-transition-name: cap-main;
  }
  ::view-transition-group(cap-main) {
    animation: none;
  }
  ::view-transition-old(cap-main) {
    animation: var(--dur-fast) var(--ease-out) both cap-page-out;
  }
  ::view-transition-new(cap-main) {
    animation: var(--dur-base) var(--ease-out) both cap-page-in;
  }
  @keyframes cap-page-out {
    to {
      opacity: 0;
    }
  }
  @keyframes cap-page-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}


/* The layer order, repeated so this file is safe whatever order an app imports it in: the first statement a browser reads fixes it (css/layers.css has the full note). */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

/* The reading context: <article data-context="prose">. A 66-character measure, a serif
   that carries Greek, headings that scale with the window while the body stays steady
   (design 2.4). The public-page components of release 0.3 build on this. */
@layer cap.base {
  [data-context="prose"] {
    & :where(p, ul, ol, blockquote, figure, pre, table) {
      max-inline-size: var(--measure);
      margin-block: 0 1em;
    }
    & :where(p, li) {
      text-wrap: pretty;
      font-variant-numeric: oldstyle-nums;
    }
    & :where(h1, h2, h3) {
      font-family: var(--prose);
      line-height: 1.15;
      letter-spacing: -0.015em;
      margin-block: 1.4em 0.5em;
      max-inline-size: 30ch;
    }
    & :where(h2) {
      font-size: var(--fs-prose-h2);
    }
    & :where(h3) {
      font-size: calc(var(--fs-prose) * 1.2);
    }
    & :where(figcaption) {
      font-size: 0.85em;
      color: var(--muted);
    }
    & :where(code, kbd, samp) {
      font-family: var(--mono);
      font-size: 0.85em;
    }
  }

  @media print {
    [data-context="prose"] {
      font-size: 11pt;
      color: #000;
      background: #fff;
      & a {
        color: inherit;
      }
      & :where(h2, h3, figure, table) {
        break-inside: avoid;
      }
    }
  }
}


@layer cap.tokens {
/* Generated by tokens/palette.mjs: the cerulean family, step 9 #0588b4 (oklch 0.587 0.116 230.2).
   Put data-family="cerulean" on the root or on any element to switch its subtree.
   Import after tokens.css. Do not edit: change the script and run `npm run tokens`. */
[data-family="cerulean"] {
  --ground: #f5fbff;
  --surface: #fbfeff;
  --raised: #f2f8fb;
  --sunken: #e0eaee;
  --line: #d6e0e4;
  --line-strong: #889195;
  --text: #0a1d26;
  --muted: #5b6870;
  --dim: #5c6971;
  --accent: #0588b4;
  --accent-hover: #0b1d26;
  --accent-text: #025572;
  --accent-soft: #d9edf8;
  --accent-line: #3f95bc;
  --sel: #e7f4fb;
  --primary: #0478a0;
  --primary-hover: #025572;
  --primary-fg: #fbfeff;
  --on: #0478a0;
  --on-hover: #025572;
  --ring: #0588b4;
  --ok: #017835;
  --ok-soft: #d6f7dc;
  --warn: #8b6003;
  --warn-soft: #ffeaca;
  --crit: #b04540;
  --crit-soft: #fee7e4;
  --info: #2669b7;
  --info-soft: #e2eeff;
  --nodata: #5c6971;
  --nodata-soft: #e7ecee;
  --accent-1: #fbfdfe;
  --accent-2: #f5fafd;
  --accent-3: #e7f4fb;
  --accent-4: #d9edf8;
  --accent-5: #c9e5f3;
  --accent-6: #b8d8e9;
  --accent-7: #9ec8dd;
  --accent-8: #79b2ce;
  --accent-9: #0588b4;
  --accent-10: #0478a0;
  --accent-11: #025572;
  --accent-12: #0b1d26;
  --series-1: #8c5fd2;
  --series-2: #cc4f0c;
  --series-3: #008489;
  --series-4: #749455;
  --series-5: #505ca1;
  --series-6: #046d5e;
  --series-7: #c564a1;
  --series-8: #98445b;
  --series-text-1: #000000;
  --series-text-2: #000000;
  --series-text-3: #000000;
  --series-text-4: #0a1d26;
  --series-text-5: #fbfeff;
  --series-text-6: #fbfeff;
  --series-text-7: #0a1d26;
  --series-text-8: #fbfeff;
  --ramp-1: #d1e5ef;
  --ramp-2: #9fc8dd;
  --ramp-3: #66a8c8;
  --ramp-4: #0f82ac;
  --ramp-5: #035875;
  --ramp-text-1: #0a1d26;
  --ramp-text-2: #0a1d26;
  --ramp-text-3: #0a1d26;
  --ramp-text-4: #000000;
  --ramp-text-5: #fbfeff;
  --shadow-xs: 0 1px 2px 0 rgba(10, 29, 38, 0.05);
  --shadow-s: 0 1px 3px 0 rgba(10, 29, 38, 0.1), 0 1px 2px -1px rgba(10, 29, 38, 0.1);
  --shadow-m: 0 4px 6px -1px rgba(10, 29, 38, 0.1), 0 2px 4px -2px rgba(10, 29, 38, 0.1);
  --shadow-l: 0 10px 15px -3px rgba(10, 29, 38, 0.1), 0 4px 6px -4px rgba(10, 29, 38, 0.1);
  --ring-soft: rgba(5, 136, 180, 0.5);
  --shadow-ring: 0 0 0 var(--ring-width) rgba(5, 136, 180, 0.5);
  --shadow: var(--shadow-l);
  --scrim: rgba(10, 29, 38, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-family="cerulean"],
  :root:not([data-theme="light"])[data-family="cerulean"] {
    --ground: #080e11;
    --surface: #12181c;
    --raised: #1b2225;
    --sunken: #04090c;
    --line: #2d3438;
    --line-strong: #636c70;
    --text: #e9f0f3;
    --muted: #8d979d;
    --dim: #808b90;
    --accent: #0588b4;
    --accent-hover: #e2edf3;
    --accent-text: #93c6df;
    --accent-soft: #192c35;
    --accent-line: #0c7296;
    --sel: #152127;
    --primary: #2797c4;
    --primary-hover: #93c6df;
    --primary-fg: #080e11;
    --on: #2797c4;
    --on-hover: #93c6df;
    --ring: #0588b4;
    --ok: #4aa462;
    --ok-soft: #15301b;
    --warn: #be881d;
    --warn-soft: #362508;
    --crit: #da746b;
    --crit-soft: #3e1e1c;
    --info: #5794df;
    --info-soft: #172a41;
    --nodata: #808b90;
    --nodata-soft: #242729;
    --accent-1: #0a0e10;
    --accent-2: #101517;
    --accent-3: #152127;
    --accent-4: #192c35;
    --accent-5: #1e3642;
    --accent-6: #274452;
    --accent-7: #33586a;
    --accent-8: #3d738d;
    --accent-9: #0588b4;
    --accent-10: #2797c4;
    --accent-11: #93c6df;
    --accent-12: #e2edf3;
    --series-1: #8c5fd2;
    --series-2: #cc4f0c;
    --series-3: #008489;
    --series-4: #a3c584;
    --series-5: #a4b5ff;
    --series-6: #65cbb6;
    --series-7: #c3629f;
    --series-8: #e4889e;
    --series-text-1: #000000;
    --series-text-2: #000000;
    --series-text-3: #000000;
    --series-text-4: #12181c;
    --series-text-5: #12181c;
    --series-text-6: #12181c;
    --series-text-7: #12181c;
    --series-text-8: #12181c;
    --ramp-1: #113241;
    --ramp-2: #1c546c;
    --ramp-3: #26789a;
    --ramp-4: #4fa3ca;
    --ramp-5: #8cceef;
    --ramp-text-1: #e9f0f3;
    --ramp-text-2: #e9f0f3;
    --ramp-text-3: #ffffff;
    --ramp-text-4: #12181c;
    --ramp-text-5: #12181c;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
    --shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
    --ring-soft: rgba(5, 136, 180, 0.5);
    --shadow-ring: 0 0 0 var(--ring-width) rgba(5, 136, 180, 0.5);
    --shadow: var(--shadow-l);
    --scrim: rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] [data-family="cerulean"],
:root[data-theme="dark"][data-family="cerulean"],
[data-cap-theme="dark"] [data-family="cerulean"],
[data-cap-theme="dark"][data-family="cerulean"] {
  --ground: #080e11;
  --surface: #12181c;
  --raised: #1b2225;
  --sunken: #04090c;
  --line: #2d3438;
  --line-strong: #636c70;
  --text: #e9f0f3;
  --muted: #8d979d;
  --dim: #808b90;
  --accent: #0588b4;
  --accent-hover: #e2edf3;
  --accent-text: #93c6df;
  --accent-soft: #192c35;
  --accent-line: #0c7296;
  --sel: #152127;
  --primary: #2797c4;
  --primary-hover: #93c6df;
  --primary-fg: #080e11;
  --on: #2797c4;
  --on-hover: #93c6df;
  --ring: #0588b4;
  --ok: #4aa462;
  --ok-soft: #15301b;
  --warn: #be881d;
  --warn-soft: #362508;
  --crit: #da746b;
  --crit-soft: #3e1e1c;
  --info: #5794df;
  --info-soft: #172a41;
  --nodata: #808b90;
  --nodata-soft: #242729;
  --accent-1: #0a0e10;
  --accent-2: #101517;
  --accent-3: #152127;
  --accent-4: #192c35;
  --accent-5: #1e3642;
  --accent-6: #274452;
  --accent-7: #33586a;
  --accent-8: #3d738d;
  --accent-9: #0588b4;
  --accent-10: #2797c4;
  --accent-11: #93c6df;
  --accent-12: #e2edf3;
  --series-1: #8c5fd2;
  --series-2: #cc4f0c;
  --series-3: #008489;
  --series-4: #a3c584;
  --series-5: #a4b5ff;
  --series-6: #65cbb6;
  --series-7: #c3629f;
  --series-8: #e4889e;
  --series-text-1: #000000;
  --series-text-2: #000000;
  --series-text-3: #000000;
  --series-text-4: #12181c;
  --series-text-5: #12181c;
  --series-text-6: #12181c;
  --series-text-7: #12181c;
  --series-text-8: #12181c;
  --ramp-1: #113241;
  --ramp-2: #1c546c;
  --ramp-3: #26789a;
  --ramp-4: #4fa3ca;
  --ramp-5: #8cceef;
  --ramp-text-1: #e9f0f3;
  --ramp-text-2: #e9f0f3;
  --ramp-text-3: #ffffff;
  --ramp-text-4: #12181c;
  --ramp-text-5: #12181c;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
  --ring-soft: rgba(5, 136, 180, 0.5);
  --shadow-ring: 0 0 0 var(--ring-width) rgba(5, 136, 180, 0.5);
  --shadow: var(--shadow-l);
  --scrim: rgba(0, 0, 0, 0.55);
}

}

/* The layer order, repeated so this file is safe whatever order an app imports it in: the first statement a browser reads fixes it (css/layers.css has the full note). */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

/* The manual theme: the public pages of the dustinedwards.info sites set after the NASA Graphics
   Standards Manual (Danne & Blackburn, 1976). Opt-in: an app imports capsomer/manual.css only on
   its public pages; nothing else in Capsomer reads it. Every color comes from the page's family, so
   dustinedwards.info is purple and Capsid teal. Lifted from Capsid's explorer (capsid #560, #562,
   #583). Its parts, in the order a page uses them: */

/* The running head over a page: its section's number and name on the left in bold, the folio or
   date on the right, over a hairline (the manual's index, page i). The sign variant sets it as
   one of the manual's building signs (6.1): a dark panel of light type, the family's color in a
   strip along its top, the number on a plate of its own. */
@layer cap.components {
  .cap-running-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--text);
    font: 400 0.9375rem / 1.3 var(--ui);
  }

  .cap-running-head-name {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    font-weight: 700;
  }

  .cap-running-head-no {
    min-inline-size: 2.5ch;
  }

  .cap-running-head[data-variant="sign"] {
    padding: var(--space-3) var(--space-5) var(--space-4);
    border: 0;
    border-block-start: 10px solid var(--on);
    background: var(--text);
    color: var(--ground);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);

    .cap-running-head-name {
      letter-spacing: -0.01em;
    }

    .cap-running-head-no {
      min-inline-size: 1.5em;
      padding-inline: 0.2em;
      background: var(--ground);
      color: var(--text);
      text-align: center;
    }

    .cap-running-head-folio {
      font-size: 0.9375rem;
    }
  }

  @media (forced-colors: active) {
    .cap-running-head[data-variant="sign"] {
      border: 1px solid CanvasText;
    }
  }
}

/* A numbered part of a page, set as the NASA Graphics Standards Manual sets its pages (1976,
   5.1): the number and title on the left over a rule across the whole width, what the part says
   beside it, and its figures and lists full width below. */
@layer cap.components {
  .cap-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-7);
    margin-block-start: var(--space-9);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--text);
    container-type: inline-size;

    > * {
      grid-column: 1 / -1;
      min-inline-size: 0;
    }
  }

  .cap-part-title {
    display: flex;
    gap: var(--space-4);
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
  }

  .cap-part-no {
    flex: none;
    min-inline-size: 2.5ch;
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.7;
  }

  .cap-part-lead {
    margin: var(--space-3) 0 0;
    max-inline-size: 62ch;
    line-height: 1.35;
    font-size: 1.25rem;
  }

  /* Two columns once the page is wide enough: the title on the left third. */
  @media (min-width: 52rem) {
    .cap-part {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .cap-part > .cap-part-title {
      grid-column: 1;
    }

    .cap-part > .cap-part-title + .cap-part-lead {
      grid-column: 2;
      margin-block-start: 0;
    }
  }
}

/* Facts as a form's ruled boxes: a small label in the mono over each value, the boxes sharing
   their rules (the manual's forms, 4.1; the Apollo flight plan's title block, MSC Form 29). Used
   for a page's title block, a post's report documentation and a row of readings. The tones
   variant steps the boxes from light to dark through one ink, as the manual sets type on stepped
   grays (7.2). */
@layer cap.components {
  .cap-form-boxes {
    --cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    margin: 0;
    border-block-start: 1px solid var(--text);
    border-inline-start: 1px solid var(--text);
    font-family: var(--ui);
    container-type: inline-size;
  }

  .cap-form-boxes-box {
    min-inline-size: 0;
    padding: 6px var(--space-4) var(--space-3);
    border-inline-end: 1px solid var(--text);
    border-block-end: 1px solid var(--text);

    > dt {
      color: var(--muted);
      font: 500 0.6875rem / 1.4 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    > dd {
      margin: 2px 0 0;
      overflow-wrap: anywhere;
    }

    &[data-span="2"] {
      grid-column: span 2;
    }

    &[data-span="all"] {
      grid-column: 1 / -1;
    }

    &[data-weight="bold"] > dd {
      font-weight: 700;
    }
  }

  /* A reading: the figure large and bold under its label. */
  .cap-form-boxes[data-variant="readings"] .cap-form-boxes-box > dd,
  .cap-form-boxes[data-variant="tones"] .cap-form-boxes-box > dd {
    margin-block-start: var(--space-3);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .cap-form-boxes[data-variant="tones"] .cap-form-boxes-box {
    /* The label takes the value's color: the muted gray does not hold 4.5:1 on the gray steps. */
    > dt {
      color: var(--text);
    }

    &:nth-child(4n + 1) {
      background: color-mix(in srgb, var(--text) 6%, var(--ground));
    }

    &:nth-child(4n + 2) {
      background: color-mix(in srgb, var(--text) 22%, var(--ground));
    }

    &:nth-child(4n + 3) {
      background: color-mix(in srgb, var(--text) 62%, var(--ground));
    }

    &:nth-child(4n + 4) {
      background: var(--text);
    }

    &:is(:nth-child(4n + 3), :nth-child(4n + 4)) > :is(dt, dd) {
      color: var(--ground);
    }
  }

  @container (max-width: 36rem) {
    .cap-form-boxes-box[data-span="2"] {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 40rem) {
    .cap-form-boxes {
      --cols: 2;
    }
  }
}

/* A contents list set as the manual's index (page i): number and name in bold, a dotted leader,
   the page or the count at the right. */
@layer cap.components {
  .cap-leader-index {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--text);
    list-style: none;
    font-family: var(--ui);
  }

  .cap-leader-index-link {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    min-block-size: var(--target);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;

    &:hover .cap-leader-index-name,
    &:focus-visible .cap-leader-index-name {
      color: var(--accent-text);
      text-decoration: underline;
    }

    &[aria-current] .cap-leader-index-name {
      color: var(--accent-text);
    }
  }

  .cap-leader-index-no {
    flex: none;
    min-inline-size: 3ch;
    font-variant-numeric: tabular-nums;
  }

  .cap-leader-index-name {
    font-weight: 700;
  }

  .cap-leader-index-dots {
    flex: 1 1 2rem;
    min-inline-size: 1rem;
    border-block-end: 2px dotted var(--muted);
  }

  .cap-leader-index-fact {
    flex: none;
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
}

/* A list of procedures as an Apollo checklist card: a ruled box, a dark strip naming the card,
   and per step a box to tick, its number, its name, a dotted leader to what kind of step it is,
   and a line under it. The box to tick is drawn, not a control: the card is a list of links.
   */
@layer cap.components {
  .cap-checklist {
    border: 2px solid var(--text);
    background: var(--ground);
    font-family: var(--ui);
  }

  .cap-checklist-strip {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-3) var(--space-5);
    background: var(--text);
    color: var(--ground);
    font: 700 0.75rem / 1.4 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .cap-checklist-items {
    margin: 0;
    padding: var(--space-2) var(--space-5) var(--space-3);
    list-style: none;
    counter-reset: cap-step;
  }

  .cap-checklist-item {
    display: grid;
    grid-template-columns: 1.25rem 2rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--line);
    counter-increment: cap-step;

    &:last-child {
      border-block-end: 0;
    }

    &::before {
      content: "";
      inline-size: 14px;
      block-size: 14px;
      border: 1.5px solid var(--text);
      transform: translateY(2px);
    }

    &::after {
      content: counter(cap-step, decimal-leading-zero) / "";
      grid-column: 2;
      grid-row: 1;
      color: var(--muted);
      font: 500 0.75rem var(--mono);
    }
  }

  .cap-checklist-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    grid-column: 3;
    grid-row: 1;
    min-inline-size: 0;

    > a {
      display: inline-block;
      min-block-size: 24px;
      color: var(--text);
      font-weight: 700;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        color: var(--accent-text);
        text-decoration: underline;
      }
    }
  }

  .cap-checklist-dots {
    flex: 1 1 2rem;
    min-inline-size: 1rem;
    border-block-end: 2px dotted var(--muted);
  }

  .cap-checklist-kind {
    font: 500 0.6875rem var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cap-checklist-note {
    grid-column: 3;
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.45;
  }

  @media (max-width: 40rem) {
    .cap-checklist-dots {
      display: none;
    }
  }
}

/* A figure as a plate: the drawing or photograph in a ruled box on the raised surface, its plate
   number in the mono at the top left, the caption under the box with the figure number at the
   right. The manual boxes every diagram (5.17), as NASA's photo plates were boxed and numbered. */
@layer cap.components {
  .cap-plate {
    margin: 0;
    min-inline-size: 0;
    font-family: var(--ui);
  }

  .cap-plate-box {
    position: relative;
    border: 1px solid var(--text);
    background: var(--raised);

    > :is(svg, img, picture, canvas) {
      display: block;
      inline-size: 100%;
      max-inline-size: 100%;
      block-size: auto;
    }
  }

  .cap-plate-no {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    font: 700 0.75rem / 1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cap-plate-caption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block-start: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.4;

    > b {
      font-weight: 700;
    }
  }

  .cap-plate-fig {
    flex: none;
    color: var(--muted);
  }
}

/* The ways on from a page, as the manual's directional signs (6.1, 6.2): a dark panel of light
   type with an arrow, the way back pointing left and the way forward right, and the way forward
   carrying the family's color along its top. */
@layer cap.components {
  .cap-signs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .cap-sign {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    max-inline-size: 100%;
    min-block-size: 48px;
    padding: var(--space-3) var(--space-5);
    background: var(--text);
    color: var(--ground);
    font: 500 1rem / 1.3 var(--ui);
    text-decoration: none;
    overflow-wrap: anywhere;

    &[rel~="prev"]::before {
      content: "\2190" / "";
    }

    &[rel~="next"]::after {
      content: "\2192" / "";
    }

    &[rel~="next"],
    &[data-variant="forward"] {
      box-shadow: inset 0 6px 0 var(--on);
    }

    &:hover,
    &:focus-visible {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

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

  @media (forced-colors: active) {
    .cap-sign {
      border: 1px solid LinkText;
    }
  }
}

/* A round patch for a project, as each Apollo crew wore its mission's: the name round the top,
   a line round the foot, the count on a disc of the family's color, a dot round the disc for
   each of the things counted. Drawn by patchSvg() (manual.ts). */
@layer cap.components {
  .cap-patch {
    display: block;
    flex: none;
    inline-size: 140px;
    block-size: 140px;
    max-inline-size: 100%;
  }

  .cap-patch-rim {
    fill: var(--text);
  }

  .cap-patch-field {
    fill: var(--ground);
    stroke: var(--on);
    stroke-width: 3;
  }

  .cap-patch-disc {
    fill: var(--on);
  }

  .cap-patch-dot {
    fill: var(--ground);
    stroke: var(--text);
    stroke-width: 1.2;
  }

  .cap-patch-name,
  .cap-patch-foot {
    fill: var(--text);
    font: 700 10px var(--mono);
    letter-spacing: 1.4px;
  }

  .cap-patch-foot {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .cap-patch-count {
    fill: var(--primary-fg);
    font: 700 24px var(--display);
  }

  .cap-patch-unit {
    fill: var(--primary-fg);
    font: 700 7px var(--mono);
    letter-spacing: 1px;
  }

  .cap-patch[data-size="s"] {
    inline-size: 96px;
    block-size: 96px;
  }
}

/* The foot of a page as the manual's letterhead (3.1): the site's name as the logotype, large and
   bold, the address beside it in regular and medium, and the folio at the right. */
@layer cap.components {
  .cap-letterhead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-5) var(--space-8);
    padding-block: var(--space-7);
    border-block-start: 4px solid var(--text);
    font-family: var(--ui);

    p {
      margin: 0;
    }
  }

  .cap-letterhead-logo {
    font: 700 clamp(2.5rem, 6vw, 4.5rem) / 0.82 var(--display);
    letter-spacing: -0.045em;
  }

  .cap-letterhead-address {
    font-size: 0.9375rem;
    line-height: 1.45;

    b {
      font-weight: 600;
    }
  }

  .cap-letterhead-folio {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 46rem) {
    .cap-letterhead {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* The head of a page drawn on the manual's layout grid (5.1), as it prints its grids in fine red
   lines: twelve columns with their gutters and a baseline every 24 pixels, four columns on a
   phone, the grid's own label at its foot on the right. Red is the manual's, not the family's: the
   grid is the printer's, under the page, never a mark on it. */
@layer cap.components {
  .cap-layout-grid {
    --cols: 12;
    --gap: 24px;
    --grid-line: color-mix(in oklab, var(--crit) 45%, transparent);
    --grid-soft: color-mix(in oklab, var(--crit) 14%, transparent);
    --grid-fill: color-mix(in oklab, var(--crit) 4%, transparent);
    position: relative;
    isolation: isolate;
    padding-block: var(--space-3) var(--space-6);

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        repeating-linear-gradient(to bottom, transparent 0 23px, var(--grid-soft) 23px 24px),
        linear-gradient(to right, var(--grid-line) 0 1px, var(--grid-fill) 1px calc(100% - var(--gap) - 1px), var(--grid-line) calc(100% - var(--gap) - 1px) calc(100% - var(--gap)), transparent calc(100% - var(--gap))) 0 0 / calc((100% + var(--gap)) / var(--cols)) 100% repeat-x;
    }

    &::after {
      content: "12 columns, 24 px baseline" / "";
      position: absolute;
      inset-block-end: 4px;
      inset-inline-end: 0;
      color: var(--crit);
      font: 500 0.625rem / 1 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
  }

  @media (max-width: 40rem) {
    .cap-layout-grid {
      --cols: 4;
      --gap: 16px;

      &::after {
        content: "4 columns, 24 px baseline" / "";
      }
    }
  }

  @media (forced-colors: active) {
    .cap-layout-grid::before {
      display: none;
    }
  }
}

/* The trail to a page as the directional strip of the manual's signs (6.2): a dark band of light
   type, an arrow in the family's color between the ways, and the page you are on lit. */
@layer cap.components {
  .cap-direction {
    padding: var(--space-2) var(--space-4);
    background: var(--text);
    color: var(--ground);
    font: 600 0.9375rem / 1.4 var(--ui);

    > ol {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      display: flex;
      align-items: center;
      min-inline-size: 0;
    }

    li + li::before {
      content: "\2192" / "";
      margin-inline: 0.6em;
      color: var(--on);
      font-weight: 700;
    }

    a {
      display: inline-block;
      min-block-size: 24px;
      line-height: 24px;
      color: var(--ground);
      text-decoration: none;
      overflow-wrap: anywhere;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

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

    [aria-current] {
      padding-inline: 0.5em;
      background: var(--on);
      color: var(--primary-fg);
    }
  }

  @media (forced-colors: active) {
    .cap-direction {
      border: 1px solid CanvasText;
    }
  }
}

/* The livery: one bold band of the family's color with a thin pin stripe under it, as the manual
   paints every NASA car, van and aircraft (7.1 to 7.6). The band runs across the foot of a page;
   a card carries a short length of it along its top as data-livery. */
@layer cap.components {
  .cap-livery {
    block-size: 49px;
    margin-block-start: var(--space-8);
    background: linear-gradient(to bottom, var(--on) 0 40px, transparent 40px 44px, var(--on) 44px);
  }

  [data-livery] {
    border-block-start: 6px solid var(--on);
  }
}

/* The roll blocks painted round a Saturn V, so the cameras could see how far it had turned: one
   block a step, its opposite quarters filled for a step done and lit in the family's color for the
   one you are on, a step ahead faint. Drawn, so it is hidden from screen readers and the page says
   which step it is in words. */
@layer cap.components {
  .cap-roll {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      inline-size: 22px;
      block-size: 22px;
      border: 2px solid var(--text);
    }

    > [data-state="done"] {
      background: conic-gradient(var(--text) 0 25%, transparent 0 50%, var(--text) 0 75%, transparent 0);
    }

    > [data-state="now"] {
      border-color: var(--on);
      background: conic-gradient(var(--on) 0 25%, transparent 0 50%, var(--on) 0 75%, transparent 0);
    }

    > [data-state="ahead"] {
      opacity: 0.4;
    }
  }
}

/* Dated steps on the Apollo flight plan's time line: a ruled scale down the left, ticked every
   10px, each step's mark (a year, a time or a number) at its tick, the step beside it. */
@layer cap.components {
  .cap-timeline {
    margin: 0 0 0 1.25rem;
    padding: 0;
    border-inline-start: 1px solid var(--text);
    background: repeating-linear-gradient(var(--line-strong) 0 1px, transparent 1px 10px) 0 0 / 6px 100% no-repeat;
    list-style: none;
    font-family: var(--ui);

    > li {
      position: relative;
      display: grid;
      grid-template-columns: 5.5rem minmax(0, 1fr);
      gap: var(--space-2) var(--space-4);
      padding: var(--space-4) 0 var(--space-4) var(--space-6);
      border-block-end: 1px solid var(--line);

      &::before {
        content: "";
        position: absolute;
        inset-block-start: calc(var(--space-4) + 0.7em);
        inset-inline-start: 0;
        inline-size: 14px;
        border-block-start: 1px solid var(--text);
      }
    }
  }

  .cap-timeline-mark {
    font: 500 0.8125rem / 1.6 var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }

  .cap-timeline-body {
    min-inline-size: 0;

    > :first-child {
      margin-block-start: 0;
    }

    > :last-child {
      margin-block-end: 0;
    }
  }

  @media (max-width: 40rem) {
    .cap-timeline > li {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* One step as an Apollo cue card: a ruled box, a dark strip naming the procedure and the card, the
   step's title in capitals in the mono, and its lines each with a drawn box, a name in capitals, a
   dotted leader and its value. The roll blocks may sit under the strip. */
@layer cap.components {
  .cap-cue {
    padding-block-end: var(--space-4);
    border: 2px solid var(--text);
    background: var(--ground);
    font-family: var(--ui);

    > :not(.cap-cue-strip) {
      margin-inline: var(--space-4);
    }

    > .cap-roll {
      margin-block-end: var(--space-3);
    }
  }

  .cap-cue-strip {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--text);
    color: var(--ground);
    font: 700 0.75rem / 1.2 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cap-cue-title {
    margin-block: 0 var(--space-3);
    font: 700 clamp(1.25rem, 2vw, 1.5rem) / 1.2 var(--mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .cap-cue-lines {
    display: grid;
    gap: var(--space-1);
    margin-block: var(--space-3) 0;
    padding: var(--space-3) 0 0;
    border-block-start: 1px solid var(--text);
    list-style: none;
    font: 500 0.8125rem / 1.5 var(--mono);
    text-transform: uppercase;

    > li {
      display: grid;
      grid-template-columns: auto auto minmax(1rem, 1fr) minmax(0, max-content);
      align-items: baseline;
      gap: var(--space-2);
      min-block-size: 24px;

      &::before {
        content: "";
        inline-size: 12px;
        block-size: 12px;
        border: 1.5px solid var(--text);
        transform: translateY(1px);
      }

      &::after {
        content: "";
        grid-column: 3;
        grid-row: 1;
        border-block-end: 1.5px dotted var(--text);
      }
    }
  }

  .cap-cue-name {
    grid-column: 2;
    font-weight: 700;

    &:is(a) {
      color: var(--text);

      &:hover,
      &:focus-visible {
        color: var(--accent-text);
      }
    }
  }

  /* A value keeps its case: a unit (µL, mL) changes meaning in capitals. */
  .cap-cue-value {
    grid-column: 4;
    grid-row: 1;
    text-align: end;
    text-transform: none;
  }

  @media (max-width: 40rem) {
    .cap-cue-lines > li {
      grid-template-columns: auto minmax(0, 1fr);

      &::after {
        display: none;
      }
    }

    .cap-cue-value {
      grid-column: 2;
      grid-row: auto;
      text-align: start;
    }
  }
}


/* Generated by tokens/palette.mjs: each family's color (its --on), on every page.
   Do not edit: change the script and run `npm run tokens`. */
:root {
  --family-purple: #7d50c1;
  --family-fox: #b64404;
  --family-teal: #077478;
  --family-amber: #b68508;
  --family-navy: #2a68cf;
  --family-forest: #028445;
  --family-magenta: #a53d96;
  --family-cerulean: #0478a0;
  --family-olive: #687603;
  --family-rose: #b83466;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --family-purple: #9b6ee3;
    --family-fox: #dd5f25;
    --family-teal: #249398;
    --family-amber: #f0b429;
    --family-navy: #4888f1;
    --family-forest: #28a55e;
    --family-magenta: #c75db6;
    --family-cerulean: #2797c4;
    --family-olive: #859522;
    --family-rose: #db5583;
  }
}
:root[data-theme="dark"],
[data-cap-theme="dark"] {
  --family-purple: #9b6ee3;
  --family-fox: #dd5f25;
  --family-teal: #249398;
  --family-amber: #f0b429;
  --family-navy: #4888f1;
  --family-forest: #28a55e;
  --family-magenta: #c75db6;
  --family-cerulean: #2797c4;
  --family-olive: #859522;
  --family-rose: #db5583;
}


/* The layer order, repeated so this file is safe whatever order an app imports it in: the first statement a browser reads fixes it (css/layers.css has the full note). */
@layer cap.reset, cap.tokens, cap.base, cap.components, cap.utilities;

/* The family footer (family-footer.ts), the one footer of every dustinedwards.info site: a thin
   stripe over the site's own part and the strip of sites, then the manual theme's double stripe
   (the livery) over the letterhead (components/manual/manual.css, which a page loads with it),
   without the letterhead's heavy rule (Dustin, 2026-10-26). Both stripes are the page family's --on,
   so each site draws them in its own color; the strip marks every site in its family's color
   (tokens/family-marks.css). The two parts share one grid: a name column, then three. */
@layer cap.components {
  .cap-family-footer {
    margin-block-start: var(--space-8);
    padding-block-end: var(--space-6);
    font-family: var(--ui);

    --family-footer-name: minmax(0, 20rem);

    & > .cap-livery {
      margin-block: 0 var(--space-5);
    }

    & a,
    & a:visited {
      color: var(--text);
      text-decoration: none;
    }

    & a:hover,
    & a:focus-visible {
      color: var(--accent-text);
    }
  }

  /* The site's own part: under the thin stripe, on the same columns as the letterhead below. */
  .cap-family-footer-local {
    padding-block-start: var(--space-6);
    border-block-start: 6px solid var(--on);
  }

  .cap-family-footer-center {
    display: grid;
    grid-template-columns: var(--family-footer-name) minmax(0, 1fr);
    gap: var(--space-5) var(--space-8);
    padding-block-end: var(--space-6);

    & p {
      margin: 0;
    }
  }

  .cap-family-footer-center-name {
    font: 700 2.25rem / 0.95 var(--display);
    letter-spacing: -0.04em;
  }

  .cap-family-footer-about {
    margin-block-start: var(--space-3) !important;
    color: var(--muted);
    font-size: 0.875rem;
  }

  /* A line of facts about the site's build, as a plate's small print. */
  .cap-family-footer-stamp {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    color: var(--muted);
    font: 500 0.6875rem / 1.6 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* The family's sites, each marked in its family's color; the one you are on carries a heavy top
     edge in it, so the double stripe below stays the one strong mark. */
  .cap-family-footer-sites {
    padding-block: var(--space-5) var(--space-7);
    border-block-start: 1px solid var(--line);

    /* With no site part above it, the stripe is the strip's only top edge. */
    &:first-child {
      padding-block-start: 0;
      border-block-start: 0;
    }

    & ul {
      display: grid;
      /* Six sites: two rows of three, or one row of six on a wide page, never five and one. */
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    @media (min-width: 40rem) {
      & ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (min-width: 72rem) {
      & ul {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }

    & a {
      display: grid;
      align-content: center;
      min-block-size: var(--target);
      padding: calc(var(--space-3) + 3px) var(--space-4) var(--space-3) calc(var(--space-4) + 14px);
      border: 1px solid var(--line);
      background: linear-gradient(var(--mark), var(--mark)) var(--space-4) 50% / 6px calc(100% - 2 * var(--space-4)) no-repeat;
    }

    & a:hover {
      border-color: var(--mark);
    }

    & a[aria-current] {
      padding-block-start: var(--space-3);
      border-color: var(--mark);
      border-block-start-width: 4px;
    }
  }

  [data-family-mark="purple"] { --mark: var(--family-purple); }
  [data-family-mark="teal"] { --mark: var(--family-teal); }
  [data-family-mark="magenta"] { --mark: var(--family-magenta); }
  [data-family-mark="cerulean"] { --mark: var(--family-cerulean); }
  [data-family-mark="olive"] { --mark: var(--family-olive); }
  [data-family-mark="rose"] { --mark: var(--family-rose); }

  .cap-family-footer-site-name {
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .cap-family-footer-site-role {
    color: var(--muted);
    font: 500 0.6875rem / 1.5 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cap-family-footer-head {
    grid-template-columns: var(--family-footer-name) minmax(0, 1fr);
    align-items: start;
    padding-block-start: 0;
    border-block-start: 0;
  }

  .cap-family-footer-logo {
    display: flex;
    flex-direction: column;
  }

  .cap-family-footer-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  @media (min-width: 48rem) {
    .cap-family-footer-columns {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--space-6);
    }
  }

  @media (max-width: 46rem) {
    .cap-family-footer-head,
    .cap-family-footer-center {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .cap-family-footer-social {
    display: flex;
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
  }

  .cap-family-footer-social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--target);
    min-block-size: var(--target);
  }

  /* Visually hidden until hover or focus, never display:none, so it stays the link's name. */
  .cap-family-footer-social-label {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% var(--space-2);
    padding: 2px var(--space-3);
    border: 1px solid var(--line);
    background: var(--ground);
    color: var(--text);
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    clip-path: inset(50%);
    opacity: 0;
  }

  .cap-family-footer-social-link:is(:hover, :focus-visible) .cap-family-footer-social-label {
    clip-path: none;
    opacity: 1;
  }

  .cap-family-footer-mark {
    display: block;
    inline-size: auto;
    block-size: 1.5rem;
  }

  .cap-family-footer-knockout {
    fill: var(--ground);
  }

  .cap-family-footer-heading {
    margin: 0 0 var(--space-3);
    color: var(--muted);
    font: 500 0.6875rem / 1.6 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cap-family-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--target);
      font-size: 0.875rem;
    }

    & a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  .cap-family-footer-private {
    gap: var(--space-3);
  }

  .cap-family-footer-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
  }

  /* The sign-in lock: small and muted after the label, so the name still leads. */
  .cap-family-footer-lock {
    flex: none;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    color: var(--muted);
  }

  /* The copyright sits right under the name. */
  .cap-family-footer-note {
    margin: var(--space-3) 0 0;
    color: var(--muted);
    font: 500 0.6875rem / 1.6 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}


/* Enarratio theme: capsomer */
.enarratio, .enarratio-tooltip {
  --enarratio-font: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --enarratio-font-numeric: "Schibsted Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --enarratio-background: #fdfdfe;
  --enarratio-text: #1c1727;
  --enarratio-text-muted: #686471;
  --enarratio-grid: #dfdce5;
  --enarratio-focus: #8c5fd2;
  --enarratio-status-good: #047735;
  --enarratio-status-warning: #8a5f01;
  --enarratio-status-bad: #ae453f;
  --enarratio-status-unknown: #696571;
  --enarratio-series-1: #8c5fd2;
  --enarratio-series-text-1: #000000;
  --enarratio-series-2: #cc4f0c;
  --enarratio-series-text-2: #000000;
  --enarratio-series-3: #008489;
  --enarratio-series-text-3: #000000;
  --enarratio-series-4: #749455;
  --enarratio-series-text-4: #1c1727;
  --enarratio-series-5: #505ca1;
  --enarratio-series-text-5: #fdfdfe;
  --enarratio-series-6: #046d5e;
  --enarratio-series-text-6: #fdfdfe;
  --enarratio-series-7: #c564a1;
  --enarratio-series-text-7: #1c1727;
  --enarratio-series-8: #98445b;
  --enarratio-series-text-8: #fdfdfe;
  --enarratio-sequential-1: #e4dcf8;
  --enarratio-sequential-text-1: #1c1727;
  --enarratio-sequential-2: #c7b6ec;
  --enarratio-sequential-text-2: #1c1727;
  --enarratio-sequential-3: #a98dde;
  --enarratio-sequential-text-3: #1c1727;
  --enarratio-sequential-4: #865cc8;
  --enarratio-sequential-text-4: #fdfdfe;
  --enarratio-sequential-5: #5d3497;
  --enarratio-sequential-text-5: #fdfdfe;
}
@supports (color: light-dark(#000, #fff)) {
  .enarratio, .enarratio-tooltip {
    --enarratio-background: light-dark(#fdfdfe, #18161c);
    --enarratio-text: light-dark(#1c1727, #efedf3);
    --enarratio-text-muted: light-dark(#686471, #96949e);
    --enarratio-grid: light-dark(#dfdce5, #343238);
    --enarratio-focus: light-dark(#8c5fd2, #8c5fd2);
    --enarratio-status-good: light-dark(#047735, #4aa462);
    --enarratio-status-warning: light-dark(#8a5f01, #bc861a);
    --enarratio-status-bad: light-dark(#ae453f, #d97269);
    --enarratio-status-unknown: light-dark(#696571, #898790);
    --enarratio-series-1: light-dark(#8c5fd2, #8c5fd2);
    --enarratio-series-text-1: light-dark(#000000, #000000);
    --enarratio-series-2: light-dark(#cc4f0c, #cc4f0c);
    --enarratio-series-text-2: light-dark(#000000, #000000);
    --enarratio-series-3: light-dark(#008489, #008489);
    --enarratio-series-text-3: light-dark(#000000, #000000);
    --enarratio-series-4: light-dark(#749455, #a3c584);
    --enarratio-series-text-4: light-dark(#1c1727, #18161c);
    --enarratio-series-5: light-dark(#505ca1, #a4b5ff);
    --enarratio-series-text-5: light-dark(#fdfdfe, #18161c);
    --enarratio-series-6: light-dark(#046d5e, #65cbb6);
    --enarratio-series-text-6: light-dark(#fdfdfe, #18161c);
    --enarratio-series-7: light-dark(#c564a1, #c3629f);
    --enarratio-series-text-7: light-dark(#1c1727, #18161c);
    --enarratio-series-8: light-dark(#98445b, #e4889e);
    --enarratio-series-text-8: light-dark(#fdfdfe, #18161c);
    --enarratio-sequential-1: light-dark(#e4dcf8, #33254b);
    --enarratio-sequential-text-1: light-dark(#1c1727, #efedf3);
    --enarratio-sequential-2: light-dark(#c7b6ec, #553e7d);
    --enarratio-sequential-text-2: light-dark(#1c1727, #efedf3);
    --enarratio-sequential-3: light-dark(#a98dde, #7b59b2);
    --enarratio-sequential-text-3: light-dark(#1c1727, #efedf3);
    --enarratio-sequential-4: light-dark(#865cc8, #a582e5);
    --enarratio-sequential-text-4: light-dark(#fdfdfe, #18161c);
    --enarratio-sequential-5: light-dark(#5d3497, #cdb5ff);
    --enarratio-sequential-text-5: light-dark(#fdfdfe, #18161c);
  }
}
/* Enarratio base rules */
.enarratio {
  margin: 0;
  color: var(--enarratio-text);
  font-family: var(--enarratio-font);
  font-size: var(--enarratio-font-size, 1rem);
}
.enarratio-frame { overflow-x: auto; }
.enarratio-frame-wide > svg { min-width: 30rem; }
.enarratio svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
  font-family: inherit;
  font-size: var(--enarratio-font-size-mark, 12px);
}
svg.enarratio { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
.enarratio [data-enarratio-mark$="tick label"],
.enarratio .enarratio-numeric {
  font-family: var(--enarratio-font-numeric);
  font-variant-numeric: tabular-nums;
}
.enarratio [data-enarratio-mark*="axis"] { color: var(--enarratio-text-muted); }
.enarratio [data-enarratio-mark$="grid"] { stroke: var(--enarratio-grid); stroke-opacity: 1; }
.enarratio [data-enarratio-mark="rule"] { stroke: var(--enarratio-text-muted); }
.enarratio-title {
  margin: 0 0 var(--enarratio-space, 0.5em);
  font-weight: var(--enarratio-font-weight-title, 600);
}
.enarratio-caption {
  margin: var(--enarratio-space, 0.5em) 0 0;
  color: var(--enarratio-text-muted);
  font-size: var(--enarratio-font-size-small, 0.875em);
}
.enarratio-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enarratio-gap-row, 0.25em) var(--enarratio-gap, 1em);
  margin: 0 0 var(--enarratio-space, 0.5em);
  padding: 0;
  list-style: none;
  font-size: var(--enarratio-font-size-small, 0.875em);
}
.enarratio-legend li, .enarratio-legend button {
  display: inline-flex;
  align-items: center;
  gap: var(--enarratio-gap-inline, 0.4em);
}
.enarratio-legend button {
  margin: 0;
  padding: var(--enarratio-padding-button, 0.125em 0.25em);
  border: var(--enarratio-border-width, 1px) solid transparent;
  border-radius: var(--enarratio-radius, 0.25em);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.enarratio-legend button[aria-pressed="true"] {
  border-color: currentColor;
  font-weight: var(--enarratio-font-weight-emphasis, 600);
}
.enarratio-swatch {
  display: inline-block;
  width: var(--enarratio-swatch-size, 0.8em);
  height: var(--enarratio-swatch-size, 0.8em);
  border-radius: var(--enarratio-radius-swatch, 0.15em);
  forced-color-adjust: none;
}
.enarratio [data-slot="1"] { --enarratio-slot: var(--enarratio-series-1); }
.enarratio [data-slot="2"] { --enarratio-slot: var(--enarratio-series-2); }
.enarratio [data-slot="3"] { --enarratio-slot: var(--enarratio-series-3); }
.enarratio [data-slot="4"] { --enarratio-slot: var(--enarratio-series-4); }
.enarratio [data-slot="5"] { --enarratio-slot: var(--enarratio-series-5); }
.enarratio [data-slot="6"] { --enarratio-slot: var(--enarratio-series-6); }
.enarratio [data-slot="7"] { --enarratio-slot: var(--enarratio-series-7); }
.enarratio [data-slot="8"] { --enarratio-slot: var(--enarratio-series-8); }
.enarratio [data-step="1"] { --enarratio-slot: var(--enarratio-sequential-1); }
.enarratio [data-step="2"] { --enarratio-slot: var(--enarratio-sequential-2); }
.enarratio [data-step="3"] { --enarratio-slot: var(--enarratio-sequential-3); }
.enarratio [data-step="4"] { --enarratio-slot: var(--enarratio-sequential-4); }
.enarratio [data-step="5"] { --enarratio-slot: var(--enarratio-sequential-5); }
.enarratio-swatch { background: var(--enarratio-slot); }
.enarratio-data {
  margin: var(--enarratio-space, 0.5em) 0 0;
  font-size: var(--enarratio-font-size-small, 0.875em);
}
.enarratio-data summary { cursor: pointer; color: var(--enarratio-text-muted); }
.enarratio-data table { border-collapse: collapse; margin-top: var(--enarratio-space, 0.5em); }
.enarratio-data th, .enarratio-data td {
  padding: var(--enarratio-cell-padding, 0.2em 0.75em 0.2em 0);
  border-bottom: var(--enarratio-border-width, 1px) solid var(--enarratio-grid);
  text-align: left;
}
.enarratio-data td { font-variant-numeric: tabular-nums; text-align: right; }
.enarratio-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.enarratio-tooltip {
  position: absolute;
  z-index: var(--enarratio-z-tooltip, 10);
  max-width: var(--enarratio-tooltip-max-width, 18em);
  padding: var(--enarratio-tooltip-padding, 0.35em 0.6em);
  border: var(--enarratio-border-width, 1px) solid var(--enarratio-grid);
  border-radius: var(--enarratio-radius-tooltip, 0.3em);
  background: var(--enarratio-background);
  color: var(--enarratio-text);
  font-family: var(--enarratio-font);
  font-size: var(--enarratio-font-size-tooltip, 0.8125rem);
  line-height: var(--enarratio-line-height-tooltip, 1.35);
  box-shadow: var(--enarratio-tooltip-shadow, 0 2px 8px rgb(0 0 0 / 15%));
}
.enarratio-tooltip[hidden] { display: none; }
.enarratio [data-enarratio-key] {
  transition: opacity var(--enarratio-duration-hover, 150ms) var(--enarratio-ease-out, ease-out);
}
.enarratio[data-enarratio-interactive] [data-enarratio-field] { cursor: pointer; }
.enarratio [data-enarratio-dimmed] { opacity: var(--enarratio-opacity-dimmed, 0.25); }
.enarratio [data-enarratio-key]:focus { outline: none; }
/* The focus ring: a background-colored ring inside a focus-colored one, so one of the two always
   contrasts with whatever mark or background is next to it. */
.enarratio-focus-ring { pointer-events: none; fill: none; }
.enarratio-focus-ring-inner {
  stroke: var(--enarratio-background);
  stroke-width: var(--enarratio-focus-width-inner, 5px);
}
.enarratio-focus-ring-outer {
  stroke: var(--enarratio-focus);
  stroke-width: var(--enarratio-focus-width-outer, 2.5px);
}
/* Invisible targets that make small marks at least 24 CSS pixels to point at. */
.enarratio-hit { fill: transparent; stroke: none; }
.enarratio svg:focus-visible, .enarratio-legend button:focus-visible, .enarratio-frame:focus-visible {
  outline: var(--enarratio-focus-outline-width, 3px) solid var(--enarratio-focus);
  outline-offset: var(--enarratio-focus-outline-offset, 2px);
}
.enarratio-brush {
  fill: var(--enarratio-focus);
  fill-opacity: var(--enarratio-opacity-brush, 0.15);
  stroke: var(--enarratio-focus);
}
/* The timeline's plain list: read by screen readers beside the drawing, and shown in its place
   when the container has under 30rem. The threshold is a container query, which cannot use a
   custom property. */
.enarratio-timeline { container-type: inline-size; }
.enarratio-timeline-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@container (max-width: 30rem) {
  .enarratio-timeline > svg { display: none; }
  .enarratio-timeline-list {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 0 0 var(--enarratio-timeline-list-indent, 1.25em);
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .enarratio-timeline-list li { margin: 0 0 var(--enarratio-space, 0.5em); }
}
@keyframes enarratio-grow { from { transform: scaleY(0); } }
@keyframes enarratio-grow-x { from { transform: scaleX(0); } }
@keyframes enarratio-draw { from { stroke-dashoffset: var(--enarratio-length); } }
@keyframes enarratio-fade { from { opacity: 0; } }
.enarratio[data-enarratio-entering] [data-enarratio-mark="bar"] > * {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: enarratio-grow var(--enarratio-duration-grow, 600ms)
    var(--enarratio-ease-grow, cubic-bezier(0.2, 0.7, 0.3, 1)) both;
}
.enarratio[data-enarratio-entering][data-enarratio-orientation="horizontal"] [data-enarratio-mark="bar"] > * {
  transform-origin: left;
  animation-name: enarratio-grow-x;
}
.enarratio[data-enarratio-entering] [data-enarratio-mark="dot"] > *,
.enarratio[data-enarratio-entering] [data-enarratio-mark="area"] > *,
.enarratio[data-enarratio-entering] [data-enarratio-mark="cell"] > * {
  animation: enarratio-fade var(--enarratio-duration-fade, 500ms)
    var(--enarratio-ease-out, ease-out) both;
}
.enarratio[data-enarratio-entering] [data-enarratio-mark="line"] > path {
  stroke-dasharray: var(--enarratio-length);
  animation: enarratio-draw var(--enarratio-duration-draw, 800ms)
    var(--enarratio-ease-out, ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .enarratio *, .enarratio-tooltip { animation: none !important; transition: none !important; }
}
.enarratio [data-enarratio-mark="x-grid"] { display: none; }

/* The specimen's own layout and the classes Prelum's output carries, on Capsomer's tokens. Capsomer's tokens, base and prose
   styles come first in site.css (specimen/build.mjs joins them); this file is unlayered, so it wins where the two meet. The
   prose rules follow dustinedwards-info's app/styles/prose.css, the first site to style this output. */

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -100px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}
.skip-link:focus {
  inset-block-start: 8px;
}

/* The page. */
.page {
  max-inline-size: 1180px;
  margin-inline: auto;
  padding: 24px 16px 64px;
}
/* The NASA manual theme (capsomer/manual.css) in cerulean: a sign for the running head, the facts in form boxes, the
   contents as a leader index, each element a numbered part, and a letterhead at the foot. */
.page > .cap-running-head {
  margin-block-end: 32px;
}
.page-head h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  letter-spacing: -0.02em;
}
.page-head .cap-form-boxes {
  margin-block: 24px 0;
}
.page-lead {
  max-inline-size: var(--measure);
  margin: 0 0 16px;
  color: var(--muted);
}
.contents {
  margin: 40px 0 8px;
}
@media (min-width: 64rem) {
  .contents .cap-leader-index {
    columns: 2;
    column-gap: 48px;
  }
  .contents .cap-leader-index li {
    break-inside: avoid;
  }
}
.outputs > .pair-label {
  margin-block-start: 24px;
}
.contents h2 {
  margin: 0 0 8px;
  font: 600 0.75rem / 1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.element,
.outputs {
  margin-block: 56px;
  padding-block-start: 16px;
  border-block-start: 4px solid var(--text);
  scroll-margin-block-start: 16px;
}
.element-name {
  margin: 0;
  font-size: 1.5rem;
}
.element-name a {
  color: inherit;
  text-decoration: none;
}
.element-name a:hover {
  text-decoration: underline;
}
.element-meta {
  margin: 4px 0 16px;
  color: var(--muted);
}
.element-pack {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 0 8px;
  border: 1px solid var(--text);
  font: 0.6875rem / 1.7 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.pair {
  display: grid;
  /* minmax(0, ...), or a long line of source widens its column past the page on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 900px) {
  .pair {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}
.pair-label {
  margin: 0 0 6px;
  font: 600 0.6875rem / 1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.source,
.code-view {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  background: var(--sunken);
  border: 1px solid var(--line-strong);
  font: 0.8125rem / 1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.output {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-block-start: 4px solid var(--on);
  min-inline-size: 0;
}
.views {
  margin-block-start: 12px;
}
.views details {
  margin-block-start: 8px;
}
.views summary {
  min-block-size: 24px;
  cursor: pointer;
  color: var(--accent-text);
}
.views details .code-view {
  margin-block-start: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.site-foot {
  margin-block-start: 64px;
  font-size: 0.875rem;
}

/* The rendered output: the classes the pipeline emits. */
.prose {
  font-family: var(--prose);
  font-size: var(--fs-prose);
  line-height: 1.65;
  overflow-wrap: break-word;
}
.prose > :first-child {
  margin-block-start: 0;
}
.prose > :last-child {
  margin-block-end: 0;
}
.prose :where(h2, h3, h4) {
  margin: 1.6em 0 0.5em;
  line-height: 1.25;
}
.prose :where(p, ul, ol) {
  margin: 0 0 1em;
}
.prose :where(ul, ol) {
  padding-inline-start: 1.5em;
}
.prose li {
  margin-block-end: 0.3em;
}
.prose ul.contains-task-list {
  list-style: none;
  padding-inline-start: 0.25em;
}
.prose blockquote {
  margin: 1.25em 0;
  padding: 0.25em 0 0.25em 1em;
  border-inline-start: 3px solid var(--line-strong);
  color: var(--muted);
}
.prose hr {
  margin: 2em 0;
  border: 0;
  border-block-start: 1px solid var(--line-strong);
}
.prose img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 6px;
}
.prose a.image-link {
  display: inline-block;
  text-decoration: none;
}
.prose figure {
  margin: 1.5em 0;
}
.prose figcaption {
  margin-block-start: 0.5em;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.prose figcaption p {
  margin: 0;
}
.figure-credit {
  display: block;
  margin-block-start: 0.25em;
  font-size: 0.8125rem;
}
.table-scroll {
  overflow-x: auto;
  margin: 1.25em 0;
}
.prose table {
  inline-size: max-content;
  min-inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 0.9375rem;
}
.prose :where(th, td) {
  padding: 0.5em 0.75em;
  border: 1px solid var(--line);
  text-align: start;
}
.prose th {
  background: var(--raised);
}
.prose :where(th, td)[align="right"] {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.prose :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--sunken);
  overflow-wrap: anywhere;
}
.prose pre {
  margin: 1.25em 0;
  padding: 1em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--sunken);
  font: 0.875rem / 1.6 var(--mono);
}
/* Shiki writes both themes' colors as custom properties; light-dark() picks by the page's color-scheme, which Capsomer's tokens
   set. The themes' own backgrounds are used because their token colors are tuned to them. */
.prose pre.shiki {
  background: light-dark(var(--shiki-light-bg), var(--shiki-dark-bg));
}
.prose .shiki,
.prose .shiki span {
  color: light-dark(var(--shiki-light), var(--shiki-dark));
}
.prose .shiki .line.highlighted {
  display: inline-block;
  min-inline-size: 100%;
  background: var(--accent-soft);
}
.heading-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 24px;
  min-block-size: 24px;
  margin-inline-start: 0.25em;
  color: var(--muted);
  /* Underlined, so it is told from the heading text by more than a color --muted cannot make 3:1 against it in the dark theme. */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose .footnotes {
  margin-block-start: 1.5em;
  padding-block-start: 1em;
  border-block-start: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
}
.prose [data-footnote-ref],
.prose .data-footnote-backref {
  display: inline-block;
  min-inline-size: 24px;
  text-align: center;
}
.post-details {
  margin: 1em 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.post-details > summary {
  padding: 0.5em 0.75em;
  min-block-size: 24px;
  cursor: pointer;
  font-family: var(--ui);
  font-weight: 600;
}
.post-details > :not(summary) {
  margin: 0;
  padding: 0 0.75em 0.75em;
}
.post-note {
  margin: 1em 0;
  padding: 0.75em 1em;
  border-inline-start: 3px solid var(--accent-line);
  background: var(--raised);
  font-size: 0.9375rem;
}
.post-note p {
  margin: 0;
}
.post-note-kind {
  display: block;
  font-family: var(--ui);
  font-size: 0.8125rem;
  color: var(--accent-text);
}
.prose .pull-quote {
  margin: 0.5em 0;
  font-size: 1.3em;
  line-height: 1.35;
  color: var(--accent-text);
  text-wrap: balance;
}
.prose .swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.prose .swatch-chip {
  inline-size: 0.85em;
  block-size: 0.85em;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 0.15em;
  background: var(--swatch, transparent);
}
@media (forced-colors: active) {
  .prose .swatch-chip {
    border-color: CanvasText;
  }
}
.prose .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.25em;
}
.diagram-title {
  margin: 0 0 0.5em;
  font-family: var(--ui);
  font-weight: 600;
}
.diagram-image {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
/* An SVG in an <img> cannot read the page's custom properties, so each theme has its own drawing. */
.diagram-dark,
.figure-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .diagram-light,
  .figure-light {
    display: none;
  }
  .diagram-dark,
  .figure-dark {
    display: block;
  }
}
.prose .enarratio svg {
  max-inline-size: 100%;
  block-size: auto;
}