/* Security: your team passes Axis Edge, anyone else is stopped; the server only
   reaches out through an encrypted tunnel and backs up daily.
   Positions are % of a fixed-aspect stage so the SVG fibres line up at every width. */
.nxs{max-width:620px;margin-inline:auto}
.nxs-stage{position:relative;aspect-ratio:100/72}
.nxs-tall{display:none}
.nxs-stage>*:not(svg){position:absolute}

.nxs-card{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:16px}
.nxs-card-copy{display:grid;gap:4px;min-width:0}
.nxs-card-copy b{font:600 13px/1.2 'DM Sans',sans-serif;color:#eef2f0;letter-spacing:-.01em;white-space:nowrap}
.nxs-card-copy small{display:flex;align-items:center;gap:7px;font:500 11.5px/1.2 'DM Sans',sans-serif;color:#9fa8a5;white-space:nowrap}
.nxs-card-copy .nx-dot{width:6px;height:6px}
.nxs-faces{display:flex;flex:none}
.nxs-tick{margin-left:auto;flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--nx-teal);color:#04201c;box-shadow:0 0 14px rgba(55,205,188,.45)}
.nxs-tick svg{width:12px;height:12px}
.nxs-faces .nx-person+.nx-person{margin-left:-10px}
.nxs-ok{position:absolute;inset:-1px;border-radius:16px;border:1px solid rgba(55,205,188,.7);box-shadow:0 0 0 4px rgba(55,205,188,.1),0 0 24px rgba(55,205,188,.22);opacity:0;pointer-events:none}
.nxs-team{left:0;top:9%;width:36.6%}
.nxs-stranger{left:0;top:65%;width:36.6%;opacity:.8}
.nxs-stranger .nxs-card-copy b{color:#a9b0ad}
.nxs-anon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22);color:#7f8885}
.nxs-anon svg{width:20px;height:20px}
.nxs-block{left:44.2%;top:47.2%;width:22px;height:22px;margin:-11px 0 0 -11px;display:grid;place-items:center;border-radius:50%;background:#16191b;border:1px solid rgba(255,255,255,.18);color:#d9dedc;box-shadow:0 0 0 4px rgba(5,5,5,.9);opacity:.85}
.nxs-block svg{width:11px;height:11px}

.nxs-shield{left:41%;top:15%;width:19%;--nx-pool:.34}
.nxs-mark{left:14%;top:21%;width:64%;height:48%;opacity:.35}
.nxs-label{transform:translateX(-50%);text-align:center;white-space:nowrap}
.nxs-label .nx-lab{font-size:14px;margin-top:6px}
.nxs-label-edge{left:50.5%;top:54%}

.nxs-tunnel-chip{left:62.5%;top:3%;transform:translateX(-50%);font-size:11.5px;padding:6px 11px 6px 9px}
.nxs-tunnel-chip svg{width:13px;height:13px;color:var(--nx-teal)}
.nxs-tunnel{stroke-dasharray:.8 .8}

.nxs-server{left:64%;top:30%;width:36%}
.nxs-led{left:44%;top:56%;width:52%;height:14%;transform:rotate(-13deg);opacity:.45}
.nxs-label-server{left:82%;top:58.5%}
.nxs-backup{left:82%;top:84%;transform:translateX(-50%);font-size:11.5px;padding:6px 11px 6px 9px}
.nxs-backup svg{width:13px;height:13px;color:var(--nx-teal)}
.nxs-backup::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid rgba(55,205,188,.7);box-shadow:0 0 18px rgba(55,205,188,.25);opacity:0}

/* the stranger's pulse is grey and dies at the shield */
.nxs-run-dim{stroke:#c9d0cd;filter:none;opacity:0}
.nx.is-live .nxs-run-dim[data-w="1"]{animation-name:nxs-die}
@keyframes nxs-die{0%,8%{stroke-dashoffset:.16;opacity:0}10%{opacity:.55}24%{opacity:.55}27%,100%{stroke-dashoffset:-.86;opacity:0}}
@keyframes nxs-blocked{0%,24%{transform:scale(1);opacity:.85;border-color:rgba(255,255,255,.18)}27%{transform:scale(1.25);opacity:1;border-color:rgba(255,255,255,.6)}36%,100%{transform:scale(1);opacity:.85;border-color:rgba(255,255,255,.18)}}

/* beats: 1 team + stranger reach the Edge, 2 tunnel to the server, 3 backup */
.nx.is-live .nxs-mark{--o0:.35;--o1:.4;animation:nx-arrive1 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxs-ok{--o1:0;animation:nx-arrive1 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxs-block{animation:nxs-blocked var(--nx-cycle) ease-out infinite}
.nx.is-live .nxs-led{--o0:.45;--o1:.45;animation:nx-arrive2 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxs-backup::after{--o1:0;animation:nx-arrive3 var(--nx-cycle) ease-out infinite}

@media (max-width:1180px) and (min-width:901px){
  .nxs-card{padding:10px 11px 10px 10px;gap:9px}
  .nxs-faces .nx-person{--s:28px!important}
  .nxs-card-copy b{font-size:12px}
}
@media (max-width:560px){
  .nxs{max-width:420px}
  .nxs-stage{aspect-ratio:100/160;--nx-fw:.45;--nx-rw:.7}
  .nxs-wide{display:none}.nxs-tall{display:block}
  .nxs-card{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:14px 10px 12px}
  .nxs-card-copy{justify-items:center}
  .nxs-team{left:0;top:0;width:48%;height:18%}
  .nxs-stranger{left:52%;top:0;width:48%;height:18%}
  .nxs-block{left:57%;top:27.8%}
  .nxs-shield{left:37%;top:26%;width:26%}
  .nxs-label-edge{left:50%;top:49%}
  .nxs-tunnel-chip{left:50%;top:57.2%;font-size:11px;background:#0b0e0f}
  .nxs-team .nxs-tick{display:none}
  .nxs-server{left:22%;top:62%;width:56%}
  .nxs-label-server{left:50%;top:81%}
  .nxs-backup{left:50%;top:92%}
}