/* Veritas use-cases page. Each role is a "world" with its own palette; the
   page background cross-fades between them as you scroll. Scenes are scrubbed
   by one number per world, --p (0 → 1), set from scroll position by
   includes/use-cases-script.html. Without JS, or with reduced motion,
   --p stays 1 and every scene shows its finished state on its own background. */

/* Registered so colour changes can transition (Chrome, Safari 16.4+, Firefox 128+). */
@property --uc-bg    { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --uc-ink   { syntax: "<color>"; inherits: true; initial-value: #141721; }
@property --uc-mute  { syntax: "<color>"; inherits: true; initial-value: rgba(20, 23, 33, .64); }
@property --uc-faint { syntax: "<color>"; inherits: true; initial-value: rgba(20, 23, 33, .6); }
@property --uc-line  { syntax: "<color>"; inherits: true; initial-value: rgba(20, 23, 33, .14); }
@property --uc-card  { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --uc-acc   { syntax: "<color>"; inherits: true; initial-value: #2251ff; }
@property --uc-acc2  { syntax: "<color>"; inherits: true; initial-value: #141721; }

/* ── World palettes (source values) ─────────────────────────────────────── */
/* One colour set, after the site tokens: paper, mist, and ink surfaces with a
   single electric-blue accent (lifted on ink so it keeps contrast). Worlds
   change by surface and texture, never by hue. --wa2 is the ink/paper
   "second voice" for states that must differ from the accent. */
.uc-world, .uc-page, .uc-world[data-world="paper"], .uc-world[data-world="asker"], .uc-world[data-world="gov"], .uc-world[data-world="audit"] {
  --wb: #ffffff; --wi: #141721; --wm: rgba(20,23,33,.64); --wf: rgba(20,23,33,.6); --wl: rgba(20,23,33,.13); --wc: #ffffff; --wa: #2251ff; --wa2: #141721;
}
.uc-world[data-world="chain"], .uc-world[data-world="cio"], .uc-world[data-world="review"], .uc-world[data-world="domain"] {
  --wb: #f3f4f6; --wi: #141721; --wm: rgba(20,23,33,.66); --wf: rgba(20,23,33,.62); --wl: rgba(20,23,33,.14); --wc: #ffffff; --wa: #2251ff; --wa2: #141721;
}
.uc-world[data-world="dev"], .uc-world[data-world="prod"], .uc-world[data-world="ink"] {
  --wb: #121317; --wi: #f3f4f6; --wm: rgba(243,244,246,.70); --wf: rgba(243,244,246,.54); --wl: rgba(243,244,246,.14); --wc: #1b1d23; --wa: #7d97ff; --wa2: #f3f4f6;
}

/* Resolved roles. Static: each world paints itself. */
.uc-world {
  --x-bg: var(--wb); --x-ink: var(--wi); --x-mute: var(--wm); --x-faint: var(--wf);
  --x-line: var(--wl); --x-card: var(--wc); --x-acc: var(--wa); --x-acc2: var(--wa2); --x-inv: var(--wb);
  --p: 1;
  position: relative; background: var(--x-bg); color: var(--x-ink);
}
/* Live: the page carries the active world's colours and fades between them. */
.uc-page.uc-live {
  background: var(--uc-bg);
  transition: --uc-bg .9s var(--ease-out), --uc-ink .9s var(--ease-out), --uc-mute .9s var(--ease-out),
    --uc-faint .9s var(--ease-out), --uc-line .9s var(--ease-out), --uc-card .9s var(--ease-out),
    --uc-acc .9s var(--ease-out), --uc-acc2 .9s var(--ease-out);
}
.uc-live .uc-world {
  --x-bg: transparent; --x-ink: var(--uc-ink); --x-mute: var(--uc-mute); --x-faint: var(--uc-faint);
  --x-line: var(--uc-line); --x-card: var(--uc-card); --x-acc: var(--uc-acc); --x-acc2: var(--uc-acc2); --x-inv: var(--uc-bg);
}

/* ── Type overrides inside worlds ───────────────────────────────────────── */
.cp-page.uc-page h1, .cp-page.uc-page h2, .cp-page.uc-page h3 { color: var(--x-ink, var(--text-primary)); }
.cp-page.uc-page h1 span, .uc-infra h2 span { color: var(--x-faint); }
.uc-page .cp-eyebrow { color: var(--x-faint); }
.uc-page p { color: var(--x-mute); }
.uc-page .cp-deck, .uc-page .uc-lead { color: var(--x-ink); }
.cp-page.uc-page h2 { font-size: clamp(var(--fs-32), 3.4vw, var(--fs-48)); line-height: 1.1; }
.uc-lead { font-size: var(--fs-20); line-height: var(--lh-20); max-width: 30em; }
.uc-no { display: inline-block; min-width: 2.2em; color: var(--x-acc); }
.uc-page a:not(.cp-button):not(.uc-arm) { color: var(--x-ink); }

.uc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: var(--sp-6) 0 0; }
.uc-chips li {
  font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); letter-spacing: var(--ls-small);
  color: var(--x-mute); border: 1px solid var(--x-line); padding: 6px 10px;
}
.uc-beat-label {
  font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--x-acc) !important; margin-bottom: var(--sp-4) !important;
}
.uc-instead { list-style: none; padding: 0; margin: 0; max-width: 30em; }
.uc-instead li {
  position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-8); border-top: 1px solid var(--x-line);
  color: var(--x-mute); font-size: var(--fs-18); line-height: var(--lh-18);
}
.uc-instead li:last-child { border-bottom: 1px solid var(--x-line); }
.uc-instead li::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 14px; height: 1.5px; background: var(--x-faint);
  transform: rotate(45deg); box-shadow: 0 0 0 0 transparent;
}
.uc-instead li::after { content: ""; position: absolute; left: 2px; top: 50%; width: 14px; height: 1.5px; background: var(--x-faint); transform: rotate(-45deg); }
.uc-now { font-size: var(--fs-20) !important; line-height: 30px !important; color: var(--x-ink) !important; max-width: 30em; }
.uc-now em { font-style: normal; font-family: var(--font-mono); font-size: .85em; color: var(--x-acc2); }
.uc-note { font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; color: var(--x-faint) !important; margin-top: var(--sp-4) !important; max-width: 40em; }
.uc-kicker { font-size: var(--fs-24) !important; line-height: var(--lh-24) !important; color: var(--x-acc) !important; margin-top: var(--sp-6) !important; letter-spacing: var(--ls-heading); }
.uc-cap { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4); font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); color: var(--x-faint); }

/* ── World textures ─────────────────────────────────────────────────────── */
.uc-world::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity .9s var(--ease-out); }
.uc-live .uc-world::before { opacity: 0; }
.uc-live .uc-world.is-active::before { opacity: 1; }
.uc-world[data-world="asker"]::before { background: radial-gradient(1px 1px at 50% 50%, rgba(20,23,33,.22), transparent 60%) 0 0 / 28px 28px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.uc-world[data-world="chain"]::before { background: repeating-linear-gradient(90deg, rgba(20,23,33,.06) 0 6px, transparent 6px 14px) 0 50% / 100% 1px no-repeat; }
.uc-world[data-world="cio"]::before { background: radial-gradient(60vw 50vh at 80% 40%, rgba(34,81,255,.07), transparent 70%); }
.uc-world[data-world="gov"]::before { background: repeating-linear-gradient(0deg, rgba(20,23,33,.045) 0 1px, transparent 1px 32px); }
.uc-world[data-world="dev"]::before { background: repeating-linear-gradient(0deg, rgba(243,244,246,.025) 0 1px, transparent 1px 3px), radial-gradient(60vw 60vh at 80% 50%, rgba(125,151,255,.10), transparent 70%); }
.uc-world[data-world="prod"]::before { background: linear-gradient(rgba(243,244,246,.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(243,244,246,.04) 1px, transparent 1px) 0 0 / 48px 48px; }
.uc-world[data-world="domain"]::before {
  background: linear-gradient(rgba(20,23,33,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(20,23,33,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(20,23,33,.08) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(20,23,33,.08) 1px, transparent 1px) 0 0 / 120px 120px;
}
.uc-world[data-world="ink"]::before { background: radial-gradient(60vw 60vh at 75% 50%, rgba(125,151,255,.12), transparent 70%); }

/* ── Scrollytelling layout ──────────────────────────────────────────────── */
.uc-page { --stage-h: min(620px, calc(100vh - 150px)); --nav-h: 64px; overflow: clip; }
.uc-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: max(var(--sp-12), 5vw);
  max-width: 1440px; margin: 0 auto; padding: var(--sp-16) max(var(--sp-6), 5vw) var(--sp-16) max(var(--sp-6), 7vw);
}
.uc-beat { min-height: 68vh; display: flex; flex-direction: column; justify-content: center; }
.uc-beat--lead { min-height: 78vh; }
.uc-stage-wrap { position: relative; }
.uc-stage {
  position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--stage-h)) / 2);
  height: var(--stage-h); min-height: 500px; margin: 0; overflow: hidden;
  background: var(--x-card); border: 1px solid var(--x-line);
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / .35);
  padding: var(--sp-5); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--x-ink);
}
.uc-live .uc-beat { opacity: .22; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.uc-live .uc-beat.is-in { opacity: 1; transform: none; }

/* Step helper: anything with an --at threshold gets --on (0 → 1 over ~7% of scroll). */
.uc-stage * { --on: clamp(0, calc((var(--p) - var(--at, 0)) * 14), 1); }

/* The record strip: the one thing every world shares. */
.uc-rec {
  display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px dashed var(--x-line); font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono);
}
.uc-rec-id { color: var(--x-ink); font-weight: var(--fw-semibold); letter-spacing: var(--ls-small); }
.uc-rec-layer { color: var(--x-acc); }
.uc-sheets {
  margin-left: auto; width: calc(var(--n) * 7px); height: 14px;
  background: repeating-linear-gradient(90deg, var(--x-acc) 0 4px, transparent 4px 7px);
  opacity: .85;
}
.uc-dot-live { display: inline-block; width: 8px; height: 8px; border-radius: var(--rad-round); background: var(--x-acc); margin-right: var(--sp-2); vertical-align: 1px; animation: uc-pulse 1.8s ease-in-out infinite; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.uc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-12);
  min-height: calc(100vh - var(--nav-h)); padding: var(--sp-16) max(var(--sp-6), 5vw) var(--sp-24) max(var(--sp-6), 7vw);
  max-width: 1440px; margin: 0 auto;
}
.uc-hero-note { font-size: var(--fs-14) !important; line-height: var(--lh-14) !important; margin-top: var(--sp-6) !important; }
.uc-hero-note strong { font-family: var(--font-mono); color: var(--x-acc); font-weight: var(--fw-regular); }
.uc-orbit-wrap { position: relative; aspect-ratio: 1; width: min(100%, 560px); justify-self: center; --rad: min(250px, 40vw); }
.uc-orbit { position: absolute; inset: 0; animation: uc-spin 180s linear infinite; }
.uc-orbit-wrap:hover .uc-orbit, .uc-orbit-wrap:hover .uc-arm-label > span { animation-play-state: paused; }
.uc-arm { position: absolute; left: 50%; top: 50%; width: var(--rad); height: 0; transform-origin: 0 0; transform: rotate(calc(var(--i) * 45deg - 90deg)); text-decoration: none; }
.uc-arm-line { position: absolute; left: 34%; right: 12%; top: 0; border-top: 1px dashed var(--x-line); }
.uc-arm-label { position: absolute; left: 100%; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * (var(--i) * 45deg - 90deg))); }
.uc-arm-label > span {
  display: block; white-space: nowrap; animation: uc-spin 180s linear infinite reverse;
  font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); letter-spacing: var(--ls-small);
  color: var(--x-ink); background: var(--x-card); border: 1px solid var(--x-line); padding: 6px 10px;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.uc-arm:hover .uc-arm-label > span { border-color: var(--x-acc); color: var(--x-acc); }
.uc-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(62%, 290px);
  background: var(--x-ink); color: var(--x-bg); padding: var(--sp-5); box-shadow: 0 24px 60px -24px rgb(20 23 33 / .5);
}
.uc-core-id { display: block; font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); color: rgb(255 255 255 / .6); margin-bottom: var(--sp-3); }
.uc-core p { color: #fff !important; font-size: var(--fs-18); line-height: var(--lh-18); margin: 0; min-height: 3lh; }
.uc-scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-decoration: none;
  font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--x-faint) !important;
}
.uc-scroll-cue i { width: 1px; height: 36px; background: linear-gradient(var(--x-faint), transparent); animation: uc-drip 2s ease-in-out infinite; transform-origin: top; }

/* Typing (driven by JS): the unrevealed rest keeps its space so nothing reflows. */
[data-type-scroll] .t-rest, [data-type-time] .t-rest { color: transparent !important; }
[data-type-scroll] .t-caret, [data-type-time] .t-caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 1px -2px; background: currentColor; animation: uc-blink 1s steps(1) infinite; }

/* ── Rail ───────────────────────────────────────────────────────────────── */
.uc-rail { position: fixed; left: max(var(--sp-4), 1.4vw); top: 50%; transform: translateY(-50%); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .4s; }
.uc-rail.is-shown { opacity: 1; pointer-events: auto; }
.uc-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uc-rail a {
  display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 3px 0;
  font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-faint, var(--uc-faint)) !important;
}
.uc-live .uc-rail a { color: var(--uc-faint) !important; }
.uc-rail a span { width: 18px; }
.uc-rail a::after { content: ""; order: -1; width: 6px; height: 6px; border: 1px solid currentColor; transition: background var(--dur-base), transform var(--dur-base); }
.uc-rail a { font-size: 0 !important; }
.uc-rail a span { font-size: 11px; }
.uc-rail a:hover, .uc-rail a:focus-visible { font-size: 11px !important; }
.uc-rail a.is-current { color: var(--uc-acc) !important; }
.uc-rail a.is-current::after { background: currentColor; transform: scale(1.3); }

/* ── 00 Handoff chain ───────────────────────────────────────────────────── */
.uc-chain-chips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; margin: var(--sp-6) 0 0; }
.uc-chain-chips li { font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); white-space: nowrap; color: var(--x-mute); border: 1px solid var(--x-line); padding: 6px 10px; }
.uc-chain-chips li:not(:last-child)::after { content: "→"; margin-left: 12px; margin-right: -4px; color: var(--x-faint); }
.uc-chain-chips li:first-child, .uc-chain-chips li:last-child { color: var(--x-ink); border-color: var(--x-ink); }
.uc-stage.uc-s-chain { display: flex; flex-direction: column; container-type: inline-size; }
.uc-s-chain > * { flex-shrink: 0; }
.chn-intents { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px 14px; font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-mute); }
.chn-intents li { display: flex; align-items: center; gap: 6px; }
.chn-intents .k { width: 9px; height: 9px; background: var(--x-acc); flex-shrink: 0; }
.chn-intents .k-new { background: repeating-linear-gradient(-45deg, var(--x-ink) 0 1.5px, transparent 1.5px 3.5px); box-shadow: inset 0 0 0 1px var(--x-ink); }
.chn-intents .is-new { color: var(--x-faint); }

/* The train: --train is its position in stations (0 → 6), set by the script so it
   dwells at each handoff and eases between them. Wheels turn with distance. */
.chn-rail { --train: 6; --in-l: 104px; --in-r: 28px; --train-w: 136px; position: relative; height: 116px; margin: 0 0 var(--sp-2); }
.chn-track { position: absolute; left: 0; right: 0; top: 78px; height: 6px; border-top: 1.5px solid var(--x-ink); background: repeating-linear-gradient(90deg, var(--x-line) 0 3px, transparent 3px 11px); }
.chn-stations { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--in-l); right: var(--in-r); top: 72px; }
.chn-stations li { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font: var(--fw-regular) 10px / 12px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--x-faint); white-space: nowrap; transition: color var(--dur-base); }
.chn-stations li::before { content: ""; width: 1.5px; height: 12px; background: currentColor; margin-bottom: 20px; }
.chn-stations li span:last-child { display: none; }
.chn-stations li:nth-child(1) { left: 0%; } .chn-stations li:nth-child(2) { left: 16.667%; } .chn-stations li:nth-child(3) { left: 33.333%; }
.chn-stations li:nth-child(4) { left: 50%; } .chn-stations li:nth-child(5) { left: 66.667%; } .chn-stations li:nth-child(6) { left: 83.333%; } .chn-stations li:nth-child(7) { left: 100%; }
.chn-stations li.is-here { color: var(--x-acc); }
.chn-stations li.is-here::before { height: 14px; margin-top: -2px; }
.chn-train {
  position: absolute; top: 4px; width: var(--train-w); height: auto; overflow: visible;
  left: calc(var(--in-l) + (100% - var(--in-l) - var(--in-r)) * var(--train) / 6); transform: translateX(-76%);
}
.chn-train.is-moving .chn-body { animation: chn-bob .28s ease-in-out infinite; }
.chn-bed, .chn-loco { fill: var(--x-ink); }
.chn-coupler { stroke: var(--x-ink); stroke-width: 2; }
.chn-window { fill: var(--x-card); }
.chn-lamp { fill: var(--x-acc); }
.chn-wheel { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--train) * 400deg)); }
.chn-wheel circle { fill: var(--x-card); stroke: var(--x-ink); stroke-width: 2; }
.chn-wheel line { stroke: var(--x-ink); stroke-width: 1.5; }
.chn-crate { fill: var(--x-acc); transform-box: fill-box; transform-origin: 50% 100%; }
/* Intents fall off as the train reaches the station that drops them. */
.chn-crate:not(.chn-crate--new) {
  --gone: clamp(0, calc((var(--train) - var(--d) + .25) * 4), 1);
  opacity: calc(1 - var(--gone)); transform: translate(calc(var(--gone) * -10px), calc(var(--gone) * 22px)) rotate(calc(var(--gone) * -70deg));
}
/* Unrequested scope is loaded on at the AI and analytics stops. */
.chn-crate--new {
  --in: clamp(0, calc((var(--train) - var(--d) + .2) * 5), 1);
  fill: var(--x-card); stroke: var(--x-ink); stroke-width: 1.2; stroke-dasharray: 2 1.5;
  opacity: var(--in); transform: translateY(calc((1 - var(--in)) * -18px));
}
.chn-smoke circle { fill: var(--x-faint); opacity: 0; transform-box: fill-box; transform-origin: center; animation: chn-puff 2.2s ease-out infinite; }
.chn-smoke circle:nth-child(2) { animation-delay: .73s; }
.chn-smoke circle:nth-child(3) { animation-delay: 1.46s; }
/* Short desktop screens: tighten the chain so the verdict and footer stay in frame. */
@media (min-width: 1000px) and (max-height: 860px) {
  .chn-rail { height: 86px; }
  .chn-train { top: -4px; }
  .chn-track { top: 54px; }
  .chn-stations { top: 48px; }
  .chn-stations li::before { margin-bottom: 12px; }
  .chn-steps li { padding: 3px 0; }
  .chn-steps q { font-size: 12.5px; line-height: 15px; }
  .chn-intents { margin-bottom: 0; font-size: 10px; gap: 2px 12px; }
  .uc-s-chain .uc-rec { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }
}
/* Narrow stage: short station names so they never collide. */
@container (max-width: 600px) {
  .chn-stations li span:first-child { display: none; }
  .chn-stations li span:last-child { display: inline; }
}
@keyframes chn-puff { 0% { opacity: .55; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-22px, -14px) scale(2.1); } }
@keyframes chn-bob { 50% { transform: translateY(-.8px); } }
.chn-steps { --fill: clamp(0, calc((var(--p) - .02) / .64), 1); position: relative; list-style: none; padding: 0 0 0 22px; margin: 0; }
.chn-steps::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--x-line); }
.chn-steps::after { content: ""; position: absolute; left: 4px; top: 10px; width: 3px; height: calc((100% - 20px) * var(--fill)); background: repeating-linear-gradient(var(--x-acc) 0 6px, transparent 6px 10px); }
.chn-steps li {
  position: relative; display: grid; grid-template-columns: 84px 1fr auto; gap: 4px var(--sp-3); align-items: start;
  padding: 7px 0; border-bottom: 1px solid var(--x-line);
  opacity: calc(.14 + .86 * var(--on)); transform: translateX(calc((1 - var(--on)) * 10px));
}
.chn-steps li::before { content: ""; position: absolute; left: -21px; top: 12px; width: 9px; height: 9px; border-radius: var(--rad-round); background: var(--x-card); box-shadow: inset 0 0 0 1.5px var(--x-acc); transform: scale(calc(.5 + .5 * var(--on))); }
.chn-steps b { font: var(--fw-semibold) 11px / 18px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--x-ink); }
.chn-steps q { quotes: none; font-size: var(--fs-14); line-height: 18px; color: var(--x-ink); }
.chn-steps li:not(:first-child):not(.chn-back) q { color: var(--x-mute); }
.chn-back { border-bottom: 0 !important; }
.chn-back::before { background: var(--x-ink) !important; box-shadow: none !important; }
.chn-verdict {
  --v: clamp(0, calc((var(--p) - .7) * 12), 1); opacity: var(--v); transform: rotate(-5deg) scale(calc(1.7 - .7 * var(--v)));
  font: var(--fw-semibold) 10px / 12px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  color: var(--x-ink); border: 1.5px solid var(--x-ink); padding: 4px 6px; align-self: center;
}
.chn-foot { display: grid; margin: auto 0 0 !important; padding-top: var(--sp-3); border-top: 1px dashed var(--x-line); font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; }
.chn-foot > span { grid-area: 1 / 1; }
.chn-kept { --a: clamp(0, calc((var(--p) - .72) * 12), 1); --b: clamp(0, calc((var(--p) - .86) * 12), 1); opacity: calc(var(--a) * (1 - var(--b))); color: var(--x-ink); }
.chn-fix { --b: clamp(0, calc((var(--p) - .86) * 12), 1); opacity: var(--b); color: var(--x-acc); }

/* ── 01 Asker ───────────────────────────────────────────────────────────── */
.uc-stage.uc-s-asker { display: flex; flex-direction: column; }
.ask-ghosts { position: relative; height: 38%; }
.ask-ghosts span {
  --g: clamp(0, calc((var(--p) - .08 - var(--i) * .04) / .3), 1);
  position: absolute; left: calc(4% + var(--i) * 12%); top: calc(4% + var(--i) * 17%);
  font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); color: var(--x-mute);
  border: 1px dashed var(--x-line); background: var(--x-bg, transparent); padding: 6px 10px; white-space: nowrap;
  opacity: calc(1 - var(--g) * .7); transform: translateY(calc(var(--g) * -14px)) rotate(calc((var(--i) - 2) * 1.5deg));
}
.ask-ghosts span::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: var(--x-acc); transform: scaleX(var(--g)); transform-origin: left; }
.ask-card { margin-top: auto; background: var(--x-bg); border: 1px solid var(--x-line); padding: var(--sp-5) var(--sp-6); box-shadow: 0 18px 40px -26px rgb(20 23 33 / .18); }
.uc-live .ask-card { background: color-mix(in srgb, var(--uc-bg) 70%, var(--uc-card)); }
.ask-q { font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; color: var(--x-faint) !important; margin: 0 0 var(--sp-2) !important; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.ask-a { font-size: var(--fs-24) !important; line-height: var(--lh-24) !important; color: var(--x-ink) !important; margin: 0 0 var(--sp-5) !important; letter-spacing: var(--ls-heading); }
.ask-saved { --at: .74; opacity: var(--on); font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); color: var(--x-acc); border-top: 1px solid var(--x-line); padding-top: var(--sp-4); }

/* ── 02 CIO ─────────────────────────────────────────────────────────────── */
.cio-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.cio-stats div { border-left: 1px solid var(--x-line); padding-left: var(--sp-3); }
.cio-stats b { display: block; font-size: var(--fs-32); line-height: var(--lh-32); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.cio-stats span { font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-mute); }
.cio-stats .is-dup b { color: var(--x-acc2); }
.cio-board { position: absolute; left: var(--sp-5); right: var(--sp-5); top: 172px; bottom: 44px; }
.cio-lane {
  --lanes: clamp(0, calc((var(--p) - .3) * 6), 1);
  position: absolute; top: 0; left: calc(var(--c) * 25%); width: 24%;
  font: var(--fw-regular) 11px / 14px var(--font-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--x-faint);
  opacity: var(--lanes); border-bottom: 1px solid var(--x-line); padding-bottom: 6px;
}
.cio-tile {
  --t: clamp(0, calc((var(--p) - .04 - var(--d)) / .42), 1);
  --dup: clamp(0, calc((var(--p) - .62) * 10), 1);
  position: absolute; width: 23.5%; min-height: 19%;
  left: calc(var(--x0) + (var(--c) * 25% - var(--x0)) * var(--t));
  top: calc(var(--y0) + (var(--r) * 21% + 9% - var(--y0)) * var(--t));
  transform: rotate(calc(var(--r0) * 1deg * (1 - var(--t))));
  background: var(--x-card); border: 1px solid var(--x-line);
  padding: 8px 9px; font-size: 12px; line-height: 15px; color: var(--x-ink);
  box-shadow: 0 10px 24px -16px rgb(20 23 33 / .35);
}
.cio-tile em { display: block; font: normal var(--fw-regular) 10px / 13px var(--font-mono); color: var(--x-faint); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; }
.cio-tile.is-self { background: var(--x-acc); color: var(--x-inv); border-color: transparent; }
.cio-tile.is-self em { color: inherit; opacity: .72; }
.cio-tile.is-dup::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid var(--x-acc2); opacity: var(--dup); }
.cio-tile.is-dup::before {
  content: attr(data-dup); position: absolute; left: -1px; bottom: calc(100% - 1px); white-space: nowrap;
  font: var(--fw-regular) 10px / 12px var(--font-mono); background: var(--x-acc2); color: var(--x-inv); padding: 2px 5px;
  opacity: var(--dup); transform: translateY(calc((1 - var(--dup)) * 6px));
}
.cio-tile.is-wait::after, .cio-stats .is-wait span::before { content: ""; position: absolute; right: 7px; top: 8px; width: 7px; height: 7px; border-radius: var(--rad-round); background: var(--x-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-acc) 22%, transparent); opacity: clamp(0, calc((var(--p) - .42) * 10), 1); }
.cio-stats .is-wait span::before { position: static; display: inline-block; margin-right: 5px; vertical-align: 1px; }

/* ── 03 Governance ──────────────────────────────────────────────────────── */
.uc-stage.uc-s-gov { display: flex; flex-direction: column; }
.gov-head { font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--x-faint) !important; margin: 0 0 var(--sp-2) !important; }
.gov-rows { list-style: none; padding: 0; margin: 0; }
.gov-rows li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 10px 0; border-bottom: 1px solid var(--x-line); font-size: var(--fs-16); }
.gov-chip { display: grid; font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); text-align: right; }
.gov-chip i { grid-area: 1 / 1; font-style: normal; padding: 5px 8px; }
.gov-chip i:first-child { opacity: calc(1 - var(--on)); color: var(--x-faint); }
.gov-chip i:last-child { opacity: var(--on); transform: translateX(calc((1 - var(--on)) * 8px)); background: var(--x-acc); color: var(--x-inv); }
.gov-chip.is-unknown i:last-child { background: transparent; color: var(--x-acc2); box-shadow: inset 0 0 0 1px var(--x-acc2); }
.gov-snap {
  --at: .44; opacity: var(--on); transform: scale(calc(1.06 - .06 * var(--on)));
  display: flex; justify-content: space-between; margin: var(--sp-4) 0; padding: 10px 12px;
  border: 1.5px solid var(--x-ink); font: var(--fw-semibold) var(--fs-12) / var(--lh-12) var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
}
.gov-gate { margin-top: auto; border: 1px solid var(--x-line); background: var(--x-bg); padding: var(--sp-4); }
.uc-live .gov-gate { background: color-mix(in srgb, var(--uc-bg) 60%, var(--uc-card)); }
.gov-gate-name { font-weight: var(--fw-semibold); color: var(--x-ink) !important; margin: 0 0 var(--sp-3) !important; font-size: var(--fs-14) !important; }
.gov-conf { --c: clamp(0, calc((var(--p) - .48) / .18), 1); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); color: var(--x-mute); }
.gov-bar { height: 6px; background: var(--x-line); }
.gov-bar i { display: block; height: 100%; width: calc(var(--c) * 97%); background: var(--x-mute); }
.gov-pct { opacity: var(--c); font-variant-numeric: tabular-nums; }
.gov-lamp { --pass: clamp(0, calc((var(--p) - .8) * 14), 1); --held: clamp(0, calc((var(--p) - .5) * 14), 1); display: grid; margin-top: var(--sp-3); }
.gov-lamp span { grid-area: 1 / 1; padding: 8px 10px; font: var(--fw-semibold) var(--fs-12) / var(--lh-12) var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.gov-lamp .is-held { opacity: calc(var(--held) * (1 - var(--pass))); color: var(--x-acc2); box-shadow: inset 0 0 0 1.5px var(--x-acc2); }
.gov-lamp .is-pass { opacity: var(--pass); background: var(--x-acc); color: var(--x-inv); }
.uc-s-gov .uc-cap { position: static; margin-top: var(--sp-3); }

/* ── 04 Builders ────────────────────────────────────────────────────────── */
.uc-stage.uc-s-dev { display: flex; flex-direction: column; }
.dev-term { border: 1px solid var(--x-line); background: rgb(0 0 0 / .35); flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dev-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--x-line); font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-faint); }
.dev-bar i { width: 9px; height: 9px; border-radius: var(--rad-round); background: var(--x-line); }
.dev-bar span { margin-left: var(--sp-2); }
.dev-code { margin: 0; padding: var(--sp-4); background: transparent !important; border: 0; color: var(--x-ink); font: var(--fw-regular) 12.5px / 22px var(--font-mono); white-space: pre-wrap; overflow: hidden; }
.dev-code code { background: none !important; color: inherit; font: inherit; padding: 0; white-space: pre-wrap; }
.dev-code span { display: inline-block; opacity: var(--on); transform: translateX(calc((1 - var(--on)) * -8px)); }
.uc-page .dev-code code span { color: var(--x-ink); }
.dev-code b { color: var(--x-acc); font-weight: var(--fw-regular); }
.dev-lock em { font-style: normal; background: var(--x-acc); color: var(--x-inv); padding: 1px 6px; margin-left: 6px; }
.uc-page .dev-code code .dev-del { color: var(--x-faint); text-decoration: line-through; background: var(--x-line); }
.uc-page .dev-code code .dev-add { color: var(--x-acc); background: color-mix(in srgb, var(--x-acc) 14%, transparent); }
.dev-build { margin-top: var(--sp-4); height: 48px; position: relative; }
.dev-build-card {
  --show: clamp(0, calc((var(--p) - .5) * 12), 1); --back: clamp(0, calc((var(--p) - .74) * 10), 1);
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: var(--sp-4); padding: 12px 14px;
  border: 1px solid var(--x-acc); opacity: var(--show);
  transform: translateX(calc(var(--back) * -18px)); border-color: color-mix(in srgb, var(--x-acc) calc(100% - var(--back) * 100%), var(--x-acc2));
  font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono);
}
.dev-build-card b { color: var(--x-ink); }
.dev-build-card > span { grid-area: 1 / 1; }
.dev-build-card .is-ok { color: var(--x-acc); opacity: calc(1 - var(--back)); }
.dev-build-card .is-back { color: var(--x-acc2); opacity: var(--back); position: absolute; left: 80px; }

/* ── 05 Reviewers ───────────────────────────────────────────────────────── */
.uc-stage.uc-s-review { display: flex; flex-direction: column; }
.rev-seats { list-style: none; padding: 0; margin: 0; }
.rev-seats li { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--x-line); min-height: 52px; }
.rev-seats li > span { font-weight: var(--fw-semibold); color: var(--x-ink); font-size: var(--fs-14); }
.rev-seats small { grid-column: 1; font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-faint); }
.rev-seats s { text-decoration-color: var(--x-acc); text-decoration-thickness: 1.5px; }
.rev-stamp {
  position: absolute; right: 4px; top: 50%; opacity: var(--on);
  transform: translateY(-50%) rotate(-7deg) scale(calc(1.9 - .9 * var(--on)));
  font: var(--fw-semibold) 11px / 12px var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--x-acc); border: 2px solid var(--x-acc); padding: 5px 8px; background: color-mix(in srgb, var(--x-card) 85%, transparent);
}
.rev-refuse { opacity: calc(var(--on) * (1 - clamp(0, calc((var(--p) - .54) * 14), 1))); border-style: dashed; }
.rev-verify { background: repeating-linear-gradient(-45deg, transparent 0 8px, rgb(20 23 33 / .035) 8px 16px); }
.rev-waiver { margin-top: auto; border: 1px dashed var(--x-ink); padding: var(--sp-4); }
.rev-waiver p { margin: 0 0 var(--sp-2) !important; font-size: var(--fs-14) !important; color: var(--x-ink) !important; }
.rev-waiver-meta { font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; color: var(--x-mute) !important; }
.rev-expiry { height: 4px; background: var(--x-line); }
.rev-expiry i { display: block; height: 100%; width: calc((1 - var(--p) * .5) * 100%); background: var(--x-acc); }

/* ── 06 Operators ───────────────────────────────────────────────────────── */
.uc-stage.uc-s-prod { display: flex; flex-direction: column; }
.prod-status { --open: clamp(0, calc((var(--p) - .64) * 12), 1); display: grid; font: var(--fw-semibold) var(--fs-12) / var(--lh-12) var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.prod-status > span { grid-area: 1 / 1; padding: 8px 10px; }
.prod-status .is-live { color: var(--x-acc2); box-shadow: inset 0 0 0 1px var(--x-acc2); opacity: calc(1 - var(--open)); }
.prod-status .is-live .uc-dot-live { background: var(--x-acc2); }
.prod-status .is-open { background: var(--x-acc); color: var(--x-inv); opacity: var(--open); }
.prod-metric { display: flex; justify-content: space-between; margin: var(--sp-4) 0 var(--sp-2) !important; font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; color: var(--x-mute) !important; }
.prod-metric span { color: var(--x-acc); }
.prod-chart { width: 100%; height: auto; flex: 1; min-height: 0; overflow: visible; --draw: clamp(0, calc((var(--p) - .04) / .54), 1); --br: clamp(0, calc((var(--p) - .56) * 12), 1); }
.prod-grid line { stroke: var(--x-line); stroke-width: 1; }
.prod-thresh { stroke: var(--x-acc); stroke-width: 1.5; stroke-dasharray: 6 5; }
.prod-line { fill: none; stroke: var(--x-acc2); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw)); }
.prod-area { fill: var(--x-acc2); opacity: calc(var(--draw) * .035); }
.prod-breach { fill: var(--x-acc); opacity: var(--br); }
.prod-breach-ring { fill: none; stroke: var(--x-acc); stroke-width: 2; opacity: var(--br); transform-box: fill-box; transform-origin: center; animation: uc-ring 1.6s ease-out infinite; }
.prod-log p { opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 6px)); margin: 0 !important; padding: 7px 0; border-top: 1px solid var(--x-line); font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; color: var(--x-mute) !important; }
.prod-log b { color: var(--x-ink); font-weight: var(--fw-semibold); margin-right: var(--sp-2); }
.prod-log .is-block b { color: var(--x-acc); }

/* ── 07 Auditor ─────────────────────────────────────────────────────────── */
.aud-line {
  --z: clamp(0, calc((var(--p) - .02) / .5), 1); --fill: clamp(0, calc((var(--p) - .02) / .58), 1);
  position: relative; list-style: none; margin: 0; padding: 0 0 0 26px;
  transform: scale(calc(1.08 - .08 * var(--z))); transform-origin: 0 0;
}
.aud-line::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--x-line); }
.aud-line::after { content: ""; position: absolute; left: 5px; top: 8px; width: 3px; height: calc((100% - 16px) * var(--fill)); background: var(--x-acc); }
.aud-line li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-3); padding: 7px 0; opacity: calc(.18 + .82 * var(--on)); }
.aud-line li::before { content: ""; position: absolute; left: -25px; top: 11px; width: 11px; height: 11px; background: var(--x-acc); border-radius: var(--rad-round); box-shadow: 0 0 0 3px var(--x-card); transform: scale(calc(.4 + .6 * var(--on))); }
.aud-line time { font: var(--fw-regular) var(--fs-12) / 20px var(--font-mono); color: var(--x-faint); }
.aud-line span { font-size: var(--fs-14); line-height: 20px; color: var(--x-ink); }
.aud-line li:first-child span { font-style: italic; }

/* ── 08 Domain builder ──────────────────────────────────────────────────── */
.uc-stage.uc-s-domain { display: flex; flex-direction: column; background-image: linear-gradient(rgb(20 23 33 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(20 23 33 / .045) 1px, transparent 1px); background-size: 20px 20px; }
.dom-map { position: relative; --m: clamp(0, calc((var(--p) - .02) / .3), 1); }
.dom-map svg { display: block; width: 100%; height: auto; }
.dom-j { fill: var(--x-acc); fill-opacity: calc(var(--m) * .14); stroke: var(--x-ink); stroke-width: 1.5; stroke-dasharray: 1400; stroke-dashoffset: calc(1400 - 1400 * var(--m)); }
.dom-j3 { fill-opacity: 0; stroke-dasharray: 4 5; stroke-dashoffset: 0; opacity: calc(var(--m) * .6); }
.dom-pin { fill: var(--x-acc); transform: translateY(calc((1 - clamp(0, calc((var(--p) - .2) * 10), 1)) * -40px)); opacity: clamp(0, calc((var(--p) - .2) * 10), 1); }
.dom-pin-ring { fill: none; stroke: var(--x-acc); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: uc-ring 1.8s ease-out infinite; opacity: clamp(0, calc((var(--p) - .26) * 10), 1); }
.dom-lab { position: absolute; font: var(--fw-regular) 10px / 12px var(--font-mono); color: var(--x-ink); background: var(--x-card); padding: 2px 5px; opacity: var(--m); white-space: nowrap; }
.dom-lab--gap { color: var(--x-faint); }
.dom-q { margin: var(--sp-3) 0 !important; padding: 10px 12px; border-left: 3px solid var(--x-acc); background: color-mix(in srgb, var(--x-acc) 7%, transparent); color: var(--x-ink) !important; font-size: var(--fs-14) !important; line-height: var(--lh-14) !important; opacity: clamp(0, calc((var(--p) - .22) * 10), 1); }
.dom-hits { list-style: none; padding: 0; margin: 0; }
.dom-hits li { display: grid; grid-template-columns: 96px 1fr; column-gap: var(--sp-3); padding: 8px 0; border-top: 1px solid var(--x-line); opacity: var(--on); transform: translateX(calc((1 - var(--on)) * 24px)); }
.dom-hits b { grid-row: span 2; align-self: start; font: var(--fw-semibold) 10px / 12px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; text-align: center; }
.dom-hits .is-likely { background: var(--x-acc); color: var(--x-inv); }
.dom-hits .is-possible { box-shadow: inset 0 0 0 1.5px var(--x-acc); color: var(--x-acc); }
.dom-hits .is-unknown { box-shadow: inset 0 0 0 1.5px var(--x-faint); color: var(--x-mute); border: 0; }
.dom-hits span { color: var(--x-ink); font-size: var(--fs-14); }
.dom-hits cite { font: normal var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-faint); }

/* ── In the product (real screenshots) ─────────────────────────────────── */
.uc-product { padding: var(--sp-24) 0 var(--sp-20); }
.uc-product-head, .uc-product-note { position: relative; z-index: 1; max-width: 1440px; margin-inline: auto; padding-inline: max(var(--sp-6), 5vw) max(var(--sp-6), 5vw); padding-left: max(var(--sp-6), 7vw); }
.uc-shots {
  position: relative; z-index: 1; display: flex; gap: var(--sp-6); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--sp-10) max(var(--sp-6), 7vw) var(--sp-6); scroll-padding-inline: max(var(--sp-6), 7vw);
  scrollbar-width: thin;
}
.uc-shots:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.uc-shot { flex: 0 0 min(620px, 82vw); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.uc-shot-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--surface-secondary); border: 1px solid var(--x-line); overflow: hidden; box-shadow: 0 24px 60px -36px rgb(20 23 33 / .45); transition: border-color var(--dur-base); }
.uc-shot-img:hover { border-color: var(--x-acc); }
.uc-shot-img img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }
.uc-shot figcaption { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--x-mute); max-width: 36em; }
.uc-shot figcaption strong { display: block; font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--fw-semibold); color: var(--x-ink); margin-bottom: var(--sp-1); }
.uc-shot-seat { display: block; font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--x-acc); margin-bottom: var(--sp-2); }
.js .uc-shot[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .uc-shot[data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Also at the table ──────────────────────────────────────────────────── */
.uc-table { padding: var(--sp-24) max(var(--sp-6), 5vw) var(--sp-24) max(var(--sp-6), 7vw); }
.uc-table-head, .uc-table-grid { position: relative; z-index: 1; max-width: 1440px; margin-inline: auto; }
.uc-table-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); margin-top: var(--sp-12); }
.uc-table-grid article { border-top: 1px solid var(--x-ink); padding-top: var(--sp-5); }
.uc-table-grid p { font-size: var(--fs-16); }
.js .uc-table-grid article[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .uc-table-grid article[data-reveal]:nth-child(2) { transition-delay: .08s; }
.js .uc-table-grid article[data-reveal]:nth-child(3) { transition-delay: .16s; }
.js .uc-table-grid article[data-reveal]:nth-child(4) { transition-delay: .24s; }
.js .uc-table-grid article[data-reveal].is-visible { opacity: 1; transform: none; }
.uc-glyph { display: block; width: 44px; height: 44px; margin-bottom: var(--sp-6); position: relative; }
.uc-glyph--scope { border: 1.5px solid var(--x-ink); border-radius: var(--rad-round); }
.uc-glyph--scope::after { content: ""; position: absolute; inset: 10px; border: 1.5px dashed var(--x-acc); border-radius: var(--rad-round); animation: uc-spin 14s linear infinite; }
.uc-glyph--compass { background: conic-gradient(from 45deg, var(--x-acc) 0 25%, transparent 0 50%, var(--x-ink) 0 75%, transparent 0); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: uc-sway 6s ease-in-out infinite; }
.uc-glyph--data { background: repeating-linear-gradient(0deg, var(--x-ink) 0 2px, transparent 2px 9px); border-left: 1.5px solid var(--x-ink); }
.uc-glyph--data::after { content: ""; position: absolute; left: -1.5px; top: 0; width: 8px; height: 100%; background: var(--x-acc); animation: uc-scan 3s ease-in-out infinite; }
.uc-glyph--rack { border: 1.5px solid var(--x-ink); background: linear-gradient(var(--x-ink), var(--x-ink)) 50% 33% / 70% 1.5px no-repeat, linear-gradient(var(--x-ink), var(--x-ink)) 50% 66% / 70% 1.5px no-repeat; }
.uc-glyph--rack::after { content: ""; position: absolute; right: 6px; top: 6px; width: 5px; height: 5px; background: var(--x-acc); border-radius: var(--rad-round); animation: uc-pulse 1.4s ease-in-out infinite; }

/* ── The thread ─────────────────────────────────────────────────────────── */
.uc-stage.uc-s-thread { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); }
.thr-lane { border: 1px solid var(--x-line); padding: var(--sp-4); }
.thr-name { font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--x-faint) !important; margin: 0 0 var(--sp-3) !important; }
.thr-b .thr-name { color: var(--x-acc) !important; }
.thr-row { display: flex; align-items: center; gap: var(--sp-3); --gone: clamp(0, calc((var(--p) - .22) / .16), 1); }
.thr-prompt { flex: 1; font-size: var(--fs-14); padding: 10px 12px; border: 1px solid var(--x-line); color: var(--x-ink); opacity: calc(1 - var(--gone) * .92); filter: blur(calc(var(--gone) * 3px)); }
.thr-arrow { width: 28px; height: 1px; background: var(--x-faint); position: relative; }
.thr-arrow::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left-color: var(--x-faint); border-right: 0; }
.thr-app { --app: clamp(0, calc((var(--p) - .12) * 8), 1); width: 110px; height: 62px; border: 1px solid var(--x-ink); padding: 8px; display: grid; gap: 5px; opacity: var(--app); transform: scale(calc(.7 + .3 * var(--app))); }
.thr-app i { background: var(--x-line); }
.thr-app i:first-child { background: var(--x-mute); width: 60%; }
.thr-ghosts { --gh: clamp(0, calc((var(--p) - .36) * 8), 1); list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: 6px; opacity: var(--gh); }
.thr-ghosts li { font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-faint); border: 1px dashed var(--x-line); padding: 4px 8px; text-decoration: line-through; text-decoration-color: var(--x-faint); }
.thr-b { border-color: var(--x-acc); }
.thr-seed { display: block; font-size: var(--fs-16); color: var(--x-ink); font-style: italic; margin-bottom: var(--sp-4); }
.thr-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.thr-steps li { font: var(--fw-regular) 11px / 14px var(--font-mono); padding: 8px 6px; text-align: center; border: 1px solid var(--x-line); color: var(--x-faint); background: color-mix(in srgb, var(--x-acc) calc(var(--on) * 100%), transparent); }
.thr-steps li { color: color-mix(in srgb, var(--x-inv) calc(var(--on) * 100%), var(--x-faint)); }
.thr-loop { --lp: clamp(0, calc((var(--p) - .7) * 10), 1); display: block; margin-top: var(--sp-4); font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono); color: var(--x-acc); opacity: var(--lp); }

/* ── Models on/off ──────────────────────────────────────────────────────── */
.uc-infra { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-16); align-items: center; padding: var(--sp-24) max(var(--sp-6), 5vw) var(--sp-24) max(var(--sp-6), 7vw); }
.uc-infra > * { position: relative; z-index: 1; }
.uc-switch { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); background: none; border: 0; padding: var(--sp-2) 0; cursor: pointer; color: var(--x-ink); font: var(--fw-regular) var(--fs-16) / var(--lh-16) var(--font-sans); }
.uc-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.uc-switch-track { width: 52px; height: 28px; border-radius: var(--rad-round); background: var(--x-acc); position: relative; transition: background var(--dur-base); }
.uc-switch-thumb { position: absolute; top: 3px; left: 27px; width: 22px; height: 22px; border-radius: var(--rad-round); background: #fff; transition: left var(--dur-base) var(--ease-out); box-shadow: var(--shadow-1); }
.uc-switch[aria-pressed="false"] .uc-switch-track { background: var(--x-faint); }
.uc-switch[aria-pressed="false"] .uc-switch-thumb { left: 3px; }
.uc-switch-label b { font-weight: var(--fw-semibold); }
.uc-switch[aria-pressed="true"] [data-off], .uc-switch[aria-pressed="false"] [data-on] { display: none; }
.uc-pipe ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.uc-pipe li { position: relative; border: 1px solid var(--x-line); padding: var(--sp-3); min-height: 112px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-14); line-height: 18px; color: var(--x-ink); transition: background .4s var(--ease-out), border-color .4s, color .4s; }
.uc-pipe li b { font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-faint); }
.uc-pipe li small { margin-top: auto; font: var(--fw-regular) 11px / 14px var(--font-mono); color: var(--x-mute); }
.uc-pipe .is-model { background: var(--accent-soft); border-color: var(--accent); }
.uc-pipe .is-people { background: var(--x-ink); color: var(--x-inv); }
.uc-pipe .is-people b, .uc-pipe .is-people small { color: inherit; opacity: .7; }
.uc-pipe [data-off] { display: none; }
.uc-pipe.is-off [data-on] { display: none; }
.uc-pipe.is-off [data-off] { display: block; }
.uc-pipe.is-off .is-model { background: transparent; border-style: dashed; border-color: var(--x-faint); }
.uc-pipe.is-off .is-model small { color: var(--x-ink); }
.uc-pipe-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4) !important; font: var(--fw-regular) var(--fs-12) / var(--lh-12) var(--font-mono) !important; }
.uc-pipe-foot .k { width: 12px; height: 12px; border: 1px solid var(--x-line); margin-left: var(--sp-3); }
.uc-pipe-foot .k:first-child { margin-left: 0; }
.uc-pipe-foot .k-model { background: var(--accent-soft); border-color: var(--accent); }
.uc-pipe-foot .k-people { background: var(--x-ink); }

.uc-end { position: relative; z-index: 1; }
.uc-end-actions { justify-content: center; }
.uc-end h2 { color: var(--text-primary) !important; }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes uc-spin { to { transform: rotate(360deg); } }
@keyframes uc-pulse { 50% { opacity: .35; } }
@keyframes uc-blink { 50% { opacity: 0; } }
@keyframes uc-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes uc-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes uc-sway { 50% { transform: rotate(22deg); } }
@keyframes uc-scan { 50% { transform: translateX(34px); } }

/* The hero orbit has a fixed arm length; keep the labels inside narrow viewports. */
@media (max-width: 1180px) {
  .uc-rail { display: none; }
}
@media (max-width: 999px) {
  .uc-hero { grid-template-columns: 1fr; padding-top: var(--sp-12); }
  .uc-orbit-wrap { --rad: min(200px, 36vw); width: min(100%, 460px); }
  .uc-grid { grid-template-columns: 1fr; gap: 0; padding: var(--sp-16) max(var(--sp-5), 5vw); }
  .uc-copy { display: contents; }
  .uc-beat, .uc-beat--lead { min-height: 0; padding-block: var(--sp-8); }
  .uc-beat--lead { order: 1; }
  .uc-stage-wrap { order: 2; margin-block: var(--sp-4) var(--sp-8); }
  .uc-beat:not(.uc-beat--lead) { order: 3; }
  .uc-stage { position: relative; top: 0; height: 560px; min-height: 0; }
  .uc-live .uc-beat { opacity: 1; transform: none; }
  .uc-table-grid { grid-template-columns: repeat(2, 1fr); }
  .uc-infra { grid-template-columns: 1fr; gap: var(--sp-10); }
}
@media (max-width: 560px) {
  .uc-orbit-wrap { --rad: 37vw; }
  .uc-arm-label > span { font-size: 10px; padding: 4px 6px; }
  .uc-core { width: 56%; padding: var(--sp-3); }
  .uc-core p { font-size: var(--fs-14); line-height: var(--lh-14); }
  .uc-stage { padding: var(--sp-4); height: 580px; }
  .cio-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-2); }
  .cio-stats b { font-size: var(--fs-24); line-height: var(--lh-24); }
  .cio-board { top: 204px; left: var(--sp-3); right: var(--sp-3); }
  .cio-tile { padding: 5px; font-size: 10px; line-height: 12px; }
  .cio-tile em { font-size: 8px; }
  .cio-tile.is-dup::before { display: none; }
  .ask-a { font-size: var(--fs-20) !important; line-height: var(--lh-20) !important; }
  .ask-ghosts span { font-size: 10px; }
  .dev-code { font-size: 10.5px; line-height: 18px; padding: var(--sp-3); }
  .dom-hits li { grid-template-columns: 80px 1fr; }
  .chn-steps li { grid-template-columns: 1fr auto; }
  .chn-steps q { grid-column: 1 / -1; grid-row: 2; font-size: 12px; line-height: 16px; }
  .chn-intents { font-size: 10px; gap: 4px 10px; }
  .uc-stage.uc-s-chain { height: auto; }
  .chn-rail { --in-l: 74px; --in-r: 14px; --train-w: 96px; height: 100px; }
  .chn-track { top: 62px; }
  .chn-stations { top: 56px; }
  .thr-steps { grid-template-columns: repeat(2, 1fr); }
  .uc-table-grid { grid-template-columns: 1fr; }
  .uc-pipe ol { grid-template-columns: repeat(2, 1fr); }
  .uc-pipe li { min-height: 88px; }
  .aud-line li { grid-template-columns: 54px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-orbit, .uc-arm-label > span, .uc-dot-live, .prod-breach-ring, .dom-pin-ring, .chn-smoke circle, .chn-train .chn-body, .uc-glyph::after, .uc-glyph--compass, .uc-scroll-cue i, [data-type-time] .t-caret, [data-type-scroll] .t-caret { animation: none !important; }
  .uc-live .uc-beat { opacity: 1; transform: none; }
}