@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap";:root{color-scheme:dark;--bg: #0c0d10;--bg-accent: #14161c;--ink: #f4f5f7;--muted: #a2a8b2;--primary: #2fd370;--primary-strong: #21b85c;--accent: #2fd370;--accent-soft: rgba(47, 211, 112, .18);--card: rgba(21, 23, 29, .9);--panel: #1a1d23;--panel-strong: #232730;--border: rgba(255, 255, 255, .08);--shadow: 0 24px 60px rgba(0, 0, 0, .45);--danger: #c43a3a;--glow: 0 0 0 1px rgba(45, 224, 114, .35), 0 0 28px rgba(45, 224, 114, .2);--fab-size: 52px;--fab-offset: 16px}*{box-sizing:border-box}body{margin:0;font-family:Manrope,Space Grotesk,sans-serif;color:var(--ink);min-height:100vh;background:radial-gradient(circle at 15% 20%,#1d2028,#0f1014 48%,#0b0c0f)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 80% 10%,rgba(80,90,120,.28),transparent 45%),linear-gradient(120deg,rgba(47,211,112,.08),transparent 35%);pointer-events:none;z-index:0}#app{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:24px clamp(16px,3vw,32px) 48px;min-height:100vh;display:flex;flex-direction:column;gap:24px}body.room-active{overflow:hidden}body.room-active #app{height:100dvh;min-height:100vh}body.room-active main{display:flex;flex-direction:column;flex:1;min-height:0}body.room-active #room-view{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;height:100%;overflow:hidden}.video-main,.video-strip{display:contents}.video-tile.tile-hidden{display:none}.participants-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#07080a99;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}body.participants-open .participants-backdrop{opacity:1;pointer-events:auto}body.mobile-view #toggle-participants{display:inline-flex}body:not(.mobile-view) #toggle-participants{display:none}body.mobile-view.room-active #app{padding:0}body.mobile-view.room-active .topbar{display:none}body.mobile-view.room-active #room-view{position:fixed;top:0;right:0;bottom:0;left:0}body.mobile-view.room-active .room-shell{position:relative;height:100%}body.mobile-view.room-active .room-stage{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;gap:0;padding:0}body.mobile-view.room-active .room-header{position:fixed;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;z-index:6;padding:10px 12px;border-radius:16px;background:#0e1014bf;border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}body.mobile-view.room-active .room-header h2{font-size:18px}body.mobile-view.room-active .room-header p{font-size:12px}body.mobile-view.room-active .controls{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:7;width:auto;margin:0;padding:10px 12px;border-radius:18px;background:#0c0e12d1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;opacity:1;transform:translateY(0) scale(1);transition:opacity .2s ease,transform .2s ease}body.mobile-view.room-active .controls button{min-width:0;width:100%;justify-content:center}body.mobile-view.room-active .controls button.danger{grid-column:1 / -1}body.mobile-view.room-active.controls-collapsed .controls{opacity:0;transform:translateY(16px) scale(.98);pointer-events:none}body.mobile-view.room-active .video-grid{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;--grid-gap: 8px;--strip-height: clamp(64px, 18vw, 112px);padding:0}body.mobile-view.room-active.controls-collapsed .video-grid{padding-bottom:calc(var(--fab-size, 52px) + var(--fab-offset, 16px) + env(safe-area-inset-bottom));padding-right:calc(var(--fab-offset, 16px) + env(safe-area-inset-right))}body.mobile-view.room-active .video-grid.mobile-focus{display:block}body.mobile-view.room-active .video-grid.mobile-focus .video-main{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:stretch;justify-content:center}body.mobile-view.room-active .video-grid.mobile-focus .video-main .video-tile{width:100%;height:100%;border-radius:0;aspect-ratio:auto}body.mobile-view.room-active .video-grid.mobile-focus .video-strip{position:fixed;left:12px;right:12px;bottom:calc(var(--controls-height, 84px) + 12px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:8px;padding:8px;background:#0c0e12d1;border:1px solid var(--border);border-radius:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}body.mobile-view.room-active.controls-collapsed .video-grid.mobile-focus .video-strip{bottom:calc(var(--fab-size, 52px) + var(--fab-offset, 16px) + env(safe-area-inset-bottom))}body.mobile-view.room-active .video-grid.mobile-focus .video-strip .video-tile{flex:0 0 auto;height:var(--strip-height);aspect-ratio:16 / 9;scroll-snap-align:start}body.mobile-view.room-active .video-grid.mobile-gallery{align-content:center;justify-content:center}body.mobile-view.room-active .video-grid.mobile-gallery .video-strip{display:none}body.mobile-view.room-active .room-sidebar{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;max-height:min(70vh,calc(100dvh - var(--controls-height, 84px) - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));overflow:hidden;transform:translateY(120%);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease;background:transparent;box-shadow:none;box-sizing:border-box;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}body.mobile-view.room-active .room-sidebar>*{background:var(--panel);border-radius:18px;border:1px solid var(--border);width:100%;box-sizing:border-box}body.mobile-view.room-active .room-sidebar .participants-panel{padding:14px}body.mobile-view.room-active .room-sidebar .participants-list{max-height:min(42vh,320px)}body.mobile-view.room-active.participants-open .room-sidebar{transform:translateY(0);opacity:1;pointer-events:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-radius:18px;background:#12141ac7;border:1px solid var(--border);box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#2fd370,#1db45b);color:#0e0f12;font-weight:700;letter-spacing:1px;box-shadow:0 12px 30px #21b55b40}.brand h1{margin:0;font-family:Space Grotesk,sans-serif;font-size:20px;font-weight:600}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.pill{padding:6px 14px;border-radius:999px;font-size:12px;background:#ffffff0f;color:var(--muted);border:1px solid var(--border)}.pill.connected{background:var(--accent-soft);color:var(--accent);border-color:#2fd37059}.view{display:grid;gap:24px}#home-view{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}#room-view{position:relative}.benefits{grid-column:1 / -1}.benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.benefit-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px 14px;display:grid;place-items:center;gap:10px;text-align:center;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.benefit-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#2fd3701f;border:1px solid rgba(47,211,112,.25);color:var(--accent)}.benefit-icon svg{width:22px;height:22px}.benefit-card h3{margin:0;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.card h2{margin:0 0 8px;font-family:Space Grotesk,sans-serif}.card p{margin:0 0 16px;color:var(--muted)}label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}input{width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0f1115;color:var(--ink);font-size:14px}input::placeholder{color:#ffffff59}button{border:1px solid transparent;padding:12px 18px;border-radius:12px;font-size:14px;cursor:pointer;background:var(--panel-strong);color:var(--ink);transition:transform .1s ease,box-shadow .1s ease,border-color .1s ease;touch-action:manipulation}@media (hover: hover) and (pointer: fine){button:hover{transform:translateY(-1px);border-color:#ffffff29}}button:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}button.is-active{background:var(--accent);color:#0c0f12;box-shadow:0 12px 24px #2fd37040}button.is-loading{position:relative;color:transparent}button.is-loading:after{content:"...";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--ink);letter-spacing:2px}button.primary{background:var(--primary);color:#0b0f12;box-shadow:0 12px 24px #2fd37040}button.ghost{background:#0f1115cc;border:1px solid var(--border)}button.danger{background:var(--danger);color:#fff;box-shadow:0 12px 24px #c43a3a4d}.result{margin-top:12px;padding:10px 12px;background:#2fd3701f;border-radius:10px;color:var(--accent);font-size:13px;word-break:break-word}.result.error{background:#c43a3a24;color:#ff8b8b}.hidden{display:none}.room-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.room-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;min-height:min(720px,78vh)}body.room-active .room-shell{width:100%;height:100%;overflow:hidden}body.room-active .room-stage{height:100%;min-height:0}.room-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.room-header h2{margin:0;font-family:Space Grotesk,sans-serif;font-size:22px}.room-header p{margin:6px 0 0;color:var(--muted);font-size:14px}.room-header.is-clickable{cursor:pointer;border-radius:16px;transition:background .2s ease,transform .1s ease}@media (hover: hover) and (pointer: fine){.room-header.is-clickable:hover{background:#ffffff0a}}.room-header.is-clickable:active{background:#2fd3701f;transform:translateY(1px)}.room-header.is-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.video-grid{--grid-cols: 1;--grid-rows: 1;--tile-width: 1px;--tile-height: 1px;--grid-gap: 16px;display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,var(--tile-width)));grid-auto-rows:var(--tile-height);gap:var(--grid-gap);align-content:center;justify-content:center;height:100%;width:100%;min-height:0;overflow:hidden}.video-grid.focus-mode .video-tile.focus{box-shadow:var(--glow)}.video-tile{background:#14161b;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16 / 9;border:2px solid rgba(47,211,112,.85);box-shadow:0 10px 30px #00000073}.video-tile.camera-off{background:#181a20}.video-tile.pinned{border-color:var(--accent);box-shadow:var(--glow)}.tile-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center;color:var(--muted);font-size:13px;background:radial-gradient(circle at top,#2fd3701f,#0f1115e6)}.tile-placeholder:before{content:"";width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#f5f7ff,#cfd3e0 55%,#a1a6b5);box-shadow:inset 0 0 0 8px #0003}.tile-placeholder.hidden{display:none}.tile-status{position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;background:#000000a6;color:#fff;font-size:11px;letter-spacing:.3px}.tile-status.hidden{display:none}.video-tile video,.video-tile audio{width:100%;height:100%;object-fit:cover}.tile-label{position:absolute;left:50%;bottom:12px;transform:translate(-50%);padding:6px 12px;background:#000000a6;color:#fff;border-radius:999px;font-size:12px}.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:12px 16px;border-radius:999px;background:#0f1115e6;border:1px solid var(--border);width:fit-content;margin:0 auto}#room-view .controls button{padding:10px 16px;border-radius:999px;font-size:13px;box-shadow:none;background:var(--panel-strong);border:1px solid var(--border);color:var(--ink)}#room-view .controls button.is-active{background:var(--accent);color:#0b0f12}#room-view .controls button.danger{background:var(--danger);color:#fff;border-color:#ffffff1f}.controls-fab{position:fixed;right:calc(var(--fab-offset, 16px) + env(safe-area-inset-right));bottom:calc(var(--fab-offset, 16px) + env(safe-area-inset-bottom));width:var(--fab-size, 52px);height:var(--fab-size, 52px);border-radius:50%;padding:0;display:none;place-items:center;background:var(--panel-strong);border:1px solid var(--border);color:var(--ink);font-size:22px;box-shadow:var(--shadow);opacity:0;transform:scale(.9);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:8}.controls-fab span{line-height:1}body.mobile-view.room-active .controls-fab{display:grid}body.mobile-view.room-active.controls-collapsed .controls-fab{opacity:1;transform:scale(1);pointer-events:auto}.room-sidebar{display:grid;gap:16px}.participants-panel{background:var(--panel);border-radius:18px;padding:16px;border:1px solid var(--border);box-shadow:var(--shadow)}.participants-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.participants-title h3{margin:0;font-size:15px}.participants-count{margin:0;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:12px;background:#ffffff14;color:var(--ink)}.participants-search{position:relative;display:block;margin-top:12px}.participants-search:before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-radius:50%;transform:translateY(-50%)}.participants-search:after{content:"";position:absolute;left:22px;top:50%;width:6px;height:2px;background:#ffffff59;transform:translateY(4px) rotate(45deg)}.participants-search input{margin-top:0;padding-left:34px;background:#0f1115;border-color:var(--border)}.participants-list{margin-top:14px;display:grid;gap:10px;max-height:360px;overflow-y:auto}.participant-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#ffffff0a;border:1px solid transparent}.participant-item.is-local{border-color:#2fd37040;background:#2fd3701f}.participant-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#f0f2ff,#c2c7d6 60%,#9aa0b2);color:#1a1d23;font-weight:700;font-size:12px}.participant-meta{display:grid;gap:4px}.participant-name{font-size:14px}.participant-tag{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.info-panel{background:var(--panel);border-radius:18px;padding:16px;border:1px solid var(--border);display:grid;gap:12px}.info-panel>div{background:#ffffff0a;border-radius:12px;padding:10px 12px}.info-panel h3{margin:0 0 6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.info-panel p{margin:0;font-size:14px}.sidebar-actions{display:grid;gap:12px;padding:16px;border-radius:18px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}.sidebar-actions button{width:100%}.invite-link{display:grid;gap:6px}.invite-link-label{margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.invite-link-value{padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:#ffffff0a;color:var(--ink);font-size:12px;word-break:break-all}.toast-root{position:fixed;right:24px;bottom:24px;display:grid;gap:12px;z-index:20}.toast{background:#14161cf2;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);font-size:13px;color:var(--ink);animation:toast-in .2s ease-out}.toast.success{border-left:4px solid var(--accent)}.toast.error{border-left:4px solid var(--danger)}.toast.hide{opacity:0;transform:translateY(6px)}.modal-root{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#0000008c;z-index:30;padding:20px}.modal-root.active{display:flex}.modal{background:var(--card);border-radius:20px;padding:24px;border:1px solid var(--border);box-shadow:var(--shadow);width:min(420px,92vw)}.modal h3{margin:0 0 8px;font-family:Space Grotesk,sans-serif}.modal p{margin:0 0 12px;color:var(--muted)}.modal-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.modal-copy input{width:100%;margin-top:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 960px){.benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){#home-view,.benefits-grid{grid-template-columns:1fr}.benefit-card{padding:14px 12px}.benefit-card h3{font-size:13px}.benefit-icon{width:36px;height:36px;border-radius:10px}.benefit-icon svg{width:20px;height:20px}}@media (max-width: 1100px){.room-shell{display:flex;flex-direction:column;height:100%;min-height:0;align-items:stretch}.room-stage{min-height:0;height:100%;flex:1 1 auto;display:flex;flex-direction:column}.room-sidebar{max-height:35vh;overflow-y:auto}.video-grid{flex:1 1 auto;min-height:0}.controls{width:100%;border-radius:18px}}@media (max-width: 720px){.room-shell{gap:16px}.room-stage{gap:12px}.topbar{flex-direction:column;align-items:flex-start}.room-header h2{font-size:18px}.room-header p{font-size:12px}.controls{gap:8px;padding:10px}.video-grid{--grid-gap: 8px;min-height:0}.room-sidebar{width:100%;max-height:28vh}.participants-panel,.info-panel,.sidebar-actions{width:100%}.participants-panel{padding:12px}.participants-list{max-height:160px}}