*{margin:0;padding:0;font-family:Sans-serif;font-size:11px;color:#000;opacity:1;border:none;box-sizing:border-box}html,body{height:100%}body{background-color:#fff;cursor:default}@media(prefers-color-scheme:dark){*{color:#eee;// opacity: .96}body,dialog{background-color:#000}}.menu{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;height:50px;background-color:#7f7f7f20}.menu .connection{display:block}.connection:before{content:"🌐";font-family:monospace;font-size:2em;line-height:1;width:1ch;text-align:center}.connection.connected:before{content:"🌍";animation:globe 1s steps(4) infinite}@keyframes globe{0%{content:"🌍"}34%{content:"🌎"}67%{content:"🌏"}}.menu .logo{flex-grow:0;height:100%;font-size:20px;white-space:nowrap}.menu .progress{display:flex;align-items:center}.progress:before{content:"⠋";margin-right:5px;font-family:monospace;font-size:2em;line-height:1;width:1ch;text-align:center;animation:spin .5s steps(4) infinite}@keyframes spin{0%{content:"⠋"}10%{content:"⠙"}20%{content:"⠹"}30%{content:"⠸"}40%{content:"⠼"}50%{content:"⠴"}60%{content:"⠦"}70%{content:"⠧"}80%{content:"⠇"}90%{content:"⠏"}}.menu .search{flex-grow:1;display:block}.menu .search input{padding:3px 5px;width:100%;max-width:400px;background-color:#7fbfff20;border:1px solid rgba(0,63,127,.5);border-radius:5px}.menu .stats{flex-grow:0;display:block;height:100%;font-size:20px;white-space:nowrap;background-color:transparent;cursor:pointer}.panes{display:flex;width:100%;height:calc(100vh - 140px)}.pane-browser,.pane-queue{overflow-y:scroll;vertical-align:top}.pane-browser{width:75%}.pane-queue{width:25%}.table{width:100%;border-collapse:collapse}.browser .table{background-color:#3f7fbf20}.queue .table{background-color:#7f7f0020}.dialogue .table{background-color:#6f9f6f20}.browser .table thead,.queue .table thead{position:sticky;top:0}.browser .table thead{background-color:#bfdfff}.queue .table thead{background-color:#ffdfbf}.dialogue .table thead{background-color:#cfffcf}@media(prefers-color-scheme:dark){.browser .table thead{background-color:#001f3f}.queue .table thead{background-color:#3f1f00}.dialogue .table thead{background-color:#0f3f0f}}.table tr:nth-child(2n){background-color:#7f7f7f10}.table th,.table td{padding:1px 3px}.table th:not(:first-of-type),.table td:not(:first-of-type){border-left:1px solid rgba(127,127,127,.125)}.table th{text-align:left;background-color:#7f7f7f80;border-bottom:1px solid rgba(127,127,127,.25)}.table tr.focus{filter:invert(100%);background-color:#7f7f7f}.table tr.playing{font-weight:700}.align-right,th.align-right{text-align:right}.pull-right{float:right}.captext{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bar{display:block;background-color:#7f7f7f40}.table .bar{margin:-1px -3px;padding:1px 3px}.table .bar:before{content:"-";color:transparent}.dialogue .bar{background-color:#6f9f6f40}.player{padding:10px;height:90px;background-color:#ff7f7f40}.seeker{width:100%}.cursor{float:right}.controls{float:left;margin-right:15px;vertical-align:top}.btn{padding:3px 5px;background-color:#7f7fff40;border:1px solid rgba(127,127,255,.5);border-radius:3px;cursor:pointer}.btn:hover{background-color:#7f7fff80;border:1px solid rgba(127,127,255,.25)}.btn:active{margin:2px 0 -2px}.btn-pause,.btn-next,.btn-prev,.btn-play{float:left;display:inline-block;font-size:2em;background-color:#ff7f7f80;border:2px solid rgba(255,127,127,.125);text-align:center;cursor:pointer}.btn-pause:hover,.btn-next:hover,.btn-prev:hover,.btn-play:hover{background-color:#ff7f7fbf;border:2px solid rgba(255,127,127,.5)}.btn-pause,.btn-play{margin:0 2px;width:40px;height:40px;border-radius:20px}.btn-pause:active,.btn-play:active{margin-top:2px}.btn-next,.btn-prev{margin-top:5px;width:30px;height:30px;border-radius:15px}.btn-next:active,.btn-prev:active{margin-top:7px}.btn-next:before{content:"»"}.btn-pause:before{content:"||"}.btn-play:before{content:"►"}.btn-prev:before{content:"«"}.title{display:block;font-size:1.5em}.artist{display:block}.context-menu{position:absolute;z-index:1000;padding:3px 0;background-color:#dfefffdf;border:1px solid rgba(175,191,207,.9375);border-radius:3px;cursor:pointer;filter:drop-shadow(0 0 3px rgb(63,63,63))}@media(prefers-color-scheme:dark){.context-menu{background-color:#000f1fdf;border:1px solid rgba(63,79,95,.9375)}}.context-menu ul{list-style:none}.context-menu li>span{display:block;padding:3px 5px}.context-menu li:hover>span{filter:invert(100%);background-color:#7f7f7f}.context-menu li>ul{position:absolute}.context-menu li:not(:hover):not(:focus)>ul{display:none}.context-menu .default{font-weight:700}.weak{color:#000000bf;font-style:italic}.dialogue{position:absolute;z-index:1000;top:calc(50% - 1rem);left:calc(50% - 1rem);transform:translate(-50%,-50%);margin:1rem;padding:2rem;max-height:calc(100% - 2rem);overflow-y:scroll;filter:drop-shadow(0 0 3px rgb(63,63,63))}.dialogue h1{margin-bottom:20px;font-size:2em;font-weight:400}.dialogue h2{margin:15px 0 10px;font-size:1.2em}.dialogue:backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#7f7f7ffc}.no-break{white-space:nowrap}button{cursor:pointer}.cross{position:relative;z-index:1001;display:block;background-color:transparent}.cross:before{content:"❌";font-family:monospace;font-size:2em;line-height:1;width:1ch;text-align:center}