.glitch-controls {
  position: fixed;
  z-index: 6;
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(28px, 4vw, 56px);
  width: min(300px, calc(100vw - 56px));
  display: grid;
  gap: 12px;
  padding: 20px;
  color: #eee;
  background: rgb(18 18 22 / 95%);
  border: 1px solid #45454d;
  border-radius: 10px;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
}

.glitch-controls[hidden] { display: none; }
.glitch-controls h2 { margin: 0 0 4px; font-size: 15px; }
.glitch-controls label { display: flex; justify-content: space-between; gap: 10px; }
.glitch-controls output { color: #bcb8d7; font-variant-numeric: tabular-nums; }
.glitch-controls input { width: 100%; margin: 0 0 6px; accent-color: #aca0d4; }
.glitch-controls button {
  padding: 10px;
  color: #eee;
  background: #30303b;
  border: 1px solid #656070;
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}
.glitch-controls button:hover { background: #41414e; }
.glitch-controls :focus-visible { outline: 2px solid #c8bce8; outline-offset: 4px; }

.pace-endpoints {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -12px;
  color: #aaa6b6;
  font-size: 11px;
}