:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@property --gradient-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes rotate-gradient{to{--gradient-angle: 360deg}}.animated-text{background:linear-gradient(var(--gradient-angle),#00b09b,#96c93d);color:transparent;-webkit-background-clip:text;background-clip:text;animation:rotate-gradient 5s linear infinite;padding:10px;display:inline-block;position:relative;scale:1.4}.animated-text:after{content:"CUSTOM VIDEO PLAYER";background:linear-gradient(var(--gradient-angle),#01b09b,#96c93d);position:absolute;top:15%;scale:1.03;left:0;width:100%;height:100%;opacity:.8;-webkit-background-clip:text;background-clip:text;filter:blur(4px);animation:rotate-gradient 5s linear infinite}pre>code{display:block;background:#636363;padding:.6rem;border-radius:4px}code{display:inline-block;background:#636363;padding-inline:4px;border-radius:4px}:root{interpolate-size:allow-keywords}.videoplayer{--transition-duration: .3s;background:#fff;contain:layout;display:flex;flex-direction:column;justify-content:center;position:relative;width:max-content;height:max-content;margin-inline:auto;background-color:#000}.videoplayer .player-btn-xs{all:unset;display:flex;justify-content:center;align-items:center;width:30px;aspect-ratio:1;cursor:pointer}.videoplayer .player-btn-xs:focus{outline:.2em solid white}.videoplayer .player-btn-xs>img{width:60%;height:60%}.videoplayer *{box-sizing:border-box;margin:0;padding:0}.chapter-list-container{position:relative}.chapter-list-container ul.chapters-list{position:absolute;bottom:2.4rem;right:50%;transform:translate(40%);width:200px;list-style:none;display:flex;flex-direction:column;text-align:left;align-items:flex-start;gap:.25em;background:#0e0e0e;transition:opacity .2s ease-in-out;max-height:150px;max-width:300px;overflow-y:auto}.chapter-list-container ul.chapters-list::-webkit-scrollbar{width:5px}.chapter-list-container ul.chapters-list::-webkit-scrollbar-thumb{width:100%;background:#fff;border-radius:2px}.chapter-list-container ul.chapters-list>li{padding:.3rem .7rem;font-size:14px;box-shadow:0 0 0 4px #000;cursor:pointer;width:100%;display:flex}.chapter-list-container ul.chapters-list>li:hover{background:#a0a0a0}.chapter-list-container ul.chapters-list>li>button{all:unset;width:100%;min-height:25px}.chapter-list-container ul.chapters-list>li>button:focus-visible{outline:2px solid white}.chapter-list-container ul.chapters-list.hide-chapters{opacity:0;visibility:hidden}.chapter-list-container ul.chapters-list.show-chapters{opacity:1;visibility:visible}.loader{position:absolute;top:50%;right:0;bottom:0;left:50%;translate:-50% -50%;width:10%;aspect-ratio:1;background-color:#000c;align-content:center;contain:size}.controls-group{position:fixed;bottom:-5px;display:flex;flex-direction:column;gap:.2rem;padding:.5rem;width:100%;background-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.56) 25%,rgba(0,0,0,.86) 100%)}.controls-group.hidden{visibility:hidden;opacity:0;transition:opacity .45s ease-in,visibility 0 .25s}.controls-group.visible{opacity:1;visibility:visible;transition:opacity .45s ease-in,visibility 0 .25s}.controls-group .video-buttons{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.video-buttons .btn-group{display:flex;align-items:center;gap:.5rem}.audio-ctrl-group{display:flex;align-items:center}.audio-ctrl-group>.player-btn-xs{flex-grow:1}.audio-ctrl-group input[type=range]{display:block;flex-grow:1;content-visibility:hidden;width:0;transition-property:inline-size,content-visibilty;transition-duration:var(--transition-duration);transition-behavior:allow-discrete}.audio-ctrl-group:hover input[type=range]{width:125px;content-visibility:visible}.tool{position:relative!important}.tool:hover>span.tooltip{visibility:visible}.tool>span.tooltip{--clr: #474747;visibility:hidden;position:absolute;bottom:calc(100% + .5rem);left:50%;translate:-50% 0;text-wrap:nowrap;font-size:.85rem;font-weight:700;padding:.45em;background:var(--clr);border-radius:.25em}.tool>span.tooltip:after{content:"";position:absolute;top:100%;left:50%;translate:-50% 0;border:10px solid transparent;border-top-color:var(--clr)}.progress-bar{--height: 12px;flex:1;display:flex;height:var(--height)}.progress-bar .video-chapters{width:100%;height:inherit;display:flex;gap:.2rem}.progress-bar .video-chapters>.player-chapter-container{display:flex;contain:size;align-items:center;cursor:pointer;background:#404040}.progress-bar .video-chapters>.player-chapter-container:hover .player-chapter-progress{transform:scaleY(2)}.progress-bar .video-chapters>.player-chapter-container .player-chapter-progress{background-color:#ff0040;height:calc(var(--height)/2);transition:transform var(--transition-duration)}.progress-bar .video-chapters .player-chapter-title{color:light-dark(#fff,#242424);background-color:light-dark(#242424,#fff);display:block;font-size:1rem;padding:1rem;position:absolute;bottom:calc(100% + .5rem);left:50%;translate:-50% 0;transition:opacity .25s ease-in-out;pointer-events:none}.progress-bar .video-chapters .player-chapter-title.hide{opacity:0}.progress-bar .video-chapters .player-chapter-title.show{pointer-events:all;opacity:1}.player-chapter-thumbnail-container{position:absolute;translate:-50% 0;top:calc(100% - 225px);padding:1rem 1rem 0;box-shadow:10px solid #000;border-radius:.3rem;content-visibility:hidden;opacity:0;transition-property:opacity,content-visibility;transition-duration:var(--transition-duration);transition-behavior:allow-discrete}.player-chapter-thumbnail-container:before{content:"";position:absolute;top:50%;right:50%;bottom:50%;left:50%;width:10%;height:10%;background:#000;z-index:-1}.player-chapter-thumbnail-container .player-chapter-thumbnail{width:160px;aspect-ratio:16 / 9;margin-bottom:.3rem;color:#000;display:flex;align-items:flex-end;justify-content:center;margin-inline:auto;outline:5px solid white}.player-chapter-thumbnail-container>time{font-size:.8rem}.player-chapter-thumbnail-container>p{margin-top:10px;font-size:.9rem;text-wrap:nowrap}.player-chapter-thumbnail-container>time,.player-chapter-thumbnail-container>p{text-shadow:0 0 10px black;font-weight:700}.progress-bar:hover .player-chapter-thumbnail-container{opacity:1;content-visibility:visible}