@import url(https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css);
@import url(https://cdn.jsdelivr.net/gh/RoyalIcing/tela@caef3d944ed2c707a4bec2bdd70dffe443a29b30/tela.css);
@import url(https://unpkg.com/prism-theme-night-owl@1.4.0/build/style.css);
/* @import url(https://unpkg.com/prism-theme-night-owl@1.4.0/build/light.css); */

:root {
  --Link--color: white;
  --Link--text-decoration: none;
  --color-highlight-subtle: rgba(255, 255, 255, 0.1);

  font-size: 150%;
  line-height: 1.35;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: white;
  background: #222;
  --Link--current-page: underline;
  --Link--current-page--border-width: 0 0 3px 0;
}

* {
  margin: 0;
  padding: 0;
  border: 0 solid currentColor;
}

a {
  padding: var(--Link--padding);
  color: var(--Link--color);
  text-decoration: var(--Link--text-decoration);
}
a:hover {
  background: var(--Link--background--hover);
  text-decoration: var(--Link--text-decoration--hover);
}
a[aria-current="page"] {
  color: var(--Link-current-page);
  background: var(--Link-current-page);
  border-width: var(--Link--current-page--border-width);
}

main > *,
header[role="banner"] > * {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  padding: 0 1rem;
}
main {
  --Link--text-decoration: underline;

  padding-bottom: 6rem;
}
main > pre {
  max-width: unset;
}
main > pre > code {
  display: block;
  max-width: 40rem;
  margin: auto;
}

header[role="banner"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

nav ul {
  list-style: none;
  font-size: 1.25rem;
}
nav a {
  font-weight: bold;
}

h2,
h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
h1 {
  font-size: 2rem;
  letter-spacing: 0.03em;
}
h2 {
  margin-top: 3rem;
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
  font-weight: 400;
}
pre {
  margin-bottom: 1rem;
}
code:not(pre *) {
  background-color: var(--color-highlight-subtle);
}

ul[class] {
  list-style: none;
}

.color-T {
  color: #62c6ff;
}
.color-E {
  color: #ffcb55;
}
.color-L {
  color: #ff94cf;
}
.color-A {
  color: #c98aff;
}

.example {
  padding: 1rem;
  border: 1px solid rgb(201, 216, 228, 0.4);
}
.example li:not([role="separator"]) {
  padding: 0.25em;
  background-color: rgb(201, 216, 228, 0.2);
}

:root {
  --link--padding-x: 0;
  --link--padding-y: 0;
  --link--color: var(--theme-primary);
  --link--decoration: underline;
  --link--decoration--hover: initial;
}

* {
  --py: 0;
  --px: 0;
  padding-top: var(--py);
  padding-bottom: var(--py);
  padding-left: var(--px);
  padding-right: var(--px);
}

a {
  padding-left: var(--link--padding-x);
  padding-right: var(--link--padding-x);
  padding-top: var(--link--padding-y);
  padding-bottom: var(--link--padding-y);
  color: var(--link--color);
  text-decoration: var(--link--decoration);
}
a:hover {
  --link--decoration--hover: var(--link--decoration);
  text-decoration: var(--link--decoration--hover);
  background-color: var(--link--bg--hover);
}

[data-links~="current-color"] {
  --link--color: currentColor;
}
[data-links~="no-underline"] {
  --link--decoration: none;
}
[data-links~="underline-on-hover"] {
  --link--decoration: none;
  --link--decoration--hover: underline;
}

/* Visually hidden */

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

/* Sizing */

[data-measure] {
  max-width: var(--measure);
  --content-px: 1rem;
}
[data-measure~="center"] {
  margin-left: auto;
  margin-right: auto;
}
[data-measure~="full"] {
  max-width: none;
  width: 100%;
}
[data-measure~="bleed"] {
  --content-px: 0;
}
[data-measure~="md"] {
  max-width: var(--measure);
}

[data-p~="1"] {
  --px: 1rem;
  --py: 1rem;
  /* padding: 1rem; */
}
[data-p~="1/2"] {
  --px: 0.5rem;
  --py: 0.5rem;
  /* padding: 0.5rem; */
}

/* Grid */

.G {
  display: grid;
  grid-template-columns: repeat(var(--G-column-count), minmax(0, 1fr));
}
.G.\|-\+-\| { --G-column-count: 2 }
.G.\|-\+-\+-\| { --G-column-count: 3 }
.G.\|-\+-\+-\+-\| { --G-column-count: 4 }

/* Flex row */

.X {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--X-justify, center);
}
.X.-X- { --X-justify: center }
.X.\|X- { --X-justify: flex-start }
.X.-X\| { --X-justify: flex-end }
.X.\|X-X\| { --X-justify: space-between }
.X.\|-X-X-\| { --X-justify: space-around }

.X > * + * {
  margin-left: var(--X-spacing);
}
.X > *:first-child {
  margin-left: var(--X-outer);
}
.X > *:last-child {
  margin-right: var(--X-outer);
}
.X > [role="separator"] {
  margin-left: auto;
}

/* Flex column */

.Y {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
}

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

.Y > * + * {
  margin-top: var(--Y-spacing);
}
.Y > * {
  margin-left: var(--X-spacing);
  margin-right: var(--X-spacing);
}

.X hr, hr[data-x], hr[data-y] {
  border: none;
}

.X hr {
  margin-left: auto;
}

hr[data-x="1"] {
  margin-left: 1rem;
}
hr[data-x="1/2"] {
  margin-left: 0.5rem;
}
hr[data-y="1"] {
  margin-top: 1rem;
}
hr[data-y="1/2"] {
  margin-top: 0.5rem;
}

/* Font size & line height */

[data-text] {
  line-height: var(--text--line-height, 1.25);
}
[data-text~="0"] {
  font-size: var(--size-0);
}
[data-text~="-1"] {
  font-size: var(--size--1);
}
[data-text~="bold"] {
  font-weight: bold;
}
[data-text~="italic"] {
  font-style: italic;
}

[data-size="+7"] {
  font-size: var(--size-7);
}
[data-size="+6"] {
  font-size: var(--size-6);
}
[data-size="+5"] {
  font-size: var(--size-5);
}
[data-size="+4"] {
  font-size: var(--size-4);
}
[data-size="+3"] {
  font-size: var(--size-3);
}
[data-size="+2"] {
  font-size: var(--size-2);
}
[data-size="+1"] {
  font-size: var(--size-1);
}
[data-size="0"] {
  font-size: var(--size-0);
}
[data-size="-1"] {
  font-size: var(--size--1);
}
[data-size="-2"] {
  font-size: var(--size--2);
}

/* Color */

[data-tone] {
  color: var(--tone-500);
}
[data-tone="----"] {
  color: var(--tone-100);
}
[data-tone="---"] {
  color: var(--tone-200);
}
[data-tone="--"] {
  color: var(--tone-300);
}
[data-tone="-"] {
  color: var(--tone-400);
}
[data-tone="+"] {
  color: var(--tone-600);
}
[data-tone="++"] {
  color: var(--tone-700);
}
[data-tone="+++"] {
  color: var(--tone-800);
}
[data-tone="++++"] {
  color: var(--tone-900);
}

/* MEDIUM BREAKPOINT */

/* Flex column (medium) */

/* 48em ~= 768px */
@media (min-width: 48em) {
  .X\>\=48em {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}