/* Credible miniature machines. Geometry is supplied by FactoryArt.layout,
   so the illustration, hit areas and cable path use one set of anchors. */
.machine-main > .machine-art{display:block;width:180px;height:160px;overflow:visible}
.machine-main{filter:drop-shadow(0 6px 4px #435a3521)}
.machine-main:hover{filter:drop-shadow(0 8px 5px #435a3528)}

/* Three individual cartridge wells live below the keyboard, not on the
   browser display. The clear, generous button remains the drag target. */
.machine[data-machine="laptop"] .browser-chips{inset:0;left:0;top:0;width:180px;height:160px;display:block;pointer-events:none;z-index:5}
.machine[data-machine="laptop"] .cart-slot{position:absolute;left:var(--slot-x);top:var(--slot-y);width:var(--slot-w,26px);height:var(--slot-h,24px);display:grid;place-items:center;pointer-events:auto;border:1px solid #697d68;border-radius:3px;background:#e7e9d6;box-shadow:inset 0 2px 2px #5b70513d;padding:0;color:#859576;font-size:12px;transition:transform .15s,box-shadow .15s,background .15s;touch-action:none;overflow:visible}
.machine[data-machine="laptop"] .cart-slot[data-part="html"]{--slot-x:42px;--slot-y:119px;--slot-w:26px;--slot-h:24px;--slot-accent:#dfa05e}
.machine[data-machine="laptop"] .cart-slot[data-part="css"]{--slot-x:77px;--slot-y:119px;--slot-w:26px;--slot-h:24px;--slot-accent:#6eaa8b}
.machine[data-machine="laptop"] .cart-slot[data-part="js"]{--slot-x:112px;--slot-y:119px;--slot-w:26px;--slot-h:24px;--slot-accent:#d4b45f}
.machine[data-machine="laptop"] .cart-slot:before{content:'';position:absolute;top:-3px;left:3px;right:3px;height:2px;border-radius:1px;background:var(--slot-accent);pointer-events:none}
.machine[data-machine="laptop"] .cart-slot > svg{width:28px;height:28px;max-width:none;overflow:visible;pointer-events:none;transform:translate(-.2px,-2px)}
.machine[data-machine="laptop"] .cart-slot.loaded{background:#edf0db;border-color:#7d906f;box-shadow:0 2px 0 #7a8c68,inset 0 1px 0 #fffdf0}
.machine[data-machine="laptop"] .cart-slot:hover{transform:translateY(-2px);background:#fff4cb;box-shadow:0 2px 0 #a18d55,0 0 0 3px #efd5956b}
.machine[data-machine="laptop"] .cart-slot.drop-hover{background:#fff1ba;box-shadow:0 2px 0 #9a7e37,0 0 0 4px #f1c96880;border-color:#b9913f;transform:translateY(-2px)}
.machine[data-machine="laptop"] .cart-slot:focus-visible{outline:2px solid #b28e46;outline-offset:4px}

/* Visible plug: ridged grip, top latch, a distinct metal nose facing
   right. Recessed socket: dark mouth open on the left. No dot or battery. */
.machine .port{width:56px;height:50px;top:var(--port-y,96px);left:var(--port-x,0px);right:auto;padding:0;border:0;border-radius:11px;background:none;box-shadow:none;cursor:grab;overflow:visible;isolation:isolate;z-index:6;touch-action:none}
.machine .port.in,.machine .port.out{left:var(--port-x,0px);right:auto}
.machine .port .port-face{--plug-case:#bec6bd;--plug-edge:#6b8170;--plug-metal:#dce2d6;position:absolute;left:13px;top:14px;width:30px;height:22px;border-radius:4px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:2px;border:1.5px solid var(--plug-edge);background:var(--plug-case);box-shadow:0 2px 0 #6d8065,0 0 0 2px #f3f3e4;pointer-events:none;transition:background .16s,box-shadow .16s,transform .16s}
.machine .port.out .port-face{width:27px;border-radius:5px 2px 2px 5px;left:12px;box-shadow:inset 0 2px 0 #e3e9da,0 2px 0 #6d8065,0 0 0 2px #f3f3e4;background:var(--plug-case);border-color:var(--plug-edge)}
.machine .port.out .port-face:before{content:'';position:absolute;left:8px;top:-5px;width:14px;height:5px;border:1.3px solid var(--plug-edge);border-bottom:0;border-radius:2px 2px 0 0;background:var(--plug-metal);transform:none}
.machine .port.out .port-face:after{content:'';position:absolute;right:-7px;top:3px;width:8px;height:13px;border:1.3px solid var(--plug-edge);border-left:0;border-radius:0 2px 2px 0;background:repeating-linear-gradient(0deg,var(--plug-metal) 0,var(--plug-metal) 3px,#899a82 3px,#899a82 4px)}
.machine .port.out .port-face i{height:10px;width:2px;border:0;border-radius:1px;background:#758a72;box-shadow:1px 0 0 #eaf0df;transform:none}
.machine .port.in .port-face{left:13px;width:30px;height:22px;border:2px solid #a2b29b;border-left:4px solid #c9d3ba;border-radius:3px;background:#455d4a;box-shadow:inset 2px 2px 0 #2f4539,0 2px 0 #708367,0 0 0 2px #f3f3e4}
.machine .port.in .port-face:before{content:'';position:absolute;left:-5px;top:5px;width:4px;height:7px;background:#455d4a;border:0;box-shadow:none}
.machine .port.in .port-face:after{content:'';position:absolute;left:5px;top:3px;width:17px;height:2px;border:0;border-radius:0;background:#7e966d;box-shadow:none}
.machine .port.in .port-face i{height:7px;width:2px;border:0;border-radius:.5px;background:#b7ae79;box-shadow:0 1px 0 #263c2b;transform:none}
.machine .port.connected .port-face{--plug-case:#74b785;--plug-edge:#3d7950;--plug-metal:#b9ddaa;border-color:#3d7950;background:#74b785;box-shadow:inset 0 2px 0 #acd3a1,0 2px 0 #3b6d44,0 0 0 2px #dce9cd}
.machine .port.connected.out .port-face i{background:#40734b;box-shadow:1px 0 0 #c2dfae}
.machine .port.connected.in .port-face{border-left-color:#a7d399;background:#3c7650;box-shadow:inset 2px 2px 0 #2d5e3d,0 2px 0 #3d7046,0 0 0 2px #dce9cd}
.machine .port.connected.in .port-face:before{background:#3c7650}.machine .port.connected.in .port-face:after{background:#a4d898}
.machine .port.connected.in .port-face i{background:#d3e8b7;box-shadow:0 1px 0 #295b38}
.machine .port:hover .port-face,.machine .port.chosen .port-face{transform:translateY(-1px);box-shadow:0 2px 0 #917339,0 0 0 4px #edd4997d}
.machine .port:focus-visible{outline:2px solid #b38a3a;outline-offset:-3px}
body.wire-dragging .machine .port{opacity:.27}
body.wire-dragging .machine .port.drag-start,body.wire-dragging .machine .port.can-connect{opacity:1}
body.wire-dragging .machine .port.drag-start .port-face,body.wire-dragging .machine .port.can-connect .port-face{--plug-case:#e2b764;--plug-edge:#9b7737;--plug-metal:#f3d9a3;background:#e2b764;border-color:#a47b34;box-shadow:inset 0 2px 0 #fff0be,0 2px 0 #977237,0 0 0 5px #ebca8770}
body.wire-dragging .machine .port.can-connect.in .port-face:before{background:#e2b764}
body.wire-dragging .machine .port.can-connect.in .port-face:after{background:#ffe9b7}
body.wire-dragging .machine .port.drop-hover .port-face{transform:scale(1.08);box-shadow:inset 0 2px 0 #fff2c9,0 2px 0 #977237,0 0 0 6px #e8c37b99;animation:none}
.machine .port.tutorial-target .port-face{animation:toy-plug-invite 1.8s ease-in-out infinite}
@keyframes toy-plug-invite{50%{transform:translateX(2px);box-shadow:0 2px 0 #977237,0 0 0 4px #edd29475}}

/* Quiet casing details have one weight; interactive surfaces own contrast. */
.machine .machine-state{font-size:9px;line-height:1.5;color:#6c8067}
.machine[data-machine="laptop"] .machine-label{top:151px}
.machine[data-machine="laptop"] .machine-state{top:178px}
.machine[data-machine="server"] .machine-grip{left:68px;top:-10px}
.machine[data-machine="build"] .machine-grip{left:auto;right:5px;top:31px}
.machine[data-machine="database"] .machine-grip{left:72px;top:-12px}
.machine[data-machine="model"] .machine-grip{left:64px;top:-13px}
.machine[data-machine="backend"] .machine-grip{left:auto;right:-9px;top:45px}
.machine .machine-grip{width:29px;height:23px;border-radius:5px;font-size:20px}
.machine.powered-off .machine-main{opacity:.75}
@media(prefers-reduced-motion:reduce){.machine .port .port-face,.machine .cart-slot{animation:none!important;transition:none!important}}
html[data-motion="off"] .machine .port .port-face,html[data-motion="off"] .machine .cart-slot{animation:none!important;transition:none!important}
/* The build table shows loose inputs becoming one package. Only the
   paper feed moves while a build is running; idle hardware stays still. */
.machine[data-machine="build"].working .art-build-sheets{animation:build-sheet-feed .65s ease-in-out infinite}
@keyframes build-sheet-feed{50%{transform:translate(3px,2px)}}
@media(prefers-reduced-motion:reduce){.art-build-sheets{animation:none!important}}
html[data-motion="off"] .art-build-sheets{animation:none!important}