.visualizer-shell{max-width:1500px;margin:20px auto}.visualizer-shell main{max-width:none}.visualizer-top{display:flex;align-items:center;justify-content:space-between;gap:24px}.visualizer-top h1{margin:5px 0}.visualizer-top p{margin:0}.connect-form{width:min(520px,100%)}.connect-form label{margin:0 0 6px}.connect-row{display:flex;gap:8px}.connect-row input{min-width:0}.visualizer-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.visualizer-stage.card{padding:12px;margin:0;min-width:0}.viz-sidebar .card{margin:0 0 14px;padding:20px}.viz-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:2px 2px 10px}.viz-toolbar button{padding:8px 11px;font-size:.85rem}.viz-toolbar .secondary{background:#ffffff0b;color:#d9e6f1;border-color:#ffffff1a;box-shadow:none}.select-label{display:flex;align-items:center;gap:8px;margin:0 auto 0 0}.select-label select{width:auto;min-width:170px;padding:8px}.canvas-wrap{height:min(72vh,850px);min-height:460px;position:relative;overflow:hidden;border:1px solid #ffffff16;border-radius:13px;background:#dfe5e8;touch-action:none}.canvas-wrap canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.canvas-wrap canvas:active{cursor:grabbing}.viz-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 3px 1px;color:var(--muted);font-size:.78rem}.connection-badge{position:absolute;left:12px;top:12px;border-radius:99px;padding:6px 10px;background:#132338dd;color:#d8e8f4;font-size:.78rem;pointer-events:none}.connection-badge.connected{color:#06221b;background:#75e9c9}.connection-badge.error{color:#fff;background:#a63842}.selected-panel h2{margin:7px 0 12px;overflow-wrap:anywhere}.selected-stats{font-size:.88rem;line-height:1.85}.stat-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #ffffff12;padding:3px 0}.stat-row span:first-child{color:var(--muted)}.vector-legend{display:grid;gap:7px;margin-top:15px;font-size:.8rem;color:#c5d3df}.vector-legend span{display:flex;align-items:center;gap:8px}.vector-legend i{width:16px;height:3px;border-radius:4px;display:inline-block}.v-speed{background:#2276d2}.v-self{background:#d49300}.v-anomaly{background:#9a49b6}.viz-help h2{font-size:1.05rem}.viz-help p{font-size:.84rem;line-height:1.5;color:#adbdcb}.viz-help p:last-child{margin-bottom:0}.viz-message{min-height:24px;margin:8px 2px;color:var(--muted)}.touch-stick{display:none}.stick-base{position:absolute;inset:0;border-radius:50%;border:1px solid #fff8;background:#07131f66;backdrop-filter:blur(4px);box-shadow:0 5px 22px #0004}.stick-base:before{content:"";position:absolute;width:2px;height:2px;border-radius:50%;background:#ffffff66;left:50%;top:50%;transform:translate(-50%,-50%)}.stick-base i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:#6ce0c5;border:2px solid white;box-shadow:0 4px 12px #0005;transform:translate(var(--stick-x,0),var(--stick-y,0))}.touch-stick span{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;color:white;text-shadow:0 1px 4px #000;font-size:11px}.touch-stick.active .stick-base i{background:#ffd27a}.visualizer-shell .card:hover{transform:none}.visualizer-top.card{margin-top:0}
@media(max-width:950px){.visualizer-layout{grid-template-columns:1fr}.viz-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.viz-sidebar .card{margin:0}.canvas-wrap{height:68vh;min-height:420px}}
@media(max-width:640px){.visualizer-shell{margin:10px auto}.visualizer-top.card{display:block;padding:18px}.connect-form{margin-top:15px}.connect-row button{white-space:nowrap;padding:9px 11px}.visualizer-stage.card{padding:8px}.viz-toolbar{gap:6px}.viz-toolbar button{padding:7px 9px;font-size:.78rem}.viz-toolbar .select-label{width:100%;margin-bottom:2px}.select-label select{flex:1;min-width:0}.canvas-wrap{height:62vh;min-height:380px;max-height:700px}.viz-sidebar{grid-template-columns:1fr}.viz-footer{flex-wrap:wrap;font-size:.72rem}.viz-footer span:last-child{width:100%}.touch-stick{position:absolute;right:20px;bottom:26px;width:118px;height:118px;z-index:4;touch-action:none;user-select:none}.touch-stick span{font-size:10px}.connection-badge{left:8px;top:8px}.visualizer-shell .card{border-radius:12px}}
main:has(.visualizer-shell){max-width:1550px}.visualizer-shell{width:100%}.manual-on{background:linear-gradient(135deg,#f0bc55,#e99438)!important;color:#30210c!important}.follow-on{background:#6bd5b8!important;color:#06221f!important}
@media(max-width:640px){.touch-stick{display:none}.manual-on~.canvas-wrap .touch-stick{display:block}.visualizer-stage:has(.manual-on) .touch-stick{display:block}}

.visualizer-shell:fullscreen,.visualizer-shell.fullscreen-fallback{position:fixed;inset:0;z-index:1000;width:100vw;height:100dvh;max-width:none;margin:0;padding:12px 16px;background:#08111d;overflow:auto}
.visualizer-shell:fullscreen .visualizer-layout,.visualizer-shell.fullscreen-fallback .visualizer-layout{height:calc(100dvh - 166px);min-height:320px}
.visualizer-shell:fullscreen .visualizer-stage,.visualizer-shell.fullscreen-fallback .visualizer-stage{height:100%;display:flex;flex-direction:column}
.visualizer-shell:fullscreen .canvas-wrap,.visualizer-shell.fullscreen-fallback .canvas-wrap{height:auto;min-height:0;flex:1}
.visualizer-shell:fullscreen .viz-sidebar,.visualizer-shell.fullscreen-fallback .viz-sidebar{overflow:auto}
@media(max-width:700px){.connect-row{flex-wrap:wrap}.connect-row input{flex:1 1 100%}.visualizer-shell:fullscreen,.visualizer-shell.fullscreen-fallback{padding:8px}.visualizer-shell:fullscreen .visualizer-layout,.visualizer-shell.fullscreen-fallback .visualizer-layout{height:calc(100dvh - 150px);min-height:300px;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.visualizer-shell:fullscreen .viz-sidebar,.visualizer-shell.fullscreen-fallback .viz-sidebar{display:block;max-height:22vh}.visualizer-shell:fullscreen .viz-help,.visualizer-shell.fullscreen-fallback .viz-help{display:none}.visualizer-shell:fullscreen .selected-panel,.visualizer-shell.fullscreen-fallback .selected-panel{padding:8px 12px}.visualizer-shell:fullscreen .selected-panel .vector-legend,.visualizer-shell.fullscreen-fallback .selected-panel .vector-legend{display:none}}