@keyframes rise {
 from {  
    opacity : 0.0;
    transform : translateY(10px);
  }

  to {  
    opacity : 1.0;
    transform : translateY(0px);
  }
 }

@keyframes fade {
 from {  
    opacity : 0.0;
  }

  to {  
    opacity : 1.0;
  }
 }

@keyframes float {
 from {  
    transform : translateY(0px);
  }

  50.0% {  
    transform : translateY(-9px);
  }

  to {  
    transform : translateY(0px);
  }
 }

@keyframes pulse {
 from {  
    opacity : 0.75;
  }

  50.0% {  
    opacity : 1.0;
  }

  to {  
    opacity : 0.75;
  }
 }

@keyframes drift {
 from {  
    transform : translate3d(0px,0px,0px) scale(1.0);
  }

  to {  
    transform : translate3d(40px,30px,0px) scale(1.08);
  }
 }

@keyframes spark-h {
 from {  
    transform : translateX(-10.0vw);
    opacity : 0.0;
  }

  10.0% {  
    opacity : 1.0;
  }

  90.0% {  
    opacity : 1.0;
  }

  to {  
    transform : translateX(110.0vw);
    opacity : 0.0;
  }
 }

@keyframes spark-v {
 from {  
    transform : translateY(-140px);
    opacity : 0.0;
  }

  10.0% {  
    opacity : 1.0;
  }

  90.0% {  
    opacity : 1.0;
  }

  to {  
    transform : translateY(700px);
    opacity : 0.0;
  }
 }

@keyframes orbit {
 from {  
    transform : rotateX(68.0deg) rotateZ(0.0deg);
  }

  to {  
    transform : rotateX(68.0deg) rotateZ(360.0deg);
  }
 }

@keyframes orbit-b {
 from {  
    transform : rotateX(68.0deg) rotateZ(60.0deg);
  }

  to {  
    transform : rotateX(68.0deg) rotateZ(420.0deg);
  }
 }

@keyframes pop {
 from {  
    transform : scale(0.7);
    opacity : 0.2;
  }

  60.0% {  
    transform : scale(1.12);
    opacity : 1.0;
  }

  to {  
    transform : scale(1.0);
  }
 }

@keyframes ping {
 from {  
    box-shadow : 0 0 0 0 var(--accent-glow);
  }

  to {  
    box-shadow : 0 0 0 10px transparent;
  }
 }

@keyframes marquee {
 from {  
    transform : translateX(0.0%);
  }

  to {  
    transform : translateX(-50.0%);
  }
 }

@keyframes spin {
 from {  
    transform : rotate(0.0deg);
  }

  to {  
    transform : rotate(360.0deg);
  }
 }

.page-root .home, .page-root .docs, .page-root .page {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
}

.hero-eyebrow {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
  animation-delay : 80.0ms;
}

.hero-title {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
  animation-delay : 140.0ms;
}

.hero-subtitle {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
  animation-delay : 220.0ms;
}

.hero-actions {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
  animation-delay : 300.0ms;
}

.hero-install {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
  animation-delay : 380.0ms;
}

.hero-blob {
  animation : drift 18s ease-in-out infinite alternate;
}

.hero-blob-b {
  animation-delay : -6.0s;
}

.hero-logo-glow {
  transition : transform 520.0ms cubic-bezier(0.2,0.7,0.2,1.0);
  animation : pulse 5s ease-in-out infinite;
}

.hero-logo-float {
  animation : float 6s ease-in-out infinite;
}

.hero-logo-ring {
  animation : orbit 14s linear infinite;
}

.hero-logo-ring-b {
  animation : orbit-b 22s linear infinite reverse;
}

.spark-h {
  animation : spark-h 9s linear infinite;
}

.spark-v {
  animation : spark-v 7s linear infinite;
}

.spark-2 {
  animation-delay : -3.0s;
}

.spark-3 {
  animation-delay : -6.0s;
  animation-direction : reverse;
}

.spark-4 {
  animation-delay : -1.5s;
}

.spark-6 {
  animation-delay : -2.0s;
}

.spark-7 {
  animation-delay : -4.5s;
}

.spark-8 {
  animation-delay : -1.0s;
  animation-direction : reverse;
}

.pillar {
  animation : rise 520.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
}

.pillar:nth-child(1) {
  animation-delay : 420.0ms;
}

.pillar:nth-child(2) {
  animation-delay : 500.0ms;
}

.pillar:nth-child(3) {
  animation-delay : 580.0ms;
}

.wordmark-mark {
  transition : transform 280.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.brand:hover .wordmark-mark {
  transform : rotate(-8.0deg) scale(1.06);
}

.btn {
  transition : transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), box-shadow 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), background-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), border-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.btn:hover {
  transform : translateY(-1px);
}

.btn:active {
  transform : translateY(1px) scale(0.99);
}

.btn-arrow {
  display : inline-block;
  transition : transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.btn:hover .btn-arrow {
  transform : translateX(3px);
}

.tool-btn {
  transition : color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), background-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.tool-btn:active {
  transform : scale(0.94);
}

.topnav-link {
  transition : color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), background-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.pillar, .feature, .example-card, .doc-pager-link {
  transition : transform 280.0ms cubic-bezier(0.2,0.7,0.2,1.0), border-color 280.0ms cubic-bezier(0.2,0.7,0.2,1.0), box-shadow 280.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.pillar:hover {
  transform : translateY(-4px);
}

.feature:hover, .example-card:hover {
  transform : translateY(-3px);
}

.doc-pager-link:hover {
  transform : translateY(-2px);
}

.pillar-icon {
  transition : transform 280.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.pillar:hover .pillar-icon {
  transform : rotate(-6.0deg) scale(1.06);
}

.pillar-more {
  transition : transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.pillar:hover .pillar-more {
  transform : translateX(4px);
}

.counter-btn {
  transition : transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), border-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), background-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.counter-btn:active {
  transform : scale(0.92);
}

.counter-value {
  animation : pop 260ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.demo-dot {
  animation : ping 1.8s ease-out infinite;
}

.eco-track {
  animation : marquee 48s linear infinite;
}

.eco-marquee:hover .eco-track {
  animation-play-state : paused;
}

.anchor-link {
  transition : opacity 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.lang-btn .icon:last-child {
  transition : transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.lang-menu.open .lang-btn .icon:last-child {
  transform : rotate(180.0deg);
}

.search-overlay {
  animation : fade 160.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
}

.search-modal {
  animation : rise 280.0ms cubic-bezier(0.2,0.7,0.2,1.0) both;
}

.search-trigger {
  transition : border-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), box-shadow 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.docs-nav a, .example-links a, .footer-col a, .post-back, .blog-archive a {
  transition : color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), background-color 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

.docs-scrim {
  transition : opacity 280.0ms cubic-bezier(0.2,0.7,0.2,1.0);
}

@media screen and (max-width: 900px) {
 .docs-sidebar {  
    transform : translateX(-100.0%);
    transition : transform 280.0ms cubic-bezier(0.2,0.7,0.2,1.0);
  }

  .docs-sidebar.open {  
    transform : translateX(0px);
  }
 }

@media screen and (max-width: 760px) {
 .topnav {  
    opacity : 0.0;
    transform : translateY(-8px);
    transition : opacity 160.0ms cubic-bezier(0.2,0.7,0.2,1.0), transform 160.0ms cubic-bezier(0.2,0.7,0.2,1.0);
  }

  .site.menu-open .topnav {  
    opacity : 1.0;
    transform : translateY(0px);
  }
 }

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {  
    animation-duration : 0.01ms !important;
    animation-iteration-count : 1 !important;
    transition-duration : 0.01ms !important;
  }

  .hero-logo-tilt {  
    transform : perspective(900px);
  }
 }