/*!
 * Kahi UI - Framework
 *
 * v0.2.19
 */

*, ::before, ::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

* {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::moz-focus-inner {
  border-style: none;
  padding: 0;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

body {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}

html {
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

button {
  text-transform: none;
  background-color: transparent;
  background-image: none;
}

button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

button, [role="button"] {
  cursor: pointer;
}

figure, hr, blockquote, pre, h6, h5, h4, h3, h2, h1, p {
  margin: 0;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

h6, h5, h4, h3, h2, h1 {
  font-size: inherit;
  font-weight: inherit;
}

input, button, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

img {
  border-style: solid;
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

input::placeholder {
  opacity: 1;
  color: #a1a1aa;
}

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

pre, code, kbd, samp {
  font-size: 1em;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

textarea {
  resize: vertical;
}

textarea::placeholder {
  opacity: 1;
  color: #a1a1aa;
}

:root {
    --palette-accent-lightest: 172, 198, 211;
    --palette-accent-light: 138, 175, 193;
    --palette-accent-normal: 113, 158, 180;
    --palette-accent-bold: 88, 141, 167;
    --palette-accent-boldest: 80, 133, 159;

    --palette-neutral-lightest: 217, 220, 224;
    --palette-neutral-light: 192, 197, 204;
    --palette-neutral-normal: 166, 173, 184;
    --palette-neutral-bold: 147, 156, 168;
    --palette-neutral-boldest: 128, 138, 153;

    --palette-dark-lightest: 145, 146, 149;
    --palette-dark-light: 100, 102, 106;
    --palette-dark-normal: 67, 70, 74;
    --palette-dark-bold: 34, 37, 42;
    --palette-dark-boldest: 30, 33, 37;

    --palette-off-dark-lightest: 198, 200, 201;
    --palette-off-dark-light: 161, 163, 165;
    --palette-off-dark-normal: 123, 126, 129;
    --palette-off-dark-bold: 94, 98, 102;
    --palette-off-dark-boldest: 66, 70, 75;

    --palette-light-lightest: 254, 254, 254;
    --palette-light-light: 252, 252, 252;
    --palette-light-normal: 250, 250, 250;
    --palette-light-bold: 248, 248, 248;
    --palette-light-boldest: 247, 247, 247;

    --palette-off-light-lightest: 253, 253, 253;
    --palette-off-light-light: 250, 251, 251;
    --palette-off-light-normal: 247, 248, 248;
    --palette-off-light-bold: 244, 245, 245;
    --palette-off-light-boldest: 241, 242, 243;

    --palette-alert-lightest: 239, 211, 144;
    --palette-alert-light: 233, 193, 99;
    --palette-alert-normal: 228, 179, 65;
    --palette-alert-bold: 223, 166, 32;
    --palette-alert-boldest: 219, 158, 28;

    --palette-affirmative-lightest: 166, 217, 188;
    --palette-affirmative-light: 130, 202, 161;
    --palette-affirmative-normal: 104, 190, 141;
    --palette-affirmative-bold: 77, 179, 121;
    --palette-affirmative-boldest: 70, 172, 113;

    --palette-negative-lightest: 225, 177, 170;
    --palette-negative-light: 213, 145, 136;
    --palette-negative-normal: 204, 122, 111;
    --palette-negative-bold: 195, 98, 85;
    --palette-negative-boldest: 189, 90, 78;

    --palette-auto-lightest: var(--palette-light-lightest);
    --palette-auto-light: var(--palette-light-light);
    --palette-auto-normal: var(--palette-light-normal);
    --palette-auto-bold: var(--palette-light-bold);
    --palette-auto-boldest: var(--palette-light-boldest);

    --palette-auto-off-lightest: var(--palette-off-light-lightest);
    --palette-auto-off-light: var(--palette-off-light-light);
    --palette-auto-off-normal: var(--palette-off-light-normal);
    --palette-auto-off-bold: var(--palette-off-light-bold);
    --palette-auto-off-boldest: var(--palette-off-light-boldest);

    --palette-inverse-lightest: var(--palette-dark-lightest);
    --palette-inverse-light: var(--palette-dark-light);
    --palette-inverse-normal: var(--palette-dark-normal);
    --palette-inverse-bold: var(--palette-dark-bold);
    --palette-inverse-boldest: var(--palette-dark-boldest);

    --palette-inverse-off-lightest: var(--palette-off-dark-lightest);
    --palette-inverse-off-light: var(--palette-off-dark-light);
    --palette-inverse-off-normal: var(--palette-off-dark-normal);
    --palette-inverse-off-bold: var(--palette-off-dark-bold);
    --palette-inverse-off-boldest: var(--palette-off-dark-boldest);

    /** */

    --radius-circle: 100%;
    --radius-pill: 9999px;

    --radius-tiny: 0.125rem;
    --radius-small: 0.375rem;
    --radius-medium: 0.5rem;

    /** */

    --sizes-prose: 65ch;

    --sizes-content-tiny: 11rem;
    --sizes-content-small: 13rem;
    --sizes-content-medium: 15rem;
    --sizes-content-large: 18rem;
    --sizes-content-huge: 24rem;

    --sizes-embedded-tiny: 24rem;
    --sizes-embedded-small: 32rem;
    --sizes-embedded-medium: 42rem;
    --sizes-embedded-large: 56rem;
    --sizes-embedded-huge: 72rem;

    --sizes-icon-tiny: 16px;
    --sizes-icon-small: 24px;
    --sizes-icon-medium: 32px;
    --sizes-icon-large: 48px;
    --sizes-icon-huge: 64px;

    /** */

    --spacing-local-tiny: 0.25em;
    --spacing-local-small: 0.5em;
    --spacing-local-medium: 1em;
    --spacing-local-large: 2em;
    --spacing-local-huge: 4em;

    --spacing-root-tiny: 0.25rem;
    --spacing-root-small: 0.5rem;
    --spacing-root-medium: 1rem;
    --spacing-root-large: 2rem;
    --spacing-root-huge: 4rem;

    /** */

    /**
        NOTE: The Viewport variables below don't /actually/ do anything in
        the Framework. And are instead here to provide the Javascript side
        of thing constants to reference
    */

    --viewport-mobile-min: 0px;
    --viewport-mobile-max: 640px;

    --viewport-tablet-min: calc(var(--viewport-mobile-max) + 1px);
    --viewport-tablet-max: 768px;

    --viewport-desktop-min: calc(var(--viewport-tablet-max) + 1px);
    --viewport-desktop-max: 1024px;

    --viewport-widescreen-min: calc(var(--viewport-desktop-max) + 1px);
    --viewport-widescreen-max: 1280px;

    /** */

    --font-family-monospace: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --font-family-normal: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

    /** */

    --font-content-size-nano: 0.75rem;
    --font-content-line-height-nano: 1rem;

    --font-content-size-tiny: 0.875rem;
    --font-content-line-height-tiny: 1.25rem;

    --font-content-size-small: 1rem;
    --font-content-line-height-small: 1.5rem;

    --font-content-size-medium: 1.125rem;
    --font-content-line-height-medium: 1.75rem;

    --font-content-size-large: 1.25rem;
    --font-content-line-height-large: 1.75rem;

    --font-content-size-huge: 1.5rem;
    --font-content-line-height-huge: 2rem;

    --font-content-size-massive: 1.875rem;
    --font-content-line-height-massive: 2.25rem;

    --font-headline-size-nano: 1.125rem;
    --font-headline-line-height-nano: 1.75rem;

    --font-headline-size-tiny: 1.25rem;
    --font-headline-line-height-tiny: 1.75rem;

    --font-headline-size-small: 1.5rem;
    --font-headline-line-height-small: 2rem;

    --font-headline-size-medium: 1.875rem;
    --font-headline-line-height-medium: 2.25rem;

    --font-headline-size-large: 2.25rem;
    --font-headline-line-height-large: 2.5rem;

    --font-headline-size-huge: 3rem;
    --font-headline-line-height-huge: 1;

    --font-headline-size-massive: 3.75rem;
    --font-headline-line-height-massive: 1;

    /** */

    --elevation-lowest: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --elevation-low: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --elevation-high: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --elevation-highest: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /** */

    --scrollbar-background: var(--palette-off-dark-lightest);
    --scrollbar-foreground: var(--palette-dark-normal);
    --scrollbar-size: 0.25rem;

    /** */

    --document-background: var(--palette-auto-off-lightest);
    --document-foreground: var(--palette-inverse-normal);

    --document-font-size: 16px;
    --document-font-line-height: 1.5rem;

    --selection-background: var(--palette-accent-boldest);
    --selection-foreground: var(--palette-light-normal);
}

/**
 * HACK: Really lame to have to duplicate dark mode variables
 */

@media (prefers-color-scheme: dark) {
    :root:not([data-palette]) {
        --palette-accent-lightest: 45, 93, 124;
        --palette-accent-light: 61, 112, 140;
        --palette-accent-normal: 71, 122, 150;
        --palette-accent-bold: 80, 133, 159;
        --palette-accent-boldest: 88, 141, 167;

        --palette-neutral-lightest: 109, 119, 134;
        --palette-neutral-light: 120, 130, 145;
        --palette-neutral-normal: 128, 138, 153;
        --palette-neutral-bold: 147, 156, 168;
        --palette-neutral-boldest: 166, 173, 184;

        --palette-dark-lightest: 20, 22, 25;
        --palette-dark-light: 25, 27, 31;
        --palette-dark-normal: 30, 33, 37;
        --palette-dark-bold: 34, 37, 42;
        --palette-dark-boldest: 67, 70, 74;

        --palette-off-dark-lightest: 43, 47, 51;
        --palette-off-dark-light: 51, 55, 59;
        --palette-off-dark-normal: 60, 63, 68;
        --palette-off-dark-bold: 66, 70, 75;
        --palette-off-dark-boldest: 94, 98, 102;

        --palette-light-lightest: 238, 238, 238;
        --palette-light-light: 240, 240, 240;
        --palette-light-normal: 242, 242, 242;
        --palette-light-bold: 244, 244, 244;
        --palette-light-boldest: 245, 245, 245;

        --palette-off-light-lightest: 228, 229, 231;
        --palette-off-light-light: 232, 233, 235;
        --palette-off-light-normal: 235, 236, 237;
        --palette-off-light-bold: 237, 238, 239;
        --palette-off-light-boldest: 239, 240, 241;

        --palette-alert-lightest: 202, 123, 11;
        --palette-alert-light: 210, 139, 19;
        --palette-alert-normal: 215, 149, 24;
        --palette-alert-bold: 219, 158, 28;
        --palette-alert-boldest: 223, 166, 32;

        --palette-affirmative-lightest: 37, 139, 73;
        --palette-affirmative-light: 52, 154, 92;
        --palette-affirmative-normal: 61, 163, 102;
        --palette-affirmative-bold: 70, 172, 113;
        --palette-affirmative-boldest: 77, 179, 121;

        --palette-negative-lightest: 161, 52, 42;
        --palette-negative-light: 174, 70, 59;
        --palette-negative-normal: 181, 80, 68;
        --palette-negative-bold: 189, 90, 78;
        --palette-negative-boldest: 195, 98, 85;

        --palette-auto-lightest: var(--palette-dark-lightest);
        --palette-auto-light: var(--palette-dark-light);
        --palette-auto-normal: var(--palette-dark-normal);
        --palette-auto-bold: var(--palette-dark-bold);
        --palette-auto-boldest: var(--palette-dark-boldest);

        --palette-auto-off-lightest: var(--palette-off-dark-lightest);
        --palette-auto-off-light: var(--palette-off-dark-light);
        --palette-auto-off-normal: var(--palette-off-dark-normal);
        --palette-auto-off-bold: var(--palette-off-dark-bold);
        --palette-auto-off-boldest: var(--palette-off-dark-boldest);

        --palette-inverse-lightest: var(--palette-light-lightest);
        --palette-inverse-light: var(--palette-light-light);
        --palette-inverse-normal: var(--palette-light-normal);
        --palette-inverse-bold: var(--palette-light-bold);
        --palette-inverse-boldest: var(--palette-light-boldest);

        --palette-inverse-off-lightest: var(--palette-off-light-lightest);
        --palette-inverse-off-light: var(--palette-off-light-light);
        --palette-inverse-off-normal: var(--palette-off-light-normal);
        --palette-inverse-off-bold: var(--palette-off-light-bold);
        --palette-inverse-off-boldest: var(--palette-off-light-boldest);

        /** */

        --scrollbar-background: var(--palette-off-dark-boldest);
        --scrollbar-foreground: var(--palette-dark-normal);
    }
}

:root[data-palette="dark"] {
    --palette-accent-lightest: 45, 93, 124;
    --palette-accent-light: 61, 112, 140;
    --palette-accent-normal: 71, 122, 150;
    --palette-accent-bold: 80, 133, 159;
    --palette-accent-boldest: 88, 141, 167;

    --palette-neutral-lightest: 109, 119, 134;
    --palette-neutral-light: 120, 130, 145;
    --palette-neutral-normal: 128, 138, 153;
    --palette-neutral-bold: 147, 156, 168;
    --palette-neutral-boldest: 166, 173, 184;

    --palette-dark-lightest: 20, 22, 25;
    --palette-dark-light: 25, 27, 31;
    --palette-dark-normal: 30, 33, 37;
    --palette-dark-bold: 34, 37, 42;
    --palette-dark-boldest: 67, 70, 74;

    --palette-off-dark-lightest: 43, 47, 51;
    --palette-off-dark-light: 51, 55, 59;
    --palette-off-dark-normal: 60, 63, 68;
    --palette-off-dark-bold: 66, 70, 75;
    --palette-off-dark-boldest: 94, 98, 102;

    --palette-light-lightest: 238, 238, 238;
    --palette-light-light: 240, 240, 240;
    --palette-light-normal: 242, 242, 242;
    --palette-light-bold: 244, 244, 244;
    --palette-light-boldest: 245, 245, 245;

    --palette-off-light-lightest: 228, 229, 231;
    --palette-off-light-light: 232, 233, 235;
    --palette-off-light-normal: 235, 236, 237;
    --palette-off-light-bold: 237, 238, 239;
    --palette-off-light-boldest: 239, 240, 241;

    --palette-alert-lightest: 202, 123, 11;
    --palette-alert-light: 210, 139, 19;
    --palette-alert-normal: 215, 149, 24;
    --palette-alert-bold: 219, 158, 28;
    --palette-alert-boldest: 223, 166, 32;

    --palette-affirmative-lightest: 37, 139, 73;
    --palette-affirmative-light: 52, 154, 92;
    --palette-affirmative-normal: 61, 163, 102;
    --palette-affirmative-bold: 70, 172, 113;
    --palette-affirmative-boldest: 77, 179, 121;

    --palette-negative-lightest: 161, 52, 42;
    --palette-negative-light: 174, 70, 59;
    --palette-negative-normal: 181, 80, 68;
    --palette-negative-bold: 189, 90, 78;
    --palette-negative-boldest: 195, 98, 85;

    --palette-auto-lightest: var(--palette-dark-lightest);
    --palette-auto-light: var(--palette-dark-light);
    --palette-auto-normal: var(--palette-dark-normal);
    --palette-auto-bold: var(--palette-dark-bold);
    --palette-auto-boldest: var(--palette-dark-boldest);

    --palette-auto-off-lightest: var(--palette-off-dark-lightest);
    --palette-auto-off-light: var(--palette-off-dark-light);
    --palette-auto-off-normal: var(--palette-off-dark-normal);
    --palette-auto-off-bold: var(--palette-off-dark-bold);
    --palette-auto-off-boldest: var(--palette-off-dark-boldest);

    --palette-inverse-lightest: var(--palette-light-lightest);
    --palette-inverse-light: var(--palette-light-light);
    --palette-inverse-normal: var(--palette-light-normal);
    --palette-inverse-bold: var(--palette-light-bold);
    --palette-inverse-boldest: var(--palette-light-boldest);

    --palette-inverse-off-lightest: var(--palette-off-light-lightest);
    --palette-inverse-off-light: var(--palette-off-light-light);
    --palette-inverse-off-normal: var(--palette-off-light-normal);
    --palette-inverse-off-bold: var(--palette-off-light-bold);
    --palette-inverse-off-boldest: var(--palette-off-light-boldest);

    /** */

    --scrollbar-background: var(--palette-off-dark-boldest);
    --scrollbar-foreground: var(--palette-dark-normal);
}

html {
  background-color: rgb(var(--document-background));
  line-height: var(--document-font-line-height);
  color: rgb(var(--document-foreground));
  font-size: var(--document-font-size);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html ::selection {
  background-color: rgb(var(--selection-background));
  color: rgb(var(--selection-foreground));
}

* {
    /** TODO: Remove after adding ARIA / Accessibility support */

    -webkit-tap-highlight-color: transparent;

    scrollbar-width: auto;
    scrollbar-color: rgb(var(--scrollbar-foreground)) rgb(var(--scrollbar-background));
}

::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}

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

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--scrollbar-foreground));
}

audio, canvas, embed, img, object, svg, video {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

audio, canvas, embed, iframe, img, object, svg, video {
  display: block;
}

img, video {
  height: auto;
  max-width: 100%;
}

blockquote {
  --palette-background-lightest: var(--palette-inverse-off-lightest);
  --palette-background-normal: var(--palette-neutral-normal);
  border-left-width: 5px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--palette-background-normal));
  padding-left: var(--spacing-root-large);
  padding-right: var(--spacing-root-large);
  padding-top: var(--spacing-root-medium);
  padding-bottom: var(--spacing-root-medium);
  position: relative;
  background-color: rgba(var(--palette-background-lightest), 0.2);
  border-radius: var(--radius-small);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

code {
  --size-text-size: 80% !important;
  overflow-wrap: break-word;
  font-size: var(--size-text-size);
}

pre > code {
  background-color: transparent;
  padding: 0px;
  white-space: pre;
}

h1, h2, h3, h4, h5, h6 {
  --palette-background-normal: currentColor;
  font-weight: 700;
  color: var(--palette-background-normal);
  text-align: var(--align-text, inherit);
  text-transform: var(--transform-text, inherit);
  transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

h1[data-palette], h2[data-palette], h3[data-palette], h4[data-palette], h5[data-palette], h6[data-palette] {
  color: rgb(var(--palette-background-normal));
}

h1[data-variation~="truncate"], h2[data-variation~="truncate"], h3[data-variation~="truncate"], h4[data-variation~="truncate"], h5[data-variation~="truncate"], h6[data-variation~="truncate"] {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h1 {
  line-height: var(--font-content-line-height-massive);
  font-size: var(--font-content-size-massive);
}

h1[data-variation~="headline"] {
  line-height: var(--font-headline-line-height-massive);
  font-size: var(--font-headline-size-massive);
}

h2 {
  line-height: var(--font-content-line-height-huge);
  font-size: var(--font-content-size-huge);
}

h2[data-variation~="headline"] {
  line-height: var(--font-headline-line-height-huge);
  font-size: var(--font-headline-size-huge);
}

h3 {
  line-height: var(--font-content-line-height-large);
  font-size: var(--font-content-size-large);
}

h3[data-variation~="headline"] {
  line-height: var(--font-headline-line-height-large);
  font-size: var(--font-headline-size-large);
}

h4 {
  line-height: var(--font-content-line-height-medium);
  font-size: var(--font-content-size-medium);
}

h4[data-variation~="headline"] {
  line-height: var(--font-headline-line-height-medium);
  font-size: var(--font-headline-size-medium);
}

h5 {
  line-height: var(--font-content-line-height-small);
  font-size: var(--font-content-size-small);
}

h5[data-variation~="headline"] {
  line-height: var(--font-headline-line-height-small);
  font-size: var(--font-headline-size-small);
}

h6 {
  line-height: var(--font-content-line-height-tiny);
  font-size: var(--font-content-size-tiny);
}

h6[data-variation~="headline"] {
  line-height: var(--font-headline-line-height-tiny);
  font-size: var(--font-headline-size-tiny);
}

/**
 * TODO: A bit lame having to use `:not` selectors due to the `span` selector. Need to
 * update to use `:where`, when support is better.
 */

abbr, b, del, em, i, ins, kbd, mark, p, pre, s, samp, small, span:not([class], [role]), strong, sub, sup, u {
  --palette-background-normal: currentColor;
  color: var(--palette-background-normal);
  text-align: var(--align-text);
  text-transform: var(--transform-text);
  transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

abbr:not([data-align]), b:not([data-align]), del:not([data-align]), em:not([data-align]), i:not([data-align]), ins:not([data-align]), kbd:not([data-align]), mark:not([data-align]), p:not([data-align]), pre:not([data-align]), s:not([data-align]), samp:not([data-align]), small:not([data-align]), span:not([class], [role]):not([data-align]), strong:not([data-align]), sub:not([data-align]), sup:not([data-align]), u:not([data-align]) {
        --align-text: inherit;
    }

abbr[data-palette], b[data-palette], del[data-palette], em[data-palette], i[data-palette], ins[data-palette], kbd[data-palette], mark[data-palette], p[data-palette], pre[data-palette], s[data-palette], samp[data-palette], small[data-palette], span:not([class], [role])[data-palette], strong[data-palette], sub[data-palette], sup[data-palette], u[data-palette] {
  color: rgb(var(--palette-background-normal));
}

abbr:not([data-variation]), b:not([data-variation]), del:not([data-variation]), em:not([data-variation]), i:not([data-variation]), ins:not([data-variation]), kbd:not([data-variation]), mark:not([data-variation]), p:not([data-variation]), pre:not([data-variation]), s:not([data-variation]), samp:not([data-variation]), small:not([data-variation]), span:not([class], [role]):not([data-variation]), strong:not([data-variation]), sub:not([data-variation]), sup:not([data-variation]), u:not([data-variation]) {
  line-height: var(--size-text-line-height);
  font-size: var(--size-text-size);
}

abbr[data-variation~="headline"], b[data-variation~="headline"], del[data-variation~="headline"], em[data-variation~="headline"], i[data-variation~="headline"], ins[data-variation~="headline"], kbd[data-variation~="headline"], mark[data-variation~="headline"], p[data-variation~="headline"], pre[data-variation~="headline"], s[data-variation~="headline"], samp[data-variation~="headline"], small[data-variation~="headline"], span:not([class], [role])[data-variation~="headline"], strong[data-variation~="headline"], sub[data-variation~="headline"], sup[data-variation~="headline"], u[data-variation~="headline"] {
  line-height: var(--size-headline-line-height);
  font-size: var(--size-headline-size);
}

abbr:not([data-size]), b:not([data-size]), del:not([data-size]), em:not([data-size]), i:not([data-size]), ins:not([data-size]), kbd:not([data-size]), mark:not([data-size]), p:not([data-size]), pre:not([data-size]), s:not([data-size]), samp:not([data-size]), small:not([data-size]), span:not([class], [role]):not([data-size]), strong:not([data-size]), sub:not([data-size]), sup:not([data-size]), u:not([data-size]) {
        --size-text-size: inherit;
        --size-text-line-height: inherit;
    }

abbr:not([data-transform]), b:not([data-transform]), del:not([data-transform]), em:not([data-transform]), i:not([data-transform]), ins:not([data-transform]), kbd:not([data-transform]), mark:not([data-transform]), p:not([data-transform]), pre:not([data-transform]), s:not([data-transform]), samp:not([data-transform]), small:not([data-transform]), span:not([class], [role]):not([data-transform]), strong:not([data-transform]), sub:not([data-transform]), sup:not([data-transform]), u:not([data-transform]) {
        --transform-text: inherit;
    }

abbr[data-variation~="truncate"], b[data-variation~="truncate"], del[data-variation~="truncate"], em[data-variation~="truncate"], i[data-variation~="truncate"], ins[data-variation~="truncate"], kbd[data-variation~="truncate"], mark[data-variation~="truncate"], p[data-variation~="truncate"], pre[data-variation~="truncate"], s[data-variation~="truncate"], samp[data-variation~="truncate"], small[data-variation~="truncate"], span:not([class], [role])[data-variation~="truncate"], strong[data-variation~="truncate"], sub[data-variation~="truncate"], sup[data-variation~="truncate"], u[data-variation~="truncate"] {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

kbd {
  --palette-background-normal: var(--palette-neutral-normal);
  --size-text-size: 70% !important;
  border-bottom-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--palette-background-normal));
  white-space: nowrap;
  border-style: ridge;
  font-size: var(--size-text-size);
}

pre {
  overflow-x: auto;
}

code, kbd, pre {
  --palette-background-lightest: var(--palette-inverse-off-lightest);
  padding-left: var(--spacing-local-small);
  padding-right: var(--spacing-local-small);
  padding-top: var(--spacing-local-tiny);
  padding-bottom: var(--spacing-local-tiny);
  border-radius: 0.375rem;
  background: rgba(var(--palette-background-lightest), 0.2);
  font-family: var(--font-family-monospace);
}

code, code[data-palette], kbd, kbd[data-palette], pre, pre[data-palette] {
  color: currentColor;
}

small {
  --size-text-size: 80% !important;
  opacity: 0.75;
  font-size: var(--size-text-size);
}

.badge {
  --palette-background-normal: var(--palette-neutral-normal);
  --palette-foreground-normal: var(--palette-light-normal);
  vertical-align: middle;
  background-color: rgb(var(--palette-background-normal));
  font-weight: 700;
  gap: var(--spacing-local-small);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  line-height: var(--font-content-line-height-nano);
  padding: var(--spacing-local-small);
  position: relative;
  color: rgb(var(--palette-foreground-normal));
  white-space: nowrap;
  font-size: var(--font-content-size-nano);
  text-shadow: 0px 0px 0px rgb(var(--palette-foreground-normal));
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.badge[data-position] {
  pointer-events: none;
  border-radius: 2rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ol, ul {
  margin-left: var(--spacing-local-medium);
}

ol {
  list-style-type: decimal;
}

ul {
  list-style-type: disc;
}

table {
  --palette-background-lightest: var(--palette-neutral-lightest);
  border-collapse: collapse;
  width: 100%;
}

/**
 * TODO: Repeat properties could probably be condensed a bit
 */

table[data-variation~="borders"] :is(td, th):not(:last-child)::after {
  position: absolute;
  display: block;
  background-color: currentColor;
  height: 100%;
  opacity: 0.4;
  right: 0px;
  top: 0px;
  width: 1px;
  content: "";
}

table[data-variation~="borders"] > :is(tbody, thead, tfoot):first-child :is(td, th):not(:last-child)::after {
        border-top-left-radius: var(--radius-medium);
        border-top-right-radius: var(--radius-medium);
    }

table[data-variation~="borders"] > :is(tbody, thead, tfoot):last-child :is(td, th):not(:last-child)::after {
        border-bottom-left-radius: var(--radius-medium);
        border-bottom-right-radius: var(--radius-medium);
    }

table[data-variation~="stripes"] > tbody > tr:nth-child(2n + 1) {
  background-color: rgba(var(--palette-background-lightest), 0.2);
}

th, thead, td, tfoot, tr {
  position: relative;
}

th, td {
  padding-left: var(--spacing-root-medium);
  padding-right: var(--spacing-root-medium);
  padding-top: var(--spacing-root-small);
  padding-bottom: var(--spacing-root-small);
  text-align: left;
}

:is(thead, tfoot) > tr > :is(td, th)::before, table[data-variation~="borders"] > tbody > tr:not(:last-child) > :is(td, th)::before {
  position: absolute;
  display: block;
  background-color: currentColor;
  bottom: 0px;
  height: 1px;
  opacity: 0.4;
  right: 0px;
  width: 100%;
  content: "";
}

:is(thead, tfoot) > tr > :is(td, th):first-child::before, table[data-variation~="borders"] > tbody > tr:not(:last-child) > :is(td, th):first-child::before {
            border-top-left-radius: var(--radius-medium);
            border-bottom-left-radius: var(--radius-medium);
        }

:is(thead, tfoot) > tr > :is(td, th):last-child::before, table[data-variation~="borders"] > tbody > tr:not(:last-child) > :is(td, th):last-child::before {
            border-top-right-radius: var(--radius-medium);
            border-bottom-right-radius: var(--radius-medium);
        }

tfoot > tr > :is(td, th)::before {
  top: 0px;
}

span.ellipsis {
  --animation-pulse-stop-opacity: 0.3;
  --character: ".";
  white-space: nowrap;
}

span.ellipsis > span {
        animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite
    }

span.ellipsis > span::before {
  display: inline;
  content: var(--character);
}

span.ellipsis > span:first-child {
            animation-delay: -0.66s;
        }

span.ellipsis > span:nth-child(2) {
            animation-delay: -0.33s;
        }

.dot {
  --palette-background-bold: currentColor;
  vertical-align: middle;
  background-color: var(--palette-background-bold);
  height: 1em;
  display: inline-block;
  line-height: var(--font-content-line-height-nano);
  pointer-events: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 1em;
  border-radius: var(--radius-circle);
  font-size: var(--font-content-size-nano);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dot[data-palette] {
  background-color: rgb(var(--palette-background-bold));
}

.spinner {
  --palette-background-bold: currentColor;
  --size-icon: 1em;
  vertical-align: middle;
  border-width: 2px;
  border-style: solid;
  height: var(--size-icon);
  display: inline-block;
  border-radius: 9999px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: var(--size-icon);
  border-color: currentColor transparent;
  color: var(--palette-background-bold);
  animation: spin 1s linear infinite;
  transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spinner[data-palette] {
        color: rgb(var(--palette-background-bold));
    }

.spinner[data-variation="dual"] {
  border-style: double;
}

.spinner[data-variation="dual"]:is([data-size="medium"], [data-size="large"], [data-size="huge"]) {
            border-width: 0.375em;
        }

.spinner[data-variation="dual"] {

        border-width: 0.25em;
    }

.wave {
  --palette-background-bold: currentColor;
  vertical-align: middle;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  line-height: var(--font-content-line-height-nano);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--palette-background-bold);
  white-space: nowrap;
  font-size: var(--font-content-size-nano);
  transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wave[data-palette] {
  color: rgb(var(--palette-background-bold));
}

.wave > span {
  background-color: currentColor;
  height: 1em;
  display: inline-block;
  width: 1em;
  border-radius: var(--radius-circle);
  animation: wave 1s infinite;
}

.wave > span:nth-child(2) {
            animation-delay: -0.2s;
        }

.wave > span:nth-child(3) {
            animation-delay: -0.4s;
        }

.wave > span:nth-child(4) {
            animation-delay: -0.6s;
        }

.wave > span:last-child {
            animation-delay: -0.8s;
        }

button, [role="button"], [type="button"], [type="reset"], [type="submit"] {
  --palette-background-light: var(--palette-neutral-light);
  --palette-background-normal: var(--palette-neutral-normal);
  --palette-background-bold: var(--palette-neutral-bold);
  --palette-foreground-normal: var(--palette-light-normal);
  --size-text-size: var(--document-font-size);
  --size-text-line-height: var(--document-font-line-height);
  vertical-align: middle;
  border-width: 2px;
  border-color: transparent;
  border-style: solid;
  font-weight: 700;
  cursor: pointer;
  gap: var(--spacing-local-small);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  line-height: var(--size-text-line-height);
  padding-left: var(--spacing-local-small);
  padding-right: var(--spacing-local-small);
  padding-top: var(--spacing-local-tiny);
  padding-bottom: var(--spacing-local-tiny);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  border-radius: var(--radius-medium);
  font-size: var(--size-text-size);
  outline: none !important;
  transform: scale(1);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

button:is(:disabled, [aria-disabled="true"]), [role="button"]:is(:disabled, [aria-disabled="true"]), [type="button"]:is(:disabled, [aria-disabled="true"]), [type="reset"]:is(:disabled, [aria-disabled="true"]), [type="submit"]:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.4;
}

button:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [role="button"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="button"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="reset"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="submit"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]) {
            transform: scale(0.95);
        }

button:not([data-variation]), [role="button"]:not([data-variation]), [type="button"]:not([data-variation]), [type="reset"]:not([data-variation]), [type="submit"]:not([data-variation]) {
  background-color: rgb(var(--palette-background-bold));
  color: rgb(var(--palette-foreground-normal));
}

button:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [role="button"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="button"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="reset"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="submit"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:focus, :hover) {
  background-color: rgb(var(--palette-background-normal));
}

button:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [role="button"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="button"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="reset"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="submit"]:not([data-variation]):not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]) {
  background-color: rgb(var(--palette-background-light));
}

button[data-variation="clear"], [role="button"][data-variation="clear"], [type="button"][data-variation="clear"], [type="reset"][data-variation="clear"], [type="submit"][data-variation="clear"] {
  background-color: transparent;
  color: rgb(var(--palette-background-bold));
}

button[data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [role="button"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="button"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="reset"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="submit"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover) {
  background-color: rgba(var(--palette-background-bold), 0.2);
}

button[data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [role="button"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="button"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="reset"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="submit"][data-variation="clear"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]) {
  color: rgb(var(--palette-foreground-normal));
  background-color: rgba(var(--palette-background-bold), 0.5);
}

button[data-variation="outline"], [role="button"][data-variation="outline"], [type="button"][data-variation="outline"], [type="reset"][data-variation="outline"], [type="submit"][data-variation="outline"] {
  background-color: transparent;
  --tw-border-opacity: 1;
  border-color: rgb(var(--palette-background-bold));
  color: rgb(var(--palette-background-normal));
}

button[data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [role="button"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="button"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="reset"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover), [type="submit"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:focus, :hover) {
  background-color: rgba(var(--palette-background-bold), 0.2);
  border-color: rgba(var(--palette-background-bold), 0.5);
}

button[data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [role="button"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="button"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="reset"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]), [type="submit"][data-variation="outline"]:not(:disabled, [aria-disabled="true"]):is(:active, [aria-current], [aria-pressed="true"]) {
  background-color: rgb(var(--palette-background-bold));
  border-color: transparent;
  color: rgb(var(--palette-foreground-normal));
}

[type="checkbox"] {
    --palette-background-bold: var(--palette-neutral-bold);
    --palette-foreground-normal: var(--palette-light-normal);

    --size-text-size: var(--document-font-size);
    --size-text-line-height: var(--document-font-line-height);
}

[type="checkbox"]:not([role]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: var(--spacing-local-small);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: var(--size-text-line-height);
  white-space: nowrap;
  border-radius: var(--radius-small);
  font-size: var(--size-text-size);
  outline: none !important;
  transform: scale(1);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="checkbox"]:not([role]):disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

[type="checkbox"]:not([role])::before {
  height: 0.625em;
  width: 0.625em;
  content: "";
  background-color: currentColor;
  clip-path: inset(50% 50% 50% 50% round 0.2em);
  transition: clip-path 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="checkbox"]:not([role]):enabled:active,
    [type="checkbox"]:not([role])[aria-pressed="true"] {
        transform: scale(0.95);
    }

[type="checkbox"]:not([role]):not(:checked):enabled:is(:active, :hover)::before, [type="checkbox"]:not([role]):not(:checked)[aria-pressed="true"]::before {
                clip-path: inset(0% 0% 0% 0% round 0.2em);
            }

[type="checkbox"]:not([role]):checked::before {
            clip-path: inset(0% 0% 0% 0% round 0.2em);
        }

[type="checkbox"]:not([role]):not([data-variation]) {
  color: rgb(var(--palette-background-bold));
  background-color: rgba(var(--palette-background-bold), 0.2);
}

[type="checkbox"]:not([role]):not([data-variation]):not(:checked) {
  color: rgb(var(--palette-background-bold));
}

[type="checkbox"]:not([role]):not([data-variation]):not(:checked):enabled:is(:active, :hover), [type="checkbox"]:not([role]):not([data-variation]):not(:checked)[aria-pressed="true"] {
  background-color: rgba(var(--palette-background-bold), 0.5);
}

[type="checkbox"]:not([role]):not([data-variation]):checked {
  background-color: rgb(var(--palette-background-bold));
  color: rgb(var(--palette-foreground-normal));
}

[type="checkbox"]:not([role]):not([data-variation]):checked:enabled:is(:active, :hover), [type="checkbox"]:not([role]):not([data-variation]):checked[aria-pressed="true"] {
  background-color: rgba(var(--palette-background-bold), 0.75);
}

[type="checkbox"]:not([role])[data-variation="flush"]:not(:checked) {
  color: rgb(var(--palette-background-bold));
}

[type="checkbox"]:not([role])[data-variation="flush"]:not(:checked):enabled:is(:active, :hover), [type="checkbox"]:not([role])[data-variation="flush"]:not(:checked)[aria-pressed="true"] {
  color: rgba(var(--palette-background-bold), 0.5);
}

[type="checkbox"]:not([role])[data-variation="flush"]:checked {
  color: rgb(var(--palette-background-bold));
}

[type="checkbox"]:not([role])[data-variation="flush"]:checked:enabled:is(:active, :hover), [type="checkbox"]:not([role])[data-variation="flush"]:checked[aria-pressed="true"] {
  color: rgba(var(--palette-background-bold), 0.75);
}

[type="radio"] {
  --palette-background-bold: var(--palette-neutral-bold);
  --palette-foreground-normal: var(--palette-light-normal);
  --size-text-size: var(--document-font-size);
  --size-text-line-height: var(--document-font-line-height);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: var(--spacing-local-small);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: var(--size-text-line-height);
  white-space: nowrap;
  border-radius: var(--radius-circle);
  font-size: var(--size-text-size);
  outline: none !important;
  transform: scale(1);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

[type="radio"]::before {
  height: 0.625em;
  width: 0.625em;
  content: "";
  background-color: currentColor;
  clip-path: inset(50% 50% 50% 50% round var(--radius-circle));
  transition: clip-path 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="radio"]:enabled:active,
    [type="radio"][aria-pressed="true"] {
        transform: scale(0.95);
    }

[type="radio"]:not(:checked):enabled:is(:active, :hover)::before, [type="radio"]:not(:checked)[aria-pressed="true"]::before {
                clip-path: inset(0% 0% 0% 0% round var(--radius-circle));
            }

[type="radio"]:checked::before {
            clip-path: inset(0% 0% 0% 0% round var(--radius-circle));
        }

[type="radio"]:not([data-variation]) {
  color: rgb(var(--palette-background-bold));
  background-color: rgba(var(--palette-background-bold), 0.2);
}

[type="radio"]:not([data-variation]):not(:checked) {
  color: rgb(var(--palette-background-bold));
}

[type="radio"]:not([data-variation]):not(:checked):enabled:is(:active, :hover), [type="radio"]:not([data-variation]):not(:checked)[aria-pressed="true"] {
  background-color: rgba(var(--palette-background-bold), 0.5);
}

[type="radio"]:not([data-variation]):checked {
  background-color: rgb(var(--palette-background-bold));
  color: rgb(var(--palette-foreground-normal));
}

[type="radio"]:not([data-variation]):checked:enabled:is(:active, :hover), [type="radio"]:not([data-variation]):checked[aria-pressed="true"] {
  background-color: rgba(var(--palette-background-bold), 0.75);
}

[type="radio"][data-variation="flush"]:not(:checked) {
  color: rgb(var(--palette-background-bold));
}

[type="radio"][data-variation="flush"]:not(:checked):enabled:is(:active, :hover), [type="radio"][data-variation="flush"]:not(:checked)[aria-pressed="true"] {
  color: rgba(var(--palette-background-bold), 0.5);
}

[type="radio"][data-variation="flush"]:checked {
  color: rgb(var(--palette-background-bold));
}

[type="radio"][data-variation="flush"]:checked:enabled:is(:active, :hover), [type="radio"][data-variation="flush"]:checked[aria-pressed="true"] {
  color: rgba(var(--palette-background-bold), 0.75);
}

[type="checkbox"][role="switch"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: var(--spacing-local-small);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: var(--size-text-line-height);
  color: rgb(var(--palette-background-bold));
  white-space: nowrap;
  background-color: rgba(var(--palette-background-bold), 0.2);
  border-radius: var(--radius-pill);
  font-size: var(--size-text-size);
  outline: none !important;
  transform: scale(1);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="checkbox"][role="switch"]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

[type="checkbox"][role="switch"]::before {
  height: 0.625em;
  width: 1.25em;
  content: "";
  background-color: currentColor;
  transition: clip-path 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="checkbox"][role="switch"]:not(:checked) {
  color: rgb(var(--palette-background-bold));
}

[type="checkbox"][role="switch"]:not(:checked)::before {
            clip-path: inset(0% 50% 0% 0% round var(--radius-pill));
        }

[type="checkbox"][role="switch"]:not(:checked):enabled:is(:active, :hover), [type="checkbox"][role="switch"]:not(:checked)[aria-pressed="true"] {
  background-color: rgba(var(--palette-background-bold), 0.5);
}

[type="checkbox"][role="switch"]:checked {
  background-color: rgb(var(--palette-background-bold));
  color: rgb(var(--palette-foreground-normal));
}

[type="checkbox"][role="switch"]:checked::before {
            clip-path: inset(0% 0% 0% 50% round var(--radius-pill));
        }

[type="checkbox"][role="switch"]:checked:enabled:is(:active, :hover), [type="checkbox"][role="switch"]:checked[aria-pressed="true"] {
  background-color: rgba(var(--palette-background-bold), 0.75);
}

[type="checkbox"][role="switch"]:enabled:active,
    [type="checkbox"][role="switch"][aria-pressed="true"] {
        transform: scale(0.95)
    }

[type="checkbox"][role="switch"]:enabled:active::before, [type="checkbox"][role="switch"][aria-pressed="true"]::before {
            clip-path: inset(0% 25% 0% 25% round var(--radius-pill));
        }

[type="email"], [type="password"], [type="text"], [type="search"], [type="url"], textarea {
  --palette-background-bold: var(--palette-neutral-bold);
  --palette-foreground-normal: var(--palette-light-normal);
  --size-text-size: var(--document-font-size);
  --size-text-line-height: var(--document-font-line-height);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  line-height: var(--size-text-line-height);
  padding-left: var(--spacing-local-small);
  padding-right: var(--spacing-local-small);
  padding-top: var(--spacing-local-tiny);
  padding-bottom: var(--spacing-local-tiny);
  position: relative;
  border-radius: var(--radius-medium);
  font-size: var(--size-text-size);
  text-align: var(--align-text);
  text-transform: var(--transform-text);
  outline: none !important;
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[type="email"]:disabled, [type="password"]:disabled, [type="text"]:disabled, [type="search"]:disabled, [type="url"]:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

[type="email"]::placeholder, [type="password"]::placeholder, [type="text"]::placeholder, [type="search"]::placeholder, [type="url"]::placeholder, textarea::placeholder {
  opacity: 0.5;
  color: currentColor;
}

[type="email"]:not([data-variation]), [type="password"]:not([data-variation]), [type="text"]:not([data-variation]), [type="search"]:not([data-variation]), [type="url"]:not([data-variation]), textarea:not([data-variation]) {
  border-color: rgba(var(--palette-background-bold), 0.2);
}

[type="email"]:not([data-variation]):enabled:hover, [type="password"]:not([data-variation]):enabled:hover, [type="text"]:not([data-variation]):enabled:hover, [type="search"]:not([data-variation]):enabled:hover, [type="url"]:not([data-variation]):enabled:hover, textarea:not([data-variation]):enabled:hover {
  border-color: rgba(var(--palette-background-bold), 0.5);
}

[type="email"]:not([data-variation]):enabled:is(:focus), [type="password"]:not([data-variation]):enabled:is(:focus), [type="text"]:not([data-variation]):enabled:is(:focus), [type="search"]:not([data-variation]):enabled:is(:focus), [type="url"]:not([data-variation]):enabled:is(:focus), textarea:not([data-variation]):enabled:is(:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--palette-background-bold));
}

[type="email"][data-variation="block"], [type="password"][data-variation="block"], [type="text"][data-variation="block"], [type="search"][data-variation="block"], [type="url"][data-variation="block"], textarea[data-variation="block"] {
  background-color: rgba(var(--palette-background-bold), 0.2);
}

[type="email"][data-variation="block"]:enabled:hover, [type="password"][data-variation="block"]:enabled:hover, [type="text"][data-variation="block"]:enabled:hover, [type="search"][data-variation="block"]:enabled:hover, [type="url"][data-variation="block"]:enabled:hover, textarea[data-variation="block"]:enabled:hover {
  background-color: rgba(var(--palette-background-bold), 0.5);
}

[type="email"][data-variation="block"]:enabled:is(:focus), [type="password"][data-variation="block"]:enabled:is(:focus), [type="text"][data-variation="block"]:enabled:is(:focus), [type="search"][data-variation="block"]:enabled:is(:focus), [type="url"][data-variation="block"]:enabled:is(:focus), textarea[data-variation="block"]:enabled:is(:focus) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--palette-background-bold));
  background-color: transparent;
}

[type="email"][data-variation="flush"], [type="password"][data-variation="flush"], [type="text"][data-variation="flush"], [type="search"][data-variation="flush"], [type="url"][data-variation="flush"], textarea[data-variation="flush"] {
  vertical-align: top;
  border-width: 0px;
  padding: 0px;
  border-radius: 0px;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
}

[type="email"][data-variation="flush"][data-palette], [type="password"][data-variation="flush"][data-palette], [type="text"][data-variation="flush"][data-palette], [type="search"][data-variation="flush"][data-palette], [type="url"][data-variation="flush"][data-palette], textarea[data-variation="flush"][data-palette] {
  color: rgb(var(--palette-background-bold));
}

[type="email"]:not([cols], [size]), [type="password"]:not([cols], [size]), [type="text"]:not([cols], [size]), [type="search"]:not([cols], [size]), [type="url"]:not([cols], [size]), textarea:not([cols], [size]) {
  width: 100%;
}

textarea {
  max-height: 100%;
  resize: none;
  max-width: 100%;
}

.form-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: var(--spacing-local-small);
  width: 100%;
}

label:not([role]) {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  gap: var(--spacing-local-small);
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

label:not([role])[for] {
  cursor: pointer;
}

a:not([role]) {
  cursor: pointer;
  text-decoration: none;
  color: rgb(var(--palette-accent-boldest));
  transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a:not([role]):hover {
  text-decoration: underline;
}

@media (max-width: 767.9px) {
  input[type="checkbox"][role="presentation"]:not(:checked) + .offscreen > nav.aside > .context-button:nth-last-of-type(2), input[type="checkbox"][role="presentation"]:not(:checked) + .context-backdrop + .offscreen > nav.aside > .context-button:nth-last-of-type(2) {
    display: initial;
  }
  input[type="checkbox"][role="presentation"]:checked + .offscreen > nav.aside > .context-button:last-of-type, input[type="checkbox"][role="presentation"]:checked + .context-backdrop + .offscreen > nav.aside > .context-button:last-of-type {
    display: initial;
  }
}

.aside {
  --palette-background-normal: var(--palette-auto-off-normal);
  --palette-foreground-normal: var(--palette-inverse-normal);
  background-color: rgb(var(--palette-background-normal));
  border-style: solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  color: rgb(var(--palette-foreground-normal));
  z-index: 1;
  border-color: rgba(var(--palette-inverse-off-lightest), 0.1);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aside[data-variation~="sticky"] {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
}

.aside > .context-button {
  bottom: 0.75rem;
  position: fixed;
  display: none;
  pointer-events: auto;
}

.aside:not([data-placement]) {
  border-right-width: 2px;
}

.aside:not([data-placement]) > .context-button {
  right: -0.75rem;
  transform: translateX(100%);
}

.aside[data-placement="right"] {
  border-left-width: 2px;
}

.aside[data-placement="right"] > .context-button {
  left: -0.75rem;
  transform: translateX(-100%);
}

.aside > footer {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: var(--spacing-root-small);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: auto;
  padding-bottom: var(--spacing-root-medium);
}

.aside > footer > a {
  color: currentColor !important;
}

.aside > header {
  font-weight: 700;
  line-height: var(--font-headline-line-height-huge);
  padding-top: var(--spacing-root-large);
  padding-bottom: var(--spacing-root-large);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-size: var(--font-headline-size-huge);
}

.aside > header > a {
  color: currentColor !important;
}

.aside > section {
  overflow-y: auto;
  padding-top: var(--spacing-root-small);
  padding-bottom: var(--spacing-root-small);
  margin-bottom: var(--spacing-root-medium);
}

.aside > section:not(:last-of-type) {
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.aside > section:last-of-type {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.aside > :is(footer, header, section) {
  padding-left: var(--spacing-root-large);
  padding-right: var(--spacing-root-large);
}

nav.breadcrumb > ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-left: 0px;
}

nav.breadcrumb > ol > li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

nav.breadcrumb > ol > li > a[aria-current] {
  font-weight: 700;
}

nav.breadcrumb > ol > li > [role="presentation"] {
  margin-left: var(--spacing-local-small);
  margin-right: var(--spacing-local-small);
  opacity: 0.3;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.menu {
  --orientation-direction: column;
  --orientation-spacing: var(--spacing-y) 0 0 0;
  --sizing-text-size: var(--document-font-size);
  --sizing-text-line-height: var(--document-font-line-height);
  --spacing-x: var(--spacing-root-small);
  --spacing-y: var(--spacing-root-small);
  line-height: var(--sizing-text-line-height);
  font-size: var(--sizing-text-size);
}

.menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  margin-left: 0px;
  flex-direction: var(--orientation-direction);
}

.menu ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

.menu ul > li > ul {
  margin-top: var(--spacing-y);
  padding-left: var(--spacing-local-small);
  padding-right: var(--spacing-local-small);
}

.menu ul > li + li {
                margin: var(--orientation-spacing);
            }

.menu ul > li > small {
  font-weight: 700;
  opacity: 0.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  letter-spacing: 0.1em;
}

.menu ul > li > :is(hr, span[role="separator"]) {
  margin: 0px;
}

.menu ul > li > span[role="separator"]::before {
  max-width: 1ch;
}

.menu ul > li > :is(a, button, label) {
  all: unset;
  background-color: transparent;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  gap: var(--spacing-local-small);
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  line-height: inherit;
  text-decoration: none !important;
  padding-left: var(--spacing-local-medium);
  padding-right: var(--spacing-local-medium);
  padding-top: var(--spacing-local-small);
  padding-bottom: var(--spacing-local-small);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  border-radius: var(--radius-medium);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                      color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu ul > li > :is(a, button, label):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.4;
}

.menu ul > li > :is(a, button, label):not([data-palette]) {
  --palette-background-bold: inherit;
  --palette-foreground-normal: inherit;
  color: rgb(var(--palette-foreground-normal));
}

.menu ul > li > :is(a, button, label):not([data-palette]):is(:focus, :hover) {
  background-color: rgba(
                              var(--palette-foreground-normal),
                              0.2
                          );
}

.menu ul > li > :is(a, button, label):not([data-palette]):is(:active, [aria-current], [aria-pressed="true"]) {
  color: rgb(var(--palette-background-bold));
  background-color: rgba(
                              var(--palette-foreground-normal),
                              0.75
                          );
  transform: unset;
}

.menu ul > li > :is(a, button, label)[data-palette] {
  color: rgb(var(--palette-background-bold));
}

.menu ul > li > :is(a, button, label)[data-palette]:is(:focus, :hover) {
  background-color: rgba(var(--palette-background-bold), 0.2);
}

.menu ul > li > :is(a, button, label)[data-palette]:is(:active, [aria-current], [aria-pressed="true"]) {
  color: rgb(var(--palette-foreground-normal));
  background-color: rgba(var(--palette-background-bold), 0.75);
  transform: unset;
}

@media (max-width: 767.9px) {
  input[type="checkbox"][role="presentation"] + nav.omni > header, input[type="checkbox"][role="presentation"] + .context-backdrop + nav.omni > header {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    z-index: 1;
  }
  input[type="checkbox"][role="presentation"] + nav.omni > footer, input[type="checkbox"][role="presentation"] + .context-backdrop + nav.omni > footer {
    position: absolute;
    border-left-width: 2px;
    border-bottom-width: 2px;
    border-style: solid;
    bottom: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-local-small);
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    right: 0px;
    overflow-y: auto;
    padding-left: var(--spacing-root-large);
    padding-right: var(--spacing-root-large);
    padding-top: var(--spacing-root-medium);
    padding-bottom: var(--spacing-root-medium);
    background-color: inherit;
    border-color: rgba(var(--palette-inverse-off-lightest), 0.1);
    border-bottom-left-radius: var(--radius-small);
    max-height: min(85vh, 60ex);
    border-color: inherit;
    clip-path: inset(0% 0% 100% 0% round 0% 0% 0% var(--radius-small));
    transform: translateY(100%);
    transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  input[type="checkbox"][role="presentation"] + nav.omni > footer > section, input[type="checkbox"][role="presentation"] + .context-backdrop + nav.omni > footer > section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin: 0px;
  }
  input[type="checkbox"][role="presentation"]:not(:checked) + nav.omni > header > .context-button:first-of-type, input[type="checkbox"][role="presentation"]:not(:checked) + .context-backdrop + nav.omni > header > .context-button:first-of-type {
    display: initial;
  }
  input[type="checkbox"][role="presentation"]:checked + nav.omni:not([data-variation~="sticky"]), input[type="checkbox"][role="presentation"]:checked + .context-backdrop + nav.omni:not([data-variation~="sticky"]) {
    position: fixed !important;
  }
  input[type="checkbox"][role="presentation"]:checked + nav.omni > header > .context-button:last-of-type, input[type="checkbox"][role="presentation"]:checked + .context-backdrop + nav.omni > header > .context-button:last-of-type {
    display: initial;
  }
  input[type="checkbox"][role="presentation"]:checked + nav.omni > footer, input[type="checkbox"][role="presentation"]:checked + .context-backdrop + nav.omni > footer {
    clip-path: inset(0% 0% 0% 0% round 0% 0% 0% var(--radius-small));
  }
}

.omni {
  --palette-background-normal: var(--palette-auto-off-normal);
  --palette-foreground-normal: var(--palette-inverse-normal);
  background-color: rgb(var(--palette-background-normal));
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding-left: var(--spacing-root-large);
  padding-right: var(--spacing-root-large);
  padding-top: var(--spacing-root-medium);
  padding-bottom: var(--spacing-root-medium);
  position: relative;
  color: rgb(var(--palette-foreground-normal));
  z-index: 1;
  border-color: rgba(var(--palette-inverse-off-lightest), 0.1);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.omni[data-variation~="sticky"] {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 1;
}

.omni > footer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.omni > footer > section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: var(--spacing-local-small);
  margin-left: auto;
}

.omni > header {
  font-weight: 700;
  gap: var(--spacing-local-small);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-size: var(--font-headline-size-medium);
  line-height: var(--font-headline-line-height-medium);
}

.omni > header > a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: currentColor;
}

.omni > header > .context-button {
  display: none;
  line-height: initial;
  letter-spacing: initial;
  font-size: initial;
}

.omni > header > hr[data-orientation="vertical"] {
  margin-left: 0px;
  margin-right: 0px;
}

.omni > :is(footer, header) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

input[type="checkbox"][role="presentation"]:first-child + nav.omni, input[type="checkbox"][role="presentation"]:first-child + .context-backdrop + nav.omni, nav.omni:first-child {
  border-bottom-width: 2px;
  border-style: solid;
}

input[type="checkbox"][role="presentation"]:last-child + nav.omni, input[type="checkbox"][role="presentation"]:last-child + .context-backdrop + nav.omni, nav.omni:last-child {
  border-top-width: 2px;
  border-style: solid;
}

.card {
  --elevation: var(--elevation-lowest);
  --palette-background-normal: var(--palette-auto-off-normal);
  --palette-foreground-normal: var(--palette-inverse-normal);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  border-radius: var(--radius-small);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card > figure {
  margin: 0px;
  border-radius: inherit;
}

.card > figure:first-child > * {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card > figure:last-child > * {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.card > footer {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.card > footer:not(:first-child) {
  padding-top: var(--spacing-root-large);
}

.card > header {
  font-weight: 700;
  line-height: var(--font-content-line-height-large);
  font-size: var(--font-content-size-large);
}

.card > header:first-child {
  padding-bottom: var(--spacing-root-medium);
}

.card > header:not(:first-child) {
  padding-top: var(--spacing-root-medium);
}

.card > section:not(:first-child) {
  padding-top: var(--spacing-root-small);
}

.card > section:last-of-type {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.card > :is(header, footer) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: var(--spacing-root-small);
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.card > :is(footer, header, section):first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card > :is(footer, header, section):last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.card:not([data-variation]) {
  background-color: rgb(var(--palette-background-normal));
  color: rgb(var(--palette-foreground-normal));
  box-shadow: var(--elevation);
}

.card:not([data-variation]) > :is(footer, header, section) {
  border-left-width: 2px;
  border-right-width: 2px;
  border-style: solid;
  padding-left: var(--spacing-root-large);
  padding-right: var(--spacing-root-large);
  border-color: rgba(var(--palette-inverse-off-lightest), 0.1);
}

.card:not([data-variation]) > :is(footer, header, section):first-child {
  border-top-width: 2px;
  padding-top: var(--spacing-root-medium);
}

.card:not([data-variation]) > :is(footer, header, section):last-child {
  border-bottom-width: 2px;
  padding-bottom: var(--spacing-root-medium);
}

.box {
  --palette-background-normal: var(--palette-auto-off-normal);
  --palette-foreground-normal: var(--palette-inverse-normal);
  background-color: rgb(var(--palette-background-normal));
  color: rgb(var(--palette-foreground-normal));
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero {
  --palette-background-normal: var(--palette-auto-off-normal);
  --palette-foreground-normal: var(--palette-inverse-normal);
  background-color: rgb(var(--palette-background-normal));
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-left: var(--spacing-root-medium);
  padding-right: var(--spacing-root-medium);
  padding-top: var(--spacing-root-large);
  padding-bottom: var(--spacing-root-large);
  text-align: center;
  color: rgb(var(--palette-foreground-normal));
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero > header {
  font-weight: 700;
  line-height: var(--font-headline-line-height-massive);
  font-size: var(--font-headline-size-massive);
}

.hero > section {
  line-height: var(--font-headline-line-height-tiny);
  font-size: var(--font-headline-size-tiny);
}

.hero > footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--spacing-root-small);
  line-height: var(--font-headline-line-height-nano);
  max-width: max-content;
  font-size: var(--font-headline-size-nano);
}

.hero > footer:not(:first-child) {
  margin-top: var(--spacing-root-large);
}

.hero > :is(header, section) {
  max-width: 65ch;
}

.hero > :is(header, section):not(:first-child) {
  margin-top: var(--spacing-root-small);
}

.tile {
  --elevation: var(--elevation-lowest);
  --palette-background-normal: var(--palette-auto-off-normal);
  --palette-foreground-normal: var(--palette-inverse-normal);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  border-radius: var(--radius-small);
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tile > figure > * {
  height: var(--sizes-icon-large);
  width: var(--sizes-icon-large);
}

.tile > footer {
  gap: var(--spacing-root-small);
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.tile > section {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.tile > section:not(:first-child) {
  margin-left: var(--spacing-root-large);
}

.tile > section:not(:last-child) {
  margin-right: var(--spacing-root-large);
}

.tile > section > header {
  font-weight: 700;
  line-height: var(--font-content-line-height-large);
  font-size: var(--font-content-size-large);
}

.tile > :is(figure, footer) {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.tile > :is(figure, footer, section) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.tile:not([data-variation]) {
  background-color: rgb(var(--palette-background-normal));
  border-width: 2px;
  border-style: solid;
  padding: var(--spacing-root-medium);
  color: rgb(var(--palette-foreground-normal));
  border-color: rgba(var(--palette-inverse-off-lightest), 0.1);
  box-shadow: var(--elevation);
}

.context-backdrop {
  display: block;
  --tw-bg-opacity: 1;
  background-color: rgba(192, 197, 204, var(--tw-bg-opacity));
  --tw-bg-opacity: 0;
  position: fixed;
  height: 100vh;
  visibility: hidden;
  left: 0px;
  top: 0px;
  width: 100vw;
  z-index: 1;
}

label[for].context-backdrop {
  cursor: pointer;
}

input[type="checkbox"][role="presentation"]:not(:checked) + .context-backdrop {
  pointer-events: none;
}

input[type="checkbox"][role="presentation"]:checked + .context-backdrop {
  --tw-bg-opacity: 0.6;
  visibility: visible;
}

.portal {
  display: contents;
}

/**
 * TODO: Migrated `data-shape` to be a global modifier w/ variables. So other
 * Components can add support. e.g. `Box`
 */

figure[data-fit="contain"] > * {
  -o-object-fit: contain;
  object-fit: contain;
}

figure[data-fit="cover"] > * {
  -o-object-fit: cover;
  object-fit: cover;
}

figure[data-fit="fill"] > * {
  -o-object-fit: fill;
  object-fit: fill;
}

figure[data-fit="none"] > * {
  -o-object-fit: none;
  object-fit: none;
}

figure[data-fit="scale-down"] > * {
  -o-object-fit: scale-down;
  object-fit: scale-down;
}

figure[data-shape="pill"] > * {
        border-radius: var(--radius-pill) !important;
    }

figure[data-shape="rounded"] > * {
        border-radius: var(--radius-small) !important;
    }

figure:not([data-variation])[data-size] > * {
            width: var(--size-embedded);
        }

figure[data-variation~="icon"][data-size] > * {
            width: var(--size-icon);
            height: var(--size-icon);
        }

.grid {
  --grid-alignment-x: initial;
  --grid-alignment-y: initial;
  --points: inital;
  --spacing-x: 0;
  --spacing-y: 0;
  display: -ms-grid;
  display: grid;
  column-gap: var(--spacing-x);
  row-gap: var(--spacing-y);
  grid-auto-flow: row dense;
  align-items: var(--grid-alignment-y);
  justify-content: var(--grid-alignment-x);
  grid-template-columns: repeat(var(--points), 1fr);
}

.grid > * {
  margin: 0px;
}

.grid-item {
  --span-x: 1;
  --span-y: 1;
  display: contents;
}

.grid-item > * {
        grid-column: span var(--span-x) / span var(--span-x);
        grid-row: span var(--span-y) / span var(--span-y);
    }

/**
 * TODO: Figure how to add responsitivity for orientation, need to revert the border-radius
 * resets for the first / last child back to the element's default.
 */

[role="group"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

[role="group"][data-orientation~="vertical"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

[role="group"] > * {
  margin: 0px;
}

[role="group"] > :not(:first-child, :last-child), [role="group"] > :not(:first-child, :last-child)::before, [role="group"] > :not(:first-child, :last-child)::after {
  border-radius: 0px;
}

[role="group"]:not([data-orientation~="vertical"]) > :first-child, [role="group"]:not([data-orientation~="vertical"]) > :first-child::before, [role="group"]:not([data-orientation~="vertical"]) > :first-child::after {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

[role="group"]:not([data-orientation~="vertical"]) > :last-child, [role="group"]:not([data-orientation~="vertical"]) > :last-child::before, [role="group"]:not([data-orientation~="vertical"]) > :last-child::after {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

[role="group"][data-orientation~="vertical"] > :first-child, [role="group"][data-orientation~="vertical"] > :first-child::before, [role="group"][data-orientation~="vertical"] > :first-child::after {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

[role="group"][data-orientation~="vertical"] > :last-child, [role="group"][data-orientation~="vertical"] > :last-child::before, [role="group"][data-orientation~="vertical"] > :last-child::after {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

[role="group"][data-variation~="stacked"][data-orientation~="vertical"] > :not(:last-child) {
            margin-bottom: calc(var(--spacing-root-small) * -1);
        }

[role="group"][data-variation~="stacked"]:not([data-orientation~="vertical"]) > :not(:last-child) {
            margin-right: calc(var(--spacing-root-small) * -1);
        }

.mosaic {
  --grid-alignment-x: initial;
  --grid-alignment-y: initial;
  --sizing-content: initial;
  --spacing-x: 0;
  --spacing-y: 0;
  display: -ms-grid;
  display: grid;
  column-gap: var(--spacing-x);
  row-gap: var(--spacing-y);
  align-items: var(--grid-alignment-y);
  justify-content: var(--grid-alignment-x);
  grid-template-columns: repeat(auto-fill, minmax(var(--sizing-content), 1fr));
}

.mosaic > * {
  margin: 0px;
}

.scrollable {
    overflow: auto;
}

.stack {
  --orientation-direction: column;
  --orientation-flex-alignment-x: var(--flex-alignment-x);
  --orientation-flex-alignment-y: var(--flex-alignment-y);
  --flex-alignment-x: initial;
  --flex-alignment-y: initial;
  --spacing-x: 0;
  --spacing-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  column-gap: var(--spacing-x);
  row-gap: var(--spacing-y);
  align-items: var(--orientation-flex-alignment-x);
  justify-content: var(--orientation-flex-alignment-y);
  flex-direction: var(--orientation-direction);
}

.stack[data-variation~="wrap"] {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container {
  --viewport: var(--sizes-prose);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-root-large);
  padding-right: var(--spacing-root-large);
  width: 100%;
  max-width: min(var(--viewport), 100vw);
}

hr, span[role="separator"] {
  --palette-background-bold: currentColor;
  display: block;
  opacity: 0.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--palette-background-bold);
  transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

hr[data-palette], span[role="separator"][data-palette] {
  color: rgb(var(--palette-background-bold));
}

hr:not([data-orientation]), span[role="separator"]:not([data-orientation]) {
  margin-top: var(--spacing-root-medium);
  margin-bottom: var(--spacing-root-medium);
  width: 100%;
}

hr[data-orientation="vertical"], span[role="separator"][data-orientation="vertical"] {
  height: 100%;
  margin-left: var(--spacing-root-medium);
  margin-right: var(--spacing-root-medium);
}

hr {
  border-width: 0px;
  background-color: currentColor;
  border-radius: var(--radius-small);
}

hr:not([data-orientation]) {
  height: 1px;
}

hr[data-orientation="vertical"] {
  width: 1px;
}

span[role="separator"] {
  font-weight: 700;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--spacing-local-small);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-size: 80%;
}

span[role="separator"]::before, span[role="separator"]::after {
  background-color: currentColor;
  display: block;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  border-radius: var(--radius-small);
  content: "";
}

span[role="separator"]:not([data-orientation])::before, span[role="separator"]:not([data-orientation])::after {
  height: 1px;
}

span[role="separator"][data-orientation="vertical"] {
        /**
         * HACK: Might be missing something, but `@apply write-vertical-right` doesn't seem to work?
         */

        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl
    }

span[role="separator"][data-orientation="vertical"]::before, span[role="separator"][data-orientation="vertical"]::after {
  width: 1px;
}

.spacer {
  --spacing-x: 0;
  --spacing-y: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  -ms-grid-row-align: stretch;
  -ms-grid-column-align: stretch;
  place-self: stretch;
}

div.spacer {
  height: var(--spacing-y);
  width: 0px;
}

div.spacer[data-orientation~="horizontal"] {
  height: 0px;
  width: var(--spacing-x);
}

span.spacer {
  margin-left: var(--spacing-x);
  margin-right: var(--spacing-x);
  margin-top: 0px;
  margin-bottom: 0px;
}

span.spacer[data-orientation~="vertical"] {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: var(--spacing-y);
  margin-bottom: var(--spacing-y);
}

/**
 * NOTE: WindCSS and `postcss-nesting` don't play well together
 * when media selectors are being used
 */

@media (max-width: 639.9px) {
  div.spacer[data-orientation~="mobile:horizontal"] {
    height: 0px;
    width: var(--spacing-x);
  }
  span.spacer[data-orientation~="mobile:vertical"] {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: var(--spacing-y);
    margin-bottom: var(--spacing-y);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  div.spacer[data-orientation~="tablet:horizontal"] {
    height: 0px;
    width: var(--spacing-x);
  }
  span.spacer[data-orientation~="tablet:vertical"] {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: var(--spacing-y);
    margin-bottom: var(--spacing-y);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  div.spacer[data-orientation~="desktop:horizontal"] {
    height: 0px;
    width: var(--spacing-x);
  }
  span.spacer[data-orientation~="desktop:vertical"] {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: var(--spacing-y);
    margin-bottom: var(--spacing-y);
  }
}

@media (min-width: 1024px) {
  div.spacer[data-orientation~="widescreen:horizontal"] {
    height: 0px;
    width: var(--spacing-x);
  }
  span.spacer[data-orientation~="widescreen:vertical"] {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: var(--spacing-y);
    margin-bottom: var(--spacing-y);
  }
}

.offscreen {
  display: contents;
  position: fixed;
  height: 100vh;
  pointer-events: none;
  width: 100vw;
  z-index: 2;
  flex-direction: var(--placement-orientation, row);
  align-items: var(--placement-alignment-y, stretch);
  justify-content: var(--placement-alignment-x, stretch);
  width: var(--placement-width, max-content);
  height: var(--placement-height, min(100%, 100vh));
  left: var(--placement-left, 0%);
  top: var(--placement-top, 0%);
  transform: translate(var(--placement-translation-off, -100%, 0%));
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.offscreen > * {
  pointer-events: auto;
}

input[type="checkbox"][role="presentation"]:checked + .offscreen,
    input[type="checkbox"][role="presentation"]:checked + .context-backdrop + .offscreen {
        transform: translate(var(--placement-translation-on, 0%, 0%))
    }

input[type="checkbox"][role="presentation"]:checked + .offscreen > *, input[type="checkbox"][role="presentation"]:checked + .context-backdrop + .offscreen > * {
  pointer-events: auto;
}

/**
 * HACK: Pretty lame have to copy all of this
 */

.offscreen[data-hidden]:not([data-hidden~="mobile"], [data-hidden~="tablet"], [data-hidden~="desktop"], [data-hidden~="widescreen"]) {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
}

.offscreen[data-hidden]:not([data-hidden~="mobile"], [data-hidden~="tablet"], [data-hidden~="desktop"], [data-hidden~="widescreen"]) > * {
  pointer-events: none;
}

@media (max-width: 639.9px) {
  .offscreen[data-hidden~="mobile"] {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
  }
  .offscreen[data-hidden~="mobile"] > * {
    pointer-events: none;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  .offscreen[data-hidden~="tablet"] {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
  }
  .offscreen[data-hidden~="tablet"] > * {
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  .offscreen[data-hidden~="desktop"] {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
  }
  .offscreen[data-hidden~="desktop"] > * {
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  .offscreen[data-hidden~="widescreen"] {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
  }
  .offscreen[data-hidden~="widescreen"] > * {
    pointer-events: none;
  }
}

.overlay {
  --flex-alignment-x: center;
  --flex-alignment-y: center;
  --spacing-x: 0;
  --spacing-y: 0;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  column-gap: var(--spacing-x);
  row-gap: var(--spacing-y);
  height: 100vh;
  left: 0px;
  pointer-events: none;
  top: 0px;
  width: 100vw;
  z-index: 2;
  align-items: var(--flex-alignment-x);
  justify-content: var(--flex-alignment-y);
  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
          transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.overlay > * {
  pointer-events: auto;
}

input[type="checkbox"][role="presentation"]:not(:checked) + .overlay, input[type="checkbox"][role="presentation"]:not(:checked) + .context-backdrop + .overlay {
  opacity: 0;
  transform: scale(0.3);
}

input[type="checkbox"][role="presentation"]:not(:checked) + .overlay > *, input[type="checkbox"][role="presentation"]:not(:checked) + .context-backdrop + .overlay > * {
  pointer-events: none;
}

input[type="checkbox"][role="presentation"]:checked + .overlay, input[type="checkbox"][role="presentation"]:checked + .context-backdrop + .overlay {
  opacity: 1;
  transform: scale(1);
}

.popover {
  display: contents;
  position: relative;
  max-width: max-content;
  white-space: nowrap;
}

.popover:not([data-placement]) {
        --placement-clip-off: 0% -10% 100% -10%;
        --placement-clip-on: 0% -10% -10% -10%;

        --placement-inset: auto 50% calc(0% - var(--spacing-y)) auto;
        --placement-translation: 50%, 100%
    }

.popover:not([data-placement])[data-alignment-x="left"] {
            --placement-inset: auto 0% calc(0% - var(--spacing-y)) auto;
            --placement-translation: 0%, 100%;
        }

.popover:not([data-placement])[data-alignment-x="right"] {
            --placement-inset: auto auto calc(0% - var(--spacing-y)) 0%;
            --placement-translation: 0%, 100%;
        }

.popover:not([data-spacing]) {
        --spacing-x: 0px;
        --spacing-y: 0px;
    }

.popover > :last-child {
  z-index: 1;
  transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.popover[data-hidden]:not([data-hidden~="mobile"], [data-hidden~="tablet"], [data-hidden~="desktop"], [data-hidden~="widescreen"]) {
  display: inline-block !important;
}

.popover[data-hidden]:not([data-hidden~="mobile"], [data-hidden~="tablet"], [data-hidden~="desktop"], [data-hidden~="widescreen"]) > :last-child {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  inset: var(--placement-inset);
  clip-path: inset(var(--placement-clip-off));
  transform: translate(var(--placement-translation));
}

input[type="checkbox"][role="presentation"]:checked
        + .popover[data-hidden]:not([data-hidden~="mobile"], [data-hidden~="tablet"], [data-hidden~="desktop"], [data-hidden~="widescreen"]) > :last-child {
  pointer-events: auto;
  opacity: 1;
  clip-path: inset(var(--placement-clip-on));
}

/**
 * HACK: Really lame again, that this has to be copied
 */

@media (max-width: 639.9px) {
  .popover[data-hidden~="mobile"] {
    display: inline-block !important;
  }
  .popover[data-hidden~="mobile"] > :last-child {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    inset: var(--placement-inset);
    clip-path: inset(var(--placement-clip-off));
    transform: translate(var(--placement-translation));
  }
  input[type="checkbox"][role="presentation"]:checked + .popover[data-hidden~="mobile"] > :last-child {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(var(--placement-clip-on));
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  .popover[data-hidden~="tablet"] {
    display: inline-block !important;
  }
  .popover[data-hidden~="tablet"] > :last-child {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    inset: var(--placement-inset);
    clip-path: inset(var(--placement-clip-off));
    transform: translate(var(--placement-translation));
  }
  input[type="checkbox"][role="presentation"]:checked + .popover[data-hidden~="tablet"] > :last-child {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(var(--placement-clip-on));
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  .popover[data-hidden~="desktop"] {
    display: inline-block !important;
  }
  .popover[data-hidden~="desktop"] > :last-child {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    inset: var(--placement-inset);
    clip-path: inset(var(--placement-clip-off));
    transform: translate(var(--placement-translation));
  }
  input[type="checkbox"][role="presentation"]:checked + .popover[data-hidden~="desktop"] > :last-child {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(var(--placement-clip-on));
  }
}

@media (min-width: 1024px) {
  .popover[data-hidden~="widescreen"] {
    display: inline-block !important;
  }
  .popover[data-hidden~="widescreen"] > :last-child {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    inset: var(--placement-inset);
    clip-path: inset(var(--placement-clip-off));
    transform: translate(var(--placement-translation));
  }
  input[type="checkbox"][role="presentation"]:checked + .popover[data-hidden~="widescreen"] > :last-child {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(var(--placement-clip-on));
  }
}

[data-align="center"] {
    --align-text: center;
}

[data-align="justify"] {
    --align-text: justify;
}

[data-align="left"] {
    --align-text: left;
}

[data-align="right"] {
    --align-text: right;
}

[data-alignment~="center"] {
    --flex-alignment-x: center;
    --flex-alignment-y: center;

    --grid-alignment-x: center;
    --grid-alignment-y: center;
}

[data-alignment~="stretch"] {
    --flex-alignment-x: stretch;
    --flex-alignment-y: stretch;

    --grid-alignment-x: stretch;
    --grid-alignment-y: stretch;
}

[data-alignment-x~="left"] {
    --flex-alignment-x: flex-start;
    --grid-alignment-x: start;
}

[data-alignment-x~="center"] {
    --flex-alignment-x: center;
    --grid-alignment-x: center;
}

[data-alignment-x~="right"] {
    --flex-alignment-x: flex-end;
    --grid-alignment-x: end;
}

[data-alignment-x~="stretch"] {
    --flex-alignment-x: stretch;
    --grid-alignment-x: stretch;
}

[data-alignment-y~="top"] {
    --flex-alignment-y: flex-start;
    --grid-alignment-y: start;
}

[data-alignment-y~="center"] {
    --flex-alignment-y: center;
    --grid-alignment-y: center;
}

[data-alignment-y~="bottom"] {
    --flex-alignment-y: flex-end;
    --grid-alignment-y: end;
}

[data-alignment-y~="stretch"] {
    --flex-alignment-y: stretch;
    --grid-alignment-y: stretch;
}

@media (max-width: 639.9px) {
  [data-alignment~="mobile:center"] {
    --flex-alignment-x: center;
    --flex-alignment-y: center;
    --grid-alignment-x: center;
    --grid-alignment-y: center;
  }
  [data-alignment~="mobile:stretch"] {
    --flex-alignment-x: stretch;
    --flex-alignment-y: stretch;
    --grid-alignment-x: stretch;
    --grid-alignment-y: stretch;
  }
  [data-alignment-x~="mobile:left"] {
    --flex-alignment-x: flex-start;
    --grid-alignment-x: start;
  }
  [data-alignment-x~="mobile:center"] {
    --flex-alignment-x: center;
    --grid-alignment-x: center;
  }
  [data-alignment-x~="mobile:right"] {
    --flex-alignment-x: flex-end;
    --grid-alignment-x: end;
  }
  [data-alignment-x~="mobile:stretch"] {
    --flex-alignment-x: stretch;
    --grid-alignment-x: stretch;
  }
  [data-alignment-y~="mobile:top"] {
    --flex-alignment-y: flex-start;
    --grid-alignment-y: start;
  }
  [data-alignment-y~="mobile:center"] {
    --flex-alignment-y: center;
    --grid-alignment-y: center;
  }
  [data-alignment-y~="mobile:bottom"] {
    --flex-alignment-y: flex-end;
    --grid-alignment-y: end;
  }
  [data-alignment-y~="mobile:stretch"] {
    --flex-alignment-y: stretch;
    --grid-alignment-y: stretch;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-alignment~="tablet:center"] {
    --flex-alignment-x: center;
    --flex-alignment-y: center;
    --grid-alignment-x: center;
    --grid-alignment-y: center;
  }
  [data-alignment~="tablet:stretch"] {
    --flex-alignment-x: stretch;
    --flex-alignment-y: stretch;
    --grid-alignment-x: stretch;
    --grid-alignment-y: stretch;
  }
  [data-alignment-x~="tablet:left"] {
    --flex-alignment-x: flex-start;
    --grid-alignment-x: start;
  }
  [data-alignment-x~="tablet:center"] {
    --flex-alignment-x: center;
    --grid-alignment-x: center;
  }
  [data-alignment-x~="tablet:right"] {
    --flex-alignment-x: flex-end;
    --grid-alignment-x: end;
  }
  [data-alignment-x~="tablet:stretch"] {
    --flex-alignment-x: stretch;
    --grid-alignment-x: stretch;
  }
  [data-alignment-y~="tablet:top"] {
    --flex-alignment-y: flex-start;
    --grid-alignment-y: start;
  }
  [data-alignment-y~="tablet:center"] {
    --flex-alignment-y: center;
    --grid-alignment-y: center;
  }
  [data-alignment-y~="tablet:bottom"] {
    --flex-alignment-y: flex-end;
    --grid-alignment-y: end;
  }
  [data-alignment-y~="tablet:stretch"] {
    --flex-alignment-y: stretch;
    --grid-alignment-y: stretch;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-alignment~="desktop:center"] {
    --flex-alignment-x: center;
    --flex-alignment-y: center;
    --grid-alignment-x: center;
    --grid-alignment-y: center;
  }
  [data-alignment~="desktop:stretch"] {
    --flex-alignment-x: stretch;
    --flex-alignment-y: stretch;
    --grid-alignment-x: stretch;
    --grid-alignment-y: stretch;
  }
  [data-alignment-x~="desktop:left"] {
    --flex-alignment-x: flex-start;
    --grid-alignment-x: start;
  }
  [data-alignment-x~="desktop:center"] {
    --flex-alignment-x: center;
    --grid-alignment-x: center;
  }
  [data-alignment-x~="desktop:right"] {
    --flex-alignment-x: flex-end;
    --grid-alignment-x: end;
  }
  [data-alignment-x~="desktop:stretch"] {
    --flex-alignment-x: stretch;
    --grid-alignment-x: stretch;
  }
  [data-alignment-y~="desktop:top"] {
    --flex-alignment-y: flex-start;
    --grid-alignment-y: start;
  }
  [data-alignment-y~="desktop:center"] {
    --flex-alignment-y: center;
    --grid-alignment-y: center;
  }
  [data-alignment-y~="desktop:bottom"] {
    --flex-alignment-y: flex-end;
    --grid-alignment-y: end;
  }
  [data-alignment-y~="desktop:stretch"] {
    --flex-alignment-y: stretch;
    --grid-alignment-y: stretch;
  }
}

@media (min-width: 1024px) {
  [data-alignment~="widescreen:center"] {
    --flex-alignment-x: center;
    --flex-alignment-y: center;
    --grid-alignment-x: center;
    --grid-alignment-y: center;
  }
  [data-alignment~="widescreen:stretch"] {
    --flex-alignment-x: stretch;
    --flex-alignment-y: stretch;
    --grid-alignment-x: stretch;
    --grid-alignment-y: stretch;
  }
  [data-alignment-x~="widescreen:left"] {
    --flex-alignment-x: flex-start;
    --grid-alignment-x: start;
  }
  [data-alignment-x~="widescreen:center"] {
    --flex-alignment-x: center;
    --grid-alignment-x: center;
  }
  [data-alignment-x~="widescreen:right"] {
    --flex-alignment-x: flex-end;
    --grid-alignment-x: end;
  }
  [data-alignment-x~="widescreen:stretch"] {
    --flex-alignment-x: stretch;
    --grid-alignment-x: stretch;
  }
  [data-alignment-y~="widescreen:top"] {
    --flex-alignment-y: flex-start;
    --grid-alignment-y: start;
  }
  [data-alignment-y~="widescreen:center"] {
    --flex-alignment-y: center;
    --grid-alignment-y: center;
  }
  [data-alignment-y~="widescreen:bottom"] {
    --flex-alignment-y: flex-end;
    --grid-alignment-y: end;
  }
  [data-alignment-y~="widescreen:stretch"] {
    --flex-alignment-y: stretch;
    --grid-alignment-y: stretch;
  }
}

/**
 * NOTE: Some of these are from WindiCSS's built-ins, some are from Animate.css
 */

/**
 * animation: bounce 1s infinite;
 */

@keyframes bounce {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/**
 * animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 */

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/**
 * animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 */

@keyframes pulse {
    0%,
    100% {
        opacity: var(--animation-pulse-ends-opacity, 1);
    }
    50% {
        opacity: var(--animation-pulse-stop-opacity, 0.5);
    }
}

/**
 * animation: spin 1s linear infinite;
 */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/**
 * animation: wave 1s infinite;
 */

@keyframes wave {
    0%,
    100% {
        transform: translateY(-15%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(15%);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

[data-animation="pulse"] {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

[data-elevation="lowest"] {
    --elevation: var(--elevation-lowest);
}

[data-elevation="low"] {
    --elevation: var(--elevation-low);
}

[data-elevation="medium"] {
    --elevation: var(--elevation-medium);
}

[data-elevation="high"] {
    --elevation: var(--elevation-high);
}

[data-elevation="highest"] {
    --elevation: var(--elevation-highest);
}

[data-points~="1"] {
    --points: 1;
}

[data-points~="2"] {
    --points: 2;
}

[data-points~="3"] {
    --points: 3;
}

[data-points~="4"] {
    --points: 4;
}

[data-points~="5"] {
    --points: 5;
}

[data-points~="6"] {
    --points: 6;
}

[data-points~="7"] {
    --points: 7;
}

[data-points~="8"] {
    --points: 8;
}

[data-points~="9"] {
    --points: 9;
}

[data-points~="10"] {
    --points: 10;
}

[data-points~="11"] {
    --points: 11;
}

[data-points~="12"] {
    --points: 12;
}

@media (max-width: 639.9px) {
  [data-points~="mobile:1"] {
    --points: 1;
  }
  [data-points~="mobile:2"] {
    --points: 2;
  }
  [data-points~="mobile:3"] {
    --points: 3;
  }
  [data-points~="mobile:4"] {
    --points: 4;
  }
  [data-points~="mobile:5"] {
    --points: 5;
  }
  [data-points~="mobile:6"] {
    --points: 6;
  }
  [data-points~="mobile:7"] {
    --points: 7;
  }
  [data-points~="mobile:8"] {
    --points: 8;
  }
  [data-points~="mobile:9"] {
    --points: 9;
  }
  [data-points~="mobile:10"] {
    --points: 10;
  }
  [data-points~="mobile:11"] {
    --points: 11;
  }
  [data-points~="mobile:12"] {
    --points: 12;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-points~="tablet:1"] {
    --points: 1;
  }
  [data-points~="tablet:2"] {
    --points: 2;
  }
  [data-points~="tablet:3"] {
    --points: 3;
  }
  [data-points~="tablet:4"] {
    --points: 4;
  }
  [data-points~="tablet:5"] {
    --points: 5;
  }
  [data-points~="tablet:6"] {
    --points: 6;
  }
  [data-points~="tablet:7"] {
    --points: 7;
  }
  [data-points~="tablet:8"] {
    --points: 8;
  }
  [data-points~="tablet:9"] {
    --points: 9;
  }
  [data-points~="tablet:10"] {
    --points: 10;
  }
  [data-points~="tablet:11"] {
    --points: 11;
  }
  [data-points~="tablet:12"] {
    --points: 12;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-points~="desktop:11"] {
    --points: 11;
  }
  [data-points~="desktop:1"] {
    --points: 1;
  }
  [data-points~="desktop:2"] {
    --points: 2;
  }
  [data-points~="desktop:3"] {
    --points: 3;
  }
  [data-points~="desktop:4"] {
    --points: 4;
  }
  [data-points~="desktop:5"] {
    --points: 5;
  }
  [data-points~="desktop:6"] {
    --points: 6;
  }
  [data-points~="desktop:7"] {
    --points: 7;
  }
  [data-points~="desktop:8"] {
    --points: 8;
  }
  [data-points~="desktop:9"] {
    --points: 9;
  }
  [data-points~="desktop:10"] {
    --points: 10;
  }
  [data-points~="desktop:12"] {
    --points: 12;
  }
}

@media (min-width: 1024px) {
  [data-points~="widescreen:1"] {
    --points: 1;
  }
  [data-points~="widescreen:2"] {
    --points: 2;
  }
  [data-points~="widescreen:3"] {
    --points: 3;
  }
  [data-points~="widescreen:4"] {
    --points: 4;
  }
  [data-points~="widescreen:5"] {
    --points: 5;
  }
  [data-points~="widescreen:6"] {
    --points: 6;
  }
  [data-points~="widescreen:7"] {
    --points: 7;
  }
  [data-points~="widescreen:8"] {
    --points: 8;
  }
  [data-points~="widescreen:9"] {
    --points: 9;
  }
  [data-points~="widescreen:10"] {
    --points: 10;
  }
  [data-points~="widescreen:11"] {
    --points: 11;
  }
  [data-points~="widescreen:12"] {
    --points: 12;
  }
}

[data-span~="1"] {
    --span-x: 1;
    --span-y: 1;
}

[data-span~="2"] {
    --span-x: 2;
    --span-y: 2;
}

[data-span~="3"] {
    --span-x: 3;
    --span-y: 3;
}

[data-span~="4"] {
    --span-x: 4;
    --span-y: 4;
}

[data-span~="5"] {
    --span-x: 5;
    --span-y: 5;
}

[data-span~="6"] {
    --span-x: 6;
    --span-y: 6;
}

[data-span~="7"] {
    --span-x: 7;
    --span-y: 7;
}

[data-span~="8"] {
    --span-x: 8;
    --span-y: 8;
}

[data-span~="9"] {
    --span-x: 9;
    --span-y: 9;
}

[data-span~="10"] {
    --span-x: 10;
    --span-y: 10;
}

[data-span~="11"] {
    --span-x: 11;
    --span-y: 11;
}

[data-span~="12"] {
    --span-x: 12;
    --span-y: 12;
}

[data-span-x~="1"] {
    --span-x: 1;
}

[data-span-x~="2"] {
    --span-x: 2;
}

[data-span-x~="3"] {
    --span-x: 3;
}

[data-span-x~="4"] {
    --span-x: 4;
}

[data-span-x~="5"] {
    --span-x: 5;
}

[data-span-x~="6"] {
    --span-x: 6;
}

[data-span-x~="7"] {
    --span-x: 7;
}

[data-span-x~="8"] {
    --span-x: 8;
}

[data-span-x~="9"] {
    --span-x: 9;
}

[data-span-x~="10"] {
    --span-x: 10;
}

[data-span-x~="11"] {
    --span-x: 11;
}

[data-span-x~="12"] {
    --span-x: 12;
}

[data-span-y~="1"] {
    --span-y: 1;
}

[data-span-y~="2"] {
    --span-y: 2;
}

[data-span-y~="3"] {
    --span-y: 3;
}

[data-span-y~="4"] {
    --span-y: 4;
}

[data-span-y~="5"] {
    --span-y: 5;
}

[data-span-y~="6"] {
    --span-y: 6;
}

[data-span-y~="7"] {
    --span-y: 7;
}

[data-span-y~="8"] {
    --span-y: 8;
}

[data-span-y~="9"] {
    --span-y: 9;
}

[data-span-y~="10"] {
    --span-y: 10;
}

[data-span-y~="11"] {
    --span-y: 11;
}

[data-span-y~="12"] {
    --span-y: 12;
}

@media (max-width: 639.9px) {
  [data-span~="mobile:1"] {
    --span-x: 1;
    --span-y: 1;
  }
  [data-span~="mobile:2"] {
    --span-x: 2;
    --span-y: 2;
  }
  [data-span~="mobile:3"] {
    --span-x: 3;
    --span-y: 3;
  }
  [data-span~="mobile:4"] {
    --span-x: 4;
    --span-y: 4;
  }
  [data-span~="mobile:5"] {
    --span-x: 5;
    --span-y: 5;
  }
  [data-span~="mobile:6"] {
    --span-x: 6;
    --span-y: 6;
  }
  [data-span~="mobile:7"] {
    --span-x: 7;
    --span-y: 7;
  }
  [data-span~="mobile:8"] {
    --span-x: 8;
    --span-y: 8;
  }
  [data-span~="mobile:9"] {
    --span-x: 9;
    --span-y: 9;
  }
  [data-span~="mobile:10"] {
    --span-x: 10;
    --span-y: 10;
  }
  [data-span~="mobile:11"] {
    --span-x: 11;
    --span-y: 11;
  }
  [data-span~="mobile:12"] {
    --span-x: 12;
    --span-y: 12;
  }
  [data-span-x~="mobile:1"] {
    --span-x: 1;
  }
  [data-span-x~="mobile:2"] {
    --span-x: 2;
  }
  [data-span-x~="mobile:3"] {
    --span-x: 3;
  }
  [data-span-x~="mobile:4"] {
    --span-x: 4;
  }
  [data-span-x~="mobile:5"] {
    --span-x: 5;
  }
  [data-span-x~="mobile:6"] {
    --span-x: 6;
  }
  [data-span-x~="mobile:7"] {
    --span-x: 7;
  }
  [data-span-x~="mobile:8"] {
    --span-x: 8;
  }
  [data-span-x~="mobile:9"] {
    --span-x: 9;
  }
  [data-span-x~="mobile:10"] {
    --span-x: 10;
  }
  [data-span-x~="mobile:11"] {
    --span-x: 11;
  }
  [data-span-x~="mobile:12"] {
    --span-x: 12;
  }
  [data-span-y~="mobile:1"] {
    --span-y: 1;
  }
  [data-span-y~="mobile:2"] {
    --span-y: 2;
  }
  [data-span-y~="mobile:3"] {
    --span-y: 3;
  }
  [data-span-y~="mobile:4"] {
    --span-y: 4;
  }
  [data-span-y~="mobile:5"] {
    --span-y: 5;
  }
  [data-span-y~="mobile:6"] {
    --span-y: 6;
  }
  [data-span-y~="mobile:7"] {
    --span-y: 7;
  }
  [data-span-y~="mobile:8"] {
    --span-y: 8;
  }
  [data-span-y~="mobile:9"] {
    --span-y: 9;
  }
  [data-span-y~="mobile:10"] {
    --span-y: 10;
  }
  [data-span-y~="mobile:11"] {
    --span-y: 11;
  }
  [data-span-y~="mobile:12"] {
    --span-y: 12;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-span~="tablet:1"] {
    --span-x: 1;
    --span-y: 1;
  }
  [data-span~="tablet:2"] {
    --span-x: 2;
    --span-y: 2;
  }
  [data-span~="tablet:3"] {
    --span-x: 3;
    --span-y: 3;
  }
  [data-span~="tablet:4"] {
    --span-x: 4;
    --span-y: 4;
  }
  [data-span~="tablet:5"] {
    --span-x: 5;
    --span-y: 5;
  }
  [data-span~="tablet:6"] {
    --span-x: 6;
    --span-y: 6;
  }
  [data-span~="tablet:7"] {
    --span-x: 7;
    --span-y: 7;
  }
  [data-span~="tablet:8"] {
    --span-x: 8;
    --span-y: 8;
  }
  [data-span~="tablet:9"] {
    --span-x: 9;
    --span-y: 9;
  }
  [data-span~="tablet:10"] {
    --span-x: 10;
    --span-y: 10;
  }
  [data-span~="tablet:11"] {
    --span-x: 11;
    --span-y: 11;
  }
  [data-span~="tablet:12"] {
    --span-x: 12;
    --span-y: 12;
  }
  [data-span-x~="tablet:1"] {
    --span-x: 1;
  }
  [data-span-x~="tablet:2"] {
    --span-x: 2;
  }
  [data-span-x~="tablet:3"] {
    --span-x: 3;
  }
  [data-span-x~="tablet:4"] {
    --span-x: 4;
  }
  [data-span-x~="tablet:5"] {
    --span-x: 5;
  }
  [data-span-x~="tablet:6"] {
    --span-x: 6;
  }
  [data-span-x~="tablet:7"] {
    --span-x: 7;
  }
  [data-span-x~="tablet:8"] {
    --span-x: 8;
  }
  [data-span-x~="tablet:9"] {
    --span-x: 9;
  }
  [data-span-x~="tablet:10"] {
    --span-x: 10;
  }
  [data-span-x~="tablet:11"] {
    --span-x: 11;
  }
  [data-span-x~="tablet:12"] {
    --span-x: 12;
  }
  [data-span-y~="tablet:1"] {
    --span-y: 1;
  }
  [data-span-y~="tablet:2"] {
    --span-y: 2;
  }
  [data-span-y~="tablet:3"] {
    --span-y: 3;
  }
  [data-span-y~="tablet:4"] {
    --span-y: 4;
  }
  [data-span-y~="tablet:5"] {
    --span-y: 5;
  }
  [data-span-y~="tablet:6"] {
    --span-y: 6;
  }
  [data-span-y~="tablet:7"] {
    --span-y: 7;
  }
  [data-span-y~="tablet:8"] {
    --span-y: 8;
  }
  [data-span-y~="tablet:9"] {
    --span-y: 9;
  }
  [data-span-y~="tablet:10"] {
    --span-y: 10;
  }
  [data-span-y~="tablet:11"] {
    --span-y: 11;
  }
  [data-span-y~="tablet:12"] {
    --span-y: 12;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-span~="desktop:1"] {
    --span-x: 1;
    --span-y: 1;
  }
  [data-span~="desktop:2"] {
    --span-x: 2;
    --span-y: 2;
  }
  [data-span~="desktop:3"] {
    --span-x: 3;
    --span-y: 3;
  }
  [data-span~="desktop:4"] {
    --span-x: 4;
    --span-y: 4;
  }
  [data-span~="desktop:5"] {
    --span-x: 5;
    --span-y: 5;
  }
  [data-span~="desktop:6"] {
    --span-x: 6;
    --span-y: 6;
  }
  [data-span~="desktop:7"] {
    --span-x: 7;
    --span-y: 7;
  }
  [data-span~="desktop:8"] {
    --span-x: 8;
    --span-y: 8;
  }
  [data-span~="desktop:9"] {
    --span-x: 9;
    --span-y: 9;
  }
  [data-span~="desktop:10"] {
    --span-x: 10;
    --span-y: 10;
  }
  [data-span~="desktop:11"] {
    --span-x: 11;
    --span-y: 11;
  }
  [data-span~="desktop:12"] {
    --span-x: 12;
    --span-y: 12;
  }
  [data-span-x~="desktop:1"] {
    --span-x: 1;
  }
  [data-span-x~="desktop:2"] {
    --span-x: 2;
  }
  [data-span-x~="desktop:3"] {
    --span-x: 3;
  }
  [data-span-x~="desktop:4"] {
    --span-x: 4;
  }
  [data-span-x~="desktop:5"] {
    --span-x: 5;
  }
  [data-span-x~="desktop:6"] {
    --span-x: 6;
  }
  [data-span-x~="desktop:7"] {
    --span-x: 7;
  }
  [data-span-x~="desktop:8"] {
    --span-x: 8;
  }
  [data-span-x~="desktop:9"] {
    --span-x: 9;
  }
  [data-span-x~="desktop:10"] {
    --span-x: 10;
  }
  [data-span-x~="desktop:11"] {
    --span-x: 11;
  }
  [data-span-x~="desktop:12"] {
    --span-x: 12;
  }
  [data-span-y~="desktop:1"] {
    --span-y: 1;
  }
  [data-span-y~="desktop:2"] {
    --span-y: 2;
  }
  [data-span-y~="desktop:3"] {
    --span-y: 3;
  }
  [data-span-y~="desktop:4"] {
    --span-y: 4;
  }
  [data-span-y~="desktop:5"] {
    --span-y: 5;
  }
  [data-span-y~="desktop:6"] {
    --span-y: 6;
  }
  [data-span-y~="desktop:7"] {
    --span-y: 7;
  }
  [data-span-y~="desktop:8"] {
    --span-y: 8;
  }
  [data-span-y~="desktop:9"] {
    --span-y: 9;
  }
  [data-span-y~="desktop:10"] {
    --span-y: 10;
  }
  [data-span-y~="desktop:11"] {
    --span-y: 11;
  }
  [data-span-y~="desktop:12"] {
    --span-y: 12;
  }
}

@media (min-width: 1024px) {
  [data-span~="widescreen:1"] {
    --span-x: 1;
    --span-y: 1;
  }
  [data-span~="widescreen:2"] {
    --span-x: 2;
    --span-y: 2;
  }
  [data-span~="widescreen:3"] {
    --span-x: 3;
    --span-y: 3;
  }
  [data-span~="widescreen:4"] {
    --span-x: 4;
    --span-y: 4;
  }
  [data-span~="widescreen:5"] {
    --span-x: 5;
    --span-y: 5;
  }
  [data-span~="widescreen:6"] {
    --span-x: 6;
    --span-y: 6;
  }
  [data-span~="widescreen:7"] {
    --span-x: 7;
    --span-y: 7;
  }
  [data-span~="widescreen:8"] {
    --span-x: 8;
    --span-y: 8;
  }
  [data-span~="widescreen:9"] {
    --span-x: 9;
    --span-y: 9;
  }
  [data-span~="widescreen:10"] {
    --span-x: 10;
    --span-y: 10;
  }
  [data-span~="widescreen:11"] {
    --span-x: 11;
    --span-y: 11;
  }
  [data-span~="widescreen:12"] {
    --span-x: 12;
    --span-y: 12;
  }
  [data-span-x~="widescreen:1"] {
    --span-x: 1;
  }
  [data-span-x~="widescreen:2"] {
    --span-x: 2;
  }
  [data-span-x~="widescreen:3"] {
    --span-x: 3;
  }
  [data-span-x~="widescreen:4"] {
    --span-x: 4;
  }
  [data-span-x~="widescreen:5"] {
    --span-x: 5;
  }
  [data-span-x~="widescreen:6"] {
    --span-x: 6;
  }
  [data-span-x~="widescreen:7"] {
    --span-x: 7;
  }
  [data-span-x~="widescreen:8"] {
    --span-x: 8;
  }
  [data-span-x~="widescreen:9"] {
    --span-x: 9;
  }
  [data-span-x~="widescreen:10"] {
    --span-x: 10;
  }
  [data-span-x~="widescreen:11"] {
    --span-x: 11;
  }
  [data-span-x~="widescreen:12"] {
    --span-x: 12;
  }
  [data-span-y~="widescreen:1"] {
    --span-y: 1;
  }
  [data-span-y~="widescreen:2"] {
    --span-y: 2;
  }
  [data-span-y~="widescreen:3"] {
    --span-y: 3;
  }
  [data-span-y~="widescreen:4"] {
    --span-y: 4;
  }
  [data-span-y~="widescreen:5"] {
    --span-y: 5;
  }
  [data-span-y~="widescreen:6"] {
    --span-y: 6;
  }
  [data-span-y~="widescreen:7"] {
    --span-y: 7;
  }
  [data-span-y~="widescreen:8"] {
    --span-y: 8;
  }
  [data-span-y~="widescreen:9"] {
    --span-y: 9;
  }
  [data-span-y~="widescreen:10"] {
    --span-y: 10;
  }
  [data-span-y~="widescreen:11"] {
    --span-y: 11;
  }
  [data-span-y~="widescreen:12"] {
    --span-y: 12;
  }
}

[data-hidden]:not([data-hidden~="mobile"], [data-hidden~="tablet"], [data-hidden~="desktop"], [data-hidden~="widescreen"]) {
    display: none !important;
}

@media (max-width: 639.9px) {
  [data-hidden~="mobile"] {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-hidden~="tablet"] {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-hidden~="desktop"] {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  [data-hidden~="widescreen"] {
    display: none !important;
  }
}

input[type="checkbox"][role="presentation"] {
    display: none;
}

[data-orientation~="horizontal"] {
    --orientation-direction: row;
    --orientation-spacing: 0 0 0 var(--spacing-x);

    --orientation-flex-alignment-x: var(--flex-alignment-y);
    --orientation-flex-alignment-y: var(--flex-alignment-x);
}

[data-orientation~="vertical"] {
    --orientation-direction: column;
    --orientation-spacing: var(--spacing-y) 0 0 0;

    --orientation-flex-alignment-x: var(--flex-alignment-x);
    --orientation-flex-alignment-y: var(--flex-alignment-y);
}

@media (max-width: 639.9px) {
  [data-orientation~="mobile:horizontal"] {
    --orientation-direction: row;
    --orientation-spacing: 0 0 0 var(--spacing-x);
    --orientation-flex-alignment-x: var(--flex-alignment-y);
    --orientation-flex-alignment-y: var(--flex-alignment-x);
  }
  [data-orientation~="mobile:vertical"] {
    --orientation-direction: column;
    --orientation-spacing: var(--spacing-y) 0 0 0;
    --orientation-flex-alignment-x: var(--flex-alignment-x);
    --orientation-flex-alignment-y: var(--flex-alignment-y);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-orientation~="tablet:horizontal"] {
    --orientation-direction: row;
    --orientation-spacing: 0 0 0 var(--spacing-x);
    --orientation-flex-alignment-x: var(--flex-alignment-y);
    --orientation-flex-alignment-y: var(--flex-alignment-x);
  }
  [data-orientation~="tablet:vertical"] {
    --orientation-direction: column;
    --orientation-spacing: var(--spacing-y) 0 0 0;
    --orientation-flex-alignment-x: var(--flex-alignment-x);
    --orientation-flex-alignment-y: var(--flex-alignment-y);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-orientation~="desktop:horizontal"] {
    --orientation-direction: row;
    --orientation-spacing: 0 0 0 var(--spacing-x);
    --orientation-flex-alignment-x: var(--flex-alignment-y);
    --orientation-flex-alignment-y: var(--flex-alignment-x);
  }
  [data-orientation~="desktop:vertical"] {
    --orientation-direction: column;
    --orientation-spacing: var(--spacing-y) 0 0 0;
    --orientation-flex-alignment-x: var(--flex-alignment-x);
    --orientation-flex-alignment-y: var(--flex-alignment-y);
  }
}

@media (min-width: 1024px) {
  [data-orientation~="widescreen:horizontal"] {
    --orientation-direction: row;
    --orientation-spacing: 0 0 0 var(--spacing-x);
    --orientation-flex-alignment-x: var(--flex-alignment-y);
    --orientation-flex-alignment-y: var(--flex-alignment-x);
  }
  [data-orientation~="widescreen:vertical"] {
    --orientation-direction: column;
    --orientation-spacing: var(--spacing-y) 0 0 0;
    --orientation-flex-alignment-x: var(--flex-alignment-x);
    --orientation-flex-alignment-y: var(--flex-alignment-y);
  }
}

:root,
[data-palette="auto"] {
    --palette-background-lightest: var(--palette-auto-lightest);
    --palette-background-light: var(--palette-auto-light);
    --palette-background-normal: var(--palette-auto-normal);
    --palette-background-bold: var(--palette-auto-bold);
    --palette-background-boldest: var(--palette-auto-boldest);

    --palette-foreground-lightest: var(--palette-inverse-lightest);
    --palette-foreground-light: var(--palette-inverse-light);
    --palette-foreground-normal: var(--palette-inverse-normal);
    --palette-foreground-bold: var(--palette-inverse-bold);
    --palette-foreground-boldest: var(--palette-inverse-boldest);
}

[data-palette="inverse"] {
    --palette-background-lightest: var(--palette-inverse-lightest);
    --palette-background-light: var(--palette-inverse-light);
    --palette-background-normal: var(--palette-inverse-normal);
    --palette-background-bold: var(--palette-inverse-bold);
    --palette-background-boldest: var(--palette-inverse-boldest);

    --palette-foreground-lightest: var(--palette-auto-lightest);
    --palette-foreground-light: var(--palette-auto-light);
    --palette-foreground-normal: var(--palette-auto-normal);
    --palette-foreground-bold: var(--palette-auto-bold);
    --palette-foreground-boldest: var(--palette-auto-boldest);
}

[data-palette="inherit"] {
    --palette-background-lightest: inherit;
    --palette-background-light: inherit;
    --palette-background-normal: inherit;
    --palette-background-bold: inherit;
    --palette-background-boldest: inherit;

    --palette-foreground-lightest: inherit;
    --palette-foreground-light: inherit;
    --palette-foreground-normal: inherit;
    --palette-foreground-bold: inherit;
    --palette-foreground-boldest: inherit;
}

[data-palette="accent"] {
    --palette-background-lightest: var(--palette-accent-lightest);
    --palette-background-light: var(--palette-accent-light);
    --palette-background-normal: var(--palette-accent-normal);
    --palette-background-bold: var(--palette-accent-bold);
    --palette-background-boldest: var(--palette-accent-boldest);

    --palette-foreground-lightest: var(--palette-light-lightest);
    --palette-foreground-light: var(--palette-light-light);
    --palette-foreground-normal: var(--palette-light-normal);
    --palette-foreground-bold: var(--palette-light-bold);
    --palette-foreground-boldest: var(--palette-light-boldest);
}

[data-palette="dark"] {
    --palette-background-lightest: var(--palette-dark-lightest);
    --palette-background-light: var(--palette-dark-light);
    --palette-background-normal: var(--palette-dark-normal);
    --palette-background-bold: var(--palette-dark-bold);
    --palette-background-boldest: var(--palette-dark-boldest);

    --palette-foreground-lightest: var(--palette-light-lightest);
    --palette-foreground-light: var(--palette-light-light);
    --palette-foreground-normal: var(--palette-light-normal);
    --palette-foreground-bold: var(--palette-light-bold);
    --palette-foreground-boldest: var(--palette-light-boldest);
}

[data-palette="light"] {
    --palette-background-lightest: var(--palette-light-lightest);
    --palette-background-light: var(--palette-light-light);
    --palette-background-normal: var(--palette-light-normal);
    --palette-background-bold: var(--palette-light-bold);
    --palette-background-boldest: var(--palette-light-boldest);

    --palette-foreground-lightest: var(--palette-dark-lightest);
    --palette-foreground-light: var(--palette-dark-light);
    --palette-foreground-normal: var(--palette-dark-normal);
    --palette-foreground-bold: var(--palette-dark-bold);
    --palette-foreground-boldest: var(--palette-dark-boldest);
}

[data-palette="alert"] {
    --palette-background-lightest: var(--palette-alert-lightest);
    --palette-background-light: var(--palette-alert-light);
    --palette-background-normal: var(--palette-alert-normal);
    --palette-background-bold: var(--palette-alert-bold);
    --palette-background-boldest: var(--palette-alert-boldest);

    --palette-foreground-lightest: var(--palette-light-lightest);
    --palette-foreground-light: var(--palette-light-light);
    --palette-foreground-normal: var(--palette-light-normal);
    --palette-foreground-bold: var(--palette-light-bold);
    --palette-foreground-boldest: var(--palette-light-boldest);
}

[data-palette="affirmative"] {
    --palette-background-lightest: var(--palette-affirmative-lightest);
    --palette-background-light: var(--palette-affirmative-light);
    --palette-background-normal: var(--palette-affirmative-normal);
    --palette-background-bold: var(--palette-affirmative-bold);
    --palette-background-boldest: var(--palette-affirmative-boldest);

    --palette-foreground-lightest: var(--palette-light-lightest);
    --palette-foreground-light: var(--palette-light-light);
    --palette-foreground-normal: var(--palette-light-normal);
    --palette-foreground-bold: var(--palette-light-bold);
    --palette-foreground-boldest: var(--palette-light-boldest);
}

[data-palette="negative"] {
    --palette-background-lightest: var(--palette-negative-lightest);
    --palette-background-light: var(--palette-negative-light);
    --palette-background-normal: var(--palette-negative-normal);
    --palette-background-bold: var(--palette-negative-bold);
    --palette-background-boldest: var(--palette-negative-boldest);

    --palette-foreground-lightest: var(--palette-light-lightest);
    --palette-foreground-light: var(--palette-light-light);
    --palette-foreground-normal: var(--palette-light-normal);
    --palette-foreground-bold: var(--palette-light-bold);
    --palette-foreground-boldest: var(--palette-light-boldest);
}

[data-placement="top"] {
    --placement-orientation: column;

    --placement-alignment-x: var(--flex-alignment-y, stretch);
    --placement-alignment-y: var(--flex-alignment-x, stretch);

    --placement-width: min(100%, 100vw);
    --placement-height: max-content;

    --placement-inset: calc(0% - var(--spacing-y)) 50% auto auto;

    --placement-top: 0%;
    --placement-left: 0%;

    --placement-clip-off: 100% -10% -10% -10%;
    --placement-clip-on: 0% -10% -10% -10%;

    --placement-translation: 50%, -100%;

    --placement-translation-off: 0%, -100%;
    --placement-translation-on: 0%, 0%
}

[data-placement="top"][data-alignment-x="left"] {
        --placement-inset: calc(0% - var(--spacing-y)) 0% auto auto;
        --placement-translation: 0%, -100%;
    }

[data-placement="top"][data-alignment-x="right"] {
        --placement-inset: calc(0% - var(--spacing-y)) auto auto 0%;
        --placement-translation: 0%, -100%;
    }

[data-placement="left"] {
    --placement-orientation: row;

    --placement-alignment-x: var(--flex-alignment-x, stretch);
    --placement-alignment-y: var(--flex-alignment-y, stretch);

    --placement-width: max-content;
    --placement-height: min(100%, 100vh);

    --placement-inset: auto auto 50% calc(0% - var(--spacing-x));

    --placement-top: 0%;
    --placement-left: 0%;

    --placement-clip-off: 0% -10% -10% 100%;
    --placement-clip-on: 0% -10% -10% -10%;

    --placement-translation: -100%, 50%;

    --placement-translation-off: -100%, 0%;
    --placement-translation-on: 0%, 0%
}

[data-placement="left"][data-alignment-y="top"] {
        --placement-inset: auto auto 0% calc(0% - var(--spacing-x));
        --placement-translation: -100%, 0%;
    }

[data-placement="left"][data-alignment-y="bottom"] {
        --placement-inset: 0% auto auto calc(0% - var(--spacing-x));
        --placement-translation: -100%, 0%;
    }

[data-placement="bottom"] {
    --placement-orientation: column;

    --placement-alignment-x: var(--flex-alignment-y, stretch);
    --placement-alignment-y: var(--flex-alignment-x, stretch);

    --placement-width: min(100%, 100vw);
    --placement-height: max-content;

    --placement-inset: auto 50% calc(0% - var(--spacing-y)) auto;

    --placement-top: 100%;
    --placement-left: 0%;

    --placement-clip-off: 0% -10% 100% -10%;
    --placement-clip-on: 0% -10% -10% -10%;

    --placement-translation: 50%, 100%;

    --placement-translation-off: 0%, 0%;
    --placement-translation-on: 0%, -100%
}

[data-placement="bottom"][data-alignment-x="left"] {
        --placement-inset: auto 0% calc(0% - var(--spacing-y)) auto;
        --placement-translation: 0%, 100%;
    }

[data-placement="bottom"][data-alignment-x="right"] {
        --placement-inset: auto auto calc(0% - var(--spacing-y)) 0%;
        --placement-translation: 0%, 100%;
    }

[data-placement="right"] {
    --placement-orientation: row;

    --placement-alignment-x: var(--flex-alignment-x, stretch);
    --placement-alignment-y: var(--flex-alignment-y, stretch);

    --placement-width: max-content;
    --placement-height: min(100%, 100vh);

    --placement-inset: auto calc(0% - var(--spacing-x)) 50% auto;

    --placement-top: 0%;
    --placement-left: 100%;

    --placement-clip-off: 0% 100% -10% -10%;
    --placement-clip-on: 0% -10% -10% -10%;

    --placement-translation: 100%, 50%;

    --placement-translation-off: 0%, 0%;
    --placement-translation-on: -100%, 0%
}

[data-placement="right"][data-alignment-y="top"] {
        --placement-inset: auto calc(0% - var(--spacing-x)) 0% auto;
        --placement-translation: 100%, 0%;
    }

[data-placement="right"][data-alignment-y="bottom"] {
        --placement-inset: 0% calc(0% - var(--spacing-x)) auto auto;
        --placement-translation: 100%, 0%;
    }

[data-position="floated"] {
  position: absolute;
  right: 0px;
  top: 0px;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
}

[data-position="raised"] {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-y: -50%;
}

[data-resizable]:not([data-resizable="x"], [data-resizable="y"]) {
    resize: both;
}

[data-resizable="x"] {
    resize: horizontal;
}

[data-resizable="y"] {
    resize: vertical;
}

[data-size="tiny"] {
    --size-embedded: var(--sizes-embedded-tiny);
    --size-icon: var(--sizes-icon-tiny);

    --size-headline-size: var(--font-headline-size-small);
    --size-headline-line-height: var(--font-headline-line-height-small);

    --size-text-size: var(--font-content-size-nano);
    --size-text-line-height: var(--font-content-line-height-nano);
}

[data-size="small"] {
    --size-embedded: var(--sizes-embedded-small);
    --size-icon: var(--sizes-icon-small);

    --size-headline-size: var(--font-headline-size-medium);
    --size-headline-line-height: var(--font-headline-line-height-medium);

    --size-text-size: var(--font-content-size-tiny);
    --size-text-line-height: var(--font-content-line-height-tiny);
}

[data-size="medium"] {
    --size-embedded: var(--sizes-embedded-medium);
    --size-icon: var(--sizes-icon-medium);

    --size-headline-size: var(--font-headline-size-large);
    --size-headline-line-height: var(--font-headline-line-height-large);

    --size-text-size: var(--font-content-size-small);
    --size-text-line-height: var(--font-content-line-height-small);
}

[data-size="large"] {
    --size-embedded: var(--sizes-embedded-large);
    --size-icon: var(--sizes-icon-large);

    --size-headline-size: var(--font-headline-size-huge);
    --size-headline-line-height: var(--font-headline-line-height-huge);

    --size-text-size: var(--font-content-size-medium);
    --size-text-line-height: var(--font-content-line-height-medium);
}

[data-size="huge"] {
    --size-embedded: var(--sizes-embedded-huge);
    --size-icon: var(--sizes-icon-huge);

    --size-headline-size: var(--font-headline-size-massive);
    --size-headline-line-height: var(--font-headline-line-height-massive);

    --size-text-size: var(--font-content-size-large);
    --size-text-line-height: var(--font-content-line-height-large);
}

/** GLOBAL WIDTH */

[data-width~="auto"] {
  width: auto !important;
}

[data-width~="content-fit"] {
  width: -moz-fit-content !important;
  width: fit-content;
}

[data-width~="content-max"] {
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
}

[data-width~="content-min"] {
  width: -webkit-min-content !important;
  width: -moz-min-content !important;
  width: min-content !important;
}

[data-width~="prose"] {
  width: var(--sizes-prose) !important;
}

[data-width~="stretch"] {
  width: -moz-available !important;
  width: -webkit-fill-available;
  width: stretch;
}

[data-width~="0"] {
  width: 0px !important;
}

[data-width~="25"] {
  width: 25% !important;
}

[data-width~="viewport-25"] {
  width: 25vw !important;
}

[data-width~="33"] {
  width: 33% !important;
}

[data-width~="viewport-33"] {
  width: 33vw !important;
}

[data-width~="50"] {
  width: 50% !important;
}

[data-width~="viewport-50"] {
  width: 50vw !important;
}

[data-width~="66"] {
  width: 66% !important;
}

[data-width~="viewport-66"] {
  width: 66vw !important;
}

[data-width~="75"] {
  width: 75% !important;
}

[data-width~="viewport-75"] {
  width: 75vw !important;
}

[data-width~="100"] {
  width: 100% !important;
}

[data-width~="viewport-100"] {
  width: 100vw !important;
}

@media (max-width: 639.9px) {
  [data-width~="mobile:auto"] {
    width: auto !important;
  }
  [data-width~="mobile:content-fit"] {
    width: -moz-fit-content !important;
    width: fit-content;
  }
  [data-width~="mobile:content-max"] {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
  [data-width~="mobile:content-min"] {
    width: -webkit-min-content !important;
    width: -moz-min-content !important;
    width: min-content !important;
  }
  [data-width~="mobile:prose"] {
    width: var(--sizes-prose) !important;
  }
  [data-width~="mobile:stretch"] {
    width: -moz-available !important;
    width: -webkit-fill-available;
    width: stretch;
  }
  [data-width~="mobile:0"] {
    width: 0px !important;
  }
  [data-width~="mobile:25"] {
    width: 25% !important;
  }
  [data-width~="mobile:viewport-25"] {
    width: 25vw !important;
  }
  [data-width~="mobile:33"] {
    width: 33% !important;
  }
  [data-width~="mobile:viewport-33"] {
    width: 33vw !important;
  }
  [data-width~="mobile:50"] {
    width: 50% !important;
  }
  [data-width~="mobile:viewport-50"] {
    width: 50vw !important;
  }
  [data-width~="mobile:66"] {
    width: 66% !important;
  }
  [data-width~="mobile:viewport-66"] {
    width: 66vw !important;
  }
  [data-width~="mobile:75"] {
    width: 75% !important;
  }
  [data-width~="mobile:viewport-75"] {
    width: 75vw !important;
  }
  [data-width~="mobile:100"] {
    width: 100% !important;
  }
  [data-width~="mobile:viewport-100"] {
    width: 100vw !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-width~="tablet:auto"] {
    width: auto !important;
  }
  [data-width~="tablet:content-fit"] {
    width: -moz-fit-content !important;
    width: fit-content;
  }
  [data-width~="tablet:content-max"] {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
  [data-width~="tablet:content-min"] {
    width: -webkit-min-content !important;
    width: -moz-min-content !important;
    width: min-content !important;
  }
  [data-width~="tablet:prose"] {
    width: var(--sizes-prose) !important;
  }
  [data-width~="tablet:stretch"] {
    width: -moz-available !important;
    width: -webkit-fill-available;
    width: stretch;
  }
  [data-width~="tablet:0"] {
    width: 0px !important;
  }
  [data-width~="tablet:25"] {
    width: 25% !important;
  }
  [data-width~="tablet:viewport-25"] {
    width: 25vw !important;
  }
  [data-width~="tablet:33"] {
    width: 33% !important;
  }
  [data-width~="tablet:viewport-33"] {
    width: 33vw !important;
  }
  [data-width~="tablet:50"] {
    width: 50% !important;
  }
  [data-width~="tablet:viewport-50"] {
    width: 50vw !important;
  }
  [data-width~="tablet:66"] {
    width: 66% !important;
  }
  [data-width~="tablet:viewport-66"] {
    width: 66vw !important;
  }
  [data-width~="tablet:75"] {
    width: 75% !important;
  }
  [data-width~="tablet:viewport-75"] {
    width: 75vw !important;
  }
  [data-width~="tablet:100"] {
    width: 100% !important;
  }
  [data-width~="tablet:viewport-100"] {
    width: 100vw !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-width~="desktop:auto"] {
    width: auto !important;
  }
  [data-width~="desktop:content-fit"] {
    width: -moz-fit-content !important;
    width: fit-content;
  }
  [data-width~="desktop:content-max"] {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
  [data-width~="desktop:content-min"] {
    width: -webkit-min-content !important;
    width: -moz-min-content !important;
    width: min-content !important;
  }
  [data-width~="desktop:prose"] {
    width: var(--sizes-prose) !important;
  }
  [data-width~="desktop:stretch"] {
    width: -moz-available !important;
    width: -webkit-fill-available;
    width: stretch;
  }
  [data-width~="desktop:0"] {
    width: 0px !important;
  }
  [data-width~="desktop:25"] {
    width: 25% !important;
  }
  [data-width~="desktop:viewport-25"] {
    width: 25vw !important;
  }
  [data-width~="desktop:33"] {
    width: 33% !important;
  }
  [data-width~="desktop:viewport-33"] {
    width: 33vw !important;
  }
  [data-width~="desktop:50"] {
    width: 50% !important;
  }
  [data-width~="desktop:viewport-50"] {
    width: 50vw !important;
  }
  [data-width~="desktop:66"] {
    width: 66% !important;
  }
  [data-width~="desktop:viewport-66"] {
    width: 66vw !important;
  }
  [data-width~="desktop:75"] {
    width: 75% !important;
  }
  [data-width~="desktop:viewport-75"] {
    width: 75vw !important;
  }
  [data-width~="desktop:100"] {
    width: 100% !important;
  }
  [data-width~="desktop:viewport-100"] {
    width: 100vw !important;
  }
}

@media (min-width: 1024px) {
  [data-width~="widescreen:auto"] {
    width: auto !important;
  }
  [data-width~="widescreen:content-fit"] {
    width: -moz-fit-content !important;
    width: fit-content;
  }
  [data-width~="widescreen:content-max"] {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
  }
  [data-width~="widescreen:content-min"] {
    width: -webkit-min-content !important;
    width: -moz-min-content !important;
    width: min-content !important;
  }
  [data-width~="widescreen:prose"] {
    width: var(--sizes-prose) !important;
  }
  [data-width~="widescreen:stretch"] {
    width: -moz-available !important;
    width: -webkit-fill-available;
    width: stretch;
  }
  [data-width~="widescreen:0"] {
    width: 0px !important;
  }
  [data-width~="widescreen:25"] {
    width: 25% !important;
  }
  [data-width~="widescreen:viewport-25"] {
    width: 25vw !important;
  }
  [data-width~="widescreen:33"] {
    width: 33% !important;
  }
  [data-width~="widescreen:viewport-33"] {
    width: 33vw !important;
  }
  [data-width~="widescreen:50"] {
    width: 50% !important;
  }
  [data-width~="widescreen:viewport-50"] {
    width: 50vw !important;
  }
  [data-width~="widescreen:66"] {
    width: 66% !important;
  }
  [data-width~="widescreen:viewport-66"] {
    width: 66vw !important;
  }
  [data-width~="widescreen:75"] {
    width: 75% !important;
  }
  [data-width~="widescreen:viewport-75"] {
    width: 75vw !important;
  }
  [data-width~="widescreen:100"] {
    width: 100% !important;
  }
  [data-width~="widescreen:viewport-100"] {
    width: 100vw !important;
  }
}

[data-max-width~="content-fit"] {
  max-width: -moz-fit-content !important;
  max-width: fit-content !important;
}

[data-max-width~="content-max"] {
  max-width: -webkit-max-content !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
}

[data-max-width~="content-min"] {
  max-width: -webkit-min-content !important;
  max-width: -moz-min-content !important;
  max-width: min-content !important;
}

[data-max-width~="prose"] {
  max-width: var(--sizes-prose) !important;
}

[data-max-width~="stretch"] {
  max-width: -moz-available !important;
  max-width: -webkit-fill-available !important;
  max-width: stretch !important;
}

[data-max-width~="0"] {
  max-width: 0px !important;
}

[data-max-width~="25"] {
  max-width: 25% !important;
}

[data-max-width~="viewport-25"] {
  max-width: 25vw !important;
}

[data-max-width~="33"] {
  max-width: 33% !important;
}

[data-max-width~="viewport-33"] {
  max-width: 33vw !important;
}

[data-max-width~="50"] {
  max-width: 50% !important;
}

[data-max-width~="viewport-50"] {
  max-width: 50vw !important;
}

[data-max-width~="66"] {
  max-width: 66% !important;
}

[data-max-width~="viewport-66"] {
  max-width: 66vw !important;
}

[data-max-width~="75"] {
  max-width: 75% !important;
}

[data-max-width~="viewport-75"] {
  max-width: 75vw !important;
}

[data-max-width~="100"] {
  max-width: 100% !important;
}

[data-max-width~="viewport-100"] {
  max-width: 100vw !important;
}

@media (max-width: 639.9px) {
  [data-max-width~="mobile:content-fit"] {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
  [data-max-width~="mobile:content-max"] {
    max-width: -webkit-max-content !important;
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  [data-max-width~="mobile:content-min"] {
    max-width: -webkit-min-content !important;
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  [data-max-width~="mobile:prose"] {
    max-width: var(--sizes-prose) !important;
  }
  [data-max-width~="mobile:stretch"] {
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    max-width: stretch !important;
  }
  [data-max-width~="mobile:0"] {
    max-width: 0px !important;
  }
  [data-max-width~="mobile:25"] {
    max-width: 25% !important;
  }
  [data-max-width~="mobile:viewport-25"] {
    max-width: 25vw !important;
  }
  [data-max-width~="mobile:33"] {
    max-width: 33% !important;
  }
  [data-max-width~="mobile:viewport-33"] {
    max-width: 33vw !important;
  }
  [data-max-width~="mobile:50"] {
    max-width: 50% !important;
  }
  [data-max-width~="mobile:viewport-50"] {
    max-width: 50vw !important;
  }
  [data-max-width~="mobile:66"] {
    max-width: 66% !important;
  }
  [data-max-width~="mobile:viewport-66"] {
    max-width: 66vw !important;
  }
  [data-max-width~="mobile:75"] {
    max-width: 75% !important;
  }
  [data-max-width~="mobile:viewport-75"] {
    max-width: 75vw !important;
  }
  [data-max-width~="mobile:100"] {
    max-width: 100% !important;
  }
  [data-max-width~="mobile:viewport-100"] {
    max-width: 100vw !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-max-width~="tablet:content-fit"] {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
  [data-max-width~="tablet:content-max"] {
    max-width: -webkit-max-content !important;
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  [data-max-width~="tablet:content-min"] {
    max-width: -webkit-min-content !important;
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  [data-max-width~="tablet:prose"] {
    max-width: var(--sizes-prose) !important;
  }
  [data-max-width~="tablet:stretch"] {
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    max-width: stretch !important;
  }
  [data-max-width~="tablet:0"] {
    max-width: 0px !important;
  }
  [data-max-width~="tablet:25"] {
    max-width: 25% !important;
  }
  [data-max-width~="tablet:viewport-25"] {
    max-width: 25vw !important;
  }
  [data-max-width~="tablet:33"] {
    max-width: 33% !important;
  }
  [data-max-width~="tablet:viewport-33"] {
    max-width: 33vw !important;
  }
  [data-max-width~="tablet:50"] {
    max-width: 50% !important;
  }
  [data-max-width~="tablet:viewport-50"] {
    max-width: 50vw !important;
  }
  [data-max-width~="tablet:66"] {
    max-width: 66% !important;
  }
  [data-max-width~="tablet:viewport-66"] {
    max-width: 66vw !important;
  }
  [data-max-width~="tablet:75"] {
    max-width: 75% !important;
  }
  [data-max-width~="tablet:viewport-75"] {
    max-width: 75vw !important;
  }
  [data-max-width~="tablet:100"] {
    max-width: 100% !important;
  }
  [data-max-width~="tablet:viewport-100"] {
    max-width: 100vw !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-max-width~="desktop:content-fit"] {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
  [data-max-width~="desktop:content-max"] {
    max-width: -webkit-max-content !important;
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  [data-max-width~="desktop:content-min"] {
    max-width: -webkit-min-content !important;
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  [data-max-width~="desktop:prose"] {
    max-width: var(--sizes-prose) !important;
  }
  [data-max-width~="desktop:stretch"] {
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    max-width: stretch !important;
  }
  [data-max-width~="desktop:0"] {
    max-width: 0px !important;
  }
  [data-max-width~="desktop:25"] {
    max-width: 25% !important;
  }
  [data-max-width~="desktop:viewport-25"] {
    max-width: 25vw !important;
  }
  [data-max-width~="desktop:33"] {
    max-width: 33% !important;
  }
  [data-max-width~="desktop:viewport-33"] {
    max-width: 33vw !important;
  }
  [data-max-width~="desktop:50"] {
    max-width: 50% !important;
  }
  [data-max-width~="desktop:viewport-50"] {
    max-width: 50vw !important;
  }
  [data-max-width~="desktop:66"] {
    max-width: 66% !important;
  }
  [data-max-width~="desktop:viewport-66"] {
    max-width: 66vw !important;
  }
  [data-max-width~="desktop:75"] {
    max-width: 75% !important;
  }
  [data-max-width~="desktop:viewport-75"] {
    max-width: 75vw !important;
  }
  [data-max-width~="desktop:100"] {
    max-width: 100% !important;
  }
  [data-max-width~="desktop:viewport-100"] {
    max-width: 100vw !important;
  }
}

@media (min-width: 1024px) {
  [data-max-width~="widescreen:content-fit"] {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
  [data-max-width~="widescreen:content-max"] {
    max-width: -webkit-max-content !important;
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  [data-max-width~="widescreen:content-min"] {
    max-width: -webkit-min-content !important;
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  [data-max-width~="widescreen:prose"] {
    max-width: var(--sizes-prose) !important;
  }
  [data-max-width~="widescreen:stretch"] {
    max-width: -moz-available !important;
    max-width: -webkit-fill-available !important;
    max-width: stretch !important;
  }
  [data-max-width~="widescreen:0"] {
    max-width: 0px !important;
  }
  [data-max-width~="widescreen:25"] {
    max-width: 25% !important;
  }
  [data-max-width~="widescreen:viewport-25"] {
    max-width: 25vw !important;
  }
  [data-max-width~="widescreen:33"] {
    max-width: 33% !important;
  }
  [data-max-width~="widescreen:viewport-33"] {
    max-width: 33vw !important;
  }
  [data-max-width~="widescreen:50"] {
    max-width: 50% !important;
  }
  [data-max-width~="widescreen:viewport-50"] {
    max-width: 50vw !important;
  }
  [data-max-width~="widescreen:66"] {
    max-width: 66% !important;
  }
  [data-max-width~="widescreen:viewport-66"] {
    max-width: 66vw !important;
  }
  [data-max-width~="widescreen:75"] {
    max-width: 75% !important;
  }
  [data-max-width~="widescreen:viewport-75"] {
    max-width: 75vw !important;
  }
  [data-max-width~="widescreen:100"] {
    max-width: 100% !important;
  }
  [data-max-width~="widescreen:viewport-100"] {
    max-width: 100vw !important;
  }
}

[data-min-width~="content-fit"] {
  min-width: -moz-fit-content !important;
  min-width: fit-content !important;
}

[data-min-width~="content-max"] {
  min-width: -webkit-max-content !important;
  min-width: -moz-max-content !important;
  min-width: max-content !important;
}

[data-min-width~="content-min"] {
  min-width: -webkit-min-content !important;
  min-width: -moz-min-content !important;
  min-width: min-content !important;
}

[data-min-width~="prose"] {
  min-width: var(--sizes-prose) !important;
}

[data-min-width~="stretch"] {
  min-width: -moz-available !important;
  min-width: -webkit-fill-available !important;
  min-width: stretch !important;
}

[data-min-width~="0"] {
  min-width: 0px !important;
}

[data-min-width~="25"] {
  min-width: 25% !important;
}

[data-min-width~="viewport-25"] {
  min-width: 25vw !important;
}

[data-min-width~="33"] {
  min-width: 33% !important;
}

[data-min-width~="viewport-33"] {
  min-width: 33vw !important;
}

[data-min-width~="50"] {
  min-width: 50% !important;
}

[data-min-width~="viewport-50"] {
  min-width: 50vw !important;
}

[data-min-width~="66"] {
  min-width: 66% !important;
}

[data-min-width~="viewport-66"] {
  min-width: 66vw !important;
}

[data-min-width~="75"] {
  min-width: 75% !important;
}

[data-min-width~="viewport-75"] {
  min-width: 75vw !important;
}

[data-min-width~="100"] {
  min-width: 100% !important;
}

[data-min-width~="viewport-100"] {
  min-width: 100vw !important;
}

@media (max-width: 639.9px) {
  [data-min-width~="mobile:content-fit"] {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  [data-min-width~="mobile:content-max"] {
    min-width: -webkit-max-content !important;
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  [data-min-width~="mobile:content-min"] {
    min-width: -webkit-min-content !important;
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  [data-min-width~="mobile:prose"] {
    min-width: var(--sizes-prose) !important;
  }
  [data-min-width~="mobile:stretch"] {
    min-width: -moz-available !important;
    min-width: -webkit-fill-available !important;
    min-width: stretch !important;
  }
  [data-min-width~="mobile:0"] {
    min-width: 0px !important;
  }
  [data-min-width~="mobile:25"] {
    min-width: 25% !important;
  }
  [data-min-width~="mobile:viewport-25"] {
    min-width: 25vw !important;
  }
  [data-min-width~="mobile:33"] {
    min-width: 33% !important;
  }
  [data-min-width~="mobile:viewport-33"] {
    min-width: 33vw !important;
  }
  [data-min-width~="mobile:50"] {
    min-width: 50% !important;
  }
  [data-min-width~="mobile:viewport-50"] {
    min-width: 50vw !important;
  }
  [data-min-width~="mobile:66"] {
    min-width: 66% !important;
  }
  [data-min-width~="mobile:viewport-66"] {
    min-width: 66vw !important;
  }
  [data-min-width~="mobile:75"] {
    min-width: 75% !important;
  }
  [data-min-width~="mobile:viewport-75"] {
    min-width: 75vw !important;
  }
  [data-min-width~="mobile:100"] {
    min-width: 100% !important;
  }
  [data-min-width~="mobile:viewport-100"] {
    min-width: 100vw !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-min-width~="tablet:content-fit"] {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  [data-min-width~="tablet:content-max"] {
    min-width: -webkit-max-content !important;
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  [data-min-width~="tablet:content-min"] {
    min-width: -webkit-min-content !important;
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  [data-min-width~="tablet:prose"] {
    min-width: var(--sizes-prose) !important;
  }
  [data-min-width~="tablet:stretch"] {
    min-width: -moz-available !important;
    min-width: -webkit-fill-available !important;
    min-width: stretch !important;
  }
  [data-min-width~="tablet:0"] {
    min-width: 0px !important;
  }
  [data-min-width~="tablet:25"] {
    min-width: 25% !important;
  }
  [data-min-width~="tablet:viewport-25"] {
    min-width: 25vw !important;
  }
  [data-min-width~="tablet:33"] {
    min-width: 33% !important;
  }
  [data-min-width~="tablet:viewport-33"] {
    min-width: 33vw !important;
  }
  [data-min-width~="tablet:50"] {
    min-width: 50% !important;
  }
  [data-min-width~="tablet:viewport-50"] {
    min-width: 50vw !important;
  }
  [data-min-width~="tablet:66"] {
    min-width: 66% !important;
  }
  [data-min-width~="tablet:viewport-66"] {
    min-width: 66vw !important;
  }
  [data-min-width~="tablet:75"] {
    min-width: 75% !important;
  }
  [data-min-width~="tablet:viewport-75"] {
    min-width: 75vw !important;
  }
  [data-min-width~="tablet:100"] {
    min-width: 100% !important;
  }
  [data-min-width~="tablet:viewport-100"] {
    min-width: 100vw !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-min-width~="desktop:content-fit"] {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  [data-min-width~="desktop:content-max"] {
    min-width: -webkit-max-content !important;
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  [data-min-width~="desktop:content-min"] {
    min-width: -webkit-min-content !important;
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  [data-min-width~="desktop:prose"] {
    min-width: var(--sizes-prose) !important;
  }
  [data-min-width~="desktop:stretch"] {
    min-width: -moz-available !important;
    min-width: -webkit-fill-available !important;
    min-width: stretch !important;
  }
  [data-min-width~="desktop:0"] {
    min-width: 0px !important;
  }
  [data-min-width~="desktop:25"] {
    min-width: 25% !important;
  }
  [data-min-width~="desktop:viewport-25"] {
    min-width: 25vw !important;
  }
  [data-min-width~="desktop:33"] {
    min-width: 33% !important;
  }
  [data-min-width~="desktop:viewport-33"] {
    min-width: 33vw !important;
  }
  [data-min-width~="desktop:50"] {
    min-width: 50% !important;
  }
  [data-min-width~="desktop:viewport-50"] {
    min-width: 50vw !important;
  }
  [data-min-width~="desktop:66"] {
    min-width: 66% !important;
  }
  [data-min-width~="desktop:viewport-66"] {
    min-width: 66vw !important;
  }
  [data-min-width~="desktop:75"] {
    min-width: 75% !important;
  }
  [data-min-width~="desktop:viewport-75"] {
    min-width: 75vw !important;
  }
  [data-min-width~="desktop:100"] {
    min-width: 100% !important;
  }
  [data-min-width~="desktop:viewport-100"] {
    min-width: 100vw !important;
  }
}

@media (min-width: 1024px) {
  [data-min-width~="widescreen:content-fit"] {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  [data-min-width~="widescreen:content-max"] {
    min-width: -webkit-max-content !important;
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  [data-min-width~="widescreen:content-min"] {
    min-width: -webkit-min-content !important;
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  [data-min-width~="widescreen:prose"] {
    min-width: var(--sizes-prose) !important;
  }
  [data-min-width~="widescreen:stretch"] {
    min-width: -moz-available !important;
    min-width: -webkit-fill-available !important;
    min-width: stretch !important;
  }
  [data-min-width~="widescreen:0"] {
    min-width: 0px !important;
  }
  [data-min-width~="widescreen:25"] {
    min-width: 25% !important;
  }
  [data-min-width~="widescreen:viewport-25"] {
    min-width: 25vw !important;
  }
  [data-min-width~="widescreen:33"] {
    min-width: 33% !important;
  }
  [data-min-width~="widescreen:viewport-33"] {
    min-width: 33vw !important;
  }
  [data-min-width~="widescreen:50"] {
    min-width: 50% !important;
  }
  [data-min-width~="widescreen:viewport-50"] {
    min-width: 50vw !important;
  }
  [data-min-width~="widescreen:66"] {
    min-width: 66% !important;
  }
  [data-min-width~="widescreen:viewport-66"] {
    min-width: 66vw !important;
  }
  [data-min-width~="widescreen:75"] {
    min-width: 75% !important;
  }
  [data-min-width~="widescreen:viewport-75"] {
    min-width: 75vw !important;
  }
  [data-min-width~="widescreen:100"] {
    min-width: 100% !important;
  }
  [data-min-width~="widescreen:viewport-100"] {
    min-width: 100vw !important;
  }
}

/** GLOBAL HEIGHT */

[data-height~="auto"] {
  height: auto !important;
}

[data-height~="content-fit"] {
  height: -moz-fit-content !important;
  height: fit-content !important;
}

[data-height~="content-max"] {
  height: -webkit-max-content !important;
  height: -moz-max-content !important;
  height: max-content !important;
}

[data-height~="content-min"] {
  height: -webkit-min-content !important;
  height: -moz-min-content !important;
  height: min-content !important;
}

[data-height~="prose"] {
  height: var(--sizes-prose) !important;
}

[data-height~="stretch"] {
  height: -moz-available !important;
  height: -webkit-fill-available !important;
  height: stretch !important;
}

[data-height~="0"] {
  height: 0px !important;
}

[data-height~="25"] {
  height: 25% !important;
}

[data-height~="viewport-25"] {
  height: 25vh !important;
}

[data-height~="33"] {
  height: 33% !important;
}

[data-height~="viewport-33"] {
  height: 33vh !important;
}

[data-height~="50"] {
  height: 50% !important;
}

[data-height~="viewport-50"] {
  height: 50vh !important;
}

[data-height~="66"] {
  height: 66% !important;
}

[data-height~="viewport-66"] {
  height: 66vh !important;
}

[data-height~="75"] {
  height: 75% !important;
}

[data-height~="viewport-75"] {
  height: 75vh !important;
}

[data-height~="100"] {
  height: 100% !important;
}

[data-height~="viewport-100"] {
  height: 100vh !important;
}

@media (max-width: 639.9px) {
  [data-height~="mobile:auto"] {
    height: auto !important;
  }
  [data-height~="mobile:content-fit"] {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  [data-height~="mobile:content-max"] {
    height: -webkit-max-content !important;
    height: -moz-max-content !important;
    height: max-content !important;
  }
  [data-height~="mobile:content-min"] {
    height: -webkit-min-content !important;
    height: -moz-min-content !important;
    height: min-content !important;
  }
  [data-height~="mobile:prose"] {
    height: var(--sizes-prose) !important;
  }
  [data-height~="mobile:stretch"] {
    height: -moz-available !important;
    height: -webkit-fill-available !important;
    height: stretch !important;
  }
  [data-height~="mobile:0"] {
    height: 0px !important;
  }
  [data-height~="mobile:25"] {
    height: 25% !important;
  }
  [data-height~="mobile:viewport-25"] {
    height: 25vh !important;
  }
  [data-height~="mobile:33"] {
    height: 33% !important;
  }
  [data-height~="mobile:viewport-33"] {
    height: 33vh !important;
  }
  [data-height~="mobile:50"] {
    height: 50% !important;
  }
  [data-height~="mobile:viewport-50"] {
    height: 50vh !important;
  }
  [data-height~="mobile:66"] {
    height: 66% !important;
  }
  [data-height~="mobile:viewport-66"] {
    height: 66vh !important;
  }
  [data-height~="mobile:75"] {
    height: 75% !important;
  }
  [data-height~="mobile:viewport-75"] {
    height: 75vh !important;
  }
  [data-height~="mobile:100"] {
    height: 100% !important;
  }
  [data-height~="mobile:viewport-100"] {
    height: 100vh !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-height~="tablet:auto"] {
    height: auto !important;
  }
  [data-height~="tablet:content-fit"] {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  [data-height~="tablet:content-max"] {
    height: -webkit-max-content !important;
    height: -moz-max-content !important;
    height: max-content !important;
  }
  [data-height~="tablet:content-min"] {
    height: -webkit-min-content !important;
    height: -moz-min-content !important;
    height: min-content !important;
  }
  [data-height~="tablet:prose"] {
    height: var(--sizes-prose) !important;
  }
  [data-height~="tablet:stretch"] {
    height: -moz-available !important;
    height: -webkit-fill-available !important;
    height: stretch !important;
  }
  [data-height~="tablet:0"] {
    height: 0px !important;
  }
  [data-height~="tablet:25"] {
    height: 25% !important;
  }
  [data-height~="tablet:viewport-25"] {
    height: 25vh !important;
  }
  [data-height~="tablet:33"] {
    height: 33% !important;
  }
  [data-height~="tablet:viewport-33"] {
    height: 33vh !important;
  }
  [data-height~="tablet:50"] {
    height: 50% !important;
  }
  [data-height~="tablet:viewport-50"] {
    height: 50vh !important;
  }
  [data-height~="tablet:66"] {
    height: 66% !important;
  }
  [data-height~="tablet:viewport-66"] {
    height: 66vh !important;
  }
  [data-height~="tablet:75"] {
    height: 75% !important;
  }
  [data-height~="tablet:viewport-75"] {
    height: 75vh !important;
  }
  [data-height~="tablet:100"] {
    height: 100% !important;
  }
  [data-height~="tablet:viewport-100"] {
    height: 100vh !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-height~="desktop:auto"] {
    height: auto !important;
  }
  [data-height~="desktop:content-fit"] {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  [data-height~="desktop:content-max"] {
    height: -webkit-max-content !important;
    height: -moz-max-content !important;
    height: max-content !important;
  }
  [data-height~="desktop:content-min"] {
    height: -webkit-min-content !important;
    height: -moz-min-content !important;
    height: min-content !important;
  }
  [data-height~="desktop:prose"] {
    height: var(--sizes-prose) !important;
  }
  [data-height~="desktop:stretch"] {
    height: -moz-available !important;
    height: -webkit-fill-available !important;
    height: stretch !important;
  }
  [data-height~="desktop:0"] {
    height: 0px !important;
  }
  [data-height~="desktop:25"] {
    height: 25% !important;
  }
  [data-height~="desktop:viewport-25"] {
    height: 25vh !important;
  }
  [data-height~="desktop:33"] {
    height: 33% !important;
  }
  [data-height~="desktop:viewport-33"] {
    height: 33vh !important;
  }
  [data-height~="desktop:50"] {
    height: 50% !important;
  }
  [data-height~="desktop:viewport-50"] {
    height: 50vh !important;
  }
  [data-height~="desktop:66"] {
    height: 66% !important;
  }
  [data-height~="desktop:viewport-66"] {
    height: 66vh !important;
  }
  [data-height~="desktop:75"] {
    height: 75% !important;
  }
  [data-height~="desktop:viewport-75"] {
    height: 75vh !important;
  }
  [data-height~="desktop:100"] {
    height: 100% !important;
  }
  [data-height~="desktop:viewport-100"] {
    height: 100vh !important;
  }
}

@media (min-width: 1024px) {
  [data-height~="widescreen:auto"] {
    height: auto !important;
  }
  [data-height~="widescreen:content-fit"] {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  [data-height~="widescreen:content-max"] {
    height: -webkit-max-content !important;
    height: -moz-max-content !important;
    height: max-content !important;
  }
  [data-height~="widescreen:content-min"] {
    height: -webkit-min-content !important;
    height: -moz-min-content !important;
    height: min-content !important;
  }
  [data-height~="widescreen:prose"] {
    height: var(--sizes-prose) !important;
  }
  [data-height~="widescreen:stretch"] {
    height: -moz-available !important;
    height: -webkit-fill-available !important;
    height: stretch !important;
  }
  [data-height~="widescreen:0"] {
    height: 0px !important;
  }
  [data-height~="widescreen:25"] {
    height: 25% !important;
  }
  [data-height~="widescreen:viewport-25"] {
    height: 25vh !important;
  }
  [data-height~="widescreen:33"] {
    height: 33% !important;
  }
  [data-height~="widescreen:viewport-33"] {
    height: 33vh !important;
  }
  [data-height~="widescreen:50"] {
    height: 50% !important;
  }
  [data-height~="widescreen:viewport-50"] {
    height: 50vh !important;
  }
  [data-height~="widescreen:66"] {
    height: 66% !important;
  }
  [data-height~="widescreen:viewport-66"] {
    height: 66vh !important;
  }
  [data-height~="widescreen:75"] {
    height: 75% !important;
  }
  [data-height~="widescreen:viewport-75"] {
    height: 75vh !important;
  }
  [data-height~="widescreen:100"] {
    height: 100% !important;
  }
  [data-height~="widescreen:viewport-100"] {
    height: 100vh !important;
  }
}

[data-max-height~="content-fit"] {
  max-height: -moz-fit-content !important;
  max-height: fit-content !important;
}

[data-max-height~="content-max"] {
  max-height: -webkit-max-content !important;
  max-height: -moz-max-content !important;
  max-height: max-content !important;
}

[data-max-height~="content-min"] {
  max-height: -webkit-min-content !important;
  max-height: -moz-min-content !important;
  max-height: min-content !important;
}

[data-max-height~="prose"] {
  max-height: var(--sizes-prose) !important;
}

[data-max-height~="stretch"] {
  max-height: -moz-available !important;
  max-height: -webkit-fill-available !important;
  max-height: stretch !important;
}

[data-max-height~="0"] {
  max-height: 0px !important;
}

[data-max-height~="25"] {
  max-height: 25% !important;
}

[data-max-height~="viewport-25"] {
  max-height: 25vh !important;
}

[data-max-height~="33"] {
  max-height: 33% !important;
}

[data-max-height~="viewport-33"] {
  max-height: 33vh !important;
}

[data-max-height~="50"] {
  max-height: 50% !important;
}

[data-max-height~="viewport-50"] {
  max-height: 50vh !important;
}

[data-max-height~="66"] {
  max-height: 66% !important;
}

[data-max-height~="viewport-66"] {
  max-height: 66vh !important;
}

[data-max-height~="75"] {
  max-height: 75% !important;
}

[data-max-height~="viewport-75"] {
  max-height: 75vh !important;
}

[data-max-height~="100"] {
  max-height: 100% !important;
}

[data-max-height~="viewport-100"] {
  max-height: 100vh !important;
}

@media (max-width: 639.9px) {
  [data-max-height~="mobile:content-fit"] {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
  [data-max-height~="mobile:content-max"] {
    max-height: -webkit-max-content !important;
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  [data-max-height~="mobile:content-min"] {
    max-height: -webkit-min-content !important;
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  [data-max-height~="mobile:prose"] {
    max-height: var(--sizes-prose) !important;
  }
  [data-max-height~="mobile:stretch"] {
    max-height: -moz-available !important;
    max-height: -webkit-fill-available !important;
    max-height: stretch !important;
  }
  [data-max-height~="mobile:0"] {
    max-height: 0px !important;
  }
  [data-max-height~="mobile:25"] {
    max-height: 25% !important;
  }
  [data-max-height~="mobile:viewport-25"] {
    max-height: 25vh !important;
  }
  [data-max-height~="mobile:33"] {
    max-height: 33% !important;
  }
  [data-max-height~="mobile:viewport-33"] {
    max-height: 33vh !important;
  }
  [data-max-height~="mobile:50"] {
    max-height: 50% !important;
  }
  [data-max-height~="mobile:viewport-50"] {
    max-height: 50vh !important;
  }
  [data-max-height~="mobile:66"] {
    max-height: 66% !important;
  }
  [data-max-height~="mobile:viewport-66"] {
    max-height: 66vh !important;
  }
  [data-max-height~="mobile:75"] {
    max-height: 75% !important;
  }
  [data-max-height~="mobile:viewport-75"] {
    max-height: 75vh !important;
  }
  [data-max-height~="mobile:100"] {
    max-height: 100% !important;
  }
  [data-max-height~="mobile:viewport-100"] {
    max-height: 100vh !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-max-height~="tablet:content-fit"] {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
  [data-max-height~="tablet:content-max"] {
    max-height: -webkit-max-content !important;
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  [data-max-height~="tablet:content-min"] {
    max-height: -webkit-min-content !important;
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  [data-max-height~="tablet:prose"] {
    max-height: var(--sizes-prose) !important;
  }
  [data-max-height~="tablet:stretch"] {
    max-height: -moz-available !important;
    max-height: -webkit-fill-available !important;
    max-height: stretch !important;
  }
  [data-max-height~="tablet:0"] {
    max-height: 0px !important;
  }
  [data-max-height~="tablet:25"] {
    max-height: 25% !important;
  }
  [data-max-height~="tablet:viewport-25"] {
    max-height: 25vh !important;
  }
  [data-max-height~="tablet:33"] {
    max-height: 33% !important;
  }
  [data-max-height~="tablet:viewport-33"] {
    max-height: 33vh !important;
  }
  [data-max-height~="tablet:50"] {
    max-height: 50% !important;
  }
  [data-max-height~="tablet:viewport-50"] {
    max-height: 50vh !important;
  }
  [data-max-height~="tablet:66"] {
    max-height: 66% !important;
  }
  [data-max-height~="tablet:viewport-66"] {
    max-height: 66vh !important;
  }
  [data-max-height~="tablet:75"] {
    max-height: 75% !important;
  }
  [data-max-height~="tablet:viewport-75"] {
    max-height: 75vh !important;
  }
  [data-max-height~="tablet:100"] {
    max-height: 100% !important;
  }
  [data-max-height~="tablet:viewport-100"] {
    max-height: 100vh !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-max-height~="desktop:content-fit"] {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
  [data-max-height~="desktop:content-max"] {
    max-height: -webkit-max-content !important;
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  [data-max-height~="desktop:content-min"] {
    max-height: -webkit-min-content !important;
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  [data-max-height~="desktop:prose"] {
    max-height: var(--sizes-prose) !important;
  }
  [data-max-height~="desktop:stretch"] {
    max-height: -moz-available !important;
    max-height: -webkit-fill-available !important;
    max-height: stretch !important;
  }
  [data-max-height~="desktop:0"] {
    max-height: 0px !important;
  }
  [data-max-height~="desktop:25"] {
    max-height: 25% !important;
  }
  [data-max-height~="desktop:viewport-25"] {
    max-height: 25vh !important;
  }
  [data-max-height~="desktop:33"] {
    max-height: 33% !important;
  }
  [data-max-height~="desktop:viewport-33"] {
    max-height: 33vh !important;
  }
  [data-max-height~="desktop:50"] {
    max-height: 50% !important;
  }
  [data-max-height~="desktop:viewport-50"] {
    max-height: 50vh !important;
  }
  [data-max-height~="desktop:66"] {
    max-height: 66% !important;
  }
  [data-max-height~="desktop:viewport-66"] {
    max-height: 66vh !important;
  }
  [data-max-height~="desktop:75"] {
    max-height: 75% !important;
  }
  [data-max-height~="desktop:viewport-75"] {
    max-height: 75vh !important;
  }
  [data-max-height~="desktop:100"] {
    max-height: 100% !important;
  }
  [data-max-height~="desktop:viewport-100"] {
    max-height: 100vh !important;
  }
}

@media (min-width: 1024px) {
  [data-max-height~="widescreen:content-fit"] {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
  [data-max-height~="widescreen:content-max"] {
    max-height: -webkit-max-content !important;
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  [data-max-height~="widescreen:content-min"] {
    max-height: -webkit-min-content !important;
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  [data-max-height~="widescreen:prose"] {
    max-height: var(--sizes-prose) !important;
  }
  [data-max-height~="widescreen:stretch"] {
    max-height: -moz-available !important;
    max-height: -webkit-fill-available !important;
    max-height: stretch !important;
  }
  [data-max-height~="widescreen:0"] {
    max-height: 0px !important;
  }
  [data-max-height~="widescreen:25"] {
    max-height: 25% !important;
  }
  [data-max-height~="widescreen:viewport-25"] {
    max-height: 25vh !important;
  }
  [data-max-height~="widescreen:33"] {
    max-height: 33% !important;
  }
  [data-max-height~="widescreen:viewport-33"] {
    max-height: 33vh !important;
  }
  [data-max-height~="widescreen:50"] {
    max-height: 50% !important;
  }
  [data-max-height~="widescreen:viewport-50"] {
    max-height: 50vh !important;
  }
  [data-max-height~="widescreen:66"] {
    max-height: 66% !important;
  }
  [data-max-height~="widescreen:viewport-66"] {
    max-height: 66vh !important;
  }
  [data-max-height~="widescreen:75"] {
    max-height: 75% !important;
  }
  [data-max-height~="widescreen:viewport-75"] {
    max-height: 75vh !important;
  }
  [data-max-height~="widescreen:100"] {
    max-height: 100% !important;
  }
  [data-max-height~="widescreen:viewport-100"] {
    max-height: 100vh !important;
  }
}

[data-min-height~="content-fit"] {
  min-height: -moz-fit-content !important;
  min-height: fit-content !important;
}

[data-min-height~="content-max"] {
  min-height: -webkit-max-content !important;
  min-height: -moz-max-content !important;
  min-height: max-content !important;
}

[data-min-height~="content-min"] {
  min-height: -webkit-min-content !important;
  min-height: -moz-min-content !important;
  min-height: min-content !important;
}

[data-min-height~="prose"] {
  min-height: var(--sizes-prose) !important;
}

[data-min-height~="stretch"] {
  min-height: -moz-available !important;
  min-height: -webkit-fill-available !important;
  min-height: stretch !important;
}

[data-min-height~="0"] {
  min-height: 0px !important;
}

[data-min-height~="25"] {
  min-height: 25% !important;
}

[data-min-height~="viewport-25"] {
  min-height: 25vh !important;
}

[data-min-height~="33"] {
  min-height: 33% !important;
}

[data-min-height~="viewport-33"] {
  min-height: 33vh !important;
}

[data-min-height~="50"] {
  min-height: 50% !important;
}

[data-min-height~="viewport-50"] {
  min-height: 50vh !important;
}

[data-min-height~="66"] {
  min-height: 66% !important;
}

[data-min-height~="viewport-66"] {
  min-height: 66vh !important;
}

[data-min-height~="75"] {
  min-height: 75% !important;
}

[data-min-height~="viewport-75"] {
  min-height: 75vh !important;
}

[data-min-height~="100"] {
  min-height: 100% !important;
}

[data-min-height~="viewport-100"] {
  min-height: 100vh !important;
}

@media (max-width: 639.9px) {
  [data-min-height~="mobile:content-fit"] {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
  [data-min-height~="mobile:content-max"] {
    min-height: -webkit-max-content !important;
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  [data-min-height~="mobile:content-min"] {
    min-height: -webkit-min-content !important;
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  [data-min-height~="mobile:prose"] {
    min-height: var(--sizes-prose) !important;
  }
  [data-min-height~="mobile:stretch"] {
    min-height: -moz-available !important;
    min-height: -webkit-fill-available !important;
    min-height: stretch !important;
  }
  [data-min-height~="mobile:0"] {
    min-height: 0px !important;
  }
  [data-min-height~="mobile:25"] {
    min-height: 25% !important;
  }
  [data-min-height~="mobile:viewport-25"] {
    min-height: 25vh !important;
  }
  [data-min-height~="mobile:33"] {
    min-height: 33% !important;
  }
  [data-min-height~="mobile:viewport-33"] {
    min-height: 33vh !important;
  }
  [data-min-height~="mobile:50"] {
    min-height: 50% !important;
  }
  [data-min-height~="mobile:viewport-50"] {
    min-height: 50vh !important;
  }
  [data-min-height~="mobile:66"] {
    min-height: 66% !important;
  }
  [data-min-height~="mobile:viewport-66"] {
    min-height: 66vh !important;
  }
  [data-min-height~="mobile:75"] {
    min-height: 75% !important;
  }
  [data-min-height~="mobile:viewport-75"] {
    min-height: 75vh !important;
  }
  [data-min-height~="mobile:100"] {
    min-height: 100% !important;
  }
  [data-min-height~="mobile:viewport-100"] {
    min-height: 100vh !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-min-height~="tablet:content-fit"] {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
  [data-min-height~="tablet:content-max"] {
    min-height: -webkit-max-content !important;
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  [data-min-height~="tablet:content-min"] {
    min-height: -webkit-min-content !important;
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  [data-min-height~="tablet:prose"] {
    min-height: var(--sizes-prose) !important;
  }
  [data-min-height~="tablet:stretch"] {
    min-height: -moz-available !important;
    min-height: -webkit-fill-available !important;
    min-height: stretch !important;
  }
  [data-min-height~="tablet:0"] {
    min-height: 0px !important;
  }
  [data-min-height~="tablet:25"] {
    min-height: 25% !important;
  }
  [data-min-height~="tablet:viewport-25"] {
    min-height: 25vh !important;
  }
  [data-min-height~="tablet:33"] {
    min-height: 33% !important;
  }
  [data-min-height~="tablet:viewport-33"] {
    min-height: 33vh !important;
  }
  [data-min-height~="tablet:50"] {
    min-height: 50% !important;
  }
  [data-min-height~="tablet:viewport-50"] {
    min-height: 50vh !important;
  }
  [data-min-height~="tablet:66"] {
    min-height: 66% !important;
  }
  [data-min-height~="tablet:viewport-66"] {
    min-height: 66vh !important;
  }
  [data-min-height~="tablet:75"] {
    min-height: 75% !important;
  }
  [data-min-height~="tablet:viewport-75"] {
    min-height: 75vh !important;
  }
  [data-min-height~="tablet:100"] {
    min-height: 100% !important;
  }
  [data-min-height~="tablet:viewport-100"] {
    min-height: 100vh !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-min-height~="desktop:content-fit"] {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
  [data-min-height~="desktop:content-max"] {
    min-height: -webkit-max-content !important;
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  [data-min-height~="desktop:content-min"] {
    min-height: -webkit-min-content !important;
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  [data-min-height~="desktop:prose"] {
    min-height: var(--sizes-prose) !important;
  }
  [data-min-height~="desktop:stretch"] {
    min-height: -moz-available !important;
    min-height: -webkit-fill-available !important;
    min-height: stretch !important;
  }
  [data-min-height~="desktop:0"] {
    min-height: 0px !important;
  }
  [data-min-height~="desktop:25"] {
    min-height: 25% !important;
  }
  [data-min-height~="desktop:viewport-25"] {
    min-height: 25vh !important;
  }
  [data-min-height~="desktop:33"] {
    min-height: 33% !important;
  }
  [data-min-height~="desktop:viewport-33"] {
    min-height: 33vh !important;
  }
  [data-min-height~="desktop:50"] {
    min-height: 50% !important;
  }
  [data-min-height~="desktop:viewport-50"] {
    min-height: 50vh !important;
  }
  [data-min-height~="desktop:66"] {
    min-height: 66% !important;
  }
  [data-min-height~="desktop:viewport-66"] {
    min-height: 66vh !important;
  }
  [data-min-height~="desktop:75"] {
    min-height: 75% !important;
  }
  [data-min-height~="desktop:viewport-75"] {
    min-height: 75vh !important;
  }
  [data-min-height~="desktop:100"] {
    min-height: 100% !important;
  }
  [data-min-height~="desktop:viewport-100"] {
    min-height: 100vh !important;
  }
}

@media (min-width: 1024px) {
  [data-min-height~="widescreen:content-fit"] {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
  [data-min-height~="widescreen:content-max"] {
    min-height: -webkit-max-content !important;
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  [data-min-height~="widescreen:content-min"] {
    min-height: -webkit-min-content !important;
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  [data-min-height~="widescreen:prose"] {
    min-height: var(--sizes-prose) !important;
  }
  [data-min-height~="widescreen:stretch"] {
    min-height: -moz-available !important;
    min-height: -webkit-fill-available !important;
    min-height: stretch !important;
  }
  [data-min-height~="widescreen:0"] {
    min-height: 0px !important;
  }
  [data-min-height~="widescreen:25"] {
    min-height: 25% !important;
  }
  [data-min-height~="widescreen:viewport-25"] {
    min-height: 25vh !important;
  }
  [data-min-height~="widescreen:33"] {
    min-height: 33% !important;
  }
  [data-min-height~="widescreen:viewport-33"] {
    min-height: 33vh !important;
  }
  [data-min-height~="widescreen:50"] {
    min-height: 50% !important;
  }
  [data-min-height~="widescreen:viewport-50"] {
    min-height: 50vh !important;
  }
  [data-min-height~="widescreen:66"] {
    min-height: 66% !important;
  }
  [data-min-height~="widescreen:viewport-66"] {
    min-height: 66vh !important;
  }
  [data-min-height~="widescreen:75"] {
    min-height: 75% !important;
  }
  [data-min-height~="widescreen:viewport-75"] {
    min-height: 75vh !important;
  }
  [data-min-height~="widescreen:100"] {
    min-height: 100% !important;
  }
  [data-min-height~="widescreen:viewport-100"] {
    min-height: 100vh !important;
  }
}

/** GLOBAL SIZINGS */

[data-sizing~="tiny"] {
    --sizing-content: var(--sizes-content-tiny);

    --sizing-text-size: var(--font-content-size-nano);
    --sizing-text-line-height: var(--font-content-line-height-nano);
}

[data-sizing~="small"] {
    --sizing-content: var(--sizes-content-small);

    --sizing-text-size: var(--font-content-size-tiny);
    --sizing-text-line-height: var(--font-content-line-height-tiny);
}

[data-sizing~="medium"] {
    --sizing-content: var(--sizes-content-medium);

    --sizing-text-size: var(--font-content-size-small);
    --sizing-text-line-height: var(--font-content-line-height-small);
}

[data-sizing~="large"] {
    --sizing-content: var(--sizes-content-large);

    --sizing-text-size: var(--font-content-size-medium);
    --sizing-text-line-height: var(--font-content-line-height-medium);
}

[data-sizing~="huge"] {
    --sizing-content: var(--sizes-content-huge);

    --sizing-text-size: var(--font-content-size-large);
    --sizing-text-line-height: var(--font-content-line-height-large);
}

@media (max-width: 639.9px) {
  [data-sizing~="mobile:tiny"] {
    --sizing-content: var(--sizes-content-tiny);
    --sizing-text-size: var(--font-content-size-tiny);
    --sizing-text-line-height: var(--font-content-line-height-tiny);
  }
  [data-sizing~="mobile:small"] {
    --sizing-content: var(--sizes-content-small);
    --sizing-text-size: var(--font-content-size-small);
    --sizing-text-line-height: var(--font-content-line-height-small);
  }
  [data-sizing~="mobile:medium"] {
    --sizing-content: var(--sizes-content-medium);
    --sizing-text-size: var(--font-content-size-medium);
    --sizing-text-line-height: var(--font-content-line-height-medium);
  }
  [data-sizing~="mobile:large"] {
    --sizing-content: var(--sizes-content-large);
    --sizing-text-size: var(--font-content-size-large);
    --sizing-text-line-height: var(--font-content-line-height-large);
  }
  [data-sizing~="mobile:huge"] {
    --sizing-content: var(--sizes-content-huge);
    --sizing-text-size: var(--font-content-size-huge);
    --sizing-text-line-height: var(--font-content-line-height-huge);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-sizing~="tablet:tiny"] {
    --sizing-content: var(--sizes-content-tiny);
    --sizing-text-size: var(--font-content-size-tiny);
    --sizing-text-line-height: var(--font-content-line-height-tiny);
  }
  [data-sizing~="tablet:small"] {
    --sizing-content: var(--sizes-content-small);
    --sizing-text-size: var(--font-content-size-small);
    --sizing-text-line-height: var(--font-content-line-height-small);
  }
  [data-sizing~="tablet:medium"] {
    --sizing-content: var(--sizes-content-medium);
    --sizing-text-size: var(--font-content-size-medium);
    --sizing-text-line-height: var(--font-content-line-height-medium);
  }
  [data-sizing~="tablet:large"] {
    --sizing-content: var(--sizes-content-large);
    --sizing-text-size: var(--font-content-size-large);
    --sizing-text-line-height: var(--font-content-line-height-large);
  }
  [data-sizing~="tablet:huge"] {
    --sizing-content: var(--sizes-content-huge);
    --sizing-text-size: var(--font-content-size-huge);
    --sizing-text-line-height: var(--font-content-line-height-huge);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-sizing~="desktop:tiny"] {
    --sizing-content: var(--sizes-content-tiny);
    --sizing-text-size: var(--font-content-size-tiny);
    --sizing-text-line-height: var(--font-content-line-height-tiny);
  }
  [data-sizing~="desktop:small"] {
    --sizing-content: var(--sizes-content-small);
    --sizing-text-size: var(--font-content-size-small);
    --sizing-text-line-height: var(--font-content-line-height-small);
  }
  [data-sizing~="desktop:medium"] {
    --sizing-content: var(--sizes-content-medium);
    --sizing-text-size: var(--font-content-size-medium);
    --sizing-text-line-height: var(--font-content-line-height-medium);
  }
  [data-sizing~="desktop:large"] {
    --sizing-content: var(--sizes-content-large);
    --sizing-text-size: var(--font-content-size-large);
    --sizing-text-line-height: var(--font-content-line-height-large);
  }
  [data-sizing~="desktop:huge"] {
    --sizing-content: var(--sizes-content-huge);
    --sizing-text-size: var(--font-content-size-huge);
    --sizing-text-line-height: var(--font-content-line-height-huge);
  }
}

@media (min-width: 1024px) {
  [data-sizing~="widescreen:tiny"] {
    --sizing-content: var(--sizes-content-tiny);
    --sizing-text-size: var(--font-content-size-tiny);
    --sizing-text-line-height: var(--font-content-line-height-tiny);
  }
  [data-sizing~="widescreen:small"] {
    --sizing-content: var(--sizes-content-small);
    --sizing-text-size: var(--font-content-size-small);
    --sizing-text-line-height: var(--font-content-line-height-small);
  }
  [data-sizing~="widescreen:medium"] {
    --sizing-content: var(--sizes-content-medium);
    --sizing-text-size: var(--font-content-size-medium);
    --sizing-text-line-height: var(--font-content-line-height-medium);
  }
  [data-sizing~="widescreen:large"] {
    --sizing-content: var(--sizes-content-large);
    --sizing-text-size: var(--font-content-size-large);
    --sizing-text-line-height: var(--font-content-line-height-large);
  }
  [data-sizing~="widescreen:huge"] {
    --sizing-content: var(--sizes-content-huge);
    --sizing-text-size: var(--font-content-size-huge);
    --sizing-text-line-height: var(--font-content-line-height-huge);
  }
}

/** GLOBAL MARGIN */

[data-margin~="none"] {
  margin: 0px !important;
}

[data-margin~="auto"] {
  margin: auto !important;
}

[data-margin~="tiny"] {
  margin: var(--spacing-root-tiny) !important;
}

[data-margin~="small"] {
  margin: var(--spacing-root-small) !important;
}

[data-margin~="medium"] {
  margin: var(--spacing-root-medium) !important;
}

[data-margin~="large"] {
  margin: var(--spacing-root-large) !important;
}

[data-margin~="huge"] {
  margin: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin~="mobile:none"] {
    margin: 0px !important;
  }
  [data-margin~="mobile:auto"] {
    margin: auto !important;
  }
  [data-margin~="mobile:tiny"] {
    margin: var(--spacing-root-tiny) !important;
  }
  [data-margin~="mobile:small"] {
    margin: var(--spacing-root-small) !important;
  }
  [data-margin~="mobile:medium"] {
    margin: var(--spacing-root-medium) !important;
  }
  [data-margin~="mobile:large"] {
    margin: var(--spacing-root-large) !important;
  }
  [data-margin~="mobile:huge"] {
    margin: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin~="tablet:none"] {
    margin: 0px !important;
  }
  [data-margin~="tablet:auto"] {
    margin: auto !important;
  }
  [data-margin~="tablet:tiny"] {
    margin: var(--spacing-root-tiny) !important;
  }
  [data-margin~="tablet:small"] {
    margin: var(--spacing-root-small) !important;
  }
  [data-margin~="tablet:medium"] {
    margin: var(--spacing-root-medium) !important;
  }
  [data-margin~="tablet:large"] {
    margin: var(--spacing-root-large) !important;
  }
  [data-margin~="tablet:huge"] {
    margin: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin~="desktop:none"] {
    margin: 0px !important;
  }
  [data-margin~="desktop:auto"] {
    margin: auto !important;
  }
  [data-margin~="desktop:tiny"] {
    margin: var(--spacing-root-tiny) !important;
  }
  [data-margin~="desktop:small"] {
    margin: var(--spacing-root-small) !important;
  }
  [data-margin~="desktop:medium"] {
    margin: var(--spacing-root-medium) !important;
  }
  [data-margin~="desktop:large"] {
    margin: var(--spacing-root-large) !important;
  }
  [data-margin~="desktop:huge"] {
    margin: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin~="widescreen:none"] {
    margin: 0px !important;
  }
  [data-margin~="widescreen:auto"] {
    margin: auto !important;
  }
  [data-margin~="widescreen:tiny"] {
    margin: var(--spacing-root-tiny) !important;
  }
  [data-margin~="widescreen:small"] {
    margin: var(--spacing-root-small) !important;
  }
  [data-margin~="widescreen:medium"] {
    margin: var(--spacing-root-medium) !important;
  }
  [data-margin~="widescreen:large"] {
    margin: var(--spacing-root-large) !important;
  }
  [data-margin~="widescreen:huge"] {
    margin: var(--spacing-root-huge) !important;
  }
}

[data-margin-x~="none"] {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

[data-margin-x~="auto"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-margin-x~="tiny"] {
  margin-left: var(--spacing-root-tiny) !important;
  margin-right: var(--spacing-root-tiny) !important;
}

[data-margin-x~="small"] {
  margin-left: var(--spacing-root-small) !important;
  margin-right: var(--spacing-root-small) !important;
}

[data-margin-x~="medium"] {
  margin-left: var(--spacing-root-medium) !important;
  margin-right: var(--spacing-root-medium) !important;
}

[data-margin-x~="large"] {
  margin-left: var(--spacing-root-large) !important;
  margin-right: var(--spacing-root-large) !important;
}

[data-margin-x~="huge"] {
  margin-left: var(--spacing-root-huge) !important;
  margin-right: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin-x~="mobile:none"] {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  [data-margin-x~="mobile:auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-margin-x~="mobile:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-x~="mobile:small"] {
    margin-left: var(--spacing-root-small) !important;
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-x~="mobile:medium"] {
    margin-left: var(--spacing-root-medium) !important;
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-x~="mobile:large"] {
    margin-left: var(--spacing-root-large) !important;
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-x~="mobile:huge"] {
    margin-left: var(--spacing-root-huge) !important;
    margin-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin-x~="tablet:none"] {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  [data-margin-x~="tablet:auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-margin-x~="tablet:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-x~="tablet:small"] {
    margin-left: var(--spacing-root-small) !important;
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-x~="tablet:medium"] {
    margin-left: var(--spacing-root-medium) !important;
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-x~="tablet:large"] {
    margin-left: var(--spacing-root-large) !important;
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-x~="tablet:huge"] {
    margin-left: var(--spacing-root-huge) !important;
    margin-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin-x~="desktop:none"] {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  [data-margin-x~="desktop:auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-margin-x~="desktop:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-x~="desktop:small"] {
    margin-left: var(--spacing-root-small) !important;
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-x~="desktop:medium"] {
    margin-left: var(--spacing-root-medium) !important;
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-x~="desktop:large"] {
    margin-left: var(--spacing-root-large) !important;
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-x~="desktop:huge"] {
    margin-left: var(--spacing-root-huge) !important;
    margin-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin-x~="widescreen:none"] {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  [data-margin-x~="widescreen:auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-margin-x~="widescreen:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-x~="widescreen:small"] {
    margin-left: var(--spacing-root-small) !important;
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-x~="widescreen:medium"] {
    margin-left: var(--spacing-root-medium) !important;
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-x~="widescreen:large"] {
    margin-left: var(--spacing-root-large) !important;
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-x~="widescreen:huge"] {
    margin-left: var(--spacing-root-huge) !important;
    margin-right: var(--spacing-root-huge) !important;
  }
}

[data-margin-y~="none"] {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

[data-margin-y~="auto"] {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

[data-margin-y~="tiny"] {
  margin-top: var(--spacing-root-tiny) !important;
  margin-bottom: var(--spacing-root-tiny) !important;
}

[data-margin-y~="small"] {
  margin-top: var(--spacing-root-small) !important;
  margin-bottom: var(--spacing-root-small) !important;
}

[data-margin-y~="medium"] {
  margin-top: var(--spacing-root-medium) !important;
  margin-bottom: var(--spacing-root-medium) !important;
}

[data-margin-y~="large"] {
  margin-top: var(--spacing-root-large) !important;
  margin-bottom: var(--spacing-root-large) !important;
}

[data-margin-y~="huge"] {
  margin-top: var(--spacing-root-huge) !important;
  margin-bottom: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin-y~="mobile:none"] {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  [data-margin-y~="mobile:auto"] {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  [data-margin-y~="mobile:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-y~="mobile:small"] {
    margin-top: var(--spacing-root-small) !important;
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-y~="mobile:medium"] {
    margin-top: var(--spacing-root-medium) !important;
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-y~="mobile:large"] {
    margin-top: var(--spacing-root-large) !important;
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-y~="mobile:huge"] {
    margin-top: var(--spacing-root-huge) !important;
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin-y~="tablet:none"] {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  [data-margin-y~="tablet:auto"] {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  [data-margin-y~="tablet:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-y~="tablet:small"] {
    margin-top: var(--spacing-root-small) !important;
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-y~="tablet:medium"] {
    margin-top: var(--spacing-root-medium) !important;
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-y~="tablet:large"] {
    margin-top: var(--spacing-root-large) !important;
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-y~="tablet:huge"] {
    margin-top: var(--spacing-root-huge) !important;
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin-y~="desktop:none"] {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  [data-margin-y~="desktop:auto"] {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  [data-margin-y~="desktop:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-y~="desktop:small"] {
    margin-top: var(--spacing-root-small) !important;
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-y~="desktop:medium"] {
    margin-top: var(--spacing-root-medium) !important;
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-y~="desktop:large"] {
    margin-top: var(--spacing-root-large) !important;
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-y~="desktop:huge"] {
    margin-top: var(--spacing-root-huge) !important;
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin-y~="widescreen:none"] {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  [data-margin-y~="widescreen:auto"] {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  [data-margin-y~="widescreen:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-y~="widescreen:small"] {
    margin-top: var(--spacing-root-small) !important;
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-y~="widescreen:medium"] {
    margin-top: var(--spacing-root-medium) !important;
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-y~="widescreen:large"] {
    margin-top: var(--spacing-root-large) !important;
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-y~="widescreen:huge"] {
    margin-top: var(--spacing-root-huge) !important;
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

[data-margin-top~="none"] {
  margin-top: 0px !important;
}

[data-margin-top~="auto"] {
  margin-top: auto !important;
}

[data-margin-top~="tiny"] {
  margin-top: var(--spacing-root-tiny) !important;
}

[data-margin-top~="small"] {
  margin-top: var(--spacing-root-small) !important;
}

[data-margin-top~="medium"] {
  margin-top: var(--spacing-root-medium) !important;
}

[data-margin-top~="large"] {
  margin-top: var(--spacing-root-large) !important;
}

[data-margin-top~="huge"] {
  margin-top: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin-top~="mobile:none"] {
    margin-top: 0px !important;
  }
  [data-margin-top~="mobile:auto"] {
    margin-top: auto !important;
  }
  [data-margin-top~="mobile:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
  }
  [data-margin-top~="mobile:small"] {
    margin-top: var(--spacing-root-small) !important;
  }
  [data-margin-top~="mobile:medium"] {
    margin-top: var(--spacing-root-medium) !important;
  }
  [data-margin-top~="mobile:large"] {
    margin-top: var(--spacing-root-large) !important;
  }
  [data-margin-top~="mobile:huge"] {
    margin-top: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin-top~="tablet:none"] {
    margin-top: 0px !important;
  }
  [data-margin-top~="tablet:auto"] {
    margin-top: auto !important;
  }
  [data-margin-top~="tablet:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
  }
  [data-margin-top~="tablet:small"] {
    margin-top: var(--spacing-root-small) !important;
  }
  [data-margin-top~="tablet:medium"] {
    margin-top: var(--spacing-root-medium) !important;
  }
  [data-margin-top~="tablet:large"] {
    margin-top: var(--spacing-root-large) !important;
  }
  [data-margin-top~="tablet:huge"] {
    margin-top: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin-top~="desktop:none"] {
    margin-top: 0px !important;
  }
  [data-margin-top~="desktop:auto"] {
    margin-top: auto !important;
  }
  [data-margin-top~="desktop:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
  }
  [data-margin-top~="desktop:small"] {
    margin-top: var(--spacing-root-small) !important;
  }
  [data-margin-top~="desktop:medium"] {
    margin-top: var(--spacing-root-medium) !important;
  }
  [data-margin-top~="desktop:large"] {
    margin-top: var(--spacing-root-large) !important;
  }
  [data-margin-top~="desktop:huge"] {
    margin-top: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin-top~="widescreen:none"] {
    margin-top: 0px !important;
  }
  [data-margin-top~="widescreen:auto"] {
    margin-top: auto !important;
  }
  [data-margin-top~="widescreen:tiny"] {
    margin-top: var(--spacing-root-tiny) !important;
  }
  [data-margin-top~="widescreen:small"] {
    margin-top: var(--spacing-root-small) !important;
  }
  [data-margin-top~="widescreen:medium"] {
    margin-top: var(--spacing-root-medium) !important;
  }
  [data-margin-top~="widescreen:large"] {
    margin-top: var(--spacing-root-large) !important;
  }
  [data-margin-top~="widescreen:huge"] {
    margin-top: var(--spacing-root-huge) !important;
  }
}

[data-margin-left~="none"] {
  margin-left: 0px !important;
}

[data-margin-left~="auto"] {
  margin-left: auto !important;
}

[data-margin-left~="tiny"] {
  margin-left: var(--spacing-root-tiny) !important;
}

[data-margin-left~="small"] {
  margin-left: var(--spacing-root-small) !important;
}

[data-margin-left~="medium"] {
  margin-left: var(--spacing-root-medium) !important;
}

[data-margin-left~="large"] {
  margin-left: var(--spacing-root-large) !important;
}

[data-margin-left~="huge"] {
  margin-left: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin-left~="mobile:none"] {
    margin-left: 0px !important;
  }
  [data-margin-left~="mobile:auto"] {
    margin-left: auto !important;
  }
  [data-margin-left~="mobile:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
  }
  [data-margin-left~="mobile:small"] {
    margin-left: var(--spacing-root-small) !important;
  }
  [data-margin-left~="mobile:medium"] {
    margin-left: var(--spacing-root-medium) !important;
  }
  [data-margin-left~="mobile:large"] {
    margin-left: var(--spacing-root-large) !important;
  }
  [data-margin-left~="mobile:huge"] {
    margin-left: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin-left~="tablet:none"] {
    margin-left: 0px !important;
  }
  [data-margin-left~="tablet:auto"] {
    margin-left: auto !important;
  }
  [data-margin-left~="tablet:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
  }
  [data-margin-left~="tablet:small"] {
    margin-left: var(--spacing-root-small) !important;
  }
  [data-margin-left~="tablet:medium"] {
    margin-left: var(--spacing-root-medium) !important;
  }
  [data-margin-left~="tablet:large"] {
    margin-left: var(--spacing-root-large) !important;
  }
  [data-margin-left~="tablet:huge"] {
    margin-left: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin-left~="desktop:none"] {
    margin-left: 0px !important;
  }
  [data-margin-left~="desktop:auto"] {
    margin-left: auto !important;
  }
  [data-margin-left~="desktop:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
  }
  [data-margin-left~="desktop:small"] {
    margin-left: var(--spacing-root-small) !important;
  }
  [data-margin-left~="desktop:medium"] {
    margin-left: var(--spacing-root-medium) !important;
  }
  [data-margin-left~="desktop:large"] {
    margin-left: var(--spacing-root-large) !important;
  }
  [data-margin-left~="desktop:huge"] {
    margin-left: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin-left~="widescreen:none"] {
    margin-left: 0px !important;
  }
  [data-margin-left~="widescreen:auto"] {
    margin-left: auto !important;
  }
  [data-margin-left~="widescreen:tiny"] {
    margin-left: var(--spacing-root-tiny) !important;
  }
  [data-margin-left~="widescreen:small"] {
    margin-left: var(--spacing-root-small) !important;
  }
  [data-margin-left~="widescreen:medium"] {
    margin-left: var(--spacing-root-medium) !important;
  }
  [data-margin-left~="widescreen:large"] {
    margin-left: var(--spacing-root-large) !important;
  }
  [data-margin-left~="widescreen:huge"] {
    margin-left: var(--spacing-root-huge) !important;
  }
}

[data-margin-bottom~="none"] {
  margin-bottom: 0px !important;
}

[data-margin-bottom~="auto"] {
  margin-bottom: auto !important;
}

[data-margin-bottom~="tiny"] {
  margin-bottom: var(--spacing-root-tiny) !important;
}

[data-margin-bottom~="small"] {
  margin-bottom: var(--spacing-root-small) !important;
}

[data-margin-bottom~="medium"] {
  margin-bottom: var(--spacing-root-medium) !important;
}

[data-margin-bottom~="large"] {
  margin-bottom: var(--spacing-root-large) !important;
}

[data-margin-bottom~="huge"] {
  margin-bottom: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin-bottom~="mobile:none"] {
    margin-bottom: 0px !important;
  }
  [data-margin-bottom~="mobile:auto"] {
    margin-bottom: auto !important;
  }
  [data-margin-bottom~="mobile:tiny"] {
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-bottom~="mobile:small"] {
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-bottom~="mobile:medium"] {
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-bottom~="mobile:large"] {
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-bottom~="mobile:huge"] {
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin-bottom~="tablet:none"] {
    margin-bottom: 0px !important;
  }
  [data-margin-bottom~="tablet:auto"] {
    margin-bottom: auto !important;
  }
  [data-margin-bottom~="tablet:tiny"] {
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-bottom~="tablet:small"] {
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-bottom~="tablet:medium"] {
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-bottom~="tablet:large"] {
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-bottom~="tablet:huge"] {
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin-bottom~="desktop:none"] {
    margin-bottom: 0px !important;
  }
  [data-margin-bottom~="desktop:auto"] {
    margin-bottom: auto !important;
  }
  [data-margin-bottom~="desktop:tiny"] {
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-bottom~="desktop:small"] {
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-bottom~="desktop:medium"] {
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-bottom~="desktop:large"] {
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-bottom~="desktop:huge"] {
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin-bottom~="widescreen:none"] {
    margin-bottom: 0px !important;
  }
  [data-margin-bottom~="widescreen:auto"] {
    margin-bottom: auto !important;
  }
  [data-margin-bottom~="widescreen:tiny"] {
    margin-bottom: var(--spacing-root-tiny) !important;
  }
  [data-margin-bottom~="widescreen:small"] {
    margin-bottom: var(--spacing-root-small) !important;
  }
  [data-margin-bottom~="widescreen:medium"] {
    margin-bottom: var(--spacing-root-medium) !important;
  }
  [data-margin-bottom~="widescreen:large"] {
    margin-bottom: var(--spacing-root-large) !important;
  }
  [data-margin-bottom~="widescreen:huge"] {
    margin-bottom: var(--spacing-root-huge) !important;
  }
}

[data-margin-right~="none"] {
  margin-right: 0px !important;
}

[data-margin-right~="auto"] {
  margin-right: auto !important;
}

[data-margin-right~="tiny"] {
  margin-right: var(--spacing-root-tiny) !important;
}

[data-margin-right~="small"] {
  margin-right: var(--spacing-root-small) !important;
}

[data-margin-right~="medium"] {
  margin-right: var(--spacing-root-medium) !important;
}

[data-margin-right~="large"] {
  margin-right: var(--spacing-root-large) !important;
}

[data-margin-right~="huge"] {
  margin-right: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-margin-right~="mobile:none"] {
    margin-right: 0px !important;
  }
  [data-margin-right~="mobile:auto"] {
    margin-right: auto !important;
  }
  [data-margin-right~="mobile:tiny"] {
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-right~="mobile:small"] {
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-right~="mobile:medium"] {
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-right~="mobile:large"] {
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-right~="mobile:huge"] {
    margin-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-margin-right~="tablet:none"] {
    margin-right: 0px !important;
  }
  [data-margin-right~="tablet:auto"] {
    margin-right: auto !important;
  }
  [data-margin-right~="tablet:tiny"] {
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-right~="tablet:small"] {
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-right~="tablet:medium"] {
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-right~="tablet:large"] {
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-right~="tablet:huge"] {
    margin-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-margin-right~="desktop:none"] {
    margin-right: 0px !important;
  }
  [data-margin-right~="desktop:auto"] {
    margin-right: auto !important;
  }
  [data-margin-right~="desktop:tiny"] {
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-right~="desktop:small"] {
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-right~="desktop:medium"] {
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-right~="desktop:large"] {
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-right~="desktop:huge"] {
    margin-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-margin-right~="widescreen:none"] {
    margin-right: 0px !important;
  }
  [data-margin-right~="widescreen:auto"] {
    margin-right: auto !important;
  }
  [data-margin-right~="widescreen:tiny"] {
    margin-right: var(--spacing-root-tiny) !important;
  }
  [data-margin-right~="widescreen:small"] {
    margin-right: var(--spacing-root-small) !important;
  }
  [data-margin-right~="widescreen:medium"] {
    margin-right: var(--spacing-root-medium) !important;
  }
  [data-margin-right~="widescreen:large"] {
    margin-right: var(--spacing-root-large) !important;
  }
  [data-margin-right~="widescreen:huge"] {
    margin-right: var(--spacing-root-huge) !important;
  }
}

/** GLOBAL PADDING */

[data-padding~="none"] {
  padding: 0px !important;
}

[data-padding~="tiny"] {
  padding: var(--spacing-root-tiny) !important;
}

[data-padding~="small"] {
  padding: var(--spacing-root-small) !important;
}

[data-padding~="medium"] {
  padding: var(--spacing-root-medium) !important;
}

[data-padding~="large"] {
  padding: var(--spacing-root-large) !important;
}

[data-padding~="huge"] {
  padding: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding~="mobile:none"] {
    padding: 0px !important;
  }
  [data-padding~="mobile:tiny"] {
    padding: var(--spacing-root-tiny) !important;
  }
  [data-padding~="mobile:small"] {
    padding: var(--spacing-root-small) !important;
  }
  [data-padding~="mobile:medium"] {
    padding: var(--spacing-root-medium) !important;
  }
  [data-padding~="mobile:large"] {
    padding: var(--spacing-root-large) !important;
  }
  [data-padding~="mobile:huge"] {
    padding: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding~="tablet:none"] {
    padding: 0px !important;
  }
  [data-padding~="tablet:tiny"] {
    padding: var(--spacing-root-tiny) !important;
  }
  [data-padding~="tablet:small"] {
    padding: var(--spacing-root-small) !important;
  }
  [data-padding~="tablet:medium"] {
    padding: var(--spacing-root-medium) !important;
  }
  [data-padding~="tablet:large"] {
    padding: var(--spacing-root-large) !important;
  }
  [data-padding~="tablet:huge"] {
    padding: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding~="desktop:none"] {
    padding: 0px !important;
  }
  [data-padding~="desktop:tiny"] {
    padding: var(--spacing-root-tiny) !important;
  }
  [data-padding~="desktop:small"] {
    padding: var(--spacing-root-small) !important;
  }
  [data-padding~="desktop:medium"] {
    padding: var(--spacing-root-medium) !important;
  }
  [data-padding~="desktop:large"] {
    padding: var(--spacing-root-large) !important;
  }
  [data-padding~="desktop:huge"] {
    padding: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding~="widescreen:none"] {
    padding: 0px !important;
  }
  [data-padding~="widescreen:tiny"] {
    padding: var(--spacing-root-tiny) !important;
  }
  [data-padding~="widescreen:small"] {
    padding: var(--spacing-root-small) !important;
  }
  [data-padding~="widescreen:medium"] {
    padding: var(--spacing-root-medium) !important;
  }
  [data-padding~="widescreen:large"] {
    padding: var(--spacing-root-large) !important;
  }
  [data-padding~="widescreen:huge"] {
    padding: var(--spacing-root-huge) !important;
  }
}

[data-padding-x~="none"] {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

[data-padding-x~="tiny"] {
  padding-left: var(--spacing-root-tiny) !important;
  padding-right: var(--spacing-root-tiny) !important;
}

[data-padding-x~="small"] {
  padding-left: var(--spacing-root-small) !important;
  padding-right: var(--spacing-root-small) !important;
}

[data-padding-x~="medium"] {
  padding-left: var(--spacing-root-medium) !important;
  padding-right: var(--spacing-root-medium) !important;
}

[data-padding-x~="large"] {
  padding-left: var(--spacing-root-large) !important;
  padding-right: var(--spacing-root-large) !important;
}

[data-padding-x~="huge"] {
  padding-left: var(--spacing-root-huge) !important;
  padding-right: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding-x~="mobile:none"] {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  [data-padding-x~="mobile:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-x~="mobile:small"] {
    padding-left: var(--spacing-root-small) !important;
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-x~="mobile:medium"] {
    padding-left: var(--spacing-root-medium) !important;
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-x~="mobile:large"] {
    padding-left: var(--spacing-root-large) !important;
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-x~="mobile:huge"] {
    padding-left: var(--spacing-root-huge) !important;
    padding-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding-x~="tablet:none"] {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  [data-padding-x~="tablet:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-x~="tablet:small"] {
    padding-left: var(--spacing-root-small) !important;
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-x~="tablet:medium"] {
    padding-left: var(--spacing-root-medium) !important;
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-x~="tablet:large"] {
    padding-left: var(--spacing-root-large) !important;
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-x~="tablet:huge"] {
    padding-left: var(--spacing-root-huge) !important;
    padding-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding-x~="desktop:none"] {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  [data-padding-x~="desktop:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-x~="desktop:small"] {
    padding-left: var(--spacing-root-small) !important;
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-x~="desktop:medium"] {
    padding-left: var(--spacing-root-medium) !important;
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-x~="desktop:large"] {
    padding-left: var(--spacing-root-large) !important;
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-x~="desktop:huge"] {
    padding-left: var(--spacing-root-huge) !important;
    padding-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding-x~="widescreen:none"] {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  [data-padding-x~="widescreen:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-x~="widescreen:small"] {
    padding-left: var(--spacing-root-small) !important;
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-x~="widescreen:medium"] {
    padding-left: var(--spacing-root-medium) !important;
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-x~="widescreen:large"] {
    padding-left: var(--spacing-root-large) !important;
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-x~="widescreen:huge"] {
    padding-left: var(--spacing-root-huge) !important;
    padding-right: var(--spacing-root-huge) !important;
  }
}

[data-padding-y~="none"] {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

[data-padding-y~="tiny"] {
  padding-top: var(--spacing-root-tiny) !important;
  padding-bottom: var(--spacing-root-tiny) !important;
}

[data-padding-y~="small"] {
  padding-top: var(--spacing-root-small) !important;
  padding-bottom: var(--spacing-root-small) !important;
}

[data-padding-y~="medium"] {
  padding-top: var(--spacing-root-medium) !important;
  padding-bottom: var(--spacing-root-medium) !important;
}

[data-padding-y~="large"] {
  padding-top: var(--spacing-root-large) !important;
  padding-bottom: var(--spacing-root-large) !important;
}

[data-padding-y~="huge"] {
  padding-top: var(--spacing-root-huge) !important;
  padding-bottom: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding-y~="mobile:none"] {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  [data-padding-y~="mobile:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-y~="mobile:small"] {
    padding-top: var(--spacing-root-small) !important;
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-y~="mobile:medium"] {
    padding-top: var(--spacing-root-medium) !important;
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-y~="mobile:large"] {
    padding-top: var(--spacing-root-large) !important;
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-y~="mobile:huge"] {
    padding-top: var(--spacing-root-huge) !important;
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding-y~="tablet:none"] {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  [data-padding-y~="tablet:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-y~="tablet:small"] {
    padding-top: var(--spacing-root-small) !important;
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-y~="tablet:medium"] {
    padding-top: var(--spacing-root-medium) !important;
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-y~="tablet:large"] {
    padding-top: var(--spacing-root-large) !important;
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-y~="tablet:huge"] {
    padding-top: var(--spacing-root-huge) !important;
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding-y~="desktop:none"] {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  [data-padding-y~="desktop:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-y~="desktop:small"] {
    padding-top: var(--spacing-root-small) !important;
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-y~="desktop:medium"] {
    padding-top: var(--spacing-root-medium) !important;
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-y~="desktop:large"] {
    padding-top: var(--spacing-root-large) !important;
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-y~="desktop:huge"] {
    padding-top: var(--spacing-root-huge) !important;
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding-y~="widescreen:none"] {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  [data-padding-y~="widescreen:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-y~="widescreen:small"] {
    padding-top: var(--spacing-root-small) !important;
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-y~="widescreen:medium"] {
    padding-top: var(--spacing-root-medium) !important;
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-y~="widescreen:large"] {
    padding-top: var(--spacing-root-large) !important;
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-y~="widescreen:huge"] {
    padding-top: var(--spacing-root-huge) !important;
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

[data-padding-top~="none"] {
  padding-top: 0px !important;
}

[data-padding-top~="tiny"] {
  padding-top: var(--spacing-root-tiny) !important;
}

[data-padding-top~="small"] {
  padding-top: var(--spacing-root-small) !important;
}

[data-padding-top~="medium"] {
  padding-top: var(--spacing-root-medium) !important;
}

[data-padding-top~="large"] {
  padding-top: var(--spacing-root-large) !important;
}

[data-padding-top~="huge"] {
  padding-top: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding-top~="mobile:none"] {
    padding-top: 0px !important;
  }
  [data-padding-top~="mobile:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
  }
  [data-padding-top~="mobile:small"] {
    padding-top: var(--spacing-root-small) !important;
  }
  [data-padding-top~="mobile:medium"] {
    padding-top: var(--spacing-root-medium) !important;
  }
  [data-padding-top~="mobile:large"] {
    padding-top: var(--spacing-root-large) !important;
  }
  [data-padding-top~="mobile:huge"] {
    padding-top: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding-top~="tablet:none"] {
    padding-top: 0px !important;
  }
  [data-padding-top~="tablet:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
  }
  [data-padding-top~="tablet:small"] {
    padding-top: var(--spacing-root-small) !important;
  }
  [data-padding-top~="tablet:medium"] {
    padding-top: var(--spacing-root-medium) !important;
  }
  [data-padding-top~="tablet:large"] {
    padding-top: var(--spacing-root-large) !important;
  }
  [data-padding-top~="tablet:huge"] {
    padding-top: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding-top~="desktop:none"] {
    padding-top: 0px !important;
  }
  [data-padding-top~="desktop:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
  }
  [data-padding-top~="desktop:small"] {
    padding-top: var(--spacing-root-small) !important;
  }
  [data-padding-top~="desktop:medium"] {
    padding-top: var(--spacing-root-medium) !important;
  }
  [data-padding-top~="desktop:large"] {
    padding-top: var(--spacing-root-large) !important;
  }
  [data-padding-top~="desktop:huge"] {
    padding-top: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding-top~="widescreen:none"] {
    padding-top: 0px !important;
  }
  [data-padding-top~="widescreen:tiny"] {
    padding-top: var(--spacing-root-tiny) !important;
  }
  [data-padding-top~="widescreen:small"] {
    padding-top: var(--spacing-root-small) !important;
  }
  [data-padding-top~="widescreen:medium"] {
    padding-top: var(--spacing-root-medium) !important;
  }
  [data-padding-top~="widescreen:large"] {
    padding-top: var(--spacing-root-large) !important;
  }
  [data-padding-top~="widescreen:huge"] {
    padding-top: var(--spacing-root-huge) !important;
  }
}

[data-padding-left~="none"] {
  padding-left: 0px !important;
}

[data-padding-left~="tiny"] {
  padding-left: var(--spacing-root-tiny) !important;
}

[data-padding-left~="small"] {
  padding-left: var(--spacing-root-small) !important;
}

[data-padding-left~="medium"] {
  padding-left: var(--spacing-root-medium) !important;
}

[data-padding-left~="large"] {
  padding-left: var(--spacing-root-large) !important;
}

[data-padding-left~="huge"] {
  padding-left: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding-left~="mobile:none"] {
    padding-left: 0px !important;
  }
  [data-padding-left~="mobile:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
  }
  [data-padding-left~="mobile:small"] {
    padding-left: var(--spacing-root-small) !important;
  }
  [data-padding-left~="mobile:medium"] {
    padding-left: var(--spacing-root-medium) !important;
  }
  [data-padding-left~="mobile:large"] {
    padding-left: var(--spacing-root-large) !important;
  }
  [data-padding-left~="mobile:huge"] {
    padding-left: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding-left~="tablet:none"] {
    padding-left: 0px !important;
  }
  [data-padding-left~="tablet:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
  }
  [data-padding-left~="tablet:small"] {
    padding-left: var(--spacing-root-small) !important;
  }
  [data-padding-left~="tablet:medium"] {
    padding-left: var(--spacing-root-medium) !important;
  }
  [data-padding-left~="tablet:large"] {
    padding-left: var(--spacing-root-large) !important;
  }
  [data-padding-left~="tablet:huge"] {
    padding-left: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding-left~="desktop:none"] {
    padding-left: 0px !important;
  }
  [data-padding-left~="desktop:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
  }
  [data-padding-left~="desktop:small"] {
    padding-left: var(--spacing-root-small) !important;
  }
  [data-padding-left~="desktop:medium"] {
    padding-left: var(--spacing-root-medium) !important;
  }
  [data-padding-left~="desktop:large"] {
    padding-left: var(--spacing-root-large) !important;
  }
  [data-padding-left~="desktop:huge"] {
    padding-left: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding-left~="widescreen:none"] {
    padding-left: 0px !important;
  }
  [data-padding-left~="widescreen:tiny"] {
    padding-left: var(--spacing-root-tiny) !important;
  }
  [data-padding-left~="widescreen:small"] {
    padding-left: var(--spacing-root-small) !important;
  }
  [data-padding-left~="widescreen:medium"] {
    padding-left: var(--spacing-root-medium) !important;
  }
  [data-padding-left~="widescreen:large"] {
    padding-left: var(--spacing-root-large) !important;
  }
  [data-padding-left~="widescreen:huge"] {
    padding-left: var(--spacing-root-huge) !important;
  }
}

[data-padding-bottom~="none"] {
  padding-bottom: 0px !important;
}

[data-padding-bottom~="tiny"] {
  padding-bottom: var(--spacing-root-tiny) !important;
}

[data-padding-bottom~="small"] {
  padding-bottom: var(--spacing-root-small) !important;
}

[data-padding-bottom~="medium"] {
  padding-bottom: var(--spacing-root-medium) !important;
}

[data-padding-bottom~="large"] {
  padding-bottom: var(--spacing-root-large) !important;
}

[data-padding-bottom~="huge"] {
  padding-bottom: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding-bottom~="mobile:none"] {
    padding-bottom: 0px !important;
  }
  [data-padding-bottom~="mobile:tiny"] {
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-bottom~="mobile:small"] {
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-bottom~="mobile:medium"] {
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-bottom~="mobile:large"] {
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-bottom~="mobile:huge"] {
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding-bottom~="tablet:none"] {
    padding-bottom: 0px !important;
  }
  [data-padding-bottom~="tablet:tiny"] {
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-bottom~="tablet:small"] {
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-bottom~="tablet:medium"] {
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-bottom~="tablet:large"] {
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-bottom~="tablet:huge"] {
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding-bottom~="desktop:none"] {
    padding-bottom: 0px !important;
  }
  [data-padding-bottom~="desktop:tiny"] {
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-bottom~="desktop:small"] {
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-bottom~="desktop:medium"] {
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-bottom~="desktop:large"] {
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-bottom~="desktop:huge"] {
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding-bottom~="widescreen:none"] {
    padding-bottom: 0px !important;
  }
  [data-padding-bottom~="widescreen:tiny"] {
    padding-bottom: var(--spacing-root-tiny) !important;
  }
  [data-padding-bottom~="widescreen:small"] {
    padding-bottom: var(--spacing-root-small) !important;
  }
  [data-padding-bottom~="widescreen:medium"] {
    padding-bottom: var(--spacing-root-medium) !important;
  }
  [data-padding-bottom~="widescreen:large"] {
    padding-bottom: var(--spacing-root-large) !important;
  }
  [data-padding-bottom~="widescreen:huge"] {
    padding-bottom: var(--spacing-root-huge) !important;
  }
}

[data-padding-right~="none"] {
  padding-right: 0px !important;
}

[data-padding-right~="tiny"] {
  padding-right: var(--spacing-root-tiny) !important;
}

[data-padding-right~="small"] {
  padding-right: var(--spacing-root-small) !important;
}

[data-padding-right~="medium"] {
  padding-right: var(--spacing-root-medium) !important;
}

[data-padding-right~="large"] {
  padding-right: var(--spacing-root-large) !important;
}

[data-padding-right~="huge"] {
  padding-right: var(--spacing-root-huge) !important;
}

@media (max-width: 639.9px) {
  [data-padding-right~="mobile:none"] {
    padding-right: 0px !important;
  }
  [data-padding-right~="mobile:tiny"] {
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-right~="mobile:small"] {
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-right~="mobile:medium"] {
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-right~="mobile:large"] {
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-right~="mobile:huge"] {
    padding-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-padding-right~="tablet:none"] {
    padding-right: 0px !important;
  }
  [data-padding-right~="tablet:tiny"] {
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-right~="tablet:small"] {
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-right~="tablet:medium"] {
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-right~="tablet:large"] {
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-right~="tablet:huge"] {
    padding-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-padding-right~="desktop:none"] {
    padding-right: 0px !important;
  }
  [data-padding-right~="desktop:tiny"] {
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-right~="desktop:small"] {
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-right~="desktop:medium"] {
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-right~="desktop:large"] {
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-right~="desktop:huge"] {
    padding-right: var(--spacing-root-huge) !important;
  }
}

@media (min-width: 1024px) {
  [data-padding-right~="widescreen:none"] {
    padding-right: 0px !important;
  }
  [data-padding-right~="widescreen:tiny"] {
    padding-right: var(--spacing-root-tiny) !important;
  }
  [data-padding-right~="widescreen:small"] {
    padding-right: var(--spacing-root-small) !important;
  }
  [data-padding-right~="widescreen:medium"] {
    padding-right: var(--spacing-root-medium) !important;
  }
  [data-padding-right~="widescreen:large"] {
    padding-right: var(--spacing-root-large) !important;
  }
  [data-padding-right~="widescreen:huge"] {
    padding-right: var(--spacing-root-huge) !important;
  }
}

/** GLOBAL GAP */

[data-spacing~="none"] {
    --spacing-x: 0px;
    --spacing-y: 0px;
}

[data-spacing~="tiny"] {
    --spacing-x: var(--spacing-root-tiny);
    --spacing-y: var(--spacing-root-tiny);
}

[data-spacing~="small"] {
    --spacing-x: var(--spacing-root-small);
    --spacing-y: var(--spacing-root-small);
}

[data-spacing~="medium"] {
    --spacing-x: var(--spacing-root-medium);
    --spacing-y: var(--spacing-root-medium);
}

[data-spacing~="large"] {
    --spacing-x: var(--spacing-root-large);
    --spacing-y: var(--spacing-root-large);
}

[data-spacing~="huge"] {
    --spacing-x: var(--spacing-root-huge);
    --spacing-y: var(--spacing-root-huge);
}

@media (max-width: 639.9px) {
  [data-spacing~="mobile:none"] {
    --spacing-x: 0px;
    --spacing-y: 0px;
  }
  [data-spacing~="mobile:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing~="mobile:small"] {
    --spacing-x: var(--spacing-root-small);
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing~="mobile:medium"] {
    --spacing-x: var(--spacing-root-medium);
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing~="mobile:large"] {
    --spacing-x: var(--spacing-root-large);
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing~="mobile:huge"] {
    --spacing-x: var(--spacing-root-huge);
    --spacing-y: var(--spacing-root-huge);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-spacing~="tablet:none"] {
    --spacing-x: 0px;
    --spacing-y: 0px;
  }
  [data-spacing~="tablet:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing~="tablet:small"] {
    --spacing-x: var(--spacing-root-small);
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing~="tablet:medium"] {
    --spacing-x: var(--spacing-root-medium);
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing~="tablet:large"] {
    --spacing-x: var(--spacing-root-large);
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing~="tablet:huge"] {
    --spacing-x: var(--spacing-root-huge);
    --spacing-y: var(--spacing-root-huge);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-spacing~="desktop:none"] {
    --spacing-x: 0px;
    --spacing-y: 0px;
  }
  [data-spacing~="desktop:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing~="desktop:small"] {
    --spacing-x: var(--spacing-root-small);
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing~="desktop:medium"] {
    --spacing-x: var(--spacing-root-medium);
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing~="desktop:large"] {
    --spacing-x: var(--spacing-root-large);
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing~="desktop:huge"] {
    --spacing-x: var(--spacing-root-huge);
    --spacing-y: var(--spacing-root-huge);
  }
}

@media (min-width: 1024px) {
  [data-spacing~="widescreen:none"] {
    --spacing-x: 0px;
    --spacing-y: 0px;
  }
  [data-spacing~="widescreen:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing~="widescreen:small"] {
    --spacing-x: var(--spacing-root-small);
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing~="widescreen:medium"] {
    --spacing-x: var(--spacing-root-medium);
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing~="widescreen:large"] {
    --spacing-x: var(--spacing-root-large);
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing~="widescreen:huge"] {
    --spacing-x: var(--spacing-root-huge);
    --spacing-y: var(--spacing-root-huge);
  }
}

[data-spacing-x~="none"] {
    --spacing-x: 0px;
}

[data-spacing-x~="tiny"] {
    --spacing-x: var(--spacing-root-tiny);
}

[data-spacing-x~="small"] {
    --spacing-x: var(--spacing-root-small);
}

[data-spacing-x~="medium"] {
    --spacing-x: var(--spacing-root-medium);
}

[data-spacing-x~="large"] {
    --spacing-x: var(--spacing-root-large);
}

[data-spacing-x~="huge"] {
    --spacing-x: var(--spacing-root-huge);
}

@media (max-width: 639.9px) {
  [data-spacing-x~="mobile:none"] {
    --spacing-x: 0px;
  }
  [data-spacing-x~="mobile:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
  }
  [data-spacing-x~="mobile:small"] {
    --spacing-x: var(--spacing-root-small);
  }
  [data-spacing-x~="mobile:medium"] {
    --spacing-x: var(--spacing-root-medium);
  }
  [data-spacing-x~="mobile:large"] {
    --spacing-x: var(--spacing-root-large);
  }
  [data-spacing-x~="mobile:huge"] {
    --spacing-x: var(--spacing-root-huge);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-spacing-x~="tablet:none"] {
    --spacing-x: 0px;
  }
  [data-spacing-x~="tablet:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
  }
  [data-spacing-x~="tablet:small"] {
    --spacing-x: var(--spacing-root-small);
  }
  [data-spacing-x~="tablet:medium"] {
    --spacing-x: var(--spacing-root-medium);
  }
  [data-spacing-x~="tablet:large"] {
    --spacing-x: var(--spacing-root-large);
  }
  [data-spacing-x~="tablet:huge"] {
    --spacing-x: var(--spacing-root-huge);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-spacing-x~="desktop:none"] {
    --spacing-x: 0px;
  }
  [data-spacing-x~="desktop:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
  }
  [data-spacing-x~="desktop:small"] {
    --spacing-x: var(--spacing-root-small);
  }
  [data-spacing-x~="desktop:medium"] {
    --spacing-x: var(--spacing-root-medium);
  }
  [data-spacing-x~="desktop:large"] {
    --spacing-x: var(--spacing-root-large);
  }
  [data-spacing-x~="desktop:huge"] {
    --spacing-x: var(--spacing-root-huge);
  }
}

@media (min-width: 1024px) {
  [data-spacing-x~="widescreen:none"] {
    --spacing-x: 0px;
  }
  [data-spacing-x~="widescreen:tiny"] {
    --spacing-x: var(--spacing-root-tiny);
  }
  [data-spacing-x~="widescreen:small"] {
    --spacing-x: var(--spacing-root-small);
  }
  [data-spacing-x~="widescreen:medium"] {
    --spacing-x: var(--spacing-root-medium);
  }
  [data-spacing-x~="widescreen:large"] {
    --spacing-x: var(--spacing-root-large);
  }
  [data-spacing-x~="widescreen:huge"] {
    --spacing-x: var(--spacing-root-huge);
  }
}

[data-spacing-y~="none"] {
    --spacing-y: 0px;
}

[data-spacing-y~="tiny"] {
    --spacing-y: var(--spacing-root-tiny);
}

[data-spacing-y~="small"] {
    --spacing-y: var(--spacing-root-small);
}

[data-spacing-y~="medium"] {
    --spacing-y: var(--spacing-root-medium);
}

[data-spacing-y~="large"] {
    --spacing-y: var(--spacing-root-large);
}

[data-spacing-y~="huge"] {
    --spacing-y: var(--spacing-root-huge);
}

@media (max-width: 639.9px) {
  [data-spacing-y~="mobile:none"] {
    --spacing-y: 0px;
  }
  [data-spacing-y~="mobile:tiny"] {
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing-y~="mobile:small"] {
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing-y~="mobile:medium"] {
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing-y~="mobile:large"] {
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing-y~="mobile:huge"] {
    --spacing-y: var(--spacing-root-huge);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-spacing-y~="tablet:none"] {
    --spacing-y: 0px;
  }
  [data-spacing-y~="tablet:tiny"] {
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing-y~="tablet:small"] {
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing-y~="tablet:medium"] {
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing-y~="tablet:large"] {
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing-y~="tablet:huge"] {
    --spacing-y: var(--spacing-root-huge);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-spacing-y~="desktop:none"] {
    --spacing-y: 0px;
  }
  [data-spacing-y~="desktop:tiny"] {
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing-y~="desktop:small"] {
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing-y~="desktop:medium"] {
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing-y~="desktop:large"] {
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing-y~="desktop:huge"] {
    --spacing-y: var(--spacing-root-huge);
  }
}

@media (min-width: 1024px) {
  [data-spacing-y~="widescreen:none"] {
    --spacing-y: 0px;
  }
  [data-spacing-y~="widescreen:tiny"] {
    --spacing-y: var(--spacing-root-tiny);
  }
  [data-spacing-y~="widescreen:small"] {
    --spacing-y: var(--spacing-root-small);
  }
  [data-spacing-y~="widescreen:medium"] {
    --spacing-y: var(--spacing-root-medium);
  }
  [data-spacing-y~="widescreen:large"] {
    --spacing-y: var(--spacing-root-large);
  }
  [data-spacing-y~="widescreen:huge"] {
    --spacing-y: var(--spacing-root-huge);
  }
}

[data-transform="capitalize"] {
    --transform-text: capitalize;
}

[data-transform="lowercase"] {
    --transform-text: lowercase;
}

[data-transform="uppercase"] {
    --transform-text: uppercase;
}

[data-viewport~="prose"] {
    --viewport: var(--sizes-prose);
}

[data-viewport~="mobile"] {
    --viewport: var(--viewport-mobile-max);
}

[data-viewport~="tablet"] {
    --viewport: var(--viewport-tablet-max);
}

[data-viewport~="desktop"] {
    --viewport: var(--viewport-desktop-max);
}

[data-viewport~="widescreen"] {
    --viewport: var(--viewport-widescreen-max);
}

@media (max-width: 639.9px) {
  [data-viewport~="mobile:prose"] {
    --viewport: var(--sizes-prose);
  }
  [data-viewport~="mobile:mobile"] {
    --viewport: var(--viewport-mobile-max);
  }
  [data-viewport~="mobile:tablet"] {
    --viewport: var(--viewport-tablet-max);
  }
  [data-viewport~="mobile:desktop"] {
    --viewport: var(--viewport-desktop-max);
  }
  [data-viewport~="mobile:widescreen"] {
    --viewport: var(--viewport-widescreen-max);
  }
}

@media (min-width: 640px) and (max-width: 767.9px) {
  [data-viewport~="tablet:prose"] {
    --viewport: var(--sizes-prose);
  }
  [data-viewport~="tablet:mobile"] {
    --viewport: var(--viewport-mobile-max);
  }
  [data-viewport~="tablet:tablet"] {
    --viewport: var(--viewport-tablet-max);
  }
  [data-viewport~="tablet:desktop"] {
    --viewport: var(--viewport-desktop-max);
  }
  [data-viewport~="tablet:widescreen"] {
    --viewport: var(--viewport-widescreen-max);
  }
}

@media (min-width: 768px) and (max-width: 1023.9px) {
  [data-viewport~="desktop:prose"] {
    --viewport: var(--sizes-prose);
  }
  [data-viewport~="desktop:mobile"] {
    --viewport: var(--viewport-mobile-max);
  }
  [data-viewport~="desktop:tablet"] {
    --viewport: var(--viewport-tablet-max);
  }
  [data-viewport~="desktop:desktop"] {
    --viewport: var(--viewport-desktop-max);
  }
  [data-viewport~="desktop:widescreen"] {
    --viewport: var(--viewport-widescreen-max);
  }
}

@media (min-width: 1024px) {
  [data-viewport~="widescreen:prose"] {
    --viewport: var(--sizes-prose);
  }
  [data-viewport~="widescreen:mobile"] {
    --viewport: var(--viewport-mobile-max);
  }
  [data-viewport~="widescreen:tablet"] {
    --viewport: var(--viewport-tablet-max);
  }
  [data-viewport~="widescreen:desktop"] {
    --viewport: var(--viewport-desktop-max);
  }
  [data-viewport~="widescreen:widescreen"] {
    --viewport: var(--viewport-widescreen-max);
  }
}