:root{--bg:#14161a;--panel:#1e2127;--panel-2:#272b33;--line:#343944;--text:#eef0f3;--muted:#9aa1ad;--accent:#ff7a3d;--danger:#e5484d;--ok:#3ccf7a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;margin:0;font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}[hidden]{display:none!important}button,input,select{font:inherit;color:inherit}.screen{flex-direction:column;height:100dvh;display:flex}#join{justify-content:center;align-items:center;padding:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:14px;width:min(420px,100%);padding:24px;display:flex}h1{align-items:center;gap:10px;margin:0;font-size:1.5rem;display:flex}h2{margin:0;font-size:1.2rem}.logo{background:radial-gradient(circle at 35% 35%, #ffb08a, var(--accent));border-radius:50%;width:26px;height:26px;box-shadow:14px 6px 0 -6px #3dbbff}.sub,.hint{color:var(--muted);margin:0;font-size:.9rem}label{color:var(--muted);flex-direction:column;gap:6px;font-size:.85rem;display:flex}label.check{color:var(--text);flex-direction:row;align-items:center}input:not([type]),input[type=password],select{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px}input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=range]{accent-color:var(--accent);width:100%}button{cursor:pointer;background:var(--panel-2);border:0;border-radius:10px;padding:11px 16px}button.primary{background:var(--accent);color:#1a0d05;font-weight:600}button:disabled{opacity:.6;cursor:progress}button.ghost{border:1px solid var(--line);background:0 0;padding:8px 12px}.error{color:#ff8c8f;min-height:1.2em;margin:0}.topbar,.bottombar{padding:10px 16px;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));background:var(--panel);justify-content:space-between;align-items:center;gap:12px;display:flex}.topbar{padding-top:max(10px, env(safe-area-inset-top));border-bottom:1px solid var(--line)}.bottombar{padding-bottom:max(12px, env(safe-area-inset-bottom));border-top:1px solid var(--line)}.room-title{align-items:center;gap:8px;min-width:0;font-weight:600;display:flex}.room-title #room-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.count{color:var(--muted);white-space:nowrap;font-size:.85rem;font-weight:400}.top-actions{gap:8px;display:flex}.dot{background:var(--muted);border-radius:50%;flex:none;width:9px;height:9px}.dot[data-state=connected]{background:var(--ok)}.dot[data-state=reconnecting],.dot[data-state=signalReconnecting]{background:#f2c94c}.banner{color:#ffe39a;text-align:center;cursor:pointer;background:#4a3a12;padding:8px 16px}#map-wrap{flex:1;place-items:center;min-height:0;padding:4px;display:grid}#map{border:1px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle,#ffffff10 1px,#0000 1.5px) 0 0/5% 5%,linear-gradient(160deg,#1b1f26,#15181d);border-radius:18px;position:relative;overflow:hidden}.ring{aspect-ratio:1;pointer-events:none;border-radius:50%;transition:left .25s,top .25s;position:absolute;transform:translate(-50%,-50%)}.ring.near{background:radial-gradient(circle,#ff7a3d22,#ff7a3d10 70%,#0000 71%);border:1px dashed #ff7a3d55}.ring.far{border:1px dashed #ffffff1f}.bubble{--c:var(--accent);--lvl:0;--gain:1;width:var(--bsize,9%);aspect-ratio:1;background:var(--c);color:#111;min-width:30px;opacity:calc(.45 + .55 * var(--gain));box-shadow:0 0 0 calc(var(--lvl) * 14px) color-mix(in srgb, var(--c) 45%, transparent), 0 4px 14px #0007;cursor:pointer;z-index:1;border-radius:50%;place-items:center;font-size:clamp(11px,2.2cqw,16px);font-weight:700;transition:left .12s linear,top .12s linear,box-shadow 80ms,opacity .2s;display:grid;position:absolute;transform:translate(-50%,-50%)}#map{container-type:inline-size}.bubble.me{cursor:grab;z-index:3;outline-offset:2px;opacity:1;outline:3px solid #fff}.bubble.dragging{cursor:grabbing;transition:box-shadow 80ms}.bubble.speaking{z-index:2}.bubble .ini{pointer-events:none}.bubble .nm{white-space:nowrap;color:var(--text);pointer-events:none;text-overflow:ellipsis;background:#0009;border-radius:6px;max-width:140px;margin-top:6px;padding:1px 6px;font-size:12px;font-weight:500;position:absolute;top:100%;overflow:hidden}.bubble .muted-badge{pointer-events:none;font-size:13px;position:absolute;bottom:-4px;right:-6px}.round{white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;display:flex}.round.danger{color:#ffb3b5;background:#3a1d1f}#mute-btn{color:#b6f5cf;background:#1d3a2a}#mute-btn.off{color:#ffb3b5;background:#3a1d1f}.mic-icon{background:currentColor;border-radius:50%;width:10px;height:10px}.far-slider{flex:1;max-width:260px;font-size:.8rem}dialog{color:var(--text);background:0 0;border:0;padding:0}dialog::backdrop{background:#000a}.popover{z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:10px;width:220px;padding:12px;display:flex;position:fixed;box-shadow:0 10px 30px #000a}.pop-name{font-weight:600}@media (max-width:480px){.far-slider{max-width:none}.round{padding:10px 14px}}.photo-row{align-items:center;gap:14px;display:flex}.photo-preview{background:var(--panel-2) center / cover no-repeat;border:1px dashed var(--line);border-radius:50%;flex:none;width:56px;height:56px}.photo-preview.set{border:2px solid var(--accent)}.photo-actions{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.file-btn{color:var(--text);background:var(--panel-2);cursor:pointer;border-radius:10px;flex-direction:row;padding:8px 14px;font-size:.9rem}.link-btn{color:var(--muted);background:0 0;padding:2px 0;font-size:.85rem;text-decoration:underline}.bubble.has-photo{background:var(--c) var(--photo) center / cover no-repeat;border:3px solid var(--c)}.bubble.has-photo .ini{visibility:hidden}