.flow{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-gap:40px;gap:40px;align-items:start;max-width:1160px;margin:0 auto;text-align:left}.flow-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 56px minmax(0,.9fr);grid-template-rows:auto auto;grid-row-gap:56px;row-gap:56px}.flow-lines{position:absolute;inset:0;overflow:visible;pointer-events:none}.flow-col{position:relative;display:flex;flex-direction:column}.flow-col[data-col=feeds]{grid-column:1}.flow-col[data-col=converts]{grid-column:3}.flow-col--goal{grid-column:5}.flow-base ul,.flow-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.flow-col--goal ul,.flow-col[data-col=converts] ul{flex:1 1;justify-content:center}.flow-head{margin:0 0 14px;font-size:13px;font-weight:700;line-height:1.3;color:var(--muted)}.flow-node{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:#d8d8d8;font-size:16px;font-weight:700;line-height:1.25;text-decoration:none;transition:border-color .2s,color .2s,opacity .25s,box-shadow .2s,background .2s}.flow-node-arrow{color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}.flow-node.is-active,.flow-node:focus-visible,.flow-node:hover{color:var(--text);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 32px rgba(0,138,252,.18)}.flow-node.is-active .flow-node-arrow,.flow-node:focus-visible .flow-node-arrow,.flow-node:hover .flow-node-arrow{opacity:1;transform:none}.flow-node:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.flow-node.is-faded{opacity:.35}.flow-node--centre{min-height:96px;padding:20px;font-size:20px;color:var(--text);background:radial-gradient(120% 140% at 20% 0,rgba(0,138,252,.35),rgba(0,138,252,.08) 60%),var(--surface);border-color:rgba(0,138,252,.55)}.flow-base{position:relative;grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;grid-gap:20px;gap:20px}.flow-base .flow-head{margin:0}.flow-node--directs{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),var(--surface);border-style:dashed;border-color:#3a3a3a}.flow-line{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1) var(--d,0s),stroke .2s,opacity .25s,stroke-width .2s}.is-drawn .flow-line{stroke-dashoffset:0}.flow-line.is-lit{stroke:var(--accent);stroke-width:2}.flow-line.is-faded{opacity:.35}.flow-dot{fill:var(--bg);stroke:rgba(255,255,255,.4);stroke-width:1.5;opacity:0;transition:opacity .3s var(--d,0s),stroke .2s,fill .2s}.is-drawn .flow-dot{opacity:1}.flow-dot.is-lit{stroke:var(--accent);fill:var(--accent)}.flow-guide{stroke:rgba(255,255,255,.1);stroke-width:1.5;stroke-dasharray:3 6;opacity:0;transition:opacity .4s 1.9s,stroke .2s}.is-drawn .flow-guide{opacity:1}.flow-guide.is-lit{stroke:var(--accent);transition:opacity .4s,stroke .2s}.flow-head,.flow-item{opacity:0;transform:translateY(8px);transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}.is-drawn .flow-head,.is-drawn .flow-item{opacity:1;transform:none}.flow-side{position:-webkit-sticky;position:sticky;top:100px}.flow-panel{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:12px;animation:flow-in .25s ease}.flow-panel-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.flow-inbox{display:flex;flex-direction:column;justify-content:center;gap:10px;aspect-ratio:4/3;padding:24px;background:radial-gradient(120% 90% at 100% 0,rgba(0,138,252,.28),transparent 60%),#0d0d0d;border-bottom:1px solid var(--border)}.flow-inbox-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;grid-gap:12px;gap:12px;padding:12px 14px;background:#1a1a1a;border:1px solid var(--border);border-radius:10px;animation:flow-inbox-in .4s ease both;animation-delay:calc(.15s + var(--i) * .2s)}.flow-inbox-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.flow-inbox-text{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.35}.flow-inbox-text span{overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}.flow-inbox-time{color:var(--subtle);font-size:12px}@keyframes flow-inbox-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.flow-panel-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}.flow-panel-name{margin:0;font-size:20px;line-height:1.2}.flow-panel p{margin:0;color:#c4c4c4;font-size:15px;line-height:1.55}.flow-panel-link{margin-top:4px;color:var(--accent);font-weight:700;text-decoration:none}.flow-panel-link:hover{text-decoration:underline}@keyframes flow-in{0%{opacity:0}to{opacity:1}}.flow.is-compact,.is-compact .flow-map{grid-template-columns:minmax(0,1fr)}.is-compact .flow-map{grid-template-rows:none;row-gap:44px}.is-compact .flow-base,.is-compact .flow-col{grid-column:1;grid-row:auto}.is-compact .flow-col ul{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.is-compact .flow-col--goal ul{grid-template-columns:1fr}.is-compact .flow-col li:last-child:nth-child(odd){grid-column:1/-1}.is-compact .flow-base{grid-template-columns:minmax(0,1fr);gap:0}.is-compact .flow-base .flow-head{margin-bottom:14px}.is-compact .flow-head{text-align:center}.is-compact .flow-node{min-height:60px;font-size:15px}.is-compact .flow-node--centre{min-height:72px;justify-content:center;font-size:19px}.is-compact .flow-node-arrow{display:none}.flow-panel.is-inline{display:grid;grid-template-columns:112px minmax(0,1fr);margin-top:-28px}.flow-panel.is-inline.is-plain{grid-template-columns:minmax(0,1fr)}.flow-panel.is-inline .flow-panel-photo{height:100%;aspect-ratio:auto}.flow-panel.is-inline .flow-panel-body{padding:14px 16px 16px}.flow-panel.is-inline .flow-panel-name{font-size:18px}@media (prefers-reduced-motion:reduce){.flow-dot,.flow-guide,.flow-head,.flow-item,.flow-line,.flow-node,.flow-node-arrow{transition:none}.flow-line{stroke-dashoffset:0}.flow-dot,.flow-guide,.flow-head,.flow-item{opacity:1;transform:none}.flow-inbox-item,.flow-panel{animation:none}}