* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #343c43; }
#coast { display: block; width: 100%; height: 100%; }
#instruments {
  position: fixed;
  left: max(clamp(22px, 3.4vw, 64px), env(safe-area-inset-left));
  bottom: max(clamp(22px, 4.3vh, 56px), env(safe-area-inset-bottom));
  color: #fffcf2;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 7px #17201fa8;
  user-select: none;
  pointer-events: none;
}
.velocity { display: flex; align-items: baseline; gap: 8px; }
#speed { font-size: clamp(44px, 5.1vw, 75px); line-height: .98; font-weight: 500; letter-spacing: -.075em; }
.velocity span { font-size: 12px; font-weight: 500; letter-spacing: .035em; }
.chronometer {
  display: flex; align-items: baseline; gap: 9px; padding-top: 8px; margin-top: 7px;
  border-top: 1px solid #f5f2de7a; font-size: 13px; line-height: 1; letter-spacing: .065em;
}
.chronometer span { font-size: 9px; letter-spacing: .16em; color: #eee3c6; font-weight: 600; }