@charset "UTF-8";
._minor-second {
  font-size: 0.938rem;
}

._minor-second::after {
  content: " 16.884px";
  font-size: 0.75rem;
}

._major-second {
  font-size: 0.889rem;
}

._major-second::after {
  content: " 16.002px";
  font-size: 0.75rem;
}

._minor-third {
  font-size: 0.833rem;
}

._minor-third::after {
  content: " 14.994px";
  font-size: 0.75rem;
}

._major-third {
  font-size: 0.8rem;
}

._major-third::after {
  content: " 14.4px";
  font-size: 0.75rem;
}

._perfect-fourth {
  font-size: 0.75rem;
}

._perfect-fourth::after {
  content: " 13.5px";
  font-size: 0.75rem;
}

._augmented-fourth {
  font-size: 0.707rem;
}

._augmented-fourth::after {
  content: " 12.726px";
  font-size: 0.75rem;
}

._perfect-fifth {
  font-size: 0.667rem;
}

._perfect-fifth::after {
  content: " 12.006px";
  font-size: 0.75rem;
}

._minor-sixth {
  font-size: 0.625rem;
}

._minor-sixth::after {
  content: " 11.25px";
  font-size: 0.75rem;
}

._golden {
  font-size: 0.618rem;
}

._golden::after {
  content: " 11.124px";
  font-size: 0.75rem;
}

._major-sixth {
  font-size: 0.577rem;
}

._major-sixth::after {
  content: " 10.386px";
  font-size: 0.75rem;
}

._minor-seventh {
  font-size: 0.562rem;
}

._minor-seventh::after {
  content: " 10.116px";
  font-size: 0.75rem;
}

._major-seventh {
  font-size: 0.533rem;
}

._major-seventh::after {
  content: " 9.594px";
  font-size: 0.75rem;
}

._octave {
  font-size: 0.5rem;
}

._octave::after {
  content: " 9px";
  font-size: 0.75rem;
}

._major-ninth {
  font-size: 0.444rem;
}

._major-ninth::after {
  content: " 7.992px";
  font-size: 0.75rem;
}

._major-tenth {
  font-size: 0.375rem;
}

._major-tenth::after {
  content: " 6.75px";
  font-size: 0.75rem;
}

._major-eleventh {
  font-size: 0.353rem;
}

._major-eleventh::after {
  content: " 6.354px";
  font-size: 0.75rem;
}

._major-twelve {
  font-size: 0.333rem;
}

._major-twelve::after {
  content: " 5.994px";
  font-size: 0.75rem;
}

._double-octave {
  font-size: 0.25rem;
}

._double-octave::after {
  content: " 4.5px";
  font-size: 0.75rem;
}

.unison {
  font-size: 1rem;
}

.unison::after {
  content: " 18px";
  font-size: 0.75rem;
}

.minor-second {
  font-size: 1.067rem;
}

.minor-second::after {
  content: " 19.206px";
  font-size: 0.75rem;
}

.major-second {
  font-size: 1.125rem;
}

.major-second::after {
  content: " 20.25px";
  font-size: 0.75rem;
}

.minor-third {
  font-size: 1.2rem;
}

.minor-third::after {
  content: " 21.6px";
  font-size: 0.75rem;
}

.major-third {
  font-size: 1.25rem;
}

.major-third::after {
  content: " 22.5px";
  font-size: 0.75rem;
}

.perfect-fourth {
  font-size: 1.333rem;
}

.perfect-fourth::after {
  content: " 23.994px";
  font-size: 0.75rem;
}

.augmented-fourth {
  font-size: 1.414rem;
}

.augmented-fourth::after {
  content: " 25.452px";
  font-size: 0.75rem;
}

.perfect-fifth {
  font-size: 1.5rem;
}

.perfect-fifth::after {
  content: " 27px";
  font-size: 0.75rem;
}

.minor-sixth {
  font-size: 1.6rem;
}

.minor-sixth::after {
  content: " 28.8px";
  font-size: 0.75rem;
}

.golden {
  font-size: 1.618rem;
}

.golden::after {
  content: " 29.124px";
  font-size: 0.75rem;
}

.major-sixth {
  font-size: 1.732rem;
}

.major-sixth::after {
  content: " 31.176px";
  font-size: 0.75rem;
}

.minor-seventh {
  font-size: 1.778rem;
}

.minor-seventh::after {
  content: " 32.004px";
  font-size: 0.75rem;
}

.major-seventh {
  font-size: 1.875rem;
}

.major-seventh::after {
  content: " 33.75px";
  font-size: 0.75rem;
}

.octave {
  font-size: 2rem;
}

.octave::after {
  content: " 36px";
  font-size: 0.75rem;
}

.major-ninth {
  font-size: 2.25rem;
}

.major-ninth::after {
  content: " 40.5px";
  font-size: 0.75rem;
}

.major-tenth {
  font-size: 2.667rem;
}

.major-tenth::after {
  content: " 48.006px";
  font-size: 0.75rem;
}

.major-eleventh {
  font-size: 2.833rem;
}

.major-eleventh::after {
  content: " 50.994px";
  font-size: 0.75rem;
}

.major-twelve {
  font-size: 3rem;
}

.major-twelve::after {
  content: " 54px";
  font-size: 0.75rem;
}

.double-octave {
  font-size: 4rem;
}

.double-octave::after {
  content: " 72px";
  font-size: 0.75rem;
}

.third-octave {
  font-size: 6rem;
}

.third-octave::after {
  content: " 108px";
  font-size: 0.75rem;
}

.fourth-octave {
  font-size: 8rem;
}

.fourth-octave::after {
  content: " 144px";
  font-size: 0.75rem;
}

@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Thin.ttf) format("ttf");
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-ExtraLight.ttf) format("ttf");
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Light.ttf) format("ttf");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Regular.ttf) format("ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Medium.ttf) format("ttf");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-SemiBold.ttf) format("ttf");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Bold.ttf) format("ttf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-ExtraBold.ttf) format("ttf");
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Black.ttf) format("ttf");
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-Thin.ttf) format("ttf");
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-ExtraLight.ttf) format("ttf");
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-LightItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 300;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-RegularItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-MediumItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 500;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-SemiBoldItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 600;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-BoldItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 700;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-ExtraBoldItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 800;
}
@font-face {
  font-family: "Barlow";
  src: url(../fonts/Barlow/Barlow-BlackItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 900;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Regular.ttf) format("ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Italic.ttf) format("ttf");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-Bold.ttf) format("ttf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/AtkinsonHyperlegible/AtkinsonHyperlegible-BoldItalic.ttf) format("ttf");
  font-style: italic;
  font-weight: 700;
}
@font-face {
  font-family: "Noto Sans Mono";
  src: url(../fonts/Noto_Sans_Mono/NotoSansMono-VariableFont_wdthwght.ttf) format("ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Playfair Display";
  src: url(../fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf) format("ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Playfair Display";
  src: url(../fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf) format("ttf");
  font-style: italic;
  font-weight: 400;
}
.brand {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 0.667rem;
  font-weight: 700;
  line-height: 1.414;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  color: var(--accred);
}

html,
:root {
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  line-height: 1.414;
  font-weight: 400;
  text-align: left;
}

article:first-of-type {
  margin-block-start: 5rem;
}

p {
  hyphens: auto;
}

.multicolumn-40-60 {
  column-width: 18rem;
}

._10 {
  background: var(--dark);
  color: var(--on-dark);
}

.monospace {
  font-family: "Noto Sans Mono", monospace;
}

.dyslexic {
  font-family: "Atkinson Hyperlegible", sans-serif;
}

.serif {
  font-family: "Playfair Display", serif;
}

.sans-serif {
  font-family: "Barlow", sans-serif;
}

body {
  font-size: 1rem;
}

p {
  font-size: 1rem;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2.667rem;
}

h3 {
  font-size: 1.778rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

small {
  font-size: 0.8rem;
}

figcaption {
  font-size: 0.8rem;
}

big {
  font-size: 1.778rem;
}

:root {
  --bright: hsla(0, 0%, 100%, 1);
  --on-bright: hsla(0, 0%, 15%, 1);
  --medium-bright: rgb(237, 237, 237);
  --on-medium-bright: hsla(0, 0%, 15%, 1);
  --medium: rgb(175, 175, 175);
  --on-medium: hsla(0, 0%, 15%, 1);
  --dark: hsla(0, 0%, 15%, 1);
  --on-dark: hsla(0, 0%, 85%, 1);
  --shadow: hsla(0, 0%, 0%, 0.5);
  --dark-high-contrast: hsla(0, 0%, 0%, 1);
  --on-dark-hight-contrast: hsla(0, 0%, 100%, 1);
  --primary: hsla(300, 93%, 12%, 1);
  --on-primary: rgb(250, 204, 250);
  --secondary: hsla(120, 94%, 33%, 1);
  --on-secondary: rgb(200, 250, 200);
  --tertiary: hsla(174, 90%, 37%, 1);
  --on-tertiary: rgb(2, 47, 43);
  --accred: hsl(360, 84%, 64%);
  --on-accred: var(--bright);
  --neutral: hsla(0, 0%, 50%, 1);
  --on-neutral: hsla(0, 0%, 85%, 1);
  --error: hsla(0, 100%, 50%, 1);
  --on-error: rgb(251, 202, 202);
  --warning: hsla(50, 100%, 50%, 1);
  --on-warning: hsl(50, 98%, 23%);
  --info: hsla(210, 100%, 50%, 1);
  --on-info: rgb(164, 208, 251);
  --success: hsla(110, 100%, 50%, 1);
  --on-success: rgb(21, 124, 1);
  --disabled: var(--neutral);
  --on-disabled: var(--on-neutral);
  --link-color: blue;
  --link-hover: red;
  --link-visited: purple;
  --link-active: green;
  --code: hsla(210, 100%, 30%, 1);
  --on-code: var(--bright);
  --sample: hsla(210, 100%, 50%, 0.2);
  --sample-dark: hsla(30, 100%, 50%, 0.4);
  --on-sample: var(--dark);
}

.bg-bright {
  background-color: var(--bright);
}

.text-bright {
  color: var(--bright);
}

.bg-on-bright {
  background-color: var(--on-bright);
}

.text-on-bright {
  color: var(--on-bright);
}

.bg-dark {
  background-color: var(--dark);
}

.text-dark {
  color: var(--dark);
}

.bg-on-dark {
  background-color: var(--on-dark);
}

.text-on-dark {
  color: var(--on-dark);
}

.bg-primary {
  background-color: var(--primary);
}

.text-primary {
  color: var(--primary);
}

.bg-on-primary {
  background-color: var(--on-primary);
}

.text-on-primary {
  color: var(--on-primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.text-secondary {
  color: var(--secondary);
}

.bg-on-secondary {
  background-color: var(--on-secondary);
}

.text-on-secondary {
  color: var(--on-secondary);
}

.bg-tertiary {
  background-color: var(--tertiary);
}

.text-tertiary {
  color: var(--tertiary);
}

.bg-on-tertiary {
  background-color: var(--on-tertiary);
}

.text-on-tertiary {
  color: var(--on-tertiary);
}

.bg-accred {
  background-color: var(--accred);
}

.text-accred {
  color: var(--accred);
}

.bg-on-accred {
  background-color: var(--on-accred);
}

.text-on-accred {
  color: var(--on-accred);
}

.bg-neutral {
  background-color: var(--neutral);
}

.text-neutral {
  color: var(--neutral);
}

.bg-on-neutral {
  background-color: var(--on-neutral);
}

.text-on-neutral {
  color: var(--on-neutral);
}

.bg-error {
  background-color: var(--error);
}

.text-error {
  color: var(--error);
}

.bg-on-error {
  background-color: var(--on-error);
}

.text-on-error {
  color: var(--on-error);
}

.bg-success {
  background-color: var(--success);
}

.text-success {
  color: var(--success);
}

.bg-on-success {
  background-color: var(--on-success);
}

.text-on-success {
  color: var(--on-success);
}

.bg-info {
  background-color: var(--info);
}

.text-info {
  color: var(--info);
}

.bg-on-info {
  background-color: var(--on-info);
}

.text-on-info {
  color: var(--on-info);
}

.bg-warning {
  background-color: var(--warning);
}

.text-warning {
  color: var(--warning);
}

.bg-on-warning {
  background-color: var(--on-warning);
}

.text-on-warning {
  color: var(--on-warning);
}

.bg-disabled {
  background-color: var(--disabled);
}

.text-disabled {
  color: var(--disabled);
}

.bg-on-disabled {
  background-color: var(--on-disabled);
}

.text-on-disabled {
  color: var(--on-disabled);
}

.bg-shadow {
  background-color: var(--shadow);
}

.text-shadow {
  color: var(--shadow);
}

.bg-link-color {
  background-color: var(--link-color);
}

.text-link-color {
  color: var(--link-color);
}

.bg-link-visited {
  background-color: var(--link-visited);
}

.text-link-visited {
  color: var(--link-visited);
}

.bg-link-hover {
  background-color: var(--link-hover);
}

.text-link-hover {
  color: var(--link-hover);
}

.bg-link-active {
  background-color: var(--link-active);
}

.text-link-active {
  color: var(--link-active);
}

:root, :root.light {
  --default: 1rem;
  --big: 2rem;
  --small: 0.75rem;
}

:root.dark {
  background-color: var(--dark);
  color: var(--on-dark);
}

:root.high-contrast {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-hight-contrast);
}

.lighten-100 {
  filter: brightness(100%);
}

.lighten-110 {
  filter: brightness(110%);
}

.lighten-120 {
  filter: brightness(120%);
}

.lighten-130 {
  filter: brightness(130%);
}

.lighten-140 {
  filter: brightness(140%);
}

.lighten-150 {
  filter: brightness(150%);
}

.lighten-160 {
  filter: brightness(160%);
}

.lighten-170 {
  filter: brightness(170%);
}

.lighten-180 {
  filter: brightness(180%);
}

.lighten-190 {
  filter: brightness(190%);
}

.lighten-200 {
  filter: brightness(200%);
}

.lighten-210 {
  filter: brightness(210%);
}

.lighten-220 {
  filter: brightness(220%);
}

.lighten-230 {
  filter: brightness(230%);
}

.lighten-240 {
  filter: brightness(240%);
}

.lighten-250 {
  filter: brightness(250%);
}

.lighten-260 {
  filter: brightness(260%);
}

.lighten-270 {
  filter: brightness(270%);
}

.lighten-280 {
  filter: brightness(280%);
}

.lighten-290 {
  filter: brightness(290%);
}

.lighten-300 {
  filter: brightness(300%);
}

.lighten-310 {
  filter: brightness(310%);
}

.lighten-320 {
  filter: brightness(320%);
}

.lighten-330 {
  filter: brightness(330%);
}

.lighten-340 {
  filter: brightness(340%);
}

.lighten-350 {
  filter: brightness(350%);
}

.lighten-360 {
  filter: brightness(360%);
}

.lighten-370 {
  filter: brightness(370%);
}

.lighten-380 {
  filter: brightness(380%);
}

.lighten-390 {
  filter: brightness(390%);
}

.lighten-400 {
  filter: brightness(400%);
}

.lighter {
  opacity: 50%;
  background: white;
}

.darker {
  filter: brightness(75%);
}

/* - - - - - - - - - - */
:root {
  --background: hsla(0, 0%, 100%, 1);
  --surface: hsla(0, 0%, 97%, 1);
  --text-primary: hsla(0, 0%, 15%, 1);
  --text-secondary: hsla(0, 0%, 40%, 1);
  --border-color: hsla(0, 0%, 80%, 1);
  --primary-light: hsla(300, 93%, 25%, 1);
  --primary: hsla(300, 93%, 12%, 1);
  --primary-dark: hsla(300, 93%, 8%, 1);
  --on-primary: rgb(250, 204, 250);
  --secondary-light: hsla(120, 94%, 43%, 1);
  --secondary: hsla(120, 94%, 33%, 1);
  --secondary-dark: hsla(120, 94%, 23%, 1);
  --on-secondary: rgb(200, 250, 200);
  --tertiary-light: hsla(174, 90%, 47%, 1);
  --tertiary: hsla(174, 90%, 37%, 1);
  --tertiary-dark: hsla(174, 90%, 27%, 1);
  --on-tertiary: rgb(2, 47, 43);
  --accent: hsl(360, 84%, 64%);
  --on-accent: hsla(0, 0%, 100%, 1);
  --neutral: hsla(0, 0%, 50%, 1);
  --on-neutral: hsla(0, 0%, 85%, 1);
  --error: hsla(0, 100%, 50%, 1);
  --on-error: rgb(251, 202, 202);
  --warning: hsla(50, 100%, 50%, 1);
  --on-warning: hsl(50, 98%, 23%);
  --info: hsla(210, 100%, 50%, 1);
  --on-info: rgb(164, 208, 251);
  --success: hsla(110, 100%, 50%, 1);
  --on-success: rgb(21, 124, 1);
  --shadow-light: hsla(0, 0%, 0%, 0.1);
  --shadow: hsla(0, 0%, 0%, 0.25);
  --shadow-heavy: hsla(0, 0%, 0%, 0.5);
  --outline-color: hsla(210, 100%, 50%, 0.8);
  --focus-ring: 0 0 0 2px var(--outline-color);
  --transition-speed: 0.2s;
  --transition-speed-slow: 0.5s;
  --animation-scale: 1;
  --media-data-usage: 100%;
  --media-transparency: 1;
  --link-color: hsla(210, 100%, 50%, 1);
  --link-visited: hsla(270, 70%, 40%, 1);
  --link-hover: hsla(0, 100%, 50%, 1);
  --link-active: hsla(120, 100%, 30%, 1);
}

html.dark-mode {
  --background: hsla(0, 0%, 12%, 1);
  --surface: hsla(0, 0%, 18%, 1);
  --text-primary: hsla(0, 0%, 95%, 1);
  --text-secondary: hsla(0, 0%, 75%, 1);
  --border-color: hsla(0, 0%, 40%, 1);
  --primary-light: hsla(300, 70%, 40%, 1);
  --primary: hsla(300, 70%, 30%, 1);
  --primary-dark: hsla(300, 70%, 20%, 1);
  --on-primary: rgb(250, 204, 250);
  --secondary-light: hsla(120, 60%, 50%, 1);
  --secondary: hsla(120, 60%, 40%, 1);
  --secondary-dark: hsla(120, 60%, 30%, 1);
  --on-secondary: rgb(200, 250, 200);
  --tertiary-light: hsla(174, 70%, 50%, 1);
  --tertiary: hsla(174, 70%, 40%, 1);
  --tertiary-dark: hsla(174, 70%, 30%, 1);
  --on-tertiary: rgb(2, 47, 43);
  --shadow-light: hsla(0, 0%, 0%, 0.2);
  --shadow: hsla(0, 0%, 0%, 0.4);
  --shadow-heavy: hsla(0, 0%, 0%, 0.7);
  --outline-color: hsla(210, 100%, 70%, 0.8);
  --link-color: hsla(210, 100%, 70%, 1);
  --link-visited: hsla(270, 70%, 60%, 1);
  --link-hover: hsla(0, 100%, 70%, 1);
  --link-active: hsla(120, 100%, 50%, 1);
}

html.high-contrast-mode {
  --background: #000000;
  --surface: #000000;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --border-color: #ffffff;
  --primary: #ffffff;
  --primary-light: #ffffff;
  --primary-dark: #ffffff;
  --on-primary: #000000;
  --secondary: #ffffff;
  --secondary-light: #ffffff;
  --secondary-dark: #ffffff;
  --on-secondary: #000000;
  --tertiary: #ffffff;
  --tertiary-light: #ffffff;
  --tertiary-dark: #ffffff;
  --on-tertiary: #000000;
  --accent: #ffffff;
  --on-accent: #000000;
  --error: #ffffff;
  --on-error: #000000;
  --warning: #ffffff;
  --on-warning: #000000;
  --info: #ffffff;
  --on-info: #000000;
  --success: #ffffff;
  --on-success: #000000;
  --outline-color: #ffffff;
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px #000000;
  --link-color: #ffff00;
  --link-visited: #ffff00;
  --link-hover: #ffff00;
  --link-active: #ffff00;
}

html.inverted-colors-mode {
  filter: invert(100%) hue-rotate(180deg);
}
html.inverted-colors-mode img, html.inverted-colors-mode video, html.inverted-colors-mode canvas {
  filter: invert(100%) hue-rotate(180deg);
}

html.reduced-motion {
  --transition-speed: 0.001s;
  --transition-speed-slow: 0.001s;
  --animation-scale: 0;
}
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

html.reduced-data {
  --media-data-usage: 10%;
}
html.reduced-data img, html.reduced-data video {
  filter: blur(1px) brightness(0.9);
  max-width: 50vw;
  max-height: 50vh;
}

html.reduced-transparency {
  --media-transparency: 0;
}
html.reduced-transparency *, html.reduced-transparency *::before, html.reduced-transparency *::after {
  opacity: 1 !important;
  backdrop-filter: none !important;
}
html.reduced-transparency [class*=transparent],
html.reduced-transparency [class*=opacity],
html.reduced-transparency [style*=opacity],
html.reduced-transparency [style*=rgba] {
  background-color: var(--surface) !important;
  box-shadow: none !important;
}

html.forced-colors {
  forced-color-adjust: none; /* Explizit die System-Farben verwenden */
  --background: Canvas;
  --text-primary: CanvasText;
  --border-color: CanvasText;
  --primary: Highlight;
  --on-primary: HighlightText;
  --link-color: LinkText;
  --link-visited: VisitedText;
  --outline-color: Focus;
  --focus-ring: 0 0 0 2px Focus;
}
html.forced-colors button, html.forced-colors input, html.forced-colors select, html.forced-colors textarea {
  border-color: ButtonText;
  color: ButtonText;
  background-color: ButtonFace;
}
html.forced-colors a:link {
  color: LinkText;
}
html.forced-colors a:visited {
  color: VisitedText;
}
html.forced-colors :focus {
  outline: 2px solid Focus;
}

.bg-primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.bg-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}

.bg-tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}

.bg-accent {
  background-color: var(--accent);
  color: var(--on-accent);
}

.bg-surface {
  background-color: var(--surface);
  color: var(--text-primary);
}

.bg-error {
  background-color: var(--error);
  color: var(--on-error);
}

.bg-warning {
  background-color: var(--warning);
  color: var(--on-warning);
}

.bg-info {
  background-color: var(--info);
  color: var(--on-info);
}

.bg-success {
  background-color: var(--success);
  color: var(--on-success);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-primary-color {
  color: var(--primary);
}

.text-secondary-color {
  color: var(--secondary);
}

.text-tertiary {
  color: var(--tertiary);
}

.text-accent {
  color: var(--accent);
}

.text-error {
  color: var(--error);
}

.text-warning {
  color: var(--warning);
}

.text-info {
  color: var(--info);
}

.text-success {
  color: var(--success);
}

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@font-face {
  font-family: -moz-bullet-font;
  src: url("data:font/woff2;base64,d09GMgABAAAAAARYAAwAAAAACqAAAAQFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAgwIRCAqKDIcYATYCJAMsCxgABCAFg2AHIBtDCFGUrM0MyM/DGJyndUclpZwnU8QPQ6wsFOHO+/yHNvV9IEqSQgsVJW2p+uZkohKbVExPEz/JUW7zk6rzYH9723UJ/4DzBII8CSzwgFMOOE4KW2rjAmh4qQWSiid60f7Y9FsXScfUpeluagFqTTQYyoQaQSubXil0lHRsBehAI9KofG/6ogF9/Hl6lBd920LmeTxj8JXBfFWKwYAY3QsAAXD17ZAB4M6Ocv/nsZlkaTl0gLipewIQEMB2d9lKDAT1ZjP/F7jmWsQ3wn8AZvZFgIIC7ESh4AP1iFb4nPnfWyJgcQArpUWqW9W96j71kHr/L9a/dNRbj+8/ujXLWCMMFYVYiXoEaZQ4YOC/E7Dkz3JEjaokxAP6i3hIUjv9fwYyE6I3yIozKkaGN63fP36aeLJmxlRZwZiFziPrMVvOlnCF98SQJfGO/Xllv/FnWAcEjrMqaMCPwVmktCDO5zzxcXqeKS+QFxYnvJLFVzKZAFcKnlZRwHEPVM3mXxNt2gdZEpkKaIAG9gbgDTU5SOYDcmX7Rr61evEA1U+1/3SMb6FFtUqh55nYleE95j2zPNxzdlnGoR5xu/PxQKzb7bFaFLvl79Z54Lx9OH+g0/PPYlcsNo/nwP2V2vsHUHsV4KqEsd+e2r6Fu2v7abkfvsb65b41uwvRvqewH25kTntqolbYsEr5DAqrX97a0jrBLjFRExVHR2dH1Za6unyZfCVZHqQP0BtYjuUYlg9J6SurcrTEiOr26m5xcuTW4Sp3ljkUYWJ9+/iVmzbzPpcuXnGeqU3U7IKjz/qeKSSCltyhuSoxkqqTZX+DXt/OMmAikC8SzVD0jg3dbhIE0eUqc04UFFrxCSXzFxgHclzRMPe0ocOjiKRoSZISE0OtpkBjECdxkkRM1KiaJV0ed0V5umBP1wyUPL2ZBGLSDh5itIHahHRF0CY5nZMGib6T3cOmDvcTSZKuPiFJFpPRGNTIOq7jl5OjDiGIoo6qEE0QtfQJ3VYUD2RZvbm5uWWCWOgR4HXAk5GxLEO0izhLdvPTfpTV3xeOnOfT96uR53CdPrPq+P9HZvzO4QCMmDr7lTcNZorT6iMOYgI+IxClMzeCspeoLt5ABGSpta6gRZmQSnzk9e9jmOAYKC7RsyGMYaB6MpbNKMiRq2U6vI0yPZuTMiODFytMrGEBi7pjGgkAMoaNLGOFSoYceaZMx1+XTC/UNpmRzY1nmwT7AIcK+fK5lYNjz893lwMTuXlD2AKl8Md+24AxitRaLH/MUMqd9z862owy/bZTuZUqs1iRQop0KdLgZwPc9JS0lprnkef1gitBCRhjgV+vjGK8BfIV8CrlVghj1vIyZfyC/AJvqbsQYAEA/v+IAQA=");
}
/* bidi */
:-moz-has-dir-attr {
  unicode-bidi: isolate;
}

:-moz-dir-attr-rtl {
  direction: rtl;
}

:-moz-dir-attr-ltr {
  direction: ltr;
}

:-moz-dir-attr-like-auto:dir(ltr) {
  direction: ltr;
}

:-moz-dir-attr-like-auto:dir(rtl) {
  direction: rtl;
}

/* https://html.spec.whatwg.org/#bidi-rendering */
input[type=tel]:dir(ltr) {
  direction: ltr;
}

/* To ensure http://www.w3.org/TR/REC-html40/struct/dirlang.html#style-bidi:
 *
 * "When a block element that does not have a dir attribute is transformed to
 * the style of an inline element by a style sheet, the resulting presentation
 * should be equivalent, in terms of bidirectional formatting, to the
 * formatting obtained by explicitly adding a dir attribute (assigned the
 * inherited value) to the transformed element."
 *
 * and the rules in http://dev.w3.org/html5/spec/rendering.html#rendering
 */
address,
article,
aside,
blockquote,
body,
caption,
center,
col,
colgroup,
dd,
dir,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
legend,
li,
listing,
main,
marquee,
menu,
nav,
noframes,
ol,
p,
plaintext,
pre,
search,
section,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul,
xmp {
  unicode-bidi: isolate;
}

bdi,
output {
  unicode-bidi: isolate;
}

/* We need the "bdo:-moz-has-dir-attr" bit because "bdo" has lower
   specificity than the ":-moz-has-dir-attr" selector above. */
bdo,
bdo:-moz-has-dir-attr {
  unicode-bidi: isolate-override;
}

textarea:-moz-dir-attr-like-auto,
pre:-moz-dir-attr-like-auto {
  unicode-bidi: plaintext;
}

/* blocks */
article,
aside,
details,
div,
dt,
figcaption,
footer,
form,
header,
hgroup,
html,
main,
nav,
search,
section,
summary {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p,
dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

dd {
  display: block;
  margin-inline-start: 40px;
}

blockquote,
figure {
  display: block;
  margin-block: 1em;
  margin-inline: 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: -moz-center;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block: 0.67em;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block: 0.83em;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block: 1em;
}

h4 {
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin-block: 1.33em;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block: 1.67em;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block: 2.33em;
}

/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: layout.css.h1-in-section-ua-styles.enabled) {
  :is(article, aside, nav, section) h1 {
    margin-block: 0.83em;
    font-size: 1.5em;
  }
  :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
    margin-block: 1em;
    font-size: 1.17em;
  }
  :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
    margin-block: 1.33em;
    font-size: 1em;
  }
  :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
    margin-block: 1.67em;
    font-size: 0.83em;
  }
  :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
    margin-block: 2.33em;
    font-size: 0.67em;
  }
}
listing {
  display: block;
  font-family: -moz-fixed;
  font-size: medium;
  white-space: pre;
  margin-block: 1em;
}

xmp,
pre,
plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin-block: 1em;
}

/* tables */
table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  box-sizing: border-box;
  text-indent: 0;
}

table[align=left] {
  float: left;
}

table[align=right] {
  float: right;
  text-align: start;
}

/* border collapse rules */
/* Set hidden if we have 'frame' or 'rules' attribute.
     Set it on all sides when we do so there's more consistency
     in what authors should expect */
/* Put this first so 'border' and 'frame' rules can override it. */
table[rules] {
  border-width: thin;
  border-style: hidden;
}

/* 'border' before 'frame' so 'frame' overrides
      A border with a given value should, of course, pass that value
      as the border-width in pixels -> attr mapping */
/* :-moz-table-border-nonzero is like [border]:not([border="0"]) except it
     also checks for other zero-like values according to HTML attribute
     parsing rules */
table:-moz-table-border-nonzero {
  border-width: thin;
  border-style: outset;
}

table[frame] {
  border: thin hidden;
}

/* specificity must beat table:-moz-table-border-nonzero rule above */
table[frame=void] {
  border-style: hidden;
}

table[frame=above] {
  border-style: outset hidden hidden hidden;
}

table[frame=below] {
  border-style: hidden hidden outset hidden;
}

table[frame=lhs] {
  border-style: hidden hidden hidden outset;
}

table[frame=rhs] {
  border-style: hidden outset hidden hidden;
}

table[frame=hsides] {
  border-style: outset hidden;
}

table[frame=vsides] {
  border-style: hidden outset;
}

table[frame=box],
table[frame=border] {
  border-style: outset;
}

/* Internal Table Borders */
/* 'border' cell borders first */
table:-moz-table-border-nonzero > * > tr > td,
table:-moz-table-border-nonzero > * > tr > th,
table:-moz-table-border-nonzero > * > td,
table:-moz-table-border-nonzero > * > th,
table:-moz-table-border-nonzero > td,
table:-moz-table-border-nonzero > th {
  border-width: thin;
  border-style: inset;
}

/* collapse only if rules are really specified */
table[rules]:not([rules=none], [rules=""]) {
  border-collapse: collapse;
}

/* only specified rules override 'border' settings
  (increased specificity to achieve this) */
table[rules]:not([rules=""]) > tr > td,
table[rules]:not([rules=""]) > * > tr > td,
table[rules]:not([rules=""]) > tr > th,
table[rules]:not([rules=""]) > * > tr > th,
table[rules]:not([rules=""]) > td,
table[rules]:not([rules=""]) > th {
  border-width: thin;
  border-style: none;
}

table[rules][rules=none] > tr > td,
table[rules][rules=none] > * > tr > td,
table[rules][rules=none] > tr > th,
table[rules][rules=none] > * > tr > th,
table[rules][rules=none] > td,
table[rules][rules=none] > th {
  border-width: thin;
  border-style: none;
}

table[rules][rules=all] > tr > td,
table[rules][rules=all] > * > tr > td,
table[rules][rules=all] > tr > th,
table[rules][rules=all] > * > tr > th,
table[rules][rules=all] > td,
table[rules][rules=all] > th {
  border-width: thin;
  border-style: solid;
}

table[rules][rules=rows] > tr,
table[rules][rules=rows] > * > tr {
  border-block-start-width: thin;
  border-block-end-width: thin;
  border-block-start-style: solid;
  border-block-end-style: solid;
}

table[rules][rules=cols] > tr > td,
table[rules][rules=cols] > * > tr > td,
table[rules][rules=cols] > tr > th,
table[rules][rules=cols] > * > tr > th {
  border-inline-width: thin;
  border-inline-style: solid;
}

table[rules][rules=groups] > colgroup {
  border-inline-width: thin;
  border-inline-style: solid;
}

table[rules][rules=groups] > tfoot,
table[rules][rules=groups] > thead,
table[rules][rules=groups] > tbody {
  border-block-width: thin;
  border-block-style: solid;
}

/* caption inherits from table not table-outer */
caption {
  display: table-caption;
  text-align: center;
}

table[align=center] > caption {
  margin-inline: auto;
}

table[align=center] > caption[align=left]:dir(ltr) {
  margin-inline-end: 0;
}

table[align=center] > caption[align=left]:dir(rtl) {
  margin-inline-start: 0;
}

table[align=center] > caption[align=right]:dir(ltr) {
  margin-inline-start: 0;
}

table[align=center] > caption[align=right]:dir(rtl) {
  margin-inline-end: 0;
}

tr {
  display: table-row;
  vertical-align: inherit;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

thead {
  display: table-header-group;
  vertical-align: middle;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
}

/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}

td {
  display: table-cell;
  vertical-align: inherit;
  text-align: unset;
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
  text-align: -moz-center-or-inherit;
}

:is(tr, tbody, thead, tfoot, table) > form:-moz-is-html {
  /* Important: don't show these forms in HTML */
  display: none !important;
}

table[bordercolor] > tbody,
table[bordercolor] > thead,
table[bordercolor] > tfoot,
table[bordercolor] > col,
table[bordercolor] > colgroup,
table[bordercolor] > tr,
table[bordercolor] > * > tr,
table[bordercolor] > tr > td,
table[bordercolor] > * > tr > td,
table[bordercolor] > tr > th,
table[bordercolor] > * > tr > th {
  border-color: inherit;
}

/* inlines */
q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

b,
strong {
  font-weight: bolder;
}

i,
cite,
em,
var,
dfn {
  font-style: italic;
}

tt,
code,
kbd,
samp {
  font-family: -moz-fixed;
}

u,
ins {
  text-decoration: underline;
}

s,
strike,
del {
  text-decoration: line-through;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

nobr {
  white-space: nowrap;
}

mark {
  background: Mark;
  color: MarkText;
}

/* titles */
abbr[title],
acronym[title] {
  text-decoration: dotted underline;
}

/* lists */
ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

ul,
ol,
menu {
  counter-reset: list-item;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

li {
  display: list-item;
  text-align: match-parent;
}

/* nested lists have no top/bottom margins */
:is(ul, ol, dir, menu, dl) ul,
:is(ul, ol, dir, menu, dl) ol,
:is(ul, ol, dir, menu, dl) dir,
:is(ul, ol, dir, menu, dl) menu,
:is(ul, ol, dir, menu, dl) dl {
  margin-block: 0;
}

/* 2 deep unordered lists use a circle */
:is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) dir {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

/* leafs */
/* <hr> noshade and color attributes are handled completely by
 * HTMLHRElement::MapAttributesIntoRule.
 * https://html.spec.whatwg.org/#the-hr-element-2
 */
hr {
  color: gray;
  border-width: 1px;
  border-style: inset;
  margin-block: 0.5em;
  margin-inline: auto;
  overflow: hidden;
  /* FIXME: This is not really per spec */
  display: block;
}

hr[size="1"] {
  border-style: solid none none none;
}

/* Note that we only intend for the alt content to show up if the image is
 * broken. But non-broken images/inputs will have a replaced box, and thus we
 * won't we don't generate the pseudo-element anyways. This prevents
 * unnecessary reframing when images become broken / non-broken. */
input[type=image]::before,
img::before {
  content: -moz-alt-content !important;
  unicode-bidi: isolate;
}

img[usemap],
object[usemap] {
  color: blue;
}

frameset {
  display: block !important;
  overflow: clip;
  position: static !important;
  float: none !important;
  border: none !important;
}

frame {
  border-radius: 0 !important;
}

iframe {
  border: 2px inset;
}

spacer {
  position: static !important;
  float: none !important;
}

canvas {
  user-select: none;
}

iframe:focus-visible,
body:focus-visible,
html:focus-visible {
  /* These elements historically don't show outlines when focused by default.
  * We could consider changing that if needed. */
  outline-style: none;
}

/* hidden elements: https://html.spec.whatwg.org/#hidden-elements
 *
 * Exceptions:
 *
 *  * area declaration needs to be !important, see below / bug 135040.  That's
 *    hacky and broken.
 *
 *  * [hidden] is implemented as a presentation attribute to avoid a global
 *    selector in a UA sheet.
 */
base,
basefont,
datalist,
head,
link,
meta,
noembed,
noframes,
param,
rp,
script,
style,
template,
title {
  display: none;
}

area {
  /* Don't give it frames other than its imageframe */
  display: none !important;
}

iframe:fullscreen {
  /* iframes in full-screen mode don't show a border. */
  border: none !important;
  padding: unset !important;
}

/* https://html.spec.whatwg.org/#the-marquee-element-2 */
marquee {
  display: inline-block;
  text-align: initial;
  overflow: hidden !important;
  /* See https://github.com/whatwg/html/issues/10249 */
  inline-size: -moz-available;
  vertical-align: text-bottom;
  white-space: nowrap;
}

marquee:is([direction=up], [direction=down]) {
  block-size: 200px;
  white-space: unset;
}

/* Details and summary
 * https://html.spec.whatwg.org/#the-details-and-summary-elements
 *
 * Note that these rules need to be duplicated in details.css for the anonymous
 * summary, which wouldn't match otherwise.
 *
 * The spec here says something different, see
 * https://github.com/whatwg/html/issues/8610
 */
details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}

details[open] > summary:first-of-type {
  list-style-type: disclosure-open;
}

/* media elements */
video {
  object-fit: contain;
}

video > img:-moz-native-anonymous {
  /* Video poster images should render with the video element's "object-fit" &
   "object-position" properties */
  object-fit: inherit !important;
  object-position: inherit !important;
}

audio:not([controls]) {
  display: none !important;
}

audio[controls] {
  /* This ensures that intrinsic sizing can reliably shrinkwrap our
    controls (which are also always horizontal) and produce a
    reasonable intrinsic size from them. */
  writing-mode: horizontal-tb !important;
}

*|*::-moz-html-canvas-content {
  display: block !important;
  /* we want to be an absolute and fixed container */
  transform: translate(0) !important;
}

video > .caption-box {
  width: 100%;
  height: 100%;
  position: relative;
}

/**
 * The pseudo element won't inherit CSS styles from its direct parent, `::cue`
 * would actually inherit styles from video because it's video's pseudo element.
 * Therefore, we have to explicitly set some styles which are already defined
 * in its parent element in vtt.sys.mjs.
 */
::cue {
  color: rgb(255, 255, 255);
  white-space: pre-line;
  background-color: rgba(0, 0, 0, 0.8);
  font: 10px sans-serif;
  overflow-wrap: break-word;
  /* TODO : enable unicode-bidi, right now enable it would cause incorrect
          display direction, maybe related with bug 1558431. */
}

/* <dialog> element styles */
dialog {
  position: absolute;
  display: block;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
  width: -moz-fit-content;
  height: -moz-fit-content;
}

dialog:not([open]) {
  display: none;
}

dialog:modal {
  -moz-top-layer: top !important;
  position: fixed;
  overflow: auto;
  visibility: visible;
  inset-block-start: 0;
  inset-block-end: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

/* https://html.spec.whatwg.org/#flow-content-3 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

/* Ruby */
ruby {
  display: ruby;
}

rb {
  display: ruby-base;
  white-space: nowrap;
}

rt {
  display: ruby-text;
}

rtc {
  display: ruby-text-container;
}

rtc,
rt {
  white-space: nowrap;
  font-size: 50%;
  -moz-min-font-size-ratio: 50%;
  line-height: 1;
}

@media not (-moz-platform: windows) {
  rtc,
  rt {
    /* The widely-used Windows font Meiryo doesn't work fine with this
    * setting, so disable this on Windows. We should re-enable it once
    * Microsoft fixes this issue. See bug 1164279. */
    font-variant-east-asian: ruby;
  }
}
rtc,
rt {
  text-emphasis: none;
}

rtc:lang(zh),
rt:lang(zh) {
  ruby-align: center;
}

rtc:lang(zh-TW),
rt:lang(zh-TW) {
  font-size: 30%; /* bopomofo */
  -moz-min-font-size-ratio: 30%;
}

rtc > rt {
  font-size: unset;
}

ruby,
rb,
rt,
rtc {
  unicode-bidi: isolate;
}

/* Popover UA style, https://html.spec.whatwg.org/#flow-content-3 */
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: dom.element.popover.enabled) {
  [popover]:not(:popover-open):not(dialog[open]) {
    display: none;
  }
  dialog:popover-open {
    display: block;
  }
  [popover] {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 0.25em;
    overflow: auto;
    color: CanvasText;
    background-color: Canvas;
  }
  :popover-open {
    -moz-top-layer: top;
  }
  :popover-open::backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none !important;
    background-color: transparent;
  }
}
/* Shadow DOM v1
 * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */
slot {
  display: contents;
}

/* Hide noscript elements if scripting is enabled */
@media (scripting) {
  noscript {
    display: none !important;
  }
}
@media print {
  input,
  textarea,
  select,
  button,
  details {
    -moz-user-input: none !important;
    pointer-events: none !important;
  }
}
/*
 * The default style sheet used to render HTML.
 *
 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
 * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Library General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Library General Public License for more details.
 *
 * You should have received a copy of the GNU Library General Public License
 * along with this library; see the file COPYING.LIB.  If not, write to
 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
 * Boston, MA 02110-1301, USA.
 *
 */
@namespace "http://www.w3.org/1999/xhtml";
html {
  display: block;
}
html,
html * {
  box-sizing: border-box;
}

/* children of the <head> element all have display:none */
head {
  display: none;
}

meta {
  display: none;
}

title {
  display: none;
}

link {
  display: none;
}

style {
  display: none;
}

script {
  display: none;
}

body {
  display: block;
  margin: 8px;
}

body:-webkit-full-page-media {
  background-color: rgb(0, 0, 0);
}

p {
  display: block;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1__qem;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

blockquote {
  display: block;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

figcaption {
  display: block;
}

figure {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

hr {
  display: block;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0.5em;
  -webkit-margin-start: auto;
  -webkit-margin-end: auto;
  border-style: inset;
  border-width: 1px;
}

h1 {
  display: block;
  font-size: 2em;
  font-size: 2em;
  -webkit-margin-before: 0.67__qem;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold;
}

:-webkit-any(article, aside, nav, section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83__qem;
  -webkit-margin-after: 0.83em;
}

:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
  font-size: 1.17em;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
}

:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
  font-size: 1em;
  -webkit-margin-before: 1.33__qem;
  -webkit-margin-after: 1.33em;
}

:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
  font-size: 0.83em;
  -webkit-margin-before: 1.67__qem;
  -webkit-margin-after: 1.67em;
}

:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
  font-size: 0.67em;
  -webkit-margin-before: 2.33__qem;
  -webkit-margin-after: 2.33em;
}

h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83__qem;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold;
}

h4 {
  display: block;
  -webkit-margin-before: 1.33__qem;
  -webkit-margin-after: 1.33em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: 0.83em;
  -webkit-margin-before: 1.67__qem;
  -webkit-margin-after: 1.67em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: 0.67em;
  -webkit-margin-before: 2.33__qem;
  -webkit-margin-after: 2.33em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  font-weight: bold;
}

div {
  display: block;
}

layer {
  display: block;
}

article,
aside,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

marquee {
  display: inline-block;
}

address {
  display: block;
}

q {
  display: inline;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

center {
  display: block;
  /* special centering to be able to emulate the html4/netscape behaviour */
  text-align: -webkit-center;
}

map {
  display: inline;
}

video {
  object-fit: contain;
}

/* tables */
table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
table > tr {
  vertical-align: middle;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

td,
th {
  display: table-cell;
  vertical-align: inherit;
}

th {
  font-weight: bold;
}

caption {
  display: table-caption;
  text-align: -webkit-center;
}

/* lists */
ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 40px;
}

ol {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 40px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

ul ul,
ol ul {
  list-style-type: circle;
}

ol ol ul,
ol ul ul,
ul ol ul,
ul ul ul {
  list-style-type: square;
}

dd {
  display: block;
  -webkit-margin-start: 40px;
}

dl {
  display: block;
  -webkit-margin-before: 1__qem;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

dt {
  display: block;
}

ol ul,
ul ol,
ul ul,
ol ol {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

/* form elements */
form {
  display: block;
  margin-top: 0__qem;
}

label {
  cursor: default;
}

legend {
  display: block;
  -webkit-padding-start: 2px;
  -webkit-padding-end: 2px;
  border: none;
}

fieldset {
  display: block;
  -webkit-margin-start: 2px;
  -webkit-margin-end: 2px;
  -webkit-padding-before: 0.35em;
  -webkit-padding-start: 0.75em;
  -webkit-padding-end: 0.75em;
  -webkit-padding-after: 0.625em;
  border: 2px groove ThreeDFace;
  min-width: -webkit-min-content;
}

button {
  -webkit-appearance: button;
}

/* Form controls don't go vertical. */
input,
textarea,
keygen,
select,
button,
meter,
progress {
  -webkit-writing-mode: horizontal-tb !important;
}

input,
textarea,
keygen,
select,
button {
  margin: 0__qem;
  font: -webkit-small-control;
  text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  display: inline-block;
  text-align: start;
}

input[type=hidden i] {
  display: none;
}

input {
  -webkit-appearance: textfield;
  padding: 1px;
  background-color: white;
  border: 2px inset;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  cursor: auto;
}

input[type=search i] {
  appearance: searchfield;
  box-sizing: border-box;
}

input::-webkit-textfield-decoration-container {
  display: flex;
  align-items: center;
  -webkit-user-modify: read-only !important;
  content: none !important;
}

input[type=search i]::-webkit-textfield-decoration-container {
  direction: ltr;
}

input::-webkit-clear-button {
  appearance: button;
  display: inline-block;
  flex: none;
  -webkit-user-modify: read-only !important;
  -webkit-margin-start: 2px;
  opacity: 0;
  pointer-events: none;
}

input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-clear-button {
  opacity: 1;
  pointer-events: auto;
}

input[type=search i]::-webkit-search-cancel-button {
  appearance: button;
  display: block;
  flex: none;
  -webkit-user-modify: read-only !important;
  -webkit-margin-start: 1px;
  opacity: 0;
  pointer-events: none;
}

input[type=search i]:enabled:read-write:-webkit-any(:focus,
:hover)::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: auto;
}

input[type=search i]::-webkit-search-decoration {
  appearance: searchfield-decoration;
  display: block;
  flex: none;
  -webkit-user-modify: read-only !important;
  -webkit-align-self: flex-start;
  margin: auto 0;
}

input[type=search i]::-webkit-search-results-decoration {
  appearance: searchfield-results-decoration;
  display: block;
  flex: none;
  -webkit-user-modify: read-only !important;
  -webkit-align-self: flex-start;
  margin: auto 0;
}

input::-webkit-inner-spin-button {
  appearance: inner-spin-button;
  display: inline-block;
  cursor: default;
  flex: none;
  align-self: stretch;
  -webkit-user-select: none;
  -webkit-user-modify: read-only !important;
  opacity: 0;
  pointer-events: none;
}

input:enabled:read-write:-webkit-any(:focus,
:hover)::-webkit-inner-spin-button {
  opacity: 1;
  pointer-events: auto;
}

keygen,
select {
  border-radius: 5px;
}

keygen::-webkit-keygen-select {
  margin: 0px;
}

textarea {
  -webkit-appearance: textarea;
  background-color: white;
  border: 1px solid;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  flex-direction: column;
  resize: auto;
  cursor: auto;
  padding: 2px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

::-webkit-input-placeholder {
  -webkit-text-security: none;
  color: darkGray;
  pointer-events: none !important;
}

input::-webkit-input-placeholder {
  white-space: pre;
  word-wrap: normal;
  overflow: hidden;
  -webkit-user-modify: read-only !important;
}

input[type=password i] {
  -webkit-text-security: disc !important;
}

input[type=hidden i],
input[type=image i],
input[type=file i] {
  -webkit-appearance: initial;
  padding: initial;
  background-color: initial;
  border: initial;
}

input[type=file i] {
  align-items: baseline;
  color: initial;
  text-align: start !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: #faffbd !important;
  background-image: none !important;
  color: #000000 !important;
}

input[type=radio i],
input[type=checkbox i] {
  margin: 3px 0.5ex;
  padding: initial;
  background-color: initial;
  border: initial;
}

input[type=button i],
input[type=submit i],
input[type=reset i] {
  appearance: push-button;
  user-select: none;
  white-space: pre;
}

input[type=file i]::-webkit-file-upload-button {
  appearance: push-button;
  -webkit-user-modify: read-only !important;
  white-space: nowrap;
  margin: 0;
  font-size: inherit;
}

input[type=button i],
input[type=submit i],
input[type=reset i],
input[type=file i]::-webkit-file-upload-button,
button {
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: ButtonText;
  padding: 2px 6px 3px 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  box-sizing: border-box;
}

input[type=range i] {
  appearance: slider-horizontal;
  padding: initial;
  border: initial;
  margin: 2px;
  color: #909090;
}

input[type=range i]::-webkit-slider-container,
input[type=range i]::-webkit-media-slider-container {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  -webkit-user-modify: read-only !important;
  display: flex;
}

input[type=range i]::-webkit-slider-runnable-track {
  flex: 1;
  min-width: 0;
  -webkit-align-self: center;
  box-sizing: border-box;
  -webkit-user-modify: read-only !important;
  display: block;
}

input[type=range i]::-webkit-slider-thumb,
input[type=range i]::-webkit-media-slider-thumb {
  -webkit-appearance: sliderthumb-horizontal;
  box-sizing: border-box;
  -webkit-user-modify: read-only !important;
  display: block;
}

input[type=button i]:disabled,
input[type=submit i]:disabled,
input[type=reset i]:disabled,
input[type=file i]:disabled::-webkit-file-upload-button,
button:disabled,
select:disabled,
keygen:disabled,
optgroup:disabled,
option:disabled,
select[disabled] > option {
  color: GrayText;
}

input[type=button i]:active,
input[type=submit i]:active,
input[type=reset i]:active,
input[type=file i]:active::-webkit-file-upload-button,
button:active {
  border-style: inset;
}

input[type=button i]:active:disabled,
input[type=submit i]:active:disabled,
input[type=reset i]:active:disabled,
input[type=file i]:active:disabled::-webkit-file-upload-button,
button:active:disabled {
  border-style: outset;
}

option:-internal-spatial-navigation-focus {
  outline: black dashed 1px;
  outline-offset: -1px;
}

datalist {
  display: none;
}

area {
  display: inline;
  cursor: pointer;
}

param {
  display: none;
}

input[type=checkbox i] {
  appearance: checkbox;
  box-sizing: border-box;
}

input[type=radio i] {
  appearance: radio;
  box-sizing: border-box;
}

input[type=color i] {
  appearance: button;
  width: 44px;
  height: 23px;
  background-color: ButtonFace;
  /* Same as native_theme_base. */
  border: 1px #a9a9a9 solid;
  padding: 1px 2px;
}

input[type=color i]::-webkit-color-swatch-wrapper {
  display: flex;
  padding: 4px 2px;
  box-sizing: border-box;
  -webkit-user-modify: read-only !important;
  width: 100%;
  height: 100%;
}

input[type=color i]::-webkit-color-swatch {
  background-color: #000000;
  border: 1px solid #777777;
  flex: 1;
  min-width: 0;
  -webkit-user-modify: read-only !important;
}

input[type=color i][list] {
  -webkit-appearance: menulist;
  width: 88px;
  height: 23px;
}

input[type=color i][list]::-webkit-color-swatch-wrapper {
  padding-left: 8px;
  padding-right: 24px;
}

input[type=color i][list]::-webkit-color-swatch {
  border-color: #000000;
}

input::-webkit-calendar-picker-indicator {
  display: inline-block;
  width: 0.66em;
  height: 0.66em;
  padding: 0.17em 0.34em;
  -webkit-user-modify: read-only !important;
  opacity: 0;
  pointer-events: none;
}

input::-webkit-calendar-picker-indicator:hover {
  background-color: #eee;
}

input:enabled:read-write:-webkit-any(:focus,
:hover)::-webkit-calendar-picker-indicator,
input::-webkit-calendar-picker-indicator:focus {
  opacity: 1;
  pointer-events: auto;
}

input[type=date i]:disabled::-webkit-clear-button,
input[type=date i]:disabled::-webkit-inner-spin-button,
input[type=datetime-local i]:disabled::-webkit-clear-button,
input[type=datetime-local i]:disabled::-webkit-inner-spin-button,
input[type=month i]:disabled::-webkit-clear-button,
input[type=month i]:disabled::-webkit-inner-spin-button,
input[type=week i]:disabled::-webkit-clear-button,
input[type=week i]:disabled::-webkit-inner-spin-button,
input:disabled::-webkit-calendar-picker-indicator,
input[type=date i][readonly]::-webkit-clear-button,
input[type=date i][readonly]::-webkit-inner-spin-button,
input[type=datetime-local i][readonly]::-webkit-clear-button,
input[type=datetime-local i][readonly]::-webkit-inner-spin-button,
input[type=month i][readonly]::-webkit-clear-button,
input[type=month i][readonly]::-webkit-inner-spin-button,
input[type=week i][readonly]::-webkit-clear-button,
input[type=week i][readonly]::-webkit-inner-spin-button,
input[readonly]::-webkit-calendar-picker-indicator {
  visibility: hidden;
}

select {
  -webkit-appearance: menulist;
  box-sizing: border-box;
  align-items: center;
  border: 1px solid;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  color: black;
  background-color: white;
  cursor: default;
}

select:not(:-internal-list-box) {
  overflow: visible !important;
}

select:-internal-list-box {
  -webkit-appearance: listbox;
  align-items: flex-start;
  border: 1px inset gray;
  border-radius: initial;
  overflow-x: hidden;
  overflow-y: scroll;
  vertical-align: text-bottom;
  -webkit-user-select: none;
  white-space: nowrap;
}

optgroup {
  font-weight: bolder;
  display: block;
}

option {
  font-weight: normal;
  display: block;
  padding: 0 2px 1px 2px;
  white-space: pre;
  min-height: 1.2em;
}

select:-internal-list-box optgroup option:before {
  content: "    ";
}

select:-internal-list-box option,
select:-internal-list-box optgroup {
  line-height: initial !important;
}

select:-internal-list-box:focus option:checked {
  background-color: -internal-active-list-box-selection !important;
  color: -internal-active-list-box-selection-text !important;
}

select:-internal-list-box option:checked {
  background-color: -internal-inactive-list-box-selection !important;
  color: -internal-inactive-list-box-selection-text !important;
}

select:-internal-list-box:disabled option:checked,
select:-internal-list-box option:checked:disabled {
  color: gray !important;
}

select:-internal-list-box hr {
  border-style: none;
}

output {
  display: inline;
}

/* meter */
meter {
  -webkit-appearance: meter;
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 5em;
  vertical-align: -0.2em;
}

meter::-webkit-meter-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  -webkit-user-modify: read-only !important;
  height: 100%;
  width: 100%;
}

meter::-webkit-meter-bar {
  background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
  height: 100%;
  width: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

meter::-webkit-meter-optimum-value {
  background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
  height: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

meter::-webkit-meter-suboptimum-value {
  background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
  height: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

meter::-webkit-meter-even-less-good-value {
  background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
  height: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

/* should be removed later */
/* progress */
progress {
  -webkit-appearance: progress-bar;
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 10em;
  vertical-align: -0.2em;
}

progress::-webkit-progress-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  -webkit-user-modify: read-only;
  height: 100%;
  width: 100%;
}

progress::-webkit-progress-bar {
  background-color: gray;
  height: 100%;
  width: 100%;
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

progress::-webkit-progress-value {
  background-color: green;
  height: 100%;
  width: 50%; /* should be removed later */
  -webkit-user-modify: read-only !important;
  box-sizing: border-box;
}

/* inline elements */
u,
ins {
  text-decoration: underline;
}

strong,
b {
  font-weight: bold;
}

i,
cite,
em,
var,
address,
dfn {
  font-style: italic;
}

tt,
code,
kbd,
samp {
  font-family: monospace;
}

pre,
xmp,
plaintext,
listing {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1__qem 0;
}

mark {
  background-color: yellow;
  color: black;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

s,
strike,
del {
  text-decoration: line-through;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

nobr {
  white-space: nowrap;
}

/* states */
:focus {
  outline: auto 5px -webkit-focus-ring-color;
}

/* Read-only text fields do not show a focus ring but do still receive focus */
html:focus,
body:focus,
input[readonly]:focus {
  outline: none;
}

embed:focus,
iframe:focus,
object:focus {
  outline: none;
}

input:focus,
textarea:focus,
keygen:focus,
select:focus {
  outline-offset: -2px;
}

input[type=button i]:focus,
input[type=checkbox i]:focus,
input[type=file i]:focus,
input[type=hidden i]:focus,
input[type=image i]:focus,
input[type=radio i]:focus,
input[type=reset i]:focus,
input[type=search i]:focus,
input[type=submit i]:focus,
input[type=file i]:focus::-webkit-file-upload-button {
  outline-offset: 0;
}

a:-webkit-any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}

a:-webkit-any-link:active {
  color: -webkit-activelink;
}

/* HTML5 ruby elements */
ruby,
rt {
  text-indent: 0; /* blocks used for ruby rendering should not trigger this */
}

rt {
  line-height: normal;
  -webkit-text-emphasis: none;
}

ruby > rt {
  display: block;
  font-size: 50%;
  text-align: start;
}

ruby > rp {
  display: none;
}

/* other elements */
noframes {
  display: none;
}

frameset,
frame {
  display: block;
}

frameset {
  border-color: inherit;
}

iframe {
  border: 2px inset;
}

details {
  display: block;
}

summary {
  display: block;
}

summary::-webkit-details-marker {
  display: inline-block;
  width: 0.66em;
  height: 0.66em;
  -webkit-margin-end: 0.4em;
}

template {
  display: none;
}

bdi,
output {
  unicode-bidi: -webkit-isolate;
}

bdo {
  unicode-bidi: bidi-override;
}

textarea[dir=auto i] {
  unicode-bidi: -webkit-plaintext;
}

dialog:not([open]) {
  display: none;
}

dialog {
  position: absolute;
  left: 0;
  right: 0;
  width: -webkit-fit-content;
  height: -webkit-fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
}

dialog::backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}

/* page */
@page {
  /* FIXME: Define the right default values for page properties. */
  size: auto;
  margin: auto;
  padding: 0px;
  border-width: 0px;
}
/* Disable multicol in printing, since it's not implemented properly. See crbug.com/99358 */
@media print {
  * {
    -webkit-columns: auto !important;
  }
}
/* noscript is handled internally, as it depends on settings. */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

html {
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  line-height: 1.414;
  font-weight: 400;
}

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

tt,
code,
kbd,
samp {
  font-family: "Noto Sans Mono", monospace;
}

nav {
  width: 100%;
}
nav ol,
nav ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

body {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section {
  margin-block: 1rem;
}

.sr-only, .visually-hidden {
  word-wrap: normal;
  position: absolute;
  left: -20000px;
  height: 0.0625rem;
  width: 0.0625rem;
  overflow: hidden;
  margin: -0.0625rem;
  padding: 0;
  border: 0;
  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
}

.sr-hidden,
.hidden {
  display: none;
}

.sr-focus:focus {
  display: block;
  z-index: 1;
  position: fixed;
  top: 0;
  text-align: center;
  word-wrap: normal !important;
  height: 5rem;
  width: 100vw;
  padding: 1rem;
  clip: unset;
  -webkit-clip-path: inset(0);
  clip-path: inset(0%);
  font-size: var(--big);
  background-color: var(--bright);
}

svg [tabindex] {
  outline: none;
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.invisible {
  display: none !important;
}

@keyframes focus-animation {
  0% {
    outline-offset: 0px;
    outline-width: 5px;
    outline-color: rgb(3, 139, 250);
  }
  90% {
    outline-offset: 5px;
    outline-width: 5px;
    outline-color: rgba(3, 139, 250, 0.1);
  }
  100% {
    outline-offset: 0;
    outline-width: 0;
    outline-color: transparent;
  }
}
*:focus {
  animation: focus-animation 1s;
  outline-style: solid;
}

@media (prefers-reduced-motion: reduce) {
  *:focus {
    animation-duration: 0.001s;
  }
}
.mouseenter {
  background: hsla(210, 50%, 50%, 0.125);
}

.blurred-vision {
  filter: blur(2px);
}

.achromatopsia {
  filter: url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="achromatopsia">          <feColorMatrix values="0.213  0.715  0.072  0.000  0.000                                 0.213  0.715  0.072  0.000  0.000                                 0.213  0.715  0.072  0.000  0.000                                 0.000  0.000  0.000  1.000  0.000" />        </filter>      </svg>#achromatopsia');
}

.deuteranopia {
  filter: url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="deuteranopia">          <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000                                 0.280  0.673  0.047  0.000  0.000                                -0.012  0.043  0.969  0.000  0.000                                 0.000  0.000  0.000  1.000  0.000" />        </filter>      </svg>#deuteranopia');
}

.protanopia {
  filter: url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="protanopia">        <feColorMatrix values="0.152  1.053 -0.205  0.000  0.000                               0.115  0.786  0.099  0.000  0.000                              -0.004 -0.048  1.052  0.000  0.000                               0.000  0.000  0.000  1.000  0.000" />        </filter>      </svg>#protanopia');
}

.tritanopia {
  filter: url('data:image/svg+xml,      <svg xmlns="http://www.w3.org/2000/svg">        <filter id="tritanopia">        <feColorMatrix values="1.256 -0.077 -0.179  0.000  0.000                              -0.078  0.931  0.148  0.000  0.000                               0.005  0.691  0.304  0.000  0.000                               0.000  0.000  0.000  1.000  0.000" />        </filter>      </svg>#tritanopia');
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  border: 0;
}

.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: auto;
}

.visually-hidden:has(a:focus, a:active) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1001;
  background-color: lightgrey;
  color: black;
  font-size: 3rem;
}
.visually-hidden:has(a:focus, a:active) ul,
.visually-hidden:has(a:focus, a:active) ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.visually-hidden:has(a:focus, a:active) li:has(a:focus) {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: auto;
  border: 2px dotted red;
}
.visually-hidden:has(a:focus, a:active) li:has(a:not(:focus)) {
  position: absolute;
  left: -9999px;
}

table,
th,
td {
  border: 1px dotted black;
}

#skip-links a {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  border: 0;
}

#skip-links:has(:focus) a:focus {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1001;
  background-color: hsla(0, 0%, 100%, 0.85);
  color: black;
  font-size: 3rem;
  margin: 0;
  overflow: visible;
  clip-path: auto;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .prefers-reduced-motion {
    display: block;
    color: lightgrey !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prefers-reduced-motion {
    display: block;
  }
}

@media (prefers-contrast: no-preference) {
  .prefers-contrast {
    display: block;
    color: lightgrey !important;
  }
}
@media (prefers-contrast: less) {
  .prefers-contrast {
    display: block;
  }
}
@media (prefers-contrast: more) {
  .prefers-contrast {
    display: block;
  }
}
@media (prefers-contrast: custom) {
  .prefers-contrast {
    display: block;
  }
}

@media (prefers-color-scheme: dark) {
  .prefers-color-scheme {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  .prefers-color-scheme {
    background-color: light;
    color: dark;
  }
}

@media (forced-color: none) {
  .forced-color {
    display: block;
    color: lightgrey !important;
  }
}
@media (forced-color: active) {
  .forced-color {
    display: block;
  }
}

@media (prefers-reduced-data: no-preference) {
  .prefers-reduced-data {
    display: block;
    color: lightgrey !important;
  }
}
@media (prefers-reduced-data: reduce) {
  .prefers-reduced-data {
    display: block;
  }
}

@media (prefers-reduced-transparency: no-preference) {
  .prefers-reduced-transparency {
    display: block;
    color: lightgrey !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .prefers-reduced-transparency {
    display: block;
  }
}

@media (inverted-color: none) {
  .inverted-color {
    display: block;
    color: lightgrey !important;
  }
}
@media (inverted-color: inverted) {
  .inverted-color {
    display: block;
  }
}

/* Stylesheet für Präferenzeinstellungen */
/* ===== Grundlegende Stile ===== */
body {
  color: var(--text-primary);
  background-color: var(--background);
  transition: background-color var(--transition-speed), color var(--transition-speed);
  margin: 0;
  padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  margin-top: 0;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

/* ===== Präferenz-Schalter ===== */
.preferences-panel {
  background-color: var(--surface);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px var(--shadow-light);
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.preferences-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.preference-group {
  margin-bottom: 1.5rem;
}

.preference-group-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.preference-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 8px;
  border-radius: 4px;
  transition: background-color var(--transition-speed);
}

.preference-item:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

.preference-label {
  margin-left: 0.5rem;
  color: var(--text-primary);
  font-weight: normal;
  cursor: pointer;
}

.preference-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  margin-left: 2.2rem;
}

/* ===== Switch Toggle Stil ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:focus + .slider {
  box-shadow: var(--focus-ring);
}

input:checked + .slider:before {
  transform: translateX(16px);
}

/* ===== Content-Bereich ===== */
.content {
  background-color: var(--surface);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px var(--shadow-light);
  border: 1px solid var(--border-color);
}

.content h2 {
  margin-top: 0;
}

.example-area {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.color-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1rem;
}

.color-sample {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 4px var(--shadow-light);
}

.animation-example {
  width: 50px;
  height: 50px;
  background-color: var(--primary);
  border-radius: 4px;
  margin-top: 10px;
  animation: pulse 2s infinite;
  animation-play-state: running;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(calc(1 + 0.2 * var(--animation-scale)));
  }
  100% {
    transform: scale(1);
  }
}
/* ===== Anpassungen für reduzierte Transparenz ===== */
.transparency-example {
  position: relative;
  height: 100px;
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.transparency-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--primary-rgb), calc(0.5 * (1 - var(--media-transparency)) + 0.1 * var(--media-transparency)));
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
  .preferences-panel {
    padding: 15px;
  }
  .color-samples {
    gap: 5px;
  }
  .color-sample {
    width: 60px;
    height: 60px;
    font-size: 0.7rem;
  }
}
body {
  counter-reset: step; /* Coutner mit dem Namen "step" wird auf 0 gesetzt */
}

h2:before {
  counter-increment: step;
  content: counter(step) " ";
  font-size: 3rem;
  opacity: 0.5;
}

nav.breadcrumb {
  padding: 0.8em 1em;
  border: 1px solid hsl(0, 0%, 90%);
  border-radius: 4px;
  background: hsl(300, 14%, 97%);
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentcolor;
  height: 0.8em;
  content: "";
}

nav.breadcrumb [aria-current=page] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

.color-conversion {
  /* - - - - - - - - - - */
  /* SLIDER RESET */
  /* - - - - - - - - - - */
  /* SLIDER THUMB */
  /* Special styling for WebKit/Blink */
  /* All the same stuff for Firefox */
  /* All the same stuff for IE */
  /* - - - - - - - - - - */
  /* SLIDER TRACK */
}
.color-conversion article {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.75rem;
}
.color-conversion article h2 {
  width: 100vw;
}
.color-conversion article section {
  padding: 1rem;
}
.color-conversion fieldset {
  width: var(--size);
  border: none;
  transition: all 100ms ease-out;
  color: var(--bright);
}
.color-conversion fieldset input[type=range] {
  width: calc(var(--size-4rem));
}
.color-conversion fieldset label::after,
.color-conversion fieldset input[type=range]::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  background: transparent;
}
.color-conversion *:active {
  outline: none !important;
}
.color-conversion .contrast {
  font-size: 3rem;
}
.color-conversion .dark fieldset {
  color: var(--dark) !important;
}
.color-conversion .dark input[type=range]::-webkit-slider-runnable-track {
  border: 1px solid var(--dark);
}
.color-conversion .dark input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid var(--dark);
  background: hsla(0, 100%, 0%, 0.25);
}
.color-conversion input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
}
.color-conversion input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
.color-conversion input[type=range]::-ms-track {
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.color-conversion input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1rem;
  width: 1rem;
  margin-top: -0.27rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  border: 1px solid var(--bright);
  border-radius: 0.5rem;
  background: hsla(0, 100%, 100%, 0.25);
  cursor: pointer;
}
.color-conversion input[type=range]::-moz-range-thumb {
  border: 1px solid var(--bright);
  height: 1rem;
  width: 16px;
  border-radius: 0.5rem;
  background: hsla(0, 100%, 100%, 0.25);
  cursor: pointer;
}
.color-conversion input[type=range]::-ms-thumb {
  border: 1px solid var(--bright);
  height: 1rem;
  width: 16px;
  border-radius: 0.5rem;
  background: hsla(0, 100%, 100%, 0.25);
  cursor: pointer;
}
.color-conversion input[type=range]::-webkit-slider-runnable-track {
  height: 0.5rem;
  cursor: pointer;
  background: transparent;
  border-radius: 0;
  border: 1px solid var(--bright);
}
.color-conversion input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}
.color-conversion input[type=range]::-moz-range-track {
  height: 0.5rem;
  cursor: pointer;
  background: transparent;
  border-radius: 0;
  border: 1px solid var(--bright);
}
.color-conversion input[type=range]::-ms-track {
  height: 0.5rem;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
.color-conversion input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 1px solid var(--bright);
  border-radius: 0;
}
.color-conversion input[type=range]:focus::-ms-fill-lower {
  background: transparent;
}
.color-conversion input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 1px solid var(--bright);
  border-radius: 0;
}
.color-conversion input[type=range]:focus::-ms-fill-upper {
  background: transparent;
}

.color-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.color-container .box > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-block-start: 1.2rem;
}
.color-container > * {
  display: flex;
}
.color-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.color-container .box {
  width: 7rem;
  height: 7rem;
  font-size: 12px;
  border-radius: 1rem;
}
.color-container .small-box {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 8px;
  border-radius: 0.3rem;
  margin-inline-end: 0.25rem;
  margin-block-end: 0.25rem;
  padding: 0.25rem;
}

.error {
  background-color: var(--error);
  color: var(--on-error);
}

.success {
  background-color: var(--success);
  color: var(--on-success);
}

.warning {
  background-color: var(--warning);
  color: var(--on-warning);
}

.info {
  background-color: var(--info);
  color: var(--on-info);
}

.primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}

.tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}

.neutral {
  background-color: var(--neutral);
  color: var(--on-neutral);
}

.bright {
  background-color: var(--bright);
  color: var(--on-bright);
}

.medium {
  background-color: var(--medium);
  color: var(--on-medium);
}

.dark {
  background-color: var(--dark);
  color: var(--on-dark);
}

.accred {
  background-color: var(--accred);
  color: var(--on-accred);
}

.shadow {
  box-shadow: 0 0 10px var(--shadow);
}

.disabled {
  background-color: var(--disabled);
  color: var(--on-disabled);
}

.sample {
  background-color: var(--sample);
  color: var(--on-sample);
  border: 1px solid var(--on-sample) !important;
}

.code {
  background-color: var(--code);
  color: var(--on-code);
}

.link-color {
  color: var(--link-color);
}

.link-hover {
  color: var(--link-hover);
}

.link-visited {
  color: var(--link-visited);
}

.link-active {
  color: var(--link-active);
}

.color-card {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.25rem;
  min-height: 10rem;
  max-height: 14rem;
}
.color-card figcaption {
  grid-column: span 5;
  grid-row: span 1;
}
.color-card > ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-height: 10rem;
  max-height: 14rem;
  grid-column: span 1;
  grid-row: span 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.25rem;
  justify-content: center;
}
.color-card > ol > li {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.color-card > ol > li:first-child {
  grid-column: span 2;
  height: 6rem;
}
.color-card > ol > li:not(:first-child) {
  grid-column: span 1;
  height: 3rem;
}
.color-card > ol > li:first-child {
  grid-column: span 2;
}
.color-card > ol > li:not(:first-child) {
  grid-column: span 1;
}
.color-card > h3,
.color-card > h4 {
  display: none;
}
.color-card > ul,
.color-card > ul ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  grid-column: span 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0rem;
}
.color-card > ul > li:first-child,
.color-card > ul ul > li:first-child {
  grid-column: span 2;
  grid-row: span 1;
  height: 4rem;
}
.color-card > ul > li:not(:first-child),
.color-card > ul ul > li:not(:first-child) {
  grid-column: span 1;
  grid-row: span 1;
  height: 2rem;
}

.contrast-container {
  --lightgreen: #a4c355;
  --darkgreen: #255234;
  --lightgreen-1: #a5c157;
  --darkgreen-1: #326e46;
  --yellow: #fdbd00;
  --blue: #1190eb;
  --lightgray: rgb(158, 158, 157);
  --darkgray: rgb(79, 79, 79);
  --lightgray-1: rgb(192, 192, 192);
  --darkgray-1: rgb(79, 79, 79);
}

.contrast-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 10rem;
  height: 10rem;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  font-family: Barlow;
  font-size: 18px;
}
.box .figcaption {
  display: block;
  width: 100%;
}
.box small {
  font-size: 0.8rem;
}

.box h3 {
  margin: 0;
  padding: 0;
  font-size: 2em;
  line-height: 1;
}

.box p {
  margin: 0;
  padding: 0;
  font-size: 1.5em;
  line-height: 1;
}

.green-1 {
  color: var(--lightgreen);
  background: var(--darkgreen);
}

.green-2 {
  color: var(--darkgreen);
  background: var(--lightgreen);
}

.green-3 {
  color: var(--lightgreen-1);
  background: var(--darkgreen-1);
}

.green-4 {
  color: var(--darkgreen-1);
  background: var(--lightgreen-1);
}

.blue-yellow-1 {
  color: var(--yellow);
  background: var(--blue);
}

.blue-yellow-2 {
  color: var(--blue);
  background: var(--yellow);
}

.lightgray-darkgray {
  color: var(--lightgray);
  background: var(--darkgray);
}

.darkgray-lightgray {
  color: var(--darkgray);
  background: var(--lightgray);
}

.lightgray-darkgray-1 {
  color: var(--lightgray-1);
  background: var(--darkgray);
}

.darkgray-lightgray-1 {
  color: var(--darkgray);
  background: var(--lightgray-1);
}

.image {
  color: var(--yellow);
  background: url("https://picsum.photos/id/92/200/200");
  background-size: cover;
}

.gradient {
  color: var(--blue);
  background: linear-gradient(45deg, var(--yellow) 0%, var(--darkgreen) 100%);
}

.not-bold {
  font-weight: 400;
}

.wcag-3-1 {
  --darkgray: #7d7d7d;
  --lightgray: #dcdcdc;
  background-color: var(--lightgray);
  color: var(--darkgray);
  padding: 0.5rem;
}

.wcag-3-1-1 {
  --lightgray: #ffffff;
  --darkgray: #959595;
  background-color: var(--lightgray);
  color: var(--darkgray);
  padding: 0.5rem;
}

.outset {
  border: 2px outset;
  border-radius: 0.2rem;
}

.inset {
  border: 2px inset;
  border-radius: 0rem;
}

a.icon {
  color: var(--on-primary);
  background-color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

a.icon:hover {
  transform: translate(-0.06rem, -0.06rem);
  box-shadow: 0.125rem 0.125rem 0.25rem var(--shadow);
}

.infographic {
  border: 1px solid black;
  width: 500px;
  height: 300px;
  margin: 1rem;
  stroke: black;
  stroke-width: 1px;
  fill: transparent;
  font-size: 13px;
}

svg text {
  stroke: transparent;
  stroke-width: 0;
  fill: black;
}

svg *:focus,
svg *:focus-visible {
  border: 2px dotted red;
}

[role=dataset] [role=datapoint]:not(text):nth-of-type(1) {
  fill: red;
}

[role=dataset] [role=datapoint]:not(text):nth-of-type(2) {
  fill: green;
}

[role=dataset] [role=datapoint]:not(text):nth-of-type(3) {
  fill: blue;
}

[role=dataset] [role=datapoint]:not(text):nth-of-type(4) {
  fill: yellow;
}

label:not(:has([type=radio]), :has([type=checkbox]))::before {
  content: "";
  display: block;
  margin-block-end: 1rem;
}
label:not(:has([type=radio]), :has([type=checkbox]))::after {
  content: "";
  display: inline-block;
  width: 2rem;
}

fieldset:not(:has(legend)) {
  border: 2px dotted red;
}

body > nav[id=main-navigation] {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: fixed;
  left: 0;
  top: 0;
  font-size: 0.75rem !important;
  z-index: 1000;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  background: var(--medium-bright);
}
body > nav[id=main-navigation] ul,
body > nav[id=main-navigation] ol {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
body > nav[id=main-navigation] li {
  transition-property: color, background;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  padding: 0.5rem;
}
body > nav[id=main-navigation] a:link,
body > nav[id=main-navigation] a:visited {
  color: var(--dark);
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}
body > nav[id=main-navigation] li:has(a:hover) {
  background: var(--dark);
}
body > nav[id=main-navigation] li:has(a:hover) a {
  color: var(--bright);
}
body > nav[id=main-navigation] + * {
  margin-top: 5rem;
}

#menubar {
  /* aria-current styling */
  /* focus styling */
}
#menubar .page header {
  border: #005a9c solid 2px;
  background: #005a9c;
  color: white;
  text-align: center;
}
#menubar .page header .title {
  font-size: 2.5em;
  font-weight: bold;
  font-family: serif;
}
#menubar .page header .tagline {
  font-style: italic;
}
#menubar .page .main {
  padding: 1em 5% 5em;
  border-left: 2px solid #fafafa;
  border-right: 2px solid #fafafa;
}
#menubar .page footer {
  border: #005a9c solid 2px;
  background: #005a9c;
  font-family: serif;
  color: white;
  font-style: italic;
  padding-left: 1em;
}
#menubar .page nav {
  margin: 0;
  padding: 0;
  border: 2px solid #fafafa;
}
#menubar .menubar-navigation {
  margin: 0;
  padding: 2px;
  font-size: 110%;
  list-style: none;
  background-color: #fafafa;
  border: #fafafa solid 1px;
}
#menubar .menubar-navigation li {
  margin: 0;
  padding: 0;
  border: 0 solid black;
  list-style: none;
}
#menubar .menubar-navigation > li {
  display: inline-block;
  position: relative;
}
#menubar .menubar-navigation > li li {
  display: block;
}
#menubar .menubar-navigation > li > [role=menuitem] {
  display: inline-block;
  margin: 2px;
  padding: 4px;
  padding-bottom: 8px;
  background-color: #fafafa;
  border: 0 solid #fafafa;
  color: black;
}
#menubar .menubar-navigation [role=separator] {
  padding-top: 3px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: repeat-x;
}
#menubar .menubar-navigation [role=menu] [role=menuitem],
#menubar .menubar-navigation [role=menu] [role=separator] {
  display: block;
  width: 12em;
  margin: 2px;
  padding: 4px;
  padding-left: 8px;
  background-color: #fafafa;
  border: 0 solid #fafafa;
  color: black;
}
#menubar .menubar-navigation [role=menuitem] svg {
  fill: currentcolor;
  stroke: currentcolor;
}
#menubar .menubar-navigation [role=menuitem] svg.down {
  padding-left: 0.125em;
}
#menubar .menubar-navigation [role=menuitem] svg.right {
  position: absolute;
  padding-top: 0.35em;
  right: 0.75em;
}
#menubar .menubar-navigation [role=menuitem][aria-expanded=true] svg.down {
  transform: rotate(180deg);
}
#menubar .menubar-navigation [role=menuitem][aria-expanded=true] svg.right {
  transform: rotate(90deg) translate(5px, -5px);
}
#menubar .menubar-navigation [role=menu] {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  padding: 7px 4px;
  border: 2px solid #034575;
  background-color: #fafafa;
}
#menubar .menubar-navigation [role=group] {
  margin: 0;
  padding: 0;
}
#menubar .menubar-navigation > li > [role=menuitem][aria-current],
#menubar .menubar-navigation > li > [role=menuitem].aria-current-path {
  padding-bottom: 2px;
  border-bottom: 4px solid #034575;
}
#menubar .menubar-navigation [role=menu] [role=menuitem].aria-current-path,
#menubar .menubar-navigation [role=menu] [role=menuitem][aria-current] {
  padding-left: 4px;
  border-left: 4px solid #034575;
}
#menubar .menubar-navigation.focus {
  padding: 0;
  border: #034575 solid 3px;
}
#menubar .menubar-navigation > li > [aria-expanded=true],
#menubar .menubar-navigation > li > [role=menuitem]:focus,
#menubar .menubar-navigation > li > [role=menuitem]:hover {
  outline: none;
  background-color: #ccc;
}
#menubar .menubar-navigation > li > [role=menuitem]:focus,
#menubar .menubar-navigation > li > [role=menuitem]:hover {
  padding: 2px;
  padding-bottom: 4px;
  border: 2px solid #034575;
}
#menubar .menubar-navigation [role=menu] [aria-expanded=true],
#menubar .menubar-navigation [role=menu] [role=menuitem]:focus,
#menubar .menubar-navigation [role=menu] [role=menuitem]:hover {
  outline: none;
  background-color: #ccc;
}
#menubar .menubar-navigation [role=menu] [role=menuitem]:focus,
#menubar .menubar-navigation [role=menu] [role=menuitem]:hover {
  padding: 2px;
  padding-left: 6px;
  border: 2px solid #034575;
}
#menubar .menubar-navigation > li > [aria-expanded=true].aria-current-path,
#menubar .menubar-navigation > li > [role=menuitem].aria-current-path:focus,
#menubar .menubar-navigation > li > [role=menuitem].aria-current-path:hover,
#menubar .menubar-navigation > li > [role=menuitem][aria-current]:focus,
#menubar .menubar-navigation > li > [role=menuitem][aria-current]:hover {
  padding-bottom: 2px;
  border-bottom: 4px solid #034575;
}
#menubar .menubar-navigation [role=menu] [aria-expanded=true].aria-current-path,
#menubar .menubar-navigation [role=menu] [role=menuitem].aria-current-path:focus,
#menubar .menubar-navigation [role=menu] [role=menuitem].aria-current-path:hover,
#menubar .menubar-navigation [role=menu] [role=menuitem][aria-current]:focus,
#menubar .menubar-navigation [role=menu] [role=menuitem][aria-current]:hover {
  padding-left: 4px;
  border-left: 4px solid #034575;
}

.nav-column {
  flex-direction: column;
  line-height: 1.5;
}
.nav-column li {
  padding-block: 0rem;
}

.parallax .section {
  border: 5px solid white;
  border-top: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}
.parallax .section:first-of-type {
  border-top: 5px solid white;
}
.parallax .section > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
}
.parallax h1,
.parallax h2,
.parallax h3,
.parallax p {
  font-size: 1.6667rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--bright);
  text-shadow: 0.125rem 0.125rem 0.25rem var(--shadow);
}
.parallax article:nth-child(1) {
  height: 100vh;
}
.parallax .teaser-1 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-2 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-3 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-4 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-5 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-6 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-7 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-8 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-9 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-10 {
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 8px;
  perspective-origin: 0%;
  min-width: 100vw;
}
.parallax .teaser-1 {
  background-image: url("./../figures/588-2509x1673.jpg");
  min-height: 50vh;
}
.parallax .teaser-2 {
  background-image: url("./../figures/52-1280x853.jpg");
  min-height: 50vh;
}
.parallax .teaser-3 {
  background-image: url("./../figures/594-2509x1673.jpg");
  min-height: 50vh;
}
.parallax .teaser-4 {
  background-image: url("./../figures/1019-5472x3648.jpg");
  min-height: 50vh;
}
.parallax .teaser-5 {
  background-image: url("./../figures/588-2509x1673.jpg");
  min-height: 50vh;
}
.parallax .teaser-6 {
  background-image: url("./../figures/52-1280x853.jpg");
  min-height: 50vh;
}
.parallax .teaser-7 {
  background-image: url("./../figures/594-2509x1673.jpg");
  min-height: 50vh;
}
.parallax .teaser-8 {
  background-image: url("./../figures/1019-5472x3648.jpg");
  min-height: 50vh;
}
.parallax .teaser-9 {
  background-image: url("./../figures/588-2509x1673.jpg");
  min-height: 50vh;
}
.parallax .teaser-10 {
  background-image: url("./../figures/52-1280x853.jpg");
  min-height: 50vh;
}
@media (prefers-reduced-motion: no-preference) {
  .parallax .teaser-1 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-2 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-3 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-4 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-5 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-6 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-7 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-8 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-9 {
    animation: parallax 2s infinite;
  }
  .parallax .teaser-10 {
    animation: parallax 2s infinite;
  }
}
@keyframes parallax {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .parallax .teaser-1 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-2 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-3 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-4 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-5 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-6 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-7 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-8 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-9 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
  .parallax .teaser-10 {
    animation: parallax 10s infinite;
    background-attachment: scroll;
  }
}

:root.reduced-motion .teaser-1 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-2 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-3 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-4 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-5 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-6 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-7 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-8 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-9 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}
:root.reduced-motion .teaser-10 {
  animation: parallax 10s infinite;
  background-attachment: scroll;
}

#combobox {
  /* focus and hover styling */
}
#combobox .combobox-list {
  position: relative;
}
#combobox .combobox .group {
  display: inline-flex;
  padding: 4px;
  cursor: pointer;
}
#combobox .combobox input,
#combobox .combobox button {
  background-color: white;
  color: black;
  box-sizing: border-box;
  height: 30px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  border: 1px solid gray;
  position: relative;
  cursor: pointer;
}
#combobox .combobox input {
  width: 150px;
  border-right: none;
  outline: none;
  font-size: 87.5%;
  padding: 1px 3px;
}
#combobox .combobox button {
  width: 19px;
  border-left: none;
  outline: none;
  color: rgb(0, 90, 156);
}
#combobox .combobox button[aria-expanded=true] svg {
  transform: rotate(180deg) translate(0, -3px);
}
#combobox ul[role=listbox] {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 4px;
  top: 34px;
  list-style: none;
  background-color: white;
  display: none;
  box-sizing: border-box;
  border: 2px currentcolor solid;
  max-height: 250px;
  width: 168px;
  overflow: scroll;
  overflow-x: hidden;
  font-size: 87.5%;
  cursor: pointer;
}
#combobox ul[role=listbox] li[role=option] {
  margin: 0;
  display: block;
  padding-left: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}
#combobox .combobox .group.focus,
#combobox .combobox .group:hover {
  padding: 2px;
  border: 2px solid currentcolor;
  border-radius: 4px;
}
#combobox .combobox .group.focus polygon,
#combobox .combobox .group:hover polygon {
  fill-opacity: 1;
}
#combobox .combobox .group.focus input,
#combobox .combobox .group.focus button,
#combobox .combobox .group input:hover,
#combobox .combobox .group button:hover {
  background-color: #def;
}
#combobox [role=listbox].focus [role=option][aria-selected=true],
#combobox [role=listbox] [role=option]:hover {
  background-color: #def;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
}

#accordion {
  /* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
}
#accordion .accordion {
  margin: 0;
  padding: 0;
  border: 2px solid hsl(0, 0%, 52%);
  border-radius: 7px;
  width: 20em;
}
#accordion .accordion h3 {
  margin: 0;
  padding: 0;
}
#accordion .accordion:focus-within {
  border-color: hsl(216, 94%, 43%);
}
#accordion .accordion:focus-within h3 {
  background-color: hsl(0, 0%, 97%);
}
#accordion .accordion > * + * {
  border-top: 1px solid hsl(0, 0%, 52%);
}
#accordion .accordion-trigger {
  background: none;
  color: hsl(0, 0%, 13%);
  display: block;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
  width: 100%;
  outline: none;
}
#accordion .accordion-trigger:focus,
#accordion .accordion-trigger:hover {
  background: hsl(216, 94%, 94%);
}
#accordion .accordion-trigger:focus {
  outline: 4px solid transparent;
}
#accordion .accordion > *:first-child .accordion-trigger,
#accordion .accordion > *:first-child {
  border-radius: 5px 5px 0 0;
}
#accordion .accordion > *:last-child .accordion-trigger,
#accordion .accordion > *:last-child {
  border-radius: 0 0 5px 5px;
}
#accordion button {
  border-style: none;
}
#accordion .accordion button::-moz-focus-inner {
  border: 0;
}
#accordion .accordion-title {
  display: block;
  pointer-events: none;
  border: transparent 2px solid;
  border-radius: 5px;
  padding: 0.25em;
  outline: none;
}
#accordion .accordion-trigger:focus .accordion-title {
  border-color: hsl(216, 94%, 43%);
}
#accordion .accordion-icon {
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  height: 0.5rem;
  pointer-events: none;
  position: absolute;
  right: 2em;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 0.5rem;
}
#accordion .accordion-trigger:focus .accordion-icon,
#accordion .accordion-trigger:hover .accordion-icon {
  border-color: hsl(216, 94%, 43%);
}
#accordion .accordion-trigger[aria-expanded=true] .accordion-icon {
  transform: translateY(-50%) rotate(-135deg);
}
#accordion .accordion-panel {
  margin: 0;
  padding: 1em 1.5em;
}
#accordion .accordion-panel[hidden] {
  display: none;
}
#accordion fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
#accordion input {
  border: 1px solid hsl(0, 0%, 42%);
  border-radius: 0.3em;
  display: block;
  font-size: inherit;
  padding: 0.3em 0.5em;
}

#alert [role=alert] {
  padding: 10px;
  border: 2px solid hsl(206, 74%, 54%);
  border-radius: 4px;
  background: hsl(206, 74%, 90%);
}
#alert [role=alert]:empty {
  display: none;
}

#modal-dialog {
  /* native <dialog> element uses the ::backdrop pseudo-element */
  /* dialog::backdrop, */
  /* this is added to the body when a dialog is open */
}
#modal-dialog .hidden {
  display: none;
}
#modal-dialog [role=dialog] {
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid #000;
  background-color: #fff;
  min-height: 100vh;
}
@media screen and (min-width: 640px) {
  #modal-dialog [role=dialog] {
    position: absolute;
    top: 2rem;
    left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
    transform: translateX(-50%); /* move backwards 50% of this element's width */
    min-width: 610px; /* == breakpoint - left+right margin */
    min-height: auto;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
  }
}
#modal-dialog .dialog_label {
  text-align: center;
}
#modal-dialog .dialog_form {
  margin: 15px;
}
#modal-dialog .dialog_form .label_text {
  box-sizing: border-box;
  padding-right: 0.5em;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  width: 30%;
  text-align: right;
}
#modal-dialog .dialog_form .label_info {
  box-sizing: border-box;
  padding-right: 0.5em;
  font-size: 12px;
  width: 30%;
  text-align: right;
  display: inline-block;
}
#modal-dialog .dialog_form_item {
  margin: 10px 0;
  font-size: 0;
}
#modal-dialog .dialog_form_item .wide_input {
  box-sizing: border-box;
  max-width: 70%;
  width: 27em;
}
#modal-dialog .dialog_form_item .city_input {
  box-sizing: border-box;
  max-width: 70%;
  width: 17em;
}
#modal-dialog .dialog_form_item .state_input {
  box-sizing: border-box;
  max-width: 70%;
  width: 15em;
}
#modal-dialog .dialog_form_item .zip_input {
  box-sizing: border-box;
  max-width: 70%;
  width: 9em;
}
#modal-dialog .dialog_form_actions {
  text-align: right;
  padding: 0 20px 20px;
}
#modal-dialog .dialog_close_button {
  float: right;
  position: absolute;
  top: 10px;
  left: 92%;
  height: 25px;
}
#modal-dialog .dialog_close_button img {
  border: 0;
}
#modal-dialog .dialog_desc {
  padding: 10px 20px;
}
#modal-dialog .dialog-backdrop {
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@media screen and (min-width: 640px) {
  #modal-dialog .dialog-backdrop {
    background: rgba(0, 0, 0, 0.3);
  }
}
#modal-dialog .dialog-backdrop.active {
  display: block;
}
#modal-dialog .no-scroll {
  overflow-y: auto !important;
}
#modal-dialog .has-dialog {
  overflow: hidden;
}

#breadcrumb nav.breadcrumb {
  padding: 0.8em 1em;
  border: 1px solid hsl(0, 0%, 90%);
  border-radius: 4px;
  background: hsl(300, 14%, 97%);
}
#breadcrumb nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
#breadcrumb nav.breadcrumb li {
  display: inline;
}
#breadcrumb nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentcolor;
  height: 0.8em;
  content: "";
}
#breadcrumb nav.breadcrumb [aria-current=page] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

#button [role=button] {
  display: inline-block;
  position: relative;
  padding: 0.4em 0.7em;
  border: 1px solid hsl(213, 71%, 49%);
  border-radius: 5px;
  box-shadow: 0 1px 2px hsl(216, 27%, 55%);
  color: #fff;
  text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
  background-color: hsl(216, 82%, 51%);
  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
}
#button [role=button]:hover {
  border-color: hsl(213, 71%, 29%);
  background-color: hsl(216, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
  cursor: default;
}
#button [role=button]:focus {
  outline: none;
}
#button [role=button]:focus::before {
  position: absolute;
  /* button border width - outline width - offset */
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  border: 3px solid hsl(213, 71%, 49%);
  /* button border radius + outline width + offset */
  border-radius: 11px;
  content: "";
}
#button [role=button]:active {
  border-color: hsl(213, 71%, 49%);
  background-color: hsl(216, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
  box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
}
#button [role=button][aria-pressed] {
  border-color: hsl(261, 71%, 49%);
  box-shadow: 0 1px 2px hsl(261, 27%, 55%);
  text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
  background-color: hsl(261, 82%, 51%);
  background-image: linear-gradient(to bottom, hsl(261, 82%, 53%), hsl(261, 82%, 47%));
}
#button [role=button][aria-pressed]:hover {
  border-color: hsl(261, 71%, 29%);
  background-color: hsl(261, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(261, 82%, 33%), hsl(261, 82%, 27%));
}
#button [role=button][aria-pressed=true] {
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  border-color: hsl(261, 71%, 49%);
  background-color: hsl(261, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(261, 82%, 63%), hsl(261, 82%, 57%));
  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
}
#button [role=button][aria-pressed=true]:hover {
  border-color: hsl(261, 71%, 49%);
  background-color: hsl(261, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(261, 82%, 43%), hsl(261, 82%, 37%));
  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
}
#button [role=button][aria-pressed]:focus::before {
  border-color: hsl(261, 71%, 49%);
}
#button [role=button] svg {
  margin: 0.15em auto -0.15em;
  height: 1em;
  width: 1em;
  pointer-events: none;
}

#carousel {
  /* .carousel-tablist */
  /* More like bootstrap, less accessible */
  /* Shared CSS for Pause and Tab Controls */
  /* SVG Controls */
  /* Shared CSS for Tabs */
  /* More accessible carousel styles, with caption and controls above/below image */
  /* More accessible caption styling */
  /* Shared CSS for Pause and Tab Controls */
  /* Shared CSS for Tabs */
}
#carousel img.reload {
  padding: 0.25em;
  display: block-inline;
  position: relative;
  top: 6px;
  height: 0.9em;
}
#carousel .carousel-tablist {
  background-color: #eee;
  max-width: 900px;
}
#carousel .carousel-tablist .carousel-inner {
  position: relative;
}
#carousel .carousel-tablist .carousel-items {
  padding: 5px;
}
#carousel .carousel-tablist .carousel-items.focus {
  padding: 2px;
  border: solid 3px #005a9c;
}
#carousel .carousel-tablist .carousel-item {
  display: none;
  max-height: 400px;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
#carousel .carousel-tablist .carousel-item.active {
  display: block;
}
#carousel .carousel-tablist .carousel-item .carousel-image a img {
  height: 100%;
  width: 100%;
}
#carousel .carousel-tablist .carousel-item .carousel-caption a {
  cursor: pointer;
  text-decoration: underline;
  color: #fff;
  font-weight: 600;
}
#carousel .carousel-tablist .carousel-item .carousel-caption a,
#carousel .carousel-tablist .carousel-item .carousel-caption span.contrast {
  margin: 0;
  padding: 6px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 5px;
  border: 0 solid transparent;
}
#carousel .carousel-tablist-moreaccessible .carousel-items .carousel-image a {
  display: block;
  margin: 0;
  padding: 5px;
  text-decoration: none;
  border: none;
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption a {
  display: inline-block;
  margin: 0;
  padding: 6px;
  color: black;
  background-color: transparent;
  border: none;
  border-radius: 5px;
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast,
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption span.contrast:hover {
  background-color: transparent;
}
#carousel .carousel-tablist .carousel-item .carousel-caption a:hover,
#carousel .carousel-tablist .carousel-item .carousel-caption span.contrast:hover {
  background-color: rgb(0, 0, 0);
}
#carousel .carousel-tablist .carousel-item .carousel-caption a:focus {
  padding: 4px;
  border: 2px solid #eee;
  background-color: rgb(0, 0, 0);
  outline: none;
  border-width: 2px solid #fff;
  color: #fff;
}
#carousel .carousel-tablist .carousel-item .carousel-caption p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 0;
}
#carousel .carousel-tablist .carousel-item .carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 0;
  left: 15%;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}
#carousel .carousel-tablist .controls {
  box-sizing: border-box;
  position: absolute;
  top: 1em;
  z-index: 10;
  display: flex;
  width: 100%;
  padding: 0.25em 1.25em 0;
}
#carousel .carousel-tablist .tab-wrapper {
  flex: 1 1 auto;
  height: 30px;
  text-align: center;
}
#carousel .carousel-tablist .rotation {
  flex: 0 0 auto;
  height: 30px;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  z-index: 10;
}
#carousel .carousel-tablist .svg-play .background {
  stroke: black;
  fill: black;
  stroke-width: 1px;
  opacity: 0.6;
}
#carousel .carousel-tablist .svg-play .border {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2px;
}
#carousel .carousel-tablist .svg-play .pause {
  stroke-width: 4;
  fill: transparent;
  stroke: transparent;
}
#carousel .carousel-tablist .svg-play .play {
  stroke-width: 1;
  fill: transparent;
  stroke: transparent;
}
#carousel .carousel-tablist .pause .svg-play .pause,
#carousel .carousel-tablist .play .svg-play .play {
  fill: white;
  stroke: white;
}
#carousel .carousel-tablist .rotation:focus .svg-play .background,
#carousel .carousel-tablist .rotation:hover .svg-play .background,
#carousel .carousel-tablist .rotation:hover .svg-play .border {
  fill: #005a9c;
  stroke: #005a9c;
  opacity: 1;
}
#carousel .carousel-tablist .rotation:focus .svg-play .border {
  stroke: white;
}
#carousel .carousel-tablist [role=tablist] {
  box-sizing: border-box;
  border: 0 transparent solid;
  border-radius: 13px;
  display: inline-block;
  padding-top: 2px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.65);
}
#carousel .carousel-tablist [role=tablist].focus {
  border-width: 2px;
  border-color: white;
  padding-top: 0;
  background-color: #005a9c;
}
#carousel .carousel-tablist [role=tab] {
  position: relative;
  top: -2px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
  outline: none;
  width: 34px;
}
#carousel .carousel-tablist [role=tab] circle.border {
  display: none;
  z-index: 12;
}
#carousel .carousel-tablist [role=tab] circle.tab {
  z-index: 16;
}
#carousel .carousel-tablist [role=tab] circle.tab-background {
  stroke: black;
  fill: black;
  stroke-width: 2px;
  opacity: 0.6;
  z-index: 14;
}
#carousel .carousel-tablist [role=tab] circle.tab,
#carousel .carousel-tablist [role=tab] circle.border {
  stroke: white;
  fill: transparent;
  stroke-width: 2px;
}
#carousel .carousel-tablist-moreaccessible [role=tab] circle.tab-background {
  z-index: 16;
}
#carousel .carousel-tablist-moreaccessible [role=tab] circle.tab {
  z-index: 18;
}
#carousel .carousel-tablist [role=tab][aria-selected=true] circle.tab {
  fill: white;
}
#carousel .carousel-tablist-moreaccessible [role=tab] circle.border {
  z-index: 14;
}
#carousel .carousel-tablist [role=tab]:focus circle.border {
  display: block;
  fill: #005a9c;
  stroke: #fff;
}
#carousel .carousel-tablist [role=tablist].focus circle.tab-background {
  stroke: #005a9c;
  fill: #005a9c;
}
#carousel .carousel-tablist [role=tab]:hover circle.tab-background {
  fill: white;
  stroke: white;
  opacity: 1;
}
#carousel .carousel-tablist [role=tab]:hover circle.border,
#carousel .carousel-tablist [role=tab]:hover circle.tab {
  fill: #005a9c;
  stroke: #005a9c;
  opacity: 1;
}
#carousel .carousel-tablist [role=tab][aria-selected=true]:hover circle.tab {
  fill: white;
}
#carousel .carousel-tablist-moreaccessible {
  padding: 0;
  margin: 0;
  position: relative;
  border: #eee solid 4px;
  border-radius: 5px;
}
#carousel .carousel-tablist-moreaccessible .carousel-items,
#carousel .carousel-tablist-moreaccessible .carousel-items.focus {
  padding: 0;
  border: none;
}
#carousel .carousel-tablist-moreaccessible .carousel-items.focus .carousel-image a {
  padding: 2px;
  border: 3px solid #005a9c;
}
#carousel .carousel-tablist-moreaccessible .carousel-item {
  padding: 0;
  margin: 0;
  max-height: none;
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption {
  position: static;
  padding: 0;
  margin: 0;
  height: 60px;
  color: black;
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption p {
  padding: 0;
  margin: 0;
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption h3 {
  font-size: 1.1em;
  padding: 0;
  margin: 0;
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#carousel .carousel-tablist-moreaccessible .carousel-item .carousel-caption a:focus {
  padding: 4px;
  border: 2px solid #005a9c;
  background-color: transparent;
  color: black;
  outline: none;
}
#carousel .carousel-tablist-moreaccessible .controls {
  position: relative;
  top: 0;
  left: 0;
  padding: 0.25em 0.25em 0;
}
#carousel .carousel-tablist-moreaccessible [role=tab] {
  z-index: 20;
}

#checkbox .checkbox-mixed ul.checkboxes {
  list-style: none;
  margin: 0;
  padding: 0;
}
#checkbox .checkbox-mixed ul.checkboxes li {
  margin: 0;
  padding: 0;
  padding-left: 15px;
}
#checkbox .checkbox-mixed label {
  margin: 1px;
  padding: 4px;
}
#checkbox .checkbox-mixed [role=checkbox] {
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}
#checkbox .checkbox-mixed [role=checkbox]::before {
  position: relative;
  top: 1px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3C/svg%3E");
}
#checkbox .checkbox-mixed [role=checkbox][aria-checked=true]::before {
  position: relative;
  top: 1px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3Cpolyline points='4,8 7,12 12,5' fill='none' stroke='currentcolor' stroke-width='2' /%3E%3C/svg%3E");
}
#checkbox .checkbox-mixed [role=checkbox][aria-checked=mixed]::before {
  position: relative;
  top: 1px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3Cline x1='5' y1='5' x2='12' y2='12' stroke='currentcolor' stroke-width='2' /%3E%3C/svg%3E");
}
#checkbox .checkbox-mixed input:focus,
#checkbox .checkbox-mixed [role=checkbox] {
  outline: none;
}
#checkbox .checkbox-mixed [role=checkbox]:focus,
#checkbox .checkbox-mixed [role=checkbox]:hover {
  padding: 2px;
  border: 2px solid #005a9c;
  border-radius: 5px;
  background-color: #def;
}
#checkbox .checkbox-mixed label.focus,
#checkbox .checkbox-mixed label:hover {
  padding: 2px;
  border: 2px solid #005a9c;
  background-color: #def;
  border-radius: 5px;
  cursor: pointer;
}

#table-sortable {
  /* Focus and hover styling */
}
#table-sortable .sr-only {
  position: absolute;
  top: -30em;
}
#table-sortable table.sortable td,
#table-sortable table.sortable th {
  padding: 0.125em 0.25em;
  width: 8em;
}
#table-sortable table.sortable th {
  font-weight: bold;
  border-bottom: thin solid #888;
  position: relative;
}
#table-sortable table.sortable th.no-sort {
  padding-top: 0.35em;
}
#table-sortable table.sortable th:nth-child(5) {
  width: 10em;
}
#table-sortable table.sortable th button {
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}
#table-sortable table.sortable th button span {
  position: absolute;
  right: 4px;
}
#table-sortable table.sortable th[aria-sort=descending] span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}
#table-sortable table.sortable th[aria-sort=ascending] span::after {
  content: "▲";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}
#table-sortable table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}
#table-sortable table.sortable td.num {
  text-align: right;
}
#table-sortable table.sortable tbody tr:nth-child(odd) {
  background-color: #ddd;
}
#table-sortable table.sortable th button:focus,
#table-sortable table.sortable th button:hover {
  padding: 2px;
  border: 2px solid currentcolor;
  background-color: #e5f4ff;
}
#table-sortable table.sortable th button:focus span,
#table-sortable table.sortable th button:hover span {
  right: 2px;
}
#table-sortable table.sortable th:not([aria-sort]) button:focus span::after,
#table-sortable table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

#tabs .tabs {
  font-family: "lucida grande", sans-serif;
}
#tabs [role=tablist] {
  min-width: 100%;
}
#tabs [role=tab],
#tabs [role=tab]:focus,
#tabs [role=tab]:hover {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: 2px;
  margin: 0;
  margin-top: 4px;
  padding: 3px 3px 4px;
  border: 1px solid hsl(219, 1%, 72%);
  border-bottom: 2px solid hsl(219, 1%, 72%);
  border-radius: 5px 5px 0 0;
  background: hsl(220, 20%, 94%);
  outline: none;
  font-weight: bold;
  max-width: 22%;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}
#tabs [role=tab][aria-selected=true] {
  padding: 2px 2px 4px;
  margin-top: 0;
  border-width: 2px;
  border-top-width: 6px;
  border-top-color: rgb(36, 116, 214);
  border-bottom-color: hsl(220, 43%, 99%);
  background: hsl(220, 43%, 99%);
}
#tabs [role=tab][aria-selected=false] {
  border-bottom: 1px solid hsl(219, 1%, 72%);
}
#tabs [role=tab] span.focus {
  display: inline-block;
  margin: 2px;
  padding: 4px 6px;
}
#tabs [role=tab]:hover span.focus,
#tabs [role=tab]:focus span.focus,
#tabs [role=tab]:active span.focus {
  padding: 2px 4px;
  border: 2px solid rgb(36, 116, 214);
  border-radius: 3px;
}
#tabs [role=tabpanel] {
  padding: 5px;
  border: 2px solid hsl(219, 1%, 72%);
  border-radius: 0 5px 5px;
  background: hsl(220, 43%, 99%);
  min-height: 10em;
  width: 100%;
  overflow: auto;
}
#tabs [role=tabpanel].is-hidden {
  display: none;
}
#tabs [role=tabpanel] p {
  margin: 0;
}

#switch fieldset {
  width: 22em;
}
#switch legend {
  font-size: 110%;
}
#switch label {
  display: block;
  margin: 0.5em;
  padding: 4px 4px 6px 6px;
  border: 0 solid #005a9c;
  border-radius: 5px;
  width: 16em;
}
#switch label .label {
  display: inline-block;
  width: 9em;
  user-select: none;
}
#switch label input[role=switch] {
  opacity: 0;
}
#switch label input[role=switch] ~ .state {
  display: inline-block;
  user-select: none;
}
#switch label input[role=switch] ~ .state > .container {
  position: relative;
  top: 2px;
  display: inline-block;
  border: 2px solid black;
  width: 40px;
  height: 20px;
  border-radius: 11px;
}
#switch label input[role=switch] ~ .state > .container > .position {
  position: relative;
  top: 1px;
  left: 2px;
  display: inline-block;
  border: 2px solid black;
  border-radius: 9px;
  width: 14px;
  height: 14px;
  background: black;
  opacity: 0.6;
}
#switch label input[role=switch]:not(:checked) ~ .state span.on {
  display: none;
}
#switch label input[role=switch]:checked ~ .state > span.off {
  display: none;
}
#switch label input[role=switch]:checked ~ .state > .container > .position {
  left: 20px;
  border-color: green;
  background: green;
  opacity: 1;
}
#switch label.focus,
#switch label:hover {
  padding: 2px 2px 4px 4px;
  border-width: 2px;
  outline: none;
  background-color: #def;
  cursor: pointer;
}
#switch label.focus span.container,
#switch label:hover span.container {
  background-color: white;
}

#menubar-editor {
  @charset "utf-8";
  /* focus and hover styling */
  /*
  * Text area styles
  */
}
#menubar-editor .menubar-editor {
  margin: 0;
  padding: 2px;
  width: 560px;
}
#menubar-editor .menubar-editor.focus {
  padding: 0;
  border: solid 2px #034575;
}
#menubar-editor .menubar-editor textarea {
  padding: 4px;
  margin: 0;
  border: 2px solid #eee;
  height: 400px;
  width: 548px;
  font-size: medium;
  font-family: sans-serif;
}
#menubar-editor .menubar-editor [role=menubar] {
  margin: 0;
  padding: 2px;
  border: 2px solid #eee;
  font-size: 110%;
  list-style: none;
  background-color: #eee;
  height: 32px;
  display: block;
}
#menubar-editor .menubar-editor [role=menubar] li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menubar-editor .menubar-editor [role=menubar] > li {
  display: inline-block;
  position: relative;
  top: 3px;
  left: 1px;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem] > [aria-hidden]::before {
  content: "▼";
  padding-left: 0.25rem;
  font-size: 11px;
  vertical-align: middle;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem][aria-expanded=true] > [aria-hidden]::before {
  content: "▲";
}
#menubar-editor .menubar-editor [role=menubar] [role=menu] {
  display: none;
  margin: 0;
  padding: 2px;
  position: absolute;
  border: 2px solid #034575;
  background-color: #eee;
}
#menubar-editor .menubar-editor [role=menubar] [role=group] {
  margin: 0;
  padding: 0;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem][aria-disabled=true] {
  color: #666;
  text-decoration: line-through;
}
#menubar-editor .menubar-editor [role=menubar] [role=separator] {
  padding-top: 3px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: repeat-x;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem],
#menubar-editor .menubar-editor [role=menubar] [role=menuitemcheckbox],
#menubar-editor .menubar-editor [role=menubar] [role=menuitemradio],
#menubar-editor .menubar-editor [role=menubar] [role=separator] {
  padding: 6px;
  background-color: #eee;
  border: 0 solid #eee;
  color: black;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem][aria-expanded=true] {
  padding: 4px;
  border: 2px solid #034575;
  background-color: #034575;
  color: #fff;
  outline: none;
}
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitem],
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitemcheckbox],
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitemradio],
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=separator] {
  padding-left: 27px;
  width: 8em;
}
#menubar-editor .menubar-editor [role=menubar] [role=menu] [aria-checked=true] {
  padding: 6px;
  padding-left: 8px;
  padding-right: 18px;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitemradio][aria-checked=true] > [aria-hidden]::before {
  content: "●";
  display: inline-block;
  width: 18px;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitemcheckbox][aria-checked=true] > [aria-hidden]::before {
  content: "✓";
  display: inline-block;
  width: 18px;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem]:focus,
#menubar-editor .menubar-editor [role=menubar] [role=menuitemcheckbox]:focus,
#menubar-editor .menubar-editor [role=menubar] [role=menuitemradio]:focus {
  padding: 4px;
  border: 2px solid #034575;
  background-color: #034575;
  color: #fff;
  outline: none;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitemradio][aria-checked=true]:focus > [aria-hidden]::before,
#menubar-editor .menubar-editor [role=menubar] [role=menuitemcheckbox][aria-checked=true]:focus > [aria-hidden]::before {
  margin-left: -2px;
}
#menubar-editor .menubar-editor [role=menubar] [role=menuitem]:hover {
  padding: 4px;
  border: 2px solid #034575;
}
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitem]:focus,
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitemcheckbox]:focus,
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitemradio]:focus {
  padding-left: 25px;
}
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitem][aria-checked=true]:focus,
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitemcheckbox][aria-checked=true]:focus,
#menubar-editor .menubar-editor [role=menubar] [role=menu] [role=menuitemradio][aria-checked=true]:focus {
  padding-left: 8px;
  padding-right: 21px;
}
#menubar-editor .menubar-editor .italic {
  font-style: italic;
}
#menubar-editor .menubar-editor .bold {
  font-weight: bold;
}
#menubar-editor .menubar-editor .underline {
  text-decoration: underline;
}

.social {
  display: inline-block;
  width: 2rem;
  min-height: 2rem;
  margin-inline-end: 1rem;
}
.social::before {
  content: "";
}
.social-github {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'/%3E%3C/svg%3E");
}
.social-linkedin {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z'/%3E%3C/svg%3E");
}
.social-gfu {
  width: 12rem;
  min-height: 2.3rem;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1015.476 220'%3E%3Cg id='Components'%3E%3Cg id='f1868a8d-2dd7-4543-a595-a5def6208ce7_4'%3E%3Cpath d='M82,161.4573v8.5427c0,15.8388-12.3381,28.8502-27.9078,29.9278-1.3296.092-2.5292.8291-3.1956,1.9833l-8.7115,15.0888c-.7698,1.3333.1925,3,1.7321,3h8.0829c27.6142,0,50-22.3858,50-50v-80h23v78c0,1.1046.8954,2,2,2h16c1.1046,0,2-.8954,2-2v-78h23v30.1441c0,27.9259,22.0924,51.3162,50.0132,51.8465,28.5707.5427,51.9868-22.5413,51.9868-50.9906v-49c0-1.1046-.8954-2-2-2h-16c-1.1046,0-2,.8954-2,2v48.3405c0,16.8686-13.2011,31.1452-30.0622,31.6455-17.52.5198-31.9378-13.5807-31.9378-30.986v-49c0-1.1046-.8954-2-2-2h-41v-19c0-16.3911,12.7864-29.8513,28.9089-30.9301,1.3298-.089,2.5293-.8289,3.1957-1.9831l8.7104-15.0868c.7698-1.3333-.1924-3-1.732-3h-8.0829c-28.1665,0-51,22.8335-51,51v19H51.8558c-27.9258,0-51.3161,22.0924-51.8465,50.0132-.5428,28.5707,22.5408,51.9868,50.9906,51.9868,11.6547,0,22.4017-3.9386,31-10.5427M82,121c0,17.0938-13.9062,31-31,31s-31-13.9062-31-31,13.9067-31,31-31h31v31' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M310,120.0018c0-29.4277,21.7139-51.8564,52.2842-51.8564,24.674,0,42.2446,14.6008,48.1689,34.7136.3777,1.2824-.588,2.5715-1.9249,2.5715h-16.5402c-.817,0-1.5683-.4907-1.8555-1.2555-4.0773-10.8604-14.6369-17.887-27.8483-17.887-18.8564,0-32.5703,14.4287-32.5703,33.7139,0,19.5703,13.7139,33.7129,32.5703,33.7129,13.0866,0,23.7814-6.9076,28.1152-17.6475.299-.7409,1.0386-1.2089,1.8376-1.2089h16.8944c1.3291,0,2.2933,1.2753,1.9307,2.554-5.7356,20.2239-24.2342,34.445-48.9204,34.445-30.5703,0-52.1416-22.1426-52.1416-51.8555Z' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M449,131.4295l-33.5641-58.4306c-.7659-1.3333.1966-2.9962,1.7342-2.9962h16.0821c.7261,0,1.3952.3936,1.748,1.0282l22.8561,41.1134h1l22.5729-41.1043c.3513-.6397,1.0232-1.0373,1.7531-1.0373h16.5128c1.5354,0,2.4982,1.6585,1.7367,2.9918l-33.2904,58.2923v36.7129c0,1.1046-.8954,2-2,2h-15.1416c-1.1046,0-2-.8954-2-2v-36.5703Z' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M516.5723,72.0027c0-1.1046.8954-2,2-2h35.4277c20.4277,0,34.4277,13,34.4277,31.8564,0,13.8564-8.1426,24.4277-18.7139,29.1416l20.3165,36.0164c.7521,1.3332-.2112,2.9826-1.742,2.9826h-16.6508c-.7439,0-1.4263-.4128-1.7715-1.0717l-18.1523-34.6412h-16.1416v33.7129c0,1.1046-.8954,2-2,2h-15c-1.1046,0-2-.8954-2-2v-95.9971ZM552.5713,118.0018c9.4287,0,16.4277-5.5713,16.4277-16.1426,0-9-6.1426-15.5713-16.7129-15.5713h-16.7139v31.7139h16.999Z' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M607.001,132.7156v-60.7129c0-1.1046.8954-2,2-2h14.999c1.1046,0,2,.8954,2,2v60.5693c0,13.2852,7.1426,21.4287,20.5713,21.4287,13.5713,0,20.7139-8.1436,20.7139-21.5713v-60.4268c0-1.1046.8954-2,2-2h14.8564c1.1046,0,2,.8954,2,2v60.5693c0,23.4277-15.2852,39.2852-39.5703,39.2852-24.4277,0-39.5703-15.7139-39.5703-39.1416Z' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M703.0643,138.4295h14.5076c1.0241,0,1.8563.7772,1.9865,1.7929,1.0407,8.1197,8.2908,14.2061,20.0139,14.2061,10.7139,0,17.5713-4.5713,17.5713-12.1426,0-22.8564-53.1416-4.4277-53.1416-45.2842,0-15.8564,12.5713-28.8564,34.5703-28.8564,18.3268,0,33.9942,9.3039,35.595,28.6804.0965,1.1681-.8275,2.1761-1.9995,2.1761h-15.0228c-1.0218,0-1.8569-.7749-1.9833-1.7888-.909-7.2883-6.6661-12.0677-16.5893-12.0677-10.5713,0-15.7139,5.2852-15.7139,11.5713,0,20.8564,53.8555,3.7139,53.8555,44.1416,0,17.7129-13.7139,30.999-37.7129,30.999-22.0287,0-36.8921-12.6061-37.9398-31.2955-.0647-1.1535.8478-2.1322,2.0031-2.1322Z' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M849.1491,70.0027h21.0357c.8452,0,1.5992.5313,1.8835,1.3273l34.2853,95.9971c.4652,1.3025-.5004,2.6727-1.8835,2.6727h-15.8924c-.8466,0-1.6014-.533-1.8847-1.3308l-6.5275-18.3831h-41.5703l-6.3894,18.3709c-.2797.8041-1.0377,1.343-1.889,1.343h-15.3152c-1.382,0-2.3475-1.3682-1.8843-2.6703l34.1475-95.9971c.2836-.7972,1.0382-1.3297,1.8843-1.3297ZM874.7368,133.2869l-14.7139-42.1416h-1.1426l-14.7139,42.1416h30.5703Z' style='fill:%23000; stroke-width:0px;'/%3E%3Cpath d='M912.0259,120.0018c0-29.4277,21.7139-51.8564,52.2842-51.8564,24.1736,0,41.6876,13.8405,47.9245,32.6585.4282,1.2921-.5461,2.6266-1.9073,2.6266h-16.8439c-.7991,0-1.5029-.484-1.8367-1.2101-4.3032-9.3612-14.0459-15.9325-27.3367-15.9325-19.735,0-32.7874,14.6711-32.5676,34.1989.2178,19.3562,16.0083,34.8195,35.3256,33.5729,14.957-.9652,25.8899-10.1781,27.241-22.2015h-29.7129c-1.1046,0-2-.8954-2-2v-11.7139c0-1.1046.8954-2,2-2h48.8773c1.096,0,2.0022.8838,2.0025,1.9798.0084,34.2026-21.5877,53.7331-51.0233,53.7331-30.7129,0-52.4268-22.1426-52.4268-51.8555Z' style='fill:%23000; stroke-width:0px;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.svg svg text {
  font-family: Barlow;
  font-size: 10px;
  white-space: pre;
  text-anchor: middle;
}
.svg svg text:nth-of-type(2) {
  fill: rgb(255, 255, 255);
}
.svg svg * {
  fill: rgb(0, 0, 0);
}
.svg svg g {
  stroke: rgb(255, 0, 0);
  stroke-width: 1;
}

html {
  background-color: var(--bright);
  color: var(--dark);
}
html a:link {
  color: var(--link-color);
}
html a:visited {
  color: var(--link-visited);
}
html a:hover {
  color: var(--link-hover);
}
html a:active {
  color: var(--link-active);
}
html.dark {
  background-color: var(--dark);
  color: var(--on-dark);
}
html.dark samp {
  filter: invert(1);
}
html.dark samp > * {
  filter: invert(1);
}
html.dark pre {
  filter: invert(1);
}
html.dark pre > * {
  filter: invert(1);
}
html.dark a:link {
  color: var(--link-color);
  filter: invert(1);
}
html.dark a:visited {
  color: var(--link-visited);
}
html.dark a:hover {
  color: var(--link-hover);
  filter: invert(1);
}
html.dark a:active {
  color: var(--link-active);
  filter: invert(1);
}
html.dark body > nav:nth-child(2) {
  background: hsla(0, 0%, 15%, 0.85);
  color: var(--on-dark);
}
html.bright {
  background-color: var(--bright);
  color: var(--on-bright);
  filter: invert(1);
}
html.neutral {
  background-color: var(--neutral);
  color: var(--on-neutral);
}
html.high-contrast {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast samp {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast pre {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast a:link {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast a:visited {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast a:hover {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast a:active {
  background-color: var(--dark-high-contrast);
  color: var(--on-dark-high-contrast);
}
html.high-contrast body > nav:nth-child(2) {
  background: hsla(0, 0%, 15%, 0.85);
  color: var(--on-dark);
}
html.bright {
  background-color: var(--bright);
  color: var(--on-bright);
  filter: invert(1);
}
html.neutral {
  background-color: var(--neutral);
  color: var(--on-neutral);
}

.color {
  display: inline-block;
  width: 12rem;
  height: 12rem;
  margin: 25rem;
  padding: 0.25rem;
}
.color.error {
  background-color: var(--error);
  color: var(--on-error);
}
.color.warning {
  background-color: var(--warning);
  color: var(--on-warning);
}
.color.success {
  background-color: var(--success);
  color: var(--on-success);
}
.color.info {
  background-color: var(--info);
  color: var(--on-info);
}
.color.primary {
  background-color: var(--primary);
  color: var(--on-primary);
}
.color.secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}
.color.tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}
.color.neutral {
  background-color: var(--neutral);
  color: var(--on-neutral);
}
.color.dark {
  background-color: var(--dark);
  color: var(--on-dark);
}
.color.bright {
  background-color: var(--bright);
  color: var(--on-bright);
}

body {
  margin: 0 auto;
  max-width: 40rem;
}
body > header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
body > footer {
  transition: opacity 0.5s;
  position: fixed;
  bottom: 0;
  opacity: 0;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0.5rem;
  background-color: var(--accred);
  color: var(--on-accred);
  font-size: 0.8em;
}
body > footer:active, body > footer:hover {
  opacity: 1;
}
body > footer a:link,
body > footer a:visited,
body > footer a:hover,
body > footer a:active {
  color: var(--on-accred);
}
body > footer > address {
  white-space: nowrap;
}
body > footer > nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

main {
  width: 100%;
}

samp:has(pre) {
  display: block;
  padding: var(--default);
  background-color: var(--sample);
  color: var(--on-sample);
}

samp:not(:has(pre)) {
  display: block;
  padding: var(--default);
  font-family: "Atkinson Hyperlegible", sans-serif;
  background-color: var(--sample);
}

article {
  margin-block-start: 4rem;
}
article h3 {
  margin-block-start: 4rem;
}

a::before {
  content: ">>";
  margin-right: 0.25rem;
  text-decoration: none;
}

.figcaption {
  color: black;
  background: none;
  font-size: 0.8em !important;
  text-align: left;
  transform: translateX(-1em) translateY(1em);
  text-shadow: none;
  -webkit-text-stroke: 0;
  font-weight: 400;
}

h1 {
  font-weight: 300;
}

h2 {
  font-weight: 400;
}

.btn-developer.on {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z'/%3E%3C/svg%3E");
}

.btn-developer.off {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M791-55 280-566l-87 87 183 183-56 56L80-480l143-143L55-791l57-57 736 736-57 57Zm-54-282-57-57 87-87-183-183 56-56 240 240-143 143Z'/%3E%3C/svg%3E");
}

.btn-theme-mode.dark,
.btn-dark-mode.on {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z'/%3E%3C/svg%3E");
}

.btn-theme-mode.light,
.btn-dark-mode.off {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z'/%3E%3C/svg%3E");
}

.btn-theme-mode.high-contrast {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm40-83q119-15 199.5-104.5T800-480q0-123-80.5-212.5T520-797v634Z'/%3E%3C/svg%3E");
}

.developer [tabindex] {
  outline: 2px dotted hsla(0, 0%, 0%, 0.85);
  outline-offset: 4px;
}
.developer section {
  border: 1px dotted tomato;
}

.btn-accessibility-settings {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%235f6368"><path d="M480-720q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720ZM360-80v-520q-60-5-122-15t-118-25l20-80q78 21 166 30.5t174 9.5q86 0 174-9.5T820-720l20 80q-56 15-118 25t-122 15v520h-80v-240h-80v240h-80Z"/><!-- Code injected by live-server --><script>// <![CDATA[ <-- For SVG supportif ("WebSocket" in window) {(function () {function refreshCSS() {var sheets = [].slice.call(document.getElementsByTagName("link"));var head = document.getElementsByTagName("head")[0];for (var i = 0; i < sheets.length; ++i) {var elem = sheets[i];var parent = elem.parentElement || head;parent.removeChild(elem);var rel = elem.rel;if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {var url = elem.href.replace(/(&|%3F)_cacheOverride=\d+/, "");elem.href = url + (url.indexOf("%3F") >= 0 %3F "&" : "%3F") + "_cacheOverride=" + (new Date().valueOf());}parent.appendChild(elem);}}var protocol = window.location.protocol === "http:" %3F "ws://" : "wss://";var address = protocol + window.location.host + window.location.pathname + "/ws";var socket = new WebSocket(address);socket.onmessage = function (msg) {if (msg.data == "reload") window.location.reload();else if (msg.data == "refreshcss") refreshCSS();};if (sessionStorage && !sessionStorage.getItem("IsThisFirstTime_Log_From_LiveServer")) {console.log("Live reload enabled.");sessionStorage.setItem("IsThisFirstTime_Log_From_LiveServer", true);}})();}else {console.error("Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.");}// ]]></script></svg>');
}

.developer h1,
.developer h2,
.developer h3,
.developer h4,
.developer h5,
.developer h6,
.developer article,
.developer figure,
.developer samp {
  outline: 3px dotted hsla(39, 100%, 35%, 0.85);
  outline-offset: 1px;
}
.developer h1::before,
.developer h2::before,
.developer h3::before,
.developer h4::before,
.developer h5::before,
.developer h6::before,
.developer article::before,
.developer figure::before,
.developer samp::before {
  z-index: 10;
  margin-top: -0.2rem;
  margin-right: -0.5rem;
  display: block;
  position: absolute;
  right: 1rem;
  padding: 0.2rem;
  font-size: 0.8rem;
  color: hsla(39, 93%, 88%, 0.85);
  background: hsla(39, 100%, 35%, 0.85);
}
.developer h1::before {
  content: "H1";
}
.developer h2::before {
  content: "H2";
}
.developer h3::before {
  content: "H3";
}
.developer h4::before {
  content: "H4";
}
.developer h5::before {
  content: "H5";
}
.developer h6::before {
  content: "H6";
}
.developer article::before {
  content: "ARTICLE";
}
.developer figure::before {
  content: "FIGURE";
}
.developer samp::before {
  content: "SAMPLE";
}
.developer [aria-activedescendant],
.developer [aria-atomic],
.developer [aria-autocomplete],
.developer [aria-busy],
.developer [aria-checked],
.developer [aria-controls],
.developer [aria-current],
.developer [aria-describedby],
.developer [aria-disabled],
.developer [aria-dropeffect],
.developer [aria-expanded],
.developer [aria-flowto],
.developer [aria-grabbed],
.developer [aria-haspopup],
.developer [aria-hidden],
.developer [aria-invalid],
.developer [aria-label],
.developer [aria-labelledby],
.developer [aria-level],
.developer [aria-live],
.developer [aria-multiline],
.developer [aria-multiselectable],
.developer [aria-orientation],
.developer [aria-owns],
.developer [aria-posinset],
.developer [aria-pressed],
.developer [aria-selected],
.developer [aria-readonly],
.developer [aria-relevant],
.developer [aria-atomic],
.developer [aria-required],
.developer [aria-selected],
.developer [aria-checked],
.developer [aria-pressed],
.developer [aria-setsize],
.developer [aria-posinset],
.developer [aria-sort],
.developer [aria-valuemax],
.developer [aria-valuemin],
.developer [aria-valuenow],
.developer [aria-valuetext] {
  outline: 3px dotted hsla(200, 100%, 25%, 0.85);
  outline-offset: 1px;
}
.developer [aria-activedescendant]::before,
.developer [aria-atomic]::before,
.developer [aria-autocomplete]::before,
.developer [aria-busy]::before,
.developer [aria-checked]::before,
.developer [aria-controls]::before,
.developer [aria-current]::before,
.developer [aria-describedby]::before,
.developer [aria-disabled]::before,
.developer [aria-dropeffect]::before,
.developer [aria-expanded]::before,
.developer [aria-flowto]::before,
.developer [aria-grabbed]::before,
.developer [aria-haspopup]::before,
.developer [aria-hidden]::before,
.developer [aria-invalid]::before,
.developer [aria-label]::before,
.developer [aria-labelledby]::before,
.developer [aria-level]::before,
.developer [aria-live]::before,
.developer [aria-multiline]::before,
.developer [aria-multiselectable]::before,
.developer [aria-orientation]::before,
.developer [aria-owns]::before,
.developer [aria-posinset]::before,
.developer [aria-pressed]::before,
.developer [aria-selected]::before,
.developer [aria-readonly]::before,
.developer [aria-relevant]::before,
.developer [aria-atomic]::before,
.developer [aria-required]::before,
.developer [aria-selected]::before,
.developer [aria-checked]::before,
.developer [aria-pressed]::before,
.developer [aria-setsize]::before,
.developer [aria-posinset]::before,
.developer [aria-sort]::before,
.developer [aria-valuemax]::before,
.developer [aria-valuemin]::before,
.developer [aria-valuenow]::before,
.developer [aria-valuetext]::before {
  z-index: 10;
  margin-top: -0.2rem;
  margin-right: -0.5rem;
  display: block;
  position: absolute;
  right: 1rem;
  padding: 0.2rem;
  font-size: 0.8rem;
  color: hsla(200, 100%, 100%, 0.85);
  background: hsla(200, 100%, 25%, 0.85);
}
.developer [aria-activedescendant]::before {
  content: "activedescendent = " attr(aria-activedescendant);
}
.developer [aria-atomic]::before {
  content: "atomic = " attr(aria-atomic);
}
.developer [aria-autocomplete]::before {
  content: "autocomplete = " attr(aria-autocomplete);
}
.developer [aria-busy]::before {
  content: "busy = " attr(aria-busy);
}
.developer [aria-checked]::before {
  content: "checked = " attr(aria-checked);
}
.developer [aria-controls]::before {
  content: "controls = " attr(aria-controls);
}
.developer [aria-current]::before {
  content: "current = " attr(aria-current);
}
.developer [aria-describedby]::before {
  content: "describedby = " attr(aria-describedby);
}
.developer [aria-disabled]::before {
  content: "disabled = " attr(aria-disabled);
}
.developer [aria-dropeffect]::before {
  content: "dropeffect = " attr(aria-dropeffect);
}
.developer [aria-expanded]::before {
  content: "expanded = " attr(aria-expanded);
}
.developer [aria-flowto]::before {
  content: "flowto = " attr(aria-flowto);
}
.developer [aria-grabbed]::before {
  content: "grabbed = " attr(aria-grabbed);
}
.developer [aria-haspopup]::before {
  content: "haspopup = " attr(aria-haspopup);
}
.developer [aria-hidden]::before {
  content: "hidden = " attr(aria-hidden);
}
.developer [aria-invalid]::before {
  content: "invalid = " attr(aria-invalid);
}
.developer [aria-label]::before {
  content: "label = " attr(aria-label);
}
.developer [aria-labelledby]::before {
  content: "labelledby = " attr(aria-labelledby);
}
.developer [aria-level]::before {
  content: "level = " attr(aria-level);
}
.developer [aria-live]::before {
  content: "live = " attr(aria-live);
}
.developer [aria-multiline]::before {
  content: "multiline = " attr(aria-multiline);
}
.developer [aria-multiselectable]::before {
  content: "multiselectable = " attr(aria-multiselectable);
}
.developer [aria-orientation]::before {
  content: "orientation = " attr(aria-orientation);
}
.developer [aria-owns]::before {
  content: "owns = " attr(aria-owns);
}
.developer [aria-posinset]::before {
  content: "posinset = " attr(aria-posinset);
}
.developer [aria-pressed]::before {
  content: "pressed = " attr(aria-pressed);
}
.developer [aria-selected]::before {
  content: "selected = " attr(aria-selected);
}
.developer [aria-readonly]::before {
  content: "readonly = " attr(aria-readonly);
}
.developer [aria-relevant]::before {
  content: "relevant = " attr(aria-relevant);
}
.developer [aria-atomic]::before {
  content: "atomic = " attr(aria-atomic);
}
.developer [aria-required]::before {
  content: "required = " attr(aria-required);
}
.developer [aria-selected]::before {
  content: "selected = " attr(aria-selected);
}
.developer [aria-checked]::before {
  content: "checked = " attr(aria-checked);
}
.developer [aria-pressed]::before {
  content: "pressed = " attr(aria-pressed);
}
.developer [aria-setsize]::before {
  content: "setsize = " attr(aria-setsize);
}
.developer [aria-posinset]::before {
  content: "posinset = " attr(aria-posinset);
}
.developer [aria-sort]::before {
  content: "sort = " attr(aria-sort);
}
.developer [aria-valuemax]::before {
  content: "valuemax = " attr(aria-valuemax);
}
.developer [aria-valuemin]::before {
  content: "valuemin = " attr(aria-valuemin);
}
.developer [aria-valuenow]::before {
  content: "valuenow = " attr(aria-valuenow);
}
.developer [aria-valuetext]:before {
  content: "valuetext = " attr(aria-valuetext);
}