/* A manually selected step drives one finite animation. The original hero's
   route-draw loop must never advance examples in this inspector. */
html .v2 .inspector-workspace .hero-route,
html .v2 .inspector-workspace .hero-return,
html .v2 .inspector-workspace .route-packet {
  animation: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.v2 .inspector-workspace .hero-route { opacity: 1; }
.v2 .inspector-workspace .hero-return,
.v2 .inspector-workspace .route-packet { opacity: 0; }
.v2 .inspector-workspace[data-stage="verify"] .hero-route { opacity: .22; }
.v2 .inspector-workspace[data-stage="verify"] .hero-return { opacity: 1; }
.v2 .inspector-workspace .inspector-hub { fill: var(--white); stroke: var(--signal); stroke-width: 2; }
.v2 .inspector-workspace .label-router { top: 64%; }
.v2 .inspector-workspace .route-label.is-current-model { color: var(--ink); font-weight: 600; }
.v2 .inspector-workspace .route-node.is-selected circle:first-child { stroke-width: 2; }
.v2 .inspector-workspace[data-stage="read"] .route-node.is-selected circle:first-child { stroke: #babfaf; stroke-width: 1; }
.v2 .inspector-workspace[data-stage="read"] .route-node.is-selected circle:last-child { fill: #8f9584; }
.v2 .inspector-workspace[data-stage="select"] .inspector-hub,
.v2 .inspector-workspace[data-stage="execute"] .route-node.is-selected circle:first-child,
.v2 .inspector-workspace[data-stage="verify"] .route-entry { fill: var(--signal); }
.v2 .inspector-workspace[data-stage="execute"] .route-node.is-selected circle:last-child { fill: var(--white); }
.v2 .inspector-workspace .inspector-input,
.v2 .inspector-workspace .inspector-route,
.v2 .inspector-workspace .inspector-answer { transition: box-shadow .2s ease, background-color .2s ease; }
.v2 .inspector-workspace[data-stage="read"] .inspector-input,
.v2 .inspector-workspace[data-stage="select"] .inspector-route,
.v2 .inspector-workspace[data-stage="execute"] .inspector-route,
.v2 .inspector-workspace[data-stage="verify"] .inspector-answer { box-shadow: inset 3px 0 var(--signal); }
.v2 .inspector-workspace .route-preview { flex-direction: column; justify-content: flex-start; gap: 16px; }
.v2 .inspector-workspace .route-preview .demo-bottom { display: none; }
.v2 .inspector-workspace .inspector-answer { width: 100%; min-width: 0; grid-column: auto; padding: 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.v2 .inspector-workspace .inspector-answer .panel-label { gap: 8px; align-items: center; padding-bottom: 14px; font-size: 9px; }
.v2 .inspector-workspace .inspector-answer .panel-label > .signal { color: var(--graphite); }
.v2 .inspector-workspace .answer-format { margin-left: auto; font-size: 8px; color: var(--graphite); }
.v2 .inspector-workspace .answer-text { font-size: 11px; line-height: 1.75; max-width: none; }
.v2 .inspector-workspace[data-example="review"] .answer-text,
.v2 .inspector-workspace[data-example="reply"] .answer-text { font-family: var(--body); font-size: 13px; line-height: 1.65; }
@media (max-width: 1100px) {
 .v2 .inspector-workspace .route-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; }
}
@media (max-width: 640px) {
 .v2 .inspector-workspace .route-preview { display: flex; gap: 12px; padding: 16px; }
 .v2 .inspector-workspace .inspector-answer { max-width: 420px; padding: 16px; }
}
.v2 .inspector-route-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 11px 16px; border-bottom: 1px solid var(--rule); font-size: 10px; color: var(--ink); }
.v2 .inspector-replay { flex-shrink: 0; padding: 3px 0; border: 0; border-bottom: 1px solid var(--fog); background: transparent; font: inherit; color: var(--graphite); cursor: pointer; }
.v2 .inspector-replay:hover { color: var(--ink); }
.v2 .inspector-replay:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

html .v2 .inspector-workspace.is-stage-animating:not([data-stage="verify"]) .hero-route,
html .v2 .inspector-workspace.is-stage-animating[data-stage="verify"] .hero-return { animation: inspector-stage-draw 1.5s ease-in-out 1 both; }
html .v2 .inspector-workspace.is-stage-animating:not([data-stage="select"]) .route-packet { animation: inspector-stage-packet 1.5s ease-in-out 1 both; }
html .v2 .inspector-workspace .hero-demo.is-idle .hero-route,
html .v2 .inspector-workspace .hero-demo.is-idle .hero-return,
html .v2 .inspector-workspace .hero-demo.is-idle .route-packet,
html.motion-paused .v2 .inspector-workspace .hero-route,
html.motion-paused .v2 .inspector-workspace .hero-return,
html.motion-paused .v2 .inspector-workspace .route-packet,
html .v2 .inspector-workspace.is-document-hidden .hero-route,
html .v2 .inspector-workspace.is-document-hidden .hero-return,
html .v2 .inspector-workspace.is-document-hidden .route-packet { animation-play-state: paused !important; }
@keyframes inspector-stage-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes inspector-stage-packet {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}