:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.container{display:grid;grid-template-areas:"robot-view ide" "robot-view ide" "controls terminal";grid-template-columns:2.5fr 1fr;grid-template-rows:1fr 1fr .5fr;height:100vh;width:100vw;gap:12px;padding:16px;box-sizing:border-box;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.container.both-minimized{grid-template-areas:"robot-view" "robot-view" "controls";grid-template-columns:1fr;grid-template-rows:2fr 2fr 1fr}.floating-tab{position:fixed;top:20px;right:20px;z-index:1000;background:linear-gradient(145deg,#2a2a2e,#3a3a3e);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 16px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;box-shadow:0 4px 12px #0000004d;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.floating-tab:hover{background:linear-gradient(145deg,#3a3a3e,#4a4a4e);transform:translateY(-2px);box-shadow:0 6px 16px #0006}.robot-view{grid-area:robot-view;background:linear-gradient(145deg,#1a1a1e,#2a2a2e);border-radius:12px;padding:16px;overflow:hidden;min-height:0;min-width:0}.ide{grid-area:ide;background:linear-gradient(145deg,#2a2a2e,#3a3a3e);border-radius:12px;padding:16px;display:flex;flex-direction:column;overflow:hidden;min-height:0;min-width:0}.ide-header{display:flex;flex-direction:column;margin-bottom:10px}.ide-title-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ide-controls{display:flex;gap:4px}.control-button{width:24px;height:24px;border:none;border-radius:4px;background:#ffffff1a;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:background-color .2s ease}.control-button:hover{background:#fff3}.control-button.close:hover{background:#f44}.ide.minimized{height:auto!important;min-height:60px}.ide.minimized .ide-header{margin-bottom:0}.terminal{grid-area:terminal;background:linear-gradient(145deg,#1a1a1e,#2a2a2e);border-radius:12px;padding:16px;overflow:hidden;min-height:0;min-width:0;display:flex;flex-direction:column}.terminal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.terminal-header h3{margin:0;font-size:16px;font-weight:600;color:#fff}.terminal.minimized{height:auto!important;min-height:60px}.terminal.minimized .terminal-header{margin-bottom:0}.terminal pre{flex:1;margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;line-height:1.4;color:#fff;white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.ide-header h2{margin:0;font-size:18px;font-weight:600;color:#fff;letter-spacing:-.5px}.ide-menu{display:flex;gap:8px}.menu-button{padding:8px 16px;border:1px solid rgba(14,19,41,.1);border-radius:8px;background:#58647b;color:#fff;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-button:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.menu-button:active{background:#ffffff26;transform:translateY(0)}#editor{flex-grow:1;min-height:300px}.run-button{width:120px;margin-top:7%;align-self:start;padding:10px 20px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:linear-gradient(135deg,#b3bec9 0% 100%);color:#000;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 8px #0315204d}.run-button:hover{background:linear-gradient(135deg,#b3bec9 0% 100%);transform:translateY(-1px);box-shadow:0 4px 12px #686e7e66}.run-button:active{transform:translateY(0);box-shadow:0 2px 8px #4a7c4a4d}.terminal{grid-area:terminal;background:linear-gradient(145deg,#1a1a1e,#2a2a2e);border-radius:12px;padding:16px;overflow:auto;max-height:100%;min-height:0;min-width:0}.controls{grid-area:controls;background:linear-gradient(145deg,#2a2a2e,#3a3a3e);border-radius:12px;padding:20px;overflow:hidden;min-height:0;min-width:0}.gamepad-status{margin-bottom:15px;text-align:center}.gamepad-connected{background:#2d5a2d;color:#90ee90;padding:8px 12px;border-radius:6px;font-size:12px;font-weight:700;border:1px solid #4a7c4a}.gamepad-optional{text-align:center;padding:8px 12px;border-radius:6px;font-size:12px}.controller-layout{display:flex;flex-direction:row;gap:70px;align-items:left;justify-content:left}.gamepad-section{display:flex;align-items:center;justify-content:center;min-width:120px;margin-right:40px}.gamepad-section{display:flex;align-items:center;justify-content:center;min-width:120px;margin-right:10%}.joystick-container,.dpad-container{text-align:center}.joystick-container h3,.dpad-container h3{margin:0 0 12px;font-size:13px;font-weight:600;color:#fff;letter-spacing:-.3px}.joystick{position:relative;width:80px;height:80px;background:linear-gradient(145deg,#2a2a2e,#3a3a3e);border-radius:50%;border:2px solid rgba(255,255,255,.1);display:grid;grid-template-areas:". up ." "left . right" ". down .";gap:3px;padding:6px;box-shadow:0 4px 12px #0000004d}.joystick-button{width:25px;height:25px;border:none;border-radius:6px;background:linear-gradient(145deg,#4a4a4e,#5a5a5e);color:#fff;font-size:10px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1;box-shadow:0 2px 4px #0003}.joystick-button:hover{background:linear-gradient(145deg,#5a5a5e,#6a6a6e);transform:scale(1.05);box-shadow:0 4px 8px #0000004d}.joystick-button:active{background:linear-gradient(145deg,#6a6a6e,#7a7a7e);transform:scale(.95);box-shadow:0 1px 2px #0003}.joystick-button.pressed{background:linear-gradient(145deg,#578cb5,#96b4c9);color:#fff;box-shadow:0 0 12px #6aa6bc99;transform:scale(1.05)}.joystick-button.up{grid-area:up}.joystick-button.down{grid-area:down}.joystick-button.left{grid-area:left}.joystick-button.right{grid-area:right}.joystick-button span,.dpad-button span{font-size:6px;margin-top:1px;font-weight:400}.dpad{position:relative;width:80px;height:80px;background:linear-gradient(145deg,#2a2a2e,#3a3a3e);border-radius:12px;border:2px solid rgba(255,255,255,.1);display:grid;grid-template-areas:". up ." "left . right" ". down .";gap:3px;padding:6px;box-shadow:0 4px 12px #0000004d}.dpad-button{width:25px;height:25px;border:none;border-radius:6px;background:linear-gradient(145deg,#4a4a4e,#5a5a5e);color:#fff;font-size:10px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1;box-shadow:0 2px 4px #0003}.dpad-button:hover{background:linear-gradient(145deg,#5a5a5e,#6a6a6e);transform:scale(1.05);box-shadow:0 4px 8px #0000004d}.dpad-button:active{background:linear-gradient(145deg,#6a6a6e,#7a7a7e);transform:scale(.95);box-shadow:0 1px 2px #0003}.dpad-button.pressed{background:linear-gradient(145deg,#578cb5,#96b4c9);color:#fff;box-shadow:0 0 12px #6aa6bc99;transform:scale(1.05)}.dpad-button.up{grid-area:up}.dpad-button.down{grid-area:down}.dpad-button.left{grid-area:left}.dpad-button.right{grid-area:right}.ws-status-section{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;background:#0003;border-radius:8px;min-width:140px}.ws-status-indicator{font-size:12px;font-weight:600;padding:4px 10px;border-radius:4px;text-align:center}.ws-status-indicator.connected{color:#90ee90;background:#2d5a2d80}.ws-status-indicator.connecting{color:gold;background:#5a5a2d80}.ws-status-indicator.disconnected,.ws-status-indicator.error{color:#ff6b6b;background:#5a2d2d80}.ws-button{padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:linear-gradient(135deg,#4a4a4e,#5a5a5e);color:#fff;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;width:100%}.ws-button:hover{background:linear-gradient(135deg,#5a5a5e,#6a6a6e)}.ws-button.connect{background:linear-gradient(135deg,#2d5a2d,#4a7c4a)}.ws-button.connect:hover{background:linear-gradient(135deg,#3d6a3d,#5a8c5a)}.ws-button.disconnect{background:linear-gradient(135deg,#5a2d2d,#7c4a4a)}.ws-button.disconnect:hover{background:linear-gradient(135deg,#6a3d3d,#8c5a5a)}.menu-button.server-upload{background:linear-gradient(135deg,#4a6a8a,#6a8aaa)}.menu-button.server-upload:hover{background:linear-gradient(135deg,#5a7a9a,#7a9aba)}.menu-button.run-robot{background:linear-gradient(135deg,#6a4a8a,#8a6aaa)}.menu-button.run-robot:hover{background:linear-gradient(135deg,#7a5a9a,#9a7aba)}.menu-button:disabled{opacity:.5;cursor:not-allowed}.ws-config{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.ws-config input{width:100%;padding:6px 10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:11px;text-align:center}.ws-config input:disabled{opacity:.5}.ws-config label{font-size:11px;color:#aaa;font-weight:500}.menu-button.execute-script{background:linear-gradient(135deg,#2d5a2d,#4a7c4a)}.menu-button.execute-script:hover:not(:disabled){background:linear-gradient(135deg,#3d6a3d,#5a8c5a)}.menu-button.execute-script:disabled{background:linear-gradient(135deg,#3a3a3e,#4a4a4e);opacity:.5;cursor:not-allowed}.script-status{display:inline-flex;align-items:center;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;margin-left:8px}.script-status.downloading{background:#ffd70033;color:gold;border:1px solid rgba(255,215,0,.3)}.script-status.ready{background:#90ee9033;color:#90ee90;border:1px solid rgba(144,238,144,.3)}.script-status.running{background:#6495ed33;color:#6495ed;border:1px solid rgba(100,149,237,.3);animation:pulse 1.5s ease-in-out infinite}.script-status.finished{background:#90ee9033;color:#90ee90;border:1px solid rgba(144,238,144,.3)}.script-status.error{background:#ff6b6b33;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}