.x-home {
  --x-surface: var(--platform-dark-surface);   --x-raised: var(--platform-dark-raised);     --x-line: var(--platform-dark-border);       --x-line-2: var(--platform-dark-border-strong); --x-text: var(--platform-dark-text);
  --x-muted: var(--platform-dark-muted);
  --x-blue: var(--platform-dark-accent);
  --x-blue-rgb: var(--platform-dark-accent-rgb);
  --x-heat: var(--ox-heat);
  --x-heat-soft: var(--ox-heat-soft);
  --x-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));   --x-copper-d: #8A4D2B; --x-copper-l: #C27A48;   --x-bolt-l: #9AA0A8; --x-bolt-d: #3A3D42; --x-patch: #7A2A22;
}
.x-home .v3-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.x-home .rh-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.x-home .rh-head .rh-h2 { text-wrap: balance; }
.x-home .rh-lead { text-wrap: pretty; }
.x-home .rh-section { padding-block: clamp(5rem, 10vw, 8rem); }
.x-home .rh-facts__v { text-wrap: pretty; }

.x-home .rh-hero.fx-armed { cursor: crosshair; }
.x-home .rh-hero.fx-armed a, .x-home .rh-hero.fx-armed button { cursor: pointer; }
.x-hot { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform-origin: 60% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .x-hot { animation: ox-kenburns 22s ease-in-out infinite alternate; }
}
.x-hot__m { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.x-hot__m[hidden] { display: none; }
.x-hot__ring {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, 0.8);
  box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.45);
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-slow) var(--x-ease), transform var(--dur-slow) var(--x-ease), border-color var(--dur-base) var(--ease-out), width var(--dur-base) var(--x-ease), height var(--dur-base) var(--x-ease), left var(--dur-base) var(--x-ease), top var(--dur-base) var(--x-ease);
}
.x-hot__ring::after {   content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: currentColor; color: var(--x-text);
}
.x-hot__m--watch .x-hot__ring { border-color: var(--x-heat-soft); color: var(--x-heat-soft); box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.45), 0 0 18px rgba(245, 158, 11, 0.45); }
.x-hot__m--watch .x-hot__ring::after { background: var(--x-heat-soft); }
.x-hot__m--watch .x-hot__ring::before {   content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--x-heat);
  opacity: 0;
}
.x-hot.is-armed .x-hot__ring { opacity: 1; transform: none; transition-delay: calc(var(--x-i) * 160ms), calc(var(--x-i) * 160ms), 0s, 0s, 0s, 0s, 0s; }
.x-hot.is-armed .x-hot__m--watch .x-hot__ring { transition-delay: 480ms, 480ms, 0s, 0s, 0s, 0s, 0s; }
.x-hot__m.is-on .x-hot__ring { width: 40px; height: 40px; left: -20px; top: -20px; }
@media (prefers-reduced-motion: no-preference) {
  .x-hot.is-armed .x-hot__m--watch .x-hot__ring::before { animation: x-ping 2.4s ease-out 900ms infinite; }
}
@keyframes x-ping { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.9); } }
.x-hot__tag {
  position: absolute; left: var(--x-shift, -90px); bottom: 28px; white-space: nowrap;
  padding: 0.3125rem 0.5rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--x-text); background: rgba(10, 10, 11, 0.82); border: 1px solid var(--x-line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--x-ease);
}
.x-hot__m--watch .x-hot__tag { color: var(--x-heat-soft); border-color: rgba(245, 158, 11, 0.55); }
.x-hot__m.is-below .x-hot__tag { bottom: auto; top: 28px; transform: translateY(-6px); }
.x-hot.is-armed .x-hot__m.is-on .x-hot__tag { opacity: 1; transform: none; }
.x-hot__tag { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--x-ease), bottom var(--dur-base) var(--x-ease); }
.x-hot--lens .x-hot__m:not(.is-below) .x-hot__tag { bottom: 98px; }
.x-hot__chip {
  position: absolute; left: 1rem; bottom: 0.875rem; display: none;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--x-muted);
  padding: 0.25rem 0.5rem; border-radius: 4px; background: rgba(10, 10, 11, 0.7);
}
@media (hover: none), (pointer: coarse) { .x-hot__chip { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .x-home .fx-telemetry { animation: x-tele-in var(--dur-enter) var(--x-ease) 700ms both; }
  .x-home .fx-telemetry__row { animation: x-fade var(--dur-slow) var(--ease-out) both; }
  .x-home .fx-telemetry__row:nth-of-type(2) { animation-delay: 900ms; }
  .x-home .fx-telemetry__row:nth-of-type(3) { animation-delay: 980ms; }
  .x-home .fx-telemetry__row:nth-of-type(4) { animation-delay: 1060ms; }
  .x-home .fx-telemetry__row:nth-of-type(5) { animation-delay: 1140ms; }
}
@keyframes x-tele-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }
.x-home .fx-telemetry__row { transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); margin-inline: -0.5rem; padding-inline: 0.5rem; border-radius: 4px; }
.x-home .fx-telemetry__row.x-linked { background: rgba(245, 158, 11, 0.08); box-shadow: inset 2px 0 0 var(--x-heat); }

.x-gap {
  margin: 0; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--radius-xl);
}
.x-gap:not(.x-on) .x-gap__read, .x-gap:not(.x-on) .x-gap__chart, .x-gap:not(.x-on) .x-gap__foot { display: none; }
.x-gap__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
.x-gap__title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--x-text); }
.x-gap__tag { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--x-muted); }
.x-gap__read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.x-gap__card { padding: 0.875rem 1rem; border: 1px solid var(--x-line); border-radius: var(--radius-md); background: var(--platform-dark-bg); transition: border-color var(--dur-base) var(--ease-out); }
.x-gap__k { margin: 0 0 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--x-muted); display: flex; align-items: center; gap: 0.5rem; }
.x-gap__card--scan .x-gap__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--x-text); }
.x-gap__card--live .x-gap__k::before { content: ""; width: 14px; height: 2px; background: var(--x-text); }
.x-gap__v { margin: 0; font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--x-text); transition: color var(--dur-base) var(--ease-out); }
.x-gap__v[data-band="watch"] { color: var(--x-heat-soft); }
.x-gap__v[data-band="hot"] { color: var(--x-heat); }
.x-gap__s { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--x-muted); min-height: 1.45em; }
.x-gap[data-state="watch"] .x-gap__card--live, .x-gap[data-state="hot"] .x-gap__card--live { border-color: rgba(245, 158, 11, 0.5); }

.x-gap__chart {
  position: relative; height: clamp(220px, 28vw, 320px);
  border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.x-gap__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.x-gap__thr { stroke: var(--x-line-2); stroke-width: 1; stroke-dasharray: 4 5; }
.x-gap__round { stroke: var(--x-line); stroke-width: 1; }
.x-gap__ghost { fill: none; stroke: rgba(250, 250, 250, 0.16); stroke-width: 1.5; stroke-dasharray: 2 4; }
.x-gap__fill { fill: rgba(245, 158, 11, 0.14); }
.x-gap__flat { stroke: var(--x-text); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.75; }
.x-gap__line { fill: none; stroke: var(--x-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.x-gap__line--hot { stroke: var(--x-heat-soft); }
.x-gap__lab.x-gap__lab--flat { transform: translate(-100%, 45%); padding-right: 0.625rem; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.x-gap__lab.x-gap__lab--flat.is-on { opacity: 1; }
.x-gap__lab--thr { left: auto !important; right: 0; text-align: right; }
.x-gap__lab { position: absolute; transform: translateY(-120%); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--x-muted); white-space: nowrap; pointer-events: none; }
.x-gap__lab.x-gap__lab--flag { transform: translate(-50%, -190%); color: var(--x-heat-soft); padding: 0.125rem 0.375rem; border-radius: 4px; background: rgba(10, 10, 11, 0.85); border: 1px solid rgba(245, 158, 11, 0.5); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.x-gap__lab.x-gap__lab--flag.is-on { opacity: 1; }
.x-gap__dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.5); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--x-ease); }
.x-gap__dot.is-on { opacity: 1; transform: none; }
.x-gap__dot--scan { background: var(--platform-dark-bg); border: 2px solid var(--x-text); }
.x-gap__dot--flag { background: var(--x-heat); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22); }
.x-gap__axis { position: absolute; left: 0; right: 0; bottom: -1.75rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--x-muted); pointer-events: none; }
.x-gap__scrub { position: absolute; inset: 0; outline: none; border-radius: 4px; }
.x-gap__scrub:focus-visible { box-shadow: 0 0 0 2px var(--x-blue); }
.x-gap__knob {
  position: absolute; top: -6px; bottom: -6px; left: 0; width: 0; pointer-events: none;
  border-left: 1px solid var(--x-blue);
}
.x-gap__knob::before {
  content: ""; position: absolute; left: -9px; top: -9px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--x-blue); box-shadow: 0 0 0 4px rgba(var(--x-blue-rgb), 0.22);
  transition: transform var(--dur-fast) var(--ease-out);
}
.x-gap__chart:hover .x-gap__knob::before, .x-gap__scrub:focus-visible .x-gap__knob::before { transform: scale(1.15); }
.x-gap__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2.75rem; }
.x-gap__play {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0 1rem 0 0.75rem;
  border: 1px solid var(--x-line-2); border-radius: 999px; background: transparent; color: var(--x-text);
  font: 500 0.875rem var(--font-body); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.x-gap__play:hover { border-color: var(--x-blue); background: rgba(var(--x-blue-rgb), 0.08); }
.x-gap__play-i { width: 0; height: 0; border-left: 9px solid var(--x-blue); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.x-gap.is-playing .x-gap__play-i { width: 9px; height: 11px; border: 0; border-left: 3px solid var(--x-blue); border-right: 3px solid var(--x-blue); }
.x-gap__hint { margin: 0; font-size: 0.875rem; color: var(--x-muted); }
.x-gap .rh-cap { margin-top: 1rem; }
.x-home #problem .rh-points { margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (hover: none) { .x-gap__hint { display: none; } }
@media (max-width: 47.99em) {
  .x-gap__read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
  .x-gap__card { padding: 0.75rem; }
  .x-gap__s { font-size: 0.8125rem; }
  .x-gap__axis span:nth-child(2) { display: none; }
}

.x-stage { display: grid; gap: 1.5rem; }
.x-stage__tag { display: none; margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--x-muted); }
.x-stage__tag span:first-child { color: var(--x-blue); }
.x-stage__panel { margin: 0; }
.x-stage__panel .rh-film { margin: 0; }
.x-stage__cap { margin: 0.875rem 0 0; max-width: 72ch; font-size: 0.875rem; line-height: 1.55; color: var(--x-muted); }

.x-sense, .x-alert, .x-log {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--x-line); border-radius: var(--radius-xl); background: var(--platform-dark-bg);
  background-image: radial-gradient(60% 70% at 30% 40%, rgba(var(--x-blue-rgb), 0.06), transparent 70%);
}
.x-sense { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 1rem; padding: 0 clamp(1rem, 4%, 2.5rem); }
.x-sense__bar {
  position: relative; justify-self: center; width: clamp(64px, 26%, 96px); height: 82%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12%;
  border-radius: 6px; background: linear-gradient(90deg, var(--x-copper-d), var(--x-copper-l) 45%, var(--x-copper-d));
}
.x-sense__bolt { width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--x-bolt-l), var(--x-bolt-d) 70%); box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.35); }
.x-sense__patch { width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--x-patch); box-shadow: 0 0 0 2px rgba(10,10,11,0.4), 0 0 24px rgba(245, 158, 11, 0.35); }
.x-sense__reads { display: grid; gap: 0.5rem; }
.x-sense__reads p { margin: 0; display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.75rem; border: 1px solid var(--x-line); border-radius: 8px; background: var(--x-surface); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--x-muted); }
.x-sense__reads b { font-weight: 500; color: var(--x-text); font-variant-numeric: tabular-nums; }
.x-sense__reads p:last-child b { color: var(--x-blue); }
.x-alert { display: grid; align-content: center; justify-items: center; gap: 1.25rem; padding: 1rem; }
.x-alert__card { width: min(100%, 340px); padding: 1rem 1.125rem; border-radius: 10px; background: var(--x-surface); border: 1px solid rgba(245, 158, 11, 0.55); box-shadow: inset 3px 0 0 var(--x-heat); }
.x-alert__lvl { margin: 0 0 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--x-heat-soft); }
.x-alert__asset { margin: 0 0 0.75rem; font-weight: 600; color: var(--x-text); }
.x-alert__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.x-alert__dl dt { font-size: 0.75rem; color: var(--x-muted); }
.x-alert__dl dd { margin: 0; font-family: var(--font-mono); font-size: 1.125rem; color: var(--x-text); font-variant-numeric: tabular-nums; }
.x-alert__path { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.75rem; color: var(--x-muted); }
.x-alert__path li { padding: 0.25rem 0.625rem; border: 1px solid var(--x-line-2); border-radius: 999px; }
.x-alert__path { gap: 1.75rem; }
.x-alert__path li { position: relative; }
.x-alert__path li + li::before { content: "→"; position: absolute; left: -1.3rem; top: 50%; transform: translateY(-50%); color: var(--x-muted); }
.x-log { display: grid; align-content: center; padding: clamp(0.75rem, 3%, 1.75rem); font-family: var(--font-mono); font-size: 0.75rem; }
.x-log__row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 5.5em; gap: 0.75rem; padding: 0.5625rem 0.25rem; border-bottom: 1px solid var(--x-line); color: var(--x-text); font-variant-numeric: tabular-nums; }
.x-log__row span:first-child, .x-log__row span:last-child { color: var(--x-muted); }
.x-log__row--head { color: var(--x-muted); font-size: 0.6875rem; letter-spacing: 0.04em; }
.x-log__export { justify-self: end; margin: 0.875rem 0 0; padding: 0.25rem 0.625rem; border: 1px solid var(--x-line-2); border-radius: 6px; color: var(--x-text); }

.x-how--live { align-items: start; }
.x-how--live .x-stage { position: sticky; top: calc(var(--nav-h) + 2rem); gap: 0.875rem; }
.x-how--live .x-stage__tag { display: block; }
.x-how--live .x-stage__panel { grid-area: 2 / 1; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.985); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--x-ease), visibility 0s linear var(--dur-slow); }
.x-how--live .x-stage__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-slow) var(--ease-out) 80ms, transform var(--dur-slow) var(--x-ease) 80ms, visibility 0s; }
.x-how--live .x-stage__tag { grid-area: 1 / 1; }
.x-how--live .rh-steps li { padding-block: 2.75rem; transition: color var(--dur-slow) var(--ease-out); }
.x-how--live .rh-steps li:first-child { padding-top: 0.5rem; }
.x-how--live .rh-steps li:last-child { padding-bottom: 14vh; }
.x-how--live .rh-steps h3 { color: var(--x-muted); transition: color var(--dur-slow) var(--ease-out); font-size: 1.375rem; }
.x-how--live .rh-steps li.is-active h3 { color: var(--x-text); }
.x-how--live .rh-steps li.is-active p { color: var(--x-text); }
.x-how--live .rh-steps p { transition: color var(--dur-slow) var(--ease-out); }
.x-how--live .rh-steps::after { animation: none !important; transform-origin: 50% 0; transform: scaleY(var(--x-rail, 0)); transition: transform var(--dur-slow) var(--x-ease); }
.x-how--live .rh-steps li::before { transition: background-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.x-how--live .rh-steps li.is-active::before, .x-how--live .rh-steps li.is-past::before { background: var(--x-blue); }
.x-how--live .rh-steps li.is-active::before { box-shadow: 0 0 0 4px rgba(var(--x-blue-rgb), 0.22); }
.x-how--live .rh-steps li:first-child::before { top: 0.85rem; }
.x-how--live .rh-steps li::before { top: 3.05rem; }
.x-how:not(.x-how--live) .x-stage { margin-top: 1rem; }
@media (min-width: 64em) {
  .x-how:not(.x-how--live) .x-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 63.99em) {
  .x-how:not(.x-how--live) .x-stage {
    display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter, 1rem)); padding: 0.25rem var(--gutter, 1rem) 0.5rem; scroll-padding-inline: var(--gutter, 1rem);
    scrollbar-width: none;
  }
  .x-how:not(.x-how--live) .x-stage::-webkit-scrollbar { display: none; }
  .x-how:not(.x-how--live) .x-stage__panel { flex: 0 0 min(86%, 30rem); scroll-snap-align: start; }
  .x-how:not(.x-how--live) .x-stage:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; }
  .x-how:not(.x-how--live) .x-stage__swipe { display: block; }
  .x-how:not(.x-how--live) { row-gap: 1rem; }
  .x-how:not(.x-how--live) .rh-steps { margin-bottom: 1.5rem; }
  .x-how:not(.x-how--live) .x-stage { margin-top: 0; }
}
.x-stage__swipe { display: none; margin: 0.25rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--x-muted); }
@media (max-width: 47.99em) {
  .x-sense { aspect-ratio: 4 / 3; grid-template-columns: 64px minmax(0, 1fr); padding: 0 0.875rem; }
  .x-sense__bar { width: 52px; }
  .x-sense__reads p { padding: 0.5rem 0.625rem; font-size: 0.75rem; white-space: nowrap; gap: 0.5rem; }
  .x-log { aspect-ratio: auto; }
  .x-log__row { grid-template-columns: 5.5em minmax(0, 1fr); }
  .x-log__row span:last-child { display: none; }
  .x-alert { aspect-ratio: auto; padding: 1.5rem 1rem; }
}

.x-roles--tabs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0; align-items: start; }
.x-roles--tabs > .rh-head { grid-column: 1; grid-row: 1; margin-bottom: 2rem; }
.x-roles--tabs > .x-roles__tabs { grid-column: 1; grid-row: 2; }
.x-roles--tabs > .rh-roles { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex !important; }
.x-roles--tabs > .rh-roles > li { flex: 1 1 auto; }
.x-roles__tabs { display: grid; gap: 0.25rem; position: relative; }
.x-roles__tabs[hidden] { display: none; }
.x-roles__tabs [role="tab"] {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; min-height: 56px; padding: 0 1rem;
  border: 1px solid transparent; border-radius: var(--radius-md); background: transparent;
  color: var(--x-muted); font: 500 1rem var(--font-body); text-align: left; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.x-roles__tabs [role="tab"]:hover { color: var(--x-text); background: rgba(250, 250, 250, 0.03); }
.x-roles__tabs [role="tab"][aria-selected="true"] { color: var(--x-text); background: var(--x-surface); border-color: var(--x-line); }
.x-roles__tabs [role="tab"]:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; }
.x-roles__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--x-muted); }
.x-roles__tabs [aria-selected="true"] .x-roles__n { color: var(--x-blue); }
.x-roles--tabs .rh-roles { display: block !important; margin: 0; }
.x-roles--tabs .rh-roles li[hidden] { display: none !important; }
.x-roles--tabs .rh-roles li {
  min-height: 280px; padding: clamp(1.75rem, 4vw, 3rem) !important; justify-content: flex-start;
  background-color: var(--x-surface); border-color: var(--x-line) !important; border-radius: var(--radius-xl);
}
.x-roles--tabs .rh-roles li::before { display: none; }
.x-roles--tabs .rh-roles li:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; }
.x-roles--tabs .rh-roles h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1rem; }
.x-roles--tabs .rh-roles p { flex: none; max-width: 52ch; font-size: var(--fs-lede); line-height: 1.6; margin-bottom: 1.75rem; }
.x-roles--tabs .rh-roles .rh-link { margin-right: 1.5rem; }
.x-roles--tabs .rh-roles li > .rh-link { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .x-roles--tabs .rh-roles li:not([hidden]) > * { animation: x-role-in var(--dur-slow) var(--x-ease) both; }
  .x-roles--tabs .rh-roles li:not([hidden]) > :nth-child(2) { animation-delay: 50ms; }
  .x-roles--tabs .rh-roles li:not([hidden]) > :nth-child(n+3) { animation-delay: 100ms; }
}
@keyframes x-role-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .x-roles--tabs .rh-roles li:not([hidden]) > * { animation: x-fade var(--dur-slow) var(--ease-out) both; }
}
@media (max-width: 63.99em) {
  .x-roles--tabs { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .x-roles--tabs > .rh-head, .x-roles--tabs > .x-roles__tabs, .x-roles--tabs > .rh-roles { grid-column: 1; grid-row: auto; }
  .x-roles--tabs > .rh-head { margin-bottom: 0.75rem; }
  .x-roles__tabs { display: flex; gap: 0.375rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 1rem)); padding: 2px var(--gutter, 1rem); scroll-padding-inline: var(--gutter, 1rem); }
  .x-roles__tabs::-webkit-scrollbar { display: none; }
  .x-roles__tabs [role="tab"] { flex: none; width: auto; min-height: 44px; padding: 0 0.875rem; border-color: var(--x-line); border-radius: 999px; font-size: 0.875rem; gap: 0.5rem; }
  .x-roles--tabs .rh-roles li { min-height: 0; }
}

.x-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--x-line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--x-muted); }
.x-roles--tabs .rh-roles li > .x-loop { margin-top: 2rem; }
.x-loop__k { margin-right: 0.25rem; }
.x-loop__s { display: inline-flex; align-items: center; gap: 0.5rem; }
.x-loop__s i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--x-line-2); }
.x-loop__s.is-on { color: var(--x-text); }
.x-loop__s.is-on i { background: var(--x-blue); border-color: var(--x-blue); box-shadow: 0 0 0 3px rgba(var(--x-blue-rgb), 0.22); }
.x-roles__tabs [role="tab"][aria-selected="true"] { box-shadow: inset 2px 0 0 var(--x-blue); }
@media (max-width: 63.99em) { .x-roles__tabs [role="tab"][aria-selected="true"] { box-shadow: none; border-color: var(--x-blue); } }

@media (prefers-reduced-motion: reduce) {
  .x-hot__ring, .x-hot__tag { transition: opacity var(--dur-base) var(--ease-out); transform: none !important; }
  .x-gap__dot, .x-gap__knob::before { transition: opacity var(--dur-base) var(--ease-out); transform: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .x-how--live .x-stage__panel.is-active .x-sense__reads p,
  .x-how--live .x-stage__panel.is-active .x-log__row,
  .x-how--live .x-stage__panel.is-active .x-alert__path li { animation: x-rise var(--dur-slow) var(--x-ease) both; }
  .x-how--live .x-stage__panel.is-active :is(.x-sense__reads p, .x-log__row, .x-alert__path li):nth-child(2) { animation-delay: 90ms; }
  .x-how--live .x-stage__panel.is-active :is(.x-sense__reads p, .x-log__row, .x-alert__path li):nth-child(3) { animation-delay: 180ms; }
  .x-how--live .x-stage__panel.is-active .x-log__row:nth-child(4) { animation-delay: 270ms; }
  .x-how--live .x-stage__panel.is-active .x-log__row:nth-child(5) { animation-delay: 360ms; }
  .x-how--live .x-stage__panel.is-active .x-alert__card { animation: x-rise var(--dur-slow) var(--x-ease) both; }
  .x-how--live .x-stage__panel.is-active .x-sense__patch { animation: x-glow 2.4s ease-in-out 400ms infinite alternate; }
}
@keyframes x-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes x-glow { from { box-shadow: 0 0 0 2px rgba(10,10,11,0.4), 0 0 12px rgba(245, 158, 11, 0.2); } to { box-shadow: 0 0 0 2px rgba(10,10,11,0.4), 0 0 30px rgba(245, 158, 11, 0.5); } }

.x-case-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: auto; }
.x-home .rh-case .x-case-foot .rh-link { margin-top: 0; }
.x-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.75rem;
  border: 1px solid var(--x-line-2); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--x-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.x-chip:hover { color: var(--x-text); border-color: var(--x-blue); background: rgba(var(--x-blue-rgb), 0.08); }
.x-chip:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 2px; color: var(--x-text); }
@media (pointer: coarse) { .x-chip { min-height: 44px; } }
.x-ind { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--x-line); }
.x-ind__k { flex: 1 0 100%; margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--x-muted); }
.x-ind__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.x-ind .rh-link { margin-left: auto; }
@media (max-width: 47.99em) { .x-ind .rh-link { margin-left: 0; } }

.x-live {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; row-gap: 0.25rem; align-items: center;
  margin-top: 1.25rem; padding: 1.25rem 1.5rem; text-decoration: none;
  border: 1px solid var(--x-line); border-radius: var(--radius-md); background: var(--x-surface);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.x-live__k { grid-column: 1; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--x-muted); }
.x-live__t { grid-column: 1; font-size: 1.25rem; font-weight: 600; color: var(--x-text); }
.x-live__d { grid-column: 1; max-width: 64ch; font-size: 0.9375rem; line-height: 1.55; color: var(--x-muted); }
.x-live__go {
  grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--x-blue); color: var(--platform-dark-bg); font-size: 1.25rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.x-live:hover { border-color: var(--x-blue); background: var(--x-raised); }
.x-live:hover .x-live__go { transform: translateX(4px); }
.x-live:focus-visible { outline: 2px solid var(--x-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .x-live:hover .x-live__go { transform: none; } }
@media (max-width: 47.99em) { .x-live { padding: 1.125rem; column-gap: 1rem; } .x-live__go { width: 40px; height: 40px; } }

.x-home .x-interlude::before {
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--platform-dark-bg) 90%, transparent) 0%, color-mix(in srgb, var(--platform-dark-bg) 45%, transparent) 52%, color-mix(in srgb, var(--platform-dark-bg) 8%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--platform-dark-bg) 70%, transparent), transparent 40%);
}
@media (min-width: 48em) {
  .x-home .x-interlude .container { align-items: flex-end; }
  .x-home .x-interlude .container > * { width: min(100%, 34rem); max-width: none; }
}
.x-spot { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.x-spot__ring {
  position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid var(--x-heat); opacity: 0;
}
.x-spot__tag {
  position: absolute; left: var(--x-shift, -100px); bottom: 58px; white-space: nowrap;
  padding: 0.3125rem 0.5625rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--x-heat-soft);
  background: color-mix(in srgb, var(--platform-dark-bg) 82%, transparent); border: 1px solid color-mix(in srgb, var(--x-heat) 55%, transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease-out) 300ms, transform var(--dur-slow) var(--ease-out) 300ms;
}
.x-spot__tag b { font-weight: 500; color: var(--x-text); }
.is-seen .x-spot__tag { opacity: 1; transform: none; }
.is-seen .x-spot__ring { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .is-seen .x-spot__ring { animation: x-spot-ping 2.6s var(--ease-out) 2 both; }
}
@keyframes x-spot-ping { 0% { opacity: 0.95; transform: scale(0.55); } 70% { opacity: 0.25; transform: scale(1.25); } 100% { opacity: 0.85; transform: none; } }
@media (max-width: 47.99em) {
  .x-home .x-interlude .ox-interlude__img { background-position: 20% 50%; }   .x-spot__ring { left: -30px; top: -30px; width: 60px; height: 60px; }
  .x-spot__tag { bottom: 40px; font-size: 0.6875rem; }
}

@media (min-width: 64em) and (max-width: 79.99em) and (min-aspect-ratio: 4/5) {
  .x-home .rh-hero__lead { max-width: 30rem; }
}