.pipe {
  --p-teal: #218c82;
  --p-steel: #3b6e94;
  --p-orange: #b4561e;
  --p-slate: #5b6b7a;
  --p-line: #d6dde3;
  --p-dim: #7c8893;
  --p-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  margin: .4rem 0 0;
}
.pipe-board {
  position: relative; overflow-x: auto; padding: 18px 16px; border: 1px solid var(--border); border-radius: 22px;
  background:
    linear-gradient(rgba(214, 221, 227, .45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 221, 227, .45) 1px, transparent 1px),
    #f7f9fa;
  background-size: 28px 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .07);
}
.pipe-status {
  position: absolute; top: 14px; right: 18px; z-index: 5; display: flex; align-items: center; gap: 7px;
  color: var(--p-dim); font: 650 9px/1 var(--p-mono); letter-spacing: .12em;
}
.pipe-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-teal); animation: p-live 2s ease-out infinite; }
.pipe-diagram { position: relative; width: 920px; min-width: 920px; }
.pipe-row-label {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: var(--p-dim); font: 650 9.5px/1 var(--p-mono); letter-spacing: .13em; text-transform: uppercase;
}
.pipe-row-label::after { content: ""; flex: 1; height: 1px; background: var(--p-line); margin-right: 110px; }
.pipe-row-label.r2 { margin-top: 46px; }
.pipe-row-label.r2::after { margin-right: 0; }
.pipe-row { position: relative; z-index: 2; display: grid; align-items: center; }
.pipe-row.r1 { margin-top: 18px; }
.pipe-row.r1 { grid-template-columns: 140px 26px 96px 26px 146px 26px 108px 26px 96px; width: 690px; }
.pipe-row.r2 { grid-template-columns: 118px 28px 150px 28px 236px 28px 150px 28px 124px; width: 890px; }
.pipe-links { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pipe-links path { fill: none; stroke: var(--p-dim); stroke-width: 1.25; stroke-dasharray: 7 6; animation: p-flow 1.4s linear infinite; }
.pipe-links .mem-link { stroke: var(--p-steel); stroke-width: 1.6; }
.pipe-links marker path { fill: var(--p-dim); stroke: none; animation: none; }
.pipe-links marker.m-steel path { fill: var(--p-steel); }

.pipe-conn { position: relative; height: 20px; }
.pipe-conn::before { content: ""; position: absolute; left: 3px; right: 7px; top: 9px; height: 1px; background: repeating-linear-gradient(90deg, var(--p-dim) 0 6px, transparent 6px 10px); }
.pipe-conn::after { content: ""; position: absolute; right: 4px; top: 5.5px; width: 7px; height: 7px; border-top: 1px solid var(--p-dim); border-right: 1px solid var(--p-dim); transform: rotate(45deg); }
.pipe-conn span { position: absolute; top: 7px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--p-teal); box-shadow: 0 0 7px var(--p-teal); animation: p-dot 2.6s ease-in-out infinite; }
.pipe-row > .pipe-conn:nth-child(4) span { animation-delay: .35s; }
.pipe-row > .pipe-conn:nth-child(6) span { animation-delay: .7s; }
.pipe-row > .pipe-conn:nth-child(8) span { animation-delay: 1.05s; }

.pipe-frames { position: relative; height: 112px; }
.pipe-frames figure { position: absolute; width: 112px; margin: 0; border: 1px solid var(--p-line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.pipe-frames figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pipe-frames figure:nth-child(1) { left: 0; top: 0; animation: p-focus 7.2s ease-in-out infinite; }
.pipe-frames figure:nth-child(2) { left: 17px; top: 24px; animation: p-focus 7.2s ease-in-out 2.4s infinite; }
.pipe-frames figure:nth-child(3) { left: 34px; top: 48px; animation: p-focus 7.2s ease-in-out 4.8s infinite; }
.pipe-tag, .pipe-visual figcaption {
  position: absolute; left: 5px; bottom: 5px; margin: 0; padding: 3px 5px; border-radius: 5px; color: #fff;
  background: rgba(4, 10, 12, .66); font: 650 7.5px/1 var(--p-mono); letter-spacing: .05em; text-transform: uppercase;
}
.pipe-frames figure.cue { border-color: var(--p-steel); box-shadow: 0 0 0 2px rgba(59, 110, 148, .35); }

.pipe-node {
  min-height: 84px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 10px 8px;
  border: 1px solid var(--p-steel); border-radius: 999px; background: #edf3f8; text-align: center;
}
.pipe-node span { color: var(--p-steel); font: 700 8px/1 var(--p-mono); letter-spacing: .12em; }
.pipe-node strong { font: 600 13px/1.15 'Inter', sans-serif; color: var(--text); }
.pipe-node em { font: 500 9.5px/1.2 'Inter', sans-serif; color: var(--p-dim); font-style: normal; }
.pipe-node.events { border-color: var(--p-orange); background: #fbf1ea; border-radius: 22px; }
.pipe-node.events span { color: var(--p-orange); }
.pipe-events { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
.pipe-events b { padding: 2px 5px; border-radius: 5px; background: #fff; border: 1px solid rgba(180, 86, 30, .3); color: var(--p-orange); font: 650 7.5px/1.2 var(--p-mono); animation: p-chip 3.6s ease-in-out infinite; }
.pipe-events b:nth-child(2) { animation-delay: .5s; } .pipe-events b:nth-child(3) { animation-delay: 1s; }
.pipe-node.exec { border-color: var(--p-slate); background: #f0f2f4; border-radius: 18px; }
.pipe-node.exec span { color: var(--p-slate); }

.pipe-visual { position: relative; margin: 0; height: 86px; border: 1px solid var(--p-line); border-radius: 12px; overflow: hidden; background: #fff; }
.pipe-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pipe-visual .ov { animation: p-reveal 5.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.pipe-visual::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .95); box-shadow: 0 0 16px 5px rgba(255, 255, 255, .45); animation: p-scan 5.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.pipe-visual figcaption { z-index: 2; }

.pipe-bank {
  position: absolute; z-index: 3; top: 30px; right: 0; width: 200px; padding: 9px; border: 1px solid rgba(59, 110, 148, .35);
  border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 14px 34px rgba(59, 110, 148, .12);
}
.pipe-bank h4 { margin: 0 0 7px; color: var(--p-steel); font: 700 8px/1.3 var(--p-mono); letter-spacing: .1em; text-transform: uppercase; }
.pipe-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pipe-slots div { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; background: #eef1f3 center / cover no-repeat; border: 1.5px solid transparent; opacity: .25; animation: p-fill 8.4s ease-in-out infinite; }
.pipe-slots div.cue { border-color: var(--p-steel); }
.pipe-slots div.cue::after { content: "CUE"; position: absolute; top: 1px; left: 1px; padding: 0 3px; border-radius: 2px; background: var(--p-steel); color: #fff; font: 700 6px/1.4 var(--p-mono); }
.pipe-slots div.now { outline: 1px dashed #8a959e; outline-offset: 1px; }
.pipe-slots div:nth-child(2) { animation-delay: .5s; } .pipe-slots div:nth-child(3) { animation-delay: 1s; }
.pipe-slots div:nth-child(4) { animation-delay: 1.5s; } .pipe-slots div:nth-child(5) { animation-delay: 2s; }
.pipe-slots div:nth-child(6) { animation-delay: 2.5s; } .pipe-slots div:nth-child(7) { animation-delay: 3s; }
.pipe-slots p { grid-column: span 1; margin: 0; display: grid; place-items: center; font: 650 7px/1.2 var(--p-mono); color: var(--p-dim); text-align: center; }
.pipe-objtok { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.pipe-objtok i { height: 12px; border-radius: 3px; background: rgba(33, 140, 130, .14); border: 1px solid rgba(33, 140, 130, .35); animation: p-wave 3.4s ease-in-out infinite; }
.pipe-objtok i:nth-child(7n+2) { animation-delay: .12s; } .pipe-objtok i:nth-child(7n+3) { animation-delay: .24s; }
.pipe-objtok i:nth-child(7n+4) { animation-delay: .36s; } .pipe-objtok i:nth-child(7n+5) { animation-delay: .48s; }
.pipe-objtok i:nth-child(7n+6) { animation-delay: .6s; } .pipe-objtok i:nth-child(7n+7) { animation-delay: .72s; }
.pipe-bank .cap { margin: 5px 0 0; text-align: center; color: var(--p-dim); font: 650 7.5px/1.3 var(--p-mono); letter-spacing: .06em; }

.pipe-inputs { display: grid; gap: 7px; }
.pipe-inputs span { display: grid; place-items: center; height: 36px; border: 1px solid var(--p-line); border-radius: 9px; background: #fff; font: 500 11px/1.1 'Inter', sans-serif; color: var(--text); }
.pipe-vlm, .pipe-expert { position: relative; min-height: 92px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 10px; overflow: hidden; border-radius: 16px; text-align: center; }
.pipe-vlm { border: 1px solid rgba(91, 107, 122, .45); background: #eef1f4; }
.pipe-vlm::before, .pipe-expert::before { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: p-shimmer 3.6s ease-in-out infinite; }
.pipe-vlm::before { background: linear-gradient(90deg, transparent, rgba(91, 107, 122, .18), transparent); }
.pipe-vlm span, .pipe-expert span { position: relative; font: 700 8px/1 var(--p-mono); letter-spacing: .11em; }
.pipe-vlm span { color: var(--p-slate); }
.pipe-vlm strong, .pipe-expert strong { position: relative; font: 650 15px/1.15 'Inter', sans-serif; color: var(--text); }
.pipe-vlm em, .pipe-expert em { position: relative; font: 500 9.5px/1.2 'Inter', sans-serif; color: var(--p-dim); font-style: normal; }
.pipe-expert { border: 1px solid rgba(33, 140, 130, .5); background: #eaf5f3; }
.pipe-expert::before { background: linear-gradient(90deg, transparent, rgba(33, 140, 130, .2), transparent); animation-delay: .8s; }
.pipe-expert span { color: var(--p-teal); }
.pipe-blocks { position: relative; display: flex; gap: 4px; }
.pipe-blocks i { width: 22px; height: 9px; border-radius: 3px; background: rgba(33, 140, 130, .18); border: 1px solid rgba(33, 140, 130, .4); animation: p-block 3s ease-in-out infinite; }
.pipe-blocks i:nth-child(2) { animation-delay: .25s; } .pipe-blocks i:nth-child(3) { animation-delay: .5s; }
.pipe-blocks i:nth-child(4) { animation-delay: .75s; } .pipe-blocks i:nth-child(5) { animation-delay: 1s; } .pipe-blocks i:nth-child(6) { animation-delay: 1.25s; }
.pipe-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pipe-actions span { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(33, 140, 130, .3); background: #fff; color: var(--p-teal); font: 700 9px/1 var(--p-mono); animation: p-wave 3.4s ease-in-out infinite; }
.pipe-actions span:nth-child(2) { animation-delay: .15s; } .pipe-actions span:nth-child(3) { animation-delay: .3s; }
.pipe-actions span:nth-child(4) { animation-delay: .45s; } .pipe-actions span:nth-child(5) { animation-delay: .6s; } .pipe-actions span:nth-child(6) { animation-delay: .75s; }
.pipe-actions p { grid-column: 1 / -1; margin: 1px 0 0; text-align: center; color: var(--p-dim); font: 650 7.5px/1.3 var(--p-mono); letter-spacing: .06em; }
.pipe-scroll-hint { display: none; margin-top: .4rem; font-size: .78rem; color: var(--text-secondary); text-align: center; }
@media (max-width: 1000px) { .pipe-scroll-hint { display: block; } }

@keyframes p-live { 0% { box-shadow: 0 0 0 0 rgba(33, 140, 130, .4); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes p-flow { to { stroke-dashoffset: -26; } }
@keyframes p-dot { 0%, 12% { transform: translateX(0); opacity: 0; } 24%, 72% { opacity: 1; } 86%, 100% { transform: translateX(16px); opacity: 0; } }
@keyframes p-focus { 0%, 100% { filter: saturate(.75); } 12%, 30% { filter: saturate(1.1); box-shadow: 0 0 0 2px rgba(33, 140, 130, .45), 0 6px 16px rgba(0, 0, 0, .08); } 40% { filter: saturate(.75); } }
@keyframes p-reveal { 0%, 15% { clip-path: inset(0 100% 0 0); } 45%, 85% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes p-scan { 0%, 15% { left: 0; opacity: 0; } 22% { opacity: 1; } 45%, 100% { left: 100%; opacity: 0; } }
@keyframes p-chip { 0%, 30%, 100% { transform: translateY(0); background: #fff; } 12%, 20% { transform: translateY(-2px); background: #fde7d8; } }
@keyframes p-fill { 0%, 6% { opacity: .2; transform: scale(.92); } 14%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: .2; transform: scale(.92); } }
@keyframes p-wave { 0%, 24%, 68%, 100% { transform: translateY(0); } 36%, 50% { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(33, 140, 130, .16); } }
@keyframes p-shimmer { 0%, 12% { transform: translateX(-100%); opacity: 0; } 25%, 75% { opacity: 1; } 90%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes p-block { 0%, 30%, 100% { background: rgba(33, 140, 130, .18); } 12%, 20% { background: rgba(33, 140, 130, .7); } }
@media (prefers-reduced-motion: reduce) {
  .pipe *, .pipe *::before, .pipe *::after { animation: none !important; }
  .pipe-slots div { opacity: 1; }
  .pipe-visual .ov { clip-path: none; }
}