.range-editor { --range-surface: var(--Background, #171b25); --range-ink: var(--ReadableOnBackground, #f5f5f5); color: var(--range-ink); background: var(--range-surface); border: 1px solid currentColor; border-radius: 10px; padding: 12px; min-width: 0; max-width: 100%; box-sizing: border-box; text-shadow: none; }
.range-editor * { box-sizing: border-box; min-width: 0; text-shadow: none; }
.range-editor h3 { margin: 0 0 8px; }
.range-editor p { overflow-wrap: anywhere; }
.range-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.range-editor fieldset { margin: 0; padding: 8px; border: 1px solid currentColor; border-radius: 6px; }
.range-editor label { display: block; margin: 6px 0; }
.range-editor input, .range-editor select, .range-editor button { color: var(--range-ink); background: var(--range-surface); border: 1px solid currentColor; border-radius: 6px; min-height: 44px; width: 100%; max-width: 100%; padding: 8px; font: inherit; }
.range-editor select { appearance: none; -webkit-appearance: none; height: auto; line-height: 1.25; min-height: max(44px, calc(1.25em + 18px)); padding-inline-end: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--range-ink) 50%), linear-gradient(135deg, var(--range-ink) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.range-editor select option { color: var(--range-ink); background: var(--range-surface); }
.range-editor button { margin: 4px 0; white-space: normal; cursor: pointer; }
.range-editor :disabled { opacity: .6; cursor: not-allowed; }
.range-editor :focus-visible { outline: 3px solid var(--Accent, #7ebfff); outline-offset: 2px; }
.range-editor output { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 0; }
.range-editor [hidden] { display: none !important; }
#all-tracks-wrapper [data-range-source] { outline: 3px solid var(--Text, #fff); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--Background, #171b25); }
#all-tracks-wrapper[data-range-selection] .beat-square { cursor: crosshair; }
#all-tracks-wrapper[data-range-selection] .bar-visual,
#all-tracks-wrapper[data-range-selection] .beat-square { touch-action: pan-y pinch-zoom !important; user-select: none; -webkit-user-select: none; }
@media(max-width: 599px) { .range-editor-grid { grid-template-columns: minmax(0, 1fr); } }