:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1;
}
.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/** 
  @layer ui-after {…} wins over @layer ui {…} wins over @layer ui-before {…}; 
  Styles written outside any @layer beats styles within any @layer.
*/
@layer ui-before, ui, ui-after;

/* The below custom properties are used with @container queries (and in combination with custom --inc-bp-[size-ident] breakpoint properties) to change attribute values relative to a container's inline-size. */
@property --inc-inline-size-sm {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

@property --inc-inline-size-md {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

@property --inc-inline-size-lg {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

/* 
  When using `ui` components:
  Apply the `root` class to your application's layout root element.
*/
.root_root__FZ4cP {
  /*  
    Necessary for Base UI portaled components' popups to render on top of the entire page.
    https://base-ui.com/react/overview/quick-start#portals
  */
  isolation: isolate;
}

@layer ui {
  .root_root__FZ4cP {
    /* Root container, for @container queries using our breakpoint custom properties. */
    container: uiRoot / inline-size;

    /* Use 16px as base font-size, to help scoot around edge case Safari mobile bugs to do with small-text inputs. */
    font-size: 16px;

    /* COLORS */
    /* 
      Palette
      Color palette defined here, to be assigned semantic values in
      component CSS module files.

      (N.B. Incantio property namespace is defined by '--inc-' prefix.)
    */
    --inc-palette-black: oklch(0% 0 0);
    --inc-palette-white: oklch(100% 0.00011 271.152);

    --inc-palette-red: oklch(74.862% 0.15442 35.782);
    --inc-palette-yellow: oklch(77.533% 0.15387 87.008);
    --inc-palette-green: oklch(75.009% 0.12777 118.563);
    --inc-palette-blue: oklch(73.494% 0.08654 188.822);

    --inc-palette-brown: oklch(69.421% 0.06358 84.771);

    /* DLS tokens */
    /* Primary */
    --inc-palette-primary-default-strong: oklch(61.733% 0.17789 34.19);
    --inc-palette-primary-default: oklch(75.633% 0.14997 38.368);
    --inc-palette-primary-default-weak: oklch(84.406% 0.09491 49.83);
    --inc-palette-primary-background-strong: oklch(91.423% 0.0493 50.038);
    --inc-palette-primary-background: oklch(98.123% 0.01005 48.2);

    /* Secondary */
    --inc-palette-secondary-dark: oklch(59.658% 0.0915 279.584);
    --inc-palette-secondary-default: oklch(77.191% 0.06153 280.68);
    --inc-palette-secondary-default-weak: oklch(87.366% 0.06203 275.01);
    --inc-palette-secondary-background-strong: oklch(92.219% 0.02995 269.133);
    --inc-palette-secondary-background: oklch(96.806% 0.01515 273.84);

    /* Tertiary */
    --inc-palette-tertiary-dark: oklch(57.227% 0.05313 218.028);
    --inc-palette-tertiary-default: oklch(74.844% 0.09021 189.084);
    --inc-palette-tertiary-default-weak: oklch(82.532% 0.10559 188.524);
    --inc-palette-tertiary-background-strong: oklch(91.334% 0.0751 190.808);
    --inc-palette-tertiary-background: oklch(96.204% 0.02825 191.494);

    /* Error */
    --inc-palette-error-default-strong: oklch(47.261% 0.1843 30.961);
    --inc-palette-error-default: oklch(58.806% 0.2315 30.552);
    --inc-palette-error-default-weak: oklch(70.753% 0.18525 19.638);
    --inc-palette-error-background-strong: oklch(78.986% 0.12234 16.409);
    --inc-palette-error-background: oklch(96.913% 0.01511 17.018);

    /* Warning */
    --inc-palette-warning-default-strong: oklch(67.976% 0.13674 86.46);
    --inc-palette-warning-default: oklch(77.93% 0.15435 88.091);
    --inc-palette-warning-default-weak: oklch(87.839% 0.14145 87.837);
    --inc-palette-warning-background-strong: oklch(93.683% 0.0823 94.064);
    --inc-palette-warning-background: oklch(98.052% 0.02099 85.922);

    /* Success */
    --inc-palette-success-default-strong: oklch(58.313% 0.12531 114.609);
    --inc-palette-success-default: oklch(76.52% 0.1325 118.222);
    --inc-palette-success-default-weak: oklch(89.444% 0.12171 123.603);
    --inc-palette-success-background-strong: oklch(94.189% 0.08953 124.974);
    --inc-palette-success-background: oklch(96.974% 0.03606 118.98);

    /* Grayscale */
    --inc-palette-grayscale-background: oklch(92.863% 0.00857 84.5);
    --inc-palette-grayscale-background-weak: oklch(98.857% 0.0016 66.216);
    --inc-palette-grayscale-input: oklch(100% 0.00011 271.152);
    --inc-palette-grayscale-line: oklch(89.834% 0.01492 70.746);
    --inc-palette-grayscale-placeholder: oklch(78.154% 0.01966 83.03);
    --inc-palette-grayscale-label: oklch(59.009% 0.01046 62.307);
    --inc-palette-grayscale-body: oklch(46.518% 0.00879 80.644);
    --inc-palette-grayscale-header-weak: oklch(39.268% 0.00985 73.536);
    --inc-palette-grayscale-header: oklch(23.108% 0.00406 84.552);

    /* Form state tokens */
    /* Control (i.e. Input) */
    --inc-form-control-label: var(--inc-palette-grayscale-label);
    --inc-form-control-label-disabled: oklch(from var(--inc-palette-grayscale-label) calc(l + ((1 - l) / 2)) calc(c * 0.5) h);

    --inc-form-control-placeholder: var(--inc-palette-grayscale-placeholder);

    --inc-form-control-foreground: var(--inc-palette-grayscale-header);
    --inc-form-control-foreground-success: var(--inc-palette-success-default-strong);
    --inc-form-control-foreground-error: var(--inc-palette-error-default-strong);
    --inc-form-control-foreground-disabled: oklch(from var(--inc-palette-grayscale-header) calc(l * 1.5) calc(c * 0.5) h);

    --inc-form-control-background: var(--inc-palette-grayscale-input);
    --inc-form-control-background-active: var(--inc-palette-grayscale-background);
    --inc-form-control-background-disabled: oklch(from var(--inc-palette-grayscale-input) l calc(c * 0.5) h / 0.5);
    --inc-form-control-background-success: var(--inc-palette-success-background);
    --inc-form-control-background-error: var(--inc-palette-error-background);

    --inc-form-control-border: transparent;
    --inc-form-control-border-active: var(--inc-palette-grayscale-header);

    --inc-form-control-outline: transparent;
    --inc-form-control-outline-active: var(--inc-palette-primary-background-strong, oklch(91.423% 0.0493 50.038));

    /* OTP */
    --inc-form-otp-gap: 0.5rem;
    --inc-form-otp-padding-block: 1rem;
    --inc-form-otp-filled-incomplete-background: var(--inc-palette-secondary-background);
    --inc-form-otp-filled-complete-background: var(--inc-palette-success-background);

    /* Popup */
    --inc-form-popup-foreground: var(--inc-palette-grayscale-header);
    --inc-form-popup-background: var(--inc-palette-grayscale-background);
    --inc-form-popup-border: var(--inc-palette-grayscale-line);

    /* Radio */
    --inc-form-radio-indicator: transparent;
    --inc-form-radio-indicator-checked: var(--inc-palette-primary-default-strong);

    /* GLOBAL COLOR TOKENS */
    /* Theme */
    --inc-color-background: var(--inc-palette-grayscale-header);
    --inc-color-foreground: var(--inc-palette-grayscale-background);

    /* User type */
    --inc-color-userType-artist: var(--inc-palette-blue);
    --inc-color-userType-creator: var(--inc-palette-green);

    /* TYPOGRAPHY */
    /* If 16 = 2vi, then */
    /* 64 = 4, 56 = 3.5, 48 = 3, 36 = 2.25, 24 = 1.5, 18 = 1.125 */
    /* 20 = 1.25, 18 = 1.125, 15 = 0.9375, 13 = 0.8125 */
    /* Type: Display */
    --inc-type-display-xl--min: 32px;
    --inc-type-display-xl--max: 64px;
    --inc-type-display-xl: clamp(var(--inc-type-display-xl--min), 4vi, var(--inc-type-display-xl--max));

    --inc-type-display-lg--min: 28px;
    --inc-type-display-lg--max: 56px;
    --inc-type-display-lg: clamp(var(--inc-type-display-lg--min), 3.5vi, var(--inc-type-display-lg--max));

    --inc-type-display-md--min: 24px;
    --inc-type-display-md--max: 48px;
    --inc-type-display-md: clamp(var(--inc-type-display-md--min), 3vi, var(--inc-type-display-md--max));

    --inc-type-display-sm--min: 20px;
    --inc-type-display-sm--max: 36px;
    --inc-type-display-sm: clamp(var(--inc-type-display-sm--min), 2.25vi, var(--inc-type-display-sm--max));

    --inc-type-display-xs--min: 20px;
    --inc-type-display-xs--max: 24px;
    --inc-type-display-xs: clamp(var(--inc-type-display-xs--min), 1.5vi, var(--inc-type-display-xs--max));

    --inc-type-display-xxs--min: 18px;
    --inc-type-display-xxs--max: 18px;
    --inc-type-display-xxs: clamp(var(--inc-type-display-xxs--min), 1.125vi, var(--inc-type-display-xxs--max));

    /* Type: Text */
    --inc-type-text-lg--min: 20px;
    --inc-type-text-lg--max: 20px;
    --inc-type-text-lg: clamp(var(--inc-type-text-lg--min), 1.25vi, var(--inc-type-text-lg--max));

    --inc-type-text-md--min: 17px;
    --inc-type-text-md--max: 18px;
    --inc-type-text-md: clamp(var(--inc-type-text-md--min), 1.125vi, var(--inc-type-text-md--max));

    --inc-type-text-sm--min: 15px;
    --inc-type-text-sm--max: 15px;
    --inc-type-text-sm: clamp(var(--inc-type-text-sm--min), 0.9375vi, var(--inc-type-text-sm--max));

    --inc-type-text-xs--min: 13px;
    --inc-type-text-xs--max: 13px;
    --inc-type-text-xs: clamp(var(--inc-type-text-xs--min), 0.8125vi, var(--inc-type-text-xs--max));

    /* Type: Link */
    --inc-type-link-lg--min: 20px;
    --inc-type-link-lg--max: 20px;
    --inc-type-link-lg: clamp(var(--inc-type-link-lg--min), 1.25vi, var(--inc-type-link-lg--max));

    --inc-type-link-md--min: 17px;
    --inc-type-link-md--max: 18px;
    --inc-type-link-md: clamp(var(--inc-type-link-md--min), 1.125vi, var(--inc-type-link-md--max));

    --inc-type-link-sm--min: 15px;
    --inc-type-link-sm--max: 15px;
    --inc-type-link-sm: clamp(var(--inc-type-link-sm--min), 0.9375vi, var(--inc-type-link-sm--max));

    --inc-type-link-xs--min: 13px;
    --inc-type-link-xs--max: 13px;
    --inc-type-link-xs: clamp(var(--inc-type-link-xs--min), 0.8125vi, var(--inc-type-link-xs--max));

    /* BREAKPOINTS */
    --inc-bp-sm: 600px;
    --inc-bp-md: 900px;
    --inc-bp-lg: 1200px;

    --inc-inline-size-sm: min(var(--inc-bp-sm), 100vi);
    --inc-inline-size-md: min(var(--inc-bp-md), 100vi);
    --inc-inline-size-lg: min(var(--inc-bp-lg), 100vi);

    /* SPACING and DIMENSIONS */
    /* Base dimensions */
    --inc-base-outline-width: 0.25rem;

    --inc-base-border-width: 2px;
    --inc-base-border-radius: 0.5rem;

    --inc-base-padding-inline: 1.5rem;
    --inc-base-padding-block: 2rem;

    --inc-base-section-padding-inline-sm: 1rem;
    --inc-base-section-padding-block-sm: 1.333rem;
    --inc-base-section-padding-inline-md: 1.875rem;
    --inc-base-section-padding-block-md: 2.5rem;
    --inc-base-section-gap: 1rem;

    --inc-base-form-gap-inline: 0.5rem;
    --inc-base-form-gap-block: 1rem;

    --inc-base-label-gap: 0.25rem;

    --inc-base-input-padding-inline: calc(20rem / 16);
    --inc-base-input-padding-block: calc(9rem / 16);
    --inc-base-input-gap: 0.5rem;

    --inc-base-popup-corner-radius: 0.75rem;
  }

  .root_fadeOut__psIAV {
    opacity: 0;
    transition: opacity 0.4s ease-in;

    @starting-style {
      opacity: 1;
    }
  }

  .root_fadeIn__0SMqe {
    opacity: 1;
    transition: opacity 0.4s ease-in;

    @starting-style {
      opacity: 0;
    }
  }
}