/* VESPER coloured glass. Semantic colour supplements labels and active states. */
:root{--bg:#12161d;--panel:#202731;--raised:#303843;--white:#f3f6fa;--accent:#9bcbff;--muted:#b8c1cc;--line:#475360;--ink:#202731}
body{background:radial-gradient(ellipse at 24% 0,#233c4933,transparent 55%),var(--bg)}
media-status-announcer{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.intro{padding-top:38px;padding-bottom:30px}.intro h1{font-size:clamp(40px,5vw,70px)}
.demo-chooser{background:linear-gradient(120deg,#29465333,#20273166);border-color:#7893a331;border-radius:16px;padding:17px 20px}
.demo-option{background:#16202a99;border-color:#7893a331}.demo-option[aria-current=true]{background:#9bcbff0d;border-color:#9bcbff88}
.demo-option>strong{font-size:14px}.demo-option>small{font-size:10px;line-height:1.5}.demo-guide{color:var(--muted)}
.demo-guide>span{color:var(--accent);margin-top:4px}.brand-open{border-color:#9bcbff66;background:#9bcbff10}
.vesper-player{box-shadow:0 24px 80px #0004;border-color:#7392a940}
.workspace[data-dock] .film-shell{background:#0b1118;border-radius:16px 0 0 0;aspect-ratio:var(--film-aspect,16/9)}
.workspace[data-dock] .film-stage{padding:0}
.workspace[data-dock] .control-desk{background:var(--rail-fallback,#203f4c);border-radius:16px;padding:7px;box-shadow:inset 0 1px 0 #e0f5ff15,0 8px 30px #0005;color:var(--rail-text);isolation:isolate}
@supports(backdrop-filter:blur(1px)){
 .workspace[data-dock] .control-desk{background:linear-gradient(110deg,#c1e8ff0b,#67d1d609),var(--rail-surface);backdrop-filter:blur(14px) saturate(125%)}
}
.workspace[data-dock] .transport{gap:4px}
.workspace[data-dock] :is(.control-desk,.extra-transport) .control-button{--button-tint:188 203 221;--well-top:.25;--well-bottom:.10;--well-edge:.34;border-radius:12px;background:linear-gradient(145deg,rgb(var(--button-tint)/var(--well-top)),rgb(var(--button-tint)/var(--well-bottom))),rgb(6 17 26/.23);box-shadow:inset 0 0 0 1px rgb(var(--button-tint)/var(--well-edge)),inset 0 2px 4px rgb(var(--button-tint)/.08);color:color-mix(in srgb,rgb(var(--button-tint)),white 60%);position:relative;transition:background .15s,box-shadow .15s}
.workspace[data-dock] :is(.control-desk,.extra-transport) :is(media-mute-button,.transcript-shortcut,[data-action=bookmark],.repeat-shortcut,.pin-button){--well-top:.39;--well-bottom:.21;--well-edge:.65}
.workspace[data-dock] :is(.control-desk,.extra-transport) .control-button:is(:hover,:focus-visible){background:linear-gradient(145deg,rgb(var(--button-tint)/.62),rgb(var(--button-tint)/.35)),rgb(6 17 26/.23);box-shadow:inset 0 0 0 1px rgb(var(--button-tint)/.95),0 0 12px rgb(var(--button-tint)/.13);color:#fff}
.workspace[data-dock] :is(.control-desk,.extra-transport) .control-button:active:not(.dock-handle){translate:0 1px}
.workspace[data-dock] .control-desk .control-button .icon{width:21px;height:21px}
.workspace[data-dock] .control-desk .primary-play{background:var(--accent);color:var(--ink);border-radius:50%;box-shadow:inset 0 1px 0 #ffffff55}
.workspace[data-dock] .control-desk .primary-play:is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent),white 15%);color:var(--ink)}
.workspace[data-dock] .control-desk media-mute-button.control-button{--button-tint:120 207 196;border-radius:50%}
.workspace[data-dock] .control-desk .transcript-shortcut{--button-tint:183 162 232}
.workspace[data-dock] :is(.control-desk,.extra-transport) :is(.extra-captions,.captions-button){--button-tint:148 178 226}
.workspace[data-dock] :is(.control-desk,.extra-transport) [data-action=bookmark]{--button-tint:231 151 161}
.workspace[data-dock] .control-desk .repeat-shortcut{--button-tint:141 211 176}
.workspace[data-dock] .control-desk .pin-button{--button-tint:215 175 120}
.workspace[data-dock] :is(.control-desk,.extra-transport) :is([data-action=tools],.rate-button){--button-tint:159 181 210}
.workspace[data-dock] :is(.control-desk,.extra-transport) .pip-button{--button-tint:151 206 213}
.workspace[data-dock] .control-desk .fullscreen-button{--button-tint:188 203 221}
.workspace[data-dock] .extra-transport .skip{--button-tint:149 193 222}
.workspace[data-dock] .extra-transport [data-action=settings]{--button-tint:207 177 215}
.workspace[data-dock] .control-desk .dock-handle{background:transparent;box-shadow:none}
.workspace[data-dock] .dock-handle .icon{opacity:.85}
.workspace[data-dock] .control-desk .pin-button[aria-pressed=true]{background:linear-gradient(145deg,#d7af787d,#d7af7852);box-shadow:inset 0 0 0 1px #eac58ee6,0 0 10px #d7af7814;color:#ffe3ba}
.workspace[data-dock] .pin-button[aria-pressed=true]:after{background:#e9bf87;bottom:4px}
.workspace[data-loop-enabled=true] .control-desk .repeat-shortcut{background:linear-gradient(145deg,#8dd3b080,#8dd3b04d);box-shadow:inset 0 0 0 1px #b5ebcfe6;color:#dcffed}
.workspace[data-dock] .time-readout{color:var(--rail-text);font-variant-numeric:tabular-nums;font-size:11px;background:#06151b40;padding:4px;border-radius:5px}
.workspace[data-dock] .slider-track{background:#dfecf33b;height:4px;border-radius:4px}
.workspace[data-dock] .time-slider media-slider-fill,.workspace[data-dock] .time-slider .slider-thumb{background:var(--accent)}
.workspace[data-dock] .volume-slider media-slider-fill,.workspace[data-dock] .volume-slider .slider-thumb{background:#a2ddd5}
.workspace[data-dock] .range-band{background:#a5c6ae40;border-color:#a5c6aeaa;border-radius:4px}
.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .range-band:before,.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .range-band:after{position:absolute;top:-19px;display:grid;place-items:center;width:17px;height:17px;border-radius:4px;background:#bde7cf;color:#102f22;font-size:10px;font-weight:700;line-height:1;box-shadow:0 2px 7px #0004}
.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .range-band:before{content:'A';left:0;translate:-50% 0}
.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .range-band:after{content:'B';right:0;translate:50% 0}
.workspace[data-dock][data-loop-enabled=true] .time-slider media-slider-fill,.workspace[data-dock][data-loop-enabled=true] .time-slider .slider-thumb{background:#b2e0c4}
.workspace[data-dock] .playback-tools{background:var(--panel);color:var(--white);border-color:#7893a35c;box-shadow:0 20px 60px #0008}
.workspace[data-dock] .extra-transport .rate-button{width:auto;min-width:86px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding-inline:12px;font-size:12px}
.rate-caption{font-size:10px;font-weight:500}.rate-value{font-variant-numeric:tabular-nums}
.rail-options{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:3px;padding-top:0;border-top:0}
.rail-select{display:flex;align-items:center;gap:8px;min-height:36px;border-radius:999px;padding:0 12px;background:#06151b2b;border:1px solid #aecede2b;color:#f3f6fa;font-size:11px}
.rail-select>span{font-size:10px;color:#d8e5ed}.rail-select select{appearance:auto;background:transparent;border:0;color:#f3f6fa;min-height:36px;max-width:160px;font:inherit;cursor:pointer;padding:4px 0}
.rail-select option{background:#182a36;color:#f3f6fa}.speed-control{border-color:#b7acd740}.quality-control{border-color:#9bcbdc40}
.rail-select:hover{background:#c1dfe415}.rail-chapter{margin-right:auto;max-width:40%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:9px;letter-spacing:.6px;color:#e0eaf0}
.quality-status{position:absolute;bottom:100%;right:8px;font-size:10px;color:#f3f6fa;background:#132731ed;border-radius:9px;padding:8px 12px;line-height:1.4}.quality-status:empty{display:none}.rail-options[aria-busy=true] .quality-control{opacity:.65}.rail-select:focus-within{outline:2px solid #b9d9ff;outline-offset:2px}
.workspace[data-feature-speed=false] .speed-control{display:none}
@container film (min-width:1100px){.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .transport{flex:1}.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .rail-options{margin:0;padding:0 0 0 10px;border-top:0;border-left:1px solid #b7dbe42b;flex:none}.workspace[data-dock] .rail-chapter{display:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.workspace[data-dock] .control-desk{background:#152e3b;backdrop-filter:none;border-color:#d4ebf5}}
.workspace[data-dock=top] .film-top{top:142px}.workspace[data-dock=top] .playback-tools{top:150px}
.workspace:is([data-dock=left],[data-dock=right]) .film-shell{min-height:570px}
.workspace:is([data-dock=left],[data-dock=right]) .control-desk{display:flex;flex-direction:column}
.workspace:is([data-dock=left],[data-dock=right]) .transport{flex:1;min-height:0}
.workspace:is([data-dock=left],[data-dock=right]) .rail-options{flex-direction:column;gap:4px;margin-top:5px;padding-top:5px}
.workspace:is([data-dock=left],[data-dock=right]) .rail-select{padding:0;width:44px;justify-content:center;gap:0}
.workspace:is([data-dock=left],[data-dock=right]) .rail-select>span,.workspace:is([data-dock=left],[data-dock=right]) .quality-status,.workspace:is([data-dock=left],[data-dock=right]) .rail-chapter{display:none}
.workspace:is([data-dock=left],[data-dock=right]) .rail-select select{appearance:none;width:44px;min-width:0;min-height:44px;text-align:center;font-size:10px}
.workspace:is([data-dock=left],[data-dock=right]) .quality-control select{font-size:9px}
.workspace .loop-heading>.icon,.workspace .repeat-toggle[aria-pressed=true]{color:#bedfc7}
.workspace .repeat-toggle[aria-pressed=true]{background:#a5c6ae26;border-color:#a5c6ae80}
.workspace .sentence-loop:hover,.workspace .sentence-loop:focus-visible{color:#bedfc7;background:#a5c6ae22}
.workspace .cue-button.active{background:#b7acdf17;border-color:#b7acdf55}
.workspace .cue-button.active .cue-time{color:#c7bceb}
.explore-panel{background:linear-gradient(165deg,#36505b19,transparent 65%),var(--panel)}
@container vesper (min-width:901px){.workspace[data-dock] .explore-panel{contain:size;overflow:hidden}.workspace[data-dock] .scene-ribbon{align-self:start}}
.search-field{background:#121b2588;border-color:#859aaf4d}.panel-tabs button[aria-selected=true]{border-color:#b7acdf;color:#d6c9ff}
.toast{background:var(--panel);border-color:#7893a366}.film-badge,.resume-button{background:#152b36b8;color:#f3f6fa;border-color:#e2f4ff30;backdrop-filter:blur(12px)}
.workspace[data-dock=top] .film-top{top:142px}
.workspace:is([data-media=product],[data-media=meeting]) .opening-art{display:none}
.workspace:is([data-dock=left],[data-dock=right]) .control-desk{width:60px;border-radius:17px;padding:7px}
.workspace:is([data-dock=left],[data-dock=right]) .rail-shortcut{display:none}
.workspace:is([data-dock=left],[data-dock=right]) .time-slider{margin-block:6px}
.workspace:is([data-dock=left],[data-dock=right]) .transport{gap:4px}
.workspace[data-dock].tv-mode:is([data-dock=left],[data-dock=right]) .film-shell{min-height:650px}
.workspace[data-feature-transcript=false] .transcript-shortcut,.workspace[data-feature-loop=false] .repeat-shortcut{display:none}
.workspace[data-dock].higher-contrast .control-desk{background:#12232d;backdrop-filter:none;border-color:#e1edf7}
.workspace[data-dock].higher-contrast .control-button{box-shadow:inset 0 0 0 1px #c2d0dc88}
.workspace :focus-visible{outline:3px solid #b9d9ff;outline-offset:3px}
.dock-targets span{border-color:#b9d9ffaa;background:#162c3bc9;color:#f3f6fa}
.position-mini{background:#16232f;border-color:#7893a3}.position-mini i{background:var(--accent)}
@container film (max-width:1080px){.workspace[data-dock] .volume-slider{display:none}.workspace[data-dock] .control-desk .pip-button{display:none}}
@container film (max-width:900px){.workspace[data-dock].tv-mode .control-desk .rail-shortcut{display:none}}
@container film (max-width:730px){.workspace[data-dock] .control-desk .rail-shortcut{display:none}}
@container vesper (max-width:900px){.workspace[data-dock] .film-shell{border-top-right-radius:16px}}
@container film (max-width:560px){
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .control-desk{left:7px;right:7px;padding:4px 3px 6px;border-radius:15px}
 .workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .transport{gap:0}
 .workspace[data-dock] .film-stage{padding:0}
 .workspace[data-dock=top] .film-top{top:172px}
 .workspace[data-dock=top] .playback-tools{top:174px}
 .rail-options{gap:5px;justify-content:space-between;margin-top:3px;padding-top:3px}
 .rail-select{gap:4px;padding-inline:8px;font-size:10px;min-height:44px}.rail-select>span{font-size:9px}.rail-select select{max-width:110px;min-height:44px}.rail-chapter{display:none}
 .quality-status{position:absolute;left:0;right:0;bottom:100%;padding:8px;background:#132731e6;border-radius:8px}.quality-status:empty{display:none}
 .workspace[data-dock] .control-desk .time-readout{font-size:9px}
 .workspace[data-dock] .control-desk .control-button{border-radius:11px}
 .workspace[data-dock] .control-desk .primary-play{border-radius:50%}
 .workspace:is([data-dock=left],[data-dock=right]) .control-desk{width:60px;left:7px}
 .workspace[data-dock=right] .control-desk{left:auto;right:7px}
 .workspace[data-dock] .film-shell{min-height:340px}
 .workspace:is([data-dock=left],[data-dock=right]) .film-shell{min-height:460px}
 .demo-option>strong{font-size:13px}
}
@media(max-width:560px){.intro{padding-block:28px 24px}.intro h1{font-size:43px}.demo-chooser{padding:15px}.demo-guide{line-height:1.7}}
@container film (max-width:290px){.workspace[data-dock]:is([data-dock=bottom],[data-dock=top]) .control-desk{left:2px;right:2px;padding-inline:0}}
@media(prefers-reduced-motion:reduce){.workspace[data-dock] .control-desk .control-button{transition:none}}
@media(forced-colors:active){.workspace[data-dock] .control-desk{background:Canvas;color:CanvasText;backdrop-filter:none}.workspace[data-dock] :is(.control-desk,.extra-transport) .control-button{color:ButtonText;background:ButtonFace;border:1px solid ButtonText;box-shadow:none}.workspace[data-dock] .control-desk .pin-button[aria-pressed=true]{color:HighlightText;background:Highlight}.workspace[data-dock] .time-slider media-slider-fill,.workspace[data-dock] .time-slider .slider-thumb{background:Highlight}}