:root{color-scheme:dark;--bg:#101319;--panel:rgba(28,33,39,.7);--line:rgba(255,255,255,.09);--muted:#a0a7ae;--white:#f6f7f2;--accent:#d8f99a;--radius:22px;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--white);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button,a,input{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0}a{color:inherit;text-decoration:none}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:focus-visible{transform:scale(1.035)}button:hover{filter:brightness(1.12)}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 0,rgba(110,129,83,.09),transparent 55%);z-index:-1}.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:var(--radius)}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:650;color:var(--accent)}.primary,.secondary,.small,.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;min-height:48px;padding:12px 20px;font-size:13px;font-weight:650;transition:transform .15s,background .15s}.primary{background:var(--accent);color:#1a2313}.secondary{background:rgba(255,255,255,.065);border:1px solid var(--line)}.small{min-height:36px;padding:8px 12px;font-size:12px;background:rgba(255,255,255,.06)}.iconbtn{width:44px;min-height:44px;padding:10px;background:transparent;color:var(--muted)}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.brand{display:flex;gap:12px;align-items:center;font-size:22px;font-weight:750;letter-spacing:-.8px}.brandmark{display:grid;place-items:center;width:36px;height:40px;background:var(--accent);border-radius:12px;color:#1d2b16}.brand small{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.24em;display:block;margin-top:3px}.app-shell{display:grid;grid-template-columns:92px 1fr;min-height:100vh}.rail{position:fixed;left:0;top:0;bottom:0;width:92px;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;padding:28px 0;gap:26px;background:#11151adb;z-index:5}.rail .brandmark{margin-bottom:48px}.rail button{width:50px;height:50px;border-radius:16px;background:transparent;color:var(--muted);display:grid;place-items:center}.rail button.active{background:#d8f99a13;color:var(--accent)}.rail .bottom{margin-top:auto}.workspace{grid-column:2;padding:32px 42px 130px;max-width:1900px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}.topbar-right{display:flex;align-items:center;gap:16px}.connection{font-size:11px;display:flex;align-items:center;gap:7px;color:var(--muted)}.dot{height:6px;width:6px;border-radius:100%;background:var(--accent);box-shadow:0 0 12px #d8f99a55}.topbar .brand small{display:none}.room-chip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.035);border:1px solid var(--line);padding:10px 14px;border-radius:100px;font-size:11px}.hero{position:relative;overflow:hidden;min-height:320px;display:flex;align-items:center;padding:44px;border-radius:26px;border:1px solid #ffffff12;background:linear-gradient(110deg,#242b28 0%,#202a28 46%,#2e382a 100%);margin-bottom:32px}.hero-copy{z-index:1;max-width:490px}.hero h1{font-size:clamp(36px,4.3vw,64px);letter-spacing:-2.5px;line-height:1.03;font-weight:650;margin:19px 0 18px}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{color:#bbc3bc;line-height:1.8;font-size:13px;max-width:365px}.hero-actions{display:flex;gap:12px;margin-top:26px}.hero-art{position:absolute;right:2%;top:-10%;width:46%;height:120%;transform:rotate(-18deg);opacity:.85;pointer-events:none}.hero-art .disc{width:340px;height:340px;position:absolute;left:10%;top:6%;border-radius:50%;border:1px solid #d8f99a25;box-shadow:0 0 0 30px #d8f99a05,0 0 0 31px #d8f99a12,0 0 0 70px #d8f99a03,0 0 0 71px #d8f99a0a;background:repeating-radial-gradient(circle,#0c1115 0 3px,#1a2421 4px 5px)}.disc:after{content:'K';display:grid;place-items:center;font-size:38px;color:#263421;width:104px;height:104px;background:var(--accent);border:14px solid #a2bc76;border-radius:50%;position:absolute;inset:0;margin:auto;font-weight:800}.sound-bars{display:flex;gap:8px;align-items:center;position:absolute;bottom:35px;right:10px;height:100px}.sound-bars i{width:8px;border-radius:10px;background:linear-gradient(#d8f99ab0,#d8f99a05);height:var(--h);transform:rotate(18deg)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.section-heading h2{font-size:21px;font-weight:600;letter-spacing:-.6px;margin:0}.section-heading span{font-size:12px;color:var(--muted)}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px}.searchbar{display:flex;align-items:center;gap:12px;background:#ffffff06;border:1px solid var(--line);border-radius:13px;padding:0 15px;height:50px;margin-bottom:18px;color:var(--muted)}input{min-width:0}.searchbar input{background:transparent;border:0;outline:none;flex:1;color:var(--white);font-size:13px;height:100%;width:100%}.searchbar:focus-within{border-color:#d8f99a80}.filterbar{display:flex;gap:8px;overflow:auto;padding:3px 3px 12px;margin-bottom:6px}.filter{border:1px solid var(--line);background:transparent;padding:8px 14px;border-radius:30px;color:var(--muted);font-size:11px;white-space:nowrap}.filter.selected{color:var(--accent);border-color:#d8f99a45;background:#d8f99a09}.song-row{display:flex;align-items:center;gap:14px;padding:13px 8px;border-bottom:1px solid #ffffff07;min-height:76px}.song-art{display:grid;place-items:center;width:49px;height:49px;background:linear-gradient(140deg,#4c5545,#242f2c);border-radius:12px;color:var(--accent);flex-shrink:0}.song-art[data-color="1"]{background:linear-gradient(140deg,#4d415f,#25282e);color:#d2b8ee}.song-art[data-color="2"]{background:linear-gradient(140deg,#51422d,#282923);color:#f0ce9a}.song-info{flex:1;min-width:0}.song-info strong{font-size:13px;font-weight:550;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-info small{display:block;margin-top:6px;color:var(--muted);font-size:11px}.song-no{color:#8a948b;font-family:monospace;font-size:11px}.song-actions{display:flex;gap:5px}.song-actions .small{color:var(--accent);background:#d8f99a0d}.tag{font-size:9px;padding:4px 6px;border-radius:4px;background:#ffffff08;color:var(--muted);letter-spacing:.06em}.side-card{padding:22px;margin-bottom:18px}.side-card h3{margin:0 0 8px;font-size:15px;font-weight:550}.side-card p{font-size:12px;color:var(--muted);line-height:1.7}.side-card .primary,.side-card .secondary{width:100%;margin-top:10px}.pair-illustration{display:flex;align-items:center;gap:15px;justify-content:center;height:90px;color:var(--accent);opacity:.8}.pair-illustration .icon{width:48px;height:48px}.pair-illustration span{color:var(--muted);letter-spacing:4px}.queue-list{margin-top:18px}.queue-entry{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.queue-entry>span{color:var(--accent);font-size:11px;width:16px}.queue-entry .song-info strong{font-size:12px}.empty{padding:30px 15px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}.empty .icon{display:block;margin:0 auto 14px;width:28px;height:28px;color:#d8f99a75}.playerbar{position:fixed;bottom:18px;left:118px;right:28px;z-index:8;display:flex;align-items:center;gap:22px;padding:16px 22px;background:rgba(29,34,38,.94);box-shadow:0 18px 60px #0008;border:1px solid #ffffff12;border-radius:20px;backdrop-filter:blur(30px)}.player-info{display:flex;align-items:center;gap:13px;width:29%;min-width:0}.player-controls{display:flex;align-items:center;gap:12px;justify-content:center;flex:1}.play-toggle{border-radius:50%;width:44px;height:44px;background:var(--accent);color:#202719;display:grid;place-items:center}.player-end{display:flex;align-items:center;gap:12px;justify-content:end;width:29%;font-size:11px;color:var(--muted)}input[type=range]{accent-color:var(--accent);height:4px;width:90px}.welcome{max-width:1200px;margin:auto;padding:32px}.welcome header{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px}.welcome .hero{min-height:440px;padding:55px}.welcome-options{display:grid;grid-template-columns:1fr 1fr;gap:24px}.welcome-options button{text-align:left;display:flex;gap:22px;padding:30px;background:#ffffff05;border:1px solid var(--line);border-radius:20px}.welcome-options .icon{color:var(--accent);width:34px;height:34px}.welcome-options strong{display:block;font-size:20px;margin-bottom:10px;font-weight:550}.welcome-options small{color:var(--muted);font-size:13px;line-height:1.7}.footer-note{color:#747d81;font-size:11px;margin-top:30px;display:flex;gap:20px;align-items:center}.join-page{max-width:470px;margin:0 auto;padding:40px 24px}.join-page .brand{margin-bottom:70px}.join-page h1{font-size:38px;font-weight:550;letter-spacing:-1.5px;margin:20px 0 15px}.join-page p{font-size:14px;color:var(--muted);line-height:1.8}.field{display:block;font-size:12px;margin:22px 0;color:var(--muted)}.field input,.field select{display:block;width:100%;margin-top:9px;padding:15px 16px;background:#ffffff06;border:1px solid var(--line);border-radius:12px;color:var(--white);font-size:16px}.field input.code{font-family:monospace;letter-spacing:.35em}.join-page .primary{width:100%}.remote-head{padding:24px 0}.remote-head h1{font-size:32px;letter-spacing:-1px;font-weight:550;margin:12px 0}.remote-now{padding:25px;margin-bottom:24px}.remote-now h2{font-size:22px;letter-spacing:-.7px;font-weight:550}.remote-now .player-controls{margin:18px 0}.mobile-workspace{max-width:700px;margin:auto;padding:24px 22px 110px}.mobile-workspace .topbar{margin-bottom:0}.mobile-workspace .hero{min-height:220px;padding:28px}.mobile-workspace .hero h1{font-size:36px}.mobile-workspace .hero-art{opacity:.25}.mobile-workspace .main-grid{display:block}.mobile-workspace .side-card{margin-top:25px}.mobile-workspace .playerbar{left:14px;right:14px;bottom:12px}.mobile-workspace .player-info{width:auto;flex:1}.mobile-workspace .player-end{width:auto}.mobile-workspace .playerbar .song-art{display:none}.mobile-workspace .player-controls{flex:0}.mobile-workspace .playerbar .secondary,.mobile-workspace .playerbar input{display:none}.stage{position:fixed;inset:0;background:#0b0f14;z-index:20;display:flex;flex-direction:column;overflow:hidden}.stage-bg{position:absolute;inset:-20%;background:radial-gradient(ellipse at 28% 35%,#415a2d66,transparent 45%),radial-gradient(ellipse at 75% 65%,#45405b66,transparent 50%);animation:drift 24s ease-in-out infinite alternate}.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.stage-top,.stage-bottom{z-index:2;display:flex;justify-content:space-between;align-items:center;padding:32px 45px;background:linear-gradient(#090d13a0,transparent)}.stage-top .song-info{margin-left:30px}.stage-center{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px;gap:24px;text-shadow:0 4px 25px #0009;pointer-events:none}.lyric-current{font-size:clamp(28px,4.5vw,72px);font-weight:700;letter-spacing:-1.3px;color:var(--accent);line-height:1.3;max-width:90%}.lyric-next{font-size:clamp(20px,2.7vw,40px);color:#e5e8de90;max-width:90%}.stage-bottom{background:linear-gradient(transparent,#090d13d0);gap:24px;flex-wrap:wrap}.stage-bottom .player-controls{flex:0}.stage-bottom input[type=range]{flex:1;width:auto}.stage time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.stage-overlay-play{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#0b0f1477;backdrop-filter:blur(8px)}.stage-pair{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px}.stage-pair img{width:75px;border-radius:10px}.stage-pair strong{display:block;color:var(--white);font-size:18px;margin-top:5px}.stage .brand{font-size:19px}.stage .brandmark{width:32px;height:35px}.stage .progress{display:flex;gap:12px;align-items:center;flex:1}.stage .hidden{display:none!important}.hidden{display:none!important}dialog{max-width:540px;width:calc(100% - 32px);border:1px solid #ffffff20;border-radius:24px;background:#1a2026;color:var(--white);padding:30px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#080c12b0;backdrop-filter:blur(10px)}dialog h2{font-size:25px;letter-spacing:-.7px;font-weight:550;margin-top:0}dialog p{color:var(--muted);font-size:13px;line-height:1.8}dialog .close{float:right;margin-top:-10px;margin-right:-10px}.qr{background:white;padding:10px;border-radius:14px;width:200px;display:block;margin:24px auto}.big-code{text-align:center;font-family:monospace;font-size:32px;letter-spacing:.23em;color:var(--accent);margin:18px 0}.pair-url{overflow-wrap:anywhere;text-align:center;font-size:12px;color:var(--muted)}.upload-zone{display:block;border:1px dashed #d8f99a50;border-radius:15px;padding:28px;text-align:center;color:var(--accent);margin:22px 0;cursor:pointer}.upload-zone input{max-width:100%;margin-top:15px;font-size:12px;color:var(--muted)}.upload-zone .icon{width:30px;height:30px;margin-bottom:10px}#toast{position:fixed;bottom:115px;left:50%;transform:translateX(-50%);padding:14px 22px;max-width:90%;width:max-content;border-radius:14px;background:#e0efc9;color:#192419;box-shadow:0 12px 40px #0005;font-size:13px;z-index:100;display:none}#toast.show{display:block}.loading{display:grid;place-items:center;min-height:100vh;color:var(--accent);font-size:16px}.library-caption{font-size:11px;color:var(--muted);margin:16px 0}.stat-row{display:flex;gap:22px;margin:24px 0}.stat-row strong{font-size:23px;font-weight:550;display:block}.stat-row small{color:var(--muted);font-size:11px}.remote-name{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:20px}.remote-name input{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--white);padding:6px;width:150px;font-size:12px}.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:12px;color:var(--muted)}@keyframes drift{to{transform:rotate(12deg) scale(1.15)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:1600px){.workspace{padding:45px 65px 140px}.hero{min-height:410px;padding:60px}.main-grid{grid-template-columns:1fr 365px;gap:40px}.song-row{min-height:86px}.song-info strong{font-size:16px}.song-info small{font-size:13px}.side-card h3{font-size:18px}.side-card p{font-size:14px}}
@media(max-width:1050px){.workspace{padding:25px 26px 130px}.main-grid{grid-template-columns:minmax(0,1fr) 260px;gap:20px}.hero{padding:32px}.hero-art{right:-10%;opacity:.5}.playerbar{left:110px}.tag{display:none}.topbar .connection{display:none}}@media(max-width:760px){.app-shell{display:block}.rail{display:none}.workspace{padding:24px 20px 120px}.main-grid{display:block}.hero{min-height:300px;padding:28px}.hero h1{font-size:42px}.hero-art{opacity:.2;right:-30%;width:80%}.topbar{margin-bottom:24px}.topbar .brand{font-size:20px}.topbar-right{gap:6px}.room-chip{display:none}.topbar .secondary{padding:10px;font-size:11px;min-height:40px}.side-card{margin-top:24px}.playerbar{left:12px;right:12px;bottom:12px;gap:10px;padding:12px 16px}.player-info{width:auto;flex:1}.playerbar .song-art,.playerbar .player-end{display:none}.playerbar .player-controls{flex:0;gap:4px}.playerbar .player-controls .secondary{padding:10px;min-height:40px}.welcome{padding:25px 20px}.welcome header{margin-bottom:30px}.welcome .hero{min-height:390px;padding:30px}.welcome-options{grid-template-columns:1fr;gap:16px}.welcome-options button{padding:24px}.welcome-options strong{font-size:18px}.footer-note{flex-wrap:wrap;gap:10px}.stage-top,.stage-bottom{padding:20px;gap:14px}.stage-top .brand{display:none}.stage-top .song-info{margin-left:0}.stage-bottom .progress{order:3;flex-basis:100%}.stage-pair{display:none}.stage .player-controls{margin:auto}.lyric-current{font-size:32px}.lyric-next{font-size:23px}.song-no{display:none}.song-actions .small{padding:8px}.join-page .brand{margin-bottom:45px}}
dialog{max-height:calc(100dvh - 32px);overflow:auto}
@media(max-height:650px){.workspace .hero{min-height:250px;padding:25px 32px}.workspace .hero h1{font-size:38px;margin:12px 0}.workspace .hero p{font-size:12px;line-height:1.5;margin:10px 0}.workspace .hero-actions{margin-top:16px}.stage-top{padding:16px 28px}.stage-bottom{padding:16px 28px;flex-wrap:nowrap;gap:16px}.stage-center{padding:12px;gap:15px;min-height:0}.stage .brand small{display:none}.stage .brand{flex-shrink:0}.stage-pair{font-size:10px;max-width:220px}.stage-pair img{width:52px}.stage-pair strong{font-size:14px}.stage .progress{min-width:130px}.stage .stage-bottom .secondary{font-size:11px;padding:10px;white-space:nowrap}.lyric-current{font-size:clamp(28px,4vw,52px)}.lyric-next{font-size:clamp(18px,2.5vw,28px)}}
@media(max-height:650px){dialog{padding:22px}dialog h2{font-size:23px;margin-bottom:10px}dialog p{font-size:12px;line-height:1.5;margin:10px 0}dialog .qr{float:right;width:140px;margin:6px 0 12px 20px}dialog .big-code{text-align:left;font-size:26px;margin:16px 0}dialog .pair-url{text-align:left}dialog .secondary{font-size:11px;padding:10px;min-height:40px}}
/* Karaoke timing and online songbook. Original MIDI fragments keep their own clocks. */
.lyric-current .syllable{white-space:pre-wrap;background:linear-gradient(90deg,var(--accent) 0 var(--fill),#f5f6f0 var(--fill) 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 9px #0008)}
.modebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-12px 0 24px}.modebar label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-left:auto}.modebar input{accent-color:var(--accent)}.modebar .small{white-space:nowrap}
.video-toolbar{display:flex;flex-direction:column;gap:14px;margin:20px 0}.video-toolbar select,.video-toolbar input{border:1px solid var(--line);background:#ffffff08;border-radius:12px;color:var(--white);padding:13px;font-size:13px;min-width:0;width:100%}.video-toolbar select{background:#20262c}.video-toolbar form{display:flex;gap:10px}.video-toolbar input{flex:1}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}.video-card{min-width:0}.video-poster{position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#354434,#272536);color:var(--accent);font-size:40px;padding:0}.video-poster img{width:100%;height:100%;object-fit:cover}.video-provider{position:absolute;bottom:10px;left:10px;padding:5px 9px;background:#12181cc9;border-radius:8px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--white)}.video-card>strong{display:block;font-size:13px;font-weight:550;margin:12px 0 9px;line-height:1.5}.video-card-actions{display:flex;gap:6px;flex-wrap:wrap}.video-card-actions .small{min-height:34px;font-size:11px;padding:8px 10px}.video-card-actions .small:last-child{color:var(--accent)}.video-detail h2{font-size:28px;letter-spacing:-.7px}.video-detail p{font-size:13px;line-height:1.8}.youtube-container{position:absolute;inset:0;width:100%;height:100%;z-index:0}.youtube-container iframe{width:100%;height:100%;border:0}.stage #stage-media{position:absolute;inset:0}.stage-top,.stage-bottom{pointer-events:none}.stage-top button,.stage-top a,.stage-bottom>*{pointer-events:auto}
@media(min-width:1500px){.video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modebar{margin:20px 0}.modebar label{margin-left:0}.video-toolbar form{flex-wrap:wrap}.video-toolbar input{min-width:150px}}@media(max-height:650px){.modebar{margin:-15px 0 16px;gap:8px}.modebar .small{min-height:32px;padding:7px 10px}.workspace .hero{min-height:210px;padding:20px 30px}.workspace .hero h1{font-size:34px;margin:10px 0}.workspace .hero p{margin:8px 0}.workspace .hero-actions{margin-top:12px}}
.stage,.stage-overlay-play,.stage #stage-media,.youtube-container{top:0;right:0;bottom:0;left:0}

/* Cinema keeps the screen dark and the performance clear, with controls within reach. */
.stage.cinema{background:#000}.stage.cinema .stage-bg{display:none}.stage.cinema .stage-top,.stage.cinema .stage-bottom{background:#000c;backdrop-filter:blur(12px)}.stage.cinema [data-do=cinema]{color:var(--accent);background:#d8f99a22}.stage.cinema #stage-media video{object-fit:contain}.stage.cinema .stage-center{pointer-events:none}.stage.cinema:has(#stage-media video:not(.hidden)) .stage-top{background:linear-gradient(#000b,transparent)}
@media(max-width:760px){.stage.cinema .stage-top{padding:12px 16px}.stage.cinema .stage-bottom{padding:12px 16px;gap:10px}.stage.cinema .song-info strong{font-size:13px}.stage.cinema .player-controls{gap:12px}.stage{min-height:100vh;min-height:100dvh}.stage.cinema .lyric-current{font-size:clamp(26px,6vw,42px)}}
@media(max-height:480px){.stage.cinema .stage-top{padding:8px 16px}.stage.cinema .stage-bottom{padding:8px 16px;gap:8px}.stage.cinema .stage-bottom .secondary,.stage.cinema .stage-pair{display:none}.stage.cinema .stage-center{padding:12px 8px}.stage.cinema .lyric-current{font-size:clamp(22px,4vw,36px)}}

@media(min-width:761px){.stage-pair img{width:112px;height:112px}.stage-pair{max-width:265px}}

.brandmark:has(img){background:transparent}.brandmark img{display:block;width:100%;height:100%;border-radius:12px}

/* Mobile cinema has a fixed performance area and a separately scrolling songbook. */
body.mobile-cinema{overflow:hidden}
.mobile-cinema #app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.mobile-cinema #app>.mobile-workspace{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;width:100%;max-width:none;padding:16px 16px 32px}
.mobile-cinema .mobile-workspace>.playerbar,.mobile-cinema .mobile-workspace .hero,.mobile-cinema .mobile-workspace .topbar{display:none}
.mobile-cinema-player.stage{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;flex:none;width:100%;height:calc(56.25vw + 106px);min-height:0;background:#000;z-index:10;display:block;border-bottom:1px solid var(--line)}
.mobile-cinema-player.stage #stage-media{position:absolute;top:0;right:0;left:0;bottom:auto;height:56.25vw}
.mobile-cinema-player .stage-center{position:absolute;top:0;left:0;right:0;height:56.25vw;padding:12px;gap:10px;justify-content:center}
.mobile-cinema-player .lyric-current{font-size:clamp(23px,6vw,36px);max-width:95%}.mobile-cinema-player .lyric-next{font-size:clamp(16px,4vw,23px)}
.mobile-cinema-player #stage-status{font-size:9px}.mobile-cinema-player .stage-top{position:absolute;top:56.25vw;left:0;right:0;height:40px;padding:6px 14px;background:#080b11;gap:8px}
.mobile-cinema-player .stage-top .brand,.mobile-cinema-player .stage-top [data-do=close-stage]{display:none}.mobile-cinema-player .stage-top .song-info{margin:0}.mobile-cinema-player .song-info strong{font-size:12px}.mobile-cinema-player .song-info small{font-size:10px}
.mobile-cinema-player .stage-bottom{position:absolute;bottom:0;left:0;right:0;height:66px;padding:6px 10px;gap:8px;background:#080b11;display:flex;flex-wrap:nowrap}
.mobile-cinema-player .stage-bottom .stage-pair,.mobile-cinema-player .stage-bottom>.secondary{display:none}.mobile-cinema-player .stage-bottom .player-controls{gap:2px;margin:0}.mobile-cinema-player .play-toggle{width:40px;height:40px}.mobile-cinema-player .iconbtn{width:36px;height:36px;min-height:36px}.mobile-cinema-player .progress{order:0;flex:1;min-width:0;gap:5px}.mobile-cinema-player .progress time{font-size:9px}.mobile-cinema-player .progress input{min-width:20px}.mobile-cinema-player .stage-bg{display:none}
.mobile-workspace .video-poster{aspect-ratio:16/9}.mobile-workspace .video-card>strong{font-size:12px}.mobile-workspace .video-toolbar form{flex-wrap:nowrap}.mobile-workspace .video-toolbar input{min-width:0}.mobile-workspace #video-source-status{font-size:11px;color:var(--muted);margin:12px 0}.mobile-workspace #online-panel{margin-bottom:28px}.mobile-workspace .modebar{margin:12px 0 20px}
.native-songbook{overflow:hidden}.native-songbook #app{height:100vh;height:100dvh;display:block}.native-songbook .mobile-cinema-player,.native-songbook .mobile-workspace>.playerbar{display:none!important}.native-songbook #app>.mobile-workspace{height:100%;overflow:auto;padding:12px 12px 30px}.native-songbook .topbar,.native-songbook .hero{display:none}.native-songbook .modebar>[data-do=scan-peer],.native-songbook .modebar>[data-do=join-peer],.native-songbook .modebar>[data-do=offline]{display:none}
.native-fullscreen .mobile-workspace{display:none!important}.native-fullscreen .mobile-cinema-player,.mobile-cinema-player:fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;width:100vw}
.native-fullscreen .mobile-cinema-player #stage-media,.mobile-cinema-player:fullscreen #stage-media{height:100%;bottom:0}.native-fullscreen .mobile-cinema-player .stage-center,.mobile-cinema-player:fullscreen .stage-center{height:100%;padding:40px 20px 100px}.native-fullscreen .mobile-cinema-player .stage-top,.mobile-cinema-player:fullscreen .stage-top{top:0;background:#0009}.native-fullscreen .mobile-cinema-player .stage-bottom,.mobile-cinema-player:fullscreen .stage-bottom{background:#0009}

/* Glass controls share one rounded shape throughout the mobile songbook and cinema. */
.mobile-app button,.mobile-app .secondary,.mobile-app .primary{border-radius:14px;border:1px solid #ffffff29;background:linear-gradient(145deg,#ffffff17,#ffffff07);color:var(--white);backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%);box-shadow:inset 0 1px 0 #ffffff12,0 5px 16px #0002;transition:background .15s,border-color .15s,transform .15s}
.mobile-app button:hover,.mobile-app button:focus-visible{background:linear-gradient(145deg,#ffffff25,#ffffff12);border-color:#ffffff50}.mobile-app button:active{transform:scale(.97)}
.mobile-app .primary,.mobile-app .play-toggle{background:linear-gradient(145deg,#d8f99aeb,#a3ca799e);border-color:#e6ffc880;color:#18220f;box-shadow:inset 0 1px 0 #f1ffdc88,0 5px 18px #0003}.mobile-app .primary:hover,.mobile-app .play-toggle:hover{background:linear-gradient(145deg,#e4ffb9,#b9dd91c9)}
.mobile-app .filter.selected,.mobile-app [aria-pressed=true]{background:linear-gradient(145deg,#d8f99a28,#d8f99a0b);border-color:#d8f99a66;color:var(--accent)}.mobile-app .iconbtn,.mobile-app .small{min-height:40px}.mobile-app .brandmark{background:transparent}.mobile-app .brandmark img{border-radius:14px}.mobile-app .video-poster{border-radius:16px;overflow:hidden}.mobile-app .video-poster:hover{transform:none}.mobile-app input:not([type=range]):not([type=checkbox]),.mobile-app select{border-radius:14px}

.mobile-cinema-player:not(.has-picture) #stage-media video{opacity:0}

.mobile-player-shortcuts{display:none}
.mobile-cinema-player .mobile-player-shortcuts{position:absolute;bottom:0;left:0;right:0;height:44px;padding:2px 12px 6px;display:flex;align-items:center;justify-content:center;gap:10px;background:#080b11;z-index:3}.mobile-cinema-player .mobile-player-shortcuts button{min-height:36px;padding:6px 18px}
.mobile-cinema-player.stage{height:calc(56.25vw + 150px)}.mobile-cinema-player .stage-bottom{bottom:44px}
.native-fullscreen .mobile-cinema-player,.mobile-cinema-player:fullscreen{height:100vh;height:100dvh}.native-fullscreen .mobile-cinema-player .stage-bottom,.mobile-cinema-player:fullscreen .stage-bottom{bottom:0}.native-fullscreen .mobile-player-shortcuts,.mobile-cinema-player:fullscreen .mobile-player-shortcuts{left:auto;right:12px;bottom:78px;justify-content:flex-end;background:transparent;width:auto}

.video-catalog{margin:18px 0 22px;min-width:0}.video-catalog .section-heading{margin-bottom:10px}.video-catalog h3{margin:0;font-size:16px;font-weight:600}.video-catalog .catalog-count{color:var(--muted);font-size:11px}.video-carousel{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 12px;scrollbar-width:thin;scrollbar-color:#ffffff35 transparent;-webkit-overflow-scrolling:touch}.video-carousel>.video-card{flex:0 0 164px;scroll-snap-align:start;min-width:0}.video-carousel .video-poster{aspect-ratio:16/9;min-height:92px}.video-carousel .video-card>strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:36px;line-height:18px;margin:8px 0}.video-carousel .video-card-actions{flex-wrap:nowrap;gap:4px}.video-carousel .video-card-actions .small{padding:6px 8px;font-size:10px;min-height:34px;white-space:nowrap}.video-carousel .video-more{flex:0 0 100px;align-self:center;white-space:normal}.video-carousel .empty{font-size:12px;padding:16px;margin:0;min-width:200px}.mobile-workspace .video-catalog{margin:14px 0 18px}.mobile-workspace .video-carousel>.video-card{flex-basis:150px}.mobile-workspace .video-carousel .video-poster{min-height:84px}.mobile-workspace .video-toolbar{margin:12px 0}.mobile-workspace #online-panel>.library-caption{font-size:10px;margin:8px 0}.mobile-workspace #video-source-status{margin:8px 0}

.video-carousel .video-poster{height:92px}.mobile-workspace .video-carousel .video-poster{height:84px}

.app-update-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin:0 0 14px;border:1px solid #ffffff20;border-radius:18px;background:linear-gradient(115deg,#ffffff0c,#ffffff04);backdrop-filter:blur(16px)}
.app-update-banner>div{display:flex;flex-direction:column;gap:3px;min-width:0}.app-update-banner strong{font-size:12px}.app-update-banner small{font-size:11px;color:var(--muted,#a0a7ae);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}.app-update-banner button{flex-shrink:0;font-size:12px;min-height:38px;border-radius:14px;padding:8px 12px}.native-fullscreen .app-update-banner{display:none}

.unified-search{display:flex;flex-direction:column;gap:10px;margin:12px 0}.unified-search input{width:100%;min-height:46px;background:#ffffff0a;border:1px solid #ffffff24;color:var(--white);padding:12px 14px}.unified-search-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.unified-search-actions button{font-size:11px;min-height:42px;padding:8px 5px;white-space:normal}#mobile-search-status{font-size:11px;min-height:16px}#mobile-search-results>.section-heading,#mobile-suggestions>.section-heading{margin-top:20px}#mobile-search-results .section-heading>span{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.local-poster{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#d8f99a21,#5775b529)!important}.local-poster>span{font-size:30px}.local-poster>small{font-size:10px;color:var(--muted)}.local-artist{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}#mobile-karaoke .section-heading h2{font-size:18px}#mobile-mode-label{font-size:11px;color:var(--muted)}

#mobile-karaoke .video-card{position:relative}#mobile-karaoke .card-favorite{position:absolute;top:5px;right:5px;z-index:2;min-height:30px;width:30px;padding:2px;background:#10141bcc;font-size:19px}#mobile-karaoke .card-favorite[aria-pressed=true]{color:var(--accent)}.offline-filters{gap:6px}.offline-filters .filter,.offline-filters select{font-size:10px;padding:7px 9px;min-height:34px}.offline-filters select{max-width:160px}

.fullscreen-glass-panel{position:absolute;right:16px;bottom:86px;width:min(380px,55vw);max-height:70vh;overflow:auto;padding:16px;border:1px solid #ffffff44;border-radius:20px;background:rgba(26,32,38,.70);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 40px #0005;z-index:20}.fullscreen-glass-panel header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.fullscreen-glass-panel .queue-entry{padding:8px 0}.fullscreen-glass-panel .empty{padding:12px;font-size:12px}.fullscreen-glass-panel input{width:100%;padding:10px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff30;color:white}.fullscreen-search-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:8px 0}.fullscreen-search-row span{flex:1}.fullscreen-search-row button{white-space:nowrap}

.mobile-cinema-player.stage{height:calc(56.25vw + 190px)}.mobile-cinema-player .stage-bottom{bottom:84px}.mobile-cinema-player .mobile-player-shortcuts{bottom:40px}.next-two-songs{position:absolute;bottom:0;left:12px;right:12px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:2px;color:white;font-size:11px;line-height:15px;pointer-events:none}.next-two-songs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.native-fullscreen .mobile-cinema-player,.mobile-cinema-player:fullscreen{height:100vh;height:100dvh}.native-fullscreen .mobile-cinema-player .stage-bottom,.mobile-cinema-player:fullscreen .stage-bottom{bottom:0}.native-fullscreen .mobile-player-shortcuts,.mobile-cinema-player:fullscreen .mobile-player-shortcuts{bottom:78px}.native-fullscreen .next-two-songs,.mobile-cinema-player:fullscreen .next-two-songs{top:12px;bottom:auto;left:12px;right:auto;height:auto;width:45%;background:none;border:0;border-radius:0;text-shadow:0 1px 4px #000;z-index:8}.native-fullscreen .stage-top .song-info,.mobile-cinema-player:fullscreen .stage-top .song-info{display:none}

.fullscreen-glass-panel.playlist-text-only{width:min(290px,42vw);padding:6px 8px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 4px #000}.playlist-text-only header{margin-bottom:4px;font-size:12px}.playlist-text-only .queue-entry{padding:3px 0;border:0;font-size:11px;gap:6px}.playlist-text-only .song-info strong{font-size:11px;line-height:15px}.playlist-text-only .song-info small{display:none}.mobile-app .playlist-text-only button{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;min-height:28px;width:28px;font-size:22px}.playlist-text-only .queue-entry .iconbtn{font-size:22px;min-height:28px;width:28px}.playlist-text-only .empty{padding:6px}