@font-face {
  font-family: "Ginto Nord";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ABCGintoNord-Bold.woff2") format("woff2"),
    url("/fonts/ABCGintoNord-Bold.woff") format("woff"),
    url("/fonts/ABCGintoNord-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Ginto Nord";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ABCGintoNord-Black.woff2") format("woff2"),
    url("/fonts/ABCGintoNord-Black.woff") format("woff"),
    url("/fonts/ABCGintoNord-Black.otf") format("opentype");
}

@font-face {
  font-family: "Ginto Nord";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ABCGintoNord-Ultra.woff2") format("woff2"),
    url("/fonts/ABCGintoNord-Ultra.woff") format("woff"),
    url("/fonts/ABCGintoNord-Ultra.otf") format("opentype");
}

@font-face {
  font-family: "Ginto Normal";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/ABCGintoNormal-Medium.woff2") format("woff2"),
    url("/fonts/ABCGintoNormal-Medium.woff") format("woff"),
    url("/fonts/ABCGintoNormal-Medium.otf") format("opentype");
}

@font-face {
  font-family: "Whitney";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Whitney-Book.woff2") format("woff2"),
    url("/fonts/Whitney-Book.woff") format("woff"),
    url("/fonts/Whitney-Book.otf") format("opentype");
}

@font-face {
  font-family: "Whitney";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/Whitney-Book-Italic.woff2") format("woff2"),
    url("/fonts/Whitney-Book-Italic.woff") format("woff"),
    url("/fonts/Whitney-Book-Italic.otf") format("opentype");
}

@font-face {
  font-family: "Whitney";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Whitney-Medium.woff2") format("woff2"),
    url("/fonts/Whitney-Medium.woff") format("woff"),
    url("/fonts/Whitney-Medium.otf") format("opentype");
}

@font-face {
  font-family: "Whitney";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Whitney-Semibold.woff2") format("woff2"),
    url("/fonts/Whitney-Semibold.woff") format("woff"),
    url("/fonts/Whitney-Semibold.otf") format("opentype");
}

@font-face {
  font-family: "Whitney";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Whitney-Bold.woff2") format("woff2"),
    url("/fonts/Whitney-Bold.woff") format("woff"),
    url("/fonts/Whitney-Bold.otf") format("opentype");
}

.scrollbar-default::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.scrollbar::-webkit-scrollbar-corner {
  border: none;
  background: none;
}

.scrollbar-default::-webkit-scrollbar-thumb,
.scrollbar-default::-webkit-scrollbar-track {
  border-radius: 7px;
  background-clip: padding-box;
  border: 3px solid transparent;
}

.scrollbar-default::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-auto-thumb);
}

.scrollbar-default::-webkit-scrollbar-track {
  background-color: var(--scrollbar-auto-track);
  border-width: initial;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--background-primary);
  margin: 0;
  padding: 0;
}

::placeholder,
body,
button,
input,
select,
textarea {
  font-family: var(--font-primary);
  text-rendering: optimizeLegibility;
}

a {
  color: #00aff4;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.1s;
}

ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

a,
button,
div,
input,
label,
select,
span,
strong,
textarea {
  outline: none;
}

fieldset,
blockquote,
legend,
pre {
  border: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

:root {
  --font-primary: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Ginto Normal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-headline: "Ginto Nord", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-code: 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-korean: Whitney, "Apple SD Gothic Neo", NanumBarunGothic,
    "\B9D1\C740 \ACE0\B515", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-japanese: Whitney, "Hiragino Sans",
    "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", "Hiragino Kaku Gothic ProN",
    メイリオ, Meiryo, Osaka, "MS PGothic", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-chinese-simplified: Whitney, "Microsoft YaHei New", 微软雅黑,
    "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-chinese-traditional: Whitney, "Microsoft JhengHei", 微軟正黑體,
    "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root {
  --saturation-factor: 1;
  --brand-100: hsl(240, 77.8%, 98.2%);
  --brand-130: hsl(236, 87.5%, 96.9%);
  --brand-160: hsl(235, 84.6%, 94.9%);
  --brand-200: hsl(236, 83.3%, 92.9%);
  --brand-230: hsl(236, 87%, 91%);
  --brand-260: hsl(235, 86.2%, 88.6%);
  --brand-300: hsl(235, 86.1%, 85.9%);
  --brand-330: hsl(235, 85.1%, 81.6%);
  --brand-360: hsl(235, 86.1%, 77.5%);
  --brand-400: hsl(235, 86.1%, 71.8%);
  --brand-430: hsl(235, 85.7%, 69.8%);
  --brand-460: hsl(235, 85.5%, 67.5%);
  --brand: hsl(235, 85.6%, 64.7%);
  --brand-500: hsl(235, 85.6%, 64.7%);
  --brand-530: hsl(235, 66.7%, 58.8%);
  --brand-560: hsl(235, 51.4%, 52.4%);
  --brand-600: hsl(235, 46.7%, 44.1%);
  --brand-630: hsl(235, 46.7%, 38.2%);
  --brand-660: hsl(235, 47.1%, 33.3%);
  --brand-700: hsl(235, 47%, 25.9%);
  --brand-730: hsl(235, 46.8%, 24.3%);
  --brand-760: hsl(234, 46.9%, 22.2%);
  --brand-800: hsl(235, 47.5%, 19.4%);
  --brand-830: hsl(235, 47.4%, 14.9%);
  --brand-860: hsl(235, 46.9%, 9.6%);
  --brand-900: hsl(233, 50%, 3.1%);
  --brand-05a: hsla(235, 85.6%, 64.7%, 0.05);
  --brand-10a: hsla(235, 85.6%, 64.7%, 0.1);
  --brand-15a: hsla(235, 85.6%, 64.7%, 0.15);
  --brand-20a: hsla(235, 85.6%, 64.7%, 0.2);
  --brand-25a: hsla(235, 85.6%, 64.7%, 0.25);
  --brand-30a: hsla(235, 85.6%, 64.7%, 0.3);
  --brand-35a: hsla(235, 85.6%, 64.7%, 0.35);
  --brand-40a: hsla(235, 85.6%, 64.7%, 0.4);
  --brand-45a: hsla(235, 85.6%, 64.7%, 0.45);
  --brand-50a: hsla(235, 85.6%, 64.7%, 0.5);
  --brand-55a: hsla(235, 85.6%, 64.7%, 0.55);
  --brand-60a: hsla(235, 85.6%, 64.7%, 0.6);
  --brand-65a: hsla(235, 85.6%, 64.7%, 0.65);
  --brand-70a: hsla(235, 85.6%, 64.7%, 0.7);
  --brand-75a: hsla(235, 85.6%, 64.7%, 0.75);
  --brand-80a: hsla(235, 85.6%, 64.7%, 0.8);
  --brand-85a: hsla(235, 85.6%, 64.7%, 0.85);
  --brand-90a: hsla(235, 85.6%, 64.7%, 0.9);
  --brand-95a: hsla(235, 85.6%, 64.7%, 0.95);
}

.theme-light {
  --header-primary: hsl(240, calc(var(--saturation-factor, 1) * 7.7%), 2.5%);
  --header-secondary: hsl(215, calc(var(--saturation-factor, 1) * 9.7%), 34.3%);
  --text-normal: hsl(210, calc(var(--saturation-factor, 1) * 9.8%), 20%);
  --text-muted: hsl(213, calc(var(--saturation-factor, 1) * 9.6%), 40.8%);
  --text-link: hsl(212, calc(var(--saturation-factor, 1) * 100%), 43.9%);
  --text-link-low-saturation: hsl(
    212,
    calc(var(--saturation-factor, 1) * 100%),
    43.9%
  );
  --text-positive: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  --text-warning: hsl(38, calc(var(--saturation-factor, 1) * 81.5%), 31.8%);
  --text-danger: hsl(359, calc(var(--saturation-factor, 1) * 56.3%), 40.4%);
  --text-brand: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  --interactive-normal: hsl(
    215,
    calc(var(--saturation-factor, 1) * 9.7%),
    34.3%
  );
  --interactive-hover: hsl(210, calc(var(--saturation-factor, 1) * 9.8%), 20%);
  --interactive-active: hsl(
    240,
    calc(var(--saturation-factor, 1) * 7.7%),
    2.5%
  );
  --interactive-muted: hsl(210, calc(var(--saturation-factor, 1) * 9.8%), 80%);
  --background-primary: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --background-secondary: hsl(
    220,
    calc(var(--saturation-factor, 1) * 13%),
    95.5%
  );
  --background-secondary-alt: hsl(
    210,
    calc(var(--saturation-factor, 1) * 11.1%),
    92.9%
  );
  --background-tertiary: hsl(
    216,
    calc(var(--saturation-factor, 1) * 9.8%),
    90%
  );
  --background-accent: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --background-floating: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --background-nested-floating: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --background-mobile-primary: hsl(
    180,
    calc(var(--saturation-factor, 1) * 7.7%),
    97.5%
  );
  --background-mobile-secondary: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --chat-background: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --chat-border: hsl(210, calc(var(--saturation-factor, 1) * 2.9%), 86.7%);
  --chat-input-container-background: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --background-modifier-hover: hsla(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%,
    0.16
  );
  --background-modifier-active: hsla(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%,
    0.2
  );
  --background-modifier-selected: hsla(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%,
    0.24
  );
  --background-modifier-accent: hsla(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%,
    0.24
  );
  --info-positive-background: hsla(
    139,
    calc(var(--saturation-factor, 1) * 47.4%),
    38%,
    0.05
  );
  --info-positive-foreground: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.4%),
    38%
  );
  --info-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%);
  --info-warning-background: hsla(
    38,
    calc(var(--saturation-factor, 1) * 80.9%),
    36.9%,
    0.1
  );
  --info-warning-foreground: hsl(
    38,
    calc(var(--saturation-factor, 1) * 80.9%),
    36.9%
  );
  --info-warning-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%);
  --info-danger-background: hsla(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%,
    0.1
  );
  --info-danger-foreground: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --info-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%);
  --info-help-background: hsla(
    212,
    calc(var(--saturation-factor, 1) * 100%),
    43.9%,
    0.1
  );
  --info-help-foreground: hsl(
    212,
    calc(var(--saturation-factor, 1) * 100%),
    43.9%
  );
  --info-help-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%);
  --status-positive-background: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --status-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --status-warning-background: hsl(
    38,
    calc(var(--saturation-factor, 1) * 80.9%),
    36.9%
  );
  --status-warning-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --status-danger-background: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --status-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --status-danger: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  --status-positive: hsl(139, calc(var(--saturation-factor, 1) * 47.4%), 38%);
  --status-warning: hsl(38, calc(var(--saturation-factor, 1) * 80.9%), 36.9%);
  --button-danger-background: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-danger-background-hover: hsl(
    359,
    calc(var(--saturation-factor, 1) * 56.3%),
    40.4%
  );
  --button-danger-background-active: hsl(
    359,
    calc(var(--saturation-factor, 1) * 56.4%),
    35.1%
  );
  --button-danger-background-disabled: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-positive-background: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-positive-background-hover: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.8%),
    24.3%
  );
  --button-positive-background-active: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.9%),
    22.2%
  );
  --button-positive-background-disabled: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-secondary-background: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --button-secondary-background-hover: hsl(
    215,
    calc(var(--saturation-factor, 1) * 9.7%),
    34.3%
  );
  --button-secondary-background-active: hsl(
    212,
    calc(var(--saturation-factor, 1) * 9.9%),
    29.6%
  );
  --button-secondary-background-disabled: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --button-outline-danger-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%
  );
  --button-outline-danger-border: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-danger-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-danger-background-hover: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-danger-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-danger-border-hover: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-danger-background-active: hsl(
    359,
    calc(var(--saturation-factor, 1) * 56.7%),
    48%
  );
  --button-outline-danger-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-danger-border-active: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-positive-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%
  );
  --button-outline-positive-border: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.4%),
    38%
  );
  --button-outline-positive-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-positive-background-hover: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-outline-positive-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-positive-border-hover: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-outline-positive-background-active: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.8%),
    24.3%
  );
  --button-outline-positive-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-positive-border-active: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.8%),
    24.3%
  );
  --button-outline-brand-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%
  );
  --button-outline-brand-border: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --button-outline-brand-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-brand-background-hover: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --button-outline-brand-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-brand-border-hover: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --button-outline-brand-background-active: hsl(
    235,
    calc(var(--saturation-factor, 1) * 51.4%),
    52.4%
  );
  --button-outline-brand-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-brand-border-active: hsl(
    235,
    calc(var(--saturation-factor, 1) * 51.4%),
    52.4%
  );
  --button-outline-primary-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%
  );
  --button-outline-primary-border: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --button-outline-primary-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-primary-background-hover: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --button-outline-primary-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-primary-border-hover: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --button-outline-primary-background-active: hsl(
    215,
    calc(var(--saturation-factor, 1) * 9.7%),
    34.3%
  );
  --button-outline-primary-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-primary-border-active: hsl(
    215,
    calc(var(--saturation-factor, 1) * 9.7%),
    34.3%
  );
  --modal-background: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --modal-footer-background: hsl(
    220,
    calc(var(--saturation-factor, 1) * 13%),
    95.5%
  );
  --scrollbar-thin-thumb: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.3
  );
  --scrollbar-thin-track: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%,
    0
  );
  --scrollbar-auto-thumb: hsl(0, calc(var(--saturation-factor, 1) * 0%), 80%);
  --scrollbar-auto-track: hsl(0, calc(var(--saturation-factor, 1) * 0%), 94.9%);
  --scrollbar-auto-scrollbar-color-thumb: hsl(
    216,
    calc(var(--saturation-factor, 1) * 9.8%),
    90%
  );
  --scrollbar-auto-scrollbar-color-track: hsl(
    220,
    calc(var(--saturation-factor, 1) * 13%),
    95.5%
  );
  --input-background: hsl(216, calc(var(--saturation-factor, 1) * 9.8%), 90%);
  --input-placeholder-text: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.6%),
    40.8%
  );
  --logo-primary: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  --control-brand-foreground: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --control-brand-foreground-new: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --background-mentioned: hsla(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%,
    0.1
  );
  --background-mentioned-hover: hsla(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%,
    0.2
  );
  --background-message-hover: hsla(
    240,
    calc(var(--saturation-factor, 1) * 7.7%),
    2.5%,
    0.02
  );
  --background-message-automod: hsla(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%,
    0.05
  );
  --background-message-automod-hover: hsla(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%,
    0.1
  );
  --background-message-highlight: hsla(
    235,
    calc(var(--saturation-factor, 1) * 86.1%),
    77.5%,
    0.1
  );
  --background-message-highlight-hover: hsla(
    235,
    calc(var(--saturation-factor, 1) * 86.1%),
    77.5%,
    0.2
  );
  --channels-default: hsl(213, calc(var(--saturation-factor, 1) * 9.6%), 40.8%);
  --channel-icon: hsl(213, calc(var(--saturation-factor, 1) * 9.4%), 45.9%);
  --channel-text-area-placeholder: hsl(
    214,
    calc(var(--saturation-factor, 1) * 9.9%),
    50.4%
  );
  --channeltextarea-background: hsl(
    210,
    calc(var(--saturation-factor, 1) * 11.1%),
    92.9%
  );
  --activity-card-background: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --textbox-markdown-syntax: hsl(
    213,
    calc(var(--saturation-factor, 1) * 9.4%),
    45.9%
  );
  --spoiler-revealed-background: hsl(
    210,
    calc(var(--saturation-factor, 1) * 11.1%),
    92.9%
  );
  --spoiler-hidden-background: hsl(
    216,
    calc(var(--saturation-factor, 1) * 9.8%),
    90%
  );
  --android-navigation-bar-background: hsl(
    180,
    calc(var(--saturation-factor, 1) * 7.7%),
    97.5%
  );
  --android-ripple: hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.12);
  --deprecated-card-bg: hsl(
    180,
    calc(var(--saturation-factor, 1) * 7.7%),
    97.5%
  );
  --deprecated-card-editable-bg: hsla(
    240,
    calc(var(--saturation-factor, 1) * 5.9%),
    96.7%,
    0.6
  );
  --deprecated-store-bg: hsl(
    180,
    calc(var(--saturation-factor, 1) * 7.7%),
    97.5%
  );
  --deprecated-quickswitcher-input-background: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --deprecated-quickswitcher-input-placeholder: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.3
  );
  --deprecated-text-input-bg: hsl(
    216,
    calc(var(--saturation-factor, 1) * 9.8%),
    90%
  );
  --deprecated-text-input-border: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.3
  );
  --deprecated-text-input-border-hover: hsl(
    216,
    calc(var(--saturation-factor, 1) * 3.7%),
    73.5%
  );
  --deprecated-text-input-border-disabled: hsl(
    210,
    calc(var(--saturation-factor, 1) * 2.9%),
    86.7%
  );
  --deprecated-text-input-prefix: hsl(
    216,
    calc(var(--saturation-factor, 1) * 3.7%),
    73.5%
  );
}

.theme-dark {
  --header-primary: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --header-secondary: hsl(216, calc(var(--saturation-factor, 1) * 3.7%), 73.5%);
  --text-normal: hsl(210, calc(var(--saturation-factor, 1) * 2.9%), 86.7%);
  --text-muted: hsl(214, calc(var(--saturation-factor, 1) * 4%), 65.3%);
  --text-link: hsl(197, calc(var(--saturation-factor, 1) * 100%), 47.8%);
  --text-link-low-saturation: hsl(
    197,
    calc(var(--saturation-factor, 1) * 100%),
    52.9%
  );
  --text-positive: hsl(139, calc(var(--saturation-factor, 1) * 51.6%), 52.2%);
  --text-warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  --text-danger: hsl(359, calc(var(--saturation-factor, 1) * 82%), 73.9%);
  --text-brand: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  --interactive-normal: hsl(
    216,
    calc(var(--saturation-factor, 1) * 3.7%),
    73.5%
  );
  --interactive-hover: hsl(
    210,
    calc(var(--saturation-factor, 1) * 2.9%),
    86.7%
  );
  --interactive-active: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --interactive-muted: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --background-primary: hsl(
    220,
    calc(var(--saturation-factor, 1) * 7.7%),
    22.9%
  );
  --background-secondary: hsl(
    223,
    calc(var(--saturation-factor, 1) * 6.9%),
    19.8%
  );
  --background-secondary-alt: hsl(
    220,
    calc(var(--saturation-factor, 1) * 6.8%),
    17.3%
  );
  --background-tertiary: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --background-accent: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --background-floating: hsl(
    225,
    calc(var(--saturation-factor, 1) * 7.7%),
    10.2%
  );
  --background-nested-floating: hsl(
    223,
    calc(var(--saturation-factor, 1) * 6.9%),
    19.8%
  );
  --background-mobile-primary: hsl(
    220,
    calc(var(--saturation-factor, 1) * 7.7%),
    22.9%
  );
  --background-mobile-secondary: hsl(
    223,
    calc(var(--saturation-factor, 1) * 6.9%),
    19.8%
  );
  --chat-background: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%);
  --chat-border: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  --chat-input-container-background: hsl(
    220,
    calc(var(--saturation-factor, 1) * 7.7%),
    22.9%
  );
  --background-modifier-hover: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.4
  );
  --background-modifier-active: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.48
  );
  --background-modifier-selected: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.6
  );
  --background-modifier-accent: hsla(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%,
    0.48
  );
  --info-positive-background: hsla(
    139,
    calc(var(--saturation-factor, 1) * 47.3%),
    43.9%,
    0.1
  );
  --info-positive-foreground: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.3%),
    43.9%
  );
  --info-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --info-warning-background: hsla(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%,
    0.1
  );
  --info-warning-foreground: hsl(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%
  );
  --info-warning-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --info-danger-background: hsla(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%,
    0.1
  );
  --info-danger-foreground: hsl(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%
  );
  --info-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --info-help-background: hsla(
    197,
    calc(var(--saturation-factor, 1) * 100%),
    47.8%,
    0.1
  );
  --info-help-foreground: hsl(
    197,
    calc(var(--saturation-factor, 1) * 100%),
    47.8%
  );
  --info-help-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --status-positive-background: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --status-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --status-warning-background: hsl(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%
  );
  --status-warning-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%);
  --status-danger-background: hsl(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%
  );
  --status-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --status-danger: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  --status-positive: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  --status-warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  --button-danger-background: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-danger-background-hover: hsl(
    359,
    calc(var(--saturation-factor, 1) * 56.3%),
    40.4%
  );
  --button-danger-background-active: hsl(
    359,
    calc(var(--saturation-factor, 1) * 56.4%),
    35.1%
  );
  --button-danger-background-disabled: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-positive-background: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-positive-background-hover: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.8%),
    24.3%
  );
  --button-positive-background-active: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.9%),
    22.2%
  );
  --button-positive-background-disabled: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-secondary-background: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --button-secondary-background-hover: hsl(
    213,
    calc(var(--saturation-factor, 1) * 5%),
    42.9%
  );
  --button-secondary-background-active: hsl(
    218,
    calc(var(--saturation-factor, 1) * 4.6%),
    46.9%
  );
  --button-secondary-background-disabled: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --button-outline-danger-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-danger-border: hsl(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%
  );
  --button-outline-danger-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-danger-background-hover: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-danger-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-danger-border-hover: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-danger-background-active: hsl(
    359,
    calc(var(--saturation-factor, 1) * 56.7%),
    48%
  );
  --button-outline-danger-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-danger-border-active: hsl(
    359,
    calc(var(--saturation-factor, 1) * 66.7%),
    54.1%
  );
  --button-outline-positive-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-positive-border: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.3%),
    43.9%
  );
  --button-outline-positive-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-positive-background-hover: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-outline-positive-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-positive-border-hover: hsl(
    139,
    calc(var(--saturation-factor, 1) * 47.1%),
    33.3%
  );
  --button-outline-positive-background-active: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.8%),
    24.3%
  );
  --button-outline-positive-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-positive-border-active: hsl(
    138,
    calc(var(--saturation-factor, 1) * 46.8%),
    24.3%
  );
  --button-outline-brand-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-brand-border: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --button-outline-brand-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-brand-background-hover: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --button-outline-brand-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-brand-border-hover: hsl(
    235,
    calc(var(--saturation-factor, 1) * 85.6%),
    64.7%
  );
  --button-outline-brand-background-active: hsl(
    235,
    calc(var(--saturation-factor, 1) * 51.4%),
    52.4%
  );
  --button-outline-brand-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-brand-border-active: hsl(
    235,
    calc(var(--saturation-factor, 1) * 51.4%),
    52.4%
  );
  --button-outline-primary-text: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-primary-border: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --button-outline-primary-background: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0
  );
  --button-outline-primary-background-hover: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --button-outline-primary-text-hover: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-primary-border-hover: hsl(
    217,
    calc(var(--saturation-factor, 1) * 7.6%),
    33.5%
  );
  --button-outline-primary-background-active: hsl(
    213,
    calc(var(--saturation-factor, 1) * 5%),
    42.9%
  );
  --button-outline-primary-text-active: hsl(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%
  );
  --button-outline-primary-border-active: hsl(
    213,
    calc(var(--saturation-factor, 1) * 5%),
    42.9%
  );
  --modal-background: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%);
  --modal-footer-background: hsl(
    223,
    calc(var(--saturation-factor, 1) * 6.9%),
    19.8%
  );
  --scrollbar-thin-thumb: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --scrollbar-thin-track: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%,
    0
  );
  --scrollbar-auto-thumb: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --scrollbar-auto-track: hsl(
    210,
    calc(var(--saturation-factor, 1) * 9.8%),
    20%
  );
  --scrollbar-auto-scrollbar-color-thumb: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --scrollbar-auto-scrollbar-color-track: hsl(
    223,
    calc(var(--saturation-factor, 1) * 6.9%),
    19.8%
  );
  --input-background: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  --input-placeholder-text: hsl(
    216,
    calc(var(--saturation-factor, 1) * 2.1%),
    53.9%
  );
  --logo-primary: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  --control-brand-foreground: hsl(
    235,
    calc(var(--saturation-factor, 1) * 86.1%),
    77.5%
  );
  --control-brand-foreground-new: hsl(
    235,
    calc(var(--saturation-factor, 1) * 86.1%),
    77.5%
  );
  --background-mentioned: hsla(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%,
    0.1
  );
  --background-mentioned-hover: hsla(
    38,
    calc(var(--saturation-factor, 1) * 95.7%),
    54.1%,
    0.08
  );
  --background-message-hover: hsla(
    240,
    calc(var(--saturation-factor, 1) * 11.1%),
    1.8%,
    0.07
  );
  --background-message-automod: hsla(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%,
    0.05
  );
  --background-message-automod-hover: hsla(
    359,
    calc(var(--saturation-factor, 1) * 82.6%),
    59.4%,
    0.1
  );
  --background-message-highlight: hsla(
    235,
    calc(var(--saturation-factor, 1) * 86.1%),
    77.5%,
    0.08
  );
  --background-message-highlight-hover: hsla(
    235,
    calc(var(--saturation-factor, 1) * 86.1%),
    77.5%,
    0.06
  );
  --channels-default: hsl(223, calc(var(--saturation-factor, 1) * 3.4%), 60.2%);
  --channel-icon: hsl(213, calc(var(--saturation-factor, 1) * 4.1%), 57.5%);
  --channel-text-area-placeholder: hsl(
    218,
    calc(var(--saturation-factor, 1) * 4.6%),
    46.9%
  );
  --channeltextarea-background: hsl(
    218,
    calc(var(--saturation-factor, 1) * 7.9%),
    27.3%
  );
  --activity-card-background: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --textbox-markdown-syntax: hsl(
    213,
    calc(var(--saturation-factor, 1) * 4.1%),
    57.5%
  );
  --spoiler-revealed-background: hsl(
    220,
    calc(var(--saturation-factor, 1) * 6.8%),
    17.3%
  );
  --spoiler-hidden-background: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --android-navigation-bar-background: hsl(
    220,
    calc(var(--saturation-factor, 1) * 7.7%),
    7.6%
  );
  --android-ripple: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0.07);
  --deprecated-card-bg: hsla(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%,
    0.6
  );
  --deprecated-card-editable-bg: hsla(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%,
    0.3
  );
  --deprecated-store-bg: hsl(
    220,
    calc(var(--saturation-factor, 1) * 7.7%),
    22.9%
  );
  --deprecated-quickswitcher-input-background: hsl(
    218,
    calc(var(--saturation-factor, 1) * 4.6%),
    46.9%
  );
  --deprecated-quickswitcher-input-placeholder: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    100%,
    0.3
  );
  --deprecated-text-input-bg: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --deprecated-text-input-border: hsla(
    0,
    calc(var(--saturation-factor, 1) * 0%),
    0%,
    0.3
  );
  --deprecated-text-input-border-hover: hsl(
    240,
    calc(var(--saturation-factor, 1) * 11.1%),
    1.8%
  );
  --deprecated-text-input-border-disabled: hsl(
    216,
    calc(var(--saturation-factor, 1) * 7.2%),
    13.5%
  );
  --deprecated-text-input-prefix: hsl(
    210,
    calc(var(--saturation-factor, 1) * 2.9%),
    86.7%
  );
}