/* Interactive stories sit alongside the existing case study, in their own workspace. */
.detail-workflow-link{display:flex;align-items:center;gap:14px;min-height:44px;padding:10px 15px;margin-top:18px;background:#fff4df;border:1px solid #d5ba9480;border-radius:22px;font:500 11px var(--body);color:#8a6749;transition:background .2s,transform .2s}.detail-workflow-link:hover{background:#ffe7bc;transform:translateY(-2px)}
.workflow-lab{--wf-accent:#8d91bb;--wf-tint:#eee9f6;--wf-ink:#433b49}
#project-dialog .workflow-lab{margin:38px 0 45px;padding:30px;border:1px solid #d9c5a95e;border-radius:25px;background:radial-gradient(ellipse at 95% 0,#ffedc780,transparent 55%),#fffcf5;box-shadow:0 18px 50px #9b734b0b;color:var(--wf-ink);overflow:hidden}
.wf-quality{--wf-accent:#839fc3;--wf-tint:#e8eff8}.wf-crypto{--wf-accent:#ac8b60;--wf-tint:#fbedd2}.wf-sales{--wf-accent:#ac9184;--wf-tint:#f7e7de}.wf-iot{--wf-accent:#87a8c0;--wf-tint:#eaf0f4}
.wf-heading{display:flex;justify-content:space-between;gap:24px;align-items:start;margin-bottom:24px}
.workflow-lab .wf-heading h3{font:600 clamp(25px,3vw,37px)/1.12 var(--sans);letter-spacing:-.055em;margin:10px 0 12px}
.wf-heading p{font:13px/1.65 var(--body);max-width:550px;color:#88745f;margin:0}
.wf-live-label{display:flex;gap:7px;align-items:center;white-space:nowrap;font-size:8px;letter-spacing:1.3px;color:#8d7a65;margin-top:4px}.wf-live-label i{width:5px;height:5px;border-radius:50%;background:var(--wf-accent);box-shadow:0 0 0 4px var(--wf-tint)}
.wf-workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px}
.wf-scene-wrap{min-width:0;border:1px solid #d8caba85;border-radius:18px;background:linear-gradient(145deg,#fffdf9,var(--wf-tint));overflow:hidden;box-shadow:inset 0 0 40px #fff9eb80}
.wf-scene-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-size:8px;letter-spacing:1.15px;color:#8d7c6d;border-bottom:1px solid #d9caba60}.wf-scene-state{font-weight:500;color:var(--wf-ink)}.wf-scene-number{white-space:nowrap;font-variant-numeric:tabular-nums}
.wf-scene-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c5b39a transparent;overscroll-behavior-x:contain;width:100%;min-width:0;outline-offset:-4px}
.wf-scene{display:block;width:100%;height:clamp(250px,24vw,310px);font-family:var(--body);overflow:hidden}
.wf-panel>rect:first-child{fill:#fffdf5;stroke:#d4c5b4;stroke-width:1.3}.wf-svg-label{font-size:10px;letter-spacing:1px;fill:#8e7a67}.wf-svg-text{font-size:17px;font-weight:500;fill:#55495a}.wf-svg-small{font-size:11px;fill:#8a786c}.wf-svg-number{font-size:25px;font-weight:600;letter-spacing:-1px;fill:#574b56}.wf-holding-value{font-size:23px}.wf-change-value{font-size:12px}
.wf-accent-fill{fill:var(--wf-accent)}.wf-paper-fill{fill:#fff9e8}.wf-thread{fill:none;stroke:var(--wf-accent);stroke-width:2;stroke-dasharray:4 7;opacity:.3;transition:opacity .6s}.wf-route{stroke:#d5c7b5;stroke-width:2;fill:none}.wf-port{fill:#fcf8ed;stroke:#c9b6a0;stroke-width:2}.wf-packet{fill:var(--wf-accent);transform:translateX(0);transition:transform 1.3s cubic-bezier(.3,.7,.2,1)}
.workflow-lab[data-phase="1"] .wf-packet{transform:translateX(0)}.workflow-lab[data-phase="2"] .wf-packet{transform:translateX(180px)}.workflow-lab[data-phase="3"] .wf-packet{transform:translateX(360px)}.workflow-lab[data-phase="4"] .wf-packet{transform:translateX(540px)}
.workflow-lab:not([data-phase="0"]) .wf-thread{opacity:1}
.wf-result-card{opacity:.35;transform:translateY(10px);transition:opacity .8s,transform .8s}.workflow-lab[data-phase="4"] .wf-result-card{opacity:1;transform:translateY(0)}
.wf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0;border-top:1px solid #d8caba85}
.wf-steps li{display:flex;align-items:center;gap:7px;padding:14px 10px;border-right:1px solid #d8caba60;font-size:10px;color:#9b8876;transition:background .4s,color .4s}.wf-steps li:last-child{border:0}.wf-steps li span{font-size:8px;opacity:.65}.wf-steps .is-current{background:var(--wf-tint);color:var(--wf-ink);font-weight:600}.wf-steps .is-done{color:var(--wf-accent)}
.wf-narrative{display:flex;flex-direction:column;min-width:0;padding:22px 18px;border-radius:18px;background:#f5ebdd75;border:1px solid #decdb860}
.wf-note-label{font-size:8px;letter-spacing:1.3px;color:#9a7f62}.wf-narrative h4{font:600 27px/1.1 var(--sans);letter-spacing:-.045em;margin:22px 0 12px}.wf-explanation{font:12px/1.7 var(--body);color:#806e5d;margin:0 0 20px;min-height:100px}.wf-outcome{margin-top:auto;padding:15px 0 0;border-top:1px solid #cbb99e66}.wf-outcome small{display:block;font-size:8px;letter-spacing:1px;color:#9d846d}.wf-outcome strong{display:block;font:500 17px/1.4 var(--sans);letter-spacing:-.025em;margin-top:9px;transition:color .3s}.is-complete .wf-outcome strong{color:var(--wf-accent)}
.wf-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:24px}.wf-control-label{display:block;font-size:8px;color:#9b8065;letter-spacing:1.4px;margin-bottom:10px}.wf-choices,.wf-actions{display:flex;flex-wrap:wrap;gap:7px}.workflow-lab button{font:500 11px var(--body);color:#7b634e;background:#fffaf1;border:1px solid #d2bb9e80;border-radius:22px;min-height:44px;padding:10px 15px;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}.workflow-lab button:hover{transform:translateY(-2px);background:#fff2d9;box-shadow:0 5px 13px #a07d5320}.workflow-lab button:focus-visible,.wf-scene-viewport:focus-visible{outline:2px solid var(--wf-accent);outline-offset:3px}.workflow-lab button[aria-pressed="true"]{background:var(--wf-tint);color:var(--wf-ink);border-color:var(--wf-accent)}.workflow-lab .wf-play{background:#f4d89d;border-color:#cda866;color:#69503a;display:flex;align-items:center;justify-content:center;gap:8px}.workflow-lab button:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}.wf-actions{flex-shrink:0}.wf-disclosure{margin:18px 0 0;font:9px/1.6 var(--body);color:#9b8671}.wf-disclosure span{color:#ab9782}
.wf-soil-control{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:15px;max-width:310px;font-size:11px;color:#8c775f}.wf-soil-control input{grid-column:1/-1;width:100%;min-height:28px;accent-color:var(--wf-accent);cursor:pointer}.wf-soil-control output{font-variant-numeric:tabular-nums}
/* Each stage moves a real part of the illustration. */
.wf-film-row{fill:#f1ecf3;transition:fill .6s}.wf-film{transition:transform .9s,opacity .6s;transform-box:fill-box;transform-origin:center}.wf-poster-0{fill:#aebeda}.wf-poster-1{fill:#e9c691}.wf-poster-2{fill:#d7b9c4}.wf-result-poster{fill:#aebeda;transition:fill .5s}.wf-match-dot{fill:#d1c8ce;transition:fill .6s,transform .6s;transform-box:fill-box;transform-origin:center}
.wf-netflix[data-phase="2"] .wf-film.is-match{transform:translateX(4px)}.wf-netflix[data-phase="2"] .wf-film.is-match .wf-match-dot{fill:var(--wf-accent);transform:scale(1.2)}
.wf-netflix:is([data-phase="3"],[data-phase="4"])[data-film="0"] .wf-film-0,.wf-netflix:is([data-phase="3"],[data-phase="4"])[data-film="1"] .wf-film-1{transform:translateX(8px) scale(1.02)}
.wf-netflix:is([data-phase="3"],[data-phase="4"])[data-film="0"] :is(.wf-film-1,.wf-film-2),.wf-netflix:is([data-phase="3"],[data-phase="4"])[data-film="1"] :is(.wf-film-0,.wf-film-2){opacity:.4}
.wf-netflix[data-film="1"] .wf-result-poster{fill:#e9c691}.wf-netflix[data-choice="1"] .wf-theme-value{fill:#a47f8b}.wf-netflix[data-choice="2"] .wf-theme-value{fill:#7d94b4}
.wf-pipe-base{fill:none;stroke:#d1c6b8;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.wf-water-flow{fill:none;stroke:#7daecc;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 14;opacity:0;transition:opacity .5s}.wf-droplets,.wf-soil-water{opacity:0;transition:opacity 1s}.wf-rotor{transform-box:fill-box;transform-origin:center}.wf-plant{transform-box:fill-box;transform-origin:bottom;transition:transform 1s}.wf-sensor-pulse{fill:var(--wf-accent)}
.wf-iot[data-pump="true"]:is([data-phase="3"],[data-phase="4"]) .wf-water-flow{opacity:1;animation:wf-flow 1s linear infinite}.wf-iot[data-pump="true"][data-phase="4"] .wf-droplets{opacity:1;animation:wf-drip .9s linear 3}.wf-iot[data-pump="true"][data-phase="4"] .wf-soil-water{opacity:.3}.wf-iot[data-pump="true"][data-phase="4"] .wf-plant{transform:scaleY(1.08)}.wf-iot[data-pump="true"]:is([data-phase="3"],[data-phase="4"]) .wf-rotor{animation:wf-spin 1.1s linear 3}
.wf-technician,.wf-service-desk{opacity:.45;transition:opacity .6s}.wf-sales:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .wf-service-desk{opacity:1}.wf-sales:is([data-phase="3"],[data-phase="4"]) .wf-technician{opacity:1}.wf-service-ticket{transition:transform 1.4s cubic-bezier(.3,.7,.2,1),opacity .4s}.wf-sales[data-phase="2"] .wf-service-ticket{transform:translate(190px,-15px)}.wf-sales[data-phase="3"] .wf-service-ticket{transform:translate(396px,9px)}.wf-sales[data-phase="4"] .wf-service-ticket{transform:translate(595px,-7px);opacity:0}.wf-wrench{transform-box:fill-box;transform-origin:center}.wf-sales.is-running[data-phase="3"] .wf-wrench{animation:wf-wrench .6s ease-in-out 3}.wf-checkmark{fill:none;stroke:#fff9e8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;transition:stroke-dashoffset .7s}.wf-sales[data-phase="4"] .wf-checkmark{stroke-dashoffset:0}
.wf-chart-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s}.wf-chart-end{opacity:0;transition:opacity 1s}.wf-crypto:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .wf-chart-line{stroke-dashoffset:0}.wf-crypto:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .wf-chart-end{opacity:1}.wf-calculation{opacity:.4;transition:opacity .6s}.wf-crypto:is([data-phase="3"],[data-phase="4"]) .wf-calculation{opacity:1}.wf-crypto[data-choice="1"] .wf-chart-line{transform:translateY(310px) scaleY(-1)}.wf-crypto[data-choice="1"] .wf-chart-end{transform:translateY(103px)}.wf-crypto[data-choice="2"] .wf-chart-line{transform:translateY(120px) scaleY(.2)}.wf-crypto[data-choice="2"] .wf-chart-end{transform:translateY(37px)}
.wf-inspection-item{transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}.wf-quality:is([data-phase="1"],[data-phase="2"],[data-phase="3"]) .wf-inspection-item{transform:translateX(190px)}.wf-quality[data-phase="4"] .wf-inspection-item{transform:translateX(336px)}.wf-scan{opacity:0;transform-origin:290px 170px;transition:opacity .6s}.wf-quality.is-running[data-phase="2"] .wf-scan{opacity:1;animation:wf-scan 1.2s ease-in-out infinite}.wf-quality[data-phase="2"] .wf-scan{opacity:1}.wf-detection-box,.wf-clear-check{opacity:0;transition:opacity .6s}.wf-quality[data-choice="1"] .wf-defect{opacity:0}.wf-quality[data-choice="0"]:is([data-phase="3"],[data-phase="4"]) .wf-detection-box,.wf-quality[data-choice="1"]:is([data-phase="3"],[data-phase="4"]) .wf-clear-check{opacity:1}.wf-quality.is-running .wf-belt-marks{animation:wf-flow 1s linear infinite}
.wf-netflix:is([data-phase="3"],[data-phase="4"])[data-film="1"] .wf-film-1{transform:translate(8px,-56px)}.wf-netflix:is([data-phase="3"],[data-phase="4"])[data-film="1"] .wf-film-0{transform:translateY(56px)}
.workflow-lab.is-running .wf-thread{animation:wf-flow 1.3s linear infinite}.workflow-lab:is(.is-paused,.is-offscreen) *{animation-play-state:paused!important}
@keyframes wf-flow{to{stroke-dashoffset:-48}}@keyframes wf-drip{from{transform:translateY(-3px);opacity:0}40%{opacity:1}to{transform:translateY(14px);opacity:0}}@keyframes wf-spin{to{transform:rotate(360deg)}}@keyframes wf-wrench{50%{transform:rotate(-18deg)}}@keyframes wf-scan{50%{transform:scaleY(.08)}}
@media(max-width:1000px){.wf-workspace{grid-template-columns:minmax(0,1fr)}.wf-narrative{display:grid;grid-template-columns:1fr 180px;gap:0 25px;padding:20px}.wf-narrative h4{margin:8px 0 10px}.wf-note-label,.wf-narrative h4,.wf-explanation{grid-column:1}.wf-explanation{min-height:0;margin:0}.wf-outcome{grid-column:2;grid-row:1/4;align-self:center;margin:0;padding:0 0 0 20px;border-top:0;border-left:1px solid #cbb99e66}.wf-toolbar{flex-wrap:wrap}.wf-actions{margin-left:auto}}
@media(max-width:650px){.workflow-lab{padding:20px 15px;margin:28px 0 34px;border-radius:20px}.wf-heading{display:block;margin-bottom:18px}.wf-heading p{font-size:12px}.wf-live-label{margin-top:17px;font-size:7px}.wf-workspace{gap:12px}.wf-scene{min-width:590px}.wf-scene-top{font-size:7px;padding:13px 12px;letter-spacing:.65px}.wf-scene-viewport::after{content:'SWIPE TO EXPLORE THE SCENE ↔';display:block;font-size:7px;letter-spacing:1px;color:#a18a71;padding:2px 12px 12px;position:sticky;left:0;width:max-content}.wf-steps li{flex-direction:column;align-items:start;padding:11px 8px;gap:5px;font-size:9px}.wf-narrative{display:block;padding:17px}.wf-explanation{font-size:12px}.wf-narrative h4{font-size:25px}.wf-outcome{border-left:0;border-top:1px solid #cbb99e66;margin-top:17px;padding:13px 0 0}.wf-outcome strong{font-size:17px}.wf-toolbar{display:block;margin-top:19px}.wf-choices button{font-size:10px;padding:10px 12px}.wf-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;margin-top:16px;gap:5px}.wf-actions button{padding:10px 12px;font-size:10px}.wf-actions .wf-play{padding:10px}.wf-disclosure{font-size:8px}.wf-disclosure span{display:block}.wf-soil-control{max-width:none}}
.wf-toolbar{margin-top:0;margin-bottom:22px}
.wf-steps li{padding:0;display:block}.wf-steps li button{display:flex;align-items:center;gap:7px;min-height:48px;width:100%;border:0;border-radius:0;background:transparent;text-align:left;padding:12px 10px;font-size:10px;color:inherit}.wf-steps li button:hover{transform:none;box-shadow:none;background:#fff7e599}.wf-steps li button:focus-visible{outline-offset:-3px}
.wf-progress-track{height:2px;background:#ded0ba50;overflow:hidden}.wf-progress-track i{display:block;height:100%;width:0;background:var(--wf-accent);transition:width .75s cubic-bezier(.2,.7,.2,1)}.wf-mobile-caption{display:none}
.wf-scene-wrap{box-shadow:inset 0 0 45px #fffaf199,0 10px 30px #a6865710}.wf-scene-top{background:#fffdf44d}.wf-film-row{transition:fill .6s,stroke .6s}.wf-film.is-match .wf-film-row{stroke:#a19bbf44;stroke-width:1}.wf-result-card>rect:first-child{transition:stroke .7s,fill .7s}.is-complete .wf-result-card>rect:first-child{stroke:var(--wf-accent);fill:#fffdf5}
.wf-iot[data-phase="4"] .wf-water-flow{animation-iteration-count:4}
.wf-disclosure{font-size:10px;line-height:1.7;color:#907b64}.wf-disclosure span{font-size:9px}
@media(max-width:650px){.wf-steps li button{display:flex;flex-direction:column;align-items:start;padding:10px 8px;gap:5px;font-size:9px;min-height:48px}.wf-mobile-caption{display:block;border-top:1px solid #d8caba60;padding:14px 13px;background:#fffcf5b3}.wf-mobile-caption strong{font:600 13px var(--sans);color:var(--wf-ink)}.wf-mobile-caption p{font:11px/1.65 var(--body);margin:6px 0 0;color:#8e7964}.wf-narrative{padding:18px}.wf-note-label{font-size:8px}.wf-explanation{font-size:12px;line-height:1.8}.wf-disclosure{font-size:9px}}
.wf-soil-control input{appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:0}
.wf-soil-control input::-webkit-slider-runnable-track{height:5px;background:#ded0bc;border-radius:8px}
.wf-soil-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-top:-6px;border:3px solid #fffcf5;border-radius:50%;background:var(--wf-accent);box-shadow:0 1px 5px #7a6a5740}
.wf-soil-control input::-moz-range-track{height:5px;background:#ded0bc;border-radius:8px}.wf-soil-control input::-moz-range-thumb{width:12px;height:12px;border:3px solid #fffcf5;border-radius:50%;background:var(--wf-accent)}
.wf-netflix:is([data-phase="3"],[data-phase="4"]) .wf-film.is-match .wf-match-dot{fill:var(--wf-accent)}
@media(max-width:650px){#project-dialog .workflow-lab{padding:20px 15px}.wf-scene{height:258px}.wf-toolbar{margin:0 0 20px}}
@media(prefers-reduced-motion:reduce){.workflow-lab *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.less-motion .workflow-lab *{animation:none!important;transition:none!important;scroll-behavior:auto!important}