*{box-sizing:border-box;margin:0;padding:0}.demo-guide{padding:24px;border:1px solid #36534e;background:#18352f;border-radius:14px;margin-bottom:24px}.demo-guide ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:24px;margin-bottom:24px}.demo-guide p{line-height:1.6;color:#c0d5ce;margin:8px 0}.demo-guide label{display:grid;gap:8px}.demo-guide a{color:#b6e4cf;display:inline-flex;align-items:center;min-height:44px}.demo-guide input{width:100%;min-width:0}.demo-guide details{margin-top:20px}.demo-guide summary{cursor:pointer;padding:10px 0}.demo-guide .row{flex-wrap:wrap}.eyebrow{font-size:12px;letter-spacing:1.5px;color:#acd7be}#demo-availability{margin:16px 0;line-height:1.6}.panels{grid-template-columns:minmax(0,1fr)!important}.log{overflow-wrap:anywhere}@media(max-width:700px){.demo-guide{padding:18px}.demo-guide ol{grid-template-columns:1fr;gap:12px}}body{font-family:DM Sans,system-ui,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100dvh}#app{max-width:1100px;margin:0 auto;padding:20px 16px 32px}header{margin-bottom:20px}header h1{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:6px}header p{color:#94a3b8;line-height:1.5}.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.panel{background:#1e293b;border:1px solid #334155;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}.panel h2{font-size:1.1rem}.status{font-size:.85rem;color:#94a3b8}.quality-badge{font-size:.8rem;font-weight:600;padding:6px 10px;border-radius:8px;background:#334155;color:#e2e8f0}.quality-badge.excellent{background:#14532d;color:#86efac}.quality-badge.good{background:#1e3a5f;color:#93c5fd}.quality-badge.fair{background:#713f12;color:#fcd34d}.quality-badge.poor{background:#7f1d1d;color:#fca5a5}.row{display:flex;gap:8px;flex-wrap:wrap}input,button{font:inherit}input{flex:1;min-width:120px;border:1px solid #475569;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:10px 12px}button{border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;background:#6366f1;color:#fff}button.secondary{background:#334155}button.danger{background:#ef4444}button.success{background:#22c55e;color:#052e16}button:disabled{opacity:.5;cursor:not-allowed}.messages{min-height:180px;max-height:220px;overflow-y:auto;background:#0f172a;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;font-size:.9rem}.msg{padding:6px 8px;border-radius:8px;background:#1e293b}.msg.self{background:#312e81}.call-bar{display:flex;gap:8px;flex-wrap:wrap}.mode-label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:#94a3b8;flex:1}.mode-label select{border:1px solid #475569;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:10px 12px}.log{font-size:.78rem;color:#64748b;min-height:1.2em}.video-area{display:grid;grid-template-columns:1fr 1fr;gap:8px}.video-box{background:#0f172a;border:1px solid #334155;border-radius:12px;overflow:hidden;aspect-ratio:4/3;position:relative}.video-box video{width:100%;height:100%;object-fit:cover;background:#000}.video-label{position:absolute;left:8px;bottom:8px;font-size:.72rem;background:#0009;padding:2px 8px;border-radius:6px}.remote-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}[hidden]{display:none!important}.video-area,.remote-videos,.video-box{min-width:0}@media(max-width:480px){.video-area,.remote-videos{grid-template-columns:minmax(0,1fr)}}