.csa-mermaid-wrap{flex-direction:column;align-items:center;width:100%;max-width:900px;margin:0 auto 2rem;display:flex}.csa-mermaid-wrap .mermaid{justify-content:center;width:100%;display:flex}.csa-mermaid-wrap .mermaid svg{max-width:100%;height:auto}.csa-flow-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:900px;margin:0 auto 3rem;padding:2rem;position:relative;box-shadow:0 4px 6px #0000001a}.csa-flow-controls-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.csa-flow-controls{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.csa-flow-btn{font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:20px;padding:8px 16px;font-size:.85rem;transition:all .2s}.csa-flow-btn:hover{color:var(--text-hi);border-color:var(--border2)}.csa-flow-btn.active{color:#00e5ff;background:#00b0ff26;border-color:#00b0ff;box-shadow:0 0 12px #00b0ff4d}.csa-playback-controls{background:var(--surface2);border:1px solid var(--border);border-radius:8px;align-items:center;gap:4px;padding:2px;display:flex}.csa-ctrl-btn{width:28px;height:28px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex}.csa-ctrl-btn:hover{color:var(--text-hi)}.csa-ctrl-btn.playing{color:#00e5ff;background:#00b0ff26}.csa-ctrl-divider{background:var(--border2);width:1px;height:14px;margin:0 4px}.csa-diagram{flex-direction:column;align-items:center;width:100%;margin-bottom:1.5rem;display:flex;position:relative}.csa-diagram-header{text-align:center;margin-bottom:2rem}.csa-diagram-title{font-family:var(--font-outfit);color:var(--text-hi);text-align:center;margin-bottom:2rem;font-size:1.3rem}.csa-diagram-subtitle{color:var(--text-dim);font-size:.9rem}.csa-nodes-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:0;width:100%;margin:1.5rem 0;display:flex}.csa-node{background:var(--surface2);border:2px solid var(--border);width:110px;min-height:110px;font-family:var(--font-hero);z-index:2;text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;padding:.8rem;font-size:.8rem;font-weight:700;transition:all .3s;display:flex;position:relative}.csa-node-emoji{font-size:1.6rem;line-height:1}.csa-node-label{color:var(--text-hi);margin-top:.2rem}.csa-node-sublabel{font-family:var(--font-mono);color:var(--text-dim);font-size:.65rem;font-weight:400}.csa-node.active{background:#00b0ff0f;border-color:#00b0ff;transform:scale(1.06);box-shadow:0 0 22px #00b0ff59}.csa-node.processing{border-color:var(--purple);background:#7c4dff0d;box-shadow:0 0 20px #7c4dff4d}.csa-node.success{border-color:var(--green);background:#3effa30d;box-shadow:0 0 20px #3effa34d}.csa-node.error{border-color:var(--pink);background:#ff6b9d0d;box-shadow:0 0 20px #ff6b9d4d}.csa-node-badge{font-family:var(--font-mono);white-space:nowrap;pointer-events:none;z-index:10;border-radius:20px;padding:.25rem .7rem;font-size:.65rem;font-weight:800;animation:.35s cubic-bezier(.175,.885,.32,1.275) forwards csa-badge-pop;position:absolute;top:-1.8rem;left:50%;transform:translate(-50%)}.csa-node-badge.cyan{color:#00b0ff;background:#051a2e;border:1px solid #00b0ff;box-shadow:0 4px 12px #00b0ff4d}.csa-node-badge.purple{border:1px solid var(--purple);color:var(--purple);background:#7c4dff1f;box-shadow:0 4px 12px #7c4dff4d}.csa-node-badge.green{border:1px solid var(--green);color:var(--green);background:#3effa31f;box-shadow:0 4px 12px #3effa34d}@keyframes csa-badge-pop{0%{opacity:0;transform:translate(-50%)translateY(8px)scale(.8)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.csa-connection{background:var(--border);flex:1;min-width:40px;max-width:140px;height:2px;position:relative}.csa-connection:after{content:"▶";color:var(--border);font-size:10px;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.csa-connection.lit{background:#00b0ff}.csa-connection.lit:after{color:#00b0ff}.csa-connection.lit-back{background:var(--purple)}.csa-connection.lit-back:after{color:var(--purple)}.csa-connection.lit-green{background:var(--green)}.csa-connection.lit-green:after{color:var(--green)}.csa-packet{border-radius:50%;width:11px;height:11px;position:absolute;top:-4px;left:0}.csa-packet.fwd{background:#00b0ff;animation:.75s ease-in-out forwards csa-pkt-fwd;box-shadow:0 0 10px #00b0ff}.csa-packet.bwd{background:var(--purple);box-shadow:0 0 10px var(--purple);animation:.75s ease-in-out forwards csa-pkt-bwd}.csa-packet.green{background:var(--green);box-shadow:0 0 10px var(--green);animation:.75s ease-in-out forwards csa-pkt-fwd}@keyframes csa-pkt-fwd{0%{left:0}to{left:100%}}@keyframes csa-pkt-bwd{0%{left:100%}to{left:0}}.csa-progress-block{border:1px solid var(--border);background:#0003;border-radius:14px;width:100%;margin-top:1.5rem;padding:1.2rem}.csa-progress-row{justify-content:space-between;align-items:center;margin-bottom:.8rem;display:flex}.csa-step-text{font-family:var(--font-hero);color:var(--text-hi);font-size:1rem;font-weight:600}.csa-step-counter{font-family:var(--font-mono);color:var(--text-dim);font-size:.8rem}.csa-bar-wrap{background:var(--surface);border-radius:10px;height:6px;overflow:hidden}.csa-bar-fill{background:linear-gradient(90deg,#00b0ff,var(--purple));height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.csa-rating{gap:4px;display:flex}.csa-dot{background:var(--border);border-radius:50%;width:8px;height:8px}.csa-dot.on{background:#00b0ff;box-shadow:0 0 8px #00b0ff}@media (max-width:768px){.csa-nodes-row{flex-direction:column;gap:1rem}.csa-connection{flex:none;width:2px;min-width:2px;max-width:2px;height:36px}.csa-connection:after{inset:auto auto -5px 50%;transform:translate(-50%)rotate(90deg)}}[data-theme=light] .csa-flow-section{--bg:#080b10;--surface:#0e1219;--surface2:#151c27;--border:#1e2a3a;--border2:#253040;--text:#c9d3e0;--text-dim:#5a6a7e;--text-hi:#eef2f8;--cyan:#00e5ff;--purple:#b985f4;--green:#3effa3;--dim:#1e1e2e;background:#12161f;border-color:#1e2a3a;box-shadow:0 4px 6px #00000026}[data-theme=light] .csa-mermaid-wrap{--bg:#080b10;--surface:#0e1219;--surface2:#151c27;--border:#1e2a3a;--border2:#253040;--text:#c9d3e0;--text-dim:#5a6a7e;--text-hi:#eef2f8;--cyan:#00e5ff;--purple:#b985f4;--green:#3effa3;--dim:#1e1e2e;background:#12161f;border:1px solid #1e2a3a;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #00000026}