@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111014;--panel:#1a191e;--line:#333037;--ink:#f2f0e9;--muted:#aaa6af;--lime:#d6fa77;--purple:#b2a0ed}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button,input{font:inherit}button,.button{border:0;background:var(--lime);color:#171b0f;border-radius:9px;padding:14px 20px;cursor:pointer;font-weight:700;display:inline-block}button:hover,.button:hover{filter:brightness(1.08)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}header,main,footer{max-width:1220px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:1px}.logo{background:var(--lime);color:#171b0f;border-radius:50%;width:42px;height:42px;text-align:center;font-size:32px;line-height:38px}.brand-sub{font-size:9px;letter-spacing:2px;border-left:1px solid #4a454f;padding-left:15px;margin-left:7px;color:var(--muted);max-width:90px;line-height:1.6}nav{display:flex;gap:28px;font-size:13px}nav a:last-child{color:var(--muted)}main{padding:0 38px 60px}.intro{display:flex;justify-content:space-between;align-items:center;padding:55px 0 45px;min-height:340px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--lime);display:inline-flex;align-items:center;gap:8px}i{display:inline-block;height:7px;width:7px;border-radius:50%;background:var(--lime)}h1,h2,h3{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(42px,5vw,66px);line-height:1.04;letter-spacing:-3px;margin:23px 0 20px;font-weight:500}h1 span{color:var(--purple)}.intro p{color:var(--muted);line-height:1.7;margin:0;font-size:14px}.record-art{position:relative;width:340px;margin-right:50px}.record{width:245px;height:245px;border-radius:50%;background:repeating-radial-gradient(circle,#19181d 0,#19181d 2px,#303034 3px,#17161b 4px);box-shadow:0 16px 65px #0008;display:grid;place-items:center;transform:rotate(-18deg);margin:auto;border:1px solid #454047}.label{width:104px;height:104px;border-radius:50%;background:var(--purple);color:#24202f;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:25px;font-weight:700;letter-spacing:-1px}.label:after{content:'';width:8px;height:8px;background:var(--bg);border-radius:50%;margin-top:10px}.label span{font-size:8px;letter-spacing:2px;margin-top:5px}.record-caption{position:absolute;bottom:0;right:-12px;color:var(--lime);font-size:11px;font-weight:700;letter-spacing:2px;transform:rotate(-8deg);line-height:1.6}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px}.primary{min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-heading h2{font-size:23px;letter-spacing:-.6px;margin:0}.section-heading>.muted{font-size:9px;letter-spacing:1.5px}.search{display:flex;border:1px solid #49444f;border-radius:10px;padding:6px;background:var(--panel);gap:5px}.search input{min-width:0;flex:1;border:0;background:none;color:var(--ink);padding:10px}.search button{padding:12px 15px;font-size:13px}input{border:1px solid var(--line);padding:12px;background:var(--panel);color:var(--ink);border-radius:7px}.muted{color:var(--muted)}#search-hint{font-size:12px;line-height:1.6}.name-label{font-size:12px;display:flex;align-items:center;gap:7px;margin:23px 0}.name-label input{margin-left:auto;width:52%;font-size:12px}.welcome{text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:12px;margin-top:24px}.small-record{width:51px;height:51px;border-radius:50%;display:grid;place-items:center;background:#2c2739;color:var(--purple);margin:auto;font-size:25px}.welcome h3{font-size:21px;margin:18px 0 8px}.welcome p,.qr-card p{font-size:13px;color:var(--muted)}.tags{display:flex;justify-content:center;gap:10px;margin-top:24px;font-size:10px;color:var(--muted)}.tags span{padding:7px 10px;border:1px solid var(--line);border-radius:30px}.tags b{align-self:center;color:var(--purple)}.queue-heading{margin-top:36px}.count{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--purple);padding:3px 8px;background:#2c2739;border-radius:20px;vertical-align:middle;margin-left:6px}.empty{padding:24px 10px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}.track{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);min-width:0}.track img{width:70px;height:48px;object-fit:cover;border-radius:6px}.track .info{flex:1;min-width:0}.track h3{font-size:14px;margin:0 0 5px;font-weight:500;line-height:1.4}.track p{font-size:11px;color:var(--muted);margin:0;line-height:1.5}.track button{font-size:12px;padding:9px 12px;flex-shrink:0}.track .number{font-size:12px;width:17px;color:var(--muted);flex-shrink:0}.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel)}.now-card{padding:24px}.now-card .eyebrow{font-size:9px}.bars{letter-spacing:1px}.now-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:20px;border-radius:8px}.now-card h3{font-size:23px;letter-spacing:-.7px;line-height:1.25;margin:22px 0 8px}.now-card p{font-size:12px;line-height:1.6}.now-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;padding-top:17px;margin-top:20px;color:var(--muted)}.now-footer i{width:5px;height:5px;margin-right:3px}.qr-card{margin-top:20px;padding:25px;text-align:center;background:#201d28}.qr-card .eyebrow{color:var(--purple);font-size:8px;letter-spacing:1.2px}.qr-card h3{font-size:25px;letter-spacing:-.8px;line-height:1.15;margin:15px 0 22px}.qr-card img{border-radius:9px;width:155px;height:155px}.qr-card>a{font-size:11px;display:block}.text-button{color:var(--muted);background:none;padding:12px 8px;font-size:12px}.aside-note{font-size:11px;color:var(--muted);text-align:center;line-height:1.7;margin:21px}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:30px 38px}footer .brand{font-size:14px}footer .brand span{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:400;letter-spacing:0}footer>span{font-size:8px;letter-spacing:1px}.notice{padding:15px;background:#332c19;border:1px solid #685635;border-radius:9px;font-size:13px;margin-bottom:20px}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.secondary{background:#302b39;color:var(--ink)}#host-content>p{line-height:1.8;font-size:13px}.login{max-width:480px;padding:35px;margin:70px auto}.login h1{font-size:40px;letter-spacing:-1.5px}.login p{color:var(--muted);line-height:1.7}.login form{display:flex;flex-direction:column;gap:13px}.video-box{aspect-ratio:16/9;background:#080809;border:1px solid var(--line);position:relative;border-radius:12px;overflow:hidden}.video-box iframe{width:100%;height:100%;position:absolute;inset:0}#player-welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:15px}#player-welcome .small-record{margin:0}#player-welcome h3{margin:15px 0 0}#player-welcome p{font-size:12px;color:var(--muted)}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90%;padding:15px 23px;border:1px solid var(--lime);background:#232a18;color:var(--lime);border-radius:12px;z-index:10;box-shadow:0 8px 40px #0008;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.player-mode .intro{min-height:0;padding:25px 0}.player-mode .intro h1{font-size:35px;margin:12px 0;letter-spacing:-1.5px}.player-mode .intro p,.player-mode .record-art{display:none}.player-mode .layout{grid-template-columns:minmax(0,1fr) 280px}.player-mode .queue-heading{margin-top:22px}.player-mode .track{padding:10px 0}@media(min-width:1500px){.player-mode header,.player-mode main,.player-mode footer{max-width:1550px}}@media(max-width:800px){header{padding:0 22px;height:80px}.brand-sub{display:none}nav{gap:15px;font-size:11px}main{padding:0 22px 35px}.intro{padding:35px 0;min-height:280px}.record-art{width:180px;margin-right:10px}.record{width:150px;height:150px}.label{width:65px;height:65px;font-size:18px}.label span{font-size:6px}.label:after{width:6px;height:6px;margin-top:5px}.record-caption{font-size:7px;right:-8px}.layout,.player-mode .layout{grid-template-columns:minmax(0,1fr);gap:28px}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}.qr-card{margin-top:0}.aside-note{grid-column:1/-1}.now-card,.qr-card{padding:20px}.qr-card h3{font-size:22px}.qr-card img{width:130px;height:130px}footer{padding:25px 22px}footer>span{display:none}}@media(max-width:480px){.record-art{display:none}h1{font-size:52px}.intro{min-height:290px}.intro .eyebrow{font-size:8px}.search input{font-size:12px;padding:8px}.search button{padding:12px 10px;font-size:12px}.name-label{flex-wrap:wrap}.name-label input{width:100%;margin:3px 0 0}.section-heading>.muted{font-size:8px}aside{grid-template-columns:1fr}.qr-card{display:grid;grid-template-columns:1fr 120px;align-items:center;text-align:left;column-gap:10px}.qr-card img{width:120px;height:120px;grid-column:2;grid-row:1/4}.qr-card h3{margin:10px 0}.qr-card p{margin:8px 0}.qr-card .text-button{padding-left:0;text-align:left}.track{gap:9px}.track img{width:55px;height:40px}.track h3{font-size:13px}.track button{font-size:11px;padding:9px}.login{padding:23px}.login h1{font-size:33px}.tags{font-size:9px;gap:5px}.tags span{padding:7px}}

/* TV stage keeps Qbeat information outside the YouTube player. */
.coming-next{padding:15px 18px;background:#282234;color:var(--lime);font-family:'Space Grotesk',sans-serif;font-size:18px;line-height:1.4;overflow-wrap:anywhere;border-radius:8px;margin-top:10px}
.tv-stage header,.tv-stage footer,.tv-stage .intro,.tv-stage aside,.tv-stage .queue-heading,.tv-stage #queue,.tv-stage #connection,.tv-stage #player-content>.section-heading{display:none!important}
.tv-stage main{max-width:none;padding:0;height:100dvh}
.tv-stage .layout{display:block;height:100dvh}
.tv-stage .primary{height:100%}
.tv-stage #player-content{height:100%;display:flex;flex-direction:column}
.tv-stage .video-box{flex:1;min-height:200px;aspect-ratio:auto;border:0;border-radius:0}
.tv-stage .controls{margin:0;padding:6px 12px;gap:8px;justify-content:center;background:#111014}
.tv-stage .controls button{font-size:12px;padding:8px 13px}
.tv-stage #player-message{margin:0;padding:4px 12px;font-size:11px;text-align:center}
.tv-stage .coming-next{margin:0;border-radius:0}
/* Inputs remain at least 16px so iOS doesn't zoom when they receive focus. */
@media(max-width:800px){
 html,body{max-width:100%;width:100%;-webkit-text-size-adjust:100%}
 header{padding:0 16px;height:64px;gap:12px}header .brand{font-size:19px;gap:8px}.logo{width:35px;height:35px;font-size:28px;line-height:32px}nav{min-width:0;gap:12px}
 input,.search input,.name-label input{font-size:16px}
 main{padding:0 16px 24px}.track .info{overflow-wrap:anywhere}.track h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .guest-mode #guest-nav{display:none}.guest-mode .intro{padding:18px 0;min-height:0}.guest-mode .intro .eyebrow{font-size:8px;letter-spacing:1px}.guest-mode .intro h1{font-size:29px;letter-spacing:-1px;line-height:1.15;margin:10px 0 0}.guest-mode .intro h1 br{display:none}.guest-mode .intro h1 span{margin-left:7px}.guest-mode .intro p,.guest-mode .record-art{display:none}
 .guest-mode .layout{display:flex;flex-direction:column;gap:16px}.guest-mode .primary{display:contents}.guest-mode aside{order:0;display:block}.guest-mode #guest-content{order:1}.guest-mode .queue-heading{order:2;margin:5px 0 0}.guest-mode #queue{order:3}
 .guest-mode:not(.has-track) aside{display:none}.guest-mode aside .qr-card,.guest-mode .aside-note,.guest-mode #now-art{display:none!important}
 .guest-mode .now-card{padding:12px 14px}.guest-mode .now-card h3{font-size:16px;margin:8px 0 5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.guest-mode .now-card p{margin:0;font-size:11px}.guest-mode .now-footer{margin-top:8px;padding-top:8px}.guest-mode .now-card .eyebrow{font-size:8px}
 .guest-mode .section-heading{margin-bottom:12px}.guest-mode .section-heading h2{font-size:21px}.guest-mode #search-hint{font-size:11px;margin:8px 0;line-height:1.5}.guest-mode .search{padding:4px}.guest-mode .search input{padding:9px 7px}.guest-mode .search button{font-size:12px;padding:10px 12px}
 .guest-mode .name-label{margin:12px 0;display:flex;flex-wrap:nowrap;font-size:11px}.guest-mode .name-label input{width:54%;margin:0 0 0 auto;padding:9px 10px}.guest-mode .name-label>.muted{display:none}
 .guest-mode .welcome{padding:18px 12px;margin-top:12px}.guest-mode .welcome .small-record,.guest-mode .welcome .tags{display:none}.guest-mode .welcome h3{font-size:17px;margin:0 0 6px}.guest-mode .welcome p{margin:0;font-size:12px}.guest-mode footer{padding:20px 16px}.guest-mode #connection{font-size:11px;padding:10px;margin-bottom:12px}
 .guest-mode #search-status{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
}
@media(max-width:360px){.guest-mode .intro h1{font-size:25px}.search button{padding:10px}.guest-mode .name-label input{width:60%}nav{font-size:10px}.track .number{width:14px}.track img{width:48px}.track button{padding:8px}}

.guest-profile{margin:16px 0;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.guest-profile>summary{display:flex;align-items:center;gap:11px;padding:12px;cursor:pointer;list-style:none;font-size:13px}.guest-profile summary::-webkit-details-marker{display:none}.guest-profile summary strong{font-weight:600}.guest-profile summary small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.profile-edit{margin-left:auto;color:var(--purple);font-size:11px;white-space:nowrap}
.guest-profile form{padding:0 14px 14px}.guest-profile .name-label{margin:6px 0 14px}.guest-profile fieldset{border:0;margin:12px 0;padding:0}.guest-profile legend{font-size:12px;color:var(--muted);padding:0;margin-bottom:10px}.profile-options{display:flex;gap:8px;flex-wrap:wrap}.profile-options label{cursor:pointer;position:relative}.profile-options input{position:absolute;opacity:0;width:1px;height:1px}.color-choice>span{width:30px;height:30px;display:block;border-radius:50%;border:3px solid var(--panel);outline:2px solid transparent}.profile-options input:checked+span,.profile-options input:focus-visible+span{outline:2px solid var(--ink)}.icon-choice>span{width:36px;height:36px;display:grid;place-items:center;background:#302b39;border-radius:7px;font-size:21px;outline:2px solid transparent}.profile-photo-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.profile-photo-controls .button{font-size:12px;padding:11px 13px}.profile-privacy{font-size:10px;color:var(--muted);line-height:1.6;margin:10px 0}.guest-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#302b39;overflow:hidden;flex-shrink:0;font-size:21px}.guest-avatar img{width:100%;height:100%;object-fit:cover}.guest-avatar.tiny,.track img.guest-avatar.tiny{width:22px;height:22px;border-radius:50%;font-size:14px;object-fit:cover;vertical-align:middle}.track .picked-by{display:flex;align-items:center;gap:6px;margin-top:5px}.picked-by strong{font-weight:600}.guest-profile #save-profile{font-size:12px;padding:11px 14px}#profile-status{display:inline-block;font-size:11px;margin:8px;color:var(--muted);line-height:1.5}
@media(max-width:800px){.guest-mode .guest-profile{margin:12px 0}.guest-mode .guest-profile>summary{padding:10px}.guest-mode .guest-profile .name-label input{font-size:16px}.guest-mode .guest-profile .name-label{margin:10px 0 15px}.profile-options{gap:9px}}

.source-title{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:5px;overflow-wrap:anywhere}
.compact-view .video-box{width:356px;max-width:100%;height:200px;min-height:200px;aspect-ratio:auto;flex:none;margin:0 auto}
.compact-view #player-content>.section-heading h2{font-size:30px}
.compact-view.tv-stage #player-content{justify-content:center;gap:18px}.compact-view.tv-stage .video-box{flex:none;width:356px;height:200px;min-height:200px}.compact-view.tv-stage #player-content>.section-heading{display:flex!important;justify-content:center}
@media(max-width:800px){header nav{font-size:11px;gap:12px}.guest-mode header .brand{font-size:18px;gap:7px}.compact-view .video-box{width:min(356px,100%);height:200px}}

.track-intro{min-height:300px;background:#201b2b;display:grid;place-items:center;text-align:center;overflow:hidden;border-radius:12px;padding:24px}.track-intro h2{font-size:32px;margin:14px 0}.track-intro p{font-size:15px}.track-intro #intro-avatar{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#352b46;font-size:70px;overflow:hidden}.track-intro img{width:100%;height:100%;object-fit:cover}.track-intro #intro-slide{animation:picked-by-slide 2s ease-in-out both}.tv-stage .track-intro{flex:1;border-radius:0;min-height:200px}.guest-profile>summary>#profile-avatar{order:2}.guest-profile>summary>.profile-edit{order:3}
+@keyframes picked-by-slide{0%{transform:translateX(110vw);opacity:0}18%,82%{transform:translateX(0);opacity:1}100%{transform:translateX(-110vw);opacity:0}}
+@media(prefers-reduced-motion:reduce){.track-intro #intro-slide{animation:none}}

.karaoke-choice{display:flex;align-items:center;gap:7px;font-size:12px;margin:10px 0;flex-wrap:wrap}.karaoke-choice input{width:17px;height:17px;accent-color:var(--lime);padding:0}.karaoke-choice .muted{font-size:10px}

.video-countdown{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;color:var(--lime);font-size:18px;text-align:right;padding:7px 14px;margin:0}.tv-stage .video-countdown{background:var(--bg)}

.track-duration{display:inline-block;margin-top:5px;padding:3px 7px;border:1px solid var(--line);border-radius:5px;color:var(--lime);font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;font-size:11px;line-height:1.2}