:root {
  --color-primary-flow-700: #414496;
  --color-primary-flow-default: #5155bc;
  --color-primary-flow-200: #dcddf2;
  --color-primary-flow-100: #eeeef8;
  --color-accent-light-default: #f6ff8a;
  --color-accent-light-500: #f8ffa6;
  --color-accent-light-100: #fefff5;
  --color-neutral-800: #191a15;
  --color-neutral-default: #393a32;
  --color-neutral-500: #898a84;
  --color-neutral-300: #f0f0ee;
  --color-neutral-200: #f7f7f5;
  --color-neutral-100: #ffffff;
  --transparency-default-decimal: 1;
  --transparency-default-percent: 100%;
  --transparency-80-decimal: 0.8;
  --transparency-80-percent: 80%;
  --transparency-00-decimal: 0;
  --transparency-00-percent: 0%;
}

.gradient--fade-top, .gradient--fade-right, .gradient--fade-bottom, .gradient--fade-left, .gradient--fade-top-dark, .gradient--fade-right-dark, .gradient--fade-bottom-dark, .gradient--fade-left-dark, .gradient--fade-top-light, .gradient--fade-right-light, .gradient--fade-bottom-light, .gradient--fade-left-light {
  position: relative;
  overflow: hidden;
}
.gradient--fade-top::before, .gradient--fade-right::before, .gradient--fade-bottom::before, .gradient--fade-left::before, .gradient--fade-top-dark::before, .gradient--fade-right-dark::before, .gradient--fade-bottom-dark::before, .gradient--fade-left-dark::before, .gradient--fade-top-light::before, .gradient--fade-right-light::before, .gradient--fade-bottom-light::before, .gradient--fade-left-light::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.gradient--fade-top > div, .gradient--fade-right > div, .gradient--fade-bottom > div, .gradient--fade-left > div, .gradient--fade-top-dark > div, .gradient--fade-right-dark > div, .gradient--fade-bottom-dark > div, .gradient--fade-left-dark > div, .gradient--fade-top-light > div, .gradient--fade-right-light > div, .gradient--fade-bottom-light > div, .gradient--fade-left-light > div {
  position: relative;
  z-index: 2;
}
.gradient--fade-top::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-right::before {
  background: linear-gradient(to left, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-bottom::before {
  background: linear-gradient(to top, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-left::before {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-top-dark::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-right-dark::before {
  background: linear-gradient(to left, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-bottom-dark::before {
  background: linear-gradient(to top, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-left-dark::before {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-neutral-800) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-800) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-top-light::before {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-neutral-200) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-200) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-right-light::before {
  background: linear-gradient(to left, color-mix(in srgb, var(--color-neutral-200) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-200) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-bottom-light::before {
  background: linear-gradient(to top, color-mix(in srgb, var(--color-neutral-200) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-200) var(--transparency-00-percent), transparent) 50%, transparent);
}
.gradient--fade-left-light::before {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-neutral-200) var(--transparency-80-percent), transparent), color-mix(in srgb, var(--color-neutral-200) var(--transparency-00-percent), transparent) 50%, transparent);
}