:root {
  /* Alignment Variables */
  --align-center: center;
  --align-end: end;
  --align-justify: justify;
  --align-left: left;
  --align-right: right;
  --align-start: start;
}

:root {
  /* B&W Base Variables */
  --dark-mode__black: oklch(0% 0 0);
  --dark-mode__black-faded: oklch(0% 0 0 / 0.4);
  --dark-mode__black-faded2: oklch(0% 0 0 / 0.1);
  --dark-mode__white: oklch(100% 0 0);
  --dark-mode__white-faded: oklch(100% 0 0 / 0.4);
  --dark-mode__white-faded2: oklch(100% 0 0 / 0.1);
  --light-mode__black: oklch(0% 0 0);
  --light-mode__black-faded: oklch(0% 0 0 / 0.4);
  --light-mode__black-faded2: oklch(0% 0 0 / 0.1);
  --light-mode__white: oklch(100% 0 0);
  --light-mode__white-faded: oklch(100% 0 0 / 0.4);
  --light-mode__white-faded2: oklch(100% 0 0 / 0.1);
}

:root {
  /* B&W Light Mode Variables */
  --black: var(--light-mode__black);
  --black-faded: var(--light-mode__black-faded);
  --black-faded2: var(--light-mode__black-faded2);
  --white: var(--light-mode__white);
  --white-faded: var(--light-mode__white-faded);
  --white-faded2: var(--light-mode__white-faded2);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* B&W Dark Mode Variables */
    --black: var(--dark-mode__black);
    --black-faded: var(--dark-mode__black-faded);
    --black-faded2: var(--dark-mode__black-faded2);
    --white: var(--dark-mode__white);
    --white-faded: var(--dark-mode__white-faded);
    --white-faded2: var(--dark-mode__white-faded2);
  }
}

:root {
  /* B&W Border Variables */
  --black-border: 1px solid var(--black);
  --black-border-faded: 1px solid var(--black-faded);
  --black-border-faded2: 1px solid var(--black-faded2);
  --white-border: 1px solid var(--white);
  --white-border-faded: 1px solid var(--white-faded);
  --white-border-faded2: 1px solid var(--white-faded2);
}

:root {
  /* Border Radii Variables */
  --default-radius: 0.5rem;
  --large-radius: 0.6rem;
  --small-radius: 0.4rem;
  --xlarge-radius: 0.8rem;
  --xsmall-radius: 0.3rem;
  --xxlarge-radius: 1rem;
  --xxsmall-radius: 0.2rem;
  --xxxlarge-radius: 1.2rem;
  --xxxsmall-radius: 0.1rem;
}

:root {
  color-scheme: light dark; /* Default: light */
  /* Color Base Variables */
  --dark-mode__accent: oklch(64% 0.18525 437.796);
  --dark-mode__accent-faded: oklch(64% 0.18525 437.796 / 0.5);
  --dark-mode__accent-faded2: oklch(64% 0.18525 437.796 / 0.2);
  --dark-mode__background: oklch(12.89% 0.10485 212.796);
  --dark-mode__default: oklch(82% 0.11139 257.796);
  --dark-mode__default-faded: oklch(82% 0.11139 257.796 / 0.5);
  --dark-mode__default-faded2: oklch(82% 0.11139 257.796 / 0.2);
  --dark-mode__heading: oklch(64% 0.15972 302.796);
  --dark-mode__heading-faded: oklch(64% 0.15972 302.796 / 0.5);
  --dark-mode__heading-faded2: oklch(64% 0.15972 302.796 / 0.2);
  --dark-mode__link: oklch(100% 0.21432 347.796);
  --dark-mode__link-faded: oklch(100% 0.21432 347.796 / 0.5);
  --dark-mode__link-faded2: oklch(100% 0.21432 347.796 / 0.2);
  --dark-mode__warning: oklch(46% 0.2262 392.796);
  --dark-mode__warning-faded: oklch(46% 0.2262 392.796 / 0.5);
  --dark-mode__warning-faded2: oklch(46% 0.2262 392.796 / 0.2);
  --light-mode__accent: oklch(46% 0.23199 529.956);
  --light-mode__accent-faded: oklch(46% 0.23199 529.956 / 0.5);
  --light-mode__accent-faded2: oklch(46% 0.23199 529.956 / 0.2);
  --light-mode__background: oklch(86.94% 0.07188 259.956);
  --light-mode__default: oklch(28% 0.28017 574.956);
  --light-mode__default-faded: oklch(28% 0.28017 574.956 / 0.5);
  --light-mode__default-faded2: oklch(28% 0.28017 574.956 / 0.2);
  --light-mode__heading: oklch(64% 0.13758 574.956);
  --light-mode__heading-faded: oklch(64% 0.13758 574.956 / 0.5);
  --light-mode__heading-faded2: oklch(64% 0.13758 574.956 / 0.2);
  --light-mode__link: oklch(46% 0.21927 259.956);
  --light-mode__link-faded: oklch(46% 0.21927 259.956 / 0.5);
  --light-mode__link-faded2: oklch(46% 0.21927 259.956 / 0.2);
  --light-mode__warning: oklch(64% 0.22119 394.956);
  --light-mode__warning-faded: oklch(64% 0.22119 394.956 / 0.5);
  --light-mode__warning-faded2: oklch(64% 0.22119 394.956 / 0.2);
}

:root {
  /* Color Light Mode Variables */
  --accent: var(--light-mode__accent);
  --accent-faded: var(--light-mode__accent-faded);
  --accent-faded2: var(--light-mode__accent-faded2);
  --background: var(--light-mode__background);
  --default: var(--light-mode__default);
  --default-faded: var(--light-mode__default-faded);
  --default-faded2: var(--light-mode__default-faded2);
  --heading: var(--light-mode__heading);
  --heading-faded: var(--light-mode__heading-faded);
  --heading-faded2: var(--light-mode__heading-faded2);
  --link: var(--light-mode__link);
  --link-faded: var(--light-mode__link-faded);
  --link-faded2: var(--light-mode__link-faded2);
  --warning: var(--light-mode__warning);
  --warning-faded: var(--light-mode__warning-faded);
  --warning-faded2: var(--light-mode__warning-faded2);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Color Dark Mode Variables */
    --accent: var(--dark-mode__accent);
    --accent-faded: var(--dark-mode__accent-faded);
    --accent-faded2: var(--dark-mode__accent-faded2);
    --background: var(--dark-mode__background);
    --default: var(--dark-mode__default);
    --default-faded: var(--dark-mode__default-faded);
    --default-faded2: var(--dark-mode__default-faded2);
    --heading: var(--dark-mode__heading);
    --heading-faded: var(--dark-mode__heading-faded);
    --heading-faded2: var(--dark-mode__heading-faded2);
    --link: var(--dark-mode__link);
    --link-faded: var(--dark-mode__link-faded);
    --link-faded2: var(--dark-mode__link-faded2);
    --warning: var(--dark-mode__warning);
    --warning-faded: var(--dark-mode__warning-faded);
    --warning-faded2: var(--dark-mode__warning-faded2);
  }
}

:root {
  /* Color Border Variables */
  --accent-border: 1px solid var(--accent);
  --accent-border-faded: 1px solid var(--accent-faded);
  --accent-border-faded2: 1px solid var(--accent-faded2);
  --default-border: 1px solid var(--default);
  --default-border-faded: 1px solid var(--default-faded);
  --default-border-faded2: 1px solid var(--default-faded2);
  --heading-border: 1px solid var(--heading);
  --heading-border-faded: 1px solid var(--heading-faded);
  --heading-border-faded2: 1px solid var(--heading-faded2);
  --link-border: 1px solid var(--link);
  --link-border-faded: 1px solid var(--link-faded);
  --link-border-faded2: 1px solid var(--link-faded2);
  --warning-border: 1px solid var(--warning);
  --warning-border-faded: 1px solid var(--warning-faded);
  --warning-border-faded2: 1px solid var(--warning-faded2);
}

:root {
  /* Flow Variables */
  --default-flow: 1em;
  --large-flow: 1.8em;
  --small-flow: 0.7em;
  --xlarge-flow: 2.9em;
  --xsmall-flow: 0.5em;
  --xxlarge-flow: 4.3em;
  --xxsmall-flow: 0.3em;
  --xxxlarge-flow: 6.5em;
  --xxxsmall-flow: 0.2em;
}

:root {
  /* Font Size Variables */
  --default-font: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --large-font: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
  --small-font: clamp(0.94rem, calc(0.92rem + 0.11vw), 1rem);
  --xlarge-font: clamp(1.32rem, calc(1.5rem + 0.58vw), 1.65rem);
  --xsmall-font: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.8rem);
  --xxlarge-font: clamp(1.84rem, calc(1.77rem + 0.87vw), 2.14rem);
  --xxsmall-font: clamp(0.68rem, calc(0.67rem + 0.03vw), 0.7rem);
  --xxxlarge-font: clamp(2.8rem, calc(2rem + 1.25vw), 3.1rem);
  --xxxsmall-font: clamp(0.58rem, calc(0.57rem + 0.03vw), 0.6rem);
}

:root {
  /* Line Height Variables */
  --default-line-height: 1.5;
  --large-line-height: 1.6;
  --small-line-height: 1.4;
  --xlarge-line-height: 1.7;
  --xsmall-line-height: 1.3;
  --xxlarge-line-height: 1.8;
  --xxsmall-line-height: 1.2;
  --xxxlarge-line-height: 1.9;
  --xxxsmall-line-height: 1.1;
}

:root {
  /* Margin Variables */
  --default-margin: 0.8rem;
  --large-margin: 0.5rem;
  --small-margin: 0.4rem;
  --xlarge-margin: 1.3rem;
  --xsmall-margin: 0.3rem;
  --xxlarge-margin: 1.9rem;
  --xxsmall-margin: 0.2rem;
  --xxxlarge-margin: 2.4rem;
  --xxxsmall-margin: 0.1rem;
}

:root {
  /* Padding Variables */
  --default-padding: 0.8rem;
  --large-padding: 0.5rem;
  --small-padding: 0.4rem;
  --xlarge-padding: 1.3rem;
  --xsmall-padding: 0.3rem;
  --xxlarge-padding: 1.9rem;
  --xxsmall-padding: 0.2rem;
  --xxxlarge-padding: 2.4rem;
  --xxxsmall-padding: 0.1rem;
}

:root {
  /* reverse Base Variables */
  --dark-mode__match: oklch(0% 0 0);
  --dark-mode__match-faded: oklch(0% 0 0 / 0.4);
  --dark-mode__match-faded2: oklch(0% 0 0 / 0.1);
  --dark-mode__reverse: oklch(100% 0 0);
  --dark-mode__reverse-faded: oklch(100% 0 0 / 0.4);
  --dark-mode__reverse-faded2: oklch(100% 0 0 / 0.1);
  --light-mode__match: oklch(100% 0 0);
  --light-mode__match-faded: oklch(100% 0 0 / 0.4);
  --light-mode__match-faded2: oklch(100% 0 0 / 0.1);
  --light-mode__reverse: oklch(0% 0 0);
  --light-mode__reverse-faded: oklch(0% 0 0 / 0.4);
  --light-mode__reverse-faded2: oklch(0% 0 0 / 0.1);
}

:root {
  /* reverse Light Mode Variables */
  --match: var(--light-mode__match);
  --match-faded: var(--light-mode__match-faded);
  --match-faded2: var(--light-mode__match-faded2);
  --reverse: var(--light-mode__reverse);
  --reverse-faded: var(--light-mode__reverse-faded);
  --reverse-faded2: var(--light-mode__reverse-faded2);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* reverse Dark Mode Variables */
    --match: var(--dark-mode__match);
    --match-faded: var(--dark-mode__match-faded);
    --match-faded2: var(--dark-mode__match-faded2);
    --reverse: var(--dark-mode__reverse);
    --reverse-faded: var(--dark-mode__reverse-faded);
    --reverse-faded2: var(--dark-mode__reverse-faded2);
  }
}

:root {
  /* reverse Border Variables */
  --match-border: 1px solid var(--match);
  --match-border-faded: 1px solid var(--match-faded);
  --match-border-faded2: 1px solid var(--match-faded2);
  --reverse-border: 1px solid var(--reverse);
  --reverse-border-faded: 1px solid var(--reverse-faded);
  --reverse-border-faded2: 1px solid var(--reverse-faded2);
}

:root {
  /* Weight Variables */
  --weight-100: 100;
  --weight-200: 200;
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;
  --weight-900: 900;
}

:root {
  /* Width Variables */
  --default-width: min(100vw - 1.4rem, 42rem);
  --full-width: calc(100vw - 1.4rem);
  --large-width: min(100vw - 1.4rem, 50rem);
  --small-width: min(100vw - 1.4rem, 33rem);
  --xlarge-width: min(100vw - 1.4rem, 54rem);
  --xsmall-width: min(100vw - 1.4rem, 16rem);
  --xxlarge-width: min(100vw - 1.4rem, 58rem);
  --xxsmall-width: min(100vw - 1.4rem, 7rem);
  --xxxlarge-width: min(100vw - 1.4rem, 64rem);
  --xxxsmall-width: min(100vw - 1.4rem, 3rem);
}

/* Base Reset */
*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
}
*,
::after,
::before,
::backdrop,
::file-selector-button {
  margin: 0;
}
body {
  line-height: var(--default-line-height);
}
dt > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
dl > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
dd > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
li > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
ol > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
ul > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
audio,
canvas,
embed,
iframe,
img,
map,
object,
svg,
video {
  display: block;
}

/* Alignments */
.align-center {
  text-align: var(--align-center);
}
.align-end {
  text-align: var(--align-end);
}
.align-justify {
  text-align: var(--align-justify);
}
.align-left {
  text-align: var(--align-left);
}
.align-right {
  text-align: var(--align-right);
}
.align-start {
  text-align: var(--align-start);
}
.nowrap {
  white-space: nowrap;
}

/* B&W Backgrounds */
.black-background {
  background-color: var(--black);
}
.black-background-faded {
  background-color: var(--black-faded);
}
.black-background-faded2 {
  background-color: var(--black-faded2);
}
.white-background {
  background-color: var(--white);
}
.white-background-faded {
  background-color: var(--white-faded);
}
.white-background-faded2 {
  background-color: var(--white-faded2);
}

/* B&W Borders */
.black-block-border {
  border-block: var(--black-border);
}
.black-block-border-faded {
  border-block: var(--black-border-faded);
}
.black-block-border-faded2 {
  border-block: var(--black-border-faded2);
}
.black-border {
  border: var(--black-border);
}
.black-border-faded {
  border: var(--black-border-faded);
}
.black-border-faded2 {
  border: var(--black-border-faded2);
}
.black-bottom-border {
  border-bottom: var(--black-border);
}
.black-bottom-border-faded {
  border-bottom: var(--black-border-faded);
}
.black-bottom-border-faded2 {
  border-bottom: var(--black-border-faded2);
}
.black-inline-border {
  border-inline: var(--black-border);
}
.black-inline-border-faded {
  border-inline: var(--black-border-faded);
}
.black-inline-border-faded2 {
  border-inline: var(--black-border-faded2);
}
.black-left-border {
  border-left: var(--black-border);
}
.black-left-border-faded {
  border-left: var(--black-border-faded);
}
.black-left-border-faded2 {
  border-left: var(--black-border-faded2);
}
.black-right-border {
  border-right: var(--black-border);
}
.black-right-border-faded {
  border-right: var(--black-border-faded);
}
.black-right-border-faded2 {
  border-right: var(--black-border-faded2);
}
.black-top-border {
  border-top: var(--black-border);
}
.black-top-border-faded {
  border-top: var(--black-border-faded);
}
.black-top-border-faded2 {
  border-top: var(--black-border-faded2);
}
.white-block-border {
  border-block: var(--white-border);
}
.white-block-border-faded {
  border-block: var(--white-border-faded);
}
.white-block-border-faded2 {
  border-block: var(--white-border-faded2);
}
.white-border {
  border: var(--white-border);
}
.white-border-faded {
  border: var(--white-border-faded);
}
.white-border-faded2 {
  border: var(--white-border-faded2);
}
.white-bottom-border {
  border-bottom: var(--white-border);
}
.white-bottom-border-faded {
  border-bottom: var(--white-border-faded);
}
.white-bottom-border-faded2 {
  border-bottom: var(--white-border-faded2);
}
.white-inline-border {
  border-inline: var(--white-border);
}
.white-inline-border-faded {
  border-inline: var(--white-border-faded);
}
.white-inline-border-faded2 {
  border-inline: var(--white-border-faded2);
}
.white-left-border {
  border-left: var(--white-border);
}
.white-left-border-faded {
  border-left: var(--white-border-faded);
}
.white-left-border-faded2 {
  border-left: var(--white-border-faded2);
}
.white-right-border {
  border-right: var(--white-border);
}
.white-right-border-faded {
  border-right: var(--white-border-faded);
}
.white-right-border-faded2 {
  border-right: var(--white-border-faded2);
}
.white-top-border {
  border-top: var(--white-border);
}
.white-top-border-faded {
  border-top: var(--white-border-faded);
}
.white-top-border-faded2 {
  border-top: var(--white-border-faded2);
}

/* B&W Text */
.black {
  color: var(--black);
}
.black-faded {
  color: var(--black-faded);
}
.black-faded2 {
  color: var(--black-faded2);
}
.white {
  color: var(--white);
}
.white-faded {
  color: var(--white-faded);
}
.white-faded2 {
  color: var(--white-faded2);
}

/* Border Radii */
.default-bottom-left-radius {
  border-bottom-left-radius: var(--default-radius);
}
.default-bottom-right-radius {
  border-bottom-right-radius: var(--default-radius);
}
.default-radius {
  border-radius: var(--default-radius);
}
.default-top-left-radius {
  border-top-left-radius: var(--default-radius);
}
.default-top-right-radius {
  border-top-right-radius: var(--default-radius);
}
.large-bottom-left-radius {
  border-bottom-left-radius: var(--large-radius);
}
.large-bottom-right-radius {
  border-bottom-right-radius: var(--large-radius);
}
.large-radius {
  border-radius: var(--large-radius);
}
.large-top-left-radius {
  border-top-left-radius: var(--large-radius);
}
.large-top-right-radius {
  border-top-right-radius: var(--large-radius);
}
.small-bottom-left-radius {
  border-bottom-left-radius: var(--small-radius);
}
.small-bottom-right-radius {
  border-bottom-right-radius: var(--small-radius);
}
.small-radius {
  border-radius: var(--small-radius);
}
.small-top-left-radius {
  border-top-left-radius: var(--small-radius);
}
.small-top-right-radius {
  border-top-right-radius: var(--small-radius);
}
.xlarge-bottom-left-radius {
  border-bottom-left-radius: var(--xlarge-radius);
}
.xlarge-bottom-right-radius {
  border-bottom-right-radius: var(--xlarge-radius);
}
.xlarge-radius {
  border-radius: var(--xlarge-radius);
}
.xlarge-top-left-radius {
  border-top-left-radius: var(--xlarge-radius);
}
.xlarge-top-right-radius {
  border-top-right-radius: var(--xlarge-radius);
}
.xsmall-bottom-left-radius {
  border-bottom-left-radius: var(--xsmall-radius);
}
.xsmall-bottom-right-radius {
  border-bottom-right-radius: var(--xsmall-radius);
}
.xsmall-radius {
  border-radius: var(--xsmall-radius);
}
.xsmall-top-left-radius {
  border-top-left-radius: var(--xsmall-radius);
}
.xsmall-top-right-radius {
  border-top-right-radius: var(--xsmall-radius);
}
.xxlarge-bottom-left-radius {
  border-bottom-left-radius: var(--xxlarge-radius);
}
.xxlarge-bottom-right-radius {
  border-bottom-right-radius: var(--xxlarge-radius);
}
.xxlarge-radius {
  border-radius: var(--xxlarge-radius);
}
.xxlarge-top-left-radius {
  border-top-left-radius: var(--xxlarge-radius);
}
.xxlarge-top-right-radius {
  border-top-right-radius: var(--xxlarge-radius);
}
.xxsmall-bottom-left-radius {
  border-bottom-left-radius: var(--xxsmall-radius);
}
.xxsmall-bottom-right-radius {
  border-bottom-right-radius: var(--xxsmall-radius);
}
.xxsmall-radius {
  border-radius: var(--xxsmall-radius);
}
.xxsmall-top-left-radius {
  border-top-left-radius: var(--xxsmall-radius);
}
.xxsmall-top-right-radius {
  border-top-right-radius: var(--xxsmall-radius);
}
.xxxlarge-bottom-left-radius {
  border-bottom-left-radius: var(--xxxlarge-radius);
}
.xxxlarge-bottom-right-radius {
  border-bottom-right-radius: var(--xxxlarge-radius);
}
.xxxlarge-radius {
  border-radius: var(--xxxlarge-radius);
}
.xxxlarge-top-left-radius {
  border-top-left-radius: var(--xxxlarge-radius);
}
.xxxlarge-top-right-radius {
  border-top-right-radius: var(--xxxlarge-radius);
}
.xxxsmall-bottom-left-radius {
  border-bottom-left-radius: var(--xxxsmall-radius);
}
.xxxsmall-bottom-right-radius {
  border-bottom-right-radius: var(--xxxsmall-radius);
}
.xxxsmall-radius {
  border-radius: var(--xxxsmall-radius);
}
.xxxsmall-top-left-radius {
  border-top-left-radius: var(--xxxsmall-radius);
}
.xxxsmall-top-right-radius {
  border-top-right-radius: var(--xxxsmall-radius);
}

/* Color Backgrounds */
.accent-background {
  background-color: var(--accent);
}
.accent-background-faded {
  background-color: var(--accent-faded);
}
.accent-background-faded2 {
  background-color: var(--accent-faded2);
}
.default-background {
  background-color: var(--default);
}
.default-background-faded {
  background-color: var(--default-faded);
}
.default-background-faded2 {
  background-color: var(--default-faded2);
}
.heading-background {
  background-color: var(--heading);
}
.heading-background-faded {
  background-color: var(--heading-faded);
}
.heading-background-faded2 {
  background-color: var(--heading-faded2);
}
.link-background {
  background-color: var(--link);
}
.link-background-faded {
  background-color: var(--link-faded);
}
.link-background-faded2 {
  background-color: var(--link-faded2);
}
.warning-background {
  background-color: var(--warning);
}
.warning-background-faded {
  background-color: var(--warning-faded);
}
.warning-background-faded2 {
  background-color: var(--warning-faded2);
}

/* Color Borders */
.accent-block-border {
  border-block: var(--accent-border);
}
.accent-block-border-faded {
  border-block: var(--accent-border-faded);
}
.accent-block-border-faded2 {
  border-block: var(--accent-border-faded2);
}
.accent-border {
  border: var(--accent-border);
}
.accent-border-faded {
  border: var(--accent-border-faded);
}
.accent-border-faded2 {
  border: var(--accent-border-faded2);
}
.accent-bottom-border {
  border-bottom: var(--accent-border);
}
.accent-bottom-border-faded {
  border-bottom: var(--accent-border-faded);
}
.accent-bottom-border-faded2 {
  border-bottom: var(--accent-border-faded2);
}
.accent-inline-border {
  border-inline: var(--accent-border);
}
.accent-inline-border-faded {
  border-inline: var(--accent-border-faded);
}
.accent-inline-border-faded2 {
  border-inline: var(--accent-border-faded2);
}
.accent-left-border {
  border-left: var(--accent-border);
}
.accent-left-border-faded {
  border-left: var(--accent-border-faded);
}
.accent-left-border-faded2 {
  border-left: var(--accent-border-faded2);
}
.accent-right-border {
  border-right: var(--accent-border);
}
.accent-right-border-faded {
  border-right: var(--accent-border-faded);
}
.accent-right-border-faded2 {
  border-right: var(--accent-border-faded2);
}
.accent-top-border {
  border-top: var(--accent-border);
}
.accent-top-border-faded {
  border-top: var(--accent-border-faded);
}
.accent-top-border-faded2 {
  border-top: var(--accent-border-faded2);
}
.default-block-border {
  border-block: var(--default-border);
}
.default-block-border-faded {
  border-block: var(--default-border-faded);
}
.default-block-border-faded2 {
  border-block: var(--default-border-faded2);
}
.default-border {
  border: var(--default-border);
}
.default-border-faded {
  border: var(--default-border-faded);
}
.default-border-faded2 {
  border: var(--default-border-faded2);
}
.default-bottom-border {
  border-bottom: var(--default-border);
}
.default-bottom-border-faded {
  border-bottom: var(--default-border-faded);
}
.default-bottom-border-faded2 {
  border-bottom: var(--default-border-faded2);
}
.default-inline-border {
  border-inline: var(--default-border);
}
.default-inline-border-faded {
  border-inline: var(--default-border-faded);
}
.default-inline-border-faded2 {
  border-inline: var(--default-border-faded2);
}
.default-left-border {
  border-left: var(--default-border);
}
.default-left-border-faded {
  border-left: var(--default-border-faded);
}
.default-left-border-faded2 {
  border-left: var(--default-border-faded2);
}
.default-right-border {
  border-right: var(--default-border);
}
.default-right-border-faded {
  border-right: var(--default-border-faded);
}
.default-right-border-faded2 {
  border-right: var(--default-border-faded2);
}
.default-top-border {
  border-top: var(--default-border);
}
.default-top-border-faded {
  border-top: var(--default-border-faded);
}
.default-top-border-faded2 {
  border-top: var(--default-border-faded2);
}
.heading-block-border {
  border-block: var(--heading-border);
}
.heading-block-border-faded {
  border-block: var(--heading-border-faded);
}
.heading-block-border-faded2 {
  border-block: var(--heading-border-faded2);
}
.heading-border {
  border: var(--heading-border);
}
.heading-border-faded {
  border: var(--heading-border-faded);
}
.heading-border-faded2 {
  border: var(--heading-border-faded2);
}
.heading-bottom-border {
  border-bottom: var(--heading-border);
}
.heading-bottom-border-faded {
  border-bottom: var(--heading-border-faded);
}
.heading-bottom-border-faded2 {
  border-bottom: var(--heading-border-faded2);
}
.heading-inline-border {
  border-inline: var(--heading-border);
}
.heading-inline-border-faded {
  border-inline: var(--heading-border-faded);
}
.heading-inline-border-faded2 {
  border-inline: var(--heading-border-faded2);
}
.heading-left-border {
  border-left: var(--heading-border);
}
.heading-left-border-faded {
  border-left: var(--heading-border-faded);
}
.heading-left-border-faded2 {
  border-left: var(--heading-border-faded2);
}
.heading-right-border {
  border-right: var(--heading-border);
}
.heading-right-border-faded {
  border-right: var(--heading-border-faded);
}
.heading-right-border-faded2 {
  border-right: var(--heading-border-faded2);
}
.heading-top-border {
  border-top: var(--heading-border);
}
.heading-top-border-faded {
  border-top: var(--heading-border-faded);
}
.heading-top-border-faded2 {
  border-top: var(--heading-border-faded2);
}
.link-block-border {
  border-block: var(--link-border);
}
.link-block-border-faded {
  border-block: var(--link-border-faded);
}
.link-block-border-faded2 {
  border-block: var(--link-border-faded2);
}
.link-border {
  border: var(--link-border);
}
.link-border-faded {
  border: var(--link-border-faded);
}
.link-border-faded2 {
  border: var(--link-border-faded2);
}
.link-bottom-border {
  border-bottom: var(--link-border);
}
.link-bottom-border-faded {
  border-bottom: var(--link-border-faded);
}
.link-bottom-border-faded2 {
  border-bottom: var(--link-border-faded2);
}
.link-inline-border {
  border-inline: var(--link-border);
}
.link-inline-border-faded {
  border-inline: var(--link-border-faded);
}
.link-inline-border-faded2 {
  border-inline: var(--link-border-faded2);
}
.link-left-border {
  border-left: var(--link-border);
}
.link-left-border-faded {
  border-left: var(--link-border-faded);
}
.link-left-border-faded2 {
  border-left: var(--link-border-faded2);
}
.link-right-border {
  border-right: var(--link-border);
}
.link-right-border-faded {
  border-right: var(--link-border-faded);
}
.link-right-border-faded2 {
  border-right: var(--link-border-faded2);
}
.link-top-border {
  border-top: var(--link-border);
}
.link-top-border-faded {
  border-top: var(--link-border-faded);
}
.link-top-border-faded2 {
  border-top: var(--link-border-faded2);
}
.warning-block-border {
  border-block: var(--warning-border);
}
.warning-block-border-faded {
  border-block: var(--warning-border-faded);
}
.warning-block-border-faded2 {
  border-block: var(--warning-border-faded2);
}
.warning-border {
  border: var(--warning-border);
}
.warning-border-faded {
  border: var(--warning-border-faded);
}
.warning-border-faded2 {
  border: var(--warning-border-faded2);
}
.warning-bottom-border {
  border-bottom: var(--warning-border);
}
.warning-bottom-border-faded {
  border-bottom: var(--warning-border-faded);
}
.warning-bottom-border-faded2 {
  border-bottom: var(--warning-border-faded2);
}
.warning-inline-border {
  border-inline: var(--warning-border);
}
.warning-inline-border-faded {
  border-inline: var(--warning-border-faded);
}
.warning-inline-border-faded2 {
  border-inline: var(--warning-border-faded2);
}
.warning-left-border {
  border-left: var(--warning-border);
}
.warning-left-border-faded {
  border-left: var(--warning-border-faded);
}
.warning-left-border-faded2 {
  border-left: var(--warning-border-faded2);
}
.warning-right-border {
  border-right: var(--warning-border);
}
.warning-right-border-faded {
  border-right: var(--warning-border-faded);
}
.warning-right-border-faded2 {
  border-right: var(--warning-border-faded2);
}
.warning-top-border {
  border-top: var(--warning-border);
}
.warning-top-border-faded {
  border-top: var(--warning-border-faded);
}
.warning-top-border-faded2 {
  border-top: var(--warning-border-faded2);
}

/* Color Text */
.accent {
  color: var(--accent);
}
.accent-faded {
  color: var(--accent-faded);
}
.accent-faded2 {
  color: var(--accent-faded2);
}
.background {
  color: var(--background);
}
.default {
  color: var(--default);
}
.default-faded {
  color: var(--default-faded);
}
.default-faded2 {
  color: var(--default-faded2);
}
.heading {
  color: var(--heading);
}
.heading-faded {
  color: var(--heading-faded);
}
.heading-faded2 {
  color: var(--heading-faded2);
}
.link {
  color: var(--link);
}
.link-faded {
  color: var(--link-faded);
}
.link-faded2 {
  color: var(--link-faded2);
}
.warning {
  color: var(--warning);
}
.warning-faded {
  color: var(--warning-faded);
}
.warning-faded2 {
  color: var(--warning-faded2);
}

/* Flows */
.default-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
.large-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--large-flow));
}
.small-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--small-flow));
}
.xlarge-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--xlarge-flow));
}
.xsmall-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--xsmall-flow));
}
.xxlarge-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--xxlarge-flow));
}
.xxsmall-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--xxsmall-flow));
}
.xxxlarge-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--xxxlarge-flow));
}
.xxxsmall-flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--xxxsmall-flow));
}

/* Font Sizes */
.default-font {
  font-size: var(--default-font);
}
.large-font {
  font-size: var(--large-font);
}
.small-font {
  font-size: var(--small-font);
}
.xlarge-font {
  font-size: var(--xlarge-font);
}
.xsmall-font {
  font-size: var(--xsmall-font);
}
.xxlarge-font {
  font-size: var(--xxlarge-font);
}
.xxsmall-font {
  font-size: var(--xxsmall-font);
}
.xxxlarge-font {
  font-size: var(--xxxlarge-font);
}
.xxxsmall-font {
  font-size: var(--xxxsmall-font);
}

/* Line Heights */
.default-line-height {
  line-height: var(--default-line-height);
}
.large-line-height {
  line-height: var(--large-line-height);
}
.small-line-height {
  line-height: var(--small-line-height);
}
.xlarge-line-height {
  line-height: var(--xlarge-line-height);
}
.xsmall-line-height {
  line-height: var(--xsmall-line-height);
}
.xxlarge-line-height {
  line-height: var(--xxlarge-line-height);
}
.xxsmall-line-height {
  line-height: var(--xxsmall-line-height);
}
.xxxlarge-line-height {
  line-height: var(--xxxlarge-line-height);
}
.xxxsmall-line-height {
  line-height: var(--xxxsmall-line-height);
}

/* Margins */
.auto-inline-margin {
  margin-inline: auto;
}
.default-block-margin {
  margin-block: var(--default-margin);
}
.default-bottom-margin {
  margin-bottom: var(--default-margin);
}
.default-inline-margin {
  margin-inline: var(--default-margin);
}
.default-left-margin {
  margin-left: var(--default-margin);
}
.default-margin {
  margin: var(--default-margin);
}
.default-right-margin {
  margin-right: var(--default-margin);
}
.default-top-margin {
  margin-top: var(--default-margin);
}
.large-block-margin {
  margin-block: var(--large-margin);
}
.large-bottom-margin {
  margin-bottom: var(--large-margin);
}
.large-inline-margin {
  margin-inline: var(--large-margin);
}
.large-left-margin {
  margin-left: var(--large-margin);
}
.large-margin {
  margin: var(--large-margin);
}
.large-right-margin {
  margin-right: var(--large-margin);
}
.large-top-margin {
  margin-top: var(--large-margin);
}
.small-block-margin {
  margin-block: var(--small-margin);
}
.small-bottom-margin {
  margin-bottom: var(--small-margin);
}
.small-inline-margin {
  margin-inline: var(--small-margin);
}
.small-left-margin {
  margin-left: var(--small-margin);
}
.small-margin {
  margin: var(--small-margin);
}
.small-right-margin {
  margin-right: var(--small-margin);
}
.small-top-margin {
  margin-top: var(--small-margin);
}
.xlarge-block-margin {
  margin-block: var(--xlarge-margin);
}
.xlarge-bottom-margin {
  margin-bottom: var(--xlarge-margin);
}
.xlarge-inline-margin {
  margin-inline: var(--xlarge-margin);
}
.xlarge-left-margin {
  margin-left: var(--xlarge-margin);
}
.xlarge-margin {
  margin: var(--xlarge-margin);
}
.xlarge-right-margin {
  margin-right: var(--xlarge-margin);
}
.xlarge-top-margin {
  margin-top: var(--xlarge-margin);
}
.xsmall-block-margin {
  margin-block: var(--xsmall-margin);
}
.xsmall-bottom-margin {
  margin-bottom: var(--xsmall-margin);
}
.xsmall-inline-margin {
  margin-inline: var(--xsmall-margin);
}
.xsmall-left-margin {
  margin-left: var(--xsmall-margin);
}
.xsmall-margin {
  margin: var(--xsmall-margin);
}
.xsmall-right-margin {
  margin-right: var(--xsmall-margin);
}
.xsmall-top-margin {
  margin-top: var(--xsmall-margin);
}
.xxlarge-block-margin {
  margin-block: var(--xxlarge-margin);
}
.xxlarge-bottom-margin {
  margin-bottom: var(--xxlarge-margin);
}
.xxlarge-inline-margin {
  margin-inline: var(--xxlarge-margin);
}
.xxlarge-left-margin {
  margin-left: var(--xxlarge-margin);
}
.xxlarge-margin {
  margin: var(--xxlarge-margin);
}
.xxlarge-right-margin {
  margin-right: var(--xxlarge-margin);
}
.xxlarge-top-margin {
  margin-top: var(--xxlarge-margin);
}
.xxsmall-block-margin {
  margin-block: var(--xxsmall-margin);
}
.xxsmall-bottom-margin {
  margin-bottom: var(--xxsmall-margin);
}
.xxsmall-inline-margin {
  margin-inline: var(--xxsmall-margin);
}
.xxsmall-left-margin {
  margin-left: var(--xxsmall-margin);
}
.xxsmall-margin {
  margin: var(--xxsmall-margin);
}
.xxsmall-right-margin {
  margin-right: var(--xxsmall-margin);
}
.xxsmall-top-margin {
  margin-top: var(--xxsmall-margin);
}
.xxxlarge-block-margin {
  margin-block: var(--xxxlarge-margin);
}
.xxxlarge-bottom-margin {
  margin-bottom: var(--xxxlarge-margin);
}
.xxxlarge-inline-margin {
  margin-inline: var(--xxxlarge-margin);
}
.xxxlarge-left-margin {
  margin-left: var(--xxxlarge-margin);
}
.xxxlarge-margin {
  margin: var(--xxxlarge-margin);
}
.xxxlarge-right-margin {
  margin-right: var(--xxxlarge-margin);
}
.xxxlarge-top-margin {
  margin-top: var(--xxxlarge-margin);
}
.xxxsmall-block-margin {
  margin-block: var(--xxxsmall-margin);
}
.xxxsmall-bottom-margin {
  margin-bottom: var(--xxxsmall-margin);
}
.xxxsmall-inline-margin {
  margin-inline: var(--xxxsmall-margin);
}
.xxxsmall-left-margin {
  margin-left: var(--xxxsmall-margin);
}
.xxxsmall-margin {
  margin: var(--xxxsmall-margin);
}
.xxxsmall-right-margin {
  margin-right: var(--xxxsmall-margin);
}
.xxxsmall-top-margin {
  margin-top: var(--xxxsmall-margin);
}

/* Paddings */
.default-block-padding {
  padding-block: var(--default-padding);
}
.default-bottom-padding {
  padding-bottom: var(--default-padding);
}
.default-inline-padding {
  padding-inline: var(--default-padding);
}
.default-left-padding {
  padding-left: var(--default-padding);
}
.default-padding {
  padding: var(--default-padding);
}
.default-right-padding {
  padding-right: var(--default-padding);
}
.default-top-padding {
  padding-top: var(--default-padding);
}
.large-block-padding {
  padding-block: var(--large-padding);
}
.large-bottom-padding {
  padding-bottom: var(--large-padding);
}
.large-inline-padding {
  padding-inline: var(--large-padding);
}
.large-left-padding {
  padding-left: var(--large-padding);
}
.large-padding {
  padding: var(--large-padding);
}
.large-right-padding {
  padding-right: var(--large-padding);
}
.large-top-padding {
  padding-top: var(--large-padding);
}
.small-block-padding {
  padding-block: var(--small-padding);
}
.small-bottom-padding {
  padding-bottom: var(--small-padding);
}
.small-inline-padding {
  padding-inline: var(--small-padding);
}
.small-left-padding {
  padding-left: var(--small-padding);
}
.small-padding {
  padding: var(--small-padding);
}
.small-right-padding {
  padding-right: var(--small-padding);
}
.small-top-padding {
  padding-top: var(--small-padding);
}
.xlarge-block-padding {
  padding-block: var(--xlarge-padding);
}
.xlarge-bottom-padding {
  padding-bottom: var(--xlarge-padding);
}
.xlarge-inline-padding {
  padding-inline: var(--xlarge-padding);
}
.xlarge-left-padding {
  padding-left: var(--xlarge-padding);
}
.xlarge-padding {
  padding: var(--xlarge-padding);
}
.xlarge-right-padding {
  padding-right: var(--xlarge-padding);
}
.xlarge-top-padding {
  padding-top: var(--xlarge-padding);
}
.xsmall-block-padding {
  padding-block: var(--xsmall-padding);
}
.xsmall-bottom-padding {
  padding-bottom: var(--xsmall-padding);
}
.xsmall-inline-padding {
  padding-inline: var(--xsmall-padding);
}
.xsmall-left-padding {
  padding-left: var(--xsmall-padding);
}
.xsmall-padding {
  padding: var(--xsmall-padding);
}
.xsmall-right-padding {
  padding-right: var(--xsmall-padding);
}
.xsmall-top-padding {
  padding-top: var(--xsmall-padding);
}
.xxlarge-block-padding {
  padding-block: var(--xxlarge-padding);
}
.xxlarge-bottom-padding {
  padding-bottom: var(--xxlarge-padding);
}
.xxlarge-inline-padding {
  padding-inline: var(--xxlarge-padding);
}
.xxlarge-left-padding {
  padding-left: var(--xxlarge-padding);
}
.xxlarge-padding {
  padding: var(--xxlarge-padding);
}
.xxlarge-right-padding {
  padding-right: var(--xxlarge-padding);
}
.xxlarge-top-padding {
  padding-top: var(--xxlarge-padding);
}
.xxsmall-block-padding {
  padding-block: var(--xxsmall-padding);
}
.xxsmall-bottom-padding {
  padding-bottom: var(--xxsmall-padding);
}
.xxsmall-inline-padding {
  padding-inline: var(--xxsmall-padding);
}
.xxsmall-left-padding {
  padding-left: var(--xxsmall-padding);
}
.xxsmall-padding {
  padding: var(--xxsmall-padding);
}
.xxsmall-right-padding {
  padding-right: var(--xxsmall-padding);
}
.xxsmall-top-padding {
  padding-top: var(--xxsmall-padding);
}
.xxxlarge-block-padding {
  padding-block: var(--xxxlarge-padding);
}
.xxxlarge-bottom-padding {
  padding-bottom: var(--xxxlarge-padding);
}
.xxxlarge-inline-padding {
  padding-inline: var(--xxxlarge-padding);
}
.xxxlarge-left-padding {
  padding-left: var(--xxxlarge-padding);
}
.xxxlarge-padding {
  padding: var(--xxxlarge-padding);
}
.xxxlarge-right-padding {
  padding-right: var(--xxxlarge-padding);
}
.xxxlarge-top-padding {
  padding-top: var(--xxxlarge-padding);
}
.xxxsmall-block-padding {
  padding-block: var(--xxxsmall-padding);
}
.xxxsmall-bottom-padding {
  padding-bottom: var(--xxxsmall-padding);
}
.xxxsmall-inline-padding {
  padding-inline: var(--xxxsmall-padding);
}
.xxxsmall-left-padding {
  padding-left: var(--xxxsmall-padding);
}
.xxxsmall-padding {
  padding: var(--xxxsmall-padding);
}
.xxxsmall-right-padding {
  padding-right: var(--xxxsmall-padding);
}
.xxxsmall-top-padding {
  padding-top: var(--xxxsmall-padding);
}

/* reverse Background */
.match-background {
  background-color: var(--match);
}
.match-background-faded {
  background-color: var(--match-faded);
}
.match-background-faded2 {
  background-color: var(--match-faded2);
}
.reverse-background {
  background-color: var(--reverse);
}
.reverse-background-faded {
  background-color: var(--reverse-faded);
}
.reverse-background-faded2 {
  background-color: var(--reverse-faded2);
}

/* reverse Border */
.match-block-border {
  border-block: var(--match-border);
}
.match-block-border-faded {
  border-block: var(--match-border-faded);
}
.match-block-border-faded2 {
  border-block: var(--match-border-faded2);
}
.match-border {
  border: var(--match-border);
}
.match-border-faded {
  border: var(--match-border-faded);
}
.match-border-faded2 {
  border: var(--match-border-faded2);
}
.match-bottom-border {
  border-bottom: var(--match-border);
}
.match-bottom-border-faded {
  border-bottom: var(--match-border-faded);
}
.match-bottom-border-faded2 {
  border-bottom: var(--match-border-faded2);
}
.match-inline-border {
  border-inline: var(--match-border);
}
.match-inline-border-faded {
  border-inline: var(--match-border-faded);
}
.match-inline-border-faded2 {
  border-inline: var(--match-border-faded2);
}
.match-left-border {
  border-left: var(--match-border);
}
.match-left-border-faded {
  border-left: var(--match-border-faded);
}
.match-left-border-faded2 {
  border-left: var(--match-border-faded2);
}
.match-right-border {
  border-right: var(--match-border);
}
.match-right-border-faded {
  border-right: var(--match-border-faded);
}
.match-right-border-faded2 {
  border-right: var(--match-border-faded2);
}
.match-top-border {
  border-top: var(--match-border);
}
.match-top-border-faded {
  border-top: var(--match-border-faded);
}
.match-top-border-faded2 {
  border-top: var(--match-border-faded2);
}
.reverse-block-border {
  border-block: var(--reverse-border);
}
.reverse-block-border-faded {
  border-block: var(--reverse-border-faded);
}
.reverse-block-border-faded2 {
  border-block: var(--reverse-border-faded2);
}
.reverse-border {
  border: var(--reverse-border);
}
.reverse-border-faded {
  border: var(--reverse-border-faded);
}
.reverse-border-faded2 {
  border: var(--reverse-border-faded2);
}
.reverse-bottom-border {
  border-bottom: var(--reverse-border);
}
.reverse-bottom-border-faded {
  border-bottom: var(--reverse-border-faded);
}
.reverse-bottom-border-faded2 {
  border-bottom: var(--reverse-border-faded2);
}
.reverse-inline-border {
  border-inline: var(--reverse-border);
}
.reverse-inline-border-faded {
  border-inline: var(--reverse-border-faded);
}
.reverse-inline-border-faded2 {
  border-inline: var(--reverse-border-faded2);
}
.reverse-left-border {
  border-left: var(--reverse-border);
}
.reverse-left-border-faded {
  border-left: var(--reverse-border-faded);
}
.reverse-left-border-faded2 {
  border-left: var(--reverse-border-faded2);
}
.reverse-right-border {
  border-right: var(--reverse-border);
}
.reverse-right-border-faded {
  border-right: var(--reverse-border-faded);
}
.reverse-right-border-faded2 {
  border-right: var(--reverse-border-faded2);
}
.reverse-top-border {
  border-top: var(--reverse-border);
}
.reverse-top-border-faded {
  border-top: var(--reverse-border-faded);
}
.reverse-top-border-faded2 {
  border-top: var(--reverse-border-faded2);
}

/* reverse Text */
.match {
  color: var(--match);
}
.match-faded {
  color: var(--match-faded);
}
.match-faded2 {
  color: var(--match-faded2);
}
.reverse {
  color: var(--reverse);
}
.reverse-faded {
  color: var(--reverse-faded);
}
.reverse-faded2 {
  color: var(--reverse-faded2);
}

/* Weights */
.weight-100 {
  font-weight: var(--weight-100);
}
.weight-200 {
  font-weight: var(--weight-200);
}
.weight-300 {
  font-weight: var(--weight-300);
}
.weight-400 {
  font-weight: var(--weight-400);
}
.weight-500 {
  font-weight: var(--weight-500);
}
.weight-600 {
  font-weight: var(--weight-600);
}
.weight-700 {
  font-weight: var(--weight-700);
}
.weight-800 {
  font-weight: var(--weight-800);
}
.weight-900 {
  font-weight: var(--weight-900);
}

/* Widths and Max/Min Widths */
.default-max-width {
  max-width: var(--default-width);
}
.default-min-width {
  min-width: var(--default-width);
}
.default-width {
  width: var(--default-width);
}
.full-max-width {
  max-width: var(--full-width);
}
.full-min-width {
  min-width: var(--full-width);
}
.full-width {
  width: var(--full-width);
}
.large-max-width {
  max-width: var(--large-width);
}
.large-min-width {
  min-width: var(--large-width);
}
.large-width {
  width: var(--large-width);
}
.small-max-width {
  max-width: var(--small-width);
}
.small-min-width {
  min-width: var(--small-width);
}
.small-width {
  width: var(--small-width);
}
.xlarge-max-width {
  max-width: var(--xlarge-width);
}
.xlarge-min-width {
  min-width: var(--xlarge-width);
}
.xlarge-width {
  width: var(--xlarge-width);
}
.xsmall-max-width {
  max-width: var(--xsmall-width);
}
.xsmall-min-width {
  min-width: var(--xsmall-width);
}
.xsmall-width {
  width: var(--xsmall-width);
}
.xxlarge-max-width {
  max-width: var(--xxlarge-width);
}
.xxlarge-min-width {
  min-width: var(--xxlarge-width);
}
.xxlarge-width {
  width: var(--xxlarge-width);
}
.xxsmall-max-width {
  max-width: var(--xxsmall-width);
}
.xxsmall-min-width {
  min-width: var(--xxsmall-width);
}
.xxsmall-width {
  width: var(--xxsmall-width);
}
.xxxlarge-max-width {
  max-width: var(--xxxlarge-width);
}
.xxxlarge-min-width {
  min-width: var(--xxxlarge-width);
}
.xxxlarge-width {
  width: var(--xxxlarge-width);
}
.xxxsmall-max-width {
  max-width: var(--xxxsmall-width);
}
.xxxsmall-min-width {
  min-width: var(--xxxsmall-width);
}
.xxxsmall-width {
  width: var(--xxxsmall-width);
}

/* Wrappers */
.default-wrapper {
  width: var(--default-width);
  margin-inline: auto;
}
.full-wrapper {
  width: var(--full-width);
  margin-inline: auto;
}
.large-wrapper {
  width: var(--large-width);
  margin-inline: auto;
}
.small-wrapper {
  width: var(--small-width);
  margin-inline: auto;
}
.xlarge-wrapper {
  width: var(--xlarge-width);
  margin-inline: auto;
}
.xsmall-wrapper {
  width: var(--xsmall-width);
  margin-inline: auto;
}
.xxlarge-wrapper {
  width: var(--xxlarge-width);
  margin-inline: auto;
}
.xxsmall-wrapper {
  width: var(--xxsmall-width);
  margin-inline: auto;
}
.xxxlarge-wrapper {
  width: var(--xxxlarge-width);
  margin-inline: auto;
}
.xxxsmall-wrapper {
  width: var(--xxxsmall-width);
  margin-inline: auto;
}

::marker {
  color: var(--default);
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--accent);
}
abbr {
  color: var(--accent);
  font-style: italic;
}
aside {
  margin-left: 20vw;
  font-style: italic;
  border-left: 3px solid var(--reverse-faded);
  padding: var(--default-padding);
}
audio {
  border: var(--accent-border);
}
b {
  font-weight: 900;
}
blockquote {
  margin: var(--large-margin);
  padding: var(--default-padding);
  background-color: var(--reverse-faded2);
}
body {
  background-color: var(--background);
  color: var(--default);
  font-family: system-ui;
  font-size: var(--default-font);
}
button {
  background-color: var(--match-faded);
  border: var(--reverse-border);
  border-radius: var(--xsmall-radius);
  color: var(--reverse);
  cursor: pointer;
  font-size: var(--default-font);
}
canvas {
  max-width: 100%;
}
caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: 900;
}
cite {
  font-style: italic;
}
.color-names-wrapper {
  display: grid;
  grid-template-columns: 5rem 1fr;
}
data {
  /* */
}
code {
  font-size: var(--small-font);
  padding-inline: var(--xsmall-padding);
  background-color: var(--reverse-faded2);
  border-radius: var(--xxsmall-radius);
}
dd {
  margin-left: var(--default-margin);
}
del {
  background-color: var(--accent-faded2);
  text-decoration: line-through;
}
details {
  border: var(--accent-border-faded);
  border-radius: var(--default-radius);
  padding: var(--default-padding);
}
details > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
dfn {
  font-style: italic;
}
dl {
  /* */
}
dt {
  /* */
}
em {
  font-style: italic;
}
embed {
  max-width: 100%;
}
fieldset {
  border-radius: var(--default-radius);
}
figcaption {
  background-color: var(--reverse);
  color: var(--match);
  font-size: var(--small-font);
  padding: var(--default-padding);
  text-align: var(--alight-center);
}
figure {
  max-width: 100%;
}
footer {
  color: var(--default-faded);
  font-size: var(--small-font);
  margin-bottom: var(--default-margin);
  margin-inline: auto;
  margin-top: var(--xlarge-margin);
  text-align: var(--align-center);
  width: var(--default-width);
}
h1 {
  border-bottom: var(--accent-border);
  color: var(--heading);
  font-size: var(--xxxlarge-font);
  font-weight: var(--weight-900);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
}
h2 {
  border-bottom: var(--accent-border-faded);
  color: var(--heading);
  font-size: var(--xxlarge-font);
  font-weight: var(--weight-900);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
}
h3 {
  border-bottom: var(--accent-border-faded);
  color: var(--heading);
  font-size: var(--xlarge-font);
  font-weight: var(--weight-900);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
}
h4 {
  color: var(--heading);
  font-size: var(--large-font);
  font-weight: var(--weight-900);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
}
h5 {
  color: var(--heading);
  font-size: var(--large-font);
  font-weight: var(--weight-400);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
}
h6 {
  color: var(--heading);
  font-size: var(--large-font);
  font-style: var(--italic);
  font-weight: var(--weight-400);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
}
header {
  margin-bottom: var(--small-margin);
  margin-inline: auto;
  margin-top: var(--xsmall-margin);
  width: var(--default-width);
}
hgroup {
  /* */
}
hr {
  border: none;
  border-top: 3px double var(--reverse-faded);
  color: var(--reverse);
  overflow: visible;
  text-align: var(--align-center);
  height: 5px;
}
hr::after {
  background: var(--background);
  content: '§';
  padding-inline: var(--large-padding);
  position: relative;
  top: -13px;
}
i {
  font-style: var(--italic);
}
iframe {
  max-width: 100%;
  border: var(--accent-border);
}
img {
  max-width: 100%;
  border: var(--accent-border);
}
input {
  margin: var(--xxxsmall-margin);
}
ins {
  background-color: var(--accent-faded);
  font-style: var(--italic);
}
kbd {
  background-color: var(--reverse-faded2);
  border: var(--reverse-faded);
  border-radius: var(--xsmall-radius);
  font-family: monospace;
  font-size: var(--small-font);
  padding-inline: var(--xxsmall-padding);
}
label {
  /* */
}
legend {
  font-weight: var(--weight-900);
}
li {
  /* */
}
main {
  margin-inline: auto;
  width: var(--default-width);
}
main > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}
map {
  max-width: 100%;
}
mark {
  background-color: var(--accent-faded2);
}
menu {
  /* */
}
meter {
  padding-inline: var(--default-padding);
}
nav {
  /* */
}
object {
  max-width: 100%;
}
ol {
  /* */
}
output {
  font-weight: var(--weight-900);
}
p {
  /* */
}
picture {
  max-width: 100%;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  overscroll-behavior-x: auto;
  /* */
}
progress {
  padding-inline: var(--small-padding);
}
q {
  font-style: var(--italic);
}
s {
  /* */
}
samp {
  font-weight: var(--weight-900);
}
search {
  padding-inline: var(--small-padding);
}
section {
  /* */
}
select {
  padding-inline: var(--small-padding);
}
small {
  font-size: var(--xsmall-font);
}
span {
  /* */
}
strong {
  /* */
}
sub {
  /* */
}
summary {
  font-weight: var(--weight-900);
}
sup {
  /* */
}
svg {
  max-width: 100%;
}
table {
  margin: var(--default-margin);
}
tbody {
  /* */
}
td {
  /* */
}
textarea {
  max-width: 100%;
}
tfoot {
  /* */
}
th {
  font-weight: var(--weight-900);
}
thead {
  /* */
}
time {
  /* */
}
tr {
  /* */
}
u {
  text-decoration: var(--accent-faded) var(--wavy) var(--underline);
}
ul {
  /* */
}
var {
  font-weight: var(--weight-900);
}
video {
  max-width: 100%;
}

.make-two-columns > bitty-js { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--xlarge-padding);
  border-radius: var(--large-radius);
}

bitty-js button {
  width: 14ch;
  min-height: 8ch;
  background-color: var(--match-faded);
}

bitty-js button:hover {
  background-color: var(--accent-faded);
}

bitty-js div label {
  display: block;
}

bitty-js div {
  padding: var(--xsmall-padding);
  border-radius: var(--default-radius);
}

.red{
  color: darkred;
}
.blue {
  color: blue;
}
.green {
  color: darkgreen;
}

.header-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.header-flex-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1em;
}

header {
  padding-top: var(--default-padding);
  border-bottom: var(--accent-border-faded2);
}

.code-block {
  line-height: 1.1;
  font-size: 0.84rem;
  background-color: var(--reverse-faded2);
  padding: var(--default-padding);
  border-radius: var(--default-radius);
}

pre code {
  border: 0;
  background-color: rgb(0 0 0 / 0);
}

.bitty-component-error {
  position: relative;
  border: 2px solid yellow;
  background-color: red;
}

.bitty-component-error::after {
  font-size: 0.8rem;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.2rem;
  content: "BITTY ERROR";
  background: rgb(0 0 0 / .5);  
  color: yellow;
  border-radius: 0.4rem;
}

.bitty-element-error {
  position: relative;
  border: 2px solid yellow;
  background-color: red;
}


.two-column-example { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2em;
}