@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@700&display=swap";
:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#09090f;--panel:#14141d;--panel2:#1b1b26;--text:#f7f4ff;--muted:#8d8b9b;--purple:#7c4dff;--pink:#ff3fa4;--line:#292937}*{box-sizing:border-box}html{background:var(--bg)}body{color:var(--text);background:radial-gradient(circle at 20% 10%,#211440 0,transparent 30%),radial-gradient(circle at 80% 80%,#201024 0,transparent 25%),var(--bg);min-height:100vh;margin:0;font-family:Manrope,system-ui,sans-serif}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit}.shell{max-width:1440px;min-height:100vh;margin:auto;padding:28px 5vw}.centered{text-align:center;place-content:center;display:grid}.home{flex-direction:column;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:10px;font-weight:800;display:flex}.brandButton{color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.brandMark{background:linear-gradient(135deg,var(--purple),var(--pink));border-radius:11px;place-items:center;width:34px;height:34px;font-family:Unbounded;font-size:17px;display:grid;box-shadow:0 0 24px #8a48ff55}.liveDot{letter-spacing:.12em;color:#ff5bb1;border:1px solid #ff3fa455;border-radius:20px;padding:4px 7px;font-size:9px}.hero{flex:1;grid-template-columns:minmax(0,1.15fr) minmax(330px,480px);align-items:center;gap:8vw;padding:7vh 4vw;display:grid}.hero h1{letter-spacing:-.055em;margin:20px 0;font-family:Unbounded,sans-serif;font-size:clamp(42px,5.3vw,82px);line-height:1.05}.hero h1 span,.equipment h1{color:#0000;background:linear-gradient(90deg,#a78bfa,#ff66b7);-webkit-background-clip:text;background-clip:text}.eyebrow{color:#ac83ff;letter-spacing:.15em;text-transform:uppercase;font-size:12px;font-weight:800}.lead{color:#b0aebb;max-width:620px;font-size:clamp(16px,1.4vw,20px);line-height:1.7}.featureRow{color:#d0ced7;flex-wrap:wrap;gap:10px 22px;margin-top:32px;font-size:13px;display:flex}.card{border:1px solid var(--line);background:linear-gradient(145deg,#171720ee,#111119ee);border-radius:24px;box-shadow:0 30px 80px #0008}.entryCard{padding:36px}.entryCard h2{margin:0 0 24px;font-size:26px}label{color:#b9b6c6;gap:9px;font-size:12px;font-weight:700;display:grid}input,textarea,select{color:#fff;background:#0f0f16;border:1px solid #323242;border-radius:13px;outline:none;width:100%;padding:14px 15px}textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:#7c4dff;box-shadow:0 0 0 3px #7c4dff22}.button{cursor:pointer;border:1px solid #0000;border-radius:13px;justify-content:center;align-items:center;gap:10px;padding:12px 17px;font-weight:800;transition:transform .2s,opacity .2s,background .2s;display:inline-flex}.button:hover{transform:translateY(-1px)}.button:disabled{opacity:.4;cursor:not-allowed;transform:none}.button.primary{background:linear-gradient(110deg,#6941e8,#9d4eff);box-shadow:0 12px 28px #7144ed33}.button.accent{background:linear-gradient(110deg,#e8348f,#ff6a6a)}.button.secondary{background:#252532;border-color:#383849}.button.ghost{color:#aaa8b4;background:0 0;border-color:#30303d}.button.danger{color:#ff83ab;background:#331723;border-color:#6b263e;width:100%}.button.large{width:100%;margin-top:14px;padding:16px 20px}.divider{color:#6f6d7a;align-items:center;gap:12px;margin:22px 0;font-size:11px;display:flex}.divider:before,.divider:after{content:"";background:#2d2d39;flex:1;height:1px}.codeJoin{grid-template-columns:1fr auto;gap:10px;display:grid}.codeJoin input{letter-spacing:.2em;text-transform:uppercase;font-weight:800}.errorText{color:#ff78a9;font-size:13px}footer{color:#5f5d6b;text-align:center;font-size:11px}.roomShell{min-height:100vh;padding:18px 24px 30px}.roomHeader{grid-template-columns:1fr auto 1fr auto;align-items:center;gap:18px;max-width:1500px;margin:0 auto 18px;display:grid}.roomCode{letter-spacing:.16em;cursor:pointer;background:#14141d;border:1px solid #2c2c38;border-radius:12px;padding:7px 14px;font-weight:800}.roomCode small{color:#74717e;letter-spacing:.14em;font-size:7px;display:block}.roomCode span{color:#817f8d}.connection{color:#aaa8b4;justify-self:end;align-items:center;gap:7px;font-size:11px;font-weight:700;display:flex}.connection i{background:#42db91;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #42db91}.connection.reconnecting i{background:#ffb74d}.roomGrid{grid-template-columns:minmax(0,1fr) 300px;gap:16px;max-width:1500px;margin:auto;display:grid}.stage{min-height:calc(100vh - 105px);display:grid;position:relative;overflow:hidden}.stage:before{content:"";pointer-events:none;background:radial-gradient(circle at 50% 45%,#4b278233,#0000 45%);position:absolute;inset:0}.stageVideo{z-index:2;object-fit:contain;background:#000;border-radius:16px;width:calc(100% - 8vw);height:calc(100% - 200px);display:none;position:absolute;inset:88px 4vw 112px;box-shadow:0 24px 80px #000b}.stageVideo.visible{display:block}.youtubeStageVideo{visibility:hidden;opacity:0;pointer-events:none;border:0;display:block}.youtubeStageVideo.visible{visibility:visible;opacity:1}.emptyStage{text-align:center;z-index:1;place-self:center;max-width:560px;padding:40px}.emptyStage h1{letter-spacing:-.05em;margin:15px 0;font-size:clamp(28px,4vw,52px)}.emptyStage p{color:var(--muted)}.stageIcon,.singerOrb{background:#211a36;border:1px solid #50388b;border-radius:50%;place-items:center;width:100px;height:100px;margin:0 auto 24px;font-size:40px;display:grid;box-shadow:0 0 60px #7c4dff33}.singerOrb{background:linear-gradient(135deg,#7144ed,#e9469d);font-size:42px;font-weight:800}.sidePanel{flex-direction:column;gap:14px;display:flex}.participants{box-shadow:none;border-radius:18px;padding:19px}.sectionTitle{justify-content:space-between;align-items:center;display:flex}.sectionTitle h3,.soundCard h3,.waitingVideoCard h3{margin:0;font-size:14px}.sectionTitle span{color:#7c7987;font-size:11px}.participantItems{gap:8px;margin-top:16px;display:grid}.participant{background:#1a1a24;border-radius:12px;align-items:center;gap:10px;padding:9px;display:flex}.avatar{background:#30303e;border-radius:9px;place-items:center;width:32px;height:32px;font-size:12px;font-weight:800;display:grid}.participantName{text-overflow:ellipsis;flex:1;min-width:0;font-size:12px;font-weight:700;overflow:hidden}.participantName small{color:#777482;font-size:9px;font-weight:500;display:block}.micBadge{font-size:12px}.iconButton{cursor:pointer;background:#262632;border:1px solid #3b3b49;border-radius:8px;width:27px;height:27px}.iconButton:disabled{opacity:.35;cursor:not-allowed}.soundCard{box-shadow:none;border-radius:18px;gap:14px;padding:19px;display:grid}.ratingOverlay{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#08070dcf;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.ratingModal{text-align:center;gap:16px;width:min(480px,100%);padding:38px;display:grid;position:relative;overflow:hidden}.soundActivationOverlay{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#08070de8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.soundActivationModal{text-align:center;gap:16px;width:min(460px,100%);padding:38px;display:grid}.soundActivationModal h2{margin:0;font-size:30px}.modalBackdrop{z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#08070de8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.duetInvitationModal{text-align:center;gap:16px;width:min(500px,100%);padding:38px;display:grid}.duetInvitationModal h2,.duetInvitationModal p{margin:0}.duetInvitationModal p{color:var(--muted);line-height:1.6}.invitationTimer{color:#d7b8ff;background:#251a38;border:1px solid #7655a8;border-radius:50%;place-items:center;width:70px;height:70px;margin:auto;font-family:Unbounded;font-size:17px;display:grid}.invitationActions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.duetConnection{color:#aaa8b4;text-align:center;background:#181824;border-radius:12px;margin:12px 0 0;padding:10px 14px;font-size:12px}.duetConnection.good.connected{color:#55df9b}.duetConnection.warning{color:#ffca68}.duetConnection.poor,.duetConnection.failed,.duetConnection.disconnected{color:#ff78a9}.ratingModal h2{margin:0;font-size:30px}.ratingTimer{color:#d7b8ff;background:#251a38;border:1px solid #7655a8;border-radius:50%;place-items:center;width:48px;height:48px;font-family:Unbounded;font-size:17px;display:grid;position:absolute;top:18px;right:20px;box-shadow:0 0 25px #8e5bff44}.ratingButtons{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:5px;display:grid}.ratingButtons button{color:#e4d5ff;cursor:pointer;background:#251c38;border:1px solid #654b94;border-radius:13px;padding:15px 5px;font-size:17px;font-weight:800}.ratingButtons button:hover{background:#3b285a;transform:translateY(-1px)}.ratingButtons button:disabled{opacity:.4;cursor:not-allowed;transform:none}.ratingThanks{color:#aaa5b5;background:#201a2d;border-radius:13px;margin:5px 0 0;padding:14px;font-size:14px}.ratingThanks strong{color:#d7b8ff}.ratingResult{color:#c49aff;text-shadow:0 0 35px #a46fff55;padding:18px;font-family:Unbounded;font-size:clamp(34px,8vw,58px)}.mediaButton{text-align:center;font-size:11px;overflow:hidden}.mediaButton input{display:none}.muted{color:#777482;font-size:10px;line-height:1.5}.karaokeMediaCard{gap:12px}.mediaSourceTabs{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mediaSourceTabs .button{padding:9px;font-size:11px}.mediaSourceTabs .button[aria-pressed=true]{background:#50349a;border-color:#936aff;box-shadow:0 0 0 2px #7c4dff22}.mediaSourceOption{background:#111119;border:1px solid #2c2c39;border-radius:13px;gap:9px;padding:12px;display:grid}.mediaSourceOption strong{color:#d7d3e3;text-overflow:ellipsis;font-size:11px;overflow:hidden}.mediaSourceOption label{margin:0}.mediaSourceOption label span{font-size:10px}.mediaSourceOption input{padding:10px 11px;font-size:11px}.mediaSourceOption>.button{padding:10px 12px;font-size:11px}.soundCard label{margin-top:4px}.localVolumeControl{gap:8px;display:grid}.localVolumeControl>div{color:#aaa8b4;justify-content:space-between;align-items:center;font-size:11px;display:flex}.localVolumeControl strong{color:#d7b8ff;font-size:11px}.localVolumeControl input{width:100%}.syncReset{color:#9f83d5;cursor:pointer;background:0 0;border:0;justify-self:end;padding:3px 0;font-size:10px}.syncReset:disabled{opacity:.35;cursor:default}.stabilityCard{box-shadow:none;border-radius:18px;gap:12px;padding:19px;display:grid}.stabilityHint{color:#777482;margin:0;font-size:10px;line-height:1.45}.stabilityPerformers{gap:9px;display:grid}.stabilityPerformer{background:#15151e;border:1px solid #30303d;border-radius:13px;gap:5px;padding:11px;display:grid}.stabilityPerformer.good{border-color:#285d47}.stabilityPerformer.warning{border-color:#66542e}.stabilityPerformer.poor{border-color:#6b3047}.stabilityHeading{justify-content:space-between;align-items:start;gap:10px;display:flex}.stabilityHeading>div{gap:2px;display:grid}.stabilityHeading strong{font-size:12px}.stabilityHeading small,.stabilityHeading>span{color:#888492;font-size:9px}.stabilityPerformer.good .stabilityHeading>span{color:#55df9b}.stabilityPerformer.warning .stabilityHeading>span{color:#ffca68}.stabilityPerformer.poor .stabilityHeading>span,.stabilityLate{color:#ff78a9!important}.stabilityPerformer p{color:#aaa8b4;margin:0;font-size:9px;line-height:1.45}input[type=range]{accent-color:#9558ff;box-shadow:none;background:0 0;border:0;padding:0}.tip{color:#878493;background:#171323;border:1px solid #2d2840;border-radius:16px;padding:16px;font-size:11px}.tip span{color:#b495ff;font-weight:800}.tip p{margin:7px 0 0;line-height:1.5}.equipment{z-index:1;align-self:start;width:100%;max-width:900px;margin:auto;padding:34px 5vw}.equipment h1{margin:8px 0 24px;font-size:36px}.setupGrid,.metadata{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;display:grid}.upload,.micSetup{text-align:center;cursor:pointer;background:#15131e;border:1px dashed #48405f;border-radius:16px;place-content:center;min-height:130px;padding:20px}.upload{gap:8px;display:grid}.upload span{color:#a879ff;font-size:25px}.upload small{color:#74717e}.upload input{display:none}.micSetup{text-align:left;gap:12px;display:grid}.micSetup em{color:#55df9b;font-size:10px;font-style:normal}.lowLatencyOption{cursor:pointer;align-items:center;gap:9px;font-size:12px;display:flex}.lowLatencyOption input{accent-color:#a879ff;width:auto;padding:0}.levelMeter{background:#2a2933;border-radius:6px;height:6px;overflow:hidden}.levelMeter i{background:linear-gradient(90deg,#4ee09b,#b4ef65);height:100%;transition:width .12s;display:block}.performance{z-index:1;grid-template-rows:auto minmax(0,1fr) auto;width:100%;min-height:0;padding:28px 4vw;display:grid}.videoSpacer{min-height:0}.songHeading{text-align:center}.songHeading span{color:#aa7fff;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800}.songHeading h2{margin:5px 0 0;font-size:25px}.songHeading p{color:#777482;margin:3px}.lyrics{scrollbar-width:none;text-align:center;padding:18vh 10px;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000,#000 20% 80%,#0000);mask-image:linear-gradient(#0000,#000 20% 80%,#0000)}.lyrics p{color:#3d3a49;max-width:900px;margin:22px auto;font-size:clamp(22px,3.2vw,46px);font-weight:800;line-height:1.35;transition:all .3s}.lyrics p.active{color:#fff;text-shadow:0 0 28px #a365ff66;transform:scale(1.03)}.lyrics p.next{color:#85818e}.lyricsEmpty{color:#4f4c58;place-items:center;font-size:30px;font-weight:800;display:grid}.progress{width:100%;max-width:800px;margin:auto}.progress>div{color:#74717e;justify-content:space-between;font-size:10px;display:flex}.controls{justify-content:center;gap:10px;margin-top:14px;display:flex}.controls button{cursor:pointer;background:#24232e;border:1px solid #3a3847;border-radius:50%;width:44px;height:44px}.controls .play{background:linear-gradient(135deg,#7144ed,#a556ff);border:0;width:54px;height:54px}.waitingVideoCard{box-shadow:none;border-radius:18px;gap:12px;padding:16px;display:grid}.waitingVideoFrame{aspect-ratio:16/9;background:#09090f;border:0;border-radius:12px;width:100%}.waitingVideoActions{grid-template-columns:1fr auto;gap:8px;display:grid}.waitingVideoActions .button{padding:10px 12px;font-size:11px}.countdown{z-index:4;text-align:center;background:#090910dd;place-content:center;display:grid;position:absolute;inset:0}.countdown span{color:#a970ff;text-shadow:0 0 80px #a970ff;font-family:Unbounded;font-size:180px}.countdown small{text-transform:uppercase;letter-spacing:.3em;color:#aaa}.toast{z-index:10;color:#eee;background:#211b30;border:1px solid #51466e;border-radius:14px;padding:13px 18px;position:fixed;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 15px 60px #000}.joinCard{text-align:left;gap:15px;width:min(460px,90vw);padding:38px;display:grid}.joinCard h1{margin:0 0 10px}.loader{border:3px solid #2c2940;border-top-color:#9962ff;border-radius:50%;width:38px;height:38px;margin:auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:900px){.hero{grid-template-columns:1fr;padding:7vh 0}.hero>div{text-align:center}.lead{margin-inline:auto}.featureRow{justify-content:center}.roomGrid{grid-template-columns:1fr}.stage{min-height:72vh}.sidePanel{grid-template-columns:1fr 1fr;display:grid}.participants{grid-row:span 2}.roomHeader{grid-template-columns:1fr auto auto}.roomHeader .connection{display:none}}@media (max-width:600px){.shell{padding:18px}.hero h1{font-size:40px}.entryCard{padding:24px}.roomShell{padding:10px}.roomHeader{grid-template-columns:1fr auto}.roomHeader>.button{display:none}.roomHeader .roomCode{font-size:11px}.roomGrid{gap:10px}.stage{border-radius:18px;min-height:70vh}.sidePanel{grid-template-columns:1fr}.participants{grid-row:auto}.equipment{padding:26px 18px}.equipment h1{font-size:25px}.setupGrid,.metadata{grid-template-columns:1fr}.lyrics{padding-block:15vh}.lyrics p{font-size:25px}.performance{padding:20px 14px}.countdown span{font-size:110px}.ratingModal{padding:34px 20px 24px}.ratingButtons{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
