@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;font-display:block;src:url(./material-symbols-outlined.DtIK7AQn.woff2)format("woff2")}.material-symbols-outlined{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-feature-settings:"liga";direction:ltr;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.root{background-color:var(--color-background);justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.side-bar-container{background-color:var(--color-primary-container);flex-direction:column;width:225px;height:100%;display:flex}.content-and-player-container{flex-direction:column;flex:1;justify-content:end;height:100%;display:flex}.content-container{width:100vw - 225px;flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden auto}.content-container::-webkit-scrollbar{display:none}.player-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:color-mix(in srgb, var(--color-primary-container), transparent 50%);align-items:center;width:100%;height:80px;display:flex;position:absolute}.logo-container{align-items:center;gap:18px;width:100%;height:80px;padding:20px;display:flex}.logo-container>img{aspect-ratio:1;border-radius:12px;width:auto;height:100%}.logo-container>.text{background:linear-gradient(red,#fca014);color:#0000;-webkit-background-clip:text;background-clip:text;font-family:New Rocker,system-ui;font-size:24px;font-weight:600;animation:5s infinite lightining}@keyframes lightining{0%{background:linear-gradient(red,#fca014);color:#0000;-webkit-background-clip:text;background-clip:text}3%{background:#fff;color:#0000;-webkit-background-clip:text;background-clip:text}6%{background:linear-gradient(red,#fca014);color:#0000;-webkit-background-clip:text;background-clip:text}9%{background:#fff;color:#0000;-webkit-background-clip:text;background-clip:text}12%{background:linear-gradient(red,#fca014);color:#0000;-webkit-background-clip:text;background-clip:text}}.nav-bar{flex:1;width:100%}.nav-section{flex-direction:column;width:100%;margin-top:25px;padding:0 20px;display:flex}.nav-topic{text-transform:uppercase;color:var(--color-tertiary);padding:4px 0;font-size:14px;font-weight:200;line-height:1.5}.nav-btn{width:100%;color:var(--color-secondary);text-align:start;cursor:pointer;border-radius:4px;align-items:center;gap:12px;padding:6px 12px;font-size:14px;font-weight:400;display:flex}.nav-btn:hover{background-color:var(--color-secondary-container)}.nav-btn>.icon{aspect-ratio:1;height:24px}.player-album-art{border-radius:4px;max-width:80px;height:80px}.player-song-text{flex-direction:column;justify-content:center;width:180px;height:100%;padding-left:12px;padding-right:6px;display:flex}.player-song-title{white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:18px;font-weight:600;display:block;overflow:hidden}.player-song-subtitle{white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--color-secondary);font-size:14px;display:block;overflow:hidden}.player-timestamps{flex-direction:column;justify-content:center;align-items:center;width:80px;height:100%;padding-left:12px;display:flex}.player-current-time{width:100%;font-size:16px;font-weight:600}.player-duration-time{width:100%;color:var(--color-secondary);font-size:14px}.player-features-container{align-items:center;gap:6px;width:360px;padding-left:12px;display:flex}.player-features-container>.btn{background-color:var(--color-secondary-container);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:8px;display:flex}.player-features-container>.btn>.icon{color:var(--color-secondary)}.player-features-container>.spacing{width:10px}.player-features-container>.end-spacing{flex:1}.player-features-container>.player-play-pause{background-color:var(--color-accent);padding:8px}.player-features-container>.player-play-pause>.icon{color:var(--color-on-accent);font-size:34px}.player-seek-container{cursor:pointer;flex:1;justify-content:center;align-items:center;height:40px;margin:0 10px;padding:0 .2rem;display:flex;overflow:visible}.player-seek-background{background-color:#ffffff14;border-radius:4px;width:100%;height:6px;transition:all .2s;position:absolute;overflow:visible}.player-seek-progress{background-color:var(--color-accent);border-radius:20px;justify-content:flex-end;align-items:center;width:80%;height:100%;display:flex;overflow:visible}.player-seek-progress:after{opacity:0;content:"";background-color:var(--color-primary);border-radius:50%;width:20px;height:20px;margin-right:-5px;transition:all .2s;display:block;position:absolute}.player-seek-container:active .player-seek-background{border-radius:8px;height:60%}.player-seek-container:hover .player-seek-progress:after{opacity:1}.player-seek-container:active .player-seek-progress{border-radius:8px}.player-seek-container:active .player-seek-progress:after{opacity:0;transform:scale(0)}.player-seek-container>input[type=range].player-seek-input{appearance:none;cursor:pointer;width:100%;height:100%}.player-seek-container>input[type=range].player-seek-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:#0000;width:.5px;height:100%}.player-seek-container>input[type=range].player-seek-input::-webkit-slider-runnable-track{-webkit-appearance:none;background-color:#0000;border:0;border-radius:0;width:100%;height:100%}.search-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:color-mix(in srgb, var(--color-background), transparent 20%);justify-content:space-between;align-items:center;width:100%;height:80px;padding:0 100px;display:flex;position:absolute;top:0;left:0}.search-bar{background-color:var(--color-primary-container);border-radius:8px;flex:.6;align-items:center;height:45px;display:flex;overflow:hidden}.search-bar>.icon,.search-bar>label>.btn>.icon{width:50px;height:100%;color:var(--color-secondary);justify-content:center;align-items:center;display:flex}.search-bar>label>.btn{cursor:pointer}.search-bar>.line,.search-bar>label>.line{background-color:var(--color-tertiary);width:1px;height:40%;display:block}.search-bar>input{background-color:#0000;flex:1;height:100%;padding:0 10px;font-size:16px}.search-container:has(.search-bar>input:focus) .search-bar>.icon{color:var(--color-primary)}label{display:none}.search-bar>input:not(:placeholder-shown)+label{display:flex}.history-profile-container{gap:18px;display:flex}.history-profile-container>.btn{cursor:pointer}.history-profile-container>.btn>.icon{color:var(--color-secondary)}.side-bar-container>.line{background-color:var(--color-tertiary);width:calc(100% - 40px);height:1px;margin:0 20px;display:block}