.data-flow-animation{font-family:Inter,system-ui,sans-serif;color:var(--text-primary);-webkit-font-smoothing:antialiased;--canvas:#fafafa;--canvas-card:#ffffff;--indigo:#7928CA;--indigo-glow:rgba(121,40,202,0.55);--sky:#007CF0;--sky-glow:rgba(0,124,240,0.45);--text-primary:#171717;--text-secondary:#4d4d4d;--text-muted:#888888;--text-dim:#a1a1a1;--hairline:#ebebeb;--line:rgba(0,0,0,0.08);--line-accent:rgba(121,40,202,0.22);--card-bg:#ffffff;--card-bg-soft:#fafafa;--card-border:#ebebeb;--card-border-br:rgba(121,40,202,0.28)}.data-flow-animation *{box-sizing:border-box}.data-flow-animation .stage{width:100%;max-width:1280px;aspect-ratio:16/9;position:relative;background:var(--canvas);border-radius:0;overflow:hidden}.data-flow-animation .stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 0);background-size:32px 32px;background-position:0 0;opacity:.45;pointer-events:none}.data-flow-animation .dividers{position:absolute;inset:0;pointer-events:none;z-index:3}.data-flow-animation .dividers span{position:absolute;top:7%;bottom:7%;width:0;border-left:1px dashed rgba(0,0,0,.1)}.data-flow-animation .dividers span:first-child{left:33.33%}.data-flow-animation .dividers span:last-child{left:66.66%}.data-flow-animation .grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;padding:36px 56px;z-index:2}.data-flow-animation .col{position:relative;display:flex;flex-direction:column}.data-flow-animation .step-label{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--text-primary)}.data-flow-animation .step-num{width:24px;height:24px;border-radius:50%;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--text-secondary);background:var(--canvas-card)}.data-flow-animation .col-sources .col-top{margin-bottom:32px}.data-flow-animation .sources-wrap{flex:1 1;display:flex;flex-direction:column;justify-content:center;gap:56px;padding-right:16px}.data-flow-animation .source-block{display:grid;grid-template-columns:64px 1fr;grid-gap:18px;gap:18px;align-items:start}.data-flow-animation .source-icon{width:60px;height:60px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--indigo);box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.04)}.data-flow-animation .source-icon svg{width:28px;height:28px}.data-flow-animation .source-info{padding-top:6px}.data-flow-animation .source-name{font-size:18px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em;color:var(--text-primary)}.data-flow-animation .source-detail{font-size:13px;color:var(--text-muted);line-height:1.65;font-weight:400}.data-flow-animation .realtime-tag{position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.3em;color:var(--text-muted);font-weight:700;pointer-events:none;text-shadow:none}.data-flow-animation .col-hub{align-items:center}.data-flow-animation .hub-top{position:absolute;left:50%;transform:translateX(-50%);top:36px}.data-flow-animation .hub-stack{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:22px}.data-flow-animation .hub-card{width:124px;height:124px;background:linear-gradient(180deg,rgba(30,43,59,.85),rgba(15,23,42,.85));border:1px solid rgba(99,102,241,.4);border-radius:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 64px rgba(99,102,241,.24),0 0 32px rgba(56,189,248,.12),inset 0 0 28px rgba(99,102,241,.08),0 8px 24px rgba(0,0,0,.45);position:relative;z-index:4;animation:hubPulse 4s ease-in-out infinite;overflow:hidden}@keyframes hubPulse{0%,to{box-shadow:0 0 64px rgba(99,102,241,.24),0 0 32px rgba(56,189,248,.12),inset 0 0 28px rgba(99,102,241,.08),0 8px 24px rgba(0,0,0,.45)}50%{box-shadow:0 0 96px rgba(99,102,241,.4),0 0 48px rgba(56,189,248,.2),inset 0 0 32px rgba(99,102,241,.14),0 8px 24px rgba(0,0,0,.45)}}.data-flow-animation .hub-mark{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.data-flow-animation .hub-mark img{width:100%;height:100%;object-fit:contain;display:block}.data-flow-animation .hub-detail{width:220px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:14px 16px;z-index:4;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04)}.data-flow-animation .hub-detail-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--indigo);margin-bottom:10px;font-weight:700}.data-flow-animation .hub-detail-item{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-secondary);padding:3px 0}.data-flow-animation .hub-detail-item svg{width:13px;height:13px;color:var(--indigo);flex-shrink:0}.data-flow-animation .col-targets .col-top{display:flex;justify-content:flex-end;margin-bottom:24px}.data-flow-animation .targets-wrap{flex:1 1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding-left:24px}.data-flow-animation .target-item{display:flex;align-items:center;gap:12px;padding:8px 18px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:999px;font-size:14px;color:var(--text-primary);font-weight:500;letter-spacing:-.005em;position:relative;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.04)}.data-flow-animation .target-icon{width:16px;height:16px;color:var(--indigo);display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.data-flow-animation .target-icon svg{width:16px;height:16px;display:block}.data-flow-animation .flows{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}.data-flow-animation .flow-path{fill:none;stroke:var(--line);stroke-width:1.2}.data-flow-animation .particle-sky{fill:var(--sky);filter:drop-shadow(0 0 6px var(--sky-glow))}.data-flow-animation .particle-indigo{fill:var(--indigo);filter:drop-shadow(0 0 6px var(--indigo-glow))}@media (max-width:900px){.data-flow-animation .stage{aspect-ratio:16/11}.data-flow-animation .grid{padding:22px 28px}.data-flow-animation .source-name{font-size:16px}.data-flow-animation .source-icon{width:52px;height:52px;border-radius:12px}.data-flow-animation .source-icon svg{width:24px;height:24px}.data-flow-animation .source-block{grid-template-columns:56px 1fr;gap:14px}.data-flow-animation .target-item{font-size:12px;padding:7px 14px;gap:10px}.data-flow-animation .target-icon,.data-flow-animation .target-icon svg{width:14px;height:14px}.data-flow-animation .hub-card{width:100px;height:100px;border-radius:20px}.data-flow-animation .hub-mark{width:78px;height:78px}.data-flow-animation .hub-detail{width:180px;padding:12px 14px}.data-flow-animation .hub-detail-title{font-size:9px;margin-bottom:8px}.data-flow-animation .hub-detail-item{font-size:11.5px}.data-flow-animation .sources-wrap{gap:42px;padding-right:8px}.data-flow-animation .realtime-tag{font-size:10px;letter-spacing:.25em;left:56%}.data-flow-animation .step-label{font-size:11px}}@media (max-width:600px){.data-flow-animation .stage{aspect-ratio:auto;min-height:auto;height:auto;border-radius:14px}.data-flow-animation .stage:before{background-size:24px 24px}.data-flow-animation .dividers,.data-flow-animation .realtime-tag{display:none}.data-flow-animation .grid{position:relative;inset:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 18px;row-gap:56px}.data-flow-animation .col{align-items:center;width:100%}.data-flow-animation .col-top{display:flex;justify-content:center;width:100%}.col-sources .col-top,.data-flow-animation .col-targets .col-top{justify-content:center;margin-bottom:22px}.data-flow-animation .sources-wrap{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:20px;padding-right:0;flex:none;width:100%}.data-flow-animation .source-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;grid-template-columns:none;max-width:160px;flex:0 1 auto}.data-flow-animation .source-icon{width:56px;height:56px}.data-flow-animation .source-icon svg{width:26px;height:26px}.data-flow-animation .source-info{padding-top:0;text-align:center}.data-flow-animation .source-name{font-size:15px;margin-bottom:4px}.data-flow-animation .source-detail{font-size:11.5px;line-height:1.55}.data-flow-animation .col-hub{align-items:center}.data-flow-animation .hub-top{position:static;transform:none;left:auto;top:auto;bottom:auto;margin-bottom:18px}.data-flow-animation .hub-stack{margin:0;gap:18px;width:100%;align-items:center}.data-flow-animation .hub-card{width:104px;height:104px;border-radius:20px}.data-flow-animation .hub-mark{width:82px;height:82px}.data-flow-animation .hub-detail{width:100%;max-width:320px;padding:12px 16px}.data-flow-animation .hub-detail-title{font-size:9.5px}.data-flow-animation .hub-detail-item{font-size:12px}.data-flow-animation .targets-wrap{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding-left:0;width:100%;max-width:380px;margin:0 auto}.data-flow-animation .target-item{font-size:12.5px;padding:8px 14px;gap:8px;flex:0 0 auto}.data-flow-animation .target-icon,.data-flow-animation .target-icon svg{width:14px;height:14px}}@media (max-width:380px){.data-flow-animation .grid{padding:22px 16px}.data-flow-animation .source-name{font-size:15px}.data-flow-animation .target-item{font-size:12px;padding:8px 14px}.data-flow-animation .hub-detail-item{font-size:11.5px}}