@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/css/resources/archivo-latin-variable.woff2") format("woff2"); }
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/css/resources/jetbrains-mono-latin-variable.woff2") format("woff2"); }
:root {
  --bg: #F7F7F3;
  --ink: #191A16;
  --copy: #474C42;
  --muted: #71766A;
  --line: #DBDDD2;
  --panel: #EFEFE8;
  --code-bg: #1A1918;
  --code-fg: #D8D6D0;
  --acc: #A32830;
  --acc-soft: #FBE9EA;
  --red: #C33540; }

[data-theme="dark"] {
  --bg: #141312;
  --ink: #F5F3EF;
  --copy: #B8B4AD;
  --muted: #8D8983;
  --line: #2E2B28;
  --panel: #1A1917;
  --code-bg: #0E0D0B;
  --code-fg: #D8D6D0;
  --acc: #E07078;
  --acc-soft: #3B1518;
  --red: #E07078; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  scroll-padding-top: 76px; }

body {
  font-family: "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background: var(--bg);
  color: var(--copy);
  font-size: 16px;
  line-height: 1.7; }

a {
  color: var(--acc);
  text-decoration: none; }

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px; }

body.toc2 {
  padding-left: 280px; }

#toc.toc2 {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 280px;
  overflow-y: auto;
  padding: 28px 18px 40px 24px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  font-size: 13.5px; }

#toc #toctitle {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px; }

#toc ul {
  list-style: none; }

#toc a {
  display: block;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 7px;
  border-left: 2px solid transparent; }

#toc a:hover {
  color: var(--ink);
  background: var(--panel);
  text-decoration: none; }

#toc a.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--acc-soft);
  border-left: 2px solid var(--acc);
  border-radius: 0 7px 7px 0; }

#toc ul ul {
  margin: 2px 0 6px 12px; }

#toc ul ul a {
  font-size: 12.5px;
  padding: 3.5px 10px; }

@media (max-width: 900px) {
  body.toc2 {
    padding-left: 0; }

  #toc.toc2 {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px; } }
#header, #content {
  max-width: none;
  padding: 0 32px 0 52px; }

@media (max-width: 900px) {
  #header, #content {
    padding: 0 20px; } }
#header {
  padding-top: 44px; }

#header h1 {
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 10px; }

#header .details {
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 8px; }

#content {
  padding-top: 20px;
  padding-bottom: 90px; }

h2, h3, h4 {
  color: var(--ink);
  line-height: 1.25;
  margin: 2.2em 0 .6em;
  letter-spacing: -.01em; }

h2 {
  font-size: 26px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px; }

h3 {
  font-size: 20px;
  font-weight: 700; }

h4 {
  font-size: 16.5px;
  font-weight: 700; }

.sect1 + .sect1 {
  margin-top: 2.5em; }

p, ul, ol, dl {
  margin-bottom: 1.1em; }

#content ul, #content ol {
  margin-left: 1.3em; }

#content li {
  margin-bottom: .4em; }

b, strong {
  color: var(--ink); }

code {
  font-family: "JetBrains Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size: .875em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .1em .35em;
  color: var(--ink); }

.listingblock {
  position: relative;
  margin: 0 0 1.3em; }

.sc-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 5px 12px;
  background: var(--red);
  cursor: pointer; }

.sc-copy:hover {
  background: var(--acc); }

[data-theme="dark"] .sc-copy {
  color: #191A16; }

.listingblock .title {
  font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px; }

.listingblock pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
  font-size: 13px;
  line-height: 1.75; }

.listingblock pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 1em; }

.admonitionblock {
  margin: 0 0 1.3em; }

.admonitionblock > table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg); }

.admonitionblock td.icon {
  vertical-align: top;
  padding: 14px 0 14px 16px;
  width: 1%; }

.admonitionblock td.icon .title {
  font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: 100px;
  padding: 4px 10px;
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap; }

.admonitionblock.tip td.icon .title {
  background: var(--acc-soft);
  color: var(--acc); }

.admonitionblock.important td.icon .title, .admonitionblock.warning td.icon .title, .admonitionblock.caution td.icon .title {
  background: var(--acc-soft);
  color: var(--red); }

.admonitionblock td.content {
  padding: 12px 16px;
  font-size: 15px; }

.admonitionblock td.icon i {
  font-style: normal;
  font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: 100px;
  padding: 4px 10px;
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap; }

.admonitionblock td.icon i::after {
  content: attr(title); }

.admonitionblock.tip td.icon i {
  background: var(--acc-soft);
  color: var(--acc); }

.admonitionblock.important td.icon i, .admonitionblock.warning td.icon i, .admonitionblock.caution td.icon i {
  background: var(--acc-soft);
  color: var(--red); }

table.tableblock {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.3em;
  font-size: 15px; }

table.tableblock th, table.tableblock td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line); }

table.tableblock thead th {
  background: var(--panel);
  color: var(--ink);
  font-weight: 700; }

.quoteblock {
  border-left: 3px solid var(--acc);
  background: var(--panel);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 1.3em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0; }

#footer {
  max-width: none;
  padding: 22px 32px 60px 52px;
  border-top: 1px solid var(--line);
  margin-top: 40px; }

#footer-text {
  font-size: 12.5px;
  color: var(--muted); }

@media print {
  #toc.toc2 {
    display: none; }

  body.toc2 {
    padding-left: 0; } }