.klahvu_speedtest_clock {
  margin-bottom: 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.klahvu_speedtest_line,
.klahvu_speedtest_next { min-height: 1.5em; }

.klahvu_speedtest_line { margin-bottom: 0; }

.klahvu_speedtest_next { margin-bottom: 12px; }

.klahvu_speedtest_result:focus { outline: none; }

.klahvu_speedtest_buttons {
  justify-content: center;
  margin: 16px 0 0;
}

.klahvu_speedtest_buttons:not(:has(.icon_button:not([hidden]))) { display: none; }

.klahvu_speedtest_chart { margin-top: 18px; }

.klahvu_speedtest_chart svg {
  display: block;
  overflow: visible;
}

.klahvu_speedtest_chart_grid {
  stroke: currentColor;
  stroke-opacity: 0.15;
}

.klahvu_speedtest_chart_label {
  font-size: 12px;
  fill: currentColor;
  fill-opacity: 0.6;
}

.klahvu_speedtest_chart_speed {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.klahvu_speedtest_chart_error { fill: #e03131; }

body.dark .klahvu_speedtest_chart_error { fill: #ff6b6b; }

.klahvu_speedtest_legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 4px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.klahvu_speedtest_legend span::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 6px;
}

.klahvu_speedtest_legend_speed::before {
  width: 16px;
  height: 2px;
  background: currentColor;
}

.klahvu_speedtest_legend_error::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e03131;
}

body.dark .klahvu_speedtest_legend_error::before { background: #ff6b6b; }

.klahvu_speedtest_errors,
.klahvu_speedtest_practice { margin: 14px 0 0; }

.klahvu_speedtest_practice a { text-decoration: underline; }

.klahvu_speedtest_key {
  display: inline-block;
  min-width: 1.4em;
  margin: 0 3px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 18px;
}