/* GENERATED by flux/defxn-product-kit/scripts/build.mjs. Do not edit; edit src/, brand/ or the sources named in that script, then rebuild. */

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("albert-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Three type slots, two faces (display = sans = Albert Sans; mono = IBM Plex Mono). */
:root {
  --font-display: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dak-font-display: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dak-font-sans: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dak-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dynamic-font-display: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dynamic-font-title: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dynamic-font-content: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dynamic-font-label: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dynamic-font-cta: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dynamic-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dx-font-display: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dx-font-sans: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dx-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root { --dx-mark: url("defxn-mark.png"); }

/* Ember dark (DEFXN default) — the Dead Ark SDK role-ladder theme "ember" */
:root:not([data-dx-theme="light"]):where(:not([data-theme])), :root[data-theme="ember"] {
 --canvas: 18 7.5% 3.6%; --depth: 18 4.4% 6.9%; --surface: 18 2.9% 11.2%; --raised: 18 2.1% 16%; --nested: 18 1.6% 21.4%; --overlay: 18 3.6% 8.6%; --text-strong: 18 11.8% 96.1%; --text: 18 2.3% 80.6%; --text-muted: 18 1.3% 65.7%; --text-faint: 18 0.9% 55.5%; --text-inverse: 18 7.5% 3.6%; --border-subtle: 18 35.4% 87.4% / .1; --border-default: 18 35.4% 87.4% / .22; --border-strong: 18 35.4% 87.4% / .36; --border-control: 18 35.4% 51.1%; --border: 18 35.4% 87.4% / .22; --border-soft: 18 35.4% 87.4% / .1; --primary: 19 99.8% 67.5%; --complement: 179 95.2% 40.7%; --accent: 179 95.2% 40.7%; --accent-subtle: 178 81.7% 7.9%; --accent-strong: 179 83.5% 47.5%; --trust: 122 55.4% 57.6%; --success: 122 55.4% 57.6%; --live: 122 55.4% 57.6%; --role: 210 98.5% 71.6%; --badge: 19 99.8% 67.5%; --drift: 53 100% 39.4%; --warning: 53 100% 39.4%; --danger: 349 99% 76.3%; --hidden: 18 0.9% 55.5%; --reference: 210 98.5% 71.6%; --canvas-glow-primary: 19 99.8% 67.5% / .03; --canvas-glow-secondary: 179 95.2% 40.7% / .02; --canvas-glow-edge: 210 98.5% 71.6% / .015; --theme-shadow: 11 81.6% 1.6% / .6; --theme-shadow-color: 11 81.6% 1.6%; --theme-shadow-alpha: .6; --dak-canvas: 18 7.5% 3.6%; --dak-surface-1: 18 2.9% 11.2%; --dak-surface-2: 18 2.1% 16%; --dak-surface-3: 18 1.6% 21.4%; --dak-text-strong: 18 11.8% 96.1%; --dak-text: 18 2.3% 80.6%; --dak-text-muted: 18 1.3% 65.7%; --dak-text-faint: 18 0.9% 55.5%; --dak-text-inverse: 18 7.5% 3.6%; --dak-accent: 179 95.2% 40.7%; --dak-accent-subtle: 178 81.7% 7.9%; --dak-accent-strong: 179 83.5% 47.5%; --dak-border-subtle: 18 35.4% 87.4% / .1; --dak-border-default: 18 35.4% 87.4% / .22; --dak-border-strong: 18 35.4% 87.4% / .36; --surface-canvas: 18 7.5% 3.6%; --surface-1: 18 2.9% 11.2%; --surface-2: 18 2.1% 16%; --surface-3: 18 1.6% 21.4%; --surface-overlay: 18 3.6% 8.6%; --surface-01: 18 2.9% 11.2%; --surface-02: 18 2.1% 16%; --surface-03: 18 1.6% 21.4%; --foreground-strong: 18 11.8% 96.1%; --foreground-default: 18 2.3% 80.6%; --foreground-muted: 18 1.3% 65.7%; --foreground-faint: 18 0.9% 55.5%; --foreground-inverse: 18 7.5% 3.6%; --action-bg: 179 95.2% 40.7%; --action-fg: 18 7.5% 3.6%; --action-border: 179 95.2% 40.7%; --action-hover-bg: 179 83.5% 47.5%; --action-muted-bg: 178 81.7% 7.9%; --action-muted-fg: 177 44.4% 77.9%; --page-background: 18 7.5% 3.6%; --background-depth: 18 4.4% 6.9%; --surface-base: 18 2.9% 11.2%; --surface-raised: 18 2.1% 16%; --overlay-soft: 18 1.6% 21.4%; --overlay-strong: 18 3.6% 8.6%; --divider-soft: 18 35.4% 87.4% / .1; --divider-strong: 18 35.4% 87.4% / .36; --theme-glow: 19 99.8% 67.5%; --primary-light: 18 74.3% 83.8%; --primary-standard: 19 99.8% 67.5%; --primary-bold: 19 98.8% 76.2%; --accent-medium: 178 47.6% 32.3%; --success-standard: 122 55.4% 57.6%; --warning-standard: 53 100% 39.4%; --error-standard: 349 99% 76.3%; --danger-bold: 349 99% 76.3%; --info-standard: 210 98.5% 71.6%; --primary-100: 19 52.4% 12.1%; --primary-200: 19 51.1% 16.2%; --primary-300: 19 43.4% 26.7%; --primary-400: 19 36.6% 42%; --primary-500: 19 99.8% 67.5%; --primary-600: 19 98.8% 76.2%; --primary-700: 18 74.3% 83.8%; --primary-ink: 18 7.5% 3.6%; --primary-tone-50: 18 99.7% 97%; --primary-tone-100: 18 95.3% 92.7%; --primary-tone-200: 18 98.9% 85.1%; --primary-tone-300: 19 99.8% 74%; --primary-tone-400: 21 99.6% 59.1%; --primary-tone-500: 25 98.7% 44.5%; --primary-tone-600: 24 99.4% 37.1%; --primary-tone-700: 23 96% 29.7%; --primary-tone-800: 23 98.5% 22.7%; --primary-tone-900: 21 98.4% 15.5%; --primary-tone-950: 18 98.8% 10.3%; --secondary: 179 95.2% 40.7%; --secondary-100: 178 81.7% 7.9%; --secondary-200: 178 89.5% 10.2%; --secondary-300: 178 67.9% 18.5%; --secondary-400: 178 47.6% 32.3%; --secondary-500: 179 95.2% 40.7%; --secondary-600: 179 83.5% 47.5%; --secondary-700: 177 44.4% 77.9%; --secondary-ink: 18 7.5% 3.6%; --secondary-tone-50: 176 98% 93.4%; --secondary-tone-100: 177 95.1% 83.1%; --secondary-tone-200: 178 82.8% 67.2%; --secondary-tone-300: 179 87.2% 45.4%; --secondary-tone-400: 179 85.7% 39.7%; --secondary-tone-500: 179 84.5% 34.1%; --secondary-tone-600: 179 98.8% 26.4%; --secondary-tone-700: 179 94.9% 21.1%; --secondary-tone-800: 179 93.6% 16.2%; --secondary-tone-900: 178 91.3% 11%; --secondary-tone-950: 178 92.1% 7%; --reference-100: 210 52.1% 12.8%; --reference-200: 210 51% 17.1%; --reference-300: 210 43.6% 28%; --reference-400: 210 36.8% 43.7%; --reference-500: 210 98.5% 71.6%; --reference-600: 211 99.5% 78.7%; --reference-700: 211 81.2% 85%; --reference-ink: 18 7.5% 3.6%; --reference-tone-50: 211 89.3% 97.2%; --reference-tone-100: 211 96.8% 93.3%; --reference-tone-200: 211 97.2% 86.4%; --reference-tone-300: 210 99.1% 76.8%; --reference-tone-400: 209 99% 65.9%; --reference-tone-500: 205 98% 48.3%; --reference-tone-600: 205 98.2% 40.4%; --reference-tone-700: 206 99% 31.8%; --reference-tone-800: 206 96.3% 24.8%; --reference-tone-900: 207 99.9% 16.9%; --reference-tone-950: 209 99.8% 11.3%; --success-100: 120 36.6% 10.5%; --success-200: 120 35.7% 14.2%; --success-300: 120 29.6% 23.9%; --success-400: 119 24.4% 38.2%; --success-500: 122 55.4% 57.6%; --success-600: 121 66.5% 64.9%; --success-700: 118 36.4% 80.5%; --success-ink: 18 7.5% 3.6%; --success-tone-50: 117 97.6% 95%; --success-tone-100: 118 92% 87.8%; --success-tone-200: 119 74.1% 77.3%; --success-tone-300: 122 63% 62.9%; --success-tone-400: 128 75.3% 44.3%; --success-tone-500: 132 100% 33.3%; --success-tone-600: 131 100% 27.7%; --success-tone-700: 130 98.2% 21.9%; --success-tone-800: 128 99.4% 16.7%; --success-tone-900: 126 98.1% 11.3%; --success-tone-950: 124 100% 7.3%; --warning-100: 51 90.2% 7.5%; --warning-200: 52 98.4% 9.7%; --warning-300: 52 81.4% 17%; --warning-400: 52 55.7% 30.4%; --warning-500: 53 100% 39.4%; --warning-600: 53 90.7% 45.3%; --warning-700: 52 46% 75.8%; --warning-ink: 18 7.5% 3.6%; --warning-tone-50: 52 99.8% 90.5%; --warning-tone-100: 51 91.1% 80.1%; --warning-tone-200: 52 82.4% 63.7%; --warning-tone-300: 53 97.9% 42.6%; --warning-tone-400: 53 98.8% 36.9%; --warning-tone-500: 53 94% 32.2%; --warning-tone-600: 53 95.2% 26.6%; --warning-tone-700: 53 94.3% 20.9%; --warning-tone-800: 52 99.7% 15.6%; --warning-tone-900: 52 96.7% 10.6%; --warning-tone-950: 51 100% 6.7%; --danger-100: 349 40.9% 13.9%; --danger-200: 349 39.9% 18.5%; --danger-300: 349 34.6% 30%; --danger-400: 350 29.7% 46.5%; --danger-500: 349 99% 76.3%; --danger-600: 351 98.8% 82.4%; --danger-700: 352 88.6% 87.6%; --danger-ink: 18 7.5% 3.6%; --danger-tone-50: 354 79% 97.6%; --danger-tone-100: 353 96.5% 94.5%; --danger-tone-200: 352 97.8% 88.8%; --danger-tone-300: 351 98.4% 80.8%; --danger-tone-400: 348 99.8% 71.2%; --danger-tone-500: 338 98.5% 53.5%; --danger-tone-600: 336 98.8% 42.2%; --danger-tone-700: 337 96.5% 33.7%; --danger-tone-800: 338 98% 25.9%; --danger-tone-900: 339 99.1% 17.8%; --danger-tone-950: 342 100% 12%; --primary-scale: 0.81; --secondary-scale: 0.78; --reference-scale: 0.79; --anchor: 0 0% 0%; --anchor-ink: 18 11.8% 96.1%; --info: 210 98.5% 71.6%; --action: 179 95.2% 40.7%; --action-ink: 18 7.5% 3.6%; --action-hover: 179 83.5% 47.5%; color-scheme: dark;
}
/* Ember light — the Dead Ark SDK role-ladder theme "ember-light" */
:root[data-dx-theme="light"]:where(:not([data-theme])), :root[data-theme="ember-light"] {
 --canvas: 18 6.2% 92.6%; --depth: 18 3.7% 87.7%; --surface: 18 23.9% 98.1%; --raised: 0 0% 100%; --nested: 18 3.2% 85.7%; --overlay: 18 14.2% 96.8%; --text-strong: 18 2.6% 12.3%; --text: 18 1.5% 24.5%; --text-muted: 18 1.1% 35%; --text-faint: 18 1% 40.6%; --text-inverse: 0 0% 100%; --border-subtle: 19 36.1% 13.2% / .12; --border-default: 19 36.1% 13.2% / .26; --border-strong: 19 36.1% 13.2% / .4; --border-control: 19 36.1% 49.1%; --border: 19 36.1% 13.2% / .26; --border-soft: 19 36.1% 13.2% / .12; --primary: 24 96.2% 34.9%; --complement: 179 99% 21.9%; --accent: 179 99% 21.9%; --accent-subtle: 176 40.9% 89.3%; --accent-strong: 179 95.2% 18.8%; --trust: 130 93.5% 24.8%; --success: 130 93.5% 24.8%; --live: 130 93.5% 24.8%; --role: 206 96.8% 36.8%; --badge: 24 96.2% 34.9%; --drift: 53 99.5% 23.5%; --warning: 53 99.5% 23.5%; --danger: 340 77.7% 42.9%; --hidden: 18 1% 40.6%; --reference: 206 96.8% 36.8%; --canvas-glow-primary: 24 96.2% 34.9% / .03; --canvas-glow-secondary: 179 99% 21.9% / .02; --canvas-glow-edge: 206 96.8% 36.8% / .015; --theme-shadow: 18 18.5% 18.1% / .14; --theme-shadow-color: 18 18.5% 18.1%; --theme-shadow-alpha: .14; --dak-canvas: 18 6.2% 92.6%; --dak-surface-1: 18 23.9% 98.1%; --dak-surface-2: 0 0% 100%; --dak-surface-3: 18 3.2% 85.7%; --dak-text-strong: 18 2.6% 12.3%; --dak-text: 18 1.5% 24.5%; --dak-text-muted: 18 1.1% 35%; --dak-text-faint: 18 1% 40.6%; --dak-text-inverse: 0 0% 100%; --dak-accent: 179 99% 21.9%; --dak-accent-subtle: 176 40.9% 89.3%; --dak-accent-strong: 179 95.2% 18.8%; --dak-border-subtle: 19 36.1% 13.2% / .12; --dak-border-default: 19 36.1% 13.2% / .26; --dak-border-strong: 19 36.1% 13.2% / .4; --surface-canvas: 18 6.2% 92.6%; --surface-1: 18 23.9% 98.1%; --surface-2: 0 0% 100%; --surface-3: 18 3.2% 85.7%; --surface-overlay: 18 14.2% 96.8%; --surface-01: 18 23.9% 98.1%; --surface-02: 0 0% 100%; --surface-03: 18 3.2% 85.7%; --foreground-strong: 18 2.6% 12.3%; --foreground-default: 18 1.5% 24.5%; --foreground-muted: 18 1.1% 35%; --foreground-faint: 18 1% 40.6%; --foreground-inverse: 0 0% 100%; --action-bg: 179 99% 21.9%; --action-fg: 0 0% 100%; --action-border: 179 99% 21.9%; --action-hover-bg: 179 95.2% 18.8%; --action-muted-bg: 176 40.9% 89.3%; --action-muted-fg: 179 91.9% 15.7%; --page-background: 18 6.2% 92.6%; --background-depth: 18 3.7% 87.7%; --surface-base: 18 23.9% 98.1%; --surface-raised: 0 0% 100%; --overlay-soft: 18 3.2% 85.7%; --overlay-strong: 18 14.2% 96.8%; --divider-soft: 19 36.1% 13.2% / .12; --divider-strong: 19 36.1% 13.2% / .4; --theme-glow: 24 96.2% 34.9%; --primary-light: 20 62.7% 24.7%; --primary-standard: 24 96.2% 34.9%; --primary-bold: 23 95.8% 30.1%; --accent-medium: 178 33.5% 52.5%; --success-standard: 130 93.5% 24.8%; --warning-standard: 53 99.5% 23.5%; --error-standard: 340 77.7% 42.9%; --danger-bold: 340 77.7% 42.9%; --info-standard: 206 96.8% 36.8%; --primary-100: 18 70% 91.9%; --primary-200: 18 71.5% 87.6%; --primary-300: 18 61.8% 77.4%; --primary-400: 19 46.3% 62.2%; --primary-500: 24 96.2% 34.9%; --primary-600: 23 95.8% 30.1%; --primary-700: 20 62.7% 24.7%; --primary-ink: 0 0% 100%; --primary-tone-50: 18 99.7% 97%; --primary-tone-100: 18 95.3% 92.7%; --primary-tone-200: 18 98.9% 85.1%; --primary-tone-300: 19 99.8% 74%; --primary-tone-400: 21 99.6% 59.1%; --primary-tone-500: 25 98.7% 44.5%; --primary-tone-600: 24 99.4% 37.1%; --primary-tone-700: 23 96% 29.7%; --primary-tone-800: 23 98.5% 22.7%; --primary-tone-900: 21 98.4% 15.5%; --primary-tone-950: 18 98.8% 10.3%; --secondary: 179 99% 21.9%; --secondary-100: 176 40.9% 89.3%; --secondary-200: 176 42.3% 83.3%; --secondary-300: 177 39.5% 70.4%; --secondary-400: 178 33.5% 52.5%; --secondary-500: 179 99% 21.9%; --secondary-600: 179 95.2% 18.8%; --secondary-700: 179 91.9% 15.7%; --secondary-ink: 0 0% 100%; --secondary-tone-50: 176 98% 93.4%; --secondary-tone-100: 177 95.1% 83.1%; --secondary-tone-200: 178 82.8% 67.2%; --secondary-tone-300: 179 87.2% 45.4%; --secondary-tone-400: 179 85.7% 39.7%; --secondary-tone-500: 179 84.5% 34.1%; --secondary-tone-600: 179 98.8% 26.4%; --secondary-tone-700: 179 94.9% 21.1%; --secondary-tone-800: 179 93.6% 16.2%; --secondary-tone-900: 178 91.3% 11%; --secondary-tone-950: 178 92.1% 7%; --reference-100: 211 74.6% 92.5%; --reference-200: 211 77.1% 88.4%; --reference-300: 211 67.3% 78.8%; --reference-400: 211 50.5% 64.1%; --reference-500: 206 96.8% 36.8%; --reference-600: 206 96% 31.7%; --reference-700: 209 62.9% 26.4%; --reference-ink: 0 0% 100%; --reference-tone-50: 211 89.3% 97.2%; --reference-tone-100: 211 96.8% 93.3%; --reference-tone-200: 211 97.2% 86.4%; --reference-tone-300: 210 99.1% 76.8%; --reference-tone-400: 209 99% 65.9%; --reference-tone-500: 205 98% 48.3%; --reference-tone-600: 205 98.2% 40.4%; --reference-tone-700: 206 99% 31.8%; --reference-tone-800: 206 96.3% 24.8%; --reference-tone-900: 207 99.9% 16.9%; --reference-tone-950: 209 99.8% 11.3%; --success-100: 117 34% 90.4%; --success-200: 117 34.9% 85.1%; --success-300: 118 31.5% 73.7%; --success-400: 119 24.9% 57.8%; --success-500: 130 93.5% 24.8%; --success-600: 130 100% 20.5%; --success-700: 122 47.1% 21%; --success-ink: 0 0% 100%; --success-tone-50: 117 97.6% 95%; --success-tone-100: 118 92% 87.8%; --success-tone-200: 119 74.1% 77.3%; --success-tone-300: 122 63% 62.9%; --success-tone-400: 128 75.3% 44.3%; --success-tone-500: 132 100% 33.3%; --success-tone-600: 131 100% 27.7%; --success-tone-700: 130 98.2% 21.9%; --success-tone-800: 128 99.4% 16.7%; --success-tone-900: 126 98.1% 11.3%; --success-tone-950: 124 100% 7.3%; --warning-100: 52 42.3% 88.2%; --warning-200: 52 43.8% 81.7%; --warning-300: 52 41.3% 68.1%; --warning-400: 51 35.5% 50.1%; --warning-500: 53 99.5% 23.5%; --warning-600: 53 96.8% 20.4%; --warning-700: 52 95.8% 15.3%; --warning-ink: 0 0% 100%; --warning-tone-50: 52 99.8% 90.5%; --warning-tone-100: 51 91.1% 80.1%; --warning-tone-200: 52 82.4% 63.7%; --warning-tone-300: 53 97.9% 42.6%; --warning-tone-400: 53 98.8% 36.9%; --warning-tone-500: 53 94% 32.2%; --warning-tone-600: 53 95.2% 26.6%; --warning-tone-700: 53 94.3% 20.9%; --warning-tone-800: 52 99.7% 15.6%; --warning-tone-900: 52 96.7% 10.6%; --warning-tone-950: 51 100% 6.7%; --danger-100: 353 83.9% 93.8%; --danger-200: 353 85.2% 90.4%; --danger-300: 352 69.6% 81.7%; --danger-400: 351 48.5% 67.5%; --danger-500: 340 77.7% 42.9%; --danger-600: 337 100% 33.7%; --danger-700: 347 47.3% 29%; --danger-ink: 0 0% 100%; --danger-tone-50: 354 79% 97.6%; --danger-tone-100: 353 96.5% 94.5%; --danger-tone-200: 352 97.8% 88.8%; --danger-tone-300: 351 98.4% 80.8%; --danger-tone-400: 348 99.8% 71.2%; --danger-tone-500: 338 98.5% 53.5%; --danger-tone-600: 336 98.8% 42.2%; --danger-tone-700: 337 96.5% 33.7%; --danger-tone-800: 338 98% 25.9%; --danger-tone-900: 339 99.1% 17.8%; --danger-tone-950: 342 100% 12%; --primary-scale: 0.98; --secondary-scale: 0.99; --reference-scale: 0.98; --anchor: 0 0% 6.9%; --anchor-ink: 0 0% 100%; --info: 206 96.8% 36.8%; --action: 179 99% 21.9%; --action-ink: 0 0% 100%; --action-hover: 179 95.2% 18.8%; color-scheme: light;
}
/* DEFXN role names the SDK theme does not set (one meaning per name: --accent, set above, is the action colour) */
:root:not([data-dx-off]) { --signal:var(--primary); }

/* DEFXN product layer: shell, layout and components shared by every product
   surface (Repo, Code, Domains, Bundles, Packages, Remote, Deploy, Explore, Node).

   ONE SYSTEM, two sources:
     structure  Flux Launch (flux/flux-launchpad), the most current DEFXN
                surface: Albert Sans, one tight 600-weight headline with a
                muted second sentence, the segmented app bar, flat hairline
                panels (no shadows), a 4/8px grid, schematic figures with one
                live mark, figures that show a dash rather than a fake zero.
     color      defxn.com (flux/defxn): the Ember family and its roles, so the
                products keep DEFXN's life instead of Flux Launch's monochrome
                `ink` theme.

   Color: never a literal. Every paint reads a role token from the palette
   block this file is concatenated after (dist/defxn-product.css), and those
   tokens are raw HSL channels, so every use is hsl(var(--token)).

   Roles follow flux/defxn/docs/brand/DEFXN.md:
     primary    identity only: the DEFXN mark, one hero accent. Never an action
                or a hover/selected state.
     secondary  the main call to action, once per view (.dx-btn--solid)
     reference  secondary actions, links, every hover/selected/current state,
                and the focus ring
     success / warning / danger   state only
   Everything else is neutral, so the few colored things keep their weight.

   Type: three slots only (display, sans, mono), set by the build (FONT_SLOTS).
   Metadata is mono uppercase. The floor is 16px: no text in this sheet is
   smaller (pre-ship checklist, 2026-10-20; 11/12/14px labels until then).
   The scale is 16 / 20 / 24 / 32 / 40, display up to 48 inside a clamp().
   Line heights: running text 1.5 to 1.6, titles 1.1 to 1.2, one-line tags
   1.2 to 1.3. Gaps between elements are 8px or more (padding inside a tag
   may be smaller). Every link and button is a 44px target at every width.
   Motion: transitions on interaction only; nothing loops while idle.

   Mobile-first: the base rules are the phone (320px) rules, and every
   breakpoint is a min-width query in the Responsive section at the end
   (640.02 / 860.02 / 980.02 / 981 / 1040.02). Nothing here uses a
   max-width query. */

:root {
  --dx-radius: 8px;
  --dx-radius-sm: 6px;
  /* Phone bar height; 64px from 640.02px (Responsive section). */
  --dx-bar-h: 52px;
  /* Every bar control (switcher, nav, pill, toggle, actions) is one touch
     target tall: 44px (Power Design rule 4; was 40 until 2026-10-20). */
  --dx-strip-h: 44px;
  --dx-gutter: clamp(16px, 4vw, 40px);
  --dx-max: 1240px;
  --dx-ease: cubic-bezier(.2, .7, .2, 1);
  /* Link ink: --reference, except on Ember light, where --reference on a well
     (--depth) measures 4.2:1 and small text needs 4.5:1; there links take
     --reference-600 (5.27:1 on --depth, 5.02:1 on --nested). The focus ring
     and the solid action keep their own tokens. */
  --dx-link: var(--reference);
  /* Type slots (--font-*, --dx-font-*) are not set here: scripts/build.mjs
     emits them from FONT_SLOTS ahead of this file, in the bundle and in
     defxn-fonts.css alike, so the stacks have one source. */
}
/* Ember light legibility (Power Design rule 11, measured 2026-10-20): the
   SDK's ember-light --text-faint (40.6% lightness) is 4.24:1 on --depth and
   4.04:1 on --nested. Until the SDK ladder darkens it, faint text on light
   reads the muted tier (35%: 5.07:1 on --depth, 4.82:1 on --nested); no
   literal, so the SDK stays the only colour source. Same selectors and
   specificity (0,2,0) as the palette block, after it, so it wins by order. */
:root[data-dx-theme="light"]:where(:not([data-theme])), :root[data-theme="ember-light"] {
  --text-faint: var(--text-muted);
  --dx-link: var(--reference-600);
  /* The popover's lift on a light page is ink, not the (light) canvas. */
  --dx-lift-ink: var(--text-strong);
  --dx-lift-a: .16;
}

/* Control edge: the one boundary colour for anything a person presses or types
   into (WCAG 1.4.11, 3:1 against the surface beside it). It is the palette's own
   --border-control role, never a literal, so every theme the page can wear
   (Ember, Tide, Moss, Dune, Dusk, light or dark) answers with its own 3:1 ink.
   Re-declared on [data-theme] so a themed subtree reads its own role, not the
   root's. The hairline roles (--border-subtle/default/strong) stay for dividers
   and panels, which carry no control meaning and are not held to 3:1. Named
   regression (2026-10-20, fold-contrast sweep): every app-bar control drew its
   edge with --border-default (2.13:1 on Ember, 1.4:1 on the site themes). */
:root, [data-theme], [data-dx-theme] { --dx-edge: hsl(var(--border-control, var(--border-strong))); }

/* Base ------------------------------------------------------------------- */
/* `hidden` always wins: component display rules (grid, flex) must never
   reveal a step or form the page has hidden. */
.dx-page [hidden] { display: none !important; }
.dx-page, body.dx-page {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--canvas));
  color: hsl(var(--text));
  /* 16px/1.5 body (Power Design rule 4; 14px until 2026-10-20). */
  font: 400 16px/1.5 var(--dx-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dx-page *, .dx-page *::before, .dx-page *::after { box-sizing: border-box; }
/* Form controls take the page's type, not the browser's default face. Zero specificity, so every component still wins. */
:where(.dx-page) :where(button, input, select, textarea) { font-family: inherit; }
.dx-page :where(a) { color: hsl(var(--dx-link)); text-decoration-color: hsl(var(--reference-300)); text-underline-offset: 3px; }
.dx-page :where(a):hover { color: hsl(var(--reference-700)); text-decoration-color: hsl(var(--reference-400)); }
.dx-page :where(code, kbd, samp, pre) { font-family: var(--dx-font-mono); font-size: 1em; }
.dx-page :where(h1, h2, h3, h4) { color: hsl(var(--text-strong)); margin: 0; }
.dx-page :where(p) { margin: 0; }
.dx-page :where(a, button, summary, input, select, textarea, [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--reference));
  outline-offset: 3px;
}
.dx-page ::selection { background: hsl(var(--reference-200)); color: hsl(var(--text-strong)); }
.dx-sr { display: block !important; position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The family home (defxn.com) keeps its own page base, so it carries no
   .dx-page; the shell parts it mounts carry the same base themselves. On a
   product these repeat what .dx-page already sets, so nothing changes there. */
.dx-bar [hidden], .dx-foot [hidden] { display: none !important; }
:where(.dx-bar, .dx-foot), :where(.dx-bar, .dx-foot) *, :where(.dx-bar, .dx-foot) *::before, :where(.dx-bar, .dx-foot) *::after { box-sizing: border-box; }
:where(.dx-bar, .dx-foot) :where(button, input, select, textarea) { font-family: inherit; }
:where(.dx-bar, .dx-foot) :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid hsl(var(--reference)); outline-offset: 3px; }

/* Skip link (Power Design rule 18): the bar's first child, hidden until it
   takes focus, then a 44px control at the bar's left edge. mountShell
   renders it; its target is #main (the kit's convention for .dx-main). */
.dx-skip { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dx-skip:focus {
  left: var(--dx-gutter); top: calc((var(--dx-bar-h) - 44px) / 2); z-index: 60;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--dx-radius);
  background: hsl(var(--surface)); border: 1px solid var(--dx-edge); color: hsl(var(--dx-link));
  font: 600 16px/1.2 var(--dx-font-sans); text-decoration: none;
}

/* Shell bar --------------------------------------------------------------- */
/* Phone first: the bar wraps, so the product nav moves to a second,
   scrollable row (order 10, full width); from 640.02px it is one row. */
.dx-bar {
  position: sticky; top: 0; z-index: 40;
  height: auto; min-height: var(--dx-bar-h);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 0;
  padding: 4px var(--dx-gutter) 0;
  background: hsl(var(--canvas) / .84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid hsl(var(--border-subtle));
  font-family: var(--dx-font-sans);
}
/* The family landmark: brand and product switcher in one <nav aria-label="DEFXN">,
   so every page has a nav landmark even when a product hides its own. It lays
   out as the bar's row does (same gap), and shrinks so the switcher name can
   truncate on a phone. */
.dx-bar__family { display: flex; align-items: center; gap: inherit; flex: 0 1 auto; min-width: 0; }
/* The brand link is a 44px target even when it is only the 24px mark (a
   phone hides the word): the hit area is the link, the mark sits centred in
   it, and the bar's height does not grow (44 < 52). */
.dx-bar__brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px;
  color: hsl(var(--text-strong)); text-decoration: none;
  font: 650 16px/1.2 var(--dx-font-sans); letter-spacing: -.01em;
  flex: 0 0 auto;
}
.dx-bar__brand:hover { color: hsl(var(--text-strong)); }
.dx-bar__brand-word { display: none; }
.dx-mark {
  display: inline-block; flex: 0 0 auto; width: 24px; height: 24px;
  background: hsl(var(--text-strong));
  -webkit-mask: var(--dx-mark) center/contain no-repeat; mask: var(--dx-mark) center/contain no-repeat;
}
.dx-bar__sep { display: none; color: hsl(var(--text-faint)); font: 400 20px/1.2 var(--dx-font-sans); flex: 0 0 auto; }
/* One row on a 390px phone: brand mark, switcher, pill, toggle. Only the
   switcher NAME truncates: the pill and the toggle keep their boxes
   (flex: 0 0 auto; at 320px the pill was crushed to 9px). */
.dx-switch { position: relative; flex: 0 1 auto; min-width: 0; }
.dx-switch__trigger {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  height: var(--dx-strip-h); padding: 0 12px;
  background: hsl(var(--surface)); border: 1px solid var(--dx-edge); border-radius: var(--dx-radius);
  color: hsl(var(--text-strong)); cursor: pointer;
  font: 600 16px/1.2 var(--dx-font-sans);
  transition: background .15s var(--dx-ease), border-color .15s var(--dx-ease);
}
.dx-switch__trigger:hover { background: hsl(var(--raised)); }
/* Open: the trigger lifts one step, in neutrals like the panel it opens. */
.dx-switch__trigger[aria-expanded="true"] { background: hsl(var(--raised)); border-color: hsl(var(--border-strong)); color: hsl(var(--text-strong)); }
.dx-switch__lane {
  display: none;
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--text-muted)); padding: 4px 8px; border-right: 1px solid hsl(var(--border-default)); margin-right: 2px;
}
.dx-glyph { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.dx-switch__glyph { color: hsl(var(--primary)); }
.dx-switch__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-switch__chev { width: 10px; height: 10px; flex: 0 0 auto; color: hsl(var(--text-muted)); transition: transform .15s var(--dx-ease); }
.dx-switch__trigger[aria-expanded="true"] .dx-switch__chev { transform: rotate(180deg); color: inherit; }

/* Switcher panel: a command palette (shell.mjs switcher(), owner layout
   2026-10-22). Top: Find a product, the whole width, and close. Then the
   categories (rail), the chosen category's products (list) and the product
   pointed at (preview). Foot: the keys and the family home.
   Phone: one layer at a time under the top, data-dx-depth picking the rail
   or the list, "All categories" going back. From 640.02px the rail and the
   list sit side by side; from 981px the preview and the keys join them
   (Responsive section).
   Type follows defxn.com Home: Albert Sans, names set tight, 20px rows,
   the preview's name at display size. Colour: neutral ink on a neutral
   ground, white for the row pointed at, and orange only for identity: the
   selected category and the preview's category name. */
.dx-switch__panel {
  /* One instrument panel: neutral ink on a neutral ground and one hot accent
     (owner direction 2026-10-22: the warm Ember greys read as muddy; then,
     the same day, pure black read as too dark). Every role token is
     remapped here, once, from three theme-fixed tokens:
       --anchor            black (dark) / near black (light)
       --anchor-ink        white
       --primary-tone-*    the orange ladder, the same in both themes
     Dark: white ink on black lifted to charcoal (--hx-lift). Light: near-
     black ink on white. Every rule below keeps reading roles (--text,
     --border-*, --primary). No blue: links, focus and selection are ink.
     Text strengths are set per theme and held to 4.5:1 on the panel. */
  --hx-ink: var(--anchor-ink);
  --hx-bg: var(--anchor);
  --hx-lift: .075;
  --hx-a-text: .84;
  --hx-a-muted: .66;
  --hx-a-faint: .54;
  --hx-accent: var(--primary-tone-400);
  --text-strong: var(--hx-ink);
  --text: var(--hx-ink) / var(--hx-a-text);
  --text-muted: var(--hx-ink) / var(--hx-a-muted);
  --text-faint: var(--hx-ink) / var(--hx-a-faint);
  --surface: var(--hx-bg);
  --canvas: var(--hx-bg);
  --depth: var(--hx-bg);
  --raised: var(--hx-bg);
  --nested: var(--hx-ink) / .08;
  --border-subtle: var(--hx-ink) / .08;
  --border-default: var(--hx-ink) / .14;
  --border-strong: var(--hx-ink) / .28;
  --reference: var(--hx-ink);
  --dx-link: var(--hx-ink);
  --primary: var(--hx-accent);
  --warning: var(--hx-ink) / var(--hx-a-muted);
  /* The one action is ink on ground, inverted: the strongest contrast the
     panel has. */
  --secondary: var(--hx-ink);
  --secondary-600: var(--hx-ink) / .86;
  --secondary-ink: var(--hx-bg);
  /* The ground: --hx-bg with the ink laid over it at --hx-lift. Opaque. */
  --hx-ground: linear-gradient(hsl(var(--hx-ink) / var(--hx-lift)), hsl(var(--hx-ink) / var(--hx-lift))), hsl(var(--hx-bg));
  color-scheme: dark;
  --dx-wash: hsl(var(--text-strong) / .05);
  --dx-wash-2: hsl(var(--text-strong) / .08);
  --dx-wash-3: hsl(var(--text-strong) / .12);
  /* One timing for every hover and press in the switcher. */
  --dx-t: .16s var(--dx-ease);
  position: fixed; top: calc(var(--dx-bar-h) + 6px); left: 8px; right: 8px; z-index: 50;
  width: auto;
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "rail" "list" "foot";
  max-height: calc(100vh - var(--dx-bar-h) - 24px); overflow: auto;
  border: 1px solid hsl(var(--border-default)); border-radius: 16px;
  background: var(--hx-ground);
  /* The kit's one shadow. Panels are flat hairlines; this one floats over
     the page it was opened from, so it lifts: a wide soft fall-off in the
     canvas colour (ink on a light page), plus a faint highlight along its
     top edge. */
  box-shadow:
    inset 0 1px 0 hsl(var(--text-strong) / .05),
    0 32px 64px -24px hsl(var(--dx-lift-ink, var(--canvas)) / var(--dx-lift-a, .9)),
    0 8px 24px -8px hsl(var(--dx-lift-ink, var(--canvas)) / var(--dx-lift-a, .6));
  /* Scrolls, never clips. Named regression (2026-10-19): a trailing
     `overflow: hidden` here overrode the `overflow: auto` above, so on a phone
     the lanes below the screen edge (Assets, then the new DeFi lane) could not
     be reached at all. overscroll-behavior keeps the page from scrolling under it. */
  overscroll-behavior: contain;
}
.dx-switch__panel[hidden] { display: none; }
/* The overlay under the open panel (owner direction 2026-10-22): the page
   below the bar in its own canvas colour at 90%, softened, so the palette
   reads alone and the bar above it stays in reach. */
.dx-switch__scrim {
  /* placed by shell.mjs (placeScrim) under the bar; these are the defaults */
  position: fixed; top: var(--dx-bar-h); left: 0; width: 100vw; height: calc(100vh - var(--dx-bar-h)); z-index: 49;
  background: hsl(var(--canvas) / .9);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: dx-scrim-in .16s var(--dx-ease);
}
.dx-switch__scrim[hidden] { display: none; }
@keyframes dx-scrim-in { from { opacity: 0; } }
/* Motion explains change, once, on the reader's action: the panel drops in
   from the trigger and a new category slides in from the rail. */
.dx-switch__panel:not([hidden]) { animation: dx-switch-in .16s var(--dx-ease); }
@keyframes dx-switch-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dx-pane-in { from { opacity: 0; transform: translateX(8px); } }
@keyframes dx-preview-in { from { opacity: .4; } }
/* Inside a scrolling panel an outside ring is clipped: draw it inside. */
.dx-switch__panel :focus-visible { outline: 2px solid hsl(var(--reference)); outline-offset: -2px; }


/* Top ------------------------------------------------------------------- */
.dx-switch__top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid hsl(var(--border-subtle)); }
.dx-switch__find {
  flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; height: 48px; padding: 0 16px;
  background: var(--dx-wash); border: 1px solid hsl(var(--border-default)); border-radius: 10px;
  color: hsl(var(--text-muted)); cursor: text; transition: border-color var(--dx-t), background var(--dx-t);
}
.dx-switch__find:hover { background: var(--dx-wash-2); }
.dx-switch__find:focus-within { border-color: hsl(var(--border-strong)); background: var(--dx-wash-2); }
.dx-switch__find svg { flex: 0 0 auto; }
.dx-switch__find .dx-switch__find-input {
  /* Two classes deep, and every box property set: a host page's own input
     rules (defxn.com paints search fields black) must not reach this one. */
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  color: hsl(var(--text-strong)); font: 400 16px/1.2 var(--dx-font-sans);
}
/* A host page's focus rule must not repaint the field. Named regression
   (2026-10-22): defxn.com's css/focus.css paints
   `#scene :is(a, button, input):not(.ark-block *):focus-visible` with
   --raised, which this panel maps to its ground, so the focused field turned
   black; an ID selector outranks any class here, so the field holds its own
   look with !important. The field's border (on the label) shows focus. */
.dx-switch__find .dx-switch__find-input, .dx-switch__find .dx-switch__find-input:focus, .dx-switch__find .dx-switch__find-input:focus-visible { outline: none !important; background: none !important; box-shadow: none !important; }
.dx-switch__find-input::placeholder { color: hsl(var(--text-faint)); }
.dx-switch__find-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dx-switch__close {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 10px; color: hsl(var(--text-muted)); cursor: pointer;
  transition: background var(--dx-t), color var(--dx-t);
}
.dx-switch__close:hover { background: var(--dx-wash); color: hsl(var(--text-strong)); }

.dx-switch__rail, .dx-switch__stage { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 12px; min-width: 0; }
.dx-switch__rail { grid-area: rail; }
.dx-switch__stage { grid-area: list; }
.dx-switch__preview { grid-area: preview; display: none; }
.dx-switch__panel[data-dx-depth="rail"] .dx-switch__stage { display: none; }
.dx-switch__panel[data-dx-depth="stage"] .dx-switch__rail { display: none; }

/* Rail: a category is its mark and its name. Selected: the identity tint,
   orange words and mark, and an orange edge (owner layout; the one
   identity-coloured state, named in test/kit.test.mjs). */
.dx-switch__tabs { display: grid; gap: 2px; }
.dx-switch__tab {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 4px 12px;
  background: none; border: 0; border-radius: 8px;
  color: hsl(var(--text-muted)); font: 500 16px/1.2 var(--dx-font-sans); text-align: left; cursor: pointer;
  transition: background var(--dx-t), color var(--dx-t);
}
.dx-switch__tab:hover { background: var(--dx-wash); color: hsl(var(--text-strong)); }
.dx-switch__tab-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; color: hsl(var(--text-faint)); }
.dx-switch__tab-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-switch__tab[aria-selected="true"] { background: hsl(var(--primary) / var(--hx-tint, .12)); color: hsl(var(--primary)); box-shadow: inset 3px 0 0 hsl(var(--primary)); }
.dx-switch__tab[aria-selected="true"] .dx-switch__tab-mark { color: hsl(var(--primary)); }
.dx-switch__tab:active { background: var(--dx-wash-3); }
/* While Find shows results, no category is the one on screen. */
.dx-switch__panel[data-dx-searching] .dx-switch__tab[aria-selected="true"] { background: none; color: hsl(var(--text)); box-shadow: none; }
.dx-switch__panel[data-dx-searching] .dx-switch__tab[aria-selected="true"] .dx-switch__tab-mark { color: hsl(var(--text-muted)); }

/* List ------------------------------------------------------------------ */
.dx-switch__back {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  background: none; border: 0; border-radius: 8px; color: hsl(var(--text-strong)); font: 600 16px/1.2 var(--dx-font-sans); cursor: pointer;
}
.dx-switch__panel[data-dx-depth="rail"] .dx-switch__back { display: none; }
.dx-lane, .dx-resolvers, .dx-switch__results { display: grid; align-content: start; gap: 8px; min-width: 0; }
.dx-lane:not([hidden]), .dx-resolvers:not([hidden]) { animation: dx-pane-in .18s var(--dx-ease); }
.dx-lane__head { padding: 4px 8px 8px; }
.dx-lane__name { font: 600 20px/1.2 var(--dx-font-sans); color: hsl(var(--text-strong)); }
.dx-lane__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* A row: the bare mark, the name and what it is, and a chevron. The row
   pointed at turns white (ink ground, ground-coloured words). */
.dx-product-link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  min-height: 88px; padding: 12px 16px 12px 12px; border-radius: 12px;
  background: var(--dx-wash); box-shadow: inset 0 0 0 1px hsl(var(--border-subtle));
  color: hsl(var(--text)); text-decoration: none;
  transition: background var(--dx-t), color var(--dx-t), box-shadow var(--dx-t);
}
.dx-product-link:hover { background: var(--dx-wash-2); box-shadow: inset 0 0 0 1px hsl(var(--border-default)); }
.dx-product-link[data-dx-previewed] { background: hsl(var(--secondary)); color: hsl(var(--secondary-ink)); box-shadow: none; }
.dx-product-link:active { background: hsl(var(--secondary) / .86); }
/* The mark on its own tile, so every card has a picture at the same place. */
.dx-row__mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--dx-wash-2); box-shadow: inset 0 0 0 1px hsl(var(--border-subtle)); }
.dx-product-link[data-dx-previewed] .dx-row__mark { background: hsl(var(--secondary-ink) / .08); box-shadow: inset 0 0 0 1px hsl(var(--secondary-ink) / .12); }
/* The facts line: where it lives, what flows through it, its status last. */
/* One line: the address gives way (ellipsis) before the counts do. */
.dx-row__facts { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; min-width: 0; margin-top: 4px; font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .02em; color: hsl(var(--text-faint)); }
.dx-row__facts > span { flex: 0 0 auto; white-space: nowrap; }
.dx-row__facts > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dx-product-link[data-dx-previewed] .dx-row__facts { color: hsl(var(--secondary-ink) / .66); }
/* Tags: the card's short facts (version, access, live, resolver). Quiet
   outlined capsules; Live carries a dot, Public a small globe ring. */
.dx-row__tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.dx-tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px hsl(var(--border-default));
  font: 500 16px/1 var(--dx-font-sans); color: hsl(var(--text-muted)); white-space: nowrap;
}
.dx-tag[data-tone="live"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--success)); }
.dx-tag[data-tone="public"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.dx-product-link[data-dx-previewed] .dx-tag { color: hsl(var(--secondary-ink) / .74); box-shadow: inset 0 0 0 1px hsl(var(--secondary-ink) / .2); }
/* The preview's facts: a two-column key and value list. */
.dx-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 4px 0 0; padding: 12px 0; border-top: 1px solid hsl(var(--primary) / .18); border-bottom: 1px solid hsl(var(--primary) / .18); }
.dx-facts dt { font: 500 16px/1.3 var(--dx-font-mono); letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--text-faint)); }
.dx-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 16px/1.3 var(--dx-font-sans); color: hsl(var(--text-strong)); }
.dx-facts dd[data-tone="live"]::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--success)); }
.dx-product-link[data-dx-previewed] .dx-row__facts .dx-badge { color: hsl(var(--secondary-ink) / .66); }
.dx-product-link[data-dx-previewed] .dx-row__facts .dx-badge::before { background: repeating-linear-gradient(-45deg, hsl(var(--secondary-ink) / .7) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px hsl(var(--secondary-ink) / .7); }
.dx-product-link[data-dx-previewed] .dx-row__facts .dx-badge[data-tone="warn"]::before { background: none; box-shadow: inset 0 0 0 1px hsl(var(--secondary-ink) / .5); }
.dx-row__svg { color: hsl(var(--text-strong)); }
.dx-product-link[data-dx-previewed] .dx-row__svg { color: hsl(var(--secondary-ink)); }
.dx-row__text { display: grid; gap: 2px; min-width: 0; }
.dx-product-link__name { font: 600 16px/1.3 var(--dx-font-sans); color: hsl(var(--text-strong)); }
.dx-product-link__line { font-size: 16px; line-height: 1.35; color: hsl(var(--text-faint)); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dx-product-link[data-dx-previewed] :is(.dx-product-link__name, .dx-row__go) { color: hsl(var(--secondary-ink)); }
.dx-product-link[data-dx-previewed] .dx-product-link__line { color: hsl(var(--secondary-ink) / .72); }
.dx-row__go { color: hsl(var(--text-muted)); transition: transform var(--dx-t); }
.dx-product-link:hover .dx-row__go { transform: translateX(2px); }
.dx-row__here { font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--text-faint)); white-space: nowrap; }
.dx-product-link[data-dx-previewed] .dx-row__here { color: hsl(var(--secondary-ink) / .66); }
/* On a phone the row is too narrow for the words; the row itself is marked. */
.dx-row__here { display: none; }
/* The address lives in the preview's action; the row keeps it for retargetLinks. */
.dx-product-link__where { display: none; }
.dx-switch__none { padding: 8px; font-size: 16px; line-height: 1.5; color: hsl(var(--text-muted)); }

/* Status: a block and a word. Building is a hatched block: work under way.
   Planned is an empty outlined block: nothing built yet. */
.dx-switch__panel .dx-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none;
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--text-faint));
}
.dx-switch__panel .dx-badge::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 8px;
  background: repeating-linear-gradient(-45deg, hsl(var(--hx-ink) / .7) 0 1.5px, transparent 1.5px 4px);
  box-shadow: inset 0 0 0 1px hsl(var(--hx-ink) / .7);
}
.dx-switch__panel .dx-badge[data-tone="warn"] { background: none; color: hsl(var(--text-faint)); }
.dx-switch__panel .dx-badge[data-tone="warn"]::before { background: none; box-shadow: inset 0 0 0 1px hsl(var(--hx-ink) / .5); }

/* Preview (from 981px) -------------------------------------------------- */
/* The preview is a card of its own, on a shade of the theme's primary
   (owner direction 2026-10-22): the identity orange laid over the panel's
   ground at a low strength, with an edge in the same hue. The thing
   pointed at, set apart from the lists that lead to it. A surface, not a
   state, so the identity colour is allowed here. */
.dx-switch__preview {
  --dx-card-bg: linear-gradient(hsl(var(--primary) / var(--hx-card, .09)), hsl(var(--primary) / var(--hx-card, .09))), var(--hx-ground);
  align-content: start; gap: 12px; margin: 12px; padding: 24px 28px; min-width: 0;
  background: var(--dx-card-bg); border: 1px solid hsl(var(--primary) / .28); border-radius: 14px;
  box-shadow: inset 0 1px 0 hsl(var(--primary) / .12);
}
.dx-switch__preview > * { animation: dx-preview-in .14s var(--dx-ease); }
.dx-preview__eyebrow { font: 600 16px/1.2 var(--dx-font-sans); color: hsl(var(--primary)); }
.dx-preview__title { display: flex; align-items: center; gap: 16px; min-width: 0; margin: 4px 0; }
.dx-preview__tile {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px;
  border: 1px solid hsl(var(--primary) / .28); border-radius: 10px; background: hsl(var(--primary) / .1); color: hsl(var(--text-strong));
}
.dx-preview__name { min-width: 0; font: 700 32px/1.05 var(--dx-font-sans); letter-spacing: -.03em; color: hsl(var(--text-strong)); overflow-wrap: anywhere; }
.dx-preview__what { margin: 0; font: 500 20px/1.35 var(--dx-font-sans); color: hsl(var(--text)); }
.dx-preview__line { margin: 0; font-size: 16px; line-height: 1.5; color: hsl(var(--text-muted)); }
/* The caveat, last: the status block and one plain sentence. */
.dx-preview__caveat { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; line-height: 1.4; color: hsl(var(--text-muted)); }
.dx-preview__caveat .dx-badge { flex: 0 0 auto; }
/* Related destinations: up to three, side by side, hairlines between. Each
   one moves the switcher to that product. */
.dx-related { display: grid; gap: 8px; margin-top: 8px; }
.dx-related__label { font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--text-faint)); }
.dx-related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-related__item {
  display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 44px; padding: 4px 16px; margin: 0;
  background: none; border: 0; border-left: 1px solid hsl(var(--border-subtle)); border-radius: 0;
  color: hsl(var(--text)); text-align: left; cursor: pointer;
}
.dx-related__item:first-child { padding-left: 0; border-left: 0; }
.dx-related__top { display: flex; align-items: center; gap: 8px; min-width: 0; color: hsl(var(--text-strong)); }
.dx-related__mark { flex: 0 0 auto; }
.dx-related__name { font: 600 16px/1.2 var(--dx-font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-related__arrow { transition: transform var(--dx-t); }
.dx-related__item:hover .dx-related__arrow { transform: translateX(3px); }
.dx-related__item:hover .dx-related__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dx-related__line { font-size: 16px; line-height: 1.4; color: hsl(var(--text-faint)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The one action: Open, the full width, white. It holds the preview's
   bottom edge, so a long preview scrolls under it and Open stays in view. */
.dx-preview__foot { display: grid; margin-top: 8px; }
.dx-switch__preview .dx-preview__foot { position: sticky; bottom: -24px; z-index: 1; margin: 8px -28px -24px; padding: 12px 28px 24px; background: var(--dx-card-bg); border-radius: 0 0 14px 14px; }
.dx-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 8px;
  background: hsl(var(--secondary)); color: hsl(var(--secondary-ink)); font: 600 16px/1.2 var(--dx-font-sans); text-decoration: none;
  transition: background var(--dx-t);
}
.dx-cta:hover { background: hsl(var(--secondary-600)); color: hsl(var(--secondary-ink)); }
.dx-cta:active { background: hsl(var(--secondary) / .74); }
.dx-cta:focus-visible { outline: 2px solid hsl(var(--hx-ink)); outline-offset: 2px; }
.dx-cta__go { transition: transform var(--dx-t); }
.dx-cta:is(:hover, :focus-visible) .dx-cta__go { transform: translate(2px, -2px); }
.dx-cta--here { background: var(--dx-wash-2); color: hsl(var(--text-muted)); }
.dx-preview__here { font-size: 16px; line-height: 1.4; color: hsl(var(--text-muted)); }
/* Marks are drawn in solid ink and dimmed as one layer, never in a
   see-through ink: their pieces overlap, and a see-through ink doubles
   where they do. */
.dx-mark-svg, .dx-preview__mark, .dx-related__mark { color: hsl(var(--text-strong)); }

/* Foot: the keys that drive it (from 981px), and the family home. */
.dx-switch__foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 4px 16px; border-top: 1px solid hsl(var(--border-subtle)); }
.dx-switch__keys { display: none; align-items: center; gap: 20px; -webkit-user-select: none; user-select: none; }
.dx-switch__key { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; line-height: 1; color: hsl(var(--text-faint)); }
.dx-switch__key > span { margin-left: 4px; }
/* A key cap: one quiet square, the key drawn in it (Esc is the one word). */
.dx-switch__cap {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px;
  border: 1px solid hsl(var(--border-default)); border-radius: 6px; background: var(--dx-wash);
  font: 500 16px/1 var(--dx-font-mono); color: hsl(var(--text-muted));
}
.dx-switch__cap--word { padding: 0 8px; letter-spacing: 0; }
.dx-switch__home {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; margin-left: auto;
  border-radius: 8px; color: hsl(var(--text-muted)); text-decoration: none; transition: background var(--dx-t), color var(--dx-t);
}
a.dx-switch__home:hover { background: var(--dx-wash); color: hsl(var(--text-strong)); }
.dx-switch__home[aria-current="page"] { color: hsl(var(--text-strong)); }
.dx-switch__home .dx-mark { width: 16px; height: 16px; }
.dx-switch__home-name { font: 500 16px/1.2 var(--dx-font-sans); }
.dx-switch__home .dx-product-link__where { display: none; }

/* The switcher on a light page: near-black ink on white, the deeper orange
   (tone 600: orange is also text here, the selected category and the
   preview's category, and tone 500 measured 3.1:1 on its own tint, below
   4.5:1), and stronger text alphas, because ink on white loses contrast
   faster than white on black. */
:root[data-dx-theme="light"]:where(:not([data-theme])) .dx-switch__panel, :root[data-theme="ember-light"] .dx-switch__panel {
  --hx-ink: var(--anchor);
  --hx-bg: var(--anchor-ink);
  --hx-lift: 0;
  --hx-a-text: .88;
  --hx-a-muted: .74;
  --hx-a-faint: .66;
  --hx-accent: var(--primary-tone-600);
  /* a lighter tint behind the selected category, so its orange words keep 4.5:1 */
  --hx-tint: .06;
  /* the preview card one step darker than the white panel */
  --hx-card: .06;
  color-scheme: light;
}

/* Phone: the nav is the bar's second row (order 10, full width). The 1px
   gap is the segment divider (the group's edge colour shows through), not
   a space between elements. */
.dx-bar__nav {
  display: grid; grid-auto-flow: column; gap: 1px; height: var(--dx-strip-h); min-width: 0;
  order: 10; flex: 1 0 100%; margin: 8px 0;
  overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--dx-edge); border-radius: var(--dx-radius); background: var(--dx-edge);
}
.dx-bar__nav::-webkit-scrollbar { display: none; }
/* Segments keep their whole label; a long nav scrolls sideways instead of squeezing. */
.dx-bar__nav { grid-auto-columns: max-content; }
.dx-bar__nav > * { min-width: max-content; }
.dx-bar__nav a, .dx-bar__nav button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px;
  color: hsl(var(--text-muted)); text-decoration: none; white-space: nowrap;
  font: 500 16px/1.2 var(--dx-font-sans); background: hsl(var(--surface)); border: 0; border-radius: 0; cursor: pointer;
  transition: color .15s var(--dx-ease), background-color .15s var(--dx-ease);
}
.dx-bar__nav > :first-child, .dx-bar__nav > :first-child :is(a, button) { border-radius: 7px 0 0 7px; }
.dx-bar__nav > :last-child, .dx-bar__nav > :last-child :is(a, button) { border-radius: 0 7px 7px 0; }
.dx-bar__nav > :only-child, .dx-bar__nav > :only-child :is(a, button) { border-radius: 7px; }
.dx-bar__nav a:hover, .dx-bar__nav button:hover { background: hsl(var(--raised)); color: hsl(var(--text-strong)); }
.dx-bar__nav a:active, .dx-bar__nav button:active { background: hsl(var(--nested)); }
/* Current section: raised segment, strong ink, one 2px reference bar inset from the edges. */
.dx-bar__nav [aria-current="page"], .dx-bar__nav [aria-selected="true"], .dx-bar__nav [aria-current="true"] {
  background: hsl(var(--raised)); color: hsl(var(--text-strong)); font-weight: 600;
}
.dx-bar__nav :is([aria-current="page"], [aria-selected="true"], [aria-current="true"])::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: hsl(var(--reference));
}
.dx-bar__nav :is(a, button):focus-visible { outline-offset: -2px; }
.dx-bar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dx-theme-toggle {
  width: var(--dx-strip-h); height: var(--dx-strip-h); flex: 0 0 auto; display: inline-grid; place-items: center;
  background: hsl(var(--surface)); border: 1px solid var(--dx-edge); border-radius: var(--dx-radius);
  color: hsl(var(--text-muted)); cursor: pointer; font: 500 16px/1.2 var(--dx-font-sans);
}
.dx-theme-toggle:hover { color: hsl(var(--text-strong)); background: hsl(var(--raised)); }
.dx-theme-toggle svg { width: 16px; height: 16px; }

/* Sub-brand beside the word mark ("DEFXN DeFi", "DEFXN FXN CHAIN"): quiet,
   mono; a phone hides it. */
.dx-bar__brand-sub {
  display: none;
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--text-muted)); padding-left: 8px; border-left: 1px solid hsl(var(--border-default));
}
/* Actions slot: account, sign in, the one solid header action, a network popover. */
.dx-bar__actions { display: flex; align-items: center; gap: 8px; }
.dx-bar__actions > .dx-btn { min-height: var(--dx-strip-h); }

/* Menu mode: unfolded, the menu box is invisible to layout (the nav and the
   actions sit in the row as if it were not there); folded, it is one panel
   under the bar, opened by the Menu button. */
.dx-bar__menu { display: contents; }
.dx-bar__menu-toggle { display: none; }
.dx-bar[data-dx-menu="folded"] .dx-bar__menu-toggle {
  display: inline-flex; align-items: center; height: var(--dx-strip-h); padding: 0 12px; cursor: pointer;
  background: hsl(var(--surface)); border: 1px solid var(--dx-edge); border-radius: var(--dx-radius);
  color: hsl(var(--text-strong)); font: 600 16px/1.2 var(--dx-font-sans);
}
.dx-bar[data-dx-menu="folded"] .dx-bar__menu-toggle[aria-expanded="true"] { background: hsl(var(--reference-100)); border-color: hsl(var(--reference-300)); color: hsl(var(--reference-700)); }
.dx-bar[data-dx-menu="folded"] .dx-bar__menu {
  display: grid; gap: 12px; align-content: start;
  position: fixed; top: calc(var(--dx-bar-h) + 6px); left: 8px; right: 8px; z-index: 50;
  width: auto; max-height: calc(100vh - var(--dx-bar-h) - 24px); overflow: auto;
  padding: 12px; background: hsl(var(--overlay)); border: 1px solid hsl(var(--border-strong)); border-radius: var(--dx-radius);
}
.dx-bar[data-dx-menu="folded"] .dx-bar__menu[hidden] { display: none; }
.dx-bar[data-dx-menu="folded"] .dx-bar__nav {
  grid-auto-flow: row; grid-auto-columns: auto; height: auto; margin: 0; overflow: visible; order: 0; flex: none;
}
.dx-bar[data-dx-menu="folded"] .dx-bar__nav > * { min-width: 0; }
/* Folded nav rows are targets too: 44px (40 until 2026-10-20). */
.dx-bar[data-dx-menu="folded"] .dx-bar__nav a, .dx-bar[data-dx-menu="folded"] .dx-bar__nav button { height: 44px; border-radius: 0; }
.dx-bar[data-dx-menu="folded"] .dx-bar__nav > :first-child, .dx-bar[data-dx-menu="folded"] .dx-bar__nav > :first-child :is(a, button) { border-radius: 7px 7px 0 0; }
.dx-bar[data-dx-menu="folded"] .dx-bar__nav > :last-child, .dx-bar[data-dx-menu="folded"] .dx-bar__nav > :last-child :is(a, button) { border-radius: 0 0 7px 7px; }
.dx-bar[data-dx-menu="folded"] .dx-bar__actions { flex-wrap: wrap; }

/* Home mode (the family home, defxn.com: mountShell mode 'home') ------------
   The home's bar sits in the home's own full-viewport stage and carries the
   home's own nav and controls, so it differs from a product's bar in these
   ways, each scoped to [data-dx-mode="home"] (no product renders it):
   - the home MEASURES its row and moves links into its own all-pages menu
     one at a time (defxn js/resolvers/header.js), so no bar part shrinks,
     truncates or scrolls inside the bar;
   - the switcher panel hangs from the bar, not the window: the stage is the
     home's viewport, and a reading page scrolls the document under a fixed
     bar, where a window-fixed panel would not follow it;
   - up to 1040px the nav lives in that menu, and on a phone the bar stays
     ONE row (a product's phone bar wraps its nav onto a second row, which
     would push the home's pages down);
   - the bar carries the DEFXN mark only (owner, 2026-10-25): no word, no
     sub-brand, no slash. The mark sits in the bar's LEFT PADDING (placed
     absolutely; the home widens that padding by the mark's room, defxn
     css/navigation.css --hdr-mark-room), so the row fit, which subtracts the
     padding from the room, counts the mark's space exactly; every control
     sits in one cluster on the right, pushed there by its first part;
   - the controls are 36px tall and the words are the home's type scale
     (--fs-*, defxn css/page-layout.css), and from 1040.02px the Products
     trigger and the nav read as ONE segmented control.
   Moved here from defxn css/navigation.css on 2026-10-28 (owner: the kit
   styles its own classes), with the values the home showed then. */
.dx-bar[data-dx-mode="home"] { height: var(--dx-bar-h); flex-wrap: nowrap; padding-top: 0; --dx-strip-h: 36px; gap: 6px; }
.dx-bar[data-dx-mode="home"] :is(.dx-bar__family, .dx-bar__brand, .dx-switch, .dx-bar__nav, .dx-bar__end) { flex: 0 0 auto; min-width: auto; }
.dx-bar[data-dx-mode="home"] .dx-bar__nav { display: none; overflow: visible; margin: 0; height: 36px; }
.dx-bar[data-dx-mode="home"] .dx-bar__nav :is(a, button) { padding: 0 10px; gap: 6px; font: 500 var(--fs-tertiary)/1 var(--dx-font-sans); }
.dx-bar[data-dx-mode="home"] :is(.dx-bar__brand-word, .dx-bar__brand-sub, .dx-bar__sep) { display: none; }
.dx-bar[data-dx-mode="home"] .dx-bar__actions { gap: 6px; }
.dx-bar[data-dx-mode="home"] .dx-bar__actions > * { flex: 0 0 auto; }
.dx-bar[data-dx-mode="home"] .dx-bar__brand {
  position: absolute; left: max(var(--dx-gutter), env(safe-area-inset-left, 0px));
  top: calc(env(safe-area-inset-top, 0px) + (var(--dx-bar-h) - 44px) / 2);
  width: 24px; min-width: 24px; height: 44px;
}
/* The cluster's push: the family leads it, unless the home puts a control of
   its own before the family (defxn: Get FXN Browser), which then carries it. */
.dx-bar[data-dx-mode="home"] .dx-bar__family { margin-left: auto; }
.dx-bar[data-dx-mode="home"] .dx-bar__end { margin-left: 0; }
.dx-bar[data-dx-mode="home"] .dx-switch { position: static; }
.dx-bar[data-dx-mode="home"] .dx-switch__trigger { height: 36px; padding: 0 10px; gap: 6px; font: 600 var(--fs-tertiary)/1 var(--dx-font-sans); border-radius: var(--dx-radius, 8px); }
.dx-bar[data-dx-mode="home"] .dx-switch__trigger .dx-glyph { width: 18px; height: 18px; }

/* The home's Products panel wears the home's own panel dress (defxn's "you"
   panel): glass on --overlay, a 2px --primary top edge, a 12px radius, mono
   hairline labels, at most 1200x700. Every role token the panel remaps above
   INHERITS again here, so the panel takes the home's theme and a worn NFT
   skin, which sets them on the home's stage (defxn js/ark/skin-site.js;
   measured 2026-10-25: --primary 84 on the stage, 21 inside the panel before
   this). Only --primary itself is used, never its numbered steps: a skin sets
   --primary and not its ladder. The selected row takes the base (--primary)
   and Open, the one dominant action, the complement (--secondary), per the
   home's design laws 71-77. Sizes are steps of the home's type scale: 18 for
   names, rows, controls and values, 11 for labels and metadata, 29 for the
   preview's name. The inner rules hold the specificity they had on the home
   (:where() adds none), so the kit's own state rules (Find searching) still
   win over them. */
.dx-bar[data-dx-mode="home"] .dx-switch__panel {
  position: absolute; top: calc(100% + 8px);
  left: max(var(--dx-gutter), 8px, calc((100vw - 1200px) / 2)); right: auto; width: min(1200px, calc(100vw - 2 * max(var(--dx-gutter), 8px)));
  max-height: calc(100dvh - var(--dx-bar-h) - 24px);
  --text-strong: inherit; --text: inherit; --text-muted: inherit; --text-faint: inherit;
  --surface: inherit; --canvas: inherit; --depth: inherit; --raised: inherit; --nested: inherit;
  --border-subtle: inherit; --border-default: inherit; --border-strong: inherit;
  --reference: inherit; --primary: inherit; --warning: inherit; --secondary: inherit; --secondary-600: inherit; --secondary-ink: inherit;
  --hx-ink: var(--text-strong); --hx-bg: var(--surface); --hx-accent: var(--primary);
  --hx-ground: linear-gradient(hsl(var(--text-strong) / .04), hsl(var(--text-strong) / .04)), hsl(var(--overlay));
  --dx-link: var(--text-strong);
  color-scheme: normal;
  border: 1px solid hsl(var(--border-default)); border-top: 2px solid hsl(var(--primary)); border-radius: 12px;
  background: var(--hx-ground); box-shadow: 0 24px 60px hsl(0 0% 0% / .45);
}
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel :focus-visible { outline-color: hsl(var(--primary)); }
/* top: the find box and close */
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__top { padding: 12px; gap: 10px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__find { height: 42px; padding: 0 14px; gap: 10px; border-radius: 8px; background: hsl(var(--text-strong) / .04); box-shadow: inset 0 0 0 1px hsl(var(--border-subtle)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__find:focus-within { box-shadow: inset 0 0 0 1px hsl(var(--primary) / .6); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__find .dx-switch__find-input { font: 400 var(--fs-secondary)/1.2 var(--dx-font-sans); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__close { width: 42px; height: 42px; border-radius: 8px; }
/* rail: one category per row, the selected one in the base */
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel :is(.dx-switch__rail, .dx-switch__stage) { gap: 8px; padding: 12px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__tabs { gap: 2px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__tab { min-height: 44px; padding: 4px 12px; gap: 10px; border-radius: 8px; font: 500 var(--fs-secondary)/1.2 var(--dx-font-sans); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__tab:hover { background: hsl(var(--text-strong) / .06); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__tab[aria-selected="true"] { background: hsl(var(--primary) / .12); color: hsl(var(--text-strong)); box-shadow: inset 2px 0 0 hsl(var(--primary)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__tab[aria-selected="true"] .dx-switch__tab-mark { color: hsl(var(--primary)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__tab-mark { width: 18px; height: 18px; }
/* list: a row per product; the previewed row is tinted with --primary, never a white block */
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-lane__head { padding: 2px 8px 6px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-lane__name { font: 600 var(--fs-tertiary)/1.4 var(--dx-font-mono); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--text-muted)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel :is(.dx-lane__list, .dx-lane, .dx-resolvers, .dx-switch__results) { gap: 6px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link {
  grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; min-height: 0; padding: 12px 14px 12px 10px; border-radius: 10px;
  background: hsl(var(--text-strong) / .03); box-shadow: inset 0 0 0 1px hsl(var(--border-subtle));
}
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link:hover { background: hsl(var(--text-strong) / .06); box-shadow: inset 0 0 0 1px hsl(var(--border-default)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] { background: hsl(var(--primary) / .12); color: hsl(var(--text)); box-shadow: inset 0 0 0 1px hsl(var(--primary) / .45), inset 3px 0 0 hsl(var(--primary)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link:active { background: hsl(var(--primary) / .18); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] :is(.dx-product-link__name, .dx-row__svg) { color: hsl(var(--text-strong)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] .dx-row__go { color: hsl(var(--primary)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] :is(.dx-product-link__line, .dx-row__facts, .dx-row__here, .dx-row__facts .dx-badge) { color: hsl(var(--text-muted)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] .dx-row__mark { background: hsl(var(--primary) / .14); box-shadow: inset 0 0 0 1px hsl(var(--primary) / .35); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] .dx-tag { color: hsl(var(--text-muted)); box-shadow: inset 0 0 0 1px hsl(var(--border-default)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-dx-previewed] .dx-row__facts .dx-badge::before { background: repeating-linear-gradient(-45deg, hsl(var(--text-strong) / .7) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px hsl(var(--text-strong) / .7); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-row__mark { width: 44px; height: 44px; border-radius: 8px; }
/* A skin may give a row Ark's icon bullet (a ::before, data-ark-skin-item="icon"). In this grid row it took
   the first cell and pushed the mark and the words one column right (skin audit, 2026-10-25). Each piece
   has its own cell, and the bullet sits on the mark's top corner. */
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link > .dx-row__mark { grid-area: 1 / 1; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link > .dx-row__text { grid-area: 1 / 2; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link > .dx-row__go { grid-area: 1 / 3; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link[data-ark-skin-item]::before { grid-area: 1 / 1; align-self: start; justify-self: start; margin: -4px 0 0 -4px; position: relative; z-index: 1; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link__name { font: 600 var(--fs-secondary)/1.25 var(--dx-font-sans); letter-spacing: -.01em; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link__line { font-size: var(--fs-tertiary); line-height: 1.45; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-row__facts { gap: 12px; margin-top: 4px; font-size: var(--fs-tertiary); letter-spacing: .08em; text-transform: uppercase; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-row__here { font-size: var(--fs-tertiary); letter-spacing: .1em; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-row__tags { gap: 4px 6px; margin-top: 8px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-tag { min-height: 20px; padding: 0 8px; gap: 5px; font: 500 var(--fs-tertiary)/1 var(--dx-font-sans); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-badge { font-size: var(--fs-tertiary); gap: 6px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__back { min-height: 44px; font: 600 var(--fs-secondary)/1.2 var(--dx-font-sans); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__none { font-size: var(--fs-secondary); }
/* preview: a card on a --primary tint (the base); Open alone takes the complement, --secondary, on its own ink */
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__preview { gap: 12px; padding: 20px 22px; margin: 12px; border-radius: 10px; border-color: hsl(var(--primary) / .3); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__eyebrow { font: 600 var(--fs-tertiary)/1.2 var(--dx-font-mono); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--primary)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__tile { width: 56px; height: 56px; border-radius: 10px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__tile svg { width: 34px; height: 34px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__title { gap: 14px; margin: 2px 0; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__name { font-size: var(--fs-primary); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__what { font-size: var(--fs-secondary); line-height: 1.4; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel :is(.dx-preview__line, .dx-preview__caveat, .dx-preview__here) { font-size: var(--fs-tertiary); line-height: 1.5; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-facts { gap: 8px 16px; padding: 12px 0; border-color: hsl(var(--border-subtle)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-facts dt { font: 600 var(--fs-tertiary)/1.4 var(--dx-font-mono); letter-spacing: .12em; color: hsl(var(--text-muted)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-facts dd { font-size: var(--fs-secondary); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-related { gap: 8px; margin-top: 4px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-related__label { font: 600 var(--fs-tertiary)/1.4 var(--dx-font-mono); letter-spacing: .12em; color: hsl(var(--text-muted)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-related__item { gap: 4px; padding: 4px 12px; min-height: 0; border-radius: 0; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-related__item:hover .dx-related__arrow { color: hsl(var(--primary)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel :is(.dx-related__name, .dx-related__arrow) { font-size: var(--fs-tertiary); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-related__line { font-size: var(--fs-tertiary); line-height: 1.4; -webkit-line-clamp: 1; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-cta { min-height: 44px; border-radius: 8px; background: hsl(var(--secondary)); color: hsl(var(--secondary-ink)); font: 600 var(--fs-secondary)/1 var(--dx-font-sans); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-cta:is(:hover, :focus-visible) { background: hsl(var(--secondary) / .86); color: hsl(var(--secondary-ink)); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-cta:active { background: hsl(var(--secondary) / .8); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-cta:focus-visible { outline: 2px solid hsl(var(--secondary)); outline-offset: 2px; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-cta--here { background: hsl(var(--text-strong) / .08); color: hsl(var(--text-muted)); }
/* foot: the keys and the family home, in the mono hairline voice */
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__foot { padding: 8px 14px; min-height: 0; }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__foot :is(.dx-switch__key, .dx-switch__home, .dx-switch__home-name, .dx-switch__cap) { font-size: var(--fs-tertiary); }
:where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__cap { font-family: var(--dx-font-mono); }

/* The family home's footer: one quiet glass bar in the home's bottom band,
   dressed like the bar (canvas glass, a hairline edge, a 12px radius). The
   home's settings control stands inside its left end (defxn css/settings.css
   places it; the 54px left padding is its room); the section links come first
   and scroll sideways rather than wrap. The family name shows from 860.02px. */
.dx-foot[data-dx-mode="home"] {
  width: 100%; max-width: none; height: 44px; margin: 0; box-sizing: border-box; padding: 0 6px 0 54px;
  flex-wrap: nowrap; gap: 0 4px; align-items: center;
  border: 1px solid hsl(var(--border-subtle)); border-radius: 12px;
  background: hsl(var(--canvas) / .72); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 hsl(var(--text-strong) / .05);
  font-family: var(--dx-font-sans, var(--font-sans, sans-serif));
}
.dx-foot[data-dx-mode="home"] > * { flex: 0 0 auto; }
.dx-foot[data-dx-mode="home"] .dx-foot__links { flex: 0 1 auto; height: 100%; margin-right: auto; gap: 8px 12px; }
.dx-foot[data-dx-mode="home"] .dx-foot__links a { min-height: 44px; padding: 0 4px; }
.dx-foot[data-dx-mode="home"] .dx-foot__end { flex-wrap: nowrap; white-space: nowrap; }
/* the family name: the sans, muted, then a hairline before the links */
.dx-foot[data-dx-mode="home"] .dx-foot__name {
  display: none; align-items: center; height: 24px; padding-right: 14px; margin-right: 6px; border-right: 1px solid hsl(var(--border-default));
  font: 600 12px/1 var(--dx-font-sans, var(--font-sans, sans-serif)); letter-spacing: .01em; color: hsl(var(--text-muted)); white-space: nowrap;
}

/* Onward: a page that explains something hands the reader to the product
   that does it (productHandoff / productLink). One plain sentence, the
   product's lane and name, and its own link; the link leaves for the
   product's site, so it carries the leave-the-site arrow.
   Phone: the sentence, then the link and its address on one row (fold
   budget); from 640.02px the words sit left and the link right. */
.dx-onward {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px;
  width: 100%; max-width: 720px; margin: 8px 0; padding: 8px 12px;
  border: 1px solid hsl(var(--border-default)); border-radius: var(--dx-radius); background: hsl(var(--surface));
}
.dx-onward__words { grid-row: auto; grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
.dx-onward__lane { font: 600 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
.dx-onward__text { display: block; max-width: 60ch; font: 400 16px/1.5 var(--dx-font-sans); color: hsl(var(--text)); }
.dx-onward__link { grid-column: 1; justify-self: start; }
.dx-onward__out { font-weight: 400; }
.dx-onward__where { grid-column: 2; justify-self: start; align-self: center; font: 500 16px/1.2 var(--dx-font-mono); color: hsl(var(--text-faint)); }
.dx-onward--local .dx-onward__where { grid-row: auto; grid-column: 1 / -1; max-width: none; text-align: left; }

/* Status pill: network / connection / identity state, state colors only.
   Phone: 132px wide at most, so the bar's one row holds it. A product
   keeps its text short ("16 live", "offline"), so it never truncates. */
.dx-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 132px; flex: 0 0 auto;
  height: var(--dx-strip-h); padding: 0 12px; border-radius: var(--dx-radius);
  border: 1px solid var(--dx-edge); background: hsl(var(--surface));
  font: 500 16px/1.2 var(--dx-font-mono); color: hsl(var(--text-muted));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--text-faint)); flex: 0 0 auto; }
.dx-pill[data-tone="live"]::before { background: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success-100)); }
.dx-pill[data-tone="live"] { color: hsl(var(--success-700)); border-color: hsl(var(--success-300)); }
.dx-pill[data-tone="warn"]::before { background: hsl(var(--warning)); }
.dx-pill[data-tone="warn"] { color: hsl(var(--warning-700)); border-color: hsl(var(--warning-300)); }
.dx-pill[data-tone="danger"]::before { background: hsl(var(--danger)); }
.dx-pill[data-tone="danger"] { color: hsl(var(--danger-700)); border-color: hsl(var(--danger-300)); }
.dx-pill[data-tone="info"]::before { background: hsl(var(--reference)); }
.dx-pill[data-tone="info"] { color: hsl(var(--reference-700)); border-color: hsl(var(--reference-300)); }
.dx-pill > span { overflow: hidden; text-overflow: ellipsis; }

/* Layout ------------------------------------------------------------------ */
.dx-main { width: 100%; max-width: var(--dx-max); margin: 0 auto; padding: 24px var(--dx-gutter) 48px; }
.dx-main--narrow { max-width: 880px; }
.dx-main--wide { max-width: 1480px; }
.dx-hero { display: grid; gap: 16px; margin-bottom: 28px; max-width: 760px; }
.dx-hero--split { max-width: none; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; }
.dx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--text-muted));
}
.dx-eyebrow::before { content: ""; width: 7px; height: 7px; background: hsl(var(--primary)); border-radius: 50%; }
.dx-eyebrow--plain::before { display: none; }
/* Fluid display type (Power Design rule 3; stepped 32/40/56 at 768/1180 until
   2026-10-20): the headline runs 32px at 360 to 48px at 1091, line-height
   1.1; the small headline 24 to 32px. The px inside each clamp sit on the
   scale (24/32/48) so the scale check reads them. */
.dx-title {
  font: 600 clamp(32px, 24px + 2.2vw, 48px)/1.1 var(--dx-font-display);
  letter-spacing: -.045em; color: hsl(var(--text-strong));
  text-wrap: balance; max-width: 16em;
}
/* Two-tone headline (Flux Launch / defxn.com): the second sentence is muted. */
.dx-title .dx-dim, .dx-title span.dx-dim { display: block; color: hsl(var(--text-faint)); }
/* The one identity accent a headline may carry (DEFXN Ember: life, not ink). */
.dx-title em { font-style: normal; color: hsl(var(--primary)); }
.dx-title--sm { font-size: clamp(24px, 20px + 1vw, 32px); line-height: 1.1; letter-spacing: -.035em; }
.dx-lede { font-size: clamp(16px, 16px + .5vw, 20px); line-height: 1.5; color: hsl(var(--text)); max-width: 62ch; text-wrap: pretty; }
.dx-h2 { font: 600 clamp(20px, 16px + .5vw, 24px)/1.2 var(--dx-font-sans); color: hsl(var(--text-strong)); letter-spacing: -.02em; }
.dx-h3 { font: 600 16px/1.2 var(--dx-font-sans); color: hsl(var(--text-strong)); }
.dx-muted { color: hsl(var(--text-muted)); }
.dx-faint { color: hsl(var(--text-faint)); }
.dx-mono { font-family: var(--dx-font-mono); }
/* "Small" is the floor: body size, quieter by colour where the page asks. */
.dx-small { font-size: 16px; line-height: 1.5; }
/* Prose measure (Power Design rule 8): a block of help or small text stops at
   65ch; a span stays inline, so a note beside a value is untouched. */
.dx-small:is(p, div), .dx-help:is(p, div) { display: block; max-width: 65ch; }

/* Grids: one column on a phone (two for --4); more from 640.02 and 980.02. */
.dx-grid { display: grid; gap: 16px; }
.dx-grid--2 { grid-template-columns: minmax(0, 1fr); }
.dx-grid--3 { grid-template-columns: minmax(0, 1fr); }
.dx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-grid--aside { grid-template-columns: minmax(0, 1fr); align-items: start; }
.dx-stack { display: grid; gap: 12px; align-content: start; }
.dx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-row--between { justify-content: space-between; }
.dx-divider { height: 1px; background: hsl(var(--border-subtle)); border: 0; margin: 20px 0; }

/* Surfaces ---------------------------------------------------------------- */
.dx-card {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border-subtle));
  border-radius: var(--dx-radius);
  padding: 16px;
}
.dx-card--raised { background: hsl(var(--raised)); border-color: hsl(var(--border-default)); }
.dx-card--flush { padding: 0; overflow: hidden; }
.dx-card--anchor { background: hsl(var(--anchor)); color: hsl(var(--anchor-ink)); border-color: hsl(var(--border-default)); }
.dx-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dx-card__head > div:not(.dx-tabs):not(.dx-row) { display: grid; gap: 8px; min-width: 0; }
.dx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--border-subtle)); }
.dx-section { display: grid; gap: 16px; margin-top: 28px; }

/* A list that must not grow the page: it scrolls inside its panel. */
.dx-scroll { max-height: var(--dx-scroll-max, 360px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(var(--nested)) transparent; }

/* Stat tiles. (Usable as <dl>/<div> pairs: list margins reset.) */
.dx-stat :is(dt, dd) { margin: 0; }
.dx-stat { display: grid; gap: 8px; padding: 16px; background: hsl(var(--surface)); border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius); min-width: 0; }
.dx-stat__label { font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
.dx-stat__value { font: 500 20px/1.15 var(--dx-font-sans); color: hsl(var(--text-strong)); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dx-stat__value--mono { font: 500 16px/1.5 var(--dx-font-mono); }
.dx-stat__note { font-size: 16px; color: hsl(var(--text-faint)); }

/* Key/value rows, for exact records, keys and CIDs. Phone: one column, the
   value under its key; from 640.02px two columns. */
.dx-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; font-size: 16px; }
.dx-kv dt { font: 500 16px/1.5 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
.dx-kv dd { margin: 0 0 8px; font-family: var(--dx-font-mono); color: hsl(var(--text-strong)); overflow-wrap: anywhere; }
/* A value this page does not know is a dash, never a 0 or a blank. */
.dx-kv dd:empty::before, .dx-kv dd[data-unknown]::before { content: "—"; color: hsl(var(--text-faint)); }

/* Tables. */
.dx-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.dx-table th {
  text-align: left; padding: 12px 16px; position: sticky; top: 0; background: hsl(var(--surface));
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted));
  border-bottom: 1px solid hsl(var(--border-default));
}
.dx-table td { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border-subtle)); color: hsl(var(--text)); vertical-align: top; }
.dx-table td.dx-mono, .dx-table td code { font-size: 16px; }
.dx-table tbody tr:hover td { background: hsl(var(--raised)); }
.dx-table tbody tr[aria-selected="true"] td { background: hsl(var(--reference-100)); }
.dx-table-wrap { width: 100%; overflow-x: auto; }

/* Badges: identity, role or state; never decoration. */
.dx-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px;
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .04em;
  background: hsl(var(--nested)); color: hsl(var(--text)); border: 1px solid hsl(var(--border-subtle));
}
.dx-badge[data-tone="live"] { background: hsl(var(--success-100)); color: hsl(var(--success-700)); border-color: hsl(var(--success-300)); }
.dx-badge[data-tone="warn"] { background: hsl(var(--warning-100)); color: hsl(var(--warning-700)); border-color: hsl(var(--warning-300)); }
.dx-badge[data-tone="danger"] { background: hsl(var(--danger-100)); color: hsl(var(--danger-700)); border-color: hsl(var(--danger-300)); }
.dx-badge[data-tone="info"] { background: hsl(var(--reference-100)); color: hsl(var(--reference-700)); border-color: hsl(var(--reference-300)); }

/* Actions ------------------------------------------------------------------ */
/* Every button is one touch target tall, 44px (Power Design rule 4; 40 and
   32 for --sm until 2026-10-20). A small button is small in WIDTH only. */
.dx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 16px/1.2 var(--dx-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--dx-edge); background: hsl(var(--reference-100)); color: hsl(var(--reference-700));
  transition: background .15s var(--dx-ease), border-color .15s var(--dx-ease), transform .15s var(--dx-ease);
}
.dx-btn:hover { background: hsl(var(--reference-200)); border-color: var(--dx-edge); color: hsl(var(--reference-700)); }
.dx-btn:active { transform: translateY(1px); }
.dx-btn--solid { background: hsl(var(--secondary)); border-color: hsl(var(--secondary)); color: hsl(var(--secondary-ink)); font-weight: 650; }
.dx-btn--solid:hover { background: hsl(var(--secondary-600)); border-color: hsl(var(--secondary-600)); color: hsl(var(--secondary-ink)); }
.dx-btn--soft { background: hsl(var(--secondary-100)); border-color: var(--dx-edge); color: hsl(var(--secondary-700)); }
.dx-btn--soft:hover { background: hsl(var(--secondary-200)); border-color: var(--dx-edge); color: hsl(var(--secondary-700)); }
.dx-btn--ghost { background: transparent; border-color: var(--dx-edge); color: hsl(var(--text)); }
.dx-btn--ghost:hover { background: hsl(var(--nested)); border-color: var(--dx-edge); color: hsl(var(--text-strong)); }
.dx-btn--danger { background: hsl(var(--danger-100)); border-color: hsl(var(--danger-300)); color: hsl(var(--danger-700)); }
.dx-btn--danger:hover { background: hsl(var(--danger-200)); border-color: hsl(var(--danger-400)); color: hsl(var(--danger-700)); }
.dx-btn--sm { min-height: 44px; padding: 0 12px; font-size: 16px; }
.dx-btn--block { width: 100%; }
/* Disabled is a real style, not a fade (Power Design rule 13; opacity .45 left
   the label at 1.07:1 on the solid fill in light): --nested fill, --text-muted
   ink (5.0:1 on --nested in both themes), the control edge. After the variants
   at the same specificity, so a disabled solid button wears it too. */
.dx-btn:disabled, .dx-btn[aria-disabled="true"], .dx-btn:disabled:hover, .dx-btn[aria-disabled="true"]:hover {
  background: hsl(var(--nested)); border-color: var(--dx-edge); color: hsl(var(--text-muted)); cursor: not-allowed; transform: none;
}
.dx-link { color: hsl(var(--dx-link)); text-decoration: underline; text-decoration-color: hsl(var(--reference-300)); text-underline-offset: 4px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.dx-link:hover { color: hsl(var(--reference-700)); text-decoration-color: hsl(var(--reference-400)); }
/* A link that is a target of its own (in a .dx-row of actions, or marked
   .dx-link--target) gets a 44px line box; a link inside prose keeps its line. */
.dx-link--target, .dx-row > .dx-link { display: inline-flex; align-items: center; min-height: 44px; }
/* One pressed state for every non-button control (Power Design rule 13). */
.dx-choice:active, .dx-switch__trigger:active, .dx-theme-toggle:active, .dx-bar__menu-toggle:active, .dx-disclosure > summary:active, .dx-copy:active { background: hsl(var(--nested)); }
.dx-link:active { transform: translateY(1px); }

/* Choice: tabs, segmented pickers, toggles. Neutral at rest, reference when selected. */
.dx-tabs { display: inline-flex; gap: 8px; padding: 4px; background: hsl(var(--surface)); border: 1px solid var(--dx-edge); border-radius: 999px; flex-wrap: wrap; }
.dx-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: transparent; border: 1px solid transparent; color: hsl(var(--text-muted));
  font: 500 16px/1.2 var(--dx-font-sans); cursor: pointer; text-decoration: none;
}
.dx-choice:hover { color: hsl(var(--text-strong)); border-color: hsl(var(--reference-300)); }
.dx-choice:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) {
  background: hsl(var(--reference-100)); border-color: hsl(var(--reference-400)); color: hsl(var(--reference-700));
}

/* Fields ------------------------------------------------------------------- */
.dx-field { display: grid; gap: 8px; }
.dx-label { font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
.dx-help { font-size: 16px; line-height: 1.5; color: hsl(var(--text-faint)); }
.dx-input, .dx-select, .dx-textarea {
  width: 100%; min-height: 44px; padding: 12px; border-radius: var(--dx-radius-sm);
  background: hsl(var(--depth)); border: 1px solid var(--dx-edge); color: hsl(var(--text-strong));
  font: 400 16px/1.5 var(--dx-font-sans);
  transition: border-color .15s var(--dx-ease);
}
.dx-input--mono, .dx-textarea--mono { font-family: var(--dx-font-mono); font-size: 16px; }
.dx-input::placeholder, .dx-textarea::placeholder { color: hsl(var(--text-faint)); }
.dx-input:hover, .dx-select:hover, .dx-textarea:hover { border-color: hsl(var(--text-muted)); }
/* Focus keeps the 2px reference ring (Power Design rule 13; the 1px border and
   3px --reference-100 halo it replaced measured 1.22:1 dark, 1.02:1 light). */
.dx-input:focus-visible, .dx-select:focus-visible, .dx-textarea:focus-visible { outline: 2px solid hsl(var(--reference)); outline-offset: 2px; border-color: hsl(var(--reference-400)); }
.dx-input:disabled, .dx-select:disabled, .dx-textarea:disabled { background: hsl(var(--nested)); border-color: var(--dx-edge); color: hsl(var(--text-muted)); cursor: not-allowed; }
.dx-textarea { min-height: 120px; resize: vertical; }
.dx-file {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--dx-radius-sm);
  background: hsl(var(--depth)); border: 1px dashed var(--dx-edge); color: hsl(var(--text-muted)); font-size: 16px;
}
.dx-file input[type="file"] { font: inherit; color: inherit; max-width: 100%; }
.dx-file input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dx-edge); background: hsl(var(--reference-100)); color: hsl(var(--reference-700));
  font: 600 16px/1.2 var(--dx-font-sans);
}

/* Steps: one active step at a time. */
.dx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: dx-step; }
.dx-step {
  counter-increment: dx-step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; align-items: start;
  padding: 12px; border-radius: var(--dx-radius-sm); color: hsl(var(--text-muted));
}
.dx-step::before {
  content: counter(dx-step); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 600 16px/1.2 var(--dx-font-mono); border: 1px solid hsl(var(--border-default)); color: hsl(var(--text-muted)); background: hsl(var(--depth));
}
.dx-step__title { font-weight: 600; font-size: 16px; color: inherit; }
.dx-step__note { font-size: 16px; color: hsl(var(--text-faint)); }
.dx-step[data-state="current"] { background: hsl(var(--reference-100)); color: hsl(var(--reference-700)); }
.dx-step[data-state="current"]::before { border-color: hsl(var(--reference-400)); color: hsl(var(--reference-700)); background: hsl(var(--canvas)); }
.dx-step[data-state="done"] { color: hsl(var(--text)); }
.dx-step[data-state="done"]::before { content: "✓"; border-color: hsl(var(--success-300)); color: hsl(var(--success-700)); background: hsl(var(--success-100)); }
.dx-step[data-state="blocked"]::before { content: "!"; border-color: hsl(var(--warning-300)); color: hsl(var(--warning-700)); background: hsl(var(--warning-100)); }

/* Notices and refusals ------------------------------------------------------ */
.dx-note {
  display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--dx-radius-sm);
  background: hsl(var(--raised)); border: 1px solid hsl(var(--border-subtle)); border-left: 3px solid hsl(var(--reference-400));
  font-size: 16px; color: hsl(var(--text));
}
.dx-note[data-tone="warn"] { border-left-color: hsl(var(--warning)); }
.dx-note[data-tone="live"] { border-left-color: hsl(var(--success)); }
.dx-note[data-tone="danger"] { border-left-color: hsl(var(--danger)); }
.dx-note strong { color: hsl(var(--text-strong)); }

/* A refusal names the failure, what is missing, and the remedy. */
.dx-refusal {
  display: grid; gap: 8px; padding: 16px; border-radius: var(--dx-radius);
  background: hsl(var(--danger-100) / .55); border: 1px solid hsl(var(--danger-300));
}
.dx-refusal[data-tone="warn"] { background: hsl(var(--warning-100) / .55); border-color: hsl(var(--warning-300)); }
.dx-refusal[data-tone="warn"] .dx-refusal__code { color: hsl(var(--warning-700)); }
/* calm, never shouting: the code is a sentence-case title, the labels are
   quiet sans at the 16px floor (Studio audit B19, 2026-10-21) */
.dx-refusal__code { font: 600 16px/1.3 var(--dx-font-sans); color: hsl(var(--danger-700)); overflow-wrap: anywhere; }
.dx-refusal__code::first-letter { text-transform: uppercase; }
.dx-refusal__failure { color: hsl(var(--text-strong)); font-size: 16px; overflow-wrap: anywhere; }
.dx-refusal dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 16px; }
.dx-refusal dt { font: 500 16px/1.5 var(--dx-font-sans); color: hsl(var(--text-muted)); }
.dx-refusal dd { margin: 0; color: hsl(var(--text)); overflow-wrap: anywhere; }

/* Empty states say what is ready and the next step; they never look broken. */
.dx-empty {
  display: grid; justify-items: start; gap: 8px; padding: 24px; border-radius: var(--dx-radius);
  border: 1px dashed hsl(var(--border-default)); background: hsl(var(--surface) / .5);
}
.dx-empty__title { font: 600 16px/1.2 var(--dx-font-sans); color: hsl(var(--text-strong)); }
.dx-empty__body { font-size: 16px; color: hsl(var(--text-muted)); max-width: 52ch; }

/* Disclosure: reference copy lives behind a named summary. */
.dx-disclosure { border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius); background: hsl(var(--surface)); }
.dx-disclosure > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 12px 16px; font: 600 16px/1.3 var(--dx-font-sans); color: hsl(var(--text-strong));
}
.dx-disclosure > summary::-webkit-details-marker { display: none; }
.dx-disclosure > summary::after { content: "+"; font: 400 20px/1.2 var(--dx-font-mono); color: hsl(var(--text-muted)); }
.dx-disclosure[open] > summary::after { content: "−"; }
.dx-disclosure > summary:hover { color: hsl(var(--reference-700)); }
.dx-disclosure__body { padding: 0 16px 16px; display: grid; gap: 8px; font-size: 16px; color: hsl(var(--text)); }

/* Log / console output. */
.dx-log {
  margin: 0; padding: 12px 16px; border-radius: var(--dx-radius-sm);
  background: hsl(var(--depth)); border: 1px solid hsl(var(--border-subtle));
  font: 400 16px/1.6 var(--dx-font-mono); color: hsl(var(--text)); white-space: pre-wrap; overflow-wrap: anywhere;
}
.dx-log [data-tone="danger"], .dx-log .err { color: hsl(var(--danger)); }
.dx-log [data-tone="live"], .dx-log .ok { color: hsl(var(--success)); }
.dx-log [data-tone="warn"] { color: hsl(var(--warning-700)); }

/* Handoff strip: what this product takes, and where its output goes. -----
   Phone: the three parts stack; from 640.02px they sit in one row. */
.dx-handoff {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch;
  border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius); background: hsl(var(--surface)); overflow: hidden;
}
.dx-handoff__col { display: grid; gap: 8px; align-content: start; padding: 16px; min-width: 0; }
.dx-handoff__self {
  display: grid; place-items: center; gap: 8px; padding: 16px; text-align: center;
  background: hsl(var(--raised)); border: 0; border-top: 1px solid hsl(var(--border-subtle)); border-bottom: 1px solid hsl(var(--border-subtle));
}
.dx-handoff__self strong { font: 600 16px/1.2 var(--dx-font-sans); color: hsl(var(--text-strong)); }
.dx-handoff__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dx-handoff__item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; color: hsl(var(--text)); }
/* The neighbour link is a target: a 44px line box, 8px from the next. */
.dx-handoff__item a { display: inline-flex; align-items: center; min-height: 44px; font: 500 16px/1.2 var(--dx-font-mono); white-space: nowrap; }
.dx-handoff__item .dx-faint { font: 500 16px/1.2 var(--dx-font-mono); }

/* Schematic figures (Flux Launch grammar, Ember color) -------------------
   One grammar for every product's signature drawing. Strokes: 1.5 for the
   subject, 1 for scaffolding. text-strong carries the subject, border tokens
   the scaffolding, and the identity color marks exactly ONE thing per
   figure: what is live now (DEFXN.md: the identity color goes on the single
   record whose state the steps change, and its head marker). Flat fills, no
   gradients, shadows or glow. SVG text sits on the type scale (16px floor:
   a figure drawn for 12px labels re-spaces its layout, not its type). */
.dx-frame {
  position: relative; padding: 16px; border-radius: var(--dx-radius);
  background: hsl(var(--surface)); border: 1px solid hsl(var(--border-subtle));
}
/* corner ticks */
.dx-frame::before, .dx-frame::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: hsl(var(--border-strong)); border-style: solid;
}
.dx-frame::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.dx-frame::after { right: 6px; bottom: 6px; border-width: 0 1px 1px 0; }
.dx-frame__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dx-frame__title { font: 500 16px/1.3 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-strong)); }
.dx-frame__state { font: 500 16px/1.3 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
.dx-frame__note { margin-top: 8px; max-width: 65ch; font: 400 16px/1.5 var(--dx-font-mono); color: hsl(var(--text-muted)); }
.dx-sx { display: block; width: 100%; height: auto; overflow: visible; }
.dx-sx text { font-family: var(--dx-font-sans); fill: hsl(var(--text)); font-size: 16px; }
.dx-sx .sx-label { fill: hsl(var(--text-muted)); font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.dx-sx .sx-strong { fill: hsl(var(--text-strong)); font-weight: 600; }
.dx-sx .sx-frame { fill: hsl(var(--surface)); stroke: hsl(var(--border-subtle)); stroke-width: 1; }
.dx-sx .sx-grid line, .dx-sx .sx-rule { stroke: hsl(var(--border-subtle)); stroke-width: 1; stroke-dasharray: 2 4; }
.dx-sx .sx-axis, .dx-sx .sx-box { fill: none; stroke: hsl(var(--border-strong)); stroke-width: 1; }
.dx-sx .sx-chip { fill: hsl(var(--nested)); stroke: hsl(var(--border-default)); stroke-width: 1; }
.dx-sx .sx-line { fill: none; stroke: hsl(var(--text-strong)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dx-sx .sx-link { fill: none; stroke: hsl(var(--text-muted)); stroke-width: 1.5; }
.dx-sx .sx-dash { fill: none; stroke: hsl(var(--text-muted)); stroke-width: 1; stroke-dasharray: 4 4; }
.dx-sx .sx-fill { fill: hsl(var(--text-strong) / .1); }
.dx-sx .sx-node { fill: hsl(var(--canvas)); stroke: hsl(var(--text-strong)); stroke-width: 1.5; }
.dx-sx .sx-node-done { fill: hsl(var(--text-strong)); stroke: hsl(var(--text-strong)); stroke-width: 1.5; }
.dx-sx .sx-node-todo { fill: hsl(var(--canvas)); stroke: hsl(var(--border-strong)); stroke-width: 1; }
/* the one live thing. sx-now sets the stroke only; a shape with no fill class
   gets no fill (zero-specificity default), never the SVG default black. */
:where(.dx-sx .sx-now) { fill: none; }
.dx-sx .sx-now { stroke: hsl(var(--primary)); }
.dx-sx .sx-now-fill { fill: hsl(var(--primary)); }
.dx-sx .sx-now-text { fill: hsl(var(--primary)); }
/* verified / refused state marks */
.dx-sx .sx-blocked { stroke: hsl(var(--warning)); fill: none; stroke-width: 1.5; }
.dx-sx .sx-blocked-fill { fill: hsl(var(--warning)); }
.dx-sx .sx-blocked-text { fill: hsl(var(--warning-700)); }
.dx-sx .sx-ok { stroke: hsl(var(--success)); fill: none; stroke-width: 1.5; }
.dx-sx .sx-x { stroke: hsl(var(--danger)); fill: none; stroke-width: 1.5; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .dx-sx .sx-enter { transition: opacity .3s var(--dx-ease), transform .3s var(--dx-ease); }
}

/* Stat strip: scoped figures in a row. Unknown is a dash, never a 0.
   Phone: two columns, the lead across both; from 640.02px one row. */
.dx-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end;
  padding: 16px 0; border-top: 1px solid hsl(var(--border-subtle)); border-bottom: 1px solid hsl(var(--border-subtle));
}
.dx-strip__lead { grid-column: 1 / -1; display: grid; gap: 8px; }
.dx-strip__item { display: grid; gap: 8px; min-width: 0; }
.dx-strip__value { font: 600 20px/1.1 var(--dx-font-sans); letter-spacing: -.02em; color: hsl(var(--text-strong)); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dx-strip__value:empty::before, .dx-strip__value[data-unknown]::before { content: "—"; color: hsl(var(--text-faint)); }
.dx-strip__label { font-size: 16px; color: hsl(var(--text-muted)); }

/* Copy button for exact values: a button, so a 44px target (it was a 24px
   chip, the one open exception, until 2026-10-20). */
.dx-copy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: 4px; cursor: pointer;
  font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .04em;
  background: transparent; border: 1px solid var(--dx-edge); color: hsl(var(--text-muted));
}
.dx-copy:hover { color: hsl(var(--reference-700)); border-color: hsl(var(--reference-300)); background: hsl(var(--reference-100)); }
.dx-copy[data-state="done"] { color: hsl(var(--success-700)); border-color: hsl(var(--success-300)); }
.dx-copy[data-state="blocked"] { color: hsl(var(--warning-700)); border-color: hsl(var(--warning-300)); }

/* Footer. */
.dx-foot {
  /* the rule spans the content width, not the gutters */
  width: calc(100% - 2 * var(--dx-gutter)); max-width: calc(var(--dx-max) - 2 * var(--dx-gutter)); margin: 0 auto; padding: 20px 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid hsl(var(--border-subtle));
  font: 500 16px/1.5 var(--dx-font-mono); letter-spacing: .06em; color: hsl(var(--text-faint));
}
/* Every footer link is a 44px target. */
.dx-foot a { display: inline-flex; align-items: center; min-height: 44px; color: hsl(var(--text-muted)); text-decoration: none; }
.dx-foot a:hover { color: hsl(var(--reference-700)); }
.dx-foot__end { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The page's own section links (renderFooter options.links): one row that
   scrolls sideways rather than wrapping or clipping a label. */
.dx-foot__links {
  display: flex; align-items: center; gap: 8px 16px; min-width: 0; flex: 0 1 auto;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.dx-foot__links::-webkit-scrollbar { display: none; }
.dx-foot__links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-transform: uppercase; }
.dx-foot__links a[aria-current="page"] { color: hsl(var(--text-strong)); }

/* Responsive (mobile-first) ------------------------------------------------
   The base rules above are the phone rules. Each block below widens them;
   the fractional minimums (640.02, 980.02, 1040.02) are the old max-width
   breakpoints (640, 980, 1040) stepped over, so every width renders as it
   did before the queries were turned around (2026-10-20). Order matters:
   later blocks win at equal specificity, so each block only states what
   changes at its width. */

/* From 640.02px: tablet and up. The bar is one row at 64px, the brand word,
   the separator, the lane tag and the sub-brand show, the switcher panel
   hangs from its trigger, two-column grids, the key/value table and the
   handoff strip take their desktop shapes. */
@media (min-width: 640.02px) {
  :root { --dx-bar-h: 64px; }
  .dx-bar { height: var(--dx-bar-h); min-height: auto; flex-wrap: nowrap; gap: 12px; padding-top: 0; }
  .dx-bar__brand-word { display: inline; }
  .dx-bar__sep { display: inline; }
  .dx-switch__lane { display: inline; }
  .dx-row__here { display: inline; }
  .dx-switch__trigger { max-width: none; }
  .dx-bar__nav { order: 0; flex: 0 1 auto; margin: 0 0 0 4px; }
  .dx-pill { max-width: 280px; }
  .dx-bar__brand-sub { display: inline; }
  .dx-bar[data-dx-menu="folded"] .dx-bar__menu-toggle { padding: 0 16px; }
  .dx-bar[data-dx-menu="folded"] .dx-bar__menu {
    top: calc(var(--dx-bar-h) + 8px); left: auto; right: var(--dx-gutter);
    width: min(360px, calc(100vw - 2 * var(--dx-gutter)));
  }
  /* The rail and the list side by side under the top, fixed under the bar
     from gutter to gutter (hanging from the trigger, 720px ran past the
     right edge of an 820px tablet), one fixed height so a category change
     never resizes it. The list's heading steps back: the rail names it. */
  .dx-switch__panel {
    position: fixed; top: calc(var(--dx-bar-h) + 8px); left: var(--dx-gutter); right: var(--dx-gutter);
    width: auto;
    height: min(760px, calc(100vh - var(--dx-bar-h) - 24px));
    grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "rail list" "foot foot";
  }
  .dx-switch__panel[data-dx-depth] :is(.dx-switch__rail, .dx-switch__stage) { display: grid; overflow: auto; }
  .dx-switch__rail { padding: 16px 12px; border-right: 1px solid hsl(var(--border-subtle)); }
  .dx-switch__stage { padding: 16px 12px; }
  .dx-switch__panel .dx-switch__back, .dx-switch__panel .dx-lane__head:not(.dx-switch__results-head) { display: none; }
  .dx-foot[data-dx-mode="home"] .dx-foot__links { gap: 8px 16px; }
  .dx-onward { grid-template-columns: minmax(0, 1fr) auto; margin: 16px 0; padding: 12px 16px; gap: 8px 16px; }
  .dx-onward__words { grid-row: 1 / span 2; grid-column: auto; }
  .dx-onward__link { grid-column: 2; justify-self: end; }
  .dx-onward__where { grid-column: 2; justify-self: end; align-self: auto; }
  .dx-onward--local .dx-onward__where { grid-row: 1 / span 2; grid-column: 2; max-width: 24ch; text-align: right; }
  .dx-main { padding-top: 32px; }
  .dx-grid--2, .dx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-card { padding: 20px; }
  .dx-card--flush { padding: 0; }
  .dx-kv { grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; }
  .dx-kv dd { margin-bottom: 0; }
  .dx-handoff { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .dx-handoff__self { border: 0; border-left: 1px solid hsl(var(--border-subtle)); border-right: 1px solid hsl(var(--border-subtle)); }
  .dx-strip { grid-template-columns: minmax(0, 1.4fr) repeat(var(--dx-strip-n, 3), minmax(0, 1fr)); }
  .dx-strip__lead { grid-column: auto; }
}

/* From 860.02px: the family home's footer names itself. */
@media (min-width: 860.02px) {
  .dx-foot[data-dx-mode="home"] .dx-foot__name { display: inline-flex; }
}

/* From 980.02px: the wide grids, the aside, the split hero, and the lanes
   side by side (right rules, no bottom rules). */
@media (min-width: 980.02px) {
  .dx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dx-grid--aside { grid-template-columns: minmax(0, 1fr) 340px; }
  .dx-hero--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* From 981px: the panel is centred on the page, not hung from the
   trigger, and the preview and the keys join the rail and the list. */
@media (min-width: 981px) {
  /* 92% of the window, centred (owner direction 2026-10-22): the rail, the
     list, and the preview, which takes the widest column. */
  .dx-switch__panel {
    position: fixed; top: calc(var(--dx-bar-h) + 8px); right: auto;
    left: 4vw; width: 92vw;
    height: min(760px, calc(100vh - var(--dx-bar-h) - 24px));
    /* the preview card takes 33% of the panel (owner direction 2026-10-22);
       the products take the rest */
    grid-template-columns: 232px minmax(0, 1fr) 33%;
    grid-template-areas: "top top top" "rail list preview" "foot foot foot";
  }
  /* the home's panel: at most 700px tall, the preview at least 320px */
  .dx-bar[data-dx-mode="home"] .dx-switch__panel { height: min(700px, calc(100dvh - var(--dx-bar-h) - 24px)); grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 36%); }
  .dx-switch__preview { display: grid; overflow: auto; }
  .dx-switch__keys { display: flex; }
  .dx-switch__top { padding: 12px 16px; }
  .dx-switch__foot { padding: 4px 20px; }
}

/* A short window (720px tall laptops): the preview tightens so its Open
   stays in view without a scroll: a smaller tile and name, one line for
   each related destination. */
@media (min-width: 981px) and (max-height: 820px) {
  .dx-switch__preview { gap: 8px; padding: 16px 24px; }
  .dx-switch__preview .dx-preview__foot { bottom: -16px; margin: 4px -24px -16px; padding: 8px 24px 16px; }
  .dx-preview__tile { width: 56px; height: 56px; }
  .dx-preview__tile svg { width: 36px; height: 36px; }
  .dx-preview__name { font-size: 24px; }
  .dx-preview__what { font-size: 16px; }
  .dx-related__line { -webkit-line-clamp: 1; }
  .dx-product-link { min-height: 72px; padding: 8px 12px 8px 8px; }
  .dx-switch__preview { margin: 8px; }
  /* the home's preview tightens the same way, on its own steps */
  :where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__preview { gap: 8px; padding: 16px 20px; margin: 10px; }
  :where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-switch__preview .dx-preview__foot { bottom: -16px; margin: 4px -20px -16px; padding: 8px 20px 16px; }
  :where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__tile { width: 48px; height: 48px; }
  :where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-preview__name { font-size: var(--fs-secondary); }
  :where(.dx-bar[data-dx-mode="home"]) .dx-switch__panel .dx-product-link { padding: 10px 14px 10px 10px; }
}

/* From 1040.02px: the family home's nav is in its bar, not its menu. */
@media (min-width: 1040.02px) { .dx-bar[data-dx-mode="home"] .dx-bar__nav { display: grid; } }
/* ...and the Products trigger is the first segment of one control with it.
   The nav clips its own corners, so whichever links the row fit leaves
   showing get the rounded ends (the kit rounds :first-child/:last-child,
   which is wrong once the home moves a link out). The -7px pulls the nav
   over the 6px bar gap so the two edges overlap into one hairline. A hairline
   then sets the pages apart from the visitor's own controls. */
@media (min-width: 1040.02px) {
  .dx-bar[data-dx-mode="home"]:has(.dx-bar__nav > a) .dx-switch__trigger { border-radius: var(--dx-radius, 8px) 0 0 var(--dx-radius, 8px); }
  .dx-bar[data-dx-mode="home"]:has(.dx-bar__nav > a) .dx-bar__nav { margin-left: -7px; border-radius: 0 var(--dx-radius, 8px) var(--dx-radius, 8px) 0; overflow: hidden; }
  .dx-bar[data-dx-mode="home"] .dx-bar__nav > a { border-radius: 0; }
  .dx-bar[data-dx-mode="home"] .dx-bar__end { position: relative; padding-left: 13px; }
  .dx-bar[data-dx-mode="home"] .dx-bar__end::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: hsl(var(--border-default)); }
}


@media (prefers-reduced-motion: reduce) {
  .dx-page *, .dx-page *::before, .dx-page *::after { transition: none !important; animation: none !important; }
  .dx-switch__panel, .dx-switch__panel *, .dx-switch__scrim { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Shared signing dialogs. The DEFXN signing pages vendor the same dialog
   markup (<flux-authorization-dialog>, the Auth Kit widget, #identityDialog);
   the kit paints it once so the full Scoped Claim Authorization review looks
   the same everywhere. Every rule targets that shared markup only.
   Type floor 16px, gaps 8px or more, 44px targets, mobile-first (the phone
   rules are the base; one min-width query at 720.02px), as product.css.
   ========================================================================== */
/* Sign-in dialog and scoped-authorization dialog ------------------------------
   The "admin-auth-*" classes are the shared <flux-authorization-dialog>
   markup (js/ark/authorization-dialog.js, index.html's #identityDialog). The
   review keeps every row it renders: requester, network, authority, scope,
   action, expiry, the manifest digest, the claim stack and the exact bytes.
   Only the paint changes here. One copy for every DEFXN signing page (Deploy,
   Treasury, Genesis, DAO, Radio): lifted from the identical page-local copies
   in flux/deploy and flux/treasury on 2026-10-18.
   Phone: the review is the whole screen, one field per row, so 64-character
   keys get the full width. */
flux-authorization-dialog { position: fixed; inset: 0; z-index: 60; font: 400 16px/1.5 var(--dx-font-sans); color: hsl(var(--text)); }
.admin-auth-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 0; background: hsl(var(--canvas) / .9); }
.admin-auth-panel { width: 100%; height: 100vh; max-height: none; overflow: auto; padding: 16px; border: 0; border-radius: 0; background: hsl(var(--overlay)); color: hsl(var(--text)); }
.admin-auth-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.admin-auth-title h2 { margin: 8px 0 0; color: hsl(var(--text-strong)); font: 600 24px/1.2 var(--dx-font-sans); letter-spacing: -.01em; }
.admin-auth-title .kicker, flux-authorization-dialog .kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
.admin-auth-close { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--dx-edge); border-radius: 50%; background: transparent; color: hsl(var(--text-muted)); font: 400 20px/1.2 var(--dx-font-sans); cursor: pointer; }
.admin-auth-close:hover { color: hsl(var(--text-strong)); border-color: hsl(var(--reference-300)); }
.admin-auth-description { max-width: 62ch; margin: 12px 0 0; color: hsl(var(--text-muted)); line-height: 1.55; font-size: 16px; overflow-wrap: anywhere; }
/* The 1px gap is the hairline between review cells (the border colour shows
   through), not a space between elements. One column on a phone. */
.admin-auth-context { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 20px 0; overflow: hidden; border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius-sm); background: hsl(var(--border-subtle)); }
.admin-auth-context > div { min-width: 0; padding: 12px; background: hsl(var(--surface)); }
.admin-auth-context > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.admin-auth-context dt, .admin-auth-digest small { display: block; margin-bottom: 4px; color: hsl(var(--text-muted)); font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.admin-auth-context dd { margin: 0; overflow-wrap: anywhere; color: hsl(var(--text-strong)); font: 500 16px/1.5 var(--dx-font-mono); }
.admin-auth-digest { padding: 16px; border: 1px solid hsl(var(--border-subtle)); border-left: 3px solid hsl(var(--reference-400)); border-radius: var(--dx-radius-sm); background: hsl(var(--raised)); }
.admin-auth-digest code { display: block; overflow-wrap: anywhere; color: hsl(var(--text-strong)); font: 16px/1.5 var(--dx-font-mono); }
.admin-auth-panel details { margin-top: 12px; border: 1px solid hsl(var(--border-subtle)); border-radius: var(--dx-radius-sm); background: hsl(var(--surface)); }
.admin-auth-panel summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 12px; color: hsl(var(--text-strong)); font: 600 16px/1.3 var(--dx-font-sans); }
.admin-auth-panel summary:hover { color: hsl(var(--reference-700)); }
.admin-auth-panel summary:active { background: hsl(var(--nested)); }
.admin-auth-panel pre { max-height: 220px; overflow: auto; margin: 0; padding: 0 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: hsl(var(--text)); font: 16px/1.5 var(--dx-font-mono); }
.admin-auth-safety { margin-top: 16px; max-width: 65ch; color: hsl(var(--text-faint)); font-size: 16px; line-height: 1.5; }
.admin-auth-panel > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* Buttons the shared dialog and Auth Kit widget render with their own class
   names: "action" is the one main action of that view (approve and sign,
   unlock), "action secondary" a quiet one (cancel). 44px targets. */
flux-authorization-dialog button:not(.admin-auth-close):not(.link-button),
flux-authorization-dialog input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 600 16px/1.2 var(--dx-font-sans); white-space: nowrap;
  border: 1px solid hsl(var(--reference-300)); background: hsl(var(--reference-100)); color: hsl(var(--reference-700));
}
flux-authorization-dialog button:not(.admin-auth-close):not(.link-button):hover { background: hsl(var(--reference-200)); border-color: hsl(var(--reference-400)); }
flux-authorization-dialog button.action:not(.secondary) { background: hsl(var(--secondary)); border-color: hsl(var(--secondary)); color: hsl(var(--secondary-ink)); }
flux-authorization-dialog button.action:not(.secondary):hover { background: hsl(var(--secondary-600)); border-color: hsl(var(--secondary-600)); }
flux-authorization-dialog button.action.secondary { background: transparent; border-color: var(--dx-edge); color: hsl(var(--text)); }
/* Disabled is a real style (product.css .dx-btn:disabled, same tokens), and
   it outranks the .action paint: (0,1,2) after (0,1,2)/(0,2,1) by order. */
flux-authorization-dialog button:disabled, flux-authorization-dialog button.action:disabled, flux-authorization-dialog button.action:disabled:hover {
  background: hsl(var(--nested)); border-color: var(--dx-edge); color: hsl(var(--text-muted)); cursor: not-allowed;
}
/* In the sign-in dialog the defxn.com broker is one of two equal paths, so
   it is a quiet action; the widget's own unlock is the main one. */
#identityDialog .identity-broker-option.action { width: 100%; margin-top: 16px; border: 1px solid hsl(var(--reference-300)); background: hsl(var(--reference-100)); color: hsl(var(--reference-700)); }
#identityDialog .identity-broker-option.action:hover { background: hsl(var(--reference-200)); border-color: hsl(var(--reference-400)); }
flux-authorization-dialog input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
flux-authorization-dialog select, flux-authorization-dialog textarea {
  width: 100%; min-height: 44px; padding: 12px; border-radius: var(--dx-radius-sm);
  background: hsl(var(--depth)); border: 1px solid var(--dx-edge); color: hsl(var(--text-strong));
  font: 400 16px/1.5 var(--dx-font-sans);
}
flux-authorization-dialog input[type="file"] { padding: 8px; border-style: dashed; color: hsl(var(--text-muted)); }
/* The 2px reference ring, as on every kit field (product.css): the border +
   halo it replaced measured 1.22:1 dark, 1.02:1 light. */
flux-authorization-dialog input:focus-visible, flux-authorization-dialog select:focus-visible, flux-authorization-dialog textarea:focus-visible { outline: 2px solid hsl(var(--reference)); outline-offset: 2px; border-color: hsl(var(--reference-400)); }
flux-authorization-dialog input:disabled, flux-authorization-dialog select:disabled, flux-authorization-dialog textarea:disabled { background: hsl(var(--nested)); border-color: var(--dx-edge); color: hsl(var(--text-muted)); cursor: not-allowed; }
flux-authorization-dialog label { display: grid; gap: 8px; font: 500 16px/1.5 var(--dx-font-sans); color: hsl(var(--text-muted)); }
flux-authorization-dialog form { display: grid; gap: 12px; margin: 0; }

/* The Auth Kit widget (js/admin/auth.js, reused verbatim -- same one
   defxn.com's CMS gate uses) dumps its own full identity state once signed
   in: a heading, a paragraph, and a dl of Identity/Auth Kit/Identity id/
   Wallet/Security. That duplicates #identityStatus and is tall enough to
   push the page's content below the fold. defxn.com's own css/account.css
   hides the identical dump at `[data-stage="ready"]` the same way. */
#identityContainer { margin-top: 4px; }
#identityContainer .ark-auth-panel[data-stage="ready"] [data-ark-auth="body"] > :is(h2, p, dl) { display: none; }
/* The widget's own heading duplicates the dialog's title at every stage. */
#identityContainer [data-ark-auth="heading"] { display: none; }
#identityContainer .ark-auth-body, #identityContainer .ark-auth-form { display: grid; gap: 12px; }
#identityContainer .ark-auth-hint, #identityContainer .ark-auth-notice { margin: 0; max-width: 65ch; font-size: 16px; color: hsl(var(--text-faint)); }
#identityContainer .ark-auth-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 16px; }
#identityContainer .ark-auth-rows dt { font: 500 16px/1.5 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text-muted)); }
#identityContainer .ark-auth-rows dd { margin: 0; font-family: var(--dx-font-mono); overflow-wrap: anywhere; }
#identityContainer .ark-auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#identityContainer .ark-auth-mono { font-family: var(--dx-font-mono); }
#identityDialog .admin-auth-panel { width: min(480px, 100%); }
.identity-broker-note { margin: 8px 0 0; max-width: 65ch; font-size: 16px; color: hsl(var(--text-faint)); }
.identity-modal-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: hsl(var(--text-faint)); font: 500 16px/1.2 var(--dx-font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.identity-modal-divider::before, .identity-modal-divider::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border-subtle)); }
.identity-create-toggle { margin-top: 16px; font-size: 16px; color: hsl(var(--text-faint)); }
/* A link-shaped button inside a sentence keeps its line: prose links are
   sized by the page that sets the sentence, not by the kit. */
.link-button { background: none; border: none; padding: 0; color: hsl(var(--dx-link)); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: hsl(var(--reference-300)); text-underline-offset: 3px; }
.link-button:hover { color: hsl(var(--reference-700)); }
.link-button:active { transform: translateY(1px); }
#identityCreatePanel { margin-top: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--border-subtle)); display: grid; gap: 12px; }
#identityCreatePanel .lead { margin: 0; font-size: 16px; color: hsl(var(--text)); }

/* Before the element upgrades and opens, keep it out of the layout (the
   element itself toggles [open] and [hidden]). */
flux-authorization-dialog:not([open]) { display: none; }
.admin-auth-title .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--primary)); }
/* A review row can hold a whole manifest: keep its line breaks and scroll it
   inside its cell instead of stretching the dialog. */
.admin-auth-context dd { white-space: pre-wrap; max-height: 160px; overflow: auto; }
#identityDialog .admin-auth-panel > header { margin-bottom: 16px; }
/* The recovery-word grid in the create-identity panel (auth-kit-create-panel.js):
   two columns on a phone, three from 720.02px. */
.auth-word-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 12px; border: 1px solid hsl(var(--border-default)); border-radius: var(--dx-radius-sm); background: hsl(var(--depth)); }
.auth-word-grid li { display: flex; align-items: baseline; gap: 8px; font: 16px/1.5 var(--dx-font-mono); }
.auth-word-grid li small { color: hsl(var(--text-faint)); min-width: 1.4em; }
.auth-word-grid li strong { color: hsl(var(--text-strong)); }
/* From 720.02px: the review is a centred panel over the page, two fields per
   row, three recovery words per row. */
@media (min-width: 720.02px) {
  .admin-auth-backdrop { padding: 24px; }
  .admin-auth-panel { width: min(720px, 100%); height: auto; max-height: calc(100vh - 48px); padding: 24px; border: 1px solid hsl(var(--border-default)); border-radius: var(--dx-radius); }
  .admin-auth-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-word-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}