html[data-theme="pro"] #app .logo {
  position: relative;
  color: var(--ink);
}

.brand-lockup {
  position: relative;
  display: block;
  flex: none;
  width: 180px;
  aspect-ratio: 1788 / 564;
  overflow: hidden;
}
.brand-lockup > img {
  position: absolute;
  display: block;
  width: 113.367%;
  max-width: none;
  height: auto;
  left: -8.949%;
  top: -15.957%;
}
html[data-mode="dark"] #app .brand-lockup > img { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 600px) { #app .brand-lockup { width: 150px; } }

@media (prefers-reduced-motion: no-preference) {
  #app .land-top .brand-wordmark {
    animation: yb-wordmark-arrive 320ms ease-out both;
  }

  #app .land-mapwrap,
  #app .land-right {
    animation: yb-home-arrive 360ms ease-out both;
  }

  #app .land-stat { animation: yb-stat-arrive 420ms cubic-bezier(.2, .8, .3, 1) both; }
  #app .land-stat.new { animation-delay: 65ms; }
  #app .land-mapwrap { animation-delay: 120ms; }
  #app .land-right { animation-delay: 180ms; }

  #app .land .btn,
  #app .land-top .btn,
  #app .land-area {
    transition: translate 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    #app .land .btn:not(:disabled):hover,
    #app .land-top .btn:not(:disabled):hover,
    #app .land-area:not(:disabled):hover {
      translate: 0 -2px;
      box-shadow: 0 4px 10px rgb(20 17 5 / 14%);
    }
  }

  #app .land .btn:not(:disabled):active,
  #app .land-top .btn:not(:disabled):active,
  #app .land-area:not(:disabled):active {
    translate: 0 1px;
    box-shadow: none;
  }
}

@keyframes yb-wordmark-arrive {
  from { opacity: .65; translate: 0 3px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes yb-home-arrive {
  from { opacity: .5; }
  to { opacity: 1; }
}

@keyframes yb-stat-arrive {
  from { opacity: .35; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}