@import url("//fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Ubuntu:wght@300;400;500;700&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap");
:root {
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Inter", sans-serif;
}

:root {
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --dark-background: hsl(247, 100%, 7%);
  --dark-surface: hsl(223, 78%, 11%);
  --transparent: transparent;
  --neutral-10: hsl(225, 40%, 98%);
  --neutral-15: hsl(225, 40%, 95%);
  --neutral-20: hsl(225, 40%, 85%);
  --neutral-30: hsl(225, 40%, 75%);
  --neutral-40: hsl(225, 40%, 65%);
  --neutral-50: hsl(225, 40%, 50%);
  --neutral-60: hsl(225, 40%, 40%);
  --neutral-70: hsl(225, 40%, 28%);
  --neutral-80: hsl(225, 40%, 18%);
  --neutral-90: hsl(225, 40%, 11%);
  --primary-10: hsl(223, 78%, 98%);
  --primary-20: hsl(223, 78%, 95%);
  --primary-30: hsl(223, 78%, 75%);
  --primary-40: hsl(223, 78%, 65%);
  --primary-50: hsl(223, 78%, 50%); /* Secondary Brand Color */
  --primary-60: hsl(223, 78%, 40%);
  --primary-70: hsl(223, 78%, 28%);
  --primary-80: hsl(223, 78%, 18%);
  --primary-90: hsl(223, 78%, 11%); /* Primary Color */
  --primary-trans: hsl(223, 78%, 50%, 0.07);
  --primary-trans-2: hsl(223, 78%, 50%, 0.15);
  --accent-10: hsl(16, 88%, 98%);
  --accent-20: hsl(16, 88%, 85%);
  --accent-30: hsl(16, 88%, 75%);
  --accent-40: hsl(16, 88%, 65%);
  --accent-50: hsl(16, 88%, 50%);
  --accent-60: hsl(16, 88%, 40%);
  --accent-70: hsl(16, 88%, 28%);
  --accent-80: hsl(16, 88%, 18%);
  --accent-90: hsl(16, 88%, 11%);
  --accent-2-10: hsl(167, 89%, 98%);
  --accent-2-20: hsl(167, 89%, 85%);
  --accent-2-30: hsl(167, 89%, 75%);
  --accent-2-40: hsl(167, 89%, 65%);
  --accent-2-50: hsl(167, 89%, 50%); /* accent 2 color */
  --accent-2-60: hsl(167, 89%, 40%);
  --accent-2-70: hsl(167, 89%, 28%);
  --accent-2-80: hsl(167, 89%, 18%);
  --accent-2-90: hsl(167, 89%, 11%);
  --pink-50: hsl(332, 96%, 49%);
  --pink-60: hsl(332, 97%, 39%);
  --info-10: hsl(200, 95%, 98%);
  --info-20: hsl(200, 95%, 85%);
  --info-30: hsl(200, 95%, 75%);
  --info-40: hsl(200, 95%, 65%);
  --info-50: hsl(200, 95%, 50%);
  --info-60: hsl(200, 95%, 40%);
  --info-70: hsl(200, 95%, 28%);
  --info-80: hsl(200, 95%, 18%);
  --info-90: hsl(200, 95%, 11%);
  --error-10: hsl(0, 97%, 98%);
  --error-20: hsl(0, 97%, 85%);
  --error-30: hsl(0, 97%, 75%);
  --error-40: hsl(0, 97%, 65%);
  --error-50: hsl(0, 97%, 50%);
  --error-60: hsl(0, 97%, 40%);
  --error-70: hsl(0, 97%, 28%);
  --error-80: hsl(0, 97%, 18%);
  --error-90: hsl(0, 97%, 11%);
  --warning-10: hsl(45, 97%, 98%);
  --warning-20: hsl(45, 97%, 85%);
  --warning-30: hsl(45, 97%, 75%);
  --warning-40: hsl(45, 97%, 65%);
  --warning-50: hsl(45, 97%, 50%);
  --warning-60: hsl(45, 97%, 40%);
  --warning-70: hsl(45, 97%, 28%);
  --warning-80: hsl(45, 97%, 18%);
  --warning-90: hsl(45, 97%, 11%);
  --success-10: hsl(152, 90%, 98%);
  --success-20: hsl(152, 90%, 85%);
  --success-30: hsl(152, 90%, 75%);
  --success-40: hsl(152, 90%, 65%);
  --success-50: hsl(152, 90%, 50%);
  --success-60: hsl(152, 90%, 40%);
  --success-70: hsl(152, 90%, 28%);
  --success-80: hsl(152, 90%, 18%);
  --success-90: hsl(152, 90%, 11%);
  --purple-10: hsl(285, 88%, 98%);
  --purple-20: hsl(285, 88%, 85%);
  --purple-30: hsl(285, 88%, 75%);
  --purple-40: hsl(285, 88%, 65%);
  --purple-50: hsl(285, 88%, 50%);
  --purple-60: hsl(285, 88%, 40%);
  --purple-70: hsl(285, 88%, 28%);
  --purple-80: hsl(285, 88%, 18%);
  --purple-90: hsl(285, 88%, 11%);
  /* Blue */
  --tag-blue-50: hsl(203, 100%, 73%);
  --tag-blue-90: hsl(217, 90%, 15%);
  /* Green */
  --tag-green-50: hsl(145, 78%, 66%);
  --tag-green-90: hsl(145, 65%, 10%);
  /* Purple */
  --tag-purple-50: hsl(265, 100%, 80%);
  --tag-purple-90: hsl(265, 80%, 15%);
  /* Yellow */
  --tag-yellow-50: hsl(55, 95%, 67%);
  --tag-yellow-90: hsl(55, 95%, 7%);
  /* Teal */
  --tag-teal-50: hsl(175, 87%, 66%);
  --tag-teal-90: hsl(175, 70%, 10%);
  /* Gray */
  --tag-gray-50: hsl(0, 1%, 77%);
  --tag-gray-90: hsl(0, 0%, 10%);
  /* Extended Set */
  /* Dark Blue */
  --tag-dark-blue-50: hsl(224, 100%, 82%);
  --tag-dark-blue-90: hsl(224, 80%, 10%);
  /* Pink */
  --tag-pink-50: hsl(340, 100%, 76%);
  --tag-pink-90: hsl(340, 90%, 10%);
  /* Coral */
  --tag-coral-50: hsl(10, 100%, 75%);
  --tag-coral-90: hsl(10, 85%, 10%);
  /* Light Green */
  --tag-light-green-50: hsl(150, 100%, 86%);
  --tag-light-green-90: hsl(150, 65%, 10%);
  /* Indigo */
  --tag-indigo-50: hsl(288, 100%, 82%);
  --tag-indigo-90: hsl(288, 70%, 10%);
  /* Brown */
  --tag-brown-50: hsl(30, 79%, 70%);
  --tag-brown-90: hsl(30, 60%, 10%);
  --white-alpha-05: hsla(0, 0%, 100%, 0.05);
  --white-alpha-10: hsla(0, 0%, 100%, 0.1);
  --white-alpha-20: hsla(0, 0%, 100%, 0.2);
  --white-alpha-30: hsla(0, 0%, 100%, 0.3);
  --white-alpha-40: hsla(0, 0%, 100%, 0.4);
  --white-alpha-50: hsla(0, 0%, 100%, 0.5);
  --white-alpha-60: hsla(0, 0%, 100%, 0.6);
  --white-alpha-70: hsla(0, 0%, 100%, 0.7);
  --white-alpha-80: hsla(0, 0%, 100%, 0.8);
  --white-alpha-90: hsla(0, 0%, 100%, 0.9);
  --black-alpha-05: hsla(0, 0%, 0%, 0.05);
  --black-alpha-10: hsla(0, 0%, 0%, 0.1);
  --black-alpha-20: hsla(0, 0%, 0%, 0.2);
  --black-alpha-30: hsla(0, 0%, 0%, 0.3);
  --black-alpha-40: hsla(0, 0%, 0%, 0.4);
  --black-alpha-50: hsla(0, 0%, 0%, 0.5);
  --black-alpha-60: hsla(0, 0%, 0%, 0.6);
  --black-alpha-70: hsla(0, 0%, 0%, 0.7);
  --black-alpha-80: hsla(0, 0%, 0%, 0.8);
  --black-alpha-90: hsla(0, 0%, 0%, 0.9);
  --primary-alpha-05: hsla(230, 98%, 44%, 0.05);
  --primary-alpha-10: hsla(230, 98%, 44%, 0.1);
  --primary-alpha-20: hsla(230, 98%, 44%, 0.2);
  --primary-alpha-30: hsla(230, 98%, 44%, 0.3);
  --primary-alpha-40: hsla(230, 98%, 44%, 0.4);
  --primary-alpha-50: hsla(230, 98%, 44%, 0.5);
  --primary-alpha-60: hsla(230, 98%, 44%, 0.6);
  --primary-alpha-70: hsla(230, 98%, 44%, 0.7);
  --primary-alpha-80: hsla(230, 98%, 44%, 0.8);
  --primary-alpha-90: hsla(230, 98%, 44%, 0.9);
  --primary: hsla(230, 98%, 44%, 1);
  --orange-alpha-05: hsla(15, 98%, 44%, 0.05);
  --orange-alpha-10: hsla(15, 98%, 44%, 0.1);
  --orange-alpha-20: hsla(15, 98%, 44%, 0.2);
  --orange-alpha-30: hsla(15, 98%, 44%, 0.3);
  --orange-alpha-40: hsla(15, 98%, 44%, 0.4);
  --orange-alpha-50: hsla(15, 98%, 44%, 0.5);
  --orange-alpha-60: hsla(15, 98%, 44%, 0.6);
  --orange-alpha-70: hsla(15, 98%, 44%, 0.7);
  --orange-alpha-80: hsla(15, 98%, 44%, 0.8);
  --orange-alpha-90: hsla(15, 98%, 44%, 0.9);
  --orange: hsla(15, 98%, 44%, 1);
  --orange-light: hsla(16, 100%, 60%, 1);
  --info-alpha-05: hsla(195, 84%, 33%, 0.05);
  --info-alpha-10: hsla(195, 84%, 33%, 0.1);
  --info-alpha-20: hsla(195, 84%, 33%, 0.2);
  --info-alpha-30: hsla(195, 84%, 33%, 0.3);
  --info-alpha-40: hsla(195, 84%, 33%, 0.4);
  --info-alpha-50: hsla(195, 84%, 33%, 0.5);
  --info-alpha-60: hsla(195, 84%, 33%, 0.6);
  --info-alpha-70: hsla(195, 84%, 33%, 0.7);
  --info-alpha-80: hsla(195, 84%, 33%, 0.8);
  --info-alpha-90: hsla(195, 84%, 33%, 0.9);
  --info: hsla(195, 84%, 33%, 1);
  --info-light: hsla(195, 84%, 50%, 1);
  --teal-alpha-05: hsla(180, 100%, 25%, 0.05);
  --teal-alpha-10: hsla(180, 100%, 25%, 0.1);
  --teal-alpha-20: hsla(180, 100%, 25%, 0.2);
  --teal-alpha-30: hsla(180, 100%, 25%, 0.3);
  --teal-alpha-40: hsla(180, 100%, 25%, 0.4);
  --teal-alpha-50: hsla(180, 100%, 25%, 0.5);
  --teal-alpha-60: hsla(180, 100%, 25%, 0.6);
  --teal-alpha-70: hsla(180, 100%, 25%, 0.7);
  --teal-alpha-80: hsla(180, 100%, 25%, 0.8);
  --teal-alpha-90: hsla(180, 100%, 25%, 0.9);
  --teal: hsla(180, 100%, 25%, 1);
  --teal-light: hsla(183, 65%, 52%, 1);
  --pink-alpha-05: hsla(300, 86%, 38%, 0.05);
  --pink-alpha-10: hsla(300, 86%, 38%, 0.1);
  --pink-alpha-20: hsla(300, 86%, 38%, 0.2);
  --pink-alpha-30: hsla(300, 86%, 38%, 0.3);
  --pink-alpha-40: hsla(300, 86%, 38%, 0.4);
  --pink-alpha-50: hsla(300, 86%, 38%, 0.5);
  --pink-alpha-60: hsla(300, 86%, 38%, 0.6);
  --pink-alpha-70: hsla(300, 86%, 38%, 0.7);
  --pink-alpha-80: hsla(300, 86%, 38%, 0.8);
  --pink-alpha-90: hsla(300, 86%, 38%, 0.9);
  --pink: hsla(300, 86%, 38%, 1);
  --pink-light: hsla(300, 100%, 68%, 1);
  --warning-alpha-05: hsla(45, 97%, 50%, 0.05);
  --warning-alpha-10: hsla(45, 97%, 50%, 0.1);
  --warning-alpha-20: hsla(45, 97%, 50%, 0.2);
  --warning-alpha-30: hsla(45, 97%, 50%, 0.3);
  --warning-alpha-40: hsla(45, 97%, 50%, 0.4);
  --warning-alpha-50: hsla(45, 97%, 50%, 0.5);
  --warning-alpha-60: hsla(45, 97%, 50%, 0.6);
  --warning-alpha-70: hsla(45, 97%, 50%, 0.7);
  --warning-alpha-80: hsla(45, 97%, 50%, 0.8);
  --warning-alpha-90: hsla(45, 97%, 50%, 0.9);
  --warning: hsla(45, 97%, 50%, 1);
  --success-alpha-05: hsla(152, 90%, 50%, 0.05);
  --success-alpha-10: hsla(152, 90%, 50%, 0.1);
  --success-alpha-20: hsla(152, 90%, 50%, 0.2);
  --success-alpha-30: hsla(152, 90%, 50%, 0.3);
  --success-alpha-40: hsla(152, 90%, 50%, 0.4);
  --success-alpha-50: hsla(152, 90%, 50%, 0.5);
  --success-alpha-60: hsla(152, 90%, 50%, 0.6);
  --success-alpha-70: hsla(152, 90%, 50%, 0.7);
  --success-alpha-80: hsla(152, 90%, 50%, 0.8);
  --success-alpha-90: hsla(152, 90%, 50%, 0.9);
  --success: hsla(152, 90%, 50%, 1);
  --danger-alpha-05: hsla(0, 72%, 50%, 0.05);
  --danger-alpha-10: hsla(0, 72%, 50%, 0.1);
  --danger-alpha-20: hsla(0, 72%, 50%, 0.2);
  --danger-alpha-30: hsla(0, 72%, 50%, 0.3);
  --danger-alpha-40: hsla(0, 72%, 50%, 0.4);
  --danger-alpha-50: hsla(0, 72%, 50%, 0.5);
  --danger-alpha-60: hsla(0, 72%, 50%, 0.6);
  --danger-alpha-70: hsla(0, 72%, 50%, 0.7);
  --danger-alpha-80: hsla(0, 72%, 50%, 0.8);
  --danger-alpha-90: hsla(0, 72%, 50%, 0.9);
  --danger: hsla(0, 72%, 50%, 1);
  --purple-alpha-05: hsla(285, 88%, 65%, 0.05);
  --purple-alpha-10: hsla(285, 88%, 65%, 0.1);
  --purple-alpha-20: hsla(285, 88%, 65%, 0.2);
  --purple-alpha-30: hsla(285, 88%, 65%, 0.3);
  --purple-alpha-40: hsla(285, 88%, 65%, 0.4);
  --purple-alpha-50: hsla(285, 88%, 65%, 0.5);
  --purple-alpha-60: hsla(285, 88%, 65%, 0.6);
  --purple-alpha-70: hsla(285, 88%, 65%, 0.7);
  --purple-alpha-80: hsla(285, 88%, 65%, 0.8);
  --purple-alpha-90: hsla(285, 88%, 65%, 0.9);
  --purple: hsla(285, 88%, 65%, 1);
}

body.light.standard {
  --standard-dark-blue: hsl(227, 100%, 98%);
}

body.dark.standard {
  --standard-dark-blue: hsl(227, 85%, 9%);
  --teal-alpha-05: hsla(183, 65%, 52%, 0.05);
  --teal-alpha-10: hsla(183, 65%, 52%, 0.1);
  --teal-alpha-20: hsla(183, 65%, 52%, 0.2);
  --teal-alpha-30: hsla(183, 65%, 52%, 0.3);
  --teal-alpha-40: hsla(183, 65%, 52%, 0.4);
  --teal-alpha-50: hsla(183, 65%, 52%, 0.5);
  --teal-alpha-60: hsla(183, 65%, 52%, 0.6);
  --teal-alpha-70: hsla(183, 65%, 52%, 0.7);
  --teal-alpha-80: hsla(183, 65%, 52%, 0.8);
  --teal-alpha-90: hsla(183, 65%, 52%, 0.9);
  --teal: hsla(183, 65%, 52%, 1);
  --teal-light: hsla(183, 65%, 52%, 1);
}

body.light.v8,
body.dark.v8 {
  --white: hsl(0, 0%, 100%);
  --dark-background: hsl(243, 90%, 4%);
  --dark-surface: hsl(243, 33%, 13%);
  --neutral-10: hsl(225, 40%, 98%);
  --neutral-15: hsl(225, 40%, 95%);
  --neutral-20: hsl(225, 40%, 85%);
  --neutral-30: hsl(225, 40%, 75%);
  --neutral-40: hsl(225, 40%, 65%);
  --neutral-50: hsl(225, 40%, 50%);
  --neutral-60: hsl(225, 40%, 40%);
  --neutral-70: hsl(225, 40%, 28%);
  --neutral-80: hsl(225, 40%, 18%);
  --neutral-90: hsl(225, 40%, 11%);
  --primary-10: hsl(223, 78%, 98%);
  --primary-20: hsl(223, 78%, 95%);
  --primary-30: hsl(223, 78%, 75%);
  --primary-40: hsl(223, 78%, 65%);
  --primary-50: hsl(223, 78%, 50%); /* Secondary Brand Color */
  --primary-60: hsl(223, 78%, 40%);
  --primary-70: hsl(223, 78%, 28%);
  --primary-80: hsl(223, 78%, 18%);
  --primary-90: hsl(243, 90%, 4%); /* Primary Color */
  --primary-trans: hsl(223, 78%, 50%, 0.07);
  --primary-trans-2: hsl(223, 78%, 50%, 0.15);
  --accent-10: hsl(16, 88%, 98%);
  --accent-20: hsl(16, 88%, 85%);
  --accent-30: hsl(16, 88%, 75%);
  --accent-40: hsl(16, 88%, 65%);
  --accent-50: hsl(16, 88%, 50%);
  --accent-60: hsl(16, 88%, 40%);
  --accent-70: hsl(16, 88%, 28%);
  --accent-80: hsl(16, 88%, 18%);
  --accent-90: hsl(16, 88%, 11%);
  --accent-2-10: hsl(167, 89%, 98%);
  --accent-2-20: hsl(167, 89%, 85%);
  --accent-2-30: hsl(167, 89%, 75%);
  --accent-2-40: hsl(167, 89%, 65%);
  --accent-2-50: hsl(167, 89%, 50%); /* accent 2 color */
  --accent-2-60: hsl(167, 89%, 40%);
  --accent-2-70: hsl(167, 89%, 28%);
  --accent-2-80: hsl(167, 89%, 18%);
  --accent-2-90: hsl(167, 89%, 11%);
  --pink-50: hsl(332, 96%, 49%);
  --pink-60: hsl(332, 97%, 39%);
  --info-10: hsl(200, 95%, 98%);
  --info-20: hsl(200, 95%, 85%);
  --info-30: hsl(200, 95%, 75%);
  --info-40: hsl(200, 95%, 65%);
  --info-50: hsl(200, 95%, 50%);
  --info-60: hsl(200, 95%, 40%);
  --info-70: hsl(200, 95%, 28%);
  --info-80: hsl(200, 95%, 18%);
  --info-90: hsl(200, 95%, 11%);
  --error-10: hsl(0, 97%, 98%);
  --error-20: hsl(0, 97%, 85%);
  --error-30: hsl(0, 97%, 75%);
  --error-40: hsl(0, 97%, 65%);
  --error-50: hsl(0, 97%, 50%);
  --error-60: hsl(0, 97%, 40%);
  --error-70: hsl(0, 97%, 28%);
  --error-80: hsl(0, 97%, 18%);
  --error-90: hsl(0, 97%, 11%);
  --warning-10: hsl(45, 97%, 98%);
  --warning-20: hsl(45, 97%, 85%);
  --warning-30: hsl(45, 97%, 75%);
  --warning-40: hsl(45, 97%, 65%);
  --warning-50: hsl(45, 97%, 50%);
  --warning-60: hsl(45, 97%, 40%);
  --warning-70: hsl(45, 97%, 28%);
  --warning-80: hsl(45, 97%, 18%);
  --warning-90: hsl(45, 97%, 11%);
  --success-10: hsl(152, 90%, 98%);
  --success-20: hsl(152, 90%, 85%);
  --success-30: hsl(152, 90%, 75%);
  --success-40: hsl(152, 90%, 65%);
  --success-50: hsl(152, 90%, 50%);
  --success-60: hsl(152, 90%, 40%);
  --success-70: hsl(152, 90%, 28%);
  --success-80: hsl(152, 90%, 18%);
  --success-90: hsl(152, 90%, 11%);
  --purple-10: hsl(285, 88%, 98%);
  --purple-20: hsl(285, 88%, 85%);
  --purple-30: hsl(285, 88%, 75%);
  --purple-40: hsl(285, 88%, 65%);
  --purple-50: hsl(285, 88%, 50%);
  --purple-60: hsl(285, 88%, 40%);
  --purple-70: hsl(285, 88%, 28%);
  --purple-80: hsl(285, 88%, 18%);
  --purple-90: hsl(285, 88%, 11%);
}

body.light.neutral,
body.dark.neutral {
  --dark-background: hsl(240, 2%, 8%);
  --dark-surface: hsl(60, 2%, 10%);
  --info-light: hsl(195, 87%, 53%);
  --theme-neutral-primary: hsl(225, 96%, 42%);
  --theme-neutral-primary-shade: hsl(225, 96%, 28%);
  --theme-neutral-dark-primary: hsl(225, 63%, 55%);
  --theme-neutral-dark-primary-tint: hsl(225, 100%, 66%);
  --theme-neutral-dark-primary-shade: hsl(225, 96%, 28%);
  --neutral-10: hsl(0, 0%, 98%);
  --neutral-20: hsl(0, 0%, 85%);
  --neutral-30: hsl(0, 0%, 75%);
  --neutral-40: hsl(0, 0%, 65%);
  --neutral-50: hsl(0, 0%, 50%);
  --neutral-60: hsl(0, 0%, 40%);
  --neutral-70: hsl(0, 0%, 28%);
  --neutral-80: hsl(0, 0%, 18%);
  --neutral-90: hsl(0, 0%, 11%);
  --primary-10: hsl(237, 94%, 98%);
  --primary-20: hsl(237, 94%, 95%);
  --primary-30: hsl(237, 94%, 75%);
  --primary-40: hsl(237, 94%, 65%);
  --primary-50: hsl(237, 94%, 59%); /* Secondary Brand Color */
  --primary-60: hsl(237, 94%, 40%);
  --primary-70: hsl(237, 94%, 28%);
  --primary-80: hsl(237, 94%, 18%);
  --primary-90: hsl(237, 94%, 11%); /* Primary Color */
  --accent-10: hsl(237, 94%, 98%);
  --accent-20: hsl(237, 94%, 95%);
  --accent-30: hsl(237, 94%, 75%);
  --accent-40: hsl(237, 94%, 65%);
  --accent-50: hsl(237, 94%, 59%); /* Secondary Brand Color */
  --accent-60: hsl(237, 94%, 40%);
  --accent-70: hsl(237, 94%, 28%);
  --accent-80: hsl(237, 94%, 18%);
  --accent-90: hsl(237, 94%, 11%); /* Primary Color */
  --primary-trans: hsla(216, 3%, 70%, 0.15);
  --primary-trans-2: hsla(227, 9%, 80%, 0.15);
}

body.light.protanopia,
body.dark.protanopia {
  --dark-background: hsl(247, 80%, 7%);
  --dark-surface: hsl(220, 75%, 11%);
  --primary-50: hsl(220, 75%, 50%); /* Secondary Brand Color - Blue */
  --primary-90: hsl(220, 75%, 11%); /* Primary Color */
  --accent-10: hsl(285, 70%, 98%);
  --accent-20: hsl(285, 70%, 85%);
  --accent-30: hsl(285, 70%, 75%);
  --accent-40: hsl(285, 70%, 65%); /* accent color - Purple */
  --accent-50: hsl(285, 70%, 50%);
  --accent-60: hsl(285, 70%, 40%);
  --accent-70: hsl(285, 70%, 28%);
  --accent-80: hsl(285, 70%, 18%);
  --accent-90: hsl(285, 70%, 11%);
  --pink-50: hsl(330, 76%, 49%);
  --pink-60: hsl(330, 77%, 39%);
  --error-10: hsl(22, 90%, 98%);
  --error-20: hsl(22, 90%, 85%);
  --error-30: hsl(22, 90%, 75%);
  --error-40: hsl(22, 90%, 65%);
  --error-50: hsl(22, 90%, 50%); /* Vermillion - off the red-green axis (Okabe-Ito) */
  --error-60: hsl(22, 90%, 40%);
  --error-70: hsl(22, 90%, 28%);
  --error-80: hsl(22, 90%, 18%);
  --error-90: hsl(22, 90%, 11%);
  --warning-10: hsl(46, 95%, 98%);
  --warning-20: hsl(46, 95%, 85%);
  --warning-30: hsl(46, 95%, 75%);
  --warning-40: hsl(46, 95%, 65%);
  --warning-50: hsl(46, 95%, 50%); /* Gold - split from error by hue + lightness */
  --warning-60: hsl(46, 95%, 40%);
  --warning-70: hsl(46, 95%, 28%);
  --warning-80: hsl(46, 95%, 18%);
  --warning-90: hsl(46, 95%, 11%);
  --success-10: hsl(173, 72%, 98%);
  --success-20: hsl(173, 72%, 85%);
  --success-30: hsl(173, 72%, 75%);
  --success-40: hsl(173, 72%, 65%);
  --success-50: hsl(173, 72%, 50%); /* Teal - off the red-green axis */
  --success-60: hsl(173, 72%, 40%);
  --success-70: hsl(173, 72%, 28%);
  --success-80: hsl(173, 72%, 18%);
  --success-90: hsl(173, 72%, 11%);
  --purple-10: hsl(285, 70%, 98%);
  --purple-20: hsl(285, 70%, 85%);
  --purple-30: hsl(285, 70%, 75%);
  --purple-40: hsl(285, 70%, 65%);
  --purple-50: hsl(285, 70%, 50%);
  --purple-60: hsl(285, 70%, 40%);
  --purple-70: hsl(285, 70%, 28%);
  --purple-80: hsl(285, 70%, 18%);
  --purple-90: hsl(285, 70%, 11%);
  --primary-trans: hsl(220, 75%, 50%, 0.07);
  --primary-trans-2: hsl(220, 75%, 50%, 0.15);
  /* Blue - safe */
  --tag-blue-50: hsl(220, 90%, 75%);
  --tag-blue-90: hsl(220, 80%, 15%);
  /* Cyan - replaces green */
  --tag-green-50: hsl(180, 80%, 70%);
  --tag-green-90: hsl(180, 70%, 12%);
  /* Purple - safe */
  --tag-purple-50: hsl(285, 85%, 75%);
  --tag-purple-90: hsl(285, 75%, 15%);
  /* Yellow - safe */
  --tag-yellow-50: hsl(50, 90%, 65%);
  --tag-yellow-90: hsl(50, 85%, 10%);
  /* Teal/Cyan - safe */
  --tag-teal-50: hsl(190, 80%, 65%);
  --tag-teal-90: hsl(190, 70%, 12%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 75%);
  --tag-gray-90: hsl(0, 0%, 15%);
  /* Extended Set */
  /* Dark Blue - safe */
  --tag-dark-blue-50: hsl(240, 85%, 75%);
  --tag-dark-blue-90: hsl(240, 75%, 12%);
  /* Orange - replaces pink */
  --tag-pink-50: hsl(25, 90%, 70%);
  --tag-pink-90: hsl(25, 80%, 12%);
  /* Gold - replaces coral */
  --tag-coral-50: hsl(45, 90%, 68%);
  --tag-coral-90: hsl(45, 80%, 12%);
  /* Bright Cyan - replaces light green */
  --tag-light-green-50: hsl(175, 85%, 72%);
  --tag-light-green-90: hsl(175, 70%, 12%);
  /* Violet - replaces indigo */
  --tag-indigo-50: hsl(270, 80%, 75%);
  --tag-indigo-90: hsl(270, 70%, 12%);
  /* Yellow-Orange - replaces brown */
  --tag-brown-50: hsl(40, 85%, 65%);
  --tag-brown-90: hsl(40, 75%, 12%);
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --dark-background: hsl(247, 80%, 7%);
  --dark-surface: hsl(220, 75%, 11%);
  --accent-10: hsl(285, 70%, 98%);
  --accent-20: hsl(285, 70%, 85%);
  --accent-30: hsl(285, 70%, 75%);
  --accent-40: hsl(285, 70%, 65%); /* accent color - Purple */
  --accent-50: hsl(285, 70%, 50%);
  --accent-60: hsl(285, 70%, 40%);
  --accent-70: hsl(285, 70%, 28%);
  --accent-80: hsl(285, 70%, 18%);
  --accent-90: hsl(285, 70%, 11%);
  --pink-50: hsl(330, 76%, 49%);
  --pink-60: hsl(330, 77%, 39%);
  --error-10: hsl(16, 85%, 98%);
  --error-20: hsl(16, 85%, 85%);
  --error-30: hsl(16, 85%, 75%);
  --error-40: hsl(16, 85%, 65%);
  --error-50: hsl(16, 85%, 50%); /* Vermillion - off the red-green axis (Okabe-Ito) */
  --error-60: hsl(16, 85%, 40%);
  --error-70: hsl(16, 85%, 28%);
  --error-80: hsl(16, 85%, 18%);
  --error-90: hsl(16, 85%, 11%);
  --warning-10: hsl(45, 95%, 98%);
  --warning-20: hsl(45, 95%, 85%);
  --warning-30: hsl(45, 95%, 75%);
  --warning-40: hsl(45, 95%, 65%);
  --warning-50: hsl(45, 95%, 50%); /* Gold - split from error by hue + lightness */
  --warning-60: hsl(45, 95%, 40%);
  --warning-70: hsl(45, 95%, 28%);
  --warning-80: hsl(45, 95%, 18%);
  --warning-90: hsl(45, 95%, 11%);
  --success-10: hsl(172, 78%, 98%);
  --success-20: hsl(172, 78%, 85%);
  --success-30: hsl(172, 78%, 75%);
  --success-40: hsl(172, 78%, 65%);
  --success-50: hsl(172, 78%, 50%); /* Teal - off the red-green axis */
  --success-60: hsl(172, 78%, 40%);
  --success-70: hsl(172, 78%, 28%);
  --success-80: hsl(172, 78%, 18%);
  --success-90: hsl(172, 78%, 11%);
  --primary-50: hsl(220, 75%, 50%); /* Secondary Brand Color - Blue */
  --primary-90: hsl(220, 75%, 11%); /* Primary Color */
  --primary-trans: hsl(220, 75%, 50%, 0.07);
  --primary-trans-2: hsl(220, 75%, 50%, 0.15);
  /* Blue - safe */
  --tag-blue-50: hsl(220, 90%, 75%);
  --tag-blue-90: hsl(220, 80%, 15%);
  /* Cyan - replaces green */
  --tag-green-50: hsl(180, 80%, 70%);
  --tag-green-90: hsl(180, 70%, 12%);
  /* Purple - safe */
  --tag-purple-50: hsl(285, 85%, 75%);
  --tag-purple-90: hsl(285, 75%, 15%);
  /* Yellow - safe */
  --tag-yellow-50: hsl(50, 90%, 65%);
  --tag-yellow-90: hsl(50, 85%, 10%);
  /* Teal/Cyan - safe */
  --tag-teal-50: hsl(190, 80%, 65%);
  --tag-teal-90: hsl(190, 70%, 12%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 75%);
  --tag-gray-90: hsl(0, 0%, 15%);
  /* Extended Set */
  /* Dark Blue - safe */
  --tag-dark-blue-50: hsl(240, 85%, 75%);
  --tag-dark-blue-90: hsl(240, 75%, 12%);
  /* Orange - replaces pink */
  --tag-pink-50: hsl(25, 90%, 70%);
  --tag-pink-90: hsl(25, 80%, 12%);
  /* Gold - replaces coral */
  --tag-coral-50: hsl(45, 90%, 68%);
  --tag-coral-90: hsl(45, 80%, 12%);
  /* Bright Cyan - replaces light green */
  --tag-light-green-50: hsl(175, 85%, 72%);
  --tag-light-green-90: hsl(175, 70%, 12%);
  /* Violet - replaces indigo */
  --tag-indigo-50: hsl(270, 80%, 75%);
  --tag-indigo-90: hsl(270, 70%, 12%);
  /* Yellow-Orange - replaces brown */
  --tag-brown-50: hsl(40, 85%, 65%);
  --tag-brown-90: hsl(40, 75%, 12%);
  --orange-alpha-05: hsla(33, 100%, 50%, 0.05);
  --orange-alpha-10: hsla(33, 100%, 50%, 0.1);
  --orange-alpha-20: hsla(33, 100%, 50%, 0.2);
  --orange-alpha-30: hsla(33, 100%, 50%, 0.3);
  --orange-alpha-40: hsla(33, 100%, 50%, 0.4);
  --orange-alpha-50: hsla(33, 100%, 50%, 0.5);
  --orange-alpha-60: hsla(33, 100%, 50%, 0.6);
  --orange-alpha-70: hsla(33, 100%, 50%, 0.7);
  --orange-alpha-80: hsla(33, 100%, 50%, 0.8);
  --orange-alpha-90: hsla(33, 100%, 50%, 0.9);
  --orange: hsla(33, 100%, 50%, 1);
  --orange-light: hsla(37, 100%, 57%, 1);
}

body.light.tritanopia,
body.dark.tritanopia {
  --dark-background: hsl(330, 15%, 7%);
  --accent-10: hsl(0, 75%, 98%);
  --accent-20: hsl(0, 75%, 85%);
  --accent-30: hsl(0, 75%, 75%);
  --accent-40: hsl(0, 75%, 65%); /* accent color - Red */
  --accent-50: hsl(0, 75%, 50%);
  --accent-60: hsl(0, 75%, 40%);
  --accent-70: hsl(0, 75%, 28%);
  --accent-80: hsl(0, 75%, 18%);
  --accent-90: hsl(0, 75%, 11%);
  --pink-50: hsl(330, 76%, 49%);
  --pink-60: hsl(330, 77%, 39%);
  --error-10: hsl(353, 78%, 98%);
  --error-20: hsl(353, 78%, 85%);
  --error-30: hsl(353, 78%, 75%);
  --error-40: hsl(353, 78%, 65%);
  --error-50: hsl(353, 78%, 50%); /* Red - the red-green axis is intact for tritanopia */
  --error-60: hsl(353, 78%, 40%);
  --error-70: hsl(353, 78%, 28%);
  --error-80: hsl(353, 78%, 18%);
  --error-90: hsl(353, 78%, 11%);
  --warning-10: hsl(31, 95%, 98%);
  --warning-20: hsl(31, 95%, 85%);
  --warning-30: hsl(31, 95%, 75%);
  --warning-40: hsl(31, 95%, 65%);
  --warning-50: hsl(31, 95%, 50%); /* Orange - not yellow, which drifts toward pink here */
  --warning-60: hsl(31, 95%, 40%);
  --warning-70: hsl(31, 95%, 28%);
  --warning-80: hsl(31, 95%, 18%);
  --warning-90: hsl(31, 95%, 11%);
  --success-10: hsl(133, 60%, 98%);
  --success-20: hsl(133, 60%, 85%);
  --success-30: hsl(133, 60%, 75%);
  --success-40: hsl(133, 60%, 65%);
  --success-50: hsl(133, 60%, 45%); /* Green - the red-green axis is intact for tritanopia */
  --success-60: hsl(133, 60%, 35%);
  --success-70: hsl(133, 60%, 25%);
  --success-80: hsl(133, 60%, 18%);
  --success-90: hsl(133, 60%, 11%);
  --primary-50: hsl(330, 70%, 50%); /* Secondary Brand Color - Magenta */
  --primary-90: hsl(330, 70%, 11%); /* Primary Color */
  --primary-trans: hsl(330, 70%, 50%, 0.07);
  --primary-trans-2: hsl(330, 70%, 50%, 0.15);
  /* Magenta - replaces blue */
  --tag-blue-50: hsl(320, 85%, 72%);
  --tag-blue-90: hsl(320, 75%, 15%);
  /* Green - safe */
  --tag-green-50: hsl(140, 75%, 55%);
  --tag-green-90: hsl(140, 70%, 12%);
  /* Red - replaces purple */
  --tag-purple-50: hsl(10, 85%, 68%);
  --tag-purple-90: hsl(10, 75%, 15%);
  /* Cyan - replaces yellow */
  --tag-yellow-50: hsl(190, 85%, 65%);
  --tag-yellow-90: hsl(190, 75%, 12%);
  /* Teal/Cyan - safe */
  --tag-teal-50: hsl(185, 80%, 65%);
  --tag-teal-90: hsl(185, 70%, 12%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 75%);
  --tag-gray-90: hsl(0, 0%, 15%);
  /* Extended Set */
  /* Pink/Magenta - replaces dark blue */
  --tag-dark-blue-50: hsl(340, 80%, 70%);
  --tag-dark-blue-90: hsl(340, 70%, 12%);
  /* Coral/Red - safe */
  --tag-pink-50: hsl(5, 85%, 68%);
  --tag-pink-90: hsl(5, 75%, 12%);
  /* Light Red - replaces coral */
  --tag-coral-50: hsl(15, 80%, 65%);
  --tag-coral-90: hsl(15, 70%, 12%);
  /* Bright Green - replaces light green */
  --tag-light-green-50: hsl(150, 80%, 60%);
  --tag-light-green-90: hsl(150, 70%, 12%);
  /* Dark Magenta - replaces indigo */
  --tag-indigo-50: hsl(310, 75%, 70%);
  --tag-indigo-90: hsl(310, 65%, 12%);
  /* Aqua - replaces brown */
  --tag-brown-50: hsl(180, 80%, 65%);
  --tag-brown-90: hsl(180, 70%, 12%);
}

body.light.protanopia,
body.light.deuteranopia,
body.light.tritanopia,
body.light.achromatopsia {
  --light-surface: hsl(0, 0%, 98%);
}

body.dark.protanopia,
body.dark.deuteranopia,
body.dark.tritanopia,
body.dark.achromatopsia {
  --dark-surface: hsl(60, 2%, 10%);
}

body.light.achromatopsia,
body.dark.achromatopsia {
  --white: hsl(0, 0%, 100%);
  --dark-background: hsl(0, 0%, 7%);
  --neutral-10: hsl(0, 0%, 98%);
  --neutral-20: hsl(0, 0%, 90%);
  --neutral-30: hsl(0, 0%, 80%);
  --neutral-40: hsl(0, 0%, 70%);
  --neutral-50: hsl(0, 0%, 50%);
  --neutral-60: hsl(0, 0%, 35%);
  --neutral-70: hsl(0, 0%, 25%);
  --neutral-80: hsl(0, 0%, 15%);
  --neutral-90: hsl(0, 0%, 8%);
  --primary-10: hsl(0, 0%, 98%);
  --primary-20: hsl(0, 0%, 90%);
  --primary-30: hsl(0, 0%, 80%);
  --primary-40: hsl(0, 0%, 70%);
  --primary-50: hsl(0, 0%, 50%);
  --primary-60: hsl(0, 0%, 35%);
  --primary-70: hsl(0, 0%, 25%);
  --primary-80: hsl(0, 0%, 15%);
  --primary-90: hsl(0, 0%, 8%);
  --primary-trans: hsl(0, 0%, 50%, 0.07);
  --primary-trans-2: hsl(0, 0%, 50%, 0.15);
  --accent-10: hsl(0, 0%, 98%);
  --accent-20: hsl(0, 0%, 88%);
  --accent-30: hsl(0, 0%, 78%);
  --accent-40: hsl(0, 0%, 68%);
  --accent-50: hsl(0, 0%, 55%);
  --accent-60: hsl(0, 0%, 42%);
  --accent-70: hsl(0, 0%, 30%);
  --accent-80: hsl(0, 0%, 20%);
  --accent-90: hsl(0, 0%, 10%);
  --accent-2-10: hsl(0, 0%, 98%);
  --accent-2-20: hsl(0, 0%, 87%);
  --accent-2-30: hsl(0, 0%, 77%);
  --accent-2-40: hsl(0, 0%, 67%);
  --accent-2-50: hsl(0, 0%, 52%);
  --accent-2-60: hsl(0, 0%, 38%);
  --accent-2-70: hsl(0, 0%, 27%);
  --accent-2-80: hsl(0, 0%, 17%);
  --accent-2-90: hsl(0, 0%, 9%);
  --pink-50: hsl(0, 0%, 60%);
  --pink-60: hsl(0, 0%, 45%);
  --info-10: hsl(0, 0%, 98%);
  --info-20: hsl(0, 0%, 88%);
  --info-30: hsl(0, 0%, 73%);
  --info-40: hsl(0, 0%, 58%);
  --info-50: hsl(0, 0%, 35%); /* Medium-dark for distinction */
  --info-60: hsl(0, 0%, 28%);
  --info-70: hsl(0, 0%, 22%);
  --info-80: hsl(0, 0%, 15%);
  --info-90: hsl(0, 0%, 8%);
  --error-10: hsl(0, 0%, 98%);
  --error-20: hsl(0, 0%, 93%);
  --error-30: hsl(0, 0%, 90%);
  --error-40: hsl(0, 0%, 88%);
  --error-50: hsl(0, 0%, 85%); /* Very light - highest contrast */
  --error-60: hsl(0, 0%, 75%);
  --error-70: hsl(0, 0%, 60%);
  --error-80: hsl(0, 0%, 45%);
  --error-90: hsl(0, 0%, 30%);
  --warning-10: hsl(0, 0%, 98%);
  --warning-20: hsl(0, 0%, 90%);
  --warning-30: hsl(0, 0%, 82%);
  --warning-40: hsl(0, 0%, 76%);
  --warning-50: hsl(0, 0%, 70%); /* Light-medium for distinction */
  --warning-60: hsl(0, 0%, 58%);
  --warning-70: hsl(0, 0%, 45%);
  --warning-80: hsl(0, 0%, 32%);
  --warning-90: hsl(0, 0%, 20%);
  --success-10: hsl(0, 0%, 98%);
  --success-20: hsl(0, 0%, 88%);
  --success-30: hsl(0, 0%, 75%);
  --success-40: hsl(0, 0%, 62%);
  --success-50: hsl(0, 0%, 50%); /* Medium for distinction */
  --success-60: hsl(0, 0%, 40%);
  --success-70: hsl(0, 0%, 30%);
  --success-80: hsl(0, 0%, 20%);
  --success-90: hsl(0, 0%, 12%);
  --purple-10: hsl(0, 0%, 98%);
  --purple-20: hsl(0, 0%, 88%);
  --purple-30: hsl(0, 0%, 76%);
  --purple-40: hsl(0, 0%, 64%);
  --purple-50: hsl(0, 0%, 48%);
  --purple-60: hsl(0, 0%, 36%);
  --purple-70: hsl(0, 0%, 26%);
  --purple-80: hsl(0, 0%, 16%);
  --purple-90: hsl(0, 0%, 10%);
  /* Grayscale tags with distinct lightness values */
  /* Very Light */
  --tag-blue-50: hsl(0, 0%, 85%);
  --tag-blue-90: hsl(0, 0%, 15%);
  /* Light-Medium */
  --tag-green-50: hsl(0, 0%, 75%);
  --tag-green-90: hsl(0, 0%, 20%);
  /* Medium */
  --tag-purple-50: hsl(0, 0%, 60%);
  --tag-purple-90: hsl(0, 0%, 25%);
  /* Medium-Dark */
  --tag-yellow-50: hsl(0, 0%, 45%);
  --tag-yellow-90: hsl(0, 0%, 75%);
  /* Light */
  --tag-teal-50: hsl(0, 0%, 80%);
  --tag-teal-90: hsl(0, 0%, 18%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 65%);
  --tag-gray-90: hsl(0, 0%, 22%);
  /* Extended Set - Additional lightness variations */
  /* Bright */
  --tag-dark-blue-50: hsl(0, 0%, 88%);
  --tag-dark-blue-90: hsl(0, 0%, 12%);
  /* Light-Medium 2 */
  --tag-pink-50: hsl(0, 0%, 72%);
  --tag-pink-90: hsl(0, 0%, 23%);
  /* Medium 2 */
  --tag-coral-50: hsl(0, 0%, 55%);
  --tag-coral-90: hsl(0, 0%, 28%);
  /* Medium-Light */
  --tag-light-green-50: hsl(0, 0%, 78%);
  --tag-light-green-90: hsl(0, 0%, 19%);
  /* Medium-Dark 2 */
  --tag-indigo-50: hsl(0, 0%, 42%);
  --tag-indigo-90: hsl(0, 0%, 78%);
  /* Dark */
  --tag-brown-50: hsl(0, 0%, 35%);
  --tag-brown-90: hsl(0, 0%, 82%);
}

/* 1. Define the colors for both modes */
body.light {
  /* Default (Light Mode) - Dark Grey thumb on transparent track */
  --sb-thumb: rgba(0, 0, 0, 0.2);
  --sb-track: transparent;
}

body.dark {
  /* Dark Mode - White thumb on transparent track */
  --sb-thumb: rgba(255, 255, 255, 0.2);
  --sb-track: transparent;
}

/* 2. The Standard Way (Firefox) using the variables */
html {
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-width: thin;
}

/* 3. The Webkit Way (Chrome, Edge, Safari) using the variables */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 100vw;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Hover effects (optional) */
::-webkit-scrollbar-thumb:hover {
  /* Make it slightly more opaque on hover */
  background-color: color-mix(in srgb, var(--sb-thumb), black 20%);
}

:root,
body.light {
  background-color: var(--white);
  color: var(--black-alpha-80);
  --dropdown-surface: var(--white);
  --text: var(--black);
  --brand-primary-deep: var(--primary-90);
  --brand-primary: var(--primary-50);
  --brand-accent: var(--accent-50);
  --brand-accent-strong: var(--accent-60);
  --brand-accent-hover: var(--accent-70);
  --brand-accent-2: var(--accent-2-50);
  --on-accent: var(--white);
  --brand-pink: var(--pink-60);
  --border-dark-only-accent: transparent;
  --error-border-dark-only: transparent;
  --surface-bright: var(--white);
  --surface-panel: var(--white);
  --surface-flat: var(--neutral-10);
  --border-default: var(--neutral-20);
  --border-strong: var(--neutral-30);
  --text-muted-flat: var(--neutral-50);
  --surface-raised: var(--neutral-10);
  --surface: var(--neutral-10);
  --surface-raised-alt: var(--neutral-15);
  --surface-sunken: var(--neutral-15);
  --surface-inverse: var(--neutral-10);
  --surface-inset: var(--neutral-10);
  --border-on-surface: var(--neutral-20);
  --border-focus-brand: var(--neutral-20);
  --border-focus-accent: var(--neutral-20);
  --error-subtle-neutral: var(--neutral-20);
  --warning-subtle-neutral: var(--neutral-20);
  --success-subtle-neutral: var(--neutral-20);
  --success-subtle-neutral-deep: var(--neutral-20);
  --text-muted-soft: var(--neutral-60);
  --text-muted-mixed: var(--neutral-60);
  --text-muted-invert: var(--neutral-60);
  --text-muted-strong: var(--neutral-70);
  --text-muted: var(--neutral-70);
  --text-muted-hold: var(--neutral-70);
  --text-muted-on-surface: var(--neutral-70);
  --text-muted-on-fill: var(--neutral-70);
  --text-strong: var(--neutral-80);
  --text-strong-hold: var(--neutral-80);
  --text-strongest: var(--neutral-90);
  --brand-primary-hover: var(--primary-70);
  --brand-primary-translucent: var(--primary-trans);
  --brand-hover: var(--primary-50);
  --brand-active: var(--primary-50);
  --accent-brand-hover: var(--primary-50);
  --accent: var(--primary-50);
  --brand-on-fill: var(--primary-50);
  --brand-strong: var(--primary-70);
  --brand-strongest: var(--primary-80);
  --brand-on-fill-strong: var(--primary-90);
  --accent-subtle-on-surface: var(--accent-10);
  --accent-subtle: var(--accent-10);
  --accent-hover: var(--accent-50);
  --accent-active: var(--accent-50);
  --accent-on-fill: var(--accent-50);
  --accent-strong: var(--accent-70);
  --info-fg-pale: var(--info-10);
  --info-fg: var(--info-50);
  --info-subtle-on-surface: var(--info-20);
  --info-subtle-strong: var(--info-20);
  --info-border: var(--info-70);
  --info-subtle: var(--info-10);
  --info-on-fill: var(--info-70);
  --info-border-strong: var(--info-80);
  --info-fg-deep: var(--info-80);
  --warning-fg-pale: var(--warning-10);
  --warning-fg-soft: var(--warning-20);
  --warning-fg-light: var(--warning-30);
  --warning-fg: var(--warning-50);
  --warning-fg-deep: var(--warning-70);
  --warning-fg-dark-only: transparent;
  --warning-subtle-on-surface: var(--warning-10);
  --warning-subtle: var(--warning-10);
  --warning-subtle-strong-on-surface: var(--warning-20);
  --warning-subtle-strong: var(--warning-20);
  --warning-border-soft: var(--warning-50);
  --warning-border-mid: var(--warning-60);
  --warning-border: var(--warning-70);
  --warning-on-fill: var(--warning-70);
  --warning-border-strong: var(--warning-80);
  --warning-on-fill-strong: var(--warning-80);
  --error-fg: var(--error-50);
  --error-fg-strong: var(--error-60);
  --error-fg-deep: var(--error-70);
  --error-fg-deeper: var(--error-80);
  --error-fg-deepest: var(--error-90);
  --error-subtle: var(--error-10);
  --error-subtle-on-surface: var(--error-20);
  --error-subtle-strong: var(--error-20);
  --error-border-soft: var(--error-50);
  --error-border-invert: var(--error-50);
  --error-border-on-fill: var(--error-50);
  --error-border: var(--error-60);
  --error-text-on-fill: var(--error-60);
  --error-border-strong: var(--error-70);
  --error-border-active: var(--error-70);
  --error-on-fill: var(--error-70);
  --success-fg-dark-only: transparent;
  --success-fg-light: var(--success-40);
  --success-fg: var(--success-50);
  --success-fg-strong: var(--success-60);
  --success-fg-deep: var(--success-70);
  --success-subtle: var(--success-10);
  --success-subtle-on-surface: var(--success-20);
  --success-subtle-strong: var(--success-20);
  --success-border-soft: var(--success-60);
  --success-border-mid: var(--success-70);
  --success-border: var(--success-70);
  --success-on-fill: var(--success-70);
  --success-border-strong: var(--success-80);
  --success-on-fill-strong: var(--success-80);
  --purple-fg: var(--purple-50);
  --purple-subtle: var(--purple-10);
  --purple-subtle-on-surface: var(--purple-20);
  --purple-subtle-strong: var(--purple-20);
  --purple-text-on-fill: var(--purple-60);
  --purple-border: var(--purple-60);
  --purple-border-strong: var(--purple-70);
  --purple-border-active: var(--purple-70);
  --purple-on-fill: var(--purple-70);
  --tag-blue-bg: var(--tag-blue-50);
  --tag-blue-fg: var(--tag-blue-90);
  --tag-green-bg: var(--tag-green-50);
  --tag-green-fg: var(--tag-green-90);
  --tag-purple-bg: var(--tag-purple-50);
  --tag-purple-fg: var(--tag-purple-90);
  --tag-yellow-bg: var(--tag-yellow-50);
  --tag-yellow-fg: var(--tag-yellow-90);
  --tag-teal-bg: var(--tag-teal-50);
  --tag-teal-fg: var(--tag-teal-90);
  --tag-gray-bg: var(--tag-gray-50);
  --tag-gray-fg: var(--tag-gray-90);
  --tag-dark-blue-bg: var(--tag-dark-blue-50);
  --tag-dark-blue-fg: var(--tag-dark-blue-90);
  --tag-pink-bg: var(--tag-pink-50);
  --tag-pink-fg: var(--tag-pink-90);
  --tag-coral-bg: var(--tag-coral-50);
  --tag-coral-fg: var(--tag-coral-90);
  --tag-light-green-bg: var(--tag-light-green-50);
  --tag-light-green-fg: var(--tag-light-green-90);
  --tag-indigo-bg: var(--tag-indigo-50);
  --tag-indigo-fg: var(--tag-indigo-90);
  --tag-brown-bg: var(--tag-brown-50);
  --tag-brown-fg: var(--tag-brown-90);
  --lt-black-dk-white: var(--text);
  --lt-dk-primary-90: var(--brand-primary-deep);
  --lt-dk-primary-50: var(--brand-primary);
  --lt-dk-accent-50: var(--brand-accent);
  --lt-dk-accent-60: var(--brand-accent-strong);
  --lt-dk-accent-70: var(--brand-accent-hover);
  --lt-dk-accent-2-50: var(--brand-accent-2);
  --lt-dk-white: var(--on-accent);
  --lt-pink-60-dk-pink-50: var(--brand-pink);
  --lt-transparent-dk-accent-60: var(--border-dark-only-accent);
  --lt-transparent-dk-error-60: var(--error-border-dark-only);
  --lt-white-dk-primary-10: var(--surface-bright);
  --lt-white-dk-primary-90: var(--surface-panel);
  --lt-dk-neutral-10: var(--surface-flat);
  --lt-dk-neutral-20: var(--border-default);
  --lt-dk-neutral-30: var(--border-strong);
  --lt-dk-neutral-50: var(--text-muted-flat);
  --lt-neutral-10-dk-primary-80: var(--surface-raised);
  --lt-neutral-10-dk-primary-90: var(--surface);
  --lt-neutral-15-dk-primary-80: var(--surface-raised-alt);
  --lt-neutral-15-dk-primary-90: var(--surface-sunken);
  --lt-neutral-10-dk-neutral-90: var(--surface-inverse);
  --lt-neutral-10-dk-white: var(--surface-inset);
  --lt-neutral-20-dk-primary-90: var(--border-on-surface);
  --lt-neutral-20-dk-primary-50: var(--border-focus-brand);
  --lt-neutral-20-dk-accent-40: var(--border-focus-accent);
  --lt-neutral-20-dk-error-40: var(--error-subtle-neutral);
  --lt-neutral-20-dk-warning-40: var(--warning-subtle-neutral);
  --lt-neutral-20-dk-success-40: var(--success-subtle-neutral);
  --lt-neutral-20-dk-success-70: var(--success-subtle-neutral-deep);
  --lt-neutral-60-dk-neutral-20: var(--text-muted-soft);
  --lt-neutral-60-dk-neutral-30: var(--text-muted-mixed);
  --lt-neutral-60-dk-white: var(--text-muted-invert);
  --lt-neutral-70-dk-neutral-10: var(--text-muted-strong);
  --lt-neutral-70-dk-neutral-20: var(--text-muted);
  --lt-neutral-70-dk-neutral-50: var(--text-muted-hold);
  --lt-neutral-70-dk-primary-90: var(--text-muted-on-surface);
  --lt-neutral-70-dk-white: var(--text-muted-on-fill);
  --lt-neutral-80-dk-white: var(--text-strong);
  --lt-neutral-80-dk-neutral-70: var(--text-strong-hold);
  --lt-neutral-90-dk-white: var(--text-strongest);
  --lt-dk-primary-70: var(--brand-primary-hover);
  --lt-primary-trans-dk-primary-trans-2: var(--brand-primary-translucent);
  --lt-primary-50-dk-primary-40: var(--brand-hover);
  --lt-primary-50-dk-primary-70: var(--brand-active);
  --lt-primary-50-dk-accent-40: var(--accent-brand-hover);
  --lt-primary-50-dk-accent-50: var(--accent);
  --lt-primary-50-dk-white: var(--brand-on-fill);
  --lt-primary-70-dk-accent-60: var(--brand-strong);
  --lt-primary-80-dk-primary-50: var(--brand-strongest);
  --lt-primary-90-dk-white: var(--brand-on-fill-strong);
  --lt-accent-10-dk-primary-90: var(--accent-subtle-on-surface);
  --lt-accent-10-dk-accent-90: var(--accent-subtle);
  --lt-accent-50-dk-accent-40: var(--accent-hover);
  --lt-accent-50-dk-accent-60: var(--accent-active);
  --lt-accent-50-dk-white: var(--accent-on-fill);
  --lt-accent-70-dk-accent-60: var(--accent-strong);
  --lt-dk-info-10: var(--info-fg-pale);
  --lt-dk-info-50: var(--info-fg);
  --lt-info-20-dk-primary-90: var(--info-subtle-on-surface);
  --lt-info-20-dk-info-90: var(--info-subtle-strong);
  --lt-info-70-dk-info-40: var(--info-border);
  --lt-info-10-dk-info-80: var(--info-subtle);
  --lt-info-70-dk-white: var(--info-on-fill);
  --lt-info-80-dk-info-60: var(--info-border-strong);
  --lt-info-80-dk-info-70: var(--info-fg-deep);
  --lt-dk-warning-10: var(--warning-fg-pale);
  --lt-dk-warning-20: var(--warning-fg-soft);
  --lt-dk-warning-30: var(--warning-fg-light);
  --lt-dk-warning-50: var(--warning-fg);
  --lt-dk-warning-70: var(--warning-fg-deep);
  --lt-transparent-dk-warning-70: var(--warning-fg-dark-only);
  --lt-warning-10-dk-primary-90: var(--warning-subtle-on-surface);
  --lt-warning-10-dk-warning-90: var(--warning-subtle);
  --lt-warning-20-dk-primary-90: var(--warning-subtle-strong-on-surface);
  --lt-warning-20-dk-warning-90: var(--warning-subtle-strong);
  --lt-warning-50-dk-warning-40: var(--warning-border-soft);
  --lt-warning-60-dk-warning-40: var(--warning-border-mid);
  --lt-warning-70-dk-warning-40: var(--warning-border);
  --lt-warning-70-dk-white: var(--warning-on-fill);
  --lt-warning-80-dk-warning-60: var(--warning-border-strong);
  --lt-warning-80-dk-white: var(--warning-on-fill-strong);
  --lt-dk-error-50: var(--error-fg);
  --lt-dk-error-60: var(--error-fg-strong);
  --lt-dk-error-70: var(--error-fg-deep);
  --lt-dk-error-80: var(--error-fg-deeper);
  --lt-dk-error-90: var(--error-fg-deepest);
  --lt-error-10-dk-error-90: var(--error-subtle);
  --lt-error-20-dk-primary-90: var(--error-subtle-on-surface);
  --lt-error-20-dk-error-90: var(--error-subtle-strong);
  --lt-error-50-dk-error-40: var(--error-border-soft);
  --lt-error-50-dk-error-60: var(--error-border-invert);
  --lt-error-50-dk-white: var(--error-border-on-fill);
  --lt-error-60-dk-error-40: var(--error-border);
  --lt-error-60-dk-white: var(--error-text-on-fill);
  --lt-error-70-dk-error-40: var(--error-border-strong);
  --lt-error-70-dk-error-60: var(--error-border-active);
  --lt-error-70-dk-white: var(--error-on-fill);
  --lt-transparent-dk-success-70: var(--success-fg-dark-only);
  --lt-dk-success-40: var(--success-fg-light);
  --lt-dk-success-50: var(--success-fg);
  --lt-dk-success-60: var(--success-fg-strong);
  --lt-dk-success-70: var(--success-fg-deep);
  --lt-success-10-dk-success-90: var(--success-subtle);
  --lt-success-20-dk-primary-90: var(--success-subtle-on-surface);
  --lt-success-20-dk-success-90: var(--success-subtle-strong);
  --lt-success-60-dk-success-50: var(--success-border-soft);
  --lt-success-70-dk-success-50: var(--success-border-mid);
  --lt-success-70-dk-success-40: var(--success-border);
  --lt-success-70-dk-white: var(--success-on-fill);
  --lt-success-80-dk-success-60: var(--success-border-strong);
  --lt-success-80-dk-white: var(--success-on-fill-strong);
  --lt-dk-purple-50: var(--purple-fg);
  --lt-purple-10-dk-purple-90: var(--purple-subtle);
  --lt-purple-20-dk-primary-90: var(--purple-subtle-on-surface);
  --lt-purple-20-dk-purple-90: var(--purple-subtle-strong);
  --lt-purple-60-dk-white: var(--purple-text-on-fill);
  --lt-purple-60-dk-purple-40: var(--purple-border);
  --lt-purple-70-dk-purple-40: var(--purple-border-strong);
  --lt-purple-70-dk-purple-60: var(--purple-border-active);
  --lt-purple-70-dk-white: var(--purple-on-fill);
  --lt-tag-blue-50-dk-blue-90: var(--tag-blue-bg);
  --lt-tag-blue-90-dk-blue-50: var(--tag-blue-fg);
  --lt-tag-green-50-dk-green-90: var(--tag-green-bg);
  --lt-tag-green-90-dk-green-50: var(--tag-green-fg);
  --lt-tag-purple-50-dk-purple-90: var(--tag-purple-bg);
  --lt-tag-purple-90-dk-purple-50: var(--tag-purple-fg);
  --lt-tag-yellow-50-dk-yellow-90: var(--tag-yellow-bg);
  --lt-tag-yellow-90-dk-yellow-50: var(--tag-yellow-fg);
  --lt-tag-teal-50-dk-teal-90: var(--tag-teal-bg);
  --lt-tag-teal-90-dk-teal-50: var(--tag-teal-fg);
  --lt-tag-gray-50-dk-gray-90: var(--tag-gray-bg);
  --lt-tag-gray-90-dk-gray-50: var(--tag-gray-fg);
  --lt-tag-dark-blue-50-dk-dark-blue-90: var(--tag-dark-blue-bg);
  --lt-tag-dark-blue-90-dk-dark-blue-50: var(--tag-dark-blue-fg);
  --lt-tag-pink-50-dk-pink-90: var(--tag-pink-bg);
  --lt-tag-pink-90-dk-pink-50: var(--tag-pink-fg);
  --lt-tag-coral-50-dk-coral-90: var(--tag-coral-bg);
  --lt-tag-coral-90-dk-coral-50: var(--tag-coral-fg);
  --lt-tag-light-green-50-dk-light-green-90: var(--tag-light-green-bg);
  --lt-tag-light-green-90-dk-light-green-50: var(--tag-light-green-fg);
  --lt-tag-indigo-50-dk-indigo-90: var(--tag-indigo-bg);
  --lt-tag-indigo-90-dk-indigo-50: var(--tag-indigo-fg);
  --lt-tag-brown-50-dk-brown-90: var(--tag-brown-bg);
  --lt-tag-brown-90-dk-brown-50: var(--tag-brown-fg);
  --box-shadow: 0, 0, 0, 0.1;
}
@media only screen and (max-width: 550px) and (pointer: coarse) {
  :root,
  body.light {
    --security-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      var(--lt-dk-accent-50) 0%,
      var(--lt-dk-primary-50) 15%,
      var(--lt-dk-primary-90) 45%,
      var(--lt-dk-primary-90) 65%,
      var(--lt-dk-primary-50) 85%,
      var(--lt-dk-primary-50) 100%
    );
  }
}
:root,
body.light {
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-accent-50) 0%,
    var(--lt-dk-primary-50) 15%,
    var(--lt-dk-primary-90) 45%,
    var(--lt-dk-primary-90) 65%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
}
@media (pointer: coarse) {
  :root,
  body.light {
    --background-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      #ffffff 0%,
      #ffffff 100%
    );
  }
}
:root,
body.light {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    #ffffff 0%,
    #ffffff 100%
  );
  --gradient-primary-50-accent-50: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --gradient-diag-primary-50-accent-50: linear-gradient(
    350deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --theme-primary-background: var(--lt-primary-50-dk-accent-50);
  --theme-primary-button: var(--lt-dk-primary-50);
  --theme-primary-button-hover: var(--lt-dk-primary-70);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--lt-primary-50-dk-white);
  --theme-primary-border: var(--lt-dk-primary-50);
  --theme-primary-border-hover: var(--lt-dk-primary-70);
  --theme-primary-text: var(--lt-primary-50-dk-accent-50);
  --theme-primary-text-hover: var(--lt-primary-50-dk-accent-50);
  --theme-accent-background: var(--lt-dk-accent-50);
  --theme-accent-button: var(--lt-dk-accent-50);
  --theme-accent-button-hover: var(--lt-dk-accent-70);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-accent-50-dk-white);
  --theme-accent-border: var(--lt-dk-accent-50);
  --theme-accent-border-hover: var(--lt-dk-accent-70);
  --theme-accent-text: var(--lt-dk-accent-50);
  --theme-accent-text-hover: var(--lt-dk-accent-70);
  /* shadows */
  --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030,
    /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */
  --shadow-m: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030,
    /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */
  --shadow-l: inset 0 1px 2px #ffffff70, /* top highlight */ 0 4px 6px #00000030,
    /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */
  --color-scheme: var(--orange);
  --color-scheme-05: var(--orange-alpha-05);
  --color-scheme-10: var(--orange-alpha-10);
  --color-scheme-20: var(--orange-alpha-20);
  --color-scheme-30: var(--orange-alpha-30);
  --color-scheme-40: var(--orange-alpha-40);
  --color-scheme-50: var(--orange-alpha-50);
  --color-scheme-60: var(--orange-alpha-60);
  --color-scheme-70: var(--orange-alpha-70);
  --color-scheme-80: var(--orange-alpha-80);
  --color-scheme-90: var(--orange-alpha-90);
}

body.dark {
  color-scheme: dark;
  background-color: var(--black);
  color: var(--white-alpha-90);
  --dropdown-surface: var(--dark-surface);
  --text: var(--white);
  --brand-primary-deep: var(--primary-90);
  --brand-primary: var(--primary-50);
  --brand-accent: var(--accent-50);
  --brand-accent-2: var(--accent-2-50);
  --on-accent: var(--white);
  --brand-pink: var(--pink-50);
  --border-dark-only-accent: var(--accent-60);
  --error-border-dark-only: var(--error-60);
  --surface-bright: var(--primary-10);
  --surface-panel: var(--dark-background);
  --surface-flat: var(--neutral-10);
  --border-default: var(--neutral-20);
  --border-strong: var(--neutral-30);
  --text-muted-flat: var(--neutral-50);
  --surface-raised: var(--primary-80);
  --surface: var(--dark-surface);
  --surface-raised-alt: var(--primary-80);
  --surface-sunken: var(--primary-90);
  --surface-inverse: var(--neutral-90);
  --surface-inset: var(--white);
  --border-on-surface: var(--dark-surface);
  --border-focus-brand: var(--primary-50);
  --border-focus-accent: var(--accent-40);
  --error-subtle-neutral: var(--error-40);
  --warning-subtle-neutral: var(--warning-40);
  --success-subtle-neutral: var(--success-40);
  --success-subtle-neutral-deep: var(--success-70);
  --text-muted-soft: var(--neutral-20);
  --text-muted-mixed: var(--neutral-30);
  --text-muted-invert: var(--white);
  --text-muted-strong: var(--neutral-10);
  --text-muted: var(--neutral-20);
  --text-muted-hold: var(--neutral-50);
  --text-muted-on-surface: var(--primary-90);
  --text-muted-on-fill: var(--white);
  --text-strong: var(--white);
  --text-strong-hold: var(--neutral-70);
  --text-strongest: var(--white);
  --brand-primary-hover: var(--primary-70);
  --brand-primary-translucent: var(--primary-trans-2);
  --brand-hover: var(--primary-40);
  --brand-active: var(--primary-70);
  --accent-brand-hover: var(--accent-40);
  --accent: var(--accent-50);
  --brand-on-fill: var(--white);
  --brand-strong: var(--accent-60);
  --brand-strongest: var(--primary-50);
  --brand-on-fill-strong: var(--white);
  --accent-subtle-on-surface: var(--primary-90);
  --accent-subtle: var(--accent-90);
  --accent-hover: var(--accent-40);
  --accent-active: var(--accent-60);
  --accent-on-fill: var(--white);
  --accent-strong: var(--accent-60);
  --info-fg-pale: var(--info-10);
  --info-fg: var(--info-50);
  --info-subtle-on-surface: var(--primary-90);
  --info-subtle-strong: var(--info-90);
  --info-border: var(--info-40);
  --info-subtle: var(--info-80);
  --info-on-fill: var(--white);
  --info-border-strong: var(--info-60);
  --info-fg-deep: var(--info-70);
  --warning-fg-pale: var(--warning-10);
  --warning-fg-soft: var(--warning-20);
  --warning-fg-light: var(--warning-30);
  --warning-fg: var(--warning-50);
  --warning-fg-deep: var(--warning-70);
  --warning-fg-dark-only: var(--warning-70);
  --warning-subtle-on-surface: var(--primary-90);
  --warning-subtle: var(--warning-90);
  --warning-subtle-strong-on-surface: var(--primary-90);
  --warning-subtle-strong: var(--warning-90);
  --warning-border-soft: var(--warning-40);
  --warning-border-mid: var(--warning-40);
  --warning-border: var(--warning-40);
  --warning-on-fill: var(--white);
  --warning-border-strong: var(--warning-60);
  --warning-on-fill-strong: var(--white);
  --error-fg: var(--error-50);
  --error-fg-strong: var(--error-60);
  --error-fg-deep: var(--error-70);
  --error-fg-deeper: var(--error-80);
  --error-subtle: var(--error-90);
  --error-subtle-on-surface: var(--primary-90);
  --error-subtle-strong: var(--error-90);
  --error-border-soft: var(--error-40);
  --error-border-invert: var(--error-60);
  --error-border-on-fill: var(--white);
  --error-border: var(--error-40);
  --error-text-on-fill: var(--white);
  --error-border-strong: var(--error-40);
  --error-border-active: var(--error-60);
  --error-on-fill: var(--white);
  --success-fg-dark-only: var(--success-70);
  --success-fg-light: var(--success-40);
  --success-fg: var(--success-50);
  --success-fg-strong: var(--success-60);
  --success-fg-deep: var(--success-70);
  --success-subtle: var(--success-90);
  --success-subtle-on-surface: var(--primary-90);
  --success-subtle-strong: var(--success-90);
  --success-border-soft: var(--success-50);
  --success-border-mid: var(--success-50);
  --success-border: var(--success-40);
  --success-on-fill: var(--white);
  --success-border-strong: var(--success-60);
  --success-on-fill-strong: var(--white);
  --purple-fg: var(--purple-50);
  --purple-subtle: var(--purple-90);
  --purple-subtle-on-surface: var(--primary-90);
  --purple-subtle-strong: var(--purple-90);
  --purple-text-on-fill: var(--white);
  --purple-border: var(--purple-40);
  --purple-border-strong: var(--purple-40);
  --purple-border-active: var(--purple-60);
  --purple-on-fill: var(--white);
  --tag-blue-bg: var(--tag-blue-90);
  --tag-blue-fg: var(--tag-blue-50);
  --tag-green-bg: var(--tag-green-90);
  --tag-green-fg: var(--tag-green-50);
  --tag-purple-bg: var(--tag-purple-90);
  --tag-purple-fg: var(--tag-purple-50);
  --tag-yellow-bg: var(--tag-yellow-90);
  --tag-yellow-fg: var(--tag-yellow-50);
  --tag-teal-bg: var(--tag-teal-90);
  --tag-teal-fg: var(--tag-teal-50);
  --tag-gray-bg: var(--tag-gray-90);
  --tag-gray-fg: var(--tag-gray-50);
  --tag-dark-blue-bg: var(--tag-dark-blue-90);
  --tag-dark-blue-fg: var(--tag-dark-blue-50);
  --tag-pink-bg: var(--tag-pink-90);
  --tag-pink-fg: var(--tag-pink-50);
  --tag-coral-bg: var(--tag-coral-90);
  --tag-coral-fg: var(--tag-coral-50);
  --tag-light-green-bg: var(--tag-light-green-90);
  --tag-light-green-fg: var(--tag-light-green-50);
  --tag-indigo-bg: var(--tag-indigo-90);
  --tag-indigo-fg: var(--tag-indigo-50);
  --tag-brown-bg: var(--tag-brown-90);
  --tag-brown-fg: var(--tag-brown-50);
  --lt-black-dk-white: var(--text);
  --lt-dk-primary-90: var(--brand-primary-deep);
  --lt-dk-primary-50: var(--brand-primary);
  --lt-dk-accent-50: var(--brand-accent);
  --lt-dk-accent-60: var(--brand-accent-strong);
  --lt-dk-accent-70: var(--brand-accent-hover);
  --lt-dk-accent-2-50: var(--brand-accent-2);
  --lt-dk-white: var(--on-accent);
  --lt-pink-60-dk-pink-50: var(--brand-pink);
  --lt-transparent-dk-accent-60: var(--border-dark-only-accent);
  --lt-transparent-dk-error-60: var(--error-border-dark-only);
  --lt-white-dk-primary-10: var(--surface-bright);
  --lt-white-dk-primary-90: var(--surface-panel);
  --lt-dk-neutral-10: var(--surface-flat);
  --lt-dk-neutral-20: var(--border-default);
  --lt-dk-neutral-30: var(--border-strong);
  --lt-dk-neutral-50: var(--text-muted-flat);
  --lt-neutral-10-dk-primary-80: var(--surface-raised);
  --lt-neutral-10-dk-primary-90: var(--surface);
  --lt-neutral-15-dk-primary-80: var(--surface-raised-alt);
  --lt-neutral-15-dk-primary-90: var(--surface-sunken);
  --lt-neutral-10-dk-neutral-90: var(--surface-inverse);
  --lt-neutral-10-dk-white: var(--surface-inset);
  --lt-neutral-20-dk-primary-90: var(--border-on-surface);
  --lt-neutral-20-dk-primary-50: var(--border-focus-brand);
  --lt-neutral-20-dk-accent-40: var(--border-focus-accent);
  --lt-neutral-20-dk-error-40: var(--error-subtle-neutral);
  --lt-neutral-20-dk-warning-40: var(--warning-subtle-neutral);
  --lt-neutral-20-dk-success-40: var(--success-subtle-neutral);
  --lt-neutral-20-dk-success-70: var(--success-subtle-neutral-deep);
  --lt-neutral-60-dk-neutral-20: var(--text-muted-soft);
  --lt-neutral-60-dk-neutral-30: var(--text-muted-mixed);
  --lt-neutral-60-dk-white: var(--text-muted-invert);
  --lt-neutral-70-dk-neutral-10: var(--text-muted-strong);
  --lt-neutral-70-dk-neutral-20: var(--text-muted);
  --lt-neutral-70-dk-neutral-50: var(--text-muted-hold);
  --lt-neutral-70-dk-primary-90: var(--text-muted-on-surface);
  --lt-neutral-70-dk-white: var(--text-muted-on-fill);
  --lt-neutral-80-dk-white: var(--text-strong);
  --lt-neutral-80-dk-neutral-70: var(--text-strong-hold);
  --lt-neutral-90-dk-white: var(--text-strongest);
  --lt-dk-primary-70: var(--brand-primary-hover);
  --lt-primary-trans-dk-primary-trans-2: var(--brand-primary-translucent);
  --lt-primary-50-dk-primary-40: var(--brand-hover);
  --lt-primary-50-dk-primary-70: var(--brand-active);
  --lt-primary-50-dk-accent-40: var(--accent-brand-hover);
  --lt-primary-50-dk-accent-50: var(--accent);
  --lt-primary-50-dk-white: var(--brand-on-fill);
  --lt-primary-70-dk-accent-60: var(--brand-strong);
  --lt-primary-80-dk-primary-50: var(--brand-strongest);
  --lt-primary-90-dk-white: var(--brand-on-fill-strong);
  --lt-accent-10-dk-primary-90: var(--accent-subtle-on-surface);
  --lt-accent-10-dk-accent-90: var(--accent-subtle);
  --lt-accent-50-dk-accent-40: var(--accent-hover);
  --lt-accent-50-dk-accent-60: var(--accent-active);
  --lt-accent-50-dk-white: var(--accent-on-fill);
  --lt-accent-70-dk-accent-60: var(--accent-strong);
  --lt-dk-info-10: var(--info-fg-pale);
  --lt-dk-info-50: var(--info-fg);
  --lt-info-20-dk-primary-90: var(--info-subtle-on-surface);
  --lt-info-20-dk-info-90: var(--info-subtle-strong);
  --lt-info-70-dk-info-40: var(--info-border);
  --lt-info-10-dk-info-80: var(--info-subtle);
  --lt-info-70-dk-white: var(--info-on-fill);
  --lt-info-80-dk-info-60: var(--info-border-strong);
  --lt-info-80-dk-info-70: var(--info-fg-deep);
  --lt-dk-warning-10: var(--warning-fg-pale);
  --lt-dk-warning-20: var(--warning-fg-soft);
  --lt-dk-warning-30: var(--warning-fg-light);
  --lt-dk-warning-50: var(--warning-fg);
  --lt-dk-warning-70: var(--warning-fg-deep);
  --lt-transparent-dk-warning-70: var(--warning-fg-dark-only);
  --lt-warning-10-dk-primary-90: var(--warning-subtle-on-surface);
  --lt-warning-10-dk-warning-90: var(--warning-subtle);
  --lt-warning-20-dk-primary-90: var(--warning-subtle-strong-on-surface);
  --lt-warning-20-dk-warning-90: var(--warning-subtle-strong);
  --lt-warning-50-dk-warning-40: var(--warning-border-soft);
  --lt-warning-60-dk-warning-40: var(--warning-border-mid);
  --lt-warning-70-dk-warning-40: var(--warning-border);
  --lt-warning-70-dk-white: var(--warning-on-fill);
  --lt-warning-80-dk-warning-60: var(--warning-border-strong);
  --lt-warning-80-dk-white: var(--warning-on-fill-strong);
  --lt-dk-error-50: var(--error-fg);
  --lt-dk-error-60: var(--error-fg-strong);
  --lt-dk-error-70: var(--error-fg-deep);
  --lt-dk-error-80: var(--error-fg-deeper);
  --lt-dk-error-90: var(--error-fg-deepest);
  --lt-error-10-dk-error-90: var(--error-subtle);
  --lt-error-20-dk-primary-90: var(--error-subtle-on-surface);
  --lt-error-20-dk-error-90: var(--error-subtle-strong);
  --lt-error-50-dk-error-40: var(--error-border-soft);
  --lt-error-50-dk-error-60: var(--error-border-invert);
  --lt-error-50-dk-white: var(--error-border-on-fill);
  --lt-error-60-dk-error-40: var(--error-border);
  --lt-error-60-dk-white: var(--error-text-on-fill);
  --lt-error-70-dk-error-40: var(--error-border-strong);
  --lt-error-70-dk-error-60: var(--error-border-active);
  --lt-error-70-dk-white: var(--error-on-fill);
  --lt-transparent-dk-success-70: var(--success-fg-dark-only);
  --lt-dk-success-40: var(--success-fg-light);
  --lt-dk-success-50: var(--success-fg);
  --lt-dk-success-60: var(--success-fg-strong);
  --lt-dk-success-70: var(--success-fg-deep);
  --lt-success-10-dk-success-90: var(--success-subtle);
  --lt-success-20-dk-primary-90: var(--success-subtle-on-surface);
  --lt-success-20-dk-success-90: var(--success-subtle-strong);
  --lt-success-60-dk-success-50: var(--success-border-soft);
  --lt-success-70-dk-success-50: var(--success-border-mid);
  --lt-success-70-dk-success-40: var(--success-border);
  --lt-success-70-dk-white: var(--success-on-fill);
  --lt-success-80-dk-success-60: var(--success-border-strong);
  --lt-success-80-dk-white: var(--success-on-fill-strong);
  --lt-dk-purple-50: var(--purple-fg);
  --lt-purple-10-dk-purple-90: var(--purple-subtle);
  --lt-purple-20-dk-primary-90: var(--purple-subtle-on-surface);
  --lt-purple-20-dk-purple-90: var(--purple-subtle-strong);
  --lt-purple-60-dk-white: var(--purple-text-on-fill);
  --lt-purple-60-dk-purple-40: var(--purple-border);
  --lt-purple-70-dk-purple-40: var(--purple-border-strong);
  --lt-purple-70-dk-purple-60: var(--purple-border-active);
  --lt-purple-70-dk-white: var(--purple-on-fill);
  --lt-tag-blue-50-dk-blue-90: var(--tag-blue-bg);
  --lt-tag-blue-90-dk-blue-50: var(--tag-blue-fg);
  --lt-tag-green-50-dk-green-90: var(--tag-green-bg);
  --lt-tag-green-90-dk-green-50: var(--tag-green-fg);
  --lt-tag-purple-50-dk-purple-90: var(--tag-purple-bg);
  --lt-tag-purple-90-dk-purple-50: var(--tag-purple-fg);
  --lt-tag-yellow-50-dk-yellow-90: var(--tag-yellow-bg);
  --lt-tag-yellow-90-dk-yellow-50: var(--tag-yellow-fg);
  --lt-tag-teal-50-dk-teal-90: var(--tag-teal-bg);
  --lt-tag-teal-90-dk-teal-50: var(--tag-teal-fg);
  --lt-tag-gray-50-dk-gray-90: var(--tag-gray-bg);
  --lt-tag-gray-90-dk-gray-50: var(--tag-gray-fg);
  --lt-tag-dark-blue-50-dk-dark-blue-90: var(--tag-dark-blue-bg);
  --lt-tag-dark-blue-90-dk-dark-blue-50: var(--tag-dark-blue-fg);
  --lt-tag-pink-50-dk-pink-90: var(--tag-pink-bg);
  --lt-tag-pink-90-dk-pink-50: var(--tag-pink-fg);
  --lt-tag-coral-50-dk-coral-90: var(--tag-coral-bg);
  --lt-tag-coral-90-dk-coral-50: var(--tag-coral-fg);
  --lt-tag-light-green-50-dk-light-green-90: var(--tag-light-green-bg);
  --lt-tag-light-green-90-dk-light-green-50: var(--tag-light-green-fg);
  --lt-tag-indigo-50-dk-indigo-90: var(--tag-indigo-bg);
  --lt-tag-indigo-90-dk-indigo-50: var(--tag-indigo-fg);
  --lt-tag-brown-50-dk-brown-90: var(--tag-brown-bg);
  --lt-tag-brown-90-dk-brown-50: var(--tag-brown-fg);
  --box-shadow: 0, 0, 0, 0.6;
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-accent-50) 0%,
    var(--lt-dk-primary-50) 15%,
    var(--lt-dk-primary-90) 45%,
    var(--lt-dk-primary-90) 65%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-primary-90) 0%,
    var(--lt-white-dk-primary-90) 45%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --gradient-primary-50-accent-50: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --gradient-diag-primary-50-accent-50: linear-gradient(
    350deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --theme-primary-background: var(--lt-primary-50-dk-accent-50);
  --theme-primary-button: var(--lt-dk-primary-50);
  --theme-primary-button-hover: var(--lt-dk-primary-70);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--lt-primary-50-dk-white);
  --theme-primary-border: var(--lt-dk-primary-50);
  --theme-primary-border-hover: var(--lt-dk-primary-70);
  --theme-primary-text: var(--lt-primary-50-dk-accent-50);
  --theme-primary-text-hover: var(--lt-primary-50-dk-accent-50);
  --theme-accent-background: var(--lt-dk-accent-50);
  --theme-accent-button: var(--lt-dk-accent-50);
  --theme-accent-button-hover: var(--lt-dk-accent-70);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-accent-50-dk-white);
  --theme-accent-border: var(--lt-dk-accent-50);
  --theme-accent-border-hover: var(--lt-dk-accent-70);
  --theme-accent-text: var(--lt-dk-accent-50);
  --theme-accent-text-hover: var(--lt-dk-accent-70);
  /* shadows */
  --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030,
    /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */
  --shadow-m: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030,
    /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */
  --shadow-l: inset 0 1px 2px #ffffff70, /* top highlight */ 0 4px 6px #00000030,
    /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */
  --color-scheme: var(--orange);
  --color-scheme-05: var(--orange-alpha-05);
  --color-scheme-10: var(--orange-alpha-10);
  --color-scheme-20: var(--orange-alpha-20);
  --color-scheme-30: var(--orange-alpha-30);
  --color-scheme-40: var(--orange-alpha-40);
  --color-scheme-50: var(--orange-alpha-50);
  --color-scheme-60: var(--orange-alpha-60);
  --color-scheme-70: var(--orange-alpha-70);
  --color-scheme-80: var(--orange-alpha-80);
  --color-scheme-90: var(--orange-alpha-90);
  --color-scheme-light: var(--orange-light);
}

body.light.standard {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--standard-dark-blue) 0%,
    var(--standard-dark-blue) 100%
  );
}

body.dark.standard {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--standard-dark-blue) 0%,
    var(--standard-dark-blue) 100%
  );
}

body.light.standard,
body.dark.standard {
  --color-scheme: var(--teal);
  --color-scheme-05: var(--teal-alpha-05);
  --color-scheme-10: var(--teal-alpha-10);
  --color-scheme-20: var(--teal-alpha-20);
  --color-scheme-30: var(--teal-alpha-30);
  --color-scheme-40: var(--teal-alpha-40);
  --color-scheme-50: var(--teal-alpha-50);
  --color-scheme-60: var(--teal-alpha-60);
  --color-scheme-70: var(--teal-alpha-70);
  --color-scheme-80: var(--teal-alpha-80);
  --color-scheme-90: var(--teal-alpha-90);
  --color-scheme-light: var(--teal-light);
}

:root,
body.light {
  --status-error-fill: hsl(0, 70%, 94%);
  --status-error-text: hsl(0, 97%, 32%);
  --status-error-mark: hsl(0, 97%, 50%);
  --status-warning-fill: hsl(45, 70%, 94%);
  --status-warning-text: hsl(45, 97%, 32%);
  --status-warning-mark: hsl(45, 97%, 50%);
  --status-success-fill: hsl(152, 70%, 94%);
  --status-success-text: hsl(152, 90%, 30%);
  --status-success-mark: hsl(152, 90%, 45%);
  --status-info-fill: hsl(200, 70%, 94%);
  --status-info-text: hsl(200, 95%, 32%);
  --status-info-mark: hsl(200, 95%, 45%);
}

body.dark {
  --status-error-fill: hsl(0, 60%, 18%);
  --status-error-text: hsl(0, 97%, 66%);
  --status-error-mark: hsl(0, 97%, 50%);
  --status-warning-fill: hsl(45, 60%, 18%);
  --status-warning-text: hsl(45, 97%, 66%);
  --status-warning-mark: hsl(45, 97%, 50%);
  --status-success-fill: hsl(152, 60%, 18%);
  --status-success-text: hsl(152, 90%, 66%);
  --status-success-mark: hsl(152, 90%, 45%);
  --status-info-fill: hsl(200, 60%, 18%);
  --status-info-text: hsl(200, 95%, 66%);
  --status-info-mark: hsl(200, 95%, 45%);
}

body.light.protanopia {
  --status-error-fill: hsl(22, 70%, 94%);
  --status-error-text: hsl(22, 90%, 38%);
  --status-error-mark: hsl(22, 90%, 49%);
  --status-warning-fill: hsl(46, 70%, 94%);
  --status-warning-text: hsl(46, 95%, 28%);
  --status-warning-mark: hsl(46, 95%, 35%);
  --status-success-fill: hsl(173, 70%, 94%);
  --status-success-text: hsl(173, 72%, 28%);
  --status-success-mark: hsl(173, 72%, 36%);
  --status-info-fill: hsl(205, 70%, 94%);
  --status-info-text: hsl(205, 82%, 38%);
  --status-info-mark: hsl(205, 82%, 50%);
  --purple-cvd-fill: hsl(285, 70%, 94%);
  --purple-cvd-text: hsl(285, 70%, 38%);
  --purple-cvd-mark: hsl(285, 70%, 50%);
  --light-surface: hsl(210, 40%, 96%);
}

body.dark.protanopia {
  --status-error-fill: hsl(22, 60%, 18%);
  --status-error-text: hsl(22, 90%, 66%);
  --status-error-mark: hsl(22, 90%, 49%);
  --status-warning-fill: hsl(46, 60%, 18%);
  --status-warning-text: hsl(46, 95%, 66%);
  --status-warning-mark: hsl(46, 95%, 35%);
  --status-success-fill: hsl(173, 60%, 18%);
  --status-success-text: hsl(173, 72%, 66%);
  --status-success-mark: hsl(173, 72%, 36%);
  --status-info-fill: hsl(205, 60%, 18%);
  --status-info-text: hsl(205, 82%, 66%);
  --status-info-mark: hsl(205, 82%, 50%);
  --purple-cvd-fill: hsl(285, 60%, 18%);
  --purple-cvd-text: hsl(285, 70%, 66%);
  --purple-cvd-mark: hsl(285, 70%, 50%);
  --dark-background: hsl(215, 40%, 7%);
  --dark-surface: hsl(215, 40%, 11%);
}

body.light.deuteranopia {
  --status-error-fill: hsl(16, 70%, 94%);
  --status-error-text: hsl(16, 85%, 38%);
  --status-error-mark: hsl(16, 85%, 55%);
  --status-warning-fill: hsl(45, 70%, 94%);
  --status-warning-text: hsl(45, 95%, 28%);
  --status-warning-mark: hsl(45, 95%, 35%);
  --status-success-fill: hsl(172, 70%, 94%);
  --status-success-text: hsl(172, 78%, 27%);
  --status-success-mark: hsl(172, 78%, 34%);
  --status-info-fill: hsl(213, 70%, 94%);
  --status-info-text: hsl(213, 74%, 38%);
  --status-info-mark: hsl(213, 74%, 55%);
  --purple-cvd-fill: hsl(285, 68%, 94%);
  --purple-cvd-text: hsl(285, 68%, 38%);
  --purple-cvd-mark: hsl(285, 68%, 50%);
  --light-surface: hsl(300, 24%, 96%);
}

body.dark.deuteranopia {
  --status-error-fill: hsl(16, 60%, 18%);
  --status-error-text: hsl(16, 85%, 66%);
  --status-error-mark: hsl(16, 85%, 55%);
  --status-warning-fill: hsl(45, 60%, 18%);
  --status-warning-text: hsl(45, 95%, 66%);
  --status-warning-mark: hsl(45, 95%, 35%);
  --status-success-fill: hsl(172, 60%, 18%);
  --status-success-text: hsl(172, 78%, 66%);
  --status-success-mark: hsl(172, 78%, 34%);
  --status-info-fill: hsl(213, 60%, 18%);
  --status-info-text: hsl(213, 74%, 66%);
  --status-info-mark: hsl(213, 74%, 55%);
  --purple-cvd-fill: hsl(285, 60%, 18%);
  --purple-cvd-text: hsl(285, 68%, 66%);
  --purple-cvd-mark: hsl(285, 68%, 50%);
  --dark-background: hsl(295, 30%, 7%);
  --dark-surface: hsl(295, 30%, 11%);
}

body.light.tritanopia {
  --status-error-fill: hsl(353, 70%, 94%);
  --status-error-text: hsl(353, 78%, 38%);
  --status-error-mark: hsl(353, 78%, 55%);
  --status-warning-fill: hsl(31, 70%, 94%);
  --status-warning-text: hsl(31, 95%, 34%);
  --status-warning-mark: hsl(31, 95%, 43%);
  --status-success-fill: hsl(133, 60%, 94%);
  --status-success-text: hsl(133, 60%, 31%);
  --status-success-mark: hsl(133, 60%, 39%);
  --status-info-fill: hsl(184, 45%, 94%);
  --status-info-text: hsl(184, 45%, 34%);
  --status-info-mark: hsl(184, 45%, 43%);
  --purple-cvd-fill: hsl(285, 66%, 94%);
  --purple-cvd-text: hsl(285, 66%, 38%);
  --purple-cvd-mark: hsl(285, 66%, 50%);
  --light-surface: hsl(345, 40%, 96%);
}

body.dark.tritanopia {
  --status-error-fill: hsl(353, 60%, 18%);
  --status-error-text: hsl(353, 78%, 66%);
  --status-error-mark: hsl(353, 78%, 55%);
  --status-warning-fill: hsl(31, 60%, 18%);
  --status-warning-text: hsl(31, 95%, 66%);
  --status-warning-mark: hsl(31, 95%, 43%);
  --status-success-fill: hsl(133, 60%, 18%);
  --status-success-text: hsl(133, 60%, 66%);
  --status-success-mark: hsl(133, 60%, 39%);
  --status-info-fill: hsl(184, 45%, 18%);
  --status-info-text: hsl(184, 45%, 66%);
  --status-info-mark: hsl(184, 45%, 43%);
  --purple-cvd-fill: hsl(285, 60%, 18%);
  --purple-cvd-text: hsl(285, 66%, 66%);
  --purple-cvd-mark: hsl(285, 66%, 50%);
  --dark-background: hsl(340, 30%, 7%);
  --dark-surface: hsl(340, 30%, 11%);
}

body.light.achromatopsia {
  --status-error-fill: hsl(8, 12%, 94%);
  --status-error-text: hsl(8, 12%, 30%);
  --status-error-mark: hsl(8, 12%, 40%);
  --status-warning-fill: hsl(40, 14%, 94%);
  --status-warning-text: hsl(40, 14%, 30%);
  --status-warning-mark: hsl(40, 14%, 40%);
  --status-success-fill: hsl(210, 8%, 94%);
  --status-success-text: hsl(210, 8%, 30%);
  --status-success-mark: hsl(210, 8%, 42%);
  --status-info-fill: hsl(210, 8%, 94%);
  --status-info-text: hsl(210, 8%, 34%);
  --status-info-mark: hsl(210, 8%, 50%);
  --purple-cvd-fill: hsl(285, 10%, 94%);
  --purple-cvd-text: hsl(285, 10%, 30%);
  --purple-cvd-mark: hsl(285, 10%, 44%);
  --light-surface: hsl(220, 8%, 97%);
}

body.dark.achromatopsia {
  --status-error-fill: hsl(8, 12%, 18%);
  --status-error-text: hsl(8, 12%, 80%);
  --status-error-mark: hsl(8, 12%, 40%);
  --status-warning-fill: hsl(40, 14%, 18%);
  --status-warning-text: hsl(40, 14%, 78%);
  --status-warning-mark: hsl(40, 14%, 40%);
  --status-success-fill: hsl(210, 8%, 18%);
  --status-success-text: hsl(210, 8%, 78%);
  --status-success-mark: hsl(210, 8%, 42%);
  --status-info-fill: hsl(210, 8%, 18%);
  --status-info-text: hsl(210, 8%, 74%);
  --status-info-mark: hsl(210, 8%, 50%);
  --purple-cvd-fill: hsl(285, 10%, 18%);
  --purple-cvd-text: hsl(285, 10%, 78%);
  --purple-cvd-mark: hsl(285, 10%, 44%);
  --dark-background: hsl(220, 8%, 7%);
  --dark-surface: hsl(220, 8%, 11%);
}

body.light.protanopia,
body.dark.protanopia {
  --color-scheme: hsl(215, 65%, 55%);
  --color-scheme-05: hsla(215, 65%, 55%, 0.05);
  --color-scheme-10: hsla(215, 65%, 55%, 0.10);
  --color-scheme-20: hsla(215, 65%, 55%, 0.20);
  --color-scheme-30: hsla(215, 65%, 55%, 0.30);
  --color-scheme-40: hsla(215, 65%, 55%, 0.40);
  --color-scheme-50: hsla(215, 65%, 55%, 0.50);
  --color-scheme-60: hsla(215, 65%, 55%, 0.60);
  --color-scheme-70: hsla(215, 65%, 55%, 0.70);
  --color-scheme-80: hsla(215, 65%, 55%, 0.80);
  --color-scheme-90: hsla(215, 65%, 55%, 0.90);
  --color-scheme-light: hsl(215, 65%, 65%);
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --color-scheme: hsl(310, 58%, 55%);
  --color-scheme-05: hsla(310, 58%, 55%, 0.05);
  --color-scheme-10: hsla(310, 58%, 55%, 0.10);
  --color-scheme-20: hsla(310, 58%, 55%, 0.20);
  --color-scheme-30: hsla(310, 58%, 55%, 0.30);
  --color-scheme-40: hsla(310, 58%, 55%, 0.40);
  --color-scheme-50: hsla(310, 58%, 55%, 0.50);
  --color-scheme-60: hsla(310, 58%, 55%, 0.60);
  --color-scheme-70: hsla(310, 58%, 55%, 0.70);
  --color-scheme-80: hsla(310, 58%, 55%, 0.80);
  --color-scheme-90: hsla(310, 58%, 55%, 0.90);
  --color-scheme-light: hsl(310, 58%, 65%);
}

body.light.tritanopia,
body.dark.tritanopia {
  --color-scheme: hsl(333, 70%, 55%);
  --color-scheme-05: hsla(333, 70%, 55%, 0.05);
  --color-scheme-10: hsla(333, 70%, 55%, 0.10);
  --color-scheme-20: hsla(333, 70%, 55%, 0.20);
  --color-scheme-30: hsla(333, 70%, 55%, 0.30);
  --color-scheme-40: hsla(333, 70%, 55%, 0.40);
  --color-scheme-50: hsla(333, 70%, 55%, 0.50);
  --color-scheme-60: hsla(333, 70%, 55%, 0.60);
  --color-scheme-70: hsla(333, 70%, 55%, 0.70);
  --color-scheme-80: hsla(333, 70%, 55%, 0.80);
  --color-scheme-90: hsla(333, 70%, 55%, 0.90);
  --color-scheme-light: hsl(333, 70%, 65%);
}

body.light.protanopia,
body.dark.protanopia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.tritanopia,
body.dark.tritanopia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.achromatopsia,
body.dark.achromatopsia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.protanopia,
body.dark.protanopia {
  --chart-cat-1: #e69f00;
  --chart-cat-2: #56b4e9;
  --chart-cat-3: #009e73;
  --chart-cat-4: #f0e442;
  --chart-cat-5: #0072b2;
  --chart-cat-6: #d55e00;
  --chart-cat-7: #cc79a7;
  --chart-cat-8: #999999;
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --chart-cat-1: #e69f00;
  --chart-cat-2: #56b4e9;
  --chart-cat-3: #009e73;
  --chart-cat-4: #f0e442;
  --chart-cat-5: #0072b2;
  --chart-cat-6: #d55e00;
  --chart-cat-7: #cc79a7;
  --chart-cat-8: #999999;
}

body.light.tritanopia,
body.dark.tritanopia {
  --chart-cat-1: #e69f00;
  --chart-cat-2: #56b4e9;
  --chart-cat-3: #009e73;
  --chart-cat-4: #f0e442;
  --chart-cat-5: #0072b2;
  --chart-cat-6: #d55e00;
  --chart-cat-7: #cc79a7;
  --chart-cat-8: #999999;
}

body.light.achromatopsia,
body.dark.achromatopsia {
  --chart-cat-1: #ebebeb;
  --chart-cat-2: #cccccc;
  --chart-cat-3: #adadad;
  --chart-cat-4: #8f8f8f;
  --chart-cat-5: #737373;
  --chart-cat-6: #575757;
  --chart-cat-7: #3d3d3d;
  --chart-cat-8: #262626;
}

body.light .theme-preview--v8 {
  --preview-bg: hsl(223, 55%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(223, 44%, 98%);
  --preview-line: hsl(223, 30%, 88%);
  --preview-text: hsl(223, 45%, 16%);
  --preview-muted: hsl(223, 16%, 50%);
  --preview-accent: hsl(16, 95%, 52%);
  --preview-ok: hsl(152, 60%, 42%);
  --preview-warn: hsl(43, 88%, 47%);
  --preview-err: hsl(2, 78%, 55%);
}
body.light .theme-preview--standard {
  --preview-bg: hsl(227, 60%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(227, 45%, 98%);
  --preview-line: hsl(227, 32%, 88%);
  --preview-text: hsl(224, 45%, 16%);
  --preview-muted: hsl(224, 18%, 48%);
  --preview-accent: hsl(183, 70%, 38%);
  --preview-ok: hsl(152, 60%, 42%);
  --preview-warn: hsl(43, 88%, 47%);
  --preview-err: hsl(2, 78%, 55%);
}
body.light .theme-preview--neutral {
  --preview-bg: hsl(222, 14%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(222, 12%, 98%);
  --preview-line: hsl(222, 10%, 87%);
  --preview-text: hsl(222, 14%, 16%);
  --preview-muted: hsl(222, 8%, 48%);
  --preview-accent: hsl(200, 55%, 45%);
  --preview-ok: hsl(152, 42%, 42%);
  --preview-warn: hsl(43, 55%, 45%);
  --preview-err: hsl(2, 55%, 52%);
}
body.light .theme-preview--achromatopsia {
  --preview-bg: hsl(0, 0%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(0, 0%, 98%);
  --preview-line: hsl(0, 0%, 85%);
  --preview-text: hsl(0, 0%, 12%);
  --preview-muted: hsl(0, 0%, 46%);
  --preview-accent: hsl(0, 0%, 28%);
  --preview-ok: hsl(0, 0%, 58%);
  --preview-warn: hsl(0, 0%, 40%);
  --preview-err: hsl(0, 0%, 20%);
}
body.light .theme-preview--protanopia {
  --preview-bg: hsl(215, 45%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(215, 35%, 98%);
  --preview-line: hsl(215, 30%, 88%);
  --preview-text: hsl(215, 35%, 16%);
  --preview-muted: hsl(215, 20%, 48%);
  --preview-accent: hsl(215, 72%, 50%);
  --preview-ok: hsl(173, 66%, 36%);
  --preview-warn: hsl(46, 88%, 44%);
  --preview-err: hsl(22, 85%, 48%);
}
body.light .theme-preview--deuteranopia {
  --preview-bg: hsl(295, 35%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(295, 26%, 98%);
  --preview-line: hsl(295, 22%, 88%);
  --preview-text: hsl(295, 25%, 16%);
  --preview-muted: hsl(295, 16%, 48%);
  --preview-accent: hsl(310, 60%, 48%);
  --preview-ok: hsl(172, 68%, 34%);
  --preview-warn: hsl(45, 88%, 44%);
  --preview-err: hsl(16, 80%, 48%);
}
body.light .theme-preview--tritanopia {
  --preview-bg: hsl(340, 35%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(340, 26%, 98%);
  --preview-line: hsl(340, 22%, 88%);
  --preview-text: hsl(340, 25%, 16%);
  --preview-muted: hsl(340, 16%, 48%);
  --preview-accent: hsl(333, 70%, 48%);
  --preview-ok: hsl(133, 55%, 38%);
  --preview-warn: hsl(31, 88%, 44%);
  --preview-err: hsl(353, 74%, 50%);
}
body.light .theme-preview--high-contrast {
  --preview-bg: hsl(0, 0%, 100%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(0, 0%, 100%);
  --preview-line: hsl(0, 0%, 0%);
  --preview-text: hsl(0, 0%, 0%);
  --preview-muted: hsl(0, 0%, 28%);
  --preview-accent: hsl(224, 90%, 42%);
  --preview-ok: hsl(150, 90%, 28%);
  --preview-warn: hsl(38, 100%, 40%);
  --preview-err: hsl(2, 85%, 44%);
}
body.light .theme-preview--v8 {
  --preview-bg: radial-gradient(circle at 22% 0%, hsla(16, 90%, 55%, 0.12), transparent 52%),
    radial-gradient(circle at 92% 8%, hsla(210, 90%, 55%, 0.12), transparent 44%), hsl(223, 55%, 97%);
}
body.light .theme-preview--standard {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(210, 80%, 55%, 0.14), transparent 60%), hsl(227, 60%, 97%);
}
body.light .theme-preview--neutral {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(222, 20%, 60%, 0.18), transparent 62%), hsl(222, 14%, 97%);
}

body.dark .theme-preview--v8 {
  --preview-bg: hsl(247, 100%, 7%);
  --preview-surface: hsl(223, 78%, 11%);
  --preview-surface-2: hsl(223, 55%, 15%);
  --preview-line: hsl(223, 45%, 25%);
  --preview-text: hsl(240, 40%, 96%);
  --preview-muted: hsl(230, 26%, 44%);
  --preview-accent: hsl(16, 100%, 58%);
  --preview-ok: hsl(152, 66%, 52%);
  --preview-warn: hsl(43, 92%, 58%);
  --preview-err: hsl(2, 82%, 64%);
}
body.dark .theme-preview--standard {
  --preview-bg: hsl(227, 85%, 9%);
  --preview-surface: hsl(227, 60%, 14%);
  --preview-surface-2: hsl(227, 50%, 18%);
  --preview-line: hsl(227, 40%, 27%);
  --preview-text: hsl(220, 45%, 95%);
  --preview-muted: hsl(222, 32%, 44%);
  --preview-accent: hsl(183, 72%, 50%);
  --preview-ok: hsl(152, 66%, 52%);
  --preview-warn: hsl(43, 92%, 58%);
  --preview-err: hsl(2, 82%, 64%);
}
body.dark .theme-preview--neutral {
  --preview-bg: hsl(222, 16%, 10%);
  --preview-surface: hsl(222, 13%, 14%);
  --preview-surface-2: hsl(222, 11%, 18%);
  --preview-line: hsl(222, 10%, 27%);
  --preview-text: hsl(220, 14%, 95%);
  --preview-muted: hsl(222, 9%, 44%);
  --preview-accent: hsl(200, 55%, 58%);
  --preview-ok: hsl(152, 44%, 55%);
  --preview-warn: hsl(43, 58%, 58%);
  --preview-err: hsl(2, 58%, 62%);
}
body.dark .theme-preview--achromatopsia {
  --preview-bg: hsl(220, 8%, 9%);
  --preview-surface: hsl(220, 7%, 14%);
  --preview-surface-2: hsl(220, 6%, 18%);
  --preview-line: hsl(220, 6%, 29%);
  --preview-text: hsl(0, 0%, 100%);
  --preview-muted: hsl(0, 0%, 42%);
  --preview-accent: hsl(0, 0%, 86%);
  --preview-ok: hsl(0, 0%, 92%);
  --preview-warn: hsl(0, 0%, 64%);
  --preview-err: hsl(0, 0%, 44%);
}
body.dark .theme-preview--protanopia {
  --preview-bg: hsl(215, 40%, 9%);
  --preview-surface: hsl(215, 35%, 13%);
  --preview-surface-2: hsl(215, 30%, 17%);
  --preview-line: hsl(215, 28%, 26%);
  --preview-text: hsl(210, 30%, 95%);
  --preview-muted: hsl(215, 22%, 44%);
  --preview-accent: hsl(215, 78%, 64%);
  --preview-ok: hsl(173, 66%, 46%);
  --preview-warn: hsl(46, 92%, 55%);
  --preview-err: hsl(22, 88%, 57%);
}
body.dark .theme-preview--deuteranopia {
  --preview-bg: hsl(295, 30%, 9%);
  --preview-surface: hsl(295, 26%, 13%);
  --preview-surface-2: hsl(295, 22%, 17%);
  --preview-line: hsl(295, 20%, 26%);
  --preview-text: hsl(300, 20%, 95%);
  --preview-muted: hsl(295, 16%, 45%);
  --preview-accent: hsl(310, 62%, 60%);
  --preview-ok: hsl(172, 68%, 44%);
  --preview-warn: hsl(45, 92%, 55%);
  --preview-err: hsl(16, 84%, 56%);
}
body.dark .theme-preview--tritanopia {
  --preview-bg: hsl(340, 30%, 9%);
  --preview-surface: hsl(340, 26%, 13%);
  --preview-surface-2: hsl(340, 22%, 17%);
  --preview-line: hsl(340, 20%, 26%);
  --preview-text: hsl(345, 20%, 95%);
  --preview-muted: hsl(340, 16%, 45%);
  --preview-accent: hsl(333, 72%, 58%);
  --preview-ok: hsl(133, 58%, 47%);
  --preview-warn: hsl(31, 92%, 55%);
  --preview-err: hsl(353, 78%, 60%);
}
body.dark .theme-preview--high-contrast {
  --preview-bg: hsl(0, 0%, 3%);
  --preview-surface: hsl(0, 0%, 8%);
  --preview-surface-2: hsl(0, 0%, 12%);
  --preview-line: hsl(0, 0%, 34%);
  --preview-text: hsl(0, 0%, 100%);
  --preview-muted: hsl(0, 0%, 46%);
  --preview-accent: hsl(224, 90%, 68%);
  --preview-ok: hsl(150, 80%, 55%);
  --preview-warn: hsl(38, 100%, 55%);
  --preview-err: hsl(2, 90%, 64%);
}
body.dark .theme-preview--v8 {
  --preview-bg: radial-gradient(circle at 22% 0%, hsla(16, 90%, 52%, 0.28), transparent 52%),
    radial-gradient(circle at 92% 8%, hsla(205, 95%, 46%, 0.26), transparent 44%), hsl(247, 100%, 7%);
}
body.dark .theme-preview--standard {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(210, 80%, 42%, 0.3), transparent 60%), hsl(227, 85%, 9%);
}
body.dark .theme-preview--neutral {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(222, 20%, 32%, 0.5), transparent 62%), hsl(222, 16%, 10%);
}

.theme-preview-shot {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--preview-line);
  background: var(--preview-bg);
}
.theme-preview-shot svg {
  display: block;
  width: 100%;
  height: auto;
}
.theme-preview-shot .pv-nav {
  fill: var(--preview-surface);
}
.theme-preview-shot .pv-line {
  fill: var(--preview-line);
}
.theme-preview-shot .pv-logo {
  fill: var(--preview-accent);
}
.theme-preview-shot .pv-muted {
  fill: var(--preview-muted);
}
.theme-preview-shot .pv-text {
  fill: var(--preview-text);
}
.theme-preview-shot .pv-card {
  fill: var(--preview-surface-2);
  stroke: var(--preview-line);
}
.theme-preview-shot .pv-ok {
  fill: var(--preview-ok);
}
.theme-preview-shot .pv-warn {
  fill: var(--preview-warn);
}
.theme-preview-shot .pv-err {
  fill: var(--preview-err);
}
.theme-preview-shot .pv-btn {
  fill: var(--preview-accent);
}
.theme-preview-shot .pv-btn-outline {
  fill: none;
  stroke: var(--preview-line);
}

.theme-preview-shot.is-hc .pv-card {
  stroke: var(--preview-text);
  stroke-width: 2;
}
.theme-preview-shot.is-hc .pv-ok,
.theme-preview-shot.is-hc .pv-warn,
.theme-preview-shot.is-hc .pv-err {
  stroke: var(--preview-text);
  stroke-width: 1;
}
.theme-preview-shot.is-hc .pv-btn-outline {
  stroke: var(--preview-text);
  stroke-width: 2;
}

.theme-preview-swatch {
  display: flex;
  gap: 4px;
}
.theme-preview-swatch .sw-bar {
  width: 11px;
  height: 24px;
  border-radius: 3px;
}
.theme-preview-swatch .sw-accent {
  background: var(--preview-accent);
}
.theme-preview-swatch .sw-ok {
  background: var(--preview-ok);
}
.theme-preview-swatch .sw-warn {
  background: var(--preview-warn);
}
.theme-preview-swatch .sw-err {
  background: var(--preview-err);
}
.theme-preview-swatch .sw-muted {
  background: var(--preview-muted);
}

.layout-preview-shot {
  display: block;
  width: 100%;
}
.layout-preview-shot svg {
  display: block;
  width: 100%;
  height: auto;
}
.layout-preview-shot .lp-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.5;
}
.layout-preview-shot .lp-box {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.7;
}
.layout-preview-shot .lp-title {
  fill: currentColor;
  opacity: 0.85;
}
.layout-preview-shot .lp-bar {
  fill: currentColor;
  opacity: 0.4;
}

body.light .layout-preview-shot {
  color: var(--black-alpha-80);
}

body.dark .layout-preview-shot {
  color: var(--white-alpha-90);
}

body.light.standard .pulses-whats-new,
body.light.standard .pulses-card-shell,
body.dark.standard .pulses-whats-new,
body.dark.standard .pulses-card-shell {
  background: var(--background-gradient);
}

body.light.v8 {
  background-color: hsla(223, 50%, 91%, 0.4);
}
@media (max-width: 768px) {
  body.light.v8 .mpcp-app #mpcpMainNav .nav-header,
  body.light.v8 .mpcp-app #mpcpMainNav .primary-navigation-wrapper {
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsl(0, 0%, 100%);
    background-image: radial-gradient(ellipse at 70% 0%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 30%), radial-gradient(circle at 90% 0%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 40%), radial-gradient(ellipse at 10% 100%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
  }
}
body.light.v8::after,
body.light.v8 .modal .modal-content,
body.light.v8 .modal .modal-body,
body.light.v8 .pulses-whats-new,
body.light.v8 .pulses-card-shell,
body.light.v8 .offcanvas {
  background-repeat: no-repeat;
  background-position: center;
  background-color: hsl(0, 0%, 100%);
  background-image: radial-gradient(ellipse at 70% 0%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 30%), radial-gradient(circle at 90% 0%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 40%), radial-gradient(ellipse at 10% 100%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
}

body.dark.v8 {
  color-scheme: dark;
  background-color: hsl(247, 100%, 7%);
  --box-shadow: 0, 0, 0, 0.6;
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-accent-50) 0%,
    var(--lt-dk-primary-50) 15%,
    var(--lt-dk-primary-90) 45%,
    var(--lt-dk-primary-90) 65%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-primary-90) 0%,
    var(--lt-white-dk-primary-90) 45%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --gradient-primary-50-accent-50: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --gradient-diag-primary-50-accent-50: linear-gradient(
    350deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --theme-primary-background: var(--lt-primary-50-dk-accent-50);
  --theme-primary-button: var(--lt-dk-primary-50);
  --theme-primary-button-hover: var(--lt-dk-primary-70);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--lt-primary-50-dk-white);
  --theme-primary-border: var(--lt-dk-primary-50);
  --theme-primary-border-hover: var(--lt-dk-primary-70);
  --theme-primary-text: var(--lt-primary-50-dk-accent-50);
  --theme-primary-text-hover: var(--lt-primary-50-dk-accent-50);
  --theme-accent-background: var(--lt-dk-accent-50);
  --theme-accent-button: var(--lt-dk-accent-50);
  --theme-accent-button-hover: var(--lt-dk-accent-70);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-accent-50-dk-white);
  --theme-accent-border: var(--lt-dk-accent-50);
  --theme-accent-border-hover: var(--lt-dk-accent-70);
  --theme-accent-text: var(--lt-dk-accent-50);
  --theme-accent-text-hover: var(--lt-dk-accent-70);
}
@media (max-width: 768px) {
  body.dark.v8 .mpcp-app #mpcpMainNav .nav-header,
  body.dark.v8 .mpcp-app #mpcpMainNav .primary-navigation-wrapper {
    background-color: hsl(247, 100%, 7%);
    background-image: radial-gradient(ellipse at 70% 0%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 30%), radial-gradient(circle at 90% 0%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 40%), radial-gradient(ellipse at 10% 100%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
  }
}
body.dark.v8::after,
body.dark.v8 .modal .modal-content,
body.dark.v8 .modal .modal-body,
body.dark.v8 .pulses-whats-new,
body.dark.v8 .pulses-card-shell,
body.dark.v8 .offcanvas {
  background-color: hsl(247, 100%, 7%);
  background-image: radial-gradient(ellipse at 70% 0%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 30%), radial-gradient(circle at 90% 0%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 40%), radial-gradient(ellipse at 10% 100%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
}

body.light.neutral {
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-background) 100%
  );
}
@media (pointer: coarse) {
  body.light.neutral {
    --background-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      var(--lt-dk-neutral-10) 0%,
      var(--lt-dk-neutral-10) 65%,
      var(--lt-dk-neutral-20) 100%
    );
  }
}
body.light.neutral {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-neutral-10) 0%,
    var(--lt-dk-neutral-10) 45%,
    var(--lt-dk-neutral-20) 85%,
    var(--lt-dk-neutral-20) 100%
  );
  --gradient-primary-50-accent-50: var(--theme-neutral-primary);
  --gradient-diag-primary-50-accent-50: var(--theme-neutral-primary);
  --theme-primary-background: var(--theme-neutral-primary);
  --theme-primary-button: var(--theme-neutral-primary);
  --theme-primary-button-hover: var(--theme-neutral-primary-shade);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--theme-neutral-primary-shade);
  --theme-primary-border: var(--theme-neutral-primary);
  --theme-primary-border-hover: var(--theme-neutral-primary-shade);
  --theme-primary-text: var(--theme-neutral-primary);
  --theme-primary-text-hover: var(--theme-neutral-primary-shade);
  --theme-accent-background: var(--theme-neutral-primary);
  --theme-accent-button: var(--theme-neutral-primary);
  --theme-accent-button-hover: var(--theme-neutral-primary-shade);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-dk-white);
  --theme-accent-border: var(--theme-neutral-primary);
  --theme-accent-border-hover: var(--theme-neutral-primary-shade);
  --theme-accent-text: var(--theme-neutral-primary);
  --theme-accent-text-hover: var(--theme-neutral-primary-shade);
  --color-scheme: var(--info);
  --color-scheme-05: var(--info-alpha-05);
  --color-scheme-10: var(--info-alpha-10);
  --color-scheme-20: var(--info-alpha-20);
  --color-scheme-30: var(--info-alpha-30);
  --color-scheme-40: var(--info-alpha-40);
  --color-scheme-50: var(--info-alpha-50);
  --color-scheme-60: var(--info-alpha-60);
  --color-scheme-70: var(--info-alpha-70);
  --color-scheme-80: var(--info-alpha-80);
  --color-scheme-90: var(--info-alpha-90);
  --color-scheme-light: var(--info-light);
}

body.dark.neutral {
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-background) 100%
  );
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-surface) 45%,
    var(--dark-surface) 85%,
    var(--dark-surface) 100%
  );
  --gradient-primary-50-accent-50: var(--theme-neutral-dark-primary);
  --gradient-diag-primary-50-accent-50: var(--theme-neutral-dark-primary);
  --theme-primary-background: var(--theme-neutral-dark-primary);
  --theme-primary-button: var(--theme-neutral-dark-primary);
  --theme-primary-button-hover: var(--theme-neutral-dark-primary-shade);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--theme-neutral-dark-primary-shade);
  --theme-primary-border: var(--theme-neutral-dark-primary);
  --theme-primary-border-hover: var(--theme-neutral-dark-primary-shade);
  --theme-primary-text: var(--theme-neutral-dark-primary-tint);
  --theme-primary-text-hover: var(--theme-neutral-dark-primary-shade);
  --theme-accent-background: var(--theme-neutral-dark-primary);
  --theme-accent-button: var(--theme-neutral-dark-primary);
  --theme-accent-button-hover: var(--theme-neutral-dark-primary-shade);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-dk-white);
  --theme-accent-border: var(--theme-neutral-dark-primary);
  --theme-accent-border-hover: var(--theme-neutral-dark-primary-shade);
  --theme-accent-text: var(--theme-neutral-dark-primary-tint);
  --theme-accent-text-hover: var(--theme-neutral-dark-primary-shade);
  --color-scheme: var(--info);
  --color-scheme-05: var(--info-alpha-05);
  --color-scheme-10: var(--info-alpha-10);
  --color-scheme-20: var(--info-alpha-20);
  --color-scheme-30: var(--info-alpha-30);
  --color-scheme-40: var(--info-alpha-40);
  --color-scheme-50: var(--info-alpha-50);
  --color-scheme-60: var(--info-alpha-60);
  --color-scheme-70: var(--info-alpha-70);
  --color-scheme-80: var(--info-alpha-80);
  --color-scheme-90: var(--info-alpha-90);
  --color-scheme-light: var(--info-light);
}

body.light.neutral .pulses-whats-new,
body.light.neutral .pulses-card-shell,
body.dark.neutral .pulses-whats-new,
body.dark.neutral .pulses-card-shell {
  background: var(--background-gradient);
}

@media (pointer: coarse) {
  body.light.protanopia,
  body.light.deuteranopia,
  body.light.tritanopia,
  body.light.achromatopsia {
    --background-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      var(--light-surface) 0%,
      var(--light-surface) 65%,
      var(--light-surface) 100%
    );
  }
}
body.light.protanopia,
body.light.deuteranopia,
body.light.tritanopia,
body.light.achromatopsia {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--light-surface) 0%,
    var(--light-surface) 45%,
    var(--light-surface) 85%,
    var(--light-surface) 100%
  );
}
body.light.protanopia .modal .modal-content,
body.light.protanopia .modal .modal-body,
body.light.protanopia .pulses-whats-new,
body.light.protanopia .pulses-card-shell,
body.light.protanopia .offcanvas,
body.light.deuteranopia .modal .modal-content,
body.light.deuteranopia .modal .modal-body,
body.light.deuteranopia .pulses-whats-new,
body.light.deuteranopia .pulses-card-shell,
body.light.deuteranopia .offcanvas,
body.light.tritanopia .modal .modal-content,
body.light.tritanopia .modal .modal-body,
body.light.tritanopia .pulses-whats-new,
body.light.tritanopia .pulses-card-shell,
body.light.tritanopia .offcanvas,
body.light.achromatopsia .modal .modal-content,
body.light.achromatopsia .modal .modal-body,
body.light.achromatopsia .pulses-whats-new,
body.light.achromatopsia .pulses-card-shell,
body.light.achromatopsia .offcanvas {
  background: var(--background-gradient);
}

body.dark.protanopia,
body.dark.deuteranopia,
body.dark.tritanopia,
body.dark.achromatopsia {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-surface) 45%,
    var(--dark-surface) 85%,
    var(--dark-surface) 100%
  );
}
body.dark.protanopia .modal .modal-content,
body.dark.protanopia .modal .modal-body,
body.dark.protanopia .pulses-whats-new,
body.dark.protanopia .pulses-card-shell,
body.dark.protanopia .offcanvas,
body.dark.deuteranopia .modal .modal-content,
body.dark.deuteranopia .modal .modal-body,
body.dark.deuteranopia .pulses-whats-new,
body.dark.deuteranopia .pulses-card-shell,
body.dark.deuteranopia .offcanvas,
body.dark.tritanopia .modal .modal-content,
body.dark.tritanopia .modal .modal-body,
body.dark.tritanopia .pulses-whats-new,
body.dark.tritanopia .pulses-card-shell,
body.dark.tritanopia .offcanvas,
body.dark.achromatopsia .modal .modal-content,
body.dark.achromatopsia .modal .modal-body,
body.dark.achromatopsia .pulses-whats-new,
body.dark.achromatopsia .pulses-card-shell,
body.dark.achromatopsia .offcanvas {
  background: var(--background-gradient);
}

body.light.achromatopsia {
  --color-scheme: var(--black);
  --color-scheme-05: var(--black-alpha-05);
  --color-scheme-10: var(--black-alpha-10);
  --color-scheme-20: var(--black-alpha-20);
  --color-scheme-30: var(--black-alpha-30);
  --color-scheme-40: var(--black-alpha-40);
  --color-scheme-50: var(--black-alpha-50);
  --color-scheme-60: var(--black-alpha-60);
  --color-scheme-70: var(--black-alpha-70);
  --color-scheme-80: var(--black-alpha-80);
  --color-scheme-90: var(--black-alpha-90);
}

body.dark.achromatopsia {
  --color-scheme: var(--white);
  --color-scheme-05: var(--white-alpha-05);
  --color-scheme-10: var(--white-alpha-10);
  --color-scheme-20: var(--white-alpha-20);
  --color-scheme-30: var(--white-alpha-30);
  --color-scheme-40: var(--white-alpha-40);
  --color-scheme-50: var(--white-alpha-50);
  --color-scheme-60: var(--white-alpha-60);
  --color-scheme-70: var(--white-alpha-70);
  --color-scheme-80: var(--white-alpha-80);
  --color-scheme-90: var(--white-alpha-90);
  --color-scheme-light: var(--white);
}

body.light.high-contrast {
  --background-gradient: var(--white);
  --security-gradient: var(--white);
  --black-alpha-80: var(--black);
  --black-alpha-70: var(--black);
  --black-alpha-60: var(--black);
  --white-alpha-90: var(--white);
  --color-scheme: hsl(224, 90%, 42%);
  --color-scheme-05: hsla(224, 90%, 42%, 0.05);
  --color-scheme-10: hsla(224, 90%, 42%, 0.10);
  --color-scheme-20: hsla(224, 90%, 42%, 0.20);
  --color-scheme-30: hsla(224, 90%, 42%, 0.30);
  --color-scheme-40: hsla(224, 90%, 42%, 0.40);
  --color-scheme-50: hsla(224, 90%, 42%, 0.50);
  --color-scheme-60: hsla(224, 90%, 42%, 0.60);
  --color-scheme-70: hsla(224, 90%, 42%, 0.70);
  --color-scheme-80: hsla(224, 90%, 42%, 0.80);
  --color-scheme-90: hsla(224, 90%, 42%, 0.90);
  --color-scheme-light: hsl(224, 90%, 52%);
}

body.dark.high-contrast {
  --background-gradient: var(--black);
  --security-gradient: var(--black);
  --white-alpha-90: var(--white);
  --white-alpha-80: var(--white);
  --white-alpha-70: var(--white);
  --color-scheme: hsl(210, 100%, 72%);
  --color-scheme-05: hsla(210, 100%, 72%, 0.05);
  --color-scheme-10: hsla(210, 100%, 72%, 0.10);
  --color-scheme-20: hsla(210, 100%, 72%, 0.20);
  --color-scheme-30: hsla(210, 100%, 72%, 0.30);
  --color-scheme-40: hsla(210, 100%, 72%, 0.40);
  --color-scheme-50: hsla(210, 100%, 72%, 0.50);
  --color-scheme-60: hsla(210, 100%, 72%, 0.60);
  --color-scheme-70: hsla(210, 100%, 72%, 0.70);
  --color-scheme-80: hsla(210, 100%, 72%, 0.80);
  --color-scheme-90: hsla(210, 100%, 72%, 0.90);
  --color-scheme-light: hsl(210, 100%, 72%);
}

body.light.high-contrast .mpcp-app .badge,
body.light.high-contrast .mpcp-app .alert,
body.dark.high-contrast .mpcp-app .badge,
body.dark.high-contrast .mpcp-app .alert {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: currentColor !important;
}
body.light.high-contrast .mpcp-app .badge,
body.dark.high-contrast .mpcp-app .badge {
  font-weight: 700;
}
body.light.high-contrast .mpcp-app .badge-success,
body.light.high-contrast .mpcp-app .alert-success,
body.dark.high-contrast .mpcp-app .badge-success,
body.dark.high-contrast .mpcp-app .alert-success {
  border-color: var(--success) !important;
}
body.light.high-contrast .mpcp-app .badge-danger,
body.light.high-contrast .mpcp-app .badge-error,
body.light.high-contrast .mpcp-app .alert-danger,
body.dark.high-contrast .mpcp-app .badge-danger,
body.dark.high-contrast .mpcp-app .badge-error,
body.dark.high-contrast .mpcp-app .alert-danger {
  border-color: var(--danger) !important;
}
body.light.high-contrast .mpcp-app .badge-warning,
body.light.high-contrast .mpcp-app .alert-warning,
body.dark.high-contrast .mpcp-app .badge-warning,
body.dark.high-contrast .mpcp-app .alert-warning {
  border-color: var(--warning) !important;
}
body.light.high-contrast .mpcp-app .badge-info,
body.light.high-contrast .mpcp-app .alert-info,
body.dark.high-contrast .mpcp-app .badge-info,
body.dark.high-contrast .mpcp-app .alert-info {
  border-color: var(--info) !important;
}
body.light.high-contrast .mpcp-app .badge-purple,
body.light.high-contrast .mpcp-app .alert-purple,
body.dark.high-contrast .mpcp-app .badge-purple,
body.dark.high-contrast .mpcp-app .alert-purple {
  border-color: var(--purple) !important;
}
body.light.high-contrast .mpcp-app .badge-primary,
body.dark.high-contrast .mpcp-app .badge-primary {
  border-color: var(--color-scheme) !important;
}
body.light.high-contrast .mpcp-app .card,
body.light.high-contrast .mpcp-app .form-control,
body.light.high-contrast .mpcp-app .form-select,
body.dark.high-contrast .mpcp-app .card,
body.dark.high-contrast .mpcp-app .form-control,
body.dark.high-contrast .mpcp-app .form-select {
  border: 2px solid currentColor !important;
}
body.light.high-contrast .mpcp-app :focus-visible,
body.dark.high-contrast .mpcp-app :focus-visible {
  outline: 3px solid var(--color-scheme) !important;
  outline-offset: 2px;
}

body.light.high-contrast .mpcp-app .badge,
body.light.high-contrast .mpcp-app .alert {
  background-color: var(--white) !important;
}

body.dark.high-contrast .mpcp-app .badge,
body.dark.high-contrast .mpcp-app .alert {
  background-color: var(--black) !important;
}

body.light.high-contrast .pulses-whats-new,
body.light.high-contrast .pulses-card-shell,
body.dark.high-contrast .pulses-whats-new,
body.dark.high-contrast .pulses-card-shell {
  background: var(--background-gradient);
}

:root {
  --toast-bg-success: #15803d;
  --toast-border-success: #59c782;
  --toast-bg-error: #dc2626;
  --toast-border-error: #ff7f7f;
  --toast-bg-warning: #ba7014;
  --toast-border-warning: #ffaa40;
  --toast-bg-info: #2563eb;
  --toast-border-info: #8db0ff;
  --toast-bg-default: #282828;
  --toast-border-default: #5d5d5d;
}

#toast-container .toast {
  background-color: var(--toast-bg-default);
  border-color: var(--toast-border-default);
}
#toast-container .toast.toast-success {
  background-color: var(--toast-bg-success);
  border-color: var(--toast-border-success);
}
#toast-container .toast.toast-error {
  background-color: var(--toast-bg-error);
  border-color: var(--toast-border-error);
}
#toast-container .toast.toast-warning {
  background-color: var(--toast-bg-warning);
  border-color: var(--toast-border-warning);
}
#toast-container .toast.toast-info {
  background-color: var(--toast-bg-info);
  border-color: var(--toast-border-info);
}

#toast-container > div {
  opacity: 1 !important;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100) !important;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.4);
}
#toast-container > div:hover {
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.5);
}
#toast-container .toast .toast-message {
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
}

body#security {
  background-color: var(--lt-dk-primary-90);
  font-family: var(--font-primary);
  font-size: 17px;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  background-size: cover;
}
@media only screen and (min-width: 769px) {
  body#security {
    min-height: 100vh;
  }
}
body#security {
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  background: var(--security-gradient);
}
body#security.dark.v8, body#security.light.v8 {
  background-color: hsl(247, 100%, 7%);
  background-image: radial-gradient(ellipse at 70% 0%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 30%), radial-gradient(circle at 90% 0%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 40%), radial-gradient(ellipse at 10% 100%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
}
body#security.dark.v8 .provider-icon.github-icon {
  filter: invert(1);
}
body#security.dark.v8 .security-wrapper .not-a-customer h4 {
  color: var(--lt-dk-white);
}
body#security.dark.v8 .security-wrapper input[type=submit] {
  background-color: var(--lt-dk-accent-50);
  border: 2px solid var(--lt-dk-accent-50);
}
body#security p {
  color: var(--lt-neutral-70-dk-neutral-20);
}
body#security .security-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
@media only screen and (min-width: 769px) {
  body#security .security-wrapper {
    max-width: 810px;
    height: 100vh;
  }
}
body#security .security-wrapper > * {
  flex: 1 100%;
}
body#security .security-wrapper .security-login-logo {
  width: 100%;
  max-width: 180px;
  display: block;
  margin: 3em auto 2em auto;
  height: 35px;
}
body#security .security-wrapper .security-content {
  margin: 15px;
  background-color: var(--lt-white-dk-primary-90);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  padding: 2em;
}
@media only screen and (min-width: 769px) {
  body#security .security-wrapper .security-content {
    padding: 50px;
  }
}
body#security .security-wrapper .security-cols {
  display: block;
}
@media only screen and (min-width: 769px) {
  body#security .security-wrapper .security-cols {
    display: flex;
  }
}
body#security .security-wrapper section {
  display: block;
  transition: margin 0.15s ease;
  transition: box-shadow 0.15s ease;
  max-width: 100%;
}
@media only screen and (min-width: 769px) {
  body#security .security-wrapper section {
    width: 100%;
    max-width: 550px;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    flex: 1 auto;
  }
}
body#security .security-wrapper aside {
  max-width: 100%;
}
@media only screen and (min-width: 769px) {
  body#security .security-wrapper aside {
    width: 100%;
    max-width: 250px;
    padding-left: 30px;
    border-left: 2px solid var(--lt-neutral-10-dk-primary-90);
  }
}
body#security .security-wrapper h1 {
  margin-bottom: 1.25rem;
  font-family: var(--font-secondary);
  color: var(--lt-neutral-80-dk-white);
  font-size: 1.7em;
}
body#security .security-wrapper h3 {
  color: var(--lt-neutral-70-dk-neutral-20);
  font-family: var(--font-secondary);
}
body#security .security-wrapper #security-notice {
  height: 3rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0;
}
body#security .security-wrapper #security-notice > p {
  border: 1px solid #0a4b78;
  display: block;
  height: 3rem;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 0.75rem;
  font-weight: 700;
  color: #0a4b78;
}
body#security .security-wrapper .row {
  width: 100%;
  margin: 0.5rem 0;
}
body#security .security-wrapper .remember-me {
  font-size: 0.75em;
  opacity: 0.75;
}
body#security .security-wrapper .remember-me > label {
  display: flex;
  align-items: center;
}
body#security .security-wrapper .remember-me > label > span {
  padding-left: 6px;
}
body#security .security-wrapper .login-actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1em;
}
body#security .security-wrapper .forgot-password a {
  display: block;
  font-size: 0.9rem;
}
body#security .security-wrapper .forgot-password a:link, body#security .security-wrapper .forgot-password a:active, body#security .security-wrapper .forgot-password a:visited {
  color: var(--lt-neutral-70-dk-neutral-20);
}
body#security .security-wrapper .forgot-password a:hover, body#security .security-wrapper .forgot-password a:focus {
  color: var(--lt-dk-primary-50);
}
body#security .security-wrapper .form-label {
  display: inline-block;
  font-weight: 600;
  color: var(--lt-neutral-70-dk-neutral-20);
  font-size: 0.9em;
  padding-bottom: 0.5em;
}
body#security .security-wrapper input[type=text],
body#security .security-wrapper input[type=password],
body#security .security-wrapper input[type=email] {
  width: 100%;
  max-width: 96%;
  padding: 10px;
  border: 1px solid var(--lt-neutral-20-dk-primary-90);
  border-radius: 2px;
  color: var(--lt-neutral-80-dk-white);
  font-weight: 500;
}
body#security .security-wrapper input[type=submit] {
  color: #ffffff;
  background-color: var(--lt-dk-primary-50);
  border: 2px solid var(--lt-dk-primary-50);
  display: inline-flex;
  height: 35px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  font-weight: 700;
  font-size: 1em;
}
body#security .security-wrapper input[type=submit]:hover {
  cursor: pointer;
  background-color: var(--lt-dk-primary-70);
  border-color: var(--lt-dk-primary-70);
  color: var(--lt-dk-white);
}
body#security .security-wrapper input[type=submit].btn-gray {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  background-color: #e5e5e5;
  padding: 0 24px;
  border-radius: 40px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--lt-neutral-70-dk-neutral-20);
  font-weight: 600;
  border: none;
  cursor: pointer;
  height: 35px;
}
body#security .security-wrapper input[type=submit].btn-gray:hover {
  color: var(--lt-dk-primary-50);
}
body#security .security-wrapper input[type=submit].btn-gray i {
  font-size: 1.5em;
  margin-right: 5px;
}
body#security .security-wrapper .passkey-2fa-login {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 1em;
  border: 2px solid #e5e5e5;
  border-radius: 6px;
}
body#security .security-wrapper .passkey-2fa-login .btn-auth-provider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  background-color: #e5e5e5;
  padding: 0 24px;
  border-radius: 40px;
  margin: 0 !important;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--lt-neutral-70-dk-neutral-20);
  font-weight: 600;
  border: none;
  cursor: pointer;
  height: 35px;
}
body#security .security-wrapper .passkey-2fa-login .btn-auth-provider:hover {
  color: var(--lt-dk-primary-50);
  background-color: #e5e5e5;
}
body#security .security-wrapper .passkey-2fa-login .btn-auth-provider i {
  font-size: 1.5em;
  margin-right: 5px;
}
body#security .security-wrapper .change-password-btn input[type=submit] {
  width: auto;
  margin-top: 10px;
}
body#security .security-wrapper #auth-providers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 40px;
}
body#security .security-wrapper #auth-providers .button_to {
  width: 100%;
}
body#security .security-wrapper #auth-providers > a,
body#security .security-wrapper #auth-providers > a:visited,
body#security .security-wrapper #auth-providers > button,
body#security .security-wrapper #auth-providers > button:visited {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--lt-neutral-70-dk-neutral-20);
  font-weight: 600;
}
body#security .security-wrapper #auth-providers > a:hover,
body#security .security-wrapper #auth-providers > a:focus {
  color: var(--lt-dk-primary-50);
}
body#security .security-wrapper .auth-provider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  background-color: #e5e5e5;
  padding: 5px 10px;
  border-radius: 40px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--lt-neutral-70-dk-neutral-20);
  font-weight: 600;
  border: none;
  cursor: pointer;
}
body#security .security-wrapper .auth-provider:hover {
  color: var(--lt-dk-primary-50);
}
body#security .security-wrapper .auth-provider i {
  font-size: 1.5em;
  margin-right: 5px;
}
body#security .security-wrapper .auth-provider > span {
  margin-right: 10px;
}
body#security .security-wrapper hr {
  background-color: var(--lt-neutral-10-dk-primary-90);
  height: 2px;
  width: 100%;
  margin-top: 2em;
  border: none;
}
body#security .security-wrapper .not-a-customer {
  border-top: 1px solid var(--lt-neutral-10-dk-primary-90);
  margin-top: 1em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
body#security .security-wrapper .not-a-customer h4 {
  padding-right: 10px;
}
body#security .security-wrapper .not-a-customer a {
  color: var(--lt-neutral-70-dk-neutral-20);
  font-size: 0.9em;
  font-weight: 500;
}
body#security .security-wrapper .not-a-customer a:hover, body#security .security-wrapper .not-a-customer a:focus {
  color: var(--lt-dk-primary-50);
}
body#security .security-wrapper .footer {
  margin-top: 1em;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 2px;
}
body#security .security-wrapper .footer a {
  display: block;
  margin: 0 10px;
}
body#security .security-wrapper .footer a:link, body#security .security-wrapper .footer a:active, body#security .security-wrapper .footer a:visited {
  color: var(--lt-dk-white);
}
body#security .security-wrapper .footer a:hover, body#security .security-wrapper .footer a:focus {
  color: var(--lt-dk-accent-50);
}
body#security .security-wrapper .footer img {
  max-width: 74px;
}
body#security .security-wrapper .btn.disabled,
body#security .security-wrapper .btn:disabled,
body#security .security-wrapper input[type=submit].disabled,
body#security .security-wrapper input[type=submit]:disabled,
body#security .security-wrapper fieldset:disabled .btn {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: all;
  background-color: var(--lt-dk-primary-70);
  border-color: var(--lt-dk-primary-70);
  color: var(--lt-dk-neutral-20);
}
body#security .security-wrapper .btn.disabled:hover, body#security .security-wrapper .btn.disabled:focus,
body#security .security-wrapper .btn:disabled:hover,
body#security .security-wrapper .btn:disabled:focus,
body#security .security-wrapper input[type=submit].disabled:hover,
body#security .security-wrapper input[type=submit].disabled:focus,
body#security .security-wrapper input[type=submit]:disabled:hover,
body#security .security-wrapper input[type=submit]:disabled:focus,
body#security .security-wrapper fieldset:disabled .btn:hover,
body#security .security-wrapper fieldset:disabled .btn:focus {
  color: var(--lt-dk-neutral-20);
}
body#security .security-wrapper .btn,
body#security .security-wrapper input[type=submit].btn {
  border-radius: 30px !important;
  font-size: 0.85em;
  font-weight: 600;
  border-width: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);
}
body#security .security-wrapper .btn i.btn-icon,
body#security .security-wrapper input[type=submit].btn i.btn-icon {
  font-size: 1.2em;
}
body#security .security-wrapper .btn-primary,
body#security .security-wrapper .btn-secondary,
body#security .security-wrapper input[type=submit].btn-primary,
body#security .security-wrapper input[type=submit].btn-secondary {
  background-color: var(--theme-primary-button);
  border-color: var(--theme-primary-border);
  color: var(--theme-primary-button-text);
}
body#security .security-wrapper .btn-primary.reverse,
body#security .security-wrapper .btn-secondary.reverse,
body#security .security-wrapper input[type=submit].btn-primary.reverse,
body#security .security-wrapper input[type=submit].btn-secondary.reverse {
  background-color: transparent;
  border-color: var(--lt-dk-neutral-20);
  color: var(--lt-neutral-60-dk-neutral-20);
}
body#security .security-wrapper .btn-primary.reverse:hover, body#security .security-wrapper .btn-primary.reverse:focus,
body#security .security-wrapper .btn-secondary.reverse:hover,
body#security .security-wrapper .btn-secondary.reverse:focus,
body#security .security-wrapper input[type=submit].btn-primary.reverse:hover,
body#security .security-wrapper input[type=submit].btn-primary.reverse:focus,
body#security .security-wrapper input[type=submit].btn-secondary.reverse:hover,
body#security .security-wrapper input[type=submit].btn-secondary.reverse:focus {
  background-color: transparent;
  border-color: var(--theme-primary-border);
  color: var(--theme-primary-button-text-hover);
}
body#security .security-wrapper .btn-primary.btn-text,
body#security .security-wrapper .btn-secondary.btn-text,
body#security .security-wrapper input[type=submit].btn-primary.btn-text,
body#security .security-wrapper input[type=submit].btn-secondary.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-neutral-60-dk-neutral-20);
  text-decoration: underline;
  padding: 0;
  min-width: auto;
}
body#security .security-wrapper .btn-primary.btn-text:hover, body#security .security-wrapper .btn-primary.btn-text:focus,
body#security .security-wrapper .btn-secondary.btn-text:hover,
body#security .security-wrapper .btn-secondary.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-primary.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-primary.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-secondary.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-secondary.btn-text:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--theme-primary-button-text-hover);
}
body#security .security-wrapper .btn-primary:hover, body#security .security-wrapper .btn-primary:focus,
body#security .security-wrapper .btn-secondary:hover,
body#security .security-wrapper .btn-secondary:focus,
body#security .security-wrapper input[type=submit].btn-primary:hover,
body#security .security-wrapper input[type=submit].btn-primary:focus,
body#security .security-wrapper input[type=submit].btn-secondary:hover,
body#security .security-wrapper input[type=submit].btn-secondary:focus {
  background-color: var(--theme-primary-button-hover);
  border-color: var(--theme-primary-border-hover);
  color: var(--theme-primary-button-text);
}
body#security .security-wrapper .btn-accent,
body#security .security-wrapper input[type=submit].btn-accent {
  background-color: var(--lt-accent-50-dk-accent-40);
  border-color: var(--lt-accent-50-dk-accent-40);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-accent.reverse,
body#security .security-wrapper input[type=submit].btn-accent.reverse {
  background-color: transparent;
  border-color: var(--lt-neutral-20-dk-accent-40);
  color: var(--lt-accent-50-dk-white);
}
body#security .security-wrapper .btn-accent.reverse:hover, body#security .security-wrapper .btn-accent.reverse:focus,
body#security .security-wrapper input[type=submit].btn-accent.reverse:hover,
body#security .security-wrapper input[type=submit].btn-accent.reverse:focus {
  background-color: var(--lt-transparent-dk-accent-60);
  border-color: var(--lt-accent-50-dk-accent-60);
  color: var(--lt-accent-50-dk-white);
}
body#security .security-wrapper .btn-accent:hover, body#security .security-wrapper .btn-accent:focus,
body#security .security-wrapper input[type=submit].btn-accent:hover,
body#security .security-wrapper input[type=submit].btn-accent:focus {
  background-color: var(--lt-accent-70-dk-accent-60);
  border-color: var(--lt-accent-70-dk-accent-60);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-info,
body#security .security-wrapper input[type=submit].btn-info {
  background-color: var(--lt-info-70-dk-info-40);
  border-color: var(--lt-info-70-dk-info-40);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-info.reverse,
body#security .security-wrapper input[type=submit].btn-info.reverse {
  background-color: transparent;
  border-color: var(--lt-info-70-dk-info-40);
  color: var(--lt-info-70-dk-white);
}
body#security .security-wrapper .btn-info.btn-text,
body#security .security-wrapper input[type=submit].btn-info.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-info-70-dk-info-40);
  text-decoration: underline;
}
body#security .security-wrapper .btn-info.btn-text:hover, body#security .security-wrapper .btn-info.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-info.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-info.btn-text:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-info-70-dk-white);
}
body#security .security-wrapper .btn-info:hover, body#security .security-wrapper .btn-info:focus,
body#security .security-wrapper input[type=submit].btn-info:hover,
body#security .security-wrapper input[type=submit].btn-info:focus {
  background-color: var(--lt-info-80-dk-info-60);
  border-color: var(--lt-info-80-dk-info-60);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-warning,
body#security .security-wrapper input[type=submit].btn-warning {
  background-color: var(--lt-warning-70-dk-warning-40);
  border-color: var(--lt-warning-70-dk-warning-40);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-warning.reverse,
body#security .security-wrapper input[type=submit].btn-warning.reverse {
  background-color: transparent;
  border-color: var(--lt-neutral-20-dk-warning-40);
  color: var(--lt-warning-70-dk-white);
}
body#security .security-wrapper .btn-warning.reverse:hover, body#security .security-wrapper .btn-warning.reverse:focus,
body#security .security-wrapper input[type=submit].btn-warning.reverse:hover,
body#security .security-wrapper input[type=submit].btn-warning.reverse:focus {
  background-color: var(--lt-transparent-dk-warning-70);
  border-color: var(--lt-dk-warning-70);
  color: var(--lt-warning-70-dk-white);
}
body#security .security-wrapper .btn-warning.btn-text,
body#security .security-wrapper input[type=submit].btn-warning.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-warning-70-dk-warning-40);
  text-decoration: underline;
}
body#security .security-wrapper .btn-warning.btn-text:hover, body#security .security-wrapper .btn-warning.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-warning.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-warning.btn-text:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-warning-70-dk-white);
}
body#security .security-wrapper .btn-warning:hover, body#security .security-wrapper .btn-warning:focus,
body#security .security-wrapper input[type=submit].btn-warning:hover,
body#security .security-wrapper input[type=submit].btn-warning:focus {
  background-color: var(--lt-warning-80-dk-warning-60);
  border-color: var(--lt-warning-80-dk-warning-60);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-success,
body#security .security-wrapper .btn-green,
body#security .security-wrapper input[type=submit].btn-success,
body#security .security-wrapper input[type=submit].btn-green {
  background-color: var(--lt-success-70-dk-success-40);
  border-color: var(--lt-success-70-dk-success-40);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-success.reverse,
body#security .security-wrapper .btn-green.reverse,
body#security .security-wrapper input[type=submit].btn-success.reverse,
body#security .security-wrapper input[type=submit].btn-green.reverse {
  background-color: transparent;
  border-color: var(--lt-neutral-20-dk-success-70);
  color: var(--lt-success-70-dk-white);
}
body#security .security-wrapper .btn-success.reverse:hover, body#security .security-wrapper .btn-success.reverse:focus,
body#security .security-wrapper .btn-green.reverse:hover,
body#security .security-wrapper .btn-green.reverse:focus,
body#security .security-wrapper input[type=submit].btn-success.reverse:hover,
body#security .security-wrapper input[type=submit].btn-success.reverse:focus,
body#security .security-wrapper input[type=submit].btn-green.reverse:hover,
body#security .security-wrapper input[type=submit].btn-green.reverse:focus {
  background-color: var(--lt-transparent-dk-success-70);
  border-color: var(--lt-dk-success-70);
  color: var(--lt-success-70-dk-white);
}
body#security .security-wrapper .btn-success.btn-text,
body#security .security-wrapper .btn-green.btn-text,
body#security .security-wrapper input[type=submit].btn-success.btn-text,
body#security .security-wrapper input[type=submit].btn-green.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-success-70-dk-success-40);
  text-decoration: underline;
}
body#security .security-wrapper .btn-success.btn-text:hover, body#security .security-wrapper .btn-success.btn-text:focus,
body#security .security-wrapper .btn-green.btn-text:hover,
body#security .security-wrapper .btn-green.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-success.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-success.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-green.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-green.btn-text:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-success-70-dk-white);
}
body#security .security-wrapper .btn-success:hover, body#security .security-wrapper .btn-success:focus,
body#security .security-wrapper .btn-green:hover,
body#security .security-wrapper .btn-green:focus,
body#security .security-wrapper input[type=submit].btn-success:hover,
body#security .security-wrapper input[type=submit].btn-success:focus,
body#security .security-wrapper input[type=submit].btn-green:hover,
body#security .security-wrapper input[type=submit].btn-green:focus {
  background-color: var(--lt-success-80-dk-success-60);
  border-color: var(--lt-success-80-dk-success-60);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-danger,
body#security .security-wrapper input[type=submit].btn-danger {
  background-color: var(--lt-error-60-dk-error-40);
  border-color: var(--lt-error-60-dk-error-40);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-danger.reverse,
body#security .security-wrapper input[type=submit].btn-danger.reverse {
  background-color: transparent;
  border-color: var(--lt-neutral-20-dk-error-40);
  color: var(--lt-error-60-dk-white);
}
body#security .security-wrapper .btn-danger.reverse:hover, body#security .security-wrapper .btn-danger.reverse:focus,
body#security .security-wrapper input[type=submit].btn-danger.reverse:hover,
body#security .security-wrapper input[type=submit].btn-danger.reverse:focus {
  background-color: var(--lt-transparent-dk-error-60);
  border-color: var(--lt-dk-error-60);
  color: var(--lt-error-60-dk-white);
}
body#security .security-wrapper .btn-danger.btn-text,
body#security .security-wrapper input[type=submit].btn-danger.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-error-60-dk-error-40);
  text-decoration: underline;
}
body#security .security-wrapper .btn-danger.btn-text:hover, body#security .security-wrapper .btn-danger.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-danger.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-danger.btn-text:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-error-70-dk-white);
}
body#security .security-wrapper .btn-danger:hover, body#security .security-wrapper .btn-danger:focus,
body#security .security-wrapper input[type=submit].btn-danger:hover,
body#security .security-wrapper input[type=submit].btn-danger:focus {
  background-color: var(--lt-error-70-dk-error-60);
  border-color: var(--lt-error-70-dk-error-60);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-purple,
body#security .security-wrapper input[type=submit].btn-purple {
  background-color: var(--lt-purple-60-dk-purple-40);
  border-color: var(--lt-purple-60-dk-purple-40);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-purple.reverse,
body#security .security-wrapper input[type=submit].btn-purple.reverse {
  background-color: transparent;
  border-color: var(--lt-purple-60-dk-purple-40);
  color: var(--lt-purple-60-dk-white);
}
body#security .security-wrapper .btn-purple.btn-text,
body#security .security-wrapper input[type=submit].btn-purple.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-purple-60-dk-purple-40);
  text-decoration: underline;
}
body#security .security-wrapper .btn-purple.btn-text:hover, body#security .security-wrapper .btn-purple.btn-text:focus,
body#security .security-wrapper input[type=submit].btn-purple.btn-text:hover,
body#security .security-wrapper input[type=submit].btn-purple.btn-text:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--lt-purple-60-dk-white);
}
body#security .security-wrapper .btn-purple:hover, body#security .security-wrapper .btn-purple:focus,
body#security .security-wrapper input[type=submit].btn-purple:hover,
body#security .security-wrapper input[type=submit].btn-purple:focus {
  background-color: var(--lt-purple-70-dk-purple-60);
  border-color: var(--lt-purple-70-dk-purple-60);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-default,
body#security .security-wrapper input[type=submit].btn-default {
  background-color: var(--lt-neutral-60-dk-neutral-30);
  border-color: var(--lt-neutral-60-dk-neutral-30);
  color: var(--lt-white-dk-primary-90);
}
body#security .security-wrapper .btn-default.reverse,
body#security .security-wrapper input[type=submit].btn-default.reverse {
  background-color: transparent;
  border-color: var(--lt-dk-neutral-20);
  color: var(--lt-neutral-60-dk-neutral-20);
}
body#security .security-wrapper .btn-default.reverse:hover, body#security .security-wrapper .btn-default.reverse:focus,
body#security .security-wrapper input[type=submit].btn-default.reverse:hover,
body#security .security-wrapper input[type=submit].btn-default.reverse:focus {
  background-color: transparent;
  border-color: var(--theme-primary-border);
  color: var(--lt-primary-50-dk-white);
}
body#security .security-wrapper .btn-default:hover, body#security .security-wrapper .btn-default:focus,
body#security .security-wrapper input[type=submit].btn-default:hover,
body#security .security-wrapper input[type=submit].btn-default:focus {
  background-color: var(--lt-neutral-70-dk-neutral-50);
  border-color: var(--lt-neutral-70-dk-neutral-50);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-reverse,
body#security .security-wrapper input[type=submit].btn-reverse {
  background-color: var(--lt-dk-white);
  border-color: var(--lt-dk-white);
  color: var(--lt-dk-primary-90);
}
body#security .security-wrapper .btn-reverse.reverse,
body#security .security-wrapper input[type=submit].btn-reverse.reverse {
  background-color: transparent;
  border-color: var(--lt-dk-white);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-reverse.reverse:hover, body#security .security-wrapper .btn-reverse.reverse:focus,
body#security .security-wrapper input[type=submit].btn-reverse.reverse:hover,
body#security .security-wrapper input[type=submit].btn-reverse.reverse:focus {
  background-color: var(--lt-dk-primary-90);
  border-color: var(--lt-dk-primary-90);
  color: var(--lt-dk-white);
}
body#security .security-wrapper .btn-reverse:hover, body#security .security-wrapper .btn-reverse:focus,
body#security .security-wrapper input[type=submit].btn-reverse:hover,
body#security .security-wrapper input[type=submit].btn-reverse:focus {
  background-color: var(--lt-dk-primary-90);
  border-color: var(--lt-dk-primary-90);
  color: var(--lt-dk-white);
}

@media only screen and (max-width: 769px) {
  body#security .security-wrapper {
    display: block;
    width: 100%;
  }
}

/*# sourceMappingURL=/assets/security-0862e646.css.map */