.paper-pipeline { min-width: 0; }
.paper-pipeline .pipeline-viewport { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.paper-pipeline .pipeline-canvas { position: relative; width: 100%; min-width: 913px; aspect-ratio: 913 / 333; }
.paper-pipeline .pipeline-original { display: block; width: 100%; height: 100%; max-width: none; }
.paper-pipeline .pipeline-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.paper-pipeline .pipeline-detail { position: absolute; z-index: 1; outline: none; }
.paper-pipeline .pipeline-detail::after { content: ""; position: absolute; inset: 0; opacity: 0; border-radius: 7px; background-image: url('./assets/figures/pipeline/main.png'); background-size: var(--crop-size); background-position: var(--crop-position); box-shadow: 0 3px 12px #28212e20; transition: transform 180ms ease, opacity 120ms ease; pointer-events: none; }
.paper-pipeline .pipeline-detail:is(:hover, :focus-visible) { z-index: 2; }
.paper-pipeline .pipeline-detail:is(:hover, :focus-visible)::after { opacity: 1; transform: scale(1.07); }
.paper-pipeline .pipeline-detail:focus-visible::after { outline: 2px solid #79717d; outline-offset: 2px; }
.paper-pipeline .pipeline-legend { display: flex; justify-content: center; gap: 24px; padding-top: 14px; color: #66636a; font-size: 12px; }
.paper-pipeline .pipeline-legend span { display: inline-flex; align-items: center; gap: 8px; }
.paper-pipeline .pipeline-legend i { display: block; width: 30px; height: 3px; border-radius: 2px; }
.paper-pipeline .pipeline-legend-inference { background: #a6a3ab; }
.paper-pipeline .pipeline-legend-learning { background: linear-gradient(90deg, #bd4329, #ff873b 65%, #fff1ca); box-shadow: 0 0 2px #e96b3270; }
.paper-pipeline .pipeline-flow-segment { fill: none; stroke: #e3e5e7; stroke-linecap: butt; stroke-dasharray: 5 22; animation: pipeline-arrow-flow 1.6s linear infinite; animation-play-state: paused; }
.paper-pipeline.is-running .pipeline-flow-segment { animation-play-state: running; }
.paper-pipeline.is-reduced-motion .pipeline-flow { visibility: hidden; }
.paper-pipeline .pipeline-flow-segment[data-flow-kind="learning"] { stroke-linecap: round; stroke-dasharray: var(--pulse-dash); animation: pipeline-learning-pulse var(--pulse-duration) linear var(--pulse-delay) infinite; animation-play-state: paused; }
.paper-pipeline .pipeline-flow-segment[data-pulse-layer="tail"] { stroke: #bd4329; filter: drop-shadow(0 0 1px #e96b3270); }
.paper-pipeline .pipeline-flow-segment[data-pulse-layer="body"] { stroke: #ff873b; }
.paper-pipeline .pipeline-flow-segment[data-pulse-layer="head"] { stroke: #fff1ca; filter: drop-shadow(0 0 .7px #ffb55b); }
.paper-pipeline.is-running .pipeline-flow-segment[data-flow-kind="learning"] { animation-play-state: running; }
@keyframes pipeline-learning-pulse { from { stroke-dashoffset: var(--pulse-start); } to { stroke-dashoffset: var(--pulse-end); } }
.paper-pipeline .pipeline-viewport:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
@keyframes pipeline-arrow-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -27; } }
@media (prefers-reduced-motion: reduce) {
  .paper-pipeline .pipeline-flow { visibility: hidden; }
  .paper-pipeline .pipeline-flow-segment { animation: none; }
  .paper-pipeline .pipeline-detail::after { transition: none; }
}
@media print {
  .paper-pipeline .pipeline-canvas { min-width: 0; width: 100% !important; }
  .paper-pipeline .pipeline-flow { display: none; }
  .paper-pipeline .pipeline-detail { display: none; }
}