: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-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-spacing-2xs: .25rem;
  --ui-spacing-xs: .5rem;
  --ui-spacing-s: .75rem;
}

.ui-button {
  --ui-button-height: var(--ui-sizing-4xl);
  --ui-button-padding-block: var(--ui-spacing-xs);
  --ui-button-padding-inline: var(--ui-spacing-s);
  --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;
  min-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-sizing-2xl);
  --ui-button-padding-inline: var(--ui-spacing-xs);
  --ui-button-gap: var(--ui-spacing-2xs);
  --ui-button-font-size: var(--ui-font-size-200);
}

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

.ui-button[data-size="lg"] {
  --ui-button-height: var(--ui-sizing-6xl);
  --ui-button-padding-block: var(--ui-spacing-s);
  --ui-button-padding-inline: var(--ui-spacing-s);
  --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); flex: 0 0 auto; }
.ui-button#rage { filter: none; transform: none; }
.premium-plan > .ui-button { margin-top: auto; }
.mind-card > .landing-mobile-premium-button { position: absolute; inset: auto 1.3rem 1.3rem; inline-size: auto; }
.navbar .menu-btn.ui-button { display: none; }

@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%; }
}