:root {
  --ui-white: #fff;
  --ui-charcoalgrey: #171717;
  --ui-charcoalgrey-hover: #383838;
  --ui-lightgrey: #f5f5f5;
  --ui-lightgrey-hover: #e8e8e8;
  --ui-softgrey: #e8e8e8;
  --ui-softgrey-hover: #ddd;
  --ui-orange: #fe9900;
  --ui-orange-hover: #e68900;
  --ui-orange-light: #fff2df;
  --ui-purpley: #c5b3ff;
  --ui-purpley-hover: #d1c2ff;
  --ui-purpley-light: #e8e1ff;
  --ui-coral: #ff6467;
  --ui-coral-hover: #e85a5d;
  --ui-coral-light: #ffc6c8;
  --ui-border-width-m: .125rem;
  --ui-border-radius-full: 6.25rem;
  --ui-focus-ring-color: #fe9900;
  --ui-font-family-primary: Outfit, sans-serif;
  --ui-font-size-200: .75rem;
  --ui-font-size-300: .875rem;
  --ui-font-size-400: 1rem;
  --ui-line-height-xs: 1;
  --ui-sizing-l: 1.25rem;
  --ui-sizing-2xl: 1.75rem;
  --ui-sizing-4xl: 2.25rem;
  --ui-sizing-6xl: 2.75rem;
  --ui-button-height-sm: 1.75rem;
  --ui-button-height-md: 2.375rem;
  --ui-button-height-lg: 2.75rem;
  --ui-spacing-2xs: .25rem;
  --ui-spacing-xs: .5rem;
  --ui-spacing-s: .75rem;
  --ui-spacing-m: .875rem;
  --ui-spacing-l: 1.125rem;
  --ui-spacing-xl: 1.5rem;
}

.ui-button {
  --ui-button-height: var(--ui-button-height-md);
  --ui-button-padding-block: var(--ui-spacing-s);
  --ui-button-padding-inline: var(--ui-spacing-l);
  --ui-button-gap: var(--ui-spacing-xs);
  --ui-button-font-size: var(--ui-font-size-300);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--ui-button-gap);
  width: auto;
  height: auto;
  block-size: var(--ui-button-height);
  min-inline-size: var(--ui-button-height);
  padding: var(--ui-button-padding-block) var(--ui-button-padding-inline);
  border: 0;
  border-radius: var(--ui-border-radius-full);
  background: transparent;
  font: inherit;
  font-family: var(--ui-font-family-primary);
  font-size: var(--ui-button-font-size);
  font-weight: 400;
  line-height: var(--ui-line-height-xs);
  letter-spacing: 0;
  color: inherit;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms, opacity 120ms;
}

.ui-button[data-size="sm"] {
  --ui-button-height: var(--ui-button-height-sm);
  --ui-button-padding-block: var(--ui-spacing-xs);
  --ui-button-padding-inline: var(--ui-spacing-m);
  --ui-button-gap: var(--ui-spacing-2xs);
  --ui-button-font-size: var(--ui-font-size-200);
}

.ui-button[data-size="md"] {
  --ui-button-height: var(--ui-button-height-md);
  --ui-button-padding-block: var(--ui-spacing-s);
  --ui-button-padding-inline: var(--ui-spacing-l);
  --ui-button-gap: var(--ui-spacing-xs);
}

.ui-button[data-size="lg"] {
  --ui-button-height: var(--ui-button-height-lg);
  --ui-button-padding-block: var(--ui-spacing-m);
  --ui-button-padding-inline: var(--ui-spacing-xl);
  --ui-button-font-size: var(--ui-font-size-400);
}

.ui-button[data-color="orange"] { --button-color: var(--ui-orange); --button-hover: var(--ui-orange-hover); --button-disabled: var(--ui-orange-light); }
.ui-button[data-color="purpley"] { --button-color: var(--ui-purpley); --button-hover: var(--ui-purpley-hover); --button-disabled: var(--ui-purpley-light); }
.ui-button[data-color="grey"] { --button-color: var(--ui-charcoalgrey); --button-hover: var(--ui-charcoalgrey-hover); --button-disabled: var(--ui-lightgrey); }
.ui-button[data-color="white"] { --button-color: var(--ui-white); --button-hover: var(--ui-softgrey); --button-disabled: var(--ui-lightgrey); }
.ui-button[data-color="neutral"] { --button-color: var(--ui-softgrey); --button-hover: var(--ui-softgrey-hover); --button-disabled: var(--ui-lightgrey); }

.ui-button[data-variant="filled"] { color: var(--ui-white); background: var(--button-color); }
.ui-button[data-variant="filled"]:hover:not(:disabled),
.ui-button[data-variant="filled"]:active:not(:disabled) { background: var(--button-hover); }
.ui-button[data-variant="filled"]:disabled { background: var(--button-disabled); }
.ui-button[data-variant="filled"][data-color="white"],
.ui-button[data-variant="filled"][data-color="neutral"] { color: var(--ui-charcoalgrey); }
.ui-button[data-variant="filled"][data-color="white"]:hover:not(:disabled),
.ui-button[data-variant="filled"][data-color="white"]:active:not(:disabled),
.ui-button[data-variant="filled"][data-color="neutral"]:hover:not(:disabled),
.ui-button[data-variant="filled"][data-color="neutral"]:active:not(:disabled) { color: var(--ui-charcoalgrey-hover); }
.ui-button[data-variant="filled"][data-color="white"]:disabled,
.ui-button[data-variant="filled"][data-color="neutral"]:disabled { color: var(--ui-softgrey); }

.ui-button[data-variant="outlined"] {
  background: transparent;
  color: var(--ui-charcoalgrey);
  outline: var(--ui-border-width-m) solid var(--button-color, transparent);
  outline-offset: -2px;
}
.ui-button[data-variant="outlined"]:hover:not(:disabled),
.ui-button[data-variant="outlined"]:active:not(:disabled) { outline-color: var(--button-hover, transparent); }
.ui-button[data-variant="outlined"]:disabled { color: var(--ui-softgrey); outline-color: var(--button-disabled); }
.ui-button[data-variant="outlined"][data-color="white"],
.ui-button[data-variant="outlined"][data-color="purpley"] { color: var(--ui-white); }
.ui-button[data-variant="outlined"][data-color="white"]:hover:not(:disabled),
.ui-button[data-variant="outlined"][data-color="white"]:active:not(:disabled) { color: var(--ui-softgrey); }
.ui-button[data-variant="outlined"][data-color="grey"]:hover:not(:disabled),
.ui-button[data-variant="outlined"][data-color="grey"]:active:not(:disabled),
.ui-button[data-variant="outlined"][data-color="neutral"]:hover:not(:disabled),
.ui-button[data-variant="outlined"][data-color="neutral"]:active:not(:disabled) { color: var(--ui-charcoalgrey-hover); }
.ui-button[data-variant="outlined"][data-color="grey"]:disabled { outline-color: var(--ui-softgrey); }
.ui-button[data-variant="outlined"][data-color="white"]:disabled,
.ui-button[data-variant="outlined"][data-color="purpley"]:disabled { color: var(--ui-lightgrey); }

.ui-button[data-color="transparent"] { color: var(--ui-charcoalgrey); background: transparent; }
.ui-button[data-color="transparent"]:hover:not(:disabled),
.ui-button[data-color="transparent"]:active:not(:disabled) { color: var(--ui-charcoalgrey-hover); background: var(--ui-lightgrey); }
.ui-button[data-color="transparent"]:disabled { color: var(--ui-softgrey); background: transparent; }
.ui-button[data-color="transparent-half"] { color: var(--ui-white); background: #17171733; }
.ui-button[data-color="transparent-half"]:hover:not(:disabled),
.ui-button[data-color="transparent-half"]:active:not(:disabled) { background: #1717174d; }
.ui-button[data-color="transparent-half"]:disabled { color: var(--ui-lightgrey); background: #1717171a; }

.ui-button[data-variant="filled"][data-color="premium"] {
  color: var(--ui-white);
  background: linear-gradient(90deg, var(--ui-orange) 0%, var(--ui-coral) 100%);
}
.ui-button[data-variant="filled"][data-color="premium"]:hover:not(:disabled),
.ui-button[data-variant="filled"][data-color="premium"]:active:not(:disabled) {
  background: linear-gradient(90deg, var(--ui-orange-hover) 0%, var(--ui-coral-hover) 100%);
}
.ui-button[data-variant="outlined"][data-color="premium"] { position: relative; isolation: isolate; color: var(--ui-orange); }
.ui-button[data-variant="outlined"][data-color="premium"]:hover:not(:disabled),
.ui-button[data-variant="outlined"][data-color="premium"]:active:not(:disabled) { color: var(--ui-orange-hover); }
.ui-button[data-variant="outlined"][data-color="premium"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: var(--ui-border-width-m);
  background: linear-gradient(90deg, var(--ui-orange) 0%, var(--ui-coral) 100%);
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
.ui-button[data-variant="outlined"][data-color="premium"]:hover:not(:disabled)::before,
.ui-button[data-variant="outlined"][data-color="premium"]:active:not(:disabled)::before {
  background: linear-gradient(90deg, var(--ui-orange-hover) 0%, var(--ui-coral-hover) 100%);
}
.ui-button[data-variant="filled"][data-color="premium"]:disabled {
  color: var(--ui-white);
  background: linear-gradient(90deg, var(--ui-orange-light) 0%, var(--ui-coral-light) 100%);
}
.ui-button[data-variant="outlined"][data-color="premium"]:disabled { color: var(--ui-softgrey); outline-color: transparent; }
.ui-button[data-variant="outlined"][data-color="premium"]:disabled::before {
  background: linear-gradient(90deg, var(--ui-orange-light) 0%, var(--ui-coral-light) 100%);
}

.ui-button:focus-visible { outline: var(--ui-border-width-m) solid var(--ui-focus-ring-color); outline-offset: 2px; }
.ui-button:disabled { cursor: not-allowed; opacity: 1; }
.ui-button svg, .ui-button img, .ui-button .ui-button__icon {
  font-size: var(--ui-button-font-size);
  inline-size: 1em;
  block-size: 1em;
  flex: 0 0 auto;
  pointer-events: none;
}
.ui-button[data-size="md"] .ui-button__icon,
.ui-button[data-size="lg"] .ui-button__icon { font-size: var(--ui-sizing-l); }
.ui-button[data-stretch="true"] { inline-size: 100%; }
.ui-button > .share-text { font: inherit; }
.ui-button.landing-wide-button { width: min(100%, 20rem); }
.ui-button.landing-icon-button { inline-size: var(--ui-button-height); block-size: var(--ui-button-height); padding: 0; flex: 0 0 auto; }
.ui-button.landing-icon-button.down-arrow-link { inline-size: 3rem; block-size: 3rem; }
.ui-button.down-arrow-link .ui-button__icon { inline-size: 2.25rem; block-size: 2.25rem; max-width: none; object-fit: contain; }
.ui-button#rage { filter: none; transform: none; }
.premium-plan > .ui-button { margin-top: auto; }
.mind-card > .ui-button.landing-mobile-premium-button { position: absolute; inset: auto 1.3rem 1.3rem; inline-size: auto; }
.navbar .menu-btn.ui-button { display: none; }

.w-slider-arrow-left,
.w-slider-arrow-right,
.news-left,
.news-right,
.premium-plans-arrow {
  box-sizing: border-box;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-purpley);
}

.premium-plans-arrow { position: relative; color: var(--ui-orange); }

:is(.w-slider-arrow-left, .w-slider-arrow-right, .news-left, .news-right, .premium-plans-arrow) > :is(img, svg) {
  visibility: hidden;
  width: 2.625rem;
  height: 2.625rem;
  max-width: none;
}

:is(.w-slider-arrow-left, .w-slider-arrow-right, .news-left, .news-right, .premium-plans-arrow)::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.625rem;
  height: 2.625rem;
  background: currentColor;
  -webkit-mask: url('../images/arrow_right-3.svg') center / contain no-repeat;
  mask: url('../images/arrow_right-3.svg') center / contain no-repeat;
  pointer-events: none;
}

:is(.w-slider-arrow-left, .news-left, .premium-plans-prev)::before {
  transform: rotate(180deg);
}

:is(.w-slider-arrow-left, .w-slider-arrow-right, .news-left, .news-right, .premium-plans-arrow):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media screen and (max-width: 991px) {
  .navbar .menu-btn.ui-button { display: inline-flex; }
}

@media screen and (max-width: 767px) {
  .creator-bottom-right > .ui-button { width: 100%; }
}

@media screen and (max-width: 479px) {
  .about-page .join .join-btn-wrap {
    gap: var(--ui-spacing-xs);
  }

  .about-page .join .join-btn-wrap > .ui-button {
    --ui-button-height: var(--ui-button-height-lg);
    --ui-button-padding-inline: var(--ui-spacing-l);
    --ui-button-font-size: var(--ui-font-size-300);
  }
}