@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";@property --color-accent{syntax:"<color>";inherits:true;initial-value:#000}@keyframes animation-lyric-slideIn{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translateY(0)}}#lyricsContainer{justify-content:center;max-height:100%;display:flex;position:relative;overflow:hidden scroll}#lyricsContainer:before{content:"";z-index:-1;background-image:linear-gradient(135deg, hsl(from var(--color-accent) h 50 10) 5%, hsl(from var(--color-accent) h 20 7) 95%);width:100vw;height:100vh;transition:all 1s cubic-bezier(0,1,.3,1);display:block;position:fixed;left:0;right:0}#lyricsContainer #lyrics-editor-line-indicator{background:#ffffff40;width:5px;height:0;transition:all .2s cubic-bezier(.34,1.56,.64,1);position:absolute;left:0;top:0!important}#lyricsContainer #lyrics-positionIndicator{color:#ffffff40;background:#ffffff40;width:3px;margin:0;font-family:Instrument Sans;transition:all .2s cubic-bezier(.34,.96,.64,1);position:absolute;transform:translate(-18px)}#lyricsContainer #lyrics{border-left:1px solid #ffffff1a;flex-direction:column;gap:1.5rem;max-width:50vw;height:fit-content;min-height:100%;margin-left:100px;margin-right:calc(4rem + 1px);padding:6rem 0 0 4rem;display:flex}#lyricsContainer #lyrics .header{color:#ffffff80}#lyricsContainer #lyrics .header .title{color:#ffffff80;margin:0 0 2rem;font-size:2.5rem;font-weight:600}#lyricsContainer #lyrics .header .author{color:#ffffff80;margin:2rem 0 0;font-size:1.25rem;font-weight:600}#lyricsContainer #lyrics .lyricsLine{line-height:100%}#lyricsContainer #lyrics p{color:#ffffff40;opacity:0;cursor:pointer;align-items:flex-start;margin:0;font-size:2rem;font-weight:600;transition:all 1s cubic-bezier(0,1,.3,1);animation:.5s cubic-bezier(0,.58,.17,1) animation-lyric-slideIn;display:flex;animation-fill-mode:forwards!important}#lyricsContainer #lyrics p[data-active=true]{color:#fff}#lyricsContainer #lyrics p:hover{background:#fff3}#lyricsContainer #lyrics p:hover[data-active=false]{color:#ffffff80}#lyricsContainer #lyrics p .timestamp{font-family:JetBrains Mono;font-size:12px;position:absolute;top:.4rem;left:-150px}#lyricsContainer #lyrics p .timestamp[data-modified=true]{-webkit-text-decoration:underline wavy;text-decoration:underline wavy}#lyricsContainer #lyrics .theEnd{text-align:center;color:#ffffff40;margin:1rem 0 2rem;font-size:1rem;font-weight:600}#app[data-zen=true] #player[data-collapsable=true]{position:fixed;transform:translateY(70px)}#app[data-zen=true] #player[data-collapsable=true]:hover{transform:translateY(0)}#player{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border-top:2px solid #ffffff1a;justify-content:center;align-items:center;width:100%;height:fit-content;padding:20px 10px;transition:all .25s cubic-bezier(0,.78,.17,1);display:flex}#player label[data-type=file],#player button{color:#fff;background:#ffffff1a;border:none;width:fit-content;height:fit-content;padding:.5rem 1rem;font-size:15px;transition:all .3s cubic-bezier(0,1,.3,1)}#player label[data-type=file]:hover,#player button:hover{background:#fff3}#player label[data-type=file]:active,#player button:active{background:#ffffff1a}#player button[disabled]{opacity:.5}#player button[disabled]:hover,#player button[disabled]:active{background:#ffffff1a}#player input[type=file]{display:none}#player .queueControls,#player .controls{height:fit-content;display:flex}#player .queueControls>*,#player .controls>*{justify-content:center;align-items:center;width:fit-content;min-height:40px;display:flex}#player .sliders{align-items:center;gap:1rem;margin:0 2rem;display:flex}#player .sliders #player-slider-progress{width:20rem;margin:0}#player .sliders #player-slider-volume{width:5rem}#player .sliders #button-newline{bottom:20px;right:20px}#player .sliders #player-label-progress,#player .sliders #player-label-volume{flex-direction:column;align-items:center;line-height:100%;display:flex}#player .sliders #player-label-progress p,#player .sliders #player-label-volume p{margin:0 0 5px}@keyframes animationQueueItemSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes animationSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes animationPlaceholderShine{0%{background-position-x:-40px}to{background-position-x:calc(100% + 40px)}}#app[data-zen=true] #queueContainer[data-collapsable=true]{position:fixed;transform:translate(calc(312px - 3rem))}#app[data-zen=true] #queueContainer[data-collapsable=true] .queueEmptyIndicator,#app[data-zen=true] #queueContainer[data-collapsable=true] #queue h1{opacity:0;transition:all .3s cubic-bezier(0,.78,.17,1)}#app[data-zen=true] #queueContainer[data-collapsable=true] #queue .queueItem{padding-left:10px}#app[data-zen=true] #queueContainer[data-collapsable=true] #queue .queueItem[data-playing=true]{border:2px solid #0000}#app[data-zen=true] #queueContainer[data-collapsable=true] #queue .queueItem img{margin-right:calc(1.5rem + 10px)}#app[data-zen=true] #queueContainer[data-collapsable=true]:hover{transform:translate(0)}#app[data-zen=true] #queueContainer[data-collapsable=true]:hover .queueEmptyIndicator:not([data-hidden=true]),#app[data-zen=true] #queueContainer[data-collapsable=true]:hover #queue h1{opacity:1}#app[data-zen=true] #queueContainer[data-collapsable=true]:hover #queue .queueItem[data-playing=true]{background:#ffffff26;border-color:#0000}#queueContainer{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border-left:2px solid #ffffff1a;width:380px;min-width:300px;transition:all .3s cubic-bezier(0,.78,.17,1);position:relative}#queueContainer .queueEmptyIndicator{text-align:center;color:#ffffff40;opacity:1;margin:2rem 0;font-size:14px;font-weight:500;transition:all .5s cubic-bezier(0,.78,.17,1)}#queueContainer .queueEmptyIndicator[data-hidden=true]{opacity:0;position:absolute;transform:translateY(40px)}#queueContainer h1,#queueContainer h2,#queueContainer h3,#queueContainer h4,#queueContainer p{color:#ffffffbf;margin:0;font-weight:600}#queueContainer:has(.queueItem) h2{display:none}#queueContainer #queue{flex-direction:column;gap:10px;height:100%;padding:0 1.5rem 1.5rem;display:flex;top:0;right:0;overflow:hidden scroll}#queueContainer #queue h1{color:#fff;height:fit-content;padding:1.75rem 0 .75rem .25rem;font-size:28px;font-weight:500;position:sticky}#queueContainer #queue h1 span{color:#ffffff26;font-family:JetBrains Mono;font-weight:500}#queueContainer #queue .queueItem{cursor:default;-webkit-user-select:none;user-select:none;border:2px solid #0000;width:100%;padding:10px;transition:all .3s cubic-bezier(.63,.234,0,1),border .5s cubic-bezier(0,1,.3,1);animation:.4s cubic-bezier(.63,.234,0,1) animationQueueItemSlideIn;display:flex;position:relative}#queueContainer #queue .queueItem:hover{border-color:#ffffff40}#queueContainer #queue .queueItem[data-playing=true] p{color:#fff}#queueContainer #queue .queueItem[data-playing=true]{background:#ffffff26;border-left-color:#ffffff40;padding-left:20px}#queueContainer #queue .queueItem[data-removed=true]{opacity:0;transform:translate(380px)}#queueContainer #queue .queueItem .loader{opacity:.75;width:30px;height:30px;margin:10px calc(10px + 1rem) 10px 10px;animation:1s linear infinite animationSpin}#queueContainer #queue .queueItem p{width:fit-content;font-size:15px;font-weight:600}#queueContainer #queue .queueItem p[data-loading=true]{clip-path:border-box;position:relative}#queueContainer #queue .queueItem p[data-loading=true] span{background:linear-gradient(90deg,#ffffff80 50%,#0000 0%) 0 0/40px 100% no-repeat;width:calc(100% + 20px);height:100%;animation:1s infinite animationPlaceholderShine;display:block;transform:translate(-10px)skew(-25deg)}#queueContainer #queue .queueItem p[data-loading=true]{color:#0000;background:#ffffff26}#queueContainer #queue .queueItem img{object-fit:cover;width:50px;height:50px;margin-right:1rem}#queueContainer #queue .queueItem .trackInfo{flex-direction:column;justify-content:center;gap:1px;display:flex;overflow:hidden}#queueContainer #queue .queueItem .trackInfo p{text-overflow:ellipsis;text-wrap-mode:nowrap}#queueContainer #queue .queueItem .trackInfo .trackHeader{align-items:center;gap:5px;display:flex}#queueContainer #queue .queueItem .trackInfo .trackHeader .name{font-size:18px;font-weight:600}#queueContainer #queue .queueItem .trackInfo .trackHeader .format{background:#ffffff59;height:fit-content;margin-top:2px;margin-right:6px;padding:0 7px 2px;font-size:13px;font-weight:800}#queueContainer #queue .queueItem .trackInfo .trackDetails .artist{color:#ffffff80}#appContextMenu{z-index:-100;opacity:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);cursor:default;-webkit-user-select:none;user-select:none;background:#7777770d;border:2px solid #ffffff26;flex-direction:column;transition:opacity .2s cubic-bezier(.63,.234,0,1);display:flex;position:absolute}#appContextMenu[data-visible=true]{z-index:100;opacity:1}#appContextMenu p{margin:0}#appContextMenu .clickable{color:#fff;border:none;align-items:center;gap:1rem;height:fit-content;padding:.75rem;font-size:15px;transition:all .3s cubic-bezier(0,1,.3,1);display:flex}#appContextMenu .clickable:hover{background:#ffffff26}#appContextMenu .clickable:active{background:#ffffff0d}#appOverlay{z-index:10;position:absolute;top:20px;left:20px}#loadingBar{color:#ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#000000f2;border-top:1px solid #ffffff14;align-items:center;gap:.75rem;padding:6px 1rem;font-size:13px;display:flex;position:sticky;bottom:0}#loadingBar[data-hidden=true]{display:none}#loadingBar .track{background:#ffffff1f;border-radius:2px;flex:1;height:4px;overflow:hidden}#loadingBar .track .fill{background:#ffffff73;border-radius:2px;width:0%;height:100%;transition:width .25s}body{color:#fff;background:#000;flex-direction:column;height:100vh;margin:0;font-family:Instrument Sans;display:flex;overflow-x:hidden}*{box-sizing:border-box;scrollbar-color:#fff3 transparent}::selection{color:#fff;background:#ffffff4d}#app{grid-template-rows:1fr auto;height:100vh;display:grid;overflow:hidden}#app #contentContainer{width:100%;height:1fr;flex:1;display:flex;overflow:hidden}#app #contentContainer .mainContainer{flex:1}
