.run-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.route-canvas{position:relative;height:clamp(340px,32vw,420px);margin-top:3rem}
.route-wires{position:absolute;inset:0;width:100%;height:100%}
.route-wires path{fill:none;stroke:#ffffff26;stroke-width:1.5}
.route-wires .route-wire{vector-effect:non-scaling-stroke}
.route-wires .pulse-path{stroke:var(--ember);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #ed9787)}
.route-canvas[data-playing=true] .pulse-path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s linear}
@media (prefers-reduced-motion:reduce){.route-canvas[data-playing=true] .pulse-path{transition:none}}
.route-point{position:absolute;display:grid;justify-items:center;gap:.4rem;width:11rem;text-align:center;transform:translate(-50%,-28px)}
.route-point[data-step=input]{left:9%;top:44%}
.route-point[data-step=observe]{left:36%;top:26%}
.route-point[data-step=handle]{left:63%;top:65%}
.route-point[data-step=return]{left:91%;top:44%}
.route-symbol{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--graphite);box-shadow:inset 0 0 0 1px var(--edge);color:var(--pewter);font-family:var(--font-mono);transition:color var(--duration-normal),box-shadow var(--duration-normal)}
.route-point[data-active=true] .route-symbol{color:var(--silver);box-shadow:inset 0 0 0 1px var(--ember),0 0 30px -6px #ed9787aa}
.route-symbol .crow{width:30px}
.route-point strong{font-weight:500}
.route-point small{color:var(--pewter);font-size:var(--text-small)}
.run-record{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.run-record dt{color:var(--pewter);font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase}
.run-record dd{margin-top:.4rem;font:var(--text-small)/1.4 var(--font-mono);overflow-wrap:anywhere}
.run-status{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;color:var(--mist);font-size:var(--text-small)}

.integration-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,6vw,6rem)}
.integration-points{display:grid;gap:.6rem;margin-top:2rem;color:var(--mist)}
.integration-points li{display:flex;align-items:center;gap:.75rem}
.code-window{overflow:hidden;border-radius:var(--radius-object);background:#16171a;box-shadow:var(--shadow-object)}
.code-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem .75rem .75rem 1.25rem;border-bottom:1px solid var(--hairline);color:var(--pewter);font:var(--text-small) var(--font-mono)}
.code-window pre{margin:0;padding:1.5rem 1.25rem;overflow-x:auto;color:var(--silver);font:.875rem/1.7 var(--font-mono)}
.code-window .kw{color:var(--ember)}
.code-window .str{color:#b8d4c0}
.code-window .comment{color:var(--pewter)}
.code-foot{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-top:1px solid var(--hairline);color:var(--pewter);font-size:var(--text-small)}
.code-foot>span{display:inline-flex;align-items:center;gap:.5rem}

@media (max-width:899.98px){.integration-grid{grid-template-columns:1fr}}
@media (max-width:899.98px){
  .route-canvas{display:grid;gap:1.5rem;height:auto;padding-left:1.5rem;border-left:1px solid var(--edge)}
  .route-wires{display:none}
  .route-point{position:static;grid-template-columns:56px 1fr;justify-items:start;column-gap:1rem;width:auto;text-align:left;transform:none}
  .route-point .route-symbol{grid-row:1/3}
  .run-record{grid-template-columns:repeat(2,minmax(0,1fr))}
}