:root {
    --ink: #101010;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    font: 16px/1.6 'Inter Tight', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.palco {
    width: 100%;
    display: grid;
    place-items: center;
    padding: clamp(8px, 2.5vw, 48px);
}

.hero-network {
    width: min(770px, 86vh * 700 / 460);
    width: min(770px, 96vw, 62svh * 700 / 460);
    position: relative;
    text-align: center;
}

.network {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transform-origin: 50% 50%;
    will-change: transform;
}

.wire { fill: none; stroke: #f0f0f0; stroke-width: 2; }
.signal {
    fill: none;
    stroke: url(#signal-gradient);
    stroke-width: 2;
    stroke-dasharray: 75 700;
    animation: travel 5s linear infinite;
}
.signal.reverse { animation-direction: reverse; animation-delay: -2.5s; }

.tilebase { fill: #fdfdfd; stroke: #ededed; stroke-width: 6; filter: url(#tile-shadow); }
.inner { fill: #fff; stroke: #f6f6f6; stroke-width: 1; }

.node { color: #c3c3c3; }
.node.color { color: #35b990; }
.node.violet { color: #9a86cf; }

.center-mark { color: #222; padding: 3px; }
.core-ring {
    fill: none;
    stroke: url(#signal-gradient);
    stroke-width: 6;
    stroke-dasharray: 330 120;
    animation: bordertravel 7s linear infinite;
}

.float-node { animation: float 6s ease-in-out infinite; }

@keyframes travel { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }
@keyframes bordertravel { to { stroke-dashoffset: -450; } }
@keyframes float { 50% { transform: translateY(-5px); } }

body.is-parado .signal,
body.is-parado .core-ring,
body.is-parado .float-node { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .signal,
    .core-ring { animation: none; stroke-dashoffset: 0; }
    .float-node { animation: none; }
    .network { will-change: auto; }
}