:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#141414;--bg-elevated:#1f1f1f;--bg-card:#292929;--border:#2e2e2e;--text:#f2f2f2;--text-strong:#fafafa;--text-muted:#858585;--accent:#f5a524;--accent-hover:#f6af3c;--accent-foreground:#0d0d0d;--ring:#f5a524;--success:#23a559;--danger:#dc2828;--radius:12px;--radius-sm:8px}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;cursor:default;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Roboto,sans-serif;font-size:16px;line-height:1.5;overflow:hidden}input,textarea{-webkit-user-select:text;user-select:text}img{-webkit-user-drag:none}*{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{width:0;height:0;display:none}.app{flex-direction:column;height:100dvh;display:flex}.app__main{min-height:0;padding:24px 16px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain;flex:1;display:flex;overflow-y:auto}.app__main>*{margin:auto}.header{border-bottom:1px solid var(--border);background:var(--bg-elevated);justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.header__brand{align-items:center;gap:10px;display:flex}.header__icon{color:var(--accent);display:inline-flex}.header__title{color:var(--text-strong);letter-spacing:-.01em;font-size:1.05rem;font-weight:700}.header__title-accent{color:var(--accent)}.status-badge{border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:5px 11px;font-size:.78rem;font-weight:600;display:inline-flex}.status-badge__dot{background:var(--text-muted);border-radius:50%;width:8px;height:8px}.status-badge--connecting .status-badge__dot{background:var(--accent);animation:1.2s ease-in-out infinite pulse}.status-badge--ready .status-badge__dot,.status-badge--authenticated .status-badge__dot{background:var(--success)}.status-badge--error{color:var(--danger)}.status-badge--error .status-badge__dot{background:var(--danger)}@keyframes pulse{50%{opacity:.35}}.card{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-elevated);width:100%;max-width:380px;padding:22px;animation:.35s ease-out both fade-up}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.card__hint{color:var(--text-muted);text-align:center;margin:14px 4px 0;font-size:.82rem}.btn{border-radius:var(--radius-sm);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.95rem;font-weight:600;transition:background-color .15s,border-color .15s,color .15s,transform 50ms;display:inline-flex}.btn:active:not(:disabled){transform:scale(.98)}.btn:focus-visible,a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--full{width:100%}.btn--primary{background:var(--accent);color:var(--accent-foreground)}.btn--primary:hover:not(:disabled){background:var(--accent-hover)}.btn--secondary{background:var(--bg-card);border-color:var(--border);color:var(--text)}.btn--secondary:hover:not(:disabled){border-color:var(--text-muted)}.btn--ghost{border-color:var(--border);color:var(--text-muted);background:0 0}.btn--ghost:hover:not(:disabled){color:var(--text);border-color:var(--text-muted)}.btn--danger{border-color:var(--danger);color:var(--danger);background:0 0}.btn--danger:hover:not(:disabled){background:var(--danger);color:#fff}.btn--discord{color:#fff;background:#5865f2}.btn--discord:hover:not(:disabled){background:#4752c4}.field{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input,var(--bg-card));width:100%;color:var(--text);font:inherit;caret-color:var(--accent);cursor:text;outline:none;padding:10px 12px;font-size:.9rem;transition:border-color .15s}.field::placeholder{color:var(--text-muted);opacity:.6}.field::selection{background:var(--accent);color:var(--accent-foreground)}.field:focus{border-color:var(--accent)}.field:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--bg-card) inset;caret-color:var(--text);transition:background-color 9999s ease-in-out}.field:-webkit-autofill:hover{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--bg-card) inset;caret-color:var(--text);transition:background-color 9999s ease-in-out}.field:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--bg-card) inset;caret-color:var(--text);transition:background-color 9999s ease-in-out}.join{text-align:center;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:420px;display:flex}.join__logo{width:min(200px,55vw);height:auto}.join__tagline{color:var(--text-muted);margin:0 0 6px;font-size:.95rem}.join__card{text-align:left}.join__title{color:var(--text-strong);margin:0;font-size:1.15rem;font-weight:700}.join__subtitle{color:var(--text-muted);margin:6px 0 16px;font-size:.85rem}.join__row{gap:8px;display:flex}.join__code{text-align:center;letter-spacing:.3em;text-transform:uppercase;flex:1;min-width:0;font-weight:700}.join__error{color:var(--danger);margin:10px 0 0;font-size:.85rem}.join__hint{color:var(--text-muted);text-align:center;margin:12px 0 0;font-size:.8rem}.join__loading{flex-direction:column;align-items:center;gap:14px;display:flex}.spinner{border:3px solid var(--accent);border-top-color:#0000;border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.login__form{flex-direction:column;gap:10px;display:flex}.login__divider{color:var(--text-muted);align-items:center;gap:10px;margin:14px 0;font-size:.75rem;display:flex}.login__divider span{background:var(--border);flex:1;height:1px}.login__divider em{text-transform:uppercase;letter-spacing:.08em;font-style:normal}.login__guest{color:var(--text-muted);font:inherit;cursor:pointer;background:0 0;border:0;font-size:.78rem;text-decoration:underline}.login__guest:hover{color:var(--text)}.resume{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.resume__avatar{background:color-mix(in srgb, var(--accent) 22%, transparent);width:56px;height:56px;color:var(--accent);border-radius:50%;place-items:center;margin-bottom:6px;font-size:1.4rem;font-weight:700;display:grid;overflow:hidden}.resume__avatar img{object-fit:cover;width:100%;height:100%}.resume .join__subtitle{margin-bottom:14px}.resume__other{color:var(--text-muted);font:inherit;cursor:pointer;background:0 0;border:0;margin-top:10px;font-size:.78rem;text-decoration:underline}.resume__other:hover{color:var(--text)}.join__identity{color:var(--text-muted);margin:0;font-size:.78rem}.join__identity strong{color:var(--text);font-weight:600}.join__switch{color:var(--text-muted);font:inherit;font-size:inherit;cursor:pointer;background:0 0;border:0;text-decoration:underline}.join__switch:hover{color:var(--text)}.link{flex-direction:column;align-items:center;gap:8px;margin-top:4px;display:flex}.link__form{flex-direction:column;gap:8px;width:100%;max-width:340px;display:flex}.link__input{text-align:center;letter-spacing:.22em;text-transform:uppercase;flex:1;min-width:0;font-weight:700}.link__hint{color:var(--text-muted);text-align:center;margin:0;font-size:.72rem}.link__ok{color:var(--success);margin:4px 0 0;font-size:.78rem}.app__main--watch{padding:0;position:relative;overflow:hidden}.app__main--watch>*{margin:0}.watch{position:absolute;inset:0}.watch__frame{background:#000;border:0;width:100%;height:100%}.lobby{grid-template-columns:minmax(220px,280px) minmax(280px,1fr) minmax(180px,240px);align-items:stretch;gap:14px;width:100%;max-width:980px;display:grid}.lobby__col{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);flex-direction:column;padding:18px;animation:.35s ease-out both fade-up;display:flex}.lobby__col--live{padding:14px}.live__head{align-items:center;gap:8px;padding:4px 4px 12px;display:flex}.live__icon{color:var(--success);font-size:.9rem}.live__title{color:var(--text-strong);white-space:nowrap;flex:1;font-size:.82rem;font-weight:700}.live__count{background:color-mix(in srgb, var(--success) 25%, transparent);min-width:20px;color:var(--success);text-align:center;border-radius:999px;padding:1px 6px;font-size:.72rem;font-weight:700}.live__list{flex-direction:column;gap:8px;min-height:0;display:flex;overflow-y:auto}.live__empty{color:var(--text-muted);margin:8px 4px;font-size:.8rem;line-height:1.5}.live__card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);flex-wrap:wrap;align-items:center;gap:10px;padding:10px;display:flex}.live__cover{object-fit:cover;background:var(--bg);border-radius:6px;flex-shrink:0;width:44px;height:60px}.live__cover--ph{color:var(--text-muted);place-items:center;font-size:1.1rem;font-weight:700;display:grid}.live__meta{flex:1;min-width:0}.live__name{color:var(--text-strong);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.85rem;font-weight:600;overflow:hidden}.live__sub{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;margin:4px 0 0;font-size:.72rem;display:flex;overflow:hidden}.live__host-avatar{background:var(--accent);width:16px;height:16px;color:var(--accent-foreground);border-radius:50%;flex-shrink:0;place-items:center;font-size:.6rem;font-weight:700;display:inline-grid}.live__viewers{flex-shrink:0;margin-left:auto}.live__action{border-radius:var(--radius-sm);background:var(--accent);width:100%;color:var(--accent-foreground);font:inherit;cursor:pointer;border:1px solid #0000;padding:7px 10px;font-size:.78rem;font-weight:700;transition:background-color .15s,border-color .15s}.live__action:hover:not(:disabled){background:var(--accent-hover)}.live__action:disabled{opacity:.65;cursor:wait}.live__action--wait{background:var(--bg);border-color:var(--border);color:var(--text-muted)}.live__action--no{border-color:var(--danger);color:var(--danger);background:0 0}.live__action--inside{background:color-mix(in srgb, var(--success) 18%, transparent);color:var(--success)}.live__action--inside:hover:not(:disabled){background:color-mix(in srgb, var(--success) 28%, transparent)}.lobby__col--join{text-align:center;justify-content:center;align-items:center;gap:12px;padding:26px 22px}.join__title--big{font-size:1.3rem}.lobby__col--join .join__logo{width:130px}.lobby__col--join .join__code{text-align:center;letter-spacing:.4em;font-size:1.05rem;font-weight:700}.live__banner{border:1px solid color-mix(in srgb, var(--success) 35%, transparent);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--success) 10%, transparent);width:100%;color:var(--success);font:inherit;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;padding:10px 12px;font-size:.8rem;font-weight:600;transition:background-color .15s;overflow:hidden}.live__banner:hover:not(:disabled){background:color-mix(in srgb, var(--success) 18%, transparent)}.live__banner:disabled{opacity:.7;cursor:wait}.lobby__col--account{text-align:center;align-items:center;gap:10px;padding:22px 18px}.account__label{color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;text-align:left;align-self:stretch;margin:0 0 4px;font-size:.68rem;font-weight:700}.account__avatar{background:color-mix(in srgb, var(--accent) 22%, transparent);width:64px;height:64px;color:var(--accent);border-radius:50%;place-items:center;font-size:1.6rem;font-weight:700;display:grid;overflow:hidden}.account__avatar img{object-fit:cover;width:100%;height:100%}.account__name{color:var(--text-strong);margin:0;font-size:.95rem;font-weight:700}.account__badge{color:#fff;background:#5865f2;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:.75rem;font-weight:600;display:inline-flex}@media (width<=480px){.header{padding:12px 14px}.card{padding:18px}.join__tagline{font-size:.9rem}.field{font-size:16px}.btn{min-height:44px}}@media (height<=560px){.join{gap:10px}.join__logo{width:min(130px,34vw)}.join__tagline{display:none}}@media (width<=720px){.lobby{grid-template-columns:1fr;max-width:420px}.lobby__col--join{order:-1}.live__list{max-height:220px}}