@font-face {
  font-family: "Styrene Display";
  src: url("https://www-cdn.anthropic.com/e8f9c8ca51b03efb6315db351446fc972ab15abe/StyreneA-Medium-Web.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Styrene Display";
  src: url("https://www-cdn.anthropic.com/e8f9c8ca51b03efb6315db351446fc972ab15abe/StyreneA-Medium-Web.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Styrene";
  src: url("https://www-cdn.anthropic.com/6f87b6d99aefde021ac24f21295bf9e70f71472f/StyreneBLC-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Styrene";
  src: url("https://www-cdn.anthropic.com/6f87b6d99aefde021ac24f21295bf9e70f71472f/StyreneBLC-Regular.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Styrene";
  src: url("https://www-cdn.anthropic.com/3611e9e4aaaf466dbd47e2686f561e7de694cb6c/StyreneBLC-Medium.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Tiempos";
  src: url("https://www-cdn.anthropic.com/c3e09cefbfeb4e5eaca56b7bc8b9a1aa1aeda025/TiemposText-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Tiempos";
  src: url("https://www-cdn.anthropic.com/b198ca4e31a323b2abb84b3eeeb1eed1f471afa0/TiemposText-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Tiempos";
  src: url("https://www-cdn.anthropic.com/b198ca4e31a323b2abb84b3eeeb1eed1f471afa0/TiemposText-Medium.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Copernicus";
  src: url("https://www-cdn.anthropic.com/db30aec85c7615f4a4d3e23c0c941674ea67f8f5/Copernicus-Book.woff2")
    format("woff2");
  font-weight: 300; /* Assuming 300 is the lightest available weight */
  font-style: normal;
}

/* Color variables copied from https://github.com/anthropics/apps/blob/main/packages/ui/themes/generated/theme-colors.css */
:root {
  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
  --constant-book-cloth: 15 55% 80%;
  --constant-clay: 15 60% 85%;
  --constant-kraft: 25 40% 83%;
  --constant-manilla: 40 20% 92%;
  --constant-slate-000: 0 0% 100%;
  --constant-slate-050: 48 33.3% 97.1%;
  --constant-slate-100: 53 28.6% 94.5%;
  --constant-slate-150: 48 25% 92.2%;
  --constant-slate-200: 50 20.7% 88.6%;
  --constant-slate-250: 51 16.5% 84.5%;
  --constant-slate-300: 50 11.5% 79.6%;
  --constant-slate-350: 50 9% 73.7%;
  --constant-slate-400: 49 6.5% 66.9%;
  --constant-slate-450: 48 4.8% 59.2%;
  --constant-slate-500: 53 3.2% 51.4%;
  --constant-slate-550: 51 3.1% 43.7%;
  --constant-slate-600: 48 2.7% 35.9%;
  --constant-slate-650: 48 3.4% 29.2%;
  --constant-slate-700: 60 2.5% 23.3%;
  --constant-slate-750: 60 2.1% 18.4%;
  --constant-slate-800: 60 2.7% 14.5%;
  --constant-slate-850: 30 3.3% 11.8%;
  --constant-slate-900: 30 4% 9.8%;
  --constant-slate-950: 60 2.6% 7.6%;
  --constant-slate-1000: 60 3.4% 5.7%;
}

:root:not(.dark) {
  --accent-brand: 15 63.1% 59.6%;
  --accent-main-000: 15 55.6% 52.4%;
  --accent-main-100: 15 55.6% 52.4%;
  --accent-main-200: 15 63.1% 59.6%;
  --accent-main-900: 0 0% 0%;
  --accent-pro-000: 251 34.2% 33.3%;
  --accent-pro-100: 251 40% 45.1%;
  --accent-pro-200: 251 61% 72.2%;
  --accent-pro-900: 253 33.3% 91.8%;
  --accent-secondary-000: 210 73.7% 40.2%;
  --accent-secondary-100: 210 70.9% 51.6%;
  --accent-secondary-200: 210 70.9% 51.6%;
  --accent-secondary-900: 211 72% 90%;
  --bg-000: 0 0% 100%;
  --bg-100: 48 33.3% 97.1%;
  --bg-200: 53 28.6% 94.5%;
  --bg-300: 48 25% 92.2%;
  --bg-400: 50 20.7% 88.6%;
  --bg-500: 50 20.7% 88.6%;
  --border-100: 30 3.3% 11.8%;
  --border-200: 30 3.3% 11.8%;
  --border-300: 30 3.3% 11.8%;
  --border-400: 30 3.3% 11.8%;
  --danger-000: 0 61.4% 22.4%;
  --danger-100: 0 58.6% 34.1%;
  --danger-200: 0 58.6% 34.1%;
  --danger-900: 0 50% 95%;
  --oncolor-100: 0 0% 100%;
  --oncolor-200: 60 6.7% 97.1%;
  --oncolor-300: 60 6.7% 97.1%;
  --text-000: 60 2.6% 7.6%;
  --text-100: 60 2.6% 7.6%;
  --text-200: 60 2.5% 23.3%;
  --text-300: 60 2.5% 23.3%;
  --text-400: 51 3.1% 43.7%;
  --text-500: 51 3.1% 43.7%;
}

:root.dark {
  --accent-brand: 15 63.1% 59.6%;
  --accent-main-000: 15 55.6% 52.4%;
  --accent-main-100: 15 63.1% 59.6%;
  --accent-main-200: 15 63.1% 59.6%;
  --accent-main-900: 0 0% 0%;
  --accent-pro-000: 251 84.6% 74.5%;
  --accent-pro-100: 251 40.2% 54.1%;
  --accent-pro-200: 251 40% 45.1%;
  --accent-pro-900: 250 25.3% 19.4%;
  --accent-secondary-000: 210 71.1% 62%;
  --accent-secondary-100: 210 70.9% 51.6%;
  --accent-secondary-200: 210 70.9% 51.6%;
  --accent-secondary-900: 210 55.9% 24.6%;
  --bg-000: 60 2.1% 18.4%;
  --bg-100: 60 2.7% 14.5%;
  --bg-200: 30 3.3% 11.8%;
  --bg-300: 60 2.6% 7.6%;
  --bg-400: 60 3.4% 5.7%;
  --bg-500: 60 3.4% 5.7%;
  --border-100: 51 16.5% 84.5%;
  --border-200: 51 16.5% 84.5%;
  --border-300: 51 16.5% 84.5%;
  --border-400: 51 16.5% 84.5%;
  --danger-000: 0 73.1% 66.5%;
  --danger-100: 0 58.6% 34.1%;
  --danger-200: 0 58.6% 34.1%;
  --danger-900: 0 23% 15.6%;
  --oncolor-100: 0 0% 100%;
  --oncolor-200: 60 6.7% 97.1%;
  --oncolor-300: 60 6.7% 97.1%;
  --text-000: 48 33.3% 97.1%;
  --text-100: 48 33.3% 97.1%;
  --text-200: 50 9% 73.7%;
  --text-300: 50 9% 73.7%;
  --text-400: 48 4.8% 59.2%;
  --text-500: 48 4.8% 59.2%;
}

#home-header {
  font-family: "Copernicus", sans-serif;
  font-weight: 300 !important;
  font-size: 50px;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: --text-000;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
}

/* Responsive layout for the home header - left align on larger screens */
@media (min-width: 768px) {
  #home-header {
    justify-content: flex-start;
  }
}

.build-with {
  font-family: "Copernicus", sans-serif;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.claude-wordmark-wrapper {
  display: inline-flex;
  align-items: baseline;
  margin-left: 10px; /* Space between "Build with" and the wordmark */
}

.claude-wordmark {
  height: 40px; /* Adjust this value to match your desired size */
  width: auto;
  position: relative;
}

.dark #home-header {
  color: white;
}

.description-text {
  color: black;
}

.dark .description-text {
  color: white;
}

.dark .claude-wordmark {
  filter: invert(1);
}

:root {
  --bg-color: #f0efea;
}

.dark {
  --bg-color: #2b2b2b;
}

#background-div {
}

body,
input,
#category-select,
.dropdown-item,
#table-of-contents {
  font-family: "Styrene", sans-serif;
}

.eyebrow {
  font-family: "Styrene Display", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
}

#content-container {
  font-family: "Tiempos", serif;
}

#content-container h1,
#content-container h2,
#content-container h3,
#content-container h4,
#content-container h5,
#content-container h6 {
  font-family: "Styrene Display", sans-serif;
}

#content-container p {
  font-size: 1rem;
  line-height: 1.65rem;
}

.font-extrabold {
  font-weight: 600 !important;
}

.wide-table {
  width: 100%;
  overflow-x: auto;
}

.wide-table table {
  width: 175%;
  margin-bottom: 0;
}

/* Prompt Library */
#prompt-library-container {
  margin: 4rem auto;
  max-width: 48rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.prompt-library-title {
  font-size: 24px;
  text-align: center;
  font-weight: 700;
  color: #1f2937;
}

.dark .prompt-library-title {
  color: #e5e7eb;
}

.prompt-library-description {
  margin-top: 1rem;
  text-align: center;
}

.main-content {
  margin-bottom: 10rem;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.prompt-controllers {
  display: flex;
  gap: 0.5rem;
}

.prompt-search-container {
  position: relative;
  flex: 1 1 0%;
}

.prompt-search-icon-container {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  padding-left: 0.75rem;
}

.prompt-search-icon {
  margin-left: 0.25rem;
  margin-right: 0.75rem;
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: #6b7280;
  mask-image: url(https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
}

input.prompt-search-bar {
  display: block;
  height: 2.5rem;
  padding-left: 2.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  background-color: #ffffff;
  width: 100%;
  color: #111827;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark input.prompt-search-bar {
  color: #ffffff;
  background-color: rgb(var(--background-dark));
  border-color: #d1d5db1a;
}

input.prompt-search-bar:focus {
  outline-color: rgb(var(--primary));
}

.dark input.prompt-search-bar:focus {
  outline-color: rgb(var(--primary-light));
}

.dark .prompt-search-icon {
  background-color: #ffffff80;
}

#category-select {
  padding-left: 1rem;
  padding-right: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  border-width: 1px;
  color: #111827;
  background-color: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

.dark #category-select {
  background-color: rgb(var(--background-dark));
  border-color: #d1d5db1a;
  color: #ffffff;
}

#category-select:hover {
  background-color: #f9fafb;
}

.dark #category-select:hover {
  background-color: #ffffff0d;
}

#category-select:focus {
  outline-color: rgb(var(--primary));
}

.dark #category-select:focus {
  outline-color: rgb(var(--primary-light));
}

#categories-dropdown {
  top: calc(100% + 4px);
  padding: 0.5rem 0.5rem;
  display: none;
  position: absolute;
  z-index: 10;
  border-radius: 0.75rem;
  border-width: 1px;
  width: 100%;
  color: #111827;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark #categories-dropdown {
  background-color: rgb(var(--background-dark));
  border-color: #d1d5db1a;
  color: #ffffff;
}

#categories-dropdown-clickout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.dropdown-icon-container {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  padding-right: 0.25rem;
}

.dropdown-icon {
  margin-left: 0.25rem;
  margin-right: 0.75rem;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #6b7280;
  mask-image: url(https://mintlify.b-cdn.net/v6.5.1/solid/caret-down.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
}

.dark .dropdown-icon {
  background-color: #ffffff80;
}

#prompts-container {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}

.dropdown-item {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f9fafb;
}

.dark .dropdown-item:hover {
  background-color: #ffffff0d;
}

.check-icon {
  mask-image: url(https://mintlify.b-cdn.net/v6.5.1/solid/check.svg);
  height: 0.875rem;
  width: 1rem;
  background-color: rgb(var(--primary-light));
  mask-repeat: no-repeat;
  mask-position: center center;
}

.prompt-card {
  margin: -0.75rem;
  padding: 0.75rem;
  display: flex;
  border-radius: 1rem;
}

.prompt-card:hover {
  background-color: #03071208;
}

.dark .prompt-card:hover {
  background-color: #ffffff08;
}

.prompt-icon-container {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  border-radius: 0.75rem;
  height: 4rem;
  width: 4rem;
  background-color: #cb785c1a;
}

.prompt-icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: rgb(var(--primary-light));
  mask-repeat: no-repeat;
  mask-position: center center;
}

.prompt-title {
  color: rgb(31 41 55);
  font-weight: 600;
}

.dark .prompt-title {
  color: rgb(229 231 235);
}

.prompt-description {
  margin-top: 0.25rem;
}

#prompts-container {
  display: grid;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  #category-select {
    width: 16rem;
  }
}

@media (min-width: 1024px) {
  #prompts-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home page card styling */
.home-cards-custom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1.5rem;
}

.home-cards-custom .card {
  background: transparent;
  border: 0.5px solid hsl(var(--border-300));
  border-radius: 12px;
  padding: 0.25rem;
}

/* Responsive: change to 2 columns on tablet, single column on mobile */
@media (max-width: 1024px) {
  .home-cards-custom {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }
}

@media (max-width: 768px) {
  .home-cards-custom {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
  }
}

/* Utility classes */
.relative {
  position: relative;
}

.flex-1 {
  flex: 1 1 0%;
}



/* These styles mirror our design system (converted to plain CSS with Claude's help) from https://ui.product.ant.dev/button */

/* Base button styles */
.btn {
  position: relative;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 5rem;
  height: 2.25rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  font-family: Styrene;
  font-weight: 600;
  border-radius: 0.5rem;
  &:active {
    transform: scale(0.985);
  }

  /* Size variants */
  &.size-xs {
    height: 1.75rem;
    min-width: 3.5rem;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
  
  &.size-sm {
    height: 2rem;
    min-width: 4rem;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
  }

  &.size-lg {
    height: 2.75rem;
    min-width: 6rem;
    padding: 0 1.25rem;
    border-radius: 0.6rem;
  }

  &:disabled {
    pointer-events: none;
    opacity: 0.5;
    box-shadow: none;
  }

  &:focus-visible {
    outline: none;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
  }

  /* Primary variant */
  &.primary {
    font-weight: 600;
    color: hsl(var(--oncolor-100));
    background-color: hsl(var(--accent-main-100));
    background-image: linear-gradient(
      to right,
      hsl(var(--accent-main-100)) 0%,
      hsl(var(--accent-main-200) / 0.5) 50%,
      hsl(var(--accent-main-200)) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    border: 0.5px solid hsl(var(--border-300) / 0.25);
    box-shadow: 
      inset 0 0.5px 0px rgba(255, 255, 0, 0.15),
      0 1px 1px rgba(0, 0, 0, 0.05);
    text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      background-position: 100% 0%;
      background-image: linear-gradient(
        to right,
        hsl(var(--accent-main-200)) 0%,
        hsl(var(--accent-main-200)) 100%
      );
    }

    &:active {
      background-color: hsl(var(--accent-main-000));
      box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.2);
      transform: scale(0.985);
    }
  }

  /* Flat variant */
  &.flat {
    font-weight: 500;
    color: hsl(var(--oncolor-100));
    background-color: hsl(var(--accent-main-100));
    transition: background-color 150ms;

    &:hover {
      background-color: hsl(var(--accent-main-200));
    }
  }

  /* Secondary variant */
  &.secondary {
    font-weight: 600;
    color: hsl(var(--text-100) / 0.9);
    background-image: radial-gradient(
      ellipse at center,
      hsl(var(--bg-500) / 0.1) 50%,
      hsl(var(--bg-500) / 0.3) 100%
    );
    border: 0.5px solid hsl(var(--border-400));
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: hsl(var(--text-000));
      background-color: hsl(var(--bg-500) / 0.6);
    }

    &:active {
      background-color: hsl(var(--bg-500) / 0.5);
    }
  }

  /* Outline variant */
  &.outline {
    font-weight: 600;
    color: hsl(var(--text-200));
    background-color: transparent;
    border: 1.5px solid currentColor;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: hsl(var(--text-100));
      background-color: hsl(var(--bg-400));
      border-color: hsl(var(--bg-400));
    }
  }

  /* Ghost variant */
  &.ghost {
    color: hsl(var(--text-200));
    border-color: transparent;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: hsl(var(--text-100));
      background-color: hsl(var(--bg-500) / 0.4);
    }

    &:active {
      background-color: hsl(var(--bg-400));
    }
  }

  /* Underline variant */
  &.underline {
    opacity: 0.8;
    text-decoration-line: none;
    text-underline-offset: 3px;
    transition: all 150ms;

    &:hover {
      opacity: 1;
      text-decoration-line: underline;
    }

    &:active {
      transform: scale(0.985);
    }
  }

  /* Danger variant */
  &.danger {
    font-weight: 600;
    color: hsl(var(--oncolor-100));
    background-color: hsl(var(--danger-100));
    transition: background-color 150ms;

    &:hover {
      background-color: hsl(var(--danger-200));
    }
  }
}


'use client'

const styles = `
@font-face {
  font-family: 'Styrene';
  src: url('/fonts/Styrene_B_Family/StyreneB-Medium-Trial.otf') format('opentype');
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: 'Styrene';
  src: url('/fonts/Styrene_B_Family/StyreneB-Regular-Trial.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tiempos';
  src: url('/fonts/Tiempos_Text/test-tiempos-text-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

#inkeep-widget-root {
  font-family: 'Tiempos', sans-serif;
  z-index: 1000 !important; /* Ensure widget root is above normal content but below critical overlays */
}

.ikp-modal__content {
  border-radius: 1rem;
}

[data-theme='light'] .ikp-ai-chat-input__fieldset {
  box-shadow: none;
  border: 1px solid var(--ikp-color-gray-300);
  background: #F8F8F7;
}

.ikp-chat-button__button {
  font-family: 'Styrene', sans-serif;
}

/* Fix z-index to position Ask AI button in front of other elements */
#inkeep-widget-root .ikp-chat-button {
  z-index: 1000 !important;
}

#inkeep-widget-root .ikp-chat-button__button {
  z-index: 1000 !important;
}

.ikp-ai-chat-tagline__container, .ikp-ai-search-tagline__container, .ikp-markdown-code, .ikp-ai-chat-message-source-item, .ikp-ai-chat-message-sources__header, .ikp-ai-chat-header__toolbar, .ikp-ai-chat-example-questions-label, .ikp-ai-chat-help-actions__menu-item, .ikp-ai-ask-ai-trigger, .ikp-ai-search-results__item-breadcrumbs, .ikp-ai-search-results__item-title, .ikp-ai-search-results__item-tag, .ikp-ai-search-results__item-preview__outline__title {
  font-family: 'Styrene', sans-serif;
}

button, input, textarea {
  font-family: 'Styrene', sans-serif;
}


.ikp-ai-chat-input__send-button {
  color: #ba5b38;
}


.ikp-ai-chat-tagline__container, .ikp-ai-search-tagline__container {
  align-items: center;
  position: relative;
}

.ikp-ai-chat-tagline__text, .ikp-ai-search-tagline__text {
  visibility: hidden;
  width: 20px;
  color: var(--ikp-color-gray-600);
}

.ikp-ai-chat-tagline__text:before, .ikp-ai-search-tagline__text:before {
  content: 'By';
  font-weight: normal;
  visibility: visible;
}

.ikp-ai-chat-tagline__container:after, .ikp-ai-search-tagline__container:after {
  content: '';
  margin-left: 1.35rem;
  width: 90px;
  height: 10px;
  background: url('https://storage.googleapis.com/customer-imgs/anthropic.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ikp-ai-chat-tagline__container:before, .ikp-ai-search-tagline__container:before {
  content: '&';
  position: absolute;
  right: 90px;
  color: #8d8c87;
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-50%);
  top: 50%;
}

[data-theme='dark'] .ikp-ai-chat-tagline__container:before, [data-theme='dark'] .ikp-ai-search-tagline__container:before {
  color: #ffffff7a;
}

[data-theme='dark'] .ikp-ai-chat-tagline__container:after, [data-theme='dark'] .ikp-ai-search-tagline__container:after {
  background: url('https://storage.googleapis.com/customer-imgs/anthropic-darkmode.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-theme='dark'] .ikp-ai-ask-ai-trigger__query {
  background: linear-gradient(270deg, var(--ikp-color-inkeep-expanded-primary-100), transparent) -200% 50% / 25% 100% no-repeat, var(--ikp-color-gray-dark-100);
}

.inkeep-widget-vars {
  --ikp-color-inkeep-expanded-primary-50: #f6f6f6 !important;
  --ikp-color-inkeep-expanded-primary-100: #e7e7e7 !important;
  --ikp-color-inkeep-expanded-primary-200: #d1d1d1 !important;
  --ikp-color-inkeep-expanded-primary-300: #b0b0b0 !important;
  --ikp-color-inkeep-expanded-primary-400: #888888 !important;
  }
`

function loadScript(url, callback) {
  const script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  script.integrity = "sha256-LV6bqYA5Zt9nUiD3TiynmzBTYJbesZZk9dsMx1Fi0wU=";
  script.crossOrigin = "anonymous";
  script.onload = callback;
  document.head.appendChild(script);
}

loadScript(
  "https://cdn.jsdelivr.net/npm/@inkeep/cxkit-mintlify@0.5.73/dist/index.js",
  () => {
    const baseSettings = {
      // API key from: https://portal.inkeep.com/anthropic/projects/clw8tmfhy000ntf8xbbpq60zz/integrations/cm7zlemlb005ws601sc7kudd5
      apiKey: '8f9c3d77d99a05677fd5bdf7a1f4fc1a6e65ce12aabe65cf',
      primaryBrandColor: '#181818',
      colorMode: {
        sync: {
          target: document.documentElement,
          isDarkMode: (attributes) => !!attributes.class?.includes("dark"),
          attributes: ['class'],
        },
      },
      theme: {
        styles: [
          {
            key: '1',
            type: 'style',
            value: styles,
          },
        ],
        fontFamily: {
          heading: "'Styrene'",
          body: "'Tiempos'",
        },
        colors: {
          gray: {
            50: '#f9f9f8',
            100: '#f1f1f0',
            200: '#e9e8e7',
            300: '#e2e1df',
            400: '#cfcec6',
            500: '#a3a08f',
            600: '#797872',
            700: '#5a5953',
            800: '#42413B',
            900: '#21201C',
          },
        },
      },
      transformSource: (source) => {
        const urlPatterns = {
          support: 'support.anthropic.com',
          home: 'anthropic.com',
          github: 'github.com/anthropics',
          docs: 'docs.anthropic.com',
        }
        const tabConfig = {
          [urlPatterns.support]: {
            tab: 'Support',
            icon: 'IoHelpBuoyOutline',
            getBreadcrumbs: (crumbs) => ['Support', ...crumbs.slice(1)],
          },
          [urlPatterns.docs]: {
            tab: 'Docs',
            icon: 'IoDocumentTextOutline',
            getBreadcrumbs: (crumbs) => ['Docs', ...crumbs.slice(1)],
          },
          [urlPatterns.home]: {
            tab: 'Home',
            icon: 'IoHomeOutline',
            getBreadcrumbs: (crumbs) => ['Home', ...crumbs.slice(1)],
          },
          [urlPatterns.github]: {
            tab: 'GitHub',
            icon: 'FaGithub',
            getBreadcrumbs: (crumbs) => ['GitHub', ...crumbs.slice(1)],
          },
        }

        // Find matching config based on URL
        const matchingPattern = Object.keys(tabConfig).find((pattern) => source.url.includes(pattern))
        const config = matchingPattern ? tabConfig[matchingPattern] : null

        if (!config) {
          return source
        }

        const breadcrumbs = config.getBreadcrumbs(source.breadcrumbs)
        const existingTabs = source.tabs ?? []

        // Check if tab already exists
        const tabExists = existingTabs.some((existingTab) =>
          typeof existingTab === 'string'
            ? existingTab === config.tab
            : Array.isArray(existingTab) && existingTab[0] === config.tab,
        )

        const tabs = tabExists
          ? existingTabs
          : [
            ...existingTabs,
            [
              config.tab,
              { breadcrumbs: breadcrumbs[0] === config.tab ? breadcrumbs.slice(1) : breadcrumbs },
            ],
          ]

        return {
          ...source,
          breadcrumbs,
          tabs,
          icon: { builtIn: config.icon },
        }
      },
    }

    const aiChatSettings = {
      chatSubjectName: 'Claude',
      aiAssistantAvatar: {
        light:
          'https://storage.googleapis.com/organization-image-assets/anthropic-botAvatarSrcUrl-1715877069137.svg',
        dark: 'https://storage.googleapis.com/organization-image-assets/anthropic-botAvatarDarkSrcUrl-1715877068491.svg',
      },
      getHelpOptions: [
        {
          name: 'Support Center',
          icon: {
            builtIn: 'IoHelpBuoyOutline',
          },
          action: {
            type: 'open_link',
            url: 'https://support.anthropic.com/en/',
          },
        },
        {
          name: 'Github',
          icon: {
            builtIn: 'FaGithub',
          },
          action: {
            type: 'open_link',
            url: 'https://github.com/anthropics',
          },
        },
      ],
      exampleQuestions: [
        'How do I create structured JSON output?',
        'For few shot prompting, how do I pick examples?',
        "How can I prompt Claude to reply a user's language?",
      ],
    }

    const searchSettings = {
      tabs: [
        ['Docs', { isAlwaysVisible: true }],
        ['All', { isAlwaysVisible: true }],
        'Support',
        'Home',
        'GitHub',
      ],
    }

    const settings = {
      baseSettings,
      aiChatSettings,
      searchSettings,
      askAILabel: 'Ask Claude',
      askAICardLabel: 'Ask Claude about',
    }

    // Initialize the UI components
    Inkeep.ModalSearchAndChat(settings); // Search Bar
    Inkeep.ChatButton(settings); // 'Ask AI' button
  }
);


Count the number of tokens in a Message.

The Token Count API can be used to count the number of tokens in a Message, including tools, images, and documents, without creating it.

Learn more about token counting in our [user guide](/en/docs/build-with-claude/token-counting)

Count Message tokens

Message

Type

APIError

AuthenticationError

Data

Media Type

Base64ImageSource

PDF (base64)

Create a cache control breakpoint at this content block.

Cache Control

Name of the tool.

This is how the tool will be called by the model and in `tool_use` blocks.

Name

Bash tool (2024-10-22)

Bash tool (2025-01-24)

BillingError

The time-to-live for the cache control breakpoint.

This may be one the following values:
- `5m`: 5 minutes
- `1h`: 1 hour

Defaults to `5m`.

CacheControlEphemeral

CodeExecutionToolResultErrorCode

Code execution tool (2025-05-22)

Display Height Px

The X11 display number (e.g. 0, 1) for the display.

Display Number

Display Width Px

Computer use tool (2024-01-22)

Computer use tool (2025-01-24)

Content

Content block

File Id

File document

FileImageSource

GatewayTimeoutError

Role

InputMessage

Properties

Required

InputSchema

InvalidRequestError

NotFoundError

OverloadedError

PermissionError

Plain text

RateLimitError

Cited Text

Document Index

Document Title

End Char Index

Start Char Index

Character location

Enabled

RequestCitationsConfig

RequestCodeExecutionOutputBlock

Return Code

Stderr

Stdout

Code execution result

Tool Use Id

Code execution tool result

Code execution tool error

A content block that represents a file to be uploaded to the container
Files uploaded via this block will be available in the container's input directory.

Container upload

End Block Index

Start Block Index

Content block location

Context

Title

Document

Source

Image

Allowed Tools

RequestMCPServerToolConfiguration

Authorization Token

RequestMCPServerURLDefinition

Is Error

MCP tool result

Input

Server Name

MCP tool use

End Page Number

Start Page Number

Page location

Redacted thinking

Server tool use

Citations

Text

Signature

Thinking

Tool result

Tool use

Encrypted Content

Page Age

RequestWebSearchResultBlock

Encrypted Index

RequestWebSearchResultLocationCitation

Web search tool result

RequestWebSearchToolResultError

Text editor tool (2024-10-22)

Text editor tool (2025-01-24)

Text editor tool (2025-04-29)

Disabled

Determines how many tokens Claude can use for its internal reasoning process. Larger budgets can enable more thorough analysis for complex problems, improving response quality. 

Must be ≥1024 and less than `max_tokens`.

See [extended thinking](https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking) for details.

Budget Tokens

Description of what this tool does.

Tool descriptions should be as detailed as possible. The more information that the model has about what the tool is and how to use it, the better it will perform. You can use natural language descriptions to reinforce important aspects of the tool input JSON schema.

Description

[JSON schema](https://json-schema.org/draft/2020-12) for this tool's input.

This defines the shape of the `input` that your tool accepts and that the model will produce.

Custom tool

Whether to disable parallel tool use.

Defaults to `false`. If set to `true`, the model will output exactly one tool use.

Disable Parallel Tool Use

The model will automatically decide whether to use tools.

Whether to disable parallel tool use.

Defaults to `false`. If set to `true`, the model will output at most one tool use.

Auto

The model will not be allowed to use tools.

None

The model will use the specified tool with `tool_choice.name`.

Tool

URLImageSource

PDF (URL)

City

The two letter [ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) of the user.

Country

Region

The [IANA timezone](https://nodatime.org/TimeZones) of the user.

Timezone

UserLocation

WebSearchToolResultErrorCode

If provided, only these domains will be included in results. Cannot be used alongside `blocked_domains`.

Allowed Domains

If provided, these domains will never appear in results. Cannot be used alongside `allowed_domains`.

Blocked Domains

Maximum number of times the tool can be used in the API request.

Max Uses

Parameters for the user's location. Used to provide more relevant search results.

Web search tool (2025-03-05)

CountMessageTokensParams

CountMessageTokensResponse

Error response.

See our [errors documentation](https://docs.anthropic.com/en/api/errors) for more details.

ErrorResponse

Count tokens in a Message

Anthropic

Claude is a highly performant, trustworthy, and intelligent AI platform built by Anthropic. Claude excels at tasks involving language, reasoning, analysis, coding, and more.

Intro to Claude

Let's learn how to use the Anthropic API to build with Claude.

Get started

Get started with Claude

Claude is a family of state-of-the-art large language models developed by Anthropic. This guide introduces our models and compares their performance with legacy models. 

Models overview

Selecting the optimal Claude model for your application involves balancing three key considerations: capabilities, speed, and cost. This guide helps you make an informed decision based on your specific requirements.

Choosing a model

Choosing the right model

Migrating to Claude 4

Model deprecations

Learn about Anthropic's pricing structure for models and features

Pricing

Claude is a family of [highly performant and intelligent AI models](/en/docs/about-claude/models) built by Anthropic. While Claude is powerful and extensible, it's also the most trustworthy and reliable AI available. It follows critical protocols, makes fewer mistakes, and is resistant to jailbreaks—allowing [enterprise customers](https://www.anthropic.com/customers) to build the safest AI-powered applications at scale.

Building with Claude

Overview

Guides to common use cases

This guide walks through how to harness Claude's advanced natural language understanding capabilities to classify customer support tickets at scale based on customer intent, urgency, prioritization, customer profile, and more.

Ticket routing

This guide walks through how to leverage Claude's advanced conversational capabilities to handle customer inquiries in real time, providing 24/7 support, reducing wait times, and managing high support volumes with accurate responses and positive interactions.

Customer support agent

Content moderation is a critical aspect of maintaining a safe, respectful, and productive environment in digital applications. In this guide, we'll discuss how Claude can be used to moderate content within your digital application.

Content moderation

This guide walks through how to leverage Claude's advanced natural language processing capabilities to efficiently summarize legal documents, extracting key information and expediting legal research. With Claude, you can streamline the review of contracts, litigation prep, and regulatory work, saving time and ensuring accuracy in your legal processes.

Legal summarization

Context windows

These concepts are not unique to Anthropic’s language models, but we present a brief summary of key terms below.

Using the APIs

API reference

SDKs

Examples

3rd-party APIs

Support & configuration

Count Message tokens

Headers

Body

Response