:root{--bg0: #fff;--bg1: #eee;--bg2: #ddd;--color: black;--color1: #222}@media (prefers-color-scheme: dark){:root{--bg0: #000;--bg1: #222;--bg2: #444;--color: #eee;--color1: #ccc}}body,button{background-color:var(--bg0);color:var(--color)}body{display:flex;margin:0;overflow:hidden;-webkit-text-size-adjust:100%}body div{padding:.5rem}#col_select{width:18rem;display:flex;flex-direction:column}#col_select *{padding:.5rem;margin-top:.5rem;width:18rem}#col_select button{width:80%}#upload_open,#offline_open{display:flex;align-items:center;gap:.5rem;cursor:pointer;border:solid 1px var(--color);background-color:var(--bg0);color:var(--color)}#upload_open:hover,#offline_open:hover{background-color:var(--bg1)}#upload_open svg,#upload_open span,#offline_open svg,#offline_open span{width:auto;margin-top:0;padding:0}#col_list,#song_list{flex-grow:1;border-right:solid var(--color);border-left:solid var(--color);overflow:scroll;height:100vh}#foot_image img{display:block;margin:0 auto}#song_list img{width:15rem}#songs{width:stretch}@media (max-width: 768px){body{flex-direction:column;overflow:auto;overflow-x:hidden}#col_select{width:100%;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;flex-shrink:0;position:sticky;top:0;z-index:50;background-color:var(--bg0);gap:.4rem;align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch}#col_select::-webkit-scrollbar{display:none}#col_select *{width:auto;white-space:nowrap;margin-top:0;flex-shrink:0}#col_select a{padding:.5rem .9rem;border-radius:999px;background-color:var(--bg1);color:var(--color);text-decoration:none;-webkit-tap-highlight-color:transparent}#col_select button{width:auto}#col_select>input{display:none}#offline_open{padding:.5rem .9rem;border-radius:999px;background-color:var(--bg1);border:none;-webkit-tap-highlight-color:transparent;flex-shrink:0}#upload_open{padding:.5rem .9rem;border-radius:999px;background-color:var(--bg1);border:none;-webkit-tap-highlight-color:transparent;position:sticky;right:-.5rem;z-index:1;box-shadow:0 0 0 .45rem var(--bg0)}#upload_open span{display:none}#col_list,#song_list{border-left:none;border-right:none;border-top:solid var(--color);height:auto;overflow:visible;padding-bottom:calc(5rem + env(safe-area-inset-bottom))}#song_list img{width:100%;max-width:15rem}}#albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));place-content:start;min-height:100%}#albums a{display:flex;flex-direction:column;text-decoration:none;color:var(--color);margin:.3rem;padding:.5rem}#albums a:hover{background-color:var(--bg1)}.art_container{position:relative;padding:0}img.art{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.art_container:hover .play_arrow{display:block}.play_arrow{width:20%;position:absolute;bottom:.8rem;left:.8rem;display:none;background-color:#2228;border-radius:100%}.play_arrow:hover{background-color:#222c}#albums .desc{padding:.3rem 0 0;overflow:hidden}#albums .title,#albums .artist{padding:0;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}#albums .artist{font-size:.95rem;color:var(--color1)}@media (hover: none){.play_arrow{display:block;width:26%;background-color:#222a}}@media (max-width: 768px){#albums{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}#albums a{margin:.15rem;padding:.35rem}.play_arrow{bottom:.4rem;left:.4rem}}#col_player{display:flex;flex-direction:column;width:20rem}#col_player *{padding:.5rem}#col_player>img{width:19rem;aspect-ratio:1/1;object-fit:contain}#col_player #title{display:inline;min-height:1.5rem}#col_player p{margin:0}#buttons{display:flex;padding:0;align-items:center;margin:0 auto}#buttons a{cursor:pointer;display:block;border-radius:100%}#buttons a{color:var(--color)}#buttons a.active{color:#0b66d4}#buttons img,#buttons svg{display:block}#buttons a:hover{background-color:var(--bg1)}#queue_open,#queue_head{display:none}#col_player #queue_panel{display:flex;flex-direction:column;flex-basis:0;flex-grow:1;min-height:0;padding:0}#col_player ul{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;-webkit-user-select:none;user-select:none;list-style-type:none}#title,#col_player li,#col_player .queue_row{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}#col_player .queue_item{padding:0}#col_player .queue_row{padding:.5rem}.queue_item{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#col_player .queue_delete{padding:0 1rem}.queue_delete{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:flex-end;background-color:#d33;color:#fff;font-size:.9rem}.queue_item.armed .queue_delete{background-color:#a11}.queue_row{position:relative;display:block;background-color:var(--bg0)}.queue_item.swiping .queue_row{transition:none}.queue_item:not(.swiping) .queue_row{transition:transform .15s ease}.queue_item.dragging{z-index:1;opacity:.9}.queue_item.dragging .queue_row{background-color:var(--bg1);box-shadow:0 4px 12px #0005}#col_player li:hover .queue_row,.queue_item.playing .queue_row{background-color:var(--bg1)}#col_player .queue_item.playing:hover .queue_row{background-color:var(--bg2)}#counter{-webkit-user-select:none;user-select:none}#player_close{display:none;background:none;border:none;cursor:pointer;color:var(--color);padding:.25rem;align-self:flex-start}#artist{margin:0;color:var(--color1);font-size:.85rem;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}#time,#volume{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:linear-gradient(90deg,#0b66d4,#ccc 0%);cursor:pointer;padding:0}#volume{margin-top:.75rem}#time{margin:.75rem 0}#time::-webkit-slider-thumb,#volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:5px;height:24px;background:#0b66d4;box-shadow:none}#time::-moz-range-thumb,#volume::-moz-range-thumb{border-radius:0;width:5px;height:24px;background:#06b6d4;box-shadow:none}@media (max-width: 768px){#col_player{position:fixed;bottom:0;left:0;right:0;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:.5rem;padding:.5rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom));overflow:hidden;background-color:var(--bg0);border-top:1px solid var(--color);z-index:100}#col_player *{padding:0}#col_player>img{width:3.5rem;height:3.5rem;flex-shrink:0;object-fit:cover;cursor:pointer}#col_player #title{flex:1;min-width:0;cursor:pointer}#artist,#counter,#time,#volume,#col_player ul,#queue_panel,#queue_open,#player_close{display:none}#queue_panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:110;background-color:var(--bg0);box-sizing:border-box;transform:translate(100%);visibility:hidden;transition:transform .25s ease,visibility .25s}#buttons #loop,#buttons #mute{display:none}#buttons{flex-shrink:0;margin:0;gap:.25rem}#col_player #buttons a{padding:.6rem;-webkit-tap-highlight-color:transparent}#col_player.expanded{top:0;height:100vh;height:100dvh;flex-direction:column;align-items:stretch;overflow:hidden;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));gap:0}#col_player.expanded *{padding:.5rem}#col_player.expanded #time,#col_player.expanded #volume{padding:0}#col_player.expanded #player_close{display:flex;align-items:center;padding:.5rem;margin:-.5rem 0 .25rem -.5rem;flex-shrink:0}#col_player.expanded>img{width:min(40dvh,calc(100vw - 2rem));height:min(40dvh,calc(100vw - 2rem));aspect-ratio:auto;margin:0 auto;flex-shrink:0;object-fit:cover;cursor:default}#col_player.expanded #loop,#col_player.expanded #mute{display:block}#col_player.expanded #title{font-size:1.1rem;font-weight:700;cursor:default;white-space:normal;text-overflow:clip;overflow:visible;display:block}#col_player.expanded #artist,#col_player.expanded #counter,#col_player.expanded #time,#col_player.expanded #volume,#col_player.expanded ul{display:block}#col_player.expanded #queue_open{display:flex;align-items:center;gap:.35rem;margin-top:auto;align-self:flex-end;padding:.5rem .75rem;font-size:.85rem;flex-shrink:0;background:none;border:solid 1px var(--color);color:var(--color);cursor:pointer;-webkit-tap-highlight-color:transparent}#col_player.expanded #queue_open svg{padding:0;width:20px;height:20px}#col_player.expanded #buttons{margin:0 auto;flex-shrink:0;gap:.5rem}#col_player.expanded #title,#col_player.expanded #artist,#col_player.expanded #counter{flex-shrink:0}#col_player.expanded #queue_panel{display:flex;flex-direction:column;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}#col_player.expanded #queue_panel.open{transform:none;visibility:visible}#col_player.expanded #queue_head{display:flex;align-items:center;gap:.5rem;flex-shrink:0;padding:0 0 .5rem}#col_player.expanded #queue_close{display:flex;align-items:center;padding:.5rem;margin-left:-.5rem;background:none;border:none;color:var(--color);cursor:pointer;-webkit-tap-highlight-color:transparent}#col_player.expanded #queue_title{font-size:1.1rem;font-weight:700;padding:0}#col_player.expanded ul{list-style-type:none;padding:0;margin:0;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}#col_player.expanded li{padding:0}#col_player.expanded .queue_row{padding:.7rem .5rem}#col_player.expanded #time,#col_player.expanded #volume{height:8px;flex-shrink:0}#col_player.expanded #time::-webkit-slider-thumb,#col_player.expanded #volume::-webkit-slider-thumb{width:18px;height:18px;border-radius:50%}#col_player.expanded #time::-moz-range-thumb,#col_player.expanded #volume::-moz-range-thumb{width:18px;height:18px;border-radius:50%}}#top{display:flex}#top img{aspect-ratio:1/1;object-fit:contain}#top .title{font-size:1.5rem;font-weight:700}#top .artist{color:var(--color1)}#songs>div{display:flex;-webkit-user-select:none;user-select:none}#songs>div:hover{background-color:var(--bg1)}#songs .track{width:2rem;text-align:center}#songs .title{flex-grow:1;min-width:0;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}#songs .duration{text-align:right;width:4rem}.song_saved{display:flex;align-items:center;flex-shrink:0;color:var(--color1)}.song_menu{display:none}.album_menu{display:flex;align-items:center;margin-top:.5rem;padding:.4rem;background:none;border:none;color:var(--color1);cursor:pointer;-webkit-tap-highlight-color:transparent}.album_menu:hover{background-color:var(--bg2);color:var(--color)}@media (max-width: 768px){#top{flex-direction:column}#top img{width:100%;max-width:20rem;margin:0 auto}#top .title{font-size:1.2rem}#songs>div{align-items:center;min-height:2.75rem;-webkit-touch-callout:none}#songs .artist{display:none}#songs .track{width:1.75rem;padding-left:0;padding-right:0;color:var(--color1)}#songs .duration{width:auto;padding-right:0;color:var(--color1)}.song_menu{display:flex;align-items:center;flex-shrink:0;padding:.5rem;margin-left:.25rem;background:none;border:none;color:var(--color1);cursor:pointer;-webkit-tap-highlight-color:transparent}.song_menu svg{width:20px;height:20px}}#upload_overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:300;padding:1rem}#upload_modal{background-color:var(--bg0);color:var(--color);border:solid var(--color);width:min(34rem,100%);max-height:min(42rem,90dvh);display:flex;flex-direction:column;box-sizing:border-box;padding:1rem}#upload_modal div{padding:0}.upload_head{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.upload_title{font-size:1.15rem;font-weight:700}.upload_count{color:var(--color1);font-size:.9rem;margin-left:auto}.upload_close{display:flex;align-items:center;background:none;border:none;color:var(--color);cursor:pointer;padding:.4rem;margin-left:auto}.upload_count+.upload_close{margin-left:0}.upload_close:hover{background-color:var(--bg1)}.upload_drop{margin-top:.75rem;border:2px dashed var(--bg2);border-radius:.5rem;text-align:center;padding:1.25rem 1rem;cursor:pointer;color:var(--color1);flex-shrink:0}.upload_drop:hover,.upload_drop.dragging{border-color:#0b66d4;background-color:var(--bg1);color:var(--color)}.upload_drop p{margin:.5rem 0 0}.upload_drop svg{display:block;margin:0 auto}.upload_hint{font-size:.8rem;color:var(--color1)}.upload_picks{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.upload_pick{margin-top:.75rem;padding:.5rem 1rem;cursor:pointer;border:solid 1px var(--color);border-radius:999px;background-color:var(--bg0);color:var(--color)}.upload_pick:hover{background-color:var(--bg2)}.upload_input{display:none}.upload_list{list-style-type:none;margin:.75rem 0 0;padding:0;overflow-y:auto;flex:1 1 auto;min-height:0}.upload_item{padding:.5rem 0;border-top:solid 1px var(--bg2)}.upload_item_row{display:flex;align-items:center;gap:.5rem}.upload_name{flex:1 1 auto;min-width:0;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.upload_folder{color:var(--color1)}.upload_size{color:var(--color1);font-size:.85rem;flex-shrink:0}.upload_remove{display:flex;align-items:center;background:none;border:none;color:var(--color1);cursor:pointer;padding:.25rem;flex-shrink:0}.upload_remove:hover{color:var(--color);background-color:var(--bg1)}.upload_bar{height:4px;background-color:var(--bg2);margin-top:.4rem;overflow:hidden}.upload_bar_fill{height:100%;width:0;background-color:#0b66d4;transition:width .15s linear}.upload_item.done .upload_bar_fill{background-color:#1a9c4b}.upload_item.error .upload_bar_fill{background-color:#d33}.upload_item.processing .upload_bar_fill{animation:upload_pulse 1s ease-in-out infinite}@keyframes upload_pulse{0%,to{opacity:1}50%{opacity:.35}}.upload_status{font-size:.8rem;color:var(--color1);margin-top:.3rem}.upload_item.error .upload_status{color:#e35b5b}.upload_item.done .upload_status{color:#37b563}.upload_foot{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:.75rem;flex-shrink:0}.upload_foot button{padding:.5rem .9rem;cursor:pointer;border:solid 1px var(--color);background-color:var(--bg0);color:var(--color)}.upload_foot button:hover{background-color:var(--bg2)}.upload_failed{color:#e35b5b;font-size:.85rem;margin-right:auto}#upload_pill{position:fixed;right:1rem;bottom:1rem;z-index:250;padding:.6rem 1rem;border-radius:999px;border:solid 1px var(--color);background-color:var(--bg1);color:var(--color);cursor:pointer}@media (max-width: 768px){#upload_overlay{padding:0;align-items:flex-end}#upload_modal{width:100%;max-height:88dvh;border:none;border-top:solid var(--color);padding-bottom:calc(1rem + env(safe-area-inset-bottom))}.upload_pick{padding:.7rem 1.25rem}.upload_remove{padding:.5rem}.upload_foot button{padding:.7rem 1rem}#upload_pill{bottom:calc(5rem + env(safe-area-inset-bottom))}}#menu_overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:280}#context_menu{position:fixed;min-width:12rem;margin:0;padding:.25rem 0;list-style-type:none;background-color:var(--bg0);color:var(--color);border:solid 1px var(--color);box-shadow:0 4px 16px #0004}.menu_item{display:block;width:100%;padding:.6rem 1rem;text-align:left;background:none;border:none;color:var(--color);font-size:1rem;cursor:pointer}.menu_item:hover{background-color:var(--bg2)}.menu_item.danger{color:#d33}.menu_item.danger:hover{background-color:#d33;color:#fff}@media (max-width: 768px){.menu_item{padding:.85rem 1rem}}#offline_overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:300;padding:1rem}#offline_modal{background-color:var(--bg0);color:var(--color);border:solid var(--color);width:min(38rem,100%);max-height:min(44rem,90dvh);display:flex;flex-direction:column;box-sizing:border-box;padding:1rem}#offline_modal div{padding:0}.offline_head{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.offline_title{font-size:1.15rem;font-weight:700}.offline_close{display:flex;align-items:center;background:none;border:none;color:var(--color);cursor:pointer;padding:.4rem;margin-left:auto}.offline_close:hover{background-color:var(--bg1)}.offline_progress{margin-top:.75rem;flex-shrink:0}.offline_progress_row{display:flex;align-items:center;gap:.5rem}.offline_progress_name{flex:1 1 auto;min-width:0;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.offline_progress_count{color:var(--color1);font-size:.85rem;flex-shrink:0}.offline_bar{height:4px;background-color:var(--bg2);margin-top:.4rem;overflow:hidden}.offline_bar_fill{height:100%;width:0;background-color:#0b66d4;transition:width .15s linear}.offline_failed{margin-top:.75rem;color:#e35b5b;font-size:.85rem}.offline_stats{margin-top:.75rem;flex-shrink:0}.offline_sub{color:var(--color1);font-size:.85rem;margin-top:.2rem}.offline_setting{margin-top:.75rem;padding-top:.75rem;border-top:solid 1px var(--bg2);flex-shrink:0}.offline_setting label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.offline_limit{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.9rem;color:var(--color1);flex-wrap:wrap}.offline_limit select,.offline_limit button{padding:.3rem .5rem;background-color:var(--bg0);color:var(--color);border:solid 1px var(--color);cursor:pointer}.offline_empty{color:var(--color1);font-size:.9rem;margin:1rem 0 0}.offline_list{list-style-type:none;margin:.75rem 0 0;padding:0;overflow-y:auto;flex:1 1 auto;min-height:0}.offline_item{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-top:solid 1px var(--bg2)}.offline_play{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.25rem;background:none;border:none;color:var(--color);text-align:left;cursor:pointer}.offline_play:hover{background-color:var(--bg1)}.offline_name,.offline_meta{max-width:100%;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.offline_meta{color:var(--color1);font-size:.8rem}.offline_pin{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;background-color:var(--bg0);color:var(--color1);border:solid 1px var(--bg2);cursor:pointer}.offline_pin.on{color:var(--color);border-color:var(--color)}.offline_remove{display:flex;align-items:center;flex-shrink:0;background:none;border:none;color:var(--color1);cursor:pointer;padding:.25rem}.offline_remove:hover{color:var(--color);background-color:var(--bg1)}.offline_foot{display:flex;justify-content:flex-end;margin-top:.75rem;flex-shrink:0}.offline_foot button{padding:.5rem .9rem;cursor:pointer;border:solid 1px var(--color);background-color:var(--bg0);color:var(--color)}.offline_foot button:hover{background-color:var(--bg2)}#offline_pill{position:fixed;right:1rem;bottom:1rem;z-index:250;padding:.6rem 1rem;border-radius:999px;border:solid 1px var(--color);background-color:var(--bg1);color:var(--color);cursor:pointer}@media (max-width: 768px){#offline_overlay{padding:0;align-items:flex-end}#offline_modal{width:100%;max-height:88dvh;border:none;border-top:solid var(--color);padding-bottom:calc(1rem + env(safe-area-inset-bottom))}.offline_foot button{padding:.7rem 1rem}#offline_pill{bottom:calc(5rem + env(safe-area-inset-bottom))}}