*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #0c1117;--secondary: #151d27;--tertiary: #1e2a36;--accent: #14b8a6;--accent-light: #2dd4bf;--accent-glow: rgba(20, 184, 166, .4);--amber: #f59e0b;--text: #f1f5f9;--text-muted: #94a3b8;--border: rgba(255, 255, 255, .1);--glass: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .08);--danger: #ef4444;--danger-hover: #dc2626}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--primary);color:var(--text);line-height:1.6;overflow-x:hidden;min-height:100vh}#root{min-height:100vh}.bg-gradient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:var(--primary);overflow:hidden}.bg-gradient:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 20%,rgba(20,184,166,.15) 0%,transparent 40%),radial-gradient(circle at 80% 80%,rgba(245,158,11,.12) 0%,transparent 40%),radial-gradient(circle at 40% 70%,rgba(249,115,22,.1) 0%,transparent 40%);animation:bgPulse 20s ease-in-out infinite}@keyframes bgPulse{0%,to{transform:translate(0) scale(1)}25%{transform:translate(2%,-2%) scale(1.02)}50%{transform:translate(-1%,2%) scale(1)}75%{transform:translate(-2%,-1%) scale(1.01)}}.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0}.orb-1{width:600px;height:600px;background:linear-gradient(135deg,#14b8a64d,#0d948833);top:-200px;right:-200px;animation:float1 25s ease-in-out infinite}.orb-2{width:500px;height:500px;background:linear-gradient(135deg,#f59e0b40,#f9731633);bottom:-150px;left:-150px;animation:float2 30s ease-in-out infinite}@keyframes float1{0%,to{transform:translate(0)}33%{transform:translate(-50px,50px)}66%{transform:translate(30px,-30px)}}@keyframes float2{0%,to{transform:translate(0)}33%{transform:translate(40px,-40px)}66%{transform:translate(-30px,30px)}}nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;background:#0c1117cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.logo{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--text);text-decoration:none}.logo-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-light));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;color:var(--primary)}.page{position:relative;z-index:1;min-height:100vh;padding-top:80px}.landing-content{max-width:560px;margin:0 auto;text-align:center;padding:5rem 1.5rem 2rem}.landing-content h1{font-size:3rem;font-weight:800;line-height:1.1;margin-bottom:1rem;letter-spacing:-.02em}.landing-content h1 span{color:var(--accent)}.landing-content p{color:var(--text-muted);font-size:1.125rem;margin-bottom:2.5rem}.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.input-group{display:flex;gap:.75rem;margin-bottom:1rem}.input-group input{flex:1;padding:.875rem 1.25rem;border-radius:12px;border:1px solid var(--border);background:var(--secondary);color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}.input-group input:focus{border-color:var(--accent)}.input-group input::placeholder{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;border-radius:12px;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:var(--primary);box-shadow:0 4px 20px var(--accent-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 28px var(--accent-glow)}.btn-secondary{background:var(--tertiary);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--secondary);border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--text-muted);font-size:.875rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.code-display{font-size:2.5rem;font-weight:800;letter-spacing:.25em;color:var(--accent);text-align:center;margin:1.5rem 0;font-family:SF Mono,ui-monospace,monospace}.copy-hint{color:var(--text-muted);font-size:.875rem;text-align:center;margin-bottom:1.5rem}.room-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.5rem;background:#0c1117cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:fixed;top:72px;left:0;right:0;z-index:99}.room-code{font-family:ui-monospace,monospace;font-size:1.125rem;color:var(--accent);font-weight:700}.room-info{color:var(--text-muted);font-size:.875rem}.video-grid{display:grid;gap:1rem;padding:1.5rem;padding-top:148px;padding-bottom:100px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-content:start;min-height:100vh}.video-grid.single{grid-template-columns:1fr;max-width:900px;margin:0 auto}.video-grid.double{grid-template-columns:repeat(2,1fr);max-width:1200px;margin:0 auto}.video-grid.has-maximized{grid-template-columns:1fr;grid-template-rows:1fr;max-width:100%;height:calc(100vh - 200px)}.video-grid.has-maximized .video-wrapper{display:none}.video-grid.has-maximized .video-wrapper.maximized{display:flex;grid-column:1 / -1;aspect-ratio:auto;height:100%;max-height:none}.video-wrapper{position:relative;background:var(--secondary);border-radius:16px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}.video-wrapper video{width:100%;height:100%;object-fit:cover;display:block}.video-wrapper.screen-share{grid-column:1 / -1;aspect-ratio:auto;max-height:70vh}.video-label{position:absolute;bottom:.75rem;left:.75rem;background:#0009;padding:.375rem .75rem;border-radius:8px;font-size:.875rem;font-weight:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.video-status{position:absolute;top:.75rem;right:.75rem;display:flex;gap:.5rem}.maximize-btn{position:absolute;top:.75rem;left:.75rem;width:28px;height:28px;border-radius:50%;background:#0009;border:none;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}.video-wrapper:hover .maximize-btn{opacity:1}.maximize-btn:hover{background:var(--accent);color:var(--primary)}.status-icon{width:28px;height:28px;border-radius:50%;background:#0009;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-icon.muted{color:var(--danger)}.status-icon.hidden{display:none}.avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-light));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;color:var(--primary)}.controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:1rem;padding:1rem;background:#0c1117e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);z-index:100}.control-btn{width:52px;height:52px;border-radius:50%;border:none;background:var(--tertiary);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border:1px solid var(--border)}.control-btn:hover{background:var(--secondary);border-color:var(--accent)}.control-btn.off{background:var(--danger);border-color:var(--danger);color:#fff}.control-btn.leave-btn{background:var(--danger);color:#fff;width:auto;padding:0 1.5rem;border-radius:12px;font-weight:600;gap:.5rem}.control-btn.leave-btn:hover{background:var(--danger-hover)}.toast{position:fixed;top:100px;left:50%;transform:translate(-50%) translateY(-20px);background:var(--tertiary);border:1px solid var(--accent);color:var(--text);padding:.75rem 1.5rem;border-radius:12px;opacity:0;pointer-events:none;transition:all .3s;z-index:200}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.permission-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c1117e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center}.permission-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;padding:2rem;max-width:400px;text-align:center}.permission-card h2{margin-bottom:.5rem}.permission-card p{color:var(--text-muted);margin-bottom:1.5rem}@media (max-width: 768px){.landing-content h1{font-size:2rem}.landing-content{padding-top:3rem}.video-grid{grid-template-columns:1fr!important;padding:.75rem;padding-top:130px;padding-bottom:90px}.video-grid.double{max-width:100%}.controls{gap:.5rem;padding:.75rem .5rem}.control-btn{width:44px;height:44px}.room-header{top:68px;padding:.75rem 1rem;flex-direction:column;gap:.25rem;align-items:flex-start}nav{padding:1rem 1.25rem}.code-display{font-size:2rem;letter-spacing:.15em}}