@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css";@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');/**
 * Centralized breakpoint variables
 * Change this value once and it updates everywhere
 */
:root j-menu-group::part(summary) {
  margin: 5px 0;
}
:root j-menu-group::part(summary)::after {
  top: 5px;
}
@media screen and (max-width: 950px) {
:root {
    --j-font-base-size: 15px !important;
}
}
html {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: var(--j-font-base-size);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--j-color-white);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--j-color-ui-100);
  border-radius: var(--j-border-radius);
  border: 1px solid var(--j-color-white);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--j-color-ui-100);
}
body {
  -webkit-font-smoothing: antialiased;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  color: var(--j-color-ui-800);
  font-family: var(--j-font-family);
  /* background-color: var(--j-color-white); */
}
#app {
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.global-modal {
  z-index: 999;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
}
.global-modal__backdrop {
  position: absolute;
  left: 0;
  height: 0;
  width: 100%;
  height: 100%;
  background: var(--j-color-white);
  opacity: 0.9;
  backdrop-filter: blur(15px);
}
.global-modal__content {
  position: relative;
}
.global-modal j-spinner {
  --j-spinner-size: 80px;
}
:root{--j-color-saturation: 60%;--j-color-subtractor: 0%;--j-color-multiplier: 1;--j-color-lightness-0: calc((100% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-50: calc((98% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-100: calc((90% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-200: calc((80% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-300: calc((70% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-400: calc((60% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-500: calc((50% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-600: calc((40% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-700: calc((30% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-800: calc((20% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-900: calc((10% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-lightness-1000: calc((0% - var(--j-color-subtractor)) * var(--j-color-multiplier));--j-color-primary-hue: 610;--j-color-primary-50: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-50));--j-color-primary-100: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-100));--j-color-primary-200: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-200));--j-color-primary-300: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-300));--j-color-primary-400: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-400));--j-color-primary-500: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-500));--j-color-primary-600: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-600));--j-color-primary-700: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-700));--j-color-primary-800: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-800));--j-color-primary-900: hsl(var(--j-color-primary-hue), var(--j-color-saturation), var(--j-color-lightness-900));--j-color-success-hue: 130;--j-color-success-50: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-50));--j-color-success-100: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-100));--j-color-success-200: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-200));--j-color-success-300: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-300));--j-color-success-400: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-400));--j-color-success-500: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-500));--j-color-success-600: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-600));--j-color-success-700: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-700));--j-color-success-800: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-800));--j-color-success-900: hsl(var(--j-color-success-hue), var(--j-color-saturation), var(--j-color-lightness-900));--j-color-warning-hue: 45;--j-color-warning-50: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-50));--j-color-warning-100: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-100));--j-color-warning-200: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-200));--j-color-warning-300: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-300));--j-color-warning-400: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-400));--j-color-warning-500: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-500));--j-color-warning-600: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-600));--j-color-warning-700: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-700));--j-color-warning-800: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-800));--j-color-warning-900: hsl(var(--j-color-warning-hue), var(--j-color-saturation), var(--j-color-lightness-900));--j-color-danger-hue: 350;--j-color-danger-50: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-50));--j-color-danger-100: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-100));--j-color-danger-200: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-200));--j-color-danger-300: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-300));--j-color-danger-400: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-400));--j-color-danger-500: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-500));--j-color-danger-600: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-600));--j-color-danger-700: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-700));--j-color-danger-800: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-800));--j-color-danger-900: hsl(var(--j-color-danger-hue), var(--j-color-saturation), var(--j-color-lightness-900));--j-color-ui-hue: var(--j-color-primary-hue);--j-color-ui-saturation: 10%;--j-color-ui-50: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-50));--j-color-ui-100: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-100));--j-color-ui-200: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-200));--j-color-ui-300: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-300));--j-color-ui-400: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-400));--j-color-ui-500: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-500));--j-color-ui-600: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-600));--j-color-ui-700: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-700));--j-color-ui-800: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-800));--j-color-ui-900: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-900));--j-color-white: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-0));--j-color-black: hsl(var(--j-color-ui-hue), var(--j-color-ui-saturation), var(--j-color-lightness-1000));--j-color-focus: var(--j-color-primary-500);--j-focus-outline: 0px 0px 0px 4px var(--j-color-focus);--j-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--j-font-base-size: 16px;--j-font-size-100: .56rem;--j-font-size-200: .63rem;--j-font-size-300: .75rem;--j-font-size-400: .88rem;--j-font-size-500: 1rem;--j-font-size-600: 1.25rem;--j-font-size-700: 1.5rem;--j-font-size-800: 2rem;--j-font-size-900: 2.63rem;--j-font-size-1000: 3.63rem;--j-space-100: .25rem;--j-space-200: .38rem;--j-space-300: .5rem;--j-space-400: 1rem;--j-space-500: 1.5rem;--j-space-600: 2rem;--j-space-700: 2.38rem;--j-space-800: 2.75rem;--j-space-900: 3.25rem;--j-space-1000: 4rem;--j-border-width: 1px;--j-border-radius: 8px;--j-border-radius-sm: 4px;--j-border-radius-md: 8px;--j-border-radius-lg: 16px;--j-border-color: var(--j-color-ui-100);--j-border-color-strong: var(--j-color-ui-200);--j-size-xxs: 1.25rem;--j-size-xs: 1.75rem;--j-size-sm: 2.25rem;--j-size-md: 2.625rem;--j-size-lg: 3.25rem;--j-size-xl: 3.8rem;--j-size-xxl: 5rem;--j-scrollbar-width: 6px;--j-scrollbar-background-image: none;--j-scrollbar-background: transparent;--j-scrollbar-corner-background: #dfdfdf;--j-scrollbar-thumb-box-shadow: none;--j-scrollbar-thumb-border-radius: var(--j-border-radius);--j-scrollbar-thumb-background: hsl(var(--j-color-ui-hue), 5%, var(--j-color-lightness-100));--j-depth-none: none;--j-depth-100: 0px 1px 1px 0px rgba(9, 30, 66, .06), 0px 2px 4px 0px rgba(9, 30, 66, .15);--j-depth-200: 0px 2px 2px 0px rgba(9, 30, 66, .06), 0px 4px 8px -2px rgba(9, 30, 66, .25);--j-depth-300: 0px 2px 2px 0px rgba(9, 30, 66, .06), 0px 8px 16px -4px rgba(9, 30, 66, .25);--j-depth-400: 0px 4px 4px 0px rgba(9, 30, 66, .06), 0px 12px 24px -6px rgba(9, 30, 66, .25);--j-depth-500: 0px 6px 6px 0px rgba(9, 30, 66, .1), 0px 20px 32px -8px rgba(9, 30, 66, .25);--j-transition-100: 50ms;--j-transition-200: 1.5s;--j-transition-300: .25s;--j-transition-400: .5s;--j-transition-500: 1s}

/*# sourceMappingURL=main.css.map */html.black {
  --j-color-subtractor: 100%;
  --j-color-multiplier: -1;
}

html.black j-tooltip::part(tooltip) {
  background: var(--j-color-ui-100);
  color: var(--j-color-black);
}

html.black j-menu-item::part(base) {
  margin-top: var(--j-space-100);
  margin-left: var(--j-space-400);
  margin-right: var(--j-space-400);
  border-radius: 6px;
}
html.cyberpunk {
  --j-color-multiplier: -1;
  --j-color-subtractor: 110%;
  --j-font-family: monospace;
  --j-border-radius: 0px;
  --j-border-color: var(--j-color-primary-200);
  --j-border-color-strong: var(--j-color-primary-400);
  --j-size-sm: 30px;
  --j-size-md: 40px;
  --j-size-lg: 50px;
}

html.cyberpunk j-text[variant^='heading'] {
  display: block;
  position: relative;
  animation-name: glitched;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: ease-out;
  --j-text-color: var(--j-color-primary-500);
}

html.cyberpunk j-button::part(base) {
  cursor: pointer;
  clip-path: polygon(-15px 0%, calc(100% + 15px) 0%, calc(100% + 15px) 100%, 20px 100%, -15px calc(100% - 35px));
}

html.cyberpunk j-button:hover {
  display: inline-block;
  animation-name: glitched;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-timing-function: ease-out;
}

html.cyberpunk j-menu-item::part(base) {
  margin-top: var(--j-space-100);
  margin-left: var(--j-space-300);
  margin-right: 0;
  clip-path: polygon(90% 0, 0 0, 0 50%, 5% 100%, 0% 100%, 100% 100%, 100% 0%);
}

html.cyberpunk j-tab-item::part(base) {
  clip-path: polygon(87% 0, 0 0, 0 50%, 13% 100%, 88% 100%, 100% 100%, 99% 16%);
}

html.cyberpunk j-input::part(input-wrapper) {
  height: 60px;
  font-size: 16px;
  border: 10px solid var(--j-color-primary-500);
  border-left: 2px solid var(--j-color-primary-500);
  border-right: 2px solid var(--j-color-primary-500);
  border-bottom: 10px solid var(--j-color-primary-500);
  border-color: var(--j-color-primary-200);
  clip-path: polygon(
    0px 5px,
    5px 0px,
    calc(60% - 5px) 0px,
    60% 5px,
    100% 5px,
    100% calc(100% - 5px),
    calc(100% - 5px) calc(100% - 3px),
    calc(80% - 3px) calc(100% - 3px),
    calc(80% - 5px) calc(100% - 0px),
    0px calc(100% - 0px),
    0% calc(100% - 0px)
  );
}

html.cyberpunk j-input::part(input-wrapper):focus-within {
  border-color: var(--j-color-primary-500);
}

html.cyberpunk j-text[variant^='heading']::after {
  display: block;
  content: '';
  width: 100%;
  bottom: -10px;
  left: 0;
  height: 10px;
  clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px);
  background: var(--j-color-primary-500);
}

@keyframes glitched {
  0% {
    transform: skew(-15deg);
    left: -4px;
  }
  10% {
    transform: skew(-15deg);
    left: -4px;
  }
  11% {
    transform: skew(0deg);
    left: 2px;
  }
  50% {
    transform: skew(0deg);
  }
  51% {
    transform: skew(5deg);
  }
  59% {
    transform: skew(5deg);
  }
  60% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}
html.dark {
  --j-color-saturation: 50%;
  --j-color-subtractor: 108%;
  --j-color-multiplier: -1;
  --j-color-ui-saturation: 20%;
}

html.dark j-modal::part(modal) {
  box-shadow: 0px 0px 40px 20px hsla(var(--j-color-primary-hue), var(--j-color-saturation), 20%, 0.05);
}

html.dark j-tooltip::part(tooltip) {
  background: var(--j-color-ui-50);
  color: var(--j-color-black);
}

html.dark j-menu-item::part(base) {
  margin-top: var(--j-space-100);
  margin-left: var(--j-space-300);
  margin-right: var(--j-space-300);
  border-radius: 6px;
}


html.retro {
  --j-color-primary-hue: 230 !important;
  --j-border-radius: 0px;
  --j-border-color: silver;
  --j-font-family: monospace !important;
  --j-size-sm: 30px;
  --j-size-md: 40px;
  --j-size-lg: 50px;
  --j-scrollbar-thumb-box-shadow:
    inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  --j-scrollbar-thumb-background: #dfdfdf;
  --j-scrollbar-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");
  --j-scrollbar-width: 16px;
  --j-scrollbar-thumb-border-radius: 0;
}

html.retro j-modal::part(modal) {
  position: relative;
  background: silver;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
  padding: 0;
}

html.retro j-modal::part(close-button) {
  top: 10px;
  right: 10px;
  padding: var(--j-space-200);
  width: var(--j-size-sm);
  height: var(--j-size-sm);
  background: silver;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.retro j-modal::part(header) {
  display: block;
  height: 50px;
  background: linear-gradient(90deg, navy, #1084d0);
}

html.retro j-toggle::part(indicator) {
  border-radius: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-toggle::part(toggle) {
  border-radius: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-avatar::part(base) {
  border-radius: 0;
  border: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-avatar[selected]::part(base) {
  border-radius: 0;
  box-shadow: 0px 0px 0px 2px var(--j-color-primary-500);
}

html.retro j-avatar::part(img) {
  border-radius: 0;
}

html.retro j-button::part(base) {
  background: silver !important;
  color: #222 !important;
  font-weight: 400;
  border: 0 !important;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-button[disabled]::part(base) {
  text-shadow: 1px 1px 0 #fff;
}

html.retro j-button::part(base):active {
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf,
    inset 2px 2px grey;
}

html.retro j-button[variant='primary']::part(base) {
  border: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-button[circle]::part(base) {
  border-radius: 0;
}

html.retro j-tabs::part(base) {
  background: none;
  border: 0;
}

html.retro j-tabs::part(base)::before {
  content: none;
}

html.retro j-menu::part(base) {
  background: var(--j-color-ui-100);
}

html.retro j-menu-group-item::part(summary) {
  padding-left: var(--j-space-300);
}

html.retro j-menu-group-item::part(content) {
  border-left: 1px dotted grey;
  margin-left: var(--j-space-500);
}

html.retro j-menu-item::part(base) {
  position: relative;
}

html.retro j-menu-item::part(base):after {
  position: absolute;
  content: '';
  display: block;
  left: 0;
  width: 15px;
  height: 1px;
  border-top: 1px dotted grey;
}

html.retro j-tab-item::part(base) {
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-input::part(input-wrapper) {
  background: white;
  border: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

html.retro j-input::part(input-wrapper):focus-within {
  border: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}
html.retro {
  --app-main-sidebar-bg-color: white;
  --app-drawer-bg-color: white;
  --app-main-content-bg-color: white;
  --app-channel-bg-color: white;
}

html.light {
  --app-main-sidebar-bg-color: hsl(var(--j-color-ui-hue), 45%, 98%);
  --app-main-sidebar-border-color: hsl(var(--j-color-ui-hue), 45%, 93%);

  --app-drawer-bg-color: hsl(var(--j-color-ui-hue), 45%, 99%);
  --app-drawer-border-color: hsl(var(--j-color-ui-hue), 45%, 93%);

  --app-main-content-bg-color: hsl(var(--j-color-ui-hue), 0%, 100%);

  --app-channel-bg-color: hsl(var(--j-color-ui-hue), 0%, 99%);
  --app-channel-header-bg-color: hsl(var(--j-color-ui-hue), 0%, 99%);
  --app-channel-footer-bg-color: hsl(var(--j-color-ui-hue), 0%, 100%);
  --app-channel-border-color: hsl(var(--j-color-ui-hue), 0%, 100%);
}

.html.default {
  --app-main-sidebar-bg-color: hsl(var(--j-color-ui-hue), 0%, 8%);
  --app-main-sidebar-border-color: transparent;
  --app-drawer-bg-color: hsl(var(--j-color-ui-hue), 0%, 13%);
  --app-drawer-border-color: transparent;
  --app-main-content-bg-color: hsl(var(--j-color-ui-hue), 0%, 17%);
  --app-channel-bg-color: hsl(var(--j-color-ui-hue), 0%, 15%);
  --app-channel-header-bg-color: hsl(var(--j-color-ui-hue), 0%, 15%);
  --app-channel-footer-bg-color: hsl(var(--j-color-ui-hue), 0%, 13%);
  --app-channel-border-color: transparent;
  --j-color-ui-saturation: 0%;
}

html.dark {
  --app-main-sidebar-bg-color: hsl(var(--j-color-ui-hue), 10%, 8%);
  --app-main-sidebar-border-color: transparent;
  --app-drawer-bg-color: hsl(var(--j-color-ui-hue), 10%, 10%);
  --app-drawer-border-color: transparent;
  --app-main-content-bg-color: hsl(var(--j-color-ui-hue), 10%, 13%);
  --app-channel-bg-color: hsl(var(--j-color-ui-hue), 10%, 13%);
  --app-channel-header-bg-color: hsl(var(--j-color-ui-hue), 10%, 13%);
  --app-channel-footer-bg-color: hsl(var(--j-color-ui-hue), 10%, 13%);
  --app-channel-border-color: transparent;
}

html.black {
  --app-channel-bg-color: hsl(var(--j-color-ui-hue), 0%, 0%);
}

html.gradient {
  --j-color-saturation: 50%;
  --j-color-subtractor: 108%;
  --j-color-multiplier: -1;
  --j-color-ui-saturation: 20%;

  --app-gradient-1: var(--j-color-ui-hue);
  --app-gradient-2: calc(var(--j-color-ui-hue) + 80);

  --app-main-sidebar-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 30%, 8%),
    hsl(var(--app-gradient-2), 30%, 15%)
  );
  --app-main-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 20%, 8%),
    hsl(var(--app-gradient-2), 20%, 12%)
  );
  --app-main-sidebar-border-color: transparent;
  --app-drawer-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 30%, 5%),
    hsl(var(--app-gradient-2), 30%, 10%)
  );
  --app-drawer-border-color: transparent;
  --app-main-content-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 20%, 5%),
    hsl(var(--app-gradient-2), 20%, 10%)
  );
  --app-channel-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 20%, 8%),
    hsl(var(--app-gradient-2), 20%, 15%)
  );
  --app-channel-header-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 20%, 8%),
    hsl(var(--app-gradient-2), 20%, 10%)
  );
  --app-channel-footer-bg-color: linear-gradient(
    160deg,
    hsl(var(--app-gradient-1), 20%, 5%),
    hsl(var(--app-gradient-2), 20%, 10%)
  );
  --app-channel-border-color: transparent;
}

html.gradient j-menu-item::part(base):hover {
  background: transparent;
}

html.gradient j-menu-item[selected]::part(base) {
  background: linear-gradient(45deg, hsl(var(--app-gradient-1), 50%, 10%), hsl(var(--app-gradient-2), 50%, 20%));
  color: var(--j-color-black);
  font-weight: 800;
}

html.gradient j-tabs[variant='button'] j-tab-item[checked]::part(base) {
  background: linear-gradient(45deg, hsl(var(--app-gradient-1), 50%, 10%), hsl(var(--app-gradient-2), 50%, 20%));
  color: var(--j-color-black);
}

html.gradient j-modal::part(modal) {
  background: linear-gradient(45deg, hsl(var(--app-gradient-1), 20%, 5%), hsl(var(--app-gradient-2), 20%, 9%));
}

html.gradient j-button[variant='primary']::part(base) {
  background: linear-gradient(45deg, hsl(var(--app-gradient-1), 70%, 60%), hsl(var(--app-gradient-2), 70%, 60%));
}

html.light j-menu-item::part(base),
html.dark j-menu-item::part(base),
html.gradient j-menu-item::part(base) {
  margin-top: var(--j-space-100);
  margin-left: var(--j-space-300);
  margin-right: var(--j-space-300);
  border-radius: 6px;
}

html.light j-modal::part(close-button),
html.dark j-modal::part(close-button),
html.gradient j-modal::part(close-button),
html.default j-modal::part(close-button),
html.retro j-modal::part(close-button) {
  z-index: 999999999;
}