body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:20px;background-color:#f5f5f5}.sticky{position:sticky;top:0;background-color:#fff;border-bottom:1px solid #ddd;padding:10px 0;margin-bottom:20px;z-index:1000}.row{display:flex;align-items:center}h3{margin:0;color:#333}#connection-state{display:inline-block;padding:5px 10px;border-radius:4px;font-weight:700;margin-bottom:20px}#connection-state[data-connection-state=connected]{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}#connection-state[data-connection-state=disconnected]{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}#connection-state[data-connection-state=connecting]{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}#connection-state[data-connection-state=undefined]{background-color:#e2e3e5;color:#383d41;border:1px solid #d6d8db}p{margin:10px 0}label{font-weight:700;margin-right:5px}input[type=text]{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}.text-input{width:300px}button{background-color:#007bff;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;margin-right:10px}button:hover{background-color:#0056b3}button:disabled{background-color:#6c757d;cursor:not-allowed}#disconnect{background-color:#dc3545}#disconnect:hover{background-color:#c82333}#vr-button{background-color:#28a745}#vr-button:hover{background-color:#218838}#vr-button:disabled{background-color:#6c757d}.video-container{float:left;margin-left:20px}#remote-video{width:400px;height:300px;border:2px solid #0000ff;border-radius:8px;background-color:#000}@media (max-width: 768px){.video-container{float:none;margin-left:0;margin-top:20px}#remote-video{width:100%;max-width:400px;height:auto}.text-input{width:100%;max-width:300px}}