:root{color-scheme:dark;--cyan:#58dbe4;--purple:#b36cf2;--yellow:#e2ca00;--muted:#9698a3;--surface:#121214;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{min-height:100%;background:#000}body{margin:0;min-height:100vh;background:#000;color:#f3f3f6}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #62c8ee;outline-offset:4px}.hidden{display:none!important}.topbar{height:70px;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#ae69f3,#5eacfa,#70e5db) 1}.bar-inner{height:100%;max-width:1370px;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;color:#f5f5f8;font-size:22px;letter-spacing:-.8px;font-weight:700;text-decoration:none}.admin-label{font-size:13px;color:#aaa}.view{margin:0 auto;padding:16px 16px 80px;display:flex;align-items:center;flex-direction:column;max-width:850px}.idle-panel{width:100%;display:flex;align-items:center;flex-direction:column;padding-top:72px}.go-button{color:white;position:relative;isolation:isolate;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(140deg,#aa71fa,#61e1e1 48%,#5696f7) border-box;font-weight:300;transition:transform .2s,box-shadow .2s}.go-button:before{content:"";position:absolute;inset:-11px;border:1px solid #5abaf035;border-radius:50%;animation:pulse 2.5s ease-in-out infinite}.go-button:after{content:"";position:absolute;inset:10px;border:1px solid #569ffd11;border-radius:50%;animation:pulse 3s ease-in-out infinite .35s}.go-button:hover{box-shadow:0 0 38px #559bea35;transform:scale(1.025)}.go-button span{position:relative;z-index:1}.go-large{width:194px;height:194px;font-size:44px;margin-bottom:62px}.go-small{width:112px;height:112px;font-size:34px}.go-small:before{inset:-10px}@keyframes pulse{0%,100%{opacity:.25;transform:scale(.97)}50%{opacity:.95;transform:scale(1.05)}}.endpoint{display:flex;align-items:center;gap:15px;justify-content:center;min-width:0}.endpoint-symbol{width:43px;height:43px;border-radius:50%;border:1px solid #50505a;display:grid;place-items:center;color:#bbb;font-size:25px;flex-shrink:0}.endpoint-name{font-size:19px}.endpoint-hint{font-size:13px;color:#92929b;margin-top:3px}.mode-selector{text-align:center;margin-top:42px}.mode-title{font-size:14px;color:#92929b}.mode-options{display:flex;align-items:center;gap:19px;margin-top:4px}.mode-choice{border:0;background:transparent;color:#9a9aa1;font-size:18px;padding:6px}.mode-choice.selected{color:#52aeef}.mode-symbol{border:1px solid #50505a;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;color:#9a9ba3;font-size:22px}.tester-label{display:flex;align-items:center;gap:12px;color:#999aa5;font-size:12px;margin-top:24px}.tester-label input{background:#101013;color:white;border:1px solid #393940;border-radius:5px;padding:8px 10px;min-width:160px}.test-card{width:min(100%,780px);min-height:575px;border-radius:8px;background:var(--surface);margin-top:0;padding:22px 36px 0;position:relative;display:flex;align-items:center;flex-direction:column}.metrics{display:flex;align-items:start;justify-content:center;gap:50px}.metric{text-align:center;min-width:150px}.metric-title{font-size:14px;white-space:nowrap}.metric-title span{color:#afb0b6}.metric-number{font-family:'Arial Narrow',Arial,sans-serif;font-size:42px;line-height:1.3;font-weight:300;font-stretch:condensed;font-variant-numeric:tabular-nums;min-height:55px}.cyan{color:var(--cyan)}.purple{color:var(--purple)}.yellow{color:var(--yellow)}.latencies{display:flex;gap:13px;align-items:center;justify-content:center;white-space:nowrap;color:#d0d0d5;font-size:14px;margin-top:4px}.latencies b{font-weight:400;color:#f0f0f3}.latency-title{color:#c1c1c8}.jitter{font-size:12px;color:#999aa2}.gauge-wrap{width:380px;max-width:100%;height:296px;margin:4px auto 0}.gauge-wrap svg{width:100%;height:100%;overflow:visible}.gauge-track,.gauge-progress{fill:none;stroke-width:23;stroke-linecap:butt}.gauge-track{stroke:#26253b}.gauge-progress{stroke:url(#dlPaint);stroke-dasharray:0 100;transition:stroke-dasharray .18s linear}.gauge-progress.upload{stroke:url(#ulPaint)}#needle{stroke:#bbb;transition:x2 .18s linear,y2 .18s linear}.gauge-value{fill:#f5f5f7;font-size:31px;font-weight:300;font-variant-numeric:tabular-nums}.gauge-unit{fill:#9c9da6;font-size:15px}.gauge-tick{fill:#858591;font-size:12px;text-anchor:middle;dominant-baseline:middle}.beneath{margin-top:-4px;margin-bottom:12px}.beneath .endpoint-name{font-size:17px}.beneath .endpoint-hint{font-size:12px}.phase-progress{width:calc(100% + 72px);height:2px;background:#252436;margin-top:auto;align-self:center}.phase-progress>div{height:100%;width:0;background:linear-gradient(90deg,#93e8e1,#579af6);transition:width .16s linear}.phase-progress.upload>div{background:linear-gradient(90deg,#9f5ce9,#ca79f4)}.running-actions{padding:12px 0;min-height:48px}.muted-btn{border:1px solid #444650;border-radius:20px;background:none;color:#d4d5de;padding:8px 16px;font-size:13px}.muted-btn:hover{border-color:#8f9ba9}.result-card{padding:0 34px 24px;min-height:430px}.result-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 0 20px;font-size:13px;color:#afb0bb;gap:15px}.result-head>span:first-child{color:#e7e8ed}.result-head span span{color:#54b3f5}.link-icon{font-size:17px;min-width:31px;min-height:31px;margin-left:7px;background:transparent;border:1px solid #458fcb;border-radius:50%;color:#5fbaff}.result-grid{display:flex;align-items:center;justify-content:center;width:100%;gap:56px;margin:0 0 28px}.result-body{display:flex;flex-direction:column;gap:10px}.result-card .metric{min-width:130px}.result-card .metrics{gap:28px}.result-card .metric-number{font-size:43px}.result-card .latencies{gap:12px}.result-details{width:100%;border-top:1px solid #34343a;padding:23px 10px 8px;display:grid;grid-template-columns:1fr 1fr;gap:20px 35px}.result-details>div{display:flex;flex-direction:column;gap:4px}.detail-label{font-size:12px;color:#9497a4}.result-details strong{font-size:16px;font-weight:400;overflow-wrap:anywhere}.result-actions{display:flex;gap:15px;margin-top:25px}.error{margin-top:20px;color:#ffb6b8;border:1px solid #8f4444;border-radius:6px;padding:14px 18px;background:#321515;max-width:100%;overflow-wrap:anywhere}.admin-view{max-width:1000px;margin:35px auto;padding:20px;background:#111116;border-radius:8px}.admin-view p{color:#9da0af}.admin-controls{display:flex;gap:10px;flex-wrap:wrap}.admin-controls input,.admin-controls button{background:#1b1b22;border:1px solid #41414c;border-radius:4px;padding:9px 12px;color:#eee}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}td,th{padding:8px;border-bottom:1px solid #333;text-align:left}a{color:#68b9fd}@media(max-width:680px){.view{padding-top:25px}.idle-panel{padding-top:50px}.test-card{padding:23px 12px 0;min-height:530px}.metrics{gap:18px}.metric{min-width:125px}.metric-title{font-size:11px}.metric-number{font-size:37px}.latencies{gap:8px;font-size:11px;flex-wrap:wrap}.jitter{font-size:10px}.gauge-wrap{height:260px;width:340px}.phase-progress{width:calc(100% + 24px)}.result-card{padding:0 15px 22px;min-height:430px}.result-grid{gap:23px}.result-card .metrics{gap:8px}.result-card .metric{min-width:100px}.result-card .metric-number{font-size:33px}.go-small{width:85px;height:85px;font-size:27px}.result-details{gap:12px;grid-template-columns:1fr 1fr}.result-head{font-size:11px}}@media(max-width:430px){.result-grid{gap:14px}.result-card .metric{min-width:85px}.go-small{width:72px;height:72px;font-size:25px}.result-card .metric-title{font-size:10px}.result-card .metric-number{font-size:30px}.result-card .latencies{font-size:10px;gap:6px}.gauge-wrap{width:300px;height:245px}.tester-label{flex-direction:column}.result-actions{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* v3: fixed triangular Ookla-inspired arrangement and stable needle. */
.test-card{width:min(100%,780px);min-height:0;padding:24px 30px 0;overflow:hidden}
.metrics{width:100%;gap:38px;justify-content:center}
.metric{width:192px;min-width:0}
.metric-title{font-size:15px;letter-spacing:.1px}
.metric-number{font-size:44px;min-height:60px}
.latencies{margin-top:0;gap:17px;font-size:13px}
.gauge-wrap{width:385px;height:332px;max-width:100%;margin:0 auto;flex:none}
.gauge-wrap svg{display:block;width:100%;height:100%;overflow:hidden}
.gauge-track,.gauge-progress{stroke-width:22;stroke-linecap:butt}
#needle{fill:#dddfe6;stroke:none;transition:points .15s ease-out}
.gauge-tick{font-size:12px;fill:#999ba8}
.gauge-value{font-size:33px}
.server-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-top:-15px;min-height:62px}
.beneath{margin:0;justify-content:center}
.endpoint-symbol{display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.endpoint-symbol svg{display:block;flex:none}
.phase-tag{font-size:12px;color:#9294a1;margin-top:-5px}
.mode-selector{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0 26px}
.mode-options{display:inline-flex;gap:0;padding:3px;border:1px solid #646777;border-radius:22px;margin:0;align-items:center}
.mode-choice{font-size:13px;min-width:78px;padding:7px 15px;border-radius:19px;color:#c5c6cf;transition:background .15s}
.mode-choice.selected{background:#12353d;box-shadow:inset 0 0 0 1px #61e0e9;color:#efffff}
.mode-choice:disabled{cursor:default;opacity:.75}
.mode-running{margin:2px 0 26px}
.mode-result{margin:4px 0 0}
.phase-progress{height:3px;margin-top:auto;width:calc(100% + 60px)}
.running-actions{width:100%;display:flex;align-items:center;justify-content:center;padding:12px 0 14px}
.enter-hint{color:#6f7687;font-size:11px;margin-top:6px}
.result-card{padding:0 30px 26px;min-height:0}
.result-card .metric{width:168px}
.result-card .metric-number{font-size:42px}
.result-grid{justify-content:center;gap:46px}
.result-body{gap:9px}
.result-head{padding:15px 0 20px}
.result-actions{margin-top:20px;flex-wrap:wrap;justify-content:center}
@media(max-width:680px){.test-card{padding:20px 12px 0}.metrics{gap:12px}.metric{width:145px}.metric-number{font-size:36px}.metric-title{font-size:12px}.latencies{gap:8px;font-size:11px}.gauge-wrap{width:min(100%,340px);height:auto;aspect-ratio:360/310}.server-row{margin-top:-8px}.phase-progress{width:calc(100% + 24px)}.mode-selector{gap:12px}.mode-running{margin-bottom:19px}.result-card{padding:0 13px 22px}.result-grid{gap:20px}.result-card .metric{width:115px}.result-card .metric-number{font-size:32px}}
@media(max-width:425px){.test-card .latencies{font-size:10px;gap:5px}.metric{width:130px}.metric-title{font-size:11px}.mode-choice{min-width:66px}.result-grid{gap:14px}.go-small{width:76px;height:76px}.result-card .metric{width:95px}.result-card .metric-number{font-size:29px}}

/* v4: spacing increases apply only while a test is running. */
#runningPanel .gauge-wrap{margin-top:10px;margin-bottom:16px}
#runningPanel .server-row{margin-top:0;gap:7px;min-height:68px}
#runningPanel .mode-running{margin-top:26px;margin-bottom:31px}
#runningPanel .latencies{margin-top:8px}
#runningPanel .running-actions{padding-top:18px;padding-bottom:20px}
#runningPanel .phase-tag{margin-top:0}
#runningPanel .endpoint-symbol{display:grid;place-items:center}
#runningPanel .endpoint-symbol svg{width:21px;height:21px}
.metric-icon,.latency-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px;flex:none}
.latency-icon{width:14px;height:14px;vertical-align:-2px}
.link-icon{display:inline-grid;place-items:center;vertical-align:middle;padding:0}
.link-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#needle{fill:url(#needleShading);transition:none}
.gauge-progress{transition:stroke-dasharray .24s ease-out}
@media(max-width:680px){#runningPanel .gauge-wrap{margin-top:11px;margin-bottom:18px}#runningPanel .mode-running{margin-top:24px;margin-bottom:28px}#runningPanel .server-row{min-height:66px;gap:6px}}

/* v5: phase focus is static, with no flashing, and only the active measurement gets emphasis. */
#runningPanel .metric { opacity:.56; transition:opacity .4s ease; }
#runningPanel[data-phase="download"] #runningDownloadMetric,
#runningPanel[data-phase="upload"] #runningUploadMetric { opacity:1; }
#runningPanel[data-phase="download"] #runningDownloadMetric .metric-number { color:#a3f4ee; }
#runningPanel[data-phase="upload"] #runningUploadMetric .metric-number { color:#e1b3ff; }
#runningPanel[data-phase="download"] #runningDownloadMetric .metric-title,
#runningPanel[data-phase="upload"] #runningUploadMetric .metric-title { font-weight:700; }
#runningPanel[data-phase="download"] .phase-tag { color:#94eae8; }
#runningPanel[data-phase="upload"] .phase-tag { color:#d49bfa; }
.phase-status { color:#999bac; font-size:12px; margin:4px 0 16px; text-align:center; }
#runningPanel .mode-running { margin-bottom:18px; }
.result-card .mode-result { margin-top:26px; margin-bottom:8px; }
.copy-dialog { position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;padding:20px; }
.copy-dialog.hidden { display:none; }
.copy-box { width:min(100%,560px);background:#1a1b25;border:1px solid #4b5366;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;color:#e3e4e9;font-size:14px; }
.copy-box textarea { width:100%;box-sizing:border-box;background:#11121a;color:#fff;border:1px solid #495266;border-radius:6px;padding:10px;font:13px/1.5 monospace;resize:vertical; }
.copy-box button { align-self:end; }