:root{--bg:#0f1115;--surface:#1a1d23;--surface-2:#23272f;--surface-3:#2d323c;--border:#343a46;--text:#e8eaed;--text-dim:#9aa0a6;--accent:#4f7cff;--accent-hover:#6a91ff;--danger:#ea4335;--danger-hover:#f25a4d;--ok:#34a853;--warn:#fbbc04;--radius:16px;--radius-sm:10px;--shadow:0 10px 30px #00000059;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}[hidden]{display:none!important}h1,h2{letter-spacing:-.02em;margin:0;font-weight:600}code,pre{background:var(--surface-2);border-radius:6px;font-family:ui-monospace,SF Mono,Menlo,monospace}code{padding:.1em .4em}pre{padding:12px 16px;overflow-x:auto}.icon{fill:currentColor;flex:none;width:22px;height:22px}.btn{height:40px;font:inherit;cursor:pointer;color:var(--text);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-weight:500;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed}.btn .icon{width:18px;height:18px}.btn-lg{height:48px;padding:0 24px;font-size:1rem}.btn-sm{height:32px;padding:0 12px;font-size:.875rem}.btn-primary{background:var(--accent);color:#fff}.btn-primary:not(:disabled):hover{background:var(--accent-hover)}.btn-outline{border-color:var(--border)}.btn-outline:hover{background:var(--surface-2)}.btn-text{color:var(--accent-hover)}.btn-text:not(:disabled):hover{background:#4f7cff1f}.icon-btn{width:40px;height:40px;color:var(--text-dim);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;display:inline-grid}.icon-btn:hover{background:var(--surface-3);color:var(--text)}.input{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);width:100%;height:44px;color:var(--text);font:inherit;outline:none;padding:0 14px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4f7cff40}select.input{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-repeat:no-repeat;background-size:5px 5px;padding-right:36px}.round-btn{background:var(--surface-3);width:48px;height:48px;color:var(--text);cursor:pointer;border:0;border-radius:999px;place-items:center;transition:background .15s,transform .1s;display:inline-grid;position:relative}.round-btn:hover{background:#3a404c}.round-btn:active{transform:scale(.96)}.round-btn.is-off{background:var(--danger);color:#fff}.round-btn.is-off:hover{background:var(--danger-hover)}.round-btn.is-active{color:#0b1a45;background:#c2d3ff}.round-btn.danger{background:var(--danger);color:#fff}.round-btn.danger:hover{background:var(--danger-hover)}.round-btn.wide{width:64px}.topbar{align-items:center;padding:20px 28px;display:flex}.brand{align-items:center;gap:10px;font-size:1.25rem;font-weight:600;display:inline-flex}.brand-mark{background:var(--accent);color:#fff;border-radius:10px;place-items:center;width:34px;height:34px;display:inline-grid}.brand-mark .icon{width:20px;height:20px}.room-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:500;overflow:hidden}.landing,.lobby,.message-screen{background:radial-gradient(1200px 600px at 80% -10%, #4f7cff2e, transparent 60%), var(--bg);flex-direction:column;min-height:100%;display:flex}.topbar{justify-content:space-between;gap:16px}.topbar-clock{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.95rem}.home{flex:1;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);align-items:center;gap:56px;width:100%;max-width:1200px;margin:0 auto;padding:24px 28px 48px;display:grid}.home-main h1{letter-spacing:-.03em;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05}.greeting{color:#c2d3ff;background:#4f7cff1f;border-radius:999px;align-items:center;gap:10px;margin:0 0 20px;padding:6px 16px 6px 10px;font-weight:500;display:inline-flex}.greeting .icon{color:#ffd166;width:18px;height:18px}.privacy-note{color:var(--text-dim);align-items:center;gap:8px;margin:20px 0 0;font-size:.85rem;display:flex}.privacy-note .icon{width:16px;height:16px}.recent-card{border:1px solid var(--border);min-height:300px;max-height:540px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1a1d23cc;border-radius:20px;flex-direction:column;padding:20px 16px 16px;display:flex}.recent-header{justify-content:space-between;align-items:center;padding:0 8px 8px;display:flex}.recent-header h2{font-size:1.1rem}.recent-list{margin:0;padding:0;list-style:none;overflow-y:auto}.recent{border-radius:12px;align-items:center;gap:12px;padding:10px 8px;display:flex}.recent:hover{background:var(--surface-2)}.recent-mark{background:hsl(var(--hue) 70% 55% / .18);width:40px;height:40px;color:hsl(var(--hue) 85% 75%);border-radius:12px;flex:none;place-items:center;font-weight:600;display:grid}.recent-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.recent-info strong,.recent-meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.recent-info strong{font-weight:500}.recent-meta{color:var(--text-dim);font-size:.8rem}.recent-actions{align-items:center;gap:2px;display:flex}.recent-actions .icon-btn{width:34px;height:34px}.recent-actions .icon-btn .icon{width:18px;height:18px}.recent-empty{text-align:center;color:var(--text-dim);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:24px;line-height:1.5;display:flex}.recent-empty p{max-width:260px;margin:0}.recent-empty-icon{background:var(--surface-2);border-radius:50%;place-items:center;width:56px;height:56px;display:grid}.features{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:1200px;margin:0 auto;padding:16px 28px 64px;display:grid}.feature{background:var(--surface);border:1px solid #ffffff0d;border-radius:16px;padding:24px}.feature-icon{width:40px;height:40px;color:var(--accent-hover);background:#4f7cff24;border-radius:12px;place-items:center;margin-bottom:14px;display:inline-grid}.feature h3{margin:0 0 6px;font-size:1rem;font-weight:600}.feature p{color:var(--text-dim);margin:0;font-size:.9rem;line-height:1.5}.lead{color:var(--text-dim);max-width:480px;margin:20px 0 36px;font-size:1.125rem;line-height:1.6}.landing-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.join-form{border:1px solid var(--border);background:var(--surface);border-radius:999px;flex:1;align-items:center;min-width:260px;max-width:380px;height:48px;padding:4px;transition:border-color .15s,box-shadow .15s;display:flex}.join-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #4f7cff40}.join-form .input,.join-form .input:focus{height:100%;box-shadow:none;background:0 0;border:0;padding:0 14px}.btn-join{background:var(--accent);color:#fff;flex:none;height:38px}.btn-join:not(:disabled):hover{background:var(--accent-hover)}.btn-join:disabled{background:var(--surface-2);color:var(--text-dim);opacity:1}.tile{border-radius:var(--radius);background:var(--surface-2);position:relative;overflow:hidden}.tile-video,.stage-video{object-fit:cover;background:#000;width:100%;height:100%;display:block}.mirrored{transform:scaleX(-1)}.tile-avatar{background:var(--surface-2);place-items:center;display:none;position:absolute;inset:0}.video-off .tile-avatar{display:grid}.video-off>video{visibility:hidden}.avatar{color:#fff;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#5b7cfa,#8f5bfa);border-radius:50%;place-items:center;width:56px;height:56px;font-size:1.25rem;font-weight:600;display:grid}.avatar-lg{width:96px;height:96px;font-size:2rem}.avatar-xl{width:128px;height:128px;font-size:2.75rem}.name-tag{background:#0000008c;border-radius:8px;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:4px 10px;font-size:.875rem;display:inline-flex;position:absolute;bottom:12px;left:12px}.name-tag-text:empty{display:none}.name-tag:not(:has(.name-tag-text:not(:empty))):not(:has(.badge-muted:not([hidden]))){display:none}.name-tag-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.badge-muted{background:var(--danger);border-radius:50%;place-items:center;width:22px;height:22px;display:inline-grid}.badge-muted .icon{width:14px;height:14px}.lobby-body{flex:1;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:center;gap:48px;width:100%;max-width:1200px;margin:0 auto;padding:0 28px 48px;display:grid}.lobby-tile{aspect-ratio:16/9;box-shadow:var(--shadow)}.tile-status{background:#0009;border-radius:999px;padding:6px 14px;font-size:.875rem;position:absolute;top:16px;left:50%;transform:translate(-50%)}.lobby-tile-controls{gap:16px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.lobby-tile-controls .round-btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#282c34bf;border:1px solid #ffffff26;width:56px;height:56px}.lobby-tile-controls .round-btn.is-off{background:var(--danger);border-color:#0000}.meter{background:#fff3;border-radius:999px;width:80px;height:6px;position:absolute;bottom:30px;left:18px;overflow:hidden}.meter-fill{background:var(--ok);transform-origin:0;height:100%;transition:transform 60ms linear;transform:scaleX(0)}.lobby-panel{flex-direction:column;gap:16px;display:flex}.lobby-panel h1{font-size:2rem}.room-chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;justify-content:space-between;align-items:center;gap:12px;padding:6px 6px 6px 16px;display:flex}.field{color:var(--text-dim);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.lobby-warning{border-radius:var(--radius-sm);color:#fdd663;background:#fbbc041f;margin:0;padding:10px 14px;font-size:.9rem;line-height:1.4}.lobby-actions{gap:12px;margin-top:8px;display:flex}.call{background:#0b0c0f;flex-direction:column;height:100%;display:flex}.call-main{flex:1;gap:16px;min-height:0;padding:16px 16px 0;display:flex;position:relative}.stage{border-radius:var(--radius);background:var(--surface);flex:1;min-width:0;position:relative;overflow:hidden}.call[data-layout=grid] .stage,.call[data-layout=spotlight] .stage{background:0 0}.grid{grid-template-columns:repeat(var(--cols,1), minmax(0, 1fr));grid-template-rows:repeat(var(--rows,1), minmax(0, 1fr));gap:12px;height:100%;display:grid}.grid .tile{min-height:0;container-type:size}.grid .avatar-lg{width:clamp(36px,38cqh,128px);height:clamp(36px,38cqh,128px);font-size:clamp(.9rem,14cqh,2.75rem)}.tile:after{content:"";border-radius:inherit;border:3px solid var(--accent-hover);opacity:0;pointer-events:none;transition:opacity .15s;position:absolute;inset:0}.tile.speaking:after{opacity:1}.tile.presenting .tile-video,.call[data-layout=pair] .remote-tile .tile-video{object-fit:contain}.remote-tile[data-connection=connecting] .tile-video,.remote-tile[data-connection=reconnecting] .tile-video{opacity:.5}.tile-health{color:var(--text-dim);background:#0009;border-radius:999px;padding:4px 10px;font-size:.8rem;position:absolute;top:12px;left:12px}.call[data-layout=solo] .self-tile,.call[data-layout=pair] .self-tile{aspect-ratio:16/9;width:clamp(160px,22vw,280px);box-shadow:var(--shadow);z-index:2;border:1px solid #ffffff14;position:absolute;bottom:16px;right:16px}.call[data-layout=solo] .grid,.call[data-layout=pair] .grid{gap:0}.call[data-layout=pair] .remote-tile{background:var(--surface);border-radius:0}.call[data-layout=spotlight] .grid{grid-template-columns:minmax(0,1fr) clamp(160px,18vw,260px)}.call[data-layout=spotlight] .tile{grid-column:2}.call[data-layout=spotlight] .tile.spotlight{grid-area:1/1/-1}.people-count{background:var(--surface-2);color:var(--text-dim);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:.9rem;display:inline-flex}.people-count .icon{width:18px;height:18px}.stage-overlay{text-align:center;background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.stage-overlay h2{font-size:1.5rem}.overlay-body{color:var(--text-dim);width:100%;max-width:520px}.call[data-status=connecting] .stage-overlay h2:after,.call[data-status=reconnecting] .stage-overlay h2:after,.call[data-status=joining] .stage-overlay h2:after{content:"";border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;margin:18px auto 0;animation:.9s linear infinite spin;display:block}.call[data-status=reconnecting] .stage-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a1d23cc}@keyframes spin{to{transform:rotate(360deg)}}.share-link{gap:8px;margin-top:8px;display:flex}.share-link .input{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem}.chat-panel{border-radius:var(--radius);background:var(--surface);flex-direction:column;flex:none;width:360px;display:flex;overflow:hidden}.chat-header{justify-content:space-between;align-items:center;padding:12px 8px 12px 20px;display:flex}.tabs{background:var(--surface-2);border-radius:999px;gap:4px;padding:4px;display:flex}.tab{height:32px;color:var(--text-dim);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 16px;font-size:.9rem;font-weight:500}.tab[aria-selected=true]{background:var(--surface-3);color:var(--text)}.panel-scroll{flex:1;padding:0 20px;overflow-y:auto}.panel-note{border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-dim);margin:8px 0;padding:12px 14px;font-size:.85rem;line-height:1.5}.chat-list{margin:0;padding:0 0 12px;list-style:none}.chat-message{margin-top:14px}.chat-meta{align-items:baseline;gap:8px;font-size:.8rem;display:flex}.chat-meta time{color:var(--text-dim)}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 0;line-height:1.45}.from-me .chat-meta strong{color:var(--accent-hover)}.chat-form{background:var(--surface-2);border-radius:999px;align-items:center;gap:4px;margin:12px;padding-left:4px;display:flex}.chat-input{background:0 0;border:0}.chat-input:focus{box-shadow:none}.chat-form .icon-btn{color:var(--accent-hover)}.transcript-list{margin:0;padding:0 0 12px;list-style:none}.transcript-list li{margin-top:14px}.transcript-list p{overflow-wrap:anywhere;margin:4px 0 0;line-height:1.45}.transcript-list time{color:var(--text-dim)}.transcript-event{color:var(--text-dim);gap:8px;font-size:.8rem;display:flex}.tag{background:var(--surface-3);color:var(--text-dim);border-radius:4px;padding:1px 6px;font-size:.7rem}.transcript-actions{border-top:1px solid var(--border);justify-content:space-between;gap:8px;padding:12px;display:flex}.captions{z-index:3;pointer-events:none;flex-direction:column;gap:6px;width:min(760px,100% - 40px);display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.call[data-layout=solo] .captions,.call[data-layout=pair] .captions{width:min(760px,100% - 340px);left:calc(50% - 150px)}.caption-line{background:#000000b8;border-radius:10px;margin:0;padding:8px 14px;font-size:1.05rem;line-height:1.4;animation:.15s ease-out toast-in}.caption-line strong{color:#c2d3ff;margin-right:8px;font-weight:600}.live-pill{z-index:3;background:#0009;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:.8rem;display:inline-flex;position:absolute;top:14px;right:14px}.live-dot{background:var(--danger);border-radius:50%;width:8px;height:8px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.side-btn.is-active{color:#0b1a45;background:#c2d3ff}.call-bar{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px 24px;display:grid}.call-meta{color:var(--text-dim);align-items:center;gap:10px;min-width:0;font-size:.925rem;display:flex}.call-meta .divider{background:var(--border);width:1px;height:16px}.status-dot{background:var(--warn);border-radius:50%;width:8px;height:8px}.call[data-status=connected] .status-dot{background:var(--ok)}.call[data-status=waiting] .status-dot{background:var(--text-dim)}.call-controls{gap:12px;display:flex}.call-side{justify-content:flex-end;align-items:center;gap:8px;display:flex}.unread{background:var(--accent);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 5px;font-size:.72rem;font-weight:600;line-height:20px;position:absolute;top:-2px;right:-2px}.message-card{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;max-width:640px;margin:0 auto;padding:0 28px 80px;display:flex}.message-card h1{font-size:2rem}.message-body{color:var(--text-dim);line-height:1.6}.message-body pre{text-align:left;color:var(--text)}.message-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;display:flex}#toasts{z-index:50;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:96px;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius-sm);color:#202124;max-width:min(520px,90vw);box-shadow:var(--shadow);background:#e8eaed;padding:12px 18px;font-size:.9rem;transition:opacity .3s,transform .3s;animation:.2s ease-out toast-in}.toast-error{background:var(--danger);color:#fff}.toast-leaving{opacity:0;transform:translateY(8px)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}@media (width<=1000px){.home{grid-template-columns:minmax(0,1fr);align-items:start;gap:32px}.recent-card{min-height:0}}@media (width<=560px){.topbar{padding:16px 20px}.topbar-clock{font-size:.85rem}.home{padding:8px 20px 32px}.landing-actions>.btn{width:100%}.join-form{width:100%;min-width:0;max-width:none}.features{grid-template-columns:1fr;gap:12px;padding:8px 20px 40px}.feature{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:16px;display:grid}.feature-icon{grid-row:span 2;margin:0}}@media (width<=860px){.lobby-body{grid-template-columns:1fr;align-content:start;gap:24px}.chat-panel{z-index:5;width:auto;position:absolute;inset:16px 16px 0}.call-main{padding:8px 8px 0}.call-bar{padding:12px 8px calc(12px + env(safe-area-inset-bottom));justify-content:center;display:flex}.call-meta,.call-side{display:none}.call-controls{gap:8px}.round-btn{width:44px;height:44px}.round-btn.wide{width:56px}.call[data-layout=solo] .self-tile,.call[data-layout=pair] .self-tile{aspect-ratio:3/4;width:110px;bottom:12px;right:12px}.grid{gap:8px}.call .captions,.call[data-layout=solo] .captions,.call[data-layout=pair] .captions{width:auto;left:12px;right:12px;transform:none}.call[data-layout=solo] .captions,.call[data-layout=pair] .captions{bottom:170px}.caption-line{font-size:.95rem}}