/* Step-by-step diagrams for core backend flows. */
.interactive-flow{margin:22px 0 26px;padding:18px;border:1px solid var(--line,#d8cfbe);border-radius:12px;background:var(--paper-2,#ece3d4);box-shadow:0 10px 26px -24px rgba(40,30,20,.55);}
.interactive-flow__eyebrow{margin:0 0 5px;color:var(--accent,#b8402e);font:700 10px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;}.interactive-flow__title{margin:0;color:var(--ink,#211e1a);font:700 20px/1.2 "Fraunces",Georgia,serif;}.interactive-flow__desc{min-height:42px;margin:10px 0 0;color:var(--ink-soft,#5b5347);line-height:1.5;}
.interactive-flow__canvas{display:grid;grid-template-columns:repeat(var(--flow-columns,4),minmax(0,1fr));gap:10px;position:relative;margin:16px 0;}.interactive-flow__node{position:relative;display:flex;align-items:center;justify-content:center;min-height:66px;padding:10px;border:1px solid var(--line-strong,#c7bca6);border-radius:9px;background:rgba(255,255,255,.25);color:var(--ink-soft,#5b5347);font:700 11px/1.35 "JetBrains Mono",ui-monospace,monospace;text-align:center;transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;}.interactive-flow__node:not(:last-child)::after{content:"→";position:absolute;right:-14px;z-index:2;color:var(--ink-faint,#8d8475);font:20px/1 sans-serif;}.interactive-flow__node.is-active{color:#fff;background:var(--accent,#b8402e);border-color:var(--accent,#b8402e);box-shadow:0 0 0 4px rgba(var(--accent-rgb,184,64,46),.13),0 8px 16px -11px rgba(40,30,20,.7);transform:translateY(-3px);}.interactive-flow__node.is-active::before{content:"";position:absolute;inset:-6px;border:1px solid rgba(var(--accent-rgb,184,64,46),.38);border-radius:12px;animation:flowPulse 1.3s ease-out infinite;}.interactive-flow__controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.interactive-flow__button{appearance:none;border:1px solid var(--line-strong,#c7bca6);border-radius:7px;background:transparent;color:var(--ink,#211e1a);padding:7px 11px;cursor:pointer;font:700 11px/1.2 "JetBrains Mono",ui-monospace,monospace;transition:background .16s ease,border-color .16s ease,color .16s ease;}.interactive-flow__button:hover{border-color:var(--accent,#b8402e);color:var(--accent,#b8402e);background:rgba(var(--accent-rgb,184,64,46),.08);}.interactive-flow__button.is-on{border-color:var(--accent,#b8402e);background:var(--accent,#b8402e);color:#fff;}.interactive-flow__step{margin-left:auto;color:var(--ink-faint,#8d8475);font:600 11px/1.2 "JetBrains Mono",ui-monospace,monospace;}.interactive-flow__button:focus-visible{outline:3px solid rgba(var(--accent-rgb,184,64,46),.3);outline-offset:2px;}
@keyframes flowPulse{from{opacity:.85;transform:scale(.96)}to{opacity:0;transform:scale(1.15)}}
@media(max-width:650px){.interactive-flow{padding:15px;}.interactive-flow__canvas{grid-template-columns:repeat(2,minmax(0,1fr));}.interactive-flow__node:not(:last-child)::after{display:none;}.interactive-flow__step{width:100%;margin-left:0;order:3;}}