@font-face{font-family:DM Sans;src:url('/assets/dm-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:DM Sans;src:url('/assets/dm-medium.ttf') format('truetype');font-weight:500 800;font-display:swap} :root{--bg:#211d1c;--panel:#2b2422;--raised:#3c312d;--line:#65554b;--muted:#d1c2b2;--white:#f4e8d2;--accent:#f4e8d2;--ink:#211d1c;color-scheme:dark;font:14px 'DM Sans',Arial,sans-serif;color:var(--white);background:var(--bg);font-synthesis:none;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button,input,select{color:inherit}::selection{background:var(--accent);color:var(--ink)}[hidden]{display:none!important}.icon{display:block;width:22px;height:22px;flex-shrink:0}.page-shell{max-width:1600px;padding:0 44px;margin:auto}.site-header{height:98px;display:flex;align-items:center;gap:45px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:21px;font-weight:600;letter-spacing:3px}.brand svg{width:30px;height:26px;color:var(--accent)}.header-note{color:var(--muted);font-size:10px;line-height:1.6}nav{display:flex;border:1px solid #25343c;background:var(--panel);border-radius:30px;padding:4px;gap:4px;margin-left:auto}.mode-button{border:0;color:var(--muted);background:none;border-radius:24px;min-width:85px;min-height:40px;padding:8px 18px;font-size:12px}.mode-button.active{color:var(--accent);background:var(--raised)}.mode-button:hover{color:var(--white)}.header-link{margin-left:20px;font-size:11px;color:var(--muted);text-decoration:none}.header-link span{color:var(--accent);padding-left:15px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:38px 0 34px}.eyebrow{font-size:9px;font-weight:500;letter-spacing:1.8px}.intro .eyebrow{display:flex;align-items:center;gap:8px;color:var(--muted);margin:0 0 14px}.intro i,.workspace-foot i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent)}h1{font-size:clamp(36px,4.2vw,65px);line-height:1.07;font-weight:500;letter-spacing:-2.5px;margin:0}h1 em{color:var(--accent);font-style:normal}.intro>p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 2px;max-width:300px}.screening-label{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:var(--muted);margin-bottom:14px}.screening-label b{margin-left:15px;font-weight:500;color:var(--white)}#screening{scroll-margin-top:20px}.film-credit{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 32px;border-bottom:1px solid var(--line)}.film-credit h2{font-size:21px;font-weight:500;margin:0;display:flex;align-items:center;gap:15px}.film-credit h2 span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;border-left:1px solid var(--line);padding-left:15px}.film-credit p{font-size:11px;color:var(--muted);line-height:1.7;margin:9px 0 0}.film-credit>a{font-size:11px;color:var(--muted);text-decoration:none;white-space:nowrap}.film-credit>a:hover{color:var(--accent)}.idea{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:65px 0;border-bottom:1px solid var(--line)}.idea-title>.eyebrow{color:var(--muted)}.idea h2{font-size:39px;line-height:1.15;letter-spacing:-1.5px;font-weight:500;margin:22px 0}.idea h2 em{color:var(--accent);font-style:normal}.idea-title p{font-size:12px;line-height:1.9;color:var(--muted);max-width:390px}.feature-notes article{border-top:1px solid var(--line);padding:16px 0}.feature-notes article:first-child{border-top:0}.feature-notes article>span{font-size:8px;color:var(--accent);letter-spacing:1.5px}.feature-notes h3{font-size:16px;font-weight:500;margin:9px 0}.feature-notes p{font-size:11px;line-height:1.8;color:var(--muted);margin:0;max-width:430px}footer{display:flex;align-items:center;flex-wrap:wrap;gap:26px;min-height:100px;color:var(--muted);font-size:9px}.footer-brand{font-size:14px;letter-spacing:2px;font-weight:600;color:var(--white);text-decoration:none;margin-right:auto}footer>a:last-child{margin-left:auto}.skip-link{position:fixed;left:16px;top:-100px;padding:12px 18px;color:var(--ink);background:var(--accent);z-index:1000}.skip-link:focus{top:16px}.loading-message{background:var(--panel);min-height:300px;display:grid;place-items:center;color:var(--muted)} /* The reusable skin */ video-player{display:block;container-type:inline-size;container-name:vesper}.vesper-player{--media-accent-color:var(--accent);display:block;position:relative;background:var(--bg);border:1px solid var(--line);border-radius:18px;overflow:clip}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto auto auto;position:relative;min-width:0}.film-stage{grid-column:1;grid-row:1;position:relative;background:#030809;aspect-ratio:16/9;min-width:0;overflow:hidden;border-top-left-radius:17px}.film-stage video{display:block;width:100%;height:100%;object-fit:contain}.film-top{position:absolute;inset:18px 20px auto;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.film-badge,.resume-button{background:#211d1cf5;border:1px solid #52616a;color:#f4e8d2;font-size:9px;letter-spacing:1px;line-height:1.5;padding:9px 12px;border-radius:20px;pointer-events:auto}.film-badge span{color:var(--accent);padding:0 5px}.resume-button{cursor:pointer;min-height:44px;letter-spacing:0}.opening-art{position:absolute;left:28px;right:28px;bottom:35px;pointer-events:none;text-shadow:0 2px 15px #000}.opening-art>span{font-size:7px;letter-spacing:2px}.opening-art h2{font-size:52px;letter-spacing:3px;line-height:1;margin:14px 0 0;font-weight:500}.opening-art h2>span{display:block;margin-top:12px;font-size:12px;letter-spacing:0;line-height:1.7;color:#e1e7e9}.opening-play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;min-width:176px;padding:17px 22px;background:var(--accent);color:var(--ink);border-radius:14px;cursor:pointer;box-shadow:0 8px 60px #0004}.opening-play>.icon{width:18px;height:18px}.opening-play>span{font-size:12px;font-weight:500}.opening-play>small{width:100%;font-size:7px;letter-spacing:1.4px;text-align:center}.opening-play:hover{background:#fff8ec}.has-started .opening-art{display:none}.buffering{position:absolute;inset:0;display:none;justify-content:center;align-content:center;justify-items:center;gap:10px;background:#211d1cd9;pointer-events:none}.buffering[data-visible]{display:grid}.buffering>span{width:32px;height:32px;border:2px solid #f4e8d240;border-top-color:var(--accent);border-radius:50%;animation:buffer-spin 1s linear infinite}.buffering p{font-size:11px}@keyframes buffer-spin{to{transform:rotate(360deg)}}.control-desk{grid-column:1;grid-row:2;background:var(--panel);padding:17px 20px 0;border-top:1px solid var(--line);min-width:0}.timeline-labels{display:flex;align-items:center;justify-content:space-between;gap:16px}.current-chapter{font-size:8px;letter-spacing:1.1px;color:var(--accent)}.time-readout{display:flex;gap:7px;font-size:11px;font-variant-numeric:tabular-nums}.time-readout>span,.time-readout media-time[type=duration]{color:var(--muted)}.time-slider{display:flex;align-items:center;position:relative;height:42px;cursor:pointer;touch-action:none;margin:0 7px}.slider-track{display:block;position:relative;background:#546772;height:3px;width:100%;border-radius:3px}.slider-track media-slider-buffer,.slider-track media-slider-fill{position:absolute;display:block;left:0;top:0;bottom:0;border-radius:inherit}.slider-track media-slider-buffer{width:var(--media-slider-buffer);background:#83959e}.slider-track media-slider-fill{width:var(--media-slider-fill);background:var(--accent)}.slider-thumb{display:block;position:absolute;left:var(--media-slider-fill);height:11px;width:11px;border:2px solid var(--accent);border-radius:50%;background:var(--accent);translate:-50% 0;z-index:3}.range-band{position:absolute;height:20px;background:#f4e8d220;border:1px solid #f4e8d2a0;pointer-events:none;z-index:2;border-radius:3px}.timeline-ticks{position:absolute;left:0;right:0;top:27px;height:3px;background:repeating-linear-gradient(to right,#d1c2b278 0 1px,transparent 1px 2.5%);pointer-events:none}.slider-preview{display:none;position:absolute;left:clamp(65px,var(--media-slider-pointer),calc(100% - 65px));bottom:43px;transform:translateX(-50%);min-width:130px;padding:9px 12px;background:#211d1c;color:var(--white);border:1px solid var(--line);border-radius:8px;font-size:10px;line-height:1.7;text-align:center;z-index:8;pointer-events:none}.slider-preview media-time-slider-chapter-title,.slider-preview media-slider-value{display:block}.slider-preview media-time-slider-chapter-title{color:var(--accent)}.time-slider:hover .slider-preview,.time-slider:focus-within .slider-preview{display:block}.transport{display:flex;align-items:center;gap:5px;min-width:0;padding-bottom:15px}.control-button{position:relative;border:0;background:transparent;color:var(--white);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:10px;cursor:pointer;padding:0;transition:background .16s,color .16s}.control-button:hover{background:#35464f}.control-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;z-index:6}.control-button .icon{width:21px;height:21px}.primary-play{background:var(--accent);color:var(--ink);width:55px;height:50px;border-radius:17px;margin:0 5px}.primary-play:hover{background:#fff8ec;color:var(--ink)}.transport-space{flex:1}.volume-controls{display:flex;align-items:center;gap:3px;margin-left:9px}.volume-slider{display:flex;align-items:center;position:relative;width:58px;height:44px;margin-right:8px;touch-action:none;cursor:pointer}.volume-slider .slider-track{height:3px}.volume-slider .slider-thumb{width:8px;height:8px;background:var(--white);border:0}.volume-slider media-slider-fill{background:var(--white)}.rate-button{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.captions-button[data-active]{color:var(--accent)}.when-paused,.when-playing,.when-muted,.when-unmuted,.when-fullscreen,.when-not-fullscreen{display:contents}.primary-play:not([data-paused]) .when-paused,.primary-play[data-paused] .when-playing,media-mute-button:not([data-muted]) .when-muted,media-mute-button[data-muted] .when-unmuted,media-fullscreen-button:not([data-fullscreen]) .when-fullscreen,media-fullscreen-button[data-fullscreen] .when-not-fullscreen{display:none}.loop-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:12px 0;min-height:70px}.loop-heading{display:flex;align-items:center;gap:10px}.loop-heading>.icon{width:20px;height:20px;color:var(--accent)}.loop-heading strong{display:block;font-size:11px;font-weight:500}.loop-description{display:block;font-size:9px;color:var(--muted);margin-top:5px;line-height:1.5}.loop-actions{display:flex;align-items:center;gap:7px}.range-button{min-height:40px;padding:9px 10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:11px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}.range-button>span{color:var(--white);font-weight:400;margin-left:7px;font-size:10px}.range-button:hover:enabled{border-color:var(--accent)}.range-connector{color:var(--muted);font-size:10px}.repeat-toggle{min-height:40px;display:flex;align-items:center;gap:7px;font-size:9px;padding:9px;border:1px solid var(--line);background:var(--bg);border-radius:8px;white-space:nowrap}.switch-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.repeat-toggle[aria-pressed=true]{color:var(--accent);border-color:#f4e8d266}.repeat-toggle[aria-pressed=true] .switch-dot{background:var(--accent)}.loop-actions>.control-button{width:32px;min-height:40px;height:40px}.loop-actions>.control-button>.icon{width:17px;height:17px}.explore-panel{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--line);padding:20px;background:var(--panel)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.panel-heading h2{font-size:23px;letter-spacing:-.7px;font-weight:500;line-height:1.2;margin:2px 0 15px}.panel-heading h2>span{color:var(--accent)}.panel-close{align-self:flex-start;width:32px;height:32px;margin:-7px -10px 0 0;color:var(--muted)}.panel-close .icon{width:17px;height:17px}.panel-tabs{display:flex;border-bottom:1px solid var(--line);gap:15px;margin-bottom:18px;flex-shrink:0}.panel-tabs button{border:0;border-bottom:2px solid transparent;background:none;min-height:44px;padding:9px 0;font-size:11px;position:relative;white-space:nowrap;color:var(--muted)}.panel-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.bookmark-count{padding:2px 5px;border-radius:4px;background:var(--raised);margin-left:2px;font-size:9px}.tool-panel{display:flex;flex-direction:column;min-height:0;flex:1}.search-field{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:9px;gap:9px;padding:0 12px;min-height:44px;flex-shrink:0}.search-field>.icon{width:16px;height:16px;color:var(--muted)}.search-field input{border:0;background:none;color:var(--white);width:100%;min-width:0;height:44px;font-size:11px;outline-offset:1px}input::placeholder{color:#d1c2b2}.transcript-meta{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:13px 0 9px;font-size:8px;color:var(--muted);flex-shrink:0;min-height:24px}.transcript-meta label{display:flex;align-items:center;gap:5px;min-height:28px;cursor:pointer}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;margin:0}.panel-scroll{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#627984 transparent;overscroll-behavior:contain}.transcript-lines{flex:1;position:relative;margin:0 -8px;max-height:580px;padding:0 5px 0 0}.transcript-row{display:flex;align-items:center;gap:2px;position:relative;border-radius:9px;margin-bottom:5px}.cue-button{position:relative;display:block;text-align:left;width:100%;min-height:62px;padding:12px 10px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);cursor:pointer;line-height:1.65}.cue-time{display:block;font-size:9px;font-variant-numeric:tabular-nums;margin-bottom:4px;color:var(--muted)}.cue-text{display:block;font-size:12px}.cue-button:hover{background:var(--raised);color:var(--white)}.cue-button.active{border-color:#f4e8d238;background:#44372d;color:var(--white)}.cue-button.active .cue-time{color:var(--accent)}.sentence-loop{flex-shrink:0;width:34px;height:44px;display:flex;align-items:center;justify-content:center;align-self:stretch;margin-top:auto;margin-bottom:auto;border:0;border-radius:8px;background:none;color:#d1c2b2;cursor:pointer}.sentence-loop .icon{width:17px;height:17px}.sentence-loop:hover{background:var(--raised);color:var(--accent)}.panel-tip{display:flex;align-items:center;gap:11px;padding-top:15px;margin-top:12px;border-top:1px solid var(--line);flex-shrink:0}.panel-tip>.icon{color:var(--accent);width:20px}.panel-tip p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}.panel-tip p .icon{display:inline;width:12px;height:12px;vertical-align:middle;color:var(--accent)}.panel-message{padding:18px 12px;font-size:12px;line-height:1.8;color:var(--muted)}.text-button{background:none;border:0;color:var(--accent);padding:8px;min-height:36px;font-size:11px;text-decoration:underline;text-underline-offset:4px}.moments-intro{flex-shrink:0}.moments-intro p,.chapter-intro{font-size:11px;line-height:1.8;color:var(--muted);margin:0 0 14px}.accent-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:9px;background:var(--accent);color:var(--ink);min-height:44px;padding:12px 16px;font-size:11px;font-weight:500;text-decoration:none;cursor:pointer}.accent-button>.icon{width:17px;height:17px}.accent-button:hover{background:#fff8ec}.moments-intro .accent-button{width:100%}.storage-status{display:block;color:var(--muted);font-size:8px;line-height:1.7;margin:12px 0 18px}.bookmark-list{flex:1;max-height:600px}.empty-state{text-align:center;padding:38px 4px}.empty-state>.icon{margin:0 auto 17px;color:var(--accent);width:32px;height:32px}.empty-state h3{font-size:17px;font-weight:500;margin:0 0 12px}.empty-state p{font-size:11px;color:var(--muted);line-height:1.8}.moment-card{padding:12px 0;border-top:1px solid var(--line)}.moment-jump{width:100%;display:grid;grid-template-columns:1fr 20px;text-align:left;border:0;background:none;padding:8px;color:var(--white);border-radius:8px;gap:7px}.moment-jump>span{font-size:10px;color:var(--accent);grid-column:1}.moment-jump strong{font-size:12px;font-weight:400;line-height:1.6;grid-column:1;overflow-wrap:anywhere}.moment-jump>.icon{width:17px;height:17px;grid-row:1/3;grid-column:2;align-self:center;color:var(--muted)}.moment-jump:hover{background:var(--raised)}.moment-actions{display:flex;gap:18px;margin:5px 8px 0}.moment-actions button{display:flex;gap:7px;align-items:center;min-height:36px;font-size:9px;color:var(--muted);border:0;background:none;padding:0}.moment-actions .icon{width:12px;height:12px}.moment-actions button:hover{color:var(--white)}.rename-form{padding:8px}.rename-form label{font-size:10px;line-height:1.8;display:block;color:var(--muted)}.rename-form input{display:block;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:10px;margin:5px 0}.chapter-list{flex:1}.chapter-card{width:100%;display:flex;align-items:center;gap:12px;padding:14px 8px;margin-bottom:9px;text-align:left;border:1px solid transparent;border-radius:10px;background:none;color:var(--white)}.chapter-card img{width:96px;height:58px;object-fit:cover;border-radius:5px}.chapter-card>span{flex:1;min-width:0}.chapter-card small{display:block;font-size:8px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.5px}.chapter-card strong{display:block;font-size:12px;font-weight:500;margin-top:7px}.chapter-card em{display:block;font-size:9px;line-height:1.6;color:var(--muted);font-style:normal;margin-top:6px}.chapter-card>.icon{width:15px;color:var(--muted)}.chapter-card[aria-current=true]{background:#44372d;border-color:#f4e8d240}.chapter-card[aria-current=true] small{color:var(--accent)}.chapter-card:hover{border-color:#ab9680}.scene-ribbon{grid-column:1;grid-row:3;padding:19px 20px 15px;border-top:1px solid var(--line);background:var(--bg);min-width:0}.ribbon-heading{display:flex;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:1.4px;color:var(--muted);margin-bottom:12px}.ribbon-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.scene-card{overflow:hidden;background:var(--panel);color:var(--white);border:1px solid var(--line);border-radius:7px;padding:0;min-width:0;text-align:left;cursor:pointer}.scene-card>img{display:block;width:100%;height:64px;object-fit:cover}.scene-card>span{display:flex;align-items:center;gap:7px;padding:9px 8px;font-size:9px;white-space:nowrap}.scene-card small{color:var(--muted);font-size:7px}.scene-card .icon{width:13px;height:13px;margin-left:auto}.scene-card[aria-current=true]{border-color:var(--accent)}.scene-card[aria-current=true]>span,.scene-card[aria-current=true] small{color:var(--accent)}.scene-card:hover{border-color:var(--accent)}.workspace-foot{grid-column:1/3;grid-row:4;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);font-size:7px;letter-spacing:.8px;color:var(--muted)}.workspace-foot>span{display:flex;gap:8px;align-items:center}.workspace-foot i{width:4px;height:4px}.workspace-foot>div{display:flex;gap:18px}.workspace-foot button{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--muted);min-height:32px;font-size:9px}.workspace-foot button>.icon{width:15px;height:15px}.workspace-foot button:hover,.workspace-foot button[aria-pressed=true]{color:var(--accent)}.watch-only{grid-template-columns:minmax(0,1fr)}.watch-only .workspace-foot{grid-column:1}.toast{position:absolute;left:20px;right:360px;bottom:48px;z-index:14;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;color:var(--white);background:#211d1cf7;border:1px solid #8d7868;border-radius:10px;box-shadow:0 6px 25px #0005;font-size:11px;line-height:1.7;pointer-events:none}.toast button{border:0;background:none;color:var(--accent);text-decoration:underline;pointer-events:auto;min-height:36px}.watch-only .toast{right:20px}dialog{color:var(--white);background:var(--panel);border:1px solid #576b75;border-radius:20px;max-width:440px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);padding:26px;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#02070bd9;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top>.eyebrow{color:var(--muted);font-size:8px}.dialog-top>.control-button{margin:-7px -10px -7px 0}dialog h2{font-size:35px;letter-spacing:-1.2px;font-weight:500;margin:22px 0 12px}dialog h2>span{color:var(--accent)}dialog>p{font-size:12px;color:var(--muted);line-height:1.8;margin:0 0 28px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.6}.setting-row select{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:10px;font-size:11px;min-height:44px;max-width:150px}.setting-row input[type=checkbox]{width:19px;height:19px}.dialog-note{font-size:10px!important;line-height:1.9!important;margin:20px 0 24px!important}.help-dialog dl{margin:28px 0 0}.help-dialog dl>div{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;font-size:12px}.help-dialog dd{margin:0}kbd{font:11px 'DM Sans',Arial,sans-serif;padding:5px 9px;border:1px solid #647982;border-radius:5px;min-width:25px;display:inline-block;text-align:center;background:var(--bg)}.error-backdrop{position:absolute;inset:0;background:#02070be8;z-index:30}.error-popup{position:absolute;inset:0;z-index:31;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:26px;background:#211d1cf7;color:var(--white)}.error-popup media-dialog-title{font-size:28px;max-width:420px}.error-popup media-dialog-description{max-width:440px;font-size:13px;line-height:1.8;color:var(--muted)}.error-popup>a{font-size:11px;color:var(--muted)}.error-popup media-dialog-close{padding:10px 18px;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.error-popup:not([data-open]),.error-backdrop:not([data-open]){display:none}.vesper-player:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;overflow:auto;background:var(--bg)}.vesper-player:fullscreen .workspace{min-height:100%;grid-template-rows:minmax(0,1fr) auto auto auto}.vesper-player:fullscreen .film-stage{aspect-ratio:auto;min-height:100px;border-radius:0}.vesper-player:fullscreen .film-stage video{object-fit:contain}.vesper-player:fullscreen .scene-ribbon{display:none}.vesper-player:fullscreen .explore-panel{grid-row:1/3}.vesper-player:fullscreen .workspace-foot{grid-row:4}.tv-mode .control-button{width:58px;height:58px}.tv-mode .primary-play{width:76px;height:64px}.tv-mode .control-button .icon{width:28px;height:28px}.tv-mode .cue-text,.tv-mode .chapter-card strong{font-size:16px}.tv-mode :focus-visible{outline-width:4px;outline-offset:5px}.higher-contrast{--muted:#f4e8d2;--line:#c8b49e;--panel:#171310;--raised:#2b2422}.higher-contrast .scene-card,.higher-contrast .cue-button{border-color:#c8b49e} @container vesper (max-width:1160px){.workspace{grid-template-columns:minmax(0,1fr) 310px}.explore-panel{padding:16px}.panel-heading h2{font-size:21px}.panel-tabs{gap:12px}.panel-tabs button{font-size:10px}.control-desk{padding:15px 14px 0}.transport{gap:2px}.volume-controls{margin-left:0}.volume-slider{width:40px;margin-right:2px}.control-button{width:40px}.primary-play{width:48px;margin:0 2px}.loop-bar{flex-wrap:wrap;gap:9px;padding:12px 0}.loop-heading{min-width:120px}.loop-actions{margin-left:auto}.loop-description{font-size:8px}.scene-card span{font-size:8px;gap:5px;padding:9px 6px}.scene-card small{font-size:6px}.toast{right:330px}.panel-tip p{font-size:9px}.chapter-card img{width:80px}.chapter-card{gap:8px}.chapter-card em{display:none}} @container vesper (max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}.film-stage{grid-column:1;grid-row:1;border-top-right-radius:17px}.control-desk{grid-row:2}.scene-ribbon{grid-row:3}.explore-panel{grid-column:1;grid-row:4;border-left:0;border-top:1px solid var(--line);padding:22px}.workspace-foot{grid-column:1;grid-row:5}.panel-heading h2{font-size:26px}.panel-tabs{gap:30px}.panel-tabs button{font-size:12px}.tool-panel{min-height:260px}.panel-scroll{max-height:330px}.search-field input{font-size:13px}.transcript-meta{font-size:10px}.cue-text{font-size:14px}.cue-time{font-size:10px}.cue-button{min-height:66px}.sentence-loop{width:44px}.sentence-loop .icon{width:20px;height:20px}.panel-tip{display:none}.chapter-card img{width:112px;height:64px}.chapter-card strong{font-size:15px}.chapter-card small{font-size:10px}.chapter-card em{display:block;font-size:11px}.moments-intro p{font-size:13px}.moments-intro .accent-button{width:auto}.storage-status{font-size:10px}.moment-jump strong{font-size:14px}.moment-actions button{font-size:11px;min-height:44px}.toast{right:20px;bottom:50px}.watch-only .workspace-foot{grid-row:5}.tv-mode .control-button{width:52px}.scene-card>img{height:85px}.scene-card>span{font-size:11px;padding:10px}.scene-card small{font-size:8px}.volume-slider{width:70px}.control-button{width:44px}.loop-heading strong{font-size:12px}.loop-description{font-size:10px}.range-button{min-height:44px}.repeat-toggle{min-height:44px}.workspace-foot button{min-height:40px}.range-button>span{font-size:11px}.vesper-player:fullscreen .workspace{grid-template-rows:minmax(140px,1fr) auto auto auto auto}.vesper-player:fullscreen .explore-panel{grid-row:4}.vesper-player:fullscreen .workspace-foot{grid-row:5}} @container vesper (max-width:560px){.control-desk{padding:12px 12px 0}.transport{display:flex;flex-wrap:wrap;gap:2px;justify-content:space-between}.control-button{width:44px;height:48px}.primary-play{width:52px;height:48px;margin:0 2px}.skip{width:40px}.volume-controls{margin-left:0}.volume-slider{display:none}.transport-space{display:none}.pip-button{display:none}.rate-button{font-size:12px}.transport .control-button .icon{width:20px;height:20px}.transport .primary-play .icon{width:22px;height:22px}.loop-bar{display:block;padding:14px 0}.loop-heading{margin-bottom:12px}.loop-actions{justify-content:space-between;gap:6px}.range-button{flex:1;padding:9px 8px;font-size:11px}.range-button>span{font-size:10px;margin-left:5px}.repeat-toggle{font-size:9px;padding-inline:8px}.range-connector{display:none}.loop-actions>.control-button{width:30px;height:44px}.loop-description{font-size:10px}.current-chapter{font-size:7px}.time-readout{font-size:10px}.film-stage{aspect-ratio:16/10}.film-top{inset:10px 10px auto;align-items:flex-start}.film-badge{font-size:6px;padding:6px 8px}.resume-button{font-size:8px;padding:8px;min-height:34px;max-width:125px}.opening-art{left:17px;bottom:17px}.opening-art>span{display:none}.opening-art h2{font-size:29px;letter-spacing:2px}.opening-art h2>span{display:none}.opening-play{top:45%;min-width:150px;padding:13px 16px;border-radius:11px;gap:7px}.opening-play>span{font-size:10px}.opening-play>small{font-size:6px}.opening-play>.icon{width:16px;height:16px}.scene-ribbon{padding:17px 12px}.ribbon-heading{font-size:6px;letter-spacing:1px}.ribbon-heading>span:last-child{display:none}.ribbon-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.scene-card>img{height:43px}.scene-card>span{white-space:normal;font-size:8px;line-height:1.5;padding:7px 5px;min-height:38px}.scene-card small,.scene-card .icon{display:none}.explore-panel{padding:18px 14px}.panel-heading h2{font-size:24px}.panel-close{width:44px;height:44px;margin:-9px -8px 0 0}.panel-close .icon{width:20px;height:20px}.panel-tabs{gap:24px;margin-bottom:16px}.panel-tabs button{font-size:12px;min-height:48px}.search-field input{font-size:12px;height:48px}.search-field{min-height:48px}.transcript-meta{font-size:9px}.panel-scroll{max-height:320px}.sentence-loop{min-width:44px;min-height:48px}.cue-button{padding:13px 8px}.cue-text{font-size:13px}.cue-time{font-size:10px}.workspace-foot{padding:9px 12px;gap:6px;font-size:6px;letter-spacing:.6px}.workspace-foot>div{gap:11px}.workspace-foot button{font-size:8px;gap:5px}.workspace-foot button>.icon{width:13px;height:13px}.moment-actions button{min-height:44px}.accent-button{min-height:48px;font-size:12px}.toast{left:10px;right:10px;bottom:59px;font-size:10px;padding:12px;gap:10px}.tv-mode .control-button{width:44px;height:48px}.tv-mode .primary-play{width:52px}.tv-mode .cue-text{font-size:15px}} @container vesper (max-width:350px){.transport{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.transport .skip:first-child{grid-column:1}.primary-play{grid-column:2;margin:0;justify-self:center}.transport .skip:nth-child(3){grid-column:3}.volume-controls{grid-column:4}.transport .rate-button{grid-column:5}.transport .captions-button{grid-column:1}.transport [data-action=bookmark]{grid-column:2}.transport [data-action=settings]{grid-column:4}.transport .fullscreen-button{grid-column:5}.control-button{width:100%;min-width:44px}.volume-controls .control-button{width:44px}.range-button>span{font-size:9px}.repeat-toggle{font-size:8px;padding-inline:6px}.loop-actions{gap:4px}.loop-actions>.control-button{min-width:28px;width:28px}.opening-play{top:43%;padding:10px 12px}.ribbon-heading{font-size:6px}.workspace-foot .playback-status{max-width:90px;line-height:1.7}.panel-tabs{gap:17px}.panel-tabs button{font-size:11px}} @media(max-width:800px){.page-shell{padding:0 24px}.site-header{height:84px;gap:20px}.header-note{display:none}.brand{font-size:18px;letter-spacing:2px;gap:9px}.brand svg{width:25px}.header-link{display:none}.mode-button{min-width:65px;font-size:11px;padding:8px 12px}.intro{padding:30px 0;gap:22px}.intro>p{font-size:10px;max-width:220px}h1{font-size:42px;letter-spacing:-1.7px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.idea{gap:40px;padding:45px 0}.idea h2{font-size:32px}.idea-title>.eyebrow{font-size:7px;letter-spacing:1px}.screening-label{font-size:7px;letter-spacing:.7px}.film-credit p,.film-credit>a{font-size:10px}footer{gap:18px;padding:26px 0}} @media(max-width:520px){.page-shell{padding:0 16px}.site-header{height:78px;gap:12px}.brand{font-size:15px;letter-spacing:1.6px;gap:7px}.brand svg{width:24px;height:24px}nav{padding:3px;gap:0}.mode-button{min-width:54px;padding:7px 9px;font-size:10px;min-height:40px}.intro{display:block;padding:28px 0 25px}h1{font-size:42px;letter-spacing:-2px}.intro>p{font-size:11px;max-width:none;margin:15px 0 0}.intro>p br{display:none}.intro .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:14px}.screening-label{font-size:6px;margin-bottom:12px}.screening-label b{margin-left:7px}.screening-label>span:last-child{font-size:6px;letter-spacing:.4px}.film-credit{align-items:flex-start;flex-direction:column;gap:15px;padding:22px 0}.film-credit h2{font-size:21px}.film-credit p{font-size:10px}.film-credit>a{font-size:10px}.idea{display:block;padding:37px 0}.idea h2{font-size:34px}.idea-title p{font-size:12px}.feature-notes{margin-top:30px}.feature-notes article:first-child{border-top:1px solid var(--line)}.feature-notes p{font-size:11px}.feature-notes h3{font-size:16px}footer{gap:15px;font-size:8px}footer>.footer-brand{width:100%;font-size:14px}footer>a:last-child{margin-left:0}dialog{padding:21px}dialog h2{font-size:31px}.setting-row{font-size:12px}dialog .dialog-top>.eyebrow{font-size:7px}} @media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}.buffering>span{animation:none;border-color:var(--accent)}}.calm *,.calm *:before,.calm *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important} @media(forced-colors:active){.vesper-player,.control-button,.range-button,.repeat-toggle,.search-field,.cue-button,.scene-card{border:1px solid CanvasText}.primary-play,.slider-track media-slider-fill,.slider-thumb{background:Highlight;color:HighlightText}.cue-button.active,.scene-card[aria-current=true]{outline:2px solid Highlight}.range-band{border-color:Highlight}button:focus-visible,[tabindex]:focus-visible{outline-color:Highlight}} @container vesper (max-width:560px){.transport{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;justify-items:center}.transport .skip:first-child{grid-column:1}.transport .primary-play{grid-column:2}.transport .skip:nth-child(3){grid-column:3}.transport .volume-controls{grid-column:4}.transport .rate-button{grid-column:5}.transport .captions-button{grid-column:1}.transport [data-action=bookmark]{grid-column:2}.transport [data-action=settings]{grid-column:4}.transport .fullscreen-button{grid-column:5}.transport-space{display:none}}@media(max-width:360px){.site-header{gap:8px}.brand{font-size:13px;letter-spacing:1px}.brand svg{width:22px}.mode-button{min-width:49px;font-size:9px;padding:7px 8px}} .media-preparing{display:none;position:absolute;inset:0;z-index:5;place-content:center;justify-items:center;gap:12px;background:#211d1ca8;color:#f4e8d2;pointer-events:none}.media-loading .media-preparing{display:grid}.media-preparing>span{width:28px;height:28px;border:2px solid #f4e8d255;border-top-color:var(--accent);border-radius:50%;animation:buffer-spin 1s linear infinite}.media-preparing p{font-size:12px;background:#211d1ce8;padding:10px 14px;border-radius:8px;margin:0}@media(prefers-reduced-motion:reduce){.media-preparing>span{animation:none;border-color:var(--accent)}} /* 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}} .demo-options{grid-template-columns:repeat(4,minmax(0,1fr))} .demo-chooser-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end} .brand-open{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel);color:var(--white);border-radius:9px;min-height:44px;padding:9px 14px;font-size:11px;white-space:nowrap} .brand-open:hover{border-color:var(--accent)}.brand-open .icon{width:17px;height:17px} .brand-dialog{max-width:660px;width:calc(100% - 28px);padding:28px;overflow:auto} .brand-dialog h2{font-size:32px;margin:18px 0 10px}.brand-dialog>p{margin-bottom:18px;font-size:12px} .brand-dialog .dialog-top .control-button{font-size:27px;width:44px;flex:none} .brand-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px} .brand-presets button{border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--white);padding:10px;min-height:44px;font-size:11px;text-align:left} .brand-presets button:hover{border-color:var(--accent)} .brand-name-field{display:block;font-size:12px;color:var(--muted);line-height:1.8} .brand-name-field input{display:block;width:100%;padding:11px 12px;margin:5px 0 14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--white);min-height:44px} .brand-colour-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:12px} .brand-colour-row>div{display:flex;align-items:center;gap:10px} .brand-colour-row input[type=color]{width:44px;height:44px;cursor:pointer;border:1px solid var(--line);background:var(--bg);padding:3px;border-radius:7px} .brand-colour-row input[type=text]{background:var(--bg);border:1px solid var(--line);border-radius:7px;font:12px ui-monospace,monospace;padding:10px;width:104px;min-height:44px;color:var(--white)} .brand-preview{background:var(--preview-surface);color:var(--preview-foreground);padding:16px;border:1px solid var(--line);border-radius:12px;margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center} .brand-preview-label{font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--preview-accent);overflow-wrap:anywhere} .brand-preview strong{font-size:13px;white-space:nowrap}.brand-preview small{grid-column:1/-1;font-size:11px} .brand-contrast{font-size:11px;line-height:1.8;min-height:20px;margin:10px 0 18px;color:var(--muted)} .brand-features{border:0;margin:0;padding:0;min-inline-size:0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px} .brand-features legend{padding:0 0 10px;font-size:13px;font-weight:500} .brand-features label{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;min-height:48px} .brand-features input{width:20px;height:20px;flex:none;accent-color:var(--accent);margin:0} .brand-note{font-size:10px;color:var(--muted);line-height:1.8;margin:18px 0} .brand-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:16px} .brand-actions .accent-button{font-size:12px}.brand-actions .text-button{min-height:44px} .workspace[data-dock] .control-desk{color:var(--rail-text,#fff8ef)} .workspace[data-dock] .control-desk .primary-play{color:var(--rail-text,#fff8ef)} .workspace[data-dock] .time-readout{color:var(--rail-text,#fff8ef)} .workspace[data-dock] media-slider-fill,.workspace[data-dock] .slider-thumb{background:var(--rail-text,#fff8ef)} .workspace[data-dock] .control-desk .control-button:hover{background:color-mix(in srgb,var(--rail-text) 13%,transparent);color:var(--rail-text)} .workspace[data-dock] .pin-button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1px var(--accent)} .workspace[data-dock] .pin-button[aria-pressed=true]:after{background:var(--accent)} .workspace[data-dock] .range-band{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent)} .workspace .cue-button.active,.workspace .chapter-card[aria-current=true]{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-color:color-mix(in srgb,var(--accent) 35%,var(--panel))} .workspace[data-dock] .playback-tools{background:var(--panel);border-color:var(--line);color:var(--white)} .workspace[data-feature-moments=false] [data-action=bookmark],.workspace[data-feature-loop=false] .loop-bar,.workspace[data-feature-loop=false] .sentence-loop,.workspace[data-feature-loop=false] .range-band,.workspace[data-feature-chapters=false] .scene-ribbon,.workspace[data-feature-chapters=false] .timeline-ticks,.workspace[data-feature-chapters=false] media-time-slider-chapter-title,.workspace[data-feature-speed=false] .rate-button,.workspace[data-feature-seek=false] .skip,.workspace[data-feature-pip=false] .pip-button,.workspace[data-feature-tv=false] [data-action=tv]{display:none!important} @media(max-width:900px){.demo-options{grid-template-columns:1fr 1fr}.demo-chooser-actions{gap:8px}.brand-dialog{padding:22px}} @media(max-width:560px){.demo-chooser-actions{justify-content:space-between;margin-top:8px}.brand-open{font-size:10px;padding:8px 11px}.brand-dialog{padding:20px}.brand-dialog h2{font-size:27px}.brand-features{grid-template-columns:1fr}.brand-features label{font-size:12px}.brand-colour-row{font-size:11px;gap:6px}.brand-colour-row>div{gap:6px}.brand-preview{grid-template-columns:1fr;gap:10px}.brand-preview small{grid-column:1}.brand-dialog>p{font-size:11px}.brand-presets button{font-size:10px}.brand-colour-row input[type=text]{width:95px}.brand-colour-row input[type=color]{width:40px}.brand-note{font-size:10px}} @media(forced-colors:active){.brand-preview,.brand-open,.brand-presets button,.brand-colour-row input,.brand-name-field input{border:1px solid CanvasText}.brand-preview{background:Canvas;color:CanvasText}.brand-preview-label{color:LinkText}} /* 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}} /* VESPER / edge-cut frames, open icons, a continuous timeline. */ @font-face{font-family:'Vesper Display';src:url('/assets/vesper-display.otf') format('opentype');font-weight:500;font-display:swap} .brand>span,.footer-brand,.viewer-brand,.eyebrow,.screening-label,.ribbon-heading{font-family:'Vesper Display','DM Sans',sans-serif;font-weight:500;letter-spacing:1.4px} .brand>span{font-size:25px;letter-spacing:3px}.viewer-brand{font-size:10px;letter-spacing:1.2px} .intro h1,.panel-heading h2{font-family:'Vesper Display','DM Sans',sans-serif;text-transform:uppercase;letter-spacing:-.5px;font-weight:500}.intro h1{font-size:clamp(31px,4.1vw,57px);line-height:1.15}.panel-heading h2{font-size:20px;line-height:1.25} #vesper-player .vesper-player{border-radius:24px 9px 24px 9px;border-color:#9bcddd3d} #vesper-player .film-shell{border-radius:23px 8px 0 0} #vesper-player .control-desk{display:flex;flex-direction:column;gap:2px;inset:auto 14px 14px;padding:7px 12px 9px;border-radius:22px 8px 22px 8px;border:1px solid var(--rail-edge);background:var(--rail-fallback);box-shadow:inset 0 1px 0 #ecfaff18,0 12px 35px #020d164d;isolation:isolate} @supports(backdrop-filter:blur(1px)){#vesper-player .control-desk{background:linear-gradient(130deg,#071b2c38,#102d3b2e),var(--rail-surface);backdrop-filter:blur(18px) saturate(120%)}} #vesper-player .rail-timeline{order:0;display:flex;align-items:center;gap:12px;width:100%;height:30px;min-width:0} #vesper-player .control-desk .time-readout{display:flex;min-width:34px;margin:0;padding:0;background:none;color:var(--rail-text);font-size:11px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.3px} #vesper-player .duration-time{justify-content:flex-end} #vesper-player .control-desk .time-slider{display:flex;align-items:center;flex:1;width:auto;height:30px;min-height:30px;min-width:30px;margin:0;background:none} #vesper-player .rail-timeline .slider-track{height:3px;border-radius:3px;background:#deedf333} #vesper-player .rail-timeline .slider-thumb{width:9px;height:9px;border:0;box-shadow:0 0 0 3px #bbddff16} #vesper-player .rail-timeline .timeline-ticks{background:none;opacity:.35} #vesper-player .rail-timeline .range-band{top:8px;height:14px} #vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .range-band[data-compact=true]:before{content:'A–B';left:50%;width:30px;translate:-50% 0} #vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .range-band[data-compact=true]:after{display:none} #vesper-player .transport{order:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0;width:100%;min-width:0;height:auto;flex:none} #vesper-player .rail-primary,#vesper-player .rail-actions{display:flex;align-items:center;gap:3px;flex:none} #vesper-player .rail-actions{margin-left:auto;gap:2px} #vesper-player :is(.control-desk,.playback-tools) .control-button{--button-tint:193 211 227;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;min-width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;color:color-mix(in srgb,rgb(var(--button-tint)),white 12%);transition:background .16s,color .16s,box-shadow .16s,translate .12s} #vesper-player :is(.control-desk,.playback-tools) .control-button:is(:hover,:focus-visible){background:rgb(var(--button-tint)/.17);box-shadow:inset 0 0 0 1px rgb(var(--button-tint)/.24);color:color-mix(in srgb,rgb(var(--button-tint)),white 35%)} #vesper-player :is(.control-desk,.playback-tools) .control-button:active:not(.dock-handle){translate:0 1px;background:rgb(var(--button-tint)/.25)} #vesper-player .control-desk .control-button .icon{width:23px;height:23px;filter:drop-shadow(0 1px 1px #06182480)} #vesper-player .control-desk .primary-play{width:48px;min-width:48px;height:48px;margin-inline:2px 5px;border-radius:50%;background:var(--accent);color:var(--ink);box-shadow:inset 0 1px 0 #fff5,0 3px 14px #99caff1c} #vesper-player .control-desk .primary-play:is(:hover,:focus-visible){background:color-mix(in srgb,var(--accent),white 14%);color:var(--ink);box-shadow:0 0 0 5px #9bcbff14} #vesper-player .control-desk .primary-play .icon{width:24px;height:24px} #vesper-player .control-desk media-mute-button{--button-tint:137 220 206} #vesper-player .control-desk .transcript-shortcut{--button-tint:198 177 241} #vesper-player :is(.control-desk,.playback-tools) [data-action=bookmark]{--button-tint:237 167 178} #vesper-player .control-desk .repeat-shortcut{--button-tint:158 220 185} #vesper-player :is(.control-desk,.playback-tools) :is(.captions-button,.extra-captions){--button-tint:161 192 231} #vesper-player .control-desk .pip-button{--button-tint:155 207 218} #vesper-player .control-desk .pin-button{--button-tint:229 190 133} #vesper-player .control-desk [data-action=tools]{--button-tint:184 203 223} #vesper-player .control-desk .fullscreen-button{--button-tint:209 224 236} #vesper-player .control-desk .dock-handle{--button-tint:161 185 199;width:32px;min-width:32px;margin-right:3px} #vesper-player .control-desk .dock-handle .icon{width:18px;opacity:.65} #vesper-player .control-desk .pin-button[aria-pressed=true]{background:#d7af7826;color:#f4ce97;box-shadow:inset 0 0 0 1px #d7af7859} #vesper-player .control-desk .pin-button[aria-pressed=true]:after{background:#edc78b;bottom:3px;width:3px;height:3px} #vesper-player .workspace[data-loop-enabled=true] .repeat-shortcut{background:#a5c6ae24;color:#b9ecd0;box-shadow:inset 0 0 0 1px #a5c6ae59} #vesper-player .volume-controls{display:flex;align-items:center;gap:3px;margin:0} #vesper-player .volume-slider{display:block;width:54px;margin:0 7px 0 0;height:32px} #vesper-player .volume-slider .slider-track{height:3px;background:#dfedf32b} #vesper-player .rail-options{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:16px;flex:none;margin:0;padding:0 0 0 17px;border:0;border-left:1px solid #def2ff24} #vesper-player .rail-select{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:44px;min-width:68px;margin:0;padding:3px 0;border:0;border-radius:6px;background:transparent;color:#f3f8fb} #vesper-player .rail-select>span{font-family:'Vesper Display','DM Sans',sans-serif;text-transform:uppercase;display:block;color:#e1edf5;font-size:10px;line-height:1.4;letter-spacing:1px} #vesper-player .rail-select select{display:block;appearance:auto;width:100%;max-width:80px;min-width:58px;min-height:25px;margin:0;padding:0 2px 0 0;background:transparent;border:0;border-radius:3px;color:#f4f8fc;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.2px;cursor:pointer} #vesper-player .rail-select:hover{background:#def0ff0b} #vesper-player .rail-select:focus-within{outline:2px solid #b9d9ff;outline-offset:4px} #vesper-player .rail-select option{background:#18313f;color:#f4f8fc} #vesper-player .quality-status{position:absolute;inset:auto 10px calc(100% + 8px) auto;max-width:220px;margin:0;padding:9px 13px;background:#122a38f2;border:1px solid #c5e7f62b;border-radius:12px 4px 12px 4px;color:#ecf6ff;font-size:11px} #vesper-player .rail-chapter{display:none} #vesper-player .workspace[data-dock=top] .control-desk{inset:14px 14px auto} #vesper-player .workspace[data-dock=top] .film-top{top:126px} #vesper-player .workspace[data-dock=top] .playback-tools{top:130px} #vesper-player .playback-tools{border-radius:20px 7px 20px 7px;border-color:#accddb45;box-shadow:0 18px 55px #0006;padding:14px 18px} #vesper-player .playback-tools .rate-button{width:auto;padding-inline:12px} #vesper-player .playback-tools .tools-heading{padding-bottom:8px;border-color:#c7e1ee1f} #vesper-player .playback-tools .current-chapter{font-family:'Vesper Display','DM Sans',sans-serif;font-size:10px;letter-spacing:1px;color:#b9cedc} #vesper-player .playback-tools :is(.range-button,.repeat-toggle){border-radius:11px 4px 11px 4px;border-color:#bbd5c933;background:#d5eee009} #vesper-player :is(.control-desk,.playback-tools) :focus-visible{outline:2px solid #b9d9ff;outline-offset:4px} #vesper-player .workspace[data-feature-transcript=false] .transcript-shortcut,#vesper-player .workspace[data-feature-loop=false] .repeat-shortcut,#vesper-player .workspace[data-feature-speed=false] .speed-control{display:none} @container film (max-width:1100px){#vesper-player .volume-slider{display:none}#vesper-player .control-desk .pip-button{display:none}#vesper-player .transport{gap:10px}} @container film (max-width:880px){#vesper-player .control-desk .captions-button{display:none}#vesper-player .rail-options{gap:12px;padding-left:12px}#vesper-player .rail-select{min-width:61px}} @container film (min-width:641px){#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-shortcut{display:inline-flex}} @container film (max-width:640px){ #vesper-player .control-desk{inset:auto 6px 8px;padding:5px 5px 7px;border-radius:18px 6px 18px 6px;gap:2px} #vesper-player .workspace[data-dock=top] .control-desk{inset:8px 6px auto} #vesper-player .rail-timeline{height:36px;gap:8px} #vesper-player .control-desk .time-slider{height:36px;min-height:36px} #vesper-player .control-desk .time-readout{font-size:10px;min-width:28px} #vesper-player .rail-timeline .range-band{top:11px} #vesper-player .transport{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));grid-template-rows:48px 44px;gap:0;justify-items:center;align-items:center} #vesper-player .rail-primary,#vesper-player .rail-actions{display:contents} #vesper-player .control-desk .rail-shortcut,#vesper-player .control-desk .captions-button,#vesper-player .control-desk .pip-button{display:none} #vesper-player .control-desk .dock-handle{grid-column:1;grid-row:1;width:44px;min-width:44px;margin:0} #vesper-player .control-desk .primary-play{grid-column:2;grid-row:1;width:44px;min-width:44px;height:44px;margin:0} #vesper-player .volume-controls{grid-column:3;grid-row:1} #vesper-player .pin-button{grid-column:4;grid-row:1} #vesper-player [data-action=tools]{grid-column:5;grid-row:1} #vesper-player .fullscreen-button{grid-column:6;grid-row:1} #vesper-player .rail-options{grid-column:1/7;grid-row:2;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:28px;width:100%;height:44px;padding:0;border:0;margin:0} #vesper-player .rail-select{flex-direction:row;align-items:center;gap:8px;min-height:44px;min-width:0;padding:0} #vesper-player .rail-select>span{font-size:9px} #vesper-player .rail-select select{min-height:44px;min-width:52px;width:58px;font-size:11px} #vesper-player .workspace[data-dock=top] .film-top{top:158px} #vesper-player .workspace[data-dock=top] .playback-tools{top:162px} } @container film (max-width:300px){#vesper-player .control-desk{left:2px;right:2px;padding-inline:0}#vesper-player .rail-timeline{padding-inline:6px}} /* In side docking, the same groups become a compact vertical instrument. */ #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .control-desk{inset:12px auto 12px 12px;width:70px;padding:7px 10px;gap:4px;display:flex;flex-direction:column;border-radius:20px 7px 20px 7px} #vesper-player .workspace[data-dock=right] .control-desk{inset:12px 12px 12px auto} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .film-shell{min-height:520px} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .transport{display:contents} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-primary{order:0;display:flex;flex-direction:column;gap:3px} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-primary .dock-handle{width:44px;min-width:44px;margin:0} #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-timeline{order:1;display:flex;flex:1;flex-direction:column;gap:6px;height:auto;min-height:70px} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-timeline .time-slider{flex:1;justify-content:center;width:44px;height:auto;min-height:50px;min-width:0;margin:0} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-track{height:100%;width:3px} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-actions{order:2;display:flex;flex-direction:column;gap:2px;margin:0} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) :is(.rail-shortcut,.duration-time,.volume-slider,.captions-button,.pip-button){display:none} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-options{order:3;display:flex;flex-direction:column;gap:0;width:44px;height:auto;padding:3px 0 0;margin:0;border:0;border-top:1px solid #d9ebf426} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-select{display:flex;flex-direction:column;gap:0;justify-content:center;width:44px;min-width:0;min-height:44px;padding:0} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-select>span{display:none} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .rail-select select{display:block;appearance:none;min-width:0;width:44px;min-height:44px;font-size:11px;text-align:center;padding:0} #vesper-player .workspace[data-dock=left] .film-top{left:96px;top:14px}#vesper-player .workspace[data-dock=right] .film-top{right:96px;top:14px} #vesper-player .workspace[data-dock=left] .playback-tools{left:92px;width:min(470px,calc(100% - 104px));top:14px}#vesper-player .workspace[data-dock=right] .playback-tools{right:92px;left:auto;width:min(470px,calc(100% - 104px));top:14px} #vesper-player .workspace.tv-mode .control-desk .control-button{width:56px;min-width:56px;height:56px} #vesper-player .workspace.tv-mode:is([data-dock=left],[data-dock=right]) .control-desk{width:82px} #vesper-player .workspace.tv-mode:is([data-dock=left],[data-dock=right]) .film-shell{min-height:670px} @container film (max-width:1000px){#vesper-player .workspace.tv-mode .rail-shortcut{display:none}} @container film (max-width:640px){#vesper-player .workspace.tv-mode .control-desk .control-button{width:44px;min-width:44px;height:44px}} @media(prefers-reduced-motion:reduce){#vesper-player .control-button{transition:none}} #vesper-player .workspace.calm .control-button{transition:none} #vesper-player .workspace.higher-contrast .control-desk{background:#102937;backdrop-filter:none;border-color:#d3e9f4} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#vesper-player .control-desk{background:#102937;backdrop-filter:none;border-color:#d3e9f4}} @media(forced-colors:active){#vesper-player .control-desk{background:Canvas;color:CanvasText;backdrop-filter:none;border-color:CanvasText}#vesper-player :is(.control-desk,.playback-tools) .control-button{color:ButtonText;background:ButtonFace;box-shadow:none}#vesper-player .control-desk .pin-button[aria-pressed=true],#vesper-player .control-desk .primary-play{background:Highlight;color:HighlightText}#vesper-player .rail-select{color:CanvasText}#vesper-player .rail-select select{color:CanvasText;background:Canvas}#vesper-player .rail-timeline .slider-thumb,#vesper-player .rail-timeline media-slider-fill{background:Highlight}} /* 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} } /* 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}} /* Sound Wing: a tapered level indicator on the native linear volume slider. */ #vesper-player .volume-slider{--sound-color:var(--accent);--wing-fill:var(--media-slider-fill,100%);position:relative;width:54px;height:44px;min-height:44px;margin-right:7px} #vesper-player .volume-slider[data-dragging]{--wing-fill:var(--media-slider-pointer,0%)} #vesper-player .volume-slider .slider-track{visibility:hidden} #vesper-player .volume-wing{position:absolute;inset:0;pointer-events:none;color:var(--sound-color)} #vesper-player .volume-wing>svg{opacity:.22} #vesper-player .volume-wing svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none} #vesper-player .volume-wing>span{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--wing-fill)) 0 0)} #vesper-player .volume-wing>span>svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--sound-color) 15%,transparent))} #vesper-player .volume-slider .slider-thumb{left:var(--wing-fill);top:50%;width:5px;height:20px;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 .volume-level{position:absolute;left:var(--wing-fill);bottom:calc(100% - 1px);translate:-50% 0;z-index:5;padding:5px 7px;min-width:34px;border-radius:7px;background:var(--panel);border:1px solid #bbd8eb30;color:var(--white);font-size:10px;line-height:1.2;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none} #vesper-player .volume-slider:is(:hover,:focus-within,[data-dragging]) .volume-level{opacity:1;visibility:visible} @container film (min-width:760px){#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .volume-slider{display:block}} #vesper-player .workspace.tv-mode .volume-slider{display:none} #vesper-player .volume-slider[hidden],#vesper-player .volume-slider[data-hidden]{display:none!important} #vesper-player .workspace.higher-contrast .volume-wing>span>svg{filter:none} @media(prefers-contrast:more),(forced-colors:active){ #vesper-player .volume-wing{display:none} #vesper-player .volume-slider .slider-track{visibility:visible} #vesper-player .volume-slider .slider-thumb{background:Highlight;border-color:Highlight;box-shadow:none} #vesper-player .volume-level{color:CanvasText;background:Canvas;border-color:CanvasText} } /* The image is a native Video.js storyboard thumbnail, never a second player. */ #vesper-player .time-slider .slider-preview{ --frame-width:168px;display:none;position:absolute;width:var(--frame-width);min-width:0;padding:4px; left:clamp(calc(var(--frame-width)/2),var(--media-slider-pointer),calc(100% - var(--frame-width)/2))!important; bottom:calc(100% + 9px);top:auto;transform:translateX(-50%);margin:0;border:1px solid #b8d7ea40;border-radius:12px; background:var(--panel);color:var(--white);box-shadow:0 9px 24px #02081073;font-size:10px;line-height:1.4; pointer-events:none;z-index:12;overflow:hidden; } #vesper-player .time-slider .frame-thumbnail{display:block;width:160px;height:90px;min-width:0;max-width:160px;max-height:90px;border-radius:8px;background:#08131e;overflow:hidden} #vesper-player .frame-thumbnail>img{display:block;max-width:none} #vesper-player .frame-thumbnail[data-loading]>img{opacity:0} #vesper-player .frame-thumbnail:is([data-error],[data-hidden]){display:none} #vesper-player .preview-caption{display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:25px;padding:4px 4px 1px} #vesper-player .preview-caption media-time-slider-chapter-title{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:9px;text-align:left} #vesper-player .preview-caption media-slider-value{display:block;flex:none;margin-left:auto;color:var(--white);font-size:10px;font-variant-numeric:tabular-nums} @media(hover:hover){#vesper-player .time-slider:hover .slider-preview{display:block}} #vesper-player .time-slider:is([data-dragging],[data-preview-keyboard=true]) .slider-preview{display:block} #vesper-player .workspace[data-dock=top] .time-slider .slider-preview{bottom:auto;top:calc(100% + 60px)} @container film (max-width:640px){ #vesper-player .time-slider .slider-preview{--frame-width:136px;border-radius:10px} #vesper-player .time-slider .frame-thumbnail{width:128px;height:72px;max-width:128px;max-height:72px;border-radius:6px} #vesper-player .preview-caption{gap:4px;padding-inline:2px} #vesper-player .preview-caption media-time-slider-chapter-title{font-size:8px} #vesper-player .workspace[data-dock=top] .time-slider .slider-preview{top:calc(100% + 104px)} } /* Side-docked cards open inward, away from the outer edge of the player. */ #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider .slider-preview{display:none;top:auto;bottom:clamp(62px,var(--media-slider-pointer),calc(100% - 62px));transform:translateY(50%)} #vesper-player .workspace[data-dock=left] .time-slider .slider-preview{left:calc(100% + 14px)!important;right:auto} #vesper-player .workspace[data-dock=right] .time-slider .slider-preview{left:auto!important;right:calc(100% + 14px)} @media(hover:hover){#vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider:hover .slider-preview{display:block}} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .time-slider:is([data-dragging],[data-preview-keyboard=true]) .slider-preview{display:block} /* Override the former text-only focus tooltip: pointer leave closes the card. */ #vesper-player .time-slider:not(:hover):not([data-dragging]):not([data-preview-keyboard=true]) .slider-preview{display:none} @media(hover:none){#vesper-player .time-slider:not([data-dragging]):not([data-preview-keyboard=true]) .slider-preview{display:none}} @media(forced-colors:active){#vesper-player .time-slider .slider-preview{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}} /* VESPER / one material, distinct tools. Geometry and media remain native. */ body{background:radial-gradient(ellipse 900px 620px at 50% 0%,#193b5429,transparent 75%),var(--bg)} .site-header nav{padding:4px;border:1px solid #a2c8df21;border-radius:999px;background:linear-gradient(145deg,#83bce010,#132333a6);box-shadow:inset 0 1px 1px #8fbdd51a} .site-header nav .mode-button{border-radius:999px;transition:background .18s,color .18s,box-shadow .18s} .site-header nav .mode-button.active{background:linear-gradient(150deg,#9bcbff24,#689fd90c);box-shadow:inset 0 0 0 1px #9bcbff26;color:var(--accent)} .intro h1{letter-spacing:-.7px;line-height:1.14} .intro>p{font-size:13px;line-height:1.8} #vesper-player .vesper-player{border-color:#8db8d52b;box-shadow:0 24px 70px #02081066} #vesper-player .opening-play{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:nowrap;gap:12px;min-width:160px;max-width:80%;padding:16px;background:none;color:#e8f2fa;border:0;border-radius:18px;box-shadow:none;text-shadow:0 2px 10px #02081099} #vesper-player .opening-play[hidden]{display:none} #vesper-player .opening-disc{display:grid;place-items:center;width:72px;height:72px;border:1px solid #b4e6ff;border-radius:50%;background:linear-gradient(175deg,color-mix(in srgb,var(--accent) 94%,#d0efff),color-mix(in srgb,var(--accent) 68%,#2195ef) 52%,color-mix(in srgb,var(--accent) 80%,#66caff));box-shadow:inset 0 1px 2px #e5f7ffe6,inset 0 -3px 5px #08639d66,0 3px 0 #082b4580,0 0 0 2px #6ebeff26,0 0 16px #38a7ff59,0 10px 22px #02081040;backdrop-filter:blur(9px);color:#082640;transition:background .18s,border-color .18s,box-shadow .18s} #vesper-player .opening-disc .icon{width:27px;height:27px;translate:1px 0;filter:none} #vesper-player .opening-play>span:not(.opening-disc){font-family:'Vesper Display','DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.8px;line-height:1.5} #vesper-player .opening-play>small{width:auto;font-size:8px;letter-spacing:1.2px;line-height:1.5;color:#b9cedd} #vesper-player .opening-play:hover{background:none;color:#e8f2fa} #vesper-player .opening-play:hover .opening-disc{border-color:#effaff;filter:brightness(1.07)} #vesper-player .opening-play:active .opening-disc{translate:0 1px;box-shadow:inset 0 1px 3px #020b194d,0 1px 0 #06142266,0 4px 10px #02081040} /* Quality and speed share one recessed instrument surface, not two cards. */ #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options{gap:0;padding:0 5px;border:1px solid #9ebed91f;border-radius:16px;background:linear-gradient(150deg,#030b152e,#142b3c12);box-shadow:inset 0 1px 3px #020a1929,0 1px 0 #a2c5dd0d;transition:border-color .18s,background .18s} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select{position:relative;min-width:62px;border-radius:11px;background:none;box-shadow:none;padding:3px 5px;transition:background .18s} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select>span{padding:0;font-size:9.5px;letter-spacing:.5px;color:#b6cddd} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select select{padding-inline:0;font-size:13px;min-width:52px;font-variant-numeric:tabular-nums} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select:hover{background:#9fc6e20a;box-shadow:none} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .speed-control{padding-left:10px;margin-left:5px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .speed-control::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:1px;background:linear-gradient(transparent,#abc7d829,transparent);pointer-events:none} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-options:focus-within{border-color:#a9cee95c} @container film (max-width:640px){ #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options{width:calc(100% - 18px);height:44px;border:0;border-radius:15px;gap:0;padding:0 6px;box-shadow:inset 0 0 0 1px #9ebed91f,inset 0 1px 3px #020a1929} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select{flex:1;justify-content:center;gap:7px;min-width:0;padding:0 4px;min-height:44px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .speed-control{margin-left:3px;padding-left:8px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select>span{font-size:9px;letter-spacing:.3px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .rail-select select{font-size:12px;min-height:44px} } /* A contact sheet of actual chapters, with readable image-backed labels. */ @container film (min-width:980px){ #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .rail-select{min-width:74px;min-height:54px;gap:3px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .rail-select>span{font-size:11px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .rail-select select{font-size:17px;min-height:28px} } #vesper-player .scene-ribbon{padding:20px;background:linear-gradient(180deg,#162a3d1a,transparent),var(--bg);border-color:#9fc5dc1a} #vesper-player .ribbon-heading{font-size:9px;letter-spacing:1px;margin-bottom:13px;color:var(--muted)} #vesper-player .ribbon-cards{gap:11px} #vesper-player .scene-card{position:relative;display:block;aspect-ratio:2.1;min-width:0;padding:0;isolation:isolate;border:1px solid #9abdd52e;border-radius:12px;background:#101c28;box-shadow:0 4px 12px #02081026;transition:border-color .18s,box-shadow .18s} #vesper-player .scene-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #vesper-player .scene-card::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#02081008 20%,#02081042 48%,#020810e8 100%);pointer-events:none} #vesper-player .scene-card>span{position:absolute;inset:auto 0 0;z-index:2;display:flex;align-items:center;gap:7px;min-height:38px;padding:10px 11px 12px;font-size:12px;line-height:1.45;color:#edf4fa;white-space:normal} #vesper-player .scene-card small{display:inline;flex:none;font-family:'DM Sans',sans-serif;font-size:9px;color:#bed0dd;letter-spacing:.3px} #vesper-player .scene-card .icon{display:block;width:13px;height:13px;flex:none;margin-left:auto;color:#c2d8e7} #vesper-player .scene-time{position:absolute;z-index:2;right:8px;top:8px;padding:3px 6px;border:1px solid #b2d2e126;border-radius:6px;background:#0c1c2b99;color:#dbeaf4;font-size:10px;font-weight:500;line-height:1.4;font-variant-numeric:tabular-nums} #vesper-player .scene-card::after{content:'';position:absolute;z-index:3;left:11px;right:11px;bottom:0;height:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .18s;pointer-events:none} #vesper-player .scene-card:hover{border-color:#a8cce07a;box-shadow:0 5px 14px #02081040} #vesper-player .scene-card[aria-current=true]{border-color:color-mix(in srgb,var(--accent) 65%,transparent)} #vesper-player .scene-card[aria-current=true]::after{opacity:1} #vesper-player .scene-card[aria-current=true]>span,#vesper-player .scene-card[aria-current=true] small{color:#edf4fa} #vesper-player .scene-card[aria-current=true] .scene-time{background:color-mix(in srgb,var(--accent) 18%,#0c1c2b);border-color:color-mix(in srgb,var(--accent) 42%,transparent);color:var(--accent)} /* Search, saved frames and wayfinding share one editorial workspace. */ #vesper-player .explore-panel{container-type:inline-size;container-name:explore;padding:22px} #vesper-player .panel-heading{gap:12px;margin-bottom:17px} #vesper-player .panel-heading h2{font-size:24px;line-height:1.25;letter-spacing:-.25px} #vesper-player .panel-heading .panel-close{opacity:.8} #vesper-player .panel-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;border:0;border-bottom:1px solid #a2c6db45;background:none;border-radius:0;padding:0;margin-bottom:18px} #vesper-player .panel-tabs button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:6px 2px;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:11.5px;line-height:1.4;letter-spacing:0;color:var(--muted);transition:background .18s,color .18s,border-color .18s} #vesper-player .panel-tabs button>.icon{display:none} #vesper-player .panel-tabs button[aria-selected=true]{background:none;box-shadow:none;border-bottom-color:#c3a7eb;color:#d7c0fa} #vesper-player .panel-tabs [data-tab=transcript]{--tab-tone:#c3a7eb} #vesper-player .panel-tabs [data-tab=moments]{--tab-tone:#eda7c6} #vesper-player .panel-tabs [data-tab=chapters]{--tab-tone:#a3d4f5} #vesper-player .panel-tabs button[aria-selected=true]{border-bottom-color:var(--tab-tone);color:color-mix(in srgb,var(--tab-tone) 85%,#fff)} #vesper-player .panel-tabs button:hover{background:color-mix(in srgb,var(--tab-tone) 6%,transparent);color:color-mix(in srgb,var(--tab-tone) 85%,#fff)} #vesper-player .panel-tabs button:focus-visible{outline:2px solid var(--tab-tone);outline-offset:-4px;border-radius:7px} #vesper-player .bookmark-count{font-size:9px;min-width:15px;padding:1px 4px;border-radius:4px;background:#d1e3ec1a;color:var(--white)} #vesper-player .search-field{min-height:46px;padding-inline:13px;border-radius:12px;border-color:#9bc1d32b;background:#05121d4d;box-shadow:inset 0 1px 4px #01081033} #vesper-player .search-field:focus-within{border-color:#b5a1dc80;box-shadow:inset 0 0 0 1px #b5a1dc24} #vesper-player .search-field input{height:44px;font-size:12px;line-height:1.5} #vesper-player .search-field input::placeholder{color:#bdcad6} #vesper-player .transcript-meta{padding:13px 2px;font-size:10px;line-height:1.5;color:var(--muted)} #vesper-player .transcript-meta input{accent-color:#c2a3e8} #vesper-player .transcript-lines{scrollbar-width:thin;scrollbar-color:#7795ab40 transparent} #vesper-player .transcript-row{position:relative;gap:3px;margin-bottom:5px;border-radius:12px} #vesper-player .cue-button{min-height:66px;padding:12px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--muted);transition:background .18s,border-color .18s,color .18s} #vesper-player .cue-time{font-size:10px;letter-spacing:.3px;color:#a3bdcd;font-variant-numeric:tabular-nums} #vesper-player .cue-text{font-size:13px;line-height:1.65;margin-top:4px;color:color-mix(in srgb,var(--white) 82%,var(--muted))} #vesper-player .cue-button:hover{background:#a8b7d00a;color:var(--white)} #vesper-player .cue-button.active{background:linear-gradient(100deg,#ac88d71a,#ac88d706);border-color:#b19ad438;color:var(--white);box-shadow:inset 2px 0 0 #ba9bdd80} #vesper-player .cue-button.active .cue-time{color:#d0b4ed} #vesper-player .sentence-loop{border-radius:9px;color:#8ebbb0;transition:color .18s,background .18s} #vesper-player .sentence-loop:hover{background:#80d2bd12;color:#a8ead8} #vesper-player .panel-tip{padding-top:15px;margin-top:14px;border-color:#9fc5dc1a;font-size:10px;line-height:1.7;color:var(--muted)} #vesper-player .panel-message{margin:12px 0;padding:20px 16px;border:1px solid #9db9d51a;border-radius:12px;background:#13253633;font-size:12px;line-height:1.8} #vesper-player .moment-card{padding:0;margin-bottom:12px;border:1px solid #c69db82b;border-radius:13px;background:linear-gradient(135deg,#edb0ca08,#09172433);overflow:hidden} #vesper-player .moment-jump{display:grid;grid-template-columns:88px minmax(0,1fr) 16px;grid-template-rows:auto auto;align-items:center;column-gap:11px;row-gap:4px;padding:12px;border-radius:12px} #vesper-player .moment-frame{display:block;grid-column:1;grid-row:1/3;width:88px;height:49.5px;max-width:88px;max-height:49.5px;border-radius:7px;background:#08131e;overflow:hidden} #vesper-player .moment-frame>img{display:block;max-width:none} #vesper-player .moment-frame[data-loading]>img{opacity:0} #vesper-player .moment-jump>span{grid-column:2;grid-row:1;font-size:11px;color:#eab0c6;font-variant-numeric:tabular-nums} #vesper-player .moment-jump strong{grid-column:2;grid-row:2;font-size:13px;line-height:1.5;font-weight:400} #vesper-player .moment-jump>.icon{grid-column:3;grid-row:1/3;width:14px;height:14px;color:#c7afc2} #vesper-player .moment-jump:hover{background:#d7a8c00b} #vesper-player .moment-actions{gap:18px;margin:0 12px;padding-top:4px;border-top:1px solid #c7a8ba12} #vesper-player .moment-actions button{font-size:10px;min-height:40px;color:var(--muted)} #vesper-player .rename-form{padding:12px} #vesper-player .rename-form input{min-height:44px;border-radius:9px;border-color:#c4a6bf33} #vesper-player .storage-status{margin:12px 0 18px;font-size:9px;letter-spacing:.2px} #vesper-player .empty-state{padding:38px 12px;border:1px solid #b6a5ba1a;border-radius:14px;background:linear-gradient(160deg,#c5a4d008,transparent)} #vesper-player .empty-state>.icon{color:#d3a8c2} #vesper-player .empty-state h3{font-size:16px;line-height:1.5} #vesper-player .empty-state p{font-size:11px;line-height:1.85} #vesper-player .chapter-card{padding:10px;margin-bottom:9px;border-radius:12px;border-color:#9cbbd01a;background:#1021311f;gap:12px} #vesper-player .chapter-card img{width:86px;height:54px;border-radius:7px} #vesper-player .chapter-card small{font-size:10px;letter-spacing:.3px} #vesper-player .chapter-card strong{font-size:13px;line-height:1.45;margin-top:5px} #vesper-player .chapter-card[aria-current=true]{border-color:#96bfd052;background:#87b3cc0c} #vesper-player .chapter-card[aria-current=true] small{color:#b9d9e8} #vesper-player :is(.time-readout,.cue-time,.scene-time,.moment-jump>span,.volume-level){font-variant-numeric:tabular-nums lining-nums} #vesper-player :is(.scene-card,.moment-card,.chapter-card){box-shadow:inset 0 1px 0 #d1e7f00a,0 3px 10px #0208101a} #vesper-player .scene-card[aria-current=true]{box-shadow:inset 0 1px 0 #d1e7f014,0 3px 10px #02081026} #vesper-player .workspace-foot{border-color:#9fc5dc1a;padding-block:10px;font-size:8px;letter-spacing:1px} #vesper-player .workspace-foot button{font-size:10px} @container vesper (min-width:1200px){ #vesper-player .workspace:not(.watch-only){grid-template-columns:minmax(0,1fr) 360px} #vesper-player .panel-tabs button{font-size:13px} #vesper-player .search-field input{font-size:14px} #vesper-player .cue-text{font-size:14px;line-height:1.7} #vesper-player .cue-time{font-size:11px} #vesper-player .panel-tip p{font-size:11px} } @container explore (max-width:245px){#vesper-player .panel-tabs button>.icon{display:none}#vesper-player .moment-jump{grid-template-columns:68px minmax(0,1fr) 14px;column-gap:9px}#vesper-player .moment-frame{width:68px;height:38.25px;max-width:68px;max-height:38.25px}} /* A repeat range reads as one instrument, rather than unrelated fields. */ #vesper-player .playback-tools{container-type:inline-size;container-name:toolbox;padding:18px 20px;border-radius:23px;border-color:#98bed636;scrollbar-width:thin;scrollbar-color:#7795ab40 transparent} #vesper-player .workspace[data-dock=bottom] .playback-tools{top:14px;max-height:var(--tools-room,190px)} #vesper-player .workspace[data-dock=top] .playback-tools{top:var(--tools-top,180px);max-height:var(--tools-room,190px)} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .playback-tools{max-height:calc(var(--film-height,520px) - 28px)} #vesper-player .workspace[data-dock=right] .playback-tools{left:auto;right:calc(100% - var(--film-width,100%) + 92px);width:min(470px,calc(var(--film-width,100%) - 104px))} #vesper-player .workspace[data-tools-mode=repeat] .playback-tools .extra-transport{display:none} #vesper-player .tools-heading{padding-bottom:12px;margin-bottom:5px;border-color:#a9c5d31a} #vesper-player .extra-transport{gap:5px;padding-block:5px 12px} #vesper-player .loop-bar{position:relative;border-color:#9ccaba1f;padding-top:17px} #vesper-player .loop-heading{margin-bottom:14px;gap:11px} #vesper-player .loop-heading>.icon{color:#8cd4bd} #vesper-player .loop-heading strong{font-size:12px;font-weight:500;letter-spacing:.2px} #vesper-player .loop-description{font-size:10px;line-height:1.6;color:var(--muted)} #vesper-player .loop-actions{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px} #vesper-player .range-connector{display:none} #vesper-player .playback-tools .range-button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:52px;padding:8px 11px;border:1px solid #a2c9d82b;border-radius:10px;background:linear-gradient(145deg,#84bada0a,#08172529);font-size:10px;line-height:1.5;color:#a4c8de} #vesper-player .range-button[data-action=set-b]{border-color:#bea7d22b;color:#cfb1e0} #vesper-player .range-button>span{display:block;font-size:12px;font-variant-numeric:tabular-nums;color:var(--white)} #vesper-player .playback-tools .repeat-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:52px;padding:8px 5px;border:1px solid #94c7b72b;border-radius:10px;background:#7fbca40a;font-size:11px;line-height:1.4;white-space:normal} #vesper-player .repeat-toggle[aria-pressed=true]{background:#85d4b81c;border-color:#96dfc559;color:#b7efda} #vesper-player .repeat-toggle .switch-dot{width:5px;height:5px;flex:none} #vesper-player .loop-actions>[data-action=clear-loop]{position:absolute;right:0;top:8px;width:32px;min-width:32px;height:32px} #vesper-player .loop-heading>div{padding-right:30px} #vesper-player .workspace[data-tools-mode=repeat] .loop-bar{border-top:0;padding-top:9px} #vesper-player .workspace[data-tools-mode=repeat] .loop-actions>[data-action=clear-loop]{top:0} @container toolbox (max-width:240px){#vesper-player .loop-actions{grid-template-columns:1fr 1fr}#vesper-player .repeat-toggle{grid-column:1/-1}#vesper-player .extra-transport>.text-button{flex-basis:100%}} #vesper-player .playback-tools button:disabled{opacity:.42;cursor:default} #vesper-player .time-slider .slider-preview{border-color:#9cc6df42;box-shadow:inset 0 1px 1px #7eb4d21a,0 10px 24px #02081080} /* Preference dialogs and the content library belong to the same material. */ #vesper-player dialog{border:1px solid #93bad345;border-radius:24px;background:linear-gradient(140deg,#25425a1a,transparent 55%),var(--panel);box-shadow:inset 0 1px 1px #96bad329,0 26px 80px #010610b3;padding:26px} #vesper-player dialog::backdrop{background:#030b14b8;backdrop-filter:blur(8px)} #vesper-player dialog h2{font-family:'Vesper Display','DM Sans',sans-serif;font-weight:500;font-size:30px;letter-spacing:-.4px;line-height:1.2;margin-top:22px} #vesper-player dialog>p{font-size:12px;line-height:1.8} #vesper-player .setting-row{padding:16px 0;border-color:#91b6ce21;font-size:12px} #vesper-player .setting-row select{min-height:44px;padding:9px 11px;border-radius:10px;background:#0715244d;border-color:#9fbfd233} #vesper-player .setting-row input{accent-color:var(--accent)} #vesper-player .dialog-note{font-size:11px!important;line-height:1.8!important} #vesper-player .accent-button{min-height:44px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:11px;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#244b6c));box-shadow:inset 0 -2px 2px #1a416126,0 3px 8px #0208101f;font-size:12px;letter-spacing:.1px;transition:background .18s,box-shadow .18s} #vesper-player .accent-button:hover{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 90%,#c4e5ff),var(--accent))} #vesper-player .position-choices button{border-radius:14px;background:linear-gradient(150deg,#9ec6e009,#09172533);border-color:#9ec6e026} #vesper-player .position-choices button[aria-pressed=true]{background:#8bbfe914;border-color:#a3c9e066} #vesper-player .position-mini{background:#081624;border:1px solid #9fbfd529;border-radius:8px} #vesper-player .position-mini i{background:linear-gradient(110deg,#537aa380,#213e5966);border:1px solid #b4d7e34d;border-radius:4px} .demo-chooser .demo-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .demo-chooser .demo-option{position:relative;overflow:hidden;padding:0;border:1px solid #9cbcd32b;border-radius:14px;background:linear-gradient(155deg,#263e5214,#0c172133);transition:border-color .18s,background .18s} .demo-option>img{display:block;width:100%;aspect-ratio:1.85;object-fit:cover;opacity:.85} .demo-chooser .demo-option>span{margin:12px 14px 7px;color:var(--muted);font-size:9px;line-height:1.5;letter-spacing:.2px} .demo-chooser .demo-option>strong{margin:0 14px;font-size:14px;line-height:1.45;font-weight:500} .demo-chooser .demo-option>small{margin:8px 14px 14px;font-size:9px;line-height:1.65} .demo-chooser .demo-option:hover{border-color:#9fc9e366;background:#92bee30a} .demo-chooser .demo-option[aria-current=true]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:#8db8e50a;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 45%,transparent)} @media(max-width:820px){.demo-chooser .demo-options{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.demo-chooser .demo-options{gap:9px}.demo-chooser .demo-option>span{margin:10px 10px 6px;font-size:8px}.demo-chooser .demo-option>strong{margin-inline:10px;font-size:12px}.demo-chooser .demo-option>small{margin:7px 10px 11px;font-size:8px}} @container film (max-width:640px){ #vesper-player .opening-disc{width:60px;height:60px} #vesper-player .opening-play{gap:9px;padding:12px} } @container vesper (max-width:640px){ #vesper-player .scene-ribbon{padding:16px 14px} #vesper-player .ribbon-heading{font-size:8px;letter-spacing:.8px} #vesper-player .ribbon-cards{display:flex;gap:9px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#7695ad40 transparent;padding-bottom:7px} #vesper-player .scene-card{flex:0 0 66%;min-width:148px;min-height:90px;scroll-snap-align:start;aspect-ratio:2.05} #vesper-player .scene-card>span{font-size:12px;min-height:36px;padding:9px 10px} #vesper-player .scene-card small{font-size:9px} #vesper-player .scene-time{font-size:10px;top:6px;right:6px} } @container film (max-width:640px){ #vesper-player .playback-tools{padding:15px 14px} #vesper-player .extra-transport{gap:1px} #vesper-player .playback-tools .range-button{padding-inline:8px} } @media(max-width:640px){#vesper-player .explore-panel{padding:20px 18px}.site-header nav .mode-button{min-height:44px}#vesper-player .workspace-foot{flex-wrap:wrap;gap:7px;padding-inline:15px}#vesper-player .workspace-foot>div{gap:14px}#vesper-player dialog{padding:22px}#vesper-player dialog h2{font-size:27px}} /* Keep the larger reading scale when the viewer explicitly chooses TV view. */ #vesper-player .workspace.tv-mode :is(.cue-text,.chapter-card strong,.moment-jump strong){font-size:16px} @container film (min-width:641px){ #vesper-player .workspace.tv-mode .control-desk .time-readout{font-size:14px} #vesper-player .workspace.tv-mode .control-desk .control-button .icon{width:26px;height:26px} #vesper-player .workspace.tv-mode .control-desk .control-button:not(.primary-play):not(.dock-handle)::before{bottom:7px;left:15px;right:15px} } /* Motion is a short reveal, never a change to the time axis or target sizes. */ #vesper-player .tool-panel:not([hidden]){animation:vesper-tool-reveal .2s ease-out} #vesper-player .playback-tools:not([hidden]),#vesper-player dialog[open]{animation:vesper-tool-reveal .18s ease-out} @keyframes vesper-tool-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} #vesper-player .workspace.calm :is(.tool-panel,.playback-tools,dialog){animation:none} @media(prefers-reduced-motion:reduce){#vesper-player :is(.tool-panel,.playback-tools,dialog){animation:none}} /* These are presentation layers; strong-contrast modes stay unambiguous. */ #vesper-player .workspace.higher-contrast :is(.explore-panel,.playback-tools,.panel-tabs,.search-field,.moment-card,.chapter-card,dialog){background:var(--panel);box-shadow:none;border-color:var(--muted);backdrop-filter:none} #vesper-player .workspace.higher-contrast :is(.cue-button,.panel-tabs button,.range-button,.repeat-toggle,.rail-select){box-shadow:none;color:var(--white)} #vesper-player .workspace.higher-contrast .opening-disc{background:var(--panel);color:var(--white);box-shadow:none;backdrop-filter:none;border-color:var(--white)} #vesper-player .workspace.higher-contrast:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options{background:var(--panel);border-color:var(--muted);box-shadow:none} #vesper-player .workspace.higher-contrast .control-desk .rail-select>span{color:var(--white)} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#vesper-player :is(.explore-panel,.playback-tools,.panel-tabs,.search-field,.moment-card,.chapter-card,dialog,.opening-disc){background:var(--panel);box-shadow:none;backdrop-filter:none}.site-header nav{background:var(--panel);box-shadow:none}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options{background:var(--panel);border-color:var(--muted);box-shadow:none}#vesper-player .control-desk .rail-select>span{color:var(--white)}} @media(forced-colors:active){ body{background:Canvas} .site-header nav,.site-header nav .mode-button.active,.demo-chooser .demo-option,.demo-chooser .demo-option[aria-current=true]{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none} #vesper-player .workspace :is(.explore-panel,.playback-tools,.panel-tabs,.search-field,.moment-card,.chapter-card,dialog,.accent-button),#vesper-player .workspace.higher-contrast :is(.explore-panel,.playback-tools,.panel-tabs,.search-field,.moment-card,.chapter-card,dialog){background:Canvas;color:CanvasText;box-shadow:none;backdrop-filter:none;border-color:CanvasText} #vesper-player .workspace :is(.cue-button,.panel-tabs button,.range-button,.repeat-toggle,.rail-select,.moment-jump,.moment-actions button),#vesper-player .workspace.higher-contrast :is(.cue-button,.panel-tabs button,.range-button,.repeat-toggle,.rail-select){color:ButtonText;background:ButtonFace;box-shadow:none;border-color:ButtonText} #vesper-player .scene-card{border-color:ButtonText;box-shadow:none}#vesper-player .scene-card::after{background:Highlight}#vesper-player .scene-card>span,#vesper-player .scene-card small,#vesper-player .scene-time,#vesper-player .scene-card[aria-current=true]>span,#vesper-player .scene-card[aria-current=true] small{color:CanvasText;background:Canvas} #vesper-player .scene-card[aria-current=true],#vesper-player .chapter-card[aria-current=true],#vesper-player .cue-button.active{outline:2px solid Highlight} #vesper-player :is(.cue-time,.cue-text,.moment-jump>span,.loop-description,.current-chapter){color:CanvasText} #vesper-player .opening-play .opening-disc{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none;backdrop-filter:none} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options,#vesper-player .workspace.higher-contrast:is([data-dock=top],[data-dock=bottom]) .control-desk .rail-options{background:Canvas;border-color:CanvasText;box-shadow:none} #vesper-player .control-desk .rail-select>span{color:CanvasText} #vesper-player .workspace .speed-control::before{display:none} #vesper-player .workspace .panel-tabs button[aria-selected=true]{border-bottom-color:Highlight;color:Highlight} } /* 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} /* A temporary optical instrument around the existing native Play control. */ #vesper-player .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0} #vesper-player .primary-play{touch-action:none;-webkit-touch-callout:none;user-select:none} #vesper-player .jog-overlay{position:absolute;inset:0;z-index:45;pointer-events:none;overflow:hidden} #vesper-player .jog-dial{position:absolute;left:var(--jog-x);top:var(--jog-y);width:var(--jog-size,92px);height:var(--jog-size,92px);translate:-50% -50%;border:1px solid #a5dfff9c;border-radius:50%;background:radial-gradient(circle,transparent 31%,#77b6dc15 45%,#102735c9 66%,#a6e8ff33 69%,#061422cf 73%);box-shadow:inset 0 1px 2px #ecf9ffb0,inset 0 -2px 4px #061421,0 8px 20px #0007} #vesper-player .jog-ticks{position:absolute;inset:5px;border-radius:50%;background:repeating-conic-gradient(from -1deg,#bddef4b3 0deg 1deg,transparent 1deg 15deg);mask:radial-gradient(circle,transparent 64%,#000 66%);-webkit-mask:radial-gradient(circle,transparent 64%,#000 66%)} #vesper-player .jog-needle{position:absolute;inset:0;rotate:var(--jog-turn);border-radius:50%;background:conic-gradient(from -8deg,#a4ebff 0deg 8deg,transparent 9deg 345deg,#6dbdff70 360deg);mask:radial-gradient(circle,transparent 64%,#000 65%,#000 69%,transparent 71%);-webkit-mask:radial-gradient(circle,transparent 64%,#000 65%,#000 69%,transparent 71%)} #vesper-player .jog-lens{position:absolute;inset:24%;border-radius:50%;border:1px solid #b2e5ff80;background:linear-gradient(155deg,#beeaff59,#3188d61f 48%,#1728468c);box-shadow:inset 0 2px 2px #c8f0ff80,inset 0 -3px 4px #00264480} #vesper-player .jog-preview{position:absolute;overflow:hidden;border:1px solid #adcee96e;border-radius:13px;background:linear-gradient(140deg,#162d40f5,#0a1422f5);box-shadow:inset 0 1px #e9f6ff38,0 10px 24px #0008;color:#e8f4ff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} #vesper-player .jog-frame{margin:0 auto;max-width:100%;background-repeat:no-repeat;background-color:#07131d} #vesper-player .jog-caption{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 3px;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.2px} #vesper-player .jog-delta{color:#91d7ff;font-size:11px} #vesper-player .jog-instruction{margin:0;padding:0 10px 8px;font-size:9px;color:#b5c9d8;line-height:1.4} #vesper-player .jog-active .control-desk{opacity:1!important;visibility:visible!important;pointer-events:auto!important} #vesper-player .primary-play[data-jog-active]{cursor:grabbing!important;outline:1px solid #b5e8ff;outline-offset:3px} #vesper-player .jog-active .primary-play .icon{opacity:.75} #vesper-player .higher-contrast .jog-preview{background:#08131f;border-color:#e2f4ff} @media(prefers-reduced-transparency:reduce){#vesper-player .jog-preview{background:#0c1c2b;backdrop-filter:none;-webkit-backdrop-filter:none}} @media(forced-colors:active){#vesper-player .jog-dial,#vesper-player .jog-preview{background:Canvas;border:1px solid CanvasText;box-shadow:none}#vesper-player .jog-caption,#vesper-player .jog-instruction{color:CanvasText}} /* Real audio processing is opt-in; the spectrum reflects the processed output. */ #vesper-player .control-desk .sound-shortcut{color:#97c6f7;--button-tint:151 198 247} #vesper-player .control-desk .drawer-header .panel-tabs{display:flex;flex-wrap:nowrap;align-items:center;max-width:none;height:auto;gap:8px} #vesper-player .control-desk .drawer-header .panel-tabs button{flex:none;white-space:nowrap} #vesper-player #panel-sound{overflow:auto;padding:0 3px 2px;scrollbar-width:thin;gap:0} #sound-hold-help{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #vesper-player .sound-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;margin:0 0 5px} .sound-eyebrow{font-size:8px;letter-spacing:1.5px;color:#89afc7}.sound-top p{font-size:11px;margin:2px 0;color:#c8dae7} #vesper-player .eq-power,#vesper-player .eq-reset{font:10px 'DM Sans',sans-serif;border:1px solid #a7c9e42a;color:#b8d9f2;border-radius:20px;padding:7px 12px;background:#83b5ed09;cursor:pointer;min-height:32px} #vesper-player .eq-power[aria-pressed=true]{background:#91d6e215;border-color:#91d6e250;color:#baf0e6} #vesper-player .eq-power:focus-visible,#vesper-player .eq-reset:focus-visible{outline:2px solid #b4d8f4;outline-offset:2px} .eq-spectrum{flex:none;height:58px;margin:0 0 6px;border-bottom:1px solid #aacbe61a;position:relative;background:linear-gradient(180deg,transparent,#91d6e205)} .eq-bins{height:40px;display:flex;align-items:end;justify-content:space-between;gap:3px;padding:1px 2px} .eq-bin{display:block;flex:1;max-width:12px;height:calc(2px + 36px * var(--level,0));min-height:2px;border-radius:2px 2px 0 0;background:linear-gradient(#a9d8f2,#6fc6bb9e);box-shadow:0 1px 0 #9cd7e014;transition:height .06s linear} .eq-spectrum-label{display:flex;justify-content:space-between;align-items:center;color:#7696ac;font-size:8px;padding:3px 0}.eq-status{font-size:9px;color:#a2b8c8} .eq-band-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:98px;flex:none} .eq-band{display:flex;flex-direction:column;align-items:center;gap:3px;color:#a5c6dc;font-size:9px;min-width:0} .eq-band output{font-variant-numeric:tabular-nums;min-height:14px;color:#d5e4ed;font-size:10px} #vesper-player .eq-band input[type=range]{appearance:auto;-webkit-appearance:auto;writing-mode:vertical-lr;direction:rtl;height:62px;min-height:62px;width:30px;min-width:30px;padding:0;margin:0;background:transparent;accent-color:#92c6eb;cursor:ns-resize;border:0;border-radius:6px} #vesper-player .eq-band input:focus-visible{outline:2px solid #9bcdf5;outline-offset:3px} .eq-footer{display:flex;align-items:center;gap:10px;justify-content:space-between;flex:none;padding:3px 0 0;font-size:9px;color:#95adbf} .eq-footer label{display:flex;align-items:center;gap:7px}#vesper-player .eq-preset{font:10px 'DM Sans',sans-serif;color:#d1e4f1;background:#111e2d;border:1px solid #9ac6e52b;border-radius:8px;padding:5px 8px;min-height:30px;max-width:100px}.eq-level-note{font-size:8px;color:#8199ab} #vesper-player .panel-tabs [data-tab=sound]{--tab-tone:#aad6ef} #vesper-player .control-desk #panel-sound{padding:6px 4px;gap:2px;overflow:auto;scrollbar-width:thin} #vesper-player .control-desk .eq-spectrum{height:50px} #vesper-player .control-desk .eq-bins{height:32px} #vesper-player .control-desk .sound-top p{font-size:13px} #vesper-player .control-desk .eq-band output{font-size:12px} #vesper-player .control-desk .eq-power,#vesper-player .control-desk .eq-reset,#vesper-player .control-desk .eq-preset{min-height:40px;font-size:12px} #vesper-player .control-desk media-mute-button{touch-action:manipulation;-webkit-touch-callout:none;user-select:none} #vesper-player .control-desk media-mute-button.sound-holding{background:#aad7ed1c;box-shadow:inset 0 0 0 1px #acd9f04d} @container drawer (max-width:440px){#vesper-player .control-desk .eq-power,#vesper-player .control-desk .eq-reset,#vesper-player .control-desk .eq-preset{min-height:44px}#vesper-player .control-desk .eq-band input[type=range]{width:44px;min-width:44px;height:72px;min-height:72px}#vesper-player .control-desk .eq-band-controls{height:110px}#vesper-player .control-desk .drawer-header .panel-tabs{gap:0}#vesper-player .control-desk .panel-tabs button{font-size:11px;padding-inline:1px;min-height:44px}} @media(forced-colors:active){#vesper-player .control-desk .eq-bin{background:Highlight;box-shadow:none}#vesper-player .control-desk :is(.eq-power,.eq-reset,.eq-preset){color:ButtonText;background:ButtonFace;border-color:ButtonText}#vesper-player .control-desk #panel-sound{color:CanvasText}} /* iOS glass reference applied to the original enclosure. Outer border, radius, padding, docking and layout are inherited; the inner bevel is refined. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #vesper-player .control-desk{ background:linear-gradient(165deg,#d9e8f30a,transparent 48%),linear-gradient(175deg,#08112016,#040d1b38),color-mix(in srgb,var(--liquid-surface,#132a3f80) 24%,transparent); backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%); } #vesper-player .control-desk>.explore-panel{ background:linear-gradient(145deg,#c8d8e508,#09111c20 42%,#08111d4a); backdrop-filter:blur(19px) saturate(108%);-webkit-backdrop-filter:blur(19px) saturate(108%); } } /* Keep the original silhouette. A slightly fuller bevel contains the corner colour; the clear centre has no painted reflection or coloured light pool. */ #vesper-player .control-desk{ --corner-focus:calc(var(--glass-radius) * .29); box-shadow:inset 0 1px 1px #d1ecff2e,inset 0 -2px 3px #020c1ba6,0 2px 2px #020a1680,0 10px 24px #02081066; } #vesper-player .control-desk::before{ opacity:.66; background:radial-gradient(ellipse 46px 26px at var(--corner-focus) var(--corner-focus),#74b6ffb3,#68a5ed4d 38%,transparent 82%), radial-gradient(ellipse 34px 20px at 0% 100%,#8bcaff26,transparent 80%), radial-gradient(ellipse 48px 26px at right var(--corner-focus) bottom var(--corner-focus),#b28bf0b3,#9267c94d 38%,transparent 82%), linear-gradient(180deg,#d7ecff14,#87b7df0a); } #vesper-player .control-desk::after{ background:none; } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #vesper-player .control-desk .glass-depth{ --depth-width:6px; box-shadow:inset 0 1px 1px #d4eaff40,inset 0 2px 3px -1px #799fe729,inset 2px 0 3px -1px #65beff2e,inset 0 -3px 4px -2px #02091680,inset -2px -1px 3px -1px #9fcdf033; } #vesper-player .workspace.panel-compact[data-dock] .control-desk .glass-depth{--depth-width:3.5px} #vesper-player .control-desk .glass-depth::after{ inset:calc(var(--depth-width) - 1px);border-radius:calc(var(--glass-radius) - var(--depth-width)); box-shadow:inset 0 1px 1px #02091959,inset 0 -1px 1px #84b4d414; background:none; } } #vesper-player .control-desk .glass-depth::before{ opacity:.55;filter:blur(.2px); background:radial-gradient(ellipse 40px 22px at var(--corner-focus) var(--corner-focus),#7bb9ffe0,#5d9eee73 34%,transparent 80%), radial-gradient(ellipse 30px 18px at 0% 100%,#6eb8f026,transparent 80%), radial-gradient(ellipse 42px 22px at right var(--corner-focus) bottom var(--corner-focus),#c39af0cc,#9a6ac966 34%,transparent 80%), linear-gradient(180deg,#aab7f10d,#84aacb08); } /* Remove coloured floor reflections and blurred glyph halos. The coloured strokes and original hover circles remain sharp. */ #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play)::before{display:none!important;content:none!important} #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play){box-shadow:none} #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play) .icon{ filter:none;transition:color .18s; } #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play):is(:hover,:focus-visible,[aria-expanded=true],[aria-pressed=true]){ box-shadow:inset 0 0 0 1px rgb(var(--button-tint,190 218 240)/.30); } #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play):is(:hover,:focus-visible,[aria-expanded=true],[aria-pressed=true]) .icon{ filter:none; } #vesper-player .workspace.higher-contrast .control-desk, #vesper-player .workspace.higher-contrast .control-desk>.explore-panel{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){ #vesper-player .control-desk,#vesper-player .control-desk>.explore-panel{background:var(--panel);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play) .icon{filter:none} } @media(forced-colors:active){ #vesper-player .control-desk,#vesper-player .control-desk>.explore-panel{background:Canvas;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play) .icon{filter:none!important} } /* Readable over any frame: soft dark halos behind the idle-screen type. No boxes or pills — the film still shows through, only the light under the words is calmed. */ #vesper-player .opening-play{isolation:isolate} #vesper-player .opening-play::after{content:'';position:absolute;inset:-28% -40%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#020810b8,#0208106b 52%,transparent)} #vesper-player .opening-play>span:not(.opening-disc){font-size:12px;color:#f1f7fc} #vesper-player .opening-play>small{font-size:10px;letter-spacing:1.4px;color:#d6e4ee} #vesper-player .opening-art{isolation:isolate} #vesper-player .opening-art::before{content:'';position:absolute;left:-60px;right:30%;top:-70px;bottom:-50px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 62%,#020810c7,#0208107a 45%,transparent 72%)} @container film (max-width:640px){ #vesper-player .opening-play>small{font-size:9px} } /* Phone frames are short: a smaller disc, and the duration line steps aside (the rail shows it). */ @media (max-width:640px){ #vesper-player .opening-play{top:52%;gap:6px;padding:8px} #vesper-player .opening-play .opening-disc{width:52px;height:52px} #vesper-player .opening-play>small{display:none} } /* Panel glass (user-chosen, from the volume pill study): a clearer navy body with saturated blur, a bright meniscus along the top, an inner bevel and blue / violet corner light. The tint still keeps pale icons legible over snow, sky or white water; strong-contrast fallbacks below still win. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* Clear glass, not frosted: light blur so the picture's detail stays legible through it, a body that is clearer in the middle and deeper toward the rim (like real thickness), a crisp reflection streak. */ #vesper-player .control-desk{background: linear-gradient(176deg,#e6f3ff2e,#e6f3ff0a 22%,transparent 46%), radial-gradient(130% 160% at 50% 30%,#0b1c2f47,#0b1c2f80 72%,#08142399); backdrop-filter:blur(8px) saturate(175%) contrast(1.06) brightness(1.04);-webkit-backdrop-filter:blur(8px) saturate(175%) contrast(1.06) brightness(1.04)} } #vesper-player .control-desk{border-color:#cfe8ff52;box-shadow:inset 0 1px 0 #f2faff8c,inset 0 2px 3px -1px #e3f2ff38,inset 0 -2px 3px #020c1b8c,inset 2px 0 3px -1px #65beff33,inset -2px 0 3px -1px #b28bf026,0 6px 18px #02081073} #vesper-player .control-desk::before{opacity:.75} /* Slimmer panel on wide films (user request): about 20% smaller than the original wide-screen scale. Pointer targets stay ≥40px; phones and touch screens keep their 44px rules; TV view is untouched. */ @container film (min-width:980px){ #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk{--glass-radius:36px;padding:10px 18px 14px;gap:4px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .transport{min-height:52px;gap:12px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button{width:46px;min-width:46px;height:46px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .primary-play{width:52px;min-width:52px;height:52px;margin-right:6px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .dock-handle{width:32px;min-width:32px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button .icon{width:23px;height:23px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .primary-play .icon{width:26px;height:26px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .time-readout{font-size:14px;min-width:48px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .rail-select{min-width:66px;min-height:46px} #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .rail-select select{font-size:15px;min-height:24px} #vesper-player .workspace.panel-expanded:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk>.rail-timeline{min-height:52px} #vesper-player .workspace.panel-expanded:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .rail-timeline .time-slider{height:40px} /* Level 1 is a quiet bar: 40px glyph targets, 20px icons. */ #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk{padding:3px 12px} #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button{width:40px;min-width:40px;height:40px} #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button .icon{width:20px;height:20px} #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .rail-timeline{min-height:40px;height:40px} #vesper-player .workspace.panel-compact:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .time-readout{font-size:13px} } @media (pointer:coarse){ #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]):not(.tv-mode) .control-desk .control-button{min-width:44px;min-height:44px} } #vesper-player .workspace.higher-contrast .control-desk{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{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}} @media(forced-colors:active){#vesper-player .control-desk{background:Canvas;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}} #vesper-player .workspace.higher-contrast .opening-play::after,#vesper-player .workspace.higher-contrast .opening-art::before{background:#020810e6} @media(prefers-contrast:more){#vesper-player .opening-play::after,#vesper-player .opening-art::before{background:#020810e6}} @media(forced-colors:active){#vesper-player .opening-play::after,#vesper-player .opening-art::before{display:none}} /* VESPER signature details: a louder Pulse and icons etched into the glass. Pulse still draws only the recorded audio energy (--pulse-energy, 0 when paused, seeking, muted or with reduced motion); these layers only change how that energy is lit. */ /* 1 · Pulse echo — a soft, wide copy of the live wave that blooms behind the playhead (played side only, so the bright line never runs ahead of the playhead and then breaks off). */ #vesper-player .neon-echo{color:#bffff1;opacity:calc(var(--pulse-energy,0) * .95);clip-path:none; -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--neon-progress) - 130px),#000 calc(var(--neon-progress) - 34px),#000 calc(var(--neon-progress) - 4px),transparent var(--neon-progress)); mask-image:linear-gradient(90deg,transparent calc(var(--neon-progress) - 130px),#000 calc(var(--neon-progress) - 34px),#000 calc(var(--neon-progress) - 4px),transparent var(--neon-progress))} #vesper-player .neon-echo .neon-stroke{stroke-width:7;filter:blur(3.5px)} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-echo{ -webkit-mask-image:linear-gradient(0deg,transparent calc(var(--neon-progress) - 130px),#000 calc(var(--neon-progress) - 34px),#000 calc(var(--neon-progress) - 4px),transparent var(--neon-progress)); mask-image:linear-gradient(0deg,transparent calc(var(--neon-progress) - 130px),#000 calc(var(--neon-progress) - 34px),#000 calc(var(--neon-progress) - 4px),transparent var(--neon-progress))} /* The loaded stretch ahead of the playhead fades into the rest instead of stopping on a hard edge. */ #vesper-player .neon-buffer{clip-path:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--media-slider-buffer,0%) - 60px),transparent var(--media-slider-buffer,0%)); mask-image:linear-gradient(90deg,#000 calc(var(--media-slider-buffer,0%) - 60px),transparent var(--media-slider-buffer,0%))} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-buffer{ -webkit-mask-image:linear-gradient(0deg,#000 calc(var(--media-slider-buffer,0%) - 60px),transparent var(--media-slider-buffer,0%)); mask-image:linear-gradient(0deg,#000 calc(var(--media-slider-buffer,0%) - 60px),transparent var(--media-slider-buffer,0%))} /* The played line thickens slightly with the sound. */ #vesper-player .neon-played .neon-stroke{stroke-width:calc(2.6px + 1.2px * var(--pulse-energy,0))} #vesper-player .neon-played{clip-path:inset(-14px calc(100% - var(--neon-progress)) -8px -40px)}/* room for the glow at the start */ /* quiet parts are finer than the bright line, as in the original design */ /* What is still to come is a fine, faint thread; what has played is the bright line (user request). */ #vesper-player .neon-rest .neon-stroke,#vesper-player .neon-buffer .neon-stroke{stroke-width:1.1px} #vesper-player .neon-rest{opacity:.13} #vesper-player .neon-buffer{opacity:.2} #vesper-player .neon-lead{position:absolute;inset:0;display:block;pointer-events:none} #vesper-player .neon-lead svg{display:block;position:absolute;width:100%;height:100%;overflow:visible} #vesper-player .neon-lead-path{stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-lead, #vesper-player .workspace.higher-contrast .neon-lead{display:none} #vesper-player .workspace:is([data-dock=left],[data-dock=right]) .neon-played{clip-path:inset(calc(100% - var(--neon-progress)) -8px -10px -14px)} /* 1b · One stroke. The labels' underlines and curves are drawn inside the timeline's own path (neon-timeline.js · withLeads), so colour, thickness, glow and Pulse are literally the same line. The old separate pseudo-element underline/bridge is retired wherever the joined path is active. */ #vesper-player .rail-timeline.neon-joined .time-readout::before, #vesper-player .rail-timeline.neon-joined .time-readout::after{display:none!important} /* When the line has its own row (phones), the labels can't join it; they stay plain rather than carrying underlines that connect to nothing. */ #vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline:not(.neon-joined) .time-readout::before, #vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .rail-timeline:not(.neon-joined) .time-readout::after{display:none!important} /* 2 · Playhead aura — the light under the thumb grows with the recorded energy. */ #vesper-player .time-slider .neon-visual::after{width:calc(16px + 26px * var(--pulse-energy,0));height:calc(16px + 26px * var(--pulse-energy,0));background:radial-gradient(#c8fff2d9,#59f5d347 46%,transparent 72%);opacity:calc(var(--pulse-energy,0) * .75)} #vesper-player .rail-timeline .time-slider .slider-thumb{box-shadow:0 0 0 2px #65f5d614,0 0 6px #4aefd945,0 0 calc(10px + 18px * var(--pulse-energy,0)) calc(4px * var(--pulse-energy,0)) #4aefd955} #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} /* 3 · Icons etched into the glass: a dark upper edge (the cut) and a faint light lower edge (the polished lip), so each glyph reads as engraved rather than printed on top. */ #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play) svg.icon, #vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play svg.icon, #vesper-player .compact-volume .compact-volume-mute svg.icon{ filter:drop-shadow(0 -1px 0 #020a16b8) drop-shadow(0 1px 0 #d8ecff33);opacity:.94} #vesper-player .workspace[data-dock] .control-desk .control-button:not(.primary-play):is(:hover,:focus-visible,[aria-expanded=true],[aria-pressed=true]) svg.icon, #vesper-player .workspace.panel-compact[data-dock] .control-desk .primary-play:is(:hover,:focus-visible) svg.icon{ filter:drop-shadow(0 -1px 0 #020a16b8) drop-shadow(0 1px 0 #e6f4ff4d) drop-shadow(0 0 4px rgb(var(--button-tint,190 218 240) / .35));opacity:1} /* The time numerals share the same cut, plus a soft local halo so they stay legible through the clearer glass over the brightest footage (white water, snow) without frosting the whole rail. */ #vesper-player .control-desk .rail-timeline .time-readout{text-shadow:0 -1px 0 #020a16a6,0 1px 0 #d8ecff26,0 0 10px #020a16b3,0 0 3px #020a1699} /* 4 · The frame speaks the panel's glass language: a meniscus edge that is bright blue at the top-left and violet at the bottom-right (the panel's corner lights), a fine inner bevel, a cool ambient glow, and a glass base for the status strip. */ #vesper-player media-container.vesper-player:not(:fullscreen){border-color:transparent;background:linear-gradient(180deg,#0f1a27,#0b121b 70%); box-shadow:0 24px 70px #02081073,0 0 46px -14px #4a8fd833,0 0 0 1px #02081066} #vesper-player media-container.vesper-player:not(:fullscreen)::after{content:'';position:absolute;inset:0;z-index:30;border-radius:inherit;pointer-events:none;padding:1px; background:linear-gradient(155deg,#cfe7ffa6,#7fb6ff40 16%,#a6c7df1a 38%,#a6c7df14 62%,#b28bf03d 86%,#d2b3ff8c); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} /* Inner bevel just inside that edge. */ #vesper-player media-container.vesper-player:not(:fullscreen)::before{content:'';position:absolute;inset:1px;z-index:29;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 1px #e3f2ff2e,inset 0 -2px 3px #020c1b99,inset 2px 0 3px -2px #65beff26,inset -2px 0 3px -2px #b28bf01f} /* The status strip becomes the frame's glass base. */ #vesper-player .workspace-foot{position:relative;border-top:1px solid #a6c7df1f;background:linear-gradient(180deg,#e6f3ff0d,transparent 55%),linear-gradient(90deg,#65beff0a,transparent 40%,transparent 60%,#b28bf00d);box-shadow:inset 0 1px 0 #e3f2ff12} #vesper-player .workspace-foot i{background:var(--neon-color,#59f5d3);box-shadow:0 0 6px #59f5d399} #vesper-player .workspace[data-pulse-state=playing] .workspace-foot i{animation:vesper-status-breathe 2.4s ease-in-out infinite} @keyframes vesper-status-breathe{50%{box-shadow:0 0 10px 1px #59f5d3b3}} #vesper-player .workspace-foot button{padding:0 12px;border-radius:15px;background:linear-gradient(150deg,#030b152e,#142b3c12);box-shadow:inset 0 0 0 1px #9ebed91f,inset 0 1px 3px #020a1929;color:#b9cddd;transition:background .18s,box-shadow .18s,color .18s} #vesper-player .workspace-foot button:is(:hover,:focus-visible),#vesper-player .workspace-foot button[aria-pressed=true]{background:#8fc4ff14;box-shadow:inset 0 0 0 1px #9fcfff4d;color:var(--accent)} #vesper-player .workspace-foot button>.icon{filter:drop-shadow(0 -1px 0 #020a16b8) drop-shadow(0 1px 0 #d8ecff26)} @media(prefers-reduced-motion:reduce){#vesper-player .workspace-foot i{animation:none}} #vesper-player .workspace.calm .workspace-foot i{animation:none} /* Strong-contrast modes: a plain, solid frame. */ #vesper-player .vesper-player:has(.workspace.higher-contrast)::after,#vesper-player .vesper-player:has(.workspace.higher-contrast)::before{display:none} #vesper-player media-container.vesper-player:has(.workspace.higher-contrast){border-color:var(--muted,#9fb3c3)} @media(prefers-contrast:more),(prefers-reduced-transparency:reduce),(forced-colors:active){ #vesper-player media-container.vesper-player::after,#vesper-player media-container.vesper-player::before{display:none} #vesper-player media-container.vesper-player{border-color:CanvasText} #vesper-player .workspace-foot{background:none;box-shadow:none} #vesper-player .workspace-foot button{background:none;box-shadow:inset 0 0 0 1px currentColor} } /* Strong-contrast, reduced-transparency and forced colours: plain, flat glyphs. */ #vesper-player .workspace.higher-contrast :is(.control-desk,.workspace-foot) svg.icon,#vesper-player .workspace.higher-contrast~.compact-volume svg.icon{filter:none!important;opacity:1} #vesper-player .workspace.higher-contrast .control-desk .time-readout{text-shadow:none} @media(prefers-contrast:more),(prefers-reduced-transparency:reduce),(forced-colors:active){ #vesper-player .control-desk svg.icon,#vesper-player .compact-volume svg.icon{filter:none!important;opacity:1} #vesper-player .control-desk .time-readout{text-shadow:none} #vesper-player .neon-echo{display:none} } #vesper-player .workspace.higher-contrast .neon-echo,#vesper-player .workspace.calm .neon-echo{display:none} @media(prefers-reduced-motion:reduce){#vesper-player .neon-echo{display:none}} /* VESPER glass system — one material, one hierarchy. Loaded last. Every surface (rail, drawer, tools pop-over, dialogs, wells) shares these tokens; icons fall into three tiers so Play leads, essentials stay calm and tools read as one family. */ #vesper-player{ --vg-surface:#0b1c2f7a; --vg-surface-solid:#0d1b2bf2; --vg-meniscus:linear-gradient(170deg,#e6f3ff26,#e6f3ff08 38%,transparent 60%); --vg-blur:blur(10px) saturate(170%) contrast(1.05); --vg-edge:#bfe0ff40; --vg-bevel:inset 0 1px 1px #e3f2ff59,inset 0 -2px 3px #020c1b8c,inset 2px 0 3px -1px #65beff33,inset -2px 0 3px -1px #b28bf026; --vg-lift:0 10px 28px #0208107a; --vg-well:linear-gradient(150deg,#030b153d,#142b3c14); --vg-well-edge:inset 0 0 0 1px #9ebed924,inset 0 1px 3px #020a1933,0 1px 0 #a2c5dd0d; --vg-ice:#d3e5f3; --vg-focus:#b9d9ff; } /* 1 · Material: pop-overs and dialogs use the rail's glass, not an older grey one. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #vesper-player :is(.playback-tools,dialog){background:var(--vg-meniscus),var(--vg-surface);backdrop-filter:var(--vg-blur);-webkit-backdrop-filter:var(--vg-blur)} } #vesper-player :is(.playback-tools,dialog){border:1px solid var(--vg-edge);box-shadow:var(--vg-bevel),var(--vg-lift)} /* Pop-overs sit over moving pictures, so their body is denser than the rail for reading. */ #vesper-player .playback-tools{background-color:#0b1c2fc7} /* 2 · Hierarchy. Tier 1 — Play keeps the only filled lens (unchanged). Tier 2 — essentials share one calm ice tone. */ #vesper-player .workspace[data-dock] .control-desk :is(.fullscreen-button,.panel-toggle,.dock-handle,.volume-controls media-mute-button,.compact-sound){color:var(--vg-ice)} /* Tier 3 — VESPER tools live together in a recessed glass well, matching Quality / Speed. */ #vesper-player .workspace:is([data-dock=top],[data-dock=bottom]) .control-desk .transport .rail-actions{padding:0 4px;border-radius:16px;background:var(--vg-well);box-shadow:var(--vg-well-edge)} /* Each tool keeps its own colour as identity, softened at rest and full when used. */ #vesper-player .workspace[data-dock] .control-desk .rail-actions .control-button{color:color-mix(in srgb,rgb(var(--button-tint,190 218 240)) 55%,var(--vg-ice))} #vesper-player .workspace[data-dock] .control-desk .rail-actions .control-button:is(:hover,:focus-visible,[aria-pressed=true],[aria-expanded=true],[data-active]){color:rgb(var(--button-tint,190 218 240))} /* A used tool also gets a small lit mark under it — state is never shown by colour alone. */ #vesper-player .workspace[data-dock] .control-desk .rail-actions .control-button:is([aria-pressed=true],[aria-expanded=true],[data-active]){position:relative} #vesper-player .workspace[data-dock] .control-desk .rail-actions .control-button:is([aria-pressed=true],[aria-expanded=true],[data-active])::after{content:'';position:absolute;left:50%;bottom:5px;width:12px;height:2px;translate:-50% 0;border-radius:2px;background:currentColor;box-shadow:0 0 6px currentColor} /* 3 · Reading: nothing in the player is set below 10px. */ #vesper-player .workspace-foot{font-size:10px;letter-spacing:.9px} #vesper-player .film-badge{font-size:11px} #vesper-player .film-badge .quality-badge{font-size:10px} #vesper-player .resume-button{font-size:11px} #vesper-player .opening-art>span{font-size:10px;letter-spacing:1.6px} #vesper-player dialog .eyebrow,#vesper-player .eyebrow{font-size:10px} #vesper-player :is(.bookmark-count,.storage-status,.ribbon-heading,.scene-card small,.scene-time){font-size:10px} #vesper-player .workspace-foot button{font-size:11px} /* 4 · One focus ring everywhere: 2px ice outline, clear of the glass edge. */ #vesper-player :is(button,select,[role=slider],[role=tab],media-play-button,media-mute-button,media-fullscreen-button,media-captions-button,media-pip-button):focus-visible{outline:2px solid var(--vg-focus);outline-offset:2px} /* 5 · Living light. A soft specular glare and a thin edge glint follow the pointer (or the focused control) across the glass; at rest the light settles in the top-left corner where the panel's blue reflection already lives. Screen-blended, so it only ever adds light. */ #vesper-player .control-desk>.glass-light{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:.18;transition:opacity .45s ease;/* quiet at rest: no milky patches */ background:radial-gradient(280px 150px at var(--lx,14%) var(--ly,0px),#eaf5ff1f,#eaf5ff08 45%,transparent 72%)} #vesper-player .control-desk[data-lit]>.glass-light{opacity:1} #vesper-player .control-desk>.glass-light::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:.35;transition:opacity .45s ease; background:radial-gradient(170px 90px at var(--lx,14%) var(--ly,0px),#f4faffe6,#cfe7ff40 45%,transparent 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} #vesper-player .control-desk[data-lit]>.glass-light::after{opacity:1} /* 6 · Pulse lights the glass: the rim and a faint inner tide follow the recorded sound. */ #vesper-player .control-desk>.glass-light::before{content:'';position:absolute;inset:0;border-radius:inherit; box-shadow:inset 0 0 0 1px rgb(89 245 211 / calc(var(--pulse-energy,0) * .55)),inset 0 0 calc(26px * var(--pulse-energy,0)) rgb(89 245 211 / calc(var(--pulse-energy,0) * .16))} /* 7 · Illusion drawer: the glass seems to slide out of the rail itself — revealed from its seam, coming into focus — and a single line of light runs along the seam as it opens. */ #vesper-player .workspace:not(.watch-only) .control-desk>.explore-panel{animation:vg-drawer .42s cubic-bezier(.2,.8,.2,1)} #vesper-player .workspace:not(.watch-only) .control-desk>.explore-panel::after{content:'';position:absolute;top:-1px;left:0;width:34%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#e8f7ffd9,#7fe9d6b3,transparent);animation:vg-seam 1.1s cubic-bezier(.3,.6,.2,1) .12s both} @keyframes vg-drawer{from{clip-path:inset(0 0 100% 0);filter:blur(7px);opacity:.35}60%{filter:blur(0)}to{clip-path:inset(0 0 0 0);filter:none;opacity:1}} @keyframes vg-seam{from{translate:-100% 0;opacity:0}20%{opacity:1}to{translate:300% 0;opacity:0}} /* 8 · Glass EQ faders: a recessed channel, a neon fill that grows from 0 dB, and a glass cap. The real range input sits on top (transparent) for pointer, keyboard and screen readers. */ #vesper-player .eq-band-controls,#vesper-player .control-desk .eq-band-controls{height:auto;min-height:150px} #vesper-player .eq-fader{--p:calc(var(--gain,0) / 12);position:relative;display:block;flex:none;width:44px;height:112px} #vesper-player .eq-fader-rail{position:absolute;left:50%;top:11px;bottom:11px;width:8px;translate:-50% 0;border-radius:4px;background:linear-gradient(90deg,#020a16b3,#0d1e30a6 55%,#1a2f45a6);box-shadow:inset 0 1px 2px #020a16cc,0 1px 0 #d8ecff1f} #vesper-player .eq-fader-rail::before{content:'';position:absolute;left:-5px;right:-5px;top:50%;height:1px;background:#a6c7df47} #vesper-player .eq-fader-fill{position:absolute;left:1px;right:1px;bottom:calc(50% + min(0, var(--p)) * 50%);height:calc(max(var(--p), -1 * var(--p)) * 50%);border-radius:3px;background:linear-gradient(0deg,#59f5d3,#9fd8ff);box-shadow:0 0 8px #59f5d366;transition:bottom .12s,height .12s} #vesper-player .eq-fader-cap{position:absolute;left:50%;bottom:calc(50% + var(--p) * 50%);width:26px;height:12px;translate:-50% 50%;border-radius:6px;border:1px solid #cfe7ff73;background:linear-gradient(180deg,#e6f3ff47,#7fb6ff1f 45%,#0b1c2fb3);box-shadow:inset 0 1px 1px #f2f9ff80,inset 0 -1px 2px #020c1b99,0 2px 6px #02081099;transition:bottom .12s} #vesper-player .eq-fader-cap::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:1px;background:#d8ecffb3} #vesper-player .eq-band .eq-fader input[type=range]{position:absolute;inset:0;width:100%;min-width:0;height:100%;min-height:0;margin:0;opacity:0;cursor:ns-resize;appearance:auto;writing-mode:vertical-lr;direction:rtl} #vesper-player .eq-fader:has(input:focus-visible){outline:2px solid var(--vg-focus);outline-offset:2px;border-radius:12px} #vesper-player .eq-fader:has(input:hover) .eq-fader-cap{border-color:#e6f3ffb3} #vesper-player .workspace:not([data-eq-enabled=true]) .eq-fader-fill{background:linear-gradient(0deg,#7f9fb8,#a9c3d6);box-shadow:none} @media(prefers-contrast:more),(forced-colors:active){ #vesper-player .eq-fader-rail,#vesper-player .eq-fader-cap,#vesper-player .eq-fader-fill{display:none} #vesper-player .eq-band .eq-fader input[type=range]{opacity:1} } #vesper-player .workspace.higher-contrast .eq-fader-cap{background:var(--panel);border-color:#e6f3ff} /* 9 · Jog joins the same family: frame-coloured rim, Pulse-mint needle, glass preview. */ #vesper-player .jog-dial{border-color:transparent;box-shadow:inset 0 1px 2px #ecf9ffb0,inset 0 -2px 4px #061421,0 0 0 1px #bfe0ff59,0 0 18px -4px #59f5d34d,0 8px 20px #0007} #vesper-player .jog-needle{background:conic-gradient(from -8deg,#b8fff0 0deg 8deg,transparent 9deg 345deg,#59f5d370 360deg)} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#vesper-player .jog-preview{background:var(--vg-meniscus),#0b1c2fd9;backdrop-filter:var(--vg-blur);-webkit-backdrop-filter:var(--vg-blur)}} #vesper-player .jog-preview{border-color:var(--vg-edge);box-shadow:var(--vg-bevel),var(--vg-lift)} #vesper-player .jog-instruction{font-size:10px} /* Motion off: light stays at rest, drawer and seam appear without travelling. */ @media(prefers-reduced-motion:reduce){ #vesper-player .workspace .control-desk>.explore-panel,#vesper-player .workspace .control-desk>.explore-panel::after{animation:none} #vesper-player .control-desk>.explore-panel::after{display:none} #vesper-player .eq-fader-fill,#vesper-player .eq-fader-cap{transition:none} } #vesper-player .workspace.calm .control-desk>.explore-panel,#vesper-player .workspace.calm .control-desk>.explore-panel::after{animation:none} #vesper-player .workspace.calm .control-desk>.explore-panel::after{display:none} /* 10 · Corner light. Blue enters at the top-left, violet leaves at the bottom-right: a bright, coloured highlight that runs along the curved rim (the edge catching light), and a wider glow that spills into the glass from the same corners. */ #vesper-player .control-desk::before{opacity:1;padding:1.6px;background: radial-gradient(ellipse 260px 110px at 0% 0%,#c2e8ff,#86c6ffe6 20%,#5ea6f580 46%,transparent 72%), radial-gradient(ellipse 280px 120px at 100% 100%,#ead6ff,#c09dffe6 20%,#9c74f280 46%,transparent 72%), linear-gradient(180deg,#a4caee26,#8fb6dc12)} /* 11 · Thicker glass, quieter rim: the outline is no longer a white line but the glass's own edge — tinted by the corner lights, with the depth carried by the body (stronger refraction, deeper edges). */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #vesper-player .control-desk{background: linear-gradient(176deg,#e6f3ff26,#e6f3ff08 20%,transparent 44%), radial-gradient(130% 160% at 50% 30%,#0b1c2f40,#0b1c2f80 70%,#081423a8); backdrop-filter:blur(9px) saturate(195%) contrast(1.09) brightness(1.05);-webkit-backdrop-filter:blur(9px) saturate(195%) contrast(1.09) brightness(1.05)} } #vesper-player .control-desk{border-color:#b9dcff24;box-shadow:inset 0 1px 0 #e8f4ff40,inset 0 2px 4px -1px #d6ebff24,inset 0 -4px 8px #020c1bb3,inset 4px 0 8px -3px #65beff47,inset -4px 0 8px -3px #b28bf03d,inset 0 0 26px #02081066,0 8px 22px #0208107a} #vesper-player .control-desk .glass-depth::before{opacity:1;filter:blur(.5px);background: radial-gradient(ellipse 190px 86px at 0% 0%,#7cc2ff5c,#5ea6f529 42%,transparent 74%), radial-gradient(ellipse 210px 96px at 100% 100%,#c39af066,#9c74f22e 42%,transparent 74%)} /* Strong-contrast modes: solid surfaces, full-strength icons, no wells or glows. */ #vesper-player .workspace.higher-contrast .control-desk::before{background:linear-gradient(#dceeff,#dceeff)} #vesper-player .workspace.higher-contrast .control-desk .glass-depth::before{display:none} #vesper-player .workspace.higher-contrast .control-desk>.glass-light{display:none} @media(prefers-contrast:more),(prefers-reduced-transparency:reduce),(forced-colors:active){#vesper-player .control-desk>.glass-light{display:none}} #vesper-player .workspace.higher-contrast :is(.playback-tools,dialog){background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} #vesper-player .workspace.higher-contrast .control-desk .rail-actions{background:none;box-shadow:none} #vesper-player .workspace.higher-contrast .control-desk .rail-actions .control-button{color:rgb(var(--button-tint,190 218 240))} @media(prefers-contrast:more),(prefers-reduced-transparency:reduce){ #vesper-player :is(.playback-tools,dialog){background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none} #vesper-player .control-desk .rail-actions{background:none!important;box-shadow:none!important} #vesper-player .control-desk .rail-actions .control-button{color:rgb(var(--button-tint,190 218 240))!important} } @media(forced-colors:active){ #vesper-player :is(.playback-tools,dialog){background:Canvas;border-color:CanvasText;box-shadow:none} #vesper-player .control-desk .rail-actions{background:none;box-shadow:none} #vesper-player :is(button,select,[role=slider]):focus-visible{outline-color:Highlight} }