@font-face{font-family:Noto Sans SC Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://cdn.jsdelivr.net/fontsource/fonts/noto-sans-sc:vf@latest/latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg-page: #111;--channel-thumb-width: 65px;--navbar-width: calc(var(--channel-thumb-width) + 20px);--navbar-width-open: 250px;--scrollbar-color: #021227;--bg-color: #021227}::view-transition-group(root){mix-blend-mode:none;animation-duration:.75s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}*::-webkit-scrollbar{height:10px;width:8px}*::-webkit-scrollbar-track{border-radius:5px;background-color:var(--scrollbar-color)}*::-webkit-scrollbar-track:hover{background-color:color-mix(in srgb,var(--scrollbar-color) 100%,#fff 2%)}*::-webkit-scrollbar-track:active{background-color:color-mix(in srgb,var(--scrollbar-color) 100%,#fff 2%)}*::-webkit-scrollbar-thumb{border-radius:5px;background-color:color-mix(in srgb,var(--scrollbar-color) 100%,#fff 10%)}*::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--scrollbar-color) 100%,#fff 12%)}*::-webkit-scrollbar-thumb:active{background-color:color-mix(in srgb,var(--scrollbar-color) 100%,#fff 12%)}body{background-color:var(--bg-page);color:#fff;font-family:Noto Sans SC Variable,sans-serif;font-weight:400;font-size:16px;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;overflow:hidden}ul{list-style-type:none;padding:0;margin:0}main{display:grid;grid-template-columns:var(--navbar-width) 1fr;gap:32px;width:100%;height:100dvh;.navbar{background-color:var(--bg-color);background:radial-gradient(ellipse 300px 25vh at 50% 0%,#09203f 0%,var(--bg-color) 100%);position:fixed;z-index:2;top:0;left:0;width:var(--navbar-width);height:100dvh;display:flex;align-items:flex-start;box-shadow:2px 0 5px #00000080;transition:width .5s ease-in-out;a:after{opacity:0}&:hover{width:var(--navbar-width-open);box-shadow:5px 0 10px #00000080;.menu-channels{overflow-y:auto;a:after{opacity:1;transition:opacity .25s .5s ease-in-out}}}.menu-channels{padding:0 0 40px;margin-top:40px;width:100%;height:calc(100% - 40px);position:relative;z-index:1;scrollbar-gutter:stable;overflow:clip;h1{display:none}ul{display:flex;flex-direction:column}li{margin-bottom:0;padding:8px 8px 8px 10px;order:1;&:has(.is-live){order:0}&.is-active{background-color:color-mix(in srgb,var(--bg-color) 100%,#a19f9f 10%)}&:hover{background-color:color-mix(in srgb,var(--bg-color) 100%,#dbdbdb 5%);& a img{opacity:1}}a{display:grid;grid-template-columns:var(--channel-thumb-width) 1fr 8px;align-items:center;white-space:nowrap;color:#d7edfe;text-decoration:none;gap:16px;position:relative;&:after{content:"";width:8px;height:8px;background-color:transparent;border-radius:50%;position:relative}&.is-live:after{background-color:#a40f01}img{max-width:100%;border-radius:4px;opacity:.75}}}}}.container-channel{display:flex;justify-content:flex-end;align-items:center;width:calc(100vw - var(--navbar-width));margin-left:calc(var(--navbar-width));height:100dvh;.top-bar{background:radial-gradient(ellipse 300px 25vh at 50% 0%,#09203f 0%,var(--bg-color) 100%);position:fixed;inset:0;height:50px;z-index:1;display:flex;align-items:center;justify-content:center;h1{font-size:18px;text-align:center}}.lite-youtube{width:100%;max-width:100%;max-height:100%}}}@media (max-width: 768px){main{--navbar-width: 100dvw;--navbar-width-open: 100dvw;--navbar-height: 40dvh;grid-template-columns:1fr;grid-template-rows:auto 1fr;.navbar{height:var(--navbar-height);width:100dvw;overflow:hidden;.menu-channels{height:100%;margin-top:20px;overflow-y:auto;a:after{opacity:1}h1{display:block!important;font-size:18px;text-align:center;padding:12px 8px 8px}}}.container-channel{margin-left:0;margin-top:var(--navbar-height);height:calc(100dvh - var(--navbar-height));width:100vw;padding:8px;display:flex;flex-direction:column;justify-content:start;.top-bar{position:relative;width:100%;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;h1{font-size:18px;text-align:center}}}}}@keyframes left-right-out{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes left-right-in{0%{transform:translate(-100%)}to{transform:translate(0)}}