@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --bg:#091015; --panel:#101a21; --panel-2:#14232c; --line:#263942; --line-soft:rgba(143,185,199,.16); --text:#edf6f8; --muted:#8ba3ad; --muted-2:#607681; --cyan:#7ce4ed; --cyan-deep:#2ba9b9; --m1:#f4ad5d; --m2:#2f7fd3; --m3:#f0a52b; --m4:#e56b76; --m5:#a889ff; --ok:#70dbbf; --danger:#f17b86; --shadow:0 24px 70px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--text); background:radial-gradient(circle at 82% 8%,rgba(53,112,130,.17),transparent 30%),radial-gradient(circle at 15% 60%,rgba(44,78,119,.12),transparent 30%),var(--bg); font-family:Inter,system-ui,sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { width:100%; max-width:1600px; margin:0 auto; padding:22px 28px 18px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.brand-lockup { display:flex; align-items:center; gap:14px; }.brand-mark { width:46px;height:46px;border:1px solid rgba(124,228,237,.5);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,rgba(124,228,237,.12),rgba(124,228,237,.02));box-shadow:0 0 30px rgba(124,228,237,.08); }.brand-mark span { width:4px;height:20px;border-radius:99px;background:var(--cyan);transform-origin:bottom; }.brand-mark span:nth-child(1){transform:rotate(-23deg) scaleY(.7);opacity:.55}.brand-mark span:nth-child(2){height:27px}.brand-mark span:nth-child(3){transform:rotate(23deg) scaleY(.7);opacity:.55}
.eyebrow,.section-kicker { font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.15em;color:var(--cyan);margin:0 0 4px;text-transform:uppercase; }.subtitle { margin:3px 0 0;color:var(--muted);font-size:12px; }.topbar h1 { font-size:24px;line-height:1.25;margin:0;font-weight:700; }.topbar-meta { display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;white-space:nowrap; }.topbar-meta strong { color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.09em; }.status-dot,.view-pulse { width:8px;height:8px;background:var(--ok);border-radius:50%;box-shadow:0 0 0 5px rgba(112,219,191,.1),0 0 18px rgba(112,219,191,.75); }.status-dot.offline { background:var(--danger);box-shadow:0 0 0 5px rgba(241,123,134,.1),0 0 18px rgba(241,123,134,.5); }.divider { width:1px;height:17px;background:var(--line);margin:0 6px; }
.panel { background:linear-gradient(145deg,rgba(18,30,39,.94),rgba(10,17,23,.94));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden; }.system-strip { display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 16px;margin-bottom:16px; }.system-node { display:flex;align-items:center;gap:9px;min-width:130px; }.system-node b,.system-node small { display:block; }.system-node b { font-size:11px; }.system-node small { margin-top:3px;color:var(--muted-2);font-size:9px; }.node-icon { display:grid;place-items:center;width:34px;height:28px;border-radius:8px;background:rgba(124,228,237,.1);color:var(--cyan);font:700 9px 'Space Grotesk',sans-serif;letter-spacing:.05em; }.node-icon.pi{color:#f4ad5d;background:rgba(244,173,93,.1)}.node-icon.esp{color:#70dbbf;background:rgba(112,219,191,.1)}.node-icon.mech{color:#a889ff;background:rgba(168,137,255,.1)}.flow-arrow{color:var(--muted-2);font-size:18px}
.workspace { display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px; }.control-panel { padding:20px 18px; }.panel-heading,.card-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:10px; }.panel-heading{margin-bottom:16px}.panel-heading h2,.card-heading h2 { margin:0;font-size:18px; }.live-chip,.state-pill { font:700 10px 'Space Grotesk',sans-serif;color:#75dfc6;border:1px solid rgba(117,223,198,.32);background:rgba(117,223,198,.08);padding:5px 8px;border-radius:7px;letter-spacing:.1em;white-space:nowrap; }.state-pill.neutral { color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03); }.state-pill.warn { color:#f4ad5d;border-color:rgba(244,173,93,.32);background:rgba(244,173,93,.08); }.state-pill.bad { color:#ff9a9e;border-color:rgba(241,123,134,.32);background:rgba(241,123,134,.08); }
.mode-switch { display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;margin-bottom:12px;border-radius:10px;background:#0a1217;border:1px solid var(--line); }.mode-button { min-height:32px;border:0;border-radius:7px;color:var(--muted);background:transparent;font-size:11px; }.mode-button.active { color:#071115;background:var(--cyan);font-weight:700; }.axis-list { display:flex;flex-direction:column;gap:9px; }.axis-card { border:1px solid var(--line-soft);border-left:3px solid var(--axis);border-radius:13px;padding:11px 11px 9px;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent); }.axis-card-head{display:flex;align-items:flex-start;gap:9px}.axis-index{min-width:33px;height:33px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--axis) 15%,transparent);color:var(--axis);font:700 11px 'Space Grotesk',sans-serif;letter-spacing:.08em}.axis-copy{flex:1}.axis-copy h3{font-size:12px;margin:1px 0 3px;font-weight:600}.axis-copy p{font-size:10px;line-height:1.35;color:var(--muted);margin:0}.axis-angle{font:600 14px 'Space Grotesk',sans-serif;color:var(--axis);min-width:41px;text-align:right;direction:ltr}.axis-m1{--axis:var(--m1)}.axis-m2{--axis:var(--m2)}.axis-m3{--axis:var(--m3)}.axis-m4{--axis:var(--m4)}.axis-m5{--axis:var(--m5)}
.axis-m6{--axis:var(--m5)}.disabled-axis{opacity:.72}.power-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}.power-label{color:var(--muted);font-size:10px;margin-right:auto}.power-label b{color:var(--muted);font-family:'Space Grotesk',sans-serif}.danger-mini{color:#ff9a9e!important;border-color:rgba(241,123,134,.25)!important}
input[type=range]{width:100%;margin:11px 0 0;height:4px;appearance:none;-webkit-appearance:none;border-radius:4px;background:linear-gradient(90deg,var(--axis,var(--cyan)) 50%,#263741 50%);direction:ltr}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--axis,var(--cyan));border:3px solid #14212a;box-shadow:0 0 0 2px var(--axis,var(--cyan)),0 0 15px color-mix(in srgb,var(--axis,var(--cyan)) 55%,transparent)}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--axis,var(--cyan));border:3px solid #14212a}.range-labels{display:flex;justify-content:space-between;direction:ltr;font:9px 'Space Grotesk',sans-serif;color:var(--muted-2);margin-top:6px}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.button{min-height:37px;border:1px solid var(--line);border-radius:10px;background:#17242d;color:var(--text);font-size:11px;transition:.2s ease}.button:hover,.mini-button:hover{border-color:rgba(124,228,237,.6);transform:translateY(-1px)}.button.primary{grid-column:span 2;color:#071115;font-weight:700;background:linear-gradient(100deg,#7ce4ed,#9fe6d7);border-color:transparent;box-shadow:0 9px 24px rgba(124,228,237,.16)}.button.stop{color:#ff9a9e;border-color:rgba(241,123,134,.25)}.button.ghost{color:var(--muted)}.stop-square{display:inline-block;width:9px;height:9px;background:var(--danger);border-radius:2px;margin-right:6px;vertical-align:0}.light-control{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}.subheading{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.subheading b{color:var(--cyan);font-family:'Space Grotesk',sans-serif}.motion-readout{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}.readout-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px}.readout-head #statusLabel{color:var(--cyan);font-weight:600;text-align:right}.readout-bar{height:5px;margin:9px 0 8px;background:#1c2a33;border-radius:8px;overflow:hidden}#readoutFill{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));border-radius:8px;transition:width .25s ease}.motion-readout p{color:var(--muted-2);font-size:10px;line-height:1.55;margin:0}
.viewport-panel{min-width:0;min-height:720px;display:flex;flex-direction:column}.viewport-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:55px;padding:0 18px;border-bottom:1px solid var(--line)}.view-title{display:flex;align-items:center;gap:9px;color:#bcd0d6;font-size:11px}.view-actions{display:flex;align-items:center;gap:11px}.mini-button{color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:10px;transition:.2s}.axis-legend{color:var(--muted-2);font:10px 'Space Grotesk',sans-serif;display:flex;align-items:center;gap:5px}.axis-legend i{width:7px;height:7px;display:inline-block;border-radius:50%}.legend-m1{background:var(--m1)}.legend-m2{background:var(--m2)}.legend-m3{background:var(--m3)}.legend-m4{background:var(--m4)}.legend-m5{background:var(--m5)}.scene-wrap{position:relative;flex:1;min-height:620px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,rgba(47,90,104,.22),transparent 55%),linear-gradient(180deg,#0b151b,#081017)}.scene-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.33;background-image:linear-gradient(rgba(119,189,200,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(119,189,200,.06) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent)}#sceneWrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scene-caption{position:absolute;z-index:2;font:9px 'Space Grotesk',sans-serif;letter-spacing:.08em;color:#617b86;pointer-events:none}.scene-caption span{color:#3d555e}.top-left{top:16px;left:18px}.bottom-right{bottom:16px;right:18px;color:#69c7bf}.zone-badge{position:absolute;z-index:2;top:16px;right:18px;display:flex;align-items:center;gap:7px;color:#9de4c8;font-size:10px;padding:6px 9px;border:1px solid rgba(140,226,191,.3);border-radius:7px;background:rgba(31,91,82,.18);pointer-events:none}.zone-dot{width:7px;height:7px;border-radius:50%;background:#8ce2bf;box-shadow:0 0 12px rgba(140,226,191,.9)}.axis-callout{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;color:#7d959e;font-size:10px;pointer-events:none;opacity:.88}.axis-callout b{font:700 10px 'Space Grotesk',sans-serif;padding:4px 6px;border-radius:5px}.callout-m1{top:12%;right:16%}.callout-m1 b{color:var(--m1);background:rgba(244,173,93,.12);border:1px solid rgba(244,173,93,.3)}.callout-m2{top:18%;left:50%}.callout-m2 b{color:var(--m2);background:rgba(47,127,211,.12);border:1px solid rgba(47,127,211,.3)}.callout-m3{top:30%;left:12%}.callout-m3 b{color:var(--m3);background:rgba(240,165,43,.12);border:1px solid rgba(240,165,43,.3)}.callout-m4{top:38%;right:12%}.callout-m4 b{color:var(--m4);background:rgba(229,107,118,.12);border:1px solid rgba(229,107,118,.3)}.callout-m5{top:51%;right:19%}.callout-m5 b{color:var(--m5);background:rgba(168,137,255,.12);border:1px solid rgba(168,137,255,.3)}.viewport-footer{min-height:43px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 18px;color:var(--muted-2);font-size:10px}.footer-key{color:var(--muted);border:1px solid var(--line);padding:2px 5px;border-radius:4px;font-size:9px}.coordinate-readout{direction:ltr;font:10px 'Space Grotesk',sans-serif;color:#6e8993}.coordinate-readout b{color:#b1d1d6;font-weight:500}
.monitor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.monitor-card{padding:18px;min-height:245px}.card-heading{margin-bottom:15px}.metric-list{display:grid;gap:8px}.metric-list>div,.metric-grid>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(143,185,199,.09);font-size:10px}.metric-list span,.metric-grid span{color:var(--muted)}.metric-list b,.metric-grid b{font-family:'Space Grotesk',sans-serif;color:var(--text);font-size:10px;text-align:right;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.monitor-note{color:var(--muted-2);font-size:10px;line-height:1.55;margin:13px 0 0}.model-list{display:grid;gap:7px;max-height:145px;overflow:auto}.model-item{padding:9px;border:1px solid var(--line-soft);border-radius:9px;background:rgba(255,255,255,.02)}.model-name{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:600}.model-name span:last-child{color:var(--cyan);font-family:'Space Grotesk',sans-serif}.model-meta{color:var(--muted-2);font-size:9px;margin-top:5px;line-height:1.45}.empty-state{padding:22px 8px;text-align:center;color:var(--muted-2);font-size:10px;border:1px dashed var(--line);border-radius:9px}
.explain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}.explain-card{display:flex;align-items:flex-start;gap:13px;padding:18px;min-height:132px}.explain-number{color:var(--cyan);font:600 24px 'Space Grotesk',sans-serif;line-height:1;opacity:.75}.explain-card h3{margin:2px 0 6px;font-size:14px}.explain-card p:not(.section-kicker){color:var(--muted);font-size:10px;line-height:1.7;margin:0}.app-footer{display:flex;justify-content:space-between;align-items:center;color:#526a74;font-size:9px;padding:14px 3px 0;gap:15px}
@media (max-width:1200px){.workspace{grid-template-columns:330px minmax(0,1fr)}.monitor-grid{grid-template-columns:1fr 1fr}.model-card{grid-column:span 2}}@media (max-width:1050px){.workspace{grid-template-columns:1fr}.control-panel{order:2}.viewport-panel{min-height:610px}.axis-list{display:grid;grid-template-columns:repeat(2,1fr)}.explain-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:720px){.app-shell{padding:14px}.topbar{align-items:flex-start}.topbar-meta{display:none}.topbar h1{font-size:20px}.system-strip{justify-content:flex-start;overflow:auto}.flow-arrow{display:none}.system-node{min-width:112px}.axis-list,.monitor-grid,.explain-grid{grid-template-columns:1fr}.model-card{grid-column:auto}.viewport-toolbar{padding:0 12px}.view-actions .axis-legend{display:none}.scene-wrap{min-height:450px}.viewport-footer{gap:10px;font-size:9px}.coordinate-readout{display:none}.app-footer{display:block;line-height:1.7}}