/* One optical enclosure, three levels of detail. Media stays native. */
#vesper-player .workspace[data-dock]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
#vesper-player .workspace[data-dock] .film-shell{grid-column:1;grid-row:1;border-radius:25px 25px 0 0}
#vesper-player .workspace[data-dock] .workspace-foot{grid-column:1;grid-row:2}
#vesper-player .workspace.drawer-open:is([data-dock=top],[data-dock=bottom]) .film-shell{aspect-ratio:auto;height:calc(var(--base-film-height) + var(--drawer-extra));min-height:0}
#vesper-player .workspace.drawer-open:is([data-dock=top],[data-dock=bottom]) .film-stage{inset:0 0 auto;height:var(--base-film-height)}
#vesper-player .workspace.drawer-open[data-dock=top] .film-stage{top:var(--drawer-extra)}
#vesper-player .control-desk>.rail-timeline{order:0;flex:none;gap:9px;height:auto;min-height:48px}
#vesper-player .control-desk>.transport{order:2;flex:none;padding-top:9px;border-top:1px solid #a6c7df24}
#vesper-player .control-desk .rail-timeline .primary-play{flex:none;margin:0 5px 0 0}
#vesper-player .control-desk .rail-timeline .fullscreen-button{flex:none;margin-left:4px}
#vesper-player .control-desk .panel-toggle{--button-tint:183 216 240;flex:none;width:36px;min-width:36px;height:44px}
#vesper-player .control-desk .panel-toggle .icon{width:18px;height:18px;transition:rotate .18s}
#vesper-player .control-desk .rail-primary>.primary-play{position:relative;margin:0 4px 0 0}
#vesper-player .panel-expanded .panel-toggle .icon{rotate:180deg}
#vesper-player .control-desk .chapters-shortcut{--button-tint:157 211 255;--light-rgb:90 155 219;--light-delay:-2.7s}
#vesper-player .control-desk [data-explore-tab][aria-pressed=true]{background:rgb(var(--button-tint)/.13);box-shadow:inset 0 0 0 1px rgb(var(--button-tint)/.4);color:color-mix(in srgb,rgb(var(--button-tint)),white 25%)}

/* Level 1: quiet glyphs, with full-size invisible touch targets. */
#vesper-player .workspace.panel-compact[data-dock] .control-desk{--glass-radius:28px;padding:4px 10px;gap:0}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .glass-depth{--depth-width:4px}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .rail-timeline{min-height:44px;height:44px;gap:6px}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play{width:44px;min-width:44px;height:44px;margin:0;border:0;background:none;box-shadow:none;color:var(--rail-text)}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play::before{display:none}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play .icon{width:20px;height:20px;filter:none}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play:is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:none;color:var(--rail-text)}
#vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play:active{box-shadow:none}
/* Mute is an essential control, so level 1 carries its own; the expanded rail keeps the full Sound Wing. */
#vesper-player .workspace:not(.panel-compact) .control-desk .compact-sound{display:none}
#vesper-player .control-desk .rail-timeline .compact-sound{flex:none;width:40px;min-width:40px;height:44px}
#vesper-player .compact-sound:not([data-muted]) .when-muted,#vesper-player .compact-sound[data-muted] .when-unmuted{display:none}
#vesper-player .compact-sound :is(.when-muted,.when-unmuted){display:contents}
#vesper-player .control-desk .compact-sound{--button-tint:170 222 255;touch-action:manipulation;-webkit-touch-callout:none;user-select:none}
#vesper-player .control-desk .compact-sound.sound-holding,#vesper-player .control-desk .compact-sound[aria-expanded=true]{background:#aad7ed1c;box-shadow:inset 0 0 0 1px #acd9f04d}
#vesper-player .workspace:not(.panel-compact) .compact-volume{display:none}
/* The volume pop-up: a small pill of the rail's own glass — clear tinted body, bright meniscus edge,
   inner bevel and the same blue / violet corner reflections — holding mute, the Sound Wing and a readout. */
#vesper-player .compact-volume{position:absolute;z-index:12;display:flex;align-items:center;gap:2px;width:max-content;padding:3px 11px 3px 3px;border:1px solid #bfe0ff40;border-radius:22px;background:linear-gradient(170deg,#e6f3ff26,#e6f3ff08 38%,transparent 60%),#0b1c2fd9;box-shadow:inset 0 1px 1px #e3f2ff59,inset 0 -2px 3px #020c1b8c,inset 2px 0 3px -1px #65beff33,inset -2px 0 3px -1px #b28bf026,0 6px 18px #02081073;color:var(--white,#eef6fc);animation:vesper-tool-reveal .16s ease-out}
#vesper-player .compact-volume::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.7;background:radial-gradient(ellipse 30px 16px at 13px 8px,#7bbcffa6,#5d9eee40 40%,transparent 80%),radial-gradient(ellipse 34px 16px at calc(100% - 14px) calc(100% - 7px),#c39af099,#9a6ac940 40%,transparent 80%)}
#vesper-player .compact-volume>*{position:relative;z-index:1}
#vesper-player .compact-volume[hidden]{display:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#vesper-player .compact-volume{background:linear-gradient(170deg,#e6f3ff26,#e6f3ff08 38%,transparent 60%),#0b1c2f8c;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}}
#vesper-player .compact-volume .compact-volume-mute{flex:none;width:34px;min-width:34px;height:34px;border-radius:50%;color:rgb(170 222 255)}
#vesper-player .compact-volume .compact-volume-mute .icon{width:18px;height:18px}
#vesper-player .compact-volume .compact-volume-mute:is(:hover,:focus-visible){background:#aad7ed1f}
#vesper-player .compact-volume-slider{--sound-color:var(--accent);--wing-fill:var(--media-slider-fill,100%);position:relative;display:block;flex:none;width:96px;height:34px;margin:0 4px;cursor:pointer;touch-action:none}
#vesper-player .compact-volume-slider[data-dragging]{--wing-fill:var(--media-slider-pointer,0%)}
#vesper-player .compact-volume-slider .slider-track{visibility:hidden}
#vesper-player .compact-volume-slider .slider-thumb{position:absolute;left:var(--wing-fill);top:50%;width:5px;height:18px;translate:-50% -50%;transform:none;border-radius:4px;border:1px solid #bdd9ec99;background:linear-gradient(90deg,#adcff080,#cee6fa99,#6fa1c480);box-shadow:0 1px 5px #0005}
#vesper-player .compact-volume-slider:has(:focus-visible){outline:2px solid #b9d9ff;outline-offset:2px;border-radius:8px}
#vesper-player .compact-volume-value{flex:none;min-width:30px;font-size:11px;font-variant-numeric:tabular-nums;text-align:right;color:#dbe8f2;text-shadow:0 1px 4px #02081099}
#vesper-player .compact-eq{flex:none;height:30px;min-width:40px;margin-left:8px;padding:0 10px;border:0;border-radius:15px;background:linear-gradient(150deg,#030b152e,#142b3c12);box-shadow:inset 0 0 0 1px #9ebed91f,inset 0 1px 3px #020a1929;color:#d9c4ff;font:500 11px/1 'Vesper Display','DM Sans',sans-serif;letter-spacing:1.4px;cursor:pointer;transition:background .18s,box-shadow .18s}
#vesper-player .compact-eq:is(:hover,:focus-visible){background:#b28bf01f;box-shadow:inset 0 0 0 1px #c39af066}
/* Horizontal rails: volume opens as a row inside the same glass enclosure, like the Explore drawer —
   no separate surface, only the rail's hairline divider above it. */
#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.compact-volume{position:relative;inset:auto;order:1;align-self:stretch;width:auto;margin:2px 0 2px;padding:6px 4px 2px;gap:4px;border:0;border-top:1px solid #a6c7df24;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:vesper-tool-reveal .18s ease-out}
#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.compact-volume::before{display:none}
#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.compact-volume .compact-volume-slider{flex:0 1 150px;min-width:96px}
#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.compact-volume .compact-volume-value{margin-right:auto}
#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.compact-volume[hidden]{display:none}
/* Touch screens keep thumb-sized targets. */
@media (pointer:coarse),(max-width:600px){
 #vesper-player .compact-eq{height:44px;min-width:52px}
 #vesper-player .compact-volume{padding-block:2px}
 #vesper-player .compact-volume .compact-volume-mute{width:44px;min-width:44px;height:44px}
 #vesper-player .compact-volume-slider{width:110px;height:44px}
}
@media(prefers-reduced-motion:reduce){#vesper-player .compact-volume{animation:none}}
#vesper-player .workspace.calm .compact-volume{animation:none}
#vesper-player .workspace.higher-contrast .compact-volume{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
@media(prefers-contrast:more),(prefers-reduced-transparency:reduce){#vesper-player .compact-volume{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}#vesper-player .compact-volume::before{display:none}}
#vesper-player .workspace.higher-contrast .compact-volume::before{display:none}
@media(forced-colors:active){#vesper-player .compact-volume::before{display:none}}
@media(prefers-contrast:more),(forced-colors:active){
 #vesper-player .compact-volume .volume-wing{display:none}
 #vesper-player .compact-volume-slider .slider-track{visibility:visible}
}
@media(forced-colors:active){#vesper-player .compact-volume{background:Canvas;color:CanvasText;border-color:CanvasText}}
/* Thumb-sized targets on phones and touch screens. */
@media (max-width:600px),(pointer:coarse){
 #vesper-player .control-desk .rail-timeline .compact-sound{width:44px;min-width:44px}
 #vesper-player .resume-button,#vesper-player .workspace-foot button{min-height:44px}
}
/* Narrow horizontal rails: the seek bar takes its own full-width row so it stays usable. */
@media (max-width:520px){
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline{flex-wrap:wrap;height:auto;row-gap:0}
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline .time-slider{order:-1;flex:1 0 100%;width:100%}
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline .compact-sound{margin-left:auto}
}
/* Phones: the film keeps its own shape and the glass rail sits directly beneath (or above) it,
   so there are no letterbox bands and no controls over the picture. Fullscreen keeps the overlay. */
@media (max-width:640px){
 #vesper-player .vesper-player:not(:fullscreen) .workspace:is([data-dock=top],[data-dock=bottom]) .film-shell,
 #vesper-player .vesper-player:not(:fullscreen) .workspace.drawer-open:is([data-dock=top],[data-dock=bottom]) .film-shell{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;min-height:0}
 #vesper-player .vesper-player:not(:fullscreen) .workspace:is([data-dock=top],[data-dock=bottom]) .film-stage,
 #vesper-player .vesper-player:not(:fullscreen) .workspace.drawer-open:is([data-dock=top],[data-dock=bottom]) .film-stage{position:relative;inset:auto;top:auto;flex:none;width:100%;height:auto;aspect-ratio:var(--film-aspect,16/9);padding:0;border-radius:25px 25px 0 0}
 #vesper-player .vesper-player:not(:fullscreen) .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk{position:relative;inset:auto;order:2;margin:10px 10px 12px}
 #vesper-player .vesper-player:not(:fullscreen) .workspace[data-dock=top] .control-desk{order:0;margin:12px 10px 10px}
 #vesper-player .vesper-player:not(:fullscreen) .workspace[data-dock=top] .film-stage{order:1;border-radius:0}
}
@media (max-width:360px){
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline{column-gap:2px}
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline .current-time{margin-right:2px}
 #vesper-player .vesper-player:not(:fullscreen) .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk{margin-inline:6px}
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline .time-readout{flex:0 1 auto;min-width:0}
 #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline{padding-inline:2px}
}
/* Very small frames: the brand chip steps aside so Play and Continue have room. */
@media (max-width:400px){#vesper-player .film-top .film-badge{display:none}}

/* Level 3 sits between essentials and utilities, within the existing glass. */
#vesper-player .control-desk>.explore-panel{order:1;position:relative;z-index:1;display:flex;flex-direction:column;grid-area:auto;contain:none;container-type:inline-size;container-name:drawer;flex:none;height:var(--drawer-height,280px);min-width:0;min-height:0;padding:12px 8px;border:0;border-top:1px solid #a6c7df24;border-radius:0;background:linear-gradient(180deg,#030d1b38,#0a182622);box-shadow:inset 0 1px 2px #02091338;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
#vesper-player .control-desk .drawer-header{display:flex;align-items:center;gap:18px;flex:none;margin-bottom:12px}
#vesper-player .drawer-header h2{font-family:'Vesper Display','DM Sans',sans-serif;font-weight:500;font-size:19px;line-height:1.3;margin:0;letter-spacing:.3px}
#vesper-player .drawer-header .drawer-current{display:none}
#vesper-player .drawer-header .panel-tabs{flex:1;max-width:440px;margin:0;gap:10px}
#vesper-player .drawer-header .panel-tabs button{font-size:12px;min-height:40px}
#vesper-player .drawer-header .panel-close{width:40px;min-width:40px;height:40px;margin:0 0 0 auto;align-self:center}
#vesper-player .explore-panel .tool-panel{min-height:0;flex:1;overflow:hidden}
#vesper-player .explore-panel .panel-scroll{max-height:none;min-height:0;overscroll-behavior:contain}
#vesper-player .explore-panel .panel-tip{display:none}
#vesper-player .explore-panel .transcript-meta{margin:4px 0 5px;padding:2px;min-height:28px;flex:none}
#vesper-player .explore-panel .search-field:focus-within{outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:2px;border-color:#b5a1dc66;box-shadow:inset 0 1px 4px #01081033}
#vesper-player .explore-panel .search-field input:focus{outline:none}
#vesper-player .explore-panel .transcript-lines{margin:0;padding:0 5px 0 0;flex:1}
#vesper-player .explore-panel .cue-button{padding:10px;min-height:62px}
#vesper-player .explore-panel .moments-intro{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
#vesper-player .explore-panel .moments-intro>p{margin:0;font-size:12px}
#vesper-player .explore-panel .moments-intro>.accent-button{width:auto;min-height:42px;padding:9px 13px}
#vesper-player .explore-panel .storage-status{grid-column:1/-1;margin:5px 0 10px;font-size:9px}
#vesper-player .explore-panel .bookmark-list{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;gap:10px}
#vesper-player .explore-panel .moment-card{min-width:0;margin:0}
#vesper-player .explore-panel .scene-ribbon{display:flex;flex-direction:column;grid-area:auto;align-self:stretch;min-height:0;flex:1;padding:0;background:none;border:0}
#vesper-player .explore-panel .ribbon-heading{flex:none;margin:0 0 10px;font-size:8px}
#vesper-player .explore-panel .ribbon-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:0;flex:1;overflow:auto;padding:0 0 5px;align-items:stretch;scrollbar-width:thin}
#vesper-player .explore-panel .scene-card{width:100%;height:100%;min-height:100px;aspect-ratio:auto;max-height:180px;flex:none}
#vesper-player .workspace[data-feature-chapters=false] .chapters-shortcut,#vesper-player .workspace[data-feature-moments=false] .bookmark-shortcut{display:none}
#vesper-player .workspace[data-dock] .toast{right:18px;left:18px;bottom:7px;z-index:22;max-width:650px}

@container drawer (min-width:720px){
 #vesper-player .explore-panel .transcript-lines,#vesper-player .explore-panel .bookmark-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px 14px}
 #vesper-player .explore-panel .transcript-row{min-width:0;margin:0}
 #vesper-player .explore-panel .moment-card{margin:0;align-self:start}
}
@container drawer (max-width:440px){
 #vesper-player .control-desk .drawer-header{display:grid;grid-template-columns:1fr 40px;gap:2px 8px;margin-bottom:9px}
 #vesper-player .drawer-header h2{font-size:17px}
 #vesper-player .drawer-header .panel-close{grid-column:2;grid-row:1}
 #vesper-player .drawer-header .panel-tabs{grid-column:1/3;grid-row:2;max-width:none;width:100%;gap:2px}
 #vesper-player .drawer-header .panel-tabs button{font-size:11px;min-height:36px}
 #vesper-player .explore-panel .moments-intro{display:block}
 #vesper-player .explore-panel .moments-intro>p{display:none}
 #vesper-player .explore-panel .moments-intro>.accent-button{width:100%;min-height:40px}
 #vesper-player .explore-panel .ribbon-cards{display:flex;gap:10px;scroll-snap-type:x proximity}
 #vesper-player .explore-panel .scene-card{width:164px;min-width:164px;min-height:100px;scroll-snap-align:start}
 #vesper-player .explore-panel .ribbon-heading>span:last-child{display:none}
 #vesper-player .explore-panel .cue-text{font-size:12px}
 #vesper-player .explore-panel .moment-jump{grid-template-columns:64px minmax(0,1fr) 12px;gap:5px 8px;padding:9px}
 #vesper-player .explore-panel .moment-frame{width:64px;max-width:64px;height:36px;max-height:36px}
}
@container drawer (max-width:260px){
 #vesper-player .drawer-header .drawer-name{display:none}
 #vesper-player .drawer-header .drawer-current{display:inline}
 #vesper-player .drawer-header .panel-tabs button{font-size:0;gap:4px;min-height:40px}
 #vesper-player .drawer-header .panel-tabs button>.icon{display:block;width:17px;height:17px}
 #vesper-player .drawer-header .bookmark-count{font-size:9px}
}

@container film (min-width:980px){
 #vesper-player .workspace.panel-expanded:is([data-dock=top],[data-dock=bottom]) .control-desk>.rail-timeline{min-height:64px}
 #vesper-player .workspace.panel-expanded:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline .time-slider{height:44px}
}
@container film (max-width:640px){
 #vesper-player .control-desk>.rail-timeline{gap:3px;min-height:44px}
 #vesper-player .control-desk .rail-timeline .time-readout{min-width:28px;padding:0 2px;font-size:10px}
 /* Keep the playhead (12px thumb centred on the track start) clear of the elapsed-time label. */
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-timeline .current-time{margin-right:6px}
 #vesper-player .control-desk .rail-timeline .primary-play{margin:0;width:44px;min-width:44px;height:44px}
 #vesper-player .control-desk .rail-timeline .fullscreen-button{margin:0;width:44px;min-width:44px;height:44px;grid-area:auto}
 #vesper-player .control-desk .panel-toggle{width:44px;min-width:44px;height:44px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.transport{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));grid-template-rows:44px 44px;gap:0;padding-top:7px;justify-items:center}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) :is(.rail-primary,.rail-actions){display:contents}
 #vesper-player .control-desk .transport .dock-handle{grid-column:1;grid-row:2}
 #vesper-player .control-desk .transport .primary-play{grid-column:1;grid-row:1;width:44px;min-width:44px;height:44px;margin:0}
 #vesper-player .control-desk .transport .volume-controls{grid-column:2;grid-row:1}
 #vesper-player .control-desk .transport .transcript-shortcut{display:inline-flex;grid-column:3;grid-row:1}
 #vesper-player .control-desk .transport .bookmark-shortcut{display:inline-flex;grid-column:4;grid-row:1}
 #vesper-player .control-desk .transport .pin-button{grid-column:5;grid-row:1}
 #vesper-player .control-desk .transport [data-action=tools]{grid-column:6;grid-row:1}
 #vesper-player .control-desk .transport .chapters-shortcut{display:none}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options{grid-column:2/7;width:calc(100% - 4px);gap:0;padding:0 3px}
 #vesper-player .control-desk>.explore-panel{padding:10px 9px}
}
/* Top dock: the badge follows the measured bottom edge of the panel, whatever its stage, instead of a fixed offset. */
#vesper-player .workspace[data-dock=top] .film-top{top:var(--panel-clear,164px)}
@container film (max-width:340px){#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk{left:2px;right:2px;padding-inline:0}#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk>.rail-timeline{padding-left:8px}}

/* Side docks expand inward as one body, not a second floating sidebar. */
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .control-desk{height:calc(100% - 24px);width:70px}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .control-desk>.rail-timeline{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;gap:6px;order:0}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline .time-slider{flex:1;min-height:50px;height:auto}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline .primary-play{margin:0;width:44px;min-width:44px;height:44px}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline .fullscreen-button{display:flex;margin:0;width:44px;min-width:44px;height:44px}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .panel-toggle{width:44px;min-width:44px;height:44px}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .control-desk{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:var(--side-panel-width);padding:10px;gap:8px 12px}
#vesper-player .workspace.panel-expanded[data-dock=right] .control-desk{grid-template-columns:minmax(0,1fr) 48px}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .control-desk>.rail-timeline{grid-column:1;grid-row:1/3;width:48px;align-self:stretch}
#vesper-player .workspace.panel-expanded[data-dock=right] .control-desk>.rail-timeline{grid-column:2}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .control-desk>.transport{display:flex;flex-direction:column;align-items:stretch;grid-column:2;grid-row:1;gap:7px;padding:0 0 9px;border:0;border-bottom:1px solid #a6c7df24;width:auto}
#vesper-player .workspace.panel-expanded[data-dock=right] .control-desk>.transport{grid-column:1}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) :is(.rail-primary,.rail-actions,.rail-options){display:flex;flex-direction:row;flex-wrap:wrap;width:auto;height:auto;gap:2px;margin:0;padding:0;border:0;order:initial}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .rail-select{width:auto;flex:1;min-width:60px;flex-direction:column;min-height:44px}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .rail-select>span{display:block;font-size:8px}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .rail-select select{appearance:auto;width:100%;max-width:80px;min-height:25px}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .rail-options{padding:2px 6px;border:1px solid #9ebed91f;border-radius:12px;background:linear-gradient(150deg,#030b152e,#142b3c12);box-shadow:inset 0 1px 3px #020a1929}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .control-desk .rail-shortcut{display:inline-flex}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .control-desk .volume-controls{display:flex}
#vesper-player .workspace.panel-expanded:is([data-dock=left],[data-dock=right]) .control-desk>.explore-panel{grid-column:2;grid-row:2;align-self:stretch;height:auto;min-height:0;border:0;padding:0 0 0 2px}
#vesper-player .workspace.panel-expanded[data-dock=right] .control-desk>.explore-panel{grid-column:1}
#vesper-player .workspace.panel-expanded.watch-only:is([data-dock=left],[data-dock=right]) .control-desk>.transport{grid-row:1/3;align-self:start}

#vesper-player .vesper-player:fullscreen .workspace[data-dock]{height:100%;grid-template-rows:minmax(0,1fr) auto}
#vesper-player .vesper-player:fullscreen .workspace[data-dock] .film-shell{height:100%;min-height:0;aspect-ratio:auto}
#vesper-player .vesper-player:fullscreen .workspace[data-dock] .film-stage{inset:0;height:100%}
#vesper-player .workspace.higher-contrast .control-desk>.explore-panel{background:var(--panel);box-shadow:none;border-color:var(--muted)}
@media(prefers-contrast:more),(prefers-reduced-transparency:reduce){#vesper-player .control-desk>.explore-panel{background:var(--panel);box-shadow:none;border-color:var(--muted)}}
@media(forced-colors:active){#vesper-player .control-desk>.explore-panel{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}#vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play{color:ButtonText;background:ButtonFace}#vesper-player .control-desk [data-explore-tab][aria-pressed=true]{color:Highlight;border:1px solid Highlight;box-shadow:none}}
@media(prefers-reduced-motion:reduce){#vesper-player .control-desk .panel-toggle .icon{transition:none}}
#vesper-player .workspace.calm .panel-toggle .icon{transition:none}

/* Explicit product choices take precedence over every dock's layout rules. */
#vesper-player .workspace[data-feature-transcript=false] .transcript-shortcut,
#vesper-player .workspace[data-feature-moments=false] :is(.bookmark-shortcut,[data-action=bookmark]),
#vesper-player .workspace[data-feature-loop=false] :is(.repeat-shortcut,.loop-bar,.sentence-loop),
#vesper-player .workspace[data-feature-chapters=false] :is(.chapters-shortcut,.scene-ribbon),
#vesper-player .workspace[data-feature-speed=false] :is(.speed-control,.rate-button),
#vesper-player .workspace[data-feature-seek=false] .skip,
#vesper-player .workspace[data-feature-pip=false] .pip-button,
#vesper-player .workspace[data-feature-tv=false] [data-action=tv]{display:none!important}