:root{--main-font:"Noto Sans","Roboto",helvetica,arial,sans-serif;--border-radius:var(--radius-small);--size-md:clamp(24px,4vh,32px);--size-sm:clamp(20px,3vh,26px);--font-md:clamp(12px,2vw,14px);--font-sm:clamp(10px,1.8vw,12px);--btn-padding-md:4px 12px;--btn-padding-sm:2px 8px;--slider-height:20px;--gap-small:6px;--gap-large:10px;--pad-small:4px;--pad-large:8px;--gap-fluid:clamp(var(--gap-small),1vw,var(--gap-large));--radius-small:4px;--radius-large:8px}body,html{margin:0;padding:0;background:var(--main-bg);font-family:var(--main-font)}.scroll-y{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.scroll-thin{scrollbar-width:thin;scrollbar-color:var(--color-scrollbar) transparent}.scroll-thin::-webkit-scrollbar{width:6px;height:6px}.scroll-thin::-webkit-scrollbar-track{background:transparent}.scroll-thin::-webkit-scrollbar-thumb{background:var(--color-scrollbar);border-radius:var(--radius-small)}.scroll-thin::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-hover)}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--grid-min,clamp(48px,12vw,80px)),1fr));gap:var(--grid-gap,clamp(6px,1vw,10px));width:100%;margin-top:var(--gap-large)}.button-grid :is(button,.btn){width:100%;min-width:0;font-size:var(--font-md);padding:var(--btn-padding-md);height:var(--size-md);min-height:var(--size-md);display:flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.app-root) :where(input[type=text],input[type=number],select){font-family:var(--main-font);background:var(--input-bg);border:1px solid var(--input-border);color:var(--main-color);font-size:var(--font-sm);font-weight:400;outline:none;padding:var(--pad-small);border-radius:var(--radius-small);height:var(--size-md);line-height:1;box-sizing:border-box;transition:border-color .2s ease,background-color .2s ease}:where(.app-root) :where(input[type=text],input[type=number],select):hover{border-color:var(--input-border-hover)}:where(.app-root) :where(input[type=text],input[type=number],select):focus{border-color:var(--input-border-focus);background:var(--color-overlay-strong)}:where(.app-root) option{background:var(--main-bg);color:var(--main-color)}input[type=range]{-webkit-appearance:none;appearance:none;border:none;outline:none;width:100%;flex:1;height:var(--slider-height);background-color:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;background:var(--slider-track);border:none;border-radius:var(--radius-small);transition:background-color .2s ease}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid var(--input-border);height:16px;width:16px;border-radius:50%;background:var(--slider-thumb);margin-top:-7px;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-1)}input[type=range]:hover::-webkit-slider-thumb{background:var(--slider-thumb-hover);border-color:var(--input-border-hover);transform:scale(1.1)}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--slider-track)}input[type=range]:focus::-webkit-slider-thumb{border-color:var(--input-border-focus);box-shadow:var(--focus-ring)}input[type=range]::-moz-range-track{height:2px;background:var(--slider-track);border:none;border-radius:var(--radius-small)}input[type=range]::-moz-range-thumb{border:1px solid var(--input-border);height:14px;width:14px;border-radius:50%;background:var(--slider-thumb);cursor:pointer;box-shadow:var(--shadow-1)}h1,h2,h3,h4,h5,h6{font-family:var(--main-font);color:var(--main-color);margin:0;font-weight:500}h2{font-size:var(--font-md)}label{font-family:var(--main-font);color:var(--main-color);font-size:var(--font-sm);font-weight:400}ul{list-style:none;padding:0;margin:0}#menu{display:flex;flex-direction:column;overflow:hidden}#menu,.robot-selector{margin:0 0 var(--gap-large) 0}.robot-selector{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-large);align-items:center;width:100%}.robot-selector__name{font-size:var(--font-md);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.robot-selector__select{font-size:var(--font-md);width:100%;cursor:pointer}.button-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--grid-gap,clamp(6px,1vw,10px));align-items:center;width:100%}#ros-url-input{width:100%;min-width:0;font-size:clamp(var(--font-sm),2vw,12px)}#ros-status,.ros-status{margin-left:clamp(6px,2vw,10px);color:var(--color-text-muted);white-space:nowrap;font-size:var(--font-sm);font-family:var(--main-font);opacity:.85}.dock-panel .btn{max-width:100%;font-size:clamp(var(--font-sm),2.2vw,var(--font-md));padding:var(--pad-large) var(--pad-large);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#rosviz-content ul{flex:1;overflow-y:auto;overflow-x:hidden}#rosviz-content li{font-size:clamp(var(--font-sm),3vw,16px);display:flex;align-items:center;padding:var(--pad-small) 0;width:100%;user-select:text;transition:background .25s ease;gap:var(--gap-fluid)}#rosviz-content li[robot-hovered]{background:var(--color-divider)}#rosviz-content li span{padding:0 var(--pad-small);max-width:clamp(80px,20vw,125px);text-overflow:ellipsis;overflow:hidden;font-size:clamp(10px,2.5vw,14px)}#rosviz-content li input[type=number]{width:clamp(60px,15vw,100px);overflow:hidden;font-size:clamp(var(--font-sm),2.2vw,12px)}.toggle{padding-left:25px;position:relative;cursor:pointer}.toggle:before{content:"";position:absolute;left:0;width:15px;height:15px;border-radius:var(--radius-large);border:2px solid var(--color-text);margin-right:5px}.toggle:after{content:"";width:9px;height:9px;position:absolute;left:5px;top:5px;background:var(--color-text);border-radius:var(--radius-large);opacity:0}.toggle:not(.checked):hover:after{opacity:.25}.toggle.checked:after{opacity:1}#rosviz-content,#rosviz-content li,#rosviz-content li input[type=number],#rosviz-content li span{color:var(--main-color)}.tab-btn{position:relative;flex:1;min-width:fit-content;background:transparent;color:var(--color-text-muted);border:none;border-radius:calc(var(--border-radius) - 1px);padding:var(--pad-small) var(--pad-large);font-size:var(--font-sm);font-family:var(--main-font);cursor:pointer;height:var(--size-md);min-height:var(--size-md);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;opacity:.6;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.tab-btn:hover{opacity:.8}.tab-btn.active{background:var(--btn-bg);color:var(--btn-text);opacity:1;border-radius:calc(var(--border-radius) - 1px)}.tab-btn.dragging{opacity:.5}.btn{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-border);padding:var(--btn-padding-md);font-size:var(--font-md);font-weight:500;cursor:pointer;outline:none;border-radius:var(--border-radius);transition:all .2s ease;font-family:var(--main-font);height:var(--size-md);min-height:var(--size-md);display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center}.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.viewer-view-toolbar{width:100%;display:flex;justify-content:flex-start}.viewer-view-buttons{display:flex;gap:0;align-items:center}.viewer-view-panel .viewer-view-btn{background:transparent;border:none;color:var(--color-text);box-shadow:none;font-size:var(--font-sm);font-family:var(--main-font);padding:0 8px;outline:none;-webkit-tap-highlight-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;width:100px;height:100%;box-sizing:border-box}.viewer-view-panel .viewer-view-btn:active,.viewer-view-panel .viewer-view-btn:focus,.viewer-view-panel .viewer-view-btn:focus-visible,.viewer-view-panel .viewer-view-btn:hover{outline:none;box-shadow:none;background:transparent;color:var(--color-text-strong)}.viewer-view-panel .viewer-view-btn+.viewer-view-btn:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--color-divider)}.viewer-view-panel .viewer-view-btn.active{color:var(--color-primary)}.equal-row{display:flex;gap:var(--grid-gap,clamp(6px,1vw,10px))}.equal-row>*{flex:1 1 0;min-width:0}.equal-row .btn,.equal-row button,.equal-row input[type=number],.equal-row select{height:var(--size-md)}.viewer-container .emergency-stop{position:absolute;right:16px;bottom:16px;width:calc(var(--size-md)*4);height:calc(var(--size-md)*4);background:var(--color-danger);color:var(--color-text);border:2px solid var(--color-border-emphasis);border-radius:var(--radius-large);display:inline-flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.5px;font-size:clamp(14px,2.6vw,20px);box-shadow:var(--shadow-2);z-index:10}.viewer-container .emergency-stop:hover{background:var(--color-danger-hover);transform:translateY(-1px)}.viewer-container .emergency-stop:active{transform:translateY(0)}.viewport-selection-rect{position:fixed;z-index:9999;border:1px solid hsla(0,0%,100%,.95);background:hsla(0,0%,100%,.12);box-sizing:border-box;pointer-events:none}