.touch-preferences {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 17px;
}
.touch-preferences select {
  font-size: 14px;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
}
.touch-preferences .muted {
  margin-top: 7px;
}
@media (pointer: coarse) {
  body {
    --wheel-size: clamp(156px, 44vw, 180px);
    --control-edge: 5vw;
  }
  #wheelZone {
    left: var(--control-edge);
    right: auto;
    bottom: 20px;
    width: var(--wheel-size);
    height: calc(var(--wheel-size) + 20px);
  }
  #wheel {
    width: 100%;
    height: var(--wheel-size);
    border-width: calc(var(--wheel-size) * 0.067);
  }
  .wheel-mark {
    width: 4%;
    height: 9%;
    top: -8%;
    left: 48%;
  }
  .spoke {
    width: 45%;
    height: 7%;
    top: 47%;
  }
  .spoke.down {
    width: 7%;
    height: 48%;
    left: 46.5%;
    top: 50%;
  }
  .hub {
    left: 36.5%;
    top: 36.5%;
    width: 27%;
    height: 27%;
  }
  .pedals {
    left: auto;
    right: var(--control-edge);
    bottom: 25px;
    gap: 12px;
  }
  .pedal {
    width: clamp(52px, 15vw, 66px);
  }
  #resetTouch {
    position: absolute;
    top: -52px;
    right: 0;
    margin: 0;
  }
  .speedometer {
    bottom: calc(var(--wheel-size) + 65px);
    right: var(--control-edge);
  }
  .bottom-left {
    bottom: calc(var(--wheel-size) + 65px);
    left: var(--control-edge);
  }
  body[data-steering-side='right'] #wheelZone {
    left: auto;
    right: var(--control-edge);
  }
  body[data-steering-side='right'] .pedals {
    left: var(--control-edge);
    right: auto;
    flex-direction: row-reverse;
  }
  body[data-steering-side='right'] #resetTouch {
    left: 0;
    right: auto;
  }
  body[data-steering-side='right'] .speedometer {
    left: var(--control-edge);
    right: auto;
  }
  body[data-steering-side='right'] .speed-number {
    justify-content: flex-start;
  }
  body[data-steering-side='right'] .bottom-left {
    left: auto;
    right: var(--control-edge);
    text-align: right;
  }
  body[data-steering-side='right'] .conditions {
    justify-content: flex-end;
  }
}
@media (max-height: 520px) and (pointer: coarse) {
  body {
    --wheel-size: 150px;
    --control-edge: 4vw;
  }
  #wheelZone {
    bottom: 12px;
  }
  .pedals {
    bottom: 18px;
  }
  .pedal {
    width: 60px;
  }
  .bottom-left {
    bottom: 24px;
    left: calc(var(--control-edge) + var(--wheel-size) + 22px);
  }
  .speedometer {
    bottom: 25px;
    right: calc(var(--control-edge) + 154px);
  }
  body[data-steering-side='right'] .bottom-left {
    left: auto;
    right: calc(var(--control-edge) + var(--wheel-size) + 22px);
  }
  body[data-steering-side='right'] .speedometer {
    right: auto;
    left: calc(var(--control-edge) + 154px);
  }
}
@media (max-height: 520px) and (max-width: 700px) and (pointer: coarse) {
  body .bottom-left,
  body[data-steering-side='right'] .bottom-left {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    bottom: 20px;
  }
  body .speedometer,
  body[data-steering-side='right'] .speedometer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 90px;
  }
  body .speed-number,
  body[data-steering-side='right'] .speed-number {
    justify-content: center;
  }
}
@media (max-height: 370px) and (pointer: coarse) {
  body {
    --wheel-size: 136px;
  }
  .timing .time-row,
  .timing .sectors {
    display: none;
  }
}