@font-face {
font-family: "Inter";
  font-weight: 500;
  font-display: swap;
  src: url("Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 800;
  font-display: swap;
  src: url("Inter-ExtraBold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("Inter-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("Inter-ExtraBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "GeistMono";
  font-weight: normal;
  font-display: swap;
  src: url("GeistMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "GeistMono";
  font-weight: bold;
  font-display: swap;
  src: url("GeistMono-Bold.woff2") format("woff2");
}

:root {
  --dark-rgb: 19, 30, 38; --dark: rgb(var(--dark-rgb));
  --lite-rgb: 238, 238, 238; --lite: rgb(var(--lite-rgb));

  /* colors from the "Flexoki" theme */
  --red-400: #d14d41;
  --orange-400: #da702c;
  --yellow-400: #d0a215;
  --green-400: #879a39;
  --cyan-400: #3aa99f;
  --blue-400: #4385be;
  --purple-400: #8b7ec8;
  --magenta-400: #ce5d97;

  --red-600: #af3029;
  --orange-600: #bc5215;
  --yellow-600: #ad8301;
  --green-600: #66800b;
  --cyan-600: #24837b;
  --blue-600: #205ea6;
  --purple-600: #5e409d;
  --magenta-600: #a02f6f;

  @media (prefers-color-scheme: dark) {
    --re: var(--red-400);
    --or: var(--orange-400);
    --ye: var(--yellow-400);
    --gr: var(--green-400);
    --cy: var(--cyan-400);
    --bl: var(--blue-400);
    --pu: var(--purple-400);
    --ma: var(--magenta-400);

    --bg: var(--dark);
    --fg: var(--lite);
    --fg2: rgba(var(--lite-rgb), .8);
    --fg3: rgba(var(--lite-rgb), .5);
    --fg4: rgba(var(--lite-rgb), .15);
    --ac: var(--bl);
  }
  @media (prefers-color-scheme: light) {
    --re: var(--red-600);
    --or: var(--orange-600);
    --ye: var(--yellow-600);
    --gr: var(--green-600);
    --cy: var(--cyan-600);
    --bl: var(--blue-600);
    --pu: var(--purple-600);
    --ma: var(--magenta-600);

    --bg: var(--lite);
    --fg: var(--dark);
    --fg2: rgba(var(--dark-rgb), .8);
    --fg3: rgba(var(--dark-rgb), .5);
    --fg4: rgba(var(--dark-rgb), .15);
    --ac: var(--bl);
  }

  font-family: Inter, sans-serif;
  font-weight: 500;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-size: 18px;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

nav {
  align-items: center;
  display: flex;
  height: 64px;
  margin: 16px 0 32px;

  a, img, picture {
    height: 100%;
  }

  .fill {
    flex-grow: 1;
  }
}

main > * {
  margin-inline: 8px;
}

footer {
  border-top: 1px solid var(--fg3);
  color: var(--fg3);
  font-size: .9em;
  margin-top: 2em;
  padding: 1em;
}

/* Inline */

h1, h2, h3 {
  font-weight: 800;
}

b {
  font-weight: 800;
}

a {
  color: currentColor;
}
a:hover {
  text-decoration: none;
}
a[href^="https://"]::after,
a[href^="http://"]::after {
  content: "↗";
}

mark {
  background: var(--ac);
  border-radius: 4px;
  color: var(--lite);
  padding-inline: 4px;
}

code {
  background: var(--fg4);
  border-radius: 4px;
  font-family: "GeistMono", monospace;
  padding: 0 4px;
}

.nowrap {
  white-space: nowrap;
}

/* Blocks */

ol {
  padding-inline-start: 1.3em;
}
ul {
  list-style-type: "\2012";
  padding-inline-start: 1em;
}
ul > li {
  padding-left: .5em;
  margin-top: .5em;
}

p > img:only-child,
.imageblock img {
  border-radius: 16px;
  width: 100%;
}

blockquote {
  margin-inline: 0;
  padding-inline: 3em;
  position: relative;

  &::before {
    content: "\275E";
    position: absolute;
    left: 0;
    top: -.33em;
    font-size: 3em;
    color: var(--ac);
  }
}
.attribution {
  color: var(--fg2);
  padding-inline: 3em;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 100%;
}
tr {
  &:first-child {
    border-block-start: 2px solid var(--fg3);
  }
  &:last-child {
    border-block-end: 2px solid var(--fg3);
  }
}
th, td {
  border-block: 1px solid var(--fg3);
  padding: 8px 12px;
}
th {
  border-block-end-width: 2px;
  text-align: left;
}
p.tableblock {
  margin: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--fg3);
  height: 1em;
  margin-block: 2em 1em;
  overflow: visible;
  position: relative;

  &::before {
    background: var(--bg);
    color: var(--fg2);
    content: "✼✼✼";
    font-size: 1.25em;
    left: 50%;
    letter-spacing: .5em;
    padding-inline: 1em .5em; /* letter-spacing after the last character */
    position: absolute;
    transform: translate(-50%, -50%);
  }
}

pre code {
  background: unset;
  border: unset;
  padding: unset;
}
pre[lang], .listingblock pre {
  border-radius: 16px;
  box-sizing: border-box;
  padding: 12px 16px;
  width: 100%;
}

.title {
  color: var(--fg2);
  text-align: right;
}

.admonition {
  border-radius: 8px;
  border: 1px solid var(--fg4);
  margin-block: 1em;
  padding: 1em 1em .5em;
  position: relative;

  &::before {
    background: var(--ac);
    border-radius: 4px;
    content: attr(label);
    font-size: .85em;
    font-weight: 600;
    left: .5em;
    padding: 2px 4px;
    position: absolute;
    top: calc(-.5em - 2px);
  }
  &.admonition-note::before { background: var(--bl); }
  &.admonition-tip::before { background: var(--gr); }
  &.admonition-caution::before { background: var(--re); }
  &.admonition-warning::before { background: var(--or); }
  &.admonition-important::before {
    background: var(--ye);
    color: var(--dark);
  }
}

.sidebarblock,
.exampleblock {
  border-radius: 8px;
  border: 1px solid var(--fg4);
  margin-block: 1em;
  padding: .5em 1em;
}

.footnote {
  font-size: .85em;
  color: var(--fg2);
}

/* custom roles */

.arch-component {
  >h2::before,
  >h3::before,
  >h4::before,
  >h5::before {
    background-image: var(--icon-component);
    background-size: contain;
    content: "";
    display: inline-block;
    height: 1em;
    margin: 0 .5em -3px 0;
    width: 1em;
  }
}


:root {
  --icon-component: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMzEuOTk5OTk4IgogICBoZWlnaHQ9IjMxLjk5OTk5OCIKICAgdmlld0JveD0iMCAwIDguNDY2NjY2IDguNDY2NjY2MSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMSIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJsYXllcjEiPgogICAgPHBhdGgKICAgICAgIGQ9Im0gNC43NjE0NjY1LDEuMDU4ODUwMSBjIC0wLjkzODQ4MjcsMCAtMS43ODI2ODA0LDAuNDA4OTQxMyAtMi4zNjQxOTY4LDEuMDU4MzMzMyBIIDEuMzIyMzk5OSBjIC0wLjQzNTE2MDk2LDAgLTAuNzkzMjMzMjMsMC4zNTc1NTU1IC0wLjc5MzIzMzIzLDAuNzkyNzE2NSAwLDAuNDM1MTYwOSAwLjM1ODA3MjI3LDAuNzk1MzAwMyAwLjc5MzIzMzIzLDAuNzk1MzAwMyBIIDEuNjMxNDI1IEMgMS42MTY4NjI4LDMuNzkxOTU4NCAxLjYwNjIxNjIsMy44Nzk3NzggMS41OTg4Njg4LDMuOTY4NzUgSCAxLjMyMjM5OTkgYyAtMC40MzUxNjA5NiwwIC0wLjc5MzIzMzIzLDAuMzU3NTU1NiAtMC43OTMyMzMyMywwLjc5MjcxNjUgMCwwLjQzNTE2MSAwLjM1ODA3MjI3LDAuNzk1MzAwMyAwLjc5MzIzMzIzLDAuNzk1MzAwMyBIIDEuODc3NDA0OCBDIDIuMzc5OTk1LDYuNjQ4MzMyMSAzLjQ4MzM2MzYsNy40MDgzMzMzIDQuNzYxNDY2NSw3LjQwODMzMzMgNi41MTE4MzY3LDcuNDA4MzMzMyA3LjkzNzUsNS45ODI2Njk5IDcuOTM3NSw0LjIzMjI5OTggNy45Mzc1LDIuNDgxOTI5NyA2LjUxMTgzNjcsMS4wNTg4NTAyIDQuNzYxNDY2NSwxLjA1ODg1MDEgWiBtIDAsMC41MjkxNjY3IGMgMS40NjQzODcxLDAgMi42NDY4NjY4LDEuMTc5ODk1OSAyLjY0Njg2NjgsMi42NDQyODMgMCwxLjQ2NDM4NyAtMS4xODI0Nzk3LDIuNjQ2MzUwMSAtMi42NDY4NjY4LDIuNjQ2MzUwMSAtMC45ODE1MzgsMCAtMS44MzQ5NzgzLC0wLjUzMDY5MjQgLTIuMjkxMzMzLC0xLjMyMTg4MzEgaCAwLjQzOTc2NjQgYyAwLjQzNTE2MDksMCAwLjc5NTMwMDMsLTAuMzYwMTM5MyAwLjc5NTMwMDMsLTAuNzk1MzAwMyAwLC0wLjQzNTE2MDkgLTAuMzYwMTM5NCwtMC43OTI3MTY1IC0wLjc5NTMwMDMsLTAuNzkyNzE2NSBIIDIuMTMwMTAyNSBjIDAuMDA4NzcsLTAuMDg5MjkxIDAuMDIxOTAxLC0wLjE3NzEzMjYgMC4wMzkyNzQsLTAuMjYzNTQ5OCBoIDAuNzQwNTIzMyBjIDAuNDM1MTYwOSwwIDAuNzk1MzAwMywtMC4zNjAxMzk0IDAuNzk1MzAwMywtMC43OTUzMDAzIDAsLTAuMzU5MDA0NyAtMC4yNDUxMTE3LC0wLjY2NDk1OTkgLTAuNTc1MTU4NywtMC43NjExOTM4IEMgMy41Nzg5NDA5LDEuNzk3MjEwNCA0LjE0NDk1MzEsMS41ODgwMTY4IDQuNzYxNDY2NSwxLjU4ODAxNjggWiBNIDEuMzIyMzk5OSwyLjY0NjM1MDEgaCAwLjY5MDkxMzkgMC42Mjk0MTg5IDAuMjY3MTY3MiBjIDAuMTUxMTU1NSwwIDAuMjY2MTMzNSwwLjExMjM5NDIgMC4yNjYxMzM2LDAuMjYzNTQ5OCAwLDAuMTUxMTU1NSAtMC4xMTQ5NzgxLDAuMjY2MTMzNSAtMC4yNjYxMzM2LDAuMjY2MTMzNiBIIDIuMzM1MjU4IDEuNzY4ODg0MyAxLjMyMjM5OTkgYyAtMC4xNTExNTU2LDAgLTAuMjYzNTQ5OCwtMC4xMTQ5NzgxIC0wLjI2MzU0OTgsLTAuMjY2MTMzNiAwLC0wLjE1MTE1NTYgMC4xMTIzOTQyLC0wLjI2MzU0OTggMC4yNjM1NDk4LC0wLjI2MzU0OTggeiBtIDAsMS44NTE1NjY2IGggMC4yNzY0Njg5IDAuNTMxMjMzNyAwLjc3OTc5NzQgYyAwLjE1MTE1NTUsMCAwLjI2NjEzMzUsMC4xMTIzOTQzIDAuMjY2MTMzNiwwLjI2MzU0OTggMCwwLjE1MTE1NTYgLTAuMTE0OTc4MSwwLjI2NjEzMzYgLTAuMjY2MTMzNiwwLjI2NjEzMzYgSCAyLjIzODEwNjMgMS42ODg3ODU4IDEuMzIyMzk5OSBjIC0wLjE1MTE1NTYsMCAtMC4yNjM1NDk4LC0wLjExNDk3OCAtMC4yNjM1NDk4LC0wLjI2NjEzMzYgMCwtMC4xNTExNTU1IDAuMTEyMzk0MiwtMC4yNjM1NDk4IDAuMjYzNTQ5OCwtMC4yNjM1NDk4IHoiCiAgICAgICBzdHlsZT0iYmFzZWxpbmUtc2hpZnQ6YmFzZWxpbmU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtvcGFjaXR5OjE7dmVjdG9yLWVmZmVjdDpub25lO2ZpbGw6I2ZmZmZmZjtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO3N0b3AtY29sb3I6IzAwMDAwMDtzdG9wLW9wYWNpdHk6MSIKICAgICAgIGlkPSJwYXRoMzEiIC8+CiAgPC9nPgo8L3N2Zz4K");
}