.project-demo{--pd-text:#eae6dc;--pd-ochre:#c08a4a;--pd-jade:#7ba88a;max-width:100%;color:var(--pd-text);font:inherit}
.project-demo .pd-label{margin:0 0 1rem;color:#c8c8b9;font-size:12px;letter-spacing:.055em}
.project-demo .pd-controls{display:flex;flex-wrap:wrap;gap:.5rem}
.project-demo .pd-controls button{appearance:none;border:1px solid #59645b;border-radius:999px;background:transparent;color:var(--pd-text);font:inherit;font-size:13px;padding:.65rem .9rem;min-height:44px;cursor:pointer;transition:background .2s,border-color .2s}
.project-demo .pd-controls button:hover{border-color:var(--pd-ochre);background:#283028}.project-demo .pd-controls button[aria-pressed=true]{background:var(--pd-ochre);border-color:var(--pd-ochre);color:#141a17}
.project-demo button:focus-visible,.project-demo summary:focus-visible{outline:3px solid var(--pd-jade);outline-offset:4px}
.project-demo .pd-canvas{margin:1rem 0;padding:28px 22px;background:radial-gradient(ellipse at 45% 50%,#283129 0%,#141a17 85%);border:1px solid #414c42;border-radius:16px;overflow:hidden;font:13px/1.4 system-ui,sans-serif}
.project-demo .pd-icon{width:44px;height:46px;display:block;flex:none}
.project-demo .pd-logistics{display:grid;gap:20px}.project-demo .pd-route{display:flex;align-items:center;min-width:0}.project-demo .pd-parcels{position:relative;display:flex;gap:46px;padding:10px 18px;transition:gap .55s ease,background .4s;border-radius:12px}.project-demo .pd-parcel{display:grid;justify-items:center;gap:4px;position:relative;z-index:1;white-space:nowrap}.project-demo .pd-parcel .pd-icon{width:48px;height:50px}.project-demo .pd-band{position:absolute;inset:0;border:1px dashed #c08a4a;border-radius:12px;opacity:0;transition:opacity .4s}.project-demo[data-pd-state="1"] .pd-parcels{gap:12px;background:#c08a4a12}.project-demo[data-pd-state="1"] .pd-band{opacity:1}.project-demo .pd-route-line{flex:1;min-width:25px;height:1px;background:#667a63;margin:0 18px;position:relative;transition:background .4s,height .4s}.project-demo .pd-route-line:after,.project-demo .pd-flow-line:after{content:'';position:absolute;right:0;top:-3px;border-left:6px solid #7ba88a;border-top:4px solid transparent;border-bottom:4px solid transparent}.project-demo[data-pd-state="1"] .pd-route-line{background:#c08a4a;height:2px}.project-demo .pd-destination{display:flex;align-items:center;gap:9px;min-width:140px}.project-demo .pd-destination b{font-weight:700}
.project-demo .pd-data{display:grid;grid-template-columns:1.15fr 45px 1fr 25px 1fr;align-items:center;min-height:270px;gap:0}.project-demo .pd-sources{display:grid;gap:8px}.project-demo .pd-source{display:flex;align-items:center;gap:9px;background:#223027;border:1px solid #455747;padding:8px;border-radius:8px}.project-demo .pd-source .pd-icon{width:26px;height:28px}.project-demo .pd-source i{width:5px;height:5px;border-radius:50%;background:#7ba88a;margin-left:auto}.project-demo .pd-converge{height:290px}.project-demo .pd-converge svg{height:100%;width:100%}.project-demo .pd-converge path{fill:none;stroke:#667a63;stroke-width:1.1;transition:stroke .4s}.project-demo .pd-processor,.project-demo .pd-dashboard,.project-demo .pd-agent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 8px;border:1px solid #4b5c4a;border-radius:16px;background:#1b261f;transition:border-color .4s,box-shadow .4s,opacity .4s}.project-demo .pd-processor{border-radius:50%;aspect-ratio:1;justify-content:center;padding:12px;min-width:0}.project-demo .pd-processor strong,.project-demo .pd-dashboard strong{font-size:13px}.project-demo .pd-check-dots,.project-demo .pd-agent-port{display:flex;gap:6px}.project-demo .pd-check-dots i,.project-demo .pd-agent-port i{width:5px;height:5px;background:#657263;border-radius:50%;transition:background .4s}.project-demo[data-pd-state="1"] .pd-check-dots i,.project-demo[data-pd-state="2"] .pd-check-dots i{background:#c08a4a}.project-demo[data-pd-state="1"] .pd-processor{border-color:#c08a4a;box-shadow:0 0 28px #c08a4a18}.project-demo[data-pd-state="1"] .pd-converge path,.project-demo[data-pd-state="2"] .pd-converge path{stroke:#c08a4a}.project-demo .pd-flow-line{height:1px;background:#667a63;position:relative}.project-demo .pd-chart{display:flex;align-items:end;gap:6px;height:48px;width:90%;padding-top:6px;border-bottom:1px solid #667a63}.project-demo .pd-chart i{width:16%;height:12%;background:#455747;border-radius:3px 3px 0 0;transition:height .55s ease,background .4s}.project-demo[data-pd-state="2"] .pd-chart i{height:65%;background:#7ba88a}.project-demo[data-pd-state="2"] .pd-chart i:nth-child(2){height:40%}.project-demo[data-pd-state="2"] .pd-chart i:nth-child(3){height:90%}.project-demo[data-pd-state="2"] .pd-chart i:nth-child(4){height:55%}.project-demo[data-pd-state="2"] .pd-dashboard{border-color:#7ba88a;box-shadow:0 0 32px #7ba88a15}
.project-demo .pd-collector{display:grid;grid-template-columns:1fr 40px 110px;align-items:center;min-height:280px}.project-demo .pd-doc-groups{display:flex;gap:12px;align-items:center;padding:10px 12px 10px 0}.project-demo .pd-doc-stack{position:relative;flex:1;min-width:0;padding-bottom:30px}.project-demo .pd-document{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 10px;background:linear-gradient(145deg,#304034,#1d2921);border:1px solid #63745f;border-radius:4px 18px 4px 4px;min-height:157px;position:relative;z-index:2;transition:transform .55s,box-shadow .4s}.project-demo .pd-document strong{font-size:13px;font-weight:600;line-height:1.4}.project-demo .pd-document span{font-size:12px;color:#c4cbbd}.project-demo .pd-duplicate{position:absolute;inset:17px -7px 10px 7px;z-index:1;transform:rotate(6deg);background:#18241b;justify-content:end;transition:transform .55s,opacity .5s}.project-demo .pd-duplicate .pd-icon{display:none}.project-demo .pd-duplicate span{align-self:end}.project-demo .pd-doc-check{position:absolute;right:7px;top:11px;color:#b3d0aa;opacity:0;transform:scale(.5);transition:opacity .4s,transform .4s;font-style:normal;font-size:18px}.project-demo:not([data-pd-state="0"]) .pd-duplicate{transform:translate(0,-15px) rotate(0) scale(.9);opacity:0}.project-demo:not([data-pd-state="0"]) .pd-doc-check{opacity:1;transform:scale(1)}.project-demo:not([data-pd-state="0"]) .pd-main-doc{transform:translateY(8px);box-shadow:0 8px 20px #0003}.project-demo .pd-agent{opacity:.6}.project-demo[data-pd-state="2"] .pd-agent{opacity:1;border-color:#7ba88a;box-shadow:0 0 30px #7ba88a18}.project-demo[data-pd-state="2"] .pd-agent-port i{background:#c08a4a}
.project-demo .pd-result{font-size:14px;line-height:1.55;max-width:70ch;min-height:4.8em;margin:.9rem 0 0;color:#eae6dc}.project-demo .pd-details{margin-top:.8rem;border-top:1px solid #414c42;padding-top:.7rem;font-size:13px;line-height:1.6}.project-demo .pd-details summary{cursor:pointer;color:#d5ae78;min-height:44px;display:list-item;align-content:center}.project-demo .pd-details ul{padding-left:1.4rem;margin:.5rem 0}.project-demo .pd-details small{color:#b9c7b8}
@media(max-width:600px){.project-demo .pd-canvas{padding:18px 12px}.project-demo .pd-parcels{gap:16px;padding:8px}.project-demo .pd-parcel .pd-icon{width:35px;height:38px}.project-demo .pd-parcel span{font-size:12px}.project-demo .pd-route-line{margin:0 9px;min-width:14px}.project-demo .pd-destination{min-width:0;gap:3px;flex-direction:column;font-size:12px}.project-demo .pd-destination .pd-icon{width:29px;height:33px}.project-demo[data-pd-state="1"] .pd-parcels{gap:6px}.project-demo .pd-data{grid-template-columns:1fr 1fr;gap:16px 12px}.project-demo .pd-sources{grid-column:1/-1;grid-template-columns:1fr 1fr}.project-demo .pd-source{font-size:12px;padding:7px;gap:6px}.project-demo .pd-source .pd-icon{width:23px;height:25px}.project-demo .pd-converge{grid-column:1/-1;height:38px;transform:rotate(0);overflow:hidden}.project-demo .pd-converge svg{transform:rotate(90deg);width:80px;height:280px;position:relative;left:calc(50% - 40px);top:-120px}.project-demo .pd-processor{aspect-ratio:auto;border-radius:14px;min-height:140px}.project-demo .pd-dashboard{min-height:140px}.project-demo .pd-data>.pd-flow-line{display:none}.project-demo .pd-collector{grid-template-columns:1fr;gap:12px}.project-demo .pd-doc-groups{flex-direction:column;gap:8px;padding:0 12px 0 0}.project-demo .pd-doc-stack{width:100%;padding-bottom:13px}.project-demo .pd-document{min-height:0;flex-direction:row;align-items:center;gap:10px;padding:12px}.project-demo .pd-document .pd-icon{width:28px;height:34px}.project-demo .pd-document strong{flex:1}.project-demo .pd-document span{font-size:12px}.project-demo .pd-duplicate{inset:9px -6px 5px 6px;transform:rotate(2deg);padding:5px;align-items:end}.project-demo .pd-duplicate span{visibility:hidden}.project-demo .pd-doc-check{top:0;right:5px;font-size:14px}.project-demo .pd-collector>.pd-flow-line{height:22px;width:1px;justify-self:center}.project-demo .pd-collector>.pd-flow-line:after{transform:rotate(90deg);top:auto;bottom:0;right:-3px}.project-demo .pd-agent{flex-direction:row;justify-content:center;gap:14px;padding:14px}.project-demo .pd-agent .pd-icon{width:36px;height:38px}.project-demo .pd-result{min-height:6.4em}}
@media(prefers-reduced-motion:reduce){.project-demo *{transition:none!important;animation:none!important}}
/* The surrounding case-study area is beige: this is a self-contained dark panel. */
.project-demo{box-sizing:border-box;background:#141a17;border:1px solid #3c493d;border-radius:18px;padding:24px;box-shadow:0 15px 40px #14201912}
@media(max-width:600px){.project-demo{padding:16px 12px}.project-demo .pd-controls button{font-size:12px;padding:.6rem .65rem}.project-demo .pd-source i{display:none}.project-demo .pd-document{padding:10px 8px;gap:7px}.project-demo .pd-document .pd-icon{width:24px}}