/* Shared animated logo and the supplied landing-page hero artwork. */
.brand > .mini-max {
  width: 22px;
}

.brand:hover .sprite-arm,
.brand:focus-visible .sprite-arm {
  animation-name: mini-max-frame-hover;
  animation-iteration-count: 2;
}

@keyframes mini-max-frame-hover {
  0%, 12.4% { opacity: 1; }
  12.5%, 100% { opacity: 0; }
}

.hero-visual {
  min-width: 0;
  aspect-ratio: 1;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 35px #18181b24);
}

.app-header .brand > .mini-max {
  width: 21px;
}

@media (max-width: 700px) {
  .hero-visual {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    transform: none;
  }

  .app-header .brand > .mini-max {
    width: 17px;
  }
}