.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dashboard {
  --gauge-width: min(15.7vw, 31dvh);
  --gauge-right: max(1.2vw, env(safe-area-inset-right));
}

.speed-display {
  position: absolute;
  top: 11%;
  right: max(17.3vw, calc(var(--gauge-right) + var(--gauge-width) + 5px));
  width: clamp(86px, 14vw, 184px);
  border: 0;
  border-bottom: 1px solid #5acaff;
  border-radius: 0;
  padding: clamp(2px, .35vw, 5px) clamp(4px, .7vw, 9px) clamp(4px, .7vw, 8px);
  background: linear-gradient(0deg, #29527750, transparent 75%);
  color: #a1dcf9;
  text-align: left;
  font: 650 clamp(10px, 1.45vw, 15px) / 1 system-ui, sans-serif;
  touch-action: manipulation;
  cursor: pointer;
}

.speed-display:focus-visible { outline: 2px solid #e5fbff; outline-offset: 3px; }
.speed-label { display: block; margin-bottom: .6vw; white-space: nowrap; }
.speed-reading { display: flex; align-items: baseline; gap: .6vw; white-space: nowrap; }
#speed-digits {
  color: #e5fbff;
  font-size: clamp(20px, min(6.5vw, 12dvh), 84px);
  font-style: italic;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: .96;
  text-shadow: 0 0 9px #2ebcff8a;
}
#speed-digits.speed-digits-wide { font-size: clamp(18px, min(5.1vw, 9.6dvh), 66px); }

.speed-backdrop {
  position: absolute;
  inset: 8% 0 62% calc(50% + var(--art-width) * .23);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #0b0b0d 11%, #0b0b0d);
  mask-image: linear-gradient(#000 93%, transparent);
}
.speed-gauge {
  position: absolute;
  top: 16%;
  right: var(--gauge-right);
  width: var(--gauge-width);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 .85vw #ff4b2666) drop-shadow(0 3px 4px #000b);
}
.speed-gauge-ticks { filter: drop-shadow(0 0 1.7px #4ba8ff); }
.speed-message {
  position: absolute;
  top: calc(16% + var(--gauge-width) + 4px);
  right: var(--gauge-right);
  width: max(var(--gauge-width), 95px);
  margin: 0;
  color: #f9ded9;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  font: 600 clamp(10px, 1.4vw, 14px) / 1.2 system-ui, sans-serif;
  pointer-events: none;
}

.smart-metal-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 42px;
  height: 26px;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px #9aa9ba44);
}
.smart-metal-ring, .smart-metal-arrow {
  background:
    repeating-linear-gradient(0deg, #fff0 0 1px, #fff2 1px 2px, #0001 2px 3px),
    linear-gradient(145deg, #718090 1%, #eaf4ff 28%, #a7b1bb 43%, #556779 59%, #dce6ed 77%, #81909c);
}
.smart-metal-ring {
  width: 25px;
  height: 23px;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 31%, 59% 39%, 59% 61%, 100% 69%, 100% 100%, 0 100%);
  mask-image: radial-gradient(ellipse at center, transparent 40%, #000 43%);
}
.smart-metal-arrow {
  width: 12px;
  height: 13px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}