.developer-example-intro { padding-block: clamp(60px, 8vw, 105px) 45px; }
.developer-example-intro h1 { max-width: 950px; margin: 15px 0 22px; font-size: clamp(2.6rem, 4.7vw, 4.8rem); letter-spacing: -.045em; line-height: 1.11; }
.developer-example-lede { max-width: 850px; font-size: clamp(1.05rem, 1.55vw, 1.28rem); line-height: 1.7; color: #323844; }
.developer-example-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 23px; margin-top: 28px; }
.developer-example-note { margin-top: 30px; max-width: 865px; padding: 20px 24px; background: #eceef5; border-left: 3px solid #5b5ce2; border-radius: 5px; color: #515867; line-height: 1.7; font-size: .96rem; }
.developer-example-content { padding-block: 36px 66px; }
.developer-example-section-heading { max-width: 870px; margin-bottom: 28px; }
.developer-example-section-heading h2,.developer-example-setup h2 { font-size: clamp(1.95rem, 3.2vw, 3.15rem); letter-spacing: -.038em; line-height: 1.2; margin: 14px 0 18px; }
.developer-example-section-heading > p:not(.eyebrow),.developer-example-setup > p:not(.eyebrow) { max-width: 850px; color: #667085; line-height: 1.7; font-size: 1.01rem; }
.developer-code-card { border-radius: 12px; overflow: hidden; border: 1px solid #dfe3eb; background: white; margin-block: 23px; min-width: 0; }
.developer-code-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 24px; }
.developer-code-card-header h3 { font-size: 1.05rem; margin: 0; color: #151822; }
.developer-code-card-header h3 code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.developer-code-card-header p { margin: 8px 0 0; color: #667085; font-size: .91rem; line-height: 1.55; }
.developer-code-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.developer-code-card-actions .developer-copy-button { white-space: nowrap; }
.developer-copy-feedback { color: #415366; font-size: .85rem; line-height: 1.45; max-width: 240px; }
.developer-code-pre { box-sizing: border-box; margin: 0; padding: 22px 26px; max-height: 540px; overflow: auto; white-space: pre; overflow-wrap: normal; tab-size: 4; background: #151822; color: #f3f4f6; font-size: .85rem; line-height: 1.7; }
.developer-code-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: inherit; }
.developer-code-pre:focus-visible { outline: 3px solid #7778ff; outline-offset: -3px; }
.developer-code-short { max-height: none; }
.developer-example-setup { padding-block: 64px 100px; border-top: 1px solid #dfe3eb; }
.developer-example-setup > p code { background: #eceef5; padding: 2px 5px; border-radius: 3px; font-size: .92em; }
@media (max-width: 680px) {
  .developer-example-intro { padding-block: 50px 26px; }
  .developer-example-nav { align-items: stretch; flex-direction: column; }
  .developer-code-card-header { padding: 17px 18px; align-items: flex-start; flex-direction: column; }
  .developer-code-card-actions { width: 100%; }
  .developer-code-pre { padding: 18px; font-size: .78rem; }
  .developer-example-note { padding: 16px 18px; }
}