#mixerGrid input[type="range"],
.quick-mixer-volume input[type="range"]{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:10px 0;
  margin:0;
  cursor:pointer;
  touch-action:pan-y;
  accent-color:var(--accent);
}
#mixerGrid input[type="range"]:focus-visible,
.quick-mixer-volume input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Keep native range geometry and input semantics; only the material changes. */
:is(#webPlayer,.journey-display-brightness) input[type="range"]{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;min-width:0;
  min-height:44px;height:44px;padding:6px 0;background:transparent;cursor:pointer;
  --slider-glass:rgba(65,73,86,.8);
  --slider-edge:rgba(241,245,250,.36);
  --slider-knob:#e4e5e3;
  --slider-track:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 42%,rgba(0,0,0,.14)),linear-gradient(var(--slider-glass),var(--slider-glass)),var(--slider-scene-image,none);
  /* Raised 3px rim, recessed face: light catches the rim above/left and the
     inside face below/right, matching the user's concave knob sketch. */
  --slider-knob-surface:linear-gradient(135deg,color-mix(in srgb,var(--slider-knob) 72%,#66717e),var(--slider-knob) 58%,color-mix(in srgb,var(--slider-knob) 65%,white)) padding-box,linear-gradient(135deg,#fff,color-mix(in srgb,var(--slider-knob) 85%,white) 38%,color-mix(in srgb,var(--slider-knob) 65%,#56616e)) border-box;
  --slider-knob-shadow:inset 1.5px 1.5px 2.5px rgba(35,44,57,.42),inset -1px -1px 1px rgba(255,255,255,.88),1.5px 2.5px 4px rgba(0,0,0,.4),0 0 0 1px rgba(10,16,24,.28);
}
html[data-theme="light"] #webPlayer input[type="range"]{--slider-glass:rgba(218,222,225,.82);--slider-edge:rgba(255,255,255,.72)}
/* A dense glass wash softens the scene; no per-frame JS or blur on the thumb. */
:is(#webPlayer,.journey-display-brightness) input[type="range"]::-webkit-slider-runnable-track{
  height:32px;border:4px solid transparent;border-radius:999px;
  background:var(--slider-track);background-size:auto,auto,cover;background-position:center;
  background-attachment:scroll,scroll,fixed;background-origin:border-box;
  outline:1px solid var(--slider-edge);outline-offset:-1px;
  box-shadow:inset 0 2px 4px rgba(12,18,28,.2),inset 0 -1px 0 rgba(255,255,255,.18);
}
:is(#webPlayer,.journey-display-brightness) input[type="range"]::-moz-range-track{
  box-sizing:border-box;height:32px;border:4px solid transparent;border-radius:999px;
  background:var(--slider-track);background-size:auto,auto,cover;background-position:center;
  background-attachment:scroll,scroll,fixed;background-origin:border-box;
  outline:1px solid var(--slider-edge);outline-offset:-1px;
  box-shadow:inset 0 2px 4px rgba(12,18,28,.2),inset 0 -1px 0 rgba(255,255,255,.18);
}
:is(#webPlayer,.journey-display-brightness) input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;width:24px;height:24px;margin-top:0;
  border:3px solid transparent;border-radius:50%;
  background:var(--slider-knob-surface);box-shadow:var(--slider-knob-shadow);
}
:is(#webPlayer,.journey-display-brightness) input[type="range"]::-moz-range-thumb{
  box-sizing:border-box;width:24px;height:24px;border:3px solid transparent;border-radius:50%;
  background:var(--slider-knob-surface);box-shadow:var(--slider-knob-shadow);
}
:is(#webPlayer,.journey-display-brightness) input[type="range"]:active{--slider-knob-shadow:inset 2px 2px 3px rgba(35,44,57,.48),inset -1px -1px 1px rgba(255,255,255,.78),.5px 1px 2px rgba(0,0,0,.36),0 0 0 1px rgba(10,16,24,.28)}
:is(#webPlayer,.journey-display-brightness) input[type="range"]::-moz-range-progress{background:transparent}
:is(#webPlayer,.journey-display-brightness) input[type="range"]:disabled{cursor:not-allowed;opacity:.5}
body.journey-ambient-off{--slider-scene-image:none}
.journey-display-brightness input[type="range"]{--slider-scene-image:none;--slider-glass:rgba(65,73,86,.74)}
/* Mobile WebKit cannot reliably paint fixed images inside native tracks. */
@media(pointer:coarse){
  #webPlayer input[type="range"]::-webkit-slider-runnable-track{background-attachment:scroll}
  #webPlayer input[type="range"]::-moz-range-track{background-attachment:scroll}
}
#webPlayer .hood-journey-event input[type="range"]{--slider-knob:#d9aa45}
.mixer-source.is-zero-off{opacity:.72}

/* The journey progress rail is also the seek control. Pointer capture is used
   by scene-audio-v2.js, so dragging remains continuous on mouse and touch. */
.journey-track[role="slider"]{cursor:pointer;touch-action:none;position:relative}
.journey-track[role="slider"]::after{content:"";position:absolute;inset:-12px 0}
.journey-track[role="slider"]:focus-visible{outline:2px solid var(--accent);outline-offset:7px;border-radius:999px}
.journey-track[role="slider"] #journeyProgress{pointer-events:none}

@media(max-width:620px){
  #mixerGrid input[type="range"],.quick-mixer-volume input[type="range"]{min-height:44px}
  .journey-track[role="slider"]::after{inset:-16px 0}
}