:root{--bg:#07111d;--panel:#0b1827;--panel2:#0e2032;--line:#1e3447;--line2:#263d51;--muted:#7690a5;--soft:#a8bbcb;--text:#e6eef4;--cyan:#64dce8;--orange:#f1b064;--purple:#b28cff;--green:#70daa7;--red:#f58f81}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px;letter-spacing:.005em}body{background:radial-gradient(ellipse at 49% 5%,#13243a,#07111d 65%)}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.shell{width:100%;max-width:2100px;margin:auto;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:84px;padding:14px 28px;border-bottom:1px solid var(--line);background:rgba(8,19,32,.75)}.brand-mark{display:flex;align-items:center;gap:16px}.brand-glyph{width:49px;height:49px;display:grid;place-items:center;color:var(--cyan);font-size:38px;border:1px solid #325367;border-radius:12px;box-shadow:inset 0 0 22px #2e638032}.brand-kicker,.brand-code,.top-tag,.strap,.section-head,.input-label,.eyebrow,.render-status,.canvas-top-left,.canvas-top-right,.axis-legend,.viewport-instructions,.plot-legend,.plot-foot,.telemetry-head,.metric-label,.metric-sub,.telemetry-title,.wheel-foot,.warnline,.build-note,.footer{font-family:"Segoe UI",Arial,sans-serif;letter-spacing:.13em;font-size:10px}.brand-kicker{font-size:9px;color:var(--muted);margin-bottom:5px}.brand-name{font-size:23px;font-weight:800;letter-spacing:.12em}.brand-code{font-size:17px;color:var(--cyan);font-weight:500}.top-meta{display:flex;align-items:center;gap:13px}.top-tag{border:1px solid var(--line2);padding:10px 12px;color:#9eb7c7;border-radius:4px}.run-tag{font-size:10px;color:#8ef5be;letter-spacing:.12em;display:flex;gap:8px;align-items:center;background:#123225;padding:11px 15px;border:1px solid #25563a;border-radius:5px}.pulse,.status-dot{height:7px;width:7px;border-radius:50%;background:#6affb4;display:inline-block;box-shadow:0 0 12px #39eaa0;animation:pulse 1.9s ease-in-out infinite}@keyframes pulse{50%{opacity:.36;box-shadow:none}}.strap{height:35px;padding:0 27px;display:flex;align-items:center;gap:14px;color:#7395ab;border-bottom:1px solid var(--line);font-size:9px}.strap span:first-child{color:#a8d7e6}.divider-vertical{width:1px;height:12px;background:var(--line2)}.strap-right{margin-left:auto;letter-spacing:.07em}.layout{display:grid;grid-template-columns:278px minmax(500px,1fr) 273px;min-height:calc(100vh - 155px)}.left,.right{background:rgba(9,22,36,.78)}.left{border-right:1px solid var(--line)}.right{border-left:1px solid var(--line)}.control-section{border-bottom:1px solid var(--line);padding:18px 19px 20px}.section-head,.telemetry-title{display:flex;justify-content:space-between;color:var(--cyan);font-weight:750;margin-bottom:19px}.faint{color:#567285;font-weight:400}.segmented{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:4px;overflow:hidden;margin-bottom:20px}.segmented button{border:0;background:#0d2032;color:#7594a9;font-size:9px;font-weight:750;letter-spacing:.08em;padding:12px 0}.segmented button.selected{color:#07131c;background:var(--cyan)}.input-label{display:block;color:#7b9bac;margin-bottom:8px}select{appearance:none;border:1px solid #294557;color:#d4e3ed;background:#102437;border-radius:4px;padding:11px 24px 11px 10px;width:100%;background-image:linear-gradient(45deg,transparent 50%,#8ab0c2 50%),linear-gradient(135deg,#8ab0c2 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;font-size:11px}.slider-row{margin-bottom:15px}.slider-row:last-child{margin-bottom:0}.slider-label{display:flex;justify-content:space-between;margin-bottom:9px;color:#b4c9d7;font-size:11px}.slider-label output{font-weight:700;color:#dbf4f6;font-variant-numeric:tabular-nums}.slider-row input[type=range]{display:block;width:100%;accent-color:#62d3e3;height:3px;margin:0;cursor:pointer}.wide-btn{display:block;width:100%;border:1px solid #426270;background:#143044;color:#d3f0f1;padding:14px 8px;font-weight:700;letter-spacing:.09em;font-size:10px;border-radius:4px}.wide-btn:hover{background:#1e3e51}.wide-btn.warn{background:#38261f;border-color:#764b36;color:#eeba92;margin-top:13px}.wide-btn.warn:hover{background:#523426}.viewport-panel{display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#0b1a2b,#0a1726)}.viewport-head{display:flex;align-items:center;justify-content:space-between;padding:21px 25px 19px;gap:15px}.eyebrow{font-size:9px;color:var(--cyan);font-weight:700}.slash{color:#536d81;padding:0 7px}.viewport-head h1{font-size:20px;letter-spacing:-.016em;font-weight:680;margin:7px 0 0}.render-status{color:#97bdc6;font-size:9px;white-space:nowrap}.status-dot{background:#56d6e5;box-shadow:0 0 10px #39d5ea;margin-right:7px}.canvas-wrap{position:relative;flex:1;min-height:425px;overflow:hidden;background:radial-gradient(ellipse at 54% 55%,#142942,#091524 65%,#070e1a)}#spaceCanvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#spaceCanvas:active{cursor:grabbing}.canvas-top-left,.canvas-top-right{position:absolute;top:20px;pointer-events:none;color:#9cbbca;display:flex;flex-direction:column;gap:8px}.canvas-top-left{left:24px}.canvas-top-right{right:23px;text-align:right}.readout-caption{color:#5d879b;font-size:9px}.canvas-label{font-size:12px;font-weight:750;color:#c3ddeb;letter-spacing:.1em}.canvas-top-right span:last-child{color:#64dfe2}.axis-legend{position:absolute;bottom:21px;left:25px;display:flex;gap:15px;color:#9bbaca;font-size:9px}.ax,.key,.wheel-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.ax.x,.wheel-dot.wx{background:#f46071}.ax.y,.wheel-dot.wy{background:#67e0a0}.ax.z,.wheel-dot.wz{background:#5aabfa}.viewport-instructions{position:absolute;bottom:20px;right:23px;color:#7893a7;font-size:9px}.viewport-instructions span{padding:0 6px}.canvas-corner{position:absolute;width:20px;height:20px;border-color:#3b7086;opacity:.75;pointer-events:none}.canvas-corner.bl{bottom:13px;left:13px;border-left:1px solid;border-bottom:1px solid}.canvas-corner.tr{top:13px;right:13px;border-right:1px solid;border-top:1px solid}.fallback{position:absolute;inset:0;background:#101a2a;display:grid;place-items:center;text-align:center;padding:50px;color:#ffbf88;font-size:15px}.fallback[hidden]{display:none}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 21px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:#0d2132}.transport,.view-options{display:flex;align-items:center;gap:9px}.transport select{width:auto;min-width:122px;padding:9px 24px 9px 9px;background-color:#10283b}.main-btn{background:#3bbfcf;border:none;border-radius:4px;color:#092230;font-size:10px;letter-spacing:.08em;font-weight:800;padding:12px 17px}.main-btn:hover{background:#73e6ee}.icon-btn{border:1px solid var(--line2);background:#12293b;color:#a6c4d4;border-radius:4px;padding:6px 13px;font-size:20px}.quiet-btn{border:1px solid var(--line2);background:#13283b;color:#b6cedc;border-radius:3px;padding:10px 11px;font-size:9px;letter-spacing:.07em}.view-options label{font-size:9px;color:#9bb6c9;letter-spacing:.09em;white-space:nowrap}.view-options input{accent-color:#56cad9;vertical-align:middle}.plot-section{padding:19px 23px 15px;background:#0c1a2a}.plot-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}.plot-header h2{font-size:14px;font-weight:620;margin:6px 0 0}.plot-legend{display:flex;gap:13px;color:#a8c2d0;font-size:8px}.key{border-radius:2px}.key.error{background:var(--cyan)}.key.rate{background:var(--orange)}#plot{width:100%;height:116px;display:block}.plot-foot{display:flex;justify-content:space-between;color:#617e90;font-size:9px;margin-top:8px}.telemetry-head{padding:22px 20px;display:flex;align-items:center;justify-content:space-between;color:#b8cfdc;border-bottom:1px solid var(--line);font-weight:750}.live-chip{font-size:9px;color:#62eeb1}.metric-block{padding:18px 18px;border-bottom:1px solid var(--line)}.metric-block.hero{padding:24px 20px 22px}.metric-label{font-size:10px;color:#8eacbf;display:flex;justify-content:space-between}.metric-value{margin-top:10px;display:flex;align-items:baseline;gap:9px}.metric-value strong{font-size:58px;line-height:1.1;letter-spacing:-.05em;color:#e5f7fa;font-variant-numeric:tabular-nums}.metric-value span{color:#85c9d4;font-size:17px}.metric-sub{margin-top:12px;color:#6cdda5;font-size:9px}.metric-pair{display:grid;grid-template-columns:1fr 1fr}.metric-pair .metric-block:first-child{border-right:1px solid var(--line)}.metric-pair .metric-block{padding:19px 13px}.metric-small{display:flex;align-items:baseline;gap:4px;margin-top:13px}.metric-small strong{font-size:23px;font-variant-numeric:tabular-nums}.metric-small span{color:#8db2c5;font-size:10px}.wheels{padding:22px 19px;border-bottom:1px solid var(--line)}.wheels .telemetry-title{margin-bottom:20px}.wheel-line{margin:16px 0}.wheel-line>div:first-child{display:flex;align-items:center;gap:4px;font-size:10px;color:#a4bbc9;letter-spacing:.04em;margin-bottom:10px}.wheel-line output{margin-left:auto;color:#e1f4f4;font-size:12px;font-variant-numeric:tabular-nums;font-weight:700}.wheel-dot{width:7px;height:7px}.track{position:relative;height:6px;background:#243444;border-radius:5px;overflow:hidden}.center-mark{position:absolute;z-index:2;left:50%;top:-1px;height:8px;width:1px;background:#cad2dc}.fill{position:absolute;top:0;height:100%;left:50%;width:0;background:#f46071;transition:width .11s}.fill.wy{background:#67e0a0}.fill.wz{background:#5aabfa}.wheel-foot{display:flex;justify-content:space-between;color:#59788a;font-size:8px}.warnline{margin-top:17px;font-size:9px;color:#6dd9a5}.warnline.alert{color:#ffb675}.vectors{padding:22px 20px 18px;border-bottom:1px solid var(--line)}.vector-entry{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid #162b3c;font-size:10px;color:#8eacbe}.vector-entry:last-child{border-bottom:0}.vector-entry output{color:#d5e5ef;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}.export{padding:20px 18px}.build-note{font-size:8px;color:#627d91;line-height:1.9;margin-top:18px}.build-note span{color:#3e637c;padding:0 5px}.footer{display:flex;justify-content:space-between;gap:10px;padding:17px 27px;border-top:1px solid var(--line);font-size:8px;color:#668297}@media(max-width:1300px){.layout{grid-template-columns:244px minmax(450px,1fr) 240px}.control-section{padding-left:13px;padding-right:13px}.top-meta .top-tag:nth-child(2){display:none}.toolbar{flex-wrap:wrap}.view-options{margin-left:auto}}@media(max-width:1050px){.layout{grid-template-columns:245px minmax(0,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.telemetry-head{grid-column:1/-1;padding:13px 20px}.metric-pair{display:flex}.metric-pair .metric-block{flex:1}.wheels,.vectors,.export{border-right:1px solid var(--line)}.export{grid-column:1/-1}.footer span:nth-child(2){display:none}}@media(max-width:720px){.layout{display:flex;flex-direction:column}.left{order:2;display:grid;grid-template-columns:1fr 1fr}.viewport-panel{order:1}.right{order:3}.viewport-head{padding:17px}.viewport-head h1{font-size:16px}.canvas-wrap{min-height:370px;flex:auto}.toolbar{padding:10px}.view-options{flex-wrap:wrap;margin-left:0}.left .control-section{border-right:1px solid var(--line)}.right{display:block}.metric-pair{display:grid}.topbar{padding:14px}.top-meta{display:none}.strap{padding:0 13px;gap:8px;font-size:8px}.strap-right{display:none}.footer{padding:14px}}@media(max-width:450px){.left{display:block}.canvas-wrap{min-height:300px}.plot-legend{gap:5px}.plot-legend span{font-size:7px}.canvas-top-right{display:none}.axis-legend{left:14px;bottom:12px;gap:8px}.viewport-instructions{display:none}.metric-value strong{font-size:48px}}