/*! CARGO/19 CSS v1.3.1 | MIT License | Independent operational UI framework */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
@layer c19.reset, c19.tokens, c19.base, c19.typography, c19.layout, c19.components, c19.utilities, c19.motion;

@layer c19.tokens {
  :root,
  [data-c19-theme="paper"],
  .c19-theme-paper {
    color-scheme: light;

    --c19-font-sans: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c19-font-display: "Rajdhani", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --c19-font-label: "Rajdhani", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --c19-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --c19-bg: #e9e7dd;
    --c19-surface: #f8f7f2;
    --c19-surface-raised: #ffffff;
    --c19-surface-sunken: #deddd4;
    --c19-ink: #141512;
    --c19-ink-muted: #5c5f59;
    --c19-border: #94978e;
    --c19-border-strong: #555950;
    --c19-grid: rgb(19 21 18 / 0.055);

    /* Accessible interface colors. */
    --c19-signal-red: #c41f2a;
    --c19-life-gray: #70756f;
    --c19-vacuum-black: #0c0d0b;
    --c19-process-yellow: #e4b526;
    --c19-process-orange: #d75f12;
    --c19-cold-blue: #1c5fa8;
    --c19-biological-green: #1f7954;

    /* Fixed seven-color equipment-sign palette. */
    --c19-icon-frame: #ed2024;
    --c19-icon-plate: #e5e8f1;
    --c19-icon-structure: #847a73;
    --c19-icon-dark: #0f0e09;
    --c19-icon-process: #e76c1a;
    --c19-icon-cold: #2f3795;
    --c19-icon-bio: #3f5f2d;
    --c19-icon-outline: transparent;
    --c19-icon-cutout: var(--c19-surface);

    --c19-on-red: #ffffff;
    --c19-on-gray: #111310;
    --c19-on-black: #ffffff;
    --c19-on-yellow: #151613;
    --c19-on-orange: #151613;
    --c19-on-blue: #ffffff;
    --c19-on-green: #ffffff;

    --c19-info: var(--c19-cold-blue);
    --c19-success: var(--c19-biological-green);
    --c19-warning: var(--c19-process-yellow);
    --c19-danger: var(--c19-signal-red);

    --c19-focus: #005fc7;
    --c19-selection: #ffc6cd;
    --c19-shadow-color: 19 21 18;

    --c19-space-1: 0.25rem;
    --c19-space-2: 0.5rem;
    --c19-space-3: 0.75rem;
    --c19-space-4: 1rem;
    --c19-space-5: 1.5rem;
    --c19-space-6: 2rem;
    --c19-space-7: 3rem;
    --c19-space-8: 4rem;
    --c19-space-9: 6rem;
    --c19-space-10: 8rem;

    --c19-text-xs: 0.75rem;
    --c19-text-sm: 0.875rem;
    --c19-text-md: 1rem;
    --c19-text-lg: 1.25rem;
    --c19-text-xl: clamp(1.5rem, 2vw, 2rem);
    --c19-text-2xl: clamp(2rem, 4vw, 3.75rem);
    --c19-text-3xl: clamp(3rem, 8vw, 7.5rem);

    --c19-radius-sm: 0.25rem;
    --c19-radius-md: 0.625rem;
    --c19-radius-lg: 1rem;
    --c19-radius-pill: 999px;

    --c19-line: 1px;
    --c19-line-strong: 2px;
    --c19-icon-ratio: 19 / 18;
    --c19-content: 78rem;
    --c19-content-wide: 94rem;
    --c19-sidebar: 15.5rem;
    --c19-gutter: clamp(1rem, 3vw, 2.5rem);
    --c19-control-height: 2.75rem;

    --c19-shadow-1: 0 1px 0 rgb(var(--c19-shadow-color) / 0.18), 0 10px 28px rgb(var(--c19-shadow-color) / 0.07);
    --c19-shadow-2: 0 1px 0 rgb(var(--c19-shadow-color) / 0.22), 0 22px 60px rgb(var(--c19-shadow-color) / 0.13);

    --c19-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --c19-duration-fast: 110ms;
    --c19-duration: 220ms;
    --c19-duration-slow: 760ms;
    --c19-duration-signal: 980ms;
    --c19-stagger-signal: 55ms;
  }

  [data-c19-theme="bridge"],
  .c19-theme-bridge {
    color-scheme: dark;
    --c19-bg: #080b09;
    --c19-surface: #111512;
    --c19-surface-raised: #171c18;
    --c19-surface-sunken: #050705;
    --c19-ink: #f1f0e8;
    --c19-ink-muted: #adb1a9;
    --c19-border: #4b514a;
    --c19-border-strong: #8b9189;
    --c19-grid: rgb(241 242 233 / 0.035);
    --c19-signal-red: #ff5f65;
    --c19-life-gray: #a8aea7;
    --c19-vacuum-black: #020302;
    --c19-process-yellow: #f2c94c;
    --c19-process-orange: #ff8124;
    --c19-cold-blue: #6da7eb;
    --c19-biological-green: #5fc88d;
    --c19-icon-frame: #ed2024;
    --c19-icon-plate: #e5e8f1;
    --c19-icon-structure: #847a73;
    --c19-icon-dark: #0f0e09;
    --c19-icon-process: #e76c1a;
    --c19-icon-cold: #2f3795;
    --c19-icon-bio: #3f5f2d;
    --c19-icon-outline: #ffffff;
    --c19-icon-cutout: var(--c19-surface);
    --c19-on-red: #170507;
    --c19-on-gray: #111310;
    --c19-on-black: #ffffff;
    --c19-on-yellow: #151613;
    --c19-on-orange: #151613;
    --c19-on-blue: #080a1c;
    --c19-on-green: #06110a;
    --c19-focus: #a7b1ff;
    --c19-selection: #742931;
    --c19-shadow-color: 0 0 0;
  }

  @media (prefers-color-scheme: dark) {
    [data-c19-theme="auto"] {
      color-scheme: dark;
      --c19-bg: #080b09;
      --c19-surface: #111512;
      --c19-surface-raised: #171c18;
      --c19-surface-sunken: #050705;
      --c19-ink: #f1f0e8;
      --c19-ink-muted: #adb1a9;
      --c19-border: #4b514a;
      --c19-border-strong: #8b9189;
      --c19-grid: rgb(241 242 233 / 0.035);
      --c19-signal-red: #ff5f65;
      --c19-life-gray: #a8aea7;
      --c19-vacuum-black: #020302;
      --c19-process-yellow: #f2c94c;
      --c19-process-orange: #ff8124;
      --c19-cold-blue: #6da7eb;
      --c19-biological-green: #5fc88d;
      --c19-icon-frame: #ed2024;
      --c19-icon-plate: #e5e8f1;
      --c19-icon-structure: #847a73;
      --c19-icon-dark: #0f0e09;
      --c19-icon-process: #e76c1a;
      --c19-icon-cold: #2f3795;
      --c19-icon-bio: #3f5f2d;
      --c19-icon-outline: #ffffff;
      --c19-icon-cutout: var(--c19-surface);
      --c19-on-red: #170507;
      --c19-on-gray: #111310;
      --c19-on-black: #ffffff;
      --c19-on-yellow: #151613;
      --c19-on-orange: #151613;
      --c19-on-blue: #080a1c;
      --c19-on-green: #06110a;
      --c19-focus: #a7b1ff;
      --c19-selection: #742931;
      --c19-shadow-color: 0 0 0;
    }
  }
}

@layer c19.reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(html) {
    min-block-size: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 2;
  }
  :where(body) { min-block-size: 100%; }
  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
  :where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
  :where(img, picture, svg, canvas, video) { display: block; max-inline-size: 100%; }
  :where(button, input, textarea, select) { color: inherit; font: inherit; }
  :where(button, [role="button"]) { touch-action: manipulation; }
  :where(textarea:not([rows])) { min-block-size: 8em; }
  :where(table) { border-collapse: collapse; border-spacing: 0; }
  :where(a:not([class])) { color: currentColor; text-decoration-skip-ink: auto; }
  :where(:target) { scroll-margin-block: 5rem; }
}

@layer c19.base {
  ::selection { background: var(--c19-selection); }

  .c19-root {
    min-block-size: 100dvh;
    overflow-x: clip;
    isolation: isolate;
    background: var(--c19-bg);
    color: var(--c19-ink);
    font-family: var(--c19-font-sans);
    font-size: var(--c19-text-md);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  .c19-root :where(h1, h2, h3, h4) {
    color: var(--c19-ink);
    font-family: var(--c19-font-display);
    font-weight: 900;
  }
  .c19-root :where(a) { color: var(--c19-cold-blue); text-underline-offset: 0.18em; }
  .c19-root :where(code, kbd, samp, pre) { font-family: var(--c19-font-mono); }
  .c19-root :where(hr) { border: 0; border-block-start: var(--c19-line) solid var(--c19-border); }
  .c19-root :where(:focus-visible) { outline: 3px solid var(--c19-focus); outline-offset: 3px; }
  .c19-root :where([hidden]) { display: none !important; }

  .c19-skip-link {
    position: fixed;
    inset-block-start: var(--c19-space-3);
    inset-inline-start: var(--c19-space-3);
    z-index: 100;
    transform: translateY(-180%);
    background: var(--c19-signal-red);
    color: var(--c19-on-red) !important;
    padding: var(--c19-space-3) var(--c19-space-4);
    font-family: var(--c19-font-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .c19-skip-link:focus { transform: translateY(0); }
}

@layer c19.typography {
  .c19-display {
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-3xl);
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 0.78;
    text-transform: uppercase;
  }
  .c19-heading-1 {
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-2xl);
    font-weight: 900;
    letter-spacing: 0.075em;
    line-height: 0.92;
    text-wrap: balance;
    text-transform: uppercase;
  }
  .c19-heading-2 {
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-xl);
    font-weight: 900;
    letter-spacing: 0.065em;
    line-height: 1;
    text-wrap: balance;
    text-transform: uppercase;
  }
  .c19-heading-3 {
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-lg);
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.05;
    text-transform: uppercase;
  }
  .c19-kicker, .c19-label-text {
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .c19-kicker { color: var(--c19-signal-red); }
  .c19-lede { max-inline-size: 62ch; color: var(--c19-ink-muted); font-size: var(--c19-text-lg); line-height: 1.65; }
  .c19-caption { color: var(--c19-ink-muted); font-size: var(--c19-text-sm); line-height: 1.5; }
  .c19-mono { font-family: var(--c19-font-mono); font-variant-numeric: tabular-nums slashed-zero; }
  .c19-data { font-family: var(--c19-font-mono); font-size: var(--c19-text-sm); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0.035em; }

  .c19-title-reveal, .c19-title-static {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.08em, 1.1vw, 0.22em);
    align-items: baseline;
    max-inline-size: 100%;
    overflow: clip;
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-3xl);
    font-weight: 900;
    line-height: 0.78;
    text-transform: uppercase;
  }
  .c19-title-reveal > span, .c19-title-static > span { display: inline-block; transform-origin: 50% 50%; }
  .c19-title-reveal > span {
    transform: scaleX(0.16);
    opacity: 0.72;
    animation: c19-title-resolve 0.78s var(--c19-ease-standard) forwards;
    animation-delay: calc(var(--i, 0) * 44ms);
  }
  .c19-signal-acquire {
    position: relative;
    padding-block-end: 0.12em;
  }
  .c19-signal-acquire::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: max(1px, 0.012em);
    content: "";
    transform: scaleX(0);
    transform-origin: 50% 50%;
    opacity: 0;
    background: currentColor;
    animation: c19-signal-line 420ms var(--c19-ease-standard) forwards;
    animation-delay: calc(var(--c19-duration-signal) + 3 * var(--c19-stagger-signal));
  }
  .c19-title-reveal.c19-signal-acquire > span {
    transform: translateY(-0.035em) scaleX(0.04);
    opacity: 0.42;
    animation: c19-signal-acquire var(--c19-duration-signal) cubic-bezier(0.16, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * var(--c19-stagger-signal));
  }
  .c19-title-lockup { display: grid; grid-template-columns: minmax(0, auto) auto; gap: clamp(1rem, 4vw, 4rem); align-items: end; inline-size: fit-content; max-inline-size: 100%; }
  .c19-title-lockup__word { font-family: var(--c19-font-display); font-size: clamp(4.4rem, 13vw, 11rem); font-weight: 900; letter-spacing: 0.13em; line-height: 0.72; text-transform: uppercase; }
  .c19-title-lockup__index { color: var(--c19-signal-red); font-family: var(--c19-font-display); font-size: clamp(4rem, 11vw, 9.25rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.72; }

  .c19-rule-label { display: grid; grid-template-columns: auto 1fr; gap: var(--c19-space-3); align-items: center; color: var(--c19-ink-muted); font-family: var(--c19-font-label); font-size: var(--c19-text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
  .c19-rule-label::after { block-size: 1px; content: ""; background: var(--c19-border); }
  .c19-prose { max-inline-size: 72ch; }
  .c19-prose :where(h2, h3) { margin-block-start: 2.3em; margin-block-end: 0.75em; }
  .c19-prose :where(p, ul, ol, pre, table, blockquote) + :where(p, ul, ol, pre, table, blockquote) { margin-block-start: 1em; }
  .c19-prose :where(ul, ol) { padding-inline-start: 1.35rem; }

  .c19-title-reveal > :nth-child(1) { --i: 0; }
  .c19-title-reveal > :nth-child(2) { --i: 1; }
  .c19-title-reveal > :nth-child(3) { --i: 2; }
  .c19-title-reveal > :nth-child(4) { --i: 3; }
  .c19-title-reveal > :nth-child(5) { --i: 4; }
  .c19-title-reveal > :nth-child(6) { --i: 5; }
  .c19-title-reveal > :nth-child(7) { --i: 6; }
  .c19-title-reveal > :nth-child(8) { --i: 7; }
  .c19-title-reveal > :nth-child(9) { --i: 8; }
  .c19-title-reveal > :nth-child(10) { --i: 9; }
  .c19-title-reveal > :nth-child(11) { --i: 10; }
  .c19-title-reveal > :nth-child(12) { --i: 11; }

  @media (max-width: 42rem) {
    .c19-title-lockup { grid-template-columns: minmax(0, 1fr); gap: var(--c19-space-4); }
    .c19-title-lockup__word { font-size: clamp(3.35rem, 19vw, 5.25rem); letter-spacing: 0.08em; }
    .c19-title-lockup__index { font-size: clamp(3rem, 18vw, 4.75rem); }
  }
}

@layer c19.layout {
  .c19-container {
    inline-size: calc(100% - (2 * var(--c19-gutter)));
    max-inline-size: var(--c19-content);
    min-inline-size: 0;
    margin-inline: auto;
  }
  .c19-container--wide { --c19-content: var(--c19-content-wide); }
  .c19-container--narrow { --c19-content: 58rem; }
  .c19-section { padding-block: clamp(3rem, 7vw, 6.5rem); }
  .c19-stack { display: flex; flex-direction: column; gap: var(--c19-stack-gap, var(--c19-space-4)); min-inline-size: 0; }
  .c19-cluster { display: flex; flex-wrap: wrap; gap: var(--c19-cluster-gap, var(--c19-space-3)); align-items: var(--c19-cluster-align, center); justify-content: var(--c19-cluster-justify, flex-start); min-inline-size: 0; }
  .c19-grid { display: grid; grid-template-columns: repeat(var(--c19-grid-cols, 12), minmax(0, 1fr)); gap: var(--c19-grid-gap, var(--c19-space-4)); min-inline-size: 0; }
  .c19-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--c19-grid-min, 15rem)), 1fr)); gap: var(--c19-grid-gap, var(--c19-space-4)); min-inline-size: 0; }
  .c19-with-sidebar, .c19-doc-layout { display: grid; grid-template-columns: minmax(0, var(--c19-sidebar)) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  .c19-with-sidebar > *, .c19-doc-layout > * { min-inline-size: 0; }
  .c19-sticky { position: sticky; inset-block-start: var(--c19-sticky-top, 5rem); }
  .c19-center { display: grid; place-items: center; }
  .c19-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 5rem); align-items: var(--c19-split-align, center); min-inline-size: 0; }
  .c19-page { min-block-size: 100dvh; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .c19-page > * { min-inline-size: 0; max-inline-size: 100%; }
  .c19-scroll-row { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  @media (max-width: 58rem) {
    .c19-with-sidebar, .c19-doc-layout, .c19-split { grid-template-columns: minmax(0, 1fr); }
    .c19-with-sidebar > .c19-sticky { position: static; }
  }
}

@layer c19.components {
  .c19-inline-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .c19-appbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    border-block-end: var(--c19-line) solid var(--c19-border);
    background: color-mix(in srgb, var(--c19-bg) 86%, transparent);
    backdrop-filter: blur(14px) saturate(120%);
  }

  .c19-appbar__inner {
    min-block-size: 4rem;
    display: flex;
    gap: var(--c19-space-4);
    align-items: center;
    justify-content: space-between;
  }

  .c19-brand {
    display: inline-flex;
    gap: var(--c19-space-3);
    align-items: center;
    color: var(--c19-ink);
    font-family: var(--c19-font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .c19-brand__mark {
    inline-size: 2rem;
    aspect-ratio: var(--c19-icon-ratio);
    display: grid;
    place-items: center;
    border: 2px solid var(--c19-signal-red);
    border-radius: var(--c19-radius-sm);
    color: var(--c19-signal-red);
  }

  .c19-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .c19-nav__link {
    display: flex;
    gap: var(--c19-space-2);
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-inline-start: 3px solid transparent;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--c19-duration-fast), background var(--c19-duration-fast), border-color var(--c19-duration-fast);
  }

  .c19-nav__link:hover,
  .c19-nav__link[aria-current="page"] {
    border-inline-start-color: var(--c19-signal-red);
    background: color-mix(in srgb, var(--c19-signal-red) 10%, transparent);
    color: var(--c19-ink);
  }

  .c19-panel,
  .c19-card {
    border: var(--c19-line) solid var(--c19-panel-border, var(--c19-border));
    border-radius: var(--c19-panel-radius, var(--c19-radius-md));
    background: var(--c19-panel-bg, var(--c19-surface));
    box-shadow: var(--c19-panel-shadow, var(--c19-shadow-1));
  }

  .c19-panel {
    overflow: clip;
    container-type: inline-size;
  }

  .c19-panel__header,
  .c19-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c19-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--c19-space-3) var(--c19-space-4);
  }

  .c19-panel__header {
    border-block-end: var(--c19-line) solid var(--c19-panel-divider, var(--c19-border));
    background: var(--c19-panel-header-bg, var(--c19-surface-raised));
  }

  .c19-panel__footer {
    border-block-start: var(--c19-line) solid var(--c19-panel-divider, var(--c19-border));
    background: var(--c19-panel-footer-bg, var(--c19-surface-raised));
  }

  .c19-panel__body,
  .c19-card {
    padding: var(--c19-panel-padding, var(--c19-space-5));
  }

  .c19-card {
    border-color: var(--c19-card-border, var(--c19-panel-border, var(--c19-border)));
    border-radius: var(--c19-card-radius, var(--c19-panel-radius, var(--c19-radius-md)));
    background: var(--c19-card-bg, var(--c19-panel-bg, var(--c19-surface)));
    padding: var(--c19-card-padding, var(--c19-panel-padding, var(--c19-space-5)));
    box-shadow: var(--c19-card-shadow, var(--c19-panel-shadow, var(--c19-shadow-1)));
  }

  .c19-panel__title {
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .c19-panel--critical {
    border-color: var(--c19-signal-red);
  }

  .c19-panel--critical .c19-panel__header {
    background: var(--c19-signal-red);
    color: var(--c19-on-red);
  }

  .c19-card {
    transition: transform var(--c19-duration) var(--c19-ease-standard), box-shadow var(--c19-duration) var(--c19-ease-standard), border-color var(--c19-duration-fast);
  }

  .c19-card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--c19-border-strong);
    box-shadow: var(--c19-shadow-2);
  }

  .c19-symbol {
    inline-size: var(--c19-symbol-size, 4rem);
    block-size: calc(var(--c19-symbol-size, 4rem) * 18 / 19);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0.8em;
    background: var(--c19-symbol-bg, var(--c19-surface-raised));
    color: var(--c19-symbol-color, var(--c19-signal-red));
    box-shadow: 0 0 0 0.12em var(--c19-symbol-outline, transparent);
  }

  .c19-symbol > .c19-icon {
    inline-size: 92%;
    block-size: 92%;
  }

  .c19-symbol--red { --c19-symbol-color: var(--c19-signal-red); }
  .c19-symbol--gray { --c19-symbol-color: var(--c19-life-gray); }
  .c19-symbol--black { --c19-symbol-color: var(--c19-vacuum-black); }
  .c19-symbol--yellow { --c19-symbol-color: var(--c19-process-yellow); }
  .c19-symbol--blue { --c19-symbol-color: var(--c19-cold-blue); }
  .c19-symbol--green { --c19-symbol-color: var(--c19-biological-green); }

  [data-c19-theme="bridge"] .c19-symbol,
  .c19-theme-bridge .c19-symbol {
    --c19-symbol-outline: #ffffff;
    box-shadow: 0 0 0 0.08em var(--c19-bg), 0 0 0 0.18em var(--c19-symbol-outline);
  }

  [data-c19-theme="bridge"] .c19-symbol--black,
  .c19-theme-bridge .c19-symbol--black {
    --c19-symbol-bg: var(--c19-ink);
  }

  .c19-icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
  }

  .c19-button,
  .c19-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--c19-space-2);
    min-block-size: var(--c19-button-height, 2.75rem);
    border: var(--c19-line-strong) solid var(--c19-button-border, transparent);
    border-radius: var(--c19-button-radius, var(--c19-radius-sm));
    background: var(--c19-button-bg, var(--c19-signal-red));
    color: var(--c19-button-ink, var(--c19-on-red));
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-sm);
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--c19-duration-fast), filter var(--c19-duration-fast), background var(--c19-duration-fast), border-color var(--c19-duration-fast);
  }

  .c19-button {
    padding: var(--c19-button-padding, 0.78rem 1.05rem);
  }

  .c19-icon-button {
    inline-size: 2.75rem;
    padding: 0;
  }

  .c19-button:hover,
  .c19-icon-button:hover {
    filter: brightness(1.06);
  }

  .c19-button:active,
  .c19-icon-button:active {
    transform: translateY(1px);
  }

  .c19-button:disabled,
  .c19-icon-button:disabled,
  .c19-button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.5);
  }

  .c19-button--secondary,
  .c19-icon-button--secondary {
    --c19-button-border: var(--c19-border-strong);
    --c19-button-bg: var(--c19-surface-raised);
    --c19-button-ink: var(--c19-ink);
  }

  .c19-button--ghost,
  .c19-icon-button--ghost {
    --c19-button-border: transparent;
    --c19-button-bg: transparent;
    --c19-button-ink: var(--c19-ink);
  }

  .c19-button--warning {
    --c19-button-bg: var(--c19-process-yellow);
    --c19-button-ink: var(--c19-on-yellow);
  }

  .c19-button--danger {
    --c19-button-border: var(--c19-border-strong);
    --c19-button-bg: var(--c19-vacuum-black);
    --c19-button-ink: var(--c19-on-black);
  }

  .c19-button--small {
    min-block-size: 2.15rem;
    padding: 0.54rem 0.75rem;
    font-size: var(--c19-text-xs);
  }

  .c19-field {
    display: grid;
    gap: 0.42rem;
    align-content: start;
  }

  .c19-field__label {
    color: var(--c19-ink);
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .c19-field__hint,
  .c19-field__error {
    font-size: var(--c19-text-sm);
  }

  .c19-field__hint { color: var(--c19-ink-muted); }
  .c19-field__error { color: var(--c19-signal-red); }

  .c19-input,
  .c19-textarea,
  .c19-select {
    inline-size: 100%;
    min-block-size: var(--c19-control-height);
    border: var(--c19-line-strong) solid var(--c19-control-border, var(--c19-border));
    border-radius: var(--c19-control-radius, var(--c19-radius-sm));
    background-color: var(--c19-control-bg, var(--c19-surface-raised));
    color: var(--c19-control-ink, var(--c19-ink));
    padding: var(--c19-control-padding, 0.68rem 0.78rem);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
    transition: border-color var(--c19-duration-fast), box-shadow var(--c19-duration-fast);
  }

  .c19-input,
  .c19-select {
    block-size: var(--c19-control-height);
    line-height: 1.2;
  }

  .c19-input::placeholder,
  .c19-textarea::placeholder {
    color: var(--c19-ink-muted);
    opacity: 0.75;
  }

  .c19-input:hover,
  .c19-textarea:hover,
  .c19-select:hover {
    border-color: var(--c19-border-strong);
  }

  .c19-input:focus,
  .c19-textarea:focus,
  .c19-select:focus {
    border-color: var(--c19-focus);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c19-focus) 24%, transparent);
  }

  .c19-field[aria-invalid="true"] .c19-input,
  .c19-input[aria-invalid="true"] {
    border-color: var(--c19-signal-red);
  }

  .c19-select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23979b93' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-position: right 0.9rem center;
    background-size: 0.75rem 0.5rem;
    background-repeat: no-repeat;
  }

  .c19-input-group {
    display: flex;
    align-items: stretch;
    min-inline-size: 0;
  }

  .c19-input-group > * {
    position: relative;
    border-radius: 0;
  }

  .c19-input-group > * + * {
    margin-inline-start: calc(var(--c19-line-strong) * -1);
  }

  .c19-input-group > :first-child {
    border-start-start-radius: var(--c19-control-radius, var(--c19-radius-sm));
    border-end-start-radius: var(--c19-control-radius, var(--c19-radius-sm));
  }

  .c19-input-group > :last-child {
    border-start-end-radius: var(--c19-control-radius, var(--c19-radius-sm));
    border-end-end-radius: var(--c19-control-radius, var(--c19-radius-sm));
  }

  .c19-input-group > :is(.c19-input, .c19-select) {
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .c19-input-group > :focus,
  .c19-input-group > :focus-visible {
    z-index: 1;
  }

  .c19-input-group__addon {
    min-block-size: var(--c19-control-height);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: var(--c19-line-strong) solid var(--c19-control-border, var(--c19-border));
    background: var(--c19-control-addon-bg, var(--c19-surface-sunken));
    color: var(--c19-control-addon-ink, var(--c19-ink-muted));
    padding-inline: 0.78rem;
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-sm);
    white-space: nowrap;
  }

  .c19-choice {
    display: inline-flex;
    gap: var(--c19-space-2);
    align-items: center;
    cursor: pointer;
  }

  .c19-choice > input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin: 0;
    accent-color: var(--c19-signal-red);
  }

  .c19-switch {
    display: inline-flex;
    gap: var(--c19-space-2);
    align-items: center;
    cursor: pointer;
  }

  .c19-switch > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .c19-switch__track {
    inline-size: 2.7rem;
    block-size: 1.45rem;
    display: inline-flex;
    align-items: center;
    padding: 0.18rem;
    border: var(--c19-line-strong) solid var(--c19-border-strong);
    border-radius: var(--c19-radius-pill);
    background: var(--c19-surface-sunken);
    transition: background var(--c19-duration-fast), border-color var(--c19-duration-fast);
  }

  .c19-switch__track::before {
    inline-size: 0.88rem;
    block-size: 0.88rem;
    border-radius: 50%;
    content: "";
    background: var(--c19-ink-muted);
    transition: transform var(--c19-duration) var(--c19-ease-standard), background var(--c19-duration-fast);
  }

  .c19-switch > input:checked + .c19-switch__track {
    border-color: var(--c19-biological-green);
    background: color-mix(in srgb, var(--c19-biological-green) 30%, var(--c19-surface));
  }

  .c19-switch > input:checked + .c19-switch__track::before {
    transform: translateX(1.2rem);
    background: var(--c19-biological-green);
  }

  .c19-switch > input:focus-visible + .c19-switch__track {
    outline: 3px solid var(--c19-focus);
    outline-offset: 3px;
  }

  .c19-badge,
  .c19-status {
    display: inline-flex;
    gap: 0.42rem;
    align-items: center;
    min-block-size: 1.65rem;
    border: var(--c19-line) solid var(--c19-border);
    border-radius: var(--c19-radius-pill);
    background: var(--c19-surface-raised);
    color: var(--c19-ink);
    padding: 0.25rem 0.58rem;
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .c19-badge--red { border-color: var(--c19-signal-red); color: var(--c19-signal-red); }
  .c19-badge--yellow { border-color: var(--c19-process-yellow); color: var(--c19-ink); background: color-mix(in srgb, var(--c19-process-yellow) 24%, var(--c19-surface)); }
  .c19-badge--blue { border-color: var(--c19-cold-blue); color: var(--c19-cold-blue); }
  .c19-badge--green { border-color: var(--c19-biological-green); color: var(--c19-biological-green); }

  .c19-status::before {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-radius: 50%;
    content: "";
    background: var(--c19-status-color, var(--c19-life-gray));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c19-status-color, var(--c19-life-gray)) 24%, transparent);
  }

  .c19-status--ok { --c19-status-color: var(--c19-biological-green); }
  .c19-status--warn { --c19-status-color: var(--c19-process-yellow); }
  .c19-status--danger { --c19-status-color: var(--c19-signal-red); }
  .c19-status--cold { --c19-status-color: var(--c19-cold-blue); }

  .c19-alert {
    --c19-alert-accent: var(--c19-life-gray);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--c19-space-3);
    align-items: start;
    border: var(--c19-line) solid var(--c19-alert-accent);
    border-inline-start-width: 0.4rem;
    border-radius: var(--c19-radius-sm);
    background: color-mix(in srgb, var(--c19-alert-accent) 9%, var(--c19-surface));
    padding: var(--c19-space-3) var(--c19-space-4);
  }

  .c19-alert--info { --c19-alert-accent: var(--c19-cold-blue); }
  .c19-alert--success { --c19-alert-accent: var(--c19-biological-green); }
  .c19-alert--warning { --c19-alert-accent: var(--c19-process-yellow); }
  .c19-alert--danger { --c19-alert-accent: var(--c19-signal-red); }

  .c19-alert__title {
    font-family: var(--c19-font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .c19-tabs {
    display: grid;
    gap: var(--c19-space-4);
  }

  .c19-tabs__list {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-block-end: var(--c19-line) solid var(--c19-border);
  }

  .c19-tabs__tab {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--c19-ink-muted);
    padding: 0.75rem 1rem;
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .c19-tabs__tab::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 3px;
    content: "";
    transform: scaleX(0);
    background: var(--c19-signal-red);
    transition: transform var(--c19-duration) var(--c19-ease-standard);
  }

  .c19-tabs__tab[aria-selected="true"] {
    color: var(--c19-ink);
  }

  .c19-tabs__tab[aria-selected="true"]::after {
    transform: scaleX(1);
  }

  .c19-table-wrap {
    overflow-x: auto;
    border: var(--c19-line) solid var(--c19-border);
    border-radius: var(--c19-radius-sm);
  }

  .c19-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--c19-text-sm);
  }

  .c19-table :where(th, td) {
    padding: 0.78rem 0.9rem;
    border-block-end: var(--c19-line) solid var(--c19-border);
    text-align: start;
    vertical-align: middle;
  }

  .c19-table th {
    background: var(--c19-surface-raised);
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .c19-table tbody tr:hover {
    background: color-mix(in srgb, var(--c19-cold-blue) 7%, transparent);
  }

  .c19-table tr:last-child td {
    border-block-end: 0;
  }

  .c19-progress {
    inline-size: 100%;
    block-size: 0.75rem;
    overflow: hidden;
    border: var(--c19-line) solid var(--c19-border-strong);
    border-radius: var(--c19-radius-pill);
    background: var(--c19-surface-sunken);
  }

  .c19-progress__bar {
    inline-size: clamp(0%, calc(var(--c19-value, 0) * 1%), 100%);
    block-size: 100%;
    background: var(--c19-progress-color, var(--c19-biological-green));
    transition: inline-size var(--c19-duration-slow) var(--c19-ease-standard);
  }

  .c19-segmented-meter {
    display: grid;
    grid-template-columns: repeat(var(--c19-segments, 10), 1fr);
    gap: 0.25rem;
  }

  .c19-segmented-meter > span {
    block-size: 0.75rem;
    border: var(--c19-line) solid var(--c19-border);
    background: var(--c19-surface-sunken);
  }

  .c19-segmented-meter > span[data-active] {
    border-color: var(--c19-meter-color, var(--c19-process-yellow));
    background: var(--c19-meter-color, var(--c19-process-yellow));
  }

  .c19-stat {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;
  }

  .c19-stat__label {
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-display);
    font-size: var(--c19-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .c19-stat__value {
    overflow: hidden;
    font-family: var(--c19-font-mono);
    font-size: clamp(1.4rem, 5cqi, 2.5rem);
    font-variant-numeric: tabular-nums slashed-zero;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .c19-terminal {
    position: relative;
    overflow: hidden;
    border: var(--c19-line) solid color-mix(in srgb, var(--c19-biological-green) 70%, var(--c19-border));
    border-radius: var(--c19-radius-sm);
    background: #020704;
    color: #7cff9e;
    padding: var(--c19-space-5);
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-sm);
    line-height: 1.65;
    box-shadow: inset 0 0 2rem rgb(25 255 92 / 0.06);
  }

  .c19-terminal__prompt::before {
    content: "> ";
    color: #ffffff;
  }

  .c19-commandbar {
    display: flex;
    gap: var(--c19-space-2);
    align-items: center;
    border: var(--c19-line) solid var(--c19-border);
    border-radius: var(--c19-radius-sm);
    background: var(--c19-surface-raised);
    padding: var(--c19-space-2);
    box-shadow: var(--c19-shadow-2);
  }

  .c19-commandbar .c19-input {
    border: 0;
    box-shadow: none;
  }

  .c19-key {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.65rem;
    min-block-size: 1.55rem;
    border: var(--c19-line) solid var(--c19-border-strong);
    border-block-end-width: 3px;
    border-radius: var(--c19-radius-sm);
    background: var(--c19-surface-raised);
    padding: 0.12rem 0.38rem;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-xs);
  }

  .c19-accordion {
    border-block: var(--c19-line) solid var(--c19-border);
  }

  .c19-accordion + .c19-accordion {
    border-block-start: 0;
  }

  .c19-accordion > summary {
    display: flex;
    gap: var(--c19-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--c19-space-4);
    font-family: var(--c19-font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }

  .c19-accordion > summary::-webkit-details-marker { display: none; }
  .c19-accordion > summary::after { content: "+"; font-family: var(--c19-font-mono); }
  .c19-accordion[open] > summary::after { content: "−"; }
  .c19-accordion__body { padding: 0 var(--c19-space-4) var(--c19-space-4); color: var(--c19-ink-muted); }

  .c19-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--c19-space-2);
    align-items: center;
  }

  .c19-pagination a,
  .c19-pagination button {
    min-inline-size: 2.45rem;
    min-block-size: 2.45rem;
    display: grid;
    place-items: center;
    border: var(--c19-line) solid var(--c19-border);
    border-radius: var(--c19-radius-sm);
    background: var(--c19-surface-raised);
    color: var(--c19-ink);
    text-decoration: none;
  }

  .c19-pagination [aria-current="page"] {
    border-color: var(--c19-signal-red);
    background: var(--c19-signal-red);
    color: var(--c19-on-red);
  }

  .c19-menu-trigger {
    anchor-name: var(--c19-menu-anchor, --c19-menu-anchor-default);
  }

  .c19-menu[popover] {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 40;
    inline-size: min(18rem, calc(100vw - 2rem));
    max-block-size: min(28rem, calc(100dvh - 2rem));
    overflow: auto;
    transform: translate(-50%, -50%);
    border: var(--c19-line) solid var(--c19-menu-border, var(--c19-border-strong));
    border-radius: var(--c19-menu-radius, var(--c19-radius-sm));
    background: var(--c19-menu-bg, var(--c19-surface-raised));
    color: var(--c19-menu-ink, var(--c19-ink));
    padding: var(--c19-menu-padding, 0.35rem);
    box-shadow: var(--c19-menu-shadow, var(--c19-shadow-2));
    opacity: 0;
    transition:
      display var(--c19-duration-fast) allow-discrete,
      overlay var(--c19-duration-fast) allow-discrete,
      opacity var(--c19-duration-fast),
      transform var(--c19-duration-fast);
  }

  .c19-menu[popover]:popover-open {
    opacity: 1;
  }

  @starting-style {
    .c19-menu[popover]:popover-open {
      opacity: 0;
      transform: translate(-50%, calc(-50% - 0.25rem));
    }
  }

  @supports (position-anchor: --c19-anchor) {
    .c19-menu[popover] {
      position-anchor: var(--c19-menu-anchor, --c19-menu-anchor-default);
      inset: auto;
      top: anchor(bottom);
      left: anchor(left);
      margin-block-start: var(--c19-space-2);
      transform: none;
      position-try-fallbacks: flip-block, flip-inline;
    }

    @starting-style {
      .c19-menu[popover]:popover-open {
        transform: translateY(-0.25rem);
      }
    }
  }

  .c19-menu__label {
    display: block;
    padding: 0.52rem 0.65rem 0.32rem;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .c19-menu__item {
    inline-size: 100%;
    min-block-size: 2.4rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--c19-space-2);
    align-items: center;
    border: 0;
    border-radius: calc(var(--c19-menu-radius, var(--c19-radius-sm)) / 2);
    background: transparent;
    color: inherit;
    padding: 0.55rem 0.65rem;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .c19-menu__item:hover,
  .c19-menu__item:focus-visible,
  .c19-menu__item[aria-current="true"] {
    outline: 0;
    background: color-mix(in srgb, var(--c19-signal-red) 11%, transparent);
  }

  .c19-menu__item:disabled,
  .c19-menu__item[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .c19-menu__meta {
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-xs);
  }

  .c19-menu__separator {
    block-size: var(--c19-line);
    margin: 0.35rem 0.5rem;
    border: 0;
    background: var(--c19-menu-border, var(--c19-border));
  }

  .c19-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--c19-space-3);
    align-items: center;
    inline-size: min(100%, 28rem);
    border: var(--c19-line) solid var(--c19-border-strong);
    border-radius: var(--c19-radius-sm);
    background: var(--c19-surface-raised);
    padding: var(--c19-space-3);
    box-shadow: var(--c19-shadow-2);
  }

  .c19-dialog {
    inline-size: min(100% - 2rem, 38rem);
    border: var(--c19-line) solid var(--c19-dialog-border, var(--c19-border-strong));
    border-radius: var(--c19-dialog-radius, var(--c19-radius-md));
    background: var(--c19-dialog-bg, var(--c19-surface));
    color: var(--c19-dialog-ink, var(--c19-ink));
    padding: 0;
    box-shadow: var(--c19-shadow-2);
  }

  .c19-dialog::backdrop {
    background: rgb(0 0 0 / 0.72);
    backdrop-filter: blur(5px);
  }

  .c19-dialog__header,
  .c19-dialog__footer {
    display: flex;
    gap: var(--c19-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--c19-space-4);
    background: var(--c19-surface-raised);
  }

  .c19-dialog__header { border-block-end: var(--c19-line) solid var(--c19-border); }
  .c19-dialog__footer { border-block-start: var(--c19-line) solid var(--c19-border); }
  .c19-dialog__body { padding: var(--c19-space-5); }

  .c19-inline-loading {
    display: inline-flex;
    gap: var(--c19-space-2);
    align-items: center;
    color: var(--c19-loading-ink, var(--c19-ink-muted));
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .c19-spinner {
    inline-size: var(--c19-spinner-size, 1.15em);
    block-size: var(--c19-spinner-size, 1.15em);
    display: inline-block;
    flex: 0 0 auto;
    border: var(--c19-spinner-width, 2px) solid color-mix(in srgb, currentColor 24%, transparent);
    border-block-start-color: currentColor;
    border-radius: 50%;
    animation: c19-spinner 780ms steps(8, end) infinite;
  }

  .c19-spinner--large {
    --c19-spinner-size: 2rem;
    --c19-spinner-width: 3px;
  }

  .c19-button[aria-busy="true"] {
    cursor: progress;
  }

  [data-c19-tooltip] {
    position: relative;
  }

  [data-c19-tooltip]::after {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: calc(100% + 0.55rem);
    z-index: 30;
    inline-size: max-content;
    max-inline-size: 18rem;
    transform: translate(-50%, 0.25rem);
    opacity: 0;
    pointer-events: none;
    content: attr(data-c19-tooltip);
    border: var(--c19-line) solid var(--c19-border-strong);
    border-radius: var(--c19-radius-sm);
    background: var(--c19-vacuum-black);
    color: var(--c19-on-black);
    padding: 0.42rem 0.58rem;
    font-family: var(--c19-font-sans);
    font-size: var(--c19-text-xs);
    letter-spacing: normal;
    text-transform: none;
    box-shadow: var(--c19-shadow-1);
    transition: opacity var(--c19-duration-fast), transform var(--c19-duration-fast);
  }

  [data-c19-tooltip]:hover::after,
  [data-c19-tooltip]:focus-visible::after {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  .c19-skeleton {
    min-block-size: 1em;
    overflow: hidden;
    border-radius: var(--c19-radius-sm);
    background: var(--c19-surface-sunken);
  }

  .c19-skeleton::after {
    display: block;
    inline-size: 45%;
    block-size: 100%;
    content: "";
    transform: translateX(-120%);
    background: color-mix(in srgb, var(--c19-ink) 12%, transparent);
    animation: c19-skeleton 1.6s infinite;
  }

  .c19-divider {
    block-size: 1px;
    border: 0;
    background: var(--c19-border);
  }

  @media (max-width: 42rem) {
    .c19-appbar__inner {
      min-block-size: 3.5rem;
    }

    .c19-panel__body,
    .c19-card {
      padding: var(--c19-space-4);
    }

    .c19-alert,
    .c19-toast {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .c19-alert > :last-child,
    .c19-toast > :last-child {
      grid-column: 2;
    }
  }
}

@layer c19.components {
  /* Precision pass: operational geometry and dogfooded documentation. */
  .c19-appbar {
    border-block-start: 3px solid var(--c19-signal-red);
    border-block-end-color: var(--c19-border-strong);
    background: color-mix(in srgb, var(--c19-bg) 94%, transparent);
    backdrop-filter: blur(8px);
  }

  .c19-appbar__inner {
    min-block-size: 3.75rem;
  }

  .c19-brand {
    gap: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.105em;
  }

  .c19-brand__mark {
    inline-size: 2.15rem;
    border: 0;
    border-radius: 0;
    color: var(--c19-ink);
  }

  .c19-brand__mark .c19-icon {
    inline-size: 100%;
    block-size: 100%;
  }

  .c19-nav {
    gap: 0;
    border-block-start: var(--c19-line) solid var(--c19-border);
  }

  .c19-nav__link {
    min-block-size: 2.7rem;
    gap: 0.75rem;
    padding: 0.62rem 0.7rem;
    border-block-end: var(--c19-line) solid var(--c19-border);
    border-inline-start-width: 4px;
    font-family: var(--c19-font-label);
    font-weight: 700;
    letter-spacing: 0.115em;
  }

  .c19-nav__index {
    min-inline-size: 1.75rem;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-mono);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
  }

  .c19-nav__link:hover,
  .c19-nav__link[aria-current="page"] {
    background: color-mix(in srgb, var(--c19-signal-red) 9%, var(--c19-surface));
  }

  .c19-nav__link[aria-current="page"] .c19-nav__index {
    color: var(--c19-signal-red);
  }

  .c19-panel,
  .c19-card {
    position: relative;
    border-radius: var(--c19-panel-radius, var(--c19-radius-sm));
    background: var(--c19-panel-bg, var(--c19-surface));
    box-shadow: var(--c19-panel-shadow, var(--c19-shadow-1));
  }

  .c19-card {
    border-radius: var(--c19-card-radius, var(--c19-panel-radius, var(--c19-radius-sm)));
    background: var(--c19-card-bg, var(--c19-panel-bg, var(--c19-surface)));
    box-shadow: var(--c19-card-shadow, var(--c19-panel-shadow, var(--c19-shadow-1)));
  }

  .c19-panel::before,
  .c19-card::before {
    position: absolute;
    inset-block: -1px;
    inset-inline-start: -1px;
    inline-size: 4px;
    content: "";
    background: var(--c19-panel-accent, transparent);
    pointer-events: none;
  }

  .c19-panel__header,
  .c19-panel__footer {
    padding: var(--c19-panel-header-padding, 0.75rem 1rem);
  }

  .c19-panel__footer {
    padding: var(--c19-panel-footer-padding, var(--c19-panel-header-padding, 0.75rem 1rem));
  }

  .c19-panel__body,
  .c19-card {
    padding: var(--c19-panel-padding, clamp(1rem, 2.4vw, 1.5rem));
  }

  .c19-card {
    padding: var(--c19-card-padding, var(--c19-panel-padding, clamp(1rem, 2.4vw, 1.5rem)));
  }

  .c19-panel__title {
    font-family: var(--c19-font-label);
    font-weight: 700;
    letter-spacing: 0.13em;
  }

  .c19-card--interactive:hover {
    transform: translateY(-1px);
  }

  .c19-symbol {
    inline-size: var(--c19-symbol-size, 4rem);
    block-size: calc(var(--c19-symbol-size, 4rem) * 18 / 19);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--c19-ink);
  }

  .c19-symbol > .c19-icon {
    inline-size: var(--c19-symbol-size, 4rem);
    block-size: calc(var(--c19-symbol-size, 4rem) * 18 / 19);
    max-inline-size: 100%;
    max-block-size: 100%;
  }

  .c19-symbol--micro {
    aspect-ratio: 1;
    block-size: var(--c19-symbol-size, 3rem);
    border: var(--c19-line) solid var(--c19-border);
    background: var(--c19-surface-raised);
  }

  .c19-symbol--micro > .c19-icon {
    inline-size: 56%;
    block-size: 56%;
  }

  [data-c19-theme="bridge"] .c19-symbol,
  .c19-theme-bridge .c19-symbol,
  [data-c19-theme="bridge"] .c19-symbol--black,
  .c19-theme-bridge .c19-symbol--black {
    box-shadow: none;
    --c19-symbol-bg: transparent;
  }

  .c19-icon {
    inline-size: 1.25em;
    block-size: 1.25em;
    overflow: visible;
    fill: currentColor;
    stroke: none;
  }

  .c19-button,
  .c19-icon-button {
    min-block-size: var(--c19-button-height, var(--c19-control-height));
    border-radius: var(--c19-button-radius, var(--c19-radius-sm));
    font-family: var(--c19-font-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  }

  .c19-button--small {
    min-block-size: 2.2rem;
    padding: 0.55rem 0.72rem;
    font-size: var(--c19-text-xs);
  }

  .c19-button--secondary,
  .c19-icon-button--secondary,
  .c19-button--ghost,
  .c19-icon-button--ghost {
    box-shadow: none;
  }

  .c19-field__label,
  .c19-choice,
  .c19-switch,
  .c19-badge,
  .c19-status,
  .c19-tabs__tab,
  .c19-commandbar,
  .c19-key,
  .c19-accordion > summary {
    font-family: var(--c19-font-label);
    font-weight: 700;
    letter-spacing: 0.105em;
  }

  .c19-input,
  .c19-select,
  .c19-textarea {
    border-radius: var(--c19-control-radius, var(--c19-radius-sm));
    background-color: var(--c19-control-bg, var(--c19-surface-raised));
  }

  .c19-table th {
    font-family: var(--c19-font-label);
    font-weight: 700;
    letter-spacing: 0.11em;
  }

  [data-c19-tooltip-position="end"]::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateY(0.25rem);
  }

  [data-c19-tooltip-position="end"]:hover::after,
  [data-c19-tooltip-position="end"]:focus-visible::after {
    transform: translateY(0);
  }

  /* Documentation shell: every documentation page uses framework classes only. */
  .c19-doc-layout {
    min-block-size: calc(100dvh - 3.75rem);
    gap: 0;
    align-items: stretch;
  }

  .c19-doc-rail {
    position: sticky;
    inset-block-start: 3.75rem;
    align-self: start;
    min-block-size: calc(100dvh - 3.75rem);
    max-block-size: calc(100dvh - 3.75rem);
    overflow-y: auto;
    border-inline-end: var(--c19-line) solid var(--c19-border-strong);
    background: color-mix(in srgb, var(--c19-surface) 96%, transparent);
    padding: 1.35rem 1rem 2rem;
  }

  .c19-doc-rail__title {
    margin-block-end: 1.05rem;
    padding-inline: 0.7rem;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .c19-doc-main {
    min-inline-size: 0;
    padding-block-end: 5rem;
  }

  .c19-doc-mobile-nav {
    display: none;
  }

  .c19-doc-hero {
    position: relative;
    overflow: clip;
    border-block-end: var(--c19-line) solid var(--c19-border-strong);
    border-inline-start: 0.45rem solid var(--c19-signal-red);
    background: var(--c19-surface-sunken);
    padding: clamp(3rem, 7vw, 7rem) var(--c19-gutter);
  }

  .c19-doc-hero::after {
    position: absolute;
    inset-block: 0;
    inset-inline-end: clamp(1rem, 5vw, 5rem);
    inline-size: min(18vw, 12rem);
    content: "19 / 18";
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--c19-ink) 7%, transparent);
    font-family: var(--c19-font-mono);
    font-size: clamp(2rem, 6vw, 6.5rem);
    font-weight: 600;
    letter-spacing: -0.08em;
    writing-mode: vertical-rl;
    pointer-events: none;
  }

  .c19-doc-hero--landing {
    min-block-size: min(46rem, calc(100dvh - 3.75rem));
    display: grid;
    align-items: center;
  }

  .c19-doc-hero--compact {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }

  .c19-doc-hero__grid {
    position: relative;
    z-index: 1;
    inline-size: min(100%, var(--c19-content));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
  }

  .c19-doc-hero__title {
    max-inline-size: 13ch;
    font-family: var(--c19-font-display);
    font-size: clamp(2.65rem, 7vw, 7rem);
    font-weight: 900;
    letter-spacing: 0.045em;
    line-height: 0.84;
    text-wrap: balance;
    text-transform: uppercase;
  }

  .c19-doc-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: var(--c19-line) solid var(--c19-border-strong);
    background: var(--c19-surface);
  }

  .c19-doc-meta > * {
    min-inline-size: 0;
    padding: 0.8rem 0.9rem;
    border-inline-end: var(--c19-line) solid var(--c19-border);
  }

  .c19-doc-meta > :last-child {
    border-inline-end: 0;
  }

  .c19-doc-meta dt {
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-label);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .c19-doc-meta dd {
    margin-block-start: 0.2rem;
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-sm);
  }

  .c19-doc-section {
    inline-size: min(calc(100% - (2 * var(--c19-gutter))), var(--c19-content));
    margin-inline: auto;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    border-block-end: var(--c19-line) solid var(--c19-border);
    scroll-margin-block-start: 5rem;
  }

  .c19-doc-section:last-child {
    border-block-end: 0;
  }

  .c19-doc-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 28rem);
    gap: clamp(1rem, 5vw, 5rem);
    align-items: end;
    margin-block-end: clamp(1.5rem, 4vw, 3rem);
  }

  .c19-doc-section__index {
    display: block;
    margin-block-end: 0.55rem;
    color: var(--c19-signal-red);
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-xs);
    letter-spacing: 0.08em;
  }

  .c19-doc-colorbar {
    display: grid;
    grid-template-columns: repeat(7, minmax(1.8rem, 1fr));
    min-block-size: 0.55rem;
    overflow: hidden;
    border: var(--c19-line) solid var(--c19-border-strong);
  }

  .c19-doc-colorbar > :nth-child(1) { background: var(--c19-icon-frame); }
  .c19-doc-colorbar > :nth-child(2) { background: var(--c19-icon-plate); }
  .c19-doc-colorbar > :nth-child(3) { background: var(--c19-icon-structure); }
  .c19-doc-colorbar > :nth-child(4) { background: var(--c19-icon-dark); }
  .c19-doc-colorbar > :nth-child(5) { background: var(--c19-icon-process); }
  .c19-doc-colorbar > :nth-child(6) { background: var(--c19-icon-cold); }
  .c19-doc-colorbar > :nth-child(7) { background: var(--c19-icon-bio); }

  .c19-doc-code-wrap {
    overflow: hidden;
    border: var(--c19-line) solid var(--c19-border-strong);
    background: var(--c19-vacuum-black);
    color: #f4f4ed;
  }

  .c19-doc-codebar {
    min-block-size: 2.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid #343832;
    padding: 0.45rem 0.55rem 0.45rem 0.9rem;
    color: #a9ada7;
    font-family: var(--c19-font-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .c19-doc-code {
    max-inline-size: 100%;
    overflow: auto;
    margin: 0;
    padding: 1rem 1.15rem 1.2rem;
    color: #e8e8e1;
    font-size: 0.8rem;
    line-height: 1.7;
    tab-size: 2;
    white-space: pre;
  }

  .c19-doc-code .c19-code-key { color: #ff7d87; }
  .c19-doc-code .c19-code-value { color: #9da7ff; }
  .c19-doc-code .c19-code-comment { color: #848a83; }

  .c19-doc-specimen {
    position: relative;
    overflow: hidden;
    border: var(--c19-line) solid var(--c19-border-strong);
    background: #050705;
    color: #f1f2e9;
    padding: clamp(1.25rem, 4vw, 3rem);
  }

  .c19-doc-specimen--light {
    --c19-surface: #f8f7f2;
    --c19-surface-raised: #ffffff;
    --c19-surface-sunken: #deddd4;
    --c19-ink: #131512;
    --c19-ink-muted: #5c5f59;
    --c19-border: #94978e;
    --c19-border-strong: #555950;
    background: #e8e8e1;
    color: var(--c19-ink);
  }

  .c19-doc-specimen > * {
    position: relative;
    z-index: 1;
  }

  .c19-doc-swatch {
    min-block-size: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: var(--c19-line) solid color-mix(in srgb, currentColor 25%, transparent);
    padding: 0.8rem;
    background: var(--c19-swatch, var(--c19-surface));
    color: var(--c19-swatch-ink, var(--c19-ink));
  }

  .c19-doc-swatch__name {
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .c19-doc-swatch__value {
    margin-block-start: 0.2rem;
    font-family: var(--c19-font-mono);
    font-size: 0.72rem;
  }

  .c19-doc-swatch--frame { --c19-swatch: var(--c19-icon-frame); --c19-swatch-ink: #fff; }
  .c19-doc-swatch--plate { --c19-swatch: var(--c19-icon-plate); --c19-swatch-ink: #0f0e09; }
  .c19-doc-swatch--structure { --c19-swatch: var(--c19-icon-structure); --c19-swatch-ink: #fff; }
  .c19-doc-swatch--dark { --c19-swatch: var(--c19-icon-dark); --c19-swatch-ink: #fff; }
  .c19-doc-swatch--process { --c19-swatch: var(--c19-icon-process); --c19-swatch-ink: #0f0e09; }
  .c19-doc-swatch--cold { --c19-swatch: var(--c19-icon-cold); --c19-swatch-ink: #fff; }
  .c19-doc-swatch--bio { --c19-swatch: var(--c19-icon-bio); --c19-swatch-ink: #fff; }

  .c19-doc-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: var(--c19-space-3);
  }

  .c19-doc-icon-card {
    position: relative;
    min-inline-size: 0;
    display: grid;
    grid-template-rows: 7.8rem auto;
    border: var(--c19-line) solid var(--c19-border);
    background: var(--c19-surface);
  }

  .c19-doc-icon-card[hidden] {
    display: none;
  }

  .c19-doc-icon-visual {
    display: grid;
    place-items: center;
    border-block-end: var(--c19-line) solid var(--c19-border);
    background: var(--c19-surface-sunken);
    padding: 0.9rem;
  }

  .c19-doc-icon-visual .c19-icon {
    inline-size: 6rem;
    block-size: calc(6rem * 18 / 19);
  }

  .c19-doc-icon-card--micro .c19-doc-icon-visual .c19-icon {
    inline-size: 3.1rem;
    block-size: 3.1rem;
  }

  .c19-doc-icon-meta {
    min-inline-size: 0;
    padding: 0.8rem;
  }

  .c19-doc-icon-meta strong {
    display: block;
    overflow-wrap: anywhere;
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .c19-doc-icon-meta span {
    display: block;
    margin-block-start: 0.25rem;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-mono);
    font-size: 0.65rem;
    overflow-wrap: anywhere;
  }

  .c19-doc-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--c19-space-3);
    align-items: center;
    margin-block-end: var(--c19-space-5);
  }

  .c19-doc-filter__count {
    min-inline-size: 5rem;
    color: var(--c19-ink-muted);
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-sm);
    text-align: end;
  }

  .c19-doc-empty {
    border: var(--c19-line) solid var(--c19-border);
    padding: var(--c19-space-6);
    color: var(--c19-ink-muted);
    text-align: center;
  }

  .c19-doc-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--c19-space-4);
    align-items: start;
    border: var(--c19-line) solid var(--c19-border-strong);
    border-inline-start: 4px solid var(--c19-callout-color, var(--c19-cold-blue));
    background: var(--c19-surface-raised);
    padding: var(--c19-space-4);
  }

  .c19-doc-callout--warning { --c19-callout-color: var(--c19-process-orange); }
  .c19-doc-callout--danger { --c19-callout-color: var(--c19-signal-red); }
  .c19-doc-callout--success { --c19-callout-color: var(--c19-biological-green); }

  .c19-doc-callout__mark {
    inline-size: 2.75rem;
  }

  .c19-doc-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    border-block-start: var(--c19-line) solid var(--c19-border-strong);
  }

  .c19-doc-link {
    min-block-size: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-inline-end: var(--c19-line) solid var(--c19-border);
    border-block-end: var(--c19-line) solid var(--c19-border);
    padding: 1.15rem;
    color: var(--c19-ink) !important;
    text-decoration: none;
  }

  .c19-doc-link:hover {
    background: color-mix(in srgb, var(--c19-signal-red) 7%, var(--c19-surface));
  }

  .c19-doc-link__index {
    color: var(--c19-signal-red);
    font-family: var(--c19-font-mono);
    font-size: 0.68rem;
  }

  .c19-doc-link__title {
    font-family: var(--c19-font-label);
    font-size: var(--c19-text-lg);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .c19-palette {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-block-size: 16rem;
    border: var(--c19-line) solid var(--c19-border-strong);
  }

  .c19-palette__chip {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-inline-size: 0;
    border-inline-end: 1px solid rgb(255 255 255 / 0.4);
    padding: 0.8rem;
    background: var(--c19-swatch);
    color: var(--c19-swatch-ink, #fff);
  }

  .c19-palette__chip:last-child { border-inline-end: 0; }
  .c19-palette__chip strong { font-family: var(--c19-font-label); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; }
  .c19-palette__chip span { margin-block-start: 0.25rem; font-family: var(--c19-font-mono); font-size: 0.64rem; }

  .c19-metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    border: var(--c19-line) solid var(--c19-border-strong);
  }

  .c19-metric-strip > * {
    min-inline-size: 0;
    border-inline-end: var(--c19-line) solid var(--c19-border);
    padding: 1rem;
  }

  .c19-metric-strip > :last-child { border-inline-end: 0; }
  .c19-metric-strip strong { display: block; font-family: var(--c19-font-mono); font-size: clamp(1.4rem, 4vw, 2.5rem); font-weight: 500; line-height: 1; }
  .c19-metric-strip span { display: block; margin-block-start: 0.45rem; color: var(--c19-ink-muted); font-family: var(--c19-font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

  .c19-system-console {
    border: var(--c19-line) solid var(--c19-border-strong);
    background: var(--c19-vacuum-black);
    color: #f4f4ed;
  }

  .c19-system-console__head {
    display: flex;
    justify-content: space-between;
    border-block-end: 1px solid #343832;
    padding: 0.7rem 0.9rem;
    color: #a9ada7;
    font-family: var(--c19-font-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .c19-system-console__body {
    padding: 1.15rem;
    font-family: var(--c19-font-mono);
    font-size: var(--c19-text-sm);
    line-height: 1.8;
  }

  .c19-example-hero {
    border-block-end: var(--c19-line) solid var(--c19-border-strong);
    padding: clamp(2rem, 5vw, 4rem) var(--c19-gutter);
    background: var(--c19-surface-sunken);
  }

  .c19-example-main {
    inline-size: min(calc(100% - (2 * var(--c19-gutter))), var(--c19-content-wide));
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 5rem);
  }

  .c19-doc-footer {
    border-block-start: 3px solid var(--c19-signal-red);
    background: var(--c19-vacuum-black);
    color: #f1f2e9;
  }

  .c19-doc-footer__inner {
    inline-size: min(calc(100% - (2 * var(--c19-gutter))), var(--c19-content-wide));
    min-block-size: 8rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--c19-space-4);
    align-items: center;
    justify-content: space-between;
    padding-block: 2rem;
  }

  .c19-doc-footer a { color: #f1f2e9; }

  @media (min-width: 58.001rem) {
    [data-c19-nav-toggle],
    .c19-doc-mobile-nav {
      display: none !important;
    }
  }

  @media (max-width: 58rem) {
    .c19-doc-layout {
      display: block;
      min-block-size: auto;
    }

    .c19-doc-rail {
      display: none;
    }

    .c19-doc-mobile-nav {
      position: sticky;
      inset-block-start: 3.75rem;
      z-index: 15;
      display: block;
      max-block-size: calc(100dvh - 3.75rem);
      overflow-y: auto;
      border-block-end: var(--c19-line) solid var(--c19-border-strong);
      background: var(--c19-surface);
      padding: 1rem;
      box-shadow: var(--c19-shadow-2);
    }

    .c19-doc-mobile-nav[hidden] {
      display: none;
    }

    .c19-doc-hero__grid,
    .c19-doc-section__head {
      grid-template-columns: minmax(0, 1fr);
    }

    .c19-doc-hero::after {
      opacity: 0.7;
    }
  }

  @media (max-width: 42rem) {
    .c19-appbar__inner {
      min-block-size: 3.75rem;
    }

    .c19-brand__text {
      display: none;
    }

    .c19-brand--manual .c19-brand__text {
      display: inline;
    }

    .c19-doc-hero {
      padding-block: 2.75rem;
    }

    .c19-doc-hero--landing {
      min-block-size: auto;
    }

    .c19-doc-hero__title {
      font-size: clamp(2.55rem, 15vw, 4.6rem);
    }

    .c19-doc-meta {
      grid-template-columns: minmax(0, 1fr);
    }

    .c19-doc-meta > * {
      border-inline-end: 0;
      border-block-end: var(--c19-line) solid var(--c19-border);
    }

    .c19-doc-meta > :last-child {
      border-block-end: 0;
    }

    .c19-doc-section {
      padding-block: 2.75rem;
    }

    .c19-doc-icon-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
    }

    .c19-doc-icon-card {
      grid-template-rows: 6.3rem auto;
    }

    .c19-doc-icon-visual .c19-icon {
      inline-size: 4.7rem;
    }

    .c19-doc-filter {
      grid-template-columns: minmax(0, 1fr);
    }

    .c19-doc-filter__count {
      text-align: start;
    }

    .c19-palette {
      grid-template-columns: minmax(0, 1fr);
      min-block-size: 0;
    }

    .c19-palette__chip {
      min-block-size: 5.5rem;
      border-inline-end: 0;
      border-block-end: 1px solid rgb(255 255 255 / 0.35);
    }

    .c19-palette__chip:last-child { border-block-end: 0; }

    .c19-metric-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@layer c19.components {
  /* The curated 1.0-style landing remains a full component showcase. */
  .c19-showcase-hero {
    min-block-size: clamp(38rem, 68vh, 52rem);
    display: grid;
    align-items: end;
    padding-block: clamp(5rem, 12vw, 10rem) 4rem;
    border-block-end: 1px solid var(--c19-border);
  }

  .c19-showcase-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--c19-border);
    background: var(--c19-border);
  }

  .c19-showcase-meta > div {
    background: var(--c19-surface);
    padding: 1rem;
  }

  .c19-showcase-section {
    scroll-margin-block-start: 5rem;
    padding-block: 4rem;
    border-block-end: 1px solid var(--c19-border);
  }

  .c19-showcase-section .c19-card > .c19-symbol {
    margin-block-end: var(--c19-space-4);
  }

  .c19-showcase-icon-grid { --c19-grid-min: 11rem; }
  .c19-showcase-swatch-grid { --c19-grid-min: 12rem; }

  .c19-showcase-code {
    overflow: auto;
    border: 1px solid var(--c19-border);
    border-radius: var(--c19-radius-sm);
    background: var(--c19-surface-sunken);
    padding: 1rem;
    color: var(--c19-ink);
    font-size: 0.82rem;
  }

  .c19-showcase-color-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.2rem;
    inline-size: min(100%, 36rem);
    block-size: 0.5rem;
  }

  .c19-showcase-color-strip > :nth-child(3) {
    box-shadow: inset 0 0 0 1px var(--c19-border-strong);
  }

  @media (max-width: 58rem) {
    .c19-showcase-sidebar { display: none; }
    .c19-showcase-meta { grid-template-columns: 1fr; }
  }
}

@layer c19.components {
  .c19-doc-hero::after {
    inset-block-start: 1.5rem;
    inset-block-end: auto;
    inset-inline-end: var(--c19-gutter);
    inline-size: auto;
    block-size: auto;
    content: "19 × 18";
    font-size: clamp(2rem, 5vw, 5.5rem);
    letter-spacing: -0.07em;
    line-height: 1;
    writing-mode: horizontal-tb;
  }

  .c19-doc-hero__grid,
  .c19-doc-section,
  .c19-example-main,
  .c19-doc-footer__inner {
    inline-size: calc(100% - (2 * var(--c19-gutter)));
    max-inline-size: var(--c19-content);
  }

  .c19-example-main,
  .c19-doc-footer__inner {
    max-inline-size: var(--c19-content-wide);
  }

  .c19-doc-hero__title {
    max-inline-size: 100%;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(2.65rem, 6vw, 6.25rem);
  }

  .c19-heading-1,
  .c19-heading-2,
  .c19-heading-3 {
    overflow-wrap: anywhere;
  }

  .c19-title-lockup__word {
    flex-wrap: nowrap;
    font-size: clamp(4.4rem, 8.2vw, 8.5rem);
    letter-spacing: 0.1em;
  }

  .c19-appbar__inner > * {
    min-inline-size: 0;
  }

  @media (max-width: 42rem) {
    .c19-appbar__inner > .c19-cluster > .c19-button {
      display: none;
    }

    .c19-appbar__inner > .c19-cluster > .c19-home-repo-link {
      display: inline-flex;
    }

    .c19-appbar__inner > .c19-cluster > .c19-home-version {
      display: none;
    }

    .c19-appbar__inner > .c19-cluster {
      flex-wrap: nowrap;
      flex: 0 0 auto;
    }

    .c19-doc-hero__title {
      max-inline-size: 100%;
      font-size: clamp(2.35rem, 11.5vw, 3.35rem);
      letter-spacing: 0.02em;
    }

    .c19-doc-hero::after {
      inset-block-start: 1rem;
      font-size: 2.5rem;
    }

    .c19-title-lockup__word {
      font-size: clamp(3.25rem, 16.5vw, 4.5rem);
      letter-spacing: 0.055em;
    }
  }
}

@layer c19.components {
  .c19-doc-layout,
  .c19-doc-main,
  .c19-doc-layout > div,
  .c19-doc-code-wrap {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
}

@layer c19.components {
  @media (max-width: 42rem) {
    .c19-doc-hero__title {
      font-size: clamp(2.1rem, 10vw, 3.1rem);
      letter-spacing: 0.01em;
    }
  }
}

@layer c19.utilities {
  .c19-sr-only { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .c19-text-muted { color: var(--c19-ink-muted) !important; }
  .c19-text-red { color: var(--c19-signal-red) !important; }
  .c19-text-yellow { color: var(--c19-process-yellow) !important; }
  .c19-text-orange { color: var(--c19-process-orange) !important; }
  .c19-text-blue { color: var(--c19-cold-blue) !important; }
  .c19-text-green { color: var(--c19-biological-green) !important; }
  .c19-bg-surface { background: var(--c19-surface) !important; }
  .c19-bg-raised { background: var(--c19-surface-raised) !important; }
  .c19-bg-sunken { background: var(--c19-surface-sunken) !important; }
  .c19-border { border: var(--c19-line) solid var(--c19-border) !important; }
  .c19-border-strong { border: var(--c19-line) solid var(--c19-border-strong) !important; }
  .c19-radius { border-radius: var(--c19-radius-md) !important; }
  .c19-shadow { box-shadow: var(--c19-shadow-1) !important; }
  .c19-w-full { inline-size: 100% !important; }
  .c19-max-prose { max-inline-size: 65ch !important; }
  .c19-overflow-auto { overflow: auto !important; }
  .c19-nowrap { white-space: nowrap !important; }
  .c19-p-0 { padding: 0 !important; }
  .c19-p-3 { padding: var(--c19-space-3) !important; }
  .c19-p-4 { padding: var(--c19-space-4) !important; }
  .c19-p-5 { padding: var(--c19-space-5) !important; }
  .c19-p-6 { padding: var(--c19-space-6) !important; }
  .c19-py-5 { padding-block: var(--c19-space-5) !important; }
  .c19-py-6 { padding-block: var(--c19-space-6) !important; }
  .c19-py-7 { padding-block: var(--c19-space-7) !important; }
  .c19-py-8 { padding-block: var(--c19-space-8) !important; }
  .c19-mt-2 { margin-block-start: var(--c19-space-2) !important; }
  .c19-mt-4 { margin-block-start: var(--c19-space-4) !important; }
  .c19-mt-5 { margin-block-start: var(--c19-space-5) !important; }
  .c19-mt-6 { margin-block-start: var(--c19-space-6) !important; }
  .c19-mb-2 { margin-block-end: var(--c19-space-2) !important; }
  .c19-mb-4 { margin-block-end: var(--c19-space-4) !important; }
  .c19-mb-5 { margin-block-end: var(--c19-space-5) !important; }
  .c19-mb-6 { margin-block-end: var(--c19-space-6) !important; }
  .c19-gap-1 { --c19-stack-gap: var(--c19-space-1); --c19-grid-gap: var(--c19-space-1); --c19-cluster-gap: var(--c19-space-1); }
  .c19-gap-2 { --c19-stack-gap: var(--c19-space-2); --c19-grid-gap: var(--c19-space-2); --c19-cluster-gap: var(--c19-space-2); }
  .c19-gap-3 { --c19-stack-gap: var(--c19-space-3); --c19-grid-gap: var(--c19-space-3); --c19-cluster-gap: var(--c19-space-3); }
  .c19-gap-4 { --c19-stack-gap: var(--c19-space-4); --c19-grid-gap: var(--c19-space-4); --c19-cluster-gap: var(--c19-space-4); }
  .c19-gap-5 { --c19-stack-gap: var(--c19-space-5); --c19-grid-gap: var(--c19-space-5); --c19-cluster-gap: var(--c19-space-5); }
  .c19-gap-6 { --c19-stack-gap: var(--c19-space-6); --c19-grid-gap: var(--c19-space-6); --c19-cluster-gap: var(--c19-space-6); }
  .c19-gap-7 { --c19-stack-gap: var(--c19-space-7); --c19-grid-gap: var(--c19-space-7); --c19-cluster-gap: var(--c19-space-7); }
  .c19-gap-8 { --c19-stack-gap: var(--c19-space-8); --c19-grid-gap: var(--c19-space-8); --c19-cluster-gap: var(--c19-space-8); }
  .c19-justify-between { --c19-cluster-justify: space-between; }
  .c19-justify-center { --c19-cluster-justify: center; }
  .c19-align-start { --c19-cluster-align: flex-start; }
  .c19-align-end { --c19-cluster-align: flex-end; }
  .c19-align-stretch { align-items: stretch !important; }
  .c19-col-2 { grid-column: span 2; }
  .c19-col-3 { grid-column: span 3; }
  .c19-col-4 { grid-column: span 4; }
  .c19-col-5 { grid-column: span 5; }
  .c19-col-6 { grid-column: span 6; }
  .c19-col-7 { grid-column: span 7; }
  .c19-col-8 { grid-column: span 8; }
  .c19-col-9 { grid-column: span 9; }
  .c19-col-10 { grid-column: span 10; }
  .c19-col-12 { grid-column: 1 / -1; }
  .c19-grid-min-8 { --c19-grid-min: 8rem; }
  .c19-grid-min-10 { --c19-grid-min: 10rem; }
  .c19-grid-min-12 { --c19-grid-min: 12rem; }
  .c19-grid-min-15 { --c19-grid-min: 15rem; }
  .c19-grid-min-18 { --c19-grid-min: 18rem; }
  .c19-grid-min-22 { --c19-grid-min: 22rem; }
  .c19-icon-xs { inline-size: 1rem !important; block-size: 1rem !important; }
  .c19-icon-sm { inline-size: 1.25rem !important; block-size: 1.25rem !important; }
  .c19-icon-lg { inline-size: 2rem !important; block-size: 2rem !important; }
  .c19-symbol-sm { --c19-symbol-size: 2.75rem; }
  .c19-symbol-md { --c19-symbol-size: 3.75rem; }
  .c19-symbol-lg { --c19-symbol-size: 5.5rem; }
  .c19-symbol-xl { --c19-symbol-size: 8rem; }
  .c19-text-lg { font-size: var(--c19-text-lg) !important; }
  .c19-text-xl { font-size: var(--c19-text-xl) !important; }
  .c19-text-2xl { font-size: var(--c19-text-2xl) !important; }
  .c19-accent-red { --c19-panel-accent: var(--c19-signal-red); }
  .c19-accent-gray { --c19-panel-accent: var(--c19-life-gray); }
  .c19-accent-yellow { --c19-panel-accent: var(--c19-process-yellow); }
  .c19-accent-orange { --c19-panel-accent: var(--c19-process-orange); }
  .c19-accent-blue { --c19-panel-accent: var(--c19-cold-blue); }
  .c19-accent-green { --c19-panel-accent: var(--c19-biological-green); }
  .c19-border-0 { border: 0 !important; }
  .c19-radius-0 { border-radius: 0 !important; }
  @media (max-width: 48rem) { [class*="c19-col-"] { grid-column: 1 / -1; } }
  @media print {
    .c19-no-print { display: none !important; }
    .c19-root { background: white !important; color: black !important; }
    .c19-root::before { display: none; }
    .c19-panel, .c19-card { box-shadow: none !important; }
  }
}

@layer c19.motion {
  @keyframes c19-title-resolve {
    0% { transform: translateY(-0.035em) scaleX(0.16); opacity: 0.72; filter: blur(0.025em); }
    52% { transform: translateY(0) scaleX(0.3); opacity: 0.9; filter: none; }
    100% { transform: translateY(0) scaleX(1); opacity: 1; filter: none; }
  }
  @keyframes c19-signal-acquire {
    0%, 34% { transform: translateY(-0.035em) scaleX(0.04); opacity: 0.42; filter: blur(0.02em); }
    58% { transform: translateY(0) scaleX(0.24); opacity: 0.78; filter: none; }
    76% { transform: translateY(0) scaleX(0.62); opacity: 0.92; filter: none; }
    100% { transform: translateY(0) scaleX(1); opacity: 1; filter: none; }
  }
  @keyframes c19-signal-line {
    0% { transform: scaleX(0); opacity: 0; }
    35% { opacity: 0.62; }
    100% { transform: scaleX(1); opacity: 0.28; }
  }
  @keyframes c19-spinner { to { transform: rotate(1turn); } }
  @keyframes c19-skeleton { to { transform: translateX(260%); } }
  @keyframes c19-pulse { 50% { opacity: 0.38; } }
  .c19-pulse { animation: c19-pulse 1.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .c19-title-reveal > span { transform: none; opacity: 1; filter: none; }
    .c19-title-reveal.c19-signal-acquire > span { animation: none; transform: none; opacity: 1; filter: none; }
    .c19-signal-acquire::after { animation: none; transform: none; opacity: 0.28; }
    .c19-spinner { animation: none; transform: none; }
  }
  @media (forced-colors: active) {
    .c19-symbol, .c19-button, .c19-panel, .c19-card, .c19-alert, .c19-input, .c19-select, .c19-textarea, .c19-menu, .c19-spinner, .c19-input-group__addon { forced-color-adjust: auto; }
  }
}