.thumb.pipe-flow-preview{position:relative;overflow:hidden;isolation:isolate;min-height:0;background:linear-gradient(rgba(24,32,21,.055) 1px,transparent 1px) 0 0/100% 10px,linear-gradient(90deg,rgba(24,32,21,.045) 1px,transparent 1px) 0 0/10px 100%,linear-gradient(180deg,#b8c78d,#a9b97c);container-type:inline-size}
.thumb.pipe-flow-preview::before{content:"";position:absolute;inset:7px;border:2px solid rgba(24,32,21,.55);pointer-events:none;z-index:1}
.thumb.pipe-flow-preview::after{content:"";position:absolute;right:8%;bottom:12%;width:10%;aspect-ratio:1;border:2px solid rgba(41,53,33,.38);box-shadow:inset 0 0 0 2px rgba(216,232,168,.18);opacity:.65;z-index:1}
.pipe-preview-grid{position:absolute;left:50%;top:50%;width:min(66%,230px);height:58%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(2px,.7cqw,5px);z-index:2}
.pipe-preview-cell{position:relative;min-width:0;border:1px solid rgba(24,32,21,.22);background:rgba(216,232,168,.08)}
.pipe-preview-segment{position:absolute;z-index:2;background:rgba(216,232,168,.34);border:clamp(2px,.8cqw,3px) solid var(--ink2);box-shadow:clamp(2px,.8cqw,3px) clamp(2px,.8cqw,3px) 0 rgba(24,32,21,.3),inset 0 0 0 clamp(1px,.55cqw,2px) rgba(216,232,168,.28)}
.pipe-preview-segment::after{content:"";position:absolute;background:var(--hi);opacity:.9;box-shadow:0 0 0 1px rgba(113,129,83,.7)}
.pipe-preview-segment.h{left:-8%;right:-8%;top:50%;height:32%;min-height:10px;transform:translateY(-50%)}
.pipe-preview-segment.h::after{left:8%;right:8%;top:28%;height:20%;min-height:2px}
.pipe-preview-segment.v{top:-8%;bottom:-8%;left:50%;width:34%;min-width:10px;transform:translateX(-50%)}
.pipe-preview-segment.v::after{top:8%;bottom:8%;left:28%;width:20%;min-width:2px}
.pipe-preview-segment.turn-es{left:50%;top:50%;width:58%;height:58%;border-left:0;border-top:0}
.pipe-preview-segment.turn-es::after{left:12%;top:12%;width:72%;height:16%;min-height:2px}
.pipe-preview-segment.turn-ne{left:50%;bottom:50%;width:58%;height:58%;border-left:0;border-bottom:0}
.pipe-preview-segment.turn-ne::after{left:12%;bottom:12%;width:72%;height:16%;min-height:2px}
.pipe-preview-port{position:absolute;z-index:5;color:var(--ink);background:var(--hi);border:2px solid var(--ink);padding:2px 4px;font:900 clamp(6px,2.4cqw,9px)/1 "Courier New",monospace;letter-spacing:.4px;box-shadow:2px 2px 0 rgba(24,32,21,.3)}
.pipe-preview-port.in{left:1.2%;top:50%;transform:translateY(-50%)}
.pipe-preview-port.out{right:1.2%;top:8%}
.pipe-preview-flow{position:absolute;z-index:6;left:17%;top:50%;width:clamp(5px,2.5cqw,9px);aspect-ratio:1;margin-top:calc(clamp(5px,2.5cqw,9px)/-2);background:var(--hi);box-shadow:0 0 0 2px var(--mid);animation:pipePreviewFlow 2.2s steps(18,end) infinite;will-change:transform}
@keyframes pipePreviewFlow{0%{transform:translate(0,0)}28%{transform:translate(22cqw,0)}43%{transform:translate(29cqw,18cqh)}60%{transform:translate(29cqw,-18cqh)}76%{transform:translate(43cqw,-18cqh)}100%{transform:translate(55cqw,-18cqh)}}
@media(max-width:420px){.pipe-preview-grid{width:64%;height:60%}.pipe-preview-port{padding:1px 3px;border-width:1px}.thumb.pipe-flow-preview::before{inset:5px}.thumb.pipe-flow-preview::after{display:none}}
@media(max-width:340px){.pipe-preview-grid{width:62%;gap:2px}.pipe-preview-flow{left:18%}}
@media(min-width:1200px){.pipe-preview-grid{width:min(64%,250px);height:60%}}
@media(orientation:landscape) and (max-height:520px){.pipe-preview-grid{height:62%}}
@media(prefers-reduced-motion:reduce){.pipe-preview-flow{animation:none;transform:translate(55cqw,-18cqh)}}