/* Quiet presentation chrome; the original figure remains the visual focus. */
.pipeline-figure { position:relative; margin:40px 0; padding:0; overflow:hidden; border:1px solid #cdddee; border-radius:24px; background:linear-gradient(145deg,#fff,#f3f8ff); box-shadow:0 22px 65px -40px #264b7e66; }
.pipeline-tools { position:absolute; z-index:2; top:5px; right:13px; display:flex; align-items:center; gap:2px; }
.pipeline-tools button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; color:#8193ab; opacity:.62; font:400 17px/1 system-ui,sans-serif; cursor:pointer; transition:color .25s,opacity .25s,background .25s; }
.pipeline-tools [data-pipeline-motion] { font-size:11px; }
.pipeline-tools button:hover, .pipeline-tools button:focus-visible { color:#426a99; opacity:1; background:#e6effa99; }
.pipeline-tools button:disabled { opacity:.3; cursor:default; }
.pipeline-figure button:focus-visible, .pipeline-viewport:focus-visible { outline:2px solid #2868b9; outline-offset:2px; }
.pipeline-viewport { padding:28px 20px 20px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#b9cfe7 transparent; }
.pipeline-host { position:relative; }
.pipeline-fallback { display:block; width:100%; height:auto; }
.pipeline-figure:not(.is-ready) .pipeline-interactive { display:none; }
.pipeline-figure.is-ready .pipeline-fallback { display:none; }
.pipeline-figure .fw-artwork { overflow:visible; }
.pipeline-figure .fw-component { cursor:inherit; transition:none; }
.pipeline-part { transform-box:fill-box; transform-origin:center; transition:opacity .4s ease,filter .4s ease; cursor:pointer; }
.pipeline-part.is-focused { transform:translateY(-7px) scale(1.012); filter:drop-shadow(0 10px 7px #385a852e); }
.pipeline-part.is-muted { opacity:.28; filter:saturate(.38); }
.pipeline-float { animation:pipeline-float 6.8s ease-in-out infinite; animation-delay:var(--float-delay); }
.pipeline-figure[data-running="false"] .pipeline-float { animation-play-state:paused; }
.pipeline-figure[data-intro="waiting"] .pipeline-part { opacity:0; }
.pipeline-graph-route, .pipeline-linked-route { transform-box:fill-box; transform-origin:center; transition:opacity .4s,filter .4s; cursor:pointer; outline:none; }
.pipeline-graph-route.is-focused { transform:translateY(-8px) scale(1.025); filter:drop-shadow(0 7px 4px #34516d66) drop-shadow(0 0 2px var(--route-color)); }
.pipeline-graph-route.is-muted, .pipeline-linked-route.is-muted { opacity:.13; filter:saturate(.2); }
.pipeline-linked-route.is-focused { transform:translateY(-8px) scale(1.025); filter:drop-shadow(0 7px 4px #34516d55) drop-shadow(0 0 2px var(--route-color)); }
.pipeline-part .fw-stage { transition:opacity .4s,filter .4s; }
.pipeline-part.is-linked .fw-stage { opacity:.28; filter:saturate(.38); }
.pipeline-graph-route:focus-visible { filter:drop-shadow(0 0 4px #1d5fc9); }
.pipeline-route-hit { pointer-events:stroke; stroke-linecap:round; stroke-linejoin:round; }
.pipeline-similarity { transition:opacity .4s!important; }
.pipeline-figure[data-route]:not([data-route=""]) .pipeline-similarity { opacity:.12; }
.pipeline-orbit { fill:none; stroke:#8faccc; stroke-width:1; stroke-opacity:.2; }
.pipeline-ribbon-glow { filter:blur(4px); opacity:.32; }
.pipeline-ribbon-core { fill:none; stroke-width:1.2; stroke-linecap:round; }
.pipeline-arrow { filter:drop-shadow(0 2px 3px #649dc647); }
.pipeline-arrow-glint { fill:none; stroke:#fff; stroke-width:1.3; stroke-linecap:round; opacity:.8; }
.pipeline-gate-halo { fill:none; stroke:currentColor; stroke-width:1.3; }
.pipeline-gate-core { fill:currentColor; opacity:.45; }
@keyframes pipeline-float { 0%,100% { transform:translateY(1px); } 50% { transform:translateY(-5px); } }
@media (max-width:800px) {
  .pipeline-viewport { padding:30px 18px 18px; }
  .pipeline-host { min-width:1000px; }
  .pipeline-figure:not(.is-ready) .pipeline-host { min-width:0; }
  .pipeline-tools { top:2px; right:8px; }
  .pipeline-tools button { width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .pipeline-figure .pipeline-float { animation:none; }
  .pipeline-figure .pipeline-part, .pipeline-figure .pipeline-graph-route, .pipeline-figure .pipeline-linked-route { transform:none!important; transition:none; }
}