.mixrange {
  --range-ink: var(--deck, #f4b77a);
  --range-fill: #eab87f1f;
  min-width: 0;
  margin-top: 5px;
}
.mixrange[data-side=b] { --range-ink: var(--deck, #8cd9d1); --range-fill: #80d4c923; }
.mixrange-title, .mixrange-tools, .mixrange-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 6px;
}
.mixrange-title { margin-bottom: 4px; }
.mixrange-title b { font: 570 11px/1.3 "Segoe UI","Microsoft YaHei UI",sans-serif; color: #cbd1c4; }
.mixrange-times { font: 10px/1.4 var(--mono,monospace); color: var(--range-ink); white-space: nowrap; }
.mixrange-lane {
  position: relative;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #3d443a;
  background: #101410;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.mixrange-lane canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mixrange-body, .mixrange-edge {
  position:absolute;
  top:0;
  bottom:0;
  padding:0;
  min-width:0;
  border-radius:0;
  touch-action:none;
  user-select:none;
  transform:none!important;
}
.mixrange-body {
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--range-fill);
  color:var(--range-ink);
  border-top:2px solid var(--range-ink);
  border-bottom:2px solid var(--range-ink);
  cursor:grab;
  overflow:hidden;
}
.mixrange-body:hover { background:color-mix(in srgb,var(--range-ink) 20%,transparent); }
.mixrange-grip {
  display:block;
  padding:0 4px;
  border:1px solid color-mix(in srgb,var(--range-ink) 65%,transparent);
  border-radius:3px;
  font: 600 12px/12px var(--mono,monospace);
  letter-spacing: .5px;
  background:#19201cf2;
  pointer-events:none;
}
.mixrange-body.is-tiny .mixrange-grip { display:none; }
.mixrange-lane.is-narrow .mixrange-body { z-index:2; overflow:visible; pointer-events:none; }
.mixrange-lane.is-narrow .mixrange-body::after {
  content:'↔';
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:22px;
  line-height:12px;
  border:1px solid var(--range-ink);
  border-radius:3px;
  background:#19201c;
  color:var(--range-ink);
  font-family:var(--mono,monospace);
  pointer-events:auto;
}
.mixrange-edge {
  width:14px;
  display:block;
  background:transparent;
  border:0;
  cursor:ew-resize;
  z-index:1;
}
.mixrange-edge::before {
  content:'';
  position:absolute;
  left:var(--edge-offset);
  transform:translateX(var(--edge-line-offset));
  top:0;
  bottom:0;
  width:6px;
  background:var(--range-ink);
}
.mixrange-edge::after {
  content:'';
  position:absolute;
  top:calc(50% - 4px);
  left:calc(var(--edge-offset) + 2px);
  width:2px;
  height:8px;
  border-radius:2px;
  background:#243024;
}
.mixrange-edge[data-action=end]::after { left:calc(var(--edge-offset) - 4px); }
.mixrange-lane.is-narrow .mixrange-edge[data-action=start] { bottom:56%; }
.mixrange-lane.is-narrow .mixrange-edge[data-action=end] { top:42%; bottom:26%; }
.mixrange-edge:hover::before, .mixrange-edge:focus-visible::before { filter:brightness(1.25); }
.mixrange [hidden] { display:none!important; }
.mixrange [data-action]:focus-visible { outline:1px dashed white; outline-offset:-3px; }
.mixrange[data-dragging=move] .mixrange-lane, .mixrange[data-dragging=move] .mixrange-body { cursor:grabbing; }
.mixrange[data-dragging=start] .mixrange-lane, .mixrange[data-dragging=end] .mixrange-lane { cursor:ew-resize; }
.mixrange-tools { margin-top:4px; flex-wrap:wrap; row-gap:2px; }
.mixrange-hint { color:#9ba495; font-size:10px; }
.mixrange-zoom { display:inline-flex; align-items:center; gap:3px; margin-left:auto; }
.mixrange-zoom button {
  padding:1px 5px;
  min-width:22px;
  height:21px;
  border:1px solid #3c4439;
  border-radius:4px;
  background:#232822;
  color:#cbd3c6;
  font:12px/1 var(--mono,monospace);
}
.mixrange-zoom [data-zoom=fit] { font:10px/1 "Segoe UI","Microsoft YaHei UI",sans-serif; margin-left:2px; }
.mixrange-zoom button:enabled:hover { color:var(--range-ink); border-color:var(--range-ink); }
.mixrange-scale { text-align:center; font:10px var(--mono,monospace); min-width:26px; color:#b1b9a9; }
.mixrange-nav { height:15px; margin-top:2px; }
.mixrange-nav span { font-size:9px; color:#9ba495; }
.mixrange-nav input.mixrange-pan {
  --tint:var(--range-ink);
  flex:1;
  margin:0;
  height:6px;
  background:#111510;
  box-shadow:inset 0 0 0 1px #343d31;
}
.mixrange-nav .mixrange-pan::-webkit-slider-thumb {
  width:var(--range-thumb,30%);
  min-width:12px;
  height:8px;
  background:color-mix(in srgb,var(--range-ink) 40%,#333d30);
  border:1px solid color-mix(in srgb,var(--range-ink) 60%,#333d30);
  border-radius:4px;
  cursor:ew-resize;
}
.mixrange-nav .mixrange-pan::-moz-range-thumb {
  width:var(--range-thumb,30%);
  height:7px;
  border:0;
  background:var(--range-ink);
}
.mixrange.is-inactive .mixrange-lane { cursor:default; }
@media(max-width:700px) {
  .mixrange-title { gap:2px; flex-wrap:wrap; }
  .mixrange-title b { font-size:10px; }
  .mixrange-times { font-size:9px; }
  .mixrange-zoom button { height:22px; }
  .mixrange-hint { font-size:9px; }
}