.speed-test { max-width: 850px; }
.speed-arrow { width: 110px; height: 145px; margin: 0 auto 1.5rem; background: var(--border); clip-path: polygon(25% 0,75% 0,75% 55%,100% 55%,50% 100%,0 55%,25% 55%); position: relative; }
.speed-arrow.upload { transform: rotate(180deg); }
#arrow-fill { position: absolute; bottom: 0; width: 100%; height: 0; background: linear-gradient(0deg,var(--primary),var(--success)); transition: height .18s linear; }
.speed-gauge small { font-size: 1rem; color: var(--muted); }
#speed-progress { width: min(100%, 360px); height: 8px; accent-color: var(--primary); }
.speed-metrics strong { display: block; font-size: clamp(1rem,3vw,1.5rem); margin-top: .4rem; text-align: start; }
#speed-host, #speed-ip { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { #arrow-fill { transition: none; } }