/* Hi there! Welcome to the
stylesheet. It's got way more stuff
in it and is way larger than it needs
to be. Slimming it down is on the
list. */



/* Syntax highlighting */


.code {
 color: #657b83;
 background-color: #fdf6e3;
}
.comment, .meta.documentation {
 color: #93a1a1;
}
.string {
 color: #2aa198;
}
.string.regexp {
 color: #2aa198;
}
.constant.character.escape {
 color: #dc322f;
}
.constant.numeric {
 color: #6c71c4;
}
.variable {
 color: #268bd2;
}
.variable.function {
 color: #b58900;
}
.variable.language {
 color: #d33682;
}
.keyword {
 color: #859900;
}
.meta.import .keyword, .keyword.control.import, .keyword.control.import.from, .keyword.other.import, .keyword.control.at-rule.include, .keyword.control.at-rule.import {
 color: #cb4b16;
}
.keyword.operator.comparison, .keyword.operator.assignment, .keyword.operator.arithmetic {
 color: #657b83;
}
.storage {
 color: #859900;
}
.storage.modifier {
 color: #586e75;
}
.keyword.control.class, .entity.name, .entity.name.class, .entity.name.type.class {
 color: #b58900;
}
.entity.other.inherited-class {
 color: #268bd2;
}
.entity.other.attribute-name {
 color: #b58900;
}
.support, .support.type, .support.class {
 color: #859900;
}
.entity.name.function {
 color: #b58900;
}
.punctuation.definition.variable {
 color: #859900;
}
.constant, .constant.language, .meta.preprocessor {
 color: #b58900;
}
.entity.name.section {
 color: #cb4b16;
}
.support.function.construct, .keyword.other.new {
 color: #dc322f;
}
.constant.character, .constant.other {
 color: #cb4b16;
}
.entity.name.tag {
 color: #268bd2;
}
.punctuation.definition.tag.html, .punctuation.definition.tag.begin, .punctuation.definition.tag.end {
 color: #93a1a1;
}
.support.function {
 color: #859900;
}
.punctuation.separator.continuation {
 color: #dc322f;
}
.storage.type {
 color: #268bd2;
}
.support.type.exception {
 color: #cb4b16;
}
.keyword.other.special-method {
 color: #cb4b16;
}
.invalid {
 background-color: #ec9489;
}
.string.quoted.double, .string.quoted.single {
 color: #2aa198;
}
.punctuation.definition.string {
 color: #839496;
}
.meta.brace.square, .punctuation.section.brackets {
 color: #268bd2;
}
.meta.brace.round, .meta.brace.curly, .punctuation.section, .punctuation.section.block, .punctuation.definition.parameters, .punctuation.section.group {
 color: #657b83;
}
.support.constant.color, .invalid.deprecated.color.w3c-non-standard-color-name.scss {
 color: #b58900;
}
.meta.selector.css {
 color: #657b83;
}
.entity.name.tag.css, .entity.name.tag.scss, .source.less .keyword.control.html.elements, .source.sass .keyword.control.untitled {
 color: #b58900;
}
.entity.other.attribute-name.class {
 color: #b58900;
}
.entity.other.attribute-name.id {
 color: #b58900;
}
.entity.other.attribute-name.pseudo-element, .entity.other.attribute-name.tag.pseudo-element, .entity.other.attribute-name.pseudo-class, .entity.other.attribute-name.tag.pseudo-class {
 color: #268bd2;
}
.text.html.basic .meta.tag.other.html, .text.html.basic .meta.tag.any.html, .text.html.basic .meta.tag.block.any, .text.html.basic .meta.tag.inline.any, .text.html.basic .meta.tag.structure.any.html, .text.html.basic .source.js.embedded.html, .punctuation.separator.key-value.html {
 color: #657b83;
}
.text.html.basic .entity.other.attribute-name.html, .meta.tag.xml .entity.other.attribute-name {
 color: #b58900;
}
.keyword.other.special-method.ruby {
 color: #859900;
}
.variable.other.constant.ruby {
 color: #b58900;
}
.constant.other.symbol.ruby {
 color: #2aa198;
}
.keyword.other.special-method.ruby {
 color: #cb4b16;
}
.meta.array .support.function.construct.php {
 color: #b58900;
}
.entity.name.function.preprocessor.c, .meta.preprocessor.c.include, .meta.preprocessor.macro.c {
 color: #cb4b16;
}
.meta.preprocessor.c.include .string.quoted.other.lt-gt.include.c, .meta.preprocessor.c.include .punctuation.definition.string.begin.c, .meta.preprocessor.c.include .punctuation.definition.string.end.c {
 color: #2aa198;
}
.other.package.exclude, .other.remove {
 color: #dc322f;
}
.other.add {
 color: #2aa198;
}
.punctuation.section.group.tex, .punctuation.definition.arguments.begin.latex, .punctuation.definition.arguments.end.latex, .punctuation.definition.arguments.latex {
 color: #dc322f;
}
.meta.group.braces.tex {
 color: #b58900;
}
.string.other.math.tex {
 color: #b58900;
}
.variable.parameter.function.latex {
 color: #cb4b16;
}
.punctuation.definition.constant.math.tex {
 color: #dc322f;
}
.text.tex.latex .constant.other.math.tex, .constant.other.general.math.tex, .constant.other.general.math.tex, .constant.character.math.tex {
 color: #2aa198;
}
.string.other.math.tex {
 color: #b58900;
}
.punctuation.definition.string.begin.tex, .punctuation.definition.string.end.tex {
 color: #dc322f;
}
.keyword.control.label.latex, .text.tex.latex .constant.other.general.math.tex {
 color: #2aa198;
}
.variable.parameter.definition.label.latex {
 color: #dc322f;
}
.support.function.be.latex {
 color: #859900;
}
.support.function.section.latex {
 color: #cb4b16;
}
.support.function.general.tex {
 color: #2aa198;
}
.keyword.control.ref.latex {
 color: #2aa198;
}
.storage.type.class.python, .storage.type.function.python, .storage.modifier.global.python {
 color: #859900;
}
.support.type.exception.python {
 color: #b58900;
}
.meta.scope.for-in-loop.shell, .variable.other.loop.shell {
 color: #586e75;
}
.meta.scope.case-block.shell, .meta.scope.case-body.shell {
 color: #586e75;
}
.punctuation.definition.logical-expression.shell {
 color: #dc322f;
}
.storage.modifier.c++ {
 color: #859900;
}
.support.function.perl {
 color: #268bd2;
}
.meta.diff, .meta.diff.header {
 color: #93a1a1;
}
.meta.diff.range {
 color: #268bd2;
}
.markup.deleted {
 color: #dc322f;
}
.markup.changed {
 color: #2aa198;
}
.markup.inserted {
 color: #859900;
}
.markup.heading, .punctuation.definition.heading.markdown {
 color: #b58900;
}
.markup.quote {
 color: #859900;
}
.markup.italic {
font-style: italic;
}
.markup.bold {
font-weight: bold;
}
.markup.underline.link.markdown, .meta.link.reference .constant.other.reference.link.markdown {
 color: #2aa198;
}
.constant.other.reference.link.markdown {
 color: #6c71c4;
}
.meta.paragraph.markdown .meta.dummy.line-break {
 background-color: #eee8d5;
}
.sublimelinter.notes {
 color: #eee8d5;
 background-color: #eee8d5;
}
.sublimelinter.outline.illegal {
 color: #93a1a1;
 background-color: #93a1a1;
}
.sublimelinter.underline.illegal {
 background-color: #dc322f;
}
.sublimelinter.outline.warning {
 color: #839496;
 background-color: #839496;
}
.sublimelinter.underline.warning {
 background-color: #b58900;
}
.sublimelinter.outline.violation {
 color: #657b83;
 background-color: #657b83;
}
.sublimelinter.underline.violation {
 background-color: #cb4b16;
}
.sublimelinter.mark.warning {
 color: #b58900;
}
.sublimelinter.mark.error {
 color: #dc322f;
}
.sublimelinter.gutter-mark {
 color: #657b83;
}
.brackethighlighter.all {
 color: #93a1a1;
}
.entity.name.filename.find-in-files {
 color: #2aa198;
}
.constant.numeric.line-number.find-in-files {
 color: #93a1a1;
}
.markup.deleted.git_gutter {
 color: #dc322f;
}
.markup.inserted.git_gutter {
 color: #859900;
}
.markup.changed.git_gutter {
 color: #b58900;
}
.variable.other.readwrite.js, .variable.other.object.js, .variable.other.constant.js {
 color: #657b83;
}



: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 */
  --xxxsmall-font: clamp(0.73rem, -0.39vi + 0.83rem, 0.5rem);
  --xxsmall-font: clamp(0.8rem, -0.29vi + 0.88rem, 0.63rem);
  --xsmmall-font: clamp(0.88rem, -0.14vi + 0.92rem, 0.8rem);
  --small-font: clamp(0.97rem, 0.06vi + 0.95rem, 1.01rem);
  --default-font: clamp(1.07rem, 0.34vi + 0.98rem, 1.27rem);
  --large-font: clamp(1.17rem, 0.72vi + 0.98rem, 1.6rem);
  --xlarge-font: clamp(1.29rem, 1.23vi + 0.96rem, 2.01rem);
  --xxlarge-font: clamp(1.42rem, 1.9vi + 0.91rem, 2.53rem);
  --xxxlarge-font: clamp(1.56rem, 2.78vi + 0.82rem, 3.19rem);
}

: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, 48rem);
  --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);
  border-radius: var(--xxsmall-radius);
}
dd {
  margin-left: var(--default-margin);
}
del {
  background-color: var(--accent-faded2);
  text-decoration: line-through;
}
details {
}
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 {
  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 {
}
summary::marker {
}
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%;
}

.add-bitty-flow > bitty-1-1 > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}

bitty-1-1 {
  display: inline-block;
}

bitty-COMPONENT_VESRION button {
  border-color: var(--accent);
  color: var(--accent);
}

.blue {
  color: blue;
}

.center {
  text-align: center;
}

.download-div {
  text-align: center;
  margin-top: 2.8rem;
}

.download-link-wrapper {
  display: inline-block;
  background-color: var(--default-faded2);
  border: 1px solid var(--default-faded);
  border-radius: 0.4rem;
  padding-block: var(--xxlarge-padding);
  padding-inline: var(--xxxlarge-padding);
  font-size: 1.7rem;
}

.example-output {
  background-color: var(--default-faded2);
  border: var(--heading-border-faded);
  border-radius: var(--default-radius);
}

.example-output > bitty-1-1 > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}

.example-output > bitty-1-1 > div {
  font-size: var(--small-font);
}


.xexample-wrapper > :where(:not(:first-child)) {
  margin-top: var(--flow-space, var(--default-flow));
}

.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 {
  background-color: var(--match);
  border-top: var(--reverse-border);
  border-radius: var(--default-radius);
  font-family: var(--default-font);
  font-size: var(--default);
  line-height: 1.6;
  padding: var(--default-padding);
  width: 100%;
}

.progressive-enhancement-wrapper {
  background-color: var(--default-faded2);
  border: var(--heading-border-faded);
  border-radius: var(--default-radius);
  color: var(--link);
  padding: var(--default-padding);
  width: 100%;
}

.red{
  color: darkred;
}

.section-code {
  margin-left: var(--large-margin);
  margin-block: var(--default-margin);
}

.section-code-block {
  background-color: var(--default-faded2);
  border: var(--reverse-border);
  border-radius: var(--default-radius);
  margin-bottom: var(--xlarge-margin);
  margin-inline: var(--large-margin);
}

.section-details {
  border: var(--accent-border-faded);
  border-radius: var(--default-radius);
  padding: var(--default-padding);
}

.section-details > summary {
  list-style-position: outside;
  margin-left: 20px;
  color: var(--heading);
  font-size: var(--xlarge-font);
  font-weight: var(--weight-900);
  line-height: var(--xsmall-line-height);
  text-wrap: balance;
  padding-left: 0.2rem;
}

.section-details summary::marker {
  color: var(--heading);
}

.section-details bitty-1-1 {
  background-color: var(--default-faded2);
  border: var(--heading-border-faded);
  border-radius: var(--default-radius);
  padding: var(--default-padding);
  width: 100%;
}

:root {
  --test-passed-color: #43eb1c;
  --test-failed-color: #eb251c;
}

.test-failed {
  color: var(--test-failed-color);
}

.test-passed {
  color: var(--test-passed-color);
}


bitty-1-1 button {
  padding-block: 0.4rem;
  padding-inline: 0.8rem;
}

bitty-1-1 [type=text] {
  font-size: var(--default-font);
}

bitty-1-1 label {
  font-size: var(--default-font);
}