@charset "UTF-8";
/* helpers/all.scss */
/* config/all.scss */
/* config/namespaces.scss */
/* config/units.scss */
:where(html) {
  --unit-size: 1em;
  --unit-line: 1.5;
  --unit-space: 0.25;
  --unit-margin: 0.25rem;
  --unit-padding: 0.25em;
  --unit-padding-v: 0.25em;
  --unit-padding-h: 0.5em;
  --unit-radius: 0.25rem;
  --unit-transition: 0.3s;
}

:where(html) {
  --red-0: hsl(0, 65%, 5%);
  --red-5: hsl(0, 66%, 8%);
  --red-10: hsl(0, 68%, 11%);
  --red-15: hsl(0, 69%, 15%);
  --red-20: hsl(0, 70%, 18%);
  --red-25: hsl(0, 71%, 22%);
  --red-30: hsl(0, 72%, 27%);
  --red-35: hsl(0, 73%, 31%);
  --red-40: hsl(0, 73%, 36%);
  --red-45: hsl(0, 74%, 42%);
  --red-50: hsl(0, 74%, 48%);
  --red-55: hsl(0, 74%, 55%);
  --red-60: hsl(0, 75%, 62%);
  --red-65: hsl(0, 75%, 68%);
  --red-70: hsl(0, 74%, 74%);
  --red-75: hsl(0, 74%, 80%);
  --red-80: hsl(0, 74%, 84%);
  --red-85: hsl(0, 73%, 88%);
  --red-90: hsl(0, 73%, 92%);
  --red-95: hsl(0, 72%, 95%);
  --red-100: hsl(0, 71%, 98%);
  --brown-0: hsl(18, 52%, 5%);
  --brown-5: hsl(17, 53%, 8%);
  --brown-10: hsl(17, 54%, 11%);
  --brown-15: hsl(16, 54%, 14%);
  --brown-20: hsl(15, 55%, 17%);
  --brown-25: hsl(15, 56%, 20%);
  --brown-30: hsl(15, 56%, 24%);
  --brown-35: hsl(14, 56%, 28%);
  --brown-40: hsl(14, 57%, 32%);
  --brown-45: hsl(14, 57%, 37%);
  --brown-50: hsl(14, 57%, 42%);
  --brown-55: hsl(14, 58%, 47%);
  --brown-60: hsl(14, 58%, 53%);
  --brown-65: hsl(13, 58%, 60%);
  --brown-70: hsl(13, 58%, 67%);
  --brown-75: hsl(13, 58%, 75%);
  --brown-80: hsl(14, 58%, 81%);
  --brown-85: hsl(14, 58%, 87%);
  --brown-90: hsl(14, 58%, 92%);
  --brown-95: hsl(14, 57%, 95%);
  --brown-100: hsl(14, 57%, 98%);
  --orange-0: hsl(25, 93%, 5%);
  --orange-5: hsl(25, 94%, 8%);
  --orange-10: hsl(26, 94%, 11%);
  --orange-15: hsl(26, 95%, 14%);
  --orange-20: hsl(26, 96%, 18%);
  --orange-25: hsl(26, 96%, 21%);
  --orange-30: hsl(26, 96%, 25%);
  --orange-35: hsl(26, 97%, 30%);
  --orange-40: hsl(26, 97%, 35%);
  --orange-45: hsl(26, 97%, 40%);
  --orange-50: hsl(26, 97%, 46%);
  --orange-55: hsl(26, 96%, 52%);
  --orange-60: hsl(26, 96%, 59%);
  --orange-65: hsl(26, 95%, 65%);
  --orange-70: hsl(25, 94%, 72%);
  --orange-75: hsl(25, 93%, 78%);
  --orange-80: hsl(24, 92%, 83%);
  --orange-85: hsl(24, 91%, 88%);
  --orange-90: hsl(23, 90%, 91%);
  --orange-95: hsl(22, 88%, 95%);
  --orange-100: hsl(20, 87%, 97%);
  --yellow-0: hsl(52, 90%, 5%);
  --yellow-5: hsl(51, 91%, 8%);
  --yellow-10: hsl(49, 92%, 10%);
  --yellow-15: hsl(48, 93%, 13%);
  --yellow-20: hsl(47, 94%, 17%);
  --yellow-25: hsl(46, 95%, 20%);
  --yellow-30: hsl(45, 96%, 24%);
  --yellow-35: hsl(44, 96%, 28%);
  --yellow-40: hsl(43, 97%, 33%);
  --yellow-45: hsl(42, 97%, 38%);
  --yellow-50: hsl(41, 97%, 43%);
  --yellow-55: hsl(41, 96%, 48%);
  --yellow-60: hsl(40, 95%, 54%);
  --yellow-65: hsl(39, 94%, 60%);
  --yellow-70: hsl(39, 93%, 66%);
  --yellow-75: hsl(38, 92%, 72%);
  --yellow-80: hsl(38, 90%, 77%);
  --yellow-85: hsl(38, 88%, 82%);
  --yellow-90: hsl(37, 86%, 87%);
  --yellow-95: hsl(37, 84%, 92%);
  --yellow-100: hsl(37, 82%, 96%);
  --olive-0: hsl(64, 66%, 4%);
  --olive-5: hsl(64, 68%, 6%);
  --olive-10: hsl(65, 70%, 9%);
  --olive-15: hsl(65, 72%, 12%);
  --olive-20: hsl(66, 73%, 15%);
  --olive-25: hsl(66, 74%, 18%);
  --olive-30: hsl(67, 74%, 21%);
  --olive-35: hsl(67, 74%, 25%);
  --olive-40: hsl(67, 73%, 29%);
  --olive-45: hsl(68, 70%, 33%);
  --olive-50: hsl(68, 66%, 37%);
  --olive-55: hsl(69, 60%, 43%);
  --olive-60: hsl(69, 55%, 48%);
  --olive-65: hsl(70, 52%, 54%);
  --olive-70: hsl(70, 50%, 61%);
  --olive-75: hsl(71, 49%, 68%);
  --olive-80: hsl(71, 48%, 75%);
  --olive-85: hsl(71, 49%, 82%);
  --olive-90: hsl(72, 49%, 87%);
  --olive-95: hsl(72, 51%, 93%);
  --olive-100: hsl(72, 52%, 97%);
  --green-0: hsl(117, 45%, 5%);
  --green-5: hsl(117, 48%, 8%);
  --green-10: hsl(117, 50%, 11%);
  --green-15: hsl(117, 52%, 14%);
  --green-20: hsl(117, 53%, 17%);
  --green-25: hsl(117, 54%, 21%);
  --green-30: hsl(117, 55%, 25%);
  --green-35: hsl(117, 55%, 29%);
  --green-40: hsl(117, 55%, 33%);
  --green-45: hsl(117, 54%, 38%);
  --green-50: hsl(117, 54%, 43%);
  --green-55: hsl(117, 53%, 48%);
  --green-60: hsl(117, 52%, 54%);
  --green-65: hsl(117, 51%, 60%);
  --green-70: hsl(117, 50%, 66%);
  --green-75: hsl(117, 48%, 73%);
  --green-80: hsl(117, 47%, 79%);
  --green-85: hsl(117, 46%, 85%);
  --green-90: hsl(116, 45%, 90%);
  --green-95: hsl(116, 44%, 94%);
  --green-100: hsl(116, 43%, 98%);
  --teal-0: hsl(165, 52%, 5%);
  --teal-5: hsl(165, 56%, 7%);
  --teal-10: hsl(165, 59%, 10%);
  --teal-15: hsl(165, 61%, 13%);
  --teal-20: hsl(165, 62%, 15%);
  --teal-25: hsl(165, 63%, 18%);
  --teal-30: hsl(165, 63%, 21%);
  --teal-35: hsl(165, 63%, 25%);
  --teal-40: hsl(165, 62%, 29%);
  --teal-45: hsl(165, 60%, 33%);
  --teal-50: hsl(165, 59%, 37%);
  --teal-55: hsl(165, 58%, 42%);
  --teal-60: hsl(165, 57%, 47%);
  --teal-65: hsl(165, 56%, 53%);
  --teal-70: hsl(165, 55%, 60%);
  --teal-75: hsl(165, 54%, 67%);
  --teal-80: hsl(165, 54%, 75%);
  --teal-85: hsl(165, 55%, 81%);
  --teal-90: hsl(165, 55%, 88%);
  --teal-95: hsl(165, 57%, 93%);
  --teal-100: hsl(165, 58%, 98%);
  --blue-0: hsl(202, 72%, 5%);
  --blue-5: hsl(202, 74%, 8%);
  --blue-10: hsl(203, 75%, 11%);
  --blue-15: hsl(203, 77%, 15%);
  --blue-20: hsl(203, 78%, 18%);
  --blue-25: hsl(204, 79%, 22%);
  --blue-30: hsl(204, 80%, 26%);
  --blue-35: hsl(205, 81%, 31%);
  --blue-40: hsl(205, 82%, 35%);
  --blue-45: hsl(205, 83%, 41%);
  --blue-50: hsl(206, 84%, 46%);
  --blue-55: hsl(206, 84%, 52%);
  --blue-60: hsl(207, 85%, 58%);
  --blue-65: hsl(207, 85%, 65%);
  --blue-70: hsl(207, 85%, 71%);
  --blue-75: hsl(207, 85%, 77%);
  --blue-80: hsl(208, 84%, 82%);
  --blue-85: hsl(208, 84%, 87%);
  --blue-90: hsl(208, 83%, 91%);
  --blue-95: hsl(208, 82%, 95%);
  --blue-100: hsl(208, 81%, 98%);
  --indigo-0: hsl(238, 50%, 7%);
  --indigo-5: hsl(238, 52%, 11%);
  --indigo-10: hsl(237, 54%, 16%);
  --indigo-15: hsl(237, 56%, 21%);
  --indigo-20: hsl(237, 58%, 27%);
  --indigo-25: hsl(237, 61%, 32%);
  --indigo-30: hsl(236, 64%, 38%);
  --indigo-35: hsl(236, 67%, 44%);
  --indigo-40: hsl(236, 71%, 50%);
  --indigo-45: hsl(236, 75%, 56%);
  --indigo-50: hsl(236, 78%, 62%);
  --indigo-55: hsl(236, 81%, 67%);
  --indigo-60: hsl(236, 82%, 72%);
  --indigo-65: hsl(237, 82%, 77%);
  --indigo-70: hsl(237, 82%, 81%);
  --indigo-75: hsl(237, 81%, 85%);
  --indigo-80: hsl(237, 79%, 89%);
  --indigo-85: hsl(237, 77%, 92%);
  --indigo-90: hsl(237, 75%, 94%);
  --indigo-95: hsl(237, 72%, 97%);
  --indigo-100: hsl(237, 70%, 99%);
  --violet-0: hsl(247, 53%, 8%);
  --violet-5: hsl(249, 53%, 12%);
  --violet-10: hsl(250, 54%, 16%);
  --violet-15: hsl(252, 55%, 21%);
  --violet-20: hsl(253, 56%, 26%);
  --violet-25: hsl(254, 57%, 31%);
  --violet-30: hsl(255, 59%, 36%);
  --violet-35: hsl(256, 62%, 42%);
  --violet-40: hsl(257, 66%, 48%);
  --violet-45: hsl(258, 71%, 53%);
  --violet-50: hsl(259, 76%, 59%);
  --violet-55: hsl(260, 79%, 65%);
  --violet-60: hsl(260, 81%, 71%);
  --violet-65: hsl(261, 82%, 76%);
  --violet-70: hsl(261, 82%, 80%);
  --violet-75: hsl(262, 82%, 85%);
  --violet-80: hsl(262, 81%, 88%);
  --violet-85: hsl(263, 80%, 92%);
  --violet-90: hsl(263, 79%, 94%);
  --violet-95: hsl(263, 78%, 97%);
  --violet-100: hsl(263, 77%, 99%);
  --purple-0: hsl(274, 47%, 6%);
  --purple-5: hsl(275, 50%, 8%);
  --purple-10: hsl(276, 53%, 11%);
  --purple-15: hsl(278, 56%, 14%);
  --purple-20: hsl(279, 59%, 18%);
  --purple-25: hsl(280, 62%, 22%);
  --purple-30: hsl(281, 64%, 26%);
  --purple-35: hsl(282, 67%, 31%);
  --purple-40: hsl(282, 69%, 37%);
  --purple-45: hsl(283, 71%, 43%);
  --purple-50: hsl(284, 73%, 49%);
  --purple-55: hsl(285, 74%, 55%);
  --purple-60: hsl(285, 75%, 62%);
  --purple-65: hsl(286, 77%, 68%);
  --purple-70: hsl(286, 77%, 75%);
  --purple-75: hsl(287, 78%, 80%);
  --purple-80: hsl(287, 79%, 85%);
  --purple-85: hsl(288, 79%, 90%);
  --purple-90: hsl(288, 80%, 94%);
  --purple-95: hsl(288, 80%, 97%);
  --purple-100: hsl(288, 80%, 99%);
  --pink-0: hsl(312, 64%, 5%);
  --pink-5: hsl(312, 66%, 7%);
  --pink-10: hsl(313, 69%, 10%);
  --pink-15: hsl(313, 71%, 13%);
  --pink-20: hsl(313, 73%, 16%);
  --pink-25: hsl(313, 74%, 19%);
  --pink-30: hsl(313, 76%, 23%);
  --pink-35: hsl(313, 77%, 27%);
  --pink-40: hsl(313, 77%, 32%);
  --pink-45: hsl(313, 78%, 37%);
  --pink-50: hsl(313, 77%, 42%);
  --pink-55: hsl(313, 77%, 48%);
  --pink-60: hsl(313, 76%, 55%);
  --pink-65: hsl(313, 76%, 63%);
  --pink-70: hsl(314, 75%, 70%);
  --pink-75: hsl(314, 74%, 77%);
  --pink-80: hsl(314, 73%, 83%);
  --pink-85: hsl(314, 72%, 88%);
  --pink-90: hsl(315, 71%, 92%);
  --pink-95: hsl(315, 70%, 96%);
  --pink-100: hsl(316, 69%, 99%);
  --maroon-0: hsl(339, 57%, 6%);
  --maroon-5: hsl(339, 62%, 8%);
  --maroon-10: hsl(339, 66%, 11%);
  --maroon-15: hsl(339, 70%, 13%);
  --maroon-20: hsl(339, 74%, 17%);
  --maroon-25: hsl(339, 76%, 20%);
  --maroon-30: hsl(339, 79%, 24%);
  --maroon-35: hsl(339, 81%, 29%);
  --maroon-40: hsl(339, 82%, 33%);
  --maroon-45: hsl(339, 83%, 39%);
  --maroon-50: hsl(339, 84%, 45%);
  --maroon-55: hsl(339, 84%, 51%);
  --maroon-60: hsl(339, 84%, 57%);
  --maroon-65: hsl(339, 83%, 64%);
  --maroon-70: hsl(339, 82%, 71%);
  --maroon-75: hsl(339, 81%, 77%);
  --maroon-80: hsl(339, 79%, 83%);
  --maroon-85: hsl(339, 78%, 88%);
  --maroon-90: hsl(339, 76%, 92%);
  --maroon-95: hsl(339, 73%, 96%);
  --maroon-100: hsl(339, 71%, 99%);
  --grey-0: hsl(206, 5%, 5%);
  --grey-5: hsl(206, 5%, 10%);
  --grey-10: hsl(206, 5%, 14%);
  --grey-15: hsl(206, 5%, 19%);
  --grey-20: hsl(206, 5%, 23%);
  --grey-25: hsl(206, 5%, 28%);
  --grey-30: hsl(206, 5%, 33%);
  --grey-35: hsl(206, 5%, 37%);
  --grey-40: hsl(206, 5%, 42%);
  --grey-45: hsl(206, 5%, 47%);
  --grey-50: hsl(206, 5%, 52%);
  --grey-55: hsl(206, 5%, 56%);
  --grey-60: hsl(206, 5%, 61%);
  --grey-65: hsl(206, 5%, 66%);
  --grey-70: hsl(206, 5%, 71%);
  --grey-75: hsl(206, 5%, 75%);
  --grey-80: hsl(206, 5%, 80%);
  --grey-85: hsl(206, 5%, 85%);
  --grey-90: hsl(206, 5%, 89%);
  --grey-95: hsl(206, 5%, 94%);
  --grey-100: hsl(206, 5%, 98%);
  --grey20-0: hsl(206, 20%, 5%);
  --grey20-5: hsl(206, 20%, 10%);
  --grey20-10: hsl(206, 20%, 14%);
  --grey20-15: hsl(206, 20%, 19%);
  --grey20-20: hsl(206, 20%, 23%);
  --grey20-25: hsl(206, 20%, 28%);
  --grey20-30: hsl(206, 20%, 33%);
  --grey20-35: hsl(206, 20%, 37%);
  --grey20-40: hsl(206, 20%, 42%);
  --grey20-45: hsl(206, 20%, 47%);
  --grey20-50: hsl(206, 20%, 52%);
  --grey20-55: hsl(206, 20%, 56%);
  --grey20-60: hsl(206, 20%, 61%);
  --grey20-65: hsl(206, 20%, 66%);
  --grey20-70: hsl(206, 20%, 71%);
  --grey20-75: hsl(206, 20%, 75%);
  --grey20-80: hsl(206, 20%, 80%);
  --grey20-85: hsl(206, 20%, 85%);
  --grey20-90: hsl(206, 20%, 89%);
  --grey20-95: hsl(206, 20%, 94%);
  --grey20-100: hsl(206, 20%, 98%);
  --grey40-0: hsl(206, 40%, 5%);
  --grey40-5: hsl(206, 40%, 10%);
  --grey40-10: hsl(206, 40%, 14%);
  --grey40-15: hsl(206, 40%, 19%);
  --grey40-20: hsl(206, 40%, 23%);
  --grey40-25: hsl(206, 40%, 28%);
  --grey40-30: hsl(206, 40%, 33%);
  --grey40-35: hsl(206, 40%, 37%);
  --grey40-40: hsl(206, 40%, 42%);
  --grey40-45: hsl(206, 40%, 47%);
  --grey40-50: hsl(206, 40%, 52%);
  --grey40-55: hsl(206, 40%, 56%);
  --grey40-60: hsl(206, 40%, 61%);
  --grey40-65: hsl(206, 40%, 66%);
  --grey40-70: hsl(206, 40%, 71%);
  --grey40-75: hsl(206, 40%, 75%);
  --grey40-80: hsl(206, 40%, 80%);
  --grey40-85: hsl(206, 40%, 85%);
  --grey40-90: hsl(206, 40%, 89%);
  --grey40-95: hsl(206, 40%, 94%);
  --grey40-100: hsl(206, 40%, 98%);
  --brand-0: var(--blue-0);
  --brand-5: var(--blue-5);
  --brand-10: var(--blue-10);
  --brand-15: var(--blue-15);
  --brand-20: var(--blue-20);
  --brand-25: var(--blue-25);
  --brand-30: var(--blue-30);
  --brand-35: var(--blue-35);
  --brand-40: var(--blue-40);
  --brand-45: var(--blue-45);
  --brand-50: var(--blue-50);
  --brand-55: var(--blue-55);
  --brand-60: var(--blue-60);
  --brand-65: var(--blue-65);
  --brand-70: var(--blue-70);
  --brand-75: var(--blue-75);
  --brand-80: var(--blue-80);
  --brand-85: var(--blue-85);
  --brand-90: var(--blue-90);
  --brand-95: var(--blue-95);
  --brand-100: var(--blue-100);
  --color-0: var(--grey-0);
  --color-5: var(--grey-5);
  --color-10: var(--grey-10);
  --color-15: var(--grey-15);
  --color-20: var(--grey-20);
  --color-25: var(--grey-25);
  --color-30: var(--grey-30);
  --color-35: var(--grey-35);
  --color-40: var(--grey-40);
  --color-45: var(--grey-45);
  --color-50: var(--grey-50);
  --color-55: var(--grey-55);
  --color-60: var(--grey-60);
  --color-65: var(--grey-65);
  --color-70: var(--grey-70);
  --color-75: var(--grey-75);
  --color-80: var(--grey-80);
  --color-85: var(--grey-85);
  --color-90: var(--grey-90);
  --color-95: var(--grey-95);
  --color-100: var(--grey-100);
}

.red {
  --color-0: var(--red-0);
  --color-5: var(--red-5);
  --color-10: var(--red-10);
  --color-15: var(--red-15);
  --color-20: var(--red-20);
  --color-25: var(--red-25);
  --color-30: var(--red-30);
  --color-35: var(--red-35);
  --color-40: var(--red-40);
  --color-45: var(--red-45);
  --color-50: var(--red-50);
  --color-55: var(--red-55);
  --color-60: var(--red-60);
  --color-65: var(--red-65);
  --color-70: var(--red-70);
  --color-75: var(--red-75);
  --color-80: var(--red-80);
  --color-85: var(--red-85);
  --color-90: var(--red-90);
  --color-95: var(--red-95);
  --color-100: var(--red-100);
}

.brown {
  --color-0: var(--brown-0);
  --color-5: var(--brown-5);
  --color-10: var(--brown-10);
  --color-15: var(--brown-15);
  --color-20: var(--brown-20);
  --color-25: var(--brown-25);
  --color-30: var(--brown-30);
  --color-35: var(--brown-35);
  --color-40: var(--brown-40);
  --color-45: var(--brown-45);
  --color-50: var(--brown-50);
  --color-55: var(--brown-55);
  --color-60: var(--brown-60);
  --color-65: var(--brown-65);
  --color-70: var(--brown-70);
  --color-75: var(--brown-75);
  --color-80: var(--brown-80);
  --color-85: var(--brown-85);
  --color-90: var(--brown-90);
  --color-95: var(--brown-95);
  --color-100: var(--brown-100);
}

.orange {
  --color-0: var(--orange-0);
  --color-5: var(--orange-5);
  --color-10: var(--orange-10);
  --color-15: var(--orange-15);
  --color-20: var(--orange-20);
  --color-25: var(--orange-25);
  --color-30: var(--orange-30);
  --color-35: var(--orange-35);
  --color-40: var(--orange-40);
  --color-45: var(--orange-45);
  --color-50: var(--orange-50);
  --color-55: var(--orange-55);
  --color-60: var(--orange-60);
  --color-65: var(--orange-65);
  --color-70: var(--orange-70);
  --color-75: var(--orange-75);
  --color-80: var(--orange-80);
  --color-85: var(--orange-85);
  --color-90: var(--orange-90);
  --color-95: var(--orange-95);
  --color-100: var(--orange-100);
}

.yellow {
  --color-0: var(--yellow-0);
  --color-5: var(--yellow-5);
  --color-10: var(--yellow-10);
  --color-15: var(--yellow-15);
  --color-20: var(--yellow-20);
  --color-25: var(--yellow-25);
  --color-30: var(--yellow-30);
  --color-35: var(--yellow-35);
  --color-40: var(--yellow-40);
  --color-45: var(--yellow-45);
  --color-50: var(--yellow-50);
  --color-55: var(--yellow-55);
  --color-60: var(--yellow-60);
  --color-65: var(--yellow-65);
  --color-70: var(--yellow-70);
  --color-75: var(--yellow-75);
  --color-80: var(--yellow-80);
  --color-85: var(--yellow-85);
  --color-90: var(--yellow-90);
  --color-95: var(--yellow-95);
  --color-100: var(--yellow-100);
}

.olive {
  --color-0: var(--olive-0);
  --color-5: var(--olive-5);
  --color-10: var(--olive-10);
  --color-15: var(--olive-15);
  --color-20: var(--olive-20);
  --color-25: var(--olive-25);
  --color-30: var(--olive-30);
  --color-35: var(--olive-35);
  --color-40: var(--olive-40);
  --color-45: var(--olive-45);
  --color-50: var(--olive-50);
  --color-55: var(--olive-55);
  --color-60: var(--olive-60);
  --color-65: var(--olive-65);
  --color-70: var(--olive-70);
  --color-75: var(--olive-75);
  --color-80: var(--olive-80);
  --color-85: var(--olive-85);
  --color-90: var(--olive-90);
  --color-95: var(--olive-95);
  --color-100: var(--olive-100);
}

.green {
  --color-0: var(--green-0);
  --color-5: var(--green-5);
  --color-10: var(--green-10);
  --color-15: var(--green-15);
  --color-20: var(--green-20);
  --color-25: var(--green-25);
  --color-30: var(--green-30);
  --color-35: var(--green-35);
  --color-40: var(--green-40);
  --color-45: var(--green-45);
  --color-50: var(--green-50);
  --color-55: var(--green-55);
  --color-60: var(--green-60);
  --color-65: var(--green-65);
  --color-70: var(--green-70);
  --color-75: var(--green-75);
  --color-80: var(--green-80);
  --color-85: var(--green-85);
  --color-90: var(--green-90);
  --color-95: var(--green-95);
  --color-100: var(--green-100);
}

.teal {
  --color-0: var(--teal-0);
  --color-5: var(--teal-5);
  --color-10: var(--teal-10);
  --color-15: var(--teal-15);
  --color-20: var(--teal-20);
  --color-25: var(--teal-25);
  --color-30: var(--teal-30);
  --color-35: var(--teal-35);
  --color-40: var(--teal-40);
  --color-45: var(--teal-45);
  --color-50: var(--teal-50);
  --color-55: var(--teal-55);
  --color-60: var(--teal-60);
  --color-65: var(--teal-65);
  --color-70: var(--teal-70);
  --color-75: var(--teal-75);
  --color-80: var(--teal-80);
  --color-85: var(--teal-85);
  --color-90: var(--teal-90);
  --color-95: var(--teal-95);
  --color-100: var(--teal-100);
}

.blue {
  --color-0: var(--blue-0);
  --color-5: var(--blue-5);
  --color-10: var(--blue-10);
  --color-15: var(--blue-15);
  --color-20: var(--blue-20);
  --color-25: var(--blue-25);
  --color-30: var(--blue-30);
  --color-35: var(--blue-35);
  --color-40: var(--blue-40);
  --color-45: var(--blue-45);
  --color-50: var(--blue-50);
  --color-55: var(--blue-55);
  --color-60: var(--blue-60);
  --color-65: var(--blue-65);
  --color-70: var(--blue-70);
  --color-75: var(--blue-75);
  --color-80: var(--blue-80);
  --color-85: var(--blue-85);
  --color-90: var(--blue-90);
  --color-95: var(--blue-95);
  --color-100: var(--blue-100);
}

.indigo {
  --color-0: var(--indigo-0);
  --color-5: var(--indigo-5);
  --color-10: var(--indigo-10);
  --color-15: var(--indigo-15);
  --color-20: var(--indigo-20);
  --color-25: var(--indigo-25);
  --color-30: var(--indigo-30);
  --color-35: var(--indigo-35);
  --color-40: var(--indigo-40);
  --color-45: var(--indigo-45);
  --color-50: var(--indigo-50);
  --color-55: var(--indigo-55);
  --color-60: var(--indigo-60);
  --color-65: var(--indigo-65);
  --color-70: var(--indigo-70);
  --color-75: var(--indigo-75);
  --color-80: var(--indigo-80);
  --color-85: var(--indigo-85);
  --color-90: var(--indigo-90);
  --color-95: var(--indigo-95);
  --color-100: var(--indigo-100);
}

.violet {
  --color-0: var(--violet-0);
  --color-5: var(--violet-5);
  --color-10: var(--violet-10);
  --color-15: var(--violet-15);
  --color-20: var(--violet-20);
  --color-25: var(--violet-25);
  --color-30: var(--violet-30);
  --color-35: var(--violet-35);
  --color-40: var(--violet-40);
  --color-45: var(--violet-45);
  --color-50: var(--violet-50);
  --color-55: var(--violet-55);
  --color-60: var(--violet-60);
  --color-65: var(--violet-65);
  --color-70: var(--violet-70);
  --color-75: var(--violet-75);
  --color-80: var(--violet-80);
  --color-85: var(--violet-85);
  --color-90: var(--violet-90);
  --color-95: var(--violet-95);
  --color-100: var(--violet-100);
}

.purple {
  --color-0: var(--purple-0);
  --color-5: var(--purple-5);
  --color-10: var(--purple-10);
  --color-15: var(--purple-15);
  --color-20: var(--purple-20);
  --color-25: var(--purple-25);
  --color-30: var(--purple-30);
  --color-35: var(--purple-35);
  --color-40: var(--purple-40);
  --color-45: var(--purple-45);
  --color-50: var(--purple-50);
  --color-55: var(--purple-55);
  --color-60: var(--purple-60);
  --color-65: var(--purple-65);
  --color-70: var(--purple-70);
  --color-75: var(--purple-75);
  --color-80: var(--purple-80);
  --color-85: var(--purple-85);
  --color-90: var(--purple-90);
  --color-95: var(--purple-95);
  --color-100: var(--purple-100);
}

.pink {
  --color-0: var(--pink-0);
  --color-5: var(--pink-5);
  --color-10: var(--pink-10);
  --color-15: var(--pink-15);
  --color-20: var(--pink-20);
  --color-25: var(--pink-25);
  --color-30: var(--pink-30);
  --color-35: var(--pink-35);
  --color-40: var(--pink-40);
  --color-45: var(--pink-45);
  --color-50: var(--pink-50);
  --color-55: var(--pink-55);
  --color-60: var(--pink-60);
  --color-65: var(--pink-65);
  --color-70: var(--pink-70);
  --color-75: var(--pink-75);
  --color-80: var(--pink-80);
  --color-85: var(--pink-85);
  --color-90: var(--pink-90);
  --color-95: var(--pink-95);
  --color-100: var(--pink-100);
}

.maroon {
  --color-0: var(--maroon-0);
  --color-5: var(--maroon-5);
  --color-10: var(--maroon-10);
  --color-15: var(--maroon-15);
  --color-20: var(--maroon-20);
  --color-25: var(--maroon-25);
  --color-30: var(--maroon-30);
  --color-35: var(--maroon-35);
  --color-40: var(--maroon-40);
  --color-45: var(--maroon-45);
  --color-50: var(--maroon-50);
  --color-55: var(--maroon-55);
  --color-60: var(--maroon-60);
  --color-65: var(--maroon-65);
  --color-70: var(--maroon-70);
  --color-75: var(--maroon-75);
  --color-80: var(--maroon-80);
  --color-85: var(--maroon-85);
  --color-90: var(--maroon-90);
  --color-95: var(--maroon-95);
  --color-100: var(--maroon-100);
}

.grey {
  --color-0: var(--grey-0);
  --color-5: var(--grey-5);
  --color-10: var(--grey-10);
  --color-15: var(--grey-15);
  --color-20: var(--grey-20);
  --color-25: var(--grey-25);
  --color-30: var(--grey-30);
  --color-35: var(--grey-35);
  --color-40: var(--grey-40);
  --color-45: var(--grey-45);
  --color-50: var(--grey-50);
  --color-55: var(--grey-55);
  --color-60: var(--grey-60);
  --color-65: var(--grey-65);
  --color-70: var(--grey-70);
  --color-75: var(--grey-75);
  --color-80: var(--grey-80);
  --color-85: var(--grey-85);
  --color-90: var(--grey-90);
  --color-95: var(--grey-95);
  --color-100: var(--grey-100);
}

.grey20 {
  --color-0: var(--grey20-0);
  --color-5: var(--grey20-5);
  --color-10: var(--grey20-10);
  --color-15: var(--grey20-15);
  --color-20: var(--grey20-20);
  --color-25: var(--grey20-25);
  --color-30: var(--grey20-30);
  --color-35: var(--grey20-35);
  --color-40: var(--grey20-40);
  --color-45: var(--grey20-45);
  --color-50: var(--grey20-50);
  --color-55: var(--grey20-55);
  --color-60: var(--grey20-60);
  --color-65: var(--grey20-65);
  --color-70: var(--grey20-70);
  --color-75: var(--grey20-75);
  --color-80: var(--grey20-80);
  --color-85: var(--grey20-85);
  --color-90: var(--grey20-90);
  --color-95: var(--grey20-95);
  --color-100: var(--grey20-100);
}

.grey40 {
  --color-0: var(--grey40-0);
  --color-5: var(--grey40-5);
  --color-10: var(--grey40-10);
  --color-15: var(--grey40-15);
  --color-20: var(--grey40-20);
  --color-25: var(--grey40-25);
  --color-30: var(--grey40-30);
  --color-35: var(--grey40-35);
  --color-40: var(--grey40-40);
  --color-45: var(--grey40-45);
  --color-50: var(--grey40-50);
  --color-55: var(--grey40-55);
  --color-60: var(--grey40-60);
  --color-65: var(--grey40-65);
  --color-70: var(--grey40-70);
  --color-75: var(--grey40-75);
  --color-80: var(--grey40-80);
  --color-85: var(--grey40-85);
  --color-90: var(--grey40-90);
  --color-95: var(--grey40-95);
  --color-100: var(--grey40-100);
}

.brand {
  --color-0: var(--blue-0);
  --color-5: var(--blue-5);
  --color-10: var(--blue-10);
  --color-15: var(--blue-15);
  --color-20: var(--blue-20);
  --color-25: var(--blue-25);
  --color-30: var(--blue-30);
  --color-35: var(--blue-35);
  --color-40: var(--blue-40);
  --color-45: var(--blue-45);
  --color-50: var(--blue-50);
  --color-55: var(--blue-55);
  --color-60: var(--blue-60);
  --color-65: var(--blue-65);
  --color-70: var(--blue-70);
  --color-75: var(--blue-75);
  --color-80: var(--blue-80);
  --color-85: var(--blue-85);
  --color-90: var(--blue-90);
  --color-95: var(--blue-95);
  --color-100: var(--blue-100);
}

.info {
  --color-0: var(--blue-0);
  --color-5: var(--blue-5);
  --color-10: var(--blue-10);
  --color-15: var(--blue-15);
  --color-20: var(--blue-20);
  --color-25: var(--blue-25);
  --color-30: var(--blue-30);
  --color-35: var(--blue-35);
  --color-40: var(--blue-40);
  --color-45: var(--blue-45);
  --color-50: var(--blue-50);
  --color-55: var(--blue-55);
  --color-60: var(--blue-60);
  --color-65: var(--blue-65);
  --color-70: var(--blue-70);
  --color-75: var(--blue-75);
  --color-80: var(--blue-80);
  --color-85: var(--blue-85);
  --color-90: var(--blue-90);
  --color-95: var(--blue-95);
  --color-100: var(--blue-100);
}

.success {
  --color-0: var(--green-0);
  --color-5: var(--green-5);
  --color-10: var(--green-10);
  --color-15: var(--green-15);
  --color-20: var(--green-20);
  --color-25: var(--green-25);
  --color-30: var(--green-30);
  --color-35: var(--green-35);
  --color-40: var(--green-40);
  --color-45: var(--green-45);
  --color-50: var(--green-50);
  --color-55: var(--green-55);
  --color-60: var(--green-60);
  --color-65: var(--green-65);
  --color-70: var(--green-70);
  --color-75: var(--green-75);
  --color-80: var(--green-80);
  --color-85: var(--green-85);
  --color-90: var(--green-90);
  --color-95: var(--green-95);
  --color-100: var(--green-100);
}

.warning {
  --color-0: var(--orange-0);
  --color-5: var(--orange-5);
  --color-10: var(--orange-10);
  --color-15: var(--orange-15);
  --color-20: var(--orange-20);
  --color-25: var(--orange-25);
  --color-30: var(--orange-30);
  --color-35: var(--orange-35);
  --color-40: var(--orange-40);
  --color-45: var(--orange-45);
  --color-50: var(--orange-50);
  --color-55: var(--orange-55);
  --color-60: var(--orange-60);
  --color-65: var(--orange-65);
  --color-70: var(--orange-70);
  --color-75: var(--orange-75);
  --color-80: var(--orange-80);
  --color-85: var(--orange-85);
  --color-90: var(--orange-90);
  --color-95: var(--orange-95);
  --color-100: var(--orange-100);
}

.error {
  --color-0: var(--red-0);
  --color-5: var(--red-5);
  --color-10: var(--red-10);
  --color-15: var(--red-15);
  --color-20: var(--red-20);
  --color-25: var(--red-25);
  --color-30: var(--red-30);
  --color-35: var(--red-35);
  --color-40: var(--red-40);
  --color-45: var(--red-45);
  --color-50: var(--red-50);
  --color-55: var(--red-55);
  --color-60: var(--red-60);
  --color-65: var(--red-65);
  --color-70: var(--red-70);
  --color-75: var(--red-75);
  --color-80: var(--red-80);
  --color-85: var(--red-85);
  --color-90: var(--red-90);
  --color-95: var(--red-95);
  --color-100: var(--red-100);
}

/* utilities/all.scss */
/* utilities/reset.scss */
html, body {
  box-sizing: border-box;
}

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

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  padding: 0 0 0 1em;
}

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

input[type=text],
input[type=email],
input[type=search],
input[type=password] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*-- utilities/alignment.scss --*/
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.block-left, .block-center {
  margin-right: auto;
}

.block-right, .block-center {
  margin-left: auto;
}

/* utilities/borders.scss */
:where(.border) {
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--color-75);
  --border-radius: 0;
}

:where([data-theme=dark] .border) {
  --border-color: var(--color-25);
}

.border {
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
}

.bdw-0 {
  --border-width: 0px;
}

.bdw-1 {
  --border-width: 1px;
}

.bdw-2 {
  --border-width: 2px;
}

.bdw-3 {
  --border-width: 3px;
}

.bdw-4 {
  --border-width: 4px;
}

.bdw-5 {
  --border-width: 5px;
}

.bdw-6 {
  --border-width: 6px;
}

.bdw-8 {
  --border-width: 8px;
}

.bdw-10 {
  --border-width: 10px;
}

:where(html) {
  --border-radius: 0.25rem;
}

:is([class*=bdr-], .radius) {
  --radius-top-left: var(--border-radius);
  --radius-top-right: var(--border-radius);
  --radius-bottom-left: var(--border-radius);
  --radius-bottom-right: var(--border-radius);
  border-radius: var(--radius-top-left) var(--radius-top-right) var(--radius-bottom-right) var(--radius-bottom-left);
}

.square {
  --border-radius: 0px !important;
}

.bdr-0 {
  --border-radius: calc(var(--unit-radius) * 0);
}

.bdr-t-0,
.bdr-l-0,
.bdr-tl-0 {
  --radius-top-left: calc(var(--unit-radius) * 0);
}

.bdr-t-0,
.bdr-r-0,
.bdr-tr-0 {
  --radius-top-right: calc(var(--unit-radius) * 0);
}

.bdr-b-0,
.bdr-l-0,
.bdr-bl-0 {
  --radius-bottom-left: calc(var(--unit-radius) * 0);
}

.bdr-b-0,
.bdr-r-0,
.bdr-br-0 {
  --radius-bottom-right: calc(var(--unit-radius) * 0);
}

.bdr-1 {
  --border-radius: calc(var(--unit-radius) * 1);
}

.bdr-t-1,
.bdr-l-1,
.bdr-tl-1 {
  --radius-top-left: calc(var(--unit-radius) * 1);
}

.bdr-t-1,
.bdr-r-1,
.bdr-tr-1 {
  --radius-top-right: calc(var(--unit-radius) * 1);
}

.bdr-b-1,
.bdr-l-1,
.bdr-bl-1 {
  --radius-bottom-left: calc(var(--unit-radius) * 1);
}

.bdr-b-1,
.bdr-r-1,
.bdr-br-1 {
  --radius-bottom-right: calc(var(--unit-radius) * 1);
}

.bdr-2 {
  --border-radius: calc(var(--unit-radius) * 2);
}

.bdr-t-2,
.bdr-l-2,
.bdr-tl-2 {
  --radius-top-left: calc(var(--unit-radius) * 2);
}

.bdr-t-2,
.bdr-r-2,
.bdr-tr-2 {
  --radius-top-right: calc(var(--unit-radius) * 2);
}

.bdr-b-2,
.bdr-l-2,
.bdr-bl-2 {
  --radius-bottom-left: calc(var(--unit-radius) * 2);
}

.bdr-b-2,
.bdr-r-2,
.bdr-br-2 {
  --radius-bottom-right: calc(var(--unit-radius) * 2);
}

.bdr-3 {
  --border-radius: calc(var(--unit-radius) * 3);
}

.bdr-t-3,
.bdr-l-3,
.bdr-tl-3 {
  --radius-top-left: calc(var(--unit-radius) * 3);
}

.bdr-t-3,
.bdr-r-3,
.bdr-tr-3 {
  --radius-top-right: calc(var(--unit-radius) * 3);
}

.bdr-b-3,
.bdr-l-3,
.bdr-bl-3 {
  --radius-bottom-left: calc(var(--unit-radius) * 3);
}

.bdr-b-3,
.bdr-r-3,
.bdr-br-3 {
  --radius-bottom-right: calc(var(--unit-radius) * 3);
}

.bdr-4 {
  --border-radius: calc(var(--unit-radius) * 4);
}

.bdr-t-4,
.bdr-l-4,
.bdr-tl-4 {
  --radius-top-left: calc(var(--unit-radius) * 4);
}

.bdr-t-4,
.bdr-r-4,
.bdr-tr-4 {
  --radius-top-right: calc(var(--unit-radius) * 4);
}

.bdr-b-4,
.bdr-l-4,
.bdr-bl-4 {
  --radius-bottom-left: calc(var(--unit-radius) * 4);
}

.bdr-b-4,
.bdr-r-4,
.bdr-br-4 {
  --radius-bottom-right: calc(var(--unit-radius) * 4);
}

.bdr-5 {
  --border-radius: calc(var(--unit-radius) * 5);
}

.bdr-t-5,
.bdr-l-5,
.bdr-tl-5 {
  --radius-top-left: calc(var(--unit-radius) * 5);
}

.bdr-t-5,
.bdr-r-5,
.bdr-tr-5 {
  --radius-top-right: calc(var(--unit-radius) * 5);
}

.bdr-b-5,
.bdr-l-5,
.bdr-bl-5 {
  --radius-bottom-left: calc(var(--unit-radius) * 5);
}

.bdr-b-5,
.bdr-r-5,
.bdr-br-5 {
  --radius-bottom-right: calc(var(--unit-radius) * 5);
}

.bdr-6 {
  --border-radius: calc(var(--unit-radius) * 6);
}

.bdr-t-6,
.bdr-l-6,
.bdr-tl-6 {
  --radius-top-left: calc(var(--unit-radius) * 6);
}

.bdr-t-6,
.bdr-r-6,
.bdr-tr-6 {
  --radius-top-right: calc(var(--unit-radius) * 6);
}

.bdr-b-6,
.bdr-l-6,
.bdr-bl-6 {
  --radius-bottom-left: calc(var(--unit-radius) * 6);
}

.bdr-b-6,
.bdr-r-6,
.bdr-br-6 {
  --radius-bottom-right: calc(var(--unit-radius) * 6);
}

.bdr-8 {
  --border-radius: calc(var(--unit-radius) * 8);
}

.bdr-t-8,
.bdr-l-8,
.bdr-tl-8 {
  --radius-top-left: calc(var(--unit-radius) * 8);
}

.bdr-t-8,
.bdr-r-8,
.bdr-tr-8 {
  --radius-top-right: calc(var(--unit-radius) * 8);
}

.bdr-b-8,
.bdr-l-8,
.bdr-bl-8 {
  --radius-bottom-left: calc(var(--unit-radius) * 8);
}

.bdr-b-8,
.bdr-r-8,
.bdr-br-8 {
  --radius-bottom-right: calc(var(--unit-radius) * 8);
}

.bdr-10 {
  --border-radius: calc(var(--unit-radius) * 10);
}

.bdr-t-10,
.bdr-l-10,
.bdr-tl-10 {
  --radius-top-left: calc(var(--unit-radius) * 10);
}

.bdr-t-10,
.bdr-r-10,
.bdr-tr-10 {
  --radius-top-right: calc(var(--unit-radius) * 10);
}

.bdr-b-10,
.bdr-l-10,
.bdr-bl-10 {
  --radius-bottom-left: calc(var(--unit-radius) * 10);
}

.bdr-b-10,
.bdr-r-10,
.bdr-br-10 {
  --radius-bottom-right: calc(var(--unit-radius) * 10);
}

.bdc-0 {
  --border-color: var(--color-0);
}

.bdc-5 {
  --border-color: var(--color-5);
}

.bdc-10 {
  --border-color: var(--color-10);
}

.bdc-15 {
  --border-color: var(--color-15);
}

.bdc-20 {
  --border-color: var(--color-20);
}

.bdc-25 {
  --border-color: var(--color-25);
}

.bdc-30 {
  --border-color: var(--color-30);
}

.bdc-35 {
  --border-color: var(--color-35);
}

.bdc-40 {
  --border-color: var(--color-40);
}

.bdc-45 {
  --border-color: var(--color-45);
}

.bdc-50 {
  --border-color: var(--color-50);
}

.bdc-55 {
  --border-color: var(--color-55);
}

.bdc-60 {
  --border-color: var(--color-60);
}

.bdc-65 {
  --border-color: var(--color-65);
}

.bdc-70 {
  --border-color: var(--color-70);
}

.bdc-75 {
  --border-color: var(--color-75);
}

.bdc-80 {
  --border-color: var(--color-80);
}

.bdc-85 {
  --border-color: var(--color-85);
}

.bdc-90 {
  --border-color: var(--color-90);
}

.bdc-95 {
  --border-color: var(--color-95);
}

.bdc-100 {
  --border-color: var(--color-100);
}

[data-theme=dark] .bdd-0 {
  --border-color: var(--color-0);
}
[data-theme=dark] .bdd-5 {
  --border-color: var(--color-5);
}
[data-theme=dark] .bdd-10 {
  --border-color: var(--color-10);
}
[data-theme=dark] .bdd-15 {
  --border-color: var(--color-15);
}
[data-theme=dark] .bdd-20 {
  --border-color: var(--color-20);
}
[data-theme=dark] .bdd-25 {
  --border-color: var(--color-25);
}
[data-theme=dark] .bdd-30 {
  --border-color: var(--color-30);
}
[data-theme=dark] .bdd-35 {
  --border-color: var(--color-35);
}
[data-theme=dark] .bdd-40 {
  --border-color: var(--color-40);
}
[data-theme=dark] .bdd-45 {
  --border-color: var(--color-45);
}
[data-theme=dark] .bdd-50 {
  --border-color: var(--color-50);
}
[data-theme=dark] .bdd-55 {
  --border-color: var(--color-55);
}
[data-theme=dark] .bdd-60 {
  --border-color: var(--color-60);
}
[data-theme=dark] .bdd-65 {
  --border-color: var(--color-65);
}
[data-theme=dark] .bdd-70 {
  --border-color: var(--color-70);
}
[data-theme=dark] .bdd-75 {
  --border-color: var(--color-75);
}
[data-theme=dark] .bdd-80 {
  --border-color: var(--color-80);
}
[data-theme=dark] .bdd-85 {
  --border-color: var(--color-85);
}
[data-theme=dark] .bdd-90 {
  --border-color: var(--color-90);
}
[data-theme=dark] .bdd-95 {
  --border-color: var(--color-95);
}
[data-theme=dark] .bdd-100 {
  --border-color: var(--color-100);
}

/*-- utilities/breakpoints.scss --*/
.mobile {
  max-width: 30rem;
}

.mobile-width:before {
  content: "30rem";
}

.tablet {
  max-width: 45rem;
}

.tablet-width:before {
  content: "45rem";
}

.laptop {
  max-width: 60rem;
}

.laptop-width:before {
  content: "60rem";
}

.desktop {
  max-width: 75rem;
}

.desktop-width:before {
  content: "75rem";
}

.widescreen {
  max-width: 90rem;
}

.widescreen-width:before {
  content: "90rem";
}

.lt-mobile,
.lt-tablet,
.lt-laptop,
.lt-desktop,
.lt-widescreen {
  display: none;
}

@media only screen and (max-width: 30rem) {
  .gt-mobile {
    display: none !important;
  }
  .lt-mobile {
    display: block !important;
  }
}
@media only screen and (max-width: 45rem) {
  .gt-tablet {
    display: none !important;
  }
  .lt-tablet {
    display: block !important;
  }
}
@media only screen and (max-width: 60rem) {
  .gt-laptop {
    display: none !important;
  }
  .lt-laptop {
    display: block !important;
  }
}
@media only screen and (max-width: 75rem) {
  .gt-desktop {
    display: none !important;
  }
  .lt-desktop {
    display: block !important;
  }
}
@media only screen and (max-width: 90rem) {
  .gt-widescreen {
    display: none !important;
  }
  .lt-widescreen {
    display: block !important;
  }
}
/*-- utilities/color.scss --*/
:where(html) {
  --color: var(--color-30);
  --color-none: transparent;
  --heading-color: var(--color-20);
  --background-color: var(--color-100);
}

.inverse {
  --inverse-color: var(--color-100);
  --inverse-background: var(--color-50);
  color: var(--inverse-color);
  background-color: var(--inverse-background);
}
.inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .inverse h6 {
  color: var(--inverse-color);
}

[class*=fgc-] {
  color: var(--color);
}

[class*=bgc-] {
  background-color: var(--background-color);
}

[class*=hdc-] h1, [class*=hdc-] h2, [class*=hdc-] h3, [class*=hdc-] h4, [class*=hdc-] h5, [class*=hdc-] h6, [class*=hdc-] .head {
  color: var(--heading-color);
}

.fgc-0 {
  --color: var(--color-0);
}

.bgc-0 {
  --background-color: var(--color-0);
}

.hdc-0 {
  --heading-color: var(--color-0);
}

.fgc-5 {
  --color: var(--color-5);
}

.bgc-5 {
  --background-color: var(--color-5);
}

.hdc-5 {
  --heading-color: var(--color-5);
}

.fgc-10 {
  --color: var(--color-10);
}

.bgc-10 {
  --background-color: var(--color-10);
}

.hdc-10 {
  --heading-color: var(--color-10);
}

.fgc-15 {
  --color: var(--color-15);
}

.bgc-15 {
  --background-color: var(--color-15);
}

.hdc-15 {
  --heading-color: var(--color-15);
}

.fgc-20 {
  --color: var(--color-20);
}

.bgc-20 {
  --background-color: var(--color-20);
}

.hdc-20 {
  --heading-color: var(--color-20);
}

.fgc-25 {
  --color: var(--color-25);
}

.bgc-25 {
  --background-color: var(--color-25);
}

.hdc-25 {
  --heading-color: var(--color-25);
}

.fgc-30 {
  --color: var(--color-30);
}

.bgc-30 {
  --background-color: var(--color-30);
}

.hdc-30 {
  --heading-color: var(--color-30);
}

.fgc-35 {
  --color: var(--color-35);
}

.bgc-35 {
  --background-color: var(--color-35);
}

.hdc-35 {
  --heading-color: var(--color-35);
}

.fgc-40 {
  --color: var(--color-40);
}

.bgc-40 {
  --background-color: var(--color-40);
}

.hdc-40 {
  --heading-color: var(--color-40);
}

.fgc-45 {
  --color: var(--color-45);
}

.bgc-45 {
  --background-color: var(--color-45);
}

.hdc-45 {
  --heading-color: var(--color-45);
}

.fgc-50 {
  --color: var(--color-50);
}

.bgc-50 {
  --background-color: var(--color-50);
}

.hdc-50 {
  --heading-color: var(--color-50);
}

.fgc-55 {
  --color: var(--color-55);
}

.bgc-55 {
  --background-color: var(--color-55);
}

.hdc-55 {
  --heading-color: var(--color-55);
}

.fgc-60 {
  --color: var(--color-60);
}

.bgc-60 {
  --background-color: var(--color-60);
}

.hdc-60 {
  --heading-color: var(--color-60);
}

.fgc-65 {
  --color: var(--color-65);
}

.bgc-65 {
  --background-color: var(--color-65);
}

.hdc-65 {
  --heading-color: var(--color-65);
}

.fgc-70 {
  --color: var(--color-70);
}

.bgc-70 {
  --background-color: var(--color-70);
}

.hdc-70 {
  --heading-color: var(--color-70);
}

.fgc-75 {
  --color: var(--color-75);
}

.bgc-75 {
  --background-color: var(--color-75);
}

.hdc-75 {
  --heading-color: var(--color-75);
}

.fgc-80 {
  --color: var(--color-80);
}

.bgc-80 {
  --background-color: var(--color-80);
}

.hdc-80 {
  --heading-color: var(--color-80);
}

.fgc-85 {
  --color: var(--color-85);
}

.bgc-85 {
  --background-color: var(--color-85);
}

.hdc-85 {
  --heading-color: var(--color-85);
}

.fgc-90 {
  --color: var(--color-90);
}

.bgc-90 {
  --background-color: var(--color-90);
}

.hdc-90 {
  --heading-color: var(--color-90);
}

.fgc-95 {
  --color: var(--color-95);
}

.bgc-95 {
  --background-color: var(--color-95);
}

.hdc-95 {
  --heading-color: var(--color-95);
}

.fgc-100 {
  --color: var(--color-100);
}

.bgc-100 {
  --background-color: var(--color-100);
}

.hdc-100 {
  --heading-color: var(--color-100);
}

[data-theme=dark] .inverse {
  --inverse-background: var(--color-40);
}
[data-theme=dark] [class*=fgd-] {
  color: var(--color);
}
[data-theme=dark] [class*=bgd-] {
  background-color: var(--background-color);
}
[data-theme=dark] [class*=hdd-] h1, [data-theme=dark] [class*=hdd-] h2, [data-theme=dark] [class*=hdd-] h3, [data-theme=dark] [class*=hdd-] h4, [data-theme=dark] [class*=hdd-] h5, [data-theme=dark] [class*=hdd-] h6, [data-theme=dark] [class*=hdd-] .head {
  color: var(--heading-color);
}
[data-theme=dark] .fgd-0 {
  --color: var(--color-0);
}
[data-theme=dark] .bgd-0 {
  --background-color: var(--color-0);
}
[data-theme=dark] .hdd-0 {
  --heading-color: var(--color-0);
}
[data-theme=dark] .fgd-5 {
  --color: var(--color-5);
}
[data-theme=dark] .bgd-5 {
  --background-color: var(--color-5);
}
[data-theme=dark] .hdd-5 {
  --heading-color: var(--color-5);
}
[data-theme=dark] .fgd-10 {
  --color: var(--color-10);
}
[data-theme=dark] .bgd-10 {
  --background-color: var(--color-10);
}
[data-theme=dark] .hdd-10 {
  --heading-color: var(--color-10);
}
[data-theme=dark] .fgd-15 {
  --color: var(--color-15);
}
[data-theme=dark] .bgd-15 {
  --background-color: var(--color-15);
}
[data-theme=dark] .hdd-15 {
  --heading-color: var(--color-15);
}
[data-theme=dark] .fgd-20 {
  --color: var(--color-20);
}
[data-theme=dark] .bgd-20 {
  --background-color: var(--color-20);
}
[data-theme=dark] .hdd-20 {
  --heading-color: var(--color-20);
}
[data-theme=dark] .fgd-25 {
  --color: var(--color-25);
}
[data-theme=dark] .bgd-25 {
  --background-color: var(--color-25);
}
[data-theme=dark] .hdd-25 {
  --heading-color: var(--color-25);
}
[data-theme=dark] .fgd-30 {
  --color: var(--color-30);
}
[data-theme=dark] .bgd-30 {
  --background-color: var(--color-30);
}
[data-theme=dark] .hdd-30 {
  --heading-color: var(--color-30);
}
[data-theme=dark] .fgd-35 {
  --color: var(--color-35);
}
[data-theme=dark] .bgd-35 {
  --background-color: var(--color-35);
}
[data-theme=dark] .hdd-35 {
  --heading-color: var(--color-35);
}
[data-theme=dark] .fgd-40 {
  --color: var(--color-40);
}
[data-theme=dark] .bgd-40 {
  --background-color: var(--color-40);
}
[data-theme=dark] .hdd-40 {
  --heading-color: var(--color-40);
}
[data-theme=dark] .fgd-45 {
  --color: var(--color-45);
}
[data-theme=dark] .bgd-45 {
  --background-color: var(--color-45);
}
[data-theme=dark] .hdd-45 {
  --heading-color: var(--color-45);
}
[data-theme=dark] .fgd-50 {
  --color: var(--color-50);
}
[data-theme=dark] .bgd-50 {
  --background-color: var(--color-50);
}
[data-theme=dark] .hdd-50 {
  --heading-color: var(--color-50);
}
[data-theme=dark] .fgd-55 {
  --color: var(--color-55);
}
[data-theme=dark] .bgd-55 {
  --background-color: var(--color-55);
}
[data-theme=dark] .hdd-55 {
  --heading-color: var(--color-55);
}
[data-theme=dark] .fgd-60 {
  --color: var(--color-60);
}
[data-theme=dark] .bgd-60 {
  --background-color: var(--color-60);
}
[data-theme=dark] .hdd-60 {
  --heading-color: var(--color-60);
}
[data-theme=dark] .fgd-65 {
  --color: var(--color-65);
}
[data-theme=dark] .bgd-65 {
  --background-color: var(--color-65);
}
[data-theme=dark] .hdd-65 {
  --heading-color: var(--color-65);
}
[data-theme=dark] .fgd-70 {
  --color: var(--color-70);
}
[data-theme=dark] .bgd-70 {
  --background-color: var(--color-70);
}
[data-theme=dark] .hdd-70 {
  --heading-color: var(--color-70);
}
[data-theme=dark] .fgd-75 {
  --color: var(--color-75);
}
[data-theme=dark] .bgd-75 {
  --background-color: var(--color-75);
}
[data-theme=dark] .hdd-75 {
  --heading-color: var(--color-75);
}
[data-theme=dark] .fgd-80 {
  --color: var(--color-80);
}
[data-theme=dark] .bgd-80 {
  --background-color: var(--color-80);
}
[data-theme=dark] .hdd-80 {
  --heading-color: var(--color-80);
}
[data-theme=dark] .fgd-85 {
  --color: var(--color-85);
}
[data-theme=dark] .bgd-85 {
  --background-color: var(--color-85);
}
[data-theme=dark] .hdd-85 {
  --heading-color: var(--color-85);
}
[data-theme=dark] .fgd-90 {
  --color: var(--color-90);
}
[data-theme=dark] .bgd-90 {
  --background-color: var(--color-90);
}
[data-theme=dark] .hdd-90 {
  --heading-color: var(--color-90);
}
[data-theme=dark] .fgd-95 {
  --color: var(--color-95);
}
[data-theme=dark] .bgd-95 {
  --background-color: var(--color-95);
}
[data-theme=dark] .hdd-95 {
  --heading-color: var(--color-95);
}
[data-theme=dark] .fgd-100 {
  --color: var(--color-100);
}
[data-theme=dark] .bgd-100 {
  --background-color: var(--color-100);
}
[data-theme=dark] .hdd-100 {
  --heading-color: var(--color-100);
}

/*-- utilities/columns --*/
:where(html) {
  --column-orphans: 3;
  --column-gap: 2rem;
}

.columns-1:not(.wide) {
  --columns: 1;
}

.columns-2:not(.wide) {
  --columns: 2;
}

.columns-3:not(.wide) {
  --columns: 3;
}

.columns-4:not(.wide) {
  --columns: 4;
}

.columns-5:not(.wide) {
  --columns: 5;
}

[class*=columns-] {
  columns: var(--columns);
  orphans: var(--column-orphans);
  column-gap: var(--column-gap);
}
[class*=columns-] > * {
  orphans: var(--column-orphans);
}

.conform, [class*=conform-] {
  --pad: 2rem;
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --width: 100%;
  --popout: minmax(0, var(--pad));
  --feature: minmax(0, calc(var(--pad) * 2));
  --content: min(100% - (var(--gap) * 2), var(--width));
  display: grid;
  grid-template-columns: [full-width-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
}
.conform > *, [class*=conform-] > * {
  grid-column: content;
}
.conform .full-width, [class*=conform-] .full-width {
  grid-column: full-width;
}
.conform .feature, .conform .popout, [class*=conform-] .feature, [class*=conform-] .popout {
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.conform .feature, [class*=conform-] .feature {
  grid-column: feature;
}
.conform .popout, [class*=conform-] .popout {
  grid-column: popout;
}
.conform .content, [class*=conform-] .content {
  grid-column: popout;
}

[data-theme=dark] {
  color-scheme: dark;
}

[data-theme=light] {
  color-scheme: light;
}

/*-- utilities/display.scss --*/
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

/*
.row {
  display: flow-root
}
.tr {
  display: table
}
.td {
  display: table-cell;
  // vertical-align: top;
}
*/
/*-- utilities/flex.scss --*/
.flex {
  display: flex !important;
}
.flex.row {
  flex-direction: row;
}
.flex.column {
  flex-direction: column;
}
.flex.stretch {
  align-items: stretch;
}
.flex.top, .flex.start {
  align-items: flex-start;
}
.flex.baseline {
  align-items: baseline;
}
.flex.middle {
  align-items: center !important;
}
.flex.bottom, .flex.end {
  align-items: flex-end;
}
.flex.left {
  justify-content: flex-start;
}
.flex.center {
  justify-content: center;
}
.flex.right {
  justify-content: flex-end;
}
.flex.space {
  justify-content: space-between;
}
.flex.evenly {
  justify-content: space-evenly;
}
.flex.across {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex .rigid {
  flex: 0 0 auto;
}
.flex .shrink {
  flex-shrink: 1;
}
.flex .grow {
  flex-grow: 1;
}

.flex-inflexible {
  flex: 0 0 auto;
}

.flex-flexible {
  flex: 1 1 auto;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-grow {
  flex-grow: 1;
}

/* utilities/fonts.scss */
:where(html) {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}

.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

/*-- utilities/gradients --*/
:where(.gradient) {
  --gradient-from: var(--color-40);
  --gradient-to: var(--color-60);
  --gradient-angle: 0deg;
}

.gradient {
  background: linear-gradient(var(--gradient-angle) in hsl, var(--gradient-from), var(--gradient-to));
}

.angle-0 {
  --gradient-angle: 0deg;
}

.angle-30 {
  --gradient-angle: 30deg;
}

.angle-45 {
  --gradient-angle: 45deg;
}

.angle-60 {
  --gradient-angle: 60deg;
}

.angle-90 {
  --gradient-angle: 90deg;
}

.angle-120 {
  --gradient-angle: 120deg;
}

.angle-135 {
  --gradient-angle: 135deg;
}

.angle-150 {
  --gradient-angle: 150deg;
}

.angle-180 {
  --gradient-angle: 180deg;
}

.angle-210 {
  --gradient-angle: 210deg;
}

.angle-225 {
  --gradient-angle: 225deg;
}

.angle-240 {
  --gradient-angle: 240deg;
}

.angle-270 {
  --gradient-angle: 270deg;
}

.angle-300 {
  --gradient-angle: 300deg;
}

.angle-330 {
  --gradient-angle: 330deg;
}

:where([data-theme=dark] .gradient) {
  --gradient-from: var(--color-50);
  --gradient-to: var(--color-30);
}

/*-- utilities/grid.scss --*/
:where(html) {
  --gap: 0
  --row-gap: 0
  --column-gap: 0
  --grid-columns: 1;
}

.grid, [class*=grid-] {
  display: grid;
}
.grid.stretch, [class*=grid-].stretch {
  align-items: stretch;
}
.grid.top, .grid.start, [class*=grid-].top, [class*=grid-].start {
  align-items: start;
}
.grid.baseline, [class*=grid-].baseline {
  align-items: baseline;
}
.grid.middle, [class*=grid-].middle {
  align-items: center;
}
.grid.bottom, .grid.end, [class*=grid-].bottom, [class*=grid-].end {
  align-items: end;
}
.grid.overlap > *, [class*=grid-].overlap > * {
  grid-area: 1/1;
}
.grid > .cols-2, [class*=grid-] > .cols-2 {
  grid-column: auto/span 2;
}
.grid > .rows-2, [class*=grid-] > .rows-2 {
  grid-row: auto/span 2;
}
.grid > .cols-3, [class*=grid-] > .cols-3 {
  grid-column: auto/span 3;
}
.grid > .rows-3, [class*=grid-] > .rows-3 {
  grid-row: auto/span 3;
}
.grid > .cols-4, [class*=grid-] > .cols-4 {
  grid-column: auto/span 4;
}
.grid > .rows-4, [class*=grid-] > .rows-4 {
  grid-row: auto/span 4;
}
.grid > .cols-5, [class*=grid-] > .cols-5 {
  grid-column: auto/span 5;
}
.grid > .rows-5, [class*=grid-] > .rows-5 {
  grid-row: auto/span 5;
}
.grid > .cols-6, [class*=grid-] > .cols-6 {
  grid-column: auto/span 6;
}
.grid > .rows-6, [class*=grid-] > .rows-6 {
  grid-row: auto/span 6;
}
.grid > .cols-7, [class*=grid-] > .cols-7 {
  grid-column: auto/span 7;
}
.grid > .rows-7, [class*=grid-] > .rows-7 {
  grid-row: auto/span 7;
}
.grid > .cols-8, [class*=grid-] > .cols-8 {
  grid-column: auto/span 8;
}
.grid > .rows-8, [class*=grid-] > .rows-8 {
  grid-row: auto/span 8;
}
.grid > .cols-9, [class*=grid-] > .cols-9 {
  grid-column: auto/span 9;
}
.grid > .rows-9, [class*=grid-] > .rows-9 {
  grid-row: auto/span 9;
}
.grid > .cols-10, [class*=grid-] > .cols-10 {
  grid-column: auto/span 10;
}
.grid > .rows-10, [class*=grid-] > .rows-10 {
  grid-row: auto/span 10;
}
.grid > .cols-11, [class*=grid-] > .cols-11 {
  grid-column: auto/span 11;
}
.grid > .rows-11, [class*=grid-] > .rows-11 {
  grid-row: auto/span 11;
}
.grid > .cols-12, [class*=grid-] > .cols-12 {
  grid-column: auto/span 12;
}
.grid > .rows-12, [class*=grid-] > .rows-12 {
  grid-row: auto/span 12;
}
.grid > .cols-13, [class*=grid-] > .cols-13 {
  grid-column: auto/span 13;
}
.grid > .rows-13, [class*=grid-] > .rows-13 {
  grid-row: auto/span 13;
}
.grid > .cols-14, [class*=grid-] > .cols-14 {
  grid-column: auto/span 14;
}
.grid > .rows-14, [class*=grid-] > .rows-14 {
  grid-row: auto/span 14;
}
.grid > .cols-15, [class*=grid-] > .cols-15 {
  grid-column: auto/span 15;
}
.grid > .rows-15, [class*=grid-] > .rows-15 {
  grid-row: auto/span 15;
}
.grid > .cols-16, [class*=grid-] > .cols-16 {
  grid-column: auto/span 16;
}
.grid > .rows-16, [class*=grid-] > .rows-16 {
  grid-row: auto/span 16;
}

[class*=grid-] {
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}

.grid-1 {
  --grid-columns: 1;
}

.grid-2 {
  --grid-columns: 2;
}

.grid-3 {
  --grid-columns: 3;
}

.grid-4 {
  --grid-columns: 4;
}

.grid-5 {
  --grid-columns: 5;
}

.grid-6 {
  --grid-columns: 6;
}

.grid-7 {
  --grid-columns: 7;
}

.grid-8 {
  --grid-columns: 8;
}

.grid-9 {
  --grid-columns: 9;
}

.grid-10 {
  --grid-columns: 10;
}

.grid-11 {
  --grid-columns: 11;
}

.grid-12 {
  --grid-columns: 12;
}

.grid-13 {
  --grid-columns: 13;
}

.grid-14 {
  --grid-columns: 14;
}

.grid-15 {
  --grid-columns: 15;
}

.grid-16 {
  --grid-columns: 16;
}

.grid-fit {
  --min-width: 100px;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));
}

.grid-fill {
  --min-width: 100px;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
}

.gap-none {
  --gap: 0;
}

.gap-h-none {
  --column-gap: 0;
}

.gap-v-none {
  --row-gap: 0;
}

.gap-0 {
  --gap: 0rem;
}

.gap-h-0 {
  --column-gap: 0rem;
}

.gap-v-0 {
  --row-gap: 0rem;
}

.gap-1 {
  --gap: 0.25rem;
}

.gap-h-1 {
  --column-gap: 0.25rem;
}

.gap-v-1 {
  --row-gap: 0.25rem;
}

.gap-2 {
  --gap: 0.5rem;
}

.gap-h-2 {
  --column-gap: 0.5rem;
}

.gap-v-2 {
  --row-gap: 0.5rem;
}

.gap-3 {
  --gap: 0.75rem;
}

.gap-h-3 {
  --column-gap: 0.75rem;
}

.gap-v-3 {
  --row-gap: 0.75rem;
}

.gap-4 {
  --gap: 1rem;
}

.gap-h-4 {
  --column-gap: 1rem;
}

.gap-v-4 {
  --row-gap: 1rem;
}

.gap-5 {
  --gap: 1.25rem;
}

.gap-h-5 {
  --column-gap: 1.25rem;
}

.gap-v-5 {
  --row-gap: 1.25rem;
}

.gap-6 {
  --gap: 1.5rem;
}

.gap-h-6 {
  --column-gap: 1.5rem;
}

.gap-v-6 {
  --row-gap: 1.5rem;
}

.gap-7 {
  --gap: 1.75rem;
}

.gap-h-7 {
  --column-gap: 1.75rem;
}

.gap-v-7 {
  --row-gap: 1.75rem;
}

.gap-8 {
  --gap: 2rem;
}

.gap-h-8 {
  --column-gap: 2rem;
}

.gap-v-8 {
  --row-gap: 2rem;
}

.gap-9 {
  --gap: 2.25rem;
}

.gap-h-9 {
  --column-gap: 2.25rem;
}

.gap-v-9 {
  --row-gap: 2.25rem;
}

.gap-10 {
  --gap: 2.5rem;
}

.gap-h-10 {
  --column-gap: 2.5rem;
}

.gap-v-10 {
  --row-gap: 2.5rem;
}

.gap-11 {
  --gap: 2.75rem;
}

.gap-h-11 {
  --column-gap: 2.75rem;
}

.gap-v-11 {
  --row-gap: 2.75rem;
}

.gap-12 {
  --gap: 3rem;
}

.gap-h-12 {
  --column-gap: 3rem;
}

.gap-v-12 {
  --row-gap: 3rem;
}

.gap-13 {
  --gap: 3.25rem;
}

.gap-h-13 {
  --column-gap: 3.25rem;
}

.gap-v-13 {
  --row-gap: 3.25rem;
}

.gap-14 {
  --gap: 3.5rem;
}

.gap-h-14 {
  --column-gap: 3.5rem;
}

.gap-v-14 {
  --row-gap: 3.5rem;
}

.gap-15 {
  --gap: 3.75rem;
}

.gap-h-15 {
  --column-gap: 3.75rem;
}

.gap-v-15 {
  --row-gap: 3.75rem;
}

.gap-16 {
  --gap: 4rem;
}

.gap-h-16 {
  --column-gap: 4rem;
}

.gap-v-16 {
  --row-gap: 4rem;
}

[class*=gap-] {
  gap: var(--gap);
}

[class*=gap-h-] {
  column-gap: var(--column-gap);
}

[class*=gap-v-] {
  row-gap: var(--row-gap);
}

/*-- utilities/layout.scss --*/
.hidden {
  display: none;
}

.nowrap {
  white-space: nowrap;
}

/*-- utilities/position.scss --*/
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

/*-- utilities/scroll.scss --*/
.scroll-x {
  width: auto;
  min-width: 100%;
  overflow-x: scroll;
}
.scroll-x.overflow-hack {
  padding-bottom: 100vh !important;
  margin-bottom: -100vh !important;
  z-index: -9999;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* MS Edge/IE */
}
.scroll-x.overflow-hack ::-webkit-scrollbar {
  display: none;
}

.scroll-y {
  overflow-y: scroll;
}

/*-- utilities/shadows.scss --*/
:where(html) {
  --shadow-1:
    1px 2px 4px rgba(12, 13, 13, 0.06),
    0 1px 2px rgba(12, 13, 13, 0.08);
  --shadow-2:
    2px 4px 8px rgba(12, 13, 13, 0.05),
    1px 2px 4px rgba(12, 13, 13, 0.07);
  --shadow-3:
    3px 6px 12px rgba(12, 13, 13, 0.04),
    2px 4px 8px rgba(12, 13, 13, 0.06);
  --shadow-4:
    4px 8px 16px rgba(12, 13, 13, 0.03),
    3px 6px 12px rgba(12, 13, 13, 0.05);
  --shadow-5:
    5px 10px 20px rgba(12, 13, 13, 0.02),
    4px 8px 16px rgba(12, 13, 13, 0.05);
}

[data-theme=dark] {
  --shadow-1:
    1px 2px 4px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-2:
    2px 4px 8px rgba(0, 0, 0, 0.14),
    1px 2px 4px rgba(0, 0, 0, 0.21);
  --shadow-3:
    3px 6px 12px rgba(0, 0, 0, 0.1),
    2px 4px 8px rgba(0, 0, 0, 0.18);
  --shadow-4:
    4px 8px 16px rgba(0, 0, 0, 0.06),
    3px 6px 12px rgba(0, 0, 0, 0.15);
  --shadow-5:
    5px 10px 20px rgba(0, 0, 0, 0.02),
    4px 8px 16px rgba(0, 0, 0, 0.12);
}

.shadow-1 {
  box-shadow: var(--shadow-1);
}

.shadow-2 {
  box-shadow: var(--shadow-2);
}

.shadow-3 {
  box-shadow: var(--shadow-3);
}

.shadow-4 {
  box-shadow: var(--shadow-4);
}

.shadow-5 {
  box-shadow: var(--shadow-5);
}

/*-- utilities/sizes.scss --*/
:where(html) {
  --size-largest: 2rem;
  --size-larger: 1.5rem;
  --size-large: 1.25rem;
  --size-medium: 1rem;
  --size-small: 0.875rem;
  --size-smaller: 0.75rem;
  --size-smallest: 0.625rem;
}

.largest {
  font-size: 2rem !important;
  line-height: 1.5;
}

.larger {
  font-size: 1.5rem !important;
  line-height: 1.5;
}

.large {
  font-size: 1.25rem !important;
  line-height: 1.5;
}

.medium {
  font-size: 1rem !important;
  line-height: 1.5;
}

.small {
  font-size: 0.875rem !important;
  line-height: 1.5;
}

.smaller {
  font-size: 0.75rem !important;
  line-height: 1.5;
}

.smallest {
  font-size: 0.625rem !important;
  line-height: 1.5;
}

.x2 {
  font-size: 2rem !important;
  line-height: 100%;
}

.x3 {
  font-size: 3rem !important;
  line-height: 100%;
}

.x4 {
  font-size: 4rem !important;
  line-height: 100%;
}

.x5 {
  font-size: 5rem !important;
  line-height: 100%;
}

.x6 {
  font-size: 6rem !important;
  line-height: 100%;
}

.x7 {
  font-size: 7rem !important;
  line-height: 100%;
}

.x8 {
  font-size: 8rem !important;
  line-height: 100%;
}

.x9 {
  font-size: 9rem !important;
  line-height: 100%;
}

.x10 {
  font-size: 10rem !important;
  line-height: 100%;
}

.lh-100 {
  line-height: 100% !important;
}

.lh-110 {
  line-height: 110% !important;
}

.lh-120 {
  line-height: 120% !important;
}

.lh-130 {
  line-height: 130% !important;
}

.lh-140 {
  line-height: 140% !important;
}

.lh-150 {
  line-height: 150% !important;
}

.lh-160 {
  line-height: 160% !important;
}

.lh-170 {
  line-height: 170% !important;
}

.lh-180 {
  line-height: 180% !important;
}

.lh-190 {
  line-height: 190% !important;
}

.lh-200 {
  line-height: 200% !important;
}

.normal {
  font-size: 1rem;
}

/*-- utilities/spacing.scss --*/
.mar {
  margin: 0.25rem !important;
}

.mar-h,
.mar-l {
  margin-left: 0.25rem !important;
}

.mar-h,
.mar-r {
  margin-right: 0.25rem !important;
}

.mar-v,
.mar-t {
  margin-top: 0.25rem !important;
}

.mar-v,
.mar-b {
  margin-bottom: 0.25rem !important;
}

.pad {
  padding: 0.25em !important;
}

.pad-h,
.pad-l {
  padding-left: 0.25em !important;
}

.pad-h,
.pad-r {
  padding-right: 0.25em !important;
}

.pad-v,
.pad-t {
  padding-top: 0.25em !important;
}

.pad-v,
.pad-b {
  padding-bottom: 0.25em !important;
}

.mar-none {
  margin: 0 !important;
}

.mar-h-none,
.mar-l-none {
  margin-left: 0 !important;
}

.mar-h-none,
.mar-r-none {
  margin-right: 0 !important;
}

.mar-v-none,
.mar-t-none {
  margin-top: 0 !important;
}

.mar-v-none,
.mar-b-none {
  margin-bottom: 0 !important;
}

.pad-none {
  padding: 0 !important;
}

.pad-h-none,
.pad-l-none {
  padding-left: 0 !important;
}

.pad-h-none,
.pad-r-none {
  padding-right: 0 !important;
}

.pad-v-none,
.pad-t-none {
  padding-top: 0 !important;
}

.pad-v-none,
.pad-b-none {
  padding-bottom: 0 !important;
}

.mar-0 {
  margin: 0rem !important;
}

.mar-h-0,
.mar-l-0 {
  margin-left: 0rem !important;
}

.mar-h-0,
.mar-r-0 {
  margin-right: 0rem !important;
}

.mar-v-0,
.mar-t-0 {
  margin-top: 0rem !important;
}

.mar-v-0,
.mar-b-0 {
  margin-bottom: 0rem !important;
}

.pad-0 {
  padding: 0em !important;
}

.pad-h-0,
.pad-l-0 {
  padding-left: 0em !important;
}

.pad-h-0,
.pad-r-0 {
  padding-right: 0em !important;
}

.pad-v-0,
.pad-t-0 {
  padding-top: 0em !important;
}

.pad-v-0,
.pad-b-0 {
  padding-bottom: 0em !important;
}

.pad-a-0 {
  padding: -0.25em 0em;
}

.mar-1 {
  margin: 0.25rem !important;
}

.mar-h-1,
.mar-l-1 {
  margin-left: 0.25rem !important;
}

.mar-h-1,
.mar-r-1 {
  margin-right: 0.25rem !important;
}

.mar-v-1,
.mar-t-1 {
  margin-top: 0.25rem !important;
}

.mar-v-1,
.mar-b-1 {
  margin-bottom: 0.25rem !important;
}

.pad-1 {
  padding: 0.25em !important;
}

.pad-h-1,
.pad-l-1 {
  padding-left: 0.25em !important;
}

.pad-h-1,
.pad-r-1 {
  padding-right: 0.25em !important;
}

.pad-v-1,
.pad-t-1 {
  padding-top: 0.25em !important;
}

.pad-v-1,
.pad-b-1 {
  padding-bottom: 0.25em !important;
}

.pad-a-1 {
  padding: 0em 0.25em;
}

.mar-2 {
  margin: 0.5rem !important;
}

.mar-h-2,
.mar-l-2 {
  margin-left: 0.5rem !important;
}

.mar-h-2,
.mar-r-2 {
  margin-right: 0.5rem !important;
}

.mar-v-2,
.mar-t-2 {
  margin-top: 0.5rem !important;
}

.mar-v-2,
.mar-b-2 {
  margin-bottom: 0.5rem !important;
}

.pad-2 {
  padding: 0.5em !important;
}

.pad-h-2,
.pad-l-2 {
  padding-left: 0.5em !important;
}

.pad-h-2,
.pad-r-2 {
  padding-right: 0.5em !important;
}

.pad-v-2,
.pad-t-2 {
  padding-top: 0.5em !important;
}

.pad-v-2,
.pad-b-2 {
  padding-bottom: 0.5em !important;
}

.pad-a-2 {
  padding: 0.25em 0.5em;
}

.mar-3 {
  margin: 0.75rem !important;
}

.mar-h-3,
.mar-l-3 {
  margin-left: 0.75rem !important;
}

.mar-h-3,
.mar-r-3 {
  margin-right: 0.75rem !important;
}

.mar-v-3,
.mar-t-3 {
  margin-top: 0.75rem !important;
}

.mar-v-3,
.mar-b-3 {
  margin-bottom: 0.75rem !important;
}

.pad-3 {
  padding: 0.75em !important;
}

.pad-h-3,
.pad-l-3 {
  padding-left: 0.75em !important;
}

.pad-h-3,
.pad-r-3 {
  padding-right: 0.75em !important;
}

.pad-v-3,
.pad-t-3 {
  padding-top: 0.75em !important;
}

.pad-v-3,
.pad-b-3 {
  padding-bottom: 0.75em !important;
}

.pad-a-3 {
  padding: 0.5em 0.75em;
}

.mar-4 {
  margin: 1rem !important;
}

.mar-h-4,
.mar-l-4 {
  margin-left: 1rem !important;
}

.mar-h-4,
.mar-r-4 {
  margin-right: 1rem !important;
}

.mar-v-4,
.mar-t-4 {
  margin-top: 1rem !important;
}

.mar-v-4,
.mar-b-4 {
  margin-bottom: 1rem !important;
}

.pad-4 {
  padding: 1em !important;
}

.pad-h-4,
.pad-l-4 {
  padding-left: 1em !important;
}

.pad-h-4,
.pad-r-4 {
  padding-right: 1em !important;
}

.pad-v-4,
.pad-t-4 {
  padding-top: 1em !important;
}

.pad-v-4,
.pad-b-4 {
  padding-bottom: 1em !important;
}

.pad-a-4 {
  padding: 0.75em 1em;
}

.mar-6 {
  margin: 1.5rem !important;
}

.mar-h-6,
.mar-l-6 {
  margin-left: 1.5rem !important;
}

.mar-h-6,
.mar-r-6 {
  margin-right: 1.5rem !important;
}

.mar-v-6,
.mar-t-6 {
  margin-top: 1.5rem !important;
}

.mar-v-6,
.mar-b-6 {
  margin-bottom: 1.5rem !important;
}

.pad-6 {
  padding: 1.5em !important;
}

.pad-h-6,
.pad-l-6 {
  padding-left: 1.5em !important;
}

.pad-h-6,
.pad-r-6 {
  padding-right: 1.5em !important;
}

.pad-v-6,
.pad-t-6 {
  padding-top: 1.5em !important;
}

.pad-v-6,
.pad-b-6 {
  padding-bottom: 1.5em !important;
}

.pad-a-6 {
  padding: 1.25em 1.5em;
}

.mar-8 {
  margin: 2rem !important;
}

.mar-h-8,
.mar-l-8 {
  margin-left: 2rem !important;
}

.mar-h-8,
.mar-r-8 {
  margin-right: 2rem !important;
}

.mar-v-8,
.mar-t-8 {
  margin-top: 2rem !important;
}

.mar-v-8,
.mar-b-8 {
  margin-bottom: 2rem !important;
}

.pad-8 {
  padding: 2em !important;
}

.pad-h-8,
.pad-l-8 {
  padding-left: 2em !important;
}

.pad-h-8,
.pad-r-8 {
  padding-right: 2em !important;
}

.pad-v-8,
.pad-t-8 {
  padding-top: 2em !important;
}

.pad-v-8,
.pad-b-8 {
  padding-bottom: 2em !important;
}

.pad-a-8 {
  padding: 1.75em 2em;
}

.mar-10 {
  margin: 2.5rem !important;
}

.mar-h-10,
.mar-l-10 {
  margin-left: 2.5rem !important;
}

.mar-h-10,
.mar-r-10 {
  margin-right: 2.5rem !important;
}

.mar-v-10,
.mar-t-10 {
  margin-top: 2.5rem !important;
}

.mar-v-10,
.mar-b-10 {
  margin-bottom: 2.5rem !important;
}

.pad-10 {
  padding: 2.5em !important;
}

.pad-h-10,
.pad-l-10 {
  padding-left: 2.5em !important;
}

.pad-h-10,
.pad-r-10 {
  padding-right: 2.5em !important;
}

.pad-v-10,
.pad-t-10 {
  padding-top: 2.5em !important;
}

.pad-v-10,
.pad-b-10 {
  padding-bottom: 2.5em !important;
}

.pad-a-10 {
  padding: 2.25em 2.5em;
}

.mar-12 {
  margin: 3rem !important;
}

.mar-h-12,
.mar-l-12 {
  margin-left: 3rem !important;
}

.mar-h-12,
.mar-r-12 {
  margin-right: 3rem !important;
}

.mar-v-12,
.mar-t-12 {
  margin-top: 3rem !important;
}

.mar-v-12,
.mar-b-12 {
  margin-bottom: 3rem !important;
}

.pad-12 {
  padding: 3em !important;
}

.pad-h-12,
.pad-l-12 {
  padding-left: 3em !important;
}

.pad-h-12,
.pad-r-12 {
  padding-right: 3em !important;
}

.pad-v-12,
.pad-t-12 {
  padding-top: 3em !important;
}

.pad-v-12,
.pad-b-12 {
  padding-bottom: 3em !important;
}

.pad-a-12 {
  padding: 2.75em 3em;
}

.mar-16 {
  margin: 4rem !important;
}

.mar-h-16,
.mar-l-16 {
  margin-left: 4rem !important;
}

.mar-h-16,
.mar-r-16 {
  margin-right: 4rem !important;
}

.mar-v-16,
.mar-t-16 {
  margin-top: 4rem !important;
}

.mar-v-16,
.mar-b-16 {
  margin-bottom: 4rem !important;
}

.pad-16 {
  padding: 4em !important;
}

.pad-h-16,
.pad-l-16 {
  padding-left: 4em !important;
}

.pad-h-16,
.pad-r-16 {
  padding-right: 4em !important;
}

.pad-v-16,
.pad-t-16 {
  padding-top: 4em !important;
}

.pad-v-16,
.pad-b-16 {
  padding-bottom: 4em !important;
}

.pad-a-16 {
  padding: 3.75em 4em;
}

.mar-20 {
  margin: 5rem !important;
}

.mar-h-20,
.mar-l-20 {
  margin-left: 5rem !important;
}

.mar-h-20,
.mar-r-20 {
  margin-right: 5rem !important;
}

.mar-v-20,
.mar-t-20 {
  margin-top: 5rem !important;
}

.mar-v-20,
.mar-b-20 {
  margin-bottom: 5rem !important;
}

.pad-20 {
  padding: 5em !important;
}

.pad-h-20,
.pad-l-20 {
  padding-left: 5em !important;
}

.pad-h-20,
.pad-r-20 {
  padding-right: 5em !important;
}

.pad-v-20,
.pad-t-20 {
  padding-top: 5em !important;
}

.pad-v-20,
.pad-b-20 {
  padding-bottom: 5em !important;
}

.pad-a-20 {
  padding: 4.75em 5em;
}

.mar-24 {
  margin: 6rem !important;
}

.mar-h-24,
.mar-l-24 {
  margin-left: 6rem !important;
}

.mar-h-24,
.mar-r-24 {
  margin-right: 6rem !important;
}

.mar-v-24,
.mar-t-24 {
  margin-top: 6rem !important;
}

.mar-v-24,
.mar-b-24 {
  margin-bottom: 6rem !important;
}

.pad-24 {
  padding: 6em !important;
}

.pad-h-24,
.pad-l-24 {
  padding-left: 6em !important;
}

.pad-h-24,
.pad-r-24 {
  padding-right: 6em !important;
}

.pad-v-24,
.pad-t-24 {
  padding-top: 6em !important;
}

.pad-v-24,
.pad-b-24 {
  padding-bottom: 6em !important;
}

.pad-a-24 {
  padding: 5.75em 6em;
}

.mar-28 {
  margin: 7rem !important;
}

.mar-h-28,
.mar-l-28 {
  margin-left: 7rem !important;
}

.mar-h-28,
.mar-r-28 {
  margin-right: 7rem !important;
}

.mar-v-28,
.mar-t-28 {
  margin-top: 7rem !important;
}

.mar-v-28,
.mar-b-28 {
  margin-bottom: 7rem !important;
}

.pad-28 {
  padding: 7em !important;
}

.pad-h-28,
.pad-l-28 {
  padding-left: 7em !important;
}

.pad-h-28,
.pad-r-28 {
  padding-right: 7em !important;
}

.pad-v-28,
.pad-t-28 {
  padding-top: 7em !important;
}

.pad-v-28,
.pad-b-28 {
  padding-bottom: 7em !important;
}

.pad-a-28 {
  padding: 6.75em 7em;
}

.mar-32 {
  margin: 8rem !important;
}

.mar-h-32,
.mar-l-32 {
  margin-left: 8rem !important;
}

.mar-h-32,
.mar-r-32 {
  margin-right: 8rem !important;
}

.mar-v-32,
.mar-t-32 {
  margin-top: 8rem !important;
}

.mar-v-32,
.mar-b-32 {
  margin-bottom: 8rem !important;
}

.pad-32 {
  padding: 8em !important;
}

.pad-h-32,
.pad-l-32 {
  padding-left: 8em !important;
}

.pad-h-32,
.pad-r-32 {
  padding-right: 8em !important;
}

.pad-v-32,
.pad-t-32 {
  padding-top: 8em !important;
}

.pad-v-32,
.pad-b-32 {
  padding-bottom: 8em !important;
}

.pad-a-32 {
  padding: 7.75em 8em;
}

.pad-a {
  padding: 0 0.25em;
}

/*-- utilities/split.scss --*/
[class*=split-] {
  width: var(--width);
}

.split-2 {
  --width: 50%;
}

.split-3 {
  --width: 33.33333333%;
}

.split-2-3 {
  --width: 66.66666666%;
}

.split-4 {
  --width: 25%;
}

.split-3-4 {
  --width: 75%;
}

.split-5 {
  --width: 20%;
}

.split-2-5 {
  --width: 40%;
}

.split-3-5 {
  --width: 60%;
}

.split-4-5 {
  --width: 80%;
}

.split-6 {
  --width: 16.66666666%;
}

.split-5-6 {
  --width: 83.33333333%;
}

.split-2-7 {
  --width: 28.57142858%;
}

.split-3-7 {
  --width: 42.85714287%;
}

.split-4-7 {
  --width: 57.14285716%;
}

.split-5-7 {
  --width: 71.42857145%;
}

.split-6-7 {
  --width: 85.71428574%;
}

.split-7 {
  --width: 14.28571429%;
}

.split-8 {
  --width: 12.5%;
}

.split-3-8 {
  --width: 37.5%;
}

.split-5-8 {
  --width: 62.5%;
}

.split-7-8 {
  --width: 87.5%;
}

.split-9 {
  --width: 11.11111111%;
}

.split-2-9 {
  --width: 22.22222222%;
}

.split-4-9 {
  --width: 44.44444444%;
}

.split-5-9 {
  --width: 55.55555555%;
}

.split-7-9 {
  --width: 77.77777777%;
}

.split-8-9 {
  --width: 88.88888888%;
}

.split-10 {
  --width: 10%;
}

.split-3-10 {
  --width: 30%;
}

.split-7-10 {
  --width: 70%;
}

.split-9-10 {
  --width: 90%;
}

.split-11 {
  --width: 9.09090909%;
}

.split-12 {
  --width: 8.333333333%;
}

.split-13 {
  --width: 7.692307692%;
}

.split-14 {
  --width: 7.142857142%;
}

.split-15 {
  --width: 6.666666666%;
}

.split-16 {
  --width: 6.25%;
}

/* utilities/styles.scss */
.text-italic, .italic {
  font-style: italic;
}

.text-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.text-strike {
  text-decoration: line-through;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* utilities/surfaces.scss */
:is(.surface, .paper) {
  --color: var(--color-0);
  --background-color: white;
  --border-color: var(--color-80);
}

:is(.surface-1) {
  --color: var(--color-45);
  --background-color: var(--color-80);
  --border-color: var(--color-65);
}

:is(.surface-2) {
  --color: var(--color-40);
  --background-color: var(--color-85);
  --border-color: var(--color-70);
}

:is(.surface-3) {
  --color: var(--color-35);
  --background-color: var(--color-90);
  --border-color: var(--color-75);
}

:is(.surface-4) {
  --color: var(--color-25);
  --background-color: var(--color-95);
  --border-color: var(--color-80);
}

:is(.surface-5) {
  --color: var(--color-10);
  --background-color: var(--color-100);
  --border-color: var(--color-85);
}

[data-theme=dark] :is(.surface, .paper) {
  --color: var(--color-100);
  --background-color: black;
  --border-color: var(--color-15);
}
[data-theme=dark] :is(.surface-1) {
  --color: var(--color-50);
  --background-color: var(--color-0);
  --border-color: var(--color-15);
}
[data-theme=dark] :is(.surface-2) {
  --color: var(--color-60);
  --background-color: var(--color-5);
  --border-color: var(--color-20);
}
[data-theme=dark] :is(.surface-3) {
  --color: var(--color-70);
  --background-color: var(--color-10);
  --border-color: var(--color-25);
}
[data-theme=dark] :is(.surface-4) {
  --color: var(--color-80);
  --background-color: var(--color-15);
  --border-color: var(--color-30);
}
[data-theme=dark] :is(.surface-5) {
  --color: var(--color-90);
  --background-color: var(--color-20);
  --border-color: var(--color-35);
}

[class*=surface], .paper {
  color: var(--color);
  background-color: var(--background-color);
}

/* utilities/typography.scss */
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.875rem;
}

h6 {
  font-size: 0.75rem;
}

h1, h2, h3 {
  font-weight: 400;
}

h4, h5, h6 {
  font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.3;
}

:where(html) {
  --flow-space: 1.5em;
  --prose-width: 40rem;
}

:where(.flow) h1, :where(.flow) h2, :where(.flow) h3, :where(.flow) h4, :where(.flow) h5, :where(.flow) h6,
:where(.flow) p, :where(.flow) figure, :where(.flow) blockquote, :where(.flow) dl, :where(.flow) dd {
  margin-block-start: 0;
  margin-block-end: 0;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1.5em);
}

.flow p + p {
  margin-block-start: 1em;
}

.prose {
  --flow-space: 1.5em;
}
.prose p, .prose blockquote {
  max-width: var(--prose-width);
}

.wide {
  --prose-width: 100%;
}

/* utilities/weights.scss */
[class*=weight-] {
  font-weight: var(--font-weight, 400);
}

.weight-100, .weight-thin {
  --font-weight: 100;
}

.weight-200, .weight-extra-light {
  --font-weight: 200;
}

.weight-300, .weight-light {
  --font-weight: 300;
}

.weight-400, .weight-regular {
  --font-weight: 400;
}

.weight-500, .weight-medium {
  --font-weight: 500;
}

.weight-600, .weight-semi-bold {
  --font-weight: 600;
}

.weight-700, .weight-bold {
  --font-weight: 700;
}

.weight-800, .weight-extra-bold {
  --font-weight: 800;
}

.weight-900, .weight-black {
  --font-weight: 900;
}

.thin {
  font-weight: 100;
}

.bold {
  font-weight: 700;
}

.thick {
  font-weight: 900;
}

/*-- utilities/widths --*/
[class*="-2rem"], [class*="-32px"] {
  --width: 2rem;
}

[class*="-3rem"], [class*="-48px"] {
  --width: 3rem;
}

[class*="-4rem"], [class*="-64px"] {
  --width: 4rem;
}

[class*="-5rem"], [class*="-80px"] {
  --width: 5rem;
}

[class*="-6rem"], [class*="-96px"] {
  --width: 6rem;
}

[class*="-8rem"], [class*="-128px"] {
  --width: 8rem;
}

[class*="-10rem"], [class*="-160px"] {
  --width: 10rem;
}

[class*="-12rem"], [class*="-192px"] {
  --width: 12rem;
}

[class*="-14rem"], [class*="-224px"] {
  --width: 14rem;
}

[class*="-16rem"], [class*="-256px"] {
  --width: 16rem;
}

[class*="-18rem"], [class*="-288px"] {
  --width: 18rem;
}

[class*="-20rem"], [class*="-320px"] {
  --width: 20rem;
}

[class*="-25rem"], [class*="-400px"] {
  --width: 25rem;
}

[class*="-30rem"], [class*="-480px"] {
  --width: 30rem;
}

[class*="-35rem"], [class*="-560px"] {
  --width: 35rem;
}

[class*="-40rem"], [class*="-640px"] {
  --width: 40rem;
}

[class*="-45rem"], [class*="-720px"] {
  --width: 45rem;
}

[class*="-50rem"], [class*="-800px"] {
  --width: 50rem;
}

[class*="-60rem"], [class*="-960px"] {
  --width: 60rem;
}

[class*="-70rem"], [class*="-1120px"] {
  --width: 70rem;
}

[class*="-80rem"], [class*="-1280px"] {
  --width: 80rem;
}

[class*="-90rem"], [class*="-1440px"] {
  --width: 90rem;
}

[class*="-100rem"], [class*="-1600px"] {
  --width: 100rem;
}

[class*=-mobile] {
  --width: 30rem;
}

[class*=-tablet] {
  --width: 45rem;
}

[class*=-laptop] {
  --width: 60rem;
}

[class*=-desktop] {
  --width: 75rem;
}

[class*=-widescreen] {
  --width: 90rem;
}

[class*=width-] {
  width: var(--width);
}

[class*=max-width-] {
  width: auto;
  max-width: var(--width);
}

[class*=min-width-] {
  width: auto;
  max-width: auto;
  min-width: var(--width);
}

.wide {
  width: 100%;
  max-width: 100%;
}

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.wrap-balance {
  text-wrap: balance;
}

.wrap-pretty {
  text-wrap: pretty;
}

.wrap-stable {
  text-wrap: stable;
}

/* utilities/responsive.scss */
.container {
  container: container/inline-size;
}

@media only screen and (max-width: 30rem) {
  .stack-mobile[class*=split-], .stack-mobile > [class*=split-] {
    width: 100% !important;
  }
  .stack-mobile.flex {
    flex-wrap: wrap;
  }
  .stack-mobile.flex > * {
    flex-basis: 100%;
  }
  .stack-mobile[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-mobile[class*=columns-] {
    --columns: 1;
  }
}
@container container (max-width: 30rem) {
  .stack-mobile[class*=split-], .stack-mobile > [class*=split-] {
    width: 100% !important;
  }
  .stack-mobile.flex {
    flex-wrap: wrap;
  }
  .stack-mobile.flex > * {
    flex-basis: 100%;
  }
  .stack-mobile[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-mobile[class*=columns-] {
    --columns: 1;
  }
}
@media only screen and (max-width: 45rem) {
  .stack-tablet[class*=split-], .stack-tablet > [class*=split-] {
    width: 100% !important;
  }
  .stack-tablet.flex {
    flex-wrap: wrap;
  }
  .stack-tablet.flex > * {
    flex-basis: 100%;
  }
  .stack-tablet[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-tablet[class*=columns-] {
    --columns: 1;
  }
}
@container container (max-width: 45rem) {
  .stack-tablet[class*=split-], .stack-tablet > [class*=split-] {
    width: 100% !important;
  }
  .stack-tablet.flex {
    flex-wrap: wrap;
  }
  .stack-tablet.flex > * {
    flex-basis: 100%;
  }
  .stack-tablet[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-tablet[class*=columns-] {
    --columns: 1;
  }
}
@media only screen and (max-width: 60rem) {
  .stack-laptop[class*=split-], .stack-laptop > [class*=split-] {
    width: 100% !important;
  }
  .stack-laptop.flex {
    flex-wrap: wrap;
  }
  .stack-laptop.flex > * {
    flex-basis: 100%;
  }
  .stack-laptop[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-laptop[class*=columns-] {
    --columns: 1;
  }
}
@container container (max-width: 60rem) {
  .stack-laptop[class*=split-], .stack-laptop > [class*=split-] {
    width: 100% !important;
  }
  .stack-laptop.flex {
    flex-wrap: wrap;
  }
  .stack-laptop.flex > * {
    flex-basis: 100%;
  }
  .stack-laptop[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-laptop[class*=columns-] {
    --columns: 1;
  }
}
@media only screen and (max-width: 75rem) {
  .stack-desktop[class*=split-], .stack-desktop > [class*=split-] {
    width: 100% !important;
  }
  .stack-desktop.flex {
    flex-wrap: wrap;
  }
  .stack-desktop.flex > * {
    flex-basis: 100%;
  }
  .stack-desktop[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-desktop[class*=columns-] {
    --columns: 1;
  }
}
@container container (max-width: 75rem) {
  .stack-desktop[class*=split-], .stack-desktop > [class*=split-] {
    width: 100% !important;
  }
  .stack-desktop.flex {
    flex-wrap: wrap;
  }
  .stack-desktop.flex > * {
    flex-basis: 100%;
  }
  .stack-desktop[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-desktop[class*=columns-] {
    --columns: 1;
  }
}
@media only screen and (max-width: 90rem) {
  .stack-widescreen[class*=split-], .stack-widescreen > [class*=split-] {
    width: 100% !important;
  }
  .stack-widescreen.flex {
    flex-wrap: wrap;
  }
  .stack-widescreen.flex > * {
    flex-basis: 100%;
  }
  .stack-widescreen[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-widescreen[class*=columns-] {
    --columns: 1;
  }
}
@container container (max-width: 90rem) {
  .stack-widescreen[class*=split-], .stack-widescreen > [class*=split-] {
    width: 100% !important;
  }
  .stack-widescreen.flex {
    flex-wrap: wrap;
  }
  .stack-widescreen.flex > * {
    flex-basis: 100%;
  }
  .stack-widescreen[class*=grid-] {
    grid-template-columns: 1fr;
  }
  .stack-widescreen[class*=columns-] {
    --columns: 1;
  }
}
/* forms/all.scss */
/* forms/config.scss */
:where(html) {
  --input-line-height: 1.5;
  --input-border-width: 1px;
  --input-border-radius: 0.25rem;
  --input-padding-v: 0.25em;
  --input-padding-h: 0.5em;
  --input-transition-time: 0.3s;
  --input-disabled-opacity: 0.5;
  --input-focus-ring-width: 3px;
  --input-focus-ring-gap: 1px;
  --input-inner-height: calc((1em * var(--input-line-height)) + (var(--input-padding-v) * 2));
  --input-outer-height: calc(var(--input-inner-height) + (var(--input-border-width) * 2));
  --input-label-inset: var(--input-padding-h);
  --input-help-inset: var(--input-padding-h);
  --input-accent-color: var(--brand-50);
  --input-valid-accent-color: var(--green-50);
  --input-invalid-accent-color: var(--red-50);
  --input-color: var(--color-30);
  --input-border-color: var(--color-70);
  --input-background-color: var(--color-100);
  --input-placeholder-color: var(--color-60);
  --input-hover-color: var(--color-20);
  --input-hover-border-color: var(--color-60);
  --input-hover-background-color: var(--color-95);
  --input-hover-placeholder-color: var(--color-50);
  --input-focus-color: var(--blue-0);
  --input-focus-border-color: var(--blue-50);
  --input-focus-background-color: var(--blue-100);
  --input-focus-ring-color: var(--blue-70);
  --input-focus-gap-color: var(--blue-90);
  --input-focus-inset: ;
  --input-range-track-color: var(--brand-75);
  --input-range-thumb-color: var(--brand-50);
}

[data-badger-focus=inset] {
  --input-focus-inset: inset;
}

:where(.field) {
  --label-inset: calc(var(--padding-h) + var(--border-width));
  --help-inset: calc(var(--padding-h) + var(--border-width));
  --label-color: var(--grey-10);
  --help-color: var(--color-50);
  --help-prefix-color: var(--color-50);
  --required-color: var(--orange-40);
  --required-background-color: var(--orange-95);
  --required-border-color: var(--orange-85);
  --optional-color: var(--blue-40);
  --optional-background-color: var(--blue-95);
  --optional-border-color: var(--blue-85);
  --label-size: 0.875em;
  --label-height: 1.5;
  --label-margin: 0.25rem;
  --label-weight: 400;
  --help-size: 0.75em;
  --help-margin: 0.5em;
  --help-prefix-margin: 0.5em;
  --tag-size: 0.8em;
  --margin-bottom: 1rem;
  --required-text: "Required";
  --optional-text: "Optional";
  --valid-help-prefix: "✓";
  --invalid-help-prefix: "✗";
}

:where(.field, .input) {
  --fix-color: var(--color-40);
  --fix-background: var(--color-95);
  --fix-hover-color: var(--color-30);
  --fix-hover-background: var(--color-90);
  --fix-focus-color: var(--blue-20);
  --fix-focus-background: var(--blue-85);
}

:where(.field.valid) {
  --label-color: var(--green-25);
  --help-color: var(--green-40);
  --help-prefix-color: var(--green-40);
  --help-prefix: var(--valid-help-prefix);
  --input-color: var(--green-30);
  --input-border-color: var(--green-50);
  --input-background-color: var(--green-100);
  --input-placeholder-color: var(--green-60);
  --input-hover-color: var(--green-20);
  --input-hover-border-color: var(--green-55);
  --input-hover-background-color: var(--green-95);
  --input-hover-placeholder-color: var(--green-50);
  --input-focus-color: var(--green-0);
  --input-focus-border-color: var(--green-50);
  --input-focus-background-color: var(--green-100);
  --input-focus-ring-color: var(--green-75);
  --input-focus-gap-color: var(--green-95);
  --fix-color: var(--green-40);
  --fix-background: var(--green-90);
  --fix-hover-color: var(--green-30);
  --fix-hover-background: var(--green-85);
  --fix-focus-color: var(--green-20);
  --fix-focus-background: var(--green-80);
}
:where(.field.valid) label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])) {
  --accent-color: var(--input-valid-accent-color);
}

:where(.field.invalid) {
  --label-color: var(--red-20);
  --help-color: var(--red-35);
  --help-prefix-color: var(--red-35);
  --help-prefix: var(--invalid-help-prefix);
  --input-color: var(--red-40);
  --input-border-color: var(--red-55);
  --input-background-color: var(--red-100);
  --input-placeholder-color: var(--red-60);
  --input-hover-color: var(--red-20);
  --input-hover-border-color: var(--red-60);
  --input-hover-background-color: var(--red-95);
  --input-hover-placeholder-color: var(--red-50);
  --input-focus-color: var(--red-0);
  --input-focus-border-color: var(--red-55);
  --input-focus-background-color: var(--red-100);
  --input-focus-ring-color: var(--red-80);
  --input-focus-gap-color: var(--red-90);
  --fix-color: var(--red-40);
  --fix-background: var(--red-90);
  --fix-hover-color: var(--red-30);
  --fix-hover-background: var(--red-85);
  --fix-focus-color: var(--red-20);
  --fix-focus-background: var(--red-80);
}
:where(.field.invalid) label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])) {
  --accent-color: var(--input-invalid-accent-color);
}

:where(.surface-1) {
  --input-border-color: var(--color-50);
}
:where(.surface-1) :where(.field) {
  --help-color: var(--color-30);
  --help-prefix-color: var(--color-30);
}
:where(.surface-1) :where(.field.valid) {
  --help-color: var(--green-30);
  --help-prefix-color: var(--green-30);
  --input-border-color: var(--green-50);
}
:where(.surface-1) :where(.field.invalid) {
  --help-color: var(--red-30);
  --help-prefix-color: var(--red-30);
  --input-border-color: var(--red-50);
}

[data-theme=dark] {
  --input-color: var(--color-70);
  --input-border-color: var(--color-30);
  --input-background-color: var(--color-5);
  --input-placeholder-color: var(--color-40);
  --input-hover-color: var(--color-80);
  --input-hover-border-color: var(--color-40);
  --input-hover-background-color: var(--color-10);
  --input-hover-placeholder-color: var(--color-50);
  --input-focus-color: var(--blue-100);
  --input-focus-border-color: var(--blue-50);
  --input-focus-background-color: var(--blue-5);
  --input-focus-ring-color: var(--blue-30);
  --input-focus-gap-color: var(--blue-10);
  --input-range-track-color: var(--brand-30);
  --input-range-thumb-color: var(--brand-50);
}
[data-theme=dark] :where(.field) {
  --label-color: var(--grey-90);
  --help-color: var(--color-50);
  --help-prefix-color: var(--color-50);
  --required-color: var(--orange-60);
  --required-background-color: var(--orange-10);
  --required-border-color: var(--orange-15);
  --optional-color: var(--blue-60);
  --optional-background-color: var(--blue-10);
  --optional-border-color: var(--blue-15);
}
[data-theme=dark] :where(.field, .inputs) {
  --fix-color: var(--color-40);
  --fix-background: var(--color-10);
  --fix-hover-color: var(--color-50);
  --fix-hover-background: var(--color-15);
  --fix-focus-color: var(--blue-60);
  --fix-focus-background: var(--blue-20);
}
[data-theme=dark] :where(.field.valid) {
  --label-color: var(--green-70);
  --help-color: var(--green-60);
  --help-prefix-color: var(--green-60);
  --input-color: var(--green-65);
  --input-border-color: var(--green-40);
  --input-background-color: var(--green-5);
  --input-placeholder-color: var(--green-40);
  --input-hover-color: var(--green-80);
  --input-hover-border-color: var(--green-45);
  --input-hover-background-color: var(--green-10);
  --input-hover-placeholder-color: var(--green-40);
  --input-focus-color: var(--green-100);
  --input-focus-border-color: var(--green-50);
  --input-focus-background-color: var(--green-0);
  --input-focus-ring-color: var(--green-30);
  --input-focus-gap-color: var(--green-10);
  --accent-color: var(--green-50);
}
[data-theme=dark] :where(.field.valid .inputs) {
  --fix-color: var(--green-40);
  --fix-background: var(--green-10);
  --fix-hover-color: var(--green-50);
  --fix-hover-background: var(--green-15);
  --fix-focus-color: var(--green-60);
  --fix-focus-background: var(--green-20);
}
[data-theme=dark] :where(.field.invalid) {
  --label-color: var(--red-70);
  --help-color: var(--red-60);
  --help-prefix-color: var(--red-60);
  --input-color: var(--red-60);
  --input-border-color: var(--red-40);
  --input-background-color: var(--red-5);
  --input-placeholder-color: var(--red-40);
  --input-hover-color: var(--red-80);
  --input-hover-border-color: var(--red-45);
  --input-hover-background-color: var(--red-10);
  --input-hover-placeholder-color: var(--red-40);
  --input-focus-color: var(--red-100);
  --input-focus-border-color: var(--red-50);
  --input-focus-background-color: var(--red-0);
  --input-focus-ring-color: var(--red-35);
  --input-focus-gap-color: var(--red-10);
}
[data-theme=dark] :where(.field.invalid .inputs) {
  --fix-color: var(--red-45);
  --fix-background: var(--red-15);
  --fix-hover-color: var(--red-50);
  --fix-hover-background: var(--red-15);
  --fix-focus-color: var(--red-60);
  --fix-focus-background: var(--red-20);
}
[data-theme=dark] :where(.surface-1) {
  --input-border-color: var(--color-40);
}
[data-theme=dark] :where(.surface-1) :where(.field) {
  --help-color: var(--color-50);
}
[data-theme=dark] :where(.surface-1) :where(.field.valid) {
  --help-color: var(--green-50);
  --input-border-color: var(--green-40);
}
[data-theme=dark] :where(.surface-1) :where(.field.invalid) {
  --help-color: var(--red-60);
  --input-border-color: var(--red-40);
}
[data-theme=dark] :where(.surface-4, .surface-5) {
  --input-border-color: var(--color-40);
}
[data-theme=dark] :where(.surface-4, .surface-5) :where(.field) {
  --help-color: var(--color-60);
}
[data-theme=dark] :where(.surface-4, .surface-5) :where(.field.valid) {
  --help-color: var(--green-50);
}
[data-theme=dark] :where(.surface-4, .surface-5) :where(.field.invalid) {
  --help-color: var(--red-60);
}

:where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])), .field, .inputs, .input, button, .button) {
  --color: var(--input-color);
  --background-color: var(--input-background-color);
  --placeholder-color: var(--input-placeholder-color);
  --border-color: var(--input-border-color);
  --accent-color: var(--input-accent-color);
  --border-width: var(--input-border-width);
  --border-radius: var(--input-border-radius);
  --padding-h: var(--input-padding-h);
  --padding-v: var(--input-padding-v);
  --line-height: var(--input-line-height);
  --transition-time: var(--input-transition-time);
  --focus-ring-outline: var(--input-focus-inset) 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring-color);
  --focus-ring-inline: var(--input-focus-inset) 0 0 0 var(--input-focus-ring-gap) var(--input-focus-gap-color);
  --focus-ring: var(--focus-ring-inline), var(--focus-ring-outline);
}

:where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)):hover {
  --color: var(--input-hover-color);
  --border-color: var(--input-hover-border-color);
  --background-color: var(--input-hover-background-color);
  --placeholder-color: var(--input-hover-placeholder-color);
  --fix-color: var(--fix-hover-color);
  --fix-background: var(--fix-hover-background);
}
:where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)).focus:not(.no-focus), :where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)):focus:not(.no-focus) {
  --color: var(--input-focus-color);
  --border-color: var(--input-focus-border-color);
  --background-color: var(--input-focus-background-color);
  --fix-color: var(--fix-focus-color);
  --fix-background: var(--fix-focus-background);
}
:where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover))::placeholder, :where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)) .placeholder {
  color: var(--placeholder-color);
  font-weight: 300;
}
:where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)):disabled, :where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover))[disabled], :where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)).disabled, :where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)) :disabled, :where(input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input:not(.no-hover)) .disabled {
  opacity: var(--input-disabled-opacity);
}

[data-badger-help-prefix=none] .field {
  --help-prefix: "";
  --help-prefix-margin: 0;
}

/* forms/buttons.scss */
@property --gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}
@property --gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}
:where(button, .button) {
  --color: var(--color-100);
  --border-color: var(--color-50);
  --background-color: var(--color-50);
  --icon-margin: 0.5em;
  --icon-pull: -0.125em;
}

:is(button, .button) {
  --padding-h: 1em;
  --padless-h: 0.5em;
}

button, .button {
  --input-focus-ring-color: var(--color-70);
  --input-focus-gap-color: var(--color-90);
  display: inline-flex;
  position: relative;
  appearance: none;
  justify-content: center;
  align-items: center;
  color: var(--color);
  margin: 0;
  background-color: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--padding-v) var(--padding-h);
  font-size: 1em;
  line-height: var(--line-height);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  outline: none;
  touch-action: manipulation;
  background-image: none;
  white-space: nowrap;
  user-select: none;
  transition: all var(--transition-time);
  cursor: pointer;
}
button:hover, .button:hover {
  --border-color: var(--color-55);
  --background-color: var(--color-55);
}
button.outline, .button.outline {
  --color: var(--color-50);
  --background-color: var(--color-100);
  --border-color: var(--color-50);
}
button.outline:hover, .button.outline:hover {
  --color: var(--color-20);
  --background-color: var(--color-90);
  --border-color: var(--color-60);
}
button.bare, .button.bare {
  --color: var(--color-50);
  --background-color: transparent;
  --border-color: transparent;
}
button.bare:hover, .button.bare:hover {
  --color: var(--color-35);
  --background-color: var(--color-95);
  --border-color: var(--color-85);
}
button.dark, .button.dark {
  --border-color: var(--color-40);
  --background-color: var(--color-40);
}
button.dark:hover, .button.dark:hover {
  --background-color: var(--color-45);
  --border-color: var(--color-45);
}
button.bright, .button.bright {
  --color: var(--color-0);
  --border-color: var(--color-60);
  --background-color: var(--color-60);
}
button.bright:hover, .button.bright:hover {
  --background-color: var(--color-55);
  --border-color: var(--color-55);
}
button.shaded, .button.shaded {
  --color: var(--color-100);
  --border-color: var(--color-50);
  --gradient-from: var(--color-55);
  --gradient-to: var(--color-45);
  --gradient-angle: 175deg;
  transition: --gradient-from 0.2s, --gradient-to 0.2s;
  background: linear-gradient(var(--gradient-angle), var(--gradient-from), var(--gradient-to));
  border-top-color: var(--gradient-from);
  border-left-color: var(--gradient-from);
  border-bottom-color: var(--gradient-to);
  border-right-color: var(--gradient-to);
}
button.shaded:hover, button.shaded:focus, .button.shaded:hover, .button.shaded:focus {
  --gradient-from: var(--color-45);
  --gradient-to: var(--color-50);
}
button.disabled, button:disabled,
button .disabled, .button.disabled, .button:disabled,
.button .disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: var(--input-disabled-opacity);
  box-shadow: none;
}
button.disabled:hover, button:disabled:hover,
button .disabled:hover, .button.disabled:hover, .button:disabled:hover,
.button .disabled:hover {
  --color: var(--grey-40);
  --border-color: var(--grey-50);
  --background-color: var(--grey-60);
}
button.focus-visible:not(.no-focus), button:focus-visible:not(.no-focus), .button.focus-visible:not(.no-focus), .button:focus-visible:not(.no-focus) {
  box-shadow: var(--focus-ring);
}
button svg.icon, .button svg.icon {
  font-size: calc(1em + var(--padding-v));
  margin: calc(var(--padding-v) / 2);
}
button svg.icon.on-left, button svg.icon:first-child:not(:last-child), .button svg.icon.on-left, .button svg.icon:first-child:not(:last-child) {
  margin-left: var(--icon-pull);
  margin-right: var(--icon-margin);
}
button svg.icon.on-right, button svg.icon:last-child:not(:first-child), .button svg.icon.on-right, .button svg.icon:last-child:not(:first-child) {
  margin-left: var(--icon-margin);
  margin-right: var(--icon-pull);
}
button.icon, .button.icon {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.buttons {
  display: inline-flex;
}
.buttons button:hover, .buttons .button:hover {
  z-index: 1;
}
.buttons button:not(:first-child), .buttons .button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: calc(var(--border-width) * -1);
}
.buttons button:not(:last-child), .buttons .button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[data-theme=dark] button, [data-theme=dark] .button {
  --color: var(--color-90);
  --border-color: var(--color-40);
  --background-color: var(--color-40);
  --input-focus-ring-color: var(--color-50);
  --input-focus-gap-color: var(--color-10);
}
[data-theme=dark] button:hover, [data-theme=dark] .button:hover {
  --color: var(--color-100);
  --border-color: var(--color-45);
  --background-color: var(--color-45);
}
[data-theme=dark] button.outline, [data-theme=dark] .button.outline {
  --color: var(--color-50);
  --border-color: var(--color-40);
  --background-color: var(--color-0);
}
[data-theme=dark] button.outline:hover, [data-theme=dark] .button.outline:hover {
  --color: var(--color-90);
  --border-color: var(--color-50);
  --background-color: var(--color-15);
}
[data-theme=dark] button.bare, [data-theme=dark] .button.bare {
  --color: var(--color-50);
  --background-color: transparent;
  --border-color: transparent;
}
[data-theme=dark] button.bare:hover, [data-theme=dark] .button.bare:hover {
  --color: var(--color-65);
  --background-color: var(--color-5);
  --border-color: var(--color-15);
}
[data-theme=dark] button.dark, [data-theme=dark] .button.dark {
  --border-color: var(--color-30);
  --background-color: var(--color-30);
}
[data-theme=dark] button.dark:hover, [data-theme=dark] .button.dark:hover {
  --background-color: var(--color-35);
  --border-color: var(--color-35);
}
[data-theme=dark] button.bright, [data-theme=dark] .button.bright {
  --color: var(--color-0);
  --border-color: var(--color-55);
  --background-color: var(--color-55);
}
[data-theme=dark] button.bright:hover, [data-theme=dark] .button.bright:hover {
  --background-color: var(--color-60);
  --border-color: var(--color-60);
}
[data-theme=dark] button.shaded, [data-theme=dark] .button.shaded {
  --gradient-from: var(--color-45);
  --gradient-to: var(--color-35);
}

[data-badger-focus=inset] button, [data-badger-focus=inset] .button {
  --input-focus-ring-color: var(--color-80);
  --input-focus-gap-color: var(--color-20);
}
[data-badger-focus=inset] button.outline, [data-badger-focus=inset] .button.outline {
  --input-focus-ring-color: var(--color-70);
  --input-focus-gap-color: var(--color-90);
}
[data-badger-focus=inset] button.bare, [data-badger-focus=inset] .button.bare {
  --input-focus-ring-color: var(--color-80);
  --input-focus-gap-color: var(--color-90);
}
[data-badger-focus=inset] button.bare:focus, [data-badger-focus=inset] .button.bare:focus {
  --border-color:var(--color-70);
}
[data-badger-focus=inset] [data-theme=dark] button, [data-badger-focus=inset] [data-theme=dark] .button {
  --input-focus-ring-color: var(--color-20);
  --input-focus-gap-color: var(--color-60);
}
[data-badger-focus=inset] [data-theme=dark] button.outline, [data-badger-focus=inset] [data-theme=dark] .button.outline {
  --input-focus-ring-color: var(--color-30);
  --input-focus-gap-color: var(--color-20);
}
[data-badger-focus=inset] [data-theme=dark] button.bare, [data-badger-focus=inset] [data-theme=dark] .button.bare {
  --input-focus-ring-color: var(--color-30);
  --input-focus-gap-color: var(--color-20);
}
[data-badger-focus=inset] [data-theme=dark] button.bare:focus, [data-badger-focus=inset] [data-theme=dark] .button.bare:focus {
  --border-color:var(--color-50);
}

/* forms/inputs.scss */
input:not([type=checkbox], [type=radio], [type=range]), textarea, select, .input {
  position: relative;
  display: inline-block;
  appearance: none;
  min-width: 0;
  padding: var(--padding-v) var(--padding-h);
  color: var(--color);
  background: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none !important;
  font-style: normal;
  font-size: 1em;
  line-height: var(--line-height);
  transition: all var(--transition-time);
  align-items: center;
}
input:not([type=checkbox], [type=radio], [type=range]):not(textarea), textarea:not(textarea), select:not(textarea), .input:not(textarea) {
  white-space: nowrap;
}
input:not([type=checkbox], [type=radio], [type=range]):not(.no-hover), textarea:not(.no-hover), select:not(.no-hover), .input:not(.no-hover) {
  cursor: pointer;
}
input:not([type=checkbox], [type=radio], [type=range]):not(.inline), textarea:not(.inline), select:not(.inline), .input:not(.inline) {
  width: 100%;
}
input:not([type=checkbox], [type=radio], [type=range]).focus:not(.no-focus), input:not([type=checkbox], [type=radio], [type=range]):focus:not(.no-focus), textarea.focus:not(.no-focus), textarea:focus:not(.no-focus), select.focus:not(.no-focus), select:focus:not(.no-focus), .input.focus:not(.no-focus), .input:focus:not(.no-focus) {
  box-shadow: var(--focus-ring);
}
input:not([type=checkbox], [type=radio], [type=range]):disabled, input:not([type=checkbox], [type=radio], [type=range])[disabled], input:not([type=checkbox], [type=radio], [type=range]).disabled, textarea:disabled, textarea[disabled], textarea.disabled, select:disabled, select[disabled], select.disabled, .input:disabled, .input[disabled], .input.disabled {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  box-shadow: none;
}

textarea {
  vertical-align: top;
}

input[type=color] {
  height: var(--input-outer-height);
}

/* forms/fields.scss */
.inputs {
  position: relative;
  display: inline-flex;
  border-radius: var(--border-radius);
  padding: 0;
  min-width: 0;
  color: var(--color);
  background-color: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none !important;
  font-style: normal;
  font-size: 1em;
  line-height: var(--line-height);
  transition: all var(--transition-time);
  align-items: stretch;
  white-space: nowrap;
}
.inputs:not(.inline, :has(.inline)) {
  width: 100%;
}
.inputs:has(:hover) {
  --color: var(--input-hover-color);
  --border-color: var(--input-hover-border-color);
  --background-color: var(--input-hover-background-color);
  --placeholder-color: var(--input-hover-placeholder-color);
  --fix-color: var(--fix-hover-color);
  --fix-background: var(--fix-hover-background);
}
.inputs:has(:hover) input:not([type=checkbox], [type=radio], [type=range]), .inputs:has(:hover) textarea, .inputs:has(:hover) select, .inputs:has(:hover) .input:not(.no-hover) {
  --color: var(--input-hover-color);
  --border-color: var(--input-hover-border-color);
  --background-color: var(--input-hover-background-color);
  --placeholder-color: var(--input-hover-placeholder-color);
  --fix-color: var(--fix-hover-color);
  --fix-background: var(--fix-hover-background);
}
.inputs > * {
  --border-width: 0;
  --focus-ring: none;
}
.inputs:not(.inline, :has(.inline)) {
  width: 100%;
}
.inputs .prefix, .inputs .suffix {
  padding: var(--padding-v) var(--padding-h);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--fix-color);
  transition: all var(--transition-time);
}
.inputs .prefix.shaded, .inputs .suffix.shaded {
  background-color: var(--fix-background);
}
.inputs .prefix {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputs .prefix.lined {
  border-right: var(--input-border-width) solid var(--border-color);
}
.inputs .suffix {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputs .suffix.lined {
  border-left: var(--input-border-width) solid var(--border-color);
}
.inputs.focus:not(.no-focus), .inputs:focus:not(.no-focus), .inputs:focus-within:not(.no-focus) {
  box-shadow: var(--focus-ring);
  --color: var(--input-focus-color);
  --border-color: var(--input-focus-border-color);
  --background-color: var(--input-focus-background-color);
  --fix-color: var(--fix-focus-color);
  --fix-background: var(--fix-focus-background);
}
.inputs.focus:not(.no-focus) input:not([type=checkbox], [type=radio], [type=range]), .inputs.focus:not(.no-focus) textarea, .inputs.focus:not(.no-focus) select, .inputs.focus:not(.no-focus) .input:not(.no-hover), .inputs:focus:not(.no-focus) input:not([type=checkbox], [type=radio], [type=range]), .inputs:focus:not(.no-focus) textarea, .inputs:focus:not(.no-focus) select, .inputs:focus:not(.no-focus) .input:not(.no-hover), .inputs:focus-within:not(.no-focus) input:not([type=checkbox], [type=radio], [type=range]), .inputs:focus-within:not(.no-focus) textarea, .inputs:focus-within:not(.no-focus) select, .inputs:focus-within:not(.no-focus) .input:not(.no-hover) {
  --color: var(--input-focus-color);
  --border-color: var(--input-focus-border-color);
  --background-color: var(--input-focus-background-color);
  --fix-color: var(--fix-focus-color);
  --fix-background: var(--fix-focus-background);
}

/* forms/switches.scss */
:where(select) {
  --arrow-down: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3e%3cpolyline points='6 9 12 15 18 9' style='fill:none;stroke:%23888;stroke-width:2;stroke-linecap:round;stroke-linejoin:round'%3e%3c/polyline%3e%3c/svg%3e");
}

select {
  background-color: var(--background-color);
  background: var(--arrow-down) no-repeat right 0.5em center, var(--background-color);
  padding-right: 2em;
  background-size: 1em;
  color: var(--color);
  margin-left: 0;
  appearance: none;
}
select:invalid,
select option:disabled,
select option:invalid,
select .placeholder {
  color: var(--placeholder-color);
}

/* forms/switches.scss */
:where(label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio]))) {
  --background-color: transparent;
  --border-color: transparent;
}

label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])) {
  display: inline-flex;
  align-items: center;
  color: var(--color);
  accent-color: var(--accent-color);
  padding: var(--padding-v) var(--padding-h);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--background-color);
  outline: none !important;
  transition: all 0.25s;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  flex-basis: 100%;
  line-height: var(--line-height);
  transition: all var(--transition-time);
  user-select: none;
  cursor: pointer;
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])) input {
  margin: 0 0.5rem 0 0;
  height: 1em;
  width: 1.1em;
  padding: 0;
  line-height: var(--line-height);
  outline: none;
  flex-basis: 1em;
  flex-shrink: 0;
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])) span {
  text-align: left;
  font-size: 1em;
  line-height: 1;
  padding: 0 0.5em;
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])):not(.inline) {
  width: 100%;
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])):hover {
  color: var(--input-hover-color);
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])).border {
  --background-color: var(--input-background-color);
  --border-color: var(--input-border-color);
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])).border:hover {
  --border-color:var(--input-hover-border-color);
  --background-color: var(--input-hover-background-color);
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])):has(:focus-visible):not(.no-focus) {
  --color: var(--input-focus-color);
  --border-color: var(--input-focus-border-color);
  --background-color: var(--input-focus-background-color);
  box-shadow: var(--focus-ring);
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])):disabled, label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])).disabled, label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])):has(:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  opacity: var(--input-disabled-opacity);
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])).start {
  align-items: flex-start;
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])).baseline {
  align-items: baseline;
}
label:is(.checkbox, .radio, :has(input[type=checkbox], input[type=radio])).baseline input {
  position: relative;
  top: 0.125em;
}

input[type=checkbox][role=switch] {
  --border-color: var(--grey-70);
  --background-color: var(--grey-75);
  --switch-color: var(--brand-100);
  --border-width: 2px;
  --unit-size: 1em;
  --width: calc(2 * (var(--unit-size) + var(--border-width)));
  --height: calc(var(--unit-size) + (2 * var(--border-width)));
  --transition: 0.3s;
  --border-radius: 0.25em;
  --switch-radius: calc(var(--border-radius) - var(--border-width));
  appearance: none;
  border: var(--border-width) solid var(--border-color);
  width: var(--width);
  flex-basis: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  transition: all var(--transition) ease-in-out;
}
input[type=checkbox][role=switch]::before {
  display: block;
  width: var(--unit-size);
  height: 100%;
  border-radius: var(--switch-radius);
  background-color: var(--switch-color);
  transition: margin var(--transition) ease-in-out;
  content: "";
}
input[type=checkbox][role=switch]:checked {
  --border-color: var(--brand-45);
  --background-color: var(--brand-50);
}
input[type=checkbox][role=switch]:checked::before {
  margin-left: var(--unit-size);
}
input[type=checkbox][role=switch]:hover {
  --border-color: var(--grey-65);
  --background-color: var(--grey-70);
}
input[type=checkbox][role=switch]:checked:hover {
  --border-color: var(--brand-40);
  --background-color: var(--brand-45);
}
input[type=checkbox][role=switch].rounded {
  --border-radius: 0.25em;
  --switch-radius: calc(var(--border-radius) - var(--border-width));
}
input[type=checkbox][role=switch].round {
  --border-radius: calc(var(--height) / 2);
  --switch-radius: calc(var(--unit-size) / 2);
}
input[type=checkbox][role=switch].square {
  --border-radius: 0;
  --switch-radius: 0;
}

[data-theme=dark] input[type=checkbox][role=switch] {
  --border-color: var(--grey-30);
  --background-color: var(--grey-25);
}
[data-theme=dark] input[type=checkbox][role=switch]:hover {
  --border-color: var(--grey-35);
  --background-color: var(--grey-30);
}
[data-theme=dark] input[type=checkbox][role=switch]:checked {
  --border-color: var(--brand-35);
  --background-color: var(--brand-30);
}
[data-theme=dark] input[type=checkbox][role=switch]:checked:hover {
  --border-color: var(--brand-40);
  --background-color: var(--brand-35);
}

input[type=range] {
  accent-color: var(--input-accent-color);
}
input[type=range]:not(.inline) {
  width: 100%;
}
input[type=range]:focus {
  outline: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: 16px;
}
input[type=range]::-webkit-slider-thumb {
  border-radius: 0.5em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--input-accent-color), black 40%);
  transition: box-shadow 300ms;
}
input[type=range]:focus::-webkit-slider-thumb, input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--input-accent-color), transparent 70%);
}
input[type=range]::-moz-range-track {
  height: 16px;
  border-radius: 16px;
}
input[type=range]::-moz-range-thumb {
  border-radius: 0.5em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--input-accent-color), black 40%);
  transition: box-shadow 300ms;
}
input[type=range]:focus::-moz-range-thumb, input[type=range]::-moz-range-thumb:hover {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--input-accent-color), transparent 70%);
}

/* forms/fields.scss */
.field {
  margin-bottom: var(--margin-bottom);
}
.field label:not(.checkbox, .radio, :has(input[type=checkbox]), :has(input[type=radio])) {
  display: block;
  margin-bottom: var(--label-margin);
  color: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-height);
  margin-left: var(--label-inset);
}
.field label:not(.checkbox, .radio)::after {
  display: none;
  margin-left: 1em;
  font-size: 0.8em;
  padding: 0em 0.25em;
  position: relative;
  bottom: 0.1em;
  border-radius: 0.25em;
  color: var(--tag-color);
  background-color: var(--tag-background-color);
  border: 1px solid var(--tag-border-color);
}
.field div.help {
  margin-top: var(--help-margin);
  font-size: var(--help-size);
  color: var(--help-color);
  line-height: 1.5;
  margin-left: var(--help-inset);
}
.field.valid div.help::before, .field.invalid div.help::before {
  content: var(--help-prefix);
  color: var(--help-prefix-color);
  margin-right: var(--help-prefix-margin);
}
.field.required label:not(:has(input[type=checkbox]), :has(input[type=radio]))::after {
  display: inline-block;
  content: var(--required-text);
  --tag-color: var(--required-color);
  --tag-border-color: var(--required-border-color);
  --tag-background-color: var(--required-background-color);
}
.field.optional label:not(:has(input[type=checkbox]), :has(input[type=radio]))::after {
  display: inline-block;
  content: var(--optional-text);
  --tag-color: var(--optional-color);
  --tag-border-color: var(--optional-border-color);
  --tag-background-color: var(--optional-background-color);
}
.field.pad-t-label {
  padding-top: calc(var(--label-size) * var(--label-height) + var(--label-margin));
}
.field .mar-t-label {
  margin-top: calc(var(--label-size) * var(--label-height) + var(--label-margin));
}

:is(fieldset) {
  --margin-bottom: 1rem;
  --padding-v: 1em;
  --padding-h: 1.5em;
  --border-width: 1px;
  --border-radius: 0.5rem;
  --border-color: var(--color-70);
  --border-focus: var(--color-50);
  --legend-color: var(--color-50);
  --legend-focus: var(--color-30);
  --legend-size: 0.8em;
  --background-color: var(--color-100);
}

[data-theme=dark] :is(fieldset) {
  --border-color: var(--color-30);
  --legend-color: var(--color-50);
  --border-focus: var(--color-50);
  --legend-focus: var(--color-70);
}

fieldset {
  padding: var(--padding-v) var(--padding-h);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: var(--margin-bottom);
}
fieldset legend {
  font-size: var(--legend-size);
  line-height: 1;
  padding: 0 0.5em;
  color: var(--legend-color);
}
fieldset :first-child {
  margin-top: 0;
}
fieldset :last-child {
  margin-bottom: 0;
}
fieldset:has(:focus) {
  --border-color: var(--border-focus);
  --legend-color: var(--legend-focus);
}

/* components/all.scss */
/*-- components/alerts.scss --*/
:where(.alert) {
  --border-radius: 0.25rem;
  --border-width: 1px;
  border-radius: var(--border-radius);
}

.alert {
  --padding-v: 1em;
  --padding-h: 1.5em;
  --title-margin: 0.25em;
  --inter-gap: 0.5em;
  --color: var(--color-35);
  --head-color: var(--color-20);
  --headline-color: var(--color-100);
  --background-color: var(--color-90);
  --border-color: var(--color-50);
  --headline-back: var(--color-50);
  --link-color: var(--color-50);
  --link-hover: var(--color-30);
  --bold-color: var(--color);
  margin-bottom: 1rem;
  padding: var(--padding-v) var(--padding-h);
  color: var(--color);
  background-color: var(--background-color);
  overflow: scroll;
}
.alert :first-child {
  margin-top: 0;
}
.alert :last-child {
  margin-bottom: 0;
}
.alert p {
  margin-top: 0;
  margin-bottom: var(--inter-gap);
}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert .heading {
  color: var(--head-color);
  margin: 0;
  margin-bottom: var(--title-margin) !important;
}
.alert h3 {
  font-size: 1.25em;
}
.alert a:not(button, .button) {
  transition: color 0.2s;
  color: var(--link-color);
  text-decoration: underline dotted;
}
.alert a:not(button, .button):hover {
  color: var(--hover-color);
}
.alert b {
  color: var(--bold-color);
}
.alert:has(.headline) {
  --border-color: var(--headline-back);
}
.alert .headline {
  background-color: var(--headline-back);
  color: var(--headline-color);
  margin: calc(var(--padding-v) * -1) calc(var(--padding-h) * -1) var(--padding-v);
  padding: 0.25em var(--padding-h);
}
.alert.stripe {
  --background-color: white;
  --border-width: 8px;
  border: 0;
  border-left: var(--border-width) solid var(--border-color);
}
.alert.compact {
  --padding-v: 0.25em;
  --padding-h: 0.5em;
  --title-margin: 0;
  --inter-gap: 0.25em;
}
.alert.compact .headline {
  padding: 0.125em var(--padding-h);
}

[data-theme=dark] .alert {
  --color: var(--color-70);
  --head-color: var(--color-85);
  --background-color: var(--color-15);
  --headline-color: var(--color-100);
  --headline-back: var(--color-40);
  --border-color: var(--color-40);
  --link-hover: var(--color-70);
}
[data-theme=dark] .alert.stripe {
  --border-color: var(--color-50);
  --background-color: black;
}

/*-- components/badges.scss --*/
:where(.badge) {
  --border-radius: 1em;
  --border-width: 1px;
  --tag-radius: 0.25rem;
  --tag-padding-left: 1.5em;
  --tag-padding-right: 0.5rem;
  --hole-size: 0.25rem;
  --color: var(--color-45);
  --background-color: var(--color-95);
  --border-color: var(--color-75);
  --hole-color: var(--color-100);
  --fix-color: var(--color-40);
  --fix-background: var(--color-90);
  --fixed-background: var(--color-100);
}

.badge {
  --padding-v: 0.25em;
  --padding-h: calc(var(--unit-padding-h) + (var(--border-radius) / 2));
  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
  --inner-padding-h: calc(var(--padding-h) * 0.75);
  display: inline-block;
  position: relative;
  padding: var(--padding-v) var(--padding-h);
  color: var(--color);
  background-color: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  text-wrap: nowrap;
  line-height: 1;
}
.badge.compact {
  --border-radius: 0.25em;
  --padding-v: 0.1875em;
  --padding-h: 0.375em;
}
.badge.tag {
  border-radius: var(--border-radius) var(--tag-radius) var(--tag-radius) var(--border-radius);
  padding-left: var(--tag-padding-left);
  padding-right: var(--tag-padding-right);
}
.badge.tag::after {
  position: absolute;
  left: 0.5em;
  top: 50%;
  height: 0.5em;
  width: 0.5em;
  content: "";
  background-color: var(--hole-color);
  border: 2px solid var(--border-color);
  border-radius: 0.25em;
  transform: translate(0, -50%);
}
.badge:has(.prefix, .suffix) {
  background-color: var(--fixed-background);
  display: inline-flex;
}
.badge:has(.prefix, .suffix) .prefix, .badge:has(.prefix, .suffix) .suffix {
  color: var(--fix-color);
  background-color: var(--fix-background);
  margin: calc(0px - var(--padding-v)) 0;
  padding: var(--padding-v) var(--padding-h);
}
.badge:has(.prefix, .suffix) .prefix {
  margin-right: var(--padding-h);
  margin-right: var(--inner-padding-h);
  padding-right: var(--inner-padding-h);
  border-top-left-radius: var(--inner-border-radius);
  border-bottom-left-radius: var(--inner-border-radius);
  border-right: 1px solid var(--border-color);
}
.badge:has(.prefix, .suffix) .suffix {
  margin-left: var(--inner-padding-h);
  padding-left: var(--inner-padding-h);
  border-top-right-radius: var(--inner-border-radius);
  border-bottom-right-radius: var(--inner-border-radius);
  border-left: 1px solid var(--border-color);
}
.badge:has(.prefix, .suffix).compact .prefix {
  padding-right: var(--padding-h);
  margin-right: var(--padding-h);
}
.badge:has(.prefix, .suffix).compact .suffix {
  padding-left: var(--padding-h);
  margin-left: var(--padding-h);
}
.badge:has(.prefix) {
  padding-left: 0;
}
.badge:has(.suffix) {
  padding-right: 0;
}

[data-theme=dark] .badge {
  --color: var(--color-55);
  --background-color: var(--color-10);
  --border-color: var(--color-40);
  --hole-color: var(--color-0);
  --fix-color: var(--color-60);
  --fix-background: var(--color-20);
  --fixed-background: var(--color-10);
}

/*-- components/details.scss --*/
details, .details {
  --icon-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3e%3cpolyline points='6 9 12 15 18 9' style='fill:none;stroke:rgba%280%2C0%2C0%2C0.5%29%0A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round'%3e%3c/polyline%3e%3c/svg%3e");
  --icon-align: left;
  --icon-margin: 0.25rem;
  --icon-position: 0em;
  --icon-padding: 1.5em;
  --icon-rotate: -90deg;
  --icon-transition: 0.25s;
  --body-padding: 0;
  --head-margin: 0.25em;
  --head-shade-back: var(--color-90);
  --head-shade-text: var(--color-20);
  --hover-shade-back: var(--color-85);
  --hover-shade-text: var(--color-10);
  --body-shade-back: var(--color-95);
  --body-shade-text: var(--color-30);
  --shade-transition: 0.25s;
  overflow: visible;
  padding: 0 var(--body-padding);
}
details > *:last-child, .details > *:last-child {
  margin-block-end: var(--body-padding);
}
details.lined, .details.lined {
  --head-margin: 0.5em;
}
details.border, details.shaded, .details.border, .details.shaded {
  --icon-position: 0.5em;
  --icon-padding: 2em;
  --body-padding: 1em;
  --head-margin: 0.5em;
}
details.border.shaded, details.border.lined, details.shaded.shaded, details.shaded.lined, .details.border.shaded, .details.border.lined, .details.shaded.shaded, .details.shaded.lined {
  --head-margin: 1em;
}
details.shaded, .details.shaded {
  background-color: var(--body-shade-back);
  color: var(--body-shade-text);
}
details.icon-right, .details.icon-right {
  --icon-align: left;
}

details > summary, .details > .summary {
  display: flex;
  position: relative;
  margin: 0 calc(0rem - var(--body-padding));
  padding: 0.25em 0;
  padding-left: var(--body-padding);
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker, .details > .summary::-webkit-details-marker {
  display: none;
}
details > summary > *, .details > .summary > * {
  display: inline;
}
details > summary::before, .details > .summary::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0.25em var(--icon-margin) 0 var(--icon-position);
  line-height: inherit;
  /*
  background-image: var(--icon-svg);
  background-position: var(--icon-align) 0 center;
  background-repeat: no-repeat;
  background-size: 1em;
  transform: rotate(var(--icon-rotate));
  transition: transform var(--icon-transition) ease-in-out;
  content: "";
  */
}

details:not(.no-icon) > summary,
.details:not(.no-icon) > .summary {
  padding-left: 0;
}
details:not(.no-icon) > summary::before,
.details:not(.no-icon) > .summary::before {
  background-image: var(--icon-svg);
  background-position: var(--icon-align) 0 center;
  background-repeat: no-repeat;
  background-size: 1em;
  transform: rotate(var(--icon-rotate));
  transition: transform var(--icon-transition) ease-in-out;
  content: "";
}

details[open], .details.open {
  --icon-rotate: 0deg;
}

details[open] > summary, .details.open > .summary {
  margin-bottom: var(--head-margin);
}

details.lined[open] > summary, .details.lined.open > .summary {
  border-bottom: var(--line-width) var(--line-style) var(--line-color);
}

details.shaded > summary, .details.shaded > .summary {
  transition: background-color var(--shade-transition);
  background-color: var(--head-shade-back);
  color: var(--head-shade-text);
}
details.shaded > summary:hover, .details.shaded > .summary:hover {
  color: var(--hover-shade-text);
  background-color: var(--hover-shade-back);
}

:is(details[class*=bdr-],
.details[class*=bdr-],
details.radius,
.details.radius) > summary {
  border-top-left-radius: calc(var(--radius-top-left) - var(--border-width));
  border-top-right-radius: calc(var(--radius-top-right) - var(--border-width));
}

:is(details[class*=bdr-],
.details[class*=bdr-],
details.radius,
.details.radius):not([open]) > summary {
  border-bottom-left-radius: calc(var(--radius-bottom-left) - var(--border-width));
  border-bottom-right-radius: calc(var(--radius-bottom-right) - var(--border-width));
}

.accordion > details.shaded:not(:first-child), .accordion > details.border:not(:first-child), .accordion > .details.shaded:not(:first-child), .accordion > .details.border:not(:first-child) {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion > details.shaded:not(:first-child) > summary, .accordion > details.shaded:not(:first-child) > .summary, .accordion > details.border:not(:first-child) > summary, .accordion > details.border:not(:first-child) > .summary, .accordion > .details.shaded:not(:first-child) > summary, .accordion > .details.shaded:not(:first-child) > .summary, .accordion > .details.border:not(:first-child) > summary, .accordion > .details.border:not(:first-child) > .summary {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion > details.shaded:not(:last-child), .accordion > details.border:not(:last-child), .accordion > .details.shaded:not(:last-child), .accordion > .details.border:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion > details.shaded:not(:last-child) > summary, .accordion > details.shaded:not(:last-child) > .summary, .accordion > details.border:not(:last-child) > summary, .accordion > details.border:not(:last-child) > .summary, .accordion > .details.shaded:not(:last-child) > summary, .accordion > .details.shaded:not(:last-child) > .summary, .accordion > .details.border:not(:last-child) > summary, .accordion > .details.border:not(:last-child) > .summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

:where(details.lined, .details.lined) {
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--color-75);
  --border-radius: 0;
  --line-width: var(--border-width);
  --line-style: var(--border-style);
  --line-color: var(--border-color);
}

:where([data-theme=dark]) details.lined, :where([data-theme=dark]) .details.line, :where([data-theme=dark]) details.border, :where([data-theme=dark]) .details.border {
  --border-color: var(--color-25);
  --line-color: var(--border-color);
}

[data-theme=dark] details, [data-theme=dark] .details {
  --icon-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3e%3cpolyline points='6 9 12 15 18 9' style='fill:none;stroke:rgba%28255%2C255%2C255%2C0.5%29%0A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round'%3e%3c/polyline%3e%3c/svg%3e");
  --head-shade-back: var(--color-20);
  --head-shade-text: var(--color-90);
  --hover-shade-back: var(--color-25);
  --hover-shade-text: var(--color-100);
  --body-shade-back: var(--color-10);
  --body-shade-text: var(--color-70);
}

/*-- components/dialog.scss --*/
:where(dialog) {
  --border-width: 1px;
  --border-radius: 0.25rem;
  --background-color: var(--grey-100);
  --border-color: var(--grey-30);
  --header-background: var(--grey-95);
  --footer-background: var(--grey-95);
  --divider-color: var(--grey-90);
  --close-color: var(--grey-10);
  --close-background: var(--grey-90);
  --close-hover-color: var(--grey-100);
  --close-hover-background: var(--brand-50);
  --max-width: 80vw;
  --max-height: 90vh;
  --padding: 1.5rem;
  --animation-time: 0.3s;
}

[data-theme=dark] dialog {
  --background-color: var(--grey-20);
  --border-color: var(--grey-40);
  --close-background: var(--grey-40);
  --header-background: var(--grey-15);
  --footer-background: var(--grey-15);
  --divider-color: var(--grey-10);
}

dialog {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--background-color);
  position: relative;
  border-radius: 8px;
  padding: var(--padding);
  box-shadow: var(--shadow-4);
  max-height: var(--max-height);
  max-width: var(--max-width);
  animation: var(--animation-time) dialog ease-in-out;
}
dialog > .close {
  transition: all 0.25s;
  position: absolute;
  top: 0;
  right: 0;
  color: var(--close-color);
  background-color: var(--close-background);
  padding: 0 calc(0.5em + var(--border-radius) / 2);
  border-radius: 0 calc(var(--border-radius) - var(--border-width)) 0 var(--border-radius);
  border: 1px solid var(--close-background);
  line-height: 1.6;
}
dialog > .close:hover {
  color: var(--close-hover-color);
  background-color: var(--close-hover-background);
  border-color: var(--close-hover-background);
}
dialog > article > header, dialog > article > footer {
  margin: calc(var(--padding) * -1);
  padding: var(--padding);
}
dialog > article > header {
  margin-bottom: var(--padding);
  border-bottom: 1px solid var(--divider-color);
  background-color: var(--header-background);
}
dialog > article > footer {
  margin-top: var(--padding);
  border-top: 1px solid var(--divider-color);
  background-color: var(--footer-background);
}
@keyframes dialog {
  from {
    transform-origin: center;
    transform: scale(80%);
    opacity: 0;
  }
}
@keyframes backdrop {
  from {
    opacity: 0;
  }
}

dialog::backdrop {
  --backdrop-color: rgba(0,0,0,0.5);
  --backdrop-filter: blur(2px);
  --animation-time: 0.6s;
  backdrop-filter: var(--backdrop-filter);
  background-color: var(--backdrop-color);
  animation: var(--animation-time) backdrop ease-in-out;
}

/*-- components/icons.scss --*/
:where(html) {
  --icon-margin: 0.5em;
  --icon-pull: -0.125em;
}

svg.fill-fg, svg .fill-fg {
  fill: var(--color);
}
svg.fill-bg, svg .fill-bg {
  fill: var(--background-color);
}
svg.stroke-fg, svg .stroke-fg {
  stroke: var(--color);
}
svg.stroke-bg, svg .stroke-bg {
  stroke: var(--background-color);
}
svg.icon {
  overflow: visible;
  box-sizing: content-box;
  display: inline-block;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  text-align: center;
}
svg.icon.on-left {
  margin-left: var(--icon-pull);
  margin-right: var(--icon-margin);
}
svg.icon.on-right {
  margin-left: var(--icon-margin);
  margin-right: var(--icon-pull);
}
svg.icon.spin {
  animation: linear var(--icon-animation-time, 2s) var(--icon-animation-repeat, infinite) spin;
  animation-direction: var(--icon-animation-direction, normal);
}
svg.icon.beat {
  animation: linear var(--icon-animation-time, 1s) var(--icon-animation-repeat, infinite) beat;
}
svg.icon.beat.fast {
  --icon-animation-time: 0.5s;
}
svg.icon.beat.slow {
  --icon-animation-time: 2s;
}
svg.icon.reverse {
  --icon-animation-direction: reverse;
}
svg.icon.fast {
  --icon-animation-time: 1s;
}
svg.icon.slow {
  --icon-animation-time: 4s;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes beat {
  0%, 70% {
    transform: scale(1);
  }
  10% {
    transform: scale(var(--icon-beat-scale, 1.25));
  }
}

@media (prefers-reduced-motion: reduce) {
  svg.icon.spin {
    --icon-animation-time: 0;
    --icon-animation-repeat: 0;
  }
}
.flc-0 {
  fill: var(--color-0) !important;
}

.flc-5 {
  fill: var(--color-5) !important;
}

.flc-10 {
  fill: var(--color-10) !important;
}

.flc-15 {
  fill: var(--color-15) !important;
}

.flc-20 {
  fill: var(--color-20) !important;
}

.flc-25 {
  fill: var(--color-25) !important;
}

.flc-30 {
  fill: var(--color-30) !important;
}

.flc-35 {
  fill: var(--color-35) !important;
}

.flc-40 {
  fill: var(--color-40) !important;
}

.flc-45 {
  fill: var(--color-45) !important;
}

.flc-50 {
  fill: var(--color-50) !important;
}

.flc-55 {
  fill: var(--color-55) !important;
}

.flc-60 {
  fill: var(--color-60) !important;
}

.flc-65 {
  fill: var(--color-65) !important;
}

.flc-70 {
  fill: var(--color-70) !important;
}

.flc-75 {
  fill: var(--color-75) !important;
}

.flc-80 {
  fill: var(--color-80) !important;
}

.flc-85 {
  fill: var(--color-85) !important;
}

.flc-90 {
  fill: var(--color-90) !important;
}

.flc-95 {
  fill: var(--color-95) !important;
}

.flc-100 {
  fill: var(--color-100) !important;
}

.stc-0 {
  stroke: var(--color-0) !important;
}

.stc-5 {
  stroke: var(--color-5) !important;
}

.stc-10 {
  stroke: var(--color-10) !important;
}

.stc-15 {
  stroke: var(--color-15) !important;
}

.stc-20 {
  stroke: var(--color-20) !important;
}

.stc-25 {
  stroke: var(--color-25) !important;
}

.stc-30 {
  stroke: var(--color-30) !important;
}

.stc-35 {
  stroke: var(--color-35) !important;
}

.stc-40 {
  stroke: var(--color-40) !important;
}

.stc-45 {
  stroke: var(--color-45) !important;
}

.stc-50 {
  stroke: var(--color-50) !important;
}

.stc-55 {
  stroke: var(--color-55) !important;
}

.stc-60 {
  stroke: var(--color-60) !important;
}

.stc-65 {
  stroke: var(--color-65) !important;
}

.stc-70 {
  stroke: var(--color-70) !important;
}

.stc-75 {
  stroke: var(--color-75) !important;
}

.stc-80 {
  stroke: var(--color-80) !important;
}

.stc-85 {
  stroke: var(--color-85) !important;
}

.stc-90 {
  stroke: var(--color-90) !important;
}

.stc-95 {
  stroke: var(--color-95) !important;
}

.stc-100 {
  stroke: var(--color-100) !important;
}

[data-theme=dark] .fld-0 {
  fill: var(--color-0) !important;
}
[data-theme=dark] .fld-5 {
  fill: var(--color-5) !important;
}
[data-theme=dark] .fld-10 {
  fill: var(--color-10) !important;
}
[data-theme=dark] .fld-15 {
  fill: var(--color-15) !important;
}
[data-theme=dark] .fld-20 {
  fill: var(--color-20) !important;
}
[data-theme=dark] .fld-25 {
  fill: var(--color-25) !important;
}
[data-theme=dark] .fld-30 {
  fill: var(--color-30) !important;
}
[data-theme=dark] .fld-35 {
  fill: var(--color-35) !important;
}
[data-theme=dark] .fld-40 {
  fill: var(--color-40) !important;
}
[data-theme=dark] .fld-45 {
  fill: var(--color-45) !important;
}
[data-theme=dark] .fld-50 {
  fill: var(--color-50) !important;
}
[data-theme=dark] .fld-55 {
  fill: var(--color-55) !important;
}
[data-theme=dark] .fld-60 {
  fill: var(--color-60) !important;
}
[data-theme=dark] .fld-65 {
  fill: var(--color-65) !important;
}
[data-theme=dark] .fld-70 {
  fill: var(--color-70) !important;
}
[data-theme=dark] .fld-75 {
  fill: var(--color-75) !important;
}
[data-theme=dark] .fld-80 {
  fill: var(--color-80) !important;
}
[data-theme=dark] .fld-85 {
  fill: var(--color-85) !important;
}
[data-theme=dark] .fld-90 {
  fill: var(--color-90) !important;
}
[data-theme=dark] .fld-95 {
  fill: var(--color-95) !important;
}
[data-theme=dark] .fld-100 {
  fill: var(--color-100) !important;
}
[data-theme=dark] .std-0 {
  stroke: var(--color-0) !important;
}
[data-theme=dark] .std-5 {
  stroke: var(--color-5) !important;
}
[data-theme=dark] .std-10 {
  stroke: var(--color-10) !important;
}
[data-theme=dark] .std-15 {
  stroke: var(--color-15) !important;
}
[data-theme=dark] .std-20 {
  stroke: var(--color-20) !important;
}
[data-theme=dark] .std-25 {
  stroke: var(--color-25) !important;
}
[data-theme=dark] .std-30 {
  stroke: var(--color-30) !important;
}
[data-theme=dark] .std-35 {
  stroke: var(--color-35) !important;
}
[data-theme=dark] .std-40 {
  stroke: var(--color-40) !important;
}
[data-theme=dark] .std-45 {
  stroke: var(--color-45) !important;
}
[data-theme=dark] .std-50 {
  stroke: var(--color-50) !important;
}
[data-theme=dark] .std-55 {
  stroke: var(--color-55) !important;
}
[data-theme=dark] .std-60 {
  stroke: var(--color-60) !important;
}
[data-theme=dark] .std-65 {
  stroke: var(--color-65) !important;
}
[data-theme=dark] .std-70 {
  stroke: var(--color-70) !important;
}
[data-theme=dark] .std-75 {
  stroke: var(--color-75) !important;
}
[data-theme=dark] .std-80 {
  stroke: var(--color-80) !important;
}
[data-theme=dark] .std-85 {
  stroke: var(--color-85) !important;
}
[data-theme=dark] .std-90 {
  stroke: var(--color-90) !important;
}
[data-theme=dark] .std-95 {
  stroke: var(--color-95) !important;
}
[data-theme=dark] .std-100 {
  stroke: var(--color-100) !important;
}

/*-- components/menu.scss --*/
:where(.menu) {
  --item-padding-v: 0.25em;
  --item-padding-h: 0.5em;
  --item-color: var(--color-10);
  --item-background: var(--color-100);
  --item-border-width: 1px;
  --item-border-style: solid;
  --item-border-color: var(--color-90);
  --active-color: var(--selectable-color);
  --active-background: var(--selectable-background);
  --heading-weight: 500;
  --heading-size: var(--size-smaller);
  --heading-padding-h: 0.67em;
  --heading-color: var(--color-30);
  --heading-background: var(--color-95);
  --none-color: var(--orange-30);
  --none-background: var(--orange-100);
  --separator-width: 4px;
  --separator-style: var(--item-border-style);
  --separator-color: var(--item-border-color);
  --disabled-opacity: 0.5;
  --z-index: 100;
}

:where([data-theme=dark] .menu) {
  --item-color: var(--color-90);
  --item-background: var(--color-0);
  --item-border-color: var(--color-15);
  --heading-color: var(--color-100);
  --heading-background: var(--color-5);
  --none-color: var(--orange-40);
  --none-background: var(--orange-0);
}

.menu {
  --item-border: none;
  --inner-radius: calc(var(--border-radius) - var(--border-width));
  z-index: var(--z-index);
}
.menu.border, .menu.lined {
  --item-border: var(--item-border-width) var(--item-border-style) var(--item-border-color);
}
.menu .item, .menu .none {
  color: var(--item-color);
  background-color: var(--item-background);
  padding: var(--item-padding-v) var(--item-padding-h);
  border-bottom: var(--item-border);
}
.menu .item:first-child, .menu .none:first-child {
  border-top-left-radius: var(--inner-radius);
  border-top-right-radius: var(--inner-radius);
}
.menu .item:last-child, .menu .none:last-child {
  border-bottom: none;
  border-bottom-left-radius: var(--inner-radius);
  border-bottom-right-radius: var(--inner-radius);
}
.menu .item.heading, .menu .none.heading {
  --item-padding-h: var(--heading-padding-h);
  color: var(--heading-color);
  font-weight: var(--heading-weight);
  font-size: var(--heading-size);
  margin: 0;
  background-color: var(--heading-background);
}
.menu .item.active, .menu .item:hover:not(.disabled):not(.no-hover), .menu .item.selected, .menu .none.active, .menu .none:hover:not(.disabled):not(.no-hover), .menu .none.selected {
  cursor: pointer;
  background-color: var(--active-background);
  color: var(--active-color);
}
.menu .item.active *, .menu .item:hover:not(.disabled):not(.no-hover) *, .menu .item.selected *, .menu .none.active *, .menu .none:hover:not(.disabled):not(.no-hover) *, .menu .none.selected * {
  background-color: transparent;
  color: var(--active-color);
}
.menu .item.active .inverse, .menu .item.active .badge, .menu .item.active .button, .menu .item.active button, .menu .item:hover:not(.disabled):not(.no-hover) .inverse, .menu .item:hover:not(.disabled):not(.no-hover) .badge, .menu .item:hover:not(.disabled):not(.no-hover) .button, .menu .item:hover:not(.disabled):not(.no-hover) button, .menu .item.selected .inverse, .menu .item.selected .badge, .menu .item.selected .button, .menu .item.selected button, .menu .none.active .inverse, .menu .none.active .badge, .menu .none.active .button, .menu .none.active button, .menu .none:hover:not(.disabled):not(.no-hover) .inverse, .menu .none:hover:not(.disabled):not(.no-hover) .badge, .menu .none:hover:not(.disabled):not(.no-hover) .button, .menu .none:hover:not(.disabled):not(.no-hover) button, .menu .none.selected .inverse, .menu .none.selected .badge, .menu .none.selected .button, .menu .none.selected button {
  border-color: color-mix(in srgb, var(--active-color), transparent 30%);
  background-color: color-mix(in srgb, var(--active-color), transparent 80%);
}
.menu .item.selected, .menu .none.selected {
  background-color: var(--selected-background);
  animation: selection 0.3s;
}
@keyframes selection {
  0%, 100% {
    background-color: var(--active-background);
  }
  50% {
    background-color: var(--selected-background);
  }
}
.menu .item.disabled, .menu .item:disabled, .menu .item[aria-disabled=true], .menu .none.disabled, .menu .none:disabled, .menu .none[aria-disabled=true] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: var(--disabled-opacity);
}
.menu .none {
  color: var(--none-color);
  background-color: var(--none-background);
}
.menu .separator {
  border-bottom: var(--separator-width) var(--separator-style) var(--separator-color);
}

table:has(div.menu) {
  overflow: visible;
}

.menu .item.indent-1 {
  padding-left: calc(var(--item-padding-h) * 2);
}

.menu .item.indent-2 {
  padding-left: calc(var(--item-padding-h) * 3);
}

.menu .item.indent-3 {
  padding-left: calc(var(--item-padding-h) * 4);
}

.menu .item.indent-4 {
  padding-left: calc(var(--item-padding-h) * 5);
}

/*-- components/overlay.scss --*/
:where(.overlay) {
  --color: var(--color-0);
  --animation-time: 0.3s;
  --backdrop-filter: blur(1px);
  --background-opacity: 10%;
  --background-color: var(--color-100);
}

[data-theme=dark] .overlay {
  --color: var(--color-100);
  --background-color: var(--color-0);
  --background-opacity: 20%;
}

.overlay {
  --background: color-mix(
    in srgb,
    var(--background-color),
    transparent var(--background-opacity)
  );
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  color: var(--color);
  backdrop-filter: var(--backdrop-filter);
  background: var(--background-color);
  background: var(--background);
  animation: var(--animation-time) overlay ease-in-out;
  z-index: 999;
}
.overlay.fixed {
  position: fixed;
  z-index: 9999;
}
.overlay.light {
  --color: var(--color-0);
  --background-color: var(--color-100);
}
.overlay.dark {
  --color: var(--color-100);
  --background-color: var(--color-0);
}
@keyframes overlay {
  from {
    opacity: 0;
  }
}

/*-- components/selectable.scss --*/
:where(html) {
  --selectable-color: var(--brand-100);
  --selectable-background: var(--brand-50);
  --selected-background: var(--brand-40);
}

:where([data-theme=dark]) {
  --selectable-background: var(--brand-40);
  --selected-background: var(--brand-30);
}

/*-- components/tables.scss --*/
:where(table) {
  --border-width: 1px;
  --border-radius: 0.25rem;
}

table {
  --table-padding-v: 0.25em;
  --table-padding-h: 0.5em;
  --table-border-width: var(--border-width);
  --border-radius: 0.25rem;
  --border-right: 0;
  --table-border: var(--color-80);
  --background-color: var(--table-back);
  --border-color: var(--table-back);
  --border-bottom: var(--table-border-width);
  --padding-v: var(--table-padding-v);
  --padding-h: var(--table-padding-h);
  --padding-l: var(--padding-h);
  --padding-r: var(--padding-h);
  --padding-t: var(--padding-v);
  --padding-b: var(--padding-v);
  --valign: middle;
  border-collapse: separate;
  border-spacing: 0px;
  border-radius: var(--border-radius);
  overflow: hidden;
}
table > :first-child > tr:first-child > :first-child {
  border-top-left-radius: var(--border-radius-1);
}
table > :first-child > tr:first-child > :last-child {
  border-top-right-radius: var(--border-radius-1);
}
table > :last-child > tr:last-child > :first-child {
  border-bottom-left-radius: var(--border-radius-1);
}
table > :last-child > tr:last-child > :last-child {
  border-bottom-right-radius: var(--border-radius-1);
}
table tr {
  --table-text: var(--color-25);
  --table-head: var(--color-20);
  --table-back: var(--color-none);
  --table-line: var(--table-border);
  --table-shade-1: var(--color-100);
  --table-shade-2: var(--color-95);
  --table-shade-3: var(--color-90);
  --table-shade-4: var(--color-85);
  --color: var(--table-text);
  --background-color: var(--table-back);
}
table tr th, table tr td {
  padding: var(--padding-t) var(--padding-r) var(--padding-b) var(--padding-l);
  color: var(--color);
  background-color: var(--background-color);
  border-bottom: var(--border-bottom) solid var(--border-color);
  border-right: var(--border-right) solid var(--border-color);
  transition: background-color 0.3s ease, color 0.1s ease;
  text-align: inherit;
  white-space: inherit;
  vertical-align: var(--valign);
}
table tr th, table tr td.key {
  --color: var(--table-head);
}
table tr > *:first-child {
  --padding-l: 0;
}
table tr > *:last-child {
  --padding-r: 0;
}
table.lined tr {
  --border-color: var(--table-line);
  --border-bottom: var(--border-width);
}
table.lined :last-child > tr:last-child > * {
  --border-bottom: 0;
}
table.celled {
  --border-color: var(--table-border);
  --border-right: var(--border-width);
  border: var(--border-width) solid var(--border-color);
}
table.celled > * tr > *:last-child {
  --border-right: 0;
}
table.celled :last-child > tr:last-child > *:last-child {
  --border-right: 0;
}
table.celled :last-child > tr:last-child:last-child > * {
  --border-bottom: 0;
}
table.celled tr > *:first-child, table.shaded tr > *:first-child, table.striped tr > *:first-child {
  --padding-l: var(--padding-h);
}
table.celled tr > *:last-child, table.shaded tr > *:last-child, table.striped tr > *:last-child {
  --padding-r: var(--padding-h);
}
table.shaded th, table.striped th {
  --background-color: var(--table-shade-3);
}
table.shaded thead th, table.striped thead th {
  --background-color: var(--table-shade-4);
}
table.shaded td, table.striped td {
  --background-color: var(--table-shade-2);
}
table.striped tr:nth-child(odd) th {
  --background-color: var(--table-shade-4);
}
table.striped tr:nth-child(odd) td {
  --background-color: var(--table-shade-1);
}
table.even {
  table-layout: fixed;
}
table.even-2 td {
  width: 50% !important;
}
table.even-3 td {
  width: 33.33% !important;
}
table .even-4 td {
  width: 25% !important;
}
table .even-5 td {
  width: 20% !important;
}
table.compressed, table.compact {
  --table-padding-v: 0.125em;
  --table-padding-h: 0.25em;
}
table.expanded {
  --table-padding-v: 0.5em;
  --table-padding-h: 1em;
}
table.selectable tbody tr:hover:not(.unselectable) > *:not(.no-hover) {
  color: var(--selectable-color);
  background-color: var(--selectable-background);
  cursor: pointer;
}
table.top, table tr.top, table tr > *.top {
  --valign: top;
}
table.baseline, table tr.baseline, table tr > *.baseline {
  --valign: baseline;
}
table.middle, table tr.middle, table tr > *.middle {
  --valign: middle;
}
table.bottom, table tr.bottom, table tr > *.bottom {
  --valign: bottom;
}

[data-theme=dark] table {
  --table-border: var(--color-20);
}
[data-theme=dark] table tr {
  --table-text: var(--color-85);
  --table-head: var(--color-90);
  --table-back: var(--color-none);
  --table-line: var(--table-border);
  --table-shade-1: var(--color-0);
  --table-shade-2: var(--color-5);
  --table-shade-3: var(--color-10);
  --table-shade-4: var(--color-15);
}

/*-- components/tabs.scss --*/
:where(.tabset) {
  --tab-margin: 0.25rem;
  --tab-padding-h: 0.5em;
  --tab-padding-v: 0.25em;
  --tab-border-width: 1px;
  --tab-border-radius: 0.25rem;
  --tab-line-width: 1px;
  --tab-transition-time: 0.3s;
  --tab-disabled-opacity: 0.5;
  --tab-color: var(--color-30);
  --tab-background: var(--color-90);
  --tab-border-color: var(--color-80);
  --tab-hover-color: var(--color-20);
  --tab-hover-background: var(--color-95);
  --tab-hover-border-color: var(--color-75);
  --tab-active-color: var(--color-10);
  --tab-active-background: var(--color-100);
  --tab-active-border-color: var(--color-70);
}

[data-theme=dark] .tabset {
  --tab-color: var(--color-70);
  --tab-background: var(--color-10);
  --tab-border-color: var(--color-20);
  --tab-hover-color: var(--color-80);
  --tab-hover-background: var(--color-5);
  --tab-hover-border-color: var(--color-25);
  --tab-active-color: var(--color-90);
  --tab-active-background: var(--color-0);
  --tab-active-border-color: var(--color-30);
}

.tabset > .tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--tab-margin);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.tabset > .tabs > *, .tabset > .tabs .tab {
  flex: 0 0 auto;
  margin: 0;
  border: var(--tab-border-width) solid var(--tab-border-color);
  padding: var(--tab-padding-v) var(--tab-padding-h);
  color: var(--tab-color);
  background: var(--tab-background);
  border-radius: var(--tab-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition: all var(--tab-transition-time) ease-out;
}
.tabset > .tabs > *.active, .tabset > .tabs .tab.active {
  color: var(--tab-active-color);
  background: var(--tab-active-background);
  border-color: var(--tab-active-border-color);
}
.tabset > .tabs > *:hover:not(.disabled), .tabset > .tabs .tab:hover:not(.disabled) {
  cursor: pointer;
}
.tabset > .tabs > *:hover:not(.disabled):not(.active), .tabset > .tabs .tab:hover:not(.disabled):not(.active) {
  color: var(--tab-hover-color);
  background: var(--tab-hover-background);
  border-color: var(--tab-hover-border-color);
}
.tabset > .tabs > *.disabled, .tabset > .tabs > *:disabled, .tabset > .tabs .tab.disabled, .tabset > .tabs .tab:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: var(--tab-disabled-opacity);
}
.tabset.center > .tabs {
  justify-content: center;
}
.tabset.right > .tabs {
  justify-content: right;
}
.tabset.lined > .tabs {
  border-bottom: var(--tab-line-width) solid var(--tab-active-border-color);
  overflow: visible;
}
.tabset.lined > .tabs > *, .tabset.lined > .tabs .tab {
  margin-bottom: calc(var(--tab-line-width) * -1);
  border-bottom-width: var(--tab-line-width);
  border-bottom-color: var(--tab-active-border-color);
}
.tabset.lined > .tabs > *.active, .tabset.lined > .tabs .tab.active {
  border-bottom-color: var(--tab-active-background);
}
.tabset.solid {
  --tab-hover-background: var(--color-85);
  --tab-active-color: var(--color-100);
  --tab-active-background: var(--color-50);
  --tab-border-color: var(--tab-background);
  --tab-hover-border-color: var(--tab-hover-background);
  --tab-active-border-color: var(--tab-active-background);
}
.tabset.solid.lined > .tabs {
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: var(--tab-line-width) solid var(--tab-active-border-color);
}

/*-- components/tooltip.scss --*/
:where(html) {
  --tooltip-color: var(--grey-90);
  --tooltip-background: var(--grey-10);
  --tooltip-opacity: 1;
  --tooltip-radius: 0.25rem;
  --tooltip-arrow: 8px;
  --tooltip-padding: 0.5em 1em;
  --tooltip-margin: 4px;
  --tooltip-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  --tooltip-transition: 0.3s;
  --tooltip-delay: 0.2s;
  --tooltip-font-size: 1em;
  --tooltip-font-weight: inherit;
}

[data-theme=dark] {
  --tooltip-color: var(--grey-10);
  --tooltip-background: var(--grey-90);
}

[data-tooltip] {
  --tooltip-ty: 0;
  --tooltip-tx: 0;
  --tooltip-top: auto;
  --tooltip-left: auto;
  --tooltip-right: auto;
  --tooltip-bottom: auto;
  --tooltip-margin-incl: calc(100% + var(--tooltip-margin) + var(--tooltip-arrow));
  --tooltip-margin-excl: calc(100% + var(--tooltip-margin) - var(--tooltip-arrow));
  position: relative;
}
[data-tooltip]:before, [data-tooltip]:after,
[data-tooltip] .tooltip {
  position: absolute;
  display: block;
  opacity: 0;
  transition: opacity var(--tooltip-transition);
  transition-delay: var(--tooltip-delay);
  transform: translate(var(--tooltip-tx, 0), var(--tooltip-ty, 0));
  top: var(--tooltip-top, auto);
  left: var(--tooltip-left, auto);
  right: var(--tooltip-right, auto);
  bottom: var(--tooltip-bottom, auto);
  pointer-events: none;
}
[data-tooltip]:before,
[data-tooltip] .tooltip {
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  min-width: 12em;
  max-width: 50vw;
  width: fit-content;
  white-space: normal;
  color: var(--tooltip-color);
  background-color: var(--tooltip-background);
  padding: var(--tooltip-padding);
  border-radius: var(--tooltip-radius);
  box-shadow: var(--tooltip-shadow);
  z-index: 999;
  text-align: center;
}
[data-tooltip]:before {
  content: attr(aria-label);
}
[data-tooltip]:after {
  content: "";
  z-index: 998;
  border: var(--tooltip-arrow) solid transparent;
}
[data-tooltip].tt-wide:before {
  white-space: pre;
}
[data-tooltip]:hover, [data-tooltip].visible {
  cursor: pointer;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after,
[data-tooltip]:hover .tooltip, [data-tooltip].visible:before, [data-tooltip].visible:after,
[data-tooltip].visible .tooltip {
  z-index: 999;
  opacity: var(--tooltip-opacity);
}
[data-tooltip]:hover:not([aria-label]):before, [data-tooltip].visible:not([aria-label]):before {
  opacity: 0;
}
[data-tooltip][data-tooltip*=right], [data-tooltip][data-tooltip*=left] {
  --tooltip-top: 50%;
  --tooltip-ty: -50%;
}
[data-tooltip][data-tooltip*=left]:before, [data-tooltip][data-tooltip*=left] .tooltip {
  --tooltip-right: var(--tooltip-margin-incl);
}
[data-tooltip][data-tooltip*=left]:after {
  --tooltip-right: var(--tooltip-margin-excl);
  border-left-color: var(--tooltip-background);
}
[data-tooltip][data-tooltip*=right]:before, [data-tooltip][data-tooltip*=right] .tooltip {
  --tooltip-left: var(--tooltip-margin-incl);
}
[data-tooltip][data-tooltip*=right]:after {
  --tooltip-left: var(--tooltip-margin-excl);
  border-right-color: var(--tooltip-background);
}
[data-tooltip][data-tooltip=""], [data-tooltip][data-tooltip*=top], [data-tooltip][data-tooltip*=bottom] {
  --tooltip-left: 50%;
  --tooltip-tx: -50%;
}
[data-tooltip][data-tooltip=""]:before, [data-tooltip][data-tooltip=""] .tooltip, [data-tooltip][data-tooltip*=top]:before, [data-tooltip][data-tooltip*=top] .tooltip {
  --tooltip-bottom: var(--tooltip-margin-incl);
}
[data-tooltip][data-tooltip=""]:after, [data-tooltip][data-tooltip*=top]:after {
  --tooltip-bottom: var(--tooltip-margin-excl);
  border-top-color: var(--tooltip-background);
}
[data-tooltip][data-tooltip*=bottom]:before, [data-tooltip][data-tooltip*=bottom] .tooltip {
  --tooltip-top: var(--tooltip-margin-incl);
}
[data-tooltip][data-tooltip*=bottom]:after {
  --tooltip-top: var(--tooltip-margin-excl);
  border-bottom-color: var(--tooltip-background);
}
[data-tooltip][data-tooltip*=top][data-tooltip*=left], [data-tooltip][data-tooltip*=top][data-tooltip*=right] {
  --tooltip-top: auto;
  --tooltip-ty: 0;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=left]:before, [data-tooltip][data-tooltip*=top][data-tooltip*=left] .tooltip, [data-tooltip][data-tooltip*=top][data-tooltip*=right]:before, [data-tooltip][data-tooltip*=top][data-tooltip*=right] .tooltip {
  --toolkit-top: auto;
  --tooltip-bottom: var(--tooltip-margin-incl);
}
[data-tooltip][data-tooltip*=top][data-tooltip*=left]:after, [data-tooltip][data-tooltip*=top][data-tooltip*=right]:after {
  --tooltip-bottom: var(--tooltip-margin-excl);
  border-left-color: transparent;
  border-right-color: transparent;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=left] {
  --tooltip-left: 0;
  --tooltip-tx: 0;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=left]:before, [data-tooltip][data-tooltip*=top][data-tooltip*=left] .tooltip {
  --tooltip-left: 0;
  --tooltip-right: auto;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=left]:after {
  --tooltip-left: calc(var(--tooltip-arrow) * 2);
  --tooltip-right: auto;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=right] {
  --tooltip-right: 0;
  --tooltip-tx: 0;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=right]:before, [data-tooltip][data-tooltip*=top][data-tooltip*=right] .tooltip {
  --tooltip-right: 0;
  --tooltip-left: auto;
}
[data-tooltip][data-tooltip*=top][data-tooltip*=right]:after {
  --tooltip-left: auto;
  --tooltip-right: calc(var(--tooltip-arrow) * 2);
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=left], [data-tooltip][data-tooltip*=bottom][data-tooltip*=right] {
  --tooltip-bottom: auto;
  --tooltip-ty: 0;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=left]:before, [data-tooltip][data-tooltip*=bottom][data-tooltip*=left] .tooltip, [data-tooltip][data-tooltip*=bottom][data-tooltip*=right]:before, [data-tooltip][data-tooltip*=bottom][data-tooltip*=right] .tooltip {
  --toolkit-bottom: auto;
  --tooltip-top: var(--tooltip-margin-incl);
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=left]:after, [data-tooltip][data-tooltip*=bottom][data-tooltip*=right]:after {
  --tooltip-top: var(--tooltip-margin-excl);
  border-left-color: transparent;
  border-right-color: transparent;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=left] {
  --tooltip-left: 0;
  --tooltip-tx: 0;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=left]:before, [data-tooltip][data-tooltip*=bottom][data-tooltip*=left] .tooltip {
  --tooltip-left: 0;
  --tooltip-right: auto;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=left]:after {
  --tooltip-left: calc(var(--tooltip-arrow) * 2);
  --tooltip-right: auto;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=right] {
  --tooltip-right: 0;
  --tooltip-tx: 0;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=right]:before, [data-tooltip][data-tooltip*=bottom][data-tooltip*=right] .tooltip {
  --tooltip-right: 0;
  --tooltip-left: auto;
}
[data-tooltip][data-tooltip*=bottom][data-tooltip*=right]:after {
  --tooltip-left: auto;
  --tooltip-right: calc(var(--tooltip-arrow) * 2);
}

:where(.alert) {
  --dismiss-color: var(--color-90);
  --dismiss-hover: var(--color-100);
  --transition-time: var(--unit-transition);
  --icon-margin: 0.5em;
  --icon-size: 2em;
  --icon-padding: 0.125em;
  --icon-gap: 1.5em;
  --icon-align: flex-start;
  --icon-color: var(--color-100);
  --icon-background: var(--color-50);
  --icon-border-color: var(--color-80);
  --icon-border-width: 0.125em;
  --icon-ring-color: var(--color-70);
  --icon-ring-width: 0.125em;
}

.alert h3 {
  font-size: 1.25em;
}
.alert .headline .on-left {
  margin-right: var(--icon-margin);
  margin-left: calc(var(--icon-margin) + -1 * var(--padding-h));
}
.alert .headline .on-right {
  margin-left: var(--icon-margin);
  margin-right: calc(var(--icon-margin) + -1 * var(--padding-h));
}
.alert.dismissable .icon.dismiss {
  color: var(--dismiss-color);
  transition: var(--transition-time) color;
}
.alert.dismissable .icon.dismiss:hover {
  color: var(--dismiss-hover);
}
.alert.revealable .headline:hover {
  --headline-back: var(--color-45);
  transition: var(--transition-time) background-color;
  cursor: pointer;
}
.alert.revealable:not(.revealed) {
  padding-bottom: 0;
}
.alert.revealable:not(.revealed) .headline {
  margin-bottom: 0;
}
.alert .side-icon {
  display: flex;
  align-items: var(--icon-align);
  gap: var(--icon-gap);
}
.alert .side-icon > .icon {
  color: var(--icon-color);
  background-color: var(--icon-background);
  font-size: var(--icon-size);
  margin: 0.25em;
  padding: var(--icon-padding);
  border: var(--icon-border-width) solid var(--icon-border-color);
  box-shadow: 0 0 0 var(--icon-ring-width) var(--icon-ring-color);
  border-radius: 50%;
}
.alert.compact {
  --icon-size: 1em;
  --icon-gap: 0.5em;
  --icon-align: center;
}

[data-theme=dark] .alert {
  --icon-color: var(--color-80);
  --icon-background: var(--color-40);
  --icon-ring-color: var(--color-30);
  --icon-border-color: var(--color-20);
}

section.datatable {
  --header-icon-color: var(--brand-30);
  --header-icon-opacity: 0.2;
  --header-icon-hover-opacity: 0.5;
  --header-size: 0.875em;
  --filters-shade: var(--color-95);
  --filtering-color: var(--brand-70);
  --filtering-hover: var(--brand-80);
  --has-filters-color: var(--red-60);
  --has-filters-hover: var(--red-50);
  --no-rows-color: var(--red-20);
  --no-rows-background: var(--red-90);
  --sorting-shade-1: var(--color-95);
  --sorting-shade-2: var(--color-90);
  --sorting-shade-3: var(--color-80);
  --sorting-shade-4: var(--color-75);
  --filtering-mix: 5%;
  --filtering-stripe: var(--color-50);
  --filtering-gradient-width: 16px;
  --filtering-gradient-angle: 30deg;
  --filtering-gradient-angle1: calc(90deg + var(--filtering-gradient-angle));
  --filtering-gradient-angle2: calc(90deg - var(--filtering-gradient-angle));
}
section.datatable > header {
  margin-bottom: 0.5rem;
}
section.datatable > header .controls .trigger:hover {
  cursor: pointer;
}
section.datatable > header .controls .trigger:hover path, section.datatable > header .controls .trigger:hover rect {
  fill: var(--filtering-hover);
}
section.datatable > header .controls .filtering.trigger path {
  fill: var(--filtering-color);
}
section.datatable > header .controls .has-filters.trigger path {
  fill: var(--has-filters-color);
}
section.datatable > header .controls .has-filters.trigger:hover path, section.datatable > header .controls .has-filters.trigger:hover rect {
  fill: var(--has-filters-hover);
}
section.datatable > footer {
  margin-top: 0.5rem;
}
section.datatable table {
  overflow: visible;
}
section.datatable table thead {
  font-size: var(--header-size);
}
section.datatable table th.heading {
  --header-stripe: var(--background-color);
  --header-gradient: repeating-linear-gradient(
    var(--filtering-gradient-angle1),
  var(--background-color),
  var(--background-color) var(--filtering-gradient-width),
    var(--header-stripe) var(--filtering-gradient-width),
    var(--header-stripe) calc(var(--filtering-gradient-width) * 2)
  );
  background-color: var(--background-color);
  background-image: var(--header-gradient);
}
section.datatable table th.heading.sortable {
  cursor: pointer;
}
section.datatable table th.heading .sort-icon, section.datatable table th.heading .filter-icon {
  opacity: var(--header-icon-opacity);
  transition: 0.3s opacity;
  color: var(--header-icon-color);
}
section.datatable table th.heading.sortable:hover {
  --background-color: var(--sorting-shade-4);
}
section.datatable table th.heading.sortable:hover .sort-icon {
  opacity: var(--header-icon-hover-opacity);
}
section.datatable table th.heading.sorting {
  --background-color: var(--sorting-shade-3);
}
section.datatable table th.heading.sorting .sort-icon {
  opacity: 1;
}
section.datatable table th.heading.filtering {
  --header-stripe: color-mix(
    in srgb,
  var(--background-color),
    var(--filtering-stripe) var(--filtering-mix)
  ) ;
}
section.datatable table th.heading.text-right .flex {
  flex-direction: row-reverse;
}
section.datatable table th.heading.text-center .flex {
  padding-left: 1em;
}
section.datatable table thead tr.filters th {
  padding: 0px 4px 0px 0px;
  font-weight: normal;
  background-color: var(--filters-shade);
}
section.datatable table thead tr.filters th input, section.datatable table thead tr.filters th select, section.datatable table thead tr.filters th label, section.datatable table thead tr.filters th .inputs {
  border-color: transparent;
}
section.datatable table thead tr.filters th svg.icon {
  color: var(--header-icon-color);
  opacity: var(--header-icon-opacity);
}
section.datatable table thead tr.filters th.filtering svg.icon {
  opacity: var(--header-icon-hover-opacity);
}
section.datatable table thead tr.filters th.filtering svg.icon:hover {
  opacity: 1;
}
section.datatable table tbody tr td {
  --cell-stripe: var(--background-color);
  --cell-gradient: repeating-linear-gradient(
    var(--filtering-gradient-angle1),
  var(--background-color),
  var(--background-color) var(--filtering-gradient-width),
    var(--cell-stripe) var(--filtering-gradient-width),
    var(--cell-stripe) calc(var(--filtering-gradient-width) * 2)
  );
  background-color: var(--background-color);
  background-image: var(--cell-gradient);
}
section.datatable table tr:nth-child(odd) td,
section.datatable table tr:nth-child(even) th {
  --filtering-gradient-angle1: var(--filtering-gradient-angle2);
}
section.datatable table tbody tr.no-rows td {
  text-align: center;
  --color: var(--no-rows-color);
  --background-color: var(--no-rows-background);
}
section.datatable table tbody tr td.sorting {
  font-weight: 500;
  --background-color: var(--sorting-shade-1);
}
section.datatable table tbody tr td.filtering {
  --cell-stripe: color-mix(
    in srgb,
    var(--background-color),
    var(--filtering-stripe) var(--filtering-mix)
  ) ;
}
section.datatable table.striped tbody tr:nth-child(even) td.sorting {
  --background-color: var(--sorting-shade-2);
}
section.datatable table.selectable tbody tr:hover:not(.unselectable) td, section.datatable table.selectable tbody tr:hover:not(.unselectable) th {
  --background-color: var(--selectable-background);
}
section.datatable table.selectable tbody tr:hover:not(.unselectable) td > *:not(dialog), section.datatable table.selectable tbody tr:hover:not(.unselectable) th > *:not(dialog) {
  background-color: transparent;
  color: var(--selectable-color);
  transition: background-color 0.3s ease;
}
section.datatable table.selectable tbody tr:hover:not(.unselectable) td > .badge, section.datatable table.selectable tbody tr:hover:not(.unselectable) td > button, section.datatable table.selectable tbody tr:hover:not(.unselectable) td > .button, section.datatable table.selectable tbody tr:hover:not(.unselectable) td > .inverse, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > .badge, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > button, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > .button, section.datatable table.selectable tbody tr:hover:not(.unselectable) th > .inverse {
  border-color: color-mix(in srgb, var(--selectable-color), transparent 30%);
  background-color: color-mix(in srgb, var(--selectable-color), transparent 80%);
}
section.datatable .columns.menu .icons {
  display: inline-grid;
}
section.datatable .columns.menu .item:hover label {
  color: var(--active-color);
  transition: color 0.1s;
}

[data-theme=dark] section.datatable {
  --header-icon-color: var(--brand-70);
  --sorting-shade-1: var(--color-10);
  --sorting-shade-2: var(--color-15);
  --sorting-shade-3: var(--color-20);
  --sorting-shade-4: var(--color-25);
  --filters-shade: var(--color-15);
  --has-filters-color: var(--red-40);
  --no-rows-color: var(--red-80);
  --no-rows-background: var(--red-15);
  --filtering-mix: 11%;
}

:where(.details) {
  --icon-transition: 0.3s;
}

.details .summary {
  display: flex;
  gap: 0.25em;
  align-items: center;
  padding-right: var(--body-padding);
}
.details .summary .icon {
  transition: all var(--icon-transition);
}
.details.open > .summary .icon {
  transform: rotate(var(--icon-rotate, 0));
}

.details.wide-summary .summary .summary-text {
  flex-grow: 1;
}

:where(.dropdown) {
  --menu-margin: 0.5em;
  --max-height: 50vh;
  --trigger-padding: var(--input-padding-v) var(--input-padding-h);
  --trigger-line-height: var(--input-line-height);
  --trigger-border-radius: var(--input-border-radius);
  --trigger-border-width: var(--input-border-width);
  --focus-ring-outline: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring-color);
  --focus-ring-inline: 0 0 0 var(--input-focus-ring-gap) var(--input-focus-gap-color);
  --focus-ring: var(--focus-ring-inline), var(--focus-ring-outline);
  --icon-margin: 0.5em;
  --icon-transition: 0.3s;
  --body-background: var(--color-100);
  --body-padding: 0.5em 0.5em;
}

:where([data-theme=dark] .dropdown) {
  --body-background: var(--color-0);
}

.dropdown {
  --menu-z-index: 100;
  --safe-z-index: 99;
  position: relative;
  overflow: visible;
  display: inline-block;
}
.dropdown .trigger {
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}
.dropdown .trigger:not(button):not(.button) {
  display: inline-block;
  padding: var(--trigger-padding);
  border-radius: var(--trigger-border-radius);
  font-size: 1em;
  line-height: var(--trigger-line-height);
  border: var(--trigger-border-width) solid transparent;
}
.dropdown .trigger:not(button):not(.button):focus:not(.no-focus) {
  --color: var(--input-focus-color);
  --border-color: var(--input-focus-border-color);
  --background-color: var(--input-focus-background-color);
  outline: none;
  box-shadow: var(--focus-ring);
}
.dropdown .trigger.button.icon svg.icon {
  margin-left: 0;
  margin-right: 0;
}
.dropdown .trigger.button svg.icon.on-right {
  margin-left: var(--icon-margin);
  margin-right: var(--icon-pull);
}
.dropdown .trigger .icon {
  transition: all var(--icon-transition);
}
.dropdown.open .trigger .icon {
  transform: rotate(var(--icon-rotate, 0));
}
.dropdown.open .trigger .safe-area {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(var(--menu-margin) + 10px);
  z-index: var(--safe-z-index);
}
.dropdown .menu, .dropdown .body {
  width: max-content;
  left: 0;
  right: auto;
  z-index: var(--menu-z-index);
  overflow-y: scroll;
  max-height: var(--max-height);
  box-shadow: var(--shadow-2);
  background-color: var(--item-background);
}
.dropdown .body {
  background-color: var(--body-background);
  padding: var(--body-padding);
}
.dropdown .body .fluid {
  display: block;
  width: auto !important;
}
.dropdown.right .menu, .dropdown.right .body {
  right: 0;
  left: auto;
}
.dropdown.wide .menu, .dropdown.wide .body {
  width: 100%;
  left: 0;
  right: 0;
}

.multiselect {
  --selection-color: var(--grey-20);
  --selection-border: var(--grey-80);
  --selection-background: var(--grey-95);
  --selection-radius: 0.25rem;
  --selection-padding: 0.25em 0.5em;
  --unselect-color: var(--red-20);
  --unselect-border: var(--red-80);
  --unselect-background: var(--red-95);
  --sortable-color: var(--orange-20);
  --sortable-icon: var(--orange-50);
  --sortable-border: var(--orange-80);
  --sortable-background: var(--orange-95);
  --sorting-color: var(--green-20);
  --sorting-icon: var(--green-50);
  --sorting-border: var(--green-80);
  --sorting-background: var(--green-95);
}
.multiselect .option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.multiselect .option > .icon, .multiselect .option > .no-icon {
  flex-basis: 1.5rem;
}
.multiselect .option > :first-child {
  flex-basis: 100%;
}
.multiselect .selections {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.multiselect .selections .selection {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--size-small);
  color: var(--selection-color);
  background-color: var(--selection-background);
  border: 1px solid var(--selection-border);
  border-radius: var(--selection-radius);
  padding: var(--selection-padding);
}
.multiselect .selections .selection:hover {
  cursor: pointer;
  color: var(--unselect-color);
  background-color: var(--unselect-background);
  border-color: var(--unselect-border);
}
.multiselect .selections .sortable.item .selection .drag-icon {
  padding-right: 0.5em;
}
.multiselect .selections .sortable.item .selection .drag-icon:hover {
  color: var(--sortable-icon);
}
.multiselect .selections .sortable.item .selection:has(.drag-icon:hover) {
  color: var(--sortable-color);
  background-color: var(--sortable-background);
  border-color: var(--sortable-border);
}
.multiselect .selections .sortable.item[aria-pressed=true] .selection,
.multiselect .selections .sortable.item[aria-pressed=true] .selection:has(.drag-icon:hover) {
  color: var(--sorting-color);
  background-color: var(--sorting-background);
  border-color: var(--sorting-border);
}
.multiselect .selections .sortable.item[aria-pressed=true] .selection .drag-icon:hover,
.multiselect .selections .sortable.item[aria-pressed=true] .selection:has(.drag-icon:hover) .drag-icon:hover {
  color: var(--sorting-icon);
}

[data-theme=dark] .multiselect {
  --selection-color: var(--grey-80);
  --selection-border: var(--grey-20);
  --selection-background: var(--grey-10);
  --unselect-color: var(--red-90);
  --unselect-border: var(--red-25);
  --unselect-background: var(--red-10);
  --sortable-color: var(--orange-80);
  --sortable-border: var(--orange-20);
  --sortable-background: var(--orange-10);
  --sorting-color: var(--green-80);
  --sorting-border: var(--green-20);
  --sorting-background: var(--green-10);
}

.pager {
  user-select: none;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}
.pager .pages {
  display: flex;
  gap: 0.5em;
}

:where(.range) {
  --track-background: var(--color-85);
  --track-border: var(--color-70);
  --track-fill: var(--color-50);
  --track-dragging: var(--color-55);
  --thumb-color: var(--track-fill);
  --shadow-color: color-mix(in srgb, var(--thumb-color), black 20%);
  --shadow-focus-color: color-mix(in srgb, var(--thumb-color), transparent 70%);
  --step-color: var(--color-50);
  --step-background: var(--color-90);
  --step-hover-color: var(--color-30);
  --step-hover-background: var(--color-80);
  --step-disabled-color: var(--grey-70);
  --step-disabled-background: var(--grey-95);
  --tick-color: var(--track-border);
  --value-color: var(--grey-20);
  --scale-color: var(--grey-40);
}

:where([data-theme=dark] .range) {
  --track-background: var(--color-15);
  --track-border: var(--color-35);
  --track-fill: var(--color-50);
  --shadow-color: color-mix(in srgb, var(--thumb-color), white 20%);
  --shadow-focus-color: color-mix(in srgb, var(--thumb-color), transparent 55%);
  --step-color: var(--color-60);
  --step-background: var(--color-15);
  --step-hover-color: var(--color-70);
  --step-hover-background: var(--color-25);
  --step-disabled-color: var(--grey-30);
  --step-disabled-background: var(--grey-5);
  --value-color: var(--grey-80);
}

.range {
  --position: 0.5;
  --min-position: 0.25;
  --max-position: 0.75;
  --min-percent: 0;
  --max-percent: 100%;
  --track-border-width: 1px;
  --track-height: calc(0.5em + var(--track-border-width) * 2);
  --track-half: calc(var(--track-height) / 2);
  --selection-border-offset: 0px;
  --thumb-size: calc(1em + var(--track-border-width) * 2);
  --thumb-size: 1.25em;
  --thumb-half: calc(var(--thumb-size) / 2);
  --thumb-opacity: 1;
  --track-offset: var(--track-border-width);
  --thumbs-offset: calc(var(--thumb-half) - var(--track-border-width));
  --shadow-size: 0px;
  --shadow-focus-size: 6px;
  --z-index: 100;
  --percent: 50%;
  --steps: 1;
  --ticks-offset: calc(var(--thumbs-offset) + var(--track-border-width));
  --tick-length: 4px;
  --tick-width: 1px;
  --tick-radius: 1px;
  --tick-offset: calc(0px - var(--tick-length));
  --transition-time: var(--unit-transition);
  --selection-background: var(--track-fill);
  --inputs-gap: 1rem;
  --gap: 0.75rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gap);
  touch-action: none;
  user-select: none;
  padding: 0.25em 0;
}
.range:has(.range-values.smaller, .range-values.smallest) {
  padding-top: 0em;
}
.range:has(.range-values.large) {
  padding-top: 0.5em;
}
.range:has(.range-values.larger) {
  padding-top: 0.75em;
}
.range:has(.range-values.largest) {
  padding-top: 1em;
}
.range.range-dragging {
  --selection-background: var(--track-dragging);
  --thumb-color: var(--track-dragging);
}
.range.range-has-scale .range-slider {
  margin-bottom: 1em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.small) {
  margin-bottom: 1.25em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.medium) {
  margin-bottom: 1.5em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.large) {
  margin-bottom: 1.75em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.larger) {
  margin-bottom: 2em;
}
.range.range-has-scale .range-slider:has(.range-scale-value.largest) {
  margin-bottom: 2.5em;
}
.range .range-slider {
  width: 100%;
  height: 1em;
  position: relative;
}
.range .range-track {
  cursor: pointer;
  position: absolute;
  left: var(--track-offset);
  right: var(--track-offset);
  top: 50%;
  transform: translateY(-50%);
  height: var(--track-height);
  border-radius: var(--track-half);
  border: var(--track-border-width) solid var(--track-border);
  background-color: var(--track-background);
  overflow: visible;
}
.range .range-track .range-selection {
  position: absolute;
  top: var(--selection-border-offset);
  bottom: var(--selection-border-offset);
  left: calc(var(--selection-border-offset) + var(--min-percent));
  right: calc(100% - var(--max-percent));
  border-radius: var(--track-half);
  border-color: var(--selection-background);
  background-color: var(--selection-background);
  transition: background-color var(--transition-time);
}
.range .range-track .range-thumbs {
  position: absolute;
  left: var(--thumbs-offset);
  right: var(--thumbs-offset);
  top: 0px;
  bottom: 0px;
}
.range .range-thumb {
  position: absolute;
  user-select: none;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: var(--thumb-half);
  box-shadow: 0 0 0 var(--shadow-size) var(--shadow-color);
  transition: box-shadow 300ms, opacity 300ms;
  background-color: var(--thumb-color);
  opacity: var(--thumb-opacity);
  transition: background-color var(--transition-time);
}
.range .range-thumb.min {
  left: var(--min-percent);
}
.range .range-thumb.max {
  left: var(--max-percent);
}
.range .range-thumb:hover, .range .range-thumb:focus, .range .range-thumb.dragging {
  outline: none;
  opacity: 1;
  --shadow-size: var(--shadow-focus-size);
  --shadow-color: var(--shadow-focus-color);
}
.range .range-limits {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1;
  margin-top: -0.5em;
  user-select: none;
}
.range .range-scale-value {
  color: var(--scale-color);
}
.range .range-ticks {
  position: absolute;
  top: var(--tick-offset);
  bottom: var(--tick-offset);
  left: var(--ticks-offset);
  right: var(--ticks-offset);
  display: flex;
  justify-content: space-between;
}
.range .range-ticks .range-tick {
  position: relative;
  height: 100%;
  width: var(--tick-width);
  background-color: var(--tick-color);
  border-radius: var(--tick-radius);
  --transform-scale: 0;
}
.range .range-ticks .range-tick:not(:first-child) {
  --transform-scale: -50%;
}
.range .range-ticks .range-tick:first-child {
  --transform-scale: -0.5ch;
}
.range .range-ticks .range-tick:last-child {
  --transform-scale: calc(-100% + 0.5ch);
}
.range .range-ticks .range-tick .range-scale-value {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateX(var(--transform-scale));
}
.range .range-inputs {
  display: flex;
  justify-content: space-between;
  gap: var(--inputs-gap);
}
.range .range-inputs.center, .range .range-inputs.centre {
  justify-content: center;
}
.range .range-inputs.space {
  justify-content: space-between;
}
.range .range-inputs.left {
  justify-content: flex-start;
}
.range .range-inputs.right {
  justify-content: flex-end;
}
.range .range-input {
  width: auto;
  text-align: center;
}
.range .range-input input, .range .range-input .select {
  text-align: left;
}
.range .range-input .step {
  color: var(--step-color);
  background-color: var(--step-background);
}
.range .range-input .step.disabled {
  color: var(--step-disabled-color);
  background-color: var(--step-disabled-background);
}
.range .range-input .step:hover:not(.disabled) {
  color: var(--step-hover-color);
  background-color: var(--step-hover-background);
  cursor: pointer;
}
.range .range-input input::-webkit-outer-spin-button,
.range .range-input input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}
.range .range-input input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.range .range-output {
  width: 100%;
  min-height: 1em;
  line-height: 1;
  position: relative;
}
.range .range-output .range-value {
  position: absolute;
  line-height: 1;
  color: var(--value-color);
  bottom: 0;
}
.range .range-output .range-value.thumb {
  left: var(--percent);
  transform: translateX(calc(0% - var(--percent)));
}
.range .range-output .range-value.thumb.min {
  --percent: var(--min-percent);
}
.range .range-output .range-value.thumb.max {
  --percent: var(--max-percent);
}
.range .range-output .range-value.center {
  left: 50%;
  transform: translateX(-50%);
}

:where(.search .menu) {
  --menu-margin: 0.5em;
  --max-height: 50vh;
}

.search {
  position: relative;
  overflow: visible;
}
.search .inputs.round {
  --border-radius: 1em;
}
.search .inputs.round .prefix {
  margin-left: 0.25em;
}
.search .inputs.round .suffix {
  margin-right: 0.25em;
}
.search .menu {
  position: absolute;
  display: block;
  top: calc(100% + var(--menu-margin));
  left: 0;
  right: 0;
  overflow-y: scroll;
  max-height: var(--max-height);
  box-shadow: var(--shadow-2);
}
.search .menu .error.item {
  background-color: var(--red-50);
  color: var(--red-100);
}

:where(.select) {
  --menu-margin: 0.5em;
  --max-height: 50vh;
  --search-margin: 0.5em;
  --search-heading-weight: 500;
  --search-heading-size: var(--size-small);
  --search-heading-color: var(--brand-0);
  --search-heading-background: var(--brand-90);
  --search-clear-color: var(--brand-10);
  --search-clear-background: var(--brand-75);
}

:where([data-theme=dark] .select) {
  --search-clear-color: var(--brand-70);
  --search-clear-background: var(--brand-25);
}

.select {
  position: relative;
  overflow: visible;
}
.select .search {
  position: absolute;
  display: block;
  top: calc(100% + var(--menu-margin) - var(--input-border-width));
  width: 100%;
  z-index: var(--menu-z-index, 100);
  box-shadow: var(--shadow-2);
}
.select .search .suffix.clear:hover {
  color: var(--search-clear-color);
  background-color: var(--search-clear-background);
}
.select .menu {
  --top: calc(100% + var(--menu-margin) - var(--input-border-width));
  position: absolute;
  display: block;
  top: var(--top);
  left: 0;
  right: 0;
  overflow-y: scroll;
  z-index: var(--menu-z-index, 100);
  max-height: var(--max-height);
  box-shadow: var(--shadow-2);
  background-color: var(--background-color);
}
.select.open .search .inputs {
  border-bottom: 1px solid var(--border-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-style: solid;
  outline: none;
}
.select.open .search .inputs .prefix, .select.open .search .inputs .suffix {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select.open .inputs {
  box-shadow: var(--focus-ring);
}
.select.open .search:has(:focus) .inputs {
  box-shadow: none;
}
.select.open .search .inputs {
  box-shadow: none;
}
.select.open:has(.search) .menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select.open:has(.search) .menu .item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select:has(.search) .menu {
  border-top: 0;
  --top: calc(
      100% +
      1em * var(--input-line-height) +
      1 * var(--input-border-width) +
      2 * var(--input-padding-v) +
      1 * var(--menu-margin)
  );
}

.inputs .select .inputs {
  border: none;
  box-shadow: none;
}

/*
$sortable-list-bg-color:     rgba($blue, 0.1) !default;
$sortable-list-border-color: rgba($blue, 0.2) !default;
$sortable-radius:            $unit-radius !default;
// $sortable-radius:            10px !default;
$sortable-moved-color:       $orange !default;
$sortable-moved-fg-color:    darker-color($sortable-moved-color) !default;
$sortable-moved-bg-color:    mix($white, $sortable-moved-color, 95%) !default;
$sortable-moving-color:      $green !default;
$sortable-moving-fg-color:   darker-color($sortable-moving-color) !default;
$sortable-moving-bg-color:   mix($white, $sortable-moving-color, 95%) !default;
*/
:where(.sortable) {
  --sortable-moving-color: var(--green-20);
  --sortable-moving-background: var(--green-95);
  --sortable-moving-border: var(--green-80);
  --sortable-moved-color: var(--orange-20);
  --sortable-moved-background: var(--orange-95);
  --sortable-moved-border: var(--orange-80);
}

:where([data-theme=dark] .sortable) {
  --sortable-moving-color: var(--green-80);
  --sortable-moving-background: var(--green-5);
  --sortable-moving-border: var(--green-20);
  --sortable-moved-color: var(--orange-80);
  --sortable-moved-background: var(--orange-5);
  --sortable-moved-border: var(--orange-20);
}

.sortable.item,
.sortable .item {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
.sortable.item.inactive,
.sortable .item.inactive {
  opacity: 0.4;
}
.sortable.item.moved,
.sortable .item.moved {
  --border-color: var(--sortable-moved-border);
  color: var(--sortable-moved-color);
  background-color: var(--sortable-moved-background);
}
.sortable.item[aria-pressed=true],
.sortable .item[aria-pressed=true] {
  --border-color: var(--sortable-moving-border);
  color: var(--sortable-moving-color);
  background-color: var(--sortable-moving-background);
  z-index: 9999;
}

.sortable.list.vertical .sortable.item {
  display: flex;
  align-items: flex-start;
}
.sortable.list.horizontal .sortable.item {
  display: flex;
}
.sortable.list.horizontal .sortable.item:nth-last-child(3) {
  border-right: none;
}

tr.sortable.item {
  display: table-row !important;
}

table.sortable tr.item {
  display: table-row !important;
}
table.sortable tr.moved td, table.sortable tr.moved th {
  --border-color: var(--sortable-moved-border);
  color: var(--sortable-moved-color);
  background-color: var(--sortable-moved-background);
}

.sortable.item[aria-pressed=true] td, .sortable.item[aria-pressed=true] th {
  --border-color: var(--sortable-moving-border);
  color: var(--sortable-moving-color);
  background-color: var(--sortable-moving-background);
  z-index: 9999;
}

:where(.tiles) {
  --tile-min-width: 100px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-width), 1fr));
}
.tiles > .cols-2 {
  grid-column: auto/span 2;
}
.tiles > .rows-2 {
  grid-row: auto/span 2;
}
.tiles > .cols-3 {
  grid-column: auto/span 3;
}
.tiles > .rows-3 {
  grid-row: auto/span 3;
}
.tiles > .cols-4 {
  grid-column: auto/span 4;
}
.tiles > .rows-4 {
  grid-row: auto/span 4;
}
.tiles > .cols-5 {
  grid-column: auto/span 5;
}
.tiles > .rows-5 {
  grid-row: auto/span 5;
}
.tiles > .cols-6 {
  grid-column: auto/span 6;
}
.tiles > .rows-6 {
  grid-row: auto/span 6;
}
.tiles > .cols-7 {
  grid-column: auto/span 7;
}
.tiles > .rows-7 {
  grid-row: auto/span 7;
}
.tiles > .cols-8 {
  grid-column: auto/span 8;
}
.tiles > .rows-8 {
  grid-row: auto/span 8;
}
.tiles > .cols-9 {
  grid-column: auto/span 9;
}
.tiles > .rows-9 {
  grid-row: auto/span 9;
}
.tiles > .cols-10 {
  grid-column: auto/span 10;
}
.tiles > .rows-10 {
  grid-row: auto/span 10;
}
.tiles > .cols-11 {
  grid-column: auto/span 11;
}
.tiles > .rows-11 {
  grid-row: auto/span 11;
}
.tiles > .cols-12 {
  grid-column: auto/span 12;
}
.tiles > .rows-12 {
  grid-row: auto/span 12;
}
.tiles > .cols-13 {
  grid-column: auto/span 13;
}
.tiles > .rows-13 {
  grid-row: auto/span 13;
}
.tiles > .cols-14 {
  grid-column: auto/span 14;
}
.tiles > .rows-14 {
  grid-row: auto/span 14;
}
.tiles > .cols-15 {
  grid-column: auto/span 15;
}
.tiles > .rows-15 {
  grid-row: auto/span 15;
}
.tiles > .cols-16 {
  grid-column: auto/span 16;
}
.tiles > .rows-16 {
  grid-row: auto/span 16;
}