@property --sepn{syntax: "<number>"; inherits: true; initial-value: 0;}@property --hot{syntax: "<number>"; inherits: false; initial-value: 0;}@property --pk{syntax: "<number>"; inherits: false; initial-value: 0;}.fig--x3{container-type:inline-size;aspect-ratio:100 / 112}.x3{--u: 1cqw;--sepn: 0;--pw: calc(40 * var(--u));--ph: calc(28 * var(--u));--d: calc(2.6 * var(--u));--sep: calc(var(--d) + 8px + var(--sepn) * 18px);--ax: calc(28 * var(--u));--ay: calc(62 * var(--u));--rise: .848;position:absolute;inset:0}.x3-tilt{--px: 0deg;--py: 0deg;position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(2400px) rotateX(var(--py)) rotateY(var(--px));will-change:transform}.x3-axis{position:absolute;left:var(--ax);top:calc(8 * var(--u));bottom:calc(14 * var(--u));width:1px;margin-left:-.5px;background:repeating-linear-gradient(to bottom,rgba(var(--teal-rgb),.5) 0 calc(1.5 * var(--u)),transparent calc(1.5 * var(--u)) calc(2.5 * var(--u)));opacity:.6}.x3-stage{position:absolute;left:var(--ax);top:var(--ay);width:0;height:0;transform-style:preserve-3d;transform:rotateX(58deg) rotate(-34deg)}.x3-plate{position:absolute;left:calc(var(--pw) / -2);top:calc(var(--ph) / -2);width:var(--pw);height:var(--ph);transform-style:preserve-3d;transform:translateZ(calc(var(--k) * var(--sep)))}.x3-face{--hot: 0;position:absolute;inset:0;border-radius:2px;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.07),0 0 0 1px rgba(var(--teal-rgb),calc(.55 * var(--hot))),0 0 46px -6px rgba(var(--teal-rgb),calc(.55 * var(--hot)))}.x3-paint{position:absolute;inset:0;border-radius:2px;background:var(--plate-face);box-shadow:var(--plate-highlight)}.x3-face:before{content:"";position:absolute;inset:0;z-index:1;border-radius:2px;padding:1px;background:var(--plate-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:calc(.75 + .25 * var(--hot));pointer-events:none}.x3-face:after{content:"";position:absolute;inset:0;border-radius:2px;background:rgba(var(--teal-rgb),.14);opacity:var(--hot);pointer-events:none}.x3-side{position:absolute;background:linear-gradient(#0b0c0e,#060708)}.x3-side--b{left:0;right:0;top:100%;height:var(--d);transform-origin:top;transform:rotateX(-90deg);border-bottom:1px solid rgba(var(--teal-rgb),.35)}.x3-side--l{top:0;bottom:0;right:100%;width:var(--d);transform-origin:right;transform:rotateY(-90deg);background:linear-gradient(90deg,#0d0f11,#08090a);border-bottom:1px solid rgba(var(--teal-rgb),.18)}.x3-packet{position:absolute;left:var(--ax);top:var(--ay);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--teal);box-shadow:0 0 6px var(--teal),0 0 14px rgba(var(--teal-rgb),.7);--pk: 0;opacity:0;transform:translateY(calc(-1 * var(--rise) * var(--sep) * var(--pk))) translateZ(200px)}.x3-labels{list-style:none;margin:0;padding:0;position:absolute;inset:0}.x3-label{position:absolute;left:calc(55 * var(--u));top:calc(var(--ay) - var(--rise) * var(--k) * var(--sep));display:flex;align-items:center;gap:8px;height:0;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:.1em;text-transform:uppercase;line-height:1}.x3-leader{width:calc(4 * var(--u));height:1px;background:var(--teal-line);flex:none}.x3-id{color:var(--teal)}.x3-nm{color:var(--ink-2);font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.07em}.x3.is-live{animation:x3-separate 15s var(--ease-inout) infinite}.x3.is-live .x3-packet{animation:x3-packet 15s linear infinite}.x3.is-live .x3-plate[style*="--k: 0"] .x3-face{animation:x3-hot-0 15s linear infinite}.x3.is-live .x3-plate[style*="--k: 1"] .x3-face{animation:x3-hot-1 15s linear infinite}.x3.is-live .x3-plate[style*="--k: 2"] .x3-face{animation:x3-hot-2 15s linear infinite}.x3.is-live .x3-plate[style*="--k: 3"] .x3-face{animation:x3-hot-3 15s linear infinite}.x3.is-live .x3-plate[style*="--k: 4"] .x3-face{animation:x3-hot-4 15s linear infinite}.x3.is-live .x3-plate[style*="--k: 5"] .x3-face{animation:x3-hot-5 15s linear infinite}@keyframes x3-separate{0%{--sepn: 0}40%{--sepn: 1}60%{--sepn: 1}87%{--sepn: 0}to{--sepn: 0}}@keyframes x3-packet{0%,38%{--pk: 0;opacity:0}40%{--pk: 0;opacity:1}56%{--pk: 5;opacity:1}58%,to{--pk: 5;opacity:0}}@keyframes x3-hot-0{0%,39%{--hot: 0}41%{--hot: 1}49%,to{--hot: 0}}@keyframes x3-hot-1{0%,42.2%{--hot: 0}44.2%{--hot: 1}52.2%,to{--hot: 0}}@keyframes x3-hot-2{0%,45.4%{--hot: 0}47.4%{--hot: 1}55.4%,to{--hot: 0}}@keyframes x3-hot-3{0%,48.6%{--hot: 0}50.6%{--hot: 1}58.6%,to{--hot: 0}}@keyframes x3-hot-4{0%,51.8%{--hot: 0}53.8%{--hot: 1}61.8%,to{--hot: 0}}@keyframes x3-hot-5{0%,55%{--hot: 0}57%{--hot: 1}65%,to{--hot: 0}}@media(max-width:760px){.x3-label{font-size:9.5px;gap:6px}.x3-nm{font-size:10.5px}}@media(prefers-reduced-motion:reduce){.x3.is-live,.x3.is-live .x3-packet,.x3.is-live .x3-face{animation:none}.x3-tilt{transform:none}}
