/* A quiet transport, using the same material and colors as the table. */
:root body #replay-controls{
 display:grid;grid-template-columns:minmax(160px,240px) auto minmax(60px,1fr) 64px auto;
 grid-template-areas:"chapter transport progress count source";align-items:center;gap:4px 14px;
 flex:none;min-width:0;padding:8px 16px;border:0;border-radius:16px;
 background:linear-gradient(115deg,#ffffff08,transparent 55%),var(--table);color:var(--ink);
 box-shadow:inset 0 1px 0 #ffffff0a;
}
:root body #replay-controls[hidden]{display:none}
#replay-controls .replay-chapter{grid-area:chapter;position:relative;min-width:0}
#replay-controls .replay-source{grid-area:source;white-space:nowrap;color:var(--muted);font-size:12px;line-height:1.4}
#replay-controls .replay-transport{grid-area:transport;display:flex;align-items:center;gap:2px}
:root body #replay-controls button{
 display:grid;place-items:center;width:44px;height:44px;min-height:44px;flex:none;padding:0;
 border:0;border-radius:50%;background:transparent;color:var(--ink);transition:background .15s,opacity .15s;
}
#replay-controls button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
:root body #replay-controls #auto-replay{background:var(--accent);color:var(--primary-ink)}
#replay-controls #auto-replay .replay-play{transform:translateX(-1px);fill:currentColor;stroke:none}
#replay-controls #auto-replay .replay-pause{display:none;stroke-width:3}
#replay-controls #auto-replay[aria-pressed=true] .replay-play{display:none}
#replay-controls #auto-replay[aria-pressed=true] .replay-pause{display:block}
:root body #replay-controls button:disabled{opacity:.25;cursor:default}
@media(hover:hover){:root body #replay-controls button:not(:disabled):not(#auto-replay):hover{background:var(--soft)}}
:root body #replay-controls .range{
 grid-area:progress;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;margin:0;padding:0;
 border:0;border-radius:0;outline-offset:0;background:transparent;cursor:pointer;accent-color:var(--accent);touch-action:pan-y;
}
#replay-controls .range::-webkit-slider-runnable-track{height:3px;border:0;border-radius:3px;background:linear-gradient(to right,var(--accent) 0 var(--replay-progress,0%),var(--line) var(--replay-progress,0%) 100%)}
#replay-controls .range::-moz-range-track{height:3px;border:0;border-radius:3px;background:var(--line)}
#replay-controls .range::-moz-range-progress{height:3px;background:var(--accent)}
#replay-controls .range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px transparent}
#replay-controls .range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}
:root body #replay-controls .replay-step{grid-area:count;white-space:nowrap;color:var(--muted);min-width:58px;text-align:right;font:12px/1.4 Arial,sans-serif;font-variant-numeric:tabular-nums}
@media(max-width:760px){
 :root body #replay-controls{grid-template-columns:136px minmax(30px,1fr) max-content;grid-template-areas:"chapter chapter source" "transport progress count";gap:0 10px;padding:2px 12px 6px;border-radius:14px}
 #replay-controls .replay-source{text-align:right}
}
@media(max-width:360px){
 :root body #replay-controls{padding-inline:8px;column-gap:6px}
 #replay-controls .replay-source{max-width:76px;white-space:normal}
}
@media(min-width:761px) and (max-width:1000px){:root body #replay-controls{grid-template-columns:180px 136px minmax(40px,1fr) 58px;grid-template-areas:"chapter transport progress count";gap:8px}#replay-controls .replay-source{display:none}}
@media(prefers-reduced-motion:reduce){:root body #replay-controls button{transition:none}}