/* Ursly brand tokens — single source of truth.
   Circuit-letter identity chosen October 12, 2026: deep navy ground, cool white
   ink and one Ursly teal signal; Sora headlines, Inter text, IBM Plex Mono data.
   The retired "Abyss / Eosin" names survive only in the archived
   brand/BRAND.md and brand/brand.html; Glacier remains the "cyan" key.
   Natural skin, hair, steel, blood and physical light-colour tokens are explicit
   exceptions to the historical hue restriction; they represent physical materials
   and lamps, never UI accents.
   Every Ursly surface (site, brand system, product UI) copies this block verbatim. */

@font-face {
  font-family: "Ursly Inter";
  src: url("./fonts/Inter-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* Brand type, served locally (OFL 1.1, brand/fonts/brand-fonts.json). */
@font-face {
  font-family: "Sora";
  src: url("./fonts/sora-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  src: url("./fonts/sora-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  src: url("./fonts/sora-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Legacy geometry hosts retain their original animation budget. */
  --es-header-mark-period: 24s;
  --es-header-mark-dpr: 1.5;
  --es-header-mark-load-timeout: 8s;

  /* Entry splash, "U is you" (owner decision, October 13, 2026), grown in the
     owner's nature direction the same day. Growth rings spread from a teal node
     that stands for the person, mycelium creeps in from the edges, six sense
     roots grow into the open top of the U, the U draws around the person, R S
     L Y rise 8px 90ms apart as their traces light pad to pad, then the tagline
     lands one "Your" at a time and the mark hands off to the header.
     Times are seconds on one clock: the CSS reads them directly and the JS
     phase machine keeps matching fallbacks, so the two never drift apart. */
  --es-entry-substrate-delay: 0;
  --es-entry-substrate-duration: 0.6;
  --es-entry-ring-delay: 0.05;
  --es-entry-ring-step: 0.022;
  --es-entry-ring-duration: 0.5;
  --es-entry-hypha-delay: 0;
  --es-entry-hypha-step: 0.3;
  --es-entry-hypha-duration: 0.9;
  --es-entry-you-delay: 0.15;
  --es-entry-you-duration: 0.5;
  --es-entry-route-delay: 0.3;
  --es-entry-route-step: 0.07;
  --es-entry-route-duration: 0.8;
  --es-entry-rootlet-duration: 0.3;
  --es-entry-u-delay: 0.7;
  --es-entry-u-duration: 0.65;
  --es-entry-letter-delay: 1.25;
  --es-entry-letter-step: 0.09;
  --es-entry-letter-duration: 0.42;
  --es-entry-trace-delay: 1.35;
  --es-entry-trace-step: 0.09;
  --es-entry-trace-duration: 0.36;
  --es-entry-gleam-delay: 1.9;
  --es-entry-gleam-duration: 0.7;
  --es-entry-line-delay: 1.95;
  --es-entry-line-step: 0.2;
  --es-entry-line-duration: 0.45;
  --es-entry-assembly-seconds: 2.8;
  --es-entry-settle-seconds: 0.9;
  --es-entry-fade-seconds: 0.9;
  /* Longest the finished splash waits for the room before it leaves. */
  --es-entry-hold-seconds: 1.2;
  --es-entry-reduced-settle-seconds: 0.18;
  --es-entry-reduced-fade-seconds: 0.18;
  /* Letters rise this far, per the brand book's entrance. */
  --es-entry-rise: 8px;

  /* The ground. Loam clouds, growth rings, hyphae and a little grain: texture
     at 7-16% ink that stays out of the middle, where the light comes from the
     letters. Every fifth ring is a darker latewood line. */
  --es-entry-loam-ink: 0.08;
  --es-entry-loam-tile: 480px;
  --es-entry-ring-ink: 0.1;
  --es-entry-late-ink: 0.16;
  --es-entry-hypha-ink: 0.14;
  --es-entry-route-rest-ink: 0.42;
  --es-entry-grain-ink: 0.07;
  --es-entry-mote-ink: 0.55;
  --es-entry-wave-seconds: 3.6;
  --es-entry-loam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --es-entry-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Lockup: the wordmark is sized by width (208px at 320, 34rem by about
     1800px, then 30vw within 90vh on larger screens), the tagline in the
     display voice, the motto and sense labels as data. Past 1800px each text
     keeps its ratio to the wordmark (64px, 32px and 28px to 544px). The
     flow room clears the motto's 2em interface flow after the lockup gap. */
  --es-entry-lockup-gap: var(--es-space-4);
  --es-entry-wordmark-width: clamp(13rem, 64vw, max(34rem, min(30vw, 90vh)));
  --es-entry-line-size: clamp(1.75rem, 3.6vw, max(4rem, min(3.53vw, 10.6vh)));
  --es-entry-motto-size: clamp(1.125rem, 1.75vw, max(2rem, min(1.76vw, 5.3vh)));
  --es-entry-label-size: clamp(1rem, 1.3vw, max(1.75rem, min(1.54vw, 4.63vh)));
  --es-entry-flow-room: calc(2em - var(--es-entry-lockup-gap));
  --es-entry-flow-room-landscape: calc(2em - 0.5rem);
  --es-entry-exit-label-clearance: 4rem;
  --es-entry-flow-duration: 0.42;
  --es-entry-flow-ink: 0.8;
  color-scheme: dark;
  /* Ground & ink */
  --es-ground: #040b16; /* deep navy */
  --es-surface: #0b1626;
  --es-surface-2: #13233a;
  --es-line: #1d3049;
  --es-ink: #eef4f7;
  --es-muted: #8ea3b5;
  /* Ursly teal: traces, pads, glow, primary action, focus. One per view. */
  --es-pore: #5fd4d0;
  --es-pore-ink: #040b16;
  /* Product hues: Voice teal, Motion, Smell, Taste, Sight, Touch */
  --es-smell: #a78bfa;
  --es-taste: #f472b6;
  --es-view: #fbbf24;
  --es-move: #60a5fa;
  --es-touch: #fb923c;
  --es-hear: #5fd4d0;
  /* Consent states (semantic, never decorative) */
  --es-private: #8ea3b5;
  --es-summary: #a78bfa; /* violet */
  --es-open: #4ade80; /* green */
  /* Iridescence: the six senses fused, used on the mark and key rules only */
  --es-iris: conic-gradient(
    from 200deg,
    var(--es-taste),
    var(--es-smell),
    var(--es-view),
    var(--es-move),
    var(--es-hear),
    var(--es-touch),
    var(--es-taste)
  );
  /* The same spectrum laid out lengthwise, for a hairline, so the senses read
     as one sequence along the line instead of a colour split across it. */
  --es-iris-line: linear-gradient(
    110deg,
    var(--es-taste),
    var(--es-smell),
    var(--es-view),
    var(--es-move),
    var(--es-hear),
    var(--es-touch),
    var(--es-taste)
  );

  /* Specimen light (decorative) */
  --es-abyss: #02060d; /* canvas clear colour, vignette floor */
  --es-ground-lift: #0b2a3a;
  --es-pore-hi: #c9f5f3;
  --es-pore-deep: #1f8f8b;
  --es-pearl: #fff4fc; /* specular dot on the Sense pearl */
  --es-glow: color-mix(in oklab, var(--es-pore) 42%, transparent);
  --es-glow-soft: color-mix(in oklab, var(--es-pore) 14%, transparent);
  --es-corona: color-mix(in oklab, var(--es-pore-deep) 22%, transparent);
  --es-glass: color-mix(in oklab, var(--es-surface) 70%, transparent);
  --es-glass-line: color-mix(in oklab, var(--es-ink) 10%, transparent);
  /* fMRI / deep-scan ramp (monotonic OKLab L) */
  --es-heat-0: var(--es-ground);
  --es-heat-1: #13233a;
  --es-heat-2: #1f6f8b;
  --es-heat-3: var(--es-pore);
  --es-heat-4: var(--es-pore-hi);
  --es-heat-5: #fef3fa;
  --es-heat: linear-gradient(
    90deg in oklab,
    var(--es-heat-1),
    var(--es-heat-2),
    var(--es-heat-3),
    var(--es-heat-4),
    var(--es-heat-5)
  );
  /* Runtime knobs, read by hero JS via getComputedStyle */
  --es-grain-opacity: 0.05;
  --es-grain-blend: overlay;
  --es-field-blend: lighter;
  --es-bloom-strength: 0.55;
  --es-copy-glow-max: 0.12;
  --es-orbit-period: 96s;
  --es-scan-period: 12s;
  --es-mark-spin: 40s;
  --es-zoom-dur: 3.4s;
  --es-protocol-stage: 3s;
  --es-ap-echo: 120ms;

  /* Type */
  /* Recovered v4 letter treatment, adapted to the public Ursly spelling. */
  --es-font-wordmark:
    "Ursly Inter", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --es-wordmark-weight: 800;
  --es-wordmark-tracking: -0.03em;
  --es-wordmark-features: "ss01" 1, "ss02" 1;
  --es-header-wordmark-size: clamp(1.35rem, 2vw, 1.65rem);
  --es-font-display: "Sora", "Inter", "Helvetica Neue", Arial, sans-serif;
  --es-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --es-font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* The circuit wordmark: artwork, never type. Below 96px, the icon. */
  --es-brand-wordmark-ratio: 276 / 114;
  --es-header-brand-height: 2.75rem;
  /* The header mark's pulse period (three on arrival, once more on hover). */
  --es-brand-pulse-seconds: 4.8;
  --es-text-small: 0.875rem;
  --es-text-body: 1rem;
  --es-line-body: 1.6;
  --es-bottom-clearance: 5.5rem;
  --es-step--1: var(--es-text-small);
  --es-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --es-step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --es-step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem);
  --es-step-3: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --es-step-4: clamp(2.8rem, 1.6rem + 6vw, 6.6rem);

  /* Space, radius, motion */
  --es-space-1: 0.25rem;
  --es-space-2: 0.5rem;
  --es-space-3: 1rem;
  --es-space-4: 1.5rem;
  --es-space-5: 2.5rem;
  --es-space-6: 4rem;
  --es-space-7: 7rem;
  --es-radius-s: 6px;
  --es-radius-m: 14px;
  --es-radius-pill: 999px;
  --es-ease-breath: cubic-bezier(
    0.37,
    0,
    0.18,
    1
  ); /* slow inhale, soft exhale */
  --es-dur-pulse: 4.2s; /* one resting breath */
  --es-dur-ui: 240ms;
}

@supports (background: conic-gradient(in oklab, red, blue)) {
  :root {
    --es-iris: conic-gradient(
      from 200deg in oklab,
      var(--es-taste),
      var(--es-smell),
      var(--es-view),
      var(--es-move),
      var(--es-hear),
      var(--es-touch),
      var(--es-taste)
    );
  }
}
@supports not (background: linear-gradient(in oklab, red, blue)) {
  :root {
    --es-heat: linear-gradient(
      90deg,
      var(--es-heat-1),
      var(--es-heat-2),
      var(--es-heat-3),
      var(--es-heat-4),
      var(--es-heat-5)
    );
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --es-ground: #f3f7f9;
    --es-surface: #ffffff;
    --es-surface-2: #e6eef2;
    --es-line: #cfdae3;
    --es-ink: #0b1626;
    --es-muted: #4a5d70;
    --es-pore: #0f7471;
    --es-pore-ink: #ffffff;
    --es-smell: #6d28d9;
    --es-taste: #be185d;
    --es-view: #8a5300;
    --es-move: #1d4ed8;
    --es-touch: #b93d0b;
    --es-hear: #0f7471;
    --es-private: #4a5d70;
    --es-summary: #6d28d9;
    --es-open: #15803d;
    --es-abyss: #e6eef2;
    --es-ground-lift: #d6efee;
    --es-pore-hi: #2bb3ae;
    --es-pore-deep: #0b5c5a;
    --es-pearl: #ffffff;
    --es-glow: color-mix(in oklab, var(--es-pore) 22%, transparent);
    --es-glow-soft: color-mix(in oklab, var(--es-pore) 8%, transparent);
    --es-corona: color-mix(in oklab, var(--es-ground-lift) 70%, transparent);
    --es-glass: color-mix(in oklab, var(--es-surface) 78%, transparent);
    --es-glass-line: color-mix(in oklab, var(--es-ink) 12%, transparent);
    --es-heat-0: var(--es-ground);
    --es-heat-1: #c9ecea;
    --es-heat-2: #5fb8d4;
    --es-heat-3: var(--es-pore);
    --es-heat-4: #1d4ed8;
    --es-heat-5: var(--es-ink);
    --es-grain-opacity: 0.025;
    --es-grain-blend: multiply;
    --es-field-blend: source-over;
    --es-bloom-strength: 0;
    --es-copy-glow-max: 0.08;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --es-ground: #f3f7f9;
  --es-surface: #ffffff;
  --es-surface-2: #e6eef2;
  --es-line: #cfdae3;
  --es-ink: #0b1626;
  --es-muted: #4a5d70;
  --es-pore: #0f7471;
  --es-pore-ink: #ffffff;
  --es-smell: #6d28d9;
  --es-taste: #be185d;
  --es-view: #8a5300;
  --es-move: #1d4ed8;
  --es-touch: #b93d0b;
  --es-hear: #0f7471;
  --es-private: #4a5d70;
  --es-summary: #6d28d9;
  --es-open: #15803d;
  --es-abyss: #e6eef2;
  --es-ground-lift: #d6efee;
  --es-pore-hi: #2bb3ae;
  --es-pore-deep: #0b5c5a;
  --es-pearl: #ffffff;
  --es-glow: color-mix(in oklab, var(--es-pore) 22%, transparent);
  --es-glow-soft: color-mix(in oklab, var(--es-pore) 8%, transparent);
  --es-corona: color-mix(in oklab, var(--es-ground-lift) 70%, transparent);
  --es-glass: color-mix(in oklab, var(--es-surface) 78%, transparent);
  --es-glass-line: color-mix(in oklab, var(--es-ink) 12%, transparent);
  --es-heat-0: var(--es-ground);
  --es-heat-1: #c9ecea;
  --es-heat-2: #5fb8d4;
  --es-heat-3: var(--es-pore);
  --es-heat-4: #1d4ed8;
  --es-heat-5: var(--es-ink);
  --es-grain-opacity: 0.025;
  --es-grain-blend: multiply;
  --es-field-blend: source-over;
  --es-bloom-strength: 0;
  --es-copy-glow-max: 0.08;
}

::selection {
  background: var(--es-pore);
  color: var(--es-pore-ink);
}

/* Clinical material palette: physical rendering, not interface highlights. */
:root {
  --es-skin: #cda38d;
  --es-skin-shadow: #8b6254;
  --es-steel: #a6adb8;
  --es-bed: #d9dce1;
  --es-blood: #790b25;
  --es-blood-hi: #d82a46;
  --es-enamel: #f2ece0;
  --es-tongue: #b4505f;
  --es-mouth-cavity: #2b0c14;
  --es-circuit: var(--es-pore);
  --es-panel: color-mix(in srgb, var(--es-ground) 95%, transparent);
}
:root[data-theme="light"] {
  --es-ground: #f3f7f9;
  --es-surface: #ffffff;
  --es-surface-2: #e6eef2;
  --es-line: #cfdae3;
  --es-ink: #0b1626;
  --es-muted: #4a5d70;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --es-ground: #f3f7f9;
    --es-surface: #ffffff;
    --es-surface-2: #e6eef2;
    --es-line: #cfdae3;
    --es-ink: #0b1626;
    --es-muted: #4a5d70;
  }
}

/* Physical material aliases: neutral light, structural metal, neural indicator. */
:root {
  --es-clinical: var(--es-bed);
  /* Physical light colours (material exception): warm key, cool fill, rear kicker. */
  --es-light-key: #fff2e6;
  --es-light-fill: #d9e5ff;
  --es-light-kicker: #eaf1ff;
  --es-shadow-map: 2048;
  --es-dark-metal: #202630;
  --es-coolant: var(--es-circuit);
}

/* Guided room journey: consumed by scene configuration, never fixed in UI code. */
:root {
  --es-room-orbit-period: 150s;
  --es-focus-arc-angle: 0.07;
  --es-focus-arc-period: 32s;
  --es-focus-hear-distance: 1.2;
  --es-focus-hear-duration: 2.8s;
  --es-focus-hear-arc-angle: 0.055;
  --es-focus-hear-arc-period: 26s;
  --es-focus-move-distance: 1.8;
  --es-focus-move-duration: 3.2s;
  --es-focus-move-arc-angle: 0.1;
  --es-focus-move-arc-period: 24s;
  --es-focus-smell-distance: 1.3;
  --es-focus-smell-duration: 3.6s;
  --es-focus-smell-arc-angle: 0.08;
  --es-focus-smell-arc-period: 34s;
  --es-focus-taste-distance: 1.2;
  --es-focus-taste-duration: 3.1s;
  --es-focus-taste-arc-angle: 0.065;
  --es-focus-taste-arc-period: 30s;
  --es-focus-view-distance: 1.2;
  --es-focus-view-duration: 2.7s;
  --es-focus-view-arc-angle: 0.09;
  --es-focus-view-arc-period: 28s;
  --es-focus-touch-distance: 1.4;
  --es-focus-touch-duration: 3.3s;
  --es-focus-touch-arc-angle: 0.06;
  --es-focus-touch-arc-period: 22s;
  --es-support-transition: 0.8s;
  --es-support-recede: 0.1;
  --es-human-motion-period: 4.8;
  --es-human-pose-response: 0.35;
  /* Desktop overview hero: minimum distance, frame fraction and elevation (rad). */
  --es-hero-distance: 3;
  --es-hero-fraction: 0.62;
  --es-hero-fraction-y: 0.95;
  --es-hero-elevation: 0.6;
  --es-chapter-hold: 11s;
  --es-intro-hold: 6s;
  --es-portal-eye-diameter: 5.5rem;
  --es-portal-eye-cutout: 25%;
  --es-section-preview-hold: 500ms;
  --es-section-preview-movement: 12px;
  --es-section-preview-layer: 130;
  --es-telemetry-period: 3.2s;
  --es-telemetry-clearance: 8px;
  --es-platform-tint: 12%;
  --es-platform-edge-tint: 40%;
  --es-voice-backdrop-tint: 60%;
  /* Modal copy stays readable independently of the moving room and palette.
     The shade stays dark in light mode so the outside room is dimmed. */
  --es-dialog-surface: var(--es-surface);
  --es-dialog-title-weight: 600;
  --es-dialog-control-surface: var(--es-surface-2);
  --es-dialog-edge: color-mix(in srgb, var(--es-ink) 24%, var(--es-surface));
  --es-dialog-shade: #03060c;
  --es-dialog-backdrop: color-mix(
    in srgb,
    var(--es-dialog-shade) var(--es-voice-backdrop-tint),
    transparent
  );
  --es-dialog-shadow: 0 1.25rem 4rem
    color-mix(in srgb, var(--es-dialog-shade) 32%, transparent);
  /* Focused readings float over the real room, never an opaque panel. The
     soft ground tint behind readings and chapter text keeps 4.5:1 over the
     brightest upholstery (WCAG 1.4.3); it stays translucent and feathered. */
  --es-mobile-metric-lane: 140px;
  --es-reading-softness: 1rem;
  --es-metric-tint: 78%;
  --es-reading-tint: 78%;
  /* The arrival copy needs no ground of its own over the dark room. */
  --es-overview-tint: 0%;
  --es-connector-opacity: 0.55;
  --es-display-weight: 600;
  --es-display-tracking: -0.025em;
  --es-header-mark-size: 1.65em;
}
/* The light themes keep the room's dark metal, so a 78% light tint over it
   left chapter text and readouts below 4.5:1 (WCAG 1.4.3). Their reading
   ground takes the --es-panel share instead: near-opaque, still feathered,
   and 4.5:1 for ink, muted and accent text even over a black room. The
   arrival copy takes it too where the floor reaches under it. */
:root[data-theme="light"] {
  --es-metric-tint: 95%;
  --es-reading-tint: 95%;
  --es-overview-tint: 95%;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --es-metric-tint: 95%;
    --es-reading-tint: 95%;
    --es-overview-tint: 95%;
  }
}

/* Texture multipliers: material controls preserve anatomical skin detail. */
:root {
  --es-skin-natural: #ffffff;
  --es-skin-sand: #edc5a6;
  --es-skin-honey: #dca06b;
  --es-skin-bronze: #b57e5a;
  --es-skin-umber: #926347;
  --es-skin-deep: #63463b;
  --es-render-dpr: 2.5;
  /* Software rasterizers (no GPU) keep the scene, at lighter internal cost. */
  --es-render-dpr-software: 1;
  --es-shadow-map-software: 1024;
  --es-pmrem-size-software: 64;
  /* Measured budget: target frame rate, and the lowest pixel scale its
     lighter tiers may use (1 keeps every renderer at native pixels). */
  --es-render-target-fps: 30;
  --es-render-scale-floor: 1;
  /* Idle frames before the room stops asking for animation frames. */
  --es-render-sleep-frames: 12;
}

:root {
  --es-human-roughness: 0.72;
  --es-human-normal-strength: 0.19;
  --es-human-clearcoat: 0.055;
  --es-human-specular: 0.34;
  --es-human-rim-strength: 0.045;
  /* Illustrative resting breath: ~3mm chest, ~2.6mm belly, one per
     --es-dur-pulse (rate = 2π / 4.2 s), with a still dwell after each exhale
     (share of the cycle, 0 to 0.4). The pose eases to rest over rest-response. */
  --es-human-breath-amplitude: 0.0032;
  --es-human-belly-amplitude: 0.0026;
  --es-human-breath-rate: 1.496;
  --es-human-breath-dwell: 0.14;
  --es-human-rest-response: 0.5;
  --es-skin-rim: #ffd2b5;
  --es-field-radius: 0.065;
  --es-field-height: 0.11;
}

/* Fine material detail and batched field quality. */
:root {
  --es-human-micro-repeat: 12;
  --es-human-micro-strength: 0.25;
  /* Detail texels per pixel at which skin relief has fully faded. */
  --es-human-micro-fade: 1.5;
  --es-human-eye-recess: 0.0008;
  /* Sight opens the eyes: opening and closing times, blink rhythm, and how
     deep the folded upper and lower lids sit (share of the lid's half-height). */
  --es-human-eye-open-seconds: 0.9;
  --es-human-eye-close-seconds: 0.5;
  --es-human-blink-period: 4.5;
  --es-human-blink-seconds: 0.25;
  --es-human-lid-fold: 0.06;
  --es-human-lid-lower-fold: 0.06;
  /* Illustrative close-range eye: iris colours from pupil to limbus, sizes in
     metres (4.1 mm pupil as the Sight signal states), collarette position as a
     share of the iris radius, and how white and how veined the sclera reads. */
  --es-human-iris-inner: #7a5636;
  --es-human-iris-outer: #4a3423;
  --es-human-iris-limbus: #2a1e17;
  --es-human-sclera: #f1ece6;
  --es-human-sclera-vessel: #b5524a;
  --es-human-iris-radius: 0.0058;
  --es-human-pupil-radius: 0.00205;
  --es-human-iris-collarette: 0.45;
  --es-human-sclera-lift: 0.35;
  --es-human-sclera-vessels: 0.35;
  /* The dark crenellated pupillary ruff, pigment flecks on the iris and the
     wet corneal catchlight of the close-up. */
  --es-human-iris-ruff: #2b1a10;
  --es-human-iris-fleck: #3a2414;
  --es-human-pupil: #000000;
  --es-human-eye-catchlight: #ffffff;
  /* Tear film over the eye: clear-coat strength and its roughness. */
  --es-human-eye-clearcoat: 1;
  --es-human-eye-clearcoat-roughness: 0.05;
  /* Illustrative retina drawing in the Sight panel. */
  /* Each eye drawing grows with the screen height: compact on a 768px
     laptop so the chapter fits, generous on a tall display. */
  --es-fundus-size: clamp(6rem, 13vh, 11rem);
  --es-fundus-gap: 0.75rem;
  /* Each chapter's live monitor: its picture's height (matching the eye
     discs) and the size of its numbers. */
  --es-monitor-height: var(--es-fundus-size);
  --es-monitor-value-size: 1.75rem;
  --es-fundus-ground: #c4552e;
  --es-fundus-edge: #4a140c;
  --es-fundus-disc: #f0cf93;
  --es-fundus-cup: #fff0cc;
  --es-fundus-macula: #6e2010;
  --es-fundus-artery: #d8462c;
  --es-fundus-vein: #8a1d17;
  --es-fundus-reflex: #ffe6c9;
  --es-fundus-rim: #eb9a74;
  --es-fundus-xanthophyll: #b8862e;
  --es-fundus-choroid: #5e180d;
  --es-fundus-fibre: #ffd9b8;
  /* Closed lids mirror the skin around the eye: the lid edge samples this far
     past the outline (1 = on it) and the centre a further band beyond. */
  --es-human-lid-skin-reach: 1.15;
  --es-human-lid-skin-band: 0.35;
  --es-human-hair: #352a24;
  --es-human-hair-highlight: #5a4635;
  --es-human-hair-alpha-cutoff: 0.35;
  /* Soft scalp shadow along the hairline: tint, strength and reach (metres). */
  --es-human-hairline-shade: #6e5a50;
  --es-human-hairline-strength: 0.9;
  --es-human-hairline-reach: 0.025;
  /* Permanent privacy veil over the groin: frost colour, blur strength (0.55,
     the least allowed, to 1), how softly its rim fades (0.25 to 4) and how
     much wider than its minimum cover it is (>= 1). */
  --es-human-veil: #e8eef0;
  --es-human-veil-blur: 0.65;
  --es-human-veil-softness: 4;
  --es-human-veil-spread: 1;
  --es-human-hair-lift: 0.007;
  --es-human-hair-width: 0.0004;
  --es-human-hair-roughness: 0.72;
  --es-human-hair-anisotropy: 0.45;
  --es-human-hair-specular: 0.4;
  --es-human-lid-crease: 0.00016;
  /* Skin light transport approximations (not a tissue model). */
  --es-human-sheen: 0.2;
  --es-human-scatter-strength: 0.3;
  --es-human-scatter-wrap: 0.5;
  --es-human-flush-strength: 0.5;
  --es-human-cavity: 0.05;
  --es-skin-scatter: #ff6a4d;
  --es-skin-flush: #ffc4bb;
  --es-human-brow: #2e231c;
  --es-human-lash: #1f1713;
  --es-human-brow-width: 0.00014;
  --es-human-lash-width: 0.000045;
  --es-human-lash-length: 0.8;
  --es-human-oil-contrast: 0.12;
  --es-field-particles: 960;
}

:root {
  --es-field-quality: 1;
}
@media (max-width: 600px) {
  :root {
    --es-field-quality: 0.45;
    --es-shadow-map: 1024;
  }
}

/* Ursly teal ("cyan", formerly Glacier) is the one accent; the optional
   atmospheres were retired with the Atmosphere picker (October 13, 2026). */
:root[data-palette="cyan"] {
  --es-pore: #5fd4d0;
  --es-pore-hi: #c9f5f3;
  --es-pore-deep: #1f8f8b;
  --es-pore-ink: #040b16;
  --es-ground-lift: #0b2a3a;
}
/* Light Ursly teal (#0f7471) keeps 4.5:1 for the kicker on the near-opaque
   reading ground and on every light surface. */
:root[data-theme="light"][data-palette="cyan"] {
  --es-pore: #0f7471;
  --es-pore-hi: #2bb3ae;
  --es-pore-deep: #0b5c5a;
  --es-pore-ink: #ffffff;
  --es-ground-lift: #d4f0ed;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])[data-palette="cyan"] {
    --es-pore: #0f7471;
    --es-pore-ink: #ffffff;
  }
}

/* Neutral editorial surfaces for careers and the component review gallery.
   Opt-in only: the immersive scene and its physical-material tokens stay intact. */
[data-design-system="neutral"] {
  color-scheme: dark;
  --es-ground: #161616;
  --es-surface: #1c1c1c;
  --es-surface-2: #262626;
  --es-line: #414141;
  --es-ink: #f2f0ea;
  --es-muted: #b5b3ad;
  --es-pore: #a6c9c2;
  --es-pore-ink: #161616;
  --es-pore-hi: #d2ded8;
  --ds-control-border: #777772;
  --ds-error: #f0b4a6;
  --ds-success: #b5d2b4;
  --ds-space-1: 0.375rem;
  --ds-space-2: 0.75rem;
  --ds-space-3: 1rem;
  --ds-space-4: 1.5rem;
  --ds-space-5: 2rem;
  --ds-space-6: 3rem;
  --ds-radius: 0.375rem;
  --ds-measure: 66ch;
  --ds-title: clamp(1.5rem, 2.6vw, 2rem);
  --ds-body: 1rem;
  --ds-small: 0.875rem;
}

/* Warm paper is the careers default; charcoal remains a deliberate alternative. */
[data-design-system="neutral"][data-surface="light"] {
  color-scheme: light;
  --es-ground: #f5f3ed;
  --es-surface: #faf9f5;
  --es-surface-2: #eae8e1;
  --es-line: #c9c7bf;
  --es-ink: #222220;
  --es-muted: #65635d;
  --es-pore: #38675e;
  --es-pore-ink: #f5f3ed;
  --es-pore-hi: #254c45;
  --ds-control-border: #85827a;
  --ds-error: #943e32;
  --ds-success: #3f6542;
}