*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#000;--surface:#191919;--dim:#252525;--muted:#585858;--text:#ddd;--magenta:#ff2d6f;--cyan:#00e5ff;--lime:#39ff14;--yellow:#ffe600;--violet:#b84dff;--orange:#ff8c00;--font:"Departure Mono", monospace;--sp:.303vw;--sp-2:calc(var(--sp) * 2);--sp-3:calc(var(--sp) * 3);--sp-4:calc(var(--sp) * 4);--sp-5:calc(var(--sp) * 5);--sp-6:calc(var(--sp) * 6);--sp-8:calc(var(--sp) * 8);--sp-10:calc(var(--sp) * 10);--font-size:calc(var(--sp) * 9);--text-md:var(--font-size);--text-sm:calc(var(--font-size) - var(--sp));--text-xs:calc(var(--font-size) - var(--sp-2));--text-xxs:calc(var(--font-size) - var(--sp-3));--dot:var(--sp-2);--icon-sm:var(--sp-8);--icon-md:calc(var(--sp) * 12);--thumb:var(--sp-4)}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);font-size:var(--font-size);line-height:1.5}::selection{background:var(--magenta);color:#fff}::-webkit-scrollbar{width:var(--sp-2)}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--dim)}::-webkit-scrollbar-thumb:hover{background:var(--muted)}button,.ctrl-btn,.btn-add,.row-action,.row.clickable,.presets-toggle,.viz-overlay,.vol-label,.player-controls,.panel-header,.footer,.logo,.npl-title,.player-info,.elapsed-time{-webkit-user-select:none;user-select:none}.text-muted{color:var(--muted)}.text-magenta{color:var(--magenta)}.text-violet{color:var(--violet)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-xxs{font-size:var(--text-xxs)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#auth-screen{background:var(--bg);z-index:100;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#auth-screen.hidden{opacity:0;pointer-events:none}.auth-box{padding:calc(var(--sp) * 20);max-width:calc(var(--sp) * 170);text-align:center;gap:var(--sp-6);flex-direction:column;width:90%;display:flex}.auth-title{color:var(--magenta);line-height:0}.auth-sub{color:var(--muted);font-size:var(--text-sm)}.auth-field{display:flex}.input{box-sizing:border-box;background:var(--dim);min-width:0;color:var(--text);font-family:var(--font);font-size:var(--text-xxs);padding:var(--sp-3);border:none;outline:none}.input::placeholder{color:var(--muted)}.input--auth{background:var(--surface);width:100%;font-size:var(--text-md);padding:var(--sp-5);caret-color:var(--magenta);text-align:center}.auth-error{color:var(--magenta);font-size:var(--text-xs);margin-top:var(--sp-6);min-height:1.5em}#app{scrollbar-gutter:stable;height:100vh;display:none;overflow-y:auto}#app.active{justify-content:center;display:flex}.shell{width:100%;min-height:100vh;padding:0 var(--sp-10);flex-direction:column;margin:0 auto;display:flex}.header{padding:var(--sp-8) 0;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.logo{color:var(--magenta);height:var(--icon-sm);width:auto;line-height:0}.logo svg{height:var(--icon-sm);width:auto;display:block}.header-actions{align-items:center;gap:var(--sp-5);display:flex}.header-menu{align-items:center;display:inline-flex;position:relative}.header-menu.hidden{display:none}.header-icon-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.header-icon-btn:hover{color:var(--text)}.header-icon-btn:active{color:var(--magenta)}.header-menu:hover .header-icon-btn,.header-menu:focus-within .header-icon-btn{color:var(--text)}.header-icon{image-rendering:pixelated;height:var(--icon-sm);width:var(--icon-sm);background:currentColor;font-style:normal;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.header-icon-logout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20H2V18H14V20ZM2 18H0V2H2V18ZM16 18H14V15H16V18ZM12 7H14V9H16V11H14V13H12V15H10V11H4V9H10V5H12V7ZM16 5H14V2H16V5ZM14 2H2V0H14V2Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20H2V18H14V20ZM2 18H0V2H2V18ZM16 18H14V15H16V18ZM12 7H14V9H16V11H14V13H12V15H10V11H4V9H10V5H12V7ZM16 5H14V2H16V5ZM14 2H2V0H14V2Z' fill='white'/%3E%3C/svg%3E")}.header-icon-btn:hover .header-icon-logout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 20H14V18H16V15V11H14V13H12V15H10V11H4V9H10V5H12V7H14V9H16V2H14V0H2V2H0V18H2V20Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 20H14V18H16V15V11H14V13H12V15H10V11H4V9H10V5H12V7H14V9H16V2H14V0H2V2H0V18H2V20Z' fill='white'/%3E%3C/svg%3E")}.header-icon-admin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12V14H4V16H6V18H8V16H6V14H4V12H2Z' fill='white'/%3E%3Cpath d='M12 18H14V16H16V14H18V12H20V2H18V7H10V18H8V20H12V18Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2H18V0H2V2H0V12H2V7H10V2Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12V14H4V16H6V18H8V16H6V14H4V12H2Z' fill='white'/%3E%3Cpath d='M12 18H14V16H16V14H18V12H20V2H18V7H10V18H8V20H12V18Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2H18V0H2V2H0V12H2V7H10V2Z' fill='white'/%3E%3C/svg%3E")}.header-icon-btn:hover .header-icon-admin,.header-menu:hover .header-icon-admin,.header-menu:focus-within .header-icon-admin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 16H16V14H18V12H20V2H18V0H2V2H0V12H2V14H4V16H6V18H8V20H12V18H14V16Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 16H16V14H18V12H20V2H18V0H2V2H0V12H2V14H4V16H6V18H8V20H12V18H14V16Z' fill='white'/%3E%3C/svg%3E")}.header-tooltip{min-width:calc(var(--sp) * 70);background:var(--dim);z-index:20;flex-direction:column;display:none;position:absolute;top:100%;right:0}.header-menu:hover .header-tooltip,.header-menu:focus-within .header-tooltip{display:flex}.header-tooltip-item{background:var(--dim);width:100%;color:var(--muted);font-family:var(--font);font-size:var(--text-xxs);text-align:left;cursor:pointer;white-space:nowrap;padding:var(--sp-3) var(--sp-4);border:none}.header-tooltip-item:hover{color:var(--text);background:var(--dim)}.header-tooltip-item:active{color:var(--magenta)}.visualizer-wrap{aspect-ratio:3;width:100%;margin-bottom:var(--sp-6);background:#080808;position:relative;overflow:hidden}.visualizer-wrap canvas{cursor:pointer;width:100%;height:100%;display:block}.viz-overlay{cursor:pointer;z-index:2;background:#0a0a0ab3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.viz-overlay.hidden{opacity:0;pointer-events:none}.viz-pointer{color:#fff;font-size:var(--text-sm);text-align:center;line-height:1.8}.viz-pointer:before{content:"";width:var(--icon-md);height:var(--icon-md);margin:0 auto var(--sp-4);image-rendering:pixelated;background:#fff;display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2H10V8H12V6H14V8H16V10H18V8H20V10H22V18H20V20H18V22H6V20H4V18H2V16H0V12H2V10H4V14H6V8H4V2H6V0H8V2Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2H10V8H12V6H14V8H16V10H18V8H20V10H22V18H20V20H18V22H6V20H4V18H2V16H0V12H2V10H4V14H6V8H4V2H6V0H8V2Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.player-bar{z-index:1;align-items:flex-end;gap:0 var(--sp-6);padding:var(--sp-6);pointer-events:none;background:0 0;flex-wrap:wrap;display:flex;position:absolute;bottom:0;left:0;right:0}.player-info{flex-direction:column;flex:40%;gap:0;min-width:0;display:flex}.npl-title{height:calc(var(--sp) * 11);line-height:calc(var(--sp) * 11);font-size:var(--text-sm);color:var(--text);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.metadata-scroll{height:var(--icon-md);white-space:nowrap;align-items:center;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 80%,#0000);mask-image:linear-gradient(90deg,#000 80%,#0000)}.metadata-text{font-size:var(--text-xxs);color:var(--muted);line-height:1.2;animation:3.5s linear infinite metadata-marquee;display:inline-block}.metadata-scroll:has(.metadata-text:empty){display:none}@keyframes metadata-marquee{0%,10%{transform:translate(0)}55%,to{transform:translateX(var(--scroll-distance,0))}}.elapsed-time{font-size:var(--text-xxs);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:var(--sp-2)}.player-controls{pointer-events:auto;flex-shrink:0;align-items:center;display:flex}.ctrl-btn{color:var(--muted);font-family:var(--font);font-size:var(--text-md);width:calc(var(--sp) * 16);height:var(--icon-md);cursor:pointer;white-space:nowrap;background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.ctrl-btn:hover:not(:disabled){color:var(--text)}.ctrl-btn:active:not(:disabled){color:var(--magenta)}.ctrl-btn:disabled{color:var(--dim);cursor:default}.ctrl-btn.active{color:var(--magenta)}.ctrl-play{color:var(--magenta);font-size:var(--text-sm)}.ctrl-play:hover{color:var(--text)}.ctrl-wrap{display:inline-flex;position:relative}.vote-toast{font-size:var(--text-xxs);color:var(--yellow);white-space:nowrap;pointer-events:none;opacity:0;margin-bottom:var(--sp);flex-direction:column;align-items:center;line-height:1;display:flex;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.vote-toast.visible{opacity:1;animation:1s ease-in-out infinite vote-bob}.vote-toast:after{content:"▼";line-height:1}@keyframes vote-bob{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translateX(-50%) translateY(calc(var(--sp) * -2))}}.volume-control{align-items:center;gap:var(--sp-3);flex-shrink:0;display:flex}.volume-control:hover input[type=range]::-webkit-slider-thumb{background:var(--text)}.volume-control:hover input[type=range]::-moz-range-thumb{background:var(--text)}.vol-icon{width:var(--icon-sm);height:var(--icon-sm);margin-left:var(--sp-2);background:var(--muted);image-rendering:pixelated;font-style:normal;display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M10 20H8V18H6V16H8V4H6V2H8V0H10V20ZM6 16H4V14H6V16ZM16 16H12V14H16V16ZM4 8H2V12H4V14H0V6H4V8ZM18 14H16V6H18V14ZM14 12H12V8H14V12ZM6 6H4V4H6V6ZM16 6H12V4H16V6Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M10 20H8V18H6V16H8V4H6V2H8V0H10V20ZM6 16H4V14H6V16ZM16 16H12V14H16V16ZM4 8H2V12H4V14H0V6H4V8ZM18 14H16V6H18V14ZM14 12H12V8H14V12ZM6 6H4V4H6V6ZM16 6H12V4H16V6Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.volume-control:hover .vol-icon{background:var(--text);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 16V14H16V16H12ZM16 6H18V14H16V6ZM16 6H12V4H16V6ZM14 12H12V8H14V12Z' fill='white'/%3E%3Cpath d='M4 6H0V14H4V16H6V18H8V20H10V0H8V2H6V4H4V6Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 16V14H16V16H12ZM16 6H18V14H16V6ZM16 6H12V4H16V6ZM14 12H12V8H14V12Z' fill='white'/%3E%3Cpath d='M4 6H0V14H4V16H6V18H8V20H10V0H8V2H6V4H4V6Z' fill='white'/%3E%3C/svg%3E")}.vol-slider-wrap{align-items:center;display:inline-flex;position:relative}.vol-pct{font-size:var(--text-xxs);color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;margin-bottom:var(--sp);position:absolute;bottom:100%;left:0;transform:translate(-50%)}.volume-control:hover .vol-pct{opacity:1}.volume-control input[type=range]{appearance:none;width:calc(var(--sp) * 24);height:var(--sp);background:var(--dim);cursor:pointer;outline:none}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);background:var(--muted);cursor:pointer}.volume-control input[type=range]::-webkit-slider-thumb:hover{background:var(--text)}.volume-control input[type=range]::-moz-range-thumb{width:var(--thumb);height:var(--thumb);background:var(--muted);cursor:pointer;border:none}.panels{gap:var(--sp-6);flex:1;grid-template-columns:1fr 1fr;min-width:0;display:grid}.panel{background:var(--surface);min-width:0;min-height:0;padding:var(--sp-6);flex-direction:column;display:flex;overflow:hidden}.panel-header{font-size:var(--text-xs);color:var(--text);padding-bottom:var(--sp-3);margin-bottom:var(--sp-6);border-bottom:2px solid var(--dim);flex-shrink:0;justify-content:space-between;align-items:baseline;display:flex}.panel-header h2{font-size:inherit;margin:0;font-weight:400}.panel-header .panel-count{color:var(--muted)}.presets-toggle{width:100%;padding:var(--sp-4) 0 var(--sp-2);font:inherit;font-size:var(--text-xxs);color:var(--muted);text-align:left;cursor:pointer;background:0 0;border:none;margin:0;display:block}.presets-toggle:hover{color:var(--text)}.preset-panel{scrollbar-gutter:stable;max-height:calc(var(--sp) * 250);min-width:0}.preset-panel.presets-collapsed{max-height:0;overflow-y:hidden}.panel-body{scrollbar-gutter:stable;flex:1}.panel-body>ul,.preset-panel>ul{margin:0;padding:0;list-style:none}.row{align-items:center;gap:var(--sp-3);font-size:var(--text-xxs);color:var(--muted);display:flex}.row.clickable{cursor:pointer}.row.clickable:hover{color:var(--text)}.row.active,.panel-lobby .row .row-label{color:var(--magenta)}.row-icon{box-sizing:border-box;text-align:center;font-style:normal}.row-icon--presence{justify-content:center;align-items:center;display:flex}.row-icon--presence:before{content:"";width:var(--dot);height:var(--dot);background:var(--lime);flex-shrink:0}.row-icon--presence.row-icon--disconnected:before{background:var(--muted)}.row.is-disconnected .row-label{color:var(--muted);font-style:italic}.row-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.row-action{color:var(--muted);cursor:pointer;opacity:0;font-family:var(--font);font-size:var(--text-sm);padding:0 var(--sp);background:0 0;border:none}.row:hover .row-action{opacity:1}.row-action:hover{color:var(--magenta)}.row-tag{color:var(--muted);font-size:var(--text-xxs)}.row-score{color:var(--cyan);margin-left:var(--sp);font-feature-settings:"sups" 1;position:relative}.score-pop{color:var(--cyan);font-size:var(--text-xxs);pointer-events:none;animation:1.2s ease-out forwards scorePopUp;position:absolute;top:0;left:0}.score-sparkle{color:var(--cyan);font-size:var(--text-xxs);pointer-events:none;animation:.9s ease-out forwards scoreSparkle;position:absolute;top:0;left:0}@keyframes scorePopUp{0%{opacity:1;transform:translateY(0)}70%{opacity:1}to{opacity:0;transform:translateY(calc(var(--sp) * -12))}}@keyframes scoreSparkle{0%{opacity:1;transform:translate(0)}60%{opacity:.8}to{opacity:0;transform:translate(var(--sx,0), var(--sy,-10px))}}.queue-add{gap:var(--sp-2);padding-top:var(--sp-4);flex-shrink:0;display:flex}.queue-add .input{flex:1}.queue-add--stack{align-items:stretch;gap:var(--sp-3);flex-direction:column}.queue-add--stack .input,.queue-add--stack .btn-add{flex:none;width:100%}.btn-add{background:var(--magenta);color:var(--text);font-family:var(--font);font-size:var(--text-xxs);padding:var(--sp-3);cursor:pointer;white-space:nowrap;border:none}.btn-add:hover{opacity:.8}.empty-state{color:var(--muted);font-size:var(--text-xs)}.footer{padding:var(--sp-5) 0;font-size:var(--text-xxs);color:var(--muted);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.footer-version{flex-shrink:0}.footer-status{align-items:center;gap:var(--sp-3);color:var(--lime);display:flex}.footer-status .dot{width:var(--dot);height:var(--dot);background:currentColor;display:inline-block}.footer-status.loading{color:var(--cyan)}.footer-status.disconnected{color:var(--orange)}.footer-status.error{color:var(--magenta)}.footer-status.idle{color:var(--muted)}@media (width<=560px){:root{--sp:.45vw}.panels{grid-template-columns:1fr}.player-bar{padding:var(--sp-5)}.player-controls{justify-content:space-between;width:100%}}