#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin 20s linear infinite}}.card{padding:2em}.read-the-docs{color:#888}.particles-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.hero-glow{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(32,184,205,.15) 0,transparent 70%);filter:blur(40px);z-index:1;animation:heroGlow 4s ease-in-out infinite alternate}@keyframes heroGlow{0%{opacity:.5;transform:translateX(-50%) scale(1)}to{opacity:.8;transform:translateX(-50%) scale(1.1)}}.floating-element{position:absolute;border-radius:50%;opacity:.1;animation:float 8s ease-in-out infinite;background:var(--gradient-primary)}.floating-1{width:120px;height:120px;top:15%;left:8%;animation-delay:0s}.floating-2{width:80px;height:80px;top:60%;right:12%;animation-delay:2s}.floating-3{width:100px;height:100px;bottom:25%;left:15%;animation-delay:4s}.floating-4{width:60px;height:60px;top:35%;right:25%;animation-delay:6s}.floating-5{width:90px;height:90px;top:75%;left:60%;animation-delay:3s}@keyframes float{0%,to{transform:translateY(0) rotate(0deg) scale(1);opacity:.1}25%{transform:translateY(-30px) rotate(90deg) scale(1.1);opacity:.15}50%{transform:translateY(-20px) rotate(180deg) scale(.9);opacity:.2}75%{transform:translateY(-40px) rotate(270deg) scale(1.05);opacity:.12}}