.app-container{width:100dvw;height:100dvh;display:flex;align-items:center;justify-content:center;padding:clamp(.5rem,1.5dvmin,1.5rem);box-sizing:border-box;overflow:hidden}.orientation-warning{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);padding:clamp(1rem,3dvmin,2rem);box-sizing:border-box}.orientation-content{text-align:center;color:#fff;max-width:min(90%,400px)}.orientation-content-icons{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3dvmin,1.5rem);margin-bottom:clamp(1rem,3dvmin,1.5rem)}.orientation-content-icons .rotate-icon{animation:rotate-phone 4s linear infinite}@keyframes rotate-phone{0%,to{transform:rotate(45deg)}50%{transform:rotate(225deg)}}.orientation-content h2{font-size:clamp(1.5rem,4dvmin,2.5rem);margin-bottom:clamp(.5rem,2dvmin,1rem);font-weight:600;color:#00d4ff}.orientation-content p{font-size:clamp(.875rem,2.5dvmin,1.25rem);color:#ffffffb3;line-height:1.5}.remote-control{width:100%;height:100%;max-height:100dvh;max-width:min(100%,calc(100dvh * 16 / 9));margin:0 auto;container-type:size;background:linear-gradient(135deg,#222,#2a2a2a,#222);border-radius:clamp(.75rem,1.5dvmin,2rem);border:clamp(2px,.3dvmin,3px) solid rgba(255,255,255,.05);box-shadow:0 25px 80px #000c,inset 0 2px 8px #ffffff0d,inset 0 -2px 8px #00000080;display:grid;grid-template-rows:auto 1fr;padding:clamp(.5rem,1.5dvmin,1.25rem);gap:clamp(.4rem,1dvmin,1rem);overflow:hidden;position:relative;box-sizing:border-box}.remote-control:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.01) 2px,rgba(255,255,255,.01) 4px);pointer-events:none;border-radius:inherit;opacity:.3}.remote-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.4rem,1dvmin,.75rem);min-height:clamp(40px,8dvh,70px);padding:clamp(.3rem,1dvmin,.6rem);background:#0003;border-radius:clamp(.4rem,1dvmin,.75rem);border:1px solid rgba(255,255,255,.03);box-sizing:border-box}.header-left{display:flex;align-items:center;justify-content:flex-start;gap:clamp(.3rem,.8dvmin,.5rem);flex-direction:column;min-width:0}.mode-toggle-btn{padding:clamp(.3rem,1dvmin,.5rem) clamp(.5rem,1.5dvmin,.75rem);background:linear-gradient(135deg,#00b4d8,#0096c7);border:clamp(1px,.2dvmin,2px) solid rgba(255,255,255,.2);border-radius:clamp(.3rem,1dvmin,.5rem);color:#fff;font-weight:600;font-size:clamp(.625rem,1.5dvmin,.875rem);cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #00b4d84d,inset 0 1px 2px #fff3;white-space:nowrap}.mode-toggle-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00b4d866,inset 0 1px 2px #ffffff4d}.mode-toggle-btn:active{transform:translateY(0);box-shadow:0 2px 8px #00b4d84d,inset 0 1px 2px #0003}.header-center{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}.header-right{display:flex;align-items:center;justify-content:flex-end}.remote-monitor{display:none}.remote-body{display:flex;gap:clamp(.5rem,1.5dvmin,1.5rem);min-height:0;height:100%;width:100%;flex:1;container-type:inline-size;align-items:stretch;justify-items:stretch}.movement-section{display:contents}.btn-control{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:clamp(.5rem,1.5dvmin,1rem);font-weight:700;transition:all .15s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0009,inset 0 1px 3px #ffffff26,inset 0 -1px 3px #0000004d;color:#fff;cursor:pointer;border:clamp(1px,.2dvmin,2px) solid rgba(255,255,255,.1);position:relative;overflow:hidden;font-size:clamp(.625rem,1.8dvmin,1rem);padding:clamp(.3rem,1dvmin,.75rem);touch-action:none;text-shadow:0 1px 3px rgba(0,0,0,.6);background:none;width:clamp(35px,6dvmin,60px);height:clamp(35px,6dvmin,60px);aspect-ratio:1;min-width:0;min-height:0}.remote-control *,.remote-control>*{box-sizing:border-box}.btn-control:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(to bottom,rgba(255,255,255,.2) 0%,transparent 100%);border-radius:inherit;pointer-events:none}.btn-control:active:not(:disabled){transform:translateY(3px) scale(.96);box-shadow:0 2px 8px #00000080,inset 0 3px 8px #00000080,inset 0 -1px 2px #ffffff1a}.btn-control:disabled{cursor:not-allowed;opacity:.3;filter:grayscale(100%) brightness(.5);pointer-events:none}@media (max-width: 768px) and (max-height: 600px){.remote-control{aspect-ratio:14 / 9}.remote-header{min-height:clamp(35px,7dvh,60px)}}@media (min-aspect-ratio: 21/9){.remote-control{aspect-ratio:20 / 9;max-width:90dvw}}@media (orientation: landscape){.remote-control{width:min(100%,100dvh * 16 / 9);height:min(100%,100dvw * 9 / 16)}}@media (max-width: 400px){.remote-control{aspect-ratio:9 / 16}}@media (max-height: 500px){.remote-body{gap:clamp(.3rem,1dvmin,.75rem)}.movement-panel{padding:clamp(.5rem,1dvmin,1rem);gap:clamp(.3rem,1dvmin,.75rem)}.btn-gripper-open,.btn-gripper-close{min-height:clamp(35px,6dvh,60px);max-height:clamp(50px,10dvh,80px)}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){.remote-body{gap:clamp(.75rem,2dvmin,1.5rem)}}.connection-panel{display:flex;align-items:center;justify-content:center}.connection-round{width:clamp(40px,7dvmin,70px);height:clamp(40px,7dvmin,70px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:radial-gradient(circle at 30% 30%,#333,#1a1a1a);border:clamp(2px,.3dvmin,3px) solid rgba(255,255,255,.05);box-shadow:0 6px 15px #000000b3,inset 0 1px 3px #ffffff0d,inset 0 -2px 5px #00000080;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;flex-shrink:0}.connection-round:after{content:"";position:absolute;top:15%;right:15%;bottom:15%;left:15%;border-radius:50%;transition:all .3s ease}.connection-round.disconnected:after{background:radial-gradient(circle at 30% 30%,#ff6b6b,#e63946);box-shadow:0 0 15px #e63946cc,inset 0 -2px 4px #0006;animation:pulse 2s ease-in-out infinite}.connection-round.connected:after{background:radial-gradient(circle at 30% 30%,#51cf66,#06d6a0);box-shadow:0 0 20px #06d6a0,inset 0 -2px 4px #0000004d;animation:glow 2s ease-in-out infinite}.connection-round.connecting:after{background:radial-gradient(circle at 30% 30%,#ffd93d,#f77f00);box-shadow:0 0 20px #f77f00e6,inset 0 -2px 4px #0000004d;animation:pulse-fast .8s ease-in-out infinite}.connection-round.error:after{background:radial-gradient(circle at 30% 30%,#ff006e,#d00000);box-shadow:0 0 25px #d00000,inset 0 -2px 4px #0006;animation:blink .5s ease-in-out infinite}.connection-round:disabled{cursor:not-allowed;opacity:.7}.round-icon{color:#fff;font-size:clamp(1.25rem,4dvmin,2.5rem);filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));z-index:1;position:relative}.connection-round:hover:not(:disabled){transform:scale(1.05);box-shadow:0 10px 25px #000c,inset 0 2px 6px #ffffff14}.connection-round:active:not(:disabled){transform:scale(.95) translateY(2px);box-shadow:0 4px 12px #0009,inset 0 3px 8px #0009}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pulse-fast{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}@keyframes glow{0%,to{box-shadow:0 0 20px #06d6a0,inset 0 -2px 4px #0000004d}50%{box-shadow:0 0 30px #06d6a0,inset 0 -2px 4px #0000004d}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:.3}}.speed-panel{background:radial-gradient(circle at 30% 30%,#2a2a2a,#1a1a1a);border-radius:clamp(.5rem,1.2dvmin,1.25rem);padding:clamp(.5rem,1.2dvmin,1.25rem);box-shadow:0 6px 16px #0009,inset 0 2px 6px #ffffff08,inset 0 -2px 8px #00000080;border:clamp(1px,.2dvmin,2px) solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.4rem,1dvmin,.75rem);box-sizing:border-box;min-width:clamp(100px,15dvw,180px);flex-shrink:0}.speed-header{display:flex;align-items:center;gap:clamp(.2rem,.6dvmin,.5rem);opacity:.7}.speed-icon{font-size:clamp(.875rem,2dvmin,1.5rem);color:#00b4d8;filter:drop-shadow(0 0 6px rgba(0,180,216,.6))}.speed-label{font-size:clamp(.5rem,1.5dvmin,.875rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00b4d8;text-shadow:0 0 8px rgba(0,180,216,.5)}.speed-display{font-size:clamp(2rem,5dvmin,4rem);font-weight:900;text-align:center;line-height:1;color:#00b4d8;text-shadow:0 0 15px rgba(0,180,216,.8),0 0 30px rgba(0,180,216,.4),0 2px 4px rgba(0,0,0,.8);font-family:Courier New,monospace;padding:clamp(.3rem,1dvmin,.75rem);background:#0006;border-radius:clamp(.3rem,.8dvmin,.6rem);border:1px solid rgba(0,180,216,.3);min-width:clamp(50px,10dvmin,90px);aspect-ratio:1.5 / 1;display:flex;align-items:center;justify-content:center}.speed-controls{display:flex;gap:clamp(.3rem,.8dvmin,.6rem);width:100%}.btn-speed-up,.btn-speed-down{flex:1;min-height:clamp(30px,5dvmin,50px);font-size:clamp(.875rem,2.5dvmin,1.75rem);font-weight:900;aspect-ratio:1;min-width:clamp(30px,5dvmin,50px)}.btn-speed-up{background:linear-gradient(135deg,#06d6a0,#04a777)}.btn-speed-up:hover:not(:disabled){background:linear-gradient(135deg,#04a777,#038866);box-shadow:0 8px 20px #06d6a066,inset 0 2px 4px #fff3,inset 0 -2px 4px #0000004d}.btn-speed-down{background:linear-gradient(135deg,#e63946,#c92a35)}.btn-speed-down:hover:not(:disabled){background:linear-gradient(135deg,#c92a35,#a61e2a);box-shadow:0 8px 20px #e6394666,inset 0 2px 4px #fff3,inset 0 -2px 4px #0000004d}@media (max-aspect-ratio: 1/1){.speed-panel{flex-direction:row;justify-content:space-between}.speed-display{font-size:clamp(1.5rem,4dvmin,3rem)}}@media (max-height: 600px){.speed-display{font-size:clamp(1.5rem,4dvmin,2.5rem);min-width:clamp(40px,8dvmin,70px)}.btn-speed-up,.btn-speed-down{min-height:clamp(25px,4dvmin,40px)}}.movement-panel{background:radial-gradient(circle at 30% 30%,#2a2a2a,#1a1a1a);border-radius:clamp(.75rem,1.5dvmin,1.5rem);padding:clamp(.75rem,1.5dvmin,1.5rem);box-shadow:0 8px 20px #000000b3,inset 0 3px 8px #ffffff08,inset 0 -3px 10px #0009;border:clamp(2px,.3dvmin,3px) solid rgba(255,255,255,.05);width:100%;height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(.5rem,1.5dvmin,1.25rem);box-sizing:border-box;overflow:hidden}.movement-header{display:flex;align-items:center;gap:clamp(.3rem,.8dvmin,.6rem);opacity:.7;flex-shrink:0;width:100%;justify-content:center}.movement-icon{font-size:clamp(.875rem,2dvmin,1.5rem);color:#00b4d8;filter:drop-shadow(0 0 6px rgba(0,180,216,.6))}.movement-label{font-size:clamp(.5rem,1.5dvmin,.875rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00b4d8;text-shadow:0 0 8px rgba(0,180,216,.5)}.movement-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;gap:clamp(.3rem,.8dvmin,.6rem);aspect-ratio:1 / 1;height:min(90%,55dvmin);width:100%;place-self:center}.btn-w,.btn-a,.btn-s,.btn-d{background:linear-gradient(135deg,#3a3a3a,#2a2a2a);font-size:clamp(1rem,3dvmin,2rem);display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:1;place-self:center;max-width:100%;max-height:100%}.btn-gripper-open,.btn-gripper-close{background:linear-gradient(135deg,#3a3a3a,#2a2a2a);display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:1;place-self:center;max-width:100%;max-height:100%}.btn-w{grid-column:1 / span 2;grid-row:1 / span 2}.btn-a{grid-column:4;grid-row:1 / span 4}.btn-s{grid-column:1 / span 2;grid-row:3 / span 2}.btn-d{grid-column:5;grid-row:1 / span 4}.btn-gripper-open{grid-column:3;grid-row:1 / span 1}.btn-gripper-close{grid-column:3;grid-row:2 / span 1}.gripper-button-text{font-size:clamp(.625rem,1.8dvmin,1rem);font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.95}.btn-stop:after{content:"STOP"}.btn-gripper-open{background:linear-gradient(135deg,#06d6a0,#04a777)}.btn-gripper-open:hover:not(:disabled){background:linear-gradient(135deg,#04a777,#038866);box-shadow:0 8px 20px #06d6a066,inset 0 2px 6px #fff3,inset 0 -2px 6px #0006}.btn-gripper-close{background:linear-gradient(135deg,#e63946,#c92a35)}.btn-gripper-close:hover:not(:disabled){background:linear-gradient(135deg,#c92a35,#a61e2a);box-shadow:0 8px 20px #e6394666,inset 0 2px 6px #fff3,inset 0 -2px 6px #0006}.btn-stop{background:linear-gradient(135deg,#e63946,#c92a35);font-size:clamp(.75rem,2dvmin,1.25rem);width:100%;height:100%;font-weight:900;letter-spacing:.05em;box-shadow:0 6px 16px #e6394699,inset 0 1px 4px #fff3,inset 0 -2px 5px #0006;border:clamp(1px,.2dvmin,2px) solid rgba(255,255,255,.15);aspect-ratio:1;place-self:center;grid-row:3 / span 2}.btn-stop:hover:not(:disabled){background:linear-gradient(135deg,#c92a35,#a61e2a);box-shadow:0 8px 20px #e63946b3,inset 0 1px 6px #ffffff40,inset 0 -2px 6px #00000080}.btn-stop:active:not(:disabled){transform:translateY(3px) scale(.95);box-shadow:0 3px 10px #e6394680,inset 0 1px 3px #ffffff26,inset 0 -1px 4px #0006}.btn-w:hover:not(:disabled),.btn-a:hover:not(:disabled),.btn-s:hover:not(:disabled),.btn-d:hover:not(:disabled){background:linear-gradient(135deg,#4a4a4a,#3a3a3a);box-shadow:0 8px 20px #ffffff1a,inset 0 2px 6px #ffffff26,inset 0 -2px 6px #0006}.btn-w:active:not(:disabled),.btn-a:active:not(:disabled),.btn-s:active:not(:disabled),.btn-d:active:not(:disabled){background:linear-gradient(135deg,#2a2a2a,#1a1a1a)}.btn-w:after{content:"▲"}.btn-s:after{content:"▼"}.btn-a:after{content:"◀"}.btn-d:after{content:"▶"}@media (max-aspect-ratio: 1/1){.movement-grid{height:min(70%,35dvmin)}}@media (max-height: 600px){.movement-panel{padding:clamp(.5rem,1dvmin,1rem)}.movement-grid{height:min(85%,50dvmin)}}.command-monitor{background:linear-gradient(145deg,#0d1117,#161b22,#0d1117);border-radius:clamp(.4rem,1dvmin,1rem);padding:clamp(.5rem,1.2dvmin,1.25rem);box-shadow:inset 0 4px 12px #000c,inset 0 -1px 3px #00b4d81a,0 0 25px #00b4d833;border:clamp(1px,.2dvmin,2px) solid rgba(0,180,216,.3);display:flex;gap:clamp(.5rem,1.2dvmin,1.25rem);align-items:center;justify-content:space-between;height:100%;min-height:clamp(50px,8dvh,80px);position:relative;flex:1;min-width:0;box-sizing:border-box}.command-monitor:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,rgba(0,180,216,.03) 0px,rgba(0,180,216,.03) 1px,transparent 1px,transparent 2px);pointer-events:none;border-radius:inherit}.monitor-main{display:flex;align-items:center;gap:clamp(.5rem,1.2dvmin,1.25rem);flex:1;min-width:0}.monitor-icon{font-size:clamp(1.5rem,4dvmin,3.5rem);color:#00b4d8;display:flex;align-items:center;justify-content:center;animation:pulse-icon 2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(0,180,216,.8));flex-shrink:0}@keyframes pulse-icon{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.monitor-content{display:flex;flex-direction:column;gap:clamp(.2rem,.5dvmin,.4rem);flex:1;min-width:0}.monitor-label{font-size:clamp(.4rem,1.2dvmin,.75rem);color:#00b4d899;font-weight:700;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 0 6px rgba(0,180,216,.4)}.monitor-command{font-size:clamp(1rem,3dvmin,2rem);font-weight:900;color:#00b4d8;text-shadow:0 0 15px rgba(0,180,216,.8),0 0 30px rgba(0,180,216,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Courier New,monospace;animation:command-flash .3s ease-out;line-height:1.2}@keyframes command-flash{0%{color:#51cf66;transform:scale(1.05)}to{color:#00b4d8;transform:scale(1)}}.monitor-history{display:flex;flex-direction:column;gap:clamp(.2rem,.6dvmin,.5rem);align-items:flex-end;min-width:clamp(100px,20dvw,200px)}.history-item{font-size:clamp(.5rem,1.5dvmin,.875rem);color:#00b4d8b3;font-weight:600;padding:clamp(.2rem,.5dvmin,.4rem) clamp(.3rem,1dvmin,.75rem);background:#00b4d814;border-radius:clamp(.2rem,.5dvmin,.375rem);border-left:clamp(1px,.2dvmin,2px) solid rgba(0,180,216,.4);white-space:nowrap;text-shadow:0 0 4px rgba(0,180,216,.3);font-family:Courier New,monospace;transition:all .3s ease}@media (max-aspect-ratio: 1/1){.command-monitor{flex-direction:column;gap:clamp(.5rem,1.2dvmin,1.25rem)}.monitor-main{width:100%}.monitor-history{width:100%;flex-direction:row;justify-content:center;min-width:0;flex-wrap:wrap}}@media (max-height: 600px){.command-monitor{padding:clamp(.3rem,.8dvmin,.75rem)}.monitor-icon{font-size:clamp(1.25rem,3dvmin,2.5rem)}.monitor-command{font-size:clamp(.875rem,2.5dvmin,1.5rem)}.history-item{font-size:clamp(.5rem,1.2dvmin,.625rem)}}.mode-selector{display:flex;gap:clamp(.15rem,.4dvmin,.25rem);background:#0000004d;padding:clamp(.15rem,.4dvmin,.25rem);border-radius:clamp(.3rem,.8dvmin,.5rem);border:1px solid rgba(255,255,255,.1);box-sizing:border-box}.mode-btn{padding:clamp(.3rem,1dvmin,.5rem) clamp(.5rem,1.5dvmin,.75rem);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:clamp(.25rem,.7dvmin,.4rem);color:#fff9;font-weight:600;font-size:clamp(.625rem,1.5dvmin,.875rem);cursor:pointer;transition:all .2s ease;white-space:nowrap}.mode-btn:hover:not(:disabled){background:#ffffff1a;color:#ffffffe6;border-color:#fff3}.mode-btn.active{background:linear-gradient(135deg,#00b4d8,#0096c7);border-color:#ffffff4d;color:#fff;box-shadow:0 4px 12px #00b4d84d,inset 0 1px 2px #fff3}.mode-btn:disabled{opacity:.5;cursor:not-allowed}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{width:100vw;height:100vh;overflow:hidden;position:fixed;touch-action:none}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:radial-gradient(ellipse at top left,rgba(0,180,216,.08) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(230,57,70,.08) 0%,transparent 50%),#1a1a1a;color:#f5f5f5;display:flex;align-items:center;justify-content:center}#root{width:100%;height:100%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes glow{0%,to{box-shadow:0 0 10px currentColor}50%{box-shadow:0 0 20px currentColor}}.btn-control,.remote-control{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}input,select,textarea,button{font-size:16px}