:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-soft: color-mix(in srgb, var(--panel) 82%, var(--bg));
  --line: color-mix(in srgb, var(--muted) 24%, transparent);
  --line-strong: color-mix(in srgb, var(--muted) 40%, transparent);
  --text: #20252b;
  --muted: #777f88;
  --blue: #149fd9;
  --cyan: #31d4c5;
  --green: #24b68a;
  --purple: #6c70d9;
  --danger: #d94c68;
  --shadow: 0 22px 70px rgb(28 50 70 / 10%);
  --start-circle-size: 280px;
  --live-gauge-size: 405px;
  --result-circle-size: 180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 300px;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }

.speed-page {
  width: min(1080px, calc(100% - 36px));
  min-height: 100vh;
  margin: 0 auto;
}
.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}
.brand-logo, .brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
}
.brand-logo { object-fit: contain; }
.brand-mark {
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  color: white;
  background: linear-gradient(145deg, var(--cyan), var(--blue));
}
.brand-mark i { width: 4px; border-radius: 4px; background: currentColor; }
.brand-mark i:nth-child(1) { height: 8px; opacity: .7; }
.brand-mark i:nth-child(2) { height: 18px; }
.brand-mark i:nth-child(3) { height: 13px; opacity: .85; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy b { font-size: 16px; font-weight: 650; }
.brand-copy small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1.35px; }

.topnav { display: flex; align-items: center; gap: 30px; }
.topnav a, .topnav-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: .2px;
  text-decoration: none;
}
.topnav a:hover, .topnav-button:hover { color: var(--blue); }
.nav-icon, .round-icon { position: relative; display: inline-grid; place-items: center; }
.nav-icon { width: 24px; height: 24px; color: var(--muted); }
.result-icon { border: 2px solid currentColor; border-radius: 50%; }
.result-icon::before {
  content: "";
  width: 8px;
  height: 4px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translateY(-1px);
}
.settings-icon { border: 2px dotted currentColor; border-radius: 38%; }
.settings-icon::before { content: ""; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; }
#language {
  min-width: 58px;
  padding: 8px 9px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: var(--panel);
}

.hero {
  min-height: calc(100vh - 78px);
  padding: clamp(24px, 5vh, 64px) 0 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.test-console {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.live-summary {
  min-height: 34px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
}
.test-console.running .live-summary, .test-console.completed .live-summary { opacity: 1; }
.live-summary > span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.live-summary b { color: var(--text); font-size: 15px; font-weight: 400; }
.live-summary strong { min-width: 24px; color: var(--text); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.live-summary i { width: 25px; height: 25px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 16px; font-style: normal; line-height: 1; }
.ping-symbol { color: #c39c00; }
.down-symbol { color: var(--cyan); }
.up-symbol { color: var(--purple); }
.quality-strip {
  height: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  gap: 28px;
  overflow: hidden;
  opacity: 0;
}
.test-console.running .quality-strip, .test-console.completed .quality-strip { height: 68px; margin-bottom: 14px; overflow: visible; opacity: 1; }
.quality-item { position: relative; display: grid; grid-template-columns: repeat(5, 7px); place-items: center; gap: 3px; color: var(--muted); outline: none; cursor: help; }
.quality-icon { position: relative; grid-column: 1 / -1; width: 58px; height: 46px; display: block; color: color-mix(in srgb, var(--text) 70%, var(--muted)); transform: scale(.82); transform-origin: center bottom; }
.quality-item > i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 28%, transparent); transition: background .2s, transform .2s; }
.quality-item > i.on { background: var(--text); transform: scale(1.08); }
.quality-item::after {
  content: attr(data-result);
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 220px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 9px 25px color-mix(in srgb, #000 14%, transparent);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity .16s, transform .16s;
}
.quality-item:hover::after, .quality-item:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.test-console.running .quality-item::after { content: "Measuring connection quality…"; }
.test-console.running .quality-item > i { animation: quality-dot-loading 1.15s ease-in-out infinite; }
.test-console.running .quality-item > i:nth-of-type(2) { animation-delay: .12s; }
.test-console.running .quality-item > i:nth-of-type(3) { animation-delay: .24s; }
.test-console.running .quality-item > i:nth-of-type(4) { animation-delay: .36s; }
.test-console.running .quality-item > i:nth-of-type(5) { animation-delay: .48s; }
@keyframes quality-dot-loading {
  0%, 100% { background: color-mix(in srgb, var(--muted) 22%, transparent); transform: scale(.72); }
  45% { background: var(--text); transform: scale(1.15); }
}
.quality-web::before { content:""; position:absolute; inset:4px 2px 6px; border:3px solid currentColor; border-radius:5px; background:linear-gradient(to bottom,color-mix(in srgb,currentColor 18%,transparent) 0 13px,transparent 13px); }
.quality-web::after { content:""; position:absolute; right:3px; bottom:0; width:25px; height:30px; border:0; background:currentColor; clip-path:polygon(0 0,100% 60%,61% 67%,80% 100%,66% 100%,48% 72%,24% 100%); transform:rotate(-8deg); }
.quality-gaming::before { content:""; position:absolute; inset:10px 1px 2px; border:3px solid currentColor; border-radius:25px 25px 14px 14px; transform:perspective(55px) rotateX(-7deg); }
.quality-gaming::after { content:"+   •"; position:absolute; inset:17px 8px auto; color:currentColor; font-size:24px; font-weight:900; letter-spacing:9px; white-space:nowrap; }
.quality-video::before { content:""; position:absolute; inset:4px 2px 6px; border:3px solid currentColor; border-radius:5px; box-shadow:inset 0 -9px 0 color-mix(in srgb,currentColor 12%,transparent); }
.quality-video::after { content:""; position:absolute; left:29px; top:17px; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:17px solid currentColor; }
.quality-calls::before { content:""; position:absolute; inset:4px 3px 6px; border:3px solid currentColor; border-radius:4px; }
.quality-calls::after { content:"●"; position:absolute; inset:7px 8px auto; height:40px; padding-top:2px; border-radius:3px; color:currentColor; background:linear-gradient(to top,currentColor 0 13px,transparent 13px); font-size:23px; line-height:1; text-align:center; }
.gauge-wrap {
  position: relative;
  width: min(var(--start-circle-size), 72vw);
  aspect-ratio: 1;
}
.gauge {
  --progress: 0deg;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--cyan), var(--blue), var(--cyan));
  box-shadow: 0 18px 55px color-mix(in srgb, var(--blue) 12%, transparent);
}
.gauge::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--bg);
}
.test-console.running .gauge {
  background: conic-gradient(from 220deg, var(--cyan) 0deg, var(--blue) var(--progress), var(--line) var(--progress), var(--line) 280deg, transparent 280deg);
}
.test-console.running[data-stage="upload"] .gauge {
  background: conic-gradient(from 220deg,
    color-mix(in srgb, var(--purple) 72%, #6546d9) 0deg,
    color-mix(in srgb, var(--purple) 58%, #ff63e7) var(--progress),
    var(--line) var(--progress), var(--line) 280deg, transparent 280deg);
  box-shadow: 0 18px 55px color-mix(in srgb, var(--purple) 16%, transparent);
}
.test-console.running .gauge-wrap {
  width: min(var(--live-gauge-size), 82vw) !important;
  flex: 0 0 auto;
}
.test-console.completed .gauge-wrap { width: min(var(--live-gauge-size), 82vw); }
.test-console.completed .gauge { background: conic-gradient(from 220deg, var(--cyan) 0deg, var(--blue) var(--progress), var(--line) var(--progress), var(--line) 280deg, transparent 280deg); }
.test-console.running .gauge::before { inset: 8px; }
.test-console.completed .gauge::before { inset: 8px; }
.gauge-scale, .gauge-needle { display: none; }
.test-console.running .gauge-scale, .test-console.completed .gauge-scale { position: absolute; z-index: 2; inset: 0; display: block; }
.gauge-scale span { position: absolute; color: color-mix(in srgb, var(--muted) 88%, transparent); font-size: clamp(9px, calc(var(--live-gauge-size) * .034), 18px); font-weight: 750; transform: translate(-50%, -50%); }
.gauge-scale span:nth-child(1) { left:15%; top:76%; }
.gauge-scale span:nth-child(2) { left:7%; top:58%; }
.gauge-scale span:nth-child(3) { left:10%; top:36%; }
.gauge-scale span:nth-child(4) { left:27%; top:15%; }
.gauge-scale span:nth-child(5) { left:50%; top:7%; }
.gauge-scale span:nth-child(6) { left:73%; top:15%; }
.gauge-scale span:nth-child(7) { left:90%; top:36%; }
.gauge-scale span:nth-child(8) { left:93%; top:58%; }
.gauge-scale span:nth-child(9) { left:85%; top:76%; }
.test-console.running .gauge-needle, .test-console.completed .gauge-needle {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 48%;
  width: 4px;
  height: 31%;
  display: block;
  border-radius: 99px 99px 2px 2px;
  background: linear-gradient(to top, color-mix(in srgb, var(--muted) 12%, transparent), color-mix(in srgb, var(--muted) 48%, transparent));
  transform: translateX(-50%) rotate(calc(-140deg + var(--progress)));
  transform-origin: 50% 100%;
}
.gauge-value {
  position: relative;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.test-console.running .gauge-value, .test-console.completed .gauge-value { display: flex; }
.test-console.running .gauge-value, .test-console.completed .gauge-value { transform: translateY(53%); }
.gauge-value > span { color: var(--muted); font-size: clamp(8px, calc(var(--live-gauge-size) * .027), 16px); font-weight: 700; letter-spacing: clamp(.8px, calc(var(--live-gauge-size) * .0044), 2px); }
.gauge-value strong { margin: clamp(7px, calc(var(--live-gauge-size) * .032), 16px) 0 clamp(4px, calc(var(--live-gauge-size) * .017), 9px); font-size: clamp(38px, calc(var(--live-gauge-size) * .20), 100px); font-weight: 350; letter-spacing: clamp(-4px, calc(var(--live-gauge-size) * -.009), -2px); font-variant-numeric: tabular-nums; }
.gauge-value small { color: var(--muted); font-size: clamp(9px, calc(var(--live-gauge-size) * .032), 17px); }
.test-console.running[data-stage="upload"] .gauge-value small { color: color-mix(in srgb, var(--purple) 78%, #ff63e7); }
.test-console.running[data-stage="upload"] #live-unit::before {
  content: "↑";
  width: 20px;
  height: 20px;
  margin-right: 6px;
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}
.start-button {
  position: absolute;
  z-index: 4;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0d1117;
  background: var(--bg);
  cursor: pointer;
  font-size: clamp(44px, 7vw, 64px);
  font-weight: 300;
  letter-spacing: -2px;
  transition: color .2s, transform .2s, box-shadow .2s;
}
.start-button:hover { color: var(--blue); transform: scale(.986); box-shadow: inset 0 0 0 1px var(--line); }
.start-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 5px; }
.test-console.running .start-button { opacity: 0; pointer-events: none; }
.test-console.completed .start-button {
  inset: auto 50% 5%;
  width: auto;
  height: auto;
  min-width: 118px;
  padding: 9px 16px;
  transform: translateX(50%);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
}
.test-console.completed .start-button:hover { color: var(--blue); transform: translateX(50%) translateY(-1px); }

.status {
  min-height: 20px;
  margin: 22px 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.status.success { color: var(--green); }
.status.error { color: var(--danger); }
.phase-progress {
  width: min(390px, 82vw);
  height: 3px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--line);
  opacity: 0;
}
.test-console.running .phase-progress { opacity: 1; }
.phase-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .15s linear; }
.stages {
  width: min(390px, 82vw);
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  opacity: 0;
}
.test-console.running .stages, .test-console.completed .stages { opacity: 1; }
.stages li { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.stages i { width: 6px; height: 6px; border: 1px solid var(--line-strong); border-radius: 50%; }
.stages li.active { color: var(--blue); }
.stages li.active i { border-color: var(--blue); background: var(--blue); }
.stages li.complete { color: var(--green); }
.stages li.complete i { border-color: var(--green); background: var(--green); }
.live-cdn-test{width:min(680px,92vw);margin:18px 0 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--panel) 68%,transparent)}
.live-cdn-test-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.live-cdn-test-head span{display:flex;flex-direction:column;gap:3px}.live-cdn-test-head b{font-size:11px;letter-spacing:1.2px}.live-cdn-test-head small,.live-cdn-test-head>strong{color:var(--muted);font-size:9px;font-weight:650}.live-cdn-test-rows{display:grid;gap:7px}.live-cdn-test-rows>p{margin:4px 0;color:var(--muted);font-size:11px}.live-cdn-row{display:grid;grid-template-columns:9px minmax(120px,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--cdn) 24%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--cdn) 6%,transparent)}.live-cdn-row>i{width:8px;height:8px;border-radius:50%;background:var(--cdn);box-shadow:0 0 10px color-mix(in srgb,var(--cdn) 60%,transparent)}.live-cdn-row>span{display:flex;flex-direction:column}.live-cdn-row b{font-size:11px}.live-cdn-row span small{margin-top:2px;color:var(--muted);font-size:8px}.live-cdn-row>strong{min-width:88px;color:var(--text);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}.live-cdn-row>strong:last-child{color:var(--purple)}.live-cdn-row>strong small{color:var(--muted);font-size:8px}.result-cdn-title{width:100%;margin-top:14px;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid color-mix(in srgb,var(--muted) 18%,transparent)}.result-cdn-title b{font-size:10px;letter-spacing:1px}.result-cdn-title small{color:var(--muted);font-size:9px}.cdn-empty{opacity:.75}
@media(max-width:620px){.live-cdn-row{grid-template-columns:9px 1fr}.live-cdn-row>strong{grid-column:2;text-align:left}.live-cdn-test{padding:12px}.live-cdn-test-head{align-items:flex-start;flex-direction:column}}

.connection-row {
  width: min(620px, 100%);
  margin-top: clamp(32px, 6vh, 70px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 34px;
}
.endpoint { min-width: 0; display: flex; align-items: center; gap: 18px; }
.client-endpoint { justify-content: flex-end; text-align: end; }
.endpoint-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.endpoint-copy b { font-size: clamp(18px, 2.6vw, 23px); font-weight: 400; }
.endpoint-copy small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.round-icon { width: 52px; height: 52px; flex: 0 0 52px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--muted); }
.person-icon::before { content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; }
.person-icon::after { content: ""; position: absolute; bottom: 10px; width: 25px; height: 12px; border: 2px solid currentColor; border-bottom: 0; border-radius: 15px 15px 0 0; }
.server-icon::before { content: ""; width: 23px; height: 28px; border: 2px solid currentColor; border-radius: 3px; box-shadow: inset 0 -8px 0 color-mix(in srgb, var(--muted) 12%, transparent), inset 0 8px 0 color-mix(in srgb, var(--muted) 12%, transparent); }
.server-icon::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 -8px currentColor, 0 8px currentColor; }

.connection-mode { margin-top: clamp(34px, 6vh, 62px); display: flex; flex-direction: column; align-items: center; gap: 9px; }
.connection-mode > span { color: var(--muted); font-size: 14px; }
.mode-switch { display: flex; align-items: center; gap: 18px; }
.mode-button { min-width: 82px; padding: 8px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 18px; }
.mode-button.active { color: var(--blue); }
.mode-button:focus-visible { outline: 2px solid var(--blue); border-radius: 8px; }
.streams-icon { width: 46px; height: 46px; flex-basis: 46px; }
.streams-icon::before { content: "⇢\A⇢\A⇢"; white-space: pre; font-size: 15px; line-height: 7px; letter-spacing: -4px; transform: translateX(-1px); }

.results {
  scroll-margin-top: 24px;
  margin: 0 auto 50px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.subscriber-panel{width:min(940px,94vw);margin:24px auto;padding:20px 24px;border-radius:18px;background:var(--panel);box-shadow:0 14px 44px rgba(20,52,82,.08)}.subscriber-panel header{display:flex;align-items:center;justify-content:space-between}.subscriber-panel header span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.subscriber-panel h2{margin:4px 0}.subscriber-live{font-size:11px;font-weight:800;color:#22a978}.subscriber-live i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c88a;margin-right:6px}.subscriber-facts,.traffic-values{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.subscriber-facts span,.traffic-values span{padding:10px 12px;border:1px solid color-mix(in srgb,var(--muted) 20%,transparent);border-radius:10px}.subscriber-facts b,.traffic-values b{display:block;font-size:10px;color:var(--muted)}.subscriber-facts strong,.traffic-values strong{display:block;margin-top:5px;font-size:14px}.traffic-values{grid-template-columns:1fr 1fr}.traffic-values strong{font-size:24px}.traffic-down strong{color:#16a8d7}.traffic-up strong{color:#a855f7}.traffic-values small{color:var(--muted)}.subscriber-chart{width:100%;height:180px;background:linear-gradient(to bottom,transparent 49%,color-mix(in srgb,var(--muted) 12%,transparent) 50%,transparent 51%);border-bottom:1px solid color-mix(in srgb,var(--muted) 20%,transparent)}.subscriber-chart polyline{fill:none;stroke-width:4;vector-effect:non-scaling-stroke}.subscriber-chart polyline:first-child{stroke:#16a8d7}.subscriber-chart polyline:last-child{stroke:#a855f7}.subscriber-cdns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.cdn-chip{padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--cdn) 14%,transparent);border:1px solid var(--cdn);font-size:12px}.result-subscriber{margin-top:18px;padding:14px;border-radius:12px;background:color-mix(in srgb,var(--primary) 8%,transparent)}.result-subscriber>b,.result-subscriber>span{display:block}.result-subscriber>span{margin-top:5px;color:var(--muted)}
@media(max-width:760px){.subscriber-facts{grid-template-columns:1fr 1fr}.subscriber-panel{padding:16px 12px}.subscriber-chart{height:130px}.traffic-values strong{font-size:18px}}
.subscriber-chart .overall-down{stroke:#16a8d7}.subscriber-chart .overall-up{stroke:#a855f7}.subscriber-chart .cdn-line{stroke-width:2.5;opacity:.9}.result-subscriber{padding:16px}.result-subscriber-head>span{display:block;color:var(--muted);font-size:9px;letter-spacing:1px}.result-subscriber-head>b{display:block;margin-top:4px;font-size:18px}.result-subscriber-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.result-subscriber-facts span{padding:9px;border:1px solid color-mix(in srgb,var(--muted) 18%,transparent);border-radius:9px}.result-subscriber-facts small,.result-subscriber-facts b{display:block}.result-subscriber-facts small{color:var(--muted);font-size:9px}.result-subscriber-facts b{margin-top:4px;font-size:12px}.result-subscriber>span{display:block;color:var(--muted);font-size:12px}
@media(max-width:760px){.result-subscriber-facts{grid-template-columns:1fr 1fr}}
.cdn-chip small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.result-subscriber .subscriber-cdns .cdn-chip{border-radius:10px;min-width:220px}.cdn-line-legend{display:grid;grid-template-columns:8px auto auto;align-items:center;gap:5px 8px;border-radius:10px}.cdn-line-legend>i{width:8px;height:3px;border-radius:4px;background:var(--cdn)}.cdn-line-legend>strong{font-size:11px;font-variant-numeric:tabular-nums}.cdn-line-legend>small{grid-column:2/-1;margin:0}
.results-head > div > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 1.5px; }
.results-head h2 { margin: 5px 0 0; font-size: 20px; font-weight: 550; }
.result-state { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .7px; }
.result-state.running { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.result-state.complete { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.result-state.failed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric { min-width: 0; padding: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel-soft); }
.metric > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.metric > div > span { font-size: 12px; font-weight: 650; }
.metric small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric b { grid-column: 2; font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric em { grid-column: 3; align-self: end; padding-bottom: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.metric-arrow, .metric-wave { color: var(--blue); font-size: 22px; }
.upload-card .metric-arrow { color: var(--purple); }
.metric-dot { width: 11px; height: 11px; border: 2px solid var(--green); border-radius: 50%; }
.metric-wave { color: var(--muted); }
.result-meta { margin-top: 15px; padding-top: 14px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.result-meta > span:first-child { display: flex; gap: 8px; }
.result-meta b { color: var(--text); font-weight: 550; }
.result-meta small { font-size: inherit; }
footer { min-height: 58px; padding: 0 3px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.result-view .hero { display: none; }
.result-view .results { min-height: calc(100vh - 112px); margin: 18px 0 34px; padding: 26px 34px; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--panel) 48%, var(--bg)); box-shadow: none; }
.results-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.results-titlebar > div > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 1.5px; }
.results-titlebar h2 { margin: 4px 0 0; font-size: 18px; font-weight: 500; }
.result-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(32px, 7vw, 90px); align-items: center; }
.result-go-column { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.result-go { width: min(var(--result-circle-size),70vw); height: min(var(--result-circle-size),70vw); border: 2px solid transparent; border-radius: 50%; color: #111; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(145deg, var(--cyan), var(--blue)) border-box; cursor: pointer; font-size: clamp(30px,calc(var(--result-circle-size) * .25),72px); font-weight: 300; }
.result-go:hover { color: var(--blue); transform: scale(.985); }
.result-connections { width: 100%; display: grid; gap: 16px; }
.result-detail-row { min-width: 0; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 13px; }
.result-detail-row .round-icon { width: 48px; height: 48px; flex-basis: 48px; }
.result-detail-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.result-detail-row b { overflow: hidden; font-size: 16px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.result-detail-row small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.provider-icon { color: var(--blue); font-size: 15px; }
.result-primary { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.result-speeds { width: min(650px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.result-speed { min-width: 0; text-align: center; }
.result-speed > span { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.result-speed > span i { width: 27px; height: 27px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; color: var(--cyan); font-size: 18px; font-style: normal; }
.result-speed.upload-card > span i { color: var(--purple); }
.result-speed > span b { color: var(--text); font-size: 18px; font-weight: 500; text-transform: uppercase; }
.result-speed > span em { font-size: 16px; font-style: normal; }
.result-speed > strong { display: block; margin-top: 6px; color: color-mix(in srgb, var(--text) 72%, var(--muted)); font-size: clamp(54px, 7vw, 78px); font-weight: 250; letter-spacing: -3px; line-height: 1; font-variant-numeric: tabular-nums; }
.result-speed > small { color: var(--muted); font-size: 10px; }
.result-latency { min-height: 35px; margin-top: 27px; display: flex; align-items: center; justify-content: center; gap: 38px; }
.result-latency > span { display: flex; align-items: center; gap: 8px; }
.result-latency b { font-size: 17px; font-weight: 400; }
.result-latency em, .result-latency small { color: var(--muted); font-size: 13px; font-style: normal; }
.result-latency strong { min-width: 25px; font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; }
.result-latency i { width: 25px; height: 25px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-style: normal; }
.wave-symbol { color: var(--purple); }
.result-quality { width: 100%; height: 68px; margin: 30px 0 0; display: flex; overflow: visible; opacity: 1; }
.result-quality > span { color: color-mix(in srgb, var(--muted) 88%, transparent); }
.result-meta { width: 100%; }

.history-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: auto;
  color: var(--text);
  background: var(--bg);
}
.history-shell { width: min(900px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 34px 0 60px; }
.history-header { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.history-header > div > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 1.4px; }
.history-header h1 { margin: 5px 0 0; font-size: clamp(24px, 4vw, 34px); font-weight: 500; }
.history-close, .history-clear { border: 1px solid var(--line); color: var(--text); background: var(--panel); cursor: pointer; }
.history-close { width: 44px; height: 44px; border-radius: 50%; font-size: 23px; }
.history-clear { padding: 9px 14px; border-radius: 999px; color: var(--muted); font-size: 11px; }
.history-close:hover, .history-clear:hover { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 42%, transparent); }
.history-list { padding-top: 18px; display: grid; gap: 10px; }
.history-item { padding: 18px; display: grid; grid-template-columns: minmax(140px, 1.5fr) repeat(4, 1fr); gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.history-item.no-jitter { grid-template-columns: minmax(140px, 1.5fr) repeat(3, 1fr); }
.history-item > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.history-item b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.history-item small { color: var(--muted); font-size: 9px; }
.history-item .history-speed b { color: var(--blue); font-size: 17px; font-variant-numeric: tabular-nums; }
.history-item .history-upload b { color: var(--purple); }
.history-empty { margin: 70px 0; color: var(--muted); text-align: center; }
body.history-open { overflow: hidden; }

.settings-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: auto;
  color: var(--text);
  background: var(--bg);
}
.settings-shell { width: min(1040px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: 34px 0 60px; }
.settings-header { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.settings-header span, .tool-card > span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 1.4px; }
.settings-header h1 { margin: 5px 0 0; font-size: clamp(24px, 4vw, 34px); font-weight: 500; }
.settings-grid { padding-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tool-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.tool-card h2 { margin: 8px 0 16px; font-size: 20px; font-weight: 550; }
.tool-card p { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.ip-tool-card h2 { overflow-wrap: anywhere; color: var(--blue); font-size: clamp(25px, 4vw, 42px); font-weight: 450; font-variant-numeric: tabular-nums; }
.tool-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-facts b { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 600; }
.tool-card dl { margin: 0; display: grid; gap: 0; }
.tool-card dl > div { min-width: 0; padding: 10px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.tool-card dl > div:last-child { border-bottom: 0; }
.tool-card dt { color: var(--muted); font-size: 11px; }
.tool-card dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 600; text-align: end; }
.location-card { grid-column: 1 / -1; }
.device-card { grid-column: 1 / -1; }
.device-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.location-values { margin: 18px 0 12px !important; grid-template-columns: repeat(3, 1fr); gap: 12px !important; }
.location-values > div { padding: 12px !important; display: flex !important; flex-direction: column; gap: 6px !important; border: 1px solid var(--line) !important; border-radius: 12px; }
.location-values dd { text-align: start; }
.tool-action { width: fit-content; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tool-action.secondary { margin-left: 8px; color: var(--text); border: 1px solid var(--line); background: transparent; }
.tool-action:disabled { opacity: .55; cursor: wait; }
body.settings-open { overflow: hidden; }

[hidden] { display: none !important; }
[dir="rtl"] .client-endpoint { text-align: start; }
[dir="rtl"] .test-console.completed .start-button { transform: translateX(-50%); }

html[data-theme="speed-blue"], html[data-theme="light-professional"] { color-scheme: light; }
html:not([data-theme="speed-blue"]):not([data-theme="light-professional"]) { color-scheme: dark; }
html:not([data-theme="speed-blue"]):not([data-theme="light-professional"]) .gauge::before,
html:not([data-theme="speed-blue"]):not([data-theme="light-professional"]) .start-button { background: var(--bg); color: var(--text); }

@media (max-width: 820px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .result-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
  .result-go { width:min(var(--result-circle-size),60vw); height:min(var(--result-circle-size),60vw); }
  .result-speeds { gap: 20px; }
}
@media (max-width: 620px) {
  .speed-page { width: min(100% - 22px, 1080px); }
  .topbar { min-height: 68px; }
  .brand-copy small, .topnav a > span:last-child, .topnav-button > span:last-child { display: none; }
  .topnav { gap: 14px; }
  .hero { min-height: calc(100vh - 68px); padding-top: 28px; }
  .gauge-wrap { width: min(var(--start-circle-size), 82vw); }
  .test-console.running .gauge-wrap { width: min(var(--live-gauge-size), 88vw) !important; }
  .test-console.completed .gauge-wrap { width: min(var(--live-gauge-size), 88vw); }
  .live-summary { gap: 16px; }
  .quality-strip { gap: 7px; }
  .test-console.running .quality-strip, .test-console.completed .quality-strip { height: 62px; }
  .result-quality { height: 62px; }
  .quality-icon { width: 52px; height: 43px; transform: scale(.72); }
  .quality-item { grid-template-columns: repeat(5, 6px); gap: 3px; }
  .quality-item > i { width: 6px; height: 6px; }
  .connection-row { margin-top: 42px; gap: 14px; }
  .endpoint { gap: 10px; }
  .round-icon { width: 43px; height: 43px; flex-basis: 43px; }
  .endpoint-copy b { font-size: 16px; }
  .endpoint-copy small { max-width: 120px; font-size: 11px; }
  .mode-switch { gap: 8px; }
  .results { padding: 18px 13px; border-radius: 18px; }
  .result-view .results { padding: 24px 16px; }
  .result-layout { grid-template-columns: 1fr; }
  .result-go-column { gap: 25px; }
  .result-go { width:min(var(--result-circle-size),58vw); height:min(var(--result-circle-size),58vw); }
  .result-connections { grid-template-columns: 1fr 1fr; }
  .result-speed > span b { font-size: 13px; }
  .result-speed > span em { font-size: 12px; }
  .result-speed > strong { font-size: 50px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric { padding: 13px 11px; }
  .metric b { font-size: 21px; }
  .settings-grid { grid-template-columns: 1fr; }
  .location-card { grid-column: auto; }
  .device-card { grid-column: auto; }
  .device-card dl { grid-template-columns: 1fr; }
  .location-values { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .brand-copy { display: none; }
  .connection-row { grid-template-columns: 1fr; gap: 15px; }
  .client-endpoint, .server-endpoint { justify-content: center; text-align: start; }
  .metric-grid { grid-template-columns: 1fr; }
  .result-meta { flex-direction: column; gap: 8px; }
  .history-item { grid-template-columns: 1fr 1fr; }
  .history-item > span:first-child { grid-column: 1 / -1; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}