:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#edf2f9;background:#0d121c;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #273040}
.brand{display:flex;align-items:center;gap:12px;font-weight:650;font-size:17px}
.mark{display:grid;place-items:center;width:29px;height:29px;background:#b6f46b;color:#18281c;border-radius:7px;font-weight:900}
.divider{color:#415063;margin:0 6px}
.muted{color:#8d9aac;font-weight:400}
.header-right{display:flex;gap:20px;align-items:center;font-size:11px;letter-spacing:1px}
.pill{border:1px solid #42516b;border-radius:20px;padding:7px 12px;font-size:11px;letter-spacing:.2px}
.pill.live{background:#223723;border-color:#446739;color:#c0fa88}
.pill.error{background:#492b2b;color:#ffa2a2}
main{display:grid;grid-template-columns:minmax(0,1fr) 330px;height:calc(100dvh - 169px);min-height:420px}
.viewport{position:relative;overflow:hidden;background:#182433}
#scene{position:absolute;inset:0}
#scene canvas{width:100%;height:100%;display:block}
.raw-view{position:absolute;inset:70px 20px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.raw-view[hidden],.raw-pair[hidden]{display:none}
.raw-pair{width:min(100%,768px)}
.raw-pair img{display:block;width:100%;height:auto;image-rendering:pixelated}
.raw-captions{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:12px;color:#a4b8cd;padding-bottom:10px}
#raw-status{font-size:12px;color:#a4b8cd;text-align:center;margin:0}
.eyebrow,.section-label{font-size:10px;letter-spacing:1.65px;color:#91a4bb;font-weight:600}
.view-controls{position:absolute;right:20px;top:20px;left:20px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:5px}
button{font:inherit;color:inherit;background:#192536;border:1px solid #39495d;border-radius:6px;padding:8px 10px;cursor:pointer;font-size:11px}
button:hover,button.selected{border-color:#b6f46b;color:#d5ffb0;background:#26372c}
button:focus-visible{outline:2px solid #b6f46b;outline-offset:3px}
button:disabled{opacity:.45;cursor:default;border-color:#39495d;color:inherit;background:#192536}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#637187;flex-shrink:0}
.dot.active{background:#b6f46b;box-shadow:0 0 10px #b6f46b22}
.loading{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);padding:15px 20px;border:1px solid #42546a;background:#142031ed;border-radius:10px;font-size:13px;max-width:80%;line-height:1.6}
.loading.hidden{display:none}
aside{padding:26px 23px;background:#111924;border-left:1px solid #273040;overflow:auto}
.section-label{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.3px}
.tiny-pill{border:1px solid #39465a;padding:4px 5px;border-radius:4px;font-size:8px;letter-spacing:.8px}
h2{font-size:26px;letter-spacing:-.8px;margin:15px 0 5px;font-weight:550}
.subheading{font-size:12px;color:#8395ab;margin:0}
.connection-map{display:flex;align-items:center;margin:23px 8px 8px}
.server-icon,.robot-icon{display:grid;place-items:center;width:38px;height:35px;border:1px solid #546747;border-radius:7px;color:#b6f46b;font-size:22px;background:#202d26}
.robot-icon{font-size:13px;width:auto;min-width:38px;padding:0 7px;white-space:nowrap}
.connection-line{height:1px;flex:1;background:linear-gradient(90deg,#7baf54,#304c37);position:relative}
.connection-line:after{content:'';position:absolute;right:35%;top:-2px;width:5px;height:5px;background:#b6f46b;border-radius:50%}
.connection-caption{display:flex;justify-content:space-between;color:#879ab0;font-size:10px;margin-bottom:24px}
.metrics{display:flex;gap:28px;border-top:1px solid #283244;padding-top:19px;margin-bottom:24px}
.metrics>div{display:flex;flex-direction:column;gap:7px}
.metrics strong{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
#active-count{font-size:inherit;color:inherit}
.metrics small{font-size:17px;color:#61738d}
.metrics span{font-size:10px;color:#8093ac}
.task-card{padding:16px;background:#1b2735;border:1px solid #344155;border-radius:9px}
.task-card h3{font-size:13px;font-weight:500;line-height:1.6;margin:10px 0 15px}
.task-state{display:flex;align-items:center;gap:7px;font-size:10px;color:#c7e3a9}
.progress{height:3px;background:#374758;margin:15px 0 9px;border-radius:2px;overflow:hidden}
.progress>div{height:100%;background:#b6f46b;width:0;transition:width .15s}
.step-row{display:flex;justify-content:space-between;font-size:9px;color:#8fa3ba}
.stat-row{display:flex;justify-content:space-between;margin-top:15px;font-size:11px;color:#8d9eb5}
.stat-row strong{font-weight:500;color:#d6e1ef;font-variant-numeric:tabular-nums}
.history-heading{margin-top:25px}
.history-heading>span{font-size:8px;letter-spacing:.5px}
.history{min-height:62px;font-size:10px;color:#8194ab}
.history p{line-height:1.5}
.history-row{display:flex;justify-content:space-between;margin-top:12px}
.history-row .ok{color:#b6f46b}
.history-row .fail{color:#efb380}
.compute-note{border-top:1px solid #283244;margin-top:25px;padding-top:17px;font-size:10px;line-height:1.7}
.compute-note b{display:block;color:#b6cbdf;font-weight:500}
.compute-note>span{color:#778ba5}
footer{height:101px;display:flex;align-items:center;padding:15px 26px;gap:25px;border-top:1px solid #273040}
.fleet-title{display:flex;flex-direction:column;gap:8px;min-width:75px}
.fleet-title strong{font-size:13px;font-weight:500}
.fleet{display:grid;grid-template-columns:repeat(8,minmax(70px,1fr));gap:9px;flex:1}
.robot-card{text-align:left;display:flex;flex-direction:column;gap:8px;padding:11px 13px;background:#141e2c;border-color:#29394d}
.robot-card b{font-size:11px;font-weight:500}
.robot-card>span{display:flex;align-items:center;gap:5px;font-size:9px;color:#8193a9}
.robot-card.active{border-color:#536e42;background:#203028}
.robot-card.active>span{color:#b6dc90}
@media(max-width:1150px){
.robot-card{padding:10px 8px}
}
@media(max-width:800px){header{padding:0 15px}
.header-right>.muted{display:none}
main{grid-template-columns:1fr;height:auto}
.viewport{height:65dvh;min-height:420px}
aside{border-left:0;display:block;padding:20px}
.metrics{margin-bottom:18px}
.connection-map,.connection-caption{display:none}
.task-card{max-width:100%}
.compute-note{margin-top:18px}
footer{height:auto;padding:16px;gap:15px;align-items:flex-start}
.fleet{grid-template-columns:repeat(4,1fr)}
}
