:root{--rp-amber:#f5a623;--rp-line:rgba(148,163,184,.28);--rp-panel:#0c151a;--rp-green:#35d879;--rp-red:#ed4b45;--rp-blue:#3fb8d5}.robot-main{min-height:100vh}.robot-intro{padding-bottom:1.5rem}.robot-intro h1{margin:.6rem 0}.robot-lead{max-width:850px;color:var(--muted)}.robot-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(285px,.75fr);gap:1.15rem;align-items:start}.robot-panel,.diag{border:1px solid var(--rp-line);border-radius:15px;background:var(--surface);padding:1rem}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.panel-title span{font:700 .74rem monospace;color:var(--rp-amber);letter-spacing:.08em}.panel-title h2{margin:.2rem 0 0}.tower{display:flex;flex-direction:column;gap:4px;background:#111b20;border:1px solid #43515a;padding:7px;border-radius:7px}.tower i{width:18px;height:11px;border-radius:3px;opacity:.2}.tower i:nth-child(1){background:var(--rp-red)}.tower i:nth-child(2){background:var(--rp-amber)}.tower i:nth-child(3){background:var(--rp-green)}.tower i.active{opacity:1;box-shadow:0 0 12px currentColor}.robot-stage{position:relative;min-height:455px;overflow:hidden;border:1px solid #47545c;border-radius:13px;background:linear-gradient(180deg,#0b1419,#17262d);isolation:isolate}.robot-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,166,35,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(245,166,35,.07) 1px,transparent 1px);background-size:42px 42px;transform:perspective(500px) rotateX(58deg) scale(1.6);transform-origin:bottom}.zone-label{position:absolute;top:18px;left:20px;color:rgba(245,166,35,.75);font:700 .68rem monospace}.input-station,.output-station{position:absolute;bottom:70px;width:125px;height:54px;border:5px solid #495860;border-radius:8px;background:#1b262c;box-shadow:0 12px 0 #303b42;color:#b9c7cd;text-align:center;font:700 .64rem monospace}.input-station{left:5%}.output-station{right:5%}.input-station span,.output-station span{position:absolute;top:70px;left:0;right:0}.product,.target{position:absolute;left:35px;bottom:49px;width:55px;height:45px;border-radius:5px;background:linear-gradient(145deg,#ffd176,#e49517);color:#261905;display:grid;place-items:center;font:800 .72rem monospace;box-shadow:0 8px 15px rgba(0,0,0,.4);transition:all .65s ease;z-index:7}.target{opacity:0}.target.loaded{opacity:1}.product.held{opacity:0}.robot-unit{position:absolute;left:50%;bottom:52px;width:230px;height:315px;transform:translateX(-50%)}.base{position:absolute;left:78px;bottom:0;width:78px;height:73px;border:2px solid #84939b;border-radius:8px;background:linear-gradient(135deg,#3a474e,#151d21);display:grid;place-items:center;color:#dfe7ea}.arm{position:absolute;left:98px;bottom:64px;width:42px;height:215px;transform-origin:21px 196px;transition:transform .75s cubic-bezier(.4,0,.2,1)}.arm.pick{transform:rotate(-56deg)}.arm.place{transform:rotate(57deg)}.lower,.upper{position:absolute;left:13px;width:17px;border:1px solid #c0cbd0;border-radius:9px;background:linear-gradient(90deg,#71828a,#e3e9ec,#65767e)}.lower{bottom:25px;height:115px;transform:rotate(-7deg);transform-origin:bottom}.upper{bottom:132px;height:88px;transform:rotate(20deg);transform-origin:bottom}.joint{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e4ebee,#55666f 65%,#172126);border:2px solid #aebbc1}.j1{left:3px;bottom:124px;width:36px;height:36px}.j2{left:8px;top:-7px;width:26px;height:26px}.gripper{position:absolute;left:5px;top:-34px;width:32px;height:32px}.gripper i{position:absolute;top:0;width:5px;height:30px;border-radius:2px;background:#d1dadd;transition:transform .2s}.gripper i:first-child{left:4px;transform:rotate(-16deg)}.gripper i:last-child{right:4px;transform:rotate(16deg)}.gripper.closed i:first-child{transform:rotate(-4deg)}.gripper.closed i:last-child{transform:rotate(4deg)}.sensor-beacon{position:absolute;left:18%;bottom:130px;width:15px;height:42px;border:2px solid #b6c3c9;background:#667982;border-radius:3px}.sensor-beacon b{position:absolute;left:13px;top:8px;width:0;height:2px;background:#ff3c3c;box-shadow:0 0 8px #ff3c3c;transition:width .2s}.sensor-beacon.active b{width:72px}.sensor-beacon small{position:absolute;top:45px;left:-8px;color:#c6d1d6;font:700 .62rem monospace}.mode-row{display:flex;align-items:center;gap:.55rem;margin-top:1rem}.mode-button{border:1px solid var(--rp-line);border-radius:8px;background:var(--surface-strong);color:var(--paper);padding:.55rem .9rem;cursor:pointer}.mode-button.active{border-color:var(--rp-amber);color:var(--rp-amber)}#modeInfo{margin-left:auto;color:var(--rp-amber);font:700 .75rem monospace}.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.7rem}.control{min-height:65px;border:1px solid var(--rp-line);border-radius:9px;background:var(--surface-strong);color:var(--paper);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:.55rem .7rem}.control:hover{border-color:var(--rp-amber)}.control b{font-size:.75rem}.control small{color:var(--muted-2);font-family:monospace}.control.start{border-left:4px solid var(--rp-green)}.control.stop,.control.emergency{border-left:4px solid var(--rp-red)}.control.reset{border-left:4px solid var(--rp-amber)}.control:disabled{opacity:.38;cursor:not-allowed}.diagnostics{display:grid;gap:1rem}.diag h3{margin:0 0 .8rem}.hmi{background:#071116;color:#e9f2f5;border-color:#40545d}.hmi-head,.status{display:flex;justify-content:space-between}.hmi-head{padding-bottom:.55rem;border-bottom:1px solid #30444d;color:#73cde0;font:700 .7rem monospace}.status{padding:.75rem 0}.status span{color:#9eb2ba}.status strong{color:var(--rp-green);font:800 .8rem monospace}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.metrics div{background:#0e1b21;border:1px solid #20343c;border-radius:6px;padding:.55rem}.metrics span{display:block;color:#80979f;font-size:.68rem}.metrics b{color:#f4b447;font:800 .85rem monospace}.hmi p{min-height:60px;margin:.65rem 0 0;padding:.6rem;border-left:3px solid var(--rp-blue);background:#0b171d;color:#c7d6db;font-size:.78rem}.io-list{display:grid;gap:.45rem}.io-list>div{display:grid;grid-template-columns:12px 48px 1fr;gap:.45rem;align-items:center;font-size:.78rem}.io-list i{width:10px;height:10px;border:1px solid #68777f;border-radius:50%;background:#29343a}.io-list div.active i{background:var(--rp-green);box-shadow:0 0 9px var(--rp-green)}.io-list code{color:var(--rp-amber)}.io-list hr{width:100%;border:0;border-top:1px solid var(--rp-line)}.sequence ol{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}.sequence li{padding:.45rem .55rem;border:1px solid var(--rp-line);border-radius:6px;color:var(--muted);font:700 .72rem monospace}.sequence li.active{border-color:var(--rp-green);color:var(--rp-green);background:rgba(53,216,121,.08)}.explanation{padding-top:1rem}html[data-theme="light"] .robot-stage{background:linear-gradient(180deg,#dfe8ec,#aebdc5)}@media(max-width:1050px){.robot-layout{grid-template-columns:1fr}.diagnostics{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.diagnostics{grid-template-columns:1fr}.control-grid{grid-template-columns:1fr 1fr}.robot-stage{min-height:390px}.robot-unit{transform:translateX(-50%) scale(.82);transform-origin:bottom}.input-station,.output-station{width:100px}.output-station{right:2%}.input-station{left:2%}}@media(max-width:470px){.robot-panel{padding:.6rem}.robot-stage{min-height:340px}.robot-unit{transform:translateX(-50%) scale(.68)}.input-station,.output-station{width:78px}.product,.target{left:13px}.control{min-height:60px}}@media(prefers-reduced-motion:reduce){.arm,.product,.target{transition:none!important}}