:root{--bg:#1a1a2e;--panel:#16213e;--accent:#0f4c75;--accent-bright:#3282b8;--text:#eee;--muted:#8a93a6;--on:#2e7d32;--rec:#c62828;--stop:#d32f2f;--warn:#ef6c00;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{background:var(--accent);color:#fff;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;border-radius:8px;padding:10px 16px;font-size:15px}button:hover:not(:disabled){background:var(--accent-bright)}button:disabled{color:#777;cursor:not-allowed;background:#333}button.primary{background:var(--accent-bright)}button.secondary{background:#444}button.big{padding:16px 40px;font-size:20px}.centered{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;max-width:480px;min-height:100%;margin:0 auto;padding:24px;display:flex}.error-text{color:#ff8a80}.teleop{min-height:100%;padding:8px;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));grid-template:"status status""banner banner""video video"minmax(0,1fr)"stick buttons""gamepad gamepad"/1fr 1fr;gap:8px;display:grid}@media (orientation:landscape){.teleop{grid-template:"status status status""banner banner banner""stick video buttons"minmax(0,1fr)"gamepad gamepad gamepad"/minmax(180px,1fr) minmax(0,2.4fr) minmax(200px,1fr);height:100%}}@media (orientation:landscape) and (max-height:600px){.teleop{grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}.gamepad-area{display:none}}@media (orientation:portrait) and (max-width:600px){.gamepad-area{display:none}}.status{flex-wrap:wrap;grid-area:status;align-items:center;gap:6px;display:flex}.status .spacer{flex:1}.status button{padding:6px 14px}.pill{color:var(--muted);letter-spacing:.03em;background:#2a2f45;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:600}.pill.on{background:var(--on);color:#fff}.pill.rec{background:var(--rec);color:#fff}.pill.warn{background:var(--warn);color:#fff}.pill.conn-connected{background:var(--on);color:#fff}.pill.conn-connecting,.pill.conn-reconnecting{background:var(--warn);color:#fff}.menu{position:relative}.menu summary{cursor:pointer;padding:0 6px;font-size:22px;list-style:none}.menu summary::-webkit-details-marker{display:none}.menu-body{z-index:10;background:var(--panel);border:1px solid #333;border-radius:8px;flex-direction:column;gap:8px;min-width:200px;padding:12px;font-size:14px;display:flex;position:absolute;top:32px;right:0}.banners{flex-direction:column;grid-area:banner;gap:6px;display:flex}.banner{color:#ffe082;background:#3a3200;border-radius:8px;padding:8px 12px;font-size:14px}.banner.error{color:#ff8a80;background:#4a1414}.video{background:#000;border-radius:8px;grid-area:video;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.video canvas{object-fit:contain;width:100%;height:100%;max-height:60vh;display:block}@media (orientation:landscape){.video canvas{max-height:none}}.video-placeholder{color:var(--muted);pointer-events:none;justify-content:center;align-items:center;font-size:15px;display:flex;position:absolute;inset:0}.video-fullscreen{opacity:.7;padding:4px 10px;position:absolute;bottom:8px;right:8px}.stick-area{grid-area:stick;justify-content:center;align-items:center;min-height:0;display:flex}.joystick{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle,#24304f 0%,#1b2440 70%);border:3px solid #2f3b5c;border-radius:50%;justify-content:center;align-items:center;width:min(100%,240px);transition:border-color .15s;display:flex;position:relative}@media (orientation:landscape) and (max-height:600px){.joystick{width:min(100%,70vh)}}.joystick.held{border-color:var(--warn)}.joystick.held.motion{border-color:#4caf50;box-shadow:0 0 24px #4caf5066}.joystick.disabled{opacity:.4}.joystick-ring{pointer-events:none;border:1px dashed #3d4a70;border-radius:50%;position:absolute;inset:15%}.joystick-knob{aspect-ratio:1;background:var(--accent-bright);pointer-events:none;border-radius:50%;width:30%;box-shadow:0 2px 8px #00000080}.joystick.held .joystick-knob{background:#64b5f6}.joystick-label{letter-spacing:.08em;color:var(--muted);pointer-events:none;font-size:11px;font-weight:700;position:absolute;bottom:10%}.button-area{flex-direction:column;grid-area:buttons;justify-content:center;gap:8px;min-height:0;display:flex}.button-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.button-grid button{min-height:48px;padding:12px 6px;font-size:14px}button.toggle.on{background:var(--on)}button.hold{touch-action:none;background:#6a4c00}button.hold.active{background:#c79100}button.hold:disabled,button.stop:disabled{opacity:.35;color:#fff}button.stop{background:var(--stop);letter-spacing:.1em;touch-action:none;min-height:64px;padding:16px;font-size:22px;font-weight:800}button.stop:hover:not(:disabled){background:#e53935}button.stop.latched{background:#7f0000;font-size:14px}.gamepad-area{grid-area:gamepad}.gamepad-panel{background:var(--panel);border-radius:8px;padding:12px 16px}.gamepad-panel h3{color:#bbe1fa;margin:0 0 8px}.gamepad-panel .raw{color:var(--muted);font-family:ui-monospace,monospace;font-size:12px}.hint{color:var(--muted);font-size:12px}.mapping-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:12px;display:grid}.mapping h4{margin:8px 0}.bind{align-items:center;gap:10px;margin-bottom:6px;display:flex}.bind button{min-width:140px;padding:6px 10px;font-size:12px}.bind button.binding{background:var(--accent-bright)}.bind span{color:var(--muted);font-size:12px}.invert{color:var(--muted);align-items:center;gap:8px;margin:0 0 8px 10px;font-size:12px;display:flex}