.xl-logo {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  color: #f2f7fb;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
}

.xl-logo-canvas,
.xl-logo-fallback {
  display: block;
}

.xl-logo-fallback {
  height: 44px;
  width: auto;
  max-width: 208px;
}

.xl-logo[data-size="header"] .xl-logo-fallback {
  height: 40px;
  max-width: 182px;
}

.xl-logo[data-size="footer"] .xl-logo-fallback {
  height: 48px;
  max-width: 218px;
}

.xl-logo[data-size="auth"] .xl-logo-fallback {
  height: 68px;
  max-width: 278px;
}

.xl-logo[data-size="preloader"] .xl-logo-fallback {
  height: 128px;
  max-width: 128px;
}

.xl-logo[data-size="tab"] .xl-logo-fallback {
  height: 40px;
  max-width: 40px;
}

.xl-logo[data-size="avatar"] .xl-logo-fallback {
  height: 48px;
  max-width: 48px;
}

.xl-wordmark {
  font-family: "Michroma", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f2f7fb;
  -webkit-text-stroke: 0.035em currentColor;
  text-shadow: 0 0 0.2em rgba(242, 247, 251, 0.18);
}

.xl-wordmark__glyphs {
  margin-right: -0.16em;
}

/* Michroma's line box is centred 2/24em above its cap-height midline, so the mirrored V needs nudging down. */
.xl-wordmark__a {
  display: inline-block;
  transform: translateY(0.167em) scaleY(-1);
}

.xl-wordmark .visually-hidden,
.xl-logo .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}