/* VESPER liquid glass: optical rim, diffused scene, restrained spectral light.
   These decorative layers never intercept input or alter video pixels. */
#vesper-player .vesper-player{border-radius:26px;border-color:#b5d7ef45;box-shadow:0 24px 70px #0005,inset 0 1px 0 #e8f5ff12}
#vesper-player .film-shell{border-radius:25px 0 0 0}
#vesper-player .control-desk{
 --glass-radius:38px;
 border-radius:var(--glass-radius);border:1px solid #a6d4f06b;
 padding:10px 16px 13px;gap:4px;
 background:var(--liquid-fallback,#13283a);color:var(--rail-text);
 box-shadow:inset 0 1px 1px #d1ecff73,inset 0 -2px 3px #020c1ba6,0 2px 2px #020a1680,0 10px 24px #02081066;
}
@supports(backdrop-filter:blur(1px)){
 #vesper-player .control-desk{
  background:radial-gradient(ellipse at 0% 12%,#1a548c38,transparent 48%),linear-gradient(155deg,#24395133,transparent 44%,#0f1d3326),linear-gradient(180deg,#07142659,#030c1b33 48%,#080d1f66),color-mix(in srgb,var(--liquid-surface,#132a3f80) 92%,transparent);
  backdrop-filter:blur(13px) saturate(150%) brightness(.82);-webkit-backdrop-filter:blur(13px) saturate(150%) brightness(.82);
 }
}
/* The reference material concentrates bright optical light in the bevel. */
#vesper-player .control-desk::before{display:none}
/* One directional highlight on the existing rim, with no filled white sheen. */
@supports(mask-composite:exclude){
 #vesper-player .control-desk::before{content:'';display:block;position:absolute;inset:-1px;padding:1.25px;border:0;border-radius:inherit;pointer-events:none;z-index:0;background:conic-gradient(from -35deg at 50% 50%,#e2f4ffd9,#91b5e973 65deg,#8fb4e238 105deg,#9fd0f5ba 135deg,#d6ecffe6 148deg,#6bb6f17a 220deg,#72caffd9 265deg,#f7fcff 320deg,#e2f4ffd9);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
}
#vesper-player .control-desk::after{
 content:'';position:absolute;inset:1px;border:0;border-radius:calc(var(--glass-radius) - 1px);
 background:radial-gradient(ellipse 200px 13px at 10% 0%,#adcfff26,transparent 85%),
  radial-gradient(ellipse 220px 17px at 12% 100%,#329dff33,transparent 85%),
  radial-gradient(ellipse 260px 17px at 78% 100%,#329dff24,transparent 85%),
  radial-gradient(ellipse 100px 24px at 100% 100%,#8ecbff3d,transparent 85%);
 box-shadow:none;
 pointer-events:none;z-index:0;
}
/* The transparent centre stays clear. Light rolls through a soft bevel inside
   the existing rim, with a darker rear lip rather than a second drawn frame. */
#vesper-player .control-desk .glass-depth{display:none}
@supports(backdrop-filter:blur(1px)){
 #vesper-player .control-desk .glass-depth{--depth-width:7px;display:block;position:absolute;inset:1px;z-index:0;border-radius:calc(var(--glass-radius) - 1px);pointer-events:none;overflow:hidden;box-shadow:inset 0 1px 1px #d4eaff9c,inset 0 4px 5px -2px #799fe752,inset 3px 0 5px -2px #65beff66,inset 0 -4px 6px -2px #020916a6,inset -3px -2px 5px -2px #9fcdf06b}
 #vesper-player .control-desk .glass-depth::after{content:'';position:absolute;inset:6px;border-radius:calc(var(--glass-radius) - 7px);pointer-events:none;box-shadow:inset 0 1px 1px #02091980,inset 0 -1px 1px #84b4d42b;background:radial-gradient(ellipse 150px 38px at 0% 0%,#acdfff66,#82c9ff21 48%,transparent 85%),radial-gradient(ellipse 210px 12px at 12% 0%,#aab9ff26,transparent 90%),radial-gradient(ellipse 190px 18px at 100% 100%,#a8d4f038,transparent 90%)}
}
@supports(mask-composite:exclude){
 #vesper-player .control-desk .glass-depth::before{content:'';position:absolute;inset:0;padding:var(--depth-width,7px);border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 70px 17px at 3% 2%,#f4fbfffa,#a5dcffb3 25%,transparent 77%),radial-gradient(ellipse 180px 70px at 0% 0%,#6eb8f0ba,transparent 82%),radial-gradient(ellipse 150px 45px at 100% 100%,#c0e2faba,transparent 85%),linear-gradient(170deg,#aab7f152,transparent 28% 74%,#84aacb3b);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:blur(.55px);opacity:.9}
}
#vesper-player .control-desk>.rail-timeline,#vesper-player .control-desk>.transport{position:relative;z-index:1}
#vesper-player .control-desk .rail-timeline{height:30px;gap:14px}
#vesper-player .control-desk .time-readout{font-size:12px;font-weight:500;letter-spacing:.1px;color:var(--rail-text);text-shadow:0 1px 3px #000b}
#vesper-player .rail-timeline .slider-track{height:4px;background:#b8d9f142;box-shadow:inset 0 1px 1px #0004}
#vesper-player .rail-timeline media-slider-fill{background:linear-gradient(90deg,#65d8ff,var(--accent));box-shadow:0 0 6px #7bcfff66}
#vesper-player .rail-timeline .slider-thumb{width:11px;height:11px;background:#c1e8ff;border:1px solid #edfaff;box-shadow:0 0 0 3px #7acaff1c,0 0 8px #78bfff8c}
#vesper-player .control-desk .transport{gap:12px;min-height:44px}
#vesper-player .control-desk .control-button{border-radius:50%;color:rgb(var(--button-tint));overflow:visible}
#vesper-player .control-desk .control-button .icon{width:22px;height:22px;stroke-width:1.7;filter:drop-shadow(0 1px 1px #02091090) drop-shadow(0 0 1.3px rgb(var(--button-tint)/.25));transition:filter .18s}
#vesper-player .control-desk .control-button:not(.primary-play):not(.dock-handle)::before{
 content:'';position:absolute;inset:auto 26% 3px;height:5px;border-radius:50%;
 background:radial-gradient(ellipse at 50% 50%,rgb(var(--light-rgb,var(--button-tint))/.95),rgb(var(--light-rgb,var(--button-tint))/.4) 46%,transparent 74%);filter:blur(1.2px);pointer-events:none;
 transition:filter .18s,opacity .18s;opacity:0;
}
#vesper-player .control-desk .control-button:not(.primary-play):is(:hover,:focus-visible){background:radial-gradient(ellipse at 50% 85%,rgb(var(--button-tint)/.14),transparent 75%),linear-gradient(160deg,rgb(var(--button-tint)/.07),rgb(var(--button-tint)/.02));box-shadow:inset 0 0 0 1px rgb(var(--button-tint)/.17),inset 0 1px 0 rgb(var(--button-tint)/.24),inset 0 -1px 1px #020b1840;color:color-mix(in srgb,rgb(var(--button-tint)),white 16%)}
/* The coloured tools rest on a small, crisp reflection; it brightens on interaction and while a tool is switched on. Other buttons light up on interaction only. */
#vesper-player .control-desk .control-button:not(.primary-play):is(.rail-shortcut,.pin-button)::before{opacity:.7}
#vesper-player .control-desk .control-button:not(.primary-play):focus-visible::before{opacity:.85;filter:blur(1px) brightness(1.2)}
@media(hover:hover){#vesper-player .control-desk .control-button:not(.primary-play):hover::before{opacity:.85;filter:blur(1px) brightness(1.2)}}
#vesper-player .control-desk .control-button:not(.primary-play):active::before{opacity:1;filter:blur(1px) brightness(1.35)}
#vesper-player .control-desk .control-button:not(.primary-play):is(.pin-button[aria-pressed=true],.rail-shortcut[aria-expanded=true],[data-action=tools][aria-expanded=true])::before,#vesper-player .workspace[data-loop-enabled=true] .control-desk .control-button:not(.primary-play).repeat-shortcut::before{opacity:1;filter:blur(1px) brightness(1.25)}
#vesper-player .control-desk .primary-play{
 width:48px;min-width:48px;height:48px;margin-inline:2px 6px;
 border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 82%,#def5ff);color:#082640;
 background:linear-gradient(175deg,color-mix(in srgb,var(--accent) 94%,#d0efff) 0%,color-mix(in srgb,var(--accent) 76%,#2195ef) 43%,color-mix(in srgb,var(--accent) 65%,#087ed0) 55%,color-mix(in srgb,var(--accent) 80%,#66caff) 100%);
 box-shadow:inset 0 1px 1px #e5f7ffe6,inset 0 4px 5px -3px #edffff80,inset 0 -4px 6px -3px #08639d80,0 2px 0 #082b4580,0 0 0 2px #6ebeff26,0 0 10px #38a7ff73,0 5px 9px #02081059;
}
#vesper-player .control-desk .primary-play::before{display:none}
@supports(mask-composite:exclude){
 #vesper-player .control-desk .primary-play::before{content:'';display:block;position:absolute;inset:2px;padding:1px;border:0;border-radius:inherit;pointer-events:none;background:conic-gradient(from -35deg,#e8faffeb,#b5dfff59 90deg,#4c9fdf26 160deg,#b4ecffc7 220deg,#d5f5ffe6 290deg,#e8faffeb);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
}
#vesper-player .control-desk .primary-play .icon{filter:drop-shadow(0 1px 0 #c9efff73);width:24px;height:24px;stroke-width:1.65}
#vesper-player .control-desk .primary-play .when-paused .icon{translate:1px 0}
#vesper-player .control-desk .primary-play:is(:hover,:focus-visible){color:#06243b;border-color:#dcf5ff;background:linear-gradient(175deg,color-mix(in srgb,var(--accent) 85%,#e0f5ff),color-mix(in srgb,var(--accent) 78%,#3197ef) 50%,color-mix(in srgb,var(--accent) 86%,#72d2ff));box-shadow:inset 0 1px 1px #effaff,inset 0 -2px 3px #08639d66,0 2px 0 #082b4580,0 0 0 2px #6ebeff33,0 0 12px #38a7ff80,0 5px 9px #02081059}
#vesper-player .control-desk .control-button.primary-play:active{translate:0 1px;background:linear-gradient(175deg,color-mix(in srgb,var(--accent) 70%,#3497dd),color-mix(in srgb,var(--accent) 82%,#2195ef));box-shadow:inset 0 2px 3px #08639d66,0 .5px 0 #082b4580,0 0 8px #38a7ff59}
#vesper-player .control-desk media-mute-button{--button-tint:170 222 255;--light-rgb:68 144 210;--light-delay:-1.2s}
#vesper-player .control-desk .transcript-shortcut{--button-tint:199 156 250;--light-rgb:151 94 222;--light-delay:-.6s}
#vesper-player .control-desk .bookmark-shortcut{--button-tint:245 150 191;--light-rgb:217 91 146;--light-delay:-2s}
#vesper-player .control-desk .repeat-shortcut{--button-tint:116 221 205;--light-rgb:66 183 158;--light-delay:-3.4s}
#vesper-player .control-desk .pin-button{--button-tint:246 199 135;--light-rgb:196 146 70;--light-delay:-4.6s}
#vesper-player .control-desk [data-action=tools]{--button-tint:200 221 247;--light-rgb:119 160 199;--light-delay:-1.8s}
#vesper-player .control-desk .fullscreen-button{--button-tint:161 217 255;--light-rgb:94 165 222;--light-delay:-3s}
#vesper-player .control-desk .dock-handle{color:#9dc6e0}
#vesper-player .control-desk .dock-handle .icon{width:20px;height:20px;opacity:.9;filter:none}
/* Navigation stays quiet so the coloured tools carry the reflected light. */
#vesper-player .control-desk :is(.panel-toggle,.panel-close){--button-tint:183 207 225}
#vesper-player .control-desk .control-button:is(.panel-toggle,.panel-close)::before{display:none}
#vesper-player .control-desk :is(.panel-toggle,.panel-close) .icon{filter:none}@media(hover:hover) and (pointer:fine){
 @container film (min-width:641px){
  #vesper-player .workspace:is([data-dock=bottom],[data-dock=top]):not(.tv-mode) .control-desk .control-button{width:40px;min-width:40px;height:40px}
  #vesper-player .workspace:is([data-dock=bottom],[data-dock=top]):not(.tv-mode) .control-desk .primary-play{width:48px;min-width:48px;height:48px}
 }
}
#vesper-player .control-desk .pin-button[aria-pressed=true]{background:#ffd3971c;color:#ffe0ad;box-shadow:inset 0 0 0 1px #ffd39759,0 0 14px #ffbf5e12}
#vesper-player .workspace[data-loop-enabled=true] .repeat-shortcut{background:#87ebd71c;color:#a6ffeb;box-shadow:inset 0 0 0 1px #87ebd759}
#vesper-player .control-desk .rail-options{gap:17px;border-color:#def2ff3b;padding-left:17px}
#vesper-player .control-desk .rail-select>span{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.8px;font-weight:500;color:var(--rail-text);text-shadow:0 1px 3px #000b}
#vesper-player .control-desk .rail-select select{font-size:12px;color:var(--rail-text);text-shadow:0 1px 3px #000b}
#vesper-player .playback-tools{border-radius:24px;border-color:#b5d7ef59;background:var(--panel);box-shadow:0 14px 45px #0008,inset 0 1px 0 #e9f7ff33}
#vesper-player .explore-panel{background:linear-gradient(145deg,#adc4ff05,transparent 55%),var(--panel);border-color:#bbd9ed2b}
#vesper-player .search-field{border-radius:14px;background:#07111e55;box-shadow:inset 0 1px 2px #0002}
#vesper-player .workspace :is(.playback-tools,.explore-panel,.slider-preview){box-shadow:inset 0 1px 1px #9fc9e212,0 12px 30px #02081059}
@supports(backdrop-filter:blur(1px)){
 #vesper-player .workspace :is(.playback-tools,.explore-panel){background:linear-gradient(135deg,#42647738,transparent 45%,#241d3714),color-mix(in srgb,var(--panel) 88%,#05111b);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)}
}
#vesper-player .film-badge{border-radius:999px;background:#12253699;border-color:#c4e6ff5e;box-shadow:inset 0 1px 0 #d3efff33}
/* The player takes the first view; content choices sit below the experience. */
.intro{padding-top:30px;padding-bottom:25px}.intro h1{font-size:clamp(31px,3.6vw,50px)}
.demo-chooser{margin-top:28px;margin-bottom:0;background:transparent;border-color:#b7d4e523}
.demo-chooser>div:first-child{margin-bottom:12px}.demo-chooser .demo-options{gap:10px}
.demo-chooser .demo-option{padding:12px 14px;background:#8eb7dd05;border-color:#b7d4e522;border-radius:13px}
.demo-chooser .demo-option[aria-current=true]{background:#9bcbff09;border-color:#9bcbff70}
@container film (max-width:880px){#vesper-player .control-desk{padding-inline:11px}#vesper-player .control-desk .rail-options{gap:12px;padding-left:12px}}
@container film (max-width:640px){
 #vesper-player .control-desk .glass-depth{--depth-width:5px}
 #vesper-player .control-desk{--glass-radius:28px;padding:6px 5px 8px;gap:2px}
 #vesper-player .control-desk .rail-timeline{height:36px;gap:8px}
 #vesper-player .control-desk .time-readout{font-size:11px}
 #vesper-player .control-desk .transport{gap:0;min-height:0}
 #vesper-player .control-desk .primary-play{width:44px;min-width:44px;height:44px;margin:0}
 #vesper-player .control-desk .rail-options{border:0;padding:0;gap:28px}
 #vesper-player .control-desk .rail-select>span{font-size:9px}
 #vesper-player .workspace[data-dock=top] .film-top{top:164px}
 #vesper-player .workspace[data-dock=top] .playback-tools{top:168px}
}
@container film (max-width:300px){#vesper-player .control-desk{padding-inline:0}}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .control-desk{--glass-radius:28px;padding:7px 10px;border-radius:var(--glass-radius)}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .transport{position:static;display:contents}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) :is(.rail-primary,.rail-actions,.rail-options){position:relative;z-index:1}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .primary-play{width:44px;min-width:44px;height:44px;margin:0}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-options{border-left:0;border-top:1px solid #def2ff3b;gap:0;padding:3px 0 0}
#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline{height:auto;gap:6px}
/* Match the reference's generous control scale on a wide desktop film. */
@container film (min-width:980px){
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk{--glass-radius:44px;padding:14px 22px 20px;gap:6px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .transport{min-height:64px;gap:16px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button{width:56px;min-width:56px;height:56px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .primary-play{width:64px;min-width:64px;height:64px;margin-right:8px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .dock-handle{width:36px;min-width:36px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button .icon{width:28px;height:28px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .primary-play .icon{width:31px;height:31px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .time-readout{font-size:16px;min-width:56px}
 #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-button:not(.primary-play):not(.dock-handle)::before{bottom:4px;left:26%;right:26%;height:6px}
}
#vesper-player .workspace.higher-contrast .control-desk{background:var(--liquid-fallback,#13283a);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#dceeff;box-shadow:none}
#vesper-player .workspace.higher-contrast .control-desk::before,#vesper-player .workspace.higher-contrast .control-desk::after{display:none}
#vesper-player .workspace.higher-contrast .control-desk .glass-depth{display:none}
#vesper-player .workspace.higher-contrast .control-desk .control-button::before{display:none}
#vesper-player .workspace.higher-contrast .control-desk .primary-play{background:var(--accent);color:var(--ink);box-shadow:none}
#vesper-player .workspace.higher-contrast .control-desk .primary-play::before{display:none}
#vesper-player .workspace.higher-contrast :is(.playback-tools,.explore-panel){background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 #vesper-player .control-desk .glass-depth{display:none}
 #vesper-player .control-desk .control-button::before{display:none}
 #vesper-player .control-desk{background:var(--liquid-fallback,#13283a);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#dceeff;box-shadow:none}
 #vesper-player .control-desk::before,#vesper-player .control-desk::after{display:none}
 #vesper-player .control-desk .primary-play,#vesper-player .control-desk .primary-play:is(:hover,:focus-visible),#vesper-player .control-desk .control-button.primary-play:active{background:var(--accent);color:var(--ink);box-shadow:none}
 #vesper-player .control-desk .primary-play::before{display:none}
 #vesper-player .workspace :is(.playback-tools,.explore-panel){background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){#vesper-player .control-desk .control-button::before{animation:none;transition:none;transform:none}}
#vesper-player .workspace.calm .control-desk .control-button::before{animation:none;transition:none;transform:none}
@media(forced-colors:active){
 #vesper-player .control-desk .glass-depth{display:none}
 #vesper-player .control-desk,#vesper-player .workspace.higher-contrast .control-desk{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 #vesper-player .control-desk::before,#vesper-player .control-desk::after,#vesper-player .control-desk .control-button::before{display:none}
 #vesper-player .control-desk .control-button,#vesper-player .control-desk .control-button:is(:hover,:focus-visible){background:ButtonFace;color:ButtonText;box-shadow:none;border:1px solid ButtonText}
 #vesper-player .control-desk .primary-play,#vesper-player .control-desk .primary-play:is(:hover,:focus-visible),#vesper-player .control-desk .control-button.primary-play:active,#vesper-player .workspace.higher-contrast .control-desk .primary-play,#vesper-player .control-desk .pin-button[aria-pressed=true],#vesper-player .workspace[data-loop-enabled=true] .repeat-shortcut{background:Highlight;color:HighlightText;box-shadow:none}
 #vesper-player .control-desk .control-button .icon{filter:none}
 #vesper-player .workspace :is(.playback-tools,.explore-panel),#vesper-player .workspace.higher-contrast :is(.playback-tools,.explore-panel){background:Canvas;color:CanvasText;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:CanvasText}
 #vesper-player .control-desk :is(.time-readout,.rail-select>span,.rail-select select){color:CanvasText;text-shadow:none}
 #vesper-player .rail-timeline media-slider-fill,#vesper-player .rail-timeline .slider-thumb{background:Highlight;box-shadow:none}
}