:root{color-scheme:dark;font:15px system-ui,sans-serif;background:#10151e;color:#e6edf8}*{box-sizing:border-box}body{margin:0}header{padding:28px 5vw;border-bottom:1px solid #2a3445;background:#151d29}header strong{font-size:26px}header span{font-size:11px;letter-spacing:2px;margin-left:20px;color:#7bcbb8}header p{margin:8px 0 0;color:#9faec3}main{max-width:1250px;margin:auto;padding:28px}h1{margin-top:0;font-size:24px}section{border:1px solid #2a3445;border-radius:14px;background:#151d29;padding:24px}#connection{max-width:760px;margin:auto}p{line-height:1.6}label{display:block;margin:14px 0;color:#bac9dc}input,textarea,select,button{font:inherit;border-radius:7px;border:1px solid #3d4b61;padding:10px;background:#10151e;color:#e6edf8}input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:7px}button{cursor:pointer;background:#244f45;border-color:#3c8d78;margin:5px 0}button:hover{filter:brightness(1.2)}button:disabled{opacity:.45;cursor:default}.row{display:flex;gap:18px}.row>*{flex:1;min-width:0}.inline{display:flex;align-items:center;gap:8px}details{margin:18px 0}summary{cursor:pointer}.import{border:1px dashed #4c6b80;padding:12px;border-radius:8px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.toolbar label{margin:5px 0}.toolbar input[type=number]{width:100px}#stage{margin:16px 0;background:#05080d;display:flex;align-items:center;justify-content:center;min-height:220px}video{display:block;width:100%;max-height:72vh;object-fit:contain;outline:none}video:focus{outline:2px solid #63bca4}#stage:fullscreen{width:100vw;height:100vh}#stage:fullscreen video{width:100%;height:100%;max-height:none}.hint,footer{color:#9faec3;font-size:13px}footer{margin-top:28px;text-align:center;line-height:1.8}#status{padding:10px 0;color:#8bdbc4}#permission{font-size:13px}#metrics{font-variant-numeric:tabular-nums;color:#8bdbc4}[hidden]{display:none!important}@media(max-width:650px){main{padding:14px}section{padding:16px}.row{display:block}header span{display:block;margin:8px 0 0}}

/* The toolbar overlays the video, so hiding it never resizes the remote screen. */
body.session{overflow:hidden;background:#05080d}
body.session>header,body.session footer,body.session #status,body.session #connection{display:none}
body.session main{width:100%;max-width:none;height:100dvh;margin:0;padding:0}
body.session #remote,#remote:fullscreen{position:relative;display:flex;flex-direction:column;width:100%;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#05080d;overflow:hidden}
.session-toolbar{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:42px;padding:4px 8px;background:#151d29;overflow-x:auto}
.session-toolbar button{flex:none;white-space:nowrap;margin:0;padding:6px 10px;font-size:13px;line-height:20px;border-radius:5px}
.session-toolbar button[aria-pressed=true]{background:#35745f;border-color:#85d4b8}
body.session #stage,#remote:fullscreen #stage{flex:1;min-height:0;width:100%;margin:0;overflow:hidden}
body.session video,#remote:fullscreen video{width:100%;height:100%;max-height:none;object-fit:contain;outline:none}
body.session .session-toolbar{position:absolute;z-index:10;top:0;left:0;right:0;transform:translateY(-100%);pointer-events:none;transition:transform .18s ease}
body.session.toolbar-visible .session-toolbar{transform:translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){body.session .session-toolbar{transition:none}}

#machines{width:100%;padding:6px;min-height:170px;background:#10151e}
#machines option{padding:12px;border-radius:5px}
#machines option:checked{background:#244f45;color:#e6edf8}
#machines option[data-presence=available]{color:#8bdbc4}
#machines option[data-presence=busy]{color:#f2cb78}
#machines option[data-presence=offline]{color:#9faec3}
#machines option[data-presence=invalid],#machines option[data-presence=unknown],#machines option[data-presence=unsupported]{color:#e8b1a8}
#machine-actions{display:flex;gap:12px;align-items:flex-end;margin:12px 0 20px}
#machine-actions label{flex:1;margin:0}
.machine-buttons{display:flex;gap:8px}
#remove-machine{background:#382329;border-color:#70404a}
#connect{min-width:150px}
@media(max-width:650px){#machine-actions{display:block}.machine-buttons{margin-top:8px}}

header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.language-picker{display:flex;align-items:center;gap:10px;margin:0}
.language-picker span{font-size:13px;letter-spacing:0;margin:0;color:#bac9dc}
.language-picker select{font-size:13px;max-width:240px}
.language-picker .language-icon{display:inline-flex;width:28px;height:20px;margin:0;flex:none;color:#a9d7cd}
.language-icon>span,.language-icon svg{display:block;width:28px;height:20px;margin:0;border-radius:3px;overflow:hidden}
#manual-fields{margin:0;padding:0;border:0;min-width:0}

.mobile-input{position:absolute;bottom:0;left:0;width:1px!important;height:1px;min-height:0;margin:0!important;padding:0;border:0;opacity:.01;font-size:16px;pointer-events:none;resize:none}

body.session #stage{touch-action:none}
#gesture-hint{position:absolute;z-index:20;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 18px;border-radius:9px;background:#15202eed;border:1px solid #527565;color:#e6edf8;font-size:14px;line-height:1.5;text-align:center;pointer-events:none}
.virtual-gamepad{--pad-size:clamp(90px,17vw,128px);position:absolute;inset:0;z-index:5;pointer-events:none;user-select:none;-webkit-user-select:none}
.vpad-group,.vpad-stick,.vpad-close{position:absolute}
.vpad-button,.vpad-close,.vpad-stick{pointer-events:auto;touch-action:none;-webkit-touch-callout:none}
.vpad-button,.vpad-close{border:1px solid #d5e4f77a;background:#162637e8;color:#fff;box-shadow:0 2px 10px #0005;margin:0}
.vpad-button{width:44px;height:44px;padding:0;border-radius:50%;font-size:15px;font-weight:600}
.vpad-button.pressed{background:#73d8adbd;border-color:#d8ffef;transform:scale(.94)}
.vpad-stick{width:var(--pad-size);height:var(--pad-size);border:2px solid #e2edff73;border-radius:50%;background:#16263766;box-shadow:inset 0 0 25px #0005}
.vpad-knob{position:absolute;left:50%;top:50%;width:42%;height:42%;border-radius:50%;border:1px solid #e3edff9c;background:#bdcfe58c;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)))}
.vpad-stick-left{left:max(18px,env(safe-area-inset-left));bottom:26px}
.vpad-stick-right{right:max(18px,env(safe-area-inset-right));bottom:26px}
.vpad-shoulders-left{left:max(18px,env(safe-area-inset-left));bottom:calc(var(--pad-size) + 190px);display:flex;gap:10px}
.vpad-shoulders-right{right:max(18px,env(safe-area-inset-right));bottom:calc(var(--pad-size) + 190px);display:flex;gap:10px}
.vpad-shoulders-left button,.vpad-shoulders-right button{width:54px;height:36px;border-radius:12px}
.vpad-face,.vpad-dpad{width:134px;height:134px;bottom:calc(var(--pad-size) + 40px);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr)}
.vpad-face{right:max(15px,env(safe-area-inset-right))}.vpad-dpad{left:max(15px,env(safe-area-inset-left))}
.vpad-face button:nth-child(1),.vpad-dpad button:nth-child(1){grid-area:1/2}.vpad-face button:nth-child(2),.vpad-dpad button:nth-child(2){grid-area:2/1}.vpad-face button:nth-child(3),.vpad-dpad button:nth-child(3){grid-area:2/3}.vpad-face button:nth-child(4),.vpad-dpad button:nth-child(4){grid-area:3/2}
.vpad-a{color:#86e5a6}.vpad-b{color:#ff9d99}.vpad-x{color:#96c7ff}.vpad-y{color:#ffe99a}
.vpad-center{left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:8px}
.vpad-center button{width:48px;height:32px;font-size:10px;border-radius:12px}
.vpad-stick-clicks{left:50%;bottom:68px;transform:translateX(-50%);display:flex;gap:10px}
.vpad-stick-clicks button{width:38px;height:30px;font-size:12px;border-radius:10px}
.vpad-close{left:50%;top:max(54px,env(safe-area-inset-top));transform:translateX(-50%);padding:6px 12px;border-radius:16px;font-size:12px}
@media(orientation:landscape) and (max-height:550px){
 .virtual-gamepad{--pad-size:100px}
 .vpad-face,.vpad-dpad{bottom:38px}
 .vpad-face{right:142px}.vpad-dpad{left:142px}
 .vpad-shoulders-left,.vpad-shoulders-right{bottom:158px}
 .vpad-center{bottom:14px}.vpad-stick-clicks{bottom:58px}
 .vpad-close{top:52px}
}

.brand-icon{width:40px;height:40px;object-fit:contain;vertical-align:middle;margin-right:10px}


.web-version{font-size:12px;color:#9faec3;white-space:nowrap}header .web-version{margin-left:14px}.session-toolbar .web-version{margin-left:auto}