/* The cable starts at a plug and lands in a socket. */
.machine .port{width:60px;height:54px;top:107px;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;cursor:grab;touch-action:none;overflow:visible;transition:opacity .15s;isolation:isolate}
.machine .port.in{left:-6px}.machine .port.out{right:-6px}
.machine .port:after{display:none}.port.connected.out .port-face:after{background:#a4d99d;border-color:#427f53}
.machine .port:hover,.machine .port.chosen{transform:none;background:transparent;box-shadow:none}
.port-face{position:absolute;left:15px;top:16px;width:30px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none;transition:box-shadow .15s,background .15s,transform .15s}
.port.out .port-face{background:linear-gradient(#d9dcda,#b3bbb6);border:2px solid #858f88;box-shadow:0 2px 0 #7f8982,0 0 0 2px #edf0e9}
.port.out .port-face:before{content:'';position:absolute;left:2px;top:4px;width:3px;height:10px;background:repeating-linear-gradient(to bottom,#8b948e 0,#8b948e 2px,transparent 2px,transparent 4px);border-radius:1px}
.port.out .port-face i{height:8px;width:3px;border-radius:1px;background:#eef0ec;border:1px solid #8d9890;box-shadow:0 1px 0 #9da79e;transform:translateX(2px)}
.port.out .port-face:after{content:'';position:absolute;right:-4px;top:5px;height:8px;width:4px;border-radius:0 2px 2px 0;background:#d5dbd4;border:1px solid #858f88;border-left:0}
.port.in .port-face{background:#747d77;border:2px solid #b8c0b9;box-shadow:inset 0 2px 0 #59625c,0 2px 0 #89938a,0 0 0 2px #edf0e9}
.port.in .port-face i{height:8px;width:3px;border-radius:1px;background:#4b554d;box-shadow:inset 0 1px 1px #39433b,0 1px 0 #a1ada1}
.port.connected .port-face{background:linear-gradient(#92ce9a,#5aa671);border-color:#427f53;box-shadow:0 2px 0 #3f744c,0 0 0 2px #d7efcf}
.port.connected .port-face i{background:#edffe8;border-color:#89bd86;box-shadow:0 0 3px #d3ffb8}
.machine .port:hover .port-face{box-shadow:0 3px 0 #8b723d,0 0 0 5px #f1d8998a;transform:translateY(-2px)}
.machine .port:focus-visible{outline-offset:1px}.machine .port.tutorial-target{outline:none;animation:none}
.machine .port.tutorial-target .port-face{animation:plugInvite 1.7s ease-in-out infinite;box-shadow:0 3px 0 #8c642f,0 0 0 5px #f4d28270}
body.wire-dragging .port{opacity:.28}body.wire-dragging .port.drag-start,body.wire-dragging .port.can-connect{opacity:1}
body.wire-dragging .port.drag-start .port-face{background:#f6ca71;box-shadow:0 3px 0 #8c642f,0 0 0 5px #f1cc7a8c}
body.wire-dragging .port.can-connect .port-face{background:#e9c47b;border-color:#fff0bd;box-shadow:inset 0 2px 0 #b99a5b,0 0 0 5px #ebcd9475;animation:socketInvite 1s ease-in-out infinite}
body.wire-dragging .port.drop-hover .port-face{background:#f1d38c;border-color:#fff3c9;box-shadow:inset 0 2px 0 #b69b5c,0 0 0 7px #efcf8e99;transform:scale(1.08);animation:none}
.drag-layer{position:absolute;inset:0;width:1200px;height:570px;z-index:8;overflow:visible;pointer-events:none}
.drag-cable{fill:none;stroke:#d89b44;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 3px 1px #89704744)}
.drag-tip{fill:#fff0b7;stroke:#98703b;stroke-width:3;filter:drop-shadow(0 2px 2px #5c5b3930)}
.drag-layer.snapped .drag-cable{stroke:#84a957}.drag-layer.snapped .drag-tip{fill:#e8f4bc;stroke:#729744}
.drag-label{font-family:inherit;font-size:12px;font-weight:600;fill:#596d43;paint-order:stroke;stroke:#fffdf0;stroke-width:5px;stroke-linejoin:round}
.guide-cable{fill:none;stroke:#b69c61;stroke-width:3;stroke-linecap:round;stroke-dasharray:3 9;opacity:.5;pointer-events:none;animation:guideTravel 1.6s linear infinite}
.wire-base,.wire-base.network,.wire-base.data,.wire-base.model{stroke:#65a278;stroke-width:4.5}
.wire-shadow{stroke:#57795c30;stroke-width:7;transform:translateY(3px)}
.wire-group:hover .wire-base{stroke:#80bc8e;stroke-dasharray:none}.wire-hit{touch-action:none;cursor:grab}.wire-cut{display:none}
body.dragging,body.dragging *{-webkit-user-select:none;user-select:none} [data-draggable],.cart-slot.loaded,.machine-grip{touch-action:none;cursor:grab}
.drag-origin{opacity:.3!important}.wire-dragging .port.drag-origin{opacity:1!important}.dragging .drag-ghost{opacity:.95}
.empty-bay.drop-ready{border:2px dashed #bb9d4a;background:#fff1c94d}.empty-bay.drop-hover{background:#edf1c4;border:2px solid #97ae61;filter:drop-shadow(0 0 12px #abc77880)}
.machine.drop-ready:before{content:'';position:absolute;inset:22px -8px 4px;border:2px dashed #bca14e;border-radius:22px;background:#ffefaf1a;pointer-events:none}
.machine.drop-hover:before{border:3px solid #97b15e;background:#e6f0b936;box-shadow:0 0 0 4px #bdd28e33}
.cart-slot.drop-hover,.key-socket.drop-hover{background:#e9f1bd;border:2px solid #86a653;box-shadow:0 0 0 5px #bed78c77}
.toolkit[data-drop=tray]{position:relative;min-height:66px;border:2px solid transparent;border-radius:10px;padding:4px 7px;margin:-4px -7px;transition:background .15s,border-color .15s}
.toolkit[data-drop=tray].drop-ready{background:#eef3d9;border:2px dashed #a6bc7b;box-shadow:0 0 0 4px #cbdab63d}
.toolkit[data-drop=tray].drop-hover{background:#e4eec4;border-style:solid;border-color:#8aa959}
.tray-return-label{position:absolute;left:50%;top:-17px;transform:translateX(-50%);background:#f3f7e5;border:1px solid #adc18b;border-radius:5px;padding:4px 9px;color:#58743d;font-size:10px;white-space:nowrap;pointer-events:none;z-index:2}
.toolkit:not(.drop-ready) .tray-return-label{display:none}
.machine-grip{position:absolute;right:22px;top:4px;width:34px;height:27px;padding:0;display:grid;place-items:center;border-radius:7px;border:1px solid #aebca5;background:#eff2e5ed;color:#70866a;box-shadow:0 2px 0 #adbaa0;font-size:23px;line-height:1;z-index:5;transition:background .15s,transform .15s}
.machine-grip:hover{background:#fff2cc;transform:translateY(-2px);border-color:#c2a05e}
.fault-badge{position:absolute;top:6px;left:8px;width:36px;height:36px;padding:0;display:grid;place-items:center;background:#ffdc7f;border:2px solid #bd8c3b;box-shadow:0 3px 0 #a97d39,0 5px 10px #98733a20;border-radius:12px 12px 12px 3px;font-size:23px;font-weight:700;font-family:Georgia,serif;line-height:1;color:#795623;z-index:7;transform:rotate(-7deg);animation:faultNudge 3.5s ease-in-out infinite;transition:background .15s}
.fault-badge:after{content:'';position:absolute;left:6px;bottom:-6px;width:7px;height:7px;transform:skewY(-35deg);background:#ffdc7f;border-right:2px solid #bd8c3b;border-bottom:2px solid #bd8c3b}
.fault-badge:hover,.fault-badge:focus-visible{background:#ffe9a8;animation:none;transform:rotate(0) translateY(-2px)}.fault-badge:hover:after{background:#ffe9a8}
.empty-bay .fault-badge{top:-12px;left:8px}.inspector .fault-help{padding:9px 11px;background:#fff2cd;border-left:3px solid #d8b364;border-radius:3px 7px 7px 3px;color:#8d6c33;margin-bottom:10px;font-size:11px;line-height:1.6}
.inspector .off{border:2px solid #c69951;background:#fff0d0;color:#946324;box-shadow:0 2px 0 #c5aa74;font-weight:600}
.tray-empty{font-size:10px;color:#8c9b7e;line-height:1.6;padding:10px 0}
@keyframes plugInvite{50%{box-shadow:0 3px 0 #8c642f,0 0 0 7px #f2cc7360}}
@keyframes socketInvite{50%{box-shadow:inset 0 2px 0 #b99a5b,0 0 0 7px #ebcd9480}}
@keyframes guideTravel{to{stroke-dashoffset:-24}}
@keyframes faultNudge{0%,80%,100%{transform:rotate(-7deg)}85%{transform:rotate(3deg) translateY(-3px)}90%{transform:rotate(-10deg) translateY(-2px)}}
@media(max-width:1050px){.first-move{top:4px;left:18px;padding:9px 12px;max-width:330px}.first-move small{margin-top:5px}.topbar{gap:12px}.topbar nav{gap:16px}.project-name{max-width:25vw}.workbench{gap:12px}}
@media(max-width:850px){.first-move{top:0;left:14px;max-width:300px}.first-move strong{font-size:11px}.toolkit[data-drop=tray]{min-height:64px}.action-dock{gap:14px}.machine-grip{width:38px;height:30px}}
@media(max-width:560px){.first-move{top:29px;max-width:calc(100vw - 28px)}.toolkit[data-drop=tray]{min-height:62px;margin:0;padding:4px}.tool-tray{min-height:48px}.tray-return-label{top:-14px;font-size:9px}.topbar nav{gap:9px}.topbar .wordmark strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.machine .port .port-face,.guide-cable,.fault-badge{animation:none!important;transition:none!important}}
html[data-motion=off] .machine .port .port-face,html[data-motion=off] .guide-cable,html[data-motion=off] .fault-badge{animation:none!important;transition:none!important}
/* Keep the carry grip clear of the AI key slot. */
.machine-grip{right:auto;left:66px;top:-12px}
.machine[data-machine="backend"] .machine-grip{left:auto;right:-14px;top:35px}