/* Keel product theme — the paint layer over the engine's surface map.
 *
 * Layers:
 *   - The engine owns structure, layout primitives, and the closed
 *     `data-keel-surface` role vocabulary.
 *   - This file owns the look: palette, type, depth, rhythm, and per-role
 *     paint. It declares no page arrangement and adds no new structure.
 *
 * Accessibility law: every text-bearing surface keeps an opaque background
 * colour, so contrast stays mechanically checkable (axe/AT resolve colour
 * against a solid canvas). Decorative gradients ride on pseudo-elements.
 *
 * Light and dark: the same tokens serve both, chosen by `prefers-color-scheme`
 * and overridable with `data-keel-scheme` on the document root.
 */

/* ==========================================================================
 * 1. Tokens
 * ========================================================================== */
:root {
  color-scheme: dark;

  /* Canvas and ink */
  --keel-bg: #05070e;
  --keel-ink: #eaf0fb;
  --keel-muted: #9dabc6;
  /* 5.3:1 on the light plate and 6.9:1 on the light band: the small-type
   * threshold with headroom, in both schemes' canvases. */
  --keel-faint: #94a3c0;
  --keel-line: rgba(142, 170, 216, 0.16);
  --keel-line-strong: rgba(152, 186, 240, 0.3);

  /* Surfaces */
  --keel-card: #0b1220;
  --keel-elev-1: #0d1524;
  --keel-elev-2: #111b2e;
  --keel-elev-3: #162034;
  --keel-rail: #06090f;
  --keel-glass: #070b13;
  --keel-plate: #0a1120;
  /* Text that always sits on a dark rail surface, in either colour scheme. */
  --keel-rail-ink: #dbe7f8;
  --keel-rail-muted: #9db0cc;

  /* Accents */
  --keel-accent: #6cc7ff;
  --keel-accent-2: #b49bff;
  --keel-accent-3: #56e0c0;
  --keel-accent-ink: #04121f;
  --keel-success: #5fe3a8;
  --keel-warn: #f2c46b;
  --keel-danger: #ff9090;

  /* Radius */
  --keel-radius: 16px;
  --keel-radius-sm: 10px;
  --keel-radius-lg: 28px;
  --keel-radius-pill: 999px;

  /* Rhythm */
  /* A max-width is a *maximum*, so it must never exceed the viewport — but this
     one did (1200 on a 390px phone), and because the engine's own stylesheet
     writes `#keel-outlet { max-width: var(--keel-max) }` the outlet stayed 1200
     and every descendant inherited it as their containing block. Measured: the
     outlet was 390px before hydration and 1200px after, with `#demos_links` and
     `#list_patches` landing at 1123px; constraining the outlet to 390 made the
     whole document 390 with everything inside fitting (cells 313px).
     `min(1200px, 100%)` keeps the intended reading measure on a wide screen and
     stops the value from silently overriding the phone. */
  --keel-max: min(1200px, 100%);
  --keel-max-wide: min(1360px, 100%);
  --keel-space-1: 0.35rem;
  --keel-space-2: 0.7rem;
  --keel-space-3: 1rem;
  --keel-space-4: 1.5rem;
  --keel-space-5: 2.25rem;
  --keel-pad-comfortable: 1.5rem 1.6rem;
  --keel-pad-compact: 0.85rem 1rem;

  /* Type */
  --keel-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --keel-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --keel-fs-display: clamp(2.9rem, 6vw, 5rem);
  --keel-fs-title: clamp(1.65rem, 3vw, 2.45rem);
  --keel-fs-h2: 1.45rem;
  --keel-fs-lead: clamp(1.08rem, 1.4vw, 1.28rem);
  --keel-fs-body: 1.0625rem;
  --keel-fs-small: 0.9rem;
  --keel-fs-eyebrow: 0.74rem;
  --keel-lh-tight: 1.02;
  --keel-lh-body: 1.62;
  --keel-tracking-display: -0.035em;
  --keel-tracking-title: -0.02em;
  --keel-tracking-eyebrow: 0.16em;

  /* Depth */
  --keel-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 44px -32px rgba(2, 6, 16, 0.95);
  --keel-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05),
    0 36px 84px -48px rgba(2, 6, 16, 1);
  --keel-sheen: rgba(255, 255, 255, 0.05);

  /* Motion */
  --keel-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --keel-dur-1: 120ms;
  --keel-dur-2: 200ms;
  --keel-dur-3: 320ms;
}

/* Light mode: the same roles, a paper canvas instead of an instrument one. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --keel-bg: #f7f9fc;
    --keel-ink: #0b1220;
    --keel-muted: #55637c;
    /* 5.4:1 on the band, 6.1:1 on the plate. The previous value was 4.45:1,
     * just under the small-type floor, so every fact label failed axe. */
    --keel-faint: #57657c;
    --keel-line: rgba(20, 40, 70, 0.14);
    --keel-line-strong: rgba(20, 40, 70, 0.26);
    --keel-card: #ffffff;
    --keel-elev-1: #ffffff;
    --keel-elev-2: #f1f5fb;
    --keel-elev-3: #e7eef8;
    --keel-rail: #0e1524;
    --keel-glass: rgba(247, 249, 252, 0.86);
    --keel-plate: #ffffff;
    --keel-rail-ink: #e6eefb;
    --keel-rail-muted: #b3c2da;
    --keel-accent: #0f6fd6;
    --keel-accent-2: #6d4bd8;
    --keel-accent-3: #0f8f7a;
    --keel-accent-ink: #ffffff;
    --keel-success: #0f7d55;
    --keel-warn: #8a5a00;
    --keel-danger: #b4232a;
    --keel-shadow-1: 0 1px 2px rgba(15, 30, 60, 0.06),
      0 18px 40px -32px rgba(15, 30, 60, 0.35);
    --keel-shadow-2: 0 1px 2px rgba(15, 30, 60, 0.08),
      0 36px 80px -48px rgba(15, 30, 60, 0.4);
    --keel-sheen: rgba(15, 30, 60, 0.04);
  }
}

/* ==========================================================================
 * 2. Canvas
 * ========================================================================== */
html {
  background-color: var(--keel-bg);
}

body {
  position: relative;
  z-index: 0;
  background-color: var(--keel-bg);
  color: var(--keel-ink);
  font-family: var(--keel-font);
  font-size: var(--keel-fs-body);
  line-height: var(--keel-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient field: painted behind content, never under text. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* Three colour fields: cyan rises top-left, violet top-right, teal climbs
     * from below — the page's aurora, kept below every opaque text canvas. */
    radial-gradient(
      1320px 680px at 6% -14%,
      color-mix(in srgb, var(--keel-accent) 30%, transparent),
      transparent 64%
    ),
    radial-gradient(
      1080px 560px at 98% 0%,
      color-mix(in srgb, var(--keel-accent-2) 24%, transparent),
      transparent 62%
    ),
    radial-gradient(
      900px 620px at 50% 118%,
      color-mix(in srgb, var(--keel-accent-3) 14%, transparent),
      transparent 66%
    ),
    /* A faint engineering grid over the top of the field. */
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--keel-line) 80%, transparent) 0 1px,
      transparent 1px 88px
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--keel-line) 60%, transparent) 0 1px,
      transparent 1px 88px
    );
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
}

#keel-root[data-keel-surface="app-shell"],
#keel-root,
#keel-static-root {
  background-color: transparent;
  color: var(--keel-ink);
}

#keel-outlet,
#keel-static-root #keel-outlet {
  padding-top: 1.6rem;
}

::selection {
  background: color-mix(in srgb, var(--keel-accent) 32%, transparent);
  color: var(--keel-ink);
}

.skip,
a.skip {
  border: 1px solid var(--keel-line-strong);
  border-radius: var(--keel-radius-pill);
  background-color: var(--keel-elev-2);
  color: var(--keel-ink);
  font-weight: 640;
  padding: 0.5rem 0.9rem;
  z-index: 40;
}

/* One visible focus ring for every interactive role. */
#keel-root a:focus-visible,
#keel-static-root a:focus-visible,
#keel-root button:focus-visible,
#keel-static-root button:focus-visible,
#keel-root summary:focus-visible,
#keel-static-root summary:focus-visible,
#keel-root [tabindex]:focus-visible,
#keel-static-root [tabindex]:focus-visible,
#keel-root input:focus-visible,
#keel-root textarea:focus-visible,
#keel-root select:focus-visible {
  outline: 2px solid var(--keel-accent);
  outline-offset: 2px;
}

/* ==========================================================================
 * 3. Chrome — sticky glass nav with one entry per page group
 *
 * The blur rides on a pseudo-element, not on the nav box: `backdrop-filter`
 * makes the nav a containing block for `position: fixed`, which would also
 * anchor the Resources panel to the scrollable nav strip.
 *
 * MEASURED, load-bearing, product-owned (not a workaround for a missing engine
 * capability — the engine emits no blur and should not). On a 390x844 viewport
 * with the page scrolled to y=200, a `position: sticky` nav that carries its own
 * `backdrop-filter` stops holding the top edge — the nav box lands at
 * `navTop = -200` instead of 0, and a `position: fixed` descendant sitting at
 * `top: 60px` is dragged to y = -140 with it. Painting the same blur on
 * `nav::before` restores `navTop = 0` and the descendant to y = 60. The engine
 * has no blur concept, so this rule is the product's to hold; only the *box*
 * must stay blur-free while the nav is sticky.
 * ========================================================================== */
#keel-root [data-keel-surface="nav"],
#keel-static-root [data-keel-surface="nav"] {
  align-items: center;
  border-bottom: 1px solid var(--keel-line);
  background-color: var(--keel-glass);
  box-shadow: 0 1px 0 var(--keel-sheen);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  position: relative;
  z-index: 30;
  /* The engine's surface map paints the nav blur on the box itself, which makes
   * the nav a containing block for `position: fixed`. The product overrides it
   * and paints the blur on `::before` instead, so the overlay below is anchored
   * to the viewport even on a phone. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#keel-root [data-keel-surface="nav"]::before,
#keel-static-root [data-keel-surface="nav"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--keel-glass);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}

/* The header row keeps its own stacking context above page content so the
 * disclosure panel is never clipped by a neighbouring band. */
#keel-root [data-keel-surface="app-shell"] > [data-keel-surface="nav"],
#keel-static-root > [data-keel-surface="nav"] {
  position: sticky;
  top: 0;
}

#keel-root [data-keel-surface="brand"],
#keel-static-root [data-keel-surface="brand"],
#keel-root [data-keel-surface="shared-vt-brand"],
#keel-static-root [data-keel-surface="shared-vt-brand"] {
  border: 1px solid var(--keel-line-strong);
  border-radius: 12px;
  background-color: var(--keel-elev-2);
  color: var(--keel-ink) !important;
  font-size: 1.05rem;
  font-weight: 720;
  letter-spacing: -0.02em;
  padding: 0.34rem 0.7rem;
}

#keel-root [data-keel-surface="nav-link"],
#keel-static-root [data-keel-surface="nav-link"] {
  border: 1px solid transparent;
  border-radius: var(--keel-radius-pill);
  background-color: transparent;
  color: var(--keel-muted) !important;
  font-size: var(--keel-fs-small);
  font-weight: 560;
  padding: 0.42rem 0.8rem;
  /* The engine keeps nav underlines as an a11y floor; the product decides how
   * quiet that line is. */
  text-decoration-color: color-mix(in srgb, var(--keel-muted) 45%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--keel-dur-1) var(--keel-ease),
    background-color var(--keel-dur-2) var(--keel-ease),
    border-color var(--keel-dur-2) var(--keel-ease);
}

#keel-root [data-keel-surface="nav-link"]:hover,
#keel-static-root [data-keel-surface="nav-link"]:hover {
  border-color: var(--keel-line);
  background-color: var(--keel-elev-2);
  color: var(--keel-ink) !important;
  text-decoration-color: color-mix(in srgb, var(--keel-ink) 55%, transparent);
}

#keel-root [data-keel-surface="nav-link"].is-active,
#keel-root [data-keel-surface="nav-link"][aria-current="page"],
#keel-static-root [data-keel-surface="nav-link"].is-active,
#keel-static-root [data-keel-surface="nav-link"][aria-current="page"],
#keel-root [data-keel-surface="nav-link-active"],
#keel-static-root [data-keel-surface="nav-link-active"] {
  border-color: color-mix(in srgb, var(--keel-accent) 40%, transparent);
  background-color: color-mix(in srgb, var(--keel-accent) 14%, var(--keel-elev-2));
  color: var(--keel-ink) !important;
  text-decoration-color: color-mix(in srgb, var(--keel-accent) 75%, transparent);
}

#keel-root [data-keel-surface="nav-cta"],
#keel-static-root [data-keel-surface="nav-cta"] {
  border: 1px solid color-mix(in srgb, var(--keel-accent) 55%, transparent);
  border-radius: var(--keel-radius-pill);
  background-color: var(--keel-accent);
  color: var(--keel-accent-ink) !important;
  font-size: var(--keel-fs-small);
  font-weight: 700;
  padding: 0.45rem 1.05rem;
  text-decoration: none;
  box-shadow: 0 14px 32px -20px color-mix(in srgb, var(--keel-accent) 90%, transparent);
}

#keel-root [data-keel-surface="nav-cta"]:hover,
#keel-static-root [data-keel-surface="nav-cta"]:hover {
  filter: brightness(1.08);
  color: var(--keel-accent-ink) !important;
}

/* ==========================================================================
 * 4. Type roles
 * ========================================================================== */
#keel-root [data-keel-surface="display"],
#keel-static-root [data-keel-surface="display"],
#keel-root [data-keel-surface="shared-vt-title"],
#keel-static-root [data-keel-surface="shared-vt-title"],
#keel-root h1,
#keel-static-root h1 {
  color: var(--keel-ink);
  font-family: var(--keel-font);
  font-size: var(--keel-fs-display);
  font-weight: 760;
  letter-spacing: var(--keel-tracking-display);
  line-height: var(--keel-lh-tight);
  text-wrap: balance;
}

#keel-root [data-keel-surface="title"],
#keel-static-root [data-keel-surface="title"],
#keel-root h2,
#keel-static-root h2 {
  color: var(--keel-ink);
  font-size: var(--keel-fs-title);
  font-weight: 700;
  letter-spacing: var(--keel-tracking-title);
  line-height: 1.14;
  text-wrap: balance;
}

#keel-root h3,
#keel-static-root h3,
#keel-root h3[data-keel-surface="title"],
#keel-static-root h3[data-keel-surface="title"] {
  color: var(--keel-ink);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 680;
  letter-spacing: -0.012em;
  line-height: 1.24;
  text-wrap: balance;
}

#keel-root [data-keel-surface="section-heading"],
#keel-static-root [data-keel-surface="section-heading"] {
  color: var(--keel-ink);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* An exhibit's own page title: page scale, above the panel headings. */
#keel-root h1[data-keel-surface="exhibit-title"],
#keel-static-root h1[data-keel-surface="exhibit-title"] {
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 730;
  letter-spacing: -0.028em;
  line-height: 1.08;
}

#keel-root [data-keel-surface="eyebrow"],
#keel-static-root [data-keel-surface="eyebrow"] {
  color: var(--keel-accent);
  font-size: var(--keel-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--keel-tracking-eyebrow);
  text-transform: uppercase;
}

#keel-root [data-keel-surface="lead"],
#keel-static-root [data-keel-surface="lead"],
#keel-root [data-keel-surface="hero-copy"],
#keel-static-root [data-keel-surface="hero-copy"] {
  color: var(--keel-muted);
  font-size: var(--keel-fs-lead);
  line-height: 1.5;
}

#keel-root [data-keel-surface="body"],
#keel-static-root [data-keel-surface="body"] {
  color: var(--keel-muted);
  font-size: var(--keel-fs-body);
  line-height: var(--keel-lh-body);
}

/* A body span inside a dark-always rail surface keeps light ink. */
#keel-root [data-keel-surface="theater"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="body"],
#keel-root [data-keel-surface="figure"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="figure"] [data-keel-surface="body"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="body"] {
  color: var(--keel-rail-muted);
}

#keel-root [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="meta"],
#keel-root [data-keel-surface="section-note"],
#keel-static-root [data-keel-surface="section-note"] {
  color: var(--keel-faint);
  font-size: var(--keel-fs-small);
}

#keel-root strong,
#keel-static-root strong {
  color: var(--keel-ink);
  font-weight: 650;
}

/* Strong text inside a rail surface follows the rail ink, not the page ink. */
#keel-root [data-keel-surface="theater"] strong,
#keel-static-root [data-keel-surface="theater"] strong,
#keel-root [data-keel-surface="figure"] strong,
#keel-static-root [data-keel-surface="figure"] strong,
#keel-root [data-keel-surface="pane"] strong,
#keel-static-root [data-keel-surface="pane"] strong {
  color: var(--keel-rail-ink);
}

/* Long unbreakable tokens wrap instead of widening the document.
 *
 * MEASURED at a 390px viewport. `overflow-wrap: anywhere` on these surfaces
 * shrinks a 40-char hex token to 12px in isolation but does NOT reduce the
 * element's min-content width, because the *parent* chain (a flex column with
 * `min-width: auto`) is the axis that widens, not the leaf. What the rule does
 * buy is that a leaf which also gets `min-width: 0` can actually break; without
 * it the token stays whole. See the residual below for the routes that still
 * overflow and the single rule that contains them. */
#keel-root [data-keel-surface="body"],
#keel-static-root [data-keel-surface="body"],
#keel-root [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="meta"],
#keel-root [data-keel-surface="lead"],
#keel-static-root [data-keel-surface="lead"],
#keel-root [data-keel-surface="hero-copy"],
#keel-static-root [data-keel-surface="hero-copy"],
#keel-root [data-keel-surface="fact-value"],
#keel-static-root [data-keel-surface="fact-value"],
#keel-root [data-keel-surface="fact-meta"],
#keel-static-root [data-keel-surface="fact-meta"] {
  overflow-wrap: anywhere;
}

/* Cell content wraps for the same reason: a matrix cell can carry a long
 * unbreakable value (a hash, a path, a measured string), and without this the
 * table's min-content width becomes the document's. Measured at 390px:
 * `/compare` 417 -> 390 and `/performance` 459 -> 390 with this rule alone. */
#keel-root td,
#keel-static-root td,
#keel-root th,
#keel-static-root th {
  overflow-wrap: anywhere;
}

/* Table heads are painted by the host surface role with a rail background, so
 * they carry their own ink in either scheme. */
#keel-root [data-keel-surface="table-head"],
#keel-static-root [data-keel-surface="table-head"] {
  background-color: color-mix(in srgb, var(--keel-rail) 84%, var(--keel-plate));
  color: var(--keel-rail-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.65rem 0.8rem;
  text-align: left;
  text-transform: uppercase;
}

/* Receipt/metric rows on the console rail surfaces keep light ink. */
#keel-root [data-keel-surface="metric"][data-variant="receipt"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="metric"][data-variant="receipt"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="metric"][data-variant="receipt"] [data-keel-surface="metric-value"],
#keel-static-root [data-keel-surface="metric"][data-variant="receipt"] [data-keel-surface="metric-value"] {
  color: var(--keel-rail-ink);
}

#keel-root [data-keel-surface="metric"][data-variant="receipt"],
#keel-static-root [data-keel-surface="metric"][data-variant="receipt"] {
  background-color: color-mix(in srgb, var(--keel-rail) 88%, var(--keel-plate));
  border-left-color: color-mix(in srgb, var(--keel-accent-2) 65%, transparent);
}

#keel-root [data-keel-surface="metric-value"],
#keel-static-root [data-keel-surface="metric-value"] {
  overflow-wrap: anywhere;
}

/* Display type breaks rather than widening the page. `anywhere`, not
 * `break-word`: measured at a 390px viewport, `/docs` 470 -> 390 and
 * `/performance` 407 -> 390 with `anywhere`, because `break-word` does not
 * contribute to min-content sizing and therefore cannot shrink the flex
 * ancestor that is actually setting the floor. */
#keel-root [data-keel-surface="title"],
#keel-static-root [data-keel-surface="title"],
#keel-root [data-keel-surface="section-heading"],
#keel-static-root [data-keel-surface="section-heading"],
#keel-root [data-keel-surface="display"],
#keel-static-root [data-keel-surface="display"],
#keel-root [data-keel-surface="shared-vt-title"],
#keel-static-root [data-keel-surface="shared-vt-title"] {
  overflow-wrap: anywhere;
  hyphens: none;
}

#keel-root [data-keel-layout="row"] > *,
#keel-root [data-keel-layout="wrap"] > *,
#keel-static-root [data-keel-layout="row"] > *,
#keel-static-root [data-keel-layout="wrap"] > * {
  min-width: 0;
}

/* ==========================================================================
 * 5. Hero and section rhythm
 * ========================================================================== */
#keel-root [data-keel-surface="hero"],
#keel-static-root [data-keel-surface="hero"] {
  position: relative;
  z-index: 0;
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius-lg);
  background-color: var(--keel-plate);
  padding: clamp(1.9rem, 4vw, 3.6rem);
  overflow: hidden;
}

#keel-root [data-keel-surface="hero"]::before,
#keel-static-root [data-keel-surface="hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
      1100px 520px at 0% -16%,
      color-mix(in srgb, var(--keel-accent) 36%, transparent),
      transparent 64%
    ),
    radial-gradient(
      840px 460px at 102% -8%,
      color-mix(in srgb, var(--keel-accent-2) 28%, transparent),
      transparent 62%
    ),
    radial-gradient(
      640px 520px at 58% 116%,
      color-mix(in srgb, var(--keel-accent-3) 15%, transparent),
      transparent 64%
    );
}

#keel-root [data-keel-surface="hero"]::after,
#keel-static-root [data-keel-surface="hero"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--keel-accent) 22%,
    var(--keel-accent-2) 54%,
    var(--keel-accent-3) 76%,
    transparent
  );
  opacity: 0.9;
  box-shadow: 0 0 22px color-mix(in srgb, var(--keel-accent) 50%, transparent);
}

/* Section intros are text, not boxes: the band owns the frame, the intro owns
 * the reading column. */
#keel-root [data-keel-surface="band"],
#keel-static-root [data-keel-surface="band"] {
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius-lg);
  background-color: var(--keel-elev-1);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

/* v6 P4: the "intro + one card row does not need a frame" rule used to be a
 * `band:has(> card:only-of-type)` selector. Measured against the committed
 * export (`scripts/p4_has_probe.py dist`), it matched **zero** nodes: a card
 * band's cards sit inside a lane track, never as a direct child of the band, so
 * the rule never painted. It is deleted rather than re-expressed — the product
 * paints a quiet band by choosing the surface, not by a structural selector
 * (the bypass budget in scripts/bypass_budget.json). */

#keel-root [data-keel-surface="panel"],
#keel-static-root [data-keel-surface="panel"] {
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius-lg);
  background-color: var(--keel-elev-2);
  padding: clamp(1.3rem, 2.8vw, 2.1rem);
}

/* A one-pixel rim of light along the top of the big plates: a lit edge, not
 * another border. */
#keel-root [data-keel-surface="band"],
#keel-static-root [data-keel-surface="band"],
#keel-root [data-keel-surface="panel"],
#keel-static-root [data-keel-surface="panel"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


#keel-root [data-keel-surface="theater"],
#keel-static-root [data-keel-surface="theater"] {
  position: relative;
  z-index: 0;
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius-lg);
  background-color: var(--keel-rail);
  box-shadow: var(--keel-shadow-1);
  padding: clamp(1.3rem, 2.8vw, 2.1rem);
  overflow: hidden;
}

#keel-root [data-keel-surface="theater"]::before,
#keel-static-root [data-keel-surface="theater"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--keel-accent) 8%, transparent),
      transparent 46%
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--keel-line) 90%, transparent) 0 1px,
      transparent 1px 72px
    );
}

/* ==========================================================================
 * 5b. Work sample frames — the site's visual anchor shape
 * ========================================================================== */
#keel-root [data-keel-surface="figure"],
#keel-static-root [data-keel-surface="figure"] {
  position: relative;
  z-index: 0;
  border: 1px solid var(--keel-line-strong);
  border-radius: var(--keel-radius-lg);
  background-color: var(--keel-rail);
  box-shadow: var(--keel-shadow-2);
  padding: 0.9rem;
  overflow: hidden;
}

#keel-root [data-keel-surface="figure"]::before,
#keel-static-root [data-keel-surface="figure"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--keel-accent) 10%, transparent),
    transparent 52%
  );
}

#keel-root [data-keel-surface="figure-bar"],
#keel-static-root [data-keel-surface="figure-bar"] {
  align-items: center;
  border-bottom: 1px solid var(--keel-line);
  gap: 0.7rem;
  padding: 0.2rem 0.35rem 0.7rem;
}

#keel-root [data-keel-surface="figure-bar"] [data-keel-surface="body"]:first-child,
#keel-static-root [data-keel-surface="figure-bar"] [data-keel-surface="body"]:first-child {
  color: color-mix(in srgb, var(--keel-accent) 60%, var(--keel-muted));
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

#keel-root [data-keel-surface="figure-bar"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="figure-bar"] [data-keel-surface="meta"] {
  color: var(--keel-muted);
  font-family: var(--keel-font-mono);
  font-size: 0.8rem;
}

#keel-root [data-keel-surface="pane"],
#keel-static-root [data-keel-surface="pane"] {
  flex: 1 1 320px;
  gap: 0.6rem;
  min-width: min(100%, 280px);
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  background-color: color-mix(in srgb, var(--keel-elev-1) 80%, transparent);
  padding: 0.95rem 1.05rem;
}

#keel-root [data-keel-surface="pane"][data-variant="ledger"],
#keel-static-root [data-keel-surface="pane"][data-variant="ledger"] {
  border-left: 3px solid color-mix(in srgb, var(--keel-accent-2) 60%, transparent);
}

#keel-root [data-keel-surface="pane"] [data-keel-surface="code-rail"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="code-rail"] {
  border: none;
  background-color: transparent;
  font-size: 0.8rem;
  line-height: 1.75;
  padding: 0;
}

/* Table headers in this product have no host surface role of their own
 * (`th` is generated by the engine), so they carry their ink directly. */
#keel-root th,
#keel-static-root th {
  color: var(--keel-rail-ink);
}

/* Fields are painted on the rail in both schemes, so their text follows the
 * rail ink rather than the page ink. Host-generated editors (pg-md) and
 * product fields share this rule. */
#keel-root [data-keel-surface="field"],
#keel-static-root [data-keel-surface="field"],
#keel-root textarea[data-keel-surface="field"],
#keel-root textarea#pg-md,
#keel-root input[data-keel-surface="field"] {
  color: var(--keel-rail-ink) !important;
  caret-color: var(--keel-rail-ink);
}

#keel-root [data-keel-surface="field"]::placeholder,
#keel-root textarea[data-keel-surface="field"]::placeholder,
#keel-root textarea#pg-md::placeholder {
  color: #9db0cc !important;
}

/* Rail workers: mounts whose box the product paints as a dark rail (see the
 * `#pg-panes`, `#list_demo`, and `#load_root` rules below). Their host-written
 * status lines have no rail ancestor to inherit from, so the product names
 * them. A page-level readout such as `#workbench_runtime_nav_readout` sits on a
 * light plate and is not in this list. */
#keel-root #load_status,
#keel-root #dom_status,
#keel-root #fx_email__err,
#keel-root #load_contract_async_msg,
#keel-root [data-keel-surface="async-ready"],
#keel-root [data-keel-surface="async-pending"],
#keel-root [data-keel-surface="async-empty"],
#keel-root [data-keel-surface="async-error"],
#keel-root [data-keel-surface="load-status"] {
  color: var(--keel-rail-ink);
}

/* Nested message spans the host writes inside those mounts (async phase text,
 * list/load meta) keep the lighter rail muted token: they are small type and
 * need the 4.5:1 threshold, not the 3:1 large-text one. */
#keel-root #dom_status,
#keel-root #fx_email__err,
#keel-root #load_contract_async_msg,
#keel-root #load_contract_residual,
#keel-root #load_meta,
#keel-root [data-keel-surface="async-ready"] [data-keel-surface="body"],
#keel-root [data-keel-surface="async-pending"] [data-keel-surface="body"],
#keel-root [data-keel-surface="async-empty"] [data-keel-surface="body"],
#keel-root [data-keel-surface="async-error"] [data-keel-surface="body"],
#keel-root [data-keel-surface="load-status"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="load-status"] [data-keel-surface="body"] {
  color: var(--keel-rail-muted);
}

/* The engine's document editor and the load host render their own status and
 * preview chrome with inline light-scheme colors; inside the mount they sit on
 * the rail, so the product pins them to the rail ink. */
#keel-root #dom_status,
#keel-root #load_meta,
#keel-root #fx_email__err,
#keel-root #load_contract_async_msg,
#keel-root #pg-wysiwyg,
#keel-root #load_root [data-keel-surface="body"],
#keel-root #load_root [data-keel-surface="meta"] {
  color: var(--keel-rail-ink) !important;
}

/* ...and the mounts the product paints dark, so both inks above have a rail to
 * land on. `#pg-panes` is the playground's two-column rail strip. */
#keel-root #pg-panes {
  background-color: var(--keel-rail);
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  padding: 0.9rem 1rem;
}

/* Engine- and host-generated nodes inside the product's mounts keep inline
 * light-scheme colors written by the pack hosts. The product cannot reach those
 * values through ordinary cascade, so they are pinned here. These are the only
 * `!important` declarations in the theme, and each names a host they belong to. */
#keel-root #pg-wysiwyg,
#keel-root #pg-wysiwyg *,
#keel-root #load_root,
#keel-root #load_root *,
#keel-root #list_static_table th,
#keel-root #list_static_table td {
  color: var(--keel-rail-ink) !important;
}

#keel-root #pg-wysiwyg a {
  color: var(--keel-accent) !important;
}

/* Inline code and keyboard hints inside the rail mounts. */
#keel-root #pg-wysiwyg code,
#keel-root #pg-wysiwyg kbd,
#keel-root #pg-source-col code,
#keel-root [data-keel-surface="pane"] code,
#keel-root [data-keel-surface="pane"] kbd,
#keel-root #list_demo code,
#keel-root #load_root code,
#keel-root #load_root kbd {
  background-color: color-mix(in srgb, var(--keel-rail) 72%, transparent) !important;
  color: var(--keel-rail-ink) !important;
}

/* The list host's own stage rows and patch log. */
#keel-root #list_demo,
#keel-root #list_demo * {
  color: var(--keel-rail-ink) !important;
}

/* The mount itself is a rail workbench: its container is dark so the rail ink
 * above is readable, and so are the host-painted panels inside it. */
#keel-root #list_demo,
#keel-root #list_demo [data-keel-surface="card"],
#keel-root #list_demo [data-keel-surface="panel"],
#keel-root #load_demo,
#keel-root #load_root,
#keel-root #load_root [data-keel-surface="card"],
#keel-root #load_root [data-keel-surface="panel"] {
  background-color: color-mix(in srgb, var(--keel-rail) 90%, var(--keel-plate)) !important;
}

/* Host toolbar buttons sit on the same rail: light ink on the dark chip. */
#keel-root #list_toolbar button,
#keel-root #load_toolbar button,
#keel-root #fx_form button,
#keel-root #list_patches,
#keel-root #list_status {
  color: var(--keel-rail-ink) !important;
}

#keel-root #load_demo [data-keel-surface="title"],
#keel-root #load_demo [data-keel-surface="exhibit-title"],
#keel-root #load_contract_h {
  color: var(--keel-rail-ink) !important;
}

/* The load host also writes a heading directly under the mount. */
#keel-root #load_demo > h2,
#keel-root #load_h,
#keel-root #load_demo [data-keel-surface="title"] {
  color: var(--keel-rail-ink) !important;
}

/* A fact tile is a light surface in the light scheme: its value follows the
 * page ink and carries no chip background of its own. */
#keel-root [data-keel-surface="fact-value"],
#keel-static-root [data-keel-surface="fact-value"] {
  background-color: transparent;
  color: var(--keel-ink) !important;
}

/* ==========================================================================
 * 6. Cards — three variants, one rhythm
 * ========================================================================== */
/* Dark-always surfaces (rail-based) own their own ink. In the light scheme the
 * page ink is dark, and dark-on-dark is exactly the contrast failure the axe
 * gate caught: these surfaces keep the dark rail, so their text must stay
 * light in both schemes. */
#keel-root [data-keel-surface="theater"],
#keel-static-root [data-keel-surface="theater"],
#keel-root [data-keel-surface="figure"],
#keel-static-root [data-keel-surface="figure"],
#keel-root [data-keel-surface="pane"],
#keel-static-root [data-keel-surface="pane"],
#keel-root [data-keel-surface="code-rail"],
#keel-static-root [data-keel-surface="code-rail"] {
  color: var(--keel-rail-ink);
}

#keel-root [data-keel-surface="theater"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="body"],
#keel-root [data-keel-surface="theater"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="theater"] [data-keel-surface="title"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="title"],
#keel-root [data-keel-surface="theater"] [data-keel-surface="exhibit-title"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="exhibit-title"],
#keel-root [data-keel-surface="theater"] [data-keel-surface="metric-value"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="metric-value"],
#keel-root [data-keel-surface="theater"] [data-keel-surface^="btn-"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface^="btn-"],
#keel-root [data-keel-surface="figure"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="figure"] [data-keel-surface="body"],
#keel-root [data-keel-surface="figure"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="figure"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="figure-bar"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="figure-bar"] [data-keel-surface="body"],
#keel-root [data-keel-surface="figure-bar"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="figure-bar"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="body"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="body"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="title"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="title"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="code-rail"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="code-rail"] {
  color: var(--keel-rail-ink);
}

/* The plane label under a measured row is 12px mono: below 4.5:1 it fails, so
 * rail surfaces use the lighter muted token rather than the page one. */
#keel-root [data-keel-surface="theater"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="meta"],
#keel-root [data-keel-surface="figure-bar"] [data-keel-surface="meta"],
#keel-static-root [data-keel-surface="figure-bar"] [data-keel-surface="meta"] {
  color: var(--keel-rail-muted);
}

/* Rail-based rows keep a rail background instead of the light elevation, so
 * the light ink above always has a dark canvas. */
#keel-root [data-keel-surface="theater"] [data-keel-surface="metric"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="metric"],
#keel-root [data-keel-surface="pane"],
#keel-static-root [data-keel-surface="pane"] {
  background-color: color-mix(in srgb, var(--keel-rail) 86%, var(--keel-plate));
}

/* The Dom and Forms hosts paint their own bench box in a light plate while
 * their status lines keep the rail ink, so the product gives those mounts the
 * rail background the ink expects — and the rail ink to the copy inside them,
 * exactly like the other rail workers. */
#keel-root #dom_root,
#keel-root #fx_form {
  background-color: var(--keel-rail);
}

#keel-root #dom_root h1,
#keel-root #dom_root h2,
#keel-root #dom_root h3,
#keel-root #fx_form h1,
#keel-root #fx_form h2,
#keel-root #fx_form h3 {
  color: var(--keel-rail-ink);
}

#keel-root #dom_root [data-keel-surface="body"],
#keel-root #dom_root [data-keel-surface="meta"],
#keel-root #dom_root span,
#keel-root #dom_root p,
#keel-root #fx_form [data-keel-surface="body"],
#keel-root #fx_form [data-keel-surface="meta"],
#keel-root #fx_form span,
#keel-root #fx_form p {
  color: var(--keel-rail-muted);
}

#keel-root [data-keel-surface="card"],
#keel-static-root [data-keel-surface="card"] {
  position: relative;
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  background-color: var(--keel-card);
  padding: 1.25rem 1.3rem;
  transition: border-color var(--keel-dur-2) var(--keel-ease),
    background-color var(--keel-dur-2) var(--keel-ease),
    box-shadow var(--keel-dur-3) var(--keel-ease),
    transform var(--keel-dur-3) var(--keel-ease);
}

#keel-root [data-keel-surface="card"][data-variant="lede"],
#keel-static-root [data-keel-surface="card"][data-variant="lede"] {
  padding: 1.35rem 1.4rem;
}

/* One lit edge per card: a hairline gradient that says a surface is raised
 * before the reader hovers anything. Painted, never structural. */
#keel-root [data-keel-surface="card"]::before,
#keel-static-root [data-keel-surface="card"]::before {
  content: "";
  position: absolute;
  inset: 0 14% auto 14%;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--keel-accent) 50%, transparent) 32%,
    color-mix(in srgb, var(--keel-accent-2) 46%, transparent) 68%,
    transparent
  );
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--keel-dur-2) var(--keel-ease);
}

#keel-root [data-keel-surface="card"]:hover::before,
#keel-static-root [data-keel-surface="card"]:hover::before {
  opacity: 1;
}

#keel-root [data-keel-surface="card"]:hover,
#keel-static-root [data-keel-surface="card"]:hover {
  border-color: color-mix(in srgb, var(--keel-accent) 34%, var(--keel-line-strong));
  background-color: var(--keel-elev-2);
  box-shadow: var(--keel-shadow-2);
  transform: translateY(-3px);
}

/* The first card in a three-up row is the page's feature shot: larger, with a
 * gradient edge so a reader sees where to start. */
#keel-root [data-keel-layout="row"] > [data-keel-surface="card"]:first-child,
#keel-root [data-keel-layout="wrap"] > [data-keel-surface="card"]:first-child,
#keel-static-root [data-keel-layout="row"] > [data-keel-surface="card"]:first-child,
#keel-static-root [data-keel-layout="wrap"] > [data-keel-surface="card"]:first-child {
  border-color: color-mix(in srgb, var(--keel-accent) 32%, var(--keel-line));
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--keel-accent) 8%, transparent),
    transparent 46%
  );
}

/* Host-provided status and receipt text: `fact-value`, async phase messages,
 * live regions, and the editor status line all sit on rail/elevation surfaces. */
#keel-root [data-keel-surface="async-pending"],
#keel-static-root [data-keel-surface="async-pending"],
#keel-root [data-keel-surface="async-empty"],
#keel-static-root [data-keel-surface="async-empty"],
#keel-root [data-keel-surface="async-error"],
#keel-static-root [data-keel-surface="async-error"],
#keel-root [data-keel-surface="async-ready"],
#keel-static-root [data-keel-surface="async-ready"],
#keel-root [data-keel-surface="load-status"],
#keel-static-root [data-keel-surface="load-status"],
#keel-root [data-keel-surface="status-pill"],
#keel-static-root [data-keel-surface="status-pill"] {
  color: var(--keel-rail-ink);
}

/* Fields are painted on the rail in both schemes, so their text follows. */
#keel-root [data-keel-surface="field"],
#keel-static-root [data-keel-surface="field"],
#keel-root textarea[data-keel-surface="field"] {
  color: #dbe7f8;
}

#keel-root [data-keel-surface="field"]::placeholder,
#keel-root textarea[data-keel-surface="field"]::placeholder {
  color: #9db0cc;
}

/* Table cells and the scrollable list header live on the rail too. */
#keel-root [data-keel-surface="table-head"],
#keel-static-root [data-keel-surface="table-head"],
#keel-root [data-keel-surface="table-cell"],
#keel-static-root [data-keel-surface="table-cell"] {
  color: var(--keel-rail-ink);
}

#keel-root [data-keel-surface="fact"],
#keel-static-root [data-keel-surface="fact"] {
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  background-color: var(--keel-elev-1);
  padding: 1rem 1.1rem;
}

#keel-root [data-keel-surface="fact-value"],
#keel-static-root [data-keel-surface="fact-value"] {
  color: var(--keel-ink);
  font-family: var(--keel-font-mono);
  font-size: 1.14rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

#keel-root [data-keel-surface="grid"],
#keel-static-root [data-keel-surface="grid"] {
  gap: 1.1rem;
}

/* ==========================================================================
 * 7. Actions, chips, receipts
 * ========================================================================== */
#keel-root [data-keel-surface^="btn-"],
#keel-static-root [data-keel-surface^="btn-"] {
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--keel-radius-pill);
  font-size: var(--keel-fs-small);
  font-weight: 650;
  padding: 0.68rem 1.25rem;
  text-decoration: none;
  transition: transform var(--keel-dur-2) var(--keel-ease),
    box-shadow var(--keel-dur-2) var(--keel-ease),
    background-color var(--keel-dur-2) var(--keel-ease),
    border-color var(--keel-dur-2) var(--keel-ease),
    color var(--keel-dur-2) var(--keel-ease);
}

#keel-root [data-keel-surface="btn-primary"],
#keel-static-root [data-keel-surface="btn-primary"] {
  border: 1px solid color-mix(in srgb, var(--keel-accent) 60%, transparent);
  background-color: var(--keel-accent);
  color: var(--keel-accent-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 22px 48px -24px color-mix(in srgb, var(--keel-accent) 100%, transparent);
}

#keel-root [data-keel-surface="btn-primary"]:hover,
#keel-static-root [data-keel-surface="btn-primary"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#keel-root[data-keel-surface="app-shell"] [data-keel-surface="btn-ghost"],
#keel-static-root[data-keel-ssr] [data-keel-surface="btn-ghost"] {
  border: 1px solid var(--keel-line-strong);
  background-color: color-mix(in srgb, var(--keel-ink) 4%, transparent);
  color: var(--keel-ink) !important;
}

/* …and inside a dark-always rail surface, where the page ink is unreadable. */
#keel-root [data-keel-surface="theater"] [data-keel-surface="btn-ghost"],
#keel-static-root [data-keel-surface="theater"] [data-keel-surface="btn-ghost"],
#keel-root [data-keel-surface="figure"] [data-keel-surface="btn-ghost"],
#keel-static-root [data-keel-surface="figure"] [data-keel-surface="btn-ghost"],
#keel-root [data-keel-surface="pane"] [data-keel-surface="btn-ghost"],
#keel-static-root [data-keel-surface="pane"] [data-keel-surface="btn-ghost"] {
  border-color: color-mix(in srgb, var(--keel-rail-ink) 34%, transparent);
  background-color: color-mix(in srgb, var(--keel-rail-ink) 10%, transparent);
  color: var(--keel-rail-ink) !important;
}

#keel-root[data-keel-surface="app-shell"] [data-keel-surface="btn-ghost"]:hover,
#keel-static-root[data-keel-ssr] [data-keel-surface="btn-ghost"]:hover {
  border-color: color-mix(in srgb, var(--keel-accent) 45%, var(--keel-line-strong));
  background-color: color-mix(in srgb, var(--keel-accent) 12%, transparent);
  transform: translateY(-1px);
}

#keel-root a,
#keel-static-root a {
  color: var(--keel-accent);
  text-decoration-color: color-mix(in srgb, var(--keel-accent) 42%, transparent);
  text-underline-offset: 3px;
  transition: color var(--keel-dur-1) var(--keel-ease);
}

#keel-root a:hover,
#keel-static-root a:hover {
  color: color-mix(in srgb, var(--keel-accent) 78%, var(--keel-ink));
}

#keel-root [data-keel-surface="chip"],
#keel-static-root [data-keel-surface="chip"] {
  align-items: center;
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, var(--keel-accent) 32%, transparent);
  border-radius: var(--keel-radius-pill);
  background-color: color-mix(in srgb, var(--keel-accent) 12%, var(--keel-elev-1));
  color: color-mix(in srgb, var(--keel-accent) 55%, var(--keel-ink)) !important;
  font-family: var(--keel-font-mono);
  font-size: 0.73rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  padding: 0.32rem 0.75rem;
  text-transform: uppercase;
}

#keel-root [data-keel-surface="status-pill"],
#keel-static-root [data-keel-surface="status-pill"] {
  border: 1px solid var(--keel-line-strong);
  border-radius: var(--keel-radius-pill);
  background-color: var(--keel-elev-2);
  color: var(--keel-ink);
  font-size: 0.78rem;
  font-weight: 620;
  padding: 0.26rem 0.65rem;
}

#keel-root [data-keel-surface="metric"],
#keel-static-root [data-keel-surface="metric"],
#keel-root [data-keel-surface="benchmark-row"],
#keel-static-root [data-keel-surface="benchmark-row"] {
  border: 1px solid var(--keel-line);
  border-left: 3px solid color-mix(in srgb, var(--keel-accent) 62%, transparent);
  border-radius: var(--keel-radius-sm);
  background-color: var(--keel-elev-1);
  padding: 0.8rem 1rem;
}

#keel-root [data-keel-surface="metric-value"],
#keel-static-root [data-keel-surface="metric-value"] {
  color: var(--keel-ink);
  font-family: var(--keel-font-mono);
  font-size: 1.16rem;
  font-variant-numeric: tabular-nums;
  font-weight: 640;
  letter-spacing: -0.01em;
}

#keel-root [data-keel-surface="proof-strip"],
#keel-static-root [data-keel-surface="proof-strip"] {
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  background-color: var(--keel-elev-1);
  padding: 0.9rem 1.05rem;
}

/* ==========================================================================
 * 8. Code
 * ========================================================================== */
#keel-root [data-keel-surface="code-rail"],
#keel-static-root [data-keel-surface="code-rail"] {
  border: 1px solid var(--keel-line);
  border-left: 3px solid color-mix(in srgb, var(--keel-accent-3) 55%, transparent);
  border-radius: var(--keel-radius-sm);
  background-color: var(--keel-rail);
  color: #d5e3f8;
  display: block;
  font-family: var(--keel-font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  padding: 0.9rem 1rem;
  white-space: pre-wrap;
}

#keel-root [data-keel-surface="code-rail"] a,
#keel-static-root [data-keel-surface="code-rail"] a {
  color: #a9dcff;
}

#keel-root code,
#keel-static-root code,
#keel-root kbd,
#keel-static-root kbd {
  border: 1px solid var(--keel-line);
  border-radius: 6px;
  background-color: var(--keel-elev-2);
  color: var(--keel-ink);
  font-family: var(--keel-font-mono);
  font-size: 0.88em;
  padding: 0.14em 0.4em;
}

/* ==========================================================================
 * 9. Tables
 * ========================================================================== */
#keel-root table,
#keel-static-root table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  width: 100%;
}

#keel-root th,
#keel-static-root th {
  border-bottom: 1px solid var(--keel-line-strong);
  /* `th` is engine-generated with no surface role of its own, and in this
   * product it always sits on the rail heading of a matrix table. */
  color: var(--keel-rail-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.65rem 0.8rem;
  text-align: left;
  text-transform: uppercase;
}

#keel-root td,
#keel-static-root td {
  border-bottom: 1px solid var(--keel-line);
  color: var(--keel-muted);
  padding: 0.72rem 0.8rem;
  vertical-align: top;
}

#keel-root tbody tr:hover td,
#keel-static-root tbody tr:hover td {
  background-color: var(--keel-elev-1);
}

/* ==========================================================================
 * 10. Fields, dialogs, disclosures
 * ========================================================================== */
#keel-root [data-keel-surface="field"],
#keel-static-root [data-keel-surface="field"],
#keel-root textarea[data-keel-surface="field"] {
  border: 1px solid var(--keel-line-strong);
  border-radius: var(--keel-radius-sm);
  background-color: var(--keel-rail);
  color: var(--keel-ink);
  font-family: var(--keel-font);
  font-size: 0.97rem;
  padding: 0.68rem 0.85rem;
}

#keel-root [data-keel-surface="field"]::placeholder,
#keel-root textarea[data-keel-surface="field"]::placeholder {
  color: var(--keel-faint);
}

#keel-root [data-keel-surface="field-invalid"],
#keel-static-root [data-keel-surface="field-invalid"],
#keel-root textarea[data-keel-surface="field-invalid"] {
  border-color: color-mix(in srgb, var(--keel-danger) 70%, transparent);
  background-color: color-mix(in srgb, var(--keel-danger) 10%, var(--keel-rail));
}

#keel-root [data-keel-surface="field-pending"],
#keel-root [aria-busy="true"][data-keel-surface^="field"] {
  border-color: color-mix(in srgb, var(--keel-warn) 60%, transparent);
}

#keel-root [data-keel-surface="dialog"],
#keel-static-root [data-keel-surface="dialog"] {
  border: 1px solid var(--keel-line-strong);
  border-radius: var(--keel-radius);
  background-color: var(--keel-elev-2);
  box-shadow: var(--keel-shadow-2);
  padding: 1.25rem 1.35rem;
}

#keel-root [data-keel-surface="async-ready"],
#keel-static-root [data-keel-surface="async-ready"] {
  border-color: color-mix(in srgb, var(--keel-success) 40%, transparent);
}

#keel-root [data-keel-surface="async-error"],
#keel-static-root [data-keel-surface="async-error"] {
  border-color: color-mix(in srgb, var(--keel-danger) 50%, transparent);
}

#keel-root details,
#keel-static-root details {
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  background-color: var(--keel-elev-1);
  padding: 0.95rem 1.1rem;
}

#keel-root details + details,
#keel-static-root details + details {
  margin-top: 0.65rem;
}

#keel-root summary,
#keel-static-root summary {
  color: var(--keel-ink);
  cursor: pointer;
  font-weight: 640;
}

#keel-root details[open] summary,
#keel-static-root details[open] summary {
  color: var(--keel-accent);
}

/* ==========================================================================
 * 11. Footer
 * ========================================================================== */
#keel-root [data-keel-surface="foot"],
#keel-static-root [data-keel-surface="foot"] {
  position: relative;
  color: var(--keel-faint);
  font-size: var(--keel-fs-small);
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  gap: 0.9rem;
}

/* The divider is a gradient hairline, matching the hero's edge: the same brand
 * light closes the page it opens. */
#keel-root [data-keel-surface="foot"]::before,
#keel-static-root [data-keel-surface="foot"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--keel-accent) 42%, transparent) 16%,
    color-mix(in srgb, var(--keel-accent-2) 38%, transparent) 58%,
    transparent
  );
  opacity: 0.85;
}

#keel-root [data-keel-surface="foot"] [data-keel-surface="nav-link"],
#keel-static-root [data-keel-surface="foot"] [data-keel-surface="nav-link"] {
  color: var(--keel-muted) !important;
}

/* ==========================================================================
 * 12. Console workbench (product variants of engine roles)
 * ========================================================================== */
#keel-root [data-keel-surface="panel"][data-variant="console-side"],
#keel-static-root [data-keel-surface="panel"][data-variant="console-side"] {
  border-radius: var(--keel-radius);
  background-color: var(--keel-elev-1);
}

#keel-root [data-keel-surface="panel"][data-variant="console-toolbar"],
#keel-static-root [data-keel-surface="panel"][data-variant="console-toolbar"] {
  border-radius: var(--keel-radius);
  background-color: var(--keel-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.75rem 0.95rem;
}

#keel-root [data-keel-surface="band"][data-variant="workbench-head"],
#keel-static-root [data-keel-surface="band"][data-variant="workbench-head"] {
  position: relative;
  z-index: 0;
  border-radius: var(--keel-radius-lg);
  background-color: var(--keel-plate);
  overflow: hidden;
}

#keel-root [data-keel-surface="band"][data-variant="workbench-head"]::before,
#keel-static-root [data-keel-surface="band"][data-variant="workbench-head"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    760px 320px at 0% -20%,
    color-mix(in srgb, var(--keel-accent-2) 20%, transparent),
    transparent 62%
  );
}

#keel-root [data-keel-surface="metric"][data-variant="receipt"],
#keel-static-root [data-keel-surface="metric"][data-variant="receipt"] {
  border-left-color: color-mix(in srgb, var(--keel-accent-2) 65%, transparent);
  background-color: color-mix(in srgb, var(--keel-accent-2) 6%, var(--keel-elev-1));
}

#keel-root [data-keel-surface="card"][data-variant="session"],
#keel-static-root [data-keel-surface="card"][data-variant="session"] {
  border-color: color-mix(in srgb, var(--keel-accent) 30%, var(--keel-line));
  background-color: color-mix(in srgb, var(--keel-accent) 7%, var(--keel-card));
}

/* The engine's document editor paints its own DOM inside the mount it declares
 * as `data-keel-surface="playground"`. The product paints that surface. */
#keel-root [data-keel-surface="playground"] #pg-toolbar,
#keel-static-root [data-keel-surface="playground"] #pg-toolbar {
  padding: 0.35rem 0;
}

#keel-root [data-keel-surface="playground"] #pg-toolbar button,
#keel-static-root [data-keel-surface="playground"] #pg-toolbar button,
#keel-root #list_toolbar button,
#keel-root #load_toolbar button,
#keel-root #form_toolbar button,
#keel-root #fx_form button,
#keel-static-root #list_toolbar button,
#keel-static-root #load_toolbar button,
#keel-static-root #fx_form button {
  min-height: 44px;
  border: 1px solid var(--keel-line-strong);
  border-radius: var(--keel-radius-pill);
  /* The host toolbars live on the rail mount, so their chips are rail chips:
   * light ink on a dark chip in both colour schemes. */
  background-color: color-mix(in srgb, var(--keel-rail) 78%, var(--keel-plate));
  color: var(--keel-rail-ink);
  font-family: var(--keel-font);
  font-size: 0.83rem;
  font-weight: 560;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: background-color var(--keel-dur-2) var(--keel-ease),
    border-color var(--keel-dur-2) var(--keel-ease);
}

#keel-root [data-keel-surface="playground"] #pg-toolbar button:hover,
#keel-static-root [data-keel-surface="playground"] #pg-toolbar button:hover,
#keel-root #list_toolbar button:hover,
#keel-root #load_toolbar button:hover,
#keel-root #form_toolbar button:hover,
#keel-root #fx_form button:hover {
  border-color: color-mix(in srgb, var(--keel-accent) 50%, var(--keel-line-strong));
  background-color: color-mix(in srgb, var(--keel-rail) 60%, var(--keel-accent));
  color: var(--keel-rail-ink);
}

#keel-root [data-keel-surface="playground"] #pg-status,
#keel-static-root [data-keel-surface="playground"] #pg-status {
  color: var(--keel-muted);
  font-family: var(--keel-font-mono);
  font-size: 0.85rem;
}

/* The two columns *are* rail workers, so the strip they share is painted as a
 * rail: the host-written labels inside them then have a dark canvas. */
#keel-root [data-keel-surface="playground"] #pg-source-label,
#keel-root [data-keel-surface="playground"] #pg-wysiwyg-label,
#keel-root [data-keel-surface="playground"] #pg-source-col,
#keel-root [data-keel-surface="playground"] #pg-source-col [data-keel-surface="meta"],
#keel-root [data-keel-surface="playground"] #pg-wysiwyg-col,
#keel-root [data-keel-surface="playground"] #pg-wysiwyg-col [data-keel-surface="meta"] {
  color: var(--keel-rail-muted) !important;
}

#keel-root [data-keel-surface="playground"] #pg-source-col,
#keel-static-root [data-keel-surface="playground"] #pg-source-col,
#keel-root [data-keel-surface="playground"] #pg-wysiwyg-col,
#keel-static-root [data-keel-surface="playground"] #pg-wysiwyg-col {
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
  background-color: var(--keel-rail);
  padding: 0.8rem 0.9rem;
}

/* ==========================================================================
 * 12b. Console session receipt — the console's own evidence panel
 * ========================================================================== */
#keel-root [data-keel-console-receipt] {
  display: block;
}

/* The mount is a rail pane, because the host writes it after the page paints and
 * its rows are key/value readings, not prose. */
#keel-root #console_session_receipt_mount {
  background-color: color-mix(in srgb, var(--keel-rail) 90%, var(--keel-plate));
  border: 1px solid var(--keel-line-strong);
  border-left: 3px solid color-mix(in srgb, var(--keel-accent-3) 60%, transparent);
}

#keel-root .console-receipt-table {
  display: grid;
  gap: 0.1rem;
}

#keel-root .console-receipt-row {
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--keel-rail-ink) 12%, transparent);
  display: grid;
  gap: 0.4rem 1rem;
  grid-template-columns: minmax(8rem, 0.5fr) minmax(0, 1fr);
  padding: 0.5rem 0;
}

#keel-root .console-receipt-row:last-child {
  border-bottom: none;
}

#keel-root .console-receipt-label {
  color: var(--keel-rail-muted);
  font-size: var(--keel-fs-small);
}

#keel-root .console-receipt-value {
  color: var(--keel-rail-ink);
  font-family: var(--keel-font-mono);
  font-size: var(--keel-fs-small);
  overflow-wrap: anywhere;
}

#keel-root .console-receipt-note {
  color: var(--keel-rail-muted);
  font-size: var(--keel-fs-small);
  margin: 0.7rem 0 0;
  max-width: none;
}

/* ==========================================================================
 * 13. Motion
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  #keel-root [data-keel-surface="panel"],
  #keel-root [data-keel-surface="band"],
  #keel-root [data-keel-surface="hero"] {
    transition: border-color var(--keel-dur-2) var(--keel-ease),
      box-shadow var(--keel-dur-3) var(--keel-ease);
  }

  /* The hero arrives in reading order: each child rises into place on its own
   * beat, and the field behind it drifts. Both end at the resting state, so a
   * reader never lands on a hidden node (the rule the reveal below learned). */
  #keel-root [data-keel-surface="hero"] > *,
  #keel-static-root [data-keel-surface="hero"] > * {
    animation: keel-enter 560ms var(--keel-ease) both;
  }

  #keel-root [data-keel-surface="hero"] > :nth-child(2),
  #keel-static-root [data-keel-surface="hero"] > :nth-child(2) {
    animation-delay: 70ms;
  }

  #keel-root [data-keel-surface="hero"] > :nth-child(3),
  #keel-static-root [data-keel-surface="hero"] > :nth-child(3) {
    animation-delay: 130ms;
  }

  #keel-root [data-keel-surface="hero"] > :nth-child(4),
  #keel-static-root [data-keel-surface="hero"] > :nth-child(4) {
    animation-delay: 190ms;
  }

  #keel-root [data-keel-surface="hero"] > :nth-child(5),
  #keel-static-root [data-keel-surface="hero"] > :nth-child(5) {
    animation-delay: 250ms;
  }

  #keel-root [data-keel-surface="hero"] > :nth-child(n + 6),
  #keel-static-root [data-keel-surface="hero"] > :nth-child(n + 6) {
    animation-delay: 310ms;
  }

  #keel-root [data-keel-surface="hero"]::before,
  #keel-static-root [data-keel-surface="hero"]::before {
    animation: keel-hero-drift 30s ease-in-out infinite alternate;
  }

  /* Reveal on scroll: the composition's own sections rise into place as a
   * reader moves down the page.
   *
   * The reveal moves *position only*. An earlier revision also animated
   * `opacity` from 0, which meant any card still in the entry band rested at
   * `opacity: 0`: on a short viewport a reader could land on a band whose cards
   * were effectively invisible until they scrolled, and axe read the same
   * near-zero composite as a contrast failure. Moving the card costs nothing and
   * has no resting state that hides content. */
  @supports (animation-timeline: view()) {
    #keel-root [data-keel-surface="hero"] [data-keel-surface="card"],
    #keel-root [data-keel-surface="band"] [data-keel-surface="card"],
    #keel-root [data-keel-surface="band"] [data-keel-surface="metric"] {
      animation: keel-rise 480ms var(--keel-ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 46%;
    }
  }
}

@keyframes keel-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes keel-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes keel-hero-drift {
  from {
    transform: translate3d(-1.4%, -1%, 0) scale(1.03);
  }
  to {
    transform: translate3d(1.4%, 1%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* v6 P4: this block used to reset the whole canvas with
   * `* { animation-duration: 0.001ms !important; ... }`. Three facts make the
   * blanket reset unnecessary, and each is checkable in this file:
   *
   * 1. every animation in this file is declared inside
   *    `@media (prefers-reduced-motion: no-preference)` (section 13), so no
   *    product keyframe runs under `reduce` at all — an `animation-*` reset
   *    cannot observe anything;
   * 2. engine-declared motion is the engine's policy, not this file's (v6 brief
   *    section 6): the engine's own reduced-motion guard shortens a declared
   *    motion to `none` at `0s` (kit.rs, `workbench_panel_surface`);
   * 3. `scroll-behavior` is declared nowhere in this product, so resetting it
   *    was dead law.
   *
   * What is left is the product's own transitions. They are named below (the
   * same selectors the base rules use, so equal specificity and later source
   * order win) instead of being overridden with `!important`. */
  #keel-root [data-keel-surface="nav-link"],
  #keel-static-root [data-keel-surface="nav-link"],
  #keel-root [data-keel-surface="card"],
  #keel-static-root [data-keel-surface="card"],
  #keel-root [data-keel-surface="card"]::before,
  #keel-static-root [data-keel-surface="card"]::before,
  #keel-root [data-keel-surface^="btn-"],
  #keel-static-root [data-keel-surface^="btn-"],
  #keel-root a,
  #keel-static-root a,
  #keel-root [data-keel-surface="playground"] #pg-toolbar button,
  #keel-static-root [data-keel-surface="playground"] #pg-toolbar button,
  #keel-root #list_toolbar button,
  #keel-root #load_toolbar button,
  #keel-root #form_toolbar button,
  #keel-root #fx_form button,
  #keel-static-root #list_toolbar button,
  #keel-static-root #load_toolbar button,
  #keel-static-root #fx_form button {
    transition: none;
  }

  #keel-root [data-keel-surface="card"]:hover,
  #keel-root [data-keel-surface^="btn-"]:hover {
    transform: none;
  }
}

/* ==========================================================================
 * 14. Responsive and contrast preferences
 * ========================================================================== */
@media (max-width: 640px) {
  #keel-root [data-keel-surface="hero"],
  #keel-static-root [data-keel-surface="hero"] {
    padding: 1.5rem 1.25rem;
  }

  /* Phone chrome: the nav wraps instead of scrolling, so nothing is clipped,
   * nothing scrolls sideways, and no item shrinks under its neighbour. */
  #keel-root [data-keel-surface="nav"] {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    overflow: visible;
    padding-bottom: 0.55rem;
  }

  #keel-root [data-keel-surface="nav"] #nav_spacer {
    display: none;
  }

  #keel-root [data-keel-surface="nav"] #brand,
  #keel-root [data-keel-surface="nav-link"],
  #keel-root [data-keel-surface="nav-link-active"],
  #keel-root [data-keel-surface="nav-cta"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #keel-root [data-keel-surface="band"],
  #keel-static-root [data-keel-surface="band"],
  #keel-root [data-keel-surface="panel"],
  #keel-static-root [data-keel-surface="panel"],
  #keel-root [data-keel-surface="theater"],
  #keel-static-root [data-keel-surface="theater"] {
    padding: 1.15rem 1.1rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --keel-muted: #c6d2e8;
    --keel-faint: #a6b3cb;
    --keel-line: rgba(182, 206, 246, 0.36);
    --keel-line-strong: rgba(200, 220, 250, 0.5);
  }
}

@media print {
  body,
  #keel-root {
    background-color: #ffffff;
    color: #0b1220;
  }
}