/* Explainer diagrams: flow, chat demo, matrix, bars. Static and fully readable by default;
   diagrams.js adds .is-playing when one scrolls into view. No motion under reduced-motion. */
.dx { margin: 2.5rem 0; padding: 1.75rem; border: 1px solid rgba(169, 190, 209, .16); border-radius: 14px; background: rgba(8, 16, 28, .82); }
.dx figcaption { margin-top: 1.25rem; color: #8497ad; font: 500 .74rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Flow: an ordered list drawn as connected steps */
.dx-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 1rem; position: relative; counter-reset: dx; }
.dx-flow ol::before { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; top: 1.1rem; height: 2px; background: rgba(169, 190, 209, .18); }
.dx-flow ol::after { content: ""; position: absolute; left: 1.1rem; top: 1.1rem; height: 2px; width: 0; background: var(--color-accent); box-shadow: 0 0 12px rgba(6, 253, 216, .6); }
.dx-flow li { position: relative; margin: 0; padding: 3.1rem 0 0; counter-increment: dx; color: #a8b5c8; font-size: .86rem; line-height: 1.55; }
.dx-flow li::before { content: counter(dx); position: absolute; top: 0; left: 0; z-index: 1; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(6, 253, 216, .5); background: #07121f; color: var(--color-accent); font: 600 .85rem var(--font-mono); }
.dx-flow li strong { display: block; color: #f4f7fc; font-size: .98rem; margin-bottom: .3rem; }
.dx-flow li.dx-human::before { background: var(--color-accent); color: #02040a; }

/* Chat demo */
.dx-chat { max-width: 440px; }
.dx-chat .dx-thread { display: flex; flex-direction: column; gap: .6rem; }
.dx-msg { max-width: 86%; padding: .65rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.45; color: #dbe5f1; background: #12202f; border: 1px solid rgba(169, 190, 209, .14); }
.dx-msg.dx-me { align-self: flex-end; background: rgba(6, 253, 216, .12); border-color: rgba(6, 253, 216, .35); color: #eafffb; }
.dx-msg.dx-note { align-self: center; max-width: 100%; background: none; border: 1px dashed rgba(169, 190, 209, .3); color: #8497ad; font: 500 .74rem/1.5 var(--font-mono); letter-spacing: .04em; }
.dx-replay { margin-top: 1rem; background: none; border: 1px solid rgba(169, 190, 209, .3); color: #b8c5d6; border-radius: 8px; padding: .4rem .8rem; font: 500 .78rem var(--font-mono); cursor: pointer; }
.dx-replay:hover, .dx-replay:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }

/* Matrix and bars (inline SVG) */
.dx svg { display: block; width: 100%; height: auto; max-width: 560px; }
.dx svg text { font-family: var(--font-mono); fill: #8497ad; font-size: 11px; }
.dx svg .dx-axis { stroke: rgba(169, 190, 209, .25); stroke-width: 1; fill: none; }
.dx svg .dx-dot { fill: var(--color-accent); }
.dx svg .dx-dot-muted { fill: rgba(169, 190, 209, .35); }
.dx svg .dx-bar { fill: rgba(6, 253, 216, .75); transform-box: fill-box; transform-origin: bottom; }
.dx svg .dx-line { fill: none; stroke: #7dd3fc; stroke-width: 2; }

@media (max-width: 760px) {
    .dx { padding: 1.25rem; }
    .dx-flow ol { grid-template-columns: 1fr; gap: 1.1rem; }
    .dx-flow ol::before { left: 1.1rem; right: auto; top: 1.1rem; bottom: 1.1rem; width: 2px; height: auto; }
    .dx-flow ol::after { display: none; }
    .dx-flow li { padding: .15rem 0 0 3.1rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .dx-flow.is-playing ol::after { animation: dx-run 4.2s ease-in-out forwards; }
    .dx-flow.is-playing li::before { animation: dx-pop .5s ease-out both; animation-delay: calc(var(--i, 0) * .8s); }
    .dx-chat.is-playing .dx-msg { animation: dx-in .45s ease-out both; animation-delay: calc(var(--i, 0) * 1.1s); }
    .dx.is-playing svg .dx-dot { animation: dx-in .5s ease-out both; animation-delay: calc(var(--i, 0) * .25s); }
    .dx.is-playing svg .dx-bar { animation: dx-grow .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
    .dx.is-playing svg .dx-line { stroke-dasharray: 600; animation: dx-draw 1.4s ease-out .5s both; }
}
@keyframes dx-run { to { width: calc(100% - 2.2rem); } }
@keyframes dx-pop { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(6, 253, 216, .7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(6, 253, 216, 0); } }
@keyframes dx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dx-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }