/* import webfonts */
@font-face {
  font-family: "PTSans";
  src: url("../assets/fonts/PTSans-Regular.woff2") format("woff2"), url("../assets/fonts/PTSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "PTSans";
  src: url("../assets/fonts/PTSans-Italic.woff2") format("woff2"), url("../assets/fonts/PTSans-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "PTSans";
  src: url("../assets/fonts/PTSans-Bold.woff2") format("woff2"), url("../assets/fonts/PTSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "PTSans";
  src: url("../assets/fonts/PTSans-BoldItalic.woff2") format("woff2"), url("../assets/fonts/PTSans-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "PTMono";
  src: url("../assets/fonts/PTMono-Regular.woff2") format("woff2"), url("../assets/fonts/PTMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Exo2";
  src: url("../assets/fonts/Exo2-Black.woff2") format("woff2"), url("../assets/fonts/Exo2-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: fallback;
}
/* mixins */
/* vars */
:root {
  color-scheme: light dark;
  --color--black: #191919;
  --color--grey-90: #1C1D1F;
  --color--grey-85: #252627;
  --color--grey-80: #2D2E2F;
  --color--grey-75: #383B40;
  --color--grey-70: #43474D;
  --color--grey-60: #5A5E65;
  --color--grey-50: #6C7174;
  --color--grey-40: #8D9297;
  --color--grey-30: #A9AEB1;
  --color--grey-20: #C6CACE;
  --color--grey-15: #D2D6D8;
  --color--grey-10: #DFE1E2;
  --color--grey-5: #EDEFF0;
  --color--grey-4: #F1F3F6;
  --color--grey-3: #F5F6F7;
  --color--grey-2: #F7F9FA;
  --color--grey-1: #FBFCFD;
  --color--green-1: #EDF7F4;
  --color--green-2: #E4F7F0;
  --color--green-3: #DAF5EC;
  --color--green-4: #CFF3E7;
  --color--green-5: #C1F0E1;
  --color--green-10: #99E4CB;
  --color--green-20: #60D1AE;
  --color--green-30: #04C585;
  --color--green-40: #00A36D;
  --color--green-50: #008055;
  --color--green-60: #146947;
  --color--green-70: #0C4E29;
  --color--green-80: #0D351E;
  --color--plum-1: #F7F3FF;
  --color--plum-2: #F3EFFD;
  --color--plum-3: #F1EEFD;
  --color--plum-4: #EDEAFA;
  --color--plum-5: #E7E4F3;
  --color--plum-10: #CEC8EB;
  --color--plum-20: #B4ACDF;
  --color--plum-30: #978FC3;
  --color--plum-40: #7A71A6;
  --color--plum-50: #5B5385;
  --color--plum-60: #413A62;
  --color--plum-70: #342E53;
  --color--plum-80: #231F35;
  --color--violet-40: #944EB2;
  --color--red-5: #fff2f5;
  --color--red-10: #f8dfe2;
  --color--red-20: #f8b9c5;
  --color--red-30: #fd8ba0;
  --color--red-40: #f45d79;
  --color--red-50: #e41d3d;
  --color--red-60: #b21d38;
  --color--red-70: #822133;
  --color--red-80: #4f1c24;
  --font--ptsans: "PTSans", "Helvetica Neue", "Helvetica", sans-serif;
  --font--exo: "Exo2", "Helvetica Neue", "Helvetica", sans-serif;
  --font--mono: "PTMono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --shadow: 0 4px 0 rgb(0 0 0 / 8%);
  --shadowDark: 0 4px 0 #000;
  --outlineStyle: dashed;
  --outlineSize: .25rem;
  --outlineColor: var(--color--green-50);
  --outlineOffset: .25rem;
  --outline: var(--outlineStyle) var(--outlineSize) var(--outlineColor);
}

/* utilities */
.svgHolder {
  display: block;
}
.svgHolder div, .svgHolder span {
  display: block;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.svgHolder div svg, .svgHolder span svg {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

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

.hidden {
  display: none !important;
}

.offscreen {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* default element styles */
body {
  --bodyHPadding: 1.5rem;
  --contentW: 75rem;
  background: var(--color--grey-2);
  color: var(--color--grey-80);
  font-family: var(--font--ptsans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
}

h1 {
  color: var(--color--green-40);
  font-family: var(--font--exo);
  font-size: 4em;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 0.75em;
}
h1:focus {
  outline: 0;
}

h2 {
  font-family: var(--font--exo);
  font-size: 3em;
  font-weight: 900;
  line-height: 1.25;
  margin: 2em 0 1em;
}

h3 {
  font-family: var(--font--exo);
  font-size: 2em;
  font-weight: 900;
  line-height: 1.25;
  margin: 2em 0 1em;
}

h4 {
  font-family: var(--font--exo);
  font-size: 1.5em;
  font-weight: 900;
  line-height: 1.25;
  margin: 2em 0 1em;
}

h5 {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25;
  margin: 2em 0 1.6em;
}

h6 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.25;
  margin: 2em 0 2em;
}

p, blockquote {
  font-size: 1.25em;
  line-height: 1.5;
  margin: 1em 0 1.6em;
  max-width: 70ch;
}

blockquote {
  border-left: solid 0.5em var(--color--green-50);
  box-sizing: border-box;
  font-style: italic;
  padding: 0.1em 0 0.1em 2em;
}

ul, ol, dl {
  font-size: 1.25em;
  margin: 1em 0 1.5em;
  padding: 0 0 0 1.5em;
}

li {
  line-height: 1.5;
  margin: 1em 0 1em;
  max-width: 70ch;
  padding: 0 0 0 0.5em;
}
li::marker {
  color: var(--color--green-50);
}

li li {
  font-size: inherit;
}

li ul, li ol {
  font-size: inherit;
  margin: 1em 0;
}

h1, h2, h3, h4, h5, h6 {
  position: relative;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration-thickness: 6px;
}
h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus, h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus {
  text-decoration-thickness: 9px;
}
h1 a.anchor, h2 a.anchor, h3 a.anchor, h4 a.anchor, h5 a.anchor, h6 a.anchor {
  position: absolute;
  left: -1em;
  top: 0;
}

a {
  color: var(--color--green-50);
  text-decoration: underline;
  text-decoration-color: var(--color--green-40);
  text-decoration-thickness: 2px;
}
a:hover, a:focus {
  color: var(--color--green-70);
  text-decoration-color: var(--color--green-50);
  text-decoration-thickness: 4px;
}
a:focus {
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}

hr {
  background: var(--color--grey-20);
  border: 0;
  height: 1px;
  margin: 2em 0;
}

h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code, p > code, blockquote > code, li > code, a > code, table code, li code {
  background: var(--color--green-1);
  border: solid 1px var(--color--green-20);
  color: #186CA4;
  font-family: var(--font--mono);
  font-size: 0.8em;
  padding: 0.15em 0.35em;
  word-spacing: normal;
  word-break: normal;
  word-break: break-word;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

img.multiply {
  mix-blend-mode: multiply;
}
img.screen {
  mix-blend-mode: screen;
}
img.overlay {
  mix-blend-mode: overlay;
}
img.saturation {
  mix-blend-mode: saturation;
}
img.darken {
  mix-blend-mode: darken;
}
img.lighten {
  mix-blend-mode: lighten;
}
img.softLight {
  mix-blend-mode: soft-light;
}
img.hardLight {
  mix-blend-mode: hard-light;
}
img.border {
  border: solid 1px var(--color--grey-30);
}
img.shadow {
  box-shadow: var(--shadow);
}

figure {
  margin: 0 0 3em;
}

iframe:focus, #result-box iframe:focus {
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}

pre:focus {
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}

table {
  --headBackgroundColor: var(--color--green-40);
  --headBorderColor: var(--color--grey-80);
  --cellBorderColor: var(--color--grey-40);
  --cellBackgroundColor: var(--color--grey-2);
  --alternateCellBackgroundColor: var(--color--grey-5);
  --rowHeadingBackgroundColor: var(--color--grey-10);
  --rowHeadingBorderColor: var(--color--grey-60);
  --alternateRowHeadingBackgroundColor: var(--color--grey-15);
  background: var(--cellBackgroundColor);
  border: solid 1px var(--headBorderColor);
  border: 0;
  border-collapse: collapse;
  box-sizing: border-box;
  font-size: 1rem;
  width: 100%;
}
table caption {
  background: var(--headBackgroundColor);
  border-bottom: solid 2px var(--headBorderColor);
  color: #FFF;
  font-family: var(--font--exo);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem;
  text-align: left;
}
table thead {
  border-bottom: solid 2px var(--color--grey-80);
  vertical-align: baseline;
}
table thead th {
  color: #FFF;
}
table thead tr > *:not(:last-child) {
  border-right: solid 1px var(--color--green-70);
}
table thead tr > * {
  background: var(--color--green-50);
  box-shadow: var(--shadow) inset;
  padding: 0.25rem 1rem;
}
table tbody {
  vertical-align: baseline;
}
table tbody tr:first-of-type > * {
  box-shadow: var(--shadow) inset;
}
table tbody tr > td:not(:last-child) {
  border-right: solid 1px var(--cellBorderColor);
}
table tbody tr:last-child > * {
  border-bottom: 0;
}
table tbody tr > * {
  border-bottom: solid 1px var(--cellBorderColor);
  padding: 1rem 1rem;
}
table tbody tr > th {
  background: var(--rowHeadingBackgroundColor);
  border-right: solid 2px var(--rowHeadingBorderColor);
  border-bottom-color: var(--rowHeadingBorderColor);
  color: var(--color--black);
  text-align: left;
}
table tbody tr:nth-of-type(even) td {
  background: var(--alternateCellBackgroundColor);
}
table tbody tr:nth-of-type(even) th {
  background: var(--alternateRowHeadingBackgroundColor);
}
table th {
  color: var(--color--green-80);
  font-weight: 700;
  text-align: left;
}
table tbody tr:nth-of-type(even) th:hover, table tbody tr:nth-of-type(even) td:hover, table tbody tr th:hover, table tbody tr td:hover {
  background: var(--color--green-10);
}

table thead th code, table caption code {
  background: var(--color--green-3);
  border-color: var(--color--green-60);
}

table thead th .key {
  border-color: var(--color--grey-70);
}

.articleEmbed [role=region] {
  border: solid 1px var(--color--grey-80);
  box-shadow: var(--shadow);
  overflow: auto;
}
.articleEmbed [role=region]:focus {
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}

::selection {
  background: var(--color--green-10);
  color: var(--color--grey-80);
}

@media (max-width: 52em) {
  h1 a.anchor, h2 a.anchor, h3 a.anchor, h4 a.anchor, h5 a.anchor, h6 a.anchor {
    position: static;
    left: auto;
    top: auto;
  }
}
@media (max-width: 48em) {
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 2.25em;
  }

  h3 {
    font-size: 1.75em;
  }

  h4 {
    font-size: 1.4em;
  }

  h5 {
    font-size: 1.15em;
  }
}
/* aesthetic styling */
.pixelBox {
  --bg: #FFF;
  --border: var(--color--black);
  --edgeSize: 4px;
  --sh: var(--shadow);
  background: var(--bg);
  box-sizing: border-box;
  position: relative;
}
.pixelBox::before, .pixelBox::after {
  border: solid var(--edgeSize) var(--border);
  box-sizing: content-box;
  box-shadow: var(--sh);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}
.pixelBox::before {
  border-top: 0;
  border-bottom: 0;
  left: calc(-1 * var(--edgeSize));
}
.pixelBox::after {
  border-left: 0;
  border-right: 0;
  top: calc(-1 * var(--edgeSize));
}

/* end aesthetic styling */
/* header */
.siteHeader {
  --headerVPadding: 1em;
  color: var(--color--green-40);
  margin: 0 auto;
  max-width: var(--contentW);
}

.siteHeader a {
  color: inherit;
  text-decoration: none;
}

.siteHeader nav {
  border-bottom: solid 1px var(--color--grey-20);
  padding: var(--headerVPadding) 0;
}

.siteHeader ul {
  font-size: 1.5em;
  font-weight: 700;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.siteHeader ul a {
  display: block;
}
.siteHeader ul li {
  font-size: inherit;
  margin: 0;
  padding: 0;
}
.siteHeader ul .siteHeader--logo {
  margin-right: auto;
}
.siteHeader ul .siteHeader--logo a:hover, .siteHeader ul .siteHeader--logo a:focus {
  color: var(--color--green-60);
}
.siteHeader ul .siteHeader--primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.siteHeader ul .siteHeader--primary a {
  --o: 0;
  padding: 0em 1em;
}
.siteHeader ul .siteHeader--primary a::before {
  --h: calc(var(--headerVPadding)*.33);
  border-bottom: solid var(--h) currentColor;
  content: "";
  height: calc(100% + var(--h));
  opacity: var(--o);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.siteHeader ul .siteHeader--primary a:hover, .siteHeader ul .siteHeader--primary a:focus {
  --o: 1;
  color: var(--color--green-60);
}
.siteHeader ul .siteHeader--primary a:focus {
  --o: 1;
}
.siteHeader ul .siteHeader--primary a[aria-current=page] {
  --o: 1;
}
.siteHeader ul .siteHeader--primary__last {
  margin-right: 2em;
  position: relative;
}
.siteHeader ul .siteHeader--primary__last::before {
  background: var(--color--grey-20);
  content: "";
  height: 100%;
  position: absolute;
  right: -1em;
  top: 0;
  width: 1px;
}
.siteHeader ul .siteHeader--secondary, .siteHeader ul .siteHeader--preference {
  margin-right: 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.siteHeader ul .siteHeader--secondary a, .siteHeader ul .siteHeader--secondary button, .siteHeader ul .siteHeader--preference a, .siteHeader ul .siteHeader--preference button {
  position: relative;
}
.siteHeader ul .siteHeader--secondary a::before, .siteHeader ul .siteHeader--secondary button::before, .siteHeader ul .siteHeader--preference a::before, .siteHeader ul .siteHeader--preference button::before {
  border-radius: 50%;
  content: "";
  height: 1.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5em;
}
.siteHeader ul .siteHeader--secondary a:hover, .siteHeader ul .siteHeader--secondary a:focus, .siteHeader ul .siteHeader--secondary button:hover, .siteHeader ul .siteHeader--secondary button:focus, .siteHeader ul .siteHeader--preference a:hover, .siteHeader ul .siteHeader--preference a:focus, .siteHeader ul .siteHeader--preference button:hover, .siteHeader ul .siteHeader--preference button:focus {
  color: var(--color--green-60);
}
.siteHeader ul .siteHeader--secondary__last {
  margin-right: 0;
}
.siteHeader ul .siteHeader--preference {
  align-self: stretch;
  margin-left: 1em;
  margin-right: 0;
  padding-left: 0.8em;
  position: relative;
}
.siteHeader ul .siteHeader--preference::before {
  background: var(--color--grey-20);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
}

.siteHeader--themeButtonContainer {
  font-size: 0.75em;
  margin-top: 1rem;
}
.siteHeader--themeButtonContainer > div {
  display: flex;
  justify-content: flex-end;
}
.siteHeader--themeButtonContainer .themeButton {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5em;
}
.siteHeader--themeButtonContainer .themeButton .icon {
  width: 1.5rem;
}

@media (max-width: 78em) {
  .siteHeader {
    margin: 0 var(--bodyHPadding);
  }
}
@media (max-width: 48em) {
  .siteHeader {
    --headerVPadding: .75em;
  }

  .siteHeader ul {
    font-size: 1em;
    flex-flow: row wrap;
    gap: 0.5em 0;
    row-gap: 0.5em;
  }
  .siteHeader ul .logo {
    width: 3em;
  }
  .siteHeader ul .siteHeader--primary {
    flex-flow: row wrap;
    gap: 0.5em 0;
    row-gap: 0.5em;
  }
  .siteHeader ul .siteHeader--primary a::before {
    --h: calc(var(--headerVPadding)*.5);
  }
  .siteHeader ul .siteHeader--secondary a::before {
    width: 2.75em;
    height: 2.75em;
  }

  .siteHeader--themeButtonContainer {
    font-size: 0.675rem;
  }
  .siteHeader--themeButtonContainer .themeButton .icon {
    width: 1rem;
  }
}
@media (max-width: 34em) {
  .siteHeader ul {
    justify-content: flex-end;
  }
  .siteHeader ul .siteHeader--primary {
    margin-left: 1.25em;
  }
  .siteHeader ul .siteHeader--primary a {
    padding: 0;
  }
  .siteHeader ul .siteHeader--primary__last {
    margin-right: 0;
  }
  .siteHeader ul .siteHeader--primary__last::before {
    content: none;
  }
  .siteHeader ul .siteHeader--secondary {
    display: none;
  }
  .siteHeader ul .siteHeader--preference {
    margin-left: 1em;
  }
}
/* end header */
/* breadcrumbs */
.breadcrumb {
  font-size: 0.875em;
  margin: 3rem auto 0;
  max-width: var(--contentW);
}

.breadcrumb ol {
  font-size: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 1em 0;
  row-gap: 1em;
}
.breadcrumb ol li {
  font-size: inherit;
  max-width: none;
  margin: 0 1rem 0 0;
  padding: 0 1em 0 0;
  position: relative;
}
.breadcrumb ol li::before {
  border: solid 2px var(--color--grey-50);
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  content: "";
  height: 0.4em;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.4em;
}
.breadcrumb ol li:last-of-type {
  color: var(--color--grey-50);
  padding-right: 0;
}
.breadcrumb ol li:last-of-type::before {
  content: none;
}
.breadcrumb ol li:last-of-type a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 78em) {
  .breadcrumb {
    margin: 3rem var(--bodyHPadding) 0;
  }
}
/* end breadcrumbs */
/* footer */
.siteFooter {
  background: var(--color--plum-80);
  color: var(--color--plum-10);
  font-size: 0.875em;
  padding: 6em 0;
}
.siteFooter .inner {
  margin: 0 auto;
  max-width: var(--contentW);
}

.siteFooter a {
  color: inherit;
  text-decoration-color: currentColor;
}
.siteFooter a:hover {
  color: white;
}
.siteFooter a:focus {
  color: white;
  outline-color: white;
}

.siteFooter h2, .siteFooter h3, .siteFooter h4, .siteFooter h5, .siteFooter h6, .siteFooter p {
  font-size: inherit;
  margin-top: 0;
}

.siteFooter h2, .siteFooter h3, .siteFooter h4, .siteFooter h5, .siteFooter h6 {
  color: var(--color--plum-5);
  font-family: var(--font--ptsans);
  font-weight: 700;
}

.siteFooter--top {
  border-bottom: solid 1px var(--color--plum-50);
  display: flex;
  justify-content: space-between;
}

.siteFooter nav {
  flex: 1 0 auto;
  margin: 0 0 3em;
}

.siteFooter--a11yStatement {
  flex: 1 1 auto;
  margin: 0 0 3em;
  max-width: 25em;
}

.siteFooter--bottom {
  padding-top: 3.5em;
  text-align: center;
}
.siteFooter--bottom p {
  margin: 0 auto;
}
.siteFooter--bottom p:last-of-type {
  margin-bottom: 0;
}

.siteFooter .webring {
  border-bottom: solid 1px var(--color--plum-50);
}
.siteFooter .webring nav {
  margin: 1rem 0;
  display: flex;
  align-items: flex-end;
  gap: 1rem 3rem;
}
.siteFooter .webring ul li {
  margin: 0 1rem;
}
.siteFooter .webring p {
  margin: 0;
}

.siteFooter ul {
  color: var(--color--plum-5);
  font-size: inherit;
  font-weight: 700;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.siteFooter ul li {
  font-size: inherit;
  margin: 0 3.5em 0 0;
  padding: 0;
}
.siteFooter ul a {
  display: inline-block;
}
.siteFooter ul .siteFooter--logo {
  transform: translateY(-15%);
}

ul.siteFooter--subList {
  color: var(--color--plum-10);
  font-weight: 400;
  list-style: none;
  margin: 1em 0 0 0;
  padding: 0;
  display: block;
}
ul.siteFooter--subList li {
  font-size: inherit;
  margin: 0 0 1em;
}

.siteFooter .logo {
  width: 2.75em;
}

.siteFooter .icon {
  display: inline-block;
  margin-right: 0.25em;
  width: 1em;
}

ul.siteFooter--otherLinksList {
  color: var(--color--plum-5);
  font-weight: 700;
  margin-top: 0;
}

@media (max-width: 78rem) {
  .siteFooter .inner {
    margin: 0 var(--bodyHPadding);
  }
}
@media (max-width: 48rem) {
  .siteFooter--top {
    display: block;
  }

  .siteFooter--a11yStatement {
    max-width: none;
  }

  .siteFooter ul {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1em;
    column-gap: 1em;
  }
  .siteFooter ul .siteFooter--logo {
    flex: 1 0 100%;
    margin: 0 auto 1.7125em;
    min-width: 100%;
    transform: none;
    display: flex;
    justify-content: center;
  }
  .siteFooter ul li {
    margin-right: 0em;
    margin-bottom: 1em;
  }
  .siteFooter ul li:last-of-type {
    margin-right: 0;
  }

  ul.siteFooter--subList {
    display: block;
  }
  ul.siteFooter--subList li {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }

  .siteFooter .logo {
    width: 3.5em;
  }

  .siteFooter .webring nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .siteFooter .webring ul {
    justify-content: start;
  }
  .siteFooter .webring ul li {
    margin: 0;
  }
  .siteFooter .webring ul li:not(:last-of-type) {
    margin: 0 0 1rem;
  }
}
/* end footer */
/* other structural styles */
main {
  padding: 6em 0 8em;
}

main h1 {
  margin: 0 auto 0.75em;
  max-width: var(--contentW);
}

.mainInner {
  margin: 0 auto;
  max-width: var(--contentW);
}

.contentGroup {
  margin: 0 0 3em;
}

@media (max-width: 78em) {
  main {
    padding: 6em var(--bodyHPadding) 8em;
  }
}
@media (max-width: 48em) {
  main {
    padding: 4em var(--bodyHPadding) 6em;
  }
}
/* end other structural styles */
/* homepage styles */
.homeContent {
  margin: 0 auto;
  margin-bottom: -8em;
  max-width: 44em;
  position: relative;
}

.homeContent p {
  font-size: 1.5em;
}
.homeContent p:last-of-type {
  margin-bottom: 0;
}

.homeAnimation {
  height: 10em;
  margin: 4em auto 0;
  position: relative;
  transform: translateY(1px);
  width: 16.5em;
}

.homeAnimation--canvas {
  display: block;
  height: 10em;
  image-rendering: pixelated;
  width: 16.5em;
}

.homeAnimation--button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--color--grey-80);
  font-size: 1em;
  height: 3em;
  padding: 0;
  position: absolute;
  left: -2em;
  bottom: 0em;
  width: 3em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.homeAnimation--button:hover, .homeAnimation--button:focus {
  color: var(--color--green-60);
}
.homeAnimation--button:focus {
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}

.homeAnimation--button.playing use:first-of-type {
  display: block;
}
.homeAnimation--button.playing use:last-of-type {
  display: none;
}

.homeAnimation--buttonIcon {
  height: 1em;
  width: 1em;
}
.homeAnimation--buttonIcon use:first-of-type {
  display: none;
}
.homeAnimation--canvas[data-js=false] {
  background-image: url("/assets/static images/construction-static.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

@media (max-width: 48em) {
  .homeContent {
    margin-bottom: -6em;
  }
}
/* end homepage styles */
/* contact styles */
.contactContent {
  margin: 0 auto;
  max-width: 44em;
}

.contactForm #contactMessage {
  height: 10em;
}
.contactForm .inputGroup:nth-of-type(1) input {
  max-width: 25rem;
}
.contactForm .inputGroup:nth-of-type(2) input {
  max-width: 25rem;
}
.contactForm .inputGroup:nth-of-type(4) input {
  max-width: 12rem;
}

.contactStatus {
  --bg: #FFF;
  --borderSize: 4px;
  --borderColor: currentColor;
  --color: currentColor;
  background: var(--bg);
  border: solid var(--borderSize) var(--borderColor);
  border-top: 0;
  border-bottom: 0;
  color: var(--color);
  filter: drop-shadow(var(--shadow));
  margin: 0 0 2em;
  padding: 2em;
  position: relative;
}
.contactStatus > *:last-child {
  margin-bottom: 0;
}
.contactStatus::before {
  border: solid var(--borderSize) var(--borderColor);
  border-left: 0;
  border-right: 0;
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: calc(-1 * var(--borderSize));
  width: 100%;
  z-index: -1;
}
.contactStatus ul, .contactStatus ol {
  margin-bottom: 0;
}
.contactStatus ul li span, .contactStatus ol li span {
  font-weight: 700;
}
.contactStatus h2 {
  margin-top: 0;
}

.contactError {
  --bg: var(--color--red-5);
  --color: var(--color--red-60);
}
.contactError ul li::marker, .contactError ol li::marker {
  color: currentColor;
}
.contactError ul li a, .contactError ol li a {
  color: currentColor;
  text-decoration-color: var(--color--red-50);
}
.contactError ul li a:hover, .contactError ul li a:focus, .contactError ol li a:hover, .contactError ol li a:focus {
  color: var(--color--red-70);
  text-decoration-color: var(--color--red-60);
}
.contactError ul li a:focus, .contactError ol li a:focus {
  outline-color: currentColor;
}

.contactSuccess {
  --bg: var(--color--green-3);
  --color: var(--color--green-60);
}

#contactStatus--heading:focus {
  outline: 0;
}

/* end contact styles */
/* about content */
.aboutContent {
  max-width: 44em;
}

.aboutCols {
  display: grid;
  grid-template-columns: minmax(auto, 44em) auto;
  column-gap: 8em;
  justify-content: space-between;
}
.aboutCols img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  width: 100%;
}
.aboutCols p:first-of-type {
  margin-top: 0;
}
@media (max-width: 56em) {
  .aboutCols {
    column-gap: 4em;
  }
}
@media (max-width: 48rem) {
  .aboutCols {
    grid-template-columns: none;
  }
  .aboutCols img {
    max-width: 16em;
  }
  .aboutCols .aboutCols--left {
    order: 2;
  }
  .aboutCols .aboutCols--right {
    margin: 0 0 2em;
    order: 1;
  }
}
/* end about content */
/* articles styles */
.articlesContent {
  max-width: 44em;
}
.singleArticleContent {
  --tocWidth: 18.5rem;
  margin: 0 auto;
  max-width: none;
}
.singleArticleContent .articleDetails {
  border-bottom: solid 1px var(--color--grey-20);
  margin: 0 auto 3.6em;
  max-width: var(--contentW);
  padding-bottom: 2em;
}
.singleArticleContent .articleFeatureImage {
  max-width: var(--contentW);
}
.singleArticleContent .articleImage {
  display: block;
  height: auto;
  margin: 1em auto 3em;
  width: 100%;
}

.articleBody .wide {
  margin-left: -4em;
  margin-right: -4em;
  width: calc(100% + 8em);
}
.articleBody .narrow {
  max-width: 20em;
}
.articleBody .floatedRight {
  float: right;
  margin-left: 3em;
  margin-right: -4em;
}
.articleBody .floatedLeft {
  float: left;
  margin-left: -4em;
  margin-right: 3em;
}

.articleFeatureImage {
  box-shadow: var(--shadow);
  display: block;
  height: auto;
  margin: 0 auto 3em;
  width: 100%;
}

.article {
  border-bottom: solid 1px var(--color--grey-20);
  margin-bottom: 6em;
  padding-bottom: 6em;
}
.article:last-of-type {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.article h2 {
  margin-top: 0;
}
.article .articleDetails {
  border-bottom: solid 1px var(--color--grey-20);
  padding-bottom: 1.6em;
}
.article .articleFeatureImage {
  margin-bottom: 2em;
}

.articleCatsContent {
  margin: 0 auto;
  max-width: 44em;
}

.articlePrevNext {
  border-top: solid 1px var(--color--grey-20);
  color: var(--color--grey-50);
  margin: 6em auto;
  max-width: var(--contentW);
  padding-top: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2em;
}
.articlePrevNext span {
  display: block;
  font-weight: 700;
}
.articlePrevNext .articlePrevNext--left, .articlePrevNext .articlePrevNext--right {
  padding-left: 2em;
}
.articlePrevNext .articlePrevNext--left p, .articlePrevNext .articlePrevNext--right p {
  margin-bottom: 0;
}
.articlePrevNext .articlePrevNext--left p a, .articlePrevNext .articlePrevNext--right p a {
  position: relative;
}
.articlePrevNext .articlePrevNext--left p a::before, .articlePrevNext .articlePrevNext--right p a::before {
  border: solid 2px currentColor;
  border-right: 0;
  border-bottom: 0;
  box-sizing: border-box;
  content: "";
  height: 0.5em;
  position: absolute;
  left: -2em;
  top: 50%;
  transform: translate(100%, -50%) rotate(-45deg);
  width: 0.5em;
}
.articlePrevNext .articlePrevNext--right {
  padding-left: 0;
  padding-right: 2em;
  text-align: right;
}
.articlePrevNext .articlePrevNext--right p a::before {
  left: auto;
  right: -2em;
  transform: translate(-100%, -50%) rotate(135deg);
}
.articlePrevNext .articlePrevNext--right .articleDetails {
  justify-content: end;
}
.articlePrevNext .articlePrevNext--right .articleDetails .articleDate, .articlePrevNext .articlePrevNext--right .articleDetails .articleTags {
  justify-content: flex-end;
}
.articlePrevNext .articleDetails {
  font-size: 1em;
  margin: 0.75em 0 0;
  text-align: inherit;
}

.articlesFeed {
  border-top: solid 1px var(--color--grey-20);
  padding-top: 6em;
  margin-top: 6em;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 22em);
  column-gap: 6em;
  justify-content: space-between;
}
.articlesFeed .articlesFeed--right h3 {
  margin-top: 0;
}

.articleBody {
  position: relative;
  display: grid;
  grid-template-columns: minmax(auto, 53.5rem) var(--tocWidth);
  justify-content: center;
  align-items: start;
  column-gap: 3rem;
}

.articleDetails {
  color: var(--color--grey-50);
  font-size: 1.25em;
  line-height: 1.5;
  margin: 0 0 1.6em;
  vertical-align: baseline;
  display: grid;
  grid-template-columns: minmax(auto, max-content) minmax(auto, max-content);
  grid-auto-columns: minmax(auto, max-content);
  align-items: start;
  column-gap: 2em;
  row-gap: 1em;
}
.articleDetails .icon {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 0.5em;
  width: 0.875em;
}

.articleDate {
  display: flex;
  align-items: baseline;
}
.articleDate > span:last-of-type {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
}

.articleTags {
  display: flex;
  align-items: baseline;
}
.articleTags ul {
  font-size: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
}
.articleTags li {
  font-size: 1em;
  margin: 0 0.25em 0 0;
  padding: 0;
}
.articleTags li a {
  color: inherit;
  text-decoration-color: var(--color--grey-50);
  text-decoration-thickness: 2px;
}
.articleTags li a:hover, .articleTags li a:focus {
  color: var(--color--grey-80);
  text-decoration-color: var(--color--grey-50);
  text-decoration-thickness: 4px;
}
.articleTags .icon {
  position: relative;
  top: 0.15em;
}

.articlePreview {
  margin: 0 0 2em;
}
.articlePreview p:last-of-type {
  margin-bottom: 0;
}

.articleLink {
  vertical-align: bottom;
}
.articleLink .icon {
  display: inline-block;
  margin: 0 0 0 0.5em;
  position: relative;
  top: 0.15em;
  width: 0.875em;
}

.articlesBrowse {
  --border: var(--color--grey-80);
  padding: 2em;
  position: relative;
}
.articlesBrowse ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
}
.articlesBrowse ul li {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0 0 0.5em;
  padding: 0 1em 0 0;
  width: 50%;
}

.articleEmbed {
  margin: 2.5em 0 3em;
}

.articleCallout {
  border-left: solid 0.5em var(--color--green-50);
  box-sizing: border-box;
  margin: 2.5em 0 2em;
  padding: 0 1.5em 0 2em;
  position: relative;
}
.articleCallout .exclamation {
  background: #FFF;
  border: solid 2px var(--color--green-50);
  border-radius: 50%;
  height: 2em;
  position: absolute;
  left: 0;
  transform: translateX(calc(-50% - 0.25em));
  width: 2em;
}
.articleCallout .exclamation .icon {
  color: var(--color--green-50);
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
}
.articleCallout p:first-of-type {
  margin-top: 0;
}
.articleCallout p:last-of-type {
  margin-bottom: 0;
}

.articleTocContainer {
  height: 100%;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  width: calc(100% - 4px);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.articleToc {
  --bg: var(--color--grey-3);
  --border: var(--color--grey-80);
  --shadowColor: 0,0,0;
  font-size: 0.8rem;
  overscroll-behavior: contain;
  padding: 0;
  pointer-events: initial;
  position: sticky;
  top: 2rem;
  right: 2rem;
  width: var(--tocWidth);
  z-index: 1;
  display: flex;
  flex-flow: column;
  max-height: calc(100vh - 4rem);
}
.articleToc > ul {
  margin: 0;
  overflow-y: auto;
  padding: 1rem 1rem 1rem 2.5rem;
  background: linear-gradient(var(--bg) 33%, rgba(var(--shadowColor), 0)), linear-gradient(rgba(var(--shadowColor), 0.25) 4px, rgba(var(--shadowColor), 0.14) 4px, rgba(var(--shadowColor), 0.14) 8px, rgba(var(--shadowColor), 0.07) 8px, rgba(var(--shadowColor), 0.07) 12px), linear-gradient(rgba(var(--shadowColor), 0), var(--bg) 66%) 0 100%, linear-gradient(rgba(var(--shadowColor), 0.07) 4px, rgba(var(--shadowColor), 0.14) 4px, rgba(var(--shadowColor), 0.14) 8px, rgba(var(--shadowColor), 0.25) 8px, rgba(var(--shadowColor), 0.25) 12px) 0 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 36px, 100% 12px, 100% 36px, 100% 12px;
}
.articleToc p {
  font-weight: 700;
  margin: 1rem 1.5rem 0;
  margin: 1rem 0 0;
  padding-bottom: 0.5em;
  padding: 0 1.5rem 0.5rem;
}
.articleToc li {
  margin: 0.5em 0;
  padding: 0;
}
.articleToc li ul {
  margin: 0.5em 0;
}
.articleToc .skipLink {
  font-size: 1em;
}
.articleToc .skipLink:nth-of-type(1) {
  bottom: 100%;
}
.articleToc .skipLink:nth-of-type(2) {
  top: 100%;
}

.articleVideo iframe {
  aspect-ratio: 16/9;
  border: solid 1px var(--color--grey-30);
  box-shadow: var(--shadow);
  height: auto;
  margin: 0 0 1em;
  width: 100%;
}

.articleVideo--caption {
  color: var(--color--green-60);
  font-size: 1.1em;
  margin: 0 2em 2rem;
}

.articleVideo .disclosureButton {
  font-size: 1.1em;
}

@media (max-width: 92em) {
  .singleArticleContent {
    --tocWidth: 40%;
    max-width: 44rem;
  }

  .articleBody {
    display: block;
  }

  .articleTocContainer {
    display: block;
    float: right;
    height: auto;
    margin: 0 -35% 3rem 2rem;
    margin: 0 calc(-1 * var(--tocWidth) / 2) 3rem 2rem;
    position: relative;
    top: auto;
    left: auto;
    width: var(--tocWidth);
  }

  .articleToc {
    max-height: none;
    position: relative;
    top: auto;
    right: auto;
    width: auto;
  }
  .articleToc > ul {
    background: none;
    padding-top: 0;
  }
}
@media (max-width: 67em) {
  .singleArticleContent {
    --tocWidth: 35%;
  }

  .articleTocContainer {
    margin: 0 -4rem 3rem 2rem;
  }

  .articleToc {
    font-size: 0.75rem;
  }
  .articleToc p {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .articleToc > ul {
    margin-left: 1rem;
    padding-left: 1rem;
  }
}
@media (max-width: 64em) {
  .articlesFeed {
    grid-template-columns: 2fr 1fr;
  }

  .articlesBrowse ul li {
    flex: 1 1 auto;
    width: 100%;
    padding: 0;
  }
}
@media (max-width: 60em) {
  .articleBody .wide {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .articleBody .floatedRight {
    margin-right: 0;
  }
  .articleBody .floatedLeft {
    margin-left: 0;
  }

  .articleTocContainer {
    margin-right: 0;
  }
}
@media (max-width: 48em) {
  .articlesFeed {
    display: block;
    padding-top: 4em;
    margin-top: 4em;
  }

  .articlesFeed--right {
    margin-top: 5em;
  }

  .article {
    margin-bottom: 4em;
    padding-bottom: 4em;
  }

  .articleDetails {
    grid-template-columns: 1fr;
  }

  .articlePrevNext {
    grid-template-columns: 1fr;
    row-gap: 2em;
  }
  .articlePrevNext .articlePrevNext--left, .articlePrevNext .articlePrevNext--right {
    padding: 0 2em;
  }
  .articlePrevNext .articlePrevNext--left p a, .articlePrevNext .articlePrevNext--right p a {
    display: block;
  }
  .articlePrevNext .articlePrevNext--left p span, .articlePrevNext .articlePrevNext--right p span {
    text-align: center;
  }
  .articlePrevNext .articlePrevNext--right {
    text-align: left;
  }
  .articlePrevNext .articlePrevNext--right .articleDetails {
    justify-content: start;
  }
  .articlePrevNext .articlePrevNext--right .articleDetails .articleDate, .articlePrevNext .articlePrevNext--right .articleDetails .articleTags {
    justify-content: flex-start;
  }
  .articlePrevNext .articleDetails {
    row-gap: 0.1em;
  }

  .articleTocContainer {
    float: none;
    margin: 0 0 3rem;
    width: auto;
  }

  .articleBody .floatedRight, .articleBody .floatedLeft {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  .articleBody .narrow {
    max-width: 12em;
  }
}
/* end articles styles */
/* site map styles */
.sitemapContent {
  margin: 0 auto;
  max-width: 44em;
}

.sitemapContent .articleDetails {
  font-size: 0.8em;
  margin-top: 0.75em;
}

/* end site map styles */
/* privacy styles */
.privacyContent {
  margin: 0 auto;
  max-width: 44em;
}

/* end privacy styles */
/* form styles */
.inputGroup {
  margin: 0 0 2.5em;
}

.label {
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 0 0.5em;
}

input[type=text], input[type=email], textarea {
  -webkit-appearance: none;
  appearance: none;
  background: white;
  border: solid 2px var(--color--grey-80);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--color--green-50);
  display: block;
  font-family: var(--font--ptsans);
  font-size: 1.25em;
  padding: 0.75em 1.25em;
  width: 100%;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
  border-color: var(--color--green-40);
  outline: 0;
}
.button {
  --bg: var(--color--green-40);
  --border: var(--color--green-50);
  appearance: none;
  border: 0;
  color: #FFF;
  font-family: var(--font--ptsans);
  font-size: 1.25em;
  font-weight: 700;
  display: inline-block;
  line-height: 1.5;
  padding: 0.75em 1.75em;
  text-align: center;
  text-decoration: none;
  vertical-align: baseline;
}
.button:hover, .button:focus {
  --bg: var(--color--green-50);
  --border: var(--color--green-60);
  color: #FFF;
}
.button:focus {
  outline: var(--outline);
  outline-offset: 0.5rem;
}
.button:active {
  --bg: var(--color--green-60);
  --border: var(--color--green-70);
}

.button__secondary {
  --bg: var(--color--grey-10);
  --border: var(--color--grey-70);
  color: var(--color--grey-80);
}
.button__secondary:hover, .button__secondary:focus {
  --bg: var(--color--grey-20);
  --border: var(--color--grey-80);
  color: inherit;
}
.button__secondary:active {
  --bg: var(--color--grey-30);
  --border: var(--color--grey-90);
}

.button__small {
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
}

.button__xSmall {
  --bg: var(--color--green-50);
  --border: var(--color--green-60);
  --edgeSize: 2px;
  --sh: none;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}
.button__xSmall:hover, .button__xSmall:focus {
  --bg: var(--color--green-60);
  --border: var(--color--green-70);
}
.button__xSmall:focus {
  outline-width: 0.175rem;
  outline-offset: 0.25rem;
}
.button__xSmall:active {
  --bg: var(--color--green-70);
  --border: var(--color--green-80);
}

.disclosureButton {
  margin: 0;
  z-index: 1;
}
.disclosureButton svg {
  height: 0.75em;
  margin-right: 0.5em;
  width: 0.75em;
}
.disclosureButton::before {
  top: 4px;
  transform: none;
}
.disclosureButton[aria-expanded=true] {
  filter: none;
}
.disclosureButton[aria-expanded=true] svg {
  transform: rotate(90deg);
}
.disclosureButton[aria-expanded=true]::before {
  height: calc(100% - 4px);
}

.disclosureButton[aria-expanded=false] + .disclosureContent {
  display: none;
}

details summary {
  list-style: none;
  margin: 0;
}
details summary svg {
  height: 0.75em;
  margin-right: 0.5em;
  width: 0.75em;
}
details summary::-webkit-details-marker {
  display: none;
}
details div.pixelBox {
  --bg: var(--color--green-2);
  --border: var(--color--green-50);
  margin-top: var(--edgeSize);
  padding: 2em;
  position: relative;
  z-index: -1;
}
details div.pixelBox > p:first-of-type {
  margin-top: 0;
}
details div.pixelBox > p:last-of-type {
  margin-bottom: 0;
}

details[open] summary svg {
  transform: rotate(90deg);
}
details[open] summary::before {
  height: calc(100% + var(--edgeSize));
}

.errorText {
  color: var(--color--red-60);
  margin: -0.25em 0 0.75em;
}

.buttonRow {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 1rem;
}

.buttonRow__right {
  justify-content: flex-end;
}

.buttonRow__split {
  justify-content: space-between;
}

@media (max-width: 48em) {
  .button {
    display: block;
    width: 100%;
  }
}
/* end form styles */
/* common styles */
.icon {
  width: 1.5rem;
}

.icon__twitter div, .icon__twitter span {
  padding-bottom: 81.275%;
}

.logo {
  width: 4.125rem;
}
.logo div, .logo span {
  padding-bottom: 81.81%;
}

.pBig {
  font-size: 1.5em;
}

.bold {
  font-weight: 700;
}

.strikethrough {
  text-decoration: line-through;
}

.boxShadow {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}

.key {
  background: #FFF;
  border-radius: 0.3em;
  border: solid 1px var(--color--grey-30);
  color: #186CA4;
  font-family: var(--font--mono);
  font-size: 0.8em;
  padding: 0.15em 0.35em;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* color theme picker */
.themeForm {
  margin-top: 1rem;
}
.themeForm > div {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
}
.themeForm button {
  flex: 0;
}

.themeFieldset {
  border: 0;
  color: var(--color--grey-50);
  font-size: 0.75rem;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: inherit;
}
.themeFieldset div[aria-hidden=true] {
  font-family: var(--font--exo);
  font-weight: 900;
  padding: 0;
}
.themeFieldset input[type=radio] {
  margin: 0;
  opacity: 0.001;
  position: absolute;
  z-index: 1;
}
.themeFieldset input[type=radio] + label {
  font-weight: bold;
  padding-left: 1.375rem;
  position: relative;
}
.themeFieldset input[type=radio] + label::before, .themeFieldset input[type=radio] + label::after {
  aspect-ratio: 1/1;
  border-radius: 99em;
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.themeFieldset input[type=radio] + label::before {
  background: var(--color--grey-3);
  border: solid 2px var(--color--grey-50);
  box-sizing: border-box;
  left: 0;
  width: 1.125rem;
}
.themeFieldset input[type=radio] + label::after {
  background: var(--color--green-50);
  left: 0.25rem;
  opacity: 0;
  width: 0.625rem;
}
.themeFieldset input[type=radio]:hover + label::before {
  background: var(--color--grey-10);
}
.themeFieldset input[type=radio]:active + label::before {
  background: var(--color--grey-20);
}
.themeFieldset input[type=radio]:focus {
  outline: 0;
}
.themeFieldset input[type=radio]:focus-visible + label::before {
  outline: var(--outline);
  outline-width: 0.175rem;
  outline-offset: 0.075rem;
}
.themeFieldset input[type=radio]:checked + label::after {
  opacity: 1;
}

.themeButton {
  appearance: none;
  background: none;
  border: solid 1px transparent;
  color: var(--color--green-50);
  font-family: var(--font--exo);
  font-size: inherit;
  font-weight: 900;
  padding: 0;
}
.themeButton .icon {
  width: 2rem;
}
.themeButton .text {
  transform: translateY(-2px);
}
.themeButton:hover, .themeButton:focus {
  color: var(--color--green-60);
}
.themeButton:focus {
  outline: var(--outline);
  outline-offset: 0.125rem;
}

.themeDialogFieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.themeDialogFieldset legend {
  margin: 0;
  padding: 0;
}
.themeDialogFieldset > div {
  position: relative;
}
.themeDialogFieldset input[type=radio] {
  margin: 0;
  padding: 0;
  opacity: 0.001;
  position: absolute;
}
.themeDialogFieldset input[type=radio] + label {
  background: var(--color--grey-4);
  border: solid 2px var(--color--grey-30);
  border-radius: 0.5rem;
  display: block;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
}
.themeDialogFieldset input[type=radio] + label::before, .themeDialogFieldset input[type=radio] + label::after {
  border-radius: 99em;
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}
.themeDialogFieldset input[type=radio] + label::before {
  background: var(--color--grey-1);
  border: solid 2px var(--color--grey-50);
  height: 2rem;
  width: 2rem;
}
.themeDialogFieldset input[type=radio] + label::after {
  background: var(--color--green-40);
  height: 1.25rem;
  opacity: 0;
  width: 1.25rem;
}
.themeDialogFieldset input[type=radio]:hover + label, .themeDialogFieldset input[type=radio]:focus + label {
  background: var(--color--grey-10);
  border-color: var(--color--grey-40);
}
.themeDialogFieldset input[type=radio]:active + label {
  background: var(--color--grey-20);
  border-color: var(--color--grey-50);
}
.themeDialogFieldset input[type=radio]:focus-visible + label {
  outline: var(--outline);
  outline-offset: 0.5rem;
}
.themeDialogFieldset input[type=radio]:checked + label {
  background: var(--color--green-2);
  border-color: var(--color--green-40);
  box-shadow: 0 0 0 4px var(--color--green-40);
}
.themeDialogFieldset input[type=radio]:checked + label::after {
  opacity: 1;
}
.themeDialogFieldset > div:last-of-type label {
  margin-bottom: 0;
}

@media (max-width: 48em) {
  .themeForm {
    gap: 0.75rem;
  }
  .themeForm button {
    font-size: 0.675rem;
  }

  .themeFieldset {
    font-size: 0.675rem;
  }

  .themeDialogFieldset input[type=radio] + label {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  .themeDialogFieldset input[type=radio] + label::before {
    height: 1.5rem;
    width: 1.5rem;
  }
  .themeDialogFieldset input[type=radio] + label::after {
    height: 1rem;
    width: 1rem;
  }
}
/* end color theme picker */
/* modal styling */
.modal,
.modal--backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal[aria-hidden=true] {
  display: none;
}

.modal--backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.modal--content {
  --bg: var(--color--grey-3);
  --border: var(--color--green-40);
  --edgeSize: 4px;
  --p: 2rem;
  --bottomOffset: 4px;
  --shadowColor: 0,0,0;
  background: var(--bg);
  filter: drop-shadow(var(--shadow));
  margin: 1rem;
  max-height: 90vh;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
}
.modal--content::before, .modal--content::after {
  border: solid var(--edgeSize) var(--border);
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  position: absolute;
}
.modal--content::before {
  border-top: 0;
  border-bottom: 0;
  height: 100%;
  width: calc(100% + var(--edgeSize) * 2);
  top: 0;
  left: calc(-1 * var(--edgeSize));
}
.modal--content::after {
  border-left: 0;
  border-right: 0;
  height: calc(100% + var(--edgeSize) * 2);
  left: 0;
  top: calc(-1 * var(--edgeSize));
  width: 100%;
}

.modal--content--header {
  padding: var(--p) var(--p) 0 var(--p);
}

.modal--content--body {
  padding: 0 var(--p) calc(var(--p) + var(--bottomOffset)) var(--p);
  overflow-y: auto;
  background: linear-gradient(var(--bg) 33%, rgba(var(--shadowColor), 0)), linear-gradient(rgba(var(--shadowColor), 0.25) 4px, rgba(var(--shadowColor), 0.14) 4px, rgba(var(--shadowColor), 0.14) 8px, rgba(var(--shadowColor), 0.07) 8px, rgba(var(--shadowColor), 0.07) 12px), linear-gradient(rgba(var(--shadowColor), 0), var(--bg) 66%) 0 100%, linear-gradient(rgba(var(--shadowColor), 0.07) 4px, rgba(var(--shadowColor), 0.14) 4px, rgba(var(--shadowColor), 0.14) 8px, rgba(var(--shadowColor), 0.25) 8px, rgba(var(--shadowColor), 0.25) 12px) 0 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 36px, 100% 12px, 100% 36px, 100% 12px;
}

.modal--closeButton {
  --bg: var(--color--green-50);
  --border: inherit;
  font-size: 2rem;
  height: 3rem;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  z-index: 1;
}
.modal--closeButton span {
  user-select: none;
}
.modal--closeButton:hover, .modal--closeButton:focus {
  --bg: var(--color--green-60);
  --border: var(--color--green-50);
}
.modal--closeButton:active {
  --bg: var(--color--green-70);
  --border: var(--color--green-60);
}
.modal--closeButton:focus {
  outline: var(--outline);
  outline-offset: 0.5rem;
}

.modal .buttonRow {
  border-top: solid 1px var(--color--grey-20);
  margin-top: 2rem;
  padding-top: 2rem;
}

@media (max-width: 48em) {
  .modal--content {
    --p: 1.5rem;
    --bottomOffset: 1rem;
  }
}
@media (max-width: 34em) {
  .modal buttonRow {
    padding-top: 1rem;
  }

  .modal .buttonRow button {
    width: auto;
  }
}
/* end modal styling */
/* code snippets */
.snippetBlock {
  background: var(--color--green-2);
  border: solid 1px var(--color--grey-30);
  box-shadow: var(--shadow);
  color: #186CA4;
  font-size: inherit;
  margin: 0 0 2em;
  overflow: auto;
  padding: 1.5em 1.5em 2em;
  position: relative;
}
.snippetBlock:focus {
  outline: var(--outline);
  outline-offset: var(--outlineOffset);
}
.snippetBlock, .snippetBlock code {
  font-family: "PTMono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  line-height: 1.5;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.snippetBlock--langIcon {
  box-sizing: border-box;
  margin-top: -1.5em;
  margin-bottom: 0.5em;
  margin-right: -1.5em;
  position: sticky;
  left: 0;
  display: flex;
  justify-content: flex-end;
}
.snippetBlock--langIcon span {
  background: #146947;
  color: #FFF;
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.25em 1em;
  text-transform: uppercase;
}

.snippetBlock--lineHighlights {
  --bg: var(--color--green-50);
  --bgO: .06;
  --border: var(--color--green-50);
  --t: 1;
  --h: 1;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 2rem;
  width: 100%;
}
.snippetBlock--lineHighlights > div {
  display: block;
  height: calc(1lh * var(--h));
  position: absolute;
  left: 0;
  top: calc(1lh * var(--t));
  width: 100%;
}
.snippetBlock--lineHighlights > div::before, .snippetBlock--lineHighlights > div::after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.snippetBlock--lineHighlights > div::before {
  background: var(--bg);
  opacity: var(--bgO);
  width: 100%;
}
.snippetBlock--lineHighlights > div::after {
  background: var(--bg);
  width: 4px;
}

::highlight(comment),
::highlight(prolog),
::highlight(doctype),
::highlight(cdata),
::highlight(punctuation) {
  color: #666A6E;
}

::highlight(property),
::highlight(tag),
::highlight(boolean),
::highlight(number),
::highlight(constant),
::highlight(symbol),
::highlight(deleted),
::highlight(function),
::highlight(class-name) {
  color: #146947;
}

::highlight(selector),
::highlight(attr-name),
::highlight(string),
::highlight(char),
::highlight(builtin),
::highlight(inserted),
::highlight(parameter) {
  color: #A23B9B;
}

::highlight(operator),
::highlight(entity),
::highlight(url),
::highlight(atrule),
::highlight(attr-value),
::highlight(keyword),
::highlight(regex),
::highlight(important),
::highlight(variable) {
  color: #186CA4;
}

::highlight(important), ::highlight(bold) {
  font-weight: bold;
}

::highlight(italic) {
  font-style: italic;
}

/* end code snippets */
/* skip links */
.skipLink {
  background: var(--color--green-40);
  color: #FFF;
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  padding: 0.5em 1em;
  position: absolute;
  left: -9999px;
  z-index: 1;
}
.skipLink:hover {
  background: var(--color--grey-80);
  color: #FFF;
}
.skipLink:focus {
  color: #FFF;
  left: 0;
  text-decoration-color: currentColor;
}

/* end skip links */
/* dark mode styling */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    /* code snippets */
    /* end code snippets */
  }
  :root:not([data-theme=light]) {
    color-scheme: dark light;
    --outlineColor: var(--color--green-20);
  }
  :root:not([data-theme=light]) body {
    background: var(--color--grey-90);
    color: var(--color--grey-5);
  }
  :root:not([data-theme=light]) li::marker {
    color: var(--color--green-40);
  }
  :root:not([data-theme=light]) h1 > code, :root:not([data-theme=light]) h2 > code, :root:not([data-theme=light]) h3 > code, :root:not([data-theme=light]) h4 > code, :root:not([data-theme=light]) h5 > code, :root:not([data-theme=light]) h6 > code, :root:not([data-theme=light]) p > code, :root:not([data-theme=light]) blockquote > code, :root:not([data-theme=light]) li > code, :root:not([data-theme=light]) a > code, :root:not([data-theme=light]) table code, :root:not([data-theme=light]) li code {
    background: var(--color--green-80);
    border-color: var(--color--green-50);
    color: #99D6FF;
  }
  :root:not([data-theme=light]) h1 a, :root:not([data-theme=light]) h2 a, :root:not([data-theme=light]) h3 a, :root:not([data-theme=light]) h4 a, :root:not([data-theme=light]) h5 a, :root:not([data-theme=light]) h6 a {
    color: var(--color--green-40);
    text-decoration-color: var(--color--green-30);
  }
  :root:not([data-theme=light]) h1 a:hover, :root:not([data-theme=light]) h1 a:focus, :root:not([data-theme=light]) h2 a:hover, :root:not([data-theme=light]) h2 a:focus, :root:not([data-theme=light]) h3 a:hover, :root:not([data-theme=light]) h3 a:focus, :root:not([data-theme=light]) h4 a:hover, :root:not([data-theme=light]) h4 a:focus, :root:not([data-theme=light]) h5 a:hover, :root:not([data-theme=light]) h5 a:focus, :root:not([data-theme=light]) h6 a:hover, :root:not([data-theme=light]) h6 a:focus {
    color: var(--color--green-30);
    text-decoration-color: var(--color--green-20);
  }
  :root:not([data-theme=light]) a {
    color: var(--color--green-30);
    text-decoration-color: var(--color--green-20);
  }
  :root:not([data-theme=light]) a:hover, :root:not([data-theme=light]) a:focus {
    color: var(--color--green-20);
    text-decoration-color: var(--color--green-10);
  }
  :root:not([data-theme=light]) hr {
    background: var(--color--grey-60);
  }
  :root:not([data-theme=light]) img.border {
    border: solid 1px var(--color--grey-50);
  }
  :root:not([data-theme=light]) img.shadow {
    box-shadow: var(--shadowDark);
  }
  :root:not([data-theme=light]) blockquote {
    border-left-color: var(--color--green-40);
  }
  :root:not([data-theme=light]) table {
    --headBackgroundColor: var(--color--green-50);
    --headBorderColor: var(--color--grey-80);
    --cellBorderColor: var(--color--grey-70);
    --cellBackgroundColor: var(--color--grey-85);
    --alternateCellBackgroundColor: var(--color--grey-90);
    --rowHeadingBackgroundColor: var(--color--grey-75);
    --rowHeadingBorderColor: var(--color--grey-50);
    --alternateRowHeadingBackgroundColor: var(--color--grey-80);
  }
  :root:not([data-theme=light]) table thead {
    border-bottom-color: var(--color--grey-90);
  }
  :root:not([data-theme=light]) table thead tr > *:not(:last-child) {
    border-right-color: var(--color--green-80);
  }
  :root:not([data-theme=light]) table thead tr > * {
    background: var(--color--green-60);
  }
  :root:not([data-theme=light]) table tbody tr > th {
    color: var(--color--grey-3);
  }
  :root:not([data-theme=light]) table tbody tr:nth-of-type(even) th:hover, :root:not([data-theme=light]) table tbody tr:nth-of-type(even) td:hover, :root:not([data-theme=light]) table tbody tr th:hover, :root:not([data-theme=light]) table tbody tr td:hover {
    background: var(--color--green-80);
  }
  :root:not([data-theme=light]) table thead th code, :root:not([data-theme=light]) table caption code {
    background: var(--color--green-80);
    border-color: var(--color--green-40);
  }
  :root:not([data-theme=light]) table thead th .key {
    border-color: var(--color--black);
  }
  :root:not([data-theme=light]) .articleEmbed [role=region] {
    border-color: var(--color--grey-50);
    box-shadow: var(--shadowDark);
  }
  :root:not([data-theme=light]) ::selection {
    background: var(--color--green-60);
    color: #FFF;
  }
  :root:not([data-theme=light]) .pixelBox {
    --sh: var(--shadowDark);
  }
  :root:not([data-theme=light]) .siteHeader {
    color: var(--color--green-30);
  }
  :root:not([data-theme=light]) .siteHeader nav {
    border-bottom-color: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .siteHeader ul .siteHeader--logo a:hover, :root:not([data-theme=light]) .siteHeader ul .siteHeader--logo a:focus {
    color: var(--color--green-20);
  }
  :root:not([data-theme=light]) .siteHeader ul .siteHeader--primary a:hover, :root:not([data-theme=light]) .siteHeader ul .siteHeader--primary a:focus {
    color: var(--color--green-20);
  }
  :root:not([data-theme=light]) .siteHeader ul .siteHeader--primary__last::before {
    background: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .siteHeader ul .siteHeader--secondary a:hover, :root:not([data-theme=light]) .siteHeader ul .siteHeader--secondary a:focus, :root:not([data-theme=light]) .siteHeader ul .siteHeader--secondary button:hover, :root:not([data-theme=light]) .siteHeader ul .siteHeader--secondary button:focus, :root:not([data-theme=light]) .siteHeader ul .siteHeader--preference a:hover, :root:not([data-theme=light]) .siteHeader ul .siteHeader--preference a:focus, :root:not([data-theme=light]) .siteHeader ul .siteHeader--preference button:hover, :root:not([data-theme=light]) .siteHeader ul .siteHeader--preference button:focus {
    color: var(--color--green-20);
  }
  :root:not([data-theme=light]) .siteHeader ul .siteHeader--preference::before {
    background: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .breadcrumb ol li::before {
    border-color: var(--color--grey-10);
  }
  :root:not([data-theme=light]) .breadcrumb ol li:last-of-type {
    color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .breadcrumb ol li:last-of-type a {
    color: inherit;
  }
  :root:not([data-theme=light]) .homeAnimation--button {
    color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .homeAnimation--button:hover, :root:not([data-theme=light]) .homeAnimation--button:focus {
    color: var(--color--green-40);
  }
  :root:not([data-theme=light]) .homeAnimation--canvas[data-js=false] {
    background-image: url("/assets/static images/construction-static__dark.png");
  }
  :root:not([data-theme=light]) .articleFeatureImage {
    box-shadow: var(--shadowDark);
  }
  :root:not([data-theme=light]) .singleArticleContent .articleDetails {
    border-bottom-color: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .article {
    border-bottom-color: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .article .articleDetails {
    border-bottom-color: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .articlesFeed {
    border-top-color: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .articlesBrowse {
    --bg: var(--color--grey-85);
    --border: var(--color--grey-50);
  }
  :root:not([data-theme=light]) .articlePrevNext {
    border-top-color: var(--color--grey-60);
    color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .articleCallout {
    border-left-color: var(--color--green-40);
  }
  :root:not([data-theme=light]) .articleCallout .exclamation {
    background: var(--color--black);
    border-color: var(--color--green-40);
  }
  :root:not([data-theme=light]) .articleCallout .exclamation .icon {
    color: var(--color--green-40);
  }
  :root:not([data-theme=light]) .articleDetails {
    color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .articleTags li a {
    color: inherit;
    text-decoration-color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .articleTags li a:hover, :root:not([data-theme=light]) .articleTags li a:focus {
    color: var(--color--grey-10);
    text-decoration-color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .articleToc {
    --bg: var(--color--grey-85);
    --border: var(--color--grey-50);
    --shadowColor: 180,180,180;
  }
  :root:not([data-theme=light]) .articleVideo iframe {
    border-color: var(--color--grey-50);
    box-shadow: var(--shadowDark);
  }
  :root:not([data-theme=light]) .articleVideo--caption {
    color: var(--color--green-30);
  }
  :root:not([data-theme=light]) .key {
    background: var(--color--black);
    border-color: var(--color--grey-50);
    color: #99D6FF;
  }
  :root:not([data-theme=light]) .siteFooter {
    background: var(--color--plum-70);
  }
  :root:not([data-theme=light]) .siteFooter a {
    color: inherit;
    text-decoration-color: currentColor;
  }
  :root:not([data-theme=light]) .siteFooter a:hover {
    color: #FFF;
  }
  :root:not([data-theme=light]) .siteFooter a:focus {
    color: #FFF;
    outline-color: #FFF;
  }
  :root:not([data-theme=light]) .siteFooter--top, :root:not([data-theme=light]) .webring {
    border-bottom-color: var(--color--plum-40);
  }
  :root:not([data-theme=light]) .button {
    --border: var(--color--green-30);
    color: #FFF;
  }
  :root:not([data-theme=light]) .button:hover, :root:not([data-theme=light]) .button:focus {
    --bg: var(--color--green-50);
    --border: var(--color--green-40);
    color: #FFF;
  }
  :root:not([data-theme=light]) .button:active {
    --bg: var(--color--green-60);
    --border: var(--color--green-50);
  }
  :root:not([data-theme=light]) .button__small {
    --bg: var(--color--green-50);
    --border: var(--color--green-40);
  }
  :root:not([data-theme=light]) .button__small:hover, :root:not([data-theme=light]) .button__small:focus {
    --bg: var(--color--green-60);
    --border: var(--color--green-50);
  }
  :root:not([data-theme=light]) .button__small:active {
    --bg: var(--color--green-70);
    --border: var(--color--green-60);
  }
  :root:not([data-theme=light]) .button__xSmall {
    --border: var(--color--green-40);
    --sh: none;
  }
  :root:not([data-theme=light]) .button__xSmall:hover, :root:not([data-theme=light]) .button__xSmall:focus {
    --bg: var(--color--green-60);
    --border: var(--color--green-50);
  }
  :root:not([data-theme=light]) .button__xSmall:active {
    --bg: var(--color--green-70);
    --border: var(--color--green-60);
  }
  :root:not([data-theme=light]) .button__secondary {
    --bg: var(--color--grey-80);
    --border: var(--color--grey-50);
    color: #FFF;
  }
  :root:not([data-theme=light]) .button__secondary:hover, :root:not([data-theme=light]) .button__secondary:focus {
    --bg: var(--color--grey-70);
    --border: var(--color--grey-40);
  }
  :root:not([data-theme=light]) .button__secondary:active {
    --bg: var(--color--grey-60);
    --border: var(--color--grey-30);
  }
  :root:not([data-theme=light]) details div.pixelBox {
    --bg: var(--color--green-80);
    --border: var(--color--green-30);
  }
  :root:not([data-theme=light]) details ul li::marker, :root:not([data-theme=light]) details ol li::marker {
    color: var(--color--green-30);
  }
  :root:not([data-theme=light]) .themeFieldset {
    color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .themeFieldset input[type=radio] + label::before {
    background: var(--color--black);
    border-color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .themeFieldset input[type=radio] + label::after {
    background: var(--color--green-30);
  }
  :root:not([data-theme=light]) .themeFieldset input[type=radio]:hover + label::before {
    background: var(--color--grey-70);
  }
  :root:not([data-theme=light]) .themeFieldset input[type=radio]:active + label::before {
    background: var(--color--grey-60);
  }
  :root:not([data-theme=light]) .themeButton {
    color: var(--color--green-30);
  }
  :root:not([data-theme=light]) .themeButton:hover, :root:not([data-theme=light]) .themeButton:focus {
    color: var(--color--green-20);
  }
  :root:not([data-theme=light]) .themeDialogFieldset input[type=radio] + label {
    background: var(--color--grey-80);
    border-color: var(--color--grey-50);
  }
  :root:not([data-theme=light]) .themeDialogFieldset input[type=radio] + label::before {
    background: var(--color--grey-90);
    border-color: var(--color--grey-20);
  }
  :root:not([data-theme=light]) .themeDialogFieldset input[type=radio] + label::after {
    background: var(--color--green-30);
  }
  :root:not([data-theme=light]) .themeDialogFieldset input[type=radio]:hover + label, :root:not([data-theme=light]) .themeDialogFieldset input[type=radio]:focus + label {
    background: var(--color--grey-70);
    border-color: var(--color--grey-40);
  }
  :root:not([data-theme=light]) .themeDialogFieldset input[type=radio]:active + label {
    background: var(--color--grey-60);
    border-color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) .themeDialogFieldset input[type=radio]:checked + label {
    background: var(--color--green-80);
    border-color: var(--color--green-30);
    box-shadow: 0 0 0 4px var(--color--green-30);
  }
  :root:not([data-theme=light]) .modal--backdrop {
    background: rgba(0, 0, 0, 0.65);
  }
  :root:not([data-theme=light]) .modal--content {
    --bg: var(--color--grey-90);
    --border: var(--color--green-40);
    --shadowColor: 180,180,180;
    filter: drop-shadow(var(--shadowDark));
  }
  :root:not([data-theme=light]) .modal--closeButton {
    --border: var(--color--green-40);
  }
  :root:not([data-theme=light]) .modal--closeButton::before, :root:not([data-theme=light]) .modal--closeButton::after {
    box-shadow: var(--shadow);
  }
  :root:not([data-theme=light]) .modal--closeButton:hover, :root:not([data-theme=light]) .modal--closeButton:focus {
    --bg: var(--color--green-60);
    --border: var(--color--green-50);
  }
  :root:not([data-theme=light]) .modal--closeButton:active {
    --bg: var(--color--green-70);
    --border: var(--color--green-60);
  }
  :root:not([data-theme=light]) .modal .buttonRow {
    border-top-color: var(--color--grey-60);
  }
  :root:not([data-theme=light]) a.skipLink {
    color: #FFF;
    text-decoration-color: currentColor;
  }
  :root:not([data-theme=light]) .snippetBlock {
    background: var(--color--green-80);
    border-color: var(--color--grey-50);
    box-shadow: var(--shadowDark);
    color: #99D6FF;
  }
  :root:not([data-theme=light]) .snippetBlock--langIcon span {
    background: var(--color--green-30);
    color: var(--color--black);
  }
  :root:not([data-theme=light]) .snippetBlock--lineHighlights {
    --bg: var(--color--green-30);
    --bgO: .07;
    --border: var(--color--green-30);
  }
  :root:not([data-theme=light]) ::highlight(comment),
:root:not([data-theme=light]) ::highlight(prolog),
:root:not([data-theme=light]) ::highlight(doctype),
:root:not([data-theme=light]) ::highlight(cdata),
:root:not([data-theme=light]) ::highlight(punctuation) {
    color: var(--color--grey-30);
  }
  :root:not([data-theme=light]) ::highlight(property),
:root:not([data-theme=light]) ::highlight(tag),
:root:not([data-theme=light]) ::highlight(boolean),
:root:not([data-theme=light]) ::highlight(number),
:root:not([data-theme=light]) ::highlight(constant),
:root:not([data-theme=light]) ::highlight(symbol),
:root:not([data-theme=light]) ::highlight(deleted),
:root:not([data-theme=light]) ::highlight(function),
:root:not([data-theme=light]) ::highlight(class-name) {
    color: var(--color--green-30);
  }
  :root:not([data-theme=light]) ::highlight(selector),
:root:not([data-theme=light]) ::highlight(attr-name),
:root:not([data-theme=light]) ::highlight(string),
:root:not([data-theme=light]) ::highlight(char),
:root:not([data-theme=light]) ::highlight(builtin),
:root:not([data-theme=light]) ::highlight(inserted),
:root:not([data-theme=light]) ::highlight(parameter) {
    color: #FFADF9;
  }
  :root:not([data-theme=light]) ::highlight(operator),
:root:not([data-theme=light]) ::highlight(entity),
:root:not([data-theme=light]) ::highlight(url),
:root:not([data-theme=light]) ::highlight(atrule),
:root:not([data-theme=light]) ::highlight(attr-value),
:root:not([data-theme=light]) ::highlight(keyword),
:root:not([data-theme=light]) ::highlight(regex),
:root:not([data-theme=light]) ::highlight(important),
:root:not([data-theme=light]) ::highlight(variable) {
    color: #99D6FF;
  }
}
[data-theme=dark] {
  /* code snippets */
  /* end code snippets */
}
[data-theme=dark] {
  color-scheme: dark light;
  --outlineColor: var(--color--green-20);
}
[data-theme=dark] body {
  background: var(--color--grey-90);
  color: var(--color--grey-5);
}
[data-theme=dark] li::marker {
  color: var(--color--green-40);
}
[data-theme=dark] h1 > code, [data-theme=dark] h2 > code, [data-theme=dark] h3 > code, [data-theme=dark] h4 > code, [data-theme=dark] h5 > code, [data-theme=dark] h6 > code, [data-theme=dark] p > code, [data-theme=dark] blockquote > code, [data-theme=dark] li > code, [data-theme=dark] a > code, [data-theme=dark] table code, [data-theme=dark] li code {
  background: var(--color--green-80);
  border-color: var(--color--green-50);
  color: #99D6FF;
}
[data-theme=dark] h1 a, [data-theme=dark] h2 a, [data-theme=dark] h3 a, [data-theme=dark] h4 a, [data-theme=dark] h5 a, [data-theme=dark] h6 a {
  color: var(--color--green-40);
  text-decoration-color: var(--color--green-30);
}
[data-theme=dark] h1 a:hover, [data-theme=dark] h1 a:focus, [data-theme=dark] h2 a:hover, [data-theme=dark] h2 a:focus, [data-theme=dark] h3 a:hover, [data-theme=dark] h3 a:focus, [data-theme=dark] h4 a:hover, [data-theme=dark] h4 a:focus, [data-theme=dark] h5 a:hover, [data-theme=dark] h5 a:focus, [data-theme=dark] h6 a:hover, [data-theme=dark] h6 a:focus {
  color: var(--color--green-30);
  text-decoration-color: var(--color--green-20);
}
[data-theme=dark] a {
  color: var(--color--green-30);
  text-decoration-color: var(--color--green-20);
}
[data-theme=dark] a:hover, [data-theme=dark] a:focus {
  color: var(--color--green-20);
  text-decoration-color: var(--color--green-10);
}
[data-theme=dark] hr {
  background: var(--color--grey-60);
}
[data-theme=dark] img.border {
  border: solid 1px var(--color--grey-50);
}
[data-theme=dark] img.shadow {
  box-shadow: var(--shadowDark);
}
[data-theme=dark] blockquote {
  border-left-color: var(--color--green-40);
}
[data-theme=dark] table {
  --headBackgroundColor: var(--color--green-50);
  --headBorderColor: var(--color--grey-80);
  --cellBorderColor: var(--color--grey-70);
  --cellBackgroundColor: var(--color--grey-85);
  --alternateCellBackgroundColor: var(--color--grey-90);
  --rowHeadingBackgroundColor: var(--color--grey-75);
  --rowHeadingBorderColor: var(--color--grey-50);
  --alternateRowHeadingBackgroundColor: var(--color--grey-80);
}
[data-theme=dark] table thead {
  border-bottom-color: var(--color--grey-90);
}
[data-theme=dark] table thead tr > *:not(:last-child) {
  border-right-color: var(--color--green-80);
}
[data-theme=dark] table thead tr > * {
  background: var(--color--green-60);
}
[data-theme=dark] table tbody tr > th {
  color: var(--color--grey-3);
}
[data-theme=dark] table tbody tr:nth-of-type(even) th:hover, [data-theme=dark] table tbody tr:nth-of-type(even) td:hover, [data-theme=dark] table tbody tr th:hover, [data-theme=dark] table tbody tr td:hover {
  background: var(--color--green-80);
}
[data-theme=dark] table thead th code, [data-theme=dark] table caption code {
  background: var(--color--green-80);
  border-color: var(--color--green-40);
}
[data-theme=dark] table thead th .key {
  border-color: var(--color--black);
}
[data-theme=dark] .articleEmbed [role=region] {
  border-color: var(--color--grey-50);
  box-shadow: var(--shadowDark);
}
[data-theme=dark] ::selection {
  background: var(--color--green-60);
  color: #FFF;
}
[data-theme=dark] .pixelBox {
  --sh: var(--shadowDark);
}
[data-theme=dark] .siteHeader {
  color: var(--color--green-30);
}
[data-theme=dark] .siteHeader nav {
  border-bottom-color: var(--color--grey-60);
}
[data-theme=dark] .siteHeader ul .siteHeader--logo a:hover, [data-theme=dark] .siteHeader ul .siteHeader--logo a:focus {
  color: var(--color--green-20);
}
[data-theme=dark] .siteHeader ul .siteHeader--primary a:hover, [data-theme=dark] .siteHeader ul .siteHeader--primary a:focus {
  color: var(--color--green-20);
}
[data-theme=dark] .siteHeader ul .siteHeader--primary__last::before {
  background: var(--color--grey-60);
}
[data-theme=dark] .siteHeader ul .siteHeader--secondary a:hover, [data-theme=dark] .siteHeader ul .siteHeader--secondary a:focus, [data-theme=dark] .siteHeader ul .siteHeader--secondary button:hover, [data-theme=dark] .siteHeader ul .siteHeader--secondary button:focus, [data-theme=dark] .siteHeader ul .siteHeader--preference a:hover, [data-theme=dark] .siteHeader ul .siteHeader--preference a:focus, [data-theme=dark] .siteHeader ul .siteHeader--preference button:hover, [data-theme=dark] .siteHeader ul .siteHeader--preference button:focus {
  color: var(--color--green-20);
}
[data-theme=dark] .siteHeader ul .siteHeader--preference::before {
  background: var(--color--grey-60);
}
[data-theme=dark] .breadcrumb ol li::before {
  border-color: var(--color--grey-10);
}
[data-theme=dark] .breadcrumb ol li:last-of-type {
  color: var(--color--grey-30);
}
[data-theme=dark] .breadcrumb ol li:last-of-type a {
  color: inherit;
}
[data-theme=dark] .homeAnimation--button {
  color: var(--color--grey-30);
}
[data-theme=dark] .homeAnimation--button:hover, [data-theme=dark] .homeAnimation--button:focus {
  color: var(--color--green-40);
}
[data-theme=dark] .homeAnimation--canvas[data-js=false] {
  background-image: url("/assets/static images/construction-static__dark.png");
}
[data-theme=dark] .articleFeatureImage {
  box-shadow: var(--shadowDark);
}
[data-theme=dark] .singleArticleContent .articleDetails {
  border-bottom-color: var(--color--grey-60);
}
[data-theme=dark] .article {
  border-bottom-color: var(--color--grey-60);
}
[data-theme=dark] .article .articleDetails {
  border-bottom-color: var(--color--grey-60);
}
[data-theme=dark] .articlesFeed {
  border-top-color: var(--color--grey-60);
}
[data-theme=dark] .articlesBrowse {
  --bg: var(--color--grey-85);
  --border: var(--color--grey-50);
}
[data-theme=dark] .articlePrevNext {
  border-top-color: var(--color--grey-60);
  color: var(--color--grey-30);
}
[data-theme=dark] .articleCallout {
  border-left-color: var(--color--green-40);
}
[data-theme=dark] .articleCallout .exclamation {
  background: var(--color--black);
  border-color: var(--color--green-40);
}
[data-theme=dark] .articleCallout .exclamation .icon {
  color: var(--color--green-40);
}
[data-theme=dark] .articleDetails {
  color: var(--color--grey-30);
}
[data-theme=dark] .articleTags li a {
  color: inherit;
  text-decoration-color: var(--color--grey-30);
}
[data-theme=dark] .articleTags li a:hover, [data-theme=dark] .articleTags li a:focus {
  color: var(--color--grey-10);
  text-decoration-color: var(--color--grey-30);
}
[data-theme=dark] .articleToc {
  --bg: var(--color--grey-85);
  --border: var(--color--grey-50);
  --shadowColor: 180,180,180;
}
[data-theme=dark] .articleVideo iframe {
  border-color: var(--color--grey-50);
  box-shadow: var(--shadowDark);
}
[data-theme=dark] .articleVideo--caption {
  color: var(--color--green-30);
}
[data-theme=dark] .key {
  background: var(--color--black);
  border-color: var(--color--grey-50);
  color: #99D6FF;
}
[data-theme=dark] .siteFooter {
  background: var(--color--plum-70);
}
[data-theme=dark] .siteFooter a {
  color: inherit;
  text-decoration-color: currentColor;
}
[data-theme=dark] .siteFooter a:hover {
  color: #FFF;
}
[data-theme=dark] .siteFooter a:focus {
  color: #FFF;
  outline-color: #FFF;
}
[data-theme=dark] .siteFooter--top, [data-theme=dark] .webring {
  border-bottom-color: var(--color--plum-40);
}
[data-theme=dark] .button {
  --border: var(--color--green-30);
  color: #FFF;
}
[data-theme=dark] .button:hover, [data-theme=dark] .button:focus {
  --bg: var(--color--green-50);
  --border: var(--color--green-40);
  color: #FFF;
}
[data-theme=dark] .button:active {
  --bg: var(--color--green-60);
  --border: var(--color--green-50);
}
[data-theme=dark] .button__small {
  --bg: var(--color--green-50);
  --border: var(--color--green-40);
}
[data-theme=dark] .button__small:hover, [data-theme=dark] .button__small:focus {
  --bg: var(--color--green-60);
  --border: var(--color--green-50);
}
[data-theme=dark] .button__small:active {
  --bg: var(--color--green-70);
  --border: var(--color--green-60);
}
[data-theme=dark] .button__xSmall {
  --border: var(--color--green-40);
  --sh: none;
}
[data-theme=dark] .button__xSmall:hover, [data-theme=dark] .button__xSmall:focus {
  --bg: var(--color--green-60);
  --border: var(--color--green-50);
}
[data-theme=dark] .button__xSmall:active {
  --bg: var(--color--green-70);
  --border: var(--color--green-60);
}
[data-theme=dark] .button__secondary {
  --bg: var(--color--grey-80);
  --border: var(--color--grey-50);
  color: #FFF;
}
[data-theme=dark] .button__secondary:hover, [data-theme=dark] .button__secondary:focus {
  --bg: var(--color--grey-70);
  --border: var(--color--grey-40);
}
[data-theme=dark] .button__secondary:active {
  --bg: var(--color--grey-60);
  --border: var(--color--grey-30);
}
[data-theme=dark] details div.pixelBox {
  --bg: var(--color--green-80);
  --border: var(--color--green-30);
}
[data-theme=dark] details ul li::marker, [data-theme=dark] details ol li::marker {
  color: var(--color--green-30);
}
[data-theme=dark] .themeFieldset {
  color: var(--color--grey-30);
}
[data-theme=dark] .themeFieldset input[type=radio] + label::before {
  background: var(--color--black);
  border-color: var(--color--grey-30);
}
[data-theme=dark] .themeFieldset input[type=radio] + label::after {
  background: var(--color--green-30);
}
[data-theme=dark] .themeFieldset input[type=radio]:hover + label::before {
  background: var(--color--grey-70);
}
[data-theme=dark] .themeFieldset input[type=radio]:active + label::before {
  background: var(--color--grey-60);
}
[data-theme=dark] .themeButton {
  color: var(--color--green-30);
}
[data-theme=dark] .themeButton:hover, [data-theme=dark] .themeButton:focus {
  color: var(--color--green-20);
}
[data-theme=dark] .themeDialogFieldset input[type=radio] + label {
  background: var(--color--grey-80);
  border-color: var(--color--grey-50);
}
[data-theme=dark] .themeDialogFieldset input[type=radio] + label::before {
  background: var(--color--grey-90);
  border-color: var(--color--grey-20);
}
[data-theme=dark] .themeDialogFieldset input[type=radio] + label::after {
  background: var(--color--green-30);
}
[data-theme=dark] .themeDialogFieldset input[type=radio]:hover + label, [data-theme=dark] .themeDialogFieldset input[type=radio]:focus + label {
  background: var(--color--grey-70);
  border-color: var(--color--grey-40);
}
[data-theme=dark] .themeDialogFieldset input[type=radio]:active + label {
  background: var(--color--grey-60);
  border-color: var(--color--grey-30);
}
[data-theme=dark] .themeDialogFieldset input[type=radio]:checked + label {
  background: var(--color--green-80);
  border-color: var(--color--green-30);
  box-shadow: 0 0 0 4px var(--color--green-30);
}
[data-theme=dark] .modal--backdrop {
  background: rgba(0, 0, 0, 0.65);
}
[data-theme=dark] .modal--content {
  --bg: var(--color--grey-90);
  --border: var(--color--green-40);
  --shadowColor: 180,180,180;
  filter: drop-shadow(var(--shadowDark));
}
[data-theme=dark] .modal--closeButton {
  --border: var(--color--green-40);
}
[data-theme=dark] .modal--closeButton::before, [data-theme=dark] .modal--closeButton::after {
  box-shadow: var(--shadow);
}
[data-theme=dark] .modal--closeButton:hover, [data-theme=dark] .modal--closeButton:focus {
  --bg: var(--color--green-60);
  --border: var(--color--green-50);
}
[data-theme=dark] .modal--closeButton:active {
  --bg: var(--color--green-70);
  --border: var(--color--green-60);
}
[data-theme=dark] .modal .buttonRow {
  border-top-color: var(--color--grey-60);
}
[data-theme=dark] a.skipLink {
  color: #FFF;
  text-decoration-color: currentColor;
}
[data-theme=dark] .snippetBlock {
  background: var(--color--green-80);
  border-color: var(--color--grey-50);
  box-shadow: var(--shadowDark);
  color: #99D6FF;
}
[data-theme=dark] .snippetBlock--langIcon span {
  background: var(--color--green-30);
  color: var(--color--black);
}
[data-theme=dark] .snippetBlock--lineHighlights {
  --bg: var(--color--green-30);
  --bgO: .07;
  --border: var(--color--green-30);
}
[data-theme=dark] ::highlight(comment),
[data-theme=dark] ::highlight(prolog),
[data-theme=dark] ::highlight(doctype),
[data-theme=dark] ::highlight(cdata),
[data-theme=dark] ::highlight(punctuation) {
  color: var(--color--grey-30);
}
[data-theme=dark] ::highlight(property),
[data-theme=dark] ::highlight(tag),
[data-theme=dark] ::highlight(boolean),
[data-theme=dark] ::highlight(number),
[data-theme=dark] ::highlight(constant),
[data-theme=dark] ::highlight(symbol),
[data-theme=dark] ::highlight(deleted),
[data-theme=dark] ::highlight(function),
[data-theme=dark] ::highlight(class-name) {
  color: var(--color--green-30);
}
[data-theme=dark] ::highlight(selector),
[data-theme=dark] ::highlight(attr-name),
[data-theme=dark] ::highlight(string),
[data-theme=dark] ::highlight(char),
[data-theme=dark] ::highlight(builtin),
[data-theme=dark] ::highlight(inserted),
[data-theme=dark] ::highlight(parameter) {
  color: #FFADF9;
}
[data-theme=dark] ::highlight(operator),
[data-theme=dark] ::highlight(entity),
[data-theme=dark] ::highlight(url),
[data-theme=dark] ::highlight(atrule),
[data-theme=dark] ::highlight(attr-value),
[data-theme=dark] ::highlight(keyword),
[data-theme=dark] ::highlight(regex),
[data-theme=dark] ::highlight(important),
[data-theme=dark] ::highlight(variable) {
  color: #99D6FF;
}

/* end dark mode styling */

/*# sourceMappingURL=styles.css.map */