:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#000;--fg:#fff;--dim:#ffffff8c;--faint:#ffffff1a;--accent:#34c759;--danger:#ff6b6b}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}[hidden]{display:none!important}#app{min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex}.view{text-align:center;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:360px;animation:.35s both rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}h1{letter-spacing:.01em;margin:0;font-size:1.6rem;font-weight:600}h1.handle{font-size:1.35rem}.lede{color:var(--dim);margin:0;font-size:1.02rem;line-height:1.5}.hint{color:#ffffff80;margin:-4px 0 0;font-size:.82rem}.timer{color:var(--dim);font-variant-numeric:tabular-nums;margin:-6px 0 4px;font-size:1.05rem}.net-quality{flex-direction:column;align-items:center;gap:3px;margin:-2px 0 4px;display:flex}.net-bars{width:20px;height:16px}.net-bars rect{fill:#ffffff2e;transition:fill .3s}.net-quality[data-q=excellent] .net-bars rect,.net-quality[data-q=good] .net-bars rect:nth-child(-n+2){fill:var(--accent)}.net-quality[data-q=poor] .net-bars rect:first-child{fill:#fc0}.net-quality[data-q=lost] .net-bars rect:first-child{fill:var(--danger)}.net-ping{color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:.7rem}.net-quality[data-q=poor] .net-ping{color:#fc0}.net-quality[data-q=lost] .net-ping{color:var(--danger)}.net-status{color:var(--danger);margin:2px 0 6px;font-size:.85rem;font-weight:600}@keyframes net-status-pulse{50%{opacity:.45}}.net-status:not([hidden]){animation:1.4s ease-in-out infinite net-status-pulse}@media (prefers-reduced-motion:reduce){.net-status:not([hidden]){animation:none}}.ring-wrap{place-items:center;width:128px;height:128px;margin-bottom:6px;display:grid;position:relative}.disc{background:var(--fg);width:104px;height:104px;color:var(--bg);z-index:1;border-radius:50%;place-items:center;display:grid}.brand{z-index:1;width:116px;height:92px}.disc--muted{color:var(--dim);background:#1c1c1e}.disc-icon{fill:currentColor;width:42px;height:42px}.ring{background:#ffffff38;border-radius:50%;animation:2s ease-out infinite pulse;position:absolute;inset:0}.ring--2{animation-delay:1s}.ring--live{background:#34c75947;animation:2.4s ease-out infinite pulse}.ring--spin{border:3px solid var(--faint);border-top-color:var(--fg);background:0 0;animation:.9s linear infinite spin}@keyframes pulse{0%{opacity:.7;transform:scale(.82)}to{opacity:0;transform:scale(1.5)}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ring,.ring--spin,.view{animation:none}.ring--spin{border-top-color:var(--fg)}}.pill{appearance:none;font:inherit;background:var(--fg);color:var(--bg);cursor:pointer;touch-action:manipulation;border:none;border-radius:999px;padding:16px 40px;font-size:1.05rem;font-weight:600;transition:transform 60ms,filter .15s}.pill--accent{background:var(--accent);color:#fff}.pill:active{filter:brightness(.92);transform:scale(.96)}.pill:focus-visible,.ctl:focus-visible .ctl-glyph{outline:2px solid var(--fg);outline-offset:3px}.controls{gap:28px;margin-top:12px;display:flex}.ctl{appearance:none;font:inherit;color:var(--dim);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;padding:0;display:flex}.ctl-glyph{background:var(--faint);width:64px;height:64px;color:var(--fg);border-radius:50%;place-items:center;transition:transform 60ms,background .15s;display:grid}.ctl-glyph svg{fill:currentColor;width:26px;height:26px}.ctl:active .ctl-glyph{transform:scale(.9)}.ctl-label{font-size:.8rem}.ctl[aria-pressed=true] .ctl-glyph{background:var(--danger);color:#000}.ctl .ic-mic-off,.ctl .ic-spk-off,.ctl[aria-pressed=true] .ic-mic,.ctl[aria-pressed=true] .ic-spk{display:none}.ctl[aria-pressed=true] .ic-mic-off,.ctl[aria-pressed=true] .ic-spk-off{display:block}#speakerBtn[aria-pressed=true] .ctl-glyph{background:var(--fg);color:#000}.ctl--end .ctl-glyph{background:var(--danger);color:#000}
