/* Typescale */
h1,
h2,
.badge,
.title-2xl,
.title-xl,
.title-l,
.title-m,
.title-s,
.title-xs {
  font-style: normal;
  font-weight: 600;
}

h1,
.title-2xl {
  font-size: 32px;
  letter-spacing: -1.2px;
  line-height: 40px;
}

h2,
.title-xl {
  font-size: 24px;
  letter-spacing: -0.64px;
  line-height: 32px;
}

.title-l {
  font-size: 20px;
  letter-spacing: -0.24px;
  line-height: 28px;
}

.title-m {
  font-size: 16px;
  letter-spacing: 0.08px;
  line-height: 24px;
}

.title-s {
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
}

.title-xs {
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
}

h3,
h4,
.subtitle-2xl,
.subtitle-xl,
.subtitle-l,
.subtitle-m,
.subtitle-s,
.subtitle-xs {
  font-style: normal;
  font-weight: 500;
}

.subtitle-2xl {
  font-size: 32px;
  letter-spacing: -1.2px;
  line-height: 40px;
}

.subtitle-xl {
  font-size: 24px;
  letter-spacing: -0.64px;
  line-height: 32px;
}

h3,
.subtitle-l {
  font-size: 20px;
  letter-spacing: -0.24px;
  line-height: 28px;
}

h4,
.subtitle-m {
  font-size: 16px;
  letter-spacing: 0.08px;
  line-height: 24px;
}

.subtitle-s {
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
}

.subtitle-xs {
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
}

p,
small,
.body-2xl,
.body-xl,
.body-l,
.body-m,
.body-s,
.body-xs {
  font-style: normal;
  font-weight: 400;
}

.body-2xl {
  font-size: 32px;
  letter-spacing: -1.2px;
  line-height: 40px;
}

.body-xl {
  font-size: 24px;
  letter-spacing: -0.64px;
  line-height: 32px;
}

.body-l {
  font-size: 20px;
  letter-spacing: -0.24px;
  line-height: 28px;
}

p,
.body-m {
  font-size: 16px;
  letter-spacing: 0.08px;
  line-height: 24px;
}

small,
.body-s {
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
}

.body-xs {
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
}

em,
pre,
code,
.mono-m,
.mono-s,
.mono-xs {
  font-family: JetBrains Mono, monospace;
  font-style: normal;
  font-weight: 400;
}

.mono-m {
  font-size: 16px;
  letter-spacing: 0.08px;
  line-height: 24px;
}

pre,
code,
.mono-s {
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
}

.mono-xs {
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
}

.markdoc {
  border-top: 1px solid var(--neutral-outline-1);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  --astro-code-background: var(--bg-2);
  --astro-code-color-background: var(--bg-2);
  --astro-code-color-text: #032f62;
  --astro-code-token-constant: #d73a49;
  --astro-code-token-string: #032f62;
  --astro-code-token-comment: #6a737d;
  --astro-code-token-keyword: #005cc5;
  --astro-code-token-parameter: #24292e;
  --astro-code-token-function: #005cc5;
  --astro-code-token-string-expression: #032f62;
  --astro-code-token-punctuation: #6a737d;
  --astro-code-token-link: #032f62;
}

.dark .markdoc {
  --astro-code-color-text: #9ecbff;
  --astro-code-token-constant: #f97583;
  --astro-code-token-string: #9ecbff;
  --astro-code-token-comment: #6a737d;
  --astro-code-token-keyword: #79b8ff;
  --astro-code-token-parameter: #e1e4e8;
  --astro-code-token-function: #79b8ff;
  --astro-code-token-string-expression: #9ecbff;
  --astro-code-token-punctuation: #6a737d;
  --astro-code-token-link: #9ecbff;
}

.markdoc:first-of-type {
  border-top: none;
}

.expanded-image-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
}
.expanded-image-bg img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 5px var(--neutral-outline-1);
  background: var(--bg-2);
  overflow: hidden;
}

.markdoc p:has(img),
.wide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--s10);
  margin-top: var(--s6);
  outline: 4px solid var(--bg-2);
  box-shadow: 0 0 0 5px var(--neutral-outline-1);
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-outline-1);
  background: var(--bg-2);
  overflow: hidden;
}

.markdoc li > img {
  outline: 4px solid var(--bg-2);
  box-shadow: 0 0 0 5px var(--neutral-outline-1);
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-outline-1);
  background: var(--bg-2);
}

.markdoc p > img,
.markdoc li > img {
  cursor: zoom-in;
}

.markdoc img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  width: auto;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.markdoc .wide {
  margin-top: var(--s12);
  margin-bottom: var(--s12);
}
@media (min-width: 1024px) {
  .markdoc .wide {
    width: 120%;
    margin-left: -10%;
    max-width: 120%;
    max-height: none;
  }
}
.markdoc .wide img {
  max-height: none;
}

.markdoc a {
  color: var(--primary-fg);
  text-decoration: none;
  font-weight: 500;
}
.markdoc a:hover {
  text-decoration: underline;
}

.markdoc li:not(:last-child) {
  margin-bottom: var(--s4);
}

.markdoc li {
  line-height: 24px;
}

.markdoc li > img {
  margin-top: var(--s4);
}

.markdoc ol,
.markdoc ul {
  margin-top: var(--s4);
  margin-bottom: var(--s4);
}

.markdoc ul ul,
.markdoc ul ol {
  margin-top: var(--s4);
}

.markdoc ol {
  counter-reset: custom-counter;
  list-style-type: none;
  padding: 0;
  margin-top: var(--s8);
  margin-bottom: var(--s8);
}
.markdoc ol > li {
  counter-increment: custom-counter;
  padding-left: calc(20px + var(--s4));
  position: relative;
}
.markdoc ol > li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 2px;
  content: counter(custom-counter);
  border-radius: 50%;
  min-height: 20px;
  min-width: 20px;
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
  font-weight: 500;
  background-color: var(--bg-3);
}
.markdoc ol {
  /* Respect HTML start attribute for common values */
}
.markdoc ol[start="2"] {
  counter-reset: custom-counter 1;
}
.markdoc ol[start="3"] {
  counter-reset: custom-counter 2;
}
.markdoc ol[start="4"] {
  counter-reset: custom-counter 3;
}
.markdoc ol[start="5"] {
  counter-reset: custom-counter 4;
}
.markdoc ol[start="6"] {
  counter-reset: custom-counter 5;
}
.markdoc ol[start="7"] {
  counter-reset: custom-counter 6;
}
.markdoc ol[start="8"] {
  counter-reset: custom-counter 7;
}
.markdoc ol[start="9"] {
  counter-reset: custom-counter 8;
}
.markdoc ol[start="10"] {
  counter-reset: custom-counter 9;
}

.markdoc h1 {
  margin-top: var(--s6);
  margin-bottom: var(--s6);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -1.2px;
  line-height: 40px;
}

.markdoc h2 {
  margin-top: var(--s18);
  margin-bottom: var(--s4);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.64px;
  line-height: 32px;
}

.markdoc h3 {
  margin-top: var(--s9);
  margin-bottom: var(--s5);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.24px;
  line-height: 28px;
}

.markdoc h4 {
  margin-top: var(--s8);
  margin-bottom: var(--s4);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08px;
  line-height: 24px;
}

/* Mixed prose + inline code: true baseline alignment (inline-block + vertical-align is unreliable) */
.markdoc h1:has(code),
.markdoc h2:has(code),
.markdoc h3:has(code),
.markdoc h4:has(code),
.markdoc h5:has(code),
.markdoc h6:has(code) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0.15em;
  /* column-gap replaces trailing margin before copy-link control */
}
.markdoc h1:has(code) > button,
.markdoc h2:has(code) > button,
.markdoc h3:has(code) > button,
.markdoc h4:has(code) > button,
.markdoc h5:has(code) > button,
.markdoc h6:has(code) > button {
  margin-left: 0;
}

.markdoc h1,
.markdoc h2,
.markdoc h3,
.markdoc h4,
.markdoc h5,
.markdoc h6 {
  text-wrap: balance;
}
.markdoc h1 a:hover,
.markdoc h2 a:hover,
.markdoc h3 a:hover,
.markdoc h4 a:hover,
.markdoc h5 a:hover,
.markdoc h6 a:hover {
  text-decoration: none;
}
.markdoc h1:hover button,
.markdoc h2:hover button,
.markdoc h3:hover button,
.markdoc h4:hover button,
.markdoc h5:hover button,
.markdoc h6:hover button {
  opacity: 1;
}
.markdoc h1 button,
.markdoc h2 button,
.markdoc h3 button,
.markdoc h4 button,
.markdoc h5 button,
.markdoc h6 button {
  display: inline;
  padding: 0;
  margin-left: var(--s2);
  cursor: pointer;
  opacity: 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--neutral-fg-2);
  border: none;
  outline: none;
  background: none;
  box-shadow: none;
}
.markdoc h1 button:hover,
.markdoc h2 button:hover,
.markdoc h3 button:hover,
.markdoc h4 button:hover,
.markdoc h5 button:hover,
.markdoc h6 button:hover {
  color: var(--primary-fg);
  position: relative;
}
.markdoc h1 button:hover:after,
.markdoc h2 button:hover:after,
.markdoc h3 button:hover:after,
.markdoc h4 button:hover:after,
.markdoc h5 button:hover:after,
.markdoc h6 button:hover:after {
  content: "Copy link";
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
  font-weight: 500;
  color: var(--neutral-fg-1);
  border-radius: var(--s1-5);
  background-color: var(--bg-0);
  padding: var(--s1) var(--s2);
  position: absolute;
  top: 2px;
  right: calc(var(--s3) * -1);
  transform: translateX(100%);
  text-wrap: nowrap;
  box-shadow: var(--card-box-shadow);
  z-index: 100;
}
.markdoc h1 button[data-clicked=true],
.markdoc h2 button[data-clicked=true],
.markdoc h3 button[data-clicked=true],
.markdoc h4 button[data-clicked=true],
.markdoc h5 button[data-clicked=true],
.markdoc h6 button[data-clicked=true] {
  color: var(--primary-fg);
  position: relative;
  opacity: 1;
}
.markdoc h1 button[data-clicked=true]:after,
.markdoc h2 button[data-clicked=true]:after,
.markdoc h3 button[data-clicked=true]:after,
.markdoc h4 button[data-clicked=true]:after,
.markdoc h5 button[data-clicked=true]:after,
.markdoc h6 button[data-clicked=true]:after {
  content: "Copied!";
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
  font-weight: 500;
  color: var(--neutral-fg-1);
  border-radius: var(--s1-5);
  background-color: var(--bg-0);
  padding: var(--s1) var(--s2);
  position: absolute;
  top: 2px;
  right: calc(var(--s3) * -1);
  transform: translateX(100%);
  text-wrap: nowrap;
  box-shadow: var(--card-box-shadow);
}

.markdoc h1[step],
.markdoc h2[step],
.markdoc h3[step],
.markdoc h4[step],
.markdoc h5[step],
.markdoc h6[step] {
  position: relative;
  padding-left: calc(20px + var(--s4));
}
.markdoc h1[step]:before,
.markdoc h2[step]:before,
.markdoc h3[step]:before,
.markdoc h4[step]:before,
.markdoc h5[step]:before,
.markdoc h6[step]:before {
  position: absolute;
  top: 4px;
  left: 0;
  content: attr(step);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  background-color: var(--neutral-fg-1);
  color: var(--bg-0);
  padding: 0;
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
  font-weight: 500;
}

.markdoc h4[step]:before,
.markdoc h5[step]:before,
.markdoc h6[step]:before {
  top: 2px;
}

.markdoc strong {
  font-weight: 600;
}

.markdoc p {
  font-size: 16px;
  letter-spacing: 0.08px;
  line-height: 24px;
  margin-bottom: var(--s5);
}
.markdoc p:last-child {
  margin-bottom: 0;
}

.markdoc aside[data-size=lg] p {
  font-size: 20px;
  letter-spacing: -0.24px;
  line-height: 28px;
}

.markdoc .mock-button {
  vertical-align: text-bottom;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s1-5);
  gap: 2px;
  border-radius: var(--s1);
  background-color: var(--bg-0);
  color: var(--neutral-fg-1);
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
  font-weight: 500;
  margin: 0 var(--s1);
  box-shadow: var(--card-box-shadow);
}
.markdoc .mock-button svg {
  fill: var(--neutral-fg-2);
  transform: scale(0.8);
}

.markdoc .wistia_responsive_padding {
  margin-bottom: var(--s5);
  margin-top: var(--s5);
}

/* Full-width responsive video (e.g. YouTube); keeps 16:9 */
.markdoc .video-wrapper {
  margin-top: var(--s6);
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}

.markdoc .video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.markdoc iframe {
  outline: 4px solid var(--bg-2);
  box-shadow: 0 0 0 5px var(--neutral-outline-1);
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-outline-1);
  overflow: hidden;
  padding: 0;
}

.markdoc blockquote {
  margin: var(--s5) 0;
  background-color: var(--bg-2);
  border-radius: var(--s1-5);
  padding: var(--s4) var(--s4) var(--s4) var(--s6);
  overflow: hidden;
  position: relative;
}
.markdoc blockquote:before {
  content: "Note";
  color: var(--neutral-fg-1);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
}
.markdoc blockquote:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--neutral-fg-2);
}
.markdoc blockquote code {
  font-size: 13px;
}
.markdoc blockquote > p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
}
.markdoc blockquote > p:first-child {
  margin-top: var(--s2);
}
.markdoc blockquote:last-child {
  margin-bottom: 0;
}

.markdoc code {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
  display: inline-block;
  background-color: var(--bg-3);
  border-radius: var(--s1);
  color: var(--neutral-fg-1);
  padding: 0 var(--s1);
}

/* Inline code in headings: match type scale + weight (alignment from :has(code) flex + baseline) */
.markdoc h1 code,
.markdoc h2 code,
.markdoc h3 code,
.markdoc h4 code,
.markdoc h5 code,
.markdoc h6 code {
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.1em 0.35em;
  border-radius: 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.markdoc pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s5);
  background-color: var(--bg-2);
  box-shadow: var(--button-box-shadow);
  overflow-x: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.markdoc pre code {
  font-family: "JetBrains Mono", monospace;
  line-height: unset;
  background-color: unset !important;
  border-radius: unset;
  color: unset;
  margin-bottom: unset;
  padding: unset;
}

.markdoc table {
  width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: var(--s5);
}
.markdoc table:last-child {
  margin-bottom: 0;
}

.markdoc table thead {
  background-color: var(--bg-2);
  border-radius: var(--s1-5);
}

.markdoc table thead th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07px;
  line-height: 16px;
  border-bottom: none;
  padding: var(--s2) var(--s4);
  text-transform: uppercase;
  color: var(--neutral-fg-2);
  text-align: left;
  text-wrap: nowrap;
}

.markdoc table thead th:first-child {
  border-top-left-radius: var(--s1-5);
  border-bottom-left-radius: var(--s1-5);
}

.markdoc table thead th:last-child {
  border-top-right-radius: var(--s1-5);
  border-bottom-right-radius: var(--s1-5);
}

.markdoc table td {
  padding: var(--s3) var(--s4);
  vertical-align: top;
  font-size: 14px;
  letter-spacing: 0.08px;
  line-height: 20px;
}
.markdoc table td > ul,
.markdoc table td > ol {
  margin-top: 0;
}

.markdoc table tr {
  border-bottom: 1px solid var(--neutral-outline-1);
}
.markdoc table tr:last-child {
  border-bottom: none;
}

.markdoc table.fixed {
  table-layout: fixed;
}

/* Only use two-column grid when section has main + aside (e.g. CLI help with examples sidebar).
   Sections with only a div (e.g. intro paragraph) must not get the grid or inline content can
   be split into grid cells and hidden. */
.markdoc section {
  display: grid;
  grid-template-columns: 66% 34%;
}
.markdoc section:has(> aside) {
  grid-template-columns: 50% 50%;
}
@media (max-width: 1024px) {
  .markdoc section {
    grid-template-columns: auto;
  }
}

.markdoc aside {
  margin-top: var(--s18);
  padding-left: var(--s12);
}
@media (max-width: 1024px) {
  .markdoc aside {
    padding-left: 0;
  }
}

.markdoc aside pre {
  text-wrap: wrap;
}
.markdoc aside pre:not(:last-child) {
  margin-bottom: var(--s4);
}

.markdoc aside {
  position: sticky;
  top: calc(var(--docs-nav-total-height) + var(--s6));
  height: fit-content;
}

.markdoc aside[data-size=tight] {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
}

.markdoc aside[data-size=tight] p {
  margin-bottom: var(--s2);
}

.markdoc aside[data-size=tight] p + p {
  margin-top: 0;
}

.markdoc aside[data-size=tight] .skill-install-callout--command-only,
.markdoc aside[data-size=tight] .skill-install-callout {
  margin-top: var(--s1);
  margin-bottom: var(--s2);
}

.markdoc aside[data-size=tight] .ai-actions-dropdown {
  margin-bottom: 0;
  margin-top: var(--s1);
}