@layer reset, theme, typography, layout, components, utilities;
@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    font: inherit;
    margin: 0;
    padding: 0;
  }

  html {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    hanging-punctuation: first last;
    line-sizing: normal;
  }

  @media (prefers-color-scheme: dark) {
    html {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }

  body {
    text-rendering: optimizespeed;
    min-height: 100svh;
    font-family: system-ui, sans-serif;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    shape-margin: 1rem;
    max-width: 100%;
    display: block;
  }

  img, svg, video, canvas {
    height: auto;
  }

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

  audio {
    width: 100%;
  }

  picture {
    display: contents;
  }

  source {
    display: none;
  }

  img, picture, video {
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-content: center;
    font-style: italic;
  }

  img {
    border-style: none;
  }

  svg {
    overflow: hidden;
  }

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

  [type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  body {
    text-wrap: pretty;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: initial;
  }

  p {
    max-width: 75ch;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.17em;
  }

  h4 {
    font-size: 1em;
  }

  h5 {
    font-size: .83em;
  }

  h6 {
    font-size: .67em;
  }

  h1 {
    margin: .67em 0;
  }

  pre {
    white-space: pre-wrap;
  }

  hr {
    color: inherit;
    border-style: solid;
    border-width: 1px 0 0;
    height: 0;
    overflow: visible;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }

    :has(:target) {
      scroll-padding-top: 3rem;
    }
  }

  :-webkit-any(a, button) * {
    pointer-events: none;
  }

  :is(a, button) * {
    pointer-events: none;
  }

  [hidden] {
    display: none;
  }

  ul[role="list"], ol[role="list"] {
    list-style: none;
  }

  textarea, input {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: inherit;
  }
}

@font-face {
  font-family: Big Shoulders Text;
  src: url("/assets/fonts/bigshoulderstext_20240519_variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: bst-fallback;
  src: local(Arial);
  ascent-override: 98.4%;
  descent-override: 21.3%;
  line-gap-override: 0%;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url("/assets/fonts/montserrat_20240519_variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Montserrat;
  src: url("/assets/fonts/montserrat-italic_20240519_variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer theme {
  :root {
    --color-bg-primary: #060606;
    --color-bg-tint: #1f1f1f;
    --color-text: #f2f2f2;
    --color-accent: #e56509;
    --color-highlight: #f6bb43;
    --color-bg-primary-alt: #30205c;
    --color-text-alt: #0a0a0a;
    --color-accent-alt: #912593;
    --color-highlight-alt: #c825ca;
    --color-gray: #626567;
    --star-svg: url("/assets/images/diamond-yellow.svg");
    --star-svg-dark: url("/assets/images/diamond-dark.svg");
    --star-size: 7px;
    --filter-dark-glass: blur(15px) brightness(.5);
    --gradient-border-width: 2px;
    --gradient-color-a: var(--color-highlight);
    --gradient-color-b: var(--color-accent);
    --gradient-border: linear-gradient(to right top,
			var(--gradient-color-a),
			var(--gradient-color-b) 30%);
    --gradient-centered-spacing-left: 20% calc(50% - min(200px, 20vw));
    --gradient-centered-spacing-right: calc(50% + min(200px, 20vw)) 80%;
    --gradient-centered: linear-gradient(to right,
			transparent,
			var(--gradient-color-b) var(--gradient-centered-spacing-left),
			var(--gradient-color-a),
			var(--gradient-color-b) var(--gradient-centered-spacing-right),
			transparent);
    --gradient-from-side-direction: to right;
    --gradient-from-side: linear-gradient(var(--gradient-from-side-direction),
			var(--gradient-color-a),
			var(--gradient-color-b) min(200px, 20vw) 80%,
			transparent);
    --transition-time: .3s;
  }

  body, dialog {
    background-color: var(--color-bg-primary);
    color: var(--color-text);
  }

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

  #page-header, #page-footer {
    background-color: var(--color-bg-primary);
  }

  #page-header {
    box-shadow: 0 5px 10px #00000040;
  }

  #page-header, hr:not([class]), hr.dark, .bottom-decoration {
    min-height: var(--gradient-border-width);
    border-image-slice: 1;
    border-image-source: var(--gradient-centered);
    border-image-width: 0 0 var(--gradient-border-width);
    position: relative;
  }

  :is(#page-header, hr:not([class]), hr.dark, .bottom-decoration):after {
    --translateY: calc(50% - (var(--gradient-border-width) / 2));
    content: "";
    translate: var(--translateX, 0) var(--translateY);
    width: var(--star-size);
    height: var(--star-size);
    background-color: var(--color-highlight);
    position: absolute;
    bottom: 0;
    right: 50%;
    rotate: 45deg;
  }

  :is(#page-header, hr:not([class]), hr.dark, .bottom-decoration).decorate-from-left {
    border-image-source: var(--gradient-from-side);
  }

  :is(#page-header, hr:not([class]), hr.dark, .bottom-decoration).decorate-from-left:after {
    --translateX: -5px;
    right: unset;
    left: 0;
  }

  :is(#page-header, hr:not([class]), hr.dark, .bottom-decoration).dark {
    --gradient-color-a: var(--color-bg-tint);
    --gradient-color-b: var(--color-bg-tint);
    --gradient-centered: linear-gradient(to right,
				transparent,
				var(--gradient-color-b) var(--gradient-centered-spacing-left),
				var(--gradient-color-a),
				var(--gradient-color-b) var(--gradient-centered-spacing-right),
				transparent);
  }

  :is(#page-header, hr:not([class]), hr.dark, .bottom-decoration).dark:after {
    background-color: var(--color-bg-tint);
  }

  hr:not([class]), hr.dark {
    width: 100%;
  }

  aside.separator-dark {
    --flow-space: 1.875rem;
    border-top: 1px solid var(--color-bg-tint);
    position: relative;
  }

  aside.separator-dark:after {
    content: "";
    background-color: var(--color-bg-tint);
    width: var(--star-size);
    height: var(--star-size);
    position: absolute;
    top: 0;
    bottom: auto;
    left: auto;
    right: 50%;
    translate: 0 -50%;
    rotate: 45deg;
  }

  .gradient-border {
    border: none;
    border-image-slice: 1;
    border-image-source: var(--gradient-border);
    border-image-width: 1px;
  }

  .inset-gradient-border {
    z-index: 0;
    position: relative;
  }

  .inset-gradient-border:after {
    content: "";
    z-index: 2;
    pointer-events: none;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right top, var(--color-highlight), var(--color-accent) 30%);
    border-image-width: 1px;
    border-image-outset: -10px;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .left-decoration {
    grid-template-columns: [text-start] auto[text-end decoration-start] 1fr[decoration-end];
    gap: .5em;
    display: grid;
  }

  .left-decoration:before {
    grid-area: 1 / decoration;
    align-self: center;
  }

  .left-decoration:after {
    grid-area: 1 / decoration;
    align-self: center;
  }

  .left-decoration:before {
    content: "";
    width: var(--star-size);
    height: var(--star-size);
    background-color: var(--color-highlight);
    rotate: 45deg;
  }

  .left-decoration:after {
    content: "";
    height: var(--gradient-border-width);
    border-image-source: var(--gradient-from-side);
    border-image-slice: 1;
    border-image-width: 0 0 var(--gradient-border-width);
    width: 100%;
    display: block;
  }

  .site-nav li.separator-decoration {
    align-content: center;
    display: flex;
  }

  .site-nav li.separator-decoration:after {
    content: "";
    width: var(--star-size);
    height: var(--star-size);
    background-color: var(--color-highlight);
    display: inline-block;
    rotate: 45deg;
  }

  .side-stars {
    --w: 145px;
    --star-offset: 5px;
    --gradient-centered-spacing-left: 10% 30%;
    --gradient-centered-spacing-right: 70% 90%;
    border-image-source: var(--gradient-centered);
    border-image-slice: 0 50%;
    border-image-width: calc(50% - var(--gradient-border-width)/2) var(--w);
    border-image-outset: 0 calc(var(--w) - var(--star-offset));
    flex-flow: row;
    align-items: center;
    gap: .5em;
    display: flex;
  }

  .side-stars:before {
    content: "";
    width: var(--star-size);
    height: var(--star-size);
    background-color: var(--color-highlight);
    rotate: 45deg;
  }

  .side-stars:after {
    content: "";
    width: var(--star-size);
    height: var(--star-size);
    background-color: var(--color-highlight);
    rotate: 45deg;
  }

  .side-stars.no-trails {
    border-image-source: none;
  }

  #footer-nav > div h3 {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--gradient-color-b) 40px, transparent 40px);
    border-image-width: 0 0 3px;
  }

  blockquote:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-left: 3px solid var(--color-accent-alt);
  }

  blockquote:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right: 3px solid var(--color-accent-alt);
  }

  blockquote:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right: 3px solid var(--color-accent-alt);
  }

  a {
    color: currentColor;
    text-underline-offset: .4ex;
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
    text-decoration-thickness: .2ex;
  }

  a:where(:hover, :focus, :focus-within) {
    color: var(--color-text);
  }

  .svg-icon.mono-color {
    fill: currentColor;
  }

  .icon-link {
    color: inherit;
  }

  .double-border {
    outline-offset: var(--db-offset, -4px);
    border: 1px solid;
    outline: 1px solid;
  }

  form {
    accent-color: var(--color-accent);
  }

  form select {
    color: currentColor;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-accent);
    padding: .75ch 1.5ch;
  }

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

  @keyframes parallax {
    to {
      transform: translateY(calc(var(--parallax-speed, 0) * 10vh));
    }
  }

  @keyframes dolly {
    to {
      height: var(--dolly-end, 10vh);
    }
  }

  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  @keyframes zoom-in {
    to {
      scale: var(--zoom-final, 3);
    }
  }

  @keyframes jump-in {
    from {
      transform: translateY(100px);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes slide-in {
    from {
      transform: translateX(var(--slide-in-start, 100%));
    }

    to {
      transform: translateX(0);
    }
  }
}

@layer typography {
  :root {
    --font-base: Montserrat, Avenir, Corbel, "URW Gothic", source-sans-pro, sans-serif;
    --font-display: "Big Shoulders Text", bst-fallback, system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;
    --fs-step-sm: clamp(.833rem, .791rem + .168vw, .938rem);
    --fs-step-0: clamp(1rem, .95rem + .2vw, 1.125rem);
    --fs-step-1: clamp(1.2rem, 1.082rem + .474vw, 1.496rem);
    --fs-step-2: clamp(1.44rem, 1.22rem + .88vw, 1.99rem);
    --fs-step-3: clamp(1.728rem, 1.36rem + 1.47vw, 2.647rem);
    --fs-step-4: clamp(2.074rem, 1.496rem + 2.314vw, 3.52rem);
    --fs-step-5: clamp(2.488rem, 1.61rem + 3.51vw, 4.682rem);
    --fs-step-xl: clamp(2.986rem, 1.69rem + 5.186vw, 6.227rem);
    font-weight: normal;
  }

  body {
    font-size: var(--fs-step-0);
    line-height: 1.4;
  }

  h4, .h4-like {
    font-size: var(--fs-step-1);
    line-height: 1.4;
  }

  h3, .h3-like {
    font-size: var(--fs-step-2);
    line-height: 1.3;
  }

  h2, .h2-like {
    font-size: var(--fs-step-3);
    line-height: 1.2;
  }

  h1, .h1-like {
    font-size: var(--fs-step-4);
    line-height: 1.1;
  }

  .sm-text {
    font-size: var(--fs-step-sm);
    line-height: 1.6;
  }

  .xl-text {
    font-size: var(--fs-step-xl);
    line-height: 1;
  }

  body {
    font-family: var(--font-base);
    font-weight: 400;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 200;
  }

  :is(h1, h2, h3, h4) a {
    color: inherit;
    text-decoration-thickness: .1ex;
    display: inline-block;
  }

  :is(h1, h2, h3, h4) a:not(:where(:hover, :focus, :focus-within)) {
    text-decoration: none;
  }

  h4 {
    font-weight: 300;
  }

  hgroup p {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 200;
    font-size: var(--fs-step-1);
    line-height: 1.4;
  }

  hgroup:has(h1) {
    font-weight: 400;
  }

  hgroup:has(h1) p {
    font-size: var(--fs-step-2);
    line-height: 1.3;
  }

  p, ol, ul, dl, address {
    width: min(70ch, 100%);
  }

  nav :is(p, ol, ul, dl, address) {
    width: unset;
  }

  blockquote {
    font-style: italic;
    font-size: var(--fs-step-1);
    max-width: 50ch;
  }

  address {
    line-height: 1.4;
  }

  .flow > aside {
    margin-top: var(--flow-space, 1rem);
  }

  :-webkit-any(.flow, #page-content, #article-content, ul, ol, td) > * + * {
    margin-top: var(--flow-space, 1rem);
  }

  nav :is(:-webkit-any(.flow, #page-content, #article-content, ul, ol, td) > * + *) {
    margin-top: unset;
  }

  :is(.flow, #page-content, #article-content, ul, ol, td) > * + * {
    margin-top: var(--flow-space, 1rem);
  }

  nav :is(:is(.flow, #page-content, #article-content, ul, ol, td) > * + *) {
    margin-top: unset;
  }

  li > :-webkit-any(ul, ol) {
    margin-top: var(--flow-space, 1rem);
  }

  nav :is(li > :-webkit-any(ul, ol)) {
    margin-top: unset;
  }

  li > :is(ul, ol) {
    margin-top: var(--flow-space, 1rem);
  }

  nav :is(li > :is(ul, ol)) {
    margin-top: unset;
  }

  nav :is(.flow > aside) {
    margin-top: unset;
  }

  :-webkit-any(h1, h2, h3, h4) + * {
    --flow-space: .5rem;
  }

  :is(h1, h2, h3, h4) + * {
    --flow-space: .5rem;
  }

  :-webkit-any(ul, ol) > * {
    --flow-space: .5rem;
  }

  :is(ul, ol) > * {
    --flow-space: .5rem;
  }

  :-webkit-any(h1, h2, h3, h4, blockquote) {
    --flow-space: max(1.5rem, 1em);
  }

  :is(h1, h2, h3, h4, blockquote) {
    --flow-space: max(1.5rem, 1em);
  }

  h2 + h3 {
    --flow-space: unset;
  }

  :is(.lede, .article-page #page-content > p:first-of-type) {
    font-size: var(--fs-step-1);
    font-style: italic;
  }

  :is(.lede, .article-page #page-content > p:first-of-type) + * {
    --flow-space: 2em;
  }

  strong, .bold {
    font-weight: bold;
  }

  em, .italic {
    font-style: italic;
  }

  .fine-print {
    font-size: smaller;
  }

  p code {
    background-color: var(--color-bg-primary-alt);
  }

  pre:has(code) {
    background-color: var(--color-bg-primary-alt);
  }

  code {
    font-family: var(--font-mono);
    font-style: normal;
  }

  p :is(code) {
    padding-left: .2em;
    padding-right: .2em;
    display: inline-block;
  }

  pre:has(code) {
    padding: .25em .5em;
  }

  dd:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 1em;
  }

  dd:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 1em;
  }

  dd:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 1em;
  }

  :-webkit-any(ul, ol):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 1em;
  }

  :is(ul, ol):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 1em;
  }

  :-webkit-any(ul, ol):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 1em;
  }

  :is(ul, ol):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 1em;
  }

  :-webkit-any(ul, ol) :-webkit-any(ul, ol):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 2em;
  }

  :is(ul, ol) :is(ul, ol):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 2em;
  }

  :-webkit-any(ul, ol) :-webkit-any(ul, ol):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 2em;
  }

  :is(ul, ol) :is(ul, ol):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 2em;
  }

  :-webkit-any(ul, ol) :-webkit-any(ul, ol):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 2em;
  }

  :is(ul, ol) :is(ul, ol):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 2em;
  }

  :-webkit-any(ul, ol) :-webkit-any(ul, ol):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 2em;
  }

  :is(ul, ol) :is(ul, ol):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 2em;
  }

  ul:not([class]), ul.default-markers {
    list-style-type: "⬩";
  }

  :is(ul:not([class]), ul.default-markers) li:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: .5em;
  }

  :is(ul:not([class]), ul.default-markers) li:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: .5em;
  }

  :is(ul:not([class]), ul.default-markers) li:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: .5em;
  }

  :is(ul:not([class]), ul.default-markers) li::marker {
    font-family: var(--font-mono);
    font-size: 1em;
  }

  ol {
    list-style-type: decimal;
  }

  ol > li > ol {
    list-style-type: lower-roman;
  }

  ol > li > ol > li > ol {
    list-style-type: lower-latin;
  }

  ol > li > ol > li > ol ::marker {
    font-family: var(--font-mono);
  }

  dt {
    font-weight: bold;
  }

  dt:not(:first-of-type) {
    margin-top: var(--flow-space, 1rem);
  }

  a:not(.icon-link) .svg-icon {
    --size: .7em;
    display: inline-block;
  }

  #page-header, #page-footer {
    font-size: 13px;
    font-weight: 600;
  }

  #footer-nav {
    font-weight: 600;
  }

  #footer-nav > div h3 {
    font-size: var(--fs-step-1);
    font-weight: 600;
  }

  table thead {
    font-family: var(--font-display);
    text-transform: uppercase;
    background-color: #ffffff26;
    font-weight: 600;
  }

  table tbody tr:nth-child(2n) {
    background-color: #ffffff0d;
  }
}

@layer layout {
  :root {
    --edge-gap: 1rem;
    --_full-width: 100% - (var(--edge-gap) * 2);
    --_article-max-width: 940px;
    --_content-max-width: 1200px;
    --article-width: min(var(--_article-max-width), var(--_full-width));
    --_content-width: min(var(--_content-max-width), var(--_full-width));
    --content-side-width: calc((var(--_content-width) - var(--article-width)) / 2);
    --content-gap: 1em;
  }

  body {
    grid-template-columns: var(--edge-gap) [full-width-start] 1fr
			[content-start] var(--content-side-width)
			[article-start] var(--article-width)
			[article-end] var(--content-side-width)
			[content-end] 1fr
			[full-width-end] var(--edge-gap);
    grid-template-rows: [header-start] auto[header-end content-start] 1fr[content-end footer-start] auto[footer-end];
    display: grid;
    position: relative;
  }

  body > :-webkit-any(header, main, footer, aside, div, section) {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    width: 100%;
    display: grid;
  }

  body > :is(header, main, footer, aside, div, section) {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    width: 100%;
    display: grid;
  }

  #page-header {
    grid-row: header;
  }

  #page-content {
    grid-row: content;
  }

  #page-footer {
    grid-row: footer;
  }

  blockquote {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
  }

  blockquote:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 1em;
    padding-right: 0;
  }

  blockquote:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 0;
    padding-right: 1em;
  }

  blockquote:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 0;
    padding-right: 1em;
  }

  table {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    overflow-x: auto;
  }

  table, thead {
    border: 1px solid var(--color-bg-tint);
  }

  th, td {
    vertical-align: top;
    padding: .25rem .75rem;
  }

  td {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  #page-content > * {
    grid-column: content;
  }

  #page-content > picture > img {
    grid-column: content;
  }

  #page-content > :-webkit-any(section, header, footer, aside) {
    grid-column: 1 / -1;
  }

  #page-content > :-webkit-any(section, header, footer, aside):has( > :where(:first-child)) {
    grid-template-columns: subgrid;
    display: grid;
  }

  #page-content > :-webkit-any(section, header, footer, aside):has( > :where(:first-child)) > * {
    grid-column: content;
  }

  #page-content > :-webkit-any(section, header, footer, aside):has( > :where(:first-child)) > picture > img {
    grid-column: content;
  }

  #page-content > :is(section, header, footer, aside) {
    grid-column: 1 / -1;
  }

  #page-content > :is(section, header, footer, aside):has( > :where(:first-child)) {
    grid-template-columns: subgrid;
    display: grid;
  }

  #page-content > :is(section, header, footer, aside):has( > :where(:first-child)) > * {
    grid-column: content;
  }

  #page-content > :is(section, header, footer, aside):has( > :where(:first-child)) > picture > img {
    grid-column: content;
  }

  #page-content .to-edge {
    grid-column: 1 / -1;
  }

  #page-content .full-width {
    grid-column: full-width;
  }

  #page-content .col-content {
    grid-column: content;
  }

  #page-content .col-article {
    grid-column: article;
  }

  #page-content {
    grid-auto-rows: min-content;
  }

  #page-header, #page-footer {
    width: 100%;
  }

  :is(#page-header, #page-footer) a {
    color: inherit;
    gap: .5ch;
    text-decoration: none;
    display: inline-flex;
  }

  :is(#page-header, #page-footer) a .svg-icon {
    --size: 1em;
  }

  :is(#page-header, #page-footer) > nav {
    flex-grow: 1;
    gap: .5em 1em;
  }

  :is(#page-header, #page-footer) #main-nav li:has( > a) a {
    transition: color var(--transition-time) ease;
  }

  :is(#page-header, #page-footer) #main-nav li:has( > a) a:where([aria-current]) {
    color: var(--color-highlight);
  }

  :is(#page-header, #page-footer) #main-nav li:has( > a):where(:hover, :focus, :focus-within) a {
    color: var(--color-accent);
  }

  :is(#page-header, #page-footer) #footer-nav li:has( > a) a {
    transition: color var(--transition-time) ease;
  }

  :is(#page-header, #page-footer) #footer-nav li:has( > a) a:where([aria-current]) {
    color: var(--color-highlight);
  }

  :is(#page-header, #page-footer) #footer-nav li:has( > a):where(:hover, :focus, :focus-within) a {
    color: var(--color-accent);
  }

  #page-footer {
    --_size: 1.875rem;
    --gap-spacing: 1.25rem;
    grid-template-rows: repeat(3, auto);
    row-gap: 3.75rem;
    padding-top: 90px;
  }

  #page-footer > * {
    grid-column: content;
  }

  #page-footer .footer-row {
    flex-flow: wrap;
    row-gap: 3.75rem;
    display: flex;
  }

  #page-footer .footer-row:first-child {
    justify-content: space-between;
  }

  #page-footer .footer-row:nth-child(2) {
    column-gap: 3.75rem;
  }

  #page-footer #footer-nav {
    gap: 3.125rem;
  }

  #page-footer #footer-nav > div h3 {
    padding-bottom: var(--gap-spacing);
  }

  #page-footer #footer-nav > div menu {
    --item-padding: calc(var(--gap-spacing) / 2);
    align-items: start;
    gap: 0;
    margin-top: var(--item-padding);
  }

  #page-footer #footer-nav > div menu li {
    width: 100%;
  }

  #page-footer #footer-nav > div menu li a {
    padding-block: var(--item-padding);
    width: 100%;
  }

  #page-footer #social-links {
    gap: var(--gap-spacing);
    flex-grow: 1;
  }

  #page-footer #social-links li {
    display: contents;
  }

  #page-footer #social-links .svg-icon {
    --size: var(--_size);
    transition: fill var(--transition-time) ease;
  }

  li:where(:hover, :focus, :focus-within) :is(#page-footer #social-links .svg-icon) {
    fill: var(--color-accent);
  }

  #page-footer .company-wordmark {
    margin-left: auto;
    margin-right: auto;
  }

  #page-footer .company-wordmark svg {
    width: auto;
    height: var(--_size);
  }

  #page-footer .cr {
    text-wrap: balance;
    text-align: center;
    opacity: .5;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  #page-header {
    z-index: 999;
    padding: var(--edge-gap);
    gap: 1em;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  #page-header > nav {
    grid-column: full-width;
    align-items: center;
    position: relative;
  }

  #page-header > nav .skip-link {
    text-align: center;
    clip-path: rect(0 0 0 0);
    transition: transform .3s;
    position: absolute;
    left: 50%;
    transform: translateY(-200%);
  }

  #page-header > nav .skip-link:focus {
    clip-path: unset;
    transform: translateY(0%);
  }

  #page-header > nav :-webkit-any(#site-home, .site-nav) {
    align-items: stretch;
    display: flex;
  }

  #page-header > nav :is(#site-home, .site-nav) {
    align-items: stretch;
    display: flex;
  }

  #page-header > nav .site-nav {
    flex-grow: 1;
    align-self: stretch;
    column-gap: 1.875rem;
  }

  #page-header > nav #site-home svg {
    align-self: center;
    width: auto;
    height: 25px;
  }

  #page-header > nav .company-wordmark svg {
    align-self: center;
    width: auto;
    height: 25px;
  }

  #page-header > nav #search-link svg {
    --size: 42px;
  }

  #page-header > nav #site-home svg {
    --size: 42px;
    transition: filter var(--transition-time) ease;
  }

  #site-home:where(:hover, :focus, :focus-within) :is(#page-header > nav #site-home svg) {
    filter: saturate(0) contrast(0) brightness(2);
  }

  #search-link:not(:hover, :focus, :focus-within) :is(#page-header > nav #site-home svg) {
    filter: saturate(0) contrast(0) brightness(2);
  }

  #page-header > nav #search-link svg {
    --size: 42px;
    transition: filter var(--transition-time) ease;
  }

  #site-home:where(:hover, :focus, :focus-within) :is(#page-header > nav #search-link svg) {
    filter: saturate(0) contrast(0) brightness(2);
  }

  #search-link:not(:hover, :focus, :focus-within) :is(#page-header > nav #search-link svg) {
    filter: saturate(0) contrast(0) brightness(2);
  }

  #page-header > nav .hamburger-menu {
    --size: 1.5em;
    fill: currentColor;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  #page-header > nav .hamburger-menu:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-left: auto;
  }

  #page-header > nav .hamburger-menu:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: auto;
  }

  #page-header > nav .hamburger-menu:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    margin-right: auto;
  }

  #page-header > nav .hamburger-menu:where(:hover, :focus, :focus-within) {
    fill: var(--color-text);
  }

  #page-header > nav #main-nav-toggle {
    all: unset;
  }

  @media screen and not (max-width: 1200px) {
    #page-header > nav .hamburger-menu {
      display: none;
    }

    #page-header > nav #main-nav {
      margin-left: 2.5rem;
      margin-right: 2.5rem;
    }
  }

  @media screen and (max-width: 650px) {
    #page-header > nav:has(#main-nav-toggle:not(:checked)) .company-wordmark {
      display: none !important;
    }

    #page-header > nav:has(#main-nav-toggle:not(:checked)) #search-link {
      display: none !important;
    }

    #page-header > nav:has(#main-nav-toggle:not(:checked)) #account-button {
      display: none !important;
    }

    #page-header > nav:has(#main-nav-toggle:not(:checked)) .header-cta {
      display: none !important;
    }
  }

  @media screen and (max-width: 1200px) {
    #page-header > nav {
      flex-wrap: wrap-reverse;
    }

    #page-header > nav #site-home {
      flex-grow: 1;
    }

    #page-header > nav #cta-button {
      margin-left: auto;
      margin-right: auto;
    }

    #page-header > nav:has(#main-nav-toggle:not(:checked)) #main-nav {
      display: none;
    }

    #page-header > nav:has(#main-nav-toggle:not(:checked)) .menu-close {
      display: none;
    }

    @media screen and (max-width: 400px) {
      #page-header > nav:has(#main-nav-toggle:not(:checked)) #cta-button {
        display: none !important;
      }

      #page-header > nav:has(#main-nav-toggle:not(:checked)) #site-home {
        flex-grow: 1;
        justify-self: center;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      #page-header > nav:has(#main-nav-toggle:checked) {
        animation: .2s cubic-bezier(.79, .14, .15, .86) slide-in;
      }
    }

    #page-header > nav:has(#main-nav-toggle:checked) {
      z-index: 9999;
      height: auto;
      max-width: unset;
      background: #000;
      flex-flow: column;
      justify-content: start;
      align-items: center;
      row-gap: 2rem;
      margin: 0;
      padding: 1rem 1rem 4rem;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-x: scroll;
    }

    #page-header > nav:has(#main-nav-toggle:checked) .skip-link {
      display: none;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #site-home {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #site-home > svg {
      width: 100%;
      max-width: min(80vw, 500px);
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #search-link {
      flex-flow: row;
      align-items: center;
      width: -webkit-fit-content;
      width: fit-content;
      padding: 1rem;
      display: flex;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #search-link svg {
      --size: 3em;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #search-link svg:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
      margin-right: .5rem;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #search-link svg:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
      margin-left: .5rem;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #search-link svg:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
      margin-left: .5rem;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #search-link span.visually-hidden {
      font-size: var(--fs-step-0);
      text-transform: uppercase;
      display: inline-block;
      clip-path: unset !important;
      width: unset !important;
      height: unset !important;
      margin: unset !important;
      overflow: revert !important;
      position: initial !important;
      white-space: initial !important;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #main-nav {
      font-size: var(--fs-step-1);
      flex-direction: column;
      align-items: center;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #main-nav > li:not(.separator-decoration) {
      border: solid var(--color-bg-tint);
      border-width: 1px 0;
      padding-top: .5em;
      padding-bottom: .5em;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #main-nav > li:has(.sub-nav) {
      color: var(--color-accent);
      flex-direction: column;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #main-nav > li:has(.sub-nav) .sub-nav {
      color: var(--color-text);
      font-size: var(--fs-step-0);
      background: none;
      align-items: center;
      padding: 0;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #main-nav > li:has(.sub-nav):after {
      content: none;
    }

    #page-header > nav:has(#main-nav-toggle:checked) #main-nav .sub-nav {
      visibility: unset;
      position: unset;
    }

    #page-header > nav:has(#main-nav-toggle:checked) > .button {
      font-size: var(--fs-step-0) !important;
    }

    #page-header > nav:has(#main-nav-toggle:checked) .hamburger-menu {
      order: 1;
      justify-content: end;
      align-items: start;
      display: flex;
    }

    #page-header > nav:has(#main-nav-toggle:checked) .hamburger-menu .menu-open {
      display: none;
    }

    #page-header > nav:has(#main-nav-toggle:checked) .hamburger-menu .menu-close {
      display: unset;
    }

    #page-header > nav:has(#main-nav-toggle:checked) .hamburger-menu svg {
      margin: var(--edge-gap);
    }

    #page-header > nav:has(#main-nav-toggle:checked) > * {
      width: 100%;
    }

    #page-header > nav:has(#main-nav-toggle:checked) > *:not(.hamburger-menu) {
      order: 2;
    }
  }

  [id] {
    scroll-margin-top: 50px;
  }

  @media screen and (max-width: 1000px) {
    body:has(#main-nav-toggle:checked) {
      overflow: hidden;
    }
  }

  menu {
    gap: 1em;
    list-style: none;
  }

  .site-nav > li {
    text-transform: uppercase;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: flex;
  }

  .site-nav > li:has(.sub-nav) {
    gap: 1ch;
    position: relative;
  }

  .site-nav > li:has(.sub-nav):after {
    content: "▼";
    margin-left: -.5em;
    font-size: .5em;
  }

  .site-nav > li:has(.sub-nav):where(:hover, :focus, :focus-within):after {
    content: "▲";
  }

  .site-nav > li:has(.sub-nav):where(:hover, :focus, :focus-within) .sub-nav {
    visibility: visible;
  }

  .sub-nav {
    --spacing: 15px;
    visibility: hidden;
    top: 100%;
    left: calc(var(--spacing) * -1);
    z-index: 99;
    min-width: 270px;
    flex-direction: column;
    gap: 0;
    padding-top: calc(var(--edge-gap) + 1px);
    display: flex;
    position: absolute;
  }

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

  .sub-nav li a {
    padding: 10.4px var(--spacing);
    width: 100%;
    display: inline-block;
  }

  #page-header:has(#main-nav-toggle:not(:checked)) :is(.sub-nav li):where(:hover, :focus, :focus-within) {
    background-color: var(--color-accent);
  }

  #page-header:has(#main-nav-toggle:not(:checked)) :is(.sub-nav li):where(:hover, :focus, :focus-within) a {
    color: var(--color-bg-primary);
  }

  .flex-column {
    flex-direction: column;
    display: flex;
  }

  .flex-row {
    flex-flow: wrap;
    display: flex;
  }

  .center-content {
    justify-content: center;
    align-items: center;
  }

  form:not([method="dialog"]):not(:first-child) {
    margin-top: 1.875rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) {
    flex-flow: column;
    row-gap: .825rem;
    display: flex;
    container: form / inline-size;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) > * {
    margin-top: 1rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) > p + * {
    margin-top: 0;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="checkbox"], [type="radio"], [type="search"])) {
    flex-flow: row;
    align-items: center;
    gap: .625rem;
    display: flex;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="checkbox"], [type="radio"], [type="search"])) {
    flex-flow: row;
    align-items: center;
    gap: .625rem;
    display: flex;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])) {
    border: solid var(--color-accent);
    background-color: var(--color-bg-primary);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])):focus {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])):focus-within {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) {
    border: solid var(--color-accent);
    background-color: var(--color-bg-primary);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])):focus {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])):focus-within {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) textarea {
    border: solid var(--color-accent);
    background-color: var(--color-bg-primary);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) textarea:focus {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) textarea:focus-within {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"]), textarea) {
    color: var(--color-accent);
    caret-color: var(--color-accent);
    border-width: 0 0 1px;
    font-style: italic;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"]), textarea):focus {
    color: unset;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"]), textarea):focus-within {
    color: unset;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"]), textarea) {
    color: var(--color-accent);
    caret-color: var(--color-accent);
    border-width: 0 0 1px;
    font-style: italic;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"]), textarea):focus {
    color: unset;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"]), textarea):focus-within {
    color: unset;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])) {
    height: 100%;
    padding-bottom: 1.25rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) input:not(:placeholder-shown) {
    color: var(--color-text);
    font-style: normal;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) {
    height: 100%;
    padding-bottom: 1.25rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) input:not(:placeholder-shown) {
    color: var(--color-text);
    font-style: normal;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) textarea {
    width: 100%;
    min-height: 25cqi;
    color: var(--color-text);
    resize: none;
    border-width: 1px;
    margin-top: 1.25rem;
    padding: .5rem;
    font-style: normal;
    display: block;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:-webkit-any([type="text"], [type="email"], [type="search"]) {
    background: none;
    border: none;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:-webkit-any([type="text"], [type="email"], [type="search"]):where(:focus, :focus-within) {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:-webkit-any([type="text"], [type="email"], [type="search"]):focus-visible {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:is([type="text"], [type="email"], [type="search"]) {
    background: none;
    border: none;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:is([type="text"], [type="email"], [type="search"]):where(:focus, :focus-within) {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:is([type="text"], [type="email"], [type="search"]):focus-visible {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) input {
    --_size: 1.25rem;
    width: var(--_size);
    height: var(--_size);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) span {
    display: inline-block;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) input {
    --_size: 1.25rem;
    width: var(--_size);
    height: var(--_size);
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) span {
    display: inline-block;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(:focus-visible) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: 2px;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :-webkit-any(label, .input-wrap):has(:focus-visible) textarea {
    outline: none;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(:focus-visible) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: 2px;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) :is(label, .input-wrap):has(:focus-visible) textarea {
    outline: none;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input::placeholder {
    color: var(--color-accent);
    opacity: .8;
    font-style: italic;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input:invalid:not(:placeholder-shown) {
    -webkit-text-decoration: wavy underline var(--color-accent) 1px;
    text-decoration: wavy underline var(--color-accent) 1px;
    text-underline-offset: .25em;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) textarea::placeholder {
    color: var(--color-accent);
    opacity: .8;
    font-style: italic;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) textarea:invalid:not(:placeholder-shown) {
    -webkit-text-decoration: wavy underline var(--color-accent) 1px;
    text-decoration: wavy underline var(--color-accent) 1px;
    text-underline-offset: .25em;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) > input[type="submit"] {
    align-self: center;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) > button[type="submit"] {
    align-self: center;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) .radio-group {
    gap: 1rem 2rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input[type="file"]::-webkit-file-upload-button {
    color: #fff;
    border-color: var(--color-accent);
    background-color: #000;
    border-style: solid;
    border-width: 1px;
    padding: .25rem .5rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input[type="file"]::file-selector-button {
    color: #fff;
    border-color: var(--color-accent);
    background-color: #000;
    border-style: solid;
    border-width: 1px;
    padding: .25rem .5rem;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input[type="file"]::-webkit-file-upload-button:hover {
    color: #000;
    background-color: var(--color-accent);
    border-color: #0000;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input[type="file"]::file-selector-button:hover {
    color: #000;
    background-color: var(--color-accent);
    border-color: #0000;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input[type="file"]::-webkit-file-upload-button:active {
    color: #000;
    background-color: #a24909;
    border-color: #0000;
  }

  form:not([method="dialog"]):not(:has( > .form-content)) input[type="file"]::file-selector-button:active {
    color: #000;
    background-color: #a24909;
    border-color: #0000;
  }

  form:not([method="dialog"]) > .form-content {
    flex-flow: column;
    row-gap: .825rem;
    display: flex;
    container: form / inline-size;
  }

  form:not([method="dialog"]) > .form-content > * {
    margin-top: 1rem;
  }

  form:not([method="dialog"]) > .form-content > p + * {
    margin-top: 0;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="checkbox"], [type="radio"], [type="search"])) {
    flex-flow: row;
    align-items: center;
    gap: .625rem;
    display: flex;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="checkbox"], [type="radio"], [type="search"])) {
    flex-flow: row;
    align-items: center;
    gap: .625rem;
    display: flex;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])) {
    border: solid var(--color-accent);
    background-color: var(--color-bg-primary);
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])):focus {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])):focus-within {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) {
    border: solid var(--color-accent);
    background-color: var(--color-bg-primary);
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])):focus {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])):focus-within {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]) > .form-content textarea {
    border: solid var(--color-accent);
    background-color: var(--color-bg-primary);
  }

  form:not([method="dialog"]) > .form-content textarea:focus {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]) > .form-content textarea:focus-within {
    border-color: var(--color-text);
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"]), textarea) {
    color: var(--color-accent);
    caret-color: var(--color-accent);
    border-width: 0 0 1px;
    font-style: italic;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"]), textarea):focus {
    color: unset;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"]), textarea):focus-within {
    color: unset;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"]), textarea) {
    color: var(--color-accent);
    caret-color: var(--color-accent);
    border-width: 0 0 1px;
    font-style: italic;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"]), textarea):focus {
    color: unset;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"]), textarea):focus-within {
    color: unset;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input:-webkit-any([type="text"], [type="email"], [type="search"])) {
    height: 100%;
    padding-bottom: 1.25rem;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) input:not(:placeholder-shown) {
    color: var(--color-text);
    font-style: normal;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) {
    height: 100%;
    padding-bottom: 1.25rem;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input:is([type="text"], [type="email"], [type="search"])) input:not(:placeholder-shown) {
    color: var(--color-text);
    font-style: normal;
  }

  form:not([method="dialog"]) > .form-content textarea {
    width: 100%;
    min-height: 25cqi;
    color: var(--color-text);
    resize: none;
    border-width: 1px;
    margin-top: 1.25rem;
    padding: .5rem;
    font-style: normal;
    display: block;
  }

  form:not([method="dialog"]) > .form-content input:-webkit-any([type="text"], [type="email"], [type="search"]) {
    background: none;
    border: none;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  form:not([method="dialog"]) > .form-content input:-webkit-any([type="text"], [type="email"], [type="search"]):where(:focus, :focus-within) {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]) > .form-content input:-webkit-any([type="text"], [type="email"], [type="search"]):focus-visible {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]) > .form-content input:is([type="text"], [type="email"], [type="search"]) {
    background: none;
    border: none;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  form:not([method="dialog"]) > .form-content input:is([type="text"], [type="email"], [type="search"]):where(:focus, :focus-within) {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]) > .form-content input:is([type="text"], [type="email"], [type="search"]):focus-visible {
    border: none;
    outline: none;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) input {
    --_size: 1.25rem;
    width: var(--_size);
    height: var(--_size);
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) span {
    display: inline-block;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) input {
    --_size: 1.25rem;
    width: var(--_size);
    height: var(--_size);
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(input[type="checkbox"], [type="radio"]) span {
    display: inline-block;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(:focus-visible) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: 2px;
  }

  form:not([method="dialog"]) > .form-content :-webkit-any(label, .input-wrap):has(:focus-visible) textarea {
    outline: none;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(:focus-visible) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: 2px;
  }

  form:not([method="dialog"]) > .form-content :is(label, .input-wrap):has(:focus-visible) textarea {
    outline: none;
  }

  form:not([method="dialog"]) > .form-content input::placeholder {
    color: var(--color-accent);
    opacity: .8;
    font-style: italic;
  }

  form:not([method="dialog"]) > .form-content input:invalid:not(:placeholder-shown) {
    -webkit-text-decoration: wavy underline var(--color-accent) 1px;
    text-decoration: wavy underline var(--color-accent) 1px;
    text-underline-offset: .25em;
  }

  form:not([method="dialog"]) > .form-content textarea::placeholder {
    color: var(--color-accent);
    opacity: .8;
    font-style: italic;
  }

  form:not([method="dialog"]) > .form-content textarea:invalid:not(:placeholder-shown) {
    -webkit-text-decoration: wavy underline var(--color-accent) 1px;
    text-decoration: wavy underline var(--color-accent) 1px;
    text-underline-offset: .25em;
  }

  form:not([method="dialog"]) > .form-content > input[type="submit"] {
    align-self: center;
  }

  form:not([method="dialog"]) > .form-content > button[type="submit"] {
    align-self: center;
  }

  form:not([method="dialog"]) > .form-content .radio-group {
    gap: 1rem 2rem;
  }

  form:not([method="dialog"]) > .form-content input[type="file"]::-webkit-file-upload-button {
    color: #fff;
    border-color: var(--color-accent);
    background-color: #000;
    border-style: solid;
    border-width: 1px;
    padding: .25rem .5rem;
  }

  form:not([method="dialog"]) > .form-content input[type="file"]::file-selector-button {
    color: #fff;
    border-color: var(--color-accent);
    background-color: #000;
    border-style: solid;
    border-width: 1px;
    padding: .25rem .5rem;
  }

  form:not([method="dialog"]) > .form-content input[type="file"]::-webkit-file-upload-button:hover {
    color: #000;
    background-color: var(--color-accent);
    border-color: #0000;
  }

  form:not([method="dialog"]) > .form-content input[type="file"]::file-selector-button:hover {
    color: #000;
    background-color: var(--color-accent);
    border-color: #0000;
  }

  form:not([method="dialog"]) > .form-content input[type="file"]::-webkit-file-upload-button:active {
    color: #000;
    background-color: #a24909;
    border-color: #0000;
  }

  form:not([method="dialog"]) > .form-content input[type="file"]::file-selector-button:active {
    color: #000;
    background-color: #a24909;
    border-color: #0000;
  }

  form:not([method="dialog"]) fieldset {
    border: 1px solid var(--color-gray);
    background-color: var(--color-bg-primary);
    width: -webkit-fit-content;
    width: fit-content;
    padding: .5rem 1rem;
  }

  form:not([method="dialog"]) fieldset legend {
    padding-left: 1ch;
    padding-right: 1ch;
  }

  hr {
    clear: both;
  }

  hr {
    margin-top: 1.875rem;
  }

  hr + * {
    margin-top: 1.875rem;
  }

  summary + * {
    margin-top: .5rem;
  }
}

@layer components {
  :root {
    --bg-stars: url("/assets/images/animation-star.svg") repeat center/50px;
  }

  .svg-icon {
    width: var(--size, 1em);
    height: var(--size, 1em);
  }

  .icon-link {
    --size: 1.5em;
    display: inline-block;
  }

  .button {
    --btn-txt: var(--color-text-alt);
    --btn-txt-hv: var(--color-text);
    --btn-bg: var(--color-accent);
    --btn-bg-hv: var(--color-text-alt);
    --btn-border: var(--color-accent);
    --btn-border-hv: var(--color-accent);
  }

  button:not(:has(.svg-icon)) {
    --btn-txt: var(--color-text-alt);
    --btn-txt-hv: var(--color-text);
    --btn-bg: var(--color-accent);
    --btn-bg-hv: var(--color-text-alt);
    --btn-border: var(--color-accent);
    --btn-border-hv: var(--color-accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    button:not(:has(.svg-icon)) {
      --btn-bg-hv: var(--bg-stars), var(--color-text-alt);
    }
  }

  button:not(:has(.svg-icon)) {
    width: -webkit-max-content;
    width: max-content;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-step-0);
    letter-spacing: 1.6px;
    color: var(--btn-txt);
    background: var(--btn-bg);
    border: none;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .625rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: flex;
  }

  button:not(:has(.svg-icon)):where(:hover, :focus, :focus-within) {
    color: var(--btn-txt-hv);
    background: var(--btn-bg-hv);
    outline: 2px solid var(--btn-border-hv);
  }

  button:not(:has(.svg-icon))[type="submit"] {
    --btn-bg: var(--color-highlight);
  }

  form:invalid :is(button:not(:has(.svg-icon)))[type="submit"] {
    --btn-bg: var(--color-accent);
    filter: brightness(.75);
    outline-color: red;
  }

  button:not(:has(.svg-icon)).compact {
    font-family: var(--font-base);
    letter-spacing: normal;
    padding: 7.5px;
    font-size: 13px;
    font-weight: 600;
  }

  #page-header :is(button:not(:has(.svg-icon))) {
    font-family: var(--font-base);
    letter-spacing: normal;
    padding: 7.5px;
    font-size: 13px;
    font-weight: 600;
  }

  button:not(:has(.svg-icon)):not(.compact, #page-header :is(button:not(:has(.svg-icon)))) {
    min-width: min(158px, 100%);
    min-height: 47px;
  }

  button:not(:has(.svg-icon)):active {
    filter: brightness(.5);
  }

  button:not(:has(.svg-icon)).alt {
    --btn-txt: var(--color-accent);
    --btn-txt-hv: var(--color-text);
    --btn-bg: var(--color-text-alt);
    --btn-bg-hv: var(--color-text-alt);
    --btn-border: var(--color-accent);
    --btn-border-hv: var(--color-text);
    border: 1px solid var(--btn-border);
  }

  @media (prefers-reduced-motion: no-preference) {
    button:not(:has(.svg-icon)).alt {
      --btn-bg-hv: var(--bg-stars), var(--color-text-alt);
    }
  }

  .download-buttons button:not(:has(.svg-icon)).alt {
    --btn-txt: var(--color-text);
  }

  .download-buttons button:not(:has(.svg-icon)).alt svg {
    --size: 2em;
    fill: var(--color-accent);
  }

  button:not(:has(.svg-icon)).alt:where(:hover, :focus, :focus-within) {
    border-color: #0000;
    outline-width: 1px;
  }

  .download-buttons button:not(:has(.svg-icon)).alt:where(:hover, :focus, :focus-within) svg {
    fill: var(--color-text);
  }

  button:not(:has(.svg-icon)).header-cta {
    --btn-txt: var(--color-text-alt);
    --btn-txt-hv: var(--color-text-alt);
    --btn-bg-hv: var(--color-text);
    --btn-border: var(--btn-bg);
    --btn-border-hv: var(--color-text);
  }

  button:not(:has(.svg-icon)).header-cta:not(:hover, :focus, :focus-within) {
    outline: 1px solid var(--btn-border);
  }

  @media (prefers-reduced-motion: no-preference) {
    .button {
      --btn-bg-hv: var(--bg-stars), var(--color-text-alt);
    }
  }

  .button {
    width: -webkit-max-content;
    width: max-content;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--fs-step-0);
    letter-spacing: 1.6px;
    color: var(--btn-txt);
    background: var(--btn-bg);
    border: none;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .625rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    display: flex;
  }

  .button:where(:hover, :focus, :focus-within) {
    color: var(--btn-txt-hv);
    background: var(--btn-bg-hv);
    outline: 2px solid var(--btn-border-hv);
  }

  .button[type="submit"] {
    --btn-bg: var(--color-highlight);
  }

  form:invalid .button[type="submit"] {
    --btn-bg: var(--color-accent);
    filter: brightness(.75);
    outline-color: red;
  }

  .button.compact {
    font-family: var(--font-base);
    letter-spacing: normal;
    padding: 7.5px;
    font-size: 13px;
    font-weight: 600;
  }

  #page-header .button {
    font-family: var(--font-base);
    letter-spacing: normal;
    padding: 7.5px;
    font-size: 13px;
    font-weight: 600;
  }

  .button:not(.compact, #page-header .button) {
    min-width: min(158px, 100%);
    min-height: 47px;
  }

  .button:active {
    filter: brightness(.5);
  }

  .button.alt {
    --btn-txt: var(--color-accent);
    --btn-txt-hv: var(--color-text);
    --btn-bg: var(--color-text-alt);
    --btn-bg-hv: var(--color-text-alt);
    --btn-border: var(--color-accent);
    --btn-border-hv: var(--color-text);
    border: 1px solid var(--btn-border);
  }

  @media (prefers-reduced-motion: no-preference) {
    .button.alt {
      --btn-bg-hv: var(--bg-stars), var(--color-text-alt);
    }
  }

  .download-buttons .button.alt {
    --btn-txt: var(--color-text);
  }

  .download-buttons .button.alt svg {
    --size: 2em;
    fill: var(--color-accent);
  }

  .button.alt:where(:hover, :focus, :focus-within) {
    border-color: #0000;
    outline-width: 1px;
  }

  .download-buttons .button.alt:where(:hover, :focus, :focus-within) svg {
    fill: var(--color-text);
  }

  .button.header-cta {
    --btn-txt: var(--color-text-alt);
    --btn-txt-hv: var(--color-text-alt);
    --btn-bg-hv: var(--color-text);
    --btn-border: var(--btn-bg);
    --btn-border-hv: var(--color-text);
  }

  .button.header-cta:not(:hover, :focus, :focus-within) {
    outline: 1px solid var(--btn-border);
  }

  .download-platforms {
    font-size: var(--fs-step-sm);
    text-transform: uppercase;
    row-gap: 1.5rem;
    font-weight: 600;
  }

  .download-platforms h2 {
    font-size: var(--fs-step-1);
    font-weight: 400;
  }

  .download-buttons {
    text-align: initial;
    flex-flow: wrap;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    display: flex;
  }

  @media screen and (max-width: 400px) {
    .download-buttons {
      grid-template-columns: 1fr;
    }
  }

  .download-buttons .button {
    justify-content: center;
    width: min(168px, 100%);
  }

  .download-buttons .button div {
    white-space: nowrap;
  }

  .download-buttons div {
    font-family: var(--font-base);
    letter-spacing: normal;
    text-transform: none;
    flex-direction: column;
    font-weight: 500;
    line-height: normal;
    display: flex;
  }

  .download-buttons span {
    font-size: .55em;
  }

  .play :is(.download-buttons span) {
    text-transform: uppercase;
  }

  .download-buttons .row-steam {
    flex-flow: column;
    align-items: center;
    gap: .625rem;
    width: 100%;
  }

  .download-buttons .row-steam .pc-notice {
    overflow-wrap: break-word;
    place-self: center;
  }

  .download-buttons .row-steam .steam-app-link {
    transition: color var(--transition-time) ease;
    text-decoration: none;
  }

  .download-buttons .row-steam .steam-app-link:where(:hover, :focus, :focus-within) {
    color: var(--color-accent);
  }

  .download-buttons .row-steam .steam-app-link svg {
    --size: 1lh;
    place-self: center;
  }

  .download-buttons .row-steam .steam-app-link span {
    font-size: var(--fs-step-sm);
    text-transform: uppercase;
    font-weight: 600;
  }

  .download-buttons .steam.button {
    height: 57px;
    padding: 0;
  }

  .download-buttons .steam svg {
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .download-buttons .steam svg #steam-wordmark-text {
    fill: var(--color-text);
  }

  #toc {
    padding: 1em;
  }

  #toc summary {
    color: var(--color-highlight);
  }

  #toc summary h2 {
    font-size: var(--fs-step-0);
    display: inline-block;
  }

  #toc .toc {
    font-size: var(--fs-step-sm);
    margin-top: 1rem;
  }

  #toc .toc ol {
    list-style: none;
  }

  #toc .toc ol > ol:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-left: 1em;
  }

  #toc .toc ol > ol:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 1em;
  }

  #toc .toc ol > ol:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    padding-right: 1em;
  }

  #toc .toc a {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    text-decoration-thickness: .1ex;
    display: inline-block;
    overflow: hidden;
  }

  #toc .toc a:not(:where(:hover, :focus, :focus-within)) {
    text-decoration: none;
  }

  #articles-index {
    --spacing: 1.25rem;
    padding-block: var(--spacing);
    row-gap: var(--spacing);
    grid-column: article;
    margin-top: 0;
    margin-bottom: 0;
  }

  .article-thumbnail.author-overlay, .article-feature.author-overlay {
    grid-template-rows: 1fr;
    grid-template-columns: 4fr 1fr 2fr;
    display: grid;
  }

  :is(.article-thumbnail.author-overlay, .article-feature.author-overlay) > picture img {
    object-fit: cover;
    object-position: center;
    grid-row: 1;
    width: 100%;
    height: 100%;
  }

  :is(.article-thumbnail.author-overlay, .article-feature.author-overlay) > picture:first-of-type img {
    grid-column: 1 / -2;
  }

  :is(.article-thumbnail.author-overlay, .article-feature.author-overlay) > picture + picture img {
    --clip-indent: 14%;
    --bg-color: #626567;
    background: var(--bg-color);
    background: linear-gradient(to top left, color-mix(in srgb, var(--bg-color) 50%, black), var(--bg-color) 60% 50%);
    clip-path: polygon(var(--clip-indent) -10%, 110% -10%, 110% 110%, 0px 110%);
    grid-column: 2 / -1;
  }

  .article-brief, .pagefind-ui__result {
    z-index: 0;
    flex-flow: column;
    display: flex;
    position: relative;
  }

  :is(.article-brief, .pagefind-ui__result) > * {
    z-index: 10;
  }

  :is(.article-brief, .pagefind-ui__result) .brief-header {
    font-size: var(--fs-step-1);
    margin-top: .625rem;
    font-weight: 400;
    z-index: 1 !important;
  }

  :is(.article-brief, .pagefind-ui__result) .brief-header a {
    z-index: 1;
  }

  :is(.article-brief, .pagefind-ui__result) .brief-header a:where(:hover, :focus, :focus-within) {
    text-decoration: none;
  }

  :is(.article-brief, .pagefind-ui__result) .brief-header a:focus-visible {
    outline: none !important;
  }

  :is(.article-brief, .pagefind-ui__result) .brief-header a:after {
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner > .pagefind-ui__result-title {
    font-size: var(--fs-step-1);
    margin-top: .625rem;
    font-weight: 400;
    z-index: 1 !important;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner > .pagefind-ui__result-title a {
    z-index: 1;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner > .pagefind-ui__result-title a:where(:hover, :focus, :focus-within) {
    text-decoration: none;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner > .pagefind-ui__result-title a:focus-visible {
    outline: none !important;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner > .pagefind-ui__result-title a:after {
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  :is(.article-brief, .pagefind-ui__result) .article-thumbnail {
    transition: filter var(--transition-time) ease-out;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-thumb {
    transition: filter var(--transition-time) ease-out;
  }

  :is(.article-brief, .pagefind-ui__result):not(:hover, :focus, :focus-within) .article-thumbnail {
    filter: brightness(.8);
  }

  :is(.article-brief, .pagefind-ui__result):not(:hover, :focus, :focus-within) .pagefind-ui__result-thumb {
    filter: brightness(.8);
  }

  :is(.article-brief, .pagefind-ui__result):has(.brief-header a:where(:focus-visible)) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: .25em;
  }

  :is(.article-brief, .pagefind-ui__result) .article-thumbnail {
    z-index: 0;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-thumb {
    z-index: 0;
  }

  :is(.article-brief, .pagefind-ui__result) .article-info {
    z-index: 0;
    flex-flow: column;
    padding: 1.875rem;
    display: flex;
  }

  :is(.article-brief, .pagefind-ui__result) .article-info > * {
    z-index: 10;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner {
    z-index: 0;
    flex-flow: column;
    padding: 1.875rem;
    display: flex;
  }

  :is(.article-brief, .pagefind-ui__result) .pagefind-ui__result-inner > * {
    z-index: 10;
  }

  :is(.article-brief, .pagefind-ui__result) .article-description {
    font-size: var(--fs-step-sm);
    width: -webkit-fit-content;
    width: fit-content;
    margin-top: 1rem;
    font-weight: 400;
  }

  :scope .article-details {
    font-size: var(--fs-step-sm);
    flex-flow: wrap;
    align-items: center;
    gap: .625rem;
    display: flex;
  }

  :scope .article-details a[rel="author"] {
    color: var(--color-highlight);
    place-items: center;
    gap: .625rem;
    text-decoration-thickness: 1px;
    display: flex;
  }

  :scope .article-details a[rel="author"]:not(:hover, :focus, :focus-within) {
    text-decoration: none;
  }

  :scope .article-details a[rel="author"] > span {
    display: inline-block;
  }

  :scope .article-details a[rel="author"] svg {
    --size: 35px;
    color: var(--color-gray);
  }

  .article-tags {
    width: unset;
    flex-flow: wrap;
    gap: 5px;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .article-tags > li {
    margin: 0;
  }

  .article-tags > li > .button {
    --btn-txt: var(--color-text);
    --btn-bg: var(--color-text-alt);
    --btn-border: var(--color-text);
    --btn-txt-hv: var(--color-text-alt);
    --btn-bg-hv: var(--color-accent);
    --btn-border-hv: var(--color-accent);
    border: 1px solid var(--btn-border);
    outline: none;
    padding: 3.5px 5px;
    font-family: system-ui, sans-serif;
  }

  .article-tags > li > .button:where(:hover, :focus, :focus-within) {
    border-color: var(--btn-border-hv);
  }

  #aside-articles {
    grid-column: 1 / -1;
    justify-items: center;
    margin-bottom: 3.75rem;
    position: relative;
  }

  #aside-articles h2#latest-posts {
    font-size: var(--fs-step-1);
    color: var(--color-highlight);
    justify-self: start;
    font-weight: 400;
  }

  #aside-articles .articles-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    display: grid;
  }

  #aside-articles .article-thumbnail {
    aspect-ratio: 16 / 9;
    order: -1;
    width: 100%;
  }

  #aside-articles .article-thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  #aside-articles .pagefind-ui__result-thumb {
    aspect-ratio: 16 / 9;
    order: -1;
    width: 100%;
  }

  #aside-articles .pagefind-ui__result-thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  #aside-articles .brief-header {
    font-size: var(--fs-step-1);
  }

  #aside-articles .article-description {
    font-size: var(--fs-step-sm);
  }

  @media screen and not (min-width: 800px) {
    #aside-articles {
      padding-top: 4em;
      padding-bottom: 3.5em;
    }

    #aside-articles .articles-wrapper {
      grid-template-columns: 1fr;
    }

    #aside-articles .article-brief {
      padding-bottom: 2rem;
    }

    #aside-articles .pagefind-ui__result {
      padding-bottom: 2rem;
    }
  }

  @media screen and (min-width: 800px) and (not (min-width: 1100px)) {
    #aside-articles .article-brief {
      flex-grow: 1;
      flex-basis: 250px;
    }

    #aside-articles .article-brief:first-child {
      flex-basis: 700px;
    }

    #aside-articles .pagefind-ui__result {
      flex-grow: 1;
      flex-basis: 250px;
    }

    #aside-articles .pagefind-ui__result:first-child {
      flex-basis: 700px;
    }
  }

  platform-detect [data-platform-show] {
    display: none;
  }

  platform-detect:not([data-platform="Desktop"]):not([data-platform="iOS"]):not([data-platform="Android"]) [data-platform-default] {
    display: unset;
  }

  platform-detect[data-platform="Desktop"] [data-platform-show="Desktop"] {
    display: unset;
  }

  platform-detect[data-platform="iOS"] [data-platform-show="iOS"] {
    display: unset;
  }

  platform-detect[data-platform="Android"] [data-platform-show="Android"] {
    display: unset;
  }

  lite-youtube {
    width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  galaxy-card:has( > button) {
    display: inline-block;
  }

  galaxy-card > button {
    cursor: default;
    color: inherit;
    text-align: start;
    text-underline-offset: var(--space-3xs);
    background-color: #0000;
    border: 1px solid #0000;
    align-items: baseline;
    column-gap: .1ch;
    padding: 0 .2ch 0 0;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    display: inline-flex;
  }

  galaxy-card > button > .svg-icon {
    align-self: center;
  }

  galaxy-card > button:where(:hover, :focus, :focus-within) {
    background-color: var(--brand-palette-indigo-lighter);
    border-color: currentColor;
  }

  galaxy-card > button:active {
    background-color: var(--brand-palette-indigo-darker);
  }

  #card-viewer {
    color: var(--color-text-base);
    background-color: #0000;
    border: none;
  }

  @supports (bottom: anchor(top)) {
    #card-viewer {
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      bottom: anchor(top);
      position-try-fallbacks: flip-block;
      justify-self: anchor-center;
      margin: 0;
    }
  }

  @supports not (bottom: anchor(top)) {
    #card-viewer {
      margin: auto;
    }

    #card-viewer::backdrop {
      background: #00000080;
    }
  }

  #card-viewer > figure {
    filter: drop-shadow(0 5px 10px #000);
  }

  galaxy-card.hover-fallback:after {
    content: " 🔎";
    vertical-align: super;
    font-size: .5em;
    font-style: normal;
  }

  galaxy-card.hover-fallback .content {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  galaxy-card.hover-fallback:has(.content:hover) {
    cursor: pointer;
    position: relative;
  }

  galaxy-card.hover-fallback:has(.content:hover):before {
    content: "";
    background: var(--card-img) no-repeat;
    aspect-ratio: 171 / 255;
    z-index: 999;
    width: 300px;
    height: auto;
    position: absolute;
    top: 0;
    left: 100%;
    transform: translateY(-30%);
  }

  .company-wordmark svg {
    fill: var(--color-text) !important;
  }

  .company-wordmark text {
    fill: var(--color-text) !important;
  }

  #captains-select {
    margin-top: 7em;
  }

  #captains-select :-webkit-any(h1, h2) {
    font-size: var(--fs-step-4);
    font-weight: 400;
  }

  #captains-select :-webkit-any(h1, h2) .xl-text {
    display: block;
  }

  #captains-select :is(h1, h2) {
    font-size: var(--fs-step-4);
    font-weight: 400;
  }

  #captains-select :is(h1, h2) .xl-text {
    display: block;
  }

  #captains-select h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  #captains-select .pagination {
    justify-content: start;
  }

  .captains-list {
    flex-flow: wrap;
    gap: 0;
    display: flex;
  }

  .captains-list li {
    flex-shrink: 0;
    width: 100%;
    max-width: 12.5rem;
    height: -webkit-fit-content;
    height: fit-content;
    position: relative;
  }

  .captains-list li picture {
    contain: paint;
    height: 100%;
    display: block;
  }

  .captains-list li picture img {
    object-fit: cover;
    height: 100%;
    transition: transform .2s ease-in;
  }

  .captains-list li:has(:hover, :focus, :focus-within) img {
    transform: scale(1.1);
  }

  .captains-list li:has(a[aria-current]) img {
    transform: scale(1.1);
  }

  .captains-list li:has(a[aria-current]):before {
    content: "";
    z-index: 10;
    border-image-source: var(--gradient-border);
    border-image-slice: 1;
    border-image-width: var(--gradient-border-width);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .captains-list li:has(a[aria-current]):after {
    content: var(--star-svg);
    z-index: 11;
    translate: 0 calc(50% - (var(--gradient-border-width) / 2));
    place-content: center;
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .captains-list li:has(:checked) img {
    transform: scale(1.1);
  }

  .captains-list li:has(:checked):before {
    content: "";
    z-index: 10;
    border-image-source: var(--gradient-border);
    border-image-slice: 1;
    border-image-width: var(--gradient-border-width);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .captains-list li:has(:checked):after {
    content: var(--star-svg);
    z-index: 11;
    translate: 0 calc(50% - (var(--gradient-border-width) / 2));
    place-content: center;
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .captains-list li:hover picture:before {
      content: "";
      -webkit-backdrop-filter: brightness(2);
      backdrop-filter: brightness(2);
      z-index: 10;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-mask: url("/assets/images/animation-circle.svg") center / cover no-repeat;
      mask: url("/assets/images/animation-circle.svg") center / cover no-repeat;
    }
  }

  .captains-list label {
    flex-shrink: 0;
    width: 100%;
    max-width: 12.5rem;
    height: -webkit-fit-content;
    height: fit-content;
    position: relative;
  }

  .captains-list label picture {
    contain: paint;
    height: 100%;
    display: block;
  }

  .captains-list label picture img {
    object-fit: cover;
    height: 100%;
    transition: transform .2s ease-in;
  }

  .captains-list label:has(:hover, :focus, :focus-within) img {
    transform: scale(1.1);
  }

  .captains-list label:has(a[aria-current]) img {
    transform: scale(1.1);
  }

  .captains-list label:has(a[aria-current]):before {
    content: "";
    z-index: 10;
    border-image-source: var(--gradient-border);
    border-image-slice: 1;
    border-image-width: var(--gradient-border-width);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .captains-list label:has(a[aria-current]):after {
    content: var(--star-svg);
    z-index: 11;
    translate: 0 calc(50% - (var(--gradient-border-width) / 2));
    place-content: center;
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .captains-list label:has(:checked) img {
    transform: scale(1.1);
  }

  .captains-list label:has(:checked):before {
    content: "";
    z-index: 10;
    border-image-source: var(--gradient-border);
    border-image-slice: 1;
    border-image-width: var(--gradient-border-width);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .captains-list label:has(:checked):after {
    content: var(--star-svg);
    z-index: 11;
    translate: 0 calc(50% - (var(--gradient-border-width) / 2));
    place-content: center;
    display: flex;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .captains-list label:hover picture:before {
      content: "";
      -webkit-backdrop-filter: brightness(2);
      backdrop-filter: brightness(2);
      z-index: 10;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-mask: url("/assets/images/animation-circle.svg") center / cover no-repeat;
      mask: url("/assets/images/animation-circle.svg") center / cover no-repeat;
    }
  }

  scroll-pagination:defined .captains-list {
    overscroll-behavior: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-color: var(--color-accent) var(--color-bg-primary);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    flex-wrap: nowrap;
    height: 6rem;
    overflow-x: scroll;
  }

  scroll-pagination:defined .captains-list li {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .signup-form {
    background: linear-gradient(to top, var(--color-bg-tint), var(--color-bg-primary) 33.3%);
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    grid-column: 1 / -1 !important;
  }

  .signup-form > form {
    z-index: 10;
    --_content-width: 680px;
    grid-template-columns: minmax(auto, var(--_content-width)) 1fr;
    align-self: center;
    gap: 1.825rem;
    margin-top: 2.4em;
    margin-bottom: 2.4em;
    display: grid;
  }

  .signup-form > form > hgroup {
    grid-column: 1;
  }

  .signup-form > form .form-content {
    grid-column: 1;
  }

  .signup-form > form .form-content .email-group {
    flex-flow: row;
    align-items: center;
    gap: .625rem;
    display: flex;
  }

  .signup-form > form .form-content .email-group > label {
    border-width: 1px;
    flex-grow: 1;
    gap: .125rem;
    padding: 0 1rem;
  }

  .signup-form > form .form-content .email-group > label .svg-icon {
    --size: 1rem;
    flex-shrink: 0;
  }

  .signup-form > form .form-content .email-group > label input {
    padding: .5rem;
  }

  .signup-form > form .form-content .email-group > label:has(input:not(:placeholder-shown)) {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right top, var(--color-highlight) 30%, var(--color-accent));
    border-image-width: 1px;
  }

  .signup-form > form .form-content .email-group > .input-wrap {
    border-width: 1px;
    flex-grow: 1;
    gap: .125rem;
    padding: 0 1rem;
  }

  .signup-form > form .form-content .email-group > .input-wrap .svg-icon {
    --size: 1rem;
    flex-shrink: 0;
  }

  .signup-form > form .form-content .email-group > .input-wrap input {
    padding: .5rem;
  }

  .signup-form > form .form-content .email-group > .input-wrap:has(input:not(:placeholder-shown)) {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right top, var(--color-highlight) 30%, var(--color-accent));
    border-image-width: 1px;
  }

  .signup-form > form .form-content .form-checkboxes {
    gap: 1rem;
  }

  .signup-form > form .form-content #form-message {
    opacity: .9;
    font-size: smaller;
  }

  .signup-form > form #hide-signup {
    background: none;
    border: none;
    grid-area: 1 / 2;
    justify-self: end;
    width: -webkit-max-content;
    width: max-content;
    height: -webkit-min-content;
    height: min-content;
  }

  .signup-form > form #hide-signup > svg {
    filter: drop-shadow(2px 2px 2px #000);
  }

  body.newsletter :is(.signup-form > form #hide-signup) {
    display: none;
  }

  @media screen and (max-width: 600px) {
    .signup-form > form .form-content .email-group {
      flex-flow: column;
      justify-content: center;
      row-gap: 1.825rem;
    }

    .signup-form > form .form-content .email-group label {
      width: 100%;
    }

    .signup-form > form .form-content .email-group .input-wrap {
      width: 100%;
    }
  }

  .signup-form > picture img {
    z-index: 1;
    width: auto;
    max-width: unset;
    grid-column: content;
    justify-self: end;
    height: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    position: absolute;
  }

  @media screen and (max-width: 1000px) {
    .signup-form > form .form-content {
      grid-column: 1 / -1;
    }

    .signup-form > picture img {
      display: none;
    }
  }

  @media screen and (max-width: 350px) {
    .signup-form h2.left-decoration:before {
      content: none;
    }

    .signup-form h2.left-decoration:after {
      content: none;
    }

    .signup-form hgroup {
      grid-column: 1 / -1;
    }

    .signup-form #hide-signup {
      display: none;
    }
  }

  #page-content > .feature-banner {
    --block-spacing: clamp(1.5rem, .6rem + 3.6vw, 3.75rem);
    z-index: 0;
    min-height: 19vw;
    padding-block: calc(var(--block-spacing)*2) var(--block-spacing);
    grid-column: 1 / -1;
    align-content: end;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
  }

  #page-content > .feature-banner > * {
    z-index: 10;
    grid-column: article;
  }

  #page-content > .feature-banner > .article-feature {
    z-index: -1;
    contain: paint;
    grid-column: 1 / -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #page-content > .feature-banner > .article-feature img {
    object-fit: cover;
    object-position: var(--position-x, center) var(--position-y, 25%);
    width: 100%;
    height: 100%;
  }

  #page-content > .feature-banner hgroup {
    flex-flow: column;
    row-gap: .625rem;
    display: flex;
  }

  #page-content > .feature-banner hgroup > * {
    margin: 0;
    font-weight: 400;
    line-height: 1;
  }

  #page-content > .feature-banner hgroup .bottom-decoration {
    width: -webkit-fit-content;
    width: fit-content;
    padding-bottom: 1.875rem;
  }

  #page-content > .feature-banner hgroup:last-child {
    margin-bottom: 1.25rem;
  }

  #page-content > .feature-banner:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #page-content > .feature-banner:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #page-content > .feature-banner:before {
    z-index: 1;
    background: linear-gradient(to top, #000000b3, #0000 30%), radial-gradient(at top, #0000, #000000b3);
  }

  @media (prefers-reduced-motion: no-preference) {
    #page-content > .feature-banner:after {
      z-index: 0;
      -webkit-backdrop-filter: brightness(2);
      backdrop-filter: brightness(2);
      height: 200px;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-mask: url("/assets/images/animation-star.svg") center / 160px;
      mask: url("/assets/images/animation-star.svg") center / 160px;
    }
  }

  menu.filter-menu {
    font-size: 13px;
    font-weight: 600;
  }

  menu.filter-menu li {
    transition: color var(--transition-time) ease;
    align-self: stretch;
  }

  menu.filter-menu li a {
    color: inherit;
    justify-content: center;
    align-items: center;
    min-width: 140px;
    height: 100%;
    min-height: 50px;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    text-decoration: none;
    display: flex;
  }

  menu.filter-menu li a:where([aria-current]) {
    color: var(--color-highlight);
  }

  menu.filter-menu li label {
    color: inherit;
    justify-content: center;
    align-items: center;
    min-width: 140px;
    height: 100%;
    min-height: 50px;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    text-decoration: none;
    display: flex;
  }

  menu.filter-menu li label:where([aria-current]) {
    color: var(--color-highlight);
  }

  menu.filter-menu li:where(:hover, :focus, :focus-within) {
    color: var(--color-accent);
  }

  menu.filter-menu li:where(:hover, :focus, :focus-within) a {
    color: var(--color-accent);
  }

  nav.pagination {
    gap: 1rem;
  }

  nav.pagination {
    flex-flow: wrap;
    justify-content: center;
    display: flex;
  }

  nav.pagination > ul {
    flex-flow: wrap;
    justify-content: center;
    display: flex;
  }

  nav.pagination > ul {
    padding: 0;
    list-style: none;
  }

  nav.pagination > ul li {
    padding: 0;
  }

  nav.pagination > ul li.truncation {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  nav.pagination > ul li a {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  nav.pagination > ul li a {
    aspect-ratio: 1;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  nav.pagination > ul li a:before {
    content: "⬥";
  }

  nav.pagination > ul li a[aria-current] {
    color: var(--color-highlight);
  }

  nav.pagination > ul li a[aria-current]:where(:hover, :focus, :focus-within) {
    filter: brightness(1.2) drop-shadow(0 0 5px #fff);
  }

  nav.pagination > ul li a:not([aria-current]):not(:hover, :focus, :focus-within) {
    filter: brightness(.5);
  }

  nav.pagination > ul li a:where(:hover, :focus, :focus-within) {
    filter: drop-shadow(0 0 5px #fff);
  }

  nav.pagination a {
    text-decoration: none;
  }

  nav.pagination a.prev {
    font-family: var(--font-display);
    text-transform: uppercase;
    transition: color var(--transition-time) ease;
    flex-flow: row;
    align-items: center;
    gap: 5px;
    font-size: 24px;
    line-height: 1;
    display: flex;
  }

  nav.pagination a.prev svg {
    stroke: currentColor;
    stroke-width: 2px;
    fill: #0000;
    transition: fill var(--transition-time) ease;
  }

  nav.pagination a.prev:not([aria-hidden]):where(:hover, :focus, :focus-within) {
    color: var(--color-accent);
  }

  nav.pagination a.prev:not([aria-hidden]):where(:hover, :focus, :focus-within) svg {
    fill: currentColor;
  }

  nav.pagination a.prev[aria-hidden] {
    filter: brightness(.5);
  }

  nav.pagination a.next {
    font-family: var(--font-display);
    text-transform: uppercase;
    transition: color var(--transition-time) ease;
    flex-flow: row;
    align-items: center;
    gap: 5px;
    font-size: 24px;
    line-height: 1;
    display: flex;
  }

  nav.pagination a.next svg {
    stroke: currentColor;
    stroke-width: 2px;
    fill: #0000;
    transition: fill var(--transition-time) ease;
  }

  nav.pagination a.next:not([aria-hidden]):where(:hover, :focus, :focus-within) {
    color: var(--color-accent);
  }

  nav.pagination a.next:not([aria-hidden]):where(:hover, :focus, :focus-within) svg {
    fill: currentColor;
  }

  nav.pagination a.next[aria-hidden] {
    filter: brightness(.5);
  }

  nav.pagination a.prev svg {
    rotate: 180deg;
  }

  dialog.context-alert {
    border: 1px solid var(--color-accent);
    transition-behavior: allow-discrete;
    opacity: 0;
    margin: auto auto 0;
    padding: .4em .8em;
    transition-property: display, overlay, opacity, translate;
    transition-duration: 1s;
    translate: 0 .5rem;
  }

  dialog.context-alert[open] {
    opacity: 1;
    translate: 0 -2rem;
  }

  @starting-style {
    dialog.context-alert[open] {
      opacity: 0;
      translate: 0 .5rem;
    }
  }

  dialog.context-alert > span {
    padding: .25em 0 .25em 1em;
  }

  dialog.context-alert form {
    gap: .5rem;
    display: inline-flex;
  }

  dialog.context-alert .close-dialog {
    --size: .75em;
    color: currentColor;
    background: none;
    border: none;
    border-radius: 50%;
    padding: .25em;
  }

  dialog.context-alert:has(.close-dialog:active) {
    filter: brightness(.5);
  }

  :is(cookie-banner, cookie-form):not(:defined) {
    display: none;
  }

  :is(cookie-banner, cookie-form):empty {
    display: none;
  }

  cookie-banner {
    z-index: 9999;
    padding: var(--edge-gap);
    background-color: var(--color-bg-primary);
    font-size: var(--fs-step-sm);
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
  }

  cookie-banner > dialog {
    background-color: var(--color-bg-tint);
    align-content: center;
    width: 100%;
    padding: 1rem;
    position: relative;
  }

  cookie-banner > dialog > .content {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  cookie-banner > dialog > .content > * {
    width: unset;
  }

  cookie-banner > dialog > .content > form {
    grid-template-columns: repeat(2, 158px);
    justify-content: center;
    gap: .5rem;
    display: grid;
  }

  @media (max-width: 400px) {
    cookie-banner > dialog > .content > form {
      flex-grow: 1;
      grid-template-columns: 1fr;
      justify-items: center;
    }
  }

  cookie-form > form {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto 1fr auto;
    gap: .5rem;
    display: grid;
  }

  cookie-form > form .cookie-group {
    grid-template-rows: subgrid;
    border: 1px solid var(--color-gray);
    grid-row: span 3;
    justify-items: center;
    row-gap: .5rem;
    padding: 1rem;
    display: grid;
  }

  cookie-form > form .cookie-group:has(input:checked) {
    border-color: var(--color-accent);
  }

  cookie-form > form .cookie-group label {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 600;
  }

  cookie-form > form .cookie-group > :not(label) {
    font-size: var(--fs-step-sm);
  }

  .cookie-modal {
    background-color: var(--color-bg-tint);
    width: min(100%, 1000px);
    margin: auto;
    padding: 1rem;
  }

  .cookie-modal > button {
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
  }

  .cookie-modal > cookie-form h2 {
    width: -webkit-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .cookie-modal::backdrop {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: #00000080;
  }

  .callout-card-container {
    flex-flow: row;
    gap: 1rem;
    display: flex;
    container-type: inline-size;
  }

  .callout-card-container .callout-card {
    z-index: 0;
    background: #000;
    max-width: 600px;
    padding: 0 2rem 2rem;
    position: relative;
  }

  @container (width > 400px) {
    .callout-card-container .callout-card {
      aspect-ratio: 6 / 5;
    }
  }

  .callout-card-container .callout-card {
    grid-template-rows: [image-start] minmax(100px, 1fr)[h-start] auto[h-end image-end p-start] auto[p-end];
    gap: 1rem;
    display: grid;
  }

  .callout-card-container .callout-card > * {
    z-index: 10;
    grid-column: 1;
  }

  .callout-card-container .callout-card h3 {
    color: var(--color-highlight);
    text-align: center;
    filter: drop-shadow(0 2px 2px #000);
    grid-row: h;
    padding-bottom: 1rem;
    font-weight: 400;
  }

  .callout-card-container .callout-card .callout-content {
    z-index: 10;
    grid-row: p;
    position: relative;
  }

  .callout-card-container .callout-card picture img {
    object-fit: cover;
    z-index: -99;
    grid-row: image;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .callout-card-container .callout-card:before {
    content: "";
    position: absolute;
  }

  .callout-card-container .callout-card:after {
    content: "";
    position: absolute;
  }

  .callout-card-container .callout-card:before {
    z-index: 1;
    background: linear-gradient(to top, #000 25%, #0009 70%, #0000);
    grid-row: 2 / 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .callout-card-container .callout-card:after {
    z-index: 2;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right top, var(--color-highlight), var(--color-accent) 30%);
    border-image-width: 1px;
    border-image-outset: -10px;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  @media (max-width: 1000px) {
    .callout-card-container {
      flex-direction: column;
      align-items: center;
    }
  }

  .icon-row {
    flex-flow: row;
    justify-content: space-evenly;
    gap: 1rem;
    width: 100%;
    display: flex;
  }

  .icon-row img {
    width: 100%;
    max-width: 50px;
    margin-left: 0;
    margin-right: 0;
  }

  .placeholder {
    aspect-ratio: 16 / 9;
    text-align: center;
    background-color: #000;
    border: 2px solid #f0f;
    border-radius: 5px;
    align-content: center;
    width: 80%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

@layer utilities {
  .visually-hidden:not(:active, :focus) {
    clip-path: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .visually-hidden:not(:active, :focus) * {
    clip-path: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  :-webkit-any(a, button):where(:focus-visible) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: .25em;
  }

  :is(a, button):where(:focus-visible) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: .25em;
  }

  .hamburger-menu:has(#main-nav-toggle:where(:focus-visible)) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: .25em;
  }

  :-webkit-any(h1, h2, h3, h4, h5, h6)[id]:where(:focus-visible, :has(:focus-visible)) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: .25em;
  }

  :-webkit-any(h1, h2, h3, h4, h5, h6)[id]:where(:focus-visible, :has(:focus-visible)) a:focus-visible {
    outline: none;
  }

  :is(h1, h2, h3, h4, h5, h6)[id]:where(:focus-visible, :has(:focus-visible)) {
    outline: .25em solid var(--color-text);
    outline-offset: .3em;
    border-radius: .25em;
  }

  :is(h1, h2, h3, h4, h5, h6)[id]:where(:focus-visible, :has(:focus-visible)) a:focus-visible {
    outline: none;
  }

  .side-stars {
    width: -webkit-fit-content;
    width: fit-content;
  }
}

@media print {
  html {
    font-size: 8pt;
  }

  *, :before, :after, :first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
  }

  body > :not(main) {
    display: none;
  }

  #page-content:has(#article-content) > :not(#article-content) {
    display: none;
  }

  #page-content:has(#article-content) #article-other {
    display: none;
  }

  a, a:visited {
    text-decoration: underline;
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  a[href]:not([href^="#"], [href^="javascript:"]):after {
    content: " (" attr(href) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre, blockquote {
    page-break-inside: avoid;
    border: 1px solid #999;
  }

  tr, img {
    page-break-inside: avoid;
  }

  p, h2, h3, h4 {
    orphans: 3;
    widows: 3;
  }

  h2, h3, h4 {
    page-break-after: avoid;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

#page-header {
  view-transition-name: page-header;
}

#page-footer {
  view-transition-name: page-footer;
}

cookie-banner {
  view-transition-name: cookie-banner;
}