*{box-sizing:border-box}body{margin:0;padding:24px 4px 10px;background:transparent;color:#d6d8d1;font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{display:grid;grid-template-columns:270px 1fr;gap:65px;font:8px monospace;letter-spacing:1.8px;color:#74796f;margin-bottom:36px}.scene{position:relative;display:grid;grid-template-columns:230px 1fr;gap:105px;align-items:center}.pipeline{position:relative;padding-top:50px;align-self:center}.upstream{position:absolute;left:19px;top:-15px;display:flex;gap:13px;align-items:center;color:#50564b}.upstream span{font-size:25px}.upstream small{font-size:9px}.pipeline:before{content:"";position:absolute;width:1px;left:27px;top:14px;height:152px;background:linear-gradient(transparent,#5b6554)}.node{position:relative;display:flex;align-items:center;gap:12px;height:58px;border:1px solid #353a30;border-radius:12px;background:#181c14;box-shadow:0 3px 10px #0005;padding:12px;z-index:3}.node + .node{margin-top:42px}.node b{font-size:12px;font-weight:500;display:block;letter-spacing:-.1px}.node small{display:block;font-size:9px;color:#7d8474;margin-top:5px}.node i{font-style:normal;color:#a9c887;font-size:12px;margin-left:auto}.node-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;flex-shrink:0;box-shadow:inset 0 1px 0 #ffffff30}.purple{background:#7362b8}.green{background:#607d47}.node-icon svg{width:20px;height:20px;fill:none;stroke:white;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.run-state{font:9px monospace;color:#889777;display:flex;align-items:center;gap:7px;margin:20px 0 0 16px}.run-state span{background:#9bb67d;width:5px;height:5px;border-radius:50%}.outputs{display:grid;grid-template-columns:1fr 1fr;gap:54px 38px;position:relative}.output{min-width:0;position:relative;z-index:2}.visual{height:173px;position:relative;display:flex;align-items:center;justify-content:center}.visual img{display:block;max-width:100%}.documents{padding:20px 10px 0}.documents img{position:absolute;width:91%;border:1px solid #ffffff25;border-radius:3px;box-shadow:0 8px 20px #0007}.documents .back-two{transform:translate(7px,-12px) rotate(7deg);opacity:.8}.documents .back-one{transform:translate(-7px,-5px) rotate(-5deg)}.documents .front{transform:translateY(7px)}.video{border:1px solid #252c24;border-radius:6px;overflow:hidden;background:#071023}.video img{width:100%;height:100%;object-fit:contain}.play{position:absolute;left:13px;bottom:12px;width:25px;height:25px;background:#ffffff17;border:1px solid #ffffff25;border-radius:50%;font-size:9px;display:grid;place-items:center;color:#d3e5df}.duration{position:absolute;right:10px;bottom:14px;font:8px monospace;color:#a1b9c3}.caption{display:flex;justify-content:space-between;align-items:center;margin-top:19px;gap:8px}.caption b{font-size:12px;font-weight:500}.caption span{font:8px monospace;color:#8b947f;border:1px solid #353d2c;border-radius:4px;padding:3px 5px}.output p{font-size:9px;line-height:1.5;color:#727b68;margin:7px 0 0}.images{flex-direction:column;gap:10px;justify-content:center}.images .banner{width:100%;border:1px solid #ffffff18;border-radius:3px;box-shadow:0 12px 26px #0004}.format{display:flex;width:100%;justify-content:space-between;font:8px monospace;color:#4e5d65}.icon-tray{height:173px;border:1px solid #36382a;border-radius:14px;background:linear-gradient(135deg,#252617,#141810);box-shadow:inset 0 1px 0 #ffffff0b,0 14px 30px #0003;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding:10px 16px;gap:2px 8px}.icon-tray img{width:64px;height:64px;object-fit:contain;justify-self:center;filter:drop-shadow(0 5px 5px #0005)}.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.wire{fill:none;stroke:#677259;stroke-width:1;opacity:.6;marker-end:url(#arrow)}.signal{fill:none;stroke:#c0dba2;stroke-width:2;stroke-dasharray:4 700;animation:flow 1.1s linear both}.output.arrive{animation:arrive .55s ease both}@keyframes arrive{from{opacity:.15;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes flow{from{stroke-dashoffset:700}to{stroke-dashoffset:0}}footer{display:flex;justify-content:space-between;align-items:center;margin-top:38px;font-size:9px;color:#636e5a;gap:16px}button{font:inherit;color:#9aa78a;background:#151b10;border:1px solid #343d2a;border-radius:6px;padding:8px 12px;cursor:pointer}button:disabled{opacity:.5}@media(max-width:800px){header{grid-template-columns:195px 1fr;gap:50px}.scene{grid-template-columns:185px 1fr;gap:60px}.node{gap:8px;padding:9px}.node b{font-size:10px}.node small{font-size:8px}.outputs{gap:40px 25px}.visual,.icon-tray{height:125px}.icon-tray{padding:6px}.icon-tray img{width:44px;height:44px}.caption b{font-size:10px}.caption{margin-top:14px}.output p{font-size:8px}}@media(max-width:520px){body{padding:18px 14px}header{display:flex;justify-content:space-between;font-size:6px;gap:12px;margin-bottom:20px}.scene{display:flex;flex-direction:column;gap:60px}.pipeline{width:100%;padding-top:35px;display:flex;gap:30px;padding-bottom:25px}.upstream{top:0;left:9px}.pipeline:before{top:63px;left:0;width:100%;height:1px;background:#515c42}.node{width:calc(50% - 15px);height:58px}.node+.node{margin:0}.node-icon{width:23px;height:23px;border-radius:7px}.node i{display:none}.node b{font-size:9px}.node small{font-size:7px}.run-state{position:absolute;bottom:0;right:0;margin:0;font-size:8px}.outputs{width:100%;gap:34px 20px}.visual,.icon-tray{height:110px}.icon-tray img{width:40px;height:40px}.caption b{font-size:9px}.caption span{font-size:7px}.wires{opacity:.6}footer{font-size:8px;gap:10px;margin-top:26px}.format{font-size:6px}}
.documents img{max-height:158px;width:auto;max-width:88%;object-fit:contain}@media(max-width:800px){.documents img{max-height:112px}}@media(max-width:520px){.documents img{max-height:94px}}

/* v5: a fading pipeline above three outputs */
header{display:block;text-align:center;margin-bottom:0}.scene{display:flex;flex-direction:column;gap:112px}.pipeline{width:230px;padding-top:80px;align-self:center}.upstream{top:0;left:0;width:230px;height:62px;display:block;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}.upstream span{display:block;margin:auto;width:130px;height:24px;border:1px solid #424a39;border-radius:9px;background:#181e12}.upstream i{display:block;width:1px;height:38px;background:#697556;margin:auto}.pipeline:before{left:50%;top:62px;height:150px;background:#4d5c3d}.node+.node{margin-top:30px}.run-state{position:absolute;left:245px;bottom:20px;width:130px;margin:0;font-size:8px}.outputs{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding:0 8px}.visual,.icon-tray{height:184px}.documents img{max-height:166px;max-width:91%}.caption{margin-top:22px}.wire{stroke-dasharray:3 6;stroke:#8d9e76;opacity:.75}.signal{stroke-dasharray:5 700}.video iframe{width:100%;height:100%;border:0;pointer-events:none}.video{background:#05060a}.duration{font-size:7px;bottom:8px;right:8px;color:#879aa1;background:#05060aaa;padding:3px 5px;border-radius:3px}.icon-tray img{width:68px;height:68px}footer{margin-top:40px}@media(max-width:800px){.outputs{gap:22px}.visual,.icon-tray{height:145px}.documents img{max-height:125px}.icon-tray img{width:52px;height:52px}.caption{gap:5px}.caption b{font-size:10px}}@media(max-width:520px){body{padding:16px 12px}.pipeline{display:block;width:190px;padding:68px 0 0}.node{width:100%;height:53px}.node+.node{margin-top:25px}.upstream{width:190px}.pipeline:before{top:62px;left:50%;width:1px;height:130px}.node b{font-size:11px}.node small{font-size:8px}.node-icon{width:28px;height:28px}.node i{display:block}.run-state{position:static;width:auto;justify-content:center;margin:15px 0 0}.scene{gap:90px}.outputs{gap:12px;padding:0}.visual,.icon-tray{height:77px}.documents img{max-height:64px}.icon-tray{padding:5px;gap:1px;border-radius:7px}.icon-tray img{width:28px;height:28px}.caption{margin-top:14px;display:block}.caption b{font-size:9px;display:block;min-height:22px}.caption span{display:inline-block;margin-top:5px}.output p{font-size:8px;line-height:1.5}.duration{display:none}footer{font-size:8px}.video iframe{width:100%;height:100%}}

/* Full-width 16:9 curved screen; the renderer supplies the glass silhouette. */
.video{height:auto!important;aspect-ratio:16/9;align-self:center;border:0;border-radius:0;overflow:visible;background:transparent}.video iframe{display:block;width:100%;height:100%;aspect-ratio:16/9}.outputs{align-items:start}.output[data-output="video"] .visual{width:100%}.video .duration{bottom:10px;right:14px}
@supports (container-type:inline-size){.output{container-type:inline-size}.visual,.icon-tray{height:56.25cqw!important}.documents img{max-height:51cqw}.icon-tray img{width:21cqw;height:21cqw}}

footer{justify-content:flex-end;margin-top:20px}#replay{font-size:18px;line-height:1;width:32px;height:32px;padding:0;border-radius:50%}

/* One centered connector prevents a one-pixel seam between upstream segments. */
.pipeline{padding-top:64px}.upstream i{display:none}.pipeline:before{left:50%;transform:translateX(-50%);top:24px;bottom:28px;height:auto;width:1px;background:#4d5c3d}@media(max-width:520px){.pipeline{padding-top:56px}.pipeline:before{top:24px;bottom:26px;height:auto}}