/* [animation] Scoped Projectech palette, readable SVG viewport, controls, and motion. */
.project-animation-section{margin-block:2rem;min-width:0}
.project-animation{contain:inline-size;--pa-ink:#142c3c;--pa-line:#dce7ed;--pa-accent:#087699;--pa-sensor:#bcefe9;--pa-controller:#aadef4;--pa-actuator:#a7e0e8;--pa-cloud:#cbeef8;--pa-app:#c3ece9;--pa-power:#d1eddb;--pa-storage:#d1e4f5;--pa-user:#d9eeee;border:1px solid var(--pa-line);border-radius:16px;background:#fff;box-shadow:0 6px 26px #142c3c06;overflow:hidden;min-width:0;color:var(--pa-ink);font-family:inherit}
.project-animation *{box-sizing:border-box}
.project-animation .pa-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px}
.project-animation .pa-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#456a75;line-height:1.4}
.project-animation .pa-intro{margin:5px 0 0;font-size:12px;line-height:1.5;color:#526773}
.project-animation .pa-intro>span{padding:0 5px}
.project-animation .pa-flow-status{width:106px;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:10px;font-weight:700;padding:6px 9px;border-radius:20px;background:#edf8f3;color:#27674e;line-height:1.3}
.project-animation .pa-flow-status i{width:6px;height:6px;border-radius:50%;background:#3a9370}
.project-animation.is-motion-paused .pa-flow-status{background:#f1f5f7;color:#526773}
.project-animation.is-motion-paused .pa-flow-status i{background:#78909b}
.project-animation .pa-stage{position:relative;width:100%;height:clamp(280px,43vw,430px);overflow:hidden;background-color:#f7fbfd;background-image:radial-gradient(#c5dce5 .7px,transparent .7px);background-size:16px 16px;user-select:none;outline-offset:-3px}
.project-animation .pa-stage[data-zoomed=true]{touch-action:none;cursor:grab}
.project-animation .pa-stage.is-dragging,.project-animation .pa-stage.is-dragging *{cursor:grabbing}
.project-animation .pa-stage:focus-visible{outline:3px solid var(--pa-accent)}
.project-animation .pa-stage>svg{display:block;width:100%;height:100%;position:absolute;inset:0;overflow:hidden;isolation:isolate}
.project-animation .pa-node{cursor:pointer;outline:none;--pa-fill:var(--pa-sensor)}
.project-animation .pa-type-controller{--pa-fill:var(--pa-controller)}
.project-animation .pa-type-actuator{--pa-fill:var(--pa-actuator)}
.project-animation .pa-type-cloud{--pa-fill:var(--pa-cloud)}
.project-animation .pa-type-app{--pa-fill:var(--pa-app)}
.project-animation .pa-type-power{--pa-fill:var(--pa-power)}
.project-animation .pa-type-storage{--pa-fill:var(--pa-storage)}
.project-animation .pa-type-user{--pa-fill:var(--pa-user)}
.project-animation .pa-node-art{fill:var(--pa-fill);stroke:#126b7f;transform-box:fill-box;transform-origin:center}
.project-animation .pa-node-lift{transform-box:fill-box;transform-origin:center;transition:transform .16s ease,filter .16s ease}
.project-animation .pa-node-hit{fill:#ffffffed;stroke:#d9e7ec;stroke-width:1}
.project-animation .pa-node-halo{fill:var(--pa-fill);opacity:.22;pointer-events:none}
.project-animation .pa-node-number{fill:#45616e;font:600 9px Manrope,'Segoe UI',sans-serif;pointer-events:none}
.project-animation .pa-node:hover .pa-node-lift,.project-animation .pa-node:focus .pa-node-lift{transform:scale(1.08);filter:drop-shadow(0 2px 4px #08769926)}
.project-animation .pa-node:focus .pa-node-hit{stroke:#087699;stroke-dasharray:5 3}
.project-animation .pa-node[aria-pressed=true] .pa-node-hit,.project-animation .pa-node.is-active .pa-node-hit{fill:#f5fcfd;stroke:#087699;stroke-width:1.7}
.project-animation .pa-node-label{fill:var(--pa-ink);font:600 13px Manrope,'Segoe UI',sans-serif;pointer-events:none}
.project-animation .pa-edge{cursor:pointer;outline:none}
.project-animation .pa-wire{fill:none;stroke:#6b9ea9;stroke-width:2;transition:stroke .16s ease,stroke-width .16s ease}
.project-animation .pa-edge-hit{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke}
.project-animation .pa-edge-label{font:500 11px Manrope,'Segoe UI',sans-serif;fill:#365b68;paint-order:stroke;stroke:#f7fbfd;stroke-width:4px;stroke-linejoin:round}
.project-animation .pa-flow-dot{fill:#087699;pointer-events:none}
.project-animation .pa-edge:hover .pa-wire,.project-animation .pa-edge:focus .pa-wire,.project-animation .pa-edge.is-connected .pa-wire,.project-animation .pa-edge[aria-pressed=true] .pa-wire{stroke:#087699;stroke-width:3.5}
.project-animation .pa-edge:focus .pa-wire{stroke-dasharray:5 3}
.project-animation .is-dimmed{opacity:.3}
.project-animation button{font-family:inherit;font-size:12px;font-weight:700;line-height:1.35;border:1px solid #bfd8df;border-radius:8px;background:white;color:var(--pa-accent);padding:9px 12px;min-height:42px;cursor:pointer;touch-action:manipulation}
.project-animation button:hover{background:#edf9fc}
.project-animation button[aria-pressed=true]{background:#e7f6f9;border-color:#087699}
.project-animation button[aria-disabled=true]{color:#63777c;background:#f3f7f8;cursor:default}
.project-animation button:focus-visible{outline:3px solid #087699;outline-offset:2px}
.project-animation .pa-viewbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 18px;border-block:1px solid var(--pa-line);background:#fbfdfe;visibility:hidden}
.project-animation.is-ready .pa-viewbar{visibility:visible}
.project-animation .pa-view-hint{font-size:11px;color:#526773;white-space:nowrap}
.project-animation .pa-view-actions{display:flex;gap:4px;align-items:center}
.project-animation .pa-view-actions button{min-height:34px;padding:6px 10px;font-size:11px}
.project-animation .pa-view-actions [data-animation-zoom-in],.project-animation .pa-view-actions [data-animation-zoom-out]{width:32px;padding:4px;font-size:18px;font-weight:500;line-height:1}
.project-animation .pa-zoom-value{min-width:36px;text-align:center;font-size:10px;color:#526773;font-variant-numeric:tabular-nums}
.project-animation .pa-view-actions [data-animation-motion]{margin-left:6px}
.project-animation .pa-components{display:flex;flex-wrap:wrap;gap:7px;padding:18px 22px 0}
.project-animation .pa-components button{display:inline-flex;align-items:center;gap:7px;font-size:11px;min-height:34px;padding:7px 10px;border-color:#dce7ed;color:#45616e}
.project-animation .pa-component-number{font-size:9px;font-variant-numeric:tabular-nums}
.project-animation .pa-components button[aria-pressed=true]{color:#087699;border-color:#087699}
.project-animation .pa-components button.is-step-active{box-shadow:inset 0 -3px #087699}
.project-animation .pa-detail-wrap{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:14px;padding:20px 24px 24px;min-height:120px}
.project-animation .pa-detail-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #dce7ed;border-radius:11px;background:#f2fafc;color:#087699;font-size:20px;font-weight:600}
.project-animation .pa-detail-icon svg{width:30px;height:30px;fill:var(--pa-fill,var(--pa-sensor));stroke:#126b7f}
.project-animation .pa-detail-stack{display:grid;min-width:0}
.project-animation .pa-detail-stack>.pa-detail{grid-area:1/1}
.project-animation .pa-detail-reserve{visibility:hidden;pointer-events:none}
.project-animation .pa-detail{min-width:0;overflow-wrap:anywhere;line-height:1.6}
.project-animation .pa-detail strong{display:block;color:var(--pa-ink);font-size:15px;line-height:1.5;margin:3px 0 5px}
.project-animation .pa-detail-type{display:block;text-transform:uppercase;letter-spacing:.12em;color:#456a75;font-size:9px;font-weight:800;line-height:1.4}
.project-animation .pa-detail p{font-size:13px;line-height:1.7;margin:0;color:#526773}
.project-animation .pa-controls{border-top:1px solid var(--pa-line);padding:21px 24px 16px;background:#f9fcfd;visibility:hidden}
.project-animation .pa-controls.is-ready{visibility:visible}
.project-animation .pa-sequence-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.project-animation .pa-step-count{font-size:10px;color:#526773;font-variant-numeric:tabular-nums}
.project-animation .pa-title-stack{display:grid;min-height:2.8em;font-size:15px;line-height:1.5;margin-bottom:12px;overflow-wrap:anywhere}
.project-animation .pa-title-stack>*{grid-area:1/1;margin:0;color:var(--pa-ink);font-size:inherit;line-height:inherit;font-weight:700}
.project-animation .pa-title-reserve{visibility:hidden;pointer-events:none}
.project-animation .pa-progress{height:3px;border-radius:4px;background:#e1edf1;overflow:hidden;margin-bottom:16px}
.project-animation .pa-progress>span{display:block;height:100%;width:0;background:#087699;border-radius:4px}
.project-animation .pa-actions{display:flex;flex-wrap:wrap;gap:8px}
.project-animation .pa-actions [data-animation-play]{background:#087699;color:white;border-color:#087699;min-width:126px}
.project-animation .pa-actions [data-animation-play]:hover{background:#076682}
.project-animation .pa-actions [data-animation-play][aria-disabled=true]{background:#e5edf0;border-color:#dce7ed;color:#63777c}
.project-animation .pa-actions [data-animation-explore]{margin-left:auto;border-color:transparent;background:transparent}
.project-animation .pa-step-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:12px}
.project-animation .pa-step-dots button{width:36px;min-height:36px;padding:5px;border:0;background:transparent;display:grid;place-items:center}
.project-animation .pa-step-dots span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:white;border:1px solid #c6dce4;font-size:10px;color:#526773}
.project-animation .pa-step-dots [aria-pressed=true] span{background:#087699;color:white;border-color:#087699;box-shadow:0 0 0 3px #d3eef4}
.project-animation .pa-fallback{padding:1rem;font-size:14px}
.project-animation .pa-fallback h3{font-size:16px;margin:.5rem 0}
.project-animation .pa-fallback ol{padding-left:1.3rem}
.project-animation .pa-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* [animation] Nested groups keep hover and living motion from overwriting each other. */
.project-animation .pa-type-sensor.is-active .pa-node-art{animation:pa-pulse 1.6s ease-in-out infinite}
.project-animation .pa-type-actuator.is-active .pa-node-art{animation:pa-wiggle 1.5s ease-in-out infinite}
.project-animation .pa-type-cloud.is-active .pa-node-art{animation:pa-drift 2.3s ease-in-out infinite}
.project-animation .pa-type-app.is-active .pa-node-art{animation:pa-blink 1.8s ease-in-out infinite}
.project-animation.is-motion-paused .pa-node-art{animation-play-state:paused}
.project-animation.is-motion-paused .pa-node-lift,.project-animation.is-motion-paused .pa-wire{transition:none}
.project-animation.is-reduced-motion .pa-node-art{animation:none}
.project-animation.is-reduced-motion .pa-node-lift{transform:none!important;transition:none}
@keyframes pa-pulse{50%{transform:scale(1.06);opacity:.75}}
@keyframes pa-wiggle{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes pa-drift{50%{transform:translateY(-3px)}}
@keyframes pa-blink{50%{opacity:.55}}
@media(max-width:600px){
.project-animation .pa-topbar{padding:17px 15px}
.project-animation .pa-intro{font-size:11px}
.project-animation .pa-stage{height:300px}
.project-animation .pa-viewbar{flex-wrap:wrap;padding:9px 12px}
.project-animation .pa-view-actions{flex:1;justify-content:flex-end}
.project-animation .pa-view-hint{flex-basis:100%;font-size:10px}
.project-animation .pa-view-actions [data-animation-motion]{margin-left:auto}
.project-animation .pa-components{padding:15px 14px 0;gap:6px}
.project-animation .pa-components button{min-height:40px;padding:7px 9px}
.project-animation .pa-detail-wrap{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:19px 16px 22px;min-height:148px}
.project-animation .pa-detail-icon{width:36px;height:36px;border-radius:9px}
.project-animation .pa-detail-icon svg{width:26px;height:26px}
.project-animation .pa-detail p{font-size:12px}
.project-animation .pa-controls{padding:19px 16px 13px}
.project-animation .pa-actions{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:6px}
.project-animation .pa-actions button{padding-inline:8px;font-size:11px}
.project-animation .pa-actions [data-animation-play]{min-width:0}
.project-animation .pa-actions [data-animation-explore]{grid-column:1/-1;justify-self:center;margin:0;min-height:32px}
.project-animation .pa-step-dots{margin-top:3px}
.project-animation .pa-step-dots button{min-height:40px;width:40px}
}
@media(prefers-reduced-motion:reduce){.project-animation *{animation:none!important;transition:none!important}.project-animation .pa-node-lift{transform:none!important}}