:root{color-scheme:dark;--bg:#101820;--panel:#1b2b36;--line:#3b5262;--muted:#abc0cb;--accent:#6ad7c6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eef5f8;font:15px system-ui,sans-serif;overscroll-behavior:none}main{max-width:900px;margin:auto;padding:14px;padding-bottom:max(14px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}h1{font-size:21px;margin:0 0 3px}h1 span{font-size:9px;font-weight:500;letter-spacing:2px;color:var(--accent);margin-left:6px}small{color:var(--muted);font-size:11px}#badge{padding:7px 10px;border-radius:20px;background:#273b48;font-size:12px;white-space:nowrap}.camera{background:#05090c;aspect-ratio:4/3;position:relative;border-radius:16px;overflow:hidden;max-height:31vh}.camera img{width:100%;height:100%;object-fit:contain}.camera-bar{position:absolute;left:10px;right:10px;bottom:8px;display:flex;align-items:center;justify-content:space-between}#videoState{background:#000a;padding:5px 8px;border-radius:8px;font-size:11px}#fullscreen{min-height:32px;width:36px;padding:0;background:#000a;font-size:22px}button{font:600 14px system-ui;color:inherit;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-height:46px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:disabled{opacity:.45}button:active{background:#2b6567}button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;position:sticky;top:0;z-index:5;background:var(--bg);padding:4px 0}#arm{background:#197768}#stop{background:#b82d40;border-color:#df5261;letter-spacing:.5px}#message{min-height:34px;font-size:12px;color:#c7d7e1;padding:6px 0}.mode{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border-radius:13px;background:#080e14}.mode button{border:0;background:transparent;min-height:46px}.mode small{display:block;font-size:10px;font-weight:400;margin-top:2px}.mode button[aria-pressed=true]{background:#304b58;color:#fff}.controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 12px}.control{min-width:0;text-align:center}.control-title{font-size:10px;letter-spacing:1.8px;color:var(--muted);margin-bottom:9px}.stick{position:relative;width:100%;aspect-ratio:1;max-width:240px;margin:auto;border:1px solid #4b6b7d;border-radius:50%;background:radial-gradient(circle,#254956,#172933);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.stick:before,.stick:after{content:'';position:absolute;background:#456d7f66;pointer-events:none}.stick:before{height:1px;left:15%;right:15%;top:50%}.stick:after{width:1px;top:15%;bottom:15%;left:50%}.horizontal{background:radial-gradient(circle,#343f57,#1b2637);border-color:#59647f}.horizontal:after{display:none}.stick[aria-disabled=true]{opacity:.4}.knob{width:52px;height:52px;position:absolute;left:calc(50% - 26px);top:calc(50% - 26px);border:2px solid #83d4d2;border-radius:50%;background:#337984;box-shadow:0 4px 15px #0006;pointer-events:none;z-index:1}.horizontal .knob{border-color:#aaaee4;background:#646c9c}.axis{position:absolute;font-size:9px;color:#c2d6df;pointer-events:none}.up{top:10px;left:50%;transform:translateX(-50%)}.down{bottom:10px;left:50%;transform:translateX(-50%)}.left{left:9px;top:44%;font-size:18px}.right{right:9px;top:44%;font-size:18px}.readout{font-size:11px;color:var(--muted);min-height:18px;margin-top:8px;font-variant-numeric:tabular-nums}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.presets button{min-height:36px;font-size:12px}.presets button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#1c3b3d}details{margin-top:10px;border:1px solid #314653;border-radius:12px;padding:10px 12px}summary{font-size:12px;cursor:pointer}summary span{float:right;color:var(--muted);font-variant-numeric:tabular-nums}details label{display:flex;justify-content:space-between;font-size:13px;margin-top:16px}input[type=range]{width:100%;accent-color:var(--accent);margin:12px 0 0}label.check{justify-content:flex-start;gap:8px;align-items:center}input[type=checkbox]{accent-color:var(--accent)}details p,footer,.hint{font-size:11px;line-height:1.5;color:var(--muted)}.hint{margin:12px 0 6px;color:#ccdee7}footer{margin-top:6px}.video-lost img{opacity:.25}@media(min-width:700px) and (orientation:landscape){main{max-width:1250px;display:grid;grid-template-columns:1fr 1fr;gap:14px}header{grid-column:1/-1;margin:0}.camera{max-height:calc(100dvh - 90px);aspect-ratio:4/3;position:sticky;top:12px}.actions{margin-top:0}.controls{gap:20px;margin:10px 0}.stick{max-width:180px}.dashboard{min-width:0}.hint{margin-top:8px}}@media(max-width:350px){main{padding:10px}.controls{gap:10px}.knob{width:44px;height:44px;left:calc(50% - 22px);top:calc(50% - 22px)}h1 span{display:none}.mode small{font-size:9px}}
:root{--compact-stick:124px}
[hidden]{display:none!important}.workspace-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 10px}.workspace-tabs button{flex:1;border:0;border-radius:8px 8px 0 0;background:transparent;min-height:36px}.workspace-tabs [aria-selected=true]{color:var(--accent);background:#203943;box-shadow:inset 0 -2px var(--accent)}.arm-selector{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.arm-selector button{min-height:52px}.arm-selector small{display:block;font-weight:400;font-size:10px;margin-top:3px}.arm-selector [aria-pressed=true]{border-color:var(--accent);background:#25464c;color:#baffef}#armState{font-size:12px;min-height:30px;margin:6px 0;color:var(--muted)}.arm-pairs{display:flex;gap:5px;margin:6px 0}.arm-pairs button{flex:1;font-size:11px;min-height:36px}.arm-pairs [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.arm-secondary{background:radial-gradient(circle,#423a5c,#202738);border-color:#7c739e}.arm-secondary .knob{border-color:#c4b3ed;background:#736599}.arm-sticks{margin:8px 0 12px}.arm-sticks small{display:block;margin-top:5px;font-size:10px}.arm-hand{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:6px 0}.arm-hand>small{grid-column:1/-1}.arm-hand button{font-size:12px;min-height:44px;padding:4px}.holding{background:#2a7777!important;border-color:var(--accent)!important}.arm-speed{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;margin-top:12px;font-size:12px}.arm-speed>div{display:flex;gap:5px}.arm-speed button{min-height:34px;font-size:12px;padding:4px 10px}.arm-speed [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.arm-speed>small{grid-column:1/-1}.arm-help,.arm-stop-note{font-size:11px;color:var(--muted);line-height:1.5}.arm-stop-note{border-left:2px solid #dfaa77;padding-left:8px}.joint-row{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid #314653}.joint-row label{display:block;margin:0;font-size:12px}.joint-row output{font-size:11px;font-variant-numeric:tabular-nums;color:var(--accent)}.joint-row progress{grid-column:1/3;grid-row:2;width:100%;height:6px;accent-color:var(--accent)}.joint-jog{grid-column:3;grid-row:1/3;display:flex;gap:4px}.joint-jog button{min-width:38px;min-height:40px;font-size:20px}.arm-sticks .control-title{letter-spacing:.5px;font-size:10px}@media(min-width:700px) and (orientation:landscape) and (max-height:540px){.workspace-tabs{margin-bottom:6px}.arm-selector button{min-height:42px}.arm-sticks .control-title{display:block}.arm-sticks{gap:10px;margin:4px 0}.arm-sticks .stick{max-width:118px}.arm-hand button{min-height:36px}.arm-speed{margin-top:6px}.arm-help{display:none}}@media(max-width:350px){.arm-hand{grid-template-columns:repeat(2,1fr)}.arm-speed{grid-template-columns:1fr}}
.vision .camera{width:100%}
#guestActivity{border-left:3px solid var(--accent);padding:6px 10px;background:var(--panel);margin-top:10px;border-radius:8px}#guestActivity[hidden]{display:none}#guestPresence{font-size:13px;margin:4px 0}#guestEvents{font-size:12px;line-height:1.6;padding-left:20px;max-height:170px;overflow:auto}
#headPanel{margin:10px 0}.head-tools{display:flex;align-items:center;gap:18px;margin-top:10px}.head-stick{width:132px;flex:0 0 132px}.head-tools button{flex:1}.head-tools .knob{width:42px;height:42px;left:calc(50% - 21px);top:calc(50% - 21px)}
.vision{min-width:0;align-self:start}.vision .camera{position:relative;top:auto}.head-info{flex:1;min-width:0}.head-info button{width:100%;min-height:42px}.head-info p{margin:6px 0;font-size:11px}#headAngles{font-variant-numeric:tabular-nums;color:var(--accent)}#headPanel summary{min-height:24px;touch-action:manipulation}#headState{max-width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media(min-width:700px) and (orientation:landscape){.vision{grid-column:1;grid-row:2;position:sticky;top:12px}.dashboard{grid-column:2;grid-row:2}.vision:has(#headPanel[open]) .camera{max-height:calc(100dvh - 285px);min-height:130px}}@media(max-width:350px){.head-tools{gap:8px}.head-stick{width:112px;flex-basis:112px}}
@media(min-width:700px) and (orientation:landscape){.vision:has(#headPanel[open]) .camera{height:clamp(150px,calc(100dvh - 235px),320px);max-height:none;aspect-ratio:auto}}@media(min-width:700px) and (orientation:landscape) and (max-height:540px){#headPanel>p{display:none}#headPanel{margin:8px 0}.head-stick{width:92px;flex-basis:92px}.head-tools{margin-top:5px}.head-tools .knob{width:32px;height:32px;left:calc(50% - 16px);top:calc(50% - 16px)}.head-tools .axis{font-size:8px}.head-tools .left,.head-tools .right{font-size:14px}}
#shareSetup{font-size:12px;line-height:1.5;color:var(--muted)}#shareSetup a{color:var(--accent)}
.share-actions{display:flex;gap:8px}.share-actions button{flex:1}#sharing button{padding:8px 12px;margin-top:10px;width:100%;touch-action:manipulation}#sharing select,#shareUrl{width:100%;font:16px system-ui;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);color:inherit;margin-top:8px}#revokeShare{border-color:#df5261}#sharing[hidden],#guestNotice[hidden]{display:none}#guestNotice{font-size:12px;color:var(--accent)}main.guest-welcome{display:block;max-width:500px;padding:28px 20px}.guest-welcome p{line-height:1.6}.guest-welcome button{padding:12px 20px;width:100%;touch-action:manipulation}
@media(min-width:700px) and (orientation:landscape) and (max-height:540px){main{padding:8px 12px;gap:8px}header{margin:0}h1{font-size:18px}.camera{max-height:calc(100dvh - 65px)}.actions{padding:0}.actions button{min-height:38px}#message{min-height:23px;padding:4px 0;font-size:11px}.mode{padding:3px}.mode button{min-height:33px;font-size:12px}.mode small{font-size:9px;margin-top:0}.controls{margin:7px 0;gap:12px}.control-title,.readout{display:none}.stick{max-width:var(--compact-stick)}.axis{font-size:8px}.up{top:7px}.down{bottom:7px}.left,.right{font-size:15px}.knob{width:44px;height:44px;left:calc(50% - 22px);top:calc(50% - 22px)}.presets button{min-height:29px;font-size:11px}details{margin-top:6px;padding:7px 10px}.hint,footer{display:none}}