:root {
  --background: grey;
  --track: #747474;
  --thumb: #c4c4c4;
}

body {
  background: var(--background);
  color: white;
  font-family: monospace;
  isolation: isolate;
}

.master-control,
.groups {
  position: relative;
  z-index: 1;
}

.master-control,
.controls,
.track {
  width: 260px;
}

.master-control {
  margin-bottom: 24px;
}

.groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.track {
  margin-bottom: 32px;
}

label {
  display: block;
  margin-top: 12px;
}

.play-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.play-toggle.playing::after {
  content: " (playing)";
}

input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 4px 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid #666;
  border-radius: 3px;
  background: var(--track);
  box-shadow: inset 0 2px 2px #0007, 0 1px #fff3;
}

input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  appearance: none;
  border: 1px solid #555;
  border-radius: 50%;
  background: var(--thumb);
  box-shadow: inset 0 1px #fff8, 0 1px 2px #0007;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid #666;
  border-radius: 3px;
  background: var(--track);
  box-shadow: inset 0 2px 2px #0007, 0 1px #fff3;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid #555;
  border-radius: 50%;
  background: var(--thumb);
  box-shadow: inset 0 1px #fff8, 0 1px 2px #0007;
}

input[type="range"]:focus-visible {
  outline: 1px solid white;
  outline-offset: 3px;
}

.ball-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 0;
  border: 1px solid #000000;
  background-image: url("netting.png");
  background-size: cover;
  background-position: center;
}

#ballCanvas {
  display: block;
  cursor: grab;
}

#ballCanvas.dragging {
  cursor: grabbing;
}