.karaoke-live-screen{block-size:100dvh;inline-size:100%}.karaoke-display-container{isolation:isolate;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;block-size:100%;inline-size:100%;min-inline-size:0;font-family:var(--screen-font,var(--font-body)), sans-serif;color:var(--screen-text);background:var(--screen-background);text-align:start;position:relative;container:karaoke-screen/size}.karaoke-display-container .kd-screen{--kd-muted:color-mix(in srgb, var(--screen-text) 72%, transparent);--kd-border:color-mix(in srgb, var(--screen-text) 18%, transparent);--kd-panel:color-mix(in srgb, var(--screen-bg) 93%, var(--screen-text));--kd-gap:.75em;gap:var(--kd-gap);block-size:100%;inline-size:100%;font-size:calc(clamp(.875rem, min(1.4cqw, 2cqh), 3rem) * var(--screen-scale));letter-spacing:normal;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--screen-accent) var(--screen-bg);flex-direction:column;padding:1em;font-weight:400;line-height:1.4;display:flex;overflow:auto}.karaoke-display-container :is(h1,h2,p){color:inherit;margin:0}.karaoke-display-container :is(button,a){-webkit-tap-highlight-color:transparent}.karaoke-display-container svg{flex:none;block-size:1.15em;inline-size:1.15em}.karaoke-display-container .kd-label{letter-spacing:.14em;text-transform:uppercase;color:var(--screen-accent);align-items:center;gap:.5em;font-size:.72em;font-weight:700;line-height:1.4;display:flex}.karaoke-display-container .kd-muted{color:var(--kd-muted)}.karaoke-display-container .kd-clamp{-webkit-line-clamp:3;overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.karaoke-display-container .kd-title{-webkit-line-clamp:2;font-family:var(--screen-display-font,var(--font-display)), sans-serif;letter-spacing:.025em;-webkit-box-orient:vertical;font-size:3.5em;font-weight:400;line-height:1.05;display:-webkit-box;overflow:hidden}.karaoke-display-container .kd-copy{-webkit-line-clamp:2;color:var(--kd-muted);font-size:1em;line-height:1.45}.karaoke-display-container .kd-card{border:1px solid var(--kd-border);border-radius:var(--screen-radius);background:var(--kd-panel);min-inline-size:0;padding:1em}.karaoke-display-container .kd-button{border:1px solid var(--kd-border);border-radius:min(var(--screen-radius), 1em);background:var(--kd-panel);min-block-size:max(2.75em,2.75rem);min-inline-size:0;color:var(--screen-text);font-family:var(--screen-font,var(--font-body)), sans-serif;letter-spacing:normal;text-align:center;cursor:pointer;justify-content:center;align-items:center;gap:.55em;padding:.65em 1em;font-size:.85em;font-weight:500;line-height:1.35;display:inline-flex}.karaoke-display-container .kd-button:hover{border-color:var(--screen-accent)}.karaoke-display-container :is(button,a):focus-visible{outline:.15em solid var(--screen-accent);outline-offset:.2em}.karaoke-display-container .kd-button:disabled{cursor:wait;opacity:.65}.karaoke-display-container .kd-header{flex:none;justify-content:flex-end;align-self:flex-end;align-items:center;gap:.6em;display:flex}.karaoke-display-container .kd-pill{border:1px solid var(--kd-border);background:var(--kd-panel);border-radius:100em;justify-content:center;align-items:center;gap:.5em;padding:.5em .85em;font-size:.75em;line-height:1.4;display:inline-flex}.karaoke-display-container .kd-pill i{background:var(--screen-primary);border-radius:50%;block-size:.5em;inline-size:.5em}.karaoke-display-container .kd-pill.is-online i{background:var(--screen-accent)}.karaoke-display-container .kd-stage{gap:var(--kd-gap);flex:1 0 auto;grid-template:"hero""stats""queue"minmax(9.5em,1fr)/minmax(0,1fr);min-inline-size:0;display:grid}.karaoke-display-container .kd-stage--with-contact{grid-template-columns:minmax(0,1fr) minmax(0,.38fr);grid-template-areas:"hero contact""stats contact""queue contact"}.karaoke-display-container .kd-hero{grid-area:hero;gap:.4em;min-inline-size:0;display:grid}.karaoke-display-container .kd-stats{gap:var(--kd-gap);grid-area:stats;grid-template-columns:repeat(auto-fit,minmax(min(100%,12em),1fr));display:grid}.karaoke-display-container .kd-stat{align-content:start;gap:.45em;padding:.8em;display:grid}.karaoke-display-container .kd-stat strong{-webkit-line-clamp:2;font-size:1.45em;font-weight:700;line-height:1.2}.karaoke-display-container .kd-stat p{-webkit-line-clamp:2;color:var(--kd-muted);font-size:.9em;line-height:1.4}.karaoke-display-container .kd-contact{border-color:color-mix(in srgb, var(--screen-primary) 35%, transparent);grid-area:contact;align-self:center;gap:1.25em;padding:1.25em;display:grid}.karaoke-display-container .kd-contact-copy{gap:.75em;min-inline-size:0;display:grid}.karaoke-display-container .kd-contact h2{font-family:var(--screen-font,var(--font-body)), sans-serif;letter-spacing:-.025em;font-size:1.6em;font-weight:700;line-height:1.15}.karaoke-display-container .kd-contact p{color:var(--kd-muted);font-size:.9em}.karaoke-display-container .kd-contact a{color:var(--screen-primary);font-size:.9em}.karaoke-display-container .kd-qr{aspect-ratio:1;color:#08111f;text-align:center;background:#fff;border-radius:.5em;justify-self:center;place-items:center;inline-size:min(100%,30cqh);display:grid;overflow:hidden}.karaoke-display-container .kd-qr img{object-fit:contain;block-size:100%;inline-size:100%;display:block}.karaoke-display-container .kd-qr>span{padding:1em;font-size:.8em}.karaoke-display-container .kd-queue{grid-area:queue;grid-template-rows:auto minmax(8em,1fr);gap:.6em;min-inline-size:0;display:grid}.karaoke-display-container .kd-queue-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.35em 1em;display:flex}.karaoke-display-container .kd-queue-heading h2{color:var(--screen-accent);font-family:var(--screen-font,var(--font-body)), sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:.85em;font-weight:700;line-height:1.4}.karaoke-display-container .kd-queue-heading>span{color:var(--kd-muted);font-size:.8em;line-height:1.4}.karaoke-display-container .kd-queue-list{contain:size;flex-direction:column;gap:.65em;min-block-size:0;display:flex;position:relative;overflow:hidden}.karaoke-display-container .kd-queue-item{flex:none;align-items:center;gap:1em;padding:.75em 1em;display:flex}.karaoke-display-container .kd-queue-index{aspect-ratio:1;border-radius:min(var(--screen-radius), .65em);background:color-mix(in srgb, var(--screen-primary) 16%, var(--screen-bg));inline-size:2.3em;color:var(--screen-primary);font-variant-numeric:tabular-nums;flex:0 0 2.3em;place-items:center;font-size:1.3em;font-weight:700;line-height:1;display:grid}.karaoke-display-container .kd-queue-body{gap:.2em;min-inline-size:0;display:grid}.karaoke-display-container .kd-queue-body strong{font-size:1.25em;font-weight:700;line-height:1.25}.karaoke-display-container .kd-queue-body>span{color:var(--kd-muted);-webkit-line-clamp:1;font-size:.85em;line-height:1.4}.karaoke-display-container .kd-empty{color:var(--kd-muted);align-items:center;display:grid}.karaoke-display-container .kd-alert{border:1px solid var(--screen-primary);border-radius:var(--screen-radius);background:var(--kd-panel);color:var(--screen-text);padding:.7em 1em;font-size:.85em}.karaoke-display-container [data-show-queue=false] .kd-stage{grid-template-rows:auto auto;grid-template-areas:"hero""stats";align-content:center}.karaoke-display-container [data-show-queue=false] .kd-stage--with-contact{grid-template-areas:"hero contact""stats contact"}.karaoke-display-container .kd-screen--offline{justify-content:safe center;align-items:center}.karaoke-display-container .kd-offline{text-align:center;justify-items:center;gap:1em;inline-size:min(100%,52em);margin-block:auto;display:grid}.karaoke-display-container .kd-offline-icon{color:var(--screen-primary);block-size:2.5em;inline-size:2.5em}.karaoke-display-container .kd-offline .kd-title{font-size:5em}.karaoke-display-container .kd-offline .kd-copy{font-size:1.25em}.karaoke-display-container .kd-screen--playing{background:#000;padding:0;position:relative;overflow:hidden}.karaoke-display-container .kd-video{position:absolute;inset:0}.karaoke-display-container .kd-video :is(video,iframe){object-fit:contain;block-size:100%;inline-size:100%;display:block}.karaoke-display-container .kd-hud{z-index:2;pointer-events:none;justify-content:space-between;align-items:start;gap:1em;display:flex;position:absolute;inset:1.25em 1.25em auto}.karaoke-display-container .kd-hud-info{border-radius:var(--screen-radius);background:color-mix(in srgb, var(--screen-bg) 88%, transparent);gap:.35em;max-inline-size:65%;padding:.75em 1em;display:grid}.karaoke-display-container .kd-hud-info strong{font-family:var(--screen-display-font,var(--font-display)), sans-serif;font-size:2.5em;font-weight:400;line-height:1.05}.karaoke-display-container .kd-hud-info>span:last-child{color:var(--kd-muted);font-size:.9em}.karaoke-display-container .kd-actions{pointer-events:auto;flex-wrap:wrap;justify-content:end;align-items:center;gap:.5em;display:flex}.karaoke-display-container .kd-paused{pointer-events:none;background:#0005;place-items:center;display:grid;position:absolute;inset:0}.karaoke-display-container .kd-paused>span{border-radius:var(--screen-radius);background:var(--kd-panel);color:var(--screen-text);padding:.65em 1.2em;font-size:1.5em}.karaoke-display-container .kd-gesture{z-index:3;block-size:100%;inline-size:100%;color:var(--screen-text);font:inherit;cursor:pointer;background:#000b;border:0;place-items:center;padding:1.5em;display:grid;position:absolute;inset:0}.karaoke-display-container .kd-gesture-content{text-align:center;justify-items:center;gap:1em;max-inline-size:35em;display:grid}.karaoke-display-container .kd-gesture strong{font-size:1.6em}.karaoke-display-container .kd-playback-alert{z-index:4;position:absolute;inset:auto 1.25em 1.25em}@container karaoke-screen (max-aspect-ratio:1){.karaoke-display-container .kd-screen{font-size:calc(clamp(.875rem, 2cqw, 2rem) * var(--screen-scale))}.karaoke-display-container .kd-stage--with-contact{grid-template:"hero""stats""contact""queue"minmax(9.5em,1fr)/minmax(0,1fr)}.karaoke-display-container .kd-contact{grid-template-columns:minmax(0,1fr) minmax(0,.45fr);align-items:center}.karaoke-display-container .kd-contact--number{grid-template-columns:minmax(0,1fr)}.karaoke-display-container .kd-qr{inline-size:min(100%,24cqw)}.karaoke-display-container [data-show-queue=false] .kd-stage--with-contact{grid-template-rows:auto auto auto;grid-template-areas:"hero""stats""contact"}}@container karaoke-screen (max-width:35rem){.karaoke-display-container .kd-screen{--kd-gap:.85em;padding:1em}.karaoke-display-container .kd-title{font-size:2.7em}.karaoke-display-container .kd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65em}.karaoke-display-container .kd-stat{padding:.75em}.karaoke-display-container .kd-stat:only-child{grid-column:1/-1}.karaoke-display-container .kd-stat strong{-webkit-line-clamp:2;font-size:1.15em}.karaoke-display-container .kd-contact{gap:1em;padding:1em}.karaoke-display-container .kd-contact h2{font-size:1.25em}.karaoke-display-container .kd-queue-item{gap:.65em;padding:.75em}.karaoke-display-container .kd-queue-body strong{font-size:1.1em}.karaoke-display-container .kd-hud{flex-direction:column;inset:1em 1em auto}.karaoke-display-container .kd-hud-info{max-inline-size:100%}.karaoke-display-container .kd-hud .kd-actions{order:-1;align-self:flex-end}.karaoke-display-container .kd-hud-info strong{font-size:2em}.karaoke-display-container .kd-offline .kd-title{font-size:3.5em}}@container karaoke-screen (max-height:30rem) and (min-aspect-ratio:1){.karaoke-display-container .kd-title{font-size:2.5em}.karaoke-display-container .kd-hud-info strong{font-size:1.8em}}.karaoke-display-container .kd-video>.react-player{position:absolute;inset:0}.karaoke-display-container [data-font-scale=large] .kd-hero .kd-title{font-size:3em}.karaoke-display-container .kd-button--icon{aspect-ratio:1;border-radius:min(var(--screen-radius), .8em);inline-size:max(2.75em,2.75rem);padding:.65em}