:root{--text:#f4f5f8;--text-2:#f4f5f8ad;--text-3:#f4f5f880;--glass:#1c1e2c61;--glass-border:#ffffff2e;--glass-highlight:#ffffff47;--chip:#ffffff14;--chip-border:#ffffff24;--chip-hover:#ffffff2e;--primary-bg:#f2f4f8;--primary-bg-hover:#fff;--primary-text:#14161f;--focus:#8ec5ff;--ok:#4ade80;--wait-text:#fcd34d;--danger-text:#ffb4b4;--r-panel:32px;--r-field:14px;--r-icon:12px;--r-pill:999px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--text);touch-action:none;background:#000;margin:0;overflow:hidden}#app{height:100%;position:relative}.video{object-fit:contain;background:#000;width:100%;height:100%;display:block}.glass{background:var(--glass);-webkit-backdrop-filter:blur(36px)saturate(180%);backdrop-filter:blur(36px)saturate(180%);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-highlight), 0 24px 60px #00000059}.overlay{align-items:center;gap:8px;display:flex;position:absolute}.overlay-top-left{flex-wrap:wrap;top:16px;left:16px;right:72px}.overlay-top-right{top:16px;right:16px}.overlay-bottom-left{bottom:16px;left:16px;right:16px}.immersive{background:#000;position:fixed;inset:0}.immersive .overlay-top-left,.immersive .overlay-bottom-left{display:none}.immersive .overlay-top-right{top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));opacity:.5;transition:opacity .15s}.immersive .overlay-top-right:hover,.immersive .overlay-top-right:focus-within,.immersive .overlay-top-right:active{opacity:1}.overlay-stack{flex-direction:column;align-items:flex-start}.pill{border-radius:var(--r-pill);align-items:center;gap:8px;max-width:100%;padding:8px 14px;font-size:12px;font-weight:500;line-height:1.3;display:inline-flex}.dot{background:var(--text-3);border-radius:50%;flex:none;width:8px;height:8px}.pill[data-state=live] .dot{background:var(--ok)}.pill[data-state=connecting]{color:var(--wait-text)}.pill[data-state=connecting] .dot{background:var(--wait-text)}.pill[data-state=error]{color:var(--danger-text)}.pill[data-state=error] .dot{background:var(--danger-text)}.stats{color:var(--text-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.button,.icon-button{color:var(--text);font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:1px solid #0000;justify-content:center;align-items:center;transition:background .15s,transform .1s,border-color .15s;display:inline-flex}.button:focus-visible,.icon-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.button:active:not(:disabled),.icon-button:active:not(:disabled){transform:scale(.97)}.button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.5}.button-primary{border-radius:var(--r-pill);background:var(--primary-bg);height:36px;color:var(--primary-text);padding:0 16px;font-size:13px;font-weight:600}.button-primary:hover:not(:disabled){background:var(--primary-bg-hover)}.icon-button{border-radius:var(--r-icon);background:var(--chip);border-color:var(--chip-border);width:36px;height:36px}.icon-button:hover:not(:disabled){background:var(--chip-hover)}.icon-button:disabled{color:var(--text-3);background:0 0;border:1px dashed #ffffff38}.icon-button svg{width:18px;height:18px}[hidden]{display:none!important}.clock-page{height:100%;position:relative}.clock-canvas{width:100%;height:100%;display:block}.clock-help{max-width:560px;color:var(--text-2);margin:0;position:absolute;top:16px;left:16px;right:72px}.clock-fullscreen{position:absolute;top:16px;right:16px}.button-secondary{border-radius:var(--r-pill);background:var(--chip);border-color:var(--chip-border);height:36px;padding:0 16px;font-size:13px;font-weight:600}.button-secondary:hover:not(:disabled){background:var(--chip-hover)}.join{border-radius:var(--r-panel);flex-direction:column;gap:12px;width:min(360px,100% - 32px);padding:24px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.join[hidden]{display:none}.join-title{margin:0 0 4px;font-size:20px;font-weight:600}.join-label{color:var(--text-2);font-size:13px;font-weight:500}.join-hint{color:var(--text-3);margin:0;font-size:12px;line-height:1.4}.join-hint-error{color:var(--danger-text)}.field{border:1px solid var(--chip-border);border-radius:var(--r-field);background:var(--chip);width:100%;color:var(--text);font:inherit;padding:12px 14px;font-size:16px;transition:background .15s,border-color .15s}.field:hover:not(:disabled){background:var(--chip-hover)}.field:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.field[aria-invalid=true]{border-color:var(--danger-text)}.field:disabled{cursor:not-allowed;opacity:.5}.touch{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:0}.touch[hidden]{display:none}.touch-button,.touch-stick{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.touch-button{border:1px solid var(--glass-border);border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:56px;height:56px;color:var(--text);font:inherit;opacity:.8;cursor:pointer;justify-content:center;align-items:center;padding:0;font-size:18px;font-weight:600;transition:background 80ms,transform 60ms,opacity 80ms;display:inline-flex}.touch-small{width:44px;height:44px;font-size:14px}.touch-wide{width:64px;height:40px;font-size:14px}.touch-button:hover{background:var(--chip-hover)}.touch-button:focus-visible,.touch-stick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.touch-button.touch-pressed{background:var(--glass-highlight);opacity:1;transform:scale(.92)}.touch-stick{bottom:max(24px, env(safe-area-inset-bottom));border:1px solid var(--glass-border);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:.8;border-radius:50%;width:128px;height:128px;position:absolute}.touch-stick.touch-pressed{opacity:1}.touch-stick-left{left:max(24px, env(safe-area-inset-left))}.touch-stick-right{right:calc(max(24px, env(safe-area-inset-right)) + 176px);width:104px;height:104px}.touch-knob{background:var(--glass-highlight);border:1px solid var(--glass-border);pointer-events:none;border-radius:50%;position:absolute;inset:30%}.touch-dpad{left:calc(max(24px, env(safe-area-inset-left)) + 144px);bottom:max(24px, env(safe-area-inset-bottom));grid-template-rows:repeat(3,44px);grid-template-columns:repeat(3,44px);display:grid;position:absolute}.touch-up{grid-area:1/2}.touch-left{grid-area:2/1}.touch-right{grid-area:2/3}.touch-down{grid-area:3/2}.touch-face{right:max(24px, env(safe-area-inset-right));bottom:max(24px, env(safe-area-inset-bottom));grid-template-rows:repeat(3,52px);grid-template-columns:repeat(3,52px);display:grid;position:absolute}.touch-y{grid-area:1/2}.touch-x{grid-area:2/1}.touch-b{grid-area:2/3}.touch-a{grid-area:3/2}.touch-shoulders{top:max(72px, env(safe-area-inset-top));gap:8px;display:flex;position:absolute}.touch-shoulders-left{left:max(24px, env(safe-area-inset-left))}.touch-shoulders-right{right:max(24px, env(safe-area-inset-right));flex-direction:row-reverse}.touch-menu{left:50%;bottom:max(16px, env(safe-area-inset-bottom));gap:16px;display:flex;position:absolute;transform:translate(-50%)}.touch-face .touch-button{width:52px;height:52px}.touch-on .overlay-bottom-left{display:none}body:not(.diag-on) .diag,body:not(.diag-on) .pad-pill[data-state=live]{display:none!important}