.workflow{padding-top:90px;padding-bottom:90px;background:#edf5f8;color:#002b4c}
.wf-heading{max-width:850px;margin-bottom:36px}.wf-heading h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;letter-spacing:-.04em;margin:16px 0}.wf-heading>p:last-child{font-size:1.125rem;line-height:1.65;max-width:690px}
.wf-shell{border:1px solid #b7ccd6;background:#fff;box-shadow:0 20px 60px #002b4c0c;overflow:hidden}.wf-scene{position:relative;min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;color:white;background:#071e2c;isolation:isolate}.wf-lab{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.wf-scene:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#071e2c10,#071e2c55 30%,#071e2cf5 90%);z-index:-1}.wf-caption{position:absolute;top:20px;left:24px;font-size:.8125rem;background:#071e2ce8;padding:8px 12px;border:1px solid #c0ebff40}.wf-topology{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:100px}.wf-node{border:1px solid #c0ebff70;background:#071e2ce8;padding:18px;position:relative;min-width:0;transition:border-color .3s,background .3s}.wf-node>span{display:block;font-size:.875rem;color:#c0ebff;margin-bottom:8px}.wf-node strong{font-size:1rem;line-height:1.4;font-weight:600;display:block}.wf-node:not(:last-child):after{content:'↔';position:absolute;right:-24px;top:38%;color:#c0ebff;font-size:1.25rem}.wf-node.is-active{border-color:#f59e71;background:#183d50}.wf-node.is-active>span{color:#f59e71}.wf-signal{height:2px;background:#c0ebff30;overflow:hidden;margin:20px 0 12px}.wf-signal span{display:block;height:100%;width:22%;background:#f59e71;transform:translateX(0)}.is-playing .wf-signal span{animation:wf-travel 2.6s linear infinite}.wf-state{font-size:.875rem;margin:0;color:#c0ebff}.wf-panel{padding:28px 32px}.wf-steps{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0;margin:0 0 28px}.wf-steps button{font:inherit;font-size:.875rem;color:#002b4c;background:#f1f6f8;border:1px solid transparent;width:100%;min-height:72px;text-align:left;padding:10px;cursor:pointer}.wf-steps button span{display:block;font-size:.8125rem;margin-bottom:6px;color:#466373}.wf-steps button[aria-pressed=true]{background:#002b4c;color:white;border-color:#002b4c}.wf-steps button[aria-pressed=true] span{color:#f59e71}.wf-details{min-height:150px;max-width:850px}.wf-kicker{font-size:.8125rem;letter-spacing:.12em;font-weight:600;margin:0 0 12px}.wf-details h3{font-size:1.6rem;line-height:1.2;margin:0 0 12px;letter-spacing:-.025em}.wf-details article>p:last-child{font-size:1rem;line-height:1.65;margin:0}.wf-controls{display:flex;align-items:center;gap:10px;margin-top:24px}.wf-controls button{font:inherit;font-size:.875rem;min-width:46px;min-height:46px;padding:10px 16px;border:1px solid #9cb6c3;background:white;color:#002b4c;cursor:pointer}.wf-controls [data-play]{background:#002b4c;border-color:#002b4c;color:white;min-width:185px}.wf-controls button:disabled{opacity:.4;cursor:default}.wf-controls>span{margin-left:auto;font-size:.875rem}.workflow button:focus-visible{outline:3px solid #bd5e24;outline-offset:3px}.wf-foot{display:flex;gap:40px;align-items:start;margin-top:22px}.wf-foot p{font-size:.875rem;line-height:1.65;max-width:760px;margin:0;color:#405e6f}.wf-foot a{font-size:.9375rem;font-weight:600;line-height:1.5;margin-left:auto;min-width:190px}.workflow [hidden]{display:none!important}
@keyframes wf-travel{to{transform:translateX(460%)}}
@media(max-width:850px){.wf-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.wf-details{min-height:180px}.wf-foot{display:block}.wf-foot a{display:inline-block;margin-top:16px}.wf-scene{min-height:350px}.wf-node{padding:12px}.wf-topology{gap:22px}.wf-node:not(:last-child):after{right:-20px}}
@media(max-width:540px){.workflow{padding-top:55px;padding-bottom:55px}.wf-panel{padding:22px 18px}.wf-scene{padding:20px 18px;min-height:480px}.wf-topology{grid-template-columns:1fr;gap:16px;margin-top:135px}.wf-node{padding:12px 14px;display:flex;gap:12px;align-items:center}.wf-node>span{margin:0}.wf-node:not(:last-child):after{content:'↕';top:auto;bottom:-19px;right:50%;font-size:1rem}.wf-caption{left:14px;right:14px;top:14px;font-size:.75rem}.wf-details{min-height:220px}.wf-controls{gap:6px;flex-wrap:wrap}.wf-controls button{padding:10px}.wf-controls [data-play]{min-width:155px}.wf-controls>span{width:100%;margin-top:8px}.wf-steps button{overflow-wrap:anywhere}.wf-heading h2{font-size:2.25rem}}
@media(prefers-reduced-motion:reduce){.workflow *{animation:none!important;transition:none!important}}
/* Cinematic stage: one shared timeline drives camera, packet and trace motion. */
.wf-shell{border-color:#14394d;background:#071e2c;color:#fff}.wf-panel{background:white;color:#002b4c}.film-stage{height:550px;position:relative;overflow:hidden;background:#071e2c;isolation:isolate}.film-shot{position:absolute;inset:0;overflow:hidden}.film-image{position:absolute;width:100%;height:100%;object-fit:cover;animation:film-camera 8s linear both paused;animation-delay:var(--film-time,0s)}.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,#071e2caa,transparent 65%,#071e2cdd),linear-gradient(90deg,#071e2c99,transparent)}.film-copy{position:absolute;top:50px;left:5%;right:5%;max-width:700px}.film-copy>span{font-size:.8125rem;letter-spacing:.16em;color:#c0ebff}.film-copy h3{font-size:clamp(1.8rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.045em;margin:14px 0;color:white}.film-disclosure{position:absolute;bottom:19px;left:5%;font-size:.6875rem;letter-spacing:.1em;color:#d2e4ee}.film-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#c0ebff22}.film-progress i{display:block;width:var(--film-progress,0%);height:100%;background:#f59e71}.film-tag,.film-transfer,.film-terminal,.film-exchange,.film-graph,.film-limit{position:absolute;left:5%;right:5%;bottom:75px;animation:film-enter 8s both paused;animation-delay:var(--film-time,0s)}.film-tag{border-left:3px solid #f59e71;background:#071e2cd9;padding:20px 26px;width:fit-content;font-size:.9375rem;letter-spacing:.1em}.film-transfer{display:flex;align-items:center;gap:30px}.film-transfer span{padding:24px 30px;border:1px solid #c0ebff80;background:#071e2ce8;font-size:1.15rem}.film-transfer span:last-child{border-color:#f59e71;animation:film-arrive 8s both paused;animation-delay:var(--film-time,0s)}.film-transfer b{color:#f59e71;font-size:2rem}.film-terminal{max-width:600px;background:#071e2cf5;border:1px solid #52798c;padding:24px 30px;font-family:monospace}.film-terminal p{font:600 .875rem sans-serif;letter-spacing:.12em;color:#c0ebff;margin:0 0 18px}.film-terminal div{padding:9px 0;font-size:1rem;animation:film-line 8s both paused;animation-delay:var(--film-time,0s)}.film-terminal div:nth-of-type(2){animation-name:film-line-two}.film-terminal div:nth-of-type(3){animation-name:film-line-three}.film-terminal div span{color:#f59e71;margin-right:20px}.film-terminal small{display:block;margin-top:14px;color:#b4ccd7;font: .8125rem sans-serif}.film-exchange{display:flex;align-items:center}.film-endpoint{width:31%;padding:25px 20px;background:#071e2cf2;border:1px solid #80afc3;font-size:1.2rem}.film-endpoint span{display:block;font-size:.875rem;color:#c0ebff;margin-top:9px}.film-wire{position:relative;width:38%;height:42px;border-top:1px solid #c0ebff;border-bottom:1px solid #c0ebff}.film-wire b{position:absolute;top:60px;width:100%;text-align:center;font-size:.8125rem;color:#c0ebff;font-weight:400}.packet{position:absolute;width:20px;height:5px;background:#f59e71;box-shadow:0 0 16px #f59e71;top:-3px;left:0;animation:film-packet 2s linear infinite paused;animation-delay:var(--film-time,0s)}.packet.inbound{top:auto;bottom:-3px;background:#c0ebff;animation-direction:reverse}.film-fault .film-exchange{bottom:165px}.fault-callout{position:absolute;bottom:65px;left:5%;padding:16px 24px;border-left:3px solid #f59e71;background:#382e29f5;animation:film-arrive 8s both paused;animation-delay:var(--film-time,0s);font-size:1.125rem}.fault-callout span{display:block;font-size:.875rem;color:#f8d8c6;margin-top:6px}.film-fault .packet{animation-name:film-packet-stop;animation-duration:8s;animation-iteration-count:1}.film-graph{background:#071e2cef;border:1px solid #416576;padding:20px 26px;max-width:820px}.film-graph svg{display:block;width:100%;height:180px;overflow:visible}.plot-grid{fill:none;stroke:#c0ebff19;stroke-width:1}.plot-reference,.plot-live{fill:none;stroke:#c0ebff;stroke-width:3;stroke-dasharray:8 6}.plot-live{stroke:#f59e71;stroke-dasharray:900;stroke-dashoffset:900;animation:film-trace 8s linear both paused;animation-delay:var(--film-time,0s)}.film-legend{display:flex;gap:25px;font-size:.8125rem}.film-legend span:first-child{color:#c0ebff}.film-legend span:last-child{color:#f59e71}.film-graph p{font-size:.75rem;color:#b4ccd7;margin:6px 0 0}.film-limit{max-width:630px;padding:28px;background:#071e2cf0;border:1px solid #52798c}.film-limit>span{font-size:1rem;color:#c0ebff}.film-limit>div{height:22px;background:#c0ebff22;margin:20px 0}.film-limit i{display:block;height:100%;background:#f59e71;animation:film-limit 8s both paused;animation-delay:var(--film-time,0s)}.film-limit strong{font-size:1rem;font-weight:400}.wf-player{display:flex;align-items:center;gap:20px;padding:18px 28px;background:#0c2a3b}.wf-player button{min-height:44px;min-width:110px;border:1px solid #7596a7;background:none;color:white;font:inherit;font-size:.875rem;padding:10px 16px;cursor:pointer}.wf-player [data-play]{background:#f59e71;color:#071e2c;border-color:#f59e71;min-width:125px}.wf-seek-label{font-size:0;flex:1}.wf-seek-label input{width:100%;accent-color:#f59e71;cursor:pointer;min-height:44px}.wf-player [data-time]{font-size:.8125rem;white-space:nowrap;font-variant-numeric:tabular-nums}.wf-shell:fullscreen{overflow-y:auto}.wf-shell:fullscreen .film-stage{height:70vh}.wf-controls{margin-top:12px}.wf-details{min-height:145px}
@keyframes film-camera{from{transform:scale(1.04) translateX(-1%)}to{transform:scale(1.17) translateX(1.5%)}}
@keyframes film-enter{0%{opacity:.2;transform:translateY(20px)}12%,100%{opacity:1;transform:translateY(0)}}
@keyframes film-arrive{0%,18%{opacity:0;transform:translateX(-24px)}35%,100%{opacity:1;transform:translateX(0)}}
@keyframes film-line{0%{opacity:0}15%,100%{opacity:1}}
@keyframes film-line-two{0%,25%{opacity:0}40%,100%{opacity:1}}
@keyframes film-line-three{0%,50%{opacity:0}65%,100%{opacity:1}}
@keyframes film-packet{from{left:0}to{left:calc(100% - 20px)}}
@keyframes film-packet-stop{0%{left:0;opacity:1}25%{left:70%;opacity:1}30%,100%{left:70%;opacity:0}}
@keyframes film-trace{0%,8%{stroke-dashoffset:900}85%,100%{stroke-dashoffset:0}}
@keyframes film-limit{0%,15%{width:90%}60%,100%{width:48%}}
@media(max-width:650px){.film-stage{height:520px}.film-copy{top:35px}.film-copy h3{font-size:2rem}.film-transfer{flex-direction:column;gap:8px;bottom:65px}.film-transfer span{padding:15px 20px;width:100%;font-size:1rem}.film-transfer b{transform:rotate(90deg);font-size:1.5rem}.film-exchange{bottom:115px}.film-endpoint{padding:14px 10px;font-size:.9375rem;width:37%}.film-endpoint span{font-size:.75rem}.film-wire{width:26%}.film-wire b{font-size:.75rem;top:65px}.film-graph{padding:16px}.film-graph svg{height:160px}.film-terminal{padding:20px}.film-terminal div{font-size:.875rem}.wf-player{gap:10px;padding:14px;flex-wrap:wrap}.wf-seek-label{min-width:100px}.wf-player [data-expand]{display:none}.film-fault .film-exchange{bottom:200px}.film-disclosure{font-size:.625rem}.wf-details{min-height:220px}}
@media(prefers-reduced-motion:reduce){.film-shot *{animation:none!important}.plot-live{stroke-dashoffset:0}.film-limit i{width:48%}.film-tag,.film-transfer,.film-terminal,.film-exchange,.film-graph,.film-limit{opacity:1}}