.sync-demo{--demo-accent:var(--blue);position:relative}.sync-network{min-height:15rem;position:relative}.sync-network-lines{z-index:1;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.sync-network-path{fill:none;stroke:color-mix(in srgb, var(--demo-accent) 60%, transparent);stroke-width:.35px;vector-effect:non-scaling-stroke}.sync-packet{z-index:2;background:var(--demo-accent);width:.55rem;height:.55rem;box-shadow:0 0 10px color-mix(in srgb, var(--demo-accent) 30%, transparent);border-radius:9999px;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}.sync-packet:before{content:"";width:1.7rem;height:1px;transform:translateY(-50%) rotate(var(--sync-trail-angle,0deg));transform-origin:0;background:linear-gradient(90deg, color-mix(in srgb, var(--demo-accent) 90%, transparent) 0%, color-mix(in srgb, var(--demo-accent) 50%, transparent) 28%, color-mix(in srgb, var(--demo-accent) 12%, transparent) 72%, transparent 100%);opacity:.95;border-radius:9999px;position:absolute;top:50%;left:50%}.sync-packet-1{--sync-trail-angle:var(--sync-trail-angle-1,-37deg);animation:2.6s linear infinite sync-packet-1}.sync-packet-2{--sync-trail-angle:var(--sync-trail-angle-2,170deg);animation:2.6s linear .8s infinite sync-packet-2}.sync-packet-3{--sync-trail-angle:var(--sync-trail-angle-3,-129deg);animation:2.6s linear 1.6s infinite sync-packet-3}.sync-packet-in{opacity:.82}.sync-packet-in-1{--sync-trail-angle:calc(var(--sync-trail-angle-1,-37deg) + 180deg);animation:2.9s linear .45s infinite sync-packet-in-1}.sync-packet-in-2{--sync-trail-angle:calc(var(--sync-trail-angle-2,170deg) + 180deg);animation:2.9s linear 1.15s infinite sync-packet-in-2}.sync-packet-in-3{--sync-trail-angle:calc(var(--sync-trail-angle-3,-129deg) + 180deg);animation:2.9s linear 1.8s infinite sync-packet-in-3}.sync-center{z-index:2;width:7rem;height:7rem;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}.sync-core{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.sync-cloud{width:4rem;height:4rem;color:color-mix(in srgb, var(--demo-accent) 74%, var(--foreground));background:color-mix(in srgb, var(--demo-accent) 14%, var(--background));border:1px solid color-mix(in srgb, var(--demo-accent) 36%, transparent);z-index:3;border-radius:9999px;justify-content:center;align-items:center;display:flex;position:relative}.sync-cloud:before{content:"";border:1px solid color-mix(in srgb, var(--demo-accent) 16%, transparent);border-radius:9999px;position:absolute;inset:-.9rem}.sync-cloud:after{content:"";border:1px solid color-mix(in srgb, var(--demo-accent) 34%, transparent);border-radius:9999px;animation:2.8s ease-out infinite sync-halo;position:absolute;inset:-.45rem}.sync-node{z-index:2;width:1rem;height:1rem;position:absolute}.sync-node-1{top:58.33%;left:12%;transform:translate(-50%,-50%)}.sync-node-2{top:23.33%;left:88%;transform:translate(-50%,-50%)}.sync-node-3{top:76.67%;left:88%;transform:translate(-50%,-50%)}.sync-node-core{background:var(--demo-accent);width:.95rem;height:.95rem;box-shadow:0 0 0 .35rem color-mix(in srgb, var(--demo-accent) 12%, transparent), 0 0 18px color-mix(in srgb, var(--demo-accent) 28%, transparent);border-radius:9999px;display:block;position:relative}.sync-node-core:after{content:"";border:1px solid color-mix(in srgb, var(--demo-accent) 36%, transparent);border-radius:9999px;animation:2.6s ease-out infinite sync-node-pulse;position:absolute;inset:-.35rem}.sync-node-label{color:color-mix(in srgb, var(--foreground) 84%, var(--background));letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-size:.7rem;font-weight:600;position:absolute;top:calc(100% + .55rem);left:50%;transform:translate(-50%)}.sync-status-strip{z-index:4;gap:.55rem;display:flex;position:absolute;bottom:.1rem;left:50%;transform:translate(-50%)}.sync-status-item{color:var(--foreground);background:color-mix(in srgb, var(--foreground) 4%, var(--background));border:1px solid var(--color-border);white-space:nowrap;border-radius:9999px;align-items:center;gap:.45rem;padding:.34rem .58rem;font-size:.64rem;font-weight:500;display:inline-flex}.sync-status-item-muted{color:var(--color-muted-foreground)}.sync-status-pulse{background:var(--green);border-radius:9999px;width:.42rem;height:.42rem}.encryption-demo{--demo-accent:var(--green);--demo-accent-lead:color-mix(in srgb, var(--green) 82%, var(--foreground))}.encryption-demo:after{content:"";background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--demo-accent) 8%, transparent) 24%, color-mix(in srgb, var(--demo-accent-lead) 12%, transparent) 50%, color-mix(in srgb, var(--demo-accent) 8%, transparent) 76%, transparent 100%);opacity:.18;z-index:1;pointer-events:none;height:2.1rem;animation:6.8s ease-in-out infinite encryption-sweep;position:absolute;top:0;left:0;right:0;transform:translateY(-140%)}.encryption-canvas{z-index:0;opacity:.68;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.encryption-flow{z-index:1;pointer-events:none;width:11rem;height:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.encryption-flow-horizontal{width:12rem}.encryption-flow-diagonal{opacity:.58;width:10rem;transform:translate(-50%,-50%)rotate(-28deg)}.encryption-flow-line{background:color-mix(in srgb, var(--demo-accent) 30%, transparent);opacity:.28;border-radius:9999px;height:2px;position:absolute;inset:50% 0 auto;transform:translateY(-50%)}.encryption-flow-line:before{content:"";border-radius:inherit;background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--demo-accent) 20%, transparent) 0, color-mix(in srgb, var(--demo-accent) 20%, transparent) .5rem, transparent .5rem, transparent 1.05rem);opacity:.42;position:absolute;inset:0}.encryption-flow-line:after{content:"";border-radius:inherit;background:color-mix(in srgb, var(--demo-accent) 24%, transparent);position:absolute;inset:0 38%}.encryption-flow-packet{background:var(--demo-accent-lead);border:1px solid color-mix(in srgb, var(--demo-accent) 56%, transparent);border-radius:9999px;width:.92rem;height:.3rem;animation:4.2s linear infinite encryption-flow;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}.encryption-flow-packet:before{content:"";background:color-mix(in srgb, var(--demo-accent) 18%, var(--background));border-radius:9999px;width:.2rem;height:.2rem;position:absolute;top:50%;left:.14rem;transform:translateY(-50%)}.encryption-flow-packet:after{content:"";background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--demo-accent) 18%, transparent) 28%, color-mix(in srgb, var(--demo-accent) 56%, transparent) 75%, color-mix(in srgb, var(--demo-accent-lead) 70%, transparent) 100%);opacity:.68;border-radius:9999px;width:1.4rem;height:2px;position:absolute;top:50%;right:100%;transform:translateY(-50%)}.encryption-flow-packet-b{background:color-mix(in srgb, var(--demo-accent) 74%, var(--background));opacity:.78;width:.55rem;height:.24rem;animation-duration:4.8s;animation-delay:1.7s}.encryption-flow-diagonal .encryption-flow-line{opacity:.22}.encryption-flow-diagonal .encryption-flow-packet{opacity:.82;width:.74rem;height:.26rem;animation-duration:5.1s}.encryption-ring{width:var(--encryption-ring-size);height:var(--encryption-ring-size);border:1px solid color-mix(in srgb, var(--demo-accent) 40%, transparent);z-index:1;border-radius:9999px;position:absolute;top:50%;left:50%;translate:-50% -50%}.encryption-ring-outer{--encryption-ring-size:10.5rem;opacity:.72}.encryption-ring-inner{--encryption-ring-size:7.4rem;opacity:.58;transform-origin:50%;border-style:dashed;animation:28s linear infinite encryption-ring-spin}.encryption-lock{z-index:10;background:color-mix(in srgb, var(--demo-accent) 14%, var(--background));border:1px solid color-mix(in srgb, var(--demo-accent) 36%, transparent);width:4.5rem;height:4.5rem;color:var(--demo-accent-lead);border-radius:9999px;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.encryption-particles{z-index:2;position:absolute;inset:0}.encryption-particle{background:color-mix(in srgb, var(--demo-accent) 74%, var(--background));border-radius:9999px;width:.5rem;height:.5rem;animation:3s ease-in-out infinite particle-float;position:absolute}.encryption-particle:first-child{top:18%;left:24%}.encryption-particle:nth-child(2){top:28%;right:22%}.encryption-particle:nth-child(3){bottom:24%;left:28%}.encryption-particle:nth-child(4){bottom:18%;right:18%}.encryption-particle:nth-child(5){top:50%;left:12%}.encryption-particle:nth-child(6){top:42%;right:10%}.encryption-particle:nth-child(7){top:14%;left:52%}.keys-demo{--demo-accent:var(--yellow)}.key-copy span:first-child{color:var(--foreground)}.connect-demo{--demo-accent:var(--cyan)}.connect-cursor{background:var(--foreground);width:2px;height:1rem;animation:1s step-end infinite terminal-blink}.command-demo-cursor{animation:1s step-end infinite terminal-blink}@keyframes sync-packet-1{0%{opacity:0;top:30%;left:50%}12%{opacity:1}88%{opacity:1;top:58.33%;left:12%}to{opacity:0;top:58.33%;left:12%}}@keyframes sync-packet-2{0%{opacity:0;top:30%;left:50%}12%{opacity:1}88%{opacity:1;top:23.33%;left:88%}to{opacity:0;top:23.33%;left:88%}}@keyframes sync-packet-3{0%{opacity:0;top:30%;left:50%}12%{opacity:1}88%{opacity:1;top:76.67%;left:88%}to{opacity:0;top:76.67%;left:88%}}@keyframes sync-packet-in-1{0%{opacity:0;top:58.33%;left:12%}12%{opacity:.82}88%{opacity:.82;top:30%;left:50%}to{opacity:0;top:30%;left:50%}}@keyframes sync-packet-in-2{0%{opacity:0;top:23.33%;left:88%}12%{opacity:.82}88%{opacity:.82;top:30%;left:50%}to{opacity:0;top:30%;left:50%}}@keyframes sync-packet-in-3{0%{opacity:0;top:76.67%;left:88%}12%{opacity:.82}88%{opacity:.82;top:30%;left:50%}to{opacity:0;top:30%;left:50%}}@keyframes sync-halo{0%{opacity:.55;transform:scale(.92)}70%{opacity:0;transform:scale(1.22)}to{opacity:0;transform:scale(1.22)}}@keyframes sync-node-pulse{0%,to{opacity:.25;transform:scale(1)}50%{opacity:.55;transform:scale(1.08)}}@keyframes particle-float{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:.8;transform:translateY(-4px)}}@keyframes encryption-sweep{0%{opacity:0;transform:translateY(-140%)}18%{opacity:.12}38%{opacity:.26}62%{opacity:.22}84%{opacity:.14}to{opacity:0;transform:translateY(1000%)}}@keyframes encryption-ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes encryption-flow{0%{opacity:0;left:10%}8%{opacity:1}72%{opacity:1}to{opacity:0;left:90%}}@keyframes terminal-blink{50%{opacity:0}}@media (width<=768px){.sync-network{min-height:19.5rem}.sync-status-strip{flex-direction:column;align-items:center;bottom:.5rem}.encryption-demo{min-height:13rem}.encryption-flow-horizontal{width:9.5rem}.encryption-flow-diagonal{width:8rem}.encryption-ring-outer{--encryption-ring-size:8.4rem}.encryption-ring-inner{--encryption-ring-size:5.9rem}.encryption-lock{width:3.9rem;height:3.9rem}.encryption-particle:first-child{top:20%;left:26%}.encryption-particle:nth-child(2){top:30%;right:23%}.encryption-particle:nth-child(3){bottom:24%;left:26%}.encryption-particle:nth-child(4){bottom:18%;right:20%}.encryption-particle:nth-child(5){top:48%;left:16%}.encryption-particle:nth-child(6){top:40%;right:14%}.encryption-particle:nth-child(7){top:13%;left:50%}}