:root{color-scheme:light;--cream:#f3ead4;--paper:#fffdf6;--ink:#171717;--blue:#174ed3;--red:#ff6155;--night:#15161a;font-family:"Instrument Sans",system-ui,sans-serif;background:var(--blue);color:var(--cream)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.55;cursor:default}:focus-visible{outline:3px solid #e34d43;outline-offset:3px}header{padding:calc(.85rem + env(safe-area-inset-top)) max(1.1rem,env(safe-area-inset-right)) .85rem max(1.1rem,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:.75rem;background:var(--cream);color:var(--ink);border-bottom:2px solid var(--ink)}.brand{display:grid;line-height:1;white-space:nowrap}.brand strong{font-weight:950;font-size:1.45rem}.brand b{color:var(--blue);font-size:1.9rem}.brand small{font-size:.63rem;letter-spacing:.19em;font-weight:750;margin-top:.22rem}main{max-width:50rem;margin:auto;padding:clamp(1.3rem,4vw,3.5rem) max(1.15rem,env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1.15rem,env(safe-area-inset-left))}h1,h2,p{margin-top:0}h1{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(3.55rem,11vw,6.25rem);line-height:.92;margin-bottom:1.2rem;letter-spacing:-.065em}h2{margin-bottom:.6rem}.player{padding:clamp(1.05rem,4vw,1.75rem);background:var(--night);border:1px solid #252634;border-radius:1.15rem;margin-bottom:1.25rem}.player h2{font-size:clamp(1.55rem,7vw,2.5rem);line-height:1.04;margin-bottom:.55rem;overflow-wrap:anywhere}.status{color:#ff8178;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}.track{font-size:clamp(1.12rem,5vw,1.6rem);margin-bottom:.2rem;overflow-wrap:anywhere}.artist{margin-bottom:1rem;color:#d4c9b3}.artist:empty{display:none}.controls,.votes{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.controls{margin-top:1rem;justify-content:space-between}.play,.outline{padding:.65rem .9rem;border-radius:.7rem;min-height:44px;font-weight:750;border:1px solid #857d70}.play{background:var(--red);border-color:var(--red);color:#21110f}.outline{background:transparent;color:inherit}.votes .outline{min-width:50px;color:var(--cream)}.votes .outline[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}.feedback,.message{font-size:.92rem;margin:0}.feedback:not(:empty){margin-top:.8rem}.message:not(:empty){margin:.75rem 0 1.1rem}.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:.65rem}.channel{display:grid;text-align:left;gap:.33rem;min-height:70px;padding:.75rem .9rem;border:1px solid #e2d7ba;border-radius:.65rem;background:var(--paper);color:var(--ink)}.channel[aria-pressed=true]{border:2px solid var(--red);padding:calc(.75rem - 1px) calc(.9rem - 1px)}.channel small{font-weight:600;color:#534936}.channel strong{overflow-wrap:anywhere}dialog{width:min(26rem,calc(100% - 1.75rem));border:1px solid #ded0ae;border-radius:1rem;padding:1.25rem;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#14172eaa}dialog p{font-size:.9rem;margin-bottom:.8rem}input{display:block;width:100%;margin:.35rem 0 .65rem;padding:.65rem;border:1px solid #9b8c78;border-radius:.45rem;min-width:0}.form-error{color:#92261e}.form-error:empty{display:none}@media(max-width:360px){.controls{justify-content:flex-start}}