:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.app-container{width:100vw;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background-color:#f1f5f9}.app-container header.app-header{background-color:#fff;padding:1rem 2rem;box-shadow:0 1px 2px #0000000d;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e2e8f0}.app-container header.app-header h1{font-size:1.5rem;color:#1e293b;font-weight:600}.app-container header.app-header .header-controls{display:flex;align-items:center;gap:1.5rem}.app-container header.app-header .header-controls .disconnect-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#ef4444;color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.app-container header.app-header .header-controls .disconnect-btn:hover{background-color:#dc2626;transform:translateY(-1px)}.app-container main.main-content{display:grid;grid-template-columns:300px 1fr;gap:1.5rem;padding:2rem;max-width:100vw;margin:0 auto;width:100%;height:95wh;overflow:hidden}@media (max-width: 768px){.app-container main.main-content{grid-template-columns:1fr;grid-template-rows:auto}}.app-container main.main-content.closed{grid-template-columns:1fr;grid-template-rows:auto}.app-container main.main-content .sidebar{background-color:#fff;border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:2rem;height:max-content;box-shadow:0 4px 6px -1px #0000001a;max-width:400px}.app-container main.main-content .sidebar.open{transform:translate(0)}.app-container main.main-content .sidebar.closed{transform:translate(-100%);display:none}.app-container main.main-content .sidebar .peer-info{display:flex;flex-direction:column;gap:1rem}.app-container main.main-content .sidebar .peer-info h3{color:#1e293b;font-size:1.25rem;font-weight:600}.app-container main.main-content .sidebar .peer-info .peer-id{background-color:#f1f5f9;color:#000;padding:.75rem;border-radius:.5rem;font-family:monospace;font-size:.875rem;word-break:break-all;border:1px solid #e2e8f0}.app-container main.main-content .sidebar .peer-info .connect-form{display:flex;flex-direction:column;gap:.75rem}.app-container main.main-content .sidebar .peer-info .connect-form input{padding:.75rem;border:1px solid #e2e8f0;border-radius:.5rem;font-size:.875rem;transition:border-color .2s;background-color:transparent;color:#000}.app-container main.main-content .sidebar .peer-info .connect-form input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.app-container main.main-content .sidebar .peer-info .connect-form .connect-btn{background-color:#2563eb;color:#fff;padding:.75rem;border:none;border-radius:.5rem;font-weight:500;cursor:pointer;transition:all .2s}.app-container main.main-content .sidebar .peer-info .connect-form .connect-btn:hover{background-color:#1e40af;transform:translateY(-1px)}.app-container main.main-content .sidebar .connected-peers{flex:1}.app-container main.main-content .sidebar .connected-peers .connection-status{display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:#64748b;font-size:.875rem;margin-bottom:1rem}.app-container main.main-content .sidebar .connected-peers .connection-status .connectednumber{display:flex;align-items:center;gap:.2rem}.app-container main.main-content .sidebar .connected-peers .connection-status .connectednumber .status-dot{width:8px;height:8px;border-radius:50%;background-color:#22c55e}.app-container main.main-content .sidebar .connected-peers h3{color:#1e293b;font-size:1rem;font-weight:600}.app-container main.main-content .sidebar .connected-peers ul{display:flex;flex-direction:column;gap:.5rem}.app-container main.main-content .sidebar .connected-peers ul li{display:flex;align-items:center;gap:.75rem;padding:.75rem;background-color:#f1f5f9;border-radius:.5rem;font-size:.875rem;color:#64748b;transition:all .2s}.app-container main.main-content .sidebar .connected-peers ul li:hover{transform:translate(2px)}.app-container main.main-content .sidebar .connected-peers ul li.user-self{color:#2563eb!important;font-weight:500;background-color:#eff6ff!important}.app-container main.main-content .sidebar .connected-peers ul li i{font-size:1rem;color:#64748b}.app-container main.main-content .toggle-sidebar-btn{position:fixed;top:0;right:0;z-index:110;border:none;background-color:#fff0;color:#000;cursor:pointer;border-radius:2rem}.app-container main.main-content .toggle-sidebar-btn:hover{color:#304f97;border:none}.app-container main.main-content .toggle-sidebar-btn:focus{border:none;outline:none}.app-container main.main-content .toggle-sidebar-btn.closed{background-color:#eff6ff;box-shadow:0 10px 15px -3px #0000001a;max-width:fit-content;left:0;top:10vh}.app-container main.main-content .video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;align-content:start;padding-right:.5rem}.app-container main.main-content .video-grid .video-participant{position:relative;aspect-ratio:16/9;background-color:#0f172a;border-radius:1rem;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.app-container main.main-content .video-grid .video-participant video{width:100%;height:100%}.app-container main.main-content .video-grid .video-participant .participant-name{position:absolute;bottom:1rem;left:1rem;background-color:#000000bf;color:#fff;padding:.5rem 1rem;border-radius:2rem;font-size:.875rem;font-weight:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.app-container footer.app-footer{position:fixed;bottom:0;width:100%}.app-container footer.app-footer .controls{display:flex;justify-content:center;gap:1rem;padding:1rem}.app-container footer.app-footer .controls .control-btn{width:3.5rem;height:3.5rem;border-radius:50%;border:none;background-color:#cedcee;border:1px solid #e2e8f0;color:#1e293b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.app-container footer.app-footer .controls .control-btn:hover:not(:disabled){background-color:#2563eb;color:#fff;transform:translateY(-2px)}.app-container footer.app-footer .controls .control-btn.active{background-color:#2563eb;color:#fff}.app-container footer.app-footer .controls .control-btn:disabled{opacity:.5;cursor:not-allowed}.setup-container{width:100vw;min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;padding:1rem}.setup-container .setup-card{background-color:#fff;padding:2.5rem;border-radius:1.5rem;box-shadow:0 10px 15px -3px #0000001a;width:100%;max-width:440px;text-align:center}.setup-container .setup-card h1{font-size:1.75rem;color:#1e293b;margin-bottom:2rem;text-align:center;font-weight:600}.setup-container .form-group{margin-bottom:1.5rem}.setup-container .form-group label{display:block;margin-bottom:.5rem;color:#1e293b;font-weight:500}.setup-container .form-group input{width:100%;padding:.875rem;border:1px solid #e2e8f0;border-radius:.75rem;font-size:1rem;transition:all .2s;background-color:transparent;color:#0f172a}.setup-container .form-group input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.setup-container .setup-btn{width:100%;padding:.875rem;background-color:#2563eb;color:#fff;border:none;border-radius:.75rem;font-weight:500;font-size:1rem;cursor:pointer;transition:all .2s}.setup-container .setup-btn:hover{background-color:#1e40af;transform:translateY(-1px)}.setup-container .meeting-type-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.setup-container .meeting-type-buttons .type-btn{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.25rem 1rem;background-color:#f1f5f9;border:2px solid transparent;border-radius:.75rem;cursor:pointer;transition:all .2s;color:#0f172a}.setup-container .meeting-type-buttons .type-btn i{font-size:1.75rem;color:#64748b}.setup-container .meeting-type-buttons .type-btn:hover{background-color:#97a4ec;transform:translateY(-2px)}.setup-container .meeting-type-buttons .type-btn.active{border-color:#2563eb;background-color:#eff6ff;color:#2563eb}.setup-container .meeting-type-buttons .type-btn.active i{color:#2563eb}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#64748b;border-radius:20px;border:2px solid #f1f5f9}@media (max-width: 768px){.main-content{grid-template-columns:1fr;grid-template-rows:auto}.sidebar{height:auto;height:min-content}.app-header{padding:1rem}.app-header h1{font-size:1.25rem}}