/* Stationary perspective, real work artifacts, and motion with a job to do. */
.workflow-ready .scene-platform,.workflow-ready .forge-canvas,.workflow-ready .build-labels,
.workflow-ready .factory-scene > :not(.workflow-space),.workflow-ready .commission-art > :not(.workflow-space){display:none}
.workflow-ready .system-map,.workflow-ready .commission-art{margin-inline:0;isolation:isolate}
.workflow-space{position:absolute;inset:0;perspective:1100px;--ink:var(--text);--paper:var(--surface);--signal:var(--cyan);--warning:var(--amber);color:var(--ink);font-family:var(--body);background:radial-gradient(ellipse at 55% 52%,color-mix(in srgb,var(--signal) 12%,transparent),transparent 66%)}
.workflow-space:after{content:"";position:absolute;left:10%;right:6%;bottom:9%;height:15%;background:color-mix(in srgb,var(--signal) 12%,transparent);filter:blur(23px);transform:rotate(-5deg);pointer-events:none;z-index:-1}
.work-world,.api-world,.reserved-world{position:absolute;inset:0;transform-style:preserve-3d}
.work-caption{position:absolute;inset:4px 0 auto;display:flex;justify-content:space-between;gap:10px;color:var(--faint);font:500 .49rem/1.4 var(--mono,monospace);letter-spacing:.08em}
.work-sheet{border:1px solid var(--line-2);border-radius:10px;background:linear-gradient(130deg,color-mix(in srgb,var(--signal) 4%,var(--paper)),var(--paper) 58%);box-shadow:1px 2px 0 var(--bg-2),2px 4px 0 var(--line),0 18px 35px -16px rgba(0,0,0,.4);overflow:hidden}
.work-source{position:absolute;left:2%;top:16%;width:36%;padding:15px 13px;transform:rotateY(13deg) rotateZ(-8deg) translateZ(-25px);z-index:1;animation:source-arrival .7s both}
.work-kicker{font:600 .48rem/1.4 var(--body);letter-spacing:.1em;color:var(--signal)}
.workflow-space h4{font:650 .96rem/1.2 var(--display);letter-spacing:-.035em;color:var(--text);margin:11px 0}
.work-raw{margin-top:14px}.work-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);min-height:29px;font-size:.63rem;line-height:1.3}.work-row:last-child{border-bottom:0}.work-row>span{color:var(--dim)}.work-row>b{font-weight:500;text-align:right}.work-raw .work-row{display:block;font:400 .54rem/1.7 var(--mono,monospace);padding:3px 0}.work-raw .work-row b{display:block;color:var(--dim)}.work-source-foot{display:block;font-size:.43rem;letter-spacing:.1em;color:var(--faint);margin-top:13px}
.work-main{position:absolute;left:28%;top:23%;width:66%;transform:rotateY(-9deg) rotateX(5deg) rotateZ(2deg) translateZ(30px);z-index:3;animation:document-arrival .75s cubic-bezier(.2,.7,.2,1) both}
.work-app{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line);font:600 .48rem/1.3 var(--body);letter-spacing:.07em;color:var(--dim);background:color-mix(in srgb,var(--signal) 5%,transparent)}
.work-app-icon{display:grid;place-items:center;width:18px;height:18px;background:var(--signal);color:var(--bg);font:700 .8rem var(--display);border-radius:5px}
.work-live{margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 9px var(--signal);animation:work-pulse 2.8s ease-in-out infinite}
.work-document{padding:8px 15px 16px}.work-document h4{margin:7px 0 10px}.work-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:4px;font-size:.5rem;font-weight:600;background:color-mix(in srgb,var(--signal) 10%,transparent);color:var(--signal)}.work-badge:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}.work-badge.warning{color:var(--warning);background:color-mix(in srgb,var(--warning) 9%,transparent)}
.work-fields{margin-top:9px}.work-fields .work-row{animation:field-arrival .65s both}.work-fields .work-row:nth-child(2){animation-delay:.12s}.work-fields .work-row:nth-child(3){animation-delay:.24s}
.work-receipt{position:absolute;z-index:4;right:0;bottom:15%;width:62%;padding:11px 12px;display:flex;align-items:center;gap:9px;transform:rotateY(-9deg) rotateZ(-2deg) translateZ(60px);animation:receipt-arrival .9s .25s both;border-color:color-mix(in srgb,var(--signal) 40%,var(--line))}.work-receipt b{font-size:.65rem;line-height:1.4;font-weight:600}.work-check{display:grid;place-items:center;flex-shrink:0;width:23px;height:23px;border:1px solid color-mix(in srgb,var(--signal) 40%,transparent);border-radius:50%;font-size:.8rem;color:var(--signal);background:color-mix(in srgb,var(--signal) 8%,transparent)}
.work-action{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font-size:.58rem;line-height:1.5;color:var(--dim)}
.work-scan{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}.work-scan:after{content:"";position:absolute;left:0;right:0;top:-25%;height:20%;background:linear-gradient(transparent,color-mix(in srgb,var(--signal) 7%,transparent),transparent);animation:work-scan 4s linear infinite}
.work-world[data-step="0"] .work-main{transform:rotateY(-9deg) rotateZ(5deg) translateZ(15px)}.work-world[data-step="0"] .work-source{transform:rotateY(13deg) rotateZ(-12deg) translateZ(-10px)}.work-world[data-step="0"] .work-check,.work-world[data-step="2"] .work-check{color:var(--warning)}.work-world[data-step="2"] .work-receipt{border-color:color-mix(in srgb,var(--warning) 50%,var(--line))}
.work-review{--signal:var(--violet)}.work-builder{--signal:var(--cyan)}.work-customer{--signal:var(--violet)}.work-builder .work-fields .work-row{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:6px 8px;margin-top:5px}.work-builder .work-fields .work-row:last-child{background:color-mix(in srgb,var(--signal) 10%,var(--paper));color:var(--signal)}
/* Integrably has its own exploded document composition: schema, mapping, endpoints. */
.api-world{--signal:var(--coral)}
.api-contract{position:absolute;left:0;top:19%;width:37%;padding:14px;transform:rotateY(12deg) rotateZ(-9deg) translateZ(-30px);animation:source-arrival .7s both;z-index:1}.api-contract h4{font-size:1.1rem;margin:12px 0}.api-code{font:.57rem/1.75 var(--mono,monospace);display:grid;margin:12px 0;color:var(--dim)}.api-code b{color:var(--signal);font-weight:400}.api-contract small{font-size:.48rem;color:var(--faint)}
.api-mapping{position:absolute;width:65%;left:26%;top:14%;z-index:3;transform:rotateY(-13deg) rotateX(6deg) rotateZ(3deg) translateZ(25px);animation:document-arrival .75s both}.api-mapping .work-document{padding:10px 15px 13px}.api-mapping h4{font-size:1.08rem;max-width:21ch;margin-bottom:16px}.api-map-label{display:flex;justify-content:space-between;font-size:.43rem;color:var(--faint);letter-spacing:.07em;margin-bottom:6px}.api-map-row{display:grid;grid-template-columns:1fr 25px 1fr;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font:400 .64rem var(--mono,monospace)}.api-map-row code:last-child{text-align:right}.api-map-row i{text-align:center;color:var(--signal);font-style:normal;animation:mapping-arrow 2.4s ease-in-out infinite}.api-map-row:nth-child(4) i{animation-delay:.3s}.api-map-row:nth-child(5) i{animation-delay:.6s}.api-config-state{margin-top:12px}
.api-outputs{position:absolute;width:51%;right:0;bottom:14%;z-index:5;transform:rotateY(-12deg) rotateZ(-4deg) translateZ(70px);animation:receipt-arrival .9s .2s both}.api-endpoint{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-top:6px;border-radius:6px}.api-endpoint span{font:700 .5rem var(--mono,monospace);color:var(--signal)}.api-endpoint code{font:.68rem var(--mono,monospace)}.api-endpoint b{margin-left:auto;color:var(--signal)}.api-output-caption{font-size:.5rem;text-align:right;margin-top:7px;color:var(--dim)}
.api-world[data-step="0"] .api-mapping{transform:rotateY(-13deg) rotateZ(7deg) translateZ(25px)}.api-world[data-step="0"] .api-outputs{opacity:.65}.api-world[data-step="0"] .api-map-row i{color:var(--warning)}.api-world[data-step="1"] .api-outputs{transform:rotateY(-12deg) rotateZ(-4deg) translateZ(35px)}
.workflow-ready .factory-scene{height:350px;margin:18px 0}.workflow-ready .commission-art{min-height:300px}.commission-art .api-world .api-contract{top:24%}.commission-art .api-world .api-mapping{top:18%}
.work-ticket{--signal:var(--violet)}.mail-lines{font-size:.6rem;line-height:1.8;color:var(--dim);display:grid;margin:15px 0}.mail-reply{font-size:.55rem;color:var(--warning);border-top:1px solid var(--line);padding-top:9px}.ticket-reference{display:flex;justify-content:space-between;align-items:center;font:.52rem var(--mono,monospace);color:var(--dim)}.sla-track{position:relative;height:21px;border-top:2px solid var(--line);margin-top:12px}.sla-track>i{position:absolute;top:-2px;height:2px;background:var(--signal);width:65%;transform-origin:left;animation:sla-clock 7s linear infinite}.sla-track span{font-size:.43rem;letter-spacing:.07em;color:var(--dim)}
.reserved-sheet{position:absolute;left:12%;right:10%;top:15%;bottom:14%;padding:28px;transform:rotateY(-10deg) rotateZ(-3deg);animation:document-arrival .8s both}.reserved-sheet h4{font-size:2.3rem;margin-top:22px}.reserved-sheet h4 span{display:block;color:var(--faint)}.reserved-sheet p{font-size:.8rem;line-height:1.6;color:var(--dim);margin-top:16px}.reserved-line{display:block;height:1px;background:var(--line-2);margin:20px 0 15px}.reserved-sheet small{font-size:.6rem;color:var(--faint)}
.story-transport [data-motion-toggle]{font-size:.7rem;min-width:32px;padding-inline:9px}.story-transport [data-motion-toggle][aria-pressed="true"]{border-color:var(--a1);color:var(--a1)}
/* Reserve separate space for the result so it never covers the data being explained. */
.work-world .work-main{left:35%;width:62%;top:32px;height:calc(100% - 99px);display:grid;grid-template-rows:30px minmax(0,1fr)}
.work-world .work-source{left:0;width:36%;top:40px;bottom:65px;padding:12px}
.work-world .work-document{padding:8px 12px 10px;display:flex;flex-direction:column;align-items:flex-start;min-height:0}
.work-world .work-document h4{font-size:.86rem;margin:0 0 7px}
.work-world .work-fields{flex:1;width:100%;display:flex;flex-direction:column;margin-top:6px;min-height:0}
.work-world .work-fields .work-row{flex:1;width:100%;min-height:20px;font-size:.58rem}
.work-world .work-receipt{bottom:24px;width:65%;padding:8px 10px}
.work-world .work-badge{font-size:.46rem;padding:3px 6px;flex-shrink:0}
.work-world .work-app{padding:5px 10px}
.work-world .work-source h4{font-size:.83rem;margin:8px 0}
.work-world .work-raw{margin-top:6px}
.work-world .work-source-foot{margin-top:5px}
.work-world .work-source .work-row{min-height:0;padding:2px 0;font-size:.5rem}
.work-world .work-source .work-row b{line-height:1.4}
.api-world .api-mapping{top:30px;width:63%;left:34%;height:calc(100% - 131px);display:grid;grid-template-rows:30px minmax(0,1fr)}
.api-world .api-contract{left:0;width:36%;top:53px;padding:12px}
.api-world .api-mapping .work-document{padding:9px 12px;display:flex;flex-direction:column}
.api-world .api-mapping h4{font-size:.95rem;margin:0 0 12px}
.api-world .api-map-row{flex:1;min-height:25px;padding:4px 0;width:100%;font-size:.59rem}
.api-world .api-map-label{width:100%;margin-bottom:3px}
.api-world .api-config-state{margin-top:7px}
.api-world .api-outputs{bottom:29px;width:62%}
.api-world .api-endpoint{padding:7px 11px;margin-top:5px}
.api-world .api-output-caption{display:none}
.commission-art .api-world .api-mapping{top:30px}.commission-art .api-world .api-contract{top:53px}
@keyframes source-arrival{from{opacity:0;translate:-12px 8px}to{opacity:1;translate:0 0}}
@keyframes document-arrival{from{opacity:0;translate:12px 14px}to{opacity:1;translate:0 0}}
@keyframes receipt-arrival{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes field-arrival{from{opacity:.3;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes work-scan{to{top:120%}}
@keyframes work-pulse{50%{opacity:.4;box-shadow:none}}
@keyframes mapping-arrow{50%{translate:4px 0;opacity:.5}}
@keyframes sla-clock{from{scale:.3 1}to{scale:1 1}}
[data-motion="false"] .workflow-space *,[data-motion="false"] .workflow-space *:after,.workflow-space.scene-asleep *,.workflow-space.scene-asleep *:after{animation-play-state:paused!important}
/* A paused or reduced-motion scene still shows the selected outcome in full. */
[data-motion="false"] .work-sheet,[data-motion="false"] .work-fields .work-row,[data-motion="false"] .api-outputs{animation:none!important}
@media(min-width:1050px) and (min-height:620px){
  #portfolio .system-demo{gap:7px;grid-template-rows:auto auto auto auto auto minmax(260px,1fr) auto auto 2px auto}
  #portfolio .system-demo h2{font-size:clamp(1.35rem,1.9vw,1.8rem)}
  #portfolio .system-intro{font-size:.73rem}
  #portfolio .system-map{min-height:260px!important}
  .commission-scene{grid-template-rows:auto auto auto minmax(300px,1fr) auto auto 2px;gap:10px}
  .workflow-ready .factory-scene{height:330px}
}
@media(min-width:1050px) and (max-height:760px) and (min-height:620px){
  #portfolio .system-demo{gap:5px;grid-template-rows:auto auto auto auto auto minmax(235px,1fr) auto auto 2px auto}
  #portfolio .system-map{min-height:235px!important}
  #portfolio .system-demo .system-intro{font-size:.65rem;line-height:1.3}
  #portfolio .system-demo .system-explanation{padding-block:6px}
  #portfolio .system-demo .system-explanation p{font-size:.64rem}
  .system-map .work-source{top:28px;padding:10px}
  .system-map .work-main{top:22px;height:calc(100% - 78px)}
  .system-map .work-document{padding:5px 10px}
  .system-map .work-fields{margin-top:6px}.system-map .work-row{min-height:24px}
  .system-map .work-receipt{bottom:21px;padding:6px 10px}
  .system-map .work-action{font-size:.5rem}
  .commission-scene{gap:7px}.commission-result{min-height:65px}
}
@media(max-width:1049px){.workflow-ready .system-map{height:360px!important;max-width:590px;width:100%;margin-inline:auto}.workflow-ready .commission-art{height:380px;max-width:590px;width:100%;margin-inline:auto}}
@media(max-width:600px){
  .workflow-ready .system-map{height:330px!important;margin-inline:0}
  .workflow-ready .commission-art{height:360px}
  .workflow-ready .factory-scene{height:340px}
  .work-caption{font-size:.4rem}.work-caption span:last-child{display:none}
  .work-world .work-source{width:65%;left:0;top:25px;bottom:auto;height:99px;padding:9px 11px}
  .work-world .work-source .work-raw{display:flex;gap:13px}.work-world .work-source .work-row{border:0}.work-world .work-source-foot{display:none}
  .work-world .work-main{left:9%;width:88%;top:107px;height:160px}.workflow-space h4{font-size:.94rem}
  .work-world .work-receipt{width:88%;bottom:24px;padding:6px 9px}.work-receipt b{font-size:.57rem}.work-check{width:18px;height:18px}
  .work-action{font-size:.54rem;text-align:left;max-width:95%}
  .work-kicker,.work-app{font-size:.44rem}.work-document{padding:8px 12px 13px}
  .work-row{font-size:.59rem}.work-world .work-source .work-row:last-child{display:none}
  .api-world .api-contract,.commission-art .api-world .api-contract{width:64%;padding:10px;top:24px;height:98px}
  .api-contract h4{font-size:.9rem;margin:6px 0}.api-code{display:flex;gap:4px;flex-wrap:wrap;font-size:.48rem;margin:6px 0}.api-code span:nth-child(4),.api-contract small{display:none}
  .api-world .api-mapping,.commission-art .api-world .api-mapping{width:87%;left:10%;top:110px;height:155px}.api-world .api-mapping h4{font-size:.83rem;margin-bottom:7px}.api-world .api-mapping .work-document{padding:7px 10px}.api-world .api-config-state{display:none}
  .api-mapping .work-document{padding:7px 11px 10px}.api-map-row{font-size:.56rem;padding:6px 0;gap:3px;grid-template-columns:1fr 20px 1fr}
  .api-world .api-outputs{bottom:25px;width:88%;right:0;display:flex;gap:5px}.api-world .api-endpoint{padding:8px 6px;flex:1;gap:5px}.api-endpoint code{font-size:.52rem}.api-endpoint b{display:none}
  .work-ticket .work-source{top:25px}.work-ticket .mail-lines{margin:6px 0;font-size:.5rem}.work-ticket .mail-lines span:first-child,.work-ticket .mail-lines span:last-child,.mail-reply{display:none}.work-ticket .work-main{top:110px;height:184px}.work-ticket .work-receipt{bottom:23px}
  .reserved-sheet{padding:22px}.reserved-sheet h4{font-size:2rem}
  .story-transport{gap:5px}.story-transport button{padding-inline:8px}.story-transport [data-position]{font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){.workflow-space *,.workflow-space *:after{animation:none!important;transition:none!important}}