:root{color-scheme:dark;--bg:#07171b;--panel:#0b1d22;--border:#214047;--muted:#78949a;--text:#ecf3ef;--cyan:#4fe0d9;--gold:#eaa663;--radius:14px;font-family:Inter,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overflow-x:hidden}.app{min-height:100vh;max-width:1920px;margin:auto}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 29px;border-bottom:1px solid var(--border);background:#08191e}
.brand{display:flex;align-items:center;gap:15px;letter-spacing:1.2px}.mark{display:grid;place-items:center;border:1px solid #d39656;position:relative;width:43px;height:43px;border-radius:11px;color:#eab17b;font-weight:900;font-size:23px}.mark span{position:absolute;font-size:12px;bottom:4px;right:4px;color:var(--cyan)}.brand strong{font-size:18px}.brand strong .sub-brand{font-weight:400;color:var(--gold)}.brand small{display:block;color:#6f9298;font-size:9px;letter-spacing:2px;margin-top:5px}.top-state{font-size:10px;letter-spacing:1.5px;display:flex;align-items:center;gap:9px;color:#a6c7ba;font-weight:700}.green-dot{width:7px;height:7px;border-radius:50%;background:#4cdfb6;box-shadow:0 0 13px #4cdfb6}.serial{color:#496e74;margin-left:22px}.layout{display:grid;grid-template-columns:323px minmax(0,1fr);min-height:calc(100vh - 70px)}
.control-panel{background:var(--panel);border-right:1px solid var(--border);padding:28px 25px 17px;display:flex;flex-direction:column;gap:0}.eyebrow,.tiny-kicker{font-size:10px;letter-spacing:2.1px;color:var(--gold);font-weight:800}.panel-header h1{font-size:26px;line-height:1.13;letter-spacing:-.8px;font-weight:760;margin:13px 0}.panel-header h1 em{font-style:normal;color:var(--cyan);font-weight:560}.panel-header p{font-size:12px;line-height:1.6;color:#9eb8b7;margin:0 0 19px}.controls-section{border-top:1px solid var(--border);padding:18px 0 15px}.controls-section h2{margin:0 0 19px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:1.6px}.section-no{color:var(--gold);margin-right:11px}.range-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a9c5c3;font-weight:540;margin:15px 0 10px}.range-label output{color:var(--text);font-weight:750;font-size:12px;font-variant-numeric:tabular-nums}.left-text{color:var(--gold)}.right-text{color:var(--cyan)}
input[type=range]{--range-color:#e2ad79;display:block;appearance:none;width:100%;height:4px;margin:0 0 13px;cursor:pointer;border-radius:7px;background:linear-gradient(90deg,var(--range-color) 0,var(--range-color) var(--range-fill,48%),#315159 var(--range-fill,48%),#315159 100%)}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;background:var(--range-color);border:3px solid #10272b;border-radius:50%;box-shadow:0 0 0 1px var(--range-color)}input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--range-color);border:3px solid #10272b;border-radius:50%;box-shadow:0 0 0 1px var(--range-color)}#rightGrip{--range-color:var(--cyan)}#leftGrip{--range-color:var(--gold)}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:17px}.chip{background:#142e33;border:1px solid #315358;color:#afcac6;border-radius:6px;padding:10px 4px;font:700 9px inherit;font-size:9px;letter-spacing:.4px;cursor:pointer}.chip:hover,.chip.active{color:#0d2428;background:var(--gold);border-color:var(--gold)}.speed-row{display:flex;align-items:center;justify-content:space-between;margin-top:22px;font-size:10px;color:#a8bdbb;font-weight:700;letter-spacing:.6px}select{border:1px solid #34545a;background:#162f34;color:#ddeeea;border-radius:6px;padding:7px 12px;font-weight:700}.control-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}.button{border:1px solid #436168;border-radius:6px;padding:13px 7px;cursor:pointer;font-weight:850;font-size:10px;letter-spacing:.9px}.button:focus-visible,.chip:focus-visible,.reset-camera:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.primary{background:var(--gold);border-color:var(--gold);color:#17262a}.secondary,.tertiary{background:#19353b;color:#dcece7}.tertiary{grid-column:span 2;background:transparent;color:#83b5b5}.button:hover{filter:brightness(1.1)}.sidebar-foot{margin-top:auto;color:#51777c;font-size:9px;font-weight:650;letter-spacing:1.2px;padding-top:22px}.sidebar-foot b{color:#a4c1bb}.sidebar-foot span{padding:0 9px}
.workspace{min-width:0;display:flex;flex-direction:column}.viewport{height:min(60vh,620px);min-height:360px;position:relative;background:radial-gradient(ellipse at center,#17434a,#071b20)}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.view-top{position:absolute;left:30px;top:26px;right:30px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.view-top h2{font-weight:670;font-size:19px;letter-spacing:-.3px;margin:6px 0}.view-pill{display:flex;align-items:center;gap:7px;border:1px solid #356269;background:#0c272bda;border-radius:20px;padding:10px 12px;color:#a7d5d0;letter-spacing:1px;font-size:9px;font-weight:800}.pulse{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.view-bottom{position:absolute;left:26px;bottom:20px;right:26px;display:flex;justify-content:space-between;align-items:center;color:#82aaaf;font-size:10px;letter-spacing:1.1px;pointer-events:none}.view-bottom b{margin:0 8px;color:var(--gold)}.reset-camera{pointer-events:auto;color:#c8e0dc;background:#143238df;border:1px solid #41676b;border-radius:7px;padding:9px 13px;cursor:pointer;font-size:10px;font-weight:720;letter-spacing:.6px}.side-label{position:absolute;top:53%;font-size:10px;letter-spacing:1.3px;font-weight:760;pointer-events:none}.side-label.left{left:10%;color:#eeb77d}.side-label.right{right:8%;color:#7bf3e8}.side-label i{display:block;height:1px;background:currentColor;width:82px;margin-bottom:9px;opacity:.7}.view-error{position:absolute;top:40%;left:13%;max-width:75%;background:#491d21;color:#fff;padding:15px;border-radius:10px}
.telemetry{background:#0b1c21;border-top:1px solid #21494c;flex:1;padding:19px 26px 14px}.telemetry-title{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.9px;color:#a6c6c1;font-weight:800}.telemetry-title #runtime{color:#6e9999}.measurements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:19px;margin-bottom:18px;border:1px solid #29484d;border-radius:9px;overflow:hidden}.metric{padding:16px 16px 12px;min-width:0;border-right:1px solid #29484d;background:linear-gradient(135deg,#10272d,#0c2025)}.metric:last-child{border-right:0}.metric>span{font-size:9px;color:#7eaaa9;font-weight:760;letter-spacing:1px}.metric>div:nth-child(2){display:flex;align-items:baseline;gap:7px;margin:8px 0 5px}.metric strong{font-size:28px;letter-spacing:-1.3px;font-weight:720;font-variant-numeric:tabular-nums}.metric small{font-size:12px;color:#789c9c}.metric .detail{color:#759aa0;font-size:10px;letter-spacing:.15px}.left-metric strong{color:#f1b87b}.right-metric strong{color:#54e4dc}.chart-pane{border:1px solid #254249;border-radius:9px;padding:13px 16px 9px;background:#0d2227}.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.chart-head strong{display:block;font-size:12px;margin-bottom:4px}.chart-head div>span{font-size:10px;color:#699497}.legend{display:flex;gap:12px}.legend span{font-size:9px;color:#93b2b3;display:flex;align-items:center;gap:5px;font-weight:800}.legend i{width:13px;height:3px;display:inline-block}.line-left{background:#eaa663}.line-right{background:#4fe0d9}.line-carrier{background:#a5c0ba}#chart{display:block;width:100%;height:136px;margin-top:6px}.physics-note{display:flex;align-items:center;flex-wrap:wrap;gap:13px 23px;margin-top:13px;color:#91b1b0;font-size:10px;letter-spacing:.5px}.physics-note>span:first-child{color:#e9ab6d;font-weight:850}.physics-note>span:last-child{margin-left:auto;color:#6a999b;font-size:9px;font-weight:750}
@media(max-width:1150px){.layout{grid-template-columns:295px minmax(0,1fr)}.control-panel{padding:22px 19px 16px}.metric{padding:13px 10px}.metric strong{font-size:23px}.side-label{display:none}}
@media(max-width:780px){.topbar{padding:0 16px;height:62px}.top-state .serial{display:none}.layout{display:flex;flex-direction:column}.control-panel{order:2;border-right:0;border-top:1px solid var(--border);padding:20px}.workspace{order:1}.viewport{height:390px;min-height:320px}.view-top{top:17px;left:18px;right:18px}.view-top h2{font-size:16px}.view-pill{font-size:8px;padding:8px}.view-bottom{left:14px;right:14px;bottom:11px;font-size:9px}.telemetry{padding:15px}.control-panel .panel-header h1{font-size:23px}.controls-section{padding:14px 0 10px}.control-actions{margin-bottom:8px}.sidebar-foot{padding-top:10px}}
@media(max-width:520px){.topbar .brand strong{font-size:15px}.brand small{font-size:7px}.top-state{font-size:8px}.viewport{height:320px}.view-pill{display:none}.view-top h2{font-size:14px}.view-bottom{font-size:8px}.reset-camera{font-size:8px}.measurements{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid #29484d}.metric strong{font-size:22px}.legend{gap:7px}.legend span{font-size:8px}.chart-head{align-items:flex-start}.chart-head div>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}