.range_container {
  --loop-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Crect x='12' y='6' width='20' height='36' rx='7' fill='%23fff3ef' stroke='%23ff5d4f' stroke-width='3'/%3E%3C/svg%3E");
  --loop-grip-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Crect x='12' y='6' width='20' height='36' rx='7' fill='%23ff5d4f' stroke='%23ffffff' stroke-width='3'/%3E%3C/svg%3E");
}
.time_sliders_control { margin: 102px 0 72px; touch-action: none; }
.time_sliders_control #fromSlider, .time_sliders_control #toSlider {
  position: absolute; top: 0 !important; height: 9px; margin: 0;
  pointer-events: none; touch-action: none;
}
#fromSlider::-webkit-slider-thumb, #toSlider::-webkit-slider-thumb {
  width: 44px !important; height: 48px !important; margin-top: -19.5px !important;
  pointer-events: none !important; border: 0 !important;
  border-radius: 0 !important; background: var(--loop-grip) center / 44px 48px no-repeat !important;
  box-shadow: none !important;
  box-sizing: border-box; transition: none !important; transform: none !important;
  cursor: grab !important;
}
#fromSlider::-moz-range-thumb, #toSlider::-moz-range-thumb {
  width: 44px !important; height: 48px !important;
  pointer-events: none !important; border: 0 !important;
  border-radius: 0 !important; background: var(--loop-grip) center / 44px 48px no-repeat !important;
  box-shadow: none !important;
  box-sizing: border-box; transition: none !important; transform: none !important;
  cursor: grab !important;
}
/* A shared touch surface prevents native ranges underneath stealing a drag. */
.time_sliders_control::before {
  content: ""; position: absolute; left: 0; right: 0; top: -19.5px;
  height: 48px; z-index: 50; cursor: grab;
}
.time_sliders_control #loopStartLabel { bottom: 52px; }
.time_sliders_control #loopEndLabel { top: auto; bottom: 52px; }
.time_sliders_control #loopStartLabel, .time_sliders_control #loopEndLabel {
  pointer-events: auto; touch-action: none; cursor: grab; z-index: 60;
  min-width: 44px; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.time_sliders_control #loopStartLabel::after, .time_sliders_control #loopEndLabel::after {
  left: var(--loop-arrow-x, 50%); top: auto; bottom: -6px; border-top: 6px solid #ff5d4f; border-bottom: 0;
}
.time_sliders_control #currentTimeLabel { top: 36px; bottom: auto; }
.time_sliders_control #currentTimeLabel::after {
  top: -6px; border-top: 0; border-bottom: 6px solid #ff5d4f;
}
.time_sliders_control .bubble { transition: none; }
.time_sliders_control input:focus, .time_sliders_control input:focus-visible { outline: none !important; }
.time_sliders_control input:focus-visible::-webkit-slider-thumb { background-image: var(--loop-grip-focus) !important; }
.time_sliders_control input:focus-visible::-moz-range-thumb { background-image: var(--loop-grip-focus) !important; }
.time_sliders_control.dragging { cursor: grabbing; }

#playbackSpeed::-webkit-slider-thumb {
  width: 44px !important; height: 48px !important; margin-top: -19.5px !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--loop-grip) center / 44px 48px no-repeat !important;
  box-shadow: none !important; transform: none !important;
}
#playbackSpeed::-moz-range-thumb {
  width: 44px !important; height: 48px !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--loop-grip) center / 44px 48px no-repeat !important;
  box-shadow: none !important; transform: none !important;
}
#playbackSpeed:focus-visible { outline: none; }
#playbackSpeed:focus-visible::-webkit-slider-thumb { background-image: var(--loop-grip-focus) !important; }
#playbackSpeed:focus-visible::-moz-range-thumb { background-image: var(--loop-grip-focus) !important; }
.loop-heading h2 { padding-right: 96px; }
#loopZoomButton, #notes-icon {
  position: absolute; top: 0; right: 0; z-index: 10;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--accent); cursor: pointer;
}
#loopZoomButton { right: 48px; }
#loopZoomButton svg { width: 22px; height: 22px; }
#loopZoomButton:disabled { opacity: .4; cursor: default; }
#loopZoomButton:hover, #notes-icon:hover { background: var(--bg-glass-hover); }
#loopZoomButton:focus-visible, #notes-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }