hr {
  height: 8px;
  background-image: url(/assets/images/separator_alt.svg);
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  margin-inline: 0;
}

.playbook-post body,
.playbook-post p,
.playbook-post li {
  font-size: var(--desktop-body);
  line-height: var(--lh-desktop-body);
}
@media screen and (max-width: 600px) {
  .playbook-post body,
  .playbook-post p,
  .playbook-post li {
    font-size: var(--mobile-body);
    line-height: var(--lh-mobile-body);
  }
}
.playbook-post article .content {
  max-width: 600px;
  width: 100%;
}
.playbook-post article img {
  max-width: 100%;
  margin-bottom: var(--spacing-07);
}
.playbook-post h1 {
  font-size: var(--desktop-heading-01);
  line-height: var(--lh-desktop-heading-01);
  letter-spacing: var(--desktop-tracking-heading-02);
  font-family: "ITCC", serif;
  margin-bottom: var(--spacing-05);
}
@media screen and (max-width: 600px) {
  .playbook-post h1 {
    font-size: var(--mobile-heading-01);
    line-height: var(--lh-mobile-heading-01);
    letter-spacing: var(--mobile-tracking-heading-01);
  }
}
.playbook-post h2 {
  font-size: var(--desktop-heading-02);
  line-height: var(--lh-desktop-heading-02);
  letter-spacing: var(--desktop-tracking-heading-02);
  font-family: "ITCC", serif;
  margin-bottom: var(--spacing-04);
}
@media screen and (max-width: 600px) {
  .playbook-post h2 {
    font-size: var(--mobile-heading-02);
    line-height: var(--lh-mobile-heading-02);
    letter-spacing: var(--mobile-tracking-heading-02);
  }
}
.playbook-post h3 {
  font-size: var(--desktop-heading-03);
  line-height: var(--lh-desktop-heading-03);
  letter-spacing: var(--desktop-tracking-heading-03);
  font-family: "ITCC", serif;
  margin-bottom: var(--spacing-04);
}
@media screen and (max-width: 600px) {
  .playbook-post h3 {
    font-size: var(--mobile-heading-03);
    line-height: var(--lh-mobile-heading-03);
    letter-spacing: var(--mobile-tracking-heading-03);
  }
}
.playbook-post h4 {
  font-weight: 500;
  font-size: var(--desktop-heading-04);
  line-height: var(--lh-desktop-heading-04);
  font-family: "Yep", sans-serif;
  margin-bottom: var(--spacing-04);
  letter-spacing: var(--desktop-tracking-heading-02);
}
@media screen and (max-width: 600px) {
  .playbook-post h4 {
    font-size: var(--mobile-heading-04);
    line-height: var(--lh-mobile-heading-03);
  }
}
.playbook-post h5 {
  font-weight: 500;
  font-size: var(--desktop-heading-05);
  line-height: var(--lh-desktop-heading-05);
  font-family: "Yep", sans-serif;
  margin-bottom: var(--spacing-04);
  letter-spacing: var(--desktop-tracking-heading-03);
}
@media screen and (max-width: 600px) {
  .playbook-post h5 {
    font-size: var(--mobile-heading-05);
    line-height: var(--lh-mobile-heading-05);
  }
}
.playbook-post h6 {
  font-weight: 500;
  font-size: var(--desktop-heading-06);
  line-height: var(--lh-desktop-heading-06);
  font-family: "Yep", sans-serif;
  margin-bottom: var(--spacing-04);
}
@media screen and (max-width: 600px) {
  .playbook-post h6 {
    font-size: var(--mobile-heading-06);
    line-height: var(--lh-mobile-heading-06);
  }
}
.playbook-post h5 + p,
.playbook-post h5 + ul,
.playbook-post p + hr,
.playbook-post h5 + ul h5 + hr,
.playbook-post hr + p,
.playbook-post p + hr,
.playbook-post ul + hr,
.playbook-post hr + ul,
.playbook-post p + h5 {
  margin-bottom: var(--spacing-05);
}
.playbook-post h4 {
  margin-top: var(--spacing-09);
}
.playbook-post h4:first-child {
  margin-top: 0;
}
.playbook-post h1 + p {
  font-size: var(--desktop-body-xl);
  line-height: var(--lh-desktop-body-xl);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-09);
}
@media screen and (max-width: 600px) {
  .playbook-post h1 + p {
    font-size: var(--mobile-body-xl);
    line-height: var(--lh-mobile-body-xl);
  }
}
.playbook-post ul {
  font-size: var(--desktop-body);
  line-height: var(--lh-desktop-body);
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: var(--spacing-08);
}
@media screen and (max-width: 600px) {
  .playbook-post ul {
    font-size: var(--mobile-body);
    line-height: var(--lh-mobile-body);
  }
}
.playbook-post ul li {
  font-size: var(--desktop-body);
  line-height: var(--lh-desktop-body);
  margin-bottom: var(--spacing-02);
}
@media screen and (max-width: 600px) {
  .playbook-post ul li {
    font-size: var(--mobile-body);
    line-height: var(--lh-mobile-body);
    margin-bottom: var(--spacing-02);
  }
}
.playbook-post #site-header {
  background-color: transparent;
}
.playbook-post #site-header.fixed {
  background-color: var(--background);
  box-shadow: var(--sh-content);
}
.playbook-post .playbook-post-page {
  display: flex;
}
.playbook-post .playbook-post-page .playbook-component-navbar .nu-c-code:not(:first-child) {
  margin-block-start: var(--spacing-08);
}
.playbook-post .playbook-post-page > nav {
  display: inline-block;
  width: 288px;
  background-color: var(--background-secondary);
}
.playbook-post .playbook-post-page > nav ul {
  list-style: none;
  padding-inline-start: var(--spacing-06);
  overflow-y: auto;
  min-height: 100vh;
}
.playbook-post .playbook-post-page > nav ul li:not(.nu-c-code) {
  margin-bottom: 0;
}
.playbook-post .playbook-post-page > nav ul li a {
  text-decoration: none;
  color: var(--text-secondary);
  display: block;
}
.playbook-post .playbook-post-page > nav ul li a.is-active {
  font-weight: 500;
  color: var(--text-primary);
  background-color: var(--background-selected);
}
.playbook-post .playbook-post-page > nav li.s-section-header {
  font-size: var(--desktop-body-sm);
  line-height: var(--lh-desktop-body-sm);
  margin-bottom: var(--spacing-04);
}
.playbook-post .playbook-post-page > nav::before {
  content: "";
  background-color: var(--black);
  opacity: 0;
  left: 288px;
  transition: all 300ms ease-in-out;
  transition-delay: 301ms;
}
@media screen and (max-width: 600px) {
  .playbook-post .playbook-post-page > nav {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    transition: all 300ms ease-in-out;
  }
  .playbook-post .playbook-post-page > nav.is-active {
    z-index: 500;
    left: 0;
    height: 100%;
  }
  .playbook-post .playbook-post-page > nav.is-active::before {
    content: "";
    background-color: var(--black);
    opacity: 0.5;
    position: fixed;
    inset: 0;
    left: 288px;
    z-index: 100;
  }
}
.playbook-post .playbook-post-page .playbook-wrapper {
  width: 100%;
}
@media screen and (min-width: 901px) {
  .playbook-post .playbook-post-page .playbook-wrapper {
    margin-left: var(--spacing-15);
  }
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-main-nav {
  width: 100%;
  display: flex;
  justify-content: end;
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-main-nav nav {
  margin-left: auto;
  padding-block: var(--spacing-06);
  padding-inline: var(--spacing-06);
  align-items: center;
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-main-nav nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--spacing-04);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container {
  padding-top: var(--spacing-13);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container {
  margin-left: var(--spacing-15);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container #toc {
  list-style: none;
  border-left: 1px solid var(--border-muted);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container #toc ul, .playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container #toc ol {
  margin-bottom: var(--spacing-02);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container #toc li a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--desktop-body-sm);
  line-height: var(--lh-desktop-body-sm);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container #toc li ul, .playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container #toc li li {
  display: none;
}
@media screen and (max-width: 1200px) {
  .playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .toc-container {
    display: none;
  }
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .article-inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .documentation-container {
  padding-inline: var(--spacing-07);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .documentation-container a {
  color: var(--link);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .documentation-container a:hover {
  color: var(--link-hover);
}
.playbook-post .playbook-post-page .playbook-wrapper .playbook-post-container .documentation-container a:visited {
  color: var(--link-visited);
}

/* for markdown */
p {
  margin-bottom: var(--spacing-07);
  color: var(--text-primary);
}

strong {
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border);
  text-underline-offset: var(--spacing-02);
}

blockquote {
  padding: 0 0 0 12px;
  color: var(--text-primary);
  border-left: 3px solid var(--border);
  margin-bottom: var(--spacing-07);
}
blockquote > :first-child {
  margin-top: 0;
}
blockquote > :last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  margin-bottom: var(--spacing-07);
}

ul, ol {
  padding-left: 16px;
  margin-bottom: var(--spacing-07);
}
ul > li::marker, ol > li::marker {
  color: var(--border-strong);
}

table {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border-muted);
  border-radius: 3px;
  border-spacing: 0;
  margin-bottom: var(--spacing-07);
  font-size: var(--desktop-body);
  line-height: var(--lh-desktop-body);
}
@media screen and (max-width: 600px) {
  table {
    font-size: var(--mobile-body);
    line-height: var(--lh-mobile-body);
  }
}

th {
  padding: var(--spacing-02) var(--spacing-04);
  color: var(--doc-color-black);
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
}

td {
  padding: var(--spacing-02) var(--spacing-04);
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
}
tr:last-child td {
  border-bottom: none;
}

code {
  padding: 0 var(--spacing-01);
  font-weight: inherit;
  background-color: var(--background);
  border: 1.5px solid var(--border-muted);
  font-size: var(--fs-code);
  line-height: var(--lh-code);
  font-family: "JetBrains Mono", monospace;
  margin-bottom: var(--spacing-07);
  color: var(--text-primary);
}

pre {
  word-wrap: normal;
  padding: 0.25em 0.5em;
  background-color: var(--background-selected);
  overflow-x: scroll;
  margin-bottom: var(--spacing-07);
}
pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  overflow: visible;
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  background: transparent;
  border: 0;
}

span.c,
span.c1,
span.c2 {
  color: var(--text-secondary-alt);
}

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