#machine-art{width:100%;min-width:0;isolation:isolate}
.pixel-machine.pixel-world{display:block;width:100%;height:auto;aspect-ratio:20/13;overflow:visible;shape-rendering:crispEdges;image-rendering:pixelated;user-select:none;touch-action:manipulation}
.pixel-neighborhood{transform-origin:500px 330px}
.pixel-building{cursor:pointer;outline:none;transition:transform .15s steps(2,end),filter .15s steps(2,end)}
.pixel-building:hover,.pixel-building:focus-visible,.pixel-building.is-selected{transform:translateY(-6px);filter:drop-shadow(0 5px 0 #a58bcc44)}
.pixel-building:active{transform:translateY(-2px)}
.pixel-building:focus-visible>path,.pixel-building:focus-visible>g>path{stroke:#6cdebc;stroke-width:2}
.pixel-place-label text{font:24px Silkscreen,Pixel,"Courier New",monospace;letter-spacing:-.4px;fill:#3c159e}
.pixel-place-label{pointer-events:auto;cursor:pointer;outline:none}
.pixel-place-label:hover path,.pixel-place-label:focus-visible path,.pixel-place-label.is-selected path{fill:#b7f2de;stroke:#3c159e;stroke-width:2}
.pixel-place-label.is-selected text{fill:#291064}
.pixel-leaves{animation:pixel-leaf-breeze 5s steps(2,end) infinite}
.pixel-leaves.leaves-1{animation-delay:-2s}
.pixel-leaves.leaves-2{animation-delay:-4s}
.pixel-flag{animation:pixel-flag-wave 2.6s steps(3,end) infinite;transform-box:fill-box;transform-origin:left center}
.pixel-lamp{animation:pixel-lamp-glimmer 9s steps(1,end) infinite}
.pixel-lamp.lamp-1{animation-delay:-2s}
.pixel-lamp.lamp-2{animation-delay:-4s}
.pixel-lamp.lamp-3{animation-delay:-6s}
.pixel-status-led{fill:#ad8cff}
.pixel-machine[data-state=reading] .pixel-status-led{fill:#6cdebc;animation:pixel-source-led 1.1s steps(1,end) infinite}
.pixel-machine[data-state=ready] .pixel-status-led{fill:#6cdebc}
.pixel-machine[data-state=error] .pixel-status-led{fill:#ee7094}
.pixel-resident,.pixel-sky,.pixel-smoke,.pixel-flowers,.pixel-butterfly,.pixel-pond{pointer-events:none}
.pixel-resident .pixel-person-figure{transform-box:view-box}
.pixel-resident.is-walking .pixel-person-body{animation:pixel-walk-bob .4s steps(2,end) infinite}
.pixel-resident.is-walking .leg-back{animation:pixel-walk-back .4s steps(1,end) infinite}
.pixel-resident.is-walking .leg-front{animation:pixel-walk-front .4s steps(1,end) infinite}
.pixel-resident.is-walking .arm-front{animation:pixel-arm-front .4s steps(1,end) infinite}
.pixel-resident.is-walking .arm-back{animation:pixel-arm-back .4s steps(1,end) infinite}
.pixel-resident.resident-1 *{animation-delay:-.1s}
.pixel-resident.resident-2 *{animation-delay:-.2s}
.pixel-resident.resident-4 *{animation-delay:-.3s}
.pixel-cyclist.is-walking .pixel-person-body{animation:pixel-cycle-bob .55s steps(2,end) infinite}
.pixel-cyclist.is-walking .pixel-wheel-spokes{animation:pixel-wheel-turn .6s steps(4,end) infinite;transform-box:fill-box;transform-origin:center}
.pixel-cyclist.is-walking .pixel-cyclist-leg{animation:pixel-pedal .6s steps(4,end) infinite}
.pixel-bird-wings{animation:pixel-bird-flap .6s steps(2,end) infinite;transform-box:fill-box;transform-origin:center}
.bird-1 .pixel-bird-wings{animation-delay:-.2s}.bird-2 .pixel-bird-wings{animation-delay:-.4s}
.pixel-smoke-puff{animation:pixel-smoke-rise 4.6s steps(10,end) infinite;animation-delay:var(--puff-delay);opacity:0;transform:translate(var(--smoke-x),var(--smoke-y))}
.pixel-cloud{animation:pixel-cloud-drift 20s steps(12,end) infinite}
.cloud-1{animation-duration:25s;animation-delay:-8s}.cloud-2{animation-duration:22s;animation-delay:-13s;opacity:.6}
.pixel-flower{animation:pixel-flower-sway 3.6s steps(2,end) infinite}.flower-1{animation-delay:-1.2s}.flower-2{animation-delay:-2.4s}
.pixel-butterfly{animation:pixel-butterfly-dance 7s steps(12,end) infinite;transform-box:fill-box;transform-origin:center}
.pixel-butterfly-wings{animation:pixel-butterfly-flap .36s steps(2,end) infinite;transform-box:fill-box;transform-origin:center}
.pixel-water-ripple{animation:pixel-ripple 4.2s steps(4,end) infinite;animation-delay:var(--ripple-delay)}
.pixel-water-jet{animation:pixel-water-jet 1s steps(3,end) infinite}
.pixel-water-drop{animation:pixel-water-drop .9s steps(5,end) infinite;opacity:.9}
.drop-0{--drop-x:-12px;animation-delay:-.1s}.drop-1{--drop-x:10px;animation-delay:-.3s}.drop-2{--drop-x:-8px;animation-delay:-.5s}.drop-3{--drop-x:14px;animation-delay:-.7s}
.pixel-lamp-aura{opacity:0;pointer-events:none}
.pixel-window-light{animation:pixel-window-life 16s steps(1,end) infinite}
.pixel-building:nth-child(even) .pixel-window-light{animation-delay:-8s}
.pixel-building.is-selected .pixel-window-light{animation:pixel-door-response .8s steps(3,end) 1;opacity:1}
.night .pixel-foundation [fill="#f6f3fd"]{fill:#29263f}.night .pixel-foundation [fill="#eae1f5"]{fill:#1e2035}.night .pixel-foundation [fill="#eee7f8"]{fill:#25243e}
.night .pixel-cloud{opacity:.28}.night .pixel-smoke-puff{fill:#7f76a2}
.night .pixel-window-light path{fill:#e3ffd0}.night .pixel-lamp{fill:#deffbd}.night .pixel-lamp-aura{opacity:.14;animation:pixel-night-lamp 5s steps(3,end) infinite}
.night .pixel-water [fill="#a1eadd"]{fill:#609da7}.night .pixel-water [fill="#78cbd2"]{fill:#477785}
.pixel-machine.is-paused *{animation-play-state:paused!important}
@keyframes pixel-leaf-breeze{0%,30%,70%,100%{transform:translate(0,0)}40%,60%{transform:translate(3px,-1px)}}
@keyframes pixel-flag-wave{0%,100%{transform:scaleX(1) translateY(0)}35%{transform:scaleX(.78) translateY(-2px)}70%{transform:scaleX(.92) translateY(1px)}}
@keyframes pixel-lamp-glimmer{0%,73%,83%,100%{opacity:1}74%,82%{opacity:.6}}
@keyframes pixel-source-led{0%,49%{opacity:1}50%,100%{opacity:.4}}
@keyframes pixel-walk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pixel-walk-front{0%,49%{transform:translate(2px,-1px)}50%,100%{transform:translate(-2px,1px)}}
@keyframes pixel-walk-back{0%,49%{transform:translate(-2px,1px)}50%,100%{transform:translate(2px,-1px)}}
@keyframes pixel-arm-front{0%,49%{transform:translate(0,1px)}50%,100%{transform:translate(0,-2px)}}
@keyframes pixel-arm-back{0%,49%{transform:translate(0,-2px)}50%,100%{transform:translate(0,1px)}}
@keyframes pixel-cycle-bob{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,-1px)}}
@keyframes pixel-wheel-turn{to{transform:rotate(360deg)}}
@keyframes pixel-pedal{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,3px)}}
@keyframes pixel-bird-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-1)}}
@keyframes pixel-smoke-rise{0%{transform:translate(var(--smoke-x),var(--smoke-y)) scale(.6);opacity:0}15%{opacity:.45}55%{opacity:.3}100%{transform:translate(calc(var(--smoke-x) + 24px),calc(var(--smoke-y) - 56px)) scale(1.5);opacity:0}}
@keyframes pixel-cloud-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,0)}}
@keyframes pixel-flower-sway{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-1px)}}
@keyframes pixel-butterfly-dance{0%,100%{translate:0 0}25%{translate:-22px -20px}50%{translate:6px -32px}75%{translate:24px -10px}}
@keyframes pixel-butterfly-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes pixel-ripple{0%,100%{opacity:.2;transform:translate(0,0)}50%{opacity:.8;transform:translate(-4px,2px)}}
@keyframes pixel-water-jet{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes pixel-water-drop{0%{transform:translate(0,-5px);opacity:0}20%{opacity:1}100%{transform:translate(var(--drop-x),20px);opacity:0}}
@keyframes pixel-window-life{0%,68%,100%{opacity:1}69%,83%{opacity:.5}}
@keyframes pixel-door-response{0%,100%{opacity:1}40%{opacity:.2}70%{opacity:1}}
@keyframes pixel-night-lamp{0%,100%{opacity:.12}50%{opacity:.19}}
@media(prefers-reduced-motion:reduce){.pixel-machine *{animation:none!important;transition:none!important}.pixel-building:hover,.pixel-building:focus-visible,.pixel-building.is-selected{transform:none}.pixel-smoke-puff{opacity:.25;transform:translate(var(--smoke-x),calc(var(--smoke-y) - 16px))!important}.pixel-water-ripple{opacity:.5}.pixel-water-drop{opacity:0}}
