.diagram.robot-demo{position:relative;padding:26px;overflow:hidden;border:1px solid #385b70;border-radius:14px;background:radial-gradient(ellipse at 75% 12%,#1b3b5080,transparent 60%),linear-gradient(155deg,#142a3b,#0b1926 70%);box-shadow:0 24px 65px #0003;isolation:isolate}
.robot-demo::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;background:linear-gradient(90deg,transparent,#8dddff,transparent);pointer-events:none}
.robot-demo-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.robot-demo-header .index{font-size:8px;letter-spacing:.08em;margin:0;color:#94b5cb}.robot-status{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:#9abbcf;white-space:nowrap}.robot-status i{display:block;width:5px;height:5px;border-radius:50%;background:#6c8494}.is-playing .robot-status i{background:#79dcdf;box-shadow:0 0 9px #79dcdf80}
.robot-demo>h3{font-size:32px;line-height:1.06;margin:0;letter-spacing:-.045em}.robot-demo>h3 span{color:#7ad0ff}.robot-scene{position:relative;margin:8px -12px 18px}.robot-scene svg{display:block;width:100%;margin:0;overflow:visible}.robot-floor path{fill:#17374b1f;stroke:#4d859d;stroke-opacity:.18;stroke-width:.6}.robot-floor path:not(:first-child){fill:none}.robot-frame path{fill:none;stroke:#688da5;stroke-width:1;stroke-opacity:.45}.robot-frame path:nth-child(-n+4){stroke-opacity:.8}.robot-frame path:nth-child(n+5):nth-child(-n+8){stroke-dasharray:3 5;stroke-opacity:.5}.robot-cables path{fill:none;stroke:url(#cable-light);stroke-width:1.65;stroke-linecap:round}.robot-cables-back path{stroke-width:1.3;opacity:.42}.robot-trail{fill:none;stroke:#69d6ff;stroke-width:2;stroke-opacity:.25;stroke-dasharray:2 6;stroke-linecap:round}.robot-print-path path{fill:none;stroke:#5cc8f2;stroke-width:2;opacity:.4}.robot-print-path path:last-child{stroke:#b1eeff;opacity:.85}.robot-head polygon{fill:url(#head-metal);stroke:#88d5fd;stroke-width:1.2;stroke-linejoin:round}.robot-head [data-head-face="0"]{fill:#88b5d0}.robot-head [data-head-face="2"]{fill:#1e4159}.robot-head [data-nozzle]{stroke:#81dfff;stroke-width:8;stroke-linecap:round}.robot-head [data-head-shadow]{fill:#59bdf3;opacity:.08;filter:url(#tip-glow)}.robot-tip-halo{fill:#69ddff;filter:url(#tip-glow)}.robot-tip{fill:white}.robot-anchors .anchor-ring{fill:#0e283b;stroke:#659bbb;stroke-width:1;opacity:.9}.robot-anchors rect{fill:#bdeaff;stroke:#e7f9ff;stroke-width:.6}.robot-anchors text,.robot-axis text,.robot-head-label text{fill:#80a7bc;font-family:Arial,Helvetica,sans-serif;font-size:9px;letter-spacing:.03em}.robot-head-label text{fill:#b8d6e8;font-size:8px}.robot-head-label path{stroke:#91bed9;stroke-width:.8}.robot-axis path{fill:none;stroke:#78a6c1;stroke-width:1}.robot-scene-caption{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#91b3c9;letter-spacing:.03em;margin:0 12px}.robot-scene-caption span:last-child{font-size:8px;color:#527e97;letter-spacing:.09em}
.robot-controls{padding:16px;border:1px solid #36566b70;border-radius:8px;background:#07141d65}.robot-mode-controls{display:flex;gap:6px;margin-bottom:20px}.robot-mode-controls button{background:transparent;color:#8faec1;border:1px solid #45657b60;padding:8px 10px;border-radius:5px;font-size:10px;white-space:nowrap;transition:background .2s,color .2s}.robot-mode-controls button[aria-pressed=true]:not(.robot-motion-toggle){background:#58bcff18;border-color:#6bcafa75;color:#bfeaff}.robot-mode-controls button:hover{background:#2c506680;color:#e2f4ff}.robot-mode-controls .robot-motion-toggle{margin-left:auto;border-color:#77c7f170;color:#d8f2ff;display:flex;align-items:center;gap:7px;min-width:69px;justify-content:center}.robot-motion-toggle [data-play-icon]{font-size:11px}.robot-demo .robot-controls label{font-size:10px;color:#a4bfd1;gap:10px}.robot-demo .robot-controls output{font-size:10px;color:#8bddff}.robot-demo .robot-controls input{display:block;appearance:none;-webkit-appearance:none;width:100%;height:4px;border:0;outline-offset:8px;background:linear-gradient(90deg,#72d1ff,#324c60);border-radius:10px;margin:20px 0 13px;cursor:pointer}.robot-controls input::-webkit-slider-thumb{appearance:none;width:15px;height:15px;background:#c4efff;border:3px solid #3e99d0;border-radius:50%;box-shadow:0 0 12px #5fcaff50}.robot-controls input::-moz-range-thumb{width:10px;height:10px;background:#c4efff;border:3px solid #3e99d0;border-radius:50%}.robot-scale-labels{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.04em;color:#658da4}.robot-specs{display:grid;grid-template-columns:repeat(3,1fr);padding:19px 0 16px;gap:10px}.robot-specs>span{font-size:8px;color:#80a1b8;border-right:1px solid #34536980;line-height:1.8}.robot-specs>span:last-child{border:0}.robot-specs b{font-size:21px;line-height:1;display:block;color:#c6e4f5;font-weight:400;letter-spacing:-.04em;margin-bottom:6px}.robot-demo .small{font-size:9px;line-height:1.65;color:#6f94ad;border-top:1px solid #304c6050;padding-top:13px;margin:0}
@media(max-width:760px){.diagram.robot-demo{padding:20px;border-radius:12px}.robot-demo-header .index{font-size:7px;max-width:150px}.robot-status{font-size:8px}.robot-demo-header{margin-bottom:20px}.robot-demo>h3{font-size:30px}.robot-scene{margin:8px -16px 15px}.robot-controls{padding:13px}.robot-mode-controls{gap:5px}.robot-mode-controls button{font-size:9px;padding:9px 8px;min-height:36px}.robot-mode-controls .robot-motion-toggle{min-width:62px;gap:5px}.robot-specs b{font-size:23px}.robot-specs>span{font-size:9px}.robot-demo .small{font-size:10px}.robot-demo .robot-controls label{font-size:11px}.robot-demo .robot-controls input{height:5px;margin:23px 0 17px}.robot-controls input::-webkit-slider-thumb{width:20px;height:20px}.robot-scale-labels{font-size:9px}.robot-scene-caption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.robot-mode-controls button{transition:none}}