@font-face{font-family:Factory;src:url('assets/DejaVuSans.ttf') format('truetype');font-display:swap}
:root{--blue:#389ae5;--blue-dark:#1471b9;--ink:#10293e;--muted:#607587;--navy:#081712;--line:#dce7ef;--surface:#f3f7fa;--duration:4.4s}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.9 Factory,Tahoma,sans-serif}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:hover{filter:brightness(1.06)}
.sidebar{background:white;border-bottom:1px solid var(--line);padding:18px 4%;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;direction:ltr;gap:15px;flex-shrink:0;font:bold 20px Arial;letter-spacing:1.5px}.qs-logo{width:60px;height:60px;object-fit:contain}.brand small{display:block;font:12px Arial;letter-spacing:1.8px;color:#718495;margin-top:8px}.nav-label,.sidebar-bottom{display:none}nav{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.nav-item{display:flex;gap:9px;align-items:center;border:0;border-radius:7px;padding:12px 15px;background:transparent;color:#637b8d;font-size:14px;transition:.25s}.nav-item.active{background:#e6f3ff;color:#1266a6}.nav-item:hover{background:#f0f7fd}.nav-number{font:12px Arial;color:#8197a9}.nav-item.active .nav-number{color:var(--blue-dark)}.topbar{display:flex;justify-content:space-between;gap:20px;padding:14px 4%;border-bottom:1px solid var(--line);font-size:13px;background:#fbfdff}.breadcrumb{color:#78909e}.breadcrumb span{margin:0 12px}.breadcrumb strong{color:#304d61;font-weight:400}.demo-label{display:flex;align-items:center;gap:8px;color:#597584;font-size:12px}.demo-label>span{background:var(--blue);width:6px;height:6px;border-radius:50%}main{max-width:1600px;margin:auto;padding:36px 4% 20px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:25px}.eyebrow,.section-kicker{font:12px Arial;letter-spacing:2px;color:var(--blue-dark)}.page-heading .eyebrow{text-align:right}h1{font-weight:500;font-size:clamp(26px,2.8vw,43px);margin:9px 0 8px;line-height:1.7}.page-heading p{font-size:16px;color:var(--muted);margin:0;max-width:780px}.playback-group{display:flex;align-items:center;gap:15px;flex-shrink:0}.speed-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}.speed-label select{background:white;border:1px solid #cddde8;border-radius:6px;padding:10px 5px;font-size:14px;color:#28506d;direction:ltr}.primary-button{background:var(--blue);color:white;border:0;border-radius:8px;padding:13px 20px;display:flex;align-items:center;gap:13px;white-space:nowrap;font-size:14px;box-shadow:0 5px 15px #389ae524;transition:transform .2s}.primary-button:hover{transform:translateY(-2px)}#play-icon{font:19px Arial}.journey-summary{display:flex;align-items:center;gap:38px;margin-bottom:25px;border-top:1px solid #dce7ef;padding-top:20px;color:#637b8b;font-size:14px}.journey-summary span{display:flex;align-items:center;gap:12px}.journey-summary b{font:30px Arial;color:#1e577f}.journey-summary .summary-note{margin-right:auto;font-size:13px;color:#7a91a1}.flow-panel{background:linear-gradient(120deg,#071711,#102b3e 65%,#102f47);border:1px solid #15384d;border-radius:18px;box-shadow:0 22px 60px #112c4217;overflow:hidden;color:white}.panel-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 28px;border-bottom:1px solid #ffffff12}.panel-top h2{font-size:18px;font-weight:400;margin:0}.subtle{font-size:13px;color:#9ab5c8}.flow-canvas{position:relative;height:390px;direction:rtl;background-image:radial-gradient(#d1eafa20 1px,transparent 1px);background-size:24px 24px}.flow-lines{position:absolute;width:100%;height:390px;inset:0;pointer-events:none}.track{stroke:#389ae5;stroke-width:1.8;fill:none}.branch{stroke:#478eb7;stroke-dasharray:5 5;animation:dash 14s linear infinite}.waste-line{stroke:#c98d9f;stroke-width:1.3;stroke-dasharray:4 5}.particle{fill:#97d5ff;filter:drop-shadow(0 0 6px #389ae5)}.waste-particle{fill:#efacbb}.stage-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10%;padding:39px 5%;z-index:1}.stage{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:#153147;border:1px solid #38566b;border-radius:13px;min-width:0;min-height:146px;padding:14px 6px;position:relative;transition:transform .25s,background .25s,border-color .25s}.stage:hover{transform:translateY(-5px);border-color:#78b9ed}.stage.active{background:#205581;border-color:#5cb3f3;box-shadow:0 0 0 5px #389ae511,0 8px 30px #07111a44}.stage-number{font:12px Arial;letter-spacing:2px;color:#8bb4cf}.stage-title{font-size:16px;color:#f2f8fc;text-align:center;line-height:1.8}.stage small{font:12px Arial;color:#83abc4;letter-spacing:.6px}.stage-icon{width:29px;height:29px;color:#7fc4f7;margin-bottom:3px}.stage.active .stage-icon{color:white}.stage[data-dept="1"].active .stage-icon{animation:spin 10s linear infinite}.stage-progress{position:absolute;bottom:-1px;height:2px;left:20px;right:20px;background:#8bceff;transform:scaleX(0);transform-origin:right}.stage.active .stage-progress{animation:scan var(--duration) linear infinite}.branch-row{position:absolute;inset:0;pointer-events:none}.branch-item{pointer-events:auto;position:absolute;top:240px;transform:translateX(50%);display:flex;align-items:center;gap:9px;text-align:right;border:1px solid #2e5970;border-radius:8px;background:#0f2c40;color:#c5e0f0;padding:10px 13px;font-size:13px;line-height:1.6;transition:.25s}.branch-item:hover{border-color:#389ae5;background:#1a4160}.branch-item>span:first-child{font:24px Arial;color:#65b7f4}.branch-item small{display:block;font-size:12px;color:#85aabd;margin-top:5px}.mixer{right:30%}.ready{right:62.5%}.sale{right:87.5%}.waste{right:50%;top:322px;border-color:#775866}.waste>span:first-child{color:#e2a0b5}.waste small{display:none}.mini-spin{animation:spin 5s linear infinite}.flow-footer{display:flex;align-items:center;gap:24px;border-top:1px solid #ffffff13;padding:16px 28px;font-size:12px;color:#8faec2}.flow-footer>span{display:flex;align-items:center;gap:9px}.key-line{width:22px;height:2px;background:#389ae5}.pink{background:#d08ca3}.footer-note{margin-right:auto}
.department{padding-top:43px;scroll-margin-top:24px}.detail-heading{display:flex;align-items:center;gap:18px;margin-bottom:26px}.section-index{font:45px Arial;color:#bfd1df;border-left:1px solid #d6e2eb;padding-left:20px}.detail-heading h2{font-size:29px;font-weight:500;line-height:1.6;margin:4px 0 0}.detail-counter{margin-right:auto;font:14px Arial;letter-spacing:2px;color:#7691a5}.detail-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:start}.detail-copy p{font-size:16px;line-height:2.1;color:#607789;margin:0 0 23px}.detail-copy h3{font-size:16px;font-weight:400;margin:0 0 13px}.detail-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}.detail-copy li{font-size:14px;line-height:2;color:#526c7f;padding-right:24px;position:relative}.detail-copy li:before{content:'✓';position:absolute;right:0;color:#389ae5}.department-io{border-top:1px solid #d8e4ed;margin-top:26px;padding-top:20px;display:grid;gap:17px}.io-row{display:grid;grid-template-columns:85px 1fr;gap:12px;align-items:start;font-size:14px}.io-row strong{font-weight:400;color:#1376bb}.io-row span{color:#607789}.simulation{min-width:0;background:white;border:1px solid #dce6ee;border-radius:14px;padding:24px 28px;box-shadow:0 10px 35px #163c5110}.simulation-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.sim-heading{font-size:17px}.sim-badge{border:1px solid #d3e6f4;background:#eff8ff;border-radius:5px;padding:4px 10px;font-size:12px;color:#267aac}.scenario-select{display:flex;gap:7px;flex-wrap:wrap;margin-top:21px}.scenario-select button{background:white;border:1px solid #d6e2ec;border-radius:6px;padding:8px 12px;font-size:14px;color:#637f92;transition:.2s}.scenario-select button[aria-pressed=true]{background:#e8f4ff;color:#166cb0;border-color:#95c9f0}.process-display{display:flex;direction:rtl;align-items:center;justify-content:space-between;gap:15px;margin-top:24px;padding:22px 18px;background:#f2f8fd;border:1px solid #e2eef7;border-radius:10px;overflow:hidden}.process-station{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:#3278a9;font-size:13px;flex:0 0 100px;line-height:1.6}.process-station svg{width:28px;height:28px}.process-station.destination{color:#194e71}.transfer-track{height:35px;position:relative;flex:1;border-bottom:2px dashed #b6d7ee;min-width:30px;direction:ltr}.transfer-track i{position:absolute;right:0;top:12px;width:9px;height:9px;border-radius:2px;background:#389ae5;box-shadow:0 0 9px #389ae533;animation:transfer 2.8s linear infinite}.transfer-track i:nth-child(2){animation-delay:.9s}.transfer-track i:nth-child(3){animation-delay:1.8s}.transfer-caption{position:absolute;bottom:-24px;left:0;right:0;text-align:center;white-space:nowrap;font-size:12px;color:#6f9bb6}.mini-workflow{display:flex;gap:7px;align-items:flex-start;margin:29px 0 22px;position:relative}.mini-step{flex:1;position:relative;min-width:0;text-align:center;font-size:12px;color:#8194a4;line-height:1.8}.mini-step:not(:last-child):after{content:'';position:absolute;right:calc(50% + 19px);top:18px;height:1px;background:#d8e5ee;width:calc(100% - 30px)}.mini-circle{border:1px solid #d0e1ed;background:#f6fafd;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font:13px Arial;position:relative;margin:0 auto 9px;z-index:1}.mini-step.done .mini-circle{background:#e1f1fe;color:#1680cc;border-color:#b9def8}.mini-step.done:after{background:#60b0ea}.mini-step.current{color:#1e75b5}.mini-step.current .mini-circle{background:#389ae5;color:white;border-color:#389ae5;animation:pulse 2s ease-in-out infinite}.step-caption{display:flex;align-items:flex-start;gap:15px;min-height:116px;background:#f4f8fb;padding:17px 19px;border-radius:8px}.step-number{font:27px Arial;color:#70b4e6;line-height:1.5}.step-caption strong{font-size:16px;font-weight:400;color:#245778}.step-caption p{font-size:14px;color:#6a8597;line-height:1.9;margin:5px 0 0}.step-progress{height:3px;background:#e9f1f7;margin-top:20px;border-radius:4px;overflow:hidden}#progress-fill{height:100%;width:0;background:#389ae5;transition:width .6s ease}.simulation-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px}.text-button{background:none;border:0;font-size:14px;color:#417897;display:flex;align-items:center;gap:7px;min-height:40px}.text-button span{font:20px Arial}.step-dots{display:flex;gap:5px}.step-dot{width:5px;height:5px;border-radius:50%;background:#cee3f3}.step-dot.active{background:#389ae5;width:17px;border-radius:3px}.scenario-details{padding-top:35px}.scenario-details h2{font-size:23px;font-weight:400;margin:8px 0 21px}.scenario-detail-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.scenario-detail{background:white;border:1px solid #dce7ef;border-radius:10px;padding:20px;position:relative;transition:border-color .3s,transform .3s}.scenario-detail.current{border-color:#389ae5;transform:translateY(-3px);box-shadow:0 7px 24px #389ae513}.scenario-detail>span{font:24px Arial;color:#b6d3e9}.scenario-detail h3{font-size:16px;font-weight:400;margin:10px 0 7px;color:#214c68}.scenario-detail p{font-size:14px;color:#698295;line-height:2;margin:0}.controls-summary{display:flex;align-items:center;gap:20px;padding:27px 30px;margin-top:36px;border-radius:12px;background:#e6f3fd;border:1px solid #c7e0f3}.control-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #92c5e9;border-radius:50%;font:24px Arial;color:#258cd9;flex-shrink:0}.controls-summary h2{font-size:19px;font-weight:400;margin:0 0 6px}.controls-summary p{font-size:14px;color:#628196;margin:0}.secondary-button{margin-right:auto;background:white;border:1px solid #acd1eb;border-radius:7px;padding:12px 15px;color:#247bb8;font-size:14px;white-space:nowrap}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #dae6ee;margin-top:30px;padding:24px 4%;font-size:12px;color:#7b94a6}.footer-brand{display:flex;align-items:center;gap:12px;font:12px Arial;letter-spacing:1px}.footer-brand img{object-fit:contain}.site-footer a{color:#2e7eb9}.changing{animation:enter .35s ease}body.paused *{animation-play-state:paused!important}.paused .particle{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes scan{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes dash{to{stroke-dashoffset:-120}}@keyframes pulse{50%{box-shadow:0 0 0 7px #389ae516}}@keyframes transfer{from{right:0;opacity:0}15%{opacity:1}85%{opacity:1}to{right:100%;opacity:0}}@keyframes enter{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:1250px){.sidebar{gap:12px}.nav-item{padding:10px 9px;font-size:13px}.page-heading{flex-wrap:wrap}.journey-summary{gap:24px}.summary-note{display:none!important}.stage-title{font-size:14px}.stage small{display:none}.branch-item small{display:none}.branch-item{font-size:12px}.detail-grid{grid-template-columns:1fr 1.4fr;gap:25px}.simulation{padding:23px 20px}.process-station{flex-basis:80px}.scenario-detail-list{grid-template-columns:repeat(2,1fr)}.controls-summary{flex-wrap:wrap}.secondary-button{margin-right:64px}.footer-note{display:none!important}}
@media(max-width:900px){.sidebar{align-items:flex-start;flex-direction:column;padding:18px 4% 12px}.brand{font-size:19px}.qs-logo{width:54px;height:54px}nav{width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow:auto;gap:5px;padding-bottom:5px}.nav-item{white-space:nowrap;flex-shrink:0;font-size:14px}.detail-grid{grid-template-columns:1fr}.detail-copy{max-width:760px}.detail-heading h2{font-size:26px}.stage-row{gap:6%;padding-right:3%;padding-left:3%}.branch-item{padding:9px 8px}.site-footer{flex-wrap:wrap}.process-station{flex-basis:115px}}
@media(max-width:600px){main{padding:25px 18px 12px}.page-heading{gap:18px}.page-heading h1{font-size:27px}.page-heading p{font-size:15px}.playback-group{width:100%;justify-content:space-between}.primary-button{padding:12px 16px}.speed-label{font-size:12px}.topbar{padding:12px 18px;flex-wrap:wrap}.journey-summary{gap:20px;flex-wrap:wrap}.journey-summary b{font-size:25px}.journey-summary span{font-size:12px;gap:8px}.panel-top{padding:18px;align-items:flex-start}.panel-top h2{font-size:17px}.subtle{font-size:12px;max-width:100px}.flow-canvas{height:auto;padding:20px 17px}.flow-lines{display:none}.stage-row{padding:0;gap:20px 17px;grid-template-columns:repeat(2,1fr)}.stage{min-height:130px}.stage-title{font-size:15px}.stage:nth-child(odd):after{content:'←';position:absolute;left:-17px;color:#389ae5;font-size:20px}.branch-row{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}.branch-item{position:static;transform:none;top:auto;right:auto;padding:12px 8px;font-size:12px;gap:7px;min-height:61px}.branch-item>span:first-child{font-size:21px}.flow-footer{padding:14px 17px;gap:15px;font-size:12px;flex-wrap:wrap}.detail-heading{gap:13px}.detail-heading h2{font-size:24px}.section-index{font-size:37px;padding-left:14px}.detail-counter{display:none}.detail-copy p{font-size:16px}.simulation{padding:22px 15px}.scenario-select button{font-size:13px;min-height:42px}.process-display{padding:20px 8px;gap:7px}.process-station{font-size:12px;flex-basis:80px}.transfer-caption{font-size:12px;white-space:normal;bottom:-29px}.mini-workflow{gap:5px;margin-top:31px}.mini-step{font-size:12px}.mini-circle{width:32px;height:32px}.mini-step:not(:last-child):after{top:16px;right:calc(50% + 16px)}.step-caption{padding:16px 13px;min-height:140px}.step-dots{display:none}.scenario-detail-list{grid-template-columns:1fr}.scenario-detail{padding:20px}.controls-summary{padding:24px 19px;align-items:flex-start;gap:14px}.controls-summary>div{flex:1}.controls-summary h2{font-size:18px}.secondary-button{margin:0;width:100%}.site-footer{padding:22px 18px}.site-footer>span:nth-child(2){order:3;width:100%}.footer-brand{font-size:12px}.simulation-controls{gap:6px}.text-button{font-size:13px}.eyebrow{font-size:12px;letter-spacing:1.2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.particle{display:none}}