:root{color-scheme:dark;--bg:#090f1a;--card:#101d30;--line:#223752;--ink:#eff7ff;--muted:#9cb2cf;--accent:#65bbff;--good:#9cdeb9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#10467566,transparent 45%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink);font-size:14px;line-height:1.5}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:9px 15px;background:#172b45;color:var(--ink);cursor:pointer}button:hover{border-color:var(--accent);background:#1d3c5e}button:disabled{opacity:.4;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button.quiet{border:0;background:transparent;color:var(--muted);padding:8px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1{font-size:clamp(34px,4vw,54px);font-weight:600;letter-spacing:-2px;line-height:1.1;margin:12px 0}h2{font-size:18px;font-weight:600;letter-spacing:-.4px}p{color:var(--muted)}.shell{max-width:1350px;margin:auto;padding:0 48px}.brand{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:700;letter-spacing:-1.6px}.mark{display:grid;place-items:center;font-size:24px;letter-spacing:-7px;padding-right:7px;color:#061b2e;background:var(--accent);height:36px;width:36px;border-radius:12px;transform:rotate(-10deg)}.brand-note{font-size:10px;letter-spacing:2px;font-weight:500;color:var(--muted);margin-left:18px;padding-left:24px;border-left:1px solid var(--line)}header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.connection{color:var(--good);font-size:12px}.connection:before,.dot{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-right:8px}.intro{display:flex;justify-content:space-between;align-items:center;margin:42px 0 32px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:600}.intro p{margin-top:14px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:44px}.search{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:7px 8px 7px 18px}.search>span{font-size:28px;color:var(--muted)}.search input{min-width:0;width:100%;border:0;background:transparent;color:var(--ink);outline:none;height:44px}.search button{background:var(--accent);color:#061b2e;font-weight:600;border:0}.destination{display:flex;align-items:center;gap:12px;margin:20px 0 40px;flex-wrap:wrap}.destination label{font-size:10px;letter-spacing:1.6px;color:var(--muted)}select{max-width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 24px 10px 12px;min-height:44px}.destination>span{font-size:11px;color:var(--muted);margin-left:auto}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.hint{font-size:12px;margin:-3px 0 20px}.result{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #1b304a}.art{width:60px;height:60px;flex-shrink:0;background:linear-gradient(140deg,#2c587b,#132c46);border-radius:10px;object-fit:cover;display:grid;place-items:center;color:var(--accent);font-size:24px}.result .meta{min-width:0;flex:1}.meta h3{font-size:14px;font-weight:500;overflow-wrap:anywhere}.meta p{font-size:12px;margin-top:3px;overflow-wrap:anywhere}.result .time{font-size:11px;color:var(--muted);white-space:nowrap}.result button{border-radius:50%;width:44px;flex-shrink:0;padding:0;font-size:24px;color:var(--accent)}.empty{min-height:370px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:1px dashed var(--line);border-radius:18px;gap:12px;padding:28px}.empty h3{font-size:18px;font-weight:500}.empty p{font-size:13px}.vinyl{height:104px;width:104px;border-radius:50%;background:repeating-radial-gradient(#163650 0 2px,#0e2237 3px 5px);display:grid;place-items:center;font-size:35px;color:var(--accent);margin-bottom:15px}.player{background:linear-gradient(145deg,#153450,#101d30 70%);padding:24px;border-radius:20px;border:1px solid #294967}.live{font-size:8px;letter-spacing:1px;color:var(--muted)}.cover{aspect-ratio:1;border-radius:13px;background:radial-gradient(circle at 30% 30%,#27648e,#112c48 65%);margin:20px 0 24px;display:grid;place-items:center;overflow:hidden}.cover>span{font-size:88px;font-weight:300;color:#95d6ff}.cover img{width:100%;height:100%;object-fit:cover}.player h2{font-size:22px;line-height:1.3;overflow-wrap:anywhere}.player>p{font-size:13px;margin:8px 0 24px}.timeline>div{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}input[type=range]{accent-color:var(--accent);cursor:pointer;max-width:100%;height:24px}.timeline input{width:100%;margin:0}.transport{display:flex;align-items:center;justify-content:center;gap:28px;margin:18px 0 22px}.transport button{border:0;background:transparent;font-size:30px;min-width:44px;padding:0}.transport .play{background:var(--accent);color:#062342;border-radius:50%;width:58px;height:58px;font-size:24px;padding-left:3px}.volume{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.volume input{min-width:0;flex:1}.volume output{width:32px}.options{display:flex;gap:6px;margin-top:20px;justify-content:space-between}.options button{font-size:11px;padding:9px 11px;background:transparent}.room-note{font-size:10px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);margin-top:22px;padding-top:16px;display:flex;gap:5px}.room-note .dot{margin-top:5px;flex-shrink:0}.queue{padding-top:30px}.queue h2 span{font-size:12px;color:var(--muted);margin-left:8px}.queue .result{gap:10px}.queue .art{width:40px;height:40px;border-radius:7px;font-size:18px}.queue .meta h3{font-size:12px}.queue .meta p{font-size:10px}.queue .result button{font-size:18px;width:44px}.queue .empty-queue{color:var(--muted);font-size:12px;padding:14px 0}.disconnect{margin:14px auto;display:block}footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 0 34px;display:flex;justify-content:space-between;color:#6d86a7;font-size:10px;gap:15px}.login{min-height:660px;max-width:620px;margin:70px auto}.login h1{font-size:clamp(50px,7vw,78px);margin:25px 0}.login>p{font-size:18px;line-height:1.8}.signin{display:flex;gap:20px;background:var(--card);padding:26px;border:1px solid var(--line);border-radius:16px;margin:38px 0 22px}.signin h2{margin-bottom:9px}.signin p{font-size:13px;line-height:1.7}.mini-mark{font-size:28px;color:var(--accent)}code{font-size:14px;color:var(--accent);background:#153552;border-radius:4px;padding:2px 6px}.login small{color:var(--muted);line-height:1.8;display:block}#message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:min(500px,calc(100% - 32px));background:#183654;color:var(--ink);border:1px solid var(--accent);padding:16px 22px;border-radius:12px;box-shadow:0 8px 40px #0008;z-index:10}#message.error{border-color:#f78c9a}.loading{opacity:.55}.results[aria-busy=true]{opacity:.5}[hidden]{display:none!important}@media(min-width:1200px){.layout{grid-template-columns:minmax(0,1fr) 365px;gap:60px}.cover{max-height:315px}}@media(max-width:800px){.shell{padding:0 24px}header{height:84px}.brand-note{display:none}.layout{grid-template-columns:minmax(0,1fr);gap:32px}.intro{margin-top:32px}.player{max-width:none}.cover{max-width:270px;margin:20px auto 24px}.player h2,.player>p{text-align:center}.empty{min-height:260px}.destination{margin-bottom:28px}aside{display:grid;grid-template-columns:minmax(0,1fr)}footer span:nth-child(2){display:none}.intro h1{font-size:36px}.login{margin-top:50px;min-height:600px}}@media(max-width:400px){.shell{padding:0 16px}.connection{font-size:10px}.search{gap:7px;padding-left:10px}.search input{font-size:12px}.search button{padding:9px 10px}.result{gap:10px}.result .time{display:none}.art{width:48px;height:48px}.intro p{font-size:12px}.intro .quiet{font-size:12px}.player{padding:20px}.destination{gap:8px}.destination>span{width:100%;margin-left:0}.signin{padding:20px;gap:12px}}

.login-button{display:inline-flex;min-height:48px;align-items:center;background:var(--accent);color:#062342;padding:10px 20px;border-radius:10px;margin-top:20px;font-weight:600}.server-select{display:flex;gap:15px;align-items:center;margin:-8px 0 28px;flex-wrap:wrap}.server-select label{font-size:10px;letter-spacing:1.4px;color:var(--muted)}#role-label{font-size:11px;color:var(--accent)}#owner{border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:35px}#owner-health{font-size:13px;margin-bottom:20px}#presence-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}#presence-form input{height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:10px;min-width:0;max-width:100%}#presence-form label{font-size:12px;color:var(--muted)}.destination select{max-width:200px}@media(max-width:400px){.destination select{max-width:210px}.destination label{width:65px}.server-select{gap:8px}.server-select select{max-width:220px}}
@media(max-width:800px){.destination{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px 12px}.destination select{width:100%;max-width:none}.destination>span{grid-column:1/-1;margin-left:0}.destination label{width:auto}.intro .quiet{white-space:nowrap}.server-select select{min-width:0;max-width:100%}}

.brand .mark{object-fit:contain;border-radius:10px;transform:none;letter-spacing:normal;padding:0;background:transparent;width:42px;height:42px}
:root{--accent:#8e99ff}.search button,.transport .play,.login-button{background:#5865f2;color:#fff}.cover{background:radial-gradient(circle at 30% 30%,#3449a8,#112343 70%)}

/* Keep an unused search area compact; results appear after searching. */
.results:empty{display:none}.library>.section-head:has(+.hint+#results:empty){display:none}

.queue .drag-grip{touch-action:none;user-select:none;cursor:grab;width:28px;min-width:28px;color:var(--muted);font-size:24px;border:0;background:transparent}.queue .dragging{opacity:.6;background:#243c61;outline:1px solid var(--accent)}.queue .drop-target{border-top:3px solid var(--accent)}.queue-arrows{display:flex;flex-direction:column;gap:2px}.queue .queue-arrows button{width:36px;min-height:36px;height:36px;font-size:16px}.queue .result{gap:7px}.queue-hint{line-height:1.7}.profile-card{border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:32px}.profile-card h2,.owner-profile h2{margin-bottom:12px}.profile-current{display:flex;align-items:center;gap:16px;margin:18px 0}.profile-current img{width:64px;height:64px;object-fit:cover;border-radius:16px}.profile-card form,.owner-profile form{display:grid;gap:12px;max-width:580px}.profile-card input,.owner-profile input,.owner-profile textarea{max-width:100%;min-width:0;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);padding:12px;font:inherit}.profile-card label,.owner-profile label{color:var(--muted);font-size:12px}.profile-actions{display:flex;flex-wrap:wrap;gap:12px}.owner-profile{margin-top:24px;border-top:1px solid var(--line);padding-top:24px}.profile-card .hint,.owner-profile .hint{margin:0;line-height:1.7}.profile-card input[type=file],.owner-profile input[type=file]{font-size:12px}@media(max-width:400px){.queue .art{width:30px;height:30px}.queue .result>.meta{flex:1}.queue .result>button:not(.drag-grip){width:32px}.queue .queue-arrows button{width:32px}.profile-card{padding:20px}}

/* Desktop listening workspace: full-width player, search and queue below. */
.view-tabs{display:flex;gap:8px;margin:0 0 24px;border-bottom:1px solid var(--line);padding-bottom:12px}.view-tabs button{min-height:46px;padding:10px 20px;background:transparent;border-color:transparent;color:var(--muted);font-weight:600}.view-tabs .selected{background:#263357;color:var(--ink);border-color:#46579b}.settings-heading{margin:8px 0 24px}.settings-heading h2{font-size:26px;margin-bottom:8px}.settings-heading p{font-size:14px}.profile-card,#owner{margin-top:22px}#settings-view{max-width:1100px}.profile-current img{width:72px;height:72px}.settings-heading+.profile-card{margin-top:0}
@media(min-width:801px){
 .shell{max-width:1500px;padding:0 40px}header{height:88px}.intro{margin:28px 0 22px}.intro h1{font-size:40px;letter-spacing:-1.4px}.intro p{margin-top:8px;font-size:15px}.server-select{margin:0 0 20px}.view-tabs{margin-bottom:24px}
 .layout{grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);grid-template-areas:'player player' 'library queue';gap:28px;align-items:start}.layout>aside{display:contents}.library{grid-area:library;background:#0e1a2b;border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}.player{grid-area:player;display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:34px;row-gap:0;padding:28px;align-items:center;background:linear-gradient(120deg,#193951,#111e32 75%);min-width:0}.player>.cover{grid-column:1;grid-row:1/12;max-height:none;width:100%;margin:0;align-self:center}.player>:not(.cover){grid-column:2;min-width:0}.player>.section-head{margin:0 0 12px}.player h2{font-size:28px;line-height:1.2;letter-spacing:-.6px}.player>p{font-size:15px;margin:7px 0 16px}.player .timeline{max-width:100%}.player .timeline>div{font-size:12px}.player .transport{margin:10px 0 12px;gap:34px}.player .transport button{font-size:34px;min-height:48px}.player .transport .play{height:62px;width:62px;font-size:28px}.player .volume{font-size:13px;max-width:540px;justify-self:center;width:100%}.player .options{margin-top:12px;justify-content:center;gap:12px;flex-wrap:wrap}.player .options button{font-size:13px;min-width:90px;min-height:44px}.player .room-note{margin-top:16px;padding-top:12px;font-size:12px}.queue{grid-area:queue;padding:24px;background:#0e1a2b;border:1px solid var(--line);border-radius:18px;min-width:0}.queue h2{font-size:21px}.queue .meta h3{font-size:14px}.queue .meta p{font-size:12px}.queue .art{width:48px;height:48px}.queue .queue-hint{font-size:13px}.queue .result{padding:14px 0}.destination{margin:18px 0 22px}.search input{font-size:15px}.search button{min-height:48px;padding:10px 22px}.section-head h2{font-size:21px}.result .meta h3{font-size:15px}.result .meta p{font-size:13px}.library>.hint{font-size:13px;margin-bottom:8px}.results{margin-top:10px}.library:has(.results:empty){padding-bottom:24px}.disconnect{margin:18px auto 0}
 #settings-view{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:none;align-items:start}#settings-view>.settings-heading{grid-column:1/-1;margin-bottom:0}#settings-view>.profile-card,#settings-view>#owner{margin-top:0;min-width:0}#presence-form{display:grid;grid-template-columns:85px minmax(0,1fr);gap:12px}#presence-form input,#presence-form select{width:100%}#presence-form button{grid-column:1/-1}.profile-card form,.owner-profile form{max-width:none}
}
@media(min-width:1250px){.player{grid-template-columns:300px minmax(0,1fr);column-gap:44px;padding:32px}.player h2{font-size:32px}.player .transport{margin:16px 0}.player .transport .play{height:68px;width:68px}.player .options{margin-top:14px}.player .cover{max-width:300px}}
@media(min-width:801px) and (max-width:1050px){.shell{padding:0 24px}.player{grid-template-columns:210px minmax(0,1fr);column-gap:24px}.player h2{font-size:25px}.layout{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:22px}.queue,.library{padding:20px}.player .options button{min-width:72px;padding:8px;font-size:12px}.player .room-note{font-size:11px}#settings-view{grid-template-columns:1fr}}
@media(max-width:800px){.view-tabs{gap:4px;margin-bottom:24px}.view-tabs button{padding:9px 13px;font-size:13px}.settings-heading h2{font-size:23px}.settings-heading p{font-size:13px}.profile-card,#owner{margin-top:20px}}

/* Larger reading sizes and a separate, removable autoplay list. */
body{font-size:16px}.meta h3{font-size:16px}.meta p{font-size:14px}.result .time{font-size:13px}.hint{font-size:14px}.options button{font-size:14px}.room-note{font-size:13px}.live{font-size:10px}.queue h2{font-size:24px}.empty-queue{font-size:15px}.destination label,.server-select label{font-size:12px}.destination>span{font-size:13px}.volume{font-size:13px}.auto-suggestions{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.auto-suggestions>h3{font-size:19px;margin-bottom:12px;color:var(--accent)}.auto-suggestions>.hint{line-height:1.6;margin-bottom:8px}.result button[aria-busy=true]{font-size:20px;opacity:.7;cursor:wait}
@media(min-width:801px){.queue .meta h3,.result .meta h3{font-size:16px}.queue .meta p,.result .meta p{font-size:14px}.queue .hint,.library>.hint{font-size:14px}.player .options button{font-size:15px}.player .volume{font-size:14px}.player .room-note{font-size:13px}.view-tabs button{font-size:16px}.player .live{font-size:11px}}

.listening-tools{margin-top:24px;padding-top:20px;border-top:1px solid #26374d}.listening-tools summary{cursor:pointer;font-weight:700;padding:10px 0}.listening-tools h3{margin:22px 0 10px}.listening-tools .options{flex-wrap:wrap}.listening-tools a{color:#acbaff}.listening-tools pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow-y:auto;font:14px/1.7 system-ui;color:#d5dfef}.transport{gap:clamp(9px,2vw,26px)}.transport [data-action=forward],.transport [data-action=rewind]{font-size:13px;min-width:38px}.auto-suggestions small{display:block;color:#a9b4ca;margin-top:5px;line-height:1.5}

.player .transport [data-action=forward],.player .transport [data-action=rewind]{font-size:13px;min-width:44px;min-height:44px}

/* Consistent, centred player controls. Icons are vectors, never emoji. */
.player .transport{display:grid;grid-template-columns:repeat(3,56px);justify-content:center;align-items:center;gap:24px;margin:20px 0}
.player .transport button,.player .transport .play{display:grid;place-items:center;width:56px;height:56px;min-width:56px;min-height:56px;padding:0;border:1px solid #405678;border-radius:50%;background:#172b45;color:var(--ink);line-height:1}
.player .transport .play{background:#5865f2;border-color:#7d88ff;color:#fff;box-shadow:0 4px 18px #050c2440}
.player .transport button:hover:not(:disabled){border-color:var(--accent);background:#263d62}.player .transport .play:hover:not(:disabled){background:#6875ff}
.player .transport svg{display:block;width:24px;height:24px;fill:currentColor;pointer-events:none}
.player .transport button:disabled{opacity:.5;cursor:not-allowed}
.player .player-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%;max-width:480px;justify-self:center;margin:20px auto 0}
.player-options button{grid-column:span 2;display:flex;align-items:center;justify-content:center;height:46px;min-height:46px;min-width:0;padding:8px 4px;font-size:13px;line-height:1.2;background:#14253c;border-color:#334866;white-space:nowrap}
.player-options button:nth-child(4){grid-column:2/span 2}.player-options button:nth-child(5){grid-column:4/span 2}
.player-options button[aria-pressed=true]{color:#e1e5ff;background:#293761;border-color:#6475b8}
.player .volume{width:100%;max-width:480px;margin:0 auto}.player .volume output{text-align:right;font-variant-numeric:tabular-nums;flex:0 0 36px}
.player.no-art>.section-head{margin-top:0}.player.no-art h2{margin-top:16px}
@media(min-width:801px){.player.no-art{grid-template-columns:minmax(0,1fr);max-width:none}.player.no-art>:not(.cover){grid-column:1}.player.no-art h2,.player.no-art>p{text-align:center}.player.no-art .timeline{width:100%;max-width:640px;justify-self:center}.player.no-art>.section-head{width:100%}.player.no-art .room-note{width:100%;max-width:640px;justify-self:center}}
@media(max-width:359px){.player .transport{gap:20px}.player-options button{font-size:12px}.player .player-options{gap:8px}}