:root{--bg:#000;--raised:#1c1c1e;--label:#fff;--secondary:#ebebf599;--tertiary:#ebebf54d;--fill:#7676803d;--blue:#0a84ff;--green:#30d158;--yellow:#ffd60a;--red:#ff453a;--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;--display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;--rounded:ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, monospace;--spring:cubic-bezier(.32, 1.25, .5, 1);--control:54px;--pad-card:18px;--radius-card:calc(var(--control) / 2 + var(--pad-card));--safe-top:max(env(safe-area-inset-top), calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));--safe-bottom:max(env(safe-area-inset-bottom), calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)));--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--label);overscroll-behavior:none;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}svg{flex:none;width:22px;height:22px}.glass{-webkit-backdrop-filter:blur(30px)saturate(180%);backdrop-filter:blur(30px)saturate(180%);background:#2c2c2e9e;box-shadow:inset 0 0 0 .5px #ffffff24}.surface{background:#1c1c1e;box-shadow:inset 0 0 0 .5px #ffffff1a}.screen{isolation:isolate;height:100dvh;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));flex-direction:column;display:flex;position:relative;overflow:hidden auto}.mesh{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.mesh i{opacity:.5;border-radius:50%;width:110vmin;height:110vmin;animation:24s ease-in-out infinite alternate drift;position:absolute}.mesh i:first-child{background:radial-gradient(circle,#8d6bffd9,#0000 62%);top:-38vmin;left:calc(50% - 75vmin)}.mesh i:nth-child(2){background:radial-gradient(circle,#ff7a8a99,#0000 62%);animation-duration:30s;top:-30vmin;right:calc(50% - 80vmin)}.mesh i:nth-child(3){background:radial-gradient(circle,#4f9dff8c,#0000 62%);animation-duration:36s;bottom:-70vmin;left:calc(50% - 55vmin)}.btn{height:var(--control);letter-spacing:-.02em;transition:transform .2s var(--spring), opacity .2s ease;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 26px;font-size:17px;font-weight:600;display:inline-flex}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled:not(.loading){opacity:.4}.btn svg{width:19px;height:19px}.btn.primary{background:var(--label);color:#000}.btn.secondary{background:var(--fill);color:var(--label)}.btn.plain{height:44px;color:var(--blue);padding:0 12px;font-weight:500}.spinner{opacity:.8;border:2px solid;border-right-color:#0000;border-radius:50%;flex:none;width:17px;height:17px;animation:.8s linear infinite spin}.home{text-align:center;justify-content:center;align-items:center;gap:32px}.home>:not(.mesh,.chip){width:min(100%,380px)}.orbs{justify-content:center;align-items:center;height:104px;display:flex}.orb{--size:68px;width:var(--size);height:var(--size);background:linear-gradient(150deg, var(--from), var(--to));box-shadow:0 0 0 3px var(--bg);border-radius:50%;margin:0 -7px;animation:5.5s ease-in-out infinite bob}.orb:first-child{--from:#a28bff;--to:#5b6cff}.orb:nth-child(2){--size:86px;--from:#ffb36b;--to:#ff5f7e;z-index:1;animation-delay:-1.8s}.orb:nth-child(3){--from:#6ad8ff;--to:#2f8bff;animation-delay:-3.6s}.brand{font-family:var(--display);letter-spacing:-.03em;margin:20px 0 8px;font-size:clamp(38px,11vw,48px);font-weight:700;line-height:1}.lead{max-width:290px;color:var(--secondary);letter-spacing:-.02em;margin:0 auto;font-size:17px;line-height:1.35}.actions{gap:12px;display:grid}.invite-card{padding:22px var(--pad-card) var(--pad-card);border-radius:var(--radius-card);gap:6px;display:grid}.alt-actions{justify-content:center;gap:20px;margin-top:-6px;display:flex}.eyebrow{color:var(--secondary);letter-spacing:-.01em;font-size:13px;font-weight:500}.invite-card .code{font:600 30px/1.2 var(--mono);letter-spacing:.18em;margin-bottom:10px}.join-form{animation:rise .35s var(--spring) both;gap:12px;display:grid}.join-form[hidden]{display:none}.otp{grid-template-columns:repeat(6,1fr);gap:8px;display:grid;position:relative}.otp input{z-index:1;opacity:0;width:100%;font-size:16px;position:absolute;inset:0}.cell{height:var(--control);background:var(--fill);font:600 24px/1 var(--mono);border-radius:999px;place-items:center;transition:box-shadow .15s;display:grid}.cell.active{box-shadow:inset 0 0 0 2px var(--blue)}.cell.active:empty:after{content:"";background:var(--blue);border-radius:1px;width:2px;height:26px;animation:1s step-end infinite blink}.join-status{color:var(--secondary);justify-content:center;align-items:center;gap:8px;margin:2px 0 0;font-size:15px;display:flex}.otp.shake{animation:.35s shake}.name-field{height:var(--control);background:var(--fill);border-radius:999px;align-items:center;gap:12px;padding:0 22px;display:flex}.name-field input{min-width:0;height:100%;color:var(--label);font:inherit;background:0 0;border:0;outline:none;flex:1;font-size:17px}.error{min-height:1.35em;color:var(--red);margin:-16px 0 0;font-size:15px;line-height:1.35}.trust{color:var(--tertiary);justify-content:center;align-items:center;gap:6px;margin:0;font-size:13px;display:inline-flex}.trust svg{width:13px;height:13px}.chip{width:auto;color:var(--yellow);background:#ffd60a24;border-radius:999px;margin:-20px auto 0;padding:3px 10px;font-size:12px;font-weight:600}.room{gap:12px;overflow:hidden}.room-bar{align-items:center;gap:8px;display:flex}.room-code{border-radius:999px;align-items:center;gap:8px;min-width:0;height:40px;padding:0 14px 0 16px;display:flex}.room-code b{font:600 15px var(--mono);letter-spacing:.14em}.room-code svg{width:15px;height:15px;color:var(--secondary)}.presence{font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:center;gap:8px;height:40px;margin-left:auto;padding:0 14px;font-size:15px;font-weight:600;display:flex}.presence .spinner{width:13px;height:13px}.presence.warn{color:var(--yellow)}.live{background:var(--green);border-radius:50%;width:8px;height:8px}.icon-btn{border-radius:50%;flex:none;place-items:center;width:40px;height:40px;display:grid}.icon-btn svg{width:17px;height:17px}.stage{flex:1;place-items:center;min-height:0;display:grid;container-type:size}.grid{--cols:1;--rows:1;--max:200px;--gap-x:26px;--gap-y:60px;--tile:min(calc((100cqw - (var(--cols) - 1) * var(--gap-x)) / var(--cols)), calc((100cqh - 50px - (var(--rows) - 1) * var(--gap-y)) / var(--rows)), var(--max));width:calc(var(--cols) * var(--tile) + (var(--cols) - 1) * var(--gap-x));place-content:center;gap:var(--gap-y) var(--gap-x);flex-wrap:wrap;max-width:100%;padding:10px 0 40px;display:flex}.grid[data-count="2"]{--cols:2;--max:150px}.grid[data-count="3"],.grid[data-count="4"]{--cols:2;--rows:2;--max:132px}.grid[data-count="5"],.grid[data-count="6"]{--cols:3;--rows:2;--max:100px;--gap-x:18px}@container (aspect-ratio>=1.4){.grid[data-count="3"]{--cols:3;--rows:1}}@container (width>=560px) and (height>=560px){.grid{--max:240px}.grid[data-count="2"]{--max:200px}.grid[data-count="3"],.grid[data-count="4"]{--max:172px}.grid[data-count="5"],.grid[data-count="6"]{--max:140px}}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.tile{--r:50%;--level:0;width:calc(var(--tile) - .5px);aspect-ratio:1;animation:pop .55s var(--spring) both, bob 6s ease-in-out calc(var(--hue) * -17ms) infinite;position:relative}.grid[data-shape=square] .tile{--r:28%}.tile.leaving{animation:.22s ease-in forwards vanish}.frame{border-radius:var(--r);background:var(--raised);transition:border-radius .35s var(--spring);position:absolute;inset:0;overflow:hidden;transform:translateZ(0)}.frame video{object-fit:cover;background:var(--raised);width:100%;height:100%;display:block}.tile.mirrored video{transform:scaleX(-1)}.avatar{font-family:var(--rounded);font-size:calc(var(--tile) * .4);color:#fff;background:linear-gradient(180deg, hsl(var(--hue) 20% 60%), hsl(var(--hue) 16% 40%));place-items:center;font-weight:600;display:none;position:absolute;inset:0}.tile.cam-off .avatar{display:grid}.speaking-ring{border-radius:var(--r);opacity:var(--level);transition:border-radius .35s var(--spring);position:absolute;inset:-5px;box-shadow:0 0 0 2.5px #fff}.connecting-ring{border-radius:var(--r);background:conic-gradient(from var(--angle), transparent 0 55%, #ffffffe6);-webkit-mask-composite:xor;opacity:0;padding:2px;transition:opacity .3s;position:absolute;inset:-6px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.tile[data-link=connecting] .connecting-ring{opacity:1;animation:1.1s linear infinite sweep}.caption{max-width:calc(100% + var(--gap-x) - 4px);white-space:nowrap;justify-items:center;gap:2px;display:grid;position:absolute;top:calc(100% + 10px);left:50%;translate:-50%}.who{letter-spacing:-.02em;align-items:center;gap:4px;max-width:100%;font-size:14px;font-weight:600;display:flex}.who .name{text-overflow:ellipsis;overflow:hidden}.who .mic-off{color:var(--red);display:none}.who .mic-off svg{stroke-width:2.4px;width:14px;height:14px}.tile.muted .mic-off{display:inline-flex}.link{color:var(--secondary);font-variant-numeric:tabular-nums;align-items:center;gap:5px;font-size:11px;font-weight:500;display:flex}.link:empty{display:none}.link:before{content:"";background:var(--tertiary);border-radius:50%;width:6px;height:6px}.tile[data-link=direct] .link:before{background:var(--green)}.tile[data-link=relay] .link:before{background:var(--yellow)}.tile[data-link=failed] .link{color:var(--red)}.tile[data-link=failed] .link:before{background:var(--red)}.room.is-alone .tile.local:before,.room.is-alone .tile.local:after{content:"";border-radius:var(--r);border:1.5px solid #ffffff59;animation:2.8s ease-out infinite ripple;position:absolute;inset:0}.room.is-alone .tile.local:after{animation-delay:1.4s}.alone{text-align:center;flex-direction:column;align-items:center;gap:16px;display:none}.room.is-alone .alone{animation:rise .45s var(--spring) both;display:flex}.alone p{max-width:280px;color:var(--secondary);letter-spacing:-.01em;margin:0;font-size:15px;line-height:1.35}.alone b{color:var(--label);font-family:var(--display);letter-spacing:-.02em;margin-bottom:4px;font-size:20px;font-weight:650;display:block}.dock{border-radius:999px;align-self:center;align-items:center;gap:10px;padding:10px;display:flex}.ctl{width:54px;height:54px;transition:background .2s ease, color .2s ease, transform .2s var(--spring), opacity .2s ease;background:#ffffff24;border-radius:50%;flex:none;place-items:center;display:grid}.ctl:active:not(:disabled){transform:scale(.9)}.ctl:disabled{opacity:.3}.ctl.off{color:#000;background:#fff}.ctl.hang-up{background:var(--red);color:#fff}.ctl.hang-up svg{width:28px;height:28px}@media (width<=360px){.ctl{width:48px;height:48px}.dock{gap:8px}}.unlock{top:calc(68px + var(--safe-top));z-index:5;width:max-content;height:40px;animation:rise .35s var(--spring) both;border-radius:999px;align-items:center;gap:8px;margin-inline:auto;padding:0 16px;font-size:15px;font-weight:600;display:flex;position:fixed;inset-inline:0}.unlock[hidden]{display:none}.unlock svg{width:18px;height:18px}.toast{left:50%;bottom:calc(104px + var(--safe-bottom));z-index:20;opacity:0;pointer-events:none;max-width:calc(100% - 32px);transition:opacity .2s ease, translate .3s var(--spring);border-radius:999px;padding:10px 16px;font-size:15px;font-weight:500;position:fixed;translate:-50% 12px}.toast.show{opacity:1;translate:-50%}.sheet-backdrop{z-index:10;padding:0 8px calc(8px + var(--safe-bottom));background:#00000080;justify-content:center;align-items:flex-end;animation:.2s both fade;display:flex;position:fixed;inset:0}.sheet-backdrop[hidden]{display:none}.sheet{width:min(100%,420px);padding:26px var(--pad-card) var(--pad-card);border-radius:var(--radius-card);text-align:center;animation:slide-up .4s var(--spring) both;background:#1c1c1e;gap:12px;display:grid;box-shadow:inset 0 0 0 .5px #ffffff1a,0 -10px 40px #00000080}.sheet h2{font:650 20px/1.2 var(--display);letter-spacing:-.02em;margin:0}.sheet .code{font:600 34px/1.1 var(--mono);letter-spacing:.2em;margin:4px 0 2px}.sheet .link-field{background:var(--fill);width:100%;height:44px;color:var(--secondary);font:14px var(--font);text-align:center;text-overflow:ellipsis;border:0;border-radius:999px;outline:none;margin-bottom:6px;padding:0 18px}.sheet .btn{width:100%}.sheet .btn.plain{font-weight:600}@keyframes spin{to{rotate:1turn}}@keyframes sweep{to{--angle:360deg}}@keyframes drift{to{transform:translate(10vmax,8vmax)scale(1.1)}}@keyframes bob{50%{translate:0 -8px}}@keyframes ripple{0%{opacity:.8;scale:1}to{opacity:0;scale:1.4}}@keyframes pop{0%{opacity:0;scale:.7}}@keyframes vanish{to{opacity:0;scale:.8}}@keyframes rise{0%{opacity:0;translate:0 10px}}@keyframes fade{0%{opacity:0}}@keyframes slide-up{0%{translate:0 100%}}@keyframes blink{50%{opacity:0}}@keyframes shake{25%{translate:-6px}75%{translate:6px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
