body.page-demo .layout-full{padding:34px 0 52px}body.page-demo .demo-page__intro{max-width:850px;margin:0 auto 34px;text-align:center}body.page-demo .demo-page__intro h1{margin-bottom:18px}body.page-demo .demo-page__intro h1 span{display:inline}body.page-demo .demo-page__intro h1 b{font-weight:800}body.page-demo .demo-page__lead{margin:0 auto;max-width:720px}body.page-demo .demo-page__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"mix pop pop" "jazz pop pop";gap:28px}body.page-demo .demo-page__card{display:flex;min-width:0}body.page-demo .demo-page__card--mix{grid-area:mix}body.page-demo .demo-page__card--jazz{grid-area:jazz}body.page-demo .demo-page__card--pop{grid-area:pop}body.page-demo .demo-page__cover{position:relative;display:block;width:100%;overflow:hidden;border-radius:4px;background:#000;text-decoration:none;transform:translateZ(0)}body.page-demo .demo-page__card--pop .demo-page__cover{height:100%}body.page-demo .demo-page__cover:before{content:"";position:absolute;inset:0;z-index:1;background:rgba(33,37,41,.8);opacity:0;transition:opacity .3s ease}body.page-demo .demo-page__cover:after{content:"\25B6";position:absolute;top:50%;left:50%;z-index:3;display:grid;place-items:center;width:35px;height:35px;padding-left:2px;border-radius:50%;background:#e60000;color:#fff;font-size:14px;line-height:1;opacity:0;transform:translate3d(-50%,-70%,0);transition:opacity .2s ease,transform .2s ease}body.page-demo .demo-page__cover:hover:before,body.page-demo .demo-page__cover:focus-visible:before,body.page-demo .demo-page__cover:hover:after,body.page-demo .demo-page__cover:focus-visible:after{opacity:1}body.page-demo .demo-page__cover:hover:after,body.page-demo .demo-page__cover:focus-visible:after{transform:translate3d(-50%,-50%,0)}body.page-demo .demo-page__cover:focus-visible{outline:2px solid #e60000;outline-offset:3px}body.page-demo .demo-page__cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease}body.page-demo .demo-page__card--pop .demo-page__cover img{height:100%;aspect-ratio:auto}body.page-demo .demo-page__cover:hover img,body.page-demo .demo-page__cover:focus-visible img{transform:scale(1.1)}body.page-demo .demo-page__label{position:absolute;left:0;bottom:13%;z-index:2;display:block;max-width:90%;padding:13px 21px 2px;background:rgba(33,37,41,.8);color:#fff;font-size:17px;font-weight:600;letter-spacing:-.05em;text-align:left;transition:background .3s ease}body.page-demo .demo-page__cover:hover .demo-page__label,body.page-demo .demo-page__cover:focus-visible .demo-page__label{background:rgba(33,37,41,.9)}body.page-demo .demo-page__label span{display:block}body.page-demo .demo-page__label span:last-child{display:inline-block;margin:8px -2px -15px 0;padding:2px 12px;border-radius:2px;background:#e60000;color:#fff;font-size:.6em;font-weight:600;letter-spacing:0;line-height:2.3;text-transform:uppercase}html.dark body.page-demo .demo-page__cover:after,html.dark body.page-demo .demo-page__label span:last-child,html[data-theme-mode=dark] body.page-demo .demo-page__cover:after,html[data-theme-mode=dark] body.page-demo .demo-page__label span:last-child{background:#ff4d4d}html.dark body.page-demo .demo-page__cover:focus-visible,html[data-theme-mode=dark] body.page-demo .demo-page__cover:focus-visible{outline-color:#ff4d4d}@media(max-width:991px){body.page-demo .demo-page__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"mix pop" "jazz pop";gap:24px}}@media(max-width:575px){body.page-demo .layout-full{padding-top:28px;padding-left:15px;padding-right:15px}body.page-demo .demo-page__intro{text-align:left}body.page-demo .demo-page__grid{grid-template-columns:1fr;grid-template-areas:"mix" "jazz" "pop"}body.page-demo .demo-page__card--pop .demo-page__cover img{height:auto;aspect-ratio:16/9}}@media(prefers-reduced-motion:reduce){body.page-demo .demo-page__cover:before,body.page-demo .demo-page__cover:after,body.page-demo .demo-page__cover img,body.page-demo .demo-page__label{transition:none}body.page-demo .demo-page__cover:hover img,body.page-demo .demo-page__cover:focus-visible img{transform:none}}
body.page-demo .demo-player-modal[hidden]{display:none}body.page-demo .demo-player-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px 14px}body.page-demo .demo-player-backdrop{position:absolute;inset:0;background:rgba(9,11,14,.84)}body.page-demo .demo-player-dialog{position:relative;z-index:1;width:min(1120px,calc(100vw - 28px));max-height:calc(100vh - 48px);outline:0}body.page-demo .demo-player-shell{display:grid;grid-template-columns:126px minmax(0,1fr);gap:22px;max-height:calc(100vh - 48px);overflow:hidden;padding:22px;border-radius:22px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.24)}body.page-demo .demo-player-sidebar{min-width:0}body.page-demo .demo-player-list{display:flex;flex-direction:column;gap:12px;max-height:min(72vh,640px);overflow-x:hidden;overflow-y:auto;padding-right:8px;scrollbar-width:thin}body.page-demo .demo-player-item{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:2px solid transparent;border-radius:16px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}body.page-demo .demo-player-item:hover,body.page-demo .demo-player-item:focus-visible{transform:translateY(-2px);outline:0}body.page-demo .demo-player-item.is-active{border-color:#e60000;box-shadow:0 8px 24px rgba(230,0,0,.18)}body.page-demo .demo-player-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.16)}body.page-demo .demo-player-item-label{display:block;padding:0 4px 8px;color:#252525;font-size:11px;font-weight:800;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;text-align:center}body.page-demo .demo-player-main{min-width:0}body.page-demo .demo-player-video-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border-radius:18px;background:#000}body.page-demo .demo-player-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}body.page-demo .demo-player-meta{padding:18px 4px 0}body.page-demo .demo-player-title{margin:0 0 8px}body.page-demo .demo-player-description{margin:0}body.page-demo .demo-player-close{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:#fff;color:#111;font-size:28px;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.2);cursor:pointer}body.page-demo .demo-player-close:focus-visible{outline:2px solid #e60000;outline-offset:2px}html.dark body.page-demo .demo-player-shell,html[data-theme-mode=dark] body.page-demo .demo-player-shell{background:#13161b;box-shadow:0 28px 90px rgba(0,0,0,.5)}html.dark body.page-demo .demo-player-item-label,html[data-theme-mode=dark] body.page-demo .demo-player-item-label{color:#c2c8d1}html.dark body.page-demo .demo-player-item.is-active,html[data-theme-mode=dark] body.page-demo .demo-player-item.is-active{border-color:#ff4d4d;box-shadow:0 8px 24px rgba(255,77,77,.18)}html.dark body.page-demo .demo-player-close,html[data-theme-mode=dark] body.page-demo .demo-player-close{background:rgba(255,255,255,.12);color:#fff}html.dark body.page-demo .demo-player-close:focus-visible,html[data-theme-mode=dark] body.page-demo .demo-player-close:focus-visible{outline-color:#ff4d4d}@media(max-width:991px){body.page-demo .demo-player-shell{grid-template-columns:1fr;gap:18px;overflow-y:auto}body.page-demo .demo-player-sidebar{order:2}body.page-demo .demo-player-main{order:1}body.page-demo .demo-player-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,34vw);max-height:none;overflow-x:auto;overflow-y:hidden;padding-right:0;padding-bottom:8px}}@media(max-width:575px){body.page-demo .demo-player-modal{padding:8px 6px}body.page-demo .demo-player-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 16px)}body.page-demo .demo-player-shell{max-height:calc(100vh - 16px);padding:16px;border-radius:18px}body.page-demo .demo-player-close{top:8px;right:8px}}@media(prefers-reduced-motion:reduce){body.page-demo .demo-player-item{transition:none}body.page-demo .demo-player-item:hover,body.page-demo .demo-player-item:focus-visible{transform:none}}
html.dark body.page-demo .demo-page__label span:last-child,html[data-theme-mode=dark] body.page-demo .demo-page__label span:last-child{color:#111}