/* Gentle additions only for previously static titles and status marks. */
:root{--network-motion-accent:#245bff}
.network-title{position:relative;animation:networkTitleEnter .85s cubic-bezier(.2,.7,.25,1) both}
.network-title::before{content:'';pointer-events:none;position:absolute;left:0;bottom:-10px;width:min(125px,32%);height:3px;border-radius:2px;background:var(--network-motion-accent);transform-origin:left center;animation:networkTitleLine 8s ease-in-out 1.1s infinite}
@keyframes networkTitleEnter{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes networkTitleLine{0%,12%{transform:scaleX(0);opacity:0}30%,62%{transform:scaleX(1);opacity:.7}82%,100%{transform:scaleX(0);opacity:0}}
.network-pulse-marker{display:inline-block;width:7px;height:7px;flex:0 0 7px;vertical-align:middle;border-radius:50%;background:var(--network-motion-accent);margin-right:9px}
.network-pulse-marker,.network-pulse{animation:networkStatusPulse 3.4s ease-out infinite!important}
@keyframes networkStatusPulse{0%,100%{box-shadow:0 0 0 0 transparent;opacity:1}35%{box-shadow:0 0 0 4px color-mix(in srgb,var(--network-motion-accent) 24%,transparent);opacity:.86}76%{box-shadow:0 0 0 8px transparent;opacity:1}}
.network-pulse-marker:hover,.network-pulse:hover,.network-title:hover::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.network-title,.network-title::before,.network-pulse-marker,.network-pulse{animation:none!important;transform:none!important;opacity:1!important;box-shadow:none!important}.network-title::before{display:none}}