/* Two regions of the supplied transparent sprite: frame above, blue energy below. */
.sidebar .status .server .server-meter.load { position: relative; width: 206px; height: 20px; margin: 4px auto 5px; padding: 0; background: none; transition: none; overflow: visible; }
.server-meter-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.server-meter-window { position: absolute; left: 5%; right: 5%; top: calc(33% - 1px); height: 42%; }
.server-meter-fill { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--server-fill)) 0 0); filter: drop-shadow(0 0 2px #3bafff88); pointer-events: none; }
.sidebar .status .server .server-meter .line { position: absolute; left: 0; top: 0; height: 100%; padding: 0; margin: 0; background: none; transition: none; }
.server-meter-tail { display: none; position: absolute; right: 0; top: 50%; width: 0; height: 0; pointer-events: none; }
.server-meter--active .server-meter-tail { display: block; }
.server-meter-tail::before { content: ''; position: absolute; left: -2px; top: -5px; width: 3px; height: 10px; border-radius: 50%; background: #ddfbff; box-shadow: 0 0 5px #90efff, 0 0 9px #3dbaff; animation: server-meter-flare 1.7s ease-in-out infinite alternate; }
.server-meter-tail i { position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: #d8fbff; border-radius: 50%; box-shadow: 0 0 3px #e3ffff, 0 0 7px #39caff; opacity: 0; animation: server-meter-spark 1.4s ease-out infinite; }
.server-meter-tail i:nth-child(1) { --spark-x: 16px; --spark-y: -16px; animation-delay: -.1s; }
.server-meter-tail i:nth-child(2) { --spark-x: 22px; --spark-y: -5px; animation-delay: -.8s; }
.server-meter-tail i:nth-child(3) { --spark-x: 10px; --spark-y: 15px; animation-delay: -.5s; }
.server-meter-tail i:nth-child(4) { --spark-x: 20px; --spark-y: 8px; animation-delay: -1.2s; }
.server-meter-tail i:nth-child(5) { --spark-x: 6px; --spark-y: -20px; animation-delay: -1s; }
.server-meter-tail i:nth-child(6) { --spark-x: 26px; --spark-y: 3px; animation-delay: -.3s; }
.server-meter-tail i:nth-child(7) { --spark-x: -5px; --spark-y: -14px; animation-delay: -.65s; }
.server-meter-tail i:nth-child(8) { --spark-x: 8px; --spark-y: 18px; animation-delay: -1.35s; }
.server-meter-tail i:nth-child(9) { --spark-x: 28px; --spark-y: -12px; animation-delay: -.45s; }
.server-meter-tail i:nth-child(10) { --spark-x: 12px; --spark-y: -24px; animation-delay: -1.05s; }
.server-meter-tail i:nth-child(11) { --spark-x: 18px; --spark-y: 20px; animation-delay: -.2s; }
.server-meter-tail i:nth-child(12) { --spark-x: 32px; --spark-y: 7px; animation-delay: -.95s; }
.server-meter-tail i:nth-child(13) { --spark-x: -7px; --spark-y: 13px; animation-delay: -.7s; }
.server-meter-tail i:nth-child(14) { --spark-x: 20px; --spark-y: -20px; animation-delay: -1.25s; }
.server-meter-tail i:nth-child(15) { --spark-x: 6px; --spark-y: 24px; animation-delay: -.35s; }
.server-meter-tail i:nth-child(16) { --spark-x: 34px; --spark-y: -3px; animation-delay: -1.15s; }
.server-meter-tail i:nth-child(17) { --spark-x: 10px; --spark-y: -9px; animation-delay: -.55s; }
.server-meter-tail i:nth-child(18) { --spark-x: 17px; --spark-y: 4px; animation-delay: -.15s; }
.server-meter-tail i:nth-child(19) { --spark-x: 4px; --spark-y: -18px; animation-delay: -.85s; }
.server-meter-tail i:nth-child(20) { --spark-x: 25px; --spark-y: 16px; animation-delay: -1.3s; }
.server-meter-tail i:nth-child(21) { --spark-x: 14px; --spark-y: 11px; animation-delay: -.4s; }
.server-meter-tail i:nth-child(22) { --spark-x: -3px; --spark-y: -22px; animation-delay: -1.1s; }
.server-meter-tail i:nth-child(23) { --spark-x: 30px; --spark-y: -17px; animation-delay: -.75s; }
.server-meter-tail i:nth-child(24) { --spark-x: 2px; --spark-y: 19px; animation-delay: -1.4s; }
.server-meter-tail i:nth-child(3n) { width: 3px; height: 1px; }
.status:nth-child(2) .server-meter-tail i { animation-duration: 1.6s; }
.status:nth-child(3) .server-meter-tail i { animation-duration: 1.25s; }
@keyframes server-meter-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 12%, 40% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.3); } }
@keyframes server-meter-flare { from { opacity: .5; transform: scaleY(.7); } to { opacity: 1; transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { .server-meter-tail i { animation: none; display: none; } .server-meter-tail::before { animation: none; opacity: .7; } }