:root{--bg:#000;--fg:#fff;--fg2:#888;--fg3:#444;--mono:"SF Mono", "Cascadia Code", "Fira Code", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--fg2);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font:15px/1.6 system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{min-height:100svh;margin:0}#root{flex-direction:column;min-height:100svh;display:flex}h1{color:var(--fg);letter-spacing:-.01em;margin:0;font-size:1.125rem;font-weight:400}p{color:var(--fg3);margin:0;font-size:.8125rem}input{font-family:var(--mono)}button{font-family:inherit}.room-join{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;display:flex}.room-join h1{letter-spacing:-.03em;color:var(--fg);font-size:2.5rem;font-weight:300}.room-join p{color:var(--fg3);font-size:.875rem}.room-join form{gap:0;width:100%;max-width:360px;display:flex}.room-join input{border:1px solid var(--fg3);color:var(--fg);background:0 0;border-right:none;border-radius:6px 0 0 6px;outline:none;flex:1;padding:.625rem 1rem;font-size:.875rem;transition:border-color .2s}.room-join input:focus{border-color:var(--fg2)}.room-join input::placeholder{color:var(--fg3)}.room-join button{border:1px solid var(--fg3);background:var(--fg);color:var(--bg);cursor:pointer;white-space:nowrap;border-radius:0 6px 6px 0;padding:.625rem 1.25rem;font-size:.875rem;font-weight:400;transition:opacity .15s}.room-join button:disabled{opacity:.2;cursor:not-allowed}.room-join button:not(:disabled):hover{opacity:.8}.call-screen{flex-direction:column;flex:1;min-height:100svh;display:flex}.call-header{justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.call-status{align-items:center;gap:.5rem;display:flex}.quality-dot{border-radius:50%;width:8px;height:8px;transition:background .3s;display:inline-block}.quality-dot[data-quality=good]{background:#22c55e}.quality-dot[data-quality=fair]{background:#eab308}.quality-dot[data-quality=poor]{background:#ef4444}.quality-dot[data-quality=unknown]{background:var(--fg3)}.leave-btn{border:1px solid var(--fg3);color:var(--fg2);cursor:pointer;background:0 0;border-radius:6px;padding:.375rem .875rem;font-size:.75rem;font-weight:400;transition:all .15s}.leave-btn:hover{border-color:var(--fg2);color:var(--fg)}.call-body{flex:1;min-height:0;margin:0 1.25rem;position:relative}.remote-video{width:100%;height:100%;position:absolute;inset:0}.remote-video .video-container{height:100%}.local-pip{z-index:10;cursor:grab;border-radius:8px;width:160px;height:120px;position:absolute;bottom:1rem;right:1rem;overflow:hidden;box-shadow:0 4px 20px #00000080}.local-pip .video-container{border-radius:8px;height:100%;min-height:auto}.local-pip .video-container:after{display:none}.local-pip .video-label{font-size:.5625rem}.call-controls{justify-content:center;align-items:center;gap:1rem;padding:1.25rem;display:flex}.control-btn{border:1px solid var(--fg3);width:48px;height:48px;color:var(--fg);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;min-width:48px;min-height:48px;transition:all .15s;display:flex}.control-btn:hover{border-color:var(--fg2);background:#ffffff0d}.control-btn.active{color:var(--fg3);border-color:#ef444466}.control-btn.active:hover{border-color:#ef444499}.video-container{background:#111;border-radius:10px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.video-container video{object-fit:cover;backface-visibility:hidden;width:100%;height:100%;display:block;transform:translateZ(0)}@supports (-webkit-touch-callout:none){.video-container{overflow:hidden}.video-container video{width:auto;min-width:100%;height:auto;min-height:100%}}.video-container:after{content:"";pointer-events:none;background:linear-gradient(#0000 70%,#0006 100%);position:absolute;inset:0}.video-label{font-size:.6875rem;font-family:var(--mono);color:#ffffff80;z-index:1;text-transform:uppercase;letter-spacing:.04em;position:absolute;bottom:.75rem;left:1rem}.error-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.error-content{border:1px solid var(--fg3);text-align:center;background:#111;border-radius:12px;max-width:400px;margin:1rem;padding:2rem}.error-content h3{color:var(--fg);margin:0 0 .5rem;font-size:1.125rem}.error-content p{color:var(--fg2);margin-bottom:1.5rem;font-size:.875rem;line-height:1.5}.error-actions{justify-content:center;gap:.75rem;display:flex}.error-actions button{border:1px solid var(--fg3);color:var(--fg);cursor:pointer;background:0 0;border-radius:6px;padding:.625rem 1.25rem;font-size:.875rem}.error-actions button:first-child{background:var(--fg);color:var(--bg);border-color:var(--fg)}.retry-btn{background:var(--fg);color:var(--bg);cursor:pointer;border:none;border-radius:4px;padding:.375rem .75rem;font-size:.75rem;transition:opacity .15s}.retry-btn:hover{opacity:.8}.status{font-size:.75rem;font-family:var(--mono);color:var(--fg3);text-transform:uppercase;letter-spacing:.05em}.status.reconnecting{color:#eab308}.loading-spinner{border:2px solid var(--fg3);border-top-color:var(--fg);border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (hover:none){.control-btn{-webkit-tap-highlight-color:transparent}}.empty-video{color:var(--fg3);font-size:.75rem;font-family:var(--mono);flex-direction:column;align-items:center;gap:.5rem;display:flex}@media (width<=768px){.local-pip{width:120px;height:90px;bottom:.75rem;right:.75rem}}