.speedtest-page [hidden] { display: none !important; }
.speed-main { max-width: 1000px; min-height: calc(100dvh - 200px); padding-top: 132px; padding-bottom: 76px; margin: 0 auto; }
.speed-back { display: inline-flex; align-items: center; gap: 8px; color: #8794b1; font-size: .72rem; }
.speed-back svg { width: 15px; height: 15px; }
.speed-heading { margin: 37px auto 31px; text-align: center; }
.speed-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #a3b5ec; font-size: .61rem; font-weight: 700; letter-spacing: .17em; }
.speed-eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #a6b9ff; box-shadow: 0 0 14px #7e9bff88; }
.speed-heading h1 { margin: 0; font-size: clamp(2.05rem, 5.5vw, 3.3rem); line-height: 1.15; font-weight: 750; letter-spacing: -.055em; }
.speed-heading h1 span { color: #a4b6f4; }
.speed-heading p { color: #8d99b4; font-size: .82rem; line-height: 1.8; margin: 13px 0 0; }
.speed-console { position: relative; overflow: hidden; max-width: 780px; margin: auto; padding: 24px 30px 27px; border: 1px solid #a8b9ec1c; border-radius: 25px; background: radial-gradient(ellipse at 50% 32%, #6778d513, transparent 65%), #0a0d15e0; box-shadow: 0 25px 80px #0003; }
.speed-console-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #909cb7; font-size: .67rem; }
.speed-console-top > span:first-child { display: inline-flex; gap: 8px; align-items: center; }
.speed-console-top svg { width: 15px; height: 15px; color: #a0b1e4; }
.speed-state { display: inline-flex; align-items: center; gap: 7px; }
.speed-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #77849e; }
.speed-console.is-running .speed-state::before { background: #a7b8ff; box-shadow: 0 0 12px #9bacff99; animation: speed-breathe 1.3s ease-in-out infinite; }
.speed-console.is-complete .speed-state::before { background: #79d9aa; }
.speed-console.is-error .speed-state::before { background: #f09b9f; }
.speed-gauge { position: relative; width: min(480px, 100%); margin: 12px auto -20px; }
.speed-gauge > svg { display: block; width: 100%; overflow: visible; }
.speed-gauge-track, .speed-gauge-fill { fill: none; stroke-width: 11; stroke-linecap: round; }
.speed-gauge-track { stroke: #1b2337; }
.speed-gauge-fill { stroke: url(#speed-gradient); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 8px #8c9dfa44); transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.2,1); }
.speed-gauge-tick { stroke: #54617f; stroke-width: 1; }
.speed-gauge-label { fill: #73809c; font: 11px Inter, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.speed-needle { transform-origin: 240px 246px; transform: rotate(var(--needle-turn, 0deg)); transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.speed-needle line { stroke: #e1e7ff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px #cad5ff99); }
.speed-readout { position: absolute; top: 52%; left: 50%; width: 80%; transform: translate(-50%, -50%); text-align: center; }
.speed-phase { margin: 0 0 11px; color: #a2afcd; font-size: .7rem; font-weight: 500; }
.speed-value { display: block; color: #f0f3ff; font-size: clamp(3.4rem, 10vw, 5.6rem); line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.speed-unit { display: block; margin-top: 11px; color: #737f9d; font-size: .75rem; }
.speed-controls { position: relative; display: flex; justify-content: center; gap: 10px; }
.speed-start, .speed-copy { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 22px; border: 1px solid #c3cdff38; border-radius: 12px; background: linear-gradient(120deg, #a8b8ff, #b6a5f2); color: #111529; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; transition: box-shadow 180ms, transform 180ms; }
.speed-start:hover { box-shadow: 0 0 25px #9ba9f52b; transform: translateY(-1px); }
.speed-start svg, .speed-copy svg { width: 15px; height: 15px; }
.speed-copy { padding: 0 15px; background: #a2b4ec08; color: #b9c7ec; border-color: #a5b6e523; }
.speed-start:focus-visible, .speed-copy:focus-visible, .speed-ip:focus-visible { outline: 2px solid #b3c4ff; outline-offset: 4px; }
.speed-start:disabled, .speed-copy:disabled { opacity: .5; cursor: default; transform: none; }
.speed-status { min-height: 21px; margin: 15px auto 0; max-width: 540px; color: #7e8da9; font-size: .68rem; line-height: 1.7; text-align: center; }
.speed-console.is-error .speed-status { color: #e0a9ad; }
.speed-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 27px 0 0; padding-top: 24px; border-top: 1px solid #a6b5dc13; }
.speed-metric { margin: 0; padding: 0 18px; border-right: 1px solid #a6b5dc13; }
.speed-metric:last-child { border-right: 0; }
.speed-metric dt { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #8d9bb8; font-size: .65rem; }
.speed-metric dt svg { width: 13px; height: 13px; color: #9aafea; }
.speed-metric[data-metric="upload"] dt svg { color: #bba1ef; }
.speed-metric dd { margin: 0; color: #e0e7fb; font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.speed-metric dd small { margin-left: 5px; color: #737f99; font-size: .62rem; font-weight: 500; letter-spacing: 0; }
.speed-metric.is-active dt { color: #d1daef; }
.speed-connection { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 780px; margin: 16px auto 0; padding: 19px 23px; border: 1px solid #a8b9ec13; border-radius: 17px; background: #0a0d1575; }
.speed-connection-label { display: block; margin-bottom: 7px; color: #74819c; font-size: .6rem; }
.speed-connection-server { display: inline-flex; align-items: center; gap: 8px; color: #b0bedc; font-size: .72rem; }
.speed-connection-server svg { width: 14px; height: 14px; color: #96a9dc; }
.speed-ip { display: flex; align-items: center; gap: 13px; min-height: 34px; max-width: 100%; padding: 0; border: 0; background: none; color: #acbad7; font: inherit; cursor: pointer; text-align: left; }
.speed-ip-value { display: block; font-size: .75rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.speed-ip-value.is-hidden { filter: blur(5px); user-select: none; }
.speed-ip-caption { display: block; margin-top: 5px; color: #7684a2; font-size: .58rem; }
.speed-ip > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #9eaed2; }
.speed-footnote { margin: 19px auto 0; max-width: 650px; color: #606d88; font-size: .62rem; line-height: 1.85; text-align: center; }
.speed-footnote a { color: #91a3cb; }
@keyframes speed-breathe { 50% { opacity: .45; } }
@media (max-width: 620px) { .speed-main { padding-top: 116px; padding-bottom: 55px; } .speed-heading { margin-top: 30px; } .speed-console { padding: 20px 15px 23px; border-radius: 19px; } .speed-gauge { margin-bottom: -12px; } .speed-metric { padding: 0 9px; } .speed-metric dd { font-size: 1.07rem; } .speed-metric dt { font-size: .58rem; gap: 4px; } .speed-metric dd small { margin-left: 3px; font-size: .52rem; } .speed-connection { padding: 17px; align-items: flex-start; gap: 15px; } .speed-controls { flex-wrap: wrap; } }
@media (max-width: 390px) { .speed-connection { flex-direction: column; } .speed-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 0; } .speed-metric:nth-child(2) { border-right: 0; } }
@media (prefers-reduced-motion: reduce) { .speed-gauge-fill, .speed-needle, .speed-start { transition: none; } .speed-console.is-running .speed-state::before { animation: none; } }