/* The native range remains the focus, keyboard, and pointer target. */
/* A shallow instrument deck: fixed light, etched edges, and one moving point. */
.listening-desk .transport-row{
  --transport-ground:color-mix(in srgb,var(--black) 96%,var(--paper));
  --transport-edge:color-mix(in srgb,var(--paper) 21%,transparent);
  --transport-etch:color-mix(in srgb,var(--paper) 36%,transparent);
  grid-template-columns:clamp(82px,8.5vw,122px) minmax(0,1fr) minmax(144px,170px);
  column-gap:clamp(26px,3.2vw,52px);
  min-height:190px;margin:0 0 18px;padding:30px clamp(16px,2.2vw,36px);
  border-top:1px solid var(--transport-edge);border-bottom:1px solid var(--transport-edge);
  background:
    radial-gradient(ellipse at 52% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 64%),
    linear-gradient(176deg,color-mix(in srgb,var(--paper) 3%,transparent),transparent 42%),
    var(--transport-ground);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 6%,transparent),0 22px 44px -38px #0009;
}
.listening-desk .transport-row::before{
  content:'';position:absolute;inset:10px;pointer-events:none;
  background:
    linear-gradient(var(--transport-etch),var(--transport-etch)) left top / 12px 1px no-repeat,
    linear-gradient(var(--transport-etch),var(--transport-etch)) left top / 1px 12px no-repeat,
    linear-gradient(var(--transport-etch),var(--transport-etch)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--transport-etch),var(--transport-etch)) right bottom / 1px 12px no-repeat;
  opacity:.7;
}
/* Progress lives at the StarEye; the deck edge is a stationary light seam. */
.listening-desk .transport-row::after{
  inset:-1px 8% auto;width:auto;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper) 62%,var(--accent)),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 20%,transparent);transition:none;
}
html .listening-desk .transport-atmosphere{display:none}
html .listening-desk .transport-row #play-button{
  position:relative;isolation:isolate;width:100%;height:auto;aspect-ratio:1;
  overflow:visible;border:1px solid var(--transport-edge);border-radius:50%;
  background:
    radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--paper) 10%,var(--black)),var(--black) 70%);
  color:var(--paper);gap:8px;transform:none;
  box-shadow:inset 0 1px 1px color-mix(in srgb,var(--paper) 24%,transparent),
    inset 0 -6px 16px #0002,0 0 0 6px var(--transport-ground),
    0 0 0 7px var(--transport-edge),0 8px 20px #0003;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
html .listening-desk .transport-row #play-button::before{
  content:'';position:absolute;inset:7px;z-index:-1;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--paper) 9%,transparent);
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 66%);
}
html .listening-desk .transport-row #play-button::after{
  content:'';position:absolute;inset:-8px;z-index:-2;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 218deg,transparent 0deg 17deg,var(--transport-etch) 17deg 19deg,transparent 19deg 35deg,var(--transport-etch) 35deg 37deg,transparent 37deg 53deg,var(--transport-etch) 53deg 55deg,transparent 55deg 360deg);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.75;animation:none;transform:none;
}
html .listening-desk .transport-row #play-button:hover{
  border-color:color-mix(in srgb,var(--paper) 60%,var(--accent));
  background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--paper) 15%,var(--black)),var(--black) 70%);
  transform:none;
}
html body[data-playing=true] .listening-desk .transport-row #play-button{
  color:var(--paper);border-color:color-mix(in srgb,var(--accent) 55%,var(--paper));
  box-shadow:inset 0 1px 1px color-mix(in srgb,var(--paper) 30%,transparent),
    inset 0 -6px 16px #0002,0 0 0 6px var(--transport-ground),
    0 0 0 7px color-mix(in srgb,var(--accent) 38%,transparent),
    0 0 30px color-mix(in srgb,var(--accent) 10%,transparent);
}
html .listening-desk .transport-row #play-button:focus-visible{outline:2px solid var(--paper);outline-offset:11px}
.listening-desk .transport-row .play-symbol{font-size:clamp(22px,2.2vw,30px);line-height:1}
.listening-desk .transport-row .play-word{font:10px/1 var(--mono);letter-spacing:.18em;padding-left:.18em}
html .listening-desk .transport-row .seek-block{filter:none}
.listening-desk .transport-row .seek-caption{align-items:center;gap:16px;font-size:clamp(16px,1.45vw,24px);line-height:1.25;letter-spacing:.02em;min-height:30px;padding:0 0 7px}
.listening-desk .transport-row #current-caption{min-width:0;overflow-wrap:anywhere}
.listening-desk .transport-row #current-index{font:10px/1 var(--mono);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.listening-desk .transport-row .seek-times{font:11px/1.2 var(--mono);letter-spacing:.1em;color:var(--muted);padding-top:7px;font-variant-numeric:tabular-nums}
.seek-rail{position:relative;min-width:0;isolation:isolate}
.seek-rail::before{
  content:'';position:absolute;inset:3px 8px auto;height:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--transport-etch) 0 1px,transparent 1px 24px);
  mask:linear-gradient(90deg,transparent,#000 8% 92%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8% 92%,transparent);opacity:.5;
}
.seek-rail::after{
  content:'';position:absolute;top:19px;left:8px;right:8px;height:6px;pointer-events:none;
  border-left:1px solid var(--transport-etch);border-right:1px solid var(--transport-etch);
}
.transport-row .seek-rail #seek{
  --seek-thumb-size:16px;
  position:relative;z-index:2;width:100%;height:44px;min-width:0;
  padding:0;border:0;border-radius:0;margin:0;background:transparent;
  appearance:none;-webkit-appearance:none;
}
html .transport-row .seek-rail #seek::-webkit-slider-runnable-track{
  height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 78%,var(--accent)) var(--progress),var(--transport-edge) var(--progress));
  box-shadow:0 1px 0 color-mix(in srgb,var(--black) 60%,transparent);
}
html .transport-row .seek-rail #seek::-moz-range-track,
html .transport-row .seek-rail #seek::-moz-range-progress{height:2px}
html .transport-row .seek-rail #seek::-moz-range-track{background:var(--transport-edge)}
html .transport-row .seek-rail #seek::-moz-range-progress{background:color-mix(in srgb,var(--paper) 78%,var(--accent))}
html .transport-row .seek-rail #seek::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:var(--seek-thumb-size);height:var(--seek-thumb-size);margin-top:-7px;
  background:transparent;border:0;box-shadow:none;border-radius:0;transform:none;
}
html .transport-row .seek-rail #seek::-moz-range-thumb{
  width:var(--seek-thumb-size);height:var(--seek-thumb-size);
  background:transparent;border:0;box-shadow:none;border-radius:0;transform:none;
}
/* A single measured position is shared with the full-viewport grayscale wake. */
html .transport-row .seek-rail #seek-stareye{
  display:grid;place-items:center;position:absolute;z-index:3;
  left:8px;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);
  color:#fff;opacity:1;pointer-events:none;transition:none;
  filter:drop-shadow(0 0 2px #fffd) drop-shadow(0 0 9px var(--accent)) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 40%,transparent));
}
html .transport-row .seek-rail #seek-stareye::before{
  content:'';position:absolute;inset:-13px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,#ffffff68 0%,color-mix(in srgb,var(--accent) 32%,transparent) 25%,transparent 68%);
  opacity:.65;transform:none;transition:opacity .3s;
}
html body[data-playing=true] .transport-row .seek-rail #seek-stareye::before{opacity:1;transform:none}
html .transport-row .seek-rail #seek-stareye span,
html .transport-row .seek-rail #seek-stareye .stareye{
  display:block;width:38px;height:38px;animation:none;transform:none;filter:none;
}
html .transport-row .seek-rail #seek-stareye .stareye{fill:currentColor}
html[data-scheme] #playback-wake{display:block}
#seek:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
html[data-theme=light] .transport-row .seek-rail #seek-stareye{filter:drop-shadow(0 0 1px #111) drop-shadow(0 0 2px #1118) drop-shadow(0 0 10px var(--accent))}
.volume-control{
  display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:4px 10px;min-width:0;
  padding:10px 0 10px 20px;border-left:1px solid var(--transport-edge);
}
.volume-lever{display:grid;grid-template-columns:1fr auto;align-items:center;min-width:0;gap:0 6px}
.volume-label,.volume-value{font:10px/1.2 var(--mono);letter-spacing:.07em;color:var(--paper);font-variant-numeric:tabular-nums}
.volume-value{color:var(--muted)}
.mute-button{
  display:grid;place-items:center;width:44px;height:44px;padding:10px;
  border:1px solid var(--transport-edge);border-radius:50%;background:var(--transport-ground);color:var(--paper);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 7%,transparent);
  cursor:pointer;touch-action:manipulation;
}
.mute-button svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mute-button:hover{color:var(--paper);border-color:var(--transport-etch)}
.mute-button:focus-visible,#volume:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.mute-button .volume-off{display:none}
.mute-button[data-silent=true] .volume-on{display:none}
.mute-button[data-silent=true] .volume-off{display:block}
#volume{
  grid-column:1 / -1;width:100%;min-width:0;height:44px;margin:0;padding:0;
  border:0;background:transparent;appearance:none;-webkit-appearance:none;
  cursor:pointer;touch-action:pan-y;--volume:65%;
}
#volume::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--paper) var(--volume),var(--rule) var(--volume))}
#volume::-moz-range-track{height:2px;background:var(--rule)}
#volume::-moz-range-progress{height:2px;background:var(--paper)}
#volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:6px;height:18px;margin-top:-8px;border:1px solid var(--paper);border-radius:1px;background:linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--paper) 60%,var(--black)));box-shadow:0 1px 5px #0005}
#volume::-moz-range-thumb{width:6px;height:18px;border:1px solid var(--paper);border-radius:1px;background:linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--paper) 60%,var(--black)));box-shadow:0 1px 5px #0005}
@media(max-width:700px){
  .listening-desk .transport-row{grid-template-columns:70px minmax(0,1fr);gap:10px 22px;min-height:178px;margin-bottom:12px;padding:25px 16px}
  .transport-row .play-button{grid-column:1;grid-row:1 / 3;align-self:center}
  .transport-row .seek-block{grid-column:2;grid-row:1}
  .transport-row .volume-control{grid-column:2;grid-row:2;width:min(100%,178px);justify-self:end;padding:0;border:0}
  .volume-lever{grid-template-columns:auto 1fr auto;gap:8px}
  .listening-desk .transport-row .seek-caption{font-size:15px;padding-bottom:3px;min-height:0}
  .listening-desk .transport-row .seek-times{font-size:10px;padding-top:3px}
  .listening-desk .transport-row .play-word{font-size:9px;letter-spacing:.1em}
  .volume-label{font-size:9px}
  .volume-value{grid-column:3;grid-row:1;font-size:9px;min-width:3ch;text-align:right}
  #volume{grid-column:2;grid-row:1;height:44px}
  html .transport-row .seek-rail #seek-stareye,
  html .transport-row .seek-rail #seek-stareye span,
  html .transport-row .seek-rail #seek-stareye .stareye{width:32px;height:32px}
}
@media(max-width:390px){
  .listening-desk .transport-row{grid-template-columns:58px minmax(0,1fr);column-gap:18px;padding-inline:14px}
  .volume-control{gap:4px}
  .volume-lever{gap:5px}
}
@media(prefers-reduced-motion:reduce){
  html .transport-row .seek-rail #seek-stareye::before,
  html .listening-desk .transport-row #play-button{transition:none}
}
html[data-motion=off] .transport-row #play-button,
html[data-motion=off] .transport-row #seek-stareye::before{transition:none}
@media(forced-colors:active){
  .listening-desk .transport-row{border:1px solid CanvasText;box-shadow:none}
  .listening-desk .transport-row::before,.listening-desk .transport-row::after,.seek-rail::before{display:none}
  html[data-theme] .transport-row .seek-rail #seek-stareye{color:CanvasText;filter:none}
  html .transport-row .seek-rail #seek-stareye::before{display:none}
  html .listening-desk .transport-row #play-button{border-color:ButtonText;box-shadow:none}
}