:root {
  --orbit-size: clamp(220px, 13vw, 310px);
}

html {
  font-size: clamp(16px, .84vw, 20px);
}

.shell {
  width: min(2200px, 100%);
  padding: clamp(12px, 1.2vw, 28px);
}

.workspace {
  grid-template-columns: minmax(0, 1fr) clamp(340px, 18vw, 430px);
  gap: clamp(12px, 1vw, 22px);
}

.viewer {
  min-height: min(78vh, 980px);
}

.orbit {
  width: var(--orbit-size);
  height: var(--orbit-size);
}

.dot {
  transform: rotate(var(--a)) translateY(calc(var(--orbit-size) / -2));
}

@media (min-width: 1800px) {
  .controls {
    padding: 15px 18px;
  }

  .orbit-card,
  .readout {
    padding: 22px;
  }
}

@media (max-width: 1050px) {
  :root {
    --orbit-size: 220px;
  }

  html {
    font-size: 16px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }
}