:root{--bg:#0b0b0f;--fg:#f2f2f5;--muted:#8b8b99;--accent:#e0483c;--surface:#16161d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{min-height:100dvh;margin:0}body{background:var(--bg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{min-height:100dvh}.screen{text-align:center;background-image:var(--backdrop);min-height:100dvh;padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));background-position:50%;background-size:cover;flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;position:relative}.screen:before{content:"";pointer-events:none;background:linear-gradient(#0b0b0fe0,#0b0b0f9e 40%,#0b0b0fb8 60%,#0b0b0feb);position:absolute;inset:0}.screen>*{z-index:1;position:relative}h1{letter-spacing:-.6px;margin:0;font-size:34px}.lede{color:var(--muted);max-width:30ch;margin:0;line-height:1.5}.song__artist{color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin:0 0 4px;font-size:13px;font-weight:600}.song__title{margin:0;font-size:40px}.roles{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.role{font:inherit;color:var(--fg);cursor:pointer;touch-action:manipulation;background:#16161db8;border:1px solid #ffffff24;border-radius:14px;padding:18px 24px;font-size:18px;font-weight:600}.role:active{background:#282834d9}.role--quiet{color:var(--muted);background:0 0;border-color:#0000}.screen--play{padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));justify-content:stretch;gap:16px}.playbar{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.playbar__song{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.quit{font:inherit;color:var(--muted);cursor:pointer;touch-action:manipulation;background:0 0;border:none;padding:8px 12px;font-size:15px}.quit:disabled{opacity:.4}.pad.is-quitting{opacity:.35;transition:opacity 1.2s ease-out}.pad{touch-action:none;background:#16161d99;border:2px solid #ffffff29;border-radius:24px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.pad__label{letter-spacing:-.4px;font-size:28px;font-weight:700}.pad__hint{color:var(--muted);font-size:14px}.pad__meter{background:#ffffff1a;border-radius:5px;width:70%;max-width:260px;height:10px;margin-top:14px;overflow:hidden}.pad__meter-fill{border-radius:inherit;background:var(--accent);transform-origin:0;will-change:transform;height:100%;transform:scaleX(0)}.bar{background:var(--surface);border-radius:3px;width:100%;max-width:320px;height:6px;overflow:hidden}.bar--time{max-width:none;height:4px}.bar__fill{background:var(--accent);border-radius:inherit;transform-origin:0;height:100%;transform:scaleX(0)}