:root,:root[data-theme=light]{--bg: #fbfbfa;--surface: #ffffff;--surface-2: #f4f4f3;--border: rgba(0, 0, 0, .1);--border-strong: rgba(0, 0, 0, .16);--text: #1d1d1f;--text-muted: #6e6e73;--text-faint: #9a9a9f;--action: #1d1d1f;--on-action: #ffffff;--action-hover: #38383b;--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -8px rgba(0, 0, 0, .12)}:root[data-theme=dark]{--bg: #0b0b0c;--surface: #161618;--surface-2: #202023;--border: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .22);--text: #f5f5f7;--text-muted: #a1a1a6;--text-faint: #79797f;--action: #ffffff;--on-action: #0b0b0c;--action-hover: #e6e6e8;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -8px rgba(0, 0, 0, .55)}:root{--stage: #0a0a0b;--on-stage: #f5f5f7;--on-stage-muted: rgba(255, 255, 255, .62);--frost: rgba(255, 255, 255, .14);--frost-hover: rgba(255, 255, 255, .22);--ok: #32d74b;--warn: #ff9f0a;--danger: #ff453a;--radius: 14px;--radius-lg: 22px;--radius-sm: 10px;--ease: cubic-bezier(.4, 0, .2, 1);--font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;color-scheme:light dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{display:flex;flex-direction:column;height:100vh;height:100dvh}.is-hidden{display:none!important}.screen{flex:1;min-height:0;overflow-y:auto}h1,h2{font-weight:600;letter-spacing:-.02em;margin:0}.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,4vw,40px)}#app[data-screen=call] .topbar{display:none}.wordmark{font-weight:600;font-size:16px;letter-spacing:-.01em}.wordmark-dot{color:var(--text-faint)}.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}.icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}:root[data-theme=light] .icon-sun,:root[data-theme=dark] .icon-moon{display:none}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:980px;font-family:inherit;font-size:15px;font-weight:500;padding:11px 22px;cursor:pointer;transition:transform .1s var(--ease),background .18s var(--ease),border-color .18s var(--ease),opacity .18s var(--ease)}.btn:active{transform:scale(.975)}.btn-primary{background:var(--action);color:var(--on-action)}.btn-primary:hover{background:var(--action-hover)}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}.btn-secondary:hover{background:var(--surface-2)}.btn-lg{font-size:17px;padding:14px 30px}.landing{display:grid;place-items:center;padding:24px;text-align:center}.landing-inner{max-width:580px;animation:rise .6s var(--ease) both}.hero-title{font-size:clamp(40px,7vw,76px);line-height:1.03;letter-spacing:-.035em;font-weight:600}.hero-sub{margin:22px auto 34px;max-width:30em;font-size:clamp(16px,1.6vw,19px);color:var(--text-muted)}.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;list-style:none;margin:44px 0 0;padding:0}.trust-row li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-muted)}.trust-row .icon{width:18px;height:18px;color:var(--text-faint)}.prejoin{display:grid;place-items:center;padding:clamp(16px,4vw,40px)}.prejoin-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,56px);width:100%;max-width:1000px;animation:rise .6s var(--ease) both}.preview{position:relative;aspect-ratio:16 / 10;border-radius:var(--radius-lg);overflow:hidden;background:var(--stage);box-shadow:var(--shadow)}.preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.preview-off{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--on-stage-muted);background:var(--stage);font-size:14px}.preview-off .icon{width:34px;height:34px}.preview-controls{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:12px}.prejoin-title{font-size:clamp(26px,3vw,34px)}.prejoin-sub{margin:12px 0 26px;color:var(--text-muted);font-size:15px}.prejoin-side .btn{width:100%}.enc-cue{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;font-size:13px;color:var(--text-muted)}.enc-cue .icon{width:16px;height:16px;color:var(--ok)}.round-btn{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:none;background:var(--frost);color:var(--on-stage);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .18s var(--ease),transform .1s var(--ease)}.round-btn:hover{background:var(--frost-hover)}.round-btn:active{transform:scale(.93)}.round-btn .icon{width:22px;height:22px}.round-btn .icon-off,.round-btn[aria-pressed=true] .icon-on{display:none}.round-btn[aria-pressed=true] .icon-off{display:block}#toggleMic[aria-pressed=true],#toggleCam[aria-pressed=true],#preMic[aria-pressed=true],#preCam[aria-pressed=true],#shareScreen[aria-pressed=true]{background:#fff;color:#1d1d1f}.round-danger{background:var(--danger);color:#fff;width:58px}.round-danger:hover{background:#ff6257}.round-danger .icon{fill:currentColor;stroke:none;width:24px;height:24px}.call{overflow:hidden}.stage{position:relative;height:100%;background:var(--stage);overflow:hidden}.remote{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;z-index:1}.remote-idle{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:0}.stage.has-remote .remote-idle{display:none}.self{position:absolute;right:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);z-index:3;transition:opacity .3s var(--ease),transform .3s var(--ease)}.local{display:block;width:clamp(116px,19vw,220px);aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius);background:#161618;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 32px -10px #000000b3;transform:scaleX(-1)}.status{position:absolute;top:clamp(12px,2vw,20px);left:clamp(12px,2vw,20px);z-index:4;display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:980px;background:var(--frost);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--on-stage);font-size:13px;font-weight:500;transition:opacity .4s var(--ease)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}.status[data-state=connected] .status-dot{background:var(--ok)}.status[data-state=disconnected] .status-dot,.status[data-state=failed] .status-dot,.status[data-state=closed] .status-dot{background:var(--danger)}.status-lock{width:15px;height:15px;color:var(--on-stage-muted);display:none}.status[data-state=connected] .status-lock{display:block}.controls{position:absolute;left:50%;bottom:clamp(16px,3vw,28px);transform:translate(-50%);z-index:5;display:flex;align-items:center;gap:12px;padding:10px;border-radius:980px;background:#1414168c;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);transition:opacity .4s var(--ease),transform .4s var(--ease)}.round-btn.is-hidden{display:none}.stage.idle .controls{opacity:0;transform:translate(-50%) translateY(8px);pointer-events:none}.stage.idle .status{opacity:0}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:grid;place-items:center;padding:24px;background:#0a0a0bd1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--on-stage)}.overlay-card{max-width:460px;width:100%;text-align:center}.overlay-card h2{font-size:24px;margin:20px 0 8px}.overlay-card p{color:var(--on-stage-muted);margin:0 0 22px}.link-row{display:flex;gap:8px}.link-input{flex:1;min-width:0;background:#ffffff14;border:1px solid rgba(255,255,255,.16);color:var(--on-stage);border-radius:var(--radius-sm);padding:12px 14px;font-family:inherit;font-size:14px}.link-input:focus{outline:2px solid var(--on-stage);outline-offset:1px}.link-row .btn-secondary{background:#ffffff1f;color:var(--on-stage);border-color:#fff3}.link-row .btn-secondary:hover{background:#fff3}.spinner{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--on-stage);animation:spin .9s linear infinite;margin:0 auto}.spinner-lg{width:42px;height:42px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%);z-index:20;max-width:min(90vw,420px);text-align:center;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:12px 18px;border-radius:var(--radius);font-size:14px;box-shadow:var(--shadow);animation:rise .25s var(--ease) both}#app[data-screen=call]~.toast,.call:not(.is-hidden)~.toast{bottom:96px}:focus-visible{outline:2px solid var(--action);outline-offset:2px}.round-btn:focus-visible,.link-input:focus-visible{outline-color:var(--on-stage)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.prejoin-inner{grid-template-columns:1fr;max-width:460px}.prejoin-side{text-align:center}.enc-cue{justify-content:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
