*{box-sizing:border-box}:root{--c-text: #2c2c2a;--c-text-sec: #6b6b68;--c-text-ter: #9a9a95;--c-bg: #fafaf7;--c-bg-card: #ffffff;--c-bg-sec: #f1efe8;--c-border: #e5e3dc;--c-border-2: #c9c7bf;--c-green-text: #173404;--c-green-dark: #27500a;--c-green: #3b6d11;--c-green-mid: #97c459;--c-green-pale: #eaf3de;--c-danger: #a32d2d;--c-danger-pale: #fcebeb;--c-warning: #854f0b;--c-warning-pale: #faeeda;--r-sm: 6px;--r-md: 8px;--r-lg: 12px;--shadow-card: 0 1px 3px rgb(0 0 0 / 2%);--shadow-card-hover: 0 4px 16px rgb(59 109 17 / 8%);--shadow-focus: 0 0 0 3px rgb(59 109 17 / 10%);color:var(--c-text);background:var(--c-bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.5}body{margin:0;min-height:100vh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{box-shadow:var(--shadow-focus);outline:none}.site-nav{background:var(--c-bg-card);border-bottom:.5px solid var(--c-border);position:sticky;top:0;z-index:10}.site-nav-row1,.site-nav-row2{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:980px;padding:10px 16px}.site-nav-row1{border-bottom:.5px solid var(--c-border)}.site-nav-row2 p{color:var(--c-text-sec);font-size:13px;margin:0}.site-brand{align-items:center;color:var(--c-green);display:inline-flex;font-size:18px;font-weight:500;gap:8px;text-decoration:none}.brand-dot{background:var(--c-green-mid);border-radius:50%;height:10px;width:10px}.site-user-block{align-items:center;display:inline-flex;gap:8px}.site-user-avatar{align-items:center;background:var(--c-green-pale);border-radius:50%;color:var(--c-green-dark);display:inline-flex;font-size:11px;font-weight:500;height:30px;justify-content:center;width:30px}.site-user-name{color:var(--c-text-sec);font-size:13px}.shell{display:grid;gap:16px;margin:0 auto;max-width:980px;padding:28px 16px 36px}.intro-card,.room-card{background:var(--c-bg-card);border:.5px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px 24px}.intro-card{align-items:flex-start;display:flex;gap:14px}.intro-icon{align-items:center;background:var(--c-green-pale);border-radius:50%;color:var(--c-green);display:inline-flex;flex:0 0 auto;height:44px;justify-content:center;width:44px}.kicker{color:var(--c-text-ter);font-size:11px;font-weight:500;letter-spacing:.05em;margin:0 0 4px;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{color:var(--c-green-text);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;text-wrap:balance}h2{color:var(--c-text);font-size:18px;font-weight:500;margin-bottom:0}h3{font-size:14px;font-weight:500;margin-bottom:8px}.intro-card p:last-child{color:var(--c-text-sec);margin:0;max-width:68ch}.room-card{display:grid;gap:14px}.room-header{align-items:flex-start;display:flex;gap:12px;justify-content:space-between}.join-form{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}label{color:var(--c-text);display:grid;font-size:13px;font-weight:500;gap:6px}input,select{background:var(--c-bg-card);border:.5px solid var(--c-border-2);border-radius:var(--r-md);color:var(--c-text);padding:8px 12px}input:disabled,select:disabled{background:var(--c-bg-sec);color:var(--c-text-sec)}.precall-panel{background:var(--c-bg-sec);border-radius:var(--r-lg);display:grid;gap:16px;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);overflow:hidden;padding:14px}.precall-panel>*{min-width:0}.precall-preview{align-items:center;aspect-ratio:16 / 10;background:#2c2c2a;border-radius:var(--r-lg);color:#ffffffc7;display:flex;justify-content:center;min-height:220px;overflow:hidden;position:relative;width:100%}.precall-preview video{height:100%;object-fit:cover;width:100%}.precall-placeholder{align-items:center;display:flex;flex-direction:column;font-size:13px;gap:8px;top:0;right:0;bottom:0;left:0;justify-content:center;padding:18px;position:absolute;text-align:center}.precall-info{align-self:center;display:grid;gap:10px}.precall-info p{color:var(--c-text-sec);margin-bottom:0}.precall-info strong{color:var(--c-text);font-weight:500}.device-checks{display:grid;gap:6px;list-style:none;margin:0;padding:0}.device-checks li{align-items:center;background:var(--c-bg-card);border:.5px solid var(--c-border);border-radius:var(--r-md);color:var(--c-text-sec);display:inline-flex;font-size:13px;gap:7px;padding:7px 10px;width:fit-content}.device-checks li[data-ready=true]{background:var(--c-green-pale);border-color:transparent;color:var(--c-green-dark)}.actions{display:flex;flex-wrap:wrap;gap:8px}.in-call-actions{padding-top:12px}.call-wrap{display:grid;gap:10px}.call-bar{align-items:center;background:var(--c-bg-sec);border-radius:var(--r-md);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:10px 14px}.call-info{align-items:center;color:var(--c-text-sec);display:inline-flex;font-size:13px;gap:8px}.session-with strong{color:var(--c-text);font-weight:500}.live-dot{background:#1d9e75;border-radius:50%;height:8px;width:8px}.timer{align-items:center;color:var(--c-text);display:inline-flex;font-size:13px;font-variant-numeric:tabular-nums;font-weight:500;gap:5px}.timer-total{color:var(--c-text-ter);font-weight:400}.video-frame{background:#2c2c2a;border-radius:var(--r-lg);height:clamp(320px,58vh,560px);overflow:hidden;position:relative}.video-content,.remote-track{position:absolute;top:0;right:0;bottom:0;left:0}.remote-track video{height:100%;object-fit:cover;width:100%}.remote-placeholder{align-items:center;color:#fff;display:flex;flex-direction:column;gap:9px;top:0;right:0;bottom:104px;left:0;justify-content:center;min-height:0;padding:28px 24px 18px;position:absolute;text-align:center}.video-avatar{align-items:center;background:#9fe1cb;border-radius:50%;color:#04342c;display:inline-flex;height:112px;justify-content:center;width:112px}.video-name{color:#fff;font-size:17px;font-weight:500;margin:0}.video-status,.video-hint{color:#ffffffb8;font-size:12px;line-height:1.45;margin:0;max-width:390px;text-wrap:pretty}.self-view{align-items:center;background:#444441;border:.5px solid rgb(255 255 255 / 12%);border-radius:var(--r-md);display:flex;flex-direction:column;gap:6px;padding:8px;position:absolute;right:16px;top:16px;width:132px;z-index:2}.self-video{align-items:center;aspect-ratio:16 / 10;background:var(--c-green-pale);border-radius:var(--r-sm);color:var(--c-green-dark);display:flex;font-size:12px;justify-content:center;overflow:hidden;width:100%}.self-video video{height:100%;object-fit:cover;width:100%}.self-label{color:#ffffffd9;font-size:11px}.controls{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1818167a;border:.5px solid rgb(255 255 255 / 10%);border-radius:999px;bottom:18px;display:flex;gap:10px;left:50%;padding:8px 10px;position:absolute;transform:translate(-50%);z-index:3}.ctrl-btn{align-items:center;background:#ffffff26;border:0;border-radius:50%;color:#fff;cursor:pointer;display:inline-flex;height:48px;justify-content:center;padding:0;width:48px}.ctrl-btn:hover:not(:disabled){background:#ffffff40}.ctrl-btn.muted{background:#e24b4a47;color:#f0997b}.ctrl-btn.end{background:#e24b4a;height:56px;width:56px}.ctrl-btn.end:hover:not(:disabled){background:var(--c-danger)}.ctrl-btn.end svg{transform:rotate(135deg)}.support-details{border-top:.5px solid var(--c-border);color:var(--c-text-sec);font-size:13px;padding-top:10px}.support-details summary{cursor:pointer;width:fit-content}.support-details[open]{display:grid;gap:12px}.support-note{margin:0}.btn{align-items:center;border-radius:var(--r-md);cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:6px;justify-content:center;min-height:36px;padding:8px 14px}.btn-primary{background:var(--c-green);border:0;color:#fff}.btn-primary:hover:not(:disabled){background:var(--c-green-dark)}.btn-outline{background:transparent;border:.5px solid var(--c-border-2);color:var(--c-text)}.btn-outline:hover:not(:disabled){background:var(--c-bg-sec)}.btn-danger{background:var(--c-danger);border:0;color:#fff}.btn-danger:hover:not(:disabled){background:#791f1f}button:disabled{cursor:not-allowed;opacity:.48}.status{border-radius:var(--r-md);background:var(--c-bg-sec);color:var(--c-text-sec);font-size:11px;font-weight:500;padding:3px 9px;text-transform:uppercase;white-space:nowrap}.status[data-state=connected]{background:var(--c-green-pale);color:var(--c-green-dark)}.status[data-state=error],.status[data-state=reconnecting]{background:var(--c-danger-pale);color:var(--c-danger)}.error,.warning{border-radius:var(--r-md);font-size:13px;margin:0;padding:10px 12px}.error{background:var(--c-danger-pale);color:var(--c-danger)}.warning{background:var(--c-warning-pale);color:var(--c-warning)}.facts{border-top:.5px solid var(--c-border);display:flex;flex-wrap:wrap;gap:8px;margin:0;padding-top:14px}.facts div{background:var(--c-bg-sec);border-radius:var(--r-md);min-width:168px;padding:8px 10px}.facts dt{color:var(--c-text-ter);font-size:11px}.facts dd{color:var(--c-text);font-size:13px;margin:2px 0 0;overflow-wrap:anywhere}.server-state{background:var(--c-bg-sec);border-radius:var(--r-md);padding:12px 14px}.server-state ul{color:var(--c-text-sec);margin:0;padding-left:18px}.audio-slot{display:none}.site-footer{color:var(--c-text-ter);display:grid;font-size:12px;gap:6px;justify-items:center;margin:8px auto 28px;max-width:980px;padding:0 16px;text-align:center}.site-footer p{margin-bottom:0}.site-footer-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.site-footer a,.site-footer span{color:var(--c-text-ter)}@media(max-width:760px){.site-nav-row2{align-items:flex-start;flex-direction:column}.intro-card{padding:16px}h1{font-size:25px}.join-form,.precall-panel,.video-grid{grid-template-columns:1fr}.precall-preview,.video-frame{min-height:260px}.precall-preview{min-height:0}.video-frame{height:58vh}.self-view{right:10px;top:10px;width:104px}.remote-placeholder{gap:7px;top:0;right:0;bottom:92px;left:0;padding:22px 16px 14px}.video-avatar{height:86px;width:86px}.video-name{font-size:16px}.video-hint{max-width:310px}.controls{bottom:12px;gap:6px;padding:6px 8px}.ctrl-btn{height:42px;width:42px}.ctrl-btn.end{height:48px;width:48px}.room-card{padding:16px}}
