.context-animation .context-node,
.context-animation .context-core,
.context-animation .context-source-note,
.context-animation .context-step-label {
  transition: fill 600ms ease, stroke 600ms ease, stroke-width 600ms ease;
}
.context-animation .context-node.is-active { fill:#e1effb; stroke:#1b4f8a; stroke-width:1.8; }
.context-animation .context-core.is-active { fill:#1b4f8a; stroke:#8ab2d8; stroke-width:3; }
.context-animation .context-source-note.is-active { fill:#1b4f8a; font-weight:600; }
.context-animation .context-step-label.is-active { fill:#102951; font-weight:700; text-decoration:underline; text-underline-offset:6px; }
.context-flow-layer { pointer-events:none; }
.context-animation .context-flow {
  fill:none; stroke:#438cc3; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:9 91; stroke-dashoffset:0; opacity:0;
}
.context-animation .context-flow.is-active {
  opacity:1; animation:context-information-flow 2.1s linear infinite;
  animation-delay:var(--flow-delay,0s);
}
.context-animation:not([data-running="true"]) .context-flow { animation-play-state:paused; }
@keyframes context-information-flow { to { stroke-dashoffset:-100; } }
.context-animation-controls {
  display:grid; grid-template-columns:minmax(140px,180px) 1fr auto;
  gap:24px; align-items:center; margin-top:18px; padding:18px 22px;
  background:#fff; border:1px solid var(--line,#d5e2ee); border-radius:12px;
  color:var(--ink,#102951);
}
.context-animation-controls[hidden] { display:none; }
.context-animation-status { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; align-items:baseline; }
.context-animation-step { font-size:0.875rem; color:var(--muted,#607086); font-variant-numeric:tabular-nums; }
.context-animation-status strong { font-size:0.9375rem; font-weight:600; }
.context-animation-progress { grid-column:1/-1; height:3px; background:#e4edf5; border-radius:4px; overflow:hidden; }
.context-animation-progress span { display:block; height:100%; width:var(--context-progress,0%); background:#1b4f8a; border-radius:4px; }
.context-animation-controls p { margin:0; min-height:3.2em; font-size:0.9375rem; line-height:1.6; color:var(--muted,#607086); }
.context-animation-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:10px 14px; border:1px solid #b9cfe1; border-radius:7px;
  background:#fff; color:#1b4f8a; font:inherit; font-size:0.875rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.context-animation-toggle:hover { background:#edf5fc; border-color:#1b4f8a; }
.context-animation-toggle:focus-visible { outline:3px solid #438cc3; outline-offset:3px; }
.context-animation-icon { width:10px; height:12px; border-inline:3px solid currentColor; }
.context-animation[data-paused="true"] .context-animation-icon { width:0; height:0; border:6px solid transparent; border-right:0; border-left:9px solid currentColor; }
.context-animation figcaption { font-size:0.875rem; }
@media(max-width:850px) {
  .context-animation-controls { grid-template-columns:1fr auto; gap:14px 18px; padding:18px; }
  .context-animation-controls p { grid-column:1/-1; grid-row:2; }
}
@media(max-width:420px) {
  .context-animation-controls { grid-template-columns:1fr; }
  .context-animation-controls p { grid-row:auto; min-height:4.8em; }
  .context-animation-toggle { justify-self:start; }
}
@media(prefers-reduced-motion:reduce) {
  .context-animation .context-node,.context-animation .context-core,
  .context-animation .context-source-note,.context-animation .context-step-label { transition:none; }
}