.sync-demo{--beat:.47619s;--bar:calc(var(--beat) * 4);--phrase:calc(var(--bar) * 4);border:1px solid var(--border-subtle);background:radial-gradient(60% 55% at 50% 10%, #9b4dff14, transparent 70%), var(--surface);border-radius:16px;overflow:hidden}.sync-demo__bar{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.25rem;display:flex}.sync-demo__bpm{font-family:var(--font-plex-mono), ui-monospace, monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.72rem}.sync-demo__beats{gap:.5rem;display:flex}.sync-demo__beat{width:.55rem;height:.55rem;animation:sync-beat var(--bar) linear infinite;animation-delay:var(--d,0s);background:#f4f4f629;border-radius:999px}@keyframes sync-beat{0%{background:var(--foreground);box-shadow:0 0 10px #f4f4f6cc}22%,to{box-shadow:none;background:#f4f4f629}}.sync-demo__timeline{border:1px solid var(--border-subtle);background:#0a0b10;border-radius:10px;margin:1.25rem 1.25rem 0;padding:.5rem;position:relative}.sync-demo__clips{grid-template-columns:repeat(4,1fr);gap:.35rem;display:grid}.sync-demo__clip{background:color-mix(in srgb, var(--clip,var(--vibe-purple)) 24%, #101016);border:1px solid color-mix(in srgb, var(--clip,var(--vibe-purple)) 36%, transparent);min-height:2.4rem;font-family:var(--font-plex-mono), ui-monospace, monospace;letter-spacing:.08em;color:var(--muted-strong);white-space:nowrap;border-radius:6px;align-items:center;padding-inline:.55rem;font-size:.68rem;display:flex;overflow:hidden}.sync-demo__playhead{background:var(--foreground);width:2px;animation:sync-playhead var(--phrase) linear infinite;border-radius:999px;position:absolute;top:.3rem;bottom:.3rem;left:.5rem;box-shadow:0 0 12px #f4f4f68c}@keyframes sync-playhead{0%{left:.5rem}to{left:calc(100% - .5rem - 2px)}}.sync-demo__stage{grid-template-columns:repeat(6,1fr);gap:.75rem;padding:1.5rem 1.25rem 1.75rem;display:grid}@media (min-width:640px){.sync-demo__stage{grid-template-columns:repeat(12,1fr);gap:.85rem;padding:1.75rem 1.5rem 2rem}}.sync-demo__fixture{aspect-ratio:1;background:color-mix(in srgb, var(--c,var(--vibe-purple)) 12%, #0c0c12);animation:sync-bloom var(--dur,var(--bar)) linear infinite;animation-delay:var(--d,0s);border:1px solid #f4f4f612;border-radius:8px}@keyframes sync-bloom{0%{background:var(--c,var(--vibe-purple));box-shadow:0 0 22px color-mix(in srgb, var(--c,var(--vibe-purple)) 65%, transparent)}55%,to{background:color-mix(in srgb, var(--c,var(--vibe-purple)) 12%, #0c0c12);box-shadow:none}}@media (prefers-reduced-motion:reduce){.sync-demo__beat,.sync-demo__playhead,.sync-demo__fixture{animation:none}.sync-demo__playhead{display:none}.sync-demo__fixture:nth-child(3n+1){background:color-mix(in srgb, var(--c,var(--vibe-purple)) 70%, #0c0c12);box-shadow:0 0 18px color-mix(in srgb, var(--c,var(--vibe-purple)) 40%, transparent)}}