:root{--bg-dark: hsl(0 0% 0%);--bg: hsl(0 0% 5%);--bg-light: hsl(0 0% 10%);--text: hsl(0 0% 95%);--text-muted: hsl(0 0% 70%);--loadingStart: hsl(200, 20%, 70%);--loadingEnd: hsl(200, 20%, 95%);--red: #d44a4a;color:var(--text);--alert-color-red: rgba(155, 19, 19, 0.7);--alert-color-green: rgba(68, 147, 81, 0.7);--alert-color-yellow: rgba(255, 211, 44, 0.7)}.light-theme{--bg-dark: hsl(0 0% 100%);--bg: hsl(0 0% 95%);--bg-light: hsl(0 0% 90%);--text: hsl(0 0% 5%);--text-muted: hsl(0 0% 30%);--loadingStart: hsl(200, 9%, 47%);--loadingEnd: hsl(200, 2%, 63%);--red: #fd8e8e;--alert-color-red: rgba(255, 168, 150, 0.7);--alert-color-green: rgba(133, 198, 143, 0.7);--alert-color-yellow: rgba(255, 234, 153, 0.7)}.primary-purple{--primary: #8957ff;--active-text: #7a4de4}.primary-purple.light-theme{--active-text: #aa9ff6}.primary-pink{--primary: #fa8abb;--active-text: #dc80a7}.primary-pink.light-theme{--active-text: #ffdbdb}.primary-red{--primary: #ff3366;--active-text: #e02d5a}.primary-red.light-theme{--active-text: #fcccd8}.primary-yellow{--primary: #ffbb00;--active-text: #e4a701}.primary-yellow.light-theme{--active-text: #fde9b8}.primary-blue{--primary: #02bbff;--active-text: #02a0d9}.primary-blue.light-theme{--active-text: #a0e1f8}.primary-green{--primary: #00cc88;--active-text: #01a26c}.primary-green.light-theme{--active-text: #a5f8dc}.menu-container{grid-area:menu;width:14.375rem;transition:width ease-in-out 0.3s;position:relative;overflow:auto;border-right:0.0625rem solid var(--bg-light)}.menu-container .scrollbar{overflow-y:auto;overflow-x:hidden;height:100%;padding:0 1rem;display:flex;gap:1rem;flex-direction:column;justify-content:space-between;-ms-overflow-style:none;scrollbar-width:none}.menu-container .scrollbar::-webkit-scrollbar{display:none}.menu-container .bot-selection{position:relative;width:100%;overflow:hidden;margin-top:0.625rem}.menu-container .bot-selection:hover .options{height:5.625rem}.menu-container .bot-selection:hover .selected span{transform:rotate(0deg)}.menu-container .bot-selection .selected{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0.625rem 0.625rem;border-radius:0.5rem;border:0.125rem solid var(--bg-light)}.menu-container .bot-selection .selected span{transform:rotate(180deg);font-size:1rem;color:var(--text-muted)}.menu-container .bot-selection .selected p{overflow:hidden;white-space:nowrap}.menu-container .bot-selection .left{display:flex;align-items:center;gap:0.75rem}.menu-container .bot-selection img{width:1.1875rem;border-radius:50%}.menu-container .bot-selection .options{width:100%;height:0rem;display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:0.5rem;overflow:hidden;transition:all ease-in-out 0.2s;overflow-y:auto}.menu-container .bot-selection .options .option{display:flex;padding:0.625rem 0.75rem;align-items:center;gap:0.75rem;cursor:pointer}.menu-container .bot-selection .options .option:hover{background-color:var(--bg-dark)}.menu-container .bot-selection .options .option p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.menu-container .top{display:flex;flex-direction:column;gap:0.75rem}.menu-container .bar{background-color:var(--bg-light);padding:0.0625rem;border-radius:0.625rem}.menu-container .section{display:flex;flex-direction:column;overflow:hidden}.menu-container .section .menu-btn{display:flex;align-items:center;padding:0.625rem 0.75rem;gap:0.75rem;transition:all ease-in-out 0.2s;border-radius:0.5rem;cursor:pointer}.menu-container .section .menu-btn p{text-wrap:nowrap;font-size:1rem;color:var(--text-muted)}.menu-container .section .menu-btn span{font-size:1.25rem;color:var(--text-muted)}.menu-container .section .menu-btn:hover{background-color:color-mix(in srgb, var(--bg-light) 80%, white)}.menu-container .section .menu-btn.center{background-color:var(--bg-light);justify-content:center;border-radius:1.25rem;gap:0.3125rem;margin-bottom:0.625rem}.menu-container .section .menu-btn.center p{padding-right:0.3125rem}.menu-container .section .menu-btn.center:hover{background-color:color-mix(in srgb, var(--bg-light) 80%, white)}.menu-container .section .menu-btn.red p{color:#cc8889}.menu-container .section .menu-btn.red span{color:#cc8889}.menu-container .section .menu-btn.active{background-color:var(--bg-light);color:var(--text)}.menu-container .section .menu-btn.active p{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;color:var(--text)}.menu-container .section .menu-btn.active span{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;color:var(--text)}.menu-container.hide{width:4.75rem}.menu-container.hide .bot-selection span{display:none}.menu-container.hide .section .header span{display:none}.menu-container.hide p{display:none}.menu-container.hide .no-icon{display:none}@media (max-width: 768px){.menu-container{position:fixed;top:0;left:0;width:80vw;max-width:320px;height:100vh;z-index:1002;background:var(--bg);box-shadow:2px 0 16px rgba(0,0,0,0.15);transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-right:none}.menu-container.active{transform:translateX(0)}#menu-overlay.mobile-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);z-index:1001}.menu-container.active+#menu-overlay.mobile-overlay{display:block}}.queue-container{grid-area:queue;justify-self:end;width:25rem;padding:0.3125rem;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease-in-out, padding 0.3s ease-in-out}.queue-container.close{width:0rem;padding:0.3125rem 0rem}.queue-container .header{display:flex;align-items:center;justify-content:space-between;margin:0 0.625rem;white-space:nowrap}.queue-container .header.small-padding{padding-block:0.625rem}.queue-container .header .actions{display:flex;align-items:center;gap:0.625rem}.queue-container .header .btn{position:relative;display:flex;flex-direction:column;align-items:center}.queue-container .header .btn .label{position:absolute;bottom:-2.8125rem;padding:0.5rem 0.75rem;background-color:var(--bg-light);border-radius:0.25rem;opacity:0;transition:all ease-in-out 0.2s;pointer-events:none;white-space:nowrap;z-index:1}.queue-container .header .btn span{color:var(--text-muted)}.queue-container .header .btn span:hover+.label{opacity:1;transition-delay:0.5s}.queue-container .header .btn.active span{color:var(--text)}.queue-container .scrollbar{position:relative;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;scrollbar-gutter:stable;height:100%}.queue-container .scrollbar .action-bar{position:sticky;display:flex;align-items:center;justify-content:center;gap:0.3125rem;border-radius:1.25rem;margin:-1.5rem auto;padding:0.5rem 1.375rem 0.5rem 1.25rem;bottom:-0.9375rem;left:0;right:0;width:fit-content;background-color:var(--bg-light);opacity:0;pointer-events:none;transition:all 0.2s ease-in-out;cursor:pointer}.queue-container .scrollbar .action-bar span{font-size:0.75rem}.queue-container .scrollbar .action-bar p{font-size:0.75rem}.queue-container .scrollbar .action-bar:hover{scale:1.05;background-color:var(--active-text)}.queue-container .scrollbar .action-bar.active{opacity:1;transform:translateY(-1.5625rem);pointer-events:auto}.queue-container .section{display:flex;flex-direction:column;width:100%;gap:0.5rem}.queue-container .section .header{display:flex;align-items:end;justify-content:space-between;gap:1.25rem;margin:0 0.625rem}.queue-container .section .header p{cursor:pointer;color:var(--text-muted)}.queue-container .section .track{display:flex;align-items:center;justify-content:space-between;overflow:hidden;transition:opacity 0.1s ease-in-out;padding:0.625rem 0.875rem;border-radius:0.375rem;margin-right:0.3125rem;cursor:pointer}.queue-container .section .track:hover{background-color:var(--bg-light)}.queue-container .section .track:hover span{opacity:1}.queue-container .section .track:hover .left .thumbnail{transition-delay:0.2s}.queue-container .section .track:hover .left .thumbnail .track-img{filter:brightness(50%)}.queue-container .section .track:hover .left .thumbnail .requester-img{transition-delay:0.2s;opacity:1}.queue-container .section .track .left{min-width:90%;display:flex;align-items:center;gap:0.9375rem}.queue-container .section .track .left .track-info{width:100%;display:flex;flex-direction:column;gap:0.625rem;overflow:hidden}.queue-container .section .track .left .track-info p{width:97%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.queue-container .section .track .left .thumbnail{position:relative;min-width:3.125rem;min-height:3.125rem}.queue-container .section .track .left .thumbnail .track-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:0.3125rem;transition:all 0.3s ease-in-out}.queue-container .section .track .left .thumbnail .requester-img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:65%;height:65%;object-fit:cover;border-radius:50%;opacity:0;transition:opacity 0.2s ease-in-out}.queue-container .section .track .left .thumbnail::before{content:"";display:block}.queue-container .section span{opacity:0}.queue-container .section .queue{display:flex;flex-direction:column}.queue-container .autoplay-btn{display:flex;justify-content:center;align-items:center;padding:0.6rem;transition:all ease-in-out 0.2s;overflow:hidden;border-radius:0.5rem;border:0.125rem solid var(--bg-light);cursor:pointer}.queue-container .autoplay-btn:hover{background-color:color-mix(in srgb, var(--bg-light) 80%, white)}.queue-container .autoplay-btn.active{background-color:var(--bg-light)}.queue-container .autoplay-btn.active:hover{background-color:color-mix(in srgb, var(--bg-light) 80%, white)}.queue-container .autoplay-btn p{text-wrap:nowrap;font-size:1rem;color:var(--text-muted)}.avatar-container{display:flex;align-items:center;justify-content:flex-end;width:auto}.avatar{position:relative;transition:0.2s}.avatar img{width:2rem;height:2rem;display:block;object-fit:cover;border-radius:50%;border:0.125rem solid var(--bg);background-color:var(--bg)}.avatar:not(:first-child){margin-left:-0.625rem}.avatar:hover{z-index:1;transform:translateY(0.5rem)}.avatar:hover .name{opacity:1;visibility:visible}.avatar.extra{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background-color:var(--bg);border-radius:50%;object-fit:cover}.avatar .name{position:absolute;max-width:9.375rem;bottom:calc(-100%);left:50%;transform:translateX(-50%);padding:0.5rem 0.75rem;border-radius:0.3125rem;background-color:var(--bg-light);white-space:nowrap;opacity:0;visibility:hidden;transition:0.2s;font-size:0.875rem;text-overflow:ellipsis;overflow:hidden}@media (max-width: 768px){.queue-container{position:fixed;top:0;right:0;width:90vw;max-width:400px;height:100vh;z-index:1002;background:var(--bg);box-shadow:-2px 0 16px rgba(0,0,0,0.15);transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.queue-container.active{transform:translateX(0)}#queue-overlay.mobile-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);z-index:1001}.queue-container.active~#queue-overlay.mobile-overlay{display:block}}.control-container{position:relative;grid-area:control;display:grid;grid-template-areas:"left center right";grid-template-columns:1fr 2fr 1fr;padding:0.625rem 1.5rem;background-color:var(--bg)}.control-container>div{display:flex;align-items:center}.control-container .material-symbols-outlined{cursor:pointer;transition:all ease-in-out 0.2s;color:var(--text-muted)}.control-container .left{grid-area:left;display:flex;align-items:center;gap:0.9375rem;overflow:hidden;opacity:0;transition:all 0.2s;width:100%}.control-container .left img{width:3.125rem;height:3.125rem;object-fit:cover;border-radius:0.3125rem}.control-container .left .track-info{display:flex;align-items:flex-start;flex-direction:column;gap:0.625rem;min-width:10%;max-width:70%}.control-container .left .track-info p{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.control-container .btn{position:relative;display:flex;flex-direction:column;align-items:center}.control-container .btn .label{position:absolute;top:-2.8125rem;padding:0.5rem 0.75rem;background-color:var(--bg-light);border-radius:0.25rem;opacity:0;transition:all ease-in-out 0.2s;pointer-events:none;white-space:nowrap}.control-container .btn span:hover+.label{opacity:1;transition-delay:0.5s}.control-container .center{grid-area:center;display:flex;flex-direction:column;justify-content:center;gap:0.5rem}.control-container .center .actions{display:flex;align-items:center;gap:0.9375rem}.control-container .center .actions .play_btn{font-size:2.5rem;color:var(--text)}.control-container .center .actions span{font-size:1.5625rem}.control-container .center .position{display:flex;align-items:center;gap:0.875rem;width:70%;min-width:21.875rem}.control-container .position-bar{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;border-radius:0.9375rem;height:0.3125rem;transition:all 0.2s ease-in-out;background:linear-gradient(to right, var(--primary) 0%, var(--text-muted) 0%)}.control-container .position-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:0.9375rem;width:0.9375rem;background-color:var(--active-text);border-radius:50%;border:none;transition:0.2s ease-in-out;opacity:0}.control-container .position-bar:hover::-webkit-slider-thumb{opacity:1}.control-container .position-bar:-webkit-slider-runnable-track{background-color:var(--text-muted)}.control-container .position-bar:-moz-range-track{background-color:var(--text-muted)}.control-container .volume-bar{-webkit-appearance:none;appearance:none;width:4.375rem;cursor:pointer;outline:none;border-radius:0.9375rem;height:0.3125rem;transition:all 0.2s ease-in-out;background:linear-gradient(to right, var(--primary) 0%, var(--text-muted) 0%)}.control-container .volume-bar::-webkit-slider-thumb{color:#fff;opacity:0}.control-container .volume-bar:hover::-webkit-slider-thumb{opacity:1}.control-container .volume-bar:-webkit-slider-runnable-track{background-color:var(--text-muted)}.control-container .volume-bar:-moz-range-track{background-color:var(--text-muted)}.control-container .right{grid-area:right;display:flex;justify-content:flex-end;gap:0.9375rem}@media (max-width: 768px){.control-container{grid-template-columns:1fr 2fr 1fr;padding:0.5rem 0.5rem;gap:0.5rem}.control-container .left,.control-container .center,.control-container .right{min-width:0}.non-essential{display:none !important}.important{display:flex !important;align-items:center}.center .actions{gap:0.5rem}.center .btn.important span{font-size:2rem}.left.important img{width:2.2rem;height:2.2rem}.track-info.important{max-width:100px}.track-info.important p.title{font-size:1rem}}@media (max-width: 480px){.control-container{grid-template-columns:1fr 2fr 1fr;padding:0.25rem 0.25rem;gap:0.25rem}.track-info.important{max-width:60px}.track-info.important p.title{font-size:0.9rem}.center .btn.important span{font-size:1.5rem}.left.important img{width:1.5rem;height:1.5rem}}.header-container{grid-area:header;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0.7rem 1rem;height:min-content;gap:1rem;border-bottom:0.0625rem solid var(--bg-light)}.header-container span{font-size:1.25rem}.header-container .menu-bar-btn,.header-container .back-page-btn{display:flex;justify-content:center;align-items:center;padding:0.625rem;border-radius:50%;cursor:pointer;font-size:1.25rem}.header-container .menu-bar-btn:hover,.header-container .back-page-btn:hover{background-color:var(--bg-light)}.search-container{flex:1;display:flex;align-items:center;justify-content:center;gap:0.75rem}.search-container .search-bar{position:relative;display:flex;align-items:center;width:100%;max-width:30rem;background-color:var(--bg);padding:0.625rem 0.9375rem;border-radius:1.2rem;outline:0.0625rem solid var(--bg-light);transition:outline 0.1s ease-in-out;box-shadow:0 2px 8px rgba(0,0,0,0.04)}.search-container .search-bar:hover{outline:0.125rem solid var(--text-muted)}.search-container .search-bar:focus-within{outline:0.125rem solid var(--active-text)}.search-container .search-bar input{font-size:0.95rem;padding:0 0.75rem;width:100%;background-color:transparent;outline:none;border:none;color:var(--text)}.search-container .search-bar .material-symbols-outlined{font-size:1.25rem}.search-container .search-bar .search-result{position:absolute;display:none;flex-direction:column;z-index:1;top:calc(100% + 0.5rem);left:0;width:100%;height:31.25rem;max-height:60vh;background-color:var(--bg);border-radius:0.5rem;padding:0.625rem 0.3125rem;gap:0.625rem;overflow:hidden}.search-container .search-bar .search-result img{width:3.4375rem;height:3.4375rem;object-fit:cover;border-radius:0.5rem}.search-container .search-bar .search-result .header{display:flex;justify-content:space-between;align-items:center;padding:0.625rem 0.875rem}.search-container .search-bar .search-result .btn{display:flex;align-items:center;padding:0.3125rem 0.875rem;border-radius:0.5rem;gap:0.3125rem;cursor:pointer;transition:all ease-in-out 0.2s;background-color:var(--bg-light)}.search-container .search-bar .search-result .btn:hover{scale:1.1}.search-container .search-bar .search-result .tracks{display:flex;flex-direction:column;height:90%;gap:0.3125rem;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable}.search-container .search-bar .search-result .track-row{display:flex;align-items:center;justify-content:space-between;padding:0.625rem 0.875rem;margin-right:0.3125rem;border-radius:0.75rem;cursor:pointer;transition:all ease-in-out 0.2s}.search-container .search-bar .search-result .track-row:hover{background-color:var(--bg-light)}.search-container .search-bar .search-result .track-row .left{width:85%;display:flex;align-items:center;gap:0.625rem}.search-container .search-bar .search-result .track-row .track-info{width:100%;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.search-container .search-bar .search-result .track-row p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.search-container .search-bar .search-result .track-row p.title{font-size:1.0625rem;margin-bottom:0.5rem}.search-container .search-bar .search-result .track-row p.description{font-size:0.875rem;color:var(--text-muted)}.search-container .search-bar .search-result p{font-size:0.9375rem}.header-btn{position:relative;z-index:2}.header-btn .btn{position:relative;display:flex;flex-direction:column;justify-content:left;align-items:center;padding:0.625rem;border-radius:0.5rem;cursor:pointer;transition:all ease-in-out 0.1s}.header-btn .btn:active{scale:0.95}.header-btn .btn.active::after{content:"";position:absolute;top:0.5625rem;right:0.5625rem;background-color:#d44a4a;border-radius:50%;width:0.5rem;height:0.5rem}.header-btn .btn .label{position:absolute;bottom:-2.5rem;padding:0.5rem 0.75rem;background-color:var(--bg-light);border-radius:0.25rem;opacity:0;transition:all ease-in-out 0.2s;pointer-events:none;white-space:nowrap;z-index:1}.header-btn .btn span:hover+.label{opacity:1;transition-delay:0.5s}.header-btn .panel{position:absolute;top:2.5rem;height:fit-content;width:25rem;max-height:70vh;right:0%;background-color:var(--bg-dark);opacity:0;transition:all 0.3s ease-in-out;border-radius:0.5rem;box-shadow:rgba(99,99,99,0.2) 0rem 0.125rem 0.5rem 0rem;display:flex;flex-direction:column;gap:0.625rem;pointer-events:none;overflow:hidden;z-index:5}.header-btn .panel.active{opacity:1;transform:translateY(0.625rem);pointer-events:auto;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.header-btn .panel .header{display:flex;align-items:center;gap:0.5rem;background-color:var(--bg-light);padding:0.9375rem}.header-btn .panel .header span{font-size:1.4375rem}.header-btn .panel .sections{display:flex;flex-direction:column;gap:0.3125rem;overflow:auto}.header-btn .panel .no-message{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:3.125rem 0}.header-btn .panel .no-message img{width:6.25rem;margin-bottom:1.875rem}.header-btn .panel .message{padding:0.625rem 0.9375rem 1.25rem;border-bottom:0.0625rem solid var(--bg-light);display:flex;gap:0.9375rem}.header-btn .panel .message:hover{background-color:var(--bg)}.header-btn .panel .message img{width:2.8125rem;height:2.8125rem;border-radius:50%}.header-btn .panel .message .title{font-size:0.9375rem;font-weight:600;margin-bottom:0.375rem}.header-btn .panel .message .time{font-size:0.875rem;color:var(--text-muted);margin-bottom:0.625rem}.header-btn .panel .message .description{color:var(--text-muted);margin-bottom:0.625rem;line-height:150%}.header-btn .panel .message .actions{display:flex;align-items:center;gap:0.625rem}.header-btn .panel .message .action{padding:0.5rem 0.9375rem;border-radius:0.3125rem;border:0.0938rem solid var(--bg-light);cursor:pointer;transition:all 0.2s ease-in-out}.header-btn .panel .message .action.accept{background-color:var(--active-text)}.header-btn .panel .message .action:hover:not(.accept){background-color:#d44a4a;color:#fff}.user-avatar{display:flex;align-items:center;gap:0.75rem;cursor:pointer}.user-avatar img{width:2.5rem;height:auto;border-radius:50%}.user-menu-container{position:relative;display:flex;align-items:center;justify-content:flex-end;width:auto}.user-menu-panel{position:absolute;top:3.5rem;right:0;background-color:var(--bg-light);border-radius:0.5rem;box-shadow:rgba(99,99,99,0.2) 0rem 0.125rem 0.5rem 0rem;opacity:0;transform:translateY(0.625rem);pointer-events:none;transition:all 0.3s ease-in-out;min-width:10rem;padding:0.25rem;z-index:10}.user-menu-panel.active{opacity:1;transform:translateY(0);pointer-events:auto;z-index:1}.user-menu-panel ul{list-style:none;padding:0;margin:0}.user-menu-panel ul li{padding:0.75rem 0.875rem;cursor:pointer;display:flex;align-items:center;gap:0.75rem;border-radius:0.3125rem}.user-menu-panel ul li:hover{background-color:var(--bg)}.user-menu-panel ul li a{text-decoration:none;color:var(--text);display:flex;align-items:center;gap:0.75rem}.user-menu-panel ul li a.logout-link{color:#cc8889}.user-menu-panel ul li a.logout-link .material-symbols-outlined{color:#cc8889}.loader{width:1.25rem;aspect-ratio:1;border-radius:50%;border:0.15rem solid var(--text);animation:l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear}@media (max-width: 768px){.header-container{padding:0.5rem 0.75rem;gap:0.5rem}.search-container{gap:0.5rem}.search-container .search-bar{max-width:20rem}.search-container .search-bar .search-result{position:fixed;top:3.5rem;left:0;width:100vw;height:70vh;max-height:100vh;z-index:1003;border-radius:0}.user-menu-panel{top:3rem;min-width:8rem}.header-btn .panel{position:fixed;top:2.8rem;left:0;width:100vw;max-height:100vh;z-index:1003;border-radius:0}}@media (max-width: 480px){.header-container{justify-content:space-around}.search-container{width:100%;order:3}.search-container .back-page-btn{display:none}.search-container .search-bar{max-width:none}.menu-bar-btn{order:1}.header-btn{order:4}.user-menu-container{order:5}}*{padding:0;margin:0;font-family:"Roboto", sans-serif;color:var(--text);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}span,img{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}p{font-size:0.875rem}a{color:var(--text);text-decoration:none}body{overflow-x:hidden;overflow-y:hidden;background-color:var(--bg-dark)}.rotate{transform:rotate(180deg)}.sortable-chosen{opacity:0.5}.sortable-ghost{border-left:0.375rem solid var(--primary)}::-webkit-scrollbar{width:0.375rem;margin:0.625rem}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:0.75rem}.material-symbols-outlined{transition:all ease-in-out 0.2s;font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-outlined.filled{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-outlined.clickable:hover{scale:1.1;color:var(--text);cursor:pointer}.material-symbols-outlined.clickable:active{scale:0.9;color:var(--text)}.material-symbols-outlined.clickable.active{color:var(--text)}#screen-loader{display:flex;position:fixed;padding:0;margin:0;top:0;left:0;width:100%;height:100%;background-color:var(--bg-dark);z-index:100}#screen-loader .loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border:0.125rem solid var(--text);scale:2}.track-info p.description{color:var(--text-muted)}.main-grid-container{display:grid;grid-template-areas:"header header header" "menu main queue" "control control control";gap:0.0625rem;height:100vh;height:100svh;grid-template-rows:0.5fr 8fr 0.5fr;grid-template-columns:min-content 1fr min-content;overflow:hidden;background:var(--bg-dark);transition:box-shadow 0.5s ease-in-out}.warning-bar{display:flex;align-items:center;justify-content:center;gap:0.9375rem;background-color:var(--alert-color-red);padding:0.5rem 0}.warning-bar p{color:var(--text)}.warning-bar .loader{border:0.1875rem solid var(--text)}.main-container{grid-area:main;display:flex;flex-direction:column;overflow:hidden}.main-container .center{display:flex;justify-content:center;align-items:center}.main-container .sections{display:flex;flex-direction:column;gap:1.5rem;scrollbar-gutter:stable;overflow-y:scroll;overflow-x:hidden}.main-container .sections .track-header{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0.75rem}.main-container .sections .track-header .small{font-size:0.875rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.main-container .sections .track-header .small.skeleton{width:6.25rem;height:0.9375rem;opacity:0.2;border-radius:0.5rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:0.5s}.main-container .sections .track-header .middle{font-size:1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.main-container .sections .track-header .middle.skeleton{width:18.75rem;height:1.125rem;opacity:0.2;border-radius:0.5rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:1.5s}.main-container .sections .track-header .large{font-size:1.875rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.main-container .sections .track-header .large.skeleton{width:28.125rem;height:2.1875rem;opacity:0.2;border-radius:0.5rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:1s}.main-container .sections .track-header img{width:10rem;height:10rem;border-radius:0.75rem;object-fit:cover}.main-container .sections .track-header .left{display:flex;align-items:flex-end;gap:1.25rem;width:90%}.main-container .sections .track-header .left .track-info{display:flex;flex-direction:column;gap:0.625rem;width:100%;overflow:hidden}.main-container .sections .track-header .actions{display:flex;align-items:center;gap:1.25rem}.main-container .sections .track-header .actions .large{font-size:3.4375rem}.main-container .sections .track-header .actions .middle{font-size:1.875rem}.main-container .sections .track-header .image{display:grid;grid-template-columns:5rem 5rem;grid-template-rows:5rem 5rem;overflow:hidden;border-radius:0.5rem;min-width:10rem}.main-container .sections .track-header .image img{width:5rem;height:5rem;object-fit:cover;border-radius:0}.main-container .sections .track-header .image.skeleton{width:10rem;height:10rem;opacity:0.2;border-radius:0.5rem;animation:skeleton-loading 1s linear infinite alternate}.main-container .sections .track-rows{display:flex;flex-direction:column}.main-container .sections .track-row{display:flex;align-items:center;justify-content:space-between;transition:all ease-in-out 0.2s;padding:0.625rem 1.5rem;border-radius:0.5rem;cursor:pointer}.main-container .sections .track-row:hover{background-color:var(--bg-light)}.main-container .sections .track-row:hover .right span{opacity:1;pointer-events:auto}.main-container .sections .track-row:active{opacity:0.8}.main-container .sections .track-row img{width:3.4375rem;height:3.4375rem;object-fit:cover;border-radius:0.3125rem;margin-left:0.625rem}.main-container .sections .track-row .left{display:flex;align-items:center;gap:0.75rem;width:80%}.main-container .sections .track-row .left .track-info{display:flex;flex-direction:column;overflow:hidden;gap:0.625rem}.main-container .sections .track-row .left .track-info p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.main-container .sections .track-row .right{display:flex;align-items:center;gap:1.125rem}.main-container .sections .track-row .right p{font-size:1rem}.main-container .sections .track-row .right span{opacity:0;pointer-events:none;font-size:1.5625rem}.main-container .sections .footer{padding:1.5rem 0.75rem}.main-container .sections .footer p.right{color:var(--text-muted);margin-left:auto;margin-right:0}.main-container .sections .footer .columns{display:flex;flex-wrap:wrap;flex-grow:1}.main-container .sections .footer .columns .column{display:flex;flex-direction:column;width:20%;min-width:11.25rem;gap:0.5rem;margin-bottom:1.25rem}.main-container .sections .footer .columns .column a{color:var(--text-muted);width:fit-content;padding-bottom:0.5rem}.main-container .sections .footer .columns .column a:hover{color:var(--text);text-decoration:underline}.main-container .sections .footer .columns .column .title{color:var(--text);font-weight:bold;padding-bottom:0.5rem;font-size:1.125rem}.main-container .sections .footer .row{display:flex;flex-wrap:wrap;justify-content:space-between}.main-container .sections .footer .social-icons{display:flex;gap:0.75rem;margin-bottom:1.25rem}.main-container .sections .footer .social-icons a{display:flex;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;background-color:var(--bg-light);border-radius:50%;transition:background-color 0.2s ease-in-out}.main-container .sections .footer .social-icons a:hover{background-color:var(--text-muted)}.main-container .sections .footer .footer-line{height:1px;margin-bottom:1.25rem;background-color:var(--bg-light)}.main-container .section{display:flex;flex-direction:column;margin:0.625rem 0.5rem;gap:0.5rem}.main-container .section .header{display:flex;align-items:end;justify-content:space-between}.main-container .section .header .header-icon{display:flex;align-items:center}.main-container .section .header .header-icon img{width:3.4375rem;height:3.4375rem;border-radius:0.5rem}.main-container .section .header .sub-title{display:flex;flex-direction:column;align-items:start;gap:0.625rem;margin-left:0.75rem;white-space:nowrap}.main-container .section .header .sub-title p{color:var(--text-muted)}.main-container .section .header.skeleton .header-icon img{opacity:0.2;animation:skeleton-loading 1s linear infinite alternate}.main-container .section .header.skeleton p{border-radius:0.3125rem;width:18.75rem;height:0.875rem;opacity:0.2;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:0.8s}.main-container .section .header.skeleton .sub-title h2{border-radius:0.3125rem;width:50%;opacity:0.2;height:1.875rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:0.5s}.main-container .section .lyrics-options{display:flex;align-items:center;overflow-y:auto;gap:0.875rem;margin-left:0.75rem}.main-container .section .lyrics-options::-webkit-scrollbar{display:none}.main-container .section .lyrics-options .option{padding:0.625rem 0.875rem;background-color:var(--bg);border-radius:0.3125rem;cursor:pointer;transition:all 0.2s ease-in-out}.main-container .section .lyrics-options .option:hover{background-color:var(--bg-light)}.main-container .section .lyrics-options .option.active{background-color:var(--bg-light)}.main-container .section .options .option:active{opacity:0.5}.main-container .section .options.skeleton .option{width:4.5rem;height:2.25rem;counter-increment:my-counter;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);opacity:0.2}.main-container .section .options.skeleton .option:nth-child(2){animation-delay:0.5s}.main-container .section .options.skeleton .option:nth-child(3){animation-delay:1s}.main-container .section .options.skeleton .option:nth-child(4){animation-delay:1.5s}.main-container .section .lyrics{display:flex;flex-direction:column;gap:0.625rem;margin-left:0.75rem}.main-container .section .lyrics .line{font-size:1.125rem}.main-container .section .lyrics-options.skeleton .option{height:2.375rem;width:4.75rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);opacity:0.2}.main-container .section .lyrics.skeleton .line{width:50%;min-width:25rem;height:1.25rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);opacity:0.2;border-radius:0.3125rem}.main-container .section .lyrics.skeleton .line:nth-child(even){width:35%;min-width:18.75rem}.main-container .section .lyrics.skeleton .line:not(:first-child){animation-delay:0.5s}.main-container .card-container{display:grid;gap:0.3125rem;grid-template-columns:repeat(auto-fill, minmax(10.625rem, 1fr))}.main-container .card-container .card{display:flex;flex-direction:column;width:100%;gap:0.625rem;cursor:pointer;padding:0.75rem;border-radius:0.625rem;transform:translateY(0.625rem);transition:all ease-in-out 0.2s}.main-container .card-container .card:hover{background-color:var(--bg-light)}.main-container .card-container .card:hover span{bottom:10%;opacity:1;color:#fff}.main-container .card-container .card:active{opacity:0.8}.main-container .card-container .card .thumbnail{position:relative;width:100%}.main-container .card-container .card .thumbnail::before{content:"";display:block;padding-top:100%}.main-container .card-container .card img{position:absolute;object-fit:cover;top:0;left:0;width:100%;height:100%;border-radius:0.625rem}.main-container .card-container .card span{position:absolute;right:7%;bottom:1%;font-size:3.125rem;text-decoration-color:#151125;text-shadow:0 0.125rem 0.5rem gray;opacity:0;transition:all ease-in-out 0.2s}.main-container .card-container .card span:hover{scale:1.1}.main-container .card-container .card span:active{scale:0.9}.main-container .card-container .card .track-info{display:flex;flex-direction:column;gap:0.3125rem}.main-container .card-container .card p{font-size:0.875rem;width:98%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .card-container .card.skeleton img{opacity:0.2;animation:skeleton-loading 1s linear infinite alternate}.main-container .card-container .card.skeleton .title{border-radius:0.3125rem;width:95%;opacity:0.2;height:1.125rem;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:0.5s}.main-container .card-container .card.skeleton .description{width:65%;height:1rem;border-radius:0.3125rem;opacity:0.2;animation:skeleton-loading 1s linear infinite alternate;background-color:var(--loadingStart);animation-delay:1s}.error-container{justify-content:center;align-items:center;height:100%;margin:1.5625rem 0}.error-container img{max-width:18.75rem}.error-container .message{display:flex;flex-direction:column;width:50%;align-items:center;text-align:center;gap:1.25rem;margin-block:1.875rem 1.25rem}.error-container .message p{color:var(--text-muted);line-height:1.25rem}.error-container .reload-btn{padding:0.875rem 1.125rem;border:0.125rem solid var(--bg-light);border-radius:0.5rem;cursor:pointer;transition:all ease-in-out 0.2s}.error-container .reload-btn:hover{background-color:var(--bg-light)}.settings-column{background-color:var(--bg);display:flex;flex-direction:column;border-radius:0.5rem}.settings-column .color-select-container{padding:0.25rem 1.125rem 1rem;display:flex;gap:1rem}.settings-column .color-select-container .color{width:2.75rem;height:2.75rem;border-radius:0.25rem;transition:outline 0.2s ease-in-out, scale 0.2s ease-in-out;outline:0.125rem solid var(--bg);cursor:pointer}.settings-column .color-select-container .color:hover{outline:0.125rem solid var(--text-muted)}.settings-column .color-select-container .color:active{scale:1.05}.settings-column .color-select-container .color.selected{outline:0.125rem solid var(--text)}.settings-row{background-color:var(--bg);padding:1rem 1.125rem;border-radius:0.5rem;display:flex;align-items:center;justify-content:space-between}.settings-row .info{display:flex;flex-direction:column;gap:0.625rem;width:70%}.settings-row .title{color:var(--text)}.settings-row .desc{color:var(--text-muted)}.settings-row input.text-input{outline:none;border:none;background-color:transparent;border-radius:0.5rem;border:0.125rem solid transparent;background-color:var(--bg-light);font-size:0.875rem;padding:0.625rem 0.75rem;width:6.25rem;outline:0.0625rem solid var(--bg-light);transition:outline 0.1s ease-in-out}.settings-row input:hover.text-input{outline:0.125rem solid var(--text-muted)}.settings-row input:focus.text-input{outline:0.125rem solid var(--active-text)}.settings-row .select-container{width:12.5rem;border-radius:0.5rem;background-color:var(--bg-light);font-size:0.875rem;padding:0.625rem 0.75rem;position:relative;outline:0.125rem solid var(--bg);transition:outline 0.1s ease-in-out}.settings-row .select-container:hover{outline:0.125rem solid var(--text-muted)}.settings-row .select-container .selected-container{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.settings-row .select-container .options{display:none;position:absolute;max-height:9.375rem;width:100%;padding:0.1875rem;border-radius:0.5rem;left:0;top:3.125rem;background-color:var(--bg-light);overflow-y:auto;z-index:1}.settings-row .select-container .option{font-size:0.875rem;padding:0.625rem 0.75rem;transition:all 0.2s ease-in-out;border-radius:0.3125rem;cursor:pointer}.settings-row .select-container .option:hover{background-color:var(--bg)}.settings-row.long-input{gap:1.25rem;flex-direction:column;align-items:start}.settings-row.long-input input.text-input{width:100%;height:2.5rem}.switch{position:relative;display:inline-block;width:3.4375rem;height:1.75rem;margin-left:1rem}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--text-muted);-webkit-transition:0.4s;transition:0.4s;border-radius:2.125rem}.switch-slider:before{position:absolute;content:"";height:1.25rem;width:1.25rem;left:0.25rem;bottom:0.25rem;background-color:#fff;-webkit-transition:0.4s;transition:0.4s;border-radius:50%}input:checked+.switch-slider{background-color:var(--active-text)}input:checked+.switch-slider:before{-webkit-transform:translateX(1.6563rem);-ms-transform:translateX(1.6563rem);transform:translateX(1.6563rem)}input:focus+.switch-slider{box-shadow:0 0 0.0625rem var(--active-text)}.changes-bar{position:sticky;bottom:0.625rem;display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1rem;margin:0 1.75rem;z-index:1;background-color:var(--bg-light);border-radius:0.5rem;box-shadow:rgba(149,157,165,0.2) 0rem 0.5rem 1.5rem;opacity:0;transform:translateY(6.25rem);transition:all 0.6s ease-in-out}.changes-bar .left{display:flex;align-items:center;height:2.5rem;gap:0.875rem}.changes-bar .right{display:flex;align-items:center;height:2.5rem;gap:0.875rem}.changes-bar span{color:#ae9328;font-size:2rem}.changes-bar p{font-size:0.9375rem}.changes-bar .reset{text-decoration:underline;cursor:pointer}.changes-bar .submit{padding:0.625rem 0.875rem;background-color:var(--active-text);cursor:pointer;border-radius:0.3125rem;transition:all 0.2s ease-in-out}.changes-bar .submit:hover{background-color:var(--bg)}.changes-bar .submit:active{opacity:0.8}.changes-bar.show{opacity:1;transform:translateY(0)}.server-cards{display:grid;gap:0.9375rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));padding:0 0.75rem}.server-card{display:flex;flex-direction:column;border-radius:0.75rem;overflow:hidden;background-color:var(--bg);cursor:pointer;position:relative;box-shadow:rgba(0,0,0,0.24) 0rem 0.1875rem 0.5rem}.server-card .action-info{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background-color:rgba(0,0,0,0.7);transition:opacity 0.2s ease-in-out;display:flex;justify-content:center;align-items:center;color:var(--text);gap:0.625rem}.server-card .action-info p{color:#fff}.server-card .action-info span{color:#fff;font-size:3rem}.server-card:hover .action-info{opacity:1}.server-card:hover>.banner img{transform:scale(1.2)}.server-card .banner{height:8.125rem;overflow:hidden}.server-card .banner img{height:100%;width:100%;object-fit:cover;transition:all 0.3s ease-in-out}.server-card .info{display:flex;align-items:center;gap:0.9375rem;padding:0.9375rem 1.25rem}.server-card .info .server-icon{width:2.8125rem;border-radius:50%}.server-card .info .server-info{display:flex;flex-direction:column;gap:0.5rem}.server-card .info .server-info .title{color:var(--text)}.server-card .info .server-info .description{color:var(--text-muted)}.context-menu{position:absolute;width:12.5rem;height:fit-content;display:flex;flex-direction:column;background-color:var(--bg-light);border-radius:0.5rem;padding:0.25rem;gap:0.125rem;z-index:10;opacity:0;pointer-events:none;top:0;left:0}.context-menu .row{position:relative;display:flex;align-items:center;padding:0.75rem 0.875rem;gap:0.75rem;border-radius:0.3125rem;cursor:pointer}.context-menu .row:hover{background-color:var(--bg)}.context-menu .row:hover .sub-menu{opacity:1;pointer-events:auto}.context-menu .row .btn{display:flex;align-items:center;justify-content:space-between;width:100%}.context-menu .row .btn .left{display:flex;align-items:center;justify-content:space-between;gap:0.75rem}.context-menu .row span{font-size:1.125rem}.context-menu .row.blocked{cursor:not-allowed}.context-menu .row.blocked:hover{background-color:transparent}.context-menu .row.alert>p{color:#cc8889}.context-menu .row.alert>span{color:#cc8889}.context-menu .sub-menu{position:absolute;width:fit-content;height:fit-content;right:-12.1875rem;background-color:var(--bg-light);border-radius:0.5rem;padding:0.25rem;gap:0.125rem;box-shadow:0 0.3125rem 0.625rem rgba(0,0,0,0.8);pointer-events:none;opacity:0}dialog::backdrop{-webkit-backdrop-filter:blur(0.1875rem);backdrop-filter:blur(0.1875rem)}.modal-background{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100%;z-index:999;animation:fadeInBackground 0.5s forwards}.modal-background.inactive{animation:fadeOutBackground 0.5s forwards}.modal-background.inactive .modal-container{animation:scaleDown 0.5s forwards}.modal-background .modal-container{border:none;outline:none;background-color:var(--bg);border-radius:0.75rem;padding:1.5rem;width:31.25rem;height:fit-content;transition:all 0.2s ease-in-out;box-shadow:rgba(99,99,99,0.2) 0rem 0.125rem 0.5rem 0rem;overflow-y:auto;animation:scaleUp 0.5s forwards}.modal-background .modal-container .header{margin-bottom:1.5625rem}.modal-background .modal-container .header .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}.modal-background .modal-container .header .top .icon{display:flex;align-items:center;justify-content:center;padding:0.4375rem;border-radius:50%;background-color:var(--primary);color:#fff}.modal-background .modal-container .header .top .icon.red{background-color:#cc888959}.modal-background .modal-container .header .top .icon-background{display:flex;align-items:center;justify-content:center;background-color:var(--active-text);border-radius:50%;padding:0.5rem;width:3.375rem;height:3.375rem}.modal-background .modal-container .header .top .icon-background.red{background-color:#cc88896a}.modal-background .modal-container .header .top .close{padding:0.625rem;cursor:pointer}.modal-background .modal-container .header .description{color:var(--text-muted);margin-top:0.5rem}.modal-background .modal-container .section{display:flex;flex-direction:column;gap:0.625rem;margin-bottom:1.5625rem}.modal-background .modal-container .section .title{padding-left:0.125rem}.modal-background .modal-container .section .description{padding-left:0.125rem;font-size:0.75rem}.modal-background .modal-container .section input[type="text"]{width:100%;height:2.8125rem;padding:0.625rem 0.9375rem;border:none;outline:0.0625rem solid var(--bg);border-radius:0.5rem;background-color:transparent;background-color:var(--bg-light);transition:outline 0.1s ease-in-out;font-size:0.875rem}.modal-background .modal-container .section input[type="text"]:hover{outline:0.125rem solid var(--text-muted)}.modal-background .modal-container .section input[type="text"]:focus{outline:0.125rem solid var(--active-text)}.modal-background .modal-container .section .select-container{position:relative;width:100%;height:2.8125rem;border-radius:0.5rem;padding:0.625rem 0.9375rem;background-color:var(--bg-light);outline:0.0625rem solid var(--bg);transition:outline 0.1s ease-in-out;cursor:pointer}.modal-background .modal-container .section .select-container:hover{outline:0.125rem solid var(--text-muted)}.modal-background .modal-container .section .select-container .selected-container{display:flex;align-items:center;justify-content:space-between}.modal-background .modal-container .section .select-container .options{display:none;position:absolute;width:100%;height:fit-content;row-gap:0.125rem;padding:0.1875rem;left:0;top:3.125rem;background-color:var(--bg-light);border-radius:0.5rem}.modal-background .modal-container .section .select-container .options .option{padding:0.75rem;border-radius:0.5rem;cursor:pointer}.modal-background .modal-container .section .select-container .options .option:hover{background-color:var(--bg)}.modal-background .modal-container .section.error p{color:var(--red)}.modal-background .modal-container .section.error input[type="text"]{outline:0.125rem solid var(--red)}.modal-background .modal-container .footer{padding-top:0.625rem;display:flex;align-items:center;justify-content:space-between}.modal-background .modal-container .footer .btn{display:flex;align-items:center;justify-content:center;width:48%;padding:0.625rem 1.125rem;border-radius:0.5rem;border:0.125rem solid var(--bg-light);cursor:pointer;transition:all 0.2s ease-in-out}.modal-background .modal-container .footer .btn.submit{border:none;background-color:var(--active-text)}.modal-background .modal-container .footer .btn.submit.red{background-color:var(--red)}.modal-background .modal-container .footer .btn.close{color:#cc8889}.modal-background .modal-container .footer .btn.close:hover{color:white;background-color:#cc8889}.modal-background .shortcuts-modal{width:43.75rem;max-height:80vh;overflow-y:auto}.modal-background .shortcuts-modal .shortcuts-content{margin-bottom:1.5625rem}.modal-background .shortcuts-modal .shortcuts-category{margin-bottom:1.875rem}.modal-background .shortcuts-modal .shortcuts-category:last-child{margin-bottom:0}.modal-background .shortcuts-modal .shortcuts-category .category-title{font-size:1.125rem;font-weight:600;color:var(--text);margin-bottom:0.9375rem;padding-bottom:0.5rem;border-bottom:0.0625rem solid var(--bg-light)}.modal-background .shortcuts-modal .shortcuts-category .shortcuts-list{display:flex;flex-direction:column;gap:0.75rem}.modal-background .shortcuts-modal .shortcuts-category .shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:0.75rem;background-color:var(--bg-light);border-radius:0.5rem;transition:background-color 0.2s ease-in-out}.modal-background .shortcuts-modal .shortcuts-category .shortcut-item:hover{background-color:var(--bg)}.modal-background .shortcuts-modal .shortcuts-category .shortcut-item .shortcut-key{font-family:"Monaco", "Menlo", "Ubuntu Mono", monospace;font-size:0.875rem;font-weight:500;color:var(--active-text);background-color:var(--bg);padding:0.375rem 0.75rem;border-radius:0.375rem;border:0.0625rem solid var(--text-muted);min-width:6.25rem;text-align:center}.modal-background .shortcuts-modal .shortcuts-category .shortcut-item .shortcut-description{font-size:0.875rem;color:var(--text);flex:1;margin-left:1rem}.modal-background .shortcuts-modal .footer{justify-content:center}.modal-background .shortcuts-modal .footer .btn{width:auto;min-width:6.25rem}.alert-msg{position:absolute;color:white;width:2.8125rem;height:2.8125rem;z-index:10;top:-1.25rem;left:0;right:0;margin:0 auto;overflow:hidden;opacity:0;transform:scale(0);transition:all 0.6s;border-radius:5rem;background-color:var(--bg-light);box-shadow:rgba(99,99,99,0.2) 0rem 0.125rem 0.5rem 0rem;backdrop-filter:blur(0.625rem)}.alert-msg a{color:var(--text);text-decoration:underline}.alert-msg .alert-msg--content{opacity:0}.alert-msg .alert-msg--words{font-size:0.875rem;opacity:0;transition:all 0.3s;transition-delay:0.5s;white-space:nowrap;display:flex;justify-content:center;align-items:center;margin-left:3.4375rem;height:2.8125rem;color:var(--text)}.alert-msg .alert-msg--icon{display:flex;align-self:center;justify-self:center;height:2.8125rem;width:2.8125rem;object-fit:cover;float:left;border-radius:50%;padding:0.25rem}.alert-msg.alert-msg__active{position:absolute;opacity:1;top:-3.4375rem;transform:scale(1)}.alert-msg.alert-msg__extended{width:500px}.alert-msg.alert-msg__extended .alert-msg--content{opacity:1;transition:all 0.5s}.alert-msg.alert-msg__extended .alert-msg--words{opacity:1}.alert-msg.error{background-color:var(--alert-color-red)}.alert-msg.success{background-color:var(--alert-color-green)}.alert-msg.info{background-color:var(--alert-color-yellow)}.effect-panel{position:absolute;bottom:1.875rem;padding:0.9375rem;height:22.0625rem;width:21.875rem;right:0%;background-color:var(--bg-dark);opacity:0;transition:all 0.3s ease-in-out;border-radius:0.5rem;box-shadow:rgba(99,99,99,0.2) 0rem 0.125rem 0.5rem 0rem;display:flex;flex-direction:column;gap:0.625rem;pointer-events:none;overflow:hidden}.effect-panel::-webkit-scrollbar{display:none}.effect-panel .section{background-color:var(--bg-light);display:flex;align-items:center;justify-content:space-between;padding:0.75rem;border-radius:0.3125rem}.effect-panel .info p{margin-top:0.1875rem;color:var(--text-muted)}.effect-panel .options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.625rem}.effect-panel .options .option{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.625rem;background-color:var(--bg-light);cursor:pointer;padding:0.75rem;border-radius:0.3125rem;transition:all 0.2s ease-in-out}.effect-panel .options .option p{color:var(--text-muted);transition:all 0.2s ease-in-out}.effect-panel .options .option:hover{background-color:var(--bg)}.effect-panel .options .option:hover span{color:var(--text)}.effect-panel .options .option:hover p{color:var(--text)}.effect-panel .options .option.active{background-color:var(--active-text)}.effect-panel .options .option.active span{color:var(--text)}.effect-panel .options .option.active p{color:var(--text)}.effect-panel .control{display:flex;flex-direction:column;gap:0.625rem}.effect-panel .control .control-section{position:relative;background-color:var(--bg-light);padding:0.75rem;border-radius:0.3125rem}.effect-panel .control .control-section p{font-size:1rem;font-weight:700}.effect-panel .control .control-section .position-info{position:absolute;top:0.3125rem;padding:0.3125rem 0.625rem;background-color:var(--bg);border-radius:0.3125rem;left:-0.625rem;opacity:0;transition:opacity 0.2s ease-in-out}.effect-panel .control .control-section:hover .position-info{opacity:1}.effect-panel .control .control-section .slider{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;border-radius:0.9375rem;height:0.3125rem;transition:all 0.2s ease-in-out;background:var(--text-muted);margin-top:1.25rem}.effect-panel .control .control-section .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:0.9375rem;width:0.9375rem;background-color:var(--active-text);border-radius:50%;border:none;transition:0.2s ease-in-out}.effect-panel.active{opacity:1;transform:translateY(-1.25rem);pointer-events:auto;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}@keyframes l20-1{0%{clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)}12.5%{clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%)}25%{clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%)}50%{clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%)}100%{clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0deg)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0deg)}100%{transform:scaleY(-1) rotate(-135deg)}}@keyframes skeleton-loading{0%{background-color:var(--loadingStart)}100%{background-color:var(--loadingEnd)}}@keyframes fadeInBackground{0%{background:rgba(0,0,0,0);backdrop-filter:blur(0rem)}100%{background:rgba(0,0,0,0.7);backdrop-filter:blur(0.375rem)}}@keyframes fadeOutBackground{0%{background:rgba(0,0,0,0.7);backdrop-filter:blur(0.375rem)}100%{background:rgba(0,0,0,0);backdrop-filter:blur(0rem)}}@keyframes scaleUp{0%{transform:scale(0.9) translateY(200%);opacity:0}80%{transform:scale(0.9) translateY(0rem);opacity:1}100%{transform:scale(1)}}@keyframes scaleDown{0%{transform:scale(1)}35%{transform:scale(0.9) translateY(0rem);opacity:1}100%{transform:translateY(200%);opacity:0}}@media (max-width: 768px){.alert-msg.alert-msg__extended{width:90vw}}