@charset "UTF-8";

:root {
  --c-base-d5: hsl(219, 16.5%, 60%);
  --c-base-d4: hsl(219, 14.4%, 68%);
  --c-base-d3: hsl(219, 12.3%, 76%);
  --c-base-d2: hsl(219, 10.2%, 84%);
  --c-base-d1: hsl(219, 8.1%, 92%);
  --c-base: hsl(219, 6%, 100%);
  --c-base-l1: hsl(219, 5.25%, 100%);
  --c-base-l2: hsl(219, 4.5%, 100%);
  --c-base-l3: hsl(219, 3.75%, 100%);
  --c-base-l4: hsl(219, 3%, 100%);
  --c-base-l5: hsl(219, 2.25%, 100%);
  --c-base-a0\.05: rgba(255, 255, 255, 0.05);
  --c-base-a0\.3: rgba(255, 255, 255, 0.3);
  --c-base-a0\.5: rgba(255, 255, 255, 0.55);
  --c-base-a0\.7: rgba(255, 255, 255, 0.7);
  --c-base-a0\.85: rgba(255, 255, 255, 0.85);
  --c-secondary-d5: hsl(219, 100%, 57%);
  --c-secondary-d4: hsl(219, 98.4%, 65%);
  --c-secondary-d3: hsl(219, 84.05%, 73%);
  --c-secondary-d2: hsl(219, 69.7%, 81%);
  --c-secondary-d1: hsl(219, 55.35%, 89%);
  --c-secondary: hsl(219, 41%, 97%);
  --c-secondary-l1: hsl(219, 35.875%, 100%);
  --c-secondary-l2: hsl(219, 30.75%, 100%);
  --c-secondary-l3: hsl(219, 25.625%, 100%);
  --c-secondary-l4: hsl(219, 20.5%, 100%);
  --c-secondary-l5: hsl(219, 15.375%, 100%);
  --c-secondary-a0\.05: rgba(244, 246, 250, 0.05);
  --c-secondary-a0\.3: rgba(244, 246, 250, 0.3);
  --c-secondary-a0\.5: rgba(244, 246, 250, 0.55);
  --c-secondary-a0\.7: rgba(244, 246, 250, 0.7);
  --c-secondary-a0\.85: rgba(244, 246, 250, 0.85);
  --c-text-d5: hsl(223, 16.5%, 0%);
  --c-text-d4: hsl(223, 14.4%, 0%);
  --c-text-d3: hsl(223, 12.3%, 0%);
  --c-text-d2: hsl(223, 10.2%, 0%);
  --c-text-d1: hsl(223, 8.1%, 5%);
  --c-text: hsl(223, 6%, 13%);
  --c-text-l1: hsl(223, 5.25%, 21%);
  --c-text-l2: hsl(223, 4.5%, 29%);
  --c-text-l3: hsl(223, 3.75%, 37%);
  --c-text-l4: hsl(223, 3%, 45%);
  --c-text-l5: hsl(223, 2.25%, 53%);
  --c-text-a0\.05: rgba(31, 32, 35, 0.05);
  --c-text-a0\.3: rgba(31, 32, 35, 0.3);
  --c-text-a0\.5: rgba(31, 32, 35, 0.55);
  --c-text-a0\.7: rgba(31, 32, 35, 0.7);
  --c-text-a0\.85: rgba(31, 32, 35, 0.85);
  --c-primary-d5: hsl(217.3333333333, 100%, 0%);
  --c-primary-d4: hsl(217.3333333333, 100%, 0%);
  --c-primary-d3: hsl(217.3333333333, 100%, 0%);
  --c-primary-d2: hsl(217.3333333333, 100%, 0%);
  --c-primary-d1: hsl(217.3333333333, 99.5901639344%, 3.9607843137%);
  --c-primary: #081935;
  --c-primary-l1: hsl(217.3333333333, 64.5491803279%, 19.9607843137%);
  --c-primary-l2: hsl(217.3333333333, 55.3278688525%, 27.9607843137%);
  --c-primary-l3: hsl(217.3333333333, 46.106557377%, 35.9607843137%);
  --c-primary-l4: hsl(217.3333333333, 36.8852459016%, 43.9607843137%);
  --c-primary-l5: hsl(217.3333333333, 27.6639344262%, 51.9607843137%);
  --c-primary-a0\.05: rgba(8, 25, 53, 0.05);
  --c-primary-a0\.3: rgba(8, 25, 53, 0.3);
  --c-primary-a0\.5: rgba(8, 25, 53, 0.55);
  --c-primary-a0\.7: rgba(8, 25, 53, 0.7);
  --c-primary-a0\.85: rgba(8, 25, 53, 0.85);
  --c-primary-pale-d5: hsl(219, 41.25%, 0%);
  --c-primary-pale-d4: hsl(219, 36%, 1%);
  --c-primary-pale-d3: hsl(219, 30.75%, 9%);
  --c-primary-pale-d2: hsl(219, 25.5%, 17%);
  --c-primary-pale-d1: hsl(219, 20.25%, 25%);
  --c-primary-pale: hsl(219, 15%, 33%);
  --c-primary-pale-l1: hsl(219, 13.125%, 41%);
  --c-primary-pale-l2: hsl(219, 11.25%, 49%);
  --c-primary-pale-l3: hsl(219, 9.375%, 57%);
  --c-primary-pale-l4: hsl(219, 7.5%, 65%);
  --c-primary-pale-l5: hsl(219, 5.625%, 73%);
  --c-primary-pale-a0\.05: rgba(72, 80, 97, 0.05);
  --c-primary-pale-a0\.3: rgba(72, 80, 97, 0.3);
  --c-primary-pale-a0\.5: rgba(72, 80, 97, 0.55);
  --c-primary-pale-a0\.7: rgba(72, 80, 97, 0.7);
  --c-primary-pale-a0\.85: rgba(72, 80, 97, 0.85);
  --c-primary-deep-d5: hsl(219, 100%, 0%);
  --c-primary-deep-d4: hsl(219, 100%, 0%);
  --c-primary-deep-d3: hsl(219, 94.3%, 0%);
  --c-primary-deep-d2: hsl(219, 78.2%, 0%);
  --c-primary-deep-d1: hsl(219, 62.1%, 0%);
  --c-primary-deep: hsl(219, 46%, 5%);
  --c-primary-deep-l1: hsl(219, 40.25%, 13%);
  --c-primary-deep-l2: hsl(219, 34.5%, 21%);
  --c-primary-deep-l3: hsl(219, 28.75%, 29%);
  --c-primary-deep-l4: hsl(219, 23%, 37%);
  --c-primary-deep-l5: hsl(219, 17.25%, 45%);
  --c-primary-deep-a0\.05: rgba(7, 11, 19, 0.05);
  --c-primary-deep-a0\.3: rgba(7, 11, 19, 0.3);
  --c-primary-deep-a0\.5: rgba(7, 11, 19, 0.55);
  --c-primary-deep-a0\.7: rgba(7, 11, 19, 0.7);
  --c-primary-deep-a0\.85: rgba(7, 11, 19, 0.85);
  --c-accent-d5: hsl(0, 100%, 0%);
  --c-accent-d4: hsl(0, 100%, 0%);
  --c-accent-d3: hsl(0, 100%, 1%);
  --c-accent-d2: hsl(0, 100%, 9%);
  --c-accent-d1: hsl(0, 100%, 17%);
  --c-accent: hsl(0, 100%, 25%);
  --c-accent-l1: hsl(0, 87.5%, 33%);
  --c-accent-l2: hsl(0, 75%, 41%);
  --c-accent-l3: hsl(0, 62.5%, 49%);
  --c-accent-l4: hsl(0, 50%, 57%);
  --c-accent-l5: hsl(0, 37.5%, 65%);
  --c-accent-a0\.05: rgba(128, 0, 0, 0.05);
  --c-accent-a0\.3: rgba(128, 0, 0, 0.3);
  --c-accent-a0\.5: rgba(128, 0, 0, 0.55);
  --c-accent-a0\.7: rgba(128, 0, 0, 0.7);
  --c-accent-a0\.85: rgba(128, 0, 0, 0.85);
  --c-accent2-d5: hsl(49, 100%, 0%);
  --c-accent2-d4: hsl(49, 100%, 8%);
  --c-accent2-d3: hsl(49, 98.4%, 16%);
  --c-accent2-d2: hsl(49, 81.6%, 24%);
  --c-accent2-d1: hsl(49, 64.8%, 32%);
  --c-accent2: hsl(49, 48%, 40%);
  --c-accent2-l1: hsl(49, 42%, 48%);
  --c-accent2-l2: hsl(49, 36%, 56%);
  --c-accent2-l3: hsl(49, 30%, 64%);
  --c-accent2-l4: hsl(49, 24%, 72%);
  --c-accent2-l5: hsl(49, 18%, 80%);
  --c-accent2-a0\.05: rgba(151, 133, 53, 0.05);
  --c-accent2-a0\.3: rgba(151, 133, 53, 0.3);
  --c-accent2-a0\.5: rgba(151, 133, 53, 0.55);
  --c-accent2-a0\.7: rgba(151, 133, 53, 0.7);
  --c-accent2-a0\.85: rgba(151, 133, 53, 0.85);
  --c-accent3-d5: hsl(223, 16.5%, 0%);
  --c-accent3-d4: hsl(223, 14.4%, 0%);
  --c-accent3-d3: hsl(223, 12.3%, 0%);
  --c-accent3-d2: hsl(223, 10.2%, 0%);
  --c-accent3-d1: hsl(223, 8.1%, 0%);
  --c-accent3: hsl(223, 6%, 0%);
  --c-accent3-l1: hsl(223, 5.25%, 8%);
  --c-accent3-l2: hsl(223, 4.5%, 16%);
  --c-accent3-l3: hsl(223, 3.75%, 24%);
  --c-accent3-l4: hsl(223, 3%, 32%);
  --c-accent3-l5: hsl(223, 2.25%, 40%);
  --c-accent3-a0\.05: rgba(0, 0, 0, 0.05);
  --c-accent3-a0\.3: rgba(0, 0, 0, 0.3);
  --c-accent3-a0\.5: rgba(0, 0, 0, 0.55);
  --c-accent3-a0\.7: rgba(0, 0, 0, 0.7);
  --c-accent3-a0\.85: rgba(0, 0, 0, 0.85);
  --c-error-d5: hsl(0, 100%, 0%);
  --c-error-d4: hsl(0, 100%, 8%);
  --c-error-d3: hsl(0, 100%, 16%);
  --c-error-d2: hsl(0, 100%, 24%);
  --c-error-d1: hsl(0, 100%, 32%);
  --c-error: hsl(0, 99%, 40%);
  --c-error-l1: hsl(0, 86.625%, 48%);
  --c-error-l2: hsl(0, 74.25%, 56%);
  --c-error-l3: hsl(0, 61.875%, 64%);
  --c-error-l4: hsl(0, 49.5%, 72%);
  --c-error-l5: hsl(0, 37.125%, 80%);
  --c-error-a0\.05: rgba(203, 1, 1, 0.05);
  --c-error-a0\.3: rgba(203, 1, 1, 0.3);
  --c-error-a0\.5: rgba(203, 1, 1, 0.55);
  --c-error-a0\.7: rgba(203, 1, 1, 0.7);
  --c-error-a0\.85: rgba(203, 1, 1, 0.85);
  --c-attent-d5: hsl(341, 100%, 18%);
  --c-attent-d4: hsl(341, 100%, 26%);
  --c-attent-d3: hsl(341, 100%, 34%);
  --c-attent-d2: hsl(341, 100%, 42%);
  --c-attent-d1: hsl(341, 95.85%, 50%);
  --c-attent: hsl(341, 71%, 58%);
  --c-attent-l1: hsl(341, 62.125%, 66%);
  --c-attent-l2: hsl(341, 53.25%, 74%);
  --c-attent-l3: hsl(341, 44.375%, 82%);
  --c-attent-l4: hsl(341, 35.5%, 90%);
  --c-attent-l5: hsl(341, 26.625%, 98%);
  --c-attent-a0\.05: rgba(224, 72, 120, 0.05);
  --c-attent-a0\.3: rgba(224, 72, 120, 0.3);
  --c-attent-a0\.5: rgba(224, 72, 120, 0.55);
  --c-attent-a0\.7: rgba(224, 72, 120, 0.7);
  --c-attent-a0\.85: rgba(224, 72, 120, 0.85);
  --c-warning-d5: hsl(41, 100%, 18%);
  --c-warning-d4: hsl(41, 100%, 26%);
  --c-warning-d3: hsl(41, 100%, 34%);
  --c-warning-d2: hsl(41, 100%, 42%);
  --c-warning-d1: hsl(41, 100%, 50%);
  --c-warning: hsl(41, 93%, 58%);
  --c-warning-l1: hsl(41, 81.375%, 66%);
  --c-warning-l2: hsl(41, 69.75%, 74%);
  --c-warning-l3: hsl(41, 58.125%, 82%);
  --c-warning-l4: hsl(41, 46.5%, 90%);
  --c-warning-l5: hsl(41, 34.875%, 98%);
  --c-warning-a0\.05: rgba(248, 184, 48, 0.05);
  --c-warning-a0\.3: rgba(248, 184, 48, 0.3);
  --c-warning-a0\.5: rgba(248, 184, 48, 0.55);
  --c-warning-a0\.7: rgba(248, 184, 48, 0.7);
  --c-warning-a0\.85: rgba(248, 184, 48, 0.85);
  --c-whitesmoke-d5: hsl(223, 16.5%, 56%);
  --c-whitesmoke-d4: hsl(223, 14.4%, 64%);
  --c-whitesmoke-d3: hsl(223, 12.3%, 72%);
  --c-whitesmoke-d2: hsl(223, 10.2%, 80%);
  --c-whitesmoke-d1: hsl(223, 8.1%, 88%);
  --c-whitesmoke: hsl(223, 6%, 96%);
  --c-whitesmoke-l1: hsl(223, 5.25%, 100%);
  --c-whitesmoke-l2: hsl(223, 4.5%, 100%);
  --c-whitesmoke-l3: hsl(223, 3.75%, 100%);
  --c-whitesmoke-l4: hsl(223, 3%, 100%);
  --c-whitesmoke-l5: hsl(223, 2.25%, 100%);
  --c-whitesmoke-a0\.05: rgba(244, 245, 245, 0.05);
  --c-whitesmoke-a0\.3: rgba(244, 245, 245, 0.3);
  --c-whitesmoke-a0\.5: rgba(244, 245, 245, 0.55);
  --c-whitesmoke-a0\.7: rgba(244, 245, 245, 0.7);
  --c-whitesmoke-a0\.85: rgba(244, 245, 245, 0.85);
  --c-smoke-d5: hsl(223, 16.5%, 53%);
  --c-smoke-d4: hsl(223, 14.4%, 61%);
  --c-smoke-d3: hsl(223, 12.3%, 69%);
  --c-smoke-d2: hsl(223, 10.2%, 77%);
  --c-smoke-d1: hsl(223, 8.1%, 85%);
  --c-smoke: hsl(223, 6%, 93%);
  --c-smoke-l1: hsl(223, 5.25%, 100%);
  --c-smoke-l2: hsl(223, 4.5%, 100%);
  --c-smoke-l3: hsl(223, 3.75%, 100%);
  --c-smoke-l4: hsl(223, 3%, 100%);
  --c-smoke-l5: hsl(223, 2.25%, 100%);
  --c-smoke-a0\.05: rgba(236, 237, 238, 0.05);
  --c-smoke-a0\.3: rgba(236, 237, 238, 0.3);
  --c-smoke-a0\.5: rgba(236, 237, 238, 0.55);
  --c-smoke-a0\.7: rgba(236, 237, 238, 0.7);
  --c-smoke-a0\.85: rgba(236, 237, 238, 0.85);
  --c-gypsum-d5: hsl(223, 16.5%, 50%);
  --c-gypsum-d4: hsl(223, 14.4%, 58%);
  --c-gypsum-d3: hsl(223, 12.3%, 66%);
  --c-gypsum-d2: hsl(223, 10.2%, 74%);
  --c-gypsum-d1: hsl(223, 8.1%, 82%);
  --c-gypsum: hsl(223, 6%, 90%);
  --c-gypsum-l1: hsl(223, 5.25%, 98%);
  --c-gypsum-l2: hsl(223, 4.5%, 100%);
  --c-gypsum-l3: hsl(223, 3.75%, 100%);
  --c-gypsum-l4: hsl(223, 3%, 100%);
  --c-gypsum-l5: hsl(223, 2.25%, 100%);
  --c-gypsum-a0\.05: rgba(228, 229, 231, 0.05);
  --c-gypsum-a0\.3: rgba(228, 229, 231, 0.3);
  --c-gypsum-a0\.5: rgba(228, 229, 231, 0.55);
  --c-gypsum-a0\.7: rgba(228, 229, 231, 0.7);
  --c-gypsum-a0\.85: rgba(228, 229, 231, 0.85);
  --c-gainsboro-d5: hsl(223, 16.5%, 44%);
  --c-gainsboro-d4: hsl(223, 14.4%, 52%);
  --c-gainsboro-d3: hsl(223, 12.3%, 60%);
  --c-gainsboro-d2: hsl(223, 10.2%, 68%);
  --c-gainsboro-d1: hsl(223, 8.1%, 76%);
  --c-gainsboro: hsl(223, 6%, 84%);
  --c-gainsboro-l1: hsl(223, 5.25%, 92%);
  --c-gainsboro-l2: hsl(223, 4.5%, 100%);
  --c-gainsboro-l3: hsl(223, 3.75%, 100%);
  --c-gainsboro-l4: hsl(223, 3%, 100%);
  --c-gainsboro-l5: hsl(223, 2.25%, 100%);
  --c-gainsboro-a0\.05: rgba(212, 213, 217, 0.05);
  --c-gainsboro-a0\.3: rgba(212, 213, 217, 0.3);
  --c-gainsboro-a0\.5: rgba(212, 213, 217, 0.55);
  --c-gainsboro-a0\.7: rgba(212, 213, 217, 0.7);
  --c-gainsboro-a0\.85: rgba(212, 213, 217, 0.85);
  --c-lightgray-d5: hsl(223, 16.5%, 40%);
  --c-lightgray-d4: hsl(223, 14.4%, 48%);
  --c-lightgray-d3: hsl(223, 12.3%, 56%);
  --c-lightgray-d2: hsl(223, 10.2%, 64%);
  --c-lightgray-d1: hsl(223, 8.1%, 72%);
  --c-lightgray: hsl(223, 6%, 80%);
  --c-lightgray-l1: hsl(223, 5.25%, 88%);
  --c-lightgray-l2: hsl(223, 4.5%, 96%);
  --c-lightgray-l3: hsl(223, 3.75%, 100%);
  --c-lightgray-l4: hsl(223, 3%, 100%);
  --c-lightgray-l5: hsl(223, 2.25%, 100%);
  --c-lightgray-a0\.05: rgba(201, 203, 207, 0.05);
  --c-lightgray-a0\.3: rgba(201, 203, 207, 0.3);
  --c-lightgray-a0\.5: rgba(201, 203, 207, 0.55);
  --c-lightgray-a0\.7: rgba(201, 203, 207, 0.7);
  --c-lightgray-a0\.85: rgba(201, 203, 207, 0.85);
  --c-silver-d5: hsl(223, 16.5%, 35%);
  --c-silver-d4: hsl(223, 14.4%, 43%);
  --c-silver-d3: hsl(223, 12.3%, 51%);
  --c-silver-d2: hsl(223, 10.2%, 59%);
  --c-silver-d1: hsl(223, 8.1%, 67%);
  --c-silver: hsl(223, 6%, 75%);
  --c-silver-l1: hsl(223, 5.25%, 83%);
  --c-silver-l2: hsl(223, 4.5%, 91%);
  --c-silver-l3: hsl(223, 3.75%, 99%);
  --c-silver-l4: hsl(223, 3%, 100%);
  --c-silver-l5: hsl(223, 2.25%, 100%);
  --c-silver-a0\.05: rgba(187, 190, 195, 0.05);
  --c-silver-a0\.3: rgba(187, 190, 195, 0.3);
  --c-silver-a0\.5: rgba(187, 190, 195, 0.55);
  --c-silver-a0\.7: rgba(187, 190, 195, 0.7);
  --c-silver-a0\.85: rgba(187, 190, 195, 0.85);
  --c-darkgray-d5: hsl(223, 16.5%, 26%);
  --c-darkgray-d4: hsl(223, 14.4%, 34%);
  --c-darkgray-d3: hsl(223, 12.3%, 42%);
  --c-darkgray-d2: hsl(223, 10.2%, 50%);
  --c-darkgray-d1: hsl(223, 8.1%, 58%);
  --c-darkgray: hsl(223, 6%, 66%);
  --c-darkgray-l1: hsl(223, 5.25%, 74%);
  --c-darkgray-l2: hsl(223, 4.5%, 82%);
  --c-darkgray-l3: hsl(223, 3.75%, 90%);
  --c-darkgray-l4: hsl(223, 3%, 98%);
  --c-darkgray-l5: hsl(223, 2.25%, 100%);
  --c-darkgray-a0\.05: rgba(163, 166, 174, 0.05);
  --c-darkgray-a0\.3: rgba(163, 166, 174, 0.3);
  --c-darkgray-a0\.5: rgba(163, 166, 174, 0.55);
  --c-darkgray-a0\.7: rgba(163, 166, 174, 0.7);
  --c-darkgray-a0\.85: rgba(163, 166, 174, 0.85);
  --c-gray-d5: hsl(223, 16.5%, 10%);
  --c-gray-d4: hsl(223, 14.4%, 18%);
  --c-gray-d3: hsl(223, 12.3%, 26%);
  --c-gray-d2: hsl(223, 10.2%, 34%);
  --c-gray-d1: hsl(223, 8.1%, 42%);
  --c-gray: hsl(223, 6%, 50%);
  --c-gray-l1: hsl(223, 5.25%, 58%);
  --c-gray-l2: hsl(223, 4.5%, 66%);
  --c-gray-l3: hsl(223, 3.75%, 74%);
  --c-gray-l4: hsl(223, 3%, 82%);
  --c-gray-l5: hsl(223, 2.25%, 90%);
  --c-gray-a0\.05: rgba(120, 124, 135, 0.05);
  --c-gray-a0\.3: rgba(120, 124, 135, 0.3);
  --c-gray-a0\.5: rgba(120, 124, 135, 0.55);
  --c-gray-a0\.7: rgba(120, 124, 135, 0.7);
  --c-gray-a0\.85: rgba(120, 124, 135, 0.85);
  --c-dimgray-d5: hsl(223, 16.5%, 1%);
  --c-dimgray-d4: hsl(223, 14.4%, 9%);
  --c-dimgray-d3: hsl(223, 12.3%, 17%);
  --c-dimgray-d2: hsl(223, 10.2%, 25%);
  --c-dimgray-d1: hsl(223, 8.1%, 33%);
  --c-dimgray: hsl(223, 6%, 41%);
  --c-dimgray-l1: hsl(223, 5.25%, 49%);
  --c-dimgray-l2: hsl(223, 4.5%, 57%);
  --c-dimgray-l3: hsl(223, 3.75%, 65%);
  --c-dimgray-l4: hsl(223, 3%, 73%);
  --c-dimgray-l5: hsl(223, 2.25%, 81%);
  --c-dimgray-a0\.05: rgba(98, 102, 111, 0.05);
  --c-dimgray-a0\.3: rgba(98, 102, 111, 0.3);
  --c-dimgray-a0\.5: rgba(98, 102, 111, 0.55);
  --c-dimgray-a0\.7: rgba(98, 102, 111, 0.7);
  --c-dimgray-a0\.85: rgba(98, 102, 111, 0.85);
  --c-black-d5: hsl(223, 16.5%, 0%);
  --c-black-d4: hsl(223, 14.4%, 0%);
  --c-black-d3: hsl(223, 12.3%, 0%);
  --c-black-d2: hsl(223, 10.2%, 0%);
  --c-black-d1: hsl(223, 8.1%, 0%);
  --c-black: hsl(223, 6%, 0%);
  --c-black-l1: hsl(223, 5.25%, 8%);
  --c-black-l2: hsl(223, 4.5%, 16%);
  --c-black-l3: hsl(223, 3.75%, 24%);
  --c-black-l4: hsl(223, 3%, 32%);
  --c-black-l5: hsl(223, 2.25%, 40%);
  --c-black-a0\.05: rgba(0, 0, 0, 0.05);
  --c-black-a0\.3: rgba(0, 0, 0, 0.3);
  --c-black-a0\.5: rgba(0, 0, 0, 0.55);
  --c-black-a0\.7: rgba(0, 0, 0, 0.7);
  --c-black-a0\.85: rgba(0, 0, 0, 0.85);
  --c-onyx-d5: hsl(223, 68.75%, 0%);
  --c-onyx-d4: hsl(223, 60%, 0%);
  --c-onyx-d3: hsl(223, 51.25%, 0%);
  --c-onyx-d2: hsl(223, 42.5%, 0%);
  --c-onyx-d1: hsl(223, 33.75%, 5%);
  --c-onyx: hsl(223, 25%, 13%);
  --c-onyx-l1: hsl(223, 21.875%, 21%);
  --c-onyx-l2: hsl(223, 18.75%, 29%);
  --c-onyx-l3: hsl(223, 15.625%, 37%);
  --c-onyx-l4: hsl(223, 12.5%, 45%);
  --c-onyx-l5: hsl(223, 9.375%, 53%);
  --c-onyx-a0\.05: rgba(25, 30, 41, 0.05);
  --c-onyx-a0\.3: rgba(25, 30, 41, 0.3);
  --c-onyx-a0\.5: rgba(25, 30, 41, 0.55);
  --c-onyx-a0\.7: rgba(25, 30, 41, 0.7);
  --c-onyx-a0\.85: rgba(25, 30, 41, 0.85);
  --c-alice-d5: hsl(208, 100%, 6%);
  --c-alice-d4: hsl(208, 100%, 14%);
  --c-alice-d3: hsl(208, 100%, 22%);
  --c-alice-d2: hsl(208, 100%, 30%);
  --c-alice-d1: hsl(208, 100%, 38%);
  --c-alice: hsl(208, 99%, 46%);
  --c-alice-l1: hsl(208, 86.625%, 54%);
  --c-alice-l2: hsl(208, 74.25%, 62%);
  --c-alice-l3: hsl(208, 61.875%, 70%);
  --c-alice-l4: hsl(208, 49.5%, 78%);
  --c-alice-l5: hsl(208, 37.125%, 86%);
  --c-alice-a0\.05: rgba(1, 125, 233, 0.05);
  --c-alice-a0\.3: rgba(1, 125, 233, 0.3);
  --c-alice-a0\.5: rgba(1, 125, 233, 0.55);
  --c-alice-a0\.7: rgba(1, 125, 233, 0.7);
  --c-alice-a0\.85: rgba(1, 125, 233, 0.85);
  --c-cassis-d5: hsl(223, 100%, 0%);
  --c-cassis-d4: hsl(223, 100%, 0%);
  --c-cassis-d3: hsl(223, 100%, 0%);
  --c-cassis-d2: hsl(223, 100%, 3%);
  --c-cassis-d1: hsl(223, 83.7%, 11%);
  --c-cassis: hsl(223, 62%, 19%);
  --c-cassis-l1: hsl(223, 54.25%, 27%);
  --c-cassis-l2: hsl(223, 46.5%, 35%);
  --c-cassis-l3: hsl(223, 38.75%, 43%);
  --c-cassis-l4: hsl(223, 31%, 51%);
  --c-cassis-l5: hsl(223, 23.25%, 59%);
  --c-cassis-a0\.05: rgba(18, 35, 78, 0.05);
  --c-cassis-a0\.3: rgba(18, 35, 78, 0.3);
  --c-cassis-a0\.5: rgba(18, 35, 78, 0.55);
  --c-cassis-a0\.7: rgba(18, 35, 78, 0.7);
  --c-cassis-a0\.85: rgba(18, 35, 78, 0.85);
  --c-blue-d5: hsl(240, 100%, 10%);
  --c-blue-d4: hsl(240, 100%, 18%);
  --c-blue-d3: hsl(240, 100%, 26%);
  --c-blue-d2: hsl(240, 100%, 34%);
  --c-blue-d1: hsl(240, 100%, 42%);
  --c-blue: hsl(240, 99%, 50%);
  --c-blue-l1: hsl(240, 86.625%, 58%);
  --c-blue-l2: hsl(240, 74.25%, 66%);
  --c-blue-l3: hsl(240, 61.875%, 74%);
  --c-blue-l4: hsl(240, 49.5%, 82%);
  --c-blue-l5: hsl(240, 37.125%, 90%);
  --c-blue-a0\.05: rgba(1, 1, 254, 0.05);
  --c-blue-a0\.3: rgba(1, 1, 254, 0.3);
  --c-blue-a0\.5: rgba(1, 1, 254, 0.55);
  --c-blue-a0\.7: rgba(1, 1, 254, 0.7);
  --c-blue-a0\.85: rgba(1, 1, 254, 0.85);
  --c-akebia-d5: hsl(252, 71.5%, 6%);
  --c-akebia-d4: hsl(252, 62.4%, 14%);
  --c-akebia-d3: hsl(252, 53.3%, 22%);
  --c-akebia-d2: hsl(252, 44.2%, 30%);
  --c-akebia-d1: hsl(252, 35.1%, 38%);
  --c-akebia: hsl(252, 26%, 46%);
  --c-akebia-l1: hsl(252, 22.75%, 54%);
  --c-akebia-l2: hsl(252, 19.5%, 62%);
  --c-akebia-l3: hsl(252, 16.25%, 70%);
  --c-akebia-l4: hsl(252, 13%, 78%);
  --c-akebia-l5: hsl(252, 9.75%, 86%);
  --c-akebia-a0\.05: rgba(99, 87, 148, 0.05);
  --c-akebia-a0\.3: rgba(99, 87, 148, 0.3);
  --c-akebia-a0\.5: rgba(99, 87, 148, 0.55);
  --c-akebia-a0\.7: rgba(99, 87, 148, 0.7);
  --c-akebia-a0\.85: rgba(99, 87, 148, 0.85);
  --c-aubergine-d5: hsl(256, 38.5%, 14%);
  --c-aubergine-d4: hsl(256, 33.6%, 22%);
  --c-aubergine-d3: hsl(256, 28.7%, 30%);
  --c-aubergine-d2: hsl(256, 23.8%, 38%);
  --c-aubergine-d1: hsl(256, 18.9%, 46%);
  --c-aubergine: hsl(256, 14%, 54%);
  --c-aubergine-l1: hsl(256, 12.25%, 62%);
  --c-aubergine-l2: hsl(256, 10.5%, 70%);
  --c-aubergine-l3: hsl(256, 8.75%, 78%);
  --c-aubergine-l4: hsl(256, 7%, 86%);
  --c-aubergine-l5: hsl(256, 5.25%, 94%);
  --c-aubergine-a0\.05: rgba(130, 121, 154, 0.05);
  --c-aubergine-a0\.3: rgba(130, 121, 154, 0.3);
  --c-aubergine-a0\.5: rgba(130, 121, 154, 0.55);
  --c-aubergine-a0\.7: rgba(130, 121, 154, 0.7);
  --c-aubergine-a0\.85: rgba(130, 121, 154, 0.85)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert) {
  color: currentColor;
  fill: currentColor
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain {
  border: none;
  border-color: var(--c-text-100, hsl(223, 6%, 94%));
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost {
  border: 1px solid var(--c-text-400, hsl(223, 6%, 69%));
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline {
  border: 1px solid var(--c-text-400, hsl(223, 6%, 69%));
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]):hover {
    opacity: 1;
    background: var(--c-text-a0\.05, hsla(223, 6%, 13%, 0.05))
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]):hover {
    background: var(--c-gray-150, hsl(223, 6%, 89%))
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline):hover {
    border-color: var(--c-text-a0\.3, hsla(223, 6%, 13%, 0.3))
  }
}

.magique .bubble:is(.is-plain, .is-ghost, .is-outline) {
  border-width: 0.15em
}

.magique .bubble.on-top.is-plain:before {
  border-top-color: var(--c-text-100, hsl(223, 6%, 94%))
}

.magique .bubble.on-bottom.is-plain:before {
  border-bottom-color: var(--c-text-100, hsl(223, 6%, 94%))
}

.magique .bubble.on-left.is-plain:before {
  border-left-color: var(--c-text-100, hsl(223, 6%, 94%))
}

.magique .bubble.on-right.is-plain:before {
  border-right-color: var(--c-text-100, hsl(223, 6%, 94%))
}

.magique .bubble.on-top:is(.is-ghost, .is-outline):before {
  border-top-color: var(--c-text-400, hsl(223, 6%, 69%))
}

.magique .bubble.on-bottom:is(.is-ghost, .is-outline):before {
  border-bottom-color: var(--c-text-400, hsl(223, 6%, 69%))
}

.magique .bubble.on-left:is(.is-ghost, .is-outline):before {
  border-left-color: var(--c-text-400, hsl(223, 6%, 69%))
}

.magique .bubble.on-right:is(.is-ghost, .is-outline):before {
  border-right-color: var(--c-text-400, hsl(223, 6%, 69%))
}

.magique .bubble.on-top.is-outline:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .link:is([href], [onclick]) {
  position: relative;
  z-index: 10;
  line-height: 1.33;
  border: none;
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-700, hsl(223, 62%, 33%))), color-stop(50%, var(--c-primary-700, hsl(223, 62%, 33%))), color-stop(50%, currentColor), to(currentColor));
  color: var(--c-primary-700, hsl(223, 62%, 33%));
  background: linear-gradient(to right, var(--c-primary-700, hsl(223, 62%, 33%)) 0%, var(--c-primary-700, hsl(223, 62%, 33%)) 50%, currentColor 50%, currentColor 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease
}

.magique .link:is([href], [onclick]):before {
  content: "";
  z-index: -1;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  width: 100%;
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-700, hsl(223, 62%, 33%))), color-stop(50%, var(--c-primary-700, hsl(223, 62%, 33%))), color-stop(50%, currentColor), to(currentColor));
  background: linear-gradient(to right, var(--c-primary-700, hsl(223, 62%, 33%)) 0%, var(--c-primary-700, hsl(223, 62%, 33%)) 50%, currentColor 50%, currentColor 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-base {
  color: var(--c-base, currentColor);
  fill: var(--c-base, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-base {
  border-color: var(--c-base, currentColor);
  background: var(--c-base, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-base {
  border-color: var(--c-base, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-base {
  border-color: var(--c-base, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-base:hover {
    opacity: 1;
    background: var(--c-base-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-base:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-base:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-base:hover {
    background: var(--c-base-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-base:hover {
    border-color: var(--c-base-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-base:before {
  border-top-color: var(--c-base, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-base:before {
  border-bottom-color: var(--c-base, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-base:before {
  border-left-color: var(--c-base, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-base:before {
  border-right-color: var(--c-base, currentColor)
}

.magique .bubble.on-top.is-outline.is-base:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-base:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-base:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-base:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-base {
  background: var(--c-base-100, hsl(223, 6%, 93%));
  color: var(--c-base, currentColor);
  fill: var(--c-base, currentColor)
}

.magique .link.is-base:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-base-l1)), color-stop(50%, var(--c-base-l1)), color-stop(50%, var(--c-base)), to(var(--c-base)));
  background: linear-gradient(to right, var(--c-base-l1) 0%, var(--c-base-l1) 50%, var(--c-base) 50%, var(--c-base) 100%)
}

.magique .link.is-base:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-base-l1)), color-stop(50%, var(--c-base-l1)), color-stop(50%, var(--c-base)), to(var(--c-base)));
  background: linear-gradient(to right, var(--c-base-l1) 0%, var(--c-base-l1) 50%, var(--c-base) 50%, var(--c-base) 100%)
}

.magique .list.is-base:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-base:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-base[style*=list-style]>:is(li, dd):before {
  color: var(--c-base, currentColor);
  fill: var(--c-base, currentColor)
}

.magique .list.is-base:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-base:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-base:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-base:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-base, currentColor);
  color: var(--c-base, currentColor);
  fill: var(--c-base, currentColor)
}

.magique .list.is-base[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-base[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-base[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-base[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-base, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-base {
  border-color: var(--c-base-a0\.5);
  background: var(--c-base-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-secondary {
  color: var(--c-secondary, currentColor);
  fill: var(--c-secondary, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-secondary {
  border-color: var(--c-secondary, currentColor);
  background: var(--c-secondary, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-secondary {
  border-color: var(--c-secondary, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-secondary {
  border-color: var(--c-secondary, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-secondary:hover {
    opacity: 1;
    background: var(--c-secondary-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-secondary:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-secondary:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-secondary:hover {
    background: var(--c-secondary-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-secondary:hover {
    border-color: var(--c-secondary-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-secondary:before {
  border-top-color: var(--c-secondary, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-secondary:before {
  border-bottom-color: var(--c-secondary, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-secondary:before {
  border-left-color: var(--c-secondary, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-secondary:before {
  border-right-color: var(--c-secondary, currentColor)
}

.magique .bubble.on-top.is-outline.is-secondary:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-secondary:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-secondary:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-secondary:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-secondary {
  background: var(--c-secondary-100, hsl(223, 6%, 93%));
  color: var(--c-secondary, currentColor);
  fill: var(--c-secondary, currentColor)
}

.magique .link.is-secondary:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-secondary-l1)), color-stop(50%, var(--c-secondary-l1)), color-stop(50%, var(--c-secondary)), to(var(--c-secondary)));
  background: linear-gradient(to right, var(--c-secondary-l1) 0%, var(--c-secondary-l1) 50%, var(--c-secondary) 50%, var(--c-secondary) 100%)
}

.magique .link.is-secondary:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-secondary-l1)), color-stop(50%, var(--c-secondary-l1)), color-stop(50%, var(--c-secondary)), to(var(--c-secondary)));
  background: linear-gradient(to right, var(--c-secondary-l1) 0%, var(--c-secondary-l1) 50%, var(--c-secondary) 50%, var(--c-secondary) 100%)
}

.magique .list.is-secondary:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-secondary:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-secondary[style*=list-style]>:is(li, dd):before {
  color: var(--c-secondary, currentColor);
  fill: var(--c-secondary, currentColor)
}

.magique .list.is-secondary:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-secondary:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-secondary:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-secondary:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-secondary, currentColor);
  color: var(--c-secondary, currentColor);
  fill: var(--c-secondary, currentColor)
}

.magique .list.is-secondary[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-secondary[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-secondary[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-secondary[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-secondary, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-secondary {
  border-color: var(--c-secondary-a0\.5);
  background: var(--c-secondary-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-text {
  color: var(--c-text, currentColor);
  fill: var(--c-text, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-text {
  border-color: var(--c-text, currentColor);
  background: var(--c-text, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-text {
  border-color: var(--c-text, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-text {
  border-color: var(--c-text, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-text:hover {
    opacity: 1;
    background: var(--c-text-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-text:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-text:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-text:hover {
    background: var(--c-text-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-text:hover {
    border-color: var(--c-text-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-text:before {
  border-top-color: var(--c-text, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-text:before {
  border-bottom-color: var(--c-text, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-text:before {
  border-left-color: var(--c-text, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-text:before {
  border-right-color: var(--c-text, currentColor)
}

.magique .bubble.on-top.is-outline.is-text:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-text:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-text:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-text:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-text {
  background: var(--c-text-100, hsl(223, 6%, 93%));
  color: var(--c-text, currentColor);
  fill: var(--c-text, currentColor)
}

.magique .link.is-text:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-text-l1)), color-stop(50%, var(--c-text-l1)), color-stop(50%, var(--c-text)), to(var(--c-text)));
  background: linear-gradient(to right, var(--c-text-l1) 0%, var(--c-text-l1) 50%, var(--c-text) 50%, var(--c-text) 100%)
}

.magique .link.is-text:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-text-l1)), color-stop(50%, var(--c-text-l1)), color-stop(50%, var(--c-text)), to(var(--c-text)));
  background: linear-gradient(to right, var(--c-text-l1) 0%, var(--c-text-l1) 50%, var(--c-text) 50%, var(--c-text) 100%)
}

.magique .list.is-text:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-text:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-text[style*=list-style]>:is(li, dd):before {
  color: var(--c-text, currentColor);
  fill: var(--c-text, currentColor)
}

.magique .list.is-text:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-text:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-text:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-text:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-text, currentColor);
  color: var(--c-text, currentColor);
  fill: var(--c-text, currentColor)
}

.magique .list.is-text[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-text[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-text[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-text[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-text, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-text {
  border-color: var(--c-text-a0\.5);
  background: var(--c-text-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-primary {
  color: var(--c-primary, currentColor);
  fill: var(--c-primary, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-primary {
  border-color: var(--c-primary, currentColor);
  background: var(--c-primary, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-primary {
  border-color: var(--c-primary, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-primary {
  border-color: var(--c-primary, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-primary:hover {
    opacity: 1;
    background: var(--c-primary-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-primary:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-primary:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-primary:hover {
    background: var(--c-primary-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-primary:hover {
    border-color: var(--c-primary-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-primary:before {
  border-top-color: var(--c-primary, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-primary:before {
  border-bottom-color: var(--c-primary, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-primary:before {
  border-left-color: var(--c-primary, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-primary:before {
  border-right-color: var(--c-primary, currentColor)
}

.magique .bubble.on-top.is-outline.is-primary:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-primary:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-primary:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-primary:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-primary {
  background: var(--c-primary-100, hsl(223, 6%, 93%));
  color: var(--c-primary, currentColor);
  fill: var(--c-primary, currentColor)
}

.magique .link.is-primary:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-l1)), color-stop(50%, var(--c-primary-l1)), color-stop(50%, var(--c-primary)), to(var(--c-primary)));
  background: linear-gradient(to right, var(--c-primary-l1) 0%, var(--c-primary-l1) 50%, var(--c-primary) 50%, var(--c-primary) 100%)
}

.magique .link.is-primary:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-l1)), color-stop(50%, var(--c-primary-l1)), color-stop(50%, var(--c-primary)), to(var(--c-primary)));
  background: linear-gradient(to right, var(--c-primary-l1) 0%, var(--c-primary-l1) 50%, var(--c-primary) 50%, var(--c-primary) 100%)
}

.magique .list.is-primary:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-primary:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-primary[style*=list-style]>:is(li, dd):before {
  color: var(--c-primary, currentColor);
  fill: var(--c-primary, currentColor)
}

.magique .list.is-primary:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-primary:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-primary:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-primary:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-primary, currentColor);
  color: var(--c-primary, currentColor);
  fill: var(--c-primary, currentColor)
}

.magique .list.is-primary[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-primary[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-primary[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-primary[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-primary, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-primary {
  border-color: var(--c-primary-a0\.5);
  background: var(--c-primary-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-primary-pale {
  color: var(--c-primary-pale, currentColor);
  fill: var(--c-primary-pale, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-primary-pale {
  border-color: var(--c-primary-pale, currentColor);
  background: var(--c-primary-pale, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-primary-pale {
  border-color: var(--c-primary-pale, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-primary-pale {
  border-color: var(--c-primary-pale, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-primary-pale:hover {
    opacity: 1;
    background: var(--c-primary-pale-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-primary-pale:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-primary-pale:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-primary-pale:hover {
    background: var(--c-primary-pale-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-primary-pale:hover {
    border-color: var(--c-primary-pale-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-primary-pale:before {
  border-top-color: var(--c-primary-pale, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-primary-pale:before {
  border-bottom-color: var(--c-primary-pale, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-primary-pale:before {
  border-left-color: var(--c-primary-pale, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-primary-pale:before {
  border-right-color: var(--c-primary-pale, currentColor)
}

.magique .bubble.on-top.is-outline.is-primary-pale:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-primary-pale:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-primary-pale:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-primary-pale:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-primary-pale {
  background: var(--c-primary-pale-100, hsl(223, 6%, 93%));
  color: var(--c-primary-pale, currentColor);
  fill: var(--c-primary-pale, currentColor)
}

.magique .link.is-primary-pale:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-pale-l1)), color-stop(50%, var(--c-primary-pale-l1)), color-stop(50%, var(--c-primary-pale)), to(var(--c-primary-pale)));
  background: linear-gradient(to right, var(--c-primary-pale-l1) 0%, var(--c-primary-pale-l1) 50%, var(--c-primary-pale) 50%, var(--c-primary-pale) 100%)
}

.magique .link.is-primary-pale:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-pale-l1)), color-stop(50%, var(--c-primary-pale-l1)), color-stop(50%, var(--c-primary-pale)), to(var(--c-primary-pale)));
  background: linear-gradient(to right, var(--c-primary-pale-l1) 0%, var(--c-primary-pale-l1) 50%, var(--c-primary-pale) 50%, var(--c-primary-pale) 100%)
}

.magique .list.is-primary-pale:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-primary-pale:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-primary-pale[style*=list-style]>:is(li, dd):before {
  color: var(--c-primary-pale, currentColor);
  fill: var(--c-primary-pale, currentColor)
}

.magique .list.is-primary-pale:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-primary-pale:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-primary-pale:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-primary-pale:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-primary-pale, currentColor);
  color: var(--c-primary-pale, currentColor);
  fill: var(--c-primary-pale, currentColor)
}

.magique .list.is-primary-pale[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-primary-pale[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-primary-pale[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-primary-pale[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-primary-pale, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-primary-pale {
  border-color: var(--c-primary-pale-a0\.5);
  background: var(--c-primary-pale-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-primary-deep {
  color: var(--c-primary-deep, currentColor);
  fill: var(--c-primary-deep, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-primary-deep {
  border-color: var(--c-primary-deep, currentColor);
  background: var(--c-primary-deep, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-primary-deep {
  border-color: var(--c-primary-deep, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-primary-deep {
  border-color: var(--c-primary-deep, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-primary-deep:hover {
    opacity: 1;
    background: var(--c-primary-deep-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-primary-deep:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-primary-deep:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-primary-deep:hover {
    background: var(--c-primary-deep-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-primary-deep:hover {
    border-color: var(--c-primary-deep-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-primary-deep:before {
  border-top-color: var(--c-primary-deep, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-primary-deep:before {
  border-bottom-color: var(--c-primary-deep, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-primary-deep:before {
  border-left-color: var(--c-primary-deep, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-primary-deep:before {
  border-right-color: var(--c-primary-deep, currentColor)
}

.magique .bubble.on-top.is-outline.is-primary-deep:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-primary-deep:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-primary-deep:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-primary-deep:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-primary-deep {
  background: var(--c-primary-deep-100, hsl(223, 6%, 93%));
  color: var(--c-primary-deep, currentColor);
  fill: var(--c-primary-deep, currentColor)
}

.magique .link.is-primary-deep:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-deep-l1)), color-stop(50%, var(--c-primary-deep-l1)), color-stop(50%, var(--c-primary-deep)), to(var(--c-primary-deep)));
  background: linear-gradient(to right, var(--c-primary-deep-l1) 0%, var(--c-primary-deep-l1) 50%, var(--c-primary-deep) 50%, var(--c-primary-deep) 100%)
}

.magique .link.is-primary-deep:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-primary-deep-l1)), color-stop(50%, var(--c-primary-deep-l1)), color-stop(50%, var(--c-primary-deep)), to(var(--c-primary-deep)));
  background: linear-gradient(to right, var(--c-primary-deep-l1) 0%, var(--c-primary-deep-l1) 50%, var(--c-primary-deep) 50%, var(--c-primary-deep) 100%)
}

.magique .list.is-primary-deep:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-primary-deep:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-primary-deep[style*=list-style]>:is(li, dd):before {
  color: var(--c-primary-deep, currentColor);
  fill: var(--c-primary-deep, currentColor)
}

.magique .list.is-primary-deep:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-primary-deep:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-primary-deep:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-primary-deep:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-primary-deep, currentColor);
  color: var(--c-primary-deep, currentColor);
  fill: var(--c-primary-deep, currentColor)
}

.magique .list.is-primary-deep[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-primary-deep[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-primary-deep[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-primary-deep[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-primary-deep, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-primary-deep {
  border-color: var(--c-primary-deep-a0\.5);
  background: var(--c-primary-deep-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-accent {
  color: var(--c-accent, currentColor);
  fill: var(--c-accent, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-accent {
  border-color: var(--c-accent, currentColor);
  background: var(--c-accent, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-accent {
  border-color: var(--c-accent, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-accent {
  border-color: var(--c-accent, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-accent:hover {
    opacity: 1;
    background: var(--c-accent-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-accent:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-accent:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-accent:hover {
    background: var(--c-accent-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-accent:hover {
    border-color: var(--c-accent-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-accent:before {
  border-top-color: var(--c-accent, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-accent:before {
  border-bottom-color: var(--c-accent, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-accent:before {
  border-left-color: var(--c-accent, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-accent:before {
  border-right-color: var(--c-accent, currentColor)
}

.magique .bubble.on-top.is-outline.is-accent:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-accent:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-accent:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-accent:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-accent {
  background: var(--c-accent-100, hsl(223, 6%, 93%));
  color: var(--c-accent, currentColor);
  fill: var(--c-accent, currentColor)
}

.magique .link.is-accent:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-accent-l1)), color-stop(50%, var(--c-accent-l1)), color-stop(50%, var(--c-accent)), to(var(--c-accent)));
  background: linear-gradient(to right, var(--c-accent-l1) 0%, var(--c-accent-l1) 50%, var(--c-accent) 50%, var(--c-accent) 100%)
}

.magique .link.is-accent:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-accent-l1)), color-stop(50%, var(--c-accent-l1)), color-stop(50%, var(--c-accent)), to(var(--c-accent)));
  background: linear-gradient(to right, var(--c-accent-l1) 0%, var(--c-accent-l1) 50%, var(--c-accent) 50%, var(--c-accent) 100%)
}

.magique .list.is-accent:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-accent:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-accent[style*=list-style]>:is(li, dd):before {
  color: var(--c-accent, currentColor);
  fill: var(--c-accent, currentColor)
}

.magique .list.is-accent:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-accent:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-accent:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-accent:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-accent, currentColor);
  color: var(--c-accent, currentColor);
  fill: var(--c-accent, currentColor)
}

.magique .list.is-accent[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-accent[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-accent[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-accent[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-accent, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-accent {
  border-color: var(--c-accent-a0\.5);
  background: var(--c-accent-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-accent2 {
  color: var(--c-accent2, currentColor);
  fill: var(--c-accent2, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-accent2 {
  border-color: var(--c-accent2, currentColor);
  background: var(--c-accent2, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-accent2 {
  border-color: var(--c-accent2, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-accent2 {
  border-color: var(--c-accent2, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-accent2:hover {
    opacity: 1;
    background: var(--c-accent2-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-accent2:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-accent2:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-accent2:hover {
    background: var(--c-accent2-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-accent2:hover {
    border-color: var(--c-accent2-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-accent2:before {
  border-top-color: var(--c-accent2, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-accent2:before {
  border-bottom-color: var(--c-accent2, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-accent2:before {
  border-left-color: var(--c-accent2, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-accent2:before {
  border-right-color: var(--c-accent2, currentColor)
}

.magique .bubble.on-top.is-outline.is-accent2:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-accent2:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-accent2:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-accent2:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-accent2 {
  background: var(--c-accent2-100, hsl(223, 6%, 93%));
  color: var(--c-accent2, currentColor);
  fill: var(--c-accent2, currentColor)
}

.magique .link.is-accent2:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-accent2-l1)), color-stop(50%, var(--c-accent2-l1)), color-stop(50%, var(--c-accent2)), to(var(--c-accent2)));
  background: linear-gradient(to right, var(--c-accent2-l1) 0%, var(--c-accent2-l1) 50%, var(--c-accent2) 50%, var(--c-accent2) 100%)
}

.magique .link.is-accent2:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-accent2-l1)), color-stop(50%, var(--c-accent2-l1)), color-stop(50%, var(--c-accent2)), to(var(--c-accent2)));
  background: linear-gradient(to right, var(--c-accent2-l1) 0%, var(--c-accent2-l1) 50%, var(--c-accent2) 50%, var(--c-accent2) 100%)
}

.magique .list.is-accent2:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-accent2:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-accent2[style*=list-style]>:is(li, dd):before {
  color: var(--c-accent2, currentColor);
  fill: var(--c-accent2, currentColor)
}

.magique .list.is-accent2:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-accent2:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-accent2:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-accent2:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-accent2, currentColor);
  color: var(--c-accent2, currentColor);
  fill: var(--c-accent2, currentColor)
}

.magique .list.is-accent2[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-accent2[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-accent2[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-accent2[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-accent2, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-accent2 {
  border-color: var(--c-accent2-a0\.5);
  background: var(--c-accent2-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-accent3 {
  color: var(--c-accent3, currentColor);
  fill: var(--c-accent3, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-accent3 {
  border-color: var(--c-accent3, currentColor);
  background: var(--c-accent3, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-accent3 {
  border-color: var(--c-accent3, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-accent3 {
  border-color: var(--c-accent3, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-accent3:hover {
    opacity: 1;
    background: var(--c-accent3-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-accent3:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-accent3:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-accent3:hover {
    background: var(--c-accent3-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-accent3:hover {
    border-color: var(--c-accent3-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-accent3:before {
  border-top-color: var(--c-accent3, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-accent3:before {
  border-bottom-color: var(--c-accent3, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-accent3:before {
  border-left-color: var(--c-accent3, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-accent3:before {
  border-right-color: var(--c-accent3, currentColor)
}

.magique .bubble.on-top.is-outline.is-accent3:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-accent3:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-accent3:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-accent3:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-accent3 {
  background: var(--c-accent3-100, hsl(223, 6%, 93%));
  color: var(--c-accent3, currentColor);
  fill: var(--c-accent3, currentColor)
}

.magique .link.is-accent3:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-accent3-l1)), color-stop(50%, var(--c-accent3-l1)), color-stop(50%, var(--c-accent3)), to(var(--c-accent3)));
  background: linear-gradient(to right, var(--c-accent3-l1) 0%, var(--c-accent3-l1) 50%, var(--c-accent3) 50%, var(--c-accent3) 100%)
}

.magique .link.is-accent3:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-accent3-l1)), color-stop(50%, var(--c-accent3-l1)), color-stop(50%, var(--c-accent3)), to(var(--c-accent3)));
  background: linear-gradient(to right, var(--c-accent3-l1) 0%, var(--c-accent3-l1) 50%, var(--c-accent3) 50%, var(--c-accent3) 100%)
}

.magique .list.is-accent3:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-accent3:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-accent3[style*=list-style]>:is(li, dd):before {
  color: var(--c-accent3, currentColor);
  fill: var(--c-accent3, currentColor)
}

.magique .list.is-accent3:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-accent3:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-accent3:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-accent3:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-accent3, currentColor);
  color: var(--c-accent3, currentColor);
  fill: var(--c-accent3, currentColor)
}

.magique .list.is-accent3[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-accent3[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-accent3[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-accent3[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-accent3, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-accent3 {
  border-color: var(--c-accent3-a0\.5);
  background: var(--c-accent3-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-error {
  color: var(--c-error, currentColor);
  fill: var(--c-error, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-error {
  border-color: var(--c-error, currentColor);
  background: var(--c-error, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-error {
  border-color: var(--c-error, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-error {
  border-color: var(--c-error, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-error:hover {
    opacity: 1;
    background: var(--c-error-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-error:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-error:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-error:hover {
    background: var(--c-error-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-error:hover {
    border-color: var(--c-error-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-error:before {
  border-top-color: var(--c-error, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-error:before {
  border-bottom-color: var(--c-error, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-error:before {
  border-left-color: var(--c-error, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-error:before {
  border-right-color: var(--c-error, currentColor)
}

.magique .bubble.on-top.is-outline.is-error:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-error:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-error:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-error:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-error {
  background: var(--c-error-100, hsl(223, 6%, 93%));
  color: var(--c-error, currentColor);
  fill: var(--c-error, currentColor)
}

.magique .link.is-error:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-error-l1)), color-stop(50%, var(--c-error-l1)), color-stop(50%, var(--c-error)), to(var(--c-error)));
  background: linear-gradient(to right, var(--c-error-l1) 0%, var(--c-error-l1) 50%, var(--c-error) 50%, var(--c-error) 100%)
}

.magique .link.is-error:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-error-l1)), color-stop(50%, var(--c-error-l1)), color-stop(50%, var(--c-error)), to(var(--c-error)));
  background: linear-gradient(to right, var(--c-error-l1) 0%, var(--c-error-l1) 50%, var(--c-error) 50%, var(--c-error) 100%)
}

.magique .list.is-error:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-error:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-error[style*=list-style]>:is(li, dd):before {
  color: var(--c-error, currentColor);
  fill: var(--c-error, currentColor)
}

.magique .list.is-error:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-error:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-error:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-error:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-error, currentColor);
  color: var(--c-error, currentColor);
  fill: var(--c-error, currentColor)
}

.magique .list.is-error[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-error[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-error[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-error[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-error, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-error {
  border-color: var(--c-error-a0\.5);
  background: var(--c-error-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-attent {
  color: var(--c-attent, currentColor);
  fill: var(--c-attent, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-attent {
  border-color: var(--c-attent, currentColor);
  background: var(--c-attent, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-attent {
  border-color: var(--c-attent, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-attent {
  border-color: var(--c-attent, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-attent:hover {
    opacity: 1;
    background: var(--c-attent-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-attent:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-attent:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-attent:hover {
    background: var(--c-attent-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-attent:hover {
    border-color: var(--c-attent-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-attent:before {
  border-top-color: var(--c-attent, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-attent:before {
  border-bottom-color: var(--c-attent, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-attent:before {
  border-left-color: var(--c-attent, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-attent:before {
  border-right-color: var(--c-attent, currentColor)
}

.magique .bubble.on-top.is-outline.is-attent:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-attent:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-attent:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-attent:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-attent {
  background: var(--c-attent-100, hsl(223, 6%, 93%));
  color: var(--c-attent, currentColor);
  fill: var(--c-attent, currentColor)
}

.magique .link.is-attent:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-attent-l1)), color-stop(50%, var(--c-attent-l1)), color-stop(50%, var(--c-attent)), to(var(--c-attent)));
  background: linear-gradient(to right, var(--c-attent-l1) 0%, var(--c-attent-l1) 50%, var(--c-attent) 50%, var(--c-attent) 100%)
}

.magique .link.is-attent:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-attent-l1)), color-stop(50%, var(--c-attent-l1)), color-stop(50%, var(--c-attent)), to(var(--c-attent)));
  background: linear-gradient(to right, var(--c-attent-l1) 0%, var(--c-attent-l1) 50%, var(--c-attent) 50%, var(--c-attent) 100%)
}

.magique .list.is-attent:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-attent:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-attent[style*=list-style]>:is(li, dd):before {
  color: var(--c-attent, currentColor);
  fill: var(--c-attent, currentColor)
}

.magique .list.is-attent:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-attent:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-attent:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-attent:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-attent, currentColor);
  color: var(--c-attent, currentColor);
  fill: var(--c-attent, currentColor)
}

.magique .list.is-attent[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-attent[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-attent[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-attent[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-attent, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-attent {
  border-color: var(--c-attent-a0\.5);
  background: var(--c-attent-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-warning {
  color: var(--c-warning, currentColor);
  fill: var(--c-warning, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-warning {
  border-color: var(--c-warning, currentColor);
  background: var(--c-warning, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-warning {
  border-color: var(--c-warning, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-warning {
  border-color: var(--c-warning, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-warning:hover {
    opacity: 1;
    background: var(--c-warning-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-warning:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-warning:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-warning:hover {
    background: var(--c-warning-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-warning:hover {
    border-color: var(--c-warning-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-warning:before {
  border-top-color: var(--c-warning, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-warning:before {
  border-bottom-color: var(--c-warning, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-warning:before {
  border-left-color: var(--c-warning, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-warning:before {
  border-right-color: var(--c-warning, currentColor)
}

.magique .bubble.on-top.is-outline.is-warning:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-warning:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-warning:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-warning:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-warning {
  background: var(--c-warning-100, hsl(223, 6%, 93%));
  color: var(--c-warning, currentColor);
  fill: var(--c-warning, currentColor)
}

.magique .link.is-warning:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-warning-l1)), color-stop(50%, var(--c-warning-l1)), color-stop(50%, var(--c-warning)), to(var(--c-warning)));
  background: linear-gradient(to right, var(--c-warning-l1) 0%, var(--c-warning-l1) 50%, var(--c-warning) 50%, var(--c-warning) 100%)
}

.magique .link.is-warning:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-warning-l1)), color-stop(50%, var(--c-warning-l1)), color-stop(50%, var(--c-warning)), to(var(--c-warning)));
  background: linear-gradient(to right, var(--c-warning-l1) 0%, var(--c-warning-l1) 50%, var(--c-warning) 50%, var(--c-warning) 100%)
}

.magique .list.is-warning:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-warning:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-warning[style*=list-style]>:is(li, dd):before {
  color: var(--c-warning, currentColor);
  fill: var(--c-warning, currentColor)
}

.magique .list.is-warning:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-warning:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-warning:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-warning:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-warning, currentColor);
  color: var(--c-warning, currentColor);
  fill: var(--c-warning, currentColor)
}

.magique .list.is-warning[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-warning[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-warning[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-warning[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-warning, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-warning {
  border-color: var(--c-warning-a0\.5);
  background: var(--c-warning-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-whitesmoke {
  color: var(--c-whitesmoke, currentColor);
  fill: var(--c-whitesmoke, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-whitesmoke {
  border-color: var(--c-whitesmoke, currentColor);
  background: var(--c-whitesmoke, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-whitesmoke {
  border-color: var(--c-whitesmoke, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-whitesmoke {
  border-color: var(--c-whitesmoke, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-whitesmoke:hover {
    opacity: 1;
    background: var(--c-whitesmoke-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-whitesmoke:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-whitesmoke:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-whitesmoke:hover {
    background: var(--c-whitesmoke-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-whitesmoke:hover {
    border-color: var(--c-whitesmoke-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-whitesmoke:before {
  border-top-color: var(--c-whitesmoke, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-whitesmoke:before {
  border-bottom-color: var(--c-whitesmoke, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-whitesmoke:before {
  border-left-color: var(--c-whitesmoke, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-whitesmoke:before {
  border-right-color: var(--c-whitesmoke, currentColor)
}

.magique .bubble.on-top.is-outline.is-whitesmoke:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-whitesmoke:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-whitesmoke:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-whitesmoke:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-whitesmoke {
  background: var(--c-whitesmoke-100, hsl(223, 6%, 93%));
  color: var(--c-whitesmoke, currentColor);
  fill: var(--c-whitesmoke, currentColor)
}

.magique .link.is-whitesmoke:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-whitesmoke-l1)), color-stop(50%, var(--c-whitesmoke-l1)), color-stop(50%, var(--c-whitesmoke)), to(var(--c-whitesmoke)));
  background: linear-gradient(to right, var(--c-whitesmoke-l1) 0%, var(--c-whitesmoke-l1) 50%, var(--c-whitesmoke) 50%, var(--c-whitesmoke) 100%)
}

.magique .link.is-whitesmoke:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-whitesmoke-l1)), color-stop(50%, var(--c-whitesmoke-l1)), color-stop(50%, var(--c-whitesmoke)), to(var(--c-whitesmoke)));
  background: linear-gradient(to right, var(--c-whitesmoke-l1) 0%, var(--c-whitesmoke-l1) 50%, var(--c-whitesmoke) 50%, var(--c-whitesmoke) 100%)
}

.magique .list.is-whitesmoke:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-whitesmoke:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-whitesmoke[style*=list-style]>:is(li, dd):before {
  color: var(--c-whitesmoke, currentColor);
  fill: var(--c-whitesmoke, currentColor)
}

.magique .list.is-whitesmoke:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-whitesmoke:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-whitesmoke:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-whitesmoke:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-whitesmoke, currentColor);
  color: var(--c-whitesmoke, currentColor);
  fill: var(--c-whitesmoke, currentColor)
}

.magique .list.is-whitesmoke[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-whitesmoke[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-whitesmoke[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-whitesmoke[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-whitesmoke, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-whitesmoke {
  border-color: var(--c-whitesmoke-a0\.5);
  background: var(--c-whitesmoke-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-smoke {
  color: var(--c-smoke, currentColor);
  fill: var(--c-smoke, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-smoke {
  border-color: var(--c-smoke, currentColor);
  background: var(--c-smoke, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-smoke {
  border-color: var(--c-smoke, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-smoke {
  border-color: var(--c-smoke, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-smoke:hover {
    opacity: 1;
    background: var(--c-smoke-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-smoke:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-smoke:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-smoke:hover {
    background: var(--c-smoke-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-smoke:hover {
    border-color: var(--c-smoke-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-smoke:before {
  border-top-color: var(--c-smoke, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-smoke:before {
  border-bottom-color: var(--c-smoke, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-smoke:before {
  border-left-color: var(--c-smoke, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-smoke:before {
  border-right-color: var(--c-smoke, currentColor)
}

.magique .bubble.on-top.is-outline.is-smoke:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-smoke:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-smoke:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-smoke:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-smoke {
  background: var(--c-smoke-100, hsl(223, 6%, 93%));
  color: var(--c-smoke, currentColor);
  fill: var(--c-smoke, currentColor)
}

.magique .link.is-smoke:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-smoke-l1)), color-stop(50%, var(--c-smoke-l1)), color-stop(50%, var(--c-smoke)), to(var(--c-smoke)));
  background: linear-gradient(to right, var(--c-smoke-l1) 0%, var(--c-smoke-l1) 50%, var(--c-smoke) 50%, var(--c-smoke) 100%)
}

.magique .link.is-smoke:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-smoke-l1)), color-stop(50%, var(--c-smoke-l1)), color-stop(50%, var(--c-smoke)), to(var(--c-smoke)));
  background: linear-gradient(to right, var(--c-smoke-l1) 0%, var(--c-smoke-l1) 50%, var(--c-smoke) 50%, var(--c-smoke) 100%)
}

.magique .list.is-smoke:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-smoke:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-smoke[style*=list-style]>:is(li, dd):before {
  color: var(--c-smoke, currentColor);
  fill: var(--c-smoke, currentColor)
}

.magique .list.is-smoke:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-smoke:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-smoke:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-smoke:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-smoke, currentColor);
  color: var(--c-smoke, currentColor);
  fill: var(--c-smoke, currentColor)
}

.magique .list.is-smoke[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-smoke[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-smoke[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-smoke[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-smoke, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-smoke {
  border-color: var(--c-smoke-a0\.5);
  background: var(--c-smoke-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-gypsum {
  color: var(--c-gypsum, currentColor);
  fill: var(--c-gypsum, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-gypsum {
  border-color: var(--c-gypsum, currentColor);
  background: var(--c-gypsum, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-gypsum {
  border-color: var(--c-gypsum, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-gypsum {
  border-color: var(--c-gypsum, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-gypsum:hover {
    opacity: 1;
    background: var(--c-gypsum-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-gypsum:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-gypsum:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-gypsum:hover {
    background: var(--c-gypsum-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-gypsum:hover {
    border-color: var(--c-gypsum-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-gypsum:before {
  border-top-color: var(--c-gypsum, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-gypsum:before {
  border-bottom-color: var(--c-gypsum, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-gypsum:before {
  border-left-color: var(--c-gypsum, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-gypsum:before {
  border-right-color: var(--c-gypsum, currentColor)
}

.magique .bubble.on-top.is-outline.is-gypsum:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-gypsum:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-gypsum:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-gypsum:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-gypsum {
  background: var(--c-gypsum-100, hsl(223, 6%, 93%));
  color: var(--c-gypsum, currentColor);
  fill: var(--c-gypsum, currentColor)
}

.magique .link.is-gypsum:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-gypsum-l1)), color-stop(50%, var(--c-gypsum-l1)), color-stop(50%, var(--c-gypsum)), to(var(--c-gypsum)));
  background: linear-gradient(to right, var(--c-gypsum-l1) 0%, var(--c-gypsum-l1) 50%, var(--c-gypsum) 50%, var(--c-gypsum) 100%)
}

.magique .link.is-gypsum:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-gypsum-l1)), color-stop(50%, var(--c-gypsum-l1)), color-stop(50%, var(--c-gypsum)), to(var(--c-gypsum)));
  background: linear-gradient(to right, var(--c-gypsum-l1) 0%, var(--c-gypsum-l1) 50%, var(--c-gypsum) 50%, var(--c-gypsum) 100%)
}

.magique .list.is-gypsum:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-gypsum:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-gypsum[style*=list-style]>:is(li, dd):before {
  color: var(--c-gypsum, currentColor);
  fill: var(--c-gypsum, currentColor)
}

.magique .list.is-gypsum:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-gypsum:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-gypsum:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-gypsum:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-gypsum, currentColor);
  color: var(--c-gypsum, currentColor);
  fill: var(--c-gypsum, currentColor)
}

.magique .list.is-gypsum[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-gypsum[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-gypsum[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-gypsum[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-gypsum, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-gypsum {
  border-color: var(--c-gypsum-a0\.5);
  background: var(--c-gypsum-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-gainsboro {
  color: var(--c-gainsboro, currentColor);
  fill: var(--c-gainsboro, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-gainsboro {
  border-color: var(--c-gainsboro, currentColor);
  background: var(--c-gainsboro, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-gainsboro {
  border-color: var(--c-gainsboro, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-gainsboro {
  border-color: var(--c-gainsboro, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-gainsboro:hover {
    opacity: 1;
    background: var(--c-gainsboro-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-gainsboro:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-gainsboro:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-gainsboro:hover {
    background: var(--c-gainsboro-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-gainsboro:hover {
    border-color: var(--c-gainsboro-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-gainsboro:before {
  border-top-color: var(--c-gainsboro, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-gainsboro:before {
  border-bottom-color: var(--c-gainsboro, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-gainsboro:before {
  border-left-color: var(--c-gainsboro, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-gainsboro:before {
  border-right-color: var(--c-gainsboro, currentColor)
}

.magique .bubble.on-top.is-outline.is-gainsboro:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-gainsboro:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-gainsboro:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-gainsboro:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-gainsboro {
  background: var(--c-gainsboro-100, hsl(223, 6%, 93%));
  color: var(--c-gainsboro, currentColor);
  fill: var(--c-gainsboro, currentColor)
}

.magique .link.is-gainsboro:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-gainsboro-l1)), color-stop(50%, var(--c-gainsboro-l1)), color-stop(50%, var(--c-gainsboro)), to(var(--c-gainsboro)));
  background: linear-gradient(to right, var(--c-gainsboro-l1) 0%, var(--c-gainsboro-l1) 50%, var(--c-gainsboro) 50%, var(--c-gainsboro) 100%)
}

.magique .link.is-gainsboro:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-gainsboro-l1)), color-stop(50%, var(--c-gainsboro-l1)), color-stop(50%, var(--c-gainsboro)), to(var(--c-gainsboro)));
  background: linear-gradient(to right, var(--c-gainsboro-l1) 0%, var(--c-gainsboro-l1) 50%, var(--c-gainsboro) 50%, var(--c-gainsboro) 100%)
}

.magique .list.is-gainsboro:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-gainsboro:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-gainsboro[style*=list-style]>:is(li, dd):before {
  color: var(--c-gainsboro, currentColor);
  fill: var(--c-gainsboro, currentColor)
}

.magique .list.is-gainsboro:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-gainsboro:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-gainsboro:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-gainsboro:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-gainsboro, currentColor);
  color: var(--c-gainsboro, currentColor);
  fill: var(--c-gainsboro, currentColor)
}

.magique .list.is-gainsboro[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-gainsboro[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-gainsboro[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-gainsboro[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-gainsboro, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-gainsboro {
  border-color: var(--c-gainsboro-a0\.5);
  background: var(--c-gainsboro-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-lightgray {
  color: var(--c-lightgray, currentColor);
  fill: var(--c-lightgray, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-lightgray {
  border-color: var(--c-lightgray, currentColor);
  background: var(--c-lightgray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-lightgray {
  border-color: var(--c-lightgray, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-lightgray {
  border-color: var(--c-lightgray, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-lightgray:hover {
    opacity: 1;
    background: var(--c-lightgray-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-lightgray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-lightgray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-lightgray:hover {
    background: var(--c-lightgray-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-lightgray:hover {
    border-color: var(--c-lightgray-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-lightgray:before {
  border-top-color: var(--c-lightgray, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-lightgray:before {
  border-bottom-color: var(--c-lightgray, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-lightgray:before {
  border-left-color: var(--c-lightgray, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-lightgray:before {
  border-right-color: var(--c-lightgray, currentColor)
}

.magique .bubble.on-top.is-outline.is-lightgray:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-lightgray:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-lightgray:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-lightgray:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-lightgray {
  background: var(--c-lightgray-100, hsl(223, 6%, 93%));
  color: var(--c-lightgray, currentColor);
  fill: var(--c-lightgray, currentColor)
}

.magique .link.is-lightgray:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-lightgray-l1)), color-stop(50%, var(--c-lightgray-l1)), color-stop(50%, var(--c-lightgray)), to(var(--c-lightgray)));
  background: linear-gradient(to right, var(--c-lightgray-l1) 0%, var(--c-lightgray-l1) 50%, var(--c-lightgray) 50%, var(--c-lightgray) 100%)
}

.magique .link.is-lightgray:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-lightgray-l1)), color-stop(50%, var(--c-lightgray-l1)), color-stop(50%, var(--c-lightgray)), to(var(--c-lightgray)));
  background: linear-gradient(to right, var(--c-lightgray-l1) 0%, var(--c-lightgray-l1) 50%, var(--c-lightgray) 50%, var(--c-lightgray) 100%)
}

.magique .list.is-lightgray:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-lightgray:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-lightgray[style*=list-style]>:is(li, dd):before {
  color: var(--c-lightgray, currentColor);
  fill: var(--c-lightgray, currentColor)
}

.magique .list.is-lightgray:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-lightgray:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-lightgray:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-lightgray:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-lightgray, currentColor);
  color: var(--c-lightgray, currentColor);
  fill: var(--c-lightgray, currentColor)
}

.magique .list.is-lightgray[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-lightgray[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-lightgray[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-lightgray[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-lightgray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-lightgray {
  border-color: var(--c-lightgray-a0\.5);
  background: var(--c-lightgray-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-silver {
  color: var(--c-silver, currentColor);
  fill: var(--c-silver, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-silver {
  border-color: var(--c-silver, currentColor);
  background: var(--c-silver, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-silver {
  border-color: var(--c-silver, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-silver {
  border-color: var(--c-silver, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-silver:hover {
    opacity: 1;
    background: var(--c-silver-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-silver:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-silver:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-silver:hover {
    background: var(--c-silver-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-silver:hover {
    border-color: var(--c-silver-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-silver:before {
  border-top-color: var(--c-silver, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-silver:before {
  border-bottom-color: var(--c-silver, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-silver:before {
  border-left-color: var(--c-silver, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-silver:before {
  border-right-color: var(--c-silver, currentColor)
}

.magique .bubble.on-top.is-outline.is-silver:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-silver:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-silver:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-silver:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-silver {
  background: var(--c-silver-100, hsl(223, 6%, 93%));
  color: var(--c-silver, currentColor);
  fill: var(--c-silver, currentColor)
}

.magique .link.is-silver:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-silver-l1)), color-stop(50%, var(--c-silver-l1)), color-stop(50%, var(--c-silver)), to(var(--c-silver)));
  background: linear-gradient(to right, var(--c-silver-l1) 0%, var(--c-silver-l1) 50%, var(--c-silver) 50%, var(--c-silver) 100%)
}

.magique .link.is-silver:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-silver-l1)), color-stop(50%, var(--c-silver-l1)), color-stop(50%, var(--c-silver)), to(var(--c-silver)));
  background: linear-gradient(to right, var(--c-silver-l1) 0%, var(--c-silver-l1) 50%, var(--c-silver) 50%, var(--c-silver) 100%)
}

.magique .list.is-silver:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-silver:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-silver[style*=list-style]>:is(li, dd):before {
  color: var(--c-silver, currentColor);
  fill: var(--c-silver, currentColor)
}

.magique .list.is-silver:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-silver:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-silver:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-silver:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-silver, currentColor);
  color: var(--c-silver, currentColor);
  fill: var(--c-silver, currentColor)
}

.magique .list.is-silver[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-silver[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-silver[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-silver[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-silver, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-silver {
  border-color: var(--c-silver-a0\.5);
  background: var(--c-silver-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-darkgray {
  color: var(--c-darkgray, currentColor);
  fill: var(--c-darkgray, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-darkgray {
  border-color: var(--c-darkgray, currentColor);
  background: var(--c-darkgray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-darkgray {
  border-color: var(--c-darkgray, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-darkgray {
  border-color: var(--c-darkgray, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-darkgray:hover {
    opacity: 1;
    background: var(--c-darkgray-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-darkgray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-darkgray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-darkgray:hover {
    background: var(--c-darkgray-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-darkgray:hover {
    border-color: var(--c-darkgray-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-darkgray:before {
  border-top-color: var(--c-darkgray, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-darkgray:before {
  border-bottom-color: var(--c-darkgray, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-darkgray:before {
  border-left-color: var(--c-darkgray, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-darkgray:before {
  border-right-color: var(--c-darkgray, currentColor)
}

.magique .bubble.on-top.is-outline.is-darkgray:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-darkgray:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-darkgray:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-darkgray:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-darkgray {
  background: var(--c-darkgray-100, hsl(223, 6%, 93%));
  color: var(--c-darkgray, currentColor);
  fill: var(--c-darkgray, currentColor)
}

.magique .link.is-darkgray:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-darkgray-l1)), color-stop(50%, var(--c-darkgray-l1)), color-stop(50%, var(--c-darkgray)), to(var(--c-darkgray)));
  background: linear-gradient(to right, var(--c-darkgray-l1) 0%, var(--c-darkgray-l1) 50%, var(--c-darkgray) 50%, var(--c-darkgray) 100%)
}

.magique .link.is-darkgray:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-darkgray-l1)), color-stop(50%, var(--c-darkgray-l1)), color-stop(50%, var(--c-darkgray)), to(var(--c-darkgray)));
  background: linear-gradient(to right, var(--c-darkgray-l1) 0%, var(--c-darkgray-l1) 50%, var(--c-darkgray) 50%, var(--c-darkgray) 100%)
}

.magique .list.is-darkgray:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-darkgray:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-darkgray[style*=list-style]>:is(li, dd):before {
  color: var(--c-darkgray, currentColor);
  fill: var(--c-darkgray, currentColor)
}

.magique .list.is-darkgray:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-darkgray:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-darkgray:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-darkgray:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-darkgray, currentColor);
  color: var(--c-darkgray, currentColor);
  fill: var(--c-darkgray, currentColor)
}

.magique .list.is-darkgray[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-darkgray[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-darkgray[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-darkgray[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-darkgray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-darkgray {
  border-color: var(--c-darkgray-a0\.5);
  background: var(--c-darkgray-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-gray {
  color: var(--c-gray, currentColor);
  fill: var(--c-gray, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-gray {
  border-color: var(--c-gray, currentColor);
  background: var(--c-gray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-gray {
  border-color: var(--c-gray, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-gray {
  border-color: var(--c-gray, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-gray:hover {
    opacity: 1;
    background: var(--c-gray-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-gray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-gray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-gray:hover {
    background: var(--c-gray-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-gray:hover {
    border-color: var(--c-gray-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-gray:before {
  border-top-color: var(--c-gray, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-gray:before {
  border-bottom-color: var(--c-gray, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-gray:before {
  border-left-color: var(--c-gray, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-gray:before {
  border-right-color: var(--c-gray, currentColor)
}

.magique .bubble.on-top.is-outline.is-gray:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-gray:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-gray:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-gray:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-gray {
  background: var(--c-gray-100, hsl(223, 6%, 93%));
  color: var(--c-gray, currentColor);
  fill: var(--c-gray, currentColor)
}

.magique .link.is-gray:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-gray-l1)), color-stop(50%, var(--c-gray-l1)), color-stop(50%, var(--c-gray)), to(var(--c-gray)));
  background: linear-gradient(to right, var(--c-gray-l1) 0%, var(--c-gray-l1) 50%, var(--c-gray) 50%, var(--c-gray) 100%)
}

.magique .link.is-gray:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-gray-l1)), color-stop(50%, var(--c-gray-l1)), color-stop(50%, var(--c-gray)), to(var(--c-gray)));
  background: linear-gradient(to right, var(--c-gray-l1) 0%, var(--c-gray-l1) 50%, var(--c-gray) 50%, var(--c-gray) 100%)
}

.magique .list.is-gray:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-gray:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-gray[style*=list-style]>:is(li, dd):before {
  color: var(--c-gray, currentColor);
  fill: var(--c-gray, currentColor)
}

.magique .list.is-gray:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-gray:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-gray:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-gray:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-gray, currentColor);
  color: var(--c-gray, currentColor);
  fill: var(--c-gray, currentColor)
}

.magique .list.is-gray[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-gray[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-gray[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-gray[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-gray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-gray {
  border-color: var(--c-gray-a0\.5);
  background: var(--c-gray-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-dimgray {
  color: var(--c-dimgray, currentColor);
  fill: var(--c-dimgray, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-dimgray {
  border-color: var(--c-dimgray, currentColor);
  background: var(--c-dimgray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-dimgray {
  border-color: var(--c-dimgray, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-dimgray {
  border-color: var(--c-dimgray, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-dimgray:hover {
    opacity: 1;
    background: var(--c-dimgray-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-dimgray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-dimgray:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-dimgray:hover {
    background: var(--c-dimgray-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-dimgray:hover {
    border-color: var(--c-dimgray-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-dimgray:before {
  border-top-color: var(--c-dimgray, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-dimgray:before {
  border-bottom-color: var(--c-dimgray, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-dimgray:before {
  border-left-color: var(--c-dimgray, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-dimgray:before {
  border-right-color: var(--c-dimgray, currentColor)
}

.magique .bubble.on-top.is-outline.is-dimgray:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-dimgray:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-dimgray:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-dimgray:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-dimgray {
  background: var(--c-dimgray-100, hsl(223, 6%, 93%));
  color: var(--c-dimgray, currentColor);
  fill: var(--c-dimgray, currentColor)
}

.magique .link.is-dimgray:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-dimgray-l1)), color-stop(50%, var(--c-dimgray-l1)), color-stop(50%, var(--c-dimgray)), to(var(--c-dimgray)));
  background: linear-gradient(to right, var(--c-dimgray-l1) 0%, var(--c-dimgray-l1) 50%, var(--c-dimgray) 50%, var(--c-dimgray) 100%)
}

.magique .link.is-dimgray:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-dimgray-l1)), color-stop(50%, var(--c-dimgray-l1)), color-stop(50%, var(--c-dimgray)), to(var(--c-dimgray)));
  background: linear-gradient(to right, var(--c-dimgray-l1) 0%, var(--c-dimgray-l1) 50%, var(--c-dimgray) 50%, var(--c-dimgray) 100%)
}

.magique .list.is-dimgray:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-dimgray:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-dimgray[style*=list-style]>:is(li, dd):before {
  color: var(--c-dimgray, currentColor);
  fill: var(--c-dimgray, currentColor)
}

.magique .list.is-dimgray:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-dimgray:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-dimgray:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-dimgray:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-dimgray, currentColor);
  color: var(--c-dimgray, currentColor);
  fill: var(--c-dimgray, currentColor)
}

.magique .list.is-dimgray[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-dimgray[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-dimgray[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-dimgray[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-dimgray, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-dimgray {
  border-color: var(--c-dimgray-a0\.5);
  background: var(--c-dimgray-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-black {
  color: var(--c-black, currentColor);
  fill: var(--c-black, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-black {
  border-color: var(--c-black, currentColor);
  background: var(--c-black, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-black {
  border-color: var(--c-black, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-black {
  border-color: var(--c-black, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-black:hover {
    opacity: 1;
    background: var(--c-black-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-black:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-black:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-black:hover {
    background: var(--c-black-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-black:hover {
    border-color: var(--c-black-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-black:before {
  border-top-color: var(--c-black, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-black:before {
  border-bottom-color: var(--c-black, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-black:before {
  border-left-color: var(--c-black, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-black:before {
  border-right-color: var(--c-black, currentColor)
}

.magique .bubble.on-top.is-outline.is-black:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-black:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-black:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-black:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-black {
  background: var(--c-black-100, hsl(223, 6%, 93%));
  color: var(--c-black, currentColor);
  fill: var(--c-black, currentColor)
}

.magique .link.is-black:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-black-l1)), color-stop(50%, var(--c-black-l1)), color-stop(50%, var(--c-black)), to(var(--c-black)));
  background: linear-gradient(to right, var(--c-black-l1) 0%, var(--c-black-l1) 50%, var(--c-black) 50%, var(--c-black) 100%)
}

.magique .link.is-black:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-black-l1)), color-stop(50%, var(--c-black-l1)), color-stop(50%, var(--c-black)), to(var(--c-black)));
  background: linear-gradient(to right, var(--c-black-l1) 0%, var(--c-black-l1) 50%, var(--c-black) 50%, var(--c-black) 100%)
}

.magique .list.is-black:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-black:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-black[style*=list-style]>:is(li, dd):before {
  color: var(--c-black, currentColor);
  fill: var(--c-black, currentColor)
}

.magique .list.is-black:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-black:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-black:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-black:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-black, currentColor);
  color: var(--c-black, currentColor);
  fill: var(--c-black, currentColor)
}

.magique .list.is-black[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-black[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-black[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-black[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-black, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-black {
  border-color: var(--c-black-a0\.5);
  background: var(--c-black-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-onyx {
  color: var(--c-onyx, currentColor);
  fill: var(--c-onyx, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-onyx {
  border-color: var(--c-onyx, currentColor);
  background: var(--c-onyx, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-onyx {
  border-color: var(--c-onyx, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-onyx {
  border-color: var(--c-onyx, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-onyx:hover {
    opacity: 1;
    background: var(--c-onyx-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-onyx:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-onyx:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-onyx:hover {
    background: var(--c-onyx-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-onyx:hover {
    border-color: var(--c-onyx-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-onyx:before {
  border-top-color: var(--c-onyx, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-onyx:before {
  border-bottom-color: var(--c-onyx, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-onyx:before {
  border-left-color: var(--c-onyx, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-onyx:before {
  border-right-color: var(--c-onyx, currentColor)
}

.magique .bubble.on-top.is-outline.is-onyx:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-onyx:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-onyx:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-onyx:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-onyx {
  background: var(--c-onyx-100, hsl(223, 6%, 93%));
  color: var(--c-onyx, currentColor);
  fill: var(--c-onyx, currentColor)
}

.magique .link.is-onyx:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-onyx-l1)), color-stop(50%, var(--c-onyx-l1)), color-stop(50%, var(--c-onyx)), to(var(--c-onyx)));
  background: linear-gradient(to right, var(--c-onyx-l1) 0%, var(--c-onyx-l1) 50%, var(--c-onyx) 50%, var(--c-onyx) 100%)
}

.magique .link.is-onyx:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-onyx-l1)), color-stop(50%, var(--c-onyx-l1)), color-stop(50%, var(--c-onyx)), to(var(--c-onyx)));
  background: linear-gradient(to right, var(--c-onyx-l1) 0%, var(--c-onyx-l1) 50%, var(--c-onyx) 50%, var(--c-onyx) 100%)
}

.magique .list.is-onyx:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-onyx:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-onyx[style*=list-style]>:is(li, dd):before {
  color: var(--c-onyx, currentColor);
  fill: var(--c-onyx, currentColor)
}

.magique .list.is-onyx:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-onyx:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-onyx:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-onyx:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-onyx, currentColor);
  color: var(--c-onyx, currentColor);
  fill: var(--c-onyx, currentColor)
}

.magique .list.is-onyx[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-onyx[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-onyx[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-onyx[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-onyx, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-onyx {
  border-color: var(--c-onyx-a0\.5);
  background: var(--c-onyx-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-alice {
  color: var(--c-alice, currentColor);
  fill: var(--c-alice, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-alice {
  border-color: var(--c-alice, currentColor);
  background: var(--c-alice, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-alice {
  border-color: var(--c-alice, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-alice {
  border-color: var(--c-alice, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-alice:hover {
    opacity: 1;
    background: var(--c-alice-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-alice:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-alice:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-alice:hover {
    background: var(--c-alice-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-alice:hover {
    border-color: var(--c-alice-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-alice:before {
  border-top-color: var(--c-alice, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-alice:before {
  border-bottom-color: var(--c-alice, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-alice:before {
  border-left-color: var(--c-alice, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-alice:before {
  border-right-color: var(--c-alice, currentColor)
}

.magique .bubble.on-top.is-outline.is-alice:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-alice:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-alice:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-alice:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-alice {
  background: var(--c-alice-100, hsl(223, 6%, 93%));
  color: var(--c-alice, currentColor);
  fill: var(--c-alice, currentColor)
}

.magique .link.is-alice:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-alice-l1)), color-stop(50%, var(--c-alice-l1)), color-stop(50%, var(--c-alice)), to(var(--c-alice)));
  background: linear-gradient(to right, var(--c-alice-l1) 0%, var(--c-alice-l1) 50%, var(--c-alice) 50%, var(--c-alice) 100%)
}

.magique .link.is-alice:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-alice-l1)), color-stop(50%, var(--c-alice-l1)), color-stop(50%, var(--c-alice)), to(var(--c-alice)));
  background: linear-gradient(to right, var(--c-alice-l1) 0%, var(--c-alice-l1) 50%, var(--c-alice) 50%, var(--c-alice) 100%)
}

.magique .list.is-alice:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-alice:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-alice[style*=list-style]>:is(li, dd):before {
  color: var(--c-alice, currentColor);
  fill: var(--c-alice, currentColor)
}

.magique .list.is-alice:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-alice:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-alice:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-alice:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-alice, currentColor);
  color: var(--c-alice, currentColor);
  fill: var(--c-alice, currentColor)
}

.magique .list.is-alice[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-alice[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-alice[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-alice[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-alice, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-alice {
  border-color: var(--c-alice-a0\.5);
  background: var(--c-alice-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-cassis {
  color: var(--c-cassis, currentColor);
  fill: var(--c-cassis, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-cassis {
  border-color: var(--c-cassis, currentColor);
  background: var(--c-cassis, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-cassis {
  border-color: var(--c-cassis, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-cassis {
  border-color: var(--c-cassis, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-cassis:hover {
    opacity: 1;
    background: var(--c-cassis-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-cassis:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-cassis:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-cassis:hover {
    background: var(--c-cassis-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-cassis:hover {
    border-color: var(--c-cassis-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-cassis:before {
  border-top-color: var(--c-cassis, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-cassis:before {
  border-bottom-color: var(--c-cassis, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-cassis:before {
  border-left-color: var(--c-cassis, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-cassis:before {
  border-right-color: var(--c-cassis, currentColor)
}

.magique .bubble.on-top.is-outline.is-cassis:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-cassis:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-cassis:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-cassis:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-cassis {
  background: var(--c-cassis-100, hsl(223, 6%, 93%));
  color: var(--c-cassis, currentColor);
  fill: var(--c-cassis, currentColor)
}

.magique .link.is-cassis:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-cassis-l1)), color-stop(50%, var(--c-cassis-l1)), color-stop(50%, var(--c-cassis)), to(var(--c-cassis)));
  background: linear-gradient(to right, var(--c-cassis-l1) 0%, var(--c-cassis-l1) 50%, var(--c-cassis) 50%, var(--c-cassis) 100%)
}

.magique .link.is-cassis:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-cassis-l1)), color-stop(50%, var(--c-cassis-l1)), color-stop(50%, var(--c-cassis)), to(var(--c-cassis)));
  background: linear-gradient(to right, var(--c-cassis-l1) 0%, var(--c-cassis-l1) 50%, var(--c-cassis) 50%, var(--c-cassis) 100%)
}

.magique .list.is-cassis:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-cassis:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-cassis[style*=list-style]>:is(li, dd):before {
  color: var(--c-cassis, currentColor);
  fill: var(--c-cassis, currentColor)
}

.magique .list.is-cassis:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-cassis:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-cassis:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-cassis:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-cassis, currentColor);
  color: var(--c-cassis, currentColor);
  fill: var(--c-cassis, currentColor)
}

.magique .list.is-cassis[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-cassis[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-cassis[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-cassis[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-cassis, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-cassis {
  border-color: var(--c-cassis-a0\.5);
  background: var(--c-cassis-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-blue {
  color: var(--c-blue, currentColor);
  fill: var(--c-blue, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-blue {
  border-color: var(--c-blue, currentColor);
  background: var(--c-blue, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-blue {
  border-color: var(--c-blue, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-blue {
  border-color: var(--c-blue, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-blue:hover {
    opacity: 1;
    background: var(--c-blue-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-blue:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-blue:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-blue:hover {
    background: var(--c-blue-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-blue:hover {
    border-color: var(--c-blue-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-blue:before {
  border-top-color: var(--c-blue, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-blue:before {
  border-bottom-color: var(--c-blue, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-blue:before {
  border-left-color: var(--c-blue, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-blue:before {
  border-right-color: var(--c-blue, currentColor)
}

.magique .bubble.on-top.is-outline.is-blue:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-blue:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-blue:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-blue:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-blue {
  background: var(--c-blue-100, hsl(223, 6%, 93%));
  color: var(--c-blue, currentColor);
  fill: var(--c-blue, currentColor)
}

.magique .link.is-blue:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-blue-l1)), color-stop(50%, var(--c-blue-l1)), color-stop(50%, var(--c-blue)), to(var(--c-blue)));
  background: linear-gradient(to right, var(--c-blue-l1) 0%, var(--c-blue-l1) 50%, var(--c-blue) 50%, var(--c-blue) 100%)
}

.magique .link.is-blue:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-blue-l1)), color-stop(50%, var(--c-blue-l1)), color-stop(50%, var(--c-blue)), to(var(--c-blue)));
  background: linear-gradient(to right, var(--c-blue-l1) 0%, var(--c-blue-l1) 50%, var(--c-blue) 50%, var(--c-blue) 100%)
}

.magique .list.is-blue:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-blue:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-blue[style*=list-style]>:is(li, dd):before {
  color: var(--c-blue, currentColor);
  fill: var(--c-blue, currentColor)
}

.magique .list.is-blue:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-blue:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-blue:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-blue:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-blue, currentColor);
  color: var(--c-blue, currentColor);
  fill: var(--c-blue, currentColor)
}

.magique .list.is-blue[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-blue[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-blue[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-blue[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-blue, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-blue {
  border-color: var(--c-blue-a0\.5);
  background: var(--c-blue-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-akebia {
  color: var(--c-akebia, currentColor);
  fill: var(--c-akebia, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-akebia {
  border-color: var(--c-akebia, currentColor);
  background: var(--c-akebia, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-akebia {
  border-color: var(--c-akebia, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-akebia {
  border-color: var(--c-akebia, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-akebia:hover {
    opacity: 1;
    background: var(--c-akebia-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-akebia:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-akebia:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-akebia:hover {
    background: var(--c-akebia-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-akebia:hover {
    border-color: var(--c-akebia-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-akebia:before {
  border-top-color: var(--c-akebia, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-akebia:before {
  border-bottom-color: var(--c-akebia, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-akebia:before {
  border-left-color: var(--c-akebia, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-akebia:before {
  border-right-color: var(--c-akebia, currentColor)
}

.magique .bubble.on-top.is-outline.is-akebia:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-akebia:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-akebia:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-akebia:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-akebia {
  background: var(--c-akebia-100, hsl(223, 6%, 93%));
  color: var(--c-akebia, currentColor);
  fill: var(--c-akebia, currentColor)
}

.magique .link.is-akebia:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-akebia-l1)), color-stop(50%, var(--c-akebia-l1)), color-stop(50%, var(--c-akebia)), to(var(--c-akebia)));
  background: linear-gradient(to right, var(--c-akebia-l1) 0%, var(--c-akebia-l1) 50%, var(--c-akebia) 50%, var(--c-akebia) 100%)
}

.magique .link.is-akebia:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-akebia-l1)), color-stop(50%, var(--c-akebia-l1)), color-stop(50%, var(--c-akebia)), to(var(--c-akebia)));
  background: linear-gradient(to right, var(--c-akebia-l1) 0%, var(--c-akebia-l1) 50%, var(--c-akebia) 50%, var(--c-akebia) 100%)
}

.magique .list.is-akebia:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-akebia:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-akebia[style*=list-style]>:is(li, dd):before {
  color: var(--c-akebia, currentColor);
  fill: var(--c-akebia, currentColor)
}

.magique .list.is-akebia:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-akebia:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-akebia:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-akebia:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-akebia, currentColor);
  color: var(--c-akebia, currentColor);
  fill: var(--c-akebia, currentColor)
}

.magique .list.is-akebia[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-akebia[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-akebia[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-akebia[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-akebia, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-akebia {
  border-color: var(--c-akebia-a0\.5);
  background: var(--c-akebia-50)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-aubergine {
  color: var(--c-aubergine, currentColor);
  fill: var(--c-aubergine, currentColor)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-aubergine {
  border-color: var(--c-aubergine, currentColor);
  background: var(--c-aubergine, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-aubergine {
  border-color: var(--c-aubergine, currentColor);
  background: transparent
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-aubergine {
  border-color: var(--c-aubergine, currentColor);
  background: var(--c-gray-75, hsl(223, 6%, 96%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-aubergine:hover {
    opacity: 1;
    background: var(--c-aubergine-a0\.05)
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-aubergine:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-aubergine:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-aubergine:hover {
    background: var(--c-aubergine-l1);
    color: #FFF;
    fill: #FFF
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-aubergine:hover {
    border-color: var(--c-aubergine-a0\.3)
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost, .is-outline).is-aubergine:before {
  border-top-color: var(--c-aubergine, currentColor)
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost, .is-outline).is-aubergine:before {
  border-bottom-color: var(--c-aubergine, currentColor)
}

.magique .bubble.on-left:is(.is-plain, .is-ghost, .is-outline).is-aubergine:before {
  border-left-color: var(--c-aubergine, currentColor)
}

.magique .bubble.on-right:is(.is-plain, .is-ghost, .is-outline).is-aubergine:before {
  border-right-color: var(--c-aubergine, currentColor)
}

.magique .bubble.on-top.is-outline.is-aubergine:after {
  border-top-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-bottom.is-outline.is-aubergine:after {
  border-bottom-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-left.is-outline.is-aubergine:after {
  border-left-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .bubble.on-right.is-outline.is-aubergine:after {
  border-right-color: var(--c-gray-75, hsl(223, 6%, 96%))
}

.magique .alert.is-plain.is-aubergine {
  background: var(--c-aubergine-100, hsl(223, 6%, 93%));
  color: var(--c-aubergine, currentColor);
  fill: var(--c-aubergine, currentColor)
}

.magique .link.is-aubergine:is([href], [onclick]) {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-aubergine-l1)), color-stop(50%, var(--c-aubergine-l1)), color-stop(50%, var(--c-aubergine)), to(var(--c-aubergine)));
  background: linear-gradient(to right, var(--c-aubergine-l1) 0%, var(--c-aubergine-l1) 50%, var(--c-aubergine) 50%, var(--c-aubergine) 100%)
}

.magique .link.is-aubergine:is([href], [onclick]):before {
  background: -webkit-gradient(linear, left top, right top, from(var(--c-aubergine-l1)), color-stop(50%, var(--c-aubergine-l1)), color-stop(50%, var(--c-aubergine)), to(var(--c-aubergine)));
  background: linear-gradient(to right, var(--c-aubergine-l1) 0%, var(--c-aubergine-l1) 50%, var(--c-aubergine) 50%, var(--c-aubergine) 100%)
}

.magique .list.is-aubergine:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-aubergine:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-aubergine[style*=list-style]>:is(li, dd):before {
  color: var(--c-aubergine, currentColor);
  fill: var(--c-aubergine, currentColor)
}

.magique .list.is-aubergine:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-aubergine:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-aubergine:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-aubergine:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-aubergine, currentColor);
  color: var(--c-aubergine, currentColor);
  fill: var(--c-aubergine, currentColor)
}

.magique .list.is-aubergine[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-aubergine[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-aubergine[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-aubergine[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-aubergine, currentColor);
  color: #FFF;
  fill: #FFF
}

.magique .input.is-aubergine {
  border-color: var(--c-aubergine-a0\.5);
  background: var(--c-aubergine-50)
}

:root {
  --c-white-d5: hsl(223, 16.5%, 60%);
  --c-white-d4: hsl(223, 14.4%, 68%);
  --c-white-d3: hsl(223, 12.3%, 76%);
  --c-white-d2: hsl(223, 10.2%, 84%);
  --c-white-d1: hsl(223, 6%, 92%);
  --c-white: hsl(223, 6%, 100%);
  --c-white-l1: hsl(223, 5.25%, 100%);
  --c-white-l2: hsl(223, 4.5%, 100%);
  --c-white-l3: hsl(223, 3.75%, 100%);
  --c-white-l4: hsl(223, 3%, 100%);
  --c-white-l5: hsl(223, 2.25%, 100%);
  --c-white-a0\.05: rgba(255, 255, 255, 0.05);
  --c-white-a0\.3: rgba(255, 255, 255, 0.3);
  --c-white-a0\.5: rgba(255, 255, 255, 0.55);
  --c-white-a0\.7: rgba(255, 255, 255, 0.7);
  --c-white-a0\.85: rgba(255, 255, 255, 0.85)
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-white {
  color: var(--c-white, hsl(223, 6%, 100%));
  fill: var(--c-white, hsl(223, 6%, 100%))
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-plain.is-white {
  border: none;
  border-color: var(--c-white, hsl(223, 6%, 100%));
  background: var(--c-white, hsl(223, 6%, 100%));
  color: var(--c-text, hsl(223, 6%, 13%))
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-ghost.is-white {
  border: 1px solid var(--c-white, hsl(223, 6%, 100%));
  background: transparent;
  color: var(--c-white, hsl(223, 6%, 100%))
}

.magique :is(.button, .buckle, .badge, .bauble, .bubble, .icon, .title, .caption, .label, .box, .card, .alert).is-outline.is-white {
  border: 1px solid currentColor;
  background: var(--c-white, hsl(223, 6%, 100%));
  color: var(--c-text, hsl(223, 6%, 13%))
}

@media (any-hover:hover) {
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-white:hover {
    opacity: 1;
    background: var(--c-white-a0\.05, hsla(223, 6%, 100%, 0.05));
    color: var(--c-white-d1, hsl(223, 6%, 92%));
    fill: var(--c-white-d1, hsl(223, 6%, 92%))
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-white:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-outline.is-white:hover,
  .magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-white:hover {
    background: var(--c-gray-150, hsl(223, 6%, 89%));
    color: var(--c-text-800, hsl(223, 6%, 23%));
    fill: var(--c-text-800, hsl(223, 6%, 23%))
  }

  .magique .button:is([href], [onclick], [type=button], [type=submit]):is(.is-ghost, .is-outline).is-white:hover {
    border-color: var(--c-text-a0\.3, hsla(223, 6%, 13%, 0.3));
    color: var(--c-text-800, hsl(223, 6%, 23%))
  }
}

.magique .bubble.on-top:is(.is-plain, .is-ghost).is-white:before {
  border-top-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-bottom:is(.is-plain, .is-ghost).is-white:before {
  border-bottom-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-left:is(.is-plain, .is-ghost).is-white:before {
  border-left-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-right:is(.is-plain, .is-ghost).is-white:before {
  border-right-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-top.is-outline.is-white:before {
  border-top-color: currentColor
}

.magique .bubble.on-bottom.is-outline.is-white:before {
  border-bottom-color: currentColor
}

.magique .bubble.on-left.is-outline.is-white:before {
  border-left-color: currentColor
}

.magique .bubble.on-right.is-outline.is-white:before {
  border-right-color: currentColor
}

.magique .bubble.on-top.is-outline.is-white:after {
  border-top-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-bottom.is-outline.is-white:after {
  border-bottom-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-left.is-outline.is-white:after {
  border-left-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .bubble.on-right.is-outline.is-white:after {
  border-right-color: var(--c-white, hsl(223, 6%, 100%))
}

.magique .alert.is-plain.is-white {
  background: var(--c-white-100, hsl(223, 6%, 93%));
  color: var(--c-white, currentColor);
  fill: var(--c-white, currentColor)
}

.magique .link:is([href], [onclick]).is-white {
  background: var(--c-white, hsl(223, 6%, 100%))
}

.magique .link:is([href], [onclick]).is-white:before {
  background: var(--c-white, hsl(223, 6%, 100%))
}

.magique .list.is-white:is([data-after], [data-after_sp], [data-after_pc], [data-tail], [data-tail_sp], [data-tail_pc]):after,
.magique .list.is-white:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc]):before,
.magique .list.is-white[style*=list-style]>:is(li, dd):before {
  color: var(--c-white);
  fill: var(--c-white)
}

.magique .list.is-white:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-white:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-white:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-white:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  border-color: var(--c-white);
  color: var(--c-white);
  fill: var(--c-white)
}

.magique .list.is-white[class*=filled-]:is([class*=-circled], [class*=-boxed]):after,
.magique .list.is-white[class*=filled-]:is([class*=-circled], [class*=-boxed]):before,
.magique .list.is-white[class*=filled-]:is([class*=-circled], [class*=-boxed])[data-ini],
.magique .list.is-white[style*=filled-]:is([style*=circled-], [style*=boxed-])>:is(li, dd):before {
  background: var(--c-white);
  color: var(--c-text, hsl(223, 6%, 13%));
  fill: var(--c-text, hsl(223, 6%, 13%))
}

.magique .input.is-white {
  border-color: var(--c-white-a0\.5);
  background: var(--c-white-50)
}