.connection-test{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px;padding:10px 14px;border:1px solid #294363;border-radius:10px;background:rgba(14,29,51,.65)}
.connection-test .connection-reading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
.connection-test h3{margin:0;font-size:.8rem;line-height:1.5;font-weight:600;color:#c7d8ef}
.connection-test output{color:#b8d6ff;font-size:1rem;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.5}
.connection-test .connection-hint,.connection-test noscript p{margin:0;font-size:.7rem;line-height:1.5;color:#a9bad3}
.connection-test button{margin-left:auto;flex-shrink:0;background:#152d4c;border:1px solid #3b5d87;color:#d6e5ff;border-radius:7px;padding:7px 10px;min-height:34px;font:inherit;font-size:.72rem;cursor:pointer}
.connection-test button:hover:not(:disabled){background:#213e61}.connection-test button:focus-visible{outline:2px solid #a6ceff;outline-offset:3px}.connection-test button:disabled{opacity:.55;cursor:default}
@media(max-width:600px){.connection-test{gap:6px 10px;padding:10px 12px}.connection-test .connection-hint{order:3;flex-basis:100%}.connection-test button{min-height:40px}}

.connection-test output[data-quality="good"]{color:#6ee7a8}
.connection-test output[data-quality="medium"]{color:#f6d365}
.connection-test output[data-quality="poor"]{color:#ff9292}