@view-transition {
  navigation: auto;
}

@property --matrix-intensity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --signal-phase {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@layer reset, tokens, base, layout, components, utilities, states, enhancements, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { margin: 0; min-inline-size: 20rem; overflow-x: clip; }
  body, h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  button, input { font: inherit; }
  button { color: inherit; }
  img, svg, canvas { display: block; max-inline-size: 100%; }
  [hidden] { display: none; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --color-bg: oklch(7% 0.018 155);
    --color-bg-deep: oklch(4.5% 0.014 155);
    --color-surface: oklch(10.5% 0.022 155);
    --color-surface-raised: oklch(13.5% 0.028 155);
    --color-text: oklch(95% 0.012 155);
    --color-text-soft: oklch(82% 0.025 155);
    --color-text-muted: oklch(63% 0.028 155);
    --color-accent: oklch(85% 0.19 145);
    --color-accent-strong: oklch(91% 0.21 145);
    --color-accent-muted: color-mix(in oklch, var(--color-accent) 34%, transparent);
    --color-border: color-mix(in oklch, var(--color-accent) 25%, transparent);
    --color-border-soft: color-mix(in oklch, var(--color-accent) 12%, transparent);
    --font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --duration-fast: 120ms;
    --duration-normal: 240ms;
    --duration-route: 340ms;
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --header-height: 4.5rem;
    --page-pad: clamp(1.25rem, 4vw, 4.75rem);
    --content-max: 90rem;
    --matrix-intensity: 0;
  }

  @media (color-gamut: p3) {
    :root { --color-accent: color(display-p3 .42 1 .58); }
  }
}

@layer base {
  html {
    background: var(--color-bg-deep);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top));
    scrollbar-color: var(--color-accent-muted) var(--color-bg);
  }

  body {
    min-block-size: 100svh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 76% 23%, color-mix(in oklch, var(--color-accent) 4%, transparent), transparent 30rem),
      linear-gradient(135deg, var(--color-bg-deep), var(--color-bg));
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  @supports (min-height: 100dvh) {
    body { min-block-size: 100dvh; }
  }

  a { color: inherit; text-decoration: none; }
  button { border: 0; background: none; cursor: pointer; }
  h1, h2, h3 { line-height: .94; letter-spacing: -.055em; overflow-wrap: anywhere; text-wrap: balance; }
  p { text-wrap: pretty; }
  ::selection { background: var(--color-accent); color: var(--color-bg-deep); }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: .3rem; }
  #main { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
}

@layer layout {
  :root { view-transition-name: none; }
  .matrix-layer { view-transition-name: none; }
  .page-shell { position: relative; z-index: 3; min-block-size: 100svh; view-transition-name: page-shell; }
  .site-brand { view-transition-name: site-brand; }
  .primary-navigation { view-transition-name: primary-navigation; }
  .route-title { view-transition-name: route-title; }
  .route-kicker { view-transition-name: route-kicker; }
  .contact-primary { view-transition-name: contact-primary; }

  .route-main, .site-footer {
    inline-size: min(100%, calc(var(--content-max) + 2 * var(--page-pad)));
    margin-inline: auto;
    padding-inline: max(var(--page-pad), env(safe-area-inset-left)) max(var(--page-pad), env(safe-area-inset-right));
  }

  .route-main { min-block-size: calc(100svh - var(--header-height)); }
  @supports (min-height: 100dvh) { .route-main { min-block-size: calc(100dvh - var(--header-height)); } }

  .site-header {
    position: sticky;
    z-index: 30;
    inset-block-start: 0;
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
    align-items: center;
    min-block-size: calc(var(--header-height) + env(safe-area-inset-top));
    padding-block-start: env(safe-area-inset-top);
    padding-inline: max(var(--page-pad), env(safe-area-inset-left)) max(var(--page-pad), env(safe-area-inset-right));
    border-block-end: 1px solid var(--color-border-soft);
    background: color-mix(in oklch, var(--color-bg-deep) 90%, transparent);
    backdrop-filter: blur(18px);
  }

  .site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    align-items: center;
    min-block-size: 7rem;
    padding-block: var(--space-8) max(var(--space-8), env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font: 500 .66rem/1.4 var(--font-mono);
    letter-spacing: .14em;
  }

  .site-footer > :last-child { justify-self: end; }

  .home-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    gap: clamp(1rem, 2vw, 2rem);
    min-block-size: calc(100svh - var(--header-height));
    padding-block: clamp(4rem, 9vh, 7rem) var(--space-12);
  }

  @supports (min-height: 100dvh) { .home-hero { min-block-size: calc(100dvh - var(--header-height)); } }

  .hero-kicker { grid-column: 1 / 9; display: flex; justify-content: space-between; align-items: center; }
  .hero-title-wrap { grid-column: 1 / 9; }
  .system-status { grid-column: 10 / -1; grid-row: 2 / 4; align-self: center; }
  .hero-positioning { grid-column: 1 / 8; }
  .terminal-container { grid-column: 1 / 8; align-self: end; container: terminal / inline-size; }
  .live-signal { grid-column: 9 / -1; align-self: end; container: signal / inline-size; }

  .home-statement, .route-previews, .identity-story, .system-layers, .architecture-flow, .work-principles,
  .capability-section, .capability-cta, .contact-primary, .not-found-actions {
    padding-block: clamp(6rem, 13vw, 11rem);
    border-block-start: 1px solid var(--color-border-soft);
  }

  .route-lead {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: center;
    min-block-size: min(48rem, calc(100svh - var(--header-height)));
    padding-block: clamp(5rem, 11vw, 9rem);
  }

  .route-kicker { grid-column: 1 / -1; align-self: end; }
  .route-lead h1 { grid-column: 1 / 10; }
  .route-deck { grid-column: 8 / -1; margin-block-start: var(--space-12); }
  .story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 9vw, 10rem); }
  .principle-index { display: grid; grid-template-columns: repeat(3, 1fr); margin-block-start: var(--space-24); }
  .layers-layout { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 9rem); }
  .architecture-flow ol { display: grid; grid-template-columns: repeat(4, 1fr); }
  .principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .section-actions { display: flex; gap: var(--space-4); margin-block-start: var(--space-12); }
  .capability-layout { display: grid; grid-template-columns: minmax(26rem, .95fr) minmax(30rem, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; }
}

@layer components {
  .matrix-layer, .system-grid, .digital-texture {
    position: fixed;
    z-index: 0;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
  }

  .matrix-layer { opacity: 0; transition: opacity 240ms ease-out; }
  html[data-matrix="on"] .matrix-layer { opacity: .94; }
  .system-grid {
    z-index: 1;
    background-image: linear-gradient(color-mix(in oklch, var(--color-accent) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--color-accent) 3%, transparent) 1px, transparent 1px);
    background-size: 4rem 4rem;
    opacity: .38;
    mask-image: linear-gradient(#000, transparent 94%);
  }
  .digital-texture { z-index: 2; opacity: .1; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(0 0 0 / .72) 4px); }

  .skip-link {
    position: fixed;
    z-index: 100;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding: .75rem 1rem;
    background: var(--color-accent);
    color: var(--color-bg-deep);
    font: 700 .75rem var(--font-mono);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }

  .site-brand { display: inline-flex; align-items: center; gap: .75rem; inline-size: fit-content; font: 500 .75rem var(--font-mono); letter-spacing: .14em; }
  .brand-mark { display: grid; place-items: center; inline-size: 2.25rem; aspect-ratio: 1; border: 1px solid var(--color-border); color: var(--color-accent); }

  .primary-navigation { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); }
  .primary-navigation a { position: relative; min-block-size: 2.75rem; display: inline-flex; align-items: center; gap: .45rem; color: var(--color-text-muted); font: 500 .65rem var(--font-mono); letter-spacing: .17em; }
  .primary-navigation a::after { position: absolute; inset: auto 0 0; block-size: 1px; content: ""; background: var(--color-accent); transform: scaleX(0); transition: transform var(--duration-normal) var(--ease-out); }
  .primary-navigation a:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--color-text); }
  .primary-navigation a:is(:hover, [aria-current="page"])::after { transform: scaleX(1); }
  .primary-navigation span { display: none; }

  .header-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-4); }
  .header-signal { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-accent); font: 500 .62rem var(--font-mono); letter-spacing: .13em; white-space: nowrap; }
  .header-signal i, .status-dot { inline-size: .38rem; block-size: .38rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 .75rem var(--color-accent); }

  .matrix-toggle {
    min-block-size: 2.75rem;
    padding-inline: .8rem;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font: 500 .61rem var(--font-mono);
    letter-spacing: .12em;
  }
  .matrix-toggle[aria-pressed="true"] { border-color: var(--color-border); color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 5%, transparent); }

  .route-progress { position: fixed; z-index: 31; inset-block-start: calc(var(--header-height) + env(safe-area-inset-top) - 1px); inset-inline-start: 0; inline-size: 100%; block-size: 1px; transform: scaleX(0); transform-origin: left; background: var(--color-accent); }

  .hero-kicker, .section-intro, .route-kicker {
    color: var(--color-accent);
    font: 500 .68rem/1.4 var(--font-mono);
    letter-spacing: .18em;
  }
  .hero-kicker, .section-intro { padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border); }
  .section-intro { display: flex; justify-content: space-between; margin-block-end: clamp(3rem, 7vw, 6rem); }

  .hero-title { font-size: clamp(5rem, 10.5vw, 10rem); font-weight: 400; }
  .hero-title > span { display: block; }
  .hero-title > span:last-child { margin-inline-start: clamp(1rem, 6vw, 7rem); color: var(--color-accent-strong); }
  .hero-title i, .route-title > span, h2 > span { color: var(--color-accent); font-style: normal; }
  .hero-edition { display: flex; align-items: center; gap: var(--space-6); margin: var(--space-8) 0 0 clamp(1rem, 7vw, 7rem); color: var(--color-text-muted); font: 500 .66rem var(--font-mono); letter-spacing: .25em; }
  .hero-edition::after { content: ""; inline-size: clamp(4rem, 12vw, 12rem); block-size: 1px; background: var(--color-border); }

  .system-status { border-block-start: 1px solid var(--color-border); font: 500 .68rem var(--font-mono); }
  .system-status > div, .system-status dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .85rem; border-block-end: 1px solid var(--color-border-soft); }
  .system-status > div { color: var(--color-accent); letter-spacing: .13em; }
  .system-status dt { color: var(--color-text-muted); letter-spacing: .1em; }
  .system-status dd { color: var(--color-accent-strong); }

  .hero-positioning { color: var(--color-text-soft); font: 500 .77rem/1.8 var(--font-mono); letter-spacing: .13em; }
  .hero-positioning > :first-child { margin-block-end: .5rem; color: var(--color-accent); }
  .hero-positioning i { display: inline-block; inline-size: .25rem; aspect-ratio: 1; margin-inline: .65rem; border-radius: 50%; background: var(--color-accent); vertical-align: middle; }

  .terminal { border: 1px solid var(--color-border); background: color-mix(in oklch, var(--color-bg-deep) 94%, transparent); box-shadow: 0 1.5rem 5rem rgb(0 0 0 / .25); }
  .terminal-toolbar, .terminal-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 2.75rem; padding-inline: 1rem; border-block-end: 1px solid var(--color-border-soft); color: var(--color-accent); font: 500 .62rem var(--font-mono); letter-spacing: .12em; }
  .terminal-toolbar > div, .terminal-tools { display: flex; align-items: center; gap: .7rem; }
  .terminal-tools button:not(.matrix-toggle) { min-block-size: 2.75rem; color: var(--color-text-muted); font: inherit; }
  .terminal-output { min-block-size: 8.8rem; max-block-size: 12rem; overflow: auto; padding: 1rem; color: var(--color-text-soft); font: 400 .78rem/1.75 var(--font-mono); }
  .terminal-output span, .terminal-response { color: var(--color-accent-strong); }
  .terminal-command { color: var(--color-text); }
  .terminal-muted { color: var(--color-text-muted); }
  .terminal-error { color: oklch(75% .18 28); }
  .terminal-form { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; min-block-size: 3.2rem; margin-inline: 1rem; border-block-start: 1px solid var(--color-border-soft); color: var(--color-text); font: 400 .8rem var(--font-mono); }
  .terminal-form input { inline-size: 100%; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--color-text); caret-color: transparent; }
  .terminal-cursor { color: var(--color-accent-strong); animation: cursor-blink 1s steps(2, jump-none) infinite; }
  .terminal-footer { min-block-size: 2.25rem; border-block: 1px solid var(--color-border-soft) 0; color: var(--color-text-muted); font-size: .56rem; }

  .terminal-shortcuts {
    inline-size: min(24rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-soft);
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity 160ms ease, transform 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete;
  }
  .terminal-shortcuts:popover-open { opacity: 1; transform: none; }
  .terminal-shortcuts strong { color: var(--color-accent); font: 600 .7rem var(--font-mono); letter-spacing: .14em; }
  .terminal-shortcuts dl { margin-block-start: 1rem; font: .72rem/1.7 var(--font-mono); }
  .terminal-shortcuts dl div { display: grid; grid-template-columns: 4rem 1fr; border-block-start: 1px solid var(--color-border-soft); padding-block: .45rem; }

  .live-signal { border-block: 1px solid var(--color-border); color: var(--color-text-muted); font: 500 .58rem var(--font-mono); letter-spacing: .12em; }
  .live-signal header, .live-signal footer { display: flex; justify-content: space-between; padding-block: .7rem; }
  .live-signal header { color: var(--color-accent); border-block-end: 1px solid var(--color-border-soft); }
  .live-signal > div { position: relative; display: grid; place-items: center; min-block-size: 10rem; }
  .live-signal > div::before, .live-signal > div::after { position: absolute; inline-size: 7rem; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: 50%; content: ""; }
  .live-signal > div::after { inline-size: 4rem; }
  .live-signal > div span { z-index: 1; color: var(--color-accent-strong); }

  .route-title { margin-block: var(--space-6); font-size: clamp(4.5rem, 10vw, 10rem); font-weight: 400; }
  .route-title > span { display: block; margin-inline-start: clamp(1rem, 7vw, 8rem); }
  .route-deck { max-inline-size: 38rem; color: var(--color-text-soft); font-size: clamp(1rem, 1.5vw, 1.25rem); }

  .home-statement h2, .story-grid h2, .work-principles > h2 { font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 400; }
  .home-statement > p { max-inline-size: 43rem; margin: var(--space-12) 0 0 auto; color: var(--color-text-soft); font-size: clamp(1rem, 1.7vw, 1.3rem); }
  .route-previews > h2 { margin-block-end: var(--space-12); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 400; }
  .preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block-start: 1px solid var(--color-border); }
  .preview-grid article { min-block-size: 21rem; padding: var(--space-8); border-inline-end: 1px solid var(--color-border-soft); }
  .preview-grid article > span { color: var(--color-accent); font: .66rem var(--font-mono); }
  .preview-grid h3 { margin-block: var(--space-12) var(--space-4); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; }
  .preview-grid p { min-block-size: 7rem; color: var(--color-text-muted); }

  .action-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 2rem; min-block-size: 3.2rem; min-inline-size: 12rem; padding-inline: 1rem; border: 1px solid var(--color-border); color: var(--color-accent-strong); font: 500 .64rem var(--font-mono); letter-spacing: .12em; transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
  .action-link:is(:hover, :focus-visible) { background: var(--color-accent); color: var(--color-bg-deep); transform: translateY(-2px); }

  .story-grid h2 { font-size: clamp(2.8rem, 5.6vw, 5.5rem); }
  .story-grid > div { align-self: end; color: var(--color-text-soft); font-size: clamp(1rem, 1.3vw, 1.18rem); }
  .story-grid > div p + p { margin-block-start: var(--space-6); }
  .signal-copy { color: var(--color-accent); font: 500 .7rem var(--font-mono); letter-spacing: .15em; }
  .principle-index article, .principles-grid article { padding: var(--space-8); border-block-start: 1px solid var(--color-border); border-inline-end: 1px solid var(--color-border-soft); }
  .principle-index span, .principles-grid span { color: var(--color-accent); font: .65rem var(--font-mono); }
  .principle-index h3, .principles-grid h3 { margin-block: var(--space-8) var(--space-3); font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 400; letter-spacing: -.025em; }
  .principle-index p, .principles-grid p { color: var(--color-text-muted); }

  .layers-layout header h2 { font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 400; }
  .layers-layout header p { max-inline-size: 24rem; margin-block-start: var(--space-6); color: var(--color-text-muted); }
  .layers-stack { border-block-start: 1px solid var(--color-border); }
  .layers-stack details { border-block-end: 1px solid var(--color-border-soft); }
  .layers-stack summary { display: grid; grid-template-columns: 3rem 1fr; align-items: center; min-block-size: 4.5rem; cursor: pointer; color: var(--color-text-soft); font: 500 .78rem var(--font-mono); letter-spacing: .09em; }
  .layers-stack summary::marker { content: ""; }
  .layers-stack summary span { color: var(--color-accent); }
  .layers-stack details p { padding: 0 0 var(--space-6) 3rem; color: var(--color-text-muted); font: .7rem/1.7 var(--font-mono); letter-spacing: .07em; }
  .layers-stack details[open] summary { color: var(--color-accent-strong); }

  .architecture-flow ol { border-block: 1px solid var(--color-border); }
  .architecture-flow li { position: relative; padding: var(--space-12) var(--space-4); border-inline-end: 1px solid var(--color-border-soft); color: var(--color-accent-strong); text-align: center; font: 500 .7rem var(--font-mono); letter-spacing: .12em; }
  .architecture-flow li:not(:last-child)::after { position: absolute; inset-inline-end: -.35rem; content: "→"; color: var(--color-accent); }
  .architecture-flow > p { max-inline-size: 45rem; margin: var(--space-8) auto 0; color: var(--color-text-soft); text-align: center; }
  .work-principles > h2 { margin-block-end: var(--space-12); }

  .capability-list { container: capabilities / inline-size; border-block-start: 1px solid var(--color-border); }
  .capability-list details { border-block-end: 1px solid var(--color-border-soft); }
  .capability-list summary { display: grid; grid-template-columns: 3rem minmax(12rem, .8fr) minmax(12rem, 1.2fr) 1.5rem; gap: 1rem; align-items: center; min-block-size: 5.4rem; cursor: pointer; }
  .capability-list summary::marker { content: ""; }
  .capability-list summary > span { color: var(--color-accent); font: .68rem var(--font-mono); }
  .capability-list summary strong { color: var(--color-text-soft); font: 500 clamp(.78rem, 1.1vw, .94rem)/1.35 var(--font-mono); letter-spacing: .04em; }
  .capability-list summary small { color: var(--color-text-muted); font-size: .78rem; }
  .capability-list summary i { color: var(--color-accent); font-style: normal; transition: transform var(--duration-normal) var(--ease-out); }
  .capability-list details[open] summary strong { color: var(--color-accent-strong); }
  .capability-list details[open] summary i { transform: rotate(90deg); }
  .capability-details { padding: 0 0 var(--space-8) 3rem; }
  .capability-details dl { display: grid; grid-template-columns: repeat(2, 1fr); border-block-start: 1px solid var(--color-border-soft); }
  .capability-details dl div { padding: var(--space-4); border-inline-end: 1px solid var(--color-border-soft); border-block-end: 1px solid var(--color-border-soft); }
  .capability-details dt { margin-block-end: .6rem; color: var(--color-accent); font: 500 .58rem var(--font-mono); letter-spacing: .1em; }
  .capability-details dd { color: var(--color-text-muted); font: .63rem/1.65 var(--font-mono); }
  .capability-actions { display: flex; gap: .5rem; margin-block-start: 1rem; }
  .capability-actions button { min-block-size: 2.75rem; padding-inline: 1rem; border: 1px solid var(--color-border); color: var(--color-accent); font: 500 .6rem var(--font-mono); letter-spacing: .1em; }

  .capability-map { position: sticky; inset-block-start: calc(var(--header-height) + 2rem); min-inline-size: 0; border: 1px solid var(--color-border); background: color-mix(in oklch, var(--color-bg-deep) 90%, transparent); }
  .capability-map canvas { inline-size: 100%; block-size: clamp(30rem, 52vw, 44rem); }
  .map-header, .capability-map figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 2.8rem; padding-inline: 1rem; color: var(--color-text-muted); font: 500 .59rem var(--font-mono); letter-spacing: .1em; }
  .map-header { border-block-end: 1px solid var(--color-border-soft); color: var(--color-accent); }
  .capability-map figcaption { border-block-start: 1px solid var(--color-border-soft); }

  .map-dialog { inline-size: min(72rem, calc(100vw - 2rem)); max-block-size: calc(var(--visual-viewport-height, 100dvh) - 2rem); padding: 0; border: 1px solid var(--color-border); background: var(--color-bg-deep); color: var(--color-text); opacity: 0; transform: translateY(1rem) scale(.985); transition: opacity var(--duration-normal), transform var(--duration-normal), overlay var(--duration-normal) allow-discrete, display var(--duration-normal) allow-discrete; }
  .map-dialog[open] { opacity: 1; transform: none; }
  .map-dialog::backdrop { background: rgb(0 0 0 / .78); backdrop-filter: blur(6px); }
  .map-dialog > header { display: flex; justify-content: space-between; align-items: center; min-block-size: 3.5rem; padding-inline: 1rem; border-block-end: 1px solid var(--color-border); }
  .map-dialog h2 { color: var(--color-accent); font: 600 .72rem var(--font-mono); letter-spacing: .12em; }
  .map-dialog button { min-block-size: 2.75rem; color: var(--color-accent); font: 500 .65rem var(--font-mono); }
  .capability-map-mobile { position: static; border: 0; }
  .capability-map-mobile canvas { block-size: min(68dvh, 42rem); }
  html[data-dialog-open="true"] { overflow: hidden; }

  .capability-cta { display: flex; justify-content: space-between; gap: var(--space-8); align-items: center; }
  .capability-cta p { max-inline-size: 46rem; color: var(--color-text-soft); font-size: clamp(1.25rem, 2.6vw, 2.2rem); }

  .contact-display { font-size: clamp(3rem, 6vw, 6.5rem); line-height: .92; letter-spacing: -.05em; overflow-wrap: anywhere; }
  .contact-layout small { display: block; margin-block-start: var(--space-8); color: var(--color-accent); font: .66rem var(--font-mono); letter-spacing: .14em; }
  .contact-panel { border-block-start: 1px solid var(--color-border); }
  .contact-panel > header, .contact-row { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: center; min-block-size: 4.25rem; border-block-end: 1px solid var(--color-border-soft); }
  .contact-panel > header span, .contact-row > span:first-child { color: var(--color-text-muted); font: 500 .63rem var(--font-mono); letter-spacing: .1em; }
  .contact-panel > header strong { grid-column: 2 / -1; color: var(--color-accent-strong); font: 500 .8rem var(--font-mono); letter-spacing: .08em; }
  .contact-address { font-style: normal; }
  .contact-row a { overflow-wrap: anywhere; color: var(--color-text-soft); font: .76rem var(--font-mono); }
  .contact-row button { min-block-size: 2.75rem; color: var(--color-accent); font: .6rem var(--font-mono); }
  .contact-row button[data-copied="true"] { color: var(--color-accent-strong); }
  .contact-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-block-start: var(--space-6); }
  .contact-actions .action-link { min-inline-size: 0; }

  .copy-status { position: fixed; z-index: 70; inset-inline-end: 1rem; inset-block-end: max(1rem, env(safe-area-inset-bottom)); color: var(--color-accent); font: .68rem var(--font-mono); }
  .matrix-status { position: fixed; z-index: 70; inset-inline-end: max(1rem, env(safe-area-inset-right)); inset-block-end: max(1rem, env(safe-area-inset-bottom)); display: grid; min-inline-size: 14rem; padding: 1rem; border: 1px solid var(--color-border); background: color-mix(in oklch, var(--color-bg-deep) 92%, transparent); color: var(--color-accent-strong); font: .62rem/1.7 var(--font-mono); letter-spacing: .1em; opacity: 0; transform: translateY(.5rem); transition: opacity var(--duration-normal), transform var(--duration-normal); }
  .matrix-status.is-visible { opacity: 1; transform: none; }
  .matrix-status span { color: var(--color-accent); }

  .not-found-actions { min-block-size: 40vh; }
  .not-found-actions > p { margin-block-end: var(--space-8); color: var(--color-text-muted); font: .78rem var(--font-mono); }
  .not-found-actions > div { display: flex; flex-wrap: wrap; gap: .5rem; }
  .noscript-note { position: fixed; z-index: 90; inset: auto 1rem 1rem; padding: .75rem; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-soft); font: .7rem var(--font-mono); }
}

@layer utilities {
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@layer states {
  .capability-list:has(details[data-capability="security"][open]) { --active-domain: oklch(88% .2 145); }
  .contact-row:has(:focus-visible) { border-color: var(--color-accent); }
  details[open]::details-content { opacity: 1; }
}

@layer enhancements {
  @supports (animation-timeline: scroll()) {
    .route-progress { animation: route-progress linear both; animation-timeline: scroll(root block); }
  }

  @supports selector(details::details-content) {
    details::details-content { opacity: 0; transition: opacity 180ms ease, content-visibility 180ms allow-discrete; }
    details[open]::details-content { opacity: 1; }
  }

  @starting-style {
    .route-main { opacity: .86; transform: translateY(.4rem); }
    .terminal-shortcuts:popover-open { opacity: 0; transform: translateY(.5rem); }
    .map-dialog[open] { opacity: 0; transform: translateY(1rem) scale(.985); }
  }

  .route-main { transition: opacity var(--duration-normal), transform var(--duration-normal); }

  ::view-transition-old(page-shell), ::view-transition-new(page-shell) { animation-duration: var(--duration-route); animation-timing-function: var(--ease-standard); }
  ::view-transition-old(page-shell) { animation-name: route-old; }
  ::view-transition-new(page-shell) { animation-name: route-new; }
  :active-view-transition-type(backward)::view-transition-old(page-shell) { animation-name: route-old-back; }
  :active-view-transition-type(backward)::view-transition-new(page-shell) { animation-name: route-new-back; }
  ::view-transition-group(site-brand), ::view-transition-group(primary-navigation), ::view-transition-group(route-title) { animation-duration: var(--duration-route); }
}

@layer overrides {
  @container terminal (width < 42rem) {
    .terminal-footer span:nth-child(2), .terminal-footer span:nth-child(3) { display: none; }
    .terminal-toolbar { grid-template-columns: 1fr auto; }
  }

  @container terminal (width < 20rem) {
    .terminal-tools [data-popover-trigger] { display: none; }
  }

  @container capabilities (width < 38rem) {
    .capability-list summary { grid-template-columns: 2.5rem 1fr 1.25rem; padding-block: .8rem; }
    .capability-list summary small { grid-column: 2 / -1; }
    .capability-details { padding-inline-start: 2.5rem; }
    .capability-details dl { grid-template-columns: 1fr; }
  }

  @media (max-width: 70rem) {
    .site-header { grid-template-columns: auto 1fr auto; }
    .primary-navigation { justify-self: center; }
    .header-actions .matrix-toggle { display: none; }
    .home-hero { grid-template-columns: repeat(8, 1fr); }
    .hero-kicker, .hero-title-wrap { grid-column: 1 / 7; }
    .system-status { grid-column: 7 / -1; }
    .terminal-container { grid-column: 1 / 6; }
    .live-signal { grid-column: 6 / -1; }
    .capability-layout { grid-template-columns: 1fr; }
    .capability-map { position: static; }
  }

  @media (max-width: 48rem) {
    :root { --header-height: 4.1rem; --page-pad: clamp(1rem, 5vw, 1.6rem); }
    .site-header { grid-template-columns: auto 1fr; }
    .brand-domain, .header-signal { display: none; }
    .primary-navigation { justify-self: end; gap: clamp(.7rem, 4vw, 1.5rem); }
    .primary-navigation span { display: inline; }
    .primary-navigation b { display: none; }
    .primary-navigation a { min-inline-size: 2.75rem; justify-content: center; font-size: .7rem; }
    .header-actions { display: none; }
    .home-hero { display: block; min-block-size: auto; padding-block-start: 4rem; }
    .hero-kicker { margin-block-end: 1.5rem; }
    .hero-title { font-size: clamp(3.5rem, 16vw, 6rem); }
    .hero-title > span:last-child { margin-inline-start: 0; }
    .hero-edition { margin: 1.5rem 0 0; }
    .system-status { margin-block: 3rem; }
    .hero-positioning { margin-block: 2rem; }
    .terminal-container, .live-signal { margin-block-start: 2rem; }
    .route-lead { display: block; min-block-size: 70svh; padding-block: 5rem; }
    .route-title { font-size: clamp(3.4rem, 15vw, 6rem); }
    .route-title > span { margin-inline-start: 0; }
    html[data-route="contact"] .route-title { font-size: clamp(2.5rem, 12.5vw, 4.8rem); overflow-wrap: normal; }
    .route-deck { margin-block-start: 2rem; }
    .preview-grid, .principle-index, .principles-grid { grid-template-columns: 1fr; }
    .preview-grid article { min-block-size: 17rem; }
    .story-grid, .layers-layout, .contact-layout { grid-template-columns: 1fr; }
    .story-grid, .layers-layout { gap: 3rem; }
    .architecture-flow ol { grid-template-columns: 1fr; }
    .architecture-flow li { padding: 1.4rem; border-block-end: 1px solid var(--color-border-soft); }
    .architecture-flow li:not(:last-child)::after { inset: auto 50% -.7rem auto; content: "↓"; }
    .section-actions, .capability-cta { align-items: stretch; flex-direction: column; }
    .capability-map[data-map-id="desktop"] { display: none; }
    .capability-list summary { grid-template-columns: 2.5rem 1fr 1.25rem; padding-block: 1rem; }
    .capability-list summary small { grid-column: 2 / -1; }
    .capability-details { padding-inline-start: 2.5rem; }
    .capability-details dl { grid-template-columns: 1fr; }
    .contact-panel > header, .contact-row { grid-template-columns: 5rem 1fr; }
    .contact-row > :last-child { grid-column: 2; justify-self: start; }
    .contact-actions { grid-template-columns: 1fr; }
    .contact-display { font-size: clamp(2.5rem, 12vw, 4rem); overflow-wrap: normal; }
    .site-footer { grid-template-columns: 1fr; text-align: center; }
    .site-footer > :last-child { justify-self: center; }
    .matrix-status { inset-inline: 1rem; min-inline-size: 0; }
  }

  @media (max-width: 23rem) {
    .primary-navigation { gap: .3rem; }
    .primary-navigation a { min-inline-size: 2.5rem; }
    .hero-title { font-size: 3.35rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto; animation-duration: 1ms; animation-iteration-count: 1; transition-duration: 1ms; }
    ::view-transition-group(*) { animation-duration: 1ms; }
    .route-main { transform: none; }
  }

  @media (prefers-contrast: more) {
    :root { --color-text-muted: var(--color-text); --color-border: var(--color-accent); --color-border-soft: color-mix(in oklch, var(--color-accent) 60%, transparent); }
  }

  @media (forced-colors: active) {
    .matrix-layer, .system-grid, .digital-texture, .live-signal { display: none; }
    a, button, details, dialog, .terminal, .capability-map { forced-color-adjust: auto; border-color: CanvasText; }
    :focus-visible { outline: 3px solid Highlight; }
    .primary-navigation a[aria-current="page"] { text-decoration: underline; }
  }
}

@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes route-progress { to { transform: scaleX(1); } }
@keyframes route-old { to { opacity: 0; transform: translateX(-1rem); } }
@keyframes route-new { from { opacity: 0; transform: translateX(1rem); } }
@keyframes route-old-back { to { opacity: 0; transform: translateX(1rem); } }
@keyframes route-new-back { from { opacity: 0; transform: translateX(-1rem); } }

@layer layout {
  .architecture-system, .architecture-flow-diagram, .fallback-matrix, .architecture-restraint, .security-policy {
    padding-block: clamp(6rem, 13vw, 11rem);
    border-block-start: 1px solid var(--color-border-soft);
  }
  .architecture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--color-border); }
  .security-layout { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 9rem); }
}

@layer components {
  .developer-trigger { min-block-size: 2.75rem; color: var(--color-text-muted); font: 500 .58rem var(--font-mono); letter-spacing: .08em; }
  .hint { max-inline-size: 18rem; padding: .65rem .8rem; border: 1px solid var(--color-border); background: var(--color-bg-deep); color: var(--color-text-soft); font: .62rem/1.5 var(--font-mono); }
  .hint:popover-open { inset: calc(var(--header-height) - .3rem) max(var(--page-pad), env(safe-area-inset-right)) auto auto; margin: 0; }

  .architecture-card { min-block-size: 22rem; padding: clamp(2rem, 5vw, 4.5rem); border-inline-end: 1px solid var(--color-border-soft); border-block-end: 1px solid var(--color-border-soft); }
  .architecture-card > span { color: var(--color-accent); font: .65rem var(--font-mono); letter-spacing: .12em; }
  .architecture-card h2 { margin-block: 2rem .75rem; color: var(--color-text-soft); font: 500 clamp(1.5rem, 3vw, 2.8rem)/.95 var(--font-sans); }
  .architecture-card > p { color: var(--color-accent); font: .7rem/1.6 var(--font-mono); letter-spacing: .08em; }
  .architecture-card ul, .architecture-pairs { margin-block-start: 2.5rem; color: var(--color-text-muted); font: .72rem/1.8 var(--font-mono); }
  .architecture-card li::before { margin-inline-end: .7rem; color: var(--color-accent); content: "→"; }
  .architecture-pairs > div { display: grid; grid-template-columns: minmax(7rem, .8fr) 1.2fr; gap: 1rem; padding-block: .55rem; border-block-end: 1px solid var(--color-border-soft); }
  .architecture-pairs dt { color: var(--color-text-soft); }

  .architecture-flow-diagram > h2, .fallback-matrix > h2 { margin-block: var(--space-12); font-size: clamp(2.5rem, 7vw, 7rem); }
  .architecture-flow-diagram ol { display: grid; grid-template-columns: repeat(6, 1fr); border-block: 1px solid var(--color-border); }
  .architecture-flow-diagram li { position: relative; display: grid; align-items: center; min-block-size: 9rem; padding: 1rem; border-inline-end: 1px solid var(--color-border-soft); color: var(--color-text-soft); font: .61rem/1.5 var(--font-mono); text-align: center; }
  .architecture-flow-diagram li:not(:last-child)::after { position: absolute; z-index: 1; inset-inline-end: -.6rem; padding: .15rem; background: var(--color-bg); color: var(--color-accent); content: "→"; }

  .table-scroll { overflow-x: auto; border-block-start: 1px solid var(--color-border); }
  .fallback-matrix table, .debug-table { inline-size: 100%; border-collapse: collapse; font: .7rem/1.5 var(--font-mono); }
  .fallback-matrix :is(th, td), .debug-table :is(th, td) { padding: 1.1rem; border-block-end: 1px solid var(--color-border-soft); text-align: start; }
  .fallback-matrix th, .debug-table th { color: var(--color-accent); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
  .fallback-matrix td { color: var(--color-text-muted); }
  .fallback-matrix td:first-child { color: var(--color-text-soft); }

  .architecture-restraint > h2 { margin-block: var(--space-12); font-size: clamp(3rem, 8vw, 8rem); }
  .architecture-restraint > h2 span { color: transparent; -webkit-text-stroke: 1px var(--color-accent); }
  .architecture-restraint dl { border-block-start: 1px solid var(--color-border); }
  .architecture-restraint dl > div { display: grid; grid-template-columns: minmax(12rem, .5fr) 1.5fr; gap: 2rem; padding-block: 1.5rem; border-block-end: 1px solid var(--color-border-soft); }
  .architecture-restraint dt { color: var(--color-accent); font: .72rem var(--font-mono); }
  .architecture-restraint dd { max-inline-size: 52rem; color: var(--color-text-muted); font-size: .9rem; }

  .security-policy h2 { font-size: clamp(3rem, 7vw, 7rem); }
  .security-policy h3 { margin-block: 2.5rem 1rem; color: var(--color-accent); font: .7rem var(--font-mono); letter-spacing: .12em; }
  .security-policy p, .security-policy li, .security-policy dd { color: var(--color-text-muted); font-size: .88rem; }
  .security-policy dl { margin-block-end: 2.5rem; border-block-start: 1px solid var(--color-border); }
  .security-policy dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: 1rem; border-block-end: 1px solid var(--color-border-soft); }
  .security-policy dt { color: var(--color-accent); font: .62rem var(--font-mono); letter-spacing: .1em; }
  .security-policy li { margin-block: .4rem; }
  .security-policy li::before { margin-inline-end: .7rem; color: var(--color-accent); content: "×"; }
  .security-policy strong { color: var(--color-text-soft); }

  .command-palette, .runtime-debug { inline-size: min(58rem, calc(100vw - 2rem)); max-block-size: calc(var(--visual-viewport-height, 100dvh) - 2rem); padding: 0; border: 1px solid var(--color-border); background: color-mix(in oklch, var(--color-bg-deep) 97%, transparent); color: var(--color-text); }
  .command-palette::backdrop, .runtime-debug::backdrop { background: rgb(0 0 0 / .78); backdrop-filter: blur(8px); }
  .command-palette__shell > header, .runtime-debug__shell > header { display: flex; justify-content: space-between; align-items: center; min-block-size: 4rem; padding-inline: 1rem; border-block-end: 1px solid var(--color-border); }
  .command-palette h2, .runtime-debug h2 { color: var(--color-accent); font: 600 .72rem var(--font-mono); letter-spacing: .12em; }
  .command-palette header button, .runtime-debug header button { min-block-size: 2.75rem; color: var(--color-text-muted); font: .62rem var(--font-mono); }
  .command-palette search { display: block; padding: 1rem; border-block-end: 1px solid var(--color-border-soft); }
  .command-palette input { inline-size: 100%; min-block-size: 3.5rem; padding-inline: 1rem; border: 1px solid var(--color-border); border-radius: 0; outline: 0; background: var(--color-bg); color: var(--color-text); font: .78rem var(--font-mono); }
  .command-palette input:focus { border-color: var(--color-accent); }
  .command-palette__status { min-block-size: 2.4rem; padding: .7rem 1rem; color: var(--color-text-muted); font: .58rem var(--font-mono); letter-spacing: .1em; }
  .command-palette__results { max-block-size: min(52vh, 30rem); overflow-y: auto; border-block-start: 1px solid var(--color-border-soft); }
  .command-result { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: center; inline-size: 100%; min-block-size: 3.5rem; padding-inline: 1rem; border-block-end: 1px solid var(--color-border-soft); text-align: start; }
  .command-result[data-active="true"] { background: color-mix(in oklch, var(--color-accent) 9%, transparent); }
  .command-result__type { color: var(--color-text-muted); font: .56rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
  .command-result__title { color: var(--color-text-soft); font: .72rem var(--font-mono); }
  .command-result kbd { color: var(--color-accent); font: .65rem var(--font-mono); }
  ::highlight(command-match) { background: var(--color-accent); color: var(--color-bg-deep); }
  .command-result mark { background: var(--color-accent); color: var(--color-bg-deep); }

  .runtime-debug { inline-size: min(74rem, calc(100vw - 2rem)); }
  .runtime-debug__shell > header span { color: var(--color-text-muted); font: .55rem var(--font-mono); letter-spacing: .12em; }
  .runtime-debug__shell > header h2 { margin-block-start: .3rem; }
  .runtime-debug nav { display: flex; overflow-x: auto; border-block-end: 1px solid var(--color-border); }
  .runtime-debug nav button { flex: 0 0 auto; min-block-size: 3rem; padding-inline: 1rem; color: var(--color-text-muted); font: .58rem var(--font-mono); letter-spacing: .08em; }
  .runtime-debug nav button[aria-selected="true"] { background: color-mix(in oklch, var(--color-accent) 9%, transparent); color: var(--color-accent); }
  .runtime-debug__panels { min-block-size: 20rem; max-block-size: min(58vh, 38rem); overflow: auto; padding: 1rem; }
  .debug-data { font: .66rem/1.5 var(--font-mono); }
  .debug-data > div { display: grid; grid-template-columns: minmax(10rem, .4fr) 1.6fr; gap: 1rem; padding-block: .65rem; border-block-end: 1px solid var(--color-border-soft); }
  .debug-data dt { color: var(--color-accent); overflow-wrap: anywhere; }
  .debug-data dd { color: var(--color-text-muted); overflow-wrap: anywhere; }
  .debug-status { margin-block-end: 1rem; color: var(--color-accent); font: .65rem var(--font-mono); }
  .runtime-debug__shell > footer { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-block-start: 1px solid var(--color-border); }
  .runtime-debug__shell > footer button { min-block-size: 2.75rem; padding-inline: .8rem; border: 1px solid var(--color-border); color: var(--color-accent); font: .56rem var(--font-mono); letter-spacing: .08em; }

  html[data-source-mode="on"] [data-source-label] { outline: 1px dashed var(--color-accent); outline-offset: -1px; }
  html[data-source-mode="on"] [data-source-label]:not(.site-header):not(canvas) { position: relative; }
  html[data-source-mode="on"] [data-source-label]::before { position: absolute; z-index: 45; inset: .25rem auto auto .25rem; padding: .2rem .35rem; background: var(--color-accent); color: var(--color-bg-deep); content: attr(data-source-label); font: 600 .54rem var(--font-mono); letter-spacing: .06em; pointer-events: none; }
  html[data-source-mode="on"] [data-source-label]::after { position: absolute; z-index: 44; inset: auto .25rem .25rem auto; max-inline-size: min(24rem, 80%); padding: .25rem .4rem; border: 1px solid var(--color-border); background: var(--color-bg-deep); color: var(--color-text-soft); content: attr(data-source-meta); font: .52rem/1.4 var(--font-mono); pointer-events: none; }
  html[data-source-mode="on"] canvas[data-source-label] { outline: 1px dashed var(--color-accent); }
  ::highlight(semantic-anchors) { background: color-mix(in oklch, var(--color-accent) 28%, transparent); text-decoration: underline var(--color-accent); }
  .source-anchor-fallback { text-decoration: underline var(--color-accent); text-decoration-thickness: .08em; }
}

@layer enhancements {
  ::search-text { background: var(--color-accent); color: var(--color-bg-deep); }
  ::target-text { background: color-mix(in oklch, var(--color-accent) 35%, transparent); color: var(--color-text); }
}

@layer overrides {
  @media (max-width: 48rem) {
    .architecture-grid { grid-template-columns: 1fr; }
    .architecture-card { min-block-size: 0; }
    .architecture-flow-diagram ol { grid-template-columns: 1fr; }
    .architecture-flow-diagram li { min-block-size: 4.5rem; border-block-end: 1px solid var(--color-border-soft); }
    .architecture-flow-diagram li:not(:last-child)::after { inset: auto 50% -.65rem auto; content: "↓"; }
    .architecture-restraint dl > div, .security-layout { grid-template-columns: 1fr; }
    html[data-route="security"] .route-title { overflow-wrap: normal; font-size: clamp(2.5rem, 12vw, 4.5rem); }
    .command-palette, .runtime-debug { inline-size: calc(100vw - 1rem); max-block-size: calc(var(--visual-viewport-height, 100dvh) - 1rem); }
    .command-result { grid-template-columns: 4.5rem 1fr auto; }
    .debug-data > div { grid-template-columns: 1fr; gap: .25rem; }
  }

  @media (forced-colors: active) {
    .command-palette, .runtime-debug, .hint, .architecture-card { forced-color-adjust: auto; border-color: CanvasText; }
    html[data-source-mode="on"] [data-source-label] { outline-color: Highlight; }
  }
}