:root{--bg: #000;--surface: #0e0e10;--panel: rgb(20 20 22 / .88);--text: #f2f2f3;--muted: #9a9aa2;--accent: #5ac8fa;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--surface)}body{overflow-x:hidden}#app{display:flex;flex-direction:column;min-height:100svh}#app[data-invite=true]{justify-content:center;align-items:center}#app[data-invite=true] #stage,#app[data-invite=true] #library,#invite[hidden],#system[hidden],#fullscreen[hidden],#touch-toggle[hidden],#touch[hidden],#touch .stick[hidden],#menu[hidden]{display:none}#stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16 / 9;max-height:100svh;overflow:hidden;background:var(--bg);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#stage:fullscreen,#app[data-fullscreen=true] #stage{position:fixed;inset:0;z-index:10;width:100%;height:100%;max-height:none;aspect-ratio:auto}#stage[data-split=true]{display:flex;flex-direction:column;align-items:stretch;padding-top:env(safe-area-inset-top)}#stage[data-split=true] #stream{position:relative;inset:auto;flex:none;height:auto;aspect-ratio:16 / 9}#stage[data-split=true] #status{position:absolute;top:calc(env(safe-area-inset-top) + 28.125vw);left:50%;transform:translate(-50%,-50%)}#stage[data-split=true] #bar{top:calc(env(safe-area-inset-top) + 56.25vw);bottom:auto;transform:translateY(-100%)}#stage[data-split=true] #touch.below{flex:1;height:auto;min-height:0}#stage[data-idle=true]{cursor:none}#stream{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg);touch-action:manipulation}#status{position:relative;padding:10px 16px;border-radius:8px;background:var(--panel);font-size:15px;pointer-events:none}#status:empty{display:none}#stats{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));margin:0;padding:10px 12px;border-radius:8px;background:var(--panel);font:12px/1.5 ui-monospace,SF Mono,Menlo,Consolas,monospace;pointer-events:none}#bar{position:absolute;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:40px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(to top,rgb(0 0 0 / .6),rgb(0 0 0 / .22) 55%,transparent);color:#eceef5;transition:opacity .3s ease;z-index:2;pointer-events:none}#bar button,#bar input{pointer-events:auto}#stage[data-idle=true] #bar{opacity:0}#stage[data-idle=true] #bar *{pointer-events:none}#bar button.icon,#system button.icon{color:#eceef5}#bar button.icon:hover,#system button.icon:hover{background:transparent;color:#fff}#bar .icon svg,#system .icon svg{width:26px;height:26px;stroke-width:1.6}#bar svg{filter:drop-shadow(0 1px 2px rgb(0 0 0 / .55))}.side{display:flex;align-items:center;gap:6px;min-width:0}.side.end{grid-column:3;justify-content:flex-end}#system{display:flex;gap:clamp(20px,7vw,64px)}#system [hidden]{display:none}#system button{width:48px;height:48px}#system .icon svg{width:30px;height:30px}#system .solid{fill:currentColor;stroke:none}#system text{fill:#000;stroke:none;font:700 8.5px system-ui,sans-serif;text-anchor:middle}#volume{width:min(96px,22vw);height:24px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}#volume::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,rgb(236 238 245) var(--level, 100%),rgb(255 255 255 / .28) var(--level, 100%))}#volume::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(to right,rgb(236 238 245) var(--level, 100%),rgb(255 255 255 / .28) var(--level, 100%))}#volume::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#eceef5;box-shadow:0 1px 3px #00000080;-webkit-appearance:none;appearance:none}#volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#eceef5;box-shadow:0 1px 3px #00000080}#mute[aria-pressed=true]+#volume{opacity:.45}button,a.button{padding:7px 12px;border:0;border-radius:7px;background:#ffffff1a;color:var(--text);font:inherit;font-size:13px;text-decoration:none;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:hover,a.button:hover{background:#ffffff2e}button:focus-visible,a.button:focus-visible,#volume:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button[data-held=true]{background:#5ac8fa66}button.icon[data-held=true]{background:#fff3}button:disabled{opacity:.5;cursor:default}button.icon,a.icon{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:transparent}button.icon:hover,a.icon:hover{background:#ffffff24}.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#touch-toggle[aria-pressed=false]{opacity:.55}#mute .cross,#mute[aria-pressed=true] .waves,#fullscreen .exit,#app[data-fullscreen=true] #fullscreen .enter{display:none}#mute[aria-pressed=true] .cross,#app[data-fullscreen=true] #fullscreen .exit{display:inline}#menu{position:absolute;z-index:2;display:grid;min-width:150px;padding:4px;border-radius:10px;background:var(--panel);box-shadow:0 8px 24px #00000080}#menu button{background:transparent;text-align:left}#menu button:hover{background:#ffffff1f}#library{display:grid;gap:14px;padding:16px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}#library-bar{display:flex;gap:8px}#clip,#screenshot{background:var(--text);color:#000;font-weight:600}#clip:hover,#screenshot:hover{background:#fff}#clip-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,40vw),1fr));gap:16px 12px;margin:0;padding:0;list-style:none}#clip-list:empty:after{content:"No clips yet";color:var(--muted);font-size:13px}.clip{display:grid;gap:8px;width:100%;padding:0;background:transparent;text-align:left}.clip:hover{background:transparent}.clip video,.clip img{display:block;width:100%;aspect-ratio:16 / 9;border-radius:8px;background:#1a1a1d;object-fit:cover;pointer-events:none}.clip:hover video,.clip:focus-visible video,.clip:hover img,.clip:focus-visible img{outline:2px solid rgb(255 255 255 / .35)}.clip span{display:grid;gap:2px;padding:0 2px}.clip strong{font-size:14px;font-weight:600}.clip small{color:var(--muted);font-size:12px}#invite{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(360px,calc(100% - 32px))}#invite-code{flex:1;min-width:0;padding:10px 12px;border:1px solid rgb(255 255 255 / .18);border-radius:8px;background:#ffffff0f;color:var(--text);font:inherit;font-size:16px}#invite-code:focus-visible{outline:2px solid var(--accent);outline-offset:1px}#invite button{padding:10px 16px;font-size:15px}#invite-error{flex-basis:100%;margin:0;min-height:1.2em;color:#ff6b6b;font-size:13px;text-align:center}#player{width:min(1100px,calc(100% - 32px));padding:0;border:0;border-radius:10px;background:#111;color:var(--text)}#player::backdrop{background:#000000bf}#clip-video,#clip-image{display:block;width:100%;max-height:calc(100vh - 120px);background:#000;object-fit:contain}#clip-video[hidden],#clip-image[hidden]{display:none}#player-bar{display:flex;gap:4px;padding:4px}#clip-close{margin-left:auto}#touch{position:absolute;inset:0;z-index:1;container-type:size;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--u: min(1cqh, .56cqw);--fill: rgb(205 214 255 / .22);--line: rgb(228 234 255 / .75);--ink: rgb(240 244 255 / .95);--held: rgb(228 234 255 / .6);--glow: 0 0 10px rgb(190 205 255 / .35)}#touch.below{position:relative;inset:auto;flex:none;height:min(130vw,100svh);background:var(--bg);touch-action:pan-y;--u: min(1cqw, .77cqh);--fill: #000;--line: rgb(255 255 255 / .32);--ink: rgb(205 205 212);--held: rgb(255 255 255 / .22);--glow: none}#touch.below [data-bit],#touch.below .zone{touch-action:none}#touch>*{transition:opacity .3s ease}#touch[data-left=faded]:not(.below) :is(.l1,.l2,.dpad),#touch[data-right=faded]:not(.below) :is(.r1,.r2,.face){opacity:0}#touch .touchpad{opacity:0}#touch .touchpad[data-held=true]{opacity:1}#touch .touchpad,#touch .shoulder,#touch .dpad button,#touch .face button{position:absolute;display:grid;place-items:center;min-height:0;padding:0;border:0;background:none;color:var(--ink)}#touch .touchpad{top:calc(var(--u) * 4);left:50%;width:min(calc(var(--u) * 60),calc(100cqw - var(--u) * 104));height:calc(var(--u) * 16);border:1.5px solid var(--line);border-radius:calc(var(--u) * 2.5) calc(var(--u) * 2.5) calc(var(--u) * 6) calc(var(--u) * 6);background:var(--fill);box-shadow:var(--glow);transform:translate(-50%)}#touch.below .touchpad{top:calc(var(--u) * 9);width:calc(var(--u) * 34);height:calc(var(--u) * 17)}#touch .touchpad[data-held=true]{background:var(--held)}#touch .shoulder{left:var(--x);top:var(--y);width:calc(var(--u) * 17);height:calc(var(--u) * 17);transform:translate(-50%,-50%);font-size:calc(var(--u) * 6);font-weight:600}#touch .shoulder:before{content:"";position:absolute;inset:6.5%;border:1.5px solid var(--line);border-radius:50% 50% 12% 12%;background:var(--fill);box-shadow:var(--glow);transform:rotate(var(--r))}#touch .shoulder[data-held=true]:before{background:var(--held)}#touch .shoulder span{position:relative}#touch .l2{--x: calc(var(--u) * 27.5);--y: calc(var(--u) * 18.5);--r: -45deg}#touch .l1{--x: calc(var(--u) * 39.2);--y: calc(var(--u) * 29.5);--r: 135deg}#touch .r2{--x: calc(100cqw - var(--u) * 27.5);--y: calc(var(--u) * 18.5);--r: 45deg}#touch .r1{--x: calc(100cqw - var(--u) * 39.2);--y: calc(var(--u) * 29.5);--r: -135deg}#touch.below .l2{--x: calc(var(--u) * 13.5);--y: calc(var(--u) * 25)}#touch.below .l1{--x: calc(var(--u) * 25.5);--y: calc(var(--u) * 36)}#touch.below .r2{--x: calc(100cqw - var(--u) * 13.5);--y: calc(var(--u) * 25)}#touch.below .r1{--x: calc(100cqw - var(--u) * 25.5);--y: calc(var(--u) * 36)}#touch .dpad,#touch .face{position:absolute;left:var(--x);top:var(--y);width:0;height:0}#touch .dpad{--x: calc(var(--u) * 33);--y: calc(var(--u) * 57);--p: calc(var(--u) * 14.5);--g: calc(var(--u) * 3.5)}#touch .face{--x: calc(100cqw - var(--u) * 33);--y: calc(var(--u) * 57);--b: calc(var(--u) * 9.8);--o: calc(var(--u) * 11.6)}#touch.below .dpad{--x: calc(var(--u) * 20.2);--y: calc(var(--u) * 61);--p: calc(var(--u) * 9);--g: calc(var(--u) * 2.2)}#touch.below .face{--x: calc(100cqw - var(--u) * 20.2);--y: calc(var(--u) * 61);--b: calc(var(--u) * 8.3);--o: calc(var(--u) * 10)}#touch.below .dpad:before,#touch.below .face:before{content:"";position:absolute;left:calc(var(--u) * -16);top:calc(var(--u) * -16);width:calc(var(--u) * 32);height:calc(var(--u) * 32);border:1.5px solid var(--line);border-radius:50%}#touch .dpad button{width:var(--p);height:var(--p)}#touch .dpad .north{left:calc(var(--p) / -2);top:calc(-1 * (var(--g) + var(--p)))}#touch .dpad .south{left:calc(var(--p) / -2);top:var(--g)}#touch .dpad .west{left:calc(-1 * (var(--g) + var(--p)));top:calc(var(--p) / -2)}#touch .dpad .east{left:var(--g);top:calc(var(--p) / -2)}#touch .dpad svg{width:100%;height:100%;overflow:visible}#touch .dpad .east svg{transform:rotate(90deg)}#touch .dpad .south svg{transform:rotate(180deg)}#touch .dpad .west svg{transform:rotate(270deg)}#touch .petal{fill:var(--fill);stroke:var(--line);stroke-width:1.5px;vector-effect:non-scaling-stroke}#touch:not(.below) .dpad svg{filter:drop-shadow(var(--glow))}#touch .dpad button[data-held=true] .petal{fill:var(--held)}#touch:not(.below) .petal.square,#touch.below .petal.tapered{display:none}#touch .arrow{display:none;fill:var(--ink)}#touch.below .arrow{display:inline}#touch .face button{width:var(--b);height:var(--b);border:1.5px solid var(--line);border-radius:50%;background:var(--fill);box-shadow:var(--glow)}#touch .face button[data-held=true]{background:var(--held)}#touch .face .north{left:calc(var(--b) / -2);top:calc(-1 * var(--o) - var(--b) / 2)}#touch .face .south{left:calc(var(--b) / -2);top:calc(var(--o) - var(--b) / 2)}#touch .face .west{left:calc(-1 * var(--o) - var(--b) / 2);top:calc(var(--b) / -2)}#touch .face .east{left:calc(var(--o) - var(--b) / 2);top:calc(var(--b) / -2)}#touch .face svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}#touch.below .face svg{width:100%;height:100%;stroke-width:1.8}#touch.below .face .north{color:#3dbea0}#touch.below .face .east{color:#f0603e}#touch.below .face .south{color:#9aa2f2}#touch.below .face .west{color:#e08fcb}#touch .zone{display:none}#touch.below .zone{position:absolute;left:var(--x);top:calc(var(--u) * 87);display:block;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;transform:translate(-50%,-50%)}#touch.below .zone:before{content:"";position:absolute;inset:0;width:calc(var(--u) * 15.2);height:calc(var(--u) * 15.2);margin:auto;border:1.5px solid var(--line);border-radius:50%}#touch .zone[data-side=left]{--x: calc(var(--u) * 27)}#touch .zone[data-side=right]{--x: calc(100cqw - var(--u) * 27)}#touch .stick{position:absolute;width:calc(var(--u) * 29);height:calc(var(--u) * 29);border:1.5px solid var(--line);border-radius:50%;background:var(--fill);box-shadow:var(--glow);transform:translate(-50%,-50%);pointer-events:none}#touch .knob{position:absolute;top:50%;left:50%;width:calc(var(--u) * 14.5);height:calc(var(--u) * 14.5);margin:calc(var(--u) * -7.25);border-radius:50%;background:var(--held)}#touch.below .stick{width:calc(var(--u) * 26);height:calc(var(--u) * 26);background:#ffffff0d}#touch.below .knob{width:calc(var(--u) * 12);height:calc(var(--u) * 12);margin:calc(var(--u) * -6);background:#fff6}#touch .stick[data-click=true]{border-color:#78aafff2;background:#4682ff52}#touch.below #system:not([hidden]){position:absolute;top:calc(var(--u) * 121);left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;padding:0 calc(var(--u) * 15.5);transform:translateY(-50%)}#touch.below #system button{color:var(--ink)}#touch.below #share-button{grid-column:1}#touch.below #ps-button{grid-column:2}#touch.below #options-button{grid-column:3}@media (pointer: coarse){button:not(.icon):not(.clip),a.button:not(.icon){min-height:40px;padding:9px 14px;font-size:14px}button.icon,a.icon{width:44px;height:44px}}