.xwho {
  --xw-bg: #0A0A0B; --xw-card: #141417; --xw-raised: #1B1B1E;
  --xw-line: #27272A; --xw-line-2: #3F3F46;
  --xw-text: #FAFAFA; --xw-muted: #A1A1AA;
  --xw-blue: #50A2FF; --xw-heat: #F59E0B; --xw-heat-hi: #FCD34D; --xw-red: #F87171; --xw-ok: #4ADE80;
  --xw-T: 12s; --xw-start: -4.2s;
  color: var(--xw-text);
}
.xwho *, .xwho *::before, .xwho *::after { box-sizing: border-box; }
.xwho-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.xwho__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.xwho__head .rp-h2 { max-width: 640px; color: var(--xw-text); }
.xwho__bar { display: flex; align-items: center; gap: 0.75rem; }
.xwho__bar:not(:has(> :not([hidden]))) { display: none; }
.xwho__demo { padding: 0.1875rem 0.5rem; border: 1px solid var(--xw-line-2); border-radius: 4px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--xw-muted); white-space: nowrap; }
.xwho__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--xw-line-2); border-radius: 999px; background: var(--xw-card); color: var(--xw-text);
  font: 500 0.875rem var(--font-body, system-ui, sans-serif); cursor: pointer;
  transition: border-color var(--dur-fast, 160ms) var(--ease-out, ease), background-color var(--dur-fast, 160ms) var(--ease-out, ease);
}
.xwho__toggle[hidden] { display: none; }
.xwho__toggle:hover { border-color: var(--xw-blue); background: var(--xw-raised); }
.xwho__toggle:focus-visible { outline: 2px solid var(--xw-blue); outline-offset: 2px; }
.xwho__toggle svg { fill: currentColor; }
.xwho__ico-play { display: none; }
.xwho.is-paused .xwho__ico-play { display: block; }
.xwho.is-paused .xwho__ico-pause { display: none; }

.xwho__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin: 0; padding: 0; list-style: none; }
.xwho__tile { position: relative; min-width: 0; }
.xwho__scene {
  position: relative; overflow: hidden; border: 1px solid var(--xw-line); border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(80, 162, 255, 0.06), transparent 60%),
    var(--xw-card);
  padding: clamp(0.75rem, 1.6vw, 1.125rem);
}
.xwho__scene { transition: border-color var(--dur-base, 240ms) var(--ease-out, ease); }
.xwho__tile:hover .xwho__scene { border-color: var(--xw-line-2); }
.xwho__svg { display: block; width: 100%; height: auto; overflow: visible; }
.xwho__role { margin: 1.125rem 0 0.25rem; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--xw-muted); }
.xwho__title { margin: 0; font-size: var(--fs-title, 1.375rem); line-height: 1.35; font-weight: 600; color: var(--xw-text); text-wrap: balance; }

.xwho__svg path, .xwho__svg rect, .xwho__svg circle { stroke-linecap: round; stroke-linejoin: round; }
.xw-t { font-family: var(--font-mono); font-size: 14px; font-weight: 500; fill: var(--xw-muted); font-variant-numeric: tabular-nums; }
.xw-t--hi { fill: var(--xw-text); }
.xw-glyph * { fill: none; stroke: var(--xw-muted); stroke-width: 1.5; }
.xw-base { fill: none; stroke: var(--xw-line); stroke-width: 4; }
.xw1-seg { fill: none; stroke: var(--xw-blue); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; }
.xw1-ok circle { fill: var(--xw-card); stroke: var(--xw-blue); stroke-width: 1.5; }
.xw1-ok path { fill: none; stroke: var(--xw-blue); stroke-width: 1.75; }
.xw-pop { transform-box: fill-box; transform-origin: center; }
.xw-floor { stroke: var(--xw-line); stroke-width: 1.5; }
.xw-box-line { fill: var(--xw-raised); stroke: var(--xw-line-2); stroke-width: 1.5; }
.xw-inner { fill: none; stroke: var(--xw-line-2); stroke-width: 1.5; }
.xw-cable { fill: none; stroke: var(--xw-line-2); stroke-width: 2; }
.xw-dot { fill: var(--xw-blue); }
.xw1-link { fill: none; stroke: var(--xw-blue); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: 0.8; }
.xw-ping { fill: none; stroke: var(--xw-blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xw-ping--red { stroke: var(--xw-red); }
.xw-live, .xw-green { fill: var(--xw-ok); }
.xw1-ram { fill: var(--xw-line-2); stroke: var(--xw-muted); stroke-width: 1; }
.xw1-item { fill: var(--xw-raised); stroke: var(--xw-muted); stroke-width: 1.5; }
.xw1-item--1 { transform: translateX(29px); }
.xw1-item--2 { transform: translateX(97px); }
.xw1-item--3 { transform: translateX(165px); }
.xw1-roll { transform-box: fill-box; transform-origin: center; }
.xw1-roll circle { fill: var(--xw-card); stroke: var(--xw-muted); stroke-width: 1.5; }
.xw1-roll path { stroke: var(--xw-muted); stroke-width: 1.5; }
.xw-stud { fill: var(--xw-line-2); }

.xw-card { fill: var(--xw-raised); stroke: var(--xw-line-2); stroke-width: 1.5; }
.xw-rule { fill: none; stroke: var(--xw-line); stroke-width: 1; }
.xw-red { fill: var(--xw-red); }
.xw-patch { fill: none; stroke: var(--xw-muted); stroke-width: 1.5; }
.xw-bell { fill: none; stroke: var(--xw-muted); stroke-width: 1.5; }
.xw-base-dash { fill: none; stroke: var(--xw-line-2); stroke-width: 1.25; stroke-dasharray: 2 4; }
.xw2-norm { fill: none; stroke: var(--xw-blue); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.xw2-trend { fill: none; stroke: var(--xw-heat); stroke-width: 2.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.xw2-flag__pole { fill: none; stroke: var(--xw-heat-hi); stroke-width: 1.25; stroke-dasharray: 3 3; }
.xw2-flag__tip { fill: var(--xw-heat-hi); }
.xw-bracket { fill: none; stroke: var(--xw-muted); stroke-width: 1.25; }
.xw-clock { fill: none; stroke: var(--xw-muted); stroke-width: 1.5; }
.xw-slot { fill: var(--xw-raised); stroke: var(--xw-line-2); stroke-width: 1.25; }
.xw-slot--on { stroke: var(--xw-blue); stroke-width: 1.5; }
.xw-slot__line { stroke: var(--xw-line-2); stroke-width: 3; }
.xw2-q-red { opacity: 0; }
.xw-clip { fill: var(--xw-card); stroke: var(--xw-muted); stroke-width: 1.25; }
.xw2-done { fill: none; stroke: var(--xw-ok); stroke-width: 2.25; stroke-dasharray: 1; stroke-dashoffset: 0; }

.xw3-who * { fill: none; stroke: var(--xw-blue); stroke-width: 1.75; transition: stroke var(--dur-slow, 420ms) var(--ease-out, ease); }
.xw3-ray { fill: none; stroke: var(--xw-blue); stroke-width: 1.25; stroke-dasharray: 3 4; }
.xw-head1 { fill: var(--xw-line-2); }
.xw-head2 { fill: var(--xw-line); }
.xw3-band { fill: rgba(80, 162, 255, 0.10); stroke: rgba(80, 162, 255, 0.55); stroke-width: 1; transform: translateY(32px); }
.xw-ico-blue { fill: none; stroke: var(--xw-blue); stroke-width: 1.5; }
.xw-wrench { fill: none; stroke: var(--xw-muted); stroke-width: 1.4; }
.xw-bar { fill: var(--xw-line-2); }

.xwho.is-anim .xw-ping { animation: xw-ping 2.4s var(--ease-out, ease-out) infinite; }
.xwho.is-anim .xw-sensor--2 .xw-ping { animation-delay: -0.8s; }
.xwho.is-anim .xw-sensor--3 .xw-ping { animation-delay: -1.6s; }
.xwho.is-anim .xw-ping--red { animation-duration: 1.6s; }
.xwho.is-anim .xw-live { animation: xw-blink 2s ease-in-out infinite; }
.xwho.is-anim .xw1-item { animation: xw1-belt 4.5s linear infinite; }
.xwho.is-anim .xw1-item--2 { animation-delay: -1.5s; }
.xwho.is-anim .xw1-item--3 { animation-delay: -3s; }
.xwho.is-anim .xw1-ram { animation: xw1-ram 1.5s var(--ease-in-out, ease-in-out) infinite; }
.xwho.is-anim .xw1-roll { animation: xw-spin 1.2s linear infinite; }
.xwho.is-anim .xw3-ray { animation: xw-flow 1.2s linear infinite; }
.xwho.is-anim .xw1-link { animation: xw-up 0.9s linear infinite; }

.xwho.is-anim .xw1-seg--1 { animation: xw1-s1 var(--xw-T) linear infinite; }
.xwho.is-anim .xw1-seg--2 { animation: xw1-s2 var(--xw-T) linear infinite; }
.xwho.is-anim .xw1-seg--3 { animation: xw1-s3 var(--xw-T) linear infinite; }
.xwho.is-anim .xw1-ok--1 { animation: xw-p29 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw1-ok--2 { animation: xw-p61 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw1-ok--3 { animation: xw-p89 var(--xw-T) var(--ease-out, ease) infinite; }

.xwho.is-anim .xw2-norm { animation: xw2-draw-a var(--xw-T) linear infinite; }
.xwho.is-anim .xw2-trend { animation: xw2-draw var(--xw-T) var(--ease-in, ease-in) infinite; }
.xwho.is-anim .xw2-flag { animation: xw-a20 var(--xw-T) linear infinite; }
.xwho.is-anim .xw2-alert, .xwho.is-anim .xw2-now { animation: xw-a40 var(--xw-T) linear infinite; }
.xwho.is-anim .xw2-span { animation: xw-a46 var(--xw-T) linear infinite; }
.xwho.is-anim .xw2-top { animation: xw-slide56 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw2-q-red { animation: xw-off78 var(--xw-T) linear infinite; }
.xwho.is-anim .xw2-q-ok { animation: xw-on78 var(--xw-T) linear infinite; }
.xwho.is-anim .xw2-done { animation: xw2-done var(--xw-T) linear infinite; }

.xwho.is-anim .xw3-row--1 { animation: xw-row6 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw3-row--2 { animation: xw-row18 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw3-row--3 { animation: xw-row30 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw3-row--4 { animation: xw-row42 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xw3-who * { animation: xw3-who var(--xw-T) linear infinite; }
.xwho.is-anim .xw3-look { animation: xw-a54 var(--xw-T) linear infinite; }
.xwho.is-anim .xw3-band { animation: xw3-sweep var(--xw-T) var(--ease-in-out, ease-in-out) infinite; }

.xwho.is-anim .xw1-seg,
.xwho.is-anim .xw1-ok,
.xwho.is-anim .xw2-norm,
.xwho.is-anim .xw2-trend,
.xwho.is-anim .xw2-flag,
.xwho.is-anim .xw2-alert,
.xwho.is-anim .xw2-now,
.xwho.is-anim .xw2-span,
.xwho.is-anim .xw2-top,
.xwho.is-anim .xw2-q-red,
.xwho.is-anim .xw2-q-ok,
.xwho.is-anim .xw2-done,
.xwho.is-anim .xw3-row,
.xwho.is-anim .xw3-who *,
.xwho.is-anim .xw3-look,
.xwho.is-anim .xw3-band { animation-delay: var(--xw-start); }

.xwho.is-anim .xwho__tile:not(.is-run) * { animation-play-state: paused !important; } .xwho__tdemo { display: none; }
@media (max-width: 40em) {
  .xwho__tdemo { display: block; position: absolute; top: .5rem; right: .625rem; z-index: 1; padding: .1rem .4rem; border: 1px solid #3F3F46; border-radius: 4px; font-family: var(--font-mono, monospace); font-size: .625rem; letter-spacing: .06em; color: #A1A1AA; background: #0A0A0B; }
}

@keyframes xw-ping { 0% { opacity: 0.85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes xw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes xw-spin { to { transform: rotate(360deg); } }
@keyframes xw-flow { to { stroke-dashoffset: -14; } }
@keyframes xw-up { to { stroke-dashoffset: 5; } }
@keyframes xw1-belt { from { transform: translateX(0); } to { transform: translateX(204px); } }
@keyframes xw1-ram { 0%, 30%, 56%, 100% { transform: translateY(0); } 43% { transform: translateY(12px); } }

@keyframes xw1-s1 { 0% { stroke-dashoffset: 1; opacity: 1; } 28%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xw1-s2 { 0%, 32% { stroke-dashoffset: 1; opacity: 1; } 60%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xw1-s3 { 0%, 64% { stroke-dashoffset: 1; opacity: 1; } 88%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xw-p29 { 0%, 28% { opacity: 0; transform: scale(0.4); } 31% { opacity: 1; transform: scale(1.18); } 33%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(1); } }
@keyframes xw-p61 { 0%, 60% { opacity: 0; transform: scale(0.4); } 63% { opacity: 1; transform: scale(1.18); } 65%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(1); } }
@keyframes xw-p89 { 0%, 88% { opacity: 0; transform: scale(0.4); } 91% { opacity: 1; transform: scale(1.18); } 93%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(1); } }

@keyframes xw2-draw-a { 0%, 3% { stroke-dashoffset: 1; opacity: 1; } 20%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xw2-draw { 0%, 20% { stroke-dashoffset: 1; opacity: 1; } 40%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xw-a20 { 0%, 19% { opacity: 0; } 22%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes xw-a40 { 0%, 39% { opacity: 0; } 41%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes xw-a46 { 0%, 45% { opacity: 0; } 49%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes xw-a54 { 0%, 53% { opacity: 0; } 57%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes xw-slide56 { 0%, 55% { opacity: 0; transform: translateX(-28px); } 61%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xw-off78 { 0%, 77% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes xw-on78 { 0%, 77% { opacity: 0; } 79%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes xw2-done { 0%, 70% { stroke-dashoffset: 1; opacity: 1; } 77%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }

@keyframes xw-row6 { 0%, 5% { opacity: 0; transform: translateX(-8px); } 9%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xw-row18 { 0%, 17% { opacity: 0; transform: translateX(-8px); } 21%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xw-row30 { 0%, 29% { opacity: 0; transform: translateX(-8px); } 33%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xw-row42 { 0%, 41% { opacity: 0; transform: translateX(-8px); } 45%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xw3-who { 0%, 52% { stroke: #A1A1AA; } 56%, 95% { stroke: #50A2FF; } 99%, 100% { stroke: #A1A1AA; } }
@keyframes xw3-sweep {
  0%, 55% { opacity: 0; transform: translateY(0); }
  59%, 63% { opacity: 1; transform: translateY(0); }
  69%, 72% { opacity: 1; transform: translateY(32px); }
  78%, 81% { opacity: 1; transform: translateY(64px); }
  87%, 92% { opacity: 1; transform: translateY(96px); }
  97%, 100% { opacity: 0; transform: translateY(96px); }
}

@media (max-width: 900px) {
  .xwho__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 2rem; }
}
@media (max-width: 480px) {
  .xwho__head { align-items: flex-start; }
  .xwho__title { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xwho * { animation: none !important; }
}