:root{--bg:#111214;--ink:#f4f4f5;--muted:#f4f4f5b8;--glass:#1112148c;--glass-line:#ffffff24;--start:#f4f4f5;--start-ink:#111214;--end:#e5484d;--live:#3dd68c;--listen:#6ea8ff;--think:#f5c451;--font:"Figtree", ui-sans-serif, system-ui, sans-serif;--radius:999px;--gutter:clamp(16px, 3vw, 32px)}*{box-sizing:border-box}html,body,#app{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0}p{margin:0}.room{position:fixed;inset:0;overflow:hidden}.avatar,.avatar__still,.avatar__canvas{width:100%;height:100%;position:absolute;inset:0}.avatar__still{object-fit:cover;opacity:1;z-index:1;transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}.avatar__still[data-hidden=true]{opacity:0;pointer-events:none}.avatar__canvas{opacity:0;z-index:2;transition:opacity .55s cubic-bezier(.22,1,.36,1),filter .45s;display:block}.avatar__canvas[data-ready=true]{opacity:1}.avatar.is-switching .avatar__still{transform:scale(1.02)}.avatar.is-switching .avatar__canvas{opacity:0;filter:blur(8px)}.avatar:after{content:"";pointer-events:none;background:linear-gradient(#0000,#0000009e);height:42%;position:absolute;inset:auto 0 0}.badge{z-index:3;top:var(--gutter);left:var(--gutter);max-width:calc(100% - 2 * var(--gutter));background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;align-items:center;gap:16px;padding:10px 10px 10px 16px;display:flex;position:absolute}.badge__name{font-weight:600}.badge__change{appearance:none;border:1px solid var(--glass-line);border-radius:var(--radius);color:var(--ink);font:inherit;cursor:pointer;background:#ffffff14;align-items:center;gap:6px;padding:6px 10px 6px 12px;font-size:.8125rem;font-weight:500;display:inline-flex}.badge__change svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;transition:transform .26s cubic-bezier(.22,1,.36,1)}.badge__change[aria-expanded=true] svg{transform:rotate(180deg)}.picker{width:min(420px, calc(100vw - 2 * var(--gutter)));border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#111214d1;border-radius:16px;gap:14px;max-height:calc(100vh - 160px);padding:14px;display:none;position:absolute;top:calc(100% + 8px);left:0;overflow-y:auto}.picker[data-open=true]{display:grid}.picker__label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-size:.75rem}.picker__options{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;display:grid}.picker__option{cursor:pointer;color:inherit;text-align:left;background:0 0;border:1px solid #0000;border-radius:12px;gap:6px;padding:6px;font-size:.8125rem;display:grid}.picker__option:hover{background:#ffffff0f}.picker__option.is-active{background:#ffffff14;border-color:#ffffff8c}.picker__thumb{aspect-ratio:1;object-fit:cover;object-position:50% 25%;background:#fff;border-radius:8px;width:100%;display:block}.picker__bg{aspect-ratio:3/2;object-fit:cover;border-radius:8px;width:100%;display:block}.avatar__caption{z-index:3;left:50%;bottom:calc(var(--gutter) + 150px);width:min(40ch, calc(100% - 2 * var(--gutter)));text-align:center;text-wrap:balance;text-shadow:0 1px 12px #0009;opacity:0;pointer-events:none;font-size:clamp(1.0625rem,.95rem + .5vw,1.375rem);line-height:1.35;transition:opacity .3s,transform .3s;position:absolute;transform:translate(-50%,6px)}.avatar__caption[data-shown=true]{opacity:1;transform:translate(-50%)}.dock{z-index:2;left:50%;bottom:calc(max(var(--gutter), 30px) + 18px);width:max-content;max-width:calc(100% - 2 * var(--gutter));text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;transform:translate(-50%)}.dock--live{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);border-radius:20px;padding:0}.dock__live{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;padding:10px 10px 10px 20px;display:flex}.dock__live[hidden]{display:none!important}.dock__buttons{gap:8px;display:flex}.button--start[hidden]{display:none!important}.status{align-items:center;gap:10px;min-width:9.5em;font-weight:500;display:flex}.status__muted{color:var(--muted);margin-left:-6px;font-weight:400}.status__dot{border-radius:50%;flex:none;width:9px;height:9px}.status[data-phase=listening] .status__dot{background:var(--listen);box-shadow:0 0 #6ea8ff99}.status[data-phase=speaking] .status__dot{background:var(--live);animation:1.2s ease-out infinite pulse;box-shadow:0 0 #3dd68c99}.status[data-phase=thinking] .status__dot,.status[data-phase=connecting] .status__dot{background:var(--think);animation:1s ease-in-out infinite blink;box-shadow:0 0 #f5c45199}@keyframes pulse{to{box-shadow:0 0 0 10px #3dd68c00}}@keyframes blink{50%{opacity:.35}}.button{appearance:none;border-radius:var(--radius);font:inherit;cursor:pointer;border:0;padding:11px 20px;font-weight:500;transition:background-color .15s,transform .15s}.button:active{transform:scale(.97)}.button:disabled{opacity:.5;cursor:default}.button--start{color:var(--start-ink);background:#fff;justify-content:center;align-items:center;gap:10px;height:54px;padding:0 28px 0 22px;font-size:1rem;font-weight:600;display:inline-flex}.button--quiet{color:var(--ink);background:#ffffff1f}.button--quiet:hover:not(:disabled){background:#fff3}.button--quiet[aria-pressed=true]{background:var(--ink);color:var(--start-ink)}.button--end{background:var(--end);color:#fff}.button--end:hover:not(:disabled){background:#ec5d61}.button__mic{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.loader{z-index:60;background:var(--bg);opacity:1;place-items:center;transition:opacity .45s ease-out;display:grid;position:fixed;inset:0}.loader.is-leaving{opacity:0;pointer-events:none}.loader.is-hidden{display:none}.loader__card{width:min(24rem,100vw - 2rem)}.loader__card p{color:var(--muted);margin-top:.75rem}.loader__bar{background:#ffffff14;height:2px;margin-top:1rem}.loader__bar span{background:#3dd68c;width:8%;height:100%;display:block}