/* A Video.js-inspired translucent control rail. The dock never changes media state. */
.demo-chooser{margin:0 0 22px;border:1px solid var(--line);border-radius:15px;padding:20px;background:#2b242266}
.demo-chooser>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:15px}
.demo-chooser .eyebrow{font-size:8px;letter-spacing:1.4px;color:var(--muted)}.demo-chooser p{font-size:12px;margin:0;color:var(--muted);line-height:1.8}
.demo-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-option{display:block;padding:15px 18px;text-decoration:none;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.demo-option[aria-current=true]{border-color:var(--accent);background:var(--raised)}.demo-option:hover{border-color:var(--accent)}
.demo-option>span{display:block;font-size:9px;color:var(--muted);margin-bottom:7px}.demo-option>strong{display:block;font-size:15px;font-weight:500}.demo-option>small{display:block;font-size:9px;color:var(--muted);margin-top:8px}
.demo-chooser .demo-guide{margin-top:14px;font-size:11px}.demo-guide>span{display:block}
@media(max-width:560px){.demo-chooser{padding:15px}.demo-chooser>div:first-child{display:block}.demo-chooser>div:first-child>p{margin-top:5px;font-size:11px}.demo-options{gap:8px}.demo-option{padding:12px}.demo-option>strong{font-size:13px;line-height:1.5}.demo-option>small{font-size:8px;line-height:1.6}.demo-guide{font-size:10px!important}}
.workspace[data-dock]{--rail-surface:rgba(43,32,28,.92);--rail-edge:rgba(244,232,210,.25);grid-template-rows:auto 0 auto auto}
.workspace[data-dock] .film-shell{grid-column:1;grid-row:1/3;position:relative;width:100%;max-width:100%;min-width:0;aspect-ratio:16/10;min-height:320px;overflow:hidden;background:#100d0c;border-top-left-radius:17px;container-type:inline-size;container-name:film}
.workspace[data-dock] .panel-heading .panel-close{width:44px;min-width:44px;flex:none}
.workspace[data-dock] .playback-tools .control-button{width:44px;min-width:44px}
.workspace[data-dock] .film-stage{position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit;padding:0 0 80px;grid-area:auto}
.workspace[data-dock=top] .film-stage{padding:80px 0 0}
.workspace[data-dock] .film-top{z-index:2}
.workspace[data-dock=top] .film-top{top:84px}
.workspace[data-dock] .opening-art{bottom:100px}
.workspace[data-dock=top] .opening-art{bottom:26px}
.workspace[data-dock] .control-desk{position:absolute;z-index:8;inset:auto 12px 12px;min-width:0;border:1px solid var(--rail-edge);border-radius:28px;background:var(--rail-surface);padding:4px 8px;box-shadow:0 3px 20px #0004;backdrop-filter:blur(18px);color:#fff8ef;transition:opacity .18s,visibility .18s;grid-area:auto}
.workspace[data-dock=top] .control-desk{inset:12px 12px auto}
.workspace[data-dock] .transport{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:0;width:100%;min-width:0}
.workspace[data-dock] .control-desk .control-button{width:44px;min-width:44px;height:44px;margin:0;grid-area:auto;justify-self:auto;border-radius:50%;color:inherit;flex-shrink:0}
.workspace[data-dock] .control-desk .control-button .icon{width:19px;height:19px}
.workspace[data-dock] .control-desk .primary-play{background:transparent;color:#fff8ef;width:44px;height:44px;margin:0}
.workspace[data-dock] .control-desk .primary-play:hover,.workspace[data-dock] .control-desk .control-button:hover{background:#f4e8d21c;color:#fff}
.workspace[data-dock] .volume-controls{margin:0;gap:0}
.workspace[data-dock] .volume-slider{width:46px;margin-right:7px}
.workspace[data-dock] .time-readout{font-size:11px;line-height:1.3;display:flex;flex-shrink:0;justify-content:center;margin:0 5px;color:#fff8ef}
.workspace[data-dock] .time-slider{height:44px;min-width:40px;width:auto;flex:1;margin:0 7px}
.workspace[data-dock] .slider-track{background:#ffffff40;height:4px;border-radius:2px}
.workspace[data-dock] media-slider-buffer{background:#ffffff45}
.workspace[data-dock] media-slider-fill{background:#fff8ef}
.workspace[data-dock] .slider-thumb{width:9px;height:9px;border:0;background:#fff8ef}
.workspace[data-dock] .range-band{background:#f4e8d230;border:1px solid #f4e8d28c;height:14px;top:15px}
.workspace[data-dock] .time-slider .timeline-ticks{opacity:.5}
.workspace[data-dock] .pin-button[aria-pressed=true]{background:#f4e8d22b;box-shadow:inset 0 0 0 1px #f4e8d280}
.workspace[data-dock] .pin-button[aria-pressed=true]:after{content:'';width:4px;height:4px;border-radius:50%;position:absolute;bottom:3px;background:#fff8ef}
.workspace[data-dock] .dock-handle{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.workspace[data-dock] .dock-handle .icon{opacity:.7}
.workspace[data-dock].dock-dragging .dock-handle{cursor:grabbing;background:#f4e8d233}
.workspace[data-dock].controls-idle:not(.panel-pinned) .control-desk{opacity:0;pointer-events:none}
.reveal-controls{display:none;position:absolute;inset:0;z-index:7;border:0;background:transparent;cursor:pointer}
.workspace.controls-idle:not(.panel-pinned) .reveal-controls{display:block}
.workspace[data-dock].controls-idle .control-desk:focus-within{opacity:1;visibility:visible;pointer-events:auto}
.workspace[data-dock] .control-desk:focus-visible{outline:2px solid #fff8ef;outline-offset:3px}
.workspace[data-dock] .film-shell .dock-targets{display:none;position:absolute;inset:0;z-index:10;pointer-events:none}
.workspace[data-dock].dock-dragging .dock-targets{display:block}
.dock-targets span{position:absolute;display:flex;align-items:center;justify-content:center;border:1px dashed #f4e8d299;background:#211d1c99;color:#fff8ef;border-radius:14px;font-size:11px;letter-spacing:1px}
.dock-targets [data-edge=top]{inset:8px 76px auto;height:50px}.dock-targets [data-edge=bottom]{inset:auto 76px 8px;height:50px}
.dock-targets [data-edge=left]{inset:76px auto 76px 8px;width:50px;writing-mode:vertical-rl}.dock-targets [data-edge=right]{inset:76px 8px 76px auto;width:50px;writing-mode:vertical-rl}
.workspace[data-dock-target=top] [data-edge=top],.workspace[data-dock-target=bottom] [data-edge=bottom],.workspace[data-dock-target=left] [data-edge=left],.workspace[data-dock-target=right] [data-edge=right]{background:#f4e8d2e8;color:#211d1c;border:2px solid #fff8ef}
.workspace[data-dock] .playback-tools{position:absolute;z-index:16;left:14px;top:72px;width:min(520px,calc(100% - 28px));padding:15px 20px;background:#2b2422fa;border:1px solid #9f8d7b;border-radius:18px;box-shadow:0 15px 60px #0007;color:#fff8ef;max-height:calc(100% - 85px);overflow:auto}
.workspace[data-dock=top] .playback-tools{top:84px}
.tools-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:5px}
.tools-heading .current-chapter{font-size:10px;letter-spacing:1px}
.extra-transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0}
.extra-transport .text-button{margin-left:auto;font-size:11px}
.workspace[data-dock] .playback-tools .loop-bar{display:block;min-height:0;padding:14px 0 0}
.workspace[data-dock] .playback-tools .loop-heading{margin-bottom:13px}
.workspace[data-dock] .playback-tools .loop-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0;justify-content:flex-start}
.workspace[data-dock] .playback-tools .range-button{flex:1;min-width:95px;min-height:44px}
.workspace[data-dock] .playback-tools .repeat-toggle{min-height:44px;font-size:11px}
.workspace[data-dock] .playback-tools .range-connector{display:none}
.position-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.position-choices>button{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);background:var(--bg);color:var(--white);border-radius:12px;min-height:70px;font-size:13px}
.position-choices>button[aria-pressed=true]{border-color:var(--accent);background:var(--raised)}
.position-mini{display:block;position:relative;width:52px;height:36px;border:1px solid #ab9680;border-radius:5px;background:#171310}
.position-mini i{position:absolute;inset:auto 4px 4px;height:5px;border-radius:3px;background:#f4e8d2}
.position-mini[data-preview-edge=top] i{inset:4px 4px auto}.position-mini[data-preview-edge=left] i{inset:4px auto 4px 4px;width:5px;height:auto}.position-mini[data-preview-edge=right] i{inset:4px 4px 4px auto;width:5px;height:auto}
.workspace:is([data-dock=left],[data-dock=right]) .film-shell{min-height:460px}
.workspace[data-dock=left] .film-stage{padding:0 0 0 82px}.workspace[data-dock=right] .film-stage{padding:0 82px 0 0}
.workspace:is([data-dock=left],[data-dock=right]) .control-desk{inset:12px auto 12px 12px;width:58px;padding:5px;border-radius:28px}
.workspace[data-dock=right] .control-desk{inset:12px 12px 12px auto}
.workspace:is([data-dock=left],[data-dock=right]) .transport{flex-direction:column;height:100%;gap:2px}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider{min-height:70px;width:44px;height:auto;margin:3px 0;min-width:0}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-track{height:100%;width:4px}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider media-slider-fill,.workspace:is([data-dock=left],[data-dock=right]) .time-slider media-slider-buffer{height:var(--media-slider-fill);width:100%;top:auto;bottom:0;left:0}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider media-slider-buffer{height:var(--media-slider-buffer)}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-thumb{left:50%;bottom:var(--media-slider-fill);top:auto;translate:-50% 50%}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider .range-band{top:auto;left:15px!important;width:14px!important;bottom:var(--range-start);height:var(--range-size)}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider .timeline-ticks{display:none}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-preview{display:none}
.workspace:is([data-dock=left],[data-dock=right]) .time-readout{font-size:9px;margin:4px 0}
.workspace:is([data-dock=left],[data-dock=right]) .duration-time,.workspace:is([data-dock=left],[data-dock=right]) .volume-slider,.workspace:is([data-dock=left],[data-dock=right]) .captions-button,.workspace:is([data-dock=left],[data-dock=right]) .pip-button{display:none}
.workspace[data-dock=left] .film-top{left:90px}.workspace[data-dock=right] .film-top{right:90px}
.workspace[data-dock=left] .opening-art{left:95px;bottom:25px}.workspace[data-dock=right] .opening-art{bottom:25px}
.workspace[data-dock=left] .playback-tools{left:82px;width:min(470px,calc(100% - 96px));top:16px}.workspace[data-dock=right] .playback-tools{left:auto;right:82px;width:min(470px,calc(100% - 96px));top:16px}
.workspace[data-dock] .higher-contrast{--rail-surface:#171310}
.workspace[data-dock].higher-contrast{--rail-surface:#171310;--rail-edge:#f4e8d2}
.vesper-player:fullscreen .workspace[data-dock]{grid-template-rows:minmax(0,1fr) 0 auto auto}
.vesper-player:fullscreen .workspace[data-dock] .film-shell{aspect-ratio:auto;min-height:320px;height:100%}
.workspace[data-dock].tv-mode .control-desk .control-button{width:56px;min-width:56px;height:56px}
.workspace[data-dock].tv-mode:is([data-dock=left],[data-dock=right]) .control-desk{width:70px}
.workspace[data-dock].tv-mode:is([data-dock=left],[data-dock=right]) .film-shell{min-height:540px}
@container film (max-width:800px){.workspace[data-dock] .volume-slider{display:none}.workspace[data-dock] .control-desk .pip-button{display:none}.workspace[data-dock] .time-readout{font-size:10px;margin:0 2px}}
@container film (max-width:560px){
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .control-desk{padding:3px 2px;border-radius:20px;left:4px;right:4px}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .transport{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));grid-template-rows:44px 44px;gap:0;justify-items:center}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .control-desk .time-slider{grid-column:2/6;grid-row:1;width:100%;height:44px;min-width:0;margin:0}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .current-time{grid-column:1;grid-row:1;font-size:9px}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .duration-time{grid-column:6;grid-row:1;font-size:9px}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .dock-handle{grid-column:1;grid-row:2;min-width:44px;width:44px}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .primary-play{grid-column:2;grid-row:2}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .volume-controls{grid-column:3;grid-row:2}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .pin-button{grid-column:4;grid-row:2}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) [data-action=tools]{grid-column:5;grid-row:2}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .fullscreen-button{grid-column:6;grid-row:2}
 .workspace[data-dock] .control-desk .captions-button{display:none}
 .workspace[data-dock] .film-stage{padding-bottom:108px}.workspace[data-dock=top] .film-stage{padding:108px 0 0}
 .workspace[data-dock=top] .film-top{top:110px}.workspace[data-dock] .opening-art{display:none}
 .workspace[data-dock] .control-desk .range-band{top:15px}
 .workspace[data-dock] .playback-tools{left:8px;width:calc(100% - 16px);top:10px;padding:10px 14px}
 .workspace[data-dock=top] .playback-tools{top:108px}
 .workspace[data-dock=left] .playback-tools{left:74px;width:calc(100% - 82px);top:8px}
 .workspace[data-dock=right] .playback-tools{left:auto;right:74px;width:calc(100% - 82px);top:8px}
 .workspace[data-dock] .extra-transport{gap:2px}.workspace[data-dock] .extra-transport .text-button{margin-left:0}
 .workspace[data-dock] .extra-transport .control-button{width:44px;min-width:44px}
 .workspace[data-dock] .playback-tools .range-button{min-width:83px;font-size:10px}
 .workspace[data-dock] .playback-tools .range-button span{font-size:9px}
 .workspace:is([data-dock=left],[data-dock=right]) .control-desk{top:8px;bottom:8px}
 .workspace[data-dock=left] .film-stage{padding:0 0 0 74px}.workspace[data-dock=right] .film-stage{padding:0 74px 0 0}
 .workspace[data-dock=left] .film-top{left:80px;top:10px}.workspace[data-dock=right] .film-top{right:80px;top:10px}
 .workspace[data-dock].tv-mode .control-desk .control-button{width:44px;min-width:44px;height:44px}
}
@media(forced-colors:active){.workspace[data-dock] .control-desk{background:Canvas;color:CanvasText;border:1px solid CanvasText}.workspace[data-dock] media-slider-fill,.workspace[data-dock] .slider-thumb{background:Highlight}.dock-targets span{border-color:CanvasText}.workspace[data-dock] .pin-button[aria-pressed=true]{outline:2px solid Highlight}}