.operations-board{overflow:hidden}
.operations-board .board-top{padding-bottom:20px;font-size:10px}
.flow-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:9px}
.flow-status i{width:5px;height:5px;background:var(--acid);border-radius:50%;box-shadow:0 0 9px #ffcc0360}
.operations-board h2{margin:24px 0 28px;font-size:clamp(25px,2.1vw,30px);line-height:1.18}
.operations-board h2 span{color:var(--acid)}
.operations-flow{display:block;width:100%;height:auto;overflow:visible}
.flow-caption{fill:#8f8b7b;font:8px var(--mono);letter-spacing:1.2px}
.work-item{transform-box:view-box;transform-origin:60px 15px;transform:translate(var(--to-x),var(--to-y));animation:work-align 14s cubic-bezier(.65,0,.35,1) infinite both}
.work-item rect{fill:#14140f;stroke:#4e4931;stroke-width:1}
.work-item path{fill:none;stroke:#928766;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.work-item text{fill:#c5c0ae;font:11px var(--body)}
.chaos-wires{opacity:0;animation:chaos-fade 14s ease-in-out infinite both}
.ordered-wires,.incoming-signals{animation:order-reveal 14s ease-in-out infinite both}
.flow-signal{stroke-dasharray:.045 .955;stroke-dashoffset:1;animation:signal-travel 4s linear infinite;animation-delay:var(--delay,0s)}
.flow-processor>rect{fill:#15150c;stroke:#ffcc03;stroke-width:1}
.flow-processor .processor-ring{fill:none;stroke:#ffcc03;stroke-opacity:.18}
.flow-processor text{fill:#faf9f4;font:600 15px var(--display);letter-spacing:-.4px}
.processor-halo{opacity:.8;animation:processor-breathe 4s ease-in-out infinite}
.output-wires{opacity:.5}
.operation-output rect{fill:#15160c;stroke:#ffcc0345;stroke-width:1}
.operation-output text{fill:#eeeadd;font:500 12px var(--display)}
.operation-output .output-detail{fill:#a5a28e;font:10px var(--mono)}
.operation-output path{fill:none;stroke:#ffcc03;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.operations-board .flow-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0 0;padding-top:20px;font-size:10px}
.hero[data-motion="paused"] .operations-flow,.hero[data-motion="paused"] .operations-flow *{animation-play-state:paused!important}
@keyframes work-align{0%,18%,100%{transform:translate(var(--x),var(--y)) rotate(var(--r))}43%,80%{transform:translate(var(--to-x),var(--to-y)) rotate(0deg)}}
@keyframes chaos-fade{0%,18%,100%{opacity:1}40%,82%{opacity:0}}
@keyframes order-reveal{0%,20%,100%{opacity:0}43%,80%{opacity:1}}
@keyframes signal-travel{to{stroke-dashoffset:0}}
@keyframes processor-breathe{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:900px) and (min-width:651px){.operations-board{padding:20px}.operations-board .board-top{font-size:8px;gap:8px}.flow-status{font-size:8px}.operations-board h2{font-size:25px}.operations-board .flow-bottom{font-size:9px}}
@media(max-width:650px){.operations-board h2{font-size:28px;margin-bottom:26px}.operations-board .board-top{font-size:9px}}
.hero[data-motion-reduced] .operations-flow *{animation:none!important}
.hero[data-motion-reduced] .flow-signal{opacity:0}
.hero[data-motion-reduced] .work-item{transform:translate(var(--to-x),var(--to-y)) rotate(0deg)}
/* With scripts disabled, show a legible, fully organized diagram. */
.hero:not([data-motion-ready]) .operations-flow *{animation:none!important}
.hero:not([data-motion-ready]) .flow-signal{opacity:0}