:root{--stage:#0c0b0a;--ink:#0c0b0a;--paper:#f7f4ee;--spot:#ffb81c;--spot-bright:#ffc94d;--spot-deep:#c98a00;--text:#f2ede4;--text-quiet:#a49b8d;--rule:#2c2824;--font:"Archivo Variable", "Helvetica Neue", Arial, sans-serif;--ease-out:cubic-bezier(.16, 1, .3, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--stage);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:1rem;line-height:1.4}::selection{background:var(--spot);color:var(--ink)}.remote{gap:1.25rem;max-width:32rem;margin:0 auto;padding:1rem 1rem 6rem;display:grid}.icon{stroke-width:2.25px;flex:none;width:1.25em;height:1.25em}.icon[data-status=queued],.icon[data-status=failed]{color:var(--text-quiet)}.icon[data-status=downloading]{color:var(--spot)}.bar{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;padding-bottom:.75rem;display:flex}.room-code{text-transform:uppercase;font-size:1.25rem;font-weight:820;font-stretch:112%}.connection{color:var(--text-quiet);align-items:center;gap:.4em;font-size:.875rem;display:inline-flex}.connection[data-connection=online] .icon{color:var(--spot)}.notice,.now-empty{color:var(--text-quiet);margin:0}.panel{gap:.75rem;display:grid}.field{color:var(--text-quiet);gap:.35rem;font-size:.875rem;display:grid}input:not([type=range]){border:1px solid var(--rule);width:100%;color:var(--text);font:inherit;caret-color:var(--spot);background:#171513;border-radius:0;padding:.7rem .8rem;font-size:1rem}input:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}input[aria-invalid=true]{border-color:var(--spot)}input[type=range]{accent-color:var(--spot);flex:1}.field-error{color:var(--spot);margin:0;font-size:.875rem}button{border:1px solid var(--rule);min-width:2.75rem;min-height:2.75rem;color:var(--text);font:inherit;cursor:pointer;transition:background-color .16s var(--ease-out);background:0 0;border-radius:0;justify-content:center;align-items:center;gap:.4em;padding:0 .9rem;font-weight:700;display:inline-flex}button:hover:not(:disabled){background:var(--rule)}button:disabled{color:var(--rule);cursor:default}button.primary{border-color:var(--spot);background:var(--spot);color:var(--ink)}button.primary:hover{background:var(--spot-bright)}button.primary:active{background:var(--spot-deep)}.now{background:var(--paper);color:var(--ink);padding:1rem}.now .icon[data-status]{color:var(--ink)}.now-title{text-wrap:balance;margin:0;font-size:1.5rem;font-weight:820;font-stretch:112%;line-height:1.1}.now-singer{text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:.4em;margin:0;font-size:.8125rem;font-weight:700;display:flex}.now .now-empty,.now .field-error{color:var(--ink)}.controls{align-items:center;gap:.5rem;display:flex}.controls button:not(.primary){border-color:var(--ink);color:var(--ink)}.controls button:not(.primary):hover{background:#e6e1d7}.volume{flex:1;align-items:center;gap:.5rem;display:flex}.queue{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}.queue-item{border-bottom:1px solid var(--rule);grid-template-columns:2.5ch minmax(0,1fr) auto auto;align-items:center;gap:.6rem;padding:.6rem 0;display:grid}.queue-number{color:var(--text-quiet);font-variant-numeric:tabular-nums;font-weight:600}.queue-text{min-width:0;display:grid}.queue-title{text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-stretch:108%;overflow:hidden}.queue-singer{color:var(--text-quiet);font-size:.875rem}.queue-item[data-mine=true] .queue-number{color:var(--spot)}.queue-actions{display:flex}.queue-actions button{border:0;min-width:2.5rem;padding:0}.toasts{gap:.5rem;max-width:30rem;margin:0 auto;padding:0;list-style:none;display:grid;position:fixed;bottom:1rem;left:1rem;right:1rem}.toast{background:var(--spot);color:var(--ink);animation:wipe-in .28s var(--ease-out) both;padding:.75rem 1rem;font-weight:700}@keyframes wipe-in{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}