.xe1-round { fill: none; stroke: var(--xw-line-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.xe1-hot { fill: rgba(var(--sev-adv-rgb, 252, 211, 77), 0.14); stroke: var(--sev-adv, #FCD34D); stroke-width: 1.5; }
.xe1-dot { fill: var(--sev-adv, #FCD34D); }
.xwho--eq .xe1-ping { stroke: var(--sev-adv, #FCD34D); }
.xe1-you { fill: var(--xw-blue); }
.xe1-route { fill: none; stroke: var(--xw-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.xe1-rdot { fill: var(--sev-adv, #FCD34D); }
.xe1-gdot { fill: var(--xw-line-2); }

.xe2-zone { fill: none; stroke: var(--xw-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xe2-wet { fill: none; stroke: var(--sev-crit, #F87171); stroke-width: 3.25; stroke-linecap: round; stroke-linejoin: round; }
.xe2-pool { fill: rgba(148, 163, 184, 0.45); transform-box: fill-box; transform-origin: center; }
.xe2-note__box { fill: rgba(var(--sev-crit-rgb, 248, 113, 113), 0.12); stroke: var(--sev-crit, #F87171); stroke-width: 1.25; }
.xe2-note__dot { fill: var(--sev-crit, #F87171); }
.xe2-ok { opacity: 0; }

.xe3-slot { fill: none; stroke: var(--xw-line-2); stroke-width: 1.25; stroke-dasharray: 3 3; }
.xe3-tint { fill: rgba(var(--sev-adv-rgb, 252, 211, 77), 0.1); stroke: rgba(var(--sev-adv-rgb, 252, 211, 77), 0.55); stroke-width: 1.25; }
.xe3-sp { fill: none; stroke: var(--xw-blue); stroke-width: 1.5; stroke-linejoin: round; }
.xe3-hot { fill: none; stroke: var(--sev-adv, #FCD34D); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.xe3-dot { fill: var(--sev-adv, #FCD34D); }

.xwho.is-anim .xe1-hot, .xwho.is-anim .xe1-flag { animation: xw-a20 var(--xw-T) linear infinite; }
.xwho.is-anim .xe1-route { animation: xe-draw40 var(--xw-T) var(--ease-in-out, ease) infinite; }
.xwho.is-anim .xe1-row { animation: xw-slide56 var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xe1-ok { animation: xa-p79 var(--xw-T) var(--ease-out, ease) infinite; }

.xwho.is-anim .xe2-wet { animation: xe2-wet var(--xw-T) linear infinite; }
.xwho.is-anim .xe2-pool { animation: xe2-pool var(--xw-T) var(--ease-out, ease) infinite; }
.xwho.is-anim .xe2-note, .xwho.is-anim .xe2-time { animation: xe-a35 var(--xw-T) linear infinite; }
.xwho.is-anim .xe2-ok { animation: xe-p82 var(--xw-T) var(--ease-out, ease) infinite; }

.xwho.is-anim .xe3-hot { animation: xw2-draw var(--xw-T) var(--ease-in, ease-in) infinite; }
.xwho.is-anim .xe3-dot, .xwho.is-anim .xe3-tint { animation: xw-a40 var(--xw-T) linear infinite; }
.xwho.is-anim .xe3-row--hot { animation: xe3-up80 var(--xw-T) var(--ease-in-out, ease) infinite; }
.xwho.is-anim .xe3-row--b { animation: xe3-up26 var(--xw-T) var(--ease-in-out, ease) infinite; }
.xwho.is-anim .xe3-row--c { animation: xe3-in62 var(--xw-T) linear infinite; }
.xwho.is-anim .xe3-ok { animation: xa-p79 var(--xw-T) var(--ease-out, ease) infinite; }

.xwho.is-anim .xe1-hot, .xwho.is-anim .xe1-flag, .xwho.is-anim .xe1-route, .xwho.is-anim .xe1-row, .xwho.is-anim .xe1-ok,
.xwho.is-anim .xe2-wet, .xwho.is-anim .xe2-pool, .xwho.is-anim .xe2-note, .xwho.is-anim .xe2-time, .xwho.is-anim .xe2-ok,
.xwho.is-anim .xe3-hot, .xwho.is-anim .xe3-dot, .xwho.is-anim .xe3-tint, .xwho.is-anim .xe3-row--hot, .xwho.is-anim .xe3-row--b,
.xwho.is-anim .xe3-row--c, .xwho.is-anim .xe3-ok { animation-delay: var(--xw-start); }

@keyframes xe-draw40 { 0%, 40% { stroke-dashoffset: 1; opacity: 1; } 54%, 95% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xe-a35 { 0%, 34% { opacity: 0; } 37%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes xe-p82 { 0%, 81% { opacity: 0; transform: scale(0.4); } 84% { opacity: 1; transform: scale(1.18); } 86%, 95% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(1); } }
@keyframes xe2-wet { 0%, 24% { opacity: 0; } 27%, 79% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes xe2-pool { 0%, 24% { opacity: 0; transform: scale(0.2); } 40%, 79% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1); } }
@keyframes xe3-up80 { 0% { opacity: 0; transform: translateY(80px); } 4%, 50% { opacity: 1; transform: translateY(80px); } 60%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xe3-up26 { 0% { opacity: 0; transform: translateY(26px); } 4%, 50% { opacity: 1; transform: translateY(26px); } 60%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes xe3-in62 { 0%, 56% { opacity: 0; } 62%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }