.anchor_edefb8 {
  color: var(--text-link);
  -webkit-text-decoration: var(--link-decoration);
          text-decoration: var(--link-decoration);
}

.low-saturation .anchor_edefb8 {
  /* 10% brightness increase for low contrast in dark theme */
  color: var(--text-link-low-saturation);
}

.anchorUnderlineOnHover_edefb8:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .anchor_edefb8,
  .enable-forced-colors .anchorUnderlineOnHover_edefb8 {
    color: LinkText !important;
  }

.enable-forced-colors .anchor_edefb8,
  .enable-forced-colors .anchorUnderlineOnHover_edefb8 {
    background-color: Canvas;
    /* override inline styles */
    /* stylelint-disable-next-line declaration-no-important */
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.enable-forced-colors .anchor_edefb8 svg, .enable-forced-colors .anchorUnderlineOnHover_edefb8 svg {
      color: currentColor;
    }

/* should get button color, not link color */

.enable-forced-colors .anchor_edefb8:not([href]), .enable-forced-colors .anchorUnderlineOnHover_edefb8:not([href]) {
      color: ButtonText !important;
    }

.enable-forced-colors .anchor_edefb8:not([href]), .enable-forced-colors .anchorUnderlineOnHover_edefb8:not([href]) {
      background-color: ButtonFace;
      /* override inline styles */
      /* stylelint-disable-next-line declaration-no-important */
    }

/*
 * Wandering Cubes
 */
@keyframes spinner-wandering-cubes__0b5bb {
  25% {
    transform: translateX(22px) rotate(-90deg) scale(0.5);
  }

  50% {
    transform: translateX(22px) translateY(22px) rotate(-180deg);
  }

  75% {
    transform: translateX(0) translateY(22px) rotate(-270deg) scale(0.5);
  }

  100% {
    transform: rotate(-360deg);
  }
}
/*
 * Chasing Dots
 */
@keyframes spinner-chasing-dots-rotate__0b5bb {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinner-chasing-dots-bounce__0b5bb {
  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}
/*
 * Pulsing Ellipsis
 */
@keyframes spinner-pulsing-ellipsis__0b5bb {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.8);
    opacity: 0.3;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*
 * Low Motion - variant of Pulsing Ellipsis
 */
@keyframes spinner-low-motion__0b5bb {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}
/*
 * Spinning Circle
 */
@keyframes spinner-spinning-circle-rotate__0b5bb {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinner-spinning-circle-dash__0b5bb {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 130, 200;
  }

  100% {
    stroke-dasharray: 130, 200;
    stroke-dashoffset: -124; /* Approx -(2*pi*r) */
  }
}
.spinner__0b5bb {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner__0b5bb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  contain: paint;
}
/*
 * Wandering Cubes
 */
.wanderingCubes__0b5bb .item__0b5bb {
    background-color: var(--brand-400);
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    animation: spinner-wandering-cubes__0b5bb 1.8s infinite ease-in-out;
  }
.wanderingCubes__0b5bb .item__0b5bb:last-child {
      animation-delay: -0.9s;
    }
/*
 * Chasing Dots
 */
.chasingDots__0b5bb {
  animation: spinner-chasing-dots-rotate__0b5bb 2s infinite linear;
}
.chasingDots__0b5bb .item__0b5bb {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: var(--brand-500);
    border-radius: 100%;
    animation: spinner-chasing-dots-bounce__0b5bb 2s infinite ease-in-out;
  }
.chasingDots__0b5bb .item__0b5bb:last-child {
      top: auto;
      bottom: 0;
      animation-delay: -1s;
    }
/*
 * Pulsing Ellipsis
 */
.pulsingEllipsis__0b5bb {
  height: auto;
  width: 28px;
  display: flex;
  justify-content: center;
  position: relative;
}
.pulsingEllipsis__0b5bb .item__0b5bb {
    animation: spinner-pulsing-ellipsis__0b5bb 1.4s infinite ease-in-out;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    background-color: var(--primary-100);
    border-radius: 3px;
    display: inline-block;
    opacity: 0.3;
  }
.pulsingEllipsis__0b5bb .item__0b5bb:nth-of-type(2) {
      animation-delay: 0.2s;
    }
.pulsingEllipsis__0b5bb .item__0b5bb:nth-of-type(3) {
      animation-delay: 0.4s;
    }
/*
 * Low Motion - variant of Pulsing Ellipsis
 */
.lowMotion__0b5bb .item__0b5bb {
    animation: spinner-low-motion__0b5bb 1.4s infinite ease-in-out;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    background-color: var(--interactive-normal);
    border-radius: 3px;
    display: inline-block;
    opacity: 0.3;
  }
.lowMotion__0b5bb .item__0b5bb:nth-of-type(2) {
      animation-delay: 0.2s;
    }
.lowMotion__0b5bb .item__0b5bb:nth-of-type(3) {
      animation-delay: 0.4s;
    }
/* TODO FIXME when Avatar is in UIKit fully */
.stop-animation .pulsingEllipsis__0b5bb .item__0b5bb {
    animation: none;
  }
.stopAnimation__0b5bb .item__0b5bb,
  .stopAnimation__0b5bb .chasingDots__0b5bb,
  .stopAnimation__0b5bb .circular__0b5bb,
  .stopAnimation__0b5bb .path__0b5bb {
    animation: none;
  }
/*
 * Spinning Circle
 */
.spinningCircle__0b5bb {
  width: 100%;
}
.spinningCircleInner__0b5bb {
  
  transform: rotate(280deg);
}
.circular__0b5bb {
  animation: spinner-spinning-circle-rotate__0b5bb 2s linear infinite;
  height: 100%;
  width: 100%;
}
.path__0b5bb {
  animation: spinner-spinning-circle-dash__0b5bb 2s ease-in-out infinite;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  fill: none;
  stroke-width: 6;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke: var(--brand-500);
}
.path2__0b5bb {
  animation-delay: 0.15s;
  stroke: var(--text-brand);
  opacity: 0.6;
}
.path3__0b5bb {
  animation-delay: 0.23s;
  stroke: var(--text-brand);
}
.theme-light .path3__0b5bb {
    opacity: 0.3;
  }

html.decorate-links .lowSaturationUnderline__41f68 {
  -webkit-text-decoration: underline !important;
  text-decoration: underline !important;
}

html.decorate-links .lowSaturationUnderline__41f68 {
  /* stylelint-disable-next-line declaration-no-important */
}

[data-accessibility*='desaturate'] {
  /* stylelint-disable-next-line discord/var-validator */
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
}

/* Note: apply a filter to an absolute/fixed positioned element will change it's positioning parent
* https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning
*/

.desaturate__41f68 {
  /* stylelint-disable-next-line discord/var-validator */
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
}

.theme-dark {
  /*
  * Dark Theme:
  * When saturation is 1, brightness should be 1
  * When saturation is 0, brightness should be 1.5
  * So we map [0, 1] to [1.5, 1]
  */
  /* stylelint-disable-next-line discord/var-validator */
  --brightness: calc(1.5 - var(--saturation-factor, 1) * 0.5);
  --contrast: var(--saturation-factor, 1);
}

.theme-light {
  /*
  * Light theme:
  * When saturation is 1, brightness should be 1
  * When saturation is 0, brightness should be 0.5
  * So we map [0, 1] to [0.5, 1]
  */
  /* stylelint-disable-next-line discord/var-validator */
  --brightness: calc(0.5 + var(--saturation-factor, 1) * 0.5);
  --contrast: var(--saturation-factor, 1);
}

.desaturate-user-colors .desaturateUserColors__41f68 {
  /* stylelint-disable-next-line discord/var-validator */
  filter: saturate(1) contrast(1) brightness(1);
  filter: saturate(var(--saturation-factor, 1)) contrast(var(--contrast, 1)) brightness(var(--brightness, 1));
}

.button__201d5 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  padding: 2px 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

  .button__201d5:disabled,
  .button__201d5[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .button__201d5 .contents__201d5 {
    --button--underline-color: transparent;

    /* stylelint-disable-next-line discord/var-validator */
    background-image: linear-gradient(
      to top,
      transparent,
      transparent var(--custom-button-link-underline-offset),
      transparent var(--custom-button-link-underline-offset),
      transparent var(--custom-button-link-underline-stop),
      transparent var(--custom-button-link-underline-stop)
    );
    background-image: linear-gradient(
      to top,
      transparent,
      transparent var(--custom-button-link-underline-offset),
      var(--button--underline-color) var(--custom-button-link-underline-offset),
      var(--button--underline-color) var(--custom-button-link-underline-stop),
      transparent var(--custom-button-link-underline-stop)
    );
  }

.lookFilled__201d5.colorBrand__201d5 {
  color: var(--button-filled-brand-text);
  background-color: var(--button-filled-brand-background);
}

.lookFilled__201d5.colorBrand__201d5:hover {
    background-color: var(--button-filled-brand-background-hover);
  }

.lookFilled__201d5.colorBrand__201d5:active {
    background-color: var(--button-filled-brand-background-active);
  }

.lookFilled__201d5.colorBrand__201d5 .spinnerItem__201d5 {
    background-color: var(--button-filled-brand-text);
  }

.lookFilled__201d5.colorBrand__201d5:disabled,
  .lookFilled__201d5.colorBrand__201d5[aria-disabled='true'] {
    background-color: var(--button-filled-brand-background);
  }

.lookFilled__201d5.colorBrandInverted__201d5 {
  color: var(--button-filled-brand-inverted-text);
  background-color: var(--button-filled-brand-inverted-background);
}

.lookFilled__201d5.colorBrandInverted__201d5:hover {
    background-color: var(--button-filled-brand-inverted-background-hover);
  }

.lookFilled__201d5.colorBrandInverted__201d5:active {
    background-color: var(--button-filled-brand-inverted-background-active);
  }

.lookFilled__201d5.colorBrandInverted__201d5 .spinnerItem__201d5 {
    background-color: var(--button-filled-brand-inverted-text);
  }

.lookFilled__201d5.colorBrandInverted__201d5:disabled,
  .lookFilled__201d5.colorBrandInverted__201d5[aria-disabled='true'] {
    background-color: var(--button-filled-brand-inverted-background);
  }

.lookOutlined__201d5.colorBrand__201d5 {
  color: var(--button-outline-brand-text);
  border-color: var(--button-outline-brand-border);
}

.lookOutlined__201d5.colorBrand__201d5:hover {
    background-color: var(--button-outline-brand-background-hover);
    border-color: var(--button-outline-brand-border-hover);
    color: var(--button-outline-brand-text-hover);
  }

.lookOutlined__201d5.colorBrand__201d5:active {
    background-color: var(--button-outline-brand-background-active);
    border-color: var(--button-outline-brand-border-active);
    color: var(--button-outline-brand-text-active);
  }

.lookOutlined__201d5.colorBrand__201d5:disabled,
  .lookOutlined__201d5.colorBrand__201d5[aria-disabled='true'] {
    background-color: transparent;
  }

.lookOutlined__201d5.colorBrand__201d5 .spinnerItem__201d5 {
    background-color: var(--brand-500);
  }

.lookLink__201d5.colorBrand__201d5 {
  color: var(--brand-500);
}

.lookLink__201d5.colorBrand__201d5:hover .contents__201d5 {
    --button--underline-color: var(--brand-500);
  }

.lookLink__201d5.colorBrand__201d5:disabled .contents__201d5,
  .lookLink__201d5.colorBrand__201d5[aria-disabled='true'] .contents__201d5 {
    background-image: none;
  }

.lookLink__201d5.colorBrand__201d5 .spinnerItem__201d5 {
    background-color: var(--brand-500);
  }

.lookOutlined__201d5.colorPrimary__201d5 {
  color: var(--button-outline-primary-text);
  border-color: var(--button-outline-primary-border);
}

.lookOutlined__201d5.colorPrimary__201d5:hover {
    background-color: var(--button-outline-primary-background-hover);
    border-color: var(--button-outline-primary-border-hover);
    color: var(--button-outline-primary-text-hover);
  }

.lookOutlined__201d5.colorPrimary__201d5:active {
    background-color: var(--button-outline-primary-background-active);
    border-color: var(--button-outline-primary-border-active);
    color: var(--button-outline-primary-text-active);
  }

.lookOutlined__201d5.colorPrimary__201d5:disabled,
  .lookOutlined__201d5.colorPrimary__201d5[aria-disabled='true'] {
    color: var(--button-outline-primary-text);
    background-color: transparent;
  }

.lookOutlined__201d5.colorPrimary__201d5 .spinnerItem__201d5 {
    background-color: var(--white);
  }

.lookFilled__201d5.colorLink__201d5 {
  color: var(--white);
  background-color: var(--text-link);
}

.lookFilled__201d5.colorLink__201d5:hover {
    background-color: null;
  }

.lookFilled__201d5.colorLink__201d5:active {
    background-color: null;
  }

.lookFilled__201d5.colorLink__201d5 .spinnerItem__201d5 {
    background-color: var(--white);
  }

.lookFilled__201d5.colorLink__201d5:disabled,
  .lookFilled__201d5.colorLink__201d5[aria-disabled='true'] {
    background-color: var(--text-link);
  }

.lookOutlined__201d5.colorLink__201d5 {
  color: var(--text-link);
  border-color: var(--text-link);
}

.lookOutlined__201d5.colorLink__201d5:active {
    background-color: hsl(var(--text-link-hsl) / 0.1);
  }

.lookOutlined__201d5.colorLink__201d5:disabled,
  .lookOutlined__201d5.colorLink__201d5[aria-disabled='true'] {
    background-color: transparent;
  }

.lookOutlined__201d5.colorLink__201d5 .spinnerItem__201d5 {
    background-color: var(--text-link);
  }

.lookLink__201d5.colorLink__201d5 {
  color: var(--text-link);
}

.lookLink__201d5.colorLink__201d5:hover .contents__201d5 {
    --button--underline-color: var(--text-link);
  }

.lookLink__201d5.colorLink__201d5:disabled .contents__201d5,
  .lookLink__201d5.colorLink__201d5[aria-disabled='true'] .contents__201d5 {
    background-image: none;
  }

.lookLink__201d5.colorLink__201d5 .spinnerItem__201d5 {
    background-color: var(--text-link);
  }

.lookFilled__201d5.colorWhite__201d5 {
  color: var(--button-filled-white-text);
  background-color: var(--button-filled-white-background);
}

.lookFilled__201d5.colorWhite__201d5:hover {
    background-color: null;
  }

.lookFilled__201d5.colorWhite__201d5:active {
    background-color: null;
  }

.lookFilled__201d5.colorWhite__201d5 .spinnerItem__201d5 {
    background-color: var(--button-filled-white-text);
  }

.lookFilled__201d5.colorWhite__201d5:disabled,
  .lookFilled__201d5.colorWhite__201d5[aria-disabled='true'] {
    background-color: var(--button-filled-white-background);
  }

.lookOutlined__201d5.colorWhite__201d5 {
  color: var(--white);
  border-color: var(--white);
}

.lookOutlined__201d5.colorWhite__201d5:active {
    background-color: hsl(var(--white-hsl) / 0.1);
  }

.lookOutlined__201d5.colorWhite__201d5:disabled,
  .lookOutlined__201d5.colorWhite__201d5[aria-disabled='true'] {
    background-color: transparent;
  }

.lookOutlined__201d5.colorWhite__201d5 .spinnerItem__201d5 {
    background-color: var(--white);
  }

.lookLink__201d5.colorWhite__201d5 {
  color: var(--white);
}

.lookLink__201d5.colorWhite__201d5:hover .contents__201d5 {
    --button--underline-color: var(--white);
  }

.lookLink__201d5.colorWhite__201d5:disabled .contents__201d5,
  .lookLink__201d5.colorWhite__201d5[aria-disabled='true'] .contents__201d5 {
    background-image: none;
  }

.lookLink__201d5.colorWhite__201d5 .spinnerItem__201d5 {
    background-color: var(--white);
  }

.lookFilled__201d5.colorRed__201d5 {
  color: var(--white);
  background-color: var(--button-danger-background);
}

.lookFilled__201d5.colorRed__201d5:hover {
    background-color: var(--button-danger-background-hover);
  }

.lookFilled__201d5.colorRed__201d5:active {
    background-color: var(--button-danger-background-active);
  }

.lookFilled__201d5.colorRed__201d5 .spinnerItem__201d5 {
    background-color: var(--white);
  }

.lookFilled__201d5.colorRed__201d5:disabled,
  .lookFilled__201d5.colorRed__201d5[aria-disabled='true'] {
    background-color: var(--button-danger-background-disabled);
  }

.lookOutlined__201d5.colorRed__201d5 {
  background-color: var(--button-outline-danger-background);
  color: var(--button-outline-danger-text);
  border-color: var(--button-outline-danger-border);
}

.lookOutlined__201d5.colorRed__201d5:hover {
    background-color: var(--button-outline-danger-background-hover);
    border-color: var(--button-outline-danger-border-hover);
    color: var(--button-outline-danger-text-hover);
  }

.lookOutlined__201d5.colorRed__201d5:active {
    background-color: var(--button-outline-danger-background-active);
    border-color: var(--button-outline-danger-border-active);
    color: var(--button-outline-danger-text-active);
  }

.lookOutlined__201d5.colorRed__201d5:disabled,
  .lookOutlined__201d5.colorRed__201d5[aria-disabled='true'] {
    background-color: transparent;
  }

.lookOutlined__201d5.colorRed__201d5 .spinnerItem__201d5 {
    background-color: var(--red-400);
  }

.lookLink__201d5.colorRed__201d5 {
  color: var(--text-danger);
}

.lookLink__201d5.colorRed__201d5:hover .contents__201d5 {
    --button--underline-color: var(--text-danger);
  }

.lookLink__201d5.colorRed__201d5:disabled .contents__201d5,
  .lookLink__201d5.colorRed__201d5[aria-disabled='true'] .contents__201d5 {
    background-image: none;
  }

.lookLink__201d5.colorRed__201d5 .spinnerItem__201d5 {
    background-color: var(--text-danger);
  }

.lookFilled__201d5.colorGreen__201d5 {
  color: var(--white);
  background-color: var(--button-positive-background);
}

.lookFilled__201d5.colorGreen__201d5:hover {
    background-color: var(--button-positive-background-hover);
  }

.lookFilled__201d5.colorGreen__201d5:active {
    background-color: var(--button-positive-background-active);
  }

.lookFilled__201d5.colorGreen__201d5 .spinnerItem__201d5 {
    background-color: var(--white);
  }

.lookFilled__201d5.colorGreen__201d5:disabled,
  .lookFilled__201d5.colorGreen__201d5[aria-disabled='true'] {
    background-color: var(--button-positive-background-disabled);
  }

.lookOutlined__201d5.colorGreen__201d5 {
  color: var(--button-outline-positive-text);
  border-color: var(--button-outline-positive-border);
}

.lookOutlined__201d5.colorGreen__201d5:hover {
    background-color: var(--button-outline-positive-background-hover);
    border-color: var(--button-outline-positive-border-hover);
    color: var(--button-outline-positive-text-hover);
  }

.lookOutlined__201d5.colorGreen__201d5:active {
    background-color: var(--button-outline-positive-background-active);
    border-color: var(--button-outline-positive-border-active);
    color: var(--button-outline-positive-text-active);
  }

.lookOutlined__201d5.colorGreen__201d5:disabled,
  .lookOutlined__201d5.colorGreen__201d5[aria-disabled='true'] {
    background-color: transparent;
  }

.lookOutlined__201d5.colorGreen__201d5 .spinnerItem__201d5 {
    background-color: var(--green-230);
  }

.lookLink__201d5.colorGreen__201d5 {
  color: var(--green-360);
}

.lookLink__201d5.colorGreen__201d5:hover .contents__201d5 {
    --button--underline-color: var(--green-360);
  }

.lookLink__201d5.colorGreen__201d5:disabled .contents__201d5,
  .lookLink__201d5.colorGreen__201d5[aria-disabled='true'] .contents__201d5 {
    background-image: none;
  }

.lookLink__201d5.colorGreen__201d5 .spinnerItem__201d5 {
    background-color: var(--green-360);
  }

.lookFilled__201d5.colorPrimary__201d5 {
  color: var(--button-secondary-text);
  background-color: var(--button-secondary-background);
}

.lookFilled__201d5.colorPrimary__201d5:hover {
    background-color: var(--button-secondary-background-hover);
  }

.lookFilled__201d5.colorPrimary__201d5:active {
    background-color: var(--button-secondary-background-active);
  }

.lookFilled__201d5.colorPrimary__201d5 .spinnerItem__201d5 {
    background-color: var(--primary-100);
  }

.lookFilled__201d5.colorPrimary__201d5:disabled,
  .lookFilled__201d5.colorPrimary__201d5[aria-disabled='true'] {
    background-color: var(--button-secondary-background-disabled);
  }

.lookFilled__201d5.colorTransparent__201d5 {
  color: var(--button-transparent-text);
  background-color: var(--button-transparent-background);
}

.lookFilled__201d5.colorTransparent__201d5:hover {
    background-color: var(--button-transparent-background-hover);
  }

.lookFilled__201d5.colorTransparent__201d5:active {
    background-color: var(--button-transparent-background-active);
  }

.lookFilled__201d5.colorTransparent__201d5 .spinnerItem__201d5 {
    background-color: var(--button-transparent-text);
  }

.lookFilled__201d5.colorTransparent__201d5:disabled,
  .lookFilled__201d5.colorTransparent__201d5[aria-disabled='true'] {
    background-color: var(--button-transparent-background);
  }

.theme-dark .lookLink__201d5.colorPrimary__201d5:hover .contents__201d5 {
      --button--underline-color: var(--white);
    }

.theme-dark .lookLink__201d5.colorPrimary__201d5 .spinnerItem__201d5 {
      background-color: var(--white);
    }

.theme-dark .lookOutlined__201d5.colorTransparent__201d5 {
    border-color: var(--primary-200);
  }

.theme-dark .lookOutlined__201d5.colorTransparent__201d5:active {
      background-color: hsl(var(--primary-200-hsl) / 0.1);
    }

.theme-dark .lookOutlined__201d5.colorTransparent__201d5 .spinnerItem__201d5 {
      background-color: var(--primary-200);
    }

.theme-dark .lookLink__201d5.colorTransparent__201d5:hover .contents__201d5 {
      --button--underline-color: var(--primary-200);
    }

.theme-dark .lookLink__201d5.colorTransparent__201d5 .spinnerItem__201d5 {
      background-color: var(--primary-200);
    }

.theme-light .lookLink__201d5.colorPrimary__201d5:hover .contents__201d5 {
      --button--underline-color: var(--primary-400);
    }

.theme-light .lookLink__201d5.colorPrimary__201d5 .spinnerItem__201d5 {
      background-color: var(--primary-400);
    }

.theme-light .lookOutlined__201d5.colorTransparent__201d5 {
    border-color: var(--primary-400);
  }

.theme-light .lookOutlined__201d5.colorTransparent__201d5:active {
      background-color: hsl(var(--primary-400-hsl) / 0.1);
    }

.theme-light .lookOutlined__201d5.colorTransparent__201d5 .spinnerItem__201d5 {
      background-color: var(--primary-400);
    }

.theme-light .lookLink__201d5.colorTransparent__201d5:hover .contents__201d5 {
      --button--underline-color: var(--primary-400);
    }

.theme-light .lookLink__201d5.colorTransparent__201d5 .spinnerItem__201d5 {
      background-color: var(--primary-400);
    }

.lookFilled__201d5 {
  transition:
    background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease;
}

.lookOutlined__201d5 {
  transition:
    color var(--custom-button-transition-duration) ease, background-color var(--custom-button-transition-duration) ease, border-color var(--custom-button-transition-duration) ease;
  border-width: 1px;
  border-style: solid;
}

.lookBlank__201d5 {
  background: transparent;
  color: currentColor;
  border: 0;
  padding: 0;
  margin: 0;
}

.sizeTiny__201d5 {
  width: var(--custom-button-button-tn-width);
  height: var(--custom-button-button-tn-height);
  min-width: var(--custom-button-button-tn-width);
  min-height: var(--custom-button-button-tn-height);
}

.sizeSmall__201d5 {
  width: var(--custom-button-button-sm-width);
  height: var(--custom-button-button-sm-height);
  min-width: var(--custom-button-button-sm-width);
  min-height: var(--custom-button-button-sm-height);
}

.sizeMedium__201d5 {
  width: var(--custom-button-button-md-width);
  height: var(--custom-button-button-md-height);
  min-width: var(--custom-button-button-md-width);
  min-height: var(--custom-button-button-md-height);
}

.sizeLarge__201d5 {
  width: var(--custom-button-button-lg-width);
  height: var(--custom-button-button-lg-height);
  min-width: var(--custom-button-button-lg-width);
  min-height: var(--custom-button-button-lg-height);
}

.sizeMin__201d5 {
  display: inline;
  width: auto;
  height: auto;
  padding: 0 4px;
}

.sizeMax__201d5 {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  font-size: 16px;
}

.sizeIcon__201d5 {
  width: auto;
  height: auto;
  padding: 4px;
}

.grow__201d5 {
  width: auto;
}

.fullWidth__201d5 {
  width: 100%;
}

.submitting__201d5 {
  pointer-events: none;
}

.lookFilled__201d5 .contents__201d5, .lookLink__201d5 .contents__201d5, .lookOutlined__201d5 .contents__201d5 {
    margin: 0 auto; /* For older devices (old Safari / iOS 10) */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

.lookLink__201d5 {
  
}

/* Fix IE11 button layout issues */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .lookFilled__201d5 .contents__201d5, .lookLink__201d5 .contents__201d5, .lookOutlined__201d5 .contents__201d5 {
      margin: 0;
    }
}

.submitting__201d5 .contents__201d5 {
  visibility: hidden;
}

.spinner__201d5 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.disabledButtonWrapper__201d5 {
  display: inline-block;
  position: relative;
}

.disabledButtonWrapper__201d5 .button__201d5.grow__201d5 {
  width: 100%;
}

.disabledButtonOverlay__201d5 {
  cursor: not-allowed;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9; /* Fixes mouseLeave event not firing on buttons with slight z-index */
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 *
 * Override all light and dark theme colors!
 */

.enable-forced-colors.theme-dark .button__201d5, .enable-forced-colors.theme-light .button__201d5 {
    background-color: ButtonFace;
    /* take off transitions, so additional styles that can't animate don't look strange */
    transition: none;
  }

.enable-forced-colors.theme-dark .button__201d5 .contents__201d5, .enable-forced-colors.theme-light .button__201d5 .contents__201d5 {
      /* remove the "backplate" from the button and apply forced colors manually
       * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
       */
      forced-color-adjust: none;
      color: ButtonText;
    }

.enable-forced-colors.theme-dark .button__201d5 .contents__201d5 svg, .enable-forced-colors.theme-light .button__201d5 .contents__201d5 svg {
        color: currentColor;
      }

.enable-forced-colors.theme-dark .button__201d5:hover, .enable-forced-colors.theme-light .button__201d5:hover {
      background-color: ButtonFace;
    }

.enable-forced-colors.theme-dark .button__201d5:hover .contents__201d5, .enable-forced-colors.theme-light .button__201d5:hover .contents__201d5 {
        color: ButtonText;
        -webkit-text-decoration: underline;
        text-decoration: underline;
      }

.enable-forced-colors.theme-dark .button__201d5:disabled,
    .enable-forced-colors.theme-dark .button__201d5[aria-disabled='true'],
    .enable-forced-colors.theme-light .button__201d5:disabled,
    .enable-forced-colors.theme-light .button__201d5[aria-disabled='true'] {
      border-color: GrayText !important;
    }

.enable-forced-colors.theme-dark .button__201d5:disabled,
    .enable-forced-colors.theme-dark .button__201d5[aria-disabled='true'],
    .enable-forced-colors.theme-light .button__201d5:disabled,
    .enable-forced-colors.theme-light .button__201d5[aria-disabled='true'] {
      background-color: Canvas;
      /* stylelint-disable-next-line declaration-no-important */
      opacity: 1;
    }

.enable-forced-colors.theme-dark .button__201d5:disabled .contents__201d5, .enable-forced-colors.theme-dark .button__201d5[aria-disabled='true'] .contents__201d5, .enable-forced-colors.theme-light .button__201d5:disabled .contents__201d5, .enable-forced-colors.theme-light .button__201d5[aria-disabled='true'] .contents__201d5 {
        color: GrayText;
      }

/* link buttons should get the forced-colors link color */

.enable-forced-colors.theme-dark .button__201d5.lookLink__201d5 .contents__201d5, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5 .contents__201d5 {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not(:disabled),
    .enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not(:disabled),
    .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not([aria-disabled='true']) {
      background-color: Canvas;
    }

.enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not(:disabled) .contents__201d5, .enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not([aria-disabled='true']) .contents__201d5, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not(:disabled) .contents__201d5, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not([aria-disabled='true']) .contents__201d5 {
        color: LinkText;
      }

.enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not(:disabled):hover, .enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not(:disabled):hover, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not([aria-disabled='true']):hover {
        background-color: Canvas;
      }

.enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not(:disabled):hover .contents__201d5, .enable-forced-colors.theme-dark .button__201d5.lookLink__201d5:not([aria-disabled='true']):hover .contents__201d5, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not(:disabled):hover .contents__201d5, .enable-forced-colors.theme-light .button__201d5.lookLink__201d5:not([aria-disabled='true']):hover .contents__201d5 {
          color: LinkText;
        }

/* respect the user's color choices and normalize buttons to be more consistent */

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5,
  .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5,
  .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5,
  .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5 {
    border-width: 1px;
    border-style: solid;
  }

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not(:disabled),
    .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not(:disabled),
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not(:disabled),
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not(:disabled),
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not([aria-disabled='true']) {
      border-color: CanvasText !important;
    }

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not(:disabled),
    .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not(:disabled),
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not(:disabled),
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not([aria-disabled='true']),
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not(:disabled),
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not([aria-disabled='true']) {
      /* stylelint-disable-next-line declaration-no-important */
    }

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not(:disabled):hover, .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not(:disabled):hover, .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not(:disabled):hover, .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not(:disabled):hover, .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not([aria-disabled='true']):hover {
        border-color: ButtonText !important;
      }

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not(:disabled):hover, .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not(:disabled):hover, .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not(:disabled):hover, .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:not([aria-disabled='true']):hover, .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not(:disabled):hover, .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:not([aria-disabled='true']):hover {
        /* stylelint-disable-next-line declaration-no-important */
      }

/*
  * Many selected states are custom CSS, but start with some smart defaults
  *
  * Note: Highlight colors are reversed on purpose; the text has a dark background due to
  * a Chromium bug and is more legible reversed
  */

.enable-forced-colors.theme-dark .button__201d5[aria-selected='true'],
  .enable-forced-colors.theme-dark .button__201d5[aria-expanded='true'],
  .enable-forced-colors.theme-dark .button__201d5:active,
  .enable-forced-colors.theme-light .button__201d5[aria-selected='true'],
  .enable-forced-colors.theme-light .button__201d5[aria-expanded='true'],
  .enable-forced-colors.theme-light .button__201d5:active {
    background-color: HighlightText;
  }

.enable-forced-colors.theme-dark .button__201d5[aria-selected='true'] .contents__201d5, .enable-forced-colors.theme-dark .button__201d5[aria-expanded='true'] .contents__201d5, .enable-forced-colors.theme-dark .button__201d5:active .contents__201d5, .enable-forced-colors.theme-light .button__201d5[aria-selected='true'] .contents__201d5, .enable-forced-colors.theme-light .button__201d5[aria-expanded='true'] .contents__201d5, .enable-forced-colors.theme-light .button__201d5:active .contents__201d5 {
      color: Highlight;
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.enable-forced-colors.theme-dark .button__201d5[aria-selected='true']:hover, .enable-forced-colors.theme-dark .button__201d5[aria-expanded='true']:hover, .enable-forced-colors.theme-dark .button__201d5:active:hover, .enable-forced-colors.theme-light .button__201d5[aria-selected='true']:hover, .enable-forced-colors.theme-light .button__201d5[aria-expanded='true']:hover, .enable-forced-colors.theme-light .button__201d5:active:hover {
      background-color: HighlightText;
    }

.enable-forced-colors.theme-dark .button__201d5[aria-selected='true']:hover .contents__201d5, .enable-forced-colors.theme-dark .button__201d5[aria-expanded='true']:hover .contents__201d5, .enable-forced-colors.theme-dark .button__201d5:active:hover .contents__201d5, .enable-forced-colors.theme-light .button__201d5[aria-selected='true']:hover .contents__201d5, .enable-forced-colors.theme-light .button__201d5[aria-expanded='true']:hover .contents__201d5, .enable-forced-colors.theme-light .button__201d5:active:hover .contents__201d5 {
        color: Highlight;
      }

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5[aria-selected='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:active,
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5[aria-selected='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:active,
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5[aria-selected='true'],
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:active,
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5[aria-selected='true'],
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:active {
      border-color: Highlight !important;
    }

.enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5[aria-selected='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookFilled__201d5:active,
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5[aria-selected='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-dark .button__201d5.lookOutlined__201d5:active,
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5[aria-selected='true'],
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-light .button__201d5.lookFilled__201d5:active,
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5[aria-selected='true'],
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5[aria-expanded='true'],
    .enable-forced-colors.theme-light .button__201d5.lookOutlined__201d5:active {
      /* stylelint-disable-next-line declaration-no-important */
    }

.lookLink__201d5.colorPrimary__201d5 {
  color: var(--text-normal);
}

.images-light .lookLink__201d5.colorPrimary__201d5:disabled .contents__201d5,
    .images-light .lookLink__201d5.colorPrimary__201d5[aria-disabled='true'] .contents__201d5 {
      background-image: none;
    }

.images-light .lookLink__201d5.colorPrimary__201d5:disabled .contents__201d5,
    .images-light .lookLink__201d5.colorPrimary__201d5[aria-disabled='true'] .contents__201d5 {
      background-image: none;
    }

.images-dark .lookLink__201d5.colorPrimary__201d5:disabled .contents__201d5,
    .images-dark .lookLink__201d5.colorPrimary__201d5[aria-disabled='true'] .contents__201d5 {
      background-image: none;
    }

.images-dark .lookLink__201d5.colorPrimary__201d5:disabled .contents__201d5,
    .images-dark .lookLink__201d5.colorPrimary__201d5[aria-disabled='true'] .contents__201d5 {
      background-image: none;
    }

.lookOutlined__201d5.colorTransparent__201d5 {
  color: var(--text-normal);
}

.lookOutlined__201d5.colorTransparent__201d5:disabled,
  .lookOutlined__201d5.colorTransparent__201d5[aria-disabled='true'] {
    background-color: transparent;
  }

.lookLink__201d5.colorTransparent__201d5 {
  color: var(--text-normal);
}

/* @NOTE(aweary) link buttons with size min are
   frequently used alongside text. This is a special
   case where we we want the button to be rendered inline
   so that its aligned with the adjacent text.
 */

.lookLink__201d5.sizeMin__201d5 .contents__201d5 {
    display: inline;
  }

:where(.visual-refresh) .button__201d5 {
    border-radius: 8px;
    transition-duration: 0.2s;
    border: 1px solid var(--opacity-white-8);
  }

:where(.visual-refresh).theme-dark .lookLink__201d5.colorPrimary__201d5,
      :where(.visual-refresh).theme-dark .lookLink__201d5.colorLink__201d5 {
        color: var(--brand-360);
      }

:where(.visual-refresh).theme-dark .lookLink__201d5.colorPrimary__201d5:hover .contents__201d5, :where(.visual-refresh).theme-dark .lookLink__201d5.colorLink__201d5:hover .contents__201d5 {
          --button--underline-color: var(--brand-360);
        }

:where(.visual-refresh) .lookBlank__201d5,
  :where(.visual-refresh) .lookLink__201d5 {
    border: none;
  }

:where(.visual-refresh) .disabledButtonWrapper__201d5 {
    padding: 0;
  }

:where(.visual-refresh) .lookFilled__201d5.colorBrand__201d5 {
    border: 1px solid var(--button-filled-brand-border);
  }

:where(.visual-refresh) .lookFilled__201d5.colorRed__201d5 {
    border: 1px solid var(--button-danger-border);
  }

:where(.visual-refresh) .lookFilled__201d5.colorGreen__201d5 {
    border: 1px solid var(--button-positive-border);
  }

:where(.visual-refresh) .lookFilled__201d5.colorPrimary__201d5 {
    border-color: var(--border-faint);
  }

/* make the spinner match the text in the new version. It doesn't in the old version */

:where(.visual-refresh) .lookFilled__201d5.colorPrimary__201d5 .spinnerItem__201d5 {
      background-color: var(--button-secondary-text);
    }

:where(.visual-refresh) .lookFilled__201d5.colorTransparent__201d5 {
    border-color: var(--border-faint);
  }

:where(.visual-refresh) .lookFilled__201d5.colorWhite__201d5 {
    border-color: var(--opacity-8);
  }

:where(.visual-refresh) .lookFilled__201d5.colorWhite__201d5:hover {
      background-color: var(--button-filled-white-background-hover);
    }

:where(.visual-refresh) .lookFilled__201d5.colorWhite__201d5:active {
      background-color: var(--button-filled-white-background-active);
    }

.dots__5ad89 {
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  color: var(--white-500);
}

.dots__5ad89.themed__5ad89 {
  color: var(--text-normal);
}

.svg__2338f {
  contain: paint;
}

.mask_a423bd {
  display: block;
}

.status_a423bd {
  width: 100%;
  height: 100%;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .status_a423bd {
    forced-color-adjust: none !important;
  }

.enable-forced-colors .status_a423bd {
    /* don't allow color overridding on these icons */
    /* stylelint-disable-next-line declaration-no-important */
  }

.layerContainer_da8173 {
  background: none !important;
}

.layerContainer_da8173 {
  position: absolute;
  top: 0;
  left: 0;
  /* stylelint-disable-next-line discord/var-validator */
  right: 0;
  right: var(--devtools-sidebar-width, 0);
  bottom: 0;
  /* stylelint-disable-next-line declaration-no-important */ /* don't want theme background color */
  pointer-events: none;
  z-index: 1002; /* needed inside native app */
}

.clickTrapContainer_da8173 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
}

.clickTrapContainer_da8173.trapClicks_da8173 {
  pointer-events: auto;
}

.layer_da8173 {
  position: absolute;
  pointer-events: auto;
}

.emptyError_da8173:empty:before {
  content: 'RENDERING NULL FOR A POPOUT/MODAL/LAYER WILL BREAK THE APP';
  word-break: break-word;
  display: block;
  background-color: red;
  color: var(--white-500);
  font-size: 32px;
  max-width: 500px;
  padding: 8px;
  font-weight: 700;
  border: 10px dashed var(--green-230);
}

.layerHidden_da8173 {
  visibility: hidden;
}

.disabledPointerEvents_da8173 {
  pointer-events: none;
}

/* stylelint-disable discord/var-validator */
.tooltip__382e7 {
  position: relative;
  border-radius: 5px;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  max-width: 190px;
  box-sizing: border-box;
  word-wrap: break-word;
  z-index: 1002; /* ideally remove after other layers (e.g. popouts) converted */
  will-change: opacity, transform;
}
.tooltipDisablePointerEvents__382e7 {
  pointer-events: none;
}
.tooltipPointer__382e7 {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-width: 5px;
  pointer-events: none;
}
.tooltipContent__382e7 {
  padding: 8px 12px;
  overflow: hidden;
}
.tooltipContentAllowOverflow__382e7 {
  overflow: visible;
}
.tooltipTop__382e7 {
  transform-origin: 50% 100%;
}
.tooltipTop__382e7 .tooltipPointer__382e7 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
}
.tooltipCenter__382e7,
.tooltipBottom__382e7 {
  transform-origin: 50% 0%;
}
.tooltipCenter__382e7 .tooltipPointer__382e7,
.tooltipBottom__382e7 .tooltipPointer__382e7 {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-top-width: 5px;
  transform: rotate(180deg);
}
.tooltipLeft__382e7 {
  transform-origin: 100% 50%;
}
.tooltipLeft__382e7 .tooltipPointer__382e7 {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -5px;
  border-right-width: 5px;
  transform: rotate(-90deg);
}
.tooltipRight__382e7 {
  transform-origin: 0% 50%;
}
.tooltipRight__382e7 .tooltipPointer__382e7 {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -5px;
  border-left-width: 5px;
  transform: rotate(90deg);
}
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .tooltip__382e7 {
    border: 1px solid CanvasText;
  }
/* CSS triangles don't work, since transparent borders get a color with forced-colors */
.enable-forced-colors .tooltipPointer__382e7 {
    background-color: CanvasText;
    border: none;
    border-radius: 100%;
    height: 10px;
    width: 10px;
  }
.tooltip__382e7 {
  box-shadow: var(--shadow-high);
  color: var(--text-normal);
}
.tooltipPrimary__382e7 {
  background-color: var(--background-floating);
}
.tooltipPrimary__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--background-floating);
}
.tooltipNested__382e7 {
  background-color: var(--background-nested-floating);
}
.tooltipNested__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--background-nested-floating);
}
.tooltipBlack__382e7 {
  background-color: var(--black-500);
  color: var(--white-500);
}
.tooltipBlack__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--black-500);
}
.tooltipGrey__382e7 {
  background-color: var(--primary-700);
  color: var(--white-500);
}
.tooltipGrey__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--primary-700);
}
.tooltipBrand__382e7 {
  color: var(--white-500);
  background-color: var(--brand-500);
}
.tooltipBrand__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--brand-500);
}
.tooltipRed__382e7 {
  color: var(--white-500);
  background-color: var(--status-danger);
}
.tooltipRed__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--status-danger);
}
.tooltipGreen__382e7 {
  color: var(--white-500);
  background-color: var(--green-360);
}
.tooltipGreen__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--green-360);
}
.tooltipYellow__382e7 {
  color: var(--status-warning-text);
  background-color: var(--status-warning-background);
}
.tooltipYellow__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--status-warning-background);
}
.tooltipPremium__382e7 {
  background: linear-gradient(
    270deg,
    var(--premium-tier-2-pink-for-gradients) 0%,
    var(--premium-tier-2-pink-for-gradients-2) 33.63%,
    var(--premium-tier-2-purple-for-gradients) 100%
  );
}
.tooltipPremium__382e7 .tooltipPointer__382e7 {
  border-top-color: var(--premium-tier-2-pink-for-gradients-2);
}
.tooltipPointerBg__382e7 {
  display: none;
}
:where(.visual-refresh) .tooltip__382e7 {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
  }
:where(.visual-refresh) .tooltipPointer__382e7:not(.tooltipPointerBg__382e7) {
    z-index: 1;
  }
:where(.visual-refresh) .tooltipTop__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7) {
    margin-top: -1.5px;
  }
:where(.visual-refresh) .tooltipLeft__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7) {
    margin-left: -1.5px;
  }
:where(.visual-refresh) .tooltipRight__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7) {
    margin-right: -1.5px;
  }
:where(.visual-refresh) .tooltipBottom__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7),
  :where(.visual-refresh) .tooltipCenter__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7) {
    margin-bottom: -1.5px;
  }
:where(.visual-refresh) .tooltipPrimary__382e7 {
    --tooltip-pointer-bg: var(--background-floating);
    background-color: var(--background-floating);
  }
:where(.visual-refresh) .tooltipPrimary__382e7 .tooltipPointer__382e7 {
      border-top-color: var(--background-floating);
    }
:where(.visual-refresh) .tooltipNested__382e7 {
    --tooltip-pointer-bg: var(--background-nested-floating);
  }
:where(.visual-refresh) .tooltipBlack__382e7 {
    --tooltip-pointer-bg: var(--black-500);
  }
:where(.visual-refresh) .tooltipGrey__382e7 {
    --tooltip-pointer-bg: var(--primary-700);
  }
:where(.visual-refresh) .tooltipBrand__382e7 {
    --tooltip-pointer-bg: var(--brand-500);
  }
:where(.visual-refresh) .tooltipRed__382e7 {
    --tooltip-pointer-bg: var(--status-danger);
  }
:where(.visual-refresh) .tooltipGreen__382e7 {
    --tooltip-pointer-bg: var(--green-360);
  }
:where(.visual-refresh) .tooltipYellow__382e7 {
    --tooltip-pointer-bg: var(--status-warning-background);
  }
:where(.visual-refresh) .tooltipPointer__382e7 {
    border-top-color: var(--tooltip-pointer-bg);
  }
:where(.visual-refresh) .tooltipPointer__382e7.tooltipPointerBg__382e7 {
    display: block;
    --border-width: 5px;
  }
:where(.visual-refresh) .tooltipPointer__382e7.tooltipPointerBg__382e7:before,
    :where(.visual-refresh) .tooltipPointer__382e7.tooltipPointerBg__382e7:after {
      content: '';
      position: absolute;
      border-left: var(--border-width) solid transparent;
      border-right: var(--border-width) solid transparent;
      top: 100%;
      left: 50%;
      margin-left: calc(var(--border-width) * -1);
    }
:where(.visual-refresh) .tooltipPointer__382e7.tooltipPointerBg__382e7:before {
      border-top: var(--border-width) solid var(--tooltip-pointer-bg);
      margin-top: -5px;
    }
:where(.visual-refresh) .tooltipPointer__382e7.tooltipPointerBg__382e7:after {
      border-top: var(--border-width) solid var(--border-subtle);
      margin-top: -5px;
      z-index: 1;
    }
.custom-theme-background .tooltipPointer__382e7 {
    display: none;
  }
.custom-theme-background .tooltip__382e7 {
    border: 1px solid var(--border-strong);
  }
/* stylelint-enable discord/var-validator */

.wrapper__44b0c {
  position: relative;
  border-radius: 50%;
}

.pointer__44b0c {
  cursor: pointer;
}

.mask__44b0c {
  pointer-events: none;
  position: relative;
  display: block;
  /* Width is auto because animated avatars aren't square and we want them to
   * scale appropriately  */
  width: auto;
}

.svg__44b0c {
  /* Set to absolute position to avoid expensive layouts when typing. */
  position: absolute;
  contain: paint;
}

.status__44b0c {
  position: absolute;
  bottom: 0;
  right: 0;
  height: auto;
}

.cursorDefault__44b0c {
  cursor: default;
}

.avatarStack__44b0c {
  display: grid;
  width: 100%;
  height: 100%;
}

.avatar__44b0c,
.avatarSpeaking__44b0c {
  width: 100%;
  height: 100%;
  grid-area: 1 / 1;
}

.avatar__44b0c {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.avatar__44b0c:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--background-modifier-accent);
}

.avatarSpeaking__44b0c {
  box-shadow:
    inset 0 0 0 2px var(--status-speaking),
    inset 0 0 0 3px var(--background-secondary);
  border-radius: 50%;
}

.pointerEvents__44b0c {
  pointer-events: auto;
}

.avatarDecoration__44b0c {
  position: absolute;
  top: var(--custom-avatar-avatar-decoration-border-position);
  left: var(--custom-avatar-avatar-decoration-border-position);
  pointer-events: none;
  contain: paint;
}

.wrapper_cc5dd2 {
  box-sizing: border-box;
  position: relative;
  width: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  cursor: pointer;
}

.wrapperSimple_cc5dd2 {
  
  border-radius: 50%;
  overflow: hidden;
}

.svg_cc5dd2 {
  contain: paint;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}

.visual-refresh .svg_cc5dd2 {
    top: -4px;
    left: -4px;
  }

.noContain_cc5dd2 {
  contain: style;
}

.lowerBadge_cc5dd2 {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.isHighlighted_cc5dd2 {
  stroke: black;
  stroke-width: 8px;
}

.upperBadge_cc5dd2 {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
}

.focusStroke_cc5dd2 {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
}

.focusFill_cc5dd2 {
  fill: transparent;
}

.highlight_cc5dd2 {
  fill: transparent;
}

.keyboard-mode .focusStroke_cc5dd2 {
    fill: var(--blue-345);
    stroke: var(--blue-345);
    stroke-width: 8px;
  }

.keyboard-mode .focusFill_cc5dd2 {
    fill: var(--background-tertiary);
  }

.keyboard-mode .simpleFocused_cc5dd2 {
    box-shadow: 0 0 0 4px var(--blue-345);
  }

.hiddenVisually__27f77,
.showOnFocus__27f77:not(:focus-within) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.defaultColor__5345c {
  color: var(--header-primary);
}

.defaultColor__4bd52 {
  color: var(--text-normal);
}

.lineClamp1__4bd52 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lineClamp2Plus__4bd52 {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.selectable__4bd52 {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.tabularNumbers__4bd52 {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/*
 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 *
 * This file is an output of the Typography pipeline, which is defined here:
 *
 *   discord_design_system/modules/token_definitions/Typography.tsx
 *
 * Then run:
 *
 *   yarn generate
 */
.heading-sm\/normal_cf4812 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.heading-sm\/normal_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.heading-sm\/medium_cf4812 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.heading-sm\/medium_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.heading-sm\/semibold_cf4812 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.heading-sm\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.heading-sm\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.heading-sm\/bold_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.heading-sm\/extrabold_cf4812 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 800;
}
.heading-sm\/extrabold_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.heading-md\/normal_cf4812 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-md\/normal_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.heading-md\/medium_cf4812 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-md\/medium_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.heading-md\/semibold_cf4812 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-md\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.heading-md\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-md\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.heading-md\/extrabold_cf4812 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-md\/extrabold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.heading-lg\/normal_cf4812 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.heading-lg\/normal_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.heading-lg\/medium_cf4812 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.heading-lg\/medium_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.heading-lg\/semibold_cf4812 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.heading-lg\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.heading-lg\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.heading-lg\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.heading-lg\/extrabold_cf4812 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}
.heading-lg\/extrabold_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.heading-xl\/normal_cf4812 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xl\/normal_cf4812.fontScaling_cf4812 {
    font-size: 1.5rem;
  }
.heading-xl\/medium_cf4812 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xl\/medium_cf4812.fontScaling_cf4812 {
    font-size: 1.5rem;
  }
.heading-xl\/semibold_cf4812 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xl\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 1.5rem;
  }
.heading-xl\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xl\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1.5rem;
  }
.heading-xl\/extrabold_cf4812 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xl\/extrabold_cf4812.fontScaling_cf4812 {
    font-size: 1.5rem;
  }
.heading-xxl\/normal_cf4812 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xxl\/normal_cf4812.fontScaling_cf4812 {
    font-size: 2rem;
  }
.heading-xxl\/medium_cf4812 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xxl\/medium_cf4812.fontScaling_cf4812 {
    font-size: 2rem;
  }
.heading-xxl\/semibold_cf4812 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xxl\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 2rem;
  }
.heading-xxl\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xxl\/bold_cf4812.fontScaling_cf4812 {
    font-size: 2rem;
  }
.heading-xxl\/extrabold_cf4812 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xxl\/extrabold_cf4812.fontScaling_cf4812 {
    font-size: 2rem;
  }
.eyebrow_cf4812 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eyebrow_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/normal_cf4812 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.heading-deprecated-12\/normal_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/medium_cf4812 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.heading-deprecated-12\/medium_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/semibold_cf4812 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.heading-deprecated-12\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.heading-deprecated-12\/bold_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/extrabold_cf4812 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 800;
}
.heading-deprecated-12\/extrabold_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.redesign\/heading-18\/bold_cf4812 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/heading-18\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1.125rem;
  }
.text-xxs\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
}
.text-xxs\/normal_cf4812.fontScaling_cf4812 {
    font-size: 0.625rem;
  }
.text-xxs\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
}
.text-xxs\/medium_cf4812.fontScaling_cf4812 {
    font-size: 0.625rem;
  }
.text-xxs\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
}
.text-xxs\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 0.625rem;
  }
.text-xxs\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}
.text-xxs\/bold_cf4812.fontScaling_cf4812 {
    font-size: 0.625rem;
  }
.text-xs\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.text-xs\/normal_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.text-xs\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.text-xs\/medium_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.text-xs\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.text-xs\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.text-xs\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.text-xs\/bold_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }
.text-sm\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.text-sm\/normal_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.text-sm\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.text-sm\/medium_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.text-sm\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.text-sm\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.text-sm\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.text-sm\/bold_cf4812.fontScaling_cf4812 {
    font-size: 0.875rem;
  }
.text-md\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.text-md\/normal_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.text-md\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.text-md\/medium_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.text-md\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.text-md\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.text-md\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.text-md\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.text-lg\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.text-lg\/normal_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.text-lg\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.text-lg\/medium_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.text-lg\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.text-lg\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.text-lg\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.text-lg\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.redesign\/message-preview\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.redesign\/message-preview\/normal_cf4812.fontScaling_cf4812 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.redesign\/message-preview\/medium_cf4812.fontScaling_cf4812 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.redesign\/message-preview\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/message-preview\/bold_cf4812.fontScaling_cf4812 {
    font-size: 0.9375rem;
  }
.redesign\/channel-title\/normal_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 400;
}
.redesign\/channel-title\/normal_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.redesign\/channel-title\/medium_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 500;
}
.redesign\/channel-title\/medium_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.redesign\/channel-title\/semibold_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
}
.redesign\/channel-title\/semibold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.redesign\/channel-title\/bold_cf4812 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 700;
}
.redesign\/channel-title\/bold_cf4812.fontScaling_cf4812 {
    font-size: 1rem;
  }
.display-sm_cf4812 {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.display-sm_cf4812.fontScaling_cf4812 {
    font-size: 1.25rem;
  }
.display-md_cf4812 {
  font-family: var(--font-headline);
  font-size: 34px;
  line-height: 1.0588235294117647;
  font-weight: 800;
}
.display-md_cf4812.fontScaling_cf4812 {
    font-size: 2.125rem;
  }
.display-lg_cf4812 {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 0.9545454545454546;
  font-weight: 800;
}
.display-lg_cf4812.fontScaling_cf4812 {
    font-size: 2.75rem;
  }
.code_cf4812 {
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.code_cf4812.fontScaling_cf4812 {
    font-size: 0.75rem;
  }

.stack_dbd263 {
  width: 100%;
  display: flex;
}

  .stack_dbd263[data-direction='vertical'] {
    flex-direction: column;
  }

  .stack_dbd263[data-direction='horizontal'] {
    flex-direction: row;
  }

  .stack_dbd263[data-align='start'] {
    align-items: flex-start;
  }

  .stack_dbd263[data-align='end'] {
    align-items: flex-end;
  }

  .stack_dbd263[data-align='center'] {
    align-items: center;
  }

  .stack_dbd263[data-align='stretch'] {
    align-items: stretch;
  }

  .stack_dbd263[data-align='baseline'] {
    align-items: baseline;
  }

  .stack_dbd263[data-justify='start'] {
    justify-content: flex-start;
  }

  .stack_dbd263[data-justify='end'] {
    justify-content: flex-end;
  }

  .stack_dbd263[data-justify='center'] {
    justify-content: center;
  }

  .stack_dbd263[data-justify='space-around'] {
    justify-content: space-around;
  }

  .stack_dbd263[data-justify='space-between'] {
    justify-content: space-between;
  }

.linkButton_a995b9 {
  /* style resets to normalize the look of the button */
  box-sizing: border-box;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  color: inherit;
  padding: 0;
  margin: 0;
  flex-grow: 0;
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
  text-align: left;
  font-weight: normal;
  font-weight: initial;
  font-size: medium;
  font-size: initial;

  /* styles specific to the LinkButton */
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.default_a995b9 {
  color: var(--text-primary);
}

.white_a995b9 {
  color: var(--white);
}

.primary_a995b9 {
  color: var(--text-brand);
}

.destructive_a995b9 {
  color: var(--text-danger);
}

.link_a995b9 {
  color: var(--text-link);
}

.linkButton_a995b9:hover .text_a995b9 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

:where(.decorate-links) .text_a995b9 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

:where(.low-saturation) .link_a995b9 {
  /* 10% brightness increase for low contrast in dark theme */
  color: var(--text-link-low-saturation);
}

.button__06eda {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
}

.full-motion .button__06eda {
    transition:
      color 0.2s ease, background-color 0.2s ease;
  }

.primary__06eda {
  background-color: var(--background-primary);
  color: var(--header-primary);
}

.primary__06eda:hover:not(.disabled__06eda) {
    background-color: var(--background-secondary);
    color: var(--interactive-active);
  }

.secondary__06eda {
  background-color: var(--background-secondary);
  color: var(--header-secondary);
}

.secondary__06eda:hover:not(.disabled__06eda) {
    background-color: var(--background-primary);
    color: var(--interactive-active);
  }

.tertiary__06eda {
  background-color: var(--background-tertiary);
  color: var(--interactive-normal);
}

.tertiary__06eda:hover:not(.disabled__06eda) {
    background-color: var(--background-floating);
    color: var(--interactive-active);
  }

.visual-refresh .primary__06eda,
  .visual-refresh .secondary__06eda,
  .visual-refresh .tertiary__06eda {
    background-color: var(--button-secondary-background);
    color: var(--button-secondary-text);
  }

.visual-refresh .primary__06eda:hover, .visual-refresh .secondary__06eda:hover, .visual-refresh .tertiary__06eda:hover {
      background-color: var(--button-secondary-background-hover);
    }

.size24__06eda {
  padding: 4px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
}

.size32__06eda {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

.size36__06eda {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}

.disabled__06eda {
  opacity: 0.3;
  pointer-events: none;
}

.card__73069 {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  --__card-accent-color: transparent;
  border-color: transparent;
  border-color: var(--__card-accent-color);
}

  .card__73069:not(.outline__73069) {
    background-color: var(--__card-accent-color);
  }

  .card__73069 a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.cardDanger__73069 a, .cardWarning__73069 a, .cardSuccess__73069 a, .cardBrand__73069 a {
    font-weight: 700;
  }

.cardDanger__73069 {
  
  --__card-accent-color: var(--status-danger-background);
  color: var(--status-danger-text);
}

.cardWarning__73069 {
  
  --__card-accent-color: var(--status-warning-background);
}

.cardSuccess__73069 {
  
  --__card-accent-color: var(--green-360);
}

.cardBrand__73069 {
  
  --__card-accent-color: var(--brand-500);
}

.visual-refresh .cardWarning__73069 {
    --__card-accent-color: var(--background-feedback-warning);
    color: var(--text-feedback-warning);
  }

.visual-refresh .cardDanger__73069 {
    --__card-accent-color: var(--background-feedback-critical);
    color: var(--text-feedback-critical);
  }

.visual-refresh .cardSuccess__73069 {
    --__card-accent-color: var(--background-feedback-positive);
    color: var(--text-feedback-positive);
  }

.cardPrimaryOutlineEditable__73069 {
  
}

.cardPrimaryEditable__73069 {
  
}

.cardPrimaryOutline__73069 {
  
}

.cardPrimary__73069 {
  
}

.card__73069 a {
    color: var(--text-link);
  }

.cardDanger__73069 a, .cardWarning__73069 a, .cardSuccess__73069 a, .cardBrand__73069 a {
    color: var(--white-500);
  }

.cardPrimary__73069 {
  background: var(--deprecated-card-bg);
  border-color: var(--background-tertiary);
}

.cardPrimary__73069.editable__73069 {
  background: var(--deprecated-card-editable-bg);
  border-color: var(--background-tertiary);
}

.cardPrimary__73069.outline__73069 {
  border-color: var(--background-tertiary);
}

.visual-refresh .card__73069 {
    border-radius: var(--radius-sm);
  }

.visual-refresh .cardPrimary__73069,
  .visual-refresh .cardPrimary__73069.editable__73069 {
    background: var(--card-primary-bg);
    border: 1px solid var(--border-subtle);
  }

/* Wrapper */
.checkboxWrapper_f525d3 {
  display: flex;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 1 1 auto;
  font-size: 16px;
  max-width: 100%;
}
.checkboxWrapper_f525d3.row_f525d3 {
    background-color: var(--background-secondary);
    padding: 10px;
    border-radius: 3px;
  }
.checkboxWrapper_f525d3.row_f525d3.checked_f525d3 {
      background-color: var(--background-tertiary);
      color: var(--interactive-active);
    }
.checkboxWrapper_f525d3.row_f525d3:hover:not(.checked_f525d3) {
      background-color: var(--background-modifier-hover);
      color: var(--interactive-hover);
    }
.checkboxWrapper_f525d3.row_f525d3:active:not(.checked_f525d3) {
      background-color: var(--background-modifier-active);
      color: var(--interactive-active);
    }
.checkboxWrapperDisabled_f525d3 {
  
  opacity: 0.6;
}
.checkboxWrapperDisabled_f525d3.row_f525d3 {
    opacity: 0.3;
  }
.checkboxWrapperDisabled_f525d3 .checkbox_f525d3 {
    opacity: 1;
  }
.alignTop_f525d3 {
  align-items: top;
}
.alignCenter_f525d3 {
  align-items: center;
}
/* Input */
.input_f525d3 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.inputDefault_f525d3,
.inputDisabled_f525d3 {
  /* the following is a trick to fix the focus state from rendering incorrectly */
  width: 100%;
  height: 100%;
  z-index: 1;
}
.inputDisabled_f525d3 {
  
}
.inputDefault_f525d3 {
  
}
.inputDefault_f525d3 {
  cursor: pointer;
}
.inputDisabled_f525d3 {
  cursor: not-allowed;
}
.inputReadonly_f525d3 {
  
  cursor: default;
  width: 0;
  height: 0;
  z-index: -1;
}
.box_f525d3 {
  border-radius: 6px;
}
.smallBox_f525d3 {
  border-radius: 4px;
}
.round_f525d3 {
  border-radius: 50%;
}
/* Checkbox */
.checkbox_f525d3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
}
/* Label */
.label_f525d3 {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-normal);
}
.labelClickable_f525d3 {
  cursor: pointer;
}
.labelDisabled_f525d3 {
  cursor: not-allowed;
}
.labelForward_f525d3 {
  padding-left: 8px;
}
.labelReversed_f525d3 {
  padding-right: 8px;
}
/* Light Theme */
html:not(.visual-refresh).theme-light .checkbox_f525d3 {
      border-color: var(--primary-300);
    }
html:not(.visual-refresh).theme-light.checked_f525d3 {
      background: var(--white-500);
    }
/* Dark Theme */
html:not(.visual-refresh).theme-dark .checkbox_f525d3 {
      border-color: var(--primary-400);
    }
html:not(.visual-refresh).theme-dark.checked_f525d3 {
      border-color: var(--white-500);
      background-color: var(--white-500);
    }
:where(.visual-refresh) .checkbox_f525d3 {
    border-radius: 6px;
    border-color: var(--checkbox-border-default);
    background-color: var(--checkbox-background-default);
  }
:where(.visual-refresh) .checkbox_f525d3.checkboxDisabled_f525d3 {
      opacity: 0.6;
    }
:where(.visual-refresh) .checkbox_f525d3.checked_f525d3 {
      border-color: var(--checkbox-border-checked);
      background-color: var(--checkbox-background-checked);
    }
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .checkbox_f525d3 {
    border-color: ButtonText !important;
    background-color: ButtonFace !important;
  }
.enable-forced-colors .checkbox_f525d3 {
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
  }
.enable-forced-colors .checkbox_f525d3.checked_f525d3 {
    border-color: HighlightText !important;
    background-color: Highlight !important;
  }
.enable-forced-colors .checkbox_f525d3.checked_f525d3 {
    /* override inline styles */
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
  }
.enable-forced-colors .checkbox_f525d3.checked_f525d3 svg * {
      fill: HighlightText;
    }
.enable-forced-colors .checkboxWrapperDisabled_f525d3 {
    opacity: 1;
  }
.enable-forced-colors .checkboxWrapperDisabled_f525d3.row_f525d3 {
      opacity: 1;
    }
.enable-forced-colors .checkboxWrapperDisabled_f525d3 .checkbox_f525d3 {
      border-color: GrayText !important;
      background-color: transparent !important;
    }
.enable-forced-colors .checkboxWrapperDisabled_f525d3 .checkbox_f525d3 {
      /* stylelint-disable-next-line declaration-no-important */
      /* stylelint-disable-next-line declaration-no-important */
    }
.enable-forced-colors .checkboxWrapperDisabled_f525d3 .checkbox_f525d3.checked_f525d3 svg * {
          fill: GrayText;
        }
/* style the <Text> inside the label */
.enable-forced-colors .labelDisabled_f525d3,
    .enable-forced-colors .labelDisabled_f525d3 > div {
      color: GrayText;
    }

.collapseable__217b7 {
  position: relative;
  background-color: var(--background-secondary-alt);
  border-radius: 8px;

  transition: background-color 0.1s ease;
}

  .collapseable__217b7:active {
    background-color: var(--background-accent);
  }

  .collapseable__217b7:before {
    box-shadow: var(--elevation-stroke), var(--elevation-low);
    opacity: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 0;
    overflow: visible;
    border-radius: 8px;
  }

  .collapseable__217b7.toggled__217b7 {
    cursor: default;
  }

  .collapseable__217b7.toggled__217b7:active {
      background-color: var(--background-secondary);
    }

  .collapseable__217b7.toggled__217b7:before {
      opacity: 1;
    }

  .collapseable__217b7:not(:last-child) {
    margin-bottom: 16px;
  }

.visual-refresh .collapseable__217b7 {
    background-color: var(--background-base-low);
    border-radius: var(--radius-sm);
  }

.visual-refresh .collapseable__217b7:active {
      background-color: var(--background-mod-subtle);
    }

.visual-refresh .collapseable__217b7:before {
      display: none;
    }

.header__217b7 {
  position: relative;
  cursor: pointer;
}

.header__217b7.toggled__217b7 {
    cursor: default;
  }

.contentExpandContainer__217b7 {
  overflow: hidden;
  flex: 1;
}

.showOverflow__217b7 {
  overflow: visible;
}

.focusTarget__89030 {
  width: 0;
  height: 0;
  pointer-events: none;
}

.scrollerBase__99f8c {
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  flex: 1 1 auto;
}

.thin__99f8c,
.auto__99f8c,
.none__99f8c {
  
}

.thin__99f8c::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.thin__99f8c::-webkit-scrollbar-track {
  border: 2px solid var(--scrollbar-thin-track);
  background-color: var(--scrollbar-thin-track);
  border-color: var(--scrollbar-thin-track);
}

.thin__99f8c::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--scrollbar-thin-thumb);
  min-height: 40px;
}

.thin__99f8c::-webkit-scrollbar-corner {
  background-color: transparent;
}

.auto__99f8c::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.auto__99f8c::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: var(--scrollbar-auto-track);
}

.auto__99f8c::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 8px;
  background-color: var(--scrollbar-auto-thumb);
  min-height: 40px;
}

.auto__99f8c::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* NOTE(yeyus): This is used to have custom overrides for the scroller track and thumb for transparent background
 * themes, electron v17 doesn't seem to support background-attachment fixed, so we have to get creative */

.theme-dark.custom-theme-background .customTheme__99f8c.auto__99f8c::-webkit-scrollbar-track {
      background-size: 200vh;
      background-image: linear-gradient(rgb(var(--bg-overlay-color) / 0.4), rgb(var(--bg-overlay-color) / 0.4)),
        var(--custom-theme-background);
    }

.theme-dark.custom-theme-background .customTheme__99f8c.auto__99f8c::-webkit-scrollbar-thumb,
    .theme-dark.custom-theme-background .customTheme__99f8c.thin__99f8c::-webkit-scrollbar-thumb {
      background-size: 200vh;
      background-image: linear-gradient(
          rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-4)),
          rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-4))
        ),
        var(--custom-theme-background);
    }

.theme-light.custom-theme-background .customTheme__99f8c.auto__99f8c::-webkit-scrollbar-track {
      background-size: 200vh;
      background-image: linear-gradient(
          rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-2)),
          rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-2))
        ),
        var(--custom-theme-background);
    }

.theme-light.custom-theme-background .customTheme__99f8c.auto__99f8c::-webkit-scrollbar-thumb,
    .theme-light.custom-theme-background .customTheme__99f8c.thin__99f8c::-webkit-scrollbar-thumb {
      background-size: 100vh;
      background-image: rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3));
    }

.none__99f8c::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.fade__99f8c::-webkit-scrollbar-thumb,
.fade__99f8c::-webkit-scrollbar-track {
  visibility: hidden;
}

.fade__99f8c:hover::-webkit-scrollbar-thumb,
.fade__99f8c:hover::-webkit-scrollbar-track {
  visibility: visible;
}

.scrolling__99f8c.fade__99f8c:focus-within::-webkit-scrollbar-thumb,
.scrolling__99f8c.fade__99f8c:focus-within::-webkit-scrollbar-track {
  visibility: visible;
}

/**
 * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
 * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
 * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
 */

.no-webkit-scrollbar .thin__99f8c {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
  }

.no-webkit-scrollbar .thin__99f8c.fade__99f8c.scrolling__99f8c,
    .no-webkit-scrollbar .thin__99f8c.fade__99f8c:hover {
      scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
    }

.no-webkit-scrollbar .auto__99f8c {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
  }

.no-webkit-scrollbar .auto__99f8c.fade__99f8c.scrolling__99f8c,
    .no-webkit-scrollbar .auto__99f8c.fade__99f8c:hover {
      scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
    }

.no-webkit-scrollbar .none__99f8c {
    scrollbar-width: none;
  }

.no-webkit-scrollbar .fade__99f8c {
    scrollbar-color: transparent transparent;
  }

.content__99f8c {
  position: relative;
}

.disableScrollAnchor__99f8c {
  overflow-anchor: none;
}

.managedReactiveScroller__99f8c {
  overflow-y: scroll;
  overflow-x: hidden;
}

.pointerCover__99f8c {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors ::-webkit-scrollbar-track {
    border-radius: 0;
    border-width: 1px;
  }

.enable-forced-colors ::-webkit-scrollbar-thumb {
    background-color: CanvasText;
    border-width: 1px;
  }

.enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:hover,
  .enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:active,
  .enable-forced-colors ::-webkit-scrollbar-thumb:vertical:hover,
  .enable-forced-colors ::-webkit-scrollbar-thumb:vertical:active {
    background-color: Highlight;
  }

.enable-forced-colors .auto__99f8c::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

.enable-forced-colors .auto__99f8c::-webkit-scrollbar-track {
    border-width: 1px;
    border-radius: 0;
  }

.container_a45028 {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--background-tertiary);
}

.inner_a45028 {
  box-sizing: border-box;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
  min-width: 0;
  align-items: center;
}

.disabled_a45028 .inner_a45028 {
  opacity: 0.3;
}

.input_a45028 {
  box-sizing: border-box;
  background: transparent;
  border: none;
  resize: none;
  flex: 1;
  min-width: 48px;
  margin: 1px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--text-normal);
}

.input_a45028::-webkit-input-placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.disabled_a45028 .input_a45028 {
  cursor: not-allowed;
}

.tag_a45028 {
  box-sizing: border-box;
  border-radius: 2px;
  text-align: center;
  margin: 1px;
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  transition: none;
  background-color: var(--background-primary);
}

.tag_a45028:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.small_a45028 .input_a45028,
.small_a45028 .tag_a45028 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 20px;
  padding: 0 4px;
}

.medium_a45028 .input_a45028,
.medium_a45028 .tag_a45028 {
  font-size: 16px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 32px;
  height: 30px;
  padding: 0 8px;
}

.large_a45028 .input_a45028,
.large_a45028 .tag_a45028 {
  font-size: 20px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 40px;
  height: 38px;
  padding: 0 16px;
}

.close_a45028 {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.iconLayout_a45028 {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  cursor: text;
}

.pointer_a45028 {
  cursor: pointer;
}

.medium_a45028.iconLayout_a45028 {
  width: 32px;
  height: 32px;
}

.large_a45028.iconLayout_a45028 {
  width: 40px;
  height: 40px;
}

.iconContainer_a45028 {
  position: relative;
  width: 16px;
  height: 16px;
}

.medium_a45028 .iconContainer_a45028 {
  width: 20px;
  height: 20px;
}

.large_a45028 .iconContainer_a45028 {
  width: 24px;
  height: 24px;
}

.icon_a45028 {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transform: rotateZ(90deg);
  color: var(--interactive-normal);
}

.full-motion .icon_a45028 {
    transition:
      transform 0.1s ease-out, opacity 0.1s ease-out;
  }

.icon_a45028.visible_a45028 {
    transform: rotateZ(0deg);
    opacity: 1;
  }

.clear_a45028 {
  
}

.iconLayout_a45028:hover .clear_a45028 {
  color: var(--interactive-hover);
}

.iconLayout_a45028:active .clear_a45028 {
  color: var(--interactive-active);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .input_a45028 {
    border: 1px solid CanvasText;
    border-radius: 4px;
  }

.enable-forced-colors .input_a45028::-webkit-input-placeholder {
    color: GrayText;
  }

.enable-forced-colors .icon_a45028 {
    border: 1px solid Canvas;
    background-color: Canvas;
    color: GrayText;
  }

.enable-forced-colors .clear_a45028 {
    background-color: ButtonFace;
    border-color: CanvasText;
    color: ButtonText;
  }

.enable-forced-colors .iconLayout_a45028:hover .clear_a45028,
  .enable-forced-colors .iconLayout_a45028:active .clear_a45028 {
    border-color: ButtonText;
    color: ButtonText;
  }

:where(.visual-refresh) .container_a45028 {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background-color: var(--input-background);
  }

:where(.visual-refresh) .container_a45028:focus-within {
      border-color: var(--text-link);
    }

:where(.visual-refresh) .medium_a45028 {
    height: 40px;
  }

:where(.visual-refresh) .medium_a45028 .inner_a45028 {
      padding: 10px 12px;
    }

:where(.visual-refresh) .medium_a45028 .input_a45028 {
      height: auto;
      height: initial;
      line-height: 20px;
      padding: 0;
      margin: 0;
    }

:where(.visual-refresh) .medium_a45028.iconLayout_a45028 {
      width: 16px;
      height: 16px;
    }

.combobox__97e86 {
  overflow: hidden;
  height: 100%;
}

.list__97e86 {
  list-style: none;
  height: 100%;
  margin-top: 8px;
}

.list__97e86.scroller__97e86 {
    margin: 0 0 8px 8px;
  }

.item__97e86 {
  font-weight: 500;
  border-radius: 4px;
  padding: 10px 8px;
  margin-bottom: 4px;
  color: var(--interactive-normal);
  cursor: pointer;
  align-items: center;
  display: flex;
  outline: none;
}

.item__97e86:hover:not(.disabled__97e86),
.focused__97e86 {
  background-color: var(--background-modifier-hover);
  color: var(--interactive-hover);
}

.itemLabel__97e86 {
  width: 100%;
}

.itemCheckbox__97e86 ~ .itemLabel__97e86 {
  margin-left: 8px;
}

.empty__97e86 {
  padding: 20px;
  text-align: center;
  display: grid;
  grid-gap: 12px;
}

.disabled__97e86 {
  opacity: 0.3;
  cursor: not-allowed;
}

.selected__97e86 {
  background-color: var(--background-modifier-selected);
}

.selectedBrand__97e86 {
  background: var(--brand-500);
  color: var(--white-500);
}

.selectedBrand__97e86:hover,
.selectedBrand__97e86.focused__97e86 {
  background: var(--brand-600);
  color: var(--white-500);
}

.searchWithScrollbar__97e86 {
  margin: 8px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .item__97e86 {
    border: 1px solid Canvas;
  }

.enable-forced-colors .disabled__97e86 {
    color: GrayText;
    opacity: 1;
  }

.enable-forced-colors .disabled__97e86.focused__97e86 {
      border-color: GrayText;
    }

.enable-forced-colors .item__97e86:hover:not(.disabled__97e86),
  .enable-forced-colors .focused__97e86:not(.disabled__97e86) {
    background-color: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
  }

.enable-forced-colors .selected__97e86:not(.disabled__97e86) {
    background-color: HighlightText;
    color: Highlight;
  }

.enable-forced-colors .selected__97e86:not(.disabled__97e86):hover,
    .enable-forced-colors .selected__97e86:not(.disabled__97e86).focused__97e86 {
      border-color: Highlight;
    }

.container__3dde2 {
  width: 250px;
  overflow: hidden;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-accent);
}

.scroller__3dde2 {
  padding: 0;
}

.list__3dde2 {
  height: 280px;
  padding: 8px 0;
}

/*
The MIT License (MIT)

Copyright (c) 2018 HackerOne Inc and individual contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
.react-datepicker__navigation-icon::before,
  .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow {
    border-color: #ccc;
    border-style: solid;
    border-width: 3px 3px 0 0;
    content: '';
    display: block;
    height: 9px;
    position: absolute;
    top: 6px;
    width: 9px;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,
  .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle {
    margin-left: -4px;
    position: absolute;
    width: 0;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
  .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,
  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after,
  .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {
    box-sizing: content-box;
    position: absolute;
    border: 8px solid transparent;
    height: 0;
    width: 1px;
    content: '';
    z-index: -1;
    border-width: 8px;
    left: -8px;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
  .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before {
    border-bottom-color: #aeaeae;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
    top: 0;
    margin-top: -8px;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,
  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
    border-top: none;
    border-bottom-color: #f0f0f0;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
    top: 0;
  }
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
    top: -1px;
    border-bottom-color: #aeaeae;
  }
.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle {
    bottom: 0;
    margin-bottom: -8px;
  }
.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,
  .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {
    border-bottom: none;
    border-top-color: #fff;
  }
.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {
    bottom: 0;
  }
.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before {
    bottom: -1px;
    border-top-color: #aeaeae;
  }
.react-datepicker-wrapper {
    display: inline-block;
    padding: 0;
    border: 0;
  }
.react-datepicker {
    font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
    font-size: 0.8rem;
    background-color: #fff;
    color: #000;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    display: inline-block;
    position: relative;
  }
.react-datepicker--time-only .react-datepicker__triangle {
    left: 35px;
  }
.react-datepicker--time-only .react-datepicker__time-container {
    border-left: 0;
  }
.react-datepicker--time-only .react-datepicker__time,
  .react-datepicker--time-only .react-datepicker__time-box {
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
  }
.react-datepicker__triangle {
    position: absolute;
    left: 50px;
  }
.react-datepicker-popper {
    z-index: 1;
  }
.react-datepicker-popper[data-placement^='bottom'] {
    padding-top: 10px;
  }
.react-datepicker-popper[data-placement='bottom-end'] .react-datepicker__triangle,
  .react-datepicker-popper[data-placement='top-end'] .react-datepicker__triangle {
    left: auto;
    right: 50px;
  }
.react-datepicker-popper[data-placement^='top'] {
    padding-bottom: 10px;
  }
.react-datepicker-popper[data-placement^='right'] {
    padding-left: 8px;
  }
.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {
    left: auto;
    right: 42px;
  }
.react-datepicker-popper[data-placement^='left'] {
    padding-right: 8px;
  }
.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {
    left: 42px;
    right: auto;
  }
.react-datepicker__header {
    text-align: center;
    background-color: #f0f0f0;
    border-bottom: 1px solid #aeaeae;
    border-top-left-radius: 0.3rem;
    padding: 8px 0;
    position: relative;
  }
.react-datepicker__header--time {
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px;
  }
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
    border-top-left-radius: 0;
  }
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: 0.3rem;
  }
.react-datepicker__year-dropdown-container--select,
  .react-datepicker__month-dropdown-container--select,
  .react-datepicker__month-year-dropdown-container--select,
  .react-datepicker__year-dropdown-container--scroll,
  .react-datepicker__month-dropdown-container--scroll,
  .react-datepicker__month-year-dropdown-container--scroll {
    display: inline-block;
    margin: 0 2px;
  }
.react-datepicker__current-month,
  .react-datepicker-time__header,
  .react-datepicker-year-header {
    margin-top: 0;
    color: #000;
    font-weight: bold;
    font-size: 0.944rem;
  }
.react-datepicker-time__header {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
.react-datepicker__navigation {
    align-items: center;
    background: none;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 2px;
    padding: 0;
    border: none;
    z-index: 1;
    height: 32px;
    width: 32px;
    text-indent: -999em;
    overflow: hidden;
  }
.react-datepicker__navigation--previous {
    left: 2px;
  }
.react-datepicker__navigation--next {
    right: 2px;
  }
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: 85px;
  }
.react-datepicker__navigation--years {
    position: relative;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
.react-datepicker__navigation--years-previous {
    top: 4px;
  }
.react-datepicker__navigation--years-upcoming {
    top: -4px;
  }
.react-datepicker__navigation:hover *::before {
    border-color: #a6a6a6;
  }
.react-datepicker__navigation-icon {
    position: relative;
    top: -1px;
    font-size: 20px;
  }
.react-datepicker__navigation-icon--next {
    left: -2px;
  }
.react-datepicker__navigation-icon--next::before {
    transform: rotate(45deg);
    left: -7px;
  }
.react-datepicker__navigation-icon--previous {
    right: -2px;
  }
.react-datepicker__navigation-icon--previous::before {
    transform: rotate(225deg);
    right: -7px;
  }
.react-datepicker__month-container {
    float: left;
  }
.react-datepicker__year {
    margin: 0.4rem;
    text-align: center;
  }
.react-datepicker__year-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 180px;
  }
.react-datepicker__year .react-datepicker__year-text {
    display: inline-block;
    width: 4rem;
    margin: 2px;
  }
.react-datepicker__month {
    margin: 0.4rem;
    text-align: center;
  }
.react-datepicker__month .react-datepicker__month-text,
  .react-datepicker__month .react-datepicker__quarter-text {
    display: inline-block;
    width: 4rem;
    margin: 2px;
  }
.react-datepicker__input-time-container {
    clear: both;
    width: 100%;
    float: left;
    margin: 5px 0 10px 15px;
    text-align: left;
  }
.react-datepicker__input-time-container .react-datepicker-time__caption {
    display: inline-block;
  }
.react-datepicker__input-time-container .react-datepicker-time__input-container {
    display: inline-block;
  }
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
    display: inline-block;
    margin-left: 10px;
  }
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
    width: auto;
  }
.react-datepicker__input-time-container
    .react-datepicker-time__input-container
    .react-datepicker-time__input
    input[type='time']::-webkit-inner-spin-button,
  .react-datepicker__input-time-container
    .react-datepicker-time__input-container
    .react-datepicker-time__input
    input[type='time']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
.react-datepicker__input-time-container
    .react-datepicker-time__input-container
    .react-datepicker-time__input
    input[type='time'] {
    -moz-appearance: textfield;
  }
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
    margin-left: 5px;
    display: inline-block;
  }
.react-datepicker__time-container {
    float: right;
    border-left: 1px solid #aeaeae;
    width: 85px;
  }
.react-datepicker__time-container--with-today-button {
    display: inline;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    position: absolute;
    right: -72px;
    top: 0;
  }
.react-datepicker__time-container .react-datepicker__time {
    position: relative;
    background: white;
    border-bottom-right-radius: 0.3rem;
  }
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: 85px;
    overflow-x: hidden;
    margin: 0 auto;
    text-align: center;
    border-bottom-right-radius: 0.3rem;
  }
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    list-style: none;
    margin: 0;
    height: calc(195px + 0.85rem);
    overflow-y: scroll;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    box-sizing: content-box;
  }
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item {
    height: 30px;
    padding: 5px 10px;
    white-space: nowrap;
  }
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item:hover {
    cursor: pointer;
    background-color: #f0f0f0;
  }
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--selected {
    background-color: #216ba5;
    color: white;
    font-weight: bold;
  }
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--selected:hover {
    background-color: #216ba5;
  }
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--disabled {
    color: #ccc;
  }
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--disabled:hover {
    cursor: default;
    background-color: transparent;
  }
.react-datepicker__week-number {
    color: #ccc;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
  }
.react-datepicker__week-number.react-datepicker__week-number--clickable {
    cursor: pointer;
  }
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
    border-radius: 0.3rem;
    background-color: #f0f0f0;
  }
.react-datepicker__day-names,
  .react-datepicker__week {
    white-space: nowrap;
  }
.react-datepicker__day-names {
    margin-bottom: -8px;
  }
.react-datepicker__day-name,
  .react-datepicker__day,
  .react-datepicker__time-name {
    color: #000;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
  }
.react-datepicker__month--selected,
  .react-datepicker__month--in-selecting-range,
  .react-datepicker__month--in-range,
  .react-datepicker__quarter--selected,
  .react-datepicker__quarter--in-selecting-range,
  .react-datepicker__quarter--in-range {
    border-radius: 0.3rem;
    background-color: #216ba5;
    color: #fff;
  }
.react-datepicker__month--selected:hover,
  .react-datepicker__month--in-selecting-range:hover,
  .react-datepicker__month--in-range:hover,
  .react-datepicker__quarter--selected:hover,
  .react-datepicker__quarter--in-selecting-range:hover,
  .react-datepicker__quarter--in-range:hover {
    background-color: #1d5d90;
  }
.react-datepicker__month--disabled,
  .react-datepicker__quarter--disabled {
    color: #ccc;
    pointer-events: none;
  }
.react-datepicker__month--disabled:hover,
  .react-datepicker__quarter--disabled:hover {
    cursor: default;
    background-color: transparent;
  }
.react-datepicker__day,
  .react-datepicker__month-text,
  .react-datepicker__quarter-text,
  .react-datepicker__year-text {
    cursor: pointer;
  }
.react-datepicker__day:hover,
  .react-datepicker__month-text:hover,
  .react-datepicker__quarter-text:hover,
  .react-datepicker__year-text:hover {
    border-radius: 0.3rem;
    background-color: #f0f0f0;
  }
.react-datepicker__day--today,
  .react-datepicker__month-text--today,
  .react-datepicker__quarter-text--today,
  .react-datepicker__year-text--today {
    font-weight: bold;
  }
.react-datepicker__day--highlighted,
  .react-datepicker__month-text--highlighted,
  .react-datepicker__quarter-text--highlighted,
  .react-datepicker__year-text--highlighted {
    border-radius: 0.3rem;
    background-color: #3dcc4a;
    color: #fff;
  }
.react-datepicker__day--highlighted:hover,
  .react-datepicker__month-text--highlighted:hover,
  .react-datepicker__quarter-text--highlighted:hover,
  .react-datepicker__year-text--highlighted:hover {
    background-color: #32be3f;
  }
.react-datepicker__day--highlighted-custom-1,
  .react-datepicker__month-text--highlighted-custom-1,
  .react-datepicker__quarter-text--highlighted-custom-1,
  .react-datepicker__year-text--highlighted-custom-1 {
    color: magenta;
  }
.react-datepicker__day--highlighted-custom-2,
  .react-datepicker__month-text--highlighted-custom-2,
  .react-datepicker__quarter-text--highlighted-custom-2,
  .react-datepicker__year-text--highlighted-custom-2 {
    color: green;
  }
.react-datepicker__day--selected,
  .react-datepicker__day--in-selecting-range,
  .react-datepicker__day--in-range,
  .react-datepicker__month-text--selected,
  .react-datepicker__month-text--in-selecting-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--selected,
  .react-datepicker__quarter-text--in-selecting-range,
  .react-datepicker__quarter-text--in-range,
  .react-datepicker__year-text--selected,
  .react-datepicker__year-text--in-selecting-range,
  .react-datepicker__year-text--in-range {
    border-radius: 0.3rem;
    background-color: #216ba5;
    color: #fff;
  }
.react-datepicker__day--selected:hover,
  .react-datepicker__day--in-selecting-range:hover,
  .react-datepicker__day--in-range:hover,
  .react-datepicker__month-text--selected:hover,
  .react-datepicker__month-text--in-selecting-range:hover,
  .react-datepicker__month-text--in-range:hover,
  .react-datepicker__quarter-text--selected:hover,
  .react-datepicker__quarter-text--in-selecting-range:hover,
  .react-datepicker__quarter-text--in-range:hover,
  .react-datepicker__year-text--selected:hover,
  .react-datepicker__year-text--in-selecting-range:hover,
  .react-datepicker__year-text--in-range:hover {
    background-color: #1d5d90;
  }
.react-datepicker__day--keyboard-selected,
  .react-datepicker__month-text--keyboard-selected,
  .react-datepicker__quarter-text--keyboard-selected,
  .react-datepicker__year-text--keyboard-selected {
    border-radius: 0.3rem;
    background-color: #2a87d0;
    color: #fff;
  }
.react-datepicker__day--keyboard-selected:hover,
  .react-datepicker__month-text--keyboard-selected:hover,
  .react-datepicker__quarter-text--keyboard-selected:hover,
  .react-datepicker__year-text--keyboard-selected:hover {
    background-color: #1d5d90;
  }
.react-datepicker__day--in-selecting-range,
  .react-datepicker__month-text--in-selecting-range,
  .react-datepicker__quarter-text--in-selecting-range,
  .react-datepicker__year-text--in-selecting-range {
    background-color: rgba(33, 107, 165, 0.5);
  }
.react-datepicker__month--selecting-range .react-datepicker__day--in-range,
  .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range,
  .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range,
  .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range {
    background-color: #f0f0f0;
    color: #000;
  }
.react-datepicker__day--disabled,
  .react-datepicker__month-text--disabled,
  .react-datepicker__quarter-text--disabled,
  .react-datepicker__year-text--disabled {
    cursor: default;
    color: #ccc;
  }
.react-datepicker__day--disabled:hover,
  .react-datepicker__month-text--disabled:hover,
  .react-datepicker__quarter-text--disabled:hover,
  .react-datepicker__year-text--disabled:hover {
    background-color: transparent;
  }
.react-datepicker__month-text.react-datepicker__month--selected:hover,
  .react-datepicker__month-text.react-datepicker__month--in-range:hover,
  .react-datepicker__month-text.react-datepicker__quarter--selected:hover,
  .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
  .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
  .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
  .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
  .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
    background-color: #216ba5;
  }
.react-datepicker__month-text:hover,
  .react-datepicker__quarter-text:hover {
    background-color: #f0f0f0;
  }
.react-datepicker__input-container {
    position: relative;
    display: inline-block;
    width: 100%;
  }
.react-datepicker__year-read-view,
  .react-datepicker__month-read-view,
  .react-datepicker__month-year-read-view {
    border: 1px solid transparent;
    border-radius: 0.3rem;
    position: relative;
  }
.react-datepicker__year-read-view:hover,
  .react-datepicker__month-read-view:hover,
  .react-datepicker__month-year-read-view:hover {
    cursor: pointer;
  }
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
    border-top-color: #b3b3b3;
  }
.react-datepicker__year-read-view--down-arrow,
  .react-datepicker__month-read-view--down-arrow,
  .react-datepicker__month-year-read-view--down-arrow {
    transform: rotate(135deg);
    right: -16px;
    top: 0;
  }
.react-datepicker__year-dropdown,
  .react-datepicker__month-dropdown,
  .react-datepicker__month-year-dropdown {
    background-color: #f0f0f0;
    position: absolute;
    width: 50%;
    left: 25%;
    top: 30px;
    z-index: 1;
    text-align: center;
    border-radius: 0.3rem;
    border: 1px solid #aeaeae;
  }
.react-datepicker__year-dropdown:hover,
  .react-datepicker__month-dropdown:hover,
  .react-datepicker__month-year-dropdown:hover {
    cursor: pointer;
  }
.react-datepicker__year-dropdown--scrollable,
  .react-datepicker__month-dropdown--scrollable,
  .react-datepicker__month-year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
  }
.react-datepicker__year-option,
  .react-datepicker__month-option,
  .react-datepicker__month-year-option {
    line-height: 20px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
.react-datepicker__year-option:first-of-type,
  .react-datepicker__month-option:first-of-type,
  .react-datepicker__month-year-option:first-of-type {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
  }
.react-datepicker__year-option:last-of-type,
  .react-datepicker__month-option:last-of-type,
  .react-datepicker__month-year-option:last-of-type {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
  }
.react-datepicker__year-option:hover,
  .react-datepicker__month-option:hover,
  .react-datepicker__month-year-option:hover {
    background-color: #ccc;
  }
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
  .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
    border-bottom-color: #b3b3b3;
  }
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
  .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
    border-top-color: #b3b3b3;
  }
.react-datepicker__year-option--selected,
  .react-datepicker__month-option--selected,
  .react-datepicker__month-year-option--selected {
    position: absolute;
    left: 15px;
  }
.react-datepicker__close-icon {
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 0 6px 0 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
  }
.react-datepicker__close-icon::after {
    cursor: pointer;
    background-color: #216ba5;
    color: #fff;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    padding: 2px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    content: '\00d7';
  }
.react-datepicker__today-button {
    background: #f0f0f0;
    border-top: 1px solid #aeaeae;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
    clear: left;
  }
.react-datepicker__portal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 2147483647;
  }
.react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 3rem;
    line-height: 3rem;
  }
.react-datepicker__portal .react-datepicker__day-name,
    .react-datepicker__portal .react-datepicker__day,
    .react-datepicker__portal .react-datepicker__time-name {
      width: 2rem;
      line-height: 2rem;
    }
.react-datepicker__portal .react-datepicker__current-month,
  .react-datepicker__portal .react-datepicker-time__header {
    font-size: 1.44rem;
  }

.calendarPicker_d27f17 .react-datepicker {
      border: none;
      padding: 20px;
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      font-family: var(--font-primary);
      background-color: var(--background-secondary-alt);
    }
    .calendarPicker_d27f17 .react-datepicker__header {
      padding-top: 0;
      border-bottom: 0;
      background-color: var(--background-secondary-alt);
    }
    .calendarPicker_d27f17 .react-datepicker__current-month {
      padding: 0;
      margin: 0 0 10px;
      padding-bottom: 20px;
      border-bottom: 1px solid;
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      font-size: 13px;
      line-height: 20px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--header-primary);
    }
    .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous,
    .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next {
      top: 20px;
      left: 20px;
      width: 18px;
      height: 18px;
      border: 1px solid;
      border-radius: 2px;
      background-repeat: no-repeat;
      background-size: 6px 12px;
      background-position: center;
      transform: rotateZ(180deg);
    }
    .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next, .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next {
        left: auto;
        left: initial;
        right: 20px;
        transform: rotateZ(0deg);
      }
    .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous:focus-visible, .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next:focus-visible {
        box-shadow: 0 0 0 4px var(--blue-345);
      }
    .calendarPicker_d27f17 .react-datepicker__navigation-icon:before {
        border-width: 0;
      }
    .calendarPicker_d27f17 .react-datepicker__month {
      margin: 0;
    }
    .calendarPicker_d27f17 .react-datepicker__week:first-of-type > .react-datepicker__day:first-of-type {
        border-radius: 3px 0 0;
      }
    .calendarPicker_d27f17 .react-datepicker__week:first-of-type > .react-datepicker__day:last-of-type {
        border-radius: 0 3px 0 0;
      }
    .calendarPicker_d27f17 .react-datepicker__week:last-of-type > .react-datepicker__day {
        border-bottom: 1px solid var(--primary-200);
      }
    .calendarPicker_d27f17 .react-datepicker__week:last-of-type > .react-datepicker__day:first-of-type {
        border-radius: 0 0 0 3px;
      }
    .calendarPicker_d27f17 .react-datepicker__week:last-of-type > .react-datepicker__day:last-of-type {
        border-radius: 0 0 3px;
      }
    .calendarPicker_d27f17 .react-datepicker__week > .react-datepicker__day:last-of-type {
        border-right: 1px solid;
      }
    .calendarPicker_d27f17 .react-datepicker__day-names {
      margin-bottom: 10px;
    }
    .calendarPicker_d27f17 .react-datepicker__day-name {
      width: 40px;
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      font-size: 13px;
      font-weight: 500;
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      line-height: 1em;
      text-transform: uppercase;
      margin: 0;
    }
    .calendarPicker_d27f17 .react-datepicker__day {
      position: relative;
      box-sizing: border-box;
      margin: 0;
      width: 40px;
      height: 40px;
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      line-height: 40px;
      border-top: 1px solid var(--deprecated-text-input-border-disabled);
      border-left: 1px solid var(--deprecated-text-input-border-disabled);

      color: var(--header-primary);
    }
    .calendarPicker_d27f17 .react-datepicker__day:hover,
      .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--selected:hover,
      .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--keyboard-selected {
        border-radius: 0;
        color: var(--white-500);
        background-color: var(--brand-500);
      }
    .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--selected {
        background: none;
        border-radius: 0;
      }
    .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--selected:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: var(--brand-500);
        }
    .calendarPicker_d27f17 .react-datepicker__day:focus-visible {
        border: 1px solid var(--blue-345);
        border-top-color: var(--blue-345);
        border-left-color: var(--blue-345);
      }
    .calendarPicker_d27f17 .react-datepicker__day--outside-month,
    .calendarPicker_d27f17 .react-datepicker__day--disabled {
      font-weight: 500;
    }
  .calendarPicker_d27f17 .react-datepicker__day--outside-month_d27f17,
  .calendarPicker_d27f17 .react-datepicker__day--disabled_d27f17 {
    background-color: var(--background-secondary);
  }

/* Light Theme */

.theme-light .calendarPicker_d27f17 .react-datepicker__header {
        border-color: hsl(var(--primary-200-hsl) / 0.2);
      }

.theme-light .calendarPicker_d27f17 .react-datepicker__current-month {
        border-bottom-color: hsl(var(--primary-200-hsl) / 0.2);
      }

.theme-light .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous,
      .theme-light .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next {
        border-color: var(--primary-200);
      }

.theme-light .calendarPicker_d27f17 .react-datepicker__week:last-of-type .react-datepicker__day {
          border-bottom-color: var(--primary-200);
        }

.theme-light .calendarPicker_d27f17 .react-datepicker__week .react-datepicker__day:last-of-type {
          border-right-color: var(--primary-200);
        }

.theme-light .calendarPicker_d27f17 .react-datepicker__day-name {
        color: hsl(var(--primary-500-hsl) / 0.6);
      }

.theme-light .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--disabled,
        .theme-light .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--disabled:hover {
          background-color: hsl(var(--black-500-hsl) / 0.05);
          color: hsl(var(--black-500-hsl) / 0.2);
        }

.theme-light .calendarPicker_d27f17 .react-datepicker__day--outside-month,
      .theme-light .calendarPicker_d27f17 .react-datepicker__day--disabled {
        color: hsl(var(--primary-500-hsl) / 0.3);
      }

/* Dark Theme */

.theme-dark .calendarPicker_d27f17 .react-datepicker__header {
        border-color: hsl(var(--primary-800-hsl) / 0.2);
      }

.theme-dark .calendarPicker_d27f17 .react-datepicker__current-month {
        border-bottom-color: hsl(var(--primary-800-hsl) / 0.3);
      }

.theme-dark .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous,
      .theme-dark .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next {
        border-color: var(--primary-800);
      }

.theme-dark .calendarPicker_d27f17 .react-datepicker__week:last-of-type .react-datepicker__day {
          border-bottom-color: var(--primary-800);
        }

.theme-dark .calendarPicker_d27f17 .react-datepicker__week .react-datepicker__day:last-of-type {
          border-right-color: var(--primary-800);
        }

.theme-dark .calendarPicker_d27f17 .react-datepicker__day-name {
        color: hsl(var(--primary-100-hsl) / 0.6);
      }

.theme-dark .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--disabled,
        .theme-dark .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--disabled:hover {
          background-color: var(--primary-630);
          color: hsl(var(--primary-100-hsl) / 0.3);
        }

.theme-dark .calendarPicker_d27f17 .react-datepicker__day--outside-month,
      .theme-dark .calendarPicker_d27f17 .react-datepicker__day--disabled {
        color: hsl(var(--primary-100-hsl) / 0.3);
      }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .calendarPicker_d27f17 .react-datepicker {
        border: 2px solid CanvasText;
      }

.enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day:hover,
        .enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--selected:hover,
        .enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--keyboard-selected {
          background-color: HighlightText;
          color: Highlight;
        }

.enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--selected:after {
            background-color: Highlight;
          }

.enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day:focus-visible {
          background-color: HighlightText;
          color: Highlight;
          border-color: Highlight;
        }

.enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--disabled,
        .enable-forced-colors .calendarPicker_d27f17 .react-datepicker__day.react-datepicker__day--disabled:hover {
          color: GrayText;
        }

.images-light .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous,
      .images-light .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next {
        background-image: url(/assets/f7d0845b63d81c46.svg);
      }

.images-dark .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--previous,
      .images-dark .calendarPicker_d27f17 .react-datepicker__navigation.react-datepicker__navigation--next {
        background-image: url(/assets/a46a54146b77fab4.svg);
      }

.loadingPopout__58f1c {
  background-color: var(--background-secondary);
  display: flex;
  justify-content: center;
  padding: 8px;
}

/* PopoutCSSAnimator should take care of replacing these animations with fades,
but as a precaution, this `:not` selection ensures they won't play if reduced
motion mode is requested. */
.full-motion .translate_faf9c0.animatorTop_faf9c0 {
      transform: translate3d(0, -10px, 0);
    }
.full-motion .translate_faf9c0.animatorBottom_faf9c0 {
      transform: translate3d(0, 10px, 0);
    }
.full-motion .translate_faf9c0.animatorLeft_faf9c0 {
      transform: translate3d(-10px, 0, 0);
    }
.full-motion .translate_faf9c0.animatorRight_faf9c0 {
      transform: translate3d(10px, 0, 0);
    }
.full-motion .translate_faf9c0.animatorCenter_faf9c0 {
      transform: translate3d(0, -10px, 0);
    }
.full-motion .translate_faf9c0.didRender_faf9c0 {
      transition: transform 0.2s ease-out;
      transform: translate3d(0, 0, 0);
    }
/* Remove the transform style so the element is not creating a new stacking context  */
.full-motion .translate_faf9c0[data-popout-animating='false'] {
      transform: none;
      transition: none;
      position: relative;
      z-index: 0;
    }
.full-motion .scale_faf9c0 {
    transform: scale(0.01);
    opacity: 0;
  }
.full-motion .scale_faf9c0.animatorTop_faf9c0 {
      transform-origin: bottom center;
    }
.full-motion .scale_faf9c0.animatorBottom_faf9c0 {
      transform-origin: top center;
    }
.full-motion .scale_faf9c0.animatorLeft_faf9c0 {
      transform-origin: top right;
    }
.full-motion .scale_faf9c0.animatorRight_faf9c0 {
      transform-origin: top left;
    }
.full-motion .scale_faf9c0.animatorRight_faf9c0 {
      transform-origin: top center;
    }
.full-motion .scale_faf9c0.didRender_faf9c0 {
      transition:
        transform 0.12s ease-out, opacity 0.12s ease-out;
      transform: scale(1);
      opacity: 1;
    }
/* Remove the transform style so the element is not creating a new stacking context  */
.full-motion .scale_faf9c0[data-popout-animating='false'] {
      transform: none;
      transition: none;
      position: relative;
      z-index: 0;
    }
/* Fade animations are a subtle enough animation that can be used as a
replacement for scales and translations when reduced motion mode is enabled,
so this is not included in the `motion` selection. */
.fade_faf9c0 {
  opacity: 0;
}
.fade_faf9c0.didRender_faf9c0 {
    transition: opacity 0.08s ease-out;
    opacity: 1;
    position: relative;
    z-index: 0;
  }

.loader__82471 {
  align-items: center;
  background-color: var(--background-tertiary);
  border-radius: 8px;
  display: flex;
  height: 80px;
  justify-content: center;
}

.calendarContainer__9bb02 {
  /* TODO Elevation styles should be tokens in the design system */
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}

.container__9bb02 {
  cursor: pointer;
}

.content__9bb02 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.text__9bb02 {
  margin-right: 8px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon__9bb02 {
  /* Overcome container padding. */
  margin-top: -2px;
  margin-bottom: -2px;
  margin-right: -2px;
  flex-shrink: 0;

  margin-left: auto;

  color: var(--interactive-normal);
}

.disabled__9bb02 {
  cursor: not-allowed;
}

.inputWrapper__0f084 {
  display: flex;
  flex-direction: column;
}

.input__0f084 {
  font-size: 16px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 3px;
  color: var(--text-normal);
  background-color: var(--input-background);
  border: none;
  transition: border-color 200ms ease-in-out;
}

.input__0f084::-moz-placeholder {
    -moz-user-select: none;
         user-select: none;
    color: var(--input-placeholder-text);
  }

.input__0f084::placeholder {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    color: var(--input-placeholder-text);
  }

.input__0f084:hover {
    border-color: var(--deprecated-text-input-border-hover);
  }

.input__0f084.focused__0f084,
  .input__0f084:focus {
    border-color: var(--text-link);
  }

.input__0f084.error__0f084 {
    border-color: var(--status-danger);
  }

.input__0f084.success__0f084 {
    border-color: var(--green-360);
  }

.input__0f084.disabled__0f084 {
    border-color: var(--deprecated-text-input-border-disabled);
  }

.input__0f084.editable__0f084 {
    background-color: transparent;
    border-color: transparent;
  }

/* Sizes */

.inputDefault__0f084 {
  
  padding: 10px;
  height: 40px;
}

.inputMini__0f084 {
  
  line-height: 16px;
  padding: 4px 7px;
  height: 26px;
}

/* Unique modifier */

.disabled__0f084 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: not-allowed;
  opacity: 0.5;
}

.focused__0f084 {
  border-color: var(--brand-500);
  opacity: 1;
}

.inputPrefix__0f084 {
  font-size: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  height: 40px;
  padding-top: 10px;
  padding-left: 20px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: normal;
  color: var(--text-muted);
}

/* Dark Theme */

.theme-dark .inputPrefix__0f084 {
    opacity: 0.5;
  }

/* :global(:where(.visual-refresh)) { */

/* .input {
    font-size: 16px;
    line-height: 20px;
    border-radius: 8px;
    color: var(--text-normal);
    height: auto;
    padding: 12px;
    background-color: var(--input-background);
    border: 1px solid var(--input-border);
    transition-property: border-color, background;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;

    &::placeholder {
      color: transparent;
    } */

/* when the field has a value or the user is adding a value, change the background color */

/* &[value]:not([value='']),
    &:not(:empty),
    &.focused,
    &:focus {
      background-color: transparent;

      &::placeholder {
        color: var(--header-muted);
      }
    } */

/* override the old border color change */

/* &:hover {
      border-color: var(--input-border);
    }

    &:not([readOnly]) {
      &.focused,
      &:focus,
      &:focus:hover,
      &.focused:hover {
        border-color: var(--text-link);
      }
    }

    &.error {
      border-color: var(--input-error-border);
      color: var(--input-error-text);
      background-color: var(--input-error-background);
    }

    &.disabled {
      border-color: var(--input-border);
      cursor: not-allowed;
    }
  } */

/* } */

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .input__0f084 {
    border: 1px solid ButtonText;
  }

.enable-forced-colors .input__0f084:focus {
      border-color: Highlight;
    }

.enable-forced-colors .input__0f084.disabled__0f084 {
      background-color: Canvas;
      border-color: GrayText;
      opacity: 1;
    }

:where(.visual-refresh) .input__0f084 {
    padding: 12px 10px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    height: 44px;
  }

:where(.visual-refresh) .input__0f084:hover,
    :where(.visual-refresh) .input__0f084[readonly] {
      border: 1px solid var(--input-border);
    }

:where(.visual-refresh) .input__0f084:not([readOnly]).focused__0f084,
      :where(.visual-refresh) .input__0f084:not([readOnly]):focus,
      :where(.visual-refresh) .input__0f084:not([readOnly]):focus:hover,
      :where(.visual-refresh) .input__0f084:not([readOnly]).focused__0f084:hover {
        border-color: var(--text-link);
      }

:where(.visual-refresh) .input__0f084.error__0f084 {
      border-width: 2px;
      border-color: var(--text-danger);
      color: var(--text-danger);
    }

:where(.visual-refresh) .input__0f084.disabled__0f084 {
      border-color: var(--input-border);
      cursor: not-allowed;
      opacity: 1;
    }

:where(.visual-refresh) .input__0f084::-moz-placeholder {
      color: var(--text-secondary);
    }

:where(.visual-refresh) .input__0f084::placeholder {
      color: var(--text-secondary);
    }

:where(.visual-refresh) .inputError__0f084 {
    display: flex;
    gap: 8px;
    align-items: center;
  }

/*
 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 *
 * This file is an output of the Typography pipeline, which is defined here:
 *
 *   discord_design_system/modules/token_definitions/Typography.tsx
 *
 * Then run:
 *
 *   yarn generate
 */
.heading-sm\/normal_b717a1 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.heading-sm\/normal_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.heading-sm\/medium_b717a1 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.heading-sm\/medium_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.heading-sm\/semibold_b717a1 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.heading-sm\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.heading-sm\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.heading-sm\/bold_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.heading-sm\/extrabold_b717a1 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 800;
}
.heading-sm\/extrabold_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.heading-md\/normal_b717a1 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-md\/normal_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.heading-md\/medium_b717a1 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-md\/medium_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.heading-md\/semibold_b717a1 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-md\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.heading-md\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-md\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.heading-md\/extrabold_b717a1 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-md\/extrabold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.heading-lg\/normal_b717a1 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.heading-lg\/normal_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.heading-lg\/medium_b717a1 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.heading-lg\/medium_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.heading-lg\/semibold_b717a1 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.heading-lg\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.heading-lg\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.heading-lg\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.heading-lg\/extrabold_b717a1 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}
.heading-lg\/extrabold_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.heading-xl\/normal_b717a1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xl\/normal_b717a1.fontScaling_b717a1 {
    font-size: 1.5rem;
  }
.heading-xl\/medium_b717a1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xl\/medium_b717a1.fontScaling_b717a1 {
    font-size: 1.5rem;
  }
.heading-xl\/semibold_b717a1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xl\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 1.5rem;
  }
.heading-xl\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xl\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1.5rem;
  }
.heading-xl\/extrabold_b717a1 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xl\/extrabold_b717a1.fontScaling_b717a1 {
    font-size: 1.5rem;
  }
.heading-xxl\/normal_b717a1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xxl\/normal_b717a1.fontScaling_b717a1 {
    font-size: 2rem;
  }
.heading-xxl\/medium_b717a1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xxl\/medium_b717a1.fontScaling_b717a1 {
    font-size: 2rem;
  }
.heading-xxl\/semibold_b717a1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xxl\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 2rem;
  }
.heading-xxl\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xxl\/bold_b717a1.fontScaling_b717a1 {
    font-size: 2rem;
  }
.heading-xxl\/extrabold_b717a1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xxl\/extrabold_b717a1.fontScaling_b717a1 {
    font-size: 2rem;
  }
.eyebrow_b717a1 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eyebrow_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/normal_b717a1 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.heading-deprecated-12\/normal_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/medium_b717a1 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.heading-deprecated-12\/medium_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/semibold_b717a1 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.heading-deprecated-12\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.heading-deprecated-12\/bold_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/extrabold_b717a1 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 800;
}
.heading-deprecated-12\/extrabold_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.redesign\/heading-18\/bold_b717a1 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/heading-18\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1.125rem;
  }
.text-xxs\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
}
.text-xxs\/normal_b717a1.fontScaling_b717a1 {
    font-size: 0.625rem;
  }
.text-xxs\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
}
.text-xxs\/medium_b717a1.fontScaling_b717a1 {
    font-size: 0.625rem;
  }
.text-xxs\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
}
.text-xxs\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 0.625rem;
  }
.text-xxs\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}
.text-xxs\/bold_b717a1.fontScaling_b717a1 {
    font-size: 0.625rem;
  }
.text-xs\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.text-xs\/normal_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.text-xs\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.text-xs\/medium_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.text-xs\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.text-xs\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.text-xs\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.text-xs\/bold_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.text-sm\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.text-sm\/normal_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.text-sm\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.text-sm\/medium_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.text-sm\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.text-sm\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.text-sm\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.text-sm\/bold_b717a1.fontScaling_b717a1 {
    font-size: 0.875rem;
  }
.text-md\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.text-md\/normal_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.text-md\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.text-md\/medium_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.text-md\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.text-md\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.text-md\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.text-md\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.text-lg\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.text-lg\/normal_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.text-lg\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.text-lg\/medium_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.text-lg\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.text-lg\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.text-lg\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.text-lg\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.redesign\/message-preview\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.redesign\/message-preview\/normal_b717a1.fontScaling_b717a1 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.redesign\/message-preview\/medium_b717a1.fontScaling_b717a1 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.redesign\/message-preview\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/message-preview\/bold_b717a1.fontScaling_b717a1 {
    font-size: 0.9375rem;
  }
.redesign\/channel-title\/normal_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 400;
}
.redesign\/channel-title\/normal_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.redesign\/channel-title\/medium_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 500;
}
.redesign\/channel-title\/medium_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.redesign\/channel-title\/semibold_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
}
.redesign\/channel-title\/semibold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.redesign\/channel-title\/bold_b717a1 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 700;
}
.redesign\/channel-title\/bold_b717a1.fontScaling_b717a1 {
    font-size: 1rem;
  }
.display-sm_b717a1 {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.display-sm_b717a1.fontScaling_b717a1 {
    font-size: 1.25rem;
  }
.display-md_b717a1 {
  font-family: var(--font-headline);
  font-size: 34px;
  line-height: 1.0588235294117647;
  font-weight: 800;
}
.display-md_b717a1.fontScaling_b717a1 {
    font-size: 2.125rem;
  }
.display-lg_b717a1 {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 0.9545454545454546;
  font-weight: 800;
}
.display-lg_b717a1.fontScaling_b717a1 {
    font-size: 2.75rem;
  }
.code_b717a1 {
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.code_b717a1.fontScaling_b717a1 {
    font-size: 0.75rem;
  }
.title_b717a1 {
  flex: 1;
  cursor: default;
  font-family: var(--font-display);
}
.h1_b717a1 {
  
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}
.h2_b717a1 {
  
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.h3_b717a1 {
  
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.h4_b717a1 {
  
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.legend_b717a1 {
  
}
.label_b717a1 {
  
}
.h5_b717a1 {
  
}
.defaultMarginh4_b717a1 {
  margin-top: 0;
  margin-bottom: 0;
}
.defaultMarginh1_b717a1,
.defaultMarginh2_b717a1 {
  margin-bottom: 20px;
}
.defaultMarginh3_b717a1,
.defaultMarginh5_b717a1,
.defaultMarginlabel_b717a1,
.defaultMarginlegend_b717a1 {
  margin-bottom: 8px;
}
.disabled_b717a1 {
  opacity: 0.5;
  cursor: not-allowed;
}
.required_b717a1 {
  color: var(--text-danger);
  padding-left: 4px;
}
.errorMessage_b717a1 {
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  text-transform: none;
}
.errorSeparator_b717a1 {
  padding-left: 4px;
  padding-right: 4px;
}
.defaultColor_b717a1 {
  color: var(--header-primary);
}
.h5_b717a1,
.label_b717a1,
.legend_b717a1 {
  color: var(--header-secondary);
}
.label_b717a1 {
  display: block;
}
.faded_b717a1 {
  opacity: 0.8;
}
.error_b717a1 {
  color: var(--text-danger);
}
:where(.visual-refresh) {
  /**
   * styles copied from heading-md\/normal
   * `composes` conflicts with resetting these to a new style, so force it for
   * now, until we can refactor component
   */
  /* .title,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .legend,
  .label {
    text-transform: none;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--header-primary);

    &.fontScaling {
      font-size: 1rem;
    }
  } */

  /* .defaultMarginh1,
  .defaultMarginh2 {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .defaultMarginh3,
  .defaultMarginh4,
  .defaultMarginh5,
  .defaultMarginlabel,
  .defaultMarginlegend {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .floatingAbove {
    display: block;
    padding: 6px;
    margin: 0;
    position: absolute; */
  /* subtract the label's padding from the input's padding */
  /* left: calc(12px - 2px);
    top: 4px;
    transform: scale(0.75) translateY(-50%);
    transform-origin: top left;
    background-color: var(--background-primary);
  }

  .floatingOn {
    display: block;
    color: var(--input-placeholder-text);
    padding: 6px;
    margin: 0;
    position: absolute; */
  /* subtract the label's padding from the input's padding */
  /* left: calc(12px - 2px);
    top: 4px; */
  /* factor in the 1px border and the label's padding */
  /* transform: scale(1) translateY(calc(12px + 1px - 6px));
    transform-origin: top left;
    pointer-events: none;
  }
} */
}
/* :global(.full-motion:where(.visual-refresh)) {
  .floatingAbove {
    transition: all 50ms ease-out;
  }

  .floatingOn {
    transition: all 50ms ease-out;
  } */
:where(.visual-refresh) .h5_b717a1 {
    color: var(--header-primary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: capitalize;
  }
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .disabled_b717a1 {
    color: GrayText;
    opacity: 1;
  }

/* prettier-ignore */

.flex__7c0ba {
  display: flex;
}

.horizontal__7c0ba {
  flex-direction: row;
  display: flex;
}

.horizontalReverse__7c0ba {
  flex-direction: row-reverse;
  display: flex;
}

/**
 * Flex/Flex.Child component specific styles
 */

.horizontal__7c0ba > .flex__7c0ba,
.horizontal__7c0ba > .flexChild__7c0ba {
  margin-left: 10px;
  margin-right: 10px;
}

.horizontal__7c0ba > .flex__7c0ba:first-child, .horizontal__7c0ba > .flexChild__7c0ba:first-child {
    margin-left: 0;
  }

.horizontal__7c0ba > .flex__7c0ba:last-child, .horizontal__7c0ba > .flexChild__7c0ba:last-child {
    margin-right: 0;
  }

.horizontalReverse__7c0ba > .flex__7c0ba,
.horizontalReverse__7c0ba > .flexChild__7c0ba {
  margin-left: 10px;
  margin-right: 10px;
}

.horizontalReverse__7c0ba > .flex__7c0ba:first-child, .horizontalReverse__7c0ba > .flexChild__7c0ba:first-child {
    margin-right: 0;
  }

.horizontalReverse__7c0ba > .flex__7c0ba:last-child, .horizontalReverse__7c0ba > .flexChild__7c0ba:last-child {
    margin-left: 0;
  }

/* TODO make not shitty */

/* Allow margins to be reset on ui-flex components */

.horizontal__7c0ba > .flexMarginReset__7c0ba {
  margin: 0;
}

/* Display rule */
.flex_abf706 {
  display: flex;
}
/* Align rules */
.alignStart_abf706 {
  align-items: flex-start;
}
.alignEnd_abf706 {
  align-items: flex-end;
}
.alignCenter_abf706 {
  align-items: center;
}
.alignStretch_abf706 {
  align-items: stretch;
}
.alignBaseline_abf706 {
  align-items: baseline;
}
/* Justify rules */
.justifyStart_abf706 {
  justify-content: flex-start;
}
.justifyEnd_abf706 {
  justify-content: flex-end;
}
.justifyCenter_abf706 {
  justify-content: center;
}
.justifyAround_abf706 {
  justify-content: space-around;
}
.justifyBetween_abf706 {
  justify-content: space-between;
}
/* Wrap rules */
.noWrap_abf706 {
  flex-wrap: nowrap;
}
.wrap_abf706 {
  flex-wrap: wrap;
}
.wrapReverse_abf706 {
  flex-wrap: wrap-reverse;
}
/* Direction rules */
.directionRow_abf706 {
  flex-direction: row;
}
.directionRowReverse_abf706 {
  flex-direction: row-reverse;
}
.directionColumn_abf706 {
  flex-direction: column;
}
/*
 * Helpers
 */
.spacer_abf706 {
  flex: 1;
  overflow: hidden;
}
/* Directional Helpers */
.vertical_abf706 {
  flex-direction: column;
  display: flex;
}
.horizontal_abf706 {
  flex-direction: row;
  display: flex;
}
.horizontalReverse_abf706 {
  flex-direction: row-reverse;
  display: flex;
}
.vertical_abf706 > .spacer_abf706,
.horizontal_abf706 > .spacer_abf706,
.horizontalReverse_abf706 > .spacer_abf706 {
  min-height: 1px; /* see firefoxFixScrollFlex for why */
}
/* Fully center */
.flexCenter_abf706 {
  align-items: center;
  justify-content: center;
  display: flex;
}

.container__468a6 {
  word-wrap: break-word;
  width: 440px;
}

.form__468a6 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modalContent__468a6 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.content__468a6 {
  height: 100%;
}

.title__468a6 {
  text-align: center;
}

.minorContainer__468a6 {
  flex: 0 0 auto;
  margin-top: 8px;
  margin-bottom: -10px;
  width: 100%;
  cursor: pointer;
}

.secondaryAction__468a6 {
  text-align: center;
  opacity: 0.6;
}

.secondaryAction__468a6:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.body__468a6 {
  text-align: center;
}

.secondaryButton__468a6,
.primaryButton__468a6 {
  flex: 1 1 45%;
}

.gutter__468a6 {
  margin-left: 10px;
}

.visual-refresh .container__468a6 {
    /* 2px offset to account for the border */
    width: 442px;
    min-height: auto;
  }

.visual-refresh .modalContent__468a6 {
    padding-bottom: var(--space-4);
  }

.visual-refresh .title__468a6,
  .visual-refresh .body__468a6 {
    text-align: left;
  }

.visual-refresh .title__468a6 {
    margin-top: 0;
    margin-bottom: 0;
  }

.visual-refresh .primaryButton__468a6,
  .visual-refresh .secondaryButton__468a6 {
    flex: initial;
  }

.spacing_f0f2d9 {
  margin-bottom: 20px;
}

.error_f0f2d9 {
  margin-top: 8px;
}

.card_f0f2d9 {
  
  padding: 10px;
}

.warning_f0f2d9 {
  color: var(--white-500);
}

.scrollerBase_d125d2 {
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  flex: 1 1 auto;
}

.thin_d125d2,
.auto_d125d2,
.none_d125d2 {
  
}

.thin_d125d2::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.thin_d125d2::-webkit-scrollbar-track {
  border: 2px solid var(--scrollbar-thin-track);
  background-color: var(--scrollbar-thin-track);
  border-color: var(--scrollbar-thin-track);
}

.thin_d125d2::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: var(--scrollbar-thin-thumb);
  min-height: 40px;
}

.thin_d125d2::-webkit-scrollbar-corner {
  background-color: transparent;
}

.auto_d125d2::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.auto_d125d2::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: var(--scrollbar-auto-track);
}

.auto_d125d2::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 8px;
  background-color: var(--scrollbar-auto-thumb);
  min-height: 40px;
}

.auto_d125d2::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* NOTE(yeyus): This is used to have custom overrides for the scroller track and thumb for transparent background
 * themes, electron v17 doesn't seem to support background-attachment fixed, so we have to get creative */

.theme-dark.custom-theme-background .customTheme_d125d2.auto_d125d2::-webkit-scrollbar-track {
      background-size: 200vh;
      background-image: linear-gradient(rgb(var(--bg-overlay-color) / 0.6), rgb(var(--bg-overlay-color) / 0.6)),
        var(--custom-theme-background);
    }

.theme-dark.custom-theme-background .customTheme_d125d2.auto_d125d2::-webkit-scrollbar-thumb,
    .theme-dark.custom-theme-background .customTheme_d125d2.thin_d125d2::-webkit-scrollbar-thumb {
      background-size: 200vh;
      background-image: linear-gradient(
          rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-4)),
          rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-4))
        ),
        var(--custom-theme-background);
    }

.theme-light.custom-theme-background .customTheme_d125d2.auto_d125d2::-webkit-scrollbar-track {
      background-size: 200vh;
      background-image: linear-gradient(
          rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-2)),
          rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-2))
        ),
        var(--custom-theme-background);
    }

.theme-light.custom-theme-background .customTheme_d125d2.auto_d125d2::-webkit-scrollbar-thumb,
    .theme-light.custom-theme-background .customTheme_d125d2.thin_d125d2::-webkit-scrollbar-thumb {
      background-size: 100vh;
      background-image: rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3));
    }

.none_d125d2::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.fade_d125d2::-webkit-scrollbar-thumb,
.fade_d125d2::-webkit-scrollbar-track {
  visibility: hidden;
}

.fade_d125d2:hover::-webkit-scrollbar-thumb,
.fade_d125d2:hover::-webkit-scrollbar-track {
  visibility: visible;
}

.scrolling_d125d2.fade_d125d2:focus-within::-webkit-scrollbar-thumb,
.scrolling_d125d2.fade_d125d2:focus-within::-webkit-scrollbar-track {
  visibility: visible;
}

/**
 * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
 * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
 * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
 */

.no-webkit-scrollbar .thin_d125d2 {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
  }

.no-webkit-scrollbar .thin_d125d2.fade_d125d2.scrolling_d125d2,
    .no-webkit-scrollbar .thin_d125d2.fade_d125d2:hover {
      scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
    }

.no-webkit-scrollbar .auto_d125d2 {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
  }

.no-webkit-scrollbar .auto_d125d2.fade_d125d2.scrolling_d125d2,
    .no-webkit-scrollbar .auto_d125d2.fade_d125d2:hover {
      scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
    }

.no-webkit-scrollbar .none_d125d2 {
    scrollbar-width: none;
  }

.no-webkit-scrollbar .fade_d125d2 {
    scrollbar-color: transparent transparent;
  }

.content_d125d2 {
  position: relative;
}

.disableScrollAnchor_d125d2 {
  overflow-anchor: none;
}

.managedReactiveScroller_d125d2 {
  overflow-y: scroll;
  overflow-x: hidden;
}

.pointerCover_d125d2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors ::-webkit-scrollbar-track {
    border-radius: 0;
    border-width: 1px;
  }

.enable-forced-colors ::-webkit-scrollbar-thumb {
    background-color: CanvasText;
    border-width: 1px;
  }

.enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:hover,
  .enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:active,
  .enable-forced-colors ::-webkit-scrollbar-thumb:vertical:hover,
  .enable-forced-colors ::-webkit-scrollbar-thumb:vertical:active {
    background-color: Highlight;
  }

.enable-forced-colors .auto_d125d2::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

.enable-forced-colors .auto_d125d2::-webkit-scrollbar-track {
    border-width: 1px;
    border-radius: 0;
  }

.animationWrapper__41e0f {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lottieAnimation__41e0f {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 196px;
  height: 196px;
}

/* Gets us a 22px emoji in messages. It's important to use `em` instead of
 * `rem` so that emoji doesn't affect the line-height of the content. */

/* We use emojis in many places that use i18n. We need to style them */

.emoji {
    -o-object-fit: contain;
       object-fit: contain;
    /* we want all emojis to be the same size so that when they line up next to
   * each other there's no weirdness:
   * https://cdn.discordapp.com/attachments/323346133189394432/469308780459589632/Screen_Shot_2018-07-18_at_6.05.23_PM.png
   * */
    width: var(--custom-emoji-size-emoji);
    height: var(--custom-emoji-size-emoji);
    vertical-align: bottom;
  }

.emoji.jumboable {
      width: var(--custom-emoji-size-jumbo-emoji);
      height: var(--custom-emoji-size-jumbo-emoji);
      min-height: var(--custom-emoji-size-jumbo-emoji);
    }

.flowerStarContainer__3e3b0 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.flowerStar__3e3b0 {
  width: 100%;
  height: 100%;
}

.childContainer__3e3b0 {
  position: absolute;
  top: -0.05px;
  left: 0.05px;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.redesignIconChildContainer__3e3b0 > svg {
  width: 10px;
  height: 10px;
}

.background__09691 {
  width: 16px;
  height: 16px;
}

.hubContainer__09691 {
  
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.verified__09691 {
  
  color: var(--green-360);
}

.staff__09691 {
  
  color: var(--primary-500);
}

.staff__09691 .icon__09691 {
    width: 60%;
    height: 60%;
  }

.visual-refresh .staff__09691 {
    color: var(--icon-tertiary);
  }

.partnered__09691 {
  
  color: var(--brand-500);
}

.hub__09691 {
  
}

.hub__09691 > .icon__09691 > circle {
    fill: var(--background-accent);
  }

.verifiedHub__09691 {
  
}

.verifiedHub__09691 > .icon__09691 > circle {
    fill: var(--green-360);
  }

.icon__09691 {
  width: 100%;
  height: 100%;
  color: var(--white-500);
}

.icon_f34534 {
  position: relative;
  background-clip: padding-box;
  background-color: none;
  background-position: center center;
  background-size: 100% 100%;
}

  .icon_f34534 .guildIconBadge_f34534 {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
  }

.iconInactive_f34534 {
  border-radius: 50%;
}

.iconActiveSmol_f34534 {
  /* This size should never be `active`. */
}

.iconActiveMini_f34534 {
  border-radius: 6px;
}

.iconActiveSmaller_f34534 {
  border-radius: 7px;
}

.iconActiveSmall_f34534 {
  border-radius: 9px;
}

.iconActiveMedium_f34534 {
  border-radius: 12px;
}

.iconActiveLarge_f34534 {
  border-radius: 15px;
}

.iconActiveLarger_f34534 {
  border-radius: 16px;
}

.iconActiveXLarge_f34534 {
  border-radius: 30px;
}

.iconSizeSmol_f34534 {
  width: 16px;
  height: 16px;
}

.iconSizeMini_f34534 {
  width: 20px;
  height: 20px;
}

.iconSizeSmaller_f34534 {
  width: 24px;
  height: 24px;
}

.iconSizeSmall_f34534 {
  width: 30px;
  height: 30px;
}

.iconSizeMedium_f34534 {
  width: 40px;
  height: 40px;
}

.iconSizeLarge_f34534 {
  width: 50px;
  height: 50px;
}

.iconSizeLarger_f34534 {
  width: 64px;
  height: 64px;
}

.iconSizeXLarge_f34534 {
  width: 100px;
  height: 100px;
}

.acronym_f34534 {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.noIcon_f34534 {
  background-color: var(--background-secondary);
  color: var(--text-normal);
  text-align: center;
}

.noIcon_f34534.iconSizeSmol_f34534 {
    line-height: 16px;
  }

.noIcon_f34534.iconSizeMini_f34534 {
    line-height: 20px;
  }

.noIcon_f34534.iconSizeSmaller_f34534 {
    line-height: 24px;
  }

.noIcon_f34534.iconSizeSmall_f34534 {
    line-height: 30px;
  }

.noIcon_f34534.iconSizeMedium_f34534 {
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    line-height: 40px;
  }

.noIcon_f34534.iconSizeLarge_f34534 {
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    line-height: 50px;
  }

.noIcon_f34534.iconSizeLarger_f34534 {
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    line-height: 64px;
  }

.noIcon_f34534.iconSizeXLarge_f34534 {
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    line-height: 100px;
  }

.noAcronym_f34534 {
  background-color: var(--background-modifier-accent);
}

.discordLogo__921c5 {
  height: 36px;
  width: 112px;
  background: url(/assets/bbbc3d376d38e7bc.svg) no-repeat;
  display: none;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.authBox__921c5 {
  width: 480px;
  padding: var(--custom-auth-box-auth-box-padding);
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 18px;
  box-shadow: var(--legacy-elevation-high);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--text-muted);
}

.authBox__921c5 a {
    color: var(--text-link);
  }

.authBox__921c5 a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

/* This class is used for showing expanded login options (e.g. QR Code login) */

.authBoxExpanded__921c5 {
  
  width: 784px;
}

.centeringWrapper__921c5 {
  width: 100%;
  text-align: center;
}

.avatar__921c5 {
  margin-bottom: 24px;
}

@media (max-width: 485px) {
  .authBox__921c5 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px 16px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(to left bottom, #3d4046, #1e1e23);
    border-radius: 0;
    overflow: scroll;
  }

    .authBox__921c5 .discordLogo__921c5 {
      display: block;
    }

    @media (max-width: 830px) {
      .authBox__921c5.authBoxExpanded__921c5 {
        max-width: none;
        max-width: initial;
      }
    }

    .authBox__921c5 .centeringWrapper__921c5 {
      position: relative;
      min-height: 540px;
    }
}

@media (max-width: 830px) {
  .authBoxExpanded__921c5 {
    /* We will hide the expanded stuff at this size or smaller */
    max-width: 480px;
  }
}

.is-mobile .authBox__921c5 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px 16px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* stylelint-disable-next-line color-no-hex */
  background: linear-gradient(to left bottom, #3d4046, #1e1e23);
  border-radius: 0;
  overflow: scroll;
}

.is-mobile .authBox__921c5 .discordLogo__921c5 {
    display: block;
    top: 16px;
  }

@media (max-width: 830px) {
    .is-mobile .authBox__921c5.authBoxExpanded__921c5 {
      max-width: none;
      max-width: initial;
    }
  }

.is-mobile .authBox__921c5 .centeringWrapper__921c5 {
    position: relative;
    min-height: 540px;
  }

.authBox__921c5[data-theme='light'] {
  background: var(--primary-100);
}

.authBox__921c5[data-theme='light'] .discordLogo__921c5 {
    background: url(/assets/34120ace1e4e4d29.svg) no-repeat;
    width: 130px;
  }

.authBox__921c5[data-theme='dark'] {
  background: var(--background-mobile-primary);
}

.authBox__921c5[data-theme='dark'] .discordLogo__921c5 {
    background: url(/assets/bbbc3d376d38e7bc.svg) no-repeat;
    width: 130px;
  }

/****************
 * Inner styles *
 ***************/

.title__921c5 {
  font-weight: 600;
}

.subText__921c5 {
  color: var(--text-muted);
}

.subText__921c5 strong {
    color: hsl(var(--primary-300-hsl) / 0.9);
    font-weight: 600;
  }

/* Pills */

.pill__921c5 {
  display: flex;
  align-items: center;
}

.pillOnline__921c5 {
  margin-right: 16px;
}

.pillMessage__921c5 {
  font-size: 14px;
  white-space: nowrap;
  color: var(--header-secondary);
}

@media (min-height: 640px) {

.pillMessage__921c5 {
    font-size: 16px
}
  }

.pillIcon__921c5 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

.pillIconTotal__921c5 {
  
  background-color: var(--header-secondary);
}

.pillIconOnline__921c5 {
  
  background-color: var(--info-positive-foreground);
}

.pillFlat__921c5 {
  background: transparent;
}

.pillFlat__921c5 .pillIconTotal__921c5 {
    background-color: var(--text-muted);
  }

/* Joining As */

.joiningAs__921c5 {
  margin-top: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.joiningAsAvatar__921c5 {
  margin-left: 14px;
}

.joiningAsUsername__921c5 {
  margin-left: 5px;
}

/* Spinner */

.spinnerVideo__921c5 {
  width: 200px;
  height: 200px;
}

/* Image */

.image__921c5 {
  width: 100%;
  max-width: 186px;
  height: auto;
  max-height: 120px;
  pointer-events: none;
}

/* Form */

.block__921c5 {
  width: 100%;
  text-align: left;
}

.button__921c5 {
  font-size: 16px;
  line-height: 24px;
}

.linkButton__921c5 {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.inviteIcon__921c5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inviteLargeIcon__921c5 {
  
  margin-right: 0;
}

.inviteSmallIcon__921c5 {
  
  margin-right: 8px;
  margin-top: 0;
  flex-shrink: 0;
}

.downloadButtonSubtext__921c5 {
  margin-top: 8px;
  text-align: center;
}

.inputError__921c5,
.inputError__921c5:focus,
.inputError__921c5:hover {
  border-color: var(--status-danger);
}

.description__921c5 {
  margin-top: 8px;
  font-size: 12px;
}

.applicationDetails__94ab2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}

.entry__94ab2 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.entryIcon__94ab2 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  color: var(--text-muted);
}

.entryInner__94ab2 {
  color: var(--text-muted);
}

.applicationEducation__526cc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

  .applicationEducation__526cc:not(:first-child) {
    padding-top: 24px;
  }

  .applicationEducation__526cc:not(:last-child) {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--background-modifier-accent);
  }

.sectionLabel__526cc {
  color: var(--header-secondary);
}

.entry__526cc {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.entryIcon__526cc {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.entryText__526cc {
  flex: 1;
}

.scopes__29337:not(:first-child) {
    padding-top: 24px;
  }
  .scopes__29337:not(:last-child) {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--background-modifier-accent);
  }

.scope__29337 {
  margin-top: 16px;
  display: flex;
}

.scopeInner__29337 {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.sectionLabel__29337 {
  margin-bottom: 16px;
  color: var(--header-secondary);
}

.scopeIcon__29337 {
  color: var(--text-muted);
}

.fakeScopeIcon__29337 {
  color: var(--text-muted);
  opacity: 0.6;
}

.icon__29337 {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.botPermissions__41924 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

  .botPermissions__41924:not(:first-child) {
    padding-top: 24px;
  }

  .botPermissions__41924:not(:last-child) {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--background-modifier-accent);
  }

.permissionsList__41924 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 12px;
}

.permission__41924 {
  font-weight: 500;
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  flex: 2;
}

.disabledPermissionIcon__41924 {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 10%;
  background-color: var(--status-danger);
  box-sizing: border-box;
}

.icon__41924 {
  width: 18px;
  height: 18px;
  color: var(--white-500);
}

.selectorGroup_c248b6:not(:first-child) {
    padding-top: 24px;
  }
  .selectorGroup_c248b6:not(:last-child) {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--background-modifier-accent);
  }

.select_c248b6 {
  margin-top: 8px;
  height: 44px;
  align-items: center;
}

.label_c248b6 {
  margin-top: 8px;
}

.sectionLabel_c248b6 {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--header-secondary);
}

.botTag__82f07 {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 0.625rem;
  text-transform: uppercase;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-indent: 0;
}

.px__82f07.botTag__82f07 {
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
}

.rem__82f07.botTag__82f07 {
  height: 0.9375rem;
  padding: 0 0.275rem;
  margin-top: 0.2em;
  border-radius: 4px;
}

.rem__82f07.botTag__82f07.botTagOP__82f07 {
    margin-top: 0.25em;
  }

.botTagRegular__82f07 {
  
  background: var(--bg-brand);
  color: var(--white);
}

.botTagInvert__82f07 {
  
  background: var(--white-500);
  color: var(--brand-500);
}

.botTagAI__82f07 {
  
  background: var(--text-positive);
  color: var(--white);
}

.botTag__82f07.botTagRemix__82f07 {
  top: 0.3em;
}

.botTagVerified__82f07 {
  display: inline-block;
}

.px__82f07 .botTagVerified__82f07 {
  width: 16px;
  height: 16px;
  margin-left: -2px;
}

.rem__82f07 .botTagVerified__82f07 {
  width: 1rem;
  height: 1rem;
  margin-left: -0.2rem;
  margin-top: -0.02rem;
}

.botText__82f07 {
  position: relative;
  font-weight: 600;
  vertical-align: top;
}

/* stylelint-disable declaration-property-value-allowed-list */

.px__82f07 .botText__82f07 {
  font-size: 12px;
  line-height: 16px;
}

.rem__82f07 .botText__82f07 {
  font-size: 0.8rem;
  line-height: 0.9375rem;
}

/* stylelint-enable declaration-property-value-allowed-list */

.botTagOP__82f07 {
  
  color: var(--brand-560);
  background-color: var(--brand-260);
  border-radius: 8px;
}

.header__03630 {
  padding: 32px 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.label__03630 {
  margin: 8px 0;
}

.currentUser__03630 {
  font-weight: 500;
}

.currentUserTag__03630 {
  display: inline;
}

.currentUserDiscriminator__03630 {
  display: inline;
  color: var(--interactive-normal);
}

.logoutLink__03630 {
  margin-left: 8px;
  color: var(--brand-500);
}

.headerIcons__03630 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ellipseGroup__03630 {
  display: flex;
  justify-content: space-between;
  margin: 0 24px;
}

.ellipse__03630 {
  width: 4px;
  height: 4px;
  margin: 0 2px;
  background-color: var(--channel-icon);
  opacity: 0.1;
  border-radius: 50%;
}

.botTag__03630 {
  margin-top: 4px !important;
}

.botTag__03630 {
  /* stylelint-disable-next-line declaration-no-important */
  margin-left: 8px;
}

.avatar__03630 {
  border: 1px solid var(--border-subtle);
}

.icon_bd6d20 {
  border-radius: var(--radius-md);
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
}

.placeholder_bd6d20 {
  background-color: var(--bg-mod-subtle);
}

.header_b1c9f2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.container_b1c9f2 {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.rows_b1c9f2 {
  display: grid;
  grid-auto-rows: 1fr;
}

.appIcon_b1c9f2 {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
}

.row_b1c9f2 {
  display: flex;
  cursor: pointer;
  align-items: center;
  background: var(--background-secondary);
  padding-left: 16px;
  gap: 12px;
}

.row_b1c9f2:hover {
    background: var(--background-modifier-hover);
  }

.row_b1c9f2:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

.row_b1c9f2:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

.row_b1c9f2:not(:last-child) .rowInner_b1c9f2 {
      border-bottom: 1px solid var(--background-modifier-hover);
    }

.visual-refresh .row_b1c9f2 {
    background-color: var(--background-surface-higher);
  }

.visual-refresh .row_b1c9f2:hover {
      background-color: var(--background-surface-high);
    }

.visual-refresh .row_b1c9f2:not(:last-child) .rowInner_b1c9f2 {
        border-color: var(--border-subtle);
      }

.visual-refresh .rows_b1c9f2 {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
  }

.rowInner_b1c9f2 {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  padding: 8px 16px 8px 0;
}

.rowDetails_b1c9f2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}

.leftIcon_b1c9f2 {
  padding: 4px;
  color: var(--interactive-normal);
}

.rightIcon_b1c9f2 {
  color: var(--interactive-normal);
}

.learnMore_b1c9f2 {
  margin: 16px 0;
  text-align: center;
}

.detailsContainer_b1c9f2 {
  gap: var(--custom-disclosure-spacing);
  display: flex;
  flex-direction: column;
}

.overviewContainerNoVideo_b1c9f2 {
  padding: var(--spacing-12);
  border-radius: var(--radius-sm);
  background-color: var(--background-secondary);
  gap: var(--spacing-8);
  display: flex;
  flex-direction: column;
}

.visual-refresh .overviewContainerNoVideo_b1c9f2 {
    background-color: transparent;
    background-color: initial;
  }

.titleContainer_b1c9f2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-8);
}

.partnerLabelContainer_b1c9f2 {
  padding: 2px var(--spacing-8);
  justify-content: center;
  background-color: var(--background-modifier-active);
  border-radius: var(--radius-lg);
}

.descriptionContainer_b1c9f2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.expandableDescriptionClickable_b1c9f2 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-4);
  cursor: pointer;
}

.overflowHidden_b1c9f2 {
  overflow: hidden;
}

.closeButton_b1c9f2 {
  position: absolute;
  top: 16px;
  right: 0;
  color: var(--interactive-normal);
  cursor: pointer;
}

.closeButton_b1c9f2:hover {
    color: var(--interactive-active);
  }

/* stylelint-disable color-no-hex */

/*
Due to the rather declarative/exact nature of ANSI escapes, we're using language-specific class names rather than
relying on the generic, semantic names like 'keyword' or 'string'. Note that this is explicitly *opposite* of what
highlight.js wants (see https://highlightjs.readthedocs.io/en/latest/theme-guide.html#key-principle).

However, the language-agnostic approach doesn't allow us to guarantee that, say, magenta will be magenta. And no matter
what we're going to need custom handling of the control sequences so that they're not rendered in the final output.

Additionally, at least our default theme doesn't have enough colors to represent what we need. We *could* lose some
expressiveness/accuracy here and just pick the nearest color in our default theme, but that seems worse.

We've chosen solarized colors to match the default highlight.js theme we use (see discord_app/modules/markup/MarkupUtils.module.css).
See https://ethanschoonover.com/solarized/#the-values

Though note that these colors don't actually meet our contrast requirements, so when those colors are updated these
should be too.
*/

.hljs-ansi-control-sequence {
    /*
    Hide the control sequences, they won't be rendered or copied if you select and copy the text
    If we decide we *do* want them copied when selecting+copying, we can switch this to font-size: 0
    */
    display: none;
  }

.hljs-ansi-style-bold {
    font-weight: 700;
  }

.hljs-ansi-style-underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.hljs-ansi-foreground-black {
    /* Default to a theme-dependent legible color */
    color: var(--interactive-muted);
  }

/* If we explicitly set a background, use actual color */

.hljs-ansi-foreground-black .hljs-ansi-background-black,
    .hljs-ansi-foreground-black .hljs-ansi-background-red,
    .hljs-ansi-foreground-black .hljs-ansi-background-green,
    .hljs-ansi-foreground-black .hljs-ansi-background-yellow,
    .hljs-ansi-foreground-black .hljs-ansi-background-blue,
    .hljs-ansi-foreground-black .hljs-ansi-background-magenta,
    .hljs-ansi-foreground-black .hljs-ansi-background-cyan,
    .hljs-ansi-foreground-black .hljs-ansi-background-white {
      color: #073642;
    }

.hljs-ansi-foreground-red {
    color: #dc322f;
  }

.hljs-ansi-foreground-green {
    color: #859900;
  }

.hljs-ansi-foreground-yellow {
    color: #b58900;
  }

.hljs-ansi-foreground-blue {
    color: #268bd2;
  }

.hljs-ansi-foreground-magenta {
    color: #d33682;
  }

.hljs-ansi-foreground-cyan {
    color: #2aa198;
  }

.hljs-ansi-foreground-white {
    /* Default to a theme-dependent legible color */
    color: var(--interactive-active);
  }

/* If we explicitly set a background, use actual color */

.hljs-ansi-foreground-white .hljs-ansi-background-black,
    .hljs-ansi-foreground-white .hljs-ansi-background-red,
    .hljs-ansi-foreground-white .hljs-ansi-background-green,
    .hljs-ansi-foreground-white .hljs-ansi-background-yellow,
    .hljs-ansi-foreground-white .hljs-ansi-background-blue,
    .hljs-ansi-foreground-white .hljs-ansi-background-magenta,
    .hljs-ansi-foreground-white .hljs-ansi-background-cyan,
    .hljs-ansi-foreground-white .hljs-ansi-background-white {
      color: #eee8d5;
    }

.hljs-ansi-background-black {
    background-color: #002b36;
  }

.hljs-ansi-background-red {
    background-color: #cb4b16;
  }

.hljs-ansi-background-green {
    background-color: #586e75;
  }

.hljs-ansi-background-yellow {
    background-color: #657b83;
  }

.hljs-ansi-background-blue {
    background-color: #839496;
  }

.hljs-ansi-background-magenta {
    background-color: #6c71c4;
  }

.hljs-ansi-background-cyan {
    background-color: #93a1a1;
  }

.hljs-ansi-background-white {
    background-color: #fdf6e3;
  }

@use postcss-pxtorem;

.density-compact.visual-refresh {
  --chat-markup-line-height: 1.375rem;
}

/**!
 * This file is shared between Embeds and MessageContent
 */

/* Code blocks */

.markup__75297 {
  font-size: 1rem;
  line-height: var(--chat-markup-line-height);
  white-space: break-spaces;
  word-wrap: break-word;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  color: var(--text-normal);
}

/* these have to be an element in order to style the user content */

.markup__75297 a {
    color: var(--text-link);
    word-break: break-word;
    -webkit-text-decoration: var(--link-decoration);
            text-decoration: var(--link-decoration);
    cursor: pointer;
  }

.markup__75297 a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.markup__75297 strong {
    font-weight: 700;
  }

.markup__75297 em {
    font-style: italic;
  }

.markup__75297 pre {
    box-sizing: border-box;
    border-radius: 4px;
    padding: 0;
    font-family: var(--font-code);
    font-size: 0.75rem;
    line-height: 1rem;
    margin-top: 6px;
    max-width: 90%;
    white-space: pre-wrap;
    background-clip: border-box;
  }

.markup__75297 blockquote {
    /* These are inside the .markup class since they only apply to messages (and not, say, changelog). */
    max-width: 90%;
    box-sizing: border-box;
    text-indent: 0;
    text-indent: initial;
  }

.markup__75297 blockquote pre {
      /* Allow code blocks to take up all of a block quote's internal width. */
      max-width: 100%;
    }

.markup__75297 small:not(.inlineFormat__75297) {
      /*
        Block so that the line-height adjustment here is taken into account when subtext wraps to multiple lines.
        We also want subtext to always break to newline
       */
      display: block;
      color: var(--text-muted);
      font-size: 0.8125rem;
      line-height: 1.11719rem;
    }

.markup__75297 small.inlineFormat__75297:after {
        /*
          Subtext consumes the first trailing newline which means that it isn't present to be converted to a
          space as part of inlineFormat, so simulate one
        */
        content: ' ';
      }

.markup__75297 code {
    font-size: 0.875rem;
    line-height: 1.125rem;
    text-indent: 0;
    text-indent: initial;
    white-space: pre-wrap;
    background: var(--background-secondary);
    border: 1px solid var(--background-tertiary);
  }

/**
   * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
   * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
   * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
   */

.markup__75297 .no-webkit-scrollbar code {
      scrollbar-width: thin;
      scrollbar-color: var(--background-tertiary) var(--background-secondary);
    }

.markup__75297 code.inline {
    width: auto;
    height: auto;
    padding: 0 0.2em;
    margin: -0.2em 0;
    border-radius: 4px;
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    font-size: 85%;
    font-family: var(--font-code);
    text-indent: 0;
    text-indent: initial;
    white-space: pre-wrap;
  }

.markup__75297 .codeContainer__75297 {
    position: relative;
  }

.markup__75297 .codeActions__75297 {
    position: absolute;
    display: none;
    right: 4px;
    top: 8px;
  }

.markup__75297 .codeActions__75297 > div {
      cursor: pointer;
    }

.markup__75297 .codeContainer__75297:hover .codeActions__75297 {
    display: block;
  }

.markup__75297.inlineFormat__75297 li, .markup__75297 .inlineFormat__75297 li {
      display: inline;
      margin: 0;
      padding-right: 8px;
    }

.markup__75297.inlineFormat__75297 li:before, .markup__75297 .inlineFormat__75297 li:before {
        content: '•';
        padding-right: 4px;
      }

.markup__75297.inlineFormat__75297 li li:before, .markup__75297 .inlineFormat__75297 li li:before {
          content: '○';
          font-size: 0.625rem;
          padding: 0 4px 4px;
          line-height: 1rem;
        }

/* list styles */

.markup__75297 li {
    white-space: break-spaces;
    margin-bottom: 4px;
  }

.markup__75297 ul,
  .markup__75297 ol {
    margin: 4px 0 0 16px;
    list-style-position: outside;
  }

.markup__75297 ul.inlineFormat__75297, .markup__75297 ol.inlineFormat__75297 {
      display: inline;
      margin: 0;
      padding: 0 8px 0 0;
    }

.markup__75297 ul {
    list-style-type: disc;
  }

.markup__75297 ol {
    list-style-type: decimal;
    /*
      We want to push the ordered list over such that the <li> numeric bullets vertically align with the
      rest of the content in the message. The overall calculation is done via sizing the width of the characters
      rendered when displaying the numeric bullets. Additionally, a numeric bullet is followed by a
      period and a space ('. '), which is why there is a constant .4em to take that into account.

      We want to do this instead of something like list-style-position: inside because using the 'inside' functionality
      results undesirable wrapping behavior for bullet text content that is long enough to wrap to multiple lines.
      The wrapping behaves such that it has a different indentation compared to the first line of the bullet.

      [list-style-position: outside]
      - content goes here and
        eventually wraps
      [list-style-position: inside]
      - content goes here and
      eventually wraps

      The --totalCharacters variable comes from MarkupReactRules.web.tsx's definition for 'list'
      */
    /* stylelint-disable-next-line discord/var-validator */
    margin-left: calc(0.4em + var(--totalCharacters) * 0.6em);
  }

.markup__75297 ul ul,
  .markup__75297 ol ul {
    list-style-type: circle;
    margin-bottom: 0;
  }

.markup__75297 ol ol,
  .markup__75297 ul ol {
    /* margin-left: 1em; */
    margin-bottom: 0;
  }

/* heading styles */

.markup__75297 h1,
  .markup__75297 h2,
  .markup__75297 h3,
  .markup__75297 h4,
  .markup__75297 h5,
  .markup__75297 h6 {
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--header-primary);
    line-height: 1.375em;
    margin: 16px 0 4px;
  }

/* we do not want to show outstanding text-styles in replied message (a compact message preview) */

.markup__75297 h1.inlineFormat__75297, .markup__75297 h2.inlineFormat__75297, .markup__75297 h3.inlineFormat__75297, .markup__75297 h4.inlineFormat__75297, .markup__75297 h5.inlineFormat__75297, .markup__75297 h6.inlineFormat__75297 {
      margin: 0 !important;
    }

.markup__75297 h1.inlineFormat__75297, .markup__75297 h2.inlineFormat__75297, .markup__75297 h3.inlineFormat__75297, .markup__75297 h4.inlineFormat__75297, .markup__75297 h5.inlineFormat__75297, .markup__75297 h6.inlineFormat__75297 {
      font-weight: 600;
      font-size: inherit;
      white-space: normal;
      /* stylelint-disable-next-line declaration-no-important */ /* The h#:first-child has specificity strong than this selector, so we override it here */
      padding-right: 16px;
      /* line-height matches the height of the .emoji set for inlineFormat elsewhere in the app. */
      line-height: 1.25em;
      color: inherit;
      display: inline;
    }

.markup__75297 h1 {
    font-size: 1.5rem;
    margin: 16px 0 8px;
  }

.markup__75297 h2 {
    font-size: 1.25rem;
    margin: 16px 0 8px;
  }

.markup__75297 h3 {
    font-size: 1rem;
    margin: 16px 0 8px;
  }

.markup__75297 h1:first-child,
  .markup__75297 h2:first-child {
    margin-top: 8px;
  }

.markup__75297 h3:first-child,
  .markup__75297 h4:first-child,
  .markup__75297 h5:first-child,
  .markup__75297 h6:first-child {
    margin-top: 4px;
  }

.visual-refresh .markup__75297 code {
      background: var(--background-code);
      border: 1px solid var(--border-normal);
    }

/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */

@media all and (-webkit-max-device-pixel-ratio: 1) {
  .theme-light .markup__75297 {
    font-weight: 500;
  }
}

/* This is outside the .markup class so it will also apply to changelog entries. */

.blockquoteContainer__75297 {
  display: flex;
}

.blockquoteContainer__75297 .blockquoteDivider__75297 {
    width: 4px;
    border-radius: 4px;
  }

.blockquoteContainer__75297 blockquote {
    padding: 0 8px 0 12px;
    box-sizing: border-box;
    text-indent: 0;
    text-indent: initial;
  }

.blockquoteDivider__75297 {
  background-color: var(--interactive-muted);
}

.slateBlockquoteContainer__75297 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.slateBlockquoteContainer__75297 .blockquoteDivider__75297,
  .slateBlockquoteContainer__75297 blockquote {
    margin: 0;
    border-radius: 0;
  }

.slateBlockquoteContainer__75297 blockquote {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }

.background-opacity-low .markup__75297, .background-opacity-medium .markup__75297 {
    font-weight: 400;
  }

.background-opacity-low .markup__75297 {
    color: var(--white-500);
    text-shadow:
      0 0 1px var(--primary-700),
      1px 1px 0 var(--primary-700);
  }

.background-opacity-low .markup__75297 a {
      color: var(--text-link);
      text-shadow:
        0 0 1px hsl(var(--primary-700-hsl) / 0.7),
        1px 1px 0 hsl(var(--primary-700-hsl) / 0.7);
    }

.background-opacity-medium .markup__75297 {
    color: var(--primary-100);
    text-shadow:
      0 0 1px var(--primary-600),
      1px 1px 0 var(--primary-600);
  }

.background-opacity-medium .markup__75297 a {
      color: var(--text-link);
      text-shadow:
        0 0 1px hsl(var(--primary-700-hsl) / 0.8),
        1px 1px 0 hsl(var(--primary-700-hsl) / 0.8);
    }

.background-opacity-high .markup__75297 {
    color: var(--primary-100);
    text-shadow:
      0 0 1px var(--primary-600),
      1px 1px 0 var(--primary-600);
  }

.background-opacity-low pre, .background-opacity-medium pre {
    border-color: hsl(var(--primary-500-hsl) / 0.2);
  }

.background-opacity-low pre, .background-opacity-medium pre, .background-opacity-high pre {
    background: hsl(var(--primary-630-hsl) / 0.3);
    border-color: hsl(var(--primary-700-hsl) / 0.1);
  }

.background-opacity-low code, .background-opacity-medium code, .background-opacity-high code {
    background-color: transparent;
  }

.background-opacity-low code.inline, .background-opacity-medium code.inline, .background-opacity-high code.inline {
    background-color: hsl(var(--primary-630-hsl) / 0.3);
  }

.background-opacity-low .mention, .background-opacity-medium .mention, .background-opacity-high .mention {
    text-shadow:
      0 1px 1px var(--brand-600),
      0 1px 0 var(--brand-600);
  }

.overlay-unlocked code,
  .overlay-unlocked code.inline {
    background: var(--background-secondary);
    border-color: var(--background-tertiary);
  }

.roleMention__75297 {
  font-weight: 500;
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
}

.rolePopout__75297 {
  width: 240px;
  background-color: var(--background-secondary);
  border-radius: 8px;
  max-height: calc(100vh - 20px);
}

.roleHeader__75297 {
  padding: 12px 8px 0 16px;
  height: 40px;
}

.roleScroller__75297 {
  margin-top: 4px;
  margin-bottom: 8px;
}

.timestamp__75297 {
  background-color: var(--background-modifier-accent);
  border-radius: 3px;
  padding: 0 2px;
}

.timestampTooltip__75297 {
  max-width: none;
  max-width: initial;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .blockquoteDivider__75297 {
    /*noinspection CssInvalidPropertyValue*/
    background-color: CanvasText;
  }

.enable-forced-colors code.inline {
    position: relative;
  }

.enable-forced-colors code.inline:before,
    .enable-forced-colors code.inline:after {
      /*noinspection CssInvalidPropertyValue*/
      border: 1px solid CanvasText;
      content: '';
      display: inline-block;
      height: 1em;
      margin-bottom: -3px;
      width: 2px;
    }

.enable-forced-colors code.inline:before {
      border-right-width: 0;
    }

.enable-forced-colors code.inline:after {
      border-left-width: 0;
    }

.enable-forced-colors .mention,
  .enable-forced-colors .roleMention__75297 {
    background-color: ButtonFace;
    color: ButtonText;
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.theme-light {
  --__spoiler-background-color--hidden: var(--primary-300);
  --__spoiler-background-color--hidden--hover: hsl(var(--primary-300-hsl) / 0.8);
  --__spoiler-background-color--revealed: hsl(var(--black-500-hsl) / 0.1);
  --__spoiler-text-color--hidden: transparent;

  --__spoiler-warning-text-color: var(--primary-200);
  --__spoiler-warning-text-color--hover: var(--white-500);
  --__spoiler-warning-background-color: hsl(var(--black-500-hsl) / 0.6);
  --__spoiler-warning-background-color--hover: hsl(var(--black-500-hsl) / 0.9);

  --__spoiler-container-box-shadow-color: hsl(var(--black-500-hsl) / 0.1);
}

.theme-dark,
.theme-dark.custom-theme-background {
  --__spoiler-background-color--hidden: var(--primary-700);
  --__spoiler-background-color--hidden--hover: hsl(var(--primary-700-hsl) / 0.8);
  --__spoiler-background-color--revealed: hsl(var(--white-500-hsl) / 0.1);
  --__spoiler-text-color--hidden: transparent;

  --__spoiler-warning-text-color: var(--primary-200);
  --__spoiler-warning-text-color--hover: var(--white-500);
  --__spoiler-warning-background-color: hsl(var(--black-500-hsl) / 0.6);
  --__spoiler-warning-background-color--hover: hsl(var(--black-500-hsl) / 0.9);

  --__spoiler-container-box-shadow-color: hsl(var(--black-500-hsl) / 0.1);
}

/* Inherits from .theme-dark */

.theme-dark.custom-theme-background {
  --__spoiler-background-color--hidden: var(--primary-630);
  --__spoiler-background-color--hidden--hover: hsl(var(--primary-630-hsl) / 0.8);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

/* Use the class multiple times to make sure that these forced color definitions always override the above definitions */

.enable-forced-colors.enable-forced-colors.enable-forced-colors {
  /* Make the hidden content look like a button */
  --__spoiler-background-color--hidden: ButtonFace;
  --__spoiler-background-color--hidden--hover: ButtonFace;
  --__spoiler-background-color--revealed: transparent;
  /*
    High contrast doesn't like "transparent", so mimic the background color instead.
    This is fine for high contrast mode because the background colors in high contrast are solid,
    where-as the background colors in normal mode themes alpha-channels to be lighter offsets which ends up allowing
    text to show through which is why they use "transparent" for their font color.
  */
  --__spoiler-text-color--hidden: ButtonFace;

  /* On hover, use ButtonText coloring to indicate that the area is clickable */
  --__spoiler-border-color--hidden: CanvasText;
  --__spoiler-border-color--hidden--hover: ButtonText;
  --__spoiler-border-color--revealed: CanvasText;

  --__spoiler-warning-text-color: CanvasText;
  --__spoiler-warning-text-color--hover: CanvasText;
  --__spoiler-warning-background-color: Canvas;
  --__spoiler-warning-background-color--hover: Canvas;

  --__spoiler-container-box-shadow-color: transparent;
}

/*
  Sets --__current-* variables for accessing the correct css variables based on hidden and hover states.
  All other classes are nested in .spoilerContent, so they will have access to these variables.
 */

.spoilerContent__54ab5 {
  --__current--spoiler-content-opacity: 1;
  --__current--spoiler-background-color: var(--__spoiler-background-color--revealed);
  --__current--spoiler-border-color: var(--__spoiler-border-color--revealed);
  --__current--spoiler-pointer-events: all;
}

.spoilerContent__54ab5.hidden__54ab5 {
    --__current--spoiler-content-opacity: 0;
    --__current--spoiler-text-color: var(--__spoiler-text-color--hidden);
    --__current--spoiler-background-color: var(--__spoiler-background-color--hidden);
    --__current--spoiler-border-color: var(--__spoiler-border-color--hidden);
    --__current--spoiler-pointer-events: none;

    --__current--spoiler-warning-text-color: var(--__spoiler-warning-text-color);
    --__current--spoiler-warning-background-color: var(--__spoiler-warning-background-color);
  }

.spoilerContent__54ab5.hidden__54ab5:hover {
      --__current--spoiler-background-color: var(--__spoiler-background-color--hidden--hover);
      --__current--spoiler-border-color: var(--__spoiler-border-color--hidden--hover);

      --__current--spoiler-warning-text-color: var(--__spoiler-warning-text-color--hover);
      --__current--spoiler-warning-background-color: var(--__spoiler-warning-background-color--hover);
    }

/* -------------- Attachment & Embed spoiling ----------------- */

/* Used for spoiled attachments (SPOILER_cat.png) and spoiled embeds (||https://google.com||) */

.spoilerContainer__54ab5 {
  position: relative;
  /* https://stackoverflow.com/questions/36378512/backdrop-filter-extends-beyond-border-radius */
  filter: blur(0);
  background-color: var(--__current--spoiler-background-color);
}

.spoilerContainer__54ab5.embedContainer__54ab5 {
    border-radius: var(--radius-xs);
  }

.spoilerContainer__54ab5.attachmentContainer__54ab5 {
    border-radius: var(--radius-sm);
  }

.spoilerContainer__54ab5.hiddenSpoiler__54ab5 {
    cursor: pointer;
  }

.spoilerContainer__54ab5.hidden__54ab5 {
    overflow: hidden;
  }

/* Override styles in the hidden embed */

.spoilerContainer__54ab5.hidden__54ab5 article {
      background-color: var(--__current--spoiler-background-color);
      border-color: var(--__current--spoiler-background-color);
    }

.spoilerContainer__54ab5.hidden__54ab5:not(:focus) {
      box-shadow: 0.5px 0.5px 1px 1px var(--__spoiler-container-box-shadow-color);
    }

.enable-forced-colors .spoilerContainer__54ab5 {
    border: 1px solid var(--__current--spoiler-border-color);
  }

/* Override styles in the hidden embed */

.enable-forced-colors .spoilerContainer__54ab5 article {
      border-color: var(--__current--spoiler-border-color);
    }

.spoilerInnerContainer__54ab5 {
  width: 100%;
  height: 100%;
}

.obscureWarning__54ab5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  padding: 8px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--__current--spoiler-warning-text-color);
}

.constrainedObscureContent__54ab5 {
  min-width: 146px;
  min-height: 212px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.explicitContentWarning__54ab5 {
  
  text-align: center;
  width: 100%;
}

.explicitContentWarningText__54ab5 {
  margin-top: var(--spacing-4);
}

/* The text that is conditionally rendered on top of .spoilerContainer to tell you _why_ its spoiled */

.spoilerWarning__54ab5 {
  
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 15px;
  background-color: var(--__current--spoiler-warning-background-color);
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
}

.spoilerWarning__54ab5.embed__54ab5 {
    margin-left: 4px;
  }

/* -------- Markdown Spoiling --------- */

/* Encapsulates the entire markdown content block. For individual text block nodes, see .obscuredTextContent */

.spoilerMarkdownContent__54ab5 {
  border-radius: var(--radius-xs);
  background-color: var(--__current--spoiler-background-color);

  /* Makes the border-radius on the spoiler background apply for each line of text when the text is multiline */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.spoilerMarkdownContent__54ab5.hidden__54ab5 {
    cursor: pointer;
  }

.spoilerMarkdownContent__54ab5.hidden__54ab5 .obscuredTextContent__54ab5,
    .spoilerMarkdownContent__54ab5.hidden__54ab5 .obscuredBlockContent__54ab5 {
      cursor: pointer;
      /*
        For all elements that are within the same inline layout context hierarchy
          (i.e: there is no 'display: block .spoilerMarkdownContent and them)
        the outer .spoilerMarkdownContent will pick up the click and hover states even though the inner
        content cannot have pointer-events. For elements that are separateed from the context hierarchy via
        a non-inline display, they have manual handling of pointer-events in the css below.
        See the definitions nested in .spoilerMarkdownContent at the bottom of the file.
       */
      pointer-events: none;
    }

/*
  Have outer and inner obscuredTextContext classes so we have have inline-text wrapping borders
  in High Contrast mode while still making the inner text be opacity: 0
*/

.enable-forced-colors .obscuredTextContent__54ab5 {
    border-radius: var(--radius-xs);
    border: 1px solid var(--__current--spoiler-border-color);
    padding: 0 2px;

    /* Makes the border-radius for the high-contrast border apply for each line of text when the text is multiline */
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

.obscuredTextContentInner__54ab5 {
  color: var(--__current--spoiler-text-color);
}

/*
    Hide the inline elements that hold text.
    Importantly, these can be opacity: 0'd because, while they themselves will be invisible, the fact
    that they are taking up some amount of width inside of .obscuredTextContentInner will be registered when
    the browser paints .spoilerMarkdownContent's background-color because these are all in the same inline context
    so they're treated as if they're part of .obscuredTextContentInner until there is a layout change (display: block).
   */

.obscuredTextContentInner__54ab5 span,
  .obscuredTextContentInner__54ab5 code {
    opacity: var(--__current--spoiler-content-opacity);
    transition: opacity 0.1s ease;
  }

.enable-forced-colors .spoilerMarkdownContent__54ab5 a {
      /*
        Links have their own background color setup for high-contrast mode so we have to override it
        when we are dealing with spoilers.
      */
      background-color: var(--__current--spoiler-background-color);
    }

.spoilerMarkdownContent__54ab5 blockquote {
    position: relative;
    /* Allow users to click the spoiler on this to un-spoiler the content */
    pointer-events: all;
    /* Hovering shows an opacity'd color which will leak through the text if we don't match the text color match */
    color: var(--__current--spoiler-text-color);
  }

/*
      Hide the content of the blockquote via an overlay instead of opacity or transparent font.
      Transparent font doesn't work on high-contrast mode, and using opacity wont work because blockquote
      is a 'display: block' element, so its width wont be treated as inline when paint .spoilerMarkdownContent's
      background color. So, instead, hide to whole element and match the functionality of .spoilerMarkdownContent
    */

.spoilerMarkdownContent__54ab5 blockquote:before {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--__current--spoiler-background-color);
      border-radius: var(--radius-xs);
    }

.enable-forced-colors .spoilerMarkdownContent__54ab5 blockquote:before {
        border: 1px solid var(--__current--spoiler-border-color);
      }

.spoilerMarkdownContent__54ab5 pre {
    position: relative;
    /* Allow users to click the spoiler on this to un-spoiler the content */
    pointer-events: all;
  }

/*
      Hide the content of the <pre> via an overlay instead of opacity or transparent font.
      Transparent font doesn't work on high-contrast mode, and using opacity wont work because <pre>
      is a 'display: block' element, so its width wont be treated as inline when paint .spoilerMarkdownContent's
      background color. So, instead, hide to whole element and match the functionality of .spoilerMarkdownContent
    */

.spoilerMarkdownContent__54ab5 pre:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: var(--__current--spoiler-background-color);
      color: var(--__current--spoiler-text-color);
      border-radius: var(--radius-xs);
    }

.enable-forced-colors .spoilerMarkdownContent__54ab5 pre:before {
        border: 1px solid var(--__current--spoiler-border-color);
      }

.spoilerMarkdownContent__54ab5 pre code {
      opacity: var(--__current--spoiler-content-opacity);
    }

.spoilerMarkdownContent__54ab5 ul li::marker, .spoilerMarkdownContent__54ab5 ol li::marker {
        /* Explicitly show the marker regardless of current visibility state of the spoiler so user knows it's a list */
        color: var(--text-normal);
      }

/*
    As an example to help understand the nested spans discussed in the comments:
    Markdown: # hello <t:1686850560:d> ~~no~~
    HTML:
      <h1>
        <span> <!------ innerContentWrappingSpanForCssTargeting -->
          <span>hello</span>
          <span class="timestamp">June 15, 2023 1:36 PM</span>
          <s>
            <span>no</span>
          </s>
        </span>
      </h1>

    The same functionality exists for wrapping the inner content for each <li> as well:
    Markdown:
    - item 2 <t:1686850560:d> ~~no~~
    HTML:
      <ul>
        <li>
          <span> <!------ innerContentWrappingSpanForCssTargeting -->
            <span>item 2</span>
            <span class="timestamp">June 15, 2023 1:36 PM</span>
            <s>
              <span>no</span>
            </s>
          </span>
        </li>
      </ul>
   */

/* Markdown list-items wrap all of their content in a span specifically so we can target it here */

.spoilerMarkdownContent__54ab5 h1 > span, .spoilerMarkdownContent__54ab5 h2 > span, .spoilerMarkdownContent__54ab5 h3 > span, .spoilerMarkdownContent__54ab5 h4 > span, .spoilerMarkdownContent__54ab5 h5 > span, .spoilerMarkdownContent__54ab5 ul li > span, .spoilerMarkdownContent__54ab5 ol li > span, .spoilerMarkdownContent__54ab5 small > span {
      opacity: 1 !important;
      color: var(--__current--spoiler-text-color) !important;
    }

.spoilerMarkdownContent__54ab5 h1 > span, .spoilerMarkdownContent__54ab5 h2 > span, .spoilerMarkdownContent__54ab5 h3 > span, .spoilerMarkdownContent__54ab5 h4 > span, .spoilerMarkdownContent__54ab5 h5 > span, .spoilerMarkdownContent__54ab5 ul li > span, .spoilerMarkdownContent__54ab5 ol li > span, .spoilerMarkdownContent__54ab5 small > span {
      /*
        As this is a span within .obscuredTextContentInner, it would be opacity: 0 when hidden. However, we are
        forcibly making it opacity: 1 while allowing the other spans _inside_ of this one to retain their
        conditional opacity based on spoiler state.

        We are doing this because we can render the background color of this span to represent the spoiler width
        while the spans inside of this one are opacity hidden. Since the inner spans are all inline, they contribute to
        the overall sizing of this span, so we can use them just to expand this span to the correct width when
        rendering the spoiler background color while they themselves remain hidden via opacity: 0.
      */
      /* stylelint-disable-next-line declaration-no-important */
      /* Allow users to click this element to to un-spoiler the content */
      pointer-events: all;
      /* Heading classes are higher-specificity, but we want to make sure that text content isn't visible when hidden */
      /* stylelint-disable-next-line declaration-no-important */
      background: var(--__current--spoiler-background-color);
      border-radius: var(--radius-xs);
      /* Makes the border-radius on the spoiler background apply for each line of text when the text is multiline */
      /* stylelint-disable-next-line property-no-vendor-prefix */
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

.enable-forced-colors .spoilerMarkdownContent__54ab5 h1 > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 h2 > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 h3 > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 h4 > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 h5 > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 ul li > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 ol li > span, .enable-forced-colors .spoilerMarkdownContent__54ab5 small > span {
        border: 1px solid var(--__current--spoiler-border-color);
      }

/*
        Re-disable pointer events for the children nested inside of this span (other spans)
        unless the content is no longer hidden
      */

.spoilerMarkdownContent__54ab5 h1 > span > *, .spoilerMarkdownContent__54ab5 h2 > span > *, .spoilerMarkdownContent__54ab5 h3 > span > *, .spoilerMarkdownContent__54ab5 h4 > span > *, .spoilerMarkdownContent__54ab5 h5 > span > *, .spoilerMarkdownContent__54ab5 ul li > span > *, .spoilerMarkdownContent__54ab5 ol li > span > *, .spoilerMarkdownContent__54ab5 small > span > * {
        pointer-events: var(--__current--spoiler-pointer-events);
      }

.obscureButtonContainer__54ab5 {
  position: absolute;
  z-index: 1;
  right: var(--spacing-4);
  bottom: var(--spacing-4);
  transition: bottom 0.2s ease-in-out;
}

.obscureHoverButton__54ab5 {
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--white-500);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease-in-out;
  padding: var(--spacing-4);
  display: flex;
  cursor: pointer;
}

.obscureHoverButton__54ab5:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 0.2s ease-in-out;
}

.obscureHoverButton__54ab5:focus {
  background-color: rgba(0, 0, 0, 1);
  transition: background-color 0.2s ease-in-out;
}

.obscureHoverButton__54ab5:active {
  background-color: var(--background-secondary-alt);
  transition: background-color 0.2s ease-in-out;
}

.nowrap__5db79 {
  white-space: nowrap;
}

.icon_b75563 {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-bottom: 0.2rem;
  margin-right: var(--spacing-4);
}

.name_b75563 {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* TODO(maxg): Adding :global(.) to increase the specificity of these
   selectors due to the existence of the global style. We should attempt to
   remove the global style. */

.channelWithIcon_b75563 .iconMentionText_b75563 {
  gap: 0 !important;
}

.channelWithIcon_b75563 .iconMentionText_b75563 {
  /* stylelint-disable-next-line declaration-no-important */
}

.icon_d2d51d {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  margin-bottom: 0.2rem;
}

.textIcon_d2d51d {
  line-height: 1.05rem !important;
  font-size: 0.5rem !important;
}

.textIcon_d2d51d {
  width: 1.05rem;
  /* Override GuildIcon text metrics */
  height: 1.05rem;
  /* stylelint-disable-next-line declaration-no-important */
  /* stylelint-disable-next-line declaration-no-important */
}

.imageIcon_d2d51d {
  width: 1em;
  height: 1em;
}

.name_d2d51d {
  text-overflow: ellipsis;
  overflow: hidden;
}

.wrapper_f61d60 {
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
  unicode-bidi: plaintext;
  color: var(--mention-foreground);
  background: var(--mention-background);
}

.theme-dark.low-contrast .wrapper_f61d60 {
  background: var(--brand-05a);
  color: var(--brand-300);
}

.interactive {
  transition:
    background-color 50ms ease-out, color 50ms ease-out;
  cursor: pointer;
}

.interactive:hover {
  color: var(--white-500);
  background-color: var(--brand-500);
}

.icon_c76ab6 {
  width: 0.5em;
  height: 0.5em;
  margin-left: 4px;
  margin-right: 2px;
  margin-bottom: 1px;
}

.icon__3173f {
  width: 0.95rem;
  height: 0.95rem;
  position: relative;
  padding-left: 4px;
  top: 2px;
}

.overflow__82b15 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.button__36b87 {
  position: relative;
  font-weight: 600;
  color: var(--white-500);
  background: var(--button-creator-revenue-background);
}

.buttonContents__36b87 {
  justify-content: center;
  display: flex;
}

.icon__36b87 {
  margin-right: 4px;
}

.premiumSubscribeButton__29199 {
  display: flex;
  align-items: center;
}

.premiumIcon__29199 {
  margin-right: 4px;
  height: 20px;
}

.buttonText__29199 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.giftButton__29199 {
  display: flex;
  align-items: center;
}

.giftIcon__29199 {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-right: 4px;
}

.tier1Gradient__29199 {
  color: var(--white-500);
  background: var(--custom-premium-colors-premium-gradient-tier-1);
}

.tier2Gradient__29199 {
  color: var(--white-500);
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
}

.visual-refresh .tier1Gradient__29199,
  .visual-refresh .tier2Gradient__29199 {
    background-clip: padding-box;
  }

.imageWrapper_af017a {
  display: block;
  position: relative;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  overflow: hidden;
  border-radius: 3px;
}

.clickableWrapper_af017a,
.loadingOverlay_af017a {
  width: 100%;
  height: 100%;
}

.imageWrapperBackground_af017a {
  background: hsl(var(--black-500-hsl) / 0.05);
}

.imagePlaceholder_af017a {
  display: block;
  position: absolute;
  top: 0;
  background: var(--bg-overlay-chat, var(--background-primary));
}

.imageErrorWrapper_af017a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imageError_af017a {
  max-width: 200px;
  max-height: 100%;
  width: 100%;
  flex-basis: content;
}

.imageLoadingOverlay_af017a {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  margin: 4px;
  width: 24px;
  height: 24px;
  padding: 3px;
  box-sizing: border-box;
  background-color: hsl(var(--black-500-hsl) / 0.5);
  border-radius: 100%;
}

.cornerLoadingSpinner_af017a {
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

.theme-light .cornerLoadingSpinner_af017a circle,
.theme-dark .cornerLoadingSpinner_af017a circle {
  stroke: var(--white-500);
}

.imageAccessory_af017a {
  position: absolute;
  top: 6px;
  left: 6px;
  /* ensure the accessory is visible above the image */
  z-index: 3;
}

.imageZoom_af017a {
  /* stylelint-disable declaration-block-no-duplicate-properties, value-no-vendor-prefix */
  cursor: nesw-resize;
  cursor: zoom-in;
  /* stylelint-enable */
}

.clickable_af017a {
  cursor: pointer;
}

.originalLink_af017a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.imageClickable_af017a {
  border-radius: inherit;
}

.background-opacity-low .imageWrapper_af017a, .background-opacity-medium .imageWrapper_af017a {
    opacity: 0.6;
  }

.overlay-unlocked .imageWrapper_af017a {
  opacity: 1;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .originalLink_af017a {
    border: 2px solid ButtonText;
  }

.gifTag_f60819 {
  background-image: url(/assets/9811b405dc8e999f.svg);
  width: 29px;
  height: 22px;
}

.base__5cd44 {
  opacity: 1;
  transition: opacity 150ms ease-out;
}

.forceHidden__5cd44 {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0ms;
}

.base__5cd44.hidden__5cd44:not(:hover) {
  opacity: 0;
}

.keyboard-mode .base__5cd44, .group__5cd44:has(.base__5cd44:hover) .base__5cd44 {
    opacity: 1;
  }

.group__5cd44 {
  display: contents;
}

.full-motion .transition__5fbe9 {
    transition: transform 0.2s ease;
  }

.directionDown__5fbe9 {
  transform: rotate3d(0, 0, -1, 0deg);
}

.directionRight__5fbe9 {
  transform: rotate3d(0, 0, -1, 90deg);
}

.directionLeft__5fbe9 {
  transform: rotate3d(0, 0, -1, -90deg);
}

.directionUp__5fbe9 {
  transform: rotate3d(0, 0, -1, 180deg);
}

/* stylelint-disable color-no-hex */
.controlIcon_f1ceac {
  width: 24px;
  height: 24px;
  color: var(--interactive-normal);
  display: flex;
}
.controlIcon_f1ceac:hover,
  .controlIcon_f1ceac.active_f1ceac {
    color: var(--interactive-active);
  }
.controlIcon_f1ceac.themeable_f1ceac {
    color: var(--interactive-normal);
  }
.controlIcon_f1ceac.themeable_f1ceac:hover,
    .controlIcon_f1ceac.themeable_f1ceac.active_f1ceac {
      color: var(--interactive-active);
    }
.experimentControlIcon_f1ceac {
  width: 20px;
  height: 20px;
  color: var(--interactive-normal);
  display: flex;
}
.experimentControlIcon_f1ceac:hover,
  .experimentControlIcon_f1ceac.active_f1ceac {
    color: var(--interactive-active);
  }
.experimentControlIcon_f1ceac.themeable_f1ceac {
    color: var(--interactive-normal);
  }
.experimentControlIcon_f1ceac.themeable_f1ceac:hover,
    .experimentControlIcon_f1ceac.themeable_f1ceac.active_f1ceac {
      color: var(--interactive-active);
    }
.colorable_f1ceac.red_f1ceac {
    background: var(--status-danger-background);
  }
.colorable_f1ceac.red_f1ceac,
    .colorable_f1ceac.red_f1ceac .centerIcon_f1ceac {
      color: var(--status-danger-text);
    }
.colorable_f1ceac.red_f1ceac.active_f1ceac,
    .colorable_f1ceac.red_f1ceac:hover {
      background: var(--red-500);
    }
.colorable_f1ceac.primaryDark_f1ceac {
    background: var(--primary-630);
  }
.colorable_f1ceac.primaryDark_f1ceac,
    .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac {
      color: var(--white-500);
    }
.colorable_f1ceac.primaryDark_f1ceac.active_f1ceac,
    .colorable_f1ceac.primaryDark_f1ceac:hover {
      background: var(--primary-700);
    }
.colorable_f1ceac.primaryLight_f1ceac {
    background: var(--primary-130);
  }
.colorable_f1ceac.primaryLight_f1ceac,
    .colorable_f1ceac.primaryLight_f1ceac .centerIcon_f1ceac {
      color: var(--primary-860);
    }
.colorable_f1ceac.primaryLight_f1ceac.active_f1ceac,
    .colorable_f1ceac.primaryLight_f1ceac:hover {
      background: var(--primary-230);
    }
.colorable_f1ceac.activeLight_f1ceac {
    background: var(--primary-400);
  }
.colorable_f1ceac.activeLight_f1ceac,
    .colorable_f1ceac.activeLight_f1ceac .centerIcon_f1ceac {
      color: var(--white-500);
    }
.colorable_f1ceac.activeLight_f1ceac.active_f1ceac,
    .colorable_f1ceac.activeLight_f1ceac:hover {
      background: var(--primary-500);
    }
.colorable_f1ceac.white_f1ceac {
    background: var(--white-500);
  }
.colorable_f1ceac.white_f1ceac,
    .colorable_f1ceac.white_f1ceac .centerIcon_f1ceac {
      color: var(--primary-860);
    }
.colorable_f1ceac.white_f1ceac.active_f1ceac,
    .colorable_f1ceac.white_f1ceac:hover {
      background: var(--primary-130);
    }
.colorable_f1ceac.green_f1ceac {
    background: var(--green-360);
  }
.colorable_f1ceac.green_f1ceac,
    .colorable_f1ceac.green_f1ceac .centerIcon_f1ceac {
      color: var(--white-500);
    }
.colorable_f1ceac.green_f1ceac.active_f1ceac,
    .colorable_f1ceac.green_f1ceac:hover {
      background: var(--green-360);
    }
.colorable_f1ceac.premiumGradient_f1ceac {
    background: linear-gradient(
      to right,
      var(--premium-tier-2-purple-for-gradients),
      var(--premium-tier-2-purple-for-gradients-2),
      var(--premium-tier-2-pink-for-gradients)
    );
  }
.colorable_f1ceac.premiumGradient_f1ceac,
    .colorable_f1ceac.premiumGradient_f1ceac .centerIcon_f1ceac {
      color: var(--white-500);
    }
.colorable_f1ceac.yellow_f1ceac {
    background: var(--yellow-400);
  }
.colorable_f1ceac.yellow_f1ceac,
    .colorable_f1ceac.yellow_f1ceac .centerIcon_f1ceac {
      color: var(--white-500);
    }
.colorable_f1ceac.yellow_f1ceac.active_f1ceac,
    .colorable_f1ceac.yellow_f1ceac:hover {
      background: var(--yellow-530);
    }
.colorable_f1ceac.experimentDark_f1ceac,
    .colorable_f1ceac.experimentDark_f1ceac .centerIcon_f1ceac {
      color: var(--white-500);
    }
.colorable_f1ceac.experimentDark_f1ceac.active_f1ceac:not(.disabled_f1ceac), .colorable_f1ceac.experimentDark_f1ceac:hover:not(.disabled_f1ceac) {
        background: rgba(255, 255, 255, 0.1);
      }
.colorable_f1ceac.experimentActiveLight_f1ceac {
    background: var(--white-500);
  }
.colorable_f1ceac.experimentActiveLight_f1ceac,
    .colorable_f1ceac.experimentActiveLight_f1ceac .centerIcon_f1ceac {
      color: var(--primary-860);
    }
.colorable_f1ceac.experimentActiveLight_f1ceac.active_f1ceac:not(.disabled_f1ceac), .colorable_f1ceac.experimentActiveLight_f1ceac:hover:not(.disabled_f1ceac) {
        background: var(--primary-230);
      }
.centerButton_f1ceac {
  
  border-radius: 50%;
  padding: 16px;
  transition:
    background 150ms ease-in-out, color 150ms ease-in-out;
}
.centerButton_f1ceac .centerIcon_f1ceac {
    transition: color 150ms ease-in-out;
  }
.experimentButton_f1ceac {
  
  border-radius: 8px;
  padding: 10px;
  transition:
    background 150ms ease-in-out, color 150ms ease-in-out;
}
.experimentButton_f1ceac .centerIcon_f1ceac {
    transition: color 150ms ease-in-out;
  }
.fullRegionButton_f1ceac {
  border-radius: 12px;
}
.fullRegionDropdownButton_f1ceac {
  display: flex;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--border-faint);
}
.fullRegionDropdownButton_f1ceac.red_f1ceac {
    background-color: var(--status-danger-background);
  }
.fullRegionDropdownButton_f1ceac.primaryDark_f1ceac {
    background-color: var(--background-tertiary);
  }
.fullRegionDropdownButton_f1ceac.green_f1ceac {
    background-color: var(--green-360);
  }
.fullRegionIcon_f1ceac {
  padding: 4px 12px;
}
.buttonPremiumGlow_f1ceac {
  /* Applying the shadow twice to achieve more "spread" since the filter won't get bright enough without this */
  filter: drop-shadow(0 0 12px #a944b0) drop-shadow(0 0 12px #a944b0);
}
/* Min app width is 940px, this affects popouts/browsers */
@media (max-width: 456px) {
  .centerButton_f1ceac {
    padding: 8px;
  }

  .contextMenuContainer_f1ceac {
    display: none;
  }
}
@media (min-width: 457px) {
  .unmasked_f1ceac {
    display: none;
  }
}
.lineHeightReset_f1ceac {
  line-height: 0;
}
.contextMenuContainer_f1ceac {
  position: relative;
}
.staticButton_f1ceac {
  position: static;
}
.contextMenuNub_f1ceac {
  

  background-clip: padding-box;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px;

  width: 16px;
  height: 16px;
  background-color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    background 150ms ease-in-out, color 150ms ease-in-out;
}
.caretButtonContainer_f1ceac {
  display: flex;
  direction: row;
  align-items: center;
  gap: 1px;
}
.caretButtonContainer_f1ceac.disabled_f1ceac {
    color: var(--interactive-muted) !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
  }
.caretButtonContainer_f1ceac.disabled_f1ceac {
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
    pointer-events: none;
  }
.caretButtonContainer_f1ceac.disabled_f1ceac:hover {
      background-color: transparent !important;
    }
.caretButtonContainer_f1ceac.disabled_f1ceac:hover {
      /* stylelint-disable-next-line declaration-no-important */
    }
.contextMenuNubExperiment_f1ceac {
  
  cursor: pointer;

  padding: 10px 2px;
  border-radius: 8px;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    background 150ms ease-in-out, color 150ms ease-in-out;
}
.contextMenuNubExperiment_f1ceac.disabled_f1ceac {
    cursor: not-allowed;
  }
.contextMenuCaret_f1ceac {
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: none;
}
.contextMenuCaret_f1ceac.open_f1ceac {
    transform: rotateX(180deg);
  }
.contextMenuCaretExperiment_f1ceac {
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: none;
}
.contextMenuCaretExperiment_f1ceac.disabled_f1ceac {
    color: var(--interactive-normal) !important;
  }
.contextMenuCaretExperiment_f1ceac.disabled_f1ceac {
    /* stylelint-disable-next-line declaration-no-important */
    cursor: not-allowed;
  }
.contextMenuCaretExperiment_f1ceac.open_f1ceac {
    transform: rotateX(180deg);
  }
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .contextMenuNub_f1ceac,
    .enable-forced-colors .contextMenuNub_f1ceac:hover {
      background-color: ButtonFace;
      border: 1px solid Canvas;
      color: ButtonText;
    }
.enable-forced-colors .contextMenuNub_f1ceac.active_f1ceac {
      background-color: HighlightText;
      border-color: Highlight;
      color: Highlight;
    }
.buttonMask_f1ceac {
  width: inherit;
  height: inherit;
}
.glow_f1ceac {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 190%;
  width: 190%;
  opacity: 1;
}
.glowVideo_f1ceac {
  width: 100%;
  height: 100%;
  pointer-events: none;
  -o-object-fit: fill;
     object-fit: fill;
}

.mediaBarInteraction_b26b79,
.mediaBarInteractionDragging_b26b79 {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0 7px;
}

  .mediaBarInteraction_b26b79:hover .mediaBarWrapper_b26b79, .mediaBarInteractionDragging_b26b79:hover .mediaBarWrapper_b26b79 {
      box-shadow: 0 1px 1px hsl(var(--black-500-hsl) / 0.3);
    }

  .mediaBarInteraction_b26b79:hover .bubble_b26b79, .mediaBarInteractionDragging_b26b79:hover .bubble_b26b79 {
      opacity: 1;
    }

.mediaBarInteraction_b26b79:hover .mediaBarGrabber_b26b79 {
      transform: scale(1);
      background-color: var(--brand-560);
    }

.mediaBarInteraction_b26b79:hover .mediaBarPreview_b26b79 {
      opacity: 0.3;
    }

.mediaBarInteraction_b26b79:hover .bubble_b26b79 {
      opacity: 1;
    }

.mediaBarInteractionDragging_b26b79 .bubble_b26b79 {
    opacity: 1;
  }

.mediaBarInteractionDragging_b26b79 .mediaBarGrabber_b26b79 {
    transform: scale(1);
    background-color: var(--brand-560);
  }

.mediaBarInteractionVolume_b26b79 {
  flex: none;
  align-self: center;
  border-radius: 8px;
  background-color: hsl(var(--black-500-hsl) / 0.7);
  padding: 4px 8px;
  width: 72px;
  margin: 0 4px 0 0;
}

.vertical_b26b79 {
  display: flex;
  align-items: center;
  transform-origin: top;
  transform: rotate(-90deg);
  height: 54px;
  width: 140px;
}

.horizontal_b26b79 {
  width: 100%;
  display: flex;
  align-self: stretch;
}

/* Due to the way width and height calculations are used, we have to fake the
 * rounded corners so they don't add into the width/height calculations or we
 * risk having skewed positions or even worse, circles that turn into ovals */

.fakeEdges_b26b79 {
  position: relative;
}

.fakeEdges_b26b79:before,
  .fakeEdges_b26b79:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 3px;
    z-index: 1;
  }

.fakeEdges_b26b79:before {
    left: -3px;
    border-radius: 3px 0 0 3px;
  }

.fakeEdges_b26b79:after {
    right: -3px;
    border-radius: 0 3px 3px 0;
  }

.buffer_b26b79 {
  
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0.3;
  background-color: var(--white-500);
}

.buffer_b26b79:before,
  .buffer_b26b79:after {
    background-color: var(--white-500);
  }

.mediaBarWrapper_b26b79 {
  
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background-color: hsl(var(--primary-300-hsl) / 0.3);
}

.mediaBarWrapper_b26b79:before,
  .mediaBarWrapper_b26b79:after {
    background-color: hsl(var(--primary-300-hsl) / 0.3);
  }

.mediaBarWrapperVolume_b26b79 {
  flex: none;
  display: flex;
  width: 72px;
  justify-content: center;
}

.mediaBarPreview_b26b79,
.mediaBarProgress_b26b79 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.mediaBarProgress_b26b79 {
  
}

.mediaBarPreview_b26b79 {
  
}

.mediaBarPreview_b26b79 {
  z-index: 0;
  opacity: 0;
  background-color: var(--white-500);
}

.mediaBarPreview_b26b79:before,
  .mediaBarPreview_b26b79:after {
    background-color: var(--white-500);
  }

.mediaBarProgress_b26b79 {
  z-index: 3;
  background-color: var(--brand-500);
}

.mediaBarProgress_b26b79:before,
  .mediaBarProgress_b26b79:after {
    background-color: var(--brand-500);
  }

.mediaBarGrabber_b26b79 {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-top: -5px;
  margin-right: -5px;
  background-color: var(--brand-500);
  transform: scale(0);
  transform-origin: 50% 50%;
  cursor: grab;
}

.full-motion .mediaBarGrabber_b26b79 {
    transition:
      transform 250ms ease-in-out, background-color 250ms linear;
  }

.bubble_b26b79 {
  border-radius: 3px;
  position: absolute;
  top: -28px;
  padding: 0 8px;
  transform: translateX(-50%);
  width: auto;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--primary-100);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  background-color: var(--black-500);
}

.bubble_b26b79:before {
    position: absolute;
    top: 100%;
    left: 50%;
    border: 5px solid transparent;
    content: ' ';
    width: 0;
    height: 0;
    pointer-events: none;
    margin-left: -5px;
    border-top-color: var(--black-500);
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .mediaBarProgress_b26b79,
  .enable-forced-colors .mediaBarGrabber_b26b79 {
    background-color: ButtonText !important;
  }

.enable-forced-colors .mediaBarProgress_b26b79,
  .enable-forced-colors .mediaBarGrabber_b26b79 {
    /* stylelint-disable-next-line declaration-no-important */
  }

.enable-forced-colors .mediaBarInteractionVolume_b26b79 {
    background-color: ButtonFace;
  }

.cover__6eb54 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cover__6eb54.active__6eb54 {
  cursor: pointer;
  pointer-events: auto;
}

.cover__6eb54.active__6eb54:hover .iconWrapper__6eb54 {
    opacity: 0.8;
  }

.cover__6eb54.active__6eb54:active .iconWrapper__6eb54 {
    transform: translateY(1px);
  }

.iconWrapper__6eb54 {
  transition:
    opacity 0.25s, color 0.25s;
  padding: 12px;
  border-radius: 24px;
  background-color: var(--black-500);
  color: var(--white-500);
  opacity: 0.6;
}

.icon__6eb54 {
  display: block;
  width: 24px;
  height: 24px;
  /* https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175 */
  margin-left: 1px;
  margin-right: -1px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .iconWrapper__6eb54 {
    background-color: ButtonFace;
    color: ButtonText;
    opacity: 1;
  }

.wrapper__926d7 {
  box-sizing: border-box;
  display: flex;
  padding: 12px;
  height: 48px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  border-radius: 24px;
  background-color: hsl(var(--black-500-hsl) / 0.6);
  color: var(--white-500);
  flex: 0 0 auto;
  pointer-events: none;
}

  .wrapper__926d7 a:link,
  .wrapper__926d7 a:visited {
    color: var(--white-500) !important;
  }

  .wrapper__926d7 a:link,
  .wrapper__926d7 a:visited {
    pointer-events: auto;
    cursor: pointer;
    display: block;
    /* message stylus styles overwrite this link color... so temporary
     * important for now */
    /* stylelint-disable-next-line declaration-no-important */
  }

.iconWrapper__926d7 {
  pointer-events: auto;
  flex: 0 0 auto;
  opacity: 0.6;
  cursor: pointer;
  transition:
    opacity 0.25s, color 0.25s;
  /* To better align text with the play icon */
  display: flex;
  align-items: center;
}

.disableInteractions__926d7 a:link,
  .disableInteractions__926d7 a:visited,
  .disableInteractions__926d7 .iconWrapper__926d7 {
    pointer-events: none;
  }

.iconWrapperActive__926d7 {
  
}

.iconWrapperActive__926d7:hover {
    opacity: 1;
  }

.iconWrapperActive__926d7:active {
    transform: translateY(1px);
  }

.text__926d7 {
  font-size: 16px;
  padding-left: 4px;
}

.icon__926d7 {
  display: block;
  width: 24px;
  height: 24px;
}

.iconPlay__926d7 {
  
  margin-left: 1px;
  margin-right: -1px;
}

.iconExternalMargins__926d7 {
  
}

.iconExternal__926d7 {
  
}

.iconExternalMargins__926d7 {
  margin-left: 2px;
  margin-right: 4px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .iconWrapper__926d7 {
    background-color: ButtonFace;
    color: ButtonText;
    opacity: 1;
  }

.container__2d263 {
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  display: flex;
  position: relative;
}

.volumeButton__2d263 {
  line-height: 0;
}

.volumeButtonSlider__2d263 {
  position: absolute;
  bottom: calc(100% + 16px);
  left: -78px;
  right: 0;
  display: none;
  -webkit-app-region: no-drag;
}

.volumeButtonSlider__2d263.sliderVisible__2d263 {
    display: inline;
    display: initial;
  }

.wrapper_cf09d8 {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  color: var(--white-500);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: var(--background-secondary);
}

.wrapperControlsHidden_cf09d8 {
  
}

.wrapperPlaying_cf09d8 {
  
}

.wrapperPaused_cf09d8 {
  
}

.wrapperAudio_cf09d8 {
  
}

.wrapperMediaMosaic_cf09d8 {
  height: 100%;
  width: 100%;
  max-height: inherit;
}

.wrapperControlsHidden_cf09d8 {
  cursor: default;
}

.wrapperAudio_cf09d8 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-width: 1px;
  justify-content: space-between;
  overflow: visible;
  max-width: 100%;
  /* we need this so the max-width doesn't overflow parent boundries */
  /* TODO: could we apply this to all containers */
  box-sizing: border-box;
  border-color: var(--background-secondary-alt);
  background-color: var(--background-secondary);
}

.wrapperAudio_cf09d8.newMosaicStyle_cf09d8 {
  padding: 16px;
  border-radius: 8px;
  width: 432px;
}

.videoControls_cf09d8 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  /* The bottom padding is to accomodate the bounce in */
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: hsl(var(--black-500-hsl) / 0.6);
  height: 32px;
}

.audioControls_cf09d8 {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 4px;
  background-color: hsl(var(--black-500-hsl) / 0.6);
  border-radius: 3px;
}

.visual-refresh .wrapperAudio_cf09d8 {
    background-color: var(--background-mod-subtle);
    border-color: var(--border-subtle);
  }

.visual-refresh .audioControls_cf09d8 {
    border-radius: var(--radius-sm);
    background-color: var(--opacity-black-40);
  }

.controlIcon_cf09d8 {
  display: block;
  width: 24px;
  height: 24px;
  padding: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.6;
  color: var(--white);
}

.controlIcon_cf09d8:hover {
    opacity: 1;
  }

.controlIcon_cf09d8:active {
    transform: translateY(1px);
  }

.volumeSliderWrapper_cf09d8 {
  margin-bottom: 4px;
  margin-left: -4px;
}

.durationTimeWrapper_cf09d8 {
  flex: 0 0 auto;
  margin: 4px;
  height: 12px;
}

.durationTimeSeparator_cf09d8,
.durationTimeDisplay_cf09d8 {
  font-weight: 500;
  display: inline-block;
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 12px;
  vertical-align: text-top;
}

.durationTimeSeparator_cf09d8 {
  margin: 0 2px;
}

.video_cf09d8 {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 3px;
}

.video_cf09d8:-webkit-full-screen {
    z-index: 99999;
  }

.video_cf09d8::-webkit-media-controls-enclosure {
    display: none !important;
  }

.video_cf09d8::-webkit-media-controls-enclosure {
    /* overwrite browser stylesheet */
    /* stylelint-disable-next-line declaration-no-important */
  }

.audio_cf09d8 {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}

.audioMetadata_cf09d8 {
  display: flex;
}

.audioMetadata_cf09d8:before {
    width: 24px;
    height: 40px;
    content: '';
    background-image: url(/assets/a6db1d05d35f13d0.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

.audioMetadata_cf09d8 .metadataContent_cf09d8 {
    padding: 0 8px;
  }

.audioMetadata_cf09d8 .metadataDownload_cf09d8 {
    height: 24px;
    opacity: 1;
  }

.audioMetadata_cf09d8 .metadataIcon_cf09d8 {
    color: var(--interactive-normal);
  }

.audioMetadata_cf09d8 .metadataIcon_cf09d8:hover {
      color: var(--interactive-hover);
    }

.audioMetadata_cf09d8 .metadataSize_cf09d8 {
    color: var(--text-muted);
  }

.metadata_cf09d8 {
  box-sizing: border-box;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: flex-start;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
  padding: 22px 12px 12px;
  z-index: 1;
}

.metadataContent_cf09d8 {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
}

.metadataName_cf09d8 {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.metadataSize_cf09d8 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  opacity: 0.7;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.metadataDownload_cf09d8 {
  flex: 0 0 auto;
  opacity: 0.6;
}

.metadataDownload_cf09d8:hover {
    opacity: 1;
  }

.metadataIcon_cf09d8 {
  width: 24px;
  height: 25px;
  color: var(--white-500);
}

.playCenter_cf09d8 {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.playPausePop_cf09d8 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -23px;
  margin-top: -23px;
  padding: 12px;
  width: 24px;
  height: 24px;
  background-color: hsl(var(--black-500-hsl) / 0.6);
  color: var(--white-500);
  border-radius: 50%;
  pointer-events: none;
}

.playPausePop_cf09d8 .playPausePopIcon_cf09d8 {
    width: 24px;
    height: 24px;
    display: block;
  }

.videoButton_cf09d8 {
  margin-right: 8px;
}

@keyframes overlayContentHidden_cf09d8 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.overlayContentHidden_cf09d8 {
  animation: overlayContentHidden_cf09d8 0.2s ease-in-out forwards;
}

/* we don't do the same for video controls because they already have an opacity wrapped around them from the video image*/

.background-opacity-low .audioControls_cf09d8, .background-opacity-medium .audioControls_cf09d8, .background-opacity-high .audioControls_cf09d8 {
    background-color: hsl(var(--black-500-hsl) / 0.3);
  }

.background-opacity-low .audioMetadata_cf09d8:before, .background-opacity-medium .audioMetadata_cf09d8:before, .background-opacity-high .audioMetadata_cf09d8:before {
    opacity: 0.6;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .wrapper_cf09d8 {
    outline: 2px solid CanvasText;
  }

.enable-forced-colors .videoButton_cf09d8 {
    background-color: ButtonFace;
    border-radius: 4px;
    color: ButtonText;
  }

.enable-forced-colors .metadataDownload_cf09d8 {
    opacity: 1;
  }

.enable-forced-colors .videoControls_cf09d8 {
    background-color: ButtonFace;
  }

.wrapper__091cf {
  cursor: inherit;
}

.wrapper__091cf.pannable__091cf {
  cursor: grab;
}

.wrapper__091cf.pannable__091cf.panning__091cf {
  cursor: grabbing;
}

.dimensionlessImage_a22bfd {
  -o-object-fit: scale-down;
     object-fit: scale-down;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  max-height: inherit;
}

.wrapper_a22bfd {
  cursor: zoom-in;
  transition: scale 100ms ease-out;
  max-height: inherit;
}

.zoomed_a22bfd {
  cursor: zoom-out;
}

/* NOTE:
 * if your changes adjust the height of this component, make sure to update:
 * - CAROUSEL_HEIGHT in MediaViewerCarousel and
 * - the max-height calculation of mediaWrapper in MediaViewerCarousel.module.css
 */

.galleryContainer_d75751 {
  display: flex;
  justify-content: center;
  margin: 24px 40px 0;
}

.gallery_d75751 {
  padding: 0 4px;
  display: flex;
  flex-grow: 0;
  gap: 4px;
}

.galleryItemOverlay_d75751 {
  position: absolute;
  z-index: 1;
  background-color: var(--black-500);
  opacity: 0.5;
  transition: opacity 200ms ease-in-out;
  border-radius: 3px;
  height: 48px;
  width: 48px;
}

.galleryItemOverlay_d75751:hover {
    opacity: 0.15;
  }

.galleryItemOverlay_d75751.selected_d75751 {
    opacity: 0;
  }

.galleryItem_d75751 {
  background-color: var(--background-primary);
  height: 48px;
  width: 48px;
  border-radius: 3px;
  margin: 4px 0;
  cursor: pointer;
}

.wrapper_b2eddf {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mediaContainer_b2eddf {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.mediaWrapper_b2eddf {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: min(2000px, 75vw);
  /* topBar: 112, actionButtons: 144 */
  max-height: min(2000px, 65vh, 100vh - 256px);
  margin: auto;
}

.mediaWrapper_b2eddf.hasPreviews_b2eddf {
    /* topBar: 112, actionButtons: 144, previews: 64 */
    max-height: min(2000px, 65vh, 100vh - 300px);
  }

.nav_b2eddf {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  background-color: transparent;
  height: 40px;
  width: 40px;
  z-index: 1;
}

.navPrev_b2eddf {
  
  left: 40px;
}

.navNext_b2eddf {
  
  right: 40px;
}

.obscureWrapper_b2eddf {
  display: flex;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.obscureWrapper_b2eddf.obscure_b2eddf {
  filter: blur(40px) brightness(0.55);
  pointer-events: none;
}

.fadeInWrapper_b2eddf {
  margin: auto;
}

.innerWrapper_b2eddf {
  max-height: inherit;
  transition: translate 100ms ease-out;
}

.innerWrapper_b2eddf.shifted_b2eddf {
  translate: 0 89px;
}

.modal_b0827a {
  background: transparent !important;
  box-shadow: none !important;
}

.modal_b0827a {
  display: flex;
  justify-content: center;
  align-items: center;

  /* The style this overrides has two class names and is loaded later :( */
  /* stylelint-disable-next-line declaration-no-important */
  /* stylelint-disable-next-line declaration-no-important */
  border-radius: 0;
}

.image_b0827a {
  border-radius: 0;
}

@media (max-width: 485px) {
  .modal_b0827a {
    display: relative;
    overflow: visible;
    overflow: initial;
  }
}

.fileWrapper__0ccae {
  position: relative;
  width: 432px;
  max-width: 100%;
}

.file__0ccae {
  align-items: center;
  flex-direction: row;
  display: flex;
  box-sizing: border-box;
  letter-spacing: 0;
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.fileInner__0ccae {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.icon__0ccae {
  width: 30px;
  height: 40px;
  margin-right: 8px;
  flex-shrink: 0;
}

.filenameWrapper__0ccae {
  align-items: flex-end;
  display: flex;
}

.filename__0ccae {
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */

@media all and (-webkit-max-device-pixel-ratio: 1) {
  .theme-light .filename__0ccae {
    font-weight: 500;
  }
}

.metadata__0ccae {
  line-height: 16px;
  font-size: 12px;
  font-weight: 400;
  color: var(--primary-400);
  margin-right: 8px;
}

.rate__0ccae {
  flex-shrink: 0;
  margin-left: 8px;
  min-width: 60px;
  text-align: right;
}

.progressContainer__0ccae {
  
  height: 16px;
  display: flex;
  align-items: center;
}

.progress__0ccae {
  background-color: hsl(var(--primary-400-hsl) / 0.3);
}

.size__0ccae,
.cancelButton__0ccae {
  margin-left: 4px;
}

.cancelButton__0ccae {
  color: var(--interactive-normal);
  cursor: pointer;
}

.cancelButton__0ccae:hover {
    color: var(--interactive-hover);
  }

.filenameLinkWrapper__0ccae {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fileNameLink__0ccae:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.file__0ccae {
  border-color: var(--background-secondary-alt);
  background-color: var(--background-secondary);
}

.filename__0ccae {
  color: var(--interactive-active);
}

.filenameLinkWrapper__0ccae {
  color: var(--text-link);
}

.size__0ccae {
  color: var(--text-muted);
}

.custom-theme-background .file__0ccae {
    background-color: var(--bg-mod-faint);
    border-color: var(--border-subtle);
  }

.visual-refresh .file__0ccae {
    background-color: var(--background-mod-subtle);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-low);
  }

.visual-refresh .metadata__0ccae {
    color: var(--text-muted);
  }

@use postcss-pxtorem;

.spinner__4d95d {
  width: 100%;
  height: 100%;
}

.container__4d95d {
  width: 100%;
  display: grid;
}

.textContainer__4d95d {
  min-height: 118px;
  height: 100%;
  overflow: hidden;
  background-color: var(--background-secondary);
  border: 1px solid var(--background-secondary-alt);
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
}

.textContainer__4d95d pre {
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
  }

.newMosaicStyle__4d95d .textContainer__4d95d {
  border-radius: 8px 8px 0 0;
}

.codeView__4d95d {
  font-size: 0.875rem;
  line-height: 1rem;
  min-height: 100px;
}

/* Pad the horizontal scrollbar to match the text padding */

.codeView__4d95d::-webkit-scrollbar-track {
    margin: 0 0.5em;
  }

.newMosaicStyle__4d95d .codeView__4d95d {
  margin: 8px 8px 0;
  padding: 8px;
}

.expanded__4d95d {
  overflow: auto;
}

.footer__4d95d {
  background-color: var(--background-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  height: 40px;
  border: 1px solid var(--background-secondary-alt);
  border-top: 0;
  box-sizing: border-box;
  border-radius: 0 0 4px 4px;
  padding: 0 10px;
  font-size: 0.875rem;
  min-width: 0;
}

.newMosaicStyle__4d95d .footer__4d95d {
  border-radius: 0 0 8px 8px;
  padding: 0 16px;
}

.toggleExpandSection__4d95d {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 10px;
}

.toggleExpandSection__4d95d:hover {
    color: var(--interactive-hover);
  }

.openFullPreviewSection__4d95d {
  cursor: pointer;
  padding-top: 4px;
}

.openFullPreviewSection__4d95d:hover {
    color: var(--interactive-hover);
  }

.footerGap__4d95d {
  flex: 200 0 auto;
}

.downloadSection__4d95d {
  color: var(--interactive-normal);
}

.downloadSection__4d95d:hover {
    color: var(--interactive-hover);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.attachmentName__4d95d {
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-align: right;
}

.formattedSize__4d95d {
  padding-left: 2px;
  color: var(--interactive-muted);
  text-align: right;
  flex: 1 0 auto;
}

.downloadButton__4d95d {
  padding-left: 4px;
}

.languageSelector__4d95d {
  margin-top: 4px;
  padding: 8px 8px 4px;
  background-color: var(--background-floating);
  border-radius: 4px;
  overflow: hidden;
  max-width: 176px;
  box-shadow: var(--elevation-high);
  height: 284px;
}

.codeIcon__4d95d {
  min-width: 24px;
  padding-left: 4px;
  padding-bottom: 4px;
}

.codeIcon__4d95d:hover {
    color: var(--interactive-hover);
  }

.modalRoot__4d95d {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  height: 100%;
  min-height: auto;
}

.modalContent__4d95d {
  display: grid;
  width: 100%;
  height: 100%;
}

.modalTextContainer__4d95d {
  overflow: scroll;
  background-color: var(--background-secondary);
  border: 1px solid var(--background-secondary-alt);
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
}

.modalTextContainer__4d95d pre {
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
  }

/**
 * These styles are meant as enhancements for Chrome only.
 * For Firefox support use the Scroller component
 */

.scrollbar__506b3::-webkit-scrollbar-corner {
    border: none;
    background: none;
  }

.scrollbarDefault__506b3 {
  
}

.scrollbarDefault__506b3::-webkit-scrollbar {
    width: var(--custom-scrollbar-scrollbar-width);
    height: var(--custom-scrollbar-scrollbar-width);
  }

.scrollbarDefault__506b3::-webkit-scrollbar-thumb,
  .scrollbarDefault__506b3::-webkit-scrollbar-track {
    border-color: transparent;
    border-width: var(--custom-scrollbar-scrollbar-margin);
    border-radius: var(--custom-scrollbar-border-radius);
    background-clip: padding-box;
    border-style: solid;
  }

.scrollbarDefault__506b3::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-auto-thumb);
  }

.scrollbarDefault__506b3::-webkit-scrollbar-track {
    background-color: var(--scrollbar-auto-track);
    border-width: medium;
    border-width: initial;
  }

.scrollbarGhost__506b3 {
  
}

.scrollbarGhost__506b3::-webkit-scrollbar {
    width: var(--custom-scrollbar-scrollbar-width);
    height: var(--custom-scrollbar-scrollbar-width);
  }

.scrollbarGhost__506b3::-webkit-scrollbar-thumb,
  .scrollbarGhost__506b3::-webkit-scrollbar-track {
    border-width: var(--custom-scrollbar-scrollbar-margin);
    border-radius: var(--custom-scrollbar-border-radius);
    background-clip: padding-box;
    border-style: solid;
  }

.scrollbarGhost__506b3::-webkit-scrollbar-thumb {
    background-color: hsl(var(--black-500-hsl) / 0.4);
    border-color: transparent;
  }

.scrollbarGhost__506b3::-webkit-scrollbar-track {
    border-width: medium;
    border-width: initial;
    border-color: transparent;
    background-color: hsl(var(--black-500-hsl) / 0.1);
  }

.scrollbarGhostHairline__506b3 {
  
}

.scrollbarGhostHairline__506b3::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

.scrollbarGhostHairline__506b3::-webkit-scrollbar-thumb {
    background-color: hsl(var(--primary-800-hsl) / 0.6);
    border-radius: 2px;
    cursor: move;
  }

.scrollbarGhostHairline__506b3::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .scrollbar__506b3::-webkit-scrollbar-track {
    background-color: Canvas;
    border-radius: 0;
    border-width: 1px;
  }

.enable-forced-colors .scrollbar__506b3::-webkit-scrollbar-thumb {
    background-color: CanvasText;
    border-width: 1px;
  }

.wrapper__58105 {
  position: relative;
  overflow: hidden;
  width: 8px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  contain: layout size;
}

:where(.visual-refresh) .wrapper__58105 {
    height: 100%;
  }

.item__58105 {
  position: absolute;
  display: block;
  width: 8px;
  border-radius: 0 4px 4px 0;
  margin-left: -4px;
  background-color: var(--header-primary);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .item__58105 {
    background-color: CanvasText;
  }

.wrapper_b1fb0b {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: var(--custom-summary-avatars-avatar-diameter);
}

.partyMembers_b1fb0b {
  height: var(--custom-summary-avatars-avatar-diameter);
  display: flex;
}

.partyMember_b1fb0b {
  width: var(--custom-summary-avatars-avatar-diameter);
  height: var(--custom-summary-avatars-avatar-diameter);
  display: inline-block;
  margin-left: -2px;
  -webkit-mask: url(/assets/eae6388e2d5a721a.svg);
          mask: url(/assets/eae6388e2d5a721a.svg);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  mask-type: luminance;
}

.partyMember_b1fb0b:first-child {
  margin-left: 0;
}

.partyMember_b1fb0b:last-child {
  -webkit-mask: none;
          mask: none;
}

.partyMemberOverflow_b1fb0b {
  line-height: 16px;
  font-size: 14px;
  height: var(--custom-summary-avatars-avatar-diameter);
  min-width: var(--custom-summary-avatars-avatar-diameter);
  padding: 0 4px;
  margin-left: -2px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  color: var(--header-secondary);
  background-color: var(--background-secondary);
}

.theme-dark .partyMemberBackground_b1fb0b {
    background-color: var(--primary-500);
  }

.theme-dark .partyMemberUnknown_b1fb0b {
    background-color: var(--primary-500);
  }

.theme-light .partyMemberBackground_b1fb0b {
    background-color: var(--primary-160);
  }

.theme-light .partyMemberUnknown_b1fb0b {
    background-color: var(--primary-160);
  }

.partyMemberUnknownIcon_b1fb0b {
  color: var(--header-muted);
}

.container__0a12b {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  padding: 32px;
  text-align: center;
}

.iconContainer__0a12b {
  margin-bottom: 16px;
  position: relative;
}

.icon__0a12b {
  background-color: var(--background-primary);
  border-radius: 80px;
  color: var(--interactive-normal);
  display: inline-block;
  padding: 22px;
}

.iconOffset__0a12b {
  margin-left: 8px;
  margin-top: 4px;
}

.stars__0a12b {
  position: absolute;
  left: -10px;
}

.header__0a12b {
  margin-bottom: 8px;
  text-transform: none;
}

.text__0a12b {
  text-transform: none;
}

.container_e97453 {
  margin-top: 4px;
  margin-left: 8px;
  padding-left: 12px;
  padding-right: 8px;
  padding-bottom: 4px;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
}

  .container_e97453:hover {
    background: var(--bg-overlay-3, var(--background-tertiary));
  }

.rowHeader_e97453 {
  padding-top: 12px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.rowHeaderLeft_e97453 {
  display: flex;
  align-items: center;
}

.timestamp_e97453 {
  padding-right: 8px;
}

.dot_e97453 {
  justify-content: center;
  padding-right: 8px;
  color: var(--background-modifier-accent);
}

.icon_e97453 {
  color: var(--header-secondary);
  display: flex;
}

.count_e97453 {
  padding-left: 5px;
  padding-right: 8px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.title_e97453 {
  padding-bottom: 4px;
}

.subtitle_e97453 {
  text-transform: none;
  padding-bottom: 12px;
}

.unreadPill_e97453 {
  position: absolute;
  top: 24px;
  left: -8px;
}

.feedbackContainer_e97453 {
  position: absolute;
  right: 8px;
  top: 0;
  height: 100%;
  display: flex;
  gap: 6px;
  flex-direction: column;
  justify-content: center;
}

.thumbIcon_e97453 {
  cursor: pointer;
  padding: 8px;
  border-radius: 16px;
  color: var(--interactive-normal);
  background: var(--background-secondary-alt);
}

.thumbIcon_e97453:hover,
  .thumbIcon_e97453:active {
    color: var(--interactive-active);
  }

.backupContainer__0efdf {
  display: flex;
  justify-content: center;
}

.canvas__0efdf {
  /* This will end up constraining the width as well */
  /* 24px + 2 + 2 */
  height: 32px;
  min-width: 0;
  flex: 1;

  /* We want to eat into the top and bottom margins a little bit for the bounce animation */
  margin-top: -4px;
  margin-bottom: -4px;

  cursor: pointer;
}

.container_a8e786 {
  border-radius: 24px;
  background-color: var(--background-secondary);
  padding: 12px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;

  position: relative;

  display: flex;
  flex-direction: row;
  align-items: center;
}

.playIcon_a8e786 {
  color: var(--white-500);
}

.playing_a8e786 .playIcon_a8e786 {
    color: var(--brand-500);
  }

.visual-refresh .container_a8e786 {
    background-color: var(--background-mod-subtle);
    border: 1px solid var(--border-subtle);
    transition:
      background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  }

.playButtonContainer_a8e786 {
  height: 32px;
  width: 32px;
  flex-shrink: 0;

  margin-left: -4px;
  margin-top: -4px;
  margin-bottom: -4px;

  border-radius: 50%;
  cursor: pointer;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Prevent double-clicking from selecting the username underneath. */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.playButtonContainer_a8e786:active {
    transform: scale(0.875);
  }

.playButtonContainer_a8e786:active .playIcon_a8e786 {
      color: var(--brand-360);
    }

.playing_a8e786 .playButtonContainer_a8e786 {
    background: var(--white-500);
  }

.playing_a8e786 .playButtonContainer_a8e786:active {
      background-color: var(--brand-360);
    }

.playing_a8e786 .playButtonContainer_a8e786:active .playIcon_a8e786 {
        color: var(--brand-500);
      }

.theme-light .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786 {
    background: linear-gradient(151.11deg, var(--brand-400) 0%, var(--brand-500) 100%);
  }

.theme-light .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786:hover {
      background: linear-gradient(135deg, var(--brand-360) 0%, var(--brand-400) 100%);
    }

.theme-light .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786:active {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), a949CF7, rgba(0, 0, 0, 0.2)),
        linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 100%);
    }

.theme-dark .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786 {
    background: linear-gradient(151.11deg, var(--brand-460) 16.55%, var(--brand-560) 104.36%);
  }

.theme-dark .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786:hover {
      background: linear-gradient(151.11deg, var(--brand-400) 17.78%, var(--brand-460) 82.22%);
    }

.theme-dark .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786:active {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(151.11deg, var(--brand-460) 16.55%, var(--brand-560) 104.36%);
    }

.visual-refresh .playing_a8e786 {
    border-color: var(--opacity-blurple-60);
  }

.oldPlayIconSpacing_a8e786 {
  /* Optical centering */
  margin-left: 1px;
  margin-right: -1px;
}

.audioElement_a8e786 {
  display: none;
}

.volumeButton_a8e786 {
  flex-shrink: 0;

  margin-left: 12px;
}

.volumeButtonIcon_a8e786 {
  color: var(--interactive-normal);
  transition: color 0.2s ease-in-out;
}

.volumeButtonIcon_a8e786:hover {
    transition: none;
    color: var(--interactive-hover);
  }

.volumeButtonIcon_a8e786:active {
    transition: none;
    color: var(--interactive-active);
  }

.playing_a8e786 .volumeButtonIcon_a8e786 {
    color: var(--brand-300);
  }

.playing_a8e786 .volumeButtonIcon_a8e786:hover {
      color: var(--brand-200);
    }

.playing_a8e786 .volumeButtonIcon_a8e786:active {
      color: var(--white-500);
    }

.volumeSlider_a8e786 {
  margin-bottom: 4px;
  margin-left: -8px;

  /* Higher than the message action buttons */
  z-index: 2;
}

.duration_a8e786 {
  flex-shrink: 0;
  margin-left: 12px;

  color: var(--interactive-normal);
  transition: color 0.2s ease-in-out;

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
  z-index: 1;
}

.playing_a8e786 .duration_a8e786 {
    color: var(--white-500);
  }

.waveform_a8e786 {
  margin-left: 12px;
  z-index: 1;
}

.rippleContainer_a8e786 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border-radius: 24px;
  overflow: hidden;
}

.ripple_a8e786 {
  position: absolute;
  top: 50%;
  left: 24px;

  border-radius: 50%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background-color: var(--brand-500);
}

.ripple_a8e786.reducedMotion_a8e786 {
    width: 200%;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

.playing_a8e786 .ripple_a8e786.reducedMotion_a8e786 {
      opacity: 1;
    }

.ripple_a8e786:not(.reducedMotion_a8e786) {
    width: 0%;
    transition: width 0.2s ease-in-out;
  }

.playing_a8e786 .ripple_a8e786:not(.reducedMotion_a8e786) {
      width: 200%;
    }

.barBase__0f481 {
  position: absolute;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  z-index: 2;
  min-height: 24px;
  text-transform: capitalize;
  transition: opacity 150ms;
  opacity: 0.95;
  cursor: pointer;
}

.barBase__0f481:hover {
  opacity: 1;
}

.barButtonBase__0f481 {
  text-align: left;
  background: none;
  color: var(--white-500);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-weight: 500;
  padding: 0 12px;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.visual-refresh .barBase__0f481 {
    opacity: 1;
    left: var(--space-8);
    right: var(--space-16);
    border: 1px solid var(--border-subtle);
  }

.visual-refresh .barButtonBase__0f481 {
    padding-left: var(--space-4);
    color: inherit;
  }

.visual-refresh .barButtonAlt__0f481 {
    background-color: var(--button-secondary-background);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-8);
  }

.visual-refresh .barButtonAlt__0f481:hover {
      background-color: var(--button-secondary-background-hover);
    }

.barButtonIcon__0f481 {
  display: block;
  position: relative;
  top: -1px;
  width: 16px;
  height: 16px;
  margin-left: 8px;
}

.barWithAppLauncherButton__0f481 {
  right: calc(16px + var(--custom-channel-textarea-text-area-height) + var(--custom-channel-textarea-app-launcher-button-gap));
}

.barWithAppsDMsUI__0f481 {
  right: calc(16px + var(--custom-app-dm-chat-input-primary-button-width) + var(--custom-channel-textarea-app-launcher-button-gap));
}

.barWithAppLauncherButton__0f481.barWithAppsDMsUI__0f481 {
  right: calc(16px + var(--custom-channel-textarea-text-area-height) + var(--custom-app-dm-chat-input-primary-button-width) + 2 * var(--custom-channel-textarea-app-launcher-button-gap));
}

.bottomBar__0f481 {
  
}

.jumpToPresentBar__0f481 {
  
  bottom: 0;
  border-radius: 8px 8px 0 0;
  background-color: var(--background-accent);
  opacity: 0.95;
  padding-bottom: 8px;
}

.jumpToPresentBar__0f481:active {
    margin-bottom: -1px;
  }

.jumpToPresentBar__0f481 .spinner__0f481 {
    padding-right: 12px;
  }

.jumpToPresentBar__0f481 .spinnerItem__0f481 {
    background-color: var(--white-500);
  }

.messagesErrorBar__0f481 {
  
  bottom: 0;
  border-radius: 8px 8px 0 0;
  background-color: var(--status-danger);
  opacity: 0.9;
  padding-bottom: 8px;
}

.messagesErrorBar__0f481:active {
    margin-bottom: -1px;
  }

.messagesErrorBar__0f481 .spinner__0f481 {
    padding-right: 12px;
  }

.messagesErrorBar__0f481 .spinnerItem__0f481 {
    background-color: var(--white-500);
  }

.visual-refresh .bottomBar__0f481 {
    background-color: var(--background-surface-highest);
    bottom: var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-normal);
    padding: var(--space-4) var(--space-12);
    left: 0;
    right: 0;
    margin: 0 auto var(--space-8) auto;
    width: -moz-max-content;
    width: max-content;
    min-width: 284px;
    box-shadow: var(--shadow-medium);
    min-height: 44px;
    box-sizing: border-box;
  }

.visual-refresh .bottomBar__0f481:before {
      content: '';
      position: absolute;
      left: -16px;
      right: -16px;
      bottom: -9px;
      height: 8px;
      box-sizing: var(--shadow-high);
      -webkit-mask-image: linear-gradient(
        to left,
        transparent,
        var(--background-surface-highest) 10%,
        var(--background-surface-highest) 90%,
        transparent
      );
              mask-image: linear-gradient(
        to left,
        transparent,
        var(--background-surface-highest) 10%,
        var(--background-surface-highest) 90%,
        transparent
      );
    }

.visual-refresh .messagesErrorBar__0f481 {
    background-color: var(--background-feedback-critical);
    border-color: var(--border-feedback-critical);
    color: var(--text-feedback-critical);
  }

.visual-refresh .messagesErrorBar__0f481 .spinnerItem__0f481 {
      background-color: var(--text-feedback-critical);
    }

.visual-refresh .jumpToPresentBar__0f481 {
    color: var(--text-default);
  }

.visual-refresh-chat-input .bottomBar__0f481 {
    margin: 0 auto;
  }

.newMessagesBar__0f481 {
  
  height: 32px;
  top: 0;
  border-radius: 0 0 8px 8px;
  background-color: var(--brand-500);
  box-shadow: var(--elevation-low);
  z-index: 3;
}

.newMessagesBar__0f481:active {
    padding-top: 1px;
    box-shadow: 0 0 0 hsl(var(--black-500-hsl) / 0);
  }

:where(.visual-refresh) .newMessagesBar__0f481 {
    color: var(--white);
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

.newMessagesPillContainer__0f481 {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;

  pointer-events: none;
}

.containerMarginTop__0f481 {
  top: 48px;
}

.newMessagesPill__0f481 {
  display: flex;
  align-items: center;

  padding: 9px 12px 9px 16px;
  border-radius: 18px 0 0 18px;
  background-color: var(--background-floating);
  cursor: pointer;
  pointer-events: auto;
}

.newMessagesPill__0f481:hover {
    background-color: var(--background-tertiary);
  }

.theme-light .newMessagesPill__0f481 {
    background-color: var(--background-secondary);
  }

.theme-light .newMessagesPill__0f481:hover {
      background-color: var(--background-tertiary);
    }

.newMessagesClear__0f481 {
  display: flex;
  align-items: center;

  padding: 10px 10px 10px 8px;
  border-radius: 0 18px 18px 0;
  border-left: solid 1px var(--background-modifier-accent);
  background-color: var(--background-floating);
  cursor: pointer;
  pointer-events: auto;
}

.newMessagesClear__0f481:hover {
    background-color: var(--background-tertiary);
  }

.theme-light .newMessagesClear__0f481 {
    background-color: var(--background-secondary);
  }

.theme-light .newMessagesClear__0f481:hover {
      background-color: var(--background-tertiary);
    }

.newMessagesClearIcon__0f481 {
  height: 16px;
  width: 16px;
  color: var(--text-normal);
}

.jumpToPresentButtonContainer__0f481 {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 16px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;

  pointer-events: none;
}

.jumpToPresentButton__0f481 {
  display: flex;
  align-items: center;

  padding: 6px;
  border-radius: 18px;
  background-color: var(--background-floating);
  cursor: pointer;
  pointer-events: auto;
}

.jumpToPresentButton__0f481:hover {
    background-color: var(--background-tertiary);
  }

.theme-light .jumpToPresentButton__0f481 {
    background-color: var(--background-secondary);
  }

.theme-light .jumpToPresentButton__0f481:hover {
      background-color: var(--background-tertiary);
    }

.jumpToPresentButtonIcon__0f481 {
  height: 24px;
  width: 24px;
  color: var(--text-normal);
}

.jumpToPresentSpinner__0f481 {
  padding: 6px;
  border-radius: 18px;
  height: 24px;
  width: 24px;
  background-color: var(--background-floating);
}

.jumpToPresentSpinnerItem__0f481 {
  color: var(--text-normal);
}

.barButtonMain__0f481 {
  
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  position: relative;
}

.span__0f481 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.barButtonAlt__0f481 {
  
  flex: 0 0 auto;
  font-weight: 600;
  position: relative;
}

.loadingMore__0f481 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

.loadingMore__0f481 .spinner__0f481 {
    display: inline-block;
    margin: 0;
  }

.hasMore__0f481,
.loadingMore__0f481 {
  margin: 16px 6px 16px 16px;
  height: 32px;
}

.hasMore__0f481 {
  box-shadow: inset 0 0 0 1px var(--background-modifier-accent);
  color: var(--brand-500);
  text-align: center;
  font-size: 12px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list  */
  line-height: 32px;
  font-weight: 500;
  border-radius: 3px;
  text-transform: uppercase;
  cursor: pointer;
}

.hasMore__0f481:hover {
    background-color: var(--background-modifier-hover);
  }

.messageGroupBlocked__0f481 {
  justify-content: center;
  overflow: hidden;
  margin: 6px 0;
  background-color: hsl(var(--black-500-hsl) / 0.05);
  color: var(--text-muted);
  flex: 0 0 auto;
}

.messageGroupBlocked__0f481:last-child {
    margin-bottom: 12px;
  }

.messageGroupBlockedBtn__0f481 {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 0;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  color: var(--interactive-normal);
}

.messageGroupBlockedBtn__0f481:hover {
    background-color: hsl(var(--black-500-hsl) / 0.05);
  }

.revealed__0f481 .messageGroupBlockedBtn__0f481 {
  color: var(--interactive-active);
}

.tooltip__0f481 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tooltipEmojiName__0f481 {
  width: 100%;
}

.imageContent__0f481 {
  display: flex;
  flex-flow: column nowrap;
  flex: auto;
}

.imageContainer__0f481 {
  display: flex;
  flex-flow: row nowrap;
  flex: auto;
  width: 100%;
  height: 100%;
}

.altText__0f481 {
  display: inline-block;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 12px;
  margin: 0.25rem 0 0.75rem;
  line-height: 16px;
}

.mediaMosaicAltTextContainer__0f481 {
  position: relative;
}

.mediaMosaicAltText__0f481 {
  position: absolute;
  z-index: 1;
  left: 4.5px;
  bottom: 4px;
  padding: 7px 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--white-500);
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  transition: background-color 0.2s ease-in-out;
}

.mediaMosaicAltText__0f481:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 0.2s ease-in-out;
}

.mediaMosaicAltText__0f481:focus {
  background-color: rgba(0, 0, 0, 1);
  transition: background-color 0.2s ease-in-out;
}

.mediaMosaicAltText__0f481:active {
  background-color: var(--background-secondary-alt);
  transition: background-color 0.2s ease-in-out;
}

.mediaMosaicAltTextPopout__0f481 {
  display: flex;
  flex-direction: column;
  background-color: var(--background-floating);
  color: var(--text-normal);
  max-width: 360px;
  padding: 13.5px 12px;
  border-radius: 8px;
  box-shadow: var(--elevation-high);
}

.mediaMosaicAltTextPopoutTitle__0f481 {
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  margin-bottom: 9.5px;
}

.mediaMosaicAltTextPopoutDescription__0f481 {
  word-break: break-word;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}

.clickCTA__0f481 {
  color: var(--primary-300);
}

.popoutContainer__0f481 {
  width: var(--custom-message-helpers-popout-container-width);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--background-floating);
  box-shadow: var(--elevation-low);
}

.visual-refresh .popoutContainer__0f481 {
    background-color: color-mix(in oklab, var(--bg-surface-overlay), transparent 10%);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: var(--shadow-border), var(--shadow-low);
  }

@keyframes popout-loading__0f481 {
  0% {
    transform: translate3d(calc(-1 * var(--custom-message-helpers-popout-content-width)), 0, 0);
  }

  50% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(calc(-1 * var(--custom-message-helpers-popout-content-width)), 0, 0);
  }
}

.popoutLoadingBackground__0f481 {
  -webkit-mask: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22256%22%20height%3D%2278%22%20viewBox%3D%2232%2024%20256%2078%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36%2024C33.7909%2024%2032%2025.7909%2032%2028V78C32%2080.2091%2033.7909%2082%2036%2082H86C88.2091%2082%2090%2080.2091%2090%2078V28C90%2025.7909%2088.2091%2024%2086%2024H36ZM110%2024C107.791%2024%20106%2025.7909%20106%2028V38C106%2040.2091%20107.791%2042%20110%2042H179C181.209%2042%20183%2040.2091%20183%2038V28C183%2025.7909%20181.209%2024%20179%2024H110ZM106%2058C106%2055.7909%20107.791%2054%20110%2054H284C286.209%2054%20288%2055.7909%20288%2058V68C288%2070.2091%20286.209%2072%20284%2072H110C107.791%2072%20106%2070.2091%20106%2068V58ZM110%2084C107.791%2084%20106%2085.7909%20106%2088V98C106%20100.209%20107.791%20102%20110%20102H223C225.209%20102%20227%20100.209%20227%2098V88C227%2085.7909%20225.209%2084%20223%2084H110Z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E);
          mask: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22256%22%20height%3D%2278%22%20viewBox%3D%2232%2024%20256%2078%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36%2024C33.7909%2024%2032%2025.7909%2032%2028V78C32%2080.2091%2033.7909%2082%2036%2082H86C88.2091%2082%2090%2080.2091%2090%2078V28C90%2025.7909%2088.2091%2024%2086%2024H36ZM110%2024C107.791%2024%20106%2025.7909%20106%2028V38C106%2040.2091%20107.791%2042%20110%2042H179C181.209%2042%20183%2040.2091%20183%2038V28C183%2025.7909%20181.209%2024%20179%2024H110ZM106%2058C106%2055.7909%20107.791%2054%20110%2054H284C286.209%2054%20288%2055.7909%20288%2058V68C288%2070.2091%20286.209%2072%20284%2072H110C107.791%2072%20106%2070.2091%20106%2068V58ZM110%2084C107.791%2084%20106%2085.7909%20106%2088V98C106%20100.209%20107.791%20102%20110%20102H223C225.209%20102%20227%20100.209%20227%2098V88C227%2085.7909%20225.209%2084%20223%2084H110Z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  mask-type: luminance;
  margin: var(--custom-message-helpers-popout-padding-width);
  width: var(--custom-message-helpers-popout-content-width);
  height: 78px;
  position: relative;
  overflow: hidden;
}

.popoutLoadingForeground__0f481 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--custom-message-helpers-popout-content-width) * 2);
  /* Small loading animations are alright to keep in reduced-motion */
  /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
  animation: popout-loading__0f481 4s ease-in-out infinite;
  background-image: linear-gradient(to right, var(--primary-600), var(--primary-500), var(--primary-600));
}

.theme-light .popoutLoadingForeground__0f481 {
    background-image: linear-gradient(to right, var(--primary-100), var(--primary-200), var(--primary-100));
  }

.theme-light .topicsPillMiddle__0f481:hover {
      background-color: var(--background-secondary);
    }

:root.background-opacity-low .messageGroupBlocked__0f481,:root.background-opacity-medium .messageGroupBlocked__0f481,:root.background-opacity-high .messageGroupBlocked__0f481 {
    background-color: hsl(var(--primary-600-hsl) / 0.3);
    border-color: hsl(var(--primary-630-hsl) / 0.2);
  }

:root.background-opacity-low .messageGroupBlocked__0f481 .messageGroupBlockedBtn__0f481,:root.background-opacity-medium .messageGroupBlocked__0f481 .messageGroupBlockedBtn__0f481,:root.background-opacity-high .messageGroupBlocked__0f481 .messageGroupBlockedBtn__0f481 {
      background-color: transparent;
      color: var(--primary-100);
    }

:root.background-opacity-low .messageGroupBlocked__0f481 .messageGroupBlockedBtn__0f481:hover,:root.background-opacity-medium .messageGroupBlocked__0f481 .messageGroupBlockedBtn__0f481:hover,:root.background-opacity-high .messageGroupBlocked__0f481 .messageGroupBlockedBtn__0f481:hover {
        background: hsl(var(--primary-600-hsl) / 0.4);
      }

.background-opacity-low .divider__0f481:not(.dividerRed__0f481) {
  opacity: 0.8;
}

.background-opacity-low .divider__0f481:not(.dividerRed__0f481) .dividerContent__0f481 {
    opacity: 0.8;
    color: var(--white-500);
  }

.background-opacity-low .divider__0f481:not(.dividerRed__0f481) .dividerContent__0f481:before {
      border-color: currentColor;
    }

.background-opacity-medium .divider__0f481 {
  opacity: 0.8;
}

.background-opacity-medium .divider__0f481:not(.dividerRed__0f481) .dividerContent__0f481 {
      color: null;
    }

.background-opacity-medium .divider__0f481:not(.dividerRed__0f481) .dividerContent__0f481:before {
        background-color: currentColor;
        opacity: 0.8;
      }

.background-opacity-high .divider__0f481 {
  opacity: 0.5;
}

.background-opacity-high .divider__0f481:not(.dividerRed__0f481) .dividerContent__0f481 {
      color: null;
    }

.background-opacity-high .divider__0f481:not(.dividerRed__0f481) .dividerContent__0f481:before {
        background-color: currentColor;
        opacity: 0.8;
      }

/* we allow this to keep holding onto space so that content doesn't jump when we lock/unlock */

.disableInteractions__0f481.hasMore__0f481 {
  visibility: hidden;
}

.newTopicsBarContainer__0f481 {
  height: 32px;

  
  top: 0;
  border-radius: 0 0 8px 8px;
  color: var(--white-500);
  background-color: var(--brand-500);
  box-shadow: var(--elevation-low);
  justify-content: space-between;
}

.newTopicsBarContainer__0f481:active {
    box-shadow: 0 0 0 hsl(var(--black-500-hsl) / 0);
  }

@media (max-width: 914px) {
  .newTopicsBarCompact__0f481 {
    display: none;
  }

  .newTopicsBarText__0f481 .topicsPillDropdownCaret__0f481 {
    padding-left: 0;
  }
}

.newTopicsBarTopicSection__0f481 {
  margin-left: 8px;
  display: flex;
  align-items: center;
  z-index: 2;
  max-width: 33%;
}

.newTopicsBarTextClickable__0f481 {
  overflow: hidden;
  white-space: nowrap;
}

.newTopicsBarTextClickable__0f481:hover .newTopicsBarCaret__0f481 {
    opacity: 1;
  }

.newTopicsBarCaret__0f481 {
  padding-left: 8px;
  margin-right: 4px;
  opacity: 0.7;
}

.newTopicsBarText__0f481 {
  color: var(--white-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.newTopicsBarIcon__0f481 {
  min-width: 16px;
  min-height: 16px;
  margin-left: 4px;
  margin-right: 4px;
}

.newTopicsBarInitial__0f481 {
  display: flex;
  align-items: center;
  text-transform: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.newTopicsBarTextUnselected__0f481 {
  display: flex;
  align-items: center;
}

.newTopicsBarTextSelected__0f481 {
  display: flex;
  height: 20px;
  align-items: center;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.1);
}

.newTopicsBarTextSelected__0f481 .topicsPillDropdownCaret__0f481 {
    color: var(--interactive-active);
  }

.flexEnd__0f481 {
  justify-content: flex-end;
}

.flexStart__0f481 {
  justify-content: flex-start;
}

.topicsPillContainer__0f481 {
  
  opacity: 1;
  top: 0;
  border-radius: 0 0 8px 8px;
  min-height: 32px;
  height: 32px;
  background: var(--bg-overlay-2, var(--background-secondary));
  box-shadow:
    0 1px 0 rgba(4, 4, 5, 0.2),
    0 1.5px 0 rgba(6, 6, 7, 0.05),
    0 2px 0 rgba(4, 4, 5, 0.05);
}

.visual-refresh .topicsPillContainer__0f481 {
    background: var(--bg-overlay-2, var(--background-surface-high));
    box-shadow: var(--shadow-low);
    border-top: 0;
  }

.topicsPill__0f481 {
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}

.topicsPillText__0f481 {
  display: flex;
  flex: 1;
  text-align: center;
  padding: 8px 8px 8px 10px;
  cursor: pointer;
  overflow: hidden;
  color: var(--interactive-active);
}

.topicsPillText__0f481:hover .topicsPillDropdownCaret__0f481 {
    color: var(--interactive-active);
  }

.topicsPillTextUnselected__0f481 {
  align-items: center;
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 4px;
}

.topicsPillTextSelected__0f481 {
  
  display: flex;
  height: 26px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.1);
  background: var(--bg-overlay-3, rgba(0, 0, 0, 0.1));
}

.topicsPillTextSelected__0f481 .topicsPillDropdownCaret__0f481 {
    color: var(--interactive-active);
  }

.topicsPillSummaryIcon__0f481 {
  min-width: 16px;
  min-height: 16px;
  margin-right: 4px;
}

.topicsPillTextTitle__0f481 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topicsPillDropdownCaret__0f481 {
  color: var(--interactive-normal);
  padding-left: 8px;
  margin-right: 4px;
}

.topicsPillCarets__0f481 {
  display: flex;
  justify-content: space-between;
  height: 24px;
  top: 4px;
  padding-right: 16px;
}

.topicsPillCaret__0f481 {
  color: var(--interactive-normal);
  width: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay-3, var(--background-secondary-alt));
}

.topicsPillCaret__0f481:hover {
    color: var(--interactive-active);
  }

.visual-refresh .topicsPillCaret__0f481 {
    background: var(--button-secondary-background);
  }

.visual-refresh .topicsPillCaret__0f481:hover {
      background: var(--button-secondary-background-hover);
    }

.visual-refresh .topicsPillCaret__0f481:active {
      background: var(--button-secondary-background-active);
    }

.topicsCaretRight__0f481 {
  border-radius: 0 20px 20px 0;
}

.topicsCaretLeft__0f481 {
  border-radius: 20px 0 0 20px;
  border-right: 1px solid var(--background-modifier-accent);
}

.topicsPillCaretDisabled__0f481 {
  opacity: 0.5;
  pointer-events: none;
}

.topicsDropdownBase__0f481 {
  position: absolute;
  opacity: 1;
  cursor: default;
  border-radius: 8px;
  width: 412px;
  border: 1px solid var(--background-modifier-accent);
}

.topicsDropdown__0f481 {
  
  top: 40px;
}

.topicsDropdownHeading__0f481 {
  background: var(--bg-overlay-3, var(--background-tertiary));
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  padding: 14px 14px 14px 20px;
  justify-content: space-between;
}

.topicsDropdownHeadingText__0f481 {
  display: flex;
  align-items: center;
  pointer-events: none;

  padding-top: 6px;
  padding-right: 16px;
}

.topicsPillHeadingIcon__0f481 {
  color: var(--interactive-normal);
  padding-right: 8px;
}

.summariesBetaTag__0f481 {
  margin-left: 4px;
}

.topicsDropdownClose__0f481 {
  opacity: 0.5;
  transition: opacity 0.2s;
  cursor: pointer;
  -webkit-app-region: no-drag;
  color: var(--text-normal);
}

.topicsDropdownClose__0f481:hover {
    opacity: 1;
  }

.topicsScroller__0f481 {
  background: var(--bg-overlay-2, var(--background-secondary));
  max-height: 412px;
  display: flex;
  flex-direction: column;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.topicsTimeAgo__0f481 {
  padding-right: 8px;
}

.topicsDotSpacer__0f481 {
  justify-content: center;
  padding-right: 8px;
  color: var(--background-modifier-accent);
}

.topicsMessageCount__0f481 {
  padding-left: 5px;
  padding-right: 8px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.topicsChatBubbleIcon__0f481 {
  color: var(--header-secondary);
  display: flex;
  padding-left: 8px;
}

.topicsTopicTitle__0f481 {
  padding-bottom: 4px;
}

.topicsSubtitle__0f481 {
  padding-bottom: 12px;
}

.emojiSection_d5cd2d {
  padding: var(--custom-message-helpers-popout-padding-width);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.theme-dark .betaTag_d5cd2d {
    color: var(--premium-tier-2-pink-for-gradients-2);
    background-color: white;
  }

.theme-light .betaTag_d5cd2d {
    color: var(--white-100);
    background: linear-gradient(
      to right,
      var(--premium-tier-2-pink-for-gradients),
      var(--premium-tier-2-pink-for-gradients-2),
      var(--premium-tier-2-purple-for-gradients)
    );
  }

.primaryEmoji_d5cd2d {
  min-width: var(--custom-emoji-size-jumbo-emoji);
  min-height: var(--custom-emoji-size-jumbo-emoji);
  margin-top: 4px;
}

.ctaButton_d5cd2d {
  margin: 16px auto 0;
}

.guildSection_d5cd2d {
  padding: var(--custom-message-helpers-popout-padding-width);
  background-color: var(--background-secondary-alt);
}

.guildTitle_d5cd2d {
  color: var(--header-secondary);
  margin-bottom: 8px;
}

.guildIcon_d5cd2d {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.guildIconNotClickable_d5cd2d {
  width: 100%;
  height: 100%;
}

.guildBadge_d5cd2d {
  margin-right: 4px;
  min-width: 16px;
}

.guildName_d5cd2d {
  cursor: pointer;
}

.showMoreEmojis_d5cd2d {
  color: var(--interactive-normal);
  cursor: pointer;
  transition: color 0.125s;
  font-weight: 600;
  margin-top: 8px;
}

.showMoreEmojis_d5cd2d:hover {
    color: var(--interactive-active);
  }

.showMoreEmojisArrow_d5cd2d {
  position: relative;
  left: 4px;
  height: 16px;
  width: 16px;
}

.full-motion .showMoreEmojisArrow_d5cd2d {
    transition: transform 0.1s;
  }

.showMoreEmojisArrow_d5cd2d.showMoreEmojisArrowCollapsed_d5cd2d {
    transform: rotate(-90deg);
  }

.otherEmojisContainer_d5cd2d {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.otherEmoji_d5cd2d {
  height: 32px;
  width: 32px;
  min-width: 32px;
  flex-basis: calc(16.66667% - 4px);
  margin: 4px 2px;
}

.truncatingText_d5cd2d {
  min-width: 0;
  /* https://css-tricks.com/flexbox-truncated-text/ */
}

.dotSeparator_d5cd2d {
  border-radius: 50%;
  width: 4px;
  height: 4px;
  margin: 0 8px;
  flex-shrink: 0;
  background-color: var(--interactive-muted);
}

.theme-light .popoutLoader_d5cd2d,
  .theme-light .popoutContent_d5cd2d {
    background-color: var(--background-floating);
    box-shadow: var(--elevation-high);
  }

.joinGuildLink_d5cd2d {
  color: var(--text-link);
  cursor: pointer;
}

.joinGuildLink_d5cd2d:hover,
  .joinGuildLink_d5cd2d:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.reactionEmojiDetailsUnfurlGuildDetails_d5cd2d {
  margin: 16px 0 8px;
}

.reactionEmojiDetailsClickable_d5cd2d {
  border-radius: var(--radius-xs);
  color: var(--interactive-hover);
  cursor: pointer;
  transition: color 0.125s;
  font-weight: 600;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 6px 0;
}

.reactionEmojiDetailsClickable_d5cd2d:hover {
    color: var(--interactive-active);
  }

.theme-dark .reactionEmojiDetailsClickable_d5cd2d {
    background-color: hsl(var(--primary-300-hsl) / 0.1);
  }

.theme-light .reactionEmojiDetailsClickable_d5cd2d {
    background-color: hsl(var(--primary-700-hsl) / 0.1);
  }

.emojiDetailsLoader_d5cd2d {
  box-shadow: none;
}

.reactionEmojiDetailsArrow_d5cd2d {
  margin-top: 2px;
}

.full-motion .reactionEmojiDetailsArrow_d5cd2d {
    transition: transform 0.1s;
  }

.reactionEmojiDetailsArrow_d5cd2d.reactionEmojiDetailsArrowCollapsed_d5cd2d {
    transform: rotate(-90deg);
  }

.reactionEmojiDetailsDivider_d5cd2d {
  border-bottom: 1px solid var(--background-modifier-accent);
  margin: 16px 0;
}

.inventoryCtaButton_d5cd2d {
  margin: 8px auto 0;
}

.ctaDescription_d5cd2d {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nitroWheel_d5cd2d {
  margin-right: 8px;
}

.betaTag_d5cd2d {
  position: absolute;
  top: -4px;
  right: -8px;
}

.effect__68185 {
  position: absolute;
  pointer-events: none;
  z-index: 1001; /* Show over Picture In Picture at 1000 z-index */
  bottom: 0;
  width: var(--custom-voice-channel-effect-voice-channel-effect-animation-size);
}

.effects__58042 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.soundButtonWrapper__6d4ed {
  list-style: none;
  position: relative;
}

.soundButton__6d4ed {
  box-sizing: border-box;
  position: relative;
  background: var(--background-secondary);
  border-radius: var(--radius-sm);
  height: 40px;
  width: 148px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 1px solid transparent;
  overflow: hidden;
  text-align: center;
}

.soundButtonRefresh__6d4ed {
  box-sizing: border-box;
  position: relative;
  background: var(--card-primary-bg);
  border-radius: var(--radius-md);
  height: 72px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(0, 0, 0, 0.2),
    0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.full-motion .soundButtonRefresh__6d4ed {
    transition:
      box-shadow 0.1s ease-in-out, transform 0.2s ease, outline 0.2s ease-in-out;
  }

.soundButtonRefresh__6d4ed:hover,
  .soundButtonRefresh__6d4ed.focused__6d4ed,
  .soundButtonRefresh__6d4ed:active:not(:focus-within) {
    border-color: var(--border-strong);
  }

.soundButtonRefresh__6d4ed:hover .soundInfoRefresh__6d4ed, .soundButtonRefresh__6d4ed.focused__6d4ed .soundInfoRefresh__6d4ed, .soundButtonRefresh__6d4ed:active:not(:focus-within) .soundInfoRefresh__6d4ed {
      box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.12);
    }

.soundButtonRefresh__6d4ed:hover .buttonOverlayActionsRefresh__6d4ed, .soundButtonRefresh__6d4ed.focused__6d4ed .buttonOverlayActionsRefresh__6d4ed, .soundButtonRefresh__6d4ed:active:not(:focus-within) .buttonOverlayActionsRefresh__6d4ed {
      margin-top: 0;
    }

.soundButtonRefresh__6d4ed:active:not(:focus-within) {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  }

.soundButtonRefresh__6d4ed:active:not(:focus-within) .soundInfoRefresh__6d4ed {
      box-shadow: none;
    }

.soundButtonRefresh__6d4ed:active:not(:focus-within) .soundNameRefresh__6d4ed {
      color: var(--header-muted);
    }

.soundButtonRefresh__6d4ed:active:not(:focus-within) .secondaryButtonRefresh__6d4ed {
      opacity: 0;
    }

.animated__6d4ed:active:not(:focus-within) {
    box-shadow: none;
    outline-width: 1px;
  }

.full-motion .animated__6d4ed:active:not(:focus-within) {
      transform: translateY(2px);
    }

.theme-light .soundButtonRefresh__6d4ed {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  }

.addButton__6d4ed {
  margin: 3px;
  display: flex;
  align-items: center;
}

.plusSign__6d4ed {
  color: var(--text-muted);
  height: 18px;
  width: 18px;
}

.addButton__6d4ed > * {
  margin-right: 4px;
}

.soundButton__6d4ed.focused__6d4ed.hoverActiveBackground__6d4ed, .soundButton__6d4ed:focus-within.hoverActiveBackground__6d4ed, .soundButton__6d4ed:hover.hoverActiveBackground__6d4ed, .soundButtonRefresh__6d4ed.focused__6d4ed.hoverActiveBackground__6d4ed, .soundButtonRefresh__6d4ed:focus-within.hoverActiveBackground__6d4ed, .soundButtonRefresh__6d4ed:hover.hoverActiveBackground__6d4ed {
    background: var(--background-tertiary);
  }

.soundButton__6d4ed.focused__6d4ed .buttonOverlay__6d4ed, .soundButton__6d4ed:focus-within .buttonOverlay__6d4ed, .soundButton__6d4ed:hover .buttonOverlay__6d4ed, .soundButtonRefresh__6d4ed.focused__6d4ed .buttonOverlay__6d4ed, .soundButtonRefresh__6d4ed:focus-within .buttonOverlay__6d4ed, .soundButtonRefresh__6d4ed:hover .buttonOverlay__6d4ed {
    opacity: 1;
    visibility: visible;
  }

.soundButton__6d4ed.focused__6d4ed .addButtonOverlay__6d4ed, .soundButton__6d4ed:focus-within .addButtonOverlay__6d4ed, .soundButton__6d4ed:hover .addButtonOverlay__6d4ed, .soundButtonRefresh__6d4ed.focused__6d4ed .addButtonOverlay__6d4ed, .soundButtonRefresh__6d4ed:focus-within .addButtonOverlay__6d4ed, .soundButtonRefresh__6d4ed:hover .addButtonOverlay__6d4ed {
    opacity: 1;
    visibility: visible;
  }

.soundInfo__6d4ed {
  padding: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  overflow: hidden;
}

.soundInfoRefresh__6d4ed {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0 8px;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
  height: 60px;
}

.full-motion .soundInfoRefresh__6d4ed {
    transition:
      gap 0.1s ease, padding-bottom 0.1s ease, box-shadow 0.1s ease-in-out;
  }

.soundName__6d4ed {
  color: var(--header-primary);
  flex-grow: 0;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.soundName__6d4ed.hasEmoji__6d4ed {
    text-align: left;
  }

.soundNameRefresh__6d4ed {
  color: var(--header-primary);
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.soundNameRefresh__6d4ed.hasEmoji__6d4ed {
    -webkit-line-clamp: 1;
    word-break: break-all;
  }

.emoji__6d4ed {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.emojiCircle__6d4ed {
  background: var(--bg-mod-subtle);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    width 0.1s ease, height 0.1s ease;
}

.emojiCircle__6d4ed .emoji__6d4ed {
    width: 18px;
    height: 18px;

    transition:
      width 0.3s ease, height 0.3s ease;
  }

.soundButtonInteractive__6d4ed {
  cursor: pointer;
}

.soundButtonInteractive__6d4ed.playing__6d4ed {
    border-color: var(--status-positive-background);
  }

.soundButtonInteractiveRefresh__6d4ed {
  cursor: pointer;
}

.soundButtonInteractiveRefresh__6d4ed.previewing__6d4ed {
    outline: 2px solid var(--button-outline-brand-border);
  }

.soundButtonInteractiveRefresh__6d4ed.playing__6d4ed {
    outline: 2px solid var(--button-outline-positive-border);
  }

.soundButtonInteractiveRefresh__6d4ed.playing__6d4ed .soundInfoRefresh__6d4ed.hasEmoji__6d4ed, .soundButtonInteractiveRefresh__6d4ed.previewing__6d4ed .soundInfoRefresh__6d4ed.hasEmoji__6d4ed {
      padding-bottom: 4px;
      gap: 0;
    }

.soundButtonInteractiveRefresh__6d4ed.playing__6d4ed .emojiCircle__6d4ed, .soundButtonInteractiveRefresh__6d4ed.previewing__6d4ed .emojiCircle__6d4ed {
      width: 40px;
      height: 40px;
    }

.soundButtonInteractiveRefresh__6d4ed.playing__6d4ed .emojiCircle__6d4ed .emoji__6d4ed, .soundButtonInteractiveRefresh__6d4ed.previewing__6d4ed .emojiCircle__6d4ed .emoji__6d4ed {
        width: 24px;
        height: 24px;
      }

.buttonDisabledSecondaryActionsEnabled__6d4ed {
  cursor: default;
}

.buttonDisabled__6d4ed {
  pointer-events: none;
}

.premiumDisabled__6d4ed {
  opacity: 0.5;
}

.premiumDisabledRefresh__6d4ed {
  --custom-gradient-border: linear-gradient(
      90deg,
      var(--premium-tier-2-purple-for-gradients) 0%,
      var(--premium-tier-2-purple-for-gradients-2) 50.24%,
      var(--premium-tier-2-pink-for-gradients) 100%
    )
    border-box;
}

.premiumDisabledRefresh__6d4ed:hover,
  .premiumDisabledRefresh__6d4ed.focused__6d4ed {
    /* need to do some css trickery for the gradient border */
    background:
      linear-gradient(var(--card-primary-bg), var(--card-primary-bg)) padding-box,
      var(--custom-gradient-border);
  }

.premiumDisabledRefresh__6d4ed:hover .emojiCircle__6d4ed, .premiumDisabledRefresh__6d4ed.focused__6d4ed .emojiCircle__6d4ed {
      /* lint pending on https://github.com/discord/discord/pull/181251 */
      /* stylelint-disable-next-line discord/var-validator */
      background: linear-gradient(
        90deg,
        hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.2) 0%,
        hsl(var(--premium-tier-2-purple-for-gradients-2-hsl) / 0.2) 50.24%,
        hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.2) 100%
      );
    }

.premiumDisabledRefresh__6d4ed:hover .emoji__6d4ed, .premiumDisabledRefresh__6d4ed.focused__6d4ed .emoji__6d4ed {
      opacity: 0.1;
    }

.premiumDisabledRefresh__6d4ed:hover .soundNameRefresh__6d4ed:not(.hasEmoji__6d4ed), .premiumDisabledRefresh__6d4ed.focused__6d4ed .soundNameRefresh__6d4ed:not(.hasEmoji__6d4ed) {
      opacity: 0.5;
    }

.premiumDisabledRefresh__6d4ed:active:not(:focus-within) {
    background:
      linear-gradient(var(--card-primary-pressed-bg), var(--card-primary-pressed-bg)) padding-box,
      var(--custom-gradient-border);
  }

.absoluteFill__6d4ed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.buttonOverlay__6d4ed,
.addButtonOverlay__6d4ed {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.buttonOverlayBackground__6d4ed {
  
  background: var(--background-secondary);
  opacity: 0.8;
}

.buttonOverlayActions__6d4ed {
  
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buttonOverlayActionsRefresh__6d4ed {
  
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.full-motion .buttonOverlayActionsRefresh__6d4ed {
    margin-top: -2px;
    transition: margin-top 0.2s ease;
  }

.buttonOverlayActionsRefresh__6d4ed:focus-within {
    margin-top: 0;
  }

.secondaryButton__6d4ed {
  color: var(--interactive-normal);
  display: flex;
}

.secondaryButton__6d4ed:focus,
  .secondaryButton__6d4ed:hover {
    color: var(--interactive-hover);
    cursor: pointer;
  }

.secondaryButtonRefresh__6d4ed {
  color: var(--interactive-muted);
  display: flex;
  padding: 8px 4px 4px;
  transition: opacity 0.2s ease;
}

.secondaryButtonRefresh__6d4ed:first-child {
    padding-left: 8px;
  }

.secondaryButtonRefresh__6d4ed:last-child {
    padding-right: 8px;
  }

.secondaryButtonRefresh__6d4ed:focus,
  .secondaryButtonRefresh__6d4ed:hover {
    color: var(--interactive-hover);
    cursor: pointer;
  }

.secondaryIcon__6d4ed {
  width: 16px;
  height: 16px;
}

.favoriteIconFavorite__6d4ed {
  color: var(--text-warning);
}

.primaryIcon__6d4ed {
  width: 20px;
  height: 20px;
  color: var(--interactive-active);
  flex: 1;
  pointer-events: none;
}

.primaryIconRefresh__6d4ed {
  width: 20px;
  height: 20px;
  color: var(--interactive-active);
  align-self: center;
}

.primaryIconRefresh__6d4ed.hasEmoji__6d4ed:not(.primaryIconTopLevel__6d4ed) {
    /* shift icon up to cover emoji */
    padding-bottom: 21px;
  }

.lockIcon__6d4ed {
  pointer-events: none;
}

.primaryIconTopLevel__6d4ed {
  position: absolute;
  z-index: 9999;
}

.unavailableTooltip__6d4ed {
  position: absolute;
  top: 0;
  height: 40px;
  width: 150px;
}

.unavailableTooltipRefresh__6d4ed {
  position: absolute;
  top: 0;
  height: 72px;
  width: 102px;
}

.icon__14ad3 {
  width: 16px;
  height: 16px;
}

.sliderContainer__14ad3 {
  min-width: 188px;
  display: flex;
  padding: var(--spacing-12);
  flex-direction: column;
  background-color: var(--background-floating);
  border-radius: var(--radius-sm);
}

.slider__14ad3 {
  margin-bottom: calc(-1 * var(--spacing-8));
}

.betaBadge__14ad3 {
  position: absolute;
  top: -8px;
  left: var(--spacing-8);
}

.infoContainer__14ad3 {
  border-radius: var(--radius-sm);
  max-width: 300px;
}

.infoTooltip__14ad3 {
  overflow: hidden;
}

.infoNitroContainer__14ad3 {
  position: relative;
  background-color: var(--background-floating);
}

.infoNitroBackground__14ad3 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
  z-index: 1;
  opacity: 0.64;
}

.infoNitroTextContainer__14ad3 {
  position: relative;
  z-index: 2;
  padding: var(--spacing-8);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.infoNitroIcon__14ad3 {
  margin-right: var(--spacing-4);
}

.infoNitroText__14ad3 {
  flex: 1;
  margin-right: var(--spacing-16);
}

.infoNitroBadge__14ad3 {
  margin-left: 0 auto;
}

.infoSoundContainer__14ad3 {
  padding: var(--spacing-12);
  background-color: var(--background-floating);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.infoSoundInnerContainer__14ad3 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.infoSoundIcon__14ad3 {
  margin-right: var(--spacing-4);
}

.infoExpandedSoundContainer__14ad3 {
  padding: var(--spacing-16);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-16);
  background-color: var(--background-secondary);
  align-items: center;
}

.infoExpandedGuildContainer__14ad3 {
  padding: var(--spacing-16);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  background-color: var(--background-secondary-alt);
  align-items: start;
}

.infoExpandedGuildInfo__14ad3 {
  width: 100%;
}

.infoExpandedGuildTitle__14ad3 {
  align-self: flex-start;
}

.infoExpandedGuildInfoContainer__14ad3 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8);
  align-items: center;
  align-self: stretch;
}

/* stylelint-disable color-no-hex */
.jumboContainer__5cc6a {
  margin: 2px;
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.jumboButton__5cc6a {
  display: inline-flex;
}
.inlineButton__5cc6a {
  display: inline-block;
  border: 1px solid var(--border-strong);
  background: var(--card-primary-bg);
  box-shadow:
    0 -4px 0 0 rgba(0, 0, 0, 0.12) inset,
    0 2px 0 0 rgba(0, 0, 0, 0.2);
}
.full-motion .inlineButton__5cc6a {
    transition:
      box-shadow 0.1s ease-in-out, transform 0.2s ease;
  }
.inlineButton__5cc6a:hover {
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
.inlineButton__5cc6a:active {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: var(--card-primary-pressed-bg);
    box-shadow: none;
  }
.full-motion .inlineButton__5cc6a:active {
      transform: translateY(2px);
    }
.inlineButton__5cc6a.playing__5cc6a {
    border: 1px solid var(--button-outline-positive-border);
  }
.inlineContainer__5cc6a {
  line-height: 1.5em;
  box-sizing: border-box;
  position: relative;
  align-items: center;
  text-align: center;
  padding: 0 var(--spacing-4);
  margin: 2px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.inlineTextArea__5cc6a {
  margin: 2px var(--spacing-4);
}
.soundmojiEmoji__5cc6a {
  width: 1em !important;
}
.soundmojiEmoji__5cc6a {
  line-height: 1.5em;
  /* stylelint-disable-next-line declaration-no-important */
  margin-bottom: 1.5px;
}
.unknownSound__5cc6a {
  height: 1em;
  width: 1em;
  position: relative;
  top: 2px;
}
.tooltip__5cc6a {
  border-radius: var(--radius-sm);
}
.tooltipContainer__5cc6a {
  padding: 0;
}

.emojiContainer__75abc {
  display: inline-block;
}

.emojiContainerClickable__75abc {
  cursor: pointer;
}

.emojiJumbo__75abc {
  vertical-align: middle;
}

.icon_a9c2d1 {
  margin-right: 0.1rem;
}

.tooltip__5a41d {
  text-align: center;
}

.svgContentRight__7b484 {
  fill: var(--bg-base-primary);
}

.svgContentLeft__7b484 {
  fill: var(--bg-base-tertiary);
}

.svgContentLines__7b484 {
  fill: var(--bg-mod-strong);
}

.svgDots__7b484 {
  fill: var(--bg-mod-strong);
}

.svgTag__7b484 {
  fill: var(--text-secondary);
}

.wrapper__124c8 {
  box-sizing: border-box;
  border-radius: 4px;
  padding: 16px;
  max-width: 432px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-indent: 0;
  background-color: var(--background-secondary);
}

.visual-refresh .wrapper__124c8 {
    background-color: var(--background-mod-subtle);
    border: 1px solid var(--border-subtle);
  }

.titleRegion__124c8 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-transform: uppercase;
}

.title__124c8 {
  display: block;
  flex: 0 0 auto;
}

.infoIcon__124c8 {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 4px;
}

.copyLink__124c8 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 600;
  padding-right: 8px;
  margin-left: 16px;
  cursor: pointer;
}

.copyLink__124c8:before {
    content: '';
    position: absolute;
    top: 2px;
    left: -8px;
    display: block;
    height: 12px;
    width: 1px;
    margin-right: 8px;
    pointer-events: none;
  }

.copyLink__124c8.copied__124c8 {
  cursor: default;
}

.copyLinkIcon__124c8 {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.content__124c8 {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  gap: 16px;
}

.infoLink__124c8.infoLink__124c8 {
  cursor: pointer;
  color: var(--header-secondary);
}

.buildInfo__124c8 {
  flex: 1000 0 auto;
  overflow: hidden;
  height: 40px;
}

.button__124c8 {
  flex: 1 0 auto;
}

.buttonSize__124c8 {
  width: 80px;
  height: 40px;
}

.subHead__124c8 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.icon__124c8 {
  flex: 0 0 auto;
  display: block;
}

.buildDetails__124c8 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.barLoader__124c8 {
  flex: 0 0 auto;
  width: 84%;
  height: 16px;
  border-radius: 8px;
}

.barTitle__124c8 {
  width: 45%;
  margin-top: 2px;
  margin-bottom: 4px;
}

.buttonLoader__124c8 {
  width: 80px;
  height: 40px;
  border-radius: 4px;
}

/* Light theme override for transparent button to not match background color */

.theme-light .disabledButtonOverride__124c8 {
    background-color: var(--primary-300) !important;
  }

.theme-light .disabledButtonOverride__124c8 {
    /* stylelint-disable-next-line declaration-no-important */
  }

.copyLink__124c8:before {
  background-color: var(--background-primary);
}

.infoLink__124c8:hover,
.copyLink__124c8:hover,
.buildDetails__124c8 {
  color: var(--header-primary);
}

.copyLink__124c8.copied__124c8,
.copyLink__124c8.copied__124c8:hover {
  color: var(--text-positive);
}

.barLoader__124c8,
.buttonLoader__124c8 {
  background-color: var(--background-primary);
}

.icon_e59963 {
  vertical-align: middle;
  margin-bottom: 0.2rem;
  margin-right: var(--spacing-4);
}

/* stylelint-disable color-no-hex, declaration-property-value-allowed-list */

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    border-radius: 4px;
    -webkit-text-size-adjust: none;
            text-size-adjust: none;
    color: var(--text-normal);
    background: var(--background-secondary);
  }

.theme-dark .hljs-doctag,
    .theme-dark .hljs-keyword,
    .theme-dark .hljs-meta .hljs-keyword,
    .theme-dark .hljs-template-tag,
    .theme-dark .hljs-template-variable,
    .theme-dark .hljs-type,
    .theme-dark .hljs-variable.language_ {
      color: #ff7b72;
    }

.theme-dark .hljs-title,
    .theme-dark .hljs-title.class_,
    .theme-dark .hljs-title.class_.inherited__,
    .theme-dark .hljs-title.function_ {
      color: #d2a8ff;
    }

.theme-dark .hljs-attr,
    .theme-dark .hljs-attribute,
    .theme-dark .hljs-literal,
    .theme-dark .hljs-meta,
    .theme-dark .hljs-number,
    .theme-dark .hljs-operator,
    .theme-dark .hljs-variable,
    .theme-dark .hljs-selector-attr,
    .theme-dark .hljs-selector-class,
    .theme-dark .hljs-selector-id {
      color: #79c0ff;
    }

.theme-dark .hljs-regexp,
    .theme-dark .hljs-string,
    .theme-dark .hljs-meta .hljs-string {
      color: #a5d6ff;
    }

.theme-dark .hljs-built_in,
    .theme-dark .hljs-symbol {
      color: #ffa657;
    }

.theme-dark .hljs-comment,
    .theme-dark .hljs-code,
    .theme-dark .hljs-formula {
      color: #8b949e;
    }

.theme-dark .hljs-name,
    .theme-dark .hljs-quote,
    .theme-dark .hljs-selector-tag,
    .theme-dark .hljs-selector-pseudo {
      color: #7ee787;
    }

.theme-dark .hljs-subst {
      color: #c9d1d9;
    }

.theme-dark .hljs-section {
      color: #1f6feb;
      font-weight: bold;
    }

.theme-dark .hljs-bullet {
      color: #f2cc60;
    }

.theme-dark .hljs-emphasis {
      color: #c9d1d9;
      font-style: italic;
    }

.theme-dark .hljs-strong {
      color: #c9d1d9;
      font-weight: bold;
    }

.theme-dark .hljs-addition {
      color: #aff5b4;
      background-color: #033a16;
    }

.theme-dark .hljs-deletion {
      color: #ffdcd7;
      background-color: #67060c;
    }

.theme-dark .hljs-char.escape_,
    .theme-dark .hljs-link,
    .theme-dark .hljs-params,
    .theme-dark .hljs-property,
    .theme-dark .hljs-punctuation,
    .theme-dark .hljs-tag {
      /* purposely ignored */
    }

.theme-light .hljs-doctag,
    .theme-light .hljs-keyword,
    .theme-light .hljs-meta .hljs-keyword,
    .theme-light .hljs-template-tag,
    .theme-light .hljs-template-variable,
    .theme-light .hljs-type,
    .theme-light .hljs-variable.language_ {
      color: #d73a49;
    }

.theme-light .hljs-title,
    .theme-light .hljs-title.class_,
    .theme-light .hljs-title.class_.inherited__,
    .theme-light .hljs-title.function_ {
      color: #6f42c1;
    }

.theme-light .hljs-attr,
    .theme-light .hljs-attribute,
    .theme-light .hljs-literal,
    .theme-light .hljs-meta,
    .theme-light .hljs-number,
    .theme-light .hljs-operator,
    .theme-light .hljs-variable,
    .theme-light .hljs-selector-attr,
    .theme-light .hljs-selector-class,
    .theme-light .hljs-selector-id {
      color: #005cc5;
    }

.theme-light .hljs-regexp,
    .theme-light .hljs-string,
    .theme-light .hljs-meta .hljs-string {
      color: #032f62;
    }

.theme-light .hljs-built_in,
    .theme-light .hljs-symbol {
      color: #e36209;
    }

.theme-light .hljs-comment,
    .theme-light .hljs-code,
    .theme-light .hljs-formula {
      color: #6a737d;
    }

.theme-light .hljs-name,
    .theme-light .hljs-quote,
    .theme-light .hljs-selector-tag,
    .theme-light .hljs-selector-pseudo {
      color: #22863a;
    }

.theme-light .hljs-subst {
      color: #24292e;
    }

.theme-light .hljs-section {
      color: #005cc5;
      font-weight: bold;
    }

.theme-light .hljs-bullet {
      color: #735c0f;
    }

.theme-light .hljs-emphasis {
      color: #24292e;
      font-style: italic;
    }

.theme-light .hljs-strong {
      color: #24292e;
      font-weight: bold;
    }

.theme-light .hljs-addition {
      color: #22863a;
      background-color: #f0fff4;
    }

.theme-light .hljs-deletion {
      color: #b31d28;
      background-color: #ffeef0;
    }

.theme-light .hljs-char.escape_,
    .theme-light .hljs-link,
    .theme-light .hljs-params,
    .theme-light .hljs-property,
    .theme-light .hljs-punctuation,
    .theme-light .hljs-tag {
      /* purposely ignored */
    }

.visual-refresh .hljs {
      display: block;
      overflow-x: auto;
      padding: 0.5em;
      border-radius: 4px;
      -webkit-text-size-adjust: none;
              text-size-adjust: none;
      color: var(--text-normal);
      /* background: var(--background-secondary); */
    }

.visual-refresh .hljs-doctag,
    .visual-refresh .hljs-keyword,
    .visual-refresh .hljs-meta .hljs-keyword,
    .visual-refresh .hljs-template-tag,
    .visual-refresh .hljs-template-variable,
    .visual-refresh .hljs-type,
    .visual-refresh .hljs-variable.language_ {
      color: var(--text-code-keyword);
    }

.visual-refresh .hljs-title,
    .visual-refresh .hljs-title.class_,
    .visual-refresh .hljs-title.class_.inherited__,
    .visual-refresh .hljs-title.function_ {
      color: var(--text-code-title);
    }

.visual-refresh .hljs-attr,
    .visual-refresh .hljs-attribute,
    .visual-refresh .hljs-literal,
    .visual-refresh .hljs-meta,
    .visual-refresh .hljs-number,
    .visual-refresh .hljs-operator,
    .visual-refresh .hljs-variable,
    .visual-refresh .hljs-selector-attr,
    .visual-refresh .hljs-selector-class,
    .visual-refresh .hljs-selector-id {
      color: var(--text-code-variable);
    }

.visual-refresh .hljs-regexp,
    .visual-refresh .hljs-string,
    .visual-refresh .hljs-meta .hljs-string {
      color: var(--text-code-string);
    }

.visual-refresh .hljs-built_in,
    .visual-refresh .hljs-symbol {
      color: var(--text-code-builtin);
    }

.visual-refresh .hljs-comment,
    .visual-refresh .hljs-code,
    .visual-refresh .hljs-formula {
      color: var(--text-code-comment);
    }

.visual-refresh .hljs-name,
    .visual-refresh .hljs-quote,
    .visual-refresh .hljs-selector-tag,
    .visual-refresh .hljs-selector-pseudo {
      color: var(--text-code-tag);
    }

.visual-refresh .hljs-subst {
      color: var(--text-code-default);
    }

.visual-refresh .hljs-section {
      color: var(--text-code-section);
      font-weight: bold;
    }

.visual-refresh .hljs-bullet {
      color: var(--text-code-bullet);
    }

.visual-refresh .hljs-emphasis {
      color: var(--text-code-default);
      font-style: italic;
    }

.visual-refresh .hljs-strong {
      color: var(--text-code-default);
      font-weight: bold;
    }

.visual-refresh .hljs-addition {
      color: var(--text-code-addition);
      background-color: var(--background-code-addition);
    }

.visual-refresh .hljs-deletion {
      color: var(--text-code-deletion);
      background-color: var(--background-code-deletion);
    }

.visual-refresh .hljs-char.escape_,
    .visual-refresh .hljs-link,
    .visual-refresh .hljs-params,
    .visual-refresh .hljs-property,
    .visual-refresh .hljs-punctuation,
    .visual-refresh .hljs-tag {
      /* purposely ignored */
    }

.emoji_e463a5 {
  flex: 0 0 auto;
}

.icon_c9d15c {
  flex: 0 0 auto;
  margin-left: 2px;
}

.textRuler_c9d15c {
  position: absolute;
  visibility: hidden;
}

.questsIcon_c9d15c {
  margin-left: 4px;
}

@keyframes placeholderPulse__27cc6 {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

.placeholder__27cc6,
.multiplePlaceholder__27cc6 {
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  animation: placeholderPulse__27cc6 3s ease-in-out infinite;
}

.placeholder__27cc6 {
  height: 44px;
  display: flex;
  align-items: center;
}

.placeholderUsername__27cc6,
.mulitplePlaceholderUsername__27cc6 {
  border-radius: 8px;
  height: 14px;
}

.mulitplePlaceholderUsername__27cc6 {
  margin-top: 12px;
}

.avatarSmall__27cc6 {
  width: 32px;
  height: 32px;
}

.avatarLarge__27cc6 {
  /* $avatar-size-lg */
  width: 40px;
  height: 40px;
}

.placeholderAvatar__27cc6 {
  border-radius: 50%;
}

.placeholderUsername__27cc6,
.mulitplePlaceholderUsername__27cc6,
.placeholderAvatar__27cc6 {
  background-color: var(--background-primary);
}

.avatarMasked__27cc6 {
  -webkit-mask-image: url(/assets/1f9b76e0279b91a4.svg);
          mask-image: url(/assets/1f9b76e0279b91a4.svg);
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  margin-right: -6px;
}

.gameImageContainer_ed15e7 {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1.5px solid transparent;
}

.highlighted_ed15e7 {
  background-color: var(--border-strong);
  border-radius: 5px;
}

.extraGameCount_ed15e7 {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--bg-backdrop);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.gameActivityLevel_ed15e7 {
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 50%;
  background-color: var(--background-tertiary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameActivityLevelInner_ed15e7 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 10px;
  padding: 2px;
}

.gameImage_ed15e7 {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.tooltipText_ed15e7 {
  text-align: center;
}

.tooltipGameImageContainer_ed15e7 {
  
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.tooltipGameImage_ed15e7 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.tooltipGameName_ed15e7 {
  flex: 1;
}

.tooltipGames_ed15e7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tooltipGame_ed15e7 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.guildIconImage__79e3e {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

  .guildIconImage__79e3e.acronym__79e3e {
    background-color: var(--bg-base-tertiary);
  }

.acronym__79e3e {
  font-size: 14px;
  font-weight: 500;
  color: var(--header-primary);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clickable_f01e54 {
  cursor: pointer;
}

  .clickable_f01e54:active {
    transform: translateY(2px) scale(0.98);
  }

.trait_f01e54 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-subtle);
  padding: 8px 12px;
  border-radius: 16px;

  /* this transform acts as the pressed state */
  /* stylelint-disable-next-line discord/respect-reduced-motion */
  transition:
    transform ease-in-out 0.2s, border-color ease-in-out 0.2s;
}

.theme-dark .selectable_f01e54 {
    border-color: var(--border-strong);
  }

.theme-dark .selectable_f01e54:hover,
    .theme-dark .selectable_f01e54:active {
      border-color: var(--border-strong);
    }

.theme-light .selectable_f01e54 {
    border-color: var(--border-strong);
  }

.theme-light .selectable_f01e54:hover,
    .theme-light .selectable_f01e54:active {
      border-color: var(--interactive-hover);
    }

.selectable_f01e54 {
  color: var(--text-secondary);
}

.selectable_f01e54:hover,
  .selectable_f01e54:active {
    color: var(--interactive-hover);
  }

.selected_f01e54 {
  border-color: var(--brand-500);
  color: var(--interactive-active);
}

.selected_f01e54:hover,
  .selected_f01e54:active {
    border-color: var(--brand-500);
  }

.clickableCard__5bdf8 {
  border-radius: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-low);
  min-width: 240px;
  max-width: 500px;
  width: 100%;
  height: 400px;
}

.clickableCard__5bdf8:hover .card__5bdf8 {
  box-shadow: var(--shadow-high);
  transform: translateY(-2px);
}

.clickableCard__5bdf8:active .card__5bdf8 {
  box-shadow: var(--shadow-low);
  transform: translateY(-2px) scale(0.99);
}

/* prevent card pulsing when clicking favorites */

.clickableCard__5bdf8:active .card__5bdf8:has(.favoriteButton__5bdf8:hover) {
    box-shadow: var(--shadow-high);
    transform: translateY(-2px);
  }

.applyToJoinButton__5bdf8 {
  padding: 12px;
  padding-top: 0;
}

.applyToJoinContainer__5bdf8 {
  height: 427px !important;
}

.applyToJoinContainer__5bdf8 {
  /* stylelint-disable-next-line declaration-no-important */ /* imporant needed to override the prior card heights. */
}

.card__5bdf8 {
  min-width: 240px;
  max-width: 500px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  background-color: var(--bg-base-tertiary);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.full-motion .card__5bdf8 {
    transition:
      transform 0.2s, box-shadow 0.1s;
  }

.skeletonCard__5bdf8 {
  height: 100%;
  background-color: var(--bg-base-tertiary);
}

.favoriteButton__5bdf8 {
  position: absolute;
  top: 12px;
  left: 12px;

  height: 18px;
  width: 18px;
  padding: 7px;
  border-radius: 50%;

  cursor: pointer;

  background-color: var(--bg-surface-overlay);

  opacity: 0;
  transition:
    opacity 0.2s ease-in-out, background-color 64ms ease-in-out;
}

.shownFavoriteButton__5bdf8 {
  opacity: 1;
}

.favoriteButton__5bdf8:hover,
.favoriteButton__5bdf8:active {
  background-color: var(--bg-surface-raised);
}

.cardStaticHeight__5bdf8 {
  height: 400px;
}

.header__5bdf8 {
  position: relative;
}

.clanIconMask__5bdf8 {
  position: absolute;
  width: 70px;
  height: 70px;
  top: -51px;
}

.clanIconInner__5bdf8 {
  background-color: var(--bg-surface-overlay);
  padding: 3px;
}

.skeletonIconInner__5bdf8 {
  background-color: var(--bg-base-tertiary);
  padding: 3px;
  overflow: hidden;
  border-radius: 12px;
}

.skeletonIcon__5bdf8 {
  border-radius: 16px;
}

.clanBadge__5bdf8 {
  position: absolute;
  right: 12px;
  top: 12px;
}

.cardBrandingHeader__5bdf8 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100px;
  width: 100%;
}

.clanBannerPreview__5bdf8 {
  height: 98px;
  margin-top: -2px;
}

.cardBrandingFooter__5bdf8 {
  height: 8px;
  width: 100%;
}

.headerBadge__5bdf8 {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
  background-color: var(--bg-surface-overlay);
  padding: 4px 8px;
  border-radius: 12px;
}

.cardContent__5bdf8 {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cardContentTitleSection__5bdf8 {
  flex: 0 0 auto;
}

.cardContentDescriptionSection__5bdf8 {
  flex: 1 1 auto;
}

.cardContentDescriptionCollapsed__5bdf8 {
  max-height: 64px;
}

.cardNameAndTagWrapper__5bdf8 {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.clanTagChipletWrapper__5bdf8 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.clanTagChiplet__5bdf8 {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  border: solid 1px var(--border-subtle);
  border-radius: 4px;
  padding: 2px 6px;
  transition: border-color 0.2s ease-in-out;
}

.clanTagChiplet__5bdf8:hover {
    border-color: var(--border-strong);
  }

.playstyle__5bdf8 {
  color: var(--role-orange);
}

.traitsContainer__5bdf8 {
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 0 0;
}

.thinTrait__5bdf8 {
  padding: 4px 8px;
  gap: 4px;
  max-width: 200px;
  height: 24px;
  box-sizing: border-box;
}

/* Theme selectors necessary to override styles in base clan trait styles. */

.cardFooter__5bdf8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  min-height: 24px;
}

.cardFooterInfo__5bdf8 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cardFooterMembers__5bdf8 {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cardFooterMembersIcon__5bdf8 {
  width: 12px;
  height: 12px;
  color: var(--text-secondary);
}

.cardFooterGames__5bdf8 {
  display: flex;
  gap: 2px;
}

.overflowTooltip__5bdf8 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.clanInfoRow__5bdf8 {
  display: flex;
  gap: 4px;
  align-items: center;
}

.clanInfoItem__5bdf8 {
  flex: 0 0 auto;
}

.wildCardText__5bdf8 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.nameText__5bdf8 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.bannerImage__5bdf8 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.selectedTrait__5bdf8 {
  border-color: var(--border-strong);
  background: var(--bg-surface-raised);
}

.selectedTrait__5bdf8:hover,
  .selectedTrait__5bdf8:active {
    border-color: var(--border-strong);
  }

.full-motion .animateButtonIn__5bdf8 {
    animation: pulseIn__5bdf8 0.3s;
  }

.full-motion .animateButtonOut__5bdf8 {
    animation: pulseOut__5bdf8 0.2s;
  }

@keyframes pulseIn__5bdf8 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulseOut__5bdf8 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

.customButton__70335 {
  background-color: var(--custom-clan-bg);
  color: var(--custom-clan-text);
  transition: background-color 0.25s;
}

.customButton__70335:hover,
.customButton__70335:focus {
  background-color: var(--custom-clan-hover-bg, hsl(var(--black-500-hsl) / 0.3));
}

.customButton__70335:active {
  background-color: var(--custom-clan-active-bg, hsl(var(--black-500-hsl) / 0.35));
}

.container__88e24 {
  display: flex;
  flex-direction: column;

  pointer-events: all;
  border-radius: var(--radius-md);
  background: var(--bg-surface-overlay);
  overflow: hidden;
  box-shadow: var(--elevation-high);

  width: 256px;
}

.buttonGroupContainer__88e24 {
  margin: 0 12px 12px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}

div.cardContainer__88e24 {
  border-radius: 0;
  height: auto;
  border: 0;
  background: var(--bg-surface-overlay);
}

.tooltipFooter__88e24 {
  width: 100%;
}

.button__88e24 {
  opacity: 1;
  transition: opacity 100ms ease-in-out;
}

.button__88e24:hover {
    opacity: 0.9;
  }

.waitlistedButton__88e24 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.askToJoinInputWrapper__88e24 {
  margin-top: 8px;
  background: var(--bg-surface-overlay);
  padding: 12px;
  box-shadow: var(--elevation-high);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--radius-md);
}

.inputRow__88e24 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 9;
}

.sendButton__88e24 {
  flex: 1;
  min-width: 0;
}

.input__88e24 {
  font-size: 14px;
  height: var(--custom-custom-button-md-height); /* match button height */
}

.chipletContainerInner__4a25c {
  line-height: 16px !important;
}

  .chipletContainerInner__4a25c {
  display: inline-block;
  padding: 0 4px;
  background: var(--bg-mod-strong);
  border-radius: 4px;
  /* stylelint-disable-next-line declaration-no-important */
  vertical-align: middle;

  transition: background 100ms ease-in-out;
}

  .chipletContainerInner__4a25c:hover {
    background: var(--bg-mod-faint);
  }

.chipletContainerInline__4a25c {
  /* Because our username uses silly inline display, the offset for this container means it looks not aligned. */
  /* This forces a better vertical alignment. */
  margin-top: -2px;
}

.clickable__4a25c {
  cursor: pointer;
}

.text__4a25c {
  line-height: 16px !important;
}

.text__4a25c {
  /* stylelint-disable-next-line declaration-no-important */
}

.badge__4a25c {
  margin-right: 2px;
  margin-top: 0;
  margin-bottom: -1px;
}

.tooltip__4a25c {
  background: var(--bg-surface-overlay);
  max-width: 360px;
  padding: 0;
  border-radius: 8px;
}

.tooltipContainer__4a25c {
  max-width: 360px;
  padding: 0;
}

.chipletContainerInner__4a25c.noTooltip__4a25c:hover {
    background: var(--bg-mod-strong);
  }

.unselectable__4a25c {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.container__91a9d {
  box-sizing: border-box;
  display: block;
  padding: 1px 0;
  border-radius: 4px;
  transition: none;
}

.container__91a9d {
  color: var(--channels-default);
}

.container__91a9d .muted__91a9d {
    color: var(--interactive-muted);
  }

.muted__91a9d .avatar__91a9d {
  opacity: 0.3;
}

.clickable__91a9d.container__91a9d:hover {
  color: var(--interactive-hover);
}

.clickable__91a9d.container__91a9d:hover .muted__91a9d {
    color: var(--interactive-hover);
  }

.clickable__91a9d.container__91a9d:hover .avatar__91a9d {
    opacity: 1;
  }

.clickable__91a9d.container__91a9d:active,
.highlighted__91a9d.container__91a9d,
.selected__91a9d.container__91a9d {
  color: var(--interactive-active);
}

.layout__91a9d {
  display: flex;
  align-items: center;
  border-radius: 4px;
  height: 42px;
  padding: 0 8px;
}

.visual-refresh .layout__91a9d {
    border-radius: var(--radius-sm);
  }

.wrappedLayout__91a9d {
  height: auto;
  /* 5px vertical padding to make the default height match 42px */
  padding: 5px 8px;
}

.clickable__91a9d:hover .layout__91a9d {
  background-color: var(--background-modifier-hover);
  cursor: pointer;
}

.clickable__91a9d:active .layout__91a9d {
  background-color: var(--background-modifier-active);
}

.selected__91a9d .layout__91a9d {
  background-color: var(--background-modifier-selected);
}

.avatar__91a9d {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.content__91a9d {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.name__91a9d {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 0 1 auto;
}

.wrappedName__91a9d {
  overflow: none;
  white-space: normal;
}

.nameAndDecorators__91a9d {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.subText__91a9d {
  /* NOTE(amadeus): This really helps to tighten up the title/subtext
   * relationship a bit with a rich presence or GroupDM */
  margin-top: -2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*
 * There are some situations in which subText renders some React components that end up rendering nothing, so
 * according to null checks, there is something there, but according to DOM, there is nothing. We want to hide
 * this div based on what is actually rendered to the DOM.
 */

.subText__91a9d:empty {
  display: none;
}

.children__91a9d {
  flex: 0 0 auto;
  margin-left: 8px;
}

.nitroRewardTileAssetContainer_a92e89 {
  display: flex;
  align-content: center;
  justify-content: center;
  place-content: center;
  text-align: center;
  background-image: linear-gradient(45deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
}

.nitroRewardTileAsset_a92e89 {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  margin-top: 2px;
  margin-right: 10%;
}

@value transitionDuration 200ms;

/*
 * Styling div.modal* instead of .modal* b/c it increases selector specificty and allows overriding
 * the style properties without using an !important tag
 */

div.modalRoot {
  position: relative;
  border-radius: 12px;
}

div.modalHeader_c28af8 {
  overflow-x: visible;
}

.closeBtn_c28af8 {
  position: absolute;
  top: 12px;
  right: 12px;
}

.asset_c28af8 {
  width: 205px;
  height: auto;
  margin-bottom: 24px;
}

.modalContent_c28af8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 24px;
}

.completedModalContent_c28af8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
}

.choiceContainer_c28af8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: var(--background-secondary);
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid var(--border-faint);
  cursor: pointer;
}

.full-motion .choiceContainer_c28af8 {
    transition: background-color 200ms ease-in-out;
  }

.choiceContainer_c28af8:hover {
    background-color: var(--background-message-hover);
  }

.closeButtonContainer_c28af8 {
  position: relative;
  overflow: hidden;
  /* Radius of <Button /> */
  border-radius: 3px;
}

.progressOverlay_c28af8 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--background-secondary);
  z-index: 10;
  opacity: 0.2;
  pointer-events: none;
}

.visual-refresh .modalHeader_c28af8 {
    padding-bottom: 12px;
  }

.visual-refresh .modalContent_c28af8 {
    padding-bottom: 24px;
  }

.questRewardTile__28141 {
  border-radius: 4px;
  box-shadow: 6px 12px 32px rgba(0, 0, 0, 0.24);
  position: relative;
  width: 64px;
  height: 64px;
}

.rewardHighlight__28141 {
  border-radius: 8px;
  overflow: hidden;
}

.rewardHighlight__28141:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-sizing: border-box;
  border: 1px solid hsl(var(--white-500-hsl) / 0.15);
}

.borderOverlay__28141:before {
  border: 2px solid var(--white-500);
  border-radius: inherit;
  box-sizing: border-box;
  content: '';
  height: 100%;
  left: 0;
  -webkit-mask-image: linear-gradient(-45deg, transparent 50%, black);
          mask-image: linear-gradient(-45deg, transparent 50%, black);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.questRewardTileInteractive__28141 {
  cursor: pointer;
}

.questRewardTileAsset__28141 {
  border-radius: inherit;
  display: block;
  height: 100%;
  width: 100%;
}

.questRewardTileAssetStatic__28141 {
  pointer-events: none;
}

.questRewardTileDetailsLearnMore__28141 {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  bottom: 0;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transition: opacity 0.125s;
  right: 0;
  z-index: 0;
}

.questRewardTileDetailsLearnMore__28141 p {
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
}

.questRewardTile__28141:hover .questRewardTileDetailsLearnMore__28141,
.questRewardTile__28141:focus .questRewardTileDetailsLearnMore__28141 {
  opacity: 1;
}

.hideLearnMore__28141 {
  cursor: default;
}

@keyframes Shine__28141 {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(210%, 0, 0);
  }
}

.shine__28141 {
  color: hsl(var(--white-500-hsl) / 0.1);
  pointer-events: none;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
}

.reduce-motion .shine__28141 {
  opacity: 0;
}

.full-motion .shine__28141 {
  animation-delay: 0.75s;
  animation-duration: 2s;
  animation-name: Shine__28141;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.nitroUpsellContainer_d0caf4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: auto;
}

.nitroWheel_d0caf4 {
  margin-right: 6px;
}

.nitroText_d0caf4 {
  flex-wrap: wrap;
}

.buttonHighlighted__5d39a {
  background: linear-gradient(
    95.07deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-purple-for-gradients-2) 49.96%,
    var(--premium-tier-2-pink-for-gradients) 95.93%
  );
}

.pausedButton__5d39a {
  display: flex;
  align-items: center;
}

.lockIcon__5d39a {
  margin-right: 4px;
}

.container_bb1234 {
  position: relative;
  display: inline-block;
}

.sparkle_bb1234 {
  position: absolute;
}

.sparkleStarTopRight_bb1234 {
  
  bottom: calc(100% - 4px);
  left: calc(100% - 5px);
  width: 12.75px;
  height: 12.75px;
}

.sparkleStarRight_bb1234 {
  
  bottom: 3px;
  left: calc(100% + 1.31px);
  height: 7.44px;
  width: 7.44px;
}

.sparkleStarBottomLeft_bb1234 {
  
  top: calc(100% + 0.56px);
  left: -1px;
  height: 7.44px;
  width: 7.44px;
}

.theme-dark .sparkle_bb1234 {
    color: var(--white-500);
  }

.containerColored_bb1234 .sparkle_bb1234.sparkleStarTopRight_bb1234, .theme-light .sparkle_bb1234.sparkleStarTopRight_bb1234 {
    /* stylelint-disable-next-line color-no-hex */
    color: #83ddc5;
  }

.containerColored_bb1234 .sparkle_bb1234.sparkleStarRight_bb1234, .theme-light .sparkle_bb1234.sparkleStarRight_bb1234 {
    /* stylelint-disable-next-line color-no-hex */
    color: #e15be1;
  }

.containerColored_bb1234 .sparkle_bb1234.sparkleStarBottomLeft_bb1234, .theme-light .sparkle_bb1234.sparkleStarBottomLeft_bb1234 {
    color: var(--yellow-260);
  }

.tag_fe5e5d {
  background-color: var(--brand-500);
  font-size: 12px;
  line-height: 16px;
  padding: 0 6px;
}

.tag_fe5e5d.inheritBackgroundColor_fe5e5d {
  background: inherit;
}

.tag_fe5e5d.inheritTextColor_fe5e5d {
  color: inherit;
}

.firstPromotionalAvatar__55414 {
  z-index: 1;
}

.secondPromotionalAvatar__55414 {
  margin-right: -18px;
}

.container__55414 {
  display: flex;
  flex-direction: row-reverse;
}

.promotionalGiftMessage__6fbbd {
  position: relative;
  display: flex;
  width: 100%;
  top: 24px;
  right: 24px;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 24px;
  background: linear-gradient(78.98deg, rgba(255, 144, 144, 1), rgba(243, 14, 216, 1));
  min-height: 24px;
  border-radius: 0 0 16px 16px;
}

.promotionalGiftMessageText__6fbbd {
  color: black;
}

.promotionalTextSection__6fbbd {
  display: flex;
  flex-direction: column;
  justify-content: center;

  margin-right: 12px;
}

.avatar__6fbbd {
  /* 50% of 56px + 12px padding from promotionalGiftMessage */
  margin-top: -40px;
}

.pricePerInterval_fd0764 {
  margin-bottom: 18px;
  font-weight: 200;
}

.price_fd0764 {
  font-weight: 700;
}

.priceSpinner_fd0764 {
  margin-bottom: 18px;
  display: flex;
  justify-content: flex-start;
  height: 22px;
}

.annualDiscountString_fd0764 {
  display: flex;
  flex-direction: column;
}

.rightSparkle_fc1723 {
  margin-top: 15px;
  margin-left: 1px;
}

.leftSparkle_fc1723 {
  margin-left: -36px;
  padding-right: 10px;
  margin-bottom: -18px;
}

.sparklesAndButton_fc1723 {
  position: relative;
  display: flex;
  width: 103%;
}

.ctaFullWidth_fc1723 {
  width: 100%;
}

.buttonSparkleStar1_fc1723 {
  position: absolute;
  bottom: 35px;
  left: -8px;
  width: 14px;
  height: 13px;
}

.buttonSparkleStar2_fc1723 {
  position: absolute;
  bottom: 12px;
  left: 7px;
  width: 8px;
  height: 7px;
}

.buttonSparkleStar3_fc1723 {
  position: absolute;
  bottom: 37px;
  left: 8px;
  width: 14px;
  height: 28px;
}

.buttonSparkleStar4_fc1723 {
  position: absolute;
  bottom: 26px;
  right: 11px;
  width: 12px;
  height: 11px;
}

.buttonSparkleStar5_fc1723 {
  position: absolute;
  bottom: 41px;
  right: 4px;
  width: 8px;
  height: 7px;
}

.rimGlowVertical_fc1723 {
  position: absolute;
  bottom: 22px;
  left: -1px;
  width: 1px;
  height: 45px;
}

.rimGlowVertical_fc1723.rimGlowVerticalTier0_fc1723 {
    background: linear-gradient(
      180deg,
      var(--premium-tier-0-purple-for-gradients) 0%,
      white 50.52%,
      var(--premium-tier-0-purple-for-gradients) 100%
    );
  }

.rimGlowVertical_fc1723.rimGlowVerticalTier2_fc1723 {
    background: linear-gradient(
      180deg,
      var(--premium-tier-2-purple-for-gradients) 0%,
      white 50.52%,
      var(--premium-tier-2-purple-for-gradients) 100%
    );
  }

.container__33718 {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0));
  height: 36px;
}

.text__33718 {
  margin-left: 6px;
}

.textWithAD__33718 {
  margin-left: 9px;
}

.premiumCards_ac86f6 {
  display: flex;
  gap: 24px;
  width: 100%;
}

.card_ac86f6 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-radius: 16px;
  padding: 24px;
  position: relative;
  color: var(--white-500);
  width: 50%;
}

.card_ac86f6.withCardHover_ac86f6:hover {
      box-shadow: var(--legacy-elevation-high);
    }

.subscriptionPlanInfo_ac86f6 {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.listItems_ac86f6,
.listItemsBasic_ac86f6 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tierCardFocused_ac86f6 {
  z-index: 2;
  top: 0;
}

.tierCardHidden_ac86f6 {
  z-index: 1;
  transform: scale(93%) translateY(9%);
  opacity: 0.6;
  box-shadow: var(--shadow-low);
}

.wumpusImageContainer_ac86f6 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  position: absolute;
  width: 40%;
  top: 0;
  right: 0;
  border-top-right-radius: 16px;
  overflow: hidden;
}

.wumpusImage_ac86f6 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tier0_ac86f6.withTier0Rim_ac86f6:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      margin: -1px;
      border-radius: var(--radius-lg);
    }

.tier0_ac86f6 {
  background-image: var(--custom-premium-colors-premium-gradient-tier-0);
}

.tier2_ac86f6 {
  background-image: var(--custom-premium-colors-premium-gradient-tier-2);
}

.tier0V2Background_ac86f6 {
  /* stylelint-disable-next-line color-no-hex */
  background: linear-gradient(180deg, #000000 0%, #031a3b 100%);
}

.tier2V2Background_ac86f6 {
  /* stylelint-disable-next-line color-no-hex */
  background: linear-gradient(180deg, #000000 0%, #36266d 100%);
}

.theme-light .tier0V2Background_ac86f6 {
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(180deg, #f7f7fe 22.95%, #b6ddfc 153.33%);
  }

.theme-light .tier2V2Background_ac86f6 {
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(180deg, #f7f7fe 0%, #b6b9fc 153.33%);
  }

.tier2_ac86f6.withTier2Rim_ac86f6:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      margin: -1px;
      border-radius: var(--radius-lg);
    }

.v2TextLightMode_ac86f6 {
  pointer-events: inherit;
}

.tier0Title_ac86f6 {
  width: 106px;
  height: 40px;
}

.tier0V2Title_ac86f6 {
  
  width: 132px;
  height: 16px;
  color: var(--white);
}

.tierCardHeaderDisplay_ac86f6 {
  display: flex;
  flex-direction: column;
}

.tier2Title_ac86f6 {
  width: 96px;
  height: 24px;
  display: block;
}

.tier2V2Title_ac86f6 {
  
  width: 64px;
  height: 16px;
  color: var(--white);
}

.title_ac86f6 {
  margin-bottom: 8px;
}

.item_ac86f6 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8px;
}

.item_ac86f6:last-child {
    margin-bottom: 0;
  }

.tier2V2Subheader_ac86f6 {
  
  color: var(--white);
  margin-bottom: 6px;
}

.itemV2_ac86f6 {
  
  
  color: var(--white);
}

.v2TierCardSectionHeader_ac86f6 {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
  text-transform: uppercase;
  font-style: italic;
}

.theme-light .v2TextLightMode_ac86f6 {
    color: var(--black);
  }

.v2starBackground_ac86f6 {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 20px;
  right: 50px;
  overflow: hidden;
}

.itemWithWumpus_ac86f6 {
  
}

/* make the first item in the list have a shorter width to account for the art on the right side */

.itemWithWumpus_ac86f6:first-of-type {
    max-width: 100%;
  }

.icon_ac86f6 {
  margin-right: 8px;
  width: 24px;
  height: 24px;
}

.newCircleIcon_ac86f6 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  position: absolute;
  top: -24px;
  left: 250px;
}

.trialOfferPill_ac86f6 {
  margin-bottom: 18px;
}

.listItemsBasic_ac86f6 {
  min-height: 92%;
}

.freeTrialPillInlineBlock_ac86f6 {
  background: var(--white-500);
  color: var(--black-500);
  mix-blend-mode: screen;
  border-radius: var(--radius-md);
  font-weight: 800;
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 12px;
  text-transform: uppercase;
}

.freeTrialPillInline_ac86f6 {
  
  margin-top: 4px;
  margin-bottom: 8px;
  max-width: 60%;
}

.freeTrialActivatedPillInline_ac86f6 {
  
  margin-top: 8px;
  margin-bottom: 8px;
  max-width: 60%;
}

.taglineXPPrice_ac86f6 {
  margin: 20px 0 10px;
}

.taglineXPPrices_ac86f6:first-of-type {
  margin: 16px 0 8px;
}

.taglineXPPrices_ac86f6:last-of-type {
  margin: 8px 0 16px;
}

.price_ac86f6 {
  margin: 0 0 8px;
}

.price_ac86f6:last-of-type {
  margin: 0 0 18px;
}

.theme-dark .newCircleIcon_ac86f6 {
    color: var(--white-500);
  }

.theme-light .newCircleIcon_ac86f6 {
    color: var(--premium-perk-yellow);
  }

.newTagItem_ac86f6 {
  margin-left: 8px;
  background: white;
  color: var(--premium-tier-2-purple-for-gradients);
  border-radius: 8px;
}

.mostPopularText_ac86f6 {
  color: var(--white-500);
  text-transform: uppercase;
  text-align: center;
}

.mostPopularPill_ac86f6 {
  background: linear-gradient(
    95.07deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-purple-for-gradients-2) 49.96%,
    var(--premium-tier-2-pink-for-gradients) 95.93%
  );
  border-radius: 8px;
  padding: 4px 8px;
  left: 16px;
  z-index: 10;
  position: absolute;
  margin: auto;
  top: -12px;
}

.freeTrialPillWithSparkles_ac86f6 {
  display: flex;
  align-items: center;
}

.sparkleStar1_ac86f6 {
  width: 14px;
  height: 12px;
}

.sparkleStar2_ac86f6 {
  width: 8px;
  height: 7px;
  margin-left: -3px;
  margin-bottom: 15px;
}

.sparkleStar3_ac86f6 {
  width: 14px;
  height: 28px;
  margin-left: 2px;
  margin-right: 10px;
}

.freeTrialPill_ac86f6 {
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: var(--white-500);
  border-radius: var(--radius-md);
  gap: 10px;
}

.freeTrialPill_ac86f6.freeTrialPillTier0GradientFill_ac86f6 {
    background: var(--custom-premium-colors-premium-gradient-tier-0);
  }

.freeTrialPill_ac86f6.freeTrialPillTier2GradientFill_ac86f6 {
    background: var(--custom-premium-colors-premium-gradient-tier-2);
  }

.freeTrialPill_ac86f6.greyBackgroundPill_ac86f6 {
    background: var(--primary-500);
  }

.freeTrialPill_ac86f6.freeTrialPillTier2OldGradientFill_ac86f6 {
    background: var(--custom-premium-colors-premium-gradient-tier-2-old);
  }

.freeTrialPill_ac86f6.lightBackgroundPill_ac86f6 {
    background: linear-gradient(
      101deg,
      var(--premium-tier-2-purple-for-gradients) 25.21%,
      var(--premium-tier-2-purple-for-gradients-2) 62.43%,
      var(--premium-tier-2-pink-for-gradients) 95.57%
    );
    /* there is no var available for this hex, which is a special case offer pill on marketing page light mode */
    /* stylelint-disable-next-line color-no-hex */
    border: 1px solid #b473f5;
  }

.freeTrialPillText_ac86f6 {
  font-weight: 800;

  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 12px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}

.freeTrialPillText_ac86f6.freeTrialPillTextTier0_ac86f6 {
    color: var(--premium-tier-0-purple-for-gradients);
  }

.freeTrialPillText_ac86f6.freeTrialPillTextTier2_ac86f6 {
    color: var(--premium-tier-2-purple-for-gradients);
  }

.freeTrialPillText_ac86f6.freeTrialPillTextInverted_ac86f6 {
    color: var(--white-500);
  }

.sparkleStar4_ac86f6 {
  width: 13px;
  height: 11px;
  margin-left: 10px;
}

.sparkleStar5_ac86f6 {
  width: 8px;
  height: 7px;
  margin-left: 6px;
  margin-top: 1px;
}

.topRimPill_ac86f6 {
  position: absolute;
  top: -15px;
  right: 4px;
  z-index: 2;
}

.rimGlowTier0_ac86f6 {
  position: absolute;
  height: 1px;
  width: 88%;
  top: -1px;
  right: 5%;
  background: linear-gradient(
    -90deg,
    var(--premium-tier-0-purple-for-gradients) 0%,
    white 4.98%,
    white 50.52%,
    var(--premium-tier-0-blue-for-gradients) 100%
  );
  z-index: 1;
}

.rimGlowTier2_ac86f6 {
  position: absolute;
  height: 1px;

  background: linear-gradient(
    -90deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    white 4.98%,
    white 50.52%,
    var(--premium-tier-2-pink-for-gradients) 100%
  );
  z-index: 1;
}

.rimGlowTier2_ac86f6 {
  width: 88%;
  right: 5%;
  top: -1px;
}

.trialHeader_ac86f6 {
  max-width: 60%;
  margin-bottom: 18px;
}

.withPromotionalGradientBanner_ac86f6 {
  background: linear-gradient(100.98deg, rgba(133, 71, 198, 1), rgba(184, 69, 193, 1), rgba(171, 93, 138, 1));
  box-sizing: border-box;
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
}

.promotionalBackgroundImage_ac86f6 {
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(50%);
  transform-origin: top right;
}

/* stylelint-disable color-no-hex */

.tier2SideGradient_ac86f6 {
  position: absolute;
  width: 100vw;
  height: 1000px;
  background: radial-gradient(80% 70% at 100% 50%, #2d01dc 0%, transparent 100%),
    radial-gradient(80% 70% at 100% 50%, #b182ff 0%, transparent 100%);
  opacity: 0.4;
  pointer-events: none;
}

/* stylelint-enable color-no-hex */

.heading_e62f9d {
  margin-bottom: 8px;
}

.context_e62f9d {
  margin-bottom: 16px;
}

.gradientUpsellWrapper_e62f9d {
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--white-500);
  display: flex;
  flex-direction: column;
  padding: 16px;
  width: 100%;
  margin-top: 16px;
}

.gradientUpsellWrapper_e62f9d a,
  .gradientUpsellWrapper_e62f9d a:hover {
    color: var(--white-500);
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.gradientUpsellWrapperTier0_e62f9d {
  background-image: linear-gradient(
    90deg,
    var(--premium-tier-0-purple-for-gradients) 0%,
    var(--premium-tier-0-blue-for-gradients-2) 50%,
    var(--premium-tier-0-blue-for-gradients) 100%
  );
}

.gradientUpsellWrapperTier2_e62f9d {
  background-image: linear-gradient(
    90deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-pink-for-gradients) 100%
  );
}

.gradientUpsellWrapperWithBottomMargin_e62f9d {
  margin-bottom: 24px;
}

.logo_e62f9d {
  align-items: center;
  color: var(--white-500);
  display: flex;
  margin-bottom: 4px;
}

.logoIcon_e62f9d {
  flex: 0 0 auto;
  margin-right: 2px;
  height: 24px;
  width: 24px;
}

.logoWordmark_e62f9d {
  flex: 0 0 auto;
  width: auto;
  height: 16px;
}

.copy_e62f9d span {
  cursor: pointer;
  color: var(--white-500);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.copy_e62f9d {
  color: var(--white-500);
  margin-bottom: 12px;
  text-align: center;
}

.trialBadge_e62f9d {
  background-color: var(--white-500);
  border-radius: 30px;
  padding: 2px 8px;
  text-transform: uppercase;
}

.trialBadgeInner_e62f9d {
  /* The prefixed property is required to render properly */
  /* stylelint-disable-next-line */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradientUpsellWrapperTier0_e62f9d .trialBadgeInner_e62f9d {
  background-image: linear-gradient(
    90deg,
    var(--premium-tier-0-purple-for-gradients) 0%,
    var(--premium-tier-0-blue-for-gradients-2) 50%,
    var(--premium-tier-0-blue-for-gradients) 100%
  );
}

.gradientUpsellWrapperTier2_e62f9d .trialBadgeInner_e62f9d {
  background-image: linear-gradient(
    90deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-pink-for-gradients) 100%
  );
}

.trialBadgeGradientTier0_e62f9d {
  background-image: linear-gradient(
    90deg,
    var(--premium-tier-0-purple-for-gradients) 0%,
    var(--premium-tier-0-blue-for-gradients-2) 50%,
    var(--premium-tier-0-blue-for-gradients) 100%
  );
  color: var(--white-500);
}

.trialBadgeGradientTier2_e62f9d {
  background-image: linear-gradient(
    90deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-pink-for-gradients) 100%
  );
  color: var(--white-500);
}

.contentContainer_e62f9d {
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}

.countdownText_e62f9d {
  color: white;
  padding-top: 8px;
}

.footer_e62f9d {
  width: 100%;
  margin-top: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--background-tertiary);
}

.theme-dark .cancelButton_e62f9d {
    color: white;
  }

.cancelButton_e62f9d {
  margin-left: 24px;
}

.subscribeButton_e62f9d {
  margin-right: 24px;
}

.upsellButton_e62f9d {
  margin-top: 16px;
  width: 100%;
}

.divider_e62f9d {
  height: 1px;
  width: 100%;
  background-color: var(--background-modifier-accent);
}

@keyframes zoomInFromBottomRight_e62f9d {
  0% {
    transform: translateX(80%) translateY(80%) scaleX(20%) scaleY(20%);
    opacity: 0;
  }

  100% {
    transform: translateX(0) translateY(0) scaleX(100%) scaleY(100%);
    opacity: 1;
  }
}

.messageLengthUpsellContainer_e62f9d {
  background-color: var(--background-floating);
  border-radius: var(--radius-sm);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
}

.full-motion .messageLengthUpsellContainer_e62f9d.messageLengthUpsellAppearAnimation_e62f9d {
    animation-duration: 0.4s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-name: zoomInFromBottomRight_e62f9d;
  }

.messageLengthBrandedContainer_e62f9d {
  margin-bottom: 16px;
  max-width: 290px;
}

.messageLengthUpsellHeader_e62f9d {
  margin-top: 4px;
  margin-bottom: 16px;
}

.tryOutUpsellContainer_e62f9d {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.topRimPill_e62f9d {
  margin-top: -15px;
  padding-bottom: 16px;
}

.subscribeButtonWide_e62f9d {
  margin-top: 16px;
  width: 100%;
  height: 40px;
}

.countdownTextInSetting_e62f9d {
  color: var(--premium-tier-2-pink);
  padding-top: 8px;
}

.theme-light .countdownTextInSetting_e62f9d {
    color: var(--premium-tier-2-purple-for-gradients);
  }

.premiumTrialUpsellForModal_e62f9d {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.upsellClose_e62f9d {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--interactive-normal);
}

.upsellImage_e62f9d {
  height: 60px;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 16px;
}

.container__61733 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0));
  height: 50px;
}

.v2Container__61733 {
  justify-content: left;
  background: none;
}

.iconContainer__61733 {
  display: flex;
}

.icon__61733 + .icon__61733 {
  margin-left: -8px;
}

.mask__61733 {
  -webkit-mask-image: url(/assets/1f9b76e0279b91a4.svg);
          mask-image: url(/assets/1f9b76e0279b91a4.svg);
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.textContainer__61733 {
  margin-left: 9px;
  text-align: left;
}

.container__790b6 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background-tertiary);
  height: 44px;
  margin: 24px auto 16px;
  border-radius: 8px;
  border: 1px solid var(--interactive-muted);
  padding: 0 20px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 40%;
  max-width: 80%;
}

.iconContainer__790b6 {
  display: flex;
}

.icon__790b6 + .icon__790b6 {
  margin-left: -8px;
}

.textContainer__790b6 {
  margin-left: 8px;
  text-align: left;
}

/* stylelint-disable color-no-hex */
.root__3ec70 {
  text-align: center;
}
.root__3ec70 p {
  margin: 0 0 16px;
}
.contentContainer__3ec70 {
  display: flex;
  flex-direction: row;
}
.bodyContent__3ec70 {
  align-content: center;
}
.header__3ec70 {
  margin-bottom: 24px;
}
.enhancedHeader__3ec70 {
  padding: 0 32px;
}
.subHeader__3ec70 {
  padding: 0 32px;
}
.content__3ec70 {
  margin-bottom: 32px;
}
.enhancedContent__3ec70 {
  margin-bottom: 32px;
  padding: 0;
}
.footer__3ec70 {
  justify-content: space-between;
  align-items: center;
}
.enhancedFooter__3ec70 {
  background: var(--background-tertiary);
}
.primaryActions__3ec70 {
  display: flex;
  align-items: center;
}
.enhancedPrimaryActions__3ec70 {
  width: 100%;
  justify-content: space-between;
}
.secondaryAction__3ec70 {
  margin-right: 8px;
}
.enhancedSecondaryAction__3ec70 {
  color: var(--premium-nitro-pink-text);
}
.enhancedSecondaryAction__3ec70:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }
.closeButton__3ec70 {
  align-self: flex-end;
  margin: 12px;
  position: absolute;
  color: var(--interactive-active);
}
.artContainer__3ec70 {
  position: relative;
  margin: -48px auto 24px;
  width: 225px;
  border-radius: 8px;
}
.artContainerBoxShadow__3ec70 {
  box-shadow: var(--elevation-medium);
}
.art__3ec70 {
  width: 225px;
}
.sparkleBadge__3ec70 {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -18px;
  margin-left: -12px;
  display: block;
  width: 47px;
  height: 34px;
  filter: drop-shadow(0 1px 3px hsl(var(--black-500-hsl) / 0.3));
}
.newBadge__3ec70 {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}
.learnMoreLink__3ec70 {
  cursor: pointer;
  color: var(--text-link);
}
.context__3ec70 {
  margin-bottom: 16px;
}

.artContainer__8162d {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: -54px auto 32px;
  height: 108px;
  width: 180px;
}

.art__8162d {
  width: 100%;
  height: 100%;
}

.body__8162d {
  display: flex;
  flex-direction: column;
  gap: 16px;
  white-space: pre-line;
}

@keyframes uploadIconAnimateInLeft_dbca3c {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.6;
  }

  4.1667% {
    transform: translate3d(0, -1px, 0) rotate(0deg);
    opacity: 0.68;
  }

  30.8334% {
    transform: translate3d(-48px, -10px, 0) rotate(-36deg);
    opacity: 1;
  }

  58.3334% {
    transform: translate3d(-41px, -3px, 0) rotate(-28deg);
    opacity: 1;
  }

  75% {
    transform: translate3d(-45px, -8px, 0) rotate(-32deg);
    opacity: 1;
  }

  83.3334% {
    transform: translate3d(-44px, -7px, 0) rotate(-30.7deg);
    opacity: 1;
  }

  100% {
    transform: translate3d(-44px, -6px, 0) rotate(-30deg);
    opacity: 1;
  }
}

@keyframes uploadIconAnimateInMiddle_dbca3c {
  0% {
    transform: translate3d(0, 0, 0);
  }

  30.8334% {
    transform: translate3d(0, -10px, 0);
  }

  58.3334% {
    transform: translate3d(0, -3px, 0);
  }

  75% {
    transform: translate3d(0, -8px, 0);
  }

  83.3334% {
    transform: translate3d(0, -7px, 0);
  }

  100% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes uploadIconAnimateInRight_dbca3c {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.6;
  }

  4.1667% {
    transform: translate3d(0, -1px, 0) rotate(0deg);
    opacity: 0.68;
  }

  30.8334% {
    transform: translate3d(48px, -10px, 0) rotate(36deg);
    opacity: 1;
  }

  58.3334% {
    transform: translate3d(41px, -3px, 0) rotate(28deg);
    opacity: 1;
  }

  75% {
    transform: translate3d(45px, -8px, 0) rotate(32deg);
    opacity: 1;
  }

  83.3334% {
    transform: translate3d(44px, -7px, 0) rotate(30.7deg);
    opacity: 1;
  }

  100% {
    transform: translate3d(44px, -6px, 0) rotate(30deg);
    opacity: 1;
  }
}

@keyframes uploadModalShake_dbca3c {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes uploadTextFadeIn_dbca3c {
  0%,
  8.334% {
    transform: translate3d(0, -4px, 0);
    opacity: 0;
  }

  45.8%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes uploadModalBounceTransition_dbca3c {
  0% {
    transform: translate3d(0, 0, 0) scale(0.99, 0.99);
  }

  50% {
    transform: translate3d(0, 0, 0) scale(1.005, 1.005);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
}

@keyframes uploadModalBounce_dbca3c {
  0% {
    transform: translate3d(0, 0, 0) scale(0.99, 0.99);
  }

  15%,
  100% {
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }

  33.3334% {
    transform: translate3d(0, 0, 0) scale(1.005, 1.005);
  }

  54.1667% {
    transform: translate3d(0, 0, 0) scale(0.995, 0.995);
  }

  70.8334%,
  /* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
  100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
}

.uploadArea_dbca3c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  background: hsl(var(--black-500-hsl) / 0.8);
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 36px;
  color: var(--white-500);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2000;
}

.uploadArea_dbca3c strong {
    font-weight: 700;
  }

.uploadArea_dbca3c * {
    pointer-events: none;
  }

.uploadArea_dbca3c.droppable_dbca3c {
    visibility: visible;
  }

.uploadArea_dbca3c.uploadModalIn_dbca3c {
    opacity: 1;
  }

.uploadDropModal_dbca3c {
  animation: uploadIconAnimateIn_dbca3c 0.25s ease-in-out 0s forwards normal;
  width: 310px;
  height: 170px;
  display: flex;
  position: relative;
}

.uploadDropModal_dbca3c .title_dbca3c,
  .uploadDropModal_dbca3c .instructions_dbca3c {
    opacity: 0;
    /* this is small enough, it's not noticeable with Reduced Motion */
    /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
    animation: uploadTextFadeIn_dbca3c 1s ease 0.175s forwards normal;
  }

.uploadDropModal_dbca3c .instructions_dbca3c {
    animation-delay: 0.185s;
    animation-duration: 1.25s;
  }

.uploadDropModal_dbca3c.error_dbca3c {
    background-color: var(--red-430);
    transform: translate3d(0, 0, 0);
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    height: auto;
  }

.full-motion .uploadDropModal_dbca3c.error_dbca3c {
      animation: uploadModalShake_dbca3c 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

.uploadDropModal_dbca3c.error_dbca3c .instructions_dbca3c {
      margin-bottom: 15px;
    }

.uploadDropModal_dbca3c.error_dbca3c a {
      cursor: pointer;
      color: hsl(var(--white-500-hsl) / 0.7);
    }

.uploadDropModal_dbca3c.error_dbca3c a:hover {
        color: var(--white-500);
      }

.uploadDropModal_dbca3c.error_dbca3c .icon_dbca3c.one_dbca3c {
        animation-delay: 0.115s;
      }

.uploadDropModal_dbca3c.error_dbca3c .icon_dbca3c.two_dbca3c {
        animation-delay: 0.01s;
      }

.uploadDropModal_dbca3c.error_dbca3c .icon_dbca3c.three_dbca3c {
        animation-delay: 0.08s;
      }

.uploadDropModal_dbca3c .bgScale_dbca3c {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 10px;
    background: var(--brand-500);
  }

.full-motion .uploadDropModal_dbca3c .bgScale_dbca3c {
      animation: uploadModalBounce_dbca3c 0.8s ease 0s forwards normal;
    }

.uploadDropModal_dbca3c .inner_dbca3c {
    flex: 1;
    color: var(--white-500);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed hsl(var(--white-500-hsl) / 0.4);
    border-radius: 6px;
    width: 100%;
  }

.uploadDropModal_dbca3c .inner_dbca3c .title_dbca3c {
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      font-size: 22px;
      font-weight: 700;
      padding: 0 8px;
      width: 100%;
      color: var(--white-500);
      text-align: center;
      box-sizing: border-box;
    }

.uploadDropModal_dbca3c .inner_dbca3c .title_dbca3c strong {
        color: var(--white-500);
      }

.uploadDropModal_dbca3c .inner_dbca3c .instructions_dbca3c {
      text-align: center;
      font-size: 12px;
      line-height: 16px;
      margin-top: 4px;
      margin-left: 4px;
      color: var(--white-500);
    }

.visual-refresh .uploadDropModal_dbca3c.error_dbca3c {
      border-radius: var(--radius-md);
    }

.icons_dbca3c {
  position: relative;
  width: 100px;
  height: 60px;
}

.icon_dbca3c {
  flex-shrink: 0;
  width: 100px;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate3d(0, 0, 0);
}

/* And not in the upload attachment modal. */

.icon_dbca3c.one_dbca3c {
    position: absolute;
  }

/* We only want to absolutely position the icons when they're used during the upload drag and drop screen. */

.icon_dbca3c.two_dbca3c {
    position: absolute;
  }

.icon_dbca3c.three_dbca3c {
    position: absolute;
  }

.full-motion .icon_dbca3c.one_dbca3c {
    opacity: 0;
    animation: uploadIconAnimateInLeft_dbca3c 0.8s ease 0s forwards normal;
  }

.full-motion .icon_dbca3c.two_dbca3c {
    filter: drop-shadow(0 0 48px rgba(88, 101, 242, 0.5));
    animation: uploadIconAnimateInMiddle_dbca3c 0.8s ease 0s forwards normal;
  }

.full-motion .icon_dbca3c.three_dbca3c {
    opacity: 0;
    animation: uploadIconAnimateInRight_dbca3c 0.8s ease 0s forwards normal;
  }

.reduce-motion .icon_dbca3c.one_dbca3c {
    transform: translate3d(-44px, -6px, 0) rotate(-30deg);
  }

.reduce-motion .icon_dbca3c.two_dbca3c {
    transform: translate3d(0, -6px, 0);
  }

.reduce-motion .icon_dbca3c.three_dbca3c {
    transform: translate3d(44px, -6px, 0) rotate(30deg);
  }

.wrapOne_dbca3c {
  transform: translate3d(0, -70px, 0);
}

.wrapTwo_dbca3c {
  transform: translate3d(0, -80px, 0);
}

.wrapThree_dbca3c {
  transform: translate3d(0, -70px, 0);
}

.document_dbca3c {
  background-image: url(/assets/9ebe3ef63aafee84.svg);
}

.image_dbca3c {
  background-image: url(/assets/5dea307a4037ec4e.svg);
}

.code_dbca3c {
  background-image: url(/assets/f4bad77442422ded.svg);
}

.sparkleOne_dbca3c,
.sparkleTwo_dbca3c,
.lightOne_dbca3c,
.lightTwo_dbca3c,
.crossOne_dbca3c,
.crossTwo_dbca3c,
.popOne_dbca3c {
  animation-iteration-count: 1 !important;
}

.sparkleOne_dbca3c,
.sparkleTwo_dbca3c,
.lightOne_dbca3c,
.lightTwo_dbca3c,
.crossOne_dbca3c,
.crossTwo_dbca3c,
.popOne_dbca3c {
  opacity: 0.95;
  z-index: 1;
  /* keeping important around */
  /* stylelint-disable-next-line declaration-no-important */
}

.sparkleOne_dbca3c {
  bottom: -40px;
  right: -15px;
}

.sparkleTwo_dbca3c {
  top: -67px;
  right: 12px;
  animation-delay: 1.2s;
}

.lightOne_dbca3c {
  top: 24px;
  right: -35px;
  animation-delay: 0.4s;
}

.lightTwo_dbca3c {
  top: -32px;
  left: -10px;
  animation-delay: 0.61s;
}

.crossOne_dbca3c {
  right: 100px;
  bottom: -35px;
  animation-delay: 0.56s;
}

.crossTwo_dbca3c {
  left: -70px;
  bottom: 50px;
  animation-delay: 0.8s;
}

.popOne_dbca3c {
  bottom: -40px;
  left: 50px;
  animation-delay: 0.7s;
}

.uploadModal_dbca3c {
  width: 530px;
  min-height: 258px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  perspective: 1000;
  filter: blur(0);
}

.uploadModal_dbca3c .inner_dbca3c {
    flex: 1;
    margin: 4px;
    color: var(--header-primary);
  }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c {
      position: relative;
      height: 103px;
      display: flex;
      flex-direction: row;
    }

/* Expandable content like images will show the description below the preview
        instead of next to it */

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c.expandable_dbca3c {
        height: auto;
        height: initial;
        display: block;
      }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c.expandable_dbca3c .description_dbca3c {
          padding: 16px 16px 24px;
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c {
        flex-shrink: 0;
        width: 100px;
        height: 130px;
        margin-top: -42px;
        background-repeat: no-repeat;
        background-position: center;
      }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.image_dbca3c {
          /* Margins and sizing are handled by JS */
          background-color: var(--background-secondary);
          box-sizing: border-box;
          border-radius: 8px;
          -o-object-fit: contain;
             object-fit: contain;
          box-shadow: 0 2px 8px hsl(var(--black-500-hsl) / 0.4);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.video_dbca3c {
          background-image: url(/assets/98178bd2173d947a.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.acrobat_dbca3c {
          background-image: url(/assets/a42338c030af6d9c.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.ae_dbca3c {
          background-image: url(/assets/88b289225ff6142a.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.sketch_dbca3c {
          background-image: url(/assets/c9f0992f0ab98d49.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.ai_dbca3c {
          background-image: url(/assets/93636da24d7ab467.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.archive_dbca3c {
          background-image: url(/assets/f89b66e97ea52ba7.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.code_dbca3c {
          background-image: url(/assets/f4bad77442422ded.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.document_dbca3c {
          background-image: url(/assets/9ebe3ef63aafee84.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.ps_dbca3c,
        .uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.photoshop_dbca3c {
          background-image: url(/assets/1084490cf680dd7c.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.spreadsheet_dbca3c {
          background-image: url(/assets/b8ca4488a6d443bc.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.webcode_dbca3c {
          background-image: url(/assets/6e688b0c124e0ca8.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.audio_dbca3c {
          background-image: url(/assets/a6db1d05d35f13d0.svg);
          margin: -42px 8px 8px;
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .icon_dbca3c.unknown_dbca3c {
          background-image: url(/assets/94660b205108a49f.svg);
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .description_dbca3c {
        box-sizing: border-box;
        padding: 16px 16px 0 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .description_dbca3c .filename_dbca3c {
          font-size: 20px;
          font-weight: 700;
          height: 22px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .description_dbca3c .subtitle_dbca3c {
          color: var(--header-secondary);
          font-size: 16px;
          line-height: 20px;
          margin-top: 4px;
        }

.uploadModal_dbca3c .inner_dbca3c .file_dbca3c .description_dbca3c .filesize_dbca3c {
          margin-top: 6px;
          font-size: 10px;
          opacity: 0.6;
        }

.uploadModal_dbca3c .inner_dbca3c .comment_dbca3c {
      margin: 0 18px;
    }

.uploadModal_dbca3c .inner_dbca3c .comment_dbca3c .label_dbca3c {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 500;
      }

.uploadModal_dbca3c .inner_dbca3c .comment_dbca3c .label_dbca3c .optional_dbca3c {
          color: var(--header-secondary);
          margin-left: 5px;
        }

.uploadModal_dbca3c .inner_dbca3c .channelTextAreaUpload_dbca3c {
      margin-bottom: 18px;
    }

.uploadModal_dbca3c .hasSpoilers_dbca3c {
    display: flex;
  }

.uploadModal_dbca3c .footerRightAlign_dbca3c {
    margin-left: auto;
  }

.uploadModal_dbca3c .footer_dbca3c {
    border-radius: 0 0 5px 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 20px;
    z-index: 1;
    overflow-x: hidden;
    background-color: var(--background-secondary);
  }

.uploadModal_dbca3c .footer_dbca3c.hasSpoilers_dbca3c {
      justify-content: space-between;
      align-items: center;
    }

.visual-refresh .footer_dbca3c {
    background-color: transparent;
    background-color: initial;
  }

.cancelAllButton_dbca3c {
  margin: 0 auto 0 0;
}

.destination_dbca3c {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.destination_dbca3c strong {
    color: var(--header-primary);
    font-weight: 500;
  }

.modalPreview__51743 {
  width: 280px;
  box-sizing: border-box;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.smallDecorationPreview__51743 {
  margin-top: 16px;
}

.smallDecorationPreview__51743:first-child {
    margin-top: 0;
  }

.previewSections__51743 {
  display: flex;
  height: 208px;
  border: 2px solid transparent;
}

.decorationPreview__51743 {
  width: 208px;
  display: flex;
  background-color: var(--background-tertiary);
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.smallDecorationPreviewsContainer__51743 {
  margin-left: 12px;
  padding: 8px;
  background-color: var(--background-tertiary);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shopPreviewContainer__51743 {
  position: relative;

  display: flex;
  flex-direction: column;

  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--background-secondary), var(--background-secondary)) padding-box,
    var(--custom-premium-colors-premium-gradient-tier-2-diagonal) border-box;
}

.shopPreviewBanner__51743 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  min-height: 176px;
  background-color: var(--background-floating);
  display: flex;
  justify-content: center;
  align-items: center;
}

.shopPreviewTextContainer__51743 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.purchaseInfo__51743 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.icon_dfa67d {
  height: 24px;
  width: 24px;
  margin-bottom: 4px;
}

.notAllowedIcon_dfa67d {
  
  transform: rotate(90deg);
}

.show-redesigned-icons .notAllowedIcon_dfa67d {
  transform: none;
}

.shopIcon_dfa67d {
  
}

.presetDecorationImg_dfa67d {
  height: 64px;
  width: 64px;
}

.decorationGridItem_dfa67d {
  background-color: var(--background-tertiary);
  cursor: pointer;
  border-radius: 4px;
  transition: box-shadow 150ms ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--header-primary);
  position: relative;
}

.decorationGridItemChurned_dfa67d {
  opacity: 0.3;
}

.selected_dfa67d {
  box-shadow: inset 0 0 0 2px var(--brand-500);
  opacity: 1;
}

.list_dfa67d {
  max-height: 420px;
  padding-bottom: 16px;
  left: -12px;
}

.headings_dfa67d {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tooltip_dfa67d {
  min-width: 250px;
}

.tooltipInner_dfa67d {
  text-align: center;
}

.tooltipText_dfa67d {
  padding: 8px 32px;
}

.iconBadge_dfa67d {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 50%;
}

.newBadge_dfa67d {
  position: absolute;
  top: -4px;
  right: -4px;
  text-transform: uppercase;
}

.newBadgeText_dfa67d {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.show-redesigned-icons .newBadgeText_dfa67d {
  gap: var(--spacing-4);
}

.spinner_ced2f2 {
  margin: 8px;
  align-self: center;
}

.modal_ced2f2 {
  border-radius: var(--radius-sm);
}

.modalHeader_ced2f2 {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
}

.modalCloseButton_ced2f2 {
  align-self: flex-start;
  padding: 0;
}

.modalContent_ced2f2 {
  display: flex;
  padding: 0 16px;
}

.modalPreview_ced2f2 {
  margin-top: 24px;
}

.modalFooter_ced2f2 {
  padding: 16px;
}

.modalFooterShopButton_ced2f2 {
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
}

.visual-refresh .modalFooterShopButton_ced2f2 {
    background-clip: padding-box;
  }

.headerImage__802af {
  width: 180px;
  margin-bottom: 24px;
}

.header__802af {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
}

.title__802af {
  text-align: center;
}

.modalCloseButton__802af {
  position: absolute;
  top: 16px;
  right: 16px;
}

.content__802af {
  text-align: center;
  margin-bottom: 50px;
}

.modalFooter__802af {
  display: flex;
}

.rootContainer_b0ba57 {
  width: 440px;
}

.rootContainerLoading_b0ba57 {
  align-content: center;
  justify-content: center;
  place-content: center;
}

.claimedRootContainer_b0ba57 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.headerContainer_b0ba57 {
  grid-area: header;
  display: grid;
  grid-template: 'layer' 1fr / 1fr;
  background-color: var(--modal-footer-background);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.headerBackground_b0ba57 {
  grid-area: layer;
  width: 100%;
  max-width: 440px;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.headerForeground_b0ba57 {
  grid-area: layer;
  padding: 12px;

  display: grid;
  grid-template: 'layer' 1fr / 1fr;
}

.previewContainer_b0ba57 {
  justify-self: center;
  padding-top: 8px;
  padding-bottom: 28px;
}

.close_b0ba57 {
  align-self: start;
  justify-self: end;
  grid-area: layer;
}

.footerBody_b0ba57 {
  box-sizing: border-box;
  width: 100%;
  min-height: 200px;

  padding: 16px;
  text-align: center;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;

  gap: 8px;
}

.heading_b0ba57 {
  margin-bottom: 8px;
}

.text_b0ba57 {
  margin-bottom: 24px;
  max-width: 340px;
}

.confettiCanvas_b0ba57 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.additionalRedemptionInstructions_b0ba57 {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 24px;
  padding-top: 24px;
}

.sponsorLogo_b0ba57 {
  width: 144px;
}

.loadingIndicatorWrapper_b0ba57 {
  padding: 24px 0;
}

.headerImage__8da80 {
  position: absolute;
  top: -68px;
  left: 140px;
  width: 180px;
}

.header__8da80 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 75px;
}

.title__8da80 {
  text-align: center;
}

.modalCloseButton__8da80 {
  position: absolute;
  top: 16px;
  right: 16px;
}

.content__8da80 {
  padding-bottom: 16px;
}

.tooltip__8da80 {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--background-tertiary);
  box-shadow: var(--shadow-low);
  padding: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.infoFilledIcon__8da80 {
  color: var(--header-secondary);
  margin-right: 8px;
}

.tooltipText__8da80 {
  color: var(--header-secondary);
  text-align: center;
}

.modalFooter__8da80 {
  display: flex;
}

.wrapper__4413f {
  background: var(--bg-overlay-chat, var(--background-secondary));
}

.container__4413f {
  background-color: var(--background-modifier-selected);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.container__4413f .top__4413f {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

.container__4413f .left__4413f {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

.container__4413f .left__4413f .help__4413f {
      /* Allow spacing between reward tile */
      margin-right: 8px;
    }

.container__4413f .left__4413f .help__4413f:hover {
        cursor: pointer;
      }

.container__4413f .left__4413f .help__4413f .helpText__4413f {
        display: inline;
        margin-right: 3px;
      }

.container__4413f .left__4413f .help__4413f .helpIcon__4413f {
        vertical-align: middle;
      }

.container__4413f .right__4413f .imgWrapper__4413f {
      position: relative;
      height: 38px;
      width: 38px;
    }

.container__4413f .right__4413f .imgWrapper__4413f .imgUnderlay__4413f {
        position: absolute;
        top: 2.5px;
        right: 2.5px;
        bottom: 2.5px;
        left: 2.5px;
        background: linear-gradient(155deg, var(--teal-230) 11.08%, var(--yellow-260) 88.92%);
        filter: blur(20px);
        border-radius: 50%;
      }

.assetTile__4413f {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  z-index: 2;
}

.ctaButton__4413f {
  background-color: var(--background-modifier-selected);
  color: var(--text-normal);
  overflow: hidden;
}

.ctaButton__4413f:hover {
    background-color: var(--primary-500);
    color: var(--primary-100);
  }

.ctaButton__4413f:active {
    background-color: var(--primary-400);
    color: var(--primary-100);
  }

/* Animate from 0 to 20, pause from 20 to 100 */

@keyframes shine__4413f {
  0% {
    left: -12%;
  }

  20% {
    left: 110%;
  }

  100% {
    left: 110%;
  }
}

.full-motion .ctaButton__4413f:after {
    content: '';
    box-shadow:
      -8px 4px hsl(var(--white-500-hsl) / 0.5),
      8px -4px hsl(var(--white-500-hsl) / 0.5);
    position: absolute;
    width: 8px;
    height: 120%;
    transform: translateY(-4px) rotate(24deg);
    top: 0;
    bottom: 0;
    background-color: var(--white);
    opacity: 0.3;
    left: -12%;

    animation-name: shine__4413f;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }

.member__5d473 {
  position: relative;
  max-width: 224px;
  margin-left: 8px;
}

.memberInner__5d473 {
  padding-top: calc(var(--custom-member-list-item-avatar-decoration-padding) / 2);
  padding-bottom: calc(var(--custom-member-list-item-avatar-decoration-padding) / 2);
}

.offline__5d473 {
  opacity: 0.3;
}

.offline__5d473:hover {
  opacity: 1;
}

.icon__5d473 {
  flex: 0 0 auto;
  position: relative;
  top: 1px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ownerIcon__5d473 {
  
  color: var(--text-warning);
  margin-left: 4px;
}

.lostPermission__5d473 {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.premiumIcon__5d473 {
  
  color: var(--guild-boosting-pink);
  margin-left: 3px;
}

.placeholder__5d473 {
  
  padding: 4px 8px;
}

.botTag__5d473 {
  margin-left: 4px;
  flex: 0 0 auto;
}

.username__5d473 {
  display: flex;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.activity__5d473 {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--channels-default);
  font-weight: 500;
}

.activityText__5d473 {
  flex: 0 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.activityEmoji__5d473 {
  margin-right: 4px;
  width: 14px;
  height: 14px;
}

.name__5d473 {
  flex: 1 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

span.clanTag__5d473 {
  margin-top: 1px;
  margin-left: 4px;
  margin-bottom: 1px;
}

.visual-refresh .member__5d473 {
    max-width: calc(var(--custom-member-list-width) - 16px);
  }

.visual-refresh .memberInner__5d473 {
    box-sizing: border-box;
    padding: var(--space-xxs) var(--space-16) var(--space-xxs) var(--space-xs);
    height: auto;
  }

.visual-refresh .activityText__5d473 {
    color: var(--text-secondary);
  }

.container__13cf1 {
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  color: var(--channels-default);
}

.text__13cf1 {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  font-family: var(--font-display);
  font-weight: 600;
}

.container_a9809a {
  position: relative;
}

.avatar_a9809a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatarHalo_a9809a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16);
  border-radius: 50%;
  background-color: var(--background-modifier-accent);
}

.avatarIconContainer_a9809a {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -8px;
  right: -8px;
  padding: var(--spacing-4);
  border-radius: var(--radius-round);
  /* stylelint-disable-next-line discord/var-validator */
  background-color: var(--profile-gradient-primary-color);
  overflow: hidden;
}

:root {
  --custom-user-profile-banner-height: 0;
  --custom-user-profile-theme-padding: 0;
}

  :root .biteSize_c0bea0 {
    --custom-user-profile-banner-height: 105px;
  }

  :root .fullSize_c0bea0 {
    --custom-user-profile-banner-height: 210px;
  }

  :root .panel_c0bea0 {
    --custom-user-profile-banner-height: 120px;
  }

  :root .custom-profile-theme.biteSize_c0bea0,
    :root .custom-profile-theme.fullSize_c0bea0 {
      --custom-user-profile-theme-padding: 4px;
    }

:where(.outer_c0bea0) {
  position: relative;
  overflow: hidden;
  background: var(--background-secondary-alt);
}

:where(.outer_c0bea0).biteSize_c0bea0 {
    width: 300px;
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-high);
    /* NOTE(amadeus): This is to ensure that the user popout can never grow beyond the size of the screen and cause weird overflow issues */
    max-height: calc(100vh - 20px);
  }

:where(.outer_c0bea0).fullSize_c0bea0 {
    width: 600px;
    height: 780px;
    border-radius: var(--radius-sm);
  }

:where(.outer_c0bea0).panel_c0bea0 {
    width: 340px;
    height: 100%;
    overflow: visible;
    overflow: initial;
  }

:where(.outer_c0bea0).custom-profile-theme {
    /* stylelint-disable-next-line discord/var-validator */
    background: linear-gradient(var(--profile-gradient-primary-color), var(--profile-gradient-secondary-color));
    padding: 0;
    padding: var(--custom-user-profile-theme-padding);
  }

.inner_c0bea0 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border-radius: var(--radius-xs);
}

.inner_c0bea0.biteSize_c0bea0 {
    gap: 8px;
    padding-bottom: 4px;
    background: var(--bg-surface-overlay);
  }

.inner_c0bea0.fullSize_c0bea0 {
    height: 100%;
    background: var(--bg-surface-overlay);
  }

.inner_c0bea0.fullSize_c0bea0:before {
      border-radius: var(--radius-xs);
      height: calc(100% - 8px);
      width: calc(100% - 8px);
    }

.inner_c0bea0.panel_c0bea0 {
    height: 100%;
    border-radius: 0;
  }

.inner_c0bea0.panel_c0bea0:before {
      height: 100%;
      width: 100%;
    }

.custom-profile-theme .inner_c0bea0 {
    /* stylelint-disable discord/var-validator */
    --profile-gradient-start: color-mix(
      in oklab,
      var(--profile-gradient-overlay-color) 100%,
      var(--profile-gradient-primary-color)
    );
    --profile-gradient-end: color-mix(
      in oklab,
      var(--profile-gradient-overlay-color) 100%,
      var(--profile-gradient-secondary-color)
    );

    background: linear-gradient(
      color-mix(
      in oklab,
      var(--profile-gradient-overlay-color) 100%,
      var(--profile-gradient-primary-color)
    ),
      color-mix(
      in oklab,
      var(--profile-gradient-overlay-color) 100%,
      var(--profile-gradient-primary-color)
    ) 0,
      color-mix(
      in oklab,
      var(--profile-gradient-overlay-color) 100%,
      var(--profile-gradient-secondary-color)
    )
    );

    background: linear-gradient(
      var(--profile-gradient-start),
      var(--profile-gradient-start) var(--custom-user-profile-banner-height),
      var(--profile-gradient-end)
    );
    /* stylelint-enable discord/var-validator */
  }

:where(.overlay_c0bea0) {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
  background: var(--bg-mod-faint);
}

.theme-dark.custom-profile-theme :where(.overlay_c0bea0) {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-5));
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

.theme-light.custom-profile-theme :where(.overlay_c0bea0) {
    background: rgb(var(--bg-overlay-color) / 0.4);
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

:where(.overlay_c0bea0) *::-webkit-scrollbar-thumb {
      /* stylelint-disable-next-line discord/var-validator */
      background-color: var(--profile-body-divider-color);
    }

/**
   * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
   * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
   * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
   */

.no-webkit-scrollbar :where(.overlay_c0bea0) * {
      /* stylelint-disable-next-line discord/var-validator */
      scrollbar-color: var(--profile-body-divider-color) var(--scrollbar-thin-track);
    }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .outer_c0bea0.biteSize_c0bea0,
  .enable-forced-colors .outer_c0bea0.fullSize_c0bea0,
  .enable-forced-colors .inner_c0bea0.biteSize_c0bea0,
  .enable-forced-colors .inner_c0bea0.fullSize_c0bea0 {
    border: 2px solid CanvasText;
  }

.enable-forced-colors .outer_c0bea0:before,
  .enable-forced-colors .overlay_c0bea0 {
    background-color: Canvas;
  }

:where(.button_fb7f94).icon_fb7f94 {
    width: var(--custom-button-button-sm-height);
    height: var(--custom-button-button-sm-height);
    padding: 0;
  }
  :where(.button_fb7f94).hover_fb7f94,
  :where(.button_fb7f94).banner_fb7f94 {
    border-radius: var(--radius-round);
  }
  :where(.button_fb7f94).textBanner_fb7f94 {
    border-radius: var(--radius-xxl);
    padding: 2px 12px;
  }
  :where(.button_fb7f94).hover_fb7f94 {
    width: 16px;
    height: 16px;
    opacity: 0;
  }
  :where(.button_fb7f94).hover_fb7f94.visible_fb7f94,
    :where(.button_fb7f94).hover_fb7f94:focus-visible {
      opacity: 1;
    }

:not(.keyboard-mode).full-motion :where(.button_fb7f94).hover_fb7f94 {
    transition: opacity var(--custom-button-transition-duration) ease;
  }

:where(.buttonInner_fb7f94) {
  display: flex;
  align-items: center;
  gap: 4px;
}

:where(.buttonInner_fb7f94).icon_fb7f94 {
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
  }

.custom-profile-theme .themeColor_fb7f94 {
    transition: background var(--custom-button-transition-duration) ease-in-out;
  }

.custom-profile-theme .themeColor_fb7f94:disabled,
    .custom-profile-theme .themeColor_fb7f94[aria-disabled='true'] {
      opacity: 0.5;
    }

.custom-profile-theme .themeColor_fb7f94.primary_fb7f94 {
    color: var(--white-500);
    /* stylelint-disable-next-line discord/var-validator */
    background: var(--profile-gradient-button-color);
  }

.custom-profile-theme .themeColor_fb7f94.primary_fb7f94:hover {
      /* stylelint-disable-next-line discord/var-validator */
      background: color-mix(in srgb, var(--profile-gradient-button-color) 80%, transparent);
    }

.custom-profile-theme .themeColor_fb7f94.primary_fb7f94:active {
      /* stylelint-disable-next-line discord/var-validator */
      background: color-mix(in srgb, var(--profile-gradient-button-color) 90%, transparent);
    }

.custom-profile-theme.theme-dark .themeColor_fb7f94.secondary_fb7f94 {
    color: var(--interactive-active);
    background: rgba(var(--bg-overlay-color-inverse) / 0.24);
  }

.custom-profile-theme.theme-dark .themeColor_fb7f94.secondary_fb7f94:hover {
      background: rgb(var(--bg-overlay-color-inverse) / 0.3);
    }

.custom-profile-theme.theme-dark .themeColor_fb7f94.secondary_fb7f94:active {
      background: rgb(var(--bg-overlay-color-inverse) / 0.34);
    }

.custom-profile-theme.theme-light .themeColor_fb7f94.secondary_fb7f94 {
    color: var(--interactive-active);
    background: rgb(var(--bg-overlay-color) / 0.72);
  }

.custom-profile-theme.theme-light .themeColor_fb7f94.secondary_fb7f94:hover {
      background: rgb(var(--bg-overlay-color) / 0.68);
    }

.custom-profile-theme.theme-light .themeColor_fb7f94.secondary_fb7f94:active {
      background: rgb(var(--bg-overlay-color) / 0.62);
    }

.hoverColor_fb7f94 {
  color: var(--interactive-normal);
}

.hoverColor_fb7f94:hover {
    color: var(--interactive-hover);
  }

.hoverColor_fb7f94:active {
    color: var(--interactive-active);
  }

.bannerColor_fb7f94 {
  background: var(--redesign-button-overlay-alpha-background);
  color: var(--white);
}

.bannerColor_fb7f94:hover,
  .bannerColor_fb7f94:active {
    background: var(--redesign-button-overlay-alpha-pressed-background);
  }

.bannerColor_fb7f94:disabled,
  .bannerColor_fb7f94[aria-disabled='true'] {
    opacity: 0.5;
  }

.preview__37357 {
  position: relative;
  width: 100%;
  height: 100%;
}

.previewForCollected__37357 {
  
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: top;
     object-position: top;
  opacity: 0.3;
  filter: blur(5px);
}

.container__37357 {
  position: relative;
}

.header__37357 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.headerContainer__37357 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
}

.centeredButton__37357 {
  margin-top: var(--spacing-16);
  width: 100%;
  z-index: 1;
}

.body__37357 {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bodySpacing__37357 {
  gap: var(--spacing-16);
}

.avatar__75742 {
  border-radius: var(--radius-round);
  position: absolute;
}

  .avatar__75742.biteSize__75742 {
    z-index: 0;
    top: 61px; /* banner size - (avatar size + avatar stroke) / 2 */
    left: 16px;
  }

  .custom-profile-theme .avatar__75742.biteSize__75742 {
      top: 57px; /* banner size - (avatar size + avatar stroke) / 2 - profile theme border width */
      left: 12px;
    }

  .avatar__75742.fullSize__75742 {
    top: -68px; /* avatar radius * -1 == (avatar size / 2 + avatar stroke) * -1 */
    left: 24px;
  }

  .avatar__75742.panel__75742 {
    top: 72px; /* banner size - (avatar size + avatar stroke) / 2 */
    left: 16px;
  }

  .avatar__75742.withReactReply__75742 {
    position: static;
  }

  .avatar__75742.hoisted__75742 {
    z-index: 4;
    pointer-events: none;
  }

.clickable__75742 {
  cursor: pointer;
}

.overlay__75742:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-round);
  background-color: var(--black-500);
  opacity: 0;
}

.full-motion .overlay__75742:after {
    transition: opacity var(--custom-button-transition-duration) ease;
  }

.clickable__75742:hover .overlay__75742:after {
    opacity: 0.4;
  }

.focusRing__75742 {
  border-radius: var(--radius-round);
}

:where(.banner__68edb) {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: background-color 0.1s;
  border-radius: 4px 4px 0 0;
}

  :where(.banner__68edb):before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid var(--border-faint);
  }

  :where(.banner__68edb):hover .gifTag__68edb {
    opacity: 0;
  }

.gifTag__68edb {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.gifTag__68edb .custom-profile-theme {
    top: 16px;
    left: 16px;
  }

.mask__68edb {
  z-index: 0;
  contain: paint;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .banner__68edb {
    forced-color-adjust: none;
  }

.cell_f70307 {
  align-items: center;
  display: flex;
  border-bottom: 1px solid var(--background-modifier-accent);
  padding: var(--spacing-16) 0;
  gap: var(--spacing-16);
}

.cell_f70307:last-child {
  border-bottom: none;
}

.iconContainer_f70307 {
  display: flex;
  justify-content: center;
  height: var(--spacing-24);
  width: var(--spacing-24);
}

.icon_f70307 {
  height: var(--spacing-24);
  width: var(--spacing-24);
  color: var(--icon-secondary);
}

.textContainer_f70307 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.number_f70307 {
  border-radius: var(--radius-round);
  background-color: var(--bg-mod-subtle);

  display: flex;
  min-width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cellGroup_f70307 {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cellGroup_f70307 .content_f70307 {
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--radius-sm);
  }

.visual-refresh .cell_f70307 {
    border-color: var(--border-faint);
  }

.row__19fd1 {
  align-items: center;
  display: flex;
  border-bottom: 1px solid var(--background-modifier-accent);
  margin: 0 var(--spacing-16);
  padding: var(--spacing-16) 0;
  gap: var(--spacing-16);
}

.row__19fd1:last-child {
  border-bottom: none;
}

.iconContainer__19fd1 {
  display: flex;
  justify-content: center;
  height: var(--spacing-24);
  width: var(--spacing-24);
}

.icon__19fd1 {
  height: var(--spacing-24);
  width: var(--spacing-24);
  color: var(--icon-secondary);
}

.textContainer__19fd1 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.button__19fd1 {
  min-width: 75px;
  margin-left: auto;
  flex-shrink: 0;
}

.number__19fd1 {
  border-radius: var(--radius-round);
  background-color: var(--bg-mod-subtle);

  display: flex;
  min-width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tableRowGroup__19fd1 {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.tableRowGroup__19fd1 .content__19fd1 {
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    background-color: var(--background-secondary);
  }

.visual-refresh .row__19fd1 {
    border-color: var(--border-faint);
  }

.visual-refresh .content__19fd1 {
    border: 1px solid var(--border-faint);
  }

.infoGroup_d2b61f {
  border-radius: var(--radius-sm);
  background-color: var(--background-secondary);
  width: 100%;
}

.container_ea1e0b {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.confirmationHeader_ea1e0b {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--spacing-16);
  text-align: center;
}

.otherOptions_ea1e0b {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.row_ea1e0b {
  border-radius: var(--radius-sm);
  background-color: var(--background-secondary);
  width: 100%;
}

.featureGuide_ea1e0b {
  text-align: center;
}

.iconContainer_ea1e0b {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.icon_ea1e0b {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  padding: var(--spacing-4);
  bottom: -8px;
  right: -8px;
  /* Intentionally set so the circle looks like a cutout */
  background-color: var(--modal-background);
  border-radius: var(--radius-round);
}

html:not(.visual-refresh) .container_ea1e0b {
    padding: var(--spacing-16);
  }

.visual-refresh .icon_ea1e0b {
    /* Intentionally set so the circle looks like a cutout */
    background-color: var(--background-surface-high);
  }

.label__202d8 {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.actionButton__5d9ef {
  margin-left: auto;
}

.popoutWrapper_ef4a91 {
  position: relative;
  left: -30px;
  width: 200px;
  display: flex;
  max-height: 40vh;
}

.scroller_ef4a91 {
  border-radius: 4px;
  padding: 8px 16px;
  background-color: var(--background-floating);
}

.avatars_ef4a91 {
  display: flex;
  flex-grow: 0;
  align-items: center;
  position: relative;
}

.avatar_ef4a91 {
  margin-left: -2px;
  -webkit-mask: url(/assets/38fe464a6fea7d0e.svg);
          mask: url(/assets/38fe464a6fea7d0e.svg);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  mask-type: alpha;
}

.avatar_ef4a91:first-child {
    margin-left: 0;
  }

.avatar_ef4a91:last-child {
    -webkit-mask: none;
            mask: none;
  }

.overflow_ef4a91 {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 8px;

  width: auto;
  height: 24px;
  border-radius: 16px;
  background-color: var(--background-tertiary);
}

.container_f37514 {
  margin-bottom: 24px;
  margin-top: 0;
}

.visual-refresh .container_f37514 {
    margin-bottom: 16px;
  }

.appContainer_f37514 {
  padding: 12px;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
}

.header_f37514 {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.appInfo_f37514 {
  display: flex;
}

.appIconMask_f37514 {
  margin-right: 16px;
  min-width: 32px;
  min-height: 32px;
}

.appIcon_f37514 {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.textContainer_f37514 {
  display: flex;
  flex-direction: column;
}

.guildStack_f37514 {
  margin-top: 4px;
}

.container__0e308 {
  margin-bottom: 24px;
}

.breadcrumbContainer__0e308 {
  display: flex;
  position: relative;
}

.breadcrumbContainer__0e308:not(:last-child) {
    margin-bottom: 8px;
  }

.breadcrumbContainer__0e308:not(:last-child):after {
      position: absolute;
      background-color: var(--background-tertiary);
      width: 2px;
      height: calc(100% + 4px);
      top: 0.5em;
      left: 1px;
      content: '';
      z-index: -1;
    }

.breadcrumbDot__0e308 {
  margin-right: 8px;
  border-radius: 2px;
  width: 4px;
  height: 4px;
  background-color: var(--brand-500);
  flex-shrink: 0;
  position: relative;
  top: 0.5em;
}

.breadcrumbsHeader__0e308 {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.breadcrumbText__0e308 {
  overflow: hidden;
  /* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix */
}

.container__527b1 {
  min-height: 240px;
  max-height: 70vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.remediationElementsHeader__527b1 {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.closeButton__527b1 {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.header__527b1 {
  padding: 32px 24px 16px;
}

.body__527b1 {
  padding: 8px 24px 16px;
}

.visual-refresh .body__527b1 {
    padding-top: 16px;
  }

.visual-refresh .closeButton__527b1 {
    padding: 0;
    top: 16px;
    right: 16px;
  }

.visual-refresh .header__527b1 {
    padding: 40px 24px 8px;
    align-items: flex-start;
  }

.visual-refresh .listContainer__527b1 .listElement__527b1 {
      background-color: var(--background-surface-higher);
      margin-bottom: 0;
      padding: 0;
      border-radius: 0;
      border-bottom: solid 1px var(--background-modifier-hover);
    }

.visual-refresh .listContainer__527b1 .listElement__527b1:hover {
        background-color: var(--background-modifier-hover);
      }

.visual-refresh .listContainer__527b1 .listElement__527b1:active {
        background-color: var(--background-modifier-active);
      }

.visual-refresh .listContainer__527b1 .listElementWrapper__527b1:first-of-type > .listElement__527b1:first-of-type {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

.visual-refresh .listContainer__527b1 .listElementWrapper__527b1:last-of-type > .listElement__527b1:last-of-type {
      border-bottom: none;
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 12px;
    }

.childButton__3ed08 {
  display: flex;
  flex-direction: row;
  align-items: center;

  cursor: pointer;

  margin-bottom: 8px;
  padding: 0;
  border-radius: 4px;
  background-color: var(--background-secondary);

  min-height: 64px;
}

  .childButton__3ed08:hover {
    background-color: var(--background-modifier-hover);
  }

  .keyboard-mode .childButton__3ed08:focus {
    background-color: var(--background-modifier-selected);
  }

  .childButton__3ed08:active {
    background-color: var(--background-modifier-active);
  }

.childText__3ed08 {
  flex: 1;
  margin: 8px 0 8px 16px;
}

.childIcon__3ed08 {
  color: var(--interactive-normal);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 16px 0 8px;
}

.externalLinkWrapper__3ed08 {
  padding-top: 8px;
}

.required__287ee {
  color: var(--status-danger);
  padding-left: 4px;
}

.marginReset_fd297e {
  margin-top: 0;
  margin-bottom: 0;
}

.marginTop4_fd297e {
  margin-top: var(--custom-margin-margin-x-small);
}

.marginBottom4_fd297e {
  margin-bottom: var(--custom-margin-margin-x-small);
}

.marginTop8_fd297e {
  margin-top: var(--custom-margin-margin-small);
}

.marginBottom8_fd297e {
  margin-bottom: var(--custom-margin-margin-small);
}

.marginTop20_fd297e {
  margin-top: var(--custom-margin-margin-medium);
}

.marginBottom20_fd297e {
  margin-bottom: var(--custom-margin-margin-medium);
}

.marginTop40_fd297e {
  margin-top: var(--custom-margin-margin-large);
}

.marginBottom40_fd297e {
  margin-bottom: var(--custom-margin-margin-large);
}

.marginTop60_fd297e {
  margin-top: var(--custom-margin-margin-x-large);
}

.marginBottom60_fd297e {
  margin-bottom: var(--custom-margin-margin-x-large);
}

.marginCenterHorz_fd297e {
  margin-left: auto;
  margin-right: auto;
}

.marginLeft8_fd297e {
  margin-left: var(--custom-margin-margin-small);
}

.errorContainer__07ded {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--status-danger);
  padding: 8px 32px 8px 8px;
  border-radius: 4px;

  display: flex;
  font-weight: 600;
  box-shadow: var(--elevation-high);
}

.errorIcon__07ded {
  color: var(--white-500);
  margin-right: 8px;
  flex-grow: 0;
}

.closeIcon__07ded {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 16px;
  width: 16px;

  background: url(/assets/26a3dd69161dbf47.svg) no-repeat;
  background-position: 50% 55%;
  background-size: 10px 10px;

  cursor: pointer;
  color: var(--white-500);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.closeIcon__07ded:hover {
    opacity: 1;
  }

.errorText__07ded {
  color: var(--white-500);
}

.header_b1585f {
  margin-bottom: 8px;
}

.linkButton_b1585f {
  display: flex;
  flex-direction: row;
  align-items: center;

  cursor: pointer;

  margin-bottom: 8px;
  padding: 0;
  border-radius: 4px;
  background-color: var(--background-secondary);

  min-height: 64px;
}

.linkButton_b1585f:hover {
    background-color: var(--background-modifier-hover);
  }

.keyboard-mode .linkButton_b1585f:focus {
    background-color: var(--background-modifier-selected);
  }

.linkButton_b1585f:active {
    background-color: var(--background-modifier-active);
  }

.linkTextContainer_b1585f {
  flex: 1;
  margin: 8px 0 8px 16px;
}

.linkIcon_b1585f {
  color: var(--interactive-normal);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0 16px 0 8px;
}

.linksContainer_b1585f {
  margin-bottom: 24px;
}

.visual-refresh .linksContainer_b1585f {
    margin: 0;
  }

.required__1cbbf {
  color: var(--status-danger);
  padding-left: 4px;
}

.container_f0c729 {
  margin-bottom: 24px;
}

.guildContainer_f0c729 {
  padding: 16px;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
}

.header_f0c729 {
  margin-bottom: 8px;
  color: var(--header-secondary);
  text-transform: uppercase;
}

.hubInfo_f0c729 {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.hubIcon_f0c729 {
  margin-right: 8px;
}

.container__14de9 {
  margin-bottom: 24px;
}

.guildContainer__14de9 {
  padding: 16px;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
}

.header__14de9 {
  margin-bottom: 8px;
  color: var(--header-secondary);
  text-transform: uppercase;
}

.guildInfo__14de9 {
  display: flex;
  align-items: center;
}

.guildIconMask__14de9 {
  margin-right: 8px;
  min-width: 32px;
  min-height: 32px;
}

.guildIcon__14de9 {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.container__631c2 {
  margin-bottom: 24px;
}

.guildContainer__631c2 {
  padding: 16px;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
}

.header__631c2 {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.guildInfo__631c2 {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.guildIcon__631c2 {
  margin-right: 8px;
}

.headerContainer_bdedd9 {
  padding: 0;
  text-align: left;
}

  .headerContainer_bdedd9 > :not(:last-child) {
    margin-bottom: 8px;
  }

.infoBox_fbc3be {
  margin-top: 16px;
  font-weight: 400;
}

@use postcss-pxtorem;

/* export for SystemMessages to re-use */

.wrapper_c19a55 {
  position: relative;
  word-wrap: break-word;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  flex: 0 0 auto;
  padding-right: var(--custom-message-margin-horizontal);
  /* 22px */
  min-height: 1.375rem;
}

.compact_c19a55.wrapper_c19a55 {
  padding-top: var(--custom-message-padding-vertical-container-compact);
  padding-bottom: var(--custom-message-padding-vertical-container-compact);
  padding-left: var(--custom-message-margin-compact-indent);
}

.cozy_c19a55.wrapper_c19a55 {
  padding-top: var(--custom-message-spacing-vertical-container-cozy);
  padding-bottom: var(--custom-message-spacing-vertical-container-cozy);
  padding-left: var(--custom-message-margin-left-content-cozy);
}

.cozy_c19a55.wrapper_c19a55.contentOnly_c19a55,
.compact_c19a55.wrapper_c19a55.contentOnly_c19a55 {
  padding-left: 16px;
}

.repliedMessage_c19a55 {
  /*
   * Spacing between the reply spine and both:
   * - the user's avatar (or the timestamp) on the bottom end, and
   * - the reply content on the right end
   */
  --reply-spacing: 4px;

  display: flex;
  align-items: center;
  color: var(--header-secondary);
  font-size: 0.875rem;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: var(--custom-message-reply-message-preview-line-height);
  position: relative;

  /* Don't collapse whtiespace in username and message content. */
  white-space: pre;

  /* Don't allow selection because this is all clickable, and also should not show up when logs are copied. */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.threadMessageAccessory_c19a55,
.executedCommand_c19a55 {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  height: 18px;
  line-height: 1.125rem;
  min-width: 0;
}

.repliedMessage_c19a55.latin12CompactTimeStamp_c19a55 {
  --timestamp-width: 2.25rem;
}

.repliedMessage_c19a55.latin24CompactTimeStamp_c19a55 {
  --timestamp-width: 3.1rem;
}

.repliedMessage_c19a55.asianCompactTimeStamp_c19a55 {
  --timestamp-width: 4.25rem;
}

.compact_c19a55 .repliedMessage_c19a55 {
  --text-indent: calc((var(--custom-message-margin-compact-indent) - 1rem) * -1);

  /*
   * In compact mode, the default horizontal position of this element lines up with where normal message text would be
   * indented after wrapping lines, but that's not what we want. We want the left side of this element to line up with
   * the left side of the username on the message, which was bumped further left by using a negative text-indent and a
   * fixed width timestamp whose size is based on timestamp format.
   *
   * We'll emulate the extra bump left by using a negative left margin.
   */

  /* stylelint-disable-next-line discord/var-validator */
  margin-left: calc(var(--timestamp-width) + var(--custom-message-meta-space) + ((var(--custom-message-margin-compact-indent) - 1rem) * -1));
  margin-left: calc(var(--timestamp-width) + var(--custom-message-meta-space) + calc((var(--custom-message-margin-compact-indent) - 1rem) * -1));
  margin-left: calc(var(--timestamp-width) + var(--custom-message-meta-space) + var(--text-indent));
  padding-left: var(--custom-message-reply-indent);
}

/* match .compact .contents text-indent */

.compact_c19a55 .repliedMessage_c19a55 .contextCommandMessage_c19a55 {
    /*
     * For ContextCommand messages we use the RepliedMessage system to render a preview of the message
     * that the command targeted. Given the RepliedMessage is basically rendering as a "nested" component
     * within the overall command header it does not need any of the text-indent behavior as the command
     * header itself is handling this spacing from the spline.
     */
    --text-indent: 0;
  }

.cozy_c19a55 .repliedMessage_c19a55 {
  /* stylelint-disable-next-line discord/var-validator */
  margin-bottom: var(--reply-spacing);
}

.cozy_c19a55 .messageSpine_c19a55:before,
.cozy_c19a55 .repliedMessageClickableSpine_c19a55 {
  /* Width of user avatar */
  --avatar-size: 40px; /* match .avatar width */

  /* Space between avatar and text content */
  --gutter: var(--custom-message-margin-horizontal);
}

.a11y-font-scaled-down .cozy_c19a55 .messageSpine_c19a55:before,
.a11y-font-scaled-down .cozy_c19a55 .repliedMessageClickableSpine_c19a55 {
  /* Width of user avatar */
  --avatar-size: 2.5rem; /* match .a11y-font-scaled-down .avatar width */

  /*
   * Computing the --gutter size in this case is a little more complex, so we'll add a few more variables
   * to make it clearer to follow.
   */

  /* The amount of space from the farthest left side of the chat area to the beginning of the text content. */
  --wrapper-padding-left: 4.5rem; /* match .a11y-font-scaled-down .cozy.wrapper padding-left */

  /* The horizontal position of the avatar relative to the farthest left side of the chat area. */
  --avatar-position-left: 1rem; /* match .a11y-font-scaled-down .avatar left */

  /* Space between avatar and text content */
  /* stylelint-disable-next-line discord/var-validator */
  --gutter: calc(var(--wrapper-padding-left) - var(--avatar-position-left) - var(--avatar-size));
}

.compact_c19a55 .messageSpine_c19a55:before,
.compact_c19a55 .repliedMessageClickableSpine_c19a55 {
  /* In compact mode, there is no avatar, but in terms of layout, the timestamp is the replacement. */
  /* stylelint-disable-next-line discord/var-validator */
  --avatar-size: var(--timestamp-width);

  --gutter: var(--custom-message-meta-space); /* match .compact .timestamp margin-right */
}

.messageSpine_c19a55:before,
.repliedMessageClickableSpine_c19a55 {
  /* Lots of custom CSS vars here. Disabling stylelint rule since it's getting in the way. */
  /* stylelint-disable discord/var-validator */
  --spine-width: 2px;

  content: '';
  display: block;

  position: absolute;
  box-sizing: border-box;
  top: 50%;
  right: 100%;
  bottom: 0;

  /*
   * We want to go from the center of the avatar (--avatar-size / 2) to the beginning of the text content (--gutter).
   * Negate all of that since we're pushing further left from the container's left side.
   */
  left: calc(-1 * (var(--avatar-size) / 2 + var(--gutter)));

  /* Add back the gap between the spine and the reply content. */
  margin-right: var(--reply-spacing);

  /* Add half the spine width to visually center the lines. */
  margin-top: calc(-1 * 2px / 2);
  margin-top: calc(-1 * var(--spine-width) / 2);
  margin-left: calc(-1 * 2px / 2);
  margin-left: calc(-1 * var(--spine-width) / 2);

  /*
   * The avatar is actually offset further down compared to the edge of the container,
   * so let's also extend downwards to maintain consistent spacing.
   */
  margin-bottom: calc(var(--custom-message-spacing-vertical-container-cozy) - 4px); /* negative of .avatar margin-top */

  border-color: var(--spine-default);
  border-width: 2px 0 0 2px;
  border-width: var(--spine-width) 0 0 var(--spine-width);
  border-style: solid;
  border-top-left-radius: 6px;
  /* stylelint-enable discord/var-validator */
}

.compact_c19a55 .messageSpine_c19a55:before, .compact_c19a55 .repliedMessageClickableSpine_c19a55 {
    right: calc(100% - var(--custom-message-reply-indent));
  }

.repliedMessageClickableSpine_c19a55 {
  cursor: pointer;
  transition: border 50ms;
}

.repliedMessageClickableSpine_c19a55:hover {
    border-color: var(--interactive-normal);
  }

.repliedMessageClickableSpine_c19a55:before {
  /* Extend spine clickable area */
  content: '';
  position: absolute;
  top: -10px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  cursor: pointer;
}

.repliedMessageClickableSpine_c19a55.repliedMessageContentHovered_c19a55 {
  border-color: var(--interactive-normal);
}

.threadMessageAccessoryAvatar_c19a55,
.replyAvatar_c19a55,
.replyBadge_c19a55,
.executedCommandAvatar_c19a55,
.replyChatIconContainer_c19a55 {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-right: var(--custom-message-meta-space);
}

.threadMessageAccessoryAvatar_c19a55 {
  margin-right: 8px;
}

.replyBadge_c19a55 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--header-secondary);
  background: var(--background-tertiary);
}

.replyIcon_c19a55 {
  /* 90% of 12x8 */
  width: 10.8px;
  height: 7.2px;
}

.clanTagChiplet_c19a55 {
  margin-right: 0;
  margin-left: 4px;
}

.compact_c19a55 .clanTagChiplet_c19a55 {
    display: inline;
    background: transparent;
    padding: 0;
    vertical-align: baseline;
  }

.compact_c19a55 .clanTagChiplet_c19a55 > span {
      background: var(--bg-mod-strong);
      padding: 1px 4px 0;
      border-radius: 4px;
    }

.compact_c19a55 .clanTagChiplet_c19a55:hover {
      background: transparent;
    }

.compact_c19a55 .clanTagChiplet_c19a55:hover > span {
        background: var(--bg-mod-faint);
      }

.userJoinSystemMessageIcon_c19a55 {
  width: 12px;
  height: 12px;
  margin-right: var(--custom-message-meta-space);
}

.ticketIcon_c19a55 {
  width: 12px;
  height: 12px;
  margin-right: var(--custom-message-meta-space);
}

.commandIcon_c19a55 {
  /* 90% of 6x10 */
  width: 5px;
  height: 9px;
}

.repliedMessage_c19a55 .username_c19a55,
.repliedMessage_c19a55 .clanTagChiplet_c19a55,
.repliedMessage_c19a55 .roleDot_c19a55,
.executedCommand_c19a55 .username_c19a55,
.executedCommand_c19a55 .clanTagChiplet_c19a55,
.executedCommand_c19a55 .applicationName_c19a55,
.executedCommand_c19a55 .commandName_c19a55,
.threadMessageAccessory_c19a55 .username_c19a55,
.threadMessageAccessory_c19a55 .clanTagChiplet_c19a55 {
  flex-shrink: 0;
  font-size: inherit;
  line-height: inherit;
  margin-right: var(--custom-message-meta-space);
  opacity: 0.64;
}

.repliedMessage_c19a55 .clanTagChiplet_c19a55,
.executedCommand_c19a55 .clanTagChiplet_c19a55,
.threadMessageAccessory_c19a55 .clanTagChiplet_c19a55 {
  margin-left: 0;
}

.executedCommand_c19a55 .username_c19a55,
.executedCommand_c19a55 .applicationName_c19a55,
.executedCommand_c19a55 .commandName_c19a55 {
  margin-right: 0;
}

.repliedMessage_c19a55 .botTag_c19a55,
.executedCommand_c19a55 .botTag_c19a55,
.threadMessageAccessory_c19a55 .botTag_c19a55 {
  top: 0;
}

.executedCommand_c19a55 .commandName_c19a55 {
  font-weight: 500;
  color: var(--text-link);
}

.executedCommand_c19a55 .appsIcon_c19a55 {
  margin-right: 3px;
}

.executedCommand_c19a55 .appLauncherOnboardingCommandName_c19a55 {
  font-weight: 500;
  color: var(--text-link);
  background-color: var(--mention-background);
  border-radius: 3px;
  padding: 0 2px;
}

.executedCommand_c19a55 .appLauncherOnboardingCommandName_c19a55:hover {
  color: var(--white-500);
  background-color: var(--brand-500);
}

.executedCommand_c19a55 .applicationName_c19a55 {
  font-weight: 500;
  color: var(--header-primary);
}

.executedCommand_c19a55 .targetUsername_c19a55,
.executedCommand_c19a55 .repliedMessage_c19a55 .username_c19a55 {
  flex-shrink: 3;
  text-overflow: ellipsis;
}

.executedCommand_c19a55 .repliedMessage_c19a55 {
  /* repliedMessage has some bottom margin by default, but that makes it offset here */
  margin-bottom: 0;
  min-width: 40px;
  padding-left: 0;
}

.executedCommand_c19a55 .repliedMessage_c19a55 .username_c19a55 {
    margin-right: 4px;
  }

.executedCommandSeparator_c19a55 {
  flex-shrink: 0;
  margin-right: 2px;
}

.repliedTextPreview_c19a55,
.threadMessageAccessoryPreview_c19a55 {
  flex: 0 1 auto;
  overflow: hidden;
}

.repliedTextPreview_c19a55 .repliedTextContent_c19a55 {
  display: -webkit-inline-box !important;
}

.repliedTextPreview_c19a55 .repliedTextContent_c19a55 {
  /*
    display: -webkit-inline-box is needed to use -webkit-line-clamp, and we fallback to inline if it's not supported
    Normal message content for compact mode overrides the display property to be inline and we need replies to
    maintain -webkit-inline-box so we have an "!important"
    */
  /* stylelint-disable value-no-vendor-prefix, declaration-no-important */
  /*noinspection CssInvalidPropertyValue*/
  /* stylelint-enable value-no-vendor-prefix, declaration-no-important */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;

  width: 100%;
}

.repliedTextPreview_c19a55 .repliedTextContent_c19a55 a {
    /* Necessary to override the anchor's break-word, which creates a giant gap between text and the trailing icon */
    word-break: break-all;
  }

.repliedTextPreview_c19a55 {
  /*
    repliedTextContent has -webkit-inline-box for clamping the content to 1 line, however its usage results
    in repliedTextPreview consuming more height than it should.

    To handle this, we use flex so that the preview container only consumes the exact height that its
    child (repliedTextContent) consumes
  */
  display: flex;

  /* Restrict our max height in case -webkit-inline-box/-webkit-line-clamp aren't supported */
  max-height: 2em;
}

.repliedTextPreview_c19a55 .emoji {
    width: 1.25em;
    height: 1.25em;
  }

.threadMessageAccessoryPreview_c19a55 {
  align-items: center;
  display: flex;
}

.repliedTextPreview_c19a55.clickable_c19a55 {
  cursor: pointer;
}

.repliedTextPreview_c19a55.clickable_c19a55:hover,
.repliedTextPreview_c19a55.repliedMessageClickableSpineHovered_c19a55 {
  color: var(--header-primary);
}

/* win specificity on MessageContent */

.repliedMessage_c19a55 .repliedTextPreview_c19a55 .repliedTextContent_c19a55,
.threadMessageAccessory_c19a55 .threadMessageAccessoryPreview_c19a55 .threadMessageAccessoryContent_c19a55 {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.threadMessageAccessory_c19a55 .threadMessageAccessoryPreview_c19a55 .threadMessageAccessoryContent_c19a55 {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.repliedMessage_c19a55 .repliedTextPreview_c19a55 .repliedTextContent_c19a55 code,
.threadMessageAccessory_c19a55 .threadMessageAccessoryPreview_c19a55 .threadMessageAccessoryContent_c19a55 code {
  white-space: pre;
}

.repliedTextContent_c19a55 {
  width: -moz-max-content;
  width: max-content;
}

.repliedTextPlaceholder_c19a55,
.threadMessageAccessoryPlaceholder_c19a55 {
  font-style: italic;
  padding-right: 2px;
}

.repliedTextContentTrailingIcon_c19a55,
.threadMessageAccessoryContentTrailingIcon_c19a55 {
  flex: 0 0 auto;
  margin-left: 4px;
}

.repliedTextContentLeadingIcon_c19a55,
.threadMessageAccessoryContentLeadingIcon_c19a55 {
  flex: 0 0 auto;
  margin-right: 4px;
}

.compact_c19a55 .contents_c19a55 {
  margin-left: calc(var(--custom-message-margin-compact-indent) * -1);
  padding-left: var(--custom-message-margin-compact-indent);
  text-indent: calc((var(--custom-message-margin-compact-indent) - 1rem) * -1);
}

.cozy_c19a55 .contents_c19a55 {
  position: static;
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}

.zalgo_c19a55.compact_c19a55 .messageContent_c19a55 {
  overflow: hidden;
}

.compact_c19a55 .header_c19a55 {
  display: inline;
}

.cozy_c19a55 .header_c19a55 {
  display: block;
  position: relative;
  line-height: 1.375rem;
  min-height: 1.375rem;
  color: var(--text-muted);
  white-space: break-spaces;
  word-wrap: pre-wrap;
}

.zalgo_c19a55.cozy_c19a55 .header_c19a55 {
  overflow: hidden;
}

.a11y-font-scaled-down .cozy_c19a55.wrapper_c19a55,
.a11y-font-scaled-down .cozy_c19a55.wrapper_c19a55 .header_c19a55 {
  padding-left: 4.5rem;
}

.a11y-font-scaled-down .cozy_c19a55 .header_c19a55 {
  margin-left: -4.5rem;
}

.buttonContainer_c19a55 {
  position: absolute;
  top: 0;
  right: 0;
}

.systemMessageAccessories_c19a55 {
  margin-left: 2.5rem;
}

.avatar_c19a55 {
  position: absolute;
  left: var(--custom-message-margin-horizontal);
  margin-top: calc(4px - var(--custom-message-spacing-vertical-container-cozy));
  width: 40px;
  height: 40px;

  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex: 0 0 auto;
  pointer-events: none;
  z-index: 1;
}

.compact_c19a55 .avatar_c19a55 {
    position: relative;
    left: 0;
    margin-top: 0;
    width: 1em;
    height: 1em;
    top: 0.18em;
    margin-left: 0.1em;
    margin-right: 0.25em;
  }

.avatar_c19a55:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--background-modifier-accent);
}

.avatarDecoration_c19a55 {
  position: absolute;
  z-index: 1;
  left: calc(var(--custom-message-margin-horizontal) - (var(--custom-message-avatar-decoration-size) - var(--custom-message-avatar-size)) / 2);
  margin-top: calc(4px - var(--custom-message-spacing-vertical-container-cozy) - (var(--custom-message-avatar-decoration-size) - var(--custom-message-avatar-size)) / 2);
  width: var(--custom-message-avatar-decoration-size);
  height: var(--custom-message-avatar-decoration-size);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.a11y-font-scaled-down .avatar_c19a55:not(.compact_c19a55) {
  width: 2.5rem;
  height: 2.5rem;
  left: 1rem;
  margin-top: calc(0.25rem - var(--custom-message-spacing-vertical-container-cozy));
}

.a11y-font-scaled-down .avatarDecoration_c19a55:not(.compact_c19a55) {
  /* stylelint-disable-next-line discord/var-validator */
  width: calc(2.5rem * var(--decoration-to-avatar-ratio));
  /* stylelint-disable-next-line discord/var-validator */
  height: calc(2.5rem * var(--decoration-to-avatar-ratio));
  left: 0.8rem;
}

.avatar_c19a55.clickable_c19a55 {
  pointer-events: auto;
}

.full-motion .avatar_c19a55.clickable_c19a55:hover {
  filter: drop-shadow(var(--elevation-medium));
}

.avatar_c19a55.clickable_c19a55:active {
  transform: translate(0, 1px);
}

.avatar_c19a55.clickable_c19a55:active + .avatarDecoration_c19a55 {
  transform: translate(0, 1px);
}

.roleIcon_c19a55 {
  margin-left: 0.25rem;
  vertical-align: top;
  position: relative;
  top: 1px;
  height: calc(1rem + 4px);
  width: calc(1rem + 4px);
}

.timestamp_c19a55 {
  display: inline-block;
  /* NOTE(amadeus): We intentionally set a lower height on this
   * inline-block element since it appears to cause some very strange
   * weirdness with how the height of a message is calculated - it
   * adds an additional pixel... which is wrong */
  height: 1.25rem;
  cursor: default;
  pointer-events: none;
  font-weight: 500;
}

.timestampInline_c19a55 {
  margin-left: 0.25rem;
}

.timestamp_c19a55.latin12CompactTimeStamp_c19a55 {
  width: 2.25rem;
}

.timestamp_c19a55.latin24CompactTimeStamp_c19a55 {
  /* NOTE(amadeus): Ugly number, I know, but it helps with certain annoying
   * cases where the timestamp can wrap */
  width: 3.1rem;
}

.timestamp_c19a55.asianCompactTimeStamp_c19a55 {
  width: 4.25rem;
}

.mouse-mode .timestamp_c19a55 {
  pointer-events: auto;
}

.cozy_c19a55 .timestamp_c19a55 {
  font-size: 0.75rem;
  line-height: 1.375rem;
  color: var(--text-muted);
  vertical-align: baseline;
}

.background-opacity-low .cozy_c19a55 .timestamp_c19a55, .background-opacity-medium .cozy_c19a55 .timestamp_c19a55, .background-opacity-high .cozy_c19a55 .timestamp_c19a55 {
    display: none;
  }

.cozy_c19a55 .timestamp_c19a55.alt_c19a55,
.compact_c19a55 .timestamp_c19a55 {
  text-align: right;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 0.6875rem;
  line-height: 1.375rem;
  margin-right: var(--custom-message-meta-space);
  color: var(--text-muted);
  text-indent: 0;
}

.cozy_c19a55 .timestamp_c19a55.alt_c19a55 {
  position: absolute;
  left: 0;
  height: 1.375rem;
  line-height: 1.375rem;
  width: 56px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: right;
  z-index: 1;
}

.a11y-font-scaled-down .cozy_c19a55 .timestamp_c19a55.alt_c19a55 {
  width: 3.5rem;
}

.a11y-font-scaled-up .cozy_c19a55 .timestamp_c19a55.alt_c19a55 {
  /* NOTE(amadeus): This is super funny and annoying.  When we scale the chat
   * size up, we don't scale up the avatar, which means that there's not enough
   * room in the column for the timestamp at larger sizes.  To fix this, we
   * need to stop font scaling as we grow, however - this file uses a postcss
   * plugin to convert all font pixel sizes into rem.  To opt out of this
   * functionality, we have to use a unit of `Px`.  Prettier will not accept
   * this, and turn Px into `px`, which will break everything.  So to fix, we
   * have to disable prettier on that specific line, and then disable the
   * various stylelint issues that crop up after. */
  /* stylelint-disable declaration-property-value-allowed-list, unit-case */
  /* prettier-ignore */
  font-size: 12Px;
  /* stylelint-enable declaration-property-value-allowed-list, unit-case */
}

/* remove the default text-shadow so that we can actually be transparent */

.background-opacity-low .compact_c19a55 .timestamp_c19a55, .background-opacity-medium .compact_c19a55 .timestamp_c19a55, .background-opacity-high .compact_c19a55 .timestamp_c19a55 {
    text-shadow: none;
  }

.background-opacity-low .compact_c19a55 .timestamp_c19a55, .background-opacity-medium .compact_c19a55 .timestamp_c19a55, .background-opacity-high .compact_c19a55 .timestamp_c19a55 {
    color: var(--primary-100);
  }

.timestampTooltip_c19a55 {
  max-width: none !important;
  max-width: initial !important;
}

.timestampTooltip_c19a55 {
  /* stylelint-disable-next-line declaration-no-important */
  white-space: nowrap;
}

.timestampVisibleOnHover_c19a55 {
  opacity: 0;
}

.nitroAuthorBadgeTootip_c19a55 {
  max-width: 30vw !important;
}

.nitroAuthorBadgeTootip_c19a55 {
  /* stylelint-disable-next-line declaration-no-important */
  white-space: nowrap;
}

.mouse-mode .wrapper_c19a55:hover .timestampVisibleOnHover_c19a55 {
  opacity: 1;
}

.keyboard-mode .wrapper_c19a55:focus .timestampVisibleOnHover_c19a55 {
  opacity: 1;
}

.username_c19a55 {
  
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 1rem;
  font-weight: 500;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.375rem;
  color: var(--header-primary);
  display: inline;
  vertical-align: baseline;
  position: relative;

  /* Zalgo lmao */
  overflow: hidden;
  flex-shrink: 0;
}

.roleDot_c19a55 {
  margin-right: 0.25rem;
}

.cozy_c19a55 .headerText_c19a55 {
  margin-right: 0.25rem;
}

.compact_c19a55 .headerText_c19a55 {
  margin-right: 0.25rem;
}

.cozy_c19a55 .headerText_c19a55.hasRoleIcon_c19a55,
.compact_c19a55 .headerText_c19a55.hasRoleIcon_c19a55 {
  margin-right: 0;
}

.cozy_c19a55 .headerText_c19a55.hasRoleIcon_c19a55.hasBadges_c19a55, .compact_c19a55 .headerText_c19a55.hasRoleIcon_c19a55.hasBadges_c19a55 {
    margin-right: 0.25rem;
  }

.username_c19a55.clickable_c19a55:hover,
.applicationName_c19a55.clickable_c19a55:hover,
.commandName_c19a55.clickable_c19a55:hover {
  cursor: pointer;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */

@media all and (-webkit-max-device-pixel-ratio: 1) {
  .theme-light .username_c19a55 {
    font-weight: 600;
  }
}

.background-opacity-low .username_c19a55, .background-opacity-medium .username_c19a55, .background-opacity-high .username_c19a55 {
    text-shadow:
      0 0 1px var(--primary-700),
      1px 1px 0 var(--primary-700);
  }

/* we always want it to be bolded, so that there's no shifting when we toggle in and out */

.background-opacity-low .username_c19a55, .background-opacity-medium .username_c19a55 {
    font-weight: 600;
  }

.botTag_c19a55 {
  position: relative;
  top: 0.1rem;
}

.botTagCompact_c19a55 {
  
  margin-right: 0.25rem;
}

.botTagCozy_c19a55 {
  
  margin-left: 0.25rem;
}

.nitroBadgeSvg_c19a55 {
  
  position: relative;
  margin-left: 0.2rem;
  width: 24px;
  height: 14px;
}

.nitroBadgeSvgRepliedMessage_c19a55 {
  display: flex;
  justify-content: center;
  margin-right: 4px;
}

.nitroAuthorBadgeContainer_c19a55 {
  display: inline-block;
}

.replyLink_c19a55 {
  color: var(--header-secondary);
}

.replyLink_c19a55.clickable_c19a55 {
  cursor: pointer;
}

.replyLink_c19a55.clickable_c19a55:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.separator_c19a55 {
  position: absolute;
  opacity: 0;
  display: inline-block;
  font-style: normal;
  z-index: -1;
}

.messageEditorCompact_c19a55 {
  margin-left: var(--custom-message-margin-compact-indent);
  margin-right: var(--custom-message-margin-horizontal);
}

.messageContent_c19a55 {
  text-indent: 0;
}

.cozy_c19a55 .messageContent_c19a55 {
    position: relative;
  }

.cozy_c19a55.hasThread_c19a55:after {
    border-left: 2px solid var(--spine-default);
    border-bottom: 2px solid var(--spine-default);
    border-bottom-left-radius: 8px;
    bottom: 29px;
    content: '';
    position: absolute;
  }

.font-size-24 .cozy_c19a55.hasThread_c19a55:after {
      width: 1.25rem;
      left: 1.5rem;
      top: 2rem;
    }

.font-size-20 .cozy_c19a55.hasThread_c19a55:after {
      width: 1.625rem;
      left: 1.75rem;
      top: 2.375rem;
    }

.font-size-18 .cozy_c19a55.hasThread_c19a55:after {
      width: 1.75rem;
      left: 2rem;
      top: 2.75rem;
    }

.font-size-16 .cozy_c19a55.hasThread_c19a55:after,
    .font-size-15 .cozy_c19a55.hasThread_c19a55:after,
    .font-size-14 .cozy_c19a55.hasThread_c19a55:after,
    .font-size-12 .cozy_c19a55.hasThread_c19a55:after {
      width: 2rem;
      left: 2.2rem;
      top: 3rem;
    }

.font-size-24 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after,
    .font-size-20 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after,
    .font-size-18 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after,
    .font-size-16 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after,
    .font-size-15 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after,
    .font-size-14 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after,
    .font-size-12 .cozy_c19a55.hasThread_c19a55.isSystemMessage_c19a55:after {
      top: 1.75rem;
    }

.font-size-24 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after {
      top: 3.25rem;
    }

.font-size-20 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after {
      top: 3.75rem;
    }

.font-size-18 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after {
      top: 4rem;
    }

.font-size-16 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after,
    .font-size-15 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after {
      top: 4.375rem;
    }

.font-size-14 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after {
      top: 4.5rem;
    }

.font-size-12 .cozy_c19a55.hasThread_c19a55.hasReply_c19a55:after {
      top: 4.75rem;
    }

.compact_c19a55 .contents_c19a55 {
    position: relative;
  }

.compact_c19a55.hasThread_c19a55 .contents_c19a55:before {
    background-color: var(--background-accent);
    bottom: 0;
    content: '';
    position: absolute;
    width: 2px;
    left: 2.5rem;
    top: 1.5rem;
  }

.compact_c19a55.hasThread_c19a55.isSystemMessage_c19a55 .contents_c19a55:before {
    left: 3rem;
    top: 1.75rem;
  }

.zalgo_c19a55 .messageContent_c19a55 {
  overflow: hidden;
}

.messageContent_c19a55:empty {
  display: none;
}

.compact_c19a55 .messageContent_c19a55 {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  display: inline;

  word-wrap: break-word;
}

/* disable jumboable in compact because it makes the line heights grow way
   * too much */

.compact_c19a55 .messageContent_c19a55 .emoji {
      position: relative;
    }

.compact_c19a55 .messageContent_c19a55 .jumboable {
      width: var(--custom-emoji-size-emoji);
      height: var(--custom-emoji-size-emoji);
      min-height: var(--custom-emoji-size-emoji);
    }

.compact_c19a55 .messageContent_c19a55.markupRtl_c19a55 {
  display: block;
  text-indent: 0;
}

.cozy_c19a55 .messageContent_c19a55 {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  margin-left: calc(var(--custom-message-margin-left-content-cozy) * -1);
  padding-left: var(--custom-message-margin-left-content-cozy);
}

.isSending_c19a55 {
  opacity: 0.5;
}

.isFailed_c19a55,
.isFailed_c19a55 a,
.isFailed_c19a55 .hljs,
.isFailed_c19a55 code.inline,
/* We're in a specificity war here :( */
.theme-dark .isFailed_c19a55,
.theme-light .isFailed_c19a55 {
  color: var(--status-danger);
}

.theme-dark .isUnsupported_c19a55,
.theme-dark .isUnsupported_c19a55 {
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cozy_c19a55 .markupRtl_c19a55 {
  text-align: left;
  text-indent: 0;
  unicode-bidi: plaintext;
}

.edited_c19a55 {
  font-size: 0.625rem;
  font-weight: 400;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.communicationDisabled_c19a55 {
  margin-right: 8px;
  vertical-align: -1px;
  color: var(--status-danger);
}

.compactCommunicationDisabled_c19a55 {
  margin: 0 4px;
  vertical-align: -1px;
  color: var(--status-danger);
}

.communicationDisabledOpacity_c19a55 {
  opacity: 0.5;
}

.mention {
  border-radius: 3px;
  padding: 0 2px;
}

.background-opacity-low .edited_c19a55 {
  color: hsl(var(--white-500-hsl) / 0.6);
}

.background-opacity-medium .edited_c19a55 {
  color: hsl(var(--white-500-hsl) / 0.5);
}

.background-opacity-high .edited_c19a55 {
  color: hsl(var(--white-500-hsl) / 0.4);
}

.badgesContainer_c19a55 {
  display: inline-flex;
  row-gap: 0.25rem;
  margin-right: 0.25rem;
  text-indent: 0;
  align-items: baseline;
}

.compact_c19a55 .badgesContainer_c19a55 {
  /* We want to kill the margin for the username in compact mode. */
  margin-left: -0.25rem;
}

.cozy_c19a55 .badgesContainer_c19a55 {
  margin-left: 0.25rem;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .headerText_c19a55 .username_c19a55 {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;
    /* show role colors on top of Canvas */
    background-color: Canvas;
    color: ButtonText;
  }

.cozy_c19a55 .pollBadgeDefault_c19a55,
.pollBadgeReplied_c19a55 {
  margin: 0 0 0 0.25rem;
}

.gameIcon_b52e4f {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  -webkit-user-drag: none;
  background-size: 100%;
  border-radius: var(--radius-sm);
  color: var(--header-primary);
}

.small_b52e4f,
.medium_b52e4f,
.large_b52e4f {
  flex-shrink: 0;
}

.xxsmall_b52e4f {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
}

.xsmall_b52e4f {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.small_b52e4f {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
}

.medium_b52e4f {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

.large_b52e4f {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
}

.eighty_b52e4f {
  width: 80px;
  height: 80px;
}

@use postcss-pxtorem;

.gameIcon__5a366 {
  margin-right: 4px;
  /* Cursed, but we match the height and then align it to the top of the sibling text to give it a nice, centered appearance */
  height: 1rem;
  vertical-align: text-top;
}

.gameMessageTooltip__5a366 {
  max-width: none;
  max-width: initial;
}

.gameMessageTooltipContent__5a366 {
  display: flex;
  padding: 16px;
  align-items: center;
}

.textContainer__5a366 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 8px;
  width: 240px;
}

.timestamp__5a366 {
  margin-bottom: 4px;
}

.linkIcon_ebf183 {
  display: inline-block;
}

.badge__86331 {
  display: inline-flex;
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  margin-left: 0.25rem;
  vertical-align: top;
  position: relative;
  top: 1px;
  cursor: pointer;
  color: var(--interactive-active);
  background-color: var(--background-secondary-alt);
  padding: 2px 8px 2px 4px;
  border-radius: 12px;
  align-items: center;
  flex-direction: row;
  text-indent: 0;
}

  .badge__86331:hover {
    color: var(--interactive-hover);
  }

.badgeVerifiedIcon__86331 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.roleName__86331 {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-light .badge__86331 {
    color: var(--channels-default);
  }

.theme-light .badge__86331:hover {
      color: var(--interactive-hover);
    }

.popout__86331 {
  background-color: var(--background-floating);
  box-shadow: var(--elevation-high);
  border-radius: 4px;
  overflow: hidden;
}

.popoutChecks__86331 {
  padding: 12px;
}

.popoutChecksGroup__86331:not(:last-of-type) {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

.popoutCheckGroupName__86331 {
  display: flex;
  align-items: center;
}

.popoutCheckGroupPlatformIcon__86331 {
  margin-right: 8px;
  height: 20px;
  width: 20px;
}

.popoutCheck__86331 {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-left: 28px;
  padding-right: 20px;
}

.popoutCheckIcon__86331 {
  color: var(--text-positive);
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.popoutHeaderContainer__86331 {
  background-color: var(--background-tertiary);
  padding: 10px;
}

.popoutHeaderText__86331 strong {
    color: var(--header-primary);
  }

.buttonContainer__86331 {
  padding: 8px;
}

.getRolesButton__86331 {
  width: 100%;
  margin-bottom: 8px;
}

.viewConnectionsButton__86331 {
  width: 100%;
}

.botTag__86331 {
  margin-left: 8px;
  margin-top: -1px;
}

.roleIcon__1e6f1 {
  display: inline-block;
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}

.roleIcon__1e6f1:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--background-modifier-accent);
  border-radius: 50%;
}

.clickable__1e6f1 {
  cursor: pointer;
}

.popoutContainer_c00127 {
  padding: var(--custom-message-helpers-popout-padding-width);
}

.mainContent_c00127 {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.iconContainer_c00127 {
  margin-right: var(--custom-message-helpers-popout-padding-width);
  width: 40px;
  color: var(--text-positive);
}

.header_c00127 {
  margin-bottom: 4px;
}

.ctaButton_c00127 {
  margin: 16px auto 0;
}

.ctaButtonContent_c00127 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boosterBadge_c00127 {
  margin-right: 3px;
}

.newMemberBadge_f80704 {
  display: inline-block;
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  margin-left: 0.25rem;
  vertical-align: top;
  position: relative;
  top: 1px;
  height: calc(1rem + 4px);
  width: calc(1rem + 4px);
  cursor: pointer;
  color: var(--text-positive);
  text-indent: 0;
}

.divider__908e2 {
  z-index: 1;
  height: 0;
  border-top: thin solid var(--background-modifier-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
  pointer-events: none;
  box-sizing: border-box;
  --divider-color: var(--status-danger);
}

.custom-theme-background .divider__908e2 {
  border-top: thin solid rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6));
}

.low-saturation .divider__908e2 {
  --divider-color: var(--red-430);
}

.background-opacity-low .divider__908e2,
.background-opacity-medium .divider__908e2 {
  opacity: 0.5;
}

.background-opacity-high .divider__908e2 {
  opacity: 0.8;
}

.custom-theme-background .isUnread__908e2,
.isUnread__908e2 {
  /* stylelint-disable-next-line discord/var-validator */
  border-color: var(--divider-color);
}

.hasContent__908e2 {
  position: relative;
  left: auto;
  right: auto;
}

.endCap__908e2 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -7px;
  /* NOTE(amadeus): Using a height of 13px since the cap needs to
   * refine down to a single pixel, and if we go even numbers above
   * and below - 6px */
  height: 13px;
  right: 0;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 10px;
  /* NOTE(amadeus): This line-height is SUPER random, but it may just be the
   * fix required for NEW to appear vertically positioned at all zoom sizes :X */
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 9px;
  font-weight: 700;
  padding: 0 4px 0 1px;
  border-radius: 0 4px 4px 0;
  text-transform: uppercase;
  color: var(--white-500);
  box-sizing: border-box;
  border-left: none;
}

.unreadPill__908e2 {
  
  /* stylelint-disable-next-line discord/var-validator */
  background-color: var(--divider-color);
}

.unreadPillCap__908e2 {
  display: block;
  position: absolute;
  left: -8px;
  top: 0;
  height: 13px;
}

.unreadPillCapStroke__908e2 {
  /* stylelint-disable-next-line discord/var-validator */
  color: var(--divider-color);
  /* stylelint-disable-next-line discord/var-validator */
  fill: var(--divider-color);
}

.content__908e2 {
  display: block;
  flex: 0 0 auto;
  padding: 2px 4px;
  color: var(--text-muted);
  background: var(--bg-overlay-chat, var(--background-primary));
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 13px;
  font-size: 12px;
  margin-top: -1px;
  font-weight: 600;
  border-radius: 8px;
}

.visual-refresh .content__908e2 {
    padding-left: var(--space-4);
    background: var(--bg-overlay-chat, var(--background-base-lower));
  }

.isUnread__908e2 .content__908e2 {
  /* NOTE(amadeus): Because... Stan */
  /* stylelint-disable-next-line discord/var-validator */
  color: var(--divider-color);
}

.ephemeral__5126c {
  position: relative;
  background: var(--brand-05a);
}

/* must come after ephemeral to override background color. */

.nitroMessage__5126c {
  background: linear-gradient(
    to right,
    hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.15),
    hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.15)
  );
}

.automodMessage__5126c {
  /* var(--text-danger) */
  background: var(--background-message-automod);
}

.potioned__5126c {
  position: relative;
  background: linear-gradient(
    to right,
    hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.08),
    hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.08)
  );
}

/* .mentioned & .highlighted must come after ephemeral to override background color. */

.mentioned__5126c {
  position: relative;
  background: var(--background-mentioned);
}

.replying__5126c,
.highlighted__5126c {
  position: relative;
  background: var(--background-message-highlight);
}

.mentioned__5126c:before,
.ephemeral__5126c:before,
.nitroMessage__5126c:before,
.automodMessage__5126c:before,
.replying__5126c:before,
.highlighted__5126c:before,
.potioned__5126c:before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  width: 2px;
}

.ephemeral__5126c:before {
  background: var(--brand-500);
}

.nitroMessage__5126c:before {
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color-vertical);
}

.automodMessage__5126c:before {
  background: var(--text-danger);
}

.potioned__5126c:before {
  background: linear-gradient(
    to right,
    var(--premium-tier-2-purple-for-gradients) 2px,
    var(--premium-tier-2-purple-for-gradients),
    var(--premium-tier-2-pink-for-gradients)
  );
  transition: width 0.2s ease-out;
  width: 2px;
  z-index: 1;
}

.full-motion .message__5126c.potioned__5126c:hover:before {
  width: 105%;
  transition:
    width 1.1s ease-in, opacity 1.1s ease-in;
}

.full-motion.confetti-mode .message__5126c.potioned__5126c:before {
  width: 105%;
  transition:
    width 0.2s ease-in, opacity 0.2s ease-in;
}

/* .mentioned must come after ephemeral to override border color. */

.mentioned__5126c:before {
  background: var(--info-warning-foreground);
}

.highlighted__5126c:before {
  background: var(--text-brand);
}

.replying__5126c:before {
  background: var(--brand-500);
}

.messageListItem__5126c {
  outline: none;
  position: relative;
}

.message__5126c {
  padding-right: 48px !important;
}

.message__5126c {
  /* stylelint-disable-next-line declaration-no-important */
}

.visual-refresh .message__5126c {
    border-top-right-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
  }

.theme-dark .message__5126c.selected__5126c,
.theme-dark.mouse-mode.full-motion .message__5126c:hover {
  background: var(--bg-overlay-1, var(--background-message-hover));
}

.theme-dark.visual-refresh .message__5126c.selected__5126c,
.theme-dark.mouse-mode.full-motion.visual-refresh .message__5126c:hover {
  background: var(--bg-overlay-2, var(--background-message-hover));
}

.theme-light .message__5126c.selected__5126c,
.theme-light.mouse-mode.full-motion .message__5126c:hover {
  background: var(--bg-overlay-3, var(--background-message-hover));
}

.theme-light.visual-refresh .message__5126c.selected__5126c,
.theme-light.mouse-mode.full-motion.visual-refresh .message__5126c:hover {
  background: var(--bg-overlay-4, var(--background-message-hover));
}

.visual-refresh .message__5126c.mentioned__5126c.selected__5126c,
.mouse-mode.full-motion.visual-refresh .message__5126c.mentioned__5126c:hover,
.message__5126c.mentioned__5126c.selected__5126c,
.mouse-mode.full-motion .message__5126c.mentioned__5126c:hover {
  background: var(--background-mentioned-hover);
}

.visual-refresh .message__5126c.highlighted__5126c.selected__5126c,
.mouse-mode.full-motion.visual-refresh .message__5126c.highlighted__5126c:hover,
.message__5126c.highlighted__5126c.selected__5126c,
.mouse-mode.full-motion .message__5126c.highlighted__5126c:hover {
  background: var(--background-message-highlight-hover);
}

.visual-refresh .message__5126c.ephemeral__5126c.selected__5126c,
.mouse-mode.full-motion.visual-refresh .message__5126c.ephemeral__5126c:hover,
.message__5126c.ephemeral__5126c.selected__5126c,
.mouse-mode.full-motion .message__5126c.ephemeral__5126c:hover {
  background: var(--brand-10a);
}

.visual-refresh .message__5126c.nitroMessage__5126c.selected__5126c,
.mouse-mode.full-motion.visual-refresh .message__5126c.nitroMessage__5126c:hover,
.message__5126c.nitroMessage__5126c.selected__5126c,
.mouse-mode.full-motion .message__5126c.nitroMessage__5126c:hover {
  background: linear-gradient(
    to right,
    hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.2),
    hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.2)
  );
}

.visual-refresh .message__5126c.automodMessage__5126c.selected__5126c,
.mouse-mode.full-motion.visual-refresh .message__5126c.automodMessage__5126c:hover,
.message__5126c.automodMessage__5126c.selected__5126c,
.mouse-mode.full-motion .message__5126c.automodMessage__5126c:hover {
  background: var(--background-message-automod-hover);
}

.visual-refresh .message__5126c.replying__5126c.selected__5126c,
.mouse-mode.full-motion.visual-refresh .message__5126c.replying__5126c:hover,
.message__5126c.replying__5126c.selected__5126c,
.mouse-mode.full-motion .message__5126c.replying__5126c:hover {
  background: var(--brand-10a);
}

.quotedChatMessage__5126c {
  position: relative;
}

.highlightContainer__5126c {
  margin-bottom: 4px;

  display: flex;
  align-items: center;
}

.highlightIcon__5126c {
  margin-right: 4px;
}

.jump__5126c {
  background-color: var(--background-tertiary);
  border-radius: 3px;
  box-sizing: border-box;
  color: var(--header-secondary);
  cursor: pointer;
  display: none;
  font-size: 12px;
  font-weight: 500;
  height: 24px;
  line-height: 16px;
  margin-left: 6px;
  padding: 4px;
  position: absolute;
  right: 16px;
  text-align: center;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 1;
}

.quotedChatMessage__5126c:hover .jump__5126c {
    display: block;
  }

.jump__5126c:hover {
    color: var(--interactive-hover);
  }

.jump__5126c:active {
    color: var(--interactive-active);
    transform: translate3d(0, 1px, 0);
  }

.buttons__5126c {
  opacity: 0;
  pointer-events: none;
}

.message__5126c.selected__5126c .buttons__5126c,
.mouse-mode .message__5126c:hover .buttons__5126c {
  opacity: 1;
}

.message__5126c.selected__5126c .buttonsInner__5126c,
.mouse-mode .message__5126c:hover .buttonsInner__5126c {
  pointer-events: initial;
}

.hideIfMessageNotFocused__5126c {
  opacity: 0;
}

.message__5126c.selected__5126c .hideIfMessageNotFocused__5126c,
.mouse-mode .message__5126c:hover .hideIfMessageNotFocused__5126c {
  opacity: 1;
}

.cozyMessage__5126c.groupStart__5126c {
  /* 44px*/
  min-height: 2.75rem;
}

/* NOTE(amadeus): System messages never have an avatar */

.systemMessage__5126c.groupStart__5126c {
  min-height: 1.375rem;
}

.backgroundFlash__5126c {
  flex: 0 0 auto;
}

.channelTextArea__5126c {
  margin-top: 8px;
}

.divider__5126c {
  margin-left: 1rem;
  margin-right: 0.875rem;
}

.disableInteraction__5126c:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.groupStart__5126c {
  margin-top: var(--custom-group-spacing-start);
}

.group-spacing-0 .groupStart__5126c {
    --custom-group-spacing-start: 0.0625rem;
  }

.group-spacing-0 .divider__5126c {
    margin-top: 0;
    margin-bottom: -1px;
  }

.group-spacing-0 .divider__5126c.beforeGroup__5126c {
    /* no change */
  }

.group-spacing-0 .divider__5126c.hasContent__5126c {
    margin-top: 1.5rem;
    /* 24px */
    margin-bottom: 1.5rem;
    /* 24px */
  }

.group-spacing-4 .groupStart__5126c {
    --custom-group-spacing-start: 0.3125rem;
    /*  5px */
  }

.group-spacing-4 .divider__5126c {
    margin-top: -1px;
    margin-bottom: 0;
  }

.group-spacing-4 .divider__5126c.beforeGroup__5126c {
    margin-bottom: -1px;
    margin-top: 0;
    top: 0.125rem;
    /* 2px */
  }

.group-spacing-4 .divider__5126c.hasContent__5126c {
    margin-top: 1.5rem;
    /* 24px */
    margin-bottom: 1.25rem;
    /* 20px */
  }

.group-spacing-8 .groupStart__5126c {
    --custom-group-spacing-start: 0.5625rem;
    /*  9px */
  }

.group-spacing-8 .divider__5126c {
    margin-top: 2px;
    margin-bottom: 2px;
  }

.group-spacing-8 .divider__5126c.beforeGroup__5126c {
    margin-bottom: -1px;
    margin-top: 0;
    top: 0.25rem;
    /* 4px */
  }

.group-spacing-8 .divider__5126c.hasContent__5126c {
    margin-top: 1.5rem;
    /* 24px */
    margin-bottom: 1rem;
    /* 16px */
  }

.group-spacing-16 .groupStart__5126c {
    --custom-group-spacing-start: 1.0625rem;
    /*  17px */
  }

.group-spacing-16 .divider__5126c {
    margin-top: 4px;
    margin-bottom: 4px;
  }

.group-spacing-16 .divider__5126c.beforeGroup__5126c {
    margin-bottom: -1px;
    margin-top: 0;
    top: 0.5rem;
    /* 8px */
  }

.group-spacing-16 .divider__5126c.hasContent__5126c {
    margin-top: 1.5rem;
    /* 24px */
    margin-bottom: 0.5rem;
    /* 8px */
  }

.group-spacing-24 .groupStart__5126c {
    --custom-group-spacing-start: 1.5625rem;
    /*  25px */
  }

.group-spacing-24 .divider__5126c {
    margin-top: 4px;
    margin-bottom: 4px;
  }

.group-spacing-24 .divider__5126c.beforeGroup__5126c {
    margin-bottom: -1px;
    margin-top: 0;
    top: 0.75rem;
    /* 12px */
  }

.group-spacing-24 .divider__5126c.hasContent__5126c {
    margin-top: 1.5rem;
    /* 24px */
    margin-bottom: 0;
  }

.backgroundFlash__5126c .groupStart__5126c {
  margin-top: 0 !important;
}

.backgroundFlash__5126c .groupStart__5126c {
  /* NOTE(amadeus): When wrapped in a jumpFlash wrapper, we need to undo the
   * margin since the wrapper will do it instead */
  /* stylelint-disable-next-line declaration-no-important */
}

.interactionSending__5126c {
  opacity: 0.5;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .mentioned__5126c:before,
  .enable-forced-colors .ephemeral__5126c:before,
  .enable-forced-colors .automodMessage__5126c:before,
  .enable-forced-colors .replying__5126c:before,
  .enable-forced-colors .highlighted__5126c:before {
    forced-color-adjust: none;
    width: 4px;
  }

.mentioned__5126c .mention.interactive:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/* This comes last so we can ensure the background color is set accurately since other messages impact the
 * background color.  But, no other messages have the background color grow like potions, so we need
 * to insure it's the last background color applied */

.potioned__5126c:before {
  width: 2px;
  background: linear-gradient(
    to right,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-purple-for-gradients) 2px,
    hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.15) 2px,
    hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.15) 85%,
    transparent 100%
  );
  transition:
    width 0.2s ease-in, opacity 0.2s ease-in;
}

.divider__5e421 {
  margin: 8px 0;
}

.updateMessage__5e421 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 12px 0;
}

.infoMessageIcon__5e421 {
  width: 16px;
  height: 16px;
}

.joinLeaderboardButton__5e421 {
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.joinLeaderboardButtonInner__5e421 {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.riotIcon__5e421 {
  width: 16px;
  height: 16px;
}

.menuIcon__10fcc {
  cursor: pointer;
  color: var(--interactive-normal);
  height: 16px;
}

  .menuIcon__10fcc:hover {
    color: var(--interactive-active);
  }

.container_cfd26e {
  border-radius: 8px;
  padding-left: 16px;
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #1f1a36; /* stylelint-disable-line */
}

.title_cfd26e {
  color: var(--content-inventory-overlay-text-secondary);
  flex: 1;
}

.textContainer_cfd26e {
  display: flex;
  align-items: baseline;
}

.username_cfd26e {
  margin-right: 4px;
}

.statsText_cfd26e {
  margin-right: 16px;
}

.heroArtContainer_cfd26e {
  height: 32px;
  width: 32px;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
}

.heroArt_cfd26e {
  --custom-crop-width: 2px;
  /* There's a slight inset shadow on the champion icons, so we crop slightly to hide this */
  width: calc(100% + 2 * 2px);
  width: calc(100% + 2 * var(--custom-crop-width));
  height: calc(100% + 2 * 2px);
  height: calc(100% + 2 * var(--custom-crop-width));
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: calc(-1 * 2px) calc(-1 * 2px);
     object-position: calc(-1 * 2px) calc(-1 * 2px);
  -o-object-position: calc(-1 * var(--custom-crop-width)) calc(-1 * var(--custom-crop-width));
     object-position: calc(-1 * var(--custom-crop-width)) calc(-1 * var(--custom-crop-width));
}

.heroContainer__813d8 {
  height: 112px;
  position: relative;

  display: flex;
  align-items: center;

  border-radius: var(--radius-sm);

  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: content-box, border-box;
}

  .heroContainer__813d8:after {
    content: '';
    border-radius: var(--radius-sm);
    box-shadow: 0 0 1px 1px var(--black) inset;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.heroSplash__813d8 {
  height: 100%;
  width: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  position: absolute;
  top: 0;
  right: 0;

  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);

  -webkit-mask-image: linear-gradient(-270deg, transparent 0%, white 180px, white 100%);

          mask-image: linear-gradient(-270deg, transparent 0%, white 180px, white 100%);
}

.rankContainer__632c2 {
  background-color: var(--bg-surface-overlay);
  border: 1px solid transparent;

  min-width: 16px;
  min-height: 16px;
  max-height: 16px;
  border-radius: 50px;
  background-origin: border-box;
  background-clip: content-box, border-box;
  position: relative;

  /* stylelint-disable */
  --custom-gold-gradient: radial-gradient(
    64.29% 64.29% at 21.43% 17.86%,
    rgba(255, 235, 193, 0.654902) 0%,
    #c89b3c 30.5%,
    #785a28 100%
  );
  --custom-silver-gradient: radial-gradient(78.57% 78.57% at 14.29% 3.57%, #e9e9e9 0%, #7a7a7a 30.5%, #535353 100%);
  --custom-bronze-gradient: radial-gradient(85.71% 85.71% at 7.14% 10.71%, #f4bb8e 0%, #c86d3c 30.5%, #783c28 100%);
  --custom-default-gradient: radial-gradient(75% 75% at 10.71% 14.29%, #a5f5d8 0%, #14555b 100%);
  --custom-dark-background: radial-gradient(85.71% 85.71% at 50% 50%, #112120 21%, #000000 100%);
  /* stylelint-enable */
}

.goldBorder__632c2 {
  background-image: linear-gradient(var(--bg-surface-overlay), var(--bg-surface-overlay)), var(--custom-gold-gradient);
}

.silverBorder__632c2 {
  background-image: linear-gradient(var(--bg-surface-overlay), var(--bg-surface-overlay)), var(--custom-silver-gradient);
}

.bronzeBorder__632c2 {
  background-image: linear-gradient(var(--bg-surface-overlay), var(--bg-surface-overlay)), var(--custom-bronze-gradient);
}

.defaultBorder__632c2 {
  background-image: var(--custom-dark-background), var(--custom-default-gradient);
}

.rank__632c2 {
  padding: 0 1px;
  height: 14px;
  border-radius: 50px;
  color: #a5f5d8; /* stylelint-disable-line */
  line-height: 1.2;
}

.rankWithBorder__632c2 {
  margin: 0.5px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 0.5px solid transparent;
  left: 0.5px;
}

.rankNoBorder__632c2 {
  margin: 1px;
  background-image: var(--custom-dark-background);
}

.goldText__632c2 {
  color: #ffebc1; /* stylelint-disable-line */
  background-image: var(--custom-dark-background), var(--custom-gold-gradient);
}

.silverText__632c2 {
  color: #cccccc; /* stylelint-disable-line */
  background-image: var(--custom-dark-background), var(--custom-silver-gradient);
}

.bronzeText__632c2 {
  color: #f4bb8e; /* stylelint-disable-line */
  background-image: var(--custom-dark-background), var(--custom-bronze-gradient);
}

.container_a804d4 {
  position: relative;
}

.frame_a804d4 {
  position: absolute;
  z-index: 2;
  margin-top: -4px;
  margin-left: -4px;
}

.rankBadge_a804d4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  z-index: 3;
  text-align: center;
}

.container__91600 {
  border-radius: 8px;
  padding: 14px 16px;
  background: #14251d; /* stylelint-disable-line */
}

.userContainer__91600 {
  display: flex;
  align-items: center;
  margin-left: 16px;
  position: relative;
}

.userName__91600 {
  color: var(--content-inventory-overlay-text-primary);
}

.userNameContainer__91600 {
  display: flex;
  align-items: center;
}

.userSubtitle__91600 {
  color: var(--content-inventory-overlay-text-secondary);
}

.winnerImage__91600 {
  height: 14px;
  width: 14px;
}

.timestamp__230d2 {
  font-family: var(--font-code);
}

  .timestamp__230d2.bold__230d2 {
    font-weight: 700;
  }

.inlineTimestamp__230d2 {
  display: inline;
}

.badgeContainer__635ed {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 100%;
}

  .badgeContainer__635ed svg {
    flex-shrink: 0;
  }

  .badgeContainer__635ed div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

.badgeLabel__635ed {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.badgesContainer__635ed) {
  display: flex;
  gap: 0 8px;
  align-items: center;
}

:where(.badgesContainer__635ed):empty {
    display: none;
  }

/* Only show the first two badges on the card */

.badgesContainerCard__635ed > *:nth-child(n + 3) {
    display: none;
  }

.badgesContainerCard__635ed > *:nth-child(2) {
    flex-shrink: 1;
  }

.badgesContainerPopout__635ed {
  flex-wrap: wrap;
  row-gap: 4px;
}

.badgesContainerGameProfile__635ed {
  flex-wrap: wrap;
  row-gap: 4px;
}

.container_f4b016 {
  border-radius: 8px;
  padding: 8px;
  padding-left: 12px;
  display: flex;
  gap: 12px;
  width: 400px;
  height: 80px;
  align-items: center;
  background: linear-gradient(90.89deg, #1f1a36 0.17%, #4e334a 99.24%); /* stylelint-disable-line color-no-hex */
  box-sizing: border-box;
}

.avatar_f4b016 {
  border-radius: 50%;
  overflow: hidden;
}

.title_f4b016 {
  color: var(--content-inventory-overlay-text-primary);
}

.gameTitle_f4b016 {
  color: #cbaa62; /* stylelint-disable-line color-no-hex */
}

.gameTitleContainer_f4b016 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.winnerImage_f4b016 {
  height: 16px;
  width: 16px;
}

.container_f2d0d9 {
  border-radius: 8px;
}

.table_f2d0d9 {
  margin-top: 8px;
}

.rows_f2d0d9 {
  display: flex;
  flex-direction: column;
  max-height: 312px;
  padding-bottom: 6px;
}

.headerRow_f2d0d9 {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px 6px;
}

.headerRank_f2d0d9,
.headerPlayer_f2d0d9,
.headerValue_f2d0d9 {
  color: var(--content-inventory-overlay-text-secondary);
}

.headerRank_f2d0d9 {
  width: 16px;
  text-align: center;
}

.headerPlayer_f2d0d9 {
  flex: 1;
}

.userRow_f2d0d9 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  overflow: hidden;
  position: relative;
}

.userRow_f2d0d9 .copyLinkContainer_f2d0d9 {
    display: none;
    height: 16px;
    width: 16px;
  }

.userRow_f2d0d9 .copyLinkContainer_f2d0d9[aria-busy='false'] {
      cursor: pointer;
    }

.userRow_f2d0d9 .copyLinkContainer_f2d0d9 > .copyLink_f2d0d9,
    .userRow_f2d0d9 .copyLinkContainer_f2d0d9 .copySpinner_f2d0d9 {
      pointer-events: none;
    }

.userRow_f2d0d9:hover {
    background: var(--background-modifier-hover);
  }

.userRow_f2d0d9:hover .copyLinkContainer_f2d0d9 {
      display: inline;
      display: initial;
    }

.userRow_f2d0d9:hover .liveIcon_f2d0d9 {
      display: none;
    }

.rankChangeIndicator_f2d0d9 {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 11px;
  left: -4px;
  border-radius: 4px;
  background-color: var(--header-primary);
}

.userRank_f2d0d9 {
  width: 18px;
  text-align: center;
  color: var(--text-muted);
}

.userPlayer_f2d0d9 {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.userWinnerImage_f2d0d9 {
  height: 14px;
  width: 14px;
}

.joinLeaderboardCTAContainer_f2d0d9 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  margin-bottom: 6px;
}

.joinLeaderboardCTAWinnerImage_f2d0d9 {
  width: 14px;
  height: 14px;
}

.rankChangeBadge_f2d0d9 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px 0 2px;
  background-color: var(--border-subtle);
  border-radius: 4px;
  margin-left: 4px;
  height: 16px;
}

.emptyTitleContainer_f2d0d9 {
  margin-left: 16px;
  max-width: 148px;
  position: relative;
}

.emptyTitle_f2d0d9 {
  color: var(--content-inventory-overlay-text-primary);
}

.emptyWinnerImage_f2d0d9 {
  position: relative;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
}

.copySpinner_f2d0d9 {
  width: 16px;
}

.copyLink_f2d0d9 {
  color: red;
}

.badgesContainer_f2d0d9 {
  display: flex;
  gap: 8px;
}

.copySpinner_f2d0d9 {
  width: 16px;
  height: 16px;
}

.copySpinner_f2d0d9 circle {
    stroke: var(--interactive-normal);
  }

.tooltip_f2d0d9 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.popout__4f0a5 {
  background-color: var(--bg-surface-overlay);
  border-radius: 8px;
  width: 342px;
  box-sizing: border-box;
  box-shadow: var(--shadow-high);
}

.content__4f0a5 {
  padding: 16px;
}

.leaderboardName__4f0a5 {
  color: var(--content-inventory-overlay-text-primary);
  display: inline;
}

.gameIcon__4f0a5 {
  width: 24px;
  height: 24px;
}

.leaderboardTitle__4f0a5 {
  color: var(--content-inventory-overlay-text-secondary);
  flex: 1;
}

.header__4f0a5 {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.previousChampion__4f0a5 {
  margin-top: 8px;
}

.content__4f0a5 .divider__4f0a5 {
  margin: 8px 0;
}

.joinLeaderboardButton__4f0a5 {
  width: 100%;
}

.exitPreviewModeText__4f0a5 {
  color: var(--content-inventory-overlay-text-secondary);
}

.exitPreviewModeButton__4f0a5 {
  padding: 13px 0;
  width: 100%;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer;
}

.badge__36097 {
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: top;
  position: relative;
  top: 1px;
  height: calc(1rem + 4px);
  width: calc(1rem + 4px);
  cursor: pointer;
  text-indent: 0;
  text-indent: initial;
}

.image__36097 {
  height: 20px;
  width: 20px;
}

.potionBadge__18061 {
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: top;
  position: relative;
  top: 1px;
  height: calc(1rem + 2px);
  color: var(--white);
  background: var(--button-filled-brand-background);
  border-radius: 8px;
  text-indent: 0;
  display: flex;
  padding-left: 6px;
  padding-right: 7px;
  /* Ensures this visually appears centered */
  justify-content: center;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  cursor: pointer;
}

.badge__6ba43 {
  display: inline-block;
  overflow: hidden;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: top;
  position: relative;
  top: 0.1875rem;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  color: var(--interactive-normal);
  text-indent: 0;
}

/* This is no longer needed in the Refresh */
.platform-osx:not(.visual-refresh) .drag__5c9fc {
  -webkit-app-region: drag;
  position: absolute;
  width: 100%;
  padding-top: 32px;
}
.visual-refresh .drag__5c9fc {
    display: none;
  }
.root__5c9fc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  contain: strict;
  pointer-events: all;
}
.enter__5c9fc,
.exit__5c9fc,
.enterReducedMotion__5c9fc,
.exitReducedMotion__5c9fc {
  transition-duration: var(--custom-full-screen-layer-animation-duration);
  transition-timing-function: ease-in-out;
  /* the different CSS classes for enter/exit change the animation for Reduced Motion */
  /* stylelint-disable-next-line  discord/respect-reduced-motion */
  transition-property: transform, opacity;
}
.enter__5c9fc {
  opacity: 0;
  transform: scale(1.1);
}
.enterReducedMotion__5c9fc {
  opacity: 0;
}
.exit__5c9fc {
  opacity: 1;
  transform: scale(1);
}
.exitReducedMotion__5c9fc {
  opacity: 1;
}
.enterActive__5c9fc,
.enterDone__5c9fc {
  opacity: 1;
  transform: scale(1);
}
.enterActiveReducedMotion__5c9fc,
.enterDoneReducedMotion__5c9fc {
  opacity: 1;
}
.exitActive__5c9fc,
.exitDone__5c9fc {
  opacity: 0;
  transform: scale(1.1);
}
.exitActiveReducedMotion__5c9fc,
.exitDoneReducedMotion__5c9fc {
  opacity: 0;
}

.container_c2b141 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.keybind_c2b141 {
  margin-top: 8px;
  font-weight: 600;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 13px;
  text-align: center;
}

.closeButton_c2b141 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 36px;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.closeButton_c2b141:active {
    transform: translateY(1px);
  }

.keybind_c2b141 {
  color: var(--interactive-normal);
}

.closeButton_c2b141 {
  color: var(--interactive-normal);
}

.closeButton_c2b141:hover {
    color: var(--interactive-hover);
    background-color: var(--background-modifier-hover);
  }

.closeButton_c2b141:hover + .keybind_c2b141 {
      color: var(--interactive-hover);
    }

.closeButton_c2b141:active {
    color: var(--interactive-active);
    background-color: var(--background-modifier-active);
  }

.closeButton_c2b141:active + .keybind_c2b141 {
      color: var(--interactive-active);
    }

.closeButtonSolid_c2b141 {
  border: none;
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
}

.closeButtonSolid_c2b141:hover {
  background-color: transparent;
}

.theme-dark .closeButtonBold_c2b141:hover {
      background-color: hsl(var(--primary-300-hsl) / 0.3);
    }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .closeButton_c2b141 {
    background-color: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
  }

.enable-forced-colors .closeButton_c2b141:active {
      background-color: HighlightText;
      border-color: Highlight;
      color: Highlight;
    }

.wrapper__4d7bb {
  background: linear-gradient(45deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  border-radius: 8px;
  isolation: isolate;
  margin-bottom: 85px;
  overflow: hidden;
  padding: 50px 24px;
  position: relative;
  text-align: center;
}

.content__4d7bb {
  position: relative;
  z-index: 2;
}

.heading__4d7bb {
  margin-bottom: 32px;
}

.cards__4d7bb {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 0 auto;
  max-width: 768px;
}

.card__4d7bb {
  align-items: center;
  background-color: hsl(var(--primary-600-hsl) / 0.9);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 24px 12px;
  min-width: 165px;
  max-width: 180px;
}

.theme-light .card__4d7bb {
  background-color: hsl(var(--primary-100-hsl) / 0.9);
}

.icon__4d7bb {
  color: var(--guild-boosting-pink);
  display: block;
  height: 30px;
  margin-bottom: 10px;
  width: 30px;
}

.backgroundImages__4d7bb {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  background:
    bottom left url(/assets/5f5e47f0133f9ee5.svg) no-repeat,
    bottom right url(/assets/383e4e1569554a59.svg) no-repeat;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.iconImage__4d7bb {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
}

.largeCountdownPill_e270ac {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.largeCountdownPillText_e270ac {
  font-weight: 800;
  display: inline-block;
  color: var(--custom-premium-colors-banner-yellow);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.7px;
}

.largePillIcon_e270ac {
  padding-left: 6px;
}

.unavailableCounterContainer_a466a0 {
  display: flex;
  justify-content: center;
}

.unavailableCounterPill_a466a0 {
  display: inline-flex;
  border: 1px solid var(--white);
  padding: 0 20px;
  border-radius: 57px;
  justify-content: center;
  align-items: center;
  /* TODO figure out better light mode background color */
}

.unavailableCounterPillText_a466a0 {
  margin: 20px 0;
  line-height: 8px;
  color: white;
}

.countDownText_a466a0 {
  margin-left: 8px;
}

.tooltip_a466a0 {
  text-align: center;
  width: 215px;
  max-width: 215px;
}

.guildStatus_f9f04c {
  margin-bottom: 50px;
  text-align: center;
}

.guildIcon_f9f04c {
  margin: 0 auto 10px;
}

.guildName_f9f04c {
  margin-bottom: 4px;
}

.guildBoostCountWrapper_f9f04c {
  color: var(--white-500);
  margin-bottom: 20px;
}

.guildBoostCount_f9f04c {
  align-items: center;
  display: flex;
  justify-content: center;
}

.guildBoostBadge_f9f04c {
  color: inherit;
  flex: 0 0 auto;
  height: 16px;
  margin-right: 4px;
  opacity: 0.6;
  width: 16px;
}

.guildBoostBadgeWithBoosts_f9f04c {
  color: var(--guild-boosting-pink);
  opacity: 1;
}

.guildStatusCopy_f9f04c {
  color: inherit;
  flex: 0 0 auto;
  opacity: 0.6;
}

.guildBoostCountCurrentUser_f9f04c {
  color: inherit;
  margin-top: 4px;
  opacity: 0.6;
}

.guildBoostCtas_f9f04c {
  display: flex;
  margin: 0 auto;
  max-width: 470px;
  width: 100%;
}

.guildBoostCta_f9f04c {
  border-radius: 4px;
  flex: 1 1 50%;
}

.guildBoostCtaBoostContent_f9f04c {
  color: var(--brand-500);
}

.guildBoostCta_f9f04c + .guildBoostCta_f9f04c {
  margin-left: 10px;
}

.guildBoostCtaBoostWrapper_f9f04c,
.guildBoostCtaSecondary_f9f04c {
  position: relative;
}

.full-motion .guildBoostCtaBoostWrapper_f9f04c,
.full-motion .guildBoostCtaSecondary_f9f04c {
  transition: transform 0.08s;
}

.full-motion .guildBoostCtaSecondary_f9f04c {
  transition:
    background 0.08s, box-shadow 0.08s, transform 0.08s;
}

.guildBoostCtaBoost_f9f04c {
  border-radius: 4px;
  box-shadow:
    0 1px 2px hsl(var(--primary-500-hsl) / 0.2),
    0 8px 16px hsl(var(--primary-500-hsl) / 0.3);
  transition: box-shadow 0.08s;
  width: 100%;
}

.full-motion .guildBoostCtaBoostWrapper_f9f04c:hover,
.full-motion .guildBoostCtaBoostWrapper_f9f04c:focus-within,
.full-motion .guildBoostCtaSecondary_f9f04c:hover,
.full-motion .guildBoostCtaSecondary_f9f04c:focus {
  transform: translateY(-3px);
}

.full-motion .guildBoostCtaBoostWrapper_f9f04c:hover:after, .full-motion .guildBoostCtaBoostWrapper_f9f04c:focus-within:after, .full-motion .guildBoostCtaSecondary_f9f04c:hover:after, .full-motion .guildBoostCtaSecondary_f9f04c:focus:after {
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;
  }

.guildBoostCtaBoostWrapper_f9f04c:hover .guildBoostCtaBoost_f9f04c,
.guildBoostCtaBoostWrapper_f9f04c:focus-within .guildBoostCtaBoost_f9f04c,
.guildBoostCtaSecondary_f9f04c:hover,
.guildBoostCtaSecondary_f9f04c:focus {
  box-shadow:
    0 1px 2px hsl(var(--primary-500-hsl) / 0.2),
    0 12px 24px hsl(var(--primary-500-hsl) / 0.4);
}

.guildBoostCtaSecondary_f9f04c:hover,
.guildBoostCtaSecondary_f9f04c:focus {
  background-color: hsl(var(--white-500-hsl) / 0.05);
}

.guildBoostCtaBoostShine_f9f04c {
  color: hsl(var(--brand-500-hsl) / 0.1);
}

.guildBoostCtaGiftContent_f9f04c {
  display: inline-flex;
}

.guildBoostCtaGiftIcon_f9f04c {
  height: 16px;
  margin-right: 8px;
  width: 16px;
}

.FPContainer_f9f04c {
  margin-bottom: 23px;
}

.wrapper__5b98e {
  background-color: var(--background-secondary-alt);
  border-radius: 8px;
  padding: 60px 50px;
}

.heading__5b98e {
  margin-bottom: 30px;
  text-align: center;
}

.list__5b98e {
  border-top: 1px solid var(--interactive-muted);
}

.listItem__5b98e {
  border-bottom: 1px solid var(--interactive-muted);
}

.questionWrapper__5b98e {
  color: var(--interactive-normal);
  cursor: pointer;
  display: flex;
  padding: 12px 0;
  transition: color 0.1s;
}

.questionWrapperExpanded__5b98e,
.questionWrapper__5b98e:hover,
.questionWrapper__5b98e:active {
  color: var(--interactive-active);
}

.questionWrapperExpanded__5b98e {
  padding-bottom: 8px;
}

.question__5b98e {
  color: inherit;
  flex: 1 1 auto;
  padding-right: 12px;
  transition: color 0.1s;
}

.questionIcon__5b98e {
  flex: 0 0 auto;
}

.answer__5b98e {
  margin-bottom: 12px;
  width: 80%;
}

@media (max-width: 700px) {

.answer__5b98e {
    width: 100%
}
  }

.wrapper_b4589b {
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 1;
}

.innerWrapper_b4589b {
  align-items: center;
  background-color: var(--background-secondary-alt);
  border-radius: 50px;
  box-shadow: var(--elevation-high);
  box-sizing: border-box;
  display: flex;
  margin-bottom: 36px;
  padding: 12px 22px 12px 12px;
  pointer-events: all;
  position: relative;
  width: 438px;
}

.innerWrapper_b4589b:after,
  .innerWrapper_b4589b:before {
    border: 2px solid transparent;
    border-radius: inherit;
    box-sizing: border-box;
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

.innerWrapper_b4589b:after {
    border-color: var(--guild-boosting-blue);
    -webkit-mask: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
            mask: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

.innerWrapper_b4589b:before {
    border-color: var(--guild-boosting-purple);
  }

.theme-light .innerWrapper_b4589b {
  background-color: var(--background-secondary);
}

.guildInfo_b4589b {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  padding-right: 8px;
  text-overflow: ellipsis;
}

.guildIcon_b4589b {
  background-color: var(--background-primary);
  flex: 0 0 auto;
  margin-right: 14px;
}

.ctaButton_b4589b {
  /* The variable used for border-radius must match the height of the button as specified in the component props */
  border-radius: var(--custom-button-button-lg-height);
  flex: 0 0 auto;
}

.guildName_b4589b {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cannonWrapper_d00019 {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.cannon_d00019 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.confettiTriggerWrapper_d00019 {
  cursor: pointer;
  height: 100%;
  position: relative;
  z-index: 2;
  width: 100%;
}

.confettiTrigger_d00019 {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.progressBarMarker__1f1cb {
  align-items: center;
  background-color: hsl(var(--white-500-hsl) / 0.4);
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  height: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
  isolation: isolate;
  justify-content: center;
  position: absolute;
  transform: translateX(-50%);
  width: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
  z-index: 2;
}

  /* Increases the hit-target size */

  .progressBarMarker__1f1cb:after {
    content: '';
    height: 50px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    z-index: 1;
  }

.progressBarMarker__1f1cb.progressBarMarkerCurrent__1f1cb {
  background-color: transparent;
}

.progressBarMarkerCurrent__1f1cb .progressBarMarkerIndicator__1f1cb {
  box-shadow: 0 5px 11px rgba(0, 0, 0, 0.25);
}

.progressBarMarkerUnlocked__1f1cb .progressBarMarkerIndicator__1f1cb {
  background: var(--guild-boosting-pink);
  border-radius: 100%;
  content: '';
  height: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
  z-index: 0;
}

.progressBarMarkerUnlocked__1f1cb.progressBarMarkerLower__1f1cb .progressBarMarkerIndicator__1f1cb {
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  z-index: 3;
}

.progressBarMarkerLocked__1f1cb {
  cursor: pointer;
}

.progressBarMarkerLabel__1f1cb {
  color: var(--white-500);
  left: 50%;
  padding-top: 4px;
  opacity: 0.4;
  position: absolute;
  top: 100%;
  transition: opacity 0.125s;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Increases the hit-target size */

.progressBarMarkerLabel__1f1cb:after {
    content: '';
    height: 100%;
    left: 50%;
    padding: 3px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
  }

.progressBarMarkerUnlocked__1f1cb .progressBarMarkerLabel__1f1cb {
  opacity: 0.8;
}

.progressBarMarkerCurrent__1f1cb .progressBarMarkerLabel__1f1cb,
.progressBarMarkerLocked__1f1cb:hover .progressBarMarkerLabel__1f1cb {
  opacity: 1;
}

.progressBarMarkerUnlockedIcon__1f1cb {
  height: 16px;
  padding-right: 3px;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(calc(-50% + 1px));
  width: 16px;
}

.boostedTierIconBackground__1f1cb {
  background-color: var(--white-500);
  border-radius: 20px;
  height: 20px;
  left: 50%;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  transition: opacity 0.125s;
  transform: translate(-50%, -50%);
  width: 20px;
  z-index: 2;
}

.progressBarMarkerLocked__1f1cb:hover .boostedTierIconBackground__1f1cb {
  opacity: 1;
}

.boostedTierIcon__1f1cb {
  color: var(--guild-boosting-pink);
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  z-index: 4;
}

.progressBarMarkerUnlocked__1f1cb .boostedTierIcon__1f1cb {
  color: var(--white-500);
}

.progressBarMarkerCurrent__1f1cb .boostedTierIcon__1f1cb {
  height: 16px;
  width: 16px;
}

.progressBar_b28bb7 {
  height: 54px;
  isolation: isolate;
  margin: 0 auto 48px;
  max-width: 660px;
  position: relative;
}

.progressBarScrubber_b28bb7 {
  height: 8px;
  left: calc(var(--custom-guild-boosting-marketing-progress-bar-marker-dimensions) / 2 + var(--custom-guild-boosting-marketing-progress-bar-end-markers-margin));
  position: absolute;
  right: calc(var(--custom-guild-boosting-marketing-progress-bar-marker-dimensions) / 2 + var(--custom-guild-boosting-marketing-progress-bar-end-markers-margin));
  top: 13px;
}

.progressBarTrack_b28bb7 {
  background-color: hsl(var(--white-500-hsl) / 0.3);
  border-radius: 8px;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.progressBarFill_b28bb7 {
  background-image: linear-gradient(90deg, var(--guild-boosting-purple) 0%, var(--white-500) 100%);
  border-radius: 8px;
  position: absolute;
  height: 100%;
  left: 0;
  z-index: 2;
}

.progressBarCurrentProgressTooltip_b28bb7 {
  margin-top: 100px;
}

.progressBarCurrentProgressTooltipMarker_b28bb7 {
  border-radius: 100%;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  z-index: 3;
}

.progressBarCurrentProgressTooltipHeading_b28bb7 {
  font-weight: 600;
  margin-bottom: 2px;
}

.progressBarCurrentProgressTooltipSubheading_b28bb7 {
  display: flex;
  align-items: center;
}

.progressBarCurrentProgressTooltipSubheadingIcon_b28bb7 {
  color: var(--guild-boosting-pink);
  flex: 0 0 auto;
  height: 16px;
  margin-left: -2px;
  margin-right: 4px;
  width: 16px;
}

.progressBarCurrentProgressTooltipSubheadingCopy_b28bb7 {
  flex: 1 1 auto;
}

.tierCards_be48d0 {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.tierCard_be48d0 {
  background-image: linear-gradient(45deg, var(--guild-boosting-blue) 0%, var(--guild-boosting-purple) 100%);
  border-radius: var(--custom-guild-boosting-marketing-tier-cards-tier-card-border-radius);
  box-shadow: var(--elevation-high);
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 24px 36px 30px;
  position: relative;
  width: 338px;
}

.tierCardCurrentTier_be48d0 {
  background-image: linear-gradient(45deg, var(--guild-boosting-blue) 0%, var(--guild-boosting-purple) 100%);
  border-radius: 8px;
  padding: 4px 8px;
  position: absolute;
  left: 28px;
  text-transform: uppercase;
  top: 0;
  transform: translateY(-50%);
}

.tierCardHeader_be48d0 {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.tierCardHeading_be48d0 {
  flex: 0 0 auto;
}

.tierCardBoostRequirement_be48d0 {
  flex: 0 0 auto;
  opacity: 0.7;
}

.tierCardList_be48d0 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tierCardListItem_be48d0 {
  align-items: center;
  display: flex;
  gap: 8px;
}

.tierCardListIcon_be48d0 {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.tierCardSparkleHighlight_be48d0 {
  background-image: radial-gradient(100% 100% at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
  color: var(--white-500);
  height: 80px;
  position: absolute;
  width: 1px;
}

.theme-light .tierCardSparkleHighlight_be48d0 {
  background-image: radial-gradient(
    100% 100% at center,
    hsl(var(--guild-boosting-pink-hsl) / 1) 0%,
    hsl(var(--guild-boosting-pink-hsl) / 0) 50%
  );
  color: var(--guild-boosting-pink);
}

.tierCardSparkleHighlightTopRight_be48d0 {
  right: 0;
  top: 30px;
}

.tierCardSparkleHighlightBottomLeft_be48d0 {
  bottom: 30px;
  left: 0;
}

.tierCardBorderHighlight_be48d0 {
  border-radius: var(--custom-guild-boosting-marketing-tier-cards-tier-card-border-radius);
  box-sizing: border-box;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.tierCardBorderHighlightTopRight_be48d0 {
  border: 1px solid var(--guild-boosting-blue);
  -webkit-mask: radial-gradient(100% 100% at top right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
          mask: radial-gradient(100% 100% at top right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.tierCardBorderHighlightBottomLeft_be48d0 {
  border: 1px solid var(--guild-boosting-purple);
  -webkit-mask: radial-gradient(100% 100% at bottom left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
          mask: radial-gradient(100% 100% at bottom left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.tierCardSparkle1_be48d0 {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tierCardSparkle2_be48d0 {
  left: 11px;
  position: absolute;
  top: 10%;
}

.tierCardSparkle3_be48d0 {
  right: 21px;
  position: absolute;
  top: -20px;
}

.tierCardPerkRow_be48d0 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.tierCardNewFeatureBadge_be48d0 {
  margin-left: 8px;
  border-radius: 8px;
  background: white;
  color: var(--premium-tier-2-purple-for-gradients);
  align-self: center;
}

.heading__686cf {
  margin-bottom: 82px;
  text-align: center;
}

.tableWrapper__686cf {
  position: relative;
}

.table__686cf {
  text-align: center;
  width: 100%;
}

.columnHeading__686cf,
.tableCell__686cf {
  border-bottom: 1px solid hsl(var(--white-500-hsl) / 0.15);
}

.theme-light .columnHeading__686cf,
.theme-light .tableCell__686cf {
  border-bottom-color: hsl(var(--black-500-hsl) / 0.15);
}

.columnHeading__686cf {
  padding-bottom: 16px;
}

.tableCell__686cf {
  box-sizing: border-box;
  padding: 22px 0;
  vertical-align: middle;
  width: 20%;
}

.tableCellWrapper__686cf {
  padding: 0;
}

.tableCellInner__686cf {
  border-bottom: none;
  width: 100%;
}

.tableRowHeading__686cf {
  text-align: left;
}

.booleanValueIcon__686cf {
  color: var(--interactive-muted);
  display: block;
  margin: 0 auto;
}

.booleanValueTrue__686cf {
  color: var(--header-primary);
}

.recommendedTierHighlight__686cf {
  bottom: -16px;
  pointer-events: none;
  position: absolute;
  top: -38px;
  width: 20%;
}

.recommendedTierHighlight__686cf:after,
  .recommendedTierHighlight__686cf:before {
    border-radius: 16px;
    border: 2px solid transparent;
    box-sizing: border-box;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }

.recommendedTierHighlight__686cf:after {
    border-color: var(--guild-boosting-blue);
    -webkit-mask: linear-gradient(70deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
            mask: linear-gradient(70deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }

.recommendedTierHighlight__686cf:before {
    border-color: var(--guild-boosting-purple);
  }

.recommendedTierHighlightTier2__686cf {
  right: 20%;
}

.recommendedTierHighlightTier3__686cf {
  right: 0;
}

.recommendedTierHighlightTag__686cf {
  background-image: linear-gradient(30deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  border-radius: 8px;
  padding: 4px 8px;
  position: absolute;
  left: 50%;
  top: 1px;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.perkPreviewImage__686cf {
  background-color: var(--background-secondary-alt);
  border-radius: 8px;
  box-shadow: var(--elevation-high);
  display: block;
  height: 168px;
  width: 280px;
}

.wrapper__3add8 {
  text-align: center;
}

.heading__3add8 {
  margin-bottom: 32px;
}

.topPerksCards__3add8 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.topPerksCard__3add8 {
  background-color: var(--background-secondary-alt);
  border-radius: 16px;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 340px;
  max-width: 362px;
  padding: 32px 24px;
  width: 25%;
}

.topPerksCardImage__3add8 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  border-radius: 4px;
  display: block;
  height: 128px;
  margin: 0 auto 20px;
  width: auto;
}

.topPerksCardHeading__3add8 {
  margin-bottom: 4px;
}

.topPerksCardDescription__3add8 {
  color: var(--header-secondary);
}

.headerWave__1dfae {
  bottom: -1px;
  color: var(--background-primary);
  display: block;
  left: 50%;
  max-height: 400px;
  min-width: 1000px;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}

.bodyWave__1dfae {
  display: block;
  left: 50%;
  max-height: 1200px;
  min-width: 1000px;
  position: absolute;
  top: 10%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;
}

.bodyWaveGradientStop1__1dfae {
  stop-color: var(--background-primary);
}

.bodyWaveGradientStop2__1dfae {
  stop-color: var(--background-secondary-alt);
}

.bodyWaveGradientStop3__1dfae {
  stop-color: var(--background-primary);
}

.closeIconWrapper__6fd0e {
  margin: 0 auto;
  max-width: 1060px;
  mix-blend-mode: screen;
  position: relative;
  z-index: 2;
}

.theme-light .closeIconWrapper__6fd0e {
  mix-blend-mode: multiply;
}

.closeIcon__6fd0e {
  position: absolute;
  right: 24px;
  top: 48px;
  z-index: 2;
}

.scroller__6fd0e {
  background: var(--background-primary);
  height: 100%;
  position: relative;
  z-index: 1;
}

.content__6fd0e {
  margin: 0 auto;
  max-width: 1060px;
}

.headerContentWrapper__6fd0e {
  
  padding: 100px 32px 32px;
  position: relative;
  z-index: 2;
}

.header__6fd0e {
  background:
    center 15%/90% auto url(/assets/ea2ad3ad1bfd2975.svg) no-repeat,
    linear-gradient(359.37deg, rgba(0, 0, 0, 0.5) 12.68%, rgba(255, 255, 255, 0) 50.4%),
    linear-gradient(
      159.15deg,
      var(--premium-tier-0-header-gradient-1) 8.49%,
      var(--premium-tier-0-header-gradient-2) 32.21%,
      var(--premium-tier-0-header-gradient-3) 42.9%,
      var(--premium-tier-0-header-gradient-4) 66.06%,
      var(--premium-tier-0-header-gradient-5) 71.4%
    );
  position: relative;
}

.theme-light .header__6fd0e {
  background:
    center 15%/90% auto url(/assets/ea2ad3ad1bfd2975.svg) no-repeat,
    linear-gradient(359.37deg, rgba(255, 255, 255, 0.5) 12.68%, rgba(255, 255, 255, 0) 50.4%),
    linear-gradient(
      159.15deg,
      var(--premium-tier-0-header-gradient-1) 8.49%,
      var(--premium-tier-0-header-gradient-2) 32.21%,
      var(--premium-tier-0-header-gradient-3) 42.9%,
      var(--premium-tier-0-header-gradient-4) 66.06%,
      var(--premium-tier-0-header-gradient-5) 71.4%
    );
}

.heading__6fd0e {
  margin: 0 auto 48px;
  max-width: 960px;
  text-align: center;
}

.middleBodyContentWrapper__6fd0e {
  
  padding: 32px;
}

.lowerBody__6fd0e {
  position: relative;
}

.lowerBodyBackgroundImage__6fd0e {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  background: right 285px no-repeat url(/assets/32b48278e7e6c908.svg);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

@media (max-width: 1430px) {

.lowerBodyBackgroundImage__6fd0e {
    display: none
}
  }

.lowerBodyContentWrapper__6fd0e {
  
  padding: 32px;
  position: relative;
  z-index: 2;
}

.persistentCtaSpacer__6fd0e {
  height: 120px;
}

.tierComparisonTable__6fd0e {
  margin-bottom: 64px;
}

.popoutContainer__8641f {
  padding: var(--custom-message-helpers-popout-padding-width);
}

.mainContent__8641f {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.roleIconContainer__8641f {
  margin-right: var(--custom-message-helpers-popout-padding-width);
  width: 40px;
}

.roleName__8641f {
  margin-bottom: 4px;
}

.truncatingText__8641f {
  min-width: 0; /* https://css-tricks.com/flexbox-truncated-text/ */
}

.ctaButton__8641f {
  margin: 16px auto 0;
}

.ctaButtonContent__8641f {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boosterBadge__8641f {
  margin-right: 3px;
}

.wrapper__74bfa {
  margin-top: 4px;
  display: flex;
  align-items: center;
}

.icon__74bfa {
  display: block;
  margin-right: 8px;
}

.errorIcon__74bfa {
  color: var(--status-danger);
}

@value maxModalWidth from './MarkdownModal.module.css';

.video__1689b {
  border-radius: 3px;
}

@media (max-width: 490px) {
  .video__1689b {
    width: auto !important;
  }
  .video__1689b {
    /*
     * NOTE: Video embeds normally get a hard-coded width (see
     * ChangelogStandardTemplate.renderVideo) but that can cause it
     * to go off-screen on mweb. We force an "auto" width here which
     * causes some black bars (since the ratio doesn't match), but fixes
     * rendering off-screen.
     */
    /* stylelint-disable-next-line declaration-no-important */
  }
}

/* NOTE: Markdown overrides */

.container__1689b {
  padding-bottom: 20px;
}

.container__1689b p > img {
    border-radius: 5px;
  }

.image__1689b {
  border-radius: 5px;
}

.title__1689b {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
}

.lead__1689b {
  margin-bottom: 20px;
  border-radius: 5px;
}

.added__1689b,
.fixed__1689b,
.progress__1689b,
.improved__1689b {
  
  display: flex;
  align-items: center;
  margin-top: 40px;
}

/* Cannot use composes because we need priority inheritance */

.added__1689b.marginTop__1689b, .fixed__1689b.marginTop__1689b, .progress__1689b.marginTop__1689b, .improved__1689b.marginTop__1689b {
    margin-top: 20px;
  }

.added__1689b:after, .fixed__1689b:after, .progress__1689b:after, .improved__1689b:after {
    content: '';
    height: 1px;
    flex: 1 1 auto;
    margin-left: 4px;
    opacity: 0.6;
  }

.added__1689b,
h3.added__1689b {
  color: var(--text-positive);
}

.added__1689b:after, h3.added__1689b:after {
    background-color: var(--text-positive);
  }

.fixed__1689b,
h3.fixed__1689b {
  color: var(--text-danger);
}

.fixed__1689b:after, h3.fixed__1689b:after {
    background-color: var(--text-danger);
  }

.progress__1689b,
h3.progress__1689b {
  color: var(--text-warning);
}

.progress__1689b:after, h3.progress__1689b:after {
    background-color: var(--text-warning);
  }

.improved__1689b,
h3.improved__1689b {
  color: var(--text-brand);
}

.improved__1689b:after, h3.improved__1689b:after {
    background-color: var(--text-brand);
  }

.footer__1689b {
  display: flex;
}

.socialLink__1689b {
  margin-right: 16px;
}

.premiumBanner__1689b {
  background-image: linear-gradient(to left, var(--premium-tier-1-purple), var(--premium-tier-1-blue));
  color: var(--white-500);
  display: flex;
  align-items: center;
  border-radius: 5px;
  font-size: 16px;
  line-height: 18px;
  padding: 16px;
}

.premiumBanner__1689b .premiumIcon__1689b {
    flex-shrink: 0;
    margin-right: 16px;
    width: 36px;
    height: 36px;
  }

.theme-dark .date__1689b {
    color: var(--primary-300);
  }

.theme-dark .video__1689b {
    box-shadow: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.2);
  }

.theme-dark .socialLink__1689b {
    color: var(--primary-300);
  }

.theme-light .date__1689b {
    color: var(--primary-400);
  }

.theme-light .video__1689b {
    box-shadow: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1); /* light-elevation-high */
  }

.theme-light .socialLink__1689b {
    color: var(--primary-500);
  }

.messagePreviewContainer_f96002 {
  padding: 16px 16px 16px 0;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
  max-height: 100px;
}

.messageScroller_f96002 {
  height: 100%;
}

.container_f96002 {
  margin-bottom: 24px;
}

.header_f96002 {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.attachmentIcon_f96002 {
  color: var(--interactive-normal);
}

.contentContainer_f96002 {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.checkboxRow_d1f0f0:not(:last-child) {
    margin-bottom: 24px;
  }

.container__8f3cb {
  margin-bottom: var(--spacing-32);
}

.header__8f3cb {
  margin-bottom: var(--spacing-8);
  color: var(--header-secondary);
}

.upsellsContainer__8f3cb {
  border-radius: var(--spacing-8);
  background-color: var(--background-secondary);
}

.visual-refresh .upsellsContainer__8f3cb {
    border-radius: var(--radius-md);
    background-color: var(--background-surface-highest);
    border: 1px solid var(--border-subtle);
  }

.container__2c3b4 {
  margin-bottom: var(--spacing-16);
}

.header__2c3b4 {
  margin-bottom: var(--spacing-8);
  color: var(--header-secondary);
}

.upsellsContainer__2c3b4 {
  border-radius: var(--spacing-8);
  background-color: var(--background-secondary);
  margin-bottom: var(--spacing-8);
}

.navLinkButton__2c3b4 {
  padding: 0;
}

.container__3eeee {
  margin-bottom: 24px;
}

.guildContainer__3eeee {
  padding: 16px;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
}

.header__3eeee {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.guildInfo__3eeee {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.guildIcon__3eeee {
  margin-right: 8px;
}

.successImg_f05c94 {
  margin-bottom: 16px;
  height: 100px;
  width: 100px;
}

.container__41dd9 {
  margin-bottom: 24px;
}

.header__41dd9 {
  margin-bottom: 8px;
}

.bodyText__41dd9 {
  margin-bottom: 16px;
}

.container_dba137 {
  margin-bottom: 24px;
}

.header_dba137 {
  margin-bottom: 8px;
}

.bodyText_dba137 {
  margin-bottom: 16px;
}

.smsNumberText_dba137 {
  flex: 1;
}

.smsNumberContainer_dba137 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid var(--background-tertiary);
  padding: 8px;
}

.smsNumberContainer_dba137.copied_dba137 {
    border-color: var(--status-positive-background);
  }

.container__7bd4e {
  margin-bottom: 24px;
}

.userContainer__7bd4e {
  padding: 16px;
  border: 1px solid var(--background-modifier-accent);
  border-radius: 8px;
}

.header__7bd4e {
  margin-bottom: 8px;
  color: var(--header-secondary);
}

.userInfo__7bd4e {
  display: flex;
  align-items: center;
}

.userIcon__7bd4e {
  margin-right: 8px;
}

.slideContainer__01ce3 {
  display: flex;
  flex-direction: column;

  /* Because we are using Slides, we need to manually constrain the height. */
  /* Consider: top and bottom padding of modals */
  /* Clamp on: min and max high of small modals */
  max-height: max(200px, min(calc(100vh - 80px), 660px));
}

.wrapper_da5890 {
  position: absolute;
  display: flex;
  gap: 8px;
  z-index: 3; /* z-index of profile effects + 1 */
  transition: opacity 0.6s ease;
}

  .wrapper_da5890:empty {
    display: none;
  }

  .wrapper_da5890.biteSize_da5890 {
    top: 12px;
    right: 12px;
  }

  .wrapper_da5890.fullSize_da5890 {
    top: 12px;
    right: 16px;
  }

  .wrapper_da5890.panel_da5890 {
    top: 8px;
    right: 8px;
  }

.wrapper_f7ecac {
  background-color: var(--background-primary);
  box-shadow: var(--elevation-stroke);
  display: grid;
  grid-auto-flow: column;
  box-sizing: border-box;
  height: 32px;
  border-radius: 4px;
  align-items: center;
  justify-content: flex-start;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: box-shadow 100ms ease-out;
  position: relative;
  overflow: hidden;
}

.visual-refresh .wrapper_f7ecac {
    background-color: var(--background-surface-highest);
    box-shadow: var(--shadow-border), var(--shadow-low);
  }

.full-motion .wrapper_f7ecac:hover {
  box-shadow: var(--elevation-stroke), var(--elevation-medium);
}

.full-motion.visual-refresh .wrapper_f7ecac:hover {
  box-shadow: var(--shadow-border), var(--shadow-medium);
}

.button_f7ecac {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 4px;
  min-width: 24px;
  flex: 0 0 auto;
  color: var(--interactive-normal);
  cursor: pointer;
  position: relative;
}

.button_f7ecac:hover {
  color: var(--interactive-hover);
  background-color: var(--background-modifier-hover);
}

.button_f7ecac:active {
  padding-top: 5px;
  padding-bottom: 3px;
  color: var(--interactive-active);
  background-color: var(--background-modifier-active);
}

.button_f7ecac.selected_f7ecac {
  color: var(--interactive-active);
  background-color: var(--background-modifier-selected);
}

.separator_f7ecac {
  flex: 0 0 auto;
  width: 1px;
  margin: 0 4px;
  height: 100%;
  background-color: var(--background-modifier-accent);
}

.button_f7ecac.disabled_f7ecac,
.button_f7ecac.disabled_f7ecac:hover,
.button_f7ecac.disabled_f7ecac:active {
  opacity: 0.5;
  padding: 4px;
  color: var(--interactive-normal);
  background-color: transparent;
  cursor: default;
}

.button_f7ecac.dangerous_f7ecac {
  color: var(--status-danger);
}

.button_f7ecac.dangerous_f7ecac:hover {
  color: var(--red-400);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .wrapper_f7ecac {
    border: 1px solid CanvasText;
    /* extra height to accomodate borders */
    height: 36px;
  }

.enable-forced-colors .button_f7ecac {
    background-color: ButtonFace;
    border: 1px solid ButtonFace;
    color: ButtonText;
    /* extra height and width to accomodate borders */
    height: 26px;
    min-width: 26px;
  }

.enable-forced-colors .button_f7ecac:hover,
    .enable-forced-colors .button_f7ecac:active,
    .enable-forced-colors .button_f7ecac.selected_f7ecac {
      background-color: HighlightText;
      border-color: Highlight;
      color: Highlight;
    }

.popover__2d0ab {
  z-index: 1;
  position: absolute;
  height: auto;
  height: initial;
  border-radius: 100px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  top: -16px;
  opacity: 0;
  pointer-events: none;
}

  .popover__2d0ab.visible__2d0ab,
  .popover__2d0ab:focus-within,
  .popover__2d0ab:hover {
    opacity: 1;
  }

  .reduce-motion .popover__2d0ab {
    pointer-events: all;
  }

.activityPopover__2d0ab {
  right: 8px;
}

.statusPopover__2d0ab {
  right: min(8px, calc(50% - 29px));
}

.avatarPopover__2d0ab {
  left: 0;
  right: 0;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
}

:not(.keyboard-mode).full-motion .popover__2d0ab.visible__2d0ab,
  :not(.keyboard-mode).full-motion .popover__2d0ab:focus-within,
  :not(.keyboard-mode).full-motion .popover__2d0ab:hover {
    opacity: 0;
    animation: fadeIn__2d0ab 150ms ease forwards;
  }

:not(.keyboard-mode).full-motion .popover__2d0ab.visible__2d0ab.expandable__2d0ab, :not(.keyboard-mode).full-motion .popover__2d0ab:focus-within.expandable__2d0ab, :not(.keyboard-mode).full-motion .popover__2d0ab:hover.expandable__2d0ab {
      animation-delay: 450ms;
    }

:not(.keyboard-mode).full-motion .popover__2d0ab.fadeInAndOut__2d0ab {
    opacity: 0;
    animation:
      fadeIn__2d0ab 150ms ease-in forwards,
      fadeOut__2d0ab 150ms 2s ease-out forwards;
  }

.reduce-motion .popover__2d0ab.fadeInAndOut__2d0ab {
    opacity: 0;
    animation:
      fadeIn__2d0ab 0s ease-in forwards,
      fadeOut__2d0ab 0s 2s ease-out forwards;
  }

@keyframes fadeIn__2d0ab {
  0% {
    top: -14px;
    opacity: 0;
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    top: -16px;
    opacity: 1;
    pointer-events: all;
  }
}

@keyframes fadeOut__2d0ab {
  0% {
    top: -16px;
    opacity: 1;
    pointer-events: all;
  }

  1% {
    pointer-events: none;
  }

  100% {
    top: -14px;
    opacity: 0;
    pointer-events: none;
  }
}

.button__2d0ab {
  height: auto;
  height: initial;
  min-width: 0;
  min-width: initial;
  padding: 4px;
}

.button__2d0ab:hover {
    background: var(--background-modifier-hover);
  }

.button__2d0ab:hover .icon__2d0ab {
      fill: var(--interactive-hover);
    }

.button__2d0ab:active {
    background: var(--background-modifier-active);
  }

.button__2d0ab:active .icon__2d0ab {
      fill: var(--interactive-active);
    }

.tooltipContainer__2d0ab:first-child > .button__2d0ab {
    padding-left: 6px;
    border-radius: 100px 6px 6px 100px;
    margin-left: 0;
  }

.tooltipContainer__2d0ab:last-child > .button__2d0ab {
    padding-right: 6px;
    border-radius: 6px 100px 100px 6px;
    margin-right: 0;
  }

.tooltipContainer__2d0ab:empty {
    display: none;
  }

.container__52c9d {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
}

.background__52c9d {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--background-secondary);
  opacity: 0.98;
}

.content__52c9d {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.closeButton__52c9d {
  position: absolute;
  right: 16px;
  top: 16px;
}

.closeButtonIcon__52c9d {
  color: var(--interactive-normal);
}

.header__52c9d,
.description__52c9d {
  text-align: center;
}

.upsellImage__52c9d {
  width: 124px;
}

.noParentContainer_d829e7 {
  top: 0;
  left: 0;
  bottom: 0;
}

.hasParentContainer_d829e7 {
  top: -16px;
  left: 0;
  bottom: 0;
}

.hasTabParentContainer_d829e7 {
  top: -48px;
  left: 0;
  bottom: 0;
}

.container_d829e7 {
  box-sizing: border-box;
  position: absolute;
  background-color: var(--background-secondary);
  z-index: 1001;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.closeButton_d829e7 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 16px;
  color: var(--interactive-active);
}

.contentContainer_d829e7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 2;
}

.image_d829e7 {
  margin: 0 0 32px;
}

.title_d829e7 {
  padding: 0 32px;
}

.titleNoSocialProof_d829e7 {
  margin-bottom: 24px;
}

.body_d829e7 {
  padding: 0 32px;
  text-align: center;
}

.ctaContainer_d829e7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--background-tertiary);
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 0 0 5px 5px;
}

.secondaryCTA_d829e7 {
  margin-right: 8px;
  color: var(--premium-nitro-pink-text);
}

.secondaryCTA_d829e7:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.banner__97f37 {
  width: 100%;
  border-radius: 8px;
  max-width: 304px;
}

  .banner__97f37.hasTrialOffer__97f37 {
    max-height: 172px;
    margin-top: 16px;
    margin-bottom: 16px;
  }

.wrapper__97f37 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: var(--background-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.closeButton__97f37 {
  position: absolute;
  right: 16px;
  top: 16px;
  color: var(--interactive-normal);
  cursor: pointer;
}

.contentFill__97f37 {
  background: var(
    --gradients-nitro-classic-diagonal,
    linear-gradient(45deg, var(--premium-tier-1-blue) 0%, var(--premium-tier-1-purple) 75.25%)
  );
  padding: 36px 84px;
  margin-top: 24px;
  border-radius: 8px;
}

.nitroWheel__97f37 {
  color: var(--premium-tier-1-purple);
  padding-right: 4px;
}

.content__97f37 {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--text-normal);
  box-sizing: border-box;
  text-align: center;
}

.header__97f37 {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.headerText__97f37 {
  margin-left: 4px;
}

.subheaderText__97f37 {
  padding: 0 32px;
  max-width: 350px;
  white-space: pre-line;
  color: var(--header-secondary);
}

.subheaderText__97f37 a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    color: var(--text-normal);
  }

.ctaActionWrapper__97f37 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
}

.listWrapper_affa7e {
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.listHeight_affa7e {
  visibility: hidden;
}

.listItems_affa7e {
  contain: layout;
  position: absolute;
}

.scroller_affa7e {
  height: 100%;
}

.wrapper__4e6ce {
  background-color: var(--background-tertiary);
  display: grid;
  grid-template-rows: 1fr auto;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 48px;
  border-radius: 0 0 0 8px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .wrapper__4e6ce {
    border-right: 1px solid CanvasText;
  }

.visual-refresh .wrapper__4e6ce {
    background-color: var(--background-base-lower);
  }

.container__183c2 {
  display: flex;
  align-items: center;
}

.icon__183c2 {
  flex: 0 0 auto;
  /* NOTE(amadeus): Should this be interactive-muted? */
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.visual-refresh .icon__183c2 {
    margin-left: -2px;
    margin-right: calc(var(--space-8) - 2px);
  }

.size56__183c2 .avatarContainer__183c2 {
    width: 56px;
    height: 56px;
  }

.size56__183c2 .avatarContainerMasked__183c2 {
    margin-right: -14px;

    width: 56px;
    height: 56px;
  }

.size56__183c2 .clickableAvatar__183c2 {
    width: 56px;
    height: 56px;
  }

.size56__183c2 .emptyUser__183c2 {
    width: 56px;
    height: 56px;
  }

.size32__183c2 .avatarContainer__183c2 {
    width: 32px;
    height: 32px;
  }

.size32__183c2 .avatarContainerMasked__183c2 {
    margin-right: -8px;

    width: 32px;
    height: 32px;
  }

.size32__183c2 .clickableAvatar__183c2 {
    width: 32px;
    height: 32px;
  }

.size32__183c2 .emptyUser__183c2 {
    width: 32px;
    height: 32px;
  }

.size24__183c2 .avatarContainer__183c2 {
    width: 24px;
    height: 24px;
  }

.size24__183c2 .avatarContainerMasked__183c2 {
    margin-right: -6px;

    width: 24px;
    height: 24px;
  }

.size24__183c2 .clickableAvatar__183c2 {
    width: 24px;
    height: 24px;
  }

.size24__183c2 .emptyUser__183c2 {
    width: 24px;
    height: 24px;
  }

.size16__183c2 .avatarContainer__183c2 {
    width: 16px;
    height: 16px;
  }

.size16__183c2 .avatarContainerMasked__183c2 {
    margin-right: -3px;

    width: 16px;
    height: 16px;
  }

.size16__183c2 .clickableAvatar__183c2 {
    width: 16px;
    height: 16px;
  }

.size16__183c2 .emptyUser__183c2 {
    width: 16px;
    height: 16px;
  }

.clickableAvatar__183c2 {
  border-radius: 50%;
  cursor: pointer;
}

.emptyUser__183c2 {
  border-radius: 50%;
  background: var(--background-accent);
}

.avatar__183c2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.moreUsers__183c2 {
  box-sizing: border-box;
  background-color: var(--background-tertiary);
  font-weight: 500;
  color: var(--text-normal);
  display: flex;
  justify-content: center;
  align-items: center;
}

.size56__183c2 .moreUsers__183c2 {
  font-size: 24px;
  height: 56px;
  min-width: 56px;
  border-radius: 28px;
  padding: 0 8px;
}

.size32__183c2 .moreUsers__183c2 {
  font-size: 12px;
  height: 32px;
  min-width: 32px;
  border-radius: 16px;
  padding: 0 8px;
}

.size24__183c2 .moreUsers__183c2 {
  font-size: 12px;
  height: 24px;
  min-width: 24px;
  border-radius: 12px;
  padding: 0 8px;
}

.size16__183c2 .moreUsers__183c2 {
  font-size: 10px;
  height: 16px;
  min-width: 16px;
  border-radius: 8px;
  padding: 0 4px;
}

/* stylelint-disable color-no-hex */
.premiumTooltipFooterBackground__7d7fe {
  background: linear-gradient(90deg, #b473f5 0%, #e292aa 100%);
  width: '100%';
}
.tooltipBodyContainer__7d7fe {
  text-align: center;
  padding: 8px 12px;
}
.tooltipPremiumFooterContainer__7d7fe {
  background: linear-gradient(90deg, #b473f5 0%, #e292aa 100%);
  color: #ffffff;
  border-radius: 0 0 5px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tooltipRemovePadding__7d7fe {
  padding: 0;
}
.gemIcon__7d7fe {
  margin-top: 2px;
  margin-left: -4px;
}
.tooltipPremiumFooterSegment__7d7fe {
  flex-basis: 0;
  flex-grow: 1;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tooltipPremiumFooterTierSegment__7d7fe {
  border-right: 1px solid;
  border-color: var(--background-floating);
}
.clanBadgeContainer__7d7fe img {
    margin: 0;
  }

.row_b1f768 {
  display: flex;
  align-items: center;
}

.row_b1f768 + .row_b1f768 {
  margin-top: 8px;
}

.rowGuildName_b1f768 {
  align-items: flex-start;
}

.rowIcon_b1f768 {
  flex-shrink: 0;
  margin-right: 8px;
}

.rowIconV2_b1f768 {
  
  margin-top: 2px;
}

.activityIcon_b1f768 {
  
  width: var(--custom-guild-tooltip-icon-size);
  height: var(--custom-guild-tooltip-icon-size);
  color: var(--interactive-normal);
}

.stageListenerPill_b1f768 {
  margin-left: 8px;
  padding: 0 8px;

  display: flex;
  flex-direction: row;
  align-items: center;

  background-color: var(--background-tertiary);
  border-radius: 12px;
  height: 24px;
}

.stageListenerCount_b1f768 {
  margin-left: 4px;
}

.guildNameText_b1f768 {
  word-wrap: break-word;
  color: var(--text-normal);

  /**
   * `break-word` breaks for flex elements unless we set sizing.
   * Reference: <https://github.com/philipwalton/flexbugs/issues/39>
   */
  min-width: 0;
}

.viewAsRolesWarning_b1f768 {
  margin: 8px 0 4px;
}

.guildNameTextLimitedSize_b1f768 {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.muteText_b1f768 {
  font-weight: 500;
}

.muteTextWithActivity_b1f768 {
  margin-top: 8px;
}

.invitesDisabledTooltip_b1f768 {
  margin-top: 2px;
}

.navigationIcon__90d72 {
  display: block;
  width: 48px;
  height: 48px;
}

.badgeIcon__90d72 {
  width: 12px;
  height: 12px;
}

.guildSeparator__90d72 {
  height: 2px;
  width: 32px;
  border-radius: 1px;
  background-color: var(--background-modifier-accent);
}

.guildsError__90d72 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  padding: 0;
  font-size: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--background-primary);
  color: var(--text-normal);
  border-color: var(--status-danger);
  transition: background-color 150ms ease-out;
}

.errorInner__90d72 {
  font-weight: 700;
}

.guildsError__90d72:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--white-500);
  border-color: var(--status-danger);
  background-color: var(--status-danger);
}

.circleButtonBase__90d72 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  transition:
    color 150ms ease-out, background-color 150ms ease-out;
}

.circleIconButton__90d72 {
  
  color: var(--green-360);
  background-color: var(--background-primary);
}

.circleIconButton__90d72.selected__90d72 {
  color: var(--white-500);
  background-color: var(--green-360);
}

.nitroUpsell__90d72 {
  
  background: linear-gradient(135deg, var(--premium-tier-2-purple) 0%, var(--premium-tier-2-pink) 100%);
  color: var(--white-500);
}

.nitroUpsellIcon__90d72 {
  stroke: black 2px;
}

.circleIcon__90d72 {
  width: 24px;
  height: 24px;
}

.plus__90d72 {
  position: relative;
  top: -1px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 40px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 40px;
  font-weight: 400;
}

.createJoinContainer__90d72 {
  position: relative;
  width: 50px;
}

.pill__90d72 {
  position: absolute;
  left: 0;
  top: 0;
}

.listItem__90d72 {
  position: relative;
  margin: 0 0 8px;
  display: flex;
  justify-content: center;
  width: var(--custom-guild-list-width);
}

.listItemWrapper__90d72:active {
    transform: translateY(1px) translateZ(0);
  }

.listItemTooltip__90d72 {
  max-width: 196px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  word-wrap: break-word;
}

.placeholderMask__90d72 {
  display: block;
}

.dragInner__90d72 {
  width: 48px;
  height: 48px;
}

.iconBadge__90d72 {
  background-color: var(--background-accent);
}

.iconBadge__90d72.participating__90d72 {
    background-color: var(--green-360);
  }

.unavailableBadge__90d72 {
  color: var(--red-400) !important;
}

.unavailableBadge__90d72 {
  background-color: var(--white-500);
  /* Needs !important to override .base in Badges.module.css */
  /* stylelint-disable-next-line declaration-no-important */
}

.dragInner__90d72 {
  background-color: var(--background-primary);
}

.tutorialContainer__90d72 {
  position: relative;
}

.upsellTooltip__90d72 {
  display: flex;
}

.upsellIcon__90d72 {
  flex: 0 0 auto;
  margin-right: 8px;
  margin-left: -6px;
}

.upsellText__90d72 {
  flex: 1 1 auto;
  line-height: 22px;
}

.listItemTooltip__90d72 {
  color: var(--text-normal);
}

.visual-refresh .listItemTooltipContent__90d72 {
    padding: 8px;
  }

.guildIcon__0fa6d {
  align-items: center;
  background-color: var(--background-primary);
  color: var(--text-normal);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.mask__0fa6d {
  display: block;
}

.guildAcronym__0fa6d {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guildIconWithoutImage__0fa6d {
  background-color: var(--background-primary);
}

.categoryItemLockIconContainer__0fa6d {
  position: absolute;
  background-color: var(--background-primary);
  border-radius: 50%;
  border: 1px solid var(--background-tertiary);
  height: 16px;
  width: 16px;
  top: auto;
  right: -1px;
  bottom: -1px;
  left: auto;
}

.categoryItemLockIcon__0fa6d {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--icon-primary);
}

.categoryItem_b9ee0c {
  cursor: pointer;
}

.categoryItemGuildCategory_b9ee0c,
.categoryItemPackCategory_b9ee0c {
  height: var(--custom-emoji-picker-constants-guild-category-icon-size);
  margin-bottom: var(--custom-emoji-picker-constants-guild-category-icon-margin-verical);
  width: var(--custom-emoji-picker-constants-guild-category-icon-size);
  position: relative;
}

.categoryItemPackCategory_b9ee0c {
  
}

.categoryItemGuildCategory_b9ee0c {
  
}

.categoryItemDefaultCategory_b9ee0c {
  
  border-radius: 4px;
  height: var(--custom-emoji-picker-constants-unicode-category-icon-size);
  margin-bottom: var(--custom-emoji-picker-constants-unicode-category-icon-margin-vertical);
  padding: var(--custom-emoji-picker-constants-unicode-category-icon-padding);
  transition: background-color 0.1s ease-in-out;
  width: var(--custom-emoji-picker-constants-unicode-category-icon-size);
}

.categoryItemDefaultCategory_b9ee0c:hover {
    background-color: var(--background-modifier-hover);
  }

.categoryItemDefaultCategory_b9ee0c:hover .categoryIcon_b9ee0c {
      color: var(--interactive-hover);
    }

.categoryItemRecentEmoji_b9ee0c {
  margin-bottom: var(--custom-emoji-picker-constants-guild-category-icon-margin-verical);
}

.categoryItemDefaultCategorySelected_b9ee0c,
  .categoryItemDefaultCategorySelected_b9ee0c:hover {
    background-color: var(--background-primary);
  }

.categoryItemDefaultCategorySelected_b9ee0c .categoryIcon_b9ee0c, .categoryItemDefaultCategorySelected_b9ee0c:hover .categoryIcon_b9ee0c {
      color: var(--interactive-active);
    }

.categoryIcon_b9ee0c {
  color: var(--interactive-normal);
}

.guildCategorySeparator_b9ee0c {
  margin: var(--custom-emoji-picker-constants-category-separator-margin-vertical) 0;
  border: none;
  border-bottom: var(--custom-emoji-picker-constants-category-separator-size) solid var(--background-modifier-accent);
}

.theme-light .categoryItemDefaultCategorySelected_b9ee0c .categoryIcon_b9ee0c, .theme-light .categoryItemDefaultCategorySelected_b9ee0c:hover .categoryIcon_b9ee0c {
        color: var(--interactive-active);
      }

.unicodeShortcut_b9ee0c {
  align-items: center;
  background: inherit;
  color: var(--interactive-normal);
  cursor: pointer;
  bottom: 0;
  display: flex;
  height: var(--custom-emoji-picker-constants-unicode-category-shortcut-height);
  justify-content: center;
  left: 0;
  opacity: 1;
  position: absolute;
  width: 100%;
}

.full-motion .unicodeShortcut_b9ee0c {
    transition:
      opacity 0.1s, transform 0.1s;
  }

.unicodeShortcut_b9ee0c:hover {
    color: var(--interactive-hover);
  }

.visual-refresh .unicodeShortcut_b9ee0c {
    box-sizing: border-box;
    border-top: 1px solid var(--border-normal);
  }

.unicodeShortcutInvisible_b9ee0c {
  opacity: 0;
  transform: translateY(var(--custom-emoji-picker-constants-unicode-category-shortcut-height));
}

.hideUnicodeShortcut_b9ee0c {
  display: none;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .unicodeShortcut_b9ee0c {
    background-color: ButtonFace;
    border-top: 1px solid CanvasText;
    color: ButtonText;
    height: calc(var(--custom-emoji-picker-constants-unicode-category-shortcut-height) - 1px);
  }

.enable-forced-colors .categoryItemGuildCategory_b9ee0c,
  .enable-forced-colors .categoryItemDefaultCategory_b9ee0c {
    border: 1px solid Canvas;
    border-radius: 4px;
    transition: none;
  }

.enable-forced-colors .categoryItemGuildCategory_b9ee0c .categoryIcon_b9ee0c, .enable-forced-colors .categoryItemDefaultCategory_b9ee0c .categoryIcon_b9ee0c {
      color: ButtonText;
    }

.enable-forced-colors .categoryItemGuildCategory_b9ee0c:hover, .enable-forced-colors .categoryItemDefaultCategory_b9ee0c:hover {
      background: ButtonFace;
      border-color: ButtonText;
    }

.enable-forced-colors .categoryItemDefaultCategorySelected_b9ee0c,
    .enable-forced-colors .categoryItemDefaultCategorySelected_b9ee0c:hover {
      background-color: HighlightText;
      border-color: Highlight;
    }

.enable-forced-colors .categoryItemDefaultCategorySelected_b9ee0c .categoryIcon_b9ee0c, .enable-forced-colors .categoryItemDefaultCategorySelected_b9ee0c:hover .categoryIcon_b9ee0c {
        color: Highlight;
      }

.guildEmojiSectionItems_b9ee0c {
  position: relative;
}

.guildEmojiSectionHighlighted_b9ee0c:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -8px;
    right: -8px;
    bottom: 0;
  }

/* We're using custom hex values to mimic brand colors at 30% opacity,
   because we need these gradients to be fully opaque */

.theme-dark .guildEmojiSectionHighlighted_b9ee0c:before {
      /* stylelint-disable-next-line color-no-hex */
      background: linear-gradient(90deg, #503572 0%, #673471 50%, #623e55 100%);
    }

.theme-light .guildEmojiSectionHighlighted_b9ee0c:before {
      /* stylelint-disable-next-line color-no-hex */
      background: linear-gradient(90deg, #d7c6ec 0%, #e7c5ea 50%, #e3ccd9 100%);
    }

.wrapper_ac2cfb {
  background-color: var(--background-tertiary);
  border-radius: 4px;
  display: flex;
  padding: 10px 8px 8px;
  margin: 8px 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-normal);
}

.icon_ac2cfb {
  min-width: var(--custom-emoji-picker-constants-emoji-size);
  height: 16px;
  color: var(--status-danger);
}

.close_ac2cfb {
  width: 14px;
  height: 14px;
  color: var(--interactive-normal);
  cursor: pointer;
}

.close_ac2cfb:hover {
    color: var(--interactive-hover);
  }

.content_ac2cfb {
  flex: 1 1 auto;
}

@value iconSize 20px;

.visuallyHidden__0d242 {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.tooltip__0d242 {
  max-width: 275px;
}

.tooltipContainer__0d242 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltipHeadingContainer__0d242 {
  display: flex;
  align-items: center;
}

.nitroWheel__0d242 {
  padding-right: 4px;
}

.shine__0d242 {
  visibility: hidden;
  animation-duration: 1.5s;
  /* this is already reduced on the JS side */
  /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
  animation-name: Shine__0d242;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  color: hsl(var(--white-500-hsl) / 0.1);
}

@keyframes Shine__0d242 {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(200%, 0, 0);
  }
}

input[type='checkbox']:focus-visible + .label__0d242 {
  box-shadow: 0 0 8px var(--brand-500);
}

.label__0d242 {
  position: relative;
  display: flex;
  padding: 6px;
  color: var(--text-normal);
  background: var(--background-tertiary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  width: 20px;
  height: 20px;
  transition: background 250ms ease-out;
}

.labelChecked__0d242 {
  background: var(--brand-500);
  box-shadow: none;
  box-shadow: initial;
}

.label__0d242:hover .shine__0d242 {
  visibility: visible;
}

.icon__0d242 {
  position: absolute;
  transition: opacity 300ms;
  opacity: 1;
}

.diversitySelectorButton_a45a2a {
  width: var(--custom-emoji-picker-constants-diversity-emoji-size);
  height: var(--custom-emoji-picker-constants-diversity-emoji-size);
  cursor: pointer;
}

.diversitySelectorOptions_a45a2a {
  background-color: var(--background-secondary-alt);
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid var(--background-tertiary);
  top: 12px;
  right: 7px;
}

.diversitySelectorOptionsHasTabWrapper_a45a2a {
  top: 0;
  right: 11px;
}

.diversityEmojiItem_a45a2a {
  width: var(--custom-emoji-picker-constants-diversity-emoji-size);
  height: var(--custom-emoji-picker-constants-diversity-emoji-size);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: var(--custom-emoji-picker-constants-emoji-container-padding-vertical)
    var(--custom-emoji-picker-constants-emoji-container-padding-horizontal);
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}

.diversityEmojiItem_a45a2a:hover {
    background-color: var(--background-modifier-hover);
  }

.diversityEmojiItemImage_a45a2a {
  width: var(--custom-emoji-picker-constants-diversity-emoji-size);
  height: var(--custom-emoji-picker-constants-diversity-emoji-size);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .diversitySelectorButton_a45a2a {
    background-color: HighlightText;
    border: 1px solid Highlight;
    border-radius: 4px;
    padding: 2px;
  }

.enable-forced-colors .diversityEmojiItem_a45a2a {
    background-color: ButtonFace;
    border: 1px solid ButtonFace;
    border-radius: 4px;
  }

.enable-forced-colors .diversityEmojiItem_a45a2a:hover {
      border-color: ButtonText;
    }

.visual-refresh .diversitySelectorOptions_a45a2a {
    top: 19px;
    right: 11px;
  }

.visual-refresh .diversitySelectorOptionsHasTabWrapper_a45a2a {
    top: 3px;
  }

.wrapper_c0e32c {
  position: relative;
  border-radius: var(--custom-emoji-picker-border-radius);
  transition: box-shadow 0.2s ease-out;
}

  .wrapper_c0e32c.isBurstReactionPicker_c0e32c {
    border-radius: var(--custom-emoji-picker-border-radius);
    box-shadow: 0 0 0 2px var(--bg-brand);
  }

  .wrapper_c0e32c.isBurstReactionPicker_c0e32c:before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: '';
      box-shadow: 0 0 100px var(--bg-brand);
      opacity: 0.5;
      pointer-events: none;
    }

.emojiPicker_c0e32c {
  background-color: var(--background-secondary);
  box-shadow: var(--shadow-border), var(--shadow-high);
  border-bottom-right-radius: var(--custom-emoji-picker-border-radius);
  border-bottom-left-radius: var(--custom-emoji-picker-border-radius);
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto 1fr auto;
  height: var(--custom-emoji-picker-constants-emoji-picker-height);
  overflow: hidden;
  width: var(--custom-emoji-picker-constants-min-emoji-picker-width);
}

.emojiPickerHasTabWrapper_c0e32c .emojiPicker_c0e32c {
    background-color: transparent;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    width: auto;
  }

.visual-refresh .emojiPicker_c0e32c {
    background-color: var(--background-surface-high);
  }

.header_c0e32c {
  display: flex;
  background-color: var(--background-secondary);
  border-top-left-radius: var(--custom-emoji-picker-border-radius);
  border-top-right-radius: var(--custom-emoji-picker-border-radius);
  align-items: center;
  box-shadow: var(--shadow-low);
  margin: 0 -1px;
  padding: 12px;
  z-index: 100;
  position: relative;
  grid-column: 1 / 3;
}

.emojiPickerHasTabWrapper_c0e32c .header_c0e32c {
    padding: 0 16px 16px;
    margin: 0;
    background-color: transparent;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

.isBurstReactionPicker_c0e32c .header_c0e32c {
    margin: 0;
  }

.visual-refresh .header_c0e32c {
    background-color: var(--background-surface-high);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
    padding: var(--custom-gif-picker-gutter-size);
    padding-top: var(--spacing-16);
  }

.visual-refresh .emojiPickerHasTabWrapper_c0e32c .header_c0e32c {
    padding: var(--custom-gif-picker-gutter-size);
  }

.searchBar_c0e32c {
  flex: 1;
  margin-right: var(--spacing-12);
}

.searchBarFullRow_c0e32c {
  grid-column: 1 / 3;
}

.diversitySelector_c0e32c {
  grid-column: 2 / 3;
}

.categoryList_c0e32c {
  position: absolute;
  top: 58px;
  bottom: 0;
  left: 0;
  width: 48px;
  overflow: hidden;
  border-bottom-left-radius: var(--custom-emoji-picker-border-radius);
}

.emojiPickerHasTabWrapper_c0e32c .categoryList_c0e32c {
    top: 50px;
  }

.visual-refresh .categoryList_c0e32c {
    top: 69px;
  }

.visual-refresh .emojiPickerHasTabWrapper_c0e32c .categoryList_c0e32c {
    top: 53px;
  }

.bodyWrapper_c0e32c {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  position: relative;
}

.emojiPickerListWrapper_c0e32c {
  grid-row: 2 / 2;
  overflow: hidden;
  position: relative;
}

.inspector_c0e32c {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.burstToggle_c0e32c {
  margin-right: 12px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .header_c0e32c {
    border-bottom: 1px solid CanvasText;
  }

@media (max-width: 485px) {
  .emojiPicker_c0e32c {
    width: 350px;
  }
}

.inspector_aeaaeb {
  box-sizing: border-box;
  height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-height);
  width: 100%;
  padding: 0 16px;
  background-color: var(--background-secondary-alt);
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.visual-refresh .inspector_aeaaeb {
    background-color: var(--background-base-lower);
    border-top: 1px solid var(--border-normal);
  }

.graphicPrimary_aeaaeb {
  height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions);
  width: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions);
}

.graphicSecondary_aeaaeb {
  height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions);
  margin-left: 8px;
  width: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions);
}

.textWrapper_aeaaeb {
  flex: 1;
  margin-left: 8px;
  overflow: hidden;
}

.titlePrimary_aeaaeb {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.titleSecondary_aeaaeb {
  color: var(--interactive-normal);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.favorite_aeaaeb {
  margin-right: 3px;
  margin-bottom: -1px;
}

.badgeLabel_aeaaeb {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  padding: 4px 8px;
  gap: 4px;
  text-transform: uppercase;
}

.topGuildEmojiBadge_aeaaeb {
  /* stylelint-disable-next-line color-no-hex */
  background: linear-gradient(268.26deg, #bf5151 0%, #db803f 102.45%);
}

.newlyAddedBadge_aeaaeb {
  /* stylelint-disable-next-line color-no-hex */
  background: linear-gradient(268.26deg, #097d8d 0%, #60a654 102.45%);
}

.newlyAddedBadgeIcon_aeaaeb {
  width: 14px;
  height: 14px;
  margin: 2px 2px 0 0;
  color: white;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .inspector_aeaaeb {
    border-top: 1px solid CanvasText;
  }

.emoji__045fa {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

.glyphEmoji__045fa {
  
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}

.icon__045fa {
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  fill: var(--interactive-normal);
}

.wrapper__29ebd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;

  font-size: 14px;
  font-weight: 500;
}

.sadImage__29ebd {
  width: 90px;
  height: 90px;
  background-size: 90px;
  background-repeat: no-repeat;

  margin-bottom: 20px;
}

.theme-dark .wrapper__29ebd {
    color: var(--primary-400);
  }

.theme-dark .sadImage__29ebd {
    background-image: url(/assets/2a563d3b06091b16.svg);
  }

.theme-light .wrapper__29ebd, .theme-dark .forceLightTheme__29ebd .wrapper__29ebd {
    /* stylelint-disable-next-line color-no-hex */
    color: #99aab5; /* $grey-1 */
  }

.theme-light .sadImage__29ebd, .theme-dark .forceLightTheme__29ebd .sadImage__29ebd {
    background-image: url(/assets/ed7b8a00de132314.svg);
  }

.wrapper__14245 {
  align-items: center;
  background-color: var(--background-secondary);
  box-sizing: border-box;
  display: flex;
  height: var(--custom-expression-picker-constants-expression-picker-list-section-heading-height);
  padding: 0 4px 0 12px;
  z-index: 1;
}

  .wrapper__14245:after {
    content: '';
    background-color: inherit;
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    top: -2px;
  }

.header__14245 {
  color: var(--header-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.125s;
}

.visual-refresh .wrapper__14245 {
    background-color: var(--background-surface-high);
  }

.interactive__14245:hover {
  cursor: pointer;
}

.interactive__14245:hover:hover {
    color: var(--interactive-active);
  }

.headerIcon__14245 {
  display: contents;
  height: 100%;
  margin-right: 8px;
}

.headerLabel__14245 {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 8px;
}

.headerIcon__14245 + .headerLabel__14245 {
  margin-left: 8px;
}

.full-motion .headerCollapseIcon__14245 {
    transition: transform 0.1s;
  }

.headerCollapseIconCollapsed__14245 {
  transform: rotate(-90deg);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .wrapper__14245 {
    border-bottom: 1px solid CanvasText;
  }

.enable-forced-colors .interactive__14245 {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;
    background-color: ButtonFace;
    color: ButtonText;
  }

.enable-forced-colors .interactive__14245:hover {
      color: ButtonText;
    }

.upsellButton__0b69f {
  margin-left: auto;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
  border-radius: 3px;
  flex-shrink: 0;
}

.visual-refresh .upsellButton__0b69f {
    background-clip: padding-box;
  }

.upsellContainer__0b69f {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background:
    linear-gradient(var(--background-secondary), var(--background-secondary)) padding-box,
    var(--custom-premium-colors-premium-gradient-tier-2-tri-color) border-box;
}

.upsellContainerShadow__0b69f {
  /* stylelint-disable-next-line color-no-hex */
  filter: drop-shadow(0 0 10px rgba(184,69,193,0.50196));
}

.upsellContainerFloating__0b69f {
  position: absolute;
  top: auto;
  right: var(--spacing-16);
  bottom: var(--spacing-8);
  left: var(--spacing-8);
}

.upsellContainerInline__0b69f {
  flex: 1;
  margin: var(--spacing-8) var(--spacing-16);
}

.upsellText__0b69f {
  margin: auto 16px auto 8px;
  flex: 1;
}

.nitroTopDividerContainer_b3fb5f {
  display: flex;
  flex-direction: column;
  padding-top: var(--custom-emoji-picker-constants-emoji-premium-upsell-margin-top);
}

.nitroTopDividerUpper_b3fb5f {
  height: 12px;
}

.nitroTopDividerShadow_b3fb5f {
  box-shadow: 0 -5px 30px 4px var(--premium-tier-2-purple);
}

.glow_b3fb5f.reducedMotion_b3fb5f {
    opacity: 0;
  }

.glow_b3fb5f:not(.reducedMotion_b3fb5f) {
    animation: glowAnimation_b3fb5f 5s forwards;
  }

@keyframes glowAnimation_b3fb5f {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.nitroTopDividerLockContainer_b3fb5f {
  display: flex;
  align-items: center;
}

.nitroTopDividerLockBorder_b3fb5f {
  height: 1px;
  width: 100%;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
}

.nitroTopDividerLockCircle_b3fb5f {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
  z-index: 9999;
}

.nitroTopDividerLockBorderReversed_b3fb5f {
  height: 1px;
  width: 100%;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color-reverse);
}

.nitroTopDividerLower_b3fb5f {
  height: 12px;
  background-color: var(--premium-tier-2-purple);
}

.reverseTrialTopDividerLower_b3fb5f {
  height: 25px;
  background-color: var(--premium-tier-2-purple);
  opacity: 0.2;
}

.premiumUnlockAnimation_b3fb5f {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  animation: shrink_b3fb5f 2s forwards;
}

@keyframes shrink_b3fb5f {
  0% {
    height: 67px;
    width: 67px;
  }

  75% {
    height: 66px;
    width: 66px;
  }

  90% {
    height: 32px;
    width: 32px;
  }

  100% {
    height: 32px;
    width: 32px;
    display: none;
  }
}

.premiumUnlockedWithNitroPillContainer_b3fb5f {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  border-radius: 14px;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
  box-shadow: 0 0 4px 0 rgba(194, 105, 195, 0.6) inset;
  opacity: 0;
  height: 24px;
  overflow: hidden;
}

.premiumUnlockedWithNitroPillContainer_b3fb5f.reducedMotion_b3fb5f {
    opacity: 1;
  }

.premiumUnlockedWithNitroPillContainer_b3fb5f:not(.reducedMotion_b3fb5f) {
    animation: expand_b3fb5f 2s 2s forwards;
  }

@keyframes expand_b3fb5f {
  0% {
    max-width: 0;
    opacity: 1;
  }

  100% {
    max-width: 200px;
    opacity: 1;
  }
}

.rowContainer__1e702 {
  padding-top: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.image__1859b {
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  color: transparent;
}

.imageLoading__1859b {
  background-repeat: no-repeat;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 100px;
     object-position: 100px;
  pointer-events: none;
  color: transparent;
}

.images-light .imageLoading__1859b {
    background-image: url(/assets/4b212c35992a1e02.png);
  }

.images-dark .imageLoading__1859b {
    background-image: url(/assets/2dfc4736f9e305f0.png);
  }

.emojiSpriteImage_d982c2 {
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}

.emojiLockIconContainer_d982c2 {
  position: absolute;
  height: 40px;
  width: 40px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: hsl(var(--black-500-hsl) / 0.6);
  border-radius: 2px;
  pointer-events: none;
}

.emojiLockIcon_d982c2 {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--icon-primary);
}

.lockedEmoji_d982c2 {
  border-radius: 2px;
}

.theme-light .emojiLockIconContainer_d982c2 {
    background: hsl(var(--primary-200-hsl) / 0.6);
  }

@keyframes ripple_fc7141 {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.emojiListRow_fc7141 {
  display: grid;
  grid-auto-flow: column;
  padding-left: 8px;
}

.newlyAddedHighlightContainer_fc7141 .emojiListRow_fc7141 {
    padding-left: 0;
  }

.topEmojiSectionContainer_fc7141 {
  display: flex;
  flex-direction: row;
  /* to offsite the new badge */
  margin-bottom: 20px;
}

.topEmojiContainer_fc7141 {
  display: grid;
  grid-auto-flow: column;
}

.topEmojiContainer_fc7141.noEmojis_fc7141 {
    display: none;
  }

.newlyAddedHighlightContainer_fc7141 {
  display: flex;
  flex-direction: column;
  position: relative;
}

.newlyAddedBadge_fc7141 {
  background-color: rgba(45, 125, 70, 1);
  border-radius: 0 0 4px 4px;
  z-index: 1;
  display: flex;
  position: absolute;
  flex-direction: row;
  margin-left: auto;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  bottom: calc(var(--custom-emoji-picker-constants-newly-added-emoji-badge-height) * -1);
}

.newlyAddedBadge_fc7141.alignRight_fc7141 {
    right: 0;
  }

.newlyAddedBadgeMedium_fc7141 {
  /* Added 2px for the borders */
  width: calc(
    (
        var(--custom-emoji-picker-constants-emoji-size-medium) +
          var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2
      ) +
      2px
  );
}

.newlyAddedBadgeLarge_fc7141 {
  /* Added 2px for the borders */
  width: calc(
    (
        var(--custom-emoji-picker-constants-emoji-size-large) +
          var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2
      ) +
      2px
  );
}

.newlyAddedBadgeStar_fc7141 {
  width: 12px;
  height: 12px;
  margin-right: 2px;
  color: white;
}

.newlyAddedHighlight_fc7141 {
  border: 1px solid rgba(45, 125, 70, 1);
  border-radius: 4px 4px 4px 0;
  z-index: 1;
}

.newlyAddedHighlight_fc7141.alignRight_fc7141 {
    border-radius: 4px 4px 0;
  }

.newlyAddedHighlight_fc7141.oneItem_fc7141 {
    border-radius: 4px 4px 0 0;
  }

.newlyAddedHighlightContainer_fc7141:hover .newlyAddedHighlight_fc7141 {
  border: 1px solid rgba(45, 125, 70, 0.5);
}

.newlyAddedHighlightContainer_fc7141:hover .newlyAddedBadge_fc7141 {
  background-color: rgba(45, 125, 70, 0.5);
}

.emojiListRowLargeSize_fc7141 {
  grid-template-columns: repeat(
    auto-fill,
    calc(
      var(--custom-emoji-picker-constants-emoji-size-large) +
        var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2
    )
  );
  height: calc(
    var(--custom-emoji-picker-constants-emoji-size-large) +
      var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2
  );
}

.emojiListRowMediumSize_fc7141 {
  grid-template-columns: repeat(
    auto-fill,
    calc(
      var(--custom-emoji-picker-constants-emoji-size-medium) +
        var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2
    )
  );
  height: calc(
    var(--custom-emoji-picker-constants-emoji-size-medium) +
      var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2
  );
}

.emojiItem_fc7141 {
  background: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  outline: none;
  padding: var(--custom-emoji-picker-constants-emoji-container-padding-vertical)
    var(--custom-emoji-picker-constants-emoji-container-padding-horizontal);
  position: relative;
}

.emojiItem_fc7141:focus {
    outline: none;
  }

.emojiItem_fc7141.emojiItemSelected_fc7141 {
    background-color: var(--background-accent);
  }

.emojiItem_fc7141.expandCollapseButtonSelected_fc7141 {
    background-color: var(--background-accent);
    border-radius: var(--radius-round);
  }

.emojiItem_fc7141:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform-origin: center;
    opacity: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    border: 3px solid var(--yellow-300);
    border-radius: 100%;
    pointer-events: none;
  }

.full-motion .emojiItem_fc7141:after {
      transition: all 150ms ease-in-out;
    }

.emojiItem_fc7141.showPulse_fc7141:after {
      /* Small-scale attention-grabbing animations like this are alright to keep in reduced-motion */
      /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
      animation: ripple_fc7141 250ms ease-out 1;
    }

.emojiItemLarge_fc7141 {
  height: calc(
    var(--custom-emoji-picker-constants-emoji-size-large) +
      var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2
  );
  width: calc(
    var(--custom-emoji-picker-constants-emoji-size-large) +
      var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2
  );
}

.emojiItemMedium_fc7141 {
  height: calc(
    var(--custom-emoji-picker-constants-emoji-size-medium) +
      var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2
  );
  width: calc(
    var(--custom-emoji-picker-constants-emoji-size-medium) +
      var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2
  );
}

.icon_fc7141 {
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  fill: var(--interactive-normal);
}

.icon_fc7141:hover .icon_fc7141 {
    fill: var(--interactive-hover);
  }

/*
  If we're in keyboard mode, then show a more prominent ring around the selected item that's a
  little different from the default focus ring
*/

.keyboard-mode .emojiItem_fc7141.emojiItemSelected_fc7141 {
  position: relative;
}

.keyboard-mode .emojiItem_fc7141.emojiItemSelected_fc7141:before {
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;

    --__adaptive-radius: 4px;
    /* stylelint-disable-next-line discord/var-validator */
    border-radius: 4px;
    border-radius: var(--__adaptive-radius);
    /* stylelint-disable-next-line discord/var-validator */
    --__adaptive-focus-color: var(--interactive-hover);
    /* stylelint-disable-next-line discord/var-validator */
    border: 2px solid var(--interactive-hover);
    border: 2px solid var(--__adaptive-focus-color);
    z-index: 1;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .emojiItem_fc7141.emojiItemSelected_fc7141 {
    background-color: HighlightText;
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }

.enable-forced-colors .emojiItem_fc7141.emojiItemSelected_fc7141:before {
      border-color: Highlight;
    }

/*
 * Custom style tweak for light mode
 */

.theme-light .emojiItem_fc7141.emojiItemSelected_fc7141,
  .theme-light .emojiItem_fc7141.expandCollapseButtonSelected_fc7141 {
    background-color: var(--background-primary);

    /* Using an inset box shadow to keep consistent sizing in this case */
    box-shadow: inset 0 0 0 1px var(--background-modifier-accent);
  }

.listWrapper_c656ac {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.list_c656ac {
  height: 100%;
}

.noSearchResultsContainer_c656ac {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.categorySection_c656ac {
  padding-bottom: var(--custom-emoji-picker-constants-emoji-section-margin-bottom);
}

.categorySectionLast_c656ac,
.categorySectionCollapsed_c656ac,
.categorySectionNitroDivider_c656ac {
  padding-bottom: 0;
}

.categorySectionNitroLocked_c656ac {
  background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.2);
}

.header_c656ac {
  position: sticky;
  top: 0;
}

.inactiveNitroHeader_c656ac {
  background-color: transparent !important;
}

.inactiveNitroHeader_c656ac {
  /* stylelint-disable-next-line */
}

.activeNitroHeader_c656ac {
  background-color: var(--background-secondary);
}

.premiumUpsell_c656ac {
  box-sizing: border-box;
  height: var(--custom-emoji-picker-constants-emoji-premium-upsell-height);
  overflow: hidden;
  margin-top: var(--custom-emoji-picker-constants-emoji-premium-upsell-margin-top);
  margin-right: 4px;
}

.sectionPremiumUpsellTopOfList_c656ac {
  margin-top: 8px;
}

.premiumUpsellTopOfList_c656ac {
  
  margin-top: 0;
  height: 50px;
}

.nitroBottomDivider_c656ac {
  height: 1px;
  width: 100%;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
  margin: var(--custom-emoji-picker-constants-emoji-premium-upsell-margin-top) 0;
}

.upsellContainer_c656ac {
  display: flex;
  align-items: center;
  position: absolute;
  top: auto;
  right: 16px;
  bottom: 8px;
  left: 8px;
  padding: 0 12px;
  height: 52px;
  border-radius: 12px;
  background:
    linear-gradient(var(--background-secondary), var(--background-secondary)) padding-box,
    var(--custom-premium-colors-premium-gradient-tier-2-tri-color) border-box;
  /* stylelint-disable-next-line color-no-hex */
  filter: drop-shadow(0 0 10px rgba(184,69,193,0.50196));
}

.upsellText_c656ac {
  margin: auto 16px auto 4px;
}

.upsellLock_c656ac {
  padding-bottom: 2px;
  color: var(--icon-primary);
}

.upsellButton_c656ac {
  margin-left: auto;
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
  border-radius: 3px;
  flex-shrink: 0;
}

.soundmojiViewMore_c656ac {
  cursor: pointer;
  margin-left: auto;
  color: var(--header-secondary);
  font-size: 12px;
  font-weight: 600;
  transition: color 0.125s;
  align-self: center;
}

.soundmojiViewMore_c656ac:hover {
    color: var(--interactive-active);
  }

.premiumRetentionNotice_a606ef {
  background-color: var(--background-tertiary);
  border-radius: 4px;
  display: flex;
  padding: 8px;
  margin: 8px 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-normal);
  line-height: 16px;
}

.premiumRetentionNoticeIcon_a606ef {
  min-width: var(--custom-emoji-picker-constants-emoji-size);
  height: 24px;
  margin-right: 8px;
  margin-top: 2px;
}

.premiumRetentionNoticeClose_a606ef {
  width: 16px;
  height: 16px;
  color: var(--interactive-normal);
  cursor: pointer;
}

.premiumRetentionNoticeClose_a606ef:hover {
    color: var(--interactive-hover);
  }

.premiumRetentionNoticeContent_a606ef {
  flex: 1 1 auto;
}

.premiumPromo__3a1b6 {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-secondary);
  opacity: 0.98;
  z-index: 101;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

  .premiumPromo__3a1b6.unifyTrialUpsell__3a1b6 {
    opacity: 1;
    padding: 0;
    justify-content: flex-end;
  }

.premiumPromoClose__3a1b6 {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 10px;
  right: 10px;
  background: url(/assets/da0a112876e6636e.svg) 50% 50% no-repeat;
  overflow: hidden;
  cursor: pointer;
  text-indent: -9999em;
  opacity: 0.6;
}

.premiumPromoClose__3a1b6:hover {
    opacity: 1;
  }

.premiumPromoImage__3a1b6 {
  display: block;
  margin-bottom: 15px;
  width: 124px;
  height: 96px;
}

.premiumPromoImageSmaller__3a1b6 {
  height: 60px;
  width: 89px;
}

.premiumPromoTitle__3a1b6 {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 18px;
  line-height: 24px;
  /* stylelint-disable-next-line color-no-hex */
  color: var(--header-primary);
  font-weight: 600;
  margin-bottom: 4px;
}

.premiumPromoDescription__3a1b6 {
  margin: 0 20px 24px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: var(--header-secondary);
}

.noParentContainer__3a1b6 {
  top: 0;
  left: 0;
  bottom: 0;
}

.hasParentContainer__3a1b6 {
  top: -16px;
  left: 0;
  bottom: 0;
}

.hasTabParentContainer__3a1b6 {
  top: -48px;
  left: 0;
  bottom: 0;
}

.container__3a1b6 {
  box-sizing: border-box;
  position: absolute;
  background-color: var(--background-secondary);
  z-index: 1001;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contentContainer__3a1b6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 2;
}

.upsellClose__3a1b6 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 16px;
  color: var(--interactive-active);
}

.upsellArt__3a1b6 {
  margin: 0 0 32px;
  width: 200px;
  height: 120;
}

.upsellTitle__3a1b6 {
  padding: 0 32px;
}

.upsellTitleNoSocialProof__3a1b6 {
  margin-bottom: 24px;
}

.upsellBody__3a1b6 {
  padding: 0 32px;
  text-align: center;
}

.upsellCTAContainer__3a1b6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--background-tertiary);
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 16px;
}

.upsellSecondaryCTA__3a1b6 {
  margin-right: 8px;
  color: var(--premium-nitro-pink-text);
}

.upsellSecondaryCTA__3a1b6:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.noBoxShadowMargin_d0aeea {
  margin: 0;
}

.slowModeIcon_b21699 {
  display: block;
  margin-left: 4px;
}

.cooldownWrapper_b21699 {
  display: flex;
  align-items: center;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
}

.cooldownText_b21699 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: color 0.2s ease;
}

.visual-refresh-chat-input .slowModeIcon_b21699 {
    display: inline;
    margin-left: auto;
  }

.visual-refresh-chat-input .cooldownWrapper_b21699 {
    overflow: visible;
    overflow: initial;
  }

.container__1fad5 {
  position: relative;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  background-color: var(--background-tertiary);

  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 160px;
  flex-shrink: 0;
  height: 12px;
  line-height: 18px;
  margin: 2px 0 2px 4px;
}

.progress__1fad5 {
  flex: 1;
  margin-left: 4px;
}

.base_b88801 {
  position: absolute;
  bottom: 1px;
  left: 16px;
  right: 16px;
  height: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  resize: none;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  color: var(--text-normal);
}

  .base_b88801 strong {
    font-weight: 700;
  }

  .base_b88801 .text_b88801 {
    display: block;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 4px;
  }

  .base_b88801 .ellipsis_b88801 {
    flex: 0 0 auto;
    display: block;
    margin-left: 9px;
  }

  .base_b88801 .typingDots_b88801 {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.typing_b88801 {
  
  overflow: visible;
}

.visual-refresh .base_b88801 {
    left: var(--space-16);

    /* text-xs/medium */
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--text-secondary);
  }

.visual-refresh .base_b88801 .ellipsis_b88801 {
      margin-left: 0;
    }

.visual-refresh-chat-input .base_b88801 {
    position: static;
    overflow: auto;
  }

.isComboing_b88801 {
  justify-content: space-between;
}

.activityInviteEducation_b88801 {
  
  opacity: 0;
  z-index: 1;
}

.activityInviteEducationFadeIn_b88801 {
  opacity: 1;
}

.activityInviteEducationArrow_b88801 {
  background-repeat: no-repeat;
  background-size: 12px 10px;
  display: inline-block;
  /* align the arrow with the text x-height and under the invite button */
  margin: 0 2px 0 24px;
  width: 15px;
  height: 15px;
}

.images-light .activityInviteEducationArrow_b88801 {
    background-image: url(/assets/3b11031474fb64a0.svg);
  }

.images-dark .activityInviteEducationArrow_b88801 {
    background-image: url(/assets/6ad5446be34bb27a.svg);
  }

.visual-refresh .activityInviteEducation_b88801 {
    margin-left: -8px;
  }

.visual-refresh .activityInviteEducationLeftArrow_b88801 {
    padding-right: var(--space-4);
  }

.autocomplete__13533 {
  border-radius: 5px 5px 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 3;
  background-color: var(--autocomplete-bg);
}

.autocompleteInner__13533 {
  padding-bottom: 8px;
}

.autocompleteRow__13533 {
  padding: 0 8px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}

.autocompleteRowVertical__13533 {
  
}

.autocompleteRowHorizontal__13533 {
  
  padding: 0;
}

.autocompleteRowContent__13533 {
  align-items: center;
  color: var(--interactive-normal);
  display: flex;
  min-height: 16px;
}

.autocompleteRowContentPrimary__13533 {
  /* This shrinks second, after the secondary */
  /* https://stackoverflow.com/questions/67858284 */
  flex-shrink: 1;
  flex-grow: 0;
  overflow: hidden;
  min-width: 10ch;
}

.autocompleteRowIcon__13533 {
  flex: 0 0 auto;
  margin-right: 8px;
}

.autocompleteRowHeading__13533 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.autocompleteRowSubheading__13533 {
  margin-top: 2px;
}

.autocompleteRowContentSecondary__13533 {
  /* This shrinks first, before the primary */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 10ch;
  min-width: 10ch;

  margin-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.base__13533 {
  border-radius: 3px;
  padding: 8px;
}

.clickable__13533[aria-disabled='false'] > .base__13533 {
  cursor: pointer;
}

.clickable__13533[aria-disabled='false'] > .base__13533:hover {
    background-color: var(--background-modifier-hover);
  }

.clickable__13533[aria-selected='true'] > .base__13533 {
  background-color: var(--background-modifier-hover);
}

.dividerContainer__13533 .base__13533 {
  padding-bottom: 0;
  padding-top: 0;
}

.divider__13533 {
  padding: 8px;
}

.divider__13533:after {
    background-color: var(--background-modifier-accent);
    content: '';
    display: block;
    height: 1px;
    width: 100%;
  }

.contentTitle__13533 {
  color: var(--interactive-normal);
  text-transform: uppercase;
  padding: 4px 0;
}

.contentTitle__13533 strong {
    text-transform: none;
    color: var(--text-secondary);
  }

.icon__13533 {
  color: var(--interactive-normal);
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

.iconForeground__13533 {
  fill: var(--interactive-normal);
}

.emojiImage__13533 {
  -o-object-fit: contain;
     object-fit: contain;
  width: 20px;
  height: 20px;
}

.emojiRaw__13533 {
  
  display: block;
  font-size: 20px;
}

.descriptionDiscriminator__13533 {
  opacity: 0.6;
}

.autocompleteRowVerticalSmall__13533 .base__13533 {
  padding: 4px 8px;
}

.roleDot__13533 {
  margin-right: 4px;
}

/* :global(.theme-light) {
  .autocomplete {
    background-color: var(--primary-100);
  }

  .contentTitle {
    strong {
      color: var(--primary-500);
    }
  }
}

:global(.theme-dark) {
  .autocomplete {
    background-color: var(--primary-630);
  }

  .contentTitle {
    strong {
      color: var(--white-500);
    }
  }
} */

.autocompletePlaceholder__13533 {
  margin-top: 8px;
  height: 16px;
  border-radius: 16px;
  background: var(--background-primary);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .autocomplete__13533 {
    border: 2px solid CanvasText;
  }

.enable-forced-colors .clickable__13533[aria-selected='true'] > .base__13533 {
    outline: 2px solid Highlight;
    outline-offset: Highlight;
  }

.enable-forced-colors .descriptionDiscriminator__13533 {
    opacity: 1;
  }

.selectable_c9946a {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.strong_c9946a {
  font-weight: 600;
}

.colorStandard_c9946a {
  color: var(--text-normal);
}

.colorLink_c9946a {
  color: var(--text-link);
}

.colorMuted_c9946a {
  color: var(--text-muted);
}

.colorError_c9946a {
  color: var(--red-400);
}

.colorBrand_c9946a {
  color: var(--text-brand);
}

.colorHeaderPrimary_c9946a {
  color: var(--header-primary);
}

.colorHeaderSecondary_c9946a {
  color: var(--header-secondary);
}

.colorStatusYellow_c9946a {
  color: var(--text-warning);
}

.colorStatusGreen_c9946a {
  color: var(--text-positive);
}

.colorStatusRed_c9946a {
  color: var(--status-danger);
}

.colorInteractiveActive_c9946a {
  color: var(--interactive-active);
}

.colorInteractiveNormal_c9946a {
  color: var(--interactive-normal);
}

.colorWhite_c9946a {
  color: var(--white-500);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .colorStandard_c9946a,
  .enable-forced-colors .colorMuted_c9946a,
  .enable-forced-colors .colorError_c9946a,
  .enable-forced-colors .colorBrand_c9946a,
  .enable-forced-colors .colorHeaderPrimary_c9946a,
  .enable-forced-colors .colorHeaderSecondary_c9946a,
  .enable-forced-colors .colorStatusYellow_c9946a,
  .enable-forced-colors .colorStatusGreen_c9946a,
  .enable-forced-colors .colorStatusRed_c9946a,
  .enable-forced-colors .colorInteractiveActive_c9946a,
  .enable-forced-colors .colorInteractiveNormal_c9946a,
  .enable-forced-colors .colorWhite_c9946a {
    color: CanvasText;
  }

.enable-forced-colors .colorLink_c9946a {
    color: LinkText;
  }

.size10_a4e6b9 {
  font-size: 10px;
  line-height: 12px;
}

.size12_a4e6b9 {
  font-size: 12px;
  line-height: 16px;
}

.size14_a4e6b9 {
  font-size: 14px;
  line-height: 18px;
}

.size16_a4e6b9 {
  font-size: 16px;
  line-height: 20px;
}

.size20_a4e6b9 {
  font-size: 20px;
  line-height: 24px;
}

.size24_a4e6b9 {
  font-size: 24px;
  line-height: 30px;
}

.size32_a4e6b9 {
  font-size: 32px;
  line-height: 40px;
}

.option_a19535 {
  display: block;
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 400;
}

.theme-light .option_a19535 {
  background-color: var(--primary-300);
}

.theme-dark .option_a19535 {
  background-color: var(--primary-800);
}

.inline_a19535 {
  margin-right: 4px;
  padding-bottom: 1px;
}

.set_a19535 {
  opacity: 0.5;
}

.error_a19535 {
  color: var(--status-danger);
}

.active_a19535 {
  background-color: var(--brand-500) !important;
}

.active_a19535 {
  /* stylelint-disable-next-line declaration-no-important */
  color: var(--white-500);
}

.clickable_a19535 {
  cursor: pointer;
}

.mask_ca5f52 {
  display: block;
}

.icon_ca5f52 {
  width: 32px;
  height: 32px;
}

.wrapper_ca5f52 {
  border-radius: 8px;
  transition: background-color 0.1s ease-in-out;
}

.selectable_ca5f52:hover {
    background-color: var(--background-modifier-hover);
  }

.selectable_ca5f52:hover .icon_ca5f52 {
      color: var(--interactive-hover);
    }

.selected_ca5f52,
  .selected_ca5f52:hover {
    background-color: var(--background-primary);
  }

.selected_ca5f52 .icon_ca5f52, .selected_ca5f52:hover .icon_ca5f52 {
      color: var(--interactive-active);
    }

.theme-light .selected_ca5f52 .icon_ca5f52, .theme-light .selected_ca5f52:hover .icon_ca5f52 {
        color: var(--primary-500);
      }

.icon__1a58a {
  color: var(--interactive-normal);
}

.wrapper__1a58a {
  border-radius: 8px;
  transition: background-color 0.1s ease-in-out;
}

.selectable__1a58a:hover {
    background-color: var(--background-modifier-hover);
  }

.selectable__1a58a:hover .icon__1a58a {
      color: var(--interactive-hover);
    }

.selected__1a58a,
  .selected__1a58a:hover {
    background-color: var(--background-primary);
  }

.selected__1a58a .icon__1a58a, .selected__1a58a:hover .icon__1a58a {
      color: var(--interactive-active);
    }

.theme-light .selected__1a58a .icon__1a58a, .theme-light .selected__1a58a:hover .icon__1a58a {
        color: var(--primary-500);
      }

.wrapper__920ab {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
}

.image__920ab {
  align-self: flex-start;
  justify-self: flex-start;
  margin-top: 4px;
  margin-right: 16px;
  flex-shrink: 0;
  flex-grow: 0;
}

.infoWrapper__920ab {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-grow: 1;
}

.source__920ab {
  margin-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 33%;
  flex-grow: 0;
  flex-shrink: 0;
}

.usageWrapper__920ab {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.description__920ab {
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title__920ab {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.option__920ab {
  margin-left: 8px;
}

.error__920ab {
  color: var(--status-danger);
}

.optionalHeader__920ab {
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 8px;
}

.optionalCount__920ab {
  padding-left: 8px;
}

.disabled__920ab {
  opacity: 0.3;
}

.optionals__920ab {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-left: 1px solid var(--background-modifier-accent);
  margin-left: 8px;
}

.optionalNames__920ab {
  display: flex;
  flex-direction: column;
}

.wrapper__78aa3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 8px;
}

.infoWrapper__78aa3 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-grow: 1;
}

.usageWrapper__78aa3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
  height: 16px;
  border-radius: 16px;
  background: var(--background-accent);
}

.image__78aa3 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: flex-start;
  justify-self: flex-start;
  margin-top: 4px;
  margin-right: 16px;
  background: var(--background-primary);
}

.description__78aa3 {
  margin-top: 8px;
  height: 16px;
  border-radius: 16px;
  background: var(--background-primary);
}

.source__78aa3 {
  margin-left: 16px;
  flex-shrink: 0;
  height: 16px;
  border-radius: 16px;
  background: var(--background-primary);
}

.upsell__37390 {
  /* We need to undo some of the padding on the base component to get the correct height due to the emoji size */
  margin-top: -4px;
  margin-bottom: -4px;
}

.emojis__37390 {
  display: flex;
}

.emojiMask__37390 {
  position: relative;
}

.emojiBackground__37390 {
  background-color: var(--background-tertiary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
}

.emoji__37390 {
  height: 16px;
  width: 16px;
}

.wrapper_b1e4f3 {
  background-color: var(--background-tertiary);
  width: 48px;
  padding-bottom: 8px;
  margin-bottom: -16px;
}

.list_b1e4f3 {
  height: 100%;
}

.section_b1e4f3 {
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 8px;
}

.section_b1e4f3:last-child {
    margin-bottom: 0;
  }

.builtInSeparator_b1e4f3 {
  margin: 8px 0;
  border: none;
  border-bottom: 1px solid var(--background-modifier-accent);
}

.visual-refresh .list_b1e4f3 {
    background: none;
  }

.visual-refresh .wrapper_b1e4f3 {
    background-color: var(--background-base-lowest);
  }

.visual-refresh .builtInSeparator_b1e4f3 {
    border-color: var(--border-subtle);
  }

.outerWrapper_d1405b {
  border-radius: 5px;
  box-shadow: var(--shadow-border), var(--shadow-high);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  overflow: hidden;
}

.visual-refresh .outerWrapper_d1405b {
    right: var(--space-8);
  }

.wrapper_d1405b {
  display: flex;
  flex-direction: row;
  height: 420px;
  padding-bottom: 0;
}

.noSearchResults_d1405b {
  height: 340px;
}

.list_d1405b {
  height: 100%;
}

.rail_d1405b {
  flex-shrink: 0;
  flex-grow: 0;
  align-self: stretch;
}

.content_d1405b {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.categoryHeader_d1405b {
  position: sticky;
  top: 0;
  padding: 0 8px;
  background-color: var(--autocomplete-bg);
}

.categorySection_d1405b {
  margin-bottom: 16px;
}

.categorySectionLast_d1405b {
  margin-bottom: 0;
}

.itemWrapper_d1405b {
  padding: 0;
}

.assetWrapper__31fc2 {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.assetWrapperMasked__31fc2 {
  -webkit-mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
          mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
}

.stickerAsset__31fc2 {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.lottieCanvas__31fc2 {
  
}

.pngImage__31fc2 {
  
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.roundedMask__31fc2 {
  display: block;
  position: absolute;
  height: 100%;
  left: 0;
  width: 100%;
  top: 0;
}

.errorContent__31fc2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loadingIndicator__31fc2 {
  box-sizing: border-box;
  cursor: default;
  display: block;
  width: 100%;
  -webkit-mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
          mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
  height: 100%;
  background-color: var(--background-modifier-active);
}

.error__31fc2 {
  align-items: center;
  background-color: var(--background-modifier-active);
  display: flex;
  flex-direction: column;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.errorIcon__31fc2 {
  color: var(--header-secondary);
}

.errorText__31fc2 {
  margin-top: 4px;
}

.overlayWrapper__31fc2 {
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.overlayStickerWrapper__31fc2 {
  position: relative;
  z-index: 2;
}

.overlayLabelWrapper__31fc2 {
  position: relative;
  z-index: 1;
}

.overlayLabel__31fc2 {
  background-color: var(--background-floating);
  border-radius: 20px;
  left: 50%;
  margin-top: 2px;
  padding: 2px 8px;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.positionedLayer__31fc2 {
  pointer-events: none;
}

.legacyInputCommandHeader__2862d {
  display: flex;
  justify-content: space-between;
}

.noAutocompleteResults__841e4 {
  height: 200px;
}

.secondarySection_ed47e5 {
  padding-top: 0;
}

.divider_ed47e5 {
  padding-bottom: 0 !important;
}

.divider_ed47e5 {
  /* stylelint-disable-next-line declaration-no-important */
}

.spinner__13d18 {
  padding-top: 8px;
}

.horizontalAutocompletes__13d18 {
  
  margin-bottom: -4px;
  padding: 0 8px;
  overflow-x: auto;
}

/**
 * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
 * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
 * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
 */

.no-webkit-scrollbar .horizontalAutocompletes__13d18 {
    scrollbar-width: thin;
  }

.horizontalAutocomplete__13d18 {
  margin-bottom: 4px;
}

@use postcss-pxtorem;

.autocomplete__6b0e0 {
  border-radius: 5px;
  box-shadow: var(--shadow-border), var(--shadow-high);
  overflow: hidden;
}

.autocompleteAttached__6b0e0 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
}

.autocompleteAttached__6b0e0.bottom__6b0e0 {
    left: 0;
    right: 0;
    top: 100%;
    bottom: inherit;
  }

.visual-refresh .autocompleteAttached__6b0e0 {
    left: var(--space-8);
    right: var(--space-16);
  }

.autocompletePopout__6b0e0 {
  min-width: 430px;
  max-width: 800px;
  pointer-events: all;
}

.autocompleteInner__6b0e0 {
  padding-bottom: 0;
}

.autocompleteTop__6b0e0 {
  /* Most UI elements are on an z-index up to 1000, so to get above them, we go to 1001 */
  z-index: 1001;
}

.scroller__6b0e0 {
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
}

.stickerAutoComplete__6b0e0 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 116px);
  grid-template-rows: repeat(auto-fill, 116px);
  grid-gap: 8px;
  padding: 8px 16px;
}

.sticker__6b0e0 {
  margin-top: 2px;
  margin-left: 2px;
}

.container__871cd {
  position: relative;
  height: 100%;
  margin-right: 12px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  align-items: flex-start;
}

.column__871cd {
  padding-top: 12px;
  height: auto;
  transform-origin: 0 0;
  opacity: 0.1;
}

.gif__871cd {
  margin-left: 12px;
  margin-bottom: 12px;
  background-color: var(--text-link);
  border-radius: 5px;
}

.categoryLoader__871cd {
  margin-left: 12px;
  margin-bottom: 12px;
  border-radius: 5px;
  height: 110px;
  background-color: var(--black-500);
}

@keyframes ripple__43deb {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }

  90% {
    transform: scale(1.4);
    opacity: 0;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes bounce__43deb {
  25% {
    transform: scale(0.6);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.gifFavoriteButton__43deb {
  color: var(--icon-primary);
  background-color: var(--background-primary);
  border-radius: 5px;
  padding: 6px;
  opacity: 1;
}

.gifFavoriteButton__43deb:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform-origin: center;
    opacity: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    border: 2px solid var(--yellow-300);
    border-radius: 50%;
    pointer-events: none;
  }

.full-motion .gifFavoriteButton__43deb:after {
      transition: all 150ms ease-in-out;
    }

.gifFavoriteButton__43deb:hover,
  .gifFavoriteButton__43deb:focus {
    color: var(--yellow-300);
    transform: none;
  }

.gifFavoriteButton__43deb.selected__43deb {
    color: var(--yellow-300);
  }

.gifFavoriteButton__43deb.selected__43deb.showPulse__43deb:after {
        /* Small-scale affirmation animations are alright to keep in reduced-motion */
        /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
        animation: ripple__43deb 450ms ease;
      }

.gifFavoriteButton__43deb.selected__43deb.showPulse__43deb .icon__43deb {
        /* Small-scale affirmation animations are alright to keep in reduced-motion */
        /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
        animation: bounce__43deb 400ms linear;
      }

.icon__43deb {
  display: block;
  width: 100%;
  height: 100%;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .gifFavoriteButton__43deb {
    background-color: ButtonFace;
    border: 1px solid ButtonFace;
    border-radius: 4px;
    color: ButtonText;
  }

.enable-forced-colors .gifFavoriteButton__43deb:hover,
    .enable-forced-colors .gifFavoriteButton__43deb:focus {
      border-color: ButtonText;
    }

.enable-forced-colors .gifFavoriteButton__43deb.selected__43deb {
      background-color: HighlightText;
      border-color: Highlight;
      color: Highlight;
    }

.results__2dc39 {
  height: 100%;
}

.result__2dc39 {
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  transition: box-shadow 150ms ease-out;
}

.result__2dc39:after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    transition: background 150ms ease-out;
    transition-property: box-shadow, background;

    border-radius: 7px;
    pointer-events: none;
  }

.result__2dc39:hover .favButton__2dc39 {
      opacity: 1;
      transform: none;
    }

.result__2dc39:hover,
  .result__2dc39[data-focused='true'] {
    box-shadow: var(--shadow-border), var(--shadow-low);
  }

.result__2dc39:hover:after, .result__2dc39[data-focused='true']:after {
      background: linear-gradient(to bottom, var(--bg-mod-strong), var(--bg-mod-subtle));
    }

.result__2dc39[data-focused='true'] {
    box-shadow: 0 0 0 2px var(--focus-primary);
  }

.gif__2dc39 {
  position: relative;
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: transparent;
  border-radius: 5px;
}

.endContainer__2dc39 {
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
}

.endContainer__2dc39:after {
    content: '';
    height: 220px;
    width: 100%;
    display: block;
    margin: 0 auto;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
  }

.endText__2dc39 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-warning);
}

.searchSuggestions__2dc39 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.searchSuggestion__2dc39 {
  border-radius: 3px;
  margin-right: 4px;
  margin-top: 4px;
}

.searchSuggestion__2dc39.searchSuggestion__2dc39:hover {
  /* doubling up the class for specificity override */
  color: var(--white-500);
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}

.noResults__2dc39 {
  height: 100%;
}

.spinnerContainer__2dc39 {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.favButton__2dc39 {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 4;
  opacity: 0;
  box-sizing: border-box;
  transform: translateY(-10px);
}

.full-motion .favButton__2dc39 {
    transition:
      transform 0.2s ease, opacity 0.1s ease;
  }

.emptyHints__2dc39 {
  display: flex;
  margin: 6px 0 6px 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.emptyHint__2dc39 {
  flex: 1 1 33.33%;
}

.emptyHintCard__2dc39 {
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  height: 160px;
  border-radius: 5px;
  margin: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-mod-faint);
  color: var(--text-normal);
}

.emptyHintSpacer__2dc39 {
  height: 160px;
}

.emptyHintText__2dc39 {
  font-size: 15px;
  max-width: 180px;
  line-height: 1.6;
  text-align: center;
}

.emptyHintFavorite__2dc39 {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 29px;
  height: 29px;
  color: var(--text-warning);
}

@keyframes loadIN__2dc39 {
  0% {
    transform: translate3d(0, 24px, 0);
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.placeholder__2dc39 {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background: var(--bg-mod-faint);
}

.full-motion .placeholder__2dc39 {
    will-change: transform3d, opacity;
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    animation: loadIN__2dc39 600ms cubic-bezier(0.17, 0.67, 0.16, 0.99);
    animation-fill-mode: forwards;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .result__2dc39[data-focused='true'] {
    border: 1px solid Canvas;
    outline: 2px solid Highlight;
  }

.images-light .endContainer__2dc39:after {
    background-image: url(/assets/9423b541a1c3dfef.svg);
  }

.images-dark .endContainer__2dc39:after {
    background-image: url(/assets/00f1d64f0e8c77b3.svg);
  }

.container_d02962 {
  height: 100%;
}

.categoryFade_d02962,
.categoryFadeBlurple_d02962 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 4px;
  transition: -webkit-backdrop-filter 150ms ease-out;
  transition: backdrop-filter 150ms ease-out;
  transition: backdrop-filter 150ms ease-out, -webkit-backdrop-filter 150ms ease-out;
  border: 1px solid transparent;
}

.categoryText_d02962 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-weight: 600;
  pointer-events: none;
}

.categoryIcon_d02962 {
  margin-right: 4px;
  width: 20px;
  height: 20px;
}

.categoryName_d02962 {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
}

.spinnerContainer_d02962 {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.formatSelectors_d02962 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.formatSelectors_d02962 select {
    display: block;
    margin: 0 4px;
  }

.categoryFade_d02962 {
  background-color: var(--bg-backdrop);
}

.categoryFadeBlurple_d02962 {
  background-color: color-mix(in srgb, var(--bg-brand), transparent 20%);
}

.categoryFade_d02962:hover,
  [data-focused='true'] .categoryFade_d02962,
  .categoryFadeBlurple_d02962:hover,
  [data-focused='true'] .categoryFadeBlurple_d02962 {
    -webkit-backdrop-filter: brightness(60%) blur(4px);
            backdrop-filter: brightness(60%) blur(4px);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
  }

.categoryText_d02962 {
  color: var(--white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.container_fed6d3 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: normal;
  background-color: var(--background-secondary);
}

.container_fed6d3:after {
  content: '';
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.content_fed6d3 {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
}

.searchBar_fed6d3 {
  width: 100%;
  flex: 1 1 auto;
}

.header_fed6d3 {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding: var(--custom-gif-picker-gutter-size);
  background-color: var(--background-secondary);
  box-shadow: var(--shadow-ledge);
}

.visual-refresh .header_fed6d3 {
    background-color: var(--background-surface-high);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
  }

.searchHeader_fed6d3 {
  margin-bottom: 0;
  margin-left: 8px;
}

.backButton_fed6d3 {
  display: flex;
  align-items: center;
  height: 28px;
  cursor: pointer;
  margin-right: 8px;
  color: var(--text-muted-on-default);
}

.backButton_fed6d3:hover {
    color: var(--text-normal);
  }

.content_fed6d3 {
  flex: 1 1 auto;
  overflow: hidden;
}

.wrapper__0c74f {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.wrapper__0d1ef {
  flex: 1;
}

.wrapper__0856d {
  position: relative;
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto 1fr auto;
}

.header__0856d {
  box-shadow: var(--elevation-low);
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  z-index: 1;
  padding: 12px;
  display: flex;
  align-items: center;
}

.loadingIndicator__0856d {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.listWrapper__0856d,
.gridNoticeWrapper__0856d {
  position: relative;
  flex: 1;
  left: 48px;
  width: calc(100% - 48px);
}

.gridNoticeWrapper__0856d {
  flex: none;
}

.emptyState__0856d {
  grid-column: 1 / 3;
  grid-row: 2 / 2;
  overflow: hidden;
  position: relative;
  margin: 0 20px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .header__0856d {
    border-bottom: 1px solid CanvasText;
  }

.soundButtonWrapper__58c6c {
  list-style: none;
}

.soundAddButton__58c6c {
  
  cursor: pointer;
}

.soundAddButton__58c6c:hover,
  .soundAddButton__58c6c.focused__58c6c {
    background-color: var(--background-tertiary);
  }

.soundAddButtonRefresh__58c6c {
  
  cursor: pointer;
  border: 1px dashed var(--border-subtle);
  background-color: var(--background-secondary);
  box-shadow: none;
}

.soundAddButtonRefresh__58c6c:hover .soundAddInfoRefresh__58c6c, .soundAddButtonRefresh__58c6c.focused__58c6c .soundAddInfoRefresh__58c6c, .soundAddButtonRefresh__58c6c:active:not(:focus-within) .soundAddInfoRefresh__58c6c {
      box-shadow: none;
    }

.soundAddButtonRefresh__58c6c:hover .soundAddIconRefresh__58c6c,
    .soundAddButtonRefresh__58c6c:hover .soundAddTextRefresh__58c6c,
    .soundAddButtonRefresh__58c6c.focused__58c6c .soundAddIconRefresh__58c6c,
    .soundAddButtonRefresh__58c6c.focused__58c6c .soundAddTextRefresh__58c6c,
    .soundAddButtonRefresh__58c6c:active:not(:focus-within) .soundAddIconRefresh__58c6c,
    .soundAddButtonRefresh__58c6c:active:not(:focus-within) .soundAddTextRefresh__58c6c {
      color: var(--interactive-hover);
    }

.soundAddInfoRefresh__58c6c {
  
  box-shadow: none;
}

.soundAddIcon__58c6c {
  width: 16px;
  height: 16px;
  color: var(--header-primary);
}

.soundAddIconRefresh__58c6c {
  width: 24px;
  height: 24px;
  padding: 4px;
  color: var(--interactive-normal);
}

.soundAddTextRefresh__58c6c {
  color: var(--interactive-normal);
}

.disabled__58c6c {
  pointer-events: none;
}

.categoryList_a1e0e0 {
  top: 58px;
}

.expressionPickerCategoryList_a1e0e0 {
  top: 50px;
}

.visual-refresh .expressionPickerCategoryList_a1e0e0 {
    /* on-system because its subtracting a 1px border */
    top: 53px;
  }

.visual-refresh .categoryList_a1e0e0 {
    top: 65px;
  }

.category_a1e0e0 {
  cursor: pointer;
  margin-bottom: 8px;
  position: relative;
}

.categoryIcon_a1e0e0 {
  
  border-radius: var(--radius-xs);
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.categoryIcon_a1e0e0.selected_a1e0e0 {
    background-color: var(--background-primary);
  }

.categoryIcon_a1e0e0:hover {
    background-color: var(--background-modifier-hover);
  }

.categoryIconIcon_a1e0e0 {
  width: 24px;
  height: 24px;
  color: var(--interactive-normal);
}

.keybindHint__46002 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 16px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background-color: var(--background-secondary);
}

.keybindHintText__46002 {
  display: inline;
}

.warningIcon__46002 {
  min-width: 20px;
  margin-right: 8px;
  color: var(--yellow-300);
}

.emoji__46002 {
  color: var(--interactive-normal);
  height: 100%;
  width: 100%;
}

.closeButton__46002 {
  color: var(--interactive-normal);
  margin-top: -16px;
  cursor: pointer;
}

.container__10adc {
  background-color: var(--background-floating);
  opacity: 0.95;
}

.image__10adc {
  height: 80px;
  width: auto;
}

.buttonContainer__10adc {
  position: relative;
}

.previewButtonContainer__10adc {
  position: absolute;
  top: 8px;
  left: -24px;
}

.sectionContainer__61424 {
  display: flex;
  padding-left: 8px;
}

.sectionContainerNitroLocked__61424 {
  background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.35);
}

.sectionHeader__61424 {
  display: inline-block;
  color: var(--interactive-normal);
  cursor: pointer;
}

.sectionHeader__61424:hover {
    color: var(--interactive-active);
  }

.sectionHeader__61424:hover .sectionTitle__61424 {
      color: var(--interactive-active);
    }

.sectionHeader__61424 .sectionTitle__61424 {
    color: var(--interactive-normal);
  }

.sectionHeaderContent__61424 {
  display: flex;
}

.notFirstSectionHeader__61424 {
  margin-top: 16px;
}

.sectionFooter__61424 {
  height: 60px;
  background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.35);
}

.sectionTitle__61424 {
  text-transform: uppercase;
  margin: 0 8px;
}

.headerIcon__61424 {
  width: 16px;
  height: 16px;
}

.soundRow__61424 {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  padding-left: 8px;
}

.soundRowNitroLocked__61424 {
  background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.35);
}

.lastSoundRow__61424 {
  padding-bottom: 8px;
}

.settingsClickArea__61424 {
  cursor: pointer;
  color: var(--interactive-normal);
  transition: color 0.2s ease;
  margin-left: var(--spacing-12);
}

.settingsClickArea__61424:hover,
  .settingsClickArea__61424:focus {
    color: var(--interactive-hover);
  }

.settingsSoundmojiClickArea__61424 {
  padding: 0;
}

.settingsSoundmojiClickArea__61424:last-child {
    padding-right: 0;
  }

.settingsIcon__61424 {
  width: 24px;
  height: 24px;
}

.picker__09f65 {
  display: flex;
  flex-direction: column;
  background-color: var(--background-floating);
  height: 420px;
  width: 531px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--elevation-high);
}

  .picker__09f65.refresh__09f65 {
    background-color: var(--background-secondary);
    height: 450px;
    width: 500px;
  }

  .picker__09f65.inExpressionPicker__09f65 {
    width: auto;
    height: 100%;
    box-shadow: none;
  }

.visual-refresh .picker__09f65 {
    background-color: var(--background-base-low);
  }

.visual-refresh .picker__09f65.refresh__09f65 {
      background-color: var(--background-base-low);
    }

.fetching__09f65 {
  justify-content: center;
}

.categoryList__3ad28 {
  top: 50px;
}

.stickerCategory__3ad28 {
  border-radius: 4px;
  color: var(--interactive-normal);
  cursor: pointer;
  height: var(--custom-stickers-constants-sticker-category-icon-size);
  margin-bottom: var(--custom-stickers-constants-sticker-category-icon-margin);
  width: var(--custom-stickers-constants-sticker-category-icon-size);
}

.firstPartyCategory__3ad28:hover {
    background-color: var(--background-modifier-hover);
    color: var(--interactive-hover);
  }

.firstPartyCategorySelected__3ad28,
  .firstPartyCategorySelected__3ad28:hover,
  .stickerCategoryGenericSelected__3ad28,
  .stickerCategoryGenericSelected__3ad28:hover {
    background-color: var(--background-primary);
  }

.stickerCategoryGenericSelected__3ad28 .stickerCategoryGenericIcon__3ad28 {
  color: var(--interactive-active);
}

.stickerCategoryGeneric__3ad28 {
  box-sizing: border-box;
  padding: 4px;
}

.stickerCategoryGeneric__3ad28:hover {
    background-color: var(--background-primary);
  }

.stickerCategoryGenericDisabled__3ad28 {
  cursor: default;
  color: var(--interactive-muted);
}

.stickerCategoryGenericDisabled__3ad28 .stickerCategoryGenericIcon__3ad28 {
    opacity: 0.6;
  }

.stickerCategoryGenericDisabled__3ad28.stickerCategory__3ad28:hover {
    background-color: transparent;
    color: var(--interactive-muted);
  }

.stickerPackThumbnail__3ad28 {
  display: block;
  height: 100%;
  width: 100%;
}

.guildCategorySeparator__3ad28 {
  margin: var(--custom-stickers-constants-category-separator-margin-vertical) 0;
  border: none;
  border-bottom: var(--custom-stickers-constants-category-separator-size) solid var(--background-modifier-accent);
}

.standardStickerShortcut__3ad28 {
  align-items: center;
  background: inherit;
  color: var(--interactive-normal);
  cursor: pointer;
  bottom: 0;
  display: flex;
  height: 48px;
  justify-content: center;
  left: 0;
  opacity: 1;
  position: absolute;
  width: 100%;
}

.full-motion .standardStickerShortcut__3ad28 {
    transition:
      opacity 0.1s, transform 0.1s;
  }

.standardStickerShortcut__3ad28:hover {
    color: var(--interactive-hover);
  }

.visual-refresh .standardStickerShortcut__3ad28 {
    box-sizing: border-box;
    border-top: 1px solid var(--border-normal);
  }

.invisibleShortcut__3ad28 {
  display: none;
  opacity: 0;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .standardStickerShortcut__3ad28 {
    background-color: ButtonFace;
    border-top: 1px solid CanvasText;
    color: ButtonText;
    /* 1px shorter than normal to accomodate the border */
    height: 47px;
  }

.enable-forced-colors .stickerCategory__3ad28 {
    border: 1px solid Canvas;
    border-radius: 4px;
    transition: none;
  }

.enable-forced-colors .stickerCategory__3ad28 .stickerCategoryGenericIcon__3ad28 {
      color: ButtonText;
    }

.enable-forced-colors .stickerCategory__3ad28:hover {
      background: ButtonFace;
      border-color: ButtonText;
    }

.enable-forced-colors .stickerCategoryGenericDisabled__3ad28 {
    color: GrayText;
  }

.enable-forced-colors .stickerCategoryGenericDisabled__3ad28.stickerCategory__3ad28:hover {
      color: GrayText;
    }

.enable-forced-colors .firstPartyCategorySelected__3ad28,
    .enable-forced-colors .firstPartyCategorySelected__3ad28:hover,
    .enable-forced-colors .stickerCategoryGenericSelected__3ad28,
    .enable-forced-colors .stickerCategoryGenericSelected__3ad28:hover {
      background-color: HighlightText;
      border-color: Highlight;
    }

.enable-forced-colors .firstPartyCategorySelected__3ad28 .stickerCategoryGenericIcon__3ad28, .enable-forced-colors .firstPartyCategorySelected__3ad28:hover .stickerCategoryGenericIcon__3ad28, .enable-forced-colors .stickerCategoryGenericSelected__3ad28 .stickerCategoryGenericIcon__3ad28, .enable-forced-colors .stickerCategoryGenericSelected__3ad28:hover .stickerCategoryGenericIcon__3ad28 {
        color: Highlight;
      }

.premiumButtonNitroWheel_b72efa {
  margin-right: 4px;
}

.premiumButtonInner_b72efa {
  align-items: center;
  display: flex;
}

.premiumButton_b72efa {
  margin-top: 20px;
}

.emptyState__70126 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

  .emptyState__70126.unifyTrialUpsell__70126 {
    margin: 0;
  }

.header__70126 {
  margin-top: 16px;
  margin-bottom: 8px;
}

.subtitle__70126 {
  margin-bottom: 12px;
}

.stickersRow__70126 {
  display: flex;
}

.stickersRow__70126 .sticker__70126 {
    margin: auto 2px;
  }

.upsell_ac65bb {
  display: flex;
  background-color: var(--background-tertiary);
  padding: 8px 0 8px 8px;
  border-radius: 4px;
  align-items: center;
}

.icon_ac65bb {
  margin-right: 8px;
  width: 24px;
  color: var(--interactive-normal);
}

.body_ac65bb {
  flex: 1;
}

.iconWrapper_d13236 {
  align-items: center;
  background-image: linear-gradient(90deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  border-radius: 24px;
  color: var(--white-500);
  display: flex;
  justify-content: center;
  height: 24px;
  width: 24px;
}

.icon_d13236 {
  height: 12px;
  width: 12px;
}

.unownedStickerLockContainer_ced283 {
  border-radius: 100%;
  border: 1px solid var(--background-modifier-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-accent);
  position: absolute;
  right: 0;
  bottom: 0;
}

.unownedStickerLockIcon_ced283 {
  color: var(--interactive-normal);
}

@keyframes ripple_c6367b {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.row_c6367b {
  display: grid;
  margin-bottom: var(--custom-stickers-constants-sticker-picker-preview-margin);
  overflow: hidden;
  position: relative;
}

.sticker_c6367b {
  border-radius: var(--custom-stickers-constants-sticker-picker-preview-border-radius);
  padding: var(--custom-stickers-constants-sticker-picker-preview-padding);
  position: relative;
}

.sticker_c6367b:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transform-origin: center;
    opacity: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    border: 3px solid var(--yellow-300);
    border-radius: 100%;
    pointer-events: none;
  }

.full-motion .sticker_c6367b:after {
      transition: all 150ms ease-in-out;
    }

.sticker_c6367b.showPulse_c6367b:after {
      /* Small-scale attention-grabbing animations like this are alright to keep in reduced-motion */
      /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
      animation: ripple_c6367b 250ms ease-out 1;
    }

.createSticker_c6367b {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-weight: 500;
  background-color: var(--background-primary);
  border-radius: 8px;
}

.createInspected_c6367b {
  background-color: var(--background-secondary-alt);
}

.uploadCard_c6367b {
  cursor: pointer;
}

.iconWrapper_c6367b {
  align-items: center;
  background-image: linear-gradient(90deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
  border-radius: 36px;
  color: var(--white-500);
  display: flex;
  justify-content: center;
  height: 36px;
  width: 36px;
}

.icon_c6367b {
  height: 18px;
  width: 18px;
}

.inspectedIndicator_c6367b {
  height: 100%;
  left: 0;
  -webkit-mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
          mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
  position: absolute;
  top: 0;
  transition:
    background-color 0.08s ease-out, color 0.08s ease-out;
  width: 100%;
  z-index: -1;
}

.stickerInspected_c6367b .inspectedIndicator_c6367b {
  background-color: var(--background-accent);
}

.stickerPlaceholder_c6367b {
  
  cursor: default;
}

.viewAll_c6367b {
  
  position: absolute;
  right: 0;
  top: 0;
}

.viewAll_c6367b:hover .viewAllButton_c6367b, .viewAllInspected_c6367b .viewAllButton_c6367b {
    background-color: var(--background-tertiary);
    color: var(--interactive-hover);
  }

.viewAllButton_c6367b {
  
  align-items: center;
  background-color: var(--background-secondary-alt);
  box-sizing: border-box;
  color: var(--interactive-normal);
  display: grid;
  font-size: 16px;
  font-weight: 600;
  height: 100%;
  line-height: 20px;
  text-align: center;
  white-space: pre-line;
  width: 100%;
}

.stickerNode_c6367b {
  transition: opacity 0.25s;
}

.stickerNodeDimmed_c6367b {
  opacity: 0.3;
}

.stickerNodeHidden_c6367b {
  visibility: hidden;
}

.stickerUnsendable_c6367b {
  filter: grayscale(100%);
}

/*
  If we're in keyboard mode, then show a more prominent ring around the selected item that's a
  little different from the default focus ring
*/

.keyboard-mode .stickerInspected_c6367b {
  position: relative;
}

.keyboard-mode .stickerInspected_c6367b:before {
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;

    /* best match to .inspectedIndicator mask */
    border-radius: 12px;
    /* stylelint-disable-next-line discord/var-validator */
    --__adaptive-focus-color: var(--interactive-hover);
    /* stylelint-disable-next-line discord/var-validator */
    border: 2px solid var(--interactive-hover);
    border: 2px solid var(--__adaptive-focus-color);
    z-index: 1;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .stickerInspected_c6367b {
    background-color: HighlightText;
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }

.enable-forced-colors .stickerInspected_c6367b:before {
      border-color: Highlight;
    }

.wrapper_e94b8c {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.footerActions_e94b8c {
  margin-bottom: var(--custom-stickers-constants-sticker-picker-preview-margin);
}

.packHeader_e94b8c {
  position: sticky;
  top: 0;
}

.packHeaderShopWrapper_e94b8c {
  display: flex;
  -moz-column-gap: 12px;
       column-gap: 12px;
}

.packHeaderShop_e94b8c {
  flex: 1 1 auto;
  overflow: hidden;
}

.packHeaderShopActions_e94b8c {
  flex: 0 0 auto;
}

.sticker_e94b8c {
  cursor: pointer;
}

.divider_e94b8c {
  height: var(--custom-stickers-constants-stickers-list-divider-height);
  display: flex;
  align-items: center;
}

.shopDivider_e94b8c {
  border-top-width: var(--custom-stickers-constants-stickers-shop-divider-border-top-width);
  height: var(--custom-stickers-constants-stickers-shop-divider-height);
}

.tipWithSearch_e94b8c {
  margin-top: var(--custom-stickers-constants-sticker-picker-tip-margin-search-results);
}

.searchSuggestions_e94b8c {
  padding-top: 16px;
  max-width: 250px;
}

.searchSuggestion_e94b8c {
  background: var(--background-floating);
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  margin: 0 4px 8px;
  padding: 4px 8px;
}

.emptyGuildUpsell_e94b8c {
  box-sizing: border-box;
  height: var(--custom-stickers-constants-stickers-list-empty-guild-upsell-height);
  overflow: hidden;
  margin-left: 4px;
  margin-right: 4px;
}

.wrapper_cdf8a9 {
  flex: 1;
}

.upsellWrapper__4006b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--background-secondary);
  opacity: 0.98;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  padding: 0 20px;
}

  .upsellWrapper__4006b.unifyTrialUpsell__4006b {
    padding: 0;
    opacity: 1;
    justify-content: flex-end;
  }

.upsellImage__4006b {
  height: 80px;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 16px;
}

.upsellTitle__4006b {
  margin-bottom: 8px;
}

.upsellDescription__4006b {
  margin-bottom: 24px;
  max-width: 400px;
}

.upsellClose__4006b {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--interactive-normal);
}

.wrapper__8ef02 {
  position: relative;
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto 1fr auto;
}

.header__8ef02 {
  box-shadow: var(--elevation-low);
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  min-height: 1px;
  z-index: 1;
  padding: var(--custom-gif-picker-gutter-size);
  display: flex;
  align-items: center;
}

.visual-refresh .header__8ef02 {
    background-color: var(--background-surface-high);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
  }

.loadingIndicator__8ef02 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.listWrapper__8ef02 {
  grid-column: 2 / 2;
  grid-row: 2 / 2;
  overflow: hidden;
  position: relative;
}

.emptyState__8ef02 {
  grid-column: 1 / 3;
  grid-row: 2 / 2;
  overflow: hidden;
  position: relative;
  margin: 0 20px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .header__8ef02 {
    border-bottom: 1px solid CanvasText;
  }

.positionLayer__08434 {
  pointer-events: none;
  /*
    Create a new stacking context so that other siblings in the AppLayer (such
    as the sticker store) draw on top of this modal
  */
  z-index: 0;
}

.positionLayerDefaultAlignLeft__08434 {
  right: var(--spacing-16);
}

.positionLayerDefaultAlignRight__08434 {
  left: var(--spacing-16);
}

.positionContainer__08434 {
  width: 100%;
  height: 498px;
  pointer-events: none;
}

.visual-refresh .positionContainer__08434 {
    height: 486px;
  }

.positionContainerOnlyEmoji__08434 {
  height: 396px;
}

.drawerSizingWrapper__08434 {
  height: 100%;
  max-width: 100%;
  pointer-events: all;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.visual-refresh .drawerSizingWrapper__08434 {
    right: var(--space-24) !important;
  }

.visual-refresh .drawerSizingWrapper__08434 {
    /* stylelint-disable-next-line declaration-no-important */
  }

.contentWrapper__08434 {
  background-color: var(--background-secondary);
  border-radius: 8px;
  box-shadow: var(--shadow-border), var(--shadow-high);
  box-sizing: border-box;
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: 24px auto;
  grid-row-gap: 8px;
  height: 100%;
  overflow: hidden;
  padding-top: 16px;
  position: relative;
  z-index: 1;
}

.positionContainerOnlyEmoji__08434 .contentWrapper__08434 {
    grid-template-rows: auto;
  }

.visual-refresh .contentWrapper__08434 {
    background-color: var(--background-surface-high);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-high);
  }

.nav__08434 {
  padding: 0 16px;
}

.navList__08434 {
  display: flex;
}

.navItem__08434 {
  flex: 0 0 auto;
}

.navItem__08434 + .navItem__08434 {
  margin-left: 8px;
}

.navButton__08434 {
  border-radius: 4px;
  color: var(--interactive-normal);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  padding: 2px 8px;
  transition:
    background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.navButton__08434:hover {
    color: var(--interactive-hover);
    background-color: var(--background-modifier-hover);
  }

.navButton__08434:active {
    color: var(--interactive-active);
    background-color: var(--background-modifier-selected);
  }

.navButtonActive__08434 {
  background-color: var(--background-modifier-selected);
  color: var(--interactive-active);
}

.navButtonActive__08434:hover,
  .navButtonActive__08434:active {
    color: var(--interactive-active);
    background-color: var(--background-modifier-hover);
  }

.visual-refresh .navButton__08434 {
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    padding: 4px 12px;
    transition:
      background-color 0.1s ease-in-out, color 0.1s ease-in-out;
  }

.visual-refresh .navButton__08434:hover {
      background-color: var(--button-secondary-background-hover);
    }

.visual-refresh .navButton__08434:active {
      background-color: var(--button-secondary-background-active);
    }

.visual-refresh .navButtonActive__08434 {
    color: var(--button-secondary-text);
    /* text-sm/semibold */
    background-color: var(--button-secondary-background);
  }

.resizeHandle__08434 {
  cursor: ew-resize;
  height: 100%;
  position: absolute;
  top: 0;
  width: 4px;
  z-index: 2;
}

.introductionWrapper__08434 {
  text-align: center;
}

.introductionHeader__08434 {
  font-weight: 600;
  margin-bottom: 4px;
}

.introductionSubheader__08434 {
  margin-bottom: 16px;
}

.introductionAction__08434 {
  color: var(--brand-500);
  font-weight: 600;
}

.introductionTooltip__08434 {
  max-width: none;
  width: 280px;
}

.introductionTooltipContent__08434 {
  padding: 16px;
}

.stickersNavItem__08434 {
  display: flex;
  align-items: center;
}

.stickersUnseenBadge__08434 {
  height: 16px;
  border-radius: 8px;
  min-width: 16px;
  padding: 0;
  margin-left: 4px;
  box-shadow: none;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.soundboardContainer__08434 {
  position: relative;
}

.soundboardHeader__08434 {
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-low);
  padding: 0 16px 16px;
}

.visual-refresh .soundboardHeader__08434 {
    background-color: var(--background-surface-high);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--custom-gif-picker-gutter-size);
    box-shadow: none;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .resizeHandle__08434 {
    background-color: ButtonText;
  }

.enable-forced-colors .contentWrapper__08434 {
    border: 3px solid CanvasText;
  }

.enable-forced-colors .navButton__08434 {
    border: 1px solid ButtonFace;
  }

.enable-forced-colors .navButton__08434:hover {
      border-color: ButtonText;
    }

.enable-forced-colors .navButtonActive__08434 {
    border-color: Highlight;
  }

.soundmojiLabelContainer__08434 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-4);
  align-items: center;
}

.container_d4ced7 {
  bottom: 100%;
  margin-bottom: 12px;
  min-height: 16px;
  position: absolute;
  opacity: 1;
  will-change: opacity, transform;
  left: auto;
  right: 4px;
}

  .full-motion .container_d4ced7 {
    transition:
      opacity 0.125s ease-in, transform 0.125s cubic-bezier(0.48, 1.93, 1, 0.68);
  }

  .container_d4ced7.hidden_d4ced7 {
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
  }

.stickerIconOffset_d4ced7 {
  right: 40px;
}

.submitButtonOffset_d4ced7 {
  right: 56px;
}

.submitButtonOffset_d4ced7.stickerIconOffset_d4ced7 {
  right: 93px;
}

.containerBackground_d4ced7 {
  background-color: var(--background-floating);
  border: 1px solid var(--background-modifier-selected);
  border-radius: 8px;
  bottom: 0;
  box-shadow: var(--elevation-high);
  left: 0;
  min-height: 16px;
  opacity: 0.95;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.containerBackground_d4ced7:after {
    border: 7px solid transparent;
    border-top-color: var(--background-floating);
    border-top-width: 7px;
    content: '';
    height: 0;
    margin-top: -1px;
    position: absolute;
    right: 14px;
    top: 100%;
    width: 0;
  }

.bottomInformationTextContainer_d4ced7 {
  z-index: 1;
  position: relative;
  padding: 0 8px 10px;
  height: 24px;
}

.bottomInformationLayout_d4ced7 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.textDivider_d4ced7 {
  height: 1px;
  margin: 0 0 4px;
  background-color: var(--background-modifier-accent);
}

.descriptionText_d4ced7 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.stickerResults_d4ced7 {
  display: grid;
  grid-gap: var(--custom-expression-suggestions-sticker-suggestion-margin);
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, var(--custom-expression-suggestions-sticker-suggestion-size));
  padding: var(--custom-expression-suggestions-container-padding);
  position: relative;
  z-index: 1;
}

.keybind_d4ced7 {
  display: inline-block;
}

.closeIcon_d4ced7 {
  color: var(--text-muted);
  cursor: pointer;
}

.closeIcon_d4ced7:hover {
  color: var(--interactive-hover);
}

.suggestedExpression_d4ced7 {
  cursor: pointer;
  position: relative;
}

.mask_d4ced7 {
  bottom: -2px;
  opacity: 0;
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: opacity 0.08s ease-in-out;
  z-index: 0;
}

.suggestedExpressionFocused_d4ced7 .mask_d4ced7,
.suggestedExpression_d4ced7:focus .mask_d4ced7 {
  opacity: 1;
}

.maskBackground_d4ced7 {
  background-color: var(--background-accent);
  height: 100%;
  width: 100%;
}

.reduce-motion .container_d4ced7,
  .reduce-motion .mask_d4ced7 {
    transition: none;
  }

.theme-light .unownedStickerLockIcon_d4ced7 {
    color: var(--background-secondary);
  }

.theme-dark .containerBackground_d4ced7 {
    opacity: 0.95;
  }

.keybind_d4ced7 span {
  box-shadow: inset 0 -4px 0 rgba(32, 34, 37, 0.6);
}

.container_b7b2cf {
  display: flex;
  flex-direction: column;

  margin: auto;
  width: 400px;

  align-items: center;
  text-align: center;
}

.header_b7b2cf {
  margin-bottom: 24px;
}

.description_b7b2cf {
  margin-bottom: 40px;
}

.splashImage_b7b2cf {
  width: 223px;
}

.settings_b7b2cf {
  margin-top: 96px;
}

.modal_b7b2cf {
  margin-top: 40px;
  margin-bottom: 48px;
}

.blockedPaymentsModalHeader_b7b2cf,
.blockedPaymentsModalContent_b7b2cf {
  background-color: var(--modal-background);
}

.blockedPaymentsModalHeader_b7b2cf {
  border-radius: 4px 4px 0 0;
}

.blockedPaymentsModalContent_b7b2cf {
  border-radius: 0 0 4px 4px;
}

.blockedPaymentsWarningIcon_b7b2cf {
  margin-right: 10px;
}

.blockedPaymentsWarning_b7b2cf {
  display: flex;
  justify-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 16px 22px;
  color: var(--text-normal);
  background-color: var(--background-secondary);
}

.theme-dark .blockedPaymentsWarning_b7b2cf {
    border-color: var(--primary-700);
  }

.theme-light .blockedPaymentsWarning_b7b2cf {
    border-color: var(--primary-200);
  }

.headerBackground_b66356 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-20);
  width: 100%;
  min-height: 114px;
  box-sizing: border-box;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.visual-refresh .headerBackground_b66356 {
    width: calc(100% + 2px);
    margin-left: -1px;
    margin-top: -2px;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }

.tier2HeaderBackground_b66356 {
  
  background-image: linear-gradient(
    41.27deg,
    var(--premium-tier-2-purple-for-gradients) 20.01%,
    var(--premium-tier-2-purple-for-gradients-2) 56.27%,
    var(--premium-tier-2-pink-for-gradients) 92.19%
  );
}

.snow_b66356 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.closeIcon_b66356 {
  opacity: 1;
  color: var(--header-primary);
}

.headerTop_b66356 {
  position: relative;
  width: 100%;
}

.headerIcon_b66356 {
  width: auto;
  height: 22px;
  color: var(--white-500);
}

.headerIcon_b66356.nonTier2_b66356 {
  height: 35px;
}

.price_b66356 {
  position: relative;
  margin-top: 20px;
  padding: 2px 12px;
  font-weight: 500;
  font-size: 14px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.71;
  color: var(--brand-500);
  background-color: var(--white-500);
  border-radius: 3px;
  align-self: flex-end;
}

.closeButton_b66356 {
  color: var(--white-500) !important;
}

.closeButton_b66356 {
  /* stylelint-disable-next-line declaration-no-important */
}

.closeButton_b66356:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.closeButton_b66356:hover {
  /* NOTE(amadeus): This is a bit of an override hack -
   * but due to our post-css transforms - !importants get
   * ripped out when we do our rgba transform with
   * variables */
  /* stylelint-disable-next-line declaration-no-important */
}

.trialBadge_b66356 {
  position: absolute;
  left: 0;
  top: 43px;
}

.trialBadgeContainer_b66356 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: var(--white-500);
  max-width: 150px;
  max-height: 32px;
  margin-top: 8px;
  text-align: left;
  text-transform: uppercase;
}

.trialOfferText_b66356 {
  /* NOTE: The colors being used in this graident are not in the design system */
  /* stylelint-disable-next-line color-no-hex */
  background-image: linear-gradient(93.74deg, #8847c6 0.65%, #ac46c3 50.46%, #ad5b91 91.96%);
  /* The prefixed property is required to render properly */
  /* stylelint-disable-next-line */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 12px;
  padding: 4px 8px;
}

.trialOfferText_b66356.tier0TrialOffer_b66356 {
    background-image: var(--custom-premium-colors-premium-gradient-tier-0);
  }

.trialBadgeSparkles_b66356 {
  position: absolute;
  left: 4px;
  top: 43px;
}

.tier2Animation__387d4 {
  position: relative;
}

.panningAnimation__387d4 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 22px;
  right: 0;
  overflow: hidden;
}

.panningAnimationInner__387d4 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100% 100%;
}

.tier2Background__387d4 {
  
  opacity: 0.2;
  background-image: url(/assets/083b1bde1c6b39a3.svg);
}

.tier2Foreground__387d4 {
  
  background-image: url(/assets/ae4a4071a85dcaa6.svg);
}

.guildWrapper__387d4 {
  position: relative;
}

.guildBackground__387d4 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.guildStar__387d4 {
  position: absolute;
}

.sequencedAnimation__387d4 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
}

.modalHeader_b54a5b {
  margin-bottom: -20px;
  padding-bottom: 0;
  background-image: linear-gradient(var(--modal-background), var(--modal-background));
  background-size: 100% calc(100% - 20px);
  background-position: 0 10px;
  background-repeat: no-repeat;
  overflow: clip;
}

.modalHeaderCustomGift_b54a5b {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: var(--modal-vertical-padding);
  background-image: linear-gradient(var(--modal-background), var(--modal-background));
  background-size: 100% calc(100% - 20px);
  border-bottom: 1.5px solid var(--background-modifier-accent);
}

.visual-refresh .modalHeaderCustomGift_b54a5b {
    background-image: none;
    background-image: initial;
    background-size: auto auto;
    background-size: initial;
    border-bottom: none;
    padding-bottom: 0;
  }

.closeButton_b54a5b {
  margin-left: auto;
  padding: 0;
}

.closeButtonInner_b54a5b {
  height: 24px;
}

.header_b54a5b {
  flex-shrink: 0;
}

body .headerAnimation_b54a5b {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -22px;
  left: 50%;
  min-width: 440px;
  overflow: hidden;
  transform: translateX(-50%);
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.visual-refresh .headerAnimation_b54a5b {
    border-top-left-radius: calc(var(--radius-md) - 1px);
    border-top-right-radius: calc(var(--radius-md) - 1px);
  }

.paymentModalLockIcon__9a648 {
  color: var(--primary-500);
  padding: 0 var(--modal-horizontal-padding);
}

.theme-dark .paymentModalLockIcon__9a648 {
  color: var(--primary-300);
}

.lockIcon__9a648 {
  margin-right: 2px;
}

.back__962c6 {
  width: auto;
  min-width: auto;
  padding: 2px 4px;
  margin-right: auto;
}

.primaryIcon__962c6 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.button__962c6 {
  display: flex;
}

.body_c6f1a4 {
  height: 100%;
  border-radius: 0;
  background-color: var(--modal-background);
}

.body_c6f1a4.reviewStep_c6f1a4 {
  padding: 0 16px;
}

.sliderBody_c6f1a4 {
  flex-direction: row;
  flex-grow: 0;
  width: 100%;
  padding-bottom: 16px;
  box-sizing: border-box;
}

@media (max-width: 485px) {

.sliderBody_c6f1a4 {
    flex-direction: column;
    flex-grow: 1
}
  }

.visual-refresh .body_c6f1a4 {
    padding: 0 var(--space-24);
  }

.visual-refresh .sliderBody_c6f1a4 {
    padding-bottom: var(--space-8);
  }

.sliderBodyLarge_c6f1a4 {
  width: 804px;
}

.icon__9f2f4 {
  align-self: center;
  background-color: var(--background-floating);
  border-radius: 50%;
}

  .icon__9f2f4.small__9f2f4 {
    width: 40px;
    height: 40px;
  }

  .icon__9f2f4.medium__9f2f4 {
    width: 66px;
    height: 66px;
  }

.container__9e80c {
  display: flex;
}

.emojiContainer__9e80c {
  margin-right: 16px;
}

.name__9e80c {
  margin-bottom: 2px;
}

.infoContainer__9e80c {
  flex: 1;
}

.emojiIcon__9e80c {
  width: 20px;
  height: 20px;
}

.container__4328f {
  display: flex;
  flex-direction: column;
}

.header__4328f {
  margin-top: 16px;
  text-align: center;
  color: var(--header-secondary);
}

.header__4328f strong {
    color: var(--header-primary);
  }

.divider__4328f {
  height: 1px;
  background-color: var(--background-modifier-accent);
  border: none;
  width: 100%;
  margin: 28px 0;
}

.benefitsContainer__4328f {
  margin-top: 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.benefit__4328f {
  background-color: var(--background-secondary);
  padding: 16px;
  border-radius: 8px;
}

/* Header */

.headerContainer__2dea3 {
  width: 100%;
  height: 112px;
  position: relative;
  background-color: var(--background-primary);
}

.closeContainer__2dea3 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: hsl(var(--black-500-hsl) / 0.85);
  border-radius: 50%;
  cursor: pointer;
}

.closeIcon__2dea3 {
  width: 16px;
  height: 16px;
  color: var(--interactive-normal);
}

.headerImageContainer__2dea3 {
  width: 100%;
  height: 100%;
}

.headerImage__2dea3 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Purchase Confirmation */

.confirmationContainer__2dea3 {
  margin-top: 32px;
}

.purchaseConfirmation__2dea3 {
  
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.confirmationTitle__2dea3 {
  margin-top: 16px;
}

.confirmationSubtitle__2dea3 {
  margin-top: 8px;
}

.seasonalGiftBoxHeaderIcon_ae16b8 {
  width: 260px;
  position: absolute;
  bottom: -11px;
  align-self: center;
  z-index: 1; /* needed for new payment modal */
}

.container_ae16b8 {
  background-image: linear-gradient(var(--modal-background), var(--modal-background));
  background-size: 100% calc(100% - 20px);

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 4px 4px 0 0;
}

.closeButton_ae16b8 {
  margin: var(--modal-vertical-padding) var(--modal-horizontal-padding);
  margin-left: auto;
}

.visual-refresh .container_ae16b8 {
    background-image: none;
    background-image: initial;
    background-size: auto auto;
    background-size: initial;
  }

.spinner_ca0af2 {
  border-radius: 4px;
  background-color: var(--modal-background);
  max-height: 720px;
  min-height: 200px;
}

.shaker_e5f3a9 {
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  max-height: 720px;
  height: 100%;
}

html:not(.visual-refresh) .root_e5f3a9 {
    background-color: transparent;
  }

.root_e5f3a9 > :last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.visual-refresh .shaker_e5f3a9 {
    max-height: inherit;
  }

.visual-refresh .root_e5f3a9 > :last-child {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
  }

.root_e5f3a9.withHeader_e5f3a9 > :first-child {
  /* transparent background is to make sure the modal background does not show up behind header
    due to anti-aliasing (even though border radius is the same) */
  background-color: transparent;
}

@media (max-width: 485px) {
  .shaker_e5f3a9 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    max-height: none;
  }

  .root_e5f3a9 {
    width: 100vw;
    border-radius: 0;
    justify-content: center;
  }
}

.halloweenModalHeight_e5f3a9 {
  max-height: 800px;
}

.button__353c4 {
  position: relative;
  top: 3px;
  left: 0.3px;
  opacity: 0.8;
  margin-left: 4px;
  /* This is a very small UX animation where a caret turns into an x */
  /* stylelint-disable-next-line discord/respect-reduced-motion */
  transition:
    transform 0.2s ease-out, stroke-dasharray 0.2s ease-out;
}

  .button__353c4.open__353c4 {
    /* rspack is transforming this to a weird value for some reason but only on
     * build */
    --custom-fix-rspack-build-bug: -90deg;
    transform: translate3d(0, -3px, 0) rotate3d(0, 0, 1, -90deg);
    transform: translate3d(0, -3px, 0) rotate3d(0, 0, 1, var(--custom-fix-rspack-build-bug));
  }

  .button__353c4.open__353c4 path {
      stroke-dasharray: 14;
    }

  .button__353c4 path {
    stroke-width: 2px;
    stroke-dasharray: 7;
    stroke-dashoffset: 1;
    transition: stroke-dasharray 0.2s ease;
  }

.withHighlight__353c4 {
  opacity: 1;
}

.cardIcon__29abc {
  position: relative;
  text-indent: -9999em;
  box-shadow: 0 1px 3px hsl(var(--black-500-hsl) / 0.1);
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}

  .full-motion .cardIcon__29abc {
    transition: transform 300ms ease-in-out;
  }

  .cardIcon__29abc:before,
  .cardIcon__29abc:after {
    backface-visibility: hidden;
  }

  .cardIcon__29abc:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(/assets/22f7eeb9ea9904c1.svg);
    background-size: 100% 100%;
    border-radius: 2px;
    backface-visibility: hidden;
    transform: rotateY(0deg);
  }

  .cardIcon__29abc:after {
    content: '';
    background: url(/assets/fea1d83d02c90c67.svg);
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
  }

  .cardIcon__29abc.visa__29abc:before {
      background-image: url(/assets/4c049942fdde71f8.svg);
    }

  .cardIcon__29abc.amex__29abc:before, .cardIcon__29abc.american-express__29abc:before {
      background-image: url(/assets/e415725e0e3a87fb.svg);
    }

  .cardIcon__29abc.discover__29abc:before {
      background-image: url(/assets/9a5413553cab204a.svg);
    }

  .cardIcon__29abc.mastercard__29abc:before, .cardIcon__29abc.master-card__29abc:before {
      background-image: url(/assets/ba865ff6773d1876.svg);
    }

  .cardIcon__29abc.paypal__29abc:before {
      background-image: url(/assets/0b87743361cfb797.svg);
    }

  .cardIcon__29abc.paymentRequest__29abc:before {
      background-image: url(/assets/a500e0b04a325513.svg);
    }

  .cardIcon__29abc.gPay__29abc:before {
      background-image: url(/assets/04e197da860c981f.svg);
    }

  .cardIcon__29abc.sofort__29abc:before {
      background-image: url(/assets/eb22e43f6f710d3b.svg);
    }

  .cardIcon__29abc.przelewy24__29abc:before {
      background-image: url(/assets/3d961164938e62d7.svg);
    }

  .cardIcon__29abc.giropay__29abc:before {
      background-image: url(/assets/fcb798c4bf712284.svg);
    }

  .cardIcon__29abc.paysafecard__29abc:before {
      background-image: url(/assets/0b47f9360f12b1fa.svg);
    }

  .cardIcon__29abc.gcash__29abc:before {
      background-image: url(/assets/7e5579c4c73ca390.svg);
    }

  .cardIcon__29abc.grabpay__29abc:before {
      background-image: url(/assets/224f56365db6763e.svg);
    }

  .cardIcon__29abc.momo_wallet__29abc:before {
      background-image: url(/assets/0dbebb1dde8de002.svg);
    }

  .cardIcon__29abc.venmo__29abc:before {
      background-image: url(/assets/9bb2cc8906a18ba2.svg);
    }

  .cardIcon__29abc.kakaopay__29abc:before {
      background-image: url(/assets/2a5fa2783cb39764.svg);
    }

  .cardIcon__29abc.gopay_wallet__29abc:before {
      background-image: url(/assets/637bf6beddb5589b.svg);
    }

  .cardIcon__29abc.bancontact__29abc:before {
      background-image: url(/assets/ce90dd2b5978b623.svg);
    }

  .cardIcon__29abc.eps__29abc:before {
      background-image: url(/assets/3f80791089be55d4.svg);
    }

  .cardIcon__29abc.ideal__29abc:before {
      background-image: url(/assets/160f818e8dc66a17.svg);
    }

  .cardIcon__29abc.cash_app__29abc:before {
      background-image: url(/assets/3de97fb87787f20b.svg);
    }

  .cardIcon__29abc.apple__29abc:before {
      background-image: url(/assets/824341c879ac6d59.svg);
    }

  .cardIcon__29abc.apple_light__29abc:before {
      background-image: url(/assets/824341c879ac6d59.svg);
    }

.theme-light .cardIcon__29abc.apple__29abc:before {
      background-image: url(/assets/24de41d4bd8ef584.svg);
    }

.theme-light .cardIcon__29abc.apple_light__29abc:before {
      background-image: url(/assets/824341c879ac6d59.svg);
    }

.theme-light .cardIcon__29abc.venmo__29abc:before {
      background-image: url(/assets/1566a4fd747aba18.svg);
    }

.reduce-motion .cardIcon__29abc {
    transition: none 0s ease 0s;
    transition: initial;
  }

.cardIconSmall__29abc {
  
  width: 32px;
  height: 22px;
}

.cardIconMedium__29abc {
  
  width: 64px;
  height: 44px;
}

.cardIconLarge__29abc {
  
  width: 96px;
  height: 66px;
}

.cardIconXLarge__29abc {
  
  width: 128px;
  height: 88px;
}

.flipped__29abc {
  transform: rotateY(180deg);
}

.buttonIcon__4151b {
  margin-right: 8px;
}

.button__4151b {
  width: 200px !important;
}

.button__4151b {
  /* stylelint-disable-next-line declaration-no-important */
  margin-bottom: 8px;
}

.button__4151b:last-child {
    margin-bottom: 0;
  }

.centerContainer__4151b {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  align-items: center;
  flex-wrap: nowrap;
}

.connectionInstructions__4151b {
  text-align: center;
  margin-top: 8px;
}

.paymentRequestIcon__4151b {
  margin: auto;
  top: 9px;
  left: 8px;
  z-index: 1;
  margin-bottom: 25px;
}

.theme-light .appleConnectorIcon__4151b {
    box-shadow: none;
  }

.buttonIcon__92b20 {
  margin-right: 8px;
}

.allPaymentsToggleButton__92b20 {
  color: var(--header-primary);
  margin: 20px auto 0;
  padding: 4px 4px 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.allPaymentsToggleButton__92b20:hover {
    cursor: pointer;
  }

.allPaymentsSection__92b20 {
  padding-top: 24px;
}

.hidden__92b20 {
  display: none;
}

.newPaymentBadge__92b20 {
  margin-left: 5px;
  color: var(--brand-500);
  background-color: var(--white-500);
}

.SeparatorUpper__92b20,
.SeparatorLower__92b20 {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--background-modifier-accent);
}

.SeparatorUpper__92b20 {
  margin: 0 0 16px;
}

.SeparatorLower__92b20 {
  margin: 16px 0 0;
}

.container__92b20 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--spacing-8);
  gap: var(--spacing-8);
}

@media (max-width: 485px) {
  .container__92b20 {
    grid-template-columns: 1fr;
  }
}

.inputWrapper_a76d33 {
  position: relative;
}

.paypalIcon_a76d33 {
  position: absolute;
  top: 9px;
  left: 8px;
  z-index: 1;
}

.paypalInput_a76d33 {
  padding-left: 48px;
  cursor: default;
  border-color: hsl(var(--black-500-hsl) / 0.3);
}

.paypalInput_a76d33:focus,
  .paypalInput_a76d33:hover {
    border-color: hsl(var(--black-500-hsl) / 0.3);
  }

.venmoIcon__44362 {
  margin: auto;
  top: 9px;
  left: 8px;
  z-index: 1;
  margin-bottom: 25px;
}

.connectionInstructions__44362 {
  text-align: center;
  margin-top: 8px;
}

.row__06c2b {
  padding-top: 20px;
}

  .row__06c2b:first-child {
    padding-top: 0;
  }

.section__06c2b {
  box-sizing: border-box;
  padding-left: 20px;
  flex: 0 1 auto;
}

.section__06c2b:first-child {
    padding-left: 0;
  }

.width100__06c2b {
  
  width: 100%;
}

.width75__06c2b {
  
  width: 75%;
}

.width60__06c2b {
  
  width: 60%;
}

.width40__06c2b {
  
  width: 40%;
}

.width30__06c2b {
  
  width: 30%;
}

.width50__06c2b {
  
  width: 50%;
}

.width25__06c2b {
  
  width: 25%;
}

.modal__6181b {
  overflow-x: hidden;
  transform: translate3d(0, 0, 0);
}

.planSelector__6181b {
  margin-top: 20px;
}

.form__6181b {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  max-height: 660px;
}

.divider__6181b {
  position: relative;
  border-top: 1px solid;
  margin: 0 20px;
}

.content__6181b {
  margin-bottom: 20px;
}

.giftToggle__6181b {
  margin-top: 16px;
}

.formTitle__6181b {
  margin: 20px 0 10px;
}

.purchaseTerms__6181b {
  margin-top: 20px;
}

.errorBlock__6181b {
  margin-top: 20px;
}

.invalidIcon__6181b {
  width: 18px;
  height: 18px;
  padding: 0 1px;
}

.choosePaymentSourceType__6181b {
  margin-top: 20px;
}

.buyButtonTooltipWrapper__6181b {
  /* Because disabled elements do not emit mouseleave, we use a temporary mouse target lol */
  /* https://github.com/facebook/react/issues/10109 */
  position: relative;
}

.buyButtonTooltipTarget__6181b {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  cursor: not-allowed;
}

.backButtonSize__6181b {
  height: 38px;
  width: auto;
}

.backButton__6181b {
  padding: 0;
}

.backButton__6181b:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.modalContent__6181b {
  /* This enables momentum based scrolling */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 485px) and (max-height: 550px) {
  .form__6181b {
    display: block;
  }

  .modalContent__6181b {
    height: auto;
  }
}

.theme-dark .divider__6181b {
    border-color: var(--primary-630);
  }

.theme-light .divider__6181b {
    border-color: hsl(var(--primary-200-hsl) / 0.6);
  }

.backButtonColor__6181b {
  color: var(--text-normal);
}

.checkboxLabel__6181b {
  color: var(--primary-300);
}

.note__2ef07 {
  margin-top: 20px;
  position: relative;
  font-size: 12px;
}

.note__2ef07 ~ .note__2ef07 {
  margin-top: 8px;
}

.icon__2ef07 {
  flex-shrink: 0;
  margin-right: 8px;
}

.large__2ef07 {
  width: 20px;
  height: 20px;
}

.small__2ef07 {
  width: 14px;
  height: 14px;
}

.colorWarning__2ef07 {
  color: var(--yellow-300);
}

.colorError__2ef07 {
  color: var(--status-danger);
}

.colorPrimary__2ef07 {
  color: var(--text-muted);
}

.colorSecondary__2ef07 {
  color: var(--header-secondary);
}

.wrapper__4106a {
  flex: 0 0 auto;
  padding: var(--space-16) var(--space-16) var(--space-8);
  background-color: var(--modal-background);
}

.visual-refresh .wrapper__4106a {
    padding-left: var(--spacing-24);
  }

.content_a8c622 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background-color: var(--modal-background);
  border-radius: inherit;
}

.breadcrumbsWrapper_a8c622 {
  /* Temporarily commenting this out for BOGO promo banner */
  /* border-bottom: 1px solid var(--background-modifier-accent); */
  flex: 0 0 auto;
  margin: 0 16px;
  padding: 16px 0;
}

.bodyWrapper_a8c622 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.scroller_a8c622 {
  height: 100%;
  padding: 0 16px 16px;
}

.errorBlockWrapper_a8c622 {
  padding: 16px 16px 0;
}

.paymentNote_a8c622 {
  padding: 0 16px;
}

.loadingBlock_a8c622 {
  height: 192px;
}

.sequencer_a8c622 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.sequencerStatic_a8c622 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.sequencerAnimatedNode_a8c622 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.cardNumberWrapper__8b579 {
  position: relative;
}

.cardIcon__8b579 {
  position: absolute;
  top: 10px;
  left: 10px;
}

.cardInput__8b579 {
  padding: 10px 9px;
  border-radius: 3px;
  background-color: var(--input-background);
  border: 1px solid var(--input-border);
}

.hiddenDiv__8b579 {
  visibility: hidden;
}

.visual-refresh .cardInput__8b579 {
    border-radius: var(--radius-sm);
  }

.visual-refresh .hiddenDiv__8b579 {
    height: 0;
    padding: 0;
  }

.cardNumberInput__8b579 {
  padding-left: 55px;
}

.cardInputFocused__8b579 {
  border-color: var(--text-link);
}

.cardInputError__8b579 {
  border-color: var(--status-danger);
}

/* Dark Theme */

.theme-dark .inputPrefix__8b579 {
    opacity: 0.5;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .cardInput__8b579 {
    border: 1px solid ButtonText;
    display: block;
  }

.enable-forced-colors .cardInput__8b579:hover,
    .enable-forced-colors .cardInput__8b579:focus {
      border-color: Highlight;
    }

.enable-forced-colors .cardInputFocused__8b579 {
    border-color: Highlight;
  }

.enable-forced-colors .inputPrefix__8b579 {
    opacity: 1;
  }

.cardBrands__3e8d5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  margin-bottom: -15px;
}

.cardFormHeader__3e8d5 {
  margin-left: 5px;
}

.cardFormHeader__3e8d5.jcb__3e8d5:before {
      background-image: url(/assets/e8bf9bea0d018670.svg);
    }

.theme-light .cardFormHeader__3e8d5.jcb__3e8d5:before {
      background-image: url(/assets/e8efae14b14ee8dd.svg);
    }

.cardFormHeader__3e8d5.jcb_monochrome__3e8d5:before {
      background-image: url(/assets/dcebba6e03f7a1f8.svg);
    }

.theme-light .cardFormHeader__3e8d5.jcb_monochrome__3e8d5:before {
      background-image: url(/assets/3ec57733d5de83bd.svg);
    }

.cardFormHeader__3e8d5.amex__3e8d5:before {
      background-image: url(/assets/49f0d07c4a5edf19.svg);
    }

.theme-light .cardFormHeader__3e8d5.amex__3e8d5:before {
      background-image: url(/assets/886d17f4a179ce9a.svg);
    }

.cardFormHeader__3e8d5.amex_monochrome__3e8d5:before {
      background-image: url(/assets/9e62f4a1513dbf78.svg);
    }

.theme-light .cardFormHeader__3e8d5.amex_monochrome__3e8d5:before {
      background-image: url(/assets/2a2717437ecb9409.svg);
    }

.cardFormHeader__3e8d5.mastercard__3e8d5:before {
      background-image: url(/assets/61a8baaebf339a2c.svg);
    }

.theme-light .cardFormHeader__3e8d5.mastercard__3e8d5:before {
      background-image: url(/assets/983c3fd5283d32f6.svg);
    }

.cardFormHeader__3e8d5.mastercard_monochrome__3e8d5:before {
      background-image: url(/assets/929007941f982dc3.svg);
    }

.theme-light .cardFormHeader__3e8d5.mastercard_monochrome__3e8d5:before {
      background-image: url(/assets/2d35b5c00b617a15.svg);
    }

.cardFormHeader__3e8d5.visa__3e8d5:before {
      background-image: url(/assets/7149accdcaae7d2f.svg);
    }

.theme-light .cardFormHeader__3e8d5.visa__3e8d5:before {
      background-image: url(/assets/4ae102bdf144a582.svg);
    }

.cardFormHeader__3e8d5.visa_monochrome__3e8d5:before {
      background-image: url(/assets/c58095d35f0201e3.svg);
    }

.theme-light .cardFormHeader__3e8d5.visa_monochrome__3e8d5:before {
      background-image: url(/assets/bb1e18bcf1497322.svg);
    }

.cardFormHeader__3e8d5.discover__3e8d5:before {
      background-image: url(/assets/e449e7cba36f144c.svg);
    }

.theme-light .cardFormHeader__3e8d5.discover__3e8d5:before {
      background-image: url(/assets/75b4bad7b0654bd8.svg);
    }

.cardFormHeader__3e8d5.discover_monochrome__3e8d5:before {
      background-image: url(/assets/9f626707af59b089.svg);
    }

.theme-light .cardFormHeader__3e8d5.discover_monochrome__3e8d5:before {
      background-image: url(/assets/3be3e11e2b0d8996.svg);
    }

.cardFormHeader__3e8d5.dinersclub__3e8d5:before {
      background-image: url(/assets/b596cb9f6ccc2408.svg);
    }

.theme-light .cardFormHeader__3e8d5.dinersclub__3e8d5:before {
      background-image: url(/assets/fc8d44ec7c50ab0e.svg);
    }

.cardFormHeader__3e8d5.dinersclub_monochrome__3e8d5:before {
      background-image: url(/assets/2ce5f42c5062092f.svg);
    }

.theme-light .cardFormHeader__3e8d5.dinersclub_monochrome__3e8d5:before {
      background-image: url(/assets/3b5c40ec70355fde.svg);
    }

.cardFormHeader__3e8d5.unionpay__3e8d5:before {
      background-image: url(/assets/3472374445e1b6b0.svg);
    }

.theme-light .cardFormHeader__3e8d5.unionpay__3e8d5:before {
      background-image: url(/assets/3472374445e1b6b0.svg);
    }

.cardFormHeader__3e8d5.unionpay_monochrome__3e8d5:before {
      background-image: url(/assets/f4a4e394e0c0b9f2.svg);
    }

.theme-light .cardFormHeader__3e8d5.unionpay_monochrome__3e8d5:before {
      background-image: url(/assets/d1fe91ba5e5f4702.svg);
    }

.cardNumberWrapper__4ea5a {
  position: relative;
}

.cardIcon__4ea5a {
  position: absolute;
  top: 9px;
  left: 10px;
}

.cardIcon__4ea5a.submitting__4ea5a {
    /* Small loading animations are alright to keep in reduced-motion */
    /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
    animation: pulse__4ea5a 750ms ease-in-out infinite alternate;
  }

.cardNumberInput__4ea5a {
  padding-left: 55px;
}

@keyframes pulse__4ea5a {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

.body_d31d57 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.nonTopInputWrapper_d31d57 {
  padding-top: 20px;
}

/* This class is for building a stub to accomodate the EPS and iDEAL Stripe element dropdown iframe element */

.bankSelectionStub_d31d57 {
  /* Stripe dropdown iframe element has 241px height and 2px top padding, thus we create a 243px stub */
  height: 243px;
  display: flex;
  justify-content: center;
}

.link__6a22b {
  color: var(--interactive-active);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.body__949a0 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.description__949a0 {
  text-align: center;
  margin-top: 8px;
}

.body__9e82b {
  padding-top: 16px;
  padding-bottom: 16px;
}

.adyen-checkout__spinner__wrapper{align-items:center;display:flex;height:100%;justify-content:center}.adyen-checkout__spinner__wrapper--inline{display:inline-block;height:auto;margin-right:8px}[dir=rtl] .adyen-checkout__spinner__wrapper--inline{margin-left:8px;margin-right:0}.adyen-checkout__spinner{animation:rotate-spinner 1.5s linear infinite;border:3px solid #0075ff;border-radius:50%;border-top-color:transparent;height:43px;width:43px}.adyen-checkout__spinner--large{height:43px;width:43px}.adyen-checkout__spinner--small{border-width:2px;height:16px;width:16px}.adyen-checkout__spinner--medium{height:28px;width:28px}@keyframes rotate-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.adyen-checkout__button{background:#00112c;border:0;border-radius:6px;color:#fff;cursor:pointer;font-size:1em;font-weight:500;height:48px;margin:0;padding:15px;-webkit-text-decoration:none;text-decoration:none;transition:background .3s ease-out, box-shadow .3s ease-out;width:100%}.adyen-checkout__button:focus{box-shadow:0 0 0 2px #3070ED;outline:0}.adyen-checkout__button:hover{background:#1c3045;box-shadow:0 0,0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14)}.adyen-checkout__button:active{background:#3a4a5c}.adyen-checkout__button:hover:focus{box-shadow:0 0 0 2px #3070ED,0 3px 4px rgba(0,15,45,.2)}.adyen-checkout__button:disabled,.adyen-checkout__button:disabled:hover{box-shadow:none;cursor:not-allowed;opacity:.4;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--loading{background:#687282;box-shadow:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__button.adyen-checkout__button--pay{display:flex;justify-content:center;margin-top:24px}.adyen-checkout__button.adyen-checkout__button--pay:disabled{opacity:.4}.adyen-checkout__button.adyen-checkout__button--standalone{margin-top:0}.adyen-checkout__button.adyen-checkout__button--inline{display:block;font-size:.81em;height:auto;padding:10px 8px;width:auto}.adyen-checkout__button.adyen-checkout__button--ghost{background:none;border:0;color:#00112c}.adyen-checkout__button.adyen-checkout__button--ghost:hover{background:#f7f8f9;box-shadow:none}.adyen-checkout__button.adyen-checkout__button--ghost:active{background:#e6e9eb;box-shadow:none}.adyen-checkout__button.adyen-checkout__button--secondary{background:#fff;border:1px solid #00112c;color:#00112c;padding:10px 12px}.adyen-checkout__button.adyen-checkout__button--secondary:hover{background:#f7f8f9;box-shadow:0 2px 4px rgba(27,42,60,.2),0 4px 5px rgba(27,42,60,.14)}.adyen-checkout__button.adyen-checkout__button--secondary:active,.adyen-checkout__button.adyen-checkout__button--secondary:active:hover{background:#f7f8f9;box-shadow:none}.adyen-checkout__button.adyen-checkout__button--secondary:disabled,.adyen-checkout__button.adyen-checkout__button--secondary:disabled:hover{background-color:#f7f8f9;border-color:#99a3ad;box-shadow:none;cursor:not-allowed;opacity:.5;-webkit-user-select:all;-moz-user-select:all;user-select:all}.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner{border-color:transparent #00112c #00112c}.adyen-checkout__button.adyen-checkout__button--action{background:rgba(0,102,255,.1);border:1px solid transparent;color:#0075ff;padding:10px 12px}.adyen-checkout__button.adyen-checkout__button--action:hover{background:rgba(0,102,255,.2);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--action:active,.adyen-checkout__button.adyen-checkout__button--action:active:hover{background:rgba(0,102,255,.3);box-shadow:none}.adyen-checkout__button.adyen-checkout__button--link{background:transparent;border:1px solid transparent;border-radius:3px;color:#0075ff;font-weight:400;padding:2px}.adyen-checkout__button.adyen-checkout__button--link:hover{background:transparent;box-shadow:none;-webkit-text-decoration:underline;text-decoration:underline}.adyen-checkout__button.adyen-checkout__button--completed,.adyen-checkout__button.adyen-checkout__button--completed:active,.adyen-checkout__button.adyen-checkout__button--completed:active:hover,.adyen-checkout__button.adyen-checkout__button--completed:hover{background:#089a43;color:#fff}.adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon{filter:brightness(0) invert(1)}.adyen-checkout__button__content{align-items:center;display:flex;height:100%;justify-content:center}.adyen-checkout__button__icon{margin-right:12px}[dir=rtl] .adyen-checkout__button__icon{margin-left:12px;margin-right:0}.adyen-checkout__button__text{display:block;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adyen-checkout__button .adyen-checkout__spinner{border-color:transparent #fff #fff}.checkout-secondary-button__text{font-size:.85em;margin-left:5px;margin-top:1px}.adyen-checkout__fieldset{-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-before:0;-webkit-padding-after:0;-webkit-padding-start:0;-webkit-padding-end:0;border:none;display:block;margin-right:0;margin-left:0;margin:0;padding-top:0;padding-bottom:8px;padding-bottom:0;padding-right:0;padding-left:0;width:100%}.adyen-checkout__fieldset:last-of-type{padding-bottom:0}.adyen-checkout__fieldset+.adyen-checkout__fieldset{margin-top:16px}.adyen-checkout__fieldset__title{color:#687282;display:block;font-size:.68em;font-weight:700;letter-spacing:1px;margin:0;padding:0 0 12px;text-transform:uppercase}.adyen-checkout__field-group,.adyen-checkout__fieldset__fields{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}@media (min-width:480px){.adyen-checkout__field-group:last-of-type .adyen-checkout__field{margin-bottom:0}}.adyen-checkout__field-group:last-of-type .adyen-checkout__field:last-of-type,:not(.adyen-checkout__field-group)>.adyen-checkout__field:last-of-type{margin-bottom:0}.adyen-checkout__fieldset--readonly .adyen-checkout__fieldset__fields{color:#00112c;font-size:.81em;line-height:19px;margin:0}.adyen-checkout__field{display:block;margin-bottom:16px;width:100%}.adyen-checkout__label{display:block;position:relative}.adyen-checkout__helper-text,.adyen-checkout__label__text{color:#00112c;display:block;font-size:.81em;font-weight:400;line-height:13px;padding-bottom:5px}.adyen-checkout__label-adornment--end{position:absolute;right:0;top:0}.adyen-checkout__helper-text{color:#687282}.adyen-checkout__label__text{display:block;overflow:hidden;text-overflow:ellipsis;transition:color .1s ease-out;white-space:nowrap}.adyen-checkout__label__text--error{color:#c12424}.adyen-checkout__label--focused .adyen-checkout__label__text{color:#0075ff}.adyen-checkout__error-text{align-items:center;color:#c12424;display:flex;font-size:.75em;font-weight:400;margin-top:4px}.adyen-checkout__field-wrapper{display:flex;width:100%}@media (min-width:480px){.adyen-checkout__field--20{width:20%}.adyen-checkout__field--30{width:30%}.adyen-checkout__field--40{width:40%}.adyen-checkout__field--50{width:50%}.adyen-checkout__field--60{width:60%}.adyen-checkout__field--70{width:70%}.adyen-checkout__field--80{width:80%}.adyen-checkout__field--col-70{width:calc(70% - 8px)}.adyen-checkout__field--col-30{width:calc(30% - 8px)}.adyen-checkout__field--col-50{width:calc(50% - 8px)}}.adyen-checkout__field-wrapper>.adyen-checkout__field:first-child{margin-right:8px}[dir=rtl] .adyen-checkout__field-wrapper>.adyen-checkout__field:first-child{margin-left:8px;margin-right:0}.adyen-checkout__field-wrapper>.adyen-checkout__field:nth-child(2){margin-left:8px}[dir=rtl] .adyen-checkout__field-wrapper>.adyen-checkout__field:nth-child(2){margin-left:0;margin-right:8px}.adyen-checkout__field-wrapper:last-of-type>.adyen-checkout__field{margin-bottom:0}.adyen-checkout__input{background:#fff;border:1px solid #b9c4c9;border-radius:6px;box-sizing:border-box;caret-color:#0075ff;color:#00112c;display:block;font-family:inherit;font-size:1em;height:40px;outline:none;padding:5px 8px;position:relative;transition:border .2s ease-out, box-shadow .2s ease-out;width:100%}.adyen-checkout__input:hover{border-color:#99a3ad}.adyen-checkout__input:required{box-shadow:none}.adyen-checkout__input--disabled,.adyen-checkout__input[readonly]{background:#e6e9eb;border-color:#e6e9eb}.adyen-checkout__input--disabled:hover{border-color:#e6e9eb}.adyen-checkout__input-wrapper{display:block;position:relative}.adyen-checkout__input-wrapper--block{display:block}.adyen-checkout-input__inline-validation{height:16px;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px}[dir=rtl] .adyen-checkout-input__inline-validation{left:14px;right:auto}[dir=ltr] .adyen-checkout-input__inline-validation{left:auto;right:14px}.adyen-checkout-input__inline-validation--valid{color:#089a43}.adyen-checkout-input__inline-validation--invalid{color:#c12424}.adyen-checkout__input--valid{border-bottom-color:#089a43}.adyen-checkout__input--error,.adyen-checkout__input--error:hover,.adyen-checkout__input--invalid,.adyen-checkout__input--invalid:hover{border-color:#c12424}.adyen-checkout__input::-moz-placeholder{color:#707070;font-weight:200}.adyen-checkout__input::placeholder{color:#707070;font-weight:200}.adyen-checkout__input--date{padding-right:30px}.adyen-checkout__input--focus,.adyen-checkout__input--focus:hover,.adyen-checkout__input:active,.adyen-checkout__input:active:hover,.adyen-checkout__input:focus,.adyen-checkout__input:focus:hover{border:1px solid #0075ff;box-shadow:0 0 0 2px #3070ED}.adyen-checkout__input[readonly],.adyen-checkout__input[readonly]:hover{background-color:#e6e9eb;border-color:transparent;color:#687282;cursor:default}.adyen-checkout__fieldset--personalDetails .adyen-checkout__field--gender .adyen-checkout__radio_group{display:flex}.adyen-checkout__fieldset--personalDetails .adyen-checkout__radio_group{display:flex;margin:8px 0}.adyen-checkout__fieldset--personalDetails .adyen-checkout__radio_group__input-wrapper{margin-right:20px}.adyen-checkout__fieldset--personalDetails .adyen-checkout__radio_group__input-wrapper:last-child{margin:0}.adyen-checkout__radio_group+.adyen-checkout-input__inline-validation{display:none}.adyen-checkout__radio_group__input{opacity:0;position:absolute}.adyen-checkout__radio_group__label{color:inherit;display:block;font-size:.81em;font-weight:400;line-height:16px;overflow:visible;padding-bottom:0;padding-left:24px;position:relative}.adyen-checkout__label--focused .adyen-checkout__radio_group__label{color:inherit}.adyen-checkout__radio_group__label:before{background-color:#fff;border:1px solid #b9c4c9;border-radius:50%;content:"";height:16px;left:0;position:absolute;top:0;transition:border-color .2s ease-out, box-shadow .2s ease-out;width:16px}.adyen-checkout__radio_group__label:hover:before{border-color:#99a3ad;box-shadow:0 0 0 2px #d4d9db;cursor:pointer}.adyen-checkout__radio_group__label:after{background-color:#fff;border-radius:50%;box-shadow:0 1px 1px rgba(0,15,45,.25);content:"";display:block;height:6px;left:5px;margin:0 auto;position:absolute;top:5px;transform:scale(0);transition:transform .2s ease-out;width:6px}.adyen-checkout__radio_group__label:hover{border-color:#0075ff;cursor:pointer}.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__label--selected{background-color:#0075ff;border:0;transition:all .2s ease-out}.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:after{transform:scale(1)}.adyen-checkout__radio_group__input:focus+.adyen-checkout__radio_group__label:before{border-color:#0075ff;box-shadow:0 0 0 2px rgba(0,102,255,.4)}.adyen-checkout__radio_group__input:checked+.adyen-checkout__radio_group__label:hover:before,.adyen-checkout__radio_group__input:checked:active+.adyen-checkout__radio_group__label:before,.adyen-checkout__radio_group__input:checked:focus+.adyen-checkout__radio_group__label:before{box-shadow:0 0 0 2px rgba(0,102,255,.4)}.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before{border:1px solid #c12424}.Select-module_adyen-checkout__dropdown__0Mj-n{position:relative}.Select-module_adyen-checkout__dropdown__button__yTyqq{align-items:center;cursor:pointer;display:flex}.Select-module_adyen-checkout__dropdown__button__yTyqq:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.195 6.565a1 1 0 0 0 1.6 0l2.992-3.98a1 1 0 0 0-.8-1.602H1.013a1 1 0 0 0-.8 1.6l2.983 3.982Z' fill='%23687282'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;content:"";height:6px;position:absolute;right:16px;width:8px}[dir=rtl] .Select-module_adyen-checkout__dropdown__button__yTyqq:after{left:16px;right:auto}.Select-module_adyen-checkout__dropdown__button--active__Ej-JR:after{transform:rotate(180deg)}.Select-module_adyen-checkout__filter-input__CwPBS{background:#fff;border:0;caret-color:#0075ff;color:#00112c;font-family:inherit;font-size:1em;height:100%;padding:0;width:100%}.Select-module_adyen-checkout__filter-input__CwPBS::-moz-placeholder{color:#b9c4c9;font-weight:200}.Select-module_adyen-checkout__filter-input__CwPBS::placeholder{color:#b9c4c9;font-weight:200}.Select-module_adyen-checkout__filter-input__CwPBS:active,.Select-module_adyen-checkout__filter-input__CwPBS:focus{outline:0}.Select-module_adyen-checkout__filter-input__CwPBS[readonly]{background:#e6e9eb;border-color:transparent;color:#00112c;cursor:not-allowed}.Select-module_adyen-checkout__dropdown__list__YtEzj{background:#fff;display:none;list-style:none;margin:0 0 50px;overflow-y:auto;padding:0;position:absolute;width:100%;z-index:1}.Select-module_adyen-checkout__dropdown__list__YtEzj.Select-module_adyen-checkout__dropdown__list--active__Gegw2{display:block}.Select-module_adyen-checkout__dropdown__element__ORU4-{align-items:center;display:flex}.adyen-checkout__image{opacity:0;transition:opacity .6s ease-out}.adyen-checkout__image--loaded{opacity:1}.adyen-checkout__dropdown__button-icon--left{flex-direction:row-reverse;justify-content:flex-end}.adyen-checkout__dropdown__button-icon--left>img{margin-left:0;margin-right:12px}.adyen-checkout__dropdown{font-size:1em;max-width:100%;width:100%}.adyen-checkout__dropdown__button{background:#fff;border:1px solid #b9c4c9;border-radius:6px;color:#00112c;font-size:1em;height:40px;line-height:20px;outline:0;padding:7px 24px 7px 12px;-webkit-text-decoration:none;text-decoration:none;transition:border .2s ease-out, box-shadow .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}[dir=rtl] .adyen-checkout__dropdown__button{padding:7px 12px 7px 24px}.adyen-checkout__dropdown__button:hover{border-color:#99a3ad}.adyen-checkout__dropdown__button__icon{border-radius:3px;height:26px;margin-right:12px;max-width:40px}.adyen-checkout__dropdown__button--disabled{opacity:.4}.adyen-checkout__dropdown__button--active,.adyen-checkout__dropdown__button--active:hover,.adyen-checkout__dropdown__button:active,.adyen-checkout__dropdown__button:focus{border-color:#0075ff;box-shadow:0 0 0 2px #3070ED}.adyen-checkout__dropdown__button--readonly,.adyen-checkout__dropdown__button--readonly--active,.adyen-checkout__dropdown__button--readonly:focus,.adyen-checkout__dropdown__button--readonly:hover{background:#e6e9eb;border-color:transparent;color:#00112c;cursor:not-allowed}.adyen-checkout__dropdown__button--readonly:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.195 6.565a1 1 0 0 0 1.6 0l2.992-3.98a1 1 0 0 0-.8-1.602H1.013a1 1 0 0 0-.8 1.6l2.983 3.982Z' fill='%23B9C4C9'/%3E%3C/svg%3E")}.adyen-checkout__dropdown__button--invalid{border-color:#c12424}.adyen-checkout__dropdown__button--valid{border-bottom-color:#089a43}.adyen-checkout__dropdown__button__text{flex-grow:1;overflow:hidden;pointer-events:none;text-align:left;text-overflow:ellipsis;white-space:nowrap}.adyen-checkout__dropdown__button__secondary-text{margin-right:16px}.adyen-checkout__dropdown__list{border-radius:6px;box-shadow:0 2px 7px rgba(0,15,45,.3);max-height:375px;z-index:2}.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active{margin-top:2px}.adyen-checkout__dropdown__element{border:1px solid transparent;cursor:pointer;font-size:.81em;-webkit-hyphens:auto;hyphens:auto;line-height:20px;outline:0;padding:8px;transition:background .2s ease-out, border-color .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;word-break:break-word}.adyen-checkout__dropdown__element .adyen-checkout__icon{position:absolute;right:8px}.adyen-checkout__dropdown__element:last-child{border-bottom:0}.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active{background:rgba(230,233,235,.6)}.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected{background:rgba(0,102,255,.1)}.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected:active,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected:focus,.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected:hover{background:rgba(0,102,255,.15)}.adyen-checkout__dropdown__element--disabled{cursor:not-allowed;opacity:.4}.adyen-checkout__dropdown__element__icon{border-radius:3px;margin-right:12px;max-height:26px;max-width:40px}.adyen-checkout__dropdown__element__text{flex-grow:1}.adyen-checkout__dropdown__element__secondary-text:not(:last-child){margin-right:8px}.adyen-checkout__dropdown__element__flag{margin-left:8px;margin-right:10px;max-height:18px;max-width:27px}.adyen-checkout__dropdown+.adyen-checkout-input__inline-validation{right:32px}.adyen-checkout__address-search{position:relative}.adyen-checkout__address-search .adyen-checkout__dropdown__button:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23687282' d='M6.5 11.9a4.5 4.5 0 0 0 2.6-.83l2.77 2.74c.13.13.3.19.48.19.38 0 .65-.29.65-.66a.63.63 0 0 0-.19-.46l-2.75-2.73a4.4 4.4 0 0 0 .92-2.7 4.48 4.48 0 0 0-8.98 0 4.48 4.48 0 0 0 4.5 4.45Zm0-.96a3.53 3.53 0 0 1-3.53-3.49 3.52 3.52 0 0 1 7.04 0c0 1.9-1.59 3.49-3.52 3.49Z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;content:"";height:16px;left:12px;position:absolute;width:16px}.adyen-checkout__address-search .adyen-checkout__dropdown__button--active:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%2300112C' d='M6.5 11.9a4.5 4.5 0 0 0 2.6-.83l2.77 2.74c.13.13.3.19.48.19.38 0 .65-.29.65-.66a.63.63 0 0 0-.19-.46l-2.75-2.73a4.4 4.4 0 0 0 .92-2.7 4.48 4.48 0 0 0-8.98 0 4.48 4.48 0 0 0 4.5 4.45Zm0-.96a3.53 3.53 0 0 1-3.53-3.49 3.52 3.52 0 0 1 7.04 0c0 1.9-1.59 3.49-3.52 3.49Z'/%3E%3C/svg%3E");transform:none}.adyen-checkout__address-search .adyen-checkout__filter-input{padding-left:24px}.adyen-checkout__address-search__manual-add{position:absolute;right:0;top:0}.adyen-checkout__address-search__manual-add .adyen-checkout__address-search__manual-add__button{border:0;padding:0}.adyen-checkout__checkbox{display:block}.adyen-checkout__checkbox__label{color:#00112c;cursor:pointer;display:inline-block;font-size:.81em;font-weight:400;line-height:19px;padding-left:24px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}[dir=rtl] .adyen-checkout__checkbox__label{padding-left:0;padding-right:24px}.adyen-checkout__checkbox__input{opacity:0;pointer-events:none;position:absolute}.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:before{opacity:1}.adyen-checkout__checkbox__input:checked+.adyen-checkout__checkbox__label:after{background-color:#0075ff;border:1px solid #0075ff}.adyen-checkout__checkbox__input:checked:hover+.adyen-checkout__checkbox__label:after{border-color:#0075ff;box-shadow:0 0 0 2px rgba(0,102,255,.4)}.adyen-checkout__checkbox__input:focus+.adyen-checkout__checkbox__label:after{border:1px solid #0075ff;box-shadow:0 0 0 2px #3070ED}.adyen-checkout__checkbox__input:hover:not(:focus)+.adyen-checkout__checkbox__label:after{border-color:#99a3ad;box-shadow:0 0 0 2px #d4d9db}.adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:before{border-color:transparent #fff #fff transparent;border-radius:0 2px 1px;border-style:solid;border-width:1px 2px 2px 1px;content:"";height:11px;left:1px;opacity:0;position:absolute;top:2px;transform:rotate(37deg);transform-origin:100% 100%;transition:opacity .2s ease-out;width:6px;z-index:1}[dir=rtl] .adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:before{left:auto;right:8px}.adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:after{background-color:#fff;border:1px solid #b9c4c9;border-radius:3px;content:"";height:16px;left:0;position:absolute;top:0;transition:background .15s ease-out, border .05s ease-out, box-shadow .1s ease-out;width:16px;z-index:0}[dir=rtl] .adyen-checkout__checkbox__input+.adyen-checkout__checkbox__label:after{left:auto;right:0}.adyen-checkout__field--consentCheckbox{background:#e6e9eb;border:1px solid #e6e9eb;border-radius:6px;padding:14px 14px 13px}[dir=rtl] .adyen-checkout__field--consentCheckbox{padding:14px 14px 13px}.adyen-checkout__field--consentCheckbox.adyen-checkout__field--error{border-color:#c12424}.adyen-checkout__field--consentCheckbox .adyen-checkout-input__inline-validation{right:-5px;top:10px}.adyen-checkout__open-invoice .adyen-checkout__fieldset--billingAddress{padding-bottom:8px}.adyen-checkout__open-invoice .adyen-checkout__fieldset--deliveryAddress{margin-top:24px;padding-bottom:8px}.adyen-checkout__open-invoice .adyen-checkout__input--separateDeliveryAddress{margin-bottom:0}.adyen-checkout__open-invoice .adyen-checkout__field--consentCheckbox{margin-top:22px}.adyen-checkout__input--separateDeliveryAddress+.adyen-checkout__checkbox__label{margin-top:16px}.adyen-checkout-form-instruction{color:#687282;font-size:.81em;font-weight:400;line-height:19px;margin-top:0}[dir=rtl] .adyen-checkout-form-instruction{padding-right:0}.adyen-checkout__amazonpay__button{margin:auto}.adyen-checkout__amazonpay .adyen-checkout__button--ghost{display:block;margin:8px auto 0;width:auto}@supports (-webkit-appearance:-apple-pay-button){.ApplePayButton-module_apple-pay-button__l5g-d,.ApplePayButton-module_apple-pay__gYjuP{-webkit-appearance:-apple-pay-button}.ApplePayButton-module_apple-pay-button__l5g-d{cursor:pointer;display:inline-block}.ApplePayButton-module_apple-pay-button-black__istwW{-apple-pay-button-style:black}.ApplePayButton-module_apple-pay-button-white__-wLaE{-apple-pay-button-style:white}.ApplePayButton-module_apple-pay-button-white-with-line__MlRq7{-apple-pay-button-style:white-outline}.ApplePayButton-module_apple-pay-button--type-plain__ycfNl{-apple-pay-button-type:plain}.ApplePayButton-module_apple-pay-button--type-buy__9m8AB{-apple-pay-button-type:buy}.ApplePayButton-module_apple-pay-button--type-donate__HmRdK{-apple-pay-button-type:donate}.ApplePayButton-module_apple-pay-button--type-check-out__XdGWd{-apple-pay-button-type:check-out}.ApplePayButton-module_apple-pay-button--type-book__-v-VY{-apple-pay-button-type:book}.ApplePayButton-module_apple-pay-button--type-subscribe__WxWIF{-apple-pay-button-type:subscribe}.ApplePayButton-module_apple-pay-button--type-add-money__zeBA8{-apple-pay-button-type:add-money}.ApplePayButton-module_apple-pay-button--type-contribute__G3E8e{-apple-pay-button-type:contribute}.ApplePayButton-module_apple-pay-button--type-order__ggI6j{-apple-pay-button-type:order}.ApplePayButton-module_apple-pay-button--type-reload__QbgLd{-apple-pay-button-type:reload}.ApplePayButton-module_apple-pay-button--type-rent__VzC-E{-apple-pay-button-type:rent}.ApplePayButton-module_apple-pay-button--type-support__6EjmY{-apple-pay-button-type:support}.ApplePayButton-module_apple-pay-button--type-tip__bdzGK{-apple-pay-button-type:tip}.ApplePayButton-module_apple-pay-button--type-top-up__Eb3qR{-apple-pay-button-type:top-up}}@supports not (-webkit-appearance:-apple-pay-button){.ApplePayButton-module_apple-pay-button__l5g-d{background-position:50% 50%;background-repeat:no-repeat;background-size:100% 60%;border-radius:5px;box-sizing:border-box;display:inline-block;max-height:64px;min-height:32px;min-width:200px;padding:0}.ApplePayButton-module_apple-pay-button-black__istwW{background-color:black;background-image:-webkit-named-image(apple-pay-logo-white)}.ApplePayButton-module_apple-pay-button-white-with-line__MlRq7,.ApplePayButton-module_apple-pay-button-white__-wLaE{background-color:white;background-image:-webkit-named-image(apple-pay-logo-black)}.ApplePayButton-module_apple-pay-button-white-with-line__MlRq7{border:.5px solid black}}.adyen-checkout__applepay__button{height:48px;width:240px}.adyen-checkout__dropin .adyen-checkout__applepay__button{width:100%}.adyen-checkout__issuer-button{align-items:center;background-color:#fff;border:none;border-radius:6px;box-shadow:inset 0 0 0 1px #b9c4c9;cursor:pointer;display:flex;flex-basis:47%;flex-grow:2;font-size:.81em;height:40px;padding:0 12px;transition:background .3s ease-out, box-shadow .3s ease-out}.adyen-checkout__issuer-button:active{color:black}.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):focus{box-shadow:inset 0 0 0 2px #99a3ad;outline:none}.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):focus-visible{box-shadow:inset 0 0 0 2px #99a3ad;outline:none}.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):hover{box-shadow:inset 0 0 0 2px #99a3ad;outline:none}.adyen-checkout__issuer-button--selected{background:#fff;box-shadow:inset 0 0 0 2px #0075ff;color:#0075ff;font-weight:500;height:40px;transition:none}.adyen-checkout__issuer-button-img{margin-right:8px;max-height:26px}.adyen-checkout__issuer-button-group{display:flex;flex-wrap:wrap;gap:16px 16px}.adyen-checkout__content-separator{align-items:center;color:#687282;display:flex;font-size:13px;justify-content:center;line-height:19px;margin-bottom:16px;margin-top:16px;white-space:nowrap}.adyen-checkout__content-separator:after,.adyen-checkout__content-separator:before{background:#e6e9eb;content:"";display:block;height:1px;width:100%}.adyen-checkout__content-separator:after{margin-left:20px}.adyen-checkout__content-separator:before{margin-right:20px}.adyen-checkout__field--issuer-list{margin-bottom:0}.adyen-checkout__issuer-list__termsAndConditions{text-align:center}.adyen-checkout-disclaimer__label{color:#687282;display:inline-block;font-size:.81em;font-weight:400;line-height:19px;margin-top:16px;padding-left:0}[dir=rtl] .adyen-checkout-disclaimer__label{padding-right:0}.adyen-checkout__card-input__form{transition:opacity .25s ease-out}.adyen-checkout__card__cardNumber{max-width:400px}.adyen-checkout__card__cardNumber__input{padding:5px 8px}.adyen-checkout__card__exp-date__input--oneclick{font-weight:400;line-height:30px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.adyen-checkout__field--storedCard .adyen-checkout__input[readonly],.adyen-checkout__field--storedCard .adyen-checkout__input[readonly]:hover{color:#00112c}.adyen-checkout__card__holderName,.adyen-checkout__field--expiryDate,.adyen-checkout__field--storedCard{margin-bottom:0}.adyen-checkout__card-input .adyen-checkout__fieldset--billingAddress,.adyen-checkout__card__holderName,.adyen-checkout__card__kcp-authentication,.adyen-checkout__card__socialSecurityNumber,.adyen-checkout__installments,.adyen-checkout__store-details{margin-top:16px}.adyen-checkout__card-input.adyen-checkout__card-input--loading{pointer-events:none}.adyen-checkout__card__holderName:first-child{margin:0 0 16px}.adyen-checkout__field--cardNumber .adyen-checkout__input--error .adyen-checkout__card__cardNumber__brandIcon,.adyen-checkout__field--cardNumber .adyen-checkout__input--valid:not(.adyen-checkout__card__cardNumber__input--noBrand)+.adyen-checkout-input__inline-validation--valid{display:none}.adyen-checkout__field--securityCode.adyen-checkout__field--error .adyen-checkout__card__cvc__hint,.adyen-checkout__field--securityCode.adyen-checkout__field--valid .adyen-checkout__card__cvc__hint{opacity:0}@keyframes cvc-indicate-location{0%{opacity:1}to{opacity:.3}}.adyen-checkout__label--focused .adyen-checkout__field__cvc--back-hint .adyen-checkout__card__cvc__hint--back .adyen-checkout__card__cvc__hint__location,.adyen-checkout__label--focused .adyen-checkout__field__cvc--front-hint .adyen-checkout__card__cvc__hint--front .adyen-checkout__card__cvc__hint__location{animation-direction:alternate;animation-duration:1s;animation-iteration-count:infinite;animation-name:cvc-indicate-location}.adyen-checkout__card__cvc__hint__wrapper{align-items:center;backface-visibility:visible;display:flex;height:100%;margin:0 10px;position:absolute;right:0;top:0;transform:translateZ(0);transform-origin:center;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.455,.03,.515,.955);width:27px;will-change:transform}.adyen-checkout__field__cvc--front-hint.adyen-checkout__card__cvc__hint__wrapper{transform:rotateY(180deg)}.adyen-checkout__card__cvc__hint{backface-visibility:hidden;position:absolute;transition:opacity .1s linear}.adyen-checkout__field__exp-date_hint_wrapper{align-items:center;bottom:0;display:flex;position:absolute;right:0;top:0;transition:opacity .1s linear}.adyen-checkout__field__exp-date_hint_wrapper.adyen-checkout__field__exp-date_hint_wrapper--hidden{opacity:0}.adyen-checkout__field__exp-date_hint{height:18px;margin:0 10px 0 0;width:27px}.adyen-checkout__card__cvc__hint--front{transform:rotateY(180deg)}@media (prefers-reduced-motion:reduce){.adyen-checkout__card__cvc__hint__wrapper{transition:none}}.adyen-checkout__fieldset--revolving-plan .adyen-checkout__fieldset__fields{justify-content:left}.adyen-checkout__fieldset--revolving-plan .adyen-checkout__radio_group{display:flex;flex-direction:column}.adyen-checkout__fieldset--revolving-plan .adyen-checkout__radio_group__input-wrapper{margin-top:20px}.adyen-checkout__fieldset--revolving-plan .adyen-checkout__field--revolving-plan-installments{margin-left:15px;position:relative;top:42px;width:30%}.LoadingWrapper-module_loading-input__form__ffCKa{opacity:1}.LoadingWrapper-module_loading-input__form--loading__7GmVo{opacity:0}.LoadingWrapper-module_loading-input__spinner__GxA51{display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.LoadingWrapper-module_loading-input__spinner--active__ENNBS{display:block}.CardInput-module_card-input__wrapper__wXSCw{position:relative}.CardInput-module_card-input__wrapper__wXSCw *,.CardInput-module_card-input__wrapper__wXSCw :after,.CardInput-module_card-input__wrapper__wXSCw :before{box-sizing:border-box}.CardInput-module_card-input__icon__3Cz5M{border-radius:3px;height:18px;margin-left:7px;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:27px}.CardInput-module_card-input__form__fRo1r{opacity:1}.CardInput-module_card-input__spinner__-j2Qi{display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.CardInput-module_card-input__spinner--active__slD7w{display:block}.CardInput-module_card-input__form--loading__rrmdj{opacity:0}.CardInput-module_adyen-checkout__input__11tlB{display:block;max-height:100px}.CardInput-module_adyen-checkout__card__cvc__input--hidden__VIlHV,.CardInput-module_adyen-checkout__card__exp-date__input--hidden__evi6-{display:none}.CardInput-module_adyen-checkout__card__exp-cvc__exp-date__input--hidden__YC3VT{justify-content:flex-end}.CardInput-module_revolving-plan-installments__disabled__VhNj2{opacity:.4;pointer-events:none}.adyen-checkout__card__dual-branding__buttons{display:flex;opacity:.4;pointer-events:none}.adyen-checkout__card__dual-branding__buttons--active{opacity:1;pointer-events:auto}.adyen-checkout__card__dual-branding__buttons .adyen-checkout__card__cardNumber__brandIcon{cursor:pointer;opacity:1}.adyen-checkout__card__dual-branding__buttons .adyen-checkout__card__cardNumber__brandIcon:first-child{right:40px}.adyen-checkout__card__dual-branding__buttons .adyen-checkout__card__cardNumber__brandIcon--not-selected{opacity:.5}.adyen-checkout__card__brands{display:flex;flex-basis:auto;flex-shrink:1;flex-wrap:wrap;gap:4px;height:16px;margin-bottom:16px;margin-top:-8px;overflow:hidden;transition:all .2s ease-out}.adyen-checkout__card__brands--hidden{height:0;margin:-8px 0 8px;opacity:0}.adyen-checkout__card__brands img{border-radius:3px;height:16px;width:24px}.adyen-checkout__card__brands__brand-wrapper{display:inline-block;height:16px;position:relative;width:24px}.adyen-checkout__card__brands__brand-wrapper:after{border:1px solid rgba(0,27,43,.17);border-radius:3px;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.adyen-checkout-ctp__otp-resend-code{color:#0075ff;cursor:pointer;font-size:13px;font-weight:400;margin-left:auto}.adyen-checkout-ctp__otp-resend-code--confirmation,.adyen-checkout-ctp__otp-resend-code--disabled{color:#687282;cursor:default;font-size:13px;font-weight:400;margin-left:auto;pointer-events:none}.adyen-checkout-ctp__otp-resend-code--confirmation{align-items:center;display:flex}.adyen-checkout-ctp__otp-resend-code--confirmation>img{margin-left:4px}.adyen-checkout-ctp__otp-resend-code-counter{color:black;cursor:default;display:inline-block;font-size:13px;font-weight:400;margin-left:auto;text-align:right}.adyen-checkout-ctp__section>.adyen-checkout__field.adyen-checkout__field--otp{margin-bottom:20px}.adyen_checkout-ctp__brand-wrapper{align-items:center;display:flex;height:18px}.adyen_checkout-ctp__brand-logo{margin-right:6px;width:24px}.adyen_checkout-ctp__brand-pipe{height:15px;margin-right:6px}.adyen_checkout-ctp__brand-scheme{margin-right:6px;-o-object-fit:none;object-fit:none}.adyen_checkout-ctp__brand-scheme-mc{width:27px}.adyen_checkout-ctp__brand-scheme-visa{width:35px}.adyen-checkout__modal-wrapper{align-items:center;display:flex;height:100%;left:0;overflow-y:auto;overscroll-behavior-y:contain;padding:24px;position:fixed;top:0;visibility:hidden;width:100%;z-index:10}.adyen-checkout__modal-wrapper:before{background:rgba(0,17,44,.5);content:"";height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s linear;width:100%;z-index:10}.adyen-checkout__modal-wrapper--open{visibility:visible}.adyen-checkout__modal-wrapper--open .adyen-checkout__modal,.adyen-checkout__modal-wrapper--open:before{opacity:1}.adyen-checkout__modal{background-color:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,17,44,.15);margin:auto;opacity:0;padding:16px;position:relative;transition:opacity .2s ease, visibility .2s ease;z-index:11}@media (max-width:480px){.adyen-checkout__modal-wrapper{padding:0}.adyen-checkout__modal{border-radius:0;height:100%}}.adyen-checkout__ctp-modal-header-image{display:block;margin:auto}.adyen-checkout__ctp-modal-title{font-size:20px;font-weight:700;line-height:24px;margin:0 0 12px;padding:0}.adyen-checkout__ctp-modal-text{font-size:13px;font-weight:400;line-height:19px;margin-bottom:16px}.adyen-checkout__ctp-modal-benefits{margin-left:0;padding-left:20px}.adyen-checkout__ctp-modal-benefits li{list-style:disc;margin-bottom:16px}.adyen-checkout__modal-wrapper--ctp .adyen-checkout__modal{max-width:464px}.adyen_checkout-ctp__brand-wrapper--popup{justify-content:center;margin-bottom:24px}.adyen-web__ctp-info-button{background-color:transparent;border:0;cursor:pointer;padding:0}.adyen-checkout-ctp__section-logout-button{color:#0075ff;cursor:pointer;font-size:13px;font-weight:400;line-height:19px;margin-left:auto}.adyen-checkout-ctp__section-logout-button--disabled{color:#687282;pointer-events:none}.adyen-checkout-ctp__section{background-color:white;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:16px;position:relative}.adyen-checkout-ctp__section-brand{align-items:center;display:flex;height:18px;margin-bottom:14px}.adyen-checkout-ctp__section--standalone{all:unset}.adyen-checkout-ctp__section .adyen-checkout__fieldset{margin-bottom:24px}.adyen-checkout-ctp__section-header{align-items:center;display:flex}.adyen-checkout-ctp__section-header-title{font-size:17px;font-weight:600;line-height:22px;margin:0 0 4px;padding:0;width:auto}@media screen and (max-width:400px){.adyen-checkout-ctp__section-header-title{font-size:15px}}.adyen-checkout-ctp__section-header-adornment{margin-left:5px}.adyen-checkout-ctp__section-text{color:#687282;font-size:13px;font-weight:400;line-height:19px;margin:0 0 16px}.adyen-checkout-ctp__separator{color:#00112c;font-size:13px;font-weight:400}.adyen-checkout-ctp__otp-subtitle--highlighted{color:#00112c;font-weight:500}.adyen-checkout-ctp__card-list-single-card{align-items:center;background-color:#f7f8f9;border-radius:6px;display:flex;font-size:13px;font-weight:400;height:40px;line-height:19px;padding:12px}.adyen-checkout-ctp__card-list-single-card-expired{color:#687282;-webkit-text-decoration:line-through;text-decoration:line-through}.adyen-checkout-ctp__expired-label{color:#687282;font-weight:500;line-height:17px;margin-left:auto}.adyen-checkout-ctp__card-image{border-radius:3px;margin-right:8px}.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled{opacity:1}.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled .adyen-checkout__dropdown__element__text{margin:0;opacity:.4;-webkit-text-decoration:line-through;text-decoration:line-through}.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled .adyen-checkout__dropdown__element__secondary-text{color:#687282;font-weight:500;line-height:17px}.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled{opacity:1}.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled .adyen-checkout__dropdown__button__text{opacity:.4;-webkit-text-decoration:line-through;text-decoration:line-through}.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled .adyen-checkout__dropdown__button__secondary-text{color:#687282;font-weight:500;opacity:1}.adyen-checkout-ctp__card{background-color:white;border:none;border-radius:4px;box-shadow:0 0 0 2px #999595;cursor:pointer;height:40px;margin:0 0 20px;width:100%}.adyen-checkout-ctp__empty-cards{align-items:center;background-color:#f7f8f9;border-radius:6px;color:#687282;display:flex;font-size:13px;font-weight:400;height:40px;line-height:19px;margin-bottom:24px;padding:12px 16px}.adyen-checkout__iframe--ctpIframe{pointer-events:auto}.adyen-checkout__iframe--ctpIframe-hidden{display:none}.adyen-checkout-ctp__loading-image{display:block;margin:30px auto auto}.adyen-checkout-ctp__loading-subtitle{font-size:16px;line-height:19px;margin:0 auto 58px;max-width:280px;text-align:center}.adyen-checkout-ctp__section>.adyen-checkout__field.adyen-checkout__field--shopperLogin{margin-bottom:20px}.adyen-checkout__cashapp>.adyen-checkout__store-details{margin-bottom:16px;margin-top:0}.adyen-checkout__button-group{background:transparent;display:flex;justify-content:space-between}.adyen-checkout__button-group .adyen-checkout__button{background:transparent;border:0;box-shadow:inset 0 0 0 1px #99a3ad;color:#00112c;font-size:.81em;font-weight:400;height:40px;line-height:40px;margin-right:8px;padding:0;text-align:center}.adyen-checkout__button-group .adyen-checkout__button:last-child{margin-right:0}.adyen-checkout__button-group .adyen-checkout__button:hover{background:transparent;box-shadow:inset 0 0 0 2px #99a3ad}.adyen-checkout__button-group .adyen-checkout__button:active{background:#f7f8f9;box-shadow:inset 0 0 0 2px #99a3ad}.adyen-checkout__button-group .adyen-checkout__button--disabled,.adyen-checkout__button-group .adyen-checkout__button--disabled:hover{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__button-group .adyen-checkout__button--selected,.adyen-checkout__button-group .adyen-checkout__button--selected:active,.adyen-checkout__button-group .adyen-checkout__button--selected:active:hover,.adyen-checkout__button-group .adyen-checkout__button--selected:hover{background:#e5efff;box-shadow:inset 0 0 0 2px #0075ff;color:#0075ff;font-weight:500;height:40px;transition:none}.adyen-checkout__button-group .adyen-checkout__button .adyen-checkout__button-group__input{opacity:0;pointer-events:none;position:absolute}.adyen-checkout__adyen-giving .adyen-checkout__status__icon{display:block;margin:56px auto 32px}.adyen-checkout__adyen-giving .adyen-checkout__status__text{color:#00112c;margin-bottom:56px;text-align:center}.adyen-checkout__campaign{background:#00112c;border-radius:6px;height:227px;overflow:hidden;position:relative}.adyen-checkout__campaign-link:hover .adyen-checkout__campaign-description{-webkit-text-decoration:underline;text-decoration:underline}.adyen-checkout__campaign-container{height:100%}.adyen-checkout__campaign-logo{border:2px solid rgba(255,255,255,.4);border-radius:3px;display:block;height:48px;margin-bottom:16px;overflow:hidden;width:48px}.adyen-checkout__campaign-background-image{background-color:#00112c;background-position:50%;background-size:cover;height:100%}.adyen-checkout__campaign-link .adyen-checkout__campaign-background-image:before{background:inherit;content:"";height:100%;position:absolute;transition:transform .6s ease-out;width:100%}.adyen-checkout__campaign-link .adyen-checkout__campaign-background-image:hover:before{transform:scale(1.1)}.adyen-checkout__campaign-link .adyen-checkout__campaign-content{pointer-events:none}.adyen-checkout__campaign-content{bottom:0;padding:16px;position:absolute;z-index:2}.adyen-checkout__campaign-description,.adyen-checkout__campaign-title{color:#fff;font-weight:400;margin:0}.adyen-checkout__campaign-title{font-size:1em;margin-bottom:8px}.adyen-checkout__campaign-description{font-size:.81em;line-height:19px}.adyen-checkout__adyen-giving-actions{margin-top:16px;text-align:center}.adyen-checkout__button.adyen-checkout__button--donate{margin:16px auto 8px}.adyen-checkout__button.adyen-checkout__button--decline{display:block;margin:auto;width:auto}.adyen-checkout__paywithgoogle{height:48px}.adyen-checkout__paywithgoogle>div>button,.adyen-checkout__paywithgoogle>div>button.long,.adyen-checkout__paywithgoogle>div>button.short{height:48px;transition:background-color .3s ease-out, box-shadow .3s ease-out}.adyen-checkout__paywithgoogle>div>button.long:focus,.adyen-checkout__paywithgoogle>div>button.short:focus,.adyen-checkout__paywithgoogle>div>button:focus{box-shadow:0 0 0 2px #99c2ff;outline:0}.adyen-checkout__paywithgoogle>div>button.gpay-button{padding:15px 24px 13px}.adyen-checkout__econtext-input__field>.adyen-checkout__button--pay:only-child{margin-top:0}.adyen-checkout__voucher-result{border-radius:12px;box-sizing:border-box;position:relative;text-align:center}.adyen-checkout__voucher-result__bottom,.adyen-checkout__voucher-result__top{background:#fff;border:1px solid #d4d9db}.adyen-checkout__voucher-result__top{border-bottom:0;border-radius:12px 12px 0 0;padding:40px 0 24px}.adyen-checkout__voucher-result__bottom{border-radius:0 0 12px 12px;border-top:0}.adyen-checkout__voucher-result__separator{align-items:center;background:#fff;display:flex;height:13px;margin:0 auto;position:relative;width:calc(100% - 14px)}.adyen-checkout__voucher-result__separator:after,.adyen-checkout__voucher-result__separator:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCAwIDUgMiAxLjUgNEg3VjBIMFptMCAxMyA1LTIgMS41LTRIN3Y2SDBaIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTYuNDIzIDYuNUM2LjQyMyAzLjMxMiAzLjc4My43NTYuNS41MThjMy4zODYuMjM2IDYgMi44NTUgNiA1Ljk4MiAwIDMuMTI3LTIuNjE0IDUuNzQ2LTYgNS45ODN2LS4wMDFjMy4yODQtLjIzNyA1LjkyMy0yLjc5NCA1LjkyMy01Ljk4MloiIHN0cm9rZT0iI0Q0RDlEQiIvPjxwYXRoIGZpbGw9IiNENEQ5REIiIGQ9Ik0wIDBoMXYxSDB6TTAgMTJoMXYxSDB6Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGg3djEzSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+)}.adyen-checkout__voucher-result__separator:before{left:-7px}.adyen-checkout__voucher-result__separator:after,.adyen-checkout__voucher-result__separator:before{background-position:100%;background-repeat:no-repeat;content:"";height:13px;position:absolute;top:0;width:7px}.adyen-checkout__voucher-result__separator:after{right:-7px;transform:rotate(-180deg)}.adyen-checkout__voucher-result__separator__inner{border-top:1px solid #e6e9eb;width:100%}.adyen-checkout__voucher-result__image{align-items:center;display:flex;justify-content:center;margin-bottom:40px;width:100%}.adyen-checkout__link--voucher-result-instructions{display:inline-block}.adyen-checkout__voucher-result__image__wrapper{display:block;height:48px;margin:0 24px;position:relative}.adyen-checkout__voucher-result__image__wrapper:after{border:1px solid rgba(0,27,43,.17);border-radius:3px;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.adyen-checkout__voucher-result__image__wrapper:nth-child(2):before{border-left:1px solid #d4d9db;content:"";height:64px;left:-24.5px;position:absolute;top:-8px;width:1px}.adyen-checkout__voucher-result__image__brand,.adyen-checkout__voucher-result__image__issuer{border-radius:3px;height:48px}.adyen-checkout__voucher-result__introduction{color:#00112c;font-size:.81em;line-height:19px;margin:0 auto;max-width:400px;text-align:center}.adyen-checkout__voucher-result__amount{color:#00112c;font-size:1em;font-weight:700;margin:24px auto 0;text-align:center}.adyen-checkout__voucher-result__surcharge{color:#687282;display:block;font-size:.81em;font-weight:400;line-height:19px;text-align:center}.adyen-checkout__voucher-result__code__label{display:block;font-weight:400;left:0;line-height:19px;margin:0 auto;position:absolute;right:0;top:-2px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto}.adyen-checkout__voucher-result__code__label:before{content:"";position:absolute}.adyen-checkout__voucher-result__code__label__text{background:#fff;color:#00112c;font-size:13px;letter-spacing:normal;line-height:1;padding:0 8px}.adyen-checkout__voucher-result__code__barcode{display:block;height:56px;margin:0 auto 8px;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__voucher-result__code{border-width:1px 0;color:#00112c;display:inline-block;font-size:1.5em;font-weight:700;letter-spacing:1px;line-height:1.2;margin:0 auto;padding:16px 48px;position:relative;text-align:center;-webkit-user-select:all;-moz-user-select:all;user-select:all;width:100%;word-break:break-word}.adyen-checkout__voucher-result__details{list-style:none;margin:-1px auto 0;padding:0}.adyen-checkout__voucher-result__details__item{border-top:1px solid #e6e9eb;color:#00112c;display:flex;font-size:.81em;justify-content:space-between;padding:16px 24px;word-break:break-word}.adyen-checkout__voucher-result__details__item:last-child{margin-bottom:0}.adyen-checkout__voucher-result__details__label{max-width:50%;text-align:left}.adyen-checkout__voucher-result__details__value{font-weight:700;max-width:50%;text-align:right}.adyen-checkout__voucher-result__actions{align-items:center;display:flex;justify-content:center;list-style:none;margin:0 auto 32px;max-width:100%;min-width:200px;padding:0;width:300px}.adyen-checkout__voucher-result__actions__item{margin:0 4px}.adyen-checkout__paypal__buttons{position:relative;z-index:0}.adyen-checkout__paypal__button{display:flex;margin-bottom:16px}.adyen-checkout__paypal__button:empty{display:none}.adyen-checkout__paypal__status--pending{margin:16px 0}.adyen-checkout__paypal__status--processing{align-items:center;display:flex;font-size:13px;justify-content:center;padding:24px 0}.adyen-checkout__paypal-processing .adyen-checkout__paypal__button{display:none}.adyen-checkout__payment-method .adyen-checkout__paypal__status--pending{margin:-16px 0 38px}.adyen-checkout__payment-method .adyen-checkout__paypal__status--processing{padding:20px 0 65px}.adyen-checkout__phone-input{direction:ltr}.adyen-checkout__phone-input .adyen-checkout__input-wrapper{width:100%}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input{height:auto;padding:0}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input:focus{border:1px solid #0075ff;box-shadow:0 0 0 2px #99c2ff}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button{border:0;border-bottom-right-radius:0;border-top-right-radius:0;height:35px;width:auto}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button:after{box-sizing:revert;height:10px;left:40px}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input--phoneNumber{border:1px solid transparent;height:35px;margin-left:8px;padding-left:15px}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input-wrapper--phoneInput{align-items:center;display:flex}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input-wrapper--phoneInput:focus{border:1px solid #0075ff;box-shadow:0 0 0 2px #99c2ff}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__phoneNumber{align-items:center;display:flex;margin-left:65px;width:100%}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__countryFlag{position:absolute}.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active,.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active:hover{box-shadow:none}.adyen-checkout__threeds2__challenge,.adyen-checkout__threeds2__challenge-container{background-color:transparent;box-sizing:border-box;display:block;height:inherit;min-height:400px;overflow:hidden;position:relative;width:100%}.adyen-checkout__threeds2__challenge--01,.adyen-checkout__threeds2__challenge--01 .adyen-checkout__iframe--threeDSIframe{height:400px;width:250px}.adyen-checkout__threeds2__challenge--02,.adyen-checkout__threeds2__challenge--02 .adyen-checkout__iframe--threeDSIframe{height:400px;width:390px}.adyen-checkout__threeds2__challenge--03,.adyen-checkout__threeds2__challenge--03 .adyen-checkout__iframe--threeDSIframe{height:600px;width:500px}.adyen-checkout__threeds2__challenge--04,.adyen-checkout__threeds2__challenge--04 .adyen-checkout__iframe--threeDSIframe{height:400px;width:600px}.adyen-checkout__threeds2__challenge--05,.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe{height:100%;width:100%}.adyen-checkout__iframe--threeDSIframe{border:0;left:0;position:absolute;top:0}.adyen-checkout__threeds2-challenge-error .adyen-checkout__status__icon{display:block;margin:56px auto 32px}.adyen-checkout__threeds2-challenge-error .adyen-checkout__status__text{color:#c12424;margin-bottom:56px;text-align:center}.adyen-checkout__qr-loader{background:#fff;border:1px solid #d4d9db;border-radius:12px;padding:40px;text-align:center}.adyen-checkout__qr-loader--result{padding:100px}.adyen-checkout__qr-loader--app{border:0;border-radius:0;padding:0}.adyen-checkout__qr-loader__brand-logo{border-radius:3px;width:74px}.adyen-checkout__qr-loader__subtitle{margin:32px auto 0;max-width:400px}.adyen-checkout__qr-loader__subtitle--result{margin-bottom:32px}.adyen-checkout__qr-loader__payment_amount,.adyen-checkout__qr-loader__subtitle{color:#00112c;font-size:1em;line-height:19px}.adyen-checkout__qr-loader__icon{height:88px;width:88px}.adyen-checkout__qr-loader__payment_amount{font-weight:700}.adyen-checkout__qr-loader__progress{background:#d4d9db;border-radius:24px;height:4px;margin:32px auto 12px;padding-right:3%;width:152px}[dir=rtl] .adyen-checkout__qr-loader__progress{padding-left:3%;padding-right:0}.adyen-checkout__qr-loader__percentage{background:#0075ff;border-radius:24px;display:block;height:100%}.adyen-checkout__qr-loader__countdown{color:#687282;font-size:.81em}.adyen-checkout__qr-loader>.adyen-checkout__spinner__wrapper{margin:60px 0}.adyen-checkout__qr-loader__app-link{display:none;margin-top:16px}.adyen-checkout__button.adyen-checkout__button--qr-loader{margin-top:24px;-webkit-text-decoration:none;text-decoration:none}.adyen-checkout__qr-loader__instructions{color:#687282;font-size:1em;line-height:1.5;margin-top:32px}.adyen-checkout__qr-loader__actions{align-items:center;display:flex;justify-content:center;margin-top:32px}@media only screen and (max-device-width:1200px){.adyen-checkout__qr-loader__app-link{display:block}}.adyen-checkout__voucher-result--boletobancario .adyen-checkout__voucher-result__code{font-size:.81em;line-height:19px;padding:24px;word-break:break-all}.adyen-checkout__voucher-result--oxxo .adyen-checkout__voucher-result__code{font-size:.81em;line-height:19px;padding:24px;word-break:break-all}.adyen-checkout__alert-message{border-radius:6px;display:flex;font-size:.81em;margin:0 0 16px;padding:12px;text-align:left}.adyen-checkout__alert-message--error{background:#fbe6ed}.adyen-checkout__alert-message--warning{background:#ffeacc}.adyen-checkout__alert-message--info{background:#e5efff}.adyen-checkout__alert-message__icon{height:14px;margin-right:8px;width:14px}.adyen-checkout__giftcard-result__header{align-items:center;display:flex;flex-wrap:nowrap;font-size:1em;font-weight:400;justify-content:space-between;position:relative;width:100%}.adyen-checkout__giftcard-result__header__title{align-items:center;display:flex}.adyen-checkout__giftcard-result__name{margin-left:8px}.adyen-checkout__giftcard-result__balance{list-style:none;margin:16px 0 0;padding:0}.adyen-checkout__giftcard-result__balance__item{display:flex;justify-content:space-between;margin-bottom:8px}.adyen-checkout__giftcard-result__balance__item .adyen-checkout__giftcard-result__balance__title--transactionLimit{color:#687282}.adyen-checkout__giftcard-result__balance__item:last-child{margin-bottom:0}.adyen-checkout__giftcard-result__balance__value--amount{font-weight:700}.adyen-checkout__giftcard-result__remaining-balance{color:#687282;font-size:13px;line-height:19px;margin:8px auto 0;text-align:center}.DropinComponent-module_adyen-checkout__payment-methods-list__mAjAm{list-style:none;margin:0;padding:0}.DropinComponent-module_adyen-checkout__payment-method__nWdwg{display:block;max-height:60px}.DropinComponent-module_adyen-checkout__payment-method__details__-rsW7{display:none}.DropinComponent-module_adyen-checkout__payment-method__image__nB80V{height:26px;width:40px}.DropinComponent-module_adyen-checkout__payment-method__image__wrapper__6NWzA{margin-right:8px}[dir=rtl] .DropinComponent-module_adyen-checkout__payment-method__image__wrapper__6NWzA{margin-left:8px;margin-right:0}.DropinComponent-module_adyen-checkout__payment-method--selected__6egZF{max-height:100%}.DropinComponent-module_adyen-checkout__payment-method--selected__6egZF .DropinComponent-module_adyen-checkout__payment-method__details__-rsW7{display:block}.adyen-checkout__payment-method__disable-confirmation{background:#c12424;border-left:1px solid #b82222;border-right:1px solid #b82222;color:#fff;font-size:.81em;margin:0 -17px;max-height:0;opacity:0;overflow:hidden;transition:opacity .15s ease-out, max-height .15s linear, margin-bottom .1s linear}.adyen-checkout__payment-method__disable-confirmation.adyen-checkout__payment-method__disable-confirmation--open{margin-bottom:16px;max-height:62px;opacity:1}.adyen-checkout__payment-method__disable-confirmation__content{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.adyen-checkout__payment-method__disable-confirmation__buttons{display:flex}.adyen-checkout__payment-method__disable-confirmation__button{background:#c12424;border:1px solid transparent;border-radius:6px;color:#fff;cursor:pointer;display:block;height:auto;line-height:14px;margin:0 0 0 8px;padding:8px;width:auto}.adyen-checkout__payment-method__disable-confirmation__button:hover,.adyen-checkout__payment-method__disable-confirmation__button:hover:focus{background:#ac2020;box-shadow:none}.adyen-checkout__payment-method__disable-confirmation__button:active,.adyen-checkout__payment-method__disable-confirmation__button:hover:active{background:#961c1c;box-shadow:none}.adyen-checkout__payment-method__disable-confirmation__button--remove,.adyen-checkout__payment-method__disable-confirmation__button--remove:disabled{border-color:#fff}.adyen-checkout__payment-method__disable-confirmation__button--cancel,.adyen-checkout__payment-method__disable-confirmation__button--cancel:disabled{border-color:transparent}.adyen-checkout__payment-method{background:#fff;border:1px solid #e6e9eb;cursor:pointer;margin-top:-1px;position:relative;transition:opacity .3s ease-out;width:100%}.adyen-checkout__payment-method:focus{outline:0}.adyen-checkout__payment-method--selected+.adyen-checkout__payment-method,.adyen-checkout__payment-method:first-child{border-top-left-radius:12px;border-top-right-radius:12px;margin-top:0}.adyen-checkout__payment-method--next-selected,.adyen-checkout__payment-method:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px;margin-bottom:0}.adyen-checkout__payment-method--loading{opacity:.2}.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading{opacity:.9}.adyen-checkout__payment-method--confirming .adyen-checkout__payment-method__details__content,.adyen-checkout__payment-method--disabling{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__payment-method--disabling{opacity:.3}.adyen-checkout__payment-method__header{align-items:center;color:#00112c;display:flex;flex-wrap:nowrap;font-size:1em;font-weight:400;justify-content:space-between;padding:12px 16px 12px 44px;position:relative;transition:background .1s ease-out;width:100%}[dir=rtl] .adyen-checkout__payment-method__header{padding:12px 44px 12px 12px}.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header{padding:16px}.adyen-checkout__payment-method__header__title{align-items:center;background:none;border:none;color:#00112c;cursor:pointer;display:flex;flex-shrink:0;font-size:1em;font-weight:400;margin-right:16px;max-width:100%;padding:4px}[dir=rtl] .adyen-checkout__payment-method__header__title{margin-left:16px;margin-right:0}.adyen-checkout__payment-method__surcharge{color:#687282;margin-left:5px}.adyen-checkout__payment-method--selected{background:#f7f8f9;border:1px solid #e6e9eb;border-radius:12px;cursor:default;margin:8px 0;transition:margin .15s cubic-bezier(.4,0,.2,1) 0ms, opacity .3s ease-out}.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header{flex-wrap:wrap}.adyen-checkout__payment-method__details{padding:0 16px;position:relative}.adyen-checkout__payment-method__details__content{margin:0 0 16px}.adyen-checkout__payment-method__image__wrapper{height:26px;position:relative;width:40px}.adyen-checkout__payment-method__image__wrapper--outline:after{border:1px solid rgba(0,27,43,.17);border-radius:3px;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.adyen-checkout__payment-method__image{border-radius:3px;display:block}.adyen-checkout__payment-method__brands{display:flex;flex-basis:auto;flex-shrink:1;flex-wrap:wrap;height:16px;margin:4px 0;overflow:hidden;text-align:right}.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__brand-number{color:#687282;font-size:13px}.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands{height:auto;overflow:visible;text-align:left}.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper{display:inline-block;height:16px;margin-right:4px;transition:opacity .2s ease-out;width:24px}.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:last-child{margin:0}.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper{margin-bottom:4px}.adyen-checkout__payment-method__brands img{height:16px;width:24px}.adyen-checkout__payment-method__image__wrapper--disabled{opacity:.25}.adyen-checkout__payment-method__radio{background-color:#fff;border:1px solid #b9c4c9;border-radius:50%;height:16px;left:16px;position:absolute;transition:border-color .2s ease-out, box-shadow .2s ease-out;width:16px}[dir=rtl] .adyen-checkout__payment-method__radio{left:auto;right:16px}.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__radio{display:none}.adyen-checkout__payment-method__radio:after{background-color:#fff;border-radius:50%;content:"";display:block;height:6px;left:0;margin:0 auto;position:absolute;right:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease-out;width:6px}.adyen-checkout__payment-method:hover:not(.adyen-checkout__payment-method--selected) .adyen-checkout__payment-method__radio{border-color:#99a3ad;box-shadow:0 0 0 2px #d4d9db;cursor:pointer}.adyen-checkout__payment-method__radio--selected{background-color:#0075ff;border:0;transition:all .3s ease-out}.adyen-checkout__payment-method__radio--selected:hover{box-shadow:0 0 0 2px rgba(0,102,255,.4)}.adyen-checkout__payment-method__radio--selected:after{transform:translateY(-50%) scale(1)}.adyen-checkout__payment-method__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adyen-checkout__payment-method__name--selected{font-weight:500}.adyen-checkout__payment-method__additional-info{color:#687282;font-size:.81em}.adyen-checkout__payment-method__name_wrapper{align-items:flex-start;display:flex;flex-direction:column}.adyen-checkout__order-payment-methods-list{list-style:none;margin:0 auto 16px;padding:0}.adyen-checkout__order-payment-method{background:#fff;border:1px solid #e6e9eb;margin-top:-1px;position:relative;width:100%}.adyen-checkout__order-payment-method:first-child{border-top-left-radius:12px;border-top-right-radius:12px}.adyen-checkout__order-payment-method:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px}.adyen-checkout__order-payment-method__header{align-items:center;color:#00112c;display:flex;flex-wrap:nowrap;font-size:1em;font-weight:500;justify-content:space-between;padding:16px;position:relative;transition:background .1s ease-out;width:100%}.adyen-checkout__order-payment-method__header .adyen-checkout__payment-method__header__title{padding:0}.adyen-checkout__order-payment-method__details{padding:0 16px 16px}.adyen-checkout__order-payment-method__deducted-amount{display:flex;font-size:1em;justify-content:space-between;line-height:1em}.adyen-checkout__order-payment-method__deducted-amount__label{font-size:.81em}.adyen-checkout__order-payment-method__deducted-amount__value{font-weight:500}.adyen-checkout__order-remaining-amount{background:#ffeacc;border-radius:6px;color:#7f4a00;display:block;font-size:.81em;margin-bottom:16px;padding:8px 16px;width:100%}.adyen-checkout__order-remaining-amount strong{font-weight:700}.adyen-checkout__status{align-items:center;background-color:#fff;border:1px solid #d4d9db;border-radius:6px;color:#00112c;display:flex;flex-direction:column;font-size:1em;height:350px;justify-content:center;margin:0;padding:32px;text-align:center}.adyen-checkout__status__icon{margin-bottom:24px}.adyen-checkout__status .adyen-checkout__spinner__wrapper{max-height:88px}.adyen-checkout__dropin,.adyen-checkout__dropin *,.adyen-checkout__dropin :after,.adyen-checkout__dropin :before{box-sizing:border-box}.adyen-checkout__payment-methods-list--loading{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adyen-checkout__instant-payment-methods-list{list-style:none;margin:0;padding:0}.adyen-checkout__instant-payment-methods-list li:not(:last-child){margin-bottom:8px}.adyen-checkout__link{color:#0075ff;-webkit-text-decoration:none;text-decoration:none}.adyen-checkout__link:hover{-webkit-text-decoration:underline;text-decoration:underline}.AchInput-module_sf-input__wrapper__lfdiv{position:relative}.AchInput-module_sf-input__wrapper__lfdiv *,.AchInput-module_sf-input__wrapper__lfdiv :after,.AchInput-module_sf-input__wrapper__lfdiv :before{box-sizing:border-box}.AchInput-module_adyen-checkout__input__8WwCR{display:block;max-height:100px}.adyen-checkout__loading-input__form{transition:opacity .25s ease-out}.adyen-checkout__pm__holderName{margin-bottom:0}.adyen-checkout__fieldset__title+.adyen-checkout__ach-sf__form{margin-top:0}.adyen-checkout__ach-input .adyen-checkout__fieldset--address,.adyen-checkout__ach-sf__form{margin-top:16px}.adyen-checkout__loading-input__form{transition:opacity .25s ease-out}.adyen-checkout-phone-input--new{direction:ltr}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper{width:100%}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__input{height:auto;padding:0}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__input:focus-within{border:1px solid #0075ff}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__input:focus-within .adyen-checkout-dropdown--countrycode-selector{border-right:1px solid #0075ff}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button{border:0;border-bottom-right-radius:0;border-top-right-radius:0;height:35px;width:auto}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button:after{box-sizing:revert;height:10px}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active,.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active:hover{box-shadow:none}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-input--phone-number{border:1px solid transparent;height:35px;line-height:35px;min-height:35px;padding-bottom:0;padding-left:15px;padding-top:0}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-input--phone-number:focus-within{border:1px solid #0075ff;box-shadow:0 0 0 2px #99c2ff}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-dropdown--countrycode-selector{border-right:1px solid #dce0e5;min-width:144px;width:144px}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-input-holder--phone-input{align-items:center;display:flex}.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-phone-number{align-items:center;display:flex;flex:3}.adyen-checkout-phone-input--new .adyen-checkout-phone-input__error-holder{margin-top:-10px}.adyen-checkout__await{background:#fff;border:1px solid #d4d9db;border-radius:12px;padding:40px;text-align:center}.adyen-checkout__await--result{padding:100px}.adyen-checkout__qr-loader--app{border:0;border-radius:0;padding:0}.adyen-checkout__await__brand-logo{border-radius:3px;width:74px}.adyen-checkout__await__indicator-text,.adyen-checkout__await__subtitle{color:#00112c;font-size:1em;line-height:19px;margin-top:32px}.adyen-checkout__await__indicator-holder .adyen-checkout__await__indicator-text{margin-left:10px;margin-top:6px}.adyen-checkout__await__indicator-holder{display:flex;justify-content:center;margin-bottom:20px;margin-top:32px}.adyen-checkout__await__subtitle--result{margin-bottom:32px}.adyen-checkout__await__icon{height:88px;width:88px}.adyen-checkout__await__progress{background:#d4d9db;border-radius:24px;height:4px;margin:32px auto 12px;width:152px}.adyen-checkout__await__percentage{background:#0075ff;border-radius:24px;display:block;height:100%}.adyen-checkout__await__countdown{color:#687282;font-size:.81em}.adyen-checkout__await>.adyen-checkout__spinner__wrapper{margin:60px 0}.adyen-checkout__await__app-link{display:none;margin-top:16px}@media only screen and (max-device-width:1200px){.adyen-checkout__await__app-link{display:block}}.adyen-checkout__blik__helper{color:#00112c;font-size:1em;font-weight:400;margin:0 0 16px;padding:0}.adyen-checkout__bankTransfer__introduction{color:#00112c;font-size:.81em;font-weight:400;margin:0 0 16px;padding:0}.adyen-checkout__bankTransfer__emailField{margin:0 0 16px}.adyen-checkout__bacs--confirm{position:relative}.adyen-checkout__bacs--confirm .adyen-checkout-input__inline-validation--valid{display:none}.adyen-checkout__bacs .adyen-checkout__field--inactive{pointer-events:none}.adyen-checkout__bacs .adyen-checkout__bacs--edit{cursor:pointer;position:absolute;right:0;top:-25px;width:20%}.adyen-checkout__bacs .adyen-checkout__bacs--edit-dropin{top:-50px}.adyen-checkout__bacs .adyen-checkout__bacs--edit .adyen-checkout__bacs--edit-button{background:none;border:none;color:#0075ff;cursor:pointer;text-align:right;-webkit-text-decoration:underline;text-decoration:underline}.adyen-checkout__voucher-result__introduction{font-size:1em;max-width:420px}.adyen-checkout__klarna-widget{pointer-events:all}.adyen-checkout__field--vpa{margin-bottom:0}.adyen-checkout__segmented-control{background:#fff;border:1px solid #b9c4c9;border-radius:6px;display:flex;gap:4px;justify-content:space-between;padding:4px 5px}.adyen-checkout__segmented-control--disabled{pointer-events:none}.adyen-checkout__segmented-control--disabled>.adyen-checkout__segmented-control-segment{color:#8390a3}.adyen-checkout__segmented-control--disabled>.adyen-checkout__segmented-control-segment--selected{background:#f3f6f9;border:1.5px solid #8390a3}.adyen-checkout__segmented-control-segment{background:#fff;border:0;border-radius:6px;color:#0075ff;cursor:pointer;flex-grow:1;font-weight:500;height:40px;text-align:center;transition:background .3s ease-out;width:100%}.adyen-checkout__segmented-control-segment:not(.adyen-checkout__segmented-control-segment--selected):hover{background-color:#f7f8f9}.adyen-checkout__segmented-control-segment:active{background-color:#f7f8f9;border:1.5px solid #687282}.adyen-checkout__segmented-control-segment--selected{background:#e5f1ff;border:1.5px solid #0075ff;color:#0075ff;font-weight:700}.adyen-checkout_upi-mode-selection-text{font-size:13px;font-weight:400;line-height:19px;margin-bottom:7px;margin-top:0}.adyen-checkout__segmented-control--upi-margin-bottom{margin-bottom:16px}.adyen-checkout-trustly{margin-bottom:16px}.adyen-checkout-trustly__descriptor{font-size:1em;font-weight:500;margin:0 0 4px}.adyen-checkout-trustly__description-list{font-size:.81em;line-height:1.5;list-style-type:disc;margin:0;padding-left:20px}.adyen-checkout-sr-panel{font-size:.75em;margin-bottom:20px}.adyen-checkout-sr-panel--sr-only{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}/*# sourceMappingURL=adyen.css.map */
.icon_d2b05e {
  margin: auto;
  top: 9px;
  left: 8px;
  z-index: 1;
  margin-bottom: 25px;
}

.connectionInstructions_d2b05e {
  text-align: center;
  margin-top: 8px;
}

.body_b25217 {
  margin: var(--spacing-16) 0;
}

.flexColumn_b25217 {
  display: flex;
  flex-direction: column;
}

.infoNotice_b25217 {
  margin-bottom: 24px;
}

.paymentRequestButton_b25217 {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.paymentModalBreadcrumbs_b25217:after {
  padding: 0;
}

.paymentModalError_b25217 {
  background-color: var(--modal-background);
  padding-top: 12px;
}

.awaitingAuthenticationStep__4ede8 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.awaitingWrapper__8a7af {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.body__96722 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.notification_e1e832 {
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-size: 14px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.3;
  font-weight: 500;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--status-positive-background);
}

  .notification_e1e832 a {
    color: var(--white-500);
    font-weight: 600;
  }

  .notification_e1e832 a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.icon_e1e832 {
  color: var(--status-positive-text);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.text_e1e832 {
  color: var(--status-positive-text);
  margin-left: 8px;
  flex: 1;
}

.confirmation__6220d {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 10px;
}

.confirmationHeader__6220d {
  margin-bottom: 16px;
}

.divider__6220d {
  width: 100%;
  height: 1px;
  margin: 24px 0;
  background-color: var(--background-modifier-accent);
}

.nitroIcon__9f4f9 {
  width: 16px;
  height: 16px;
  padding-right: 4px;
}

.innerButton__9f4f9 {
  align-items: center;
  display: flex;
}

.paymentSourceNoticeCopy__1048e {
  margin-top: 5px;
}

.divider__1048e {
  margin-top: 8px;
  margin-bottom: 8px;

  width: 100%;
  height: 1px;
  background-color: var(--background-modifier-accent);
}

.visual-refresh .divider__1048e {
    background-color: var(--border-subtle);
  }

.paymentSourceLabel_f38e43 {
  margin-left: 8px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
}

  .paymentSourceLabel_f38e43:first-child {
    margin-left: 0;
  }

.paymentSourceSelectedOption_f38e43 {
  display: flex;
  overflow: hidden;
  align-items: center;
}

.paymentSourceHasWarning_f38e43 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.paymentSourceWarning_f38e43 {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 8px;
  padding-left: 12px;
  background-color: var(--background-tertiary);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.paymentSourceWarningIcon_f38e43 {
  padding-right: 8px;
}

.error_f38e43 {
  color: var(--red-400);
}

.formTitle__553e7 {
  margin-bottom: 8px;
}

.checkbox__553e7 {
  margin-bottom: 10px;
}

.checkbox__553e7:last-child {
  margin-bottom: 0;
}

.checkboxLabel__553e7 {
  color: var(--interactive-normal);
}

.finePrint__553e7 {
  color: var(--text-muted);
  font-size: 12px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 14px;
  margin-top: 8px;
  margin-bottom: 16px;
}

.bannerContainer__3f9a4 {
  height: 48px;
  width: 408px;
  position: relative;
  border-radius: 4px;
}

.giftIcon__3f9a4 {
  color: white;
}

.textContainer__3f9a4 {
  position: absolute;
  top: 0;
  height: 48px;
  width: 408px;
  max-width: 408px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
}

.textHeader__3f9a4 {
  display: flex;
  align-items: center;
}

.textHeaderWithGiftIcon__3f9a4 {
  margin-left: 10px;
}

.banner__3f9a4 {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  vertical-align: center;
  text-align: center;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 4px;
}

.table__58ce9 {
  background-color: var(--background-secondary);
  border-radius: 4px;
  padding: 12px;
}

.header__58ce9 {
  color: var(--interactive-active);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.rowBase__58ce9 {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.rowBase__58ce9:not(:last-child) {
    margin-bottom: 8px;
  }

.row__58ce9 {
  
  justify-content: space-between;
  align-items: flex-start;
  color: var(--interactive-normal);
}

.rowAmount__58ce9 {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.rowLabel__58ce9 {
  margin-right: 10px;
}

.rowPercentDiscount__58ce9 {
  margin-left: 8px;
  background-color: var(--green-360);
  color: var(--white-500);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 16px;
}

.rowDiscountOriginalPrice__58ce9 {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  margin: -4px 0 4px;
  text-align: right;
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.entitlementDiscountRow__58ce9 {
  
  justify-content: flex-end;
  color: var(--text-positive);
}

.divider__58ce9 {
  background-color: var(--background-modifier-accent);
  height: 1px;
  margin: 16px 0;
}

.divider__58ce9.negativeMarginTop__58ce9 {
    margin-top: -16px;
  }

.divider__58ce9.negativeMarginBottom__58ce9 {
    margin-bottom: -4px;
  }

.dividerExtended__58ce9 {
  height: 4px;
  margin-left: -16px;
  margin-right: -16px;
}

.totalRow__58ce9 {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.totalLabel__58ce9 {
  color: var(--interactive-normal);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.totalLabel__58ce9 strong {
  color: var(--interactive-active);
  font-weight: 600;
}

.totalAmount__58ce9 {
  color: var(--interactive-active);
  font-weight: 600;
}

.finePrint__58ce9 {
  color: var(--text-normal);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  margin: 16px 0;
}

.annualPlanDiscountPriceSection__58ce9 {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
}

.annualPlanOptionDiscount__58ce9 {
  border-radius: 8px;
  margin-top: 2px;
  background-color: var(--green-360);
  font-weight: 600;
  padding: 0 6px;
  margin-right: 8px;
  max-height: 16px;
  position: relative;
}

.annualDiscountValues__58ce9 {
  display: flex;
  flex-direction: column;
}

.trialEndPrice__58ce9 {
  text-align: right;
}

.visual-refresh .table__58ce9 {
    background-color: var(--background-mod-subtle);
    border: 1px solid var(--border-subtle);
    padding: var(--space-12);
    border-radius: var(--radius-sm);
  }

.visual-refresh .divider__58ce9 {
    background-color: var(--border-faint);
  }

.wrapper_c0e5ec {
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.wrapperActive_c0e5ec {
  background-color: var(--background-modifier-accent);
}

.container_d0a022 {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.icon_d0a022 {
  flex-shrink: 0;
}

.container__33980 {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}

.iconBackground__33980 {
  background-color: var(--interactive-muted);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.link__33980 {
  display: inline;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
}

.noticeRoot_b956e9 {
  align-items: center;
  background-color: var(--background-secondary);
  border-radius: 4px;
  display: flex;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 16px;
}

.iconContainer_b956e9 {
  display: flex;
}

.infoIcon_b956e9 {
  color: var(--yellow-300);
  margin-right: 6px;
  width: 14px;
  height: 14px;
}

.text_b956e9 {
  color: var(--interactive-normal);
  flex-grow: 1;
}

.pricePerInterval_b39acb {
  color: var(--interactive-normal);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.pricePerInterval_b39acb strong {
  color: var(--interactive-active);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

.nitroWheel_c5f0dc {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  margin-left: 2px;
  vertical-align: sub;
}

.featureBorder__65c15 {
  border-radius: 8px;
}

.premiumFeatureBorder__65c15 {
  
  border: 2px solid transparent;
  background:
    linear-gradient(var(--background-primary), var(--background-primary)) padding-box,
    var(--custom-premium-colors-premium-gradient-tier-2-diagonal) border-box;
}

.limitedFeatureBorder__65c15 {
  
  border: 1px solid transparent;
  background:
    linear-gradient(var(--background-primary), var(--background-primary)) padding-box,
    linear-gradient(var(--blue-345), var(--blue-345), var(--premium-perk-light-blue)) border-box;
}

.background__65c15 {
  padding: 24px;
}

.premiumBackground__65c15 {
  
  background: linear-gradient(
      45deg,
      hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.05) 0%,
      hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.05) 100%
    )
    border-box;
}

.limitedBackground__65c15 {
  
  background: linear-gradient(
      78.43deg,
      hsl(var(--blue-345-hsl) / 0.1),
      hsl(var(--blue-345-hsl) / 0.1),
      hsl(var(--premium-perk-light-blue-hsl) / 0.1)
    )
    padding-box;
}

.title_ace4f5 {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disabled_ace4f5 {
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.customizationSection_ace4f5 {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--background-modifier-accent);
}

.customizationSection_ace4f5.hideDivider_ace4f5 {
    padding-bottom: 0;
    border-bottom: none;
  }

.customizationSection_ace4f5:last-child:not(.withDivider_ace4f5) {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

.customizationSection_ace4f5.showBorder_ace4f5 {
    padding-bottom: 12px;
  }

.customizationSectionBackground_ace4f5 {
  padding: 16px;
}

.sectionDescription_ace4f5 {
  margin-bottom: 16px;
}

.errorMessage_ace4f5 {
  margin-top: 8px;
}

.customizationSectionBorder_ace4f5 {
  margin: -12px -12px 0;
}

.body_c93be2 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.textArea_c93be2 {
  --channel-text-area-placeholder: var(--input-placeholder-text);
  border-radius: 3px;
  height: 136px;
  transition: border-color 0.2s ease-in-out;
}

.textArea_c93be2:focus-within {
    border-color: var(--text-link);
  }

.textArea_c93be2 > div {
    height: 100%;
  }

.editorTextArea_c93be2 {
  height: 136px;
}

.theme-dark .textArea_c93be2 * > span {
      color: var(--white-100);
    }

.theme-light .textArea_c93be2 * > span {
      color: var(--text-normal);
    }

.container__8564e {
  cursor: pointer;
  margin-right: 4px;
  margin-left: 4px;
  width: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.addButton__8564e {
  margin: 3px;
  display: flex;
  align-items: center;
}

.plusSign__8564e {
  color: var(--text-muted);
  height: 18px;
  width: 18px;
}

.addButton__8564e > * {
  margin-right: 4px;
}

.soundIcon__8564e {
  margin-right: 4px;
}

.textSelected__8564e {
  margin-right: 5px;
}

.sound__8564e {
  display: flex;
  align-items: center;
  padding: 3px;
}

.text__8564e,
.textSelected__8564e {
  color: var(--white-500);
}

.customGiftHeader__8564e {
  box-shadow: var(--elevation-low);
  z-index: 1;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  padding: 12px;
  align-items: center;
  display: block;
  background-color: var(--background-floating);
}

.searchAndSound__8564e {
  display: flex;
  margin-top: 10px;
  align-items: center;
}

.container__231eb {
  cursor: pointer;
  margin-right: 4px;
  margin-left: 4px;
  width: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emojiList__231eb {
  background-color: var(--background-floating);
}

.emoji__231eb {
  display: flex;
  align-items: center;
}

.textSelected__231eb {
  margin-right: 4px;
}

.text__231eb,
.textSelected__231eb {
  color: var(--white-500);
}

.emojiIcon__231eb {
  margin-right: 4px;
  color: var(--white-500);
  padding: 4px;
}

.customGiftContent__231eb {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.emojiHeader__231eb {
  background-color: var(--background-floating);
}

.customGiftHeader__231eb {
  margin-bottom: 10px;
}

.categoryList__231eb {
  top: 106px;
}

.visual-refresh .categoryList__231eb {
    top: 120px;
  }

.visual-refresh .emojiHeader__231eb {
    background-color: var(--background-secondary) !important;
  }

.visual-refresh .emojiHeader__231eb {
    /* stylelint-disable-next-line declaration-no-important */
  }

.customGiftBox_d50aac,
.customGiftBoxHighlighted_d50aac {
  background-color: var(--transparent);
  border-radius: 8px;
  border: 3px solid var(--transparent);
  cursor: pointer;
}

.customGiftBoxHighlighted_d50aac {
  border: 2px solid var(--brand-500);
  padding: 2px;
}

.button_d50aac {
  width: 100%;
}

.infoIcon_d54fab {
  height: 16px;
  color: var(--header-primary);
}

.infoIconContainer_d54fab {
  display: flex;
}

.giftBoxHeaderContainer_d54fab {
  display: flex;
  flex-direction: row;
}

.giftMainAnimation_d54fab {
  position: relative;
  height: 275px;
}

.adjustedGiftMainAnimation_d54fab {
  margin-left: -20px;
  height: 230px;
}

.soundEmojiContainer_d54fab {
  position: absolute;
  bottom: 16px;
  margin-left: 35px;
  display: flex;
}

.sound_d54fab,
.emoji_d54fab {
  background-color: var(--primary-860);
  opacity: 0.7;
  margin-right: 6px;
  border-radius: 5px;
  height: 32px;
  display: flex;
  align-items: center;
}

.animation_d54fab {
  transform: scale(1);
  position: absolute;
  bottom: 0;
  left: 0;
}

.spinner_d54fab {
  transform: scale(0.75);
  width: 100%;
  height: 100%;
}

.giftBoxHeaderText_d54fab {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-right: 6px;
}

.giftBoxOptionContainer_d54fab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  margin: auto;
  margin-top: 25px;
  max-width: 85%;
}

.adjustedGiftBoxOptionContainer_d54fab {
  margin-left: 15px;
}

.planOption_b13085 {
  color: var(--interactive-normal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.planOneTimeCost_b13085 {
  margin-top: 8px;
}

.selectionBox_b13085 {
  outline: 2px solid var(--background-modifier-accent);
  padding: 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}

.selectedPlan_b13085 {
  outline: 2px solid var(--brand-500);
}

.visual-refresh .selectionBox_b13085 {
    outline: 1px solid var(--border-normal);
    border-radius: var(--radius-md);
    padding: var(--space-12);
  }

.visual-refresh .selectedPlan_b13085 {
    outline-color: var(--checkbox-border-checked);
    background-color: var(--opacity-blurple-8);
  }

.planOptionDisabled_b13085 {
  opacity: 0.6;
}

.planOptionClickable_b13085 {
  align-items: center;
  display: flex;
}

.planOptionDisabled_b13085 .planOptionClickable_b13085 {
  cursor: not-allowed;
}

.planOptionCheckbox_b13085 {
  margin-right: 10px;
}

.planOptionInterval_b13085 {
  color: var(--interactive-normal);
  font-weight: 500;
}

.optionSelected_b13085 {
  color: var(--interactive-active);
}

.planOptionCurrentPlan_b13085,
.planOptionMonthsFree_b13085 {
  margin-left: 4px;
}

.planOptionDiscount_b13085 {
  border-radius: 16px;
  background-color: var(--green-360);
  padding: 2px 8px;
  margin-left: 8px;
  font-weight: 600;
}

.annualPlanOptionDiscount_b13085 {
  margin-top: 3px;
  align-content: center;
  border-radius: 8px;
  background-color: var(--green-360);
  font-weight: 600;
  padding: 0 6px;
  margin-right: 8px;
  position: relative;
}

.planOptionSubtextContainer_b13085 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.planOptionSubtext_b13085 {
  max-width: 166px;
  padding-bottom: 12px;
}

.discountPlanOptionSubtext_b13085 {
  max-width: 300px;
  text-align: right;
}

.discountPlanOptionSubtext_b13085 p {
    margin: 0;
  }

.planOptionClickableContainer_b13085 {
  cursor: pointer;
}

.updatedOptionSelected_b13085 {
  font-weight: 600;
}

.optionPriceSelected_b13085 {
  color: var(--interactive-active);
  font-weight: 600;
}

.giftRecipientInfo__57118 {
  display: flex;
  align-items: center;
}

.giftRecipientInfo__57118 > * {
  margin-right: 8px;
}

.content__57118 {
  margin: 24px 0;
}

.giftRecipientName__57118,
.giftRecipientTag__57118 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
}

.giftRecipientTag__57118 {
  color: GrayText;
}

.stepBody_d947e6 {
  padding-top: 12px;
}

.giftOptions_d947e6 {
  max-width: 75%;
  justify-content: center;
}

.stepBodyCustomGift_d947e6 {
  display: flex;
  flex-direction: row;
  width: 785px;
}

.paddingForHalloweenBanner_d947e6 {
  padding-bottom: 12px;
}

.bodyColumnMiddle_d947e6 {
  margin-right: 30px;
}

.bodyColumnLeft_d947e6 {
  margin-left: var(--spacing-24);
  margin-right: 60px;
}

.bodyColumnRight_d947e6 {
  margin-right: 10px;
}

.stepBodyCustomGift_d947e6 > * {
  width: 50%;
}

.bodyText_d947e6 {
  color: var(--interactive-normal);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.interactiveColor_d947e6 {
  color: var(--interactive-normal);
}

.clickable_d947e6 {
  cursor: pointer;
}

.selectPlanDivider_d947e6 {
  background-color: var(--background-modifier-accent);
  height: 1px;
  margin: 8px 0 16px;
}

.giftRecipientName_d947e6 {
  color: GrayText;
}

.giftRecipientInfo_d947e6 {
  display: flex;
  align-items: center;
}

.giftRecipientInfo_d947e6 > * {
  margin-right: 8px;
}

.giftNitroInfo_d947e6 {
  margin-top: 15px;
  margin-bottom: 20px;
}

.giftNitroInfo_d947e6 hr {
  border: none;
  height: 1px;
  background-color: var(--background-modifier-accent);
}

.selectPlanChooseTitle_d947e6,
.selectPlanChooseSubtitle_d947e6 {
  color: var(--interactive-active);
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
}

.selectPlanChooseTitle_d947e6 {
  font-weight: 600;
}

.selectPlanChooseSubtitle_d947e6 {
  margin-bottom: 18px;
}

.selectPlanTotalRow_d947e6 {
  margin-top: 8px;
}

.seasonalGiftBoxHeaderIcon_d947e6 {
  width: 260px;
  position: absolute;
  top: -131px;
  align-self: center;
}

.planSelectSeparator_d947e6 {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--background-modifier-accent);
  margin: 0 0 4px;
}

.trialPlanSelectHeader_d947e6 {
  padding-bottom: 12px;
}

.legacyPricingNotice_d947e6 {
  margin-bottom: 16px;
}

.customGiftMessageWrapper_d947e6 {
  margin-right: 16px;
}

.customGiftMessage_d947e6 {
  background-color: var(--background-tertiary);
}

.selectGiftTitle_d947e6 {
  margin-top: 24px;
  margin-bottom: 16px;
}

.equalDistantBackButton_d947e6 {
  padding-left: 10px;
}

.compactSendGiftToUser_d947e6 {
  margin: 16px 0;
}

.compactCustomGiftMessageWrapper_d947e6 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.compactSelectGiftTitle_d947e6 {
  margin-top: 16px;
}

.subscriptionCostRowAmount__3d62f {
  font-weight: 500;
}

.subscriptionCostRow__3d62f {
  color: var(--header-primary);
}

.invoiceItemLabelWithIcon__3d62f {
  display: flex;
  align-items: center;
}

.invoiceItemLabelIcon__3d62f {
  color: var(--interactive-normal);
  margin-left: 8px;
  height: 14px;
  width: 14px;
}

.invoiceItemTooltip__3d62f {
  max-width: 240px;
}

.invoiceItemTooltip__3d62f p {
    margin: 0;
  }

.invoiceItemTooltip__3d62f strong {
    font-weight: 700;
  }

.subscriptionDetailsToggle__3d62f {
  color: var(--text-normal);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  margin: -16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  cursor: pointer;
}

.subscriptionDetailsToggleCaret__3d62f {
  margin-left: 6px;
  height: 16px;
  width: 16px;
}

.subscriptionPeriodResetNotice__3d62f {
  color: var(--text-normal);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.subscriptionAddedInvoiceItem__3d62f {
  color: var(--text-positive);
}

.purchaseDetailsHeaderText__3d62f {
  margin-bottom: 8px;
}

.root_e4d803 {
  background-color: transparent;
}

.root_e4d803 > :last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.root_e4d803.withHeader_e4d803 > :first-child {
  /* transparent background is to make sure the modal background does not show up behind header
    due to anti-aliasing (even though border radius is the same) */
  background-color: transparent;
}

.shaker_e4d803 {
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  max-height: 660px;
  height: 100%;
}

.modalHeader_e4d803 {
  margin-bottom: -20px;
  padding-bottom: 0;
}

.header_e4d803 {
  flex-shrink: 0;
}

.headerAnimation_e4d803 {
  position: absolute;
  top: 0;
  bottom: -20px;
  left: calc(50% - 220px);
  width: 440px;
}

.stepBody_e4d803 {
  padding-top: 16px;
}

.bodyText_e4d803 {
  color: var(--interactive-normal);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.taxInclusiveNote_e4d803 {
  margin-bottom: 16px;
}

.invoice_e4d803 {
  margin-bottom: 16px;
}

.paymentSourceWrapper_e4d803 {
  margin: 12px 0;
}

.paymentSourceOptionalWarning_e4d803 {
  margin-top: 16px;
  color: var(--text-normal);
}

.currencyWrapper_e4d803 {
  margin-top: 16px;
  margin-bottom: 16px;
}

@media (max-width: 485px) {
  .shaker_e4d803 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    max-height: none;
  }

  .root_e4d803 {
    width: 100vw;
    border-radius: 0;
    justify-content: center;
  }
}

.trialCheckbox_e4d803 {
  align-items: flex-start;
}

.trialCheckboxLabel_e4d803 {
  font-size: 14px;
  line-height: 18px;
}

.loader_e4d803 {
  margin-top: 64px;
}

.contentWrapper_e4d803 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.reviewWarningMessageContainer_e4d803 {
  display: flex;
  flex-direction: row;
  padding: 10px;
  background-color: var(--info-warning-background);
  border: 1px solid var(--status-warning-background);
  border-radius: 4px;
  margin-bottom: 16px;
}

.reviewWarningMessage_e4d803 {
  color: var(--interactive-active);
  margin-left: 10px;
}

.trialPriceLine_e4d803 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}

.afterTrialPriceLine_e4d803 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.discountSubtext_e4d803 {
  text-align: right;
}

.discountSubtext_e4d803 p {
    margin: 0;
  }

.formTitle_e4d803 {
  margin-bottom: 12px;
}

.spinnerWrapper_e4d803 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.trialHeader_e4d803 {
  margin-bottom: 18px;
}

.giftMainAnimation_e4d803 {
  margin-top: -32px;
  margin-bottom: var(--space-8);
  position: relative;
}

.selectFreeSku_e4d803 {
  display: none;
}

.renewalInvoiceDate_d313e6 {
  color: var(--text-normal);
  margin-bottom: 16px;
}

.paymentNote__56a21 {
  background-color: var(--modal-background);
  padding: 16px 16px 0;
  margin: 0;
}

.profileEffectContainer__0b5ea {
  position: relative;
  width: 42px;
  height: 52px;
}

.profileEffectBackground__0b5ea {
  position: absolute;
  width: 100%;
  height: 100%;

  border-radius: var(--radius-xs);
}

.profileEffect__0b5ea {
  position: absolute;
  width: 100%;
  height: 100%;

  border-radius: var(--radius-xs);

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.avatarDecoration__0b5ea {
  width: 42px;
  height: 42px;
}

.collectiblePreview_a56a22 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.profileEffects__01370 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.6s ease-in-out;
}

.hovered__01370 {
  opacity: 0.35;
}

.inner__01370 {
  overflow: hidden;
  position: absolute;
  border-radius: 8px;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.innerNoRadius__01370 {
  
  border-radius: 0;
}

.effect__01370 {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
}

.profileEffectContainer_a84142 {
  height: 296px;
  width: 200px;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 16px auto 0;
}

.profileEffectBackground_a84142 {
  position: absolute;
  width: 100%;
}

.giftMainAnimationWrapper_a84142 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar_a84142 {
  margin-top: 24px;
}

.stepBody_b44961 {
  padding-top: 16px;
}

.visual-refresh .stepBody_b44961 {
    padding-top: var(--space-8);
  }

.invoice_b44961 {
  margin-bottom: 16px;
}

.paymentSourceWrapper_b44961 {
  margin: 16px 0;
}

.currencyWrapper_b44961 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.subscriptionCostRow_b44961 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--header-primary);
}

.invoiceSpinner_b44961 {
  height: 23px;
}

.errorBlock_b44961 {
  position: relative;
  margin: 5px 15px 15px;
}

.fineprint_b44961 {
  margin-bottom: 0;
}

.skuHeading_b44961 {
  display: flex;
  gap: 25px;
  margin-bottom: 20px;
}

.skuHeadingText_b44961 {
  align-self: center;
}

.giftMainAnimation_b44961 {
  max-width: 325px;
  margin-bottom: 24px;
}

.back_e125f1 {
  width: auto;
  min-width: auto;
  padding: 2px 4px;
  margin-right: auto;
}

.shopPageContainer__4485d {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.giftModalContainer__4485d {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--background-primary);
  padding: var(--spacing-24);
}

.heading1__4485d {
  margin-top: 24px;
  margin-bottom: 24px;
}

.description__4485d {
  text-align: center;
}

.reload__4485d {
  margin-top: 24px;
}

.header__693f1 {
  display: flex;
  justify-content: flex-end;
  background-color: var(--background-primary);
  padding: 0;
}

.closeButton__693f1 {
  padding: 16px;
}

.headerContainerGift__57a87 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-image: linear-gradient(var(--modal-background), var(--modal-background));
  background-size: 100% calc(100% - 20px);
}

.closeButtonGift__57a87 {
  margin-left: auto;
}

.previewContainer__1e458 {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 0;
}

.previewContainerSetHeight__1e458 {
  height: 390px;
}

.full-motion .previewContainerAnimation__1e458 {
  animation: scaleIn__1e458 0.5s;
}

.preview__1e458 {
  position: relative;
  width: 100%;
  height: 100%;
}

.previewForCollected__1e458 {
  
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: top;
     object-position: top;
}

.purchasedEffect__1e458 {
  opacity: 0.35;
}

@keyframes scaleIn__1e458 {
  from {
    transform: scale(0.7);
  }

  to {
    transform: scale(1);
  }
}

.banner__9ed41 {
  width: 100%;
  height: 100%;
}

.fadeInAvatarImg_d71c71 {
  animation: fadeIn_d71c71 1.5s;
}

.avatarPurchased_d71c71 {
  opacity: 0.5;
  transition: opacity 0.5s;
}

.avatar_d71c71 {
  margin: 0 auto;
}

@keyframes fadeIn_d71c71 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.container__6d099 {
  position: relative;
}

.profileEffectShopPreview__6d099 {
  position: absolute;
  width: 150px;
  height: 200px;
  left: 33px;
  top: 25px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  transform: rotate(-11deg);
}

.avatarDecorationPreview__6d099 {
  position: absolute;
  right: 20px;
  top: 80px;
  transform: rotate(8deg);
}

.modalRoot__78e61 {
  border-radius: var(--radius-sm);
  background-color: transparent;
}

  .modalRoot__78e61 .modalContent__78e61 {
    display: flex;
    padding: 0;
    border-radius: inherit;
  }

.modalContent__78e61::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.modalInner__78e61 {
  display: flex;
  flex-direction: column;
  width: 440px;
  background-color: var(--background-floating);
}

.modalCloseButton__78e61 {
  position: absolute;
  top: 16px;
  right: 16px;
}

.avatarDecoration__78e61 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 144px;
  width: 144px;
}

.full-motion .avatarDecoration__78e61 {
    animation: zoomin__78e61 1.5s;
  }

@keyframes zoomin__78e61 {
  from {
    transform: translate(-50%, -50%) scale(0.25);
  }

  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

.decorationBanner__78e61 {
  position: absolute;
  background-position: 50% 50%;
}

.bannerContainer__78e61 {
  position: relative;
  height: 228px;
  overflow: hidden;
}

.collectedInfoContainer__78e61 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 24px 48px 32px;
}

.collectedInfoContainer__78e61.default__78e61 {
    background-color: var(--modal-background);
  }

.collectedTextContainer__78e61 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.confettiCanvas__78e61 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.profileEffectShopPreview__78e61 {
  position: relative;
  height: 100%;
  width: 160px;
  top: 20px;
  margin: 0 auto;
}

.lightText__78e61 {
  color: var(--white-500);
}

.darkText__78e61 {
  color: var(--black-500);
}

.customConfetti__78e61 {
  top: -120px;
  right: -75px;
  pointer-events: none;
}

.bundlePreview__78e61 {
  width: 292px;
  margin: 0 auto;
}

.bundleProfileEffectCard__78e61 {
  margin-top: 8px;
  width: 128px;
  height: 172px;
}

.buttons__78e61 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  min-width: 80%;
}

.buttons__78e61 > * {
    flex: 1;
  }

.easterEggContainer__78e61 {
  position: absolute;
  top: 0;
  right: -100%;
  height: 228px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promotionalBanner__78e61 {
  background: linear-gradient(78.98deg, rgba(255, 144, 144, 1), rgba(243, 14, 216, 1));
  height: 230px;
  width: 100%;
}

.visual-refresh .modalContent__78e61 {
    padding: 0;
    margin: -1px;
  }

.visual-refresh .bannerContainer__78e61 {
    width: calc(100% + 4px);
  }

.visual-refresh .decorationBanner__78e61 {
    width: calc(100% + 4px);
  }

.blurb_cd2ff7 {
  margin-top: 10px;
  font-size: 16px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.44;
  text-align: center;
  max-width: 360px;
  color: var(--header-secondary);
}

.giftSentMessage_cd2ff7 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 16px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.44;
  text-align: center;
  max-width: 360px;
  color: var(--header-primary);
}

.giftRecipient_cd2ff7 {
  margin-top: 16px;
}

.giftRecipientName_cd2ff7 {
  margin-top: 10px;
}

.giftRecipientTag_cd2ff7 {
  margin-top: 6px;
  font-size: 13px;
  color: var(--header-secondary);
}

.divider_cd2ff7 {
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background-color: var(--background-modifier-accent);
}

.subtext_cd2ff7 {
  font-size: 12px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 14px;
  margin-top: 10px;
  color: var(--channels-default);
}

.subtextError_cd2ff7 {
  color: var(--text-danger) !important;
}

.subtextError_cd2ff7 {
  
  /* stylelint-disable-next-line declaration-no-important */
}

.header_cd2ff7 {
  margin-top: 20px;
}

.headerCustomGifting_cd2ff7 {
  margin-top: 24px;
}

.giftRecipientSection_cd2ff7 {
  margin-top: 40px;
  width: 100%;
}

.giftRecipient_cd2ff7 {
  display: flex;
  align-items: center;
  width: 100%;
}

.giftRecipientInputWrapper_cd2ff7 {
  width: 100%;
}

.giftRecipientInputError_cd2ff7 {
  border-color: var(--text-danger) !important;
}

.giftRecipientInputError_cd2ff7 {
  /* stylelint-disable-next-line declaration-no-important */
}

.giftRecipientRowAvatar_cd2ff7 {
  margin-right: 8px;
}

.sendToRecipientButton_cd2ff7 {
  margin-left: 8px;
  height: 42px;
  /* to match the height of the input */
}

.giftBox_cd2ff7 {
  width: 260px;
  position: absolute;
  top: -131px;
}

.confirmation_cd2ff7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--modal-background);
  padding: 0 16px 24px;
  border-radius: 4px;
}

.seasonalConfirmationPadding_cd2ff7 {
  padding: 0 16px;
}

.giftCodeSection_cd2ff7 {
  flex-direction: column;
}

.avatar_f9d668 {
  z-index: 1;
  position: absolute;
  top: 61px; /* banner size - avatar size - avatar offset */
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay_f9d668:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-round);
  background-color: hsl(var(--black-500-hsl) / 0.4);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.overlayIcon_f9d668 {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.clickable_f9d668.avatar_f9d668 {
    cursor: pointer;
  }

.clickable_f9d668:hover .overlay_f9d668:after,
    .clickable_f9d668:hover .overlayIcon_f9d668,
    .clickable_f9d668:focus-within .overlay_f9d668:after,
    .clickable_f9d668:focus-within .overlayIcon_f9d668 {
      opacity: 1;
    }

.menu_f9d668 {
  margin-top: 30px; /* (avatar size - overlay icon size) / 2 */
}

.clickable__75b30 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: hsl(var(--black-500-hsl) / 0.4);
  cursor: pointer;
  opacity: 0;
  transition: 0.2s ease opacity;
}

  .clickable__75b30:hover {
    opacity: 1;
  }

.tooltipContainer_f240e3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px 4px;
}

.tooltipDescription_f240e3 {
  margin-top: var(--spacing-4);
}

.tooltipWordmarkContainer_f240e3 {
  margin-top: 8px;
}

.tooltipWordmark_f240e3 {
  color: var(--text-muted);
}

.container__8061a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  gap: 2px;
  margin: 1px 0;
  padding: 0 2px;
  background: var(--bg-mod-faint);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-faint);
}

  .container__8061a:empty {
    visibility: hidden;
  }

.custom-profile-theme .container__8061a {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-6));
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

.badge__8061a {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden;
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
  width: 20px;
  height: 20px;
}

.badge__8061a:active {
    opacity: 0.8;
  }

.badge__8061a:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--background-modifier-accent);
    border-radius: 50%;
  }

/* stylelint-disable color-no-hex */

.tieredTenureBadgeBronzeGlow__8061a {
  box-shadow: 0 0 18px 0 #f78d41;
}

.tieredTenureBadgeSilverGlow__8061a {
  box-shadow: 0 0 18px 0 #d2d2d2;
}

.tieredTenureBadgeGoldGlow__8061a {
  box-shadow: 0 0 18px 0 #ffa813;
}

.tieredTenureBadgePlatinumGlow__8061a {
  box-shadow: 0 0 18px 0 #5eacc2;
}

.tieredTenureBadgeDiamondGlow__8061a {
  box-shadow: 0 0 18px 0 #6d5cf2;
}

.tieredTenureBadgeEmeraldGlow__8061a {
  box-shadow: 0 0 18px 0 #32c102;
}

.tieredTenureBadgeRubyGlow__8061a {
  box-shadow: 0 0 18px 0 #f29cc3;
}

.tieredTenureBadgeFireGlow__8061a {
  box-shadow: 0 0 18px 0 #e95c03;
}

/* stylelint-enable color-no-hex */

.starContainer__8061a {
  position: relative;
}

.topLeftStar__8061a,
.bottomRightStar__8061a {
  position: absolute;
}

.topLeftStar__8061a {
  top: -34px;
  left: -13px;
}

.bottomRightStar__8061a {
  bottom: -16px;
  right: -15px;
}

.nameTag__05e81 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  /* this allows the bot tag to be centered as compared to the other content */
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.1;
}

.username__05e81 {
  flex: 0 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.bot__05e81 {
  flex: 0 0 auto;
  margin-left: 1ch;
  display: block;
}

.info_f4bc97 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow: hidden;
  align-items: center;
  white-space: nowrap;
}

.infoSpacing_f4bc97 {
  margin-left: 5px;
}

.container__63ed3 {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

  .container__63ed3.bot__63ed3 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

.clickableUsername__63ed3 {
  cursor: pointer;
}

.clickableUsername__63ed3:hover .nickname__63ed3,
    .clickableUsername__63ed3:hover .userTagUsername__63ed3,
    .clickableUsername__63ed3:focus-visible .nickname__63ed3,
    .clickableUsername__63ed3:focus-visible .userTagUsername__63ed3 {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.nickname__63ed3 {
  word-break: break-word;
  overflow: hidden;
}

.nickname__63ed3.biteSize__63ed3,
  .nickname__63ed3.panel__63ed3 {
    max-height: 72px; /* 3 lines of 20px font-size * 1.2 line height */
  }

.nickname__63ed3.fullSize__63ed3 {
    max-height: 90px; /* 3 lines of 24px font-size * 1.25 line height */
  }

.nicknameIcons__63ed3 {
  display: flex;
  align-self: flex-start;
  gap: 2px;
}

.nicknameIcons__63ed3.biteSize__63ed3,
  .nicknameIcons__63ed3.panel__63ed3 {
    padding-top: 4px;
  }

.nicknameIcons__63ed3.fullSize__63ed3 {
    padding-top: 8px;
  }

.usernameRow__63ed3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.tags__63ed3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 9.33px;
       column-gap: 9.33px;
}

.tags__63ed3.biteSize__63ed3,
  .tags__63ed3.panel__63ed3 {
    row-gap: 2px;
  }

.tags__63ed3.fullSize__63ed3 {
    row-gap: 8px;
  }

.tags__63ed3.pronouns__63ed3,
  .tags__63ed3.bot__63ed3 {
    -moz-column-gap: 6px;
         column-gap: 6px;
  }

.userTag__63ed3 {
  font-size: 14px;
  font-family: var(--header-primary);
  font-weight: 400;
  line-height: 18px;
}

.pronounsTooltip__63ed3 {
  max-width: 100%;
}

.pronounsText__63ed3 {
  
  margin-right: 2px;

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.userTagUsername__63ed3 {
  word-break: break-all;
  text-overflow: initial;
  white-space: normal;
  color: var(--header-primary);
  /* NOTE(amadeus): We use vertical-align top for everything in here to ensure
   * we get consistent line-height measurements computed on our inline elements
   * (otherwise we start to see weird fractional heights) */
  vertical-align: top;
  display: inline;
}

.userTagDiscriminator__63ed3 {
  color: var(--header-primary);
  /* NOTE(amadeus): We use vertical-align top for everything in here to ensure
   * we get consistent line-height measurements computed on our inline elements
   * (otherwise we start to see weird fractional heights) */
  vertical-align: top;
}

.dotSpacer__63ed3 {
  background-color: var(--text-normal);
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.clanTagContainer__63ed3 {
  height: 22px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}

.clanTag__63ed3 {
  background: var(--bg-mod-faint);
  margin: 0 auto;
}

.custom-profile-theme .clanTagContainer__63ed3 {
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

.custom-profile-theme .clanTag__63ed3 {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-6));
  }

.viewFullBio_f5f93a {
  margin-top: 8px;
}

.viewFullBioColor_f5f93a {
  color: var(--interactive-normal);
}

.viewFullBioColor_f5f93a:hover,
  .viewFullBioColor_f5f93a:focus-visible {
    color: var(--interactive-hover);
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.viewFullBioColor_f5f93a:active {
    color: var(--interactive-active);
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.viewFullBioDisabled_f5f93a {
  opacity: 0.5;
}

.descriptionClamp_f5f93a {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.maxBioHeight_f5f93a {
  /* Max possible height of 3 lines of text without the next line showing (block quotes on line 4 shows for 56px) */
  /* If there are emojis, the last line will be slightly cut off, but this is an edge case and ONLY for block quotes */
  max-height: 55px;
}

.baseAvatar__6738d {
  display: inline-block;
  /* NOTE(amadeus): We use vertical-align top for everything in here to ensure
   * we get consistent line-height measurements computed on our inline elements
   * (otherwise we start to see weird fractional heights) */
  vertical-align: top;
}

.largeAvatar__6738d {
  
  line-height: 24px;
  margin-right: 8px;
}

.miniAvatar__6738d {
  
  line-height: 18px;
  margin-right: 4px;
  margin-top: 1px;
}

.header__5be3e {
  position: relative;
  min-height: calc(var(--custom-user-profile-banner-height) + 35px);
  flex-shrink: 0;
}

.custom-profile-theme .header__5be3e {
    min-height: calc(var(--custom-user-profile-banner-height) + 31px);
  }

.headerTag__5be3e {
  position: absolute;
  bottom: 8px;
  right: 16px;
  border-radius: var(--radius-xs);
}

.body__5be3e {
  padding: 4px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__5be3e {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
}

.footer__5be3e:empty {
    visibility: hidden;
    padding: 0;
  }

.backdrop__5be3e {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--bg-backdrop);
  z-index: 4;
}

.toast__5be3e {
  top: calc((var(--custom-user-profile-banner-height) - 56px) / 2);
  z-index: 5; /* above the backdrop */
}

.activity__5be3e {
  border-radius: var(--radius-xs);
}

.upsell__5be3e div {
  border-radius: var(--radius-xs);
}

html:not(.visual-refresh-chat-input) .inner_a99829 {
    background: var(--input-background);
    border-radius: 3px;
  }

    .custom-profile-theme html:not(.visual-refresh-chat-input) .inner_a99829 {
      background: rgb(var(--bg-overlay-color-inverse) / 0.1);
    }

.visual-refresh-chat-input .container_a99829, .visual-refresh.custom-theme-background .container_a99829 {
    background: var(--input-background);
  }

.custom-profile-theme .visual-refresh-chat-input .container_a99829, .custom-profile-theme .visual-refresh.custom-theme-background .container_a99829 {
      background: rgb(var(--bg-overlay-color-inverse) / 0.1);
    }

.editor_a99829 {
  --channel-text-area-placeholder: var(--text-muted);
  font-size: 14px;
}

.ctaRow_a99829 {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.menuItemLabel_a99829 {
  display: flex;
  gap: 6px;
}

.biteSizeIconButton_a99829 {
  height: 38px;
  width: 38px;
}

.biteSizeButton_a99829 {
  height: 38px;
}

.engagementExpButton_a99829 {
  /* stylelint-disable-next-line discord/var-validator */
  background-color: var(--profile-gradient-button-color);
  color: var(--white-500);
  transition: opacity var(--custom-button-transition-duration) ease;
}

.engagementExpButton_a99829:hover {
    opacity: 0.8;
  }

.engagementExpButton_a99829:active {
    opacity: 0.9;
  }

.engagementExpButton_a99829:disabled,
  .engagementExpButton_a99829[aria-disabled='true'] {
    opacity: 0.5;
  }

.container_ba7f98 {
  position: relative;
  box-sizing: content-box;
}

.header_ba7f98 {
  z-index: 2;
  min-height: calc(var(--custom-user-profile-banner-height) + 45px);
}

.custom-profile-theme .header_ba7f98 {
    min-height: calc(var(--custom-user-profile-banner-height) + 35px);
  }

.previewContainer__50f14 {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xs);
  border: 2px solid var(--border-subtle);
}

.giftInfoContainer__50f14 {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.previewContainerSelected__50f14 {
  border: 2px solid var(--brand-500);
}

.previewContainerError__50f14 {
  border: 2px solid var(--status-danger-background);
}

.previewTextContainer__50f14 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;

  padding-left: 10px;
}

.previewTitleContainer__50f14 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.previewTitle__50f14 {
  margin-bottom: 0;
}

.recipientError__50f14 {
  padding: 8px 12px;
  background-color: var(--background-secondary-alt);
}

.previewLink__50f14 {
  cursor: pointer;
}

.previewLink__50f14:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: var(--text-link);
  }

.visual-refresh .previewContainer__50f14 {
    border: 1px solid var(--border-normal);
    border-radius: var(--radius-md);
  }

.visual-refresh .previewContainerSelected__50f14 {
    border-color: var(--checkbox-border-checked);
    background-color: var(--opacity-blurple-8);
  }

.stepBody_bf1b4a {
  padding-top: 12px;
  display: flex;
  flex-direction: row;
}

.bodyColumnMiddle_bf1b4a {
  margin-right: 30px;
}

.bodyColumnLeft_bf1b4a {
  margin-left: 24px;
  margin-right: 60px;
}

.bodyColumnRight_bf1b4a {
  margin-right: 10px;
}

.stepBody_bf1b4a > * {
  width: 50%;
}

.sendTo_bf1b4a {
  margin-top: 24px;
  margin-right: 16px;
}

.customGiftMessageWrapper_bf1b4a {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-right: 16px;
}

.customGiftMessage_bf1b4a {
  background-color: var(--background-tertiary);
}

.giftPreview_bf1b4a {
  margin-bottom: 24px;
  margin-right: 16px;
}

.selectGiftTitle_bf1b4a {
  margin-top: 24px;
  margin-bottom: 16px;
}

.recommendedGiftPreview_bf1b4a {
  margin-bottom: 12px;
  cursor: pointer;
}

.navigateToShopButton_bf1b4a {
  border-radius: var(--radius-xs);
  border: 1px solid var(--interactive-muted);
  background: var(--background-primary);
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  cursor: pointer;
}

.navigateToShopBody_bf1b4a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.navigateToShopTextWrapper_bf1b4a {
  display: flex;
  flex-direction: column;
}

.shopIcon_bf1b4a {
  background-color: var(--background-modifier-hover);
  border-radius: var(--radius-round);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.headerContainer__9abb9 {
  width: 100%;
  height: 146px;
  position: relative;
  background-color: var(--background-primary);
}

.closeButton__9abb9 {
  position: absolute;
  top: 16px;
  right: 16px;
}

.headerImageContainer__9abb9 {
  width: 100%;
  height: 100%;
}

.headerImage__9abb9 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.visual-refresh .headerContainer__9abb9 {
    /* Make the header wider than the parent and then offset with a negative margin
    so that its flush with the parent's border */
    width: calc(100% + 2px);
    margin-left: -1px;
    margin-top: -2px;

    min-height: 146px;
    box-sizing: border-box;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

.visual-refresh .headerImage__9abb9 {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }

.modalOverrideBody__34eac {
  padding: 0;
  overflow: visible;
  border-radius: 8px;
  background-color: transparent;
}

.modalOverrideBody__34eac::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.modalOverrideSliderBody__34eac {
  padding: 0;
  width: 440px;
}

.confettiCanvas__34eac {
  position: absolute;
  width: 100%;
  height: 100%;
}

.customConfetti__34eac {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.customConfetti__34eac.hidden__34eac {
    opacity: 0;
  }

.visual-refresh .modalOverrideBody__34eac {
    padding: 0;
    width: calc(100% + 2px);
    margin-left: -1px;
    margin-top: -2px;
  }

.modal__0f18a {
  width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 24px;
  padding: 24px 16px;
  box-sizing: border-box;
}

.heading__0f18a {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.divider__0f18a {
  width: 408px;
  height: 1px;
  opacity: 0.1;
  background: white;
}

.image__0f18a {
  margin-left: auto;
  margin-right: auto;
  margin-top: -104px;
  width: 277px;
  height: auto;
}

.body__0f18a {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.header__0f18a {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  text-align: center;
}

.selectContainer__0f18a {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emojiSelect__0f18a {
  border: 1px solid transparent;
  background-color: var(--input-background);
  padding: var(--size-12) var(--size-8);
  border-radius: var(--radius-xs);
}

.innerEmojiSelect__0f18a {
  flex: 1;
}

.emojiContent__0f18a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.selectedEmoji__0f18a {
  display: flex;
  gap: 16px;
  align-items: center;
}

.emojiIcon__0f18a {
  color: var(--interactive-normal);
  width: 28px;
  height: 28px;
}

.chevron__0f18a {
  color: var(--interactive-normal);
  width: 24px;
  height: 24px;
}

:where(.visual-refresh) .emojiSelect__0f18a {
    border: 1px solid var(--input-border);
  }

.footer__0f18a {
  display: flex;
  height: 72px;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  background: var(--background-secondary);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  width: 100%;
  box-sizing: border-box;
}

.anomaly__0f18a {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  width: 440px;
  height: 440px;
}

.error__0f18a {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 100px;
}

.spinner__0f18a {
  margin-top: 200px;
}

.buttonCopy__0f18a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tooltip__0f18a {
  text-align: center;
}

.footerRight__0f18a {
  display: flex;
  gap: 8px;
}

.remaining__0f18a {
  gap: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(46, 204, 113, 0.3);
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.06) 1%, rgba(46, 204, 113, 0.15) 99%);
  box-shadow: 0 0 18.1px 0 rgba(46, 204, 113, 0.15) inset;
  border-radius: var(--radius-xs);
  padding: 8px 13px;
}

.shootingStar__0f18a {
  width: 18px;
  height: 18px;
}

.full-motion .remaining__0f18a:hover .shootingStar__0f18a {
  animation: wiggle__0f18a 750ms ease-in-out;
}

@keyframes wiggle__0f18a {
  0% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(8deg);
  }

  40% {
    transform: rotate(8deg);
  }

  80% {
    transform: rotate(-6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.userTooltip__6b453 {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.avatar__6b453 {
  margin-right: 8px;
}

.discriminator__6b453 {
  opacity: 0.5;
}

/** Styles for the markdown syntax characters */

.syntaxBefore_ada32f,
.syntaxAfter_ada32f {
  font-weight: 600;
}

.codeBlockSyntax_ada32f,
.syntaxBefore_ada32f,
.syntaxAfter_ada32f {
  color: var(--textbox-markdown-syntax);
}

.codeBlockLang_ada32f {
  /* NOTE(amadeus): Is green the right color here? */
  color: var(--text-positive);
}

.after_s_ada32f,
.before_s_ada32f,
.before_spoiler_ada32f,
.after_spoiler_ada32f,
.syntaxOverride_ada32f,
.after_u_ada32f,
.before_u_ada32f {
  font-weight: 400;
}

.before_em_ada32f {
  margin-right: -1px;
}

.after_em_ada32f {
  margin-left: 1px;
}

.before_u_ada32f,
.before_s_ada32f {
  margin-right: 1px;
}

.after_u_ada32f,
.after_s_ada32f {
  margin-left: 1px;
}

.after_u_ada32f,
.before_u_ada32f {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.before_inlineCode_ada32f {
  border-radius: 3px 0 0 3px;
}

.after_inlineCode_ada32f {
  border-radius: 0 3px 3px 0;
}

/* Styles for the content styled by markdown syntax */

.bold_ada32f {
  font-weight: 700;
}

.italics_ada32f {
  font-style: italic;
}

.underline_ada32f {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.strikethrough_ada32f {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.fakeLink_ada32f {
  color: var(--text-link);
  -webkit-text-decoration: var(--link-decoration);
          text-decoration: var(--link-decoration);
}

.low-saturation .fakeLink_ada32f {
    color: var(--text-link-low-saturation);
  }

.inlineCode_ada32f,
.before_inlineCode_ada32f,
.after_inlineCode_ada32f {
  background: var(--background-secondary);
  font-family: var(--font-code);
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 85%;
  line-height: 18px;
  margin: -0.2em 0;
  padding: 0.2em 0;
  width: auto;
  height: auto;
  text-indent: 0;
  text-indent: initial;
  white-space: pre-wrap;
}

.spoiler_ada32f {
  padding: 0 0.2em;
}

.codeLine_ada32f,
.codeBlockText_ada32f {
  color: var(--header-secondary);
  font-family: var(--font-code);
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 85%;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
}

.codeLine_ada32f .hljs-comment,
  .codeLine_ada32f .hljs-quote {
    color: var(--text-muted);
  }

.codeLine_ada32f .hljs-ansi-control-sequence {
    /*
    Override the existing global to not hide the control sequences in the editor and render them as slightly
    smaller grey
    */
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    font-size: 70%; /* percentage scales it relative to the inherited font-size */
    vertical-align: middle;
    padding-right: 0.1em;
    color: var(--textbox-markdown-syntax);

    /* Reset everything else */
    background-color: inherit;
    font-weight: inherit;
    font-style: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: inherit;
  }

.before_subtext_ada32f {
  font-weight: 700;
}

.before_subtext_ada32f,
.subtext_ada32f {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 17.875px;
}

.inlineElement__1464f {
  display: inline-block;
}

.inlineVoid__1464f {
  cursor: default;
}

.inlineVoid__1464f .mention {
    padding-bottom: 1px;
  }

.applicationCommand__1464f {
  display: flex;
  flex-wrap: wrap;
  margin-left: -4px;
  margin-top: -8px;
  margin-bottom: -4px;
}

.applicationCommand__1464f > [data-slate-node='text'] > * {
      display: inline-block;
      padding-top: 8px;
    }

/* Add margins between all text/inline elements (except for first/last),
    but reduce it for empty nodes since they'll have a min-width */

.applicationCommand__1464f > [data-slate-node='text']:not(:first-child) > :first-child {
      margin-left: 4px;
    }

.applicationCommand__1464f > [data-slate-node='text']:not(:first-child) > :first-child.emptyText__1464f {
        margin-left: 2px;
      }

.applicationCommand__1464f > [data-slate-node='text']:not(:last-child) > :last-child {
      margin-right: 4px;
    }

.applicationCommand__1464f > [data-slate-node='text']:not(:last-child) > :last-child.emptyText__1464f {
        margin-right: 2px;
      }

.applicationCommand__1464f:after {
    flex: 1;
    padding-left: 4px;
    padding-top: 8px;
    white-space: nowrap;
    color: var(--text-muted);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    content: attr(data-trailing-placeholder);
  }

/* Ensure empty text nodes have enough width to be clickable */

.applicationCommand__1464f > [data-slate-node='text'] > *, .optionPillValue__1464f > [data-slate-node='text'] > * {
      min-width: 4px;
    }

.commandName__1464f {
  font-weight: 600;
  margin-left: 4px;
}

.optionPill__1464f {
  display: flex;
  border-radius: 4px;
  border: solid 1px transparent;
  align-self: flex-start;
  justify-content: flex-start;
  vertical-align: top;
  max-width: calc(100% - 30px);
  margin-top: 6px;
}

.optionPillKey__1464f {
  display: inline-block;
  padding: 1px 8px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}

.optionPillValue__1464f {
  display: block;
  padding: 1px 8px;
  vertical-align: top;
  white-space: pre-wrap;
  flex: 1;
}

.readonlyPillValue__1464f {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.readonlyPillValue__1464f ::-moz-selection {
    background: transparent;
  }

.readonlyPillValue__1464f ::selection {
    background: transparent;
  }

.attachmentFilename__1464f {
  color: var(--brand-500);
}

.theme-dark .optionPill__1464f {
    background-color: var(--background-secondary-alt);
    border-color: var(--background-tertiary);
  }

.theme-dark .optionPillKey__1464f {
    background-color: var(--background-floating);
  }

.theme-light .optionPill__1464f {
    background-color: var(--background-secondary);
    border-color: var(--background-modifier-selected);
  }

.theme-light .optionPillKey__1464f {
    background-color: var(--background-tertiary);
  }

.selectedPill__1464f {
  border-color: Highlight !important;
}

.selectedPill__1464f {
  /* stylelint-disable-next-line declaration-no-important */
}

.erroredPill__1464f {
  border-color: var(--red-400) !important;
}

.erroredPill__1464f {
  /* stylelint-disable-next-line declaration-no-important */
}

.newLine__1464f {
  display: inline-block;
}

.editor__1b31f {
  white-space: break-spaces !important;
}

  .editor__1b31f {
  caret-color: var(--text-normal);
  text-align: left;
  word-break: break-word;

  /* Sadly slate sets this as an inline style on the div tag, so we have to !important it here to override it :( */
  /* stylelint-disable-next-line declaration-no-important */
}

  .editor__1b31f pre {
    max-width: none;
  }

.placeholder__1b31f {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--channel-text-area-placeholder);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.visual-refresh-chat-input .placeholder__1b31f {
    line-height: 1.5rem;
  }

.visual-refresh-chat-input.display-compact .placeholder__1b31f {
    line-height: 1.4rem;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .placeholder__1b31f {
    color: GrayText;
  }

.slateContainer_ec4baf {
  position: relative;
}

.slateTextArea_ec4baf {
  padding-right: 10px;

  /* position'd absolute to reduce the cost of layouts! */
  /* With this, layout's = 0.5ms.  Without this layout's = 3ms.  Layout's happen on every keypress! */
  position: absolute;
  left: 0;
  right: 10px;
}

.visual-refresh .slateTextArea_ec4baf {
    padding: calc((var(--custom-channel-textarea-text-area-height) - 1.375rem) / 2) 0;
    margin-left: 10px;
  }

.visual-refresh-chat-input .slateTextArea_ec4baf {
    --custom-vertical-padding: calc(var(--custom-channel-textarea-text-area-height) / 4 - 1px);
    box-sizing: border-box;
    margin-left: 0;
    height: 100%;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .placeholder_ec4baf {
    color: GrayText;
  }

@use postcss-pxtorem;

.channelTextArea__74017 {
  position: relative;
  width: 100%;
  text-indent: 0;
  border-radius: 8px;
}

.channelTextArea__74017.highlighted__74017 {
    box-shadow: 0 0 0 4px var(--blue-345);
  }

.focusRing__74017 {
  border-radius: 8px;
}

.visual-refresh-chat-input .focusRing__74017 {
    border-radius: 4px !important;
  }

.visual-refresh-chat-input .focusRing__74017 {
    /* stylelint-disable-next-line declaration-no-important */
  }

.scrollableContainer__74017 {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: var(--custom-channel-textarea-text-area-max-height);
  border-radius: 8px;
  backface-visibility: hidden;
}

.themedBackground__74017 {
  background: var(--bg-overlay-3, var(--channeltextarea-background));
}

/**
 * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
 * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
 * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
 */

.no-webkit-scrollbar .scrollableContainer__74017 {
    /* NOTE(amadeus): Since we can't really style non-webkit browsers - we try to
     * hide the scrollbar for now */
    scrollbar-width: none;
  }

:where(.visual-refresh.custom-theme-background) .channelTextArea__74017 {
    border-color: var(--app-border-frame);
    background: var(--bg-overlay-floating, var(--input-background));
  }

:where(.visual-refresh-chat-input) .channelTextArea__74017 {
    box-sizing: border-box;
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease;
    box-shadow: var(--shadow-low);
    background: var(--bg-overlay-floating, var(--chat-background-default));
  }

:where(.visual-refresh-chat-input) .channelTextArea__74017:focus-within {
      border-color: var(--border-subtle);
    }

.visual-refresh-chat-input .themedBackground__74017 {
    background: none;
  }

.sticker__74017 {
  display: block;
}

.disabledButtonWrapper__74017 {
  display: inline-flex;
}

.background-opacity-low .scrollableContainer__74017 {
  background-color: hsl(var(--primary-500-hsl) / 0.5);
}

.background-opacity-low .scrollableContainer__74017 .textArea__74017 {
    color: var(--white-500);
  }

.background-opacity-medium .scrollableContainer__74017 {
  background-color: hsl(var(--primary-500-hsl) / 0.7);
}

.background-opacity-medium .scrollableContainer__74017 .textArea__74017 {
    color: var(--white-500);
  }

.background-opacity-high .scrollableContainer__74017 {
  background-color: hsl(var(--primary-500-hsl) / 0.9);
}

.scrollableContainer__74017::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

.scrollableContainer__74017::-webkit-scrollbar-thumb,
  .scrollableContainer__74017::-webkit-scrollbar-track {
    border-width: 4px;
    background-clip: padding-box;
    border-style: solid;
    border-color: transparent;
  }

.scrollableContainer__74017::-webkit-scrollbar-track {
    border-width: medium;
    border-width: initial;
  }

.scrollableContainer__74017::-webkit-scrollbar-thumb {
    background-color: hsl(var(--primary-800-hsl) / 0.6);
    border-radius: 8px;
  }

.channelTextAreaDisabled__74017 .scrollableContainer__74017 {
  opacity: 0.5;
}

.hasStackedBar__74017 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.visual-refresh .channelTextAreaDisabled__74017 .scrollableContainer__74017 {
    opacity: 1;
  }

.visual-refresh .inlineContainer__74017 {
    box-shadow: none;
    background: var(--bg-overlay-floating, var(--input-background));
  }

.visual-refresh .inlineContainer__74017 .accessoryBar__74017 {
      border-top: none;
      align-items: flex-start;
    }

.visual-refresh .flushContainer__74017 {
    
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    border: none;
  }

.visual-refresh .flushContainer__74017 .inner__74017 {
      padding-left: 0;
    }

.visual-refresh .flushContainer__74017 .accessoryBar__74017 {
      border-top: none;
      align-items: flex-start;
    }

.visual-refresh-chat-input .inlineContainer__74017 {
    --custom-channel-textarea-text-area-height: 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    box-shadow: none;
    border-color: var(--input-border);
    background: var(--bg-overlay-floating, var(--input-background));
  }

.visual-refresh-chat-input .inlineContainer__74017 .accessoryBar__74017 {
      border-top: none;
      align-items: flex-start;
    }

.visual-refresh-chat-input .flushContainer__74017 {
    
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    border: none;
  }

.visual-refresh-chat-input .flushContainer__74017 .accessoryBar__74017 {
      border-top: none;
      align-items: flex-start;
    }

.inner__74017 {
  display: flex;
  position: relative;
}

.innerDisabled__74017 {
  
  cursor: not-allowed;
}

.sansAttachButton__74017 {
  /* offset that accounts for the border around the container; this ensures everything is still aligned to our grid */
  padding-left: calc(var(--space-16) - 1px);
}

.inlineContainer__74017 .sansAttachButton__74017 {
  padding-left: 0;
}

.sansAttachButtonCreateThread__74017 {
  padding-left: 10px;
}

.sansAttachButtonCreatePost__74017 {
  padding-left: 0;
}

.sansAttachButtonUserProfileReply__74017 {
  padding-left: 0;
}

.attachButton__74017 {
  margin-left: -16px;
}

.visual-refresh .attachButton__74017 {
    margin-left: -14px;
  }

.visual-refresh-chat-input .attachButton__74017 {
    margin-left: 0;
  }

.textArea__74017 {
  background-color: transparent;
  resize: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 1rem;
  /* copied from modules/messages/Markup.module.css */
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.375rem;
  width: 100%;
  height: var(--custom-channel-textarea-text-area-height);
  min-height: var(--custom-channel-textarea-text-area-height);
  color: var(--text-normal);
  padding-left: 0;
  padding-right: 10px;
}

.textArea__74017::-moz-placeholder {
    -moz-user-select: none;
         user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-muted);
  }

.textArea__74017::placeholder {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-muted);
  }

.textAreaSlate__74017 {
  box-sizing: border-box;
  padding: 0;
}

.textAreaThreadCreation__74017 {
  min-height: 66px;
}

.profileBioInput__74017 {
  min-height: 100%;
}

.profileBioInput__74017 > div {
    height: 100%;
  }

.overlayInlineReply__74017 {
  padding-right: 0 !important;
}

.overlayInlineReply__74017 {
  min-height: 100%;
  height: 100%;
  /* stylelint-disable-next-line declaration-no-important */
}

.textAreaWithoutAttachmentButton__74017 {
  padding-left: 16px;
}

.visual-refresh .textAreaWithoutAttachmentButton__74017 {
    margin-left: 0;
  }

.textAreaForPostCreation__74017 {
  padding: 0 !important;
}

.textAreaForPostCreation__74017 {
  /* stylelint-disable-next-line declaration-no-important */
}

.textAreaForUserProfile__74017 {
  font-size: 0.875rem;
}

.textAreaForOverlayInlineReply__74017 {
  padding: 7px 12px !important;
}

.textAreaForOverlayInlineReply__74017 {
  /* stylelint-disable-next-line declaration-no-important */
  font-size: 0.875rem;
}

/* NOTE(jesus): this is a fix so custom gift text area fills its vertical space */

.textAreaCustomGift__74017[role='textbox'] {
  position: absolute !important;
}

.textAreaCustomGift__74017[role='textbox'] {
  height: 100%;
  /* stylelint-disable-next-line declaration-no-important */
  box-sizing: border-box;
}

/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */

@media all and (-webkit-max-device-pixel-ratio: 1) {
  .theme-light .textArea__74017 {
    font-weight: 500;
  }
}

.textAreaDisabled__74017 {
  
  pointer-events: none;
}

.buttons__74017 {
  display: flex;
  flex-direction: row;
  height: var(--custom-channel-textarea-text-area-height);
  position: sticky;
  top: 0;
  margin-right: 6px;
}

/* Only apply this spacing when the custom scroll bars in Chrome are used */

.has-webkit-scrollbar .buttons__74017 {
    margin-right: -6px;
  }

.has-webkit-scrollbar.visual-refresh .buttons__74017 {
    margin-right: 0;
  }

.visual-refresh .buttons__74017 {
    align-items: center;
    gap: var(--space-8);
  }

.visual-refresh-chat-input .buttons__74017 {
    height: auto;
  }

.visual-refresh-chat-input-chat-input.has-webkit-scrollbar .buttons__74017 {
    margin-right: -2px;
  }

.buttonContainer__74017 {
  display: flex;
  align-items: center;
}

.button__74017 {
  padding: 4px;
  margin-left: 4px;
  margin-right: 4px;
}

:where(.visual-refresh) .channelTextArea__74017 {
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-sm);
  }

:where(.visual-refresh) .inner__74017 {
    padding-left: calc(var(--space-16) - 1px);
  }

:where(.visual-refresh) .themedBackground__74017 {
    background: var(--bg-overlay-floating, var(--chat-background-default));
  }

:where(.visual-refresh) .button__74017 {
    box-sizing: border-box;
    min-width: var(--space-32);
    min-height: var(--space-32);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

.emojiButton__74017 {
  
}

.stickerIcon__74017 {
  width: 20px !important;
  height: 20px !important;
}

.stickerIcon__74017 {
  /* Overriding ChannelTextAreaButton's icon styles */
  /* stylelint-disable declaration-no-important */
  /* stylelint-enable declaration-no-important */
}

/* the rotate transform here is really small and grabs your attention when
there are sticker suggestions */

.stickerButton__74017 {
  /* stylelint-disable-next-line discord/respect-reduced-motion */
  transition: transform 0.2s;
}

.stickerButtonWithNotification__74017 {
  margin-top: 1px;
  padding-left: 2px;
  padding-right: 2px;
}

.stickerButtonTilted__74017 {
  /* stylelint-disable-next-line discord/respect-reduced-motion */
  transition: transform 0.15s;
  transform: rotate(12deg) scale(1.05);
}

.full-motion .messageConfettiButton__74017:hover {
  animation: wiggle__74017 750ms ease-in-out;
}

@keyframes wiggle__74017 {
  0% {
    transform: rotate(0);
  }

  30% {
    transform: rotate(8deg);
  }

  40% {
    transform: rotate(8deg);
  }

  80% {
    transform: rotate(-6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.fontSize12Padding__74017 {
  padding-bottom: 14px;
  padding-top: 14px;
}

.fontSize14Padding__74017 {
  padding-bottom: 12px;
  padding-top: 13px;
}

.fontSize15Padding__74017 {
  padding-bottom: 12px;
  padding-top: 12px;
}

.fontSize16Padding__74017 {
  padding-bottom: 11px;
  padding-top: 11px;
}

.fontSize18Padding__74017 {
  padding-bottom: 9px;
  padding-top: 9px;
}

.fontSize20Padding__74017 {
  padding-bottom: 9px;
  padding-top: 8px;
}

.fontSize24Padding__74017 {
  padding-bottom: 6px;
  padding-top: 5px;
}

.floatingBars__74017 {
  /* These should match stackedBars's border radius */
  margin-bottom: -8px;
  min-height: 8px;
}

.floatingBars__74017 .newMemberActionBar__74017 {
  margin-left: 0;
  margin-right: 0;
}

.stackedBars__74017 {
  background: var(--background-secondary);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.stackedBars__74017 > :not(:last-child) {
    border-bottom: 1px solid var(--background-secondary-alt);
  }

.bar__74017 {
  border-radius: inherit;
}

.visual-refresh .stackedBars__74017 {
    background: var(--background-surface-higher);
  }

.visual-refresh .stackedBars__74017:not(:last-child) {
      border-bottom: 1px solid var(--border-subtle);
    }

.visual-refresh .floatingBars__74017 {
    margin-bottom: 0;
    min-height: 0;
  }

.sparkles__74017 {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 150%;
  height: 150%;
}

.expressionPickerPositionLayer__74017 {
  /*
    The gap between the maximum picker width and the left edge of the channel area:
    (guild icon sidebar width: 72px) + (padding: 14px)
  */
  left: 86px;
}

.theme-dark.custom-theme-background .stackedBars__74017 {
    background: var(--bg-overlay-1, var(--background-secondary));
  }

.theme-dark.custom-theme-background .textAreaMobileThemed__74017 {
    margin-top: 16px;
  }

.theme-light.custom-theme-background .stackedBars__74017 {
    background: var(--bg-overlay-2, var(--background-secondary));
  }

.theme-light.custom-theme-background .textAreaMobileThemed__74017 {
    margin-top: 16px;
  }

.theme-brand .inner__74017 {
    background-color: var(--brand-400);
  }

.theme-brand .textArea__74017 {
    color: hsl(var(--white-500-hsl) / 0.7);
  }

.theme-brand .textArea__74017::-moz-placeholder {
      color: hsl(var(--white-500-hsl) / 0.3);
    }

.theme-brand .textArea__74017::placeholder {
      color: hsl(var(--white-500-hsl) / 0.3);
    }

.visual-refresh-chat-input .accessoryBar__74017 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8);
    border-top: 1px solid var(--background-mod-subtle);
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }

.visual-refresh-chat-input .accessoryBarLeft__74017,
  .visual-refresh-chat-input .accessoryBarRight__74017 {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    position: relative;
    min-height: var(--space-32);
  }

.visual-refresh-chat-input .accessoryBarRight__74017 {
    margin-right: calc(-1 * var(--space-4));
  }

.visual-refresh-chat-input .rightAccessories__74017 {
    display: flex;
    align-items: center;
    max-height: var(--custom-channel-textarea-text-area-height);
    position: sticky;
    top: 0;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .scrollableContainer__74017 {
    border: 1px solid CanvasText;
    overflow-y: auto;
    padding-right: 12px;
  }

.enable-forced-colors .scrollableContainer__74017::-webkit-scrollbar {
      width: 8px;
    }

.enable-forced-colors .scrollableContainer__74017::-webkit-scrollbar-track {
      border-radius: 0 8px 8px 0;
    }

.enable-forced-colors .scrollableContainer__74017::-webkit-scrollbar-thumb,
    .enable-forced-colors .scrollableContainer__74017::-webkit-scrollbar-track {
      border-width: 1px;
    }

.enable-forced-colors .scrollableContainer__74017::-webkit-scrollbar-thumb {
      background-color: CanvasText;
    }

@keyframes pulseIcon__24af7 {
  0%,
  100% {
    transform: scale(var(--custom-channel-text-area-button-hover-scale));
  }

  50% {
    transform: none;
  }
}

@keyframes pulseButton__24af7 {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes sparkle__24af7 {
  0% {
    opacity: 0;
    transform: rotate(-50deg) scale(0);
  }

  20% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  40% {
    opacity: 0;
    transform: rotate(50deg) scale(0);
  }

  100% {
    opacity: 0;
    transform: rotate(-50deg) scale(0);
  }
}

.buttonWrapper__24af7 {
  cursor: pointer;
}

.button__24af7 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-normal);
}

.button__24af7:hover {
    color: var(--interactive-hover);
  }

.button__24af7:active {
    color: var(--interactive-active);
  }

.iconMask__24af7 {
  display: block;
  width: 24px;
  height: 24px;
}

.buttonContent__24af7 {
  position: relative;
}

.icon__24af7 {
  width: 24px;
  height: 24px;
}

.visual-refresh .iconMask__24af7 {
    width: 20px;
    height: 20px;
  }

.visual-refresh .icon__24af7 {
    width: 20px;
    height: 20px;
  }

.pulseIcon__24af7 {
  /* Small-scale attention-grabbing animations like this are alright to keep in reduced-motion */
  /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
  animation: pulseIcon__24af7 600ms ease;
}

.pulseButton__24af7 .buttonWrapper__24af7 {
  animation: pulseButton__24af7 600ms ease;
}

.buttonWrapper__24af7 svg {
  display: block;
}

.notificationDot__24af7 {
  background-color: var(--status-danger);
  border-radius: 100%;
  bottom: 0;
  height: 7px;
  position: absolute;
  right: 0;
  transform: translate(0%, -5%);
  width: 7px;
}

.sparkleContainer__24af7 {
  position: absolute;
}

.sparkleStar__24af7 {
  position: relative;
  color: var(--gold);
  top: -12px;
  left: 20px;
  /* Small-scale attention-grabbing animations like this are alright to keep in reduced-motion */
  /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
  animation: sparkle__24af7 2.5s ease-in-out infinite;
}

.sparklePlus__24af7 {
  position: relative;
  opacity: 0;
  color: var(--brand-500);
  top: 16px;
  left: -20px;
  /* Small-scale attention-grabbing animations like this are alright to keep in reduced-motion */
  /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
  animation: sparkle__24af7 2.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

.active__24af7 .buttonWrapper__24af7,
.buttonWrapper__24af7:hover {
  color: var(--interactive-active);
}

.disabled_aa63ab {
  cursor: not-allowed;
}

.container_aa63ab {
  display: flex;
  align-items: center;
}

.separator_aa63ab {
  width: 1px;
  height: 65%;
  background-color: var(--background-modifier-accent);
  align-self: center;
  margin-left: var(--space-8);
}

.visual-refresh .separator_aa63ab {
    height: var(--chat-markup-line-height);
    background-color: var(--border-faint);
    margin-left: 0;
  }

.buttonContainer_aa63ab {
  display: flex;
}

.sendIcon_aa63ab {
  width: 20px !important;
  height: 20px !important;
}

.sendIcon_aa63ab {
  padding-top: 2px;

  /* Overriding ChannelTextAreaButton's icon styles */
  /* stylelint-disable declaration-no-important */
  /* stylelint-enable declaration-no-important */
}

.show-redesigned-icons .sendIcon_aa63ab {
  padding-top: 0;
  padding-top: initial;
}

.innerButton_aa63ab {
  padding: 4px;
  margin-left: 12px;
  margin-right: 4px;
}

.buttonContainer_aa63ab button:disabled {
  opacity: 1;
}

.button_aa63ab[disabled] > .innerButton_aa63ab > .buttonChild_aa63ab,
.buttonChild_aa63ab {
  transition: color 0.25s ease-in-out;
  color: var(--interactive-muted);
}

.activeButtonChild_aa63ab {
  color: var(--text-brand);
}

.theme-dark .button_aa63ab:hover .activeButtonChild_aa63ab, .theme-dark .button_aa63ab:focus .activeButtonChild_aa63ab, .theme-dark .button_aa63ab:focus-within .activeButtonChild_aa63ab {
        color: var(--brand-430);
      }

.theme-dark .button_aa63ab:active .activeButtonChild_aa63ab {
        color: var(--brand-500);
      }

.theme-light .buttonContainer_aa63ab:hover,
    .theme-light .buttonContainer_aa63ab:focus,
    .theme-light .activeInnerButton_aa63ab:hover,
    .theme-light .activeInnerButton_aa63ab:focus {
      color: var(--brand-560);
    }

.theme-light .buttonContainer_aa63ab:active, .theme-light .activeInnerButton_aa63ab:active {
      color: var(--brand-600);
    }

.reduce-motion .innerButton_aa63ab {
    transition: none 0s ease 0s;
    transition: initial;
  }

.visual-refresh .innerButton_aa63ab {
    margin-right: 0;
    margin-left: 0;
    min-width: var(--space-32);
    min-height: var(--space-32);
    box-sizing: border-box;
  }

.visual-refresh .container_aa63ab {
    margin-left: 0;
  }

.visual-refresh .container_aa63ab:before {
    display: none;
  }

.visual-refresh-chat-input .container_aa63ab {
    display: flex;
    margin-left: 8px;
  }

.visual-refresh-chat-input .separator_aa63ab {
    margin-left: var(--space-8);
  }

.stickerPreviews_a4cf0b {
  padding: 10px 0 10px 16px;
}

.stickerPreviewContainer_a4cf0b {
  position: relative;
  display: inline-block;
}

.stickerPreview_a4cf0b {
  margin-right: 4px;
}

.stickerPreviewDivider_a4cf0b {
  margin-left: 16px;
}

.closeButton_a4cf0b {
  cursor: pointer;
  color: var(--interactive-normal);
  line-height: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.closeButton_a4cf0b:hover {
  color: var(--interactive-hover);
}

.closeIconContainer_a4cf0b {
  background: var(--channeltextarea-background);
  border-radius: 100%;
}

.closeIcon_a4cf0b {
  width: 16px;
  height: 16px;
}

.closeButton_e876a8 {
  flex: 0 0 auto;
  cursor: pointer;
  color: var(--interactive-normal);
  line-height: 0;
  padding: 8px 18px 8px 16px;
}

.visual-refresh .closeButton_e876a8 {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

.closeButton_e876a8:hover {
  color: var(--interactive-hover);
}

.closeIcon_e876a8 {
  width: 16px;
  height: 16px;
}

/*
 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 *
 * This file is an output of the Typography pipeline, which is defined here:
 *
 *   discord_design_system/modules/token_definitions/Typography.tsx
 *
 * Then run:
 *
 *   yarn generate
 */
.heading-sm\/normal__84522 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.heading-sm\/normal__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.heading-sm\/medium__84522 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.heading-sm\/medium__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.heading-sm\/semibold__84522 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.heading-sm\/semibold__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.heading-sm\/bold__84522 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.heading-sm\/bold__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.heading-sm\/extrabold__84522 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 800;
}
.heading-sm\/extrabold__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.heading-md\/normal__84522 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-md\/normal__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.heading-md\/medium__84522 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-md\/medium__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.heading-md\/semibold__84522 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-md\/semibold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.heading-md\/bold__84522 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-md\/bold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.heading-md\/extrabold__84522 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-md\/extrabold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.heading-lg\/normal__84522 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.heading-lg\/normal__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.heading-lg\/medium__84522 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.heading-lg\/medium__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.heading-lg\/semibold__84522 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.heading-lg\/semibold__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.heading-lg\/bold__84522 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.heading-lg\/bold__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.heading-lg\/extrabold__84522 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}
.heading-lg\/extrabold__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.heading-xl\/normal__84522 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xl\/normal__84522.fontScaling__84522 {
    font-size: 1.5rem;
  }
.heading-xl\/medium__84522 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xl\/medium__84522.fontScaling__84522 {
    font-size: 1.5rem;
  }
.heading-xl\/semibold__84522 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xl\/semibold__84522.fontScaling__84522 {
    font-size: 1.5rem;
  }
.heading-xl\/bold__84522 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xl\/bold__84522.fontScaling__84522 {
    font-size: 1.5rem;
  }
.heading-xl\/extrabold__84522 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xl\/extrabold__84522.fontScaling__84522 {
    font-size: 1.5rem;
  }
.heading-xxl\/normal__84522 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xxl\/normal__84522.fontScaling__84522 {
    font-size: 2rem;
  }
.heading-xxl\/medium__84522 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xxl\/medium__84522.fontScaling__84522 {
    font-size: 2rem;
  }
.heading-xxl\/semibold__84522 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xxl\/semibold__84522.fontScaling__84522 {
    font-size: 2rem;
  }
.heading-xxl\/bold__84522 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xxl\/bold__84522.fontScaling__84522 {
    font-size: 2rem;
  }
.heading-xxl\/extrabold__84522 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xxl\/extrabold__84522.fontScaling__84522 {
    font-size: 2rem;
  }
.eyebrow__84522 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eyebrow__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/normal__84522 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.heading-deprecated-12\/normal__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/medium__84522 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.heading-deprecated-12\/medium__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/semibold__84522 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.heading-deprecated-12\/semibold__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/bold__84522 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.heading-deprecated-12\/bold__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/extrabold__84522 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 800;
}
.heading-deprecated-12\/extrabold__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.redesign\/heading-18\/bold__84522 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/heading-18\/bold__84522.fontScaling__84522 {
    font-size: 1.125rem;
  }
.text-xxs\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
}
.text-xxs\/normal__84522.fontScaling__84522 {
    font-size: 0.625rem;
  }
.text-xxs\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
}
.text-xxs\/medium__84522.fontScaling__84522 {
    font-size: 0.625rem;
  }
.text-xxs\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
}
.text-xxs\/semibold__84522.fontScaling__84522 {
    font-size: 0.625rem;
  }
.text-xxs\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}
.text-xxs\/bold__84522.fontScaling__84522 {
    font-size: 0.625rem;
  }
.text-xs\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.text-xs\/normal__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.text-xs\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.text-xs\/medium__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.text-xs\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.text-xs\/semibold__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.text-xs\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.text-xs\/bold__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.text-sm\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.text-sm\/normal__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.text-sm\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.text-sm\/medium__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.text-sm\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.text-sm\/semibold__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.text-sm\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.text-sm\/bold__84522.fontScaling__84522 {
    font-size: 0.875rem;
  }
.text-md\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.text-md\/normal__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.text-md\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.text-md\/medium__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.text-md\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.text-md\/semibold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.text-md\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.text-md\/bold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.text-lg\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.text-lg\/normal__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.text-lg\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.text-lg\/medium__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.text-lg\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.text-lg\/semibold__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.text-lg\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.text-lg\/bold__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.redesign\/message-preview\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.redesign\/message-preview\/normal__84522.fontScaling__84522 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.redesign\/message-preview\/medium__84522.fontScaling__84522 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.redesign\/message-preview\/semibold__84522.fontScaling__84522 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/message-preview\/bold__84522.fontScaling__84522 {
    font-size: 0.9375rem;
  }
.redesign\/channel-title\/normal__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 400;
}
.redesign\/channel-title\/normal__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.redesign\/channel-title\/medium__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 500;
}
.redesign\/channel-title\/medium__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.redesign\/channel-title\/semibold__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
}
.redesign\/channel-title\/semibold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.redesign\/channel-title\/bold__84522 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 700;
}
.redesign\/channel-title\/bold__84522.fontScaling__84522 {
    font-size: 1rem;
  }
.display-sm__84522 {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.display-sm__84522.fontScaling__84522 {
    font-size: 1.25rem;
  }
.display-md__84522 {
  font-family: var(--font-headline);
  font-size: 34px;
  line-height: 1.0588235294117647;
  font-weight: 800;
}
.display-md__84522.fontScaling__84522 {
    font-size: 2.125rem;
  }
.display-lg__84522 {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 0.9545454545454546;
  font-weight: 800;
}
.display-lg__84522.fontScaling__84522 {
    font-size: 2.75rem;
  }
.code__84522 {
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.code__84522.fontScaling__84522 {
    font-size: 0.75rem;
  }
.bar__84522 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding-left: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.commandInfo__84522 {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  gap: 8px;
}
.visual-refresh .bar__84522 {
    align-items: center;
  }
.name__84522 {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--interactive-active);
}
.description__84522 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--interactive-normal);
}
.error__84522 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--red-400);
}
.actions__84522 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.bar_c590c7 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: var(--space-20);
  justify-content: space-between;
}

.small__258ba {
  width: 16px;
  height: 16px;
}

.medium__258ba {
  width: 24px;
  height: 24px;
}

.large__258ba {
  width: 40px;
  height: 40px;
}

.container__183e8 {
  display: flex;
  margin-right: 16px;
  margin-left: 16px;
  overflow: hidden;
  flex-direction: column;
}

.banner__183e8 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 8px 16px;
  padding-bottom: 16px;
  background-color: var(--background-tertiary);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.text__183e8 {
  flex-grow: 1;
  margin-left: 8px;
}

.clickable__183e8 {
  cursor: pointer;
}

.channelIcon__183e8 {
  width: 20px;
  height: 20px;
  padding: 4px;
  color: var(--channel-icon);
}

.iconCircle__183e8 {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: var(--brand-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nextIcon__183e8 {
  color: var(--interactive-active);
}

.completed__183e8 {
  color: var(--status-positive);
}

.bar_f5401d {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: var(--space-16);
  justify-content: space-between;
  border-radius: inherit;
  gap: var(--space-16);

  background: linear-gradient(90deg, rgba(229, 81, 235, 0.2) 0%, rgba(78, 58, 214, 0.2) 100%);
}

.beginning_f5401d {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  color: var(--interactive-normal);

  transition: color 0.15s linear;
}

.beginning_f5401d:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    color: var(--interactive-hover);
  }

.beginning_f5401d.selected_f5401d,
  .beginning_f5401d:focus {
    color: var(--interactive-active);
  }

.end_f5401d {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.emojiButtonContainer_f5401d {
  /* hardcoded 2px padding to match it exactly with the ChannelAttachButton pre-redesign */
  padding: 0 2px;
}

.emojiButton_f5401d {
  height: auto;
}

.visual-refresh .bar_f5401d {
    padding-left: var(--space-20);
  }

.visual-refresh .emojiButtonContainer_f5401d {
    padding: 0;
  }

.visual-refresh .emojiButton_f5401d.selected_f5401d,
  .visual-refresh .emojiButton_f5401d:active {
    color: var(--icon-primary);
  }

.clipContainer__841c8 {
  overflow: hidden;
  /* Extra space at top for animation bounce overshoot */
  padding-top: 3px;
  margin-top: -3px;
}

.container__841c8 {
  display: flex;
  flex-direction: column;
}

.replyBar__841c8,
.threadSuggestionBar__841c8 {
  background: var(--background-secondary);
  cursor: pointer;
}

.theme-dark.custom-theme-background .replyBar__841c8,
  .theme-dark.custom-theme-background .threadSuggestionBar__841c8 {
    background: var(--bg-overlay-1, var(--background-secondary));
  }

.theme-light.custom-theme-background .replyBar__841c8,
  .theme-light.custom-theme-background .threadSuggestionBar__841c8 {
    background: var(--bg-overlay-2, var(--background-secondary));
  }

.visual-refresh .clipContainer__841c8 {
    margin-top: 0;
  }

.visual-refresh .replyBar__841c8,
  .visual-refresh .threadSuggestionBar__841c8 {
    background-color: transparent;
    background-color: initial;
    border-bottom: none;
  }

.visual-refresh .text__841c8 {
    margin-left: var(--space-16);
  }

.visual-refresh .actions__841c8 {
    margin-right: var(--space-4);
  }

.replyBar__841c8 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.threadSuggestionBar__841c8 {
  display: flex;
  flex-direction: row;
  border-top: 1px solid var(--background-modifier-accent);
  padding-top: 7px;
  padding-bottom: 7px;
  /* Extra fill so bottom is filled during bounce overshoot */
  box-shadow: 0 3px 0 var(--background-secondary);
}

.text__841c8 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 16px;
}

.replyLabel__841c8 {
  flex: 1 1 auto;
}

.name__841c8 {
  font-weight: 600;
}

.actions__841c8 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.mentionButton__841c8 {
  cursor: pointer;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  padding: 8px 12px;
}

.mentionIcon__841c8 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.separator__841c8 {
  width: 1px;
  height: 20px;
  background-color: var(--background-modifier-accent);
}

.createThreadButton__841c8 {
  white-space: nowrap;
  margin-left: 8px;
  margin-right: 8px;
}

.upsellTooltipWrapper__675aa {
  box-sizing: border-box;
  max-width: 280px;
  padding: 16px;
  background-color: var(--brand-500);
  border-radius: 8px;
  box-shadow: var(--elevation-medium);
}

  .upsellTooltipWrapper__675aa:after {
    content: ' ';
    position: absolute;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent;
  }

  .upsellTooltipWrapper__675aa.caretTopCenter__675aa:after {
    left: 50%;
    bottom: 100%; /* At the top of the tooltip */
    border-bottom-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretTopRight__675aa:after {
    left: calc(100% - 16px);
    bottom: 100%; /* At the top of the tooltip */
    border-bottom-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretTopLeft__675aa:after {
    left: 16px;
    bottom: 100%; /* At the top of the tooltip */
    border-bottom-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretBottomCenter__675aa:after {
    left: 50%;
    top: 100%;
    border-top-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretBottomLeft__675aa:after {
    left: 16px;
    top: 100%;
    border-top-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretBottomRight__675aa:after {
    right: 16px;
    top: 100%;
    border-top-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretLeftCenter__675aa:after {
    right: 100%; /* To the left of the tooltip */
    top: calc(50% - 8px);
    border-right-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretLeftTop__675aa:after {
    right: 100%; /* To the left of the tooltip */
    top: 8px;
    border-right-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretRightCenter__675aa:after {
    right: -16px;
    top: calc(50% - 8px);
    border-left-color: var(--brand-500);
  }

  .upsellTooltipWrapper__675aa.caretRightTop__675aa:after {
    right: -16px;
    top: 8px;
    border-left-color: var(--brand-500);
  }

.upsellTooltipHeader__675aa,
.upsellTooltipText__675aa {
  color: var(--white-500);
  text-align: center;
}

.upsellTooltipHeader__675aa {
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.upsellButtonsContainer__675aa {
  display: flex;
  justify-content: center;
  margin: 16px auto 0;
}

.upsellButtonsAdjacent__675aa :nth-child(2) {
    margin-left: 8px;
  }

.upsellButtonsStacked__675aa {
  width: 100%;
  flex-direction: column-reverse;
}

.upsellButtonsStacked__675aa :nth-child(2) {
    margin-bottom: 8px;
  }

.fullWidthImage__675aa {
  height: auto;
  width: 100%;
  margin: 0 auto 16px;
  display: block;
}

.content__675aa {
  --text-link: white;
  --link-decoration: underline;
  text-align: center;
}

.container_e2c5b1:after {
    right: 8px !important;
  }

.container_e2c5b1:after {
    /* stylelint-disable-next-line declaration-no-important */
  }

.asset_e2c5b1 {
  width: 150px;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: auto;
}

.headerContainer_e2c5b1 {
  position: relative;
  padding-bottom: var(--spacing-12);
}

.close_e2c5b1 {
  margin-left: auto;
}

.closeIcon_e2c5b1 {
  border-radius: var(--radius-round);
  padding: var(--spacing-4);
  background-color: rgba(0, 0, 0, 0.25);
}

.closeIcon_e2c5b1:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }

.emojiButton__04eed {
  max-height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emojiButtonNormal__04eed {
  
}

.emojiButtonHovered__04eed {
  
}

.spriteContainer__04eed {
  position: relative;
  width: var(--custom-emoji-sprite-size);
  height: var(--custom-emoji-sprite-size);
  display: block;
  --custom-emoji-sprite-bg-position: calc(-1 * var(--custom-emoji-sprite-col) * var(--custom-emoji-sprite-size))
    calc(-1 * var(--custom-emoji-sprite-row) * var(--custom-emoji-sprite-size));

  --custom-emoji-sprite-bg-size: calc(20 * var(--custom-emoji-sprite-size)) calc(4 * var(--custom-emoji-sprite-size));
}

.sprite__04eed {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--custom-emoji-sprite-size);
  height: var(--custom-emoji-sprite-size);
  display: block;
}

.spriteColored__04eed {
  background-image: url(/assets/1b05b930a77fbff9.png);
  background-position: var(--custom-emoji-sprite-bg-position);
  background-size: var(--custom-emoji-sprite-bg-size);
}

.spriteGreyscale__04eed {
  -webkit-mask-image: url(/assets/decf85f79e02d276.png);
          mask-image: url(/assets/decf85f79e02d276.png);
  -webkit-mask-position: var(--custom-emoji-sprite-bg-position);
          mask-position: var(--custom-emoji-sprite-bg-position);
  -webkit-mask-size: var(--custom-emoji-sprite-bg-size);
          mask-size: var(--custom-emoji-sprite-bg-size);
  background-color: var(--interactive-normal);
}

.spritePremiumColored__04eed {
  -webkit-mask-image: url(/assets/decf85f79e02d276.png);
          mask-image: url(/assets/decf85f79e02d276.png);
  -webkit-mask-position: var(--custom-emoji-sprite-bg-position);
          mask-position: var(--custom-emoji-sprite-bg-position);
  -webkit-mask-size: var(--custom-emoji-sprite-bg-size);
          mask-size: var(--custom-emoji-sprite-bg-size);
}

.spritePremiumColored__04eed.reducedMotion__04eed {
    background-color: var(--premium-tier-2-purple-for-gradients-2);
  }

.spritePremiumColored__04eed:not(.reducedMotion__04eed) {
    animation: spritePremiumPulsing__04eed 2s infinite;
  }

@keyframes spritePremiumPulsing__04eed {
  0% {
    background-color: var(--premium-tier-2-purple);
  }

  50% {
    background-color: var(--premium-tier-2-purple-for-gradients-2);
  }

  100% {
    background-color: var(--premium-tier-2-purple);
  }
}

.inactive__04eed {
  opacity: 0;
}

.active__04eed {
  opacity: 1;
}

.premiumTooltip__04eed {
  max-width: 316px;
  border-radius: 4px;
}

.premiumTooltipContainer__04eed {
  overflow: visible;
}

.premiumTooltipContainer__04eed {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px 4px;
  align-items: center;
  overflow: visible;
}

.premiumUnlockAnimation__04eed {
  position: absolute;
  z-index: 100;
}

.premiumUnlockAnimation__04eed.reducedMotion__04eed {
    height: 40px;
    width: 40px;
    left: 0;
    top: 6px;
  }

.premiumUnlockAnimation__04eed:not(.reducedMotion__04eed) {
    animation: shrink__04eed 2s forwards;
  }

@keyframes shrink__04eed {
  0% {
    height: 76px;
    width: 76px;
    left: -26px;
    top: -26px;
  }

  75% {
    height: 76px;
    width: 76px;
    left: -26px;
    top: -26px;
  }

  100% {
    height: 40px;
    width: 40px;
    left: 0;
    top: 6px;
  }
}

.premiumTooltipText__04eed {
  padding-left: 32px;
}

.lottieIcon__5eb9b :not(defs *)[fill][fill-opacity] {
  fill: var(--__lottieIconColor, var(--interactive-normal));
}

.lottieIcon__5eb9b :not(defs *)[stroke][stroke-opacity] {
  stroke: var(--__lottieIconColor, var(--interactive-normal));
}

.lottieIcon__5eb9b svg {
  transform: none !important;
}

.lottieIcon__5eb9b svg {
  /*
    We need the !important here because the lottie library sets a transform: translate3d(0px, 0px, 0px) style that
    we need to make sure gets removed. The translate3d style is there to enable hardware acceleration to improve
    rendering performance, but has the consequence of introducing blurriness to the lottie.
  */
  /* stylelint-disable-next-line declaration-no-important */
}

.container__1e3f8 {
  background-color: var(--brand-500);
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  border-radius: 8px;
  padding: 0 16px;
}

.body__1e3f8 {
  padding-top: 56px;
  max-width: 248px;
}

.pointer__1e3f8 {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-width: 10px;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-top-color: var(--brand-500);
}

div.popoutCloseButton__1e3f8 {
  background-color: hsl(var(--black-500-hsl) / 0.25);
}

div.popoutCloseButton__1e3f8:hover {
    background-color: hsl(var(--black-500-hsl) / 0.25);
  }

.popoutTarget__1e3f8 {
  width: 0;
  height: 0;
  position: absolute;
  left: 20px;
  top: -20px;
}

.text__1e3f8 {
  /* Color needs to stay white and not change color
   * since the background will always be brand color */
  /* stylelint-disable-next-line color-no-hex */
  color: #ffffff;
  padding-top: 8px;
}

.image__1e3f8 {
  position: absolute;
  width: 95px;
  top: -75px;
}

.buttonContainer__1e3f8 {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 16px;
}

.ctaButton__1e3f8 {
  flex: 1;
}

.closeButton__1e3f8 {
  position: absolute;
  top: 10px;
  right: 10px;
}

.container_eaf2fb {
  display: flex;
}

.iconContainer_eaf2fb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonLayer_eaf2fb {
  position: relative;
}

.decorativeLayer_eaf2fb {
  position: fixed;
  transform: scale(1);
  pointer-events: none;
  display: none;
}

.decorativeLayerActive_eaf2fb {
  display: block;
}

.noPointerEvents_eaf2fb {
  pointer-events: none;
}

.giftIconButton_eaf2fb {
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: -8px;
}

.theme-light .giftIconButtonActive_eaf2fb {
    background-color: var(--background-secondary);
  }

.theme-dark .giftIconButtonActive_eaf2fb {
    background-color: var(--background-accent);
  }

.container__5a2d9 {
  background-color: var(--brand-500);
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  border-radius: 8px;
  padding: 16px;
  max-width: 280px;
}

.body__5a2d9 {
  margin-top: 8px;
}

.pointer__5a2d9 {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-width: 10px;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-top-color: var(--brand-500);
}

.button__5a2d9 {
  margin: 16px;
  width: 100%;
}

.popoutTarget__5a2d9 {
  width: 0;
  height: 0;
  position: absolute;
  left: 20px;
}

.text__5a2d9 {
  /* Color needs to stay white and not change color
   * since the background will always be brand color */
  /* stylelint-disable-next-line color-no-hex */
  color: #ffffff;
  padding-top: 4px;
}

.coachmark__5a2d9 {
  width: 170px;
  /* 1/2 of asset height (124px / 2 = 62px) + container padding (16px) */
  margin-top: -78px;
}

.dmButtonContainer__5a2d9 {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 16px;
  gap: 4px;
}

.dmButton__5a2d9 {
  flex: 1;
}

.closeButton__5a2d9 {
  height: 25px;
  width: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.closeIcon__5a2d9 {
  color: var(--white-500);
  padding: 5px;
}

.container_c0c49a {
  display: flex;
}

.iconContainer_c0c49a {
  pointer-events: none;
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-refresh .iconContainer_c0c49a {
    width: 20px;
    height: 20px;
  }

.giftBoxIcon_c0c49a {
  width: 32px;
  height: auto;
  position: absolute;
  /* (32 (icon length) - 24 (container length)) / 2 */
  left: -4px;
  bottom: -4px;
}

.visual-refresh .giftBoxIcon_c0c49a {
    /* (32 (icon length) - 20 (container length)) / 2 */
    left: -6px;
    bottom: -6px;
  }

.trinketsIcon_c0c49a {
  position: relative;
  z-index: 4;
}

.trinketsDecoration_c0c49a {
  position: absolute;
  width: 130%;
  height: 130%;
  top: -15%;
  left: -15%;
  transform: scale(1.3);
  z-index: 3;
}

/* The animation needs to be slightly smaller on old desktop to avoid triggering overflow: scroll on the chat box */

.visual-refresh .trinketsDecoration_c0c49a {
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    transform: scale(1.4);
  }

.trinketsGlow_c0c49a {
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  transform: scale(1.2);
  z-index: 1;
}

.visual-refresh .trinketsGlow_c0c49a {
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
  }

.trinketsGlowMask_c0c49a {
  width: 126%;
  height: 126%;
  top: -13%;
  left: -13%;
  position: absolute;
  border-radius: var(--radius-round);
  /* Matching .themedBackground from ChannelTextArea */
  background: var(--bg-overlay-3, var(--channeltextarea-background));
  z-index: 2;
}

.visual-refresh .trinketsGlowMask_c0c49a {
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    background: var(--channeltextarea-background);
  }

.generalHeading__892e3 {
  color: var(--primary-130);
  padding: 16px 12px 0 16px;
  max-width: 350px;
}

.generalBodyCopy__892e3 {
  color: var(--primary-130);
  padding: 8px 0 8px 16px;
  max-width: 190px;
}

.learnMore__892e3 {
  color: var(--primary-130);
}

.learnMore__892e3 p {
    margin-bottom: 0;
  }

.learnMore__892e3 p:first-of-type {
      margin-top: 0;
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

.learnMore__892e3:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.learnMoreResendUnderlinedText__892e3,
.learnMoreResendUnderlinedText__892e3:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shareNitroResendCopySuffix__892e3 {
  margin-left: 10;
}

.generalButtonContainer__892e3 {
  padding: 16px 14px;
}

.generalBodyContainer__892e3 {
  position: relative;
  min-height: 190px;
  background: linear-gradient(
    100.98deg,
    var(--premium-tier-2-purple-for-gradients) 25.21%,
    var(--premium-tier-2-purple-for-gradients-2) 62.43%,
    var(--premium-tier-2-pink-for-gradients) 95.57%
  );
  border-radius: 4px;
  overflow: hidden;
}

.innerContent__892e3 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.birthdayBackgroundImage__892e3 {
  position: absolute;
  bottom: -45px;
  left: -70px;
}

.confirmationBirthdayBody__892e3,
.confirmationBody__892e3 {
  position: relative;
}

.confirmationBody__892e3 {
  min-height: 136px;
}

.confirmationBirthdayBody__892e3 {
  min-height: 190px;
}

.confirmationHeading__892e3 {
  padding: 20px 12px 0 16px;
  max-width: 350px;
}

.confirmationBodyCopy__892e3 {
  padding: 8px 0 8px 16px;
  max-width: 190px;
}

.confirmationBodySeparator__892e3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--background-secondary-alt);
  margin: 0;
}

.confirmationButtonContainer__892e3 {
  padding: 16px 16px 0;
}

.confirmationCancelCopy__892e3 {
  cursor: pointer;
}

.confirmationCancelButtonContainer__892e3 {
  display: flex;
  justify-content: center;
  padding-top: 21px;
  padding-bottom: 26px;
}

.generalContainer__892e3,
.confirmationContainer__892e3 {
  background-color: var(--background-primary);
  height: 100%;
  position: relative;
  top: -22px;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
  width: 406px;
}

.generalShareButton__892e3,
.confirmationShareButton__892e3 {
  width: 100%;
}

.generalBodyImage__892e3,
.confirmationImage__892e3 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.closeButton__892e3 {
  position: absolute;
  right: 8px;
  top: 16px;
}

.closeButton__892e3 path {
    fill: var(--text-normal);
  }

.closeButton__892e3:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Light Theme */

/* Dark Theme */

.upload_aa605f {
  display: inline-flex;
  flex-direction: column;
  background: var(--bg-overlay-5, var(--background-secondary));
  border-radius: 4px;
  margin: 0;
  padding: 8px;
  position: relative;
  min-width: 200px;
  max-width: 200px;
  min-height: 200px;
  max-height: 200px;
}

.upload_aa605f.sizeClip_aa605f {
  max-width: 400px;
  min-width: 320px;
  flex: 1;
  padding: 0;
  max-height: 400px;
  background-color: var(--background-primary);
}

.visual-refresh .upload_aa605f {
    background-color: var(--background-surface-high);
    border: 1px solid var(--border-normal);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-low);
  }

.visual-refresh .upload_aa605f.sizeClip_aa605f {
    background-color: var(--background-mod-subtle);
  }

.uploadContainer_aa605f {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;
}

.uploadContainer_aa605f:hover .smallActionBar_aa605f {
    opacity: 1;
  }

.uploadContainer_aa605f:focus-within .smallActionBar_aa605f {
    opacity: 1;
  }

.actionBarContainer_aa605f {
  position: absolute;
  top: 0;
  right: 0;
}

.actionBar_aa605f {
  position: absolute;
  right: 0;
  z-index: 1;
  transform: translate(25%, -25%);
  padding: 0;
}

.smallActionBar_aa605f {
  opacity: 0;
}

.miniPopover_aa605f {
  height: 24px;
  align-items: center;
}

.avatar_ec58fe {
  flex-shrink: 0;
}

.memberListItem_ec58fe {
  padding: 4px 8px;
  margin: 8px -8px;
  border-radius: 4px;
}

.memberListItem_ec58fe:last-child {
    margin-bottom: 4px;
  }

.memberListItem_ec58fe:not(.popoutDisabled_ec58fe):hover {
    cursor: pointer;
  }

.memberListItemTag_ec58fe {
  margin-left: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.username_ec58fe {
  font-weight: 600;
}

.memberListItem_ec58fe:not(.popoutDisabled_ec58fe):hover {
  background-color: var(--background-tertiary);
}

.container_b9f75c {
  background: var(--background-secondary);

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;

  padding: var(--spacing-12);
  width: 100%;
}

.textSection_b9f75c {
  flex: 1;
  margin-left: var(--spacing-12);
}

.actionBarIcon_a7e304 {
  width: 20px;
  height: 20px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

/* to censor content marked as spoilers */

.filenameContainer__41ea0 {
  margin-top: auto;
}

.filename__41ea0 {
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mediaContainer__41ea0 {
  margin-top: auto;
  position: relative;
  min-height: 0;
}

.mediaContainer__41ea0 > div:not([aria-expanded='false']),
.mediaContainer__41ea0 > div:not([aria-expanded='false']) > div {
  height: 100%;
}

.tags__41ea0 {
  position: absolute;
  left: 3px;
  bottom: 6px;
}

.altTag__41ea0 {
  background: var(--header-secondary);
  margin-right: 4px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  padding: 3px;
  border-radius: 3px;
  z-index: 1;
}

.spoilerContainer__41ea0 {
  height: 100%;
}

.spoilerWrapper__41ea0 {
  display: flex;
  justify-content: center;
  height: 100%;
}

.media__41ea0 {
  border-radius: 3px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.visual-refresh .media__41ea0 {
    border-radius: var(--radius-md);
  }

.media__41ea0.sizeClip__41ea0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  aspect-ratio: 16/9;
}

.clickableMedia__41ea0 {
  cursor: pointer;
}

.spoiler__41ea0 {
  filter: blur(var(--custom-channel-attachment-upload-spoiler-blur-radius));
  pointer-events: none;
}

.icon__41ea0 {
  height: 144px;
  background-repeat: no-repeat;
  background-position: center;
}

.icon__41ea0.imageSmall__41ea0 {
    height: var(--custom-channel-attachment-upload-mini-attachment-size);
  }

.icon__41ea0.video__41ea0 {
    background-image: url(/assets/98178bd2173d947a.svg);
  }

.icon__41ea0.acrobat__41ea0 {
    background-image: url(/assets/a42338c030af6d9c.svg);
  }

.icon__41ea0.ae__41ea0 {
    background-image: url(/assets/88b289225ff6142a.svg);
  }

.icon__41ea0.sketch__41ea0 {
    background-image: url(/assets/c9f0992f0ab98d49.svg);
  }

.icon__41ea0.ai__41ea0 {
    background-image: url(/assets/93636da24d7ab467.svg);
  }

.icon__41ea0.archive__41ea0 {
    background-image: url(/assets/f89b66e97ea52ba7.svg);
  }

.icon__41ea0.code__41ea0 {
    background-image: url(/assets/f4bad77442422ded.svg);
  }

.icon__41ea0.document__41ea0 {
    background-image: url(/assets/9ebe3ef63aafee84.svg);
  }

.icon__41ea0.ps__41ea0,
  .icon__41ea0.photoshop__41ea0 {
    background-image: url(/assets/1084490cf680dd7c.svg);
  }

.icon__41ea0.spreadsheet__41ea0 {
    background-image: url(/assets/b8ca4488a6d443bc.svg);
  }

.icon__41ea0.webcode__41ea0 {
    background-image: url(/assets/6e688b0c124e0ca8.svg);
  }

.icon__41ea0.audio__41ea0 {
    background-image: url(/assets/a6db1d05d35f13d0.svg);
  }

.icon__41ea0.unknown__41ea0 {
    background-image: url(/assets/94660b205108a49f.svg);
  }

.attachmentItemSmall__41ea0 {
  min-width: var(--custom-channel-attachment-upload-mini-attachment-size);
  min-height: var(--custom-channel-attachment-upload-mini-attachment-size);
  max-width: var(--custom-channel-attachment-upload-mini-attachment-size);
  max-height: var(--custom-channel-attachment-upload-mini-attachment-size);
  padding: 0;
  background-color: transparent;
  background-color: initial;
}

.imageSmall__41ea0 {
  height: var(--custom-channel-attachment-upload-mini-attachment-size);
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}

.actionBarIcon__41ea0 {
  width: 16px;
  height: 16px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.action__41ea0 {
  min-width: 18px;
  height: 16px;
  padding: 4px;
}

.clipsBadge__41ea0 {
  position: absolute;
  top: 8px;
  left: 8px;
}

.clipsFooter__41ea0 {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.theme-dark .altTag__41ea0 {
    color: black;
    mix-blend-mode: screen;
  }

.theme-light .altTag__41ea0 {
    color: white;
    mix-blend-mode: multiply;
  }

.emptyOption_b088b0 {
  border: 2px dashed var(--header-secondary);
  border-radius: 8px;
}

.emptyOptionActive_b088b0 {
  border-color: var(--text-link);
}

.clickContainer_b088b0 {
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
}

.commandOptionContainer_b088b0 {
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 80%;
}

.optionName_b088b0 {
  position: absolute;
  right: 8px;
  padding: 2px 6px;
  background-color: var(--background-tertiary);
  border-radius: 4px;
  color: var(--text-normal);
}

.optionNameActive_b088b0 {
  color: var(--text-link);
}

.optionIcon_b088b0 {
  height: 100px;
}

.optionHelp_b088b0 {
  text-align: center;
}

.fileInput_b088b0 {
  display: none;
}

.channelAttachmentArea_b77158 {
  display: flex;
  gap: 24px;
  margin: 0 0 2px 6px;
  padding: 20px 10px 10px;
  overflow-x: auto;
}

  .channelAttachmentArea_b77158:last-child {
    padding-right: 30px;
  }

.visual-refresh .channelAttachmentArea_b77158 {
    background-color: var(--background-base-low);
    margin: 0;
  }

.divider_b77158 {
  margin-left: 16px;
}

.root__6c5a1 {
  background: var(--background-secondary);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  max-width: 120px;
}

.text__6c5a1 {
  margin-left: 4px;
}

.premium__6c5a1 {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.iconOnly__6c5a1 {
  cursor: pointer;
  color: var(--text-normal);
}

.characterCount__795fb {
  align-items: flex-end;
  bottom: 10px;
  color: var(--text-normal);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 14px;
}

.premiumFlair__795fb {
  color: var(--interactive-normal);
}

.premiumFlair__795fb:not(:last-child) {
    margin-right: 4px;
  }

.visual-refresh-chat-input .characterCount__795fb {
    position: relative;
    bottom: auto;
    bottom: initial;
    right: auto;
    right: initial;
    border-right: 1px solid var(--border-subtle);
    padding-right: var(--space-16);
    margin-right: var(--space-8);
  }

.visual-refresh-chat-input .premiumFlair__795fb {
    color: var(--icon-secondary);
  }

.visual-refresh-chat-input .premiumFlair__795fb:not(:last-child) {
      margin-right: var(--space-8);
    }

.flairContainer__795fb {
  display: flex;
  align-items: center;
  height: 24px;
}

.upsell__795fb {
  margin-top: 8px;
}

.container_be506c {
  margin: 8px;
  margin-bottom: 0;
}

.toolbar_bba883 {
  background-color: var(--primary-800);
  color: var(--primary-300);
  border-radius: 4px;
  box-shadow: var(--elevation-high);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all;
  position: absolute;
}

  .toolbar_bba883:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--primary-800);
    bottom: -8px;
    content: '';
    height: 0;
    left: calc(50% - 8px);
    position: absolute;
    width: 0;
  }

.buttons_bba883 {
  display: flex;
  flex-direction: row;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
}

.staticToolbar_bba883 {
  display: flex;
  border-radius: 4px 4px 0 0;
  justify-content: space-between;
}

.staticToolbar_bba883 .button_bba883:first-of-type {
    border-top-left-radius: 4px;
  }

.theme-dark .staticToolbar_bba883 {
  background-color: var(--background-secondary-alt);
}

.theme-light .staticToolbar_bba883 {
  background-color: var(--background-tertiary);
}

.staticButtons_bba883 {
  display: flex;
  border-radius: 4px 4px 0 0;
}

.emojiButton_bba883 {
  padding-right: 8px;
}

.divider_bba883 {
  border-left: 1px solid hsl(var(--white-500-hsl) / 0.06);
  display: inline-block;
  height: 20px;
  margin: 6px;
}

.button_bba883 {
  border-radius: 0;
  padding: 0;
  width: 32px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-300);
}

.button_bba883:hover {
    background-color: var(--background-modifier-hover);
    color: var(--primary-100);
  }

.button_bba883[aria-pressed='true'] {
    background-color: var(--background-modifier-selected);
    color: var(--white-500);
  }

.buttonInner_bba883 {
  height: 20px;
}

.icon_bba883 {
  height: 20px;
  color: currentColor;
  width: 20px;
}

.staticIcon_bba883 {
  color: var(--interactive-normal);
}

.staticDivider_bba883 {
  border-left: 1px solid var(--background-modifier-accent);
}

html:not(.visual-refresh-chat-input) .inputInner_b1f01d {
    background: var(--input-background);
    border-radius: 3px;
  }

.visual-refresh-chat-input .input_b1f01d, .visual-refresh.custom-theme-background .input_b1f01d {
    background: var(--input-background);
  }

.editor_b1f01d {
  --channel-text-area-placeholder: var(--text-muted);
  font-size: 14px;
  min-height: 88px;
}

.container_b1f01d {
  padding: 16px;

  border-radius: 8px;
  background: var(--bg-base-primary);

  box-shadow: var(--elevation-high);
  width: 300px;

  /* With a reply box that has been shifted already to be flush with the left edge, */
}

.container_b1f01d.fullSize_b1f01d.activity_b1f01d {
      width: 400px;
    }

/* to further nudge the reply box so it is centered on the profile */

.container_b1f01d.panel_b1f01d {
    width: 276px;

    /* Do not need an override for avatar; reply box left aligned to avatar already has correct positioning */
    /* Do not need an override for activity; reply box left aligned to activity already has correct positioning */
  }

.container_b1f01d.panel_b1f01d.status_b1f01d {
      /* -106px to be flush with left edge, then +16px ((340px panelWidth - 308px replyBoxWidth)/2) to shift right */
      margin-left: -90px;
    }

/* use half the difference in width of the reply box vs the profile */

.container_b1f01d.biteSize_b1f01d.status_b1f01d {
      /* -106px to be flush with left edge, then -16px ((332px biteSizeWidth - 300px replyBoxWidth)/2) to shift left */
      margin-left: -122px;
    }

.container_b1f01d.biteSize_b1f01d.avatar_b1f01d {
      /* -16px to be flush with left edge, then -16px ((332px biteSizeWidth - 300px replyBoxWidth)/2) to shift left */
      margin-left: -32px;
    }

.container_b1f01d.biteSize_b1f01d.activity_b1f01d {
      /* -16px to be flush with left edge, then -16px ((332px biteSizeWidth - 300px replyBoxWidth)/2) to shift left */
      margin-left: -32px;
    }

/* Have to account for the 4px padding on themed profiles when positioning the reply popout */

.container_b1f01d.customProfileTheme_b1f01d.biteSize_b1f01d {

      /* Do not need an override for activity; reply box left aligned to activity already has correct positioning */
    }

.container_b1f01d.customProfileTheme_b1f01d.biteSize_b1f01d.status_b1f01d {
        /* -106px to be flush with left edge, then -12px ((332px biteSizeWidth - 300px replyBoxWidth - 8px padding)/2) to shift left */
        margin-left: -118px;
      }

.container_b1f01d.customProfileTheme_b1f01d.biteSize_b1f01d.avatar_b1f01d {
        /* -16px to be flush with left edge, then -12px ((332px biteSizeWidth - 300px replyBoxWidth - 8px padding)/2) to shift left */
        margin-left: -28px;
      }

.activityCoachmark_a2f9d3 {
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
}

.profileCoachmark_a2f9d3 {
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 54px 8px 12px;
}

.tooltipHeader_a2f9d3 {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.profileImage_a2f9d3 {
  position: absolute;
  left: 27px;
  top: -25px;
}

.popover_c97e55 {
  z-index: 1;
  position: absolute;
  height: auto;
  height: initial;
  border-radius: 100px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  top: -16px;
  right: min(8px, calc(50% - 29px));
  opacity: 0;
  pointer-events: none;
}

  .popover_c97e55.visible_c97e55,
  .popover_c97e55:focus-within {
    opacity: 1;
    pointer-events: all;
  }

:not(.keyboard-mode).full-motion .popover_c97e55.visible_c97e55,
  :not(.keyboard-mode).full-motion .popover_c97e55:focus-within {
    opacity: 0;
    animation: hoverIn_c97e55 150ms ease forwards;
  }

:not(.keyboard-mode).full-motion .popover_c97e55.visible_c97e55.expandable_c97e55, :not(.keyboard-mode).full-motion .popover_c97e55:focus-within.expandable_c97e55 {
      animation-delay: 300ms;
    }

@keyframes hoverIn_c97e55 {
  0% {
    top: -14px;
    opacity: 0;
  }

  100% {
    top: -16px;
    opacity: 1;
  }
}

.button_c97e55 {
  height: auto;
  height: initial;
  min-width: 0;
  min-width: initial;
  padding: 4px;
}

.button_c97e55.left_c97e55 {
    padding-left: 6px;
    border-radius: 100px 6px 6px 100px;
  }

.button_c97e55.right_c97e55 {
    padding-right: 6px;
    border-radius: 6px 100px 100px 6px;
  }

.button_c97e55:hover {
    background: var(--background-modifier-hover);
  }

.button_c97e55:hover .icon_c97e55 {
      fill: var(--interactive-hover);
    }

.button_c97e55:active {
    background: var(--background-modifier-active);
  }

.button_c97e55:active .icon_c97e55 {
      fill: var(--interactive-active);
    }

.container_ab8609 {
  --custom-status-bubble-background-color: var(--bg-surface-raised);
  --custom-status-bubble-background: var(--custom-status-bubble-background-color);

  position: absolute;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 2;
}

  .custom-profile-theme .container_ab8609 {
    --custom-status-bubble-background-color: var(--bg-surface-overlay);
  }

  .theme-dark .container_ab8609 {
    --custom-status-bubble-overlay-color: 255 255 255;
  }

  .theme-light .container_ab8609 {
    --custom-status-bubble-overlay-color: 0 0 0;
  }

  .container_ab8609.editable_ab8609:hover {
    --custom-status-bubble-background: linear-gradient(
        rgb(var(--custom-status-bubble-overlay-color) / 0.05),
        rgb(var(--custom-status-bubble-overlay-color) / 0.05)
      ),
      var(--custom-status-bubble-background-color);
  }

  .container_ab8609.hoisted_ab8609 {
    z-index: 4;
  }

  .container_ab8609.biteSize_ab8609 {
    top: calc(var(--custom-user-profile-banner-height) - 7px);
    left: 105px;
  }

  .container_ab8609.fullSize_ab8609 {
    top: -10px;
    left: 161px;
  }

  .container_ab8609.panel_ab8609 {
    top: calc(var(--custom-user-profile-banner-height) - 7px);
    left: 109px;
  }

.referenceContainer_ab8609 {
  position: relative;
  visibility: hidden;
  pointer-events: none;
}

.referenceContainer_ab8609.biteSize_ab8609 {
    margin-top: -10px;
    margin-left: 109px;
    margin-right: 12px;
  }

.custom-profile-theme .referenceContainer_ab8609.biteSize_ab8609 {
      margin-left: 105px;
      margin-right: 8px;
    }

.referenceContainer_ab8609.fullSize_ab8609 {
    margin-top: -10px;
    margin-left: 161px;
    margin-right: 16px;
  }

.referenceContainer_ab8609.panel_ab8609 {
    margin-top: -10px;
    margin-left: 109px;
    margin-right: 8px;
  }

.referenceContainer_ab8609 > .outer_ab8609 > .inner_ab8609 > .content_ab8609 {
    max-width: 155px;
  }

.referenceContainer_ab8609 > .outer_ab8609 > .inner_ab8609 > .content_ab8609.unclamped_ab8609 {
      position: absolute;
      top: 0;
    }

.outer_ab8609 {
  box-sizing: border-box;
  min-width: 42px;
  max-width: 181px;
  overflow: hidden;
  background: var(--custom-status-bubble-background);
  box-shadow: var(--shadow-low);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
}

.outer_ab8609:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 10px;
    box-sizing: border-box;
    box-shadow: inherit;
    background: inherit;
    border: inherit;
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }

.outer_ab8609:after {
    content: '';
    position: absolute;
    top: -15px;
    left: -3px;
    box-sizing: border-box;
    box-shadow: inherit;
    background: inherit;
    border: inherit;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }

.theme-dark .outer_ab8609 {
    border: 1px solid var(--border-faint);
  }

.custom-profile-theme.theme-dark .outer_ab8609 {
    border: 1px solid var(--border-strong);
  }

.inner_ab8609 {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--custom-status-bubble-background);
  margin: 0 auto;
  padding: 8px 12px;
  font-size: medium;
  font-size: initial; /* Ignore font scaling */
  word-break: break-word;
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.inner_ab8609.clickable_ab8609 {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.content_ab8609 {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-normal);
}

/* Colors the ellipsis for clamped text */

.content_ab8609.unclamped_ab8609 {
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-line-clamp: 9;
  }

.ring_ab8609 {
  border-radius: var(--radius-lg);
}

.statusText_ab8609 {
  color: var(--text-normal);
}

.statusEmoji_ab8609:not(:has(+ .statusText_ab8609)) {
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
  }

.statusEmoji_ab8609:has(+ .statusText_ab8609) {
    height: 16px;
    width: 16px;
    margin-right: 4px;
  }

.statusEmoji_ab8609 + .statusText_ab8609 {
    display: inline;
  }

.addStatusPrompt_ab8609 {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: inline;
  color: var(--text-muted);
  vertical-align: middle;
}

.addStatusIcon_ab8609 {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: inline;
  margin-right: 4px;
  fill: var(--text-muted);
  vertical-align: middle;
}

.outer_ab8609:hover .addStatusPrompt_ab8609 {
    color: var(--text-normal);
  }

.outer_ab8609:hover .addStatusIconColor_ab8609 {
    fill: var(--text-normal);
  }

.section_bf424d {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

  .section_bf424d:empty,
  .section_bf424d:has(> .headings_bf424d:only-child) {
    display: none;
  }

.list__20827 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

:where(.contentImage__42bf5) {
  border-radius: var(--radius-xs);
  -o-object-fit: contain;
     object-fit: contain;
}

.clickable_ef9ae7 {
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}

  .clickable_ef9ae7:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: var(--text-normal);
  }

.imagePosition_ef9ae7 {
  position: relative;
  overflow: visible;
  display: flex;
  height: -moz-max-content;
  height: max-content;
  align-items: center;
}

.aspectRatio_ef9ae7 {
  aspect-ratio: 1 / 1;
}

.aspectRatio_ef9ae7.crunchyroll_ef9ae7 {
    aspect-ratio: 2 / 3;
  }

.imageContainer_ef9ae7 {
  display: flex;
  justify-content: center;
  border-radius: var(--radius-xs);
}

.imageContainer_ef9ae7 .contentImage_ef9ae7 {
    min-width: 60px;
  }

.smallImageContainer_ef9ae7 {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  flex-shrink: 0;
}

.contentImage_ef9ae7 {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}

.card__39ec2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow: visible;
  position: relative;
  border: none;
}

  .card__39ec2.hoisted__39ec2 {
    background: linear-gradient(rgb(var(--bg-overlay-color) / 0.4), rgb(var(--bg-overlay-color) / 0.4)),
      linear-gradient(var(--profile-gradient-end), var(--profile-gradient-end)) !important;
  }

  .card__39ec2.hoisted__39ec2 {
    z-index: 4;
    /* stylelint-disable declaration-no-important, discord/var-validator */
    /* stylelint-enable declaration-no-important, discord/var-validator */
    pointer-events: none;
  }

.header__39ec2 {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.headerText__39ec2 {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
}

.headerContextMenu__39ec2:empty {
    display: none;
  }

.headerContextMenu__39ec2.absolute__39ec2 {
    position: absolute;
    display: inline-flex;
    align-self: flex-end;
  }

.headerContextMenu__39ec2.absolute__39ec2 ~ .body__39ec2 > .content__39ec2 > .details__39ec2 {
      margin-right: 24px;
    }

.platformIcon__39ec2 {
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: var(--icon-muted);
  width: 12px;
  height: 12px;
}

.body__39ec2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toolbarContainer__39ec2 {
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  border: none;
}

.content__39ec2 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.content__39ec2.fullSize__39ec2 {
    gap: 12px;
  }

.details__39ec2 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 4px;
  width: 100%;
}

.actions__39ec2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

.actions__39ec2.fullSize__39ec2 {
    flex-wrap: nowrap;
    margin: 0 0 0 20px;
  }

.actions__39ec2 .primaryButton__39ec2 {
    flex: 1;
  }

.actions__39ec2:has(> .customButton__39ec2) {
    flex-wrap: wrap;
    align-content: center;
  }

.actions__39ec2:has(> .customButton__39ec2) .customButton__39ec2 {
      flex: 1 1 auto;
      min-width: calc(50% - 8px);
    }

.actions__39ec2:empty {
    display: none;
  }

.badges__39ec2 {
  flex-wrap: wrap;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 0;
}

.clickableContainer__39ec2 {
  cursor: pointer;
  display: contents;
}

.clickableContainer__39ec2:hover > .card__39ec2 {
      background: var(--bg-mod-subtle);
    }

.custom-profile-theme .clickableContainer__39ec2:hover > .card__39ec2 {
        /* stylelint-disable discord/var-validator */
        background: linear-gradient(
            rgb(var(--bg-overlay-color-inverse) / 0.05),
            rgb(var(--bg-overlay-color-inverse) / 0.05)
          ),
          var(--profile-gradient-end);
        /* stylelint-enable discord/var-validator */
      }

.clickableImage__39ec2:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-500);
    border-radius: var(--radius-xs);
    opacity: 0;
    pointer-events: none;
  }

.full-motion .clickableImage__39ec2:after {
      transition: opacity var(--custom-button-transition-duration) ease;
    }

.clickableImage__39ec2:hover:after {
    opacity: 0.2;
  }

.clickableText__39ec2 {
  cursor: pointer;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}

.clickableText__39ec2:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: var(--text-normal);
  }

.inline__39ec2 {
  display: inline;
}

.gameState__39ec2 {
  display: flex;
  gap: 4px;
}

.guildIcon__39ec2 {
  border-radius: var(--radius-xs);
}

.voiceChannel__39ec2 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.voiceChannelText__39ec2 {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 2px;
}

.voiceChannelText__39ec2 .clickableText__39ec2 {
    overflow: hidden;
  }

.voiceChannelText__39ec2 .voiceIcon__39ec2 {
    flex-shrink: 0;
  }

.voiceChannelHeading__39ec2 {
  overflow: hidden;
  word-break: break-all;
}

.voiceChannelHeading__39ec2 .voiceIcon__39ec2 {
    position: relative;
    top: 1px;
    margin-right: 2px;
  }

.voiceChannelDivider__39ec2 {
  height: 1px;
  width: 100%;
  /* stylelint-disable-next-line discord/var-validator */
  background-color: var(--profile-body-divider-color);
}

.contextMenu__39ec2 {
  display: flex;
  cursor: pointer;
  margin-right: 4px;
}

.container__8e51c {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text__8e51c {
  font-family: var(--font-code);
}

.bar__8e51c {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background-color: var(--interactive-muted);
}

.progress__8e51c {
  height: inherit;
  border-radius: inherit;
  min-width: 4px;
  background-color: var(--interactive-active);
}

.container__0f2e8 {
  display: flex;
  box-sizing: border-box;
  position: relative;

  margin-left: 8px;
  margin-top: 8px;
  /*
  we have to do this instead of setting a margin-right 8px because some
  devices have a bigger scroll bar pushing the card further in
  */
  max-width: 224px;
  height: 64px;
  padding: 8px;
  background: var(--bg-overlay-3, var(--background-primary));
  border-radius: var(--radius-md);
  gap: 8px;

  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

  .container__0f2e8:hover {
    background: var(--bg-overlay-5, var(--background-modifier-hover));
  }

  .container__0f2e8:hover .contentTitle__0f2e8 {
      color: var(--interactive-hover);
    }

  .container__0f2e8:hover .reply__0f2e8 {
      opacity: 1;
    }

  .container__0f2e8:hover .additionalParticipantBadge__0f2e8 {
      background: var(--bg-overlay-4, var(--background-accent));
    }

.visual-refresh .container__0f2e8 {
    background: var(--bg-overlay-3, var(--card-secondary-bg));
    max-width: calc(var(--custom-member-list-width) - 16px);
  }

.openOnHover__0f2e8 {
  cursor: auto;
}

.reply__0f2e8 {
  position: absolute;
  top: 4px;
  right: 8px;
  margin: auto;
  opacity: 0;

  height: 24px;
  width: 24px;
  background: var(--background-primary);
  border: 1px solid var(--background-secondary);
  border-radius: var(--radius-xs);

  display: flex;
  align-items: center;
  justify-content: center;
}

.reply__0f2e8:hover .icon__0f2e8 {
      color: var(--interactive-hover);
    }

.icon__0f2e8 {
  height: 16px;
  display: block;
  color: var(--interactive-normal);
  -o-object-fit: contain;
     object-fit: contain;
}

.selected__0f2e8 {
  background-color: var(--background-modifier-selected);
}

.selected__0f2e8:hover {
    background-color: var(--background-modifier-selected);
  }

.selected__0f2e8 .contentDescription__0f2e8 {
    color: var(--interactive-hover);
  }

.infoSection__0f2e8 {
  display: flex;
  flex-direction: column;
  flex: 1;

  /* Note (ggmitch): Required for flex-child text truncation */
  min-width: 0;

  margin-bottom: -2px;
}

.userSection__0f2e8 {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.userName__0f2e8 {
  color: var(--channels-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85%;

  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}

.userName__0f2e8.fontScaling__0f2e8 {
    font-size: 0.875rem;
  }

.facePile__0f2e8 {
  display: flex;
  margin-right: 6px;
}

.facePileItem__0f2e8:not(:first-child) {
  margin-left: -3px;
}

.additionalParticipantBadge__0f2e8 {
  padding: 2.25px 4.4px 2.5px 4.2px;
  background: var(--background-modifier-accent);
  border-radius: 8px;
  margin-left: 4px;
}

.additionalParticipantBadgeText__0f2e8 {
  line-height: 10px;
}

img.thumbnail__0f2e8 {
  width: 48px;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 *
 * This file is an output of the Typography pipeline, which is defined here:
 *
 *   discord_design_system/modules/token_definitions/Typography.tsx
 *
 * Then run:
 *
 *   yarn generate
 */
.heading-sm\/normal_a7acae {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.heading-sm\/normal_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.heading-sm\/medium_a7acae {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.heading-sm\/medium_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.heading-sm\/semibold_a7acae {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.heading-sm\/semibold_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.heading-sm\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.heading-sm\/bold_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.heading-sm\/extrabold_a7acae {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 800;
}
.heading-sm\/extrabold_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.heading-md\/normal_a7acae {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-md\/normal_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.heading-md\/medium_a7acae {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-md\/medium_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.heading-md\/semibold_a7acae {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-md\/semibold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.heading-md\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-md\/bold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.heading-md\/extrabold_a7acae {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-md\/extrabold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.heading-lg\/normal_a7acae {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.heading-lg\/normal_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.heading-lg\/medium_a7acae {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.heading-lg\/medium_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.heading-lg\/semibold_a7acae {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.heading-lg\/semibold_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.heading-lg\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.heading-lg\/bold_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.heading-lg\/extrabold_a7acae {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}
.heading-lg\/extrabold_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.heading-xl\/normal_a7acae {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xl\/normal_a7acae.fontScaling_a7acae {
    font-size: 1.5rem;
  }
.heading-xl\/medium_a7acae {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xl\/medium_a7acae.fontScaling_a7acae {
    font-size: 1.5rem;
  }
.heading-xl\/semibold_a7acae {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xl\/semibold_a7acae.fontScaling_a7acae {
    font-size: 1.5rem;
  }
.heading-xl\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xl\/bold_a7acae.fontScaling_a7acae {
    font-size: 1.5rem;
  }
.heading-xl\/extrabold_a7acae {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xl\/extrabold_a7acae.fontScaling_a7acae {
    font-size: 1.5rem;
  }
.heading-xxl\/normal_a7acae {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xxl\/normal_a7acae.fontScaling_a7acae {
    font-size: 2rem;
  }
.heading-xxl\/medium_a7acae {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xxl\/medium_a7acae.fontScaling_a7acae {
    font-size: 2rem;
  }
.heading-xxl\/semibold_a7acae {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xxl\/semibold_a7acae.fontScaling_a7acae {
    font-size: 2rem;
  }
.heading-xxl\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xxl\/bold_a7acae.fontScaling_a7acae {
    font-size: 2rem;
  }
.heading-xxl\/extrabold_a7acae {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xxl\/extrabold_a7acae.fontScaling_a7acae {
    font-size: 2rem;
  }
.eyebrow_a7acae {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eyebrow_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/normal_a7acae {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.heading-deprecated-12\/normal_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/medium_a7acae {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.heading-deprecated-12\/medium_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/semibold_a7acae {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.heading-deprecated-12\/semibold_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.heading-deprecated-12\/bold_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/extrabold_a7acae {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 800;
}
.heading-deprecated-12\/extrabold_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.redesign\/heading-18\/bold_a7acae {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/heading-18\/bold_a7acae.fontScaling_a7acae {
    font-size: 1.125rem;
  }
.text-xxs\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
}
.text-xxs\/normal_a7acae.fontScaling_a7acae {
    font-size: 0.625rem;
  }
.text-xxs\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
}
.text-xxs\/medium_a7acae.fontScaling_a7acae {
    font-size: 0.625rem;
  }
.text-xxs\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
}
.text-xxs\/semibold_a7acae.fontScaling_a7acae {
    font-size: 0.625rem;
  }
.text-xxs\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}
.text-xxs\/bold_a7acae.fontScaling_a7acae {
    font-size: 0.625rem;
  }
.text-xs\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.text-xs\/normal_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.text-xs\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.text-xs\/medium_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.text-xs\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.text-xs\/semibold_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.text-xs\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.text-xs\/bold_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.text-sm\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.text-sm\/normal_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.text-sm\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.text-sm\/medium_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.text-sm\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.text-sm\/semibold_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.text-sm\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.text-sm\/bold_a7acae.fontScaling_a7acae {
    font-size: 0.875rem;
  }
.text-md\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.text-md\/normal_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.text-md\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.text-md\/medium_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.text-md\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.text-md\/semibold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.text-md\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.text-md\/bold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.text-lg\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.text-lg\/normal_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.text-lg\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.text-lg\/medium_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.text-lg\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.text-lg\/semibold_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.text-lg\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.text-lg\/bold_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.redesign\/message-preview\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.redesign\/message-preview\/normal_a7acae.fontScaling_a7acae {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.redesign\/message-preview\/medium_a7acae.fontScaling_a7acae {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.redesign\/message-preview\/semibold_a7acae.fontScaling_a7acae {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/message-preview\/bold_a7acae.fontScaling_a7acae {
    font-size: 0.9375rem;
  }
.redesign\/channel-title\/normal_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 400;
}
.redesign\/channel-title\/normal_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.redesign\/channel-title\/medium_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 500;
}
.redesign\/channel-title\/medium_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.redesign\/channel-title\/semibold_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
}
.redesign\/channel-title\/semibold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.redesign\/channel-title\/bold_a7acae {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 700;
}
.redesign\/channel-title\/bold_a7acae.fontScaling_a7acae {
    font-size: 1rem;
  }
.display-sm_a7acae {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.display-sm_a7acae.fontScaling_a7acae {
    font-size: 1.25rem;
  }
.display-md_a7acae {
  font-family: var(--font-headline);
  font-size: 34px;
  line-height: 1.0588235294117647;
  font-weight: 800;
}
.display-md_a7acae.fontScaling_a7acae {
    font-size: 2.125rem;
  }
.display-lg_a7acae {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 0.9545454545454546;
  font-weight: 800;
}
.display-lg_a7acae.fontScaling_a7acae {
    font-size: 2.75rem;
  }
.code_a7acae {
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.code_a7acae.fontScaling_a7acae {
    font-size: 0.75rem;
  }
.live_a7acae {
  padding: 0 6px;
}
.liveShapeRound_a7acae {
  border-radius: var(--custom-live-indicator-border-radius);
}
.liveShapeRoundLeft_a7acae {
  border-radius: var(--custom-live-indicator-border-radius) 0 0 var(--custom-live-indicator-border-radius);
}
.liveShapeRoundRight_a7acae {
  border-radius: 0 var(--custom-live-indicator-border-radius) var(--custom-live-indicator-border-radius) 0;
}
.grey_a7acae {
  background-color: var(--interactive-muted);
  color: var(--interactive-normal);
}
.liveLarge_a7acae {
  font-size: 14px;
  line-height: 16px;
}
.liveSmall_a7acae {
  
}

.heading__3299f {
  display: flex;
  justify-content: space-between;
}

.preview__3299f {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.preview__3299f.fullSize__3299f {
    min-width: 60px;
    max-width: 60px;
    min-height: 60px;
    max-height: 60px;
  }

.image__3299f {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-xs);
  background-color: var(--bg-base-tertiary);
}

.clickable__3299f {
  cursor: pointer;
}

.overlay__3299f {
  position: relative;
}

.overlay__3299f:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xs);
  }

.overlay__3299f:hover .overlayText__3299f {
      opacity: 1;
    }

.full-motion .overlay__3299f:hover .clyde__3299f {
        display: inline;
        display: initial;
      }

.overlayText__3299f {
  position: absolute;
  cursor: pointer;
  background: hsl(var(--black-500-hsl) / 0.6);
  padding: 7px 16px;
  border-radius: var(--radius-xl);
  z-index: 1;
  opacity: 0;
}

.full-motion .overlayText__3299f {
    transition: opacity var(--custom-button-transition-duration) ease;
  }

.clyde__3299f {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation:
    fadeIn__3299f 7.6s linear 19s forwards,
    x__3299f 3.8s linear 19s infinite alternate,
    y__3299f 2.3s linear 19s infinite alternate,
    colorX__3299f 19s step-start 19s infinite,
    colorY__3299f 11.5s step-start 19s infinite;
  color: hsl(calc(14.4 * (var(--custom-color-y) * 5 + var(--custom-color-x))) 100% 50%);
}

@keyframes fadeIn__3299f {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes x__3299f {
  from {
    left: 0;
  }

  to {
    left: calc(100% - 16px);
  }
}

@keyframes y__3299f {
  from {
    top: 0;
  }

  to {
    top: calc(100% - 16px);
  }
}

@keyframes colorX__3299f {
  from {
    --custom-color-x: 0;
  }

  20% {
    --custom-color-x: 2;
  }

  40% {
    --custom-color-x: 4;
  }

  60% {
    --custom-color-x: 1;
  }

  80% {
    --custom-color-x: 3;
  }

  to {
    --custom-color-x: 0;
  }
}

@keyframes colorY__3299f {
  from {
    --custom-color-y: 0;
  }

  20% {
    --custom-color-y: 2;
  }

  40% {
    --custom-color-y: 4;
  }

  60% {
    --custom-color-y: 1;
  }

  80% {
    --custom-color-y: 3;
  }

  to {
    --custom-color-y: 0;
  }
}

.container__23ba6 {
  display: flex;
}

.tooltip__0f074 {
  max-width: 224px;
}

.pill_dfa8b6 {
  border-radius: var(--radius-xs);
  background: var(--bg-mod-faint);
  border: 1px solid var(--border-faint);
}

.custom-profile-theme .pill_dfa8b6 {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-6));
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

.role_dfa8b6 {
  
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  box-sizing: border-box;
  padding: 4px;
  height: 24px;
}

.role_dfa8b6 > :first-child {
    margin-right: 4px;
    margin-left: 1px;
  }

.roleFlowerStar_dfa8b6 {
  margin: 0 4px;
}

.roleDot_dfa8b6 {
  /* the RoleDot scales on ems, so increase font size to make it bigger */
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 1.34em;
  margin: 0;
}

.roleRemoveButtonCanRemove_dfa8b6 {
  cursor: pointer;
}

.roleRemoveButton_dfa8b6 {
  position: relative;
}

.roleIcon_dfa8b6 {
  margin-right: 4px;
  vertical-align: middle;
}

.roleName_dfa8b6 {
  margin-right: 2px;
  overflow: hidden;
}

.roleRemoveIcon_dfa8b6 {
  display: none;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
}

.role_dfa8b6:hover .roleRemoveIcon_dfa8b6,
.role_dfa8b6:focus .roleRemoveIcon_dfa8b6,
.roleRemoveIconFocused_dfa8b6 .roleRemoveIcon_dfa8b6 {
  display: block;
}

.role_dfa8b6:hover .roleVerifiedIcon_dfa8b6,
.role_dfa8b6:focus .roleVerifiedIcon_dfa8b6,
.roleRemoveIconFocused_dfa8b6 .roleVerifiedIcon_dfa8b6 {
  display: none;
}

.roleCircle_dfa8b6 {
  margin: 0;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .role_dfa8b6 {
    border: 1px solid CanvasText;
  }

.enable-forced-colors .roleRemoveIcon_dfa8b6 {
    background-color: ButtonFace;
    color: ButtonText;
    padding: 2px;
    border-radius: 100%;
  }

.enable-forced-colors .roleRemoveIcon_dfa8b6 path {
      fill: ButtonText !important;
    }

.enable-forced-colors .roleRemoveIcon_dfa8b6 path {
      /* stylelint-disable-next-line declaration-no-important */
    }

.popoutRoleDot_b77a0c {
  margin-right: 4px;
}

.popoutRoleCircle_b77a0c {
  margin-right: 8px;
}

.button__7d7f7 {
  border-radius: var(--radius-xs);
  background: var(--bg-mod-faint);
  color: var(--interactive-normal);
  border: 1px solid var(--border-faint);
  width: -moz-fit-content;
  width: fit-content;
  height: 24px;
  padding: 4px;
}

.custom-profile-theme .button__7d7f7 {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-6));
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

.root_fccfdf {
  position: relative;
  flex-wrap: wrap;
  display: flex;
  color: var(--text-normal);
  gap: 4px;
}

.pill_fccfdf {
  border-radius: var(--radius-xs);
  background: var(--bg-mod-faint);
  border: 1px solid var(--border-faint);
}

.custom-profile-theme .pill_fccfdf {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-6));
    /* stylelint-disable-next-line discord/var-validator */
    border-color: var(--profile-body-border-color);
  }

.expandButton_fccfdf {
  
  padding: 3px 7px;
  cursor: pointer;
  align-items: center;
}

.collapseButton_fccfdf {
  
  padding: 3px 5px;
  cursor: pointer;
  align-items: center;
  display: flex;
  height: 24px;
  box-sizing: border-box;
}

.container__530ce {
  display: flex;
  align-items: center;
}

.mutuals__530ce {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
  -moz-column-gap: 6px;
       column-gap: 6px;
}

.section__530ce {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.section__530ce:hover .text__530ce, .section__530ce:focus-visible .text__530ce {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.spacer__530ce {
  width: 4px;
  height: 4px;
  background-color: var(--interactive-normal);
  border-radius: var(--radius-round);
}

.buttons_bc38cd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

  .buttons_bc38cd:empty {
    display: none;
  }

.button_bc38cd {
  flex: 1 1 auto;
  min-width: calc(50% - 8px);
}

.popoutMenu_c37c25 {
  width: 268px;
}

.toastContainer_a35754 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  height: 40px;
  box-shadow: var(--shadow-high);
  border-radius: 32px;
}

.toastPadding_a35754 {
  padding: 10px 16px;
}

.toastIcon_a35754 {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.successToast_a35754 {
  gap: 40px;
  display: flex;
}

.toast__3fde7 {
  background-color: var(--background-tertiary);
  border-radius: 32px;
  margin-bottom: 12px;
  line-height: 24px;
  padding: 16px;
  display: flex;
  align-items: center;
}

.icon__3fde7 {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  margin-top: -2px;
}

.clipIcon__3fde7 {
  
  color: var(--header-primary);
}

.header_bfd183 {
  margin-bottom: 4px;
}

.list_bfd183 {
  display: flex;
  gap: 2px;
}

.row_bfd183 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.layoutContainer__9f71b {
  display: flex;
  align-items: center;
}

.channelHeader__9f71b {
  background-color: var(--bg-mod-faint);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: 12px;
}

.channelHeader__9f71b .layoutContainer__9f71b {
    gap: var(--spacing-12);
  }

.profile__9f71b {
  padding: 12px;
}

.profile__9f71b .layoutContainer__9f71b {
    gap: var(--spacing-8);
  }

.icon__9f71b {
  flex-shrink: 0;
}

.upsellContainer__5997d {
  border-radius: var(--radius-sm);
}

.upsellContent__5997d {
  position: relative;
  border-radius: inherit;
  /* stylelint-disable-next-line discord/var-validator */
  background-color: var(--profile-body-background-color);
}

.upsellContent__5997d:before,
.upsellContent__5997d:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
}

.upsellContent__5997d:before {
  border-color: var(--guild-boosting-purple);
}

.upsellCloseIconWrapper__5997d {
  display: flex;
  justify-content: center;
}

.upsellDefaultContent__5997d {
  padding: 12px;
}

.upsellHeader__5997d {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.upsellButtons__5997d {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.upsellButtonWrapper__5997d {
  flex: 1;
}

.upsellButton__5997d {
  width: 100%;
}

.upsellButton__5997d:disabled {
  opacity: 0.5;
}

.upsellRowContent__5997d {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 11px 12px 16px;
  border-radius: inherit;
}

.upsellRowContent__5997d:before,
.upsellRowContent__5997d:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
}

.upsellRowContent__5997d:before {
  border-color: var(--guild-boosting-purple);
}

.upsellContent__5997d:after,
.upsellRowContent__5997d:after {
  border-color: var(--guild-boosting-blue);
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
          mask: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.upsellRowRight__5997d {
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewPremiumPerksButtonInner__5997d {
  display: flex;
  align-items: center;
  gap: 4px;
}

.premiumIcon__5997d {
  margin-right: 4px;
  height: 20px;
}

.upsellCloseIcon__5997d {
  color: var(--interactive-normal);
  cursor: pointer;
}

.upsellCloseIcon__5997d:hover {
  color: var(--interactive-hover);
}

.upsellCloseIcon__5997d:active {
  color: var(--interactive-active);
}

.theme-light.custom-profile-theme .upsellButton__5997d {
    background-color: hsl(var(--white-hsl) / 0.72);
    color: var(--interactive-active);
  }

.theme-light.custom-profile-theme .upsellButton__5997d:hover {
    background-color: hsl(var(--white-hsl) / 0.52);
  }

.theme-light.custom-profile-theme .upsellButton__5997d:active {
    background-color: hsl(var(--white-hsl) / 0.57);
  }

.theme-light.custom-profile-theme .upsellButton__5997d:disabled {
    opacity: 0.5;
  }

.theme-light.custom-profile-theme .upsellContent__5997d {
    background-color: rgb(var(--bg-overlay-color) / 0.4);
  }

.theme-light.custom-profile-theme .viewPremiumPerksButtonShine__5997d {
    color: hsl(var(--black-500-hsl) / 0.04);
  }

.theme-dark.custom-profile-theme .upsellButton__5997d {
    background-color: hsl(var(--white-hsl) / 0.24);
  }

.theme-dark.custom-profile-theme .upsellButton__5997d:hover {
    background-color: hsl(var(--white-hsl) / 0.34);
  }

.theme-dark.custom-profile-theme .upsellButton__5997d:active {
    background-color: hsl(var(--white-hsl) / 0.39);
  }

.theme-dark.custom-profile-theme .upsellContent__5997d {
    background-color: rgb(var(--bg-overlay-color) / 0.4);
  }

.container__43a4b {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 10px 12px;
  gap: 8px;
}

.buttonContainer__43a4b {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button__43a4b {
  padding: 2px 8px;
  min-height: 24px;
  height: 24px;
}

.custom-profile-theme .color__43a4b {
    /* stylelint-disable-next-line discord/var-validator */
    background-color: var(--profile-gradient-button-color);
    color: var(--white-500);
    transition: opacity 0.2s ease-in-out;
  }

.custom-profile-theme .color__43a4b:hover {
      /* stylelint-disable-next-line discord/var-validator */
      background-color: var(--profile-gradient-button-color);
      opacity: 0.8;
    }

.custom-profile-theme .color__43a4b:active {
      /* stylelint-disable-next-line discord/var-validator */
      background-color: var(--profile-gradient-button-color);
      opacity: 0.9;
    }

.custom-profile-theme .color__43a4b:disabled,
    .custom-profile-theme .color__43a4b[aria-disabled='true'] {
      /* stylelint-disable-next-line discord/var-validator */
      background-color: var(--profile-gradient-button-color);
      opacity: 0.5;
    }

.gameIcon__43a4b {
  vertical-align: bottom;
}

.container__581dd {
  padding: var(--spacing-16);
  gap: var(--spacing-8);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.panel__581dd {
  padding: var(--spacing-12);
}

.roleDot__57082 {
  margin-right: 2px;
  /* compensate for the 2px padding on the left of the mention */
  margin-left: -2px;
}

.oauth2PageWrapper__647f0 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 0;
  padding-top: 40px;
  padding-bottom: 40px;
}

.oauth2PageContent__647f0 {
  min-width: 280px;
  width: 100%;
  height: auto;
  max-height: calc(100% - 80px);
  max-width: var(--custom-o-auth-2-page-oauth-2-max-width);
  min-height: var(--custom-o-auth-2-page-oauth-2-min-height);
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 12px;
  box-shadow: var(--legacy-elevation-high);
  background: var(--background-primary);
  overflow: hidden;
}

.oauth2ModalWrapper__647f0 {
  min-width: 280px;
  width: 100%;
  max-width: var(--custom-o-auth-2-page-oauth-2-max-width);
  min-height: var(--custom-o-auth-2-page-oauth-2-min-height);
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 12px;
  background: var(--background-primary);
  overflow: auto;
}

@media (max-width: 485px) {
  .oauth2PageWrapper__647f0 {
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
  }

  .oauth2PageContent__647f0 {
    box-shadow: none;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    overflow: auto;
  }

  .oauth2ModalWrapper__647f0 {
    box-shadow: none;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.oauth2ModalWrapper__647f0 .footer__647f0 {
  padding: 0;
  width: 100%;
}

.visual-refresh .oauth2ModalWrapper__647f0 .footer__647f0 {
    box-sizing: border-box;
  }

.wrapper_b76614 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
}

.header_b76614 {
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
}

.text_b76614 {
  margin-top: 24px;
  text-align: center;
}

.authorizedSuccessSubtext_b76614 {
  margin-top: 16px;
  text-align: center;
  max-width: 274px;
}

.cta_b76614 {
  margin-top: 12px;
}

.headerSuccess_b76614 {
  width: 158px;
  height: 130px;
  background: url(/assets/6410595f71273140.svg) no-repeat;
}

.headerFailure_b76614 {
  width: 92px;
  height: 92px;
}

.closeButton_b76614 {
  position: absolute;
  right: 12px;
  top: 12px;
  opacity: 0.8;
}

.authorizedSuccessWrapper_b76614 {
  margin: 0 auto;
  padding: 24px;
}

.buttonsContainer_b76614 {
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.theme-dark .headerFailure_b76614 {
    background: url(/assets/8fb262894795f907.svg) no-repeat;
  }

.theme-light .headerFailure_b76614 {
    background: url(/assets/b02f7cfc8ed3b51a.svg) no-repeat;
  }

.footer__3d3b0 {
  padding: 16px;
  width: 100%;
  background: var(--background-tertiary);
  display: flex;
  justify-content: space-between;
}

  .footer__3d3b0 button {
    min-width: 0;
  }

.authorize__3d3b0 {
  flex: 1;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: var(--background-primary);
}

.visual-refresh .authorize__3d3b0 {
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    margin: 0;
  }

.visual-refresh .footer__3d3b0 {
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }

.spinner__3d3b0 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
}

.action__3d3b0 {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 485px) {
  .footer__3d3b0 {
    display: flex;
    flex-direction: column-reverse;
    padding: 4px 16px 16px;
  }

    .footer__3d3b0 button {
      margin-top: 12px;
    }

  .action__3d3b0 {
    flex: 1;
  }

    .action__3d3b0 .tooltip__3d3b0 {
      flex: 1;
    }

    .action__3d3b0 button {
      width: 100%;
    }
}

.fullWidth__3d3b0 {
  width: 100%;
}

.captcha__3d3b0 {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.captchaLabel__3d3b0 {
  margin-bottom: 20px;
}

.recaptcha__3d3b0 {
  height: 80px;
}

.content__3d3b0 {
  padding: 32px;
  margin: 0 32px;
  margin-bottom: 48px;
  position: relative;
  border-radius: 8px;
}

.content__3d3b0.minimalPadding__3d3b0 {
  padding: 16px 0;
  margin: 0;
}

.contentBackground__3d3b0 {
  background: var(--background-secondary);
}

.visual-refresh .content__3d3b0 {
    margin: 0;
    padding: var(--space-16);
  }

.visual-refresh .content__3d3b0.minimalPadding__3d3b0 {
    padding: var(--space-24) 0;
  }

.visual-refresh .contentBackground__3d3b0 {
    background: var(--background-mod-subtle);
    border: 1px solid var(--border-faint);
  }

@media (max-width: 568px) {
  .content__3d3b0 {
    padding: 16px;
    margin: 0 8px;
    margin-bottom: 24px;
  }

  .content__3d3b0.minimalPadding__3d3b0 {
    padding: 16px 0;
    margin: 0;
  }
}

.sectionGroup__3d3b0 {
  padding: 16px 0 24px;
}

.sectionGroup__3d3b0:not(:last-child) {
    border-bottom: 1px solid var(--background-modifier-accent);
  }

.sectionLabel__3d3b0 {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--header-secondary);
  padding-bottom: 8px;
}

.intObserver__3d3b0 {
  bottom: 24px;
  height: 1px;
  pointer-events: none;
  position: absolute;
}

.full-motion .emoji__3d3b0 {
  animation: moveUpDown__3d3b0 1s ease-in-out infinite;
}

@keyframes moveUpDown__3d3b0 {
  0%,
  100% {
    transform: translateY(-3px);
  }

  50% {
    transform: translateY(3px);
  }
}

.buttonWithEmoji__3d3b0 {
  overflow: visible !important;
}

.buttonWithEmoji__3d3b0 {
  /* stylelint-disable-next-line declaration-no-important */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deepLinkContainer__3d3b0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 32px;
  text-align: center;
  background: var(--background-primary);
  border-radius: 12px;
  width: 480px;
}

.errorCodeMessage__85414 {
  margin-top: 16px;
}

.title__051e9 {
  text-transform: capitalize;
}

.combo_fcddc1 {
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  height: 23px;
}

.key_fcddc1 {
  background-color: var(--bg-mod-faint);
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  position: relative;
  display: block;
  height: 23px;
  padding: 3px 6px 4px;
  border-radius: 4px;
  cursor: default;
  min-width: 14px;
  min-height: 14px;
  text-align: center;
}

.key_fcddc1:not(:last-child) {
    margin-right: 3px;
  }

.key_fcddc1 .bindArrow_fcddc1 {
    width: 10px;
    height: 10px;
  }

.key_fcddc1 .bindArrow_fcddc1.up_fcddc1 {
      transform: rotate(180deg);
    }

.key_fcddc1 .bindArrow_fcddc1.left_fcddc1 {
      transform: rotate(90deg);
    }

.key_fcddc1 .bindArrow_fcddc1.right_fcddc1 {
      transform: rotate(-90deg);
    }

.key_fcddc1:active {
    transform: translate(0, 2px);
    height: 21px;
    padding-bottom: 2px;
  }

.combo_fcddc1 {
  color: var(--text-primary);
}

.key_fcddc1 {
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 -4px 0 var(--bg-mod-faint);
  color: var(--interactive-active);
}

.key_fcddc1 g {
    fill: var(--interactive-active);
  }

.key_fcddc1:active {
    box-shadow: inset 0 -2px 0 var(--bg-mod-subtle);
    border: 1px solid var(--border-strong);
    color: var(--interactive-normal);
  }

.key_fcddc1:active g {
      fill: var(--interactive-normal);
    }

.dim_fcddc1 span {
    background-color: var(--bg-mod-subtle);
    color: var(--text-primary);
  }

.dim_fcddc1 span .bindArrow_fcddc1 g {
      fill: var(--text-secondary);
    }

.dim_fcddc1 span:active {
      color: var(--text-primary);
    }

.dim_fcddc1 span:active .bindArrow_fcddc1 g {
        fill: var(--text-primary);
      }

.keybindShortcutSearchPopout_fcddc1 {
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0;
}

.keyboardShortcuts_fcddc1 {
  margin: 0;
}

.positioner_a516b9 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  /* TODO(faulty): This is bad */
  z-index: 1000;
}

.container_a516b9 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  margin: auto;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--background-floating);
  box-shadow: var(--elevation-high);
}

.bindName_a516b9 {
  flex: 0 0 auto;
  margin-right: 8px;
}

.shortcut_a516b9 {
  flex: 0 0 auto;
  margin: 0 2px;
}

.separator_a516b9 {
  flex: 0 0 auto;
  font-weight: 600;
  margin: 0 12px;
  color: var(--text-normal);
}

.separator_a516b9:after {
    content: '•';
  }

.focus-rings-ring {
  /* Ensure the ring doesn't affect the page */
  position: absolute;
  display: block;
  pointer-events: none;
  /* Default styling */
  background: none;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  border-radius: var(--__adaptive-focus-ring-radius, 4px);
  box-shadow: 0 0 0 4px #00b0f4;
  box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4));
}

.divider__46c3b {
  width: 100%;
  height: 1px;
  border-top: thin solid var(--background-modifier-accent);
}

.error__4cd16 {
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-size: 14px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.3;
  font-weight: 500;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

  .error__4cd16 a {
    color: var(--white-500);
    font-weight: 600;
  }

  .error__4cd16 a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.icon__4cd16 {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.text__4cd16 {
  margin-left: 10px;
  flex: 1;
}

.backgroundRed__4cd16 {
  background-color: var(--red-400);
  color: var(--white-500);
}

.errorClose__4cd16 {
  width: 16px;
  height: 16px;
  cursor: pointer;
  align-self: flex-center;
}

.errorCloseIcon__4cd16 {
  width: 16px;
  height: 16px;
}

.backgroundTertiary__4cd16 {
  background-color: var(--background-tertiary);
  color: var(--interactive-active);
}

.backgroundAccent__4cd16 {
  background-color: var(--background-accent);
  color: var(--white-500);
}

:where(.visual-refresh) .fieldWrapper_ce6bbd {
    position: relative;
    padding-top: 4px;
  }

.label__1b9d6 {
  cursor: default;
  display: block;
  flex: 1;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--header-secondary);
}

.defaultMargin__1b9d6 {
  margin-bottom: 8px;
}

.disabled__1b9d6 {
  opacity: 0.5;
  cursor: not-allowed;
}

.required__1b9d6 {
  color: var(--text-danger);
  padding-left: 4px;
}

/**
   * styles copied from heading-md\/normal
   * `composes` conflicts with resetting these to a new style, so force it for
   * now, until we can refactor component
   */

:where(.visual-refresh) .label__1b9d6 {
    text-transform: none;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    color: var(--header-primary);
  }

/* Base */
.formText_ddd181 a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }
.formText_ddd181 strong {
    font-weight: 600;
  }
/* TYPES */
.placeholder_ddd181 {
  
}
.labelDescriptor_ddd181 {
  
}
.default_ddd181 {
  
}
.labelSelected_ddd181 {
  
  font-weight: 400;
}
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media all and (-webkit-max-device-pixel-ratio: 1) {
  .theme-light .labelSelected_ddd181 {
    font-weight: 500;
  }
}
.labelBold_ddd181 {
  
  font-weight: 600;
}
.description_ddd181 {
  
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media all and (-webkit-max-device-pixel-ratio: 1) {
  .theme-light .description_ddd181 {
    font-weight: 500;
  }
}
/* Modes */
.modeDefault_ddd181 {
  cursor: default;
}
.modeSelectable_ddd181 {
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.modeDisabled_ddd181 {
  cursor: not-allowed;
  opacity: 0.3;
}
.labelDescriptor_ddd181,
.description_ddd181 {
  color: var(--header-secondary);
}
.placeholder_ddd181 {
  color: var(--text-muted);
}
.error_ddd181 {
  
  color: var(--text-danger);
}
.success_ddd181 {
  
  color: var(--text-positive);
}
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .modeDisabled_ddd181 {
    color: GrayText;
    opacity: 1;
  }

.formNotice_f43ba5 {
  padding: 20px;
  cursor: default;
}

.formNoticeTitle_f43ba5 {
  margin-bottom: 4px;
}

.formNoticeBody_f43ba5 p {
    letter-spacing: -0.39px;
    margin: 0 0 12px;
  }

.formNoticeBody_f43ba5 p:last-child {
      margin-bottom: 0;
    }

.formNoticeBody_f43ba5 u {
    -webkit-text-decoration: none;
    text-decoration: none;
    font-style: italic;
  }

.icon_f43ba5 {
  -webkit-user-drag: none;
}

.whiteText_f43ba5 {
  color: var(--white-500);
}

.whiteText_f43ba5 a {
    color: var(--white-500);
  }

.children__7bffb {
  display: flex;
  flex-direction: column;
}

.sectionTitle__7bffb {
  display: flex;
}

.container__87bf1 {
  position: relative;
  border-radius: 14px;
  width: 40px;
  height: 24px;
  cursor: pointer;
}

  .container__87bf1.disabled__87bf1 {
    cursor: not-allowed;
  }

.input__87bf1 {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 14px;
  top: 0;
  left: 0;
  margin: 0;
}

.input__87bf1[disabled] {
    pointer-events: none;
  }

.slider__87bf1 {
  display: block;
  position: absolute;
  left: 0;
  width: 28px;
  height: 18px;
  margin: 3px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .container__87bf1 {
    background-color: ButtonFace !important;
  }

.enable-forced-colors .container__87bf1 {
    /* override inline styles */
    /* stylelint-disable-next-line declaration-no-important */
    border: 2px solid ButtonText;
    /* increase height and width for border space */
    height: 28px;
    width: 44px;
  }

.enable-forced-colors .container__87bf1.checked__87bf1 {
      background-color: Highlight !important;
    }

.enable-forced-colors .container__87bf1.checked__87bf1 {
      /* stylelint-disable-next-line declaration-no-important */
      border-color: Highlight;
    }

.enable-forced-colors .container__87bf1.disabled__87bf1 {
      background-color: Canvas !important;
      opacity: 1 !important;
    }

.enable-forced-colors .container__87bf1.disabled__87bf1 {
      /* stylelint-disable-next-line declaration-no-important */
      border-color: GrayText;
      /* override inline styles */
      /* stylelint-disable-next-line declaration-no-important */
    }

.enable-forced-colors .container__87bf1.disabled__87bf1.checked__87bf1 {
        background-color: GrayText !important;
      }

.enable-forced-colors .container__87bf1.disabled__87bf1.checked__87bf1 {
        /* stylelint-disable-next-line declaration-no-important */
        border-color: GrayText;
      }

:where(.visual-refresh) .container__87bf1 {
    height: 28px;
    border-radius: 16px;
    width: 44px;
    box-sizing: border-box;
    border: 1px solid transparent;
  }

:where(.visual-refresh) .container__87bf1.checked__87bf1 {
      border-color: var(--input-border);
    }

:where(.visual-refresh) .slider__87bf1 {
    height: 20px;
  }

.container__0d850 {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.labelRow__0d850 {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

.control__0d850 {
  flex: 0 0 auto;
}

.disabled__0d850 {
  cursor: not-allowed;
}

.disabled__0d850 .titleDefault__0d850,
  .disabled__0d850 .titleMini__0d850,
  .disabled__0d850 .title__0d850 {
    cursor: not-allowed;
    opacity: 0.6;
  }

.title__0d850 {
  flex: 1;
  display: block;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--header-primary);
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  word-wrap: break-word;
  cursor: pointer;
}

.note__0d850 {
  margin-top: 8px;
}

.disabledText__0d850 {
  margin-top: 4px;
}

.dividerDefault__0d850 {
  margin-top: 20px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .disabled__0d850 .titleDefault__0d850,
    .enable-forced-colors .disabled__0d850 .titleMini__0d850 {
      opacity: 1;
    }

/**
  * TODO: Responsive breakpoints should probably be tokens in the design system
  */

.interactive_bf202d {
  cursor: pointer;
  color: var(--interactive-normal);
  border-radius: inherit;
}

.interactive_bf202d:hover,
  .interactive_bf202d:focus-within {
    color: var(--interactive-hover);
    background: var(--bg-overlay-hover, var(--background-modifier-hover));
  }

.interactive_bf202d:active {
    color: var(--interactive-active);
    background: var(--bg-overlay-active, var(--background-modifier-active));
  }

.muted_bf202d {
  color: var(--interactive-muted);
}

@media (min-width: 486px) {
  .selected_bf202d {
    color: var(--interactive-active);
    background: var(--bg-overlay-selected, var(--background-modifier-selected));
  }
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .interactive_bf202d {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;
    background-color: ButtonFace;
    border: 1px solid ButtonFace;
    color: ButtonText;
  }

.enable-forced-colors .interactive_bf202d:hover,
    .enable-forced-colors .interactive_bf202d:focus-within {
      background-color: ButtonFace;
      border-color: ButtonText;
      color: ButtonText;
    }

.enable-forced-colors .interactive_bf202d.selected_bf202d,
    .enable-forced-colors .interactive_bf202d.selected_bf202d:hover,
    .enable-forced-colors .interactive_bf202d.selected_bf202d:focus-within {
      background-color: HighlightText;
      border-color: Highlight;
      color: Highlight;
    }

.container__3ff92 {
  width: 100%;
  position: relative;
}

.items__3ff92 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.itemMeasurements__3ff92 {
  display: flex;
}

.overflowMeasurement__3ff92 {
  display: inline-block;
}

.measurements__3ff92 {
  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}

.tooltip__3ff92 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/** TODO Either the design system should own premium colors, or this should come from somewhere else */

.menu_c1e9c4 {
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  height: auto;
  cursor: default;
  /* NOTE(faulty): I'm not 100% on how the offset from the top gets set on the
    page. This just roughly matches and makes sure there's at least an 8px gap
    from the bottom of the page. The top offset of full-height menus seems to
    be independent of this, though. */
  max-height: calc(100vh - 32px);
  background: var(--background-floating);
  box-shadow: var(--shadow-high);
  border-radius: 4px;
}

.scroller_c1e9c4 {
  padding: 6px 8px;
}

.fixed_c1e9c4 {
  width: 220px;
}

.flexible_c1e9c4 {
  min-width: 188px;
  max-width: 320px;
}

/* Menu Items */

.item_c1e9c4 {
  box-sizing: border-box;
  margin: 2px 0;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  cursor: pointer;
}

.item_c1e9c4.hideInteraction_c1e9c4 {
    cursor: default;
  }

/* Basic defaults to help custom items feel integrated without any extra work. */

.customItem_c1e9c4 {
  color: var(--interactive-normal);
  border-color: var(--interactive-normal);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.labelContainer_c1e9c4 {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
}

.label_c1e9c4 {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtext_c1e9c4 {
  margin-top: 2px;
  white-space: normal;
}

.subtextLineClamp_c1e9c4 {
  white-space: pre;
}

.iconContainer_c1e9c4 {
  position: relative;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  margin-left: 8px;
}

:where(.visual-refresh) .iconContainer_c1e9c4 {
    height: 20px;
    width: 20px;
  }

.iconContainerLeft_c1e9c4 {
  
  margin-left: 0;
  margin-right: 8px;
}

.iconContainerLarge_c1e9c4 {
  height: 32px;
  width: 32px;
}

.icon_c1e9c4 {
  width: 100%;
  height: 100%;
}

.hintContainer_c1e9c4 {
  flex: 0 0 auto;
  max-height: 18px;
  margin-left: 8px;
}

.caret_c1e9c4 {
  width: 10px;
  height: 10px;
  color: var(--text-muted);
}

.show-redesigned-icons .caret_c1e9c4 {
  width: 16px;
  height: 16px;
}

.disabled_c1e9c4 {
  cursor: pointer;
  pointer-events: none;
  opacity: 0.5;
}

.separator_c1e9c4 {
  box-sizing: border-box;
  margin: 4px;
  border-bottom: 1px solid var(--background-modifier-accent);
}

/* This container gives more leniency to mouse movements, since displaying a
  submenu is based on hover in that case. Without it, the gap between menus
  causes a `mouseleave` and will disappear unless the movement is fast enough. */

.submenuPaddingContainer_c1e9c4 {
  padding: 0 8px;
}

.submenu_c1e9c4 {
  
  min-width: 188px;
  max-width: 320px;
}

/* Colors */

.colorDefault_c1e9c4 {
  color: var(--interactive-normal);
  border-color: var(--interactive-normal);
}

.colorDefault_c1e9c4 .subtext_c1e9c4 {
    color: var(--text-muted);
  }

.colorDefault_c1e9c4 .checkbox_c1e9c4,
  .colorDefault_c1e9c4 .radioSelection_c1e9c4 {
    color: var(--control-brand-foreground-new);
  }

.colorDefault_c1e9c4 .check_c1e9c4 {
    color: var(--white);
  }

.colorDefault_c1e9c4.focused_c1e9c4 {
    background-color: var(--menu-item-default-hover-bg);
    color: var(--white);
  }

.colorDefault_c1e9c4.focused_c1e9c4 .checkbox_c1e9c4,
    .colorDefault_c1e9c4.focused_c1e9c4 .radioSelection_c1e9c4,
    .colorDefault_c1e9c4.focused_c1e9c4 .caret_c1e9c4 {
      color: var(--white);
    }

.colorDefault_c1e9c4.focused_c1e9c4 .check_c1e9c4 {
      color: var(--text-brand);
      fill: var(--text-brand);
    }

.colorDefault_c1e9c4.focused_c1e9c4:not(.checkboxContainer_c1e9c4) path {
      fill: var(--white);
    }

.colorDefault_c1e9c4:active:not(.hideInteraction_c1e9c4) {
    background-color: var(--menu-item-default-active-bg);
    color: var(--white);
  }

.colorBrand_c1e9c4 {
  
  color: var(--text-brand);
}

.colorDanger_c1e9c4 {
  
  color: var(--status-danger);
}

.colorDanger_c1e9c4 .checkbox_c1e9c4,
  .colorDanger_c1e9c4 .radioSelection_c1e9c4 {
    color: var(--status-danger);
  }

.colorDanger_c1e9c4.focused_c1e9c4 {
    background-color: var(--menu-item-danger-hover-bg);
    color: var(--white);
  }

.colorDanger_c1e9c4.focused_c1e9c4 .check_c1e9c4 {
      color: var(--status-danger);
    }

.colorDanger_c1e9c4:active:not(.hideInteraction_c1e9c4) {
    background-color: var(--menu-item-danger-active-bg);
    color: var(--white);
  }

.colorPremium_c1e9c4 {
  
}

.colorPremium_c1e9c4 .icon_c1e9c4 {
    color: var(--guild-boosting-pink);
  }

.colorPremium_c1e9c4.focused_c1e9c4 .icon_c1e9c4, .colorPremium_c1e9c4:active:not(.hideInteraction_c1e9c4) .icon_c1e9c4 {
      color: var(--white);
    }

.colorPremiumGradient_c1e9c4 {
  
}

.colorPremiumGradient_c1e9c4.focused_c1e9c4,
  .colorPremiumGradient_c1e9c4:active:not(.hideInteraction_c1e9c4) {
    background: linear-gradient(
      270deg,
      var(--premium-tier-2-pink-for-gradients) 0%,
      var(--premium-tier-2-pink-for-gradients-2) 33.63%,
      var(--premium-tier-2-purple-for-gradients) 100%
    );
  }

.colorPremiumGradient_c1e9c4 .check_c1e9c4,
  .colorPremiumGradient_c1e9c4 .radioSelection_c1e9c4 {
    color: var(--white);
  }

.colorPremiumGradient_c1e9c4 .checkbox_c1e9c4 {
    color: var(--premium-tier-2-pink-for-gradients);
  }

.colorPremiumGradient_c1e9c4.focused_c1e9c4 .check_c1e9c4 {
      color: var(--premium-tier-2-pink-for-gradients);
    }

.colorSuccess_c1e9c4 {
  
  color: var(--green-230);
}

.colorSuccess_c1e9c4 .checkbox_c1e9c4,
  .colorSuccess_c1e9c4 .radioSelection_c1e9c4 {
    color: var(--green-230);
  }

.colorSuccess_c1e9c4.focused_c1e9c4 {
    background-color: var(--green-230);
    color: var(--white);
  }

.colorSuccess_c1e9c4.focused_c1e9c4 .check_c1e9c4 {
      color: var(--green-230);
    }

.colorSuccess_c1e9c4:active:not(.hideInteraction_c1e9c4) {
    background-color: var(--green-360);
    color: var(--white);
  }

.groupLabel_c1e9c4 {
  
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 0;
}

.loader_c1e9c4 {
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sparkles_c1e9c4 {
  top: -8px;
  left: -12px;
  width: 32px;
  height: 32px;
}

.custom-theme-background .menu_c1e9c4 {
    border: 1px solid var(--border-strong);
  }

/*
 NOTE(aweary): this is a workaround for menus that are rendered within popouts
 that use PopoutCSSAnimator for an entry animation. PopoutCSSAnimator creates a new
 stacking context while its animating with `transform` but we don't want submenus
 to be positioned relative to the animator.

 So we disable pointer events on menus that contain submenus while the animation is
 running. This shouldn't be noticeable to users as the animation finishes within 200ms,
 so this is just a precaution to prevent any potential jank.
 */

[data-popout-animating='true'] .item_c1e9c4[aria-haspopup='true'] {
    pointer-events: none;
  }

/* stylelint-disable-next-line color-no-hex */

:where(.visual-refresh) .menu_c1e9c4 {
    background-color: var(--background-surface-higher);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-high);
  }

:where(.visual-refresh) .labelContainer_c1e9c4 {
    padding: 8px;
  }

:where(.visual-refresh) .item_c1e9c4 {
    margin: 0;
  }

:where(.visual-refresh) .scroller_c1e9c4 {
    padding: 8px;
  }

:where(.visual-refresh) .separator_c1e9c4 {
    margin: 8px;
    border-bottom-color: var(--border-subtle);
  }

:where(.visual-refresh) svg.radioIcon_c1e9c4 {
    width: 20px;
    height: 20px;
  }

:where(.visual-refresh).show-redesigned-icons .caret_c1e9c4 {
    width: 20px;
    height: 20px;
  }

/* Colors */

:where(.visual-refresh) .colorDefault_c1e9c4 {
    color: var(--interactive-normal);
  }

:where(.visual-refresh) .colorDefault_c1e9c4 .label_c1e9c4 {
      color: var(--header-primary);
    }

:where(.visual-refresh) .colorDefault_c1e9c4 .subtext_c1e9c4 {
      color: var(--text-muted);
    }

:where(.visual-refresh) .colorDefault_c1e9c4.focused_c1e9c4 {
      background-color: var(--bg-mod-subtle);
      color: var(--header-primary);
      border-radius: 4px;
    }

:where(.visual-refresh) .colorDefault_c1e9c4.focused_c1e9c4:not(.checkboxContainer_c1e9c4) path {
        fill: var(--interactive-active);
      }

:where(.visual-refresh) .colorDefault_c1e9c4:active:not(.hideInteraction_c1e9c4) {
      background-color: var(--bg-mod-subtle);
    }

:where(.visual-refresh) .colorDanger_c1e9c4 {
    color: var(--text-danger);
  }

:where(.visual-refresh) .colorDanger_c1e9c4 .label_c1e9c4 {
      color: var(--text-danger);
    }

:where(.visual-refresh) .colorDanger_c1e9c4.focused_c1e9c4 {

      background-color: var(--background-feedback-critical);
      color: var(--text-feedback-critical);
    }

:where(.visual-refresh) .colorDanger_c1e9c4.focused_c1e9c4 .label_c1e9c4 {
        color: var(--text-feedback-critical);
      }

:where(.visual-refresh) .colorDanger_c1e9c4.focused_c1e9c4 .check_c1e9c4 {
        color: var(--text-feedback-critical);
      }

:where(.visual-refresh) .colorDanger_c1e9c4.focused_c1e9c4:not(.checkboxContainer_c1e9c4) path {
        fill: var(--text-feedback-critical);
      }

:where(.visual-refresh) .colorDanger_c1e9c4:active:not(.hideInteraction_c1e9c4) {
      background-color: var(--background-feedback-critical);
      color: var(--text-feedback-critical);
    }

:where(.visual-refresh) .groupLabel_c1e9c4 {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .menu_c1e9c4 {
    background-color: ButtonFace;
    border: 2px solid CanvasText;
  }

.enable-forced-colors .colorDefault_c1e9c4 {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;
    background-color: ButtonFace;
    border: 1px solid ButtonFace;
    color: ButtonText;
  }

.enable-forced-colors .colorDefault_c1e9c4 .label_c1e9c4,
    .enable-forced-colors .colorDefault_c1e9c4 .subtext_c1e9c4,
    .enable-forced-colors .colorDefault_c1e9c4 .caret_c1e9c4 {
      color: inherit;
    }

.enable-forced-colors .colorDefault_c1e9c4 .checkbox_c1e9c4,
    .enable-forced-colors .colorDefault_c1e9c4 .radioSelection_c1e9c4 {
      color: Highlight;
    }

.enable-forced-colors .colorDefault_c1e9c4 .check_c1e9c4 {
      color: HighlightText;
    }

.enable-forced-colors .colorDefault_c1e9c4.focused_c1e9c4,
    .enable-forced-colors .colorDefault_c1e9c4:hover {
      border-color: ButtonText;
    }

.enable-forced-colors .colorDefault_c1e9c4[aria-checked='true'] {
      background-color: Highlight;
      color: HighlightText;
    }

.enable-forced-colors .colorDefault_c1e9c4[aria-checked='true'].focused_c1e9c4,
      .enable-forced-colors .colorDefault_c1e9c4[aria-checked='true']:hover {
        border-color: HighlightText;
      }

.enable-forced-colors .colorDefault_c1e9c4[aria-checked='true'] .radioSelection_c1e9c4 {
        color: HighlightText;
      }

.enable-forced-colors .colorDefault_c1e9c4:active:not(.hideInteraction_c1e9c4) {
      background-color: Highlight;
      color: HighlightText;
    }

.enable-forced-colors .hideInteraction_c1e9c4,
    .enable-forced-colors .hideInteraction_c1e9c4:hover,
    .enable-forced-colors .groupLabel_c1e9c4,
    .enable-forced-colors .groupLabel_c1e9c4:hover {
      background-color: ButtonFace;
      border-color: ButtonFace;
      color: ButtonText;
    }

.enable-forced-colors .disabled_c1e9c4,
  .enable-forced-colors .disabled_c1e9c4[aria-checked='true'] {
    background-color: Canvas;
    color: GrayText;
    cursor: not-allowed;
    opacity: 1;
  }

.enable-forced-colors .disabled_c1e9c4 .checkbox_c1e9c4,
    .enable-forced-colors .disabled_c1e9c4 .radioSelection_c1e9c4,
    .enable-forced-colors .disabled_c1e9c4[aria-checked='true'] .checkbox_c1e9c4,
    .enable-forced-colors .disabled_c1e9c4[aria-checked='true'] .radioSelection_c1e9c4 {
      color: GrayText;
    }

.container__24c2d {
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 4px;
  margin: 4px 2px;
  background-color: var(--background-tertiary);
}

.input__24c2d {
  flex: 1;
  box-sizing: border-box;
  min-width: 48px;
  height: 20px;
  padding: 2px 4px;
  color: var(--text-normal);
  background: transparent;
  border: none;
  resize: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.input__24c2d::-webkit-input-placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.iconContainer__24c2d {
  position: relative;
  margin-right: 3px;
  height: 18px;
  width: 18px;
}

.icon__24c2d {
  width: 18px;
  height: 18px;
}

.iconClickable__24c2d {
  cursor: pointer;
}

/* stylelint-disable discord/var-validator */
/**
 * TODO Elevation tokens should eventually live under the design system
 */
.slider_a562c8 {
  width: 100%;
  height: 40px;
  position: relative;
}
/* Small Slider styles (i.e.:  ContextMenu) */
.mini_a562c8 {
  height: 20px;
}
.mini_a562c8 .bar_a562c8 {
    top: 17px;
    height: 6px;
  }
.mini_a562c8 .grabber_a562c8 {
    width: 12px;
    height: 12px;
    margin-left: -7px;
    margin-top: 3px;
    border-radius: 50%;
  }
.disabled_a562c8 {
  opacity: 0.6;
}
.disabled_a562c8 .grabber_a562c8 {
    cursor: not-allowed;
  }
.bar_a562c8 {
  position: relative;
  top: 16px;
  height: 8px;
  border-radius: 4px;
  display: block;
  overflow: hidden;
  background-color: var(--interactive-muted);
}
.barFill_a562c8 {
  background: var(--control-brand-foreground-new);
  height: 100%;
}
.track_a562c8 {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 5px;
}
.grabber_a562c8 {
  position: absolute;
  left: 0;
  width: 10px;
  height: 24px;
  margin-left: -5px;
  top: 50%;
  margin-top: -13px;
  border-radius: 3px;
  background-color: var(--white);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-border), var(--shadow-ledge), var(--shadow-low);
  cursor: ew-resize;
}
.mark_a562c8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  margin-left: -12px;
  position: absolute;

  left: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.markAbove_a562c8 {
  top: -6px;
}
.markBelow_a562c8 {
  bottom: -12px;
}
.markValue_a562c8 {
  padding-left: 1px;
  font-weight: 700;
  font-size: 10px;
  margin-bottom: 4px;
  min-height: 10px;
}
.markDash_a562c8 {
  height: 24px;
  width: 2px;
  background-color: var(--interactive-muted);
}
.markDashSimple_a562c8 {
  
  margin-top: 10px;
}
.markValue_a562c8 {
  color: var(--text-muted);
}
.defaultValue_a562c8 .markValue_a562c8 {
    color: var(--text-positive);
  }
:where(.visual-refresh) .slider_a562c8,
  :where(.visual-refresh) .mini_a562c8 {
    height: calc(24px + 0px);
    height: calc(24px + var(--bar-offset));
    --grabber-size: 16px;
    --bar-size: 4px;
    /* stylelint-disable-next-line length-zero-no-unit */
    --bar-offset: 0px;
  }
:where(.visual-refresh) .slider_a562c8.hasMarks_a562c8, :where(.visual-refresh) .mini_a562c8.hasMarks_a562c8 {
      /* height: 48px; */
      --bar-offset: 24px;
    }
:where(.visual-refresh) .slider_a562c8 .mark_a562c8, :where(.visual-refresh) .mini_a562c8 .mark_a562c8 {
      height: 48px;
      display: flex;
      top: 0;
      flex-direction: column;
      justify-content: space-between;
    }
:where(.visual-refresh) .slider_a562c8 .markValue_a562c8, :where(.visual-refresh) .mini_a562c8 .markValue_a562c8 {
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: var(--text-secondary);
    }
:where(.visual-refresh) .slider_a562c8 .defaultValue_a562c8 .markValue_a562c8, :where(.visual-refresh) .mini_a562c8 .defaultValue_a562c8 .markValue_a562c8 {
        color: var(--text-positive);
      }
:where(.visual-refresh) .slider_a562c8 .markDash_a562c8, :where(.visual-refresh) .mini_a562c8 .markDash_a562c8 {
      border-radius: 12px;
    }
:where(.visual-refresh) .slider_a562c8 .grabber_a562c8, :where(.visual-refresh) .mini_a562c8 .grabber_a562c8 {
      border-radius: 50%;
      width: var(--grabber-size);
      height: var(--grabber-size);
      margin-left: calc(var(--grabber-size) / -2);
      margin-top: calc(var(--grabber-size) / -2 + var(--bar-offset) / 2);
      box-shadow: var(--shadow-low);
      box-sizing: border-box;
      border: 1px solid var(--border-normal);
    }
:where(.visual-refresh) .slider_a562c8 .hasMarks_a562c8 .grabber_a562c8, :where(.visual-refresh) .mini_a562c8 .hasMarks_a562c8 .grabber_a562c8 {
      margin-top: calc(var(--grabber-size) / -2 + 12px);
    }
:where(.visual-refresh) .slider_a562c8 .bar_a562c8, :where(.visual-refresh) .mini_a562c8 .bar_a562c8 {
      background-color: var(--interactive-muted);
      height: var(--bar-size);
      top: calc((24px - var(--bar-size)) / 2 + var(--bar-offset));
    }
:where(.visual-refresh) .slider_a562c8 .hasMarks_a562c8 .bar_a562c8, :where(.visual-refresh) .mini_a562c8 .hasMarks_a562c8 .bar_a562c8 {
      top: 34px;
    }
:where(.visual-refresh) .slider_a562c8 .barFill_a562c8, :where(.visual-refresh) .mini_a562c8 .barFill_a562c8 {
      background-color: var(--blurple-50);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
/* stylelint-enable discord/var-validator */
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .barFill_a562c8 {
    background: Highlight;
  }
.enable-forced-colors .grabber_a562c8 {
    background-color: Highlight;
    border-color: Highlight;
  }
.enable-forced-colors .bar_a562c8 {
    background: Canvas;
    border: 1px solid ButtonText;
  }
.enable-forced-colors .markDash_a562c8 {
    background: CanvasText;
  }
.enable-forced-colors .disabled_a562c8 {
    opacity: 1;
  }
.enable-forced-colors .disabled_a562c8 .barFill_a562c8 {
      background: GrayText;
    }
.enable-forced-colors .disabled_a562c8 .grabber_a562c8 {
      background-color: GrayText;
      border-color: GrayText;
    }
.enable-forced-colors .disabled_a562c8 .bar_a562c8 {
      background: Canvas;
      border-color: GrayText;
    }

.sliderContainer__65039 {
  box-sizing: border-box;
  padding: 0 8px;
  overflow: visible;
}

.slider__65039 {
  position: relative;
  top: -14px;
}

:where(.visual-refresh) .slider__65039 {
    top: -4px;
  }

.backdrop_bc663c {
  background-color: var(--black-500);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.layer_bc663c {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 0;
  padding-top: 40px;
  padding-bottom: 40px;
}

.hidden_bc663c * {
  pointer-events: none !important;
}

.hidden_bc663c * {
  /* stylelint-disable-next-line declaration-no-important */
}

.content_e9b214 {
  padding-bottom: 20px;
}

.visual-refresh .cancelButton_e9b214 {
    margin-right: var(--spacing-12);
  }

:root {
  --custom-paginator-round-button-size: 28px;
}

.pageControlContainer_c15210 {
  bottom: 0;
  width: 100%;
  margin-top: 16px;
}

.pageControl_c15210 {
  display: flex;
  align-items: center;
  margin: auto;
  padding: 4px 0;
  width: -moz-min-content;
  width: min-content;
}

.pageButton_c15210 {
  font-weight: 600;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  height: var(--custom-paginator-round-button-size);
  width: -moz-min-content;
  width: min-content;
  min-width: 28px;
  min-width: var(--custom-paginator-round-button-size);
  padding: 6px;
  margin: 4px;
  cursor: pointer;
  color: var(--header-primary);
}

.pageButton_c15210:hover {
    color: var(--interactive-hover);
    background-color: var(--background-secondary-alt);
  }

.roundButton_c15210 {
  
  min-width: 28px;
  min-width: var(--custom-paginator-round-button-size);
  border-radius: 14px;
}

.endButton_c15210 {
  
  padding: 0 8px;
}

.endButton_c15210:first-child {
    padding-right: 12px;
  }

.endButton_c15210:last-child {
    padding-left: 12px;
  }

.endButtonInner_c15210 {
  display: flex;
  align-items: center;
}

.gap_c15210 {
  width: 28px;
  width: var(--custom-paginator-round-button-size);
  margin: 8px 4px;
  text-align: center;
  color: var(--text-normal);
}

.iconCaret_c15210 {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.iconCaret_c15210:first-child {
    margin-right: 4px;
  }

.iconCaret_c15210:last-child {
    margin-left: 4px;
  }

.jumpToPageInlineInput_c15210 {
  width: 50px;
}

.jumpToPageInlineInput_c15210 + .activeButton_c15210 {
  margin-left: 10px;
}

.activeButton_c15210 + .jumpToPageInlineInput_c15210 {
  margin-left: 6px;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .pageButton_c15210 {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;
    background-color: ButtonFace;
    color: ButtonText;
  }

.enable-forced-colors .pageButton_c15210:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.enable-forced-colors .activeButton_c15210,
  .enable-forced-colors .activeButton_c15210:hover {
    background-color: HighlightText;
    color: Highlight;
  }

.activeButton_c15210,
.activeButton_c15210:hover {
  color: var(--white-500);
  background-color: var(--brand-500);
}

.progress__89dcd {
  position: relative;
  width: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.progressBar__89dcd {
  width: 100%;
}

/* progress bars are a helpful UX animation and can play in Reduced Motion */

.animating__89dcd {
  /* stylelint-disable-next-line discord/respect-reduced-motion */
  transition: transform 0.2s ease-out;
}

.xxsmall__89dcd {
  height: 2px;
  border-radius: 2px;
}

.xsmall__89dcd {
  height: 4px;
  border-radius: 3px;
}

.small__89dcd {
  height: 6px;
  border-radius: 3px;
}

.large__89dcd {
  height: 8px;
  border-radius: 4px;
}

.indeterminate__89dcd {
  position: absolute;
  width: auto;
  top: 0;
}

.indeterminateBar1__89dcd {
  
  animation: indeterminate1__89dcd 2.1s infinite cubic-bezier(0.65, 0.815, 0.735, 0.395);
  animation-play-state: paused;
}

.indeterminateBar1__89dcd.animating__89dcd {
    animation-play-state: running;
  }

.indeterminateBar2__89dcd {
  
  animation: indeterminate2__89dcd 2.1s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 1.15s;
  animation-play-state: paused;
}

.indeterminateBar2__89dcd.animating__89dcd {
    animation-play-state: running;
  }

@keyframes indeterminate1__89dcd {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate2__89dcd {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}

.progressCircle__68862 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-345);
}

.circle__68862 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.circleBackgroundAlt__68862 {
  fill: hsl(var(--black-500-hsl) / 0.2);
}

.circleBackground__68862 {
  fill: var(--background-accent);
}

.circleProgress__68862 {
  fill: none;
}

.circleOverlay__68862 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress__58525 {
  position: relative;
  width: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.progressBar__58525 {
  position: absolute;
  width: 100%;
}

/* progress bars are a helpful UX animation and can play in Reduced Motion */

/* stylelint-disable-next-line discord/respect-reduced-motion */

.full-motion .animating__58525 {
    transition: transform 0.2s ease-out;
  }

.xsmall__58525 {
  height: 4px;
  border-radius: 3px;
}

.small__58525 {
  height: 6px;
  border-radius: 3px;
}

.large__58525 {
  height: 8px;
  border-radius: 4px;
}

.selectableItem_eb626b {
  box-sizing: border-box;
  border-radius: 3px;
  height: 34px;
  padding: 8px 10px;
  margin: 2px 0;
  margin-right: 4px;
  cursor: pointer;

  color: var(--header-primary);
}

  .selectableItem_eb626b.selected_eb626b {
    cursor: default;
  }

.selectableItemLabel_eb626b {
  font-size: 16px;
  position: relative;
  top: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.theme-light .selectableItem_eb626b:hover,
    .theme-light .selectableItem_eb626b:focus {
      background-color: var(--primary-200);
    }

.theme-dark .selectableItem_eb626b:hover,
    .theme-dark .selectableItem_eb626b:focus {
      background-color: hsl(var(--primary-700-hsl) / 0.6);
    }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .selectableItem_eb626b:hover,
    .enable-forced-colors .selectableItem_eb626b:focus {
      outline: 1px solid Highlight;
      outline-offset: -1px;
    }

.popoutList__92efc {
  border-radius: 5px;
  padding: 10px 10px 0;
  background: var(--background-secondary-alt);
}

.popoutListInput__92efc {
  font-size: 14px;
  width: 100%;
}

.popoutListEmpty__92efc {
  cursor: default;
  box-sizing: border-box;
  padding: 8px 10px 0;
  margin: 2px 4px 2px 0;
  color: var(--header-primary);
}

.divider__92efc {
  margin: 8px 0;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .popoutList__92efc {
    border: 2px solid CanvasText;
  }

/**
 * TODO Both of these should really be owned by the design system
 */

.radioBar__001a7 {
  /* stylelint-disable-next-line discord/var-validator */
  border-left: 3px solid var(--radio-bar-accent-color);
  border-radius: 4px;
  display: grid;
  grid-gap: 8px;
  align-items: center;
}

.radioBar__001a7.radioPositionLeft__001a7 {
    grid-template-columns: auto 1fr;
  }

.radioBar__001a7.radioPositionRight__001a7 {
    grid-template-columns: 1fr auto;
  }

.item__001a7[aria-checked='true'] {
  color: var(--interactive-active);
}

.itemFilled__001a7[aria-checked='true'] {
  background-color: var(--background-modifier-selected);
}

.radioIconForeground__001a7 {
  color: var(--interactive-active);
}

.item__001a7 {
  flex-direction: row;
  margin-bottom: 8px;
  color: var(--interactive-normal);
  cursor: pointer;
  border-radius: 3px;
  display: block;
}

.item__001a7:hover:not([aria-checked='true']):not(.disabled__001a7) {
    color: var(--interactive-hover);
  }

.item__001a7:active:not([aria-checked='true']):not(.disabled__001a7) {
    color: var(--interactive-active);
  }

.collapsibleItem__001a7 {
  flex-direction: row;
  flex: 1;
  color: var(--interactive-normal);
  cursor: pointer;
  border-radius: 3px;
  display: block;
}

.collapsibleItem__001a7:hover:not([aria-checked='true']):not(.disabled__001a7) {
    color: var(--interactive-hover);
  }

.collapsibleItem__001a7:active:not([aria-checked='true']):not(.disabled__001a7) {
    color: var(--interactive-active);
  }

.itemFilled__001a7 {
  background-color: var(--background-secondary);
}

.itemFilled__001a7:hover:not([aria-checked='true']):not(.disabled__001a7) {
    background-color: var(--background-modifier-hover);
  }

.itemFilled__001a7:active:not([aria-checked='true']):not(.disabled__001a7) {
    background-color: var(--background-modifier-active);
  }

.tooltipWrapper__001a7 {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
}

.tooltipWrapper__001a7:last-child {
    margin: 0;
  }

.disabled__001a7 {
  opacity: 0.3;
  cursor: not-allowed;
}

.info__001a7 {
  margin-right: 8px;
  width: 100%;
  display: grid;
  grid-gap: 4px;
  align-items: center;
}

.icon__001a7 {
  margin-left: 8px;
}

:where(.visual-refresh) .radioBar__001a7,
  :where(.visual-refresh) .item__001a7[aria-checked='true'],
  :where(.visual-refresh) .itemFilled__001a7[aria-checked='true'],
  :where(.visual-refresh) .item__001a7 {
    border-radius: var(--radius-sm);
  }

:where(.visual-refresh) .item__001a7 {
    margin-bottom: var(--space-4);
  }

:where(.visual-refresh) .radioIndicator__001a7 {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
  }

:where(.visual-refresh) .visual-refresh .radioIndicatorGroup__001a7 {
      display: flex;
      flex-direction: row;
      gap: var(--space-8);
    }

:where(.visual-refresh) .refreshIcon__001a7 {
    fill: white;
  }

:where(.visual-refresh) .refreshIconStroke__001a7 {
    stroke: var(--checkbox-border-default);
  }

:where(.visual-refresh) .refreshIconFill__001a7 {
    fill: transparent;
  }

:where(.visual-refresh) .radioBar__001a7 {
    padding: var(--space-12) var(--space-16) !important;
  }

:where(.visual-refresh) .radioBar__001a7 {
    /* stylelint-disable-next-line declaration-no-important */
  }

:where(.visual-refresh) .item__001a7 {
    color: var(--text-primary);
  }

:where(.visual-refresh) .radioIndicatorChecked__001a7 .refreshIconStroke__001a7 {
      stroke: var(--checkbox-border-checked);
    }

:where(.visual-refresh) .radioIndicatorChecked__001a7 .refreshIconFill__001a7 {
      fill: var(--redesign-input-control-selected);
    }

:where(.visual-refresh) .itemFilled__001a7 {
    background: none;
  }

:where(.visual-refresh) .itemFilled__001a7:hover:not([aria-checked='true']):not(.disabled__001a7) {
      background-color: var(--background-mod-subtle);
      color: var(--text-primary);
    }

:where(.visual-refresh) .itemFilled__001a7:active:not([aria-checked='true']):not(.disabled__001a7) {
      background-color: var(--background-mod-normal);
      color: var(--text-primary);
    }

:where(.visual-refresh) .itemFilled__001a7[aria-checked='true'] {
    background-color: var(--background-mod-subtle);
  }

.visual-refresh.full-motion .item__001a7 {
    transition:
      background-color 0.1s ease, color 0.1s ease;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .radioBar__001a7 {
    forced-color-adjust: none;
    border: 1px solid ButtonText;
    background-color: ButtonFace;
    color: ButtonText;
  }

.enable-forced-colors .radioIconForeground__001a7 {
    color: HighlightText;
  }

.enable-forced-colors .refreshIcon__001a7 {
    fill: HighlightText;
  }

.enable-forced-colors .refreshIconStroke__001a7 {
    stroke: ButtonText;
  }

.enable-forced-colors .refreshIconFill__001a7 {
    fill: transparent;
  }

.enable-forced-colors .item__001a7[aria-checked='true'] .radioBar__001a7 {
      border-color: Highlight;
      background-color: Highlight;
      color: HighlightText;
    }

.enable-forced-colors .radioIndicatorChecked__001a7 .refreshIconStroke__001a7 {
      stroke: HighlightText;
    }

.enable-forced-colors .radioIndicatorChecked__001a7 .refreshIconFill__001a7 {
      fill: Highlight;
    }

.enable-forced-colors .item__001a7.disabled__001a7 {
    opacity: 1;
  }

.enable-forced-colors .item__001a7.disabled__001a7,
    .enable-forced-colors .item__001a7.disabled__001a7:hover {
      color: GrayText;
    }

.enable-forced-colors .item__001a7.disabled__001a7 .radioBar__001a7 {
      border-color: GrayText;
      background-color: Canvas;
      color: GrayText;
    }

.enable-forced-colors .radioIndicatorDisabled__001a7 .radioIconForeground__001a7 {
      color: GrayText;
    }

.enable-forced-colors .radioIndicatorDisabled__001a7 .refreshIcon__001a7 {
      fill: GrayText;
    }

.enable-forced-colors .radioIndicatorDisabled__001a7 .refreshIconStroke__001a7 {
      stroke: GrayText;
    }

.enable-forced-colors .radioIndicatorDisabled__001a7 .refreshIconFill__001a7 {
      fill: Canvas;
    }

/** TODO Design system should own desaturation */

.svg__4f569 {
  vertical-align: text-bottom;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  forced-color-adjust: none;
  flex-shrink: 0;
}

.background__4f569 {
  fill: var(--background-secondary-alt);
}

.dotBorderColor__4f569 {
  
}

.dot__4f569 {
  
}

.dotBorderColor__4f569 {
  opacity: 0.4;
}

.roleCircle__4f569 {
  
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0 4px;
  flex-shrink: 0;
  forced-color-adjust: none;
}

.dotBorderBase__4f569 {
  fill: var(--header-primary);
}

/** TODO Design system should own desaturation */

.roleDotRight__703b9 {
  margin-left: 0.25rem;
}

.roleDotLeft__703b9 {
  margin-right: 0.25rem;
}

.username__703b9 {
  
}

.tabItem__9e06a {
  cursor: pointer;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 13px;
  margin-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.tabContainer__9e06a {
  display: flex;
  flex-direction: row;
  color: var(--text-muted-on-default);
}

.pillContainer__9e06a {
  display: flex;
  flex-direction: row;
  justify-content: stretch;

  background-color: var(--background-secondary-alt);
  border-radius: 8px;
}

.pillItem__9e06a {
  flex: 1 1 auto;

  display: flex;
  justify-content: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--text-muted);
}

.pillItemSelected__9e06a {
  background-color: var(--background-modifier-accent);
  box-shadow: var(--elevation-high);
  color: var(--interactive-active);
}

.theme-dark .tabItemSelected__9e06a {
    border-bottom: 2px solid var(--primary-100);
  }

.theme-light .tabItemSelected__9e06a {
    border-bottom: 2px solid var(--primary-500);
  }

.tabItemSelected__9e06a {
  color: var(--header-primary);
}

.select__3f413 {
  border: 1px solid transparent;
  padding: 8px 8px 8px 12px;
  cursor: pointer;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-radius: 4px;
}

.wrapper__3f413,
.select__3f413 {
  color: var(--text-normal);
  font-weight: 500;
}

.searchable__3f413 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.searchInput__3f413 {
  cursor: pointer;
  background: inherit;
  color: inherit;
  border: none;
  font-size: 16px;
  padding: 0;
  width: 100%;
}

.searchInput__3f413.multi__3f413 {
  width: auto;
  height: 32px;
  margin-left: 4px;
}

.editing__3f413 {
  font-weight: 400;
}

.label__3f413 {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 16px;
  left: 12px;
}

.open__3f413 {
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
}

.selectPositionTop__3f413.open__3f413 {
  border-radius: 0 0 4px 4px;
}

/* Apply to disabled .select and any child elements */

.disabled__3f413,
  .disabled__3f413 * {
    cursor: not-allowed;
    opacity: 0.6;
  }

.searchInput__3f413.multi__3f413.hidden__3f413 {
  opacity: 0;
  width: 0;
}

.iconsContainer__3f413 {
  height: 42px;
}

.iconsCenter__3f413 {
  height: 100%;
  display: flex;
  align-items: center;
}

.value__3f413 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.placeholder__3f413 {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.measurement__3f413 {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.lookFilled__3f413.select__3f413 {
  background-color: var(--input-background);
  border-color: var(--input-background);
}

.popout__3f413 {
  box-sizing: border-box;
  border: 1px solid var(--background-tertiary);
  background: var(--background-secondary);
  border-radius: 0 0 4px 4px;
}

.popout__3f413.popoutPositionTop__3f413 {
  border-radius: 4px 4px 0 0;
}

.lookFilled__3f413.popout__3f413 {
  border-radius: 0 0 3px 3px;
}

.lookFilled__3f413.popout__3f413.popoutPositionTop__3f413 {
  border-radius: 3px 3px 0 0;
}

.lookFilled__3f413.select__3f413:hover.option__3f413,
.lookFilled__3f413.option__3f413 {
  border-color: var(--brand-500);
  border-bottom-color: var(--background-tertiary);
}

.option__3f413 {
  padding: 12px;
  cursor: pointer;
  color: var(--interactive-normal);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  font-weight: 500;
  box-sizing: border-box;
}

.option__3f413:focus,
.option__3f413:hover,
.option__3f413.focused__3f413 {
  background-color: var(--background-modifier-hover);
  color: var(--interactive-hover);
}

.option__3f413[aria-selected='true']:not(.option__3f413.multi__3f413) {
  color: var(--interactive-active);
  background-color: var(--background-modifier-selected);
}

.selectedIcon__3f413 {
  color: var(--brand-500);
}

.icons__3f413 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.value__3f413 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clear__3f413 {
  display: block;
  cursor: pointer;
  pointer-events: all;
}

.dropdownIcon__3f413 {
  cursor: pointer;
  pointer-events: all;
}

.noResults__3f413 {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-secondary);
  width: 100%;
}

.loading__3f413 {
  height: 40px;
  display: flex;
  justify-content: center;
}

.loadingSpinner__3f413 {
  background-color: var(--interactive-active);
}

.wrapper__3f413 {
  display: grid;
  grid-template-columns: 1fr auto;
}

.wrapper__3f413 .select__3f413 {
  grid-column: 1 / span 2;
  grid-row: 1;
  padding: 10px 12px;

  /* This custom property is passed down from React after the icons are measured. */
  /* stylelint-disable discord/var-validator */
  padding-right: calc(24px + var(--icons-width));
  /* stylelint-enable discord/var-validator */
}

.wrapper__3f413 .select__3f413.multi__3f413 {
  padding-left: 4px;
  padding-bottom: 4px;
  padding-top: 0;
}

.wrapper__3f413 .icons__3f413 {
  grid-column: 2;
  grid-row: 1;
  margin-right: 8px;
  pointer-events: none;
}

.wrapper__3f413 .value__3f413 {
  display: flex;
}

.wrapper__3f413 .value__3f413.multi__3f413 {
  display: block;
  white-space: normal;
}

.wrapper__3f413 .searchInput__3f413 {
  flex: 1 0 0;
}

.searchableSelect__3f413 .option__3f413 {
  display: grid;
  grid-template-areas: 'prefix content suffix selectedIcon';
  grid-template-columns: auto 1fr auto auto;
  align-content: center;
}

.searchableSelect__3f413 .prefix__3f413 {
  grid-area: prefix;
  margin-right: 8px;
}

.searchableSelect__3f413 .suffix__3f413 {
  grid-area: suffix;
  margin-left: 8px;
  margin-right: 8px;
}

.searchableSelect__3f413 .content__3f413 {
  grid-area: content;
  display: flex;
  min-width: 0;
}

.searchableSelect__3f413 .selectedIcon__3f413 {
  grid-area: selectedIcon;
}

.optionPillWrapper__3f413 {
  padding: 0;
  min-width: auto;
  width: auto;
}

.optionPillContainer__3f413 {
  display: inline;
}

.optionPillItem__3f413 {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.optionPill__3f413 {
  display: inline-flex;
  align-items: center;
  background: var(--background-primary);
  color: var(--interactive-active);
  padding: 6px 8px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 20px;
}

.optionPillBtn__3f413 {
  padding: 0;
  min-width: 0;
  height: auto;
  min-height: auto;
}

.deleteOptionIcon__3f413 {
  color: var(--interactive-normal);
  margin-left: 8px;
}

.optionPillItem__3f413,
.searchInput__3f413.multi__3f413 {
  margin-top: 4px;
}

/**
 * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
 * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
 * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
 */

.no-webkit-scrollbar .noScrollbar__3f413 {
    scrollbar-width: none;
  }

.noScrollbar__3f413::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.multiSelectCheckbox__3f413 {
  grid-area: selectedIcon;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.multiSelectCheckbox__3f413.unchecked__3f413 {
  border: 2px solid var(--interactive-normal);
}

.multiSelectCheckbox__3f413.checked__3f413 {
  border: 1px solid var(--brand-500);
  background: var(--brand-500);
}

.multiSelectCheck__3f413 {
  color: var(--white-500);
}

.optionPill__3f413 {
  display: grid;
  grid-template-areas: 'prefix content suffix clearIcon';
  grid-template-columns: auto 1fr auto auto;
  align-content: center;
}

.optionPill__3f413 .prefix__3f413 {
  grid-area: prefix;
  margin-right: 8px;
}

.optionPill__3f413 .suffix__3f413 {
  grid-area: suffix;
  margin-left: 8px;
  margin-right: 8px;
}

.optionPill__3f413 .content__3f413 {
  grid-area: content;
}

.optionPill__3f413 .deleteOptionIcon__3f413 {
  grid-area: clearIcon;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .select__3f413 {
    background-color: Canvas;
    border-color: ButtonText;
  }

.enable-forced-colors .open__3f413 {
    border-color: Highlight;
  }

/* Apply to disabled .select and any child elements */

.enable-forced-colors .disabled__3f413,
    .enable-forced-colors .disabled__3f413 * {
      border-color: GrayText;
      color: GrayText;
      opacity: 1;
    }

.enable-forced-colors .placeholder__3f413 {
    color: GrayText;
  }

.enable-forced-colors .option__3f413 {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;
    background-color: Canvas;
    border: 1px solid Canvas;
    color: CanvasText;
  }

.enable-forced-colors .option__3f413:focus,
  .enable-forced-colors .option__3f413:hover,
  .enable-forced-colors .option__3f413.focused__3f413 {
    background-color: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
  }

.enable-forced-colors .option__3f413[aria-selected='true'] {
    background-color: HighlightText !important;
    color: Highlight !important;
  }

.enable-forced-colors .option__3f413[aria-selected='true'] {
    /* not selector overridding without !important */
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
  }

.enable-forced-colors .option__3f413[aria-selected='true']:focus,
    .enable-forced-colors .option__3f413[aria-selected='true']:hover,
    .enable-forced-colors .option__3f413[aria-selected='true'].focused__3f413 {
      border-color: Highlight !important;
    }

.enable-forced-colors .option__3f413[aria-selected='true']:focus,
    .enable-forced-colors .option__3f413[aria-selected='true']:hover,
    .enable-forced-colors .option__3f413[aria-selected='true'].focused__3f413 {
      /* stylelint-disable-next-line declaration-no-important */
    }

.enable-forced-colors .selectedIcon__3f413 {
    color: Highlight;
  }

:where(.visual-refresh) .select__3f413,
  :where(.visual-refresh) .iconsContainer__3f413 {
    min-height: 44px;
  }

:where(.visual-refresh) .wrapper__3f413 .select__3f413.multi__3f413 {
    padding-left: 6px;
    padding-bottom: 6px;
  }

:where(.visual-refresh) .lookFilled__3f413.select__3f413 {
    background-color: var(--input-background);
  }

:where(.visual-refresh) .lookFilled__3f413.select__3f413 {
    border-radius: var(--radius-sm);
    border: 1px solid var(--input-border);
  }

:where(.visual-refresh) .popout__3f413.popoutPositionTop__3f413,
  :where(.visual-refresh) .lookFilled__3f413.popout__3f413,
  :where(.visual-refresh) .lookFilled__3f413.popout__3f413.popoutPositionTop__3f413,
  :where(.visual-refresh) .popout__3f413 {
    background-color: var(--background-surface-higher);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
  }

:where(.visual-refresh) .placeholder__3f413 {
    color: var(--text-secondary);
  }

:where(.visual-refresh) .popout__3f413 {
    margin: 0;
    background-color: var(--background-surface-higher);
    border-color: var(--border-subtle);
  }

:where(.visual-refresh) .popout__3f413:not(.popoutPositionTop__3f413) {
      margin-top: 8px;
    }

:where(.visual-refresh) .popout__3f413.popoutPositionTop__3f413 {
      margin-bottom: 8px;
    }

:where(.visual-refresh) .option__3f413 {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--text-secondary);
  }

:where(.visual-refresh) .option__3f413[aria-selected='true'] {
      font-weight: 500;
      color: var(--text-default);
    }

:where(.visual-refresh) .option__3f413[aria-selected='true']:hover {
        background-color: var(--background-mod-subtle);
      }

:where(.visual-refresh) .option__3f413:hover {
      background-color: var(--background-mod-subtle);
      color: var(--text-default);
    }

:where(.visual-refresh) .optionPillItem__3f413 {
    margin-right: 6px;
  }

:where(.visual-refresh) .optionPillItem__3f413 button {
      background-color: var(--background-surface-higher);
    }

:where(.visual-refresh) .optionPillItem__3f413 button .optionPill__3f413 {
        border-radius: var(--radius-xs);
        border: 1px solid var(--border-faint);
      }

:where(.visual-refresh) .optionPillItem__3f413,
  :where(.visual-refresh) .searchInput__3f413.multi__3f413 {
    margin-top: 6px;
  }

:where(.visual-refresh) .optionPill__3f413 {
    font-size: 14px;
  }

:where(.visual-refresh) .optionPill__3f413 .deleteOptionIcon__3f413 {
      width: 16px;
      height: 16px;
    }

:where(.visual-refresh) .multiSelectCheckbox__3f413 {
    border-radius: 6px;
  }

:where(.visual-refresh) .multiSelectCheckbox__3f413.unchecked__3f413 {
    border: 1px solid var(--border-strong);
  }

.wrapper_c99fc3 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
}

.icon_c99fc3 {
  opacity: 0.3;
  align-self: center;
  min-width: 16px;
}

.title_c99fc3 {
  margin: 0 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.subtitle_c99fc3 {
  margin-left: 8px;
  min-width: 48px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--input-placeholder-text);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .icon_c99fc3 {
    opacity: 1;
  }

.enable-forced-colors .lighten_c99fc3 {
    opacity: 1;
  }

.enable-forced-colors .title_c99fc3,
  .enable-forced-colors .subtitle_c99fc3 {
    color: inherit;
  }

.transitionGroup__6ba63 {
  overflow: hidden;
  position: relative;
}

.measurement__6ba63 {
  overflow: hidden;
}

.measurementFill__6ba63 {
  
  flex: 0 0 auto;
  width: 100%;
}

.measurementFillStatic__6ba63 {
  height: 100%;
}

.animatedNode__6ba63 {
  width: 100%;
}

/* stylelint-disable discord/var-validator */
.themed_b3f026 {
  /* Here for the reference life */
}
.selected_b3f026 {
  /* Here for the reference life */
}
.header_b3f026,
.item_b3f026 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-shrink: 0;
}
.headerText_b3f026 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.header_b3f026 {
  color: var(--channels-default);
}
.item_b3f026 {
  position: relative;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  font-weight: 500;
}
.themed_b3f026.item_b3f026,
.brand_b3f026.item_b3f026 {
  color: var(--interactive-normal);
}
.themed_b3f026.item_b3f026:hover,
.brand_b3f026.item_b3f026:hover {
  color: var(--interactive-hover);
}
.themed_b3f026.item_b3f026:active,
.brand_b3f026.item_b3f026:active {
  color: var(--interactive-active);
}
.separator_b3f026 {
  background-color: var(--background-modifier-accent);
}
.selected_b3f026.item_b3f026,
.selected_b3f026.item_b3f026:hover {
  cursor: default;
  color: var(--interactive-active);
}
.selected_b3f026 {
  cursor: default;
}
.disabled_b3f026.item_b3f026,
.disabled_b3f026.item_b3f026:hover {
  cursor: default;
  color: var(--interactive-muted);
}
.visual-refresh .themed_b3f026.item_b3f026,
  .visual-refresh .brand_b3f026.item_b3f026 {
    color: var(--text-secondary);
  }
.visual-refresh .themed_b3f026.item_b3f026:hover,
  .visual-refresh .brand_b3f026.item_b3f026:hover {
    color: var(--text-primary);
  }
.visual-refresh .themed_b3f026.item_b3f026:active,
  .visual-refresh .brand_b3f026.item_b3f026:active {
    color: var(--text-primary);
  }
.visual-refresh .separator_b3f026 {
    background-color: var(--border-subtle);
  }
.visual-refresh .selected_b3f026.item_b3f026,
  .visual-refresh .selected_b3f026.item_b3f026:hover {
    cursor: default;
    color: var(--text-primary);
  }
.visual-refresh .selected_b3f026 {
    cursor: default;
  }
.visual-refresh .disabled_b3f026.item_b3f026,
  .visual-refresh .disabled_b3f026.item_b3f026:hover {
    cursor: default;
    color: var(--text-muted);
  }
.side_b3f026 {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.side_b3f026 .header_b3f026,
  .side_b3f026 .item_b3f026 {
    padding: 6px 10px;
  }
.side_b3f026 .header_b3f026:first-child {
      padding-top: 0;
    }
.side_b3f026 .item_b3f026 {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-radius: 4px;
  }
.side_b3f026 .separator_b3f026 {
    margin: 8px 10px;
    height: 1px;
  }
.top_b3f026 {
  display: flex;
  flex-direction: row;
}
.top_b3f026 .item_b3f026 {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
  }
.top_b3f026 .disabled_b3f026.item_b3f026 {
    cursor: not-allowed;
  }
.top_b3f026 .themed_b3f026.item_b3f026:hover {
    border-bottom-color: var(--interactive-hover);
  }
.top_b3f026 .themed_b3f026.item_b3f026:active {
    border-bottom-color: var(--interactive-active);
  }
.top_b3f026 .selected_b3f026.themed_b3f026.item_b3f026 {
    border-bottom-color: var(--interactive-active);
  }
/* use brand color variants instead of interactive color */
.top_b3f026 .brand_b3f026.item_b3f026:hover {
    border-bottom-color: var(--brand-500);
  }
.top_b3f026 .brand_b3f026.item_b3f026:active {
    border-bottom-color: var(--control-brand-foreground);
  }
.top_b3f026 .brand_b3f026.selected_b3f026.item_b3f026 {
    border-bottom-color: var(--control-brand-foreground);
  }
.top_b3f026 .disabled_b3f026.themed_b3f026.item_b3f026:hover,
  .top_b3f026 .disabled_b3f026.brand_b3f026.item_b3f026:hover {
    border-bottom-color: transparent;
  }
.topPill_b3f026 {
  display: flex;
  flex-direction: row;
}
.topPill_b3f026 .item_b3f026 {
    border-radius: 4px;
    margin: 0 8px;
    padding: 2px 8px;
  }
.topPill_b3f026 .separator_b3f026 {
    width: 1px;
  }
.topPill_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026), .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) {
    background-color: var(--background-modifier-hover);
  }
.topPill_b3f026 .themed_b3f026.item_b3f026:active:not(.disabled_b3f026), .side_b3f026 .themed_b3f026.item_b3f026:active:not(.disabled_b3f026) {
    background-color: var(--background-modifier-active);
  }
.topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026, .side_b3f026 .themed_b3f026.selected_b3f026.item_b3f026 {
    background-color: var(--background-modifier-selected);
  }
.visual-refresh .topPill_b3f026 .item_b3f026 {
      border-radius: var(--radius-sm);
      margin: 0 8px;
      padding: 4px 12px;
      min-height: 32px;
      cursor: pointer;
    }
.visual-refresh .topPill_b3f026 .item_b3f026.disabled_b3f026 {
      cursor: not-allowed;
    }
.visual-refresh .topPill_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026), .visual-refresh .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) {
      background-color: var(--button-secondary-background-hover);
    }
.visual-refresh .topPill_b3f026 .themed_b3f026.item_b3f026:active:not(.disabled_b3f026), .visual-refresh .side_b3f026 .themed_b3f026.item_b3f026:active:not(.disabled_b3f026) {
      background-color: var(--button-secondary-background-active);
    }
.visual-refresh .topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026, .visual-refresh .side_b3f026 .themed_b3f026.selected_b3f026.item_b3f026 {
      background-color: var(--button-secondary-background);
    }
.visual-refresh.full-motion .item_b3f026 {
    transition: background-color 0.3s ease;
  }
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .item_b3f026 {
    background-color: ButtonFace !important;
    color: ButtonText !important;
  }
.enable-forced-colors .item_b3f026 {
    /* remove the "backplate" from the button and apply forced colors manually
     * https://bugs.chromium.org/p/chromium/issues/detail?id=1315404
     */
    forced-color-adjust: none;

    /* ignore all theming */
    /* stylelint-disable-next-line declaration-no-important */
    border: 1px solid ButtonFace;
    /* stylelint-disable-next-line declaration-no-important */
  }
.enable-forced-colors .item_b3f026:hover {
      background-color: ButtonFace !important;
      color: ButtonText !important;
    }
.enable-forced-colors .item_b3f026:hover {
      /* stylelint-disable-next-line declaration-no-important */
      border-color: ButtonText;
      /* stylelint-disable-next-line declaration-no-important */
    }
.enable-forced-colors .selected_b3f026.item_b3f026,
  .enable-forced-colors .selected_b3f026.item_b3f026:hover,
  .enable-forced-colors .item_b3f026[aria-selected='true'],
  .enable-forced-colors .item_b3f026[aria-selected='true']:hover {
    background-color: HighlightText !important;
    color: Highlight !important;
  }
.enable-forced-colors .selected_b3f026.item_b3f026,
  .enable-forced-colors .selected_b3f026.item_b3f026:hover,
  .enable-forced-colors .item_b3f026[aria-selected='true'],
  .enable-forced-colors .item_b3f026[aria-selected='true']:hover {
    /* stylelint-disable-next-line declaration-no-important */
    border-color: Highlight;
    /* stylelint-disable-next-line declaration-no-important */
  }
.enable-forced-colors .disabled_b3f026.item_b3f026,
  .enable-forced-colors .disabled_b3f026.item_b3f026:hover {
    background-color: Canvas !important;
    border-color: Canvas !important;
    color: GrayText !important;
  }
.enable-forced-colors .disabled_b3f026.item_b3f026,
  .enable-forced-colors .disabled_b3f026.item_b3f026:hover {
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
  }
.enable-forced-colors .top_b3f026 .item_b3f026 {
      border-radius: 4px 4px 0 0;
      padding-left: 4px;
      padding-right: 4px;
    }
:where(.visual-refresh) .top_b3f026 {
    border-bottom: 1px solid var(--border-subtle);
    border-bottom-color: var(--border-subtle);
  }
:where(.visual-refresh) .top_b3f026 .item_b3f026 {
      border-bottom: none !important;
    }
:where(.visual-refresh) .top_b3f026 .item_b3f026 {
      --selected-tab-item-color: var(--interactive-active);
      /* stylelint-disable-next-line declaration-no-important */
      padding-bottom: 16px;

      /* Ensure the decorative border always covers up the default tab bar border */
      margin-bottom: -1px;

      /* text-sm/semibold */
      font-size: 14px;
      line-height: 14px;
      font-weight: 600;
      position: relative;
      --tab-item-color: var(--text-primary);
    }
:where(.visual-refresh) .top_b3f026 .item_b3f026:hover:after, :where(.visual-refresh) .top_b3f026 .item_b3f026.selected_b3f026:after {
          content: '';
          position: absolute;
          top: 100%;
          width: 100%;
          height: 2px;
          left: 0;
          margin-top: -2px;
          background: var(--selected-tab-item-color);
          z-index: 1;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
:where(.visual-refresh) .top_b3f026 .item_b3f026.selected_b3f026 {
        color: var(--selected-tab-item-color);
      }
:where(.visual-refresh) .top_b3f026 .item_b3f026.brand_b3f026 {
        --selected-tab-item-color: var(--text-brand);
      }
:where(.visual-refresh) .top_b3f026 .item_b3f026 + .item_b3f026 {
        margin-left: 24px;
      }

.textArea__7aff3 {
  height: auto;
  resize: none;
}

.resizeable__7aff3 {
  resize: auto;
}

.inputMaxLength__7aff3 {
  position: relative;
}

.flex__7aff3 {
  display: flex;
  flex: 1 1 auto;
}

.maxLength__7aff3,
.characterCount__7aff3 {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 12px;
  font-family: var(--font-code);
  pointer-events: none;
  color: var(--text-muted);
}

.errorOverflow__7aff3 {
  color: var(--text-danger);
}

.errorMessage__7aff3 {
  margin-top: 1px;
}

.select__71cea {
  /* Align with the text input */
  background-color: var(--deprecated-text-input-bg);
  border: 1px solid var(--deprecated-text-input-border);
  height: 40px;
}

.containerTop__45edc {
  display: flex;
  flex-direction: column;
  top: 36px;
  z-index: 4999;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.containerBottom__45edc {
  display: flex;
  flex-direction: column;
  bottom: 140px;
  z-index: 4999;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}

.container__5e1cf {
  border-radius: var(--radius-sm);
  background-color: var(--background-secondary);
  box-shadow: var(--shadow-low);
  width: 100%;
}

.toolbar__5e1cf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.footer__5e1cf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.table__5e1cf {
  color: var(--text-normal);
  border-collapse: collapse;
  width: 100%;
  overflow: scroll;
  table-layout: fixed;
}

.header__5e1cf {
  border-bottom: 1px solid var(--divider-strong);
  border-top: 1px solid var(--divider-subtle);
}

.body__5e1cf {
  padding: 8px;
}

.row__5e1cf {
  transition: background-color 0.1s ease;
  outline: none;
  border-bottom: 1px solid var(--divider-subtle);
  white-space: nowrap;
}

.row__5e1cf[data-focus-visible] {
    box-shadow: 0 0 0 4px var(--blue-345);
  }

.row__5e1cf[data-pressed] {
    background-color: var(--background-modifier-active);
  }

.row__5e1cf[data-hovered] {
    background-color: var(--background-modifier-hover);
  }

.row__5e1cf[aria-selected='true'] {
    background-color: var(--background-modifier-selected);
  }

.row__5e1cf:last-child {
  border-bottom: none;
}

.column__5e1cf {
  outline: none;
  padding: 16px;
}

.column__5e1cf[data-focus-visible] {
    box-shadow: 0 0 0 4px var(--blue-345);
  }

.columnText__5e1cf {
  text-align: left;
}

.cell__5e1cf {
  outline: none;
  padding: 16px;
}

.cell__5e1cf[data-focus-visible] {
    box-shadow: 0 0 0 4px var(--blue-345);
  }

.backdrop__78332 {
  position: fixed;
  top: 0;
  /* stylelint-disable-next-line discord/var-validator */
  right: 0;
  right: var(--devtools-sidebar-width, 0);
  bottom: 0;
  left: 0;
  transform: translateZ(0);
}

  .backdrop__78332.withLayer__78332 {
    pointer-events: all;
  }

.breadcrumbs__75013 {
  overflow: hidden;
}

.breadcrumbWrapper__75013 {
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-grow: 0;
  color: var(--text-muted);
}

.activeBreadcrumb__75013 {
  color: var(--interactive-active);
}

.breadcrumbFinalWrapper__75013 {
  overflow: hidden;
}

.breadcrumbClickWrapper__75013 {
  overflow: hidden;
}

.breadcrumb__75013 {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 14px;
}

.breadcrumbArrow__75013 {
  width: 18px;
  height: 18px;
}

.interactiveBreadcrumb__75013 {
  cursor: pointer;
}

.group__3d4a0 {
  display: flex;
  box-sizing: border-box;
}

.item__3d4a0 {
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  border-width: 1px;
  border-left-width: 0;
  border-style: solid;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item__3d4a0:first-child {
    border-left-width: 1px;
    border-radius: 3px 0 0 3px;
  }

.item__3d4a0:last-child {
    border-radius: 0 3px 3px 0;
  }

.item__3d4a0:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

/* Light Theme */

.theme-light .item__3d4a0 {
    border-color: var(--primary-200);
  }

/* Dark Theme */

.theme-dark .item__3d4a0 {
    border-color: var(--primary-800);
  }

.btnHamburger__006d6 {
  width: 60px;
  height: 45px;
  position: relative;
  cursor: pointer;
  background: transparent;
  transform: scale(0.3);
  margin-right: -20px;
  padding: 8px;
}

  .btnHamburger__006d6 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 50%;
    background: hsl(0 calc(1 * 0%) 100.0%);
    opacity: 1;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  @supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
.btnHamburger__006d6 span {
    background: hsl(0 calc(var(--saturation-factor, 1) * 0%) 100.0%);
  }
}

  .btnHamburger__006d6 span:nth-child(even) {
      left: 50%;
      border-radius: 0 9px 9px 0;
    }

  .btnHamburger__006d6 span:nth-child(odd) {
      left: 0;
      border-radius: 9px 0 0 9px;
    }

  .btnHamburger__006d6 span:nth-child(1),
    .btnHamburger__006d6 span:nth-child(2) {
      top: 0;
    }

  .btnHamburger__006d6 span:nth-child(3),
    .btnHamburger__006d6 span:nth-child(4) {
      top: 18px; /* height * 2 */
    }

  .btnHamburger__006d6 span:nth-child(5),
    .btnHamburger__006d6 span:nth-child(6) {
      top: 36px; /* height * 4 */
    }

.theme-dark .btnHamburger__006d6 span {
    background: hsl(0 calc(1 * 0%) 100.0%);
  }

@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
.theme-dark .btnHamburger__006d6 span {
    background: hsl(0 calc(var(--saturation-factor, 1) * 0%) 100.0%);
  }
}

.theme-light .btnHamburger__006d6 span {
    background: hsl(0 calc(1 * 0%) 0.0%);
  }

@supports (color: hsl(0 0% 0% / 0)) and (top: var(--f)) {
.theme-light .btnHamburger__006d6 span {
    background: hsl(0 calc(var(--saturation-factor, 1) * 0%) 0.0%);
  }
}

.btnHamburgerOpen__006d6 span:nth-child(1),
  .btnHamburgerOpen__006d6 span:nth-child(6) {
    transform: rotate(45deg);
  }

.btnHamburgerOpen__006d6 span:nth-child(2),
  .btnHamburgerOpen__006d6 span:nth-child(5) {
    transform: rotate(-45deg);
  }

.btnHamburgerOpen__006d6 span:nth-child(1) {
    left: 5px;
    top: 7px;
  }

.btnHamburgerOpen__006d6 span:nth-child(2) {
    left: calc(50% - 5px);
    top: 7px;
  }

.btnHamburgerOpen__006d6 span:nth-child(3) {
    left: -50%;
    opacity: 0;
  }

.btnHamburgerOpen__006d6 span:nth-child(4) {
    left: 100%;
    opacity: 0;
  }

.btnHamburgerOpen__006d6 span:nth-child(5) {
    left: 5px;
    top: 29px;
  }

.btnHamburgerOpen__006d6 span:nth-child(6) {
    left: calc(50% - 5px);
    top: 29px;
  }

/* This is no longer needed in the Refresh */
.platform-osx:not(.visual-refresh) .container__9293f {
  -webkit-app-region: drag;
}
.hamburger__9293f {
  flex: 0 0 auto;
  margin-right: -4px;
}
.container__9293f {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
  padding: 8px;
  min-height: var(--custom-channel-header-height);
  box-sizing: border-box;
  font-size: 16px;
  line-height: 20px;
  cursor: default;
  z-index: 2;
  color: var(--text-normal);
  --__header-bar-background: var(--background-primary);
}
.container__9293f * {
    box-sizing: border-box;
  }
.container__9293f.transparent__9293f {
    background: transparent;
  }
.visual-refresh .container__9293f {
    --__header-bar-background: var(--background-base-lower);
    border-bottom: 1px solid var(--border-subtle);
    padding-left: 20px;
  }
.upperContainer__9293f {
  display: flex;
  flex: 1;
}
.children__9293f {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
/* NOTE(amadeus): We have to do this fade out effect using an element because a
 * CSS mask incurs a nasty subpixel rendering cost  */
.children__9293f:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
}
/* NOTE(jesus): This fadeout effect clashes with background client themes, so we
 * remove it when in this mode */
.custom-theme-background .children__9293f:after {
    content: normal;
    content: initial;
  }
.children__9293f.scrollable__9293f:after {
  display: none;
}
/* NOTE(aaron): Transparency is manually set due to a Safari gradient issue with `transparency`.
 * rgb values below reference --background-primary */
.theme-dark .children__9293f:after {
    background: linear-gradient(to right, rgb(54, 57, 63, 0) 0%, var(--__header-bar-background) 100%);
  }
.theme-light .children__9293f:after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--__header-bar-background) 100%);
  }
.transparent__9293f .children__9293f:after {
  display: none;
}
.toolbar__9293f {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.title__9293f {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.titleWrapper__9293f {
  margin: 0 8px 0 0;
  flex: 0 0 auto;
  min-width: auto;
}
.visual-refresh .toolbar__9293f {
    gap: 12px;
  }
.visual-refresh .toolbar__9293f .iconWrapper__9293f {
      margin: 0;
    }
.visual-refresh .titleWrapper__9293f {
    padding-left: var(--spacing-4);
  }
.clickable__9293f {
  cursor: pointer;
}
.iconWrapper__9293f {
  position: relative;
  height: 24px;
  width: auto;
  flex: 0 0 auto;
  margin: 0 8px;
}
.icon__9293f {
  display: block;
  width: 24px;
  height: 24px;
  /* This is no longer needed in the Refresh */
  -webkit-app-region: no-drag;
}
.visual-refresh .icon__9293f {
    width: var(--chat-input-icon-size);
    height: var(--chat-input-icon-size);
  }
.visual-refresh .iconWrapper__9293f {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--space-32);
    width: var(--space-32);
    margin: 0;
  }
.visual-refresh .toolbar__9293f {
    gap: var(--space-8);
    padding-left: var(--space-8);
  }
.icon__9293f {
  color: var(--channel-icon);
}
.clickable__9293f .icon__9293f {
  color: var(--interactive-normal);
}
.clickable__9293f:hover .icon__9293f {
  color: var(--interactive-hover);
}
.selected__9293f .icon__9293f {
  color: var(--interactive-active);
}
.visual-refresh .icon__9293f {
    color: var(--channel-icon);
  }
.visual-refresh .clickable__9293f .icon__9293f {
    color: var(--icon-tertiary);
  }
.visual-refresh .clickable__9293f:hover .icon__9293f {
    color: var(--icon-secondary);
  }
.visual-refresh .selected__9293f .icon__9293f {
    color: var(--icon-primary);
  }
.iconBadge__9293f {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: var(--status-danger);
}
.iconBadgeTop__9293f {
  right: 2px;
  top: 2px;
}
.iconBadgeBottom__9293f {
  right: 2px;
  bottom: 2px;
}
.visual-refresh .iconBadgeBottom__9293f {
    --custom-icon-offset: calc((var(--chat-input-icon-size) - 8px) / 2);
    right: calc((var(--chat-input-icon-size) - 8px) / 2);
    right: var(--custom-icon-offset);
    bottom: calc((var(--chat-input-icon-size) - 8px) / 2);
    bottom: var(--custom-icon-offset);
  }
.divider__9293f {
  width: 1px;
  height: 24px;
  margin: 0 8px;
  flex: 0 0 auto;
  background: var(--background-modifier-accent);
}
:where(.visual-refresh) .divider__9293f {
    margin: 0 4px;
    background: var(--border-subtle);
  }
:where(.visual-refresh) .dot__9293f {
    margin: 0 4px;
    color: var(--background-mod-strong);
    width: 4px;
    height: 4px;
    align-items: center;
  }
.caret__9293f {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 10px;
  margin: 0 2px;
}
.visual-refresh .caret__9293f {
    color: var(--background-mod-strong);
  }
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .container__9293f {
    border-bottom: 2px solid CanvasText;
  }
.enable-forced-colors .clickable__9293f .icon__9293f {
    color: inherit;
  }
.enable-forced-colors .clickable__9293f {
    background-color: ButtonFace;
    border-radius: 4px;
    color: ButtonText;
  }
.scrollable__9293f {
  overflow: auto;
  -ms-overflow-style: none;
}
/**
 * Only apply scroll CSS properties in browsers which don't support custom webkit scroll bar styles.
 * This fixes an issue where Chrome will defer to existing scroll styles and ignore webkit styles
 * https://stackoverflow.com/questions/77919700/scrollbars-chrome-update-121/77931548#77931548
 */
.no-webkit-scrollbar .scrollable__9293f {
    scrollbar-width: none;
  }
.scrollable__9293f::-webkit-scrollbar {
  display: none;
}
.theme-midnight .container__9293f {
    border-bottom: 1px solid var(--background-modifier-accent);
  }
.theme-dark .themed__9293f {
    /* NOTE(amadeus): Do not put a dropshadow on this...
     * it will ruin subpixel antialiasing on windows */
    background: var(--bg-overlay-2, var(--__header-bar-background));
  }
.theme-dark .themedMobile__9293f {
    /* NOTE(amadeus): Do not put a dropshadow on this...
     * it will ruin subpixel antialiasing on windows */
    background: var(--bg-overlay-4, var(--__header-bar-background));
  }
.theme-light .themed__9293f {
    /* NOTE(amadeus): Do not put a dropshadow on this...
     * it will ruin subpixel antialiasing on windows */
    background: var(--bg-overlay-1, var(--__header-bar-background));
  }
.theme-light .themedMobile__9293f {
    /* NOTE(amadeus): Do not put a dropshadow on this...
     * it will ruin subpixel antialiasing on windows */
    background: var(--bg-overlay-3, var(--__header-bar-background));
  }

.wrapper__889ee {
  width: auto;
}

.saturation__889ee {
  /* the react-color saturation gradient box */
  position: relative;
  width: auto;
  height: 150px;
  cursor: crosshair;
}

.saturation__889ee > div {
    /* the right side of the color box */
    border-radius: 3px;
  }

.saturation__889ee > div > div {
      /* the left side of the color box */
      border-radius: 3px;
    }

.saturation__889ee > div > div > div {
        cursor: crosshair !important;
      }

.saturation__889ee > div > div > div {
        /* the dot */
        /* stylelint-disable-next-line declaration-no-important */
      }

.hue__889ee {
  /* hue slide control below */
  height: 8px;
  margin: 8px 0;
  position: relative;
  cursor: crosshair;
}

.hue__889ee > div > div {
    /* the color bar */
    border-radius: 3px;
  }

.hue__889ee > div > div > div > div {
      height: 16px !important;
      width: 8px !important;
      margin-top: -3px !important;
      border-radius: 3px !important;
    }

.hue__889ee > div > div > div > div {
      /* the handle */
      /* stylelint-disable declaration-no-important */
      cursor: ew-resize;
      /* stylelint-enable */
    }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .wrapper__889ee {
    forced-color-adjust: none;
  }

.container__459fb {
  display: flex;
  flex-wrap: wrap;

  margin-top: -10px;
  margin-right: -10px;
}

.defaultContainer__459fb,
.customContainer__459fb {
  margin-top: 10px;
  margin-right: 10px;

  flex: 1;

  min-width: 60px;
  max-width: 70px;
}

.custom__459fb .preset__459fb {
  flex: 1 1 auto;
  display: flex;
  flex-direction: vertical;
}

.customColorPicker__459fb {
  display: flex;
  flex-direction: column;
  width: 220px;
  padding: 16px;
  gap: 16px;
  border: 1px solid var(--border-subtle);
  background-color: var(--background-primary);
  border-radius: 4px;
  box-shadow: var(--elevation-high);
}

.customColorPickerInputContainer__459fb {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customColorPickerEyeDropper__459fb {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0;
}

.customColorPickerInput__459fb {
  flex: 1;
}

.customColorPickerInput__459fb .input__459fb {
    text-transform: uppercase;
    height: 24px;
  }

.colorPickerRow__459fb {
  margin-top: 10px;

  display: flex;
  flex-wrap: wrap;
  height: 20px;
  overflow: hidden;
}

.colorPickerSwatch__459fb {
  background-color: transparent;
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
}

.colorPickerSwatch__459fb.default__459fb,
  .colorPickerSwatch__459fb.custom__459fb {
    margin-right: 0;
    width: 100%;
    height: 50px;

    border-radius: 4px;
  }

.colorPickerSwatch__459fb.disabled__459fb {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

.colorPickerSwatch__459fb .colorPickerDropper__459fb {
    position: absolute;
    top: 4px;
    right: 4px;
  }

.colorPickerSwatch__459fb .colorPickerDropperFg__459fb {
    fill: var(--text-normal);
  }

.suggestedColors__459fb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.suggestedColor__459fb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--primary-400);
}

.theme-dark .colorPickerSwatch__459fb.noColor__459fb {
      border-color: hsl(var(--white-500-hsl) / 0.1);
    }

.theme-light .colorPickerSwatch__459fb.noColor__459fb {
      border-color: hsl(var(--primary-500-hsl) / 0.1);
    }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .colorPickerSwatch__459fb {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }

.enable-forced-colors .colorPickerSwatch__459fb.disabled__459fb {
      border-color: GrayText;
    }

.copyInput_fffc15 {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  border: 1px solid var(--input-background);
  cursor: pointer;
  border-radius: 3px;
  height: 40px;
  transition: border-color 200ms ease-in-out;
}

.copyInputDefault_fffc15 {
  
}

.copyInputError_fffc15 {
  
  border-color: var(--status-danger);
}

.copyInputSuccess_fffc15 {
  
  border-color: var(--green-360);
}

.layout_fffc15 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inputWrapper_fffc15 {
  position: relative;
}

.button_fffc15 {
  padding: 2px 20px !important;
}

.button_fffc15 {
  margin: 4px 4px 4px 0;
  /* stylelint-disable-next-line declaration-no-important */ /* TODO remove when Button is redone */
  border-radius: 2px;
  transition:
    background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.input_fffc15,
.hiddenMessage_fffc15 {
  position: relative;
  font-size: 16px;
  line-height: 20px;
  background-color: transparent;
  padding: 10px 0 10px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.input_fffc15 {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  border: none;
  transition: color 0.15s ease;
  cursor: text;
}

.inputDefault_fffc15 {
  
}

.inputError_fffc15 {
  
  color: var(--text-normal);
}

.inputSuccess_fffc15 {
  
  color: var(--text-normal);
}

.hiddenMessage_fffc15 {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.inputHidden_fffc15 {
  visibility: hidden;
}

.copyInput_fffc15 {
  background-color: var(--input-background);
}

.inputDefault_fffc15,
.hiddenMessage_fffc15 {
  color: var(--text-normal);
}

.inputDefault_fffc15::-moz-placeholder, .hiddenMessage_fffc15::-moz-placeholder {
    color: var(--input-placeholder-text);
  }

.inputDefault_fffc15::placeholder, .hiddenMessage_fffc15::placeholder {
    color: var(--input-placeholder-text);
  }

.visual-refresh .copyInput_fffc15 {
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
  }

.visual-refresh .button_fffc15 {
    border-radius: var(--radius-xs);
  }

.visual-refresh .copyInputSuccess_fffc15 {
    border-color: var(--text-feedback-positive);
    color: var(--text-feedback-positive);
    background-color: var(--background-feedback-positive);
  }

.visual-refresh .copyInputError_fffc15 {
    border-color: var(--text-feedback-critical);
    color: var(--text-feedback-critical);
    background-color: var(--background-feedback-critical);
  }

.wrapper__33d12 {
  width: 100%;
  height: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.image__33d12 {
  background-size: 100% 100%;
}

.title__33d12 {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 17px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

.text__33d12 {
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: var(--text-muted);
}

.slider__4e371 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.shinyButton__6a443 {
  overflow: hidden;
}

  .shinyButton__6a443 > * {
    pointer-events: none;
  }

.buttonShine__6a443 {
  color: hsl(var(--white-500-hsl) / 0.1);
  pointer-events: none;
}

.full-motion .buttonShine__6a443 {
  animation-delay: 0.75s;
  animation-duration: 2s;
  animation-name: Shine__6a443;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* when reduced motion is on, use the shine as a static asset at the end of the button */

.reduce-motion .buttonShine__6a443 {
  transform: translate3d(calc(100% - 32px), 0, 0);
}

.full-motion .onlyShineOnHover__6a443 {
  animation-name: InstantShine__6a443;
  animation-delay: 0s;
}

.shineContainer__6a443 {
  position: absolute;
  top: -50%;
  bottom: 0;
  right: 0;
  left: -50%;
}

.shine__6a443 {
  background-color: currentColor;
  height: 300%;
  position: relative;
  top: -100%;
  transform: rotate(30deg);
}

.shineDefault__6a443 {
  
  width: 56px;
}

.shineSmall__6a443 {
  
  width: 30px;
}

.shinePaused__6a443 {
  animation-play-state: paused;
}

.shineInner__6a443 {
  background-color: currentColor;
  height: 100%;
}

.shineInnerDefault__6a443 {
  
  width: 16px;
}

.shineInnerSmall__6a443 {
  
  width: 10px;
}

@keyframes Shine__6a443 {
  0% {
    transform: translate3d(-50%, 0, 0);
  }

  100% {
    transform: translate3d(200%, 0, 0);
  }
}

@keyframes InstantShine__6a443 {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(200%, 0, 0);
  }
}

.searchBox_d727b3 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 18px;
  padding-right: 16px;
  border-radius: 3px;
  border: 1px solid transparent;
  background-color: var(--background-tertiary);
  box-shadow: 0 2px 5px 0 hsl(var(--black-500-hsl) / 0.2);
}

  .searchBox_d727b3:focus,
  .searchBox_d727b3:focus-within {
    border-color: var(--brand-500);
  }

  /* Specificity to override UIKit defaults */

  .searchBox_d727b3 .searchBoxInput_d727b3 {
    border: none;
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    font-size: 18px;
    font-weight: 500;
    padding: 12px;
    background: transparent;
    height: auto;
  }

  .searchBox_d727b3 .searchBoxInput_d727b3::-moz-placeholder {
      font-weight: 500;
    }

  .searchBox_d727b3 .searchBoxInput_d727b3::placeholder {
      font-weight: 500;
    }

.searchBoxInputWrapper_d727b3 {
  flex: 1;
}

.cta_d727b3 {
  margin-right: 8px;
}

.clear_d727b3 {
  /* The clear button is a Clickable, which is implemented as a div.
   * Its default line-height adds unwanted vertical space, so we should remove it. */
  line-height: 0;
}

.clearIcon_d727b3 {
  cursor: pointer;
  transform-origin: center;
  transform: rotateZ(90deg);
  color: var(--interactive-normal);
}

.clearIcon_d727b3:hover {
    color: var(--interactive-hover);
  }

.clearIcon_d727b3:focus {
    color: var(--interactive-active);
  }

.clear_d727b3:focus {
  color: var(--interactive-active);
}

.searchIcon_d727b3 {
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.clearIcon_d727b3,
.searchIcon_d727b3 {
  width: 1.4em;
  height: 1.4em;
}

/* Light Theme */

.theme-light .searchBox_d727b3 .searchBoxInput_d727b3::-moz-placeholder {
        color: var(--primary-400);
      }

.theme-light .searchBox_d727b3 .searchBoxInput_d727b3::placeholder {
        color: var(--primary-400);
      }

.theme-light .searchIcon_d727b3 {
    color: hsl(var(--primary-500-hsl) / 0.6);
  }

/* Dark Theme */

.theme-dark .searchBox_d727b3 .searchBoxInput_d727b3::-moz-placeholder {
        color: hsl(var(--white-500-hsl) / 0.3);
      }

.theme-dark .searchBox_d727b3 .searchBoxInput_d727b3::placeholder {
        color: hsl(var(--white-500-hsl) / 0.3);
      }

.theme-dark .searchIcon_d727b3 {
    color: hsl(var(--white-500-hsl) / 0.3);
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .searchBox_d727b3 {
    border-color: ButtonText;
  }

.enable-forced-colors .searchBox_d727b3:focus,
    .enable-forced-colors .searchBox_d727b3:focus-within {
      border-color: Highlight;
    }

.enable-forced-colors .clearIcon_d727b3 {
    background-color: ButtonFace;
    color: ButtonText;
  }

.enable-forced-colors .clearIcon_d727b3:hover,
    .enable-forced-colors .clearIcon_d727b3:focus {
      color: ButtonText;
    }

.enable-forced-colors .searchIcon_d727b3 {
    color: GrayText;
  }

.filterLabel_d727b3 {
  color: var(--header-primary);
}

.wrapper__6e9f8 {
  display: flex;
  width: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  align-items: center;
  justify-content: center;
  transition:
    background-color 100ms ease-out, color 100ms ease-out;
}

.childWrapper__6e9f8 {
  width: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    scale 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
  color: var(--text-normal);
}

.childWrapperNoHoverBg__6e9f8 {
  background-color: var(--background-primary);
}

.visual-refresh .childWrapperNoHoverBg__6e9f8 {
    background-color: var(--background-surface-higher);
  }

.wrapper__6e9f8:hover .childWrapperHoverScale__6e9f8,
.wrapper__6e9f8.selected__6e9f8 .childWrapperHoverScale__6e9f8 {
  scale: 1.1;
}

.wrapper__6e9f8:hover .childWrapper__6e9f8,
.wrapper__6e9f8.selected__6e9f8 .childWrapper__6e9f8 {
  color: var(--white);
  background-color: var(--bg-brand);
}

.acronym__6e9f8 {
  font-weight: 500;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1.2em;
  white-space: nowrap;
}

.icon__6e9f8 {
  display: block;
  width: var(--guildbar-avatar-size);
  height: var(--guildbar-avatar-size);
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.icon__6e9f8:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--background-modifier-accent);
}

.theme-dark.custom-theme-background .wrapper__6e9f8:not(:hover):not(.selected__6e9f8) .childWrapper__6e9f8 {
    background: rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6));
  }

.theme-light.custom-theme-background .wrapper__6e9f8:not(:hover):not(.selected__6e9f8) .childWrapper__6e9f8 {
    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3));
  }

.notice__6e2b9 {
  font-size: 14px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 36px;
  font-weight: 500;
  text-align: center;
  position: relative;
  padding-left: 4px;
  padding-right: 28px; /* For close button */
  z-index: 101;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 8px 0 0;
  box-shadow: var(--elevation-low);
  background: var(--custom-notice-background);
  color: var(--custom-notice-text);
}

  .notice__6e2b9 strong {
    font-weight: 600;
  }

  .notice__6e2b9.isMobile__6e2b9 {
    line-height: 30px;
    padding: 10px 20px;
  }

  .notice__6e2b9 .button__6e2b9 {
    color: var(--custom-notice-text) !important;
    border-color: var(--custom-notice-text) !important;
  }

  .notice__6e2b9 .button__6e2b9 {
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
  }

  .notice__6e2b9 .button__6e2b9:hover {
    color: var(--custom-notice-button-hover);
    background-color: var(--bg-mod-subtle);
  }

  .notice__6e2b9 .closeIcon__6e2b9 path {
      fill: var(--custom-notice-text);
    }

@supports not (grid-template-columns: subgrid) {
    .visual-refresh .notice__6e2b9 {
      border-top-left-radius: 0;
    }
}

@supports (grid-template-columns: subgrid) {
    .visual-refresh .notice__6e2b9 {
      grid-area: notice;
    }
}

.visual-refresh .notice__6e2b9 {
    border-top: 1px solid var(--app-border-frame);
    border-left: 1px solid var(--app-border-frame);
    box-shadow: none;
  }

.visual-refresh .notice__6e2b9 .button__6e2b9 {
      border-color: var(--custom-notice-text) !important;
    }

.visual-refresh .notice__6e2b9 .button__6e2b9 {
      /* stylelint-disable-next-line declaration-no-important */
    }

/* Notices are no longer the top-most item, so they don't need to be dragable
anymore in the Refresh */

.platform-osx:not(.visual-refresh) .notice__6e2b9 {
  -webkit-app-region: drag;
}

/* Color variants */

.colorDefault__6e2b9 {
  --custom-notice-background: var(--status-positive-background);
  --custom-notice-text: var(--status-positive-text);
  --custom-notice-button-hover: var(--status-positive-background);
}

.colorNeutral__6e2b9 {
  --custom-notice-background: var(--background-accent);
  --custom-notice-text: var(--white-500);
  /* stylelint-disable-next-line color-no-hex */
  --custom-notice-button-hover: #222222;
}

.colorPremium__6e2b9 {
  --custom-notice-text: var(--white-500);
}

.colorPremiumTier0__6e2b9 {
  
  --custom-notice-background: linear-gradient(to left, var(--premium-tier-0-purple), var(--premium-tier-0-blue));
  --custom-notice-button-hover: var(--brand-500);
}

.colorPremiumTier1__6e2b9 {
  
  --custom-notice-background: linear-gradient(
    270deg,
    var(--premium-tier-1-blue-for-gradients) 0%,
    var(--premium-tier-1-dark-blue-for-gradients) 100%
  );
  --custom-notice-button-hover: var(--brand-500);
}

.colorPremiumTier2__6e2b9 {
  
  --custom-notice-background: linear-gradient(
    90deg,
    var(--premium-tier-2-purple-for-gradients) 0%,
    var(--premium-tier-2-purple-for-gradients-2) 50.24%,
    var(--premium-tier-2-pink-for-gradients) 100%
  );
  --custom-notice-button-hover: var(--premium-tier-2-pink);
}

.colorInfo__6e2b9 {
  /* stylelint-disable-next-line color-no-hex */
  --custom-notice-background: #4a90e2;
  --custom-notice-text: var(--white-500);
  /* stylelint-disable-next-line color-no-hex */
  --custom-notice-button-hover: #4a90e2;
}

.colorSuccess__6e2b9 {
  --custom-notice-background: var(--status-positive-background);
  --custom-notice-text: var(--status-positive-text);
  --custom-notice-button-hover: var(--text-positive);
}

.colorWarning__6e2b9 {
  --custom-notice-background: var(--status-warning-background);
  --custom-notice-text: var(--status-warning-text);
  --custom-notice-button-hover: var(--status-warning-text);
}

.colorWarning__6e2b9 .button__6e2b9 {
    border-color: var(--status-warning-text) !important;
  }

.colorWarning__6e2b9 .button__6e2b9 {
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--status-warning-text);
  }

.colorDanger__6e2b9 {
  --custom-notice-background: var(--status-danger-background);
  --custom-notice-text: var(--status-danger-text);
  --custom-notice-button-hover: var(--text-danger);
}

.visual-refresh .colorSuccess__6e2b9,
  .visual-refresh .colorDefault__6e2b9 {
    --custom-notice-background: var(--notice-background-positive);
    --custom-notice-text: var(--notice-text-positive);
    --custom-notice-button-hover: var(--notice-text-positive);
  }

.visual-refresh .colorWarning__6e2b9 {
    --custom-notice-background: var(--notice-background-warning);
    --custom-notice-text: var(--notice-text-warning);
    --custom-notice-button-hover: var(--notice-text-warning);
  }

.visual-refresh .colorDanger__6e2b9 {
    --custom-notice-background: var(--notice-background-critical);
    --custom-notice-text: var(--notice-text-critical);
    --custom-notice-button-hover: var(--notice-text-critical);
  }

.visual-refresh .colorInfo__6e2b9 {
    --custom-notice-background: var(--notice-background-info);
    --custom-notice-text: var(--notice-text-info);
    --custom-notice-button-hover: var(--notice-text-info);
  }

.colorStreamerMode__6e2b9 {
  --custom-notice-background: var(--twitch);
  --custom-notice-text: var(--white-500);
  --custom-notice-button-hover: var(--twitch);
}

.colorSpotify__6e2b9 {
  --custom-notice-background: var(--spotify);
  --custom-notice-text: var(--white-500);
  --custom-notice-button-hover: var(--spotify);
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorSpotify__6e2b9 .platformIcon__6e2b9 {
    margin-top: 0;
    width: 24px;
    height: 24px;
  }

.colorSpotify__6e2b9 .button__6e2b9 {
    top: 0;
    margin-left: 20px;
  }

.colorPlayStation__6e2b9 {
  --custom-notice-background: var(--playstation);
  --custom-notice-text: var(--white-500);
  --custom-notice-button-hover: var(--playstation);
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorPlayStation__6e2b9 .platformIcon__6e2b9 {
    margin-top: 0;
    width: 24px;
    height: 24px;
  }

.colorPlayStation__6e2b9 .button__6e2b9 {
    top: 0;
    margin-left: 20px;
  }

.colorBrand__6e2b9 {
  --custom-notice-background: var(--brand-500);
  --custom-notice-text: var(--white-500);
  --custom-notice-button-hover: var(--brand-500);
}

.colorCustom__6e2b9 {
  
  /* stylelint-disable-next-line color-no-hex */
  --custom-notice-button-hover: #222222;
}

/* Button styles */

.closeButton__6e2b9 {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.closeIcon__6e2b9 path {
    fill: var(--white-500);
  }

.button__6e2b9 {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  top: 6px;
  border: 1px solid;
  color: var(--white-500);
  border-radius: 3px;
  height: 24px;
  padding: 0 10px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 22px;
  transition:
    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  -webkit-app-region: no-drag;
  border-color: var(--white-500);
  background-color: transparent;
}

.button__6e2b9.buttonMinor__6e2b9 {
    border: none;
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.button__6e2b9:hover {
    border-color: var(--white-500);
    background-color: var(--white-500);
  }

/* Windows High-Contrast Mode */

.enable-forced-colors .notice__6e2b9 {
    border-bottom: 2px solid CanvasText;
  }

.enable-forced-colors .closeButton__6e2b9 {
    background-color: ButtonFace;
    color: ButtonText;
    opacity: 1;
  }

.enable-forced-colors .closeButton__6e2b9:hover,
    .enable-forced-colors .closeButton__6e2b9:focus {
      outline: 1px solid ButtonText;
    }

/*
 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 *
 * This file is an output of the Typography pipeline, which is defined here:
 *
 *   discord_design_system/modules/token_definitions/Typography.tsx
 *
 * Then run:
 *
 *   yarn generate
 */
.heading-sm\/normal__2b1f5 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.heading-sm\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.heading-sm\/medium__2b1f5 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.heading-sm\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.heading-sm\/semibold__2b1f5 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.heading-sm\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.heading-sm\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.heading-sm\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.heading-sm\/extrabold__2b1f5 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 800;
}
.heading-sm\/extrabold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.heading-md\/normal__2b1f5 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-md\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.heading-md\/medium__2b1f5 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-md\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.heading-md\/semibold__2b1f5 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-md\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.heading-md\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-md\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.heading-md\/extrabold__2b1f5 {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-md\/extrabold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.heading-lg\/normal__2b1f5 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.heading-lg\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.heading-lg\/medium__2b1f5 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.heading-lg\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.heading-lg\/semibold__2b1f5 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.heading-lg\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.heading-lg\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.heading-lg\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.heading-lg\/extrabold__2b1f5 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}
.heading-lg\/extrabold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.heading-xl\/normal__2b1f5 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xl\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 1.5rem;
  }
.heading-xl\/medium__2b1f5 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xl\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 1.5rem;
  }
.heading-xl\/semibold__2b1f5 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xl\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.5rem;
  }
.heading-xl\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xl\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.5rem;
  }
.heading-xl\/extrabold__2b1f5 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xl\/extrabold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.5rem;
  }
.heading-xxl\/normal__2b1f5 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
}
.heading-xxl\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 2rem;
  }
.heading-xxl\/medium__2b1f5 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 500;
}
.heading-xxl\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 2rem;
  }
.heading-xxl\/semibold__2b1f5 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 600;
}
.heading-xxl\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 2rem;
  }
.heading-xxl\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
}
.heading-xxl\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 2rem;
  }
.heading-xxl\/extrabold__2b1f5 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}
.heading-xxl\/extrabold__2b1f5.fontScaling__2b1f5 {
    font-size: 2rem;
  }
.eyebrow__2b1f5 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eyebrow__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/normal__2b1f5 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.heading-deprecated-12\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/medium__2b1f5 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.heading-deprecated-12\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/semibold__2b1f5 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.heading-deprecated-12\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.heading-deprecated-12\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.heading-deprecated-12\/extrabold__2b1f5 {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 800;
}
.heading-deprecated-12\/extrabold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.redesign\/heading-18\/bold__2b1f5 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/heading-18\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.125rem;
  }
.text-xxs\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;
}
.text-xxs\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 0.625rem;
  }
.text-xxs\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
}
.text-xxs\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 0.625rem;
  }
.text-xxs\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
}
.text-xxs\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.625rem;
  }
.text-xxs\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}
.text-xxs\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.625rem;
  }
.text-xs\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.text-xs\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.text-xs\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.text-xs\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.text-xs\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.text-xs\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.text-xs\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.text-xs\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.text-sm\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 400;
}
.text-sm\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.text-sm\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 500;
}
.text-sm\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.text-sm\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 600;
}
.text-sm\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.text-sm\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.2857142857142858;
  font-weight: 700;
}
.text-sm\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.875rem;
  }
.text-md\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 400;
}
.text-md\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.text-md\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
}
.text-md\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.text-md\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.text-md\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.text-md\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}
.text-md\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.text-lg\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}
.text-lg\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.text-lg\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
}
.text-lg\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.text-lg\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}
.text-lg\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.text-lg\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.text-lg\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.redesign\/message-preview\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 400;
}
.redesign\/message-preview\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 500;
}
.redesign\/message-preview\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 600;
}
.redesign\/message-preview\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.9375rem;
  }
.redesign\/message-preview\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.redesign\/message-preview\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 0.9375rem;
  }
.redesign\/channel-title\/normal__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 400;
}
.redesign\/channel-title\/normal__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.redesign\/channel-title\/medium__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 500;
}
.redesign\/channel-title\/medium__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.redesign\/channel-title\/semibold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
}
.redesign\/channel-title\/semibold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.redesign\/channel-title\/bold__2b1f5 {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 700;
}
.redesign\/channel-title\/bold__2b1f5.fontScaling__2b1f5 {
    font-size: 1rem;
  }
.display-sm__2b1f5 {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}
.display-sm__2b1f5.fontScaling__2b1f5 {
    font-size: 1.25rem;
  }
.display-md__2b1f5 {
  font-family: var(--font-headline);
  font-size: 34px;
  line-height: 1.0588235294117647;
  font-weight: 800;
}
.display-md__2b1f5.fontScaling__2b1f5 {
    font-size: 2.125rem;
  }
.display-lg__2b1f5 {
  font-family: var(--font-headline);
  font-size: 44px;
  line-height: 0.9545454545454546;
  font-weight: 800;
}
.display-lg__2b1f5.fontScaling__2b1f5 {
    font-size: 2.75rem;
  }
.code__2b1f5 {
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.3333333333333333;
  font-weight: 700;
}
.code__2b1f5.fontScaling__2b1f5 {
    font-size: 0.75rem;
  }
.base__2b1f5 {
  box-sizing: border-box;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  color: var(--white);
  text-align: center;
  flex: 0 0 auto;
  
}
.baseShapeRound__2b1f5 {
  border-radius: 8px;
}
.baseShapeRoundLeft__2b1f5 {
  border-radius: 8px 0 0 8px;
}
.baseShapeRoundRight__2b1f5 {
  border-radius: 0 8px 8px 0;
}
.numberBadge__2b1f5 {
  
  display: flex;
  align-items: center;
  justify-content: center;
}
.textBadge__2b1f5 {
  
  padding: 0 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.iconBadge__2b1f5 {
  

  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}
.icon__2b1f5 {
  padding: 2px;
  width: 100%;
  height: 100%;
}
.circleBadge__2b1f5 {
  width: 8px;
  height: 8px;
}
.premiumBadge__2b1f5 {
  background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
}
.limitedTimeText__2b1f5 {
  text-transform: uppercase;
}
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
.enable-forced-colors .base__2b1f5 {
    background-color: HighlightText !important;
  }
.enable-forced-colors .base__2b1f5 {
    /* override inline styles */
    /* stylelint-disable-next-line declaration-no-important */
    color: Highlight;
    outline: 2px solid Canvas;
  }

.quickSelect_ebaca5 {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 13px;
  cursor: default;
  color: var(--interactive-normal);
}

.quickSelectClick_ebaca5 {
  cursor: pointer;
}

.quickSelectValue_ebaca5 {
  margin-left: 4px;
}

.quickSelectLabel_ebaca5 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-muted);
}

.quickSelectArrow_ebaca5 {
  width: 10px;
  height: 7px;
  margin-left: 5px;
}

.quickSelectPopout_ebaca5 {
  border-radius: 3px;
  overflow: hidden;
  color: var(--header-primary);
}

.quickSelectPopoutScroll_ebaca5 {
  max-height: 384px;
}

.quickSelectScroller_ebaca5 {
  overflow-y: auto;
}

.quickSelectPopoutOption_ebaca5 {
  padding: 8px;
  cursor: pointer;
}

.quickSelectPopoutOption_ebaca5.selected_ebaca5 {
    background-color: inherit;
    cursor: default;
  }

.quickSelectPopoutOption_ebaca5:focus {
    background-color: var(--background-modifier-hover);
    color: var(--interactive-hover);
  }

/* Light Theme */

.theme-light .quickSelectArrow_ebaca5 {
    background: url(/assets/0bf989849f27d0a7.svg) center center no-repeat;
  }

.theme-light .quickSelectPopout_ebaca5 {
    background-color: var(--white-500);
  }

.theme-light .quickSelectPopoutOption_ebaca5:hover {
      background-color: var(--primary-100);
    }

/* Dark Theme */

.theme-dark .quickSelectArrow_ebaca5 {
    background: url(/assets/77e059c86b79040e.svg) center center no-repeat;
  }

.theme-dark .quickSelectPopout_ebaca5 {
    background: var(--primary-630);
  }

.theme-dark .quickSelectPopoutOption_ebaca5:hover {
      background-color: hsl(var(--primary-500-hsl) / 0.3);
    }

.sparkles__64668 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.wrapper_fd4dd6 svg {
    display: block;
  }

.value__96f95 {
  width: 48px;
}

.actions__96f95 {
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.value__96f95 {
  text-align: center;
  height: 32px;
  background: var(--background-secondary);
  border: none;
  border-radius: 0;
}

.iconWrapper__96f95 {
  cursor: pointer;
}

.icon__96f95 {
  display: block;
  padding: 8px;
  width: 32px;
  height: 32px;
  color: var(--interactive-normal);
  box-sizing: border-box;
}

.full-motion .icon__96f95 {
    transition: all 0.2s ease;
  }

.icon__96f95:active {
    color: var(--interactive-active);
  }

.icon__96f95:hover {
    color: var(--interactive-hover);
    background: var(--background-modifier-hover);
  }

.icon__96f95.disabled__96f95:hover,
  .icon__96f95.disabled__96f95 {
    cursor: not-allowed;
    background: none;
  }

/* TODO: There isn't a good mapping for the colors of buttons
  yet, but will replace these when we come up with one */

.theme-dark .iconWrapper__96f95 {
    background: var(--primary-500);
  }

.theme-dark .iconWrapper__96f95.disabled__96f95 {
      opacity: 0.5;
    }

.theme-light .iconWrapper__96f95 {
    background: var(--primary-230);
  }

.theme-light .icon__96f95.disabled__96f95:hover,
    .theme-light .icon__96f95.disabled__96f95 {
      color: var(--interactive-muted);
    }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .icon__96f95 {
    color: ButtonText;
  }

.enable-forced-colors .icon__96f95:hover {
      background-color: ButtonFace;
      color: ButtonText;
    }

.enable-forced-colors .icon__96f95.disabled__96f95:hover,
    .enable-forced-colors .icon__96f95.disabled__96f95 {
      background-color: Canvas;
      color: GrayText;
    }

.enable-forced-colors .iconWrapper__96f95 {
    background-color: ButtonFace;
    border-radius: 4px;
    color: ButtonText;
  }

.enable-forced-colors .iconWrapper__96f95:hover,
    .enable-forced-colors .iconWrapper__96f95:focus {
      outline: 1px solid ButtonText;
      outline-offset: -1px;
    }

.enable-forced-colors .iconWrapper__96f95.disabled__96f95,
      .enable-forced-colors .iconWrapper__96f95.disabled__96f95:hover,
      .enable-forced-colors .iconWrapper__96f95.disabled__96f95:focus {
        background-color: Canvas;
        outline-color: GrayText;
        opacity: 1;
      }

.container__6436f {
  display: flex;
  border-radius: 4px;
  font-weight: 500;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.icon__6436f {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.iconDiv__6436f {
  display: flex;
}

.text__6436f {
  margin-left: 10px;
  flex: 1;
  align-self: center;
}

.text__6436f p {
    margin: 0;
  }

.text__6436f p ~ p {
    margin-top: 8px;
  }

.positive__6436f {
  background: var(--info-positive-background);
  border: 1px solid var(--info-positive-foreground);
  color: var(--info-positive-text);
}

.positive__6436f .icon__6436f {
    color: var(--info-positive-foreground);
  }

.warning__6436f {
  background: var(--info-warning-background);
  border: 1px solid var(--info-warning-foreground);
  color: var(--info-warning-text);
}

.warning__6436f .icon__6436f {
    color: var(--info-warning-foreground);
  }

.info__6436f {
  background: var(--info-help-background);
  border: 1px solid var(--info-help-foreground);
  color: var(--info-help-text);
}

.info__6436f .icon__6436f {
    color: var(--info-help-foreground);
  }

.error__6436f {
  background: var(--info-danger-background);
  border: 1px solid var(--info-danger-foreground);
  color: var(--info-danger-text);
}

.error__6436f .icon__6436f {
    color: var(--info-danger-foreground);
  }

.visual-refresh .container__6436f {
    border-radius: var(--radius-sm);
  }

.visual-refresh .icon__6436f {
    width: 20px;
    height: 20px;
  }

.visual-refresh .text__6436f {
    margin-left: var(--space-8);
  }

/* TODO this is probably an inverse dependency. we could/should own breakpoints */

.focusLock__49fc1 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
}

.root__49fc1 {
  background-color: var(--modal-background);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  pointer-events: all;
  position: relative;
  max-height: 100%;
}

.small__49fc1 {
  width: 440px;
  max-height: 720px;
  min-height: 200px;
}

.medium__49fc1 {
  width: 600px;
  max-height: 800px;
  min-height: 400px;
}

.large__49fc1 {
  min-width: var(--custom-modal-min-width-large);
  max-width: 960px;
  min-height: 400px;
}

.visual-refresh .root__49fc1 {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-normal);
  }

:where(.visual-refresh) .small__49fc1 {
    min-height: 220px;
    /* 2px offset to account for the border */
    width: 442px;
    max-height: min(900px, 70vh);
  }

:where(.visual-refresh) .medium__49fc1 {
    /* 2px offset to account for the border */
    width: 602px;
    max-height: min(900px, 70vh);
  }

:where(.visual-refresh) .large__49fc1 {
    /* 2px offset to account for the border */
    max-width: 962px;
    max-height: min(900px, 70vh);
  }

@media (max-width: 485px) {
  .root__49fc1 {
    min-width: auto;
    max-width: 100%;
    width: 100%;
  }

  .fullscreenOnMobile__49fc1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    max-height: none;
    overflow-y: auto;
    width: 100%;
  }

    .fullscreenOnMobile__49fc1 .header__49fc1,
    .fullscreenOnMobile__49fc1 .footer__49fc1 {
      border-radius: 0;
    }
}

/**
 * Header/Footer
 */

.header__49fc1,
.footer__49fc1 {
  position: relative;
  flex: 0 0 auto;
  padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
  z-index: 1;
  overflow-x: hidden;
}

.header__49fc1 {
  border-radius: 4px 4px 0 0;
  transition: box-shadow 100ms ease-out;
  word-wrap: break-word;
}

.footer__49fc1 {
  border-radius: 0 0 5px 5px;
  background-color: var(--modal-footer-background);
}

.theme-dark .separator__49fc1 {
    box-shadow:
      0 1px 0 0 hsl(var(--primary-800-hsl) / 0.3),
      0 1px 2px 0 hsl(var(--primary-800-hsl) / 0.3);
  }

.theme-dark .footerSeparator__49fc1 {
    box-shadow: inset 0 1px 0 hsl(var(--primary-630-hsl) / 0.6);
  }

.theme-light .separator__49fc1 {
    box-shadow: 0 1px 0 0 hsl(var(--primary-300-hsl) / 0.3);
  }

.theme-light .footerSeparator__49fc1 {
    box-shadow: inset 0 1px 0 hsl(var(--primary-100-hsl) / 0.6);
  }

/**
 * Content
 */

.content__49fc1 {
  position: relative;
  z-index: 0;
  border-radius: 5px 5px 0 0;
  padding-left: var(--modal-horizontal-padding);
  padding-right: var(--modal-horizontal-padding);
  overflow-x: hidden;
}

/**
 * Close
 */

.close__49fc1 {
  height: 26px;
  padding: 4px;
  transition: opacity 0.2s ease-in-out;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 3px;
  color: var(--interactive-normal);
  box-sizing: content-box;
}

.close__49fc1:hover {
    opacity: 1;
    color: var(--interactive-hover);
  }

.visual-refresh .close__49fc1 {
    height: 24px;
    color: var(--icon-primary);
  }

.closeWithCircleBackground__49fc1 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--black-500-hsl) / 0.85);
  border-radius: 50%;
  padding: 0;
}

.closeWithCircleBackground__49fc1 .closeIcon__49fc1 {
    width: 16px;
    height: 16px;
    color: var(--primary-330);
  }

.closeWithCircleBackground__49fc1 .closeIcon__49fc1:hover {
      color: var(--primary-230);
    }

.closeWithCircleBackground__49fc1:hover {
    background-color: var(--black-500);
  }

@media (max-width: 485px) {
  .hideOnFullscreen__49fc1 {
    display: none;
  }

  .footer__49fc1 {
    position: static;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

.spinnerContainer__49fc1 {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.visual-refresh .separator__49fc1 {
    box-shadow: none;
  }

.visual-refresh .footerSeparator__49fc1 {
    box-shadow: none;
  }

:where(.visual-refresh) .header__49fc1 {
    padding-bottom: 0;
    overflow: hidden;
  }

:where(.visual-refresh) .content__49fc1 {
    padding-top: var(--space-8);
  }

:where(.visual-refresh) .footer__49fc1 {
    padding-top: var(--space-16);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .root__49fc1 {
    border: 2px solid CanvasText;
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .close__49fc1 {
    opacity: 1;
  }

.rootWithShadow__49fc1 {
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}

.visual-refresh .rootWithShadow__49fc1 {
    box-shadow: var(--shadow-medium);
  }

.wrapper__61a6b {
  overflow: hidden;
  min-height: 100vh;
  background-size: cover;
  color: var(--text-normal);
  background-color: var(--background-secondary);
  background-position: 50% 0;
}

.flexWrapper__61a6b {
  height: 100vh;
}

.image__61a6b {
  width: 254px;
  height: 154px;
  margin-bottom: 40px;
  background-size: 100% 100%;
}

.text__61a6b {
  width: 440px;
  margin-bottom: 20px;
}

.note__61a6b {
  font-size: 16px;
  text-align: center;
  color: var(--text-muted);
}

.title__61a6b {
  font-size: 24px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 8px;
  margin-bottom: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--header-primary);
}

.images-light .wrapper__61a6b {
    background-image: url(/assets/069714e321aa543f.svg);
  }

.images-light .image__61a6b {
    background-image: url(/assets/f9b5479cf5959262.svg);
  }

.images-dark .wrapper__61a6b {
    background-image: url(/assets/069714e321aa543f.svg);
  }

.images-dark .image__61a6b {
    background-image: url(/assets/4ced53d842c0ca67.svg);
  }

.titleBar__421ed {
  z-index: 3001;
  -webkit-app-region: drag;
  flex-shrink: 0;
}

.withFrame__421ed {
  
  height: 18px;
  margin-top: 4px;
}

.typeMacOS__421ed {
  
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  position: absolute;
  width: 72px;
}

/* Filler for when non-native buttons are disabled */

.typeMacOS__421ed .macDragRegion__421ed {
    width: 70px;
    padding-bottom: 32px;
  }

.typeMacOSWithFrame__421ed {
  
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  display: flex;
  margin-top: 0;
  height: 24px;
}

.typeMacOSWithFrame__421ed .macButtons__421ed {
    margin-top: -2px;
    margin-right: -70px;
  }

.typeWindows__421ed {
  
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row-reverse;
  display: flex;
}

.wordmark__421ed {
  pointer-events: none;
  font-size: 0;
}

.wordmarkWindows__421ed {
  
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 9px 3px;
  color: var(--text-muted);
}

.wordmarkMacOS__421ed {
  
  margin: 0 auto;
}

.winButton__421ed {
  position: relative;
  top: -4px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 28px;
  height: 22px;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.winButtonMinMax__421ed {
  
}

.winButtonMinMax__421ed:hover {
    background-color: var(--background-modifier-hover);
    color: var(--interactive-hover);
  }

.winButtonMinMax__421ed:active {
    background-color: var(--background-modifier-active);
    color: var(--interactive-active);
  }

.winButtonClose__421ed {
  
}

.winButtonClose__421ed:hover {
    color: var(--white-500);
    background-color: var(--status-danger);
  }

.winButton__421ed {
  color: var(--interactive-normal);
}

.macButtons__421ed {
  box-sizing: border-box;
  width: 70px;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  display: flex;
}

.macButtons__421ed svg {
    display: block;
    visibility: hidden;
  }

.focused__421ed .macButtons__421ed:hover svg {
  visibility: visible;
}

.macButton__421ed {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-app-region: no-drag;
}

.macButtonClose__421ed {
  
}

.macButtonMinimize__421ed {
  
}

.macButtonMaximize__421ed {
  
}

/* Official macOS Colors defined here */

/* stylelint-disable color-no-hex */

.macButtonMaximize__421ed {
  background-color: #34c749;
}

.macButtonMaximize__421ed:active {
    background-color: #2a9f3a;
  }

.macButtonMinimize__421ed {
  background-color: #fdbc40;
}

.macButtonMinimize__421ed:active {
    background-color: #ca9633;
  }

.macButtonClose__421ed {
  background-color: #fc615d;
}

.macButtonClose__421ed:active {
    background-color: #ca4e4a;
  }

/* stylelint-enable color-no-hex */

.unfocused__421ed .macButtonClose__421ed,
  .unfocused__421ed .macButtonMinimize__421ed,
  .unfocused__421ed .macButtonMaximize__421ed {
    background-color: var(--background-modifier-accent);
  }

.custom-theme-background .withBackgroundOverride__421ed {
    background: var(--bg-overlay-app-frame, var(--background-tertiary));
  }

.custom-theme-background .withBackgroundOverride__421ed.typeWindows__421ed {
    margin-top: 0;
    padding-top: 4px;
  }

.tile__90dc5 {
  position: relative;
  background-color: var(--primary-700);
  border-radius: var(--custom-base-tile-border-radius);
  /* Include the border in the element's dimension calculations */
  box-sizing: border-box;
  overflow: hidden;
}

  .tile__90dc5.noBorder__90dc5 {
    border-radius: 0;
  }

.fillParent__078ba {
  width: 100%;
  height: 100%;
  display: block;
  overflow: clip;
}

.hiddenIframeContainer__078ba {
  opacity: 0;
}

.iframePlaceholder__078ba {
  background-color: black;
}

.popoutWrapper_d6b206 {
  position: relative;
  left: -30px;
  width: 200px;
  display: flex;
  max-height: 40vh;
}

.scroller_d6b206 {
  border-radius: 4px;
  padding: 8px 16px;
  background-color: var(--background-floating);
}

.viewers_d6b206 {
  display: flex;
  flex-grow: 0;
  align-items: center;
  position: relative;
}

.viewers_d6b206:hover .popoutWrapper_d6b206 {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

.viewer_d6b206 {
  margin-left: -2px;
  -webkit-mask: url(/assets/eae6388e2d5a721a.svg);
          mask: url(/assets/eae6388e2d5a721a.svg);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  mask-type: luminance;
}

.viewer_d6b206:last-child {
  -webkit-mask: none;
          mask: none;
}

.overflow_d6b206 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  z-index: 2;
  background-color: var(--primary-600);
  color: var(--primary-300);
  box-shadow: -1px 0 0 1px var(--black-500);
}

.memberListHeader_d6b206 {
  margin-top: 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--header-secondary);
}

.memberListItemText_d6b206 {
  color: var(--header-secondary);
}

.viewersIcon_d6b206 {
  width: 24px;
  height: 24px;
  color: var(--primary-300);
  display: flex;
  margin-right: 4px;
}

.viewersIcon_d6b206:hover {
    color: var(--white-500);
  }

.viewersIcon_d6b206.activeButton_d6b206 {
    color: var(--white-500);
  }

.viewersTooltipItem_d6b206 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.memberListItem_d6b206:not(.popoutDisabled_d6b206):hover {
  background-color: var(--background-tertiary);
}

.wrapper_eb1a4c {
  margin: 0;
}

.base_eb1a4c {
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--header-primary);
}

.selectable_eb1a4c {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.base_eb1a4c.muted_eb1a4c {
  color: var(--header-secondary);
}

.uppercase_eb1a4c {
  text-transform: uppercase;
}

.videoHeight__94748 {
  position: relative;
  flex: 0 0 auto;
}

  .videoHeight__94748.animated__94748 {
    transition: height 0.35s ease;
  }

  .videoHeight__94748.normal__94748 {
    height: 50vh;
  }

  .videoHeight__94748.minimum__94748 {
    height: 275px;
  }

  .videoHeight__94748.noChat__94748 {
    height: 100vh;
  }

  .videoHeight__94748.fullScreen__94748 {
    transition: none;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }

/* NOTE(amadeus): vh units break windows since there's 22px titlebar. This view
 * needs to be refactored in general, and I think it could be a lot better
 * CSS'd and not need this weird calc, but for now - the quick fix */

.platform-win .videoHeight__94748.normal__94748 {
  height: calc(50vh - 22px);
}

.platform-win .videoHeight__94748.noChat__94748 {
  height: calc(100vh - 22px);
}

.video__94748 {
  width: 100%;
  height: 100%;
  min-height: 275px;
  overflow: hidden;
  background-size: 100%;
  background-position: center;
  position: relative;
  cursor: default;
  background-color: var(--primary-800);
}

.video__94748.idle__94748 {
    cursor: none;
  }

.video__94748.normal__94748 .videoCenter__94748, .video__94748.fullScreen__94748 .videoCenter__94748, .video__94748.noChat__94748 .videoCenter__94748 {
      align-self: flex-end;
    }

.video__94748.normal__94748 .videoBottom__94748, .video__94748.fullScreen__94748 .videoBottom__94748, .video__94748.noChat__94748 .videoBottom__94748 {
      transform: translate3d(0, 8px, 0);
      opacity: 0;
    }

.full-motion .video__94748.normal__94748 .videoBottom__94748, .full-motion .video__94748.fullScreen__94748 .videoBottom__94748, .full-motion .video__94748.noChat__94748 .videoBottom__94748 {
        transition:
          transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
      }

.video__94748.normal__94748:not(.idle__94748) .videoWrapper__94748:hover .videoBottom__94748, .video__94748.normal__94748:not(.idle__94748) .videoWrapper__94748.focused__94748 .videoBottom__94748, .video__94748.fullScreen__94748:not(.idle__94748) .videoWrapper__94748:hover .videoBottom__94748, .video__94748.fullScreen__94748:not(.idle__94748) .videoWrapper__94748.focused__94748 .videoBottom__94748, .video__94748.noChat__94748:not(.idle__94748) .videoWrapper__94748:hover .videoBottom__94748, .video__94748.noChat__94748:not(.idle__94748) .videoWrapper__94748.focused__94748 .videoBottom__94748 {
          transform: translate3d(0, 0, 0);
          opacity: 1;
        }

.video__94748 .videoBackgroundTransition__94748 {
    box-shadow: var(--legacy-elevation-high);
  }

.videoWrapper__94748 {
  position: relative;
  border-radius: 3px;
}

.videoInner__94748 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.videoTop__94748,
.videoCenter__94748,
.videoBottom__94748 {
  pointer-events: all;
}

.videoBackground__94748 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoBackgroundTransition__94748 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Light Theme */

.theme-light .video__94748.minimum__94748 {
      background-color: var(--white-500);
      box-shadow: inset 0 -1px 0 var(--primary-230);
    }

/* Dark Theme */

.images-light .video__94748.normal__94748 .videoTop__94748, .images-light .video__94748.noChat__94748 .videoTop__94748 {
        background-image: linear-gradient(0deg, hsl(var(--black-500-hsl) / 0) 0%, hsl(var(--black-500-hsl) / 0.9) 100%);
      }

.images-dark .video__94748.normal__94748 .videoTop__94748, .images-dark .video__94748.noChat__94748 .videoTop__94748 {
        background-image: linear-gradient(0deg, hsl(var(--black-500-hsl) / 0) 0%, hsl(var(--black-500-hsl) / 0.9) 100%);
      }

.pictureInPictureVideo_e4cb9a {
  aspect-ratio: 16 / 9;
  background: var(--primary-800);
  border-radius: 8px;
  overflow: hidden;
  /* Needed for border clip to work */
  transform: translateZ(0);
}

.videoControls_e4cb9a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  padding: 8px;
  background: linear-gradient(var(--black-500) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, var(--black-500) 100%);
}

.videoControlsTextActivity_e4cb9a {
  z-index: 2;
  pointer-events: all;
}

.topControls_e4cb9a {
  width: 100%;
  flex: 0 1 auto;
  transform: translate3d(0, 0, 0);
  pointer-events: all;
}

.full-motion .topControls_e4cb9a {
    transition: transform 0.2s ease-in-out;
  }

.topControlsTextActivity_e4cb9a {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.bottomControls_e4cb9a {
  flex: 0 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: all;
  color: var(--white-500);
  transform: translate3d(0, 0, 0);
}

.full-motion .bottomControls_e4cb9a {
    transition: transform 0.2s ease-in-out;
  }

.bottomLeftControls_e4cb9a {
  min-width: 0;
}

.idle_e4cb9a .videoControls_e4cb9a {
    opacity: 0;
  }

.idle_e4cb9a .topControls_e4cb9a {
    transform: translate3d(0, -8px, 0);
  }

.idle_e4cb9a .bottomControls_e4cb9a {
    transform: translate3d(0, 8px, 0);
  }

.backButton_e4cb9a {
  margin-right: 2px;
  color: var(--primary-300);
  flex-shrink: 0;
}

.headerBar_e4cb9a {
  /* Override uikit padding */
  padding: 0;
  padding-top: 4px;
  height: auto;
}

.topControls_e4cb9a .headerBar_e4cb9a {
    -webkit-app-region: no-drag;
  }

.headerIdleContainer_e4cb9a {
  flex-shrink: 1;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.headerTitle_e4cb9a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--white-500);
  border-bottom: 1px solid transparent;
  margin: 0;
  width: -moz-min-content;
  width: min-content;
  line-height: 20px;
  flex-shrink: 1;
  overflow: hidden;
}

.headerTitle_e4cb9a:hover {
    border-bottom: 1px solid var(--white-500);
    cursor: pointer;
  }

.headerTitle_e4cb9a:hover .backButton_e4cb9a {
      color: var(--white-500);
    }

.headerText_e4cb9a {
  flex-shrink: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menuIcon_e4cb9a {
  cursor: pointer;
}

/* Always show the overlay in keyboard mode so you can see which icons you
 * might be tabbing over */

.keyboard-mode .videoControls_e4cb9a {
  opacity: 1;
}

.art_c6e099 {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 16px;
}

  .art_c6e099.small_c6e099 {
    display: none;
  }

  .art_c6e099.medium_c6e099 {
    height: 88px;
  }

  .art_c6e099.large_c6e099 {
    height: 134px;
  }

.header_c6e099 {
  color: var(--white-500);
  text-align: center;
  margin-bottom: 4px;
}

.description_c6e099 {
  color: var(--primary-200);
  text-align: center;
}

.description_c6e099 p {
    /* Reset global p margin */
    margin: 0;
  }

.outerButton_c6e099 {
  margin-top: 16px;
  /* Pains me to do this, the call tile overlay will occlude the button overwise. */
  z-index: 1;
}

.button_c6e099 {
  background-color: var(--primary-500);
  color: var(--white-500);
  border-radius: 100px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 16px;
}

.button_c6e099:hover {
    background-color: var(--primary-600);
  }

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .button_c6e099 {
    background-color: transparent;
  }

.root_e605a1 {
  background-color: hsl(var(--black-500-hsl) / 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.popIn_c7da74 {
  transform: rotate(-180deg);
}

.participantsButton__211d1 {
  border-radius: 48px;
  background: var(--primary-630);
  padding: 4px;
  box-shadow: var(--elevation-high);
}

  .participantsButton__211d1:hover {
    background: var(--primary-700);
  }

.rightCaret__211d1 {
  transform: rotate(-90deg);
}

.leftCaret__211d1 {
  transform: rotate(90deg);
}

.upCaret__211d1 {
  transform: rotate(180deg);
}

.downCaret__211d1 {
  transform: rotate(0deg);
}

.members__211d1 {
  margin-right: 4px;
}

.iconContainer__211d1 {
  display: flex;
}

.iconContainer__211d1 > svg {
    color: var(--white-500);
  }

.fauxDisabled__666fa {
  opacity: 0.5;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .fauxDisabled__666fa {
    opacity: 1;
  }

.arrowIcon_f41a99 {
  height: 24px;
  width: 24px;
  transform: rotate(270deg);
}

.arrowIconExpanded_f41a99 {
  transform: rotate(360deg);
}

.rightPipIcon_f41a99 {
  margin-left: 16px;
}

.leftPipIcon_f41a99 {
  margin-right: 16px;
}

.participantsButton_f41a99 {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.pipHeader_f41a99 {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 12px;
}

.pipHeaderContent_f41a99 {
  position: absolute;
  box-sizing: border-box;
  max-width: 100%;
  height: 12px;
  padding: 0 8px;
  background-color: var(--black-500);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.full-motion .pipHeaderContent_f41a99 {
    transition: 0.2s all ease-in-out;
  }

.pipHeaderContentOpen_f41a99 {
  background: linear-gradient(var(--black-500) 0%, var(--black-500) 30%, rgba(0, 0, 0, 0) 100%);
  height: 40px;
  padding: 8px;
  cursor: pointer;
}

.pipHeaderButtonsRight_f41a99 {
  display: flex;
}

.menuIcon_f41a99 {
  color: white;
}

.leaveActivityIcon_f41a99 {
  margin-left: 6px;
  height: 24px;
  width: 24px;
}

.root_c5bcbe {
  width: 100%;
  height: 100%;
}

  .root_c5bcbe.pipMode_c5bcbe {
    width: 320px;
    transition: 0.2s ease-in-out height;
  }

  .root_c5bcbe.pipModeShort_c5bcbe {
    height: 180px;
  }

  .root_c5bcbe.pipModeTall_c5bcbe {
    height: 410px;
  }

  .root_c5bcbe.hidden_c5bcbe {
    width: 0;
    max-height: 0;
    transition: none;
  }

.iframe_c5bcbe {
  width: 100%;
  height: 100%;
  /* Setting a min width / height of 2px to ensure the iframe will always
   * be >= 2px. An iframe min size of 2px prevents a common error in javascript
   * graphics frameworks, where it is often assumed that there is a distance of
   * at least 1 pixel between the window edges
   */
  min-width: 2px;
  min-height: 2px;
}

.iframe_c5bcbe.pipModeShort_c5bcbe {
    height: 180px;
  }

.iframe_c5bcbe.pipModeTall_c5bcbe {
    height: 410px;
  }

.pipNonInteractive_c5bcbe {
  pointer-events: none;
}

.clickShield_c5bcbe {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.multiPIPMode_c5bcbe {
  margin-top: 8px;
}

/**
 * To see the values, check ../global/Elevation.module.css
 */

:root {
  --legacy-elevation-low: 0 1px 5px hsl(var(--black-500-hsl) / 0.2);
  --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1);
  --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3);
}

.theme-dark {
  --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl) / 0.3);
  --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.2);
  --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl) / 0.6);
}

/* Dark */

.elevationLow__2b2f1 {
  box-shadow: 0 1px 5px hsl(var(--black-500-hsl) / 0.2);
  box-shadow: var(--legacy-elevation-low);
}

.elevationHigh__2b2f1 {
  box-shadow: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1);
  box-shadow: var(--legacy-elevation-high);
}

.elevationBorderLow__2b2f1 {
  box-shadow: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3), 0 1px 5px hsl(var(--black-500-hsl) / 0.2);
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
}

.darkElevationBorderHigh__2b2f1 {
  box-shadow: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3), 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1);
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}

/* Light */

.lightElevationLow__2b2f1 {
  box-shadow: 0 1px 5px hsl(var(--black-500-hsl) / 0.2);
  box-shadow: var(--legacy-elevation-low);
}

.lightElevationHigh__2b2f1 {
  box-shadow: 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1);
  box-shadow: var(--legacy-elevation-high);
}

.lightElevationBorderLow__2b2f1 {
  box-shadow: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3), 0 1px 5px hsl(var(--black-500-hsl) / 0.2);
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
}

.lightElevationBorderHigh__2b2f1 {
  box-shadow: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3), 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1);
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}

.elevationLow__2b2f1,
.elevationHigh__2b2f1,
.elevationBorderLow__2b2f1,
.elevationBorderHigh__2b2f1 {
  box-shadow: 0 0 0 1px hsl(var(--primary-300-hsl) / 0.3), 0 2px 10px 0 hsl(var(--black-500-hsl) / 0.1);
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}

.pictureInPicture__6341f {
  position: absolute;
  top: 0;
  left: 0;
}

.pictureInPictureWindow__6341f {
  position: absolute;

  /**
  * Make sure this is less than the z-index in `wrapper` in
  *IncomingCallModal.module.css
  */
  z-index: 1000;
}

.borderRadius__6341f {
  border-radius: 8px;
}

.hidden__6341f {
  display: none;
}

.resizeHandle__6341f {
  width: 20px;
  height: 20px;

  position: absolute;
}

.resizeHandleTopRight__6341f {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.resizeHandleTopLeft__6341f {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.resizeHandleBottomRight__6341f {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}

.resizeHandleBottomLeft__6341f {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}

@keyframes pulse__7135b {
  0% {
    /* Using rgba values instead of opacity to avoid passing opacity to child components */
    border-color: rgba(255, 255, 255, 0);
  }

  25% {
    border-color: rgba(255, 255, 255, 0.16);
  }

  50%,
  100% {
    border-color: rgba(255, 255, 255, 0);
  }
}

@keyframes darkerPulse__7135b {
  0% {
    /* Using rgba values instead of opacity to avoid passing opacity to child components */
    border-color: rgba(255, 255, 255, 0);
  }

  25% {
    border-color: rgba(255, 255, 255, 0.32);
  }

  50%,
  100% {
    border-color: rgba(255, 255, 255, 0);
  }
}

.innerContainer__7135b {
  border: 20px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
}

.app-focused .innerContainer__7135b {
  animation: darkerPulse__7135b 2s linear infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.outerContainer__7135b {
  border: 20px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
}

.app-focused .outerContainer__7135b {
  animation: pulse__7135b 2s linear infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-delay: 200ms;
}

.background_fb62e2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
}

.background_fb62e2:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: inherit;
}

.avatarWrapper_fb62e2 {
  border-radius: 50%;
}

@keyframes demoEffect_a8418b {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.demoEffectOverlay_a8418b {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  animation-name: demoEffect_a8418b;
  animation-iteration-count: 1;
  animation-duration: 0.25s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.demoEffectImg_a8418b {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.button_fbcaba {
  line-height: 0;
}

.badgeUpgrade_fbcaba {
  position: absolute;
  right: 2px;
  bottom: 2px;
  color: var(--brand-500);
}

.mirror__948a4 {
  transform: scaleX(-1);
}

.video__948a4 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--black-500);
}

.media__948a4 {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.cta_a3a802 {
  background-color: var(--primary-500);
  color: var(--white-500);
  border-radius: 100px;
  padding: 10px 16px;
  font-weight: 600;
  z-index: 1;
}

  .cta_a3a802:hover {
    background-color: var(--primary-600);
  }

  .cta_a3a802.small_a3a802 {
    padding: 7px 16px;
  }

.buttonReset_a3a802 {
  line-height: 0;
}

.content_c30e20 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.streamHidden_c30e20 {
  background: var(--primary-700);
  flex-direction: column;
}

.streamHiddenEmptyState_c30e20 {
  padding: 0;
  margin: 0;
}

.streamHiddenCTA_c30e20 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.largePaddingTop_c30e20 {
  padding-top: 8px;
}

.addStreamIcon_c30e20 {
  width: 24px;
  height: 24px;
}

.addCTA_c30e20 {
  padding: 8px;
  margin-left: 8px;
}

.content__02686 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.streamHidden__02686 {
  background: var(--primary-700);
  flex-direction: column;
}

.streamHiddenEmptyState__02686 {
  padding: 0;
  margin: 0;
}

.streamHiddenCTA__02686 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.largePaddingTop__02686 {
  padding-top: 8px;
}

.addStreamIcon__02686 {
  width: 24px;
  height: 24px;
}

.addCTA__02686 {
  padding: 8px;
  margin-left: 8px;
}

.leftTrayIcon__2cdb8 {
  margin-right: 16px;
}

.rightTrayIcon__2cdb8 {
  margin-left: 16px;
}

.embedTarget__2cdb8 {
  width: 100%;
  height: 100%;
}

.embedTargetHidden__2cdb8 {
  width: 0;
  height: 0;
  visibility: hidden;
}

.participantName__2cdb8 {
  margin-left: 8px;
}

.loading__6ef4d {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: var(--background-secondary);
  color: var(--text-normal);
}

.container__5b927 {
  position: absolute;
  margin: 8px;
  bottom: 0;
  right: 0;
  padding: 8px;
  white-space: pre;
  font-family: var(--font-code);
  font-size: 10px;
  background-color: var(--background-secondary);
  box-shadow: var(--shadow-border), var(--shadow-high);
  border-radius: 3px;
  /* stylelint-disable-next-line color-no-hex */
  pointer-events: all;
  z-index: 1001;
  min-height: 5em;
  width: 320px;
}

.containerMinimized__5b927 {
  width: auto;
  min-height: auto;
}

.content__5b927 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 5em;
}

.contentMinimized__5b927 {
  display: none;
}

.notTracked__5b927 {
  color: var(--text-muted);
}

.label__5b927 {
  display: flex;
}

.baseIcon__5b927 {
  width: 12px;
  height: 12px;
}

.iconNotTracked__5b927 {
  
  color: var(--primary-300);
}

.iconTracked__5b927 {
  
  color: var(--status-positive);
}

.minimizeButton__5b927 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  cursor: pointer;
}

.jsonSection__5b927 {
  margin-left: 8px;
  margin-bottom: 8px;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.stack__5b927 {
  
  color: var(--text-muted);
}

.current__5b927 {
  
  color: var(--text-normal);
}

.themeSelectionContainer__36dee {
  box-sizing: border-box;
  position: relative;
  height: var(--custom-theme-selection-selection-size);
  width: var(--custom-theme-selection-selection-size);
}

.themeSelection__36dee {
  border-radius: 50%;
  width: 100%;
  height: 100%;

  cursor: pointer;
}

.themeSelection__36dee.selected__36dee {
    cursor: default;
  }

.defaultThemeSelection__36dee {
  box-shadow: inset 0 0 0 1px var(--interactive-normal);
}

.selectionCircle__36dee {
  border-radius: 50%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  position: absolute;
  top: -2px;
  left: -2px;
  cursor: default;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px var(--brand-500),
    inset 0 0 0 4px var(--background-primary);
}

.checkmarkCircle__36dee {
  position: absolute;
  right: 0;
}

.checkmark__36dee {
  color: var(--brand-500);
}

.redCircle__36dee {
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--red-430);
  z-index: 2;
  background-clip: content-box;
  padding: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--background-primary);
}

.lockedBadgeContainer__36dee {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background-color: var(--background-primary);
  z-index: 2;
  background-clip: content-box;
  padding: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lockedBadge__36dee {
  width: 10px;
  height: 10px;
  color: var(--icon-primary);
}

.disabled__36dee {
  pointer-events: none;
  opacity: 0.2;
}

.iconWrapper__36dee {
  width: var(--custom-theme-selection-selection-size);
  height: var(--custom-theme-selection-selection-size);
  position: absolute;
  text-align: center;
  margin-top: 18px;
}

.darkOverlay__36dee {
  --bg-overlay: linear-gradient(hsl(var(--black-500-hsl) / 0.2), hsl(var(--black-500-hsl) / 0.2));
}

.lightOverlay__36dee {
  --bg-overlay: linear-gradient(hsl(var(--white-500-hsl) / 0.5), hsl(var(--white-500-hsl) / 0.5));
}

.darkIcon__36dee {
  background: var(--primary-600);
}

.darkerIcon__36dee {
  background: var(--plum-20);
}

.midnightIcon__36dee {
  background: var(--black-500);
}

.lightIcon__36dee {
  background: var(--white-500);
}

.appIconSelectionContainer__8a3d7 {
  box-sizing: border-box;
  position: relative;
  height: var(--custom-theme-selection-selection-size);
  width: var(--custom-theme-selection-selection-size);
}

.appIconSelection__8a3d7 {
  border-radius: 50%;
  overflow: hidden;
  width: var(--custom-theme-selection-selection-size);
  height: var(--custom-theme-selection-selection-size);
  box-shadow: 0 0 2px var(--interactive-normal);

  cursor: pointer;
}

.appIconSelection__8a3d7.selected__8a3d7 {
    cursor: default;
  }

.disabled__8a3d7 {
  pointer-events: none;
}

.lockedBadgeContainer__8a3d7 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background-color: var(--background-primary);
  z-index: 2;
  background-clip: content-box;
  padding: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lockedBadge__8a3d7 {
  width: 10px;
  height: 10px;
  color: var(--icon-primary);
}

.presets_a00e6e {
  display: flex;
  gap: 16px var(--custom-theme-selection-group-column-gap);
  flex-wrap: wrap;
  margin-top: 16px;
}

.presetsJustified_a00e6e {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  grid-gap: 16px;
}

.header_a00e6e {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headings_a00e6e {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title_a00e6e {
  flex: 1;
  display: flex;
  align-items: center;
}

.description_a00e6e {
  display: flex;
}

.premiumIcon_a00e6e {
  color: var(--header-primary);
}

.nitroWheel_a00e6e {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  margin-left: 2px;
  vertical-align: sub;
  color: var(--header-primary);
}

.editorAnimate__2a891 {
  margin-right: calc((var(--custom-client-themes-editor-content-width) + var(--custom-client-themes-editor-editor-padding) * 2) * -1);
  animation: slidein__2a891 250ms 1s ease-in forwards;
}

@keyframes slidein__2a891 {
  from {
    margin-right: calc((var(--custom-client-themes-editor-content-width) + var(--custom-client-themes-editor-editor-padding) * 2) * -1);
  }

  to {
    margin-right: 0;
  }
}

.title__2a891 {
  flex: 1;
  display: flex;
  align-items: center;
}

.title__2a891 .premiumIcon__2a891 {
  color: var(--header-primary);
  margin-left: 8px;
  width: 18px;
  height: 18px;
}

.editor__2a891 {
  position: relative;
  background: var(--background-primary);
  flex-grow: 0;
  padding: var(--custom-client-themes-editor-editor-padding) 0;
  right: 0;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  border-left: 5px solid var(--background-secondary);
  display: flex;
  flex-direction: column;
}

.visual-refresh .editor__2a891 {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

.editorHeader__2a891 {
  padding: 0 var(--custom-client-themes-editor-editor-padding);
  width: var(--custom-client-themes-editor-content-width);
}

.editorBody__2a891 {
  padding: 0 var(--custom-client-themes-editor-editor-padding);
}

.selectionGroup__2a891 {
  margin-top: 16px;
  width: var(--custom-client-themes-editor-content-width);
}

.editorFooter__2a891 {
  margin-top: 16px;
  padding: 0 var(--custom-client-themes-editor-editor-padding);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footerButton__2a891 {
  padding: 11px;
  width: 100%;
}

.closeCircleButton__2a891 {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 2;
}

.closeCircle__2a891 {
  width: 100%;
  height: 100%;
  color: var(--interactive-normal);
}

.closeCircle__2a891:hover,
  .closeCircle__2a891:focus {
    color: var(--interactive-hover);
  }

/* Outgoing ring: 2.5s duration, rings at .289s and .976s */
@keyframes outgoing-call-pulse_f910d0 {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }

  11.56% {
    opacity: 1;
  }

  39.02% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }
  /* Reset for second ring */
  39.03% {
    transform: scale3d(1, 1, 1);
  }

  39.04% {
    opacity: 1;
  }

  66.48% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }

  100% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }
}
/* Incoming ring: 5.407s duration, rings at .042s, 1.382s, 2.714s, 4.040s */
@keyframes incoming-call-pulse_f910d0 {
  0% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }

  0.7% {
    opacity: 1;
  }

  25.54% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }
  /* Reset for second ring */
  25.55% {
    transform: scale3d(1, 1, 1);
  }

  25.56% {
    opacity: 1;
  }

  49.98% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }

  /* Reset for third ring */
  49.99% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    opacity: 1;
  }

  74.69% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }

  /* Reset for fourth ring  */
  74.70% {
    transform: scale3d(1, 1, 1);
  }

  74.71% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }
}
.clickable_f910d0 {
  cursor: pointer;
}
.wrapper_f910d0 {
  position: relative;
}
.wrapper_f910d0.ringingOutgoing_f910d0:after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: -3px;
    top: -3px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: transparent;
    border: 3px solid var(--interactive-active);
    transform-origin: center;
    /* Small loading animations are alright to keep in reduced-motion */
    /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
    animation: outgoing-call-pulse_f910d0 var(--custom-call-avatar-outgoing-duration) infinite ease-out;
  }
.wrapper_f910d0.ringingIncoming_f910d0:after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: -3px;
    top: -3px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: transparent;
    border: 3px solid var(--interactive-active);
    transform-origin: center;
    /* Small loading animations are alright to keep in reduced-motion */
    /* stylelint-disable-next-line discord/respect-reduced-motion-keyframes */
    animation: incoming-call-pulse_f910d0 var(--custom-call-avatar-incoming-duration) infinite ease-out;
  }
.status_f910d0 {
  background-clip: padding-box;
  border-radius: 50%;
  padding: 4px;
  width: 16px;
  height: 16px;

  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--red-400);
}
.voiceAvatar_f910d0 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: inherit;
}
.voiceAvatar_f910d0.ringingOutgoing_f910d0 {
    opacity: 0.3;
  }
.border_f910d0 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}
.border_f910d0.speaking_f910d0 {
    box-shadow:
      inset 0 0 0 2px var(--status-speaking),
      inset 0 0 0 3px var(--background-floating);
  }
/* NOTE(amadeus): Only use box shadow transitions when focused, or else we can
 * affect performance in negative ways  */
.app-focused .border_f910d0 {
  transition: box-shadow 100ms ease-out;
}
.overlay_f910d0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--black-500-hsl) / 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}
.overlayIcon_f910d0 {
  width: 32px;
  height: 32px;
  color: var(--white-500);
}
.callAvatarMask_f910d0 {
  position: relative;
  overflow: visible;
}
.callAvatarMaskContainer_f910d0 {
  position: relative;
  height: 100%;
}

.item__0c135 {
  display: flex;
  align-items: center;
}

.root__2dbe1 {
  border-radius: 8px;
  padding: 16px;
  background: var(--background-floating);
  box-shadow: var(--elevation-high);
  min-width: 232px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
}

  .root__2dbe1.previewCamera__2dbe1 {
    flex-direction: column-reverse;
    overflow: hidden;
  }

.previewRoot__2dbe1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-secondary-alt);
}

.preview__2dbe1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.preview__2dbe1:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      rgba(24, 25, 28, 1) 0%,
      rgba(0, 0, 0, 0) 84px,
      rgba(0, 0, 0, 0) 183px,
      rgba(24, 25, 28, 1) 100%
    );
  }

.mainChannelInfo__2dbe1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.mainChannelInfo__2dbe1 .titleGroup__2dbe1 {
    max-width: 100%;
  }

.mainChannelInfo__2dbe1 .icon__2dbe1 {
    margin: 16px 0;
  }

.mainChannelInfo__2dbe1 .title__2dbe1,
  .mainChannelInfo__2dbe1 .subtitle__2dbe1 {
    text-align: center;
  }

.mainChannelInfo__2dbe1 .title__2dbe1 {
    margin-bottom: 2px;
    min-width: 0;
    flex-shrink: 1;
    word-wrap: break-word;
  }

.mainChannelInfo__2dbe1 .subtitle__2dbe1 {
    margin-bottom: 24px;
  }

.previewChannelHeader__2dbe1 {
  position: absolute;
  top: 16px;
  left: 0;
  padding-left: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.previewChannelHeader__2dbe1 .titleGroup__2dbe1 {
    flex-shrink: 1;
    min-width: 0;
  }

.previewChannelHeader__2dbe1 .icon__2dbe1 {
    margin-right: 16px;
  }

.previewChannelHeader__2dbe1 .title__2dbe1,
  .previewChannelHeader__2dbe1 .subtitle__2dbe1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--header-primary);
  }

.wrapper__2dbe1 {
  /**
  * Make sure this is greater than the z-index in `pictureInPictureWindow` in
  * PictureInPicture.module.css
  */
  z-index: 1001;
  pointer-events: all;
}

.actions__2dbe1 {
  display: flex;
  gap: 16px;
}

.actionButton__2dbe1 {
  line-height: 0;
}

.experimentActions__2dbe1 {
  display: flex;
  gap: 8px;
}

.previewButton__2dbe1 {
  margin-top: 16px;
}

.presets__67a11 {
  display: flex;
  gap: 16px var(--custom-theme-selection-group-column-gap);
  flex-wrap: wrap;
  margin-top: 16px;
}

.presetsJustify__67a11 {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  grid-gap: 16px;
}

.header__67a11 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headings__67a11 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upsellText__67a11 {
  color: var(--premium-nitro-pink-text);
}

.title__67a11 {
  flex: 1;
  display: flex;
  align-items: center;
}

.description__67a11 {
  display: flex;
}

.betaTag__67a11 {
  background: var(--custom-premium-colors-premium-gradient-tier-2);
  display: inline;
}

.betaTagContainer__67a11 {
  display: inline-flex;
  margin-left: 2px;
  border-radius: 8px;
}

.premiumIcon__67a11 {
  color: var(--header-primary);
}

.nitroWheel__67a11 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  margin-left: 2px;
  vertical-align: sub;
  color: var(--header-primary);
}

.easterEggSelection__67a11 {
  transform: rotate(0deg), scale(0);
  position: relative;
}

.full-motion .easterEggSelection__67a11 {
    animation: scale-bounce-wiggle__67a11 0.5s 0s forwards;
  }

.sparkles__67a11 {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  animation: fadeOut__67a11 2s 3s forwards;
  opacity: 1;
}

@keyframes fadeOut__67a11 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes scale-bounce-wiggle__67a11 {
  0% {
    transform: scale(0) rotate(10deg);
  }

  30% {
    transform: scale(1.3) rotate(10deg);
  }

  55% {
    transform: scale(0.7) rotate(-10deg);
  }

  75% {
    transform: scale(1.2) rotate(20deg);
  }

  85% {
    transform: scale(0.98) rotate(-20deg);
  }

  92% {
    transform: scale(1.1) rotate(-5deg);
  }

  97% {
    transform: scale(0.99) rotate(-5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.editorAnimate_cf6da1 {
  margin-right: calc((var(--custom-client-themes-editor-content-width) + var(--custom-client-themes-editor-editor-padding) * 2) * -1);
  animation: slidein_cf6da1 0.5s 1s ease-in forwards;
}

@keyframes slidein_cf6da1 {
  from {
    margin-right: calc((var(--custom-client-themes-editor-content-width) + var(--custom-client-themes-editor-editor-padding) * 2) * -1);
  }

  to {
    margin-right: 0;
  }
}

.themeEditor_cf6da1 {
  position: relative;
  background: var(--background-primary);
  flex-grow: 0;
  padding: var(--custom-client-themes-editor-editor-padding) 0;
  right: 0;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  border-left: 5px solid var(--background-secondary);
  display: flex;
  flex-direction: column;
}

.visual-refresh .themeEditor_cf6da1 {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

.editorHeader_cf6da1 {
  padding: 0 var(--custom-client-themes-editor-editor-padding);
  width: var(--custom-client-themes-editor-content-width);
}

.editorBody_cf6da1 {
  padding: 0 var(--custom-client-themes-editor-editor-padding);
}

.selectionGroup_cf6da1 {
  margin-top: 16px;
  width: var(--custom-client-themes-editor-content-width);
}

.editorFooter_cf6da1 {
  margin-top: 16px;
  padding: 0 var(--custom-client-themes-editor-editor-padding);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footerButton_cf6da1 {
  padding: 11px;
  width: 100%;
}

.closeCircleButton_cf6da1 {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 2;
}

.closeCircle_cf6da1 {
  width: 100%;
  height: 100%;
  color: var(--interactive-normal);
}

.closeCircle_cf6da1:hover,
  .closeCircle_cf6da1:focus {
    color: var(--interactive-hover);
  }

.bannerUpsell_cf6da1 {
  background-image: var(--custom-premium-colors-premium-gradient-tier-2);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.bannerUpsell_cf6da1 .premiumIcon_cf6da1 {
    color: var(--white-500);
    margin-right: 10px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

.canvas_eb6eba {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
}

.container__0bec3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.gridOverlay__0bec3 {
  width: 100%;
  height: 100%;

  --custom-grid-line-color: var(--border-subtle);
  --custom-grid-line-width: 0.3px;

  --custom-grid-vertical-lines: linear-gradient(
    to right,
    var(--custom-grid-line-color) var(--custom-grid-line-width),
    transparent var(--custom-grid-line-width)
  );

  --custom-grid-horizontal-lines: linear-gradient(
    to bottom,
    var(--custom-grid-line-color) var(--custom-grid-line-width),
    transparent var(--custom-grid-line-width)
  );
}

/* Both horizontal and vertical lines */

.gridOverlay__0bec3[data-horizontal='true'][data-vertical='true'] {
    background-size: var(--custom-grid-horizontal-spacing) var(--custom-grid-vertical-spacing);
    background-position:
      0 var(--custom-grid-vertical-spacing),
      var(--custom-grid-horizontal-spacing) 0;
    background-image: var(--custom-grid-horizontal-lines), var(--custom-grid-vertical-lines);
  }

/* Just horizontal lines */

.gridOverlay__0bec3[data-horizontal='true'][data-vertical='false'] {
    background-size: var(--custom-grid-horizontal-spacing) var(--custom-grid-horizontal-spacing);
    background-position:
      0 var(--custom-grid-horizontal-spacing),
      var(--custom-grid-horizontal-spacing) 0;
    background-image: var(--custom-grid-horizontal-lines);
  }

/* Just horizontal lines */

.gridOverlay__0bec3[data-horizontal='false'][data-vertical='true'] {
    background-size: var(--custom-grid-vertical-spacing) var(--custom-grid-vertical-spacing);
    background-position:
      0 var(--custom-grid-vertical-spacing),
      var(--custom-grid-vertical-spacing) 0;
    background-image: var(--custom-grid-vertical-lines);
  }

.visual-refresh .gridOverlay__0bec3 {
    --custom-grid-line-color: var(--border-normal);
  }

@media (-webkit-max-device-pixel-ratio: 1.5), (max-resolution: 1.5x) {
  .gridOverlay__0bec3 {
    --custom-grid-line-width: 1px;
  }
}

.container_a7f798 {
  position: absolute;
  margin: 8px;
  bottom: 0;
  right: 0;
  padding: 8px;
  white-space: pre;
  font-family: var(--font-code);
  font-size: 10px;
  background-color: var(--background-secondary);
  box-shadow: var(--shadow-border), var(--shadow-high);
  border-radius: 3px;
  /* stylelint-disable-next-line color-no-hex */
  pointer-events: all;
  z-index: 1001;
  min-width: 5rem;
}

.status_a7f798 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.statusIndicator_a7f798 {
  padding-right: 0.5rem;
}

.statusText_a7f798 {
  padding-left: 0.5rem;
}

.up__89d2b {
  /* nothing */
}

.right__89d2b {
  transform: rotate3d(0, 0, 1, 90deg);
}

.down__89d2b {
  transform: rotate3d(0, 0, 1, 180deg);
}

.left__89d2b {
  transform: rotate3d(0, 0, 1, -90deg);
}

.draggableContainer__6a6d6 {
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
}

.container__6a6d6 {
  width: 300px;
  background-color: var(--background-primary);
}

.headerParentContainer__6a6d6 {
  padding: var(--spacing-16);
}

.headerContainer__6a6d6 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: var(--spacing-8);
}

.closeContainer__6a6d6 {
  margin-left: auto;
}

.closeInner__6a6d6 {
  color: var(--interactive-normal) !important;
}

.closeInner__6a6d6 {
  background-color: var(--background-secondary);
  /* stylelint-disable-next-line declaration-no-important */
}

.closeInner__6a6d6:hover {
    color: var(--interactive-normal) !important;
  }

.closeInner__6a6d6:hover {
    background-color: var(--background-secondary);
    /* stylelint-disable-next-line declaration-no-important */
  }

.scrollContainer__6a6d6 {
  max-height: 480px;
  padding: var(--spacing-8) var(--spacing-16);
  padding-bottom: 150px;
}

.footerContainer__6a6d6 {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  pointer-events: none;
  padding: 100px var(--spacing-16) var(--spacing-16);
}

.theme-light .headerParentContainer__6a6d6 {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  }

.theme-light .footerContainer__6a6d6 {
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 12.54%, rgba(233, 233, 233, 0.8) 40.9%, #d9d9d9 100%);
  }

.theme-dark .headerParentContainer__6a6d6 {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
  }

.theme-dark .footerContainer__6a6d6 {
    /* stylelint-disable-next-line color-no-hex */
    background: linear-gradient(180deg, rgba(52, 52, 52, 0) 0%, rgba(35, 35, 35, 0.9) 50%, #1c1c1c 100%);
  }

.footerLabelContainer__6a6d6 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.footerButtonContainer__6a6d6 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8);
}

.footerNitro__6a6d6 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.footerText__6a6d6 {
  pointer-events: all;
}

.footerButtonBack__6a6d6 {
  height: 100%;
}

.footerButton__6a6d6 {
  pointer-events: all;
}

html,
[data-popout-root] {
  /* NOTE(aweary) these are here for backwards-compatibility with the old --brand-experiment
  alpha tokens. These should be generated as part of the token pipeline; do not add new ones. */
  /* stylelint-disable discord/var-validator */
  --brand-05a: hsla(var(--brand-500-hsl) / 0.05);
  --brand-10a: hsla(var(--brand-500-hsl) / 0.1);
  --brand-15a: hsla(var(--brand-500-hsl) / 0.15);
  --brand-20a: hsla(var(--brand-500-hsl) / 0.2);
  --brand-25a: hsla(var(--brand-500-hsl) / 0.25);
  --brand-30a: hsla(var(--brand-500-hsl) / 0.3);
  --brand-35a: hsla(var(--brand-500-hsl) / 0.35);
  --brand-40a: hsla(var(--brand-500-hsl) / 0.4);
  --brand-45a: hsla(var(--brand-500-hsl) / 0.45);
  --brand-50a: hsla(var(--brand-500-hsl) / 0.5);
  --brand-55a: hsla(var(--brand-500-hsl) / 0.55);
  --brand-60a: hsla(var(--brand-500-hsl) / 0.6);
  --brand-65a: hsla(var(--brand-500-hsl) / 0.65);
  --brand-70a: hsla(var(--brand-500-hsl) / 0.7);
  --brand-75a: hsla(var(--brand-500-hsl) / 0.75);
  --brand-80a: hsla(var(--brand-500-hsl) / 0.8);
  --brand-85a: hsla(var(--brand-500-hsl) / 0.85);
  --brand-90a: hsla(var(--brand-500-hsl) / 0.9);
  --brand-95a: hsla(var(--brand-500-hsl) / 0.95);
  /* stylelint-enable discord/var-validator */
}

html.low-saturation,
[data-popout-root].low-saturation {
  --control-brand-foreground: var(--interactive-normal);
}

/* Yes, this has to be a * selector because it doesn't get inherited as you'd expect */

html.disable-forced-colors * {
  forced-color-adjust: none;
}

.decorate-links {
  --link-decoration: underline;
}

.visual-refresh {
  --input-border: rgba(135, 135, 144, 0.48);
}

.errorPage_a57b28 {
  width: 100%;
}

.buttons_a57b28 {
  display: flex;
}

.clearOverrideButton_a57b28 {
  margin-left: 8px;
}

@supports (grid-template-columns: subgrid) {
  .bar_c38106 {
    grid-area: titleBar;
  }
}

.bar_c38106 {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--custom-app-top-bar-height);
  padding-left: calc(var(--custom-guild-list-width) + var(--space-8));
  padding-right: var(--space-12);
  position: relative;
  -webkit-app-region: drag;
}

.bar_c38106[data-windows='true'] {
    padding-right: 0;
  }

.shortBar_c38106 {
  --custom-app-top-bar-height: 24px;
}

.systemBar_c38106 {
  justify-content: flex-end;
  z-index: 999999;
  display: none;
}

.show_c38106 {
  display: flex;
}

.fixed_c38106 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* this must be absolute, so that its properly centered */

.title_c38106 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* hide the title on smaller screen sizes to make room for the buttons */

@media (max-width: 800px) {
  .title_c38106 {
    display: none;
  }
}

.leading_c38106 {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-12);
  position: relative;
  z-index: 1;
  -webkit-app-region: no-drag;
}

.trailing_c38106 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-12);
  position: relative;
  z-index: 1;
  -webkit-app-region: no-drag;
}

.winButtons_c38106 {
  color: var(--interactive-normal);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.winButtonsWithDivider_c38106:before {
    content: '';
    display: block;
    border-left: 1px solid var(--border-subtle);
    height: calc(var(--custom-app-top-bar-height) - var(--space-12));
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }

.winButton_c38106 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--custom-app-top-bar-height);
  height: var(--custom-app-top-bar-height);
  cursor: pointer;
}

.winButtonMinMax_c38106:hover {
    background-color: var(--background-modifier-hover);
    color: var(--interactive-hover);
  }

.winButtonMinMax_c38106:active {
    background-color: var(--background-modifier-active);
    color: var(--interactive-active);
  }

.winButtonClose_c38106 {
  
}

.winButtonClose_c38106:hover {
    color: var(--white-500);
    background-color: var(--status-danger);
  }

/* stylelint-disable discord/var-validator */

.appAsidePanelWrapper_a3002d {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0; /* Allow flex item to shrink below content size */
}

.mobileAppAsidePanelWrapper_a3002d {
  flex-direction: column;
}

.notAppAsidePanel_a3002d {
  flex: 1;
  min-width: 0; /* Allow flex item to shrink below content size */
}

.app_a3002d {
  position: relative;
  z-index: auto;
  height: 100%;
}

.mobileApp_a3002d {
  z-index: auto;
  overflow: auto;
  height: 100%;
}

.allowsScrolling_a3002d {
  overflow: auto;
}

.visual-refresh .app_a3002d {
    position: static;
    position: initial;
  }

/** assuming the position:initial is needed for some good reason,
      so just undoing this when DevTools is mounted.
  */

.visual-refresh .notAppAsidePanel_a3002d:has(~ [data-app-right-panel='true']) .app_a3002d {
    position: relative;
  }

/* TODO: move breakpoints to common style file */

.modal__7f8f5 {
  border-radius: 5px;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}

.theme-dark .modal__7f8f5 {
    background-color: var(--primary-600);
  }

.theme-light .modal__7f8f5 {
    background: var(--white-500);
  }

.sizeSmall__7f8f5 {
  width: 440px;
  max-height: 660px;
  min-height: 200px;
}

.sizeMedium__7f8f5 {
  width: 600px;
  max-height: 800px;
  min-height: 400px;
}

.sizeLarge__7f8f5 {
  min-width: 800px;
  max-width: 960px;
  min-height: 400px;
}

@media (max-width: 485px) {
  .sizeSmall__7f8f5,
  .sizeMedium__7f8f5,
  .sizeLarge__7f8f5 {
    min-width: auto;
    width: 96%;
    align-self: center;
    max-height: 100vh;
  }

  .fullscreenOnMobile__7f8f5 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
    overflow-y: auto;
  }

    .fullscreenOnMobile__7f8f5 .header__7f8f5,
    .fullscreenOnMobile__7f8f5 .footer__7f8f5 {
      border-radius: 0;
    }

  .hideOnFullscreen__7f8f5 {
    display: none;
  }
}

/* stylelint-disable discord/var-validator */

:root {
  --application-subscription-end: hsl(var(--application-subscription-end-hsl) / 1);
  --application-subscription-end-hsl: 196.564 calc(var(--saturation-factor, 1) * 98.788%) 32.353%;
  --application-subscription-start: hsl(var(--application-subscription-start-hsl) / 1);
  --application-subscription-start-hsl: 234.909 calc(var(--saturation-factor, 1) * 68.465%) 52.745%;
  --battlenet: hsl(var(--battlenet-hsl) / 1);
  --battlenet-hsl: 199.651 calc(var(--saturation-factor, 1) * 100%) 44.902%;
  --bg-gradient-aurora-1: hsl(var(--bg-gradient-aurora-1-hsl) / 1);
  --bg-gradient-aurora-1-hsl: 219.74 calc(var(--saturation-factor, 1) * 86.517%) 17.451%;
  --bg-gradient-aurora-2: hsl(var(--bg-gradient-aurora-2-hsl) / 1);
  --bg-gradient-aurora-2-hsl: 237.778 calc(var(--saturation-factor, 1) * 76.415%) 41.569%;
  --bg-gradient-aurora-3: hsl(var(--bg-gradient-aurora-3-hsl) / 1);
  --bg-gradient-aurora-3-hsl: 183.556 calc(var(--saturation-factor, 1) * 78.035%) 33.922%;
  --bg-gradient-aurora-4: hsl(var(--bg-gradient-aurora-4-hsl) / 1);
  --bg-gradient-aurora-4-hsl: 169.2 calc(var(--saturation-factor, 1) * 60.241%) 32.549%;
  --bg-gradient-aurora-5: hsl(var(--bg-gradient-aurora-5-hsl) / 1);
  --bg-gradient-aurora-5-hsl: 229.839 calc(var(--saturation-factor, 1) * 92.537%) 26.275%;
  --bg-gradient-blurple-twilight-1: hsl(var(--bg-gradient-blurple-twilight-1-hsl) / 1);
  --bg-gradient-blurple-twilight-1-hsl: 233.904 calc(var(--saturation-factor, 1) * 79.574%) 53.922%;
  --bg-gradient-blurple-twilight-2: hsl(var(--bg-gradient-blurple-twilight-2-hsl) / 1);
  --bg-gradient-blurple-twilight-2-hsl: 245.294 calc(var(--saturation-factor, 1) * 63.75%) 31.373%;
  --bg-gradient-chroma-glow-1: hsl(var(--bg-gradient-chroma-glow-1-hsl) / 1);
  --bg-gradient-chroma-glow-1-hsl: 183.39 calc(var(--saturation-factor, 1) * 86.341%) 40.196%;
  --bg-gradient-chroma-glow-2: hsl(var(--bg-gradient-chroma-glow-2-hsl) / 1);
  --bg-gradient-chroma-glow-2-hsl: 258.113 calc(var(--saturation-factor, 1) * 89.831%) 46.275%;
  --bg-gradient-chroma-glow-3: hsl(var(--bg-gradient-chroma-glow-3-hsl) / 1);
  --bg-gradient-chroma-glow-3-hsl: 298.491 calc(var(--saturation-factor, 1) * 90.857%) 34.314%;
  --bg-gradient-chroma-glow-4: hsl(var(--bg-gradient-chroma-glow-4-hsl) / 1);
  --bg-gradient-chroma-glow-4-hsl: 264.767 calc(var(--saturation-factor, 1) * 100%) 66.275%;
  --bg-gradient-chroma-glow-5: hsl(var(--bg-gradient-chroma-glow-5-hsl) / 1);
  --bg-gradient-chroma-glow-5-hsl: 206.702 calc(var(--saturation-factor, 1) * 75.494%) 50.392%;
  --bg-gradient-citrus-sherbert-1: hsl(var(--bg-gradient-citrus-sherbert-1-hsl) / 1);
  --bg-gradient-citrus-sherbert-1-hsl: 39.683 calc(var(--saturation-factor, 1) * 88.732%) 58.235%;
  --bg-gradient-citrus-sherbert-2: hsl(var(--bg-gradient-citrus-sherbert-2-hsl) / 1);
  --bg-gradient-citrus-sherbert-2-hsl: 18 calc(var(--saturation-factor, 1) * 81.522%) 63.922%;
  --bg-gradient-cotton-candy-1: hsl(var(--bg-gradient-cotton-candy-1-hsl) / 1);
  --bg-gradient-cotton-candy-1-hsl: 349.315 calc(var(--saturation-factor, 1) * 76.842%) 81.373%;
  --bg-gradient-cotton-candy-2: hsl(var(--bg-gradient-cotton-candy-2-hsl) / 1);
  --bg-gradient-cotton-candy-2-hsl: 226.4 calc(var(--saturation-factor, 1) * 92.593%) 84.118%;
  --bg-gradient-crimson-moon-1: hsl(var(--bg-gradient-crimson-moon-1-hsl) / 1);
  --bg-gradient-crimson-moon-1-hsl: 0 calc(var(--saturation-factor, 1) * 88.608%) 30.98%;
  --bg-gradient-crimson-moon-2: hsl(var(--bg-gradient-crimson-moon-2-hsl) / 1);
  --bg-gradient-crimson-moon-2-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --bg-gradient-desert-khaki-1: hsl(var(--bg-gradient-desert-khaki-1-hsl) / 1);
  --bg-gradient-desert-khaki-1-hsl: 28.696 calc(var(--saturation-factor, 1) * 32.394%) 86.078%;
  --bg-gradient-desert-khaki-2: hsl(var(--bg-gradient-desert-khaki-2-hsl) / 1);
  --bg-gradient-desert-khaki-2-hsl: 40 calc(var(--saturation-factor, 1) * 41.284%) 78.627%;
  --bg-gradient-desert-khaki-3: hsl(var(--bg-gradient-desert-khaki-3-hsl) / 1);
  --bg-gradient-desert-khaki-3-hsl: 50.164 calc(var(--saturation-factor, 1) * 49.593%) 75.882%;
  --bg-gradient-dusk-1: hsl(var(--bg-gradient-dusk-1-hsl) / 1);
  --bg-gradient-dusk-1-hsl: 292.8 calc(var(--saturation-factor, 1) * 13.514%) 36.275%;
  --bg-gradient-dusk-2: hsl(var(--bg-gradient-dusk-2-hsl) / 1);
  --bg-gradient-dusk-2-hsl: 223.125 calc(var(--saturation-factor, 1) * 41.026%) 69.412%;
  --bg-gradient-easter-egg-1: hsl(var(--bg-gradient-easter-egg-1-hsl) / 1);
  --bg-gradient-easter-egg-1-hsl: 226.731 calc(var(--saturation-factor, 1) * 58.427%) 65.098%;
  --bg-gradient-easter-egg-2: hsl(var(--bg-gradient-easter-egg-2-hsl) / 1);
  --bg-gradient-easter-egg-2-hsl: 227.143 calc(var(--saturation-factor, 1) * 30.973%) 44.314%;
  --bg-gradient-forest-1: hsl(var(--bg-gradient-forest-1-hsl) / 1);
  --bg-gradient-forest-1-hsl: 124.286 calc(var(--saturation-factor, 1) * 25.926%) 10.588%;
  --bg-gradient-forest-2: hsl(var(--bg-gradient-forest-2-hsl) / 1);
  --bg-gradient-forest-2-hsl: 142.5 calc(var(--saturation-factor, 1) * 26.23%) 23.922%;
  --bg-gradient-forest-3: hsl(var(--bg-gradient-forest-3-hsl) / 1);
  --bg-gradient-forest-3-hsl: 76.154 calc(var(--saturation-factor, 1) * 20.635%) 24.706%;
  --bg-gradient-forest-4: hsl(var(--bg-gradient-forest-4-hsl) / 1);
  --bg-gradient-forest-4-hsl: 116.667 calc(var(--saturation-factor, 1) * 16.981%) 41.569%;
  --bg-gradient-forest-5: hsl(var(--bg-gradient-forest-5-hsl) / 1);
  --bg-gradient-forest-5-hsl: 42.766 calc(var(--saturation-factor, 1) * 38.525%) 47.843%;
  --bg-gradient-hanami-1: hsl(var(--bg-gradient-hanami-1-hsl) / 1);
  --bg-gradient-hanami-1-hsl: 352.174 calc(var(--saturation-factor, 1) * 68.317%) 80.196%;
  --bg-gradient-hanami-2: hsl(var(--bg-gradient-hanami-2-hsl) / 1);
  --bg-gradient-hanami-2-hsl: 43.146 calc(var(--saturation-factor, 1) * 73.554%) 76.275%;
  --bg-gradient-hanami-3: hsl(var(--bg-gradient-hanami-3-hsl) / 1);
  --bg-gradient-hanami-3-hsl: 115.714 calc(var(--saturation-factor, 1) * 43.077%) 74.51%;
  --bg-gradient-lofi-vibes-1: hsl(var(--bg-gradient-lofi-vibes-1-hsl) / 1);
  --bg-gradient-lofi-vibes-1-hsl: 219.759 calc(var(--saturation-factor, 1) * 83.838%) 80.588%;
  --bg-gradient-lofi-vibes-2: hsl(var(--bg-gradient-lofi-vibes-2-hsl) / 1);
  --bg-gradient-lofi-vibes-2-hsl: 183.81 calc(var(--saturation-factor, 1) * 57.798%) 78.627%;
  --bg-gradient-lofi-vibes-3: hsl(var(--bg-gradient-lofi-vibes-3-hsl) / 1);
  --bg-gradient-lofi-vibes-3-hsl: 129.6 calc(var(--saturation-factor, 1) * 46.296%) 78.824%;
  --bg-gradient-lofi-vibes-4: hsl(var(--bg-gradient-lofi-vibes-4-hsl) / 1);
  --bg-gradient-lofi-vibes-4-hsl: 75.738 calc(var(--saturation-factor, 1) * 48.8%) 75.49%;
  --bg-gradient-mars-1: hsl(var(--bg-gradient-mars-1-hsl) / 1);
  --bg-gradient-mars-1-hsl: 14.795 calc(var(--saturation-factor, 1) * 36.318%) 39.412%;
  --bg-gradient-mars-2: hsl(var(--bg-gradient-mars-2-hsl) / 1);
  --bg-gradient-mars-2-hsl: 0 calc(var(--saturation-factor, 1) * 36.19%) 41.176%;
  --bg-gradient-midnight-blurple-1: hsl(var(--bg-gradient-midnight-blurple-1-hsl) / 1);
  --bg-gradient-midnight-blurple-1-hsl: 245.077 calc(var(--saturation-factor, 1) * 55.085%) 53.725%;
  --bg-gradient-midnight-blurple-2: hsl(var(--bg-gradient-midnight-blurple-2-hsl) / 1);
  --bg-gradient-midnight-blurple-2-hsl: 259.024 calc(var(--saturation-factor, 1) * 74.545%) 10.784%;
  --bg-gradient-mint-apple-1: hsl(var(--bg-gradient-mint-apple-1-hsl) / 1);
  --bg-gradient-mint-apple-1-hsl: 165.625 calc(var(--saturation-factor, 1) * 39.669%) 52.549%;
  --bg-gradient-mint-apple-2: hsl(var(--bg-gradient-mint-apple-2-hsl) / 1);
  --bg-gradient-mint-apple-2-hsl: 118.681 calc(var(--saturation-factor, 1) * 40.444%) 55.882%;
  --bg-gradient-mint-apple-3: hsl(var(--bg-gradient-mint-apple-3-hsl) / 1);
  --bg-gradient-mint-apple-3-hsl: 86.667 calc(var(--saturation-factor, 1) * 48.293%) 59.804%;
  --bg-gradient-neon-nights-1: hsl(var(--bg-gradient-neon-nights-1-hsl) / 1);
  --bg-gradient-neon-nights-1-hsl: 176.407 calc(var(--saturation-factor, 1) * 98.817%) 33.137%;
  --bg-gradient-neon-nights-2: hsl(var(--bg-gradient-neon-nights-2-hsl) / 1);
  --bg-gradient-neon-nights-2-hsl: 259.333 calc(var(--saturation-factor, 1) * 39.474%) 55.294%;
  --bg-gradient-neon-nights-3: hsl(var(--bg-gradient-neon-nights-3-hsl) / 1);
  --bg-gradient-neon-nights-3-hsl: 313.548 calc(var(--saturation-factor, 1) * 52.542%) 46.275%;
  --bg-gradient-retro-raincloud-1: hsl(var(--bg-gradient-retro-raincloud-1-hsl) / 1);
  --bg-gradient-retro-raincloud-1-hsl: 201.553 calc(var(--saturation-factor, 1) * 47.032%) 42.941%;
  --bg-gradient-retro-raincloud-2: hsl(var(--bg-gradient-retro-raincloud-2-hsl) / 1);
  --bg-gradient-retro-raincloud-2-hsl: 241.017 calc(var(--saturation-factor, 1) * 29.648%) 60.98%;
  --bg-gradient-retro-storm-1: hsl(var(--bg-gradient-retro-storm-1-hsl) / 1);
  --bg-gradient-retro-storm-1-hsl: 201.553 calc(var(--saturation-factor, 1) * 47.032%) 42.941%;
  --bg-gradient-retro-storm-2: hsl(var(--bg-gradient-retro-storm-2-hsl) / 1);
  --bg-gradient-retro-storm-2-hsl: 240.896 calc(var(--saturation-factor, 1) * 27.801%) 47.255%;
  --bg-gradient-sepia-1: hsl(var(--bg-gradient-sepia-1-hsl) / 1);
  --bg-gradient-sepia-1-hsl: 32.727 calc(var(--saturation-factor, 1) * 14.163%) 45.686%;
  --bg-gradient-sepia-2: hsl(var(--bg-gradient-sepia-2-hsl) / 1);
  --bg-gradient-sepia-2-hsl: 36.207 calc(var(--saturation-factor, 1) * 46.774%) 24.314%;
  --bg-gradient-strawberry-lemonade-1: hsl(var(--bg-gradient-strawberry-lemonade-1-hsl) / 1);
  --bg-gradient-strawberry-lemonade-1-hsl: 326.98 calc(var(--saturation-factor, 1) * 74.129%) 39.412%;
  --bg-gradient-strawberry-lemonade-2: hsl(var(--bg-gradient-strawberry-lemonade-2-hsl) / 1);
  --bg-gradient-strawberry-lemonade-2-hsl: 27.778 calc(var(--saturation-factor, 1) * 71.681%) 44.314%;
  --bg-gradient-strawberry-lemonade-3: hsl(var(--bg-gradient-strawberry-lemonade-3-hsl) / 1);
  --bg-gradient-strawberry-lemonade-3-hsl: 39.588 calc(var(--saturation-factor, 1) * 80.165%) 52.549%;
  --bg-gradient-sunrise-1: hsl(var(--bg-gradient-sunrise-1-hsl) / 1);
  --bg-gradient-sunrise-1-hsl: 326.809 calc(var(--saturation-factor, 1) * 41.964%) 43.922%;
  --bg-gradient-sunrise-2: hsl(var(--bg-gradient-sunrise-2-hsl) / 1);
  --bg-gradient-sunrise-2-hsl: 27.5 calc(var(--saturation-factor, 1) * 44.86%) 58.039%;
  --bg-gradient-sunrise-3: hsl(var(--bg-gradient-sunrise-3-hsl) / 1);
  --bg-gradient-sunrise-3-hsl: 50.286 calc(var(--saturation-factor, 1) * 46.256%) 44.51%;
  --bg-gradient-sunset-1: hsl(var(--bg-gradient-sunset-1-hsl) / 1);
  --bg-gradient-sunset-1-hsl: 259.2 calc(var(--saturation-factor, 1) * 55.556%) 35.294%;
  --bg-gradient-sunset-2: hsl(var(--bg-gradient-sunset-2-hsl) / 1);
  --bg-gradient-sunset-2-hsl: 21.667 calc(var(--saturation-factor, 1) * 66.667%) 57.647%;
  --bg-gradient-under-the-sea-1: hsl(var(--bg-gradient-under-the-sea-1-hsl) / 1);
  --bg-gradient-under-the-sea-1-hsl: 114.783 calc(var(--saturation-factor, 1) * 10.502%) 42.941%;
  --bg-gradient-under-the-sea-2: hsl(var(--bg-gradient-under-the-sea-2-hsl) / 1);
  --bg-gradient-under-the-sea-2-hsl: 158.667 calc(var(--saturation-factor, 1) * 20.362%) 43.333%;
  --bg-gradient-under-the-sea-3: hsl(var(--bg-gradient-under-the-sea-3-hsl) / 1);
  --bg-gradient-under-the-sea-3-hsl: 175.385 calc(var(--saturation-factor, 1) * 10.924%) 46.667%;
  --black: hsl(var(--black-hsl) / 1);
  --black-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-100: hsl(var(--black-100-hsl) / 1);
  --black-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 94.902%;
  --black-130: hsl(var(--black-130-hsl) / 1);
  --black-130-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 90.98%;
  --black-160: hsl(var(--black-160-hsl) / 1);
  --black-160-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 85.49%;
  --black-200: hsl(var(--black-200-hsl) / 1);
  --black-200-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 80%;
  --black-230: hsl(var(--black-230-hsl) / 1);
  --black-230-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 74.118%;
  --black-260: hsl(var(--black-260-hsl) / 1);
  --black-260-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 67.451%;
  --black-300: hsl(var(--black-300-hsl) / 1);
  --black-300-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 60%;
  --black-330: hsl(var(--black-330-hsl) / 1);
  --black-330-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 47.843%;
  --black-345: hsl(var(--black-345-hsl) / 1);
  --black-345-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 40%;
  --black-360: hsl(var(--black-360-hsl) / 1);
  --black-360-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 36.078%;
  --black-400: hsl(var(--black-400-hsl) / 1);
  --black-400-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 20%;
  --black-430: hsl(var(--black-430-hsl) / 1);
  --black-430-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 14.51%;
  --black-460: hsl(var(--black-460-hsl) / 1);
  --black-460-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 7.843%;
  --black-500: hsl(var(--black-500-hsl) / 1);
  --black-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-530: hsl(var(--black-530-hsl) / 1);
  --black-530-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-560: hsl(var(--black-560-hsl) / 1);
  --black-560-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-600: hsl(var(--black-600-hsl) / 1);
  --black-600-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-630: hsl(var(--black-630-hsl) / 1);
  --black-630-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-660: hsl(var(--black-660-hsl) / 1);
  --black-660-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-700: hsl(var(--black-700-hsl) / 1);
  --black-700-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-730: hsl(var(--black-730-hsl) / 1);
  --black-730-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-760: hsl(var(--black-760-hsl) / 1);
  --black-760-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-800: hsl(var(--black-800-hsl) / 1);
  --black-800-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-830: hsl(var(--black-830-hsl) / 1);
  --black-830-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-860: hsl(var(--black-860-hsl) / 1);
  --black-860-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-900: hsl(var(--black-900-hsl) / 1);
  --black-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --blue-100: hsl(var(--blue-100-hsl) / 1);
  --blue-100-hsl: 210 calc(var(--saturation-factor, 1) * 80%) 98.039%;
  --blue-130: hsl(var(--blue-130-hsl) / 1);
  --blue-130-hsl: 210 calc(var(--saturation-factor, 1) * 87.5%) 96.863%;
  --blue-160: hsl(var(--blue-160-hsl) / 1);
  --blue-160-hsl: 208.889 calc(var(--saturation-factor, 1) * 87.097%) 93.922%;
  --blue-200: hsl(var(--blue-200-hsl) / 1);
  --blue-200-hsl: 206.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
  --blue-230: hsl(var(--blue-230-hsl) / 1);
  --blue-230-hsl: 205.135 calc(var(--saturation-factor, 1) * 92.5%) 84.314%;
  --blue-260: hsl(var(--blue-260-hsl) / 1);
  --blue-260-hsl: 204.231 calc(var(--saturation-factor, 1) * 94.545%) 78.431%;
  --blue-300: hsl(var(--blue-300-hsl) / 1);
  --blue-300-hsl: 202.649 calc(var(--saturation-factor, 1) * 97.419%) 69.608%;
  --blue-330: hsl(var(--blue-330-hsl) / 1);
  --blue-330-hsl: 200.957 calc(var(--saturation-factor, 1) * 100%) 59.02%;
  --blue-345: hsl(var(--blue-345-hsl) / 1);
  --blue-345-hsl: 199.524 calc(var(--saturation-factor, 1) * 100%) 49.412%;
  --blue-360: hsl(var(--blue-360-hsl) / 1);
  --blue-360-hsl: 202.562 calc(var(--saturation-factor, 1) * 100%) 47.451%;
  --blue-400: hsl(var(--blue-400-hsl) / 1);
  --blue-400-hsl: 206.809 calc(var(--saturation-factor, 1) * 100%) 46.078%;
  --blue-430: hsl(var(--blue-430-hsl) / 1);
  --blue-430-hsl: 212.208 calc(var(--saturation-factor, 1) * 100%) 45.294%;
  --blue-460: hsl(var(--blue-460-hsl) / 1);
  --blue-460-hsl: 213.589 calc(var(--saturation-factor, 1) * 100%) 40.98%;
  --blue-500: hsl(var(--blue-500-hsl) / 1);
  --blue-500-hsl: 213.297 calc(var(--saturation-factor, 1) * 100%) 35.686%;
  --blue-530: hsl(var(--blue-530-hsl) / 1);
  --blue-530-hsl: 212.129 calc(var(--saturation-factor, 1) * 100%) 30.392%;
  --blue-560: hsl(var(--blue-560-hsl) / 1);
  --blue-560-hsl: 211.765 calc(var(--saturation-factor, 1) * 100%) 26.667%;
  --blue-600: hsl(var(--blue-600-hsl) / 1);
  --blue-600-hsl: 211.017 calc(var(--saturation-factor, 1) * 100%) 23.137%;
  --blue-630: hsl(var(--blue-630-hsl) / 1);
  --blue-630-hsl: 211.132 calc(var(--saturation-factor, 1) * 100%) 20.784%;
  --blue-660: hsl(var(--blue-660-hsl) / 1);
  --blue-660-hsl: 211.579 calc(var(--saturation-factor, 1) * 100%) 18.627%;
  --blue-700: hsl(var(--blue-700-hsl) / 1);
  --blue-700-hsl: 211.765 calc(var(--saturation-factor, 1) * 100%) 16.667%;
  --blue-730: hsl(var(--blue-730-hsl) / 1);
  --blue-730-hsl: 210.833 calc(var(--saturation-factor, 1) * 100%) 14.118%;
  --blue-760: hsl(var(--blue-760-hsl) / 1);
  --blue-760-hsl: 211.429 calc(var(--saturation-factor, 1) * 100%) 12.353%;
  --blue-800: hsl(var(--blue-800-hsl) / 1);
  --blue-800-hsl: 211.111 calc(var(--saturation-factor, 1) * 100%) 10.588%;
  --blue-830: hsl(var(--blue-830-hsl) / 1);
  --blue-830-hsl: 212.5 calc(var(--saturation-factor, 1) * 100%) 9.412%;
  --blue-860: hsl(var(--blue-860-hsl) / 1);
  --blue-860-hsl: 213.488 calc(var(--saturation-factor, 1) * 100%) 8.431%;
  --blue-900: hsl(var(--blue-900-hsl) / 1);
  --blue-900-hsl: 213.333 calc(var(--saturation-factor, 1) * 100%) 7.059%;
  --blue-new-1: hsl(var(--blue-new-1-hsl) / 1);
  --blue-new-1-hsl: 222.5 calc(var(--saturation-factor, 1) * 100%) 95.294%;
  --blue-new-10: hsl(var(--blue-new-10-hsl) / 1);
  --blue-new-10-hsl: 215.593 calc(var(--saturation-factor, 1) * 88.06%) 86.863%;
  --blue-new-100: hsl(var(--blue-new-100-hsl) / 1);
  --blue-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --blue-new-11: hsl(var(--blue-new-11-hsl) / 1);
  --blue-new-11-hsl: 214.687 calc(var(--saturation-factor, 1) * 88.889%) 85.882%;
  --blue-new-12: hsl(var(--blue-new-12-hsl) / 1);
  --blue-new-12-hsl: 215.294 calc(var(--saturation-factor, 1) * 89.474%) 85.098%;
  --blue-new-13: hsl(var(--blue-new-13-hsl) / 1);
  --blue-new-13-hsl: 214.648 calc(var(--saturation-factor, 1) * 87.654%) 84.118%;
  --blue-new-14: hsl(var(--blue-new-14-hsl) / 1);
  --blue-new-14-hsl: 215.2 calc(var(--saturation-factor, 1) * 88.235%) 83.333%;
  --blue-new-15: hsl(var(--blue-new-15-hsl) / 1);
  --blue-new-15-hsl: 214.177 calc(var(--saturation-factor, 1) * 86.813%) 82.157%;
  --blue-new-16: hsl(var(--blue-new-16-hsl) / 1);
  --blue-new-16-hsl: 214.699 calc(var(--saturation-factor, 1) * 87.368%) 81.373%;
  --blue-new-17: hsl(var(--blue-new-17-hsl) / 1);
  --blue-new-17-hsl: 214.186 calc(var(--saturation-factor, 1) * 86%) 80.392%;
  --blue-new-18: hsl(var(--blue-new-18-hsl) / 1);
  --blue-new-18-hsl: 214.667 calc(var(--saturation-factor, 1) * 86.538%) 79.608%;
  --blue-new-19: hsl(var(--blue-new-19-hsl) / 1);
  --blue-new-19-hsl: 214.194 calc(var(--saturation-factor, 1) * 85.321%) 78.627%;
  --blue-new-2: hsl(var(--blue-new-2-hsl) / 1);
  --blue-new-2-hsl: 219.31 calc(var(--saturation-factor, 1) * 100%) 94.314%;
  --blue-new-20: hsl(var(--blue-new-20-hsl) / 1);
  --blue-new-20-hsl: 214.286 calc(var(--saturation-factor, 1) * 85.965%) 77.647%;
  --blue-new-21: hsl(var(--blue-new-21-hsl) / 1);
  --blue-new-21-hsl: 213.861 calc(var(--saturation-factor, 1) * 84.874%) 76.667%;
  --blue-new-22: hsl(var(--blue-new-22-hsl) / 1);
  --blue-new-22-hsl: 214.038 calc(var(--saturation-factor, 1) * 83.871%) 75.686%;
  --blue-new-23: hsl(var(--blue-new-23-hsl) / 1);
  --blue-new-23-hsl: 213.889 calc(var(--saturation-factor, 1) * 84.375%) 74.902%;
  --blue-new-24: hsl(var(--blue-new-24-hsl) / 1);
  --blue-new-24-hsl: 214.054 calc(var(--saturation-factor, 1) * 83.459%) 73.922%;
  --blue-new-25: hsl(var(--blue-new-25-hsl) / 1);
  --blue-new-25-hsl: 213.913 calc(var(--saturation-factor, 1) * 83.942%) 73.137%;
  --blue-new-26: hsl(var(--blue-new-26-hsl) / 1);
  --blue-new-26-hsl: 213.782 calc(var(--saturation-factor, 1) * 83.217%) 71.961%;
  --blue-new-27: hsl(var(--blue-new-27-hsl) / 1);
  --blue-new-27-hsl: 213.659 calc(var(--saturation-factor, 1) * 83.673%) 71.176%;
  --blue-new-28: hsl(var(--blue-new-28-hsl) / 1);
  --blue-new-28-hsl: 213.81 calc(var(--saturation-factor, 1) * 82.895%) 70.196%;
  --blue-new-29: hsl(var(--blue-new-29-hsl) / 1);
  --blue-new-29-hsl: 213.488 calc(var(--saturation-factor, 1) * 82.166%) 69.216%;
  --blue-new-3: hsl(var(--blue-new-3-hsl) / 1);
  --blue-new-3-hsl: 219.375 calc(var(--saturation-factor, 1) * 94.118%) 93.333%;
  --blue-new-30: hsl(var(--blue-new-30-hsl) / 1);
  --blue-new-30-hsl: 213.835 calc(var(--saturation-factor, 1) * 82.609%) 68.431%;
  --blue-new-31: hsl(var(--blue-new-31-hsl) / 1);
  --blue-new-31-hsl: 213.723 calc(var(--saturation-factor, 1) * 82.036%) 67.255%;
  --blue-new-32: hsl(var(--blue-new-32-hsl) / 1);
  --blue-new-32-hsl: 213.429 calc(var(--saturation-factor, 1) * 81.395%) 66.275%;
  --blue-new-33: hsl(var(--blue-new-33-hsl) / 1);
  --blue-new-33-hsl: 213.75 calc(var(--saturation-factor, 1) * 81.818%) 65.49%;
  --blue-new-34: hsl(var(--blue-new-34-hsl) / 1);
  --blue-new-34-hsl: 213.469 calc(var(--saturation-factor, 1) * 81.215%) 64.51%;
  --blue-new-35: hsl(var(--blue-new-35-hsl) / 1);
  --blue-new-35-hsl: 213.377 calc(var(--saturation-factor, 1) * 80.749%) 63.333%;
  --blue-new-36: hsl(var(--blue-new-36-hsl) / 1);
  --blue-new-36-hsl: 213.29 calc(var(--saturation-factor, 1) * 81.152%) 62.549%;
  --blue-new-37: hsl(var(--blue-new-37-hsl) / 1);
  --blue-new-37-hsl: 213.418 calc(var(--saturation-factor, 1) * 80.612%) 61.569%;
  --blue-new-38: hsl(var(--blue-new-38-hsl) / 1);
  --blue-new-38-hsl: 213.333 calc(var(--saturation-factor, 1) * 80.198%) 60.392%;
  --blue-new-39: hsl(var(--blue-new-39-hsl) / 1);
  --blue-new-39-hsl: 213.253 calc(var(--saturation-factor, 1) * 80.583%) 59.608%;
  --blue-new-4: hsl(var(--blue-new-4-hsl) / 1);
  --blue-new-4-hsl: 218.333 calc(var(--saturation-factor, 1) * 94.737%) 92.549%;
  --blue-new-40: hsl(var(--blue-new-40-hsl) / 1);
  --blue-new-40-hsl: 213.176 calc(var(--saturation-factor, 1) * 80.189%) 58.431%;
  --blue-new-41: hsl(var(--blue-new-41-hsl) / 1);
  --blue-new-41-hsl: 213.103 calc(var(--saturation-factor, 1) * 79.817%) 57.255%;
  --blue-new-42: hsl(var(--blue-new-42-hsl) / 1);
  --blue-new-42-hsl: 212.697 calc(var(--saturation-factor, 1) * 79.464%) 56.078%;
  --blue-new-43: hsl(var(--blue-new-43-hsl) / 1);
  --blue-new-43-hsl: 212.787 calc(var(--saturation-factor, 1) * 79.913%) 55.098%;
  --blue-new-44: hsl(var(--blue-new-44-hsl) / 1);
  --blue-new-44-hsl: 212.727 calc(var(--saturation-factor, 1) * 79.574%) 53.922%;
  --blue-new-45: hsl(var(--blue-new-45-hsl) / 1);
  --blue-new-45-hsl: 212.188 calc(var(--saturation-factor, 1) * 79.339%) 52.549%;
  --blue-new-46: hsl(var(--blue-new-46-hsl) / 1);
  --blue-new-46-hsl: 211.818 calc(var(--saturation-factor, 1) * 79.2%) 50.98%;
  --blue-new-47: hsl(var(--blue-new-47-hsl) / 1);
  --blue-new-47-hsl: 211.456 calc(var(--saturation-factor, 1) * 81.746%) 49.412%;
  --blue-new-48: hsl(var(--blue-new-48-hsl) / 1);
  --blue-new-48-hsl: 210.561 calc(var(--saturation-factor, 1) * 88.43%) 47.451%;
  --blue-new-49: hsl(var(--blue-new-49-hsl) / 1);
  --blue-new-49-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --blue-new-5: hsl(var(--blue-new-5-hsl) / 1);
  --blue-new-5-hsl: 216.585 calc(var(--saturation-factor, 1) * 95.349%) 91.569%;
  --blue-new-50: hsl(var(--blue-new-50-hsl) / 1);
  --blue-new-50-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --blue-new-51: hsl(var(--blue-new-51-hsl) / 1);
  --blue-new-51-hsl: 209.455 calc(var(--saturation-factor, 1) * 98.214%) 43.922%;
  --blue-new-52: hsl(var(--blue-new-52-hsl) / 1);
  --blue-new-52-hsl: 209.858 calc(var(--saturation-factor, 1) * 95.475%) 43.333%;
  --blue-new-53: hsl(var(--blue-new-53-hsl) / 1);
  --blue-new-53-hsl: 210 calc(var(--saturation-factor, 1) * 93.578%) 42.745%;
  --blue-new-54: hsl(var(--blue-new-54-hsl) / 1);
  --blue-new-54-hsl: 210 calc(var(--saturation-factor, 1) * 91.589%) 41.961%;
  --blue-new-55: hsl(var(--blue-new-55-hsl) / 1);
  --blue-new-55-hsl: 210.316 calc(var(--saturation-factor, 1) * 90.476%) 41.176%;
  --blue-new-56: hsl(var(--blue-new-56-hsl) / 1);
  --blue-new-56-hsl: 210.492 calc(var(--saturation-factor, 1) * 88.406%) 40.588%;
  --blue-new-57: hsl(var(--blue-new-57-hsl) / 1);
  --blue-new-57-hsl: 210.508 calc(var(--saturation-factor, 1) * 87.192%) 39.804%;
  --blue-new-58: hsl(var(--blue-new-58-hsl) / 1);
  --blue-new-58-hsl: 210.526 calc(var(--saturation-factor, 1) * 85.93%) 39.02%;
  --blue-new-59: hsl(var(--blue-new-59-hsl) / 1);
  --blue-new-59-hsl: 210.732 calc(var(--saturation-factor, 1) * 84.536%) 38.039%;
  --blue-new-6: hsl(var(--blue-new-6-hsl) / 1);
  --blue-new-6-hsl: 216.818 calc(var(--saturation-factor, 1) * 91.667%) 90.588%;
  --blue-new-60: hsl(var(--blue-new-60-hsl) / 1);
  --blue-new-60-hsl: 210.759 calc(var(--saturation-factor, 1) * 83.158%) 37.255%;
  --blue-new-61: hsl(var(--blue-new-61-hsl) / 1);
  --blue-new-61-hsl: 210.588 calc(var(--saturation-factor, 1) * 82.703%) 36.275%;
  --blue-new-62: hsl(var(--blue-new-62-hsl) / 1);
  --blue-new-62-hsl: 211.216 calc(var(--saturation-factor, 1) * 81.319%) 35.686%;
  --blue-new-63: hsl(var(--blue-new-63-hsl) / 1);
  --blue-new-63-hsl: 211.049 calc(var(--saturation-factor, 1) * 80.791%) 34.706%;
  --blue-new-64: hsl(var(--blue-new-64-hsl) / 1);
  --blue-new-64-hsl: 210.87 calc(var(--saturation-factor, 1) * 80.233%) 33.725%;
  --blue-new-65: hsl(var(--blue-new-65-hsl) / 1);
  --blue-new-65-hsl: 210.909 calc(var(--saturation-factor, 1) * 78.571%) 32.941%;
  --blue-new-66: hsl(var(--blue-new-66-hsl) / 1);
  --blue-new-66-hsl: 211.181 calc(var(--saturation-factor, 1) * 77.914%) 31.961%;
  --blue-new-67: hsl(var(--blue-new-67-hsl) / 1);
  --blue-new-67-hsl: 211.22 calc(var(--saturation-factor, 1) * 77.358%) 31.176%;
  --blue-new-68: hsl(var(--blue-new-68-hsl) / 1);
  --blue-new-68-hsl: 211.017 calc(var(--saturation-factor, 1) * 76.623%) 30.196%;
  --blue-new-69: hsl(var(--blue-new-69-hsl) / 1);
  --blue-new-69-hsl: 211.053 calc(var(--saturation-factor, 1) * 76%) 29.412%;
  --blue-new-7: hsl(var(--blue-new-7-hsl) / 1);
  --blue-new-7-hsl: 216.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
  --blue-new-70: hsl(var(--blue-new-70-hsl) / 1);
  --blue-new-70-hsl: 211.376 calc(var(--saturation-factor, 1) * 75.172%) 28.431%;
  --blue-new-71: hsl(var(--blue-new-71-hsl) / 1);
  --blue-new-71-hsl: 211.429 calc(var(--saturation-factor, 1) * 74.468%) 27.647%;
  --blue-new-72: hsl(var(--blue-new-72-hsl) / 1);
  --blue-new-72-hsl: 211.2 calc(var(--saturation-factor, 1) * 73.529%) 26.667%;
  --blue-new-73: hsl(var(--blue-new-73-hsl) / 1);
  --blue-new-73-hsl: 210.928 calc(var(--saturation-factor, 1) * 74.046%) 25.686%;
  --blue-new-74: hsl(var(--blue-new-74-hsl) / 1);
  --blue-new-74-hsl: 210.968 calc(var(--saturation-factor, 1) * 73.228%) 24.902%;
  --blue-new-75: hsl(var(--blue-new-75-hsl) / 1);
  --blue-new-75-hsl: 211.685 calc(var(--saturation-factor, 1) * 72.358%) 24.118%;
  --blue-new-76: hsl(var(--blue-new-76-hsl) / 1);
  --blue-new-76-hsl: 211.429 calc(var(--saturation-factor, 1) * 71.186%) 23.137%;
  --blue-new-77: hsl(var(--blue-new-77-hsl) / 1);
  --blue-new-77-hsl: 211.111 calc(var(--saturation-factor, 1) * 71.681%) 22.157%;
  --blue-new-78: hsl(var(--blue-new-78-hsl) / 1);
  --blue-new-78-hsl: 211.169 calc(var(--saturation-factor, 1) * 70.642%) 21.373%;
  --blue-new-79: hsl(var(--blue-new-79-hsl) / 1);
  --blue-new-79-hsl: 210.811 calc(var(--saturation-factor, 1) * 71.154%) 20.392%;
  --blue-new-8: hsl(var(--blue-new-8-hsl) / 1);
  --blue-new-8-hsl: 215.769 calc(var(--saturation-factor, 1) * 89.655%) 88.627%;
  --blue-new-80: hsl(var(--blue-new-80-hsl) / 1);
  --blue-new-80-hsl: 210.857 calc(var(--saturation-factor, 1) * 70%) 19.608%;
  --blue-new-81: hsl(var(--blue-new-81-hsl) / 1);
  --blue-new-81-hsl: 210.882 calc(var(--saturation-factor, 1) * 70.833%) 18.824%;
  --blue-new-82: hsl(var(--blue-new-82-hsl) / 1);
  --blue-new-82-hsl: 210.938 calc(var(--saturation-factor, 1) * 69.565%) 18.039%;
  --blue-new-83: hsl(var(--blue-new-83-hsl) / 1);
  --blue-new-83-hsl: 211.475 calc(var(--saturation-factor, 1) * 70.115%) 17.059%;
  --blue-new-84: hsl(var(--blue-new-84-hsl) / 1);
  --blue-new-84-hsl: 211.579 calc(var(--saturation-factor, 1) * 68.675%) 16.275%;
  --blue-new-85: hsl(var(--blue-new-85-hsl) / 1);
  --blue-new-85-hsl: 211.636 calc(var(--saturation-factor, 1) * 69.62%) 15.49%;
  --blue-new-86: hsl(var(--blue-new-86-hsl) / 1);
  --blue-new-86-hsl: 211.154 calc(var(--saturation-factor, 1) * 70.27%) 14.51%;
  --blue-new-87: hsl(var(--blue-new-87-hsl) / 1);
  --blue-new-87-hsl: 211.25 calc(var(--saturation-factor, 1) * 68.571%) 13.725%;
  --blue-new-88: hsl(var(--blue-new-88-hsl) / 1);
  --blue-new-88-hsl: 211.304 calc(var(--saturation-factor, 1) * 69.697%) 12.941%;
  --blue-new-89: hsl(var(--blue-new-89-hsl) / 1);
  --blue-new-89-hsl: 210.698 calc(var(--saturation-factor, 1) * 70.492%) 11.961%;
  --blue-new-9: hsl(var(--blue-new-9-hsl) / 1);
  --blue-new-9-hsl: 215.357 calc(var(--saturation-factor, 1) * 90.323%) 87.843%;
  --blue-new-90: hsl(var(--blue-new-90-hsl) / 1);
  --blue-new-90-hsl: 211.5 calc(var(--saturation-factor, 1) * 68.966%) 11.373%;
  --blue-new-91: hsl(var(--blue-new-91-hsl) / 1);
  --blue-new-91-hsl: 211.579 calc(var(--saturation-factor, 1) * 70.37%) 10.588%;
  --blue-new-92: hsl(var(--blue-new-92-hsl) / 1);
  --blue-new-92-hsl: 211.667 calc(var(--saturation-factor, 1) * 72%) 9.804%;
  --blue-new-93: hsl(var(--blue-new-93-hsl) / 1);
  --blue-new-93-hsl: 211.875 calc(var(--saturation-factor, 1) * 69.565%) 9.02%;
  --blue-new-94: hsl(var(--blue-new-94-hsl) / 1);
  --blue-new-94-hsl: 211.034 calc(var(--saturation-factor, 1) * 70.732%) 8.039%;
  --blue-new-95: hsl(var(--blue-new-95-hsl) / 1);
  --blue-new-95-hsl: 212.308 calc(var(--saturation-factor, 1) * 72.222%) 7.059%;
  --blue-new-96: hsl(var(--blue-new-96-hsl) / 1);
  --blue-new-96-hsl: 211.304 calc(var(--saturation-factor, 1) * 74.194%) 6.078%;
  --blue-new-97: hsl(var(--blue-new-97-hsl) / 1);
  --blue-new-97-hsl: 214.737 calc(var(--saturation-factor, 1) * 76%) 4.902%;
  --blue-new-98: hsl(var(--blue-new-98-hsl) / 1);
  --blue-new-98-hsl: 214.286 calc(var(--saturation-factor, 1) * 77.778%) 3.529%;
  --blue-new-99: hsl(var(--blue-new-99-hsl) / 1);
  --blue-new-99-hsl: 214.286 calc(var(--saturation-factor, 1) * 77.778%) 1.765%;
  --blurple-1: hsl(var(--blurple-1-hsl) / 1);
  --blurple-1-hsl: 232.5 calc(var(--saturation-factor, 1) * 100%) 95.294%;
  --blurple-10: hsl(var(--blurple-10-hsl) / 1);
  --blurple-10-hsl: 228.889 calc(var(--saturation-factor, 1) * 96.429%) 89.02%;
  --blurple-100: hsl(var(--blurple-100-hsl) / 1);
  --blurple-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --blurple-11: hsl(var(--blurple-11-hsl) / 1);
  --blurple-11-hsl: 228.621 calc(var(--saturation-factor, 1) * 96.667%) 88.235%;
  --blurple-12: hsl(var(--blurple-12-hsl) / 1);
  --blurple-12-hsl: 228.197 calc(var(--saturation-factor, 1) * 96.825%) 87.647%;
  --blurple-13: hsl(var(--blurple-13-hsl) / 1);
  --blurple-13-hsl: 228 calc(var(--saturation-factor, 1) * 97.015%) 86.863%;
  --blurple-14: hsl(var(--blurple-14-hsl) / 1);
  --blurple-14-hsl: 228.529 calc(var(--saturation-factor, 1) * 97.143%) 86.275%;
  --blurple-15: hsl(var(--blurple-15-hsl) / 1);
  --blurple-15-hsl: 228 calc(var(--saturation-factor, 1) * 94.595%) 85.49%;
  --blurple-16: hsl(var(--blurple-16-hsl) / 1);
  --blurple-16-hsl: 228.493 calc(var(--saturation-factor, 1) * 94.805%) 84.902%;
  --blurple-17: hsl(var(--blurple-17-hsl) / 1);
  --blurple-17-hsl: 228.312 calc(var(--saturation-factor, 1) * 95.062%) 84.118%;
  --blurple-18: hsl(var(--blurple-18-hsl) / 1);
  --blurple-18-hsl: 228 calc(var(--saturation-factor, 1) * 95.238%) 83.529%;
  --blurple-19: hsl(var(--blurple-19-hsl) / 1);
  --blurple-19-hsl: 228.434 calc(var(--saturation-factor, 1) * 95.402%) 82.941%;
  --blurple-2: hsl(var(--blurple-2-hsl) / 1);
  --blurple-2-hsl: 233.333 calc(var(--saturation-factor, 1) * 100%) 94.706%;
  --blurple-20: hsl(var(--blurple-20-hsl) / 1);
  --blurple-20-hsl: 228.706 calc(var(--saturation-factor, 1) * 93.407%) 82.157%;
  --blurple-21: hsl(var(--blurple-21-hsl) / 1);
  --blurple-21-hsl: 227.865 calc(var(--saturation-factor, 1) * 93.684%) 81.373%;
  --blurple-22: hsl(var(--blurple-22-hsl) / 1);
  --blurple-22-hsl: 228.261 calc(var(--saturation-factor, 1) * 93.878%) 80.784%;
  --blurple-23: hsl(var(--blurple-23-hsl) / 1);
  --blurple-23-hsl: 228.632 calc(var(--saturation-factor, 1) * 94.059%) 80.196%;
  --blurple-24: hsl(var(--blurple-24-hsl) / 1);
  --blurple-24-hsl: 228.866 calc(var(--saturation-factor, 1) * 92.381%) 79.412%;
  --blurple-25: hsl(var(--blurple-25-hsl) / 1);
  --blurple-25-hsl: 228.6 calc(var(--saturation-factor, 1) * 92.593%) 78.824%;
  --blurple-26: hsl(var(--blurple-26-hsl) / 1);
  --blurple-26-hsl: 228.932 calc(var(--saturation-factor, 1) * 92.793%) 78.235%;
  --blurple-27: hsl(var(--blurple-27-hsl) / 1);
  --blurple-27-hsl: 229.245 calc(var(--saturation-factor, 1) * 92.982%) 77.647%;
  --blurple-28: hsl(var(--blurple-28-hsl) / 1);
  --blurple-28-hsl: 228.889 calc(var(--saturation-factor, 1) * 91.525%) 76.863%;
  --blurple-29: hsl(var(--blurple-29-hsl) / 1);
  --blurple-29-hsl: 229.189 calc(var(--saturation-factor, 1) * 91.736%) 76.275%;
  --blurple-3: hsl(var(--blurple-3-hsl) / 1);
  --blurple-3-hsl: 230.323 calc(var(--saturation-factor, 1) * 100%) 93.922%;
  --blurple-30: hsl(var(--blurple-30-hsl) / 1);
  --blurple-30-hsl: 229.474 calc(var(--saturation-factor, 1) * 91.935%) 75.686%;
  --blurple-31: hsl(var(--blurple-31-hsl) / 1);
  --blurple-31-hsl: 229.655 calc(var(--saturation-factor, 1) * 90.625%) 74.902%;
  --blurple-32: hsl(var(--blurple-32-hsl) / 1);
  --blurple-32-hsl: 229.916 calc(var(--saturation-factor, 1) * 90.84%) 74.314%;
  --blurple-33: hsl(var(--blurple-33-hsl) / 1);
  --blurple-33-hsl: 230.083 calc(var(--saturation-factor, 1) * 90.977%) 73.922%;
  --blurple-34: hsl(var(--blurple-34-hsl) / 1);
  --blurple-34-hsl: 230.244 calc(var(--saturation-factor, 1) * 89.781%) 73.137%;
  --blurple-35: hsl(var(--blurple-35-hsl) / 1);
  --blurple-35-hsl: 230.476 calc(var(--saturation-factor, 1) * 90%) 72.549%;
  --blurple-36: hsl(var(--blurple-36-hsl) / 1);
  --blurple-36-hsl: 230.698 calc(var(--saturation-factor, 1) * 90.21%) 71.961%;
  --blurple-37: hsl(var(--blurple-37-hsl) / 1);
  --blurple-37-hsl: 231.231 calc(var(--saturation-factor, 1) * 89.041%) 71.373%;
  --blurple-38: hsl(var(--blurple-38-hsl) / 1);
  --blurple-38-hsl: 230.977 calc(var(--saturation-factor, 1) * 89.262%) 70.784%;
  --blurple-39: hsl(var(--blurple-39-hsl) / 1);
  --blurple-39-hsl: 231.493 calc(var(--saturation-factor, 1) * 88.158%) 70.196%;
  --blurple-4: hsl(var(--blurple-4-hsl) / 1);
  --blurple-4-hsl: 229.714 calc(var(--saturation-factor, 1) * 100%) 93.137%;
  --blurple-40: hsl(var(--blurple-40-hsl) / 1);
  --blurple-40-hsl: 231.679 calc(var(--saturation-factor, 1) * 88.387%) 69.608%;
  --blurple-41: hsl(var(--blurple-41-hsl) / 1);
  --blurple-41-hsl: 231.857 calc(var(--saturation-factor, 1) * 88.608%) 69.02%;
  --blurple-42: hsl(var(--blurple-42-hsl) / 1);
  --blurple-42-hsl: 232.34 calc(var(--saturation-factor, 1) * 87.578%) 68.431%;
  --blurple-43: hsl(var(--blurple-43-hsl) / 1);
  --blurple-43-hsl: 232.867 calc(var(--saturation-factor, 1) * 87.73%) 68.039%;
  --blurple-44: hsl(var(--blurple-44-hsl) / 1);
  --blurple-44-hsl: 232.966 calc(var(--saturation-factor, 1) * 86.826%) 67.255%;
  --blurple-45: hsl(var(--blurple-45-hsl) / 1);
  --blurple-45-hsl: 233.469 calc(var(--saturation-factor, 1) * 86.982%) 66.863%;
  --blurple-46: hsl(var(--blurple-46-hsl) / 1);
  --blurple-46-hsl: 233.919 calc(var(--saturation-factor, 1) * 86.047%) 66.275%;
  --blurple-47: hsl(var(--blurple-47-hsl) / 1);
  --blurple-47-hsl: 234.04 calc(var(--saturation-factor, 1) * 86.286%) 65.686%;
  --blurple-48: hsl(var(--blurple-48-hsl) / 1);
  --blurple-48-hsl: 234.474 calc(var(--saturation-factor, 1) * 85.393%) 65.098%;
  --blurple-49: hsl(var(--blurple-49-hsl) / 1);
  --blurple-49-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --blurple-5: hsl(var(--blurple-5-hsl) / 1);
  --blurple-5-hsl: 230.526 calc(var(--saturation-factor, 1) * 100%) 92.549%;
  --blurple-50: hsl(var(--blurple-50-hsl) / 1);
  --blurple-50-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --blurple-51: hsl(var(--blurple-51-hsl) / 1);
  --blurple-51-hsl: 234.8 calc(var(--saturation-factor, 1) * 79.787%) 63.137%;
  --blurple-52: hsl(var(--blurple-52-hsl) / 1);
  --blurple-52-hsl: 234.658 calc(var(--saturation-factor, 1) * 74.49%) 61.569%;
  --blurple-53: hsl(var(--blurple-53-hsl) / 1);
  --blurple-53-hsl: 234.507 calc(var(--saturation-factor, 1) * 69.608%) 60%;
  --blurple-54: hsl(var(--blurple-54-hsl) / 1);
  --blurple-54-hsl: 233.913 calc(var(--saturation-factor, 1) * 65.094%) 58.431%;
  --blurple-55: hsl(var(--blurple-55-hsl) / 1);
  --blurple-55-hsl: 233.778 calc(var(--saturation-factor, 1) * 61.644%) 57.059%;
  --blurple-56: hsl(var(--blurple-56-hsl) / 1);
  --blurple-56-hsl: 233.588 calc(var(--saturation-factor, 1) * 57.709%) 55.49%;
  --blurple-57: hsl(var(--blurple-57-hsl) / 1);
  --blurple-57-hsl: 233.81 calc(var(--saturation-factor, 1) * 53.846%) 54.118%;
  --blurple-58: hsl(var(--blurple-58-hsl) / 1);
  --blurple-58-hsl: 233.659 calc(var(--saturation-factor, 1) * 51.037%) 52.745%;
  --blurple-59: hsl(var(--blurple-59-hsl) / 1);
  --blurple-59-hsl: 233.445 calc(var(--saturation-factor, 1) * 47.791%) 51.176%;
  --blurple-6: hsl(var(--blurple-6-hsl) / 1);
  --blurple-6-hsl: 228.571 calc(var(--saturation-factor, 1) * 100%) 91.765%;
  --blurple-60: hsl(var(--blurple-60-hsl) / 1);
  --blurple-60-hsl: 233.276 calc(var(--saturation-factor, 1) * 45.669%) 49.804%;
  --blurple-61: hsl(var(--blurple-61-hsl) / 1);
  --blurple-61-hsl: 233.097 calc(var(--saturation-factor, 1) * 45.749%) 48.431%;
  --blurple-62: hsl(var(--blurple-62-hsl) / 1);
  --blurple-62-hsl: 232.294 calc(var(--saturation-factor, 1) * 45.607%) 46.863%;
  --blurple-63: hsl(var(--blurple-63-hsl) / 1);
  --blurple-63-hsl: 232.571 calc(var(--saturation-factor, 1) * 45.064%) 45.686%;
  --blurple-64: hsl(var(--blurple-64-hsl) / 1);
  --blurple-64-hsl: 232.353 calc(var(--saturation-factor, 1) * 45.133%) 44.314%;
  --blurple-65: hsl(var(--blurple-65-hsl) / 1);
  --blurple-65-hsl: 232.121 calc(var(--saturation-factor, 1) * 45.205%) 42.941%;
  --blurple-66: hsl(var(--blurple-66-hsl) / 1);
  --blurple-66-hsl: 231.875 calc(var(--saturation-factor, 1) * 45.283%) 41.569%;
  --blurple-67: hsl(var(--blurple-67-hsl) / 1);
  --blurple-67-hsl: 232.174 calc(var(--saturation-factor, 1) * 44.66%) 40.392%;
  --blurple-68: hsl(var(--blurple-68-hsl) / 1);
  --blurple-68-hsl: 231.91 calc(var(--saturation-factor, 1) * 44.724%) 39.02%;
  --blurple-69: hsl(var(--blurple-69-hsl) / 1);
  --blurple-69-hsl: 231.628 calc(var(--saturation-factor, 1) * 44.792%) 37.647%;
  --blurple-7: hsl(var(--blurple-7-hsl) / 1);
  --blurple-7-hsl: 229.333 calc(var(--saturation-factor, 1) * 100%) 91.176%;
  --blurple-70: hsl(var(--blurple-70-hsl) / 1);
  --blurple-70-hsl: 231.325 calc(var(--saturation-factor, 1) * 44.865%) 36.275%;
  --blurple-71: hsl(var(--blurple-71-hsl) / 1);
  --blurple-71-hsl: 231.75 calc(var(--saturation-factor, 1) * 44.444%) 35.294%;
  --blurple-72: hsl(var(--blurple-72-hsl) / 1);
  --blurple-72-hsl: 231.429 calc(var(--saturation-factor, 1) * 44.509%) 33.922%;
  --blurple-73: hsl(var(--blurple-73-hsl) / 1);
  --blurple-73-hsl: 231.081 calc(var(--saturation-factor, 1) * 44.578%) 32.549%;
  --blurple-74: hsl(var(--blurple-74-hsl) / 1);
  --blurple-74-hsl: 230.704 calc(var(--saturation-factor, 1) * 44.099%) 31.569%;
  --blurple-75: hsl(var(--blurple-75-hsl) / 1);
  --blurple-75-hsl: 230.294 calc(var(--saturation-factor, 1) * 44.156%) 30.196%;
  --blurple-76: hsl(var(--blurple-76-hsl) / 1);
  --blurple-76-hsl: 230 calc(var(--saturation-factor, 1) * 44.595%) 29.02%;
  --blurple-77: hsl(var(--blurple-77-hsl) / 1);
  --blurple-77-hsl: 230.476 calc(var(--saturation-factor, 1) * 44.056%) 28.039%;
  --blurple-78: hsl(var(--blurple-78-hsl) / 1);
  --blurple-78-hsl: 230 calc(var(--saturation-factor, 1) * 44.118%) 26.667%;
  --blurple-79: hsl(var(--blurple-79-hsl) / 1);
  --blurple-79-hsl: 229.655 calc(var(--saturation-factor, 1) * 44.615%) 25.49%;
  --blurple-8: hsl(var(--blurple-8-hsl) / 1);
  --blurple-8-hsl: 228.75 calc(var(--saturation-factor, 1) * 96%) 90.196%;
  --blurple-80: hsl(var(--blurple-80-hsl) / 1);
  --blurple-80-hsl: 230.182 calc(var(--saturation-factor, 1) * 44%) 24.51%;
  --blurple-81: hsl(var(--blurple-81-hsl) / 1);
  --blurple-81-hsl: 229.811 calc(var(--saturation-factor, 1) * 44.538%) 23.333%;
  --blurple-82: hsl(var(--blurple-82-hsl) / 1);
  --blurple-82-hsl: 230.4 calc(var(--saturation-factor, 1) * 43.86%) 22.353%;
  --blurple-83: hsl(var(--blurple-83-hsl) / 1);
  --blurple-83-hsl: 228.75 calc(var(--saturation-factor, 1) * 44.444%) 21.176%;
  --blurple-84: hsl(var(--blurple-84-hsl) / 1);
  --blurple-84-hsl: 228.261 calc(var(--saturation-factor, 1) * 45.098%) 20%;
  --blurple-85: hsl(var(--blurple-85-hsl) / 1);
  --blurple-85-hsl: 228.837 calc(var(--saturation-factor, 1) * 44.33%) 19.02%;
  --blurple-86: hsl(var(--blurple-86-hsl) / 1);
  --blurple-86-hsl: 228.293 calc(var(--saturation-factor, 1) * 45.055%) 17.843%;
  --blurple-87: hsl(var(--blurple-87-hsl) / 1);
  --blurple-87-hsl: 228.947 calc(var(--saturation-factor, 1) * 44.186%) 16.863%;
  --blurple-88: hsl(var(--blurple-88-hsl) / 1);
  --blurple-88-hsl: 228.649 calc(var(--saturation-factor, 1) * 45.679%) 15.882%;
  --blurple-89: hsl(var(--blurple-89-hsl) / 1);
  --blurple-89-hsl: 229.412 calc(var(--saturation-factor, 1) * 44.737%) 14.902%;
  --blurple-9: hsl(var(--blurple-9-hsl) / 1);
  --blurple-9-hsl: 228.235 calc(var(--saturation-factor, 1) * 96.226%) 89.608%;
  --blurple-90: hsl(var(--blurple-90-hsl) / 1);
  --blurple-90-hsl: 227.273 calc(var(--saturation-factor, 1) * 46.479%) 13.922%;
  --blurple-91: hsl(var(--blurple-91-hsl) / 1);
  --blurple-91-hsl: 228 calc(var(--saturation-factor, 1) * 45.455%) 12.941%;
  --blurple-92: hsl(var(--blurple-92-hsl) / 1);
  --blurple-92-hsl: 227.586 calc(var(--saturation-factor, 1) * 47.541%) 11.961%;
  --blurple-93: hsl(var(--blurple-93-hsl) / 1);
  --blurple-93-hsl: 228.462 calc(var(--saturation-factor, 1) * 46.429%) 10.98%;
  --blurple-94: hsl(var(--blurple-94-hsl) / 1);
  --blurple-94-hsl: 227.5 calc(var(--saturation-factor, 1) * 48%) 9.804%;
  --blurple-95: hsl(var(--blurple-95-hsl) / 1);
  --blurple-95-hsl: 226.364 calc(var(--saturation-factor, 1) * 50%) 8.627%;
  --blurple-96: hsl(var(--blurple-96-hsl) / 1);
  --blurple-96-hsl: 227.368 calc(var(--saturation-factor, 1) * 51.351%) 7.255%;
  --blurple-97: hsl(var(--blurple-97-hsl) / 1);
  --blurple-97-hsl: 228.75 calc(var(--saturation-factor, 1) * 53.333%) 5.882%;
  --blurple-98: hsl(var(--blurple-98-hsl) / 1);
  --blurple-98-hsl: 230 calc(var(--saturation-factor, 1) * 54.545%) 4.314%;
  --blurple-99: hsl(var(--blurple-99-hsl) / 1);
  --blurple-99-hsl: 231.429 calc(var(--saturation-factor, 1) * 63.636%) 2.157%;
  --brand-100: hsl(var(--brand-100-hsl) / 1);
  --brand-100-hsl: 240 calc(var(--saturation-factor, 1) * 77.778%) 98.235%;
  --brand-130: hsl(var(--brand-130-hsl) / 1);
  --brand-130-hsl: 235.714 calc(var(--saturation-factor, 1) * 87.5%) 96.863%;
  --brand-160: hsl(var(--brand-160-hsl) / 1);
  --brand-160-hsl: 234.545 calc(var(--saturation-factor, 1) * 84.615%) 94.902%;
  --brand-200: hsl(var(--brand-200-hsl) / 1);
  --brand-200-hsl: 236 calc(var(--saturation-factor, 1) * 83.333%) 92.941%;
  --brand-230: hsl(var(--brand-230-hsl) / 1);
  --brand-230-hsl: 235.5 calc(var(--saturation-factor, 1) * 86.957%) 90.98%;
  --brand-260: hsl(var(--brand-260-hsl) / 1);
  --brand-260-hsl: 235.2 calc(var(--saturation-factor, 1) * 86.207%) 88.627%;
  --brand-300: hsl(var(--brand-300-hsl) / 1);
  --brand-300-hsl: 235.161 calc(var(--saturation-factor, 1) * 86.111%) 85.882%;
  --brand-330: hsl(var(--brand-330-hsl) / 1);
  --brand-330-hsl: 234.75 calc(var(--saturation-factor, 1) * 85.106%) 81.569%;
  --brand-345: hsl(var(--brand-345-hsl) / 1);
  --brand-345-hsl: 234.783 calc(var(--saturation-factor, 1) * 85.185%) 78.824%;
  --brand-360: hsl(var(--brand-360-hsl) / 1);
  --brand-360-hsl: 235.152 calc(var(--saturation-factor, 1) * 86.087%) 77.451%;
  --brand-400: hsl(var(--brand-400-hsl) / 1);
  --brand-400-hsl: 234.677 calc(var(--saturation-factor, 1) * 86.111%) 71.765%;
  --brand-430: hsl(var(--brand-430-hsl) / 1);
  --brand-430-hsl: 235 calc(var(--saturation-factor, 1) * 85.714%) 69.804%;
  --brand-460: hsl(var(--brand-460-hsl) / 1);
  --brand-460-hsl: 234.93 calc(var(--saturation-factor, 1) * 85.542%) 67.451%;
  --brand-500: hsl(var(--brand-500-hsl) / 1);
  --brand-500-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --brand-530: hsl(var(--brand-530-hsl) / 1);
  --brand-530-hsl: 234.857 calc(var(--saturation-factor, 1) * 66.667%) 58.824%;
  --brand-560: hsl(var(--brand-560-hsl) / 1);
  --brand-560-hsl: 234.72 calc(var(--saturation-factor, 1) * 51.44%) 52.353%;
  --brand-600: hsl(var(--brand-600-hsl) / 1);
  --brand-600-hsl: 234.857 calc(var(--saturation-factor, 1) * 46.667%) 44.118%;
  --brand-630: hsl(var(--brand-630-hsl) / 1);
  --brand-630-hsl: 235.385 calc(var(--saturation-factor, 1) * 46.667%) 38.235%;
  --brand-660: hsl(var(--brand-660-hsl) / 1);
  --brand-660-hsl: 234.75 calc(var(--saturation-factor, 1) * 47.059%) 33.333%;
  --brand-700: hsl(var(--brand-700-hsl) / 1);
  --brand-700-hsl: 235.161 calc(var(--saturation-factor, 1) * 46.97%) 25.882%;
  --brand-730: hsl(var(--brand-730-hsl) / 1);
  --brand-730-hsl: 234.828 calc(var(--saturation-factor, 1) * 46.774%) 24.314%;
  --brand-760: hsl(var(--brand-760-hsl) / 1);
  --brand-760-hsl: 234.34 calc(var(--saturation-factor, 1) * 46.903%) 22.157%;
  --brand-800: hsl(var(--brand-800-hsl) / 1);
  --brand-800-hsl: 234.894 calc(var(--saturation-factor, 1) * 47.475%) 19.412%;
  --brand-830: hsl(var(--brand-830-hsl) / 1);
  --brand-830-hsl: 235 calc(var(--saturation-factor, 1) * 47.368%) 14.902%;
  --brand-860: hsl(var(--brand-860-hsl) / 1);
  --brand-860-hsl: 234.783 calc(var(--saturation-factor, 1) * 46.939%) 9.608%;
  --brand-900: hsl(var(--brand-900-hsl) / 1);
  --brand-900-hsl: 232.5 calc(var(--saturation-factor, 1) * 50%) 3.137%;
  --bungie: hsl(var(--bungie-hsl) / 1);
  --bungie-hsl: 196.916 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --crunchyroll: hsl(var(--crunchyroll-hsl) / 1);
  --crunchyroll-hsl: 29.289 calc(var(--saturation-factor, 1) * 92.952%) 55.49%;
  --ebay: hsl(var(--ebay-hsl) / 1);
  --ebay-hsl: 211.429 calc(var(--saturation-factor, 1) * 100%) 41.176%;
  --epic-games: hsl(var(--epic-games-hsl) / 1);
  --epic-games-hsl: 34.286 calc(var(--saturation-factor, 1) * 6.195%) 22.157%;
  --facebook: hsl(var(--facebook-hsl) / 1);
  --facebook-hsl: 220.714 calc(var(--saturation-factor, 1) * 44.211%) 37.255%;
  --github: hsl(var(--github-hsl) / 1);
  --github-hsl: 0 calc(var(--saturation-factor, 1) * 4.167%) 9.412%;
  --gold: hsl(var(--gold-hsl) / 1);
  --gold-hsl: 45.652 calc(var(--saturation-factor, 1) * 100%) 54.902%;
  --green-100: hsl(var(--green-100-hsl) / 1);
  --green-100-hsl: 136.667 calc(var(--saturation-factor, 1) * 90%) 96.078%;
  --green-130: hsl(var(--green-130-hsl) / 1);
  --green-130-hsl: 136.875 calc(var(--saturation-factor, 1) * 94.118%) 93.333%;
  --green-160: hsl(var(--green-160-hsl) / 1);
  --green-160-hsl: 140.952 calc(var(--saturation-factor, 1) * 91.304%) 86.471%;
  --green-200: hsl(var(--green-200-hsl) / 1);
  --green-200-hsl: 143.478 calc(var(--saturation-factor, 1) * 93.496%) 75.882%;
  --green-230: hsl(var(--green-230-hsl) / 1);
  --green-230-hsl: 146.323 calc(var(--saturation-factor, 1) * 86.592%) 64.902%;
  --green-260: hsl(var(--green-260-hsl) / 1);
  --green-260-hsl: 145.605 calc(var(--saturation-factor, 1) * 75.12%) 59.02%;
  --green-300: hsl(var(--green-300-hsl) / 1);
  --green-300-hsl: 146.323 calc(var(--saturation-factor, 1) * 65.401%) 53.529%;
  --green-330: hsl(var(--green-330-hsl) / 1);
  --green-330-hsl: 146.494 calc(var(--saturation-factor, 1) * 63.115%) 47.843%;
  --green-345: hsl(var(--green-345-hsl) / 1);
  --green-345-hsl: 146.939 calc(var(--saturation-factor, 1) * 65.919%) 43.725%;
  --green-360: hsl(var(--green-360-hsl) / 1);
  --green-360-hsl: 145.385 calc(var(--saturation-factor, 1) * 65%) 39.216%;
  --green-400: hsl(var(--green-400-hsl) / 1);
  --green-400-hsl: 142.703 calc(var(--saturation-factor, 1) * 60.656%) 35.882%;
  --green-430: hsl(var(--green-430-hsl) / 1);
  --green-430-hsl: 141.522 calc(var(--saturation-factor, 1) * 56.098%) 32.157%;
  --green-460: hsl(var(--green-460-hsl) / 1);
  --green-460-hsl: 141.481 calc(var(--saturation-factor, 1) * 56.643%) 28.039%;
  --green-500: hsl(var(--green-500-hsl) / 1);
  --green-500-hsl: 141.37 calc(var(--saturation-factor, 1) * 58.4%) 24.51%;
  --green-530: hsl(var(--green-530-hsl) / 1);
  --green-530-hsl: 140.308 calc(var(--saturation-factor, 1) * 60.748%) 20.98%;
  --green-560: hsl(var(--green-560-hsl) / 1);
  --green-560-hsl: 138.621 calc(var(--saturation-factor, 1) * 61.702%) 18.431%;
  --green-600: hsl(var(--green-600-hsl) / 1);
  --green-600-hsl: 139.245 calc(var(--saturation-factor, 1) * 65.432%) 15.882%;
  --green-630: hsl(var(--green-630-hsl) / 1);
  --green-630-hsl: 140 calc(var(--saturation-factor, 1) * 66.667%) 14.118%;
  --green-660: hsl(var(--green-660-hsl) / 1);
  --green-660-hsl: 139.091 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
  --green-700: hsl(var(--green-700-hsl) / 1);
  --green-700-hsl: 141 calc(var(--saturation-factor, 1) * 74.074%) 10.588%;
  --green-730: hsl(var(--green-730-hsl) / 1);
  --green-730-hsl: 138.333 calc(var(--saturation-factor, 1) * 78.261%) 9.02%;
  --green-760: hsl(var(--green-760-hsl) / 1);
  --green-760-hsl: 140 calc(var(--saturation-factor, 1) * 84.615%) 7.647%;
  --green-800: hsl(var(--green-800-hsl) / 1);
  --green-800-hsl: 139.286 calc(var(--saturation-factor, 1) * 82.353%) 6.667%;
  --green-830: hsl(var(--green-830-hsl) / 1);
  --green-830-hsl: 137.5 calc(var(--saturation-factor, 1) * 80%) 5.882%;
  --green-860: hsl(var(--green-860-hsl) / 1);
  --green-860-hsl: 132.632 calc(var(--saturation-factor, 1) * 70.37%) 5.294%;
  --green-900: hsl(var(--green-900-hsl) / 1);
  --green-900-hsl: 128.571 calc(var(--saturation-factor, 1) * 58.333%) 4.706%;
  --green-new-1: hsl(var(--green-new-1-hsl) / 1);
  --green-new-1-hsl: 130.667 calc(var(--saturation-factor, 1) * 100%) 91.176%;
  --green-new-10: hsl(var(--green-new-10-hsl) / 1);
  --green-new-10-hsl: 129.474 calc(var(--saturation-factor, 1) * 55.34%) 79.804%;
  --green-new-100: hsl(var(--green-new-100-hsl) / 1);
  --green-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --green-new-11: hsl(var(--green-new-11-hsl) / 1);
  --green-new-11-hsl: 130.169 calc(var(--saturation-factor, 1) * 54.128%) 78.627%;
  --green-new-12: hsl(var(--green-new-12-hsl) / 1);
  --green-new-12-hsl: 129.153 calc(var(--saturation-factor, 1) * 51.304%) 77.451%;
  --green-new-13: hsl(var(--green-new-13-hsl) / 1);
  --green-new-13-hsl: 128.852 calc(var(--saturation-factor, 1) * 50.413%) 76.275%;
  --green-new-14: hsl(var(--green-new-14-hsl) / 1);
  --green-new-14-hsl: 129.677 calc(var(--saturation-factor, 1) * 48.438%) 74.902%;
  --green-new-15: hsl(var(--green-new-15-hsl) / 1);
  --green-new-15-hsl: 129.375 calc(var(--saturation-factor, 1) * 47.761%) 73.725%;
  --green-new-16: hsl(var(--green-new-16-hsl) / 1);
  --green-new-16-hsl: 130.154 calc(var(--saturation-factor, 1) * 46.099%) 72.353%;
  --green-new-17: hsl(var(--green-new-17-hsl) / 1);
  --green-new-17-hsl: 129.091 calc(var(--saturation-factor, 1) * 45.205%) 71.373%;
  --green-new-18: hsl(var(--green-new-18-hsl) / 1);
  --green-new-18-hsl: 129.851 calc(var(--saturation-factor, 1) * 43.791%) 70%;
  --green-new-19: hsl(var(--green-new-19-hsl) / 1);
  --green-new-19-hsl: 129.706 calc(var(--saturation-factor, 1) * 42.5%) 68.627%;
  --green-new-2: hsl(var(--green-new-2-hsl) / 1);
  --green-new-2-hsl: 130.435 calc(var(--saturation-factor, 1) * 88.462%) 89.804%;
  --green-new-20: hsl(var(--green-new-20-hsl) / 1);
  --green-new-20-hsl: 130.286 calc(var(--saturation-factor, 1) * 42.169%) 67.451%;
  --green-new-21: hsl(var(--green-new-21-hsl) / 1);
  --green-new-21-hsl: 129.429 calc(var(--saturation-factor, 1) * 40.698%) 66.275%;
  --green-new-22: hsl(var(--green-new-22-hsl) / 1);
  --green-new-22-hsl: 130 calc(var(--saturation-factor, 1) * 40.449%) 65.098%;
  --green-new-23: hsl(var(--green-new-23-hsl) / 1);
  --green-new-23-hsl: 130.685 calc(var(--saturation-factor, 1) * 39.459%) 63.725%;
  --green-new-24: hsl(var(--green-new-24-hsl) / 1);
  --green-new-24-hsl: 130.4 calc(var(--saturation-factor, 1) * 39.267%) 62.549%;
  --green-new-25: hsl(var(--green-new-25-hsl) / 1);
  --green-new-25-hsl: 131.053 calc(var(--saturation-factor, 1) * 38.384%) 61.176%;
  --green-new-26: hsl(var(--green-new-26-hsl) / 1);
  --green-new-26-hsl: 130.909 calc(var(--saturation-factor, 1) * 37.931%) 60.196%;
  --green-new-27: hsl(var(--green-new-27-hsl) / 1);
  --green-new-27-hsl: 130.769 calc(var(--saturation-factor, 1) * 37.143%) 58.824%;
  --green-new-28: hsl(var(--green-new-28-hsl) / 1);
  --green-new-28-hsl: 131.25 calc(var(--saturation-factor, 1) * 37.037%) 57.647%;
  --green-new-29: hsl(var(--green-new-29-hsl) / 1);
  --green-new-29-hsl: 131.852 calc(var(--saturation-factor, 1) * 36.323%) 56.275%;
  --green-new-3: hsl(var(--green-new-3-hsl) / 1);
  --green-new-3-hsl: 130 calc(var(--saturation-factor, 1) * 82.759%) 88.627%;
  --green-new-30: hsl(var(--green-new-30-hsl) / 1);
  --green-new-30-hsl: 131.707 calc(var(--saturation-factor, 1) * 35.965%) 55.294%;
  --green-new-31: hsl(var(--green-new-31-hsl) / 1);
  --green-new-31-hsl: 131.566 calc(var(--saturation-factor, 1) * 35.319%) 53.922%;
  --green-new-32: hsl(var(--green-new-32-hsl) / 1);
  --green-new-32-hsl: 132 calc(var(--saturation-factor, 1) * 35.27%) 52.745%;
  --green-new-33: hsl(var(--green-new-33-hsl) / 1);
  --green-new-33-hsl: 132.558 calc(var(--saturation-factor, 1) * 34.677%) 51.373%;
  --green-new-34: hsl(var(--green-new-34-hsl) / 1);
  --green-new-34-hsl: 132.955 calc(var(--saturation-factor, 1) * 34.646%) 50.196%;
  --green-new-35: hsl(var(--green-new-35-hsl) / 1);
  --green-new-35-hsl: 133.483 calc(var(--saturation-factor, 1) * 35.743%) 48.824%;
  --green-new-36: hsl(var(--green-new-36-hsl) / 1);
  --green-new-36-hsl: 133.846 calc(var(--saturation-factor, 1) * 37.449%) 47.647%;
  --green-new-37: hsl(var(--green-new-37-hsl) / 1);
  --green-new-37-hsl: 134.348 calc(var(--saturation-factor, 1) * 38.983%) 46.275%;
  --green-new-38: hsl(var(--green-new-38-hsl) / 1);
  --green-new-38-hsl: 134.681 calc(var(--saturation-factor, 1) * 40.87%) 45.098%;
  --green-new-39: hsl(var(--green-new-39-hsl) / 1);
  --green-new-39-hsl: 134.526 calc(var(--saturation-factor, 1) * 42.601%) 43.725%;
  --green-new-4: hsl(var(--green-new-4-hsl) / 1);
  --green-new-4-hsl: 130 calc(var(--saturation-factor, 1) * 75%) 87.451%;
  --green-new-40: hsl(var(--green-new-40-hsl) / 1);
  --green-new-40-hsl: 135.464 calc(var(--saturation-factor, 1) * 45.116%) 42.157%;
  --green-new-41: hsl(var(--green-new-41-hsl) / 1);
  --green-new-41-hsl: 135.758 calc(var(--saturation-factor, 1) * 47.368%) 40.98%;
  --green-new-42: hsl(var(--green-new-42-hsl) / 1);
  --green-new-42-hsl: 136.634 calc(var(--saturation-factor, 1) * 50.249%) 39.412%;
  --green-new-43: hsl(var(--green-new-43-hsl) / 1);
  --green-new-43-hsl: 136.893 calc(var(--saturation-factor, 1) * 52.821%) 38.235%;
  --green-new-44: hsl(var(--green-new-44-hsl) / 1);
  --green-new-44-hsl: 138.679 calc(var(--saturation-factor, 1) * 56.989%) 36.471%;
  --green-new-45: hsl(var(--green-new-45-hsl) / 1);
  --green-new-45-hsl: 139.266 calc(var(--saturation-factor, 1) * 60.894%) 35.098%;
  --green-new-46: hsl(var(--green-new-46-hsl) / 1);
  --green-new-46-hsl: 140.357 calc(var(--saturation-factor, 1) * 65.882%) 33.333%;
  --green-new-47: hsl(var(--green-new-47-hsl) / 1);
  --green-new-47-hsl: 141.538 calc(var(--saturation-factor, 1) * 72.671%) 31.569%;
  --green-new-48: hsl(var(--green-new-48-hsl) / 1);
  --green-new-48-hsl: 143.71 calc(var(--saturation-factor, 1) * 83.784%) 29.02%;
  --green-new-49: hsl(var(--green-new-49-hsl) / 1);
  --green-new-49-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --green-new-5: hsl(var(--green-new-5-hsl) / 1);
  --green-new-5-hsl: 129.6 calc(var(--saturation-factor, 1) * 71.429%) 86.275%;
  --green-new-50: hsl(var(--green-new-50-hsl) / 1);
  --green-new-50-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --green-new-51: hsl(var(--green-new-51-hsl) / 1);
  --green-new-51-hsl: 145.313 calc(var(--saturation-factor, 1) * 95.522%) 26.275%;
  --green-new-52: hsl(var(--green-new-52-hsl) / 1);
  --green-new-52-hsl: 144.878 calc(var(--saturation-factor, 1) * 92.481%) 26.078%;
  --green-new-53: hsl(var(--green-new-53-hsl) / 1);
  --green-new-53-hsl: 144.103 calc(var(--saturation-factor, 1) * 87.97%) 26.078%;
  --green-new-54: hsl(var(--green-new-54-hsl) / 1);
  --green-new-54-hsl: 143.363 calc(var(--saturation-factor, 1) * 84.962%) 26.078%;
  --green-new-55: hsl(var(--green-new-55-hsl) / 1);
  --green-new-55-hsl: 142.778 calc(var(--saturation-factor, 1) * 81.818%) 25.882%;
  --green-new-56: hsl(var(--green-new-56-hsl) / 1);
  --green-new-56-hsl: 142.5 calc(var(--saturation-factor, 1) * 80%) 25.49%;
  --green-new-57: hsl(var(--green-new-57-hsl) / 1);
  --green-new-57-hsl: 141.818 calc(var(--saturation-factor, 1) * 76.744%) 25.294%;
  --green-new-58: hsl(var(--green-new-58-hsl) / 1);
  --green-new-58-hsl: 140.842 calc(var(--saturation-factor, 1) * 74.803%) 24.902%;
  --green-new-59: hsl(var(--green-new-59-hsl) / 1);
  --green-new-59-hsl: 140.217 calc(var(--saturation-factor, 1) * 73.016%) 24.706%;
  --green-new-6: hsl(var(--green-new-6-hsl) / 1);
  --green-new-6-hsl: 129.412 calc(var(--saturation-factor, 1) * 66.234%) 84.902%;
  --green-new-60: hsl(var(--green-new-60-hsl) / 1);
  --green-new-60-hsl: 140.225 calc(var(--saturation-factor, 1) * 72.358%) 24.118%;
  --green-new-61: hsl(var(--green-new-61-hsl) / 1);
  --green-new-61-hsl: 139.765 calc(var(--saturation-factor, 1) * 70.248%) 23.725%;
  --green-new-62: hsl(var(--green-new-62-hsl) / 1);
  --green-new-62-hsl: 139.518 calc(var(--saturation-factor, 1) * 69.748%) 23.333%;
  --green-new-63: hsl(var(--green-new-63-hsl) / 1);
  --green-new-63-hsl: 138.987 calc(var(--saturation-factor, 1) * 67.521%) 22.941%;
  --green-new-64: hsl(var(--green-new-64-hsl) / 1);
  --green-new-64-hsl: 138.947 calc(var(--saturation-factor, 1) * 66.667%) 22.353%;
  --green-new-65: hsl(var(--green-new-65-hsl) / 1);
  --green-new-65-hsl: 138.649 calc(var(--saturation-factor, 1) * 66.071%) 21.961%;
  --green-new-66: hsl(var(--green-new-66-hsl) / 1);
  --green-new-66-hsl: 138.592 calc(var(--saturation-factor, 1) * 65.138%) 21.373%;
  --green-new-67: hsl(var(--green-new-67-hsl) / 1);
  --green-new-67-hsl: 137.91 calc(var(--saturation-factor, 1) * 62.617%) 20.98%;
  --green-new-68: hsl(var(--green-new-68-hsl) / 1);
  --green-new-68-hsl: 136.615 calc(var(--saturation-factor, 1) * 61.905%) 20.588%;
  --green-new-69: hsl(var(--green-new-69-hsl) / 1);
  --green-new-69-hsl: 137.143 calc(var(--saturation-factor, 1) * 62.376%) 19.804%;
  --green-new-7: hsl(var(--green-new-7-hsl) / 1);
  --green-new-7-hsl: 129.057 calc(var(--saturation-factor, 1) * 63.855%) 83.725%;
  --green-new-70: hsl(var(--green-new-70-hsl) / 1);
  --green-new-70-hsl: 137 calc(var(--saturation-factor, 1) * 61.224%) 19.216%;
  --green-new-71: hsl(var(--green-new-71-hsl) / 1);
  --green-new-71-hsl: 136.552 calc(var(--saturation-factor, 1) * 60.417%) 18.824%;
  --green-new-72: hsl(var(--green-new-72-hsl) / 1);
  --green-new-72-hsl: 136.364 calc(var(--saturation-factor, 1) * 59.14%) 18.235%;
  --green-new-73: hsl(var(--green-new-73-hsl) / 1);
  --green-new-73-hsl: 135.849 calc(var(--saturation-factor, 1) * 58.242%) 17.843%;
  --green-new-74: hsl(var(--green-new-74-hsl) / 1);
  --green-new-74-hsl: 136.471 calc(var(--saturation-factor, 1) * 58.621%) 17.059%;
  --green-new-75: hsl(var(--green-new-75-hsl) / 1);
  --green-new-75-hsl: 135.918 calc(var(--saturation-factor, 1) * 57.647%) 16.667%;
  --green-new-76: hsl(var(--green-new-76-hsl) / 1);
  --green-new-76-hsl: 134.348 calc(var(--saturation-factor, 1) * 56.098%) 16.078%;
  --green-new-77: hsl(var(--green-new-77-hsl) / 1);
  --green-new-77-hsl: 134.667 calc(var(--saturation-factor, 1) * 56.962%) 15.49%;
  --green-new-78: hsl(var(--green-new-78-hsl) / 1);
  --green-new-78-hsl: 134.286 calc(var(--saturation-factor, 1) * 55.263%) 14.902%;
  --green-new-79: hsl(var(--green-new-79-hsl) / 1);
  --green-new-79-hsl: 134.634 calc(var(--saturation-factor, 1) * 56.164%) 14.314%;
  --green-new-8: hsl(var(--green-new-8-hsl) / 1);
  --green-new-8-hsl: 130 calc(var(--saturation-factor, 1) * 60%) 82.353%;
  --green-new-80: hsl(var(--green-new-80-hsl) / 1);
  --green-new-80-hsl: 134.211 calc(var(--saturation-factor, 1) * 54.286%) 13.725%;
  --green-new-81: hsl(var(--green-new-81-hsl) / 1);
  --green-new-81-hsl: 134.595 calc(var(--saturation-factor, 1) * 55.224%) 13.137%;
  --green-new-82: hsl(var(--green-new-82-hsl) / 1);
  --green-new-82-hsl: 133.714 calc(var(--saturation-factor, 1) * 53.846%) 12.745%;
  --green-new-83: hsl(var(--green-new-83-hsl) / 1);
  --green-new-83-hsl: 132.727 calc(var(--saturation-factor, 1) * 54.098%) 11.961%;
  --green-new-84: hsl(var(--green-new-84-hsl) / 1);
  --green-new-84-hsl: 131.613 calc(var(--saturation-factor, 1) * 52.542%) 11.569%;
  --green-new-85: hsl(var(--green-new-85-hsl) / 1);
  --green-new-85-hsl: 132 calc(var(--saturation-factor, 1) * 53.571%) 10.98%;
  --green-new-86: hsl(var(--green-new-86-hsl) / 1);
  --green-new-86-hsl: 132.857 calc(var(--saturation-factor, 1) * 53.846%) 10.196%;
  --green-new-87: hsl(var(--green-new-87-hsl) / 1);
  --green-new-87-hsl: 131.538 calc(var(--saturation-factor, 1) * 52%) 9.804%;
  --green-new-88: hsl(var(--green-new-88-hsl) / 1);
  --green-new-88-hsl: 132 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
  --green-new-89: hsl(var(--green-new-89-hsl) / 1);
  --green-new-89-hsl: 132.5 calc(var(--saturation-factor, 1) * 54.545%) 8.627%;
  --green-new-9: hsl(var(--green-new-9-hsl) / 1);
  --green-new-9-hsl: 129.643 calc(var(--saturation-factor, 1) * 58.333%) 81.176%;
  --green-new-90: hsl(var(--green-new-90-hsl) / 1);
  --green-new-90-hsl: 130.909 calc(var(--saturation-factor, 1) * 55%) 7.843%;
  --green-new-91: hsl(var(--green-new-91-hsl) / 1);
  --green-new-91-hsl: 129 calc(var(--saturation-factor, 1) * 52.632%) 7.451%;
  --green-new-92: hsl(var(--green-new-92-hsl) / 1);
  --green-new-92-hsl: 129.474 calc(var(--saturation-factor, 1) * 54.286%) 6.863%;
  --green-new-93: hsl(var(--green-new-93-hsl) / 1);
  --green-new-93-hsl: 130 calc(var(--saturation-factor, 1) * 56.25%) 6.275%;
  --green-new-94: hsl(var(--green-new-94-hsl) / 1);
  --green-new-94-hsl: 131.25 calc(var(--saturation-factor, 1) * 57.143%) 5.49%;
  --green-new-95: hsl(var(--green-new-95-hsl) / 1);
  --green-new-95-hsl: 128 calc(var(--saturation-factor, 1) * 60%) 4.902%;
  --green-new-96: hsl(var(--green-new-96-hsl) / 1);
  --green-new-96-hsl: 125 calc(var(--saturation-factor, 1) * 54.545%) 4.314%;
  --green-new-97: hsl(var(--green-new-97-hsl) / 1);
  --green-new-97-hsl: 126.667 calc(var(--saturation-factor, 1) * 52.941%) 3.333%;
  --green-new-98: hsl(var(--green-new-98-hsl) / 1);
  --green-new-98-hsl: 120 calc(var(--saturation-factor, 1) * 50%) 2.353%;
  --green-new-99: hsl(var(--green-new-99-hsl) / 1);
  --green-new-99-hsl: 140 calc(var(--saturation-factor, 1) * 60%) 0.98%;
  --guild-boosting-blue: hsl(var(--guild-boosting-blue-hsl) / 1);
  --guild-boosting-blue-hsl: 221.132 calc(var(--saturation-factor, 1) * 70.044%) 55.49%;
  --guild-boosting-blue-for-gradients: hsl(var(--guild-boosting-blue-for-gradients-hsl) / 1);
  --guild-boosting-blue-for-gradients-hsl: 234.909 calc(var(--saturation-factor, 1) * 68.465%) 52.745%;
  --guild-boosting-pink: hsl(var(--guild-boosting-pink-hsl) / 1);
  --guild-boosting-pink-hsl: 302.143 calc(var(--saturation-factor, 1) * 100%) 72.549%;
  --guild-boosting-purple: hsl(var(--guild-boosting-purple-hsl) / 1);
  --guild-boosting-purple-hsl: 269.032 calc(var(--saturation-factor, 1) * 83.784%) 70.98%;
  --guild-boosting-purple-for-gradients: hsl(var(--guild-boosting-purple-for-gradients-hsl) / 1);
  --guild-boosting-purple-for-gradients-hsl: 269.162 calc(var(--saturation-factor, 1) * 91.795%) 61.765%;
  --hypesquad-house-1: hsl(var(--hypesquad-house-1-hsl) / 1);
  --hypesquad-house-1-hsl: 253.458 calc(var(--saturation-factor, 1) * 76.978%) 72.745%;
  --hypesquad-house-2: hsl(var(--hypesquad-house-2-hsl) / 1);
  --hypesquad-house-2-hsl: 8.511 calc(var(--saturation-factor, 1) * 86.503%) 68.039%;
  --hypesquad-house-3: hsl(var(--hypesquad-house-3-hsl) / 1);
  --hypesquad-house-3-hsl: 168.553 calc(var(--saturation-factor, 1) * 69.091%) 56.863%;
  --input-placeholder-text-dark: hsl(var(--input-placeholder-text-dark-hsl) / 1);
  --input-placeholder-text-dark-hsl: 216 calc(var(--saturation-factor, 1) * 2.128%) 53.922%;
  --lol: hsl(var(--lol-hsl) / 1);
  --lol-hsl: 190.286 calc(var(--saturation-factor, 1) * 89.744%) 7.647%;
  --lol-text-dark: hsl(var(--lol-text-dark-hsl) / 1);
  --lol-text-dark-hsl: 37.444 calc(var(--saturation-factor, 1) * 81.595%) 31.961%;
  --lol-text-light: hsl(var(--lol-text-light-hsl) / 1);
  --lol-text-light-hsl: 41.143 calc(var(--saturation-factor, 1) * 50.239%) 59.02%;
  --neutral-1: hsl(var(--neutral-1-hsl) / 1);
  --neutral-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --neutral-10: hsl(var(--neutral-10-hsl) / 1);
  --neutral-10-hsl: 240 calc(var(--saturation-factor, 1) * 2.941%) 86.667%;
  --neutral-100: hsl(var(--neutral-100-hsl) / 1);
  --neutral-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --neutral-11: hsl(var(--neutral-11-hsl) / 1);
  --neutral-11-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 85.294%;
  --neutral-12: hsl(var(--neutral-12-hsl) / 1);
  --neutral-12-hsl: 240 calc(var(--saturation-factor, 1) * 3.614%) 83.725%;
  --neutral-13: hsl(var(--neutral-13-hsl) / 1);
  --neutral-13-hsl: 240 calc(var(--saturation-factor, 1) * 4.444%) 82.353%;
  --neutral-14: hsl(var(--neutral-14-hsl) / 1);
  --neutral-14-hsl: 240 calc(var(--saturation-factor, 1) * 4.082%) 80.784%;
  --neutral-15: hsl(var(--neutral-15-hsl) / 1);
  --neutral-15-hsl: 240 calc(var(--saturation-factor, 1) * 4.762%) 79.412%;
  --neutral-16: hsl(var(--neutral-16-hsl) / 1);
  --neutral-16-hsl: 240 calc(var(--saturation-factor, 1) * 3.571%) 78.039%;
  --neutral-17: hsl(var(--neutral-17-hsl) / 1);
  --neutral-17-hsl: 240 calc(var(--saturation-factor, 1) * 4.202%) 76.667%;
  --neutral-18: hsl(var(--neutral-18-hsl) / 1);
  --neutral-18-hsl: 240 calc(var(--saturation-factor, 1) * 3.937%) 75.098%;
  --neutral-19: hsl(var(--neutral-19-hsl) / 1);
  --neutral-19-hsl: 240 calc(var(--saturation-factor, 1) * 4.478%) 73.725%;
  --neutral-2: hsl(var(--neutral-2-hsl) / 1);
  --neutral-2-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 98.431%;
  --neutral-20: hsl(var(--neutral-20-hsl) / 1);
  --neutral-20-hsl: 230 calc(var(--saturation-factor, 1) * 4.225%) 72.157%;
  --neutral-21: hsl(var(--neutral-21-hsl) / 1);
  --neutral-21-hsl: 240 calc(var(--saturation-factor, 1) * 4.054%) 70.98%;
  --neutral-22: hsl(var(--neutral-22-hsl) / 1);
  --neutral-22-hsl: 240 calc(var(--saturation-factor, 1) * 3.846%) 69.412%;
  --neutral-23: hsl(var(--neutral-23-hsl) / 1);
  --neutral-23-hsl: 240 calc(var(--saturation-factor, 1) * 4.294%) 68.039%;
  --neutral-24: hsl(var(--neutral-24-hsl) / 1);
  --neutral-24-hsl: 240 calc(var(--saturation-factor, 1) * 3.529%) 66.667%;
  --neutral-25: hsl(var(--neutral-25-hsl) / 1);
  --neutral-25-hsl: 240 calc(var(--saturation-factor, 1) * 3.955%) 65.294%;
  --neutral-26: hsl(var(--neutral-26-hsl) / 1);
  --neutral-26-hsl: 240 calc(var(--saturation-factor, 1) * 3.784%) 63.725%;
  --neutral-27: hsl(var(--neutral-27-hsl) / 1);
  --neutral-27-hsl: 240 calc(var(--saturation-factor, 1) * 3.665%) 62.549%;
  --neutral-28: hsl(var(--neutral-28-hsl) / 1);
  --neutral-28-hsl: 240 calc(var(--saturation-factor, 1) * 3.518%) 60.98%;
  --neutral-29: hsl(var(--neutral-29-hsl) / 1);
  --neutral-29-hsl: 240 calc(var(--saturation-factor, 1) * 3.883%) 59.608%;
  --neutral-3: hsl(var(--neutral-3-hsl) / 1);
  --neutral-3-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 97.059%;
  --neutral-30: hsl(var(--neutral-30-hsl) / 1);
  --neutral-30-hsl: 240 calc(var(--saturation-factor, 1) * 3.774%) 58.431%;
  --neutral-31: hsl(var(--neutral-31-hsl) / 1);
  --neutral-31-hsl: 240 calc(var(--saturation-factor, 1) * 3.636%) 56.863%;
  --neutral-32: hsl(var(--neutral-32-hsl) / 1);
  --neutral-32-hsl: 240 calc(var(--saturation-factor, 1) * 3.54%) 55.686%;
  --neutral-33: hsl(var(--neutral-33-hsl) / 1);
  --neutral-33-hsl: 240 calc(var(--saturation-factor, 1) * 3.419%) 54.118%;
  --neutral-34: hsl(var(--neutral-34-hsl) / 1);
  --neutral-34-hsl: 240 calc(var(--saturation-factor, 1) * 3.333%) 52.941%;
  --neutral-35: hsl(var(--neutral-35-hsl) / 1);
  --neutral-35-hsl: 240 calc(var(--saturation-factor, 1) * 3.644%) 51.569%;
  --neutral-36: hsl(var(--neutral-36-hsl) / 1);
  --neutral-36-hsl: 240 calc(var(--saturation-factor, 1) * 3.15%) 50.196%;
  --neutral-37: hsl(var(--neutral-37-hsl) / 1);
  --neutral-37-hsl: 240 calc(var(--saturation-factor, 1) * 3.614%) 48.824%;
  --neutral-38: hsl(var(--neutral-38-hsl) / 1);
  --neutral-38-hsl: 240 calc(var(--saturation-factor, 1) * 3.704%) 47.647%;
  --neutral-39: hsl(var(--neutral-39-hsl) / 1);
  --neutral-39-hsl: 240 calc(var(--saturation-factor, 1) * 3.83%) 46.078%;
  --neutral-4: hsl(var(--neutral-4-hsl) / 1);
  --neutral-4-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 95.49%;
  --neutral-40: hsl(var(--neutral-40-hsl) / 1);
  --neutral-40-hsl: 240 calc(var(--saturation-factor, 1) * 3.93%) 44.902%;
  --neutral-41: hsl(var(--neutral-41-hsl) / 1);
  --neutral-41-hsl: 240 calc(var(--saturation-factor, 1) * 4.505%) 43.529%;
  --neutral-42: hsl(var(--neutral-42-hsl) / 1);
  --neutral-42-hsl: 240 calc(var(--saturation-factor, 1) * 4.63%) 42.353%;
  --neutral-43: hsl(var(--neutral-43-hsl) / 1);
  --neutral-43-hsl: 240 calc(var(--saturation-factor, 1) * 4.306%) 40.98%;
  --neutral-44: hsl(var(--neutral-44-hsl) / 1);
  --neutral-44-hsl: 240 calc(var(--saturation-factor, 1) * 4.95%) 39.608%;
  --neutral-45: hsl(var(--neutral-45-hsl) / 1);
  --neutral-45-hsl: 240 calc(var(--saturation-factor, 1) * 5.102%) 38.431%;
  --neutral-46: hsl(var(--neutral-46-hsl) / 1);
  --neutral-46-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 37.255%;
  --neutral-47: hsl(var(--neutral-47-hsl) / 1);
  --neutral-47-hsl: 240 calc(var(--saturation-factor, 1) * 5.495%) 35.686%;
  --neutral-48: hsl(var(--neutral-48-hsl) / 1);
  --neutral-48-hsl: 240 calc(var(--saturation-factor, 1) * 5.682%) 34.51%;
  --neutral-49: hsl(var(--neutral-49-hsl) / 1);
  --neutral-49-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 33.333%;
  --neutral-5: hsl(var(--neutral-5-hsl) / 1);
  --neutral-5-hsl: 240 calc(var(--saturation-factor, 1) * 3.226%) 93.922%;
  --neutral-50: hsl(var(--neutral-50-hsl) / 1);
  --neutral-50-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 33.333%;
  --neutral-51: hsl(var(--neutral-51-hsl) / 1);
  --neutral-51-hsl: 240 calc(var(--saturation-factor, 1) * 6.024%) 32.549%;
  --neutral-52: hsl(var(--neutral-52-hsl) / 1);
  --neutral-52-hsl: 240 calc(var(--saturation-factor, 1) * 5.521%) 31.961%;
  --neutral-53: hsl(var(--neutral-53-hsl) / 1);
  --neutral-53-hsl: 240 calc(var(--saturation-factor, 1) * 6.25%) 31.373%;
  --neutral-54: hsl(var(--neutral-54-hsl) / 1);
  --neutral-54-hsl: 240 calc(var(--saturation-factor, 1) * 5.732%) 30.784%;
  --neutral-55: hsl(var(--neutral-55-hsl) / 1);
  --neutral-55-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 30%;
  --neutral-56: hsl(var(--neutral-56-hsl) / 1);
  --neutral-56-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.04%) 29.216%;
  --neutral-57: hsl(var(--neutral-57-hsl) / 1);
  --neutral-57-hsl: 240 calc(var(--saturation-factor, 1) * 5.479%) 28.627%;
  --neutral-58: hsl(var(--neutral-58-hsl) / 1);
  --neutral-58-hsl: 240 calc(var(--saturation-factor, 1) * 6.294%) 28.039%;
  --neutral-59: hsl(var(--neutral-59-hsl) / 1);
  --neutral-59-hsl: 240 calc(var(--saturation-factor, 1) * 5.714%) 27.451%;
  --neutral-6: hsl(var(--neutral-6-hsl) / 1);
  --neutral-6-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 92.549%;
  --neutral-60: hsl(var(--neutral-60-hsl) / 1);
  --neutral-60-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 26.667%;
  --neutral-61: hsl(var(--neutral-61-hsl) / 1);
  --neutral-61-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 26.078%;
  --neutral-62: hsl(var(--neutral-62-hsl) / 1);
  --neutral-62-hsl: 240 calc(var(--saturation-factor, 1) * 6.154%) 25.49%;
  --neutral-63: hsl(var(--neutral-63-hsl) / 1);
  --neutral-63-hsl: 240 calc(var(--saturation-factor, 1) * 5.512%) 24.902%;
  --neutral-64: hsl(var(--neutral-64-hsl) / 1);
  --neutral-64-hsl: 240 calc(var(--saturation-factor, 1) * 5.691%) 24.118%;
  --neutral-65: hsl(var(--neutral-65-hsl) / 1);
  --neutral-65-hsl: 240 calc(var(--saturation-factor, 1) * 5.785%) 23.725%;
  --neutral-66: hsl(var(--neutral-66-hsl) / 1);
  --neutral-66-hsl: 240 calc(var(--saturation-factor, 1) * 5.983%) 22.941%;
  --neutral-67: hsl(var(--neutral-67-hsl) / 1);
  --neutral-67-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 22.353%;
  --neutral-68: hsl(var(--neutral-68-hsl) / 1);
  --neutral-68-hsl: 240 calc(var(--saturation-factor, 1) * 5.455%) 21.569%;
  --neutral-69: hsl(var(--neutral-69-hsl) / 1);
  --neutral-69-hsl: 240 calc(var(--saturation-factor, 1) * 5.556%) 21.176%;
  --neutral-7: hsl(var(--neutral-7-hsl) / 1);
  --neutral-7-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 90.98%;
  --neutral-70: hsl(var(--neutral-70-hsl) / 1);
  --neutral-70-hsl: 240 calc(var(--saturation-factor, 1) * 5.769%) 20.392%;
  --neutral-71: hsl(var(--neutral-71-hsl) / 1);
  --neutral-71-hsl: 240 calc(var(--saturation-factor, 1) * 4.95%) 19.804%;
  --neutral-72: hsl(var(--neutral-72-hsl) / 1);
  --neutral-72-hsl: 240 calc(var(--saturation-factor, 1) * 6.122%) 19.216%;
  --neutral-73: hsl(var(--neutral-73-hsl) / 1);
  --neutral-73-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 18.627%;
  --neutral-74: hsl(var(--neutral-74-hsl) / 1);
  --neutral-74-hsl: 240 calc(var(--saturation-factor, 1) * 6.522%) 18.039%;
  --neutral-75: hsl(var(--neutral-75-hsl) / 1);
  --neutral-75-hsl: 240 calc(var(--saturation-factor, 1) * 5.618%) 17.451%;
  --neutral-76: hsl(var(--neutral-76-hsl) / 1);
  --neutral-76-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 16.667%;
  --neutral-77: hsl(var(--neutral-77-hsl) / 1);
  --neutral-77-hsl: 240 calc(var(--saturation-factor, 1) * 6.024%) 16.275%;
  --neutral-78: hsl(var(--neutral-78-hsl) / 1);
  --neutral-78-hsl: 240 calc(var(--saturation-factor, 1) * 5%) 15.686%;
  --neutral-79: hsl(var(--neutral-79-hsl) / 1);
  --neutral-79-hsl: 240 calc(var(--saturation-factor, 1) * 6.494%) 15.098%;
  --neutral-8: hsl(var(--neutral-8-hsl) / 1);
  --neutral-8-hsl: 240 calc(var(--saturation-factor, 1) * 5.66%) 89.608%;
  --neutral-80: hsl(var(--neutral-80-hsl) / 1);
  --neutral-80-hsl: 240 calc(var(--saturation-factor, 1) * 5.405%) 14.51%;
  --neutral-81: hsl(var(--neutral-81-hsl) / 1);
  --neutral-81-hsl: 240 calc(var(--saturation-factor, 1) * 5.714%) 13.725%;
  --neutral-82: hsl(var(--neutral-82-hsl) / 1);
  --neutral-82-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 13.333%;
  --neutral-83: hsl(var(--neutral-83-hsl) / 1);
  --neutral-83-hsl: 240 calc(var(--saturation-factor, 1) * 4.615%) 12.745%;
  --neutral-84: hsl(var(--neutral-84-hsl) / 1);
  --neutral-84-hsl: 240 calc(var(--saturation-factor, 1) * 6.452%) 12.157%;
  --neutral-85: hsl(var(--neutral-85-hsl) / 1);
  --neutral-85-hsl: 240 calc(var(--saturation-factor, 1) * 5.085%) 11.569%;
  --neutral-86: hsl(var(--neutral-86-hsl) / 1);
  --neutral-86-hsl: 240 calc(var(--saturation-factor, 1) * 7.143%) 10.98%;
  --neutral-87: hsl(var(--neutral-87-hsl) / 1);
  --neutral-87-hsl: 240 calc(var(--saturation-factor, 1) * 5.66%) 10.392%;
  --neutral-88: hsl(var(--neutral-88-hsl) / 1);
  --neutral-88-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 10%;
  --neutral-89: hsl(var(--neutral-89-hsl) / 1);
  --neutral-89-hsl: 240 calc(var(--saturation-factor, 1) * 6.383%) 9.216%;
  --neutral-9: hsl(var(--neutral-9-hsl) / 1);
  --neutral-9-hsl: 240 calc(var(--saturation-factor, 1) * 4.918%) 88.039%;
  --neutral-90: hsl(var(--neutral-90-hsl) / 1);
  --neutral-90-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 8.824%;
  --neutral-91: hsl(var(--neutral-91-hsl) / 1);
  --neutral-91-hsl: 220 calc(var(--saturation-factor, 1) * 7.317%) 8.039%;
  --neutral-92: hsl(var(--neutral-92-hsl) / 1);
  --neutral-92-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 7.451%;
  --neutral-93: hsl(var(--neutral-93-hsl) / 1);
  --neutral-93-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 6.667%;
  --neutral-94: hsl(var(--neutral-94-hsl) / 1);
  --neutral-94-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 5.882%;
  --neutral-95: hsl(var(--neutral-95-hsl) / 1);
  --neutral-95-hsl: 240 calc(var(--saturation-factor, 1) * 7.692%) 5.098%;
  --neutral-96: hsl(var(--neutral-96-hsl) / 1);
  --neutral-96-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 4.314%;
  --neutral-97: hsl(var(--neutral-97-hsl) / 1);
  --neutral-97-hsl: 240 calc(var(--saturation-factor, 1) * 12.5%) 3.137%;
  --neutral-98: hsl(var(--neutral-98-hsl) / 1);
  --neutral-98-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 2.157%;
  --neutral-99: hsl(var(--neutral-99-hsl) / 1);
  --neutral-99-hsl: 240 calc(var(--saturation-factor, 1) * 20%) 0.98%;
  --opacity-1: hsl(var(--opacity-1-hsl) / 0.011764705882352941);
  --opacity-1-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-12: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
  --opacity-12-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-16: hsl(var(--opacity-16-hsl) / 0.1607843137254902);
  --opacity-16-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-20: hsl(var(--opacity-20-hsl) / 0.2);
  --opacity-20-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-24: hsl(var(--opacity-24-hsl) / 0.23921568627450981);
  --opacity-24-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-28: hsl(var(--opacity-28-hsl) / 0.2784313725490196);
  --opacity-28-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-32: hsl(var(--opacity-32-hsl) / 0.3215686274509804);
  --opacity-32-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-36: hsl(var(--opacity-36-hsl) / 0.3607843137254902);
  --opacity-36-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-4: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
  --opacity-4-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-40: hsl(var(--opacity-40-hsl) / 0.4);
  --opacity-40-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-44: hsl(var(--opacity-44-hsl) / 0.4392156862745098);
  --opacity-44-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-48: hsl(var(--opacity-48-hsl) / 0.47843137254901963);
  --opacity-48-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-52: hsl(var(--opacity-52-hsl) / 0.5215686274509804);
  --opacity-52-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-56: hsl(var(--opacity-56-hsl) / 0.5607843137254902);
  --opacity-56-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-60: hsl(var(--opacity-60-hsl) / 0.6);
  --opacity-60-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-64: hsl(var(--opacity-64-hsl) / 0.6392156862745098);
  --opacity-64-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-68: hsl(var(--opacity-68-hsl) / 0.6784313725490196);
  --opacity-68-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-72: hsl(var(--opacity-72-hsl) / 0.7215686274509804);
  --opacity-72-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-76: hsl(var(--opacity-76-hsl) / 0.7607843137254902);
  --opacity-76-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-8: hsl(var(--opacity-8-hsl) / 0.0784313725490196);
  --opacity-8-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-80: hsl(var(--opacity-80-hsl) / 0.8);
  --opacity-80-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-84: hsl(var(--opacity-84-hsl) / 0.8392156862745098);
  --opacity-84-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-88: hsl(var(--opacity-88-hsl) / 0.8784313725490196);
  --opacity-88-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-92: hsl(var(--opacity-92-hsl) / 0.9215686274509803);
  --opacity-92-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-96: hsl(var(--opacity-96-hsl) / 0.9607843137254902);
  --opacity-96-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-black-1: hsl(var(--opacity-black-1-hsl) / 0.011764705882352941);
  --opacity-black-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-12: hsl(var(--opacity-black-12-hsl) / 0.12156862745098039);
  --opacity-black-12-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-16: hsl(var(--opacity-black-16-hsl) / 0.1607843137254902);
  --opacity-black-16-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-20: hsl(var(--opacity-black-20-hsl) / 0.2);
  --opacity-black-20-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-24: hsl(var(--opacity-black-24-hsl) / 0.23921568627450981);
  --opacity-black-24-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-28: hsl(var(--opacity-black-28-hsl) / 0.2784313725490196);
  --opacity-black-28-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-32: hsl(var(--opacity-black-32-hsl) / 0.3215686274509804);
  --opacity-black-32-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-36: hsl(var(--opacity-black-36-hsl) / 0.3607843137254902);
  --opacity-black-36-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-4: hsl(var(--opacity-black-4-hsl) / 0.0392156862745098);
  --opacity-black-4-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-40: hsl(var(--opacity-black-40-hsl) / 0.4);
  --opacity-black-40-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-44: hsl(var(--opacity-black-44-hsl) / 0.4392156862745098);
  --opacity-black-44-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-48: hsl(var(--opacity-black-48-hsl) / 0.47843137254901963);
  --opacity-black-48-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-52: hsl(var(--opacity-black-52-hsl) / 0.5215686274509804);
  --opacity-black-52-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-56: hsl(var(--opacity-black-56-hsl) / 0.5607843137254902);
  --opacity-black-56-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-60: hsl(var(--opacity-black-60-hsl) / 0.6);
  --opacity-black-60-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-64: hsl(var(--opacity-black-64-hsl) / 0.6392156862745098);
  --opacity-black-64-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-68: hsl(var(--opacity-black-68-hsl) / 0.6784313725490196);
  --opacity-black-68-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-72: hsl(var(--opacity-black-72-hsl) / 0.7215686274509804);
  --opacity-black-72-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-76: hsl(var(--opacity-black-76-hsl) / 0.7607843137254902);
  --opacity-black-76-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-8: hsl(var(--opacity-black-8-hsl) / 0.0784313725490196);
  --opacity-black-8-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-80: hsl(var(--opacity-black-80-hsl) / 0.8);
  --opacity-black-80-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-84: hsl(var(--opacity-black-84-hsl) / 0.8392156862745098);
  --opacity-black-84-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-88: hsl(var(--opacity-black-88-hsl) / 0.8784313725490196);
  --opacity-black-88-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-92: hsl(var(--opacity-black-92-hsl) / 0.9215686274509803);
  --opacity-black-92-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-96: hsl(var(--opacity-black-96-hsl) / 0.9607843137254902);
  --opacity-black-96-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-blue-1: hsl(var(--opacity-blue-1-hsl) / 0.011764705882352941);
  --opacity-blue-1-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-12: hsl(var(--opacity-blue-12-hsl) / 0.12156862745098039);
  --opacity-blue-12-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-16: hsl(var(--opacity-blue-16-hsl) / 0.1607843137254902);
  --opacity-blue-16-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-20: hsl(var(--opacity-blue-20-hsl) / 0.2);
  --opacity-blue-20-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-24: hsl(var(--opacity-blue-24-hsl) / 0.23921568627450981);
  --opacity-blue-24-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-28: hsl(var(--opacity-blue-28-hsl) / 0.2784313725490196);
  --opacity-blue-28-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-32: hsl(var(--opacity-blue-32-hsl) / 0.3215686274509804);
  --opacity-blue-32-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-36: hsl(var(--opacity-blue-36-hsl) / 0.3607843137254902);
  --opacity-blue-36-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-4: hsl(var(--opacity-blue-4-hsl) / 0.0392156862745098);
  --opacity-blue-4-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-40: hsl(var(--opacity-blue-40-hsl) / 0.4);
  --opacity-blue-40-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-44: hsl(var(--opacity-blue-44-hsl) / 0.4392156862745098);
  --opacity-blue-44-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-48: hsl(var(--opacity-blue-48-hsl) / 0.47843137254901963);
  --opacity-blue-48-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-52: hsl(var(--opacity-blue-52-hsl) / 0.5215686274509804);
  --opacity-blue-52-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-56: hsl(var(--opacity-blue-56-hsl) / 0.5607843137254902);
  --opacity-blue-56-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-60: hsl(var(--opacity-blue-60-hsl) / 0.6);
  --opacity-blue-60-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-64: hsl(var(--opacity-blue-64-hsl) / 0.6392156862745098);
  --opacity-blue-64-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-68: hsl(var(--opacity-blue-68-hsl) / 0.6784313725490196);
  --opacity-blue-68-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-72: hsl(var(--opacity-blue-72-hsl) / 0.7215686274509804);
  --opacity-blue-72-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-76: hsl(var(--opacity-blue-76-hsl) / 0.7607843137254902);
  --opacity-blue-76-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-8: hsl(var(--opacity-blue-8-hsl) / 0.0784313725490196);
  --opacity-blue-8-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-80: hsl(var(--opacity-blue-80-hsl) / 0.8);
  --opacity-blue-80-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-84: hsl(var(--opacity-blue-84-hsl) / 0.8392156862745098);
  --opacity-blue-84-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-88: hsl(var(--opacity-blue-88-hsl) / 0.8784313725490196);
  --opacity-blue-88-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-92: hsl(var(--opacity-blue-92-hsl) / 0.9215686274509803);
  --opacity-blue-92-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-96: hsl(var(--opacity-blue-96-hsl) / 0.9607843137254902);
  --opacity-blue-96-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blurple-1: hsl(var(--opacity-blurple-1-hsl) / 0.011764705882352941);
  --opacity-blurple-1-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-12: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);
  --opacity-blurple-12-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-16: hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902);
  --opacity-blurple-16-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-20: hsl(var(--opacity-blurple-20-hsl) / 0.2);
  --opacity-blurple-20-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-24: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);
  --opacity-blurple-24-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-28: hsl(var(--opacity-blurple-28-hsl) / 0.2784313725490196);
  --opacity-blurple-28-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-32: hsl(var(--opacity-blurple-32-hsl) / 0.3215686274509804);
  --opacity-blurple-32-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-36: hsl(var(--opacity-blurple-36-hsl) / 0.3607843137254902);
  --opacity-blurple-36-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-4: hsl(var(--opacity-blurple-4-hsl) / 0.0392156862745098);
  --opacity-blurple-4-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-40: hsl(var(--opacity-blurple-40-hsl) / 0.4);
  --opacity-blurple-40-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-44: hsl(var(--opacity-blurple-44-hsl) / 0.4392156862745098);
  --opacity-blurple-44-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-48: hsl(var(--opacity-blurple-48-hsl) / 0.47843137254901963);
  --opacity-blurple-48-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-52: hsl(var(--opacity-blurple-52-hsl) / 0.5215686274509804);
  --opacity-blurple-52-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-56: hsl(var(--opacity-blurple-56-hsl) / 0.5607843137254902);
  --opacity-blurple-56-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-60: hsl(var(--opacity-blurple-60-hsl) / 0.6);
  --opacity-blurple-60-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-64: hsl(var(--opacity-blurple-64-hsl) / 0.6392156862745098);
  --opacity-blurple-64-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-68: hsl(var(--opacity-blurple-68-hsl) / 0.6784313725490196);
  --opacity-blurple-68-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-72: hsl(var(--opacity-blurple-72-hsl) / 0.7215686274509804);
  --opacity-blurple-72-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-76: hsl(var(--opacity-blurple-76-hsl) / 0.7607843137254902);
  --opacity-blurple-76-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-8: hsl(var(--opacity-blurple-8-hsl) / 0.0784313725490196);
  --opacity-blurple-8-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-80: hsl(var(--opacity-blurple-80-hsl) / 0.8);
  --opacity-blurple-80-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-84: hsl(var(--opacity-blurple-84-hsl) / 0.8392156862745098);
  --opacity-blurple-84-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-88: hsl(var(--opacity-blurple-88-hsl) / 0.8784313725490196);
  --opacity-blurple-88-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-92: hsl(var(--opacity-blurple-92-hsl) / 0.9215686274509803);
  --opacity-blurple-92-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-96: hsl(var(--opacity-blurple-96-hsl) / 0.9607843137254902);
  --opacity-blurple-96-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-green-1: hsl(var(--opacity-green-1-hsl) / 0.011764705882352941);
  --opacity-green-1-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-12: hsl(var(--opacity-green-12-hsl) / 0.12156862745098039);
  --opacity-green-12-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-16: hsl(var(--opacity-green-16-hsl) / 0.1607843137254902);
  --opacity-green-16-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-20: hsl(var(--opacity-green-20-hsl) / 0.2);
  --opacity-green-20-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-24: hsl(var(--opacity-green-24-hsl) / 0.23921568627450981);
  --opacity-green-24-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-28: hsl(var(--opacity-green-28-hsl) / 0.2784313725490196);
  --opacity-green-28-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-32: hsl(var(--opacity-green-32-hsl) / 0.3215686274509804);
  --opacity-green-32-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-36: hsl(var(--opacity-green-36-hsl) / 0.3607843137254902);
  --opacity-green-36-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-4: hsl(var(--opacity-green-4-hsl) / 0.0392156862745098);
  --opacity-green-4-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-40: hsl(var(--opacity-green-40-hsl) / 0.4);
  --opacity-green-40-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-44: hsl(var(--opacity-green-44-hsl) / 0.4392156862745098);
  --opacity-green-44-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-48: hsl(var(--opacity-green-48-hsl) / 0.47843137254901963);
  --opacity-green-48-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-52: hsl(var(--opacity-green-52-hsl) / 0.5215686274509804);
  --opacity-green-52-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-56: hsl(var(--opacity-green-56-hsl) / 0.5607843137254902);
  --opacity-green-56-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-60: hsl(var(--opacity-green-60-hsl) / 0.6);
  --opacity-green-60-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-64: hsl(var(--opacity-green-64-hsl) / 0.6392156862745098);
  --opacity-green-64-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-68: hsl(var(--opacity-green-68-hsl) / 0.6784313725490196);
  --opacity-green-68-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-72: hsl(var(--opacity-green-72-hsl) / 0.7215686274509804);
  --opacity-green-72-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-76: hsl(var(--opacity-green-76-hsl) / 0.7607843137254902);
  --opacity-green-76-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-8: hsl(var(--opacity-green-8-hsl) / 0.0784313725490196);
  --opacity-green-8-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-80: hsl(var(--opacity-green-80-hsl) / 0.8);
  --opacity-green-80-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-84: hsl(var(--opacity-green-84-hsl) / 0.8392156862745098);
  --opacity-green-84-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-88: hsl(var(--opacity-green-88-hsl) / 0.8784313725490196);
  --opacity-green-88-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-92: hsl(var(--opacity-green-92-hsl) / 0.9215686274509803);
  --opacity-green-92-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-96: hsl(var(--opacity-green-96-hsl) / 0.9607843137254902);
  --opacity-green-96-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-orange-1: hsl(var(--opacity-orange-1-hsl) / 0.011764705882352941);
  --opacity-orange-1-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-12: hsl(var(--opacity-orange-12-hsl) / 0.12156862745098039);
  --opacity-orange-12-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-16: hsl(var(--opacity-orange-16-hsl) / 0.1607843137254902);
  --opacity-orange-16-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-20: hsl(var(--opacity-orange-20-hsl) / 0.2);
  --opacity-orange-20-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-24: hsl(var(--opacity-orange-24-hsl) / 0.23921568627450981);
  --opacity-orange-24-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-28: hsl(var(--opacity-orange-28-hsl) / 0.2784313725490196);
  --opacity-orange-28-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-32: hsl(var(--opacity-orange-32-hsl) / 0.3215686274509804);
  --opacity-orange-32-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-36: hsl(var(--opacity-orange-36-hsl) / 0.3607843137254902);
  --opacity-orange-36-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-4: hsl(var(--opacity-orange-4-hsl) / 0.0392156862745098);
  --opacity-orange-4-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-40: hsl(var(--opacity-orange-40-hsl) / 0.4);
  --opacity-orange-40-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-44: hsl(var(--opacity-orange-44-hsl) / 0.4392156862745098);
  --opacity-orange-44-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-48: hsl(var(--opacity-orange-48-hsl) / 0.47843137254901963);
  --opacity-orange-48-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-52: hsl(var(--opacity-orange-52-hsl) / 0.5215686274509804);
  --opacity-orange-52-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-56: hsl(var(--opacity-orange-56-hsl) / 0.5607843137254902);
  --opacity-orange-56-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-60: hsl(var(--opacity-orange-60-hsl) / 0.6);
  --opacity-orange-60-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-64: hsl(var(--opacity-orange-64-hsl) / 0.6392156862745098);
  --opacity-orange-64-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-68: hsl(var(--opacity-orange-68-hsl) / 0.6784313725490196);
  --opacity-orange-68-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-72: hsl(var(--opacity-orange-72-hsl) / 0.7215686274509804);
  --opacity-orange-72-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-76: hsl(var(--opacity-orange-76-hsl) / 0.7607843137254902);
  --opacity-orange-76-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-8: hsl(var(--opacity-orange-8-hsl) / 0.0784313725490196);
  --opacity-orange-8-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-80: hsl(var(--opacity-orange-80-hsl) / 0.8);
  --opacity-orange-80-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-84: hsl(var(--opacity-orange-84-hsl) / 0.8392156862745098);
  --opacity-orange-84-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-88: hsl(var(--opacity-orange-88-hsl) / 0.8784313725490196);
  --opacity-orange-88-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-92: hsl(var(--opacity-orange-92-hsl) / 0.9215686274509803);
  --opacity-orange-92-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-96: hsl(var(--opacity-orange-96-hsl) / 0.9607843137254902);
  --opacity-orange-96-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-red-1: hsl(var(--opacity-red-1-hsl) / 0.011764705882352941);
  --opacity-red-1-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-12: hsl(var(--opacity-red-12-hsl) / 0.12156862745098039);
  --opacity-red-12-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-16: hsl(var(--opacity-red-16-hsl) / 0.1607843137254902);
  --opacity-red-16-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-20: hsl(var(--opacity-red-20-hsl) / 0.2);
  --opacity-red-20-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-24: hsl(var(--opacity-red-24-hsl) / 0.23921568627450981);
  --opacity-red-24-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-28: hsl(var(--opacity-red-28-hsl) / 0.2784313725490196);
  --opacity-red-28-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-32: hsl(var(--opacity-red-32-hsl) / 0.3215686274509804);
  --opacity-red-32-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-36: hsl(var(--opacity-red-36-hsl) / 0.3607843137254902);
  --opacity-red-36-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-4: hsl(var(--opacity-red-4-hsl) / 0.0392156862745098);
  --opacity-red-4-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-40: hsl(var(--opacity-red-40-hsl) / 0.4);
  --opacity-red-40-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-44: hsl(var(--opacity-red-44-hsl) / 0.4392156862745098);
  --opacity-red-44-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-48: hsl(var(--opacity-red-48-hsl) / 0.47843137254901963);
  --opacity-red-48-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-52: hsl(var(--opacity-red-52-hsl) / 0.5215686274509804);
  --opacity-red-52-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-56: hsl(var(--opacity-red-56-hsl) / 0.5607843137254902);
  --opacity-red-56-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-60: hsl(var(--opacity-red-60-hsl) / 0.6);
  --opacity-red-60-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-64: hsl(var(--opacity-red-64-hsl) / 0.6392156862745098);
  --opacity-red-64-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-68: hsl(var(--opacity-red-68-hsl) / 0.6784313725490196);
  --opacity-red-68-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-72: hsl(var(--opacity-red-72-hsl) / 0.7215686274509804);
  --opacity-red-72-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-76: hsl(var(--opacity-red-76-hsl) / 0.7607843137254902);
  --opacity-red-76-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-8: hsl(var(--opacity-red-8-hsl) / 0.0784313725490196);
  --opacity-red-8-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-80: hsl(var(--opacity-red-80-hsl) / 0.8);
  --opacity-red-80-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-84: hsl(var(--opacity-red-84-hsl) / 0.8392156862745098);
  --opacity-red-84-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-88: hsl(var(--opacity-red-88-hsl) / 0.8784313725490196);
  --opacity-red-88-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-92: hsl(var(--opacity-red-92-hsl) / 0.9215686274509803);
  --opacity-red-92-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-96: hsl(var(--opacity-red-96-hsl) / 0.9607843137254902);
  --opacity-red-96-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-teal-1: hsl(var(--opacity-teal-1-hsl) / 0.011764705882352941);
  --opacity-teal-1-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-12: hsl(var(--opacity-teal-12-hsl) / 0.12156862745098039);
  --opacity-teal-12-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-16: hsl(var(--opacity-teal-16-hsl) / 0.1607843137254902);
  --opacity-teal-16-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-20: hsl(var(--opacity-teal-20-hsl) / 0.2);
  --opacity-teal-20-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-24: hsl(var(--opacity-teal-24-hsl) / 0.23921568627450981);
  --opacity-teal-24-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-28: hsl(var(--opacity-teal-28-hsl) / 0.2784313725490196);
  --opacity-teal-28-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-32: hsl(var(--opacity-teal-32-hsl) / 0.3215686274509804);
  --opacity-teal-32-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-36: hsl(var(--opacity-teal-36-hsl) / 0.3607843137254902);
  --opacity-teal-36-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-4: hsl(var(--opacity-teal-4-hsl) / 0.0392156862745098);
  --opacity-teal-4-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-40: hsl(var(--opacity-teal-40-hsl) / 0.4);
  --opacity-teal-40-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-44: hsl(var(--opacity-teal-44-hsl) / 0.4392156862745098);
  --opacity-teal-44-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-48: hsl(var(--opacity-teal-48-hsl) / 0.47843137254901963);
  --opacity-teal-48-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-52: hsl(var(--opacity-teal-52-hsl) / 0.5215686274509804);
  --opacity-teal-52-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-56: hsl(var(--opacity-teal-56-hsl) / 0.5607843137254902);
  --opacity-teal-56-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-60: hsl(var(--opacity-teal-60-hsl) / 0.6);
  --opacity-teal-60-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-64: hsl(var(--opacity-teal-64-hsl) / 0.6392156862745098);
  --opacity-teal-64-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-68: hsl(var(--opacity-teal-68-hsl) / 0.6784313725490196);
  --opacity-teal-68-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-72: hsl(var(--opacity-teal-72-hsl) / 0.7215686274509804);
  --opacity-teal-72-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-76: hsl(var(--opacity-teal-76-hsl) / 0.7607843137254902);
  --opacity-teal-76-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-8: hsl(var(--opacity-teal-8-hsl) / 0.0784313725490196);
  --opacity-teal-8-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-80: hsl(var(--opacity-teal-80-hsl) / 0.8);
  --opacity-teal-80-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-84: hsl(var(--opacity-teal-84-hsl) / 0.8392156862745098);
  --opacity-teal-84-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-88: hsl(var(--opacity-teal-88-hsl) / 0.8784313725490196);
  --opacity-teal-88-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-92: hsl(var(--opacity-teal-92-hsl) / 0.9215686274509803);
  --opacity-teal-92-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-96: hsl(var(--opacity-teal-96-hsl) / 0.9607843137254902);
  --opacity-teal-96-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-white-1: hsl(var(--opacity-white-1-hsl) / 0.011764705882352941);
  --opacity-white-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-12: hsl(var(--opacity-white-12-hsl) / 0.12156862745098039);
  --opacity-white-12-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-16: hsl(var(--opacity-white-16-hsl) / 0.1607843137254902);
  --opacity-white-16-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-20: hsl(var(--opacity-white-20-hsl) / 0.2);
  --opacity-white-20-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-24: hsl(var(--opacity-white-24-hsl) / 0.23921568627450981);
  --opacity-white-24-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-28: hsl(var(--opacity-white-28-hsl) / 0.2784313725490196);
  --opacity-white-28-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-32: hsl(var(--opacity-white-32-hsl) / 0.3215686274509804);
  --opacity-white-32-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-36: hsl(var(--opacity-white-36-hsl) / 0.3607843137254902);
  --opacity-white-36-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-4: hsl(var(--opacity-white-4-hsl) / 0.0392156862745098);
  --opacity-white-4-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-40: hsl(var(--opacity-white-40-hsl) / 0.4);
  --opacity-white-40-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-44: hsl(var(--opacity-white-44-hsl) / 0.4392156862745098);
  --opacity-white-44-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-48: hsl(var(--opacity-white-48-hsl) / 0.47843137254901963);
  --opacity-white-48-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-52: hsl(var(--opacity-white-52-hsl) / 0.5215686274509804);
  --opacity-white-52-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-56: hsl(var(--opacity-white-56-hsl) / 0.5607843137254902);
  --opacity-white-56-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-60: hsl(var(--opacity-white-60-hsl) / 0.6);
  --opacity-white-60-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-64: hsl(var(--opacity-white-64-hsl) / 0.6392156862745098);
  --opacity-white-64-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-68: hsl(var(--opacity-white-68-hsl) / 0.6784313725490196);
  --opacity-white-68-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-72: hsl(var(--opacity-white-72-hsl) / 0.7215686274509804);
  --opacity-white-72-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-76: hsl(var(--opacity-white-76-hsl) / 0.7607843137254902);
  --opacity-white-76-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-8: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
  --opacity-white-8-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-80: hsl(var(--opacity-white-80-hsl) / 0.8);
  --opacity-white-80-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-84: hsl(var(--opacity-white-84-hsl) / 0.8392156862745098);
  --opacity-white-84-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-88: hsl(var(--opacity-white-88-hsl) / 0.8784313725490196);
  --opacity-white-88-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-92: hsl(var(--opacity-white-92-hsl) / 0.9215686274509803);
  --opacity-white-92-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-96: hsl(var(--opacity-white-96-hsl) / 0.9607843137254902);
  --opacity-white-96-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-yellow-1: hsl(var(--opacity-yellow-1-hsl) / 0.011764705882352941);
  --opacity-yellow-1-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-12: hsl(var(--opacity-yellow-12-hsl) / 0.12156862745098039);
  --opacity-yellow-12-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-16: hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902);
  --opacity-yellow-16-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-20: hsl(var(--opacity-yellow-20-hsl) / 0.2);
  --opacity-yellow-20-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-24: hsl(var(--opacity-yellow-24-hsl) / 0.23921568627450981);
  --opacity-yellow-24-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-28: hsl(var(--opacity-yellow-28-hsl) / 0.2784313725490196);
  --opacity-yellow-28-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-32: hsl(var(--opacity-yellow-32-hsl) / 0.3215686274509804);
  --opacity-yellow-32-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-36: hsl(var(--opacity-yellow-36-hsl) / 0.3607843137254902);
  --opacity-yellow-36-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-4: hsl(var(--opacity-yellow-4-hsl) / 0.0392156862745098);
  --opacity-yellow-4-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-40: hsl(var(--opacity-yellow-40-hsl) / 0.4);
  --opacity-yellow-40-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-44: hsl(var(--opacity-yellow-44-hsl) / 0.4392156862745098);
  --opacity-yellow-44-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-48: hsl(var(--opacity-yellow-48-hsl) / 0.47843137254901963);
  --opacity-yellow-48-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-52: hsl(var(--opacity-yellow-52-hsl) / 0.5215686274509804);
  --opacity-yellow-52-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-56: hsl(var(--opacity-yellow-56-hsl) / 0.5607843137254902);
  --opacity-yellow-56-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-60: hsl(var(--opacity-yellow-60-hsl) / 0.6);
  --opacity-yellow-60-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-64: hsl(var(--opacity-yellow-64-hsl) / 0.6392156862745098);
  --opacity-yellow-64-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-68: hsl(var(--opacity-yellow-68-hsl) / 0.6784313725490196);
  --opacity-yellow-68-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-72: hsl(var(--opacity-yellow-72-hsl) / 0.7215686274509804);
  --opacity-yellow-72-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-76: hsl(var(--opacity-yellow-76-hsl) / 0.7607843137254902);
  --opacity-yellow-76-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-8: hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196);
  --opacity-yellow-8-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-80: hsl(var(--opacity-yellow-80-hsl) / 0.8);
  --opacity-yellow-80-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-84: hsl(var(--opacity-yellow-84-hsl) / 0.8392156862745098);
  --opacity-yellow-84-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-88: hsl(var(--opacity-yellow-88-hsl) / 0.8784313725490196);
  --opacity-yellow-88-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-92: hsl(var(--opacity-yellow-92-hsl) / 0.9215686274509803);
  --opacity-yellow-92-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-96: hsl(var(--opacity-yellow-96-hsl) / 0.9607843137254902);
  --opacity-yellow-96-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --orange-100: hsl(var(--orange-100-hsl) / 1);
  --orange-100-hsl: 18 calc(var(--saturation-factor, 1) * 100%) 98.039%;
  --orange-130: hsl(var(--orange-130-hsl) / 1);
  --orange-130-hsl: 23.333 calc(var(--saturation-factor, 1) * 100%) 96.471%;
  --orange-160: hsl(var(--orange-160-hsl) / 1);
  --orange-160-hsl: 21.29 calc(var(--saturation-factor, 1) * 93.939%) 93.529%;
  --orange-200: hsl(var(--orange-200-hsl) / 1);
  --orange-200-hsl: 21.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
  --orange-230: hsl(var(--orange-230-hsl) / 1);
  --orange-230-hsl: 23.514 calc(var(--saturation-factor, 1) * 92.5%) 84.314%;
  --orange-260: hsl(var(--orange-260-hsl) / 1);
  --orange-260-hsl: 23.301 calc(var(--saturation-factor, 1) * 94.495%) 78.627%;
  --orange-300: hsl(var(--orange-300-hsl) / 1);
  --orange-300-hsl: 25.468 calc(var(--saturation-factor, 1) * 94.558%) 71.176%;
  --orange-330: hsl(var(--orange-330-hsl) / 1);
  --orange-330-hsl: 27 calc(var(--saturation-factor, 1) * 94.737%) 62.745%;
  --orange-345: hsl(var(--orange-345-hsl) / 1);
  --orange-345-hsl: 28.342 calc(var(--saturation-factor, 1) * 87.665%) 55.49%;
  --orange-360: hsl(var(--orange-360-hsl) / 1);
  --orange-360-hsl: 26.145 calc(var(--saturation-factor, 1) * 71.315%) 50.784%;
  --orange-400: hsl(var(--orange-400-hsl) / 1);
  --orange-400-hsl: 25.443 calc(var(--saturation-factor, 1) * 67.521%) 45.882%;
  --orange-430: hsl(var(--orange-430-hsl) / 1);
  --orange-430-hsl: 24.681 calc(var(--saturation-factor, 1) * 69.458%) 39.804%;
  --orange-460: hsl(var(--orange-460-hsl) / 1);
  --orange-460-hsl: 23.538 calc(var(--saturation-factor, 1) * 72.222%) 35.294%;
  --orange-500: hsl(var(--orange-500-hsl) / 1);
  --orange-500-hsl: 22.314 calc(var(--saturation-factor, 1) * 76.101%) 31.176%;
  --orange-530: hsl(var(--orange-530-hsl) / 1);
  --orange-530-hsl: 21.869 calc(var(--saturation-factor, 1) * 76.978%) 27.255%;
  --orange-560: hsl(var(--orange-560-hsl) / 1);
  --orange-560-hsl: 21.474 calc(var(--saturation-factor, 1) * 77.236%) 24.118%;
  --orange-600: hsl(var(--orange-600-hsl) / 1);
  --orange-600-hsl: 22.857 calc(var(--saturation-factor, 1) * 79.245%) 20.784%;
  --orange-630: hsl(var(--orange-630-hsl) / 1);
  --orange-630-hsl: 22.105 calc(var(--saturation-factor, 1) * 79.167%) 18.824%;
  --orange-660: hsl(var(--orange-660-hsl) / 1);
  --orange-660-hsl: 22.388 calc(var(--saturation-factor, 1) * 78.824%) 16.667%;
  --orange-700: hsl(var(--orange-700-hsl) / 1);
  --orange-700-hsl: 21.724 calc(var(--saturation-factor, 1) * 76.316%) 14.902%;
  --orange-730: hsl(var(--orange-730-hsl) / 1);
  --orange-730-hsl: 21.923 calc(var(--saturation-factor, 1) * 78.788%) 12.941%;
  --orange-760: hsl(var(--orange-760-hsl) / 1);
  --orange-760-hsl: 21.333 calc(var(--saturation-factor, 1) * 78.947%) 11.176%;
  --orange-800: hsl(var(--orange-800-hsl) / 1);
  --orange-800-hsl: 21 calc(var(--saturation-factor, 1) * 80%) 9.804%;
  --orange-830: hsl(var(--orange-830-hsl) / 1);
  --orange-830-hsl: 20 calc(var(--saturation-factor, 1) * 76.744%) 8.431%;
  --orange-860: hsl(var(--orange-860-hsl) / 1);
  --orange-860-hsl: 20 calc(var(--saturation-factor, 1) * 72.973%) 7.255%;
  --orange-900: hsl(var(--orange-900-hsl) / 1);
  --orange-900-hsl: 25.714 calc(var(--saturation-factor, 1) * 72.414%) 5.686%;
  --orange-new-1: hsl(var(--orange-new-1-hsl) / 1);
  --orange-new-1-hsl: 13.714 calc(var(--saturation-factor, 1) * 100%) 93.137%;
  --orange-new-10: hsl(var(--orange-new-10-hsl) / 1);
  --orange-new-10-hsl: 20 calc(var(--saturation-factor, 1) * 86.207%) 82.941%;
  --orange-new-100: hsl(var(--orange-new-100-hsl) / 1);
  --orange-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --orange-new-11: hsl(var(--orange-new-11-hsl) / 1);
  --orange-new-11-hsl: 20 calc(var(--saturation-factor, 1) * 84.783%) 81.961%;
  --orange-new-12: hsl(var(--orange-new-12-hsl) / 1);
  --orange-new-12-hsl: 20.488 calc(var(--saturation-factor, 1) * 83.673%) 80.784%;
  --orange-new-13: hsl(var(--orange-new-13-hsl) / 1);
  --orange-new-13-hsl: 20.93 calc(var(--saturation-factor, 1) * 82.692%) 79.608%;
  --orange-new-14: hsl(var(--orange-new-14-hsl) / 1);
  --orange-new-14-hsl: 20.899 calc(var(--saturation-factor, 1) * 81.651%) 78.627%;
  --orange-new-15: hsl(var(--orange-new-15-hsl) / 1);
  --orange-new-15-hsl: 20.645 calc(var(--saturation-factor, 1) * 80.87%) 77.451%;
  --orange-new-16: hsl(var(--orange-new-16-hsl) / 1);
  --orange-new-16-hsl: 21.031 calc(var(--saturation-factor, 1) * 80.165%) 76.275%;
  --orange-new-17: hsl(var(--orange-new-17-hsl) / 1);
  --orange-new-17-hsl: 21 calc(var(--saturation-factor, 1) * 79.365%) 75.294%;
  --orange-new-18: hsl(var(--orange-new-18-hsl) / 1);
  --orange-new-18-hsl: 21.346 calc(var(--saturation-factor, 1) * 78.788%) 74.118%;
  --orange-new-19: hsl(var(--orange-new-19-hsl) / 1);
  --orange-new-19-hsl: 21.509 calc(var(--saturation-factor, 1) * 76.812%) 72.941%;
  --orange-new-2: hsl(var(--orange-new-2-hsl) / 1);
  --orange-new-2-hsl: 15.385 calc(var(--saturation-factor, 1) * 95.122%) 91.961%;
  --orange-new-20: hsl(var(--orange-new-20-hsl) / 1);
  --orange-new-20-hsl: 21.468 calc(var(--saturation-factor, 1) * 76.224%) 71.961%;
  --orange-new-21: hsl(var(--orange-new-21-hsl) / 1);
  --orange-new-21-hsl: 21.77 calc(var(--saturation-factor, 1) * 75.839%) 70.784%;
  --orange-new-22: hsl(var(--orange-new-22-hsl) / 1);
  --orange-new-22-hsl: 21.724 calc(var(--saturation-factor, 1) * 75.325%) 69.804%;
  --orange-new-23: hsl(var(--orange-new-23-hsl) / 1);
  --orange-new-23-hsl: 21.356 calc(var(--saturation-factor, 1) * 73.75%) 68.627%;
  --orange-new-24: hsl(var(--orange-new-24-hsl) / 1);
  --orange-new-24-hsl: 21.639 calc(var(--saturation-factor, 1) * 73.494%) 67.451%;
  --orange-new-25: hsl(var(--orange-new-25-hsl) / 1);
  --orange-new-25-hsl: 21.6 calc(var(--saturation-factor, 1) * 73.099%) 66.471%;
  --orange-new-26: hsl(var(--orange-new-26-hsl) / 1);
  --orange-new-26-hsl: 21.732 calc(var(--saturation-factor, 1) * 71.751%) 65.294%;
  --orange-new-27: hsl(var(--orange-new-27-hsl) / 1);
  --orange-new-27-hsl: 21.692 calc(var(--saturation-factor, 1) * 71.429%) 64.314%;
  --orange-new-28: hsl(var(--orange-new-28-hsl) / 1);
  --orange-new-28-hsl: 21.818 calc(var(--saturation-factor, 1) * 70.213%) 63.137%;
  --orange-new-29: hsl(var(--orange-new-29-hsl) / 1);
  --orange-new-29-hsl: 21.778 calc(var(--saturation-factor, 1) * 69.948%) 62.157%;
  --orange-new-3: hsl(var(--orange-new-3-hsl) / 1);
  --orange-new-3-hsl: 17.333 calc(var(--saturation-factor, 1) * 95.745%) 90.784%;
  --orange-new-30: hsl(var(--orange-new-30-hsl) / 1);
  --orange-new-30-hsl: 21.898 calc(var(--saturation-factor, 1) * 68.844%) 60.98%;
  --orange-new-31: hsl(var(--orange-new-31-hsl) / 1);
  --orange-new-31-hsl: 22.014 calc(var(--saturation-factor, 1) * 67.805%) 59.804%;
  --orange-new-32: hsl(var(--orange-new-32-hsl) / 1);
  --orange-new-32-hsl: 21.972 calc(var(--saturation-factor, 1) * 67.619%) 58.824%;
  --orange-new-33: hsl(var(--orange-new-33-hsl) / 1);
  --orange-new-33-hsl: 22.083 calc(var(--saturation-factor, 1) * 66.667%) 57.647%;
  --orange-new-34: hsl(var(--orange-new-34-hsl) / 1);
  --orange-new-34-hsl: 22.192 calc(var(--saturation-factor, 1) * 65.766%) 56.471%;
  --orange-new-35: hsl(var(--orange-new-35-hsl) / 1);
  --orange-new-35-hsl: 22.148 calc(var(--saturation-factor, 1) * 65.639%) 55.49%;
  --orange-new-36: hsl(var(--orange-new-36-hsl) / 1);
  --orange-new-36-hsl: 21.854 calc(var(--saturation-factor, 1) * 64.807%) 54.314%;
  --orange-new-37: hsl(var(--orange-new-37-hsl) / 1);
  --orange-new-37-hsl: 21.961 calc(var(--saturation-factor, 1) * 64.017%) 53.137%;
  --orange-new-38: hsl(var(--orange-new-38-hsl) / 1);
  --orange-new-38-hsl: 22.065 calc(var(--saturation-factor, 1) * 63.265%) 51.961%;
  --orange-new-39: hsl(var(--orange-new-39-hsl) / 1);
  --orange-new-39-hsl: 22.025 calc(var(--saturation-factor, 1) * 63.2%) 50.98%;
  --orange-new-4: hsl(var(--orange-new-4-hsl) / 1);
  --orange-new-4-hsl: 17.143 calc(var(--saturation-factor, 1) * 92.453%) 89.608%;
  --orange-new-40: hsl(var(--orange-new-40-hsl) / 1);
  --orange-new-40-hsl: 22.125 calc(var(--saturation-factor, 1) * 62.992%) 49.804%;
  --orange-new-41: hsl(var(--orange-new-41-hsl) / 1);
  --orange-new-41-hsl: 22.222 calc(var(--saturation-factor, 1) * 65.323%) 48.627%;
  --orange-new-42: hsl(var(--orange-new-42-hsl) / 1);
  --orange-new-42-hsl: 22.317 calc(var(--saturation-factor, 1) * 67.769%) 47.451%;
  --orange-new-43: hsl(var(--orange-new-43-hsl) / 1);
  --orange-new-43-hsl: 22.635 calc(var(--saturation-factor, 1) * 71.064%) 46.078%;
  --orange-new-44: hsl(var(--orange-new-44-hsl) / 1);
  --orange-new-44-hsl: 22.722 calc(var(--saturation-factor, 1) * 73.799%) 44.902%;
  --orange-new-45: hsl(var(--orange-new-45-hsl) / 1);
  --orange-new-45-hsl: 23.023 calc(var(--saturation-factor, 1) * 77.477%) 43.529%;
  --orange-new-46: hsl(var(--orange-new-46-hsl) / 1);
  --orange-new-46-hsl: 23.314 calc(var(--saturation-factor, 1) * 81.395%) 42.157%;
  --orange-new-47: hsl(var(--orange-new-47-hsl) / 1);
  --orange-new-47-hsl: 23.799 calc(var(--saturation-factor, 1) * 86.473%) 40.588%;
  --orange-new-48: hsl(var(--orange-new-48-hsl) / 1);
  --orange-new-48-hsl: 24.457 calc(var(--saturation-factor, 1) * 92.929%) 38.824%;
  --orange-new-49: hsl(var(--orange-new-49-hsl) / 1);
  --orange-new-49-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --orange-new-5: hsl(var(--orange-new-5-hsl) / 1);
  --orange-new-5-hsl: 17.778 calc(var(--saturation-factor, 1) * 93.103%) 88.627%;
  --orange-new-50: hsl(var(--orange-new-50-hsl) / 1);
  --orange-new-50-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --orange-new-51: hsl(var(--orange-new-51-hsl) / 1);
  --orange-new-51-hsl: 25.109 calc(var(--saturation-factor, 1) * 98.925%) 36.471%;
  --orange-new-52: hsl(var(--orange-new-52-hsl) / 1);
  --orange-new-52-hsl: 24.804 calc(var(--saturation-factor, 1) * 97.814%) 35.882%;
  --orange-new-53: hsl(var(--orange-new-53-hsl) / 1);
  --orange-new-53-hsl: 24.828 calc(var(--saturation-factor, 1) * 96.667%) 35.294%;
  --orange-new-54: hsl(var(--orange-new-54-hsl) / 1);
  --orange-new-54-hsl: 24.706 calc(var(--saturation-factor, 1) * 96.591%) 34.51%;
  --orange-new-55: hsl(var(--orange-new-55-hsl) / 1);
  --orange-new-55-hsl: 24.727 calc(var(--saturation-factor, 1) * 95.376%) 33.922%;
  --orange-new-56: hsl(var(--orange-new-56-hsl) / 1);
  --orange-new-56-hsl: 24.596 calc(var(--saturation-factor, 1) * 95.266%) 33.137%;
  --orange-new-57: hsl(var(--orange-new-57-hsl) / 1);
  --orange-new-57-hsl: 24.615 calc(var(--saturation-factor, 1) * 93.976%) 32.549%;
  --orange-new-58: hsl(var(--orange-new-58-hsl) / 1);
  --orange-new-58-hsl: 24.238 calc(var(--saturation-factor, 1) * 92.638%) 31.961%;
  --orange-new-59: hsl(var(--orange-new-59-hsl) / 1);
  --orange-new-59-hsl: 24.49 calc(var(--saturation-factor, 1) * 92.453%) 31.176%;
  --orange-new-6: hsl(var(--orange-new-6-hsl) / 1);
  --orange-new-6-hsl: 18.621 calc(var(--saturation-factor, 1) * 90.625%) 87.451%;
  --orange-new-60: hsl(var(--orange-new-60-hsl) / 1);
  --orange-new-60-hsl: 24.336 calc(var(--saturation-factor, 1) * 92.258%) 30.392%;
  --orange-new-61: hsl(var(--orange-new-61-hsl) / 1);
  --orange-new-61-hsl: 24.348 calc(var(--saturation-factor, 1) * 90.789%) 29.804%;
  --orange-new-62: hsl(var(--orange-new-62-hsl) / 1);
  --orange-new-62-hsl: 24.179 calc(var(--saturation-factor, 1) * 90.541%) 29.02%;
  --orange-new-63: hsl(var(--orange-new-63-hsl) / 1);
  --orange-new-63-hsl: 24.462 calc(var(--saturation-factor, 1) * 90.278%) 28.235%;
  --orange-new-64: hsl(var(--orange-new-64-hsl) / 1);
  --orange-new-64-hsl: 24.286 calc(var(--saturation-factor, 1) * 90%) 27.451%;
  --orange-new-65: hsl(var(--orange-new-65-hsl) / 1);
  --orange-new-65-hsl: 24.098 calc(var(--saturation-factor, 1) * 88.406%) 27.059%;
  --orange-new-66: hsl(var(--orange-new-66-hsl) / 1);
  --orange-new-66-hsl: 23.898 calc(var(--saturation-factor, 1) * 88.06%) 26.275%;
  --orange-new-67: hsl(var(--orange-new-67-hsl) / 1);
  --orange-new-67-hsl: 24.211 calc(var(--saturation-factor, 1) * 87.692%) 25.49%;
  --orange-new-68: hsl(var(--orange-new-68-hsl) / 1);
  --orange-new-68-hsl: 24 calc(var(--saturation-factor, 1) * 87.302%) 24.706%;
  --orange-new-69: hsl(var(--orange-new-69-hsl) / 1);
  --orange-new-69-hsl: 24.112 calc(var(--saturation-factor, 1) * 86.992%) 24.118%;
  --orange-new-7: hsl(var(--orange-new-7-hsl) / 1);
  --orange-new-7-hsl: 19.355 calc(var(--saturation-factor, 1) * 88.571%) 86.275%;
  --orange-new-70: hsl(var(--orange-new-70-hsl) / 1);
  --orange-new-70-hsl: 23.883 calc(var(--saturation-factor, 1) * 86.555%) 23.333%;
  --orange-new-71: hsl(var(--orange-new-71-hsl) / 1);
  --orange-new-71-hsl: 24 calc(var(--saturation-factor, 1) * 86.207%) 22.745%;
  --orange-new-72: hsl(var(--orange-new-72-hsl) / 1);
  --orange-new-72-hsl: 23.75 calc(var(--saturation-factor, 1) * 85.714%) 21.961%;
  --orange-new-73: hsl(var(--orange-new-73-hsl) / 1);
  --orange-new-73-hsl: 24.13 calc(var(--saturation-factor, 1) * 85.185%) 21.176%;
  --orange-new-74: hsl(var(--orange-new-74-hsl) / 1);
  --orange-new-74-hsl: 23.596 calc(var(--saturation-factor, 1) * 84.762%) 20.588%;
  --orange-new-75: hsl(var(--orange-new-75-hsl) / 1);
  --orange-new-75-hsl: 24.419 calc(var(--saturation-factor, 1) * 86%) 19.608%;
  --orange-new-76: hsl(var(--orange-new-76-hsl) / 1);
  --orange-new-76-hsl: 23.855 calc(var(--saturation-factor, 1) * 85.567%) 19.02%;
  --orange-new-77: hsl(var(--orange-new-77-hsl) / 1);
  --orange-new-77-hsl: 24.304 calc(var(--saturation-factor, 1) * 84.946%) 18.235%;
  --orange-new-78: hsl(var(--orange-new-78-hsl) / 1);
  --orange-new-78-hsl: 23.684 calc(var(--saturation-factor, 1) * 84.444%) 17.647%;
  --orange-new-79: hsl(var(--orange-new-79-hsl) / 1);
  --orange-new-79-hsl: 23.836 calc(var(--saturation-factor, 1) * 83.908%) 17.059%;
  --orange-new-8: hsl(var(--orange-new-8-hsl) / 1);
  --orange-new-8-hsl: 19.701 calc(var(--saturation-factor, 1) * 89.333%) 85.294%;
  --orange-new-80: hsl(var(--orange-new-80-hsl) / 1);
  --orange-new-80-hsl: 23.478 calc(var(--saturation-factor, 1) * 83.133%) 16.275%;
  --orange-new-81: hsl(var(--orange-new-81-hsl) / 1);
  --orange-new-81-hsl: 24.179 calc(var(--saturation-factor, 1) * 84.81%) 15.49%;
  --orange-new-82: hsl(var(--orange-new-82-hsl) / 1);
  --orange-new-82-hsl: 23.438 calc(var(--saturation-factor, 1) * 84.211%) 14.902%;
  --orange-new-83: hsl(var(--orange-new-83-hsl) / 1);
  --orange-new-83-hsl: 23.607 calc(var(--saturation-factor, 1) * 83.562%) 14.314%;
  --orange-new-84: hsl(var(--orange-new-84-hsl) / 1);
  --orange-new-84-hsl: 23.158 calc(var(--saturation-factor, 1) * 82.609%) 13.529%;
  --orange-new-85: hsl(var(--orange-new-85-hsl) / 1);
  --orange-new-85-hsl: 24 calc(var(--saturation-factor, 1) * 84.615%) 12.745%;
  --orange-new-86: hsl(var(--orange-new-86-hsl) / 1);
  --orange-new-86-hsl: 24.231 calc(var(--saturation-factor, 1) * 83.871%) 12.157%;
  --orange-new-87: hsl(var(--orange-new-87-hsl) / 1);
  --orange-new-87-hsl: 23.265 calc(var(--saturation-factor, 1) * 83.051%) 11.569%;
  --orange-new-88: hsl(var(--orange-new-88-hsl) / 1);
  --orange-new-88-hsl: 24.255 calc(var(--saturation-factor, 1) * 85.455%) 10.784%;
  --orange-new-89: hsl(var(--orange-new-89-hsl) / 1);
  --orange-new-89-hsl: 23.182 calc(var(--saturation-factor, 1) * 84.615%) 10.196%;
  --orange-new-9: hsl(var(--orange-new-9-hsl) / 1);
  --orange-new-9-hsl: 19.437 calc(var(--saturation-factor, 1) * 87.654%) 84.118%;
  --orange-new-90: hsl(var(--orange-new-90-hsl) / 1);
  --orange-new-90-hsl: 23.415 calc(var(--saturation-factor, 1) * 83.673%) 9.608%;
  --orange-new-91: hsl(var(--orange-new-91-hsl) / 1);
  --orange-new-91-hsl: 22.105 calc(var(--saturation-factor, 1) * 82.609%) 9.02%;
  --orange-new-92: hsl(var(--orange-new-92-hsl) / 1);
  --orange-new-92-hsl: 23.333 calc(var(--saturation-factor, 1) * 85.714%) 8.235%;
  --orange-new-93: hsl(var(--orange-new-93-hsl) / 1);
  --orange-new-93-hsl: 21.818 calc(var(--saturation-factor, 1) * 84.615%) 7.647%;
  --orange-new-94: hsl(var(--orange-new-94-hsl) / 1);
  --orange-new-94-hsl: 20 calc(var(--saturation-factor, 1) * 83.333%) 7.059%;
  --orange-new-95: hsl(var(--orange-new-95-hsl) / 1);
  --orange-new-95-hsl: 22.222 calc(var(--saturation-factor, 1) * 87.097%) 6.078%;
  --orange-new-96: hsl(var(--orange-new-96-hsl) / 1);
  --orange-new-96-hsl: 18.261 calc(var(--saturation-factor, 1) * 85.185%) 5.294%;
  --orange-new-97: hsl(var(--orange-new-97-hsl) / 1);
  --orange-new-97-hsl: 16.667 calc(var(--saturation-factor, 1) * 81.818%) 4.314%;
  --orange-new-98: hsl(var(--orange-new-98-hsl) / 1);
  --orange-new-98-hsl: 17.143 calc(var(--saturation-factor, 1) * 87.5%) 3.137%;
  --orange-new-99: hsl(var(--orange-new-99-hsl) / 1);
  --orange-new-99-hsl: 20 calc(var(--saturation-factor, 1) * 75%) 1.569%;
  --partner: hsl(var(--partner-hsl) / 1);
  --partner-hsl: 215.376 calc(var(--saturation-factor, 1) * 82.775%) 59.02%;
  --paypal: hsl(var(--paypal-hsl) / 1);
  --paypal-hsl: 230.455 calc(var(--saturation-factor, 1) * 69.841%) 24.706%;
  --playstation: hsl(var(--playstation-hsl) / 1);
  --playstation-hsl: 220 calc(var(--saturation-factor, 1) * 95.652%) 27.059%;
  --plum-23-alpha: hsl(var(--plum-23-alpha-hsl) / 0.1);
  --plum-23-alpha-hsl: 240 calc(var(--saturation-factor, 1) * 63.415%) 83.922%;
  --plum-0: hsl(var(--plum-0-hsl) / 1);
  --plum-0-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 97.843%;
  --plum-1: hsl(var(--plum-1-hsl) / 1);
  --plum-1-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 95.49%;
  --plum-10: hsl(var(--plum-10-hsl) / 1);
  --plum-10-hsl: 228.75 calc(var(--saturation-factor, 1) * 6.78%) 53.725%;
  --plum-11: hsl(var(--plum-11-hsl) / 1);
  --plum-11-hsl: 228.75 calc(var(--saturation-factor, 1) * 6.897%) 45.49%;
  --plum-12: hsl(var(--plum-12-hsl) / 1);
  --plum-12-hsl: 228 calc(var(--saturation-factor, 1) * 7.614%) 38.627%;
  --plum-13: hsl(var(--plum-13-hsl) / 1);
  --plum-13-hsl: 227.143 calc(var(--saturation-factor, 1) * 8.333%) 32.941%;
  --plum-14: hsl(var(--plum-14-hsl) / 1);
  --plum-14-hsl: 230 calc(var(--saturation-factor, 1) * 8.451%) 27.843%;
  --plum-15: hsl(var(--plum-15-hsl) / 1);
  --plum-15-hsl: 229.091 calc(var(--saturation-factor, 1) * 8.943%) 24.118%;
  --plum-16: hsl(var(--plum-16-hsl) / 1);
  --plum-16-hsl: 234 calc(var(--saturation-factor, 1) * 9.259%) 21.176%;
  --plum-17: hsl(var(--plum-17-hsl) / 1);
  --plum-17-hsl: 233.333 calc(var(--saturation-factor, 1) * 9.278%) 19.02%;
  --plum-18: hsl(var(--plum-18-hsl) / 1);
  --plum-18-hsl: 233.333 calc(var(--saturation-factor, 1) * 10.588%) 16.667%;
  --plum-19: hsl(var(--plum-19-hsl) / 1);
  --plum-19-hsl: 232.5 calc(var(--saturation-factor, 1) * 10.811%) 14.51%;
  --plum-2: hsl(var(--plum-2-hsl) / 1);
  --plum-2-hsl: 220 calc(var(--saturation-factor, 1) * 8.571%) 93.137%;
  --plum-20: hsl(var(--plum-20-hsl) / 1);
  --plum-20-hsl: 231.429 calc(var(--saturation-factor, 1) * 11.111%) 12.353%;
  --plum-21: hsl(var(--plum-21-hsl) / 1);
  --plum-21-hsl: 231.429 calc(var(--saturation-factor, 1) * 12.727%) 10.784%;
  --plum-22: hsl(var(--plum-22-hsl) / 1);
  --plum-22-hsl: 240 calc(var(--saturation-factor, 1) * 12%) 9.804%;
  --plum-23: hsl(var(--plum-23-hsl) / 1);
  --plum-23-hsl: 240 calc(var(--saturation-factor, 1) * 11.628%) 8.431%;
  --plum-24: hsl(var(--plum-24-hsl) / 1);
  --plum-24-hsl: 228 calc(var(--saturation-factor, 1) * 14.286%) 6.863%;
  --plum-25: hsl(var(--plum-25-hsl) / 1);
  --plum-25-hsl: 240 calc(var(--saturation-factor, 1) * 14.286%) 5.49%;
  --plum-26: hsl(var(--plum-26-hsl) / 1);
  --plum-26-hsl: 240 calc(var(--saturation-factor, 1) * 15.789%) 3.725%;
  --plum-3: hsl(var(--plum-3-hsl) / 1);
  --plum-3-hsl: 225 calc(var(--saturation-factor, 1) * 8%) 90.196%;
  --plum-4: hsl(var(--plum-4-hsl) / 1);
  --plum-4-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 87.451%;
  --plum-5: hsl(var(--plum-5-hsl) / 1);
  --plum-5-hsl: 220 calc(var(--saturation-factor, 1) * 7.317%) 83.922%;
  --plum-6: hsl(var(--plum-6-hsl) / 1);
  --plum-6-hsl: 231.429 calc(var(--saturation-factor, 1) * 6.667%) 79.412%;
  --plum-7: hsl(var(--plum-7-hsl) / 1);
  --plum-7-hsl: 226.667 calc(var(--saturation-factor, 1) * 6.767%) 73.922%;
  --plum-8: hsl(var(--plum-8-hsl) / 1);
  --plum-8-hsl: 230 calc(var(--saturation-factor, 1) * 7.407%) 68.235%;
  --plum-9: hsl(var(--plum-9-hsl) / 1);
  --plum-9-hsl: 231.429 calc(var(--saturation-factor, 1) * 7.071%) 61.176%;
  --premium-nitro-pink-dark: hsl(var(--premium-nitro-pink-dark-hsl) / 1);
  --premium-nitro-pink-dark-hsl: 299.45 calc(var(--saturation-factor, 1) * 43.083%) 50.392%;
  --premium-nitro-pink-light: hsl(var(--premium-nitro-pink-light-hsl) / 1);
  --premium-nitro-pink-light-hsl: 299.333 calc(var(--saturation-factor, 1) * 42.857%) 58.824%;
  --premium-perk-blue: hsl(var(--premium-perk-blue-hsl) / 1);
  --premium-perk-blue-hsl: 222.047 calc(var(--saturation-factor, 1) * 100%) 75.098%;
  --premium-perk-blue-alt: hsl(var(--premium-perk-blue-alt-hsl) / 1);
  --premium-perk-blue-alt-hsl: 223.03 calc(var(--saturation-factor, 1) * 100%) 80.588%;
  --premium-perk-dark-blue: hsl(var(--premium-perk-dark-blue-hsl) / 1);
  --premium-perk-dark-blue-hsl: 220.392 calc(var(--saturation-factor, 1) * 67.401%) 55.49%;
  --premium-perk-gold: hsl(var(--premium-perk-gold-hsl) / 1);
  --premium-perk-gold-hsl: 37.5 calc(var(--saturation-factor, 1) * 95.726%) 54.118%;
  --premium-perk-green: hsl(var(--premium-perk-green-hsl) / 1);
  --premium-perk-green-hsl: 163.953 calc(var(--saturation-factor, 1) * 55.128%) 69.412%;
  --premium-perk-light-blue: hsl(var(--premium-perk-light-blue-hsl) / 1);
  --premium-perk-light-blue-hsl: 221.481 calc(var(--saturation-factor, 1) * 100%) 84.118%;
  --premium-perk-orange: hsl(var(--premium-perk-orange-hsl) / 1);
  --premium-perk-orange-hsl: 25.424 calc(var(--saturation-factor, 1) * 96.721%) 64.118%;
  --premium-perk-pink: hsl(var(--premium-perk-pink-hsl) / 1);
  --premium-perk-pink-hsl: 305.197 calc(var(--saturation-factor, 1) * 100%) 75.098%;
  --premium-perk-purple: hsl(var(--premium-perk-purple-hsl) / 1);
  --premium-perk-purple-hsl: 272.079 calc(var(--saturation-factor, 1) * 100%) 80.196%;
  --premium-perk-yellow: hsl(var(--premium-perk-yellow-hsl) / 1);
  --premium-perk-yellow-hsl: 46.813 calc(var(--saturation-factor, 1) * 98.913%) 63.922%;
  --premium-tier-0-blue: hsl(var(--premium-tier-0-blue-hsl) / 1);
  --premium-tier-0-blue-hsl: 201.649 calc(var(--saturation-factor, 1) * 100%) 38.039%;
  --premium-tier-0-blue-for-gradients: hsl(var(--premium-tier-0-blue-for-gradients-hsl) / 1);
  --premium-tier-0-blue-for-gradients-hsl: 201.649 calc(var(--saturation-factor, 1) * 100%) 38.039%;
  --premium-tier-0-blue-for-gradients-2: hsl(var(--premium-tier-0-blue-for-gradients-2-hsl) / 1);
  --premium-tier-0-blue-for-gradients-2-hsl: 209.022 calc(var(--saturation-factor, 1) * 80%) 45.098%;
  --premium-tier-0-header-gradient-1: hsl(var(--premium-tier-0-header-gradient-1-hsl) / 1);
  --premium-tier-0-header-gradient-1-hsl: 240.451 calc(var(--saturation-factor, 1) * 55.187%) 47.255%;
  --premium-tier-0-header-gradient-2: hsl(var(--premium-tier-0-header-gradient-2-hsl) / 1);
  --premium-tier-0-header-gradient-2-hsl: 224.444 calc(var(--saturation-factor, 1) * 77.885%) 59.216%;
  --premium-tier-0-header-gradient-3: hsl(var(--premium-tier-0-header-gradient-3-hsl) / 1);
  --premium-tier-0-header-gradient-3-hsl: 246.207 calc(var(--saturation-factor, 1) * 74.359%) 69.412%;
  --premium-tier-0-header-gradient-4: hsl(var(--premium-tier-0-header-gradient-4-hsl) / 1);
  --premium-tier-0-header-gradient-4-hsl: 294.595 calc(var(--saturation-factor, 1) * 79.856%) 72.745%;
  --premium-tier-0-header-gradient-5: hsl(var(--premium-tier-0-header-gradient-5-hsl) / 1);
  --premium-tier-0-header-gradient-5-hsl: 336.456 calc(var(--saturation-factor, 1) * 55.245%) 71.961%;
  --premium-tier-0-purple: hsl(var(--premium-tier-0-purple-hsl) / 1);
  --premium-tier-0-purple-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --premium-tier-0-purple-for-gradients: hsl(var(--premium-tier-0-purple-for-gradients-hsl) / 1);
  --premium-tier-0-purple-for-gradients-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --premium-tier-1-blue: hsl(var(--premium-tier-1-blue-hsl) / 1);
  --premium-tier-1-blue-hsl: 227.538 calc(var(--saturation-factor, 1) * 86.667%) 70.588%;
  --premium-tier-1-blue-for-gradients: hsl(var(--premium-tier-1-blue-for-gradients-hsl) / 1);
  --premium-tier-1-blue-for-gradients-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --premium-tier-1-dark-blue-for-gradients: hsl(var(--premium-tier-1-dark-blue-for-gradients-hsl) / 1);
  --premium-tier-1-dark-blue-for-gradients-hsl: 234.909 calc(var(--saturation-factor, 1) * 68.465%) 52.745%;
  --premium-tier-1-purple: hsl(var(--premium-tier-1-purple-hsl) / 1);
  --premium-tier-1-purple-hsl: 243.704 calc(var(--saturation-factor, 1) * 100%) 84.118%;
  --premium-tier-2-pink: hsl(var(--premium-tier-2-pink-hsl) / 1);
  --premium-tier-2-pink-hsl: 342 calc(var(--saturation-factor, 1) * 57.971%) 72.941%;
  --premium-tier-2-pink-for-gradients: hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 1);
  --premium-tier-2-pink-for-gradients-hsl: 325.385 calc(var(--saturation-factor, 1) * 31.707%) 51.765%;
  --premium-tier-2-pink-for-gradients-2: hsl(var(--premium-tier-2-pink-for-gradients-2-hsl) / 1);
  --premium-tier-2-pink-for-gradients-2-hsl: 295.42 calc(var(--saturation-factor, 1) * 51.373%) 50%;
  --premium-tier-2-purple: hsl(var(--premium-tier-2-purple-hsl) / 1);
  --premium-tier-2-purple-hsl: 270 calc(var(--saturation-factor, 1) * 86.667%) 70.588%;
  --premium-tier-2-purple-for-gradients: hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 1);
  --premium-tier-2-purple-for-gradients-hsl: 269.291 calc(var(--saturation-factor, 1) * 52.697%) 52.745%;
  --premium-tier-2-purple-for-gradients-2: hsl(var(--premium-tier-2-purple-for-gradients-2-hsl) / 1);
  --premium-tier-2-purple-for-gradients-2-hsl: 295.645 calc(var(--saturation-factor, 1) * 50%) 51.373%;
  --primary-100: hsl(var(--primary-100-hsl) / 1);
  --primary-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 97.647%;
  --primary-130: hsl(var(--primary-130-hsl) / 1);
  --primary-130-hsl: 220 calc(var(--saturation-factor, 1) * 13.043%) 95.49%;
  --primary-160: hsl(var(--primary-160-hsl) / 1);
  --primary-160-hsl: 210 calc(var(--saturation-factor, 1) * 11.111%) 92.941%;
  --primary-200: hsl(var(--primary-200-hsl) / 1);
  --primary-200-hsl: 216 calc(var(--saturation-factor, 1) * 9.804%) 90%;
  --primary-230: hsl(var(--primary-230-hsl) / 1);
  --primary-230-hsl: 210 calc(var(--saturation-factor, 1) * 9.091%) 87.059%;
  --primary-260: hsl(var(--primary-260-hsl) / 1);
  --primary-260-hsl: 214.286 calc(var(--saturation-factor, 1) * 8.434%) 83.725%;
  --primary-300: hsl(var(--primary-300-hsl) / 1);
  --primary-300-hsl: 210 calc(var(--saturation-factor, 1) * 9.259%) 78.824%;
  --primary-330: hsl(var(--primary-330-hsl) / 1);
  --primary-330-hsl: 215 calc(var(--saturation-factor, 1) * 8.824%) 73.333%;
  --primary-345: hsl(var(--primary-345-hsl) / 1);
  --primary-345-hsl: 214.286 calc(var(--saturation-factor, 1) * 8.434%) 67.451%;
  --primary-360: hsl(var(--primary-360-hsl) / 1);
  --primary-360-hsl: 213.75 calc(var(--saturation-factor, 1) * 8.081%) 61.176%;
  --primary-400: hsl(var(--primary-400-hsl) / 1);
  --primary-400-hsl: 222.857 calc(var(--saturation-factor, 1) * 5.833%) 52.941%;
  --primary-430: hsl(var(--primary-430-hsl) / 1);
  --primary-430-hsl: 229.091 calc(var(--saturation-factor, 1) * 4.803%) 44.902%;
  --primary-460: hsl(var(--primary-460-hsl) / 1);
  --primary-460-hsl: 228 calc(var(--saturation-factor, 1) * 5.155%) 38.039%;
  --primary-500: hsl(var(--primary-500-hsl) / 1);
  --primary-500-hsl: 228 calc(var(--saturation-factor, 1) * 6.024%) 32.549%;
  --primary-530: hsl(var(--primary-530-hsl) / 1);
  --primary-530-hsl: 226.667 calc(var(--saturation-factor, 1) * 6.475%) 27.255%;
  --primary-560: hsl(var(--primary-560-hsl) / 1);
  --primary-560-hsl: 225 calc(var(--saturation-factor, 1) * 6.667%) 23.529%;
  --primary-600: hsl(var(--primary-600-hsl) / 1);
  --primary-600-hsl: 222.857 calc(var(--saturation-factor, 1) * 6.667%) 20.588%;
  --primary-630: hsl(var(--primary-630-hsl) / 1);
  --primary-630-hsl: 220 calc(var(--saturation-factor, 1) * 6.522%) 18.039%;
  --primary-645: hsl(var(--primary-645-hsl) / 1);
  --primary-645-hsl: 220 calc(var(--saturation-factor, 1) * 6.977%) 16.863%;
  --primary-660: hsl(var(--primary-660-hsl) / 1);
  --primary-660-hsl: 228 calc(var(--saturation-factor, 1) * 6.667%) 14.706%;
  --primary-700: hsl(var(--primary-700-hsl) / 1);
  --primary-700-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 12.549%;
  --primary-730: hsl(var(--primary-730-hsl) / 1);
  --primary-730-hsl: 225 calc(var(--saturation-factor, 1) * 7.143%) 10.98%;
  --primary-760: hsl(var(--primary-760-hsl) / 1);
  --primary-760-hsl: 220 calc(var(--saturation-factor, 1) * 6.383%) 9.216%;
  --primary-800: hsl(var(--primary-800-hsl) / 1);
  --primary-800-hsl: 220 calc(var(--saturation-factor, 1) * 8.108%) 7.255%;
  --primary-830: hsl(var(--primary-830-hsl) / 1);
  --primary-830-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 4.902%;
  --primary-860: hsl(var(--primary-860-hsl) / 1);
  --primary-860-hsl: 240 calc(var(--saturation-factor, 1) * 7.692%) 2.549%;
  --primary-900: hsl(var(--primary-900-hsl) / 1);
  --primary-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0.784%;
  --red-100: hsl(var(--red-100-hsl) / 1);
  --red-100-hsl: 350 calc(var(--saturation-factor, 1) * 75%) 98.431%;
  --red-130: hsl(var(--red-130-hsl) / 1);
  --red-130-hsl: 0 calc(var(--saturation-factor, 1) * 83.333%) 97.647%;
  --red-160: hsl(var(--red-160-hsl) / 1);
  --red-160-hsl: 0 calc(var(--saturation-factor, 1) * 90.909%) 95.686%;
  --red-200: hsl(var(--red-200-hsl) / 1);
  --red-200-hsl: 358.125 calc(var(--saturation-factor, 1) * 88.889%) 92.941%;
  --red-230: hsl(var(--red-230-hsl) / 1);
  --red-230-hsl: 358.696 calc(var(--saturation-factor, 1) * 85.185%) 89.412%;
  --red-260: hsl(var(--red-260-hsl) / 1);
  --red-260-hsl: 359.077 calc(var(--saturation-factor, 1) * 89.041%) 85.686%;
  --red-300: hsl(var(--red-300-hsl) / 1);
  --red-300-hsl: 358.588 calc(var(--saturation-factor, 1) * 91.398%) 81.765%;
  --red-330: hsl(var(--red-330-hsl) / 1);
  --red-330-hsl: 358.857 calc(var(--saturation-factor, 1) * 91.304%) 77.451%;
  --red-345: hsl(var(--red-345-hsl) / 1);
  --red-345-hsl: 358.168 calc(var(--saturation-factor, 1) * 92.908%) 72.353%;
  --red-360: hsl(var(--red-360-hsl) / 1);
  --red-360-hsl: 358.471 calc(var(--saturation-factor, 1) * 91.813%) 66.471%;
  --red-400: hsl(var(--red-400-hsl) / 1);
  --red-400-hsl: 358.659 calc(var(--saturation-factor, 1) * 87.317%) 59.804%;
  --red-430: hsl(var(--red-430-hsl) / 1);
  --red-430-hsl: 358.16 calc(var(--saturation-factor, 1) * 68.776%) 53.529%;
  --red-460: hsl(var(--red-460-hsl) / 1);
  --red-460-hsl: 358.705 calc(var(--saturation-factor, 1) * 59.149%) 46.078%;
  --red-500: hsl(var(--red-500-hsl) / 1);
  --red-500-hsl: 359.504 calc(var(--saturation-factor, 1) * 60.199%) 39.412%;
  --red-530: hsl(var(--red-530-hsl) / 1);
  --red-530-hsl: 358.919 calc(var(--saturation-factor, 1) * 63.429%) 34.314%;
  --red-560: hsl(var(--red-560-hsl) / 1);
  --red-560-hsl: 358.788 calc(var(--saturation-factor, 1) * 63.871%) 30.392%;
  --red-600: hsl(var(--red-600-hsl) / 1);
  --red-600-hsl: 358.636 calc(var(--saturation-factor, 1) * 64.706%) 26.667%;
  --red-630: hsl(var(--red-630-hsl) / 1);
  --red-630-hsl: 358.5 calc(var(--saturation-factor, 1) * 65.574%) 23.922%;
  --red-660: hsl(var(--red-660-hsl) / 1);
  --red-660-hsl: 359.155 calc(var(--saturation-factor, 1) * 65.138%) 21.373%;
  --red-700: hsl(var(--red-700-hsl) / 1);
  --red-700-hsl: 358.125 calc(var(--saturation-factor, 1) * 66.667%) 18.824%;
  --red-730: hsl(var(--red-730-hsl) / 1);
  --red-730-hsl: 358.929 calc(var(--saturation-factor, 1) * 66.667%) 16.471%;
  --red-760: hsl(var(--red-760-hsl) / 1);
  --red-760-hsl: 358.846 calc(var(--saturation-factor, 1) * 70.27%) 14.51%;
  --red-800: hsl(var(--red-800-hsl) / 1);
  --red-800-hsl: 358.636 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
  --red-830: hsl(var(--red-830-hsl) / 1);
  --red-830-hsl: 358.378 calc(var(--saturation-factor, 1) * 67.273%) 10.784%;
  --red-860: hsl(var(--red-860-hsl) / 1);
  --red-860-hsl: 0 calc(var(--saturation-factor, 1) * 66.667%) 9.412%;
  --red-900: hsl(var(--red-900-hsl) / 1);
  --red-900-hsl: 0 calc(var(--saturation-factor, 1) * 70%) 7.843%;
  --red-new-1: hsl(var(--red-new-1-hsl) / 1);
  --red-new-1-hsl: 0 calc(var(--saturation-factor, 1) * 100%) 93.725%;
  --red-new-10: hsl(var(--red-new-10-hsl) / 1);
  --red-new-10-hsl: 2.647 calc(var(--saturation-factor, 1) * 100%) 86.667%;
  --red-new-100: hsl(var(--red-new-100-hsl) / 1);
  --red-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --red-new-11: hsl(var(--red-new-11-hsl) / 1);
  --red-new-11-hsl: 3.333 calc(var(--saturation-factor, 1) * 100%) 85.882%;
  --red-new-12: hsl(var(--red-new-12-hsl) / 1);
  --red-new-12-hsl: 3.158 calc(var(--saturation-factor, 1) * 100%) 85.098%;
  --red-new-13: hsl(var(--red-new-13-hsl) / 1);
  --red-new-13-hsl: 3 calc(var(--saturation-factor, 1) * 100%) 84.314%;
  --red-new-14: hsl(var(--red-new-14-hsl) / 1);
  --red-new-14-hsl: 2.892 calc(var(--saturation-factor, 1) * 100%) 83.725%;
  --red-new-15: hsl(var(--red-new-15-hsl) / 1);
  --red-new-15-hsl: 2.759 calc(var(--saturation-factor, 1) * 100%) 82.941%;
  --red-new-16: hsl(var(--red-new-16-hsl) / 1);
  --red-new-16-hsl: 3.297 calc(var(--saturation-factor, 1) * 100%) 82.157%;
  --red-new-17: hsl(var(--red-new-17-hsl) / 1);
  --red-new-17-hsl: 2.553 calc(var(--saturation-factor, 1) * 100%) 81.569%;
  --red-new-18: hsl(var(--red-new-18-hsl) / 1);
  --red-new-18-hsl: 3.093 calc(var(--saturation-factor, 1) * 97.98%) 80.588%;
  --red-new-19: hsl(var(--red-new-19-hsl) / 1);
  --red-new-19-hsl: 2.97 calc(var(--saturation-factor, 1) * 98.058%) 79.804%;
  --red-new-2: hsl(var(--red-new-2-hsl) / 1);
  --red-new-2-hsl: 1.667 calc(var(--saturation-factor, 1) * 100%) 92.941%;
  --red-new-20: hsl(var(--red-new-20-hsl) / 1);
  --red-new-20-hsl: 2.33 calc(var(--saturation-factor, 1) * 96.262%) 79.02%;
  --red-new-21: hsl(var(--red-new-21-hsl) / 1);
  --red-new-21-hsl: 2.83 calc(var(--saturation-factor, 1) * 94.643%) 78.039%;
  --red-new-22: hsl(var(--red-new-22-hsl) / 1);
  --red-new-22-hsl: 2.222 calc(var(--saturation-factor, 1) * 93.103%) 77.255%;
  --red-new-23: hsl(var(--red-new-23-hsl) / 1);
  --red-new-23-hsl: 2.703 calc(var(--saturation-factor, 1) * 91.736%) 76.275%;
  --red-new-24: hsl(var(--red-new-24-hsl) / 1);
  --red-new-24-hsl: 2.124 calc(var(--saturation-factor, 1) * 90.4%) 75.49%;
  --red-new-25: hsl(var(--red-new-25-hsl) / 1);
  --red-new-25-hsl: 2.069 calc(var(--saturation-factor, 1) * 89.231%) 74.51%;
  --red-new-26: hsl(var(--red-new-26-hsl) / 1);
  --red-new-26-hsl: 2.034 calc(var(--saturation-factor, 1) * 88.06%) 73.725%;
  --red-new-27: hsl(var(--red-new-27-hsl) / 1);
  --red-new-27-hsl: 1.983 calc(var(--saturation-factor, 1) * 87.05%) 72.745%;
  --red-new-28: hsl(var(--red-new-28-hsl) / 1);
  --red-new-28-hsl: 1.951 calc(var(--saturation-factor, 1) * 86.014%) 71.961%;
  --red-new-29: hsl(var(--red-new-29-hsl) / 1);
  --red-new-29-hsl: 1.44 calc(var(--saturation-factor, 1) * 85.034%) 71.176%;
  --red-new-3: hsl(var(--red-new-3-hsl) / 1);
  --red-new-3-hsl: 1.5 calc(var(--saturation-factor, 1) * 100%) 92.157%;
  --red-new-30: hsl(var(--red-new-30-hsl) / 1);
  --red-new-30-hsl: 1.875 calc(var(--saturation-factor, 1) * 84.211%) 70.196%;
  --red-new-31: hsl(var(--red-new-31-hsl) / 1);
  --red-new-31-hsl: 1.395 calc(var(--saturation-factor, 1) * 82.166%) 69.216%;
  --red-new-32: hsl(var(--red-new-32-hsl) / 1);
  --red-new-32-hsl: 0.916 calc(var(--saturation-factor, 1) * 81.366%) 68.431%;
  --red-new-33: hsl(var(--red-new-33-hsl) / 1);
  --red-new-33-hsl: 1.343 calc(var(--saturation-factor, 1) * 80.723%) 67.451%;
  --red-new-34: hsl(var(--red-new-34-hsl) / 1);
  --red-new-34-hsl: 0.889 calc(var(--saturation-factor, 1) * 78.947%) 66.471%;
  --red-new-35: hsl(var(--red-new-35-hsl) / 1);
  --red-new-35-hsl: 0.876 calc(var(--saturation-factor, 1) * 78.286%) 65.686%;
  --red-new-36: hsl(var(--red-new-36-hsl) / 1);
  --red-new-36-hsl: 0.435 calc(var(--saturation-factor, 1) * 76.667%) 64.706%;
  --red-new-37: hsl(var(--red-new-37-hsl) / 1);
  --red-new-37-hsl: 0 calc(var(--saturation-factor, 1) * 75.135%) 63.725%;
  --red-new-38: hsl(var(--red-new-38-hsl) / 1);
  --red-new-38-hsl: 0 calc(var(--saturation-factor, 1) * 74.603%) 62.941%;
  --red-new-39: hsl(var(--red-new-39-hsl) / 1);
  --red-new-39-hsl: 359.58 calc(var(--saturation-factor, 1) * 73.333%) 61.765%;
  --red-new-4: hsl(var(--red-new-4-hsl) / 1);
  --red-new-4-hsl: 1.364 calc(var(--saturation-factor, 1) * 100%) 91.373%;
  --red-new-40: hsl(var(--red-new-40-hsl) / 1);
  --red-new-40-hsl: 359.586 calc(var(--saturation-factor, 1) * 72.139%) 60.588%;
  --red-new-41: hsl(var(--red-new-41-hsl) / 1);
  --red-new-41-hsl: 359.189 calc(var(--saturation-factor, 1) * 71.845%) 59.608%;
  --red-new-42: hsl(var(--red-new-42-hsl) / 1);
  --red-new-42-hsl: 358.8 calc(var(--saturation-factor, 1) * 70.755%) 58.431%;
  --red-new-43: hsl(var(--red-new-43-hsl) / 1);
  --red-new-43-hsl: 358.808 calc(var(--saturation-factor, 1) * 69.585%) 57.451%;
  --red-new-44: hsl(var(--red-new-44-hsl) / 1);
  --red-new-44-hsl: 358.431 calc(var(--saturation-factor, 1) * 68.61%) 56.275%;
  --red-new-45: hsl(var(--red-new-45-hsl) / 1);
  --red-new-45-hsl: 357.677 calc(var(--saturation-factor, 1) * 67.686%) 55.098%;
  --red-new-46: hsl(var(--red-new-46-hsl) / 1);
  --red-new-46-hsl: 356.962 calc(var(--saturation-factor, 1) * 66.949%) 53.725%;
  --red-new-47: hsl(var(--red-new-47-hsl) / 1);
  --red-new-47-hsl: 356.625 calc(var(--saturation-factor, 1) * 66.116%) 52.549%;
  --red-new-48: hsl(var(--red-new-48-hsl) / 1);
  --red-new-48-hsl: 356.296 calc(var(--saturation-factor, 1) * 65.323%) 51.373%;
  --red-new-49: hsl(var(--red-new-49-hsl) / 1);
  --red-new-49-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --red-new-5: hsl(var(--red-new-5-hsl) / 1);
  --red-new-5-hsl: 2.5 calc(var(--saturation-factor, 1) * 100%) 90.588%;
  --red-new-50: hsl(var(--red-new-50-hsl) / 1);
  --red-new-50-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --red-new-51: hsl(var(--red-new-51-hsl) / 1);
  --red-new-51-hsl: 355.875 calc(var(--saturation-factor, 1) * 64%) 49.02%;
  --red-new-52: hsl(var(--red-new-52-hsl) / 1);
  --red-new-52-hsl: 355.796 calc(var(--saturation-factor, 1) * 64.082%) 48.039%;
  --red-new-53: hsl(var(--red-new-53-hsl) / 1);
  --red-new-53-hsl: 356.053 calc(var(--saturation-factor, 1) * 63.333%) 47.059%;
  --red-new-54: hsl(var(--red-new-54-hsl) / 1);
  --red-new-54-hsl: 355.973 calc(var(--saturation-factor, 1) * 63.404%) 46.078%;
  --red-new-55: hsl(var(--red-new-55-hsl) / 1);
  --red-new-55-hsl: 356.25 calc(var(--saturation-factor, 1) * 62.609%) 45.098%;
  --red-new-56: hsl(var(--red-new-56-hsl) / 1);
  --red-new-56-hsl: 356.17 calc(var(--saturation-factor, 1) * 62.667%) 44.118%;
  --red-new-57: hsl(var(--red-new-57-hsl) / 1);
  --red-new-57-hsl: 356.934 calc(var(--saturation-factor, 1) * 61.991%) 43.333%;
  --red-new-58: hsl(var(--red-new-58-hsl) / 1);
  --red-new-58-hsl: 356.842 calc(var(--saturation-factor, 1) * 61.86%) 42.157%;
  --red-new-59: hsl(var(--red-new-59-hsl) / 1);
  --red-new-59-hsl: 357.209 calc(var(--saturation-factor, 1) * 61.137%) 41.373%;
  --red-new-6: hsl(var(--red-new-6-hsl) / 1);
  --red-new-6-hsl: 2.308 calc(var(--saturation-factor, 1) * 100%) 89.804%;
  --red-new-60: hsl(var(--red-new-60-hsl) / 1);
  --red-new-60-hsl: 357.143 calc(var(--saturation-factor, 1) * 61.165%) 40.392%;
  --red-new-61: hsl(var(--red-new-61-hsl) / 1);
  --red-new-61-hsl: 357.049 calc(var(--saturation-factor, 1) * 61%) 39.216%;
  --red-new-62: hsl(var(--red-new-62-hsl) / 1);
  --red-new-62-hsl: 357.458 calc(var(--saturation-factor, 1) * 60.204%) 38.431%;
  --red-new-63: hsl(var(--red-new-63-hsl) / 1);
  --red-new-63-hsl: 357.391 calc(var(--saturation-factor, 1) * 60.209%) 37.451%;
  --red-new-64: hsl(var(--red-new-64-hsl) / 1);
  --red-new-64-hsl: 357.321 calc(var(--saturation-factor, 1) * 60.215%) 36.471%;
  --red-new-65: hsl(var(--red-new-65-hsl) / 1);
  --red-new-65-hsl: 357.757 calc(var(--saturation-factor, 1) * 59.116%) 35.49%;
  --red-new-66: hsl(var(--red-new-66-hsl) / 1);
  --red-new-66-hsl: 357.692 calc(var(--saturation-factor, 1) * 59.091%) 34.51%;
  --red-new-67: hsl(var(--red-new-67-hsl) / 1);
  --red-new-67-hsl: 358.218 calc(var(--saturation-factor, 1) * 59.064%) 33.529%;
  --red-new-68: hsl(var(--red-new-68-hsl) / 1);
  --red-new-68-hsl: 358.163 calc(var(--saturation-factor, 1) * 59.036%) 32.549%;
  --red-new-69: hsl(var(--red-new-69-hsl) / 1);
  --red-new-69-hsl: 358.723 calc(var(--saturation-factor, 1) * 58.025%) 31.765%;
  --red-new-7: hsl(var(--red-new-7-hsl) / 1);
  --red-new-7-hsl: 2.143 calc(var(--saturation-factor, 1) * 100%) 89.02%;
  --red-new-70: hsl(var(--red-new-70-hsl) / 1);
  --red-new-70-hsl: 358.681 calc(var(--saturation-factor, 1) * 57.962%) 30.784%;
  --red-new-71: hsl(var(--red-new-71-hsl) / 1);
  --red-new-71-hsl: 358.636 calc(var(--saturation-factor, 1) * 57.895%) 29.804%;
  --red-new-72: hsl(var(--red-new-72-hsl) / 1);
  --red-new-72-hsl: 358.588 calc(var(--saturation-factor, 1) * 57.823%) 28.824%;
  --red-new-73: hsl(var(--red-new-73-hsl) / 1);
  --red-new-73-hsl: 358.537 calc(var(--saturation-factor, 1) * 57.746%) 27.843%;
  --red-new-74: hsl(var(--red-new-74-hsl) / 1);
  --red-new-74-hsl: 358.481 calc(var(--saturation-factor, 1) * 57.664%) 26.863%;
  --red-new-75: hsl(var(--red-new-75-hsl) / 1);
  --red-new-75-hsl: 358.421 calc(var(--saturation-factor, 1) * 57.576%) 25.882%;
  --red-new-76: hsl(var(--red-new-76-hsl) / 1);
  --red-new-76-hsl: 359.178 calc(var(--saturation-factor, 1) * 56.589%) 25.294%;
  --red-new-77: hsl(var(--red-new-77-hsl) / 1);
  --red-new-77-hsl: 0 calc(var(--saturation-factor, 1) * 56.452%) 24.314%;
  --red-new-78: hsl(var(--red-new-78-hsl) / 1);
  --red-new-78-hsl: 0 calc(var(--saturation-factor, 1) * 56.303%) 23.333%;
  --red-new-79: hsl(var(--red-new-79-hsl) / 1);
  --red-new-79-hsl: 0 calc(var(--saturation-factor, 1) * 56.14%) 22.353%;
  --red-new-8: hsl(var(--red-new-8-hsl) / 1);
  --red-new-8-hsl: 3 calc(var(--saturation-factor, 1) * 100%) 88.235%;
  --red-new-80: hsl(var(--red-new-80-hsl) / 1);
  --red-new-80-hsl: 0 calc(var(--saturation-factor, 1) * 56.364%) 21.569%;
  --red-new-81: hsl(var(--red-new-81-hsl) / 1);
  --red-new-81-hsl: 0 calc(var(--saturation-factor, 1) * 56.19%) 20.588%;
  --red-new-82: hsl(var(--red-new-82-hsl) / 1);
  --red-new-82-hsl: 0 calc(var(--saturation-factor, 1) * 56%) 19.608%;
  --red-new-83: hsl(var(--red-new-83-hsl) / 1);
  --red-new-83-hsl: 0 calc(var(--saturation-factor, 1) * 56.25%) 18.824%;
  --red-new-84: hsl(var(--red-new-84-hsl) / 1);
  --red-new-84-hsl: 0 calc(var(--saturation-factor, 1) * 56.044%) 17.843%;
  --red-new-85: hsl(var(--red-new-85-hsl) / 1);
  --red-new-85-hsl: 1.2 calc(var(--saturation-factor, 1) * 58.14%) 16.863%;
  --red-new-86: hsl(var(--red-new-86-hsl) / 1);
  --red-new-86-hsl: 1.277 calc(var(--saturation-factor, 1) * 58.025%) 15.882%;
  --red-new-87: hsl(var(--red-new-87-hsl) / 1);
  --red-new-87-hsl: 1.333 calc(var(--saturation-factor, 1) * 58.442%) 15.098%;
  --red-new-88: hsl(var(--red-new-88-hsl) / 1);
  --red-new-88-hsl: 1.395 calc(var(--saturation-factor, 1) * 58.904%) 14.314%;
  --red-new-89: hsl(var(--red-new-89-hsl) / 1);
  --red-new-89-hsl: 1.5 calc(var(--saturation-factor, 1) * 58.824%) 13.333%;
  --red-new-9: hsl(var(--red-new-9-hsl) / 1);
  --red-new-9-hsl: 2.812 calc(var(--saturation-factor, 1) * 100%) 87.451%;
  --red-new-90: hsl(var(--red-new-90-hsl) / 1);
  --red-new-90-hsl: 1.579 calc(var(--saturation-factor, 1) * 59.375%) 12.549%;
  --red-new-91: hsl(var(--red-new-91-hsl) / 1);
  --red-new-91-hsl: 1.667 calc(var(--saturation-factor, 1) * 60%) 11.765%;
  --red-new-92: hsl(var(--red-new-92-hsl) / 1);
  --red-new-92-hsl: 0 calc(var(--saturation-factor, 1) * 60.714%) 10.98%;
  --red-new-93: hsl(var(--red-new-93-hsl) / 1);
  --red-new-93-hsl: 1.875 calc(var(--saturation-factor, 1) * 64%) 9.804%;
  --red-new-94: hsl(var(--red-new-94-hsl) / 1);
  --red-new-94-hsl: 2.069 calc(var(--saturation-factor, 1) * 64.444%) 8.824%;
  --red-new-95: hsl(var(--red-new-95-hsl) / 1);
  --red-new-95-hsl: 2.308 calc(var(--saturation-factor, 1) * 65%) 7.843%;
  --red-new-96: hsl(var(--red-new-96-hsl) / 1);
  --red-new-96-hsl: 0 calc(var(--saturation-factor, 1) * 65.714%) 6.863%;
  --red-new-97: hsl(var(--red-new-97-hsl) / 1);
  --red-new-97-hsl: 3 calc(var(--saturation-factor, 1) * 71.429%) 5.49%;
  --red-new-98: hsl(var(--red-new-98-hsl) / 1);
  --red-new-98-hsl: 0 calc(var(--saturation-factor, 1) * 71.429%) 4.118%;
  --red-new-99: hsl(var(--red-new-99-hsl) / 1);
  --red-new-99-hsl: 0 calc(var(--saturation-factor, 1) * 63.636%) 2.157%;
  --reddit: hsl(var(--reddit-hsl) / 1);
  --reddit-hsl: 16.235 calc(var(--saturation-factor, 1) * 100%) 50%;
  --riot-games: hsl(var(--riot-games-hsl) / 1);
  --riot-games-hsl: 349.487 calc(var(--saturation-factor, 1) * 100%) 45.882%;
  --role-blue: hsl(var(--role-blue-hsl) / 1);
  --role-blue-hsl: 203.793 calc(var(--saturation-factor, 1) * 64.444%) 35.294%;
  --role-brown: hsl(var(--role-brown-hsl) / 1);
  --role-brown-hsl: 23.929 calc(var(--saturation-factor, 1) * 100%) 32.941%;
  --role-burgundy: hsl(var(--role-burgundy-hsl) / 1);
  --role-burgundy-hsl: 333.725 calc(var(--saturation-factor, 1) * 79.275%) 37.843%;
  --role-dark-blue: hsl(var(--role-dark-blue-hsl) / 1);
  --role-dark-blue-hsl: 198.947 calc(var(--saturation-factor, 1) * 18.447%) 40.392%;
  --role-dark-grey: hsl(var(--role-dark-grey-hsl) / 1);
  --role-dark-grey-hsl: 199.535 calc(var(--saturation-factor, 1) * 18.298%) 46.078%;
  --role-dark-purple: hsl(var(--role-dark-purple-hsl) / 1);
  --role-dark-purple-hsl: 282.143 calc(var(--saturation-factor, 1) * 43.75%) 37.647%;
  --role-dark-teal: hsl(var(--role-dark-teal-hsl) / 1);
  --role-dark-teal-hsl: 168.108 calc(var(--saturation-factor, 1) * 76.552%) 28.431%;
  --role-default: hsl(var(--role-default-hsl) / 1);
  --role-default-hsl: 203.571 calc(var(--saturation-factor, 1) * 15.909%) 65.49%;
  --role-green: hsl(var(--role-green-hsl) / 1);
  --role-green-hsl: 145 calc(var(--saturation-factor, 1) * 63.529%) 33.333%;
  --role-grey: hsl(var(--role-grey-hsl) / 1);
  --role-grey-hsl: 202.5 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --role-light-blue: hsl(var(--role-light-blue-hsl) / 1);
  --role-light-blue-hsl: 203.571 calc(var(--saturation-factor, 1) * 15.909%) 65.49%;
  --role-light-green: hsl(var(--role-light-green-hsl) / 1);
  --role-light-green-hsl: 145.443 calc(var(--saturation-factor, 1) * 63.2%) 49.02%;
  --role-light-grey: hsl(var(--role-light-grey-hsl) / 1);
  --role-light-grey-hsl: 183.529 calc(var(--saturation-factor, 1) * 8.718%) 61.765%;
  --role-magenta: hsl(var(--role-magenta-hsl) / 1);
  --role-magenta-hsl: 339.606 calc(var(--saturation-factor, 1) * 82.186%) 51.569%;
  --role-orange: hsl(var(--role-orange-hsl) / 1);
  --role-orange-hsl: 28.163 calc(var(--saturation-factor, 1) * 79.675%) 51.765%;
  --role-purple: hsl(var(--role-purple-hsl) / 1);
  --role-purple-hsl: 282.581 calc(var(--saturation-factor, 1) * 38.912%) 53.137%;
  --role-salmon: hsl(var(--role-salmon-hsl) / 1);
  --role-salmon-hsl: 5.614 calc(var(--saturation-factor, 1) * 78.082%) 57.059%;
  --role-sky-blue: hsl(var(--role-sky-blue-hsl) / 1);
  --role-sky-blue-hsl: 204.072 calc(var(--saturation-factor, 1) * 69.874%) 53.137%;
  --role-tan: hsl(var(--role-tan-hsl) / 1);
  --role-tan-hsl: 36.667 calc(var(--saturation-factor, 1) * 86.538%) 40.784%;
  --role-teal: hsl(var(--role-teal-hsl) / 1);
  --role-teal-hsl: 168.148 calc(var(--saturation-factor, 1) * 75.701%) 41.961%;
  --role-terracotta: hsl(var(--role-terracotta-hsl) / 1);
  --role-terracotta-hsl: 5.546 calc(var(--saturation-factor, 1) * 63.636%) 36.667%;
  --role-yellow: hsl(var(--role-yellow-hsl) / 1);
  --role-yellow-hsl: 48.053 calc(var(--saturation-factor, 1) * 88.976%) 50.196%;
  --samsung: hsl(var(--samsung-hsl) / 1);
  --samsung-hsl: 231 calc(var(--saturation-factor, 1) * 77.778%) 35.294%;
  --skype: hsl(var(--skype-hsl) / 1);
  --skype-hsl: 196.186 calc(var(--saturation-factor, 1) * 100%) 42.157%;
  --spotify: hsl(var(--spotify-hsl) / 1);
  --spotify-hsl: 141.154 calc(var(--saturation-factor, 1) * 72.897%) 41.961%;
  --steam: hsl(var(--steam-hsl) / 1);
  --steam-hsl: 214.615 calc(var(--saturation-factor, 1) * 35.135%) 14.51%;
  --teal-100: hsl(var(--teal-100-hsl) / 1);
  --teal-100-hsl: 193.333 calc(var(--saturation-factor, 1) * 69.231%) 97.451%;
  --teal-130: hsl(var(--teal-130-hsl) / 1);
  --teal-130-hsl: 192 calc(var(--saturation-factor, 1) * 83.333%) 95.294%;
  --teal-160: hsl(var(--teal-160-hsl) / 1);
  --teal-160-hsl: 190.5 calc(var(--saturation-factor, 1) * 83.333%) 90.588%;
  --teal-200: hsl(var(--teal-200-hsl) / 1);
  --teal-200-hsl: 188.333 calc(var(--saturation-factor, 1) * 85.714%) 83.529%;
  --teal-230: hsl(var(--teal-230-hsl) / 1);
  --teal-230-hsl: 187.934 calc(var(--saturation-factor, 1) * 88.321%) 73.137%;
  --teal-260: hsl(var(--teal-260-hsl) / 1);
  --teal-260-hsl: 188.276 calc(var(--saturation-factor, 1) * 81.921%) 65.294%;
  --teal-300: hsl(var(--teal-300-hsl) / 1);
  --teal-300-hsl: 188.903 calc(var(--saturation-factor, 1) * 72.77%) 58.235%;
  --teal-330: hsl(var(--teal-330-hsl) / 1);
  --teal-330-hsl: 189.375 calc(var(--saturation-factor, 1) * 65.574%) 52.157%;
  --teal-345: hsl(var(--teal-345-hsl) / 1);
  --teal-345-hsl: 189.677 calc(var(--saturation-factor, 1) * 62.753%) 48.431%;
  --teal-360: hsl(var(--teal-360-hsl) / 1);
  --teal-360-hsl: 189.718 calc(var(--saturation-factor, 1) * 63.964%) 43.529%;
  --teal-400: hsl(var(--teal-400-hsl) / 1);
  --teal-400-hsl: 189.6 calc(var(--saturation-factor, 1) * 63.452%) 38.627%;
  --teal-430: hsl(var(--teal-430-hsl) / 1);
  --teal-430-hsl: 190.459 calc(var(--saturation-factor, 1) * 63.006%) 33.922%;
  --teal-460: hsl(var(--teal-460-hsl) / 1);
  --teal-460-hsl: 190.515 calc(var(--saturation-factor, 1) * 64.238%) 29.608%;
  --teal-500: hsl(var(--teal-500-hsl) / 1);
  --teal-500-hsl: 190.465 calc(var(--saturation-factor, 1) * 65.152%) 25.882%;
  --teal-530: hsl(var(--teal-530-hsl) / 1);
  --teal-530-hsl: 190.263 calc(var(--saturation-factor, 1) * 66.667%) 22.353%;
  --teal-560: hsl(var(--teal-560-hsl) / 1);
  --teal-560-hsl: 189.565 calc(var(--saturation-factor, 1) * 69.697%) 19.412%;
  --teal-600: hsl(var(--teal-600-hsl) / 1);
  --teal-600-hsl: 188.852 calc(var(--saturation-factor, 1) * 71.765%) 16.667%;
  --teal-630: hsl(var(--teal-630-hsl) / 1);
  --teal-630-hsl: 189.643 calc(var(--saturation-factor, 1) * 73.684%) 14.902%;
  --teal-660: hsl(var(--teal-660-hsl) / 1);
  --teal-660-hsl: 188.4 calc(var(--saturation-factor, 1) * 75.758%) 12.941%;
  --teal-700: hsl(var(--teal-700-hsl) / 1);
  --teal-700-hsl: 189.13 calc(var(--saturation-factor, 1) * 79.31%) 11.373%;
  --teal-730: hsl(var(--teal-730-hsl) / 1);
  --teal-730-hsl: 189 calc(var(--saturation-factor, 1) * 80%) 9.804%;
  --teal-760: hsl(var(--teal-760-hsl) / 1);
  --teal-760-hsl: 188.571 calc(var(--saturation-factor, 1) * 81.395%) 8.431%;
  --teal-800: hsl(var(--teal-800-hsl) / 1);
  --teal-800-hsl: 188 calc(var(--saturation-factor, 1) * 83.333%) 7.059%;
  --teal-830: hsl(var(--teal-830-hsl) / 1);
  --teal-830-hsl: 188.889 calc(var(--saturation-factor, 1) * 87.097%) 6.078%;
  --teal-860: hsl(var(--teal-860-hsl) / 1);
  --teal-860-hsl: 187.826 calc(var(--saturation-factor, 1) * 85.185%) 5.294%;
  --teal-900: hsl(var(--teal-900-hsl) / 1);
  --teal-900-hsl: 189 calc(var(--saturation-factor, 1) * 90.909%) 4.314%;
  --teal-new-1: hsl(var(--teal-new-1-hsl) / 1);
  --teal-new-1-hsl: 186 calc(var(--saturation-factor, 1) * 100%) 90.196%;
  --teal-new-10: hsl(var(--teal-new-10-hsl) / 1);
  --teal-new-10-hsl: 185.806 calc(var(--saturation-factor, 1) * 58.491%) 79.216%;
  --teal-new-100: hsl(var(--teal-new-100-hsl) / 1);
  --teal-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --teal-new-11: hsl(var(--teal-new-11-hsl) / 1);
  --teal-new-11-hsl: 185.806 calc(var(--saturation-factor, 1) * 55.357%) 78.039%;
  --teal-new-12: hsl(var(--teal-new-12-hsl) / 1);
  --teal-new-12-hsl: 185.625 calc(var(--saturation-factor, 1) * 54.237%) 76.863%;
  --teal-new-13: hsl(var(--teal-new-13-hsl) / 1);
  --teal-new-13-hsl: 185.538 calc(var(--saturation-factor, 1) * 52%) 75.49%;
  --teal-new-14: hsl(var(--teal-new-14-hsl) / 1);
  --teal-new-14-hsl: 186.364 calc(var(--saturation-factor, 1) * 50.769%) 74.51%;
  --teal-new-15: hsl(var(--teal-new-15-hsl) / 1);
  --teal-new-15-hsl: 185.373 calc(var(--saturation-factor, 1) * 48.905%) 73.137%;
  --teal-new-16: hsl(var(--teal-new-16-hsl) / 1);
  --teal-new-16-hsl: 186.087 calc(var(--saturation-factor, 1) * 48.252%) 71.961%;
  --teal-new-17: hsl(var(--teal-new-17-hsl) / 1);
  --teal-new-17-hsl: 185.217 calc(var(--saturation-factor, 1) * 46.309%) 70.784%;
  --teal-new-18: hsl(var(--teal-new-18-hsl) / 1);
  --teal-new-18-hsl: 185.915 calc(var(--saturation-factor, 1) * 45.806%) 69.608%;
  --teal-new-19: hsl(var(--teal-new-19-hsl) / 1);
  --teal-new-19-hsl: 185.07 calc(var(--saturation-factor, 1) * 44.099%) 68.431%;
  --teal-new-2: hsl(var(--teal-new-2-hsl) / 1);
  --teal-new-2-hsl: 186.923 calc(var(--saturation-factor, 1) * 92.857%) 89.02%;
  --teal-new-20: hsl(var(--teal-new-20-hsl) / 1);
  --teal-new-20-hsl: 185.753 calc(var(--saturation-factor, 1) * 43.713%) 67.255%;
  --teal-new-21: hsl(var(--teal-new-21-hsl) / 1);
  --teal-new-21-hsl: 185.6 calc(var(--saturation-factor, 1) * 43.353%) 66.078%;
  --teal-new-22: hsl(var(--teal-new-22-hsl) / 1);
  --teal-new-22-hsl: 185.6 calc(var(--saturation-factor, 1) * 41.899%) 64.902%;
  --teal-new-23: hsl(var(--teal-new-23-hsl) / 1);
  --teal-new-23-hsl: 185.455 calc(var(--saturation-factor, 1) * 41.622%) 63.725%;
  --teal-new-24: hsl(var(--teal-new-24-hsl) / 1);
  --teal-new-24-hsl: 185.385 calc(var(--saturation-factor, 1) * 40.625%) 62.353%;
  --teal-new-25: hsl(var(--teal-new-25-hsl) / 1);
  --teal-new-25-hsl: 186.076 calc(var(--saturation-factor, 1) * 40.102%) 61.373%;
  --teal-new-26: hsl(var(--teal-new-26-hsl) / 1);
  --teal-new-26-hsl: 185.25 calc(var(--saturation-factor, 1) * 39.216%) 60%;
  --teal-new-27: hsl(var(--teal-new-27-hsl) / 1);
  --teal-new-27-hsl: 185.854 calc(var(--saturation-factor, 1) * 39.048%) 58.824%;
  --teal-new-28: hsl(var(--teal-new-28-hsl) / 1);
  --teal-new-28-hsl: 185.122 calc(var(--saturation-factor, 1) * 37.963%) 57.647%;
  --teal-new-29: hsl(var(--teal-new-29-hsl) / 1);
  --teal-new-29-hsl: 185.714 calc(var(--saturation-factor, 1) * 37.838%) 56.471%;
  --teal-new-3: hsl(var(--teal-new-3-hsl) / 1);
  --teal-new-3-hsl: 185.66 calc(var(--saturation-factor, 1) * 84.127%) 87.647%;
  --teal-new-30: hsl(var(--teal-new-30-hsl) / 1);
  --teal-new-30-hsl: 185.581 calc(var(--saturation-factor, 1) * 37.719%) 55.294%;
  --teal-new-31: hsl(var(--teal-new-31-hsl) / 1);
  --teal-new-31-hsl: 185.581 calc(var(--saturation-factor, 1) * 36.752%) 54.118%;
  --teal-new-32: hsl(var(--teal-new-32-hsl) / 1);
  --teal-new-32-hsl: 185.455 calc(var(--saturation-factor, 1) * 36.667%) 52.941%;
  --teal-new-33: hsl(var(--teal-new-33-hsl) / 1);
  --teal-new-33-hsl: 185.393 calc(var(--saturation-factor, 1) * 36.032%) 51.569%;
  --teal-new-34: hsl(var(--teal-new-34-hsl) / 1);
  --teal-new-34-hsl: 185.275 calc(var(--saturation-factor, 1) * 35.968%) 50.392%;
  --teal-new-35: hsl(var(--teal-new-35-hsl) / 1);
  --teal-new-35-hsl: 185.217 calc(var(--saturation-factor, 1) * 36.8%) 49.02%;
  --teal-new-36: hsl(var(--teal-new-36-hsl) / 1);
  --teal-new-36-hsl: 185.161 calc(var(--saturation-factor, 1) * 37.959%) 48.039%;
  --teal-new-37: hsl(var(--teal-new-37-hsl) / 1);
  --teal-new-37-hsl: 185.684 calc(var(--saturation-factor, 1) * 39.749%) 46.863%;
  --teal-new-38: hsl(var(--teal-new-38-hsl) / 1);
  --teal-new-38-hsl: 185 calc(var(--saturation-factor, 1) * 41.379%) 45.49%;
  --teal-new-39: hsl(var(--teal-new-39-hsl) / 1);
  --teal-new-39-hsl: 185.455 calc(var(--saturation-factor, 1) * 44%) 44.118%;
  --teal-new-4: hsl(var(--teal-new-4-hsl) / 1);
  --teal-new-4-hsl: 186.667 calc(var(--saturation-factor, 1) * 79.412%) 86.667%;
  --teal-new-40: hsl(var(--teal-new-40-hsl) / 1);
  --teal-new-40-hsl: 184.8 calc(var(--saturation-factor, 1) * 45.872%) 42.745%;
  --teal-new-41: hsl(var(--teal-new-41-hsl) / 1);
  --teal-new-41-hsl: 184.706 calc(var(--saturation-factor, 1) * 48.113%) 41.569%;
  --teal-new-42: hsl(var(--teal-new-42-hsl) / 1);
  --teal-new-42-hsl: 185.143 calc(var(--saturation-factor, 1) * 51.22%) 40.196%;
  --teal-new-43: hsl(var(--teal-new-43-hsl) / 1);
  --teal-new-43-hsl: 184.486 calc(var(--saturation-factor, 1) * 54.315%) 38.627%;
  --teal-new-44: hsl(var(--teal-new-44-hsl) / 1);
  --teal-new-44-hsl: 184.909 calc(var(--saturation-factor, 1) * 57.895%) 37.255%;
  --teal-new-45: hsl(var(--teal-new-45-hsl) / 1);
  --teal-new-45-hsl: 184.286 calc(var(--saturation-factor, 1) * 61.538%) 35.686%;
  --teal-new-46: hsl(var(--teal-new-46-hsl) / 1);
  --teal-new-46-hsl: 184.655 calc(var(--saturation-factor, 1) * 66.667%) 34.118%;
  --teal-new-47: hsl(var(--teal-new-47-hsl) / 1);
  --teal-new-47-hsl: 184.463 calc(var(--saturation-factor, 1) * 73.333%) 32.353%;
  --teal-new-48: hsl(var(--teal-new-48-hsl) / 1);
  --teal-new-48-hsl: 184.219 calc(var(--saturation-factor, 1) * 84.211%) 29.804%;
  --teal-new-49: hsl(var(--teal-new-49-hsl) / 1);
  --teal-new-49-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --teal-new-5: hsl(var(--teal-new-5-hsl) / 1);
  --teal-new-5-hsl: 185.455 calc(var(--saturation-factor, 1) * 73.333%) 85.294%;
  --teal-new-50: hsl(var(--teal-new-50-hsl) / 1);
  --teal-new-50-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --teal-new-51: hsl(var(--teal-new-51-hsl) / 1);
  --teal-new-51-hsl: 184.091 calc(var(--saturation-factor, 1) * 95.652%) 27.059%;
  --teal-new-52: hsl(var(--teal-new-52-hsl) / 1);
  --teal-new-52-hsl: 183.81 calc(var(--saturation-factor, 1) * 91.304%) 27.059%;
  --teal-new-53: hsl(var(--teal-new-53-hsl) / 1);
  --teal-new-53-hsl: 183.967 calc(var(--saturation-factor, 1) * 88.321%) 26.863%;
  --teal-new-54: hsl(var(--teal-new-54-hsl) / 1);
  --teal-new-54-hsl: 184.174 calc(var(--saturation-factor, 1) * 83.942%) 26.863%;
  --teal-new-55: hsl(var(--teal-new-55-hsl) / 1);
  --teal-new-55-hsl: 184.364 calc(var(--saturation-factor, 1) * 80.882%) 26.667%;
  --teal-new-56: hsl(var(--teal-new-56-hsl) / 1);
  --teal-new-56-hsl: 183.962 calc(var(--saturation-factor, 1) * 79.104%) 26.275%;
  --teal-new-57: hsl(var(--teal-new-57-hsl) / 1);
  --teal-new-57-hsl: 184.118 calc(var(--saturation-factor, 1) * 77.273%) 25.882%;
  --teal-new-58: hsl(var(--teal-new-58-hsl) / 1);
  --teal-new-58-hsl: 184.898 calc(var(--saturation-factor, 1) * 74.242%) 25.882%;
  --teal-new-59: hsl(var(--teal-new-59-hsl) / 1);
  --teal-new-59-hsl: 184.421 calc(var(--saturation-factor, 1) * 73.643%) 25.294%;
  --teal-new-6: hsl(var(--teal-new-6-hsl) / 1);
  --teal-new-6-hsl: 186.316 calc(var(--saturation-factor, 1) * 70.37%) 84.118%;
  --teal-new-60: hsl(var(--teal-new-60-hsl) / 1);
  --teal-new-60-hsl: 184.615 calc(var(--saturation-factor, 1) * 71.654%) 24.902%;
  --teal-new-61: hsl(var(--teal-new-61-hsl) / 1);
  --teal-new-61-hsl: 184.828 calc(var(--saturation-factor, 1) * 69.6%) 24.51%;
  --teal-new-62: hsl(var(--teal-new-62-hsl) / 1);
  --teal-new-62-hsl: 184.286 calc(var(--saturation-factor, 1) * 68.852%) 23.922%;
  --teal-new-63: hsl(var(--teal-new-63-hsl) / 1);
  --teal-new-63-hsl: 184.5 calc(var(--saturation-factor, 1) * 66.667%) 23.529%;
  --teal-new-64: hsl(var(--teal-new-64-hsl) / 1);
  --teal-new-64-hsl: 184.615 calc(var(--saturation-factor, 1) * 66.102%) 23.137%;
  --teal-new-65: hsl(var(--teal-new-65-hsl) / 1);
  --teal-new-65-hsl: 184.8 calc(var(--saturation-factor, 1) * 65.217%) 22.549%;
  --teal-new-66: hsl(var(--teal-new-66-hsl) / 1);
  --teal-new-66-hsl: 184.167 calc(var(--saturation-factor, 1) * 64.286%) 21.961%;
  --teal-new-67: hsl(var(--teal-new-67-hsl) / 1);
  --teal-new-67-hsl: 184.412 calc(var(--saturation-factor, 1) * 61.818%) 21.569%;
  --teal-new-68: hsl(var(--teal-new-68-hsl) / 1);
  --teal-new-68-hsl: 185.455 calc(var(--saturation-factor, 1) * 61.111%) 21.176%;
  --teal-new-69: hsl(var(--teal-new-69-hsl) / 1);
  --teal-new-69-hsl: 184.688 calc(var(--saturation-factor, 1) * 61.538%) 20.392%;
  --teal-new-7: hsl(var(--teal-new-7-hsl) / 1);
  --teal-new-7-hsl: 186.207 calc(var(--saturation-factor, 1) * 65.909%) 82.745%;
  --teal-new-70: hsl(var(--teal-new-70-hsl) / 1);
  --teal-new-70-hsl: 184.918 calc(var(--saturation-factor, 1) * 60.396%) 19.804%;
  --teal-new-71: hsl(var(--teal-new-71-hsl) / 1);
  --teal-new-71-hsl: 185.085 calc(var(--saturation-factor, 1) * 59.596%) 19.412%;
  --teal-new-72: hsl(var(--teal-new-72-hsl) / 1);
  --teal-new-72-hsl: 185.357 calc(var(--saturation-factor, 1) * 58.333%) 18.824%;
  --teal-new-73: hsl(var(--teal-new-73-hsl) / 1);
  --teal-new-73-hsl: 184.528 calc(var(--saturation-factor, 1) * 56.989%) 18.235%;
  --teal-new-74: hsl(var(--teal-new-74-hsl) / 1);
  --teal-new-74-hsl: 184.615 calc(var(--saturation-factor, 1) * 57.778%) 17.647%;
  --teal-new-75: hsl(var(--teal-new-75-hsl) / 1);
  --teal-new-75-hsl: 184.898 calc(var(--saturation-factor, 1) * 56.322%) 17.059%;
  --teal-new-76: hsl(var(--teal-new-76-hsl) / 1);
  --teal-new-76-hsl: 185.106 calc(var(--saturation-factor, 1) * 55.294%) 16.667%;
  --teal-new-77: hsl(var(--teal-new-77-hsl) / 1);
  --teal-new-77-hsl: 185.333 calc(var(--saturation-factor, 1) * 55.556%) 15.882%;
  --teal-new-78: hsl(var(--teal-new-78-hsl) / 1);
  --teal-new-78-hsl: 185.581 calc(var(--saturation-factor, 1) * 54.43%) 15.49%;
  --teal-new-79: hsl(var(--teal-new-79-hsl) / 1);
  --teal-new-79-hsl: 184.39 calc(var(--saturation-factor, 1) * 54.667%) 14.706%;
  --teal-new-8: hsl(var(--teal-new-8-hsl) / 1);
  --teal-new-8-hsl: 186.102 calc(var(--saturation-factor, 1) * 63.441%) 81.765%;
  --teal-new-80: hsl(var(--teal-new-80-hsl) / 1);
  --teal-new-80-hsl: 186.154 calc(var(--saturation-factor, 1) * 53.425%) 14.314%;
  --teal-new-81: hsl(var(--teal-new-81-hsl) / 1);
  --teal-new-81-hsl: 184.865 calc(var(--saturation-factor, 1) * 53.623%) 13.529%;
  --teal-new-82: hsl(var(--teal-new-82-hsl) / 1);
  --teal-new-82-hsl: 185.143 calc(var(--saturation-factor, 1) * 52.239%) 13.137%;
  --teal-new-83: hsl(var(--teal-new-83-hsl) / 1);
  --teal-new-83-hsl: 185.455 calc(var(--saturation-factor, 1) * 52.381%) 12.353%;
  --teal-new-84: hsl(var(--teal-new-84-hsl) / 1);
  --teal-new-84-hsl: 185.625 calc(var(--saturation-factor, 1) * 53.333%) 11.765%;
  --teal-new-85: hsl(var(--teal-new-85-hsl) / 1);
  --teal-new-85-hsl: 184.138 calc(var(--saturation-factor, 1) * 50.877%) 11.176%;
  --teal-new-86: hsl(var(--teal-new-86-hsl) / 1);
  --teal-new-86-hsl: 184.286 calc(var(--saturation-factor, 1) * 51.852%) 10.588%;
  --teal-new-87: hsl(var(--teal-new-87-hsl) / 1);
  --teal-new-87-hsl: 184.444 calc(var(--saturation-factor, 1) * 52.941%) 10%;
  --teal-new-88: hsl(var(--teal-new-88-hsl) / 1);
  --teal-new-88-hsl: 184.8 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
  --teal-new-89: hsl(var(--teal-new-89-hsl) / 1);
  --teal-new-89-hsl: 185.217 calc(var(--saturation-factor, 1) * 51.111%) 8.824%;
  --teal-new-9: hsl(var(--teal-new-9-hsl) / 1);
  --teal-new-9-hsl: 186 calc(var(--saturation-factor, 1) * 60%) 80.392%;
  --teal-new-90: hsl(var(--teal-new-90-hsl) / 1);
  --teal-new-90-hsl: 185.455 calc(var(--saturation-factor, 1) * 52.381%) 8.235%;
  --teal-new-91: hsl(var(--teal-new-91-hsl) / 1);
  --teal-new-91-hsl: 185.714 calc(var(--saturation-factor, 1) * 53.846%) 7.647%;
  --teal-new-92: hsl(var(--teal-new-92-hsl) / 1);
  --teal-new-92-hsl: 186 calc(var(--saturation-factor, 1) * 55.556%) 7.059%;
  --teal-new-93: hsl(var(--teal-new-93-hsl) / 1);
  --teal-new-93-hsl: 183.529 calc(var(--saturation-factor, 1) * 51.515%) 6.471%;
  --teal-new-94: hsl(var(--teal-new-94-hsl) / 1);
  --teal-new-94-hsl: 187.5 calc(var(--saturation-factor, 1) * 53.333%) 5.882%;
  --teal-new-95: hsl(var(--teal-new-95-hsl) / 1);
  --teal-new-95-hsl: 184.286 calc(var(--saturation-factor, 1) * 53.846%) 5.098%;
  --teal-new-96: hsl(var(--teal-new-96-hsl) / 1);
  --teal-new-96-hsl: 185 calc(var(--saturation-factor, 1) * 54.545%) 4.314%;
  --teal-new-97: hsl(var(--teal-new-97-hsl) / 1);
  --teal-new-97-hsl: 186.667 calc(var(--saturation-factor, 1) * 52.941%) 3.333%;
  --teal-new-98: hsl(var(--teal-new-98-hsl) / 1);
  --teal-new-98-hsl: 190 calc(var(--saturation-factor, 1) * 50%) 2.353%;
  --teal-new-99: hsl(var(--teal-new-99-hsl) / 1);
  --teal-new-99-hsl: 180 calc(var(--saturation-factor, 1) * 33.333%) 1.176%;
  --transparent: hsl(var(--transparent-hsl) / 0);
  --transparent-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --twitch: hsl(var(--twitch-hsl) / 1);
  --twitch-hsl: 262.105 calc(var(--saturation-factor, 1) * 46.798%) 39.804%;
  --twitter: hsl(var(--twitter-hsl) / 1);
  --twitter-hsl: 202.817 calc(var(--saturation-factor, 1) * 89.121%) 53.137%;
  --white: hsl(var(--white-hsl) / 1);
  --white-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-100: hsl(var(--white-100-hsl) / 1);
  --white-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-130: hsl(var(--white-130-hsl) / 1);
  --white-130-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-160: hsl(var(--white-160-hsl) / 1);
  --white-160-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-200: hsl(var(--white-200-hsl) / 1);
  --white-200-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-230: hsl(var(--white-230-hsl) / 1);
  --white-230-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-260: hsl(var(--white-260-hsl) / 1);
  --white-260-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-300: hsl(var(--white-300-hsl) / 1);
  --white-300-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-330: hsl(var(--white-330-hsl) / 1);
  --white-330-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-345: hsl(var(--white-345-hsl) / 1);
  --white-345-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-360: hsl(var(--white-360-hsl) / 1);
  --white-360-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-400: hsl(var(--white-400-hsl) / 1);
  --white-400-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-430: hsl(var(--white-430-hsl) / 1);
  --white-430-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-460: hsl(var(--white-460-hsl) / 1);
  --white-460-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-500: hsl(var(--white-500-hsl) / 1);
  --white-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-530: hsl(var(--white-530-hsl) / 1);
  --white-530-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 90.98%;
  --white-560: hsl(var(--white-560-hsl) / 1);
  --white-560-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 81.176%;
  --white-600: hsl(var(--white-600-hsl) / 1);
  --white-600-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 67.843%;
  --white-630: hsl(var(--white-630-hsl) / 1);
  --white-630-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 58.824%;
  --white-660: hsl(var(--white-660-hsl) / 1);
  --white-660-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 51.373%;
  --white-700: hsl(var(--white-700-hsl) / 1);
  --white-700-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 40%;
  --white-730: hsl(var(--white-730-hsl) / 1);
  --white-730-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 37.255%;
  --white-760: hsl(var(--white-760-hsl) / 1);
  --white-760-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 34.51%;
  --white-800: hsl(var(--white-800-hsl) / 1);
  --white-800-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 30.196%;
  --white-830: hsl(var(--white-830-hsl) / 1);
  --white-830-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 23.137%;
  --white-860: hsl(var(--white-860-hsl) / 1);
  --white-860-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 14.902%;
  --white-900: hsl(var(--white-900-hsl) / 1);
  --white-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 5.098%;
  --xbox: hsl(var(--xbox-hsl) / 1);
  --xbox-hsl: 120 calc(var(--saturation-factor, 1) * 77.143%) 27.451%;
  --yellow-100: hsl(var(--yellow-100-hsl) / 1);
  --yellow-100-hsl: 33.75 calc(var(--saturation-factor, 1) * 100%) 96.863%;
  --yellow-130: hsl(var(--yellow-130-hsl) / 1);
  --yellow-130-hsl: 31.304 calc(var(--saturation-factor, 1) * 100%) 95.49%;
  --yellow-160: hsl(var(--yellow-160-hsl) / 1);
  --yellow-160-hsl: 32.727 calc(var(--saturation-factor, 1) * 100%) 91.373%;
  --yellow-200: hsl(var(--yellow-200-hsl) / 1);
  --yellow-200-hsl: 35 calc(var(--saturation-factor, 1) * 97.297%) 85.49%;
  --yellow-230: hsl(var(--yellow-230-hsl) / 1);
  --yellow-230-hsl: 36.637 calc(var(--saturation-factor, 1) * 96.581%) 77.059%;
  --yellow-260: hsl(var(--yellow-260-hsl) / 1);
  --yellow-260-hsl: 40.656 calc(var(--saturation-factor, 1) * 96.825%) 62.941%;
  --yellow-300: hsl(var(--yellow-300-hsl) / 1);
  --yellow-300-hsl: 40.421 calc(var(--saturation-factor, 1) * 86.364%) 56.863%;
  --yellow-330: hsl(var(--yellow-330-hsl) / 1);
  --yellow-330-hsl: 40 calc(var(--saturation-factor, 1) * 75.309%) 52.353%;
  --yellow-345: hsl(var(--yellow-345-hsl) / 1);
  --yellow-345-hsl: 39.545 calc(var(--saturation-factor, 1) * 70.968%) 48.627%;
  --yellow-360: hsl(var(--yellow-360-hsl) / 1);
  --yellow-360-hsl: 39.018 calc(var(--saturation-factor, 1) * 74.429%) 42.941%;
  --yellow-400: hsl(var(--yellow-400-hsl) / 1);
  --yellow-400-hsl: 37.792 calc(var(--saturation-factor, 1) * 78.571%) 38.431%;
  --yellow-430: hsl(var(--yellow-430-hsl) / 1);
  --yellow-430-hsl: 37.447 calc(var(--saturation-factor, 1) * 84.431%) 32.745%;
  --yellow-460: hsl(var(--yellow-460-hsl) / 1);
  --yellow-460-hsl: 36.279 calc(var(--saturation-factor, 1) * 87.755%) 28.824%;
  --yellow-500: hsl(var(--yellow-500-hsl) / 1);
  --yellow-500-hsl: 35.5 calc(var(--saturation-factor, 1) * 93.75%) 25.098%;
  --yellow-530: hsl(var(--yellow-530-hsl) / 1);
  --yellow-530-hsl: 34.857 calc(var(--saturation-factor, 1) * 92.92%) 22.157%;
  --yellow-560: hsl(var(--yellow-560-hsl) / 1);
  --yellow-560-hsl: 33.83 calc(var(--saturation-factor, 1) * 94%) 19.608%;
  --yellow-600: hsl(var(--yellow-600-hsl) / 1);
  --yellow-600-hsl: 34.815 calc(var(--saturation-factor, 1) * 93.103%) 17.059%;
  --yellow-630: hsl(var(--yellow-630-hsl) / 1);
  --yellow-630-hsl: 34.521 calc(var(--saturation-factor, 1) * 92.405%) 15.49%;
  --yellow-660: hsl(var(--yellow-660-hsl) / 1);
  --yellow-660-hsl: 34.688 calc(var(--saturation-factor, 1) * 91.429%) 13.725%;
  --yellow-700: hsl(var(--yellow-700-hsl) / 1);
  --yellow-700-hsl: 34.286 calc(var(--saturation-factor, 1) * 90.323%) 12.157%;
  --yellow-730: hsl(var(--yellow-730-hsl) / 1);
  --yellow-730-hsl: 32.941 calc(var(--saturation-factor, 1) * 92.727%) 10.784%;
  --yellow-760: hsl(var(--yellow-760-hsl) / 1);
  --yellow-760-hsl: 32.727 calc(var(--saturation-factor, 1) * 91.667%) 9.412%;
  --yellow-800: hsl(var(--yellow-800-hsl) / 1);
  --yellow-800-hsl: 32.432 calc(var(--saturation-factor, 1) * 90.244%) 8.039%;
  --yellow-830: hsl(var(--yellow-830-hsl) / 1);
  --yellow-830-hsl: 31.875 calc(var(--saturation-factor, 1) * 88.889%) 7.059%;
  --yellow-860: hsl(var(--yellow-860-hsl) / 1);
  --yellow-860-hsl: 32.308 calc(var(--saturation-factor, 1) * 86.667%) 5.882%;
  --yellow-900: hsl(var(--yellow-900-hsl) / 1);
  --yellow-900-hsl: 36 calc(var(--saturation-factor, 1) * 83.333%) 4.706%;
  --yellow-new-1: hsl(var(--yellow-new-1-hsl) / 1);
  --yellow-new-1-hsl: 25.5 calc(var(--saturation-factor, 1) * 100%) 92.157%;
  --yellow-new-10: hsl(var(--yellow-new-10-hsl) / 1);
  --yellow-new-10-hsl: 31.765 calc(var(--saturation-factor, 1) * 68%) 80.392%;
  --yellow-new-100: hsl(var(--yellow-new-100-hsl) / 1);
  --yellow-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --yellow-new-11: hsl(var(--yellow-new-11-hsl) / 1);
  --yellow-new-11-hsl: 32.113 calc(var(--saturation-factor, 1) * 66.355%) 79.02%;
  --yellow-new-12: hsl(var(--yellow-new-12-hsl) / 1);
  --yellow-new-12-hsl: 31.622 calc(var(--saturation-factor, 1) * 66.071%) 78.039%;
  --yellow-new-13: hsl(var(--yellow-new-13-hsl) / 1);
  --yellow-new-13-hsl: 31.948 calc(var(--saturation-factor, 1) * 64.706%) 76.667%;
  --yellow-new-14: hsl(var(--yellow-new-14-hsl) / 1);
  --yellow-new-14-hsl: 31.899 calc(var(--saturation-factor, 1) * 63.2%) 75.49%;
  --yellow-new-15: hsl(var(--yellow-new-15-hsl) / 1);
  --yellow-new-15-hsl: 32.195 calc(var(--saturation-factor, 1) * 62.121%) 74.118%;
  --yellow-new-16: hsl(var(--yellow-new-16-hsl) / 1);
  --yellow-new-16-hsl: 32.143 calc(var(--saturation-factor, 1) * 60.87%) 72.941%;
  --yellow-new-17: hsl(var(--yellow-new-17-hsl) / 1);
  --yellow-new-17-hsl: 32.791 calc(var(--saturation-factor, 1) * 59.722%) 71.765%;
  --yellow-new-18: hsl(var(--yellow-new-18-hsl) / 1);
  --yellow-new-18-hsl: 32.667 calc(var(--saturation-factor, 1) * 60%) 70.588%;
  --yellow-new-19: hsl(var(--yellow-new-19-hsl) / 1);
  --yellow-new-19-hsl: 32.609 calc(var(--saturation-factor, 1) * 58.974%) 69.412%;
  --yellow-new-2: hsl(var(--yellow-new-2-hsl) / 1);
  --yellow-new-2-hsl: 27.907 calc(var(--saturation-factor, 1) * 91.489%) 90.784%;
  --yellow-new-20: hsl(var(--yellow-new-20-hsl) / 1);
  --yellow-new-20-hsl: 32.553 calc(var(--saturation-factor, 1) * 58.025%) 68.235%;
  --yellow-new-21: hsl(var(--yellow-new-21-hsl) / 1);
  --yellow-new-21-hsl: 32.5 calc(var(--saturation-factor, 1) * 57.143%) 67.059%;
  --yellow-new-22: hsl(var(--yellow-new-22-hsl) / 1);
  --yellow-new-22-hsl: 32.727 calc(var(--saturation-factor, 1) * 56.571%) 65.686%;
  --yellow-new-23: hsl(var(--yellow-new-23-hsl) / 1);
  --yellow-new-23-hsl: 33.267 calc(var(--saturation-factor, 1) * 55.801%) 64.51%;
  --yellow-new-24: hsl(var(--yellow-new-24-hsl) / 1);
  --yellow-new-24-hsl: 33.204 calc(var(--saturation-factor, 1) * 55.08%) 63.333%;
  --yellow-new-25: hsl(var(--yellow-new-25-hsl) / 1);
  --yellow-new-25-hsl: 33.143 calc(var(--saturation-factor, 1) * 54.404%) 62.157%;
  --yellow-new-26: hsl(var(--yellow-new-26-hsl) / 1);
  --yellow-new-26-hsl: 33.084 calc(var(--saturation-factor, 1) * 53.769%) 60.98%;
  --yellow-new-27: hsl(var(--yellow-new-27-hsl) / 1);
  --yellow-new-27-hsl: 33.028 calc(var(--saturation-factor, 1) * 53.171%) 59.804%;
  --yellow-new-28: hsl(var(--yellow-new-28-hsl) / 1);
  --yellow-new-28-hsl: 33.514 calc(var(--saturation-factor, 1) * 52.607%) 58.627%;
  --yellow-new-29: hsl(var(--yellow-new-29-hsl) / 1);
  --yellow-new-29-hsl: 33.451 calc(var(--saturation-factor, 1) * 52.074%) 57.451%;
  --yellow-new-3: hsl(var(--yellow-new-3-hsl) / 1);
  --yellow-new-3-hsl: 28.085 calc(var(--saturation-factor, 1) * 88.679%) 89.608%;
  --yellow-new-30: hsl(var(--yellow-new-30-hsl) / 1);
  --yellow-new-30-hsl: 33.391 calc(var(--saturation-factor, 1) * 51.57%) 56.275%;
  --yellow-new-31: hsl(var(--yellow-new-31-hsl) / 1);
  --yellow-new-31-hsl: 33.333 calc(var(--saturation-factor, 1) * 51.092%) 55.098%;
  --yellow-new-32: hsl(var(--yellow-new-32-hsl) / 1);
  --yellow-new-32-hsl: 33.782 calc(var(--saturation-factor, 1) * 50.638%) 53.922%;
  --yellow-new-33: hsl(var(--yellow-new-33-hsl) / 1);
  --yellow-new-33-hsl: 33.719 calc(var(--saturation-factor, 1) * 50.207%) 52.745%;
  --yellow-new-34: hsl(var(--yellow-new-34-hsl) / 1);
  --yellow-new-34-hsl: 33.659 calc(var(--saturation-factor, 1) * 49.798%) 51.569%;
  --yellow-new-35: hsl(var(--yellow-new-35-hsl) / 1);
  --yellow-new-35-hsl: 33.387 calc(var(--saturation-factor, 1) * 49.206%) 50.588%;
  --yellow-new-36: hsl(var(--yellow-new-36-hsl) / 1);
  --yellow-new-36-hsl: 33.81 calc(var(--saturation-factor, 1) * 50%) 49.412%;
  --yellow-new-37: hsl(var(--yellow-new-37-hsl) / 1);
  --yellow-new-37-hsl: 33.75 calc(var(--saturation-factor, 1) * 52.033%) 48.235%;
  --yellow-new-38: hsl(var(--yellow-new-38-hsl) / 1);
  --yellow-new-38-hsl: 33.692 calc(var(--saturation-factor, 1) * 54.167%) 47.059%;
  --yellow-new-39: hsl(var(--yellow-new-39-hsl) / 1);
  --yellow-new-39-hsl: 34.091 calc(var(--saturation-factor, 1) * 56.41%) 45.882%;
  --yellow-new-4: hsl(var(--yellow-new-4-hsl) / 1);
  --yellow-new-4-hsl: 28.8 calc(var(--saturation-factor, 1) * 83.333%) 88.235%;
  --yellow-new-40: hsl(var(--yellow-new-40-hsl) / 1);
  --yellow-new-40-hsl: 34.286 calc(var(--saturation-factor, 1) * 58.59%) 44.51%;
  --yellow-new-41: hsl(var(--yellow-new-41-hsl) / 1);
  --yellow-new-41-hsl: 34.222 calc(var(--saturation-factor, 1) * 61.086%) 43.333%;
  --yellow-new-42: hsl(var(--yellow-new-42-hsl) / 1);
  --yellow-new-42-hsl: 34.599 calc(var(--saturation-factor, 1) * 63.721%) 42.157%;
  --yellow-new-43: hsl(var(--yellow-new-43-hsl) / 1);
  --yellow-new-43-hsl: 34.714 calc(var(--saturation-factor, 1) * 67.308%) 40.784%;
  --yellow-new-44: hsl(var(--yellow-new-44-hsl) / 1);
  --yellow-new-44-hsl: 34.648 calc(var(--saturation-factor, 1) * 70.297%) 39.608%;
  --yellow-new-45: hsl(var(--yellow-new-45-hsl) / 1);
  --yellow-new-45-hsl: 35.172 calc(var(--saturation-factor, 1) * 74.359%) 38.235%;
  --yellow-new-46: hsl(var(--yellow-new-46-hsl) / 1);
  --yellow-new-46-hsl: 35.27 calc(var(--saturation-factor, 1) * 78.723%) 36.863%;
  --yellow-new-47: hsl(var(--yellow-new-47-hsl) / 1);
  --yellow-new-47-hsl: 35.762 calc(var(--saturation-factor, 1) * 84.358%) 35.098%;
  --yellow-new-48: hsl(var(--yellow-new-48-hsl) / 1);
  --yellow-new-48-hsl: 36.538 calc(var(--saturation-factor, 1) * 91.765%) 33.333%;
  --yellow-new-49: hsl(var(--yellow-new-49-hsl) / 1);
  --yellow-new-49-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --yellow-new-5: hsl(var(--yellow-new-5-hsl) / 1);
  --yellow-new-5-hsl: 29.434 calc(var(--saturation-factor, 1) * 79.104%) 86.863%;
  --yellow-new-50: hsl(var(--yellow-new-50-hsl) / 1);
  --yellow-new-50-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --yellow-new-51: hsl(var(--yellow-new-51-hsl) / 1);
  --yellow-new-51-hsl: 36.923 calc(var(--saturation-factor, 1) * 98.734%) 30.98%;
  --yellow-new-52: hsl(var(--yellow-new-52-hsl) / 1);
  --yellow-new-52-hsl: 36.711 calc(var(--saturation-factor, 1) * 97.436%) 30.588%;
  --yellow-new-53: hsl(var(--yellow-new-53-hsl) / 1);
  --yellow-new-53-hsl: 36.486 calc(var(--saturation-factor, 1) * 96.104%) 30.196%;
  --yellow-new-54: hsl(var(--yellow-new-54-hsl) / 1);
  --yellow-new-54-hsl: 36.667 calc(var(--saturation-factor, 1) * 96%) 29.412%;
  --yellow-new-55: hsl(var(--yellow-new-55-hsl) / 1);
  --yellow-new-55-hsl: 36.429 calc(var(--saturation-factor, 1) * 94.595%) 29.02%;
  --yellow-new-56: hsl(var(--yellow-new-56-hsl) / 1);
  --yellow-new-56-hsl: 36.444 calc(var(--saturation-factor, 1) * 93.103%) 28.431%;
  --yellow-new-57: hsl(var(--yellow-new-57-hsl) / 1);
  --yellow-new-57-hsl: 36.364 calc(var(--saturation-factor, 1) * 92.958%) 27.843%;
  --yellow-new-58: hsl(var(--yellow-new-58-hsl) / 1);
  --yellow-new-58-hsl: 36.378 calc(var(--saturation-factor, 1) * 91.367%) 27.255%;
  --yellow-new-59: hsl(var(--yellow-new-59-hsl) / 1);
  --yellow-new-59-hsl: 36.29 calc(var(--saturation-factor, 1) * 91.176%) 26.667%;
  --yellow-new-6: hsl(var(--yellow-new-6-hsl) / 1);
  --yellow-new-6-hsl: 30 calc(var(--saturation-factor, 1) * 75.676%) 85.49%;
  --yellow-new-60: hsl(var(--yellow-new-60-hsl) / 1);
  --yellow-new-60-hsl: 36 calc(var(--saturation-factor, 1) * 89.552%) 26.275%;
  --yellow-new-61: hsl(var(--yellow-new-61-hsl) / 1);
  --yellow-new-61-hsl: 36.207 calc(var(--saturation-factor, 1) * 89.231%) 25.49%;
  --yellow-new-62: hsl(var(--yellow-new-62-hsl) / 1);
  --yellow-new-62-hsl: 36.106 calc(var(--saturation-factor, 1) * 88.976%) 24.902%;
  --yellow-new-63: hsl(var(--yellow-new-63-hsl) / 1);
  --yellow-new-63-hsl: 35.78 calc(var(--saturation-factor, 1) * 87.2%) 24.51%;
  --yellow-new-64: hsl(var(--yellow-new-64-hsl) / 1);
  --yellow-new-64-hsl: 35.66 calc(var(--saturation-factor, 1) * 86.885%) 23.922%;
  --yellow-new-65: hsl(var(--yellow-new-65-hsl) / 1);
  --yellow-new-65-hsl: 36.471 calc(var(--saturation-factor, 1) * 86.441%) 23.137%;
  --yellow-new-66: hsl(var(--yellow-new-66-hsl) / 1);
  --yellow-new-66-hsl: 36.364 calc(var(--saturation-factor, 1) * 86.087%) 22.549%;
  --yellow-new-67: hsl(var(--yellow-new-67-hsl) / 1);
  --yellow-new-67-hsl: 36.25 calc(var(--saturation-factor, 1) * 85.714%) 21.961%;
  --yellow-new-68: hsl(var(--yellow-new-68-hsl) / 1);
  --yellow-new-68-hsl: 36.129 calc(var(--saturation-factor, 1) * 85.321%) 21.373%;
  --yellow-new-69: hsl(var(--yellow-new-69-hsl) / 1);
  --yellow-new-69-hsl: 36 calc(var(--saturation-factor, 1) * 84.906%) 20.784%;
  --yellow-new-7: hsl(var(--yellow-new-7-hsl) / 1);
  --yellow-new-7-hsl: 30 calc(var(--saturation-factor, 1) * 75%) 84.314%;
  --yellow-new-70: hsl(var(--yellow-new-70-hsl) / 1);
  --yellow-new-70-hsl: 35.862 calc(var(--saturation-factor, 1) * 84.466%) 20.196%;
  --yellow-new-71: hsl(var(--yellow-new-71-hsl) / 1);
  --yellow-new-71-hsl: 35.714 calc(var(--saturation-factor, 1) * 84%) 19.608%;
  --yellow-new-72: hsl(var(--yellow-new-72-hsl) / 1);
  --yellow-new-72-hsl: 35.556 calc(var(--saturation-factor, 1) * 83.505%) 19.02%;
  --yellow-new-73: hsl(var(--yellow-new-73-hsl) / 1);
  --yellow-new-73-hsl: 35.844 calc(var(--saturation-factor, 1) * 82.796%) 18.235%;
  --yellow-new-74: hsl(var(--yellow-new-74-hsl) / 1);
  --yellow-new-74-hsl: 35.676 calc(var(--saturation-factor, 1) * 82.222%) 17.647%;
  --yellow-new-75: hsl(var(--yellow-new-75-hsl) / 1);
  --yellow-new-75-hsl: 36.338 calc(var(--saturation-factor, 1) * 81.609%) 17.059%;
  --yellow-new-76: hsl(var(--yellow-new-76-hsl) / 1);
  --yellow-new-76-hsl: 35.652 calc(var(--saturation-factor, 1) * 81.176%) 16.667%;
  --yellow-new-77: hsl(var(--yellow-new-77-hsl) / 1);
  --yellow-new-77-hsl: 35.455 calc(var(--saturation-factor, 1) * 80.488%) 16.078%;
  --yellow-new-78: hsl(var(--yellow-new-78-hsl) / 1);
  --yellow-new-78-hsl: 35.625 calc(var(--saturation-factor, 1) * 82.051%) 15.294%;
  --yellow-new-79: hsl(var(--yellow-new-79-hsl) / 1);
  --yellow-new-79-hsl: 35.41 calc(var(--saturation-factor, 1) * 81.333%) 14.706%;
  --yellow-new-8: hsl(var(--yellow-new-8-hsl) / 1);
  --yellow-new-8-hsl: 30.476 calc(var(--saturation-factor, 1) * 72.414%) 82.941%;
  --yellow-new-80: hsl(var(--yellow-new-80-hsl) / 1);
  --yellow-new-80-hsl: 35.172 calc(var(--saturation-factor, 1) * 80.556%) 14.118%;
  --yellow-new-81: hsl(var(--yellow-new-81-hsl) / 1);
  --yellow-new-81-hsl: 36 calc(var(--saturation-factor, 1) * 79.71%) 13.529%;
  --yellow-new-82: hsl(var(--yellow-new-82-hsl) / 1);
  --yellow-new-82-hsl: 36.226 calc(var(--saturation-factor, 1) * 81.538%) 12.745%;
  --yellow-new-83: hsl(var(--yellow-new-83-hsl) / 1);
  --yellow-new-83-hsl: 36 calc(var(--saturation-factor, 1) * 80.645%) 12.157%;
  --yellow-new-84: hsl(var(--yellow-new-84-hsl) / 1);
  --yellow-new-84-hsl: 35 calc(var(--saturation-factor, 1) * 80%) 11.765%;
  --yellow-new-85: hsl(var(--yellow-new-85-hsl) / 1);
  --yellow-new-85-hsl: 34.667 calc(var(--saturation-factor, 1) * 78.947%) 11.176%;
  --yellow-new-86: hsl(var(--yellow-new-86-hsl) / 1);
  --yellow-new-86-hsl: 36.279 calc(var(--saturation-factor, 1) * 81.132%) 10.392%;
  --yellow-new-87: hsl(var(--yellow-new-87-hsl) / 1);
  --yellow-new-87-hsl: 35.122 calc(var(--saturation-factor, 1) * 80.392%) 10%;
  --yellow-new-88: hsl(var(--yellow-new-88-hsl) / 1);
  --yellow-new-88-hsl: 34.737 calc(var(--saturation-factor, 1) * 79.167%) 9.412%;
  --yellow-new-89: hsl(var(--yellow-new-89-hsl) / 1);
  --yellow-new-89-hsl: 35 calc(var(--saturation-factor, 1) * 81.818%) 8.627%;
  --yellow-new-9: hsl(var(--yellow-new-9-hsl) / 1);
  --yellow-new-9-hsl: 30.462 calc(var(--saturation-factor, 1) * 69.892%) 81.765%;
  --yellow-new-90: hsl(var(--yellow-new-90-hsl) / 1);
  --yellow-new-90-hsl: 35.294 calc(var(--saturation-factor, 1) * 80.952%) 8.235%;
  --yellow-new-91: hsl(var(--yellow-new-91-hsl) / 1);
  --yellow-new-91-hsl: 34.839 calc(var(--saturation-factor, 1) * 79.487%) 7.647%;
  --yellow-new-92: hsl(var(--yellow-new-92-hsl) / 1);
  --yellow-new-92-hsl: 33.103 calc(var(--saturation-factor, 1) * 78.378%) 7.255%;
  --yellow-new-93: hsl(var(--yellow-new-93-hsl) / 1);
  --yellow-new-93-hsl: 33.333 calc(var(--saturation-factor, 1) * 81.818%) 6.471%;
  --yellow-new-94: hsl(var(--yellow-new-94-hsl) / 1);
  --yellow-new-94-hsl: 35 calc(var(--saturation-factor, 1) * 80%) 5.882%;
  --yellow-new-95: hsl(var(--yellow-new-95-hsl) / 1);
  --yellow-new-95-hsl: 31.429 calc(var(--saturation-factor, 1) * 77.778%) 5.294%;
  --yellow-new-96: hsl(var(--yellow-new-96-hsl) / 1);
  --yellow-new-96-hsl: 31.579 calc(var(--saturation-factor, 1) * 82.609%) 4.51%;
  --yellow-new-97: hsl(var(--yellow-new-97-hsl) / 1);
  --yellow-new-97-hsl: 30 calc(var(--saturation-factor, 1) * 77.778%) 3.529%;
  --yellow-new-98: hsl(var(--yellow-new-98-hsl) / 1);
  --yellow-new-98-hsl: 27.273 calc(var(--saturation-factor, 1) * 84.615%) 2.549%;
  --yellow-new-99: hsl(var(--yellow-new-99-hsl) / 1);
  --yellow-new-99-hsl: 24 calc(var(--saturation-factor, 1) * 71.429%) 1.373%;
  --youtube: hsl(var(--youtube-hsl) / 1);
  --youtube-hsl: 0.351 calc(var(--saturation-factor, 1) * 72.766%) 46.078%;
}

.theme-dark {
  --action-sheet-gradient-bg: var(--primary-630);

  --activity-card-background: var(--primary-700);

  --activity-card-icon-overlay: hsl(var(--primary-600-hsl) / 0.85);

  --alert-bg: var(--primary-600);

  --android-navigation-bar-background: var(--primary-830);

  --android-navigation-scrim-background: hsl(var(--primary-830-hsl) / 0.5);

  --android-ripple: hsl(var(--white-hsl) / 0.07);

  --autocomplete-bg: var(--primary-630);

  --background-accent: var(--primary-530);

  --background-floating: var(--primary-800);

  --background-mentioned: hsl(var(--yellow-300-hsl) / 0.1);

  --background-mentioned-hover: hsl(var(--yellow-300-hsl) / 0.08);

  --background-message-automod: hsl(var(--red-400-hsl) / 0.05);

  --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1);

  --background-message-highlight: hsl(var(--brand-360-hsl) / 0.08);

  --background-message-highlight-hover: hsl(var(--brand-360-hsl) / 0.06);

  --background-message-hover: hsl(var(--primary-900-hsl) / 0.06);

  --background-mobile-primary: var(--primary-600);

  --background-mobile-secondary: var(--primary-630);

  --background-modifier-accent: hsl(var(--primary-500-hsl) / 0.48);

  --background-modifier-active: hsl(var(--primary-500-hsl) / 0.48);

  --background-modifier-hover: hsl(var(--primary-500-hsl) / 0.3);

  --background-modifier-selected: hsl(var(--primary-500-hsl) / 0.6);

  --background-nested-floating: var(--primary-630);

  --background-primary: var(--primary-600);

  --background-secondary: var(--primary-630);

  --background-secondary-alt: var(--primary-660);

  --background-tertiary: var(--primary-700);

  --badge-brand-bg: var(--brand-260);

  --badge-brand-text: var(--brand-560);

  --bg-backdrop: hsl(var(--black-hsl) / 0.7);

  --bg-backdrop-immersive: hsl(var(--black-hsl) / 0.85);

  --bg-backdrop-no-opacity: var(--black);

  --bg-base-primary: var(--primary-600);

  --bg-base-secondary: var(--primary-630);

  --bg-base-tertiary: var(--primary-660);

  --bg-brand: var(--brand-500);

  --bg-mod-faint: hsl(var(--primary-500-hsl) / 0.3);

  --bg-mod-strong: hsl(var(--primary-500-hsl) / 0.54);

  --bg-mod-subtle: hsl(var(--primary-500-hsl) / 0.48);

  --bg-surface-overlay: var(--primary-800);

  --bg-surface-overlay-tmp: var(--primary-800);

  --bg-surface-raised: var(--primary-560);

  --blur-fallback: hsl(var(--primary-700-hsl) / 0.96);

  --blur-fallback-pressed: hsl(var(--primary-730-hsl) / 0.96);

  --border-faint: hsl(var(--white-hsl) / 0.03);

  --border-strong: hsl(var(--white-hsl) / 0.16);

  --border-subtle: hsl(var(--white-hsl) / 0.08);

  --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl) / 0.6);

  --button-creator-revenue-background: var(--teal-430);

  --button-danger-background: var(--red-430);

  --button-danger-background-active: var(--red-530);

  --button-danger-background-disabled: var(--red-430);

  --button-danger-background-hover: var(--red-500);

  --button-danger-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-background: var(--brand-500);

  --button-filled-brand-background-active: var(--brand-600);

  --button-filled-brand-background-hover: var(--brand-560);

  --button-filled-brand-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-inverted-background: var(--white);

  --button-filled-brand-inverted-background-active: var(--brand-200);

  --button-filled-brand-inverted-background-hover: var(--brand-100);

  --button-filled-brand-inverted-text: var(--brand-500);

  --button-filled-brand-text: var(--white);

  --button-filled-white-background: var(--white-500);

  --button-filled-white-background-active: var(--white-500);

  --button-filled-white-background-hover: var(--white-500);

  --button-filled-white-text: var(--primary-500);

  --button-outline-brand-background: hsl(var(--white-hsl) / 0);

  --button-outline-brand-background-active: var(--brand-560);

  --button-outline-brand-background-hover: var(--brand-500);

  --button-outline-brand-border: var(--brand-500);

  --button-outline-brand-border-active: var(--brand-560);

  --button-outline-brand-border-hover: var(--brand-500);

  --button-outline-brand-text: var(--white);

  --button-outline-brand-text-active: var(--white);

  --button-outline-brand-text-hover: var(--white);

  --button-outline-danger-background: hsl(var(--white-hsl) / 0);

  --button-outline-danger-background-active: var(--red-460);

  --button-outline-danger-background-hover: var(--red-430);

  --button-outline-danger-border: var(--red-400);

  --button-outline-danger-border-active: var(--red-430);

  --button-outline-danger-border-hover: var(--red-430);

  --button-outline-danger-text: var(--white);

  --button-outline-danger-text-active: var(--white);

  --button-outline-danger-text-hover: var(--white);

  --button-outline-positive-background: hsl(var(--white-hsl) / 0);

  --button-outline-positive-background-active: var(--green-530);

  --button-outline-positive-background-hover: var(--green-430);

  --button-outline-positive-border: var(--green-360);

  --button-outline-positive-border-active: var(--green-530);

  --button-outline-positive-border-hover: var(--green-430);

  --button-outline-positive-text: var(--white);

  --button-outline-positive-text-active: var(--white);

  --button-outline-positive-text-hover: var(--white);

  --button-outline-primary-background: hsl(var(--white-hsl) / 0);

  --button-outline-primary-background-active: var(--primary-430);

  --button-outline-primary-background-hover: var(--primary-500);

  --button-outline-primary-border: var(--primary-500);

  --button-outline-primary-border-active: var(--primary-430);

  --button-outline-primary-border-hover: var(--primary-500);

  --button-outline-primary-text: var(--white);

  --button-outline-primary-text-active: var(--white);

  --button-outline-primary-text-hover: var(--white);

  --button-positive-background: var(--green-430);

  --button-positive-background-active: var(--green-530);

  --button-positive-background-disabled: var(--green-430);

  --button-positive-background-hover: var(--green-500);

  --button-positive-border: hsl(var(--white-500-hsl) / 0);

  --button-secondary-background: var(--primary-500);

  --button-secondary-background-active: var(--primary-400);

  --button-secondary-background-disabled: var(--primary-500);

  --button-secondary-background-hover: var(--primary-430);

  --button-secondary-text: var(--white-500);

  --button-transparent-background: hsl(var(--white-500-hsl) / 0.1);

  --button-transparent-background-active: hsl(var(--white-500-hsl) / 0.01);

  --button-transparent-background-hover: hsl(var(--white-500-hsl) / 0.05);

  --button-transparent-text: var(--primary-130);

  --card-gradient-bg: hsl(var(--black-hsl) / 0.4);

  --card-gradient-pressed-bg: hsl(var(--black-hsl) / 0.5);

  --card-primary-bg: var(--primary-600);

  --card-primary-pressed-bg: var(--primary-645);

  --card-secondary-bg: var(--primary-630);

  --card-secondary-pressed-bg: var(--primary-645);

  --channel-icon: var(--primary-400);

  --channel-text-area-placeholder: var(--primary-430);

  --channels-default: var(--primary-360);

  --channeltextarea-background: var(--primary-560);

  --chat-background: var(--primary-600);

  --chat-banner-bg: var(--primary-630);

  --chat-border: var(--primary-700);

  --chat-input-container-background: var(--primary-600);

  --chat-swipe-to-reply-background: var(--primary-660);

  --chat-swipe-to-reply-gradient-background: hsl(var(--black-hsl) / 0.1);

  --coachmark-bg: var(--primary-800);

  --content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl) / 0.24);

  --content-inventory-overlay-text-primary: hsl(var(--white-hsl) / 0.85);

  --content-inventory-overlay-text-secondary: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod-bg: hsl(var(--black-hsl) / 0.1);

  --context-menu-backdrop-background: hsl(var(--black-hsl) / 0.7);

  --control-brand-foreground: var(--brand-360);

  --control-brand-foreground-new: var(--brand-360);

  --creator-revenue-icon-gradient-end: var(--teal-430);

  --creator-revenue-icon-gradient-start: var(--teal-360);

  --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1);

  --creator-revenue-info-box-border: var(--teal-400);

  --creator-revenue-locked-channel-icon: var(--teal-345);

  --creator-revenue-progress-bar: var(--teal-400);

  --custom-status-bubble-bg: var(--primary-800);

  --deprecated-card-bg: hsl(var(--primary-700-hsl) / 0.6);

  --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3);

  --deprecated-text-input-bg: var(--primary-700);

  --deprecated-text-input-border: hsl(var(--black-hsl) / 0.3);

  --deprecated-text-input-border-disabled: var(--primary-700);

  --deprecated-text-input-border-hover: var(--primary-900);

  --display-banner-overflow-background: hsl(var(--primary-700-hsl) / 0.5);

  --divider-strong: hsl(var(--white-hsl) / 0.16);

  --divider-subtle: hsl(var(--white-hsl) / 0.08);

  --embed-background: var(--primary-630);

  --embed-background-alternate: var(--primary-600);

  --embed-title: var(--primary-130);

  --expression-picker-bg: var(--primary-630);

  --focus-primary: var(--blue-345);

  --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl) / 0.8);

  --forum-post-tag-background: hsl(var(--primary-660-hsl) / 0.9);

  --guild-notifications-bottom-sheet-pill-background: var(--primary-700);

  --header-muted: var(--primary-360);

  --header-primary: var(--primary-130);

  --header-secondary: var(--primary-330);

  --home-background: var(--primary-645);

  --icon-muted: var(--primary-400);

  --icon-primary: var(--primary-130);

  --icon-secondary: var(--primary-330);

  --icon-transparent: hsl(var(--transparent-hsl) / 0);

  --info-box-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-danger-background: hsl(var(--red-400-hsl) / 0.1);

  --info-danger-foreground: var(--red-400);

  --info-danger-text: var(--white);

  --info-help-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-help-foreground: var(--blue-345);

  --info-help-text: var(--white);

  --info-positive-background: hsl(var(--green-360-hsl) / 0.1);

  --info-positive-foreground: var(--green-360);

  --info-positive-text: var(--white);

  --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1);

  --info-warning-foreground: var(--yellow-300);

  --info-warning-text: var(--white);

  --input-background: var(--primary-700);

  --input-border: hsl(var(--plum-11-hsl) / 0.32);

  --input-error-background: hsl(var(--red-500-hsl) / 0.12);

  --input-error-border: var(--red-360);

  --input-error-text: var(--red-260);

  --input-focused-border: hsl(var(--white-hsl) / 0.16);

  --input-placeholder-text: var(--input-placeholder-text-dark);

  --interactive-active: var(--white);

  --interactive-hover: var(--primary-230);

  --interactive-muted: var(--primary-500);

  --interactive-normal: var(--primary-330);

  --leaderboard-league-brand-text: var(--lol-text-light);

  --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5);

  --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-hsl) / 0.025);

  --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975);

  --legacy-blur-fallback-ultra-thin: hsl(var(--black-hsl) / 0.95);

  --live-stage-tile-border: hsl(var(--primary-500-hsl) / 0.6);

  --logo-primary: var(--white);

  --mention-background: hsl(var(--brand-500-hsl) / 0.3);

  --mention-foreground: var(--brand-260);

  --menu-item-danger-active-bg: var(--red-530);

  --menu-item-danger-hover-bg: var(--red-430);

  --menu-item-default-active-bg: var(--brand-560);

  --menu-item-default-hover-bg: var(--brand-500);

  --message-reacted-background: hsl(var(--brand-500-hsl) / 0.15);

  --message-reacted-text: var(--brand-200);

  --modal-background: var(--primary-600);

  --modal-footer-background: var(--primary-630);

  --navigator-header-tint: var(--white);

  --panel-bg: var(--primary-600);

  --polls-normal-fill-hover: var(--primary-600);

  --polls-normal-image-background: var(--primary-660);

  --polls-victor-fill: hsl(var(--green-360-hsl) / 0.2);

  --polls-voted-fill: hsl(var(--brand-500-hsl) / 0.2);

  --premium-nitro-pink-text: var(--premium-nitro-pink-light);

  --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48);

  --profile-gradient-note-background: hsl(var(--black-hsl) / 0.3);

  --profile-gradient-overlay: hsl(var(--black-hsl) / 0.6);

  --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-hsl) / 0.8);

  --profile-gradient-profile-body-background-hover: hsl(var(--white-hsl) / 0.16);

  --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5);

  --profile-gradient-role-pill-border: hsl(var(--white-hsl) / 0.2);

  --profile-gradient-section-box: hsl(var(--black-hsl) / 0.45);

  --redesign-activity-card-badge-icon: var(--primary-360);

  --redesign-button-active-background: var(--green-430);

  --redesign-button-active-pressed-background: var(--green-460);

  --redesign-button-active-text: var(--white);

  --redesign-button-danger-background: var(--red-430);

  --redesign-button-danger-pressed-background: var(--red-460);

  --redesign-button-danger-text: var(--white);

  --redesign-button-destructive-background: var(--red-430);

  --redesign-button-destructive-pressed-background: var(--red-460);

  --redesign-button-destructive-text: var(--white);

  --redesign-button-overlay-alpha-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-overlay-alpha-text: var(--white);

  --redesign-button-overlay-background: var(--white);

  --redesign-button-overlay-text: var(--primary-860);

  --redesign-button-positive-background: var(--green-430);

  --redesign-button-positive-pressed-background: var(--green-460);

  --redesign-button-positive-text: var(--white);

  --redesign-button-premium-primary-blue-for-gradient: var(--premium-tier-0-blue-for-gradients-2);

  --redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);

  --redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl) / 0.1);

  --redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);

  --redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);

  --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0);

  --redesign-button-primary-alt-border: var(--brand-360);

  --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0);

  --redesign-button-primary-alt-on-blurple-border: var(--white);

  --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530);

  --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360);

  --redesign-button-primary-alt-on-blurple-text: var(--white);

  --redesign-button-primary-alt-pressed-background: hsl(var(--brand-700-hsl) / 0.16);

  --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5);

  --redesign-button-primary-alt-pressed-text: var(--brand-360);

  --redesign-button-primary-alt-text: var(--brand-360);

  --redesign-button-primary-background: var(--brand-500);

  --redesign-button-primary-on-blurple-pressed-text: var(--brand-530);

  --redesign-button-primary-overlay-background: var(--white);

  --redesign-button-primary-overlay-pressed-background: var(--primary-230);

  --redesign-button-primary-overlay-text: var(--primary-860);

  --redesign-button-primary-pressed-background: var(--brand-560);

  --redesign-button-primary-text: var(--white);

  --redesign-button-secondary-background: var(--primary-460);

  --redesign-button-secondary-border: hsl(var(--white-hsl) / 0.08);

  --redesign-button-secondary-overlay-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-secondary-overlay-text: var(--white);

  --redesign-button-secondary-pressed-background: var(--primary-500);

  --redesign-button-secondary-pressed-border: hsl(var(--transparent-hsl) / 0);

  --redesign-button-secondary-text: var(--primary-230);

  --redesign-button-selected-background: hsl(var(--brand-500-hsl) / 0.24);

  --redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl) / 0.28);

  --redesign-button-selected-text: var(--brand-500);

  --redesign-button-tertiary-background: var(--primary-660);

  --redesign-button-tertiary-pressed-background: var(--primary-560);

  --redesign-button-tertiary-pressed-text: var(--primary-330);

  --redesign-button-tertiary-text: var(--primary-230);

  --redesign-channel-name-muted-text: var(--primary-360);

  --redesign-channel-name-text: var(--primary-130);

  --redesign-chat-input-background: var(--primary-700);

  --redesign-image-button-pressed-background: hsl(var(--black-hsl) / 0.08);

  --redesign-input-control-active-bg: var(--primary-645);

  --redesign-input-control-selected: var(--brand-500);

  --scrollbar-auto-scrollbar-color-thumb: var(--primary-730);

  --scrollbar-auto-scrollbar-color-track: var(--primary-630);

  --scrollbar-auto-thumb: var(--primary-730);

  --scrollbar-auto-track: var(--primary-630);

  --scrollbar-thin-thumb: var(--primary-730);

  --scrollbar-thin-track: hsl(var(--black-hsl) / 0);

  --spine-default: var(--primary-500);

  --spoiler-hidden-background: var(--primary-700);

  --spoiler-revealed-background: var(--primary-660);

  --stage-card-pill-bg: var(--primary-630);

  --status-danger: var(--red-400);

  --status-danger-background: var(--red-430);

  --status-danger-text: var(--white);

  --status-dnd: var(--red-400);

  --status-idle: var(--yellow-300);

  --status-offline: var(--primary-360);

  --status-online: var(--green-360);

  --status-positive: var(--green-360);

  --status-positive-background: var(--green-430);

  --status-positive-text: var(--white);

  --status-speaking: var(--green-360);

  --status-warning: var(--yellow-300);

  --status-warning-background: var(--yellow-300);

  --status-warning-text: var(--black);

  --text-brand: var(--brand-360);

  --text-danger: var(--red-345);

  --text-link: var(--blue-345);

  --text-link-low-saturation: var(--blue-330);

  --text-low-contrast: var(--primary-360);

  --text-message-preview-low-sat: var(--primary-360);

  --text-muted: var(--primary-360);

  --text-muted-on-default: var(--primary-330);

  --text-normal: var(--primary-230);

  --text-positive: var(--green-330);

  --text-primary: var(--primary-230);

  --text-secondary: var(--primary-330);

  --text-warning: var(--yellow-300);

  --textbox-markdown-syntax: var(--primary-360);

  --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96);

  --thread-channel-spine: var(--primary-500);

  --toast-bg: var(--primary-800);

  --typing-indicator-bg: var(--primary-630);

  --user-profile-header-overflow-background: hsl(var(--primary-700-hsl) / 0.5);

  --voice-video-video-tile-background: hsl(var(--plum-17-hsl) / 0.4);

  --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48);
}

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.theme-dark {
  --action-sheet-gradient-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-icon-overlay: color-mix(
    in oklab,
    hsl(var(--primary-600-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --alert-bg: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --android-navigation-bar-background: color-mix(
    in oklab,
    var(--primary-830) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --android-navigation-scrim-background: color-mix(
    in oklab,
    hsl(var(--primary-830-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --android-ripple: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.07) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.07) var(--theme-base-color-amount, 0%)
  );
  --autocomplete-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-accent: color-mix(
    in oklab,
    var(--primary-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-floating: color-mix(
    in oklab,
    var(--primary-800) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned-hover: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.05) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.05) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod-hover: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight-hover: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --background-message-hover: color-mix(
    in oklab,
    hsl(var(--primary-900-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-primary: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-secondary: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-accent: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-active: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-hover: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-selected: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --background-nested-floating: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-primary: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary-alt: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-tertiary: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-immersive: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-no-opacity: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-primary: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-secondary: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-tertiary: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-faint: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-strong: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-subtle: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay: color-mix(
    in oklab,
    var(--primary-800) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay-tmp: color-mix(
    in oklab,
    var(--primary-800) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-raised: color-mix(
    in oklab,
    var(--primary-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback-pressed: color-mix(
    in oklab,
    hsl(var(--primary-730-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --border-faint: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.03) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.03) var(--theme-base-color-amount, 0%)
  );
  --border-strong: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --border-subtle: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --bug-reporter-modal-submitting-background: color-mix(
    in oklab,
    hsl(var(--primary-800-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-pressed-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --card-primary-bg: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-primary-pressed-bg: color-mix(
    in oklab,
    var(--primary-645) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-pressed-bg: color-mix(
    in oklab,
    var(--primary-645) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --channel-icon: color-mix(
    in oklab,
    var(--primary-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channel-text-area-placeholder: color-mix(
    in oklab,
    var(--primary-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channels-default: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channeltextarea-background: color-mix(
    in oklab,
    var(--primary-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-background: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-banner-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-border: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-input-container-background: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-background: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-gradient-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --coachmark-bg: color-mix(
    in oklab,
    var(--primary-800) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-media-seekbar-container: color-mix(
    in oklab,
    hsl(var(--plum-6-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-primary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-secondary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --context-menu-backdrop-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --control-brand-foreground: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --control-brand-foreground-new: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-end: color-mix(
    in oklab,
    var(--teal-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-start: color-mix(
    in oklab,
    var(--teal-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-background: color-mix(
    in oklab,
    hsl(var(--teal-430-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-border: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-locked-channel-icon: color-mix(
    in oklab,
    var(--teal-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-progress-bar: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --custom-status-bubble-bg: color-mix(
    in oklab,
    var(--primary-800) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-bg: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-editable-bg: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-bg: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-disabled: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-hover: color-mix(
    in oklab,
    var(--primary-900) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --display-banner-overflow-background: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --divider-strong: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --divider-subtle: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --embed-background: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-background-alternate: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-title: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --expression-picker-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --focus-primary: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --forum-post-extra-media-count-container-background: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --forum-post-tag-background: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.9) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.9) var(--theme-base-color-amount, 0%)
  );
  --guild-notifications-bottom-sheet-pill-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --header-muted: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-primary: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-secondary: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --home-background: color-mix(
    in oklab,
    var(--primary-645) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --icon-muted: color-mix(
    in oklab,
    var(--primary-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-primary: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-secondary: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-transparent: color-mix(
    in oklab,
    hsl(var(--transparent-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-text-color-amount, 0%)
  );
  --info-box-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-background: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-foreground: color-mix(
    in oklab,
    var(--red-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-help-foreground: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-background: color-mix(
    in oklab,
    hsl(var(--green-360-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-positive-foreground: color-mix(
    in oklab,
    var(--green-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-background: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-warning-foreground: color-mix(
    in oklab,
    var(--yellow-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --input-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.32) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.32) var(--theme-base-color-amount, 0%)
  );
  --input-error-background: color-mix(
    in oklab,
    hsl(var(--red-500-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --input-error-border: color-mix(
    in oklab,
    var(--red-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --input-error-text: color-mix(
    in oklab,
    var(--red-260) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-focused-border: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --input-placeholder-text: color-mix(
    in oklab,
    var(--input-placeholder-text-dark) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-active: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-hover: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-muted: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-normal: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --leaderboard-league-brand-text: color-mix(
    in oklab,
    var(--lol-text-light) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --legacy-android-blur-overlay-default: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --legacy-android-blur-overlay-ultra-thin: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.025) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.025) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-default: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.975) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.975) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-ultra-thin: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.95) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.95) var(--theme-base-color-amount, 0%)
  );
  --live-stage-tile-border: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --logo-primary: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --mention-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --mention-foreground: color-mix(
    in oklab,
    var(--brand-260) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --menu-item-danger-active-bg: color-mix(
    in oklab,
    var(--red-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-danger-hover-bg: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-active-bg: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-hover-bg: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.15) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-text: color-mix(
    in oklab,
    var(--brand-200) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --modal-background: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --modal-footer-background: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --navigator-header-tint: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --panel-bg: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-fill-hover: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-image-background: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-victor-fill: color-mix(
    in oklab,
    hsl(var(--green-360-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --polls-voted-fill: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --premium-nitro-pink-text: color-mix(
    in oklab,
    var(--premium-nitro-pink-light) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --profile-gradient-message-input-border: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-note-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay-synced-with-user-theme: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-profile-body-background-hover: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-background: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-border: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-section-box: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.45) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.45) var(--theme-base-color-amount, 0%)
  );
  --redesign-activity-card-badge-icon: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-active-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-danger-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-destructive-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-positive-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-premium-primary-blue-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-0-blue-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pink-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-pink-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient-2: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-border: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-background: color-mix(
    in oklab,
    hsl(var(--brand-530-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-border: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-background: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-border: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-700-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-border: color-mix(
    in oklab,
    hsl(var(--brand-400-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-text: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-text: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-background: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-on-blurple-pressed-text: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-pressed-background: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-pressed-background: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-background: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-border: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-background: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-border: color-mix(
    in oklab,
    hsl(var(--transparent-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-text: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-selected-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.28) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.28) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-text: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-background: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-background: color-mix(
    in oklab,
    var(--primary-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-text: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-text: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-muted-text: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-text: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-chat-input-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-image-button-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-active-bg: color-mix(
    in oklab,
    var(--primary-645) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-selected: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-thumb: color-mix(
    in oklab,
    var(--primary-730) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-track: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-thumb: color-mix(
    in oklab,
    var(--primary-730) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-track: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-thumb: color-mix(
    in oklab,
    var(--primary-730) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-track: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --spine-default: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-hidden-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-revealed-background: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --stage-card-pill-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --text-brand: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-danger: color-mix(
    in oklab,
    var(--red-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link-low-saturation: color-mix(
    in oklab,
    var(--blue-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-low-contrast: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-message-preview-low-sat: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted-on-default: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-normal: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-positive: color-mix(
    in oklab,
    var(--green-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-primary: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-secondary: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-warning: color-mix(
    in oklab,
    var(--yellow-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --textbox-markdown-syntax: color-mix(
    in oklab,
    var(--primary-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --theme-locked-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --thread-channel-spine: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --toast-bg: color-mix(
    in oklab,
    var(--primary-800) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --typing-indicator-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --user-profile-header-overflow-background: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-background: color-mix(
    in oklab,
    hsl(var(--plum-17-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
}
}

.theme-light {
  --action-sheet-gradient-bg: var(--primary-130);

  --activity-card-background: var(--white);

  --activity-card-icon-overlay: hsl(var(--primary-600-hsl) / 0.85);

  --alert-bg: var(--white);

  --android-navigation-bar-background: var(--primary-100);

  --android-navigation-scrim-background: hsl(var(--primary-100-hsl) / 0.5);

  --android-ripple: hsl(var(--black-hsl) / 0.12);

  --autocomplete-bg: var(--primary-100);

  --background-accent: var(--primary-430);

  --background-floating: var(--white);

  --background-mentioned: hsl(var(--yellow-300-hsl) / 0.1);

  --background-mentioned-hover: hsl(var(--yellow-300-hsl) / 0.2);

  --background-message-automod: hsl(var(--red-400-hsl) / 0.05);

  --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1);

  --background-message-highlight: hsl(var(--brand-360-hsl) / 0.1);

  --background-message-highlight-hover: hsl(var(--brand-360-hsl) / 0.2);

  --background-message-hover: hsl(var(--primary-900-hsl) / 0.03);

  --background-mobile-primary: var(--primary-100);

  --background-mobile-secondary: var(--white);

  --background-modifier-accent: hsl(var(--primary-400-hsl) / 0.24);

  --background-modifier-active: hsl(var(--primary-400-hsl) / 0.2);

  --background-modifier-hover: hsl(var(--primary-400-hsl) / 0.16);

  --background-modifier-selected: hsl(var(--primary-400-hsl) / 0.24);

  --background-nested-floating: var(--white);

  --background-primary: var(--white);

  --background-secondary: var(--primary-130);

  --background-secondary-alt: var(--primary-160);

  --background-tertiary: var(--primary-200);

  --badge-brand-bg: var(--brand-260);

  --badge-brand-text: var(--brand-560);

  --bg-backdrop: hsl(var(--black-hsl) / 0.54);

  --bg-backdrop-immersive: hsl(var(--black-hsl) / 0.8);

  --bg-backdrop-no-opacity: var(--black);

  --bg-base-primary: var(--white);

  --bg-base-secondary: var(--primary-130);

  --bg-base-tertiary: var(--primary-160);

  --bg-brand: var(--brand-500);

  --bg-mod-faint: hsl(var(--primary-400-hsl) / 0.08);

  --bg-mod-strong: hsl(var(--primary-400-hsl) / 0.24);

  --bg-mod-subtle: hsl(var(--primary-400-hsl) / 0.16);

  --bg-surface-overlay: var(--white);

  --bg-surface-overlay-tmp: var(--primary-130);

  --bg-surface-raised: var(--white);

  --blur-fallback: hsl(var(--primary-530-hsl) / 0.96);

  --blur-fallback-pressed: hsl(var(--primary-560-hsl) / 0.96);

  --border-faint: hsl(var(--black-hsl) / 0.04);

  --border-strong: hsl(var(--black-hsl) / 0.16);

  --border-subtle: hsl(var(--black-hsl) / 0.08);

  --bug-reporter-modal-submitting-background: hsl(var(--white-hsl) / 0.6);

  --button-creator-revenue-background: var(--teal-430);

  --button-danger-background: var(--red-430);

  --button-danger-background-active: var(--red-530);

  --button-danger-background-disabled: var(--red-430);

  --button-danger-background-hover: var(--red-500);

  --button-danger-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-background: var(--brand-500);

  --button-filled-brand-background-active: var(--brand-600);

  --button-filled-brand-background-hover: var(--brand-560);

  --button-filled-brand-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-inverted-background: var(--white);

  --button-filled-brand-inverted-background-active: var(--brand-200);

  --button-filled-brand-inverted-background-hover: var(--brand-100);

  --button-filled-brand-inverted-text: var(--brand-500);

  --button-filled-brand-text: var(--white);

  --button-filled-white-background: var(--white-500);

  --button-filled-white-background-active: var(--white-500);

  --button-filled-white-background-hover: var(--white-500);

  --button-filled-white-text: var(--primary-500);

  --button-outline-brand-background: hsl(var(--white-hsl) / 0);

  --button-outline-brand-background-active: var(--brand-560);

  --button-outline-brand-background-hover: var(--brand-500);

  --button-outline-brand-border: var(--brand-500);

  --button-outline-brand-border-active: var(--brand-560);

  --button-outline-brand-border-hover: var(--brand-500);

  --button-outline-brand-text: var(--black);

  --button-outline-brand-text-active: var(--white);

  --button-outline-brand-text-hover: var(--white);

  --button-outline-danger-background: hsl(var(--white-hsl) / 0);

  --button-outline-danger-background-active: var(--red-460);

  --button-outline-danger-background-hover: var(--red-430);

  --button-outline-danger-border: var(--red-430);

  --button-outline-danger-border-active: var(--red-430);

  --button-outline-danger-border-hover: var(--red-430);

  --button-outline-danger-text: var(--black);

  --button-outline-danger-text-active: var(--white);

  --button-outline-danger-text-hover: var(--white);

  --button-outline-positive-background: hsl(var(--white-hsl) / 0);

  --button-outline-positive-background-active: var(--green-530);

  --button-outline-positive-background-hover: var(--green-430);

  --button-outline-positive-border: var(--green-400);

  --button-outline-positive-border-active: var(--green-530);

  --button-outline-positive-border-hover: var(--green-430);

  --button-outline-positive-text: var(--black);

  --button-outline-positive-text-active: var(--white);

  --button-outline-positive-text-hover: var(--white);

  --button-outline-primary-background: hsl(var(--white-hsl) / 0);

  --button-outline-primary-background-active: var(--primary-600);

  --button-outline-primary-background-hover: var(--primary-530);

  --button-outline-primary-border: var(--primary-530);

  --button-outline-primary-border-active: var(--primary-600);

  --button-outline-primary-border-hover: var(--primary-530);

  --button-outline-primary-text: var(--black);

  --button-outline-primary-text-active: var(--white);

  --button-outline-primary-text-hover: var(--white);

  --button-positive-background: var(--green-430);

  --button-positive-background-active: var(--green-530);

  --button-positive-background-disabled: var(--green-430);

  --button-positive-background-hover: var(--green-530);

  --button-positive-border: hsl(var(--white-500-hsl) / 0);

  --button-secondary-background: var(--primary-430);

  --button-secondary-background-active: var(--primary-530);

  --button-secondary-background-disabled: var(--primary-430);

  --button-secondary-background-hover: var(--primary-500);

  --button-secondary-text: var(--white-500);

  --button-transparent-background: hsl(var(--primary-400-hsl) / 0.01);

  --button-transparent-background-active: hsl(var(--primary-400-hsl) / 0.25);

  --button-transparent-background-hover: hsl(var(--primary-400-hsl) / 0.2);

  --button-transparent-text: var(--primary-860);

  --card-gradient-bg: hsl(var(--white-hsl) / 0.7);

  --card-gradient-pressed-bg: hsl(var(--white-hsl) / 0.5);

  --card-primary-bg: var(--white);

  --card-primary-pressed-bg: var(--primary-160);

  --card-secondary-bg: var(--white);

  --card-secondary-pressed-bg: var(--primary-160);

  --channel-icon: var(--primary-430);

  --channel-text-area-placeholder: var(--primary-400);

  --channels-default: var(--primary-460);

  --channeltextarea-background: var(--primary-160);

  --chat-background: var(--white);

  --chat-banner-bg: var(--primary-130);

  --chat-border: var(--primary-200);

  --chat-input-container-background: var(--white);

  --chat-swipe-to-reply-background: var(--primary-160);

  --chat-swipe-to-reply-gradient-background: hsl(var(--white-hsl) / 0.4);

  --coachmark-bg: var(--white);

  --content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl) / 0.24);

  --content-inventory-overlay-text-primary: hsl(var(--white-hsl) / 0.85);

  --content-inventory-overlay-text-secondary: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod-bg: hsl(var(--black-hsl) / 0.1);

  --context-menu-backdrop-background: hsl(var(--black-hsl) / 0.54);

  --control-brand-foreground: var(--brand-500);

  --control-brand-foreground-new: var(--brand-500);

  --creator-revenue-icon-gradient-end: var(--teal-400);

  --creator-revenue-icon-gradient-start: var(--teal-345);

  --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1);

  --creator-revenue-info-box-border: var(--teal-400);

  --creator-revenue-locked-channel-icon: var(--teal-400);

  --creator-revenue-progress-bar: var(--teal-345);

  --custom-status-bubble-bg: var(--white);

  --deprecated-card-bg: var(--primary-100);

  --deprecated-card-editable-bg: hsl(var(--primary-100-hsl) / 0.6);

  --deprecated-text-input-bg: var(--primary-200);

  --deprecated-text-input-border: hsl(var(--primary-500-hsl) / 0.3);

  --deprecated-text-input-border-disabled: var(--primary-200);

  --deprecated-text-input-border-hover: var(--primary-300);

  --display-banner-overflow-background: hsl(var(--white-hsl) / 0.5);

  --divider-strong: hsl(var(--black-hsl) / 0.16);

  --divider-subtle: hsl(var(--black-hsl) / 0.08);

  --embed-background: var(--primary-130);

  --embed-background-alternate: var(--primary-200);

  --embed-title: var(--primary-860);

  --expression-picker-bg: var(--primary-130);

  --focus-primary: var(--blue-360);

  --forum-post-extra-media-count-container-background: hsl(var(--primary-160-hsl) / 0.8);

  --forum-post-tag-background: hsl(var(--primary-160-hsl) / 0.9);

  --guild-notifications-bottom-sheet-pill-background: var(--white);

  --header-muted: var(--primary-460);

  --header-primary: var(--primary-860);

  --header-secondary: var(--primary-500);

  --home-background: var(--primary-100);

  --icon-muted: var(--primary-400);

  --icon-primary: var(--primary-860);

  --icon-secondary: var(--primary-500);

  --icon-transparent: hsl(var(--transparent-hsl) / 0);

  --info-box-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-danger-background: hsl(var(--red-430-hsl) / 0.1);

  --info-danger-foreground: var(--red-430);

  --info-danger-text: var(--black);

  --info-help-background: hsl(var(--blue-430-hsl) / 0.1);

  --info-help-foreground: var(--blue-430);

  --info-help-text: var(--black);

  --info-positive-background: hsl(var(--green-400-hsl) / 0.05);

  --info-positive-foreground: var(--green-400);

  --info-positive-text: var(--black);

  --info-warning-background: hsl(var(--yellow-400-hsl) / 0.1);

  --info-warning-foreground: var(--yellow-400);

  --info-warning-text: var(--black);

  --input-background: hsl(var(--black-hsl) / 0.08);

  --input-border: hsl(var(--plum-11-hsl) / 0.32);

  --input-error-background: hsl(var(--red-500-hsl) / 0.12);

  --input-error-border: var(--red-360);

  --input-error-text: var(--red-700);

  --input-focused-border: hsl(var(--black-hsl) / 0.16);

  --input-placeholder-text: var(--primary-460);

  --interactive-active: var(--primary-860);

  --interactive-hover: var(--primary-600);

  --interactive-muted: var(--primary-300);

  --interactive-normal: var(--primary-500);

  --leaderboard-league-brand-text: var(--lol-text-dark);

  --legacy-android-blur-overlay-default: hsl(var(--primary-130-hsl) / 0.1);

  --legacy-android-blur-overlay-ultra-thin: hsl(var(--white-hsl) / 0.25);

  --legacy-blur-fallback-default: hsl(var(--primary-230-hsl) / 0.975);

  --legacy-blur-fallback-ultra-thin: hsl(var(--white-hsl) / 0.95);

  --live-stage-tile-border: hsl(var(--primary-430-hsl) / 0.15);

  --logo-primary: var(--brand-500);

  --mention-background: hsl(var(--brand-500-hsl) / 0.15);

  --mention-foreground: var(--brand-560);

  --menu-item-danger-active-bg: var(--red-530);

  --menu-item-danger-hover-bg: var(--red-430);

  --menu-item-default-active-bg: var(--brand-560);

  --menu-item-default-hover-bg: var(--brand-500);

  --message-reacted-background: hsl(var(--brand-500-hsl) / 0.15);

  --message-reacted-text: var(--brand-560);

  --modal-background: var(--white);

  --modal-footer-background: var(--primary-130);

  --navigator-header-tint: var(--primary-500);

  --panel-bg: var(--white);

  --polls-normal-fill-hover: var(--primary-230);

  --polls-normal-image-background: var(--white);

  --polls-victor-fill: hsl(var(--green-400-hsl) / 0.2);

  --polls-voted-fill: hsl(var(--brand-500-hsl) / 0.2);

  --premium-nitro-pink-text: var(--premium-nitro-pink-dark);

  --profile-gradient-message-input-border: hsl(var(--primary-430-hsl) / 0.24);

  --profile-gradient-note-background: hsl(var(--white-hsl) / 0.3);

  --profile-gradient-overlay: hsl(var(--white-hsl) / 0.6);

  --profile-gradient-overlay-synced-with-user-theme: hsl(var(--white-hsl) / 0.8);

  --profile-gradient-profile-body-background-hover: hsl(var(--black-hsl) / 0.08);

  --profile-gradient-role-pill-background: hsl(var(--white-hsl) / 0.5);

  --profile-gradient-role-pill-border: hsl(var(--primary-660-hsl) / 0.2);

  --profile-gradient-section-box: hsl(var(--white-hsl) / 0.45);

  --redesign-activity-card-badge-icon: var(--primary-400);

  --redesign-button-active-background: var(--green-430);

  --redesign-button-active-pressed-background: var(--green-460);

  --redesign-button-active-text: var(--white);

  --redesign-button-danger-background: var(--red-430);

  --redesign-button-danger-pressed-background: var(--red-460);

  --redesign-button-danger-text: var(--white);

  --redesign-button-destructive-background: var(--red-430);

  --redesign-button-destructive-pressed-background: var(--red-460);

  --redesign-button-destructive-text: var(--white);

  --redesign-button-overlay-alpha-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-overlay-alpha-text: var(--white);

  --redesign-button-overlay-background: var(--white);

  --redesign-button-overlay-text: var(--primary-860);

  --redesign-button-positive-background: var(--green-430);

  --redesign-button-positive-pressed-background: var(--green-460);

  --redesign-button-positive-text: var(--white);

  --redesign-button-premium-primary-blue-for-gradient: var(--premium-tier-0-blue-for-gradients-2);

  --redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);

  --redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl) / 0.1);

  --redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);

  --redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);

  --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0);

  --redesign-button-primary-alt-border: var(--brand-500);

  --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0);

  --redesign-button-primary-alt-on-blurple-border: var(--white);

  --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530);

  --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360);

  --redesign-button-primary-alt-on-blurple-text: var(--white);

  --redesign-button-primary-alt-pressed-background: hsl(var(--brand-500-hsl) / 0.06);

  --redesign-button-primary-alt-pressed-border: var(--brand-330);

  --redesign-button-primary-alt-pressed-text: var(--brand-560);

  --redesign-button-primary-alt-text: var(--brand-500);

  --redesign-button-primary-background: var(--brand-500);

  --redesign-button-primary-on-blurple-pressed-text: var(--brand-530);

  --redesign-button-primary-overlay-background: var(--white);

  --redesign-button-primary-overlay-pressed-background: var(--primary-230);

  --redesign-button-primary-overlay-text: var(--primary-860);

  --redesign-button-primary-pressed-background: var(--brand-560);

  --redesign-button-primary-text: var(--white);

  --redesign-button-secondary-background: var(--white);

  --redesign-button-secondary-border: hsl(var(--black-hsl) / 0.08);

  --redesign-button-secondary-overlay-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-secondary-overlay-text: var(--white);

  --redesign-button-secondary-pressed-background: var(--primary-130);

  --redesign-button-secondary-pressed-border: hsl(var(--black-hsl) / 0.04);

  --redesign-button-secondary-text: var(--primary-600);

  --redesign-button-selected-background: hsl(var(--brand-500-hsl) / 0.16);

  --redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl) / 0.24);

  --redesign-button-selected-text: var(--brand-500);

  --redesign-button-tertiary-background: hsl(var(--black-hsl) / 0.08);

  --redesign-button-tertiary-pressed-background: hsl(var(--black-hsl) / 0.16);

  --redesign-button-tertiary-pressed-text: var(--primary-500);

  --redesign-button-tertiary-text: var(--primary-600);

  --redesign-channel-name-muted-text: var(--primary-460);

  --redesign-channel-name-text: var(--primary-860);

  --redesign-chat-input-background: hsl(var(--black-hsl) / 0.08);

  --redesign-image-button-pressed-background: hsl(var(--black-hsl) / 0.08);

  --redesign-input-control-active-bg: var(--white);

  --redesign-input-control-selected: var(--brand-500);

  --scrollbar-auto-scrollbar-color-thumb: var(--primary-230);

  --scrollbar-auto-scrollbar-color-track: var(--primary-130);

  --scrollbar-auto-thumb: var(--primary-300);

  --scrollbar-auto-track: var(--primary-160);

  --scrollbar-thin-thumb: hsl(var(--primary-500-hsl) / 0.3);

  --scrollbar-thin-track: hsl(var(--black-hsl) / 0);

  --spine-default: var(--primary-300);

  --spoiler-hidden-background: var(--primary-200);

  --spoiler-revealed-background: var(--primary-160);

  --stage-card-pill-bg: var(--white);

  --status-danger: var(--red-430);

  --status-danger-background: var(--red-430);

  --status-danger-text: var(--white);

  --status-dnd: var(--red-430);

  --status-idle: var(--yellow-400);

  --status-offline: var(--primary-460);

  --status-online: var(--green-400);

  --status-positive: var(--green-400);

  --status-positive-background: var(--green-430);

  --status-positive-text: var(--white);

  --status-speaking: var(--green-360);

  --status-warning: var(--yellow-400);

  --status-warning-background: var(--yellow-400);

  --status-warning-text: var(--white);

  --text-brand: var(--brand-500);

  --text-danger: var(--red-500);

  --text-link: var(--blue-430);

  --text-link-low-saturation: var(--blue-430);

  --text-low-contrast: var(--primary-460);

  --text-message-preview-low-sat: var(--primary-460);

  --text-muted: var(--primary-460);

  --text-muted-on-default: var(--primary-430);

  --text-normal: var(--primary-600);

  --text-positive: var(--green-430);

  --text-primary: var(--primary-600);

  --text-secondary: var(--primary-500);

  --text-warning: var(--yellow-430);

  --textbox-markdown-syntax: var(--primary-530);

  --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96);

  --thread-channel-spine: var(--primary-300);

  --toast-bg: var(--white);

  --typing-indicator-bg: var(--primary-130);

  --user-profile-header-overflow-background: hsl(var(--white-hsl) / 0.5);

  --voice-video-video-tile-background: hsl(var(--plum-17-hsl) / 0.4);

  --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48);
}

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.theme-light {
  --action-sheet-gradient-bg: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-icon-overlay: color-mix(
    in oklab,
    hsl(var(--primary-600-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --alert-bg: color-mix(in oklab, var(--white) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%));
  --android-navigation-bar-background: color-mix(
    in oklab,
    var(--primary-100) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --android-navigation-scrim-background: color-mix(
    in oklab,
    hsl(var(--primary-100-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --android-ripple: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --autocomplete-bg: color-mix(
    in oklab,
    var(--primary-100) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-accent: color-mix(
    in oklab,
    var(--primary-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-floating: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned-hover: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.05) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.05) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod-hover: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight-hover: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --background-message-hover: color-mix(
    in oklab,
    hsl(var(--primary-900-hsl) / 0.03) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.03) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-primary: color-mix(
    in oklab,
    var(--primary-100) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-secondary: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-accent: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-active: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-hover: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-selected: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --background-nested-floating: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-primary: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary-alt: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-tertiary: color-mix(
    in oklab,
    var(--primary-200) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-immersive: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-no-opacity: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-primary: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-secondary: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-tertiary: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-faint: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-strong: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-subtle: color-mix(
    in oklab,
    hsl(var(--primary-400-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay-tmp: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-raised: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-530-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback-pressed: color-mix(
    in oklab,
    hsl(var(--primary-560-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --border-faint: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.04) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.04) var(--theme-base-color-amount, 0%)
  );
  --border-strong: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --border-subtle: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --bug-reporter-modal-submitting-background: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-bg: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-pressed-bg: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --card-primary-bg: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-primary-pressed-bg: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-bg: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-pressed-bg: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --channel-icon: color-mix(
    in oklab,
    var(--primary-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channel-text-area-placeholder: color-mix(
    in oklab,
    var(--primary-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channels-default: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channeltextarea-background: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-banner-bg: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-border: color-mix(
    in oklab,
    var(--primary-200) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-input-container-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-background: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-gradient-background: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --coachmark-bg: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-media-seekbar-container: color-mix(
    in oklab,
    hsl(var(--plum-6-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-primary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-secondary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --context-menu-backdrop-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --control-brand-foreground: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --control-brand-foreground-new: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-end: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-start: color-mix(
    in oklab,
    var(--teal-345) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-background: color-mix(
    in oklab,
    hsl(var(--teal-430-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-border: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-locked-channel-icon: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-progress-bar: color-mix(
    in oklab,
    var(--teal-345) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --custom-status-bubble-bg: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-bg: color-mix(
    in oklab,
    var(--primary-100) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-editable-bg: color-mix(
    in oklab,
    hsl(var(--primary-100-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-bg: color-mix(
    in oklab,
    var(--primary-200) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-disabled: color-mix(
    in oklab,
    var(--primary-200) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-hover: color-mix(
    in oklab,
    var(--primary-300) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --display-banner-overflow-background: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --divider-strong: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --divider-subtle: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --embed-background: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-background-alternate: color-mix(
    in oklab,
    var(--primary-200) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-title: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --expression-picker-bg: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --focus-primary: color-mix(
    in oklab,
    var(--blue-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --forum-post-extra-media-count-container-background: color-mix(
    in oklab,
    hsl(var(--primary-160-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --forum-post-tag-background: color-mix(
    in oklab,
    hsl(var(--primary-160-hsl) / 0.9) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.9) var(--theme-base-color-amount, 0%)
  );
  --guild-notifications-bottom-sheet-pill-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --header-muted: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-primary: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-secondary: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --home-background: color-mix(
    in oklab,
    var(--primary-100) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --icon-muted: color-mix(
    in oklab,
    var(--primary-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-primary: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-secondary: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-transparent: color-mix(
    in oklab,
    hsl(var(--transparent-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-text-color-amount, 0%)
  );
  --info-box-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-background: color-mix(
    in oklab,
    hsl(var(--red-430-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-foreground: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-danger-text: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-background: color-mix(
    in oklab,
    hsl(var(--blue-430-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-help-foreground: color-mix(
    in oklab,
    var(--blue-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-text: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-background: color-mix(
    in oklab,
    hsl(var(--green-400-hsl) / 0.05) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.05) var(--theme-base-color-amount, 0%)
  );
  --info-positive-foreground: color-mix(
    in oklab,
    var(--green-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-text: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-background: color-mix(
    in oklab,
    hsl(var(--yellow-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-warning-foreground: color-mix(
    in oklab,
    var(--yellow-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-text: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --input-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.32) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.32) var(--theme-base-color-amount, 0%)
  );
  --input-error-background: color-mix(
    in oklab,
    hsl(var(--red-500-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --input-error-border: color-mix(
    in oklab,
    var(--red-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --input-error-text: color-mix(
    in oklab,
    var(--red-700) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-focused-border: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --input-placeholder-text: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-active: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-hover: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-muted: color-mix(
    in oklab,
    var(--primary-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-normal: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --leaderboard-league-brand-text: color-mix(
    in oklab,
    var(--lol-text-dark) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --legacy-android-blur-overlay-default: color-mix(
    in oklab,
    hsl(var(--primary-130-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --legacy-android-blur-overlay-ultra-thin: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.25) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.25) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-default: color-mix(
    in oklab,
    hsl(var(--primary-230-hsl) / 0.975) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.975) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-ultra-thin: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.95) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.95) var(--theme-base-color-amount, 0%)
  );
  --live-stage-tile-border: color-mix(
    in oklab,
    hsl(var(--primary-430-hsl) / 0.15) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15) var(--theme-base-color-amount, 0%)
  );
  --logo-primary: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --mention-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.15) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15) var(--theme-base-color-amount, 0%)
  );
  --mention-foreground: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --menu-item-danger-active-bg: color-mix(
    in oklab,
    var(--red-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-danger-hover-bg: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-active-bg: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-hover-bg: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.15) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-text: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --modal-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --modal-footer-background: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --navigator-header-tint: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --panel-bg: color-mix(in oklab, var(--white) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%));
  --polls-normal-fill-hover: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-image-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-victor-fill: color-mix(
    in oklab,
    hsl(var(--green-400-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --polls-voted-fill: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --premium-nitro-pink-text: color-mix(
    in oklab,
    var(--premium-nitro-pink-dark) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --profile-gradient-message-input-border: color-mix(
    in oklab,
    hsl(var(--primary-430-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-note-background: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay-synced-with-user-theme: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-profile-body-background-hover: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-background: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-border: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-section-box: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.45) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.45) var(--theme-base-color-amount, 0%)
  );
  --redesign-activity-card-badge-icon: color-mix(
    in oklab,
    var(--primary-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-active-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-danger-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-destructive-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-positive-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-premium-primary-blue-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-0-blue-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pink-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-pink-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient-2: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-border: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-background: color-mix(
    in oklab,
    hsl(var(--brand-530-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-border: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-background: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-border: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-border: color-mix(
    in oklab,
    var(--brand-330) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-text: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-text: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-background: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-on-blurple-pressed-text: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-pressed-background: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-pressed-background: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-border: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-background: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-border: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.04) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.04) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-text: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-selected-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-text: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-text: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-text: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-muted-text: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-chat-input-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-image-button-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-active-bg: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-selected: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-thumb: color-mix(
    in oklab,
    var(--primary-230) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-track: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-thumb: color-mix(
    in oklab,
    var(--primary-300) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-track: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-thumb: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-track: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --spine-default: color-mix(
    in oklab,
    var(--primary-300) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-hidden-background: color-mix(
    in oklab,
    var(--primary-200) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-revealed-background: color-mix(
    in oklab,
    var(--primary-160) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --stage-card-pill-bg: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --text-brand: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-danger: color-mix(
    in oklab,
    var(--red-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link: color-mix(
    in oklab,
    var(--blue-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link-low-saturation: color-mix(
    in oklab,
    var(--blue-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-low-contrast: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-message-preview-low-sat: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted: color-mix(
    in oklab,
    var(--primary-460) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted-on-default: color-mix(
    in oklab,
    var(--primary-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-normal: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-positive: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-primary: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-secondary: color-mix(
    in oklab,
    var(--primary-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-warning: color-mix(
    in oklab,
    var(--yellow-430) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --textbox-markdown-syntax: color-mix(
    in oklab,
    var(--primary-530) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --theme-locked-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --thread-channel-spine: color-mix(
    in oklab,
    var(--primary-300) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --toast-bg: color-mix(in oklab, var(--white) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%));
  --typing-indicator-bg: color-mix(
    in oklab,
    var(--primary-130) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --user-profile-header-overflow-background: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-background: color-mix(
    in oklab,
    hsl(var(--plum-17-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
}
}

.theme-midnight {
  --action-sheet-gradient-bg: var(--black);

  --activity-card-background: var(--primary-700);

  --activity-card-icon-overlay: hsl(var(--primary-600-hsl) / 0.85);

  --alert-bg: var(--black);

  --android-navigation-bar-background: var(--plum-24);

  --android-navigation-scrim-background: hsl(var(--plum-24-hsl) / 0.5);

  --android-ripple: hsl(var(--white-hsl) / 0.07);

  --autocomplete-bg: var(--primary-630);

  --background-accent: var(--plum-17);

  --background-floating: var(--plum-23);

  --background-mentioned: hsl(var(--yellow-260-hsl) / 0.08);

  --background-mentioned-hover: hsl(var(--yellow-300-hsl) / 0.08);

  --background-message-automod: hsl(var(--red-345-hsl) / 0.08);

  --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1);

  --background-message-highlight: hsl(var(--brand-360-hsl) / 0.08);

  --background-message-highlight-hover: hsl(var(--brand-360-hsl) / 0.06);

  --background-message-hover: var(--plum-21);

  --background-mobile-primary: var(--black);

  --background-mobile-secondary: var(--black);

  --background-modifier-accent: hsl(var(--plum-23-alpha-hsl) / 0.1);

  --background-modifier-active: hsl(var(--plum-13-hsl) / 0.48);

  --background-modifier-hover: hsl(var(--plum-13-hsl) / 0.3);

  --background-modifier-selected: hsl(var(--plum-13-hsl) / 0.6);

  --background-nested-floating: var(--black);

  --background-primary: var(--black);

  --background-secondary: var(--plum-23);

  --background-secondary-alt: var(--plum-17);

  --background-tertiary: var(--plum-19);

  --badge-brand-bg: var(--brand-260);

  --badge-brand-text: var(--brand-560);

  --bg-backdrop: hsl(var(--plum-19-hsl) / 0.75);

  --bg-backdrop-immersive: hsl(var(--plum-19-hsl) / 0.9);

  --bg-backdrop-no-opacity: var(--plum-19);

  --bg-base-primary: var(--black);

  --bg-base-secondary: var(--black);

  --bg-base-tertiary: var(--black);

  --bg-brand: var(--brand-500);

  --bg-mod-faint: hsl(var(--plum-11-hsl) / 0.16);

  --bg-mod-strong: hsl(var(--plum-11-hsl) / 0.18);

  --bg-mod-subtle: hsl(var(--plum-11-hsl) / 0.12);

  --bg-surface-overlay: var(--plum-19);

  --bg-surface-overlay-tmp: var(--plum-21);

  --bg-surface-raised: var(--plum-23);

  --blur-fallback: hsl(var(--plum-19-hsl) / 0.96);

  --blur-fallback-pressed: hsl(var(--plum-20-hsl) / 0.96);

  --border-faint: hsl(var(--plum-11-hsl) / 0.08);

  --border-strong: hsl(var(--plum-11-hsl) / 0.24);

  --border-subtle: hsl(var(--plum-11-hsl) / 0.14);

  --bug-reporter-modal-submitting-background: hsl(var(--plum-23-hsl) / 0.6);

  --button-creator-revenue-background: var(--teal-430);

  --button-danger-background: var(--red-430);

  --button-danger-background-active: var(--red-530);

  --button-danger-background-disabled: var(--red-430);

  --button-danger-background-hover: var(--red-500);

  --button-danger-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-background: var(--brand-500);

  --button-filled-brand-background-active: var(--brand-600);

  --button-filled-brand-background-hover: var(--brand-560);

  --button-filled-brand-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-inverted-background: var(--white);

  --button-filled-brand-inverted-background-active: var(--brand-200);

  --button-filled-brand-inverted-background-hover: var(--brand-100);

  --button-filled-brand-inverted-text: var(--brand-500);

  --button-filled-brand-text: var(--white);

  --button-filled-white-background: var(--white-500);

  --button-filled-white-background-active: var(--white-500);

  --button-filled-white-background-hover: var(--white-500);

  --button-filled-white-text: var(--primary-500);

  --button-outline-brand-background: hsl(var(--white-hsl) / 0);

  --button-outline-brand-background-active: var(--brand-560);

  --button-outline-brand-background-hover: var(--brand-500);

  --button-outline-brand-border: var(--brand-500);

  --button-outline-brand-border-active: var(--brand-560);

  --button-outline-brand-border-hover: var(--brand-500);

  --button-outline-brand-text: var(--white);

  --button-outline-brand-text-active: var(--white);

  --button-outline-brand-text-hover: var(--white);

  --button-outline-danger-background: hsl(var(--white-hsl) / 0);

  --button-outline-danger-background-active: var(--red-460);

  --button-outline-danger-background-hover: var(--red-430);

  --button-outline-danger-border: var(--red-400);

  --button-outline-danger-border-active: var(--red-430);

  --button-outline-danger-border-hover: var(--red-430);

  --button-outline-danger-text: var(--white);

  --button-outline-danger-text-active: var(--white);

  --button-outline-danger-text-hover: var(--white);

  --button-outline-positive-background: hsl(var(--white-hsl) / 0);

  --button-outline-positive-background-active: var(--green-530);

  --button-outline-positive-background-hover: var(--green-430);

  --button-outline-positive-border: var(--green-360);

  --button-outline-positive-border-active: var(--green-530);

  --button-outline-positive-border-hover: var(--green-430);

  --button-outline-positive-text: var(--white);

  --button-outline-positive-text-active: var(--white);

  --button-outline-positive-text-hover: var(--white);

  --button-outline-primary-background: hsl(var(--white-hsl) / 0);

  --button-outline-primary-background-active: var(--plum-11);

  --button-outline-primary-background-hover: var(--plum-13);

  --button-outline-primary-border: var(--primary-500);

  --button-outline-primary-border-active: var(--plum-11);

  --button-outline-primary-border-hover: var(--plum-13);

  --button-outline-primary-text: var(--white);

  --button-outline-primary-text-active: var(--white);

  --button-outline-primary-text-hover: var(--white);

  --button-positive-background: var(--green-430);

  --button-positive-background-active: var(--green-530);

  --button-positive-background-disabled: var(--green-430);

  --button-positive-background-hover: var(--green-530);

  --button-positive-border: hsl(var(--white-500-hsl) / 0);

  --button-secondary-background: var(--plum-13);

  --button-secondary-background-active: var(--plum-10);

  --button-secondary-background-disabled: var(--plum-13);

  --button-secondary-background-hover: var(--plum-11);

  --button-secondary-text: var(--white-500);

  --button-transparent-background: hsl(var(--white-500-hsl) / 0.1);

  --button-transparent-background-active: hsl(var(--white-500-hsl) / 0.01);

  --button-transparent-background-hover: hsl(var(--white-500-hsl) / 0.05);

  --button-transparent-text: var(--plum-2);

  --card-gradient-bg: hsl(var(--black-hsl) / 0.4);

  --card-gradient-pressed-bg: hsl(var(--black-hsl) / 0.5);

  --card-primary-bg: var(--plum-23);

  --card-primary-pressed-bg: var(--plum-25);

  --card-secondary-bg: var(--plum-25);

  --card-secondary-pressed-bg: var(--plum-26);

  --channel-icon: var(--plum-10);

  --channel-text-area-placeholder: var(--plum-11);

  --channels-default: var(--plum-9);

  --channeltextarea-background: var(--plum-23);

  --chat-background: var(--black);

  --chat-banner-bg: var(--black);

  --chat-border: var(--plum-20);

  --chat-input-container-background: var(--plum-16);

  --chat-swipe-to-reply-background: var(--plum-22);

  --chat-swipe-to-reply-gradient-background: hsl(var(--black-hsl) / 0.1);

  --coachmark-bg: var(--plum-19);

  --content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl) / 0.24);

  --content-inventory-overlay-text-primary: hsl(var(--white-hsl) / 0.85);

  --content-inventory-overlay-text-secondary: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod-bg: hsl(var(--black-hsl) / 0.1);

  --context-menu-backdrop-background: hsl(var(--black-hsl) / 0.7);

  --control-brand-foreground: var(--brand-360);

  --control-brand-foreground-new: var(--brand-360);

  --creator-revenue-icon-gradient-end: var(--teal-430);

  --creator-revenue-icon-gradient-start: var(--teal-360);

  --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1);

  --creator-revenue-info-box-border: var(--teal-400);

  --creator-revenue-locked-channel-icon: var(--teal-345);

  --creator-revenue-progress-bar: var(--teal-400);

  --custom-status-bubble-bg: var(--plum-19);

  --deprecated-card-bg: hsl(var(--primary-700-hsl) / 0.6);

  --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3);

  --deprecated-text-input-bg: var(--primary-700);

  --deprecated-text-input-border: hsl(var(--black-hsl) / 0.3);

  --deprecated-text-input-border-disabled: var(--primary-700);

  --deprecated-text-input-border-hover: var(--primary-900);

  --display-banner-overflow-background: hsl(var(--plum-20-hsl) / 0.5);

  --divider-strong: hsl(var(--plum-11-hsl) / 0.24);

  --divider-subtle: hsl(var(--plum-11-hsl) / 0.12);

  --embed-background: var(--plum-23);

  --embed-background-alternate: var(--primary-600);

  --embed-title: var(--plum-2);

  --expression-picker-bg: var(--black);

  --focus-primary: var(--blue-345);

  --forum-post-extra-media-count-container-background: hsl(var(--plum-19-hsl) / 0.8);

  --forum-post-tag-background: hsl(var(--plum-19-hsl) / 0.9);

  --guild-notifications-bottom-sheet-pill-background: var(--primary-700);

  --header-muted: var(--plum-10);

  --header-primary: var(--plum-2);

  --header-secondary: var(--plum-8);

  --home-background: var(--plum-18);

  --icon-muted: var(--plum-12);

  --icon-primary: var(--plum-5);

  --icon-secondary: var(--plum-9);

  --icon-transparent: hsl(var(--transparent-hsl) / 0);

  --info-box-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-danger-background: hsl(var(--red-400-hsl) / 0.1);

  --info-danger-foreground: var(--red-400);

  --info-danger-text: var(--white);

  --info-help-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-help-foreground: var(--blue-345);

  --info-help-text: var(--white);

  --info-positive-background: hsl(var(--green-360-hsl) / 0.1);

  --info-positive-foreground: var(--green-360);

  --info-positive-text: var(--white);

  --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1);

  --info-warning-foreground: var(--yellow-300);

  --info-warning-text: var(--white);

  --input-background: hsl(var(--plum-23-alpha-hsl) / 0.1);

  --input-border: hsl(var(--plum-11-hsl) / 0.32);

  --input-error-background: hsl(var(--red-500-hsl) / 0.12);

  --input-error-border: var(--red-360);

  --input-error-text: var(--red-260);

  --input-focused-border: hsl(var(--plum-11-hsl) / 0.24);

  --input-placeholder-text: var(--plum-9);

  --interactive-active: var(--plum-3);

  --interactive-hover: var(--plum-4);

  --interactive-muted: var(--plum-13);

  --interactive-normal: var(--plum-6);

  --leaderboard-league-brand-text: var(--lol-text-light);

  --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5);

  --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-hsl) / 0.025);

  --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975);

  --legacy-blur-fallback-ultra-thin: hsl(var(--black-hsl) / 0.95);

  --live-stage-tile-border: hsl(var(--plum-13-hsl) / 0.6);

  --logo-primary: var(--white);

  --mention-background: hsl(var(--brand-500-hsl) / 0.5);

  --mention-foreground: var(--brand-230);

  --menu-item-danger-active-bg: var(--red-530);

  --menu-item-danger-hover-bg: var(--red-430);

  --menu-item-default-active-bg: var(--brand-560);

  --menu-item-default-hover-bg: var(--brand-500);

  --message-reacted-background: hsl(var(--brand-500-hsl) / 0.15);

  --message-reacted-text: var(--brand-200);

  --modal-background: var(--plum-16);

  --modal-footer-background: var(--plum-17);

  --navigator-header-tint: var(--white);

  --panel-bg: var(--plum-24);

  --polls-normal-fill-hover: var(--primary-600);

  --polls-normal-image-background: var(--primary-660);

  --polls-victor-fill: hsl(var(--green-360-hsl) / 0.2);

  --polls-voted-fill: hsl(var(--brand-500-hsl) / 0.2);

  --premium-nitro-pink-text: var(--premium-nitro-pink-light);

  --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48);

  --profile-gradient-note-background: hsl(var(--black-hsl) / 0.3);

  --profile-gradient-overlay: hsl(var(--black-hsl) / 0.6);

  --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-hsl) / 0.8);

  --profile-gradient-profile-body-background-hover: hsl(var(--white-hsl) / 0.16);

  --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5);

  --profile-gradient-role-pill-border: hsl(var(--white-hsl) / 0.2);

  --profile-gradient-section-box: hsl(var(--black-hsl) / 0.45);

  --redesign-activity-card-badge-icon: var(--plum-11);

  --redesign-button-active-background: var(--green-430);

  --redesign-button-active-pressed-background: var(--green-460);

  --redesign-button-active-text: var(--white);

  --redesign-button-danger-background: var(--red-430);

  --redesign-button-danger-pressed-background: var(--red-460);

  --redesign-button-danger-text: var(--white);

  --redesign-button-destructive-background: var(--red-430);

  --redesign-button-destructive-pressed-background: var(--red-460);

  --redesign-button-destructive-text: var(--white);

  --redesign-button-overlay-alpha-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-overlay-alpha-text: var(--white);

  --redesign-button-overlay-background: var(--white);

  --redesign-button-overlay-text: var(--primary-860);

  --redesign-button-positive-background: var(--green-430);

  --redesign-button-positive-pressed-background: var(--green-460);

  --redesign-button-positive-text: var(--white);

  --redesign-button-premium-primary-blue-for-gradient: var(--premium-tier-0-blue-for-gradients-2);

  --redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);

  --redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl) / 0.1);

  --redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);

  --redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);

  --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0);

  --redesign-button-primary-alt-border: var(--brand-400);

  --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0);

  --redesign-button-primary-alt-on-blurple-border: var(--white);

  --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530);

  --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360);

  --redesign-button-primary-alt-on-blurple-text: var(--white);

  --redesign-button-primary-alt-pressed-background: hsl(var(--brand-700-hsl) / 0.16);

  --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5);

  --redesign-button-primary-alt-pressed-text: var(--brand-360);

  --redesign-button-primary-alt-text: var(--brand-400);

  --redesign-button-primary-background: var(--brand-500);

  --redesign-button-primary-on-blurple-pressed-text: var(--brand-530);

  --redesign-button-primary-overlay-background: var(--white);

  --redesign-button-primary-overlay-pressed-background: var(--plum-4);

  --redesign-button-primary-overlay-text: var(--plum-25);

  --redesign-button-primary-pressed-background: var(--brand-560);

  --redesign-button-primary-text: var(--white);

  --redesign-button-secondary-background: var(--plum-17);

  --redesign-button-secondary-border: hsl(var(--plum-11-hsl) / 0.14);

  --redesign-button-secondary-overlay-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-secondary-overlay-text: var(--white);

  --redesign-button-secondary-pressed-background: var(--plum-15);

  --redesign-button-secondary-pressed-border: hsl(var(--plum-11-hsl) / 0.08);

  --redesign-button-secondary-text: var(--plum-4);

  --redesign-button-selected-background: hsl(var(--brand-500-hsl) / 0.24);

  --redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl) / 0.28);

  --redesign-button-selected-text: var(--brand-500);

  --redesign-button-tertiary-background: hsl(var(--plum-23-alpha-hsl) / 0.1);

  --redesign-button-tertiary-pressed-background: hsl(var(--plum-11-hsl) / 0.2);

  --redesign-button-tertiary-pressed-text: var(--plum-6);

  --redesign-button-tertiary-text: var(--plum-4);

  --redesign-channel-name-muted-text: var(--plum-10);

  --redesign-channel-name-text: var(--plum-2);

  --redesign-chat-input-background: hsl(var(--plum-23-alpha-hsl) / 0.1);

  --redesign-image-button-pressed-background: hsl(var(--black-hsl) / 0.08);

  --redesign-input-control-active-bg: var(--plum-17);

  --redesign-input-control-selected: var(--brand-500);

  --scrollbar-auto-scrollbar-color-thumb: var(--plum-20);

  --scrollbar-auto-scrollbar-color-track: var(--plum-17);

  --scrollbar-auto-thumb: var(--plum-16);

  --scrollbar-auto-track: var(--plum-25);

  --scrollbar-thin-thumb: var(--plum-20);

  --scrollbar-thin-track: hsl(var(--black-hsl) / 0);

  --spine-default: var(--plum-13);

  --spoiler-hidden-background: var(--plum-14);

  --spoiler-revealed-background: hsl(var(--plum-11-hsl) / 0.16);

  --stage-card-pill-bg: var(--plum-25);

  --status-danger: var(--red-400);

  --status-danger-background: var(--red-430);

  --status-danger-text: var(--white);

  --status-dnd: var(--red-400);

  --status-idle: var(--yellow-300);

  --status-offline: var(--plum-9);

  --status-online: var(--green-360);

  --status-positive: var(--green-360);

  --status-positive-background: var(--green-430);

  --status-positive-text: var(--white);

  --status-speaking: var(--green-360);

  --status-warning: var(--yellow-300);

  --status-warning-background: var(--yellow-300);

  --status-warning-text: var(--black);

  --text-brand: var(--brand-400);

  --text-danger: var(--red-345);

  --text-link: var(--blue-345);

  --text-link-low-saturation: var(--blue-330);

  --text-low-contrast: var(--plum-12);

  --text-message-preview-low-sat: var(--plum-9);

  --text-muted: var(--plum-10);

  --text-muted-on-default: var(--primary-330);

  --text-normal: var(--plum-4);

  --text-positive: var(--green-330);

  --text-primary: var(--plum-4);

  --text-secondary: var(--plum-8);

  --text-warning: var(--yellow-300);

  --textbox-markdown-syntax: var(--plum-9);

  --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96);

  --thread-channel-spine: var(--plum-13);

  --toast-bg: var(--plum-19);

  --typing-indicator-bg: var(--black);

  --user-profile-header-overflow-background: hsl(var(--plum-20-hsl) / 0.5);

  --voice-video-video-tile-background: hsl(var(--plum-17-hsl) / 0.4);

  --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48);
}

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.theme-midnight {
  --action-sheet-gradient-bg: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-icon-overlay: color-mix(
    in oklab,
    hsl(var(--primary-600-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --alert-bg: color-mix(in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%));
  --android-navigation-bar-background: color-mix(
    in oklab,
    var(--plum-24) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --android-navigation-scrim-background: color-mix(
    in oklab,
    hsl(var(--plum-24-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --android-ripple: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.07) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.07) var(--theme-base-color-amount, 0%)
  );
  --autocomplete-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-accent: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-floating: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned: color-mix(
    in oklab,
    hsl(var(--yellow-260-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned-hover: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod: color-mix(
    in oklab,
    hsl(var(--red-345-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod-hover: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight-hover: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --background-message-hover: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-primary: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-secondary: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-accent: color-mix(
    in oklab,
    hsl(var(--plum-23-alpha-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-active: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-hover: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-selected: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --background-nested-floating: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-primary: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary-alt: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-tertiary: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.75) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.75) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-immersive: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.9) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.9) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-no-opacity: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-primary: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-secondary: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-tertiary: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-faint: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-strong: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.18) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.18) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-subtle: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay-tmp: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-raised: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback-pressed: color-mix(
    in oklab,
    hsl(var(--plum-20-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --border-faint: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --border-strong: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --border-subtle: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.14) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.14) var(--theme-base-color-amount, 0%)
  );
  --bug-reporter-modal-submitting-background: color-mix(
    in oklab,
    hsl(var(--plum-23-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-pressed-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --card-primary-bg: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-primary-pressed-bg: color-mix(
    in oklab,
    var(--plum-25) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-bg: color-mix(
    in oklab,
    var(--plum-25) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-pressed-bg: color-mix(
    in oklab,
    var(--plum-26) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --channel-icon: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channel-text-area-placeholder: color-mix(
    in oklab,
    var(--plum-11) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channels-default: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channeltextarea-background: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-background: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-banner-bg: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-border: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-input-container-background: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-background: color-mix(
    in oklab,
    var(--plum-22) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-gradient-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --coachmark-bg: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-media-seekbar-container: color-mix(
    in oklab,
    hsl(var(--plum-6-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-primary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-secondary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --context-menu-backdrop-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --control-brand-foreground: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --control-brand-foreground-new: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-end: color-mix(
    in oklab,
    var(--teal-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-start: color-mix(
    in oklab,
    var(--teal-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-background: color-mix(
    in oklab,
    hsl(var(--teal-430-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-border: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-locked-channel-icon: color-mix(
    in oklab,
    var(--teal-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-progress-bar: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --custom-status-bubble-bg: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-bg: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-editable-bg: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-bg: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-disabled: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-hover: color-mix(
    in oklab,
    var(--primary-900) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --display-banner-overflow-background: color-mix(
    in oklab,
    hsl(var(--plum-20-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --divider-strong: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --divider-subtle: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --embed-background: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-background-alternate: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-title: color-mix(
    in oklab,
    var(--plum-2) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --expression-picker-bg: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --focus-primary: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --forum-post-extra-media-count-container-background: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --forum-post-tag-background: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.9) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.9) var(--theme-base-color-amount, 0%)
  );
  --guild-notifications-bottom-sheet-pill-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --header-muted: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-primary: color-mix(
    in oklab,
    var(--plum-2) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-secondary: color-mix(
    in oklab,
    var(--plum-8) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --home-background: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --icon-muted: color-mix(
    in oklab,
    var(--plum-12) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-primary: color-mix(
    in oklab,
    var(--plum-5) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-secondary: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-transparent: color-mix(
    in oklab,
    hsl(var(--transparent-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-text-color-amount, 0%)
  );
  --info-box-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-background: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-foreground: color-mix(
    in oklab,
    var(--red-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-help-foreground: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-background: color-mix(
    in oklab,
    hsl(var(--green-360-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-positive-foreground: color-mix(
    in oklab,
    var(--green-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-background: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-warning-foreground: color-mix(
    in oklab,
    var(--yellow-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-background: color-mix(
    in oklab,
    hsl(var(--plum-23-alpha-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --input-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.32) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.32) var(--theme-base-color-amount, 0%)
  );
  --input-error-background: color-mix(
    in oklab,
    hsl(var(--red-500-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --input-error-border: color-mix(
    in oklab,
    var(--red-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --input-error-text: color-mix(
    in oklab,
    var(--red-260) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-focused-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --input-placeholder-text: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-active: color-mix(
    in oklab,
    var(--plum-3) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-hover: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-muted: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-normal: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --leaderboard-league-brand-text: color-mix(
    in oklab,
    var(--lol-text-light) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --legacy-android-blur-overlay-default: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --legacy-android-blur-overlay-ultra-thin: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.025) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.025) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-default: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.975) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.975) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-ultra-thin: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.95) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.95) var(--theme-base-color-amount, 0%)
  );
  --live-stage-tile-border: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --logo-primary: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --mention-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --mention-foreground: color-mix(
    in oklab,
    var(--brand-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --menu-item-danger-active-bg: color-mix(
    in oklab,
    var(--red-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-danger-hover-bg: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-active-bg: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-hover-bg: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.15) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-text: color-mix(
    in oklab,
    var(--brand-200) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --modal-background: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --modal-footer-background: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --navigator-header-tint: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --panel-bg: color-mix(
    in oklab,
    var(--plum-24) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-fill-hover: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-image-background: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-victor-fill: color-mix(
    in oklab,
    hsl(var(--green-360-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --polls-voted-fill: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --premium-nitro-pink-text: color-mix(
    in oklab,
    var(--premium-nitro-pink-light) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --profile-gradient-message-input-border: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-note-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay-synced-with-user-theme: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-profile-body-background-hover: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-background: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-border: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-section-box: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.45) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.45) var(--theme-base-color-amount, 0%)
  );
  --redesign-activity-card-badge-icon: color-mix(
    in oklab,
    var(--plum-11) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-active-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-danger-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-destructive-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-positive-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-premium-primary-blue-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-0-blue-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pink-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-pink-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient-2: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-border: color-mix(
    in oklab,
    var(--brand-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-background: color-mix(
    in oklab,
    hsl(var(--brand-530-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-border: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-background: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-border: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-700-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-border: color-mix(
    in oklab,
    hsl(var(--brand-400-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-text: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-text: color-mix(
    in oklab,
    var(--brand-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-background: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-on-blurple-pressed-text: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-pressed-background: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-text: color-mix(
    in oklab,
    var(--plum-25) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-pressed-background: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-background: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.14) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.14) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-background: color-mix(
    in oklab,
    var(--plum-15) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-text: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-selected-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.28) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.28) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-text: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-background: color-mix(
    in oklab,
    hsl(var(--plum-23-alpha-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-background: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-text: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-text: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-muted-text: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-text: color-mix(
    in oklab,
    var(--plum-2) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-chat-input-background: color-mix(
    in oklab,
    hsl(var(--plum-23-alpha-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --redesign-image-button-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-active-bg: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-selected: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-thumb: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-track: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-thumb: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-track: color-mix(
    in oklab,
    var(--plum-25) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-thumb: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-track: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --spine-default: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-hidden-background: color-mix(
    in oklab,
    var(--plum-14) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-revealed-background: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --stage-card-pill-bg: color-mix(
    in oklab,
    var(--plum-25) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --text-brand: color-mix(
    in oklab,
    var(--brand-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-danger: color-mix(
    in oklab,
    var(--red-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link-low-saturation: color-mix(
    in oklab,
    var(--blue-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-low-contrast: color-mix(
    in oklab,
    var(--plum-12) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-message-preview-low-sat: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted-on-default: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-normal: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-positive: color-mix(
    in oklab,
    var(--green-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-primary: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-secondary: color-mix(
    in oklab,
    var(--plum-8) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-warning: color-mix(
    in oklab,
    var(--yellow-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --textbox-markdown-syntax: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --theme-locked-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --thread-channel-spine: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --toast-bg: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --typing-indicator-bg: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --user-profile-header-overflow-background: color-mix(
    in oklab,
    hsl(var(--plum-20-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-background: color-mix(
    in oklab,
    hsl(var(--plum-17-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
}
}

.theme-darker {
  --action-sheet-gradient-bg: var(--plum-20);

  --activity-card-background: var(--primary-700);

  --activity-card-icon-overlay: hsl(var(--primary-600-hsl) / 0.85);

  --alert-bg: var(--plum-20);

  --android-navigation-bar-background: var(--plum-24);

  --android-navigation-scrim-background: hsl(var(--plum-24-hsl) / 0.5);

  --android-ripple: hsl(var(--white-hsl) / 0.07);

  --autocomplete-bg: var(--primary-630);

  --background-accent: var(--plum-15);

  --background-floating: var(--plum-18);

  --background-mentioned: hsl(var(--yellow-260-hsl) / 0.08);

  --background-mentioned-hover: hsl(var(--yellow-300-hsl) / 0.08);

  --background-message-automod: hsl(var(--red-345-hsl) / 0.08);

  --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1);

  --background-message-highlight: hsl(var(--brand-360-hsl) / 0.08);

  --background-message-highlight-hover: hsl(var(--brand-360-hsl) / 0.06);

  --background-message-hover: var(--plum-21);

  --background-mobile-primary: var(--plum-20);

  --background-mobile-secondary: var(--plum-20);

  --background-modifier-accent: hsl(var(--plum-11-hsl) / 0.12);

  --background-modifier-active: hsl(var(--plum-13-hsl) / 0.48);

  --background-modifier-hover: hsl(var(--plum-13-hsl) / 0.3);

  --background-modifier-selected: hsl(var(--plum-13-hsl) / 0.6);

  --background-nested-floating: var(--plum-22);

  --background-primary: var(--plum-20);

  --background-secondary: var(--plum-18);

  --background-secondary-alt: var(--plum-15);

  --background-tertiary: var(--plum-16);

  --badge-brand-bg: var(--brand-260);

  --badge-brand-text: var(--brand-560);

  --bg-backdrop: hsl(var(--black-hsl) / 0.7);

  --bg-backdrop-immersive: hsl(var(--black-hsl) / 0.85);

  --bg-backdrop-no-opacity: var(--black);

  --bg-base-primary: var(--plum-20);

  --bg-base-secondary: var(--plum-20);

  --bg-base-tertiary: var(--plum-23);

  --bg-brand: var(--brand-500);

  --bg-mod-faint: hsl(var(--plum-11-hsl) / 0.12);

  --bg-mod-strong: hsl(var(--plum-11-hsl) / 0.24);

  --bg-mod-subtle: hsl(var(--plum-11-hsl) / 0.16);

  --bg-surface-overlay: var(--plum-17);

  --bg-surface-overlay-tmp: var(--plum-17);

  --bg-surface-raised: var(--plum-18);

  --blur-fallback: hsl(var(--plum-17-hsl) / 0.96);

  --blur-fallback-pressed: hsl(var(--plum-18-hsl) / 0.96);

  --border-faint: hsl(var(--plum-11-hsl) / 0.06);

  --border-strong: hsl(var(--plum-11-hsl) / 0.22);

  --border-subtle: hsl(var(--plum-11-hsl) / 0.12);

  --bug-reporter-modal-submitting-background: hsl(var(--plum-23-hsl) / 0.6);

  --button-creator-revenue-background: var(--teal-430);

  --button-danger-background: var(--red-430);

  --button-danger-background-active: var(--red-530);

  --button-danger-background-disabled: var(--red-430);

  --button-danger-background-hover: var(--red-500);

  --button-danger-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-background: var(--brand-500);

  --button-filled-brand-background-active: var(--brand-600);

  --button-filled-brand-background-hover: var(--brand-560);

  --button-filled-brand-border: hsl(var(--white-500-hsl) / 0);

  --button-filled-brand-inverted-background: var(--white);

  --button-filled-brand-inverted-background-active: var(--brand-200);

  --button-filled-brand-inverted-background-hover: var(--brand-100);

  --button-filled-brand-inverted-text: var(--brand-500);

  --button-filled-brand-text: var(--white);

  --button-filled-white-background: var(--white-500);

  --button-filled-white-background-active: var(--white-500);

  --button-filled-white-background-hover: var(--white-500);

  --button-filled-white-text: var(--primary-500);

  --button-outline-brand-background: hsl(var(--white-hsl) / 0);

  --button-outline-brand-background-active: var(--brand-560);

  --button-outline-brand-background-hover: var(--brand-500);

  --button-outline-brand-border: var(--brand-500);

  --button-outline-brand-border-active: var(--brand-560);

  --button-outline-brand-border-hover: var(--brand-500);

  --button-outline-brand-text: var(--white);

  --button-outline-brand-text-active: var(--white);

  --button-outline-brand-text-hover: var(--white);

  --button-outline-danger-background: hsl(var(--white-hsl) / 0);

  --button-outline-danger-background-active: var(--red-460);

  --button-outline-danger-background-hover: var(--red-430);

  --button-outline-danger-border: var(--red-400);

  --button-outline-danger-border-active: var(--red-430);

  --button-outline-danger-border-hover: var(--red-430);

  --button-outline-danger-text: var(--white);

  --button-outline-danger-text-active: var(--white);

  --button-outline-danger-text-hover: var(--white);

  --button-outline-positive-background: hsl(var(--white-hsl) / 0);

  --button-outline-positive-background-active: var(--green-530);

  --button-outline-positive-background-hover: var(--green-430);

  --button-outline-positive-border: var(--green-360);

  --button-outline-positive-border-active: var(--green-530);

  --button-outline-positive-border-hover: var(--green-430);

  --button-outline-positive-text: var(--white);

  --button-outline-positive-text-active: var(--white);

  --button-outline-positive-text-hover: var(--white);

  --button-outline-primary-background: hsl(var(--white-hsl) / 0);

  --button-outline-primary-background-active: var(--plum-11);

  --button-outline-primary-background-hover: var(--plum-13);

  --button-outline-primary-border: var(--primary-500);

  --button-outline-primary-border-active: var(--plum-11);

  --button-outline-primary-border-hover: var(--plum-13);

  --button-outline-primary-text: var(--white);

  --button-outline-primary-text-active: var(--white);

  --button-outline-primary-text-hover: var(--white);

  --button-positive-background: var(--green-430);

  --button-positive-background-active: var(--green-530);

  --button-positive-background-disabled: var(--green-430);

  --button-positive-background-hover: var(--green-500);

  --button-positive-border: hsl(var(--white-500-hsl) / 0);

  --button-secondary-background: var(--plum-13);

  --button-secondary-background-active: var(--plum-10);

  --button-secondary-background-disabled: var(--plum-13);

  --button-secondary-background-hover: var(--plum-11);

  --button-secondary-text: var(--white-500);

  --button-transparent-background: hsl(var(--white-500-hsl) / 0.1);

  --button-transparent-background-active: hsl(var(--white-500-hsl) / 0.01);

  --button-transparent-background-hover: hsl(var(--white-500-hsl) / 0.05);

  --button-transparent-text: var(--plum-3);

  --card-gradient-bg: hsl(var(--black-hsl) / 0.4);

  --card-gradient-pressed-bg: hsl(var(--black-hsl) / 0.5);

  --card-primary-bg: var(--plum-18);

  --card-primary-pressed-bg: var(--plum-19);

  --card-secondary-bg: var(--plum-19);

  --card-secondary-pressed-bg: var(--plum-21);

  --channel-icon: var(--plum-10);

  --channel-text-area-placeholder: var(--plum-11);

  --channels-default: var(--plum-9);

  --channeltextarea-background: var(--plum-15);

  --chat-background: var(--plum-16);

  --chat-banner-bg: var(--plum-20);

  --chat-border: var(--plum-20);

  --chat-input-container-background: var(--plum-16);

  --chat-swipe-to-reply-background: var(--plum-22);

  --chat-swipe-to-reply-gradient-background: hsl(var(--black-hsl) / 0.1);

  --coachmark-bg: var(--plum-17);

  --content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl) / 0.24);

  --content-inventory-overlay-text-primary: hsl(var(--white-hsl) / 0.85);

  --content-inventory-overlay-text-secondary: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod: hsl(var(--white-hsl) / 0.7);

  --content-inventory-overlay-ui-mod-bg: hsl(var(--black-hsl) / 0.1);

  --context-menu-backdrop-background: hsl(var(--black-hsl) / 0.7);

  --control-brand-foreground: var(--brand-360);

  --control-brand-foreground-new: var(--brand-360);

  --creator-revenue-icon-gradient-end: var(--teal-430);

  --creator-revenue-icon-gradient-start: var(--teal-360);

  --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1);

  --creator-revenue-info-box-border: var(--teal-400);

  --creator-revenue-locked-channel-icon: var(--teal-345);

  --creator-revenue-progress-bar: var(--teal-400);

  --custom-status-bubble-bg: var(--plum-17);

  --deprecated-card-bg: hsl(var(--primary-700-hsl) / 0.6);

  --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3);

  --deprecated-text-input-bg: var(--primary-700);

  --deprecated-text-input-border: hsl(var(--black-hsl) / 0.3);

  --deprecated-text-input-border-disabled: var(--primary-700);

  --deprecated-text-input-border-hover: var(--primary-900);

  --display-banner-overflow-background: hsl(var(--plum-20-hsl) / 0.5);

  --divider-strong: hsl(var(--plum-11-hsl) / 0.22);

  --divider-subtle: hsl(var(--plum-11-hsl) / 0.12);

  --embed-background: var(--plum-18);

  --embed-background-alternate: var(--primary-600);

  --embed-title: var(--plum-3);

  --expression-picker-bg: var(--plum-20);

  --focus-primary: var(--blue-345);

  --forum-post-extra-media-count-container-background: hsl(var(--plum-19-hsl) / 0.8);

  --forum-post-tag-background: hsl(var(--plum-19-hsl) / 0.9);

  --guild-notifications-bottom-sheet-pill-background: var(--primary-700);

  --header-muted: var(--plum-10);

  --header-primary: var(--plum-3);

  --header-secondary: var(--plum-9);

  --home-background: var(--plum-18);

  --icon-muted: var(--plum-11);

  --icon-primary: var(--plum-4);

  --icon-secondary: var(--plum-9);

  --icon-transparent: hsl(var(--transparent-hsl) / 0);

  --info-box-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-danger-background: hsl(var(--red-400-hsl) / 0.1);

  --info-danger-foreground: var(--red-400);

  --info-danger-text: var(--white);

  --info-help-background: hsl(var(--blue-345-hsl) / 0.1);

  --info-help-foreground: var(--blue-345);

  --info-help-text: var(--white);

  --info-positive-background: hsl(var(--green-360-hsl) / 0.1);

  --info-positive-foreground: var(--green-360);

  --info-positive-text: var(--white);

  --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1);

  --info-warning-foreground: var(--yellow-300);

  --info-warning-text: var(--white);

  --input-background: hsl(var(--plum-24-hsl) / 0.85);

  --input-border: hsl(var(--plum-11-hsl) / 0.32);

  --input-error-background: hsl(var(--red-500-hsl) / 0.12);

  --input-error-border: var(--red-360);

  --input-error-text: var(--red-260);

  --input-focused-border: hsl(var(--plum-11-hsl) / 0.32);

  --input-placeholder-text: var(--plum-10);

  --interactive-active: var(--plum-1);

  --interactive-hover: var(--plum-4);

  --interactive-muted: var(--plum-13);

  --interactive-normal: var(--plum-6);

  --leaderboard-league-brand-text: var(--lol-text-light);

  --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5);

  --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-hsl) / 0.025);

  --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975);

  --legacy-blur-fallback-ultra-thin: hsl(var(--black-hsl) / 0.95);

  --live-stage-tile-border: hsl(var(--plum-13-hsl) / 0.6);

  --logo-primary: var(--white);

  --mention-background: hsl(var(--brand-500-hsl) / 0.5);

  --mention-foreground: var(--brand-230);

  --menu-item-danger-active-bg: var(--red-530);

  --menu-item-danger-hover-bg: var(--red-430);

  --menu-item-default-active-bg: var(--brand-560);

  --menu-item-default-hover-bg: var(--brand-500);

  --message-reacted-background: hsl(var(--brand-500-hsl) / 0.15);

  --message-reacted-text: var(--brand-200);

  --modal-background: var(--plum-16);

  --modal-footer-background: var(--plum-17);

  --navigator-header-tint: var(--white);

  --panel-bg: var(--plum-20);

  --polls-normal-fill-hover: var(--primary-600);

  --polls-normal-image-background: var(--primary-660);

  --polls-victor-fill: hsl(var(--green-360-hsl) / 0.2);

  --polls-voted-fill: hsl(var(--brand-500-hsl) / 0.2);

  --premium-nitro-pink-text: var(--premium-nitro-pink-light);

  --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48);

  --profile-gradient-note-background: hsl(var(--black-hsl) / 0.3);

  --profile-gradient-overlay: hsl(var(--black-hsl) / 0.6);

  --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-hsl) / 0.8);

  --profile-gradient-profile-body-background-hover: hsl(var(--white-hsl) / 0.16);

  --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5);

  --profile-gradient-role-pill-border: hsl(var(--white-hsl) / 0.2);

  --profile-gradient-section-box: hsl(var(--black-hsl) / 0.45);

  --redesign-activity-card-badge-icon: var(--plum-10);

  --redesign-button-active-background: var(--green-430);

  --redesign-button-active-pressed-background: var(--green-460);

  --redesign-button-active-text: var(--white);

  --redesign-button-danger-background: var(--red-430);

  --redesign-button-danger-pressed-background: var(--red-460);

  --redesign-button-danger-text: var(--white);

  --redesign-button-destructive-background: var(--red-430);

  --redesign-button-destructive-pressed-background: var(--red-460);

  --redesign-button-destructive-text: var(--white);

  --redesign-button-overlay-alpha-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-overlay-alpha-text: var(--white);

  --redesign-button-overlay-background: var(--white);

  --redesign-button-overlay-text: var(--primary-860);

  --redesign-button-positive-background: var(--green-430);

  --redesign-button-positive-pressed-background: var(--green-460);

  --redesign-button-positive-text: var(--white);

  --redesign-button-premium-primary-blue-for-gradient: var(--premium-tier-0-blue-for-gradients-2);

  --redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);

  --redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl) / 0.1);

  --redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);

  --redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);

  --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0);

  --redesign-button-primary-alt-border: var(--brand-360);

  --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0);

  --redesign-button-primary-alt-on-blurple-border: var(--white);

  --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530);

  --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360);

  --redesign-button-primary-alt-on-blurple-text: var(--white);

  --redesign-button-primary-alt-pressed-background: hsl(var(--brand-700-hsl) / 0.16);

  --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5);

  --redesign-button-primary-alt-pressed-text: var(--brand-360);

  --redesign-button-primary-alt-text: var(--brand-360);

  --redesign-button-primary-background: var(--brand-500);

  --redesign-button-primary-on-blurple-pressed-text: var(--brand-530);

  --redesign-button-primary-overlay-background: var(--white);

  --redesign-button-primary-overlay-pressed-background: var(--plum-4);

  --redesign-button-primary-overlay-text: var(--plum-25);

  --redesign-button-primary-pressed-background: var(--brand-560);

  --redesign-button-primary-text: var(--white);

  --redesign-button-secondary-background: var(--plum-15);

  --redesign-button-secondary-border: hsl(var(--plum-11-hsl) / 0.12);

  --redesign-button-secondary-overlay-background: hsl(var(--black-hsl) / 0.54);

  --redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl) / 0.64);

  --redesign-button-secondary-overlay-text: var(--white);

  --redesign-button-secondary-pressed-background: var(--plum-13);

  --redesign-button-secondary-pressed-border: hsl(var(--plum-11-hsl) / 0.06);

  --redesign-button-secondary-text: var(--plum-6);

  --redesign-button-selected-background: hsl(var(--brand-500-hsl) / 0.24);

  --redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl) / 0.28);

  --redesign-button-selected-text: var(--brand-500);

  --redesign-button-tertiary-background: hsl(var(--plum-11-hsl) / 0.12);

  --redesign-button-tertiary-pressed-background: hsl(var(--plum-11-hsl) / 0.2);

  --redesign-button-tertiary-pressed-text: var(--plum-5);

  --redesign-button-tertiary-text: var(--plum-6);

  --redesign-channel-name-muted-text: var(--plum-10);

  --redesign-channel-name-text: var(--plum-3);

  --redesign-chat-input-background: hsl(var(--plum-11-hsl) / 0.12);

  --redesign-image-button-pressed-background: hsl(var(--black-hsl) / 0.08);

  --redesign-input-control-active-bg: var(--plum-16);

  --redesign-input-control-selected: var(--brand-500);

  --scrollbar-auto-scrollbar-color-thumb: var(--plum-21);

  --scrollbar-auto-scrollbar-color-track: var(--plum-17);

  --scrollbar-auto-thumb: var(--plum-21);

  --scrollbar-auto-track: var(--plum-19);

  --scrollbar-thin-thumb: var(--plum-21);

  --scrollbar-thin-track: hsl(var(--black-hsl) / 0);

  --spine-default: var(--plum-13);

  --spoiler-hidden-background: var(--plum-14);

  --spoiler-revealed-background: hsl(var(--plum-11-hsl) / 0.16);

  --stage-card-pill-bg: var(--plum-19);

  --status-danger: var(--red-400);

  --status-danger-background: var(--red-430);

  --status-danger-text: var(--white);

  --status-dnd: var(--red-400);

  --status-idle: var(--yellow-300);

  --status-offline: var(--plum-9);

  --status-online: var(--green-360);

  --status-positive: var(--green-360);

  --status-positive-background: var(--green-430);

  --status-positive-text: var(--white);

  --status-speaking: var(--green-360);

  --status-warning: var(--yellow-300);

  --status-warning-background: var(--yellow-300);

  --status-warning-text: var(--black);

  --text-brand: var(--brand-360);

  --text-danger: var(--red-345);

  --text-link: var(--blue-345);

  --text-link-low-saturation: var(--blue-330);

  --text-low-contrast: var(--plum-11);

  --text-message-preview-low-sat: var(--plum-11);

  --text-muted: var(--plum-10);

  --text-muted-on-default: var(--primary-330);

  --text-normal: var(--plum-6);

  --text-positive: var(--green-330);

  --text-primary: var(--plum-6);

  --text-secondary: var(--plum-9);

  --text-warning: var(--yellow-300);

  --textbox-markdown-syntax: var(--plum-9);

  --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96);

  --thread-channel-spine: var(--plum-13);

  --toast-bg: var(--plum-17);

  --typing-indicator-bg: var(--plum-20);

  --user-profile-header-overflow-background: hsl(var(--plum-20-hsl) / 0.5);

  --voice-video-video-tile-background: hsl(var(--plum-17-hsl) / 0.4);

  --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48);
}

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.theme-darker {
  --action-sheet-gradient-bg: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --activity-card-icon-overlay: color-mix(
    in oklab,
    hsl(var(--primary-600-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --alert-bg: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --android-navigation-bar-background: color-mix(
    in oklab,
    var(--plum-24) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --android-navigation-scrim-background: color-mix(
    in oklab,
    hsl(var(--plum-24-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --android-ripple: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.07) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.07) var(--theme-base-color-amount, 0%)
  );
  --autocomplete-bg: color-mix(
    in oklab,
    var(--primary-630) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-accent: color-mix(
    in oklab,
    var(--plum-15) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-floating: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned: color-mix(
    in oklab,
    hsl(var(--yellow-260-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-mentioned-hover: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod: color-mix(
    in oklab,
    hsl(var(--red-345-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-automod-hover: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --background-message-highlight-hover: color-mix(
    in oklab,
    hsl(var(--brand-360-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --background-message-hover: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-primary: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-mobile-secondary: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-accent: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-active: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-hover: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --background-modifier-selected: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --background-nested-floating: color-mix(
    in oklab,
    var(--plum-22) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-primary: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-secondary-alt: color-mix(
    in oklab,
    var(--plum-15) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --background-tertiary: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-immersive: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --bg-backdrop-no-opacity: color-mix(
    in oklab,
    var(--black) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-primary: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-secondary: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-base-tertiary: color-mix(
    in oklab,
    var(--plum-23) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-faint: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-strong: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --bg-mod-subtle: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-overlay-tmp: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --bg-surface-raised: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback: color-mix(
    in oklab,
    hsl(var(--plum-17-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --blur-fallback-pressed: color-mix(
    in oklab,
    hsl(var(--plum-18-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --border-faint: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --border-strong: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.22) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.22) var(--theme-base-color-amount, 0%)
  );
  --border-subtle: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --bug-reporter-modal-submitting-background: color-mix(
    in oklab,
    hsl(var(--plum-23-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --card-gradient-pressed-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --card-primary-bg: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-primary-pressed-bg: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-bg: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --card-secondary-pressed-bg: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --channel-icon: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channel-text-area-placeholder: color-mix(
    in oklab,
    var(--plum-11) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channels-default: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --channeltextarea-background: color-mix(
    in oklab,
    var(--plum-15) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-background: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-banner-bg: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-border: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-input-container-background: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-background: color-mix(
    in oklab,
    var(--plum-22) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --chat-swipe-to-reply-gradient-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --coachmark-bg: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-media-seekbar-container: color-mix(
    in oklab,
    hsl(var(--plum-6-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-primary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-text-secondary: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --content-inventory-overlay-ui-mod-bg: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --context-menu-backdrop-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.7) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.7) var(--theme-base-color-amount, 0%)
  );
  --control-brand-foreground: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --control-brand-foreground-new: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-end: color-mix(
    in oklab,
    var(--teal-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-icon-gradient-start: color-mix(
    in oklab,
    var(--teal-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-background: color-mix(
    in oklab,
    hsl(var(--teal-430-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-info-box-border: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --creator-revenue-locked-channel-icon: color-mix(
    in oklab,
    var(--teal-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --creator-revenue-progress-bar: color-mix(
    in oklab,
    var(--teal-400) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --custom-status-bubble-bg: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-bg: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --deprecated-card-editable-bg: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-bg: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-disabled: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --deprecated-text-input-border-hover: color-mix(
    in oklab,
    var(--primary-900) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --display-banner-overflow-background: color-mix(
    in oklab,
    hsl(var(--plum-20-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --divider-strong: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.22) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.22) var(--theme-base-color-amount, 0%)
  );
  --divider-subtle: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --embed-background: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-background-alternate: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --embed-title: color-mix(
    in oklab,
    var(--plum-3) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --expression-picker-bg: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --focus-primary: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --forum-post-extra-media-count-container-background: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --forum-post-tag-background: color-mix(
    in oklab,
    hsl(var(--plum-19-hsl) / 0.9) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.9) var(--theme-base-color-amount, 0%)
  );
  --guild-notifications-bottom-sheet-pill-background: color-mix(
    in oklab,
    var(--primary-700) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --header-muted: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-primary: color-mix(
    in oklab,
    var(--plum-3) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --header-secondary: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --home-background: color-mix(
    in oklab,
    var(--plum-18) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --icon-muted: color-mix(
    in oklab,
    var(--plum-11) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-primary: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-secondary: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --icon-transparent: color-mix(
    in oklab,
    hsl(var(--transparent-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-text-color-amount, 0%)
  );
  --info-box-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-background: color-mix(
    in oklab,
    hsl(var(--red-400-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-danger-foreground: color-mix(
    in oklab,
    var(--red-400) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-background: color-mix(
    in oklab,
    hsl(var(--blue-345-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-help-foreground: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-help-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-background: color-mix(
    in oklab,
    hsl(var(--green-360-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-positive-foreground: color-mix(
    in oklab,
    var(--green-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-background: color-mix(
    in oklab,
    hsl(var(--yellow-300-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --info-warning-foreground: color-mix(
    in oklab,
    var(--yellow-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --info-warning-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-background: color-mix(
    in oklab,
    hsl(var(--plum-24-hsl) / 0.85) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.85) var(--theme-base-color-amount, 0%)
  );
  --input-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.32) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.32) var(--theme-base-color-amount, 0%)
  );
  --input-error-background: color-mix(
    in oklab,
    hsl(var(--red-500-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --input-error-border: color-mix(
    in oklab,
    var(--red-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --input-error-text: color-mix(
    in oklab,
    var(--red-260) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --input-focused-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.32) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.32) var(--theme-base-color-amount, 0%)
  );
  --input-placeholder-text: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-active: color-mix(
    in oklab,
    var(--plum-1) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-hover: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-muted: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --interactive-normal: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --leaderboard-league-brand-text: color-mix(
    in oklab,
    var(--lol-text-light) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --legacy-android-blur-overlay-default: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --legacy-android-blur-overlay-ultra-thin: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.025) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.025) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-default: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.975) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.975) var(--theme-base-color-amount, 0%)
  );
  --legacy-blur-fallback-ultra-thin: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.95) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.95) var(--theme-base-color-amount, 0%)
  );
  --live-stage-tile-border: color-mix(
    in oklab,
    hsl(var(--plum-13-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --logo-primary: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --mention-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --mention-foreground: color-mix(
    in oklab,
    var(--brand-230) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --menu-item-danger-active-bg: color-mix(
    in oklab,
    var(--red-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-danger-hover-bg: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-active-bg: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --menu-item-default-hover-bg: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.15) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.15) var(--theme-base-color-amount, 0%)
  );
  --message-reacted-text: color-mix(
    in oklab,
    var(--brand-200) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --modal-background: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --modal-footer-background: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --navigator-header-tint: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --panel-bg: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-fill-hover: color-mix(
    in oklab,
    var(--primary-600) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-normal-image-background: color-mix(
    in oklab,
    var(--primary-660) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --polls-victor-fill: color-mix(
    in oklab,
    hsl(var(--green-360-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --polls-voted-fill: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --premium-nitro-pink-text: color-mix(
    in oklab,
    var(--premium-nitro-pink-light) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --profile-gradient-message-input-border: color-mix(
    in oklab,
    hsl(var(--primary-500-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-note-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.3) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.6) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-overlay-synced-with-user-theme: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.8) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.8) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-profile-body-background-hover: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-background: color-mix(
    in oklab,
    hsl(var(--primary-660-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-role-pill-border: color-mix(
    in oklab,
    hsl(var(--white-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --profile-gradient-section-box: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.45) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.45) var(--theme-base-color-amount, 0%)
  );
  --redesign-activity-card-badge-icon: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-active-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-active-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-danger-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-danger-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-destructive-background: color-mix(
    in oklab,
    var(--red-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-pressed-background: color-mix(
    in oklab,
    var(--red-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-destructive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-alpha-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-overlay-text: color-mix(
    in oklab,
    var(--primary-860) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-positive-background: color-mix(
    in oklab,
    var(--green-430) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-pressed-background: color-mix(
    in oklab,
    var(--green-460) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-positive-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-premium-primary-blue-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-0-blue-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pink-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-pink-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.1) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-premium-primary-purple-for-gradient-2: color-mix(
    in oklab,
    var(--premium-tier-2-purple-for-gradients-2) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-border: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-background: color-mix(
    in oklab,
    hsl(var(--brand-530-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-border: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-background: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-pressed-border: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-on-blurple-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-700-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-border: color-mix(
    in oklab,
    hsl(var(--brand-400-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-alt-pressed-text: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-alt-text: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-background: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-on-blurple-pressed-text: color-mix(
    in oklab,
    var(--brand-530) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-overlay-background: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-pressed-background: color-mix(
    in oklab,
    var(--plum-4) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-overlay-text: color-mix(
    in oklab,
    var(--plum-25) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-primary-pressed-background: color-mix(
    in oklab,
    var(--brand-560) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-primary-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-background: color-mix(
    in oklab,
    var(--plum-15) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.54) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.64) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.64) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-overlay-text: color-mix(
    in oklab,
    var(--white) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-background: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-pressed-border: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.06) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-secondary-text: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-selected-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.24) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.24) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-pressed-background: color-mix(
    in oklab,
    hsl(var(--brand-500-hsl) / 0.28) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.28) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-selected-text: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-background: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-background: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.2) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
  );
  --redesign-button-tertiary-pressed-text: color-mix(
    in oklab,
    var(--plum-5) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-button-tertiary-text: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-muted-text: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-channel-name-text: color-mix(
    in oklab,
    var(--plum-3) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --redesign-chat-input-background: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.12) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12) var(--theme-base-color-amount, 0%)
  );
  --redesign-image-button-pressed-background: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0.08) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-active-bg: color-mix(
    in oklab,
    var(--plum-16) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --redesign-input-control-selected: color-mix(
    in oklab,
    var(--brand-500) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-thumb: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-scrollbar-color-track: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-thumb: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-auto-track: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-thumb: color-mix(
    in oklab,
    var(--plum-21) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --scrollbar-thin-track: color-mix(
    in oklab,
    hsl(var(--black-hsl) / 0) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
  );
  --spine-default: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-hidden-background: color-mix(
    in oklab,
    var(--plum-14) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --spoiler-revealed-background: color-mix(
    in oklab,
    hsl(var(--plum-11-hsl) / 0.16) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.16) var(--theme-base-color-amount, 0%)
  );
  --stage-card-pill-bg: color-mix(
    in oklab,
    var(--plum-19) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --text-brand: color-mix(
    in oklab,
    var(--brand-360) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-danger: color-mix(
    in oklab,
    var(--red-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link: color-mix(
    in oklab,
    var(--blue-345) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-link-low-saturation: color-mix(
    in oklab,
    var(--blue-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-low-contrast: color-mix(
    in oklab,
    var(--plum-11) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-message-preview-low-sat: color-mix(
    in oklab,
    var(--plum-11) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted: color-mix(
    in oklab,
    var(--plum-10) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-muted-on-default: color-mix(
    in oklab,
    var(--primary-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-normal: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-positive: color-mix(
    in oklab,
    var(--green-330) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-primary: color-mix(
    in oklab,
    var(--plum-6) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-secondary: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --text-warning: color-mix(
    in oklab,
    var(--yellow-300) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --textbox-markdown-syntax: color-mix(
    in oklab,
    var(--plum-9) 100%,
    var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
  );
  --theme-locked-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.96) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.96) var(--theme-base-color-amount, 0%)
  );
  --thread-channel-spine: color-mix(
    in oklab,
    var(--plum-13) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --toast-bg: color-mix(
    in oklab,
    var(--plum-17) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --typing-indicator-bg: color-mix(
    in oklab,
    var(--plum-20) 100%,
    var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
  );
  --user-profile-header-overflow-background: color-mix(
    in oklab,
    hsl(var(--plum-20-hsl) / 0.5) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.5) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-background: color-mix(
    in oklab,
    hsl(var(--plum-17-hsl) / 0.4) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%)
  );
  --voice-video-video-tile-blur-fallback: color-mix(
    in oklab,
    hsl(var(--primary-700-hsl) / 0.48) 100%,
    hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%)
  );
}
}

/* stylelint-enable discord/var-validator */

/* stylelint-disable discord/var-validator */

/* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY
If you need to add or edit existing variables, check out
discord_common/js/packages/tokens/definitions, then run
`clyde mana tokens generate` */

:root {
  --neutral-1: hsl(var(--neutral-1-hsl) / 1);
  --neutral-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --neutral-2: hsl(var(--neutral-2-hsl) / 1);
  --neutral-2-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 98.431%;
  --neutral-3: hsl(var(--neutral-3-hsl) / 1);
  --neutral-3-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 97.059%;
  --neutral-4: hsl(var(--neutral-4-hsl) / 1);
  --neutral-4-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 95.49%;
  --neutral-5: hsl(var(--neutral-5-hsl) / 1);
  --neutral-5-hsl: 240 calc(var(--saturation-factor, 1) * 3.226%) 93.922%;
  --neutral-6: hsl(var(--neutral-6-hsl) / 1);
  --neutral-6-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 92.549%;
  --neutral-7: hsl(var(--neutral-7-hsl) / 1);
  --neutral-7-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 90.98%;
  --neutral-8: hsl(var(--neutral-8-hsl) / 1);
  --neutral-8-hsl: 240 calc(var(--saturation-factor, 1) * 5.66%) 89.608%;
  --neutral-9: hsl(var(--neutral-9-hsl) / 1);
  --neutral-9-hsl: 240 calc(var(--saturation-factor, 1) * 4.918%) 88.039%;
  --neutral-10: hsl(var(--neutral-10-hsl) / 1);
  --neutral-10-hsl: 240 calc(var(--saturation-factor, 1) * 2.941%) 86.667%;
  --neutral-11: hsl(var(--neutral-11-hsl) / 1);
  --neutral-11-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 85.294%;
  --neutral-12: hsl(var(--neutral-12-hsl) / 1);
  --neutral-12-hsl: 240 calc(var(--saturation-factor, 1) * 3.614%) 83.725%;
  --neutral-13: hsl(var(--neutral-13-hsl) / 1);
  --neutral-13-hsl: 240 calc(var(--saturation-factor, 1) * 4.444%) 82.353%;
  --neutral-14: hsl(var(--neutral-14-hsl) / 1);
  --neutral-14-hsl: 240 calc(var(--saturation-factor, 1) * 4.082%) 80.784%;
  --neutral-15: hsl(var(--neutral-15-hsl) / 1);
  --neutral-15-hsl: 240 calc(var(--saturation-factor, 1) * 4.762%) 79.412%;
  --neutral-16: hsl(var(--neutral-16-hsl) / 1);
  --neutral-16-hsl: 240 calc(var(--saturation-factor, 1) * 3.571%) 78.039%;
  --neutral-17: hsl(var(--neutral-17-hsl) / 1);
  --neutral-17-hsl: 240 calc(var(--saturation-factor, 1) * 4.202%) 76.667%;
  --neutral-18: hsl(var(--neutral-18-hsl) / 1);
  --neutral-18-hsl: 240 calc(var(--saturation-factor, 1) * 3.937%) 75.098%;
  --neutral-19: hsl(var(--neutral-19-hsl) / 1);
  --neutral-19-hsl: 240 calc(var(--saturation-factor, 1) * 4.478%) 73.725%;
  --neutral-20: hsl(var(--neutral-20-hsl) / 1);
  --neutral-20-hsl: 230 calc(var(--saturation-factor, 1) * 4.225%) 72.157%;
  --neutral-21: hsl(var(--neutral-21-hsl) / 1);
  --neutral-21-hsl: 240 calc(var(--saturation-factor, 1) * 4.054%) 70.98%;
  --neutral-22: hsl(var(--neutral-22-hsl) / 1);
  --neutral-22-hsl: 240 calc(var(--saturation-factor, 1) * 3.846%) 69.412%;
  --neutral-23: hsl(var(--neutral-23-hsl) / 1);
  --neutral-23-hsl: 240 calc(var(--saturation-factor, 1) * 4.294%) 68.039%;
  --neutral-24: hsl(var(--neutral-24-hsl) / 1);
  --neutral-24-hsl: 240 calc(var(--saturation-factor, 1) * 3.529%) 66.667%;
  --neutral-25: hsl(var(--neutral-25-hsl) / 1);
  --neutral-25-hsl: 240 calc(var(--saturation-factor, 1) * 3.955%) 65.294%;
  --neutral-26: hsl(var(--neutral-26-hsl) / 1);
  --neutral-26-hsl: 240 calc(var(--saturation-factor, 1) * 3.784%) 63.725%;
  --neutral-27: hsl(var(--neutral-27-hsl) / 1);
  --neutral-27-hsl: 240 calc(var(--saturation-factor, 1) * 3.665%) 62.549%;
  --neutral-28: hsl(var(--neutral-28-hsl) / 1);
  --neutral-28-hsl: 240 calc(var(--saturation-factor, 1) * 3.518%) 60.98%;
  --neutral-29: hsl(var(--neutral-29-hsl) / 1);
  --neutral-29-hsl: 240 calc(var(--saturation-factor, 1) * 3.883%) 59.608%;
  --neutral-30: hsl(var(--neutral-30-hsl) / 1);
  --neutral-30-hsl: 240 calc(var(--saturation-factor, 1) * 3.774%) 58.431%;
  --neutral-31: hsl(var(--neutral-31-hsl) / 1);
  --neutral-31-hsl: 240 calc(var(--saturation-factor, 1) * 3.636%) 56.863%;
  --neutral-32: hsl(var(--neutral-32-hsl) / 1);
  --neutral-32-hsl: 240 calc(var(--saturation-factor, 1) * 3.54%) 55.686%;
  --neutral-33: hsl(var(--neutral-33-hsl) / 1);
  --neutral-33-hsl: 240 calc(var(--saturation-factor, 1) * 3.419%) 54.118%;
  --neutral-34: hsl(var(--neutral-34-hsl) / 1);
  --neutral-34-hsl: 240 calc(var(--saturation-factor, 1) * 3.333%) 52.941%;
  --neutral-35: hsl(var(--neutral-35-hsl) / 1);
  --neutral-35-hsl: 240 calc(var(--saturation-factor, 1) * 3.644%) 51.569%;
  --neutral-36: hsl(var(--neutral-36-hsl) / 1);
  --neutral-36-hsl: 240 calc(var(--saturation-factor, 1) * 3.15%) 50.196%;
  --neutral-37: hsl(var(--neutral-37-hsl) / 1);
  --neutral-37-hsl: 240 calc(var(--saturation-factor, 1) * 3.614%) 48.824%;
  --neutral-38: hsl(var(--neutral-38-hsl) / 1);
  --neutral-38-hsl: 240 calc(var(--saturation-factor, 1) * 3.704%) 47.647%;
  --neutral-39: hsl(var(--neutral-39-hsl) / 1);
  --neutral-39-hsl: 240 calc(var(--saturation-factor, 1) * 3.83%) 46.078%;
  --neutral-40: hsl(var(--neutral-40-hsl) / 1);
  --neutral-40-hsl: 240 calc(var(--saturation-factor, 1) * 3.93%) 44.902%;
  --neutral-41: hsl(var(--neutral-41-hsl) / 1);
  --neutral-41-hsl: 240 calc(var(--saturation-factor, 1) * 4.505%) 43.529%;
  --neutral-42: hsl(var(--neutral-42-hsl) / 1);
  --neutral-42-hsl: 240 calc(var(--saturation-factor, 1) * 4.63%) 42.353%;
  --neutral-43: hsl(var(--neutral-43-hsl) / 1);
  --neutral-43-hsl: 240 calc(var(--saturation-factor, 1) * 4.306%) 40.98%;
  --neutral-44: hsl(var(--neutral-44-hsl) / 1);
  --neutral-44-hsl: 240 calc(var(--saturation-factor, 1) * 4.95%) 39.608%;
  --neutral-45: hsl(var(--neutral-45-hsl) / 1);
  --neutral-45-hsl: 240 calc(var(--saturation-factor, 1) * 5.102%) 38.431%;
  --neutral-46: hsl(var(--neutral-46-hsl) / 1);
  --neutral-46-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 37.255%;
  --neutral-47: hsl(var(--neutral-47-hsl) / 1);
  --neutral-47-hsl: 240 calc(var(--saturation-factor, 1) * 5.495%) 35.686%;
  --neutral-48: hsl(var(--neutral-48-hsl) / 1);
  --neutral-48-hsl: 240 calc(var(--saturation-factor, 1) * 5.682%) 34.51%;
  --neutral-49: hsl(var(--neutral-49-hsl) / 1);
  --neutral-49-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 33.333%;
  --neutral-50: hsl(var(--neutral-50-hsl) / 1);
  --neutral-50-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 33.333%;
  --neutral-51: hsl(var(--neutral-51-hsl) / 1);
  --neutral-51-hsl: 240 calc(var(--saturation-factor, 1) * 6.024%) 32.549%;
  --neutral-52: hsl(var(--neutral-52-hsl) / 1);
  --neutral-52-hsl: 240 calc(var(--saturation-factor, 1) * 5.521%) 31.961%;
  --neutral-53: hsl(var(--neutral-53-hsl) / 1);
  --neutral-53-hsl: 240 calc(var(--saturation-factor, 1) * 6.25%) 31.373%;
  --neutral-54: hsl(var(--neutral-54-hsl) / 1);
  --neutral-54-hsl: 240 calc(var(--saturation-factor, 1) * 5.732%) 30.784%;
  --neutral-55: hsl(var(--neutral-55-hsl) / 1);
  --neutral-55-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 30%;
  --neutral-56: hsl(var(--neutral-56-hsl) / 1);
  --neutral-56-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.04%) 29.216%;
  --neutral-57: hsl(var(--neutral-57-hsl) / 1);
  --neutral-57-hsl: 240 calc(var(--saturation-factor, 1) * 5.479%) 28.627%;
  --neutral-58: hsl(var(--neutral-58-hsl) / 1);
  --neutral-58-hsl: 240 calc(var(--saturation-factor, 1) * 6.294%) 28.039%;
  --neutral-59: hsl(var(--neutral-59-hsl) / 1);
  --neutral-59-hsl: 240 calc(var(--saturation-factor, 1) * 5.714%) 27.451%;
  --neutral-60: hsl(var(--neutral-60-hsl) / 1);
  --neutral-60-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 26.667%;
  --neutral-61: hsl(var(--neutral-61-hsl) / 1);
  --neutral-61-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 26.078%;
  --neutral-62: hsl(var(--neutral-62-hsl) / 1);
  --neutral-62-hsl: 240 calc(var(--saturation-factor, 1) * 6.154%) 25.49%;
  --neutral-63: hsl(var(--neutral-63-hsl) / 1);
  --neutral-63-hsl: 240 calc(var(--saturation-factor, 1) * 5.512%) 24.902%;
  --neutral-64: hsl(var(--neutral-64-hsl) / 1);
  --neutral-64-hsl: 240 calc(var(--saturation-factor, 1) * 5.691%) 24.118%;
  --neutral-65: hsl(var(--neutral-65-hsl) / 1);
  --neutral-65-hsl: 240 calc(var(--saturation-factor, 1) * 5.785%) 23.725%;
  --neutral-66: hsl(var(--neutral-66-hsl) / 1);
  --neutral-66-hsl: 240 calc(var(--saturation-factor, 1) * 5.983%) 22.941%;
  --neutral-67: hsl(var(--neutral-67-hsl) / 1);
  --neutral-67-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 22.353%;
  --neutral-68: hsl(var(--neutral-68-hsl) / 1);
  --neutral-68-hsl: 240 calc(var(--saturation-factor, 1) * 5.455%) 21.569%;
  --neutral-69: hsl(var(--neutral-69-hsl) / 1);
  --neutral-69-hsl: 240 calc(var(--saturation-factor, 1) * 5.556%) 21.176%;
  --neutral-70: hsl(var(--neutral-70-hsl) / 1);
  --neutral-70-hsl: 240 calc(var(--saturation-factor, 1) * 5.769%) 20.392%;
  --neutral-71: hsl(var(--neutral-71-hsl) / 1);
  --neutral-71-hsl: 240 calc(var(--saturation-factor, 1) * 4.95%) 19.804%;
  --neutral-72: hsl(var(--neutral-72-hsl) / 1);
  --neutral-72-hsl: 240 calc(var(--saturation-factor, 1) * 6.122%) 19.216%;
  --neutral-73: hsl(var(--neutral-73-hsl) / 1);
  --neutral-73-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 18.627%;
  --neutral-74: hsl(var(--neutral-74-hsl) / 1);
  --neutral-74-hsl: 240 calc(var(--saturation-factor, 1) * 6.522%) 18.039%;
  --neutral-75: hsl(var(--neutral-75-hsl) / 1);
  --neutral-75-hsl: 240 calc(var(--saturation-factor, 1) * 5.618%) 17.451%;
  --neutral-76: hsl(var(--neutral-76-hsl) / 1);
  --neutral-76-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 16.667%;
  --neutral-77: hsl(var(--neutral-77-hsl) / 1);
  --neutral-77-hsl: 240 calc(var(--saturation-factor, 1) * 6.024%) 16.275%;
  --neutral-78: hsl(var(--neutral-78-hsl) / 1);
  --neutral-78-hsl: 240 calc(var(--saturation-factor, 1) * 5%) 15.686%;
  --neutral-79: hsl(var(--neutral-79-hsl) / 1);
  --neutral-79-hsl: 240 calc(var(--saturation-factor, 1) * 6.494%) 15.098%;
  --neutral-80: hsl(var(--neutral-80-hsl) / 1);
  --neutral-80-hsl: 240 calc(var(--saturation-factor, 1) * 5.405%) 14.51%;
  --neutral-81: hsl(var(--neutral-81-hsl) / 1);
  --neutral-81-hsl: 240 calc(var(--saturation-factor, 1) * 5.714%) 13.725%;
  --neutral-82: hsl(var(--neutral-82-hsl) / 1);
  --neutral-82-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 13.333%;
  --neutral-83: hsl(var(--neutral-83-hsl) / 1);
  --neutral-83-hsl: 240 calc(var(--saturation-factor, 1) * 4.615%) 12.745%;
  --neutral-84: hsl(var(--neutral-84-hsl) / 1);
  --neutral-84-hsl: 240 calc(var(--saturation-factor, 1) * 6.452%) 12.157%;
  --neutral-85: hsl(var(--neutral-85-hsl) / 1);
  --neutral-85-hsl: 240 calc(var(--saturation-factor, 1) * 5.085%) 11.569%;
  --neutral-86: hsl(var(--neutral-86-hsl) / 1);
  --neutral-86-hsl: 240 calc(var(--saturation-factor, 1) * 7.143%) 10.98%;
  --neutral-87: hsl(var(--neutral-87-hsl) / 1);
  --neutral-87-hsl: 240 calc(var(--saturation-factor, 1) * 5.66%) 10.392%;
  --neutral-88: hsl(var(--neutral-88-hsl) / 1);
  --neutral-88-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 10%;
  --neutral-89: hsl(var(--neutral-89-hsl) / 1);
  --neutral-89-hsl: 240 calc(var(--saturation-factor, 1) * 6.383%) 9.216%;
  --neutral-90: hsl(var(--neutral-90-hsl) / 1);
  --neutral-90-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 8.824%;
  --neutral-91: hsl(var(--neutral-91-hsl) / 1);
  --neutral-91-hsl: 220 calc(var(--saturation-factor, 1) * 7.317%) 8.039%;
  --neutral-92: hsl(var(--neutral-92-hsl) / 1);
  --neutral-92-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 7.451%;
  --neutral-93: hsl(var(--neutral-93-hsl) / 1);
  --neutral-93-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 6.667%;
  --neutral-94: hsl(var(--neutral-94-hsl) / 1);
  --neutral-94-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 5.882%;
  --neutral-95: hsl(var(--neutral-95-hsl) / 1);
  --neutral-95-hsl: 240 calc(var(--saturation-factor, 1) * 7.692%) 5.098%;
  --neutral-96: hsl(var(--neutral-96-hsl) / 1);
  --neutral-96-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 4.314%;
  --neutral-97: hsl(var(--neutral-97-hsl) / 1);
  --neutral-97-hsl: 240 calc(var(--saturation-factor, 1) * 12.5%) 3.137%;
  --neutral-98: hsl(var(--neutral-98-hsl) / 1);
  --neutral-98-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 2.157%;
  --neutral-99: hsl(var(--neutral-99-hsl) / 1);
  --neutral-99-hsl: 240 calc(var(--saturation-factor, 1) * 20%) 0.98%;
  --neutral-100: hsl(var(--neutral-100-hsl) / 1);
  --neutral-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --blue-new-1: hsl(var(--blue-new-1-hsl) / 1);
  --blue-new-1-hsl: 222.5 calc(var(--saturation-factor, 1) * 100%) 95.294%;
  --blue-new-2: hsl(var(--blue-new-2-hsl) / 1);
  --blue-new-2-hsl: 219.31 calc(var(--saturation-factor, 1) * 100%) 94.314%;
  --blue-new-3: hsl(var(--blue-new-3-hsl) / 1);
  --blue-new-3-hsl: 219.375 calc(var(--saturation-factor, 1) * 94.118%) 93.333%;
  --blue-new-4: hsl(var(--blue-new-4-hsl) / 1);
  --blue-new-4-hsl: 218.333 calc(var(--saturation-factor, 1) * 94.737%) 92.549%;
  --blue-new-5: hsl(var(--blue-new-5-hsl) / 1);
  --blue-new-5-hsl: 216.585 calc(var(--saturation-factor, 1) * 95.349%) 91.569%;
  --blue-new-6: hsl(var(--blue-new-6-hsl) / 1);
  --blue-new-6-hsl: 216.818 calc(var(--saturation-factor, 1) * 91.667%) 90.588%;
  --blue-new-7: hsl(var(--blue-new-7-hsl) / 1);
  --blue-new-7-hsl: 216.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
  --blue-new-8: hsl(var(--blue-new-8-hsl) / 1);
  --blue-new-8-hsl: 215.769 calc(var(--saturation-factor, 1) * 89.655%) 88.627%;
  --blue-new-9: hsl(var(--blue-new-9-hsl) / 1);
  --blue-new-9-hsl: 215.357 calc(var(--saturation-factor, 1) * 90.323%) 87.843%;
  --blue-new-10: hsl(var(--blue-new-10-hsl) / 1);
  --blue-new-10-hsl: 215.593 calc(var(--saturation-factor, 1) * 88.06%) 86.863%;
  --blue-new-11: hsl(var(--blue-new-11-hsl) / 1);
  --blue-new-11-hsl: 214.687 calc(var(--saturation-factor, 1) * 88.889%) 85.882%;
  --blue-new-12: hsl(var(--blue-new-12-hsl) / 1);
  --blue-new-12-hsl: 215.294 calc(var(--saturation-factor, 1) * 89.474%) 85.098%;
  --blue-new-13: hsl(var(--blue-new-13-hsl) / 1);
  --blue-new-13-hsl: 214.648 calc(var(--saturation-factor, 1) * 87.654%) 84.118%;
  --blue-new-14: hsl(var(--blue-new-14-hsl) / 1);
  --blue-new-14-hsl: 215.2 calc(var(--saturation-factor, 1) * 88.235%) 83.333%;
  --blue-new-15: hsl(var(--blue-new-15-hsl) / 1);
  --blue-new-15-hsl: 214.177 calc(var(--saturation-factor, 1) * 86.813%) 82.157%;
  --blue-new-16: hsl(var(--blue-new-16-hsl) / 1);
  --blue-new-16-hsl: 214.699 calc(var(--saturation-factor, 1) * 87.368%) 81.373%;
  --blue-new-17: hsl(var(--blue-new-17-hsl) / 1);
  --blue-new-17-hsl: 214.186 calc(var(--saturation-factor, 1) * 86%) 80.392%;
  --blue-new-18: hsl(var(--blue-new-18-hsl) / 1);
  --blue-new-18-hsl: 214.667 calc(var(--saturation-factor, 1) * 86.538%) 79.608%;
  --blue-new-19: hsl(var(--blue-new-19-hsl) / 1);
  --blue-new-19-hsl: 214.194 calc(var(--saturation-factor, 1) * 85.321%) 78.627%;
  --blue-new-20: hsl(var(--blue-new-20-hsl) / 1);
  --blue-new-20-hsl: 214.286 calc(var(--saturation-factor, 1) * 85.965%) 77.647%;
  --blue-new-21: hsl(var(--blue-new-21-hsl) / 1);
  --blue-new-21-hsl: 213.861 calc(var(--saturation-factor, 1) * 84.874%) 76.667%;
  --blue-new-22: hsl(var(--blue-new-22-hsl) / 1);
  --blue-new-22-hsl: 214.038 calc(var(--saturation-factor, 1) * 83.871%) 75.686%;
  --blue-new-23: hsl(var(--blue-new-23-hsl) / 1);
  --blue-new-23-hsl: 213.889 calc(var(--saturation-factor, 1) * 84.375%) 74.902%;
  --blue-new-24: hsl(var(--blue-new-24-hsl) / 1);
  --blue-new-24-hsl: 214.054 calc(var(--saturation-factor, 1) * 83.459%) 73.922%;
  --blue-new-25: hsl(var(--blue-new-25-hsl) / 1);
  --blue-new-25-hsl: 213.913 calc(var(--saturation-factor, 1) * 83.942%) 73.137%;
  --blue-new-26: hsl(var(--blue-new-26-hsl) / 1);
  --blue-new-26-hsl: 213.782 calc(var(--saturation-factor, 1) * 83.217%) 71.961%;
  --blue-new-27: hsl(var(--blue-new-27-hsl) / 1);
  --blue-new-27-hsl: 213.659 calc(var(--saturation-factor, 1) * 83.673%) 71.176%;
  --blue-new-28: hsl(var(--blue-new-28-hsl) / 1);
  --blue-new-28-hsl: 213.81 calc(var(--saturation-factor, 1) * 82.895%) 70.196%;
  --blue-new-29: hsl(var(--blue-new-29-hsl) / 1);
  --blue-new-29-hsl: 213.488 calc(var(--saturation-factor, 1) * 82.166%) 69.216%;
  --blue-new-30: hsl(var(--blue-new-30-hsl) / 1);
  --blue-new-30-hsl: 213.835 calc(var(--saturation-factor, 1) * 82.609%) 68.431%;
  --blue-new-31: hsl(var(--blue-new-31-hsl) / 1);
  --blue-new-31-hsl: 213.723 calc(var(--saturation-factor, 1) * 82.036%) 67.255%;
  --blue-new-32: hsl(var(--blue-new-32-hsl) / 1);
  --blue-new-32-hsl: 213.429 calc(var(--saturation-factor, 1) * 81.395%) 66.275%;
  --blue-new-33: hsl(var(--blue-new-33-hsl) / 1);
  --blue-new-33-hsl: 213.75 calc(var(--saturation-factor, 1) * 81.818%) 65.49%;
  --blue-new-34: hsl(var(--blue-new-34-hsl) / 1);
  --blue-new-34-hsl: 213.469 calc(var(--saturation-factor, 1) * 81.215%) 64.51%;
  --blue-new-35: hsl(var(--blue-new-35-hsl) / 1);
  --blue-new-35-hsl: 213.377 calc(var(--saturation-factor, 1) * 80.749%) 63.333%;
  --blue-new-36: hsl(var(--blue-new-36-hsl) / 1);
  --blue-new-36-hsl: 213.29 calc(var(--saturation-factor, 1) * 81.152%) 62.549%;
  --blue-new-37: hsl(var(--blue-new-37-hsl) / 1);
  --blue-new-37-hsl: 213.418 calc(var(--saturation-factor, 1) * 80.612%) 61.569%;
  --blue-new-38: hsl(var(--blue-new-38-hsl) / 1);
  --blue-new-38-hsl: 213.333 calc(var(--saturation-factor, 1) * 80.198%) 60.392%;
  --blue-new-39: hsl(var(--blue-new-39-hsl) / 1);
  --blue-new-39-hsl: 213.253 calc(var(--saturation-factor, 1) * 80.583%) 59.608%;
  --blue-new-40: hsl(var(--blue-new-40-hsl) / 1);
  --blue-new-40-hsl: 213.176 calc(var(--saturation-factor, 1) * 80.189%) 58.431%;
  --blue-new-41: hsl(var(--blue-new-41-hsl) / 1);
  --blue-new-41-hsl: 213.103 calc(var(--saturation-factor, 1) * 79.817%) 57.255%;
  --blue-new-42: hsl(var(--blue-new-42-hsl) / 1);
  --blue-new-42-hsl: 212.697 calc(var(--saturation-factor, 1) * 79.464%) 56.078%;
  --blue-new-43: hsl(var(--blue-new-43-hsl) / 1);
  --blue-new-43-hsl: 212.787 calc(var(--saturation-factor, 1) * 79.913%) 55.098%;
  --blue-new-44: hsl(var(--blue-new-44-hsl) / 1);
  --blue-new-44-hsl: 212.727 calc(var(--saturation-factor, 1) * 79.574%) 53.922%;
  --blue-new-45: hsl(var(--blue-new-45-hsl) / 1);
  --blue-new-45-hsl: 212.188 calc(var(--saturation-factor, 1) * 79.339%) 52.549%;
  --blue-new-46: hsl(var(--blue-new-46-hsl) / 1);
  --blue-new-46-hsl: 211.818 calc(var(--saturation-factor, 1) * 79.2%) 50.98%;
  --blue-new-47: hsl(var(--blue-new-47-hsl) / 1);
  --blue-new-47-hsl: 211.456 calc(var(--saturation-factor, 1) * 81.746%) 49.412%;
  --blue-new-48: hsl(var(--blue-new-48-hsl) / 1);
  --blue-new-48-hsl: 210.561 calc(var(--saturation-factor, 1) * 88.43%) 47.451%;
  --blue-new-49: hsl(var(--blue-new-49-hsl) / 1);
  --blue-new-49-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --blue-new-50: hsl(var(--blue-new-50-hsl) / 1);
  --blue-new-50-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --blue-new-51: hsl(var(--blue-new-51-hsl) / 1);
  --blue-new-51-hsl: 209.455 calc(var(--saturation-factor, 1) * 98.214%) 43.922%;
  --blue-new-52: hsl(var(--blue-new-52-hsl) / 1);
  --blue-new-52-hsl: 209.858 calc(var(--saturation-factor, 1) * 95.475%) 43.333%;
  --blue-new-53: hsl(var(--blue-new-53-hsl) / 1);
  --blue-new-53-hsl: 210 calc(var(--saturation-factor, 1) * 93.578%) 42.745%;
  --blue-new-54: hsl(var(--blue-new-54-hsl) / 1);
  --blue-new-54-hsl: 210 calc(var(--saturation-factor, 1) * 91.589%) 41.961%;
  --blue-new-55: hsl(var(--blue-new-55-hsl) / 1);
  --blue-new-55-hsl: 210.316 calc(var(--saturation-factor, 1) * 90.476%) 41.176%;
  --blue-new-56: hsl(var(--blue-new-56-hsl) / 1);
  --blue-new-56-hsl: 210.492 calc(var(--saturation-factor, 1) * 88.406%) 40.588%;
  --blue-new-57: hsl(var(--blue-new-57-hsl) / 1);
  --blue-new-57-hsl: 210.508 calc(var(--saturation-factor, 1) * 87.192%) 39.804%;
  --blue-new-58: hsl(var(--blue-new-58-hsl) / 1);
  --blue-new-58-hsl: 210.526 calc(var(--saturation-factor, 1) * 85.93%) 39.02%;
  --blue-new-59: hsl(var(--blue-new-59-hsl) / 1);
  --blue-new-59-hsl: 210.732 calc(var(--saturation-factor, 1) * 84.536%) 38.039%;
  --blue-new-60: hsl(var(--blue-new-60-hsl) / 1);
  --blue-new-60-hsl: 210.759 calc(var(--saturation-factor, 1) * 83.158%) 37.255%;
  --blue-new-61: hsl(var(--blue-new-61-hsl) / 1);
  --blue-new-61-hsl: 210.588 calc(var(--saturation-factor, 1) * 82.703%) 36.275%;
  --blue-new-62: hsl(var(--blue-new-62-hsl) / 1);
  --blue-new-62-hsl: 211.216 calc(var(--saturation-factor, 1) * 81.319%) 35.686%;
  --blue-new-63: hsl(var(--blue-new-63-hsl) / 1);
  --blue-new-63-hsl: 211.049 calc(var(--saturation-factor, 1) * 80.791%) 34.706%;
  --blue-new-64: hsl(var(--blue-new-64-hsl) / 1);
  --blue-new-64-hsl: 210.87 calc(var(--saturation-factor, 1) * 80.233%) 33.725%;
  --blue-new-65: hsl(var(--blue-new-65-hsl) / 1);
  --blue-new-65-hsl: 210.909 calc(var(--saturation-factor, 1) * 78.571%) 32.941%;
  --blue-new-66: hsl(var(--blue-new-66-hsl) / 1);
  --blue-new-66-hsl: 211.181 calc(var(--saturation-factor, 1) * 77.914%) 31.961%;
  --blue-new-67: hsl(var(--blue-new-67-hsl) / 1);
  --blue-new-67-hsl: 211.22 calc(var(--saturation-factor, 1) * 77.358%) 31.176%;
  --blue-new-68: hsl(var(--blue-new-68-hsl) / 1);
  --blue-new-68-hsl: 211.017 calc(var(--saturation-factor, 1) * 76.623%) 30.196%;
  --blue-new-69: hsl(var(--blue-new-69-hsl) / 1);
  --blue-new-69-hsl: 211.053 calc(var(--saturation-factor, 1) * 76%) 29.412%;
  --blue-new-70: hsl(var(--blue-new-70-hsl) / 1);
  --blue-new-70-hsl: 211.376 calc(var(--saturation-factor, 1) * 75.172%) 28.431%;
  --blue-new-71: hsl(var(--blue-new-71-hsl) / 1);
  --blue-new-71-hsl: 211.429 calc(var(--saturation-factor, 1) * 74.468%) 27.647%;
  --blue-new-72: hsl(var(--blue-new-72-hsl) / 1);
  --blue-new-72-hsl: 211.2 calc(var(--saturation-factor, 1) * 73.529%) 26.667%;
  --blue-new-73: hsl(var(--blue-new-73-hsl) / 1);
  --blue-new-73-hsl: 210.928 calc(var(--saturation-factor, 1) * 74.046%) 25.686%;
  --blue-new-74: hsl(var(--blue-new-74-hsl) / 1);
  --blue-new-74-hsl: 210.968 calc(var(--saturation-factor, 1) * 73.228%) 24.902%;
  --blue-new-75: hsl(var(--blue-new-75-hsl) / 1);
  --blue-new-75-hsl: 211.685 calc(var(--saturation-factor, 1) * 72.358%) 24.118%;
  --blue-new-76: hsl(var(--blue-new-76-hsl) / 1);
  --blue-new-76-hsl: 211.429 calc(var(--saturation-factor, 1) * 71.186%) 23.137%;
  --blue-new-77: hsl(var(--blue-new-77-hsl) / 1);
  --blue-new-77-hsl: 211.111 calc(var(--saturation-factor, 1) * 71.681%) 22.157%;
  --blue-new-78: hsl(var(--blue-new-78-hsl) / 1);
  --blue-new-78-hsl: 211.169 calc(var(--saturation-factor, 1) * 70.642%) 21.373%;
  --blue-new-79: hsl(var(--blue-new-79-hsl) / 1);
  --blue-new-79-hsl: 210.811 calc(var(--saturation-factor, 1) * 71.154%) 20.392%;
  --blue-new-80: hsl(var(--blue-new-80-hsl) / 1);
  --blue-new-80-hsl: 210.857 calc(var(--saturation-factor, 1) * 70%) 19.608%;
  --blue-new-81: hsl(var(--blue-new-81-hsl) / 1);
  --blue-new-81-hsl: 210.882 calc(var(--saturation-factor, 1) * 70.833%) 18.824%;
  --blue-new-82: hsl(var(--blue-new-82-hsl) / 1);
  --blue-new-82-hsl: 210.938 calc(var(--saturation-factor, 1) * 69.565%) 18.039%;
  --blue-new-83: hsl(var(--blue-new-83-hsl) / 1);
  --blue-new-83-hsl: 211.475 calc(var(--saturation-factor, 1) * 70.115%) 17.059%;
  --blue-new-84: hsl(var(--blue-new-84-hsl) / 1);
  --blue-new-84-hsl: 211.579 calc(var(--saturation-factor, 1) * 68.675%) 16.275%;
  --blue-new-85: hsl(var(--blue-new-85-hsl) / 1);
  --blue-new-85-hsl: 211.636 calc(var(--saturation-factor, 1) * 69.62%) 15.49%;
  --blue-new-86: hsl(var(--blue-new-86-hsl) / 1);
  --blue-new-86-hsl: 211.154 calc(var(--saturation-factor, 1) * 70.27%) 14.51%;
  --blue-new-87: hsl(var(--blue-new-87-hsl) / 1);
  --blue-new-87-hsl: 211.25 calc(var(--saturation-factor, 1) * 68.571%) 13.725%;
  --blue-new-88: hsl(var(--blue-new-88-hsl) / 1);
  --blue-new-88-hsl: 211.304 calc(var(--saturation-factor, 1) * 69.697%) 12.941%;
  --blue-new-89: hsl(var(--blue-new-89-hsl) / 1);
  --blue-new-89-hsl: 210.698 calc(var(--saturation-factor, 1) * 70.492%) 11.961%;
  --blue-new-90: hsl(var(--blue-new-90-hsl) / 1);
  --blue-new-90-hsl: 211.5 calc(var(--saturation-factor, 1) * 68.966%) 11.373%;
  --blue-new-91: hsl(var(--blue-new-91-hsl) / 1);
  --blue-new-91-hsl: 211.579 calc(var(--saturation-factor, 1) * 70.37%) 10.588%;
  --blue-new-92: hsl(var(--blue-new-92-hsl) / 1);
  --blue-new-92-hsl: 211.667 calc(var(--saturation-factor, 1) * 72%) 9.804%;
  --blue-new-93: hsl(var(--blue-new-93-hsl) / 1);
  --blue-new-93-hsl: 211.875 calc(var(--saturation-factor, 1) * 69.565%) 9.02%;
  --blue-new-94: hsl(var(--blue-new-94-hsl) / 1);
  --blue-new-94-hsl: 211.034 calc(var(--saturation-factor, 1) * 70.732%) 8.039%;
  --blue-new-95: hsl(var(--blue-new-95-hsl) / 1);
  --blue-new-95-hsl: 212.308 calc(var(--saturation-factor, 1) * 72.222%) 7.059%;
  --blue-new-96: hsl(var(--blue-new-96-hsl) / 1);
  --blue-new-96-hsl: 211.304 calc(var(--saturation-factor, 1) * 74.194%) 6.078%;
  --blue-new-97: hsl(var(--blue-new-97-hsl) / 1);
  --blue-new-97-hsl: 214.737 calc(var(--saturation-factor, 1) * 76%) 4.902%;
  --blue-new-98: hsl(var(--blue-new-98-hsl) / 1);
  --blue-new-98-hsl: 214.286 calc(var(--saturation-factor, 1) * 77.778%) 3.529%;
  --blue-new-99: hsl(var(--blue-new-99-hsl) / 1);
  --blue-new-99-hsl: 214.286 calc(var(--saturation-factor, 1) * 77.778%) 1.765%;
  --blue-new-100: hsl(var(--blue-new-100-hsl) / 1);
  --blue-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --blurple-1: hsl(var(--blurple-1-hsl) / 1);
  --blurple-1-hsl: 232.5 calc(var(--saturation-factor, 1) * 100%) 95.294%;
  --blurple-2: hsl(var(--blurple-2-hsl) / 1);
  --blurple-2-hsl: 233.333 calc(var(--saturation-factor, 1) * 100%) 94.706%;
  --blurple-3: hsl(var(--blurple-3-hsl) / 1);
  --blurple-3-hsl: 230.323 calc(var(--saturation-factor, 1) * 100%) 93.922%;
  --blurple-4: hsl(var(--blurple-4-hsl) / 1);
  --blurple-4-hsl: 229.714 calc(var(--saturation-factor, 1) * 100%) 93.137%;
  --blurple-5: hsl(var(--blurple-5-hsl) / 1);
  --blurple-5-hsl: 230.526 calc(var(--saturation-factor, 1) * 100%) 92.549%;
  --blurple-6: hsl(var(--blurple-6-hsl) / 1);
  --blurple-6-hsl: 228.571 calc(var(--saturation-factor, 1) * 100%) 91.765%;
  --blurple-7: hsl(var(--blurple-7-hsl) / 1);
  --blurple-7-hsl: 229.333 calc(var(--saturation-factor, 1) * 100%) 91.176%;
  --blurple-8: hsl(var(--blurple-8-hsl) / 1);
  --blurple-8-hsl: 228.75 calc(var(--saturation-factor, 1) * 96%) 90.196%;
  --blurple-9: hsl(var(--blurple-9-hsl) / 1);
  --blurple-9-hsl: 228.235 calc(var(--saturation-factor, 1) * 96.226%) 89.608%;
  --blurple-10: hsl(var(--blurple-10-hsl) / 1);
  --blurple-10-hsl: 228.889 calc(var(--saturation-factor, 1) * 96.429%) 89.02%;
  --blurple-11: hsl(var(--blurple-11-hsl) / 1);
  --blurple-11-hsl: 228.621 calc(var(--saturation-factor, 1) * 96.667%) 88.235%;
  --blurple-12: hsl(var(--blurple-12-hsl) / 1);
  --blurple-12-hsl: 228.197 calc(var(--saturation-factor, 1) * 96.825%) 87.647%;
  --blurple-13: hsl(var(--blurple-13-hsl) / 1);
  --blurple-13-hsl: 228 calc(var(--saturation-factor, 1) * 97.015%) 86.863%;
  --blurple-14: hsl(var(--blurple-14-hsl) / 1);
  --blurple-14-hsl: 228.529 calc(var(--saturation-factor, 1) * 97.143%) 86.275%;
  --blurple-15: hsl(var(--blurple-15-hsl) / 1);
  --blurple-15-hsl: 228 calc(var(--saturation-factor, 1) * 94.595%) 85.49%;
  --blurple-16: hsl(var(--blurple-16-hsl) / 1);
  --blurple-16-hsl: 228.493 calc(var(--saturation-factor, 1) * 94.805%) 84.902%;
  --blurple-17: hsl(var(--blurple-17-hsl) / 1);
  --blurple-17-hsl: 228.312 calc(var(--saturation-factor, 1) * 95.062%) 84.118%;
  --blurple-18: hsl(var(--blurple-18-hsl) / 1);
  --blurple-18-hsl: 228 calc(var(--saturation-factor, 1) * 95.238%) 83.529%;
  --blurple-19: hsl(var(--blurple-19-hsl) / 1);
  --blurple-19-hsl: 228.434 calc(var(--saturation-factor, 1) * 95.402%) 82.941%;
  --blurple-20: hsl(var(--blurple-20-hsl) / 1);
  --blurple-20-hsl: 228.706 calc(var(--saturation-factor, 1) * 93.407%) 82.157%;
  --blurple-21: hsl(var(--blurple-21-hsl) / 1);
  --blurple-21-hsl: 227.865 calc(var(--saturation-factor, 1) * 93.684%) 81.373%;
  --blurple-22: hsl(var(--blurple-22-hsl) / 1);
  --blurple-22-hsl: 228.261 calc(var(--saturation-factor, 1) * 93.878%) 80.784%;
  --blurple-23: hsl(var(--blurple-23-hsl) / 1);
  --blurple-23-hsl: 228.632 calc(var(--saturation-factor, 1) * 94.059%) 80.196%;
  --blurple-24: hsl(var(--blurple-24-hsl) / 1);
  --blurple-24-hsl: 228.866 calc(var(--saturation-factor, 1) * 92.381%) 79.412%;
  --blurple-25: hsl(var(--blurple-25-hsl) / 1);
  --blurple-25-hsl: 228.6 calc(var(--saturation-factor, 1) * 92.593%) 78.824%;
  --blurple-26: hsl(var(--blurple-26-hsl) / 1);
  --blurple-26-hsl: 228.932 calc(var(--saturation-factor, 1) * 92.793%) 78.235%;
  --blurple-27: hsl(var(--blurple-27-hsl) / 1);
  --blurple-27-hsl: 229.245 calc(var(--saturation-factor, 1) * 92.982%) 77.647%;
  --blurple-28: hsl(var(--blurple-28-hsl) / 1);
  --blurple-28-hsl: 228.889 calc(var(--saturation-factor, 1) * 91.525%) 76.863%;
  --blurple-29: hsl(var(--blurple-29-hsl) / 1);
  --blurple-29-hsl: 229.189 calc(var(--saturation-factor, 1) * 91.736%) 76.275%;
  --blurple-30: hsl(var(--blurple-30-hsl) / 1);
  --blurple-30-hsl: 229.474 calc(var(--saturation-factor, 1) * 91.935%) 75.686%;
  --blurple-31: hsl(var(--blurple-31-hsl) / 1);
  --blurple-31-hsl: 229.655 calc(var(--saturation-factor, 1) * 90.625%) 74.902%;
  --blurple-32: hsl(var(--blurple-32-hsl) / 1);
  --blurple-32-hsl: 229.916 calc(var(--saturation-factor, 1) * 90.84%) 74.314%;
  --blurple-33: hsl(var(--blurple-33-hsl) / 1);
  --blurple-33-hsl: 230.083 calc(var(--saturation-factor, 1) * 90.977%) 73.922%;
  --blurple-34: hsl(var(--blurple-34-hsl) / 1);
  --blurple-34-hsl: 230.244 calc(var(--saturation-factor, 1) * 89.781%) 73.137%;
  --blurple-35: hsl(var(--blurple-35-hsl) / 1);
  --blurple-35-hsl: 230.476 calc(var(--saturation-factor, 1) * 90%) 72.549%;
  --blurple-36: hsl(var(--blurple-36-hsl) / 1);
  --blurple-36-hsl: 230.698 calc(var(--saturation-factor, 1) * 90.21%) 71.961%;
  --blurple-37: hsl(var(--blurple-37-hsl) / 1);
  --blurple-37-hsl: 231.231 calc(var(--saturation-factor, 1) * 89.041%) 71.373%;
  --blurple-38: hsl(var(--blurple-38-hsl) / 1);
  --blurple-38-hsl: 230.977 calc(var(--saturation-factor, 1) * 89.262%) 70.784%;
  --blurple-39: hsl(var(--blurple-39-hsl) / 1);
  --blurple-39-hsl: 231.493 calc(var(--saturation-factor, 1) * 88.158%) 70.196%;
  --blurple-40: hsl(var(--blurple-40-hsl) / 1);
  --blurple-40-hsl: 231.679 calc(var(--saturation-factor, 1) * 88.387%) 69.608%;
  --blurple-41: hsl(var(--blurple-41-hsl) / 1);
  --blurple-41-hsl: 231.857 calc(var(--saturation-factor, 1) * 88.608%) 69.02%;
  --blurple-42: hsl(var(--blurple-42-hsl) / 1);
  --blurple-42-hsl: 232.34 calc(var(--saturation-factor, 1) * 87.578%) 68.431%;
  --blurple-43: hsl(var(--blurple-43-hsl) / 1);
  --blurple-43-hsl: 232.867 calc(var(--saturation-factor, 1) * 87.73%) 68.039%;
  --blurple-44: hsl(var(--blurple-44-hsl) / 1);
  --blurple-44-hsl: 232.966 calc(var(--saturation-factor, 1) * 86.826%) 67.255%;
  --blurple-45: hsl(var(--blurple-45-hsl) / 1);
  --blurple-45-hsl: 233.469 calc(var(--saturation-factor, 1) * 86.982%) 66.863%;
  --blurple-46: hsl(var(--blurple-46-hsl) / 1);
  --blurple-46-hsl: 233.919 calc(var(--saturation-factor, 1) * 86.047%) 66.275%;
  --blurple-47: hsl(var(--blurple-47-hsl) / 1);
  --blurple-47-hsl: 234.04 calc(var(--saturation-factor, 1) * 86.286%) 65.686%;
  --blurple-48: hsl(var(--blurple-48-hsl) / 1);
  --blurple-48-hsl: 234.474 calc(var(--saturation-factor, 1) * 85.393%) 65.098%;
  --blurple-49: hsl(var(--blurple-49-hsl) / 1);
  --blurple-49-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --blurple-50: hsl(var(--blurple-50-hsl) / 1);
  --blurple-50-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --blurple-51: hsl(var(--blurple-51-hsl) / 1);
  --blurple-51-hsl: 234.8 calc(var(--saturation-factor, 1) * 79.787%) 63.137%;
  --blurple-52: hsl(var(--blurple-52-hsl) / 1);
  --blurple-52-hsl: 234.658 calc(var(--saturation-factor, 1) * 74.49%) 61.569%;
  --blurple-53: hsl(var(--blurple-53-hsl) / 1);
  --blurple-53-hsl: 234.507 calc(var(--saturation-factor, 1) * 69.608%) 60%;
  --blurple-54: hsl(var(--blurple-54-hsl) / 1);
  --blurple-54-hsl: 233.913 calc(var(--saturation-factor, 1) * 65.094%) 58.431%;
  --blurple-55: hsl(var(--blurple-55-hsl) / 1);
  --blurple-55-hsl: 233.778 calc(var(--saturation-factor, 1) * 61.644%) 57.059%;
  --blurple-56: hsl(var(--blurple-56-hsl) / 1);
  --blurple-56-hsl: 233.588 calc(var(--saturation-factor, 1) * 57.709%) 55.49%;
  --blurple-57: hsl(var(--blurple-57-hsl) / 1);
  --blurple-57-hsl: 233.81 calc(var(--saturation-factor, 1) * 53.846%) 54.118%;
  --blurple-58: hsl(var(--blurple-58-hsl) / 1);
  --blurple-58-hsl: 233.659 calc(var(--saturation-factor, 1) * 51.037%) 52.745%;
  --blurple-59: hsl(var(--blurple-59-hsl) / 1);
  --blurple-59-hsl: 233.445 calc(var(--saturation-factor, 1) * 47.791%) 51.176%;
  --blurple-60: hsl(var(--blurple-60-hsl) / 1);
  --blurple-60-hsl: 233.276 calc(var(--saturation-factor, 1) * 45.669%) 49.804%;
  --blurple-61: hsl(var(--blurple-61-hsl) / 1);
  --blurple-61-hsl: 233.097 calc(var(--saturation-factor, 1) * 45.749%) 48.431%;
  --blurple-62: hsl(var(--blurple-62-hsl) / 1);
  --blurple-62-hsl: 232.294 calc(var(--saturation-factor, 1) * 45.607%) 46.863%;
  --blurple-63: hsl(var(--blurple-63-hsl) / 1);
  --blurple-63-hsl: 232.571 calc(var(--saturation-factor, 1) * 45.064%) 45.686%;
  --blurple-64: hsl(var(--blurple-64-hsl) / 1);
  --blurple-64-hsl: 232.353 calc(var(--saturation-factor, 1) * 45.133%) 44.314%;
  --blurple-65: hsl(var(--blurple-65-hsl) / 1);
  --blurple-65-hsl: 232.121 calc(var(--saturation-factor, 1) * 45.205%) 42.941%;
  --blurple-66: hsl(var(--blurple-66-hsl) / 1);
  --blurple-66-hsl: 231.875 calc(var(--saturation-factor, 1) * 45.283%) 41.569%;
  --blurple-67: hsl(var(--blurple-67-hsl) / 1);
  --blurple-67-hsl: 232.174 calc(var(--saturation-factor, 1) * 44.66%) 40.392%;
  --blurple-68: hsl(var(--blurple-68-hsl) / 1);
  --blurple-68-hsl: 231.91 calc(var(--saturation-factor, 1) * 44.724%) 39.02%;
  --blurple-69: hsl(var(--blurple-69-hsl) / 1);
  --blurple-69-hsl: 231.628 calc(var(--saturation-factor, 1) * 44.792%) 37.647%;
  --blurple-70: hsl(var(--blurple-70-hsl) / 1);
  --blurple-70-hsl: 231.325 calc(var(--saturation-factor, 1) * 44.865%) 36.275%;
  --blurple-71: hsl(var(--blurple-71-hsl) / 1);
  --blurple-71-hsl: 231.75 calc(var(--saturation-factor, 1) * 44.444%) 35.294%;
  --blurple-72: hsl(var(--blurple-72-hsl) / 1);
  --blurple-72-hsl: 231.429 calc(var(--saturation-factor, 1) * 44.509%) 33.922%;
  --blurple-73: hsl(var(--blurple-73-hsl) / 1);
  --blurple-73-hsl: 231.081 calc(var(--saturation-factor, 1) * 44.578%) 32.549%;
  --blurple-74: hsl(var(--blurple-74-hsl) / 1);
  --blurple-74-hsl: 230.704 calc(var(--saturation-factor, 1) * 44.099%) 31.569%;
  --blurple-75: hsl(var(--blurple-75-hsl) / 1);
  --blurple-75-hsl: 230.294 calc(var(--saturation-factor, 1) * 44.156%) 30.196%;
  --blurple-76: hsl(var(--blurple-76-hsl) / 1);
  --blurple-76-hsl: 230 calc(var(--saturation-factor, 1) * 44.595%) 29.02%;
  --blurple-77: hsl(var(--blurple-77-hsl) / 1);
  --blurple-77-hsl: 230.476 calc(var(--saturation-factor, 1) * 44.056%) 28.039%;
  --blurple-78: hsl(var(--blurple-78-hsl) / 1);
  --blurple-78-hsl: 230 calc(var(--saturation-factor, 1) * 44.118%) 26.667%;
  --blurple-79: hsl(var(--blurple-79-hsl) / 1);
  --blurple-79-hsl: 229.655 calc(var(--saturation-factor, 1) * 44.615%) 25.49%;
  --blurple-80: hsl(var(--blurple-80-hsl) / 1);
  --blurple-80-hsl: 230.182 calc(var(--saturation-factor, 1) * 44%) 24.51%;
  --blurple-81: hsl(var(--blurple-81-hsl) / 1);
  --blurple-81-hsl: 229.811 calc(var(--saturation-factor, 1) * 44.538%) 23.333%;
  --blurple-82: hsl(var(--blurple-82-hsl) / 1);
  --blurple-82-hsl: 230.4 calc(var(--saturation-factor, 1) * 43.86%) 22.353%;
  --blurple-83: hsl(var(--blurple-83-hsl) / 1);
  --blurple-83-hsl: 228.75 calc(var(--saturation-factor, 1) * 44.444%) 21.176%;
  --blurple-84: hsl(var(--blurple-84-hsl) / 1);
  --blurple-84-hsl: 228.261 calc(var(--saturation-factor, 1) * 45.098%) 20%;
  --blurple-85: hsl(var(--blurple-85-hsl) / 1);
  --blurple-85-hsl: 228.837 calc(var(--saturation-factor, 1) * 44.33%) 19.02%;
  --blurple-86: hsl(var(--blurple-86-hsl) / 1);
  --blurple-86-hsl: 228.293 calc(var(--saturation-factor, 1) * 45.055%) 17.843%;
  --blurple-87: hsl(var(--blurple-87-hsl) / 1);
  --blurple-87-hsl: 228.947 calc(var(--saturation-factor, 1) * 44.186%) 16.863%;
  --blurple-88: hsl(var(--blurple-88-hsl) / 1);
  --blurple-88-hsl: 228.649 calc(var(--saturation-factor, 1) * 45.679%) 15.882%;
  --blurple-89: hsl(var(--blurple-89-hsl) / 1);
  --blurple-89-hsl: 229.412 calc(var(--saturation-factor, 1) * 44.737%) 14.902%;
  --blurple-90: hsl(var(--blurple-90-hsl) / 1);
  --blurple-90-hsl: 227.273 calc(var(--saturation-factor, 1) * 46.479%) 13.922%;
  --blurple-91: hsl(var(--blurple-91-hsl) / 1);
  --blurple-91-hsl: 228 calc(var(--saturation-factor, 1) * 45.455%) 12.941%;
  --blurple-92: hsl(var(--blurple-92-hsl) / 1);
  --blurple-92-hsl: 227.586 calc(var(--saturation-factor, 1) * 47.541%) 11.961%;
  --blurple-93: hsl(var(--blurple-93-hsl) / 1);
  --blurple-93-hsl: 228.462 calc(var(--saturation-factor, 1) * 46.429%) 10.98%;
  --blurple-94: hsl(var(--blurple-94-hsl) / 1);
  --blurple-94-hsl: 227.5 calc(var(--saturation-factor, 1) * 48%) 9.804%;
  --blurple-95: hsl(var(--blurple-95-hsl) / 1);
  --blurple-95-hsl: 226.364 calc(var(--saturation-factor, 1) * 50%) 8.627%;
  --blurple-96: hsl(var(--blurple-96-hsl) / 1);
  --blurple-96-hsl: 227.368 calc(var(--saturation-factor, 1) * 51.351%) 7.255%;
  --blurple-97: hsl(var(--blurple-97-hsl) / 1);
  --blurple-97-hsl: 228.75 calc(var(--saturation-factor, 1) * 53.333%) 5.882%;
  --blurple-98: hsl(var(--blurple-98-hsl) / 1);
  --blurple-98-hsl: 230 calc(var(--saturation-factor, 1) * 54.545%) 4.314%;
  --blurple-99: hsl(var(--blurple-99-hsl) / 1);
  --blurple-99-hsl: 231.429 calc(var(--saturation-factor, 1) * 63.636%) 2.157%;
  --blurple-100: hsl(var(--blurple-100-hsl) / 1);
  --blurple-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --green-new-1: hsl(var(--green-new-1-hsl) / 1);
  --green-new-1-hsl: 130.667 calc(var(--saturation-factor, 1) * 100%) 91.176%;
  --green-new-2: hsl(var(--green-new-2-hsl) / 1);
  --green-new-2-hsl: 130.435 calc(var(--saturation-factor, 1) * 88.462%) 89.804%;
  --green-new-3: hsl(var(--green-new-3-hsl) / 1);
  --green-new-3-hsl: 130 calc(var(--saturation-factor, 1) * 82.759%) 88.627%;
  --green-new-4: hsl(var(--green-new-4-hsl) / 1);
  --green-new-4-hsl: 130 calc(var(--saturation-factor, 1) * 75%) 87.451%;
  --green-new-5: hsl(var(--green-new-5-hsl) / 1);
  --green-new-5-hsl: 129.6 calc(var(--saturation-factor, 1) * 71.429%) 86.275%;
  --green-new-6: hsl(var(--green-new-6-hsl) / 1);
  --green-new-6-hsl: 129.412 calc(var(--saturation-factor, 1) * 66.234%) 84.902%;
  --green-new-7: hsl(var(--green-new-7-hsl) / 1);
  --green-new-7-hsl: 129.057 calc(var(--saturation-factor, 1) * 63.855%) 83.725%;
  --green-new-8: hsl(var(--green-new-8-hsl) / 1);
  --green-new-8-hsl: 130 calc(var(--saturation-factor, 1) * 60%) 82.353%;
  --green-new-9: hsl(var(--green-new-9-hsl) / 1);
  --green-new-9-hsl: 129.643 calc(var(--saturation-factor, 1) * 58.333%) 81.176%;
  --green-new-10: hsl(var(--green-new-10-hsl) / 1);
  --green-new-10-hsl: 129.474 calc(var(--saturation-factor, 1) * 55.34%) 79.804%;
  --green-new-11: hsl(var(--green-new-11-hsl) / 1);
  --green-new-11-hsl: 130.169 calc(var(--saturation-factor, 1) * 54.128%) 78.627%;
  --green-new-12: hsl(var(--green-new-12-hsl) / 1);
  --green-new-12-hsl: 129.153 calc(var(--saturation-factor, 1) * 51.304%) 77.451%;
  --green-new-13: hsl(var(--green-new-13-hsl) / 1);
  --green-new-13-hsl: 128.852 calc(var(--saturation-factor, 1) * 50.413%) 76.275%;
  --green-new-14: hsl(var(--green-new-14-hsl) / 1);
  --green-new-14-hsl: 129.677 calc(var(--saturation-factor, 1) * 48.438%) 74.902%;
  --green-new-15: hsl(var(--green-new-15-hsl) / 1);
  --green-new-15-hsl: 129.375 calc(var(--saturation-factor, 1) * 47.761%) 73.725%;
  --green-new-16: hsl(var(--green-new-16-hsl) / 1);
  --green-new-16-hsl: 130.154 calc(var(--saturation-factor, 1) * 46.099%) 72.353%;
  --green-new-17: hsl(var(--green-new-17-hsl) / 1);
  --green-new-17-hsl: 129.091 calc(var(--saturation-factor, 1) * 45.205%) 71.373%;
  --green-new-18: hsl(var(--green-new-18-hsl) / 1);
  --green-new-18-hsl: 129.851 calc(var(--saturation-factor, 1) * 43.791%) 70%;
  --green-new-19: hsl(var(--green-new-19-hsl) / 1);
  --green-new-19-hsl: 129.706 calc(var(--saturation-factor, 1) * 42.5%) 68.627%;
  --green-new-20: hsl(var(--green-new-20-hsl) / 1);
  --green-new-20-hsl: 130.286 calc(var(--saturation-factor, 1) * 42.169%) 67.451%;
  --green-new-21: hsl(var(--green-new-21-hsl) / 1);
  --green-new-21-hsl: 129.429 calc(var(--saturation-factor, 1) * 40.698%) 66.275%;
  --green-new-22: hsl(var(--green-new-22-hsl) / 1);
  --green-new-22-hsl: 130 calc(var(--saturation-factor, 1) * 40.449%) 65.098%;
  --green-new-23: hsl(var(--green-new-23-hsl) / 1);
  --green-new-23-hsl: 130.685 calc(var(--saturation-factor, 1) * 39.459%) 63.725%;
  --green-new-24: hsl(var(--green-new-24-hsl) / 1);
  --green-new-24-hsl: 130.4 calc(var(--saturation-factor, 1) * 39.267%) 62.549%;
  --green-new-25: hsl(var(--green-new-25-hsl) / 1);
  --green-new-25-hsl: 131.053 calc(var(--saturation-factor, 1) * 38.384%) 61.176%;
  --green-new-26: hsl(var(--green-new-26-hsl) / 1);
  --green-new-26-hsl: 130.909 calc(var(--saturation-factor, 1) * 37.931%) 60.196%;
  --green-new-27: hsl(var(--green-new-27-hsl) / 1);
  --green-new-27-hsl: 130.769 calc(var(--saturation-factor, 1) * 37.143%) 58.824%;
  --green-new-28: hsl(var(--green-new-28-hsl) / 1);
  --green-new-28-hsl: 131.25 calc(var(--saturation-factor, 1) * 37.037%) 57.647%;
  --green-new-29: hsl(var(--green-new-29-hsl) / 1);
  --green-new-29-hsl: 131.852 calc(var(--saturation-factor, 1) * 36.323%) 56.275%;
  --green-new-30: hsl(var(--green-new-30-hsl) / 1);
  --green-new-30-hsl: 131.707 calc(var(--saturation-factor, 1) * 35.965%) 55.294%;
  --green-new-31: hsl(var(--green-new-31-hsl) / 1);
  --green-new-31-hsl: 131.566 calc(var(--saturation-factor, 1) * 35.319%) 53.922%;
  --green-new-32: hsl(var(--green-new-32-hsl) / 1);
  --green-new-32-hsl: 132 calc(var(--saturation-factor, 1) * 35.27%) 52.745%;
  --green-new-33: hsl(var(--green-new-33-hsl) / 1);
  --green-new-33-hsl: 132.558 calc(var(--saturation-factor, 1) * 34.677%) 51.373%;
  --green-new-34: hsl(var(--green-new-34-hsl) / 1);
  --green-new-34-hsl: 132.955 calc(var(--saturation-factor, 1) * 34.646%) 50.196%;
  --green-new-35: hsl(var(--green-new-35-hsl) / 1);
  --green-new-35-hsl: 133.483 calc(var(--saturation-factor, 1) * 35.743%) 48.824%;
  --green-new-36: hsl(var(--green-new-36-hsl) / 1);
  --green-new-36-hsl: 133.846 calc(var(--saturation-factor, 1) * 37.449%) 47.647%;
  --green-new-37: hsl(var(--green-new-37-hsl) / 1);
  --green-new-37-hsl: 134.348 calc(var(--saturation-factor, 1) * 38.983%) 46.275%;
  --green-new-38: hsl(var(--green-new-38-hsl) / 1);
  --green-new-38-hsl: 134.681 calc(var(--saturation-factor, 1) * 40.87%) 45.098%;
  --green-new-39: hsl(var(--green-new-39-hsl) / 1);
  --green-new-39-hsl: 134.526 calc(var(--saturation-factor, 1) * 42.601%) 43.725%;
  --green-new-40: hsl(var(--green-new-40-hsl) / 1);
  --green-new-40-hsl: 135.464 calc(var(--saturation-factor, 1) * 45.116%) 42.157%;
  --green-new-41: hsl(var(--green-new-41-hsl) / 1);
  --green-new-41-hsl: 135.758 calc(var(--saturation-factor, 1) * 47.368%) 40.98%;
  --green-new-42: hsl(var(--green-new-42-hsl) / 1);
  --green-new-42-hsl: 136.634 calc(var(--saturation-factor, 1) * 50.249%) 39.412%;
  --green-new-43: hsl(var(--green-new-43-hsl) / 1);
  --green-new-43-hsl: 136.893 calc(var(--saturation-factor, 1) * 52.821%) 38.235%;
  --green-new-44: hsl(var(--green-new-44-hsl) / 1);
  --green-new-44-hsl: 138.679 calc(var(--saturation-factor, 1) * 56.989%) 36.471%;
  --green-new-45: hsl(var(--green-new-45-hsl) / 1);
  --green-new-45-hsl: 139.266 calc(var(--saturation-factor, 1) * 60.894%) 35.098%;
  --green-new-46: hsl(var(--green-new-46-hsl) / 1);
  --green-new-46-hsl: 140.357 calc(var(--saturation-factor, 1) * 65.882%) 33.333%;
  --green-new-47: hsl(var(--green-new-47-hsl) / 1);
  --green-new-47-hsl: 141.538 calc(var(--saturation-factor, 1) * 72.671%) 31.569%;
  --green-new-48: hsl(var(--green-new-48-hsl) / 1);
  --green-new-48-hsl: 143.71 calc(var(--saturation-factor, 1) * 83.784%) 29.02%;
  --green-new-49: hsl(var(--green-new-49-hsl) / 1);
  --green-new-49-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --green-new-50: hsl(var(--green-new-50-hsl) / 1);
  --green-new-50-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --green-new-51: hsl(var(--green-new-51-hsl) / 1);
  --green-new-51-hsl: 145.313 calc(var(--saturation-factor, 1) * 95.522%) 26.275%;
  --green-new-52: hsl(var(--green-new-52-hsl) / 1);
  --green-new-52-hsl: 144.878 calc(var(--saturation-factor, 1) * 92.481%) 26.078%;
  --green-new-53: hsl(var(--green-new-53-hsl) / 1);
  --green-new-53-hsl: 144.103 calc(var(--saturation-factor, 1) * 87.97%) 26.078%;
  --green-new-54: hsl(var(--green-new-54-hsl) / 1);
  --green-new-54-hsl: 143.363 calc(var(--saturation-factor, 1) * 84.962%) 26.078%;
  --green-new-55: hsl(var(--green-new-55-hsl) / 1);
  --green-new-55-hsl: 142.778 calc(var(--saturation-factor, 1) * 81.818%) 25.882%;
  --green-new-56: hsl(var(--green-new-56-hsl) / 1);
  --green-new-56-hsl: 142.5 calc(var(--saturation-factor, 1) * 80%) 25.49%;
  --green-new-57: hsl(var(--green-new-57-hsl) / 1);
  --green-new-57-hsl: 141.818 calc(var(--saturation-factor, 1) * 76.744%) 25.294%;
  --green-new-58: hsl(var(--green-new-58-hsl) / 1);
  --green-new-58-hsl: 140.842 calc(var(--saturation-factor, 1) * 74.803%) 24.902%;
  --green-new-59: hsl(var(--green-new-59-hsl) / 1);
  --green-new-59-hsl: 140.217 calc(var(--saturation-factor, 1) * 73.016%) 24.706%;
  --green-new-60: hsl(var(--green-new-60-hsl) / 1);
  --green-new-60-hsl: 140.225 calc(var(--saturation-factor, 1) * 72.358%) 24.118%;
  --green-new-61: hsl(var(--green-new-61-hsl) / 1);
  --green-new-61-hsl: 139.765 calc(var(--saturation-factor, 1) * 70.248%) 23.725%;
  --green-new-62: hsl(var(--green-new-62-hsl) / 1);
  --green-new-62-hsl: 139.518 calc(var(--saturation-factor, 1) * 69.748%) 23.333%;
  --green-new-63: hsl(var(--green-new-63-hsl) / 1);
  --green-new-63-hsl: 138.987 calc(var(--saturation-factor, 1) * 67.521%) 22.941%;
  --green-new-64: hsl(var(--green-new-64-hsl) / 1);
  --green-new-64-hsl: 138.947 calc(var(--saturation-factor, 1) * 66.667%) 22.353%;
  --green-new-65: hsl(var(--green-new-65-hsl) / 1);
  --green-new-65-hsl: 138.649 calc(var(--saturation-factor, 1) * 66.071%) 21.961%;
  --green-new-66: hsl(var(--green-new-66-hsl) / 1);
  --green-new-66-hsl: 138.592 calc(var(--saturation-factor, 1) * 65.138%) 21.373%;
  --green-new-67: hsl(var(--green-new-67-hsl) / 1);
  --green-new-67-hsl: 137.91 calc(var(--saturation-factor, 1) * 62.617%) 20.98%;
  --green-new-68: hsl(var(--green-new-68-hsl) / 1);
  --green-new-68-hsl: 136.615 calc(var(--saturation-factor, 1) * 61.905%) 20.588%;
  --green-new-69: hsl(var(--green-new-69-hsl) / 1);
  --green-new-69-hsl: 137.143 calc(var(--saturation-factor, 1) * 62.376%) 19.804%;
  --green-new-70: hsl(var(--green-new-70-hsl) / 1);
  --green-new-70-hsl: 137 calc(var(--saturation-factor, 1) * 61.224%) 19.216%;
  --green-new-71: hsl(var(--green-new-71-hsl) / 1);
  --green-new-71-hsl: 136.552 calc(var(--saturation-factor, 1) * 60.417%) 18.824%;
  --green-new-72: hsl(var(--green-new-72-hsl) / 1);
  --green-new-72-hsl: 136.364 calc(var(--saturation-factor, 1) * 59.14%) 18.235%;
  --green-new-73: hsl(var(--green-new-73-hsl) / 1);
  --green-new-73-hsl: 135.849 calc(var(--saturation-factor, 1) * 58.242%) 17.843%;
  --green-new-74: hsl(var(--green-new-74-hsl) / 1);
  --green-new-74-hsl: 136.471 calc(var(--saturation-factor, 1) * 58.621%) 17.059%;
  --green-new-75: hsl(var(--green-new-75-hsl) / 1);
  --green-new-75-hsl: 135.918 calc(var(--saturation-factor, 1) * 57.647%) 16.667%;
  --green-new-76: hsl(var(--green-new-76-hsl) / 1);
  --green-new-76-hsl: 134.348 calc(var(--saturation-factor, 1) * 56.098%) 16.078%;
  --green-new-77: hsl(var(--green-new-77-hsl) / 1);
  --green-new-77-hsl: 134.667 calc(var(--saturation-factor, 1) * 56.962%) 15.49%;
  --green-new-78: hsl(var(--green-new-78-hsl) / 1);
  --green-new-78-hsl: 134.286 calc(var(--saturation-factor, 1) * 55.263%) 14.902%;
  --green-new-79: hsl(var(--green-new-79-hsl) / 1);
  --green-new-79-hsl: 134.634 calc(var(--saturation-factor, 1) * 56.164%) 14.314%;
  --green-new-80: hsl(var(--green-new-80-hsl) / 1);
  --green-new-80-hsl: 134.211 calc(var(--saturation-factor, 1) * 54.286%) 13.725%;
  --green-new-81: hsl(var(--green-new-81-hsl) / 1);
  --green-new-81-hsl: 134.595 calc(var(--saturation-factor, 1) * 55.224%) 13.137%;
  --green-new-82: hsl(var(--green-new-82-hsl) / 1);
  --green-new-82-hsl: 133.714 calc(var(--saturation-factor, 1) * 53.846%) 12.745%;
  --green-new-83: hsl(var(--green-new-83-hsl) / 1);
  --green-new-83-hsl: 132.727 calc(var(--saturation-factor, 1) * 54.098%) 11.961%;
  --green-new-84: hsl(var(--green-new-84-hsl) / 1);
  --green-new-84-hsl: 131.613 calc(var(--saturation-factor, 1) * 52.542%) 11.569%;
  --green-new-85: hsl(var(--green-new-85-hsl) / 1);
  --green-new-85-hsl: 132 calc(var(--saturation-factor, 1) * 53.571%) 10.98%;
  --green-new-86: hsl(var(--green-new-86-hsl) / 1);
  --green-new-86-hsl: 132.857 calc(var(--saturation-factor, 1) * 53.846%) 10.196%;
  --green-new-87: hsl(var(--green-new-87-hsl) / 1);
  --green-new-87-hsl: 131.538 calc(var(--saturation-factor, 1) * 52%) 9.804%;
  --green-new-88: hsl(var(--green-new-88-hsl) / 1);
  --green-new-88-hsl: 132 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
  --green-new-89: hsl(var(--green-new-89-hsl) / 1);
  --green-new-89-hsl: 132.5 calc(var(--saturation-factor, 1) * 54.545%) 8.627%;
  --green-new-90: hsl(var(--green-new-90-hsl) / 1);
  --green-new-90-hsl: 130.909 calc(var(--saturation-factor, 1) * 55%) 7.843%;
  --green-new-91: hsl(var(--green-new-91-hsl) / 1);
  --green-new-91-hsl: 129 calc(var(--saturation-factor, 1) * 52.632%) 7.451%;
  --green-new-92: hsl(var(--green-new-92-hsl) / 1);
  --green-new-92-hsl: 129.474 calc(var(--saturation-factor, 1) * 54.286%) 6.863%;
  --green-new-93: hsl(var(--green-new-93-hsl) / 1);
  --green-new-93-hsl: 130 calc(var(--saturation-factor, 1) * 56.25%) 6.275%;
  --green-new-94: hsl(var(--green-new-94-hsl) / 1);
  --green-new-94-hsl: 131.25 calc(var(--saturation-factor, 1) * 57.143%) 5.49%;
  --green-new-95: hsl(var(--green-new-95-hsl) / 1);
  --green-new-95-hsl: 128 calc(var(--saturation-factor, 1) * 60%) 4.902%;
  --green-new-96: hsl(var(--green-new-96-hsl) / 1);
  --green-new-96-hsl: 125 calc(var(--saturation-factor, 1) * 54.545%) 4.314%;
  --green-new-97: hsl(var(--green-new-97-hsl) / 1);
  --green-new-97-hsl: 126.667 calc(var(--saturation-factor, 1) * 52.941%) 3.333%;
  --green-new-98: hsl(var(--green-new-98-hsl) / 1);
  --green-new-98-hsl: 120 calc(var(--saturation-factor, 1) * 50%) 2.353%;
  --green-new-99: hsl(var(--green-new-99-hsl) / 1);
  --green-new-99-hsl: 140 calc(var(--saturation-factor, 1) * 60%) 0.98%;
  --green-new-100: hsl(var(--green-new-100-hsl) / 1);
  --green-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --red-new-1: hsl(var(--red-new-1-hsl) / 1);
  --red-new-1-hsl: 0 calc(var(--saturation-factor, 1) * 100%) 93.725%;
  --red-new-2: hsl(var(--red-new-2-hsl) / 1);
  --red-new-2-hsl: 1.667 calc(var(--saturation-factor, 1) * 100%) 92.941%;
  --red-new-3: hsl(var(--red-new-3-hsl) / 1);
  --red-new-3-hsl: 1.5 calc(var(--saturation-factor, 1) * 100%) 92.157%;
  --red-new-4: hsl(var(--red-new-4-hsl) / 1);
  --red-new-4-hsl: 1.364 calc(var(--saturation-factor, 1) * 100%) 91.373%;
  --red-new-5: hsl(var(--red-new-5-hsl) / 1);
  --red-new-5-hsl: 2.5 calc(var(--saturation-factor, 1) * 100%) 90.588%;
  --red-new-6: hsl(var(--red-new-6-hsl) / 1);
  --red-new-6-hsl: 2.308 calc(var(--saturation-factor, 1) * 100%) 89.804%;
  --red-new-7: hsl(var(--red-new-7-hsl) / 1);
  --red-new-7-hsl: 2.143 calc(var(--saturation-factor, 1) * 100%) 89.02%;
  --red-new-8: hsl(var(--red-new-8-hsl) / 1);
  --red-new-8-hsl: 3 calc(var(--saturation-factor, 1) * 100%) 88.235%;
  --red-new-9: hsl(var(--red-new-9-hsl) / 1);
  --red-new-9-hsl: 2.812 calc(var(--saturation-factor, 1) * 100%) 87.451%;
  --red-new-10: hsl(var(--red-new-10-hsl) / 1);
  --red-new-10-hsl: 2.647 calc(var(--saturation-factor, 1) * 100%) 86.667%;
  --red-new-11: hsl(var(--red-new-11-hsl) / 1);
  --red-new-11-hsl: 3.333 calc(var(--saturation-factor, 1) * 100%) 85.882%;
  --red-new-12: hsl(var(--red-new-12-hsl) / 1);
  --red-new-12-hsl: 3.158 calc(var(--saturation-factor, 1) * 100%) 85.098%;
  --red-new-13: hsl(var(--red-new-13-hsl) / 1);
  --red-new-13-hsl: 3 calc(var(--saturation-factor, 1) * 100%) 84.314%;
  --red-new-14: hsl(var(--red-new-14-hsl) / 1);
  --red-new-14-hsl: 2.892 calc(var(--saturation-factor, 1) * 100%) 83.725%;
  --red-new-15: hsl(var(--red-new-15-hsl) / 1);
  --red-new-15-hsl: 2.759 calc(var(--saturation-factor, 1) * 100%) 82.941%;
  --red-new-16: hsl(var(--red-new-16-hsl) / 1);
  --red-new-16-hsl: 3.297 calc(var(--saturation-factor, 1) * 100%) 82.157%;
  --red-new-17: hsl(var(--red-new-17-hsl) / 1);
  --red-new-17-hsl: 2.553 calc(var(--saturation-factor, 1) * 100%) 81.569%;
  --red-new-18: hsl(var(--red-new-18-hsl) / 1);
  --red-new-18-hsl: 3.093 calc(var(--saturation-factor, 1) * 97.98%) 80.588%;
  --red-new-19: hsl(var(--red-new-19-hsl) / 1);
  --red-new-19-hsl: 2.97 calc(var(--saturation-factor, 1) * 98.058%) 79.804%;
  --red-new-20: hsl(var(--red-new-20-hsl) / 1);
  --red-new-20-hsl: 2.33 calc(var(--saturation-factor, 1) * 96.262%) 79.02%;
  --red-new-21: hsl(var(--red-new-21-hsl) / 1);
  --red-new-21-hsl: 2.83 calc(var(--saturation-factor, 1) * 94.643%) 78.039%;
  --red-new-22: hsl(var(--red-new-22-hsl) / 1);
  --red-new-22-hsl: 2.222 calc(var(--saturation-factor, 1) * 93.103%) 77.255%;
  --red-new-23: hsl(var(--red-new-23-hsl) / 1);
  --red-new-23-hsl: 2.703 calc(var(--saturation-factor, 1) * 91.736%) 76.275%;
  --red-new-24: hsl(var(--red-new-24-hsl) / 1);
  --red-new-24-hsl: 2.124 calc(var(--saturation-factor, 1) * 90.4%) 75.49%;
  --red-new-25: hsl(var(--red-new-25-hsl) / 1);
  --red-new-25-hsl: 2.069 calc(var(--saturation-factor, 1) * 89.231%) 74.51%;
  --red-new-26: hsl(var(--red-new-26-hsl) / 1);
  --red-new-26-hsl: 2.034 calc(var(--saturation-factor, 1) * 88.06%) 73.725%;
  --red-new-27: hsl(var(--red-new-27-hsl) / 1);
  --red-new-27-hsl: 1.983 calc(var(--saturation-factor, 1) * 87.05%) 72.745%;
  --red-new-28: hsl(var(--red-new-28-hsl) / 1);
  --red-new-28-hsl: 1.951 calc(var(--saturation-factor, 1) * 86.014%) 71.961%;
  --red-new-29: hsl(var(--red-new-29-hsl) / 1);
  --red-new-29-hsl: 1.44 calc(var(--saturation-factor, 1) * 85.034%) 71.176%;
  --red-new-30: hsl(var(--red-new-30-hsl) / 1);
  --red-new-30-hsl: 1.875 calc(var(--saturation-factor, 1) * 84.211%) 70.196%;
  --red-new-31: hsl(var(--red-new-31-hsl) / 1);
  --red-new-31-hsl: 1.395 calc(var(--saturation-factor, 1) * 82.166%) 69.216%;
  --red-new-32: hsl(var(--red-new-32-hsl) / 1);
  --red-new-32-hsl: 0.916 calc(var(--saturation-factor, 1) * 81.366%) 68.431%;
  --red-new-33: hsl(var(--red-new-33-hsl) / 1);
  --red-new-33-hsl: 1.343 calc(var(--saturation-factor, 1) * 80.723%) 67.451%;
  --red-new-34: hsl(var(--red-new-34-hsl) / 1);
  --red-new-34-hsl: 0.889 calc(var(--saturation-factor, 1) * 78.947%) 66.471%;
  --red-new-35: hsl(var(--red-new-35-hsl) / 1);
  --red-new-35-hsl: 0.876 calc(var(--saturation-factor, 1) * 78.286%) 65.686%;
  --red-new-36: hsl(var(--red-new-36-hsl) / 1);
  --red-new-36-hsl: 0.435 calc(var(--saturation-factor, 1) * 76.667%) 64.706%;
  --red-new-37: hsl(var(--red-new-37-hsl) / 1);
  --red-new-37-hsl: 0 calc(var(--saturation-factor, 1) * 75.135%) 63.725%;
  --red-new-38: hsl(var(--red-new-38-hsl) / 1);
  --red-new-38-hsl: 0 calc(var(--saturation-factor, 1) * 74.603%) 62.941%;
  --red-new-39: hsl(var(--red-new-39-hsl) / 1);
  --red-new-39-hsl: 359.58 calc(var(--saturation-factor, 1) * 73.333%) 61.765%;
  --red-new-40: hsl(var(--red-new-40-hsl) / 1);
  --red-new-40-hsl: 359.586 calc(var(--saturation-factor, 1) * 72.139%) 60.588%;
  --red-new-41: hsl(var(--red-new-41-hsl) / 1);
  --red-new-41-hsl: 359.189 calc(var(--saturation-factor, 1) * 71.845%) 59.608%;
  --red-new-42: hsl(var(--red-new-42-hsl) / 1);
  --red-new-42-hsl: 358.8 calc(var(--saturation-factor, 1) * 70.755%) 58.431%;
  --red-new-43: hsl(var(--red-new-43-hsl) / 1);
  --red-new-43-hsl: 358.808 calc(var(--saturation-factor, 1) * 69.585%) 57.451%;
  --red-new-44: hsl(var(--red-new-44-hsl) / 1);
  --red-new-44-hsl: 358.431 calc(var(--saturation-factor, 1) * 68.61%) 56.275%;
  --red-new-45: hsl(var(--red-new-45-hsl) / 1);
  --red-new-45-hsl: 357.677 calc(var(--saturation-factor, 1) * 67.686%) 55.098%;
  --red-new-46: hsl(var(--red-new-46-hsl) / 1);
  --red-new-46-hsl: 356.962 calc(var(--saturation-factor, 1) * 66.949%) 53.725%;
  --red-new-47: hsl(var(--red-new-47-hsl) / 1);
  --red-new-47-hsl: 356.625 calc(var(--saturation-factor, 1) * 66.116%) 52.549%;
  --red-new-48: hsl(var(--red-new-48-hsl) / 1);
  --red-new-48-hsl: 356.296 calc(var(--saturation-factor, 1) * 65.323%) 51.373%;
  --red-new-49: hsl(var(--red-new-49-hsl) / 1);
  --red-new-49-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --red-new-50: hsl(var(--red-new-50-hsl) / 1);
  --red-new-50-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --red-new-51: hsl(var(--red-new-51-hsl) / 1);
  --red-new-51-hsl: 355.875 calc(var(--saturation-factor, 1) * 64%) 49.02%;
  --red-new-52: hsl(var(--red-new-52-hsl) / 1);
  --red-new-52-hsl: 355.796 calc(var(--saturation-factor, 1) * 64.082%) 48.039%;
  --red-new-53: hsl(var(--red-new-53-hsl) / 1);
  --red-new-53-hsl: 356.053 calc(var(--saturation-factor, 1) * 63.333%) 47.059%;
  --red-new-54: hsl(var(--red-new-54-hsl) / 1);
  --red-new-54-hsl: 355.973 calc(var(--saturation-factor, 1) * 63.404%) 46.078%;
  --red-new-55: hsl(var(--red-new-55-hsl) / 1);
  --red-new-55-hsl: 356.25 calc(var(--saturation-factor, 1) * 62.609%) 45.098%;
  --red-new-56: hsl(var(--red-new-56-hsl) / 1);
  --red-new-56-hsl: 356.17 calc(var(--saturation-factor, 1) * 62.667%) 44.118%;
  --red-new-57: hsl(var(--red-new-57-hsl) / 1);
  --red-new-57-hsl: 356.934 calc(var(--saturation-factor, 1) * 61.991%) 43.333%;
  --red-new-58: hsl(var(--red-new-58-hsl) / 1);
  --red-new-58-hsl: 356.842 calc(var(--saturation-factor, 1) * 61.86%) 42.157%;
  --red-new-59: hsl(var(--red-new-59-hsl) / 1);
  --red-new-59-hsl: 357.209 calc(var(--saturation-factor, 1) * 61.137%) 41.373%;
  --red-new-60: hsl(var(--red-new-60-hsl) / 1);
  --red-new-60-hsl: 357.143 calc(var(--saturation-factor, 1) * 61.165%) 40.392%;
  --red-new-61: hsl(var(--red-new-61-hsl) / 1);
  --red-new-61-hsl: 357.049 calc(var(--saturation-factor, 1) * 61%) 39.216%;
  --red-new-62: hsl(var(--red-new-62-hsl) / 1);
  --red-new-62-hsl: 357.458 calc(var(--saturation-factor, 1) * 60.204%) 38.431%;
  --red-new-63: hsl(var(--red-new-63-hsl) / 1);
  --red-new-63-hsl: 357.391 calc(var(--saturation-factor, 1) * 60.209%) 37.451%;
  --red-new-64: hsl(var(--red-new-64-hsl) / 1);
  --red-new-64-hsl: 357.321 calc(var(--saturation-factor, 1) * 60.215%) 36.471%;
  --red-new-65: hsl(var(--red-new-65-hsl) / 1);
  --red-new-65-hsl: 357.757 calc(var(--saturation-factor, 1) * 59.116%) 35.49%;
  --red-new-66: hsl(var(--red-new-66-hsl) / 1);
  --red-new-66-hsl: 357.692 calc(var(--saturation-factor, 1) * 59.091%) 34.51%;
  --red-new-67: hsl(var(--red-new-67-hsl) / 1);
  --red-new-67-hsl: 358.218 calc(var(--saturation-factor, 1) * 59.064%) 33.529%;
  --red-new-68: hsl(var(--red-new-68-hsl) / 1);
  --red-new-68-hsl: 358.163 calc(var(--saturation-factor, 1) * 59.036%) 32.549%;
  --red-new-69: hsl(var(--red-new-69-hsl) / 1);
  --red-new-69-hsl: 358.723 calc(var(--saturation-factor, 1) * 58.025%) 31.765%;
  --red-new-70: hsl(var(--red-new-70-hsl) / 1);
  --red-new-70-hsl: 358.681 calc(var(--saturation-factor, 1) * 57.962%) 30.784%;
  --red-new-71: hsl(var(--red-new-71-hsl) / 1);
  --red-new-71-hsl: 358.636 calc(var(--saturation-factor, 1) * 57.895%) 29.804%;
  --red-new-72: hsl(var(--red-new-72-hsl) / 1);
  --red-new-72-hsl: 358.588 calc(var(--saturation-factor, 1) * 57.823%) 28.824%;
  --red-new-73: hsl(var(--red-new-73-hsl) / 1);
  --red-new-73-hsl: 358.537 calc(var(--saturation-factor, 1) * 57.746%) 27.843%;
  --red-new-74: hsl(var(--red-new-74-hsl) / 1);
  --red-new-74-hsl: 358.481 calc(var(--saturation-factor, 1) * 57.664%) 26.863%;
  --red-new-75: hsl(var(--red-new-75-hsl) / 1);
  --red-new-75-hsl: 358.421 calc(var(--saturation-factor, 1) * 57.576%) 25.882%;
  --red-new-76: hsl(var(--red-new-76-hsl) / 1);
  --red-new-76-hsl: 359.178 calc(var(--saturation-factor, 1) * 56.589%) 25.294%;
  --red-new-77: hsl(var(--red-new-77-hsl) / 1);
  --red-new-77-hsl: 0 calc(var(--saturation-factor, 1) * 56.452%) 24.314%;
  --red-new-78: hsl(var(--red-new-78-hsl) / 1);
  --red-new-78-hsl: 0 calc(var(--saturation-factor, 1) * 56.303%) 23.333%;
  --red-new-79: hsl(var(--red-new-79-hsl) / 1);
  --red-new-79-hsl: 0 calc(var(--saturation-factor, 1) * 56.14%) 22.353%;
  --red-new-80: hsl(var(--red-new-80-hsl) / 1);
  --red-new-80-hsl: 0 calc(var(--saturation-factor, 1) * 56.364%) 21.569%;
  --red-new-81: hsl(var(--red-new-81-hsl) / 1);
  --red-new-81-hsl: 0 calc(var(--saturation-factor, 1) * 56.19%) 20.588%;
  --red-new-82: hsl(var(--red-new-82-hsl) / 1);
  --red-new-82-hsl: 0 calc(var(--saturation-factor, 1) * 56%) 19.608%;
  --red-new-83: hsl(var(--red-new-83-hsl) / 1);
  --red-new-83-hsl: 0 calc(var(--saturation-factor, 1) * 56.25%) 18.824%;
  --red-new-84: hsl(var(--red-new-84-hsl) / 1);
  --red-new-84-hsl: 0 calc(var(--saturation-factor, 1) * 56.044%) 17.843%;
  --red-new-85: hsl(var(--red-new-85-hsl) / 1);
  --red-new-85-hsl: 1.2 calc(var(--saturation-factor, 1) * 58.14%) 16.863%;
  --red-new-86: hsl(var(--red-new-86-hsl) / 1);
  --red-new-86-hsl: 1.277 calc(var(--saturation-factor, 1) * 58.025%) 15.882%;
  --red-new-87: hsl(var(--red-new-87-hsl) / 1);
  --red-new-87-hsl: 1.333 calc(var(--saturation-factor, 1) * 58.442%) 15.098%;
  --red-new-88: hsl(var(--red-new-88-hsl) / 1);
  --red-new-88-hsl: 1.395 calc(var(--saturation-factor, 1) * 58.904%) 14.314%;
  --red-new-89: hsl(var(--red-new-89-hsl) / 1);
  --red-new-89-hsl: 1.5 calc(var(--saturation-factor, 1) * 58.824%) 13.333%;
  --red-new-90: hsl(var(--red-new-90-hsl) / 1);
  --red-new-90-hsl: 1.579 calc(var(--saturation-factor, 1) * 59.375%) 12.549%;
  --red-new-91: hsl(var(--red-new-91-hsl) / 1);
  --red-new-91-hsl: 1.667 calc(var(--saturation-factor, 1) * 60%) 11.765%;
  --red-new-92: hsl(var(--red-new-92-hsl) / 1);
  --red-new-92-hsl: 0 calc(var(--saturation-factor, 1) * 60.714%) 10.98%;
  --red-new-93: hsl(var(--red-new-93-hsl) / 1);
  --red-new-93-hsl: 1.875 calc(var(--saturation-factor, 1) * 64%) 9.804%;
  --red-new-94: hsl(var(--red-new-94-hsl) / 1);
  --red-new-94-hsl: 2.069 calc(var(--saturation-factor, 1) * 64.444%) 8.824%;
  --red-new-95: hsl(var(--red-new-95-hsl) / 1);
  --red-new-95-hsl: 2.308 calc(var(--saturation-factor, 1) * 65%) 7.843%;
  --red-new-96: hsl(var(--red-new-96-hsl) / 1);
  --red-new-96-hsl: 0 calc(var(--saturation-factor, 1) * 65.714%) 6.863%;
  --red-new-97: hsl(var(--red-new-97-hsl) / 1);
  --red-new-97-hsl: 3 calc(var(--saturation-factor, 1) * 71.429%) 5.49%;
  --red-new-98: hsl(var(--red-new-98-hsl) / 1);
  --red-new-98-hsl: 0 calc(var(--saturation-factor, 1) * 71.429%) 4.118%;
  --red-new-99: hsl(var(--red-new-99-hsl) / 1);
  --red-new-99-hsl: 0 calc(var(--saturation-factor, 1) * 63.636%) 2.157%;
  --red-new-100: hsl(var(--red-new-100-hsl) / 1);
  --red-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --teal-new-1: hsl(var(--teal-new-1-hsl) / 1);
  --teal-new-1-hsl: 186 calc(var(--saturation-factor, 1) * 100%) 90.196%;
  --teal-new-2: hsl(var(--teal-new-2-hsl) / 1);
  --teal-new-2-hsl: 186.923 calc(var(--saturation-factor, 1) * 92.857%) 89.02%;
  --teal-new-3: hsl(var(--teal-new-3-hsl) / 1);
  --teal-new-3-hsl: 185.66 calc(var(--saturation-factor, 1) * 84.127%) 87.647%;
  --teal-new-4: hsl(var(--teal-new-4-hsl) / 1);
  --teal-new-4-hsl: 186.667 calc(var(--saturation-factor, 1) * 79.412%) 86.667%;
  --teal-new-5: hsl(var(--teal-new-5-hsl) / 1);
  --teal-new-5-hsl: 185.455 calc(var(--saturation-factor, 1) * 73.333%) 85.294%;
  --teal-new-6: hsl(var(--teal-new-6-hsl) / 1);
  --teal-new-6-hsl: 186.316 calc(var(--saturation-factor, 1) * 70.37%) 84.118%;
  --teal-new-7: hsl(var(--teal-new-7-hsl) / 1);
  --teal-new-7-hsl: 186.207 calc(var(--saturation-factor, 1) * 65.909%) 82.745%;
  --teal-new-8: hsl(var(--teal-new-8-hsl) / 1);
  --teal-new-8-hsl: 186.102 calc(var(--saturation-factor, 1) * 63.441%) 81.765%;
  --teal-new-9: hsl(var(--teal-new-9-hsl) / 1);
  --teal-new-9-hsl: 186 calc(var(--saturation-factor, 1) * 60%) 80.392%;
  --teal-new-10: hsl(var(--teal-new-10-hsl) / 1);
  --teal-new-10-hsl: 185.806 calc(var(--saturation-factor, 1) * 58.491%) 79.216%;
  --teal-new-11: hsl(var(--teal-new-11-hsl) / 1);
  --teal-new-11-hsl: 185.806 calc(var(--saturation-factor, 1) * 55.357%) 78.039%;
  --teal-new-12: hsl(var(--teal-new-12-hsl) / 1);
  --teal-new-12-hsl: 185.625 calc(var(--saturation-factor, 1) * 54.237%) 76.863%;
  --teal-new-13: hsl(var(--teal-new-13-hsl) / 1);
  --teal-new-13-hsl: 185.538 calc(var(--saturation-factor, 1) * 52%) 75.49%;
  --teal-new-14: hsl(var(--teal-new-14-hsl) / 1);
  --teal-new-14-hsl: 186.364 calc(var(--saturation-factor, 1) * 50.769%) 74.51%;
  --teal-new-15: hsl(var(--teal-new-15-hsl) / 1);
  --teal-new-15-hsl: 185.373 calc(var(--saturation-factor, 1) * 48.905%) 73.137%;
  --teal-new-16: hsl(var(--teal-new-16-hsl) / 1);
  --teal-new-16-hsl: 186.087 calc(var(--saturation-factor, 1) * 48.252%) 71.961%;
  --teal-new-17: hsl(var(--teal-new-17-hsl) / 1);
  --teal-new-17-hsl: 185.217 calc(var(--saturation-factor, 1) * 46.309%) 70.784%;
  --teal-new-18: hsl(var(--teal-new-18-hsl) / 1);
  --teal-new-18-hsl: 185.915 calc(var(--saturation-factor, 1) * 45.806%) 69.608%;
  --teal-new-19: hsl(var(--teal-new-19-hsl) / 1);
  --teal-new-19-hsl: 185.07 calc(var(--saturation-factor, 1) * 44.099%) 68.431%;
  --teal-new-20: hsl(var(--teal-new-20-hsl) / 1);
  --teal-new-20-hsl: 185.753 calc(var(--saturation-factor, 1) * 43.713%) 67.255%;
  --teal-new-21: hsl(var(--teal-new-21-hsl) / 1);
  --teal-new-21-hsl: 185.6 calc(var(--saturation-factor, 1) * 43.353%) 66.078%;
  --teal-new-22: hsl(var(--teal-new-22-hsl) / 1);
  --teal-new-22-hsl: 185.6 calc(var(--saturation-factor, 1) * 41.899%) 64.902%;
  --teal-new-23: hsl(var(--teal-new-23-hsl) / 1);
  --teal-new-23-hsl: 185.455 calc(var(--saturation-factor, 1) * 41.622%) 63.725%;
  --teal-new-24: hsl(var(--teal-new-24-hsl) / 1);
  --teal-new-24-hsl: 185.385 calc(var(--saturation-factor, 1) * 40.625%) 62.353%;
  --teal-new-25: hsl(var(--teal-new-25-hsl) / 1);
  --teal-new-25-hsl: 186.076 calc(var(--saturation-factor, 1) * 40.102%) 61.373%;
  --teal-new-26: hsl(var(--teal-new-26-hsl) / 1);
  --teal-new-26-hsl: 185.25 calc(var(--saturation-factor, 1) * 39.216%) 60%;
  --teal-new-27: hsl(var(--teal-new-27-hsl) / 1);
  --teal-new-27-hsl: 185.854 calc(var(--saturation-factor, 1) * 39.048%) 58.824%;
  --teal-new-28: hsl(var(--teal-new-28-hsl) / 1);
  --teal-new-28-hsl: 185.122 calc(var(--saturation-factor, 1) * 37.963%) 57.647%;
  --teal-new-29: hsl(var(--teal-new-29-hsl) / 1);
  --teal-new-29-hsl: 185.714 calc(var(--saturation-factor, 1) * 37.838%) 56.471%;
  --teal-new-30: hsl(var(--teal-new-30-hsl) / 1);
  --teal-new-30-hsl: 185.581 calc(var(--saturation-factor, 1) * 37.719%) 55.294%;
  --teal-new-31: hsl(var(--teal-new-31-hsl) / 1);
  --teal-new-31-hsl: 185.581 calc(var(--saturation-factor, 1) * 36.752%) 54.118%;
  --teal-new-32: hsl(var(--teal-new-32-hsl) / 1);
  --teal-new-32-hsl: 185.455 calc(var(--saturation-factor, 1) * 36.667%) 52.941%;
  --teal-new-33: hsl(var(--teal-new-33-hsl) / 1);
  --teal-new-33-hsl: 185.393 calc(var(--saturation-factor, 1) * 36.032%) 51.569%;
  --teal-new-34: hsl(var(--teal-new-34-hsl) / 1);
  --teal-new-34-hsl: 185.275 calc(var(--saturation-factor, 1) * 35.968%) 50.392%;
  --teal-new-35: hsl(var(--teal-new-35-hsl) / 1);
  --teal-new-35-hsl: 185.217 calc(var(--saturation-factor, 1) * 36.8%) 49.02%;
  --teal-new-36: hsl(var(--teal-new-36-hsl) / 1);
  --teal-new-36-hsl: 185.161 calc(var(--saturation-factor, 1) * 37.959%) 48.039%;
  --teal-new-37: hsl(var(--teal-new-37-hsl) / 1);
  --teal-new-37-hsl: 185.684 calc(var(--saturation-factor, 1) * 39.749%) 46.863%;
  --teal-new-38: hsl(var(--teal-new-38-hsl) / 1);
  --teal-new-38-hsl: 185 calc(var(--saturation-factor, 1) * 41.379%) 45.49%;
  --teal-new-39: hsl(var(--teal-new-39-hsl) / 1);
  --teal-new-39-hsl: 185.455 calc(var(--saturation-factor, 1) * 44%) 44.118%;
  --teal-new-40: hsl(var(--teal-new-40-hsl) / 1);
  --teal-new-40-hsl: 184.8 calc(var(--saturation-factor, 1) * 45.872%) 42.745%;
  --teal-new-41: hsl(var(--teal-new-41-hsl) / 1);
  --teal-new-41-hsl: 184.706 calc(var(--saturation-factor, 1) * 48.113%) 41.569%;
  --teal-new-42: hsl(var(--teal-new-42-hsl) / 1);
  --teal-new-42-hsl: 185.143 calc(var(--saturation-factor, 1) * 51.22%) 40.196%;
  --teal-new-43: hsl(var(--teal-new-43-hsl) / 1);
  --teal-new-43-hsl: 184.486 calc(var(--saturation-factor, 1) * 54.315%) 38.627%;
  --teal-new-44: hsl(var(--teal-new-44-hsl) / 1);
  --teal-new-44-hsl: 184.909 calc(var(--saturation-factor, 1) * 57.895%) 37.255%;
  --teal-new-45: hsl(var(--teal-new-45-hsl) / 1);
  --teal-new-45-hsl: 184.286 calc(var(--saturation-factor, 1) * 61.538%) 35.686%;
  --teal-new-46: hsl(var(--teal-new-46-hsl) / 1);
  --teal-new-46-hsl: 184.655 calc(var(--saturation-factor, 1) * 66.667%) 34.118%;
  --teal-new-47: hsl(var(--teal-new-47-hsl) / 1);
  --teal-new-47-hsl: 184.463 calc(var(--saturation-factor, 1) * 73.333%) 32.353%;
  --teal-new-48: hsl(var(--teal-new-48-hsl) / 1);
  --teal-new-48-hsl: 184.219 calc(var(--saturation-factor, 1) * 84.211%) 29.804%;
  --teal-new-49: hsl(var(--teal-new-49-hsl) / 1);
  --teal-new-49-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --teal-new-50: hsl(var(--teal-new-50-hsl) / 1);
  --teal-new-50-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --teal-new-51: hsl(var(--teal-new-51-hsl) / 1);
  --teal-new-51-hsl: 184.091 calc(var(--saturation-factor, 1) * 95.652%) 27.059%;
  --teal-new-52: hsl(var(--teal-new-52-hsl) / 1);
  --teal-new-52-hsl: 183.81 calc(var(--saturation-factor, 1) * 91.304%) 27.059%;
  --teal-new-53: hsl(var(--teal-new-53-hsl) / 1);
  --teal-new-53-hsl: 183.967 calc(var(--saturation-factor, 1) * 88.321%) 26.863%;
  --teal-new-54: hsl(var(--teal-new-54-hsl) / 1);
  --teal-new-54-hsl: 184.174 calc(var(--saturation-factor, 1) * 83.942%) 26.863%;
  --teal-new-55: hsl(var(--teal-new-55-hsl) / 1);
  --teal-new-55-hsl: 184.364 calc(var(--saturation-factor, 1) * 80.882%) 26.667%;
  --teal-new-56: hsl(var(--teal-new-56-hsl) / 1);
  --teal-new-56-hsl: 183.962 calc(var(--saturation-factor, 1) * 79.104%) 26.275%;
  --teal-new-57: hsl(var(--teal-new-57-hsl) / 1);
  --teal-new-57-hsl: 184.118 calc(var(--saturation-factor, 1) * 77.273%) 25.882%;
  --teal-new-58: hsl(var(--teal-new-58-hsl) / 1);
  --teal-new-58-hsl: 184.898 calc(var(--saturation-factor, 1) * 74.242%) 25.882%;
  --teal-new-59: hsl(var(--teal-new-59-hsl) / 1);
  --teal-new-59-hsl: 184.421 calc(var(--saturation-factor, 1) * 73.643%) 25.294%;
  --teal-new-60: hsl(var(--teal-new-60-hsl) / 1);
  --teal-new-60-hsl: 184.615 calc(var(--saturation-factor, 1) * 71.654%) 24.902%;
  --teal-new-61: hsl(var(--teal-new-61-hsl) / 1);
  --teal-new-61-hsl: 184.828 calc(var(--saturation-factor, 1) * 69.6%) 24.51%;
  --teal-new-62: hsl(var(--teal-new-62-hsl) / 1);
  --teal-new-62-hsl: 184.286 calc(var(--saturation-factor, 1) * 68.852%) 23.922%;
  --teal-new-63: hsl(var(--teal-new-63-hsl) / 1);
  --teal-new-63-hsl: 184.5 calc(var(--saturation-factor, 1) * 66.667%) 23.529%;
  --teal-new-64: hsl(var(--teal-new-64-hsl) / 1);
  --teal-new-64-hsl: 184.615 calc(var(--saturation-factor, 1) * 66.102%) 23.137%;
  --teal-new-65: hsl(var(--teal-new-65-hsl) / 1);
  --teal-new-65-hsl: 184.8 calc(var(--saturation-factor, 1) * 65.217%) 22.549%;
  --teal-new-66: hsl(var(--teal-new-66-hsl) / 1);
  --teal-new-66-hsl: 184.167 calc(var(--saturation-factor, 1) * 64.286%) 21.961%;
  --teal-new-67: hsl(var(--teal-new-67-hsl) / 1);
  --teal-new-67-hsl: 184.412 calc(var(--saturation-factor, 1) * 61.818%) 21.569%;
  --teal-new-68: hsl(var(--teal-new-68-hsl) / 1);
  --teal-new-68-hsl: 185.455 calc(var(--saturation-factor, 1) * 61.111%) 21.176%;
  --teal-new-69: hsl(var(--teal-new-69-hsl) / 1);
  --teal-new-69-hsl: 184.688 calc(var(--saturation-factor, 1) * 61.538%) 20.392%;
  --teal-new-70: hsl(var(--teal-new-70-hsl) / 1);
  --teal-new-70-hsl: 184.918 calc(var(--saturation-factor, 1) * 60.396%) 19.804%;
  --teal-new-71: hsl(var(--teal-new-71-hsl) / 1);
  --teal-new-71-hsl: 185.085 calc(var(--saturation-factor, 1) * 59.596%) 19.412%;
  --teal-new-72: hsl(var(--teal-new-72-hsl) / 1);
  --teal-new-72-hsl: 185.357 calc(var(--saturation-factor, 1) * 58.333%) 18.824%;
  --teal-new-73: hsl(var(--teal-new-73-hsl) / 1);
  --teal-new-73-hsl: 184.528 calc(var(--saturation-factor, 1) * 56.989%) 18.235%;
  --teal-new-74: hsl(var(--teal-new-74-hsl) / 1);
  --teal-new-74-hsl: 184.615 calc(var(--saturation-factor, 1) * 57.778%) 17.647%;
  --teal-new-75: hsl(var(--teal-new-75-hsl) / 1);
  --teal-new-75-hsl: 184.898 calc(var(--saturation-factor, 1) * 56.322%) 17.059%;
  --teal-new-76: hsl(var(--teal-new-76-hsl) / 1);
  --teal-new-76-hsl: 185.106 calc(var(--saturation-factor, 1) * 55.294%) 16.667%;
  --teal-new-77: hsl(var(--teal-new-77-hsl) / 1);
  --teal-new-77-hsl: 185.333 calc(var(--saturation-factor, 1) * 55.556%) 15.882%;
  --teal-new-78: hsl(var(--teal-new-78-hsl) / 1);
  --teal-new-78-hsl: 185.581 calc(var(--saturation-factor, 1) * 54.43%) 15.49%;
  --teal-new-79: hsl(var(--teal-new-79-hsl) / 1);
  --teal-new-79-hsl: 184.39 calc(var(--saturation-factor, 1) * 54.667%) 14.706%;
  --teal-new-80: hsl(var(--teal-new-80-hsl) / 1);
  --teal-new-80-hsl: 186.154 calc(var(--saturation-factor, 1) * 53.425%) 14.314%;
  --teal-new-81: hsl(var(--teal-new-81-hsl) / 1);
  --teal-new-81-hsl: 184.865 calc(var(--saturation-factor, 1) * 53.623%) 13.529%;
  --teal-new-82: hsl(var(--teal-new-82-hsl) / 1);
  --teal-new-82-hsl: 185.143 calc(var(--saturation-factor, 1) * 52.239%) 13.137%;
  --teal-new-83: hsl(var(--teal-new-83-hsl) / 1);
  --teal-new-83-hsl: 185.455 calc(var(--saturation-factor, 1) * 52.381%) 12.353%;
  --teal-new-84: hsl(var(--teal-new-84-hsl) / 1);
  --teal-new-84-hsl: 185.625 calc(var(--saturation-factor, 1) * 53.333%) 11.765%;
  --teal-new-85: hsl(var(--teal-new-85-hsl) / 1);
  --teal-new-85-hsl: 184.138 calc(var(--saturation-factor, 1) * 50.877%) 11.176%;
  --teal-new-86: hsl(var(--teal-new-86-hsl) / 1);
  --teal-new-86-hsl: 184.286 calc(var(--saturation-factor, 1) * 51.852%) 10.588%;
  --teal-new-87: hsl(var(--teal-new-87-hsl) / 1);
  --teal-new-87-hsl: 184.444 calc(var(--saturation-factor, 1) * 52.941%) 10%;
  --teal-new-88: hsl(var(--teal-new-88-hsl) / 1);
  --teal-new-88-hsl: 184.8 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
  --teal-new-89: hsl(var(--teal-new-89-hsl) / 1);
  --teal-new-89-hsl: 185.217 calc(var(--saturation-factor, 1) * 51.111%) 8.824%;
  --teal-new-90: hsl(var(--teal-new-90-hsl) / 1);
  --teal-new-90-hsl: 185.455 calc(var(--saturation-factor, 1) * 52.381%) 8.235%;
  --teal-new-91: hsl(var(--teal-new-91-hsl) / 1);
  --teal-new-91-hsl: 185.714 calc(var(--saturation-factor, 1) * 53.846%) 7.647%;
  --teal-new-92: hsl(var(--teal-new-92-hsl) / 1);
  --teal-new-92-hsl: 186 calc(var(--saturation-factor, 1) * 55.556%) 7.059%;
  --teal-new-93: hsl(var(--teal-new-93-hsl) / 1);
  --teal-new-93-hsl: 183.529 calc(var(--saturation-factor, 1) * 51.515%) 6.471%;
  --teal-new-94: hsl(var(--teal-new-94-hsl) / 1);
  --teal-new-94-hsl: 187.5 calc(var(--saturation-factor, 1) * 53.333%) 5.882%;
  --teal-new-95: hsl(var(--teal-new-95-hsl) / 1);
  --teal-new-95-hsl: 184.286 calc(var(--saturation-factor, 1) * 53.846%) 5.098%;
  --teal-new-96: hsl(var(--teal-new-96-hsl) / 1);
  --teal-new-96-hsl: 185 calc(var(--saturation-factor, 1) * 54.545%) 4.314%;
  --teal-new-97: hsl(var(--teal-new-97-hsl) / 1);
  --teal-new-97-hsl: 186.667 calc(var(--saturation-factor, 1) * 52.941%) 3.333%;
  --teal-new-98: hsl(var(--teal-new-98-hsl) / 1);
  --teal-new-98-hsl: 190 calc(var(--saturation-factor, 1) * 50%) 2.353%;
  --teal-new-99: hsl(var(--teal-new-99-hsl) / 1);
  --teal-new-99-hsl: 180 calc(var(--saturation-factor, 1) * 33.333%) 1.176%;
  --teal-new-100: hsl(var(--teal-new-100-hsl) / 1);
  --teal-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --yellow-new-1: hsl(var(--yellow-new-1-hsl) / 1);
  --yellow-new-1-hsl: 25.5 calc(var(--saturation-factor, 1) * 100%) 92.157%;
  --yellow-new-2: hsl(var(--yellow-new-2-hsl) / 1);
  --yellow-new-2-hsl: 27.907 calc(var(--saturation-factor, 1) * 91.489%) 90.784%;
  --yellow-new-3: hsl(var(--yellow-new-3-hsl) / 1);
  --yellow-new-3-hsl: 28.085 calc(var(--saturation-factor, 1) * 88.679%) 89.608%;
  --yellow-new-4: hsl(var(--yellow-new-4-hsl) / 1);
  --yellow-new-4-hsl: 28.8 calc(var(--saturation-factor, 1) * 83.333%) 88.235%;
  --yellow-new-5: hsl(var(--yellow-new-5-hsl) / 1);
  --yellow-new-5-hsl: 29.434 calc(var(--saturation-factor, 1) * 79.104%) 86.863%;
  --yellow-new-6: hsl(var(--yellow-new-6-hsl) / 1);
  --yellow-new-6-hsl: 30 calc(var(--saturation-factor, 1) * 75.676%) 85.49%;
  --yellow-new-7: hsl(var(--yellow-new-7-hsl) / 1);
  --yellow-new-7-hsl: 30 calc(var(--saturation-factor, 1) * 75%) 84.314%;
  --yellow-new-8: hsl(var(--yellow-new-8-hsl) / 1);
  --yellow-new-8-hsl: 30.476 calc(var(--saturation-factor, 1) * 72.414%) 82.941%;
  --yellow-new-9: hsl(var(--yellow-new-9-hsl) / 1);
  --yellow-new-9-hsl: 30.462 calc(var(--saturation-factor, 1) * 69.892%) 81.765%;
  --yellow-new-10: hsl(var(--yellow-new-10-hsl) / 1);
  --yellow-new-10-hsl: 31.765 calc(var(--saturation-factor, 1) * 68%) 80.392%;
  --yellow-new-11: hsl(var(--yellow-new-11-hsl) / 1);
  --yellow-new-11-hsl: 32.113 calc(var(--saturation-factor, 1) * 66.355%) 79.02%;
  --yellow-new-12: hsl(var(--yellow-new-12-hsl) / 1);
  --yellow-new-12-hsl: 31.622 calc(var(--saturation-factor, 1) * 66.071%) 78.039%;
  --yellow-new-13: hsl(var(--yellow-new-13-hsl) / 1);
  --yellow-new-13-hsl: 31.948 calc(var(--saturation-factor, 1) * 64.706%) 76.667%;
  --yellow-new-14: hsl(var(--yellow-new-14-hsl) / 1);
  --yellow-new-14-hsl: 31.899 calc(var(--saturation-factor, 1) * 63.2%) 75.49%;
  --yellow-new-15: hsl(var(--yellow-new-15-hsl) / 1);
  --yellow-new-15-hsl: 32.195 calc(var(--saturation-factor, 1) * 62.121%) 74.118%;
  --yellow-new-16: hsl(var(--yellow-new-16-hsl) / 1);
  --yellow-new-16-hsl: 32.143 calc(var(--saturation-factor, 1) * 60.87%) 72.941%;
  --yellow-new-17: hsl(var(--yellow-new-17-hsl) / 1);
  --yellow-new-17-hsl: 32.791 calc(var(--saturation-factor, 1) * 59.722%) 71.765%;
  --yellow-new-18: hsl(var(--yellow-new-18-hsl) / 1);
  --yellow-new-18-hsl: 32.667 calc(var(--saturation-factor, 1) * 60%) 70.588%;
  --yellow-new-19: hsl(var(--yellow-new-19-hsl) / 1);
  --yellow-new-19-hsl: 32.609 calc(var(--saturation-factor, 1) * 58.974%) 69.412%;
  --yellow-new-20: hsl(var(--yellow-new-20-hsl) / 1);
  --yellow-new-20-hsl: 32.553 calc(var(--saturation-factor, 1) * 58.025%) 68.235%;
  --yellow-new-21: hsl(var(--yellow-new-21-hsl) / 1);
  --yellow-new-21-hsl: 32.5 calc(var(--saturation-factor, 1) * 57.143%) 67.059%;
  --yellow-new-22: hsl(var(--yellow-new-22-hsl) / 1);
  --yellow-new-22-hsl: 32.727 calc(var(--saturation-factor, 1) * 56.571%) 65.686%;
  --yellow-new-23: hsl(var(--yellow-new-23-hsl) / 1);
  --yellow-new-23-hsl: 33.267 calc(var(--saturation-factor, 1) * 55.801%) 64.51%;
  --yellow-new-24: hsl(var(--yellow-new-24-hsl) / 1);
  --yellow-new-24-hsl: 33.204 calc(var(--saturation-factor, 1) * 55.08%) 63.333%;
  --yellow-new-25: hsl(var(--yellow-new-25-hsl) / 1);
  --yellow-new-25-hsl: 33.143 calc(var(--saturation-factor, 1) * 54.404%) 62.157%;
  --yellow-new-26: hsl(var(--yellow-new-26-hsl) / 1);
  --yellow-new-26-hsl: 33.084 calc(var(--saturation-factor, 1) * 53.769%) 60.98%;
  --yellow-new-27: hsl(var(--yellow-new-27-hsl) / 1);
  --yellow-new-27-hsl: 33.028 calc(var(--saturation-factor, 1) * 53.171%) 59.804%;
  --yellow-new-28: hsl(var(--yellow-new-28-hsl) / 1);
  --yellow-new-28-hsl: 33.514 calc(var(--saturation-factor, 1) * 52.607%) 58.627%;
  --yellow-new-29: hsl(var(--yellow-new-29-hsl) / 1);
  --yellow-new-29-hsl: 33.451 calc(var(--saturation-factor, 1) * 52.074%) 57.451%;
  --yellow-new-30: hsl(var(--yellow-new-30-hsl) / 1);
  --yellow-new-30-hsl: 33.391 calc(var(--saturation-factor, 1) * 51.57%) 56.275%;
  --yellow-new-31: hsl(var(--yellow-new-31-hsl) / 1);
  --yellow-new-31-hsl: 33.333 calc(var(--saturation-factor, 1) * 51.092%) 55.098%;
  --yellow-new-32: hsl(var(--yellow-new-32-hsl) / 1);
  --yellow-new-32-hsl: 33.782 calc(var(--saturation-factor, 1) * 50.638%) 53.922%;
  --yellow-new-33: hsl(var(--yellow-new-33-hsl) / 1);
  --yellow-new-33-hsl: 33.719 calc(var(--saturation-factor, 1) * 50.207%) 52.745%;
  --yellow-new-34: hsl(var(--yellow-new-34-hsl) / 1);
  --yellow-new-34-hsl: 33.659 calc(var(--saturation-factor, 1) * 49.798%) 51.569%;
  --yellow-new-35: hsl(var(--yellow-new-35-hsl) / 1);
  --yellow-new-35-hsl: 33.387 calc(var(--saturation-factor, 1) * 49.206%) 50.588%;
  --yellow-new-36: hsl(var(--yellow-new-36-hsl) / 1);
  --yellow-new-36-hsl: 33.81 calc(var(--saturation-factor, 1) * 50%) 49.412%;
  --yellow-new-37: hsl(var(--yellow-new-37-hsl) / 1);
  --yellow-new-37-hsl: 33.75 calc(var(--saturation-factor, 1) * 52.033%) 48.235%;
  --yellow-new-38: hsl(var(--yellow-new-38-hsl) / 1);
  --yellow-new-38-hsl: 33.692 calc(var(--saturation-factor, 1) * 54.167%) 47.059%;
  --yellow-new-39: hsl(var(--yellow-new-39-hsl) / 1);
  --yellow-new-39-hsl: 34.091 calc(var(--saturation-factor, 1) * 56.41%) 45.882%;
  --yellow-new-40: hsl(var(--yellow-new-40-hsl) / 1);
  --yellow-new-40-hsl: 34.286 calc(var(--saturation-factor, 1) * 58.59%) 44.51%;
  --yellow-new-41: hsl(var(--yellow-new-41-hsl) / 1);
  --yellow-new-41-hsl: 34.222 calc(var(--saturation-factor, 1) * 61.086%) 43.333%;
  --yellow-new-42: hsl(var(--yellow-new-42-hsl) / 1);
  --yellow-new-42-hsl: 34.599 calc(var(--saturation-factor, 1) * 63.721%) 42.157%;
  --yellow-new-43: hsl(var(--yellow-new-43-hsl) / 1);
  --yellow-new-43-hsl: 34.714 calc(var(--saturation-factor, 1) * 67.308%) 40.784%;
  --yellow-new-44: hsl(var(--yellow-new-44-hsl) / 1);
  --yellow-new-44-hsl: 34.648 calc(var(--saturation-factor, 1) * 70.297%) 39.608%;
  --yellow-new-45: hsl(var(--yellow-new-45-hsl) / 1);
  --yellow-new-45-hsl: 35.172 calc(var(--saturation-factor, 1) * 74.359%) 38.235%;
  --yellow-new-46: hsl(var(--yellow-new-46-hsl) / 1);
  --yellow-new-46-hsl: 35.27 calc(var(--saturation-factor, 1) * 78.723%) 36.863%;
  --yellow-new-47: hsl(var(--yellow-new-47-hsl) / 1);
  --yellow-new-47-hsl: 35.762 calc(var(--saturation-factor, 1) * 84.358%) 35.098%;
  --yellow-new-48: hsl(var(--yellow-new-48-hsl) / 1);
  --yellow-new-48-hsl: 36.538 calc(var(--saturation-factor, 1) * 91.765%) 33.333%;
  --yellow-new-49: hsl(var(--yellow-new-49-hsl) / 1);
  --yellow-new-49-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --yellow-new-50: hsl(var(--yellow-new-50-hsl) / 1);
  --yellow-new-50-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --yellow-new-51: hsl(var(--yellow-new-51-hsl) / 1);
  --yellow-new-51-hsl: 36.923 calc(var(--saturation-factor, 1) * 98.734%) 30.98%;
  --yellow-new-52: hsl(var(--yellow-new-52-hsl) / 1);
  --yellow-new-52-hsl: 36.711 calc(var(--saturation-factor, 1) * 97.436%) 30.588%;
  --yellow-new-53: hsl(var(--yellow-new-53-hsl) / 1);
  --yellow-new-53-hsl: 36.486 calc(var(--saturation-factor, 1) * 96.104%) 30.196%;
  --yellow-new-54: hsl(var(--yellow-new-54-hsl) / 1);
  --yellow-new-54-hsl: 36.667 calc(var(--saturation-factor, 1) * 96%) 29.412%;
  --yellow-new-55: hsl(var(--yellow-new-55-hsl) / 1);
  --yellow-new-55-hsl: 36.429 calc(var(--saturation-factor, 1) * 94.595%) 29.02%;
  --yellow-new-56: hsl(var(--yellow-new-56-hsl) / 1);
  --yellow-new-56-hsl: 36.444 calc(var(--saturation-factor, 1) * 93.103%) 28.431%;
  --yellow-new-57: hsl(var(--yellow-new-57-hsl) / 1);
  --yellow-new-57-hsl: 36.364 calc(var(--saturation-factor, 1) * 92.958%) 27.843%;
  --yellow-new-58: hsl(var(--yellow-new-58-hsl) / 1);
  --yellow-new-58-hsl: 36.378 calc(var(--saturation-factor, 1) * 91.367%) 27.255%;
  --yellow-new-59: hsl(var(--yellow-new-59-hsl) / 1);
  --yellow-new-59-hsl: 36.29 calc(var(--saturation-factor, 1) * 91.176%) 26.667%;
  --yellow-new-60: hsl(var(--yellow-new-60-hsl) / 1);
  --yellow-new-60-hsl: 36 calc(var(--saturation-factor, 1) * 89.552%) 26.275%;
  --yellow-new-61: hsl(var(--yellow-new-61-hsl) / 1);
  --yellow-new-61-hsl: 36.207 calc(var(--saturation-factor, 1) * 89.231%) 25.49%;
  --yellow-new-62: hsl(var(--yellow-new-62-hsl) / 1);
  --yellow-new-62-hsl: 36.106 calc(var(--saturation-factor, 1) * 88.976%) 24.902%;
  --yellow-new-63: hsl(var(--yellow-new-63-hsl) / 1);
  --yellow-new-63-hsl: 35.78 calc(var(--saturation-factor, 1) * 87.2%) 24.51%;
  --yellow-new-64: hsl(var(--yellow-new-64-hsl) / 1);
  --yellow-new-64-hsl: 35.66 calc(var(--saturation-factor, 1) * 86.885%) 23.922%;
  --yellow-new-65: hsl(var(--yellow-new-65-hsl) / 1);
  --yellow-new-65-hsl: 36.471 calc(var(--saturation-factor, 1) * 86.441%) 23.137%;
  --yellow-new-66: hsl(var(--yellow-new-66-hsl) / 1);
  --yellow-new-66-hsl: 36.364 calc(var(--saturation-factor, 1) * 86.087%) 22.549%;
  --yellow-new-67: hsl(var(--yellow-new-67-hsl) / 1);
  --yellow-new-67-hsl: 36.25 calc(var(--saturation-factor, 1) * 85.714%) 21.961%;
  --yellow-new-68: hsl(var(--yellow-new-68-hsl) / 1);
  --yellow-new-68-hsl: 36.129 calc(var(--saturation-factor, 1) * 85.321%) 21.373%;
  --yellow-new-69: hsl(var(--yellow-new-69-hsl) / 1);
  --yellow-new-69-hsl: 36 calc(var(--saturation-factor, 1) * 84.906%) 20.784%;
  --yellow-new-70: hsl(var(--yellow-new-70-hsl) / 1);
  --yellow-new-70-hsl: 35.862 calc(var(--saturation-factor, 1) * 84.466%) 20.196%;
  --yellow-new-71: hsl(var(--yellow-new-71-hsl) / 1);
  --yellow-new-71-hsl: 35.714 calc(var(--saturation-factor, 1) * 84%) 19.608%;
  --yellow-new-72: hsl(var(--yellow-new-72-hsl) / 1);
  --yellow-new-72-hsl: 35.556 calc(var(--saturation-factor, 1) * 83.505%) 19.02%;
  --yellow-new-73: hsl(var(--yellow-new-73-hsl) / 1);
  --yellow-new-73-hsl: 35.844 calc(var(--saturation-factor, 1) * 82.796%) 18.235%;
  --yellow-new-74: hsl(var(--yellow-new-74-hsl) / 1);
  --yellow-new-74-hsl: 35.676 calc(var(--saturation-factor, 1) * 82.222%) 17.647%;
  --yellow-new-75: hsl(var(--yellow-new-75-hsl) / 1);
  --yellow-new-75-hsl: 36.338 calc(var(--saturation-factor, 1) * 81.609%) 17.059%;
  --yellow-new-76: hsl(var(--yellow-new-76-hsl) / 1);
  --yellow-new-76-hsl: 35.652 calc(var(--saturation-factor, 1) * 81.176%) 16.667%;
  --yellow-new-77: hsl(var(--yellow-new-77-hsl) / 1);
  --yellow-new-77-hsl: 35.455 calc(var(--saturation-factor, 1) * 80.488%) 16.078%;
  --yellow-new-78: hsl(var(--yellow-new-78-hsl) / 1);
  --yellow-new-78-hsl: 35.625 calc(var(--saturation-factor, 1) * 82.051%) 15.294%;
  --yellow-new-79: hsl(var(--yellow-new-79-hsl) / 1);
  --yellow-new-79-hsl: 35.41 calc(var(--saturation-factor, 1) * 81.333%) 14.706%;
  --yellow-new-80: hsl(var(--yellow-new-80-hsl) / 1);
  --yellow-new-80-hsl: 35.172 calc(var(--saturation-factor, 1) * 80.556%) 14.118%;
  --yellow-new-81: hsl(var(--yellow-new-81-hsl) / 1);
  --yellow-new-81-hsl: 36 calc(var(--saturation-factor, 1) * 79.71%) 13.529%;
  --yellow-new-82: hsl(var(--yellow-new-82-hsl) / 1);
  --yellow-new-82-hsl: 36.226 calc(var(--saturation-factor, 1) * 81.538%) 12.745%;
  --yellow-new-83: hsl(var(--yellow-new-83-hsl) / 1);
  --yellow-new-83-hsl: 36 calc(var(--saturation-factor, 1) * 80.645%) 12.157%;
  --yellow-new-84: hsl(var(--yellow-new-84-hsl) / 1);
  --yellow-new-84-hsl: 35 calc(var(--saturation-factor, 1) * 80%) 11.765%;
  --yellow-new-85: hsl(var(--yellow-new-85-hsl) / 1);
  --yellow-new-85-hsl: 34.667 calc(var(--saturation-factor, 1) * 78.947%) 11.176%;
  --yellow-new-86: hsl(var(--yellow-new-86-hsl) / 1);
  --yellow-new-86-hsl: 36.279 calc(var(--saturation-factor, 1) * 81.132%) 10.392%;
  --yellow-new-87: hsl(var(--yellow-new-87-hsl) / 1);
  --yellow-new-87-hsl: 35.122 calc(var(--saturation-factor, 1) * 80.392%) 10%;
  --yellow-new-88: hsl(var(--yellow-new-88-hsl) / 1);
  --yellow-new-88-hsl: 34.737 calc(var(--saturation-factor, 1) * 79.167%) 9.412%;
  --yellow-new-89: hsl(var(--yellow-new-89-hsl) / 1);
  --yellow-new-89-hsl: 35 calc(var(--saturation-factor, 1) * 81.818%) 8.627%;
  --yellow-new-90: hsl(var(--yellow-new-90-hsl) / 1);
  --yellow-new-90-hsl: 35.294 calc(var(--saturation-factor, 1) * 80.952%) 8.235%;
  --yellow-new-91: hsl(var(--yellow-new-91-hsl) / 1);
  --yellow-new-91-hsl: 34.839 calc(var(--saturation-factor, 1) * 79.487%) 7.647%;
  --yellow-new-92: hsl(var(--yellow-new-92-hsl) / 1);
  --yellow-new-92-hsl: 33.103 calc(var(--saturation-factor, 1) * 78.378%) 7.255%;
  --yellow-new-93: hsl(var(--yellow-new-93-hsl) / 1);
  --yellow-new-93-hsl: 33.333 calc(var(--saturation-factor, 1) * 81.818%) 6.471%;
  --yellow-new-94: hsl(var(--yellow-new-94-hsl) / 1);
  --yellow-new-94-hsl: 35 calc(var(--saturation-factor, 1) * 80%) 5.882%;
  --yellow-new-95: hsl(var(--yellow-new-95-hsl) / 1);
  --yellow-new-95-hsl: 31.429 calc(var(--saturation-factor, 1) * 77.778%) 5.294%;
  --yellow-new-96: hsl(var(--yellow-new-96-hsl) / 1);
  --yellow-new-96-hsl: 31.579 calc(var(--saturation-factor, 1) * 82.609%) 4.51%;
  --yellow-new-97: hsl(var(--yellow-new-97-hsl) / 1);
  --yellow-new-97-hsl: 30 calc(var(--saturation-factor, 1) * 77.778%) 3.529%;
  --yellow-new-98: hsl(var(--yellow-new-98-hsl) / 1);
  --yellow-new-98-hsl: 27.273 calc(var(--saturation-factor, 1) * 84.615%) 2.549%;
  --yellow-new-99: hsl(var(--yellow-new-99-hsl) / 1);
  --yellow-new-99-hsl: 24 calc(var(--saturation-factor, 1) * 71.429%) 1.373%;
  --yellow-new-100: hsl(var(--yellow-new-100-hsl) / 1);
  --yellow-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --orange-new-1: hsl(var(--orange-new-1-hsl) / 1);
  --orange-new-1-hsl: 13.714 calc(var(--saturation-factor, 1) * 100%) 93.137%;
  --orange-new-2: hsl(var(--orange-new-2-hsl) / 1);
  --orange-new-2-hsl: 15.385 calc(var(--saturation-factor, 1) * 95.122%) 91.961%;
  --orange-new-3: hsl(var(--orange-new-3-hsl) / 1);
  --orange-new-3-hsl: 17.333 calc(var(--saturation-factor, 1) * 95.745%) 90.784%;
  --orange-new-4: hsl(var(--orange-new-4-hsl) / 1);
  --orange-new-4-hsl: 17.143 calc(var(--saturation-factor, 1) * 92.453%) 89.608%;
  --orange-new-5: hsl(var(--orange-new-5-hsl) / 1);
  --orange-new-5-hsl: 17.778 calc(var(--saturation-factor, 1) * 93.103%) 88.627%;
  --orange-new-6: hsl(var(--orange-new-6-hsl) / 1);
  --orange-new-6-hsl: 18.621 calc(var(--saturation-factor, 1) * 90.625%) 87.451%;
  --orange-new-7: hsl(var(--orange-new-7-hsl) / 1);
  --orange-new-7-hsl: 19.355 calc(var(--saturation-factor, 1) * 88.571%) 86.275%;
  --orange-new-8: hsl(var(--orange-new-8-hsl) / 1);
  --orange-new-8-hsl: 19.701 calc(var(--saturation-factor, 1) * 89.333%) 85.294%;
  --orange-new-9: hsl(var(--orange-new-9-hsl) / 1);
  --orange-new-9-hsl: 19.437 calc(var(--saturation-factor, 1) * 87.654%) 84.118%;
  --orange-new-10: hsl(var(--orange-new-10-hsl) / 1);
  --orange-new-10-hsl: 20 calc(var(--saturation-factor, 1) * 86.207%) 82.941%;
  --orange-new-11: hsl(var(--orange-new-11-hsl) / 1);
  --orange-new-11-hsl: 20 calc(var(--saturation-factor, 1) * 84.783%) 81.961%;
  --orange-new-12: hsl(var(--orange-new-12-hsl) / 1);
  --orange-new-12-hsl: 20.488 calc(var(--saturation-factor, 1) * 83.673%) 80.784%;
  --orange-new-13: hsl(var(--orange-new-13-hsl) / 1);
  --orange-new-13-hsl: 20.93 calc(var(--saturation-factor, 1) * 82.692%) 79.608%;
  --orange-new-14: hsl(var(--orange-new-14-hsl) / 1);
  --orange-new-14-hsl: 20.899 calc(var(--saturation-factor, 1) * 81.651%) 78.627%;
  --orange-new-15: hsl(var(--orange-new-15-hsl) / 1);
  --orange-new-15-hsl: 20.645 calc(var(--saturation-factor, 1) * 80.87%) 77.451%;
  --orange-new-16: hsl(var(--orange-new-16-hsl) / 1);
  --orange-new-16-hsl: 21.031 calc(var(--saturation-factor, 1) * 80.165%) 76.275%;
  --orange-new-17: hsl(var(--orange-new-17-hsl) / 1);
  --orange-new-17-hsl: 21 calc(var(--saturation-factor, 1) * 79.365%) 75.294%;
  --orange-new-18: hsl(var(--orange-new-18-hsl) / 1);
  --orange-new-18-hsl: 21.346 calc(var(--saturation-factor, 1) * 78.788%) 74.118%;
  --orange-new-19: hsl(var(--orange-new-19-hsl) / 1);
  --orange-new-19-hsl: 21.509 calc(var(--saturation-factor, 1) * 76.812%) 72.941%;
  --orange-new-20: hsl(var(--orange-new-20-hsl) / 1);
  --orange-new-20-hsl: 21.468 calc(var(--saturation-factor, 1) * 76.224%) 71.961%;
  --orange-new-21: hsl(var(--orange-new-21-hsl) / 1);
  --orange-new-21-hsl: 21.77 calc(var(--saturation-factor, 1) * 75.839%) 70.784%;
  --orange-new-22: hsl(var(--orange-new-22-hsl) / 1);
  --orange-new-22-hsl: 21.724 calc(var(--saturation-factor, 1) * 75.325%) 69.804%;
  --orange-new-23: hsl(var(--orange-new-23-hsl) / 1);
  --orange-new-23-hsl: 21.356 calc(var(--saturation-factor, 1) * 73.75%) 68.627%;
  --orange-new-24: hsl(var(--orange-new-24-hsl) / 1);
  --orange-new-24-hsl: 21.639 calc(var(--saturation-factor, 1) * 73.494%) 67.451%;
  --orange-new-25: hsl(var(--orange-new-25-hsl) / 1);
  --orange-new-25-hsl: 21.6 calc(var(--saturation-factor, 1) * 73.099%) 66.471%;
  --orange-new-26: hsl(var(--orange-new-26-hsl) / 1);
  --orange-new-26-hsl: 21.732 calc(var(--saturation-factor, 1) * 71.751%) 65.294%;
  --orange-new-27: hsl(var(--orange-new-27-hsl) / 1);
  --orange-new-27-hsl: 21.692 calc(var(--saturation-factor, 1) * 71.429%) 64.314%;
  --orange-new-28: hsl(var(--orange-new-28-hsl) / 1);
  --orange-new-28-hsl: 21.818 calc(var(--saturation-factor, 1) * 70.213%) 63.137%;
  --orange-new-29: hsl(var(--orange-new-29-hsl) / 1);
  --orange-new-29-hsl: 21.778 calc(var(--saturation-factor, 1) * 69.948%) 62.157%;
  --orange-new-30: hsl(var(--orange-new-30-hsl) / 1);
  --orange-new-30-hsl: 21.898 calc(var(--saturation-factor, 1) * 68.844%) 60.98%;
  --orange-new-31: hsl(var(--orange-new-31-hsl) / 1);
  --orange-new-31-hsl: 22.014 calc(var(--saturation-factor, 1) * 67.805%) 59.804%;
  --orange-new-32: hsl(var(--orange-new-32-hsl) / 1);
  --orange-new-32-hsl: 21.972 calc(var(--saturation-factor, 1) * 67.619%) 58.824%;
  --orange-new-33: hsl(var(--orange-new-33-hsl) / 1);
  --orange-new-33-hsl: 22.083 calc(var(--saturation-factor, 1) * 66.667%) 57.647%;
  --orange-new-34: hsl(var(--orange-new-34-hsl) / 1);
  --orange-new-34-hsl: 22.192 calc(var(--saturation-factor, 1) * 65.766%) 56.471%;
  --orange-new-35: hsl(var(--orange-new-35-hsl) / 1);
  --orange-new-35-hsl: 22.148 calc(var(--saturation-factor, 1) * 65.639%) 55.49%;
  --orange-new-36: hsl(var(--orange-new-36-hsl) / 1);
  --orange-new-36-hsl: 21.854 calc(var(--saturation-factor, 1) * 64.807%) 54.314%;
  --orange-new-37: hsl(var(--orange-new-37-hsl) / 1);
  --orange-new-37-hsl: 21.961 calc(var(--saturation-factor, 1) * 64.017%) 53.137%;
  --orange-new-38: hsl(var(--orange-new-38-hsl) / 1);
  --orange-new-38-hsl: 22.065 calc(var(--saturation-factor, 1) * 63.265%) 51.961%;
  --orange-new-39: hsl(var(--orange-new-39-hsl) / 1);
  --orange-new-39-hsl: 22.025 calc(var(--saturation-factor, 1) * 63.2%) 50.98%;
  --orange-new-40: hsl(var(--orange-new-40-hsl) / 1);
  --orange-new-40-hsl: 22.125 calc(var(--saturation-factor, 1) * 62.992%) 49.804%;
  --orange-new-41: hsl(var(--orange-new-41-hsl) / 1);
  --orange-new-41-hsl: 22.222 calc(var(--saturation-factor, 1) * 65.323%) 48.627%;
  --orange-new-42: hsl(var(--orange-new-42-hsl) / 1);
  --orange-new-42-hsl: 22.317 calc(var(--saturation-factor, 1) * 67.769%) 47.451%;
  --orange-new-43: hsl(var(--orange-new-43-hsl) / 1);
  --orange-new-43-hsl: 22.635 calc(var(--saturation-factor, 1) * 71.064%) 46.078%;
  --orange-new-44: hsl(var(--orange-new-44-hsl) / 1);
  --orange-new-44-hsl: 22.722 calc(var(--saturation-factor, 1) * 73.799%) 44.902%;
  --orange-new-45: hsl(var(--orange-new-45-hsl) / 1);
  --orange-new-45-hsl: 23.023 calc(var(--saturation-factor, 1) * 77.477%) 43.529%;
  --orange-new-46: hsl(var(--orange-new-46-hsl) / 1);
  --orange-new-46-hsl: 23.314 calc(var(--saturation-factor, 1) * 81.395%) 42.157%;
  --orange-new-47: hsl(var(--orange-new-47-hsl) / 1);
  --orange-new-47-hsl: 23.799 calc(var(--saturation-factor, 1) * 86.473%) 40.588%;
  --orange-new-48: hsl(var(--orange-new-48-hsl) / 1);
  --orange-new-48-hsl: 24.457 calc(var(--saturation-factor, 1) * 92.929%) 38.824%;
  --orange-new-49: hsl(var(--orange-new-49-hsl) / 1);
  --orange-new-49-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --orange-new-50: hsl(var(--orange-new-50-hsl) / 1);
  --orange-new-50-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --orange-new-51: hsl(var(--orange-new-51-hsl) / 1);
  --orange-new-51-hsl: 25.109 calc(var(--saturation-factor, 1) * 98.925%) 36.471%;
  --orange-new-52: hsl(var(--orange-new-52-hsl) / 1);
  --orange-new-52-hsl: 24.804 calc(var(--saturation-factor, 1) * 97.814%) 35.882%;
  --orange-new-53: hsl(var(--orange-new-53-hsl) / 1);
  --orange-new-53-hsl: 24.828 calc(var(--saturation-factor, 1) * 96.667%) 35.294%;
  --orange-new-54: hsl(var(--orange-new-54-hsl) / 1);
  --orange-new-54-hsl: 24.706 calc(var(--saturation-factor, 1) * 96.591%) 34.51%;
  --orange-new-55: hsl(var(--orange-new-55-hsl) / 1);
  --orange-new-55-hsl: 24.727 calc(var(--saturation-factor, 1) * 95.376%) 33.922%;
  --orange-new-56: hsl(var(--orange-new-56-hsl) / 1);
  --orange-new-56-hsl: 24.596 calc(var(--saturation-factor, 1) * 95.266%) 33.137%;
  --orange-new-57: hsl(var(--orange-new-57-hsl) / 1);
  --orange-new-57-hsl: 24.615 calc(var(--saturation-factor, 1) * 93.976%) 32.549%;
  --orange-new-58: hsl(var(--orange-new-58-hsl) / 1);
  --orange-new-58-hsl: 24.238 calc(var(--saturation-factor, 1) * 92.638%) 31.961%;
  --orange-new-59: hsl(var(--orange-new-59-hsl) / 1);
  --orange-new-59-hsl: 24.49 calc(var(--saturation-factor, 1) * 92.453%) 31.176%;
  --orange-new-60: hsl(var(--orange-new-60-hsl) / 1);
  --orange-new-60-hsl: 24.336 calc(var(--saturation-factor, 1) * 92.258%) 30.392%;
  --orange-new-61: hsl(var(--orange-new-61-hsl) / 1);
  --orange-new-61-hsl: 24.348 calc(var(--saturation-factor, 1) * 90.789%) 29.804%;
  --orange-new-62: hsl(var(--orange-new-62-hsl) / 1);
  --orange-new-62-hsl: 24.179 calc(var(--saturation-factor, 1) * 90.541%) 29.02%;
  --orange-new-63: hsl(var(--orange-new-63-hsl) / 1);
  --orange-new-63-hsl: 24.462 calc(var(--saturation-factor, 1) * 90.278%) 28.235%;
  --orange-new-64: hsl(var(--orange-new-64-hsl) / 1);
  --orange-new-64-hsl: 24.286 calc(var(--saturation-factor, 1) * 90%) 27.451%;
  --orange-new-65: hsl(var(--orange-new-65-hsl) / 1);
  --orange-new-65-hsl: 24.098 calc(var(--saturation-factor, 1) * 88.406%) 27.059%;
  --orange-new-66: hsl(var(--orange-new-66-hsl) / 1);
  --orange-new-66-hsl: 23.898 calc(var(--saturation-factor, 1) * 88.06%) 26.275%;
  --orange-new-67: hsl(var(--orange-new-67-hsl) / 1);
  --orange-new-67-hsl: 24.211 calc(var(--saturation-factor, 1) * 87.692%) 25.49%;
  --orange-new-68: hsl(var(--orange-new-68-hsl) / 1);
  --orange-new-68-hsl: 24 calc(var(--saturation-factor, 1) * 87.302%) 24.706%;
  --orange-new-69: hsl(var(--orange-new-69-hsl) / 1);
  --orange-new-69-hsl: 24.112 calc(var(--saturation-factor, 1) * 86.992%) 24.118%;
  --orange-new-70: hsl(var(--orange-new-70-hsl) / 1);
  --orange-new-70-hsl: 23.883 calc(var(--saturation-factor, 1) * 86.555%) 23.333%;
  --orange-new-71: hsl(var(--orange-new-71-hsl) / 1);
  --orange-new-71-hsl: 24 calc(var(--saturation-factor, 1) * 86.207%) 22.745%;
  --orange-new-72: hsl(var(--orange-new-72-hsl) / 1);
  --orange-new-72-hsl: 23.75 calc(var(--saturation-factor, 1) * 85.714%) 21.961%;
  --orange-new-73: hsl(var(--orange-new-73-hsl) / 1);
  --orange-new-73-hsl: 24.13 calc(var(--saturation-factor, 1) * 85.185%) 21.176%;
  --orange-new-74: hsl(var(--orange-new-74-hsl) / 1);
  --orange-new-74-hsl: 23.596 calc(var(--saturation-factor, 1) * 84.762%) 20.588%;
  --orange-new-75: hsl(var(--orange-new-75-hsl) / 1);
  --orange-new-75-hsl: 24.419 calc(var(--saturation-factor, 1) * 86%) 19.608%;
  --orange-new-76: hsl(var(--orange-new-76-hsl) / 1);
  --orange-new-76-hsl: 23.855 calc(var(--saturation-factor, 1) * 85.567%) 19.02%;
  --orange-new-77: hsl(var(--orange-new-77-hsl) / 1);
  --orange-new-77-hsl: 24.304 calc(var(--saturation-factor, 1) * 84.946%) 18.235%;
  --orange-new-78: hsl(var(--orange-new-78-hsl) / 1);
  --orange-new-78-hsl: 23.684 calc(var(--saturation-factor, 1) * 84.444%) 17.647%;
  --orange-new-79: hsl(var(--orange-new-79-hsl) / 1);
  --orange-new-79-hsl: 23.836 calc(var(--saturation-factor, 1) * 83.908%) 17.059%;
  --orange-new-80: hsl(var(--orange-new-80-hsl) / 1);
  --orange-new-80-hsl: 23.478 calc(var(--saturation-factor, 1) * 83.133%) 16.275%;
  --orange-new-81: hsl(var(--orange-new-81-hsl) / 1);
  --orange-new-81-hsl: 24.179 calc(var(--saturation-factor, 1) * 84.81%) 15.49%;
  --orange-new-82: hsl(var(--orange-new-82-hsl) / 1);
  --orange-new-82-hsl: 23.438 calc(var(--saturation-factor, 1) * 84.211%) 14.902%;
  --orange-new-83: hsl(var(--orange-new-83-hsl) / 1);
  --orange-new-83-hsl: 23.607 calc(var(--saturation-factor, 1) * 83.562%) 14.314%;
  --orange-new-84: hsl(var(--orange-new-84-hsl) / 1);
  --orange-new-84-hsl: 23.158 calc(var(--saturation-factor, 1) * 82.609%) 13.529%;
  --orange-new-85: hsl(var(--orange-new-85-hsl) / 1);
  --orange-new-85-hsl: 24 calc(var(--saturation-factor, 1) * 84.615%) 12.745%;
  --orange-new-86: hsl(var(--orange-new-86-hsl) / 1);
  --orange-new-86-hsl: 24.231 calc(var(--saturation-factor, 1) * 83.871%) 12.157%;
  --orange-new-87: hsl(var(--orange-new-87-hsl) / 1);
  --orange-new-87-hsl: 23.265 calc(var(--saturation-factor, 1) * 83.051%) 11.569%;
  --orange-new-88: hsl(var(--orange-new-88-hsl) / 1);
  --orange-new-88-hsl: 24.255 calc(var(--saturation-factor, 1) * 85.455%) 10.784%;
  --orange-new-89: hsl(var(--orange-new-89-hsl) / 1);
  --orange-new-89-hsl: 23.182 calc(var(--saturation-factor, 1) * 84.615%) 10.196%;
  --orange-new-90: hsl(var(--orange-new-90-hsl) / 1);
  --orange-new-90-hsl: 23.415 calc(var(--saturation-factor, 1) * 83.673%) 9.608%;
  --orange-new-91: hsl(var(--orange-new-91-hsl) / 1);
  --orange-new-91-hsl: 22.105 calc(var(--saturation-factor, 1) * 82.609%) 9.02%;
  --orange-new-92: hsl(var(--orange-new-92-hsl) / 1);
  --orange-new-92-hsl: 23.333 calc(var(--saturation-factor, 1) * 85.714%) 8.235%;
  --orange-new-93: hsl(var(--orange-new-93-hsl) / 1);
  --orange-new-93-hsl: 21.818 calc(var(--saturation-factor, 1) * 84.615%) 7.647%;
  --orange-new-94: hsl(var(--orange-new-94-hsl) / 1);
  --orange-new-94-hsl: 20 calc(var(--saturation-factor, 1) * 83.333%) 7.059%;
  --orange-new-95: hsl(var(--orange-new-95-hsl) / 1);
  --orange-new-95-hsl: 22.222 calc(var(--saturation-factor, 1) * 87.097%) 6.078%;
  --orange-new-96: hsl(var(--orange-new-96-hsl) / 1);
  --orange-new-96-hsl: 18.261 calc(var(--saturation-factor, 1) * 85.185%) 5.294%;
  --orange-new-97: hsl(var(--orange-new-97-hsl) / 1);
  --orange-new-97-hsl: 16.667 calc(var(--saturation-factor, 1) * 81.818%) 4.314%;
  --orange-new-98: hsl(var(--orange-new-98-hsl) / 1);
  --orange-new-98-hsl: 17.143 calc(var(--saturation-factor, 1) * 87.5%) 3.137%;
  --orange-new-99: hsl(var(--orange-new-99-hsl) / 1);
  --orange-new-99-hsl: 20 calc(var(--saturation-factor, 1) * 75%) 1.569%;
  --orange-new-100: hsl(var(--orange-new-100-hsl) / 1);
  --orange-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-1: hsl(var(--opacity-1-hsl) / 0.011764705882352941);
  --opacity-1-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-4: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
  --opacity-4-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-8: hsl(var(--opacity-8-hsl) / 0.0784313725490196);
  --opacity-8-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-12: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
  --opacity-12-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-16: hsl(var(--opacity-16-hsl) / 0.1607843137254902);
  --opacity-16-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-20: hsl(var(--opacity-20-hsl) / 0.2);
  --opacity-20-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-24: hsl(var(--opacity-24-hsl) / 0.23921568627450981);
  --opacity-24-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-28: hsl(var(--opacity-28-hsl) / 0.2784313725490196);
  --opacity-28-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-32: hsl(var(--opacity-32-hsl) / 0.3215686274509804);
  --opacity-32-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-36: hsl(var(--opacity-36-hsl) / 0.3607843137254902);
  --opacity-36-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-40: hsl(var(--opacity-40-hsl) / 0.4);
  --opacity-40-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-44: hsl(var(--opacity-44-hsl) / 0.4392156862745098);
  --opacity-44-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-48: hsl(var(--opacity-48-hsl) / 0.47843137254901963);
  --opacity-48-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-52: hsl(var(--opacity-52-hsl) / 0.5215686274509804);
  --opacity-52-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-56: hsl(var(--opacity-56-hsl) / 0.5607843137254902);
  --opacity-56-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-60: hsl(var(--opacity-60-hsl) / 0.6);
  --opacity-60-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-64: hsl(var(--opacity-64-hsl) / 0.6392156862745098);
  --opacity-64-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-68: hsl(var(--opacity-68-hsl) / 0.6784313725490196);
  --opacity-68-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-72: hsl(var(--opacity-72-hsl) / 0.7215686274509804);
  --opacity-72-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-76: hsl(var(--opacity-76-hsl) / 0.7607843137254902);
  --opacity-76-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-80: hsl(var(--opacity-80-hsl) / 0.8);
  --opacity-80-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-84: hsl(var(--opacity-84-hsl) / 0.8392156862745098);
  --opacity-84-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-88: hsl(var(--opacity-88-hsl) / 0.8784313725490196);
  --opacity-88-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-92: hsl(var(--opacity-92-hsl) / 0.9215686274509803);
  --opacity-92-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-96: hsl(var(--opacity-96-hsl) / 0.9607843137254902);
  --opacity-96-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
  --opacity-blue-1: hsl(var(--opacity-blue-1-hsl) / 0.011764705882352941);
  --opacity-blue-1-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-4: hsl(var(--opacity-blue-4-hsl) / 0.0392156862745098);
  --opacity-blue-4-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-8: hsl(var(--opacity-blue-8-hsl) / 0.0784313725490196);
  --opacity-blue-8-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-12: hsl(var(--opacity-blue-12-hsl) / 0.12156862745098039);
  --opacity-blue-12-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-16: hsl(var(--opacity-blue-16-hsl) / 0.1607843137254902);
  --opacity-blue-16-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-20: hsl(var(--opacity-blue-20-hsl) / 0.2);
  --opacity-blue-20-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-24: hsl(var(--opacity-blue-24-hsl) / 0.23921568627450981);
  --opacity-blue-24-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-28: hsl(var(--opacity-blue-28-hsl) / 0.2784313725490196);
  --opacity-blue-28-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-32: hsl(var(--opacity-blue-32-hsl) / 0.3215686274509804);
  --opacity-blue-32-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-36: hsl(var(--opacity-blue-36-hsl) / 0.3607843137254902);
  --opacity-blue-36-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-40: hsl(var(--opacity-blue-40-hsl) / 0.4);
  --opacity-blue-40-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-44: hsl(var(--opacity-blue-44-hsl) / 0.4392156862745098);
  --opacity-blue-44-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-48: hsl(var(--opacity-blue-48-hsl) / 0.47843137254901963);
  --opacity-blue-48-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-52: hsl(var(--opacity-blue-52-hsl) / 0.5215686274509804);
  --opacity-blue-52-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-56: hsl(var(--opacity-blue-56-hsl) / 0.5607843137254902);
  --opacity-blue-56-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-60: hsl(var(--opacity-blue-60-hsl) / 0.6);
  --opacity-blue-60-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-64: hsl(var(--opacity-blue-64-hsl) / 0.6392156862745098);
  --opacity-blue-64-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-68: hsl(var(--opacity-blue-68-hsl) / 0.6784313725490196);
  --opacity-blue-68-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-72: hsl(var(--opacity-blue-72-hsl) / 0.7215686274509804);
  --opacity-blue-72-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-76: hsl(var(--opacity-blue-76-hsl) / 0.7607843137254902);
  --opacity-blue-76-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-80: hsl(var(--opacity-blue-80-hsl) / 0.8);
  --opacity-blue-80-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-84: hsl(var(--opacity-blue-84-hsl) / 0.8392156862745098);
  --opacity-blue-84-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-88: hsl(var(--opacity-blue-88-hsl) / 0.8784313725490196);
  --opacity-blue-88-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-92: hsl(var(--opacity-blue-92-hsl) / 0.9215686274509803);
  --opacity-blue-92-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blue-96: hsl(var(--opacity-blue-96-hsl) / 0.9607843137254902);
  --opacity-blue-96-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
  --opacity-blurple-1: hsl(var(--opacity-blurple-1-hsl) / 0.011764705882352941);
  --opacity-blurple-1-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-4: hsl(var(--opacity-blurple-4-hsl) / 0.0392156862745098);
  --opacity-blurple-4-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-8: hsl(var(--opacity-blurple-8-hsl) / 0.0784313725490196);
  --opacity-blurple-8-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-12: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);
  --opacity-blurple-12-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-16: hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902);
  --opacity-blurple-16-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-20: hsl(var(--opacity-blurple-20-hsl) / 0.2);
  --opacity-blurple-20-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-24: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);
  --opacity-blurple-24-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-28: hsl(var(--opacity-blurple-28-hsl) / 0.2784313725490196);
  --opacity-blurple-28-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-32: hsl(var(--opacity-blurple-32-hsl) / 0.3215686274509804);
  --opacity-blurple-32-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-36: hsl(var(--opacity-blurple-36-hsl) / 0.3607843137254902);
  --opacity-blurple-36-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-40: hsl(var(--opacity-blurple-40-hsl) / 0.4);
  --opacity-blurple-40-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-44: hsl(var(--opacity-blurple-44-hsl) / 0.4392156862745098);
  --opacity-blurple-44-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-48: hsl(var(--opacity-blurple-48-hsl) / 0.47843137254901963);
  --opacity-blurple-48-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-52: hsl(var(--opacity-blurple-52-hsl) / 0.5215686274509804);
  --opacity-blurple-52-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-56: hsl(var(--opacity-blurple-56-hsl) / 0.5607843137254902);
  --opacity-blurple-56-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-60: hsl(var(--opacity-blurple-60-hsl) / 0.6);
  --opacity-blurple-60-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-64: hsl(var(--opacity-blurple-64-hsl) / 0.6392156862745098);
  --opacity-blurple-64-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-68: hsl(var(--opacity-blurple-68-hsl) / 0.6784313725490196);
  --opacity-blurple-68-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-72: hsl(var(--opacity-blurple-72-hsl) / 0.7215686274509804);
  --opacity-blurple-72-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-76: hsl(var(--opacity-blurple-76-hsl) / 0.7607843137254902);
  --opacity-blurple-76-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-80: hsl(var(--opacity-blurple-80-hsl) / 0.8);
  --opacity-blurple-80-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-84: hsl(var(--opacity-blurple-84-hsl) / 0.8392156862745098);
  --opacity-blurple-84-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-88: hsl(var(--opacity-blurple-88-hsl) / 0.8784313725490196);
  --opacity-blurple-88-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-92: hsl(var(--opacity-blurple-92-hsl) / 0.9215686274509803);
  --opacity-blurple-92-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-blurple-96: hsl(var(--opacity-blurple-96-hsl) / 0.9607843137254902);
  --opacity-blurple-96-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --opacity-green-1: hsl(var(--opacity-green-1-hsl) / 0.011764705882352941);
  --opacity-green-1-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-4: hsl(var(--opacity-green-4-hsl) / 0.0392156862745098);
  --opacity-green-4-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-8: hsl(var(--opacity-green-8-hsl) / 0.0784313725490196);
  --opacity-green-8-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-12: hsl(var(--opacity-green-12-hsl) / 0.12156862745098039);
  --opacity-green-12-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-16: hsl(var(--opacity-green-16-hsl) / 0.1607843137254902);
  --opacity-green-16-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-20: hsl(var(--opacity-green-20-hsl) / 0.2);
  --opacity-green-20-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-24: hsl(var(--opacity-green-24-hsl) / 0.23921568627450981);
  --opacity-green-24-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-28: hsl(var(--opacity-green-28-hsl) / 0.2784313725490196);
  --opacity-green-28-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-32: hsl(var(--opacity-green-32-hsl) / 0.3215686274509804);
  --opacity-green-32-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-36: hsl(var(--opacity-green-36-hsl) / 0.3607843137254902);
  --opacity-green-36-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-40: hsl(var(--opacity-green-40-hsl) / 0.4);
  --opacity-green-40-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-44: hsl(var(--opacity-green-44-hsl) / 0.4392156862745098);
  --opacity-green-44-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-48: hsl(var(--opacity-green-48-hsl) / 0.47843137254901963);
  --opacity-green-48-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-52: hsl(var(--opacity-green-52-hsl) / 0.5215686274509804);
  --opacity-green-52-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-56: hsl(var(--opacity-green-56-hsl) / 0.5607843137254902);
  --opacity-green-56-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-60: hsl(var(--opacity-green-60-hsl) / 0.6);
  --opacity-green-60-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-64: hsl(var(--opacity-green-64-hsl) / 0.6392156862745098);
  --opacity-green-64-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-68: hsl(var(--opacity-green-68-hsl) / 0.6784313725490196);
  --opacity-green-68-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-72: hsl(var(--opacity-green-72-hsl) / 0.7215686274509804);
  --opacity-green-72-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-76: hsl(var(--opacity-green-76-hsl) / 0.7607843137254902);
  --opacity-green-76-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-80: hsl(var(--opacity-green-80-hsl) / 0.8);
  --opacity-green-80-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-84: hsl(var(--opacity-green-84-hsl) / 0.8392156862745098);
  --opacity-green-84-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-88: hsl(var(--opacity-green-88-hsl) / 0.8784313725490196);
  --opacity-green-88-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-92: hsl(var(--opacity-green-92-hsl) / 0.9215686274509803);
  --opacity-green-92-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-green-96: hsl(var(--opacity-green-96-hsl) / 0.9607843137254902);
  --opacity-green-96-hsl: 145.97 calc(var(--saturation-factor, 1) * 100%) 26.275%;
  --opacity-red-1: hsl(var(--opacity-red-1-hsl) / 0.011764705882352941);
  --opacity-red-1-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-4: hsl(var(--opacity-red-4-hsl) / 0.0392156862745098);
  --opacity-red-4-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-8: hsl(var(--opacity-red-8-hsl) / 0.0784313725490196);
  --opacity-red-8-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-12: hsl(var(--opacity-red-12-hsl) / 0.12156862745098039);
  --opacity-red-12-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-16: hsl(var(--opacity-red-16-hsl) / 0.1607843137254902);
  --opacity-red-16-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-20: hsl(var(--opacity-red-20-hsl) / 0.2);
  --opacity-red-20-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-24: hsl(var(--opacity-red-24-hsl) / 0.23921568627450981);
  --opacity-red-24-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-28: hsl(var(--opacity-red-28-hsl) / 0.2784313725490196);
  --opacity-red-28-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-32: hsl(var(--opacity-red-32-hsl) / 0.3215686274509804);
  --opacity-red-32-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-36: hsl(var(--opacity-red-36-hsl) / 0.3607843137254902);
  --opacity-red-36-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-40: hsl(var(--opacity-red-40-hsl) / 0.4);
  --opacity-red-40-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-44: hsl(var(--opacity-red-44-hsl) / 0.4392156862745098);
  --opacity-red-44-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-48: hsl(var(--opacity-red-48-hsl) / 0.47843137254901963);
  --opacity-red-48-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-52: hsl(var(--opacity-red-52-hsl) / 0.5215686274509804);
  --opacity-red-52-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-56: hsl(var(--opacity-red-56-hsl) / 0.5607843137254902);
  --opacity-red-56-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-60: hsl(var(--opacity-red-60-hsl) / 0.6);
  --opacity-red-60-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-64: hsl(var(--opacity-red-64-hsl) / 0.6392156862745098);
  --opacity-red-64-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-68: hsl(var(--opacity-red-68-hsl) / 0.6784313725490196);
  --opacity-red-68-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-72: hsl(var(--opacity-red-72-hsl) / 0.7215686274509804);
  --opacity-red-72-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-76: hsl(var(--opacity-red-76-hsl) / 0.7607843137254902);
  --opacity-red-76-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-80: hsl(var(--opacity-red-80-hsl) / 0.8);
  --opacity-red-80-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-84: hsl(var(--opacity-red-84-hsl) / 0.8392156862745098);
  --opacity-red-84-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-88: hsl(var(--opacity-red-88-hsl) / 0.8784313725490196);
  --opacity-red-88-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-92: hsl(var(--opacity-red-92-hsl) / 0.9215686274509803);
  --opacity-red-92-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-red-96: hsl(var(--opacity-red-96-hsl) / 0.9607843137254902);
  --opacity-red-96-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
  --opacity-teal-1: hsl(var(--opacity-teal-1-hsl) / 0.011764705882352941);
  --opacity-teal-1-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-4: hsl(var(--opacity-teal-4-hsl) / 0.0392156862745098);
  --opacity-teal-4-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-8: hsl(var(--opacity-teal-8-hsl) / 0.0784313725490196);
  --opacity-teal-8-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-12: hsl(var(--opacity-teal-12-hsl) / 0.12156862745098039);
  --opacity-teal-12-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-16: hsl(var(--opacity-teal-16-hsl) / 0.1607843137254902);
  --opacity-teal-16-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-20: hsl(var(--opacity-teal-20-hsl) / 0.2);
  --opacity-teal-20-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-24: hsl(var(--opacity-teal-24-hsl) / 0.23921568627450981);
  --opacity-teal-24-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-28: hsl(var(--opacity-teal-28-hsl) / 0.2784313725490196);
  --opacity-teal-28-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-32: hsl(var(--opacity-teal-32-hsl) / 0.3215686274509804);
  --opacity-teal-32-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-36: hsl(var(--opacity-teal-36-hsl) / 0.3607843137254902);
  --opacity-teal-36-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-40: hsl(var(--opacity-teal-40-hsl) / 0.4);
  --opacity-teal-40-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-44: hsl(var(--opacity-teal-44-hsl) / 0.4392156862745098);
  --opacity-teal-44-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-48: hsl(var(--opacity-teal-48-hsl) / 0.47843137254901963);
  --opacity-teal-48-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-52: hsl(var(--opacity-teal-52-hsl) / 0.5215686274509804);
  --opacity-teal-52-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-56: hsl(var(--opacity-teal-56-hsl) / 0.5607843137254902);
  --opacity-teal-56-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-60: hsl(var(--opacity-teal-60-hsl) / 0.6);
  --opacity-teal-60-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-64: hsl(var(--opacity-teal-64-hsl) / 0.6392156862745098);
  --opacity-teal-64-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-68: hsl(var(--opacity-teal-68-hsl) / 0.6784313725490196);
  --opacity-teal-68-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-72: hsl(var(--opacity-teal-72-hsl) / 0.7215686274509804);
  --opacity-teal-72-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-76: hsl(var(--opacity-teal-76-hsl) / 0.7607843137254902);
  --opacity-teal-76-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-80: hsl(var(--opacity-teal-80-hsl) / 0.8);
  --opacity-teal-80-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-84: hsl(var(--opacity-teal-84-hsl) / 0.8392156862745098);
  --opacity-teal-84-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-88: hsl(var(--opacity-teal-88-hsl) / 0.8784313725490196);
  --opacity-teal-88-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-92: hsl(var(--opacity-teal-92-hsl) / 0.9215686274509803);
  --opacity-teal-92-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-teal-96: hsl(var(--opacity-teal-96-hsl) / 0.9607843137254902);
  --opacity-teal-96-hsl: 183.913 calc(var(--saturation-factor, 1) * 100%) 27.059%;
  --opacity-yellow-1: hsl(var(--opacity-yellow-1-hsl) / 0.011764705882352941);
  --opacity-yellow-1-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-4: hsl(var(--opacity-yellow-4-hsl) / 0.0392156862745098);
  --opacity-yellow-4-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-8: hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196);
  --opacity-yellow-8-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-12: hsl(var(--opacity-yellow-12-hsl) / 0.12156862745098039);
  --opacity-yellow-12-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-16: hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902);
  --opacity-yellow-16-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-20: hsl(var(--opacity-yellow-20-hsl) / 0.2);
  --opacity-yellow-20-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-24: hsl(var(--opacity-yellow-24-hsl) / 0.23921568627450981);
  --opacity-yellow-24-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-28: hsl(var(--opacity-yellow-28-hsl) / 0.2784313725490196);
  --opacity-yellow-28-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-32: hsl(var(--opacity-yellow-32-hsl) / 0.3215686274509804);
  --opacity-yellow-32-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-36: hsl(var(--opacity-yellow-36-hsl) / 0.3607843137254902);
  --opacity-yellow-36-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-40: hsl(var(--opacity-yellow-40-hsl) / 0.4);
  --opacity-yellow-40-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-44: hsl(var(--opacity-yellow-44-hsl) / 0.4392156862745098);
  --opacity-yellow-44-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-48: hsl(var(--opacity-yellow-48-hsl) / 0.47843137254901963);
  --opacity-yellow-48-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-52: hsl(var(--opacity-yellow-52-hsl) / 0.5215686274509804);
  --opacity-yellow-52-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-56: hsl(var(--opacity-yellow-56-hsl) / 0.5607843137254902);
  --opacity-yellow-56-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-60: hsl(var(--opacity-yellow-60-hsl) / 0.6);
  --opacity-yellow-60-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-64: hsl(var(--opacity-yellow-64-hsl) / 0.6392156862745098);
  --opacity-yellow-64-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-68: hsl(var(--opacity-yellow-68-hsl) / 0.6784313725490196);
  --opacity-yellow-68-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-72: hsl(var(--opacity-yellow-72-hsl) / 0.7215686274509804);
  --opacity-yellow-72-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-76: hsl(var(--opacity-yellow-76-hsl) / 0.7607843137254902);
  --opacity-yellow-76-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-80: hsl(var(--opacity-yellow-80-hsl) / 0.8);
  --opacity-yellow-80-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-84: hsl(var(--opacity-yellow-84-hsl) / 0.8392156862745098);
  --opacity-yellow-84-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-88: hsl(var(--opacity-yellow-88-hsl) / 0.8784313725490196);
  --opacity-yellow-88-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-92: hsl(var(--opacity-yellow-92-hsl) / 0.9215686274509803);
  --opacity-yellow-92-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-yellow-96: hsl(var(--opacity-yellow-96-hsl) / 0.9607843137254902);
  --opacity-yellow-96-hsl: 36.894 calc(var(--saturation-factor, 1) * 100%) 31.569%;
  --opacity-orange-1: hsl(var(--opacity-orange-1-hsl) / 0.011764705882352941);
  --opacity-orange-1-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-4: hsl(var(--opacity-orange-4-hsl) / 0.0392156862745098);
  --opacity-orange-4-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-8: hsl(var(--opacity-orange-8-hsl) / 0.0784313725490196);
  --opacity-orange-8-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-12: hsl(var(--opacity-orange-12-hsl) / 0.12156862745098039);
  --opacity-orange-12-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-16: hsl(var(--opacity-orange-16-hsl) / 0.1607843137254902);
  --opacity-orange-16-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-20: hsl(var(--opacity-orange-20-hsl) / 0.2);
  --opacity-orange-20-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-24: hsl(var(--opacity-orange-24-hsl) / 0.23921568627450981);
  --opacity-orange-24-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-28: hsl(var(--opacity-orange-28-hsl) / 0.2784313725490196);
  --opacity-orange-28-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-32: hsl(var(--opacity-orange-32-hsl) / 0.3215686274509804);
  --opacity-orange-32-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-36: hsl(var(--opacity-orange-36-hsl) / 0.3607843137254902);
  --opacity-orange-36-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-40: hsl(var(--opacity-orange-40-hsl) / 0.4);
  --opacity-orange-40-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-44: hsl(var(--opacity-orange-44-hsl) / 0.4392156862745098);
  --opacity-orange-44-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-48: hsl(var(--opacity-orange-48-hsl) / 0.47843137254901963);
  --opacity-orange-48-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-52: hsl(var(--opacity-orange-52-hsl) / 0.5215686274509804);
  --opacity-orange-52-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-56: hsl(var(--opacity-orange-56-hsl) / 0.5607843137254902);
  --opacity-orange-56-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-60: hsl(var(--opacity-orange-60-hsl) / 0.6);
  --opacity-orange-60-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-64: hsl(var(--opacity-orange-64-hsl) / 0.6392156862745098);
  --opacity-orange-64-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-68: hsl(var(--opacity-orange-68-hsl) / 0.6784313725490196);
  --opacity-orange-68-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-72: hsl(var(--opacity-orange-72-hsl) / 0.7215686274509804);
  --opacity-orange-72-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-76: hsl(var(--opacity-orange-76-hsl) / 0.7607843137254902);
  --opacity-orange-76-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-80: hsl(var(--opacity-orange-80-hsl) / 0.8);
  --opacity-orange-80-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-84: hsl(var(--opacity-orange-84-hsl) / 0.8392156862745098);
  --opacity-orange-84-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-88: hsl(var(--opacity-orange-88-hsl) / 0.8784313725490196);
  --opacity-orange-88-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-92: hsl(var(--opacity-orange-92-hsl) / 0.9215686274509803);
  --opacity-orange-92-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-orange-96: hsl(var(--opacity-orange-96-hsl) / 0.9607843137254902);
  --opacity-orange-96-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
  --opacity-white-1: hsl(var(--opacity-white-1-hsl) / 0.011764705882352941);
  --opacity-white-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-4: hsl(var(--opacity-white-4-hsl) / 0.0392156862745098);
  --opacity-white-4-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-8: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
  --opacity-white-8-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-12: hsl(var(--opacity-white-12-hsl) / 0.12156862745098039);
  --opacity-white-12-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-16: hsl(var(--opacity-white-16-hsl) / 0.1607843137254902);
  --opacity-white-16-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-20: hsl(var(--opacity-white-20-hsl) / 0.2);
  --opacity-white-20-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-24: hsl(var(--opacity-white-24-hsl) / 0.23921568627450981);
  --opacity-white-24-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-28: hsl(var(--opacity-white-28-hsl) / 0.2784313725490196);
  --opacity-white-28-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-32: hsl(var(--opacity-white-32-hsl) / 0.3215686274509804);
  --opacity-white-32-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-36: hsl(var(--opacity-white-36-hsl) / 0.3607843137254902);
  --opacity-white-36-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-40: hsl(var(--opacity-white-40-hsl) / 0.4);
  --opacity-white-40-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-44: hsl(var(--opacity-white-44-hsl) / 0.4392156862745098);
  --opacity-white-44-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-48: hsl(var(--opacity-white-48-hsl) / 0.47843137254901963);
  --opacity-white-48-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-52: hsl(var(--opacity-white-52-hsl) / 0.5215686274509804);
  --opacity-white-52-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-56: hsl(var(--opacity-white-56-hsl) / 0.5607843137254902);
  --opacity-white-56-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-60: hsl(var(--opacity-white-60-hsl) / 0.6);
  --opacity-white-60-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-64: hsl(var(--opacity-white-64-hsl) / 0.6392156862745098);
  --opacity-white-64-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-68: hsl(var(--opacity-white-68-hsl) / 0.6784313725490196);
  --opacity-white-68-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-72: hsl(var(--opacity-white-72-hsl) / 0.7215686274509804);
  --opacity-white-72-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-76: hsl(var(--opacity-white-76-hsl) / 0.7607843137254902);
  --opacity-white-76-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-80: hsl(var(--opacity-white-80-hsl) / 0.8);
  --opacity-white-80-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-84: hsl(var(--opacity-white-84-hsl) / 0.8392156862745098);
  --opacity-white-84-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-88: hsl(var(--opacity-white-88-hsl) / 0.8784313725490196);
  --opacity-white-88-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-92: hsl(var(--opacity-white-92-hsl) / 0.9215686274509803);
  --opacity-white-92-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-white-96: hsl(var(--opacity-white-96-hsl) / 0.9607843137254902);
  --opacity-white-96-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --opacity-black-1: hsl(var(--opacity-black-1-hsl) / 0.011764705882352941);
  --opacity-black-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-4: hsl(var(--opacity-black-4-hsl) / 0.0392156862745098);
  --opacity-black-4-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-8: hsl(var(--opacity-black-8-hsl) / 0.0784313725490196);
  --opacity-black-8-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-12: hsl(var(--opacity-black-12-hsl) / 0.12156862745098039);
  --opacity-black-12-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-16: hsl(var(--opacity-black-16-hsl) / 0.1607843137254902);
  --opacity-black-16-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-20: hsl(var(--opacity-black-20-hsl) / 0.2);
  --opacity-black-20-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-24: hsl(var(--opacity-black-24-hsl) / 0.23921568627450981);
  --opacity-black-24-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-28: hsl(var(--opacity-black-28-hsl) / 0.2784313725490196);
  --opacity-black-28-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-32: hsl(var(--opacity-black-32-hsl) / 0.3215686274509804);
  --opacity-black-32-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-36: hsl(var(--opacity-black-36-hsl) / 0.3607843137254902);
  --opacity-black-36-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-40: hsl(var(--opacity-black-40-hsl) / 0.4);
  --opacity-black-40-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-44: hsl(var(--opacity-black-44-hsl) / 0.4392156862745098);
  --opacity-black-44-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-48: hsl(var(--opacity-black-48-hsl) / 0.47843137254901963);
  --opacity-black-48-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-52: hsl(var(--opacity-black-52-hsl) / 0.5215686274509804);
  --opacity-black-52-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-56: hsl(var(--opacity-black-56-hsl) / 0.5607843137254902);
  --opacity-black-56-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-60: hsl(var(--opacity-black-60-hsl) / 0.6);
  --opacity-black-60-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-64: hsl(var(--opacity-black-64-hsl) / 0.6392156862745098);
  --opacity-black-64-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-68: hsl(var(--opacity-black-68-hsl) / 0.6784313725490196);
  --opacity-black-68-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-72: hsl(var(--opacity-black-72-hsl) / 0.7215686274509804);
  --opacity-black-72-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-76: hsl(var(--opacity-black-76-hsl) / 0.7607843137254902);
  --opacity-black-76-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-80: hsl(var(--opacity-black-80-hsl) / 0.8);
  --opacity-black-80-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-84: hsl(var(--opacity-black-84-hsl) / 0.8392156862745098);
  --opacity-black-84-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-88: hsl(var(--opacity-black-88-hsl) / 0.8784313725490196);
  --opacity-black-88-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-92: hsl(var(--opacity-black-92-hsl) / 0.9215686274509803);
  --opacity-black-92-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --opacity-black-96: hsl(var(--opacity-black-96-hsl) / 0.9607843137254902);
  --opacity-black-96-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --red-100: hsl(var(--red-100-hsl) / 1);
  --red-100-hsl: 350 calc(var(--saturation-factor, 1) * 75%) 98.431%;
  --red-130: hsl(var(--red-130-hsl) / 1);
  --red-130-hsl: 0 calc(var(--saturation-factor, 1) * 83.333%) 97.647%;
  --red-160: hsl(var(--red-160-hsl) / 1);
  --red-160-hsl: 0 calc(var(--saturation-factor, 1) * 90.909%) 95.686%;
  --red-200: hsl(var(--red-200-hsl) / 1);
  --red-200-hsl: 358.125 calc(var(--saturation-factor, 1) * 88.889%) 92.941%;
  --red-230: hsl(var(--red-230-hsl) / 1);
  --red-230-hsl: 358.696 calc(var(--saturation-factor, 1) * 85.185%) 89.412%;
  --red-260: hsl(var(--red-260-hsl) / 1);
  --red-260-hsl: 359.077 calc(var(--saturation-factor, 1) * 89.041%) 85.686%;
  --red-300: hsl(var(--red-300-hsl) / 1);
  --red-300-hsl: 358.588 calc(var(--saturation-factor, 1) * 91.398%) 81.765%;
  --red-330: hsl(var(--red-330-hsl) / 1);
  --red-330-hsl: 358.857 calc(var(--saturation-factor, 1) * 91.304%) 77.451%;
  --red-345: hsl(var(--red-345-hsl) / 1);
  --red-345-hsl: 358.168 calc(var(--saturation-factor, 1) * 92.908%) 72.353%;
  --red-360: hsl(var(--red-360-hsl) / 1);
  --red-360-hsl: 358.471 calc(var(--saturation-factor, 1) * 91.813%) 66.471%;
  --red-400: hsl(var(--red-400-hsl) / 1);
  --red-400-hsl: 358.659 calc(var(--saturation-factor, 1) * 87.317%) 59.804%;
  --red-430: hsl(var(--red-430-hsl) / 1);
  --red-430-hsl: 358.16 calc(var(--saturation-factor, 1) * 68.776%) 53.529%;
  --red-460: hsl(var(--red-460-hsl) / 1);
  --red-460-hsl: 358.705 calc(var(--saturation-factor, 1) * 59.149%) 46.078%;
  --red-500: hsl(var(--red-500-hsl) / 1);
  --red-500-hsl: 359.504 calc(var(--saturation-factor, 1) * 60.199%) 39.412%;
  --red-530: hsl(var(--red-530-hsl) / 1);
  --red-530-hsl: 358.919 calc(var(--saturation-factor, 1) * 63.429%) 34.314%;
  --red-560: hsl(var(--red-560-hsl) / 1);
  --red-560-hsl: 358.788 calc(var(--saturation-factor, 1) * 63.871%) 30.392%;
  --red-600: hsl(var(--red-600-hsl) / 1);
  --red-600-hsl: 358.636 calc(var(--saturation-factor, 1) * 64.706%) 26.667%;
  --red-630: hsl(var(--red-630-hsl) / 1);
  --red-630-hsl: 358.5 calc(var(--saturation-factor, 1) * 65.574%) 23.922%;
  --red-660: hsl(var(--red-660-hsl) / 1);
  --red-660-hsl: 359.155 calc(var(--saturation-factor, 1) * 65.138%) 21.373%;
  --red-700: hsl(var(--red-700-hsl) / 1);
  --red-700-hsl: 358.125 calc(var(--saturation-factor, 1) * 66.667%) 18.824%;
  --red-730: hsl(var(--red-730-hsl) / 1);
  --red-730-hsl: 358.929 calc(var(--saturation-factor, 1) * 66.667%) 16.471%;
  --red-760: hsl(var(--red-760-hsl) / 1);
  --red-760-hsl: 358.846 calc(var(--saturation-factor, 1) * 70.27%) 14.51%;
  --red-800: hsl(var(--red-800-hsl) / 1);
  --red-800-hsl: 358.636 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
  --red-830: hsl(var(--red-830-hsl) / 1);
  --red-830-hsl: 358.378 calc(var(--saturation-factor, 1) * 67.273%) 10.784%;
  --red-860: hsl(var(--red-860-hsl) / 1);
  --red-860-hsl: 0 calc(var(--saturation-factor, 1) * 66.667%) 9.412%;
  --red-900: hsl(var(--red-900-hsl) / 1);
  --red-900-hsl: 0 calc(var(--saturation-factor, 1) * 70%) 7.843%;
  --orange-100: hsl(var(--orange-100-hsl) / 1);
  --orange-100-hsl: 18 calc(var(--saturation-factor, 1) * 100%) 98.039%;
  --orange-130: hsl(var(--orange-130-hsl) / 1);
  --orange-130-hsl: 23.333 calc(var(--saturation-factor, 1) * 100%) 96.471%;
  --orange-160: hsl(var(--orange-160-hsl) / 1);
  --orange-160-hsl: 21.29 calc(var(--saturation-factor, 1) * 93.939%) 93.529%;
  --orange-200: hsl(var(--orange-200-hsl) / 1);
  --orange-200-hsl: 21.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
  --orange-230: hsl(var(--orange-230-hsl) / 1);
  --orange-230-hsl: 23.514 calc(var(--saturation-factor, 1) * 92.5%) 84.314%;
  --orange-260: hsl(var(--orange-260-hsl) / 1);
  --orange-260-hsl: 23.301 calc(var(--saturation-factor, 1) * 94.495%) 78.627%;
  --orange-300: hsl(var(--orange-300-hsl) / 1);
  --orange-300-hsl: 25.468 calc(var(--saturation-factor, 1) * 94.558%) 71.176%;
  --orange-330: hsl(var(--orange-330-hsl) / 1);
  --orange-330-hsl: 27 calc(var(--saturation-factor, 1) * 94.737%) 62.745%;
  --orange-345: hsl(var(--orange-345-hsl) / 1);
  --orange-345-hsl: 28.342 calc(var(--saturation-factor, 1) * 87.665%) 55.49%;
  --orange-360: hsl(var(--orange-360-hsl) / 1);
  --orange-360-hsl: 26.145 calc(var(--saturation-factor, 1) * 71.315%) 50.784%;
  --orange-400: hsl(var(--orange-400-hsl) / 1);
  --orange-400-hsl: 25.443 calc(var(--saturation-factor, 1) * 67.521%) 45.882%;
  --orange-430: hsl(var(--orange-430-hsl) / 1);
  --orange-430-hsl: 24.681 calc(var(--saturation-factor, 1) * 69.458%) 39.804%;
  --orange-460: hsl(var(--orange-460-hsl) / 1);
  --orange-460-hsl: 23.538 calc(var(--saturation-factor, 1) * 72.222%) 35.294%;
  --orange-500: hsl(var(--orange-500-hsl) / 1);
  --orange-500-hsl: 22.314 calc(var(--saturation-factor, 1) * 76.101%) 31.176%;
  --orange-530: hsl(var(--orange-530-hsl) / 1);
  --orange-530-hsl: 21.869 calc(var(--saturation-factor, 1) * 76.978%) 27.255%;
  --orange-560: hsl(var(--orange-560-hsl) / 1);
  --orange-560-hsl: 21.474 calc(var(--saturation-factor, 1) * 77.236%) 24.118%;
  --orange-600: hsl(var(--orange-600-hsl) / 1);
  --orange-600-hsl: 22.857 calc(var(--saturation-factor, 1) * 79.245%) 20.784%;
  --orange-630: hsl(var(--orange-630-hsl) / 1);
  --orange-630-hsl: 22.105 calc(var(--saturation-factor, 1) * 79.167%) 18.824%;
  --orange-660: hsl(var(--orange-660-hsl) / 1);
  --orange-660-hsl: 22.388 calc(var(--saturation-factor, 1) * 78.824%) 16.667%;
  --orange-700: hsl(var(--orange-700-hsl) / 1);
  --orange-700-hsl: 21.724 calc(var(--saturation-factor, 1) * 76.316%) 14.902%;
  --orange-730: hsl(var(--orange-730-hsl) / 1);
  --orange-730-hsl: 21.923 calc(var(--saturation-factor, 1) * 78.788%) 12.941%;
  --orange-760: hsl(var(--orange-760-hsl) / 1);
  --orange-760-hsl: 21.333 calc(var(--saturation-factor, 1) * 78.947%) 11.176%;
  --orange-800: hsl(var(--orange-800-hsl) / 1);
  --orange-800-hsl: 21 calc(var(--saturation-factor, 1) * 80%) 9.804%;
  --orange-830: hsl(var(--orange-830-hsl) / 1);
  --orange-830-hsl: 20 calc(var(--saturation-factor, 1) * 76.744%) 8.431%;
  --orange-860: hsl(var(--orange-860-hsl) / 1);
  --orange-860-hsl: 20 calc(var(--saturation-factor, 1) * 72.973%) 7.255%;
  --orange-900: hsl(var(--orange-900-hsl) / 1);
  --orange-900-hsl: 25.714 calc(var(--saturation-factor, 1) * 72.414%) 5.686%;
  --yellow-100: hsl(var(--yellow-100-hsl) / 1);
  --yellow-100-hsl: 33.75 calc(var(--saturation-factor, 1) * 100%) 96.863%;
  --yellow-130: hsl(var(--yellow-130-hsl) / 1);
  --yellow-130-hsl: 31.304 calc(var(--saturation-factor, 1) * 100%) 95.49%;
  --yellow-160: hsl(var(--yellow-160-hsl) / 1);
  --yellow-160-hsl: 32.727 calc(var(--saturation-factor, 1) * 100%) 91.373%;
  --yellow-200: hsl(var(--yellow-200-hsl) / 1);
  --yellow-200-hsl: 35 calc(var(--saturation-factor, 1) * 97.297%) 85.49%;
  --yellow-230: hsl(var(--yellow-230-hsl) / 1);
  --yellow-230-hsl: 36.637 calc(var(--saturation-factor, 1) * 96.581%) 77.059%;
  --yellow-260: hsl(var(--yellow-260-hsl) / 1);
  --yellow-260-hsl: 40.656 calc(var(--saturation-factor, 1) * 96.825%) 62.941%;
  --yellow-300: hsl(var(--yellow-300-hsl) / 1);
  --yellow-300-hsl: 40.421 calc(var(--saturation-factor, 1) * 86.364%) 56.863%;
  --yellow-330: hsl(var(--yellow-330-hsl) / 1);
  --yellow-330-hsl: 40 calc(var(--saturation-factor, 1) * 75.309%) 52.353%;
  --yellow-345: hsl(var(--yellow-345-hsl) / 1);
  --yellow-345-hsl: 39.545 calc(var(--saturation-factor, 1) * 70.968%) 48.627%;
  --yellow-360: hsl(var(--yellow-360-hsl) / 1);
  --yellow-360-hsl: 39.018 calc(var(--saturation-factor, 1) * 74.429%) 42.941%;
  --yellow-400: hsl(var(--yellow-400-hsl) / 1);
  --yellow-400-hsl: 37.792 calc(var(--saturation-factor, 1) * 78.571%) 38.431%;
  --yellow-430: hsl(var(--yellow-430-hsl) / 1);
  --yellow-430-hsl: 37.447 calc(var(--saturation-factor, 1) * 84.431%) 32.745%;
  --yellow-460: hsl(var(--yellow-460-hsl) / 1);
  --yellow-460-hsl: 36.279 calc(var(--saturation-factor, 1) * 87.755%) 28.824%;
  --yellow-500: hsl(var(--yellow-500-hsl) / 1);
  --yellow-500-hsl: 35.5 calc(var(--saturation-factor, 1) * 93.75%) 25.098%;
  --yellow-530: hsl(var(--yellow-530-hsl) / 1);
  --yellow-530-hsl: 34.857 calc(var(--saturation-factor, 1) * 92.92%) 22.157%;
  --yellow-560: hsl(var(--yellow-560-hsl) / 1);
  --yellow-560-hsl: 33.83 calc(var(--saturation-factor, 1) * 94%) 19.608%;
  --yellow-600: hsl(var(--yellow-600-hsl) / 1);
  --yellow-600-hsl: 34.815 calc(var(--saturation-factor, 1) * 93.103%) 17.059%;
  --yellow-630: hsl(var(--yellow-630-hsl) / 1);
  --yellow-630-hsl: 34.521 calc(var(--saturation-factor, 1) * 92.405%) 15.49%;
  --yellow-660: hsl(var(--yellow-660-hsl) / 1);
  --yellow-660-hsl: 34.688 calc(var(--saturation-factor, 1) * 91.429%) 13.725%;
  --yellow-700: hsl(var(--yellow-700-hsl) / 1);
  --yellow-700-hsl: 34.286 calc(var(--saturation-factor, 1) * 90.323%) 12.157%;
  --yellow-730: hsl(var(--yellow-730-hsl) / 1);
  --yellow-730-hsl: 32.941 calc(var(--saturation-factor, 1) * 92.727%) 10.784%;
  --yellow-760: hsl(var(--yellow-760-hsl) / 1);
  --yellow-760-hsl: 32.727 calc(var(--saturation-factor, 1) * 91.667%) 9.412%;
  --yellow-800: hsl(var(--yellow-800-hsl) / 1);
  --yellow-800-hsl: 32.432 calc(var(--saturation-factor, 1) * 90.244%) 8.039%;
  --yellow-830: hsl(var(--yellow-830-hsl) / 1);
  --yellow-830-hsl: 31.875 calc(var(--saturation-factor, 1) * 88.889%) 7.059%;
  --yellow-860: hsl(var(--yellow-860-hsl) / 1);
  --yellow-860-hsl: 32.308 calc(var(--saturation-factor, 1) * 86.667%) 5.882%;
  --yellow-900: hsl(var(--yellow-900-hsl) / 1);
  --yellow-900-hsl: 36 calc(var(--saturation-factor, 1) * 83.333%) 4.706%;
  --green-100: hsl(var(--green-100-hsl) / 1);
  --green-100-hsl: 136.667 calc(var(--saturation-factor, 1) * 90%) 96.078%;
  --green-130: hsl(var(--green-130-hsl) / 1);
  --green-130-hsl: 136.875 calc(var(--saturation-factor, 1) * 94.118%) 93.333%;
  --green-160: hsl(var(--green-160-hsl) / 1);
  --green-160-hsl: 140.952 calc(var(--saturation-factor, 1) * 91.304%) 86.471%;
  --green-200: hsl(var(--green-200-hsl) / 1);
  --green-200-hsl: 143.478 calc(var(--saturation-factor, 1) * 93.496%) 75.882%;
  --green-230: hsl(var(--green-230-hsl) / 1);
  --green-230-hsl: 146.323 calc(var(--saturation-factor, 1) * 86.592%) 64.902%;
  --green-260: hsl(var(--green-260-hsl) / 1);
  --green-260-hsl: 145.605 calc(var(--saturation-factor, 1) * 75.12%) 59.02%;
  --green-300: hsl(var(--green-300-hsl) / 1);
  --green-300-hsl: 146.323 calc(var(--saturation-factor, 1) * 65.401%) 53.529%;
  --green-330: hsl(var(--green-330-hsl) / 1);
  --green-330-hsl: 146.494 calc(var(--saturation-factor, 1) * 63.115%) 47.843%;
  --green-345: hsl(var(--green-345-hsl) / 1);
  --green-345-hsl: 146.939 calc(var(--saturation-factor, 1) * 65.919%) 43.725%;
  --green-360: hsl(var(--green-360-hsl) / 1);
  --green-360-hsl: 145.385 calc(var(--saturation-factor, 1) * 65%) 39.216%;
  --green-400: hsl(var(--green-400-hsl) / 1);
  --green-400-hsl: 142.703 calc(var(--saturation-factor, 1) * 60.656%) 35.882%;
  --green-430: hsl(var(--green-430-hsl) / 1);
  --green-430-hsl: 141.522 calc(var(--saturation-factor, 1) * 56.098%) 32.157%;
  --green-460: hsl(var(--green-460-hsl) / 1);
  --green-460-hsl: 141.481 calc(var(--saturation-factor, 1) * 56.643%) 28.039%;
  --green-500: hsl(var(--green-500-hsl) / 1);
  --green-500-hsl: 141.37 calc(var(--saturation-factor, 1) * 58.4%) 24.51%;
  --green-530: hsl(var(--green-530-hsl) / 1);
  --green-530-hsl: 140.308 calc(var(--saturation-factor, 1) * 60.748%) 20.98%;
  --green-560: hsl(var(--green-560-hsl) / 1);
  --green-560-hsl: 138.621 calc(var(--saturation-factor, 1) * 61.702%) 18.431%;
  --green-600: hsl(var(--green-600-hsl) / 1);
  --green-600-hsl: 139.245 calc(var(--saturation-factor, 1) * 65.432%) 15.882%;
  --green-630: hsl(var(--green-630-hsl) / 1);
  --green-630-hsl: 140 calc(var(--saturation-factor, 1) * 66.667%) 14.118%;
  --green-660: hsl(var(--green-660-hsl) / 1);
  --green-660-hsl: 139.091 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
  --green-700: hsl(var(--green-700-hsl) / 1);
  --green-700-hsl: 141 calc(var(--saturation-factor, 1) * 74.074%) 10.588%;
  --green-730: hsl(var(--green-730-hsl) / 1);
  --green-730-hsl: 138.333 calc(var(--saturation-factor, 1) * 78.261%) 9.02%;
  --green-760: hsl(var(--green-760-hsl) / 1);
  --green-760-hsl: 140 calc(var(--saturation-factor, 1) * 84.615%) 7.647%;
  --green-800: hsl(var(--green-800-hsl) / 1);
  --green-800-hsl: 139.286 calc(var(--saturation-factor, 1) * 82.353%) 6.667%;
  --green-830: hsl(var(--green-830-hsl) / 1);
  --green-830-hsl: 137.5 calc(var(--saturation-factor, 1) * 80%) 5.882%;
  --green-860: hsl(var(--green-860-hsl) / 1);
  --green-860-hsl: 132.632 calc(var(--saturation-factor, 1) * 70.37%) 5.294%;
  --green-900: hsl(var(--green-900-hsl) / 1);
  --green-900-hsl: 128.571 calc(var(--saturation-factor, 1) * 58.333%) 4.706%;
  --blue-100: hsl(var(--blue-100-hsl) / 1);
  --blue-100-hsl: 210 calc(var(--saturation-factor, 1) * 80%) 98.039%;
  --blue-130: hsl(var(--blue-130-hsl) / 1);
  --blue-130-hsl: 210 calc(var(--saturation-factor, 1) * 87.5%) 96.863%;
  --blue-160: hsl(var(--blue-160-hsl) / 1);
  --blue-160-hsl: 208.889 calc(var(--saturation-factor, 1) * 87.097%) 93.922%;
  --blue-200: hsl(var(--blue-200-hsl) / 1);
  --blue-200-hsl: 206.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
  --blue-230: hsl(var(--blue-230-hsl) / 1);
  --blue-230-hsl: 205.135 calc(var(--saturation-factor, 1) * 92.5%) 84.314%;
  --blue-260: hsl(var(--blue-260-hsl) / 1);
  --blue-260-hsl: 204.231 calc(var(--saturation-factor, 1) * 94.545%) 78.431%;
  --blue-300: hsl(var(--blue-300-hsl) / 1);
  --blue-300-hsl: 202.649 calc(var(--saturation-factor, 1) * 97.419%) 69.608%;
  --blue-330: hsl(var(--blue-330-hsl) / 1);
  --blue-330-hsl: 200.957 calc(var(--saturation-factor, 1) * 100%) 59.02%;
  --blue-345: hsl(var(--blue-345-hsl) / 1);
  --blue-345-hsl: 199.524 calc(var(--saturation-factor, 1) * 100%) 49.412%;
  --blue-360: hsl(var(--blue-360-hsl) / 1);
  --blue-360-hsl: 202.562 calc(var(--saturation-factor, 1) * 100%) 47.451%;
  --blue-400: hsl(var(--blue-400-hsl) / 1);
  --blue-400-hsl: 206.809 calc(var(--saturation-factor, 1) * 100%) 46.078%;
  --blue-430: hsl(var(--blue-430-hsl) / 1);
  --blue-430-hsl: 212.208 calc(var(--saturation-factor, 1) * 100%) 45.294%;
  --blue-460: hsl(var(--blue-460-hsl) / 1);
  --blue-460-hsl: 213.589 calc(var(--saturation-factor, 1) * 100%) 40.98%;
  --blue-500: hsl(var(--blue-500-hsl) / 1);
  --blue-500-hsl: 213.297 calc(var(--saturation-factor, 1) * 100%) 35.686%;
  --blue-530: hsl(var(--blue-530-hsl) / 1);
  --blue-530-hsl: 212.129 calc(var(--saturation-factor, 1) * 100%) 30.392%;
  --blue-560: hsl(var(--blue-560-hsl) / 1);
  --blue-560-hsl: 211.765 calc(var(--saturation-factor, 1) * 100%) 26.667%;
  --blue-600: hsl(var(--blue-600-hsl) / 1);
  --blue-600-hsl: 211.017 calc(var(--saturation-factor, 1) * 100%) 23.137%;
  --blue-630: hsl(var(--blue-630-hsl) / 1);
  --blue-630-hsl: 211.132 calc(var(--saturation-factor, 1) * 100%) 20.784%;
  --blue-660: hsl(var(--blue-660-hsl) / 1);
  --blue-660-hsl: 211.579 calc(var(--saturation-factor, 1) * 100%) 18.627%;
  --blue-700: hsl(var(--blue-700-hsl) / 1);
  --blue-700-hsl: 211.765 calc(var(--saturation-factor, 1) * 100%) 16.667%;
  --blue-730: hsl(var(--blue-730-hsl) / 1);
  --blue-730-hsl: 210.833 calc(var(--saturation-factor, 1) * 100%) 14.118%;
  --blue-760: hsl(var(--blue-760-hsl) / 1);
  --blue-760-hsl: 211.429 calc(var(--saturation-factor, 1) * 100%) 12.353%;
  --blue-800: hsl(var(--blue-800-hsl) / 1);
  --blue-800-hsl: 211.111 calc(var(--saturation-factor, 1) * 100%) 10.588%;
  --blue-830: hsl(var(--blue-830-hsl) / 1);
  --blue-830-hsl: 212.5 calc(var(--saturation-factor, 1) * 100%) 9.412%;
  --blue-860: hsl(var(--blue-860-hsl) / 1);
  --blue-860-hsl: 213.488 calc(var(--saturation-factor, 1) * 100%) 8.431%;
  --blue-900: hsl(var(--blue-900-hsl) / 1);
  --blue-900-hsl: 213.333 calc(var(--saturation-factor, 1) * 100%) 7.059%;
  --teal-100: hsl(var(--teal-100-hsl) / 1);
  --teal-100-hsl: 193.333 calc(var(--saturation-factor, 1) * 69.231%) 97.451%;
  --teal-130: hsl(var(--teal-130-hsl) / 1);
  --teal-130-hsl: 192 calc(var(--saturation-factor, 1) * 83.333%) 95.294%;
  --teal-160: hsl(var(--teal-160-hsl) / 1);
  --teal-160-hsl: 190.5 calc(var(--saturation-factor, 1) * 83.333%) 90.588%;
  --teal-200: hsl(var(--teal-200-hsl) / 1);
  --teal-200-hsl: 188.333 calc(var(--saturation-factor, 1) * 85.714%) 83.529%;
  --teal-230: hsl(var(--teal-230-hsl) / 1);
  --teal-230-hsl: 187.934 calc(var(--saturation-factor, 1) * 88.321%) 73.137%;
  --teal-260: hsl(var(--teal-260-hsl) / 1);
  --teal-260-hsl: 188.276 calc(var(--saturation-factor, 1) * 81.921%) 65.294%;
  --teal-300: hsl(var(--teal-300-hsl) / 1);
  --teal-300-hsl: 188.903 calc(var(--saturation-factor, 1) * 72.77%) 58.235%;
  --teal-330: hsl(var(--teal-330-hsl) / 1);
  --teal-330-hsl: 189.375 calc(var(--saturation-factor, 1) * 65.574%) 52.157%;
  --teal-345: hsl(var(--teal-345-hsl) / 1);
  --teal-345-hsl: 189.677 calc(var(--saturation-factor, 1) * 62.753%) 48.431%;
  --teal-360: hsl(var(--teal-360-hsl) / 1);
  --teal-360-hsl: 189.718 calc(var(--saturation-factor, 1) * 63.964%) 43.529%;
  --teal-400: hsl(var(--teal-400-hsl) / 1);
  --teal-400-hsl: 189.6 calc(var(--saturation-factor, 1) * 63.452%) 38.627%;
  --teal-430: hsl(var(--teal-430-hsl) / 1);
  --teal-430-hsl: 190.459 calc(var(--saturation-factor, 1) * 63.006%) 33.922%;
  --teal-460: hsl(var(--teal-460-hsl) / 1);
  --teal-460-hsl: 190.515 calc(var(--saturation-factor, 1) * 64.238%) 29.608%;
  --teal-500: hsl(var(--teal-500-hsl) / 1);
  --teal-500-hsl: 190.465 calc(var(--saturation-factor, 1) * 65.152%) 25.882%;
  --teal-530: hsl(var(--teal-530-hsl) / 1);
  --teal-530-hsl: 190.263 calc(var(--saturation-factor, 1) * 66.667%) 22.353%;
  --teal-560: hsl(var(--teal-560-hsl) / 1);
  --teal-560-hsl: 189.565 calc(var(--saturation-factor, 1) * 69.697%) 19.412%;
  --teal-600: hsl(var(--teal-600-hsl) / 1);
  --teal-600-hsl: 188.852 calc(var(--saturation-factor, 1) * 71.765%) 16.667%;
  --teal-630: hsl(var(--teal-630-hsl) / 1);
  --teal-630-hsl: 189.643 calc(var(--saturation-factor, 1) * 73.684%) 14.902%;
  --teal-660: hsl(var(--teal-660-hsl) / 1);
  --teal-660-hsl: 188.4 calc(var(--saturation-factor, 1) * 75.758%) 12.941%;
  --teal-700: hsl(var(--teal-700-hsl) / 1);
  --teal-700-hsl: 189.13 calc(var(--saturation-factor, 1) * 79.31%) 11.373%;
  --teal-730: hsl(var(--teal-730-hsl) / 1);
  --teal-730-hsl: 189 calc(var(--saturation-factor, 1) * 80%) 9.804%;
  --teal-760: hsl(var(--teal-760-hsl) / 1);
  --teal-760-hsl: 188.571 calc(var(--saturation-factor, 1) * 81.395%) 8.431%;
  --teal-800: hsl(var(--teal-800-hsl) / 1);
  --teal-800-hsl: 188 calc(var(--saturation-factor, 1) * 83.333%) 7.059%;
  --teal-830: hsl(var(--teal-830-hsl) / 1);
  --teal-830-hsl: 188.889 calc(var(--saturation-factor, 1) * 87.097%) 6.078%;
  --teal-860: hsl(var(--teal-860-hsl) / 1);
  --teal-860-hsl: 187.826 calc(var(--saturation-factor, 1) * 85.185%) 5.294%;
  --teal-900: hsl(var(--teal-900-hsl) / 1);
  --teal-900-hsl: 189 calc(var(--saturation-factor, 1) * 90.909%) 4.314%;
  --white: hsl(var(--white-hsl) / 1);
  --white-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-100: hsl(var(--white-100-hsl) / 1);
  --white-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-130: hsl(var(--white-130-hsl) / 1);
  --white-130-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-160: hsl(var(--white-160-hsl) / 1);
  --white-160-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-200: hsl(var(--white-200-hsl) / 1);
  --white-200-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-230: hsl(var(--white-230-hsl) / 1);
  --white-230-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-260: hsl(var(--white-260-hsl) / 1);
  --white-260-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-300: hsl(var(--white-300-hsl) / 1);
  --white-300-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-330: hsl(var(--white-330-hsl) / 1);
  --white-330-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-345: hsl(var(--white-345-hsl) / 1);
  --white-345-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-360: hsl(var(--white-360-hsl) / 1);
  --white-360-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-400: hsl(var(--white-400-hsl) / 1);
  --white-400-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-430: hsl(var(--white-430-hsl) / 1);
  --white-430-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-460: hsl(var(--white-460-hsl) / 1);
  --white-460-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-500: hsl(var(--white-500-hsl) / 1);
  --white-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
  --white-530: hsl(var(--white-530-hsl) / 1);
  --white-530-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 90.98%;
  --white-560: hsl(var(--white-560-hsl) / 1);
  --white-560-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 81.176%;
  --white-600: hsl(var(--white-600-hsl) / 1);
  --white-600-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 67.843%;
  --white-630: hsl(var(--white-630-hsl) / 1);
  --white-630-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 58.824%;
  --white-660: hsl(var(--white-660-hsl) / 1);
  --white-660-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 51.373%;
  --white-700: hsl(var(--white-700-hsl) / 1);
  --white-700-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 40%;
  --white-730: hsl(var(--white-730-hsl) / 1);
  --white-730-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 37.255%;
  --white-760: hsl(var(--white-760-hsl) / 1);
  --white-760-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 34.51%;
  --white-800: hsl(var(--white-800-hsl) / 1);
  --white-800-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 30.196%;
  --white-830: hsl(var(--white-830-hsl) / 1);
  --white-830-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 23.137%;
  --white-860: hsl(var(--white-860-hsl) / 1);
  --white-860-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 14.902%;
  --white-900: hsl(var(--white-900-hsl) / 1);
  --white-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 5.098%;
  --black: hsl(var(--black-hsl) / 1);
  --black-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-100: hsl(var(--black-100-hsl) / 1);
  --black-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 94.902%;
  --black-130: hsl(var(--black-130-hsl) / 1);
  --black-130-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 90.98%;
  --black-160: hsl(var(--black-160-hsl) / 1);
  --black-160-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 85.49%;
  --black-200: hsl(var(--black-200-hsl) / 1);
  --black-200-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 80%;
  --black-230: hsl(var(--black-230-hsl) / 1);
  --black-230-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 74.118%;
  --black-260: hsl(var(--black-260-hsl) / 1);
  --black-260-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 67.451%;
  --black-300: hsl(var(--black-300-hsl) / 1);
  --black-300-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 60%;
  --black-330: hsl(var(--black-330-hsl) / 1);
  --black-330-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 47.843%;
  --black-345: hsl(var(--black-345-hsl) / 1);
  --black-345-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 40%;
  --black-360: hsl(var(--black-360-hsl) / 1);
  --black-360-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 36.078%;
  --black-400: hsl(var(--black-400-hsl) / 1);
  --black-400-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 20%;
  --black-430: hsl(var(--black-430-hsl) / 1);
  --black-430-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 14.51%;
  --black-460: hsl(var(--black-460-hsl) / 1);
  --black-460-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 7.843%;
  --black-500: hsl(var(--black-500-hsl) / 1);
  --black-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-530: hsl(var(--black-530-hsl) / 1);
  --black-530-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-560: hsl(var(--black-560-hsl) / 1);
  --black-560-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-600: hsl(var(--black-600-hsl) / 1);
  --black-600-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-630: hsl(var(--black-630-hsl) / 1);
  --black-630-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-660: hsl(var(--black-660-hsl) / 1);
  --black-660-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-700: hsl(var(--black-700-hsl) / 1);
  --black-700-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-730: hsl(var(--black-730-hsl) / 1);
  --black-730-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-760: hsl(var(--black-760-hsl) / 1);
  --black-760-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-800: hsl(var(--black-800-hsl) / 1);
  --black-800-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-830: hsl(var(--black-830-hsl) / 1);
  --black-830-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-860: hsl(var(--black-860-hsl) / 1);
  --black-860-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --black-900: hsl(var(--black-900-hsl) / 1);
  --black-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
  --brand-100: hsl(var(--brand-100-hsl) / 1);
  --brand-100-hsl: 240 calc(var(--saturation-factor, 1) * 77.778%) 98.235%;
  --brand-130: hsl(var(--brand-130-hsl) / 1);
  --brand-130-hsl: 235.714 calc(var(--saturation-factor, 1) * 87.5%) 96.863%;
  --brand-160: hsl(var(--brand-160-hsl) / 1);
  --brand-160-hsl: 234.545 calc(var(--saturation-factor, 1) * 84.615%) 94.902%;
  --brand-200: hsl(var(--brand-200-hsl) / 1);
  --brand-200-hsl: 236 calc(var(--saturation-factor, 1) * 83.333%) 92.941%;
  --brand-230: hsl(var(--brand-230-hsl) / 1);
  --brand-230-hsl: 235.5 calc(var(--saturation-factor, 1) * 86.957%) 90.98%;
  --brand-260: hsl(var(--brand-260-hsl) / 1);
  --brand-260-hsl: 235.2 calc(var(--saturation-factor, 1) * 86.207%) 88.627%;
  --brand-300: hsl(var(--brand-300-hsl) / 1);
  --brand-300-hsl: 235.161 calc(var(--saturation-factor, 1) * 86.111%) 85.882%;
  --brand-330: hsl(var(--brand-330-hsl) / 1);
  --brand-330-hsl: 234.75 calc(var(--saturation-factor, 1) * 85.106%) 81.569%;
  --brand-345: hsl(var(--brand-345-hsl) / 1);
  --brand-345-hsl: 234.783 calc(var(--saturation-factor, 1) * 85.185%) 78.824%;
  --brand-360: hsl(var(--brand-360-hsl) / 1);
  --brand-360-hsl: 235.152 calc(var(--saturation-factor, 1) * 86.087%) 77.451%;
  --brand-400: hsl(var(--brand-400-hsl) / 1);
  --brand-400-hsl: 234.677 calc(var(--saturation-factor, 1) * 86.111%) 71.765%;
  --brand-430: hsl(var(--brand-430-hsl) / 1);
  --brand-430-hsl: 235 calc(var(--saturation-factor, 1) * 85.714%) 69.804%;
  --brand-460: hsl(var(--brand-460-hsl) / 1);
  --brand-460-hsl: 234.93 calc(var(--saturation-factor, 1) * 85.542%) 67.451%;
  --brand-500: hsl(var(--brand-500-hsl) / 1);
  --brand-500-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
  --brand-530: hsl(var(--brand-530-hsl) / 1);
  --brand-530-hsl: 234.857 calc(var(--saturation-factor, 1) * 66.667%) 58.824%;
  --brand-560: hsl(var(--brand-560-hsl) / 1);
  --brand-560-hsl: 234.72 calc(var(--saturation-factor, 1) * 51.44%) 52.353%;
  --brand-600: hsl(var(--brand-600-hsl) / 1);
  --brand-600-hsl: 234.857 calc(var(--saturation-factor, 1) * 46.667%) 44.118%;
  --brand-630: hsl(var(--brand-630-hsl) / 1);
  --brand-630-hsl: 235.385 calc(var(--saturation-factor, 1) * 46.667%) 38.235%;
  --brand-660: hsl(var(--brand-660-hsl) / 1);
  --brand-660-hsl: 234.75 calc(var(--saturation-factor, 1) * 47.059%) 33.333%;
  --brand-700: hsl(var(--brand-700-hsl) / 1);
  --brand-700-hsl: 235.161 calc(var(--saturation-factor, 1) * 46.97%) 25.882%;
  --brand-730: hsl(var(--brand-730-hsl) / 1);
  --brand-730-hsl: 234.828 calc(var(--saturation-factor, 1) * 46.774%) 24.314%;
  --brand-760: hsl(var(--brand-760-hsl) / 1);
  --brand-760-hsl: 234.34 calc(var(--saturation-factor, 1) * 46.903%) 22.157%;
  --brand-800: hsl(var(--brand-800-hsl) / 1);
  --brand-800-hsl: 234.894 calc(var(--saturation-factor, 1) * 47.475%) 19.412%;
  --brand-830: hsl(var(--brand-830-hsl) / 1);
  --brand-830-hsl: 235 calc(var(--saturation-factor, 1) * 47.368%) 14.902%;
  --brand-860: hsl(var(--brand-860-hsl) / 1);
  --brand-860-hsl: 234.783 calc(var(--saturation-factor, 1) * 46.939%) 9.608%;
  --brand-900: hsl(var(--brand-900-hsl) / 1);
  --brand-900-hsl: 232.5 calc(var(--saturation-factor, 1) * 50%) 3.137%;
  --primary-100: hsl(var(--primary-100-hsl) / 1);
  --primary-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 97.647%;
  --primary-130: hsl(var(--primary-130-hsl) / 1);
  --primary-130-hsl: 220 calc(var(--saturation-factor, 1) * 13.043%) 95.49%;
  --primary-160: hsl(var(--primary-160-hsl) / 1);
  --primary-160-hsl: 210 calc(var(--saturation-factor, 1) * 11.111%) 92.941%;
  --primary-200: hsl(var(--primary-200-hsl) / 1);
  --primary-200-hsl: 216 calc(var(--saturation-factor, 1) * 9.804%) 90%;
  --primary-230: hsl(var(--primary-230-hsl) / 1);
  --primary-230-hsl: 210 calc(var(--saturation-factor, 1) * 9.091%) 87.059%;
  --primary-260: hsl(var(--primary-260-hsl) / 1);
  --primary-260-hsl: 214.286 calc(var(--saturation-factor, 1) * 8.434%) 83.725%;
  --primary-300: hsl(var(--primary-300-hsl) / 1);
  --primary-300-hsl: 210 calc(var(--saturation-factor, 1) * 9.259%) 78.824%;
  --primary-330: hsl(var(--primary-330-hsl) / 1);
  --primary-330-hsl: 215 calc(var(--saturation-factor, 1) * 8.824%) 73.333%;
  --primary-345: hsl(var(--primary-345-hsl) / 1);
  --primary-345-hsl: 214.286 calc(var(--saturation-factor, 1) * 8.434%) 67.451%;
  --primary-360: hsl(var(--primary-360-hsl) / 1);
  --primary-360-hsl: 213.75 calc(var(--saturation-factor, 1) * 8.081%) 61.176%;
  --primary-400: hsl(var(--primary-400-hsl) / 1);
  --primary-400-hsl: 222.857 calc(var(--saturation-factor, 1) * 5.833%) 52.941%;
  --primary-430: hsl(var(--primary-430-hsl) / 1);
  --primary-430-hsl: 229.091 calc(var(--saturation-factor, 1) * 4.803%) 44.902%;
  --primary-460: hsl(var(--primary-460-hsl) / 1);
  --primary-460-hsl: 228 calc(var(--saturation-factor, 1) * 5.155%) 38.039%;
  --primary-500: hsl(var(--primary-500-hsl) / 1);
  --primary-500-hsl: 228 calc(var(--saturation-factor, 1) * 6.024%) 32.549%;
  --primary-530: hsl(var(--primary-530-hsl) / 1);
  --primary-530-hsl: 226.667 calc(var(--saturation-factor, 1) * 6.475%) 27.255%;
  --primary-560: hsl(var(--primary-560-hsl) / 1);
  --primary-560-hsl: 225 calc(var(--saturation-factor, 1) * 6.667%) 23.529%;
  --primary-600: hsl(var(--primary-600-hsl) / 1);
  --primary-600-hsl: 222.857 calc(var(--saturation-factor, 1) * 6.667%) 20.588%;
  --primary-630: hsl(var(--primary-630-hsl) / 1);
  --primary-630-hsl: 220 calc(var(--saturation-factor, 1) * 6.522%) 18.039%;
  --primary-645: hsl(var(--primary-645-hsl) / 1);
  --primary-645-hsl: 220 calc(var(--saturation-factor, 1) * 6.977%) 16.863%;
  --primary-660: hsl(var(--primary-660-hsl) / 1);
  --primary-660-hsl: 228 calc(var(--saturation-factor, 1) * 6.667%) 14.706%;
  --primary-700: hsl(var(--primary-700-hsl) / 1);
  --primary-700-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 12.549%;
  --primary-730: hsl(var(--primary-730-hsl) / 1);
  --primary-730-hsl: 225 calc(var(--saturation-factor, 1) * 7.143%) 10.98%;
  --primary-760: hsl(var(--primary-760-hsl) / 1);
  --primary-760-hsl: 220 calc(var(--saturation-factor, 1) * 6.383%) 9.216%;
  --primary-800: hsl(var(--primary-800-hsl) / 1);
  --primary-800-hsl: 220 calc(var(--saturation-factor, 1) * 8.108%) 7.255%;
  --primary-830: hsl(var(--primary-830-hsl) / 1);
  --primary-830-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 4.902%;
  --primary-860: hsl(var(--primary-860-hsl) / 1);
  --primary-860-hsl: 240 calc(var(--saturation-factor, 1) * 7.692%) 2.549%;
  --primary-900: hsl(var(--primary-900-hsl) / 1);
  --primary-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0.784%;
  --plum-0: hsl(var(--plum-0-hsl) / 1);
  --plum-0-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 97.843%;
  --plum-1: hsl(var(--plum-1-hsl) / 1);
  --plum-1-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 95.49%;
  --plum-2: hsl(var(--plum-2-hsl) / 1);
  --plum-2-hsl: 220 calc(var(--saturation-factor, 1) * 8.571%) 93.137%;
  --plum-3: hsl(var(--plum-3-hsl) / 1);
  --plum-3-hsl: 225 calc(var(--saturation-factor, 1) * 8%) 90.196%;
  --plum-4: hsl(var(--plum-4-hsl) / 1);
  --plum-4-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 87.451%;
  --plum-5: hsl(var(--plum-5-hsl) / 1);
  --plum-5-hsl: 220 calc(var(--saturation-factor, 1) * 7.317%) 83.922%;
  --plum-6: hsl(var(--plum-6-hsl) / 1);
  --plum-6-hsl: 231.429 calc(var(--saturation-factor, 1) * 6.667%) 79.412%;
  --plum-7: hsl(var(--plum-7-hsl) / 1);
  --plum-7-hsl: 226.667 calc(var(--saturation-factor, 1) * 6.767%) 73.922%;
  --plum-8: hsl(var(--plum-8-hsl) / 1);
  --plum-8-hsl: 230 calc(var(--saturation-factor, 1) * 7.407%) 68.235%;
  --plum-9: hsl(var(--plum-9-hsl) / 1);
  --plum-9-hsl: 231.429 calc(var(--saturation-factor, 1) * 7.071%) 61.176%;
  --plum-10: hsl(var(--plum-10-hsl) / 1);
  --plum-10-hsl: 228.75 calc(var(--saturation-factor, 1) * 6.78%) 53.725%;
  --plum-11: hsl(var(--plum-11-hsl) / 1);
  --plum-11-hsl: 228.75 calc(var(--saturation-factor, 1) * 6.897%) 45.49%;
  --plum-12: hsl(var(--plum-12-hsl) / 1);
  --plum-12-hsl: 228 calc(var(--saturation-factor, 1) * 7.614%) 38.627%;
  --plum-13: hsl(var(--plum-13-hsl) / 1);
  --plum-13-hsl: 227.143 calc(var(--saturation-factor, 1) * 8.333%) 32.941%;
  --plum-14: hsl(var(--plum-14-hsl) / 1);
  --plum-14-hsl: 230 calc(var(--saturation-factor, 1) * 8.451%) 27.843%;
  --plum-15: hsl(var(--plum-15-hsl) / 1);
  --plum-15-hsl: 229.091 calc(var(--saturation-factor, 1) * 8.943%) 24.118%;
  --plum-16: hsl(var(--plum-16-hsl) / 1);
  --plum-16-hsl: 234 calc(var(--saturation-factor, 1) * 9.259%) 21.176%;
  --plum-17: hsl(var(--plum-17-hsl) / 1);
  --plum-17-hsl: 233.333 calc(var(--saturation-factor, 1) * 9.278%) 19.02%;
  --plum-18: hsl(var(--plum-18-hsl) / 1);
  --plum-18-hsl: 233.333 calc(var(--saturation-factor, 1) * 10.588%) 16.667%;
  --plum-19: hsl(var(--plum-19-hsl) / 1);
  --plum-19-hsl: 232.5 calc(var(--saturation-factor, 1) * 10.811%) 14.51%;
  --plum-20: hsl(var(--plum-20-hsl) / 1);
  --plum-20-hsl: 231.429 calc(var(--saturation-factor, 1) * 11.111%) 12.353%;
  --plum-21: hsl(var(--plum-21-hsl) / 1);
  --plum-21-hsl: 231.429 calc(var(--saturation-factor, 1) * 12.727%) 10.784%;
  --plum-22: hsl(var(--plum-22-hsl) / 1);
  --plum-22-hsl: 240 calc(var(--saturation-factor, 1) * 12%) 9.804%;
  --plum-23: hsl(var(--plum-23-hsl) / 1);
  --plum-23-hsl: 240 calc(var(--saturation-factor, 1) * 11.628%) 8.431%;
  --plum-24: hsl(var(--plum-24-hsl) / 1);
  --plum-24-hsl: 228 calc(var(--saturation-factor, 1) * 14.286%) 6.863%;
  --plum-25: hsl(var(--plum-25-hsl) / 1);
  --plum-25-hsl: 240 calc(var(--saturation-factor, 1) * 14.286%) 5.49%;
  --plum-26: hsl(var(--plum-26-hsl) / 1);
  --plum-26-hsl: 240 calc(var(--saturation-factor, 1) * 15.789%) 3.725%;
}

.visual-refresh {
  --blue-100: var(--blue-new-1);
  --blue-100-hsl: var(--blue-new-1-hsl);

  --blue-130: var(--blue-new-1);
  --blue-130-hsl: var(--blue-new-1-hsl);

  --blue-160: var(--blue-new-1);
  --blue-160-hsl: var(--blue-new-1-hsl);

  --blue-200: var(--blue-new-5);
  --blue-200-hsl: var(--blue-new-5-hsl);

  --blue-230: var(--blue-new-11);
  --blue-230-hsl: var(--blue-new-11-hsl);

  --blue-260: var(--blue-new-17);
  --blue-260-hsl: var(--blue-new-17-hsl);

  --blue-300: var(--blue-new-25);
  --blue-300-hsl: var(--blue-new-25-hsl);

  --blue-330: var(--blue-new-31);
  --blue-330-hsl: var(--blue-new-31-hsl);

  --blue-345: var(--blue-new-36);
  --blue-345-hsl: var(--blue-new-36-hsl);

  --blue-360: var(--blue-new-40);
  --blue-360-hsl: var(--blue-new-40-hsl);

  --blue-400: var(--blue-new-45);
  --blue-400-hsl: var(--blue-new-45-hsl);

  --blue-430: var(--blue-new-51);
  --blue-430-hsl: var(--blue-new-51-hsl);

  --blue-460: var(--blue-new-56);
  --blue-460-hsl: var(--blue-new-56-hsl);

  --blue-500: var(--blue-new-62);
  --blue-500-hsl: var(--blue-new-62-hsl);

  --blue-530: var(--blue-new-66);
  --blue-530-hsl: var(--blue-new-66-hsl);

  --blue-560: var(--blue-new-70);
  --blue-560-hsl: var(--blue-new-70-hsl);

  --blue-600: var(--blue-new-75);
  --blue-600-hsl: var(--blue-new-75-hsl);

  --blue-630: var(--blue-new-77);
  --blue-630-hsl: var(--blue-new-77-hsl);

  --blue-660: var(--blue-new-79);
  --blue-660-hsl: var(--blue-new-79-hsl);

  --blue-700: var(--blue-new-83);
  --blue-700-hsl: var(--blue-new-83-hsl);

  --blue-730: var(--blue-new-85);
  --blue-730-hsl: var(--blue-new-85-hsl);

  --blue-760: var(--blue-new-88);
  --blue-760-hsl: var(--blue-new-88-hsl);

  --blue-800: var(--blue-new-90);
  --blue-800-hsl: var(--blue-new-90-hsl);

  --blue-830: var(--blue-new-92);
  --blue-830-hsl: var(--blue-new-92-hsl);

  --blue-860: var(--blue-new-93);
  --blue-860-hsl: var(--blue-new-93-hsl);

  --blue-900: var(--blue-new-95);
  --blue-900-hsl: var(--blue-new-95-hsl);

  --brand-100: var(--blurple-1);
  --brand-100-hsl: var(--blurple-1-hsl);

  --brand-130: var(--blurple-1);
  --brand-130-hsl: var(--blurple-1-hsl);

  --brand-160: var(--blurple-1);
  --brand-160-hsl: var(--blurple-1-hsl);

  --brand-200: var(--blurple-4);
  --brand-200-hsl: var(--blurple-4-hsl);

  --brand-230: var(--blurple-7);
  --brand-230-hsl: var(--blurple-7-hsl);

  --brand-260: var(--blurple-11);
  --brand-260-hsl: var(--blurple-11-hsl);

  --brand-300: var(--blurple-15);
  --brand-300-hsl: var(--blurple-15-hsl);

  --brand-330: var(--blurple-22);
  --brand-330-hsl: var(--blurple-22-hsl);

  --brand-345: var(--blurple-26);
  --brand-345-hsl: var(--blurple-26-hsl);

  --brand-360: var(--blurple-28);
  --brand-360-hsl: var(--blurple-28-hsl);

  --brand-400: var(--blurple-37);
  --brand-400-hsl: var(--blurple-37-hsl);

  --brand-430: var(--blurple-41);
  --brand-430-hsl: var(--blurple-41-hsl);

  --brand-460: var(--blurple-44);
  --brand-460-hsl: var(--blurple-44-hsl);

  --brand-500: var(--blurple-49);
  --brand-500-hsl: var(--blurple-49-hsl);

  --brand-530: var(--blurple-54);
  --brand-530-hsl: var(--blurple-54-hsl);

  --brand-560: var(--blurple-59);
  --brand-560-hsl: var(--blurple-59-hsl);

  --brand-600: var(--blurple-65);
  --brand-600-hsl: var(--blurple-65-hsl);

  --brand-630: var(--blurple-70);
  --brand-630-hsl: var(--blurple-70-hsl);

  --brand-660: var(--blurple-73);
  --brand-660-hsl: var(--blurple-73-hsl);

  --brand-700: var(--blurple-80);
  --brand-700-hsl: var(--blurple-80-hsl);

  --brand-730: var(--blurple-81);
  --brand-730-hsl: var(--blurple-81-hsl);

  --brand-760: var(--blurple-83);
  --brand-760-hsl: var(--blurple-83-hsl);

  --brand-800: var(--blurple-86);
  --brand-800-hsl: var(--blurple-86-hsl);

  --brand-830: var(--blurple-90);
  --brand-830-hsl: var(--blurple-90-hsl);

  --brand-860: var(--blurple-95);
  --brand-860-hsl: var(--blurple-95-hsl);

  --brand-900: var(--blurple-98);
  --brand-900-hsl: var(--blurple-98-hsl);

  --green-100: var(--green-new-1);
  --green-100-hsl: var(--green-new-1-hsl);

  --green-130: var(--green-new-1);
  --green-130-hsl: var(--green-new-1-hsl);

  --green-160: var(--green-new-3);
  --green-160-hsl: var(--green-new-3-hsl);

  --green-200: var(--green-new-11);
  --green-200-hsl: var(--green-new-11-hsl);

  --green-230: var(--green-new-15);
  --green-230-hsl: var(--green-new-15-hsl);

  --green-260: var(--green-new-20);
  --green-260-hsl: var(--green-new-20-hsl);

  --green-300: var(--green-new-24);
  --green-300-hsl: var(--green-new-24-hsl);

  --green-330: var(--green-new-30);
  --green-330-hsl: var(--green-new-30-hsl);

  --green-345: var(--green-new-34);
  --green-345-hsl: var(--green-new-34-hsl);

  --green-360: var(--green-new-38);
  --green-360-hsl: var(--green-new-38-hsl);

  --green-400: var(--green-new-44);
  --green-400-hsl: var(--green-new-44-hsl);

  --green-430: var(--green-new-52);
  --green-430-hsl: var(--green-new-52-hsl);

  --green-460: var(--green-new-57);
  --green-460-hsl: var(--green-new-57-hsl);

  --green-500: var(--green-new-63);
  --green-500-hsl: var(--green-new-63-hsl);

  --green-530: var(--green-new-67);
  --green-530-hsl: var(--green-new-67-hsl);

  --green-560: var(--green-new-71);
  --green-560-hsl: var(--green-new-71-hsl);

  --green-600: var(--green-new-75);
  --green-600-hsl: var(--green-new-75-hsl);

  --green-630: var(--green-new-78);
  --green-630-hsl: var(--green-new-78-hsl);

  --green-660: var(--green-new-80);
  --green-660-hsl: var(--green-new-80-hsl);

  --green-700: var(--green-new-83);
  --green-700-hsl: var(--green-new-83-hsl);

  --green-730: var(--green-new-86);
  --green-730-hsl: var(--green-new-86-hsl);

  --green-760: var(--green-new-88);
  --green-760-hsl: var(--green-new-88-hsl);

  --green-800: var(--green-new-90);
  --green-800-hsl: var(--green-new-90-hsl);

  --green-830: var(--green-new-92);
  --green-830-hsl: var(--green-new-92-hsl);

  --green-860: var(--green-new-94);
  --green-860-hsl: var(--green-new-94-hsl);

  --green-900: var(--green-new-95);
  --green-900-hsl: var(--green-new-95-hsl);

  --orange-100: var(--orange-new-1);
  --orange-100-hsl: var(--orange-new-1-hsl);

  --orange-130: var(--orange-new-1);
  --orange-130-hsl: var(--orange-new-1-hsl);

  --orange-160: var(--orange-new-1);
  --orange-160-hsl: var(--orange-new-1-hsl);

  --orange-200: var(--orange-new-3);
  --orange-200-hsl: var(--orange-new-3-hsl);

  --orange-230: var(--orange-new-8);
  --orange-230-hsl: var(--orange-new-8-hsl);

  --orange-260: var(--orange-new-15);
  --orange-260-hsl: var(--orange-new-15-hsl);

  --orange-300: var(--orange-new-22);
  --orange-300-hsl: var(--orange-new-22-hsl);

  --orange-330: var(--orange-new-30);
  --orange-330-hsl: var(--orange-new-30-hsl);

  --orange-345: var(--orange-new-35);
  --orange-345-hsl: var(--orange-new-35-hsl);

  --orange-360: var(--orange-new-38);
  --orange-360-hsl: var(--orange-new-38-hsl);

  --orange-400: var(--orange-new-41);
  --orange-400-hsl: var(--orange-new-41-hsl);

  --orange-430: var(--orange-new-44);
  --orange-430-hsl: var(--orange-new-44-hsl);

  --orange-460: var(--orange-new-59);
  --orange-460-hsl: var(--orange-new-59-hsl);

  --orange-500: var(--orange-new-63);
  --orange-500-hsl: var(--orange-new-63-hsl);

  --orange-530: var(--orange-new-67);
  --orange-530-hsl: var(--orange-new-67-hsl);

  --orange-560: var(--orange-new-71);
  --orange-560-hsl: var(--orange-new-71-hsl);

  --orange-600: var(--orange-new-75);
  --orange-600-hsl: var(--orange-new-75-hsl);

  --orange-630: var(--orange-new-77);
  --orange-630-hsl: var(--orange-new-77-hsl);

  --orange-660: var(--orange-new-80);
  --orange-660-hsl: var(--orange-new-80-hsl);

  --orange-700: var(--orange-new-83);
  --orange-700-hsl: var(--orange-new-83-hsl);

  --orange-730: var(--orange-new-86);
  --orange-730-hsl: var(--orange-new-86-hsl);

  --orange-760: var(--orange-new-88);
  --orange-760-hsl: var(--orange-new-88-hsl);

  --orange-800: var(--orange-new-90);
  --orange-800-hsl: var(--orange-new-90-hsl);

  --orange-830: var(--orange-new-93);
  --orange-830-hsl: var(--orange-new-93-hsl);

  --orange-860: var(--orange-new-94);
  --orange-860-hsl: var(--orange-new-94-hsl);

  --orange-900: var(--orange-new-96);
  --orange-900-hsl: var(--orange-new-96-hsl);

  --plum-0: var(--neutral-2);
  --plum-0-hsl: var(--neutral-2-hsl);

  --plum-1: var(--neutral-4);
  --plum-1-hsl: var(--neutral-4-hsl);

  --plum-10: var(--neutral-34);
  --plum-10-hsl: var(--neutral-34-hsl);

  --plum-11: var(--neutral-40);
  --plum-11-hsl: var(--neutral-40-hsl);

  --plum-12: var(--neutral-45);
  --plum-12-hsl: var(--neutral-45-hsl);

  --plum-13: var(--neutral-49);
  --plum-13-hsl: var(--neutral-49-hsl);

  --plum-14: var(--neutral-58);
  --plum-14-hsl: var(--neutral-58-hsl);

  --plum-15: var(--neutral-64);
  --plum-15-hsl: var(--neutral-64-hsl);

  --plum-16: var(--neutral-69);
  --plum-16-hsl: var(--neutral-69-hsl);

  --plum-17: var(--neutral-72);
  --plum-17-hsl: var(--neutral-72-hsl);

  --plum-18: var(--neutral-77);
  --plum-18-hsl: var(--neutral-77-hsl);

  --plum-19: var(--neutral-80);
  --plum-19-hsl: var(--neutral-80-hsl);

  --plum-2: var(--neutral-6);
  --plum-2-hsl: var(--neutral-6-hsl);

  --plum-20: var(--neutral-84);
  --plum-20-hsl: var(--neutral-84-hsl);

  --plum-21: var(--neutral-86);
  --plum-21-hsl: var(--neutral-86-hsl);

  --plum-22: var(--neutral-89);
  --plum-22-hsl: var(--neutral-89-hsl);

  --plum-23: var(--neutral-91);
  --plum-23-hsl: var(--neutral-91-hsl);

  --plum-24: var(--neutral-93);
  --plum-24-hsl: var(--neutral-93-hsl);

  --plum-25: var(--neutral-95);
  --plum-25-hsl: var(--neutral-95-hsl);

  --plum-26: var(--neutral-97);
  --plum-26-hsl: var(--neutral-97-hsl);

  --plum-3: var(--neutral-8);
  --plum-3-hsl: var(--neutral-8-hsl);

  --plum-4: var(--neutral-9);
  --plum-4-hsl: var(--neutral-9-hsl);

  --plum-5: var(--neutral-12);
  --plum-5-hsl: var(--neutral-12-hsl);

  --plum-6: var(--neutral-15);
  --plum-6-hsl: var(--neutral-15-hsl);

  --plum-7: var(--neutral-19);
  --plum-7-hsl: var(--neutral-19-hsl);

  --plum-8: var(--neutral-23);
  --plum-8-hsl: var(--neutral-23-hsl);

  --plum-9: var(--neutral-28);
  --plum-9-hsl: var(--neutral-28-hsl);

  --primary-100: var(--neutral-2);
  --primary-100-hsl: var(--neutral-2-hsl);

  --primary-130: var(--neutral-4);
  --primary-130-hsl: var(--neutral-4-hsl);

  --primary-160: var(--neutral-6);
  --primary-160-hsl: var(--neutral-6-hsl);

  --primary-200: var(--neutral-8);
  --primary-200-hsl: var(--neutral-8-hsl);

  --primary-230: var(--neutral-9);
  --primary-230-hsl: var(--neutral-9-hsl);

  --primary-260: var(--neutral-12);
  --primary-260-hsl: var(--neutral-12-hsl);

  --primary-300: var(--neutral-15);
  --primary-300-hsl: var(--neutral-15-hsl);

  --primary-330: var(--neutral-19);
  --primary-330-hsl: var(--neutral-19-hsl);

  --primary-345: var(--neutral-23);
  --primary-345-hsl: var(--neutral-23-hsl);

  --primary-360: var(--neutral-28);
  --primary-360-hsl: var(--neutral-28-hsl);

  --primary-400: var(--neutral-34);
  --primary-400-hsl: var(--neutral-34-hsl);

  --primary-430: var(--neutral-40);
  --primary-430-hsl: var(--neutral-40-hsl);

  --primary-460: var(--neutral-45);
  --primary-460-hsl: var(--neutral-45-hsl);

  --primary-500: var(--neutral-49);
  --primary-500-hsl: var(--neutral-49-hsl);

  --primary-530: var(--neutral-59);
  --primary-530-hsl: var(--neutral-59-hsl);

  --primary-560: var(--neutral-65);
  --primary-560-hsl: var(--neutral-65-hsl);

  --primary-600: var(--neutral-69);
  --primary-600-hsl: var(--neutral-69-hsl);

  --primary-630: var(--neutral-73);
  --primary-630-hsl: var(--neutral-73-hsl);

  --primary-645: var(--neutral-75);
  --primary-645-hsl: var(--neutral-75-hsl);

  --primary-660: var(--neutral-79);
  --primary-660-hsl: var(--neutral-79-hsl);

  --primary-700: var(--neutral-83);
  --primary-700-hsl: var(--neutral-83-hsl);

  --primary-730: var(--neutral-86);
  --primary-730-hsl: var(--neutral-86-hsl);

  --primary-760: var(--neutral-89);
  --primary-760-hsl: var(--neutral-89-hsl);

  --primary-800: var(--neutral-92);
  --primary-800-hsl: var(--neutral-92-hsl);

  --primary-830: var(--neutral-95);
  --primary-830-hsl: var(--neutral-95-hsl);

  --primary-860: var(--neutral-98);
  --primary-860-hsl: var(--neutral-98-hsl);

  --primary-900: var(--neutral-99);
  --primary-900-hsl: var(--neutral-99-hsl);

  --red-100: var(--red-new-1);
  --red-100-hsl: var(--red-new-1-hsl);

  --red-130: var(--red-new-1);
  --red-130-hsl: var(--red-new-1-hsl);

  --red-160: var(--red-new-1);
  --red-160-hsl: var(--red-new-1-hsl);

  --red-200: var(--red-new-1);
  --red-200-hsl: var(--red-new-1-hsl);

  --red-230: var(--red-new-6);
  --red-230-hsl: var(--red-new-6-hsl);

  --red-260: var(--red-new-10);
  --red-260-hsl: var(--red-new-10-hsl);

  --red-300: var(--red-new-16);
  --red-300-hsl: var(--red-new-16-hsl);

  --red-330: var(--red-new-22);
  --red-330-hsl: var(--red-new-22-hsl);

  --red-345: var(--red-new-30);
  --red-345-hsl: var(--red-new-30-hsl);

  --red-360: var(--red-new-38);
  --red-360-hsl: var(--red-new-38-hsl);

  --red-400: var(--red-new-46);
  --red-400-hsl: var(--red-new-46-hsl);

  --red-430: var(--red-new-47);
  --red-430-hsl: var(--red-new-47-hsl);

  --red-460: var(--red-new-55);
  --red-460-hsl: var(--red-new-55-hsl);

  --red-500: var(--red-new-61);
  --red-500-hsl: var(--red-new-61-hsl);

  --red-530: var(--red-new-65);
  --red-530-hsl: var(--red-new-65-hsl);

  --red-560: var(--red-new-68);
  --red-560-hsl: var(--red-new-68-hsl);

  --red-600: var(--red-new-73);
  --red-600-hsl: var(--red-new-73-hsl);

  --red-630: var(--red-new-75);
  --red-630-hsl: var(--red-new-75-hsl);

  --red-660: var(--red-new-78);
  --red-660-hsl: var(--red-new-78-hsl);

  --red-700: var(--red-new-81);
  --red-700-hsl: var(--red-new-81-hsl);

  --red-730: var(--red-new-85);
  --red-730-hsl: var(--red-new-85-hsl);

  --red-760: var(--red-new-86);
  --red-760-hsl: var(--red-new-86-hsl);

  --red-800: var(--red-new-89);
  --red-800-hsl: var(--red-new-89-hsl);

  --red-830: var(--red-new-92);
  --red-830-hsl: var(--red-new-92-hsl);

  --red-860: var(--red-new-93);
  --red-860-hsl: var(--red-new-93-hsl);

  --red-900: var(--red-new-95);
  --red-900-hsl: var(--red-new-95-hsl);

  --teal-100: var(--teal-new-1);
  --teal-100-hsl: var(--teal-new-1-hsl);

  --teal-130: var(--teal-new-1);
  --teal-130-hsl: var(--teal-new-1-hsl);

  --teal-160: var(--teal-new-2);
  --teal-160-hsl: var(--teal-new-2-hsl);

  --teal-200: var(--teal-new-6);
  --teal-200-hsl: var(--teal-new-6-hsl);

  --teal-230: var(--teal-new-13);
  --teal-230-hsl: var(--teal-new-13-hsl);

  --teal-260: var(--teal-new-18);
  --teal-260-hsl: var(--teal-new-18-hsl);

  --teal-300: var(--teal-new-24);
  --teal-300-hsl: var(--teal-new-24-hsl);

  --teal-330: var(--teal-new-30);
  --teal-330-hsl: var(--teal-new-30-hsl);

  --teal-345: var(--teal-new-32);
  --teal-345-hsl: var(--teal-new-32-hsl);

  --teal-360: var(--teal-new-39);
  --teal-360-hsl: var(--teal-new-39-hsl);

  --teal-400: var(--teal-new-44);
  --teal-400-hsl: var(--teal-new-44-hsl);

  --teal-430: var(--teal-new-51);
  --teal-430-hsl: var(--teal-new-51-hsl);

  --teal-460: var(--teal-new-58);
  --teal-460-hsl: var(--teal-new-58-hsl);

  --teal-500: var(--teal-new-62);
  --teal-500-hsl: var(--teal-new-62-hsl);

  --teal-530: var(--teal-new-68);
  --teal-530-hsl: var(--teal-new-68-hsl);

  --teal-560: var(--teal-new-71);
  --teal-560-hsl: var(--teal-new-71-hsl);

  --teal-600: var(--teal-new-75);
  --teal-600-hsl: var(--teal-new-75-hsl);

  --teal-630: var(--teal-new-78);
  --teal-630-hsl: var(--teal-new-78-hsl);

  --teal-660: var(--teal-new-80);
  --teal-660-hsl: var(--teal-new-80-hsl);

  --teal-700: var(--teal-new-83);
  --teal-700-hsl: var(--teal-new-83-hsl);

  --teal-730: var(--teal-new-86);
  --teal-730-hsl: var(--teal-new-86-hsl);

  --teal-760: var(--teal-new-88);
  --teal-760-hsl: var(--teal-new-88-hsl);

  --teal-800: var(--teal-new-91);
  --teal-800-hsl: var(--teal-new-91-hsl);

  --teal-830: var(--teal-new-92);
  --teal-830-hsl: var(--teal-new-92-hsl);

  --teal-860: var(--teal-new-94);
  --teal-860-hsl: var(--teal-new-94-hsl);

  --teal-900: var(--teal-new-95);
  --teal-900-hsl: var(--teal-new-95-hsl);

  --yellow-100: var(--yellow-new-1);
  --yellow-100-hsl: var(--yellow-new-1-hsl);

  --yellow-130: var(--yellow-new-1);
  --yellow-130-hsl: var(--yellow-new-1-hsl);

  --yellow-160: var(--yellow-new-1);
  --yellow-160-hsl: var(--yellow-new-1-hsl);

  --yellow-200: var(--yellow-new-6);
  --yellow-200-hsl: var(--yellow-new-6-hsl);

  --yellow-230: var(--yellow-new-13);
  --yellow-230-hsl: var(--yellow-new-13-hsl);

  --yellow-260: var(--yellow-new-23);
  --yellow-260-hsl: var(--yellow-new-23-hsl);

  --yellow-300: var(--yellow-new-28);
  --yellow-300-hsl: var(--yellow-new-28-hsl);

  --yellow-330: var(--yellow-new-32);
  --yellow-330-hsl: var(--yellow-new-32-hsl);

  --yellow-345: var(--yellow-new-34);
  --yellow-345-hsl: var(--yellow-new-34-hsl);

  --yellow-360: var(--yellow-new-39);
  --yellow-360-hsl: var(--yellow-new-39-hsl);

  --yellow-400: var(--yellow-new-43);
  --yellow-400-hsl: var(--yellow-new-43-hsl);

  --yellow-430: var(--yellow-new-48);
  --yellow-430-hsl: var(--yellow-new-48-hsl);

  --yellow-460: var(--yellow-new-56);
  --yellow-460-hsl: var(--yellow-new-56-hsl);

  --yellow-500: var(--yellow-new-61);
  --yellow-500-hsl: var(--yellow-new-61-hsl);

  --yellow-530: var(--yellow-new-66);
  --yellow-530-hsl: var(--yellow-new-66-hsl);

  --yellow-560: var(--yellow-new-70);
  --yellow-560-hsl: var(--yellow-new-70-hsl);

  --yellow-600: var(--yellow-new-74);
  --yellow-600-hsl: var(--yellow-new-74-hsl);

  --yellow-630: var(--yellow-new-77);
  --yellow-630-hsl: var(--yellow-new-77-hsl);

  --yellow-660: var(--yellow-new-80);
  --yellow-660-hsl: var(--yellow-new-80-hsl);

  --yellow-700: var(--yellow-new-82);
  --yellow-700-hsl: var(--yellow-new-82-hsl);

  --yellow-730: var(--yellow-new-85);
  --yellow-730-hsl: var(--yellow-new-85-hsl);

  --yellow-760: var(--yellow-new-87);
  --yellow-760-hsl: var(--yellow-new-87-hsl);

  --yellow-800: var(--yellow-new-90);
  --yellow-800-hsl: var(--yellow-new-90-hsl);

  --yellow-830: var(--yellow-new-92);
  --yellow-830-hsl: var(--yellow-new-92-hsl);

  --yellow-860: var(--yellow-new-94);
  --yellow-860-hsl: var(--yellow-new-94-hsl);

  --yellow-900: var(--yellow-new-95);
  --yellow-900-hsl: var(--yellow-new-95-hsl);
}

.visual-refresh.theme-dark,
  .visual-refresh .theme-dark {
    --activity-card-background: var(--neutral-66);

    --autocomplete-bg: var(--neutral-66);

    --background-floating: var(--neutral-66);

    --background-mentioned: hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196);

    --background-mentioned-hover: hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902);

    --background-message-highlight: hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902);

    --background-message-highlight-hover: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);

    --background-message-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --background-modifier-accent: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --background-modifier-active: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --background-modifier-hover: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-modifier-selected: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-primary: var(--neutral-69);

    --background-secondary: var(--neutral-72);

    --background-tertiary: var(--neutral-76);

    --bg-base-primary: var(--neutral-69);

    --bg-base-secondary: var(--neutral-72);

    --bg-base-tertiary: var(--neutral-76);

    --bg-brand: var(--blurple-50);

    --bg-mod-faint: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --bg-mod-strong: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --bg-mod-subtle: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --border-faint: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --border-strong: hsl(var(--opacity-44-hsl) / 0.4392156862745098);

    --border-subtle: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-danger-background: var(--red-new-50);

    --button-danger-background-active: var(--red-new-61);

    --button-danger-background-disabled: var(--red-new-50);

    --button-danger-background-hover: var(--red-new-57);

    --button-danger-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-inverted-background-active: var(--neutral-17);

    --button-filled-brand-inverted-background-hover: var(--neutral-9);

    --button-filled-brand-inverted-text: var(--black);

    --button-filled-white-background-active: var(--neutral-17);

    --button-filled-white-background-hover: var(--neutral-9);

    --button-filled-white-text: var(--black);

    --button-outline-danger-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-outline-danger-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-outline-danger-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-outline-danger-border: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-border-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-border-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-text: var(--red-345);

    --button-outline-danger-text-active: var(--red-345);

    --button-outline-danger-text-hover: var(--red-345);

    --button-positive-background: var(--green-new-50);

    --button-positive-background-active: var(--green-new-57);

    --button-positive-background-disabled: var(--green-new-50);

    --button-positive-background-hover: var(--green-new-53);

    --button-positive-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-secondary-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-secondary-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-secondary-background-disabled: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-secondary-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-secondary-text: var(--neutral-6);

    --button-transparent-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-transparent-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-transparent-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-transparent-text: var(--neutral-6);

    --card-secondary-bg: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --channel-icon: var(--neutral-15);

    --channels-default: var(--neutral-22);

    --header-muted: var(--neutral-22);

    --header-primary: var(--neutral-1);

    --header-secondary: var(--neutral-11);

    --icon-muted: var(--neutral-22);

    --icon-primary: var(--neutral-2);

    --icon-secondary: var(--neutral-15);

    --info-danger-background: var(--red-new-75);

    --info-danger-text: var(--red-new-12);

    --info-help-background: var(--blue-new-77);

    --info-help-text: var(--blue-new-16);

    --info-positive-background: var(--green-new-76);

    --info-positive-text: var(--green-new-17);

    --info-warning-background: var(--yellow-new-76);

    --info-warning-text: var(--yellow-new-15);

    --input-background: hsl(var(--opacity-black-8-hsl) / 0.0784313725490196);

    --input-border: hsl(var(--opacity-20-hsl) / 0.2);

    --input-focused-border: hsl(var(--white-hsl) / 0.04);

    --interactive-active: var(--neutral-1);

    --interactive-hover: var(--neutral-15);

    --interactive-normal: var(--neutral-15);

    --mention-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --mention-foreground: var(--blurple-10);

    --message-reacted-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --message-reacted-text: var(--blurple-5);

    --modal-background: var(--neutral-66);

    --modal-footer-background: var(--neutral-66);

    --scrollbar-auto-scrollbar-color-thumb: var(--neutral-38);

    --scrollbar-auto-scrollbar-color-track: var(--neutral-75);

    --scrollbar-auto-thumb: var(--neutral-37);

    --scrollbar-auto-track: hsl(var(--transparent-hsl) / 0);

    --scrollbar-thin-thumb: var(--neutral-39);

    --spine-default: hsl(var(--opacity-44-hsl) / 0.4392156862745098);

    --text-brand: var(--blurple-25);

    --text-link: var(--blue-new-26);

    --text-muted: var(--neutral-22);

    --text-normal: var(--neutral-11);

    --text-positive: var(--green-new-17);

    --text-primary: var(--neutral-1);

    --text-secondary: var(--neutral-15);

    --text-warning: var(--yellow-new-15);

    --app-border-frame: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --background-base-low: var(--neutral-69);

    --background-base-lower: var(--neutral-72);

    --background-base-lowest: var(--neutral-76);

    --background-code: hsl(var(--opacity-blurple-8-hsl) / 0.0784313725490196);

    --background-code-addition: hsl(var(--opacity-green-12-hsl) / 0.12156862745098039);

    --background-code-deletion: hsl(var(--opacity-red-12-hsl) / 0.12156862745098039);

    --background-feedback-critical: var(--red-new-75);

    --background-feedback-info: var(--blue-new-77);

    --background-feedback-positive: var(--green-new-76);

    --background-feedback-warning: var(--yellow-new-76);

    --background-mod-faint: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --background-mod-normal: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --background-mod-strong: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-mod-subtle: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-surface-high: var(--neutral-66);

    --background-surface-higher: var(--neutral-63);

    --background-surface-highest: var(--neutral-60);

    --border-feedback-critical: hsl(var(--opacity-red-20-hsl) / 0.2);

    --border-normal: hsl(var(--opacity-20-hsl) / 0.2);

    --chat-background-default: var(--neutral-69);

    --checkbox-background-checked: var(--blurple-50);

    --checkbox-background-default: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --checkbox-border-checked: var(--blurple-50);

    --checkbox-border-default: var(--neutral-34);

    --icon-default: var(--neutral-2);

    --icon-tertiary: var(--neutral-22);

    --notice-background-critical: var(--red-new-75);

    --notice-background-info: var(--blue-new-77);

    --notice-background-positive: var(--green-new-76);

    --notice-background-warning: var(--yellow-new-76);

    --notice-text-critical: var(--red-new-1);

    --notice-text-info: var(--blue-new-2);

    --notice-text-positive: var(--green-new-3);

    --notice-text-warning: var(--yellow-new-1);

    --text-code-addition: var(--green-new-8);

    --text-code-builtin: var(--orange-new-21);

    --text-code-bullet: var(--yellow-new-22);

    --text-code-comment: var(--neutral-27);

    --text-code-default: var(--blue-new-18);

    --text-code-deletion: var(--red-new-5);

    --text-code-keyword: var(--red-new-20);

    --text-code-section: var(--blue-new-18);

    --text-code-string: var(--teal-new-18);

    --text-code-tag: var(--green-new-24);

    --text-code-title: var(--blurple-12);

    --text-code-variable: var(--blue-new-23);

    --text-default: var(--neutral-11);

    --text-feedback-critical: var(--red-new-12);

    --text-feedback-info: var(--blue-new-16);

    --text-feedback-positive: var(--green-new-17);

    --text-feedback-warning: var(--yellow-new-15);

    --text-tertiary: var(--neutral-22);
  }

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.visual-refresh.theme-dark,
  .visual-refresh .theme-dark {
    --activity-card-background: color-mix(
      in oklab,
      var(--neutral-66) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --autocomplete-bg: color-mix(
      in oklab,
      var(--neutral-66) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-floating: color-mix(
      in oklab,
      var(--neutral-66) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned-hover: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight-hover: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-message-hover: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-accent: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-active: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-hover: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-selected: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-primary: color-mix(
      in oklab,
      var(--neutral-69) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-secondary: color-mix(
      in oklab,
      var(--neutral-72) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-tertiary: color-mix(
      in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-primary: color-mix(
      in oklab,
      var(--neutral-69) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-secondary: color-mix(
      in oklab,
      var(--neutral-72) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-tertiary: color-mix(
      in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --border-faint: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --border-strong: color-mix(
      in oklab,
      hsl(var(--opacity-44-hsl) / 0.4392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4392156862745098) var(--theme-base-color-amount, 0%)
    );
    --border-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --card-secondary-bg: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --channel-icon: color-mix(
      in oklab,
      var(--neutral-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --channels-default: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-muted: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-primary: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-secondary: color-mix(
      in oklab,
      var(--neutral-11) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-muted: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-primary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-secondary: color-mix(
      in oklab,
      var(--neutral-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-danger-background: color-mix(
      in oklab,
      var(--red-new-75) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-danger-text: color-mix(
      in oklab,
      var(--red-new-12) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-help-background: color-mix(
      in oklab,
      var(--blue-new-77) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-help-text: color-mix(
      in oklab,
      var(--blue-new-16) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-positive-background: color-mix(
      in oklab,
      var(--green-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-positive-text: color-mix(
      in oklab,
      var(--green-new-17) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-warning-background: color-mix(
      in oklab,
      var(--yellow-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-warning-text: color-mix(
      in oklab,
      var(--yellow-new-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --input-background: color-mix(
      in oklab,
      hsl(var(--opacity-black-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --input-border: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --input-focused-border: color-mix(
      in oklab,
      hsl(var(--white-hsl) / 0.04) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.04) var(--theme-base-color-amount, 0%)
    );
    --interactive-active: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-hover: color-mix(
      in oklab,
      var(--neutral-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-normal: color-mix(
      in oklab,
      var(--neutral-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --mention-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --mention-foreground: color-mix(
      in oklab,
      var(--blurple-10) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --message-reacted-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --message-reacted-text: color-mix(
      in oklab,
      var(--blurple-5) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --modal-background: color-mix(
      in oklab,
      var(--neutral-66) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --modal-footer-background: color-mix(
      in oklab,
      var(--neutral-66) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-thumb: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-track: color-mix(
      in oklab,
      var(--neutral-75) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-thumb: color-mix(
      in oklab,
      var(--neutral-37) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-track: color-mix(
      in oklab,
      hsl(var(--transparent-hsl) / 0) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-thin-thumb: color-mix(
      in oklab,
      var(--neutral-39) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --spine-default: color-mix(
      in oklab,
      hsl(var(--opacity-44-hsl) / 0.4392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4392156862745098) var(--theme-base-color-amount, 0%)
    );
    --text-brand: color-mix(
      in oklab,
      var(--blurple-25) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-link: color-mix(
      in oklab,
      var(--blue-new-26) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-muted: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-normal: color-mix(
      in oklab,
      var(--neutral-11) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-positive: color-mix(
      in oklab,
      var(--green-new-17) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-primary: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-secondary: color-mix(
      in oklab,
      var(--neutral-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-warning: color-mix(
      in oklab,
      var(--yellow-new-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --app-border-frame: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-base-low: color-mix(
      in oklab,
      var(--neutral-69) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lower: color-mix(
      in oklab,
      var(--neutral-72) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lowest: color-mix(
      in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-code: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-code-addition: color-mix(
      in oklab,
      hsl(var(--opacity-green-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-code-deletion: color-mix(
      in oklab,
      hsl(var(--opacity-red-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-critical: color-mix(
      in oklab,
      var(--red-new-75) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-info: color-mix(
      in oklab,
      var(--blue-new-77) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-positive: color-mix(
      in oklab,
      var(--green-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --background-mod-normal: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-surface-high: color-mix(
      in oklab,
      var(--neutral-66) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-higher: color-mix(
      in oklab,
      var(--neutral-63) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-highest: color-mix(
      in oklab,
      var(--neutral-60) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --border-feedback-critical: color-mix(
      in oklab,
      hsl(var(--opacity-red-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --border-normal: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --chat-background-default: color-mix(
      in oklab,
      var(--neutral-69) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-default: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-default: color-mix(
      in oklab,
      var(--neutral-34) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --icon-default: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-tertiary: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --notice-background-critical: color-mix(
      in oklab,
      var(--red-new-75) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-info: color-mix(
      in oklab,
      var(--blue-new-77) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-positive: color-mix(
      in oklab,
      var(--green-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-warning: color-mix(
      in oklab,
      var(--yellow-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-critical: color-mix(
      in oklab,
      var(--red-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-info: color-mix(
      in oklab,
      var(--blue-new-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-positive: color-mix(
      in oklab,
      var(--green-new-3) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-warning: color-mix(
      in oklab,
      var(--yellow-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --text-code-addition: color-mix(
      in oklab,
      var(--green-new-8) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-builtin: color-mix(
      in oklab,
      var(--orange-new-21) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-bullet: color-mix(
      in oklab,
      var(--yellow-new-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-comment: color-mix(
      in oklab,
      var(--neutral-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-default: color-mix(
      in oklab,
      var(--blue-new-18) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-deletion: color-mix(
      in oklab,
      var(--red-new-5) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-keyword: color-mix(
      in oklab,
      var(--red-new-20) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-section: color-mix(
      in oklab,
      var(--blue-new-18) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-string: color-mix(
      in oklab,
      var(--teal-new-18) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-tag: color-mix(
      in oklab,
      var(--green-new-24) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-title: color-mix(
      in oklab,
      var(--blurple-12) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-variable: color-mix(
      in oklab,
      var(--blue-new-23) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-default: color-mix(
      in oklab,
      var(--neutral-11) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-critical: color-mix(
      in oklab,
      var(--red-new-12) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-info: color-mix(
      in oklab,
      var(--blue-new-16) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-positive: color-mix(
      in oklab,
      var(--green-new-17) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-15) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-tertiary: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
  }
}

.visual-refresh.theme-light,
  .visual-refresh .theme-light {
    --activity-card-background: var(--neutral-1);

    --autocomplete-bg: var(--neutral-1);

    --background-floating: var(--neutral-1);

    --background-mentioned: hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196);

    --background-mentioned-hover: hsl(var(--opacity-yellow-12-hsl) / 0.12156862745098039);

    --background-message-highlight: hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902);

    --background-message-highlight-hover: hsl(var(--opacity-blurple-20-hsl) / 0.2);

    --background-message-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --background-modifier-accent: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --background-modifier-active: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --background-modifier-hover: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-modifier-selected: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-primary: var(--neutral-2);

    --background-secondary: var(--neutral-2);

    --background-tertiary: var(--neutral-4);

    --bg-base-primary: var(--neutral-2);

    --bg-base-secondary: var(--neutral-2);

    --bg-base-tertiary: var(--neutral-4);

    --bg-brand: var(--blurple-50);

    --bg-mod-faint: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --bg-mod-strong: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --bg-mod-subtle: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --border-faint: hsl(var(--opacity-20-hsl) / 0.2);

    --border-strong: hsl(var(--opacity-48-hsl) / 0.47843137254901963);

    --border-subtle: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --button-danger-background: var(--red-new-50);

    --button-danger-background-active: var(--red-new-61);

    --button-danger-background-disabled: var(--red-new-50);

    --button-danger-background-hover: var(--red-new-57);

    --button-danger-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-inverted-background-active: var(--neutral-17);

    --button-filled-brand-inverted-background-hover: var(--neutral-9);

    --button-filled-brand-inverted-text: var(--black);

    --button-filled-white-background-active: var(--neutral-17);

    --button-filled-white-background-hover: var(--neutral-9);

    --button-filled-white-text: var(--black);

    --button-outline-danger-background: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --button-outline-danger-background-active: hsl(var(--primary-400-hsl) / 0.08);

    --button-outline-danger-background-hover: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --button-outline-danger-border: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --button-outline-danger-border-active: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --button-outline-danger-border-hover: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --button-outline-danger-text: var(--red-500);

    --button-outline-danger-text-active: var(--red-500);

    --button-outline-danger-text-hover: var(--red-500);

    --button-positive-background: var(--green-new-50);

    --button-positive-background-active: var(--green-new-57);

    --button-positive-background-disabled: var(--green-new-50);

    --button-positive-background-hover: var(--green-new-53);

    --button-positive-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-secondary-background: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --button-secondary-background-active: hsl(var(--primary-400-hsl) / 0.08);

    --button-secondary-background-disabled: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --button-secondary-background-hover: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --button-secondary-text: var(--neutral-95);

    --button-transparent-background: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --button-transparent-background-active: hsl(var(--primary-400-hsl) / 0.08);

    --button-transparent-background-hover: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --button-transparent-text: var(--neutral-95);

    --card-secondary-bg: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --channel-icon: var(--neutral-44);

    --channels-default: var(--neutral-38);

    --header-muted: var(--neutral-38);

    --header-primary: var(--neutral-71);

    --header-secondary: var(--neutral-67);

    --icon-muted: var(--neutral-38);

    --icon-primary: var(--neutral-59);

    --icon-secondary: var(--neutral-44);

    --info-danger-background: var(--red-new-1);

    --info-danger-text: var(--red-new-66);

    --info-help-background: var(--blue-new-1);

    --info-help-text: var(--blue-new-66);

    --info-positive-background: var(--green-new-1);

    --info-positive-text: var(--green-new-64);

    --info-warning-background: var(--yellow-new-1);

    --info-warning-text: var(--yellow-new-65);

    --input-background: hsl(var(--opacity-black-8-hsl) / 0.0784313725490196);

    --input-border: hsl(var(--opacity-36-hsl) / 0.3607843137254902);

    --input-focused-border: hsl(var(--black-hsl) / 0.04);

    --interactive-active: var(--neutral-71);

    --interactive-hover: var(--neutral-44);

    --interactive-normal: var(--neutral-44);

    --mention-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --mention-foreground: var(--blurple-71);

    --message-reacted-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --message-reacted-text: var(--blurple-75);

    --modal-background: var(--neutral-1);

    --modal-footer-background: var(--neutral-1);

    --scrollbar-auto-scrollbar-color-thumb: var(--neutral-31);

    --scrollbar-auto-scrollbar-color-track: var(--neutral-3);

    --scrollbar-auto-thumb: var(--neutral-30);

    --scrollbar-auto-track: hsl(var(--transparent-hsl) / 0);

    --scrollbar-thin-thumb: var(--neutral-32);

    --spine-default: hsl(var(--opacity-48-hsl) / 0.47843137254901963);

    --text-brand: var(--blurple-49);

    --text-link: var(--blue-new-49);

    --text-muted: var(--neutral-38);

    --text-normal: var(--neutral-67);

    --text-positive: var(--green-new-64);

    --text-primary: var(--neutral-71);

    --text-secondary: var(--neutral-44);

    --text-warning: var(--yellow-new-65);

    --app-border-frame: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --background-base-low: var(--neutral-2);

    --background-base-lower: var(--neutral-2);

    --background-base-lowest: var(--neutral-4);

    --background-code: hsl(var(--opacity-blurple-8-hsl) / 0.0784313725490196);

    --background-code-addition: hsl(var(--opacity-green-12-hsl) / 0.12156862745098039);

    --background-code-deletion: hsl(var(--opacity-red-12-hsl) / 0.12156862745098039);

    --background-feedback-critical: var(--red-new-1);

    --background-feedback-info: var(--blue-new-1);

    --background-feedback-positive: var(--green-new-1);

    --background-feedback-warning: var(--yellow-new-1);

    --background-mod-faint: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --background-mod-normal: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --background-mod-strong: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-mod-subtle: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-surface-high: var(--neutral-1);

    --background-surface-higher: var(--neutral-1);

    --background-surface-highest: var(--neutral-1);

    --border-feedback-critical: hsl(var(--opacity-red-24-hsl) / 0.23921568627450981);

    --border-normal: hsl(var(--opacity-36-hsl) / 0.3607843137254902);

    --chat-background-default: var(--neutral-1);

    --checkbox-background-checked: var(--blurple-50);

    --checkbox-background-default: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --checkbox-border-checked: var(--blurple-50);

    --checkbox-border-default: var(--neutral-29);

    --icon-default: var(--neutral-59);

    --icon-tertiary: var(--neutral-38);

    --notice-background-critical: var(--red-new-1);

    --notice-background-info: var(--blue-new-1);

    --notice-background-positive: var(--green-new-1);

    --notice-background-warning: var(--yellow-new-1);

    --notice-text-critical: var(--red-new-77);

    --notice-text-info: var(--blue-new-76);

    --notice-text-positive: var(--green-new-74);

    --notice-text-warning: var(--yellow-new-76);

    --text-code-addition: var(--green-new-74);

    --text-code-builtin: var(--orange-new-60);

    --text-code-bullet: var(--yellow-new-60);

    --text-code-comment: var(--neutral-41);

    --text-code-default: var(--blue-new-66);

    --text-code-deletion: var(--red-new-73);

    --text-code-keyword: var(--red-new-59);

    --text-code-section: var(--blue-new-66);

    --text-code-string: var(--teal-new-65);

    --text-code-tag: var(--green-new-61);

    --text-code-title: var(--blurple-69);

    --text-code-variable: var(--blue-new-61);

    --text-default: var(--neutral-67);

    --text-feedback-critical: var(--red-new-66);

    --text-feedback-info: var(--blue-new-66);

    --text-feedback-positive: var(--green-new-64);

    --text-feedback-warning: var(--yellow-new-65);

    --text-tertiary: var(--neutral-38);
  }

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.visual-refresh.theme-light,
  .visual-refresh .theme-light {
    --activity-card-background: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --autocomplete-bg: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-floating: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned-hover: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight-hover: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --background-message-hover: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-accent: color-mix(
      in oklab,
      hsl(var(--opacity-28-hsl) / 0.2784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-active: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-hover: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-selected: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-primary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-secondary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-tertiary: color-mix(
      in oklab,
      var(--neutral-4) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-primary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-secondary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-tertiary: color-mix(
      in oklab,
      var(--neutral-4) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --border-faint: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --border-strong: color-mix(
      in oklab,
      hsl(var(--opacity-48-hsl) / 0.47843137254901963) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.47843137254901963) var(--theme-base-color-amount, 0%)
    );
    --border-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-28-hsl) / 0.2784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2784313725490196) var(--theme-base-color-amount, 0%)
    );
    --card-secondary-bg: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --channel-icon: color-mix(
      in oklab,
      var(--neutral-44) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --channels-default: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-muted: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-primary: color-mix(
      in oklab,
      var(--neutral-71) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-secondary: color-mix(
      in oklab,
      var(--neutral-67) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-muted: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-primary: color-mix(
      in oklab,
      var(--neutral-59) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-secondary: color-mix(
      in oklab,
      var(--neutral-44) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-danger-background: color-mix(
      in oklab,
      var(--red-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-danger-text: color-mix(
      in oklab,
      var(--red-new-66) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-help-background: color-mix(
      in oklab,
      var(--blue-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-help-text: color-mix(
      in oklab,
      var(--blue-new-66) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-positive-background: color-mix(
      in oklab,
      var(--green-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-positive-text: color-mix(
      in oklab,
      var(--green-new-64) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-warning-background: color-mix(
      in oklab,
      var(--yellow-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-warning-text: color-mix(
      in oklab,
      var(--yellow-new-65) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --input-background: color-mix(
      in oklab,
      hsl(var(--opacity-black-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --input-border: color-mix(
      in oklab,
      hsl(var(--opacity-36-hsl) / 0.3607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3607843137254902) var(--theme-base-color-amount, 0%)
    );
    --input-focused-border: color-mix(
      in oklab,
      hsl(var(--black-hsl) / 0.04) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.04) var(--theme-base-color-amount, 0%)
    );
    --interactive-active: color-mix(
      in oklab,
      var(--neutral-71) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-hover: color-mix(
      in oklab,
      var(--neutral-44) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-normal: color-mix(
      in oklab,
      var(--neutral-44) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --mention-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --mention-foreground: color-mix(
      in oklab,
      var(--blurple-71) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --message-reacted-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --message-reacted-text: color-mix(
      in oklab,
      var(--blurple-75) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --modal-background: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --modal-footer-background: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-thumb: color-mix(
      in oklab,
      var(--neutral-31) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-track: color-mix(
      in oklab,
      var(--neutral-3) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-thumb: color-mix(
      in oklab,
      var(--neutral-30) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-track: color-mix(
      in oklab,
      hsl(var(--transparent-hsl) / 0) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-thin-thumb: color-mix(
      in oklab,
      var(--neutral-32) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --spine-default: color-mix(
      in oklab,
      hsl(var(--opacity-48-hsl) / 0.47843137254901963) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.47843137254901963) var(--theme-base-color-amount, 0%)
    );
    --text-brand: color-mix(
      in oklab,
      var(--blurple-49) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-link: color-mix(
      in oklab,
      var(--blue-new-49) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-muted: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-normal: color-mix(
      in oklab,
      var(--neutral-67) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-positive: color-mix(
      in oklab,
      var(--green-new-64) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-primary: color-mix(
      in oklab,
      var(--neutral-71) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-secondary: color-mix(
      in oklab,
      var(--neutral-44) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-warning: color-mix(
      in oklab,
      var(--yellow-new-65) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --app-border-frame: color-mix(
      in oklab,
      hsl(var(--opacity-28-hsl) / 0.2784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-base-low: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lower: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lowest: color-mix(
      in oklab,
      var(--neutral-4) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-code: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-code-addition: color-mix(
      in oklab,
      hsl(var(--opacity-green-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-code-deletion: color-mix(
      in oklab,
      hsl(var(--opacity-red-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-critical: color-mix(
      in oklab,
      var(--red-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-info: color-mix(
      in oklab,
      var(--blue-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-positive: color-mix(
      in oklab,
      var(--green-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --background-mod-normal: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-surface-high: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-higher: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-highest: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --border-feedback-critical: color-mix(
      in oklab,
      hsl(var(--opacity-red-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --border-normal: color-mix(
      in oklab,
      hsl(var(--opacity-36-hsl) / 0.3607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3607843137254902) var(--theme-base-color-amount, 0%)
    );
    --chat-background-default: color-mix(
      in oklab,
      var(--neutral-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-default: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-default: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --icon-default: color-mix(
      in oklab,
      var(--neutral-59) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-tertiary: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --notice-background-critical: color-mix(
      in oklab,
      var(--red-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-info: color-mix(
      in oklab,
      var(--blue-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-positive: color-mix(
      in oklab,
      var(--green-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-warning: color-mix(
      in oklab,
      var(--yellow-new-1) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-critical: color-mix(
      in oklab,
      var(--red-new-77) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-info: color-mix(
      in oklab,
      var(--blue-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-positive: color-mix(
      in oklab,
      var(--green-new-74) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-warning: color-mix(
      in oklab,
      var(--yellow-new-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --text-code-addition: color-mix(
      in oklab,
      var(--green-new-74) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-builtin: color-mix(
      in oklab,
      var(--orange-new-60) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-bullet: color-mix(
      in oklab,
      var(--yellow-new-60) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-comment: color-mix(
      in oklab,
      var(--neutral-41) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-default: color-mix(
      in oklab,
      var(--blue-new-66) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-deletion: color-mix(
      in oklab,
      var(--red-new-73) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-keyword: color-mix(
      in oklab,
      var(--red-new-59) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-section: color-mix(
      in oklab,
      var(--blue-new-66) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-string: color-mix(
      in oklab,
      var(--teal-new-65) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-tag: color-mix(
      in oklab,
      var(--green-new-61) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-title: color-mix(
      in oklab,
      var(--blurple-69) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-variable: color-mix(
      in oklab,
      var(--blue-new-61) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-default: color-mix(
      in oklab,
      var(--neutral-67) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-critical: color-mix(
      in oklab,
      var(--red-new-66) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-info: color-mix(
      in oklab,
      var(--blue-new-66) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-positive: color-mix(
      in oklab,
      var(--green-new-64) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-65) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-tertiary: color-mix(
      in oklab,
      var(--neutral-38) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
  }
}

.visual-refresh.theme-midnight,
  .visual-refresh .theme-midnight {
    --activity-card-background: var(--neutral-91);

    --autocomplete-bg: var(--neutral-91);

    --background-floating: var(--neutral-91);

    --background-mentioned: hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196);

    --background-mentioned-hover: hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902);

    --background-message-highlight: hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902);

    --background-message-highlight-hover: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);

    --background-message-hover: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-modifier-accent: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-modifier-active: hsl(var(--opacity-20-hsl) / 0.2);

    --background-modifier-hover: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --background-modifier-selected: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --background-primary: var(--neutral-95);

    --background-secondary: var(--neutral-97);

    --background-tertiary: var(--neutral-100);

    --bg-base-primary: var(--neutral-95);

    --bg-base-secondary: var(--neutral-97);

    --bg-base-tertiary: var(--neutral-100);

    --bg-brand: var(--blurple-50);

    --bg-mod-faint: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --bg-mod-strong: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --bg-mod-subtle: hsl(var(--opacity-20-hsl) / 0.2);

    --border-faint: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --border-strong: hsl(var(--opacity-44-hsl) / 0.4392156862745098);

    --border-subtle: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --button-danger-background: var(--red-new-50);

    --button-danger-background-active: var(--red-new-61);

    --button-danger-background-disabled: var(--red-new-50);

    --button-danger-background-hover: var(--red-new-57);

    --button-danger-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-inverted-background-active: var(--neutral-17);

    --button-filled-brand-inverted-background-hover: var(--neutral-9);

    --button-filled-brand-inverted-text: var(--black);

    --button-filled-white-background-active: var(--neutral-17);

    --button-filled-white-background-hover: var(--neutral-9);

    --button-filled-white-text: var(--black);

    --button-outline-danger-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-outline-danger-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-outline-danger-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-outline-danger-border: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-border-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-border-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-text: var(--red-345);

    --button-outline-danger-text-active: var(--red-345);

    --button-outline-danger-text-hover: var(--red-345);

    --button-positive-background: var(--green-new-50);

    --button-positive-background-active: var(--green-new-57);

    --button-positive-background-disabled: var(--green-new-50);

    --button-positive-background-hover: var(--green-new-53);

    --button-positive-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-secondary-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-secondary-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-secondary-background-disabled: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-secondary-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-secondary-text: var(--neutral-6);

    --button-transparent-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-transparent-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-transparent-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-transparent-text: var(--neutral-6);

    --card-secondary-bg: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --channel-icon: var(--neutral-27);

    --channels-default: var(--neutral-33);

    --header-muted: var(--neutral-33);

    --header-primary: var(--neutral-7);

    --header-secondary: var(--neutral-10);

    --icon-muted: var(--neutral-33);

    --icon-primary: var(--neutral-14);

    --icon-secondary: var(--neutral-27);

    --info-danger-background: var(--red-new-94);

    --info-danger-text: var(--red-new-29);

    --info-help-background: var(--blue-new-94);

    --info-help-text: var(--blue-new-31);

    --info-positive-background: var(--green-new-94);

    --info-positive-text: var(--green-new-32);

    --info-warning-background: var(--yellow-new-94);

    --info-warning-text: var(--yellow-new-30);

    --input-background: hsl(var(--opacity-black-8-hsl) / 0.0784313725490196);

    --input-border: hsl(var(--opacity-32-hsl) / 0.3215686274509804);

    --interactive-active: var(--neutral-7);

    --interactive-hover: var(--neutral-27);

    --interactive-normal: var(--neutral-27);

    --mention-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --mention-foreground: var(--blurple-26);

    --message-reacted-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --message-reacted-text: var(--blurple-21);

    --modal-background: var(--neutral-91);

    --modal-footer-background: var(--neutral-91);

    --scrollbar-auto-scrollbar-color-thumb: var(--neutral-45);

    --scrollbar-auto-scrollbar-color-track: var(--neutral-98);

    --scrollbar-auto-thumb: var(--neutral-45);

    --scrollbar-auto-track: hsl(var(--transparent-hsl) / 0);

    --scrollbar-thin-thumb: var(--neutral-46);

    --spine-default: hsl(var(--opacity-44-hsl) / 0.4392156862745098);

    --text-brand: var(--blurple-41);

    --text-link: var(--blue-new-42);

    --text-muted: var(--neutral-33);

    --text-normal: var(--neutral-10);

    --text-positive: var(--green-new-32);

    --text-primary: var(--neutral-7);

    --text-secondary: var(--neutral-27);

    --text-warning: var(--yellow-new-30);

    --app-border-frame: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-base-low: var(--neutral-95);

    --background-base-lower: var(--neutral-97);

    --background-base-lowest: var(--neutral-100);

    --background-code: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);

    --background-code-addition: hsl(var(--opacity-green-12-hsl) / 0.12156862745098039);

    --background-code-deletion: hsl(var(--opacity-red-12-hsl) / 0.12156862745098039);

    --background-feedback-critical: var(--red-new-94);

    --background-feedback-info: var(--blue-new-94);

    --background-feedback-positive: var(--green-new-94);

    --background-feedback-warning: var(--yellow-new-94);

    --background-mod-faint: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-mod-normal: hsl(var(--opacity-20-hsl) / 0.2);

    --background-mod-strong: hsl(var(--opacity-28-hsl) / 0.2784313725490196);

    --background-mod-subtle: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --background-surface-high: var(--neutral-91);

    --background-surface-higher: var(--neutral-87);

    --background-surface-highest: var(--neutral-83);

    --border-feedback-critical: hsl(var(--opacity-red-24-hsl) / 0.23921568627450981);

    --border-normal: hsl(var(--opacity-32-hsl) / 0.3215686274509804);

    --chat-background-default: var(--neutral-92);

    --checkbox-background-checked: var(--blurple-50);

    --checkbox-background-default: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --checkbox-border-checked: var(--blurple-50);

    --checkbox-border-default: var(--neutral-43);

    --icon-default: var(--neutral-14);

    --icon-tertiary: var(--neutral-33);

    --notice-background-critical: var(--red-new-94);

    --notice-background-info: var(--blue-new-94);

    --notice-background-positive: var(--green-new-94);

    --notice-background-warning: var(--yellow-new-94);

    --notice-text-critical: var(--red-new-17);

    --notice-text-info: var(--blue-new-19);

    --notice-text-positive: var(--green-new-20);

    --notice-text-warning: var(--yellow-new-18);

    --text-code-addition: var(--green-new-23);

    --text-code-builtin: var(--orange-new-34);

    --text-code-bullet: var(--yellow-new-35);

    --text-code-comment: var(--neutral-35);

    --text-code-default: var(--blue-new-31);

    --text-code-deletion: var(--red-new-20);

    --text-code-keyword: var(--red-new-33);

    --text-code-section: var(--blue-new-31);

    --text-code-string: var(--teal-new-31);

    --text-code-tag: var(--green-new-36);

    --text-code-title: var(--blurple-26);

    --text-code-variable: var(--blue-new-36);

    --text-default: var(--neutral-10);

    --text-feedback-critical: var(--red-new-29);

    --text-feedback-info: var(--blue-new-31);

    --text-feedback-positive: var(--green-new-32);

    --text-feedback-warning: var(--yellow-new-30);

    --text-tertiary: var(--neutral-33);
  }

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.visual-refresh.theme-midnight,
  .visual-refresh .theme-midnight {
    --activity-card-background: color-mix(
      in oklab,
      var(--neutral-91) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --autocomplete-bg: color-mix(
      in oklab,
      var(--neutral-91) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-floating: color-mix(
      in oklab,
      var(--neutral-91) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned-hover: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight-hover: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-message-hover: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-accent: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-active: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-hover: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-selected: color-mix(
      in oklab,
      hsl(var(--opacity-28-hsl) / 0.2784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-primary: color-mix(
      in oklab,
      var(--neutral-95) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-secondary: color-mix(
      in oklab,
      var(--neutral-97) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-tertiary: color-mix(
      in oklab,
      var(--neutral-100) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-primary: color-mix(
      in oklab,
      var(--neutral-95) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-secondary: color-mix(
      in oklab,
      var(--neutral-97) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-tertiary: color-mix(
      in oklab,
      var(--neutral-100) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-28-hsl) / 0.2784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2784313725490196) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --border-faint: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --border-strong: color-mix(
      in oklab,
      hsl(var(--opacity-44-hsl) / 0.4392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4392156862745098) var(--theme-base-color-amount, 0%)
    );
    --border-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --card-secondary-bg: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --channel-icon: color-mix(
      in oklab,
      var(--neutral-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --channels-default: color-mix(
      in oklab,
      var(--neutral-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-muted: color-mix(
      in oklab,
      var(--neutral-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-primary: color-mix(
      in oklab,
      var(--neutral-7) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-secondary: color-mix(
      in oklab,
      var(--neutral-10) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-muted: color-mix(
      in oklab,
      var(--neutral-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-primary: color-mix(
      in oklab,
      var(--neutral-14) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-secondary: color-mix(
      in oklab,
      var(--neutral-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-danger-background: color-mix(
      in oklab,
      var(--red-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-danger-text: color-mix(
      in oklab,
      var(--red-new-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-help-background: color-mix(
      in oklab,
      var(--blue-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-help-text: color-mix(
      in oklab,
      var(--blue-new-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-positive-background: color-mix(
      in oklab,
      var(--green-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-positive-text: color-mix(
      in oklab,
      var(--green-new-32) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-warning-background: color-mix(
      in oklab,
      var(--yellow-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-warning-text: color-mix(
      in oklab,
      var(--yellow-new-30) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --input-background: color-mix(
      in oklab,
      hsl(var(--opacity-black-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --input-border: color-mix(
      in oklab,
      hsl(var(--opacity-32-hsl) / 0.3215686274509804) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3215686274509804) var(--theme-base-color-amount, 0%)
    );
    --interactive-active: color-mix(
      in oklab,
      var(--neutral-7) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-hover: color-mix(
      in oklab,
      var(--neutral-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-normal: color-mix(
      in oklab,
      var(--neutral-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --mention-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --mention-foreground: color-mix(
      in oklab,
      var(--blurple-26) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --message-reacted-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --message-reacted-text: color-mix(
      in oklab,
      var(--blurple-21) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --modal-background: color-mix(
      in oklab,
      var(--neutral-91) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --modal-footer-background: color-mix(
      in oklab,
      var(--neutral-91) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-thumb: color-mix(
      in oklab,
      var(--neutral-45) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-track: color-mix(
      in oklab,
      var(--neutral-98) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-thumb: color-mix(
      in oklab,
      var(--neutral-45) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-track: color-mix(
      in oklab,
      hsl(var(--transparent-hsl) / 0) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-thin-thumb: color-mix(
      in oklab,
      var(--neutral-46) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --spine-default: color-mix(
      in oklab,
      hsl(var(--opacity-44-hsl) / 0.4392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4392156862745098) var(--theme-base-color-amount, 0%)
    );
    --text-brand: color-mix(
      in oklab,
      var(--blurple-41) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-link: color-mix(
      in oklab,
      var(--blue-new-42) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-muted: color-mix(
      in oklab,
      var(--neutral-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-normal: color-mix(
      in oklab,
      var(--neutral-10) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-positive: color-mix(
      in oklab,
      var(--green-new-32) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-primary: color-mix(
      in oklab,
      var(--neutral-7) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-secondary: color-mix(
      in oklab,
      var(--neutral-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-warning: color-mix(
      in oklab,
      var(--yellow-new-30) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --app-border-frame: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-base-low: color-mix(
      in oklab,
      var(--neutral-95) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lower: color-mix(
      in oklab,
      var(--neutral-97) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lowest: color-mix(
      in oklab,
      var(--neutral-100) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-code: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-code-addition: color-mix(
      in oklab,
      hsl(var(--opacity-green-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-code-deletion: color-mix(
      in oklab,
      hsl(var(--opacity-red-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-critical: color-mix(
      in oklab,
      var(--red-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-info: color-mix(
      in oklab,
      var(--blue-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-positive: color-mix(
      in oklab,
      var(--green-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-mod-normal: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --background-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-28-hsl) / 0.2784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-surface-high: color-mix(
      in oklab,
      var(--neutral-91) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-higher: color-mix(
      in oklab,
      var(--neutral-87) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-highest: color-mix(
      in oklab,
      var(--neutral-83) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --border-feedback-critical: color-mix(
      in oklab,
      hsl(var(--opacity-red-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --border-normal: color-mix(
      in oklab,
      hsl(var(--opacity-32-hsl) / 0.3215686274509804) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3215686274509804) var(--theme-base-color-amount, 0%)
    );
    --chat-background-default: color-mix(
      in oklab,
      var(--neutral-92) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-default: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-default: color-mix(
      in oklab,
      var(--neutral-43) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --icon-default: color-mix(
      in oklab,
      var(--neutral-14) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-tertiary: color-mix(
      in oklab,
      var(--neutral-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --notice-background-critical: color-mix(
      in oklab,
      var(--red-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-info: color-mix(
      in oklab,
      var(--blue-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-positive: color-mix(
      in oklab,
      var(--green-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-warning: color-mix(
      in oklab,
      var(--yellow-new-94) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-critical: color-mix(
      in oklab,
      var(--red-new-17) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-info: color-mix(
      in oklab,
      var(--blue-new-19) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-positive: color-mix(
      in oklab,
      var(--green-new-20) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-warning: color-mix(
      in oklab,
      var(--yellow-new-18) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --text-code-addition: color-mix(
      in oklab,
      var(--green-new-23) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-builtin: color-mix(
      in oklab,
      var(--orange-new-34) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-bullet: color-mix(
      in oklab,
      var(--yellow-new-35) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-comment: color-mix(
      in oklab,
      var(--neutral-35) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-default: color-mix(
      in oklab,
      var(--blue-new-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-deletion: color-mix(
      in oklab,
      var(--red-new-20) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-keyword: color-mix(
      in oklab,
      var(--red-new-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-section: color-mix(
      in oklab,
      var(--blue-new-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-string: color-mix(
      in oklab,
      var(--teal-new-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-tag: color-mix(
      in oklab,
      var(--green-new-36) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-title: color-mix(
      in oklab,
      var(--blurple-26) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-variable: color-mix(
      in oklab,
      var(--blue-new-36) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-default: color-mix(
      in oklab,
      var(--neutral-10) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-critical: color-mix(
      in oklab,
      var(--red-new-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-info: color-mix(
      in oklab,
      var(--blue-new-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-positive: color-mix(
      in oklab,
      var(--green-new-32) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-30) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-tertiary: color-mix(
      in oklab,
      var(--neutral-33) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
  }
}

.visual-refresh.theme-darker,
  .visual-refresh .theme-darker {
    --activity-card-background: var(--neutral-79);

    --autocomplete-bg: var(--neutral-79);

    --background-floating: var(--neutral-79);

    --background-mentioned: hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196);

    --background-mentioned-hover: hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902);

    --background-message-highlight: hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902);

    --background-message-highlight-hover: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);

    --background-message-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --background-modifier-accent: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --background-modifier-active: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --background-modifier-hover: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-modifier-selected: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-primary: var(--neutral-82);

    --background-secondary: var(--neutral-86);

    --background-tertiary: var(--neutral-92);

    --bg-base-primary: var(--neutral-82);

    --bg-base-secondary: var(--neutral-86);

    --bg-base-tertiary: var(--neutral-92);

    --bg-brand: var(--blurple-50);

    --bg-mod-faint: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --bg-mod-strong: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --bg-mod-subtle: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --border-faint: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --border-strong: hsl(var(--opacity-44-hsl) / 0.4392156862745098);

    --border-subtle: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-danger-background: var(--red-new-50);

    --button-danger-background-active: var(--red-new-61);

    --button-danger-background-disabled: var(--red-new-50);

    --button-danger-background-hover: var(--red-new-57);

    --button-danger-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-filled-brand-inverted-background-active: var(--neutral-17);

    --button-filled-brand-inverted-background-hover: var(--neutral-9);

    --button-filled-brand-inverted-text: var(--black);

    --button-filled-white-background-active: var(--neutral-17);

    --button-filled-white-background-hover: var(--neutral-9);

    --button-filled-white-text: var(--black);

    --button-outline-danger-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-outline-danger-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-outline-danger-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-outline-danger-border: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-border-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-border-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --button-outline-danger-text: var(--red-345);

    --button-outline-danger-text-active: var(--red-345);

    --button-outline-danger-text-hover: var(--red-345);

    --button-positive-background: var(--green-new-50);

    --button-positive-background-active: var(--green-new-57);

    --button-positive-background-disabled: var(--green-new-50);

    --button-positive-background-hover: var(--green-new-53);

    --button-positive-border: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);

    --button-secondary-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-secondary-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-secondary-background-disabled: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-secondary-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-secondary-text: var(--neutral-6);

    --button-transparent-background: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --button-transparent-background-active: hsl(var(--primary-500-hsl) / 0.3);

    --button-transparent-background-hover: hsl(var(--opacity-20-hsl) / 0.2);

    --button-transparent-text: var(--neutral-6);

    --card-secondary-bg: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --channel-icon: var(--neutral-22);

    --channels-default: var(--neutral-29);

    --header-muted: var(--neutral-29);

    --header-primary: var(--neutral-2);

    --header-secondary: var(--neutral-5);

    --icon-muted: var(--neutral-29);

    --icon-primary: var(--neutral-10);

    --icon-secondary: var(--neutral-22);

    --info-danger-background: var(--red-new-85);

    --info-danger-text: var(--red-new-23);

    --info-help-background: var(--blue-new-86);

    --info-help-text: var(--blue-new-26);

    --info-positive-background: var(--green-new-86);

    --info-positive-text: var(--green-new-27);

    --info-warning-background: var(--yellow-new-85);

    --info-warning-text: var(--yellow-new-24);

    --input-background: hsl(var(--opacity-black-8-hsl) / 0.0784313725490196);

    --input-border: hsl(var(--opacity-20-hsl) / 0.2);

    --interactive-active: var(--neutral-2);

    --interactive-hover: var(--neutral-22);

    --interactive-normal: var(--neutral-22);

    --mention-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --mention-foreground: var(--blurple-19);

    --message-reacted-background: hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981);

    --message-reacted-text: var(--blurple-14);

    --modal-background: var(--neutral-79);

    --modal-footer-background: var(--neutral-79);

    --scrollbar-auto-scrollbar-color-thumb: var(--neutral-43);

    --scrollbar-auto-scrollbar-color-track: var(--neutral-90);

    --scrollbar-auto-thumb: var(--neutral-42);

    --scrollbar-auto-track: hsl(var(--transparent-hsl) / 0);

    --scrollbar-thin-thumb: var(--neutral-44);

    --spine-default: hsl(var(--opacity-44-hsl) / 0.4392156862745098);

    --text-brand: var(--blurple-35);

    --text-link: var(--blue-new-36);

    --text-muted: var(--neutral-29);

    --text-normal: var(--neutral-5);

    --text-positive: var(--green-new-27);

    --text-primary: var(--neutral-2);

    --text-secondary: var(--neutral-22);

    --text-warning: var(--yellow-new-24);

    --app-border-frame: hsl(var(--opacity-12-hsl) / 0.12156862745098039);

    --background-base-low: var(--neutral-82);

    --background-base-lower: var(--neutral-86);

    --background-base-lowest: var(--neutral-92);

    --background-code: hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039);

    --background-code-addition: hsl(var(--opacity-green-12-hsl) / 0.12156862745098039);

    --background-code-deletion: hsl(var(--opacity-red-12-hsl) / 0.12156862745098039);

    --background-feedback-critical: var(--red-new-85);

    --background-feedback-info: var(--blue-new-86);

    --background-feedback-positive: var(--green-new-86);

    --background-feedback-warning: var(--yellow-new-85);

    --background-mod-faint: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --background-mod-normal: hsl(var(--opacity-16-hsl) / 0.1607843137254902);

    --background-mod-strong: hsl(var(--opacity-24-hsl) / 0.23921568627450981);

    --background-mod-subtle: hsl(var(--opacity-8-hsl) / 0.0784313725490196);

    --background-surface-high: var(--neutral-79);

    --background-surface-higher: var(--neutral-76);

    --background-surface-highest: var(--neutral-73);

    --border-feedback-critical: hsl(var(--opacity-red-20-hsl) / 0.2);

    --border-normal: hsl(var(--opacity-20-hsl) / 0.2);

    --chat-background-default: var(--neutral-81);

    --checkbox-background-checked: var(--blurple-50);

    --checkbox-background-default: hsl(var(--opacity-4-hsl) / 0.0392156862745098);

    --checkbox-border-checked: var(--blurple-50);

    --checkbox-border-default: var(--neutral-40);

    --icon-default: var(--neutral-10);

    --icon-tertiary: var(--neutral-29);

    --notice-background-critical: var(--red-new-85);

    --notice-background-info: var(--blue-new-86);

    --notice-background-positive: var(--green-new-86);

    --notice-background-warning: var(--yellow-new-85);

    --notice-text-critical: var(--red-new-9);

    --notice-text-info: var(--blue-new-13);

    --notice-text-positive: var(--green-new-14);

    --notice-text-warning: var(--yellow-new-12);

    --text-code-addition: var(--green-new-17);

    --text-code-builtin: var(--orange-new-28);

    --text-code-bullet: var(--yellow-new-29);

    --text-code-comment: var(--neutral-31);

    --text-code-default: var(--blue-new-25);

    --text-code-deletion: var(--red-new-14);

    --text-code-keyword: var(--red-new-27);

    --text-code-section: var(--blue-new-25);

    --text-code-string: var(--teal-new-25);

    --text-code-tag: var(--green-new-31);

    --text-code-title: var(--blurple-19);

    --text-code-variable: var(--blue-new-30);

    --text-default: var(--neutral-5);

    --text-feedback-critical: var(--red-new-23);

    --text-feedback-info: var(--blue-new-26);

    --text-feedback-positive: var(--green-new-27);

    --text-feedback-warning: var(--yellow-new-24);

    --text-tertiary: var(--neutral-29);
  }

@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
.visual-refresh.theme-darker,
  .visual-refresh .theme-darker {
    --activity-card-background: color-mix(
      in oklab,
      var(--neutral-79) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --autocomplete-bg: color-mix(
      in oklab,
      var(--neutral-79) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-floating: color-mix(
      in oklab,
      var(--neutral-79) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-mentioned-hover: color-mix(
      in oklab,
      hsl(var(--opacity-yellow-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-message-highlight-hover: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-message-hover: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-accent: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-active: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-hover: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-modifier-selected: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-primary: color-mix(
      in oklab,
      var(--neutral-82) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-secondary: color-mix(
      in oklab,
      var(--neutral-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-tertiary: color-mix(
      in oklab,
      var(--neutral-92) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-primary: color-mix(
      in oklab,
      var(--neutral-82) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-secondary: color-mix(
      in oklab,
      var(--neutral-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-base-tertiary: color-mix(
      in oklab,
      var(--neutral-92) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --bg-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --border-faint: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --border-strong: color-mix(
      in oklab,
      hsl(var(--opacity-44-hsl) / 0.4392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4392156862745098) var(--theme-base-color-amount, 0%)
    );
    --border-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --card-secondary-bg: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --channel-icon: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --channels-default: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-muted: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-primary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --header-secondary: color-mix(
      in oklab,
      var(--neutral-5) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-muted: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-primary: color-mix(
      in oklab,
      var(--neutral-10) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-secondary: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-danger-background: color-mix(
      in oklab,
      var(--red-new-85) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-danger-text: color-mix(
      in oklab,
      var(--red-new-23) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-help-background: color-mix(
      in oklab,
      var(--blue-new-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-help-text: color-mix(
      in oklab,
      var(--blue-new-26) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-positive-background: color-mix(
      in oklab,
      var(--green-new-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-positive-text: color-mix(
      in oklab,
      var(--green-new-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --info-warning-background: color-mix(
      in oklab,
      var(--yellow-new-85) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --info-warning-text: color-mix(
      in oklab,
      var(--yellow-new-24) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --input-background: color-mix(
      in oklab,
      hsl(var(--opacity-black-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --input-border: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --interactive-active: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-hover: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --interactive-normal: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --mention-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --mention-foreground: color-mix(
      in oklab,
      var(--blurple-19) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --message-reacted-background: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --message-reacted-text: color-mix(
      in oklab,
      var(--blurple-14) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --modal-background: color-mix(
      in oklab,
      var(--neutral-79) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --modal-footer-background: color-mix(
      in oklab,
      var(--neutral-79) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-thumb: color-mix(
      in oklab,
      var(--neutral-43) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-scrollbar-color-track: color-mix(
      in oklab,
      var(--neutral-90) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-thumb: color-mix(
      in oklab,
      var(--neutral-42) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-auto-track: color-mix(
      in oklab,
      hsl(var(--transparent-hsl) / 0) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%)
    );
    --scrollbar-thin-thumb: color-mix(
      in oklab,
      var(--neutral-44) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --spine-default: color-mix(
      in oklab,
      hsl(var(--opacity-44-hsl) / 0.4392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4392156862745098) var(--theme-base-color-amount, 0%)
    );
    --text-brand: color-mix(
      in oklab,
      var(--blurple-35) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-link: color-mix(
      in oklab,
      var(--blue-new-36) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-muted: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-normal: color-mix(
      in oklab,
      var(--neutral-5) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-positive: color-mix(
      in oklab,
      var(--green-new-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-primary: color-mix(
      in oklab,
      var(--neutral-2) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-secondary: color-mix(
      in oklab,
      var(--neutral-22) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-warning: color-mix(
      in oklab,
      var(--yellow-new-24) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --app-border-frame: color-mix(
      in oklab,
      hsl(var(--opacity-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-base-low: color-mix(
      in oklab,
      var(--neutral-82) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lower: color-mix(
      in oklab,
      var(--neutral-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-base-lowest: color-mix(
      in oklab,
      var(--neutral-92) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-code: color-mix(
      in oklab,
      hsl(var(--opacity-blurple-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-code-addition: color-mix(
      in oklab,
      hsl(var(--opacity-green-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-code-deletion: color-mix(
      in oklab,
      hsl(var(--opacity-red-12-hsl) / 0.12156862745098039) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.12156862745098039) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-critical: color-mix(
      in oklab,
      var(--red-new-85) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-info: color-mix(
      in oklab,
      var(--blue-new-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-positive: color-mix(
      in oklab,
      var(--green-new-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-85) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-mod-faint: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --background-mod-normal: color-mix(
      in oklab,
      hsl(var(--opacity-16-hsl) / 0.1607843137254902) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.1607843137254902) var(--theme-base-color-amount, 0%)
    );
    --background-mod-strong: color-mix(
      in oklab,
      hsl(var(--opacity-24-hsl) / 0.23921568627450981) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.23921568627450981) var(--theme-base-color-amount, 0%)
    );
    --background-mod-subtle: color-mix(
      in oklab,
      hsl(var(--opacity-8-hsl) / 0.0784313725490196) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0784313725490196) var(--theme-base-color-amount, 0%)
    );
    --background-surface-high: color-mix(
      in oklab,
      var(--neutral-79) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-higher: color-mix(
      in oklab,
      var(--neutral-76) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --background-surface-highest: color-mix(
      in oklab,
      var(--neutral-73) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --border-feedback-critical: color-mix(
      in oklab,
      hsl(var(--opacity-red-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --border-normal: color-mix(
      in oklab,
      hsl(var(--opacity-20-hsl) / 0.2) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.2) var(--theme-base-color-amount, 0%)
    );
    --chat-background-default: color-mix(
      in oklab,
      var(--neutral-81) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-background-default: color-mix(
      in oklab,
      hsl(var(--opacity-4-hsl) / 0.0392156862745098) 100%,
      hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.0392156862745098) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-checked: color-mix(
      in oklab,
      var(--blurple-50) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --checkbox-border-default: color-mix(
      in oklab,
      var(--neutral-40) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --icon-default: color-mix(
      in oklab,
      var(--neutral-10) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --icon-tertiary: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --notice-background-critical: color-mix(
      in oklab,
      var(--red-new-85) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-info: color-mix(
      in oklab,
      var(--blue-new-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-positive: color-mix(
      in oklab,
      var(--green-new-86) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-background-warning: color-mix(
      in oklab,
      var(--yellow-new-85) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-critical: color-mix(
      in oklab,
      var(--red-new-9) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-info: color-mix(
      in oklab,
      var(--blue-new-13) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-positive: color-mix(
      in oklab,
      var(--green-new-14) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --notice-text-warning: color-mix(
      in oklab,
      var(--yellow-new-12) 100%,
      var(--theme-base-color, black) var(--theme-base-color-amount, 0%)
    );
    --text-code-addition: color-mix(
      in oklab,
      var(--green-new-17) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-builtin: color-mix(
      in oklab,
      var(--orange-new-28) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-bullet: color-mix(
      in oklab,
      var(--yellow-new-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-comment: color-mix(
      in oklab,
      var(--neutral-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-default: color-mix(
      in oklab,
      var(--blue-new-25) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-deletion: color-mix(
      in oklab,
      var(--red-new-14) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-keyword: color-mix(
      in oklab,
      var(--red-new-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-section: color-mix(
      in oklab,
      var(--blue-new-25) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-string: color-mix(
      in oklab,
      var(--teal-new-25) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-tag: color-mix(
      in oklab,
      var(--green-new-31) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-title: color-mix(
      in oklab,
      var(--blurple-19) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-code-variable: color-mix(
      in oklab,
      var(--blue-new-30) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-default: color-mix(
      in oklab,
      var(--neutral-5) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-critical: color-mix(
      in oklab,
      var(--red-new-23) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-info: color-mix(
      in oklab,
      var(--blue-new-26) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-positive: color-mix(
      in oklab,
      var(--green-new-27) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-feedback-warning: color-mix(
      in oklab,
      var(--yellow-new-24) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
    --text-tertiary: color-mix(
      in oklab,
      var(--neutral-29) 100%,
      var(--theme-text-color, black) var(--theme-text-color-amount, 0%)
    );
  }
}

/* stylelint-disable discord/var-validator */

.theme-dark {
  --shadow-border: 0 0 0 1px hsl(none 0% 100% / 0.08);
  --shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100% / 0.08));
  --shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-high: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-ledge: 0 2px 0 0 hsl(none 0% 0% / 0.05), 0 1.5px 0 0 hsl(none 0% 0% / 0.05), 0 1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0% / 0.24));
  --shadow-low: 0 1px 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0% / 0.14));
  --shadow-low-active: 0 0 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0% / 0.14));
  --shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0% / 0.14));
  --shadow-medium: 0 4px 8px 0 hsl(none 0% 0% / 0.16);
  --shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0% / 0.16));
  --shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0% / 0.22);
  --shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0% / 0.22));
  --shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0% / 0.24);
  --shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0% / 0.24));
  --shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0% / 0.05), 0 -1.5px 0 0 hsl(none 0% 0% / 0.05),
    0 -1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0% / 0.24));
  --shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0% / 0.14));
}

.theme-light {
  --shadow-border: 0 0 0 1px hsl(none 0% 0% / 0.08);
  --shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 0% / 0.08));
  --shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-high: 0 12px 36px 0 hsl(none 0% 0% / 0.12);
  --shadow-high-filter: drop-shadow(0 12px 36px hsl(none 0% 0% / 0.12));
  --shadow-ledge: 0 2px 0 0 hsl(none 0% 0% / 0.03), 0 1.5px 0 0 hsl(none 0% 0% / 0.03), 0 1px 0 0 hsl(none 0% 0% / 0.08);
  --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0% / 0.12));
  --shadow-low: 0 1px 4px 0 hsl(none 0% 0% / 0.08);
  --shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0% / 0.08));
  --shadow-low-active: 0 0 4px 0 hsl(none 0% 0% / 0.08);
  --shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0% / 0.08));
  --shadow-low-hover: 0 4px 8px 0 hsl(none 0% 0% / 0.08);
  --shadow-low-hover-filter: drop-shadow(0 4px 8px hsl(none 0% 0% / 0.08));
  --shadow-medium: 0 4px 8px 0 hsl(none 0% 0% / 0.08);
  --shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0% / 0.08));
  --shadow-mobile-navigator-x: 0 0 9px 0 hsl(none 0% 0% / 0.13);
  --shadow-mobile-navigator-x-filter: drop-shadow(0 0 9px hsl(none 0% 0% / 0.13));
  --shadow-top-high: 0 -12px 36px 0 hsl(none 0% 0% / 0.12);
  --shadow-top-high-filter: drop-shadow(0 -12px 36px hsl(none 0% 0% / 0.12));
  --shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0% / 0.03), 0 -1.5px 0 0 hsl(none 0% 0% / 0.03),
    0 -1px 0 0 hsl(none 0% 0% / 0.08);
  --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0% / 0.12));
  --shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0% / 0.08);
  --shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0% / 0.08));
}

.theme-midnight {
  --shadow-border: 0 0 0 1px hsl(none 0% 100% / 0.08);
  --shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100% / 0.08));
  --shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-high: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-ledge: 0 2px 0 0 hsl(none 0% 0% / 0.05), 0 1.5px 0 0 hsl(none 0% 0% / 0.05), 0 1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0% / 0.24));
  --shadow-low: 0 1px 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0% / 0.14));
  --shadow-low-active: 0 0 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0% / 0.14));
  --shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0% / 0.14));
  --shadow-medium: 0 4px 8px 0 hsl(none 0% 0% / 0.16);
  --shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0% / 0.16));
  --shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0% / 0.22);
  --shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0% / 0.22));
  --shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0% / 0.24);
  --shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0% / 0.24));
  --shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0% / 0.05), 0 -1.5px 0 0 hsl(none 0% 0% / 0.05),
    0 -1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0% / 0.24));
  --shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0% / 0.14));
}

.theme-darker {
  --shadow-border: 0 0 0 1px hsl(none 0% 100% / 0.08);
  --shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100% / 0.08));
  --shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-high: 0 12px 24px 0 hsl(none 0% 0% / 0.24);
  --shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0% / 0.24));
  --shadow-ledge: 0 2px 0 0 hsl(none 0% 0% / 0.05), 0 1.5px 0 0 hsl(none 0% 0% / 0.05), 0 1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0% / 0.24));
  --shadow-low: 0 1px 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0% / 0.14));
  --shadow-low-active: 0 0 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0% / 0.14));
  --shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0% / 0.14);
  --shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0% / 0.14));
  --shadow-medium: 0 4px 8px 0 hsl(none 0% 0% / 0.16);
  --shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0% / 0.16));
  --shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0% / 0.22);
  --shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0% / 0.22));
  --shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0% / 0.24);
  --shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0% / 0.24));
  --shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0% / 0.05), 0 -1.5px 0 0 hsl(none 0% 0% / 0.05),
    0 -1px 0 0 hsl(none 0% 0% / 0.16);
  --shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0% / 0.24));
  --shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0% / 0.14);
  --shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0% / 0.14));
}

/* stylelint-enable discord/var-validator */

/* stylelint-disable discord/var-validator */

:root {
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
}

/* stylelint-enable discord/var-validator */

/* stylelint-disable discord/var-validator */

:root {
  --size-0: 0px;
  --size-4: 4px;
  --size-8: 8px;
  --size-12: 12px;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-32: 32px;
  --size-48: 48px;
  --size-64: 64px;
  --size-80: 80px;
  --size-96: 96px;
  --size-128: 128px;
  --size-160: 160px;
  --size-192: 192px;
  --size-xxs: var(--size-4);
  --size-xs: var(--size-8);
  --size-sm: var(--size-12);
  --size-md: var(--size-16);
  --size-lg: var(--size-20);
  --size-xl: var(--size-24);
  --size-xxl: var(--size-32);

  --breakpoint-480: 480px;
  --breakpoint-640: 640px;
  --breakpoint-768: 768px;
  --breakpoint-1024: 1024px;
  --breakpoint-1280: 1280px;
  --breakpoint-1536: 1536px;
  --breakpoint-1800: 1800px;
  --breakpoint-2500: 2500px;
  --breakpoint-xxs: 480px;
  --breakpoint-xs: 640px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1536px;
  --breakpoint-xxl: 1800px;
  --breakpoint-max: 2500px;

  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --space-192: 192px;
  /* tshirt scale defaults from variant: compact */
  --space-xxs: var(--space-4);
  --space-xs: var(--space-8);
  --space-sm: var(--space-12);
  --space-md: var(--space-16);
  --space-lg: var(--space-20);
  --space-xl: var(--space-24);
  --space-xxl: var(--space-32);
}

.density-compact {
  --space-xxs: var(--space-4);
  --space-xs: var(--space-8);
  --space-sm: var(--space-12);
  --space-md: var(--space-16);
  --space-lg: var(--space-20);
  --space-xl: var(--space-24);
  --space-xxl: var(--space-32);
}

.density-cozy {
  --space-xxs: var(--space-8);
  --space-xs: var(--space-12);
  --space-sm: var(--space-16);
  --space-md: var(--space-20);
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-xxl: var(--space-48);
}

/* stylelint-enable discord/var-validator */

/* stylelint-disable discord/var-validator */

:root {
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 32px;
  --radius-round: 2147483647px;
}

/* stylelint-enable discord/var-validator */

/* TODO: these should eventually be integrated into Style Dictionary. */

.theme-dark {
  --guild-header-text-shadow: 0 1px 1px hsl(var(--black-500-hsl) / 0.4);
  --elevation-stroke: 0 0 0 1px hsl(var(--primary-900-hsl) / 0.15);
  --elevation-low: 0 1px 0 hsl(var(--primary-900-hsl) / 0.2), 0 1.5px 0 hsl(var(--primary-860-hsl) / 0.05),
    0 2px 0 hsl(var(--primary-900-hsl) / 0.05);
  --elevation-medium: 0 4px 4px hsl(var(--black-500-hsl) / 0.16);
  --elevation-high: 0 8px 16px hsl(var(--black-500-hsl) / 0.24);
}

.theme-light {
  --guild-header-text-shadow: 0 1px 1px hsl(var(--white-500-hsl) / 0.4);
  --elevation-stroke: 0 0 0 1px hsl(var(--primary-860-hsl) / 0.08);
  --elevation-low: 0 1px 0 hsl(var(--primary-860-hsl) / 0.1), 0 1.5px 0 hsl(var(--primary-900-hsl) / 0.025),
    0 2px 0 hsl(var(--primary-860-hsl) / 0.025);
  --elevation-medium: 0 4px 4px hsl(var(--black-500-hsl) / 0.08);
  --elevation-high: 0 8px 16px hsl(var(--black-500-hsl) / 0.16);
}

/*
 * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 *
 * This file is an output of the Typography pipeline, which is defined here:
 *
 *   discord_design_system/modules/token_definitions/Typography.tsx
 *
 * Then run:
 *
 *   yarn generate
 */

/* stylelint-disable declaration-property-value-allowed-list */

@font-face {
  font-family: 'ABC Ginto Nord';
  font-style: normal;
  font-weight: 800;
  src: url(/assets/097b737553f77c92.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Nord';
  font-style: italic;
  font-weight: 800;
  src: url(/assets/d7f3d9317a5ff964.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Nord Discord';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/bb673ee29d9d9269.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: normal;
  font-weight: 300;
  src: url(/assets/2d538acdbc2eb6b8.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: italic;
  font-weight: 300;
  src: url(/assets/6897c8395199e044.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/89cc835cf102bf12.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/9e78b20620cb79ff.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: normal;
  font-weight: 500;
  src: url(/assets/094adef82c637a3c.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: italic;
  font-weight: 500;
  src: url(/assets/5b3d873665de628f.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/a893ac26791508c7.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/5a4f9cc740b6d92b.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: normal;
  font-weight: 800;
  src: url(/assets/908064caebce5abe.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Normal';
  font-style: italic;
  font-weight: 800;
  src: url(/assets/f2d2cc13894d7060.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Discord';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/bd0f5c73464e9717.woff2) format('woff2');
}

@font-face {
  font-family: 'ABC Ginto Discord';
  font-style: normal;
  font-weight: 500;
  src: url(/assets/a47177db4e543b05.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/66d715454104d24e.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/dd24010f3cf7def7.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: normal;
  font-weight: 500;
  src: url(/assets/b272b33815319bae.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: italic;
  font-weight: 500;
  src: url(/assets/6a1346ad3821ff3c.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/2df2c3ff74408972.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: italic;
  font-weight: 600;
  src: url(/assets/d5d789aeb6282532.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/189422196a4f8b53.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/ce3b8055f5114434.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: normal;
  font-weight: 800;
  src: url(/assets/b2fdbe507d6ce9ef.woff2) format('woff2');
}

@font-face {
  font-family: 'gg sans';
  font-style: italic;
  font-weight: 800;
  src: url(/assets/03dcf979852e8b8e.woff2) format('woff2');
}

@font-face {
  font-family: 'gg mono';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/249d0a057895c668.woff2) format('woff2');
}

@font-face {
  font-family: 'gg mono';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/45efa6936fdfb918.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/f72b5ce64feb2086.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/7a6a566c2e88a35d.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url(/assets/a4a3d323feb11add.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 500;
  src: url(/assets/1a9d6f15e3bade15.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/36e7b68ea0c05ae7.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 600;
  src: url(/assets/7b652d8bbf885aea.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/cb2006dbced0e246.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/e52f0cba712e2fb4.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  src: url(/assets/772df2968ca0cf92.woff2) format('woff2');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 800;
  src: url(/assets/19797abd0807f76b.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/268aaee6b96a3789.woff2) format('woff2');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/c76eb070f0fcec44.woff2) format('woff2');
}

@font-face {
  font-family: 'Corinthia';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/b598312a5e479904.woff2) format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  src: url(/assets/943f151cdf1b637e.woff2) format('woff2');
}

:root {
  --font-primary: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'ABC Ginto Nord', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-code: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
    Monaco, 'Courier New', Courier, monospace;
  --font-clan-body: Fraunces, 'gg sans', serif, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-clan-signature: Corinthia, 'gg sans', cursive, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display-marketing: 'ABC Ginto Discord', 'gg sans', serif, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}

:root:lang(el),
:root:lang(ru),
:root:lang(uk),
:root:lang(bg) {
  --font-primary: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-code: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
    Monaco, 'Courier New', Courier, monospace;
  --font-clan-body: Fraunces, 'gg sans', serif, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-clan-signature: Corinthia, 'gg sans', cursive, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display-marketing: 'ABC Ginto Discord', 'gg sans', serif, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}

:root:lang(ko) {
  --font-primary: 'gg sans', 'Apple SD Gothic Neo', NanumBarunGothic, '맑은 고딕', 'Malgun Gothic', Gulim, 굴림, Dotum,
    돋움, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'gg sans', 'Apple SD Gothic Neo', NanumBarunGothic, '맑은 고딕', 'Malgun Gothic', Gulim, 굴림, Dotum,
    돋움, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'ABC Ginto Nord', 'Apple SD Gothic Neo', NanumBarunGothic, '맑은 고딕', 'Malgun Gothic', Gulim, 굴림,
    Dotum, 돋움, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-code: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
    Monaco, 'Courier New', Courier, monospace;
  --font-clan-body: Fraunces, 'gg sans', serif, 'Apple SD Gothic Neo', NanumBarunGothic, '맑은 고딕', 'Malgun Gothic',
    Gulim, 굴림, Dotum, 돋움, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-clan-signature: Corinthia, 'gg sans', cursive, 'Apple SD Gothic Neo', NanumBarunGothic, '맑은 고딕',
    'Malgun Gothic', Gulim, 굴림, Dotum, 돋움, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display-marketing: 'ABC Ginto Discord', 'gg sans', serif, 'Apple SD Gothic Neo', NanumBarunGothic, '맑은 고딕',
    'Malgun Gothic', Gulim, 굴림, Dotum, 돋움, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root:lang(ja) {
  --font-primary: 'gg sans', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,
    Osaka, 'MS PGothic', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'gg sans', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,
    Osaka, 'MS PGothic', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'ABC Ginto Nord', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ,
    Meiryo, Osaka, 'MS PGothic', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-code: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
    Monaco, 'Courier New', Courier, monospace;
  --font-clan-body: Fraunces, 'gg sans', serif, 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
    メイリオ, Meiryo, Osaka, 'MS PGothic', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-clan-signature: Corinthia, 'gg sans', cursive, 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3',
    'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, Osaka, 'MS PGothic', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  --font-display-marketing: 'ABC Ginto Discord', 'gg sans', serif, 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3',
    'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, Osaka, 'MS PGothic', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}

:root:lang(zh-CN) {
  --font-primary: 'gg sans', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun,
    'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'gg sans', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun,
    'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'ABC Ginto Nord', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体,
    SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-code: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
    Monaco, 'Courier New', Courier, monospace;
  --font-clan-body: Fraunces, 'gg sans', serif, 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei',
    'Microsoft JhengHei', 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-clan-signature: Corinthia, 'gg sans', cursive, 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei',
    'Microsoft JhengHei', 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display-marketing: 'ABC Ginto Discord', 'gg sans', serif, 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei',
    'Microsoft JhengHei', 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root:lang(zh-TW) {
  --font-primary: 'gg sans', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑,
    宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'gg sans', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑,
    宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headline: 'ABC Ginto Nord', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei',
    微軟雅黑, 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-code: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L',
    Monaco, 'Courier New', Courier, monospace;
  --font-clan-body: Fraunces, 'gg sans', serif, 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI',
    'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-clan-signature: Corinthia, 'gg sans', cursive, 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI',
    'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display-marketing: 'ABC Ginto Discord', 'gg sans', serif, 'Microsoft JhengHei', 微軟正黑體,
    'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, 'Noto Sans', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}

/* stylelint-enable declaration-property-value-allowed-list */

/*
  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY
  If you need to add or edit existing variables, check out
  discord_common/js/packages/tokens/definitions, then run
  `clyde mana tokens generate`
*/

:root {
  /* Width of the resize handle in pixels */
  --chat-resize-handle-width: 8px;

  /* Size of the icons in the input */
  --chat-input-icon-size: 24px;

  /* Line height for markup text */
  --chat-markup-line-height: 1.375rem;

  /* The default horizontal spacing for modals */
  --modal-horizontal-padding: 16px;

  /* The default vertical spacing for modals */
  --modal-vertical-padding: 16px;

  /* The size of the guild icons in the guilds bar */
  --guildbar-avatar-size: 48px;

  /* The size of folders in the guilds bar */
  --guildbar-folder-size: 48px;
}

.visual-refresh {
  --chat-input-icon-size: 20px;

  --chat-markup-line-height: 1.5rem;

  --modal-horizontal-padding: 24px;

  --guildbar-avatar-size: 40px;
}

/* Reset Styles */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
a {
  color: var(--text-link);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}
a img {
  border: none;
}
/* Ours */
body {
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 1;
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: transparent;
}
p {
  margin: 14px 0;
}
ol,
ul {
  list-style: none;
}
/*
 * TODO: Remove with this file.
 * Already defined in shared/index.module.css
 */
::-moz-placeholder {
  font-family: var(--font-primary);
  font-weight: 400;
}
select,
textarea,
input,
::placeholder {
  font-family: var(--font-primary);
  font-weight: 400;
}
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media all and (-webkit-max-device-pixel-ratio: 1) {
    .theme-light ::-moz-placeholder {
      font-weight: 500;
    }
    .theme-light select,
    .theme-light textarea,
    .theme-light input,
    .theme-light ::placeholder {
      font-weight: 500;
    }
}
strong {
  font-weight: 600;
}
button {
  font-family: var(--font-primary);
  font-weight: 500;
  border: 0;
  cursor: pointer;
}
code {
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 16px;
}
/* These imports were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/widget/index.module.css */
  --custom-index-scrollbar-width: 10px;
  --custom-index-scrollbar-margin: 3px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/uikit/auth/AuthBox.module.css */
  --custom-auth-box-auth-box-padding: 32px;

  /* Generated from: discord_app/uikit/auth/WaveSplash.module.css */
  --custom-wave-splash-responsive-width-mobile: 485px;
  --custom-wave-splash-responsive-width-mobile-first: 486px;
  --custom-wave-splash-responsive-width-desktop: 1080px;
  --custom-wave-splash-max-qr-login-width: 830px;

  /* Generated from: discord_app/uikit/ChannelTextAreaButton.module.css */
  --custom-channel-text-area-button-hover-scale: 0.85714;

  /* Generated from: discord_app/uikit/DragResizeContainer.module.css */
  --custom-drag-resize-container-handle-size: 8px;
  --custom-drag-resize-container-handle-bleed: 2px;
  --custom-drag-resize-container-handle-offset: calc(var(--custom-drag-resize-container-handle-bleed) - var(--custom-drag-resize-container-handle-size));

  /* Generated from: discord_app/uikit/Embed.module.css */
  --custom-embed-spoiler-blur-radius: 44px;

  /* Generated from: discord_app/uikit/GradientProgress.module.css */
  --custom-gradient-progress-notch-width: 8px;
  --custom-gradient-progress-notch-height: 16px;
  --custom-gradient-progress-notch-margin: 2px;

  /* Generated from: discord_app/uikit/GuildDiscoveryCard.module.css */
  --custom-guild-discovery-card-card-height: 320px;
  --custom-guild-discovery-card-card-height-with-tags: 350px;

  /* Generated from: discord_app/uikit/IconButton.module.css */
  --custom-icon-button-icon-lg-size: 36px;
  --custom-icon-button-icon-md-size: 24px;
  --custom-icon-button-icon-sm-size: 18px;
  --custom-icon-button-icon-xs-size: 12px;

  /* Generated from: discord_app/uikit/InviteButton.module.css */
  --custom-invite-button-resolving-background-width: 380px;

  /* Generated from: discord_app/uikit/Keybind.module.css */
  --custom-keybind-space-around-key: 8px;
  --custom-keybind-shadow-width: 2px;
  --custom-keybind-vertical-padding-total-height: 8px;
  --custom-keybind-applied-vertical-padding: calc((var(--custom-keybind-vertical-padding-total-height) - var(--custom-keybind-shadow-width)) / 2);

  /* Generated from: discord_app/uikit/layers/FullScreenLayer.module.css */
  --custom-full-screen-layer-animation-duration: 150ms;

  /* Generated from: discord_app/uikit/Layout.module.css */
  --custom-layout-sidebar-width: 232px;

  /* Generated from: discord_app/uikit/messages/Message.module.css */
  --custom-message-avatar-size: 40px;
  --custom-message-avatar-decoration-size: calc(var(--custom-message-avatar-size) * var(--decoration-to-avatar-ratio));
  --custom-message-margin-horizontal: 16px;
  --custom-message-margin-compact-indent: 5rem;
  --custom-message-spacing-vertical-container-cozy: 0.125rem;
  --custom-message-padding-vertical-container-compact: 0.125rem;
  --custom-message-meta-space: 0.25rem;
  --custom-message-reply-indent: 0.625rem;
  /* stylelint-disable-next-line discord/var-validator */
  --custom-message-margin-left-content-cozy: calc(var(--custom-message-avatar-size, 40px) + var(--custom-message-margin-horizontal) + var(--custom-message-margin-horizontal));
  --custom-message-reply-message-preview-line-height: 1.125rem;

  /* Generated from: discord_app/uikit/messages/MessageAttachment.module.css */
  --custom-message-attachment-spoiler-blur-radius: 44px;

  /* Generated from: discord_app/uikit/messages/system/UserPremiumGuildSubscription.module.css */
  --custom-user-premium-guild-subscription-easter-egg-size: 196px;

  /* Generated from: discord_app/uikit/Notification.module.css */
  --custom-notification-spacing: 12px;
  --custom-notification-container-width: 300px;
  --custom-notification-space-around-divider: 12px;
  --custom-notification-box-shadow-opacity: 0.8;
  --custom-notification-box-shadow-blur-radius: 7px;
  --custom-notification-box-shadow-spread-radius: 3px;

  /* Generated from: discord_app/uikit/overlay/Widget.module.css */
  --custom-widget-max-widget-height: 100vh;
  --custom-widget-bar-padding: 12px;
  --custom-widget-body-padding: 4px;
  --custom-widget-bar-height: 20px;

  /* Generated from: discord_app/uikit/PremiumGuildProgressBar.module.css */
  --custom-premium-guild-progress-bar-progress-bar-width: 24px;
  --custom-premium-guild-progress-bar-tier-marker-size: 16px;

  /* Generated from: discord_app/uikit/refresh/CallAvatar.module.css */
  --custom-call-avatar-outgoing-duration: 2.5s;
  --custom-call-avatar-incoming-duration: 5.407s;

  /* Generated from: discord_app/uikit/Resizable.module.css */
  --custom-resizable-icon-size: 16px;
  --custom-resizable-icon-padding: 4px;
  --custom-resizable-extension-size: 4px;

  /* Generated from: discord_app/uikit/streaming/LiveIndicator.module.css */
  --custom-live-indicator-border-radius: 16px;

  /* Generated from: discord_app/uikit/TutorialPopout.module.css */
  --custom-tutorial-popout-padding-content: 16px;
  --custom-tutorial-popout-height-media-approx: 80px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/styles/shared/Emoji.module.css */
  --custom-emoji-size-emoji: 1.375em;
  --custom-emoji-size-jumbo-emoji: 3rem;

  /* Generated from: discord_app/styles/shared/Margin.module.css */
  --custom-margin-margin-x-small: 4px;
  --custom-margin-margin-small: 8px;
  --custom-margin-margin-medium: 20px;
  --custom-margin-margin-large: 40px;
  --custom-margin-margin-x-large: 60px;

  /* Generated from: discord_app/styles/shared/MediaQueries.module.css */
  --custom-media-queries-media-query-mobile-header: 849px;
  --custom-media-queries-media-query-mobile: 768px;

  /* Generated from: discord_app/styles/shared/Scrollbar.module.css */
  --custom-scrollbar-scrollbar-width: 14px;
  --custom-scrollbar-scrollbar-margin: 3px;
  --custom-scrollbar-border-radius: calc(var(--custom-scrollbar-scrollbar-width) / 2);
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/welcome_screen/web/CreateWelcomeChannelModal.module.css */
  --custom-create-welcome-channel-modal-emoji-size: 20px;
  --custom-create-welcome-channel-modal-input-elements-padding: 10px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/voice_channel_effects/web/VoiceChannelEffect.module.css */
  --custom-voice-channel-effect-voice-channel-effect-animation-size: 800px;

  /* Generated from: discord_app/modules/voice_channel_effects/web/VoiceChannelEffectsBar.module.css */
  --custom-voice-channel-effects-bar-effect-bar-padding-x: 16px;
  --custom-voice-channel-effects-bar-effect-bar-padding-y: 12px;
  --custom-voice-channel-effects-bar-max-width: 498px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/video_calls/web/BaseTile.module.css */
  --custom-base-tile-border-radius: 8px;
}
.visual-refresh :root {
    --video-calls-base-tile-border-radius: var(--radius-lg);
  }
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/summaries/web/components/SummaryAvatars.module.css */
  --custom-summary-avatars-avatar-diameter: 16px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/stickers/web/GuildSettingsPremiumTierStatus.module.css */
  --custom-guild-settings-premium-tier-status-progress-with-subscriptions-margin-top: 7px;

  /* Generated from: discord_app/modules/stickers/web/GuildStickersTiers.module.css */
  --custom-guild-stickers-tiers-grid-breakpoint: 1010px;

  /* Generated from: discord_app/modules/stickers/web/GuildStickerUploadModal.module.css */
  --custom-guild-sticker-upload-modal-emoji-size: 22px;
  --custom-guild-sticker-upload-modal-emoji-margin: 10px;

  /* Generated from: discord_app/modules/stickers/web/StickersConstants.module.css */
  --custom-stickers-constants-stickers-list-padding-top: 0;
  --custom-stickers-constants-stickers-list-padding-top-search-results: 8px;
  --custom-stickers-constants-stickers-list-padding-right: 0;
  --custom-stickers-constants-stickers-list-padding-bottom: 0;
  --custom-stickers-constants-stickers-list-padding-left: 8px;
  --custom-stickers-constants-stickers-list-divider-height: 30px;
  --custom-stickers-constants-stickers-list-empty-guild-upsell-height: 54px;
  --custom-stickers-constants-stickers-shop-list-section-heading-height: 66px;
  --custom-stickers-constants-stickers-shop-divider-border-top-width: 1px;
  --custom-stickers-constants-stickers-shop-divider-height: 1px;
  --custom-stickers-constants-stickers-shop-list-section-footer-height: 32px;
  --custom-stickers-constants-stickers-shop-list-section-footer-stacked-margin: 8px;
  --custom-stickers-constants-sticker-picker-preview-dimensions: 96px;
  --custom-stickers-constants-sticker-picker-preview-dimensions-small: 80px;
  --custom-stickers-constants-sticker-picker-preview-padding: 2px;
  --custom-stickers-constants-sticker-shop-modal-preview-dimensions: 72px;
  --custom-stickers-constants-sticker-picker-preview-margin: 12px;
  --custom-stickers-constants-sticker-picker-preview-margin-small: 4px;
  --custom-stickers-constants-sticker-picker-preview-border-radius: 4px;
  --custom-stickers-constants-sticker-category-list-padding: 8px;
  --custom-stickers-constants-sticker-category-icon-margin: 8px;
  --custom-stickers-constants-sticker-category-icon-size: 32px;
  --custom-stickers-constants-sticker-category-unicode-icon-size: 24px;
  --custom-stickers-constants-sticker-dimension: 160px;
  --custom-stickers-constants-sticker-purchase-pack-preview-dimensions: 76px;
  --custom-stickers-constants-sticker-purchase-pack-preview-padding: 2px;
  --custom-stickers-constants-sticker-purchase-pack-preview-margin: 0;
  --custom-stickers-constants-sticker-picker-breakpoint-small: 360px;
  --custom-stickers-constants-sticker-picker-breakpoint-medium: 446px;
  --custom-stickers-constants-category-separator-size: 1px;
  --custom-stickers-constants-category-separator-margin-vertical: 12px;
}
:root {
  /* stylelint-disable-next-line color-no-hex  */
  --custom-header-icon-color-expired: #4e5058;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/reactions/web/ReactionPicker.module.css */
  --custom-reaction-picker-border-radius: 8px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/premium/promotions/web/OutboundPromotionRedemptionModal.module.css */
  --custom-outbound-promotion-redemption-modal-art-height: 120px;

  /* Generated from: discord_app/modules/premium/web/PremiumColors.module.css */
  --custom-premium-colors-premium-gradient-tier-0: linear-gradient(
    to right,
    var(--premium-tier-0-purple-for-gradients),
    var(--premium-tier-0-blue-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-1: linear-gradient(
    to right,
    var(--premium-tier-1-blue-for-gradients),
    var(--premium-tier-1-dark-blue-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-2: linear-gradient(
    to right,
    var(--premium-tier-2-purple-for-gradients),
    var(--premium-tier-2-pink-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-2-transparent: linear-gradient(
    to right,
    hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.3),
    hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.3)
  );
  --custom-premium-colors-premium-gradient-tier-2-diagonal: linear-gradient(
    45deg,
    var(--premium-tier-2-purple-for-gradients),
    var(--premium-tier-2-pink-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-2-tri-color: linear-gradient(
    to right,
    var(--premium-tier-2-purple-for-gradients),
    var(--premium-tier-2-purple-for-gradients-2),
    var(--premium-tier-2-pink-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-2-tri-color-reverse: linear-gradient(
    to left,
    var(--premium-tier-2-purple-for-gradients),
    var(--premium-tier-2-purple-for-gradients-2),
    var(--premium-tier-2-pink-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-2-tri-color-vertical: linear-gradient(
    to top,
    var(--premium-tier-2-purple-for-gradients),
    var(--premium-tier-2-purple-for-gradients-2),
    var(--premium-tier-2-pink-for-gradients)
  );
  --custom-premium-colors-premium-gradient-tier-2-old: linear-gradient(
    to right,
    var(--premium-tier-2-purple),
    var(--premium-tier-2-pink)
  );

  --custom-premium-colors-banner-yellow: rgb(255, 234, 160);
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/people/web/PendingRow.module.css */
  --custom-pending-row-max-width: 1040px;

  /* Generated from: discord_app/modules/people/web/PeoplePage.module.css */
  --custom-people-page-max-width-with-toolbar: 940px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/parent_tools/web/FamilyCenterPage.module.css */
  --custom-family-center-page-responsive-width-mobile: 900px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/overlay/web/TextWidget.module.css */
  --custom-text-widget-background-color-header-default: var(--primary-600);

  /* Generated from: discord_app/modules/overlay/web/VoiceWidget.module.css */
  --custom-voice-widget-top-margin: calc(var(--custom-widget-bar-height) + 2 * var(--custom-widget-bar-padding));
  --custom-voice-widget-widget-width: 272px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/oauth2/web/OAuth2Page.module.css */
  --custom-o-auth-2-page-oauth-2-max-width: 568px;
  --custom-o-auth-2-page-oauth-2-min-height: 366px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/now_playing/web/PartyAvatars.module.css */
  --custom-party-avatars-avatar-diameter: 24px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/mobile_web_handoff/web/MobileWebHandoffLink.module.css */
  --custom-mobile-web-handoff-link-mobile-web-handoff-height: 70px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/messages/web/invites/EmbeddedApplicationInvite.module.css */
  --custom-embedded-application-invite-content-height: 130px;
  --custom-embedded-application-invite-content-height-tall: 162px;
  --custom-embedded-application-invite-content-width: 576px;
  --custom-embedded-application-invite-image-width-small: 225px;
  --custom-embedded-application-invite-image-width-large: 288px;

  /* Generated from: discord_app/modules/messages/web/MessageHelpers.module.css */
  --custom-message-helpers-popout-content-width: 256px;
  --custom-message-helpers-popout-padding-width: 16px;
  --custom-message-helpers-popout-container-width: calc(var(--custom-message-helpers-popout-content-width) + 2 * var(--custom-message-helpers-popout-padding-width));
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/media_channel/web/MediaPostAttachments.module.css */
  --custom-media-post-attachments-horizontal-padding: 48px;

  /* Generated from: discord_app/modules/media_channel/web/MediaPostEmbed.module.css */
  --custom-media-post-embed-spoiler-blur-radius: 20px;
  --custom-media-post-embed-transition-duration: 170ms;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/keyboard_shortcuts/web/RagingDemon.module.css */
  --custom-raging-demon-duration: 0.15s;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/interaction_components/web/InteractionIframeModal.module.css */
  --custom-interaction-iframe-modal-modal-min-width: 320px;
  --custom-interaction-iframe-modal-modal-margin: 80px;
  --custom-interaction-iframe-modal-modal-max-width: 1280px;
  --custom-interaction-iframe-modal-modal-header-height: 52px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/instant_invite/web/AcceptInviteDetailComponents.module.css */
  --custom-accept-invite-detail-components-small-mobile-breakpoint: 640px;

  /* Generated from: discord_app/modules/instant_invite/web/AcceptInviteMobile.module.css */
  --custom-accept-invite-mobile-small-mobile-breakpoint: 640px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/hub/web/components/HubDiscoveryAddHubCard.module.css */
  --custom-hub-discovery-add-hub-card-card-height: 320px;

  /* Generated from: discord_app/modules/hub/web/components/HubDiscoveryGuildList.module.css */
  --custom-hub-discovery-guild-list-card-height: 320px;
  --custom-hub-discovery-guild-list-min-card-width: 248px;
  --custom-hub-discovery-guild-list-gutter-size: 16px;

  /* Generated from: discord_app/modules/hub/web/components/HubDiscoveryPage.module.css */
  --custom-hub-discovery-page-max-page-width: 1608px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guilds_bar/web/GuildTooltip.module.css */
  --custom-guild-tooltip-icon-size: 20px;
  --custom-guild-tooltip-icon-size-v-2: 16px;

  /* Generated from: discord_app/modules/guilds_bar/web/listitems/FolderItem.module.css */
  --custom-folder-item-animation-duration: 150ms;
  --custom-folder-item-guild-icon-margin: 8px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_sidebar/web/CategoryChannel.module.css */
  --custom-category-channel-space-before-category: 16px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_settings/integrations/permission/web/AddPermissionsModal.module.css */
  --custom-add-permissions-modal-focus-ring-width: 4px;

  /* Generated from: discord_app/modules/guild_settings/roles/web/edit/CustomRoleIconFormItem.module.css */
  --custom-custom-role-icon-form-item-role-icon-preview-size: 32px;

  /* Generated from: discord_app/modules/guild_settings/roles/web/edit/GuildSettingsRolesEditShared.module.css */
  --custom-guild-settings-roles-edit-shared-sidebar-width: 232px;

  /* Generated from: discord_app/modules/guild_settings/roles/web/GuildSettingsRolesIntro.module.css */
  --custom-guild-settings-roles-intro-roles-transition: 250ms;
  --custom-guild-settings-roles-intro-pause-transition: 166ms;
  --custom-guild-settings-roles-intro-background-transition: 500ms;
  --custom-guild-settings-roles-intro-banner-transition-delay: calc(var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition));
  --custom-guild-settings-roles-intro-roles-transition-delay: calc(var(--custom-guild-settings-roles-intro-roles-transition) + 2 * var(--custom-guild-settings-roles-intro-pause-transition) + var(--custom-guild-settings-roles-intro-background-transition));

  /* Generated from: discord_app/modules/guild_settings/web/GuildSettingsCommunityIntro.module.css */
  --custom-guild-settings-community-intro-content-spacing: 32px;
  --custom-guild-settings-community-intro-hover-distance: -12px;
  --custom-guild-settings-community-intro-text-spacing: 8px;

  /* Generated from: discord_app/modules/guild_settings/web/GuildSettingsDiscoveryLandingPage.module.css */
  --custom-guild-settings-discovery-landing-page-max-width-tab: 905px;
  --custom-guild-settings-discovery-landing-page-settings-max-width: 520px;

  /* Generated from: discord_app/modules/guild_settings/web/GuildSettingsPartner.module.css */
  --custom-guild-settings-partner-content-spacing: 32px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_scheduled_events/web/event_detail/EventDetailInfoTab.module.css */
  --custom-event-detail-info-tab-base-spacing: 8px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/components/SubscriptionListingPreviewsCarousel.module.css */
  --custom-subscription-listing-previews-carousel-cards-get-cut-off-width: 724px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/EditableBenefitsList.module.css */
  --custom-editable-benefits-list-emoji-size: 24px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/EditBenefitModal.module.css */
  --custom-edit-benefit-modal-emoji-size: 22px;
  --custom-edit-benefit-modal-emoji-margin: 10px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/GuildSettingsRoleSubscriptions.module.css */
  --custom-guild-settings-role-subscriptions-max-width: 905px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/GuildSettingsRoleSubscriptionsOverview.module.css */
  --custom-guild-settings-role-subscriptions-overview-settings-max-width: 520px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/GuildSettingsStorePage.module.css */
  --custom-guild-settings-store-page-settings-max-width: 520px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/ImportableBenefitsList.module.css */
  --custom-importable-benefits-list-listing-image-size: 40px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/ImportBenefitsModal.module.css */
  --custom-import-benefits-modal-icon-size: 24px;
  --custom-import-benefits-modal-role-icon-size: 40px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/guild_settings/RoleIconUploader.module.css */
  --custom-role-icon-uploader-icon-size: 24px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/GuildRoleSubscriptionStyleConstants.module.css */
  --custom-guild-role-subscription-style-constants-cover-image-aspect-ratio: 4;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/manage_earnings/HistoricEarningsTable.module.css */
  --custom-historic-earnings-table-toggle-expand-column-width: 30px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/overview_tab/GuildRoleSubscriptionCardBasicInfo.module.css */
  --custom-guild-role-subscription-card-basic-info-tier-image-size: 80px;
  --custom-guild-role-subscription-card-basic-info-tier-image-size-mobile: 48px;

  /* Generated from: discord_app/modules/guild_role_subscriptions/web/overview_tab/GuildRoleSubscriptionsOverviewPage.module.css */
  --custom-guild-role-subscriptions-overview-page-page-max-width: 1180px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_profile/web/GuildDialog.module.css */
  --custom-guild-dialog-popout-width: 250px;
  --custom-guild-dialog-splash-ratio: 1.77778;
  --custom-guild-dialog-icon-size: 84px;
  --custom-guild-dialog-icon-padding: 4px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_products/web/download_modal/GuildProductDownloadModal.module.css */
  --custom-guild-product-download-modal-header-image-width: 119px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_onboarding_home/web/GuildOnboardingHomePage.module.css */
  --custom-guild-onboarding-home-page-max-page-width: 1128px;
  --custom-guild-onboarding-home-page-max-single-column-width: 704px;

  /* Generated from: discord_app/modules/guild_onboarding_home/web/HomeResourceChannels.module.css */
  --custom-home-resource-channels-obscured-blur-radius: 20px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_member_verification/web/components/application_review/GuildMemberApplicationReview.module.css */
  --custom-guild-member-application-review-sidebar-width: 29vw;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_home/featured_items/web/FeaturedItemsPopout.module.css */
  --custom-featured-items-popout-featured-items-popout-footer-height: 120px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/guild_boosting/web/GuildBoostingSidebarDisplay.module.css */
  --custom-guild-boosting-sidebar-display-conditional-bottom-margin: 12px;

  /* Generated from: discord_app/modules/guild_boosting/web/marketing/GuildBoostingMarketingProgressBar.module.css */
  --custom-guild-boosting-marketing-progress-bar-marker-dimensions: 32px;
  --custom-guild-boosting-marketing-progress-bar-end-markers-margin: 4px;

  /* Generated from: discord_app/modules/guild_boosting/web/marketing/GuildBoostingMarketingProgressBarMarker.module.css */
  --custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions: 32px;

  /* Generated from: discord_app/modules/guild_boosting/web/marketing/GuildBoostingMarketingTierCards.module.css */
  --custom-guild-boosting-marketing-tier-cards-tier-card-border-radius: 16px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/go_live/web/modal/GoLiveModal.module.css */
  --custom-go-live-modal-art-height: 112px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/gif_picker/web/GIFPicker.module.css */
  --custom-gif-picker-gutter-size: 0 16px 12px 16px;

  /* Generated from: discord_app/modules/gif_picker/web/GIFPickerSearchResults.module.css */
  --custom-gif-picker-search-results-desired-item-width: 160px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/forums/web/ForumComposerAttachments.module.css */
  --custom-forum-composer-attachments-attachment-size: 78px;

  /* Generated from: discord_app/modules/forums/web/ForumPost.module.css */
  --custom-forum-post-obscured-blur-radius: 20px;

  /* Generated from: discord_app/modules/forums/web/ForumPostGridView.module.css */
  --custom-forum-post-grid-view-obscured-blur-radius: 20px;

  /* Generated from: discord_app/modules/forums/web/upsell_modal/DemoForumChannel.module.css */
  --custom-demo-forum-channel-padding-large: 20px;
  --custom-demo-forum-channel-post-padding: 12px;
  --custom-demo-forum-channel-gap-size: 8px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/feedback/web/FeedbackModal.module.css */
  --custom-feedback-modal-emoji-size: 64px;
  --custom-feedback-modal-close-button-margin: 12px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/expression_suggestions/web/ExpressionSuggestions.module.css */
  --custom-expression-suggestions-container-padding: 8px;
  --custom-expression-suggestions-sticker-suggestion-size: 48px;
  --custom-expression-suggestions-sticker-suggestion-margin: 8px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/expression_picker/web/ExpressionPickerConstants.module.css */
  --custom-expression-picker-constants-expression-picker-list-section-heading-height: 32px;
  --custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions: 28px;
  --custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions: 32px;
  --custom-expression-picker-constants-expression-picker-inspector-bar-height: 48px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/emoji_picker/web/EmojiPicker.module.css */
  --custom-emoji-picker-border-radius: 8px;

  /* Generated from: discord_app/modules/emoji_picker/web/EmojiPickerConstants.module.css */
  --custom-emoji-picker-constants-min-emoji-picker-width: 498px;
  --custom-emoji-picker-constants-emoji-size-medium: 40px;
  --custom-emoji-picker-constants-emoji-size-large: 48px;
  --custom-emoji-picker-constants-emoji-container-padding-horizontal: 4px;
  --custom-emoji-picker-constants-emoji-container-padding-vertical: 4px;
  --custom-emoji-picker-constants-emoji-picker-height: 440px;
  --custom-emoji-picker-constants-emoji-section-margin-bottom: 12px;
  --custom-emoji-picker-constants-emoji-list-padding-top: 0;
  --custom-emoji-picker-constants-emoji-list-padding-right: 0;
  --custom-emoji-picker-constants-emoji-list-padding-bottom: 8px;
  --custom-emoji-picker-constants-emoji-list-padding-left: 8px;
  --custom-emoji-picker-constants-emoji-list-search-results-padding-top: 8px;
  --custom-emoji-picker-constants-unicode-category-icon-margin-vertical: 2px;
  --custom-emoji-picker-constants-unicode-category-icon-size: 24px;
  --custom-emoji-picker-constants-unicode-category-icon-padding: 4px;
  --custom-emoji-picker-constants-unicode-category-shortcut-height: 48px;
  --custom-emoji-picker-constants-guild-category-icon-size: 32px;
  --custom-emoji-picker-constants-guild-category-icon-margin-verical: 8px;
  --custom-emoji-picker-constants-category-separator-size: 1px;
  --custom-emoji-picker-constants-category-separator-margin-vertical: 12px;
  --custom-emoji-picker-constants-diversity-emoji-size: 24px;
  --custom-emoji-picker-constants-emoji-premium-upsell-height: 54px;
  --custom-emoji-picker-constants-emoji-premium-upsell-margin-top: 16px;
  --custom-emoji-picker-constants-newly-added-emoji-badge-height: 16px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/discover/web/components/cards/DiscoverStaticGuildCard.module.css */
  --custom-discover-static-guild-card-card-height: 258px;

  /* Generated from: discord_app/modules/discover/web/components/DiscoverFeaturedGuildsSection.module.css */
  --custom-discover-featured-guilds-section-card-height: 320px;
  --custom-discover-featured-guilds-section-min-card-width: 248px;
  --custom-discover-featured-guilds-section-gutter-size: 16px;

  /* Generated from: discord_app/modules/discover/web/components/DiscoverSearchResults.module.css */
  --custom-discover-search-results-max-search-bar-width: 720px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/directory_channels/web/GuildDirectory.module.css */
  --custom-guild-directory-min-card-width: 248px;
  --custom-guild-directory-gutter-size: 16px;
  --custom-guild-directory-min-content-width: 320px;
  --custom-guild-directory-max-page-width: 1608px;

  /* Generated from: discord_app/modules/directory_channels/web/GuildDirectoryEntryCard.module.css */
  --custom-guild-directory-entry-card-card-height: 274px;

  /* Generated from: discord_app/modules/directory_channels/web/GuildDirectoryLanding.module.css */
  --custom-guild-directory-landing-min-header-height: 200px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/custom_status/web/CustomStatusModal.module.css */
  --custom-custom-status-modal-art-height: 120px;
  --custom-custom-status-modal-emoji-size: 22px;
  --custom-custom-status-modal-emoji-margin: 10px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/creator_monetization/guild_shop/web/GuildShopPage.module.css */
  --custom-guild-shop-page-two-column-max-width: 1439px;

  /* Generated from: discord_app/modules/creator_monetization/web/component/AspectStableImage.module.css */
  --custom-aspect-stable-image-container-padding: 20px;

  /* Generated from: discord_app/modules/creator_monetization/web/component/payment/MonetizationInfoTableExpandableRows.module.css */
  --custom-monetization-info-table-expandable-rows-toggle-expand-column-width: 30px;

  --custom-guild-shop-content-width: 1044px;

  --custom-guild-shop-content-width-reduced: 788px;

  --custom-guild-shop-content-width-minimum: 688px;

  /* stylelint-disable-next-line color-no-hex */
  --custom-guild-shop-channel-row-gradient: linear-gradient(113deg, #2f3570 1.98%, #422c70 94.48%);

  /* stylelint-disable-next-line color-no-hex */
  --custom-guild-shop-channel-row-gradient-hover: linear-gradient(113deg, #383f86 1.98%, #4d3385 94.48%);

  --custom-guild-shop-channel-row-border-gradient: linear-gradient(113deg, rgb(101, 145, 255), rgb(209, 80, 255));

  --custom-guild-shop-channel-row-glow: 0 0 4px rgba(189, 149, 255, 0.5);

  /* stylelint-disable-next-line color-no-hex */
  --custom-guild-shop-preview-pill-shadow-dark: -4px 5px #1d1d1d;

  /* stylelint-disable-next-line color-no-hex */
  --custom-guild-shop-preview-pill-shadow-light: -4px 5px #d7dce8;

  /* stylelint-disable-next-line color-no-hex */
  --custom-guild-shop-gradient-start: #686bff;

  /* stylelint-disable-next-line color-no-hex */
  --custom-guild-shop-gradient-end: #c356fd;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/connections/web/GuildRoleConnectionsModal.module.css */
  --custom-guild-role-connections-modal-close-button-margin: 12px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/clips/web/ClipsEnabledIndicator.module.css */
  --custom-clips-enabled-indicator-medium-break-point: 920px;
  --custom-clips-enabled-indicator-badge-icon-dimension-override: 20px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/client_themes/web/ClientThemesEditor.module.css */
  --custom-client-themes-editor-content-width: calc(var(--custom-theme-selection-selection-size) * 3 + var(--custom-theme-selection-group-column-gap) * 2);
  --custom-client-themes-editor-editor-padding: 16px;

  /* Generated from: discord_app/modules/client_themes/web/ThemeSelection.module.css */
  --custom-theme-selection-selection-size: 60px;

  /* Generated from: discord_app/modules/client_themes/web/ThemeSelectionGroup.module.css */
  --custom-theme-selection-group-column-gap: 24px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/channel_text_area/web/attachments/ChannelAttachmentUpload.module.css */
  --custom-channel-attachment-upload-spoiler-blur-radius: 44px;
  --custom-channel-attachment-upload-mini-attachment-size: 78px;

  /* Generated from: discord_app/modules/channel_text_area/web/ChannelTextarea.module.css */
  --custom-channel-textarea-text-area-height: 44px;
  --custom-channel-textarea-text-area-max-height: 50vh;
  --custom-channel-textarea-app-launcher-button-gap: 8px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/channel_notices/web/ChannelNotice.module.css */
  --custom-channel-notice-icon-size: 16px;
  --custom-channel-notice-padding: 12px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/calls/web/ChannelCallParticipantsPopout.module.css */
  --custom-channel-call-participants-popout-padding-value: 16px;

  /* Generated from: discord_app/modules/calls/web/StreamUpsellModal.module.css */
  --custom-stream-upsell-modal-art-height: 149px;

  /* Generated from: discord_app/modules/calls/web/VoiceChannelStatusModal.module.css */
  --custom-voice-channel-status-modal-emoji-size: 22px;
  --custom-voice-channel-status-modal-emoji-margin: 10px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/broadcasting/web/components/BroadcastingTooltip.module.css */
  --custom-broadcasting-tooltip-image-offset: 40px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/application_directory/web/ApplicationDirectory.module.css */
  --custom-application-directory-content-min-width: 600px;
  --custom-application-directory-content-max-width: 1024px;

  /* Generated from: discord_app/modules/application_directory/web/GuildCount.module.css */
  --custom-guild-count-small-icon-size: 16px;
  --custom-guild-count-large-icon-size: 20px;

  /* Generated from: discord_app/modules/application_directory/web/home/CollectionGallery.module.css */
  --custom-collection-gallery-text-container-width: 400px;
  --custom-collection-gallery-media-breakpoint: 1024px;
  --custom-collection-gallery-column-card-height: 600px;
  --custom-collection-gallery-row-card-height: 283px;

  /* Generated from: discord_app/modules/application_directory/web/home/CollectionList.module.css */
  --custom-collection-list-card-gap: 16px;

  /* Generated from: discord_app/modules/application_directory/web/home/CollectionListWithImage.module.css */
  --custom-collection-list-with-image-grid-gap: 16px;

  /* Generated from: discord_app/modules/application_directory/web/home/Collections.module.css */
  --custom-collections-collection-gap: 32px;

  /* Generated from: discord_app/modules/application_directory/web/profile/ApplicationDirectoryProfile.module.css */
  --custom-application-directory-profile-sidebar-width: 192px;
  --custom-application-directory-profile-sidebar-margin-right: 48px;
  --custom-application-directory-profile-icon-size: 122px;

  /* Generated from: discord_app/modules/application_directory/web/search/ApplicationDirectorySearch.module.css */
  --custom-application-directory-search-sidebar-width: 200px;
  --custom-application-directory-search-sidebar-margin-right: 32px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/activities/web/ActivityBookmarkEmbed.module.css */
  --custom-activity-bookmark-embed-image-width: 356px;
  --custom-activity-bookmark-embed-image-height: 200px;
  --custom-activity-bookmark-embed-content-height: 400px;

  /* Generated from: discord_app/modules/activities/web/ActivityShelfItem.module.css */
  --custom-activity-shelf-item-activity-item-height: 230px;
  --custom-activity-shelf-item-large-activity-item-height: 143px;

  /* Generated from: discord_app/modules/activities/web/ActivityShelfModal.module.css */
  --custom-activity-shelf-modal-modal-padding: 80px;
  --custom-activity-shelf-modal-modal-width: 496px;
  --custom-activity-shelf-modal-modal-min-width: 496px;
  --custom-activity-shelf-modal-modal-max-width: 1024px;
  --custom-activity-shelf-modal-modal-header-height: 92px;
  --custom-activity-shelf-modal-modal-header-without-description-height: 74px;
  --custom-activity-shelf-modal-modal-footer-height: 50px;
  --custom-activity-shelf-modal-modal-art-height: 64px;
  --custom-activity-shelf-modal-modal-max-height: 720px;
  --custom-activity-shelf-modal-modal-header-developer-controls-height: 176px;
  --custom-activity-shelf-modal-dividers-height: 2px;
  --custom-activity-shelf-modal-divider-height: 1px;

  /* Generated from: discord_app/modules/activities/web/ActivityShelfSlideActivityDirectory.module.css */
  --custom-activity-shelf-slide-activity-directory-shelf-grid-gap: 16px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/modules/accept_invite/web/AcceptInviteModal.module.css */
  --custom-accept-invite-modal-invite-modal-height: 420px;
  --custom-accept-invite-modal-small-screen-width: 720px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/design/components/Avatar/web/Avatar.module.css */
  --custom-avatar-avatar-decoration-border-position: calc((1 - var(--decoration-to-avatar-ratio)) / 2 * 100%);

  /* Generated from: discord_app/design/components/Button/web/Button.module.css */
  --custom-button-button-xl-width: 148px;
  --custom-button-button-xl-height: 50px;
  --custom-button-button-lg-width: 130px;
  --custom-button-button-lg-height: 44px;
  --custom-button-button-md-width: 96px;
  --custom-button-button-md-height: 38px;
  --custom-button-button-sm-width: 60px;
  --custom-button-button-sm-height: 32px;
  --custom-button-button-tn-height: 24px;
  --custom-button-button-tn-width: 52px;
  --custom-button-link-underline-width: 1px;
  --custom-button-link-underline-offset: 1px;
  --custom-button-link-underline-stop: calc(var(--custom-button-link-underline-width) + var(--custom-button-link-underline-offset));
  --custom-button-filled-hover: 0.1;
  --custom-button-filled-active: 0.2;
  --custom-button-transition-duration: 170ms;

  /* Generated from: discord_app/design/components/Modal/web/Modal.module.css */
  --custom-modal-min-width-large: 800px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/components/modals/SpecialMarkdown.module.css */
  --custom-special-markdown-small-break-point: 600px;
  --custom-special-markdown-medium-break-point: 768px;

  /* Generated from: discord_app/components/modals/UserProfileHypeSquadBadge.module.css */
  --custom-user-profile-hype-squad-badge-icon-size: 24px;
  --custom-user-profile-hype-squad-badge-shine-size-offset: 64px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/components/guild_discovery/GuildDiscovery.module.css */
  --custom-guild-discovery-gutter-size: 16px;
  --custom-guild-discovery-max-page-width: 1608px;
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/components/games/common/DropdownButton.module.css */
  --custom-dropdown-button-small-dropdown-size: 16px;
  --custom-dropdown-button-medium-dropdown-size: 24px;
  --custom-dropdown-button-large-dropdown-size: 32px;
  --custom-dropdown-button-separator-padding: 4px;
  --custom-dropdown-button-hitbox-padding: 8px;

  /* Generated from: discord_app/components/games/common/tiles/ResponsiveEmbedTile.module.css */
  --custom-responsive-embed-tile-loading-background-width: 271px;

  /* Generated from: discord_app/components/games/game_library/GameInstallLocations.module.css */
  --custom-game-install-locations-item-padding: 20px;

  /* Generated from: discord_app/components/games/game_library/GameList.module.css */
  --custom-game-list-row-min-height: 62px;
  --custom-game-list-linked-to-glow-duration: 2000ms;

  /* Generated from: discord_app/components/games/store/ApplicationStoreHome.module.css */
  --custom-application-store-home-store-home-width: 1245px;

  /* Generated from: discord_app/components/games/store/ApplicationStoreListing.module.css */
  --custom-application-store-listing-body-max-width: 880px;

  /* Generated from: discord_app/components/games/store/StoreColors.module.css */
  /* stylelint-disable-next-line color-no-hex  */
  --custom-store-colors-primary-750: #191b1d;
  --custom-store-colors-premium-gradient: linear-gradient(
    to right,
    var(--premium-tier-2-purple),
    var(--premium-tier-2-pink)
  );
}
:root {
  /* These constants were generated from the CSS Modules @value migration. See https://i.dis.gd/css-value-migration */

  /* Generated from: discord_app/components/common/MemberListItem.module.css */
  --custom-member-list-item-avatar-decoration-padding: 2px;

  /* Generated from: discord_app/components/common/MessagesPopout.module.css */
  --custom-messages-popout-messages-popout-footer-height: 120px;

  /* Generated from: discord_app/components/common/RadioImage.module.css */
  --custom-radio-image-border-thickness: 2px;

  /* Generated from: discord_app/components/common/StandardSidebarView.module.css */
  --custom-standard-sidebar-view-sidebar-content-width: 192px;
  --custom-standard-sidebar-view-standard-padding: 20px;
  --custom-standard-sidebar-view-sidebar-content-scrollbar-padding: 6px;
  --custom-standard-sidebar-view-sidebar-total-width: calc(var(--custom-standard-sidebar-view-sidebar-content-width) + var(--custom-standard-sidebar-view-standard-padding) + var(--custom-standard-sidebar-view-sidebar-content-scrollbar-padding));
}
.visual-refresh {
  --custom-standard-sidebar-view-sidebar-total-width: 264px;
}
:root {
  /* If you change this, you must also change the value in AvatarDecorationConstants.tsx */
  --decoration-to-avatar-ratio: 1.2;
}
:root {
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}
.theme-dark.custom-theme-background {
  --bg-overlay-color: 0 0 0;
  --bg-overlay-color-inverse: 255 255 255;
  --bg-overlay-opacity-1: 0.85;
  --bg-overlay-opacity-2: 0.8;
  --bg-overlay-opacity-3: 0.7;
  --bg-overlay-opacity-4: 0.5;
  --bg-overlay-opacity-5: 0.4;
  --bg-overlay-opacity-6: 0.1;
  --bg-overlay-opacity-hover: 0.5;
  --bg-overlay-opacity-hover-inverse: 0.08;
  --bg-overlay-opacity-active: 0.45;
  --bg-overlay-opacity-active-inverse: 0.1;
  --bg-overlay-opacity-selected: 0.4;
  --bg-overlay-opacity-selected-inverse: 0.15;
  --bg-overlay-opacity-chat: 0.8;
  --bg-overlay-opacity-home: 0.85;
  --bg-overlay-opacity-home-card: 0.8;
  --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-4);
  --bg-overlay-opacity-floating: 0.65;
}
.theme-dark.custom-theme-background.visual-refresh {
  --bg-overlay-opacity-1: 0.9;
  --bg-overlay-opacity-2: 0.85;
  --bg-overlay-opacity-3: 0.8;
  --bg-overlay-opacity-4: 0.75;
  --bg-overlay-opacity-5: 0.7;
  --bg-overlay-opacity-6: 0.15;

  --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5);
}
.theme-dark.custom-theme-background,
.custom-theme-background .theme-dark {
  /* stylelint-disable-next-line discord/var-validator */
  --theme-base-color: var(--theme-base-color-dark);
  /* stylelint-disable-next-line discord/var-validator */
  --theme-text-color: var(--theme-text-color-dark);
  /* stylelint-disable-next-line discord/var-validator */
  --theme-base-color-hsl: var(--theme-base-color-dark-hsl);
}
.theme-light.custom-theme-background {
  --bg-overlay-color: 255 255 255;
  --bg-overlay-color-inverse: 0 0 0;
  --bg-overlay-opacity-1: 0.9;
  --bg-overlay-opacity-2: 0.8;
  --bg-overlay-opacity-3: 0.7;
  --bg-overlay-opacity-4: 0.6;
  --bg-overlay-opacity-5: 0.3;
  --bg-overlay-opacity-6: 0.15;
  --bg-overlay-opacity-hover: 0.7;
  --bg-overlay-opacity-hover-inverse: 0.02;
  --bg-overlay-opacity-active: 0.65;
  --bg-overlay-opacity-active-inverse: 0.03;
  --bg-overlay-opacity-selected: 0.6;
  --bg-overlay-opacity-selected-inverse: 0.04;
  --bg-overlay-opacity-chat: 0.9;
  --bg-overlay-opacity-home: 0.7;
  --bg-overlay-opacity-home-card: 0.9;
  --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5);
  --bg-overlay-opacity-floating: 0.95;
}
.theme-light.custom-theme-background.visual-refresh {
  --bg-overlay-color: 255 255 255;
  --bg-overlay-opacity-chat: 0.85;
  --bg-overlay-opacity-1: 0.85;
  --bg-overlay-opacity-2: 0.8;
  --bg-overlay-opacity-3: 0.75;
  --bg-overlay-opacity-4: 0.7;
  --bg-overlay-opacity-5: 0.65;
  --bg-overlay-opacity-6: 0.15;

  --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5);
}
.theme-light.custom-theme-background,
.custom-theme-background .theme-light {
  /* stylelint-disable-next-line discord/var-validator */
  --theme-base-color: var(--theme-base-color-light);
  /* stylelint-disable-next-line discord/var-validator */
  --theme-text-color: var(--theme-text-color-light);
  /* stylelint-disable-next-line discord/var-validator */
  --theme-base-color-hsl: var(--theme-base-color-light-hsl);
}
.custom-theme-background {
  --bg-overlay-1: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-1)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-1))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-2: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-2)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-2))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-3: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-4: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-4)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-4))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-5: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-5)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-5))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-6: linear-gradient(
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6)),
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-6))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-hover: linear-gradient(
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-hover-inverse)),
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-hover-inverse))
      )
      fixed 0 0 / cover,
    linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-hover)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-hover))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-active: linear-gradient(
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-active-inverse)),
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-active-inverse))
      )
      fixed 0 0 / cover,
    linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-active)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-active))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-selected: linear-gradient(
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-selected-inverse)),
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-selected-inverse))
      )
      fixed 0 0 / cover,
    linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-selected)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-selected))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-chat: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-chat)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-chat))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-home: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-home)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-home))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-home-card: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-home-card)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-home-card))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

  --bg-overlay-app-frame: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-app-frame)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-app-frame))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;
  /* stylelint-disable-next-line discord/var-validator */
  --bg-overlay-floating: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-floating)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-floating))
      )
      fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;
}
/**
 * Disable color mixing on some surfaces which should not use gradient
 * themes, like our invite or auth screens.
 * - The `data-disable-adaptive-theme` attribute can be used to opt out
 *   of the gradient theme color-mixing on any HTML without conflicting styles
 * - The `.disable-adaptive-theme` class is added by ThemeProvider to opt-out
 *   where there is existing theme logic
 */
[data-disable-adaptive-theme='true'],
.disable-adaptive-theme {
  --theme-base-color-amount: 0% !important;
  --theme-text-color-amount: 0% !important;
}
[data-disable-adaptive-theme='true'],
.disable-adaptive-theme {
  /* stylelint-disable-next-line declaration-no-important */
  /* stylelint-disable-next-line declaration-no-important */
}
.visual-refresh.custom-theme-background {
  --custom-app-border-frame-base: color-mix(
    in oklab,
    var(--custom-theme-primary-color) 50%,
    var(--custom-theme-secondary-color) 50%
  );
  --app-border-frame: color-mix(in oklab, var(--custom-app-border-frame-base) 24%, var(--border-subtle) 100%);
}
body,
html,
.appMount__51fd7 {
  height: 100%;
  width: 100%;
}
.appMount__51fd7 {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body,
.appMount__51fd7 {
  /* NOTE(amadeus): This helps to prevent leaky colors on window resize */
  background: var(--bg-overlay-2, var(--background-secondary));
  text-rendering: optimizeLegibility;
}
.visual-refresh body,
  .visual-refresh .appMount__51fd7 {
    background: var(--bg-base-tertiary);
  }
.overlay body,
  .overlay .appMount__51fd7 {
    background: transparent;
  }
::-moz-placeholder {
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
}
body,
textarea,
input,
button,
select,
::placeholder {
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
}
a,
div,
span,
strong,
button,
input,
textarea,
select,
label {
  outline: 0;
}
/* This hides the alt text on broken images in an accessible way */
img[alt] {
  text-indent: -9999px;
}
/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */
/* define the edges of the window in High-Contrast Mode */
.enable-forced-colors .appMount__51fd7 {
    box-sizing: border-box;
    border: 2px solid CanvasText;
  }
/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
@media all and (-webkit-max-device-pixel-ratio: 1.5) {
  .theme-light {
    --font-weight-semibold-1x-light-theme: 600;
  }
}
:root {
  --custom-channel-header-height: 48px;
  --custom-member-list-width: 240px;
  --custom-guild-list-width: 72px;
}
/* Desktop visual refresh global variables */
.visual-refresh {
  /* The list is the size of the avatar, with 16px of padding on each side */
  --custom-guild-list-padding: var(--space-16);
  --custom-guild-list-width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2);
  --custom-guild-sidebar-width: 268px;
  --custom-app-sidebar-target-width: calc(var(--custom-guild-sidebar-width) + var(--custom-guild-list-width));
  --custom-rtc-account-height: 44px;
  --custom-app-top-bar-height: 36px;
  --custom-channel-header-height: 56px;
  --custom-member-list-width: 265px;
  --custom-channel-textarea-text-area-height: 54px;
}
.visual-refresh-chat-input {
  --custom-emoji-sprite-size: 20px;
  --custom-channel-textarea-text-area-height: 48px;
}
.density-compact.visual-refresh {
  --custom-channel-header-height: 56px;
}
.density-cozy.visual-refresh-chat-input {
  --custom-channel-textarea-text-area-height: 44px;
}
.grecaptcha-badge {
  visibility: hidden;
}


/*# sourceMappingURL=12633.8cd393242c7bc9b0.css.map*/