html,
body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #eef2ff;
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
}

.telemetry-wrap {
  padding: 12px 16px;
  box-sizing: border-box;
}

.telemetry-title {
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.telemetry-board {
  display: grid;
  gap: 6px;
}

.telemetry-row {
  display: grid;
  grid-template-columns: 42px 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(10, 15, 23, 0.55);
  border: 1px solid rgba(231, 237, 247, 0.18);
  border-left: 3px solid var(--pilot-color, rgba(231, 237, 247, 0.2));
}

.telemetry-row .rank {
  text-align: center;
  font-weight: 700;
  color: rgba(255, 220, 180, 0.95);
}

.telemetry-row img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  border: 2px solid var(--pilot-color, rgba(231, 237, 247, 0.2));
}

.telemetry-row .name {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.4px;
}

.telemetry-row .gap {
  font-size: 14px;
  color: rgba(231, 237, 247, 0.7);
}

.telemetry-row .progress {
  font-size: 13px;
  color: rgba(231, 237, 247, 0.55);
}

.telemetry-empty {
  font-size: 13px;
  color: rgba(231, 237, 247, 0.6);
}