.steampunk-pipe-vertical{background:linear-gradient(90deg,rgba(60,40,20,.9),rgba(139,87,42,.95) 15%,#cd7f32 50%,rgba(139,87,42,.95) 85%,rgba(60,40,20,.9));box-shadow:inset 0 0 10px rgba(0,0,0,.8),0 0 5px rgba(0,0,0,.5);border-radius:8px;position:relative;overflow:visible;border:1px solid rgba(205,127,50,.6);z-index:1}.steampunk-pipe-vertical:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 42px);pointer-events:none;z-index:2}.pipe-connector{position:absolute;right:0;height:24px;cursor:pointer;transform:translateX(100%);transition:all .3s ease-out}.pipe-connector:hover{height:28px}.pipe-group{width:0;display:flex;flex-direction:row;transition:width .3s cubic-bezier(.175,.885,.32,1.275);transform-origin:left center}.pipe-group,.pipe-main{position:relative;top:0;left:0;height:100%}.pipe-main{flex-grow:1;background:linear-gradient(0deg,rgba(60,40,20,.9),rgba(139,87,42,.95) 15%,#cd7f32 50%,rgba(139,87,42,.95) 85%,rgba(60,40,20,.9));box-shadow:inset 0 0 10px rgba(0,0,0,.8),0 0 5px rgba(0,0,0,.5);border-radius:6px 0 0 6px;border:1px solid rgba(205,127,50,.6);border-right:none}.pipe-main:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(90deg,transparent,transparent 20px,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) 22px);pointer-events:none;z-index:2;border-radius:6px 0 0 6px}.pipe-cap{position:relative;width:12px;min-width:12px;height:100%;background:linear-gradient(0deg,#3c2814,#8b572a 30%,#cd7f32 70%,#8b572a);border-radius:0 6px 6px 0;box-shadow:inset 0 0 5px rgba(0,0,0,.7),2px 0 4px rgba(0,0,0,.5);border:1px solid rgba(205,127,50,.6);border-left:none}.pipe-cap:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;background:radial-gradient(circle,#d4af37 10%,#8c3b00 90%);border-radius:50%;border:1px solid rgba(0,0,0,.5);transform:translate(-50%,-50%);z-index:3}.pipe-connector.active .pipe-group,.pipe-connector:hover .pipe-group{width:100%;filter:brightness(1.2)}.pipe-connector.active .pipe-main,.pipe-connector:hover .pipe-main{filter:drop-shadow(0 0 3px rgba(205,127,50,.3))}.pipe-section-label{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.7);color:#b87333;font-size:.65rem;font-weight:500;padding:2px 5px;border-radius:3px;white-space:nowrap;text-align:center;z-index:10;opacity:0;transition:opacity .2s ease;border:1px solid #8c3b00;box-shadow:0 0 5px rgba(0,0,0,.5);letter-spacing:.5px;pointer-events:none}.pipe-connector.active .pipe-section-label,.pipe-connector:hover .pipe-section-label{opacity:1}.active-valve{filter:drop-shadow(0 0 8px rgba(251,191,36,.7));animation:pulse-valve 1.5s infinite}@keyframes pulse-valve{0%,to{filter:drop-shadow(0 0 8px rgba(251,191,36,.7))}50%{filter:drop-shadow(0 0 12px rgba(251,191,36,.9))}}.pipe-rivet{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#d4af37 10%,#8c3b00 90%);border-radius:50%;border:1px solid rgba(0,0,0,.5);z-index:5}.steam-vent{position:absolute;width:10px;height:10px;opacity:.7}.steam-vent:before{width:100%;height:100%;background:radial-gradient(circle at center,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 70%);transform:scale(1);animation:steam-pulse 3s infinite}.steam-vent:after,.steam-vent:before{content:"";position:absolute;border-radius:50%}.steam-vent:after{width:30px;height:30px;left:-10px;top:-10px;background:radial-gradient(circle at center,hsla(0,0%,100%,.4),hsla(0,0%,100%,0) 70%);animation:steam-flow 5s infinite}@keyframes steam-pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.5);opacity:.6}}@keyframes steam-flow{0%{transform:translate(0) scale(1);opacity:.5}to{transform:translate(-20px,-20px) scale(2);opacity:0}}