:root{--text:#3f3f46;--text-h:#0a0a0a;--bg:#fff;--bg-alt:#f4f4f5;--border:#e4e4e7;--accent:#7c3aed;--accent-contrast:#fff;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#d4d4d8;--text-h:#fafafa;--bg:#121212;--bg-alt:#1c1c1f;--border:#2e2e33;--accent:#a78bfa;--accent-contrast:#121212}}*{box-sizing:border-box}body{min-height:100svh;margin:0}#root{flex-direction:column;min-height:100svh;display:flex}h1,h2,h3{color:var(--text-h);font-weight:600;line-height:1.2}a{color:var(--accent)}button{font:inherit;cursor:pointer}.karaoke-viewport{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#000;justify-content:center;align-items:center;width:100vw;height:100svh;display:flex;position:fixed;inset:0;overflow:hidden}.karaoke-frame{background:#000;width:min(100vw,133.333svh);height:min(100svh,75vw);position:relative;overflow:hidden;container-type:inline-size}.karaoke-photo-layer{background-position:50%;background-size:cover;transition:opacity 3s;position:absolute;inset:0}.karaoke-vignette{pointer-events:none;background:linear-gradient(#0000 40%,#00000040 70%,#0009 100%);position:absolute;inset:0}.karaoke-logo{z-index:1;opacity:0;pointer-events:none;width:25%;height:auto;transition:opacity 3s;position:absolute;top:5%;left:5%}.karaoke-logo.is-visible{opacity:1}.karaoke-font{font-family:Arial,Helvetica Neue,system-ui,sans-serif;font-size:clamp(1.15rem,4.6cqw,2.3rem);font-weight:700;line-height:1.4}.karaoke-dock{text-align:left;z-index:1;opacity:0;flex-direction:column;gap:.25em;width:min(85%,860px);transition:opacity .35s,transform .35s;display:flex;position:absolute;bottom:9%;left:6%;transform:translateY(10px)}.karaoke-dock--sentence-fade{transition:opacity 3s,transform 3s}.karaoke-dock.is-visible{opacity:1;transform:translateY(0)}.karaoke-line{white-space:nowrap;align-self:flex-start;position:relative}.karaoke-line--right{align-self:flex-end}.karaoke-text{transform-origin:bottom;display:block;transform:scaleY(1.12)}.karaoke-text--base{color:#fdffff;text-shadow:0 0 .05em #0009,0 0 .16em #8cacffe6,0 0 .4em #6e96ff8c;position:relative}.karaoke-text--overlay{color:#2b46e6;text-shadow:0 0 .05em #0009,0 0 .16em #fffffff2,0 0 .4em #ffffff8c;clip-path:inset(0 calc((1 - var(--progress,0)) * 100%) 0 0);position:absolute;inset:0}.karaoke-pause-badge{z-index:2;letter-spacing:.15em;color:#ffffffd9;opacity:0;pointer-events:none;background:#0006;border-radius:999px;padding:.4em .6em;font-size:clamp(.9rem,3.2cqw,1.4rem);transition:opacity .25s;position:absolute;top:4%;right:4%}.karaoke-pause-badge.is-visible{opacity:1}.karaoke-measurer{visibility:hidden;pointer-events:none;white-space:nowrap;opacity:0;transition:none;display:block;position:absolute;top:-9999px;left:-9999px;transform:none}@container (width<=480px){.karaoke-dock{width:min(90%,860px);bottom:7%;left:5%}}.start-screen{background:#000;justify-content:center;align-items:center;width:100vw;height:100svh;display:flex;position:fixed;inset:0}.start-button{cursor:pointer;background:0 0;border:none;width:min(32vw,220px);padding:0;transition:transform .15s;animation:2.2s ease-in-out infinite start-button-pulse}.start-button svg{width:100%;height:auto;display:block}.start-button:hover{transform:scale(1.06)}.start-button:active{transform:scale(.96)}@keyframes start-button-pulse{0%,to{filter:drop-shadow(0 0 #f4f1e600)}50%{filter:drop-shadow(0 0 22px #f4f1e673)}}.static-noise-viewport{z-index:50;background:#000;justify-content:center;align-items:center;width:100vw;height:100svh;display:flex;position:fixed;inset:0;overflow:hidden}.static-noise-frame{width:min(100vw,133.333svh);height:min(100svh,75vw);position:relative;overflow:hidden}.static-noise-frame canvas{width:100%;height:100%;image-rendering:pixelated;display:block}#root{min-height:100svh}.black-screen{z-index:50;background:#000;width:100vw;height:100svh;position:fixed;inset:0}