/* QSET's illustrative engineering cycle. */
.workflow-panel.art{display:block;min-height:0;padding:20px 22px 22px;color:#e8f3ff;border:1px solid #163c61;box-shadow:0 18px 45px #07294b12;isolation:isolate}
.workflow-panel::before{z-index:-1}
.workflow-header{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative}
.workflow-kicker{display:block;font:10px/1.4 monospace;letter-spacing:1.7px;color:#9fc5e8;text-transform:uppercase}
.workflow-heading{display:block;font-size:13px;line-height:1.5;letter-spacing:.1px;margin-top:3px;color:#e8f3ff}
.workflow-toggle{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid #426381;border-radius:50%;background:#ffffff06;color:#e8f3ff;transition:background .2s,border-color .2s}
.workflow-toggle:hover{background:#ffffff13;border-color:#a2c7e8}
.workflow-toggle svg{width:13px;height:13px;display:block;position:static}
.workflow-toggle .play-icon{display:none}
.workflow-panel[data-paused="true"] .pause-icon{display:none}
.workflow-panel[data-paused="true"] .play-icon{display:block}
.workflow-scene{position:relative;height:287px;margin:5px -5px 0}
.workflow-scene svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
.workflow-layer{opacity:.28;transform:translateY(0);transition:opacity .65s,transform .65s,filter .65s}
.workflow-layer.is-active{opacity:1;transform:translateY(-4px);filter:drop-shadow(0 0 9px #60aaff30)}
.workflow-layer.is-done{opacity:.9}
.layer-outline{stroke:#8fc7ff;stroke-width:1.5;fill:none;opacity:0;stroke-dasharray:90 750}
.workflow-layer.is-active .layer-outline{opacity:1;animation:trace-layer 2.4s linear infinite}
.workflow-rails{stroke:#80afd3;stroke-width:1;stroke-dasharray:3 7;opacity:.45}
.workflow-signal{fill:#fff;filter:drop-shadow(0 0 5px #70b5f9);animation:signal-rise 3.2s linear infinite;opacity:0}
.workflow-node circle.node-base{fill:#0a2746;stroke:#567c9d;stroke-width:1.2;transition:fill .4s,stroke .4s}
.workflow-node .node-number{fill:#90b0ca;font:10px monospace;text-anchor:middle;dominant-baseline:middle;transition:opacity .2s}
.workflow-node .node-check{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;opacity:0;transition:stroke-dashoffset .4s,opacity .2s}
.workflow-node .node-ring{fill:none;stroke:#e8f3ff;stroke-width:1.4;stroke-dasharray:16 45;opacity:0;transform-box:fill-box;transform-origin:center}
.workflow-node.is-active .node-base{fill:#0a66c2;stroke:#b8dcff}
.workflow-node.is-active .node-number{fill:#fff}
.workflow-node.is-active .node-ring{opacity:1;animation:node-orbit 1.6s linear infinite}
.workflow-node.is-done .node-base{fill:#0a66c2;stroke:#91caff}
.workflow-node.is-done .node-number{opacity:0}
.workflow-node.is-done .node-check{opacity:1;stroke-dashoffset:0}
.workflow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;position:relative;margin:2px 0 19px}
.workflow-step{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:0;border-top:2px solid #31526f;padding:10px 0 0;background:transparent;color:#9cb6cd;text-align:left;transition:border-color .3s,color .3s}
.workflow-step:hover{color:#fff;border-color:#8dc6ff}
.workflow-step.is-active{color:#fff;border-color:#70b5f9}
.workflow-step.is-done{color:#c9e3fb;border-color:#0a66c2}
.workflow-step-index{font:10px/1 monospace;height:11px;color:#7399b8}
.workflow-step.is-active .workflow-step-index{color:#70b5f9}
.workflow-step.is-done .workflow-step-index{color:#a8d5ff}
.workflow-step-label{font-size:11px;line-height:1.4;white-space:nowrap}
.workflow-status{position:relative;border-top:1px solid #31526f;padding-top:14px;min-height:66px}
.workflow-status-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.workflow-status-title{font-size:13px;line-height:1.4;font-weight:500;margin:0}
.workflow-counter{font:10px monospace;color:#91b4d3;white-space:nowrap}
.workflow-status-detail{font-size:11px;line-height:1.55;color:#a8c2d9;margin:5px 0 0;min-height:18px}
.workflow-progress{height:2px;background:#31526f;position:relative;overflow:hidden;margin-top:13px;border-radius:2px}
.workflow-progress::after{content:"";display:block;height:100%;background:#70b5f9;transform:scaleX(var(--progress,0));transform-origin:left}
.workflow-panel[data-paused="true"] *,.workflow-panel[data-animating="false"] *{animation-play-state:paused!important}
.workflow-panel a:focus-visible,.workflow-panel button:focus-visible{outline-color:#a8d5ff}
@keyframes trace-layer{from{stroke-dashoffset:840}to{stroke-dashoffset:0}}
@keyframes node-orbit{to{transform:rotate(360deg)}}
@keyframes signal-rise{0%,12%{opacity:0;transform:translateY(0)}18%{opacity:.85}85%{opacity:.85}100%{opacity:0;transform:translateY(-212px)}}
@media(max-width:1000px) and (min-width:761px){.workflow-panel.art{padding:18px 16px}.workflow-scene{height:250px}.workflow-step-label{font-size:10px}}
@media(max-width:760px){.workflow-panel.art{padding:20px}.workflow-scene{height:280px}.workflow-step-label{font-size:11px}.workflow-steps{margin-bottom:17px}}
@media(max-width:380px){.workflow-panel.art{padding:17px 14px}.workflow-scene{height:248px}.workflow-step-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.workflow-panel *,.workflow-panel *::after{animation:none!important;transition:none!important}.workflow-signal{display:none}}

