:root{--pink-bright: #e79aa4;--pink-mauve: #bb959b;--paper: #ac9598;--grey: #908f8e;--ink: #141414}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--ink);color:var(--paper);font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}.app{position:relative;width:100%;height:100%}.canvas{position:absolute;top:0;right:0;bottom:0;left:0}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.5rem;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}.overlay>*{pointer-events:auto}.brand{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);mix-blend-mode:difference}.player{display:flex;align-items:center;gap:.75rem;background:#14141466;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:.5rem .75rem;width:fit-content;border:1px solid rgba(227,217,222,.2)}.player button{background:var(--paper);color:var(--ink);border:none;padding:.5rem 1rem;font-family:inherit;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:background .12s ease}.player button:hover{background:var(--pink-bright)}.meta{font-size:.75rem;opacity:.7}.player-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.now-playing{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .75rem;background:#14141466;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(227,217,222,.2);font-size:.75rem;max-width:60vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.np-label{color:var(--grey);text-transform:uppercase;letter-spacing:.2em;font-size:.65rem}.np-title{color:var(--paper)}.np-artist{color:var(--pink-mauve)}.np-by{color:var(--grey);font-size:.7rem}.panel{position:absolute;top:1.5rem;right:1.5rem;pointer-events:auto;font-size:.75rem;letter-spacing:.05em;z-index:10}.panel-toggle{background:var(--paper);color:var(--ink);border:none;padding:.5rem 1rem;font-family:inherit;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}.panel-toggle:hover{background:var(--pink-bright)}.panel-body{margin-top:.5rem;width:320px;max-height:70vh;overflow-y:auto;background:#141414b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(227,217,222,.2);padding:1rem}.panel-user{display:flex;justify-content:space-between;margin-bottom:.75rem;color:var(--paper)}.panel-tabs{display:flex;gap:.25rem;margin-bottom:.75rem;border-bottom:1px solid rgba(227,217,222,.15)}.panel-tabs button,.form-tabs button{background:transparent;color:var(--paper);border:none;padding:.4rem .6rem;cursor:pointer;font-family:inherit;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;opacity:.5}.panel-tabs button.on,.form-tabs button.on{opacity:1;color:var(--pink-bright);border-bottom:1px solid var(--pink-bright)}.form{display:flex;flex-direction:column;gap:.5rem}.form-tabs{display:flex;gap:.25rem;margin-bottom:.5rem}.form input{background:#14141480;color:var(--paper);border:1px solid rgba(227,217,222,.2);padding:.5rem;font-family:inherit;font-size:.8rem}.form input::placeholder{color:var(--grey)}.form button[type=submit]{background:var(--paper);color:var(--ink);border:none;padding:.5rem;font-family:inherit;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}.form button[type=submit]:hover{background:var(--pink-bright)}.form-error{color:var(--pink-bright);font-size:.75rem}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}.list li{display:flex;align-items:baseline;gap:.5rem;padding:.4rem 0;border-bottom:1px dashed rgba(227,217,222,.1);color:var(--paper)}.list .num{color:var(--grey);width:1.5rem}.list .title{color:var(--paper);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list .artist{color:var(--pink-mauve)}.list .by{color:var(--grey);font-size:.7rem}.link{background:transparent;color:var(--pink-bright);border:none;cursor:pointer;font-family:inherit;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}.empty{color:var(--grey);font-style:italic;padding:.5rem 0}.queue-actions{display:flex;justify-content:flex-end;padding-bottom:.5rem;border-bottom:1px solid rgba(227,217,222,.1);margin-bottom:.25rem}.list .link.remove{padding:0 .25rem;color:var(--grey);font-size:1rem;line-height:1}.list .link.remove:hover{color:var(--pink-bright)}