:root{color-scheme:dark;color:#eee;background:#111;font-family:system-ui,sans-serif}main{max-width:40rem;margin:0 auto;padding:1rem}button{font:inherit;color:inherit;cursor:pointer;background:#222;border:1px solid #444;border-radius:.375rem;padding:.5rem 1rem}button[aria-pressed=true]{background:#1f6f4a;border-color:#2a9d68}#join{background:#1f6f4a}canvas{aspect-ratio:16/9;background:#000;border-radius:.375rem;width:100%;display:block}.hint{color:#aaa;font-size:.875rem}.controls{flex-wrap:wrap;gap:.5rem;margin-top:.75rem;display:flex}.status{align-items:center;gap:.5rem;display:flex}.dot{background:#c93;border-radius:50%;width:.6rem;height:.6rem}.dot.connected{background:#3c8}.dot.disconnected,.error{color:#f77;background:#c33}.error{background:0 0}