/* A linear time axis with a small decorative wave and native Video.js input. */
#vesper-player .time-slider{--neon-color:color-mix(in srgb,#59f5d3 80%,var(--accent));--neon-progress:var(--media-slider-fill,0%);--neon-offset:22px}
#vesper-player .time-slider[data-dragging]{--neon-progress:var(--media-slider-pointer,0%)}
#vesper-player .rail-timeline{--neon-color:color-mix(in srgb,#59f5d3 80%,var(--accent));--time-link:14px}
/* The readouts are the two terminals of one continuous time axis. */
#vesper-player .control-desk .rail-timeline .time-readout{position:relative;align-items:center;justify-content:center;min-width:48px;height:26px;padding:0 7px;white-space:nowrap;border:1px solid color-mix(in srgb,var(--neon-color) 24%,transparent);border-radius:10px;flex:none}
#vesper-player .control-desk .rail-timeline .current-time{border-right:0;border-radius:10px 0 0 10px;background:linear-gradient(90deg,color-mix(in srgb,var(--neon-color) 12%,transparent),transparent)}
#vesper-player .control-desk .rail-timeline .current-time{color:color-mix(in srgb,var(--neon-color) 40%,var(--rail-text))}
#vesper-player .control-desk .rail-timeline .duration-time{color:color-mix(in srgb,var(--accent) 45%,var(--rail-text))}
#vesper-player .control-desk .rail-timeline .duration-time{border-left:0;border-radius:0 10px 10px 0;background:linear-gradient(270deg,#9bcbff0c,transparent);border-color:#b8dce526}
#vesper-player .rail-timeline .time-readout::after{content:'';position:absolute;top:50%;height:1.5px;width:calc(var(--time-link) + 1px);translate:0 -50%;pointer-events:none}
#vesper-player .rail-timeline .current-time::after{right:calc(-1 * var(--time-link));background:linear-gradient(90deg,color-mix(in srgb,var(--neon-color) 40%,transparent),var(--neon-color));box-shadow:0 0 3px color-mix(in srgb,var(--neon-color) 18%,transparent)}
#vesper-player .rail-timeline .duration-time::after{left:calc(-1 * var(--time-link));background:color-mix(in srgb,var(--neon-color) 35%,transparent)}
#vesper-player .control-desk .rail-timeline,#vesper-player .control-desk .time-slider{height:44px;min-height:44px}
#vesper-player .time-slider .slider-track{visibility:hidden}
#vesper-player .time-slider .neon-visual{display:block;position:absolute;inset:0;pointer-events:none;color:var(--neon-color)}
#vesper-player .time-slider .neon-visual::after{content:'';position:absolute;left:var(--neon-progress);top:var(--neon-offset);translate:-50% -50%;width:calc(14px + 6px * var(--pulse-energy,0));height:calc(14px + 6px * var(--pulse-energy,0));border-radius:50%;background:radial-gradient(#b8ffec80,transparent 72%);opacity:calc(var(--pulse-energy,0) * .3);pointer-events:none}
#vesper-player .neon-visual>span{position:absolute;inset:0;display:block;pointer-events:none}
#vesper-player .neon-visual svg{display:block;position:absolute;width:100%;height:100%;overflow:visible;pointer-events:none}
#vesper-player .neon-visual .neon-vertical{display:none}
#vesper-player .neon-visual .neon-stroke{stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
#vesper-player .neon-rest{opacity:.17}
#vesper-player .neon-buffer{opacity:.28;clip-path:inset(0 calc(100% - var(--media-slider-buffer,0%)) 0 0)}
#vesper-player .neon-played{clip-path:inset(-10px calc(100% - var(--neon-progress)) -2px -10px)}
#vesper-player .neon-played .neon-stroke{filter:drop-shadow(0 0 1px color-mix(in srgb,currentColor 35%,transparent)) drop-shadow(0 0 3px color-mix(in srgb,currentColor 28%,transparent))}
#vesper-player .rail-timeline .time-slider .slider-thumb{left:var(--neon-progress);top:var(--neon-offset);bottom:auto;translate:-50% -50%;transform:none;width:12px;height:12px;border:1px solid #d5fff7;background:#b8ffec;box-shadow:0 0 0 2px #65f5d614,0 0 6px #4aefd945,0 0 11px #4aefd918;z-index:2}
#vesper-player .time-slider .slider-thumb::after{content:'';position:absolute;left:50%;top:11px;width:1px;height:calc(39px - var(--neon-offset));background:linear-gradient(#65f5d652,#65f5d600);pointer-events:none}
#vesper-player .time-slider:is(:hover,:focus-within,[data-dragging]) .slider-thumb{box-shadow:0 0 0 3px #65f5d61f,0 0 8px #4aefd961,0 0 14px #4aefd91f}
#vesper-player .rail-timeline .range-band{top:5px;height:34px;z-index:1;background:#b9f8dc13;border-color:#b9f8dc7a;border-radius:7px;pointer-events:none}
#vesper-player .time-slider .slider-preview{z-index:5}
#vesper-player .workspace[data-dock=top] .film-top{top:141px}
#vesper-player .workspace[data-dock=top] .playback-tools{top:145px}
@container film (max-width:640px){
 #vesper-player .rail-timeline{--time-link:8px}
 #vesper-player .control-desk .rail-timeline .time-readout{min-width:38px;height:24px;padding-inline:5px;font-size:9px}
 #vesper-player .workspace[data-dock=top] .film-top{top:174px}
 #vesper-player .workspace[data-dock=top] .playback-tools{top:178px}
}
/* On the sides, time still runs bottom to top. Only the artwork rotates. */
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline{height:auto}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline .current-time{min-width:44px;height:24px;padding:0 4px;border:1px solid color-mix(in srgb,var(--neon-color) 24%,transparent);border-bottom:0;border-radius:9px 9px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--neon-color) 12%,transparent),transparent)}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline .current-time::after{top:100%;right:auto;left:50%;width:1.5px;height:7px;translate:-50% 0;background:var(--neon-color)}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider{height:auto;min-height:50px}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-horizontal{display:none}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-vertical{display:block}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-visual::after{left:var(--neon-offset);bottom:var(--neon-progress);top:auto;translate:-50% 50%}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-buffer{clip-path:inset(calc(100% - var(--media-slider-buffer,0%)) 0 0 0)}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-played{clip-path:inset(calc(100% - var(--neon-progress)) -2px -10px -10px)}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-thumb{left:var(--neon-offset);bottom:var(--neon-progress);top:auto;translate:-50% 50%}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-thumb::after{left:11px;top:50%;height:1px;width:calc(39px - var(--neon-offset));background:linear-gradient(90deg,#65f5d652,#65f5d600)}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .range-band{left:5px!important;width:34px!important}
/* Time labels are the ends of the same rail; their underline bends into the wave. */
@supports(mask-image:linear-gradient(#000,#000)){
#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline .time-readout{border:0;border-radius:0;background:none}
#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline .time-readout::before{content:'';position:absolute;top:calc(50% + 8px);height:1px;left:4px;right:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--neon-color) 12%,transparent),color-mix(in srgb,var(--neon-color) 55%,transparent));pointer-events:none}
#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline .duration-time::before{left:6px;right:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--neon-color) 25%,transparent),color-mix(in srgb,var(--neon-color) 8%,transparent))}
#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline .time-readout::after{top:calc(50% - 1px);translate:0 0;width:calc(var(--time-link) + 6px);height:10px;box-shadow:none;background:color-mix(in srgb,var(--neon-color) 55%,transparent);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0 9H2C10 9 8 1 18 1H20' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat}
#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline .duration-time::after{transform:scaleX(-1);background:color-mix(in srgb,var(--neon-color) 25%,transparent)}
}
/* A simpler native bar is available for stronger contrast. */
#vesper-player .workspace.higher-contrast .rail-timeline .time-readout::before,#vesper-player .workspace.higher-contrast .rail-timeline .time-readout::after{display:none}
#vesper-player .workspace.higher-contrast .neon-visual{display:none}
#vesper-player .workspace.higher-contrast .control-desk .rail-timeline .time-readout{color:var(--rail-text)}
#vesper-player .workspace.higher-contrast .time-slider .slider-track{visibility:visible}
#vesper-player .workspace.higher-contrast .time-slider .slider-thumb{top:50%;box-shadow:none;background:var(--accent)}
#vesper-player .workspace.higher-contrast .time-slider .slider-thumb::after{display:none}
#vesper-player .workspace.higher-contrast:is([data-dock=left],[data-dock=right]) .time-slider .slider-thumb{left:50%;top:auto}
@media(prefers-contrast:more),(forced-colors:active){
 #vesper-player .control-desk .rail-timeline .time-readout{color:var(--rail-text)}
 #vesper-player .rail-timeline .time-readout::before,#vesper-player .rail-timeline .time-readout::after{display:none}
 #vesper-player .time-slider .neon-visual{display:none}
 #vesper-player .time-slider .slider-track{visibility:visible}
 #vesper-player .rail-timeline .time-slider .slider-thumb{top:50%;background:Highlight;border-color:Highlight;box-shadow:none}
 #vesper-player .time-slider .slider-thumb::after{display:none}
 #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-thumb{left:50%;top:auto}
}
@media(forced-colors:active){#vesper-player .control-desk .rail-timeline .time-readout{color:CanvasText}}