:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0e0f12;--fg:#e8e8ea;--muted:#8b8d93;--ok:#34c759;--warn:#fc0;--alert:#ff453a}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#app{justify-content:center;align-items:center;height:100%;display:flex}.join{text-align:center;gap:1rem;display:grid}.join p{color:var(--muted)}.mascot{justify-self:center}.sheet-sprite{background-image:var(--walk);background-repeat:no-repeat;background-size:500% 500%;animation:2.1s step-end infinite sheet-walk}.sheet-sprite.idle{background-image:var(--idle)}.sprite-bear{--walk:url(/sprites/bear-walk.webp);--idle:url(/sprites/bear-idle.webp)}.sprite-duck{--walk:url(/sprites/duck-walk.webp);--idle:url(/sprites/duck-idle.webp)}.sprite-elephant{--walk:url(/sprites/elephant-walk.webp);--idle:url(/sprites/elephant-idle.webp)}.sprite-fox{--walk:url(/sprites/fox-walk.webp);--idle:url(/sprites/fox-idle.webp)}.sprite-frog{--walk:url(/sprites/frog-walk.webp);--idle:url(/sprites/frog-idle.webp)}.sprite-lion{--walk:url(/sprites/lion-walk.webp);--idle:url(/sprites/lion-idle.webp)}.sprite-owl{--walk:url(/sprites/owl-walk.webp);--idle:url(/sprites/owl-idle.webp)}.sprite-panda{--walk:url(/sprites/panda-walk.webp);--idle:url(/sprites/panda-idle.webp)}.sprite-penguin{--walk:url(/sprites/penguin-walk.webp);--idle:url(/sprites/penguin-idle.webp)}.sprite-rabbit{--walk:url(/sprites/rabbit-walk.webp);--idle:url(/sprites/rabbit-idle.webp)}.sprite-sloth{--walk:url(/sprites/sloth-walk.webp);--idle:url(/sprites/sloth-idle.webp)}.sprite-turtle{--walk:url(/sprites/turtle-walk.webp);--idle:url(/sprites/turtle-idle.webp)}.mascot .sheet-sprite{width:110px;height:110px}.mascot-row .sheet-sprite{width:clamp(100px,28vw,134px);height:clamp(100px,28vw,134px);display:block}.mascot-pick:nth-child(2) .sheet-sprite{animation-delay:-.7s}.mascot-pick:nth-child(3) .sheet-sprite{animation-delay:-1.3s}.mascot-pick:nth-child(4) .sheet-sprite{animation-delay:-.4s}.mascot-pick:nth-child(5) .sheet-sprite{animation-delay:-1.7s}.mascot-pick:nth-child(6) .sheet-sprite{animation-delay:-.9s}.mascot-pick:nth-child(7) .sheet-sprite{animation-delay:-1.5s}.mascot-pick:nth-child(8) .sheet-sprite{animation-delay:-1.1s}.mascot-pick:nth-child(9) .sheet-sprite{animation-delay:-.2s}.mascot-pick:nth-child(10) .sheet-sprite{animation-delay:-1.9s}.mascot-pick:nth-child(11) .sheet-sprite{animation-delay:-.6s}.mascot-pick:nth-child(12) .sheet-sprite{animation-delay:-1s}.mascot-pick:hover .sheet-sprite.idle,.mascot-pick:focus-visible .sheet-sprite.idle{background-image:var(--walk)}@keyframes sheet-walk{0%{background-position:0 0}4%{background-position:25% 0}8%{background-position:50% 0}12%{background-position:75% 0}16%{background-position:100% 0}20%{background-position:0 25%}24%{background-position:25% 25%}28%{background-position:50% 25%}32%{background-position:75% 25%}36%{background-position:100% 25%}40%{background-position:0%}44%{background-position:25%}48%{background-position:50%}52%{background-position:75%}56%{background-position:100%}60%{background-position:0 75%}64%{background-position:25% 75%}68%{background-position:50% 75%}72%{background-position:75% 75%}76%{background-position:100% 75%}80%{background-position:0 100%}84%{background-position:25% 100%}88%{background-position:50% 100%}92%{background-position:75% 100%}96%,to{background-position:100% 100%}}.mascot-row{opacity:0;flex-wrap:wrap;justify-content:center;justify-self:center;gap:.3rem .1rem;max-width:37rem;transition:opacity .6s;display:flex}.mascot-row.ready{opacity:1}@media (prefers-reduced-motion:reduce){.mascot-row{transition:none}}.join .mascot-pick{cursor:pointer;background:0 0;border:none;border-radius:12px;padding:.2rem .2rem .6rem;transition:transform .15s;position:relative}.join .mascot-pick:after{content:"";background:radial-gradient(#8b8d9329,#0000 70%);border-radius:50%;width:68%;height:9px;position:absolute;bottom:.35rem;left:50%;translate:-50%}.join .mascot-pick:hover,.join .mascot-pick:focus-visible{transform:translateY(-4px)scale(1.08)}.join .hint{letter-spacing:.04em;color:var(--muted);font-size:.85rem}.join .text-button{font:inherit;color:color-mix(in srgb, var(--muted) 70%, transparent);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;justify-self:center;padding:.4rem;font-size:.8rem;text-decoration:underline}.session-mascot{pointer-events:none;transition:opacity .5s,filter .5s;position:absolute;top:7rem;left:50%;translate:-50%}.session-mascot.lost{opacity:.35;filter:grayscale(.85)}.session-mascot .sheet-sprite{width:96px;height:96px;animation:2.1s step-end infinite sheet-walk,9s linear infinite mascot-pace}.session-mascot .sheet-sprite.idle{animation-play-state:running,paused}.session-mascot.lost .sheet-sprite{animation-play-state:paused,paused}@keyframes mascot-pace{0%{transform:translate(-70px)scaleX(1)}49.9%{transform:translate(70px)scaleX(1)}50%{transform:translate(70px)scaleX(-1)}99.9%{transform:translate(-70px)scaleX(-1)}to{transform:translate(-70px)scaleX(1)}}.call-mascot{pointer-events:none;transition:opacity .5s,filter .5s;position:absolute;bottom:4.5rem;left:50%;translate:-50%}.call-mascot .sheet-sprite{width:64px;height:64px}.call-mascot .sheet-sprite.idle{animation-play-state:running}.call-mascot.lost{opacity:.35;filter:grayscale(.85)}.call-mascot.lost .sheet-sprite{animation-play-state:paused}.join .room-label{color:color-mix(in srgb, var(--muted) 70%, transparent);font-size:.8rem}.copy-link{font:inherit;color:var(--muted);background:color-mix(in srgb, var(--bg) 60%, transparent);border:1px solid color-mix(in srgb, var(--muted) 40%, transparent);cursor:pointer;overflow-wrap:anywhere;border-radius:999px;max-width:90vw;padding:.4rem .9rem;font-size:.8rem}.join .copy-link{justify-self:center}.session .copy-link{position:absolute;top:4rem;left:50%;transform:translate(-50%)}.join .leave-room{font:inherit;color:color-mix(in srgb, var(--muted) 70%, transparent);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;justify-self:center;font-size:.8rem;text-decoration:underline}.join .error{color:var(--alert);max-width:32ch}.join button{font:inherit;color:var(--bg);background:var(--fg);cursor:pointer;border:none;border-radius:999px;justify-self:center;padding:.75rem 1.5rem;font-weight:600}.join button:disabled{opacity:.5}.session{position:fixed;inset:0}.remote-video{object-fit:cover;background:var(--bg);opacity:0;width:100%;height:100%;transition:opacity .8s;position:absolute;inset:0}.session[data-call-state=connected] .remote-video{opacity:1}.call-status{text-align:center;color:var(--muted);letter-spacing:.05em;font-size:.9rem;position:absolute;top:2rem;left:0;right:0}.glow{opacity:0;pointer-events:none;transition:opacity .3s;position:absolute}.glow-left,.glow-right{width:18vmin;top:0;bottom:0}.glow-top,.glow-bottom{height:18vmin;left:0;right:0}.glow-left{background:linear-gradient(to right, var(--warn), transparent);left:0}.glow-right{background:linear-gradient(to left, var(--warn), transparent);right:0}.glow-top{background:linear-gradient(to bottom, var(--warn), transparent);top:0}.glow-bottom{background:linear-gradient(to top, var(--warn), transparent);bottom:0}.bubble{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.bubble-target{border:2px solid color-mix(in srgb, var(--muted) 40%, transparent);border-radius:50%;width:30vmin;height:30vmin;position:absolute}.bubble-dot{background:var(--ok);border-radius:50%;width:6vmin;height:6vmin;transition:translate .15s linear,background .3s}.bubble-dot[data-status=drifting]{background:var(--warn)}.off-camera{color:var(--alert);letter-spacing:.15em;text-transform:uppercase;pointer-events:none;place-content:center;font-size:1.25rem;animation:2s ease-in-out infinite off-camera-pulse;display:grid;position:absolute;inset:0}@keyframes off-camera-pulse{50%{opacity:.4}}.mode-toggle,.mute-toggle{font:inherit;color:var(--muted);background:color-mix(in srgb, var(--bg) 60%, transparent);border:1px solid color-mix(in srgb, var(--muted) 40%, transparent);cursor:pointer;border-radius:999px;padding:.4rem .9rem;font-size:.8rem;position:absolute;bottom:1rem}.mode-toggle{left:1rem}.mute-toggle{right:1rem}.mute-toggle.muted{color:var(--alert);border-color:var(--alert)}.debug-readout{color:var(--muted);font-size:.8rem;position:absolute;top:1rem;left:1rem}.debug-video{border-radius:12px;width:200px;position:absolute;bottom:1rem;right:1rem;transform:scaleX(-1)}