:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10131b;color:#e8edf5;line-height:1.5}
*{box-sizing:border-box}body{margin:0}main{max-width:1040px;margin:auto;padding:24px}h1{margin-bottom:0}h1 span{font-size:16px;font-weight:400;color:#9cabc5}header p,footer,.diagnostics p,details p{color:#a9b6ca;font-size:14px}#status{padding:12px 16px;background:#202b3e;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
form{max-width:480px;display:grid;gap:16px}label{display:grid;gap:6px}input,select,button,textarea{font:inherit;border:1px solid #485674;border-radius:7px;padding:10px;background:#1b2332;color:inherit}button{cursor:pointer;background:#294c7a}button:hover{background:#356092}button:disabled{opacity:.5;cursor:wait}button.danger{background:#683341}input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #9dc3ff;outline-offset:3px}details{border:1px solid #35425a;padding:12px;border-radius:8px}details label{margin-top:12px}summary{cursor:pointer}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}#participants{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.participant{padding:16px;border:2px solid #34415b;border-radius:10px;background:#192130}.participant.speaking{border-color:#51dc96;box-shadow:0 0 0 1px #51dc96}.participant h3{margin:0 0 10px;overflow-wrap:anywhere}.participant label{font-size:14px}.participant input{width:100%;padding:0;accent-color:#87b8ff}audio{display:none}video{width:100%;max-height:60vh;background:#080b10;border-radius:8px}.diagnostics{margin-top:24px;padding:18px;border:1px solid #34415b;border-radius:10px}pre{font:13px/1.7 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}textarea{width:100%;min-height:240px;margin-top:12px}footer{margin-top:28px} [hidden]{display:none!important}
@media(max-width:540px){main{padding:16px}.controls button{flex:1 1 40%}h1 span{display:block}}