.persona-flow{--bg: #0a0a14;--bg-elev: #14141f;--text: #e2e8f0;--muted: #94a3b8;--dim: #64748b;--border: #1f2937;--border-hi: #334155;--violet: #a78bfa;--violet-hi: #c4b5fd;--green: #4ade80;--red: #f87171;--amber: #fbbf24;& *{box-sizing:border-box}.scenario{border:1px solid var(--border);background:var(--bg-elev);border-radius:.7rem;padding:1rem 1.2rem;margin-bottom:1rem;display:flex;gap:.85rem;align-items:flex-start;color:var(--text);font-size:.92rem;line-height:1.55}.scenario-icon{width:2rem;height:2rem;flex-shrink:0;border-radius:.4rem;background:#a78bfa26;color:var(--violet-hi);display:flex;align-items:center;justify-content:center;font-size:1rem}.scenario code{color:var(--violet-hi);font-family:ui-monospace,monospace;font-size:.85rem}.scenario strong{color:var(--text)}.stage{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.25rem}.diagram-wrap{border:1px solid var(--border);border-radius:.7rem;background:radial-gradient(at 50% 0%,rgba(167,139,250,.04),transparent 50%),var(--bg-elev);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem}.diagram-wrap svg{width:100%;height:auto;display:block}.actor rect,.actor circle{fill:var(--bg);stroke:var(--border-hi);stroke-width:1.8;transition:stroke .3s,fill .3s}.actor text{fill:var(--muted);font-size:24px;font-family:ui-sans-serif;text-anchor:middle;font-weight:600;transition:fill .3s;pointer-events:none}.actor.active rect,.actor.active circle{stroke:var(--violet);fill:#a78bfa12}.actor.active text{fill:var(--text)}.actor.success rect,.actor.success circle{stroke:var(--green);fill:#22c55e12}.actor.success text{fill:var(--text)}.actor .sub{font-size:18px;font-family:ui-monospace,monospace;fill:var(--dim)}.actor.active .sub{fill:var(--violet-hi)}.actor.success .sub{fill:var(--green)}.actor.outcome rect{stroke-dasharray:6 4}.actor.hosted rect{stroke:var(--amber);stroke-width:3;fill:#fbbf240f}.actor.hosted text{fill:#fde68a}.actor.hosted .sub{fill:#fcd34dd9}.actor.hosted.active rect{fill:#fbbf241f}.actor.hosted.success rect{fill:#fbbf241a}.price-tag rect{fill:#fbbf242e;stroke:#fbbf2499;stroke-width:1.5}.price-tag text{fill:#fde68a;font-size:16px;font-family:ui-monospace,monospace;font-weight:700;text-anchor:middle}.fan-chip rect{fill:var(--bg);stroke:var(--border-hi);stroke-width:1.5;transition:stroke .3s,fill .3s}.fan-chip text{fill:var(--muted);font-size:16px;font-family:ui-monospace,monospace;text-anchor:middle;font-weight:600}.fan-chip.active rect{stroke:var(--violet);fill:#a78bfa14}.fan-chip.active text{fill:var(--text)}.fan-chip.success rect{stroke:var(--green);fill:#22c55e14}.fan-chip.success text{fill:var(--text)}.fan-line{stroke:var(--border-hi);stroke-width:1.5;fill:none;transition:stroke .3s;opacity:.7}.fan-line.active{stroke:var(--violet);opacity:1}.fan-line.success{stroke:var(--green);opacity:1}.arrow{stroke:var(--border-hi);stroke-width:2.2;fill:none;transition:stroke .3s,stroke-width .3s}.arrow.active{stroke:var(--violet);stroke-width:3.2}.arrow.success{stroke:var(--green);stroke-width:3.2}.ahd-default{fill:var(--border-hi);transition:fill .3s}.label{fill:var(--dim);font-size:22px;font-family:ui-monospace,monospace;transition:fill .3s;font-weight:600}.label.active{fill:var(--violet-hi)}.label.success{fill:var(--green)}.narration{border:1px solid var(--border);border-radius:.7rem;background:var(--bg-elev);padding:1.1rem 1.25rem;display:flex;flex-direction:column}.narration-step{font-size:.7rem;font-family:ui-monospace,monospace;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}.narration-title{font-size:1.02rem;font-weight:700;color:var(--text);margin-bottom:.55rem;text-wrap:balance}.narration-body{font-size:.86rem;color:var(--muted);line-height:1.55;flex:1;margin-bottom:1rem}.narration-body code{color:var(--violet-hi);font-family:ui-monospace,monospace;font-size:.8rem}.narration-body strong{color:var(--text)}.progress-bar{margin-bottom:.85rem;height:3px;background:#a78bfa1a;border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--violet);transition:width .4s ease;width:0%}.controls{display:flex;gap:.5rem;flex-wrap:wrap}.ctrl{padding:.5rem .85rem;background:transparent;color:var(--text);border:1px solid var(--border-hi);border-radius:.4rem;font-size:.85rem;cursor:pointer;font-weight:600;transition:background .15s,border-color .15s}.ctrl:hover{border-color:var(--violet);background:#a78bfa0d}.ctrl-primary{background:var(--violet);color:#000;border-color:var(--violet)}.ctrl-primary:hover{background:var(--violet-hi);border-color:var(--violet-hi)}}