/* Shared motion for the standalone and React versions. */
.ops-flow{width:100%;max-width:420px;min-height:420px;padding:23px;border:1px solid rgba(227,179,79,.2);border-radius:24px;background:linear-gradient(160deg,#171821,#101116 70%);box-shadow:0 35px 90px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.045);font-family:'Space Mono',monospace;position:relative;overflow:hidden}
.ops-flow:before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle,rgba(227,179,79,.07),transparent 42%);animation:opsBreath 6s ease-in-out infinite;pointer-events:none}
.ops-topline,.ops-bottomline{position:relative;display:flex;justify-content:space-between;gap:8px;color:#8c8991;font-size:10px;letter-spacing:.08em}
.ops-topline span:first-child{color:#d5bf8e}.ops-topline i,.ops-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8fe3b0;margin-right:7px;box-shadow:0 0 10px #8fe3b0}
.ops-diagram{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:65px 0 43px}
.ops-track{position:absolute;left:11%;right:11%;top:29px;height:2px;background:linear-gradient(90deg,rgba(227,179,79,.3),rgba(125,211,252,.45),rgba(143,227,176,.45));overflow:hidden}
.ops-pulse{display:block;width:34%;height:2px;background:#f5d181;box-shadow:0 0 14px 3px rgba(227,179,79,.65);animation:opsTravel 6s linear infinite}
.ops-step{z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;color:#dedbd6;font-size:10px}
.ops-icon{display:grid;place-items:center;width:60px;height:60px;border:1px solid rgba(227,179,79,.3);border-radius:16px;background:#202027;color:#e3b34f;font-size:22px;box-shadow:0 0 0 5px #13141a}
.ops-step:nth-child(3) .ops-icon{color:#7dd3fc;border-color:rgba(125,211,252,.3)}.ops-step:nth-child(4) .ops-icon{color:#8fe3b0;border-color:rgba(143,227,176,.3)}.ops-step:nth-child(5) .ops-icon{color:#c4a3f2;border-color:rgba(196,163,242,.3)}
.ops-step small{font-size:8px;color:#827f89;line-height:1.3;max-width:64px;min-height:22px}
.ops-console{position:relative;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:15px 18px;background:#0b0d12;color:#b8b5ba;font-size:10px;line-height:2.1}
.ops-console div{display:flex;gap:9px}.ops-console div span:last-child{margin-left:auto;color:#777b84}.ops-console .ops-prompt{color:#e3b34f}.ops-console .ops-success,.ops-console .ops-healthy{color:#8fe3b0!important}.ops-console .ops-run{color:#e3b34f!important}
.ops-bottomline{margin-top:21px;font-size:9px}.ops-status{color:#8fe3b0}.ops-status i{width:5px;height:5px;animation:opsBlink 2s ease-in-out infinite}
@keyframes opsTravel{from{transform:translateX(-100%)}to{transform:translateX(340%)}}@keyframes opsBreath{50%{opacity:.35}}@keyframes opsBlink{50%{opacity:.3}}
.pipeline-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#08080c;color:#eeece7;font-family:Inter,sans-serif;overflow:hidden}.pipeline-intro.is-exiting{animation:pipelineFade .5s ease forwards}.pipeline-intro-inner{width:min(880px,92vw);text-align:center}.pipeline-intro-kicker{font:11px 'Space Mono',monospace;color:#e3b34f;letter-spacing:.22em}.pipeline-intro h2{font:600 clamp(34px,6vw,68px)/1.1 Fraunces,serif;margin:15px 0 10px}.pipeline-intro h2 em{color:#e3b34f;font-weight:400}.pipeline-intro p{color:#aaa8ae;font-size:15px}
.pipeline-stage{position:relative;margin:58px auto 30px;height:190px;width:100%}.pipeline-rail{position:absolute;top:38px;left:10%;right:10%;height:3px;background:rgba(227,179,79,.18)}.pipeline-progress{display:block;width:0;height:100%;background:linear-gradient(90deg,#e3b34f,#7dd3fc,#8fe3b0);box-shadow:0 0 18px rgba(227,179,79,.5);animation:pipelineFill 7s ease-in-out forwards}.pipeline-packet{position:absolute;top:-7px;left:0;width:17px;height:17px;background:#f3e4b4;border:3px solid #e3b34f;border-radius:50%;box-shadow:0 0 0 6px rgba(227,179,79,.12),0 0 25px rgba(227,179,79,.8);animation:pipelineMove 7s ease-in-out forwards}
.pipeline-nodes{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.pipeline-node{display:flex;align-items:center;flex-direction:column;gap:11px;font:11px 'Space Mono',monospace;color:#aaa8ae;animation:stageActivate .7s ease forwards;animation-delay:var(--step)}.pipeline-node-icon{display:grid;place-items:center;width:78px;height:78px;border:1px solid rgba(227,179,79,.25);border-radius:18px;background:#191b22;box-shadow:0 0 0 7px #08080c;color:#e3b34f;font:28px 'Space Mono',monospace}.pipeline-node:nth-child(2) .pipeline-node-icon{color:#7dd3fc}.pipeline-node:nth-child(3) .pipeline-node-icon{color:#8fe3b0}.pipeline-node:nth-child(4) .pipeline-node-icon{color:#7dd3fc}.pipeline-node:nth-child(5) .pipeline-node-icon{color:#c4a3f2}.pipeline-node strong{font-weight:700}.pipeline-node small{font-size:10px;color:#77737c}.pipeline-intro-status{display:flex;align-items:center;gap:9px;max-width:680px;margin:0 auto;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#111219;color:#b3a795;font:10px 'Space Mono',monospace;letter-spacing:.08em}.pipeline-status-dot{width:7px;height:7px;border-radius:50%;background:#e3b34f;box-shadow:0 0 10px #e3b34f;animation:opsBlink 2s ease-in-out infinite}.pipeline-intro-count{margin-left:auto;color:#77737c}.pipeline-skip{position:absolute;right:24px;top:24px;padding:9px 16px;border:1px solid rgba(227,179,79,.5);border-radius:999px;background:rgba(227,179,79,.13);color:#e3b34f;font:11px 'Space Mono',monospace;cursor:pointer}.pipeline-skip:hover{background:rgba(227,179,79,.24)}
@keyframes pipelineFill{0%{width:0}100%{width:100%}}@keyframes pipelineMove{0%{left:0}100%{left:100%}}@keyframes stageActivate{to{color:#eeece7;filter:drop-shadow(0 0 12px rgba(227,179,79,.35))}}@keyframes pipelineFade{to{opacity:0;visibility:hidden}}
@media(max-width:820px){.ops-flow{margin:auto;min-height:390px}.pipeline-intro p{font-size:13px}.pipeline-node-icon{width:60px;height:60px;font-size:21px}.pipeline-rail{top:29px}.pipeline-node{font-size:9px}.pipeline-node small{font-size:8px}}
@media(max-width:450px){.ops-flow{padding:16px;min-height:365px}.ops-icon{width:48px;height:48px;font-size:18px}.ops-track{top:23px}.ops-step{font-size:9px}.ops-step small{font-size:8px}.ops-diagram{margin:50px 0 30px}.pipeline-stage{height:145px;margin-top:45px}.pipeline-node-icon{width:46px;height:46px;border-radius:12px;font-size:16px;box-shadow:0 0 0 3px #08080c}.pipeline-rail{top:22px}.pipeline-node{gap:7px;font-size:7px}.pipeline-node small{font-size:7px;max-width:60px}.pipeline-intro-status{font-size:8px}}
@media(prefers-reduced-motion:reduce){.ops-flow:before,.ops-pulse,.ops-status i,.pipeline-progress,.pipeline-packet,.pipeline-node,.pipeline-status-dot{animation:none!important}}