:root{--blue-ncs:#008ecc;--black:#000000;--white:#ffffff;--french-gray:#a8b1c0;--alice-blue:#d9e1e8;--dark-bg:#0a0a10}.workflow-container{font-family:Inter,sans-serif;color:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:.5rem;position:relative}#neural-network-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.5}.content-wrapper{position:relative;z-index:1;width:100%;max-width:72rem;margin:0 auto}.workflow-scroll-container{width:100%;padding-top:1rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;scroll-snap-type:x proximity;position:relative}.workflow-scroll-container::-webkit-scrollbar{display:none}.workflow-scroll-content{display:flex;align-items:center;position:relative;min-width:max-content;padding:0 1rem;gap:2rem;width:100%}.workflow-node{flex-shrink:0;min-width:140px;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);scroll-snap-align:center;position:relative}.node,.workflow-node{transition:all .5s cubic-bezier(.4,0,.2,1)}.node-visual-wrapper{transition:transform .4s cubic-bezier(.4,0,.2,1)}.node-ring{transition:all .4s cubic-bezier(.4,0,.2,1);transform:scale(.95);opacity:0;border-color:var(--blue-ncs)}.node.active .node-visual-wrapper{transform:scale(1.05)}.node.active .node-ring{transform:scale(1);opacity:1}.node-icon-container{background-color:rgba(168,177,192,.15);border:1px solid rgba(168,177,192,.2);transition:all .4s cubic-bezier(.4,0,.2,1);color:var(--white)}.node.active .node-icon-container{background-color:var(--blue-ncs);box-shadow:0 0 30px rgba(0,142,204,.6);border-color:var(--blue-ncs)}.node.completed .node-icon-container{background-color:rgba(0,0,0,0);border-color:var(--french-gray);color:var(--french-gray)}.node-label{color:var(--french-gray);transition:color .4s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:.5rem}.node.active .node-label,.node.completed .node-label{color:var(--white)}.connector-track{position:absolute;margin-top:8px;top:2rem;left:0;right:0;height:.25rem;width:100%;z-index:-1}.connector-progress{transition:width 1s cubic-bezier(.65,0,.35,1);width:0;background:var(--blue-ncs);box-shadow:0 0 10px rgba(0,142,204,.7)}.info-panel{transition:all .5s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);background-color:rgba(10,10,16,.5);backdrop-filter:blur(12px);border:1px solid rgba(168,177,192,.2)}.info-panel.visible{opacity:1;transform:translateY(0)}@keyframes pulse{0%,to{box-shadow:0 0 30px rgba(0,142,204,.6)}50%{box-shadow:0 0 45px rgba(0,142,204,.8)}}.node.active .node-icon-container{animation:pulse 2.5s ease-in-out infinite}.text-french-gray{color:var(--french-gray)}.text-alice-blue{color:var(--alice-blue)}.mobile-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem}.dot{width:.5rem;height:.5rem;border-radius:50%;transition:all .3s ease;cursor:pointer;border:none;outline:none}.dot:focus{outline:2px solid var(--blue-ncs);outline-offset:2px}@media(min-width:768px){.workflow-scroll-content{justify-content:space-between;gap:0;padding:0}.workflow-node{flex:1;min-width:auto}.connector-track{top:3rem}}@media(min-width:1024px){.workflow-scroll-container{overflow-x:visible}.workflow-scroll-content{width:100%}.connector-track{top:3.5rem}}@media(max-width:767px){.workflow-container{padding:.25rem}.content-wrapper{max-width:100%}.workflow-scroll-content{gap:2rem;padding:0 .5rem;justify-content:flex-start}.workflow-node{min-width:120px}.node-label{font-size:.875rem;line-height:1.25rem}.info-panel{margin:0 .5rem;backdrop-filter:blur(8px)}.workflow-node{min-height:100px;padding:.75rem}.node-visual-wrapper{margin-bottom:.75rem}.connector-track{top:2.5rem}}@media(max-width:479px){.workflow-scroll-content{gap:1.5rem;padding:0 .25rem}.workflow-node{min-width:100px}.node-label{font-size:.75rem;line-height:1rem}.info-panel{padding:1rem;margin:0 .25rem}.content-wrapper{padding:0 .5rem}.connector-track{top:2rem}}@media(hover:none)and (pointer:coarse){.workflow-node{cursor:pointer}.workflow-node:active{transform:scale(.95)}.node.active .node-visual-wrapper{transform:scale(1.02)}.info-panel{backdrop-filter:blur(6px)}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.node-icon{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}