.of-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text, #f4fbf7);
  text-decoration: none;
}

.of-brand__mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(57, 217, 138, .16));
}

.of-brand__word {
  min-width: 0;
  font-family: var(--font-sans), Manrope, Arial, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text, #f4fbf7);
  white-space: nowrap;
}

.of-brand__word span:first-child,
.of-brand__word span:last-child {
  color: var(--accent, #39d98a);
}

.of-brand--compact {
  gap: 8px;
}

.of-brand--compact .of-brand__mark {
  width: 36px;
  height: 36px;
}

.of-brand--compact .of-brand__word {
  font-size: 20px;
}

.of-brand--footer .of-brand__mark {
  width: 38px;
  height: 38px;
}

.of-brand--footer .of-brand__word {
  font-size: 21px;
}

.of-brand--mini .of-brand__mark {
  width: 28px;
  height: 28px;
}

.of-brand--mini .of-brand__word {
  font-size: 17px;
}

.of-brand:hover .of-brand__word,
.of-brand:focus-visible .of-brand__word {
  color: var(--text, #f4fbf7);
}

.site-lite-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.site-lite-footer__brand .of-brand__mark {
  width: 30px;
  height: 30px;
}

.site-lite-footer__brand span {
  white-space: nowrap;
}

.of-send-icon-button,
button.of-send-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-self: end;
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-radius: 8px;
  line-height: 1;
}

.of-send-icon-button .of-send-arrow-icon {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transition: transform 0.16s ease;
}

.of-send-icon-button:not(:disabled):hover .of-send-arrow-icon,
.of-send-icon-button:not(:disabled):focus-visible .of-send-arrow-icon {
  transform: translate(1px, -1px);
}

.of-send-icon-button:disabled .of-send-arrow-icon {
  opacity: 0.62;
}

.of-send-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.auth-brand {
  margin-bottom: 12px;
}

.auth-brand.of-brand {
  width: max-content;
  max-width: 100%;
}

.profile-brand,
.owner-brand,
.clicker-brand,
.participant-brand,
.room-sidebar-brand {
  width: max-content;
  max-width: 100%;
}

.participant-brand {
  margin: 0 0 14px;
}

.room-sidebar-brand {
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  .of-brand__mark {
    width: 38px;
    height: 38px;
  }

  .of-brand__word {
    font-size: 21px;
  }

  .of-brand--compact .of-brand__word {
    font-size: 18px;
  }
}