/*! Copyright Steph Ango, stephango.com
    Please do not reproduce without permission.

    Credits:
    normalize.css (MIT License), github.com/necolas/normalize.css
    Flexoki (MIT License), github.com/kepano/flexoki

*/
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: 600;
}

code,
kbd,
samp {
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 85%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.35em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

:root {
  --font-content: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans",
    Segoe UI, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-content);
  --font-mono: "Berkeley Mono", "IBM Plex Mono", "MonoLisa", "Source Code Pro",
    Menlo, SFMono-Regular, Consolas, "Roboto Mono", monospace;
  --border-radius: 4px;
  --font-small: 0.875em;
  --font-smaller: 0.8em;
  --wrap-wide: 1000px;
  --wrap-normal: 37em;
  --input-width: 20em;
  --image-radius: 6px;
  --line-height: 1.5;
}

@media (max-width: 860px) {
  :root {
    --wrap-normal: 88vw;
    --wrap-wide: 100vw;
    --input-width: 100%;
  }

  :root .wide {
    --border-radius: 0;
    --image-radius: 0;
  }
}

:root {
  --flexoki-black: #100f0f;
  --flexoki-black-rgb: 16, 15, 15;
  --flexoki-paper: #fffcf0;
  --flexoki-paper-rgb: 254, 252, 240;
  --flexoki-950: #1c1b1a;
  --flexoki-900: #282726;
  --flexoki-850: #343331;
  --flexoki-800: #403e3c;
  --flexoki-700: #575653;
  --flexoki-600: #6f6e69;
  --flexoki-500: #878580;
  --flexoki-300: #b7b5ac;
  --flexoki-200: #cecdc3;
  --flexoki-150: #dad8ce;
  --flexoki-100: #e6e4d9;
  --flexoki-50: #f2f0e5;
  --flexoki-200-rgb: 206, 205, 195;
  --flexoki-red-600: #af3029;
  --flexoki-red-400: #d14d41;
  --flexoki-orange-600: #bc5215;
  --flexoki-orange-400: #da702c;
  --flexoki-yellow-900: #4d3a0b;
  --flexoki-yellow-600: #ad8301;
  --flexoki-yellow-400: #d0a215;
  --flexoki-yellow-100: #fceeb8;
  --flexoki-green-600: #66800b;
  --flexoki-green-400: #879a39;
  --flexoki-cyan-950: #142625;
  --flexoki-cyan-600: #24837b;
  --flexoki-cyan-400: #3aa99f;
  --flexoki-cyan-50: #ebf2e7;
  --flexoki-blue-600: #205ea6;
  --flexoki-blue-400: #4385be;
  --flexoki-purple-600: #5e409d;
  --flexoki-purple-400: #8b7ec8;
  --flexoki-magenta-600: #a02f6f;
  --flexoki-magenta-400: #ce5d97;
}

:root,
.theme-light {
  --color-bg-primary: var(--flexoki-paper);
  --color-bg-primary-rgb: var(--flexoki-paper-rgb);
  --color-inverted-rgb: var(--flexoki-black-rgb);
  --color-bg-secondary: var(--flexoki-50);
  --color-tx-normal: var(--flexoki-black);
  --color-tx-normal-rgb: var(--flexoki-black-rgb);
  --color-tx-muted: var(--flexoki-600);
  --color-tx-faint: var(--flexoki-300);
  --color-ui-normal: var(--flexoki-100);
  --color-ui-hover: var(--flexoki-150);
  --color-ui-active: var(--flexoki-200);
  --color-highlight: var(--flexoki-yellow-100);
  --color-action: var(--flexoki-cyan-600);
  --color-bg-hover: var(--flexoki-cyan-50);
  --color-selection: rgba(187, 220, 206, 0.3);
  --color-re: var(--flexoki-red-600);
  --color-re-hover: var(--flexoki-red-400);
  --color-or: var(--flexoki-orange-600);
  --color-or-hover: var(--flexoki-orange-400);
  --color-ye: var(--flexoki-yellow-600);
  --color-ye-hover: var(--flexoki-yellow-400);
  --color-gr: var(--flexoki-green-600);
  --color-gr-hover: var(--flexoki-green-400);
  --color-cy: var(--flexoki-cyan-600);
  --color-cy-hover: var(--flexoki-cyan-400);
  --color-bl: var(--flexoki-blue-600);
  --color-bl-hover: var(--flexoki-blue-400);
  --color-pu: var(--flexoki-purple-600);
  --color-pu-hover: var(--flexoki-purple-400);
  --color-ma: var(--flexoki-magenta-600);
  --color-ma-hover: var(--flexoki-magenta-400);
}

.theme-dark {
  --color-bg-primary: var(--flexoki-black);
  --color-bg-primary-rgb: var(--flexoki-black-rgb);
  --color-inverted-rgb: var(--flexoki-paper-rgb);
  --color-bg-secondary: var(--flexoki-950);
  --color-tx-normal: var(--flexoki-200);
  --color-tx-normal-rgb: var(--flexoki-200-rgb);
  --color-tx-muted: var(--flexoki-500);
  --color-tx-faint: var(--flexoki-700);
  --color-ui-normal: var(--flexoki-900);
  --color-ui-hover: var(--flexoki-850);
  --color-ui-active: var(--flexoki-800);
  --color-highlight: var(--flexoki-yellow-900);
  --color-action: var(--flexoki-cyan-400);
  --color-bg-hover: var(--flexoki-cyan-950);
  --color-selection: rgba(30, 95, 91, 0.3);
  --color-re: var(--flexoki-red-400);
  --color-re-hover: var(--flexoki-red-600);
  --color-or: var(--flexoki-orange-400);
  --color-or-hover: var(--flexoki-orange-600);
  --color-ye: var(--flexoki-yellow-400);
  --color-ye-hover: var(--flexoki-yellow-600);
  --color-gr: var(--flexoki-green-400);
  --color-gr-hover: var(--flexoki-green-600);
  --color-cy: var(--flexoki-cyan-400);
  --color-cy-hover: var(--flexoki-cyan-600);
  --color-bl: var(--flexoki-blue-400);
  --color-bl-hover: var(--flexoki-blue-600);
  --color-pu: var(--flexoki-purple-400);
  --color-pu-hover: var(--flexoki-purple-600);
  --color-ma: var(--flexoki-magenta-400);
  --color-ma-hover: var(--flexoki-magenta-600);
}

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

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

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

.bg-tx-2 {
  background-color: var(--color-tx-muted);
}

.bg-tx-3 {
  background-color: var(--color-tx-faint);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-red-600 {
  background-color: var(--flexoki-red-600);
}

.bg-orange-600 {
  background-color: var(--flexoki-orange-600);
}

.bg-yellow-600 {
  background-color: var(--flexoki-yellow-600);
}

.bg-green-600 {
  background-color: var(--flexoki-green-600);
}

.bg-cyan-600 {
  background-color: var(--flexoki-cyan-600);
}

.bg-blue-600 {
  background-color: var(--flexoki-blue-600);
}

.bg-purple-600 {
  background-color: var(--flexoki-purple-600);
}

.bg-magenta-600 {
  background-color: var(--flexoki-magenta-600);
}

.bg-red-400 {
  background-color: var(--flexoki-red-400);
}

.bg-orange-400 {
  background-color: var(--flexoki-orange-400);
}

.bg-yellow-400 {
  background-color: var(--flexoki-yellow-400);
}

.bg-green-400 {
  background-color: var(--flexoki-green-400);
}

.bg-cyan-400 {
  background-color: var(--flexoki-cyan-400);
}

.bg-blue-400 {
  background-color: var(--flexoki-blue-400);
}

.bg-purple-400 {
  background-color: var(--flexoki-purple-400);
}

.bg-magenta-400 {
  background-color: var(--flexoki-magenta-400);
}

.gap1 {
  gap: 1rem;
}

.pa {
  padding: 1rem;
}

.pt {
  padding-top: 1rem;
}

.pr {
  padding-right: 1rem;
}

.pb {
  padding-bottom: 1rem;
}

.pl {
  padding-left: 1rem;
}

.ppa {
  padding: 2rem;
}

.ppt {
  padding-top: 2rem;
}

.ppr {
  padding-right: 2rem;
}

.ppb {
  padding-bottom: 2rem;
}

.ppl {
  padding-left: 2rem;
}

.pn1 {
  padding-top: 2rem;
}

.pn2 {
  padding-top: 4rem;
}

.pn3 {
  padding-top: 6rem;
}

.pn4 {
  padding-top: 8rem;
}

.ps1 {
  padding-bottom: 2rem;
}

.ps2 {
  padding-bottom: 4rem;
}

.ps3 {
  padding-bottom: 6rem;
}

.ps4 {
  padding-bottom: 8rem;
}

.st {
  margin-top: 1rem;
}

.sr {
  margin-right: 1rem;
}

.sb {
  margin-bottom: 1rem;
}

.sl {
  margin-left: 1rem;
}

.sst {
  margin-top: 2rem;
}

.ssr {
  margin-right: 2rem;
}

.ssb {
  margin-bottom: 2rem;
}

.ssl {
  margin-left: 2rem;
}

.mn1 {
  margin-top: 2rem;
}

.mn2 {
  margin-top: 4rem;
}

.mn3 {
  margin-top: 6rem;
}

.mn4 {
  margin-top: 8rem;
}

.ms1 {
  margin-bottom: 2rem;
}

.ms2 {
  margin-bottom: 4rem;
}

.ms3 {
  margin-bottom: 6rem;
}

.ms4 {
  margin-bottom: 8rem;
}

*,
* :before,
* :after {
  box-sizing: inherit;
}

::selection {
  background: var(--color-selection);
}

::-moz-selection {
  background: var(--color-selection);
}

html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

body {
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--color-bg-primary);
  font-family: var(--font-content);
  margin: 2vw auto 0 auto;
  line-height: var(--line-height);
  padding: 2rem 0 24rem;
  overflow-x: hidden;
  font-size: 1.8rem;
  font-size: calc(1.5rem + 0.25vw);
  color: var(--color-tx-normal);
}

small,
.small {
  font-size: var(--font-small);
  line-height: 1.4;
}

.smaller {
  font-size: var(--font-smaller);
  line-height: 1.4;
}

.font-ui {
  font-family: var(--font-ui);
}

.font-content {
  font-family: var(--font-content);
}

.font-mono {
  font-family: var(--font-mono);
}

mark {
  background-color: var(--color-highlight);
  color: var(--color-tx-normal);
}

footer {
  margin: 2em auto;
  max-width: var(--wrap-wide);
  width: var(--wrap-normal);
  padding-top: 1em;
}

iframe,
video {
  border-radius: var(--border-radius);
  display: block;
}

p {
  max-width: var(--wrap-normal);
}

blockquote {
  padding-left: 1.5em;
  margin: 1.5em 0;
  border-left: 2px solid var(--color-tx-normal);
}

blockquote p {
  margin: 0;
}

.l {
  text-align: left;
}

.r {
  text-align: right;
}

.c {
  text-align: center;
}

.cc {
  margin-left: auto;
  margin-right: auto;
}

.vt {
  vertical-align: top;
}

.ba {
  border: 1px solid var(--color-ui-normal);
}

.bt {
  border-top: 1px solid var(--color-ui-normal);
}

.br {
  border-right: 1px solid var(--color-ui-normal);
}

.bb {
  border-bottom: 1px solid var(--color-ui-normal);
}

.bl {
  border-left: 1px solid var(--color-ui-normal);
}

.ra {
  border-radius: var(--border-radius);
  overflow: hidden;
}

hr {
  width: 100%;
  border: 0;
  height: 1px;
  margin: 1.5em 0;
  background: var(--color-ui-normal);
}

content {
  display: block;
  max-width: var(--wrap-wide);
  width: var(--wrap-normal);
  margin-left: auto;
  margin-right: auto;
}

content img {
  margin-bottom: 0.5em;
}

content .wide {
  padding: 1.5em 0;
  max-width: Min(100vw, var(--wrap-wide));
  width: Min(100vw, var(--wrap-wide));
  margin-left: calc((Min(100vw, var(--wrap-wide)) - 100%) / -2);
}

figure {
  margin: 0;
  padding: 1.5em 0;
  text-align: center;
}

figcaption {
  font-size: var(--font-smaller);
  line-height: 1.4;
  color: var(--color-tx-muted);
  padding: 1em;
}

figcaption a {
  color: var(--color-tx-muted);
}

.fr {
  float: right;
}

flex,
.flex {
  display: flex;
}

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

.align-baseline {
  align-items: baseline;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.grid {
  display: grid;
}

.grid-columns {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.nowrap {
  white-space: nowrap;
}

.font-normal {
  font-weight: 400;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.line-height-loose {
  line-height: 1.6;
}

.line-height-tight {
  line-height: 1.3;
}

.wrap {
  max-width: var(--wrap-normal);
  margin-left: auto;
  margin-right: auto;
}

content hr {
  margin-top: 3rem;
  margin-bottom: 1rem;
  margin-top: calc(2em + 2vh);
  margin-bottom: calc(2em + 2vh);
  display: block;
  border: 0;
  background: none;
  text-align: center;
  overflow: visible;
}

content hr:before {
  content: "\2022\2022\2022";
  display: inline-block;
  font-size: 0.5em;
  font-size: calc(0.8em + 0.2vw);
  margin-left: 0.6em;
  letter-spacing: 1.25em;
  color: var(--color-tx-faint);
  position: relative;
  top: -0.75em;
}

.muted {
  color: var(--color-tx-muted);
}

.muted a {
  color: var(--color-tx-muted);
}

.faint {
  color: var(--color-tx-faint);
}

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

.font-medium {
  font-weight: 500;
}

nav {
  margin: 0 auto 3em;
  width: var(--wrap-normal);
  max-width: var(--wrap-wide);
}

@media (min-width: 600px) {
  .dkh {
    display: none;
  }
}

@media (max-width: 600px) {
  .mh {
    display: none;
  }

  .mobile-grid-rows {
    grid-auto-flow: row;
  }
}

.backlinks {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(2, 1fr);
}

.backlink {
  border: 1px solid var(--color-ui-normal);
  padding: 0.75em;
  border-radius: var(--border-radius);
  line-height: 1.3;
}

.backlink:hover {
  border-color: var(--color-ui-hover);
}

.backlink .small,
.backlink .smaller {
  line-height: 1.3;
}

@media (max-width: 600px) {
  .backlinks {
    grid-template-columns: repeat(1, 1fr);
  }
}

code,
kbd {
  font-family: var(--font-mono);
  background: var(--color-bg-secondary);
  padding: 0.1em 0.2em;
  border-radius: 4px;
  font-size: 90%;
}

kbd {
  font-weight: 600;
  border: 1px solid var(--color-ui-hover);
}

pre {
  font-family: var(--font-mono);
  border-radius: 4px;
  padding: 1em;
  font-size: 90%;
  border: 1px solid var(--color-ui-normal);
}

pre code {
  background-color: transparent;
}

div.highlight {
  display: grid;
}

.highlight {
  border-radius: 4px;
  overflow: auto;
  margin: 1em 0;
}

.highlight .c {
  color: var(--color-tx-faint);
}

.highlight .err {
  color: var(--color-re);
}

.highlight .k {
  color: var(--color-gr);
}

.highlight .p {
  color: var(--color-tx-muted);
}

.highlight .cm {
  color: var(--color-tx-faint);
}

.highlight .cp {
  color: var(--color-tx-faint);
}

.highlight .c1 {
  color: var(--color-tx-faint);
}

.highlight .cs {
  color: var(--color-tx-faint);
}

.highlight .ge {
  font-style: italic;
}

.highlight .gr {
  color: var(--color-re);
}

.highlight .gh {
  color: var(--color-tx-faint);
}

.highlight .go {
  color: var(--color-tx-muted);
}

.highlight .gp {
  color: var(--color-tx-muted);
}

.highlight .gu {
  color: var(--color-tx-muted);
}

.highlight .gt {
  color: var(--color-re);
}

.highlight .kc {
  color: var(--color-bl);
}

.highlight .kd {
  color: var(--color-bl);
}

.highlight .kp {
  color: var(--color-bl);
}

.highlight .kr {
  color: var(--color-bl);
}

.highlight .kt {
  color: var(--color-bl);
}

.highlight .m {
  color: var(--color-pu);
}

.highlight .s {
  color: var(--color-gr);
}

.highlight .na {
  color: var(--color-or);
}

.highlight .nb {
  color: var(--color-gr);
}

.highlight .nc {
  color: var(--color-bl);
}

.highlight .no {
  color: var(--color-cy);
}

.highlight .nn {
  color: var(--color-tx-muted);
}

.highlight .nv {
  color: var(--color-cy);
}

.highlight .o {
  color: var(--color-re);
}

.highlight .w {
  color: var(--color-tx-faint);
}

.highlight .mf {
  color: var(--color-pu);
}

.highlight .mh {
  color: var(--color-pu);
}

.highlight .mi {
  color: var(--color-pu);
}

.highlight .mo {
  color: var(--color-pu);
}

.highlight .sb {
  color: var(--color-gr);
}

.highlight .sc {
  color: var(--color-gr);
}

.highlight .sd {
  color: var(--color-gr);
}

.highlight .s2 {
  color: var(--color-cy);
}

.highlight .se {
  color: var(--color-re);
}

.highlight .sh {
  color: var(--color-gr);
}

.highlight .si {
  color: var(--color-gr);
}

.highlight .sx {
  color: var(--color-gr);
}

.highlight .sr {
  color: var(--color-re);
}

.highlight .s1 {
  color: var(--color-cy);
}

.highlight .ss {
  color: var(--color-re);
}

.highlight .bp {
  color: var(--color-tx-faint);
}

.highlight .vc {
  color: var(--color-cy);
}

.highlight .vg {
  color: var(--color-cy);
}

.highlight .vi {
  color: var(--color-cy);
}

.highlight .il {
  color: var(--color-pu);
}

.footnote {
  color: var(--color-tx-muted);
  text-decoration: none;
  font-weight: 500;
  padding-left: 0.1em;
}

.reversefootnote {
  color: var(--color-tx-muted);
  text-decoration: none;
}

.footnotes {
  padding-top: 4em;
}

.footnotes:before {
  content: "Footnotes";
  padding-bottom: 0.25em;
  color: var(--color-tx-muted);
  display: block;
}

.footnotes li p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin-bottom: 0;
  padding-bottom: 0;
}

h1 {
  font-weight: 500;
  font-size: 2em;
  font-size: calc(1.35em + 0.55vw);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 0.25em;
}

h2 {
  font-weight: 500;
  font-size: 1.4em;
  font-size: calc(1em + 0.2vw);
  letter-spacing: -0.015em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

h3 {
  font-weight: 500;
  font-size: 1.2em;
  font-size: 1em;
  line-height: 1.3;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1em;
}

h5 {
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  margin-bottom: 1em;
  letter-spacing: 0.05em;
  font-size: 1.4rem;
}

content h2 {
  margin-top: 2em;
}

content h1 + h2,
content h2 + h3 {
  margin-top: 1em;
}

content h3 {
  margin-top: 1.5em;
}

h1 a,
h1 a:visited,
h1 a:link {
  color: var(--color-tx-normal);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--color-tx-normal);
  text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--color-action);
}

h1 a .muted:hover,
h2 a .muted:hover,
h3 a .muted:hover,
h4 a .muted:hover,
h5 a .muted:hover,
h6 a .muted:hover {
  color: var(--color-tx-muted);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
  border-radius: var(--image-radius);
}

body:not(.theme-dark) .multiply {
  mix-blend-mode: multiply;
}

.desaturate {
  filter: grayscale(100%);
}

.theme-dark .invert {
  filter: invert(1);
}

.theme-dark .invert.multiply {
  mix-blend-mode: screen;
}

.hover-color {
  filter: grayscale(100%);
  transition: filter 0.2s ease-in-out;
}

.hover-color:hover {
  filter: grayscale(0%);
  transition: filter 0.2s ease-in-out;
}

img.outline {
  border: 1px solid var(--color-ui-normal);
}

.aspect-square {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
  color: var(--color-tx-normal);
  text-decoration: underline;
}

a:hover {
  color: var(--color-action);
  border-color: var(--color-action);
}

a:focus {
  outline: none;
  background-color: var(--color-bg-hover);
}

a.plain,
a.muted {
  text-decoration: none;
}

content
  a:not(.plain):not(.tag):not(.internal-link):not(.footnote):not(
    .reversefootnote
  ) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25' /%3E%3C/svg%3E%0A");
  background-position: right 33%;
  background-repeat: no-repeat;
  background-size: 0.7em;
  padding-right: 0.75em;
}

.invalid-link {
  color: var(--color-tx-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-ui-normal);
  cursor: not-allowed;
}

ul > li {
  list-style: disc;
}

ol,
ul {
  padding: 0.5rem 0 1rem 1em;
  margin: 0 0 0 0.5em;
}

ol > li,
ul > li {
  padding: 0.15rem 0;
}

ol > li::marker,
ul > li::marker {
  color: var(--color-tx-faint);
}

ul > li::marker {
  font-size: 92%;
}

@media (min-width: 600px) {
  ul.list-plain {
    padding-inline-start: 0;
    margin-left: 0;
  }

  ul.list-plain > li {
    list-style: none;
  }
}

@media (max-width: 600px) {
  ol > li,
  ul > li {
    padding: 0.25rem 0;
  }
}

table {
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 90%;
}

tr {
  border-bottom: 1px solid var(--color-ui-normal);
}

td {
  padding: 0.5em 1em 0.5em 0;
  line-height: 1.3;
}

th:not(:last-child) {
  padding-right: 1em;
}

td:last-child {
  padding-right: 0;
}

th {
  text-align: left;
  font-weight: 600;
}

.table-top td {
  vertical-align: top;
}

.table-col-first-md td:first-child {
  width: 12em;
}

.table-col-last-md td:last-child {
  width: 12em;
}

@media (max-width: 600px) {
  .table-mobile-wide table {
    width: 106%;
  }

  .table-mobile-wide table td {
    min-width: 16em;
  }

  .table-col-first-md td:first-child {
    min-width: 9em;
  }
}

.tag {
  border: 1px solid var(--color-ui-normal);
  padding: 0.1em 0.5em 0.15em;
  border-radius: 1em;
  font-size: var(--font-smaller);
  color: var(--color-tx-muted);
  line-height: 2;
  text-decoration: none;
}

.tag:hover {
  box-shadow: none;
  border-radius: 1em;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-tx-normal);
}

label {
  color: var(--color-tx-normal);
  display: block;
  padding: 0 0 0.2em 0;
}

input:focus {
  outline: none;
}

::-webkit-input-placeholder {
  color: var(--color-tx-muted);
}

::-moz-placeholder {
  color: var(--color-tx-muted);
}

::-ms-placeholder {
  color: var(--color-tx-muted);
}

::placeholder {
  color: var(--color-tx-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border-radius: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--color-ui-normal);
  margin-bottom: 1.5em;
  padding: 0.5em 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-bottom: 1px solid var(--color-action);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: var(--input-width);
}

input[type="submit"],
button {
  -webkit-appearance: none;
  border-radius: 3px;
  background-color: var(--color-tx-normal);
  border: 1px solid var(--color-tx-normal);
  color: var(--color-bg-primary);
  font-weight: 400;
  padding: 0.5em 1em;
}

input[type="submit"]:hover,
button:hover {
  border: 1px solid var(--color-action);
  background-color: var(--color-action);
  cursor: pointer;
}

#popover-wrapper {
  color-scheme: light dark;
  background: var(--color-bg-primary);
  padding: 1.5em;
  border: 1px solid var(--color-ui-hover);
  border-radius: 6px;
  overflow: auto;
  position: absolute;
  width: 380px;
  max-width: 80vw;
  height: 250px;
  max-height: 70vh;
  font-size: 0.825em;
  box-shadow: 0 5px 20px 2px rgba(var(--flexoki-black-rgb), 0.2);
  z-index: 9999;
  transition: opacity 250ms ease-in-out;
  animation: fadein 250ms ease-in-out forwards;
}

#popover-wrapper:hover {
  animation: fadein 250ms ease-in-out backwards;
}

@keyframes fadein {
  from {
    margin-top: 20px;
    opacity: 0;
    pointer-events: none;
  }

  to {
    margin-top: 0px;
    opacity: 1;
    pointer-events: auto;
  }
}

#popover-content > h1 {
  margin-top: 0;
  font-size: 1.25em;
}

#popover-content .ms2 {
  margin-bottom: 2rem;
}

.theme-dark #popover-wrapper {
  background: var(--color-bg-secondary);
  box-shadow: 0 5px 20px 2px rgba(var(--flexoki-black-rgb), 1);
}

#theme-toggle {
  height: 20px;
  width: 36px;
  display: block;
  position: relative;
  border: none;
  cursor: pointer;
  float: right;
}

#theme-toggle:hover .theme-toggle-switch {
  background-color: var(--color-action);
}

.theme-toggle-slide {
  height: 20px;
  border: 1px solid var(--color-ui-normal);
  border-radius: 24px;
  width: 100%;
  position: absolute;
}

.theme-toggle-switch {
  position: absolute;
  z-index: 9;
  top: 1px;
  left: 1px;
  right: auto;
  width: 18px;
  height: 18px;
  transition: left 0.1s linear;
  background-color: var(--color-tx-muted);
  -webkit-mask-size: 18px;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.theme-dark .theme-toggle-switch {
  left: 16px;
  background-color: var(--color-tx-normal);
  transition: left 0.1s linear;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z' /%3E%3C/svg%3E");
}

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