/* Original diagram from https://axon.leobrown.co.uk/, embedded for the portfolio. */
@font-face { font-family: AxonDiagramIcons; src: url("axon-flow-icons.woff2") format("woff2"); font-display: block; }
.axon-diagram { --text: #17212b; --muted: #667789; position: relative; overflow: hidden; border: 1px solid rgba(29,39,54,.08); border-radius: 24px; background: rgba(248,251,253,.84); box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset; font-family: Manrope, sans-serif; color: var(--text); }
.axon-diagram::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(35,34,46,.06); border-radius: 16px; pointer-events: none; }
.axon-diagram svg.flow-lines { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; }
.axon-diagram [class^="icon-"], .axon-diagram [class*=" icon-"] { font-family: AxonDiagramIcons !important; font-size: inherit; font-style: normal; -webkit-font-smoothing: antialiased; }
.axon-diagram .flow-node-card i { font-size: 20px; }
.axon-diagram .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 24px; }
.axon-diagram .brand-mark i { font-size: 42px; }
.axon-diagram .core-mark i { animation: none; }
.axon-diagram .flow-layer-rule { stroke: rgba(111, 131, 153, 0.18); stroke-width: 1; }.axon-diagram .flow-layer-copy, .axon-diagram .flow-node-card, .axon-diagram .flow-core-card { display: grid; box-sizing: border-box; font-family: Manrope, sans-serif; color: var(--text); }.axon-diagram .flow-layer-copy { gap: 4px; }.axon-diagram .flow-layer-copy span { font-size: 11.2px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(65, 86, 108, 0.82); }.axon-diagram .flow-layer-copy small { font-size: 10.08px; font-weight: 600; color: rgba(108, 124, 142, 0.78); }.axon-diagram .flow-node-card { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; min-height: 58px; padding: 8px 10px; border-radius: 18px; background: rgba(253, 254, 255, 0.94); box-shadow: rgba(52, 47, 41, 0.05) 0px 8px 18px; }.axon-diagram .flow-node-card i { grid-row: 1 / span 2; }.axon-diagram .flow-node-card div { display: grid; gap: 1px; }.axon-diagram .flow-node-card span { font-size: 13.6px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); }.axon-diagram .flow-node-card small { font-size: 10.4px; font-weight: 600; line-height: 1.2; color: rgba(84, 101, 117, 0.74); }.axon-diagram .flow-node-card-source { border: 1px solid rgba(162, 221, 216, 0.34); }.axon-diagram .flow-node-card-source i { color: rgb(35, 133, 127); }.axon-diagram .flow-node-card-output { border: 1px solid rgba(198, 224, 151, 0.26); }.axon-diagram .flow-node-card-output i { color: rgb(111, 149, 52); }.axon-diagram .flow-core-shell { fill: rgba(243, 247, 255, 0.44); stroke: rgba(79, 109, 245, 0.1); stroke-width: 1; }.axon-diagram .flow-core-card { place-items: center; height: 110px; background: transparent; }.axon-diagram .core-mark { width: 88px; height: 88px; background: transparent; border-color: transparent; box-shadow: none; }.axon-diagram .flow-core-label { font-family: Manrope, sans-serif; font-size: 16.8px; font-weight: 700; letter-spacing: 0.14em; text-anchor: middle; fill: rgb(70, 97, 221); }.axon-diagram .flow-path { fill: none; stroke-width: 3; stroke-linecap: square; stroke-linejoin: round; stroke-dasharray: 10, 12; opacity: 0.62; }.axon-diagram .flow-path-blue { stroke: url("#axon-flow-blue"); }.axon-diagram .flow-path-cyan { stroke: url("#axon-flow-cyan"); }.axon-diagram .flow-path-mint { stroke: url("#axon-flow-mint"); }.axon-diagram .flow-speed-fast { animation: 4.2s linear 0s infinite normal none running flowDash; }.axon-diagram .flow-speed-mid { animation: 6.1s linear 0s infinite normal none running flowDash; }.axon-diagram .flow-speed-slow { animation: 8.4s linear 0s infinite normal none running flowDash; }.axon-diagram .flow-station-svg { fill: rgba(255, 255, 255, 0.95); stroke: rgba(134, 214, 207, 0.72); stroke-width: 3; filter: drop-shadow(rgba(134, 214, 207, 0.16) 0px 0px 10px); }.axon-diagram .station-axon-center { fill: transparent; stroke: rgba(255, 255, 255, 0); filter: none; }.axon-diagram .station-output { stroke: rgba(158, 204, 88, 0.88); filter: drop-shadow(rgba(158, 204, 88, 0.14) 0px 0px 10px); }.axon-diagram .traffic-layer { pointer-events: none; }.axon-diagram .traffic-pulse { stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.5; filter: drop-shadow(rgba(27, 46, 63, 0.16) 0px 2px 10px); }.axon-diagram .traffic-pulse.incoming { fill: rgb(31, 156, 149); }.axon-diagram .traffic-pulse.waiting { fill: rgb(242, 108, 86); }.axon-diagram .traffic-pulse.processed { fill: rgb(127, 179, 58); }

.axon-diagram .icon-database::before { content: ""; }
.axon-diagram .icon-file-stack::before { content: ""; }
.axon-diagram .icon-scan-line::before { content: ""; }
.axon-diagram .icon-orbit::before { content: ""; }
.axon-diagram .icon-layout-dashboard::before { content: ""; }
.axon-diagram .icon-waypoints::before { content: ""; }
.axon-diagram .icon-bell-ring::before { content: ""; }
.axon-diagram .icon-toggle-right::before { content: ""; }
@keyframes flowDash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -220; } }
@media (prefers-reduced-motion: reduce) { .axon-diagram *, .axon-diagram::before, .axon-diagram::after { animation: none !important; transition: none !important; } }
.axon-flow-figure > figcaption { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; }
.axon-flow-figure > figcaption a { white-space: nowrap; }

.axon-flow-figure { scroll-margin-top: 32px; }