/* ---------- Loader ---------- */

.loading {

  min-height: 100svh;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 20px;

  text-align: center;

  padding-block: 32px

}



.net {

  width: min(100%, 24rem);

  height: auto

}



.net .base {

  stroke: var(--line);

  stroke-width: 1.2

}



.net .pulse {

  stroke: var(--accent);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-dasharray: 8 38;

  animation: flow 1.6s linear infinite

}



@keyframes flow {

  to {

    stroke-dashoffset: -46

  }

}



.net .node {

  fill: var(--surface);

  stroke: var(--accent);

  stroke-width: 2;

  transform-box: fill-box;

  transform-origin: center;

  animation: pop 1.8s ease-in-out infinite

}



.net .node.out {

  fill: var(--accent)

}



@keyframes pop {



  0%,

  100% {

    transform: scale(1)

  }



  50% {

    transform: scale(1.35)

  }

}



.status {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 700;

  min-height: 2em

}



.status-sub {

  color: var(--ink-soft)

}