/* Additive, local-only playground; the original animation remains unchanged. */
.play-hint{font-size:11px;color:#d9e4d5;margin-left:auto;max-width:310px;line-height:1.35}
.play-reset{font:inherit;font-size:11px;color:#e4ebdf;border:1px solid #677563;background:transparent;padding:6px 10px;cursor:pointer}
.play-reset:disabled{opacity:.35;cursor:default}
.play-layer{position:absolute;left:0;width:100%;z-index:8;overflow:hidden;pointer-events:none;opacity:0;outline:none;transition:opacity 160ms ease}
.play-layer.is-ready{opacity:1}
.play-layer.is-ready .play-hit{pointer-events:all;cursor:default}
.play-layer.is-ready .play-node{pointer-events:all;cursor:default}
.play-layer:focus-visible{outline:none}
.play-shell{fill:#fff;stroke-width:1.1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 3px #293c2b16)}
.play-node-pop{transform-box:fill-box;transform-origin:center;animation:play-pop 220ms ease-out both}
.play-cable{fill:none;stroke-linecap:butt;stroke-linejoin:round;pointer-events:none}
.play-wire-draw{stroke-width:1.1;stroke-dasharray:100;animation:play-draw 280ms ease-out 220ms both;opacity:.5}
.play-wire-flow{stroke-width:1.65;opacity:.85;stroke-dasharray:4 20;animation:play-packets 650ms linear 520ms infinite both}
.play-wire-flow[data-direction=return]{animation-direction:reverse;animation-duration:780ms}
.widget-spin{transform-origin:50px 50px;animation:play-spin 5s linear infinite}
.widget-counter{transform-origin:50px 50px;animation:play-spin 8s linear reverse infinite}
.widget-breathe{animation:play-breathe 2100ms ease-in-out infinite}
.widget-bar{transform-box:fill-box;transform-origin:center bottom;animation:play-bar 1700ms ease-in-out infinite alternate}
.widget-signal{stroke-dasharray:10 90;animation:play-flow 2400ms linear infinite}
.widget-slider{transform-origin:25px 50px;animation:play-slider 2600ms ease-in-out infinite alternate}
.play-layer.is-paused *{animation-play-state:paused!important}
@keyframes play-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes play-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes play-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes play-spin{to{transform:rotate(360deg)}}
@keyframes play-breathe{50%{opacity:.3}}
@keyframes play-bar{to{transform:scaleY(.45)}}
@keyframes play-slider{to{transform:scaleX(1.45)}}
@media(max-width:650px){.play-hint{order:4;max-width:none;width:100%;margin:0;font-size:10px}.play-reset{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.play-layer *{animation:none!important}.play-wire-flow{display:none}.play-layer{transition:none}}

/* One unfinished branch: a possible tool, with no automatic real node. */
.play-discovery{pointer-events:none;fill:none;stroke:#64856b;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.play-discovery path{vector-effect:non-scaling-stroke}
.play-discovery-wire{opacity:.32;stroke-dasharray:100}
.play-discovery-corners{opacity:.5;stroke-dasharray:1}
.play-discovery-plus{opacity:.68}
.play-discovery.is-hinting{animation:play-discover 4200ms linear both}
.play-discovery.is-hinting:not(.is-static) .play-discovery-wire{animation:play-draw 650ms ease-out both}
.play-discovery.is-hinting:not(.is-static) .play-discovery-corners{animation:play-sketch 500ms ease-out 400ms both}
.play-discovery.is-hinting:not(.is-static) .play-discovery-plus{animation:play-invitation 300ms ease-out 750ms both}
@keyframes play-discover{0%{opacity:0}10%,82%{opacity:1}100%{opacity:0}}
@keyframes play-sketch{from{opacity:0;stroke-dashoffset:1}to{opacity:.5;stroke-dashoffset:0}}
@keyframes play-invitation{from{opacity:0}to{opacity:.68}}
/* Keep only the lifetime clock in reduced motion: a static sketch, then removal. */
.play-discovery.is-hinting.is-static{animation-name:play-discover-still!important;animation-duration:4200ms!important;animation-timing-function:steps(1,end)!important;animation-fill-mode:both!important}
@keyframes play-discover-still{0%{opacity:1}100%{opacity:0}}

/* Repack once after a width drag settles, not on every resize frame. */
.play-layer.is-resizing{opacity:0;transition:none;pointer-events:none}
.play-layer.is-resizing *{pointer-events:none!important;animation-play-state:paused!important}

@keyframes play-packets{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
/* Build.js owns these four finite outline effects, including rebuilds. */
.option-assemble .is-built .first-border,.option-assemble .is-built .second-border{animation:none!important}