/* The existing artwork supplies every visible object. Hit regions draw no boxes. */
.workshop-hotspots .workshop-hotspot{width:var(--hit-w);height:var(--hit-h);aspect-ratio:auto;min-width:52px;min-height:52px;background:transparent;border:0;border-radius:0;box-shadow:none;outline:none;touch-action:manipulation}
.workshop-hotspots .workshop-hotspot::before,.workshop-hotspots .workshop-hotspot::after{content:none!important}
.object-glint{position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);pointer-events:none;opacity:.38;background:radial-gradient(ellipse,#fffce3 0 12%,#fff4c65c 25%,transparent 70%);filter:drop-shadow(0 0 2px #ffd57e)}
.object-glint::before,.object-glint::after{content:"";position:absolute;inset:43% 7%;border-radius:50%;background:#fff7cb;opacity:.55}
.object-glint::after{transform:rotate(90deg)}
.workshop-hotspot:hover .object-glint,.workshop-hotspot:focus-visible .object-glint{opacity:1;scale:1.5;filter:drop-shadow(0 0 3px #654221) drop-shadow(0 0 4px #fff2bb)}
.workshop-hotspot:focus-visible .object-glint{width:18px;height:18px}
.workshop-scene-parts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.part-spin{transform-origin:0 0}
.material-light{opacity:0;mix-blend-mode:screen;pointer-events:none}
.motion-0 .part-spin.layer-motion-0,.motion-1 .part-spin.layer-motion-1{animation:illustrated-disc-turn 4.5s cubic-bezier(.32,.04,.21,1) both}
.motion-0 .material-light.layer-motion-0,.motion-1 .material-light.layer-motion-1{animation:illustrated-light 3.8s ease-in-out both}
.room-guide .portrait.is-reacting{animation:none}
.room-scene #room-surprise{display:none}
.room-scene .world-motion .turning-gear{display:none}
.light-mote{width:3px;height:3px;box-shadow:0 0 5px 1px #ffca5d40}
@keyframes illustrated-disc-turn{from{transform:rotate(0deg)}to{transform:rotate(1080deg)}}
@keyframes illustrated-light{0%,100%{opacity:0}25%,65%{opacity:.30}}
body.still .workshop-scene-parts *,body.tab-away .workshop-scene-parts *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .workshop-scene-parts *{animation:none!important;transition:none!important}}
@media(max-width:760px){.room-scene .scene-illustration{aspect-ratio:3/2}.workshop-hotspots .workshop-hotspot{min-width:44px;min-height:44px}}

/* Two articulated image bones, a fixed torso, localized clean plate and a separate goggle pose. */
.zippy-upper-joint{transform:rotate(45deg)}.zippy-elbow-anchor{transform:translateX(48.1px)}.zippy-forearm-joint{transform:rotate(-21.6deg)}
.zippy-upper-joint,.zippy-elbow-anchor,.zippy-forearm-joint,.zippy-upper-stretch,.zippy-forearm-stretch,.zippy-goggle-pose{transform-origin:0 0}
.goggles-on .zippy-goggle-pose{transform:translate(-25px,48px) rotate(-5.9deg) scale(1.041)}
body.still .motion-1 .zippy-goggle-pose{transform:translate(-25px,48px) rotate(-5.9deg) scale(1.041)}

.layered-rotor,.pip-wing-motion{transform-origin:0 0}.motion-0 .layered-rotor{animation:illustrated-disc-turn 4.5s cubic-bezier(.32,.04,.21,1) both}.motion-0 .pip-wing-motion{animation:pip-actual-wing 3.5s ease-in-out both}@keyframes pip-actual-wing{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}

/* Natural contact/settle revision: anticipation, grip hold, follow rim, release, soft return. */
.motion-1 .zippy-upper-joint{animation:zippy-natural-upper 5.2s cubic-bezier(.33,0,.2,1) both}
@keyframes zippy-natural-upper{0%{transform:rotate(44.804deg)}6%{transform:rotate(46.443deg)}16%{transform:rotate(59.679deg)}32%{transform:rotate(-54.541deg)}38%{transform:rotate(-54.541deg)}56%{transform:rotate(-14.001deg)}68%{transform:rotate(11.559deg)}76%{transform:rotate(11.559deg)}87%{transform:rotate(87.918deg)}96%{transform:rotate(40.651deg)}100%{transform:rotate(44.804deg)}}
.motion-1 .zippy-forearm-joint{animation:zippy-natural-forearm 5.2s cubic-bezier(.33,0,.2,1) both}
@keyframes zippy-natural-forearm{0%{transform:rotate(-21.200deg)}6%{transform:rotate(-22.798deg)}16%{transform:rotate(-68.746deg)}32%{transform:rotate(-15.328deg)}38%{transform:rotate(-15.328deg)}56%{transform:rotate(-86.880deg)}68%{transform:rotate(-123.076deg)}76%{transform:rotate(-123.076deg)}87%{transform:rotate(-119.578deg)}96%{transform:rotate(-13.280deg)}100%{transform:rotate(-21.200deg)}}
.motion-1 .zippy-elbow-anchor{animation:zippy-natural-elbow 5.2s cubic-bezier(.33,0,.2,1) both}
@keyframes zippy-natural-elbow{0%{transform:translateX(48.1px)}6%{transform:translateX(48.1px)}16%{transform:translateX(49px)}32%{transform:translateX(50px)}38%{transform:translateX(50px)}56%{transform:translateX(50px)}68%{transform:translateX(49px)}76%{transform:translateX(49px)}87%{transform:translateX(49px)}96%{transform:translateX(48.1px)}100%{transform:translateX(48.1px)}}
.motion-1 .zippy-upper-stretch{animation:zippy-natural-upper-length 5.2s cubic-bezier(.33,0,.2,1) both}
@keyframes zippy-natural-upper-length{0%{transform:scaleX(1.00000)}6%{transform:scaleX(1.00000)}16%{transform:scaleX(1.01871)}32%{transform:scaleX(1.03950)}38%{transform:scaleX(1.03950)}56%{transform:scaleX(1.03950)}68%{transform:scaleX(1.01871)}76%{transform:scaleX(1.01871)}87%{transform:scaleX(1.01871)}96%{transform:scaleX(1.00000)}100%{transform:scaleX(1.00000)}}
.motion-1 .zippy-forearm-stretch{animation:zippy-natural-forearm-length 5.2s cubic-bezier(.33,0,.2,1) both}
@keyframes zippy-natural-forearm-length{0%{transform:scaleX(1.00000)}6%{transform:scaleX(1.00000)}16%{transform:scaleX(1.02253)}32%{transform:scaleX(1.05719)}38%{transform:scaleX(1.05719)}56%{transform:scaleX(1.05719)}68%{transform:scaleX(1.03986)}76%{transform:scaleX(1.03986)}87%{transform:scaleX(1.02253)}96%{transform:scaleX(1.00520)}100%{transform:scaleX(1.00000)}}
.motion-1 .zippy-goggle-pose{animation:zippy-natural-goggles 5.2s cubic-bezier(.33,0,.2,1) both}@keyframes zippy-natural-goggles{0%,38%{transform:none}56%{transform:translate(-12.5px,24px) rotate(-2.95deg) scale(1.0205)}68%,100%{transform:translate(-25px,48px) rotate(-5.9deg) scale(1.041)}}

/* Character gestures use real joints and keep the held tool registered. */
.character-upper,.character-forearm,.character-tool{transform-origin:0 0}.character-upper{transform:rotate(var(--rest-upper))}.character-forearm{transform:rotate(var(--rest-forearm))}
.motion-2 .tumbit-upper{animation:tumbit-upper 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes tumbit-upper{0%{transform:rotate(-22.54306deg)}8%{transform:rotate(-20.64307deg)}27%{transform:rotate(-12.90626deg)}41%{transform:rotate(-14.24760deg)}58%{transform:rotate(-12.01321deg)}72%{transform:rotate(-13.29757deg)}93%{transform:rotate(-22.54306deg)}100%{transform:rotate(-22.54306deg)}}
.motion-2 .tumbit-forearm{animation:tumbit-forearm 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes tumbit-forearm{0%{transform:rotate(-11.35311deg)}8%{transform:rotate(-15.04908deg)}27%{transform:rotate(-32.80051deg)}41%{transform:rotate(-29.10072deg)}58%{transform:rotate(-35.78544deg)}72%{transform:rotate(-31.65693deg)}93%{transform:rotate(-11.35311deg)}100%{transform:rotate(-11.35311deg)}}
.motion-2 .tumbit-tool{animation:tumbit-tool 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes tumbit-tool{0%{transform:rotate(0.00000deg)}8%{transform:rotate(1.00000deg)}27%{transform:rotate(11.00000deg)}41%{transform:rotate(8.00000deg)}58%{transform:rotate(14.00000deg)}72%{transform:rotate(10.00000deg)}93%{transform:rotate(0.00000deg)}100%{transform:rotate(0.00000deg)}}
.motion-2 .nori-upper{animation:nori-upper 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes nori-upper{0%{transform:rotate(-22.38013deg)}9%{transform:rotate(-20.38013deg)}30%{transform:rotate(-32.38013deg)}43%{transform:rotate(-30.38013deg)}58%{transform:rotate(-33.38013deg)}74%{transform:rotate(-26.38013deg)}94%{transform:rotate(-22.38013deg)}100%{transform:rotate(-22.38013deg)}}
.motion-2 .nori-forearm{animation:nori-forearm 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes nori-forearm{0%{transform:rotate(-13.32850deg)}9%{transform:rotate(-10.32850deg)}30%{transform:rotate(-25.32850deg)}43%{transform:rotate(-28.32850deg)}58%{transform:rotate(-22.32850deg)}74%{transform:rotate(-17.32850deg)}94%{transform:rotate(-13.32850deg)}100%{transform:rotate(-13.32850deg)}}
.motion-2 .bloop-forearm{animation:bloop-forearm 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes bloop-forearm{0%{transform:rotate(-37.87498deg)}18%{transform:rotate(-36.87498deg)}35%{transform:rotate(-41.87498deg)}49%{transform:rotate(-39.87498deg)}65%{transform:rotate(-42.87498deg)}79%{transform:rotate(-36.87498deg)}94%{transform:rotate(-37.87498deg)}100%{transform:rotate(-37.87498deg)}}
.motion-2 .fizzle-upper{animation:fizzle-upper 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes fizzle-upper{0%{transform:rotate(-32.90524deg)}12%{transform:rotate(-30.90524deg)}29%{transform:rotate(-40.90524deg)}43%{transform:rotate(-37.90524deg)}59%{transform:rotate(-43.90524deg)}74%{transform:rotate(-35.90524deg)}94%{transform:rotate(-32.90524deg)}100%{transform:rotate(-32.90524deg)}}
.motion-2 .fizzle-forearm{animation:fizzle-forearm 4.8s cubic-bezier(.35,0,.25,1) both}@keyframes fizzle-forearm{0%{transform:rotate(-20.93330deg)}12%{transform:rotate(-16.93330deg)}29%{transform:rotate(-32.93330deg)}43%{transform:rotate(-19.93330deg)}59%{transform:rotate(-27.93330deg)}74%{transform:rotate(-16.93330deg)}94%{transform:rotate(-20.93330deg)}100%{transform:rotate(-20.93330deg)}}

.workshop-hotspot.is-active:not(:focus-visible) .object-glint{opacity:0}


/* v12: visible numbered markers plus full-size named controls. These are UI,
   not replacement illustrations of the objects. */
.workshop-hotspots .workshop-hotspot{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;overflow:visible;cursor:pointer}
.object-marker{display:grid;place-items:center;width:32px;height:32px;margin:4px;border:2px solid #fff3c9;border-radius:50%;background:#67441beb;color:#fff7d6;font:bold 17px/1 var(--body);box-shadow:0 0 0 2px #b47c32,0 3px 8px #30200ab3;pointer-events:none}
.object-cue{position:absolute;top:38px;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid #9b6529;border-radius:8px;background:#fff0ccf5;color:#3e321f;padding:4px 7px;font:800 12px/1.2 var(--body);box-shadow:0 2px 5px #33200966;pointer-events:none}
.workshop-hotspot:hover .object-marker,.workshop-hotspot:focus-visible .object-marker{background:#fff2bd;color:#482d11;outline:3px solid #62411f;outline-offset:4px}
.workshop-hotspot.is-active .object-marker{opacity:.2}.workshop-hotspot.is-active .object-cue{opacity:0}
.workshop-control{min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;border:2px solid #b88a48;border-radius:12px;padding:10px 16px;background:linear-gradient(#fff6d8,#efd190);color:#3b2d19;font:800 15px/1.25 var(--body);box-shadow:0 3px #76552e;cursor:pointer}
.workshop-control>span{display:grid;place-items:center;min-width:25px;height:25px;background:#65471e;color:#fff8db;border-radius:50%;font-size:13px}
.workshop-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:14px auto 10px;max-width:100%}
.workshop-control:hover,.workshop-control.is-active{background:#ffe9a3}.workshop-control:focus-visible{outline:3px solid #fff9d8;outline-offset:4px}
.workshop-voice-note{color:#ffedc3;text-align:center;font-size:12px;line-height:1.45;max-width:740px;margin:12px auto 20px}
.room-guide .read[hidden]{display:none!important}
.original-propeller,.native-limb,.original-goggles{transform-origin:0 0}
.motion-0 .original-propeller{animation:original-propeller-turn 4.8s cubic-bezier(.4,.04,.18,1) both}
@keyframes original-propeller-turn{0%{transform:rotate(0)}100%{transform:rotate(1440deg)}}
.motion-2 .native-tumbit{animation:native-wrench 4.8s ease-in-out both}@keyframes native-wrench{0%,100%{transform:rotate(0)}22%,55%{transform:rotate(7deg)}38%,72%{transform:rotate(-3deg)}}
.motion-2 .native-nori{animation:native-cap 4.8s ease-in-out both}@keyframes native-cap{0%,100%{transform:rotate(0)}30%,50%{transform:rotate(-15deg)}70%{transform:rotate(-7deg)}}
.motion-2 .native-bloop{animation:native-think 4.8s ease-in-out both}@keyframes native-think{0%,100%{transform:rotate(0)}25%,60%{transform:rotate(-8deg)}42%,77%{transform:rotate(3deg)}}
.motion-2 .native-fizzle{animation:native-brush 4.8s ease-in-out both}@keyframes native-brush{0%,100%{transform:rotate(0)}22%,63%{transform:rotate(-15deg)}43%,80%{transform:rotate(8deg)}}
.motion-1 .original-goggles{animation:original-goggles-down 3s ease-in-out both}
@keyframes original-goggles-down{0%,15%{transform:none}35%{transform:translate(-4px,-7px) rotate(-3deg)}75%,100%{transform:translate(-20px,47px) rotate(-5deg)}}
.goggles-on .original-goggles,body.still .motion-1 .original-goggles{transform:translate(-20px,47px) rotate(-5deg)}
@media(max-width:760px){.workshop-hotspots .workshop-hotspot{width:32px;height:32px;min-width:32px;min-height:32px}.object-marker{width:26px;height:26px;margin:3px;font-size:14px}.object-cue{display:none}.workshop-controls{gap:10px;display:grid;grid-template-columns:1fr}.workshop-control{justify-content:flex-start;width:100%;font-size:14px}.workshop-voice-note{font-size:12px;padding:0 8px}}