/* A cinematic system forge, with the story controls kept within the hero viewport. */
.system-demo{border:0;background:transparent;box-shadow:none;padding:0;overflow:visible;--flow:var(--cyan)}
.system-demo .system-top{margin:0}.system-top .demo-badge{display:none}.system-top .eyebrow{font-size:.58rem}
.system-demo .experience-picker{margin:0;gap:5px}.experience-picker button{padding:6px 10px;min-height:30px;font-size:.65rem}.system-demo h2{min-height:0;font-size:clamp(1.45rem,2.1vw,2rem);line-height:1.1;max-width:27ch}.system-demo .system-intro{min-height:0;font-size:.78rem;line-height:1.45;margin:0;max-width:62ch}
.system-demo .system-controls{margin:0;padding:0;border:0}.system-controls button{min-height:32px;padding:7px;font-size:.64rem}.system-demo .system-map{margin:0 -8%;height:250px;perspective:none;position:relative}
.forge-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.forge-ready .system-demo .map-grid,.forge-ready .system-demo .system-wires{display:none}.system-demo .scene-platform{transform:none;transition:none;pointer-events:none;z-index:1}.system-demo .system-node{box-shadow:none!important;border:0!important;background:color-mix(in srgb,var(--bg) 75%,transparent);border-radius:6px;transform:none!important;height:auto;min-height:0;width:24%;padding:5px;gap:2px;text-align:left;align-items:flex-start;backdrop-filter:blur(5px)}.system-demo .system-node b{font-size:.65rem}.system-demo .system-node small{font-size:.52rem;padding:0}.system-demo .system-node .node-icon,.system-demo .node-light{display:none}.system-demo .source{left:2%}.system-demo .destination{right:2%}.system-demo .source-one,.system-demo .carrier{top:16%}.system-demo .source-two,.system-demo .tracking{top:40%}.system-demo .source-three,.system-demo .retry{top:64%}.system-demo .integration{top:auto;bottom:10%;left:35%;width:30%;align-items:center;text-align:center;background:transparent;opacity:1!important}.system-demo .integration b{font-size:.7rem;color:var(--flow)}.system-demo .integration small{max-width:none}.system-demo .map-caption{display:none}
.system-demo .system-explanation{min-height:0;margin:0;padding:10px 13px;background:transparent;border-left:2px solid var(--flow);border-radius:0}.system-explanation b{font-size:.85rem}.system-explanation p{font-size:.73rem;line-height:1.45;margin-top:4px}.system-demo .story-transport{margin:0}.system-demo .story-transport button{min-height:32px;font-size:.66rem;padding:5px 10px}.system-demo .play-progress{margin:0}.system-demo .system-footnote{margin:0;font-size:.55rem;line-height:1.4}.system-demo{display:grid;gap:10px;grid-template-rows:auto auto auto auto auto minmax(180px,1fr) auto auto 2px auto}
@media(min-width:1050px) and (min-height:620px){#portfolio.hero{min-height:100svh;padding-top:88px;padding-bottom:22px;display:flex;align-items:center}#portfolio.hero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center}#portfolio .hero__copy{padding-top:0;max-width:560px}#portfolio h1{font-size:clamp(3.1rem,4.25vw,4.5rem);line-height:.99}#portfolio .lead{font-size:1rem;line-height:1.55;margin-top:22px}#portfolio .hero-kicker{font-size:.6rem;letter-spacing:.13em;margin-bottom:22px}#portfolio .hero__cta{margin-top:24px;gap:10px}#portfolio .hero__cta .btn{--h:44px;font-size:.88rem;padding:0 19px}#portfolio .facts{margin-top:23px;gap:6px}#portfolio .fact{font-size:.67rem;padding:6px 9px}#portfolio .system-demo{height:calc(100svh - 110px);max-height:730px;gap:9px}#portfolio .system-map{height:auto;min-height:180px}}
@media(min-width:1050px) and (max-height:760px) and (min-height:620px){#portfolio h1{font-size:3.25rem}#portfolio .system-demo{gap:6px}#portfolio .system-demo h2{font-size:1.5rem}#portfolio .system-intro{font-size:.7rem}#portfolio .system-explanation p{font-size:.68rem}#portfolio .hero-kicker{max-width:38ch}.system-demo .system-map{min-height:150px!important}.system-demo{grid-template-rows:auto auto auto auto auto minmax(150px,1fr) auto auto 2px auto}}
@media(max-width:1049px){#portfolio .system-demo{max-width:760px;width:100%;margin:auto;gap:12px}#portfolio.hero{padding-top:110px}#portfolio.hero .wrap{grid-template-columns:1fr;gap:35px}#portfolio .hero__copy{padding-top:0}#portfolio .system-map{height:300px}.system-demo .system-explanation{min-height:0}.system-demo h2{min-height:0}}
@media(max-width:600px){.system-demo .system-map{height:245px!important;margin-inline:-4%}.system-demo .system-node b{font-size:.57rem}.system-demo .system-node small{font-size:.47rem}.system-demo .system-intro{font-size:.76rem}.system-demo .system-explanation p{font-size:.76rem}.system-demo .experience-picker button{font-size:.6rem;padding:6px 8px}.system-demo .system-footnote{font-size:.56rem}}
.forge-canvas{background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--flow) 8%,transparent),transparent 58%)}
@media(min-width:1050px) and (min-height:620px){.integrably-story,.trace-story{padding:26px 30px;gap:32px}.factory-copy h3,.trace-copy h3{font-size:clamp(1.7rem,2.65vw,2.4rem);margin:12px 0}.factory-copy p,.trace-copy>p{font-size:.9rem;line-height:1.55}.factory-steps{margin:18px 0;gap:6px}.factory-steps button{padding:11px;font-size:.76rem}.factory-scene{height:clamp(160px,27svh,250px);margin:12px 0}.factory-result{min-height:100px}.factory-result p,.trace-result>p{font-size:.76rem}.trace-capabilities{gap:8px;margin:20px 0;font-size:.8rem}.trace-capabilities li{padding-bottom:8px}.trace-desk{height:clamp(240px,36svh,310px);margin:12px 0}.trace-ticket{padding:16px;top:8px}.trace-ticket h4{margin-top:12px}.trace-ticket-fields{margin-top:12px}.trace-ticket-history{margin-top:12px;padding-top:9px}.trace-signal{top:125px;padding:10px}.trace-portal{bottom:0;padding:10px 14px}.trace-result{min-height:105px;padding:10px 13px}.trace-stages{margin-top:13px}.factory-demo .story-transport,.trace-demo .story-transport{margin-top:10px}.factory-demo .system-footnote,.trace-demo .system-footnote{margin-top:8px;font-size:.56rem}}