.platform-hub-hero-animation{width:100%}.platform-hub-hero-animation .diagram{width:min(960px,100%);height:660px;margin:0 auto;position:relative;overflow:hidden}.platform-hub-hero-animation .diagram:before{content:"";background:radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent);pointer-events:none;width:min(460px,92%);height:min(340px,58%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.platform-hub-hero-animation .wires{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.platform-hub-hero-animation .wire-base{stroke:var(--color-border);stroke-width:2px;fill:none;stroke-linecap:round}.platform-hub-hero-animation .wire-trail{fill:none;stroke-width:3px;stroke-linecap:round}.platform-hub-hero-animation .bubble{border:1px solid var(--color-border);background:var(--color-card);z-index:10;border-radius:9999px;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:0 1px 2px #0000000d}.platform-hub-hero-animation .hub{border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);width:96px;height:96px;box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 1px 2px 0 #0000000d;top:50%;left:50%;transform:translate(-50%,-50%)}.platform-hub-hero-animation .platforms{z-index:10;grid-template-columns:repeat(8,auto);justify-content:center;place-items:center;gap:clamp(14px,3vw,22px) clamp(18px,5vw,64px);width:100%;padding:0 8px;display:grid;position:absolute;top:80%;left:0;right:0;transform:translateY(-50%)}.platform-hub-hero-animation .platform-bubble{border:1px solid var(--color-border);background:var(--color-card);border-radius:9999px;justify-content:center;align-items:center;width:48px;height:48px;display:flex;position:relative;box-shadow:0 1px 2px #0000000d}.platform-hub-hero-animation .platform-bubble svg{width:20px;height:20px}.platform-hub-hero-animation .post-card{border:1px solid var(--color-border);background:var(--color-card);z-index:20;pointer-events:none;will-change:transform, opacity;border-radius:12px;width:164px;padding:10px;position:absolute;top:0;left:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.platform-hub-hero-animation .pc-head{align-items:center;gap:7px;margin-bottom:8px;display:flex}.platform-hub-hero-animation .pc-avatar{border-radius:9999px;flex-shrink:0;width:18px;height:18px}.platform-hub-hero-animation .pc-bars i{background:#e2e8f0;border-radius:9999px;height:5px;display:block}.platform-hub-hero-animation .pc-bars i+i{background:#f1f5f9;margin-top:4px}.platform-hub-hero-animation .pc-media{border-radius:8px;justify-content:center;align-items:center;height:54px;margin-bottom:8px;display:flex;position:relative;overflow:hidden}.platform-hub-hero-animation .pc-media svg{opacity:.85;width:18px;height:18px}.platform-hub-hero-animation .pc-play{background:#ffffff4d;border-radius:9999px;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.platform-hub-hero-animation .pc-play svg{opacity:1;width:10px;height:10px;margin-left:1px}.platform-hub-hero-animation .pc-duration{color:#fff;font-variant-numeric:tabular-nums;background:#00000073;border-radius:4px;padding:1.5px 4px;font-size:8.5px;font-weight:600;line-height:1;position:absolute;top:5px;right:5px}.platform-hub-hero-animation .pc-scrubber{background:#fff6;border-radius:9999px;height:3px;position:absolute;bottom:5px;left:6px;right:6px;overflow:hidden}.platform-hub-hero-animation .pc-scrubber i{background:#fff;border-radius:9999px;height:100%;display:block}.platform-hub-hero-animation .pc-line{background:#e2e8f0;border-radius:9999px;height:5px}.platform-hub-hero-animation .pc-line+.pc-line{background:#f1f5f9;margin-top:5px}.platform-hub-hero-animation .orb{width:20px;height:20px;box-shadow:0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);z-index:20;pointer-events:none;will-change:transform, opacity;border:2px solid #fff;border-radius:7px;position:absolute;top:0;left:0}.platform-hub-hero-animation .ripple{border:2px solid var(--color-primary);z-index:5;pointer-events:none;border-radius:9999px;width:96px;height:96px;position:absolute;top:0;left:0}.platform-hub-hero-animation .chip{border:1px solid var(--color-border);background:var(--color-card);font-family:var(--font-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--color-foreground);white-space:nowrap;z-index:30;pointer-events:none;border-radius:9999px;align-items:center;gap:6px;padding:5px 11px;font-size:11.5px;font-weight:500;display:inline-flex;position:absolute;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.platform-hub-hero-animation .chip [data-ph-icon]{flex-shrink:0;display:inline-flex}.platform-hub-hero-animation .chip svg{width:12px;height:12px}.platform-hub-hero-animation .chip .views-num{color:var(--color-primary);font-weight:600}.platform-hub-hero-animation .hub-chip{opacity:0;max-width:94%;top:62%;left:50%;transform:translate(-50%)}.platform-hub-hero-animation .hub-chip [data-ph-icon]{color:var(--color-success)}.platform-hub-hero-animation .stats{border:1px solid var(--color-border);background:var(--color-card);max-width:calc(100% - 24px);color:var(--color-muted-foreground);z-index:10;border-radius:9999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;padding:9px 20px;font-size:12.5px;display:inline-flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 1px 2px #0000000d}.platform-hub-hero-animation .stats.stats--wrapped{box-shadow:none;background:0 0;border:none;padding-top:16px;transform:translate(-50%)translateY(8px)}.platform-hub-hero-animation .stats.stats--wrapped .sep{display:none}.platform-hub-hero-animation .stats .stat{white-space:nowrap;align-items:center;gap:7px;display:inline-flex}.platform-hub-hero-animation .stats [data-ph-icon]{color:var(--color-primary);display:inline-flex}.platform-hub-hero-animation .stats svg{width:14px;height:14px}.platform-hub-hero-animation .stats .num{font-family:var(--font-mono);color:var(--color-foreground);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.platform-hub-hero-animation .stats .num.views{color:var(--color-primary)}.platform-hub-hero-animation .stats .sep{background:var(--color-border);border-radius:9999px;width:4px;height:4px}@media (max-width:768px){.platform-hub-hero-animation .diagram{height:600px}.platform-hub-hero-animation .stats.stats--wrapped{padding:28px 0 0}}@media (max-width:680px){.platform-hub-hero-animation .platforms{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,4vw,22px) clamp(18px,5vw,32px);display:flex}}@media (max-width:560px){.platform-hub-hero-animation .diagram{height:560px}.platform-hub-hero-animation .post-card{border-radius:11px;width:128px;padding:8px}.platform-hub-hero-animation .pc-head{gap:6px;margin-bottom:7px}.platform-hub-hero-animation .pc-avatar{width:16px;height:16px}.platform-hub-hero-animation .pc-media{height:44px;margin-bottom:7px}.platform-hub-hero-animation .platform-bubble{width:44px;height:44px}.platform-hub-hero-animation .platform-bubble svg{width:19px;height:19px}}@media (max-width:450px){.platform-hub-hero-animation .diagram{height:520px}.platform-hub-hero-animation .post-card{border-radius:10px;width:96px;padding:7px}.platform-hub-hero-animation .pc-head{gap:5px;margin-bottom:6px}.platform-hub-hero-animation .pc-avatar{width:14px;height:14px}.platform-hub-hero-animation .pc-bars i{height:4px}.platform-hub-hero-animation .pc-media{border-radius:6px;height:36px;margin-bottom:6px}.platform-hub-hero-animation .pc-media svg{width:15px;height:15px}.platform-hub-hero-animation .pc-play{width:17px;height:17px}.platform-hub-hero-animation .pc-play svg{width:8px;height:8px}.platform-hub-hero-animation .pc-duration{padding:1px 3px;font-size:7px;top:4px;right:4px}.platform-hub-hero-animation .pc-scrubber{height:2px;bottom:4px}.platform-hub-hero-animation .pc-line{height:4px}.platform-hub-hero-animation .platform-bubble{width:40px;height:40px}.platform-hub-hero-animation .platform-bubble svg{width:17px;height:17px}.platform-hub-hero-animation .chip{gap:5px;padding:4px 9px;font-size:10.5px}.platform-hub-hero-animation .chip svg{width:11px;height:11px}.platform-hub-hero-animation .stats{gap:10px;padding:8px 14px;font-size:11px}.platform-hub-hero-animation .stats.stats--wrapped{padding:128px 0 0}.platform-hub-hero-animation .stats .num{font-size:11.5px}}@media (prefers-reduced-motion:reduce){.platform-hub-hero-animation .wire-trail{display:none}}