.video-container{flex:1;width:100%;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;position:relative}.video-element{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#000}._pad_1c55w_1{border-radius:50%;background:radial-gradient(100% 100% at 50% 50%,rgba(234,179,8,.12) 0%,rgba(234,179,8,.04) 60%,transparent 100%);border:2px solid rgba(234,179,8,.3);position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translate3d(0,0,0);transform:translateZ(0);transition:box-shadow .2s ease,opacity .2s ease;box-shadow:0 4px 16px #0000004d,inset 0 0 8px #ffffff0d}._pad_1c55w_1._disabled_1c55w_26{opacity:.4;cursor:not-allowed}._pad_1c55w_1:not(._disabled_1c55w_26){cursor:pointer}._pad_1c55w_1._active_1c55w_35{box-shadow:0 0 20px #eab30840,inset 0 0 20px #eab3081a;border-color:#eab30873}._crosshairVertical_1c55w_42{position:absolute;left:50%;top:50%;background:#eab3082e;width:1px;height:60%;transform:translate(-50%,-50%)}._crosshairHorizontal_1c55w_52{position:absolute;left:50%;top:50%;background:#eab3082e;height:1px;width:60%;transform:translate(-50%,-50%)}._knob_1c55w_62{position:absolute;left:50%;top:50%;border-radius:50%;background:radial-gradient(100% 100% at 30% 30%,#eab30866,#eab30833 40%,#eab3081a);border:1px solid rgba(234,179,8,.4);box-shadow:0 4px 12px #0000004d,inset 0 1px #eab30826;transition:background .15s ease,border .15s ease,box-shadow .15s ease;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}._knob_1c55w_62._active_1c55w_35{background:radial-gradient(100% 100% at 30% 30%,#eab3088c,#eab3084d 40%,#eab30826);border:2px solid rgba(234,179,8,.5);box-shadow:0 8px 24px #0006,inset 0 2px #eab30833,0 0 16px #eab30826}.control-panel{position:absolute;bottom:0;left:0;right:0;top:0;display:flex;pointer-events:none;z-index:10}.control-panel>*{pointer-events:auto}.mode-sidebar{position:absolute;top:0;left:0;display:flex;flex-direction:row;gap:4px;padding:8px;background:#000000bf;border:1px solid rgba(255,255,255,.1);border-radius:0 0 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20}.sidebar-spacer{display:none}.mode-button{display:flex;flex-direction:row;align-items:center;gap:6px;padding:10px 14px;background:transparent;border:none;border-radius:8px;color:#ffffff80;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.mode-button:hover{color:#fffc;background:#ffffff0d}.mode-button.mode-active{background:#3b82f633;color:#3b82f6;box-shadow:0 2px 8px #3b82f626}.default-pose-button{display:flex;align-items:center;justify-content:center;padding:12px 14px;background:#3b82f626;border:2px solid rgba(59,130,246,.3);border-radius:8px;color:#3b82f6;font-size:16px;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #3b82f633;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.default-pose-button:hover{background:#3b82f640;border-color:#3b82f680}.default-pose-button:active{transform:scale(.95)}.joysticks-container{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;padding:16px;pointer-events:none}.joysticks-container>*{pointer-events:auto}.joysticks-container.single-joystick{justify-content:center;padding-left:16px;padding-bottom:40px}.joysticks-container.single-joystick .arm-header{order:1}.arm-control{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;background:transparent;border:none}.arm-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.gripper-button{display:flex;align-items:center;gap:8px;padding:8px 20px;background:#ffffff14;border:1.5px solid rgba(255,255,255,.2);border-radius:10px;color:#ffffffd9;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .2s;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.gripper-button:hover{background:#ffffff24;border-color:#ffffff59}.gripper-button:active{transform:scale(.96)}.gripper-button.gripper-closed{background:#f59e0b33;border-color:#f59e0b80;color:#f59e0b}.gripper-button.gripper-closed:hover{background:#f59e0b4d;border-color:#f59e0ba6}@media (max-width: 900px){.mode-sidebar{padding:6px;gap:2px}.mode-button{padding:8px 10px;font-size:10px}.joysticks-container{padding:12px}.joysticks-container.single-joystick{padding-left:12px}.arm-header{font-size:11px}}@media (max-width: 500px){.joysticks-container{padding:8px}.gripper-button{padding:6px 14px;font-size:12px}}@media (max-height: 500px){.mode-sidebar{padding:4px;gap:2px}.mode-button,.joysticks-container{padding:8px}.gripper-button{padding:6px 14px;font-size:12px}}@supports (padding: env(safe-area-inset-bottom)){.joysticks-container{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.mode-sidebar{padding-top:calc(8px + env(safe-area-inset-top));padding-left:calc(8px + env(safe-area-inset-left))}}.status-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#000000e6;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#fffc}.status-indicator{width:8px;height:8px;border-radius:50%;transition:background .3s}.status-text{font-family:monospace}.connecting-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000d9;z-index:10}.connecting-card{display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px 40px;max-width:380px;text-align:center}.connecting-label{font-size:16px;font-weight:500;color:#ffffffe6}.connecting-detail{margin:0;font-size:13px;color:#ffffff73;line-height:1.5}.spinner{width:48px;height:48px;border-radius:50%;border:3px solid rgba(255,255,255,.08);border-top-color:#10b981cc;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.connecting-emoji{font-size:40px;line-height:1}.reconnect-button{display:flex;align-items:center;gap:8px;padding:10px 24px;background:#ffffff0f;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fffc;font-size:14px;font-weight:500;transition:all .2s}.reconnect-button:hover{background:#ffffff1a;border-color:#ffffff40}.media-gate{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}.media-gate-card{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:440px;padding:48px 40px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:16px}.media-gate-icon-row{display:flex;gap:16px;color:#ffffffb3}.media-gate-title{margin:0;font-size:20px;font-weight:600;color:#fff;text-align:center}.media-gate-description{margin:0;font-size:14px;color:#ffffff8c;text-align:center;line-height:1.5}.media-gate-button{padding:12px 32px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:8px;color:#10b981;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s}.media-gate-button:hover:not(:disabled){background:#10b98140;border-color:#10b98180}.media-gate-button:disabled{opacity:.5;cursor:not-allowed}.media-gate-button.test-media{display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff0d;border-color:#ffffff26;color:#fff9}.media-gate-button.test-media:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff40;color:#fffc}.media-gate-error{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:#ef44441f;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:13px;line-height:1.4}.media-gate-error svg{flex-shrink:0;margin-top:1px}.media-gate-spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(16,185,129,.2);border-top-color:#10b981;animation:media-gate-spin .8s linear infinite;vertical-align:middle;margin-right:8px}@keyframes media-gate-spin{to{transform:rotate(360deg)}}.app{width:100%;height:100%;display:flex;flex-direction:column;background:#000;position:relative;overflow:hidden}.main-content{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.top-right-buttons{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:20}.fullscreen-button,.disconnect-button{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#000000b3;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fffc;font-size:13px;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:all .2s}.fullscreen-button:hover,.disconnect-button:hover{background:#000000d9;border-color:#ffffff4d;color:#fff}.disconnect-button{border-color:#ef44444d;color:#ef4444cc}.disconnect-button:hover{background:#ef444426;border-color:#ef444480;color:#ef4444}@supports (padding: env(safe-area-inset-top)){.top-right-buttons{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;color:#fff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#root{width:100vw;height:100vh;overflow:hidden}button{font-family:inherit;cursor:pointer}input{font-family:inherit}
