.scene{min-height:780px}
.scene .eclipse{opacity:.28}.scene .stars{opacity:.3}
.workflow-stage{position:absolute;inset:23% 3% 25%;perspective:1100px;z-index:1;display:grid;place-items:center;pointer-events:none}
.workflow-space{width:min(1050px,100%);height:330px;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;transition:transform .12s ease-out}
.workflow-cloud{position:absolute;left:27%;width:46%;top:0;transform:translateZ(85px);animation:workflow-float 6s ease-in-out infinite}
.workflow-cloud img{display:block;width:100%;height:auto;filter:drop-shadow(0 35px 24px #0008)}
.cloud-caption{display:block;text-align:center;color:#fff;font-size:20px;font-weight:600;letter-spacing:.16em;margin-top:15px;text-shadow:0 2px 12px #000}
.cloud-caption span{display:block;font-size:12px;font-weight:400;letter-spacing:.025em;color:#d8cbc6;margin-top:7px}
.flow-node{position:absolute;width:23%;min-height:165px;padding:22px;text-align:left;border-radius:18px;border:1px solid #ffffff38;background:linear-gradient(135deg,#39343dee,#131119f5);box-shadow:inset 0 1px #ffffff45,5px 8px 0 #100d15,7px 10px 0 #ffffff15,0 30px 45px #0006;transform:translateZ(40px)}
.node-in{left:0;top:15px;transform:translateZ(25px) rotateY(12deg)}.node-out{right:0;top:130px;transform:translateZ(100px) rotateY(-12deg)}
.node-label{display:block;color:#dcb399;font:12px var(--mono);letter-spacing:.16em;margin-bottom:16px}.flow-node strong{display:block;font-size:19px;line-height:1.2;color:#fff}.node-detail{display:block;font-size:13px;color:#c7c1cc;margin-top:10px}.node-line{display:block;height:5px;border-radius:5px;background:#fff2;width:85%;margin-top:18px}.node-line.short{width:55%;margin-top:8px}.approval{display:inline-block;font-size:12px;margin-top:18px;padding:7px 11px;border:1px solid #c7d36a66;color:#dce79a;border-radius:6px;background:#c7d36a12}
.flow-link{position:absolute;height:2px;background:#db996355;width:12%;transform:translateZ(30px);overflow:visible}.link-in{left:22%;top:100px;rotate:12deg}.link-out{right:21%;top:195px;rotate:17deg}.flow-link i{position:absolute;top:-2px;width:25px;height:5px;border-radius:5px;background:#f3bd88;box-shadow:0 0 14px #eb955c;animation:flow-signal 2.8s linear infinite}.link-out i{background:#d3e479;box-shadow:0 0 14px #c7d36a;animation-delay:1.4s}
.scene .mini{display:none}.scene-bottom .wrap{justify-content:flex-start}.scene .mini .thumb{display:none}
@keyframes flow-signal{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes workflow-float{0%,100%{translate:0 0}50%{translate:0 -13px}}
@media(max-width:900px){.workflow-stage{inset:26% 5% 25%}.workflow-space{height:300px}.flow-node{padding:16px;width:25%}.node-out{top:140px}.flow-node strong{font-size:16px}.node-detail{font-size:12px}.workflow-cloud{left:26%;width:48%;top:35px}.cloud-caption span{font-size:11px}}
@media(max-width:600px){.scene{min-height:850px;max-height:none}.scene-top{top:35px}.scene-intro{max-width:250px}.workflow-stage{inset:240px 6% auto;height:330px}.workflow-space{height:330px}.workflow-cloud{width:72%;left:14%;top:15px}.cloud-caption{font-size:15px;margin-top:0}.cloud-caption span{display:none}.flow-node{width:44%;min-height:120px;padding:13px;border-radius:12px}.node-in{top:210px;left:0;transform:translateZ(25px)}.node-out{top:210px;right:0;transform:translateZ(55px)}.node-label{font-size:10px;margin-bottom:9px}.flow-node strong{font-size:14px}.node-detail{font-size:11px}.node-line{display:none}.approval{margin-top:9px;font-size:10px;padding:4px 7px}.link-in{left:20%;top:190px;width:20%;rotate:-60deg}.link-out{right:20%;top:190px;width:20%;rotate:60deg}.scene-bottom{bottom:40px}.scene h1{font-size:56px}}
@media(prefers-reduced-motion:reduce){.workflow-cloud,.flow-link i{animation:none}.workflow-space{transition:none}}