/* Ruhige Browser-Komposition: gut erreichbare Regler auf allen Bildschirmgrößen. */
.scope .controls { margin-left: 0; flex-basis: 100%; gap: .75rem 1.5rem; }
.scope .controls label { flex-wrap: wrap; max-width: 100%; }
.scope .controls input[type=range] { width: 7rem; max-width: 100%; }
.scope .controls b { font-variant-numeric: tabular-nums; }
.scope .scope-help { flex-basis: 100%; max-width: none; font-size: .94rem; color: var(--muted); }
.scope .readout { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .scope .btn[aria-pressed="true"] .dot { animation: none; }
}