:root {
  /* --- BASE COLORS --- */
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);
  --transparent: rgba(255, 255, 255, 0);
  --evan-black: rgb(17, 22, 17);

  /* --- THEME ALIASES --- */
  --theme-25: var(--blue-25);
  --theme-50: var(--blue-50);
  --theme-100: var(--blue-100);
  --theme-200: var(--blue-200);
  --theme-300: var(--blue-300);
  --theme-400: var(--blue-400);
  --theme-500: var(--blue-500);
  --theme-600: var(--blue-600);
  --theme-700: var(--blue-700);
  --theme-800: var(--blue-800);
  --theme-900: var(--blue-900);

  /* --- GRAY --- */
  --gray-25: rgb(252, 252, 253);
  --gray-50: rgb(249, 250, 251);
  --gray-100: rgb(243, 244, 247);
  --gray-200: rgb(235, 236, 240);
  --gray-300: rgb(208, 213, 221);
  --gray-400: rgb(152, 162, 180);
  --gray-500: rgb(102, 112, 133);
  --gray-600: rgb(71, 84, 104);
  --gray-700: rgb(52, 64, 85);
  --gray-800: rgb(29, 41, 57);
  --gray-900: rgb(16, 24, 40);

  /* --- CYAN --- */
  --cyan-25: rgb(245, 254, 255);
  --cyan-50: rgb(236, 253, 255);
  --cyan-100: rgb(207, 249, 254);
  --cyan-200: rgb(165, 240, 252);
  --cyan-300: rgb(103, 227, 249);
  --cyan-400: rgb(34, 204, 238);
  --cyan-500: rgb(6, 174, 212);
  --cyan-600: rgb(8, 138, 178);
  --cyan-700: rgb(14, 112, 144);
  --cyan-800: rgb(21, 91, 117);
  --cyan-900: rgb(22, 76, 99);

  /* --- TEAL --- */
  --teal-25: rgb(246, 254, 252);
  --teal-50: rgb(240, 253, 249);
  --teal-100: rgb(204, 251, 239);
  --teal-200: rgb(153, 252, 224);
  --teal-300: rgb(95, 233, 208);
  --teal-400: rgb(46, 211, 183);
  --teal-500: rgb(21, 183, 158);
  --teal-600: rgb(14, 147, 132);
  --teal-700: rgb(16, 117, 105);
  --teal-800: rgb(18, 93, 86);
  --teal-900: rgb(19, 78, 72);

  /* --- BLUE --- */
  --blue-25: rgb(245, 250, 255);
  --blue-50: rgb(239, 248, 255);
  --blue-100: rgb(209, 233, 255);
  --blue-200: rgb(178, 221, 255);
  --blue-300: rgb(132, 202, 255);
  --blue-400: rgb(83, 177, 253);
  --blue-500: rgb(46, 144, 250);
  --blue-600: rgb(21, 112, 239);
  --blue-700: rgb(23, 92, 211);
  --blue-800: rgb(24, 73, 169);
  --blue-900: rgb(25, 65, 133);

  /* --- LIGHT BLUE --- */
  --light-blue-25: rgb(245, 251, 255);
  --light-blue-50: rgb(241, 249, 255);
  --light-blue-100: rgb(224, 242, 254);
  --light-blue-200: rgb(186, 230, 255);
  --light-blue-300: rgb(124, 213, 253);
  --light-blue-400: rgb(55, 191, 251);
  --light-blue-500: rgb(14, 165, 236);
  --light-blue-600: rgb(0, 134, 201);
  --light-blue-700: rgb(1, 106, 163);
  --light-blue-800: rgb(7, 89, 135);
  --light-blue-900: rgb(10, 75, 111);

  /* --- PURPLE --- */
  --purple-25: rgb(252, 250, 255);
  --purple-50: rgb(250, 245, 255);
  --purple-100: rgb(245, 235, 255);
  --purple-200: rgb(233, 215, 254);
  --purple-300: rgb(214, 187, 252);
  --purple-400: rgb(182, 146, 246);
  --purple-500: rgb(158, 120, 237);
  --purple-600: rgb(127, 87, 217);
  --purple-700: rgb(105, 65, 198);
  --purple-800: rgb(83, 57, 159);
  --purple-900: rgb(67, 48, 125);

  /* --- FUCHSIA --- */
  --fuchsia-25: rgb(254, 250, 255);
  --fuchsia-50: rgb(233, 244, 255);
  --fuchsia-100: rgb(251, 232, 255);
  --fuchsia-200: rgb(246, 208, 254);
  --fuchsia-300: rgb(238, 170, 253);
  --fuchsia-400: rgb(228, 120, 250);
  --fuchsia-500: rgb(212, 68, 241);
  --fuchsia-600: rgb(186, 36, 213);
  --fuchsia-700: rgb(159, 26, 177);
  --fuchsia-800: rgb(130, 24, 144);
  --fuchsia-900: rgb(111, 24, 119);

  /* --- VIOLET --- */
  --violet-25: rgb(251, 250, 255);
  --violet-50: rgb(245, 243, 255);
  --violet-100: rgb(236, 233, 254);
  --violet-200: rgb(221, 214, 254);
  --violet-300: rgb(195, 181, 253);
  --violet-400: rgb(164, 138, 251);
  --violet-500: rgb(135, 91, 247);
  --violet-600: rgb(120, 57, 238);
  --violet-700: rgb(105, 39, 218);
  --violet-800: rgb(87, 32, 183);
  --violet-900: rgb(73, 28, 150);

  /* --- INDIGO --- */
  --indigo-25: rgb(245, 248, 255);
  --indigo-50: rgb(238, 244, 255);
  --indigo-100: rgb(224, 234, 255);
  --indigo-200: rgb(199, 215, 254);
  --indigo-300: rgb(164, 188, 253);
  --indigo-400: rgb(128, 152, 249);
  --indigo-500: rgb(97, 114, 243);
  --indigo-600: rgb(68, 76, 231);
  --indigo-700: rgb(53, 56, 205);
  --indigo-800: rgb(45, 49, 166);
  --indigo-900: rgb(45, 50, 130);

  /* --- RED --- */
  --red-25: rgb(255, 251, 250);
  --red-50: rgb(254, 243, 242);
  --red-100: rgb(254, 228, 226);
  --red-200: rgb(254, 205, 202);
  --red-300: rgb(253, 162, 155);
  --red-400: rgb(249, 112, 102);
  --red-500: rgb(240, 79, 56);
  --red-600: rgb(217, 45, 32);
  --red-700: rgb(180, 35, 24);
  --red-800: rgb(145, 32, 24);
  --red-900: rgb(122, 39, 26);

  /* --- ROSE --- */
  --rose-25: rgb(255, 246, 246);
  --rose-50: rgb(255, 242, 243);
  --rose-100: rgb(255, 228, 232);
  --rose-200: rgb(255, 205, 214);
  --rose-300: rgb(255, 163, 181);
  --rose-400: rgb(253, 111, 142);
  --rose-500: rgb(247, 61, 105);
  --rose-600: rgb(227, 28, 84);
  --rose-700: rgb(192, 17, 72);
  --rose-800: rgb(161, 17, 67);
  --rose-900: rgb(137, 18, 62);

  /* --- PINK --- */
  --pink-25: rgb(254, 246, 251);
  --pink-50: rgb(253, 242, 250);
  --pink-100: rgb(252, 231, 246);
  --pink-200: rgb(252, 206, 238);
  --pink-300: rgb(250, 167, 224);
  --pink-400: rgb(246, 112, 199);
  --pink-500: rgb(238, 70, 188);
  --pink-600: rgb(221, 37, 144);
  --pink-700: rgb(193, 21, 116);
  --pink-800: rgb(158, 22, 95);
  --pink-900: rgb(78, 13, 48);

  /* --- YELLOW --- */
  --yellow-25: rgb(254, 253, 240);
  --yellow-50: rgb(254, 251, 232);
  --yellow-100: rgb(254, 247, 195);
  --yellow-200: rgb(254, 238, 149);
  --yellow-300: rgb(253, 226, 114);
  --yellow-400: rgb(250, 197, 21);
  --yellow-500: rgb(234, 170, 8);
  --yellow-600: rgb(202, 133, 4);
  --yellow-700: rgb(161, 92, 7);
  --yellow-800: rgb(133, 74, 14);
  --yellow-900: rgb(113, 59, 18);

  /* --- ORANGE --- */
  --orange-25: rgb(255, 252, 245);
  --orange-50: rgb(255, 250, 236);
  --orange-100: rgb(254, 240, 200);
  --orange-200: rgb(254, 224, 138);
  --orange-300: rgb(255, 200, 76);
  --orange-400: rgb(254, 177, 34);
  --orange-500: rgb(247, 144, 12);
  --orange-600: rgb(220, 104, 3);
  --orange-700: rgb(181, 71, 7);
  --orange-800: rgb(147, 55, 13);
  --orange-900: rgb(122, 47, 13);

  /* --- BRIGHT GREEN --- */
  --bright-green-25: rgb(246, 254, 249);
  --bright-green-50: rgb(236, 253, 243);
  --bright-green-100: rgb(220, 250, 230);
  --bright-green-200: rgb(171, 239, 198);
  --bright-green-300: rgb(117, 224, 167);
  --bright-green-400: rgb(71, 205, 137);
  --bright-green-500: rgb(23, 178, 106);
  --bright-green-600: rgb(7, 148, 85);
  --bright-green-700: rgb(6, 118, 71);
  --bright-green-800: rgb(8, 93, 58);
  --bright-green-900: rgb(7, 77, 49);

  /* --- GREEN --- */
  --green-25: rgb(247, 254, 250);
  --green-50: rgb(236, 254, 243);
  --green-100: rgb(209, 250, 223);
  --green-200: rgb(166, 244, 198);
  --green-300: rgb(108, 233, 167);
  --green-400: rgb(50, 214, 132);
  --green-500: rgb(18, 183, 106);
  --green-600: rgb(4, 152, 86);
  --green-700: rgb(5, 122, 73);
  --green-800: rgb(7, 96, 58);
  --green-900: rgb(5, 80, 50);

  /* --- LIGHT GREEN --- */
  --light-green-25: rgb(250, 254, 245);
  --light-green-50: rgb(243, 255, 231);
  --light-green-100: rgb(227, 251, 205);
  --light-green-200: rgb(208, 248, 171);
  --light-green-300: rgb(166, 239, 104);
  --light-green-400: rgb(133, 225, 58);
  --light-green-500: rgb(103, 198, 29);
  --light-green-600: rgb(75, 164, 14);
  --light-green-700: rgb(59, 124, 14);
  --light-green-800: rgb(50, 99, 18);
  --light-green-900: rgb(43, 83, 20);

  /* --- SPACING --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;
  --space-15: 192px;
  --space-16: 256px;
  --space-17: 384px;
  --space-18: 512px;
  --space-19: 640px;
  --space-20: 768px;
  --space-21: 896px;
  --space-22: 1024px;
  --space-23: 1152px;
  --space-24: 1280px;
  --space-25: 1408px;

  /* --- LAYOUT CONFIG --- */
  --desktop-width: var(--space-23);
  --desktop-width-wide: var(--space-24);

  /* --- FONT SIZES (Converted to px) --- */
  --font-size-0: 10px;
  --font-size-1: 12px;
  --font-size-2: 14px;
  --font-size-3: 16px;
  --font-size-4: 18px;
  --font-size-5: 20px;
  --font-size-6: 24px;
  --font-size-7: 30px;
  --font-size-8: 36px;
  --font-size-9: 48px;
  --font-size-10: 60px;
  --font-size-11: 72px;

  /* --- GRADIENTS --- */
  --orange-gradient: linear-gradient(-90rad, rgb(186, 103, 0), rgb(244, 153, 81), rgb(250, 172, 107));
  --red-gradient: linear-gradient(-90rad, rgb(132, 1, 1), rgb(243, 85, 85), rgb(255, 144, 144));
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: IBM Plex Sans;
  font-size: var(--font-size-2);
  padding: 0;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

a.link {
  color: var(--theme-600);
}

a.link svg {
  margin-right: var(--space-2);
}

a.link:hover, a.link:focus {
  color: var(--theme-700);
  text-decoration: underline;
  outline: none;
}

a.blue-link {
  color: var(--theme-600);
}

a.blue-link:hover {
  color: var(--theme-600);
  text-decoration: underline;
  outline: none;
}

a.blue-link:focus {
  color: var(--theme-600);
  text-decoration: underline;
  outline: none;
}


/* -- PAGE -------------------------------------------------------------------- */

.page {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  color: var(--gray-900);
}

.page__main {
  display: inline-flex;
  flex-direction: column;
  align-self: center;
  min-height: calc(100vh - 101px - 75px);
  width: 100%;
  max-width: var(--desktop-width);
  padding: var(--space-7) var(--space-4);
}

.page__nav {
  display: inline-flex;
  justify-content: space-between;
  align-self: center;
  width: 100%;
  max-width: var(--desktop-width);
  gap: var(--space-7);
  padding: var(--space-5) var(--space-4);
}

.page__nav__inner {
  display: inline-flex;
  width: 100%;
  gap: var(--space-7);
  align-items: baseline;
}

.page__logo {
  font-size: var(--font-size-5);
  color: var(--gray-900);
  text-decoration: none;
}

.page__logo:hover,
.page__logo:focus {
  color: var(--gray-900);
  text-decoration: underline;
}

.page__nav__links {
  display: inline-flex;
  width: max-content;
  gap: var(--space-1);
}

.page__nav__links a {
  color: var(--gray-900);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page__nav__links a:hover {
  background: var(--gray-50);
}

.page__nav__links a:focus {
  background: var(--theme-25);
  color: var(--theme-500);
}

.page__nav__left {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  gap: var(--space-6);
}

.page__nav__left .link {
  width: max-content;
  text-decoration: none;
  color: var(--gray-900);
}

.page__nav__left .link:hover {
  color: var(--gray-900);
}

.page__nav-mobile {
  display: none;
}

.page__user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: var(--gray-200);
  color: var(--gray-600);
  height: var(--space-7);
  width: var(--space-7);
}

.page__footer {
  display: inline-flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4);
  gap: var(--space-4);
  width: 100%;
  justify-content: center;
  align-items: center;
  color: var(--gray-500);
  font-size: var(--font-size-2);
  text-align: center;
}

.page__footer__links {
  display: inline-flex;
  justify-content: space-between;
  gap: var(--space-4);
  text-wrap: nowrap;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.page__footer__links a {
  color: var(--gray-500);
}

.page__footer__links a:hover,
.page__footer__links a:focus {
  color: var(--gray-800);
}


/* -- HOME -------------------------------------------------------------------- */

.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-10);
  white-space: normal;
  font-size: var(--font-size-3);
  line-height: 1.5;
}

/* HOME / HERO */

.home__hero {
  width: 100%;
  padding-top: var(--space-9);
}

.home__hero__title {
  margin: 0;
  font-weight: 400;
  font-size: var(--font-size-9);
  line-height: 1.1;
}

.home__hero__paragraph {
  padding: var(--space-7) 0;
  color: var(--gray-800);
}

.home__hero__paragraph__strong {
  font-weight: 500;
}

/* HOME / BLOCK */

.home__block {
  display: block;
  width: 100%;
  max-width: var(--desktop-width);
  margin: 0 auto;
  padding-top: var(--space-9);
  padding-bottom: var(--space-10);
}

.home__block__col {
  display: inline-block;
  width: 50%;
  vertical-align: text-top;
}

.home__block__col:first-child {
  padding-right: var(--space-7);
}

.home__block__col:last-child {
  padding-left: var(--space-7);
}

.home__block__col:only-child {
  width: 100%;
  max-width: var(--space-19);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home__block__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  font-weight: 400;
  font-size: var(--font-size-7);
}

.home__block__header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--theme-50);
  color: var(--theme-600);
  line-height: 1;
  padding: var(--space-3);
}

.home__block__header__icon svg {
  width: var(--space-4);
  height: var(--space-4);
}

/* HOME / LIST */

.home__list {
  list-style: none;
  margin: var(--space-3) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home__list__item {
  display: flex;
  padding: var(--space-2) 0;
}

.home__list__item svg {
  color: var(--green-500);
  margin-right: var(--space-4);
  align-self: center;
}


/* -- AUTH PAGES -------------------------------------------------------------- */

.auth__container {
  padding: var(--space-12) var(--space-6);
}


/* -- DOWNLOAD ---------------------------------------------------------------- */

.download {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--space-20);
  font-size: var(--font-size-3);
  line-height: 1.5;
}

.download-fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  column-gap: var(--space-6);
  margin: 0;
  padding: 0;
  border: none;
}

.download-radio {
  display: flex;
  flex-direction: row;
  gap: var(--space-1);
}


/* -- BLOG ------------------------------------------------------------ */


.blog__title {
  font-size: var(--font-size-11);
  font-weight: 500;
  margin: 0;
}

.blog__title::before {
  content: '';
  border-top: 4px solid var(--theme-500);
  height: var(--space-1);
  display: block;
  width: var(--space-10);
  margin-left: 5px;
}

.blog__meta {
  color: var(--gray-900);
}

.blog__author {
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.blog__author:hover,
.blog__author:focus {
  color: var(--blue-600);
  text-decoration: underline;
}


/* BLOG / MARKDOWN */

.markdown svg {
  max-width: 100%;
}

.markdown p {
  font-size: var(--font-size-3);
  line-height: 1.5;
}

.markdown h1, .markdown h2 {
  font-weight: normal;
  line-height: 1.25;
}

.markdown h1 {
  font-size: var(--font-size-10);
  margin-bottom: var(--space-6);
  font-weight: 500;
}

.markdown h2 {
  font-size: var(--font-size-6);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.markdown blockquote {
  font-style: italic;
  padding-left: var(--space-6);
  border-left: 3px solid var(--theme-500);
}

.markdown a {
  color: var(--theme-600);
}

.markdown code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  padding: 0px var(--space-1);
  font-size: var(--font-size-2);
}

.markdown pre {
  margin: 0;
  overflow-x: auto;
  line-height: 20px;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--space-1);
  padding: var(--space-4);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--font-size-2);
}

.markdown pre code {
  border: 0;
  border-radius: 0;
  background-color: inherit;
  padding: 0;
  font-size: inherit;
}

.markdown a:hover, .markdown a:focus {
  color: var(--theme-700);
  text-decoration: underline;
  outline: none;
}


.markdown::selection {
  background: var(--theme-50);
  color: var(--theme-600);
  text-shadow: none;
}

.markdown::-moz-selection {
  background: var(--theme-50);
  color: var(--theme-600);
  text-shadow: none;
}

/* -- DOCUMENTATION ------------------------------------------------- */

.documentation__container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-9);
}

.documentation__top-bar {
  /* REORDER AFTER UI STYLES */
  display: none !important;
}

.documentation__sidebar__header {
  color: var(--gray-600);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  border-radius: var(--space-1);
  text-decoration: none;
  line-height: 1;
}

.documentation__sidebar__header:hover {
  background-color: var(--gray-50);
  color: var(--gray-900);
  text-decoration: underline;
  outline: none;
}

.documentation__sidebar__header:focus {
  background-color: var(--theme-50);
  color: var(--theme-600);
  outline: none;
}

.documentation__sidebar__sub-header {
  width: 100%;
  color: var(--gray-600);
  font-size: var(--font-size-1);
  font-weight: 400;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--space-1);
  text-decoration: none;
  line-height: 1;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.documentation__sidebar__sub-header:hover {
  color: var(--gray-900);
  text-decoration: underline;
  outline: none;
}

.documentation__sidebar__search-result {
  width: 100%;
  color: var(--gray-600);
  font-size: var(--font-size-1);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--space-1);
  text-decoration: none;
}

.documentation__sidebar__search-result:hover {
  background-color: var(--gray-50);
  color: var(--gray-900);
  outline: none;
}

.documentation__markdown {
  line-height: calc(1em + 6px);
}

.documentation__markdown h1,
.documentation__markdown h2,
.documentation__markdown h3,
.documentation__markdown h4,
.documentation__markdown h5 {
  font-weight: normal;
  line-height: 1.25;
}

.documentation__markdown h1 { font-size: 24px; margin: 32px 0 24px 0; }
.documentation__markdown h2 { font-size: 20px; margin: 24px 0 20px 0; }
.documentation__markdown h3 { font-size: 18px; }
.documentation__markdown h4 { font-size: 16px; }
.documentation__markdown h5 { font-size: 14px; }

.documentation__markdown a { color: var(--theme-500); }

.documentation__markdown img {
  max-width: 100%;
}

.documentation__markdown code {
  background-color: var(--gray-25);
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  padding: 1px 4px 1px 4px;
  font-size: 13px;
}

.documentation__markdown pre {
  font-size: 14px;
  background-color: var(--gray-25);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 4px 8px;
}

.documentation__markdown pre code {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 13px;
  overflow-x: scroll;
  display: block;
}


/* -- UI ------------------------------------------------- */


/* UI / BUTTON */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  background: var(--ui-btn-default-bg);
  color: var(--ui-btn-default-font);
}

.ui-btn__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
}

.ui-btn:not(.ui-btn--disabled):hover {
  background: var(--ui-btn-hover-bg);
  color: var(--ui-btn-hover-font);
}

.ui-btn:not(.ui-btn--disabled):focus {
  background: var(--ui-btn-focused-bg);
  color: var(--ui-btn-focused-font);
  box-shadow: 0 0 0 4px var(--ui-btn-focused-aura);
}

.ui-btn--disabled {
  cursor: not-allowed;
  pointer-events: none;
}


/* UI / SELECT */

.ui-select {
  width: 100%;
  height: fit-content;
  position: relative;
}

.ui-select__input {
  width: 100%;
  height: fit-content;
  border: 1px solid var(--gray-200);
  border-radius: var(--space-1);
  padding: var(--space-2);
  font-family: 'IBM Plex Sans';
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.ui-select__input:focus,
.ui-select__input:active {
  background: transparent;
  border-color: var(--theme-400);
  box-shadow: 0px 0px 0px 4px var(--theme-50) !important;
  outline: none;
}

.ui-select__up, .ui-select__down {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  pointer-events: none;
}

.ui-select__up {
  display: none;
}

.ui-select__input:open ~ .ui-select__down {
  display: none;
}

.ui-select__input:open ~ .ui-select__up {
  display: inline-block;
}


/* UI / TEXT */

.ui-text-input__container {
  width: 100%;
}

.ui-text-input__inner {
  padding: var(--space-3);
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: var(--space-1);
}

.ui-text-input__container--slim .ui-text-input__inner {
  padding: var(--space-2);
}

.ui-text-input__inner:focus,
.ui-text-input__inner:active {
  background: transparent;
  border-color: var(--blue-400);
  box-shadow: 0px 0px 0px 4px var(--blue-50) !important;
}

.ui-text-input__container {
  position: relative;
}

.ui-text-input__inner::placeholder {
  color: var(--gray-400);
  font-size: var(--font-size-2);
  font-family: 'IBM Plex Sans';
}


/* UI / LINK */

.ui-underline-hover {
  color: inherit;
  text-decoration: none;
}

.ui-underline-hover:hover {
  color: var(--gray-700);
  text-decoration: underline;
}

.ui-underline-hover:focus {
  color: var(--blue-600);
  text-decoration: underline;
}


/* UI / DROPDOWN */

.ui-anchor__container {
  position: relative;
  display: inline-block;
}

.ui-anchor__trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.ui-anchor__trigger:focus {
  border-radius: 100%;
  box-shadow: 0px 0px 0px 4px var(--blue-100);
}

.ui-anchor__content {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin-top: var(--space-2);
}

.ui-dropdown {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--space-1);
}

.ui-dropdown__group {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-2);
}

.ui-dropdown__divider {
  border: 0;
  border-top: 1px solid var(--gray-200);
  margin: 0;
  width: 100%;
}

.ui-dropdown__option {
  display: block;
  width: 100%;
  min-width: var(--space-15);
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: var(--space-1);
  font-size: var(--font-size-2);
  color: var(--gray-900);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.ui-dropdown__option--interactive:hover {
  background-color: var(--gray-50);
  color: var(--gray-900);
}

.ui-dropdown__option--interactive:focus {
  background-color: var(--blue-50);
  color: var(--blue-500);
  outline: none;
}

.ui-dropdown__option--disabled {
  color: var(--gray-600);
  cursor: not-allowed;
}

.ui-dropdown__icon-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ui-dropdown__label {
  font-family: inherit;
}


/* UI / TABS */

.ui-tabs {
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-3);
  width: 100%;
  font-size: var(--font-size-3);
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
}

.ui-tabs__tab {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  color: var(--gray-500);
  font-family: IBM Plex Sans;
  font-size: var(--font-size-3);
  border-radius: 4px 4px 0 0;
  position: relative;
  bottom: 0;
}

.ui-tabs__tab:hover {
  background: var(--gray-50);
}

.ui-tabs__tab:focus {
  background: var(--blue-50);
  color: var(--blue-600);
}

.ui-tabs__tab--disabled {
  background: var(--gray-50);
}

.ui-tabs__tab--selected {
  color: var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  bottom: -1px;
}

.ui-tabs__tab--selected:hover {
  background: var(--gray-50);
  color: var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  bottom: -1px;
}

.ui-tabs__tab--selected:focus {
  background: var(--blue-50);
  color: var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  bottom: -1px;
}


/* UI / PRICEBOX */

.ui-pricebox {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  align-self: stretch;
  border: 1px solid var(--gray-200);
  border-radius: var(--space-2);
  overflow: clip;
  max-width: var(--space-18);
}

.ui-pricebox--selected {
  border-color: var(--blue-500);
}

.ui-pricebox__header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--white);
}

.ui-pricebox--selected .ui-pricebox__header {
  background: var(--blue-50);
}

.ui-pricebox__title {
  align-self: center;
  flex: 1;
  margin: 0;
  font-weight: normal;
  font-size: var(--font-size-3);
}

.ui-pricebox__check {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--blue-600);
  color: var(--white);
  border-width: 0;
  border-radius: 100px;
  padding: var(--space-1);
}

.ui-pricebox__action {
  margin-left: auto;
}

.ui-pricebox__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-5);
  padding: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

.ui-pricebox--selected .ui-pricebox__body {
  border-top-color: var(--blue-500);
}

.ui-pricebox__price-row {
  display: flex;
  align-items: flex-end;
  width: 100%;
  gap: var(--space-1);
}

.ui-pricebox__price {
  font-size: var(--font-size-8);
  color: var(--gray-700);
}

.ui-pricebox__interval {
  font-size: var(--font-size-2);
  color: var(--gray-600);
}

.ui-pricebox__badge {
  margin-left: auto;
  align-self: flex-start;
}

.ui-pricebox__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--gray-600);
  font-size: var(--font-size-2);
}


/* UI / PRICEBOX PLACEHOLDER  */

.ui-pricebox-placeholder {
  display: flex;
  flex-direction: column;
  width: var(--space-18, 18rem);
  border: 1px solid var(--gray-200);
  border-radius: var(--space-2);
  overflow: clip;
}

.ui-pricebox-placeholder__header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--gray-50);
  border-width: 0;
  border-radius: var(--space-2);
}

.ui-pricebox-placeholder__title {
  align-self: center;
  color: transparent;
  margin: 0;
}

.ui-pricebox-placeholder__divider {
  height: 1px;
  width: 100%;
  background: var(--gray-200);
}

.ui-pricebox-placeholder__body {
  width: 100%;
  height: 89px;
  padding: var(--space-4);
}


/* UI / TAG */

.ui-tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-1);
  border-width: 0;
  border-radius: 4px;
  padding: var(--space-1) var(--space-2);
}


/* UI / SUPPORT */

.ui-support {
  display: inline-flex;
  flex-direction: row;
  gap: var(--space-5);
  width: 100%;
}


/* UI / LAYOUT */

.ui-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ui-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}


/* UI / CODE */

.ui-code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background-color: var(--gray-100);
  border-radius: var(--space-1);
  padding: 2px 6px;
  font-size: var(--font-size-2);
}

.ui-code-block {
  margin: 0;
  overflow-x: auto;
  line-height: 20px;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--space-1);
  padding: 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--font-size-2);
}


/* UI / TEXT */

.ui-h {
  margin: 0;
}

.ui-p {
  font-size: var(--font-size-6);
  color: var(--gray-600);
  margin: 0;
  max-width: var(--space-19);
}


/* -- RESPONSIVE -------------------------------------------------------------- */

@media (max-width: 1200px) {

  /* RESPONSIVE / PAGE */

  .page__nav {
    padding-right: var(--space-7);
    padding-left: var(--space-7);
  }

  .page__main {
    padding-right: var(--space-7);
    padding-left: var(--space-7);
  }

  .page__footer {
    padding: var(--space-7) var(--space-7);
  }


  /* RESPONSIVE / PAGE / MENU */

  .page__nav__inner {
    display: none;
  }

  .page__nav__left {
    display: none;
  }

  .page__nav-mobile {
    display: inline-flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .page__nav__menu-icon {
    height: 16px;
  }

  .page__nav-mobile .page__nav__inner,
  .page__nav-mobile .page__nav__left {
    display: inline-flex;
  }

  #page__nav-mobile__checkbox {
    display: none;
  }

  .page__nav-mobile__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
    height: 100vh;
    width: 100vw;
    position: fixed;
    left: 100%;
    top: 0;
    border-left: 1px solid var(--gray-200);
    transition: left 0.5s ease-in-out;
    z-index: 100;
  }

  #page__nav-mobile__checkbox:checked ~ .page__nav-mobile__menu {
    left: 0;
  }

  .page__nav-mobile__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .page__nav-mobile__menu .page__nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .page__nav-mobile__menu .page__nav__menu-icon {
    position: absolute;
    top: 0;
    right: 0;
    margin: var(--space-6) var(--space-8);
  }


  /* RESPONSIVE / HOME */

  .home {
    gap: var(--space-8);
  }

  .home__hero {
    padding: 0;
    background: none;
  }

  .home__block {
    flex-direction: column;
    gap: var(--space-7);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .home__block__col {
    width: 100%;
  }

  .home__block__col:first-child {
    padding: 0;
    padding-bottom: var(--space-7);
  }

  .home__block__col:last-child {
    padding: 0;
    padding-bottom: var(--space-7);
  }

  .home__block__header__icon {
    display: none;
  }

  .home .ui-code-block {
    font-size: var(--font-size-1);
  }


  /* RESPONSIVE / DOCUMENTATION */

  .documentation__container {
    flex-direction: column;
    gap: var(--space-6);
  }

  .documentation__top-bar {
    display: flex !important;
  }

  .documentation__sidebar {
    display: none;
  }


  /* RESPONSIVE / AUTH PAGES */

  .auth__container {
    padding: var(--space-12) 0;
  }


  /* RESPONSIVE / SUPPORT */

  .ui-support {
    flex-direction: column;
  }

  /* RESPONSIVE / BLOG */

  .blog__title {
    font-size: var(--font-size-9);
  }

  .markdown blockquote {
    padding-left: var(--space-5);
    margin-left: var(--space-3);
  }

  /* RESPONSIVE / DOWNLOAD */

  .download__installers {
    flex-direction: column;
  }
}

/* -- ANIMATIONS -------------------------------*/

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}