body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.doc h2 { font-size: 1.6rem; font-weight: 400; margin: 3rem 0 1rem; }
.doc h2:first-child, .doc .callout + h2 { margin-top: 0; }
.doc h3 { font-size: 1.15rem; font-weight: 500; margin: 1.75rem 0 .5rem; }
.doc p, .doc li { line-height: 1.7; color: rgb(64 64 64); }
.doc ol { list-style: decimal; padding-left: 1.4rem; } .doc ul { list-style: disc; padding-left: 1.4rem; }
.doc li + li { margin-top: .25rem; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: rgb(0 0 0 / .06); padding: .1em .35em; border-radius: .35rem; }
.doc pre code { background: none; padding: 0; }
.doc a { color: #0284c7; } .doc a:hover { text-decoration: underline; }
.doc .callout { margin-bottom: 2.5rem; padding: .9rem 1.1rem; border-radius: 1rem; background: rgb(254 243 199); color: rgb(146 64 14); font-size: .9rem; line-height: 1.6; }
.doc .question { color: rgb(180 83 9); }
#toc a.active { color: #0284c7; font-weight: 500; }
@media (prefers-color-scheme: dark) {
  .doc p, .doc li { color: rgb(212 212 212); }
  .doc code { background: rgb(255 255 255 / .08); }
  .doc a { color: #38bdf8; }
  .doc .callout { background: rgb(120 53 15 / .35); color: rgb(253 230 138); }
  .doc .question { color: rgb(252 211 77); }
}
/* Network diagrams: light and dark versions, swapped by the system theme */
.doc figure.diagram { margin: 1.5rem 0 2rem; padding: 1.5rem; border-radius: 1.25rem; background: white; box-shadow: 0 1px 2px rgb(0 0 0 / .05); text-align: center; }
.doc figure.diagram img { display: inline-block; width: 100%; max-width: 340px; height: auto; }
.doc figure.diagram img.dark { display: none; }
.doc figure.diagram figcaption { margin-top: .75rem; font-size: .85rem; color: rgb(115 115 115); }
.doc .grid-2 { display: grid; gap: 1rem; } @media (min-width: 640px) { .doc .grid-2 { grid-template-columns: 1fr 1fr; } }
.doc .grid-2 figure.diagram { margin: 0; }
.doc table { width: 100%; font-size: .9rem; border-collapse: collapse; }
.doc th, .doc td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid rgb(229 229 229); vertical-align: top; }
.doc th { font-weight: 500; color: rgb(115 115 115); }
@media (prefers-color-scheme: dark) {
  .doc figure.diagram { background: rgb(23 23 23); }
  .doc figure.diagram img.light { display: none; }
  .doc figure.diagram img.dark { display: inline-block; }
  .doc th, .doc td { border-color: rgb(38 38 38); }
}