.workshop-stage{position:relative;isolation:isolate}
.workshop-interactions[hidden],.workshop-bubble[hidden]{display:none}
.workshop-hotspot{position:absolute;z-index:2;display:block;min-width:44px;min-height:44px;background:transparent;border:1px dashed transparent;border-radius:0;padding:0;cursor:pointer;touch-action:manipulation;transition:background .2s,border-color .2s;box-shadow:none}
.workshop-hotspot span{position:absolute;right:-5px;top:-5px;display:grid;place-items:center;width:17px;height:17px;background:#fbf3df;border:1px solid #b9a380;color:#7d6545;font:14px/1 monospace;opacity:0;transition:opacity .2s;pointer-events:none}
.workshop-hotspot:hover,.workshop-hotspot:focus-visible{border-color:#a48354;background:#fff7df0d}
.workshop-hotspot:hover span,.workshop-hotspot:focus-visible span{opacity:1}
.hotspot-coder{left:42.3%;top:42.3%;width:12.7%;height:19%}.hotspot-support{left:min(5.5%,calc(21.1% - 52px));top:58.6%;width:calc(15.6% - 8px);height:21.3%}.hotspot-fixer{left:56.3%;top:62%;width:15%;height:18.5%}.hotspot-cat{left:69.3%;top:81%;width:17.1%;height:8.9%}.hotspot-coffee{left:21.1%;top:53.6%;width:5.6%;height:6.2%}.hotspot-lamp{left:43.7%;top:20.5%;width:12%;height:8.5%}
.workshop-bubble{position:absolute;z-index:5;max-width:240px;margin:0;padding:10px 13px;background:#fff9ec;color:#5d513c;border:1px solid #b49b73;box-shadow:3px 3px 0 #d6c4a1;font:500 13px/1.6 var(--font);pointer-events:none;text-align:center;text-wrap:pretty}
.workshop-bubble:after{content:'';position:absolute;bottom:-5px;left:50%;width:8px;height:8px;background:#fff9ec;border-right:1px solid #b49b73;border-bottom:1px solid #b49b73;transform:rotate(45deg)}
/* Small stepped motions keep the pixel drawing crisp. No animation loop runs in JS. */
.coder-hand-left{animation:cozy-type-left .65s steps(2,end) infinite}.coder-hand-right{animation:cozy-type-right .8s steps(2,end) infinite}
@keyframes cozy-type-left{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,-3px)}}
@keyframes cozy-type-right{0%,100%{transform:translate(0,-2px)}50%{transform:translate(-3px,1px)}}
.coder-head{animation:cozy-coder-think 7s steps(2,end) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes cozy-coder-think{0%,60%,100%{transform:translateY(0)}65%,76%{transform:translateY(2px)}}
.character-eyes{transform-box:fill-box;transform-origin:center;animation:cozy-blink 5.1s steps(1,end) infinite}
.support-eyes{animation-delay:1.8s}.fixer-eyes{animation-delay:3s}.cat-eyes{animation-delay:.7s;animation-duration:7s}
@keyframes cozy-blink{0%,92%,100%{transform:scaleY(1)}94%,97%{transform:scaleY(.1)}}
.support-head{animation:cozy-listen 6s steps(2,end) infinite;transform-box:fill-box;transform-origin:50% 85%}
@keyframes cozy-listen{0%,48%,100%{transform:translate(0,0) rotate(0)}55%,70%{transform:translateY(1px) rotate(-3deg)}}
.support-tablet{animation:cozy-tablet 6s steps(2,end) infinite}
@keyframes cozy-tablet{0%,45%,100%{transform:translateY(0)}55%,72%{transform:translateY(-2px)}}
.support-message{animation:cozy-message 4s steps(1,end) infinite}
@keyframes cozy-message{0%,100%{opacity:1}40%,65%{opacity:.55}}
.fixer-arm{animation:cozy-fix 2.3s steps(3,end) infinite;transform-box:fill-box;transform-origin:5% 65%}
@keyframes cozy-fix{0%,65%,100%{transform:rotate(0)}22%{transform:rotate(-8deg)}40%{transform:rotate(5deg)}}
.fixer-head{animation:cozy-fixer-nod 4.6s steps(2,end) infinite}
@keyframes cozy-fixer-nod{0%,40%,100%{transform:translateY(0)}50%,65%{transform:translateY(2px)}}
.workshop-cursor{animation:cozy-cursor 1.5s steps(1,end) infinite}
@keyframes cozy-cursor{0%,50%{opacity:1}55%,100%{opacity:0}}
.workshop-code-lines{animation:cozy-code 8s steps(2,end) infinite}
@keyframes cozy-code{0%,40%,100%{opacity:1}60%,75%{opacity:.65}}
.workshop-led{animation:cozy-led 3.8s steps(1,end) infinite}.led-2{animation-delay:1.1s}.led-3{animation-delay:2.4s}
@keyframes cozy-led{0%,35%,100%{fill:#e6c886}45%,75%{fill:#b5d1a2}}
.workshop-cable-signal{stroke-dasharray:8 140;animation:cozy-data 5s steps(16,end) infinite}
@keyframes cozy-data{from{stroke-dashoffset:148}to{stroke-dashoffset:0}}
.workshop-steam path{animation:cozy-steam 3.6s steps(5,end) infinite}.workshop-steam path:nth-child(2){animation-delay:-1.8s}
@keyframes cozy-steam{0%{transform:translate(0,5px);opacity:0}25%{opacity:.75}65%{transform:translate(-2px,-6px);opacity:.55}100%{transform:translate(2px,-14px);opacity:0}}
.workshop-clouds{animation:cozy-cloud 20s steps(10,end) infinite alternate}
@keyframes cozy-cloud{from{transform:translateX(-3px)}to{transform:translateX(6px)}}
.workshop-leaves{animation:cozy-leaf 9s steps(3,end) infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes cozy-leaf{0%,35%{transform:rotate(0)}100%{transform:rotate(2deg)}}
.cat-body{animation:cozy-cat-breathe 4s steps(2,end) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes cozy-cat-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.045)}}
.cat-tail{animation:cozy-tail 7s steps(3,end) infinite;transform-box:fill-box;transform-origin:95% 75%}
@keyframes cozy-tail{0%,58%,100%{transform:rotate(0)}65%,85%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}}
.workshop-cat-sleep{animation:cozy-sleep 5s steps(6,end) infinite}
@keyframes cozy-sleep{0%,100%{transform:translateY(0);opacity:0}20%{opacity:.7}80%{transform:translateY(-10px);opacity:0}}
.workshop-music-notes{animation:cozy-music 9s steps(6,end) infinite}
@keyframes cozy-music{0%,30%,100%{opacity:0;transform:translate(0,0)}45%,65%{opacity:.6}80%{opacity:0;transform:translate(4px,-12px)}}
.workshop-code-success,.workshop-cat-heart,.workshop-support-heart{opacity:0}
.hero-workshop[data-reaction=coder] .workshop-code-success{opacity:1;animation:cozy-success 1.8s steps(3,end) both}
@keyframes cozy-success{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
.hero-workshop[data-reaction=cat] .workshop-cat-heart,.hero-workshop[data-reaction=support] .workshop-support-heart{opacity:1;animation:cozy-heart 1.8s steps(5,end) both}
@keyframes cozy-heart{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.hero-workshop[data-reaction=cat] .cat-tail{animation-duration:.8s}
.hero-workshop[data-reaction=cat] .workshop-cat-sleep{visibility:hidden}
.hero-workshop[data-reaction=coffee] .workshop-steam path{animation-duration:1s}
.hero-workshop[data-reaction=fixer] .workshop-cable-signal{stroke:#78945b;animation-duration:1.3s}
.hero-workshop[data-reaction=coder] .coder-head{transform:translateY(-2px)}
.hero-workshop.is-evening .workshop-wall{fill:#f0d9b7}.hero-workshop.is-evening .workshop-sky{fill:#e6c1ad}.hero-workshop.is-evening .workshop-sun{fill:#efbd86}.hero-workshop.is-evening .workshop-lamp-glow{opacity:.55;fill:#f8d999}.hero-workshop.is-evening .workshop-mug{fill:#b6795b}
.hero-workshop:not([data-motion=running]) .workshop-art *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.workshop-art *{animation:none!important;transition:none!important}.workshop-cat-sleep,.workshop-music-notes,.workshop-cable-signal{opacity:0}.workshop-hotspot,.workshop-hotspot span{transition:none}}

@media(max-width:600px){.workshop-bubble{max-width:220px;font-size:12px;padding:8px 10px}.workshop-hotspot span{width:14px;height:14px;font-size:12px}}
@media(max-width:360px){.workshop-bubble{max-width:215px;font-size:12px}}